From 5d715168d37d375d400a9b58311ea5df84bcfa83 Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Thu, 5 Mar 2026 11:53:23 +0100 Subject: [PATCH 1/9] update ui5wc --- package.json | 12 +- packages/ai/package.json | 2 +- packages/base/package.json | 2 +- packages/charts/package.json | 4 +- packages/compat/package.json | 4 +- packages/cypress-commands/package.json | 4 +- packages/main/package.json | 8 +- yarn.lock | 180 ++++++++++++------------- 8 files changed, 108 insertions(+), 108 deletions(-) diff --git a/package.json b/package.json index 1549eb9d5e0..225dc001475 100644 --- a/package.json +++ b/package.json @@ -40,11 +40,11 @@ "@storybook/addon-a11y": "10.2.14", "@storybook/addon-docs": "10.2.14", "@storybook/react-vite": "10.2.14", - "@ui5/webcomponents": "2.19.2", - "@ui5/webcomponents-ai": "2.19.2", - "@ui5/webcomponents-compat": "2.19.2", - "@ui5/webcomponents-fiori": "2.19.2", - "@ui5/webcomponents-icons": "2.19.2", + "@ui5/webcomponents": "2.20.0", + "@ui5/webcomponents-ai": "2.20.0", + "@ui5/webcomponents-compat": "2.20.0", + "@ui5/webcomponents-fiori": "2.20.0", + "@ui5/webcomponents-icons": "2.20.0", "react": "19.2.4", "react-dom": "19.2.4", "remark-gfm": "4.0.1", @@ -66,7 +66,7 @@ "@types/node": "24.10.15", "@types/react": "19.2.14", "@types/react-dom": "19.2.3", - "@ui5/webcomponents-tools": "2.19.2", + "@ui5/webcomponents-tools": "2.20.0", "@vitejs/plugin-react": "5.1.4", "chromatic": "15.1.1", "cssnano": "7.1.2", diff --git a/packages/ai/package.json b/packages/ai/package.json index 2d1c8760df0..6a4e10d4522 100644 --- a/packages/ai/package.json +++ b/packages/ai/package.json @@ -53,7 +53,7 @@ "@ui5/webcomponents-react-base": "workspace:~" }, "peerDependencies": { - "@ui5/webcomponents-ai": "~2.19.0", + "@ui5/webcomponents-ai": "~2.20.0", "react": "^18 || ^19" }, "publishConfig": { diff --git a/packages/base/package.json b/packages/base/package.json index 248ac96bbfe..1b179101774 100644 --- a/packages/base/package.json +++ b/packages/base/package.json @@ -88,7 +88,7 @@ }, "peerDependencies": { "@types/react": "*", - "@ui5/webcomponents-base": "~2.19.0", + "@ui5/webcomponents-base": "~2.20.0", "react": "^18 || ^19" }, "peerDependenciesMeta": { diff --git a/packages/charts/package.json b/packages/charts/package.json index 6e00a9b27ea..406a2e0501e 100644 --- a/packages/charts/package.json +++ b/packages/charts/package.json @@ -131,8 +131,8 @@ "recharts": "2.15.4" }, "peerDependencies": { - "@ui5/webcomponents-react": "~2.19.0", - "@ui5/webcomponents-react-base": "~2.19.0", + "@ui5/webcomponents-react": "~2.20.0", + "@ui5/webcomponents-react-base": "~2.20.0", "react": "^18 || ^19" }, "publishConfig": { diff --git a/packages/compat/package.json b/packages/compat/package.json index e8941497b9c..6b7c9f8589d 100644 --- a/packages/compat/package.json +++ b/packages/compat/package.json @@ -93,8 +93,8 @@ "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", - "@ui5/webcomponents-compat": "~2.19.0", - "@ui5/webcomponents-react": "~2.19.0", + "@ui5/webcomponents-compat": "~2.20.0", + "@ui5/webcomponents-react": "~2.20.0", "react": "^18 || ^19", "react-dom": "^18 || ^19" }, diff --git a/packages/cypress-commands/package.json b/packages/cypress-commands/package.json index d57426c436a..6eab9f1fd1c 100644 --- a/packages/cypress-commands/package.json +++ b/packages/cypress-commands/package.json @@ -23,8 +23,8 @@ "clean": "rimraf dist api-commands.json api-queries.json" }, "peerDependencies": { - "@ui5/webcomponents": "~2.19.0", - "@ui5/webcomponents-base": "~2.19.0", + "@ui5/webcomponents": "~2.20.0", + "@ui5/webcomponents-base": "~2.20.0", "cypress": "^12 || ^13 || ^14 || ^15" }, "peerDependenciesMeta": { diff --git a/packages/main/package.json b/packages/main/package.json index 0e382147c4e..875b8564373 100644 --- a/packages/main/package.json +++ b/packages/main/package.json @@ -813,10 +813,10 @@ "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", - "@ui5/webcomponents": "~2.19.0", - "@ui5/webcomponents-base": "~2.19.0", - "@ui5/webcomponents-fiori": "~2.19.0", - "@ui5/webcomponents-icons": "~2.19.0", + "@ui5/webcomponents": "~2.20.0", + "@ui5/webcomponents-base": "~2.20.0", + "@ui5/webcomponents-fiori": "~2.20.0", + "@ui5/webcomponents-icons": "~2.20.0", "react": "^18 || ^19", "react-dom": "^18 || ^19" }, diff --git a/yarn.lock b/yarn.lock index 1c4ec33c658..7cb9d5617f1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3416,10 +3416,10 @@ __metadata: languageName: node linkType: hard -"@sap-theming/theming-base-content@npm:11.29.3": - version: 11.29.3 - resolution: "@sap-theming/theming-base-content@npm:11.29.3" - checksum: 10c0/8da4e8c0dafce793fb410832534eebf1f35eb1eb15f55f030810cfd32a15d45778ead2b89b04418f4e187f62f4af5afacf9a8191a7b2d5b91253715878be058e +"@sap-theming/theming-base-content@npm:11.33.0": + version: 11.33.0 + resolution: "@sap-theming/theming-base-content@npm:11.33.0" + checksum: 10c0/3b1ff0383cd0159e9c7b0544339f4b9bba9ae01ef6595d9370f4cd1eb1a879d62b5de963669c54d4148337bf63d86d32de66cb6346380a1e9a517a1fea68a1ab languageName: node linkType: hard @@ -4906,42 +4906,42 @@ __metadata: dependencies: "@ui5/webcomponents-react-base": "workspace:~" peerDependencies: - "@ui5/webcomponents-ai": ~2.19.0 + "@ui5/webcomponents-ai": ~2.20.0 react: ^18 || ^19 languageName: unknown linkType: soft -"@ui5/webcomponents-ai@npm:2.19.2": - version: 2.19.2 - resolution: "@ui5/webcomponents-ai@npm:2.19.2" +"@ui5/webcomponents-ai@npm:2.20.0": + version: 2.20.0 + resolution: "@ui5/webcomponents-ai@npm:2.20.0" dependencies: - "@ui5/webcomponents": "npm:2.19.2" - "@ui5/webcomponents-base": "npm:2.19.2" - "@ui5/webcomponents-icons": "npm:2.19.2" - "@ui5/webcomponents-theming": "npm:2.19.2" - checksum: 10c0/2f69aa40a5d790e74645dc59e8267d37982180c5fb9050f16efb6966424a39df591e76097c052ad4e0d0eae18de2552772cfda2b2d4cda09e5ba8b5d8ad60557 + "@ui5/webcomponents": "npm:2.20.0" + "@ui5/webcomponents-base": "npm:2.20.0" + "@ui5/webcomponents-icons": "npm:2.20.0" + "@ui5/webcomponents-theming": "npm:2.20.0" + checksum: 10c0/e166615f43a3dc16584fda2b6bd290699b2210df1d7a1d91a6c1673aebdb39413428af5dcaf1ff7aa8447b013caacadb9b5160053d2dbc965fd30ef6e642e02a languageName: node linkType: hard -"@ui5/webcomponents-base@npm:2.19.2": - version: 2.19.2 - resolution: "@ui5/webcomponents-base@npm:2.19.2" +"@ui5/webcomponents-base@npm:2.20.0": + version: 2.20.0 + resolution: "@ui5/webcomponents-base@npm:2.20.0" dependencies: "@lit-labs/ssr-dom-shim": "npm:^1.1.2" lit-html: "npm:^2.0.1" - checksum: 10c0/de4e73a5c557e91f3a005a3fd8983b5beac5e2e9d6016444a88d80bf6e66ea29c1828ccd64812b5f9c5f9535d34524458fd38bb6e4df09b1e08ce2c3fe66b5dd + checksum: 10c0/f923e9d5c27c2b958fabea41da84dc413672c00442ab83b5777c9970bd2e949b7529920c753f8d27d0ec377394ef7cbe4557d4343d36cbd98d60313b0f89fee5 languageName: node linkType: hard -"@ui5/webcomponents-compat@npm:2.19.2": - version: 2.19.2 - resolution: "@ui5/webcomponents-compat@npm:2.19.2" +"@ui5/webcomponents-compat@npm:2.20.0": + version: 2.20.0 + resolution: "@ui5/webcomponents-compat@npm:2.20.0" dependencies: - "@ui5/webcomponents": "npm:2.19.2" - "@ui5/webcomponents-base": "npm:2.19.2" - "@ui5/webcomponents-icons": "npm:2.19.2" - "@ui5/webcomponents-theming": "npm:2.19.2" - checksum: 10c0/f45b815e320d4f90552fe0b11d57957b80b487a1491dcf747851294a619dfa4602756c955e3430bd48cac78aeabf7997ec38df2f28533abcb58f7f67f921911e + "@ui5/webcomponents": "npm:2.20.0" + "@ui5/webcomponents-base": "npm:2.20.0" + "@ui5/webcomponents-icons": "npm:2.20.0" + "@ui5/webcomponents-theming": "npm:2.20.0" + checksum: 10c0/0610bbabed46a3b31cf85c0a9cfd5f186fa06a7554ce495d4d28a39e4dbbdfa51c2b010cfa94e4a355f083b0dbb6752995419e970a0e0e8ca04e2049f4109cc8 languageName: node linkType: hard @@ -4949,8 +4949,8 @@ __metadata: version: 0.0.0-use.local resolution: "@ui5/webcomponents-cypress-commands@workspace:packages/cypress-commands" peerDependencies: - "@ui5/webcomponents": ~2.19.0 - "@ui5/webcomponents-base": ~2.19.0 + "@ui5/webcomponents": ~2.20.0 + "@ui5/webcomponents-base": ~2.20.0 cypress: ^12 || ^13 || ^14 || ^15 peerDependenciesMeta: "@ui5/webcomponents": @@ -4960,53 +4960,53 @@ __metadata: languageName: unknown linkType: soft -"@ui5/webcomponents-fiori@npm:2.19.2": - version: 2.19.2 - resolution: "@ui5/webcomponents-fiori@npm:2.19.2" +"@ui5/webcomponents-fiori@npm:2.20.0": + version: 2.20.0 + resolution: "@ui5/webcomponents-fiori@npm:2.20.0" dependencies: - "@ui5/webcomponents": "npm:2.19.2" - "@ui5/webcomponents-base": "npm:2.19.2" - "@ui5/webcomponents-icons": "npm:2.19.2" - "@ui5/webcomponents-theming": "npm:2.19.2" + "@ui5/webcomponents": "npm:2.20.0" + "@ui5/webcomponents-base": "npm:2.20.0" + "@ui5/webcomponents-icons": "npm:2.20.0" + "@ui5/webcomponents-theming": "npm:2.20.0" "@zxing/library": "npm:^0.21.3" - checksum: 10c0/90260f89e0cb2bcfc2dbda9dbaf5bd46f0446a0279a321e609e2299bf5606bf73248aeb7e533e8f582f7fc211d86797ed599ae53690b7218b0a3814d32a4ddd4 + checksum: 10c0/c811f44943e2ccb27007bd86f2c4b0039040e9bb1e78a3b90a3ba1311591634fdb51bf6aecb28c2be6e757b140edfb046e0089b8a7f6514989717014195d1fc2 languageName: node linkType: hard -"@ui5/webcomponents-icons-business-suite@npm:2.19.2": - version: 2.19.2 - resolution: "@ui5/webcomponents-icons-business-suite@npm:2.19.2" +"@ui5/webcomponents-icons-business-suite@npm:2.20.0": + version: 2.20.0 + resolution: "@ui5/webcomponents-icons-business-suite@npm:2.20.0" dependencies: - "@ui5/webcomponents-base": "npm:2.19.2" - checksum: 10c0/65c8cd799b322fafeafa248f1fdf53c2f237a3b1615e3aff3be7bba83c302cc2389d0d5799fe7478c4f530364f5f62bb45b1e6fef5e466032f062c911889f4b7 + "@ui5/webcomponents-base": "npm:2.20.0" + checksum: 10c0/5542b42631dfab61e2c274d36a645a220522d54bd59b64f40e55d3ce127f8402a1248b563deb69c4bbeb03d689cbdd6285dae290f809f5b3113891e64332f773 languageName: node linkType: hard -"@ui5/webcomponents-icons-tnt@npm:2.19.2": - version: 2.19.2 - resolution: "@ui5/webcomponents-icons-tnt@npm:2.19.2" +"@ui5/webcomponents-icons-tnt@npm:2.20.0": + version: 2.20.0 + resolution: "@ui5/webcomponents-icons-tnt@npm:2.20.0" dependencies: - "@ui5/webcomponents-base": "npm:2.19.2" - checksum: 10c0/20fe246f41ed6fdcd87cd3a1f64c8926935d9f354e65eb0baaf56ef4fc5cc32c0072b14b44a5647620b4e19d01df6dac1700ceb4a0e86e97865404b5f15edeb4 + "@ui5/webcomponents-base": "npm:2.20.0" + checksum: 10c0/c1dd0ddc9f963a2251656f6bb50a380c38ff54370acdedb5cabffc733a92f47ef4833512b9fb16c41f3f968e4960475ddd4d9cab5d062b0e6de11d863ca46600 languageName: node linkType: hard -"@ui5/webcomponents-icons@npm:2.19.2": - version: 2.19.2 - resolution: "@ui5/webcomponents-icons@npm:2.19.2" +"@ui5/webcomponents-icons@npm:2.20.0": + version: 2.20.0 + resolution: "@ui5/webcomponents-icons@npm:2.20.0" dependencies: - "@ui5/webcomponents-base": "npm:2.19.2" - checksum: 10c0/fc37f54d601fc30eb3867085558ec56019ff2884fa9287aa0c51901112c2d5e643d5fb47ae708cc2b85c2f223c9db10d14d4b9ed8c8f4dd6d58ad5bdbf3a1b10 + "@ui5/webcomponents-base": "npm:2.20.0" + checksum: 10c0/9fb433d893ad051d53f09c2e4b99f967e7e01f57b53ad12215e22c2398cb1d8a08ead99dd5cde1f4fad47400086da9e86b1d4010e7c1f870b29f4c1242c72333 languageName: node linkType: hard -"@ui5/webcomponents-localization@npm:2.19.2": - version: 2.19.2 - resolution: "@ui5/webcomponents-localization@npm:2.19.2" +"@ui5/webcomponents-localization@npm:2.20.0": + version: 2.20.0 + resolution: "@ui5/webcomponents-localization@npm:2.20.0" dependencies: "@types/openui5": "npm:^1.113.0" - "@ui5/webcomponents-base": "npm:2.19.2" - checksum: 10c0/65ea91adc281a544d68bf35ff103e6b813891100f75ea94acf27ca46061ecc04ae7a24cd81a236831b04162dc16342f7e65d4dcbbb8556bb99c445ac869345f6 + "@ui5/webcomponents-base": "npm:2.20.0" + checksum: 10c0/087e4ed1c2d82e5d4eaf738af85bdabb2f2855cbf0ef5cac04162f19028bb73ceff4647c44a03dd698f71d6e607ddb9e595624b98db14c88d155662b5f06edd5 languageName: node linkType: hard @@ -5015,7 +5015,7 @@ __metadata: resolution: "@ui5/webcomponents-react-base@workspace:packages/base" peerDependencies: "@types/react": "*" - "@ui5/webcomponents-base": ~2.19.0 + "@ui5/webcomponents-base": ~2.20.0 react: ^18 || ^19 peerDependenciesMeta: "@types/react": @@ -5033,8 +5033,8 @@ __metadata: react-content-loader: "npm:7.1.2" recharts: "npm:2.15.4" peerDependencies: - "@ui5/webcomponents-react": ~2.19.0 - "@ui5/webcomponents-react-base": ~2.19.0 + "@ui5/webcomponents-react": ~2.20.0 + "@ui5/webcomponents-react-base": ~2.20.0 react: ^18 || ^19 languageName: unknown linkType: soft @@ -5059,8 +5059,8 @@ __metadata: peerDependencies: "@types/react": "*" "@types/react-dom": "*" - "@ui5/webcomponents-compat": ~2.19.0 - "@ui5/webcomponents-react": ~2.19.0 + "@ui5/webcomponents-compat": ~2.20.0 + "@ui5/webcomponents-react": ~2.20.0 react: ^18 || ^19 react-dom: ^18 || ^19 peerDependenciesMeta: @@ -5086,10 +5086,10 @@ __metadata: peerDependencies: "@types/react": "*" "@types/react-dom": "*" - "@ui5/webcomponents": ~2.19.0 - "@ui5/webcomponents-base": ~2.19.0 - "@ui5/webcomponents-fiori": ~2.19.0 - "@ui5/webcomponents-icons": ~2.19.0 + "@ui5/webcomponents": ~2.20.0 + "@ui5/webcomponents-base": ~2.20.0 + "@ui5/webcomponents-fiori": ~2.20.0 + "@ui5/webcomponents-icons": ~2.20.0 react: ^18 || ^19 react-dom: ^18 || ^19 peerDependenciesMeta: @@ -5106,19 +5106,19 @@ __metadata: languageName: unknown linkType: soft -"@ui5/webcomponents-theming@npm:2.19.2": - version: 2.19.2 - resolution: "@ui5/webcomponents-theming@npm:2.19.2" +"@ui5/webcomponents-theming@npm:2.20.0": + version: 2.20.0 + resolution: "@ui5/webcomponents-theming@npm:2.20.0" dependencies: - "@sap-theming/theming-base-content": "npm:11.29.3" - "@ui5/webcomponents-base": "npm:2.19.2" - checksum: 10c0/2490f054f3c2a5714086a0bf85d434c3b1ec3fe1926a59df61f1871ce7e647106c7cfb6c7be9ba4778831848ae92cd44ace2b5e9a07bcb09f00e4b384f5cc5ad + "@sap-theming/theming-base-content": "npm:11.33.0" + "@ui5/webcomponents-base": "npm:2.20.0" + checksum: 10c0/a47ccaa355b62800b8675dc144c80db47cd9600ad4ef0e6f413afde1c16d260267de41018ee938d072dbe69249f01f880f42dc58f7910357eac52ca735689287 languageName: node linkType: hard -"@ui5/webcomponents-tools@npm:2.19.2": - version: 2.19.2 - resolution: "@ui5/webcomponents-tools@npm:2.19.2" +"@ui5/webcomponents-tools@npm:2.20.0": + version: 2.20.0 + resolution: "@ui5/webcomponents-tools@npm:2.20.0" dependencies: "@custom-elements-manifest/analyzer": "npm:^0.10.10" "@typescript-eslint/eslint-plugin": "npm:^6.9.0" @@ -5175,21 +5175,21 @@ __metadata: ui5nps: bin/ui5nps.js wc-create-ui5-element: bin/create-ui5-element.js wc-dev: bin/dev.js - checksum: 10c0/7260add2da7063542b2c330576735d5b6cd01b5ad664deeb0a5708eedeceb9de7b35dc6355d18d5c6183164e6cf4f48b279e6695458758c71ccb7a285c7aabe5 + checksum: 10c0/e9d37a430ab5bd03c2b9162c2f77d1a59917d1a940eed36d7a5907e635be1b86faef34e3a4d0d91cad17073b7a5e199c6f2ce12e9699925042d3d5b1bd3d0e71 languageName: node linkType: hard -"@ui5/webcomponents@npm:2.19.2": - version: 2.19.2 - resolution: "@ui5/webcomponents@npm:2.19.2" +"@ui5/webcomponents@npm:2.20.0": + version: 2.20.0 + resolution: "@ui5/webcomponents@npm:2.20.0" dependencies: - "@ui5/webcomponents-base": "npm:2.19.2" - "@ui5/webcomponents-icons": "npm:2.19.2" - "@ui5/webcomponents-icons-business-suite": "npm:2.19.2" - "@ui5/webcomponents-icons-tnt": "npm:2.19.2" - "@ui5/webcomponents-localization": "npm:2.19.2" - "@ui5/webcomponents-theming": "npm:2.19.2" - checksum: 10c0/0ca5fae571ad6a83bd2880eae4a065f7b2637e66080224c0091bba605d1b86cedb415890598c2259a85929609dd28fe623eacea1c8ca35075435a7b1ec1a2e0c + "@ui5/webcomponents-base": "npm:2.20.0" + "@ui5/webcomponents-icons": "npm:2.20.0" + "@ui5/webcomponents-icons-business-suite": "npm:2.20.0" + "@ui5/webcomponents-icons-tnt": "npm:2.20.0" + "@ui5/webcomponents-localization": "npm:2.20.0" + "@ui5/webcomponents-theming": "npm:2.20.0" + checksum: 10c0/a2d8319168911efed64dd485b0c1bae1030ebfaecfdb283eb870e76f12ef1f26e46fc6a3986d6ec3134bd4e76e0e7da4af87bed07e3355b0f1971e12b6e38b16 languageName: node linkType: hard @@ -19955,12 +19955,12 @@ __metadata: "@types/node": "npm:24.10.15" "@types/react": "npm:19.2.14" "@types/react-dom": "npm:19.2.3" - "@ui5/webcomponents": "npm:2.19.2" - "@ui5/webcomponents-ai": "npm:2.19.2" - "@ui5/webcomponents-compat": "npm:2.19.2" - "@ui5/webcomponents-fiori": "npm:2.19.2" - "@ui5/webcomponents-icons": "npm:2.19.2" - "@ui5/webcomponents-tools": "npm:2.19.2" + "@ui5/webcomponents": "npm:2.20.0" + "@ui5/webcomponents-ai": "npm:2.20.0" + "@ui5/webcomponents-compat": "npm:2.20.0" + "@ui5/webcomponents-fiori": "npm:2.20.0" + "@ui5/webcomponents-icons": "npm:2.20.0" + "@ui5/webcomponents-tools": "npm:2.20.0" "@vitejs/plugin-react": "npm:5.1.4" chromatic: "npm:15.1.1" cssnano: "npm:7.1.2" From cf65bc353a901a2f8f7f372cb00c480579d63007 Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Thu, 5 Mar 2026 12:13:17 +0100 Subject: [PATCH 2/9] run main wrapper script --- .storybook/custom-element-manifests/ai.json | 1575 +- .../custom-element-manifests/fiori.json | 10026 +++-- .storybook/custom-element-manifests/main.json | 36862 ++++++++-------- .../main/src/webComponents/Avatar/index.tsx | 39 +- .../main/src/webComponents/Carousel/index.tsx | 1 + .../src/webComponents/ColorPalette/index.tsx | 23 +- .../ColorPalettePopover/index.tsx | 18 +- .../src/webComponents/ColorPicker/index.tsx | 18 +- .../main/src/webComponents/ComboBox/index.tsx | 48 +- .../src/webComponents/ComboBoxItem/index.tsx | 28 +- .../src/webComponents/DatePicker/index.tsx | 14 +- .../webComponents/DateRangePicker/index.tsx | 10 +- .../webComponents/DateTimePicker/index.tsx | 10 +- .../webComponents/DynamicPageTitle/index.tsx | 2 +- .../FlexibleColumnLayout/index.tsx | 2 + .../src/webComponents/MultiComboBox/index.tsx | 19 +- .../webComponents/MultiComboBoxItem/index.tsx | 15 +- .../main/src/webComponents/Option/index.tsx | 1 + .../webComponents/RatingIndicator/index.tsx | 18 +- .../main/src/webComponents/ShellBar/index.tsx | 11 +- .../src/webComponents/ShellBarItem/index.tsx | 10 +- .../webComponents/SideNavigation/index.tsx | 29 +- .../main/src/webComponents/Slider/index.tsx | 2 +- .../TableRowActionNavigation/index.tsx | 10 +- .../main/src/webComponents/Toolbar/index.tsx | 2 +- .../src/webComponents/ToolbarButton/index.tsx | 2 +- .../src/webComponents/ToolbarItem/index.tsx | 70 + .../src/webComponents/ToolbarSelect/index.tsx | 2 +- .../webComponents/ToolbarSeparator/index.tsx | 2 +- .../src/webComponents/ToolbarSpacer/index.tsx | 2 +- .../main/src/webComponents/UserMenu/index.tsx | 21 +- .../webComponents/UserMenuAccount/index.tsx | 1 - .../src/webComponents/UserMenuItem/index.tsx | 1 - .../webComponents/UserMenuItemGroup/index.tsx | 1 - .../UserSettingsAccountView/index.tsx | 1 - .../UserSettingsAppearanceView/index.tsx | 1 - .../UserSettingsAppearanceViewGroup/index.tsx | 1 - .../UserSettingsAppearanceViewItem/index.tsx | 1 - .../UserSettingsDialog/index.tsx | 1 - .../webComponents/UserSettingsItem/index.tsx | 1 - .../webComponents/UserSettingsView/index.tsx | 1 - 41 files changed, 26703 insertions(+), 22199 deletions(-) create mode 100644 packages/main/src/webComponents/ToolbarItem/index.tsx diff --git a/.storybook/custom-element-manifests/ai.json b/.storybook/custom-element-manifests/ai.json index 9ada5848b5c..10fb3addb4c 100644 --- a/.storybook/custom-element-manifests/ai.json +++ b/.storybook/custom-element-manifests/ai.json @@ -47,6 +47,36 @@ } ], "members": [ + { + "kind": "field", + "name": "accessibilityAttributes", + "type": { + "text": "AIButtonAccessibilityAttributes", + "references": [ + { + "name": "AIButtonAccessibilityAttributes", + "package": "@ui5/webcomponents-ai", + "module": "dist/Button.js" + } + ] + }, + "default": "{}", + "description": "Defines the additional accessibility attributes that will be applied to the component.\n\nThis property allows for fine-tuned control of ARIA attributes for screen reader support.\nIt accepts an object with the following optional fields:\n\n- **root**: Accessibility attributes that will be applied to the root element.\n - **hasPopup**: Indicates the availability and type of interactive popup element (such as a menu or dialog).\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **roleDescription**: Defines a human-readable description for the button's role.\n Accepts any string value.\n - **title**: Specifies a tooltip or description for screen readers.\n Accepts any string value.\n- **ariaKeyShortcuts**: Defines keyboard shortcuts that activate or focus the button.\n\n- **arrowButton**: Accessibility attributes that will be applied to the arrow (split) button element.\n - **hasPopup**: Indicates the type of popup triggered by the arrow button.\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **expanded**: Indicates whether the popup controlled by the arrow button is currently expanded.\n Accepts boolean values: `true` or `false`.", + "privacy": "public", + "_ui5since": "2.6.0" + }, + { + "kind": "field", + "name": "arrowButtonPressed", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines the active state of the arrow button in split mode.\nSet to true when the button is in split mode and a menu with additional options\nis opened by the arrow button. Set back to false when the menu is closed.", + "privacy": "public", + "_ui5since": "2.6.0", + "_ui5noAttribute": true + }, { "kind": "field", "name": "design", @@ -83,63 +113,51 @@ "description": "Defines the current state of the component.", "default": "undefined", "privacy": "public" - }, - { - "kind": "field", - "name": "arrowButtonPressed", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines the active state of the arrow button in split mode.\nSet to true when the button is in split mode and a menu with additional options\nis opened by the arrow button. Set back to false when the menu is closed.", - "privacy": "public", - "_ui5since": "2.6.0", - "_ui5noAttribute": true - }, - { - "kind": "field", - "name": "accessibilityAttributes", - "type": { - "text": "AIButtonAccessibilityAttributes", - "references": [ - { - "name": "AIButtonAccessibilityAttributes", - "package": "@ui5/webcomponents-ai", - "module": "dist/Button.js" - } - ] - }, - "default": "{}", - "description": "Defines the additional accessibility attributes that will be applied to the component.\n\nThis property allows for fine-tuned control of ARIA attributes for screen reader support.\nIt accepts an object with the following optional fields:\n\n- **root**: Accessibility attributes that will be applied to the root element.\n - **hasPopup**: Indicates the availability and type of interactive popup element (such as a menu or dialog).\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **roleDescription**: Defines a human-readable description for the button's role.\n Accepts any string value.\n - **title**: Specifies a tooltip or description for screen readers.\n Accepts any string value.\n- **ariaKeyShortcuts**: Defines keyboard shortcuts that activate or focus the button.\n\n- **arrowButton**: Accessibility attributes that will be applied to the arrow (split) button element.\n - **hasPopup**: Indicates the type of popup triggered by the arrow button.\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **expanded**: Indicates whether the popup controlled by the arrow button is currently expanded.\n Accepts boolean values: `true` or `false`.", - "privacy": "public", - "_ui5since": "2.6.0" } ], "events": [ { - "name": "click", + "name": "arrow-button-click", "_ui5privacy": "public", "type": { "text": "CustomEvent" }, - "description": "Fired when the component is activated either with a\nmouse/tap or by using the Enter or Space key.", + "description": "Fired when the component is in split mode and after the arrow button\nis activated either by clicking or tapping it or by using the [Arrow Up] / [Arrow Down],\n[Alt] + [Arrow Up]/ [Arrow Down], or [F4] keyboard keys.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, "_ui5Bubbles": true }, { - "name": "arrow-button-click", + "name": "click", "_ui5privacy": "public", "type": { "text": "CustomEvent" }, - "description": "Fired when the component is in split mode and after the arrow button\nis activated either by clicking or tapping it or by using the [Arrow Up] / [Arrow Down],\n[Alt] + [Arrow Up]/ [Arrow Down], or [F4] keyboard keys.", + "description": "Fired when the component is activated either with a\nmouse/tap or by using the Enter or Space key.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, "_ui5Bubbles": true } ], "attributes": [ + { + "description": "Defines the additional accessibility attributes that will be applied to the component.\n\nThis property allows for fine-tuned control of ARIA attributes for screen reader support.\nIt accepts an object with the following optional fields:\n\n- **root**: Accessibility attributes that will be applied to the root element.\n - **hasPopup**: Indicates the availability and type of interactive popup element (such as a menu or dialog).\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **roleDescription**: Defines a human-readable description for the button's role.\n Accepts any string value.\n - **title**: Specifies a tooltip or description for screen readers.\n Accepts any string value.\n- **ariaKeyShortcuts**: Defines keyboard shortcuts that activate or focus the button.\n\n- **arrowButton**: Accessibility attributes that will be applied to the arrow (split) button element.\n - **hasPopup**: Indicates the type of popup triggered by the arrow button.\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **expanded**: Indicates whether the popup controlled by the arrow button is currently expanded.\n Accepts boolean values: `true` or `false`.", + "name": "accessibility-attributes", + "default": "{}", + "fieldName": "accessibilityAttributes", + "type": { + "text": "AIButtonAccessibilityAttributes" + } + }, + { + "description": "Defines the active state of the arrow button in split mode.\nSet to true when the button is in split mode and a menu with additional options\nis opened by the arrow button. Set back to false when the menu is closed.", + "name": "arrow-button-pressed", + "default": "false", + "fieldName": "arrowButtonPressed", + "type": { + "text": "boolean" + } + }, { "description": "Defines the component design.", "name": "design", @@ -166,24 +184,6 @@ "type": { "text": "string | undefined" } - }, - { - "description": "Defines the active state of the arrow button in split mode.\nSet to true when the button is in split mode and a menu with additional options\nis opened by the arrow button. Set back to false when the menu is closed.", - "name": "arrow-button-pressed", - "default": "false", - "fieldName": "arrowButtonPressed", - "type": { - "text": "boolean" - } - }, - { - "description": "Defines the additional accessibility attributes that will be applied to the component.\n\nThis property allows for fine-tuned control of ARIA attributes for screen reader support.\nIt accepts an object with the following optional fields:\n\n- **root**: Accessibility attributes that will be applied to the root element.\n - **hasPopup**: Indicates the availability and type of interactive popup element (such as a menu or dialog).\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **roleDescription**: Defines a human-readable description for the button's role.\n Accepts any string value.\n - **title**: Specifies a tooltip or description for screen readers.\n Accepts any string value.\n- **ariaKeyShortcuts**: Defines keyboard shortcuts that activate or focus the button.\n\n- **arrowButton**: Accessibility attributes that will be applied to the arrow (split) button element.\n - **hasPopup**: Indicates the type of popup triggered by the arrow button.\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **expanded**: Indicates whether the popup controlled by the arrow button is currently expanded.\n Accepts boolean values: `true` or `false`.", - "name": "accessibility-attributes", - "default": "{}", - "fieldName": "accessibilityAttributes", - "type": { - "text": "AIButtonAccessibilityAttributes" - } } ], "superclass": { @@ -228,21 +228,11 @@ "members": [ { "kind": "field", - "name": "name", - "type": { - "text": "string | undefined" - }, - "description": "Defines the name of the button state.", - "default": "undefined", - "privacy": "public" - }, - { - "kind": "field", - "name": "text", + "name": "endIcon", "type": { "text": "string | undefined" }, - "description": "Defines the text of the button in this state.", + "description": "Defines the icon to be displayed as graphical element within the component after the text.\nThe SAP-icons font provides numerous options.\n\n**Example:**\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", "default": "undefined", "privacy": "public" }, @@ -258,11 +248,11 @@ }, { "kind": "field", - "name": "endIcon", + "name": "name", "type": { "text": "string | undefined" }, - "description": "Defines the icon to be displayed as graphical element within the component after the text.\nThe SAP-icons font provides numerous options.\n\n**Example:**\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "description": "Defines the name of the button state.", "default": "undefined", "privacy": "public" }, @@ -276,23 +266,24 @@ "description": "Defines if the component is in split button mode.", "privacy": "public", "_ui5since": "2.6.0" - } - ], - "attributes": [ + }, { - "description": "Defines the name of the button state.", - "name": "name", - "default": "undefined", - "fieldName": "name", + "kind": "field", + "name": "text", "type": { "text": "string | undefined" - } - }, - { + }, "description": "Defines the text of the button in this state.", - "name": "text", "default": "undefined", - "fieldName": "text", + "privacy": "public" + } + ], + "attributes": [ + { + "description": "Defines the icon to be displayed as graphical element within the component after the text.\nThe SAP-icons font provides numerous options.\n\n**Example:**\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "name": "end-icon", + "default": "undefined", + "fieldName": "endIcon", "type": { "text": "string | undefined" } @@ -307,10 +298,10 @@ } }, { - "description": "Defines the icon to be displayed as graphical element within the component after the text.\nThe SAP-icons font provides numerous options.\n\n**Example:**\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", - "name": "end-icon", + "description": "Defines the name of the button state.", + "name": "name", "default": "undefined", - "fieldName": "endIcon", + "fieldName": "name", "type": { "text": "string | undefined" } @@ -323,6 +314,15 @@ "type": { "text": "boolean" } + }, + { + "description": "Defines the text of the button in this state.", + "name": "text", + "default": "undefined", + "fieldName": "text", + "type": { + "text": "string | undefined" + } } ], "superclass": { @@ -428,125 +428,110 @@ }, { "kind": "field", - "name": "totalVersions", + "name": "loading", "type": { - "text": "number" + "text": "boolean" }, - "default": "0", - "description": "Indicates the total number of result versions available.\n\nWhen not set or set to 0, the versioning will be hidden.", + "default": "false", + "description": "Defines whether the AI Writing Assistant is currently loading.\n\nWhen `true`, indicates that an AI action is in progress.", "privacy": "public" }, { "kind": "field", - "name": "loading", + "name": "totalVersions", "type": { - "text": "boolean" + "text": "number" }, - "default": "false", - "description": "Defines whether the AI Writing Assistant is currently loading.\n\nWhen `true`, indicates that an AI action is in progress.", + "default": "0", + "description": "Indicates the total number of result versions available.\n\nWhen not set or set to 0, the versioning will be hidden.", "privacy": "public" }, { "kind": "field", - "name": "disabled", + "name": "accessibleDescription", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is completely noninteractive.", - "privacy": "public" + "description": "Defines the accessible description of the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.9.0" }, { "kind": "field", - "name": "placeholder", + "name": "accessibleDescriptionRef", "type": { "text": "string | undefined" }, - "description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.", + "description": "Receives id(or many ids) of the elements that describe the input.", "default": "undefined", - "privacy": "public" + "privacy": "public", + "_ui5since": "2.9.0" }, { "kind": "field", - "name": "readonly", + "name": "accessibleName", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "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.", - "privacy": "public" + "description": "Defines the accessible ARIA name of the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.0.0-rc.15" }, { "kind": "field", - "name": "required", + "name": "accessibleNameRef", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Defines whether the component is required.", + "description": "Receives id(or many ids) of the elements that label the input.", + "default": "undefined", "privacy": "public", - "_ui5since": "1.0.0-rc.3" + "_ui5since": "1.0.0-rc.15" }, { "kind": "field", - "name": "noTypeahead", + "name": "disabled", "type": { "text": "boolean" }, "default": "false", - "description": "Defines whether the value will be autcompleted to match an item", - "privacy": "public", - "_ui5since": "1.4.0" + "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is completely noninteractive.", + "privacy": "public" }, { "kind": "field", - "name": "type", + "name": "filter", "type": { - "text": "InputType", + "text": "InputSuggestionsFilter", "references": [ { - "name": "InputType", + "name": "InputSuggestionsFilter", "package": "@ui5/webcomponents", - "module": "dist/types/InputType.js" + "module": "dist/types/InputSuggestionsFilter.js" } ] }, - "default": "\"Text\"", - "description": "Defines the HTML type of the component.\n\n**Notes:**\n\n- The particular effect of this property differs depending on the browser\nand the current language settings, especially for type `Number`.\n- The property is mostly intended to be used with touch devices\nthat use different soft keyboard layouts depending on the given input type.", - "privacy": "public" + "description": "Defines the filter type of the component.", + "default": "\"None\"", + "privacy": "public", + "_ui5since": "2.19.0" }, { "kind": "field", - "name": "value", + "name": "maxlength", "type": { - "text": "string" + "text": "number | undefined" }, - "default": "\"\"", - "description": "Defines the value of the component.\n\n**Note:** The property is updated upon typing.", + "description": "Sets the maximum number of characters available in the input field.\n\n**Note:** This property is not compatible with the ui5-input type InputType.Number. If the ui5-input type is set to Number, the maxlength value is ignored.", + "default": "undefined", "privacy": "public", - "_ui5formProperty": true, - "_ui5formEvents": "change,input" + "_ui5since": "1.0.0-rc.5" }, { "kind": "field", - "name": "valueState", - "type": { - "text": "ValueState", - "references": [ - { - "name": "ValueState", - "package": "@ui5/webcomponents-base", - "module": "dist/types/ValueState.js" - } - ] - }, - "default": "\"None\"", - "description": "Defines the value state of the component.", - "privacy": "public" - }, - { - "kind": "field", - "name": "name", + "name": "name", "type": { "text": "string | undefined" }, @@ -556,68 +541,56 @@ }, { "kind": "field", - "name": "showSuggestions", + "name": "noTypeahead", "type": { "text": "boolean" }, "default": "false", - "description": "Defines whether the component should show suggestions, if such are present.", - "privacy": "public" - }, - { - "kind": "field", - "name": "maxlength", - "type": { - "text": "number | undefined" - }, - "description": "Sets the maximum number of characters available in the input field.\n\n**Note:** This property is not compatible with the ui5-input type InputType.Number. If the ui5-input type is set to Number, the maxlength value is ignored.", - "default": "undefined", + "description": "Defines whether the value will be autcompleted to match an item", "privacy": "public", - "_ui5since": "1.0.0-rc.5" + "_ui5since": "1.4.0" }, { "kind": "field", - "name": "accessibleName", + "name": "open", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Defines the accessible ARIA name of the component.", - "default": "undefined", + "default": "false", + "description": "Defines whether the suggestions picker is open.\nThe picker will not open if the `showSuggestions` property is set to `false`, the input is disabled or the input is readonly.\nThe picker will close automatically and `close` event will be fired if the input is not in the viewport.", "privacy": "public", - "_ui5since": "1.0.0-rc.15" + "_ui5since": "2.0.0" }, { "kind": "field", - "name": "accessibleNameRef", + "name": "placeholder", "type": { "text": "string | undefined" }, - "description": "Receives id(or many ids) of the elements that label the input.", + "description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.", "default": "undefined", - "privacy": "public", - "_ui5since": "1.0.0-rc.15" + "privacy": "public" }, { "kind": "field", - "name": "accessibleDescription", + "name": "readonly", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Defines the accessible description of the component.", - "default": "undefined", - "privacy": "public", - "_ui5since": "2.9.0" + "default": "false", + "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.", + "privacy": "public" }, { "kind": "field", - "name": "accessibleDescriptionRef", + "name": "required", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Receives id(or many ids) of the elements that describe the input.", - "default": "undefined", + "default": "false", + "description": "Defines whether the component is required.", "privacy": "public", - "_ui5since": "2.9.0" + "_ui5since": "1.0.0-rc.3" }, { "kind": "field", @@ -632,32 +605,59 @@ }, { "kind": "field", - "name": "open", + "name": "showSuggestions", "type": { "text": "boolean" }, "default": "false", - "description": "Defines whether the suggestions picker is open.\nThe picker will not open if the `showSuggestions` property is set to `false`, the input is disabled or the input is readonly.\nThe picker will close automatically and `close` event will be fired if the input is not in the viewport.", - "privacy": "public", - "_ui5since": "2.0.0" + "description": "Defines whether the component should show suggestions, if such are present.", + "privacy": "public" }, { "kind": "field", - "name": "filter", + "name": "type", "type": { - "text": "InputSuggestionsFilter", + "text": "InputType", "references": [ { - "name": "InputSuggestionsFilter", + "name": "InputType", "package": "@ui5/webcomponents", - "module": "dist/types/InputSuggestionsFilter.js" + "module": "dist/types/InputType.js" } ] }, - "description": "Defines the filter type of the component.", - "default": "\"None\"", + "default": "\"Text\"", + "description": "Defines the HTML type of the component.\n\n**Notes:**\n\n- The particular effect of this property differs depending on the browser\nand the current language settings, especially for type `Number`.\n- The property is mostly intended to be used with touch devices\nthat use different soft keyboard layouts depending on the given input type.", + "privacy": "public" + }, + { + "kind": "field", + "name": "value", + "type": { + "text": "string" + }, + "default": "\"\"", + "description": "Defines the value of the component.\n\n**Note:** The property is updated upon typing.", "privacy": "public", - "_ui5since": "2.19.0" + "_ui5formProperty": true, + "_ui5formEvents": "change,input" + }, + { + "kind": "field", + "name": "valueState", + "type": { + "text": "ValueState", + "references": [ + { + "name": "ValueState", + "package": "@ui5/webcomponents-base", + "module": "dist/types/ValueState.js" + } + ] + }, + "default": "\"None\"", + "description": "Defines the value state of the component.", + "privacy": "public" } ], "events": [ @@ -743,7 +743,7 @@ }, "name": "backwards", "_ui5privacy": "public", - "description": "Indicates if navigation is backwards (true) or forwards (false, default)" + "description": "The text of the currently clicked menu item." } ] }, @@ -758,6 +758,18 @@ "_ui5allowPreventDefault": false, "_ui5Bubbles": true }, + { + "name": "close", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the suggestions picker is closed.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": false, + "_ui5since": "2.0.0" + }, { "name": "input", "_ui5privacy": "public", @@ -769,6 +781,18 @@ "_ui5allowPreventDefault": true, "_ui5Bubbles": true }, + { + "name": "open", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the suggestions picker is open.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5since": "2.0.0" + }, { "name": "select", "_ui5privacy": "public", @@ -809,30 +833,6 @@ "description": "The previewed suggestion item." } ] - }, - { - "name": "open", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired when the suggestions picker is open.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5since": "2.0.0" - }, - { - "name": "close", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired when the suggestions picker is closed.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": false, - "_ui5since": "2.0.0" } ], "attributes": [ @@ -845,6 +845,15 @@ "text": "number" } }, + { + "description": "Defines whether the AI Writing Assistant is currently loading.\n\nWhen `true`, indicates that an AI action is in progress.", + "name": "loading", + "default": "false", + "fieldName": "loading", + "type": { + "text": "boolean" + } + }, { "description": "Indicates the total number of result versions available.\n\nWhen not set or set to 0, the versioning will be hidden.", "name": "total-versions", @@ -855,53 +864,206 @@ } }, { - "description": "Defines whether the AI Writing Assistant is currently loading.\n\nWhen `true`, indicates that an AI action is in progress.", - "name": "loading", + "description": "Defines the accessible description of the component.", + "name": "accessible-description", + "default": "undefined", + "fieldName": "accessibleDescription", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Receives id(or many ids) of the elements that describe the input.", + "name": "accessible-description-ref", + "default": "undefined", + "fieldName": "accessibleDescriptionRef", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the accessible ARIA name of the component.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Receives id(or many ids) of the elements that label the input.", + "name": "accessible-name-ref", + "default": "undefined", + "fieldName": "accessibleNameRef", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is completely noninteractive.", + "name": "disabled", "default": "false", - "fieldName": "loading", + "fieldName": "disabled", "type": { "text": "boolean" } - } - ], - "superclass": { - "name": "Input", - "package": "@ui5/webcomponents", - "module": "dist/Input.js" - }, - "tagName": "ui5-ai-input", - "customElement": true, - "_ui5experimental": "The **@ui5/webcomponents-ai** package is under active development and considered experimental. Component APIs are subject to change.\nFurthermore, the package supports **Horizon** themes only.", - "_ui5since": "2.16.0", - "_ui5privacy": "public", - "cssParts": [ + }, { - "description": "Used to style the root DOM element of the Input component", - "name": "root" + "description": "Defines the filter type of the component.", + "name": "filter", + "default": "\"None\"", + "fieldName": "filter", + "type": { + "text": "\"None\" | \"StartsWithPerTerm\" | \"StartsWith\" | \"Contains\"" + } }, { - "description": "Used to style the native input element", - "name": "input" + "description": "Sets the maximum number of characters available in the input field.\n\n**Note:** This property is not compatible with the ui5-input type InputType.Number. If the ui5-input type is set to Number, the maxlength value is ignored.", + "name": "maxlength", + "default": "undefined", + "fieldName": "maxlength", + "type": { + "text": "number | undefined" + } }, { - "description": "Used to style the clear icon, which can be pressed to clear user input text", - "name": "clear-icon" - } - ] - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "Input", - "module": "dist/Input.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-ai-input", + "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", + "name": "name", + "default": "undefined", + "fieldName": "name", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines whether the value will be autcompleted to match an item", + "name": "no-typeahead", + "default": "false", + "fieldName": "noTypeahead", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines whether the suggestions picker is open.\nThe picker will not open if the `showSuggestions` property is set to `false`, the input is disabled or the input is readonly.\nThe picker will close automatically and `close` event will be fired if the input is not in the viewport.", + "name": "open", + "default": "false", + "fieldName": "open", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.", + "name": "placeholder", + "default": "undefined", + "fieldName": "placeholder", + "type": { + "text": "string | undefined" + } + }, + { + "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.", + "name": "readonly", + "default": "false", + "fieldName": "readonly", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines whether the component is required.", + "name": "required", + "default": "false", + "fieldName": "required", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines whether the clear icon of the input will be shown.", + "name": "show-clear-icon", + "default": "false", + "fieldName": "showClearIcon", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines whether the component should show suggestions, if such are present.", + "name": "show-suggestions", + "default": "false", + "fieldName": "showSuggestions", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines the HTML type of the component.\n\n**Notes:**\n\n- The particular effect of this property differs depending on the browser\nand the current language settings, especially for type `Number`.\n- The property is mostly intended to be used with touch devices\nthat use different soft keyboard layouts depending on the given input type.", + "name": "type", + "default": "\"Text\"", + "fieldName": "type", + "type": { + "text": "\"Text\" | \"Email\" | \"Number\" | \"Password\" | \"Tel\" | \"URL\" | \"Search\"" + } + }, + { + "description": "Defines the value of the component.\n\n**Note:** The property is updated upon typing.", + "name": "value", + "default": "\"\"", + "fieldName": "value", + "type": { + "text": "string" + } + }, + { + "description": "Defines the value state of the component.", + "name": "value-state", + "default": "\"None\"", + "fieldName": "valueState", + "type": { + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" + } + } + ], + "superclass": { + "name": "Input", + "package": "@ui5/webcomponents", + "module": "dist/Input.js" + }, + "tagName": "ui5-ai-input", + "customElement": true, + "_ui5experimental": "The **@ui5/webcomponents-ai** package is under active development and considered experimental. Component APIs are subject to change.\nFurthermore, the package supports **Horizon** themes only.", + "_ui5since": "2.16.0", + "_ui5privacy": "public", + "cssParts": [ + { + "description": "Used to style the clear icon, which can be pressed to clear user input text", + "name": "clear-icon" + }, + { + "description": "Used to style the native input element", + "name": "input" + }, + { + "description": "Used to style the root DOM element of the Input component", + "name": "root" + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "Input", + "module": "dist/Input.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-ai-input", "declaration": { "name": "Input", "module": "dist/Input.js" @@ -947,89 +1109,99 @@ "members": [ { "kind": "field", - "name": "value", + "name": "disabled", "type": { - "text": "string" + "text": "boolean" }, - "default": "\"\"", - "description": "Defines the value of the component.", + "default": "false", + "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is completely noninteractive.", "privacy": "public", "_ui5since": "2.0.0" }, { "kind": "field", - "name": "placeholder", + "name": "label", "type": { "text": "string | undefined" }, - "description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.", + "description": "Defines the label of the input field.", "default": "undefined", "privacy": "public", "_ui5since": "2.0.0" }, { "kind": "field", - "name": "label", + "name": "maxlength", + "type": { + "text": "number | undefined" + }, + "description": "Sets the maximum number of characters available in the input field.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.0.0" + }, + { + "kind": "field", + "name": "placeholder", "type": { "text": "string | undefined" }, - "description": "Defines the label of the input field.", + "description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.", "default": "undefined", "privacy": "public", "_ui5since": "2.0.0" }, { "kind": "field", - "name": "showClearIcon", + "name": "readonly", "type": { "text": "boolean" }, "default": "false", - "description": "Defines whether the clear icon of the input will be shown.", + "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.", "privacy": "public", "_ui5since": "2.0.0" }, { "kind": "field", - "name": "showExceededText", + "name": "showClearIcon", "type": { "text": "boolean" }, "default": "false", - "description": "Determines whether the characters exceeding the maximum allowed character count are visible\nin the component.\n\nIf set to `false`, the user is not allowed to enter more characters than what is set in the\n`maxlength` property.\nIf set to `true` the characters exceeding the `maxlength` value are selected on\npaste and the counter below the component displays their number.", + "description": "Defines whether the clear icon of the input will be shown.", "privacy": "public", "_ui5since": "2.0.0" }, { "kind": "field", - "name": "disabled", + "name": "showExceededText", "type": { "text": "boolean" }, "default": "false", - "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is completely noninteractive.", + "description": "Determines whether the characters exceeding the maximum allowed character count are visible\nin the component.\n\nIf set to `false`, the user is not allowed to enter more characters than what is set in the\n`maxlength` property.\nIf set to `true` the characters exceeding the `maxlength` value are selected on\npaste and the counter below the component displays their number.", "privacy": "public", "_ui5since": "2.0.0" }, { "kind": "field", - "name": "readonly", + "name": "showSuggestions", "type": { "text": "boolean" }, "default": "false", - "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.", - "privacy": "public", - "_ui5since": "2.0.0" + "description": "Defines whether the component should show suggestions, if such are present.", + "privacy": "public" }, { "kind": "field", - "name": "maxlength", + "name": "value", "type": { - "text": "number | undefined" + "text": "string" }, - "description": "Sets the maximum number of characters available in the input field.", - "default": "undefined", + "default": "\"\"", + "description": "Defines the value of the component.", "privacy": "public", "_ui5since": "2.0.0" }, @@ -1050,26 +1222,16 @@ "description": "Defines the value state of the component.", "privacy": "public", "_ui5since": "2.0.0" - }, - { - "kind": "field", - "name": "showSuggestions", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines whether the component should show suggestions, if such are present.", - "privacy": "public" } ], "events": [ { - "name": "submit", + "name": "change", "_ui5privacy": "public", "type": { "text": "CustomEvent" }, - "description": "Fired when the input operation has finished by pressing Enter\nor AI button is clicked.", + "description": "Fired when the input operation has finished by pressing Enter\nor on focusout.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, "_ui5Bubbles": true, @@ -1088,12 +1250,12 @@ "_ui5since": "2.0.0" }, { - "name": "change", + "name": "submit", "_ui5privacy": "public", "type": { "text": "CustomEvent" }, - "description": "Fired when the input operation has finished by pressing Enter\nor on focusout.", + "description": "Fired when the input operation has finished by pressing Enter\nor AI button is clicked.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, "_ui5Bubbles": true, @@ -1102,12 +1264,30 @@ ], "attributes": [ { - "description": "Defines the value of the component.", - "name": "value", - "default": "\"\"", - "fieldName": "value", + "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is completely noninteractive.", + "name": "disabled", + "default": "false", + "fieldName": "disabled", "type": { - "text": "string" + "text": "boolean" + } + }, + { + "description": "Defines the label of the input field.", + "name": "label", + "default": "undefined", + "fieldName": "label", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Sets the maximum number of characters available in the input field.", + "name": "maxlength", + "default": "undefined", + "fieldName": "maxlength", + "type": { + "text": "number | undefined" } }, { @@ -1120,12 +1300,12 @@ } }, { - "description": "Defines the label of the input field.", - "name": "label", - "default": "undefined", - "fieldName": "label", + "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.", + "name": "readonly", + "default": "false", + "fieldName": "readonly", "type": { - "text": "string | undefined" + "text": "boolean" } }, { @@ -1147,30 +1327,21 @@ } }, { - "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is completely noninteractive.", - "name": "disabled", + "description": "Defines whether the component should show suggestions, if such are present.", + "name": "show-suggestions", "default": "false", - "fieldName": "disabled", + "fieldName": "showSuggestions", "type": { "text": "boolean" } }, { - "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.", - "name": "readonly", - "default": "false", - "fieldName": "readonly", + "description": "Defines the value of the component.", + "name": "value", + "default": "\"\"", + "fieldName": "value", "type": { - "text": "boolean" - } - }, - { - "description": "Sets the maximum number of characters available in the input field.", - "name": "maxlength", - "default": "undefined", - "fieldName": "maxlength", - "type": { - "text": "number | undefined" + "text": "string" } }, { @@ -1181,15 +1352,6 @@ "type": { "text": "\"Positive\" | \"Negative\" | \"None\" | \"Critical\" | \"Information\"" } - }, - { - "description": "Defines whether the component should show suggestions, if such are present.", - "name": "show-suggestions", - "default": "false", - "fieldName": "showSuggestions", - "type": { - "text": "boolean" - } } ], "superclass": { @@ -1250,6 +1412,16 @@ } ], "members": [ + { + "kind": "field", + "name": "currentVersion", + "type": { + "text": "number" + }, + "default": "0", + "description": "Indicates the index of the currently displayed version.", + "privacy": "public" + }, { "kind": "field", "name": "loading", @@ -1270,16 +1442,6 @@ "description": "Defines the prompt description of the current action.", "privacy": "public" }, - { - "kind": "field", - "name": "currentVersion", - "type": { - "text": "number" - }, - "default": "0", - "description": "Indicates the index of the currently displayed version.", - "privacy": "public" - }, { "kind": "field", "name": "totalVersions", @@ -1292,83 +1454,76 @@ }, { "kind": "field", - "name": "value", + "name": "accessibleDescription", "type": { - "text": "string" + "text": "string | undefined" }, - "default": "\"\"", - "description": "Defines the value of the component.", + "description": "Defines the accessible description of the component.", + "default": "undefined", "privacy": "public", - "_ui5formProperty": true, - "_ui5formEvents": "change,input" + "_ui5since": "2.16.0" }, { "kind": "field", - "name": "disabled", + "name": "accessibleDescriptionRef", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Indicates whether the user can interact with the component or not.\n\n**Note:** A disabled component is completely noninteractive.", - "privacy": "public" + "description": "Receives id(or many ids) of the elements that describe the textarea.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.16.0" }, { "kind": "field", - "name": "readonly", + "name": "accessibleName", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "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.", - "privacy": "public" + "description": "Defines the accessible ARIA name of the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.0.0-rc.15" }, { "kind": "field", - "name": "required", + "name": "accessibleNameRef", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Defines whether the component is required.", + "description": "Receives id(or many ids) of the elements that label the textarea.", + "default": "undefined", "privacy": "public", - "_ui5since": "1.0.0-rc.3" + "_ui5since": "1.0.0-rc.15" }, { "kind": "field", - "name": "placeholder", + "name": "disabled", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Defines a short hint intended to aid the user with data entry when the component has no value.", - "default": "undefined", + "default": "false", + "description": "Indicates whether the user can interact with the component or not.\n\n**Note:** A disabled component is completely noninteractive.", "privacy": "public" }, { "kind": "field", - "name": "valueState", + "name": "growing", "type": { - "text": "ValueState", - "references": [ - { - "name": "ValueState", - "package": "@ui5/webcomponents-base", - "module": "dist/types/ValueState.js" - } - ] + "text": "boolean" }, - "default": "\"None\"", - "description": "Defines the value state of the component.\n\n**Note:** If `maxlength` property is set,\nthe component turns into \"Critical\" state once the characters exceeds the limit.\nIn this case, only the \"Negative\" state is considered and can be applied.", - "privacy": "public", - "_ui5since": "1.0.0-rc.7" + "default": "false", + "description": "Enables the component to automatically grow and shrink dynamically with its content.", + "privacy": "public" }, { "kind": "field", - "name": "rows", + "name": "growingMaxRows", "type": { "text": "number" }, "default": "0", - "description": "Defines the number of visible text rows for the component.\n\n**Notes:**\n\n- If the `growing` property is enabled, this property defines the minimum rows to be displayed\nin the textarea.\n- The CSS `height` property wins over the `rows` property, if both are set.", + "description": "Defines the maximum number of rows that the component can grow.", "privacy": "public" }, { @@ -1383,90 +1538,108 @@ }, { "kind": "field", - "name": "showExceededText", + "name": "name", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Determines whether the characters exceeding the maximum allowed character count are visible\nin the component.\n\nIf set to `false`, the user is not allowed to enter more characters than what is set in the\n`maxlength` property.\nIf set to `true` the characters exceeding the `maxlength` value are selected on\npaste and the counter below the component displays their number.", + "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", + "default": "undefined", "privacy": "public" }, { "kind": "field", - "name": "growing", + "name": "placeholder", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Enables the component to automatically grow and shrink dynamically with its content.", + "description": "Defines a short hint intended to aid the user with data entry when the component has no value.", + "default": "undefined", "privacy": "public" }, { "kind": "field", - "name": "growingMaxRows", + "name": "readonly", "type": { - "text": "number" + "text": "boolean" }, - "default": "0", - "description": "Defines the maximum number of rows that the component can grow.", + "default": "false", + "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.", "privacy": "public" }, { "kind": "field", - "name": "name", + "name": "required", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", - "default": "undefined", - "privacy": "public" + "default": "false", + "description": "Defines whether the component is required.", + "privacy": "public", + "_ui5since": "1.0.0-rc.3" }, { "kind": "field", - "name": "accessibleName", + "name": "rows", "type": { - "text": "string | undefined" + "text": "number" }, - "description": "Defines the accessible ARIA name of the component.", - "default": "undefined", - "privacy": "public", - "_ui5since": "1.0.0-rc.15" + "default": "0", + "description": "Defines the number of visible text rows for the component.\n\n**Notes:**\n\n- If the `growing` property is enabled, this property defines the minimum rows to be displayed\nin the textarea.\n- The CSS `height` property wins over the `rows` property, if both are set.", + "privacy": "public" }, { "kind": "field", - "name": "accessibleNameRef", + "name": "showExceededText", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Receives id(or many ids) of the elements that label the textarea.", - "default": "undefined", - "privacy": "public", - "_ui5since": "1.0.0-rc.15" + "default": "false", + "description": "Determines whether the characters exceeding the maximum allowed character count are visible\nin the component.\n\nIf set to `false`, the user is not allowed to enter more characters than what is set in the\n`maxlength` property.\nIf set to `true` the characters exceeding the `maxlength` value are selected on\npaste and the counter below the component displays their number.", + "privacy": "public" }, { "kind": "field", - "name": "accessibleDescription", + "name": "value", "type": { - "text": "string | undefined" + "text": "string" }, - "description": "Defines the accessible description of the component.", - "default": "undefined", + "default": "\"\"", + "description": "Defines the value of the component.", "privacy": "public", - "_ui5since": "2.16.0" + "_ui5formProperty": true, + "_ui5formEvents": "change,input" }, { "kind": "field", - "name": "accessibleDescriptionRef", + "name": "valueState", "type": { - "text": "string | undefined" + "text": "ValueState", + "references": [ + { + "name": "ValueState", + "package": "@ui5/webcomponents-base", + "module": "dist/types/ValueState.js" + } + ] }, - "description": "Receives id(or many ids) of the elements that describe the textarea.", - "default": "undefined", + "default": "\"None\"", + "description": "Defines the value state of the component.\n\n**Note:** If `maxlength` property is set,\nthe component turns into \"Critical\" state once the characters exceeds the limit.\nIn this case, only the \"Negative\" state is considered and can be applied.", "privacy": "public", - "_ui5since": "2.16.0" + "_ui5since": "1.0.0-rc.7" } ], "events": [ + { + "name": "stop-generation", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the user requests to stop AI text generation.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": false + }, { "name": "version-change", "_ui5privacy": "public", @@ -1495,17 +1668,6 @@ } ] }, - { - "name": "stop-generation", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired when the user requests to stop AI text generation.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": false - }, { "name": "change", "_ui5privacy": "public", @@ -1547,24 +1709,24 @@ ] }, { - "name": "select", + "name": "scroll", "_ui5privacy": "public", "type": { "text": "CustomEvent" }, - "description": "Fired when some text has been selected.", + "description": "Fired when textarea is scrolled.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, "_ui5Bubbles": true, "_ui5since": "1.23.0" }, { - "name": "scroll", + "name": "select", "_ui5privacy": "public", "type": { "text": "CustomEvent" }, - "description": "Fired when textarea is scrolled.", + "description": "Fired when some text has been selected.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, "_ui5Bubbles": true, @@ -1572,6 +1734,15 @@ } ], "attributes": [ + { + "description": "Indicates the index of the currently displayed version.", + "name": "current-version", + "default": "0", + "fieldName": "currentVersion", + "type": { + "text": "number" + } + }, { "description": "Defines whether the `ui5-ai-textarea` is currently in a loading(processing) state.", "name": "loading", @@ -1591,29 +1762,164 @@ } }, { - "description": "Indicates the index of the currently displayed version.", - "name": "current-version", + "description": "Indicates the total number of result versions available.\n\nNotes:\nVersioning is hidden if the value is `0`", + "name": "total-versions", "default": "0", - "fieldName": "currentVersion", + "fieldName": "totalVersions", "type": { "text": "number" } }, { - "description": "Indicates the total number of result versions available.\n\nNotes:\nVersioning is hidden if the value is `0`", - "name": "total-versions", - "default": "0", - "fieldName": "totalVersions", + "description": "Defines the accessible description of the component.", + "name": "accessible-description", + "default": "undefined", + "fieldName": "accessibleDescription", "type": { - "text": "number" + "text": "string | undefined" } - } - ], - "superclass": { - "name": "TextArea", - "package": "@ui5/webcomponents", - "module": "dist/TextArea.js" - }, + }, + { + "description": "Receives id(or many ids) of the elements that describe the textarea.", + "name": "accessible-description-ref", + "default": "undefined", + "fieldName": "accessibleDescriptionRef", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the accessible ARIA name of the component.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Receives id(or many ids) of the elements that label the textarea.", + "name": "accessible-name-ref", + "default": "undefined", + "fieldName": "accessibleNameRef", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Indicates whether the user can interact with the component or not.\n\n**Note:** A disabled component is completely noninteractive.", + "name": "disabled", + "default": "false", + "fieldName": "disabled", + "type": { + "text": "boolean" + } + }, + { + "description": "Enables the component to automatically grow and shrink dynamically with its content.", + "name": "growing", + "default": "false", + "fieldName": "growing", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines the maximum number of rows that the component can grow.", + "name": "growing-max-rows", + "default": "0", + "fieldName": "growingMaxRows", + "type": { + "text": "number" + } + }, + { + "description": "Defines the maximum number of characters that the `value` can have.", + "name": "maxlength", + "default": "undefined", + "fieldName": "maxlength", + "type": { + "text": "number | undefined" + } + }, + { + "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", + "name": "name", + "default": "undefined", + "fieldName": "name", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines a short hint intended to aid the user with data entry when the component has no value.", + "name": "placeholder", + "default": "undefined", + "fieldName": "placeholder", + "type": { + "text": "string | undefined" + } + }, + { + "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.", + "name": "readonly", + "default": "false", + "fieldName": "readonly", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines whether the component is required.", + "name": "required", + "default": "false", + "fieldName": "required", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines the number of visible text rows for the component.\n\n**Notes:**\n\n- If the `growing` property is enabled, this property defines the minimum rows to be displayed\nin the textarea.\n- The CSS `height` property wins over the `rows` property, if both are set.", + "name": "rows", + "default": "0", + "fieldName": "rows", + "type": { + "text": "number" + } + }, + { + "description": "Determines whether the characters exceeding the maximum allowed character count are visible\nin the component.\n\nIf set to `false`, the user is not allowed to enter more characters than what is set in the\n`maxlength` property.\nIf set to `true` the characters exceeding the `maxlength` value are selected on\npaste and the counter below the component displays their number.", + "name": "show-exceeded-text", + "default": "false", + "fieldName": "showExceededText", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines the value of the component.", + "name": "value", + "default": "\"\"", + "fieldName": "value", + "type": { + "text": "string" + } + }, + { + "description": "Defines the value state of the component.\n\n**Note:** If `maxlength` property is set,\nthe component turns into \"Critical\" state once the characters exceeds the limit.\nIn this case, only the \"Negative\" state is considered and can be applied.", + "name": "value-state", + "default": "\"None\"", + "fieldName": "valueState", + "type": { + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" + } + } + ], + "superclass": { + "name": "TextArea", + "package": "@ui5/webcomponents", + "module": "dist/TextArea.js" + }, "tagName": "ui5-ai-textarea", "customElement": true, "_ui5experimental": "The **@ui5/webcomponents-ai** package is under development and considered experimental - components' APIs are subject to change.\nFurthermore, the package supports **Horizon** themes only.", @@ -1649,7 +1955,109 @@ { "kind": "javascript-module", "path": "dist/ToolbarLabel.js", - "declarations": [], + "declarations": [ + { + "kind": "class", + "description": "### Overview\nThe `ui5-ai-toolbar-label` represents a text label,\nused in the `ui5-toolbar`.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-ai/dist/ToolbarLabel.js\";`", + "name": "ToolbarLabel", + "members": [ + { + "kind": "field", + "name": "text", + "type": { + "text": "string" + }, + "default": "\"\"", + "description": "Defines the text of the label.", + "privacy": "public" + }, + { + "kind": "field", + "name": "overflowPriority", + "type": { + "text": "ToolbarItemOverflowBehavior", + "references": [ + { + "name": "ToolbarItemOverflowBehavior", + "package": "@ui5/webcomponents", + "module": "dist/types/ToolbarItemOverflowBehavior.js" + } + ] + }, + "default": "\"Default\"", + "description": "Property used to define the access of the item to the overflow Popover. If \"NeverOverflow\" option is set,\nthe item never goes in the Popover, if \"AlwaysOverflow\" - it never comes out of it.", + "privacy": "public" + }, + { + "kind": "field", + "name": "preventOverflowClosing", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines if the toolbar overflow popup should close upon interaction with the item.\nIt will close by default.", + "privacy": "public" + } + ], + "attributes": [ + { + "description": "Defines the text of the label.", + "name": "text", + "default": "\"\"", + "fieldName": "text", + "type": { + "text": "string" + } + }, + { + "description": "Property used to define the access of the item to the overflow Popover. If \"NeverOverflow\" option is set,\nthe item never goes in the Popover, if \"AlwaysOverflow\" - it never comes out of it.", + "name": "overflow-priority", + "default": "\"Default\"", + "fieldName": "overflowPriority", + "type": { + "text": "\"Default\" | \"NeverOverflow\" | \"AlwaysOverflow\"" + } + }, + { + "description": "Defines if the toolbar overflow popup should close upon interaction with the item.\nIt will close by default.", + "name": "prevent-overflow-closing", + "default": "false", + "fieldName": "preventOverflowClosing", + "type": { + "text": "boolean" + } + } + ], + "superclass": { + "name": "ToolbarItem", + "package": "@ui5/webcomponents", + "module": "dist/ToolbarItem.js" + }, + "tagName": "ui5-ai-toolbar-label", + "customElement": true, + "_ui5since": "1.0.0-rc.1", + "_ui5privacy": "private", + "slots": [ + { + "name": "default", + "description": "Wrapped component slot.", + "_ui5since": "2.20.0", + "_ui5propertyName": "item", + "_ui5type": { + "text": "Array", + "references": [ + { + "name": "IToolbarItemContent", + "package": "@ui5/webcomponents", + "module": "dist/ToolbarItem.js" + } + ] + }, + "_ui5privacy": "public" + } + ] + } + ], "exports": [ { "kind": "js", @@ -1658,13 +2066,155 @@ "name": "ToolbarLabel", "module": "dist/ToolbarLabel.js" } + }, + { + "kind": "custom-element-definition", + "name": "ui5-ai-toolbar-label", + "declaration": { + "name": "ToolbarLabel", + "module": "dist/ToolbarLabel.js" + } } ] }, { "kind": "javascript-module", "path": "dist/Versioning.js", - "declarations": [], + "declarations": [ + { + "kind": "class", + "description": "### Overview\n\nThe `ui5-ai-versioning` component provides navigation controls for AI-generated content versions.\nIt displays the current version index and total versions, with previous/next navigation buttons.\nThis component extends ToolbarItem to participate in toolbar overflow behavior as a single unit.\n\n### Structure\nThe `ui5-ai-versioning` consists of the following elements:\n- Previous Button: Navigates to the previous version (disabled when at first version)\n- Version Counter: Shows current version / total versions (e.g., \"2 / 5\")\n- Next Button: Navigates to the nex\nt version (disabled when at last version)\n\n### Focus Management\nThe component automatically manages focus when users reach version boundaries,\nmoving focus to the available navigation button when one becomes disabled.\n\n### Responsive Behavior\nWhen used in a toolbar, the entire versioning component (buttons + label) will overflow\ntogether as a single unit when there is insufficient space.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-ai/dist/Versioning.js\";`", + "name": "Versioning", + "members": [ + { + "kind": "field", + "name": "currentStep", + "type": { + "text": "number" + }, + "default": "0", + "description": "Indicates the index of the currently displayed result version.\n\nThis property represents the current position in the version history.", + "privacy": "public" + }, + { + "kind": "field", + "name": "totalSteps", + "type": { + "text": "number" + }, + "default": "0", + "description": "The total number of available result versions.\n\nNote: Versioning is hidden if the value is `0`.", + "privacy": "public" + }, + { + "kind": "field", + "name": "overflowPriority", + "type": { + "text": "ToolbarItemOverflowBehavior", + "references": [ + { + "name": "ToolbarItemOverflowBehavior", + "package": "@ui5/webcomponents", + "module": "dist/types/ToolbarItemOverflowBehavior.js" + } + ] + }, + "default": "\"Default\"", + "description": "Property used to define the access of the item to the overflow Popover. If \"NeverOverflow\" option is set,\nthe item never goes in the Popover, if \"AlwaysOverflow\" - it never comes out of it.", + "privacy": "public" + }, + { + "kind": "field", + "name": "preventOverflowClosing", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines if the toolbar overflow popup should close upon interaction with the item.\nIt will close by default.", + "privacy": "public" + } + ], + "events": [ + { + "name": "version-change", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the user clicks on version navigation buttons.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": false + } + ], + "attributes": [ + { + "description": "Indicates the index of the currently displayed result version.\n\nThis property represents the current position in the version history.", + "name": "current-step", + "default": "0", + "fieldName": "currentStep", + "type": { + "text": "number" + } + }, + { + "description": "The total number of available result versions.\n\nNote: Versioning is hidden if the value is `0`.", + "name": "total-steps", + "default": "0", + "fieldName": "totalSteps", + "type": { + "text": "number" + } + }, + { + "description": "Property used to define the access of the item to the overflow Popover. If \"NeverOverflow\" option is set,\nthe item never goes in the Popover, if \"AlwaysOverflow\" - it never comes out of it.", + "name": "overflow-priority", + "default": "\"Default\"", + "fieldName": "overflowPriority", + "type": { + "text": "\"Default\" | \"NeverOverflow\" | \"AlwaysOverflow\"" + } + }, + { + "description": "Defines if the toolbar overflow popup should close upon interaction with the item.\nIt will close by default.", + "name": "prevent-overflow-closing", + "default": "false", + "fieldName": "preventOverflowClosing", + "type": { + "text": "boolean" + } + } + ], + "superclass": { + "name": "ToolbarItem", + "package": "@ui5/webcomponents", + "module": "dist/ToolbarItem.js" + }, + "tagName": "ui5-ai-versioning", + "customElement": true, + "_ui5since": "2.16.0", + "_ui5privacy": "private", + "slots": [ + { + "name": "default", + "description": "Wrapped component slot.", + "_ui5since": "2.20.0", + "_ui5propertyName": "item", + "_ui5type": { + "text": "Array", + "references": [ + { + "name": "IToolbarItemContent", + "package": "@ui5/webcomponents", + "module": "dist/ToolbarItem.js" + } + ] + }, + "_ui5privacy": "public" + } + ] + } + ], "exports": [ { "kind": "js", @@ -1673,13 +2223,144 @@ "name": "Versioning", "module": "dist/Versioning.js" } + }, + { + "kind": "custom-element-definition", + "name": "ui5-ai-versioning", + "declaration": { + "name": "Versioning", + "module": "dist/Versioning.js" + } } ] }, { "kind": "javascript-module", "path": "dist/WritingAssistant.js", - "declarations": [], + "declarations": [ + { + "kind": "class", + "description": "### Overview\n\nThe `ui5-ai-textarea-toolbar` component provides a specialized toolbar for AI TextArea functionality.\nIt manages different states of the AI assistant and provides version navigation capabilities.\n\n### Structure\nThe `ui5-ai-textarea-toolbar` consists of the following elements:\n- AI Generate Button: Triggers AI text generation or stops ongoing generation\n- Version Navigation: Allows navigation between multiple AI-generated results\n- Action Label: Displays the current AI action being performed\n\n### ES6 Module Import\n\n`import \"@sap-webcomponents/ai/dist/WritingAssistant.js\";`", + "name": "WritingAssistant", + "members": [ + { + "kind": "field", + "name": "currentVersion", + "type": { + "text": "number" + }, + "default": "0", + "description": "Indicates the index of the currently displayed result version.\n\nThe index is **0-based** (i.e. `0` represents the first result).\nThis property is synchronized with the parent AI TextArea component.", + "privacy": "public", + "_ui5since": "2.16.0" + }, + { + "kind": "method", + "name": "handleButtonClick", + "return": { + "type": { + "text": "void" + } + }, + "description": "Handles the click event for the AI generate button.\nToggles between generate and stop states based on current button state.", + "privacy": "public" + }, + { + "kind": "field", + "name": "promptDescription", + "type": { + "text": "string" + }, + "default": "\"\"", + "description": "Defines the prompt description of the Writing Assistant.\n\nThis text is displayed in the toolbar to indicate the current or last\nperformed AI action (e.g., \"Generated text\", \"Simplified text\").", + "privacy": "public" + }, + { + "kind": "field", + "name": "totalVersions", + "type": { + "text": "number" + }, + "default": "0", + "description": "Indicates the total number of result versions available.\n\nThis property determines whether version navigation controls are displayed.\nWhen totalVersions > 0, previous/next buttons become available.", + "privacy": "public" + } + ], + "events": [ + { + "name": "button-click", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the user clicks on the AI button.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": false + }, + { + "name": "stop-generation", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the user clicks on the \"Stop\" button to stop ongoing AI text generation.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": false + }, + { + "name": "version-change", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the user clicks on version navigation buttons.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": false + } + ], + "attributes": [ + { + "description": "Indicates the index of the currently displayed result version.\n\nThe index is **0-based** (i.e. `0` represents the first result).\nThis property is synchronized with the parent AI TextArea component.", + "name": "current-version", + "default": "0", + "fieldName": "currentVersion", + "type": { + "text": "number" + } + }, + { + "description": "Defines the prompt description of the Writing Assistant.\n\nThis text is displayed in the toolbar to indicate the current or last\nperformed AI action (e.g., \"Generated text\", \"Simplified text\").", + "name": "prompt-description", + "default": "\"\"", + "fieldName": "promptDescription", + "type": { + "text": "string" + } + }, + { + "description": "Indicates the total number of result versions available.\n\nThis property determines whether version navigation controls are displayed.\nWhen totalVersions > 0, previous/next buttons become available.", + "name": "total-versions", + "default": "0", + "fieldName": "totalVersions", + "type": { + "text": "number" + } + } + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-ai-writing-assistant", + "customElement": true, + "_ui5since": "2.16.0", + "_ui5privacy": "private" + } + ], "exports": [ { "kind": "js", @@ -1688,6 +2369,14 @@ "name": "WritingAssistant", "module": "dist/WritingAssistant.js" } + }, + { + "kind": "custom-element-definition", + "name": "ui5-ai-writing-assistant", + "declaration": { + "name": "WritingAssistant", + "module": "dist/WritingAssistant.js" + } } ] } diff --git a/.storybook/custom-element-manifests/fiori.json b/.storybook/custom-element-manifests/fiori.json index 430e5b44336..1ed7c7aa0c4 100644 --- a/.storybook/custom-element-manifests/fiori.json +++ b/.storybook/custom-element-manifests/fiori.json @@ -30,8 +30,8 @@ "name": "BarcodeScannerDialog", "slots": [ { - "name": "header", - "description": "Defines the header HTML Element.\n\n**Note:** If `header` slot is provided, the labelling of the dialog is a responsibility of the application developer.\n`accessibleName` should be used.", + "name": "footer", + "description": "Defines the footer HTML Element.\n\n**Note:** When you provide custom content for the `footer` slot, the default close button is not rendered.\nThis means you need to include your own mechanism within the custom `footer` to close the dialog,\nsuch as a button with an event listener that closes the dialog.\n\n**Note:** If the `footer` slot is not provided, a default footer with a close button is rendered automatically,\nallowing users to close the dialog without any additional implementation.", "_ui5since": "2.4.0", "_ui5type": { "text": "Array" @@ -39,8 +39,8 @@ "_ui5privacy": "public" }, { - "name": "footer", - "description": "Defines the footer HTML Element.\n\n**Note:** When you provide custom content for the `footer` slot, the default close button is not rendered.\nThis means you need to include your own mechanism within the custom `footer` to close the dialog,\nsuch as a button with an event listener that closes the dialog.\n\n**Note:** If the `footer` slot is not provided, a default footer with a close button is rendered automatically,\nallowing users to close the dialog without any additional implementation.", + "name": "header", + "description": "Defines the header HTML Element.\n\n**Note:** If `header` slot is provided, the labelling of the dialog is a responsibility of the application developer.\n`accessibleName` should be used.", "_ui5since": "2.4.0", "_ui5type": { "text": "Array" @@ -75,19 +75,19 @@ "_ui5since": "2.0.0" }, { - "name": "scan-success", + "name": "scan-error", "_ui5privacy": "public", "type": { - "text": "CustomEvent", + "text": "CustomEvent", "references": [ { - "name": "BarcodeScannerDialogScanSuccessEventDetail", + "name": "BarcodeScannerDialogScanErrorEventDetail", "package": "@ui5/webcomponents-fiori", "module": "dist/BarcodeScannerDialog.js" } ] }, - "description": "Fires when the scan is completed successfuuly.", + "description": "Fires when the scan fails with error.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, "_ui5Bubbles": true, @@ -96,45 +96,45 @@ "type": { "text": "string" }, - "name": "text", - "_ui5privacy": "public", - "description": "the scan result as string" - }, - { - "type": { - "text": "Object" - }, - "name": "rawBytes", + "name": "message", "_ui5privacy": "public", - "description": "the scan result as a Uint8Array" + "description": "the error message" } ] }, { - "name": "scan-error", + "name": "scan-success", "_ui5privacy": "public", "type": { - "text": "CustomEvent", + "text": "CustomEvent", "references": [ { - "name": "BarcodeScannerDialogScanErrorEventDetail", + "name": "BarcodeScannerDialogScanSuccessEventDetail", "package": "@ui5/webcomponents-fiori", "module": "dist/BarcodeScannerDialog.js" } ] }, - "description": "Fires when the scan fails with error.", + "description": "Fires when the scan is completed successfuuly.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, "_ui5Bubbles": true, "_ui5parameters": [ + { + "type": { + "text": "Object" + }, + "name": "rawBytes", + "_ui5privacy": "public", + "description": "the scan result as a Uint8Array" + }, { "type": { "text": "string" }, - "name": "message", + "name": "text", "_ui5privacy": "public", - "description": "the error message" + "description": "the scan result as string" } ] } @@ -213,17 +213,10 @@ "_ui5privacy": "public" }, { - "name": "titleArea", - "description": "Defines the title HTML Element.", + "name": "footerArea", + "description": "Defines the footer HTML Element.", "_ui5type": { - "text": "Array", - "references": [ - { - "name": "DynamicPageTitle", - "package": "@ui5/webcomponents-fiori", - "module": "dist/DynamicPageTitle.js" - } - ] + "text": "Array" }, "_ui5privacy": "public" }, @@ -243,10 +236,17 @@ "_ui5privacy": "public" }, { - "name": "footerArea", - "description": "Defines the footer HTML Element.", + "name": "titleArea", + "description": "Defines the title HTML Element.", "_ui5type": { - "text": "Array" + "text": "Array", + "references": [ + { + "name": "DynamicPageTitle", + "package": "@ui5/webcomponents-fiori", + "module": "dist/DynamicPageTitle.js" + } + ] }, "_ui5privacy": "public" } @@ -254,42 +254,42 @@ "members": [ { "kind": "field", - "name": "hidePinButton", + "name": "headerPinned", "type": { "text": "boolean" }, "default": "false", - "description": "Defines if the pin button is hidden.", + "description": "Defines if the header is pinned.", "privacy": "public" }, { "kind": "field", - "name": "headerPinned", + "name": "headerSnapped", "type": { "text": "boolean" }, + "description": "Defines if the header is snapped.", "default": "false", - "description": "Defines if the header is pinned.", "privacy": "public" }, { "kind": "field", - "name": "showFooter", + "name": "hidePinButton", "type": { "text": "boolean" }, "default": "false", - "description": "Defines if the footer is shown.", + "description": "Defines if the pin button is hidden.", "privacy": "public" }, { "kind": "field", - "name": "headerSnapped", + "name": "showFooter", "type": { "text": "boolean" }, - "description": "Defines if the header is snapped.", "default": "false", + "description": "Defines if the footer is shown.", "privacy": "public" } ], @@ -319,39 +319,39 @@ ], "attributes": [ { - "description": "Defines if the pin button is hidden.", - "name": "hide-pin-button", + "description": "Defines if the header is pinned.", + "name": "header-pinned", "default": "false", - "fieldName": "hidePinButton", + "fieldName": "headerPinned", "type": { "text": "boolean" } }, { - "description": "Defines if the header is pinned.", - "name": "header-pinned", + "description": "Defines if the header is snapped.", + "name": "header-snapped", "default": "false", - "fieldName": "headerPinned", + "fieldName": "headerSnapped", "type": { - "text": "boolean" + "text": "any" } }, { - "description": "Defines if the footer is shown.", - "name": "show-footer", + "description": "Defines if the pin button is hidden.", + "name": "hide-pin-button", "default": "false", - "fieldName": "showFooter", + "fieldName": "hidePinButton", "type": { "text": "boolean" } }, { - "description": "Defines if the header is snapped.", - "name": "header-snapped", + "description": "Defines if the footer is shown.", + "name": "show-footer", "default": "false", - "fieldName": "headerSnapped", + "fieldName": "showFooter", "type": { - "text": "any" + "text": "boolean" } } ], @@ -438,7 +438,22 @@ { "kind": "javascript-module", "path": "dist/DynamicPageHeaderActions.js", - "declarations": [], + "declarations": [ + { + "kind": "class", + "description": "### Overview\n\nThe `DynamicPageHeaderActions` component is part of the `DynamicPage`\nfamily and is holding the action buttons behind the `DynamicPageTitle` and the `DynamicPageHeader`.\n\nThe \"pin\" action is used to attach the header to a certain state (expanded/collapsed).\nThe expand/collapse action is used to switch between the two states of `DynamicPageHeader`.", + "name": "DynamicPageHeaderActions", + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-dynamic-page-header-actions", + "customElement": true, + "_ui5privacy": "private", + "members": [] + } + ], "exports": [ { "kind": "js", @@ -447,6 +462,14 @@ "name": "DynamicPageHeaderActions", "module": "dist/DynamicPageHeaderActions.js" } + }, + { + "kind": "custom-element-definition", + "name": "ui5-dynamic-page-header-actions", + "declaration": { + "name": "DynamicPageHeaderActions", + "module": "dist/DynamicPageHeaderActions.js" + } } ] }, @@ -460,40 +483,33 @@ "name": "DynamicPageTitle", "slots": [ { - "name": "heading", - "description": "Defines the content of the Heading of the Dynamic Page.\n\nThe font size of the title within the `heading` slot can be adjusted to the recommended values using the following CSS variables:\n\n**Expanded:** `var(--sapObjectHeader_Title_FontSize)`\n\n**Collapsed:** `var(--sapObjectHeader_Title_SnappedFontSize)`", + "name": "actionsBar", + "description": "Defines the bar with actions in the Dynamic page title.", "_ui5type": { "text": "Array" }, "_ui5privacy": "public" }, { - "name": "snappedHeading", - "description": "Defines the heading that is shown only when the header is snapped.", + "name": "breadcrumbs", + "description": "Defines the content of the breadcrumbs inside Dynamic Page Title.", "_ui5type": { "text": "Array" }, "_ui5privacy": "public" }, { - "name": "snappedTitleOnMobile", - "description": "Defines the content of the snapped title on mobile devices.\n\nThis slot is displayed only when the `DynamicPageTitle` is in the snapped state on mobile devices.\nIt should be used to provide a simplified, single-line title that takes up less space on smaller screens.\n\n**Note:**\n- The content set in this slot **overrides** all other content set in the `DynamicPageTitle` slots when displayed.\n- The slot is intended for a single `ui5-title` component.", - "_ui5since": "2.3.0", + "name": "default", + "description": "Defines the content of the Dynamic page title.", + "_ui5propertyName": "content", "_ui5type": { - "text": "Array", - "references": [ - { - "name": "Title", - "package": "@ui5/webcomponents", - "module": "dist/Title.js" - } - ] + "text": "Array<HTMLElement>" }, "_ui5privacy": "public" }, { - "name": "actionsBar", - "description": "Defines the bar with actions in the Dynamic page title.", + "name": "heading", + "description": "Defines the content of the Heading of the Dynamic Page.\n\nThe font size of the title within the `heading` slot can be adjusted to the recommended values using the following CSS variables:\n\n**Expanded:** `var(--sapObjectHeader_Title_FontSize)`\n\n**Collapsed:** `var(--sapObjectHeader_Title_SnappedFontSize)`", "_ui5type": { "text": "Array<HTMLElement>" }, @@ -515,33 +531,40 @@ "_ui5privacy": "public" }, { - "name": "default", - "description": "Defines the content of the Dynamic page title.", - "_ui5propertyName": "content", + "name": "snappedHeading", + "description": "Defines the heading that is shown only when the header is snapped.", "_ui5type": { "text": "Array<HTMLElement>" }, "_ui5privacy": "public" }, { - "name": "subheading", - "description": "Defines the content of the title that is shown only when the header is not snapped.", + "name": "snappedSubheading", + "description": "Defines the content of the title that is shown only when the header is snapped.", "_ui5type": { "text": "Array<HTMLElement>" }, "_ui5privacy": "public" }, { - "name": "snappedSubheading", - "description": "Defines the content of the title that is shown only when the header is snapped.", + "name": "snappedTitleOnMobile", + "description": "Defines the content of the snapped title on mobile devices.\n\nThis slot is displayed only when the `DynamicPageTitle` is in the snapped state on mobile devices.\nIt should be used to provide a simplified, single-line title that takes up less space on smaller screens.\n\n**Note:**\n- The content set in this slot **overrides** all other content set in the `DynamicPageTitle` slots when displayed.\n- The slot is intended for a single `ui5-title` component.", + "_ui5since": "2.3.0", "_ui5type": { - "text": "Array<HTMLElement>" + "text": "Array<Title>", + "references": [ + { + "name": "Title", + "package": "@ui5/webcomponents", + "module": "dist/Title.js" + } + ] }, "_ui5privacy": "public" }, { - "name": "breadcrumbs", - "description": "Defines the content of the breadcrumbs inside Dynamic Page Title.", + "name": "subheading", + "description": "Defines the content of the title that is shown only when the header is not snapped.", "_ui5type": { "text": "Array<HTMLElement>" }, @@ -606,6 +629,34 @@ } ], "members": [ + { + "kind": "field", + "name": "accessibilityAttributes", + "type": { + "text": "DynamicSideContentAccessibilityAttributes", + "references": [ + { + "name": "DynamicSideContentAccessibilityAttributes", + "package": "@ui5/webcomponents-fiori", + "module": "dist/DynamicSideContent.js" + } + ] + }, + "default": "{}", + "description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following fields:\n\n - **mainContent**: `mainContent.ariaLabel` defines the aria-label of the main content area. Accepts any string.\n - **sideContent**: `sideContent.ariaLabel` defines the aria-label of the side content area. Accepts any string.", + "privacy": "public", + "_ui5since": "2.6.0" + }, + { + "kind": "field", + "name": "equalSplit", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the component is in equal split mode. In this mode, the side and\nthe main content take 50:50 percent of the container on all screen sizes\nexcept for phone, where the main and side contents are switching visibility\nusing the toggle method.", + "privacy": "public" + }, { "kind": "field", "name": "hideMainContent", @@ -626,6 +677,23 @@ "description": "Defines the visibility of the side content.", "privacy": "public" }, + { + "kind": "field", + "name": "sideContentFallDown", + "type": { + "text": "SideContentFallDown", + "references": [ + { + "name": "SideContentFallDown", + "package": "@ui5/webcomponents-fiori", + "module": "dist/types/SideContentFallDown.js" + } + ] + }, + "default": "\"OnMinimumWidth\"", + "description": "Defines on which breakpoints the side content falls down below the main content.", + "privacy": "public" + }, { "kind": "field", "name": "sideContentPosition", @@ -661,68 +729,23 @@ "privacy": "public" }, { - "kind": "field", - "name": "sideContentFallDown", + "kind": "method", + "name": "toggleContents", + "return": { + "type": { + "text": "void" + } + }, + "description": "Toggles visibility of main and side contents on S screen size (mobile device).", + "privacy": "public" + } + ], + "events": [ + { + "name": "layout-change", + "_ui5privacy": "public", "type": { - "text": "SideContentFallDown", - "references": [ - { - "name": "SideContentFallDown", - "package": "@ui5/webcomponents-fiori", - "module": "dist/types/SideContentFallDown.js" - } - ] - }, - "default": "\"OnMinimumWidth\"", - "description": "Defines on which breakpoints the side content falls down below the main content.", - "privacy": "public" - }, - { - "kind": "field", - "name": "equalSplit", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines whether the component is in equal split mode. In this mode, the side and\nthe main content take 50:50 percent of the container on all screen sizes\nexcept for phone, where the main and side contents are switching visibility\nusing the toggle method.", - "privacy": "public" - }, - { - "kind": "field", - "name": "accessibilityAttributes", - "type": { - "text": "DynamicSideContentAccessibilityAttributes", - "references": [ - { - "name": "DynamicSideContentAccessibilityAttributes", - "package": "@ui5/webcomponents-fiori", - "module": "dist/DynamicSideContent.js" - } - ] - }, - "default": "{}", - "description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following fields:\n\n - **mainContent**: `mainContent.ariaLabel` defines the aria-label of the main content area. Accepts any string.\n - **sideContent**: `sideContent.ariaLabel` defines the aria-label of the side content area. Accepts any string.", - "privacy": "public", - "_ui5since": "2.6.0" - }, - { - "kind": "method", - "name": "toggleContents", - "return": { - "type": { - "text": "void" - } - }, - "description": "Toggles visibility of main and side contents on S screen size (mobile device).", - "privacy": "public" - } - ], - "events": [ - { - "name": "layout-change", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent<DynamicSideContentLayoutChangeEventDetail>", + "text": "CustomEvent<DynamicSideContentLayoutChangeEventDetail>", "references": [ { "name": "DynamicSideContentLayoutChangeEventDetail", @@ -746,19 +769,19 @@ }, { "type": { - "text": "string | undefined" + "text": "boolean" }, - "name": "previousBreakpoint", + "name": "mainContentVisible", "_ui5privacy": "public", - "description": "the breakpoint that was active before change to current breakpoint." + "description": "visibility of the main content." }, { "type": { - "text": "boolean" + "text": "string | undefined" }, - "name": "mainContentVisible", + "name": "previousBreakpoint", "_ui5privacy": "public", - "description": "visibility of the main content." + "description": "the breakpoint that was active before change to current breakpoint." }, { "type": { @@ -772,6 +795,24 @@ } ], "attributes": [ + { + "description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following fields:\n\n - **mainContent**: `mainContent.ariaLabel` defines the aria-label of the main content area. Accepts any string.\n - **sideContent**: `sideContent.ariaLabel` defines the aria-label of the side content area. Accepts any string.", + "name": "accessibility-attributes", + "default": "{}", + "fieldName": "accessibilityAttributes", + "type": { + "text": "DynamicSideContentAccessibilityAttributes" + } + }, + { + "description": "Defines whether the component is in equal split mode. In this mode, the side and\nthe main content take 50:50 percent of the container on all screen sizes\nexcept for phone, where the main and side contents are switching visibility\nusing the toggle method.", + "name": "equal-split", + "default": "false", + "fieldName": "equalSplit", + "type": { + "text": "boolean" + } + }, { "description": "Defines the visibility of the main content.", "name": "hide-main-content", @@ -790,6 +831,15 @@ "text": "boolean" } }, + { + "description": "Defines on which breakpoints the side content falls down below the main content.", + "name": "side-content-fall-down", + "default": "\"OnMinimumWidth\"", + "fieldName": "sideContentFallDown", + "type": { + "text": "\"BelowXL\" | \"BelowL\" | \"BelowM\" | \"OnMinimumWidth\"" + } + }, { "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).", "name": "side-content-position", @@ -807,33 +857,6 @@ "type": { "text": "\"AlwaysShow\" | \"ShowAboveL\" | \"ShowAboveM\" | \"ShowAboveS\" | \"NeverShow\"" } - }, - { - "description": "Defines on which breakpoints the side content falls down below the main content.", - "name": "side-content-fall-down", - "default": "\"OnMinimumWidth\"", - "fieldName": "sideContentFallDown", - "type": { - "text": "\"BelowXL\" | \"BelowL\" | \"BelowM\" | \"OnMinimumWidth\"" - } - }, - { - "description": "Defines whether the component is in equal split mode. In this mode, the side and\nthe main content take 50:50 percent of the container on all screen sizes\nexcept for phone, where the main and side contents are switching visibility\nusing the toggle method.", - "name": "equal-split", - "default": "false", - "fieldName": "equalSplit", - "type": { - "text": "boolean" - } - }, - { - "description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following fields:\n\n - **mainContent**: `mainContent.ariaLabel` defines the aria-label of the main content area. Accepts any string.\n - **sideContent**: `sideContent.ariaLabel` defines the aria-label of the side content area. Accepts any string.", - "name": "accessibility-attributes", - "default": "{}", - "fieldName": "accessibilityAttributes", - "type": { - "text": "DynamicSideContentAccessibilityAttributes" - } } ], "superclass": { @@ -894,40 +917,40 @@ "members": [ { "kind": "field", - "name": "text", + "name": "additionalText", "type": { "text": "string | undefined" }, - "description": "Defines the text of the filter item.", + "description": "Defines the additional text of the filter item.\nThis text is typically used to show the number of selected filter options within this category.", "default": "undefined", "privacy": "public" }, { "kind": "field", - "name": "additionalText", + "name": "text", "type": { "text": "string | undefined" }, - "description": "Defines the additional text of the filter item.\nThis text is typically used to show the number of selected filter options within this category.", + "description": "Defines the text of the filter item.", "default": "undefined", "privacy": "public" } ], "attributes": [ { - "description": "Defines the text of the filter item.", - "name": "text", + "description": "Defines the additional text of the filter item.\nThis text is typically used to show the number of selected filter options within this category.", + "name": "additional-text", "default": "undefined", - "fieldName": "text", + "fieldName": "additionalText", "type": { "text": "string | undefined" } }, { - "description": "Defines the additional text of the filter item.\nThis text is typically used to show the number of selected filter options within this category.", - "name": "additional-text", + "description": "Defines the text of the filter item.", + "name": "text", "default": "undefined", - "fieldName": "additionalText", + "fieldName": "text", "type": { "text": "string | undefined" } @@ -975,35 +998,26 @@ "members": [ { "kind": "field", - "name": "text", + "name": "selected", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Defines the text of the filter option.", - "default": "undefined", + "default": "false", + "description": "Defines if the filter option is selected.", "privacy": "public" }, { "kind": "field", - "name": "selected", + "name": "text", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Defines if the filter option is selected.", + "description": "Defines the text of the filter option.", + "default": "undefined", "privacy": "public" } ], "attributes": [ - { - "description": "Defines the text of the filter option.", - "name": "text", - "default": "undefined", - "fieldName": "text", - "type": { - "text": "string | undefined" - } - }, { "description": "Defines if the filter option is selected.", "name": "selected", @@ -1012,6 +1026,15 @@ "type": { "text": "boolean" } + }, + { + "description": "Defines the text of the filter option.", + "name": "text", + "default": "undefined", + "fieldName": "text", + "type": { + "text": "string | undefined" + } } ], "superclass": { @@ -1055,8 +1078,8 @@ "name": "FlexibleColumnLayout", "slots": [ { - "name": "startColumn", - "description": "Defines the content in the start column.", + "name": "endColumn", + "description": "Defines the content in the end column.", "_ui5type": { "text": "Array<HTMLElement>" }, @@ -1071,8 +1094,8 @@ "_ui5privacy": "public" }, { - "name": "endColumn", - "description": "Defines the content in the end column.", + "name": "startColumn", + "description": "Defines the content in the start column.", "_ui5type": { "text": "Array<HTMLElement>" }, @@ -1080,34 +1103,6 @@ } ], "members": [ - { - "kind": "field", - "name": "layout", - "type": { - "text": "FCLLayout", - "references": [ - { - "name": "FCLLayout", - "package": "@ui5/webcomponents-fiori", - "module": "dist/types/FCLLayout.js" - } - ] - }, - "default": "\"OneColumn\"", - "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.", - "privacy": "public" - }, - { - "kind": "field", - "name": "disableResizing", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Specifies if the user is allowed to change the columns layout by dragging the separator between the columns.", - "privacy": "public", - "_ui5since": "2.0.0" - }, { "kind": "field", "name": "accessibilityAttributes", @@ -1126,24 +1121,6 @@ "privacy": "public", "_ui5since": "2.0.0" }, - { - "kind": "field", - "name": "layoutsConfiguration", - "type": { - "text": "LayoutConfiguration", - "references": [ - { - "name": "LayoutConfiguration", - "package": "@ui5/webcomponents-fiori", - "module": "dist/FlexibleColumnLayout.js" - } - ] - }, - "default": "{}", - "description": "Allows to customize the column proportions per screen size and layout.\nIf no custom proportion provided for a specific layout, the default will be used.\n\n**Notes:**\n\n- The proportions should be given in percentages. For example [\"30%\", \"40%\", \"30%\"], [\"70%\", \"30%\", 0], etc.\n- The proportions should add up to 100%.\n- Hidden columns are marked as \"0px\", e.g. [\"0px\", \"70%\", \"30%\"]. Specifying 0 or \"0%\" for hidden columns is also valid.\n- If the proportions do not match the layout (e.g. if provided proportions [\"70%\", \"30%\", \"0px\"] for \"OneColumn\" layout), then the default proportions will be used instead.\n- Whenever the user drags the columns separator to resize the columns, the `layoutsConfiguration` object will be updated with the user-specified proportions for the given layout (and the `layout-configuration-change` event will be fired).\n- No custom configuration available for the phone screen size, as the default of 100% column width is always used there.", - "privacy": "public", - "_ui5since": "2.16.0" - }, { "kind": "field", "name": "columnLayout", @@ -1164,25 +1141,14 @@ }, { "kind": "field", - "name": "startColumnVisible", - "type": { - "text": "boolean" - }, - "description": "Returns if the `start` column is visible.", - "default": "true", - "privacy": "public", - "readonly": true - }, - { - "kind": "field", - "name": "midColumnVisible", + "name": "disableResizing", "type": { "text": "boolean" }, - "description": "Returns if the `middle` column is visible.", "default": "false", + "description": "Specifies if the user is allowed to change the columns layout by dragging the separator between the columns.", "privacy": "public", - "readonly": true + "_ui5since": "2.0.0" }, { "kind": "field", @@ -1197,13 +1163,70 @@ }, { "kind": "field", - "name": "visibleColumns", + "name": "layout", "type": { - "text": "number" - }, - "description": "Returns the number of currently visible columns.", - "default": "1", - "privacy": "public", + "text": "FCLLayout", + "references": [ + { + "name": "FCLLayout", + "package": "@ui5/webcomponents-fiori", + "module": "dist/types/FCLLayout.js" + } + ] + }, + "default": "\"OneColumn\"", + "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.", + "privacy": "public" + }, + { + "kind": "field", + "name": "layoutsConfiguration", + "type": { + "text": "LayoutConfiguration", + "references": [ + { + "name": "LayoutConfiguration", + "package": "@ui5/webcomponents-fiori", + "module": "dist/FlexibleColumnLayout.js" + } + ] + }, + "default": "{}", + "description": "Allows to customize the column proportions per screen size and layout.\nIf no custom proportion provided for a specific layout, the default will be used.\n\n**Notes:**\n\n- The proportions should be given in percentages. For example [\"30%\", \"40%\", \"30%\"], [\"70%\", \"30%\", 0], etc.\n- The proportions should add up to 100%.\n- Hidden columns are marked as \"0px\", e.g. [\"0px\", \"70%\", \"30%\"]. Specifying 0 or \"0%\" for hidden columns is also valid.\n- If the proportions do not match the layout (e.g. if provided proportions [\"70%\", \"30%\", \"0px\"] for \"OneColumn\" layout), then the default proportions will be used instead.\n- Whenever the user drags the columns separator to resize the columns, the `layoutsConfiguration` object will be updated with the user-specified proportions for the given layout (and the `layout-configuration-change` event will be fired).\n- No custom configuration available for the phone screen size, as the default of 100% column width is always used there.", + "privacy": "public", + "_ui5since": "2.16.0" + }, + { + "kind": "field", + "name": "midColumnVisible", + "type": { + "text": "boolean" + }, + "description": "Returns if the `middle` column is visible.", + "default": "false", + "privacy": "public", + "readonly": true + }, + { + "kind": "field", + "name": "startColumnVisible", + "type": { + "text": "boolean" + }, + "description": "Returns if the `start` column is visible.", + "default": "true", + "privacy": "public", + "readonly": true + }, + { + "kind": "field", + "name": "visibleColumns", + "type": { + "text": "number" + }, + "description": "Returns the number of currently visible columns.", + "default": "1", + "privacy": "public", "readonly": true } ], @@ -1228,34 +1251,34 @@ "_ui5parameters": [ { "type": { - "text": "FCLLayout", - "references": [ - { - "name": "FCLLayout", - "package": "@ui5/webcomponents-fiori", - "module": "dist/types/FCLLayout.js" - } - ] + "text": "array" }, - "name": "layout", + "name": "columnLayout", "_ui5privacy": "public", - "description": "The current layout" + "description": "The effective column layout, f.e [67%, 33%, 0]" }, { "type": { - "text": "array" + "text": "boolean" }, - "name": "columnLayout", + "name": "endColumnVisible", "_ui5privacy": "public", - "description": "The effective column layout, f.e [67%, 33%, 0]" + "description": "Indicates if the end column is currently visible" }, { "type": { - "text": "boolean" + "text": "FCLLayout", + "references": [ + { + "name": "FCLLayout", + "package": "@ui5/webcomponents-fiori", + "module": "dist/types/FCLLayout.js" + } + ] }, - "name": "startColumnVisible", + "name": "layout", "_ui5privacy": "public", - "description": "Indicates if the start column is currently visible" + "description": "The current layout" }, { "type": { @@ -1269,9 +1292,9 @@ "type": { "text": "boolean" }, - "name": "endColumnVisible", + "name": "resized", "_ui5privacy": "public", - "description": "Indicates if the end column is currently visible" + "description": "Indicates if the layout was changed by resizing the entire component" }, { "type": { @@ -1285,9 +1308,9 @@ "type": { "text": "boolean" }, - "name": "resized", + "name": "startColumnVisible", "_ui5privacy": "public", - "description": "Indicates if the layout was changed by resizing the entire component" + "description": "Indicates if the start column is currently visible" } ] }, @@ -1304,12 +1327,20 @@ } ] }, - "description": "Fired when the `layoutsConfiguration` changes via user interaction by dragging the separators.", + "description": "Fired when the `layoutsConfiguration` changes via user interaction by dragging the separators.\n\n**Note:** The `layout-configuration-change` event is in an experimental state and is a subject to change.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, "_ui5Bubbles": true, "_ui5since": "2.16.0", "_ui5parameters": [ + { + "type": { + "text": "array" + }, + "name": "columnLayout", + "_ui5privacy": "public", + "description": "The effective column layout, f.e [\"67%\", \"33%\", \"0px\"]" + }, { "type": { "text": "FCLLayout", @@ -1339,26 +1370,27 @@ "name": "media", "_ui5privacy": "public", "description": "The current media type" - }, - { - "type": { - "text": "array" - }, - "name": "columnLayout", - "_ui5privacy": "public", - "description": "The effective column layout, f.e [\"67%\", \"33%\", \"0px\"]" } ] } ], "attributes": [ { - "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.", - "name": "layout", - "default": "\"OneColumn\"", - "fieldName": "layout", + "description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following fields,\nwhere each field is an object supporting one or more accessibility attributes:\n\n - **startColumn**: `startColumn.role` and `startColumn.name`.\n - **midColumn**: `midColumn.role` and `midColumn.name`.\n - **endColumn**: `endColumn.role` and `endColumn.name`.\n - **startSeparator**: `startSeparator.role` and `startSeparator.name`.\n - **endSeparator**: `endSeparator.role` and `endSeparator.name`.\n\nThe accessibility attributes support the following values:\n\n- **role**: Defines the accessible ARIA landmark role of the area.\nAccepts the following values: `none`, `complementary`, `contentinfo`, `main` or `region`.\n\n- **name**: Defines the accessible ARIA name of the area.\nAccepts any string.", + "name": "accessibility-attributes", + "default": "{}", + "fieldName": "accessibilityAttributes", "type": { - "text": "\"OneColumn\" | \"TwoColumnsStartExpanded\" | \"TwoColumnsMidExpanded\" | \"ThreeColumnsMidExpanded\" | \"ThreeColumnsEndExpanded\" | \"ThreeColumnsStartExpandedEndHidden\" | \"ThreeColumnsMidExpandedEndHidden\" | \"ThreeColumnsStartHiddenMidExpanded\" | \"ThreeColumnsStartHiddenEndExpanded\" | \"MidColumnFullScreen\" | \"EndColumnFullS..." + "text": "FCLAccessibilityAttributes" + } + }, + { + "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.", + "name": "column-layout", + "default": "undefined", + "fieldName": "columnLayout", + "type": { + "text": "any" } }, { @@ -1371,12 +1403,21 @@ } }, { - "description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following fields,\nwhere each field is an object supporting one or more accessibility attributes:\n\n - **startColumn**: `startColumn.role` and `startColumn.name`.\n - **midColumn**: `midColumn.role` and `midColumn.name`.\n - **endColumn**: `endColumn.role` and `endColumn.name`.\n - **startSeparator**: `startSeparator.role` and `startSeparator.name`.\n - **endSeparator**: `endSeparator.role` and `endSeparator.name`.\n\nThe accessibility attributes support the following values:\n\n- **role**: Defines the accessible ARIA landmark role of the area.\nAccepts the following values: `none`, `complementary`, `contentinfo`, `main` or `region`.\n\n- **name**: Defines the accessible ARIA name of the area.\nAccepts any string.", - "name": "accessibility-attributes", - "default": "{}", - "fieldName": "accessibilityAttributes", + "description": "Returns if the `end` column is visible.", + "name": "end-column-visible", + "default": "false", + "fieldName": "endColumnVisible", "type": { - "text": "FCLAccessibilityAttributes" + "text": "any" + } + }, + { + "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.", + "name": "layout", + "default": "\"OneColumn\"", + "fieldName": "layout", + "type": { + "text": "\"OneColumn\" | \"TwoColumnsStartExpanded\" | \"TwoColumnsMidExpanded\" | \"ThreeColumnsMidExpanded\" | \"ThreeColumnsEndExpanded\" | \"ThreeColumnsStartExpandedEndHidden\" | \"ThreeColumnsMidExpandedEndHidden\" | \"ThreeColumnsStartHiddenMidExpanded\" | \"ThreeColumnsStartHiddenEndExpanded\" | \"MidColumnFullScreen\" | \"EndColumnFullS..." } }, { @@ -1388,24 +1429,6 @@ "text": "LayoutConfiguration" } }, - { - "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.", - "name": "column-layout", - "default": "undefined", - "fieldName": "columnLayout", - "type": { - "text": "any" - } - }, - { - "description": "Returns if the `start` column is visible.", - "name": "start-column-visible", - "default": "true", - "fieldName": "startColumnVisible", - "type": { - "text": "any" - } - }, { "description": "Returns if the `middle` column is visible.", "name": "mid-column-visible", @@ -1416,10 +1439,10 @@ } }, { - "description": "Returns if the `end` column is visible.", - "name": "end-column-visible", - "default": "false", - "fieldName": "endColumnVisible", + "description": "Returns if the `start` column is visible.", + "name": "start-column-visible", + "default": "true", + "fieldName": "startColumnVisible", "type": { "text": "any" } @@ -1475,35 +1498,26 @@ "members": [ { "kind": "field", - "name": "text", + "name": "selected", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Defines the text of the group item.", - "default": "undefined", + "default": "false", + "description": "Defines if the group item is selected.", "privacy": "public" }, { "kind": "field", - "name": "selected", + "name": "text", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Defines if the group item is selected.", + "description": "Defines the text of the group item.", + "default": "undefined", "privacy": "public" } ], "attributes": [ - { - "description": "Defines the text of the group item.", - "name": "text", - "default": "undefined", - "fieldName": "text", - "type": { - "text": "string | undefined" - } - }, { "description": "Defines if the group item is selected.", "name": "selected", @@ -1512,6 +1526,15 @@ "type": { "text": "boolean" } + }, + { + "description": "Defines the text of the group item.", + "name": "text", + "default": "undefined", + "fieldName": "text", + "type": { + "text": "string | undefined" + } } ], "superclass": { @@ -1561,11 +1584,18 @@ ], "slots": [ { - "name": "title", - "description": "Defines the title of the component.\n\n**Note:** Using this slot, the default title text of illustration and the value of `title` property will be overwritten.", - "_ui5since": "1.7.0", + "name": "default", + "description": "Defines the component actions.\n\n**Note:** Not displayed when the `design` property is set to `Base`.", + "_ui5propertyName": "actions", "_ui5type": { - "text": "Array<HTMLElement> & string" + "text": "Array<IButton>", + "references": [ + { + "name": "IButton", + "package": "@ui5/webcomponents", + "module": "dist/Button.js" + } + ] }, "_ui5privacy": "public" }, @@ -1579,18 +1609,11 @@ "_ui5privacy": "public" }, { - "name": "default", - "description": "Defines the component actions.\n\n**Note:** Not displayed when the `design` property is set to `Base`.", - "_ui5propertyName": "actions", + "name": "title", + "description": "Defines the title of the component.\n\n**Note:** Using this slot, the default title text of illustration and the value of `title` property will be overwritten.", + "_ui5since": "1.7.0", "_ui5type": { - "text": "Array<IButton>", - "references": [ - { - "name": "IButton", - "package": "@ui5/webcomponents", - "module": "dist/Button.js" - } - ] + "text": "Array<HTMLElement> & string" }, "_ui5privacy": "public" } @@ -1598,16 +1621,28 @@ "members": [ { "kind": "field", - "name": "name", + "name": "accessibleNameRef", "type": { - "text": "string" + "text": "string | undefined" }, - "default": "\"BeforeSearch\"", - "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\";`", - "privacy": "public" - }, - { - "kind": "field", + "description": "Receives id(or many ids) of the elements that label the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.7.0" + }, + { + "kind": "field", + "name": "decorative", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the illustration is decorative.\n\nWhen set to `true`, the attributes `role=\"presentation\"` and `aria-hidden=\"true\"` are applied to the SVG element.", + "privacy": "public", + "_ui5since": "2.10.0" + }, + { + "kind": "field", "name": "design", "type": { "text": "IllustrationMessageDesign", @@ -1624,6 +1659,16 @@ "privacy": "public", "_ui5since": "2.0.0" }, + { + "kind": "field", + "name": "name", + "type": { + "text": "string" + }, + "default": "\"BeforeSearch\"", + "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\";`", + "privacy": "public" + }, { "kind": "field", "name": "subtitleText", @@ -1643,38 +1688,25 @@ "description": "Defines the title of the component.\n\n**Note:** Using this property, the default title text of illustration will be overwritten.", "default": "undefined", "privacy": "public" - }, + } + ], + "attributes": [ { - "kind": "field", - "name": "accessibleNameRef", - "type": { - "text": "string | undefined" - }, "description": "Receives id(or many ids) of the elements that label the component.", + "name": "accessible-name-ref", "default": "undefined", - "privacy": "public", - "_ui5since": "1.7.0" + "fieldName": "accessibleNameRef", + "type": { + "text": "string | undefined" + } }, { - "kind": "field", + "description": "Defines whether the illustration is decorative.\n\nWhen set to `true`, the attributes `role=\"presentation\"` and `aria-hidden=\"true\"` are applied to the SVG element.", "name": "decorative", - "type": { - "text": "boolean" - }, "default": "false", - "description": "Defines whether the illustration is decorative.\n\nWhen set to `true`, the attributes `role=\"presentation\"` and `aria-hidden=\"true\"` are applied to the SVG element.", - "privacy": "public", - "_ui5since": "2.10.0" - } - ], - "attributes": [ - { - "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\";`", - "name": "name", - "default": "\"BeforeSearch\"", - "fieldName": "name", + "fieldName": "decorative", "type": { - "text": "string" + "text": "boolean" } }, { @@ -1686,6 +1718,15 @@ "text": "\"Auto\" | \"Base\" | \"Dot\" | \"Spot\" | \"Dialog\" | \"Scene\" | \"ExtraSmall\" | \"Small\" | \"Medium\" | \"Large\"" } }, + { + "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\";`", + "name": "name", + "default": "\"BeforeSearch\"", + "fieldName": "name", + "type": { + "text": "string" + } + }, { "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.", "name": "subtitle-text", @@ -1703,24 +1744,6 @@ "type": { "text": "string | undefined" } - }, - { - "description": "Receives id(or many ids) of the elements that label the component.", - "name": "accessible-name-ref", - "default": "undefined", - "fieldName": "accessibleNameRef", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Defines whether the illustration is decorative.\n\nWhen set to `true`, the attributes `role=\"presentation\"` and `aria-hidden=\"true\"` are applied to the SVG element.", - "name": "decorative", - "default": "false", - "fieldName": "decorative", - "type": { - "text": "boolean" - } } ], "superclass": { @@ -1786,16 +1809,6 @@ } ], "members": [ - { - "kind": "field", - "name": "showAllThumbnails", - "type": { - "text": "boolean" - }, - "default": "false", - "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.", - "privacy": "public" - }, { "kind": "field", "name": "interactiveDisplayArea", @@ -1856,9 +1869,41 @@ "default": "\"Bottom\"", "description": "Determines the vertical alignment of the thumbnails menu\nvs. the central display area.", "privacy": "public" + }, + { + "kind": "field", + "name": "showAllThumbnails", + "type": { + "text": "boolean" + }, + "default": "false", + "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.", + "privacy": "public" } ], "events": [ + { + "name": "display-area-click", + "_ui5privacy": "public", + "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.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true + }, + { + "name": "overflow-click", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the thumbnails overflow button is clicked.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true + }, { "name": "selection-change", "_ui5privacy": "public", @@ -1886,40 +1931,9 @@ "description": "the selected item." } ] - }, - { - "name": "overflow-click", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired when the thumbnails overflow button is clicked.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true - }, - { - "name": "display-area-click", - "_ui5privacy": "public", - "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.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true } ], "attributes": [ - { - "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.", - "name": "show-all-thumbnails", - "default": "false", - "fieldName": "showAllThumbnails", - "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.", "name": "interactive-display-area", @@ -1955,6 +1969,15 @@ "type": { "text": "\"Top\" | \"Bottom\"" } + }, + { + "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.", + "name": "show-all-thumbnails", + "default": "false", + "fieldName": "showAllThumbnails", + "type": { + "text": "boolean" + } } ], "superclass": { @@ -2015,16 +2038,6 @@ } ], "members": [ - { - "kind": "field", - "name": "selected", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines the selected state of the component.", - "privacy": "public" - }, { "kind": "field", "name": "disabled", @@ -2051,18 +2064,19 @@ "default": "\"Square\"", "description": "Determines the layout of the item container.", "privacy": "public" - } - ], - "attributes": [ + }, { - "description": "Defines the selected state of the component.", + "kind": "field", "name": "selected", - "default": "false", - "fieldName": "selected", "type": { "text": "boolean" - } - }, + }, + "default": "false", + "description": "Defines the selected state of the component.", + "privacy": "public" + } + ], + "attributes": [ { "description": "Defines whether the component is in disabled state.", "name": "disabled", @@ -2080,6 +2094,15 @@ "type": { "text": "\"Square\" | \"Wide\"" } + }, + { + "description": "Defines the selected state of the component.", + "name": "selected", + "default": "false", + "fieldName": "selected", + "type": { + "text": "boolean" + } } ], "superclass": { @@ -2128,6 +2151,15 @@ "description": "### Overview\n\nThe `ui5-navigation-layout` is a container component that can be used to\ncreate a layout with a header, a side navigation and a content area.\n\n### Usage\n\nUse the `ui5-navigation-layout` to create whole screen of an application with vertical navigation.\n\n### Responsive Behavior\n\nOn larger screens with a width of 600px or more, excluding mobile phone devices, the side navigation is visible\nby default and can be expanded or collapsed using the `mode` property.\nOn mobile phone devices and screens with a width of 599px or less, the side navigation is hidden by\ndefault and can be displayed using the `mode` property.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/NavigationLayout.js\";`", "name": "NavigationLayout", "slots": [ + { + "name": "default", + "description": "Defines the content.", + "_ui5propertyName": "content", + "_ui5type": { + "text": "Array<HTMLElement>" + }, + "_ui5privacy": "public" + }, { "name": "header", "description": "Defines the header.", @@ -2150,18 +2182,20 @@ ] }, "_ui5privacy": "public" - }, - { - "name": "default", - "description": "Defines the content.", - "_ui5propertyName": "content", - "_ui5type": { - "text": "Array<HTMLElement>" - }, - "_ui5privacy": "public" } ], "members": [ + { + "kind": "method", + "name": "isSideCollapsed", + "return": { + "type": { + "text": "boolean" + } + }, + "description": "Gets whether the side navigation is collapsed.", + "privacy": "public" + }, { "kind": "field", "name": "mode", @@ -2178,17 +2212,6 @@ "default": "\"Auto\"", "description": "Specifies the navigation layout mode.", "privacy": "public" - }, - { - "kind": "method", - "name": "isSideCollapsed", - "return": { - "type": { - "text": "boolean" - } - }, - "description": "Gets whether the side navigation is collapsed.", - "privacy": "public" } ], "attributes": [ @@ -2235,117 +2258,177 @@ { "kind": "javascript-module", "path": "dist/NavigationMenu.js", - "declarations": [], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "NavigationMenu", - "module": "dist/NavigationMenu.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/NavigationMenuItem.js", - "declarations": [], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "NavigationMenuItem", - "module": "dist/NavigationMenuItem.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/NotificationList.js", - "declarations": [ + "declarations": [ { "kind": "class", - "description": "### Overview\nThe `ui5-notification-list` web component represents\na container for `ui5-li-notification-group` and `ui5-li-notification`.\n\n### Keyboard Handling\n\n#### Basic Navigation\nThe `ui5-notification-list` provides advanced keyboard handling.\nWhen a list is focused the user can use the following keyboard\nshortcuts in order to perform a navigation:\n\n- [Up] or [Left] - Navigates up the items\n- [Down] or [Right] - Navigates down the items\n- [Home] - Navigates to first item\n- [End] - Navigates to the last item\n\n#### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/NotificationList.js\";``", - "name": "NotificationList", + "description": "### Overview\n\n`ui5-navigation-menu` component represents a hierarchical menu structure, inherits all the functionality of `ui5-menu`.\n\n### Usage\n\n`ui5-navigation-menu` contains `ui5-navigation-menu-item` components.\nAn arbitrary hierarchy structure can be represented by recursively nesting navigation menu items.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/NavigationMenu.js\";`", + "name": "NavigationMenu", "slots": [ { "name": "default", - "description": "Defines the items of the component.", + "description": "Defines the items of this component.\n\n**Note:** Use `ui5-navigation-menu-item` for the intended design.", "_ui5propertyName": "items", "_ui5type": { - "text": "Array<NotificationListItemBase>", + "text": "Array<NavigationMenuItem>", "references": [ { - "name": "NotificationListItemBase", + "name": "NavigationMenuItem", "package": "@ui5/webcomponents-fiori", - "module": "dist/NotificationListItemBase.js" + "module": "dist/NavigationMenuItem.js" } ] }, "_ui5privacy": "public" } ], + "superclass": { + "name": "Menu", + "package": "@ui5/webcomponents", + "module": "dist/Menu.js" + }, + "tagName": "ui5-navigation-menu", + "customElement": true, + "_ui5since": "1.22.0", + "_ui5privacy": "private", "members": [ { "kind": "field", - "name": "noDataText", + "name": "headerText", "type": { "text": "string | undefined" }, - "description": "Defines the text that is displayed when the component contains no items.", + "description": "Defines the header text of the menu (displayed on mobile).", "default": "undefined", "privacy": "public" + }, + { + "kind": "field", + "name": "horizontalAlign", + "type": { + "text": "PopoverHorizontalAlign", + "references": [ + { + "name": "PopoverHorizontalAlign", + "package": "@ui5/webcomponents", + "module": "dist/types/PopoverHorizontalAlign.js" + } + ] + }, + "default": "\"Start\"", + "description": "Determines the horizontal alignment of the menu relative to its opener control.", + "privacy": "public" + }, + { + "kind": "field", + "name": "loading", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines if a loading indicator would be displayed inside the corresponding ui5-menu popover.", + "privacy": "public", + "_ui5since": "1.13.0" + }, + { + "kind": "field", + "name": "loadingDelay", + "type": { + "text": "number" + }, + "default": "1000", + "description": "Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding ui5-menu popover.", + "privacy": "public", + "_ui5since": "1.13.0" + }, + { + "kind": "field", + "name": "open", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Indicates if the menu is open.", + "privacy": "public", + "_ui5since": "1.10.0" + }, + { + "kind": "field", + "name": "opener", + "type": { + "text": "HTMLElement | string | null | undefined" + }, + "description": "Defines the ID or DOM Reference of the element at which the menu is shown.\nWhen using this attribute in a declarative way, you must only use the `id` (as a string) of the element at which you want to show the popover.\nYou can only set the `opener` attribute to a DOM Reference when using JavaScript.", + "privacy": "public", + "default": "undefined", + "_ui5since": "1.10.0" + }, + { + "kind": "field", + "name": "placement", + "type": { + "text": "PopoverPlacement", + "references": [ + { + "name": "PopoverPlacement", + "package": "@ui5/webcomponents", + "module": "dist/types/PopoverPlacement.js" + } + ] + }, + "default": "\"Bottom\"", + "description": "Determines on which side the component is placed at.", + "privacy": "public", + "_ui5since": "2.16.0" } ], "events": [ { - "name": "item-click", + "name": "before-close", "_ui5privacy": "public", "type": { - "text": "CustomEvent<NotificationItemClickEventDetail>", + "text": "CustomEvent<MenuBeforeCloseEventDetail>", "references": [ { - "name": "NotificationItemClickEventDetail", - "package": "@ui5/webcomponents-fiori", - "module": "dist/NotificationList.js" + "name": "MenuBeforeCloseEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/Menu.js" } ] }, - "description": "Fired when an item is clicked.", + "description": "Fired before the menu is closed. This event can be cancelled, which will prevent the menu from closing.", "_ui5Cancelable": true, "_ui5allowPreventDefault": true, "_ui5Bubbles": true, + "_ui5since": "1.10.0", "_ui5parameters": [ { "type": { - "text": "HTMLElement" + "text": "boolean" }, - "name": "item", + "name": "escPressed", "_ui5privacy": "public", - "description": "The clicked item." + "description": "Indicates that `ESC` key has triggered the event." } ] }, { - "name": "item-close", + "name": "before-open", "_ui5privacy": "public", "type": { - "text": "CustomEvent<NotificationItemCloseEventDetail>", + "text": "CustomEvent<MenuBeforeOpenEventDetail>", "references": [ { - "name": "NotificationItemCloseEventDetail", - "package": "@ui5/webcomponents-fiori", - "module": "dist/NotificationList.js" + "name": "MenuBeforeOpenEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/Menu.js" } ] }, - "description": "Fired when the `Close` button of any item is clicked.", + "description": "Fired before the menu is opened. This event can be cancelled, which will prevent the menu from opening.\n\n**Note:** Since 1.14.0 the event is also fired before a sub-menu opens.", "_ui5Cancelable": true, "_ui5allowPreventDefault": true, "_ui5Bubbles": true, + "_ui5since": "1.10.0", "_ui5parameters": [ { "type": { @@ -2353,27 +2436,39 @@ }, "name": "item", "_ui5privacy": "public", - "description": "the item about to be closed." + "description": "The `ui5-menu-item` that triggers opening of the sub-menu or undefined when fired upon root menu opening." } ] }, { - "name": "item-toggle", + "name": "close", "_ui5privacy": "public", "type": { - "text": "CustomEvent<NotificationItemToggleEventDetail>", + "text": "CustomEvent" + }, + "description": "Fired after the menu is closed.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": false, + "_ui5since": "1.10.0" + }, + { + "name": "item-click", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<MenuItemClickEventDetail>", "references": [ { - "name": "NotificationItemToggleEventDetail", - "package": "@ui5/webcomponents-fiori", - "module": "dist/NotificationList.js" + "name": "MenuItemClickEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/Menu.js" } ] }, - "description": "Fired when an item is toggled.", + "description": "Fired when an item is being clicked.\n\n**Note:** Since 1.17.0 the event is preventable, allowing the menu to remain open after an item is pressed.", "_ui5Cancelable": true, "_ui5allowPreventDefault": true, - "_ui5Bubbles": true, + "_ui5Bubbles": false, "_ui5parameters": [ { "type": { @@ -2381,31 +2476,96 @@ }, "name": "item", "_ui5privacy": "public", - "description": "the toggled item." + "description": "The currently clicked menu item." + }, + { + "type": { + "text": "string" + }, + "name": "text", + "_ui5privacy": "public", + "description": "The text of the currently clicked menu item." } ] + }, + { + "name": "open", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired after the menu is opened.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5since": "1.10.0" } ], "attributes": [ { - "description": "Defines the text that is displayed when the component contains no items.", - "name": "no-data-text", + "description": "Defines the header text of the menu (displayed on mobile).", + "name": "header-text", "default": "undefined", - "fieldName": "noDataText", + "fieldName": "headerText", "type": { "text": "string | undefined" } + }, + { + "description": "Determines the horizontal alignment of the menu relative to its opener control.", + "name": "horizontal-align", + "default": "\"Start\"", + "fieldName": "horizontalAlign", + "type": { + "text": "\"Start\" | \"End\" | \"Center\" | \"Stretch\"" + } + }, + { + "description": "Defines if a loading indicator would be displayed inside the corresponding ui5-menu popover.", + "name": "loading", + "default": "false", + "fieldName": "loading", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding ui5-menu popover.", + "name": "loading-delay", + "default": "1000", + "fieldName": "loadingDelay", + "type": { + "text": "number" + } + }, + { + "description": "Indicates if the menu is open.", + "name": "open", + "default": "false", + "fieldName": "open", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines the ID or DOM Reference of the element at which the menu is shown.\nWhen using this attribute in a declarative way, you must only use the `id` (as a string) of the element at which you want to show the popover.\nYou can only set the `opener` attribute to a DOM Reference when using JavaScript.", + "name": "opener", + "default": "undefined", + "fieldName": "opener", + "type": { + "text": "string | HTMLElement | null | undefined" + } + }, + { + "description": "Determines on which side the component is placed at.", + "name": "placement", + "default": "\"Bottom\"", + "fieldName": "placement", + "type": { + "text": "\"Top\" | \"Bottom\" | \"Start\" | \"End\"" + } } - ], - "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" - }, - "tagName": "ui5-notification-list", - "customElement": true, - "_ui5since": "2.0.0", - "_ui5privacy": "public" + ] } ], "exports": [ @@ -2413,102 +2573,139 @@ "kind": "js", "name": "default", "declaration": { - "name": "NotificationList", - "module": "dist/NotificationList.js" + "name": "NavigationMenu", + "module": "dist/NavigationMenu.js" } }, { "kind": "custom-element-definition", - "name": "ui5-notification-list", + "name": "ui5-navigation-menu", "declaration": { - "name": "NotificationList", - "module": "dist/NotificationList.js" + "name": "NavigationMenu", + "module": "dist/NavigationMenu.js" } } ] }, { "kind": "javascript-module", - "path": "dist/NotificationListGroupItem.js", + "path": "dist/NavigationMenuItem.js", "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\nThe component consists of:\n\n- `Toggle` button to expand and collapse the group\n- `TitleText` to entitle the group\n- Items of the group\n\n### Usage\nThe component should be used inside a `ui5-notification-list`.\n\n### Keyboard Handling\nThe `ui5-li-notification-group` provides advanced keyboard handling.\nThis component provides fast navigation when the header is focused using the following keyboard shortcuts:\n\n- [Space] - toggles expand / collapse of the group\n- [Plus] - expands the group\n- [Minus] - collapses the group\n- [Right] - expands the group\n- [Left] - collapses the group\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/NotificationListGroupItem.js\";`", - "name": "NotificationListGroupItem", - "slots": [ + "description": "### Overview\n\n`ui5-navigation-menu-item` is the item to use inside a `ui5-navigation-menu`.\nAn arbitrary hierarchy structure can be represented by recursively nesting navigation menu items.\n\n### Usage\n\n`ui5-navigation-menu-item` represents a node in a `ui5-navigation-menu`. The navigation menu itself is rendered as a list,\nand each `ui5-navigation-menu-item` is represented by a list item in that list. Therefore, you should only use\n`ui5-navigation-menu-item` directly in your apps. The `ui5-li` list item is internal for the list, and not intended for public use.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/NavigationMenuItem.js\";`", + "name": "NavigationMenuItem", + "members": [ { - "name": "default", - "description": "Defines the items of the `ui5-li-notification-group`,\nusually `ui5-li-notification` items.", - "_ui5propertyName": "items", - "_ui5type": { - "text": "Array<NotificationListItem>", - "references": [ - { - "name": "NotificationListItem", - "package": "@ui5/webcomponents-fiori", - "module": "dist/NotificationListItem.js" - } - ] + "kind": "field", + "name": "href", + "type": { + "text": "string | undefined" }, - "_ui5privacy": "public" - } - ], - "members": [ + "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": "undefined", + "_ui5since": "1.22.0" + }, { "kind": "field", - "name": "collapsed", + "name": "target", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Defines if the group is collapsed or expanded.", - "privacy": "public" + "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": "undefined", + "_ui5since": "1.22.0" }, { "kind": "field", - "name": "growing", + "name": "accessibilityAttributes", "type": { - "text": "NotificationListGrowingMode", + "text": "MenuItemAccessibilityAttributes", "references": [ { - "name": "NotificationListGrowingMode", + "name": "MenuItemAccessibilityAttributes", "package": "@ui5/webcomponents", - "module": "dist/types/NotificationListGrowingMode.js" + "module": "dist/MenuItem.js" } ] }, - "default": "\"None\"", - "description": "Defines whether the component will have growing capability by pressing a `More` button.\nWhen button is pressed `load-more` event will be fired.", + "default": "{}", + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaKeyShortcuts**: Indicated the availability of a keyboard shortcuts defined for the menu item.\n\n- **role**: Defines the role of the menu item. If not set, menu item will have default role=\"menuitem\".", "privacy": "public", - "_ui5since": "2.2.0" + "_ui5since": "2.1.0" }, { "kind": "field", - "name": "titleText", + "name": "accessibleName", "type": { "text": "string | undefined" }, - "description": "Defines the `titleText` of the item.", + "description": "Defines the accessible ARIA name of the component.", "default": "undefined", "privacy": "public", - "inheritedFrom": { - "name": "NotificationListItemBase", - "module": "dist/NotificationListItemBase.js" - } + "_ui5since": "1.7.0" }, { "kind": "field", - "name": "read", + "name": "additionalText", + "type": { + "text": "string | undefined" + }, + "description": "Defines the `additionalText`, displayed in the end of the menu item.\n\n**Note:** The additional text will not be displayed if there are items added in `items` slot or there are\ncomponents added to `endContent` slot.\n\nThe priority of what will be displayed at the end of the menu item is as follows:\nsub-menu arrow (if there are items added in `items` slot) -> components added in `endContent` -> text set to `additionalText`.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.8.0" + }, + { + "kind": "field", + "name": "checked", "type": { "text": "boolean" }, "default": "false", - "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.", + "description": "Defines whether menu item is in checked state.\n\n**Note:** checked state is only taken into account when menu item is added to menu item group\nwith `checkMode` other than `None`.\n\n**Note:** A checked menu item has a checkmark displayed at its end.", "privacy": "public", - "inheritedFrom": { - "name": "NotificationListItemBase", - "module": "dist/NotificationListItemBase.js" - } + "_ui5since": "2.12.0" + }, + { + "kind": "field", + "name": "disabled", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether menu item is in disabled state.\n\n**Note:** A disabled menu item is noninteractive.", + "privacy": "public" + }, + { + "kind": "field", + "name": "highlight", + "type": { + "text": "Highlight", + "references": [ + { + "name": "Highlight", + "package": "@ui5/webcomponents", + "module": "dist/types/Highlight.js" + } + ] + }, + "default": "\"None\"", + "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", + "privacy": "public", + "_ui5since": "1.24" + }, + { + "kind": "field", + "name": "icon", + "type": { + "text": "string | undefined" + }, + "description": "Defines the icon to be displayed as graphical element within the component.\nThe SAP-icons font provides numerous options.\n\n**Example:**\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "default": "undefined", + "privacy": "public" }, { "kind": "field", @@ -2517,13 +2714,9 @@ "text": "boolean" }, "default": "false", - "description": "Defines if a busy indicator would be displayed over the item.", + "description": "Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding menu popover.\n\n**Note:** If set to `true` a busy indicator component will be displayed into the related one to the current menu item sub-menu popover.", "privacy": "public", - "_ui5since": "1.0.0-rc.8", - "inheritedFrom": { - "name": "NotificationListItemBase", - "module": "dist/NotificationListItemBase.js" - } + "_ui5since": "1.13.0" }, { "kind": "field", @@ -2532,68 +2725,374 @@ "text": "number" }, "default": "1000", - "description": "Defines the delay in milliseconds, after which the busy indicator will show up for this component.", + "description": "Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding menu popover.", "privacy": "public", - "inheritedFrom": { - "name": "NotificationListItemBase", - "module": "dist/NotificationListItemBase.js" - } - } - ], - "events": [ + "_ui5since": "1.13.0" + }, { - "name": "toggle", - "_ui5privacy": "public", + "kind": "field", + "name": "navigated", "type": { - "text": "CustomEvent" + "text": "boolean" }, - "description": "Fired when the `ui5-li-notification-group` is expanded/collapsed by user interaction.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true + "default": "false", + "description": "The navigated state of the list item.\nIf set to `true`, a navigation indicator is displayed at the end of the list item.", + "privacy": "public", + "_ui5since": "1.10.0" }, { - "name": "load-more", - "_ui5privacy": "public", + "kind": "field", + "name": "selected", "type": { - "text": "CustomEvent" + "text": "boolean" }, - "description": "Fired when additional items are requested.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5since": "2.2.0" + "default": "false", + "description": "Defines the selected state of the component.", + "privacy": "public" + }, + { + "kind": "field", + "name": "text", + "type": { + "text": "string | undefined" + }, + "description": "Defines the text of the tree item.", + "default": "undefined", + "privacy": "public" + }, + { + "kind": "field", + "name": "tooltip", + "type": { + "text": "string | undefined" + }, + "description": "Defines the text of the tooltip for the menu item.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.23.0" + }, + { + "kind": "field", + "name": "type", + "type": { + "text": "ListItemType", + "references": [ + { + "name": "ListItemType", + "package": "@ui5/webcomponents", + "module": "dist/types/ListItemType.js" + } + ] + }, + "default": "\"Active\"", + "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.", + "privacy": "public" } ], "attributes": [ { - "description": "Defines if the group is collapsed or expanded.", - "name": "collapsed", + "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.", + "name": "href", + "default": "undefined", + "fieldName": "href", + "type": { + "text": "string | undefined" + } + }, + { + "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.**", + "name": "target", + "default": "undefined", + "fieldName": "target", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaKeyShortcuts**: Indicated the availability of a keyboard shortcuts defined for the menu item.\n\n- **role**: Defines the role of the menu item. If not set, menu item will have default role=\"menuitem\".", + "name": "accessibility-attributes", + "default": "{}", + "fieldName": "accessibilityAttributes", + "type": { + "text": "MenuItemAccessibilityAttributes" + } + }, + { + "description": "Defines the accessible ARIA name of the component.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the `additionalText`, displayed in the end of the menu item.\n\n**Note:** The additional text will not be displayed if there are items added in `items` slot or there are\ncomponents added to `endContent` slot.\n\nThe priority of what will be displayed at the end of the menu item is as follows:\nsub-menu arrow (if there are items added in `items` slot) -> components added in `endContent` -> text set to `additionalText`.", + "name": "additional-text", + "default": "undefined", + "fieldName": "additionalText", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines whether menu item is in checked state.\n\n**Note:** checked state is only taken into account when menu item is added to menu item group\nwith `checkMode` other than `None`.\n\n**Note:** A checked menu item has a checkmark displayed at its end.", + "name": "checked", "default": "false", - "fieldName": "collapsed", + "fieldName": "checked", "type": { "text": "boolean" } }, { - "description": "Defines whether the component will have growing capability by pressing a `More` button.\nWhen button is pressed `load-more` event will be fired.", - "name": "growing", + "description": "Defines whether menu item is in disabled state.\n\n**Note:** A disabled menu item is noninteractive.", + "name": "disabled", + "default": "false", + "fieldName": "disabled", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", + "name": "highlight", "default": "\"None\"", - "fieldName": "growing", + "fieldName": "highlight", "type": { - "text": "\"Button\" | \"None\"" + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" } - } - ], - "superclass": { - "name": "NotificationListItemBase", - "package": "@ui5/webcomponents-fiori", - "module": "dist/NotificationListItemBase.js" - }, - "tagName": "ui5-li-notification-group", - "customElement": true, - "_ui5since": "1.0.0-rc.8", - "_ui5privacy": "public" + }, + { + "description": "Defines the icon to be displayed as graphical element within the component.\nThe SAP-icons font provides numerous options.\n\n**Example:**\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "name": "icon", + "default": "undefined", + "fieldName": "icon", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding menu popover.\n\n**Note:** If set to `true` a busy indicator component will be displayed into the related one to the current menu item sub-menu popover.", + "name": "loading", + "default": "false", + "fieldName": "loading", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding menu popover.", + "name": "loading-delay", + "default": "1000", + "fieldName": "loadingDelay", + "type": { + "text": "number" + } + }, + { + "description": "The navigated state of the list item.\nIf set to `true`, a navigation indicator is displayed at the end of the list item.", + "name": "navigated", + "default": "false", + "fieldName": "navigated", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines the selected state of the component.", + "name": "selected", + "default": "false", + "fieldName": "selected", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines the text of the tree item.", + "name": "text", + "default": "undefined", + "fieldName": "text", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the text of the tooltip for the menu item.", + "name": "tooltip", + "default": "undefined", + "fieldName": "tooltip", + "type": { + "text": "string | undefined" + } + }, + { + "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.", + "name": "type", + "default": "\"Active\"", + "fieldName": "type", + "type": { + "text": "\"Navigation\" | \"Inactive\" | \"Active\" | \"Detail\"" + } + } + ], + "superclass": { + "name": "MenuItem", + "package": "@ui5/webcomponents", + "module": "dist/MenuItem.js" + }, + "tagName": "ui5-navigation-menu-item", + "customElement": true, + "_ui5since": "1.22.0", + "_ui5privacy": "private", + "slots": [ + { + "name": "default", + "description": "Defines the items of this component.\n\n**Note:** The slot can hold menu item and menu separator items.\n\nIf there are items added to this slot, an arrow will be displayed at the end\nof the item in order to indicate that there are items added. In that case components added\nto `endContent` slot or `additionalText` content will not be displayed.\n\nThe priority of what will be displayed at the end of the menu item is as follows:\nsub-menu arrow (if there are items added in `items` slot) -> components added in `endContent` -> text set to `additionalText`.", + "_ui5propertyName": "items", + "_ui5type": { + "text": "Array<IMenuItem>", + "references": [ + { + "name": "IMenuItem", + "package": "@ui5/webcomponents", + "module": "dist/Menu.js" + } + ] + }, + "_ui5privacy": "public" + }, + { + "name": "deleteButton", + "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<IButton>", + "references": [ + { + "name": "IButton", + "package": "@ui5/webcomponents", + "module": "dist/Button.js" + } + ] + }, + "_ui5privacy": "public" + }, + { + "name": "endContent", + "description": "Defines the components that should be displayed at the end of the menu item.\n\n**Note:** It is highly recommended to slot only components of type `ui5-button`,`ui5-link`\nor `ui5-icon` in order to preserve the intended design. If there are components added to this slot,\nand there is text set in `additionalText`, it will not be displayed. If there are items added to `items` slot,\nnether `additionalText` nor components added to this slot would be displayed.\n\nThe priority of what will be displayed at the end of the menu item is as follows:\nsub-menu arrow (if there are items added in `items` slot) -> components added in `endContent` -> text set to `additionalText`.\n\nApplication developers are responsible for ensuring that interactive elements placed in the `endContent` slot\nhave the correct accessibility behaviour, including their enabled or disabled states.\nThe menu does not manage these aspects when the menu item state changes.", + "_ui5since": "2.0.0", + "_ui5type": { + "text": "Array<HTMLElement>" + }, + "_ui5privacy": "public" + } + ], + "events": [ + { + "name": "before-close", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<MenuBeforeCloseEventDetail>", + "references": [ + { + "name": "MenuBeforeCloseEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/MenuItem.js" + } + ] + }, + "description": "Fired before the menu is closed. This event can be cancelled, which will prevent the menu from closing.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": false, + "_ui5since": "1.10.0", + "_ui5parameters": [ + { + "type": { + "text": "boolean" + }, + "name": "escPressed", + "_ui5privacy": "public", + "description": "Indicates that `ESC` key has triggered the event." + } + ] + }, + { + "name": "before-open", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<MenuBeforeOpenEventDetail>", + "references": [ + { + "name": "MenuBeforeOpenEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/MenuItem.js" + } + ] + }, + "description": "Fired before the menu is opened. This event can be cancelled, which will prevent the menu from opening.\n\n**Note:** Since 1.14.0 the event is also fired before a sub-menu opens.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": false, + "_ui5since": "1.10.0", + "_ui5parameters": [ + { + "type": { + "text": "HTMLElement" + }, + "name": "item", + "_ui5privacy": "public", + "description": "The menu item that triggers opening of the sub-menu or undefined when fired upon root menu opening." + } + ] + }, + { + "name": "check", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when an item is checked or unchecked.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5since": "2.12.0" + }, + { + "name": "close", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired after the menu is closed.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": false, + "_ui5since": "1.10.0" + }, + { + "name": "detail-click", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the user clicks on the detail button when type is `Detail`.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true + }, + { + "name": "open", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired after the menu is opened.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": false + } + ] } ], "exports": [ @@ -2601,43 +3100,1784 @@ "kind": "js", "name": "default", "declaration": { - "name": "NotificationListGroupItem", - "module": "dist/NotificationListGroupItem.js" + "name": "NavigationMenuItem", + "module": "dist/NavigationMenuItem.js" } }, { "kind": "custom-element-definition", - "name": "ui5-li-notification-group", + "name": "ui5-navigation-menu-item", "declaration": { - "name": "NotificationListGroupItem", - "module": "dist/NotificationListGroupItem.js" + "name": "NavigationMenuItem", + "module": "dist/NavigationMenuItem.js" } } ] }, { "kind": "javascript-module", - "path": "dist/NotificationListGroupList.js", - "declarations": [], + "path": "dist/NotificationList.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\nThe `ui5-notification-list` web component represents\na container for `ui5-li-notification-group` and `ui5-li-notification`.\n\n### Keyboard Handling\n\n#### Basic Navigation\nThe `ui5-notification-list` provides advanced keyboard handling.\nWhen a list is focused the user can use the following keyboard\nshortcuts in order to perform a navigation:\n\n- [Up] or [Left] - Navigates up the items\n- [Down] or [Right] - Navigates down the items\n- [Home] - Navigates to first item\n- [End] - Navigates to the last item\n\n#### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/NotificationList.js\";``", + "name": "NotificationList", + "slots": [ + { + "name": "default", + "description": "Defines the items of the component.", + "_ui5propertyName": "items", + "_ui5type": { + "text": "Array<NotificationListItemBase>", + "references": [ + { + "name": "NotificationListItemBase", + "package": "@ui5/webcomponents-fiori", + "module": "dist/NotificationListItemBase.js" + } + ] + }, + "_ui5privacy": "public" + } + ], + "members": [ + { + "kind": "field", + "name": "noDataText", + "type": { + "text": "string | undefined" + }, + "description": "Defines the text that is displayed when the component contains no items.", + "default": "undefined", + "privacy": "public" + } + ], + "events": [ + { + "name": "item-click", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<NotificationItemClickEventDetail>", + "references": [ + { + "name": "NotificationItemClickEventDetail", + "package": "@ui5/webcomponents-fiori", + "module": "dist/NotificationList.js" + } + ] + }, + "description": "Fired when an item is clicked.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true, + "_ui5parameters": [ + { + "type": { + "text": "HTMLElement" + }, + "name": "item", + "_ui5privacy": "public", + "description": "The clicked item." + } + ] + }, + { + "name": "item-close", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<NotificationItemCloseEventDetail>", + "references": [ + { + "name": "NotificationItemCloseEventDetail", + "package": "@ui5/webcomponents-fiori", + "module": "dist/NotificationList.js" + } + ] + }, + "description": "Fired when the `Close` button of any item is clicked.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true, + "_ui5parameters": [ + { + "type": { + "text": "HTMLElement" + }, + "name": "item", + "_ui5privacy": "public", + "description": "the item about to be closed." + } + ] + }, + { + "name": "item-toggle", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<NotificationItemToggleEventDetail>", + "references": [ + { + "name": "NotificationItemToggleEventDetail", + "package": "@ui5/webcomponents-fiori", + "module": "dist/NotificationList.js" + } + ] + }, + "description": "Fired when an item is toggled.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true, + "_ui5parameters": [ + { + "type": { + "text": "HTMLElement" + }, + "name": "item", + "_ui5privacy": "public", + "description": "the toggled item." + } + ] + } + ], + "attributes": [ + { + "description": "Defines the text that is displayed when the component contains no items.", + "name": "no-data-text", + "default": "undefined", + "fieldName": "noDataText", + "type": { + "text": "string | undefined" + } + } + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-notification-list", + "customElement": true, + "_ui5since": "2.0.0", + "_ui5privacy": "public" + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "NotificationList", + "module": "dist/NotificationList.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-notification-list", + "declaration": { + "name": "NotificationList", + "module": "dist/NotificationList.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/NotificationListGroupItem.js", + "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\nThe component consists of:\n\n- `Toggle` button to expand and collapse the group\n- `TitleText` to entitle the group\n- Items of the group\n\n### Usage\nThe component should be used inside a `ui5-notification-list`.\n\n### Keyboard Handling\nThe `ui5-li-notification-group` provides advanced keyboard handling.\nThis component provides fast navigation when the header is focused using the following keyboard shortcuts:\n\n- [Space] - toggles expand / collapse of the group\n- [Plus] - expands the group\n- [Minus] - collapses the group\n- [Right] - expands the group\n- [Left] - collapses the group\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/NotificationListGroupItem.js\";`", + "name": "NotificationListGroupItem", + "slots": [ + { + "name": "default", + "description": "Defines the items of the `ui5-li-notification-group`,\nusually `ui5-li-notification` items.", + "_ui5propertyName": "items", + "_ui5type": { + "text": "Array<NotificationListItem>", + "references": [ + { + "name": "NotificationListItem", + "package": "@ui5/webcomponents-fiori", + "module": "dist/NotificationListItem.js" + } + ] + }, + "_ui5privacy": "public" + } + ], + "members": [ + { + "kind": "field", + "name": "collapsed", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines if the group is collapsed or expanded.", + "privacy": "public" + }, + { + "kind": "field", + "name": "growing", + "type": { + "text": "NotificationListGrowingMode", + "references": [ + { + "name": "NotificationListGrowingMode", + "package": "@ui5/webcomponents", + "module": "dist/types/NotificationListGrowingMode.js" + } + ] + }, + "default": "\"None\"", + "description": "Defines whether the component will have growing capability by pressing a `More` button.\nWhen button is pressed `load-more` event will be fired.", + "privacy": "public", + "_ui5since": "2.2.0" + }, + { + "kind": "field", + "name": "loading", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines if a busy indicator would be displayed over the item.", + "privacy": "public", + "_ui5since": "1.0.0-rc.8" + }, + { + "kind": "field", + "name": "loadingDelay", + "type": { + "text": "number" + }, + "default": "1000", + "description": "Defines the delay in milliseconds, after which the busy indicator will show up for this component.", + "privacy": "public" + }, + { + "kind": "field", + "name": "read", + "type": { + "text": "boolean" + }, + "default": "false", + "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.", + "privacy": "public" + }, + { + "kind": "field", + "name": "titleText", + "type": { + "text": "string | undefined" + }, + "description": "Defines the `titleText` of the item.", + "default": "undefined", + "privacy": "public" + } + ], + "events": [ + { + "name": "load-more", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when additional items are requested.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5since": "2.2.0" + }, + { + "name": "toggle", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the `ui5-li-notification-group` is expanded/collapsed by user interaction.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true + } + ], + "attributes": [ + { + "description": "Defines if the group is collapsed or expanded.", + "name": "collapsed", + "default": "false", + "fieldName": "collapsed", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines whether the component will have growing capability by pressing a `More` button.\nWhen button is pressed `load-more` event will be fired.", + "name": "growing", + "default": "\"None\"", + "fieldName": "growing", + "type": { + "text": "\"Button\" | \"None\"" + } + } + ], + "superclass": { + "name": "NotificationListItemBase", + "package": "@ui5/webcomponents-fiori", + "module": "dist/NotificationListItemBase.js" + }, + "tagName": "ui5-li-notification-group", + "customElement": true, + "_ui5since": "1.0.0-rc.8", + "_ui5privacy": "public" + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "NotificationListGroupItem", + "module": "dist/NotificationListGroupItem.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-li-notification-group", + "declaration": { + "name": "NotificationListGroupItem", + "module": "dist/NotificationListGroupItem.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/NotificationListGroupList.js", + "declarations": [ + { + "kind": "class", + "description": "Internal `ui5-li-notification-group-list` component,\nthat is used to support keyboard navigation of the notification group internal list.", + "name": "NotificationListGroupList", + "superclass": { + "name": "List", + "package": "@ui5/webcomponents", + "module": "dist/List.js" + }, + "tagName": "ui5-notification-group-list", + "customElement": true, + "_ui5privacy": "private", + "cssParts": [ + { + "description": "Used to style the button, that is used for growing of the component", + "name": "growing-button" + }, + { + "description": "Used to style the button inner element", + "name": "growing-button-inner" + } + ], + "slots": [ + { + "name": "default", + "description": "Defines the items of the component.\n\n**Note:** Use `ui5-li`, `ui5-li-custom`, and `ui5-li-group` for the intended design.", + "_ui5propertyName": "items", + "_ui5type": { + "text": "Array<ListItemBase | ListItemGroup>" + }, + "_ui5privacy": "public" + }, + { + "name": "header", + "description": "Defines the component header.\n\n**Note:** When `header` is set, the\n`headerText` property is ignored.", + "_ui5type": { + "text": "Array<HTMLElement>" + }, + "_ui5privacy": "public" + } + ], + "members": [ + { + "kind": "field", + "name": "accessibilityAttributes", + "type": { + "text": "ListAccessibilityAttributes", + "references": [ + { + "name": "ListAccessibilityAttributes", + "package": "@ui5/webcomponents", + "module": "dist/List.js" + } + ] + }, + "default": "{}", + "description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following field:\n\n - **growingButton**: `growingButton.name`, `growingButton.description`.\n\n The accessibility attributes support the following values:\n\n- **name**: Defines the accessible ARIA name of the growing button.\nAccepts any string.\n\n- **description**: Defines the accessible ARIA description of the growing button.\nAccepts any string.\n\n **Note:** The `accessibilityAttributes` property is in an experimental state and is a subject to change.", + "privacy": "public", + "_ui5since": "2.13.0" + }, + { + "kind": "field", + "name": "accessibleDescription", + "type": { + "text": "string | undefined" + }, + "description": "Defines the accessible description of the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.5.0" + }, + { + "kind": "field", + "name": "accessibleDescriptionRef", + "type": { + "text": "string | undefined" + }, + "description": "Defines the IDs of the elements that describe the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.5.0" + }, + { + "kind": "field", + "name": "accessibleName", + "type": { + "text": "string | undefined" + }, + "description": "Defines the accessible name of the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.0.0-rc.15" + }, + { + "kind": "field", + "name": "accessibleNameRef", + "type": { + "text": "string | undefined" + }, + "description": "Defines the IDs of the elements that label the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.0.0-rc.15" + }, + { + "kind": "field", + "name": "accessibleRole", + "type": { + "text": "ListAccessibleRole", + "references": [ + { + "name": "ListAccessibleRole", + "package": "@ui5/webcomponents", + "module": "dist/types/ListAccessibleRole.js" + } + ] + }, + "default": "\"List\"", + "description": "Defines the accessible role of the component.", + "privacy": "public", + "_ui5since": "1.0.0-rc.15" + }, + { + "kind": "field", + "name": "footerText", + "type": { + "text": "string | undefined" + }, + "description": "Defines the footer text.", + "default": "undefined", + "privacy": "public" + }, + { + "kind": "field", + "name": "growing", + "type": { + "text": "ListGrowingMode", + "references": [ + { + "name": "ListGrowingMode", + "package": "@ui5/webcomponents", + "module": "dist/types/ListGrowingMode.js" + } + ] + }, + "default": "\"None\"", + "description": "Defines whether the component will have growing capability either by pressing a `More` button,\nor via user scroll. In both cases `load-more` event is fired.\n\n**Restrictions:** `growing=\"Scroll\"` is not supported for Internet Explorer,\non IE the component will fallback to `growing=\"Button\"`.", + "privacy": "public", + "_ui5since": "1.0.0-rc.13" + }, + { + "kind": "field", + "name": "growingButtonText", + "type": { + "text": "string | undefined" + }, + "description": "Defines the text that will be displayed inside the growing button.\n\n**Note:** If not specified a built-in text will be displayed.\n\n**Note:** This property takes effect if the `growing` property is set to the `Button`.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.24" + }, + { + "kind": "field", + "name": "headerText", + "type": { + "text": "string | undefined" + }, + "description": "Defines the component header text.\n\n**Note:** If `header` is set this property is ignored.", + "default": "undefined", + "privacy": "public" + }, + { + "kind": "field", + "name": "indent", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Determines whether the component is indented.", + "privacy": "public" + }, + { + "kind": "field", + "name": "listItems", + "type": { + "text": "Array<ListItemBase>", + "references": [ + { + "name": "ListItemBase", + "package": "@ui5/webcomponents", + "module": "dist/ListItemBase.js" + } + ] + }, + "description": "Returns an array containing the list item instances without the groups in a flat structure.", + "default": "[]", + "privacy": "public", + "readonly": true, + "_ui5since": "2.0.0" + }, + { + "kind": "field", + "name": "loading", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines if the component would display a loading indicator over the list.", + "privacy": "public", + "_ui5since": "1.0.0-rc.6" + }, + { + "kind": "field", + "name": "loadingDelay", + "type": { + "text": "number" + }, + "default": "1000", + "description": "Defines the delay in milliseconds, after which the loading indicator will show up for this component.", + "privacy": "public" + }, + { + "kind": "field", + "name": "noDataText", + "type": { + "text": "string | undefined" + }, + "description": "Defines the text that is displayed when the component contains no items.", + "default": "undefined", + "privacy": "public" + }, + { + "kind": "field", + "name": "selectionMode", + "type": { + "text": "ListSelectionMode", + "references": [ + { + "name": "ListSelectionMode", + "package": "@ui5/webcomponents", + "module": "dist/types/ListSelectionMode.js" + } + ] + }, + "default": "\"None\"", + "description": "Defines the selection mode of the component.", + "privacy": "public" + }, + { + "kind": "field", + "name": "separators", + "type": { + "text": "ListSeparator", + "references": [ + { + "name": "ListSeparator", + "package": "@ui5/webcomponents", + "module": "dist/types/ListSeparator.js" + } + ] + }, + "default": "\"All\"", + "description": "Defines the item separator style that is used.", + "privacy": "public" + }, + { + "kind": "field", + "name": "stickyHeader", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Indicates whether the List header is sticky or not.\nIf stickyHeader is set to true, then whenever you scroll the content or\nthe application, the header of the list will be always visible.", + "privacy": "public", + "_ui5since": "2.19.0" + } + ], + "events": [ + { + "name": "item-click", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<ListItemClickEventDetail>", + "references": [ + { + "name": "ListItemClickEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/List.js" + } + ] + }, + "description": "Fired when an item is activated, unless the item's `type` property\nis set to `Inactive`.\n\n**Note**: This event is not triggered by interactions with selection components such as the checkboxes and radio buttons,\nassociated with non-default `selectionMode` values, or if any other **interactive** component\n(such as a button or input) within the list item is directly clicked.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true, + "_ui5parameters": [ + { + "type": { + "text": "HTMLElement" + }, + "name": "item", + "_ui5privacy": "public", + "description": "The clicked item." + } + ] + }, + { + "name": "item-close", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<ListItemCloseEventDetail>", + "references": [ + { + "name": "ListItemCloseEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/List.js" + } + ] + }, + "description": "Fired when the `Close` button of any item is clicked\n\n**Note:** This event is only applicable to list items that can be closed (such as notification list items),\nnot to be confused with `item-delete`.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5since": "1.0.0-rc.8", + "_ui5parameters": [ + { + "type": { + "text": "HTMLElement" + }, + "name": "item", + "_ui5privacy": "public", + "description": "the item about to be closed." + } + ] + }, + { + "name": "item-delete", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<ListItemDeleteEventDetail>", + "references": [ + { + "name": "ListItemDeleteEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/List.js" + } + ] + }, + "description": "Fired when the Delete button of any item is pressed.\n\n**Note:** A Delete button is displayed on each item,\nwhen the component `selectionMode` property is set to `Delete`.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5parameters": [ + { + "type": { + "text": "HTMLElement" + }, + "name": "item", + "_ui5privacy": "public", + "description": "the deleted item." + } + ] + }, + { + "name": "item-toggle", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<ListItemToggleEventDetail>", + "references": [ + { + "name": "ListItemToggleEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/List.js" + } + ] + }, + "description": "Fired when the `Toggle` button of any item is clicked.\n\n**Note:** This event is only applicable to list items that can be toggled (such as notification group list items).", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5since": "1.0.0-rc.8", + "_ui5parameters": [ + { + "type": { + "text": "HTMLElement" + }, + "name": "item", + "_ui5privacy": "public", + "description": "the toggled item." + } + ] + }, + { + "name": "load-more", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the user scrolls to the bottom of the list.\n\n**Note:** The event is fired when the `growing='Scroll'` property is enabled.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5since": "1.0.0-rc.6" + }, + { + "name": "move", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<ListMoveEventDetail>", + "references": [ + { + "name": "ListMoveEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/List.js" + } + ] + }, + "description": "Fired when a movable list item is dropped onto a drop target.\n\n**Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5parameters": [ + { + "type": { + "text": "object" + }, + "name": "destination", + "_ui5privacy": "public", + "description": "Contains information about the destination of the moved element. Has `element` and `placement` properties." + }, + { + "type": { + "text": "object" + }, + "name": "source", + "_ui5privacy": "public", + "description": "Contains information about the moved element under `element` property." + } + ] + }, + { + "name": "move-over", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<ListMoveEventDetail>", + "references": [ + { + "name": "ListMoveEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/List.js" + } + ] + }, + "description": "Fired when a movable list item is moved over a potential drop target during a dragging operation.\n\nIf the new position is valid, prevent the default action of the event using `preventDefault()`.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true, + "_ui5since": "2.0.0", + "_ui5parameters": [ + { + "type": { + "text": "object" + }, + "name": "destination", + "_ui5privacy": "public", + "description": "Contains information about the destination of the moved element. Has `element` and `placement` properties." + }, + { + "type": { + "text": "object" + }, + "name": "source", + "_ui5privacy": "public", + "description": "Contains information about the moved element under `element` property." + } + ] + }, + { + "name": "selection-change", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<ListSelectionChangeEventDetail>", + "references": [ + { + "name": "ListSelectionChangeEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/List.js" + } + ] + }, + "description": "Fired when selection is changed by user interaction\nin `Single`, `SingleStart`, `SingleEnd` and `Multiple` selection modes.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true, + "_ui5parameters": [ + { + "type": { + "text": "Array<ListItemBase>", + "references": [ + { + "name": "ListItemBase", + "package": "@ui5/webcomponents", + "module": "dist/ListItemBase.js" + } + ] + }, + "name": "previouslySelectedItems", + "_ui5privacy": "public", + "description": "An array of the previously selected items." + }, + { + "type": { + "text": "Array<ListItemBase>", + "references": [ + { + "name": "ListItemBase", + "package": "@ui5/webcomponents", + "module": "dist/ListItemBase.js" + } + ] + }, + "name": "selectedItems", + "_ui5privacy": "public", + "description": "An array of the selected items." + } + ] + } + ], + "attributes": [ + { + "description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following field:\n\n - **growingButton**: `growingButton.name`, `growingButton.description`.\n\n The accessibility attributes support the following values:\n\n- **name**: Defines the accessible ARIA name of the growing button.\nAccepts any string.\n\n- **description**: Defines the accessible ARIA description of the growing button.\nAccepts any string.\n\n **Note:** The `accessibilityAttributes` property is in an experimental state and is a subject to change.", + "name": "accessibility-attributes", + "default": "{}", + "fieldName": "accessibilityAttributes", + "type": { + "text": "ListAccessibilityAttributes" + } + }, + { + "description": "Defines the accessible description of the component.", + "name": "accessible-description", + "default": "undefined", + "fieldName": "accessibleDescription", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the IDs of the elements that describe the component.", + "name": "accessible-description-ref", + "default": "undefined", + "fieldName": "accessibleDescriptionRef", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the accessible name of the component.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the IDs of the elements that label the component.", + "name": "accessible-name-ref", + "default": "undefined", + "fieldName": "accessibleNameRef", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the accessible role of the component.", + "name": "accessible-role", + "default": "\"List\"", + "fieldName": "accessibleRole", + "type": { + "text": "\"List\" | \"Menu\" | \"Tree\" | \"ListBox\"" + } + }, + { + "description": "Defines the footer text.", + "name": "footer-text", + "default": "undefined", + "fieldName": "footerText", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines whether the component will have growing capability either by pressing a `More` button,\nor via user scroll. In both cases `load-more` event is fired.\n\n**Restrictions:** `growing=\"Scroll\"` is not supported for Internet Explorer,\non IE the component will fallback to `growing=\"Button\"`.", + "name": "growing", + "default": "\"None\"", + "fieldName": "growing", + "type": { + "text": "\"None\" | \"Button\" | \"Scroll\"" + } + }, + { + "description": "Defines the text that will be displayed inside the growing button.\n\n**Note:** If not specified a built-in text will be displayed.\n\n**Note:** This property takes effect if the `growing` property is set to the `Button`.", + "name": "growing-button-text", + "default": "undefined", + "fieldName": "growingButtonText", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the component header text.\n\n**Note:** If `header` is set this property is ignored.", + "name": "header-text", + "default": "undefined", + "fieldName": "headerText", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Determines whether the component is indented.", + "name": "indent", + "default": "false", + "fieldName": "indent", + "type": { + "text": "boolean" + } + }, + { + "description": "Returns an array containing the list item instances without the groups in a flat structure.", + "name": "list-items", + "default": "[]", + "fieldName": "listItems", + "type": { + "text": "any" + } + }, + { + "description": "Defines if the component would display a loading indicator over the list.", + "name": "loading", + "default": "false", + "fieldName": "loading", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines the delay in milliseconds, after which the loading indicator will show up for this component.", + "name": "loading-delay", + "default": "1000", + "fieldName": "loadingDelay", + "type": { + "text": "number" + } + }, + { + "description": "Defines the text that is displayed when the component contains no items.", + "name": "no-data-text", + "default": "undefined", + "fieldName": "noDataText", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the selection mode of the component.", + "name": "selection-mode", + "default": "\"None\"", + "fieldName": "selectionMode", + "type": { + "text": "\"None\" | \"Single\" | \"Multiple\" | \"SingleStart\" | \"SingleEnd\" | \"SingleAuto\" | \"Delete\"" + } + }, + { + "description": "Defines the item separator style that is used.", + "name": "separators", + "default": "\"All\"", + "fieldName": "separators", + "type": { + "text": "\"None\" | \"All\" | \"Inner\"" + } + }, + { + "description": "Indicates whether the List header is sticky or not.\nIf stickyHeader is set to true, then whenever you scroll the content or\nthe application, the header of the list will be always visible.", + "name": "sticky-header", + "default": "false", + "fieldName": "stickyHeader", + "type": { + "text": "boolean" + } + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "NotificationListGroupList", + "module": "dist/NotificationListGroupList.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-notification-group-list", + "declaration": { + "name": "NotificationListGroupList", + "module": "dist/NotificationListGroupList.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/NotificationListInternal.js", + "declarations": [ + { + "kind": "class", + "description": "Internal `ui5-li-notification-list-list` component,\nthat is used to support keyboard navigation of the notification list internal list.", + "name": "NotificationListInternal", + "superclass": { + "name": "List", + "package": "@ui5/webcomponents", + "module": "dist/List.js" + }, + "tagName": "ui5-notification-list-internal", + "customElement": true, + "_ui5privacy": "private", + "cssParts": [ + { + "description": "Used to style the button, that is used for growing of the component", + "name": "growing-button" + }, + { + "description": "Used to style the button inner element", + "name": "growing-button-inner" + } + ], + "slots": [ + { + "name": "default", + "description": "Defines the items of the component.\n\n**Note:** Use `ui5-li`, `ui5-li-custom`, and `ui5-li-group` for the intended design.", + "_ui5propertyName": "items", + "_ui5type": { + "text": "Array<ListItemBase | ListItemGroup>" + }, + "_ui5privacy": "public" + }, + { + "name": "header", + "description": "Defines the component header.\n\n**Note:** When `header` is set, the\n`headerText` property is ignored.", + "_ui5type": { + "text": "Array<HTMLElement>" + }, + "_ui5privacy": "public" + } + ], + "members": [ + { + "kind": "field", + "name": "accessibilityAttributes", + "type": { + "text": "ListAccessibilityAttributes", + "references": [ + { + "name": "ListAccessibilityAttributes", + "package": "@ui5/webcomponents", + "module": "dist/List.js" + } + ] + }, + "default": "{}", + "description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following field:\n\n - **growingButton**: `growingButton.name`, `growingButton.description`.\n\n The accessibility attributes support the following values:\n\n- **name**: Defines the accessible ARIA name of the growing button.\nAccepts any string.\n\n- **description**: Defines the accessible ARIA description of the growing button.\nAccepts any string.\n\n **Note:** The `accessibilityAttributes` property is in an experimental state and is a subject to change.", + "privacy": "public", + "_ui5since": "2.13.0" + }, + { + "kind": "field", + "name": "accessibleDescription", + "type": { + "text": "string | undefined" + }, + "description": "Defines the accessible description of the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.5.0" + }, + { + "kind": "field", + "name": "accessibleDescriptionRef", + "type": { + "text": "string | undefined" + }, + "description": "Defines the IDs of the elements that describe the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.5.0" + }, + { + "kind": "field", + "name": "accessibleName", + "type": { + "text": "string | undefined" + }, + "description": "Defines the accessible name of the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.0.0-rc.15" + }, + { + "kind": "field", + "name": "accessibleNameRef", + "type": { + "text": "string | undefined" + }, + "description": "Defines the IDs of the elements that label the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.0.0-rc.15" + }, + { + "kind": "field", + "name": "accessibleRole", + "type": { + "text": "ListAccessibleRole", + "references": [ + { + "name": "ListAccessibleRole", + "package": "@ui5/webcomponents", + "module": "dist/types/ListAccessibleRole.js" + } + ] + }, + "default": "\"List\"", + "description": "Defines the accessible role of the component.", + "privacy": "public", + "_ui5since": "1.0.0-rc.15" + }, + { + "kind": "field", + "name": "footerText", + "type": { + "text": "string | undefined" + }, + "description": "Defines the footer text.", + "default": "undefined", + "privacy": "public" + }, + { + "kind": "field", + "name": "growing", + "type": { + "text": "ListGrowingMode", + "references": [ + { + "name": "ListGrowingMode", + "package": "@ui5/webcomponents", + "module": "dist/types/ListGrowingMode.js" + } + ] + }, + "default": "\"None\"", + "description": "Defines whether the component will have growing capability either by pressing a `More` button,\nor via user scroll. In both cases `load-more` event is fired.\n\n**Restrictions:** `growing=\"Scroll\"` is not supported for Internet Explorer,\non IE the component will fallback to `growing=\"Button\"`.", + "privacy": "public", + "_ui5since": "1.0.0-rc.13" + }, + { + "kind": "field", + "name": "growingButtonText", + "type": { + "text": "string | undefined" + }, + "description": "Defines the text that will be displayed inside the growing button.\n\n**Note:** If not specified a built-in text will be displayed.\n\n**Note:** This property takes effect if the `growing` property is set to the `Button`.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.24" + }, + { + "kind": "field", + "name": "headerText", + "type": { + "text": "string | undefined" + }, + "description": "Defines the component header text.\n\n**Note:** If `header` is set this property is ignored.", + "default": "undefined", + "privacy": "public" + }, + { + "kind": "field", + "name": "indent", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Determines whether the component is indented.", + "privacy": "public" + }, + { + "kind": "field", + "name": "listItems", + "type": { + "text": "Array<ListItemBase>", + "references": [ + { + "name": "ListItemBase", + "package": "@ui5/webcomponents", + "module": "dist/ListItemBase.js" + } + ] + }, + "description": "Returns an array containing the list item instances without the groups in a flat structure.", + "default": "[]", + "privacy": "public", + "readonly": true, + "_ui5since": "2.0.0" + }, + { + "kind": "field", + "name": "loading", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines if the component would display a loading indicator over the list.", + "privacy": "public", + "_ui5since": "1.0.0-rc.6" + }, + { + "kind": "field", + "name": "loadingDelay", + "type": { + "text": "number" + }, + "default": "1000", + "description": "Defines the delay in milliseconds, after which the loading indicator will show up for this component.", + "privacy": "public" + }, + { + "kind": "field", + "name": "noDataText", + "type": { + "text": "string | undefined" + }, + "description": "Defines the text that is displayed when the component contains no items.", + "default": "undefined", + "privacy": "public" + }, + { + "kind": "field", + "name": "selectionMode", + "type": { + "text": "ListSelectionMode", + "references": [ + { + "name": "ListSelectionMode", + "package": "@ui5/webcomponents", + "module": "dist/types/ListSelectionMode.js" + } + ] + }, + "default": "\"None\"", + "description": "Defines the selection mode of the component.", + "privacy": "public" + }, + { + "kind": "field", + "name": "separators", + "type": { + "text": "ListSeparator", + "references": [ + { + "name": "ListSeparator", + "package": "@ui5/webcomponents", + "module": "dist/types/ListSeparator.js" + } + ] + }, + "default": "\"All\"", + "description": "Defines the item separator style that is used.", + "privacy": "public" + }, + { + "kind": "field", + "name": "stickyHeader", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Indicates whether the List header is sticky or not.\nIf stickyHeader is set to true, then whenever you scroll the content or\nthe application, the header of the list will be always visible.", + "privacy": "public", + "_ui5since": "2.19.0" + } + ], + "events": [ + { + "name": "item-click", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<ListItemClickEventDetail>", + "references": [ + { + "name": "ListItemClickEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/List.js" + } + ] + }, + "description": "Fired when an item is activated, unless the item's `type` property\nis set to `Inactive`.\n\n**Note**: This event is not triggered by interactions with selection components such as the checkboxes and radio buttons,\nassociated with non-default `selectionMode` values, or if any other **interactive** component\n(such as a button or input) within the list item is directly clicked.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true, + "_ui5parameters": [ + { + "type": { + "text": "HTMLElement" + }, + "name": "item", + "_ui5privacy": "public", + "description": "The clicked item." + } + ] + }, + { + "name": "item-close", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<ListItemCloseEventDetail>", + "references": [ + { + "name": "ListItemCloseEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/List.js" + } + ] + }, + "description": "Fired when the `Close` button of any item is clicked\n\n**Note:** This event is only applicable to list items that can be closed (such as notification list items),\nnot to be confused with `item-delete`.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5since": "1.0.0-rc.8", + "_ui5parameters": [ + { + "type": { + "text": "HTMLElement" + }, + "name": "item", + "_ui5privacy": "public", + "description": "the item about to be closed." + } + ] + }, + { + "name": "item-delete", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<ListItemDeleteEventDetail>", + "references": [ + { + "name": "ListItemDeleteEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/List.js" + } + ] + }, + "description": "Fired when the Delete button of any item is pressed.\n\n**Note:** A Delete button is displayed on each item,\nwhen the component `selectionMode` property is set to `Delete`.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5parameters": [ + { + "type": { + "text": "HTMLElement" + }, + "name": "item", + "_ui5privacy": "public", + "description": "the deleted item." + } + ] + }, + { + "name": "item-toggle", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<ListItemToggleEventDetail>", + "references": [ + { + "name": "ListItemToggleEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/List.js" + } + ] + }, + "description": "Fired when the `Toggle` button of any item is clicked.\n\n**Note:** This event is only applicable to list items that can be toggled (such as notification group list items).", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5since": "1.0.0-rc.8", + "_ui5parameters": [ + { + "type": { + "text": "HTMLElement" + }, + "name": "item", + "_ui5privacy": "public", + "description": "the toggled item." + } + ] + }, + { + "name": "load-more", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the user scrolls to the bottom of the list.\n\n**Note:** The event is fired when the `growing='Scroll'` property is enabled.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5since": "1.0.0-rc.6" + }, + { + "name": "move", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<ListMoveEventDetail>", + "references": [ + { + "name": "ListMoveEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/List.js" + } + ] + }, + "description": "Fired when a movable list item is dropped onto a drop target.\n\n**Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5parameters": [ + { + "type": { + "text": "object" + }, + "name": "destination", + "_ui5privacy": "public", + "description": "Contains information about the destination of the moved element. Has `element` and `placement` properties." + }, + { + "type": { + "text": "object" + }, + "name": "source", + "_ui5privacy": "public", + "description": "Contains information about the moved element under `element` property." + } + ] + }, + { + "name": "move-over", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<ListMoveEventDetail>", + "references": [ + { + "name": "ListMoveEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/List.js" + } + ] + }, + "description": "Fired when a movable list item is moved over a potential drop target during a dragging operation.\n\nIf the new position is valid, prevent the default action of the event using `preventDefault()`.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true, + "_ui5since": "2.0.0", + "_ui5parameters": [ + { + "type": { + "text": "object" + }, + "name": "destination", + "_ui5privacy": "public", + "description": "Contains information about the destination of the moved element. Has `element` and `placement` properties." + }, + { + "type": { + "text": "object" + }, + "name": "source", + "_ui5privacy": "public", + "description": "Contains information about the moved element under `element` property." + } + ] + }, + { + "name": "selection-change", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<ListSelectionChangeEventDetail>", + "references": [ + { + "name": "ListSelectionChangeEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/List.js" + } + ] + }, + "description": "Fired when selection is changed by user interaction\nin `Single`, `SingleStart`, `SingleEnd` and `Multiple` selection modes.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true, + "_ui5parameters": [ + { + "type": { + "text": "Array<ListItemBase>", + "references": [ + { + "name": "ListItemBase", + "package": "@ui5/webcomponents", + "module": "dist/ListItemBase.js" + } + ] + }, + "name": "previouslySelectedItems", + "_ui5privacy": "public", + "description": "An array of the previously selected items." + }, + { + "type": { + "text": "Array<ListItemBase>", + "references": [ + { + "name": "ListItemBase", + "package": "@ui5/webcomponents", + "module": "dist/ListItemBase.js" + } + ] + }, + "name": "selectedItems", + "_ui5privacy": "public", + "description": "An array of the selected items." + } + ] + } + ], + "attributes": [ + { + "description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following field:\n\n - **growingButton**: `growingButton.name`, `growingButton.description`.\n\n The accessibility attributes support the following values:\n\n- **name**: Defines the accessible ARIA name of the growing button.\nAccepts any string.\n\n- **description**: Defines the accessible ARIA description of the growing button.\nAccepts any string.\n\n **Note:** The `accessibilityAttributes` property is in an experimental state and is a subject to change.", + "name": "accessibility-attributes", + "default": "{}", + "fieldName": "accessibilityAttributes", + "type": { + "text": "ListAccessibilityAttributes" + } + }, + { + "description": "Defines the accessible description of the component.", + "name": "accessible-description", + "default": "undefined", + "fieldName": "accessibleDescription", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the IDs of the elements that describe the component.", + "name": "accessible-description-ref", + "default": "undefined", + "fieldName": "accessibleDescriptionRef", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the accessible name of the component.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the IDs of the elements that label the component.", + "name": "accessible-name-ref", + "default": "undefined", + "fieldName": "accessibleNameRef", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the accessible role of the component.", + "name": "accessible-role", + "default": "\"List\"", + "fieldName": "accessibleRole", + "type": { + "text": "\"List\" | \"Menu\" | \"Tree\" | \"ListBox\"" + } + }, + { + "description": "Defines the footer text.", + "name": "footer-text", + "default": "undefined", + "fieldName": "footerText", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines whether the component will have growing capability either by pressing a `More` button,\nor via user scroll. In both cases `load-more` event is fired.\n\n**Restrictions:** `growing=\"Scroll\"` is not supported for Internet Explorer,\non IE the component will fallback to `growing=\"Button\"`.", + "name": "growing", + "default": "\"None\"", + "fieldName": "growing", + "type": { + "text": "\"None\" | \"Button\" | \"Scroll\"" + } + }, + { + "description": "Defines the text that will be displayed inside the growing button.\n\n**Note:** If not specified a built-in text will be displayed.\n\n**Note:** This property takes effect if the `growing` property is set to the `Button`.", + "name": "growing-button-text", + "default": "undefined", + "fieldName": "growingButtonText", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the component header text.\n\n**Note:** If `header` is set this property is ignored.", + "name": "header-text", + "default": "undefined", + "fieldName": "headerText", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Determines whether the component is indented.", + "name": "indent", + "default": "false", + "fieldName": "indent", + "type": { + "text": "boolean" + } + }, + { + "description": "Returns an array containing the list item instances without the groups in a flat structure.", + "name": "list-items", + "default": "[]", + "fieldName": "listItems", + "type": { + "text": "any" + } + }, + { + "description": "Defines if the component would display a loading indicator over the list.", + "name": "loading", + "default": "false", + "fieldName": "loading", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines the delay in milliseconds, after which the loading indicator will show up for this component.", + "name": "loading-delay", + "default": "1000", + "fieldName": "loadingDelay", + "type": { + "text": "number" + } + }, + { + "description": "Defines the text that is displayed when the component contains no items.", + "name": "no-data-text", + "default": "undefined", + "fieldName": "noDataText", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the selection mode of the component.", + "name": "selection-mode", + "default": "\"None\"", + "fieldName": "selectionMode", + "type": { + "text": "\"None\" | \"Single\" | \"Multiple\" | \"SingleStart\" | \"SingleEnd\" | \"SingleAuto\" | \"Delete\"" + } + }, + { + "description": "Defines the item separator style that is used.", + "name": "separators", + "default": "\"All\"", + "fieldName": "separators", + "type": { + "text": "\"None\" | \"All\" | \"Inner\"" + } + }, + { + "description": "Indicates whether the List header is sticky or not.\nIf stickyHeader is set to true, then whenever you scroll the content or\nthe application, the header of the list will be always visible.", + "name": "sticky-header", + "default": "false", + "fieldName": "stickyHeader", + "type": { + "text": "boolean" + } + } + ] + } + ], "exports": [ { "kind": "js", "name": "default", "declaration": { - "name": "NotificationListGroupList", - "module": "dist/NotificationListGroupList.js" + "name": "NotificationListInternal", + "module": "dist/NotificationListInternal.js" } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/NotificationListInternal.js", - "declarations": [], - "exports": [ + }, { - "kind": "js", - "name": "default", + "kind": "custom-element-definition", + "name": "ui5-notification-list-internal", "declaration": { "name": "NotificationListInternal", "module": "dist/NotificationListInternal.js" @@ -2669,10 +4909,11 @@ "_ui5privacy": "public" }, { - "name": "menu", - "description": "Defines the menu, displayed in the `ui5-li-notification`.\n\n**Note:** Use this for implementing actions.\n\n**Note:** Should be used instead `u5-notification-action`, which is deprecated as of version 2.0.", + "name": "default", + "description": "Defines the content of the `ui5-li-notification`,\nusually a description of the notification.\n\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.", + "_ui5propertyName": "description", "_ui5type": { - "text": "Array<HTMLElement>" + "text": "Array<Node>" }, "_ui5privacy": "public" }, @@ -2685,11 +4926,10 @@ "_ui5privacy": "public" }, { - "name": "default", - "description": "Defines the content of the `ui5-li-notification`,\nusually a description of the notification.\n\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.", - "_ui5propertyName": "description", + "name": "menu", + "description": "Defines the menu, displayed in the `ui5-li-notification`.\n\n**Note:** Use this for implementing actions.\n\n**Note:** Should be used instead `u5-notification-action`, which is deprecated as of version 2.0.", "_ui5type": { - "text": "Array<Node>" + "text": "Array<HTMLElement>" }, "_ui5privacy": "public" } @@ -2697,37 +4937,50 @@ "members": [ { "kind": "field", - "name": "wrappingType", + "name": "importance", "type": { - "text": "WrappingType", + "text": "NotificationListItemImportance", "references": [ { - "name": "WrappingType", - "package": "@ui5/webcomponents", - "module": "dist/types/WrappingType.js" + "name": "NotificationListItemImportance", + "package": "@ui5/webcomponents-fiori", + "module": "dist/types/NotificationListItemImportance.js" } ] }, - "default": "\"None\"", - "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": "\"Standard\"", + "description": "Defines the `Important` label of the item.", + "privacy": "public" + }, + { + "kind": "field", + "name": "loading", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines if a busy indicator would be displayed over the item.", "privacy": "public", - "_ui5since": "1.0.0-rc.15" + "_ui5since": "1.0.0-rc.8" }, { "kind": "field", - "name": "state", + "name": "loadingDelay", "type": { - "text": "ValueState", - "references": [ - { - "name": "ValueState", - "package": "@ui5/webcomponents-base", - "module": "dist/types/ValueState.js" - } - ] + "text": "number" }, - "default": "\"None\"", - "description": "Defines the status indicator of the item.", + "default": "1000", + "description": "Defines the delay in milliseconds, after which the busy indicator will show up for this component.", + "privacy": "public" + }, + { + "kind": "field", + "name": "read", + "type": { + "text": "boolean" + }, + "default": "false", + "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.", "privacy": "public" }, { @@ -2742,19 +4995,19 @@ }, { "kind": "field", - "name": "importance", + "name": "state", "type": { - "text": "NotificationListItemImportance", + "text": "ValueState", "references": [ { - "name": "NotificationListItemImportance", - "package": "@ui5/webcomponents-fiori", - "module": "dist/types/NotificationListItemImportance.js" + "name": "ValueState", + "package": "@ui5/webcomponents-base", + "module": "dist/types/ValueState.js" } ] }, - "default": "\"Standard\"", - "description": "Defines the `Important` label of the item.", + "default": "\"None\"", + "description": "Defines the status indicator of the item.", "privacy": "public" }, { @@ -2765,54 +5018,25 @@ }, "description": "Defines the `titleText` of the item.", "default": "undefined", - "privacy": "public", - "inheritedFrom": { - "name": "NotificationListItemBase", - "module": "dist/NotificationListItemBase.js" - } - }, - { - "kind": "field", - "name": "read", - "type": { - "text": "boolean" - }, - "default": "false", - "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.", - "privacy": "public", - "inheritedFrom": { - "name": "NotificationListItemBase", - "module": "dist/NotificationListItemBase.js" - } - }, - { - "kind": "field", - "name": "loading", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines if a busy indicator would be displayed over the item.", - "privacy": "public", - "_ui5since": "1.0.0-rc.8", - "inheritedFrom": { - "name": "NotificationListItemBase", - "module": "dist/NotificationListItemBase.js" - } + "privacy": "public" }, { "kind": "field", - "name": "loadingDelay", + "name": "wrappingType", "type": { - "text": "number" + "text": "WrappingType", + "references": [ + { + "name": "WrappingType", + "package": "@ui5/webcomponents", + "module": "dist/types/WrappingType.js" + } + ] }, - "default": "1000", - "description": "Defines the delay in milliseconds, after which the busy indicator will show up for this component.", + "default": "\"None\"", + "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.", "privacy": "public", - "inheritedFrom": { - "name": "NotificationListItemBase", - "module": "dist/NotificationListItemBase.js" - } + "_ui5since": "1.0.0-rc.15" } ], "events": [ @@ -2847,21 +5071,12 @@ ], "attributes": [ { - "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.", - "name": "wrapping-type", - "default": "\"None\"", - "fieldName": "wrappingType", - "type": { - "text": "\"None\" | \"Normal\"" - } - }, - { - "description": "Defines the status indicator of the item.", - "name": "state", - "default": "\"None\"", - "fieldName": "state", + "description": "Defines the `Important` label of the item.", + "name": "importance", + "default": "\"Standard\"", + "fieldName": "importance", "type": { - "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" + "text": "\"Standard\" | \"Important\"" } }, { @@ -2874,12 +5089,21 @@ } }, { - "description": "Defines the `Important` label of the item.", - "name": "importance", - "default": "\"Standard\"", - "fieldName": "importance", + "description": "Defines the status indicator of the item.", + "name": "state", + "default": "\"None\"", + "fieldName": "state", "type": { - "text": "\"Standard\" | \"Important\"" + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" + } + }, + { + "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.", + "name": "wrapping-type", + "default": "\"None\"", + "fieldName": "wrappingType", + "type": { + "text": "\"None\" | \"Normal\"" } } ], @@ -2924,43 +5148,43 @@ "members": [ { "kind": "field", - "name": "titleText", + "name": "loading", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Defines the `titleText` of the item.", - "default": "undefined", - "privacy": "public" + "default": "false", + "description": "Defines if a busy indicator would be displayed over the item.", + "privacy": "public", + "_ui5since": "1.0.0-rc.8" }, { "kind": "field", - "name": "read", + "name": "loadingDelay", "type": { - "text": "boolean" + "text": "number" }, - "default": "false", - "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": "1000", + "description": "Defines the delay in milliseconds, after which the busy indicator will show up for this component.", "privacy": "public" }, { "kind": "field", - "name": "loading", + "name": "read", "type": { "text": "boolean" }, "default": "false", - "description": "Defines if a busy indicator would be displayed over the item.", - "privacy": "public", - "_ui5since": "1.0.0-rc.8" + "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.", + "privacy": "public" }, { "kind": "field", - "name": "loadingDelay", + "name": "titleText", "type": { - "text": "number" + "text": "string | undefined" }, - "default": "1000", - "description": "Defines the delay in milliseconds, after which the busy indicator will show up for this component.", + "description": "Defines the `titleText` of the item.", + "default": "undefined", "privacy": "public" } ], @@ -2999,14 +5223,6 @@ } ], "slots": [ - { - "name": "header", - "description": "Defines the header HTML Element.", - "_ui5type": { - "text": "Array<HTMLElement>" - }, - "_ui5privacy": "public" - }, { "name": "default", "description": "Defines the content HTML Element.", @@ -3023,6 +5239,14 @@ "text": "Array<HTMLElement>" }, "_ui5privacy": "public" + }, + { + "name": "header", + "description": "Defines the header HTML Element.", + "_ui5type": { + "text": "Array<HTMLElement>" + }, + "_ui5privacy": "public" } ], "members": [ @@ -3045,52 +5269,43 @@ }, { "kind": "field", - "name": "noScrolling", + "name": "fixedFooter", "type": { "text": "boolean" }, "default": "false", - "description": "Disables vertical scrolling of page content.\nIf set to true, there will be no vertical scrolling at all.", + "description": "Defines if the footer is fixed at the very bottom of the page.\n\n**Note:** When set to true the footer is fixed at the very bottom of the page, otherwise it floats over the content with a slight offset from the bottom.", "privacy": "public" }, { "kind": "field", - "name": "fixedFooter", + "name": "hideFooter", "type": { "text": "boolean" }, "default": "false", - "description": "Defines if the footer is fixed at the very bottom of the page.\n\n**Note:** When set to true the footer is fixed at the very bottom of the page, otherwise it floats over the content with a slight offset from the bottom.", + "description": "Defines the footer visibility.", "privacy": "public" }, { "kind": "field", - "name": "hideFooter", + "name": "noScrolling", "type": { "text": "boolean" }, "default": "false", - "description": "Defines the footer visibility.", + "description": "Disables vertical scrolling of page content.\nIf set to true, there will be no vertical scrolling at all.", "privacy": "public" } ], "attributes": [ { - "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.", - "name": "background-design", - "default": "\"Solid\"", - "fieldName": "backgroundDesign", - "type": { - "text": "\"List\" | \"Solid\" | \"Transparent\"" - } - }, - { - "description": "Disables vertical scrolling of page content.\nIf set to true, there will be no vertical scrolling at all.", - "name": "no-scrolling", - "default": "false", - "fieldName": "noScrolling", + "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.", + "name": "background-design", + "default": "\"Solid\"", + "fieldName": "backgroundDesign", "type": { - "text": "boolean" + "text": "\"List\" | \"Solid\" | \"Transparent\"" } }, { @@ -3110,6 +5325,15 @@ "type": { "text": "boolean" } + }, + { + "description": "Disables vertical scrolling of page content.\nIf set to true, there will be no vertical scrolling at all.", + "name": "no-scrolling", + "default": "false", + "fieldName": "noScrolling", + "type": { + "text": "boolean" + } } ], "superclass": { @@ -3227,175 +5451,569 @@ "members": [ { "kind": "field", - "name": "titleText", + "name": "icon", + "type": { + "text": "string | undefined" + }, + "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](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "default": "undefined", + "privacy": "public" + }, + { + "kind": "field", + "name": "subtitleText", + "type": { + "text": "string | undefined" + }, + "description": "Defines the subtitle of the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.0.0-rc.15" + }, + { + "kind": "field", + "name": "target", + "type": { + "text": "string | undefined" + }, + "description": "Defines a target where the `targetSrc` content must be open.\n\nAvailable options are:\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `_search`\n\n**Note:** By default target will be open in the same frame as it was clicked.", + "default": "undefined", + "privacy": "public" + }, + { + "kind": "field", + "name": "targetSrc", + "type": { + "text": "string | undefined" + }, + "description": "Defines the component target URI. Supports standard hyperlink behavior.", + "default": "undefined", + "privacy": "public" + }, + { + "kind": "field", + "name": "titleText", + "type": { + "text": "string | undefined" + }, + "description": "Defines the title of the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.0.0-rc.15" + } + ], + "events": [ + { + "name": "click", + "_ui5privacy": "public", + "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.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true + } + ], + "attributes": [ + { + "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](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "name": "icon", + "default": "undefined", + "fieldName": "icon", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the subtitle of the component.", + "name": "subtitle-text", + "default": "undefined", + "fieldName": "subtitleText", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines a target where the `targetSrc` content must be open.\n\nAvailable options are:\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `_search`\n\n**Note:** By default target will be open in the same frame as it was clicked.", + "name": "target", + "default": "undefined", + "fieldName": "target", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the component target URI. Supports standard hyperlink behavior.", + "name": "target-src", + "default": "undefined", + "fieldName": "targetSrc", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the title of the component.", + "name": "title-text", + "default": "undefined", + "fieldName": "titleText", + "type": { + "text": "string | undefined" + } + } + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-product-switch-item", + "customElement": true, + "_ui5since": "1.0.0-rc.5", + "_ui5privacy": "public", + "_ui5implements": [ + { + "name": "IProductSwitchItem", + "package": "@ui5/webcomponents-fiori", + "module": "dist/ProductSwitch.js" + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "ProductSwitchItem", + "module": "dist/ProductSwitchItem.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-product-switch-item", + "declaration": { + "name": "ProductSwitchItem", + "module": "dist/ProductSwitchItem.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/Search.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\n\nA `ui5-search` is an input with suggestions, used for user search.\n\nThe `ui5-search` consists of several elements parts:\n- Scope - displays a select in the beggining of the component, used for filtering results by their scope.\n- Input field - for user input value\n- Clear button - gives the possibility for deleting the entered value\n- Search button - a primary button for performing search, when the user has entered a search term\n- Suggestions - a list with available search suggestions\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/Search.js\";`", + "name": "Search", + "slots": [ + { + "name": "action", + "description": "Defines the popup footer action button.", + "_ui5type": { + "text": "Array<Button>", + "references": [ + { + "name": "Button", + "package": "@ui5/webcomponents", + "module": "dist/Button.js" + } + ] + }, + "_ui5privacy": "public" + }, + { + "name": "default", + "description": "Defines the Search suggestion items.", + "_ui5propertyName": "items", + "_ui5type": { + "text": "Array<SearchItem | SearchItemGroup>" + }, + "_ui5privacy": "public" + }, + { + "name": "filterButton", + "description": "Defines the filter button slot, used to display an additional filtering button.\nThis slot is intended for passing a `ui5-button` with a filter icon to provide extended filtering options.\n\n**Note:** Scope button and Filter button are mutually exclusive.", + "_ui5since": "2.11.0", + "_ui5type": { + "text": "Array<Button>", + "references": [ + { + "name": "Button", + "package": "@ui5/webcomponents", + "module": "dist/Button.js" + } + ] + }, + "_ui5privacy": "public" + }, + { + "name": "illustration", + "description": "Defines the illustrated message to be shown in the popup.", + "_ui5type": { + "text": "Array<IllustratedMessage>", + "references": [ + { + "name": "IllustratedMessage", + "package": "@ui5/webcomponents-fiori", + "module": "dist/IllustratedMessage.js" + } + ] + }, + "_ui5privacy": "public" + }, + { + "name": "messageArea", + "description": "Defines the illustrated message to be shown in the popup.", + "_ui5type": { + "text": "Array<SearchMessageArea>", + "references": [ + { + "name": "SearchMessageArea", + "package": "@ui5/webcomponents-fiori", + "module": "dist/SearchMessageArea.js" + } + ] + }, + "_ui5privacy": "public" + }, + { + "name": "scopes", + "description": "Defines the component scope options.", + "_ui5type": { + "text": "Array<ISearchScope>", + "references": [ + { + "name": "ISearchScope", + "package": "@ui5/webcomponents-fiori", + "module": "dist/SearchField.js" + } + ] + }, + "_ui5privacy": "public" + } + ], + "members": [ + { + "kind": "field", + "name": "accessibleDescription", "type": { "text": "string | undefined" }, - "description": "Defines the title of the component.", - "default": "undefined", + "description": "Defines the accessible ARIA description of the field.", "privacy": "public", - "_ui5since": "1.0.0-rc.15" + "default": "undefined" }, { "kind": "field", - "name": "subtitleText", + "name": "accessibleName", "type": { "text": "string | undefined" }, - "description": "Defines the subtitle of the component.", - "default": "undefined", + "description": "Defines the accessible ARIA name of the component.", "privacy": "public", - "_ui5since": "1.0.0-rc.15" + "default": "undefined" }, { "kind": "field", - "name": "icon", + "name": "fieldLoading", "type": { - "text": "string | undefined" + "text": "boolean" }, - "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](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", - "default": "undefined", + "default": "false", + "description": "Indicates whether a loading indicator should be shown in the input field.", + "privacy": "public", + "_ui5since": "2.19.0" + }, + { + "kind": "field", + "name": "loading", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Indicates whether a loading indicator should be shown in the popup.", "privacy": "public" }, { "kind": "field", - "name": "target", + "name": "noTypeahead", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the value will be autcompleted to match an item.", + "privacy": "public" + }, + { + "kind": "field", + "name": "open", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Indicates whether the items picker is open.", + "privacy": "public" + }, + { + "kind": "field", + "name": "placeholder", "type": { "text": "string | undefined" }, - "description": "Defines a target where the `targetSrc` content must be open.\n\nAvailable options are:\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `_search`\n\n**Note:** By default target will be open in the same frame as it was clicked.", + "description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.", "default": "undefined", "privacy": "public" }, { "kind": "field", - "name": "targetSrc", + "name": "scopeValue", "type": { "text": "string | undefined" }, - "description": "Defines the component target URI. Supports standard hyperlink behavior.", - "default": "undefined", + "description": "Defines the value of the component:\n\nApplications are responsible for setting the correct scope value.\n\n**Note:** If the given value does not match any existing scopes,\nno scope will be selected and the SearchField scope component will be displayed as empty.", + "privacy": "public", + "default": "\"\"", + "_ui5since": "2.18.0" + }, + { + "kind": "field", + "name": "showClearIcon", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the clear icon of the search will be shown.", + "privacy": "public" + }, + { + "kind": "field", + "name": "value", + "type": { + "text": "string" + }, + "default": "\"\"", + "description": "Defines the value of the component.\n\n**Note:** The property is updated upon typing.", "privacy": "public" } ], "events": [ { - "name": "click", + "name": "close", "_ui5privacy": "public", "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 popup is closed.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": false + }, + { + "name": "input", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when typing in input or clear icon is pressed.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true + }, + { + "name": "open", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the popup is opened.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": false + }, + { + "name": "scope-change", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<SearchFieldScopeSelectionChangeDetails>", + "references": [ + { + "name": "SearchFieldScopeSelectionChangeDetails", + "package": "@ui5/webcomponents-fiori", + "module": "dist/SearchField.js" + } + ] + }, + "description": "Fired when the scope has changed.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5parameters": [ + { + "type": { + "text": "HTMLElement" + }, + "name": "scope", + "_ui5privacy": "public", + "description": "The newly selected scope" + } + ] + }, + { + "name": "search", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the user has triggered search with Enter key or Search Button press.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, "_ui5Bubbles": true } ], "attributes": [ { - "description": "Defines the title of the component.", - "name": "title-text", + "description": "Defines the accessible ARIA description of the field.", + "name": "accessible-description", "default": "undefined", - "fieldName": "titleText", + "fieldName": "accessibleDescription", "type": { "text": "string | undefined" } }, { - "description": "Defines the subtitle of the component.", - "name": "subtitle-text", + "description": "Defines the accessible ARIA name of the component.", + "name": "accessible-name", "default": "undefined", - "fieldName": "subtitleText", + "fieldName": "accessibleName", "type": { "text": "string | undefined" } }, { - "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](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", - "name": "icon", - "default": "undefined", - "fieldName": "icon", + "description": "Indicates whether a loading indicator should be shown in the input field.", + "name": "field-loading", + "default": "false", + "fieldName": "fieldLoading", "type": { - "text": "string | undefined" + "text": "boolean" } }, { - "description": "Defines a target where the `targetSrc` content must be open.\n\nAvailable options are:\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `_search`\n\n**Note:** By default target will be open in the same frame as it was clicked.", - "name": "target", + "description": "Indicates whether a loading indicator should be shown in the popup.", + "name": "loading", + "default": "false", + "fieldName": "loading", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines whether the value will be autcompleted to match an item.", + "name": "no-typeahead", + "default": "false", + "fieldName": "noTypeahead", + "type": { + "text": "boolean" + } + }, + { + "description": "Indicates whether the items picker is open.", + "name": "open", + "default": "false", + "fieldName": "open", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.", + "name": "placeholder", "default": "undefined", - "fieldName": "target", + "fieldName": "placeholder", "type": { "text": "string | undefined" } }, { - "description": "Defines the component target URI. Supports standard hyperlink behavior.", - "name": "target-src", - "default": "undefined", - "fieldName": "targetSrc", + "description": "Defines the value of the component:\n\nApplications are responsible for setting the correct scope value.\n\n**Note:** If the given value does not match any existing scopes,\nno scope will be selected and the SearchField scope component will be displayed as empty.", + "name": "scope-value", + "default": "\"\"", + "fieldName": "scopeValue", "type": { "text": "string | undefined" } + }, + { + "description": "Defines whether the clear icon of the search will be shown.", + "name": "show-clear-icon", + "default": "false", + "fieldName": "showClearIcon", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines the value of the component.\n\n**Note:** The property is updated upon typing.", + "name": "value", + "default": "\"\"", + "fieldName": "value", + "type": { + "text": "string" + } } ], "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" + "name": "SearchField", + "package": "@ui5/webcomponents-fiori", + "module": "dist/SearchField.js" }, - "tagName": "ui5-product-switch-item", + "tagName": "ui5-search", "customElement": true, - "_ui5since": "1.0.0-rc.5", - "_ui5privacy": "public", - "_ui5implements": [ - { - "name": "IProductSwitchItem", - "package": "@ui5/webcomponents-fiori", - "module": "dist/ProductSwitch.js" - } - ] + "_ui5experimental": true, + "_ui5since": "2.9.0", + "_ui5privacy": "public" } ], "exports": [ { "kind": "js", "name": "default", - "declaration": { - "name": "ProductSwitchItem", - "module": "dist/ProductSwitchItem.js" + "declaration": { + "name": "Search", + "module": "dist/Search.js" } }, { "kind": "custom-element-definition", - "name": "ui5-product-switch-item", + "name": "ui5-search", "declaration": { - "name": "ProductSwitchItem", - "module": "dist/ProductSwitchItem.js" + "name": "Search", + "module": "dist/Search.js" } } ] }, { "kind": "javascript-module", - "path": "dist/Search.js", + "path": "dist/SearchField.js", "declarations": [ + { + "kind": "interface", + "name": "ISearchScope", + "description": "Interface for components that may be slotted inside a `ui5-search`", + "_ui5privacy": "public" + }, { "kind": "class", - "description": "### Overview\n\nA `ui5-search` is an input with suggestions, used for user search.\n\nThe `ui5-search` consists of several elements parts:\n- Scope - displays a select in the beggining of the component, used for filtering results by their scope.\n- Input field - for user input value\n- Clear button - gives the possibility for deleting the entered value\n- Search button - a primary button for performing search, when the user has entered a search term\n- Suggestions - a list with available search suggestions\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/Search.js\";`", - "name": "Search", + "description": "### Overview\n\nA `ui5-search-field` is an input field, used for user search.\n\nThe `ui5-search-field` consists of several elements parts:\n- Scope - displays a select in the beggining of the component, used for filtering results by their scope.\n- Input field - for user input value\n- Clear button - gives the possibility for deleting the entered value\n- Search button - a primary button for performing search, when the user has entered a search term\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/SearchField.js\";`", + "name": "SearchField", "slots": [ { - "name": "default", - "description": "Defines the Search suggestion items.", - "_ui5propertyName": "items", - "_ui5type": { - "text": "Array<SearchItem | SearchItemGroup>" - }, - "_ui5privacy": "public" - }, - { - "name": "action", - "description": "Defines the popup footer action button.", + "name": "filterButton", + "description": "Defines the filter button slot, used to display an additional filtering button.\nThis slot is intended for passing a `ui5-button` with a filter icon to provide extended filtering options.\n\n**Note:** Scope button and Filter button are mutually exclusive.", + "_ui5since": "2.11.0", "_ui5type": { "text": "Array<Button>", "references": [ @@ -3408,36 +6026,6 @@ }, "_ui5privacy": "public" }, - { - "name": "illustration", - "description": "Defines the illustrated message to be shown in the popup.", - "_ui5type": { - "text": "Array<IllustratedMessage>", - "references": [ - { - "name": "IllustratedMessage", - "package": "@ui5/webcomponents-fiori", - "module": "dist/IllustratedMessage.js" - } - ] - }, - "_ui5privacy": "public" - }, - { - "name": "messageArea", - "description": "Defines the illustrated message to be shown in the popup.", - "_ui5type": { - "text": "Array<SearchMessageArea>", - "references": [ - { - "name": "SearchMessageArea", - "package": "@ui5/webcomponents-fiori", - "module": "dist/SearchMessageArea.js" - } - ] - }, - "_ui5privacy": "public" - }, { "name": "scopes", "description": "Defines the component scope options.", @@ -3451,63 +6039,29 @@ } ] }, - "_ui5privacy": "public", - "inheritedFrom": { - "name": "SearchField", - "module": "dist/SearchField.js" - } - }, - { - "name": "filterButton", - "description": "Defines the filter button slot, used to display an additional filtering button.\nThis slot is intended for passing a `ui5-button` with a filter icon to provide extended filtering options.\n\n**Note:** Scope button and Filter button are mutually exclusive.", - "_ui5since": "2.11.0", - "_ui5type": { - "text": "Array<Button>", - "references": [ - { - "name": "Button", - "package": "@ui5/webcomponents", - "module": "dist/Button.js" - } - ] - }, - "_ui5privacy": "public", - "inheritedFrom": { - "name": "SearchField", - "module": "dist/SearchField.js" - } + "_ui5privacy": "public" } ], "members": [ { "kind": "field", - "name": "loading", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Indicates whether a loading indicator should be shown in the popup.", - "privacy": "public" - }, - { - "kind": "field", - "name": "noTypeahead", + "name": "accessibleDescription", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Defines whether the value will be autcompleted to match an item.", - "privacy": "public" + "description": "Defines the accessible ARIA description of the field.", + "privacy": "public", + "default": "undefined" }, { "kind": "field", - "name": "open", + "name": "accessibleName", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Indicates whether the items picker is open.", - "privacy": "public" + "description": "Defines the accessible ARIA name of the component.", + "privacy": "public", + "default": "undefined" }, { "kind": "field", @@ -3518,39 +6072,7 @@ "default": "false", "description": "Indicates whether a loading indicator should be shown in the input field.", "privacy": "public", - "_ui5since": "2.19.0", - "inheritedFrom": { - "name": "SearchField", - "module": "dist/SearchField.js" - } - }, - { - "kind": "field", - "name": "showClearIcon", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines whether the clear icon of the search will be shown.", - "privacy": "public", - "inheritedFrom": { - "name": "SearchField", - "module": "dist/SearchField.js" - } - }, - { - "kind": "field", - "name": "value", - "type": { - "text": "string" - }, - "default": "\"\"", - "description": "Defines the value of the component.\n\n**Note:** The property is updated upon typing.", - "privacy": "public", - "inheritedFrom": { - "name": "SearchField", - "module": "dist/SearchField.js" - } + "_ui5since": "2.19.0" }, { "kind": "field", @@ -3560,79 +6082,41 @@ }, "description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.", "default": "undefined", - "privacy": "public", - "inheritedFrom": { - "name": "SearchField", - "module": "dist/SearchField.js" - } + "privacy": "public" }, { "kind": "field", - "name": "accessibleName", + "name": "scopeValue", "type": { "text": "string | undefined" }, - "description": "Defines the accessible ARIA name of the component.", + "description": "Defines the value of the component:\n\nApplications are responsible for setting the correct scope value.\n\n**Note:** If the given value does not match any existing scopes,\nno scope will be selected and the SearchField scope component will be displayed as empty.", "privacy": "public", - "default": "undefined", - "inheritedFrom": { - "name": "SearchField", - "module": "dist/SearchField.js" - } + "default": "\"\"", + "_ui5since": "2.18.0" }, { "kind": "field", - "name": "accessibleDescription", + "name": "showClearIcon", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Defines the accessible ARIA description of the field.", - "privacy": "public", - "default": "undefined", - "inheritedFrom": { - "name": "SearchField", - "module": "dist/SearchField.js" - } + "default": "false", + "description": "Defines whether the clear icon of the search will be shown.", + "privacy": "public" }, { "kind": "field", - "name": "scopeValue", + "name": "value", "type": { - "text": "string | undefined" + "text": "string" }, - "description": "Defines the value of the component:\n\nApplications are responsible for setting the correct scope value.\n\n**Note:** If the given value does not match any existing scopes,\nno scope will be selected and the SearchField scope component will be displayed as empty.", - "privacy": "public", "default": "\"\"", - "_ui5since": "2.18.0", - "inheritedFrom": { - "name": "SearchField", - "module": "dist/SearchField.js" - } + "description": "Defines the value of the component.\n\n**Note:** The property is updated upon typing.", + "privacy": "public" } ], "events": [ - { - "name": "open", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired when the popup is opened.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": false - }, - { - "name": "close", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired when the popup is closed.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": false - }, { "name": "input", "_ui5privacy": "public", @@ -3642,11 +6126,7 @@ "description": "Fired when typing in input or clear icon is pressed.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "inheritedFrom": { - "name": "SearchField", - "module": "dist/SearchField.js" - } + "_ui5Bubbles": true }, { "name": "scope-change", @@ -3674,11 +6154,7 @@ "_ui5privacy": "public", "description": "The newly selected scope" } - ], - "inheritedFrom": { - "name": "SearchField", - "module": "dist/SearchField.js" - } + ] }, { "name": "search", @@ -3689,91 +6165,17 @@ "description": "Fired when the user has triggered search with Enter key or Search Button press.", "_ui5Cancelable": true, "_ui5allowPreventDefault": true, - "_ui5Bubbles": true, - "inheritedFrom": { - "name": "SearchField", - "module": "dist/SearchField.js" - } + "_ui5Bubbles": true } - ], - "attributes": [ - { - "description": "Indicates whether a loading indicator should be shown in the popup.", - "name": "loading", - "default": "false", - "fieldName": "loading", - "type": { - "text": "boolean" - } - }, - { - "description": "Defines whether the value will be autcompleted to match an item.", - "name": "no-typeahead", - "default": "false", - "fieldName": "noTypeahead", - "type": { - "text": "boolean" - } - }, - { - "description": "Indicates whether the items picker is open.", - "name": "open", - "default": "false", - "fieldName": "open", - "type": { - "text": "boolean" - } - }, - { - "description": "Indicates whether a loading indicator should be shown in the input field.", - "name": "field-loading", - "default": "false", - "fieldName": "fieldLoading", - "type": { - "text": "boolean" - }, - "inheritedFrom": { - "name": "SearchField", - "module": "dist/SearchField.js" - } - }, - { - "description": "Defines whether the clear icon of the search will be shown.", - "name": "show-clear-icon", - "default": "false", - "fieldName": "showClearIcon", - "type": { - "text": "boolean" - }, - "inheritedFrom": { - "name": "SearchField", - "module": "dist/SearchField.js" - } - }, - { - "description": "Defines the value of the component.\n\n**Note:** The property is updated upon typing.", - "name": "value", - "default": "\"\"", - "fieldName": "value", - "type": { - "text": "string" - }, - "inheritedFrom": { - "name": "SearchField", - "module": "dist/SearchField.js" - } - }, + ], + "attributes": [ { - "description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.", - "name": "placeholder", + "description": "Defines the accessible ARIA description of the field.", + "name": "accessible-description", "default": "undefined", - "fieldName": "placeholder", + "fieldName": "accessibleDescription", "type": { "text": "string | undefined" - }, - "inheritedFrom": { - "name": "SearchField", - "module": "dist/SearchField.js" } }, { @@ -3783,23 +6185,24 @@ "fieldName": "accessibleName", "type": { "text": "string | undefined" - }, - "inheritedFrom": { - "name": "SearchField", - "module": "dist/SearchField.js" } }, { - "description": "Defines the accessible ARIA description of the field.", - "name": "accessible-description", + "description": "Indicates whether a loading indicator should be shown in the input field.", + "name": "field-loading", + "default": "false", + "fieldName": "fieldLoading", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.", + "name": "placeholder", "default": "undefined", - "fieldName": "accessibleDescription", + "fieldName": "placeholder", "type": { "text": "string | undefined" - }, - "inheritedFrom": { - "name": "SearchField", - "module": "dist/SearchField.js" } }, { @@ -3809,23 +6212,35 @@ "fieldName": "scopeValue", "type": { "text": "string | undefined" - }, - "inheritedFrom": { - "name": "SearchField", - "module": "dist/SearchField.js" + } + }, + { + "description": "Defines whether the clear icon of the search will be shown.", + "name": "show-clear-icon", + "default": "false", + "fieldName": "showClearIcon", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines the value of the component.\n\n**Note:** The property is updated upon typing.", + "name": "value", + "default": "\"\"", + "fieldName": "value", + "type": { + "text": "string" } } ], "superclass": { - "name": "SearchField", - "package": "@ui5/webcomponents-fiori", - "module": "dist/SearchField.js" + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" }, - "tagName": "ui5-search", + "tagName": "ui5-search-field", "customElement": true, - "_ui5experimental": true, - "_ui5since": "2.9.0", - "_ui5privacy": "public" + "_ui5privacy": "private" } ], "exports": [ @@ -3833,35 +6248,13 @@ "kind": "js", "name": "default", "declaration": { - "name": "Search", - "module": "dist/Search.js" + "name": "SearchField", + "module": "dist/SearchField.js" } }, { "kind": "custom-element-definition", - "name": "ui5-search", - "declaration": { - "name": "Search", - "module": "dist/Search.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/SearchField.js", - "declarations": [ - { - "kind": "interface", - "name": "ISearchScope", - "description": "Interface for components that may be slotted inside a `ui5-search`", - "_ui5privacy": "public" - } - ], - "exports": [ - { - "kind": "js", - "name": "default", + "name": "ui5-search-field", "declaration": { "name": "SearchField", "module": "dist/SearchField.js" @@ -3879,18 +6272,18 @@ "name": "SearchItem", "slots": [ { - "name": "image", - "description": "**Note:** While the slot allows the option of setting a custom avatar, to comply with the\ndesign guidelines, use the `ui5-avatar` with size - XS.", - "_ui5since": "2.12.0", + "name": "actions", + "description": "Defines the actionable elements.\nThis slot allows placing additional interactive elements (such as buttons, icons, or tags)\nnext to the delete button, providing flexible customization for various user actions.\n\n**Note:** While the slot is flexible, for consistency with design guidelines,\nit's recommended to use `ui5-button` with `Transparent` design or `ui5-icon` elements.", + "_ui5since": "2.16.0", "_ui5type": { "text": "Array<HTMLElement>" }, "_ui5privacy": "public" }, { - "name": "actions", - "description": "Defines the actionable elements.\nThis slot allows placing additional interactive elements (such as buttons, icons, or tags)\nnext to the delete button, providing flexible customization for various user actions.\n\n**Note:** While the slot is flexible, for consistency with design guidelines,\nit's recommended to use `ui5-button` with `Transparent` design or `ui5-icon` elements.", - "_ui5since": "2.16.0", + "name": "image", + "description": "**Note:** While the slot allows the option of setting a custom avatar, to comply with the\ndesign guidelines, use the `ui5-avatar` with size - XS.", + "_ui5since": "2.12.0", "_ui5type": { "text": "Array<HTMLElement>" }, @@ -3900,12 +6293,12 @@ "members": [ { "kind": "field", - "name": "text", + "name": "deletable", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Defines the heading text of the search item.", - "default": "undefined", + "default": "false", + "description": "Defines whether the search item is deletable.", "privacy": "public" }, { @@ -3931,31 +6324,31 @@ }, { "kind": "field", - "name": "selected", + "name": "scopeName", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Defines whether the search item is selected.", + "description": "Defines the scope of the search item", + "default": "undefined", "privacy": "public" }, { "kind": "field", - "name": "deletable", + "name": "selected", "type": { "text": "boolean" }, "default": "false", - "description": "Defines whether the search item is deletable.", + "description": "Defines whether the search item is selected.", "privacy": "public" }, { "kind": "field", - "name": "scopeName", + "name": "text", "type": { "text": "string | undefined" }, - "description": "Defines the scope of the search item", + "description": "Defines the heading text of the search item.", "default": "undefined", "privacy": "public" } @@ -3975,12 +6368,12 @@ ], "attributes": [ { - "description": "Defines the heading text of the search item.", - "name": "text", - "default": "undefined", - "fieldName": "text", + "description": "Defines whether the search item is deletable.", + "name": "deletable", + "default": "false", + "fieldName": "deletable", "type": { - "text": "string | undefined" + "text": "boolean" } }, { @@ -4002,28 +6395,28 @@ } }, { - "description": "Defines whether the search item is selected.", - "name": "selected", - "default": "false", - "fieldName": "selected", + "description": "Defines the scope of the search item", + "name": "scope-name", + "default": "undefined", + "fieldName": "scopeName", "type": { - "text": "boolean" + "text": "string | undefined" } }, { - "description": "Defines whether the search item is deletable.", - "name": "deletable", + "description": "Defines whether the search item is selected.", + "name": "selected", "default": "false", - "fieldName": "deletable", + "fieldName": "selected", "type": { "text": "boolean" } }, { - "description": "Defines the scope of the search item", - "name": "scope-name", + "description": "Defines the heading text of the search item.", + "name": "text", "default": "undefined", - "fieldName": "scopeName", + "fieldName": "text", "type": { "text": "string | undefined" } @@ -4078,44 +6471,14 @@ "_ui5experimental": true, "_ui5since": "2.9.0", "_ui5privacy": "public", - "members": [ - { - "kind": "field", - "name": "headerText", - "type": { - "text": "string | undefined" - }, - "description": "Defines the header text of the <code>ui5-li-group</code>.", - "privacy": "public", - "default": "undefined" - }, + "cssParts": [ { - "kind": "field", - "name": "headerAccessibleName", - "type": { - "text": "string | undefined" - }, - "description": "Defines the accessible name of the header.", - "privacy": "public", - "default": "undefined" + "description": "Used to style the header item of the group", + "name": "header" }, { - "kind": "field", - "name": "wrappingType", - "type": { - "text": "WrappingType", - "references": [ - { - "name": "WrappingType", - "package": "@ui5/webcomponents", - "module": "dist/types/WrappingType.js" - } - ] - }, - "default": "\"None\"", - "description": "Defines if the text of the component should wrap when it's too long.\nWhen set to \"Normal\", the content (title, description) will be wrapped\nusing the `ui5-expandable-text` component.<br/>\n\nThe text can wrap up to 100 characters on small screens (size S) and\nup to 300 characters on larger screens (size M and above). When text exceeds\nthese limits, it truncates with an ellipsis followed by a text expansion trigger.\n\nAvailable options are:\n- `None` (default) - The text will truncate with an ellipsis.\n- `Normal` - The text will wrap (without truncation).", - "privacy": "public", - "_ui5since": "2.15.0" + "description": "Used to style the title of the group header", + "name": "title" } ], "slots": [ @@ -4151,9 +6514,49 @@ "_ui5privacy": "public" } ], + "members": [ + { + "kind": "field", + "name": "headerAccessibleName", + "type": { + "text": "string | undefined" + }, + "description": "Defines the accessible name of the header.", + "privacy": "public", + "default": "undefined" + }, + { + "kind": "field", + "name": "headerText", + "type": { + "text": "string | undefined" + }, + "description": "Defines the header text of the <code>ui5-li-group</code>.", + "privacy": "public", + "default": "undefined" + }, + { + "kind": "field", + "name": "wrappingType", + "type": { + "text": "WrappingType", + "references": [ + { + "name": "WrappingType", + "package": "@ui5/webcomponents", + "module": "dist/types/WrappingType.js" + } + ] + }, + "default": "\"None\"", + "description": "Defines if the text of the component should wrap when it's too long.\nWhen set to \"Normal\", the content (title, description) will be wrapped\nusing the `ui5-expandable-text` component.<br/>\n\nThe text can wrap up to 100 characters on small screens (size S) and\nup to 300 characters on larger screens (size M and above). When text exceeds\nthese limits, it truncates with an ellipsis followed by a text expansion trigger.\n\nAvailable options are:\n- `None` (default) - The text will truncate with an ellipsis.\n- `Normal` - The text will wrap (without truncation).", + "privacy": "public", + "_ui5since": "2.15.0" + } + ], "events": [ { - "name": "move-over", + "name": "move", "_ui5privacy": "public", "type": { "text": "CustomEvent<ListItemGroupMoveEventDetail>", @@ -4165,9 +6568,9 @@ } ] }, - "description": "Fired when a movable list item is moved over a potential drop target during a dragging operation.\n\nIf the new position is valid, prevent the default action of the event using `preventDefault()`.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, + "description": "Fired when a movable list item is dropped onto a drop target.\n\n**Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, "_ui5Bubbles": true, "_ui5since": "2.1.0", "_ui5parameters": [ @@ -4175,22 +6578,22 @@ "type": { "text": "object" }, - "name": "source", + "name": "destination", "_ui5privacy": "public", - "description": "Contains information about the moved element under `element` property." + "description": "Contains information about the destination of the moved element. Has `element` and `placement` properties." }, { "type": { "text": "object" }, - "name": "destination", + "name": "source", "_ui5privacy": "public", - "description": "Contains information about the destination of the moved element. Has `element` and `placement` properties." + "description": "Contains information about the moved element under `element` property." } ] }, { - "name": "move", + "name": "move-over", "_ui5privacy": "public", "type": { "text": "CustomEvent<ListItemGroupMoveEventDetail>", @@ -4202,9 +6605,9 @@ } ] }, - "description": "Fired when a movable list item is dropped onto a drop target.\n\n**Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, + "description": "Fired when a movable list item is moved over a potential drop target during a dragging operation.\n\nIf the new position is valid, prevent the default action of the event using `preventDefault()`.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, "_ui5Bubbles": true, "_ui5since": "2.1.0", "_ui5parameters": [ @@ -4212,25 +6615,48 @@ "type": { "text": "object" }, - "name": "source", + "name": "destination", "_ui5privacy": "public", - "description": "Contains information about the moved element under `element` property." + "description": "Contains information about the destination of the moved element. Has `element` and `placement` properties." }, { "type": { "text": "object" }, - "name": "destination", + "name": "source", "_ui5privacy": "public", - "description": "Contains information about the destination of the moved element. Has `element` and `placement` properties." + "description": "Contains information about the moved element under `element` property." } ] } ], - "cssParts": [ + "attributes": [ { - "description": "Used to style the header item of the group", - "name": "header" + "description": "Defines the accessible name of the header.", + "name": "header-accessible-name", + "default": "undefined", + "fieldName": "headerAccessibleName", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the header text of the <code>ui5-li-group</code>.", + "name": "header-text", + "default": "undefined", + "fieldName": "headerText", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines if the text of the component should wrap when it's too long.\nWhen set to \"Normal\", the content (title, description) will be wrapped\nusing the `ui5-expandable-text` component.<br/>\n\nThe text can wrap up to 100 characters on small screens (size S) and\nup to 300 characters on larger screens (size M and above). When text exceeds\nthese limits, it truncates with an ellipsis followed by a text expansion trigger.\n\nAvailable options are:\n- `None` (default) - The text will truncate with an ellipsis.\n- `Normal` - The text will wrap (without truncation).", + "name": "wrapping-type", + "default": "\"None\"", + "fieldName": "wrappingType", + "type": { + "text": "\"None\" | \"Normal\"" + } } ] } @@ -4376,40 +6802,40 @@ "members": [ { "kind": "field", - "name": "text", + "name": "description", "type": { "text": "string | undefined" }, - "description": "Defines the text to be displayed.", + "description": "Defines the description text to be displayed.", "default": "undefined", "privacy": "public" }, { "kind": "field", - "name": "description", + "name": "text", "type": { "text": "string | undefined" }, - "description": "Defines the description text to be displayed.", + "description": "Defines the text to be displayed.", "default": "undefined", "privacy": "public" } ], "attributes": [ { - "description": "Defines the text to be displayed.", - "name": "text", + "description": "Defines the description text to be displayed.", + "name": "description", "default": "undefined", - "fieldName": "text", + "fieldName": "description", "type": { "text": "string | undefined" } }, { - "description": "Defines the description text to be displayed.", - "name": "description", + "description": "Defines the text to be displayed.", + "name": "text", "default": "undefined", - "fieldName": "description", + "fieldName": "text", "type": { "text": "string | undefined" } @@ -4582,6 +7008,15 @@ }, "_ui5privacy": "public" }, + { + "name": "content", + "description": "Define the items displayed in the content area.\n\nUse the `data-hide-order` attribute with numeric value to specify the order of the items to be hidden when the space is not enough.\nLower values will be hidden first.\n\n**Note:** The `content` slot is in an experimental state and is a subject to change.", + "_ui5since": "2.7.0", + "_ui5type": { + "text": "Array<HTMLElement>" + }, + "_ui5privacy": "public" + }, { "name": "default", "description": "Defines the `ui5-shellbar` additional items.\n\n**Note:**\nYou can use the `<ui5-shellbar-item></ui5-shellbar-item>`.", @@ -4598,15 +7033,6 @@ }, "_ui5privacy": "public" }, - { - "name": "profile", - "description": "You can pass `ui5-avatar` to set the profile image/icon.\nIf no profile slot is set - profile will be excluded from actions.\n\n**Note:** We recommend not using the `size` attribute of `ui5-avatar` because\nit should have specific size by design in the context of `ui5-shellbar` profile.", - "_ui5since": "1.0.0-rc.6", - "_ui5type": { - "text": "Array<HTMLElement>" - }, - "_ui5privacy": "public" - }, { "name": "logo", "description": "Defines the logo of the `ui5-shellbar`.\nFor example, you can use `ui5-avatar` or `img` elements as logo.", @@ -4632,6 +7058,15 @@ }, "_ui5privacy": "public" }, + { + "name": "profile", + "description": "You can pass `ui5-avatar` to set the profile image/icon.\nIf no profile slot is set - profile will be excluded from actions.\n\n**Note:** We recommend not using the `size` attribute of `ui5-avatar` because\nit should have specific size by design in the context of `ui5-shellbar` profile.", + "_ui5since": "1.0.0-rc.6", + "_ui5type": { + "text": "Array<HTMLElement>" + }, + "_ui5privacy": "public" + }, { "name": "searchField", "description": "Defines the `ui5-input`, that will be used as a search field.", @@ -4661,26 +7096,36 @@ ] }, "_ui5privacy": "public" - }, - { - "name": "content", - "description": "Define the items displayed in the content area.\n\nUse the `data-hide-order` attribute with numeric value to specify the order of the items to be hidden when the space is not enough.\nLower values will be hidden first.\n\n**Note:** The `content` slot is in an experimental state and is a subject to change.", - "_ui5since": "2.7.0", - "_ui5type": { - "text": "Array<HTMLElement>" - }, - "_ui5privacy": "public" } ], "members": [ { "kind": "field", - "name": "hideSearchButton", + "name": "accessibilityAttributes", "type": { - "text": "boolean" + "text": "ShellBarAccessibilityAttributes", + "references": [ + { + "name": "ShellBarAccessibilityAttributes", + "package": "@ui5/webcomponents-fiori", + "module": "dist/shellbar/ShellBarAccessibility.js" + } + ] }, - "default": "false", - "description": "Defines the visibility state of the search button.\n\n**Note:** The `hideSearchButton` property is in an experimental state and is a subject to change.", + "default": "{}", + "description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following fields,\nwhere each field is an object supporting one or more accessibility attributes:\n\n- **logo** - `logo.role` and `logo.name`.\n- **notifications** - `notifications.expanded` and `notifications.hasPopup`.\n- **profile** - `profile.expanded`, `profile.hasPopup` and `profile.name`.\n- **product** - `product.expanded` and `product.hasPopup`.\n- **search** - `search.hasPopup`.\n- **overflow** - `overflow.expanded` and `overflow.hasPopup`.\n- **branding** - `branding.name`.\n\nThe accessibility attributes support the following values:\n\n- **role**: Defines the accessible ARIA role of the logo area.\nAccepts the following string values: `button` or `link`.\n\n- **expanded**: Indicates whether the button, or another grouping element it controls,\nis currently expanded or collapsed.\nAccepts the following string values: `true` or `false`.\n\n- **hasPopup**: Indicates the availability and type of interactive popup element,\nsuch as menu or dialog, that can be triggered by the button.\n\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n- **name**: Defines the accessible ARIA name of the area.\nAccepts any string.", + "privacy": "public", + "_ui5since": "1.10.0" + }, + { + "kind": "method", + "name": "closeOverflow", + "return": { + "type": { + "text": "void" + } + }, + "description": "Closes the overflow popover.", "privacy": "public" }, { @@ -4694,101 +7139,89 @@ "privacy": "public" }, { - "kind": "field", - "name": "primaryTitle", - "type": { - "text": "string | undefined" + "kind": "method", + "name": "getSearchButtonDomRef", + "return": { + "type": { + "text": "Promise<HTMLElement | null>" + } }, - "description": "Defines the `primaryTitle`.\n\n**Note:** The `primaryTitle` would be hidden on S screen size (less than approx. 700px).", - "default": "undefined", + "description": "Returns the search button DOM reference.", "privacy": "public" }, { "kind": "field", - "name": "secondaryTitle", + "name": "hideSearchButton", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Defines the `secondaryTitle`.\n\n**Note:** The `secondaryTitle` would be hidden on S and M screen sizes (less than approx. 1300px).", - "default": "undefined", + "default": "false", + "description": "Defines the visibility state of the search button.\n\n**Note:** The `hideSearchButton` property is in an experimental state and is a subject to change.", "privacy": "public" }, { "kind": "field", - "name": "notificationsCount", + "name": "logoDomRef", "type": { - "text": "string | undefined" + "text": "HTMLElement | null" }, - "description": "Defines the `notificationsCount`,\ndisplayed in the notification icon top-right corner.", - "default": "undefined", - "privacy": "public" + "description": "Returns the `logo` DOM ref.", + "privacy": "public", + "default": "null", + "readonly": true, + "_ui5since": "1.0.0-rc.16" }, { "kind": "field", - "name": "showNotifications", + "name": "notificationsCount", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Defines, if the notification icon would be displayed.", + "description": "Defines the `notificationsCount`,\ndisplayed in the notification icon top-right corner.", + "default": "undefined", "privacy": "public" }, { "kind": "field", - "name": "showProductSwitch", + "name": "notificationsDomRef", "type": { - "text": "boolean" + "text": "HTMLElement | null" }, - "default": "false", - "description": "Defines, if the product switch icon would be displayed.", - "privacy": "public" + "description": "Returns the `notifications` icon DOM ref.", + "privacy": "public", + "default": "null", + "readonly": true, + "_ui5since": "1.0.0-rc.16" }, { "kind": "field", - "name": "showSearchField", + "name": "overflowDomRef", "type": { - "text": "boolean" + "text": "HTMLElement | null" }, - "default": "false", - "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.", - "privacy": "public" + "description": "Returns the `overflow` icon DOM ref.", + "privacy": "public", + "default": "null", + "readonly": true, + "_ui5since": "1.0.0-rc.16" }, { "kind": "field", - "name": "accessibilityAttributes", + "name": "primaryTitle", "type": { - "text": "ShellBarAccessibilityAttributes", - "references": [ - { - "name": "ShellBarAccessibilityAttributes", - "package": "@ui5/webcomponents-fiori", - "module": "dist/ShellBar.js" - } - ] - }, - "default": "{}", - "description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following fields,\nwhere each field is an object supporting one or more accessibility attributes:\n\n- **logo** - `logo.role` and `logo.name`.\n- **notifications** - `notifications.expanded` and `notifications.hasPopup`.\n- **profile** - `profile.expanded`, `profile.hasPopup` and `profile.name`.\n- **product** - `product.expanded` and `product.hasPopup`.\n- **search** - `search.hasPopup`.\n- **overflow** - `overflow.expanded` and `overflow.hasPopup`.\n- **branding** - `branding.name`.\n\nThe accessibility attributes support the following values:\n\n- **role**: Defines the accessible ARIA role of the logo area.\nAccepts the following string values: `button` or `link`.\n\n- **expanded**: Indicates whether the button, or another grouping element it controls,\nis currently expanded or collapsed.\nAccepts the following string values: `true` or `false`.\n\n- **hasPopup**: Indicates the availability and type of interactive popup element,\nsuch as menu or dialog, that can be triggered by the button.\n\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n- **name**: Defines the accessible ARIA name of the area.\nAccepts any string.", - "privacy": "public", - "_ui5since": "1.10.0" - }, - { - "kind": "method", - "name": "closeOverflow", - "return": { - "type": { - "text": "void" - } + "text": "string | undefined" }, - "description": "Closes the overflow area.\nUseful to manually close the overflow after having suppressed automatic closing with preventDefault() of ShellbarItem's press event", + "description": "Defines the `primaryTitle`.\n\n**Note:** The `primaryTitle` would be hidden on S screen size (less than approx. 700px).", + "default": "undefined", "privacy": "public" }, { "kind": "field", - "name": "logoDomRef", + "name": "productSwitchDomRef", "type": { "text": "HTMLElement | null" }, - "description": "Returns the `logo` DOM ref.", + "description": "Returns the `product-switch` icon DOM ref.", "privacy": "public", "default": "null", "readonly": true, @@ -4796,11 +7229,11 @@ }, { "kind": "field", - "name": "notificationsDomRef", + "name": "profileDomRef", "type": { "text": "HTMLElement | null" }, - "description": "Returns the `notifications` icon DOM ref.", + "description": "Returns the `profile` icon DOM ref.", "privacy": "public", "default": "null", "readonly": true, @@ -4808,100 +7241,93 @@ }, { "kind": "field", - "name": "overflowDomRef", + "name": "secondaryTitle", "type": { - "text": "HTMLElement | null" + "text": "string | undefined" }, - "description": "Returns the `overflow` icon DOM ref.", - "privacy": "public", - "default": "null", - "readonly": true, - "_ui5since": "1.0.0-rc.16" + "description": "Defines the `secondaryTitle`.\n\n**Note:** The `secondaryTitle` would be hidden on S and M screen sizes (less than approx. 1300px).", + "default": "undefined", + "privacy": "public" }, { "kind": "field", - "name": "profileDomRef", + "name": "showNotifications", "type": { - "text": "HTMLElement | null" + "text": "boolean" }, - "description": "Returns the `profile` icon DOM ref.", - "privacy": "public", - "default": "null", - "readonly": true, - "_ui5since": "1.0.0-rc.16" + "default": "false", + "description": "Defines, if the notification icon would be displayed.", + "privacy": "public" }, { "kind": "field", - "name": "productSwitchDomRef", + "name": "showProductSwitch", "type": { - "text": "HTMLElement | null" + "text": "boolean" }, - "description": "Returns the `product-switch` icon DOM ref.", - "privacy": "public", - "default": "null", - "readonly": true, - "_ui5since": "1.0.0-rc.16" + "default": "false", + "description": "Defines, if the product switch icon would be displayed.", + "privacy": "public" }, { - "kind": "method", - "name": "getSearchButtonDomRef", - "return": { - "type": { - "text": "Promise<HTMLElement | null>" - }, - "description": "The search icon DOM ref" + "kind": "field", + "name": "showSearchField", + "type": { + "text": "boolean" }, - "description": "Returns the `search` icon DOM ref.", - "privacy": "public", - "_ui5since": "2.10.0" + "default": "false", + "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.", + "privacy": "public" } ], "events": [ { - "name": "notifications-click", + "name": "content-item-visibility-change", "_ui5privacy": "public", "type": { - "text": "CustomEvent<ShellBarNotificationsClickEventDetail>", + "text": "CustomEvent<ShellBarContentItemVisibilityChangeEventDetail>", "references": [ { - "name": "ShellBarNotificationsClickEventDetail", + "name": "ShellBarContentItemVisibilityChangeEventDetail", "package": "@ui5/webcomponents-fiori", "module": "dist/ShellBar.js" } ] }, - "description": "Fired, when the notification icon is activated.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, + "description": "Fired, when an item from the content slot is hidden or shown.\n**Note:** The `content-item-visibility-change` event is in an experimental state and is a subject to change.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, "_ui5Bubbles": true, + "_ui5since": "2.7.0", "_ui5parameters": [ { "type": { - "text": "HTMLElement" + "text": "Array<HTMLElement>" }, - "name": "targetRef", + "name": "array", "_ui5privacy": "public", - "description": "dom ref of the activated element" + "description": "of all the items that are hidden" } ] }, { - "name": "profile-click", + "name": "logo-click", "_ui5privacy": "public", "type": { - "text": "CustomEvent<ShellBarProfileClickEventDetail>", + "text": "CustomEvent<ShellBarLogoClickEventDetail>", "references": [ { - "name": "ShellBarProfileClickEventDetail", + "name": "ShellBarLogoClickEventDetail", "package": "@ui5/webcomponents-fiori", "module": "dist/ShellBar.js" } ] }, - "description": "Fired, when the profile slot is present.", + "description": "Fired, when the logo is activated.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, "_ui5Bubbles": true, + "_ui5since": "0.10", "_ui5parameters": [ { "type": { @@ -4914,51 +7340,51 @@ ] }, { - "name": "product-switch-click", + "name": "menu-item-click", "_ui5privacy": "public", "type": { - "text": "CustomEvent<ShellBarProductSwitchClickEventDetail>", + "text": "CustomEvent<ShellBarMenuItemClickEventDetail>", "references": [ { - "name": "ShellBarProductSwitchClickEventDetail", + "name": "ShellBarMenuItemClickEventDetail", "package": "@ui5/webcomponents-fiori", "module": "dist/ShellBar.js" } ] }, - "description": "Fired, when the product switch icon is activated.\n\n**Note:** 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()`.", "_ui5Cancelable": true, "_ui5allowPreventDefault": true, "_ui5Bubbles": true, + "_ui5since": "0.10", "_ui5parameters": [ { "type": { "text": "HTMLElement" }, - "name": "targetRef", + "name": "item", "_ui5privacy": "public", - "description": "dom ref of the activated element" + "description": "DOM ref of the activated list item" } ] }, { - "name": "logo-click", + "name": "notifications-click", "_ui5privacy": "public", "type": { - "text": "CustomEvent<ShellBarLogoClickEventDetail>", + "text": "CustomEvent<ShellBarNotificationsClickEventDetail>", "references": [ { - "name": "ShellBarLogoClickEventDetail", + "name": "ShellBarNotificationsClickEventDetail", "package": "@ui5/webcomponents-fiori", "module": "dist/ShellBar.js" } ] }, - "description": "Fired, when the logo is activated.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, + "description": "Fired, when the notification icon is activated.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, "_ui5Bubbles": true, - "_ui5since": "0.10", "_ui5parameters": [ { "type": { @@ -4971,50 +7397,49 @@ ] }, { - "name": "menu-item-click", + "name": "product-switch-click", "_ui5privacy": "public", "type": { - "text": "CustomEvent<ShellBarMenuItemClickEventDetail>", + "text": "CustomEvent<ShellBarProductSwitchClickEventDetail>", "references": [ { - "name": "ShellBarMenuItemClickEventDetail", + "name": "ShellBarProductSwitchClickEventDetail", "package": "@ui5/webcomponents-fiori", "module": "dist/ShellBar.js" } ] }, - "description": "Fired, when a menu item is activated\n\n**Note:** 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()`.", "_ui5Cancelable": true, "_ui5allowPreventDefault": true, "_ui5Bubbles": true, - "_ui5since": "0.10", "_ui5parameters": [ { "type": { "text": "HTMLElement" }, - "name": "item", + "name": "targetRef", "_ui5privacy": "public", - "description": "DOM ref of the activated list item" + "description": "dom ref of the activated element" } ] }, { - "name": "search-button-click", + "name": "profile-click", "_ui5privacy": "public", "type": { - "text": "CustomEvent<ShellBarSearchButtonEventDetail>", + "text": "CustomEvent<ShellBarProfileClickEventDetail>", "references": [ { - "name": "ShellBarSearchButtonEventDetail", + "name": "ShellBarProfileClickEventDetail", "package": "@ui5/webcomponents-fiori", "module": "dist/ShellBar.js" } ] }, - "description": "Fired, when the search button is activated.\n\n**Note:** You can prevent expanding/collapsing of the search field by calling `event.preventDefault()`.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, + "description": "Fired, when the profile slot is present.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, "_ui5Bubbles": true, "_ui5parameters": [ { @@ -5024,43 +7449,42 @@ "name": "targetRef", "_ui5privacy": "public", "description": "dom ref of the activated element" - }, - { - "type": { - "text": "Boolean" - }, - "name": "searchFieldVisible", - "_ui5privacy": "public", - "description": "whether the search field is visible" } ] }, { - "name": "search-field-toggle", + "name": "search-button-click", "_ui5privacy": "public", "type": { - "text": "CustomEvent<ShellBarSearchFieldToggleEventDetail>", + "text": "CustomEvent<ShellBarSearchButtonEventDetail>", "references": [ { - "name": "ShellBarSearchFieldToggleEventDetail", + "name": "ShellBarSearchButtonEventDetail", "package": "@ui5/webcomponents-fiori", "module": "dist/ShellBar.js" } ] }, - "description": "Fired, when the search field is expanded or collapsed.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, + "description": "Fired, when the search button is activated.\n\n**Note:** You can prevent expanding/collapsing of the search field by calling `event.preventDefault()`.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, "_ui5Bubbles": true, - "_ui5since": "2.10.0", "_ui5parameters": [ { "type": { "text": "Boolean" }, - "name": "expanded", + "name": "searchFieldVisible", "_ui5privacy": "public", - "description": "whether the search field is expanded" + "description": "whether the search field is visible" + }, + { + "type": { + "text": "HTMLElement" + }, + "name": "targetRef", + "_ui5privacy": "public", + "description": "dom ref of the activated element" } ] }, @@ -5094,43 +7518,43 @@ ] }, { - "name": "content-item-visibility-change", + "name": "search-field-toggle", "_ui5privacy": "public", "type": { - "text": "CustomEvent<ShellBarContentItemVisibilityChangeEventDetail>", + "text": "CustomEvent<ShellBarSearchFieldToggleEventDetail>", "references": [ { - "name": "ShellBarContentItemVisibilityChangeEventDetail", + "name": "ShellBarSearchFieldToggleEventDetail", "package": "@ui5/webcomponents-fiori", "module": "dist/ShellBar.js" } ] }, - "description": "Fired, when an item from the content slot is hidden or shown.\n**Note:** The `content-item-visibility-change` event is in an experimental state and is a subject to change.", + "description": "Fired, when the search field is expanded or collapsed.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, "_ui5Bubbles": true, - "_ui5since": "2.7.0", + "_ui5since": "2.10.0", "_ui5parameters": [ { "type": { - "text": "Array<HTMLElement>" + "text": "Boolean" }, - "name": "array", + "name": "expanded", "_ui5privacy": "public", - "description": "of all the items that are hidden" + "description": "whether the search field is expanded" } ] } ], "attributes": [ { - "description": "Defines the visibility state of the search button.\n\n**Note:** The `hideSearchButton` property is in an experimental state and is a subject to change.", - "name": "hide-search-button", - "default": "false", - "fieldName": "hideSearchButton", + "description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following fields,\nwhere each field is an object supporting one or more accessibility attributes:\n\n- **logo** - `logo.role` and `logo.name`.\n- **notifications** - `notifications.expanded` and `notifications.hasPopup`.\n- **profile** - `profile.expanded`, `profile.hasPopup` and `profile.name`.\n- **product** - `product.expanded` and `product.hasPopup`.\n- **search** - `search.hasPopup`.\n- **overflow** - `overflow.expanded` and `overflow.hasPopup`.\n- **branding** - `branding.name`.\n\nThe accessibility attributes support the following values:\n\n- **role**: Defines the accessible ARIA role of the logo area.\nAccepts the following string values: `button` or `link`.\n\n- **expanded**: Indicates whether the button, or another grouping element it controls,\nis currently expanded or collapsed.\nAccepts the following string values: `true` or `false`.\n\n- **hasPopup**: Indicates the availability and type of interactive popup element,\nsuch as menu or dialog, that can be triggered by the button.\n\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n- **name**: Defines the accessible ARIA name of the area.\nAccepts any string.", + "name": "accessibility-attributes", + "default": "{}", + "fieldName": "accessibilityAttributes", "type": { - "text": "boolean" + "text": "ShellBarAccessibilityAttributes" } }, { @@ -5143,21 +7567,21 @@ } }, { - "description": "Defines the `primaryTitle`.\n\n**Note:** The `primaryTitle` would be hidden on S screen size (less than approx. 700px).", - "name": "primary-title", - "default": "undefined", - "fieldName": "primaryTitle", + "description": "Defines the visibility state of the search button.\n\n**Note:** The `hideSearchButton` property is in an experimental state and is a subject to change.", + "name": "hide-search-button", + "default": "false", + "fieldName": "hideSearchButton", "type": { - "text": "string | undefined" + "text": "boolean" } }, { - "description": "Defines the `secondaryTitle`.\n\n**Note:** The `secondaryTitle` would be hidden on S and M screen sizes (less than approx. 1300px).", - "name": "secondary-title", - "default": "undefined", - "fieldName": "secondaryTitle", + "description": "Returns the `logo` DOM ref.", + "name": "logo-dom-ref", + "default": "null", + "fieldName": "logoDomRef", "type": { - "text": "string | undefined" + "text": "any" } }, { @@ -5170,84 +7594,84 @@ } }, { - "description": "Defines, if the notification icon would be displayed.", - "name": "show-notifications", - "default": "false", - "fieldName": "showNotifications", + "description": "Returns the `notifications` icon DOM ref.", + "name": "notifications-dom-ref", + "default": "null", + "fieldName": "notificationsDomRef", "type": { - "text": "boolean" + "text": "any" } }, { - "description": "Defines, if the product switch icon would be displayed.", - "name": "show-product-switch", - "default": "false", - "fieldName": "showProductSwitch", + "description": "Returns the `overflow` icon DOM ref.", + "name": "overflow-dom-ref", + "default": "null", + "fieldName": "overflowDomRef", "type": { - "text": "boolean" + "text": "any" } }, { - "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.", - "name": "show-search-field", - "default": "false", - "fieldName": "showSearchField", + "description": "Defines the `primaryTitle`.\n\n**Note:** The `primaryTitle` would be hidden on S screen size (less than approx. 700px).", + "name": "primary-title", + "default": "undefined", + "fieldName": "primaryTitle", "type": { - "text": "boolean" + "text": "string | undefined" } }, { - "description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following fields,\nwhere each field is an object supporting one or more accessibility attributes:\n\n- **logo** - `logo.role` and `logo.name`.\n- **notifications** - `notifications.expanded` and `notifications.hasPopup`.\n- **profile** - `profile.expanded`, `profile.hasPopup` and `profile.name`.\n- **product** - `product.expanded` and `product.hasPopup`.\n- **search** - `search.hasPopup`.\n- **overflow** - `overflow.expanded` and `overflow.hasPopup`.\n- **branding** - `branding.name`.\n\nThe accessibility attributes support the following values:\n\n- **role**: Defines the accessible ARIA role of the logo area.\nAccepts the following string values: `button` or `link`.\n\n- **expanded**: Indicates whether the button, or another grouping element it controls,\nis currently expanded or collapsed.\nAccepts the following string values: `true` or `false`.\n\n- **hasPopup**: Indicates the availability and type of interactive popup element,\nsuch as menu or dialog, that can be triggered by the button.\n\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n- **name**: Defines the accessible ARIA name of the area.\nAccepts any string.", - "name": "accessibility-attributes", - "default": "{}", - "fieldName": "accessibilityAttributes", + "description": "Returns the `product-switch` icon DOM ref.", + "name": "product-switch-dom-ref", + "default": "null", + "fieldName": "productSwitchDomRef", "type": { - "text": "ShellBarAccessibilityAttributes" + "text": "any" } }, { - "description": "Returns the `logo` DOM ref.", - "name": "logo-dom-ref", + "description": "Returns the `profile` icon DOM ref.", + "name": "profile-dom-ref", "default": "null", - "fieldName": "logoDomRef", + "fieldName": "profileDomRef", "type": { "text": "any" } }, { - "description": "Returns the `notifications` icon DOM ref.", - "name": "notifications-dom-ref", - "default": "null", - "fieldName": "notificationsDomRef", + "description": "Defines the `secondaryTitle`.\n\n**Note:** The `secondaryTitle` would be hidden on S and M screen sizes (less than approx. 1300px).", + "name": "secondary-title", + "default": "undefined", + "fieldName": "secondaryTitle", "type": { - "text": "any" + "text": "string | undefined" } }, { - "description": "Returns the `overflow` icon DOM ref.", - "name": "overflow-dom-ref", - "default": "null", - "fieldName": "overflowDomRef", + "description": "Defines, if the notification icon would be displayed.", + "name": "show-notifications", + "default": "false", + "fieldName": "showNotifications", "type": { - "text": "any" + "text": "boolean" } }, { - "description": "Returns the `profile` icon DOM ref.", - "name": "profile-dom-ref", - "default": "null", - "fieldName": "profileDomRef", + "description": "Defines, if the product switch icon would be displayed.", + "name": "show-product-switch", + "default": "false", + "fieldName": "showProductSwitch", "type": { - "text": "any" + "text": "boolean" } }, { - "description": "Returns the `product-switch` icon DOM ref.", - "name": "product-switch-dom-ref", - "default": "null", - "fieldName": "productSwitchDomRef", + "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.", + "name": "show-search-field", + "default": "false", + "fieldName": "showSearchField", "type": { - "text": "any" + "text": "boolean" } } ], @@ -5311,31 +7735,31 @@ "members": [ { "kind": "field", - "name": "href", + "name": "accessibleName", "type": { "text": "string | undefined" }, - "description": "Defines the component href.\n\n**Note:** Standard hyperlink behavior is supported.", + "description": "Defines the text alternative of the component.\nIf not provided a default text alternative will be set, if present.", "default": "undefined", "privacy": "public" }, { "kind": "field", - "name": "target", + "name": "href", "type": { "text": "string | undefined" }, - "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.**", + "description": "Defines the component href.\n\n**Note:** Standard hyperlink behavior is supported.", "default": "undefined", "privacy": "public" }, { "kind": "field", - "name": "accessibleName", + "name": "target", "type": { "text": "string | undefined" }, - "description": "Defines the text alternative of the component.\nIf not provided a default text alternative will be set, if present.", + "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.**", "default": "undefined", "privacy": "public" } @@ -5355,28 +7779,28 @@ ], "attributes": [ { - "description": "Defines the component href.\n\n**Note:** Standard hyperlink behavior is supported.", - "name": "href", + "description": "Defines the text alternative of the component.\nIf not provided a default text alternative will be set, if present.", + "name": "accessible-name", "default": "undefined", - "fieldName": "href", + "fieldName": "accessibleName", "type": { "text": "string | undefined" } }, { - "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.**", - "name": "target", + "description": "Defines the component href.\n\n**Note:** Standard hyperlink behavior is supported.", + "name": "href", "default": "undefined", - "fieldName": "target", + "fieldName": "href", "type": { "text": "string | undefined" } }, { - "description": "Defines the text alternative of the component.\nIf not provided a default text alternative will be set, if present.", - "name": "accessible-name", + "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.**", + "name": "target", "default": "undefined", - "fieldName": "accessibleName", + "fieldName": "target", "type": { "text": "string | undefined" } @@ -5419,57 +7843,57 @@ "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\n`import \"@ui5/webcomponents-fiori/dist/ShellBarItem.js\";`", + "description": "The `ui5-shellbar-item` represents a custom item for `ui5-shellbar`.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/ShellBarItem.js\";`", "name": "ShellBarItem", "members": [ { "kind": "field", - "name": "icon", + "name": "accessibilityAttributes", "type": { - "text": "string | undefined" + "text": "ShellBarItemAccessibilityAttributes", + "references": [ + { + "name": "ShellBarItemAccessibilityAttributes", + "package": "@ui5/webcomponents-fiori", + "module": "dist/ShellBarItem.js" + } + ] }, - "description": "Defines the name of the item's icon.", - "default": "undefined", - "privacy": "public" + "default": "{}", + "description": "Defines additional accessibility attributes on Shellbar Items.\n\nThe accessibility attributes support the following values:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls,\nis currently expanded or collapsed.\nAccepts the following string values: `true` or `false`.\n\n- **hasPopup**: Indicates the availability and type of interactive popup element,\nsuch as menu or dialog, that can be triggered by the button.\n\n- **controls**: Identifies the element (or elements) whose contents\nor presence are controlled by the component.\nAccepts a lowercase string value, referencing the ID of the element it controls.", + "privacy": "public", + "_ui5since": "2.9.0" }, { "kind": "field", - "name": "text", + "name": "count", "type": { "text": "string | undefined" }, - "description": "Defines the item text.\n\n**Note:** The text is only displayed inside the overflow popover list view.", + "description": "Defines the count displayed in badge.", "default": "undefined", - "privacy": "public" + "privacy": "public", + "_ui5since": "1.0.0-rc.6" }, { "kind": "field", - "name": "count", + "name": "icon", "type": { "text": "string | undefined" }, - "description": "Defines the count displayed in the top-right corner.", + "description": "Defines the item's icon.", "default": "undefined", - "privacy": "public", - "_ui5since": "1.0.0-rc.6" + "privacy": "public" }, { "kind": "field", - "name": "accessibilityAttributes", + "name": "text", "type": { - "text": "ShellBarItemAccessibilityAttributes", - "references": [ - { - "name": "ShellBarItemAccessibilityAttributes", - "package": "@ui5/webcomponents-fiori", - "module": "dist/ShellBarItem.js" - } - ] + "text": "string | undefined" }, - "default": "{}", - "description": "Defines additional accessibility attributes on Shellbar Items.\n\nThe accessibility attributes support the following values:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls,\nis currently expanded or collapsed.\nAccepts the following string values: `true` or `false`.\n\n- **hasPopup**: Indicates the availability and type of interactive popup element,\nsuch as menu or dialog, that can be triggered by the button.\n\n- **controls**: Identifies the element (or elements) whose contents\nor presence are controlled by the component.\nAccepts a lowercase string value, referencing the ID of the element it controls.", - "privacy": "public", - "_ui5since": "2.9.0" + "description": "Defines the item text.\n\n**Note:** The text is only displayed inside the overflow popover list view.", + "default": "undefined", + "privacy": "public" } ], "events": [ @@ -5486,7 +7910,7 @@ } ] }, - "description": "Fired, when the item is pressed.", + "description": "Fired when the item is clicked.", "_ui5Cancelable": true, "_ui5allowPreventDefault": true, "_ui5Bubbles": true, @@ -5504,39 +7928,39 @@ ], "attributes": [ { - "description": "Defines the name of the item's icon.", - "name": "icon", - "default": "undefined", - "fieldName": "icon", + "description": "Defines additional accessibility attributes on Shellbar Items.\n\nThe accessibility attributes support the following values:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls,\nis currently expanded or collapsed.\nAccepts the following string values: `true` or `false`.\n\n- **hasPopup**: Indicates the availability and type of interactive popup element,\nsuch as menu or dialog, that can be triggered by the button.\n\n- **controls**: Identifies the element (or elements) whose contents\nor presence are controlled by the component.\nAccepts a lowercase string value, referencing the ID of the element it controls.", + "name": "accessibility-attributes", + "default": "{}", + "fieldName": "accessibilityAttributes", "type": { - "text": "string | undefined" + "text": "ShellBarItemAccessibilityAttributes" } }, { - "description": "Defines the item text.\n\n**Note:** The text is only displayed inside the overflow popover list view.", - "name": "text", + "description": "Defines the count displayed in badge.", + "name": "count", "default": "undefined", - "fieldName": "text", + "fieldName": "count", "type": { "text": "string | undefined" } }, { - "description": "Defines the count displayed in the top-right corner.", - "name": "count", + "description": "Defines the item's icon.", + "name": "icon", "default": "undefined", - "fieldName": "count", + "fieldName": "icon", "type": { "text": "string | undefined" } }, { - "description": "Defines additional accessibility attributes on Shellbar Items.\n\nThe accessibility attributes support the following values:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls,\nis currently expanded or collapsed.\nAccepts the following string values: `true` or `false`.\n\n- **hasPopup**: Indicates the availability and type of interactive popup element,\nsuch as menu or dialog, that can be triggered by the button.\n\n- **controls**: Identifies the element (or elements) whose contents\nor presence are controlled by the component.\nAccepts a lowercase string value, referencing the ID of the element it controls.", - "name": "accessibility-attributes", - "default": "{}", - "fieldName": "accessibilityAttributes", + "description": "Defines the item text.\n\n**Note:** The text is only displayed inside the overflow popover list view.", + "name": "text", + "default": "undefined", + "fieldName": "text", "type": { - "text": "ShellBarItemAccessibilityAttributes" + "text": "string | undefined" } } ], @@ -5547,8 +7971,7 @@ }, "tagName": "ui5-shellbar-item", "customElement": true, - "_ui5privacy": "public", - "_ui5abstract": true + "_ui5privacy": "public" } ], "exports": [ @@ -5591,88 +8014,64 @@ }, { "kind": "field", - "name": "loading", + "name": "accessibleDescription", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Indicates whether a loading indicator should be shown in the popup.", + "description": "Defines the accessible ARIA description of the field.", "privacy": "public", - "inheritedFrom": { - "name": "Search", - "module": "dist/Search.js" - } + "default": "undefined" }, { "kind": "field", - "name": "noTypeahead", + "name": "accessibleName", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Defines whether the value will be autcompleted to match an item.", + "description": "Defines the accessible ARIA name of the component.", "privacy": "public", - "inheritedFrom": { - "name": "Search", - "module": "dist/Search.js" - } + "default": "undefined" }, { "kind": "field", - "name": "open", + "name": "fieldLoading", "type": { "text": "boolean" }, "default": "false", - "description": "Indicates whether the items picker is open.", + "description": "Indicates whether a loading indicator should be shown in the input field.", "privacy": "public", - "inheritedFrom": { - "name": "Search", - "module": "dist/Search.js" - } + "_ui5since": "2.19.0" }, { "kind": "field", - "name": "fieldLoading", + "name": "loading", "type": { "text": "boolean" }, "default": "false", - "description": "Indicates whether a loading indicator should be shown in the input field.", - "privacy": "public", - "_ui5since": "2.19.0", - "inheritedFrom": { - "name": "SearchField", - "module": "dist/SearchField.js" - } + "description": "Indicates whether a loading indicator should be shown in the popup.", + "privacy": "public" }, { "kind": "field", - "name": "showClearIcon", + "name": "noTypeahead", "type": { "text": "boolean" }, "default": "false", - "description": "Defines whether the clear icon of the search will be shown.", - "privacy": "public", - "inheritedFrom": { - "name": "SearchField", - "module": "dist/SearchField.js" - } + "description": "Defines whether the value will be autcompleted to match an item.", + "privacy": "public" }, { "kind": "field", - "name": "value", + "name": "open", "type": { - "text": "string" + "text": "boolean" }, - "default": "\"\"", - "description": "Defines the value of the component.\n\n**Note:** The property is updated upon typing.", - "privacy": "public", - "inheritedFrom": { - "name": "SearchField", - "module": "dist/SearchField.js" - } + "default": "false", + "description": "Indicates whether the items picker is open.", + "privacy": "public" }, { "kind": "field", @@ -5682,54 +8081,38 @@ }, "description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.", "default": "undefined", - "privacy": "public", - "inheritedFrom": { - "name": "SearchField", - "module": "dist/SearchField.js" - } + "privacy": "public" }, { "kind": "field", - "name": "accessibleName", + "name": "scopeValue", "type": { "text": "string | undefined" }, - "description": "Defines the accessible ARIA name of the component.", + "description": "Defines the value of the component:\n\nApplications are responsible for setting the correct scope value.\n\n**Note:** If the given value does not match any existing scopes,\nno scope will be selected and the SearchField scope component will be displayed as empty.", "privacy": "public", - "default": "undefined", - "inheritedFrom": { - "name": "SearchField", - "module": "dist/SearchField.js" - } + "default": "\"\"", + "_ui5since": "2.18.0" }, { "kind": "field", - "name": "accessibleDescription", + "name": "showClearIcon", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Defines the accessible ARIA description of the field.", - "privacy": "public", - "default": "undefined", - "inheritedFrom": { - "name": "SearchField", - "module": "dist/SearchField.js" - } + "default": "false", + "description": "Defines whether the clear icon of the search will be shown.", + "privacy": "public" }, { "kind": "field", - "name": "scopeValue", + "name": "value", "type": { - "text": "string | undefined" + "text": "string" }, - "description": "Defines the value of the component:\n\nApplications are responsible for setting the correct scope value.\n\n**Note:** If the given value does not match any existing scopes,\nno scope will be selected and the SearchField scope component will be displayed as empty.", - "privacy": "public", "default": "\"\"", - "_ui5since": "2.18.0", - "inheritedFrom": { - "name": "SearchField", - "module": "dist/SearchField.js" - } + "description": "Defines the value of the component.\n\n**Note:** The property is updated upon typing.", + "privacy": "public" } ], "attributes": [ @@ -5743,81 +8126,57 @@ } }, { - "description": "Indicates whether a loading indicator should be shown in the popup.", - "name": "loading", - "default": "false", - "fieldName": "loading", + "description": "Defines the accessible ARIA description of the field.", + "name": "accessible-description", + "default": "undefined", + "fieldName": "accessibleDescription", "type": { - "text": "boolean" - }, - "inheritedFrom": { - "name": "Search", - "module": "dist/Search.js" + "text": "string | undefined" } }, { - "description": "Defines whether the value will be autcompleted to match an item.", - "name": "no-typeahead", - "default": "false", - "fieldName": "noTypeahead", + "description": "Defines the accessible ARIA name of the component.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", "type": { - "text": "boolean" - }, - "inheritedFrom": { - "name": "Search", - "module": "dist/Search.js" + "text": "string | undefined" } }, { - "description": "Indicates whether the items picker is open.", - "name": "open", + "description": "Indicates whether a loading indicator should be shown in the input field.", + "name": "field-loading", "default": "false", - "fieldName": "open", + "fieldName": "fieldLoading", "type": { "text": "boolean" - }, - "inheritedFrom": { - "name": "Search", - "module": "dist/Search.js" } }, { - "description": "Indicates whether a loading indicator should be shown in the input field.", - "name": "field-loading", + "description": "Indicates whether a loading indicator should be shown in the popup.", + "name": "loading", "default": "false", - "fieldName": "fieldLoading", + "fieldName": "loading", "type": { "text": "boolean" - }, - "inheritedFrom": { - "name": "SearchField", - "module": "dist/SearchField.js" } }, { - "description": "Defines whether the clear icon of the search will be shown.", - "name": "show-clear-icon", + "description": "Defines whether the value will be autcompleted to match an item.", + "name": "no-typeahead", "default": "false", - "fieldName": "showClearIcon", + "fieldName": "noTypeahead", "type": { "text": "boolean" - }, - "inheritedFrom": { - "name": "SearchField", - "module": "dist/SearchField.js" } }, { - "description": "Defines the value of the component.\n\n**Note:** The property is updated upon typing.", - "name": "value", - "default": "\"\"", - "fieldName": "value", + "description": "Indicates whether the items picker is open.", + "name": "open", + "default": "false", + "fieldName": "open", "type": { - "text": "string" - }, - "inheritedFrom": { - "name": "SearchField", - "module": "dist/SearchField.js" + "text": "boolean" } }, { @@ -5827,49 +8186,33 @@ "fieldName": "placeholder", "type": { "text": "string | undefined" - }, - "inheritedFrom": { - "name": "SearchField", - "module": "dist/SearchField.js" } }, { - "description": "Defines the accessible ARIA name of the component.", - "name": "accessible-name", - "default": "undefined", - "fieldName": "accessibleName", + "description": "Defines the value of the component:\n\nApplications are responsible for setting the correct scope value.\n\n**Note:** If the given value does not match any existing scopes,\nno scope will be selected and the SearchField scope component will be displayed as empty.", + "name": "scope-value", + "default": "\"\"", + "fieldName": "scopeValue", "type": { "text": "string | undefined" - }, - "inheritedFrom": { - "name": "SearchField", - "module": "dist/SearchField.js" } }, { - "description": "Defines the accessible ARIA description of the field.", - "name": "accessible-description", - "default": "undefined", - "fieldName": "accessibleDescription", + "description": "Defines whether the clear icon of the search will be shown.", + "name": "show-clear-icon", + "default": "false", + "fieldName": "showClearIcon", "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "SearchField", - "module": "dist/SearchField.js" + "text": "boolean" } }, - { - "description": "Defines the value of the component:\n\nApplications are responsible for setting the correct scope value.\n\n**Note:** If the given value does not match any existing scopes,\nno scope will be selected and the SearchField scope component will be displayed as empty.", - "name": "scope-value", + { + "description": "Defines the value of the component.\n\n**Note:** The property is updated upon typing.", + "name": "value", "default": "\"\"", - "fieldName": "scopeValue", + "fieldName": "value", "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "SearchField", - "module": "dist/SearchField.js" + "text": "string" } } ], @@ -5884,6 +8227,21 @@ "_ui5since": "2.10.0", "_ui5privacy": "public", "slots": [ + { + "name": "action", + "description": "Defines the popup footer action button.", + "_ui5type": { + "text": "Array<Button>", + "references": [ + { + "name": "Button", + "package": "@ui5/webcomponents", + "module": "dist/Button.js" + } + ] + }, + "_ui5privacy": "public" + }, { "name": "default", "description": "Defines the Search suggestion items.", @@ -5891,15 +8249,12 @@ "_ui5type": { "text": "Array<SearchItem | SearchItemGroup>" }, - "_ui5privacy": "public", - "inheritedFrom": { - "name": "Search", - "module": "dist/Search.js" - } + "_ui5privacy": "public" }, { - "name": "action", - "description": "Defines the popup footer action button.", + "name": "filterButton", + "description": "Defines the filter button slot, used to display an additional filtering button.\nThis slot is intended for passing a `ui5-button` with a filter icon to provide extended filtering options.\n\n**Note:** Scope button and Filter button are mutually exclusive.", + "_ui5since": "2.11.0", "_ui5type": { "text": "Array<Button>", "references": [ @@ -5910,11 +8265,7 @@ } ] }, - "_ui5privacy": "public", - "inheritedFrom": { - "name": "Search", - "module": "dist/Search.js" - } + "_ui5privacy": "public" }, { "name": "illustration", @@ -5929,11 +8280,7 @@ } ] }, - "_ui5privacy": "public", - "inheritedFrom": { - "name": "Search", - "module": "dist/Search.js" - } + "_ui5privacy": "public" }, { "name": "messageArea", @@ -5948,11 +8295,7 @@ } ] }, - "_ui5privacy": "public", - "inheritedFrom": { - "name": "Search", - "module": "dist/Search.js" - } + "_ui5privacy": "public" }, { "name": "scopes", @@ -5967,78 +8310,42 @@ } ] }, - "_ui5privacy": "public", - "inheritedFrom": { - "name": "SearchField", - "module": "dist/SearchField.js" - } - }, - { - "name": "filterButton", - "description": "Defines the filter button slot, used to display an additional filtering button.\nThis slot is intended for passing a `ui5-button` with a filter icon to provide extended filtering options.\n\n**Note:** Scope button and Filter button are mutually exclusive.", - "_ui5since": "2.11.0", - "_ui5type": { - "text": "Array<Button>", - "references": [ - { - "name": "Button", - "package": "@ui5/webcomponents", - "module": "dist/Button.js" - } - ] - }, - "_ui5privacy": "public", - "inheritedFrom": { - "name": "SearchField", - "module": "dist/SearchField.js" - } + "_ui5privacy": "public" } ], "events": [ { - "name": "open", + "name": "close", "_ui5privacy": "public", "type": { "text": "CustomEvent" }, - "description": "Fired when the popup is opened.", + "description": "Fired when the popup is closed.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, - "_ui5Bubbles": false, - "inheritedFrom": { - "name": "Search", - "module": "dist/Search.js" - } + "_ui5Bubbles": false }, { - "name": "close", + "name": "input", "_ui5privacy": "public", "type": { "text": "CustomEvent" }, - "description": "Fired when the popup is closed.", + "description": "Fired when typing in input or clear icon is pressed.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, - "_ui5Bubbles": false, - "inheritedFrom": { - "name": "Search", - "module": "dist/Search.js" - } + "_ui5Bubbles": true }, { - "name": "input", + "name": "open", "_ui5privacy": "public", "type": { "text": "CustomEvent" }, - "description": "Fired when typing in input or clear icon is pressed.", + "description": "Fired when the popup is opened.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "inheritedFrom": { - "name": "SearchField", - "module": "dist/SearchField.js" - } + "_ui5Bubbles": false }, { "name": "scope-change", @@ -6066,11 +8373,7 @@ "_ui5privacy": "public", "description": "The newly selected scope" } - ], - "inheritedFrom": { - "name": "SearchField", - "module": "dist/SearchField.js" - } + ] }, { "name": "search", @@ -6081,11 +8384,7 @@ "description": "Fired when the user has triggered search with Enter key or Search Button press.", "_ui5Cancelable": true, "_ui5allowPreventDefault": true, - "_ui5Bubbles": true, - "inheritedFrom": { - "name": "SearchField", - "module": "dist/SearchField.js" - } + "_ui5Bubbles": true } ] } @@ -6155,7 +8454,7 @@ "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### Usage\n\nUse the available `ui5-side-navigation-group`, `ui5-side-navigation-item`\nand `ui5-side-navigation-sub-item` components to build your menu.\nThe items can consist of text only or an icon with text. The use or non-use of icons must be consistent for all items on one level.\nYou must not combine entries with and without icons on the same level. We strongly recommend that you do not use icons on the second level.\n\nThe `ui5-side-navigation` component is designed to be used within a `ui5-navigation-layout` component to ensure an optimal user experience.\n\nUsing it standalone may not match the intended design and functionality.\nFor example, the side navigation may not exhibit the correct behavior on smaller screens.\nAdditionally, the padding of the `ui5-shellbar` will not match the padding of the side navigation.\n\n### Keyboard Handling\n\n### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigation.js\"`\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigationGroup.js\";` (for `ui5-side-navigation-group`)\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigationItem.js\";` (for `ui5-side-navigation-item`)\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js\";` (for `ui5-side-navigation-sub-item`)", + "description": "### Overview\n\nThe `SideNavigation` is used as a standard menu in applications.\nIt consists of three containers: header (top-aligned), main navigation section (top-aligned) and the secondary section (bottom-aligned).\n\n - The header is meant for displaying user related information - profile data, avatar, etc.\n - The main navigation section is related to the user's current work context.\n - The secondary section is mostly used to link additional information that may be of interest (legal information, developer communities, external help, contact information and so on).\n\n### Usage\n\nUse the available `ui5-side-navigation-group`, `ui5-side-navigation-item`\nand `ui5-side-navigation-sub-item` components to build your menu.\nThe items can consist of text only or an icon with text. The use or non-use of icons must be consistent for all items on one level.\nYou must not combine entries with and without icons on the same level. We strongly recommend that you do not use icons on the second level.\n\nThe `ui5-side-navigation` component is designed to be used within a `ui5-navigation-layout` component to ensure an optimal user experience.\n\nUsing it standalone may not match the intended design and functionality.\nFor example, the side navigation may not exhibit the correct behavior on smaller screens.\nAdditionally, the padding of the `ui5-shellbar` will not match the padding of the side navigation.\n\n### Keyboard Handling\n\n### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigation.js\"`\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigationGroup.js\";` (for `ui5-side-navigation-group`)\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigationItem.js\";` (for `ui5-side-navigation-item`)\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js\";` (for `ui5-side-navigation-sub-item`)", "name": "SideNavigation", "slots": [ { @@ -6200,16 +8499,6 @@ } ], "members": [ - { - "kind": "field", - "name": "collapsed", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines whether the `ui5-side-navigation` is expanded or collapsed.\n\n**Note:** On small screens (screen width of 599px or less) the collapsed mode is not supported, and in\nexpanded mode the side navigation will take the whole width of the screen.\nThe `ui5-side-navigation` component is intended to be used within a `ui5-navigation-layout`\ncomponent to ensure proper responsive behavior. If you choose not to use the\n`ui5-navigation-layout`, you will need to implement the appropriate responsive patterns yourself,\nparticularly for smaller screens where the collapsed mode should not be used.", - "privacy": "public" - }, { "kind": "field", "name": "accessibleName", @@ -6220,9 +8509,55 @@ "default": "undefined", "privacy": "public", "_ui5since": "2.9.0" + }, + { + "kind": "field", + "name": "collapsed", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the `ui5-side-navigation` is expanded or collapsed.\n\n**Note:** On small screens (screen width of 599px or less) the collapsed mode is not supported, and in\nexpanded mode the side navigation will take the whole width of the screen.\nThe `ui5-side-navigation` component is intended to be used within a `ui5-navigation-layout`\ncomponent to ensure proper responsive behavior. If you choose not to use the\n`ui5-navigation-layout`, you will need to implement the appropriate responsive patterns yourself,\nparticularly for smaller screens where the collapsed mode should not be used.", + "privacy": "public" } ], "events": [ + { + "name": "item-click", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<SideNavigationItemClickEventDetail>", + "references": [ + { + "name": "SideNavigationItemClickEventDetail", + "package": "@ui5/webcomponents-fiori", + "module": "dist/SideNavigation.js" + } + ] + }, + "description": "Fired when an item is clicked.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true, + "_ui5since": "2.20.0", + "_ui5parameters": [ + { + "type": { + "text": "SideNavigationSelectableItemBase", + "references": [ + { + "name": "SideNavigationSelectableItemBase", + "package": "@ui5/webcomponents-fiori", + "module": "dist/SideNavigationSelectableItemBase.js" + } + ] + }, + "name": "item", + "_ui5privacy": "public", + "description": "The clicked item." + } + ] + }, { "name": "selection-change", "_ui5privacy": "public", @@ -6236,7 +8571,7 @@ } ] }, - "description": "Fired when the selection has changed via user interaction", + "description": "Fired when the selection has changed via user interaction.", "_ui5Cancelable": true, "_ui5allowPreventDefault": true, "_ui5Bubbles": true, @@ -6254,21 +8589,12 @@ }, "name": "item", "_ui5privacy": "public", - "description": "the clicked item." + "description": "The selected item." } ] } ], "attributes": [ - { - "description": "Defines whether the `ui5-side-navigation` is expanded or collapsed.\n\n**Note:** On small screens (screen width of 599px or less) the collapsed mode is not supported, and in\nexpanded mode the side navigation will take the whole width of the screen.\nThe `ui5-side-navigation` component is intended to be used within a `ui5-navigation-layout`\ncomponent to ensure proper responsive behavior. If you choose not to use the\n`ui5-navigation-layout`, you will need to implement the appropriate responsive patterns yourself,\nparticularly for smaller screens where the collapsed mode should not be used.", - "name": "collapsed", - "default": "false", - "fieldName": "collapsed", - "type": { - "text": "boolean" - } - }, { "description": "Defines the accessible ARIA name of the component.", "name": "accessible-name", @@ -6277,6 +8603,15 @@ "type": { "text": "string | undefined" } + }, + { + "description": "Defines whether the `ui5-side-navigation` is expanded or collapsed.\n\n**Note:** On small screens (screen width of 599px or less) the collapsed mode is not supported, and in\nexpanded mode the side navigation will take the whole width of the screen.\nThe `ui5-side-navigation` component is intended to be used within a `ui5-navigation-layout`\ncomponent to ensure proper responsive behavior. If you choose not to use the\n`ui5-navigation-layout`, you will need to implement the appropriate responsive patterns yourself,\nparticularly for smaller screens where the collapsed mode should not be used.", + "name": "collapsed", + "default": "false", + "fieldName": "collapsed", + "type": { + "text": "boolean" + } } ], "superclass": { @@ -6336,6 +8671,17 @@ } ], "members": [ + { + "kind": "field", + "name": "disabled", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.", + "privacy": "public", + "_ui5since": "1.19.0" + }, { "kind": "field", "name": "expanded", @@ -6354,26 +8700,7 @@ }, "description": "Defines the text of the item.", "privacy": "public", - "default": "undefined", - "inheritedFrom": { - "name": "SideNavigationItemBase", - "module": "dist/SideNavigationItemBase.js" - } - }, - { - "kind": "field", - "name": "disabled", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.", - "privacy": "public", - "_ui5since": "1.19.0", - "inheritedFrom": { - "name": "SideNavigationItemBase", - "module": "dist/SideNavigationItemBase.js" - } + "default": "undefined" }, { "kind": "field", @@ -6384,14 +8711,19 @@ "description": "Defines the tooltip of the component.\n\nA tooltip attribute should be provided, in order to represent meaning/function,\nwhen the component is collapsed (\"icon only\" design is visualized) or the item text is truncated.", "default": "undefined", "privacy": "public", - "_ui5since": "2.0.0", - "inheritedFrom": { - "name": "SideNavigationItemBase", - "module": "dist/SideNavigationItemBase.js" - } + "_ui5since": "2.0.0" } ], "attributes": [ + { + "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.", + "name": "disabled", + "default": "false", + "fieldName": "disabled", + "type": { + "text": "boolean" + } + }, { "description": "Defines if the item is expanded", "name": "expanded", @@ -6408,23 +8740,6 @@ "fieldName": "text", "type": { "text": "string | undefined" - }, - "inheritedFrom": { - "name": "SideNavigationItemBase", - "module": "dist/SideNavigationItemBase.js" - } - }, - { - "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.", - "name": "disabled", - "default": "false", - "fieldName": "disabled", - "type": { - "text": "boolean" - }, - "inheritedFrom": { - "name": "SideNavigationItemBase", - "module": "dist/SideNavigationItemBase.js" } }, { @@ -6434,10 +8749,6 @@ "fieldName": "tooltip", "type": { "text": "string | undefined" - }, - "inheritedFrom": { - "name": "SideNavigationItemBase", - "module": "dist/SideNavigationItemBase.js" } } ], @@ -6499,6 +8810,53 @@ } ], "members": [ + { + "kind": "field", + "name": "accessibilityAttributes", + "type": { + "text": "SideNavigationItemAccessibilityAttributes", + "references": [ + { + "name": "SideNavigationItemAccessibilityAttributes", + "package": "@ui5/webcomponents-fiori", + "module": "dist/SideNavigationSelectableItemBase.js" + } + ] + }, + "default": "{}", + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n**Note:** Do not use it on parent items, as it will be overridden if the item is in the overflow menu.", + "privacy": "public", + "_ui5since": "2.7.0" + }, + { + "kind": "field", + "name": "design", + "type": { + "text": "SideNavigationItemDesign", + "references": [ + { + "name": "SideNavigationItemDesign", + "package": "@ui5/webcomponents-fiori", + "module": "dist/types/SideNavigationItemDesign.js" + } + ] + }, + "default": "\"Default\"", + "description": "Item design.\n\n**Note:** Items with \"Action\" design must not have sub-items.", + "privacy": "public", + "_ui5since": "2.7.0" + }, + { + "kind": "field", + "name": "disabled", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.", + "privacy": "public", + "_ui5since": "1.19.0" + }, { "kind": "field", "name": "expanded", @@ -6509,6 +8867,17 @@ "description": "Defines if the item is expanded", "privacy": "public" }, + { + "kind": "field", + "name": "href", + "type": { + "text": "string | undefined" + }, + "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": "undefined", + "_ui5since": "1.19.0" + }, { "kind": "field", "name": "icon", @@ -6517,11 +8886,7 @@ }, "description": "Defines the icon of the item.\n\n**Note:** Icons on second-level (child) navigation items are not recommended according to the design specification.\n\nThe SAP-icons font provides numerous options.\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", "privacy": "public", - "default": "undefined", - "inheritedFrom": { - "name": "SideNavigationSelectableItemBase", - "module": "dist/SideNavigationSelectableItemBase.js" - } + "default": "undefined" }, { "kind": "field", @@ -6531,63 +8896,39 @@ }, "default": "false", "description": "Defines whether the item is selected.\n\n**Note:** Items that have a set `href` and `target` set to `_blank` should not be selectable.", - "privacy": "public", - "inheritedFrom": { - "name": "SideNavigationSelectableItemBase", - "module": "dist/SideNavigationSelectableItemBase.js" - } + "privacy": "public" }, { "kind": "field", - "name": "href", + "name": "target", "type": { "text": "string | undefined" }, - "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 component target.\n\nPossible values:\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `framename`\n\n**Note:** Items that have a defined `href` and `target`\nattribute set to `_blank` should not be selectable.", "privacy": "public", "default": "undefined", - "_ui5since": "1.19.0", - "inheritedFrom": { - "name": "SideNavigationSelectableItemBase", - "module": "dist/SideNavigationSelectableItemBase.js" - } + "_ui5since": "1.19.0" }, { "kind": "field", - "name": "target", + "name": "text", "type": { "text": "string | undefined" }, - "description": "Defines the component target.\n\nPossible values:\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `framename`\n\n**Note:** Items that have a defined `href` and `target`\nattribute set to `_blank` should not be selectable.", + "description": "Defines the text of the item.", "privacy": "public", - "default": "undefined", - "_ui5since": "1.19.0", - "inheritedFrom": { - "name": "SideNavigationSelectableItemBase", - "module": "dist/SideNavigationSelectableItemBase.js" - } + "default": "undefined" }, { "kind": "field", - "name": "design", + "name": "tooltip", "type": { - "text": "SideNavigationItemDesign", - "references": [ - { - "name": "SideNavigationItemDesign", - "package": "@ui5/webcomponents-fiori", - "module": "dist/types/SideNavigationItemDesign.js" - } - ] + "text": "string | undefined" }, - "default": "\"Default\"", - "description": "Item design.\n\n**Note:** Items with \"Action\" design must not have sub-items.", + "description": "Defines the tooltip of the component.\n\nA tooltip attribute should be provided, in order to represent meaning/function,\nwhen the component is collapsed (\"icon only\" design is visualized) or the item text is truncated.", + "default": "undefined", "privacy": "public", - "_ui5since": "2.7.0", - "inheritedFrom": { - "name": "SideNavigationSelectableItemBase", - "module": "dist/SideNavigationSelectableItemBase.js" - } + "_ui5since": "2.0.0" }, { "kind": "field", @@ -6598,80 +8939,37 @@ "default": "false", "description": "Indicates whether the navigation item is selectable. By default, all items are selectable unless specifically marked as unselectable.\n\nWhen a parent item is marked as unselectable, selecting it will only expand or collapse its sub-items.\nTo improve user experience do not mix unselectable parent items with selectable parent items in a single side navigation.\n\n\n**Guidelines**:\n- Items with an assigned `href` and a target of `_blank` should be marked as unselectable.\n- Items that trigger actions (with design \"Action\") should be marked as unselectable.", "privacy": "public", - "_ui5since": "2.7.0", - "inheritedFrom": { - "name": "SideNavigationSelectableItemBase", - "module": "dist/SideNavigationSelectableItemBase.js" - } - }, + "_ui5since": "2.7.0" + } + ], + "attributes": [ { - "kind": "field", - "name": "accessibilityAttributes", - "type": { - "text": "SideNavigationItemAccessibilityAttributes", - "references": [ - { - "name": "SideNavigationItemAccessibilityAttributes", - "package": "@ui5/webcomponents-fiori", - "module": "dist/SideNavigationSelectableItemBase.js" - } - ] - }, - "default": "{}", "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n**Note:** Do not use it on parent items, as it will be overridden if the item is in the overflow menu.", - "privacy": "public", - "_ui5since": "2.7.0", - "inheritedFrom": { - "name": "SideNavigationSelectableItemBase", - "module": "dist/SideNavigationSelectableItemBase.js" + "name": "accessibility-attributes", + "default": "{}", + "fieldName": "accessibilityAttributes", + "type": { + "text": "SideNavigationItemAccessibilityAttributes" } }, { - "kind": "field", - "name": "text", + "description": "Item design.\n\n**Note:** Items with \"Action\" design must not have sub-items.", + "name": "design", + "default": "\"Default\"", + "fieldName": "design", "type": { - "text": "string | undefined" - }, - "description": "Defines the text of the item.", - "privacy": "public", - "default": "undefined", - "inheritedFrom": { - "name": "SideNavigationItemBase", - "module": "dist/SideNavigationItemBase.js" + "text": "\"Default\" | \"Action\"" } }, { - "kind": "field", + "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.", "name": "disabled", + "default": "false", + "fieldName": "disabled", "type": { "text": "boolean" - }, - "default": "false", - "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.", - "privacy": "public", - "_ui5since": "1.19.0", - "inheritedFrom": { - "name": "SideNavigationItemBase", - "module": "dist/SideNavigationItemBase.js" } }, - { - "kind": "field", - "name": "tooltip", - "type": { - "text": "string | undefined" - }, - "description": "Defines the tooltip of the component.\n\nA tooltip attribute should be provided, in order to represent meaning/function,\nwhen the component is collapsed (\"icon only\" design is visualized) or the item text is truncated.", - "default": "undefined", - "privacy": "public", - "_ui5since": "2.0.0", - "inheritedFrom": { - "name": "SideNavigationItemBase", - "module": "dist/SideNavigationItemBase.js" - } - } - ], - "attributes": [ { "description": "Defines if the item is expanded", "name": "expanded", @@ -6681,6 +8979,15 @@ "text": "boolean" } }, + { + "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.", + "name": "href", + "default": "undefined", + "fieldName": "href", + "type": { + "text": "string | undefined" + } + }, { "description": "Defines the icon of the item.\n\n**Note:** Icons on second-level (child) navigation items are not recommended according to the design specification.\n\nThe SAP-icons font provides numerous options.\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", "name": "icon", @@ -6688,10 +8995,6 @@ "fieldName": "icon", "type": { "text": "string | undefined" - }, - "inheritedFrom": { - "name": "SideNavigationSelectableItemBase", - "module": "dist/SideNavigationSelectableItemBase.js" } }, { @@ -6701,23 +9004,6 @@ "fieldName": "selected", "type": { "text": "boolean" - }, - "inheritedFrom": { - "name": "SideNavigationSelectableItemBase", - "module": "dist/SideNavigationSelectableItemBase.js" - } - }, - { - "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.", - "name": "href", - "default": "undefined", - "fieldName": "href", - "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "SideNavigationSelectableItemBase", - "module": "dist/SideNavigationSelectableItemBase.js" } }, { @@ -6727,49 +9013,6 @@ "fieldName": "target", "type": { "text": "string | undefined" - }, - "inheritedFrom": { - "name": "SideNavigationSelectableItemBase", - "module": "dist/SideNavigationSelectableItemBase.js" - } - }, - { - "description": "Item design.\n\n**Note:** Items with \"Action\" design must not have sub-items.", - "name": "design", - "default": "\"Default\"", - "fieldName": "design", - "type": { - "text": "\"Default\" | \"Action\"" - }, - "inheritedFrom": { - "name": "SideNavigationSelectableItemBase", - "module": "dist/SideNavigationSelectableItemBase.js" - } - }, - { - "description": "Indicates whether the navigation item is selectable. By default, all items are selectable unless specifically marked as unselectable.\n\nWhen a parent item is marked as unselectable, selecting it will only expand or collapse its sub-items.\nTo improve user experience do not mix unselectable parent items with selectable parent items in a single side navigation.\n\n\n**Guidelines**:\n- Items with an assigned `href` and a target of `_blank` should be marked as unselectable.\n- Items that trigger actions (with design \"Action\") should be marked as unselectable.", - "name": "unselectable", - "default": "false", - "fieldName": "unselectable", - "type": { - "text": "boolean" - }, - "inheritedFrom": { - "name": "SideNavigationSelectableItemBase", - "module": "dist/SideNavigationSelectableItemBase.js" - } - }, - { - "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n**Note:** Do not use it on parent items, as it will be overridden if the item is in the overflow menu.", - "name": "accessibility-attributes", - "default": "{}", - "fieldName": "accessibilityAttributes", - "type": { - "text": "SideNavigationItemAccessibilityAttributes" - }, - "inheritedFrom": { - "name": "SideNavigationSelectableItemBase", - "module": "dist/SideNavigationSelectableItemBase.js" } }, { @@ -6779,23 +9022,6 @@ "fieldName": "text", "type": { "text": "string | undefined" - }, - "inheritedFrom": { - "name": "SideNavigationItemBase", - "module": "dist/SideNavigationItemBase.js" - } - }, - { - "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.", - "name": "disabled", - "default": "false", - "fieldName": "disabled", - "type": { - "text": "boolean" - }, - "inheritedFrom": { - "name": "SideNavigationItemBase", - "module": "dist/SideNavigationItemBase.js" } }, { @@ -6805,10 +9031,15 @@ "fieldName": "tooltip", "type": { "text": "string | undefined" - }, - "inheritedFrom": { - "name": "SideNavigationItemBase", - "module": "dist/SideNavigationItemBase.js" + } + }, + { + "description": "Indicates whether the navigation item is selectable. By default, all items are selectable unless specifically marked as unselectable.\n\nWhen a parent item is marked as unselectable, selecting it will only expand or collapse its sub-items.\nTo improve user experience do not mix unselectable parent items with selectable parent items in a single side navigation.\n\n\n**Guidelines**:\n- Items with an assigned `href` and a target of `_blank` should be marked as unselectable.\n- Items that trigger actions (with design \"Action\") should be marked as unselectable.", + "name": "unselectable", + "default": "false", + "fieldName": "unselectable", + "type": { + "text": "boolean" } } ], @@ -6873,11 +9104,7 @@ "_ui5privacy": "public", "description": "Returns whether the \"SHIFT\" key was pressed when the event was triggered." } - ], - "inheritedFrom": { - "name": "SideNavigationSelectableItemBase", - "module": "dist/SideNavigationSelectableItemBase.js" - } + ] } ] } @@ -6912,24 +9139,24 @@ "members": [ { "kind": "field", - "name": "text", + "name": "disabled", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Defines the text of the item.", + "default": "false", + "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.", "privacy": "public", - "default": "undefined" + "_ui5since": "1.19.0" }, { "kind": "field", - "name": "disabled", + "name": "text", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.", + "description": "Defines the text of the item.", "privacy": "public", - "_ui5since": "1.19.0" + "default": "undefined" }, { "kind": "field", @@ -6944,15 +9171,6 @@ } ], "attributes": [ - { - "description": "Defines the text of the item.", - "name": "text", - "default": "undefined", - "fieldName": "text", - "type": { - "text": "string | undefined" - } - }, { "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.", "name": "disabled", @@ -6962,6 +9180,15 @@ "text": "boolean" } }, + { + "description": "Defines the text of the item.", + "name": "text", + "default": "undefined", + "fieldName": "text", + "type": { + "text": "string | undefined" + } + }, { "description": "Defines the tooltip of the component.\n\nA tooltip attribute should be provided, in order to represent meaning/function,\nwhen the component is collapsed (\"icon only\" design is visualized) or the item text is truncated.", "name": "tooltip", @@ -6999,51 +9226,27 @@ "path": "dist/SideNavigationSelectableItemBase.js", "declarations": [ { - "kind": "class", - "description": "Base class for the navigation items that support actions.", - "name": "SideNavigationSelectableItemBase", - "members": [ - { - "kind": "field", - "name": "icon", - "type": { - "text": "string | undefined" - }, - "description": "Defines the icon of the item.\n\n**Note:** Icons on second-level (child) navigation items are not recommended according to the design specification.\n\nThe SAP-icons font provides numerous options.\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", - "privacy": "public", - "default": "undefined" - }, - { - "kind": "field", - "name": "selected", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines whether the item is selected.\n\n**Note:** Items that have a set `href` and `target` set to `_blank` should not be selectable.", - "privacy": "public" - }, - { - "kind": "field", - "name": "href", - "type": { - "text": "string | undefined" - }, - "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": "undefined", - "_ui5since": "1.19.0" - }, + "kind": "class", + "description": "Base class for the navigation items that support actions.", + "name": "SideNavigationSelectableItemBase", + "members": [ { "kind": "field", - "name": "target", + "name": "accessibilityAttributes", "type": { - "text": "string | undefined" + "text": "SideNavigationItemAccessibilityAttributes", + "references": [ + { + "name": "SideNavigationItemAccessibilityAttributes", + "package": "@ui5/webcomponents-fiori", + "module": "dist/SideNavigationSelectableItemBase.js" + } + ] }, - "description": "Defines the component target.\n\nPossible values:\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `framename`\n\n**Note:** Items that have a defined `href` and `target`\nattribute set to `_blank` should not be selectable.", + "default": "{}", + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n**Note:** Do not use it on parent items, as it will be overridden if the item is in the overflow menu.", "privacy": "public", - "default": "undefined", - "_ui5since": "1.19.0" + "_ui5since": "2.7.0" }, { "kind": "field", @@ -7065,61 +9268,66 @@ }, { "kind": "field", - "name": "unselectable", + "name": "disabled", "type": { "text": "boolean" }, "default": "false", - "description": "Indicates whether the navigation item is selectable. By default, all items are selectable unless specifically marked as unselectable.\n\nWhen a parent item is marked as unselectable, selecting it will only expand or collapse its sub-items.\nTo improve user experience do not mix unselectable parent items with selectable parent items in a single side navigation.\n\n\n**Guidelines**:\n- Items with an assigned `href` and a target of `_blank` should be marked as unselectable.\n- Items that trigger actions (with design \"Action\") should be marked as unselectable.", + "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.", "privacy": "public", - "_ui5since": "2.7.0" + "_ui5since": "1.19.0" }, { "kind": "field", - "name": "accessibilityAttributes", + "name": "href", "type": { - "text": "SideNavigationItemAccessibilityAttributes", - "references": [ - { - "name": "SideNavigationItemAccessibilityAttributes", - "package": "@ui5/webcomponents-fiori", - "module": "dist/SideNavigationSelectableItemBase.js" - } - ] + "text": "string | undefined" }, - "default": "{}", - "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n**Note:** Do not use it on parent items, as it will be overridden if the item is in the overflow menu.", + "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", - "_ui5since": "2.7.0" + "default": "undefined", + "_ui5since": "1.19.0" }, { "kind": "field", - "name": "text", + "name": "icon", "type": { "text": "string | undefined" }, - "description": "Defines the text of the item.", + "description": "Defines the icon of the item.\n\n**Note:** Icons on second-level (child) navigation items are not recommended according to the design specification.\n\nThe SAP-icons font provides numerous options.\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", "privacy": "public", - "default": "undefined", - "inheritedFrom": { - "name": "SideNavigationItemBase", - "module": "dist/SideNavigationItemBase.js" - } + "default": "undefined" }, { "kind": "field", - "name": "disabled", + "name": "selected", "type": { "text": "boolean" }, "default": "false", - "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.", + "description": "Defines whether the item is selected.\n\n**Note:** Items that have a set `href` and `target` set to `_blank` should not be selectable.", + "privacy": "public" + }, + { + "kind": "field", + "name": "target", + "type": { + "text": "string | undefined" + }, + "description": "Defines the component target.\n\nPossible values:\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `framename`\n\n**Note:** Items that have a defined `href` and `target`\nattribute set to `_blank` should not be selectable.", "privacy": "public", - "_ui5since": "1.19.0", - "inheritedFrom": { - "name": "SideNavigationItemBase", - "module": "dist/SideNavigationItemBase.js" - } + "default": "undefined", + "_ui5since": "1.19.0" + }, + { + "kind": "field", + "name": "text", + "type": { + "text": "string | undefined" + }, + "description": "Defines the text of the item.", + "privacy": "public", + "default": "undefined" }, { "kind": "field", @@ -7130,11 +9338,18 @@ "description": "Defines the tooltip of the component.\n\nA tooltip attribute should be provided, in order to represent meaning/function,\nwhen the component is collapsed (\"icon only\" design is visualized) or the item text is truncated.", "default": "undefined", "privacy": "public", - "_ui5since": "2.0.0", - "inheritedFrom": { - "name": "SideNavigationItemBase", - "module": "dist/SideNavigationItemBase.js" - } + "_ui5since": "2.0.0" + }, + { + "kind": "field", + "name": "unselectable", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Indicates whether the navigation item is selectable. By default, all items are selectable unless specifically marked as unselectable.\n\nWhen a parent item is marked as unselectable, selecting it will only expand or collapse its sub-items.\nTo improve user experience do not mix unselectable parent items with selectable parent items in a single side navigation.\n\n\n**Guidelines**:\n- Items with an assigned `href` and a target of `_blank` should be marked as unselectable.\n- Items that trigger actions (with design \"Action\") should be marked as unselectable.", + "privacy": "public", + "_ui5since": "2.7.0" } ], "events": [ @@ -7193,19 +9408,28 @@ ], "attributes": [ { - "description": "Defines the icon of the item.\n\n**Note:** Icons on second-level (child) navigation items are not recommended according to the design specification.\n\nThe SAP-icons font provides numerous options.\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", - "name": "icon", - "default": "undefined", - "fieldName": "icon", + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n**Note:** Do not use it on parent items, as it will be overridden if the item is in the overflow menu.", + "name": "accessibility-attributes", + "default": "{}", + "fieldName": "accessibilityAttributes", "type": { - "text": "string | undefined" + "text": "SideNavigationItemAccessibilityAttributes" } }, { - "description": "Defines whether the item is selected.\n\n**Note:** Items that have a set `href` and `target` set to `_blank` should not be selectable.", - "name": "selected", + "description": "Item design.\n\n**Note:** Items with \"Action\" design must not have sub-items.", + "name": "design", + "default": "\"Default\"", + "fieldName": "design", + "type": { + "text": "\"Default\" | \"Action\"" + } + }, + { + "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.", + "name": "disabled", "default": "false", - "fieldName": "selected", + "fieldName": "disabled", "type": { "text": "boolean" } @@ -7220,39 +9444,30 @@ } }, { - "description": "Defines the component target.\n\nPossible values:\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `framename`\n\n**Note:** Items that have a defined `href` and `target`\nattribute set to `_blank` should not be selectable.", - "name": "target", + "description": "Defines the icon of the item.\n\n**Note:** Icons on second-level (child) navigation items are not recommended according to the design specification.\n\nThe SAP-icons font provides numerous options.\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "name": "icon", "default": "undefined", - "fieldName": "target", + "fieldName": "icon", "type": { "text": "string | undefined" } }, { - "description": "Item design.\n\n**Note:** Items with \"Action\" design must not have sub-items.", - "name": "design", - "default": "\"Default\"", - "fieldName": "design", - "type": { - "text": "\"Default\" | \"Action\"" - } - }, - { - "description": "Indicates whether the navigation item is selectable. By default, all items are selectable unless specifically marked as unselectable.\n\nWhen a parent item is marked as unselectable, selecting it will only expand or collapse its sub-items.\nTo improve user experience do not mix unselectable parent items with selectable parent items in a single side navigation.\n\n\n**Guidelines**:\n- Items with an assigned `href` and a target of `_blank` should be marked as unselectable.\n- Items that trigger actions (with design \"Action\") should be marked as unselectable.", - "name": "unselectable", + "description": "Defines whether the item is selected.\n\n**Note:** Items that have a set `href` and `target` set to `_blank` should not be selectable.", + "name": "selected", "default": "false", - "fieldName": "unselectable", + "fieldName": "selected", "type": { "text": "boolean" } }, { - "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n**Note:** Do not use it on parent items, as it will be overridden if the item is in the overflow menu.", - "name": "accessibility-attributes", - "default": "{}", - "fieldName": "accessibilityAttributes", + "description": "Defines the component target.\n\nPossible values:\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `framename`\n\n**Note:** Items that have a defined `href` and `target`\nattribute set to `_blank` should not be selectable.", + "name": "target", + "default": "undefined", + "fieldName": "target", "type": { - "text": "SideNavigationItemAccessibilityAttributes" + "text": "string | undefined" } }, { @@ -7262,23 +9477,6 @@ "fieldName": "text", "type": { "text": "string | undefined" - }, - "inheritedFrom": { - "name": "SideNavigationItemBase", - "module": "dist/SideNavigationItemBase.js" - } - }, - { - "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.", - "name": "disabled", - "default": "false", - "fieldName": "disabled", - "type": { - "text": "boolean" - }, - "inheritedFrom": { - "name": "SideNavigationItemBase", - "module": "dist/SideNavigationItemBase.js" } }, { @@ -7288,10 +9486,15 @@ "fieldName": "tooltip", "type": { "text": "string | undefined" - }, - "inheritedFrom": { - "name": "SideNavigationItemBase", - "module": "dist/SideNavigationItemBase.js" + } + }, + { + "description": "Indicates whether the navigation item is selectable. By default, all items are selectable unless specifically marked as unselectable.\n\nWhen a parent item is marked as unselectable, selecting it will only expand or collapse its sub-items.\nTo improve user experience do not mix unselectable parent items with selectable parent items in a single side navigation.\n\n\n**Guidelines**:\n- Items with an assigned `href` and a target of `_blank` should be marked as unselectable.\n- Items that trigger actions (with design \"Action\") should be marked as unselectable.", + "name": "unselectable", + "default": "false", + "fieldName": "unselectable", + "type": { + "text": "boolean" } } ], @@ -7328,149 +9531,102 @@ "members": [ { "kind": "field", - "name": "icon", + "name": "accessibilityAttributes", "type": { - "text": "string | undefined" + "text": "SideNavigationItemAccessibilityAttributes", + "references": [ + { + "name": "SideNavigationItemAccessibilityAttributes", + "package": "@ui5/webcomponents-fiori", + "module": "dist/SideNavigationSelectableItemBase.js" + } + ] }, - "description": "Defines the icon of the item.\n\n**Note:** Icons on second-level (child) navigation items are not recommended according to the design specification.\n\nThe SAP-icons font provides numerous options.\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "default": "{}", + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n**Note:** Do not use it on parent items, as it will be overridden if the item is in the overflow menu.", "privacy": "public", - "default": "undefined", - "inheritedFrom": { - "name": "SideNavigationSelectableItemBase", - "module": "dist/SideNavigationSelectableItemBase.js" - } + "_ui5since": "2.7.0" }, { "kind": "field", - "name": "selected", + "name": "design", "type": { - "text": "boolean" + "text": "SideNavigationItemDesign", + "references": [ + { + "name": "SideNavigationItemDesign", + "package": "@ui5/webcomponents-fiori", + "module": "dist/types/SideNavigationItemDesign.js" + } + ] }, - "default": "false", - "description": "Defines whether the item is selected.\n\n**Note:** Items that have a set `href` and `target` set to `_blank` should not be selectable.", + "default": "\"Default\"", + "description": "Item design.\n\n**Note:** Items with \"Action\" design must not have sub-items.", "privacy": "public", - "inheritedFrom": { - "name": "SideNavigationSelectableItemBase", - "module": "dist/SideNavigationSelectableItemBase.js" - } + "_ui5since": "2.7.0" }, { "kind": "field", - "name": "href", + "name": "disabled", "type": { - "text": "string | undefined" + "text": "boolean" }, - "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.", + "default": "false", + "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.", "privacy": "public", - "default": "undefined", - "_ui5since": "1.19.0", - "inheritedFrom": { - "name": "SideNavigationSelectableItemBase", - "module": "dist/SideNavigationSelectableItemBase.js" - } + "_ui5since": "1.19.0" }, { "kind": "field", - "name": "target", + "name": "href", "type": { "text": "string | undefined" }, - "description": "Defines the component target.\n\nPossible values:\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `framename`\n\n**Note:** Items that have a defined `href` and `target`\nattribute set to `_blank` should not be selectable.", + "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": "undefined", - "_ui5since": "1.19.0", - "inheritedFrom": { - "name": "SideNavigationSelectableItemBase", - "module": "dist/SideNavigationSelectableItemBase.js" - } + "_ui5since": "1.19.0" }, { "kind": "field", - "name": "design", + "name": "icon", "type": { - "text": "SideNavigationItemDesign", - "references": [ - { - "name": "SideNavigationItemDesign", - "package": "@ui5/webcomponents-fiori", - "module": "dist/types/SideNavigationItemDesign.js" - } - ] + "text": "string | undefined" }, - "default": "\"Default\"", - "description": "Item design.\n\n**Note:** Items with \"Action\" design must not have sub-items.", + "description": "Defines the icon of the item.\n\n**Note:** Icons on second-level (child) navigation items are not recommended according to the design specification.\n\nThe SAP-icons font provides numerous options.\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", "privacy": "public", - "_ui5since": "2.7.0", - "inheritedFrom": { - "name": "SideNavigationSelectableItemBase", - "module": "dist/SideNavigationSelectableItemBase.js" - } + "default": "undefined" }, { "kind": "field", - "name": "unselectable", + "name": "selected", "type": { "text": "boolean" }, - "default": "false", - "description": "Indicates whether the navigation item is selectable. By default, all items are selectable unless specifically marked as unselectable.\n\nWhen a parent item is marked as unselectable, selecting it will only expand or collapse its sub-items.\nTo improve user experience do not mix unselectable parent items with selectable parent items in a single side navigation.\n\n\n**Guidelines**:\n- Items with an assigned `href` and a target of `_blank` should be marked as unselectable.\n- Items that trigger actions (with design \"Action\") should be marked as unselectable.", - "privacy": "public", - "_ui5since": "2.7.0", - "inheritedFrom": { - "name": "SideNavigationSelectableItemBase", - "module": "dist/SideNavigationSelectableItemBase.js" - } - }, - { - "kind": "field", - "name": "accessibilityAttributes", - "type": { - "text": "SideNavigationItemAccessibilityAttributes", - "references": [ - { - "name": "SideNavigationItemAccessibilityAttributes", - "package": "@ui5/webcomponents-fiori", - "module": "dist/SideNavigationSelectableItemBase.js" - } - ] - }, - "default": "{}", - "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n**Note:** Do not use it on parent items, as it will be overridden if the item is in the overflow menu.", - "privacy": "public", - "_ui5since": "2.7.0", - "inheritedFrom": { - "name": "SideNavigationSelectableItemBase", - "module": "dist/SideNavigationSelectableItemBase.js" - } + "default": "false", + "description": "Defines whether the item is selected.\n\n**Note:** Items that have a set `href` and `target` set to `_blank` should not be selectable.", + "privacy": "public" }, { "kind": "field", - "name": "text", + "name": "target", "type": { "text": "string | undefined" }, - "description": "Defines the text of the item.", + "description": "Defines the component target.\n\nPossible values:\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `framename`\n\n**Note:** Items that have a defined `href` and `target`\nattribute set to `_blank` should not be selectable.", "privacy": "public", "default": "undefined", - "inheritedFrom": { - "name": "SideNavigationItemBase", - "module": "dist/SideNavigationItemBase.js" - } + "_ui5since": "1.19.0" }, { "kind": "field", - "name": "disabled", + "name": "text", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.", + "description": "Defines the text of the item.", "privacy": "public", - "_ui5since": "1.19.0", - "inheritedFrom": { - "name": "SideNavigationItemBase", - "module": "dist/SideNavigationItemBase.js" - } + "default": "undefined" }, { "kind": "field", @@ -7481,11 +9637,18 @@ "description": "Defines the tooltip of the component.\n\nA tooltip attribute should be provided, in order to represent meaning/function,\nwhen the component is collapsed (\"icon only\" design is visualized) or the item text is truncated.", "default": "undefined", "privacy": "public", - "_ui5since": "2.0.0", - "inheritedFrom": { - "name": "SideNavigationItemBase", - "module": "dist/SideNavigationItemBase.js" - } + "_ui5since": "2.0.0" + }, + { + "kind": "field", + "name": "unselectable", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Indicates whether the navigation item is selectable. By default, all items are selectable unless specifically marked as unselectable.\n\nWhen a parent item is marked as unselectable, selecting it will only expand or collapse its sub-items.\nTo improve user experience do not mix unselectable parent items with selectable parent items in a single side navigation.\n\n\n**Guidelines**:\n- Items with an assigned `href` and a target of `_blank` should be marked as unselectable.\n- Items that trigger actions (with design \"Action\") should be marked as unselectable.", + "privacy": "public", + "_ui5since": "2.7.0" } ], "superclass": { @@ -7500,29 +9663,30 @@ "_ui5abstract": true, "attributes": [ { - "description": "Defines the icon of the item.\n\n**Note:** Icons on second-level (child) navigation items are not recommended according to the design specification.\n\nThe SAP-icons font provides numerous options.\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", - "name": "icon", - "default": "undefined", - "fieldName": "icon", + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n**Note:** Do not use it on parent items, as it will be overridden if the item is in the overflow menu.", + "name": "accessibility-attributes", + "default": "{}", + "fieldName": "accessibilityAttributes", "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "SideNavigationSelectableItemBase", - "module": "dist/SideNavigationSelectableItemBase.js" + "text": "SideNavigationItemAccessibilityAttributes" } }, { - "description": "Defines whether the item is selected.\n\n**Note:** Items that have a set `href` and `target` set to `_blank` should not be selectable.", - "name": "selected", + "description": "Item design.\n\n**Note:** Items with \"Action\" design must not have sub-items.", + "name": "design", + "default": "\"Default\"", + "fieldName": "design", + "type": { + "text": "\"Default\" | \"Action\"" + } + }, + { + "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.", + "name": "disabled", "default": "false", - "fieldName": "selected", + "fieldName": "disabled", "type": { "text": "boolean" - }, - "inheritedFrom": { - "name": "SideNavigationSelectableItemBase", - "module": "dist/SideNavigationSelectableItemBase.js" } }, { @@ -7532,62 +9696,33 @@ "fieldName": "href", "type": { "text": "string | undefined" - }, - "inheritedFrom": { - "name": "SideNavigationSelectableItemBase", - "module": "dist/SideNavigationSelectableItemBase.js" } }, { - "description": "Defines the component target.\n\nPossible values:\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `framename`\n\n**Note:** Items that have a defined `href` and `target`\nattribute set to `_blank` should not be selectable.", - "name": "target", + "description": "Defines the icon of the item.\n\n**Note:** Icons on second-level (child) navigation items are not recommended according to the design specification.\n\nThe SAP-icons font provides numerous options.\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "name": "icon", "default": "undefined", - "fieldName": "target", + "fieldName": "icon", "type": { "text": "string | undefined" - }, - "inheritedFrom": { - "name": "SideNavigationSelectableItemBase", - "module": "dist/SideNavigationSelectableItemBase.js" - } - }, - { - "description": "Item design.\n\n**Note:** Items with \"Action\" design must not have sub-items.", - "name": "design", - "default": "\"Default\"", - "fieldName": "design", - "type": { - "text": "\"Default\" | \"Action\"" - }, - "inheritedFrom": { - "name": "SideNavigationSelectableItemBase", - "module": "dist/SideNavigationSelectableItemBase.js" } }, { - "description": "Indicates whether the navigation item is selectable. By default, all items are selectable unless specifically marked as unselectable.\n\nWhen a parent item is marked as unselectable, selecting it will only expand or collapse its sub-items.\nTo improve user experience do not mix unselectable parent items with selectable parent items in a single side navigation.\n\n\n**Guidelines**:\n- Items with an assigned `href` and a target of `_blank` should be marked as unselectable.\n- Items that trigger actions (with design \"Action\") should be marked as unselectable.", - "name": "unselectable", + "description": "Defines whether the item is selected.\n\n**Note:** Items that have a set `href` and `target` set to `_blank` should not be selectable.", + "name": "selected", "default": "false", - "fieldName": "unselectable", + "fieldName": "selected", "type": { "text": "boolean" - }, - "inheritedFrom": { - "name": "SideNavigationSelectableItemBase", - "module": "dist/SideNavigationSelectableItemBase.js" } }, { - "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n**Note:** Do not use it on parent items, as it will be overridden if the item is in the overflow menu.", - "name": "accessibility-attributes", - "default": "{}", - "fieldName": "accessibilityAttributes", + "description": "Defines the component target.\n\nPossible values:\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `framename`\n\n**Note:** Items that have a defined `href` and `target`\nattribute set to `_blank` should not be selectable.", + "name": "target", + "default": "undefined", + "fieldName": "target", "type": { - "text": "SideNavigationItemAccessibilityAttributes" - }, - "inheritedFrom": { - "name": "SideNavigationSelectableItemBase", - "module": "dist/SideNavigationSelectableItemBase.js" + "text": "string | undefined" } }, { @@ -7597,23 +9732,6 @@ "fieldName": "text", "type": { "text": "string | undefined" - }, - "inheritedFrom": { - "name": "SideNavigationItemBase", - "module": "dist/SideNavigationItemBase.js" - } - }, - { - "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.", - "name": "disabled", - "default": "false", - "fieldName": "disabled", - "type": { - "text": "boolean" - }, - "inheritedFrom": { - "name": "SideNavigationItemBase", - "module": "dist/SideNavigationItemBase.js" } }, { @@ -7623,10 +9741,15 @@ "fieldName": "tooltip", "type": { "text": "string | undefined" - }, - "inheritedFrom": { - "name": "SideNavigationItemBase", - "module": "dist/SideNavigationItemBase.js" + } + }, + { + "description": "Indicates whether the navigation item is selectable. By default, all items are selectable unless specifically marked as unselectable.\n\nWhen a parent item is marked as unselectable, selecting it will only expand or collapse its sub-items.\nTo improve user experience do not mix unselectable parent items with selectable parent items in a single side navigation.\n\n\n**Guidelines**:\n- Items with an assigned `href` and a target of `_blank` should be marked as unselectable.\n- Items that trigger actions (with design \"Action\") should be marked as unselectable.", + "name": "unselectable", + "default": "false", + "fieldName": "unselectable", + "type": { + "text": "boolean" } } ], @@ -7681,11 +9804,7 @@ "_ui5privacy": "public", "description": "Returns whether the \"SHIFT\" key was pressed when the event was triggered." } - ], - "inheritedFrom": { - "name": "SideNavigationSelectableItemBase", - "module": "dist/SideNavigationSelectableItemBase.js" - } + ] } ] } @@ -7720,35 +9839,26 @@ "members": [ { "kind": "field", - "name": "text", + "name": "selected", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Defines the text of the sort item.", - "default": "undefined", + "default": "false", + "description": "Defines if the sort item is selected.", "privacy": "public" }, { "kind": "field", - "name": "selected", + "name": "text", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Defines if the sort item is selected.", + "description": "Defines the text of the sort item.", + "default": "undefined", "privacy": "public" } ], "attributes": [ - { - "description": "Defines the text of the sort item.", - "name": "text", - "default": "undefined", - "fieldName": "text", - "type": { - "text": "string | undefined" - } - }, { "description": "Defines if the sort item is selected.", "name": "selected", @@ -7757,6 +9867,15 @@ "type": { "text": "boolean" } + }, + { + "description": "Defines the text of the sort item.", + "name": "text", + "default": "undefined", + "fieldName": "text", + "type": { + "text": "string | undefined" + } } ], "superclass": { @@ -7823,6 +9942,35 @@ } ], "members": [ + { + "kind": "field", + "name": "accessibleName", + "type": { + "text": "string | undefined" + }, + "description": "Defines the accessible ARIA name of the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.2.0" + }, + { + "kind": "field", + "name": "growing", + "type": { + "text": "TimelineGrowingMode", + "references": [ + { + "name": "TimelineGrowingMode", + "package": "@ui5/webcomponents-fiori", + "module": "dist/types/TimelineGrowingMode.js" + } + ] + }, + "default": "\"None\"", + "description": "Defines whether the Timeline will have growing capability either by pressing a \"More\" button,\nor via user scroll. In both cases a `load-more` event is fired.\n\nAvailable options:\n\n`Button` - Displays a button at the end of the Timeline, which when pressed triggers the `load-more` event.\n\n`Scroll` -Triggers the `load-more` event when the user scrolls to the end of the Timeline.\n\n`None` (default) - The growing functionality is off.", + "privacy": "public", + "_ui5since": "2.7.0" + }, { "kind": "field", "name": "layout", @@ -7841,17 +9989,6 @@ "privacy": "public", "_ui5since": "1.0.0-rc.15" }, - { - "kind": "field", - "name": "accessibleName", - "type": { - "text": "string | undefined" - }, - "description": "Defines the accessible ARIA name of the component.", - "default": "undefined", - "privacy": "public", - "_ui5since": "1.2.0" - }, { "kind": "field", "name": "loading", @@ -7872,24 +10009,6 @@ "default": "1000", "description": "Defines the delay in milliseconds, after which the loading indicator will show up for this component.", "privacy": "public" - }, - { - "kind": "field", - "name": "growing", - "type": { - "text": "TimelineGrowingMode", - "references": [ - { - "name": "TimelineGrowingMode", - "package": "@ui5/webcomponents-fiori", - "module": "dist/types/TimelineGrowingMode.js" - } - ] - }, - "default": "\"None\"", - "description": "Defines whether the Timeline will have growing capability either by pressing a \"More\" button,\nor via user scroll. In both cases a `load-more` event is fired.\n\nAvailable options:\n\n`Button` - Displays a button at the end of the Timeline, which when pressed triggers the `load-more` event.\n\n`Scroll` -Triggers the `load-more` event when the user scrolls to the end of the Timeline.\n\n`None` (default) - The growing functionality is off.", - "privacy": "public", - "_ui5since": "2.7.0" } ], "events": [ @@ -7907,15 +10026,6 @@ } ], "attributes": [ - { - "description": "Defines the items orientation.", - "name": "layout", - "default": "\"Vertical\"", - "fieldName": "layout", - "type": { - "text": "\"Vertical\" | \"Horizontal\"" - } - }, { "description": "Defines the accessible ARIA name of the component.", "name": "accessible-name", @@ -7925,6 +10035,24 @@ "text": "string | undefined" } }, + { + "description": "Defines whether the Timeline will have growing capability either by pressing a \"More\" button,\nor via user scroll. In both cases a `load-more` event is fired.\n\nAvailable options:\n\n`Button` - Displays a button at the end of the Timeline, which when pressed triggers the `load-more` event.\n\n`Scroll` -Triggers the `load-more` event when the user scrolls to the end of the Timeline.\n\n`None` (default) - The growing functionality is off.", + "name": "growing", + "default": "\"None\"", + "fieldName": "growing", + "type": { + "text": "\"Button\" | \"None\" | \"Scroll\"" + } + }, + { + "description": "Defines the items orientation.", + "name": "layout", + "default": "\"Vertical\"", + "fieldName": "layout", + "type": { + "text": "\"Vertical\" | \"Horizontal\"" + } + }, { "description": "Defines if the component should display a loading indicator over the Timeline.", "name": "loading", @@ -7935,21 +10063,12 @@ } }, { - "description": "Defines the delay in milliseconds, after which the loading indicator will show up for this component.", - "name": "loading-delay", - "default": "1000", - "fieldName": "loadingDelay", - "type": { - "text": "number" - } - }, - { - "description": "Defines whether the Timeline will have growing capability either by pressing a \"More\" button,\nor via user scroll. In both cases a `load-more` event is fired.\n\nAvailable options:\n\n`Button` - Displays a button at the end of the Timeline, which when pressed triggers the `load-more` event.\n\n`Scroll` -Triggers the `load-more` event when the user scrolls to the end of the Timeline.\n\n`None` (default) - The growing functionality is off.", - "name": "growing", - "default": "\"None\"", - "fieldName": "growing", + "description": "Defines the delay in milliseconds, after which the loading indicator will show up for this component.", + "name": "loading-delay", + "default": "1000", + "fieldName": "loadingDelay", "type": { - "text": "\"Button\" | \"None\" | \"Scroll\"" + "text": "number" } } ], @@ -8012,22 +10131,22 @@ "members": [ { "kind": "field", - "name": "groupName", + "name": "collapsed", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Defines the text of the button that expands and collapses the group.", - "default": "undefined", + "default": "false", + "description": "Determines if the group is collapsed or expanded.", "privacy": "public" }, { "kind": "field", - "name": "collapsed", + "name": "groupName", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Determines if the group is collapsed or expanded.", + "description": "Defines the text of the button that expands and collapses the group.", + "default": "undefined", "privacy": "public" } ], @@ -8045,15 +10164,6 @@ } ], "attributes": [ - { - "description": "Defines the text of the button that expands and collapses the group.", - "name": "group-name", - "default": "undefined", - "fieldName": "groupName", - "type": { - "text": "string | undefined" - } - }, { "description": "Determines if the group is collapsed or expanded.", "name": "collapsed", @@ -8062,6 +10172,15 @@ "type": { "text": "boolean" } + }, + { + "description": "Defines the text of the button that expands and collapses the group.", + "name": "group-name", + "default": "undefined", + "fieldName": "groupName", + "type": { + "text": "string | undefined" + } } ], "superclass": { @@ -8153,13 +10272,21 @@ }, { "kind": "field", - "name": "titleText", + "name": "state", "type": { - "text": "string | undefined" + "text": "ValueState", + "references": [ + { + "name": "ValueState", + "package": "@ui5/webcomponents-base", + "module": "dist/types/ValueState.js" + } + ] }, - "description": "Defines the title text of the component.", - "default": "undefined", - "privacy": "public" + "default": "\"None\"", + "description": "Defines the state of the icon displayed in the `ui5-timeline-item`.", + "privacy": "public", + "_ui5since": "2.7.0" }, { "kind": "field", @@ -8173,21 +10300,13 @@ }, { "kind": "field", - "name": "state", + "name": "titleText", "type": { - "text": "ValueState", - "references": [ - { - "name": "ValueState", - "package": "@ui5/webcomponents-base", - "module": "dist/types/ValueState.js" - } - ] + "text": "string | undefined" }, - "default": "\"None\"", - "description": "Defines the state of the icon displayed in the `ui5-timeline-item`.", - "privacy": "public", - "_ui5since": "2.7.0" + "description": "Defines the title text of the component.", + "default": "undefined", + "privacy": "public" } ], "events": [ @@ -8232,12 +10351,12 @@ } }, { - "description": "Defines the title text of the component.", - "name": "title-text", - "default": "undefined", - "fieldName": "titleText", + "description": "Defines the state of the icon displayed in the `ui5-timeline-item`.", + "name": "state", + "default": "\"None\"", + "fieldName": "state", "type": { - "text": "string | undefined" + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" } }, { @@ -8250,12 +10369,12 @@ } }, { - "description": "Defines the state of the icon displayed in the `ui5-timeline-item`.", - "name": "state", - "default": "\"None\"", - "fieldName": "state", + "description": "Defines the title text of the component.", + "name": "title-text", + "default": "undefined", + "fieldName": "titleText", "type": { - "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" + "text": "string | undefined" } } ], @@ -8332,38 +10451,32 @@ "members": [ { "kind": "field", - "name": "selectionMode", + "name": "accessibleName", "type": { - "text": "UploadCollectionSelectionMode", - "references": [ - { - "name": "UploadCollectionSelectionMode", - "package": "@ui5/webcomponents-fiori", - "module": "dist/types/UploadCollectionSelectionMode.js" - } - ] + "text": "string | undefined" }, - "default": "\"None\"", - "description": "Defines the selection mode of the `ui5-upload-collection`.", - "privacy": "public" + "description": "Defines the accessible ARIA name of the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.0.0-rc.16" }, { "kind": "field", - "name": "noDataDescription", + "name": "hideDragOverlay", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Allows you to set your own text for the 'No data' description.", - "default": "undefined", + "default": "false", + "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.", "privacy": "public" }, { "kind": "field", - "name": "noDataText", + "name": "noDataDescription", "type": { "text": "string | undefined" }, - "description": "Allows you to set your own text for the 'No data' text.", + "description": "Allows you to set your own text for the 'No data' description.", "default": "undefined", "privacy": "public" }, @@ -8387,24 +10500,30 @@ }, { "kind": "field", - "name": "hideDragOverlay", + "name": "noDataText", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "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.", + "description": "Allows you to set your own text for the 'No data' text.", + "default": "undefined", "privacy": "public" }, { "kind": "field", - "name": "accessibleName", + "name": "selectionMode", "type": { - "text": "string | undefined" + "text": "UploadCollectionSelectionMode", + "references": [ + { + "name": "UploadCollectionSelectionMode", + "package": "@ui5/webcomponents-fiori", + "module": "dist/types/UploadCollectionSelectionMode.js" + } + ] }, - "description": "Defines the accessible ARIA name of the component.", - "default": "undefined", - "privacy": "public", - "_ui5since": "1.0.0-rc.16" + "default": "\"None\"", + "description": "Defines the selection mode of the `ui5-upload-collection`.", + "privacy": "public" } ], "events": [ @@ -8467,28 +10586,28 @@ ], "attributes": [ { - "description": "Defines the selection mode of the `ui5-upload-collection`.", - "name": "selection-mode", - "default": "\"None\"", - "fieldName": "selectionMode", + "description": "Defines the accessible ARIA name of the component.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", "type": { - "text": "\"None\" | \"Single\" | \"SingleStart\" | \"SingleEnd\" | \"SingleAuto\" | \"Multiple\"" + "text": "string | undefined" } }, { - "description": "Allows you to set your own text for the 'No data' description.", - "name": "no-data-description", - "default": "undefined", - "fieldName": "noDataDescription", + "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.", + "name": "hide-drag-overlay", + "default": "false", + "fieldName": "hideDragOverlay", "type": { - "text": "string | undefined" + "text": "boolean" } }, { - "description": "Allows you to set your own text for the 'No data' text.", - "name": "no-data-text", + "description": "Allows you to set your own text for the 'No data' description.", + "name": "no-data-description", "default": "undefined", - "fieldName": "noDataText", + "fieldName": "noDataDescription", "type": { "text": "string | undefined" } @@ -8503,21 +10622,21 @@ } }, { - "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.", - "name": "hide-drag-overlay", - "default": "false", - "fieldName": "hideDragOverlay", + "description": "Allows you to set your own text for the 'No data' text.", + "name": "no-data-text", + "default": "undefined", + "fieldName": "noDataText", "type": { - "text": "boolean" + "text": "string | undefined" } }, { - "description": "Defines the accessible ARIA name of the component.", - "name": "accessible-name", - "default": "undefined", - "fieldName": "accessibleName", + "description": "Defines the selection mode of the `ui5-upload-collection`.", + "name": "selection-mode", + "default": "\"None\"", + "fieldName": "selectionMode", "type": { - "text": "string | undefined" + "text": "\"None\" | \"Single\" | \"SingleStart\" | \"SingleEnd\" | \"SingleAuto\" | \"Multiple\"" } } ], @@ -8594,6 +10713,16 @@ } ], "members": [ + { + "kind": "field", + "name": "disableDeleteButton", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Disables the delete button.", + "privacy": "public" + }, { "kind": "field", "name": "file", @@ -8625,16 +10754,6 @@ "description": "If set to `true` the file name will be clickable and it will fire `file-name-click` event upon click.", "privacy": "public" }, - { - "kind": "field", - "name": "disableDeleteButton", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Disables the delete button.", - "privacy": "public" - }, { "kind": "field", "name": "hideDeleteButton", @@ -8694,38 +10813,39 @@ }, { "kind": "field", - "name": "type", + "name": "accessibilityAttributes", "type": { - "text": "ListItemType", + "text": "ListItemAccessibilityAttributes", "references": [ { - "name": "ListItemType", + "name": "ListItemAccessibilityAttributes", "package": "@ui5/webcomponents", - "module": "dist/types/ListItemType.js" + "module": "dist/ListItem.js" } ] }, - "default": "\"Active\"", - "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.", - "privacy": "public" + "default": "{}", + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaSetsize**: Defines the number of items in the current set when not all items in the set are present in the DOM.\n**Note:** The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`.\n\n\t- **ariaPosinset**: Defines an element's number or position in the current set when not all items are present in the DOM.\n\t**Note:** The value 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.", + "privacy": "public", + "_ui5since": "1.15.0" }, { "kind": "field", - "name": "accessibilityAttributes", + "name": "highlight", "type": { - "text": "ListItemAccessibilityAttributes", + "text": "Highlight", "references": [ { - "name": "ListItemAccessibilityAttributes", + "name": "Highlight", "package": "@ui5/webcomponents", - "module": "dist/ListItem.js" + "module": "dist/types/Highlight.js" } ] }, - "default": "{}", - "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaSetsize**: Defines the number of items in the current set when not all items in the set are present in the DOM.\n**Note:** The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`.\n\n\t- **ariaPosinset**: Defines an element's number or position in the current set when not all items are present in the DOM.\n\t**Note:** The value 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": "\"None\"", + "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", "privacy": "public", - "_ui5since": "1.15.0" + "_ui5since": "1.24" }, { "kind": "field", @@ -8738,6 +10858,16 @@ "privacy": "public", "_ui5since": "1.10.0" }, + { + "kind": "field", + "name": "selected", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines the selected state of the component.", + "privacy": "public" + }, { "kind": "field", "name": "tooltip", @@ -8751,35 +10881,20 @@ }, { "kind": "field", - "name": "highlight", + "name": "type", "type": { - "text": "Highlight", + "text": "ListItemType", "references": [ { - "name": "Highlight", + "name": "ListItemType", "package": "@ui5/webcomponents", - "module": "dist/types/Highlight.js" + "module": "dist/types/ListItemType.js" } ] }, - "default": "\"None\"", - "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", - "privacy": "public", - "_ui5since": "1.24" - }, - { - "kind": "field", - "name": "selected", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines the selected state of the component.", - "privacy": "public", - "inheritedFrom": { - "name": "ListItemBase", - "module": "dist/ListItemBase.js" - } + "default": "\"Active\"", + "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.", + "privacy": "public" } ], "events": [ @@ -8806,23 +10921,23 @@ "_ui5Bubbles": true }, { - "name": "terminate", + "name": "retry", "_ui5privacy": "public", "type": { "text": "CustomEvent" }, - "description": "Fired when the terminate button is pressed.\n\n**Note:** Terminate button is displayed when `uploadState` property is set to `Uploading`.", + "description": "Fired when the retry button is pressed.\n\n**Note:** Retry button is displayed when `uploadState` property is set to `Error`.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, "_ui5Bubbles": true }, { - "name": "retry", + "name": "terminate", "_ui5privacy": "public", "type": { "text": "CustomEvent" }, - "description": "Fired when the retry button is pressed.\n\n**Note:** Retry button is displayed when `uploadState` property is set to `Error`.", + "description": "Fired when the terminate button is pressed.\n\n**Note:** Terminate button is displayed when `uploadState` property is set to `Uploading`.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, "_ui5Bubbles": true @@ -8840,6 +10955,15 @@ } ], "attributes": [ + { + "description": "Disables the delete button.", + "name": "disable-delete-button", + "default": "false", + "fieldName": "disableDeleteButton", + "type": { + "text": "boolean" + } + }, { "description": "Holds an instance of `File` associated with this item.", "name": "file", @@ -8867,15 +10991,6 @@ "text": "boolean" } }, - { - "description": "Disables the delete button.", - "name": "disable-delete-button", - "default": "false", - "fieldName": "disableDeleteButton", - "type": { - "text": "boolean" - } - }, { "description": "Hides the delete button.", "name": "hide-delete-button", @@ -8920,6 +11035,60 @@ "type": { "text": "\"Complete\" | \"Error\" | \"Ready\" | \"Uploading\"" } + }, + { + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaSetsize**: Defines the number of items in the current set when not all items in the set are present in the DOM.\n**Note:** The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`.\n\n\t- **ariaPosinset**: Defines an element's number or position in the current set when not all items are present in the DOM.\n\t**Note:** The value 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.", + "name": "accessibility-attributes", + "default": "{}", + "fieldName": "accessibilityAttributes", + "type": { + "text": "ListItemAccessibilityAttributes" + } + }, + { + "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", + "name": "highlight", + "default": "\"None\"", + "fieldName": "highlight", + "type": { + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" + } + }, + { + "description": "The navigated state of the list item.\nIf set to `true`, a navigation indicator is displayed at the end of the list item.", + "name": "navigated", + "default": "false", + "fieldName": "navigated", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines the selected state of the component.", + "name": "selected", + "default": "false", + "fieldName": "selected", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines the text of the tooltip that would be displayed for the list item.", + "name": "tooltip", + "default": "undefined", + "fieldName": "tooltip", + "type": { + "text": "string | undefined" + } + }, + { + "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.", + "name": "type", + "default": "\"Active\"", + "fieldName": "type", + "type": { + "text": "\"Navigation\" | \"Inactive\" | \"Active\" | \"Detail\"" + } } ], "superclass": { @@ -8961,6 +11130,21 @@ "description": "### Overview\n\nThe `ui5-user-menu` is an SAP Fiori specific web component that is used in `ui5-shellbar`\nand allows the user to easily see information and settings for the current user and all other logged in accounts.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/UserMenu.js\";`\n\n`import \"@ui5/webcomponents-fiori/dist/UserMenuItem.js\";` (for `ui5-user-menu-item`)", "name": "UserMenu", "slots": [ + { + "name": "accounts", + "description": "Defines the user accounts.\n\n**Note:** If one item is used, it will be shown as the selected one. If more than one item is used, the first one will be shown as selected unless\nthere is an item with `selected` property set to `true`.", + "_ui5type": { + "text": "Array<UserMenuAccount>", + "references": [ + { + "name": "UserMenuAccount", + "package": "@ui5/webcomponents-fiori", + "module": "dist/UserMenuAccount.js" + } + ] + }, + "_ui5privacy": "public" + }, { "name": "default", "description": "Defines the menu items.", @@ -8978,17 +11162,11 @@ "_ui5privacy": "public" }, { - "name": "accounts", - "description": "Defines the user accounts.\n\n**Note:** If one item is used, it will be shown as the selected one. If more than one item is used, the first one will be shown as selected unless\nthere is an item with `selected` property set to `true`.", + "name": "footer", + "description": "Defines custom footer content.\n\n**Note:** When provided, replaces the default \"Sign Out\" button. Use an empty element to hide the footer completely.", + "_ui5since": "2.20.0", "_ui5type": { - "text": "Array<UserMenuAccount>", - "references": [ - { - "name": "UserMenuAccount", - "package": "@ui5/webcomponents-fiori", - "module": "dist/UserMenuAccount.js" - } - ] + "text": "Array<HTMLElement>" }, "_ui5privacy": "public" } @@ -9016,44 +11194,44 @@ }, { "kind": "field", - "name": "showManageAccount", + "name": "showEditAccounts", "type": { "text": "boolean" }, "default": "false", - "description": "Defines if the User Menu shows the Manage Account option.", + "description": "Defines if the User Menu shows the Edit Accounts option.", "privacy": "public" }, { "kind": "field", - "name": "showOtherAccounts", + "name": "showEditButton", "type": { "text": "boolean" }, "default": "false", - "description": "Defines if the User Menu shows the Other Accounts option.", - "privacy": "public" + "description": "Defines if the User menu shows edit button.", + "privacy": "public", + "_ui5since": "2.7.0" }, { "kind": "field", - "name": "showEditAccounts", + "name": "showManageAccount", "type": { "text": "boolean" }, "default": "false", - "description": "Defines if the User Menu shows the Edit Accounts option.", + "description": "Defines if the User Menu shows the Manage Account option.", "privacy": "public" }, { "kind": "field", - "name": "showEditButton", + "name": "showOtherAccounts", "type": { "text": "boolean" }, "default": "false", - "description": "Defines if the User menu shows edit button.", - "privacy": "public", - "_ui5since": "2.7.0" + "description": "Defines if the User Menu shows the Other Accounts option.", + "privacy": "public" } ], "events": [ @@ -9068,28 +11246,6 @@ "_ui5allowPreventDefault": false, "_ui5Bubbles": false }, - { - "name": "manage-account-click", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired when the \"Manage Account\" button is selected.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": false - }, - { - "name": "edit-accounts-click", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired when the \"Edit Accounts\" button is selected.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": false - }, { "name": "change-account", "_ui5privacy": "public", @@ -9140,6 +11296,29 @@ } ] }, + { + "name": "close", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when a user menu is close.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": false, + "_ui5since": "2.6.0" + }, + { + "name": "edit-accounts-click", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the \"Edit Accounts\" button is selected.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": false + }, { "name": "item-click", "_ui5privacy": "public", @@ -9176,24 +11355,23 @@ ] }, { - "name": "open", + "name": "manage-account-click", "_ui5privacy": "public", "type": { "text": "CustomEvent" }, - "description": "Fired when a user menu is open.", + "description": "Fired when the \"Manage Account\" button is selected.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, - "_ui5Bubbles": false, - "_ui5since": "2.6.0" + "_ui5Bubbles": false }, { - "name": "close", + "name": "open", "_ui5privacy": "public", "type": { "text": "CustomEvent" }, - "description": "Fired when a user menu is close.", + "description": "Fired when a user menu is open.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, "_ui5Bubbles": false, @@ -9232,37 +11410,37 @@ } }, { - "description": "Defines if the User Menu shows the Manage Account option.", - "name": "show-manage-account", + "description": "Defines if the User Menu shows the Edit Accounts option.", + "name": "show-edit-accounts", "default": "false", - "fieldName": "showManageAccount", + "fieldName": "showEditAccounts", "type": { "text": "boolean" } }, { - "description": "Defines if the User Menu shows the Other Accounts option.", - "name": "show-other-accounts", + "description": "Defines if the User menu shows edit button.", + "name": "show-edit-button", "default": "false", - "fieldName": "showOtherAccounts", + "fieldName": "showEditButton", "type": { "text": "boolean" } }, { - "description": "Defines if the User Menu shows the Edit Accounts option.", - "name": "show-edit-accounts", + "description": "Defines if the User Menu shows the Manage Account option.", + "name": "show-manage-account", "default": "false", - "fieldName": "showEditAccounts", + "fieldName": "showManageAccount", "type": { "text": "boolean" } }, { - "description": "Defines if the User menu shows edit button.", - "name": "show-edit-button", + "description": "Defines if the User Menu shows the Other Accounts option.", + "name": "show-other-accounts", "default": "false", - "fieldName": "showEditButton", + "fieldName": "showOtherAccounts", "type": { "text": "boolean" } @@ -9275,7 +11453,6 @@ }, "tagName": "ui5-user-menu", "customElement": true, - "_ui5experimental": true, "_ui5since": "2.5.0", "_ui5privacy": "public" } @@ -9310,22 +11487,12 @@ "members": [ { "kind": "field", - "name": "avatarSrc", + "name": "additionalInfo", "type": { - "text": "string | undefined" + "text": "string" }, - "description": "Defines the avatar image url of the user.", "default": "\"\"", - "privacy": "public" - }, - { - "kind": "field", - "name": "avatarInitials", - "type": { - "text": "string | undefined" - }, - "description": "Defines the avatar initials of the user.", - "default": "undefined", + "description": "Defines additional information for the user.", "privacy": "public" }, { @@ -9347,22 +11514,22 @@ }, { "kind": "field", - "name": "titleText", + "name": "avatarInitials", "type": { - "text": "string" + "text": "string | undefined" }, - "default": "\"\"", - "description": "Defines the title text of the user.", + "description": "Defines the avatar initials of the user.", + "default": "undefined", "privacy": "public" }, { "kind": "field", - "name": "subtitleText", + "name": "avatarSrc", "type": { - "text": "string" + "text": "string | undefined" }, + "description": "Defines the avatar image url of the user.", "default": "\"\"", - "description": "Defines additional text of the user.", "privacy": "public" }, { @@ -9377,13 +11544,14 @@ }, { "kind": "field", - "name": "additionalInfo", + "name": "loading", "type": { - "text": "string" + "text": "boolean" }, - "default": "\"\"", - "description": "Defines additional information for the user.", - "privacy": "public" + "default": "false", + "description": "Indicates whether a loading indicator should be shown.", + "privacy": "public", + "_ui5since": "2.9.0" }, { "kind": "field", @@ -9397,33 +11565,33 @@ }, { "kind": "field", - "name": "loading", + "name": "subtitleText", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Indicates whether a loading indicator should be shown.", - "privacy": "public", - "_ui5since": "2.9.0" + "default": "\"\"", + "description": "Defines additional text of the user.", + "privacy": "public" + }, + { + "kind": "field", + "name": "titleText", + "type": { + "text": "string" + }, + "default": "\"\"", + "description": "Defines the title text of the user.", + "privacy": "public" } ], "attributes": [ { - "description": "Defines the avatar image url of the user.", - "name": "avatar-src", + "description": "Defines additional information for the user.", + "name": "additional-info", "default": "\"\"", - "fieldName": "avatarSrc", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Defines the avatar initials of the user.", - "name": "avatar-initials", - "default": "undefined", - "fieldName": "avatarInitials", + "fieldName": "additionalInfo", "type": { - "text": "string | undefined" + "text": "string" } }, { @@ -9436,21 +11604,21 @@ } }, { - "description": "Defines the title text of the user.", - "name": "title-text", - "default": "\"\"", - "fieldName": "titleText", + "description": "Defines the avatar initials of the user.", + "name": "avatar-initials", + "default": "undefined", + "fieldName": "avatarInitials", "type": { - "text": "string" + "text": "string | undefined" } }, { - "description": "Defines additional text of the user.", - "name": "subtitle-text", + "description": "Defines the avatar image url of the user.", + "name": "avatar-src", "default": "\"\"", - "fieldName": "subtitleText", + "fieldName": "avatarSrc", "type": { - "text": "string" + "text": "string | undefined" } }, { @@ -9463,12 +11631,12 @@ } }, { - "description": "Defines additional information for the user.", - "name": "additional-info", - "default": "\"\"", - "fieldName": "additionalInfo", + "description": "Indicates whether a loading indicator should be shown.", + "name": "loading", + "default": "false", + "fieldName": "loading", "type": { - "text": "string" + "text": "boolean" } }, { @@ -9481,12 +11649,21 @@ } }, { - "description": "Indicates whether a loading indicator should be shown.", - "name": "loading", - "default": "false", - "fieldName": "loading", + "description": "Defines additional text of the user.", + "name": "subtitle-text", + "default": "\"\"", + "fieldName": "subtitleText", "type": { - "text": "boolean" + "text": "string" + } + }, + { + "description": "Defines the title text of the user.", + "name": "title-text", + "default": "\"\"", + "fieldName": "titleText", + "type": { + "text": "string" } } ], @@ -9497,7 +11674,6 @@ }, "tagName": "ui5-user-menu-account", "customElement": true, - "_ui5experimental": true, "_ui5since": "2.5.0", "_ui5privacy": "public" } @@ -9546,15 +11722,6 @@ }, "_ui5privacy": "public" }, - { - "name": "endContent", - "description": "Defines the components that should be displayed at the end of the menu item.\n\n**Note:** It is highly recommended to slot only components of type `ui5-button`,`ui5-link`\nor `ui5-icon` in order to preserve the intended design. If there are components added to this slot,\nand there is text set in `additionalText`, it will not be displayed. If there are items added to `items` slot,\nnether `additionalText` nor components added to this slot would be displayed.\n\nThe priority of what will be displayed at the end of the menu item is as follows:\nsub-menu arrow (if there are items added in `items` slot) -> components added in `endContent` -> text set to `additionalText`.\n\nApplication developers are responsible for ensuring that interactive elements placed in the `endContent` slot\nhave the correct accessibility behaviour, including their enabled or disabled states.\nThe menu does not manage these aspects when the menu item state changes.", - "_ui5since": "2.0.0", - "_ui5type": { - "text": "Array<HTMLElement>" - }, - "_ui5privacy": "public" - }, { "name": "deleteButton", "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.", @@ -9569,11 +11736,16 @@ } ] }, - "_ui5privacy": "public", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "_ui5privacy": "public" + }, + { + "name": "endContent", + "description": "Defines the components that should be displayed at the end of the menu item.\n\n**Note:** It is highly recommended to slot only components of type `ui5-button`,`ui5-link`\nor `ui5-icon` in order to preserve the intended design. If there are components added to this slot,\nand there is text set in `additionalText`, it will not be displayed. If there are items added to `items` slot,\nnether `additionalText` nor components added to this slot would be displayed.\n\nThe priority of what will be displayed at the end of the menu item is as follows:\nsub-menu arrow (if there are items added in `items` slot) -> components added in `endContent` -> text set to `additionalText`.\n\nApplication developers are responsible for ensuring that interactive elements placed in the `endContent` slot\nhave the correct accessibility behaviour, including their enabled or disabled states.\nThe menu does not manage these aspects when the menu item state changes.", + "_ui5since": "2.0.0", + "_ui5type": { + "text": "Array<HTMLElement>" + }, + "_ui5privacy": "public" } ], "superclass": { @@ -9583,228 +11755,195 @@ }, "tagName": "ui5-user-menu-item", "customElement": true, - "_ui5experimental": true, "_ui5since": "2.5.0", "_ui5privacy": "public", "members": [ { "kind": "field", - "name": "text", + "name": "accessibilityAttributes", "type": { - "text": "string | undefined" + "text": "MenuItemAccessibilityAttributes", + "references": [ + { + "name": "MenuItemAccessibilityAttributes", + "package": "@ui5/webcomponents", + "module": "dist/MenuItem.js" + } + ] }, - "description": "Defines the text of the tree item.", - "default": "undefined", - "privacy": "public" + "default": "{}", + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaKeyShortcuts**: Indicated the availability of a keyboard shortcuts defined for the menu item.\n\n- **role**: Defines the role of the menu item. If not set, menu item will have default role=\"menuitem\".", + "privacy": "public", + "_ui5since": "2.1.0" }, { "kind": "field", - "name": "additionalText", + "name": "accessibleName", "type": { "text": "string | undefined" }, - "description": "Defines the `additionalText`, displayed in the end of the menu item.\n\n**Note:** The additional text will not be displayed if there are items added in `items` slot or there are\ncomponents added to `endContent` slot.\n\nThe priority of what will be displayed at the end of the menu item is as follows:\nsub-menu arrow (if there are items added in `items` slot) -> components added in `endContent` -> text set to `additionalText`.", + "description": "Defines the accessible ARIA name of the component.", "default": "undefined", "privacy": "public", - "_ui5since": "1.8.0" + "_ui5since": "1.7.0" }, { "kind": "field", - "name": "icon", + "name": "additionalText", "type": { "text": "string | undefined" }, - "description": "Defines the icon to be displayed as graphical element within the component.\nThe SAP-icons font provides numerous options.\n\n**Example:**\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "description": "Defines the `additionalText`, displayed in the end of the menu item.\n\n**Note:** The additional text will not be displayed if there are items added in `items` slot or there are\ncomponents added to `endContent` slot.\n\nThe priority of what will be displayed at the end of the menu item is as follows:\nsub-menu arrow (if there are items added in `items` slot) -> components added in `endContent` -> text set to `additionalText`.", "default": "undefined", - "privacy": "public" + "privacy": "public", + "_ui5since": "1.8.0" }, { "kind": "field", - "name": "disabled", + "name": "checked", "type": { "text": "boolean" }, "default": "false", - "description": "Defines whether menu item is in disabled state.\n\n**Note:** A disabled menu item is noninteractive.", + "description": "Defines whether menu item is in checked state.\n\n**Note:** checked state is only taken into account when menu item is added to menu item group\nwith `checkMode` other than `None`.\n\n**Note:** A checked menu item has a checkmark displayed at its end.", "privacy": "public", - "inheritedFrom": { - "name": "ListItemBase", - "module": "dist/ListItemBase.js" - } + "_ui5since": "2.12.0" }, { "kind": "field", - "name": "loading", + "name": "disabled", "type": { "text": "boolean" }, "default": "false", - "description": "Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding menu popover.\n\n**Note:** If set to `true` a busy indicator component will be displayed into the related one to the current menu item sub-menu popover.", - "privacy": "public", - "_ui5since": "1.13.0" + "description": "Defines whether menu item is in disabled state.\n\n**Note:** A disabled menu item is noninteractive.", + "privacy": "public" }, { "kind": "field", - "name": "loadingDelay", + "name": "highlight", "type": { - "text": "number" + "text": "Highlight", + "references": [ + { + "name": "Highlight", + "package": "@ui5/webcomponents", + "module": "dist/types/Highlight.js" + } + ] }, - "default": "1000", - "description": "Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding menu popover.", + "default": "\"None\"", + "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", "privacy": "public", - "_ui5since": "1.13.0" + "_ui5since": "1.24" }, { "kind": "field", - "name": "accessibleName", + "name": "icon", "type": { "text": "string | undefined" }, - "description": "Defines the accessible ARIA name of the component.", + "description": "Defines the icon to be displayed as graphical element within the component.\nThe SAP-icons font provides numerous options.\n\n**Example:**\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", "default": "undefined", + "privacy": "public" + }, + { + "kind": "field", + "name": "loading", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding menu popover.\n\n**Note:** If set to `true` a busy indicator component will be displayed into the related one to the current menu item sub-menu popover.", "privacy": "public", - "_ui5since": "1.7.0", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "_ui5since": "1.13.0" }, { "kind": "field", - "name": "tooltip", + "name": "loadingDelay", "type": { - "text": "string | undefined" + "text": "number" }, - "description": "Defines the text of the tooltip for the menu item.", - "default": "undefined", + "default": "1000", + "description": "Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding menu popover.", "privacy": "public", - "_ui5since": "1.23.0", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "_ui5since": "1.13.0" }, { "kind": "field", - "name": "checked", + "name": "navigated", "type": { "text": "boolean" }, "default": "false", - "description": "Defines whether menu item is in checked state.\n\n**Note:** checked state is only taken into account when menu item is added to menu item group\nwith `checkMode` other than `None`.\n\n**Note:** A checked menu item has a checkmark displayed at its end.", + "description": "The navigated state of the list item.\nIf set to `true`, a navigation indicator is displayed at the end of the list item.", "privacy": "public", - "_ui5since": "2.12.0" + "_ui5since": "1.10.0" }, { "kind": "field", - "name": "accessibilityAttributes", + "name": "selected", "type": { - "text": "MenuItemAccessibilityAttributes", - "references": [ - { - "name": "MenuItemAccessibilityAttributes", - "package": "@ui5/webcomponents", - "module": "dist/MenuItem.js" - } - ] + "text": "boolean" }, - "default": "{}", - "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaKeyShortcuts**: Indicated the availability of a keyboard shortcuts defined for the menu item.\n\n- **role**: Defines the role of the menu item. If not set, menu item will have default role=\"menuitem\".", - "privacy": "public", - "_ui5since": "2.1.0", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "default": "false", + "description": "Defines the selected state of the component.", + "privacy": "public" }, { "kind": "field", - "name": "type", + "name": "text", "type": { - "text": "ListItemType", - "references": [ - { - "name": "ListItemType", - "package": "@ui5/webcomponents", - "module": "dist/types/ListItemType.js" - } - ] + "text": "string | undefined" }, - "default": "\"Active\"", - "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.", - "privacy": "public", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "description": "Defines the text of the tree item.", + "default": "undefined", + "privacy": "public" }, { "kind": "field", - "name": "navigated", + "name": "tooltip", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "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": "Defines the text of the tooltip for the menu item.", + "default": "undefined", "privacy": "public", - "_ui5since": "1.10.0", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "_ui5since": "1.23.0" }, { "kind": "field", - "name": "highlight", + "name": "type", "type": { - "text": "Highlight", + "text": "ListItemType", "references": [ { - "name": "Highlight", + "name": "ListItemType", "package": "@ui5/webcomponents", - "module": "dist/types/Highlight.js" + "module": "dist/types/ListItemType.js" } ] }, - "default": "\"None\"", - "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", - "privacy": "public", - "_ui5since": "1.24", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } - }, - { - "kind": "field", - "name": "selected", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines the selected state of the component.", - "privacy": "public", - "inheritedFrom": { - "name": "ListItemBase", - "module": "dist/ListItemBase.js" - } + "default": "\"Active\"", + "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.", + "privacy": "public" } ], "events": [ { - "name": "before-open", + "name": "before-close", "_ui5privacy": "public", "type": { - "text": "CustomEvent<MenuBeforeOpenEventDetail>", + "text": "CustomEvent<MenuBeforeCloseEventDetail>", "references": [ { - "name": "MenuBeforeOpenEventDetail", + "name": "MenuBeforeCloseEventDetail", "package": "@ui5/webcomponents", "module": "dist/MenuItem.js" } ] }, - "description": "Fired before the menu is opened. This event can be cancelled, which will prevent the menu from opening.\n\n**Note:** Since 1.14.0 the event is also fired before a sub-menu opens.", + "description": "Fired before the menu is closed. This event can be cancelled, which will prevent the menu from closing.", "_ui5Cancelable": true, "_ui5allowPreventDefault": true, "_ui5Bubbles": false, @@ -9812,39 +11951,28 @@ "_ui5parameters": [ { "type": { - "text": "HTMLElement" + "text": "boolean" }, - "name": "item", + "name": "escPressed", "_ui5privacy": "public", - "description": "The menu item that triggers opening of the sub-menu or undefined when fired upon root menu opening." + "description": "Indicates that `ESC` key has triggered the event." } ] }, { - "name": "open", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired after the menu is opened.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": false - }, - { - "name": "before-close", + "name": "before-open", "_ui5privacy": "public", "type": { - "text": "CustomEvent<MenuBeforeCloseEventDetail>", + "text": "CustomEvent<MenuBeforeOpenEventDetail>", "references": [ { - "name": "MenuBeforeCloseEventDetail", + "name": "MenuBeforeOpenEventDetail", "package": "@ui5/webcomponents", "module": "dist/MenuItem.js" } ] }, - "description": "Fired before the menu is closed. This event can be cancelled, which will prevent the menu from closing.", + "description": "Fired before the menu is opened. This event can be cancelled, which will prevent the menu from opening.\n\n**Note:** Since 1.14.0 the event is also fired before a sub-menu opens.", "_ui5Cancelable": true, "_ui5allowPreventDefault": true, "_ui5Bubbles": false, @@ -9852,14 +11980,26 @@ "_ui5parameters": [ { "type": { - "text": "boolean" + "text": "HTMLElement" }, - "name": "escPressed", + "name": "item", "_ui5privacy": "public", - "description": "Indicates that `ESC` key has triggered the event." + "description": "The menu item that triggers opening of the sub-menu or undefined when fired upon root menu opening." } ] }, + { + "name": "check", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when an item is checked or unchecked.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5since": "2.12.0" + }, { "name": "close", "_ui5privacy": "public", @@ -9873,30 +12013,153 @@ "_ui5since": "1.10.0" }, { - "name": "check", + "name": "detail-click", "_ui5privacy": "public", "type": { "text": "CustomEvent" }, - "description": "Fired when an item is checked or unchecked.", + "description": "Fired when the user clicks on the detail button when type is `Detail`.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5since": "2.12.0" + "_ui5Bubbles": true }, { - "name": "detail-click", + "name": "open", "_ui5privacy": "public", "type": { "text": "CustomEvent" }, - "description": "Fired when the user clicks on the detail button when type is `Detail`.", + "description": "Fired after the menu is opened.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" + "_ui5Bubbles": false + } + ], + "attributes": [ + { + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaKeyShortcuts**: Indicated the availability of a keyboard shortcuts defined for the menu item.\n\n- **role**: Defines the role of the menu item. If not set, menu item will have default role=\"menuitem\".", + "name": "accessibility-attributes", + "default": "{}", + "fieldName": "accessibilityAttributes", + "type": { + "text": "MenuItemAccessibilityAttributes" + } + }, + { + "description": "Defines the accessible ARIA name of the component.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the `additionalText`, displayed in the end of the menu item.\n\n**Note:** The additional text will not be displayed if there are items added in `items` slot or there are\ncomponents added to `endContent` slot.\n\nThe priority of what will be displayed at the end of the menu item is as follows:\nsub-menu arrow (if there are items added in `items` slot) -> components added in `endContent` -> text set to `additionalText`.", + "name": "additional-text", + "default": "undefined", + "fieldName": "additionalText", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines whether menu item is in checked state.\n\n**Note:** checked state is only taken into account when menu item is added to menu item group\nwith `checkMode` other than `None`.\n\n**Note:** A checked menu item has a checkmark displayed at its end.", + "name": "checked", + "default": "false", + "fieldName": "checked", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines whether menu item is in disabled state.\n\n**Note:** A disabled menu item is noninteractive.", + "name": "disabled", + "default": "false", + "fieldName": "disabled", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", + "name": "highlight", + "default": "\"None\"", + "fieldName": "highlight", + "type": { + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" + } + }, + { + "description": "Defines the icon to be displayed as graphical element within the component.\nThe SAP-icons font provides numerous options.\n\n**Example:**\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "name": "icon", + "default": "undefined", + "fieldName": "icon", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding menu popover.\n\n**Note:** If set to `true` a busy indicator component will be displayed into the related one to the current menu item sub-menu popover.", + "name": "loading", + "default": "false", + "fieldName": "loading", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding menu popover.", + "name": "loading-delay", + "default": "1000", + "fieldName": "loadingDelay", + "type": { + "text": "number" + } + }, + { + "description": "The navigated state of the list item.\nIf set to `true`, a navigation indicator is displayed at the end of the list item.", + "name": "navigated", + "default": "false", + "fieldName": "navigated", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines the selected state of the component.", + "name": "selected", + "default": "false", + "fieldName": "selected", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines the text of the tree item.", + "name": "text", + "default": "undefined", + "fieldName": "text", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the text of the tooltip for the menu item.", + "name": "tooltip", + "default": "undefined", + "fieldName": "tooltip", + "type": { + "text": "string | undefined" + } + }, + { + "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.", + "name": "type", + "default": "\"Active\"", + "fieldName": "type", + "type": { + "text": "\"Navigation\" | \"Inactive\" | \"Active\" | \"Detail\"" } } ] @@ -9936,9 +12199,26 @@ }, "tagName": "ui5-user-menu-item-group", "customElement": true, - "_ui5experimental": true, "_ui5since": "2.12.0", "_ui5privacy": "public", + "slots": [ + { + "name": "default", + "description": "Defines the items of this component.\n**Note:** The slot can hold any combination of components of type `ui5-menu-item` or `ui5-menu-separator` or both.", + "_ui5propertyName": "items", + "_ui5type": { + "text": "Array<IMenuItem>", + "references": [ + { + "name": "IMenuItem", + "package": "@ui5/webcomponents", + "module": "dist/Menu.js" + } + ] + }, + "_ui5privacy": "public" + } + ], "members": [ { "kind": "field", @@ -9958,22 +12238,15 @@ "privacy": "public" } ], - "slots": [ + "attributes": [ { - "name": "default", - "description": "Defines the items of this component.\n**Note:** The slot can hold any combination of components of type `ui5-menu-item` or `ui5-menu-separator` or both.", - "_ui5propertyName": "items", - "_ui5type": { - "text": "Array<IMenuItem>", - "references": [ - { - "name": "IMenuItem", - "package": "@ui5/webcomponents", - "module": "dist/Menu.js" - } - ] - }, - "_ui5privacy": "public" + "description": "Defines the component's check mode.", + "name": "check-mode", + "default": "\"None\"", + "fieldName": "checkMode", + "type": { + "text": "\"None\" | \"Single\" | \"Multiple\"" + } } ] } @@ -10028,65 +12301,49 @@ "_ui5type": { "text": "Array<HTMLElement>" }, - "_ui5privacy": "public", - "inheritedFrom": { - "name": "UserSettingsView", - "module": "dist/UserSettingsView.js" - } + "_ui5privacy": "public" } ], "members": [ { "kind": "field", - "name": "showManageAccount", + "name": "secondary", "type": { "text": "boolean" }, "default": "false", - "description": "Defines if the User Menu shows the `Manage Account` option.", + "description": "Indicates whether the view is secondary. It is relevant only if the view is used in `pages` slot of `ui5-user-settings-item`\nand controls the visibility of the back button.", "privacy": "public" }, { "kind": "field", - "name": "text", + "name": "selected", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Defines the title text of the user settings view.", - "privacy": "public", - "default": "undefined", - "inheritedFrom": { - "name": "UserSettingsView", - "module": "dist/UserSettingsView.js" - } + "default": "false", + "description": "Defines whether the view is selected. There can be just one selected view at a time.", + "privacy": "public" }, { "kind": "field", - "name": "selected", + "name": "showManageAccount", "type": { "text": "boolean" }, "default": "false", - "description": "Defines whether the view is selected. There can be just one selected view at a time.", - "privacy": "public", - "inheritedFrom": { - "name": "UserSettingsView", - "module": "dist/UserSettingsView.js" - } + "description": "Defines if the User Menu shows the `Manage Account` option.", + "privacy": "public" }, { "kind": "field", - "name": "secondary", + "name": "text", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Indicates whether the view is secondary. It is relevant only if the view is used in `pages` slot of `ui5-user-settings-item`\nand controls the visibility of the back button.", + "description": "Defines the title text of the user settings view.", "privacy": "public", - "inheritedFrom": { - "name": "UserSettingsView", - "module": "dist/UserSettingsView.js" - } + "default": "undefined" } ], "events": [ @@ -10115,27 +12372,14 @@ ], "attributes": [ { - "description": "Defines if the User Menu shows the `Manage Account` option.", - "name": "show-manage-account", + "description": "Indicates whether the view is secondary. It is relevant only if the view is used in `pages` slot of `ui5-user-settings-item`\nand controls the visibility of the back button.", + "name": "secondary", "default": "false", - "fieldName": "showManageAccount", + "fieldName": "secondary", "type": { "text": "boolean" } }, - { - "description": "Defines the title text of the user settings view.", - "name": "text", - "default": "undefined", - "fieldName": "text", - "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "UserSettingsView", - "module": "dist/UserSettingsView.js" - } - }, { "description": "Defines whether the view is selected. There can be just one selected view at a time.", "name": "selected", @@ -10143,23 +12387,24 @@ "fieldName": "selected", "type": { "text": "boolean" - }, - "inheritedFrom": { - "name": "UserSettingsView", - "module": "dist/UserSettingsView.js" } }, { - "description": "Indicates whether the view is secondary. It is relevant only if the view is used in `pages` slot of `ui5-user-settings-item`\nand controls the visibility of the back button.", - "name": "secondary", + "description": "Defines if the User Menu shows the `Manage Account` option.", + "name": "show-manage-account", "default": "false", - "fieldName": "secondary", + "fieldName": "showManageAccount", "type": { "text": "boolean" - }, - "inheritedFrom": { - "name": "UserSettingsView", - "module": "dist/UserSettingsView.js" + } + }, + { + "description": "Defines the title text of the user settings view.", + "name": "text", + "default": "undefined", + "fieldName": "text", + "type": { + "text": "string | undefined" } } ], @@ -10170,7 +12415,6 @@ }, "tagName": "ui5-user-settings-account-view", "customElement": true, - "_ui5experimental": true, "_ui5since": "2.17.0", "_ui5privacy": "public" } @@ -10204,23 +12448,19 @@ "name": "UserSettingsAppearanceView", "slots": [ { - "name": "default", - "description": "Defines the items of the component.", - "_ui5propertyName": "items", + "name": "additionalContent", + "description": "Defines additional content displayed below the items list.", "_ui5type": { - "text": "Array<UserSettingsAppearanceViewGroup | UserSettingsAppearanceViewItem>" + "text": "Array<HTMLElement>" }, - "_ui5privacy": "public", - "inheritedFrom": { - "name": "UserSettingsView", - "module": "dist/UserSettingsView.js" - } + "_ui5privacy": "public" }, { - "name": "additionalContent", - "description": "Defines additional content displayed below the items list.", + "name": "default", + "description": "Defines the items of the component.", + "_ui5propertyName": "items", "_ui5type": { - "text": "Array<HTMLElement>" + "text": "Array<UserSettingsAppearanceViewGroup | UserSettingsAppearanceViewItem>" }, "_ui5privacy": "public" } @@ -10228,17 +12468,13 @@ "members": [ { "kind": "field", - "name": "text", + "name": "secondary", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Defines the title text of the user settings view.", - "privacy": "public", - "default": "undefined", - "inheritedFrom": { - "name": "UserSettingsView", - "module": "dist/UserSettingsView.js" - } + "default": "false", + "description": "Indicates whether the view is secondary. It is relevant only if the view is used in `pages` slot of `ui5-user-settings-item`\nand controls the visibility of the back button.", + "privacy": "public" }, { "kind": "field", @@ -10248,25 +12484,17 @@ }, "default": "false", "description": "Defines whether the view is selected. There can be just one selected view at a time.", - "privacy": "public", - "inheritedFrom": { - "name": "UserSettingsView", - "module": "dist/UserSettingsView.js" - } + "privacy": "public" }, { "kind": "field", - "name": "secondary", + "name": "text", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Indicates whether the view is secondary. It is relevant only if the view is used in `pages` slot of `ui5-user-settings-item`\nand controls the visibility of the back button.", + "description": "Defines the title text of the user settings view.", "privacy": "public", - "inheritedFrom": { - "name": "UserSettingsView", - "module": "dist/UserSettingsView.js" - } + "default": "undefined" } ], "events": [ @@ -10313,21 +12541,16 @@ }, "tagName": "ui5-user-settings-appearance-view", "customElement": true, - "_ui5experimental": true, "_ui5since": "2.17.0", "_ui5privacy": "public", "attributes": [ { - "description": "Defines the title text of the user settings view.", - "name": "text", - "default": "undefined", - "fieldName": "text", + "description": "Indicates whether the view is secondary. It is relevant only if the view is used in `pages` slot of `ui5-user-settings-item`\nand controls the visibility of the back button.", + "name": "secondary", + "default": "false", + "fieldName": "secondary", "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "UserSettingsView", - "module": "dist/UserSettingsView.js" + "text": "boolean" } }, { @@ -10337,23 +12560,15 @@ "fieldName": "selected", "type": { "text": "boolean" - }, - "inheritedFrom": { - "name": "UserSettingsView", - "module": "dist/UserSettingsView.js" } }, { - "description": "Indicates whether the view is secondary. It is relevant only if the view is used in `pages` slot of `ui5-user-settings-item`\nand controls the visibility of the back button.", - "name": "secondary", - "default": "false", - "fieldName": "secondary", + "description": "Defines the title text of the user settings view.", + "name": "text", + "default": "undefined", + "fieldName": "text", "type": { - "text": "boolean" - }, - "inheritedFrom": { - "name": "UserSettingsView", - "module": "dist/UserSettingsView.js" + "text": "string | undefined" } } ] @@ -10426,27 +12641,36 @@ }, "tagName": "ui5-user-settings-appearance-view-group", "customElement": true, - "_ui5experimental": true, "_ui5since": "2.17.0", "_ui5privacy": "public", + "cssParts": [ + { + "description": "Used to style the header item of the group", + "name": "header" + }, + { + "description": "Used to style the title of the group header", + "name": "title" + } + ], "members": [ { "kind": "field", - "name": "headerText", + "name": "headerAccessibleName", "type": { "text": "string | undefined" }, - "description": "Defines the header text of the <code>ui5-li-group</code>.", + "description": "Defines the accessible name of the header.", "privacy": "public", "default": "undefined" }, { "kind": "field", - "name": "headerAccessibleName", + "name": "headerText", "type": { "text": "string | undefined" }, - "description": "Defines the accessible name of the header.", + "description": "Defines the header text of the <code>ui5-li-group</code>.", "privacy": "public", "default": "undefined" }, @@ -10471,7 +12695,7 @@ ], "events": [ { - "name": "move-over", + "name": "move", "_ui5privacy": "public", "type": { "text": "CustomEvent<ListItemGroupMoveEventDetail>", @@ -10483,9 +12707,9 @@ } ] }, - "description": "Fired when a movable list item is moved over a potential drop target during a dragging operation.\n\nIf the new position is valid, prevent the default action of the event using `preventDefault()`.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, + "description": "Fired when a movable list item is dropped onto a drop target.\n\n**Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, "_ui5Bubbles": true, "_ui5since": "2.1.0", "_ui5parameters": [ @@ -10493,22 +12717,22 @@ "type": { "text": "object" }, - "name": "source", + "name": "destination", "_ui5privacy": "public", - "description": "Contains information about the moved element under `element` property." + "description": "Contains information about the destination of the moved element. Has `element` and `placement` properties." }, { "type": { "text": "object" }, - "name": "destination", + "name": "source", "_ui5privacy": "public", - "description": "Contains information about the destination of the moved element. Has `element` and `placement` properties." + "description": "Contains information about the moved element under `element` property." } ] }, { - "name": "move", + "name": "move-over", "_ui5privacy": "public", "type": { "text": "CustomEvent<ListItemGroupMoveEventDetail>", @@ -10520,9 +12744,9 @@ } ] }, - "description": "Fired when a movable list item is dropped onto a drop target.\n\n**Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, + "description": "Fired when a movable list item is moved over a potential drop target during a dragging operation.\n\nIf the new position is valid, prevent the default action of the event using `preventDefault()`.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, "_ui5Bubbles": true, "_ui5since": "2.1.0", "_ui5parameters": [ @@ -10530,25 +12754,48 @@ "type": { "text": "object" }, - "name": "source", + "name": "destination", "_ui5privacy": "public", - "description": "Contains information about the moved element under `element` property." + "description": "Contains information about the destination of the moved element. Has `element` and `placement` properties." }, { "type": { "text": "object" }, - "name": "destination", + "name": "source", "_ui5privacy": "public", - "description": "Contains information about the destination of the moved element. Has `element` and `placement` properties." + "description": "Contains information about the moved element under `element` property." } ] } ], - "cssParts": [ + "attributes": [ { - "description": "Used to style the header item of the group", - "name": "header" + "description": "Defines the accessible name of the header.", + "name": "header-accessible-name", + "default": "undefined", + "fieldName": "headerAccessibleName", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the header text of the <code>ui5-li-group</code>.", + "name": "header-text", + "default": "undefined", + "fieldName": "headerText", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines if the text of the component should wrap when it's too long.\nWhen set to \"Normal\", the content (title, description) will be wrapped\nusing the `ui5-expandable-text` component.<br/>\n\nThe text can wrap up to 100 characters on small screens (size S) and\nup to 300 characters on larger screens (size M and above). When text exceeds\nthese limits, it truncates with an ellipsis followed by a text expansion trigger.\n\nAvailable options are:\n- `None` (default) - The text will truncate with an ellipsis.\n- `Normal` - The text will wrap (without truncation).", + "name": "wrapping-type", + "default": "\"None\"", + "fieldName": "wrappingType", + "type": { + "text": "\"None\" | \"Normal\"" + } } ] } @@ -10583,58 +12830,61 @@ "members": [ { "kind": "field", - "name": "itemKey", + "name": "colorScheme", "type": { "text": "string" }, - "default": "\"\"", - "description": "Defines the unique identifier of the item.", + "default": "\"Accent7\"", + "description": "Defines the color scheme of the avatar.", "privacy": "public" }, { "kind": "field", - "name": "text", + "name": "icon", "type": { "text": "string" }, - "default": "\"\"", - "description": "Defines the text label displayed for the appearance item.", + "default": "\"product\"", + "description": "Defines the icon of the appearance item.", "privacy": "public" }, { "kind": "field", - "name": "icon", + "name": "itemKey", "type": { "text": "string" }, - "default": "\"product\"", - "description": "Defines the icon of the appearance item.", + "default": "\"\"", + "description": "Defines the unique identifier of the item.", "privacy": "public" }, { "kind": "field", - "name": "colorScheme", + "name": "text", "type": { "text": "string" }, - "default": "\"Accent7\"", - "description": "Defines the color scheme of the avatar.", + "default": "\"\"", + "description": "Defines the text label displayed for the appearance item.", "privacy": "public" }, { "kind": "field", - "name": "movable", + "name": "accessibilityAttributes", "type": { - "text": "boolean" + "text": "ListItemAccessibilityAttributes", + "references": [ + { + "name": "ListItemAccessibilityAttributes", + "package": "@ui5/webcomponents", + "module": "dist/ListItem.js" + } + ] }, - "default": "false", - "description": "Defines whether the item is movable.", + "default": "{}", + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaSetsize**: Defines the number of items in the current set when not all items in the set are present in the DOM.\n**Note:** The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`.\n\n\t- **ariaPosinset**: Defines an element's number or position in the current set when not all items are present in the DOM.\n\t**Note:** The value 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.", "privacy": "public", - "_ui5since": "2.0.0", - "inheritedFrom": { - "name": "ListItemBase", - "module": "dist/ListItemBase.js" - } + "_ui5since": "1.15.0" }, { "kind": "field", @@ -10645,54 +12895,36 @@ "description": "Defines the text alternative of the component.\n\n**Note**: If not provided a default text alternative will be set, if present.", "default": "undefined", "privacy": "public", - "_ui5since": "1.0.0-rc.15", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "_ui5since": "1.0.0-rc.15" }, { "kind": "field", - "name": "type", + "name": "highlight", "type": { - "text": "ListItemType", + "text": "Highlight", "references": [ { - "name": "ListItemType", + "name": "Highlight", "package": "@ui5/webcomponents", - "module": "dist/types/ListItemType.js" + "module": "dist/types/Highlight.js" } ] }, - "default": "\"Active\"", - "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": "\"None\"", + "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", "privacy": "public", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "_ui5since": "1.24" }, { "kind": "field", - "name": "accessibilityAttributes", + "name": "movable", "type": { - "text": "ListItemAccessibilityAttributes", - "references": [ - { - "name": "ListItemAccessibilityAttributes", - "package": "@ui5/webcomponents", - "module": "dist/ListItem.js" - } - ] + "text": "boolean" }, - "default": "{}", - "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaSetsize**: Defines the number of items in the current set when not all items in the set are present in the DOM.\n**Note:** The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`.\n\n\t- **ariaPosinset**: Defines an element's number or position in the current set when not all items are present in the DOM.\n\t**Note:** The value 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": "false", + "description": "Defines whether the item is movable.", "privacy": "public", - "_ui5since": "1.15.0", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "_ui5since": "2.0.0" }, { "kind": "field", @@ -10703,11 +12935,17 @@ "default": "false", "description": "The navigated state of the list item.\nIf set to `true`, a navigation indicator is displayed at the end of the list item.", "privacy": "public", - "_ui5since": "1.10.0", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "_ui5since": "1.10.0" + }, + { + "kind": "field", + "name": "selected", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines the selected state of the component.", + "privacy": "public" }, { "kind": "field", @@ -10718,50 +12956,45 @@ "description": "Defines the text of the tooltip that would be displayed for the list item.", "default": "undefined", "privacy": "public", - "_ui5since": "1.23.0", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "_ui5since": "1.23.0" }, { "kind": "field", - "name": "highlight", + "name": "type", "type": { - "text": "Highlight", + "text": "ListItemType", "references": [ { - "name": "Highlight", + "name": "ListItemType", "package": "@ui5/webcomponents", - "module": "dist/types/Highlight.js" + "module": "dist/types/ListItemType.js" } ] }, - "default": "\"None\"", - "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", - "privacy": "public", - "_ui5since": "1.24", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" + "default": "\"Active\"", + "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.", + "privacy": "public" + } + ], + "attributes": [ + { + "description": "Defines the color scheme of the avatar.", + "name": "color-scheme", + "default": "\"Accent7\"", + "fieldName": "colorScheme", + "type": { + "text": "string" } }, { - "kind": "field", - "name": "selected", + "description": "Defines the icon of the appearance item.", + "name": "icon", + "default": "\"product\"", + "fieldName": "icon", "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines the selected state of the component.", - "privacy": "public", - "inheritedFrom": { - "name": "ListItemBase", - "module": "dist/ListItemBase.js" + "text": "string" } - } - ], - "attributes": [ + }, { "description": "Defines the unique identifier of the item.", "name": "item-key", @@ -10781,21 +13014,75 @@ } }, { - "description": "Defines the icon of the appearance item.", - "name": "icon", - "default": "\"product\"", - "fieldName": "icon", + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaSetsize**: Defines the number of items in the current set when not all items in the set are present in the DOM.\n**Note:** The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`.\n\n\t- **ariaPosinset**: Defines an element's number or position in the current set when not all items are present in the DOM.\n\t**Note:** The value 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.", + "name": "accessibility-attributes", + "default": "{}", + "fieldName": "accessibilityAttributes", "type": { - "text": "string" + "text": "ListItemAccessibilityAttributes" } }, { - "description": "Defines the color scheme of the avatar.", - "name": "color-scheme", - "default": "\"Accent7\"", - "fieldName": "colorScheme", + "description": "Defines the text alternative of the component.\n\n**Note**: If not provided a default text alternative will be set, if present.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", "type": { - "text": "string" + "text": "string | undefined" + } + }, + { + "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", + "name": "highlight", + "default": "\"None\"", + "fieldName": "highlight", + "type": { + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" + } + }, + { + "description": "Defines whether the item is movable.", + "name": "movable", + "default": "false", + "fieldName": "movable", + "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.", + "name": "navigated", + "default": "false", + "fieldName": "navigated", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines the selected state of the component.", + "name": "selected", + "default": "false", + "fieldName": "selected", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines the text of the tooltip that would be displayed for the list item.", + "name": "tooltip", + "default": "undefined", + "fieldName": "tooltip", + "type": { + "text": "string | undefined" + } + }, + { + "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.", + "name": "type", + "default": "\"Active\"", + "fieldName": "type", + "type": { + "text": "\"Navigation\" | \"Inactive\" | \"Active\" | \"Detail\"" } } ], @@ -10806,9 +13093,34 @@ }, "tagName": "ui5-user-settings-appearance-view-item", "customElement": true, - "_ui5experimental": true, "_ui5since": "2.17.0", "_ui5privacy": "public", + "cssParts": [ + { + "description": "Used to style the checkbox rendered when the list item is in multiple selection mode", + "name": "checkbox" + }, + { + "description": "Used to style the content area of the list item", + "name": "content" + }, + { + "description": "Used to style the button rendered when the list item is in delete mode", + "name": "delete-button" + }, + { + "description": "Used to style the button rendered when the list item is of type detail", + "name": "detail-button" + }, + { + "description": "Used to style the main li tag of the list item", + "name": "native-li" + }, + { + "description": "Used to style the radio button rendered when the list item is in single selection mode", + "name": "radio" + } + ], "slots": [ { "description": "Defines the content of the component.", @@ -10832,11 +13144,7 @@ } ] }, - "_ui5privacy": "public", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "_ui5privacy": "public" } ], "events": [ @@ -10849,37 +13157,7 @@ "description": "Fired when the user clicks on the detail button when type is `Detail`.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } - } - ], - "cssParts": [ - { - "description": "Used to style the main li tag of the list item", - "name": "native-li" - }, - { - "description": "Used to style the content area of the list item", - "name": "content" - }, - { - "description": "Used to style the button rendered when the list item is of type detail", - "name": "detail-button" - }, - { - "description": "Used to style the button rendered when the list item is in delete mode", - "name": "delete-button" - }, - { - "description": "Used to style the radio button rendered when the list item is in single selection mode", - "name": "radio" - }, - { - "description": "Used to style the checkbox rendered when the list item is in multiple selection mode", - "name": "checkbox" + "_ui5Bubbles": true } ] } @@ -10945,16 +13223,6 @@ } ], "members": [ - { - "kind": "field", - "name": "open", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines, if the User Settings Dialog is opened.", - "privacy": "public" - }, { "kind": "field", "name": "headerText", @@ -10965,6 +13233,16 @@ "privacy": "public", "default": "undefined" }, + { + "kind": "field", + "name": "open", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines, if the User Settings Dialog is opened.", + "privacy": "public" + }, { "kind": "field", "name": "showSearchField", @@ -10977,6 +13255,39 @@ } ], "events": [ + { + "name": "before-close", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired before the settings dialog is closed.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": false + }, + { + "name": "close", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when a settings dialog is closed.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": false + }, + { + "name": "open", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when a settings dialog is open.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": false + }, { "name": "selection-change", "_ui5privacy": "public", @@ -11011,51 +13322,9 @@ "description": "The selected `user settings item`." } ] - }, - { - "name": "open", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired when a settings dialog is open.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": false - }, - { - "name": "before-close", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired before the settings dialog is closed.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": false - }, - { - "name": "close", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired when a settings dialog is closed.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": false } ], "attributes": [ - { - "description": "Defines, if the User Settings Dialog is opened.", - "name": "open", - "default": "false", - "fieldName": "open", - "type": { - "text": "boolean" - } - }, { "description": "Defines the headerText of the item.", "name": "header-text", @@ -11065,6 +13334,15 @@ "text": "string | undefined" } }, + { + "description": "Defines, if the User Settings Dialog is opened.", + "name": "open", + "default": "false", + "fieldName": "open", + "type": { + "text": "boolean" + } + }, { "description": "Defines if the Search Field would be displayed.\n\n**Note:** By default the Search Field is not displayed.", "name": "show-search-field", @@ -11082,7 +13360,6 @@ }, "tagName": "ui5-user-settings-dialog", "customElement": true, - "_ui5experimental": true, "_ui5since": "2.8.0", "_ui5privacy": "public" } @@ -11150,22 +13427,22 @@ "members": [ { "kind": "field", - "name": "text", + "name": "accessibleName", "type": { - "text": "string" + "text": "string | undefined" }, - "default": "\"\"", - "description": "Defines the text of the user settings item.", + "description": "Defines the accessible ARIA name of the component.", + "default": "undefined", "privacy": "public" }, { "kind": "field", - "name": "tooltip", + "name": "disabled", "type": { - "text": "string" + "text": "boolean" }, - "default": "\"\"", - "description": "Defines the tooltip of the component.\n\nA tooltip attribute should be provided to represent the meaning or function when the component is collapsed and only the icon is visible.", + "default": "false", + "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is completely noninteractive.", "privacy": "public" }, { @@ -11180,22 +13457,12 @@ }, { "kind": "field", - "name": "selected", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Shows item tab.", - "privacy": "public" - }, - { - "kind": "field", - "name": "disabled", + "name": "icon", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is completely noninteractive.", + "default": "\"globe\"", + "description": "Defines the icon of the component.", "privacy": "public" }, { @@ -11220,22 +13487,32 @@ }, { "kind": "field", - "name": "icon", + "name": "selected", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Shows item tab.", + "privacy": "public" + }, + { + "kind": "field", + "name": "text", "type": { "text": "string" }, - "default": "\"globe\"", - "description": "Defines the icon of the component.", + "default": "\"\"", + "description": "Defines the text of the user settings item.", "privacy": "public" }, { "kind": "field", - "name": "accessibleName", + "name": "tooltip", "type": { - "text": "string | undefined" + "text": "string" }, - "description": "Defines the accessible ARIA name of the component.", - "default": "undefined", + "default": "\"\"", + "description": "Defines the tooltip of the component.\n\nA tooltip attribute should be provided to represent the meaning or function when the component is collapsed and only the icon is visible.", "privacy": "public" } ], @@ -11278,21 +13555,21 @@ ], "attributes": [ { - "description": "Defines the text of the user settings item.", - "name": "text", - "default": "\"\"", - "fieldName": "text", + "description": "Defines the accessible ARIA name of the component.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", "type": { - "text": "string" + "text": "string | undefined" } }, { - "description": "Defines the tooltip of the component.\n\nA tooltip attribute should be provided to represent the meaning or function when the component is collapsed and only the icon is visible.", - "name": "tooltip", - "default": "\"\"", - "fieldName": "tooltip", + "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is completely noninteractive.", + "name": "disabled", + "default": "false", + "fieldName": "disabled", "type": { - "text": "string" + "text": "boolean" } }, { @@ -11305,21 +13582,12 @@ } }, { - "description": "Shows item tab.", - "name": "selected", - "default": "false", - "fieldName": "selected", - "type": { - "text": "boolean" - } - }, - { - "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is completely noninteractive.", - "name": "disabled", - "default": "false", - "fieldName": "disabled", + "description": "Defines the icon of the component.", + "name": "icon", + "default": "\"globe\"", + "fieldName": "icon", "type": { - "text": "boolean" + "text": "string" } }, { @@ -11341,21 +13609,30 @@ } }, { - "description": "Defines the icon of the component.", - "name": "icon", - "default": "\"globe\"", - "fieldName": "icon", + "description": "Shows item tab.", + "name": "selected", + "default": "false", + "fieldName": "selected", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines the text of the user settings item.", + "name": "text", + "default": "\"\"", + "fieldName": "text", "type": { "text": "string" } }, { - "description": "Defines the accessible ARIA name of the component.", - "name": "accessible-name", - "default": "undefined", - "fieldName": "accessibleName", + "description": "Defines the tooltip of the component.\n\nA tooltip attribute should be provided to represent the meaning or function when the component is collapsed and only the icon is visible.", + "name": "tooltip", + "default": "\"\"", + "fieldName": "tooltip", "type": { - "text": "string | undefined" + "text": "string" } } ], @@ -11366,7 +13643,6 @@ }, "tagName": "ui5-user-settings-item", "customElement": true, - "_ui5experimental": true, "_ui5since": "2.8.0", "_ui5privacy": "public" } @@ -11412,13 +13688,13 @@ "members": [ { "kind": "field", - "name": "text", + "name": "secondary", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Defines the title text of the user settings view.", - "privacy": "public", - "default": "undefined" + "default": "false", + "description": "Indicates whether the view is secondary. It is relevant only if the view is used in `pages` slot of `ui5-user-settings-item`\nand controls the visibility of the back button.", + "privacy": "public" }, { "kind": "field", @@ -11432,23 +13708,23 @@ }, { "kind": "field", - "name": "secondary", + "name": "text", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Indicates whether the view is secondary. It is relevant only if the view is used in `pages` slot of `ui5-user-settings-item`\nand controls the visibility of the back button.", - "privacy": "public" + "description": "Defines the title text of the user settings view.", + "privacy": "public", + "default": "undefined" } ], "attributes": [ { - "description": "Defines the title text of the user settings view.", - "name": "text", - "default": "undefined", - "fieldName": "text", + "description": "Indicates whether the view is secondary. It is relevant only if the view is used in `pages` slot of `ui5-user-settings-item`\nand controls the visibility of the back button.", + "name": "secondary", + "default": "false", + "fieldName": "secondary", "type": { - "text": "string | undefined" + "text": "boolean" } }, { @@ -11461,12 +13737,12 @@ } }, { - "description": "Indicates whether the view is secondary. It is relevant only if the view is used in `pages` slot of `ui5-user-settings-item`\nand controls the visibility of the back button.", - "name": "secondary", - "default": "false", - "fieldName": "secondary", + "description": "Defines the title text of the user settings view.", + "name": "text", + "default": "undefined", + "fieldName": "text", "type": { - "text": "boolean" + "text": "string | undefined" } } ], @@ -11477,7 +13753,6 @@ }, "tagName": "ui5-user-settings-view", "customElement": true, - "_ui5experimental": true, "_ui5since": "2.8.0", "_ui5privacy": "public" } @@ -11503,34 +13778,19 @@ }, { "kind": "javascript-module", - "path": "dist/ViewSettingsDialog.js", - "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\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", - "cssParts": [ - { - "description": "Used to style the header.", - "name": "header" - } - ], - "slots": [ - { - "name": "sortItems", - "description": "Defines the list of items against which the user could sort data.\n\n**Note:** If you want to use this slot, you need to import used item: `import \"@ui5/webcomponents-fiori/dist/SortItem.js\";`", - "_ui5type": { - "text": "Array<SortItem>", - "references": [ - { - "name": "SortItem", - "package": "@ui5/webcomponents-fiori", - "module": "dist/SortItem.js" - } - ] - }, - "_ui5privacy": "public" - }, + "path": "dist/ViewSettingsDialog.js", + "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\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", + "cssParts": [ + { + "description": "Used to style the header.", + "name": "header" + } + ], + "slots": [ { "name": "filterItems", "description": "Defines the `filterItems` list.\n\n**Note:** If you want to use this slot, you need to import used item: `import \"@ui5/webcomponents-fiori/dist/FilterItem.js\";`", @@ -11560,19 +13820,24 @@ ] }, "_ui5privacy": "public" + }, + { + "name": "sortItems", + "description": "Defines the list of items against which the user could sort data.\n\n**Note:** If you want to use this slot, you need to import used item: `import \"@ui5/webcomponents-fiori/dist/SortItem.js\";`", + "_ui5type": { + "text": "Array<SortItem>", + "references": [ + { + "name": "SortItem", + "package": "@ui5/webcomponents-fiori", + "module": "dist/SortItem.js" + } + ] + }, + "_ui5privacy": "public" } ], "members": [ - { - "kind": "field", - "name": "sortDescending", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines the initial sort order.", - "privacy": "public" - }, { "kind": "field", "name": "groupDescending", @@ -11622,58 +13887,79 @@ ], "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" + }, + { + "kind": "field", + "name": "sortDescending", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines the initial sort order.", + "privacy": "public" } ], "events": [ { - "name": "confirm", + "name": "before-open", "_ui5privacy": "public", "type": { - "text": "CustomEvent<ViewSettingsDialogConfirmEventDetail>", + "text": "CustomEvent" + }, + "description": "Fired before the component is opened.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": false + }, + { + "name": "cancel", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<ViewSettingsDialogCancelEventDetail>", "references": [ { - "name": "ViewSettingsDialogConfirmEventDetail", + "name": "ViewSettingsDialogCancelEventDetail", "package": "@ui5/webcomponents-fiori", "module": "dist/ViewSettingsDialog.js" } ] }, - "description": "Fired when confirmation button is activated.", + "description": "Fired when cancel button is activated.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, "_ui5Bubbles": true, "_ui5parameters": [ { "type": { - "text": "String" + "text": "Array" }, - "name": "sortOrder", + "name": "filters", "_ui5privacy": "public", - "description": "The current sort order selected." + "description": "The selected filters items." }, { "type": { "text": "String" }, - "name": "sortBy", + "name": "groupBy", "_ui5privacy": "public", - "description": "The currently selected `ui5-sort-item` text attribute." + "description": "The currently selected `ui5-group-item` text attribute." }, { "type": { "text": "HTMLElement" }, - "name": "sortByItem", + "name": "groupByItem", "_ui5privacy": "public", - "description": "The currently selected `ui5-sort-item`." + "description": "The currently selected `ui5-group-item`." }, { "type": { "text": "Boolean" }, - "name": "sortDescending", + "name": "groupDescending", "_ui5privacy": "public", - "description": "The selected sort order (true = descending, false = ascending)." + "description": "The selected group order (true = descending, false = ascending)." }, { "type": { @@ -11687,85 +13973,97 @@ "type": { "text": "String" }, - "name": "groupBy", + "name": "sortBy", "_ui5privacy": "public", - "description": "The currently selected `ui5-group-item` text attribute." + "description": "The currently selected `ui5-sort-item` text attribute." }, { "type": { "text": "HTMLElement" }, - "name": "groupByItem", + "name": "sortByItem", "_ui5privacy": "public", - "description": "The currently selected `ui5-group-item`." + "description": "The currently selected `ui5-sort-item`." }, { "type": { "text": "Boolean" }, - "name": "groupDescending", + "name": "sortDescending", "_ui5privacy": "public", - "description": "The selected group order (true = descending, false = ascending)." + "description": "The selected sort order (true = descending, false = ascending)." }, { "type": { - "text": "Array" + "text": "String" }, - "name": "filters", + "name": "sortOrder", "_ui5privacy": "public", - "description": "The selected filters items." + "description": "The current sort order selected." } ] }, { - "name": "cancel", + "name": "close", "_ui5privacy": "public", "type": { - "text": "CustomEvent<ViewSettingsDialogCancelEventDetail>", + "text": "CustomEvent" + }, + "description": "Fired after the dialog is closed.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5since": "2.0.0" + }, + { + "name": "confirm", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<ViewSettingsDialogConfirmEventDetail>", "references": [ { - "name": "ViewSettingsDialogCancelEventDetail", + "name": "ViewSettingsDialogConfirmEventDetail", "package": "@ui5/webcomponents-fiori", "module": "dist/ViewSettingsDialog.js" } ] }, - "description": "Fired when cancel button is activated.", + "description": "Fired when confirmation button is activated.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, "_ui5Bubbles": true, "_ui5parameters": [ { "type": { - "text": "String" + "text": "Array" }, - "name": "sortOrder", + "name": "filters", "_ui5privacy": "public", - "description": "The current sort order selected." + "description": "The selected filters items." }, { "type": { "text": "String" }, - "name": "sortBy", + "name": "groupBy", "_ui5privacy": "public", - "description": "The currently selected `ui5-sort-item` text attribute." + "description": "The currently selected `ui5-group-item` text attribute." }, { "type": { "text": "HTMLElement" }, - "name": "sortByItem", + "name": "groupByItem", "_ui5privacy": "public", - "description": "The currently selected `ui5-sort-item`." + "description": "The currently selected `ui5-group-item`." }, { "type": { "text": "Boolean" }, - "name": "sortDescending", + "name": "groupDescending", "_ui5privacy": "public", - "description": "The selected sort order (true = descending, false = ascending)." + "description": "The selected group order (true = descending, false = ascending)." }, { "type": { @@ -11779,47 +14077,36 @@ "type": { "text": "String" }, - "name": "groupBy", + "name": "sortBy", "_ui5privacy": "public", - "description": "The currently selected `ui5-group-item` text attribute." + "description": "The currently selected `ui5-sort-item` text attribute." }, { "type": { "text": "HTMLElement" }, - "name": "groupByItem", + "name": "sortByItem", "_ui5privacy": "public", - "description": "The currently selected `ui5-group-item`." + "description": "The currently selected `ui5-sort-item`." }, { "type": { "text": "Boolean" }, - "name": "groupDescending", + "name": "sortDescending", "_ui5privacy": "public", - "description": "The selected group order (true = descending, false = ascending)." + "description": "The selected sort order (true = descending, false = ascending)." }, { "type": { - "text": "Array" + "text": "String" }, - "name": "filters", + "name": "sortOrder", "_ui5privacy": "public", - "description": "The selected filters items." + "description": "The current sort order selected." } ] }, - { - "name": "before-open", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired before the component is opened.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": false - }, { "name": "open", "_ui5privacy": "public", @@ -11831,30 +14118,9 @@ "_ui5allowPreventDefault": false, "_ui5Bubbles": true, "_ui5since": "2.0.0" - }, - { - "name": "close", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired after the dialog is closed.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5since": "2.0.0" } ], "attributes": [ - { - "description": "Defines the initial sort order.", - "name": "sort-descending", - "default": "false", - "fieldName": "sortDescending", - "type": { - "text": "boolean" - } - }, { "description": "Defines the initial group order.", "name": "group-descending", @@ -11872,6 +14138,15 @@ "type": { "text": "boolean" } + }, + { + "description": "Defines the initial sort order.", + "name": "sort-descending", + "default": "false", + "fieldName": "sortDescending", + "type": { + "text": "boolean" + } } ], "superclass": { @@ -11990,9 +14265,9 @@ } ] }, - "name": "step", + "name": "previousStep", "_ui5privacy": "public", - "description": "The new step." + "description": "The previous step." }, { "type": { @@ -12005,9 +14280,9 @@ } ] }, - "name": "previousStep", + "name": "step", "_ui5privacy": "public", - "description": "The previous step." + "description": "The new step." }, { "type": { @@ -12082,25 +14357,23 @@ "members": [ { "kind": "field", - "name": "titleText", + "name": "branching", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Defines the `titleText` of the step.\n\n**Note:** The text is displayed in the `ui5-wizard` navigation header.", - "default": "undefined", - "privacy": "public", - "_ui5since": "1.0.0-rc.15" + "default": "false", + "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.", + "privacy": "public" }, { "kind": "field", - "name": "subtitleText", + "name": "disabled", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Defines the `subtitleText` of the step.\n\n**Note:** the text is displayed in the `ui5-wizard` navigation header.", - "default": "undefined", - "privacy": "public", - "_ui5since": "1.0.0-rc.15" + "default": "false", + "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.", + "privacy": "public" }, { "kind": "field", @@ -12114,52 +14387,54 @@ }, { "kind": "field", - "name": "disabled", + "name": "selected", "type": { "text": "boolean" }, "default": "false", - "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.", + "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.", "privacy": "public" }, { "kind": "field", - "name": "selected", + "name": "subtitleText", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "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.", - "privacy": "public" + "description": "Defines the `subtitleText` of the step.\n\n**Note:** the text is displayed in the `ui5-wizard` navigation header.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.0.0-rc.15" }, { "kind": "field", - "name": "branching", + "name": "titleText", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "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.", - "privacy": "public" + "description": "Defines the `titleText` of the step.\n\n**Note:** The text is displayed in the `ui5-wizard` navigation header.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.0.0-rc.15" } ], "attributes": [ { - "description": "Defines the `titleText` of the step.\n\n**Note:** The text is displayed in the `ui5-wizard` navigation header.", - "name": "title-text", - "default": "undefined", - "fieldName": "titleText", + "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.", + "name": "branching", + "default": "false", + "fieldName": "branching", "type": { - "text": "string | undefined" + "text": "boolean" } }, { - "description": "Defines the `subtitleText` of the step.\n\n**Note:** the text is displayed in the `ui5-wizard` navigation header.", - "name": "subtitle-text", - "default": "undefined", - "fieldName": "subtitleText", + "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.", + "name": "disabled", + "default": "false", + "fieldName": "disabled", "type": { - "text": "string | undefined" + "text": "boolean" } }, { @@ -12172,30 +14447,30 @@ } }, { - "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.", - "name": "disabled", + "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.", + "name": "selected", "default": "false", - "fieldName": "disabled", + "fieldName": "selected", "type": { "text": "boolean" } }, { - "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.", - "name": "selected", - "default": "false", - "fieldName": "selected", + "description": "Defines the `subtitleText` of the step.\n\n**Note:** the text is displayed in the `ui5-wizard` navigation header.", + "name": "subtitle-text", + "default": "undefined", + "fieldName": "subtitleText", "type": { - "text": "boolean" + "text": "string | undefined" } }, { - "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.", - "name": "branching", - "default": "false", - "fieldName": "branching", + "description": "Defines the `titleText` of the step.\n\n**Note:** The text is displayed in the `ui5-wizard` navigation header.", + "name": "title-text", + "default": "undefined", + "fieldName": "titleText", "type": { - "text": "boolean" + "text": "string | undefined" } } ], @@ -12233,7 +14508,22 @@ { "kind": "javascript-module", "path": "dist/WizardTab.js", - "declarations": [], + "declarations": [ + { + "kind": "class", + "description": "### Overview\nPrivate component, used internally by the `ui5-wizard`\nto represent a \"step\" in the navigation header of the `ui5-wizard`.\n\n### Usage\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/WizardTab.js\";` (imported with <ui5-wizard>)", + "name": "WizardTab", + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-wizard-tab", + "customElement": true, + "_ui5privacy": "private", + "members": [] + } + ], "exports": [ { "kind": "js", @@ -12242,6 +14532,14 @@ "name": "WizardTab", "module": "dist/WizardTab.js" } + }, + { + "kind": "custom-element-definition", + "name": "ui5-wizard-tab", + "declaration": { + "name": "WizardTab", + "module": "dist/WizardTab.js" + } } ] }, @@ -12287,6 +14585,102 @@ "declarations": [], "exports": [] }, + { + "kind": "javascript-module", + "path": "dist/shellbar/IShellBarSearchController.js", + "declarations": [], + "exports": [] + }, + { + "kind": "javascript-module", + "path": "dist/shellbar/ShellBarAccessibility.js", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "ShellBarAccessibility", + "module": "dist/shellbar/ShellBarAccessibility.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/shellbar/ShellBarItemNavigation.js", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "ShellBarItemNavigation", + "module": "dist/shellbar/ShellBarItemNavigation.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/shellbar/ShellBarLegacy.js", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "ShellBarLegacy", + "module": "dist/shellbar/ShellBarLegacy.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/shellbar/ShellBarOverflow.js", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "ShellBarOverflow", + "module": "dist/shellbar/ShellBarOverflow.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/shellbar/ShellBarSearch.js", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "ShellBarSearch", + "module": "dist/shellbar/ShellBarSearch.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/shellbar/ShellBarSearchLegacy.js", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "ShellBarSearchLegacy", + "module": "dist/shellbar/ShellBarSearchLegacy.js" + } + } + ] + }, { "kind": "javascript-module", "path": "dist/types/FCLLayout.js", @@ -12301,36 +14695,27 @@ "kind": "field", "static": true, "privacy": "public", - "description": "The layout will display 1 column.", - "default": "OneColumn", - "name": "OneColumn", - "readonly": true - }, - { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\nDesktop: Defaults to 67 - 33 - -- percent widths of columns. Start (expanded) and Mid columns are displayed.\nTablet: Defaults to 67 - 33 - -- percent widths of columns. Start (expanded) and Mid columns are displayed.\nPhone: Fixed -- 100 -- percent widths of columns, only the Mid column is displayed\n\nUse to display both a list and a detail page when the user should focus on the list page.", - "default": "TwoColumnsStartExpanded", - "name": "TwoColumnsStartExpanded", + "description": "Desktop: Fixed -- -- 100 percent widths of columns, only the End column is displayed\nTablet: Fixed -- -- 100 percent widths of columns, only the End column is displayed\nPhone: Fixed -- -- 100 percent widths of columns, only the End column is displayed\n\nUse to display a detail-detail page only, when the user should focus entirely on it.", + "default": "EndColumnFullScreen", + "name": "EndColumnFullScreen", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "Desktop: Defaults to 33 - 67 - -- percent widths of columns. Start and Mid (expanded) columns are displayed\nTablet: Defaults to 33 - 67 - -- percent widths of columns. Start and Mid (expanded) columns are displayed\nPhone: Fixed -- 100 -- percent widths of columns, only the Mid column is displayed\n\nUse to display both a list and a detail page when the user should focus on the detail page.", - "default": "TwoColumnsMidExpanded", - "name": "TwoColumnsMidExpanded", + "description": "Desktop: Fixed -- 100 -- percent widths of columns, only the Mid column is displayed\nTablet: Fixed -- 100 -- percent widths of columns, only the Mid column is displayed\nPhone: Fixed -- 100 -- percent widths of columns, only the Mid column is displayed\n\nUse to display a detail page only, when the user should focus entirely on it.", + "default": "MidColumnFullScreen", + "name": "MidColumnFullScreen", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "Desktop: Defaults to 25 - 50 - 25 percent widths of columns. Start, Mid (expanded) and End columns are displayed\nTablet: Defaults to 0 - 67 - 33 percent widths of columns. Mid (expanded) and End columns are displayed, Start is accessible by dragging the columns-separator\nPhone: Fixed -- -- 100 percent widths of columns, only the End column is displayed\n\nUse to display all three pages (list, detail, detail-detail) when the user should focus on the detail.", - "default": "ThreeColumnsMidExpanded", - "name": "ThreeColumnsMidExpanded", + "description": "The layout will display 1 column.", + "default": "OneColumn", + "name": "OneColumn", "readonly": true }, { @@ -12346,9 +14731,9 @@ "kind": "field", "static": true, "privacy": "public", - "description": "Desktop: Defaults to 67 - 33 - 0 percent widths of columns. Start (expanded) and Mid columns are displayed, End is accessible by dragging the columns-separator\nTablet: Defaults to 67 - 33 - 0 percent widths of columns. Start (expanded) and Mid columns are displayed, End is accessible by dragging the columns-separator\nPhone: Fixed -- -- 100 percent widths of columns, only the End column is displayed\n\nUse to display the list and detail pages when the user should focus on the list.\nThe detail-detail is still loaded and easily accessible by dragging the columns-separator", - "default": "ThreeColumnsStartExpandedEndHidden", - "name": "ThreeColumnsStartExpandedEndHidden", + "description": "Desktop: Defaults to 25 - 50 - 25 percent widths of columns. Start, Mid (expanded) and End columns are displayed\nTablet: Defaults to 0 - 67 - 33 percent widths of columns. Mid (expanded) and End columns are displayed, Start is accessible by dragging the columns-separator\nPhone: Fixed -- -- 100 percent widths of columns, only the End column is displayed\n\nUse to display all three pages (list, detail, detail-detail) when the user should focus on the detail.", + "default": "ThreeColumnsMidExpanded", + "name": "ThreeColumnsMidExpanded", "readonly": true }, { @@ -12364,9 +14749,9 @@ "kind": "field", "static": true, "privacy": "public", - "description": "Desktop: Defaults to 0 - 67 - 33 percent widths of columns. Start is hidden, Mid (expanded) and End columns are displayed.\nTablet: Defaults to 0 - 67 - 33 percent widths of columns. Start is hidden, Mid (expanded) and End columns are displayed.\nPhone: Fixed -- 100 percent width of the Mid column, only the Mid column is displayed.\n\nUse to display the Mid and End columns while the Start column is hidden.", - "default": "ThreeColumnsStartHiddenMidExpanded", - "name": "ThreeColumnsStartHiddenMidExpanded", + "description": "Desktop: Defaults to 67 - 33 - 0 percent widths of columns. Start (expanded) and Mid columns are displayed, End is accessible by dragging the columns-separator\nTablet: Defaults to 67 - 33 - 0 percent widths of columns. Start (expanded) and Mid columns are displayed, End is accessible by dragging the columns-separator\nPhone: Fixed -- -- 100 percent widths of columns, only the End column is displayed\n\nUse to display the list and detail pages when the user should focus on the list.\nThe detail-detail is still loaded and easily accessible by dragging the columns-separator", + "default": "ThreeColumnsStartExpandedEndHidden", + "name": "ThreeColumnsStartExpandedEndHidden", "readonly": true }, { @@ -12382,18 +14767,27 @@ "kind": "field", "static": true, "privacy": "public", - "description": "Desktop: Fixed -- 100 -- percent widths of columns, only the Mid column is displayed\nTablet: Fixed -- 100 -- percent widths of columns, only the Mid column is displayed\nPhone: Fixed -- 100 -- percent widths of columns, only the Mid column is displayed\n\nUse to display a detail page only, when the user should focus entirely on it.", - "default": "MidColumnFullScreen", - "name": "MidColumnFullScreen", + "description": "Desktop: Defaults to 0 - 67 - 33 percent widths of columns. Start is hidden, Mid (expanded) and End columns are displayed.\nTablet: Defaults to 0 - 67 - 33 percent widths of columns. Start is hidden, Mid (expanded) and End columns are displayed.\nPhone: Fixed -- 100 percent width of the Mid column, only the Mid column is displayed.\n\nUse to display the Mid and End columns while the Start column is hidden.", + "default": "ThreeColumnsStartHiddenMidExpanded", + "name": "ThreeColumnsStartHiddenMidExpanded", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "Desktop: Fixed -- -- 100 percent widths of columns, only the End column is displayed\nTablet: Fixed -- -- 100 percent widths of columns, only the End column is displayed\nPhone: Fixed -- -- 100 percent widths of columns, only the End column is displayed\n\nUse to display a detail-detail page only, when the user should focus entirely on it.", - "default": "EndColumnFullScreen", - "name": "EndColumnFullScreen", + "description": "Desktop: Defaults to 33 - 67 - -- percent widths of columns. Start and Mid (expanded) columns are displayed\nTablet: Defaults to 33 - 67 - -- percent widths of columns. Start and Mid (expanded) columns are displayed\nPhone: Fixed -- 100 -- percent widths of columns, only the Mid column is displayed\n\nUse to display both a list and a detail page when the user should focus on the detail page.", + "default": "TwoColumnsMidExpanded", + "name": "TwoColumnsMidExpanded", + "readonly": true + }, + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "\nDesktop: Defaults to 67 - 33 - -- percent widths of columns. Start (expanded) and Mid columns are displayed.\nTablet: Defaults to 67 - 33 - -- percent widths of columns. Start (expanded) and Mid columns are displayed.\nPhone: Fixed -- 100 -- percent widths of columns, only the Mid column is displayed\n\nUse to display both a list and a detail page when the user should focus on the list page.", + "default": "TwoColumnsStartExpanded", + "name": "TwoColumnsStartExpanded", "readonly": true } ] @@ -12439,6 +14833,16 @@ "name": "Base", "readonly": true }, + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "Dialog `Illustration` size (M breakpoint). Suitable for dialogs.", + "default": "Dialog", + "deprecated": "Since 2.10.0, use Medium instead", + "name": "Dialog", + "readonly": true + }, { "kind": "field", "static": true, @@ -12453,39 +14857,37 @@ "kind": "field", "static": true, "privacy": "public", - "description": "Spot <code>Illustration</code> size (S breakpoint). Suitable for cards (four columns).", - "default": "Spot", - "deprecated": "Since 2.10.0, use Small instead", - "name": "Spot", + "description": "ExtraSmall <code>Illustration</code> size (XS breakpoint). Suitable for table rows.", + "default": "ExtraSmall", + "name": "ExtraSmall", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "Dialog `Illustration` size (M breakpoint). Suitable for dialogs.", - "default": "Dialog", - "deprecated": "Since 2.10.0, use Medium instead", - "name": "Dialog", + "description": "Large `Illustration` size (L breakpoint). Suitable for a `Page` or a table.", + "default": "Large", + "name": "Large", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "Scene `Illustration` size (L breakpoint). Suitable for a `Page` or a table.", - "default": "Scene", - "deprecated": "Since 2.10.0, use Large instead", - "name": "Scene", + "description": "Medium `Illustration` size (M breakpoint). Suitable for dialogs.", + "default": "Medium", + "name": "Medium", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "ExtraSmall <code>Illustration</code> size (XS breakpoint). Suitable for table rows.", - "default": "ExtraSmall", - "name": "ExtraSmall", + "description": "Scene `Illustration` size (L breakpoint). Suitable for a `Page` or a table.", + "default": "Scene", + "deprecated": "Since 2.10.0, use Large instead", + "name": "Scene", "readonly": true }, { @@ -12499,20 +14901,12 @@ }, { "kind": "field", - "static": true, - "privacy": "public", - "description": "Medium `Illustration` size (M breakpoint). Suitable for dialogs.", - "default": "Medium", - "name": "Medium", - "readonly": true - }, - { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Large `Illustration` size (L breakpoint). Suitable for a `Page` or a table.", - "default": "Large", - "name": "Large", + "static": true, + "privacy": "public", + "description": "Spot <code>Illustration</code> size (S breakpoint). Suitable for cards (four columns).", + "default": "Spot", + "deprecated": "Since 2.10.0, use Small instead", + "name": "Spot", "readonly": true } ] @@ -12552,364 +14946,337 @@ "kind": "field", "static": true, "privacy": "public", - "description": "\"Adding Columns\" illustration type.", - "default": "AddingColumns", - "name": "AddingColumns", - "readonly": true - }, - { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"Add People To Calendar\" illustration type.", - "default": "AddPeopleToCalendar", - "name": "AddPeopleToCalendar", - "readonly": true - }, - { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"Before Search\" illustration type.", - "default": "BeforeSearch", - "name": "BeforeSearch", - "readonly": true - }, - { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"Drag Files To Upload\" illustration type.", - "default": "DragFilesToUpload", - "name": "DragFilesToUpload", + "description": "\"Add Column\" illustration type.", + "default": "AddColumn", + "deprecated": "Deprecated as of version 2.11.0, use AddingColumns instead.", + "name": "AddColumn", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "\"Filtering Columns\" illustration type.", - "default": "FilteringColumns", - "name": "FilteringColumns", + "description": "\"Add Dimensions\" illustration type.", + "default": "AddDimensions", + "name": "AddDimensions", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "\"Grouping Columns\" illustration type.", - "default": "GroupingColumns", - "name": "GroupingColumns", + "description": "\"Adding Columns\" illustration type.", + "default": "AddingColumns", + "name": "AddingColumns", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "\"New Mail\" illustration type.", - "default": "NewMail", - "name": "NewMail", + "description": "\"Add People\" illustration type.", + "default": "AddPeople", + "deprecated": "Deprecated as of version 2.11.0, use AddPeopleToCalendar instead.", + "name": "AddPeople", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "\"No Activities\" illustration type.", - "default": "NoActivities", - "name": "NoActivities", + "description": "\"Add People To Calendar\" illustration type.", + "default": "AddPeopleToCalendar", + "name": "AddPeopleToCalendar", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "\"No Columns Set\" illustration type.", - "default": "NoColumnsSet", - "name": "NoColumnsSet", + "description": "\"Balloon Sky\" illustration type.", + "default": "BalloonSky", + "deprecated": "Deprecated as of version 2.11.0, use ReceiveAppreciation instead.", + "name": "BalloonSky", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "\"No Data\" illustration type.", - "default": "NoData", - "name": "NoData", + "description": "\"Before Search\" illustration type.", + "default": "BeforeSearch", + "name": "BeforeSearch", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "\"No Email\" illustration type.", - "default": "NoMail", - "name": "NoMail", + "description": "\"Connection\" illustration type.", + "default": "Connection", + "deprecated": "Deprecated as of version 2.11.0, use UnableToLoad instead.", + "name": "Connection", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "\"No Email v1\" illustration type.", - "default": "NoMail_v1", - "deprecated": "Deprecated as of version 2.11.0, use NoMail instead.", - "name": "NoMail_v1", + "description": "\"Drag Files To Upload\" illustration type.", + "default": "DragFilesToUpload", + "name": "DragFilesToUpload", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "\"No Entries\" illustration type.", - "default": "NoEntries", - "name": "NoEntries", + "description": "\"Empty Calendar\" illustration type.", + "default": "EmptyCalendar", + "deprecated": "Deprecated as of version 2.11.0, use NoActivities instead.", + "name": "EmptyCalendar", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "\"No Notifications\" illustration type.", - "default": "NoNotifications", - "name": "NoNotifications", + "description": "\"Empty List\" illustration type.", + "default": "EmptyList", + "deprecated": "Deprecated as of version 2.11.0, use NoEntries instead.", + "name": "EmptyList", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "\"No Saved Items\" illustration type.", - "default": "NoSavedItems", - "name": "NoSavedItems", + "description": "\"Empty Planning Calendar\" illustration type.", + "default": "EmptyPlanningCalendar", + "name": "EmptyPlanningCalendar", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "\"No Saved Items v1\" illustration type.", - "default": "NoSavedItems_v1", - "deprecated": "Deprecated as of version 2.11.0, use NoSavedItems instead.", - "name": "NoSavedItems_v1", + "description": "\"Error Screen\" illustration type.", + "default": "ErrorScreen", + "deprecated": "Deprecated as of version 2.11.0, use UnableToUpload instead.", + "name": "ErrorScreen", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "\"No Search Results\" illustration type.", - "default": "NoSearchResults", - "name": "NoSearchResults", + "description": "\"Filtering Columns\" illustration type.", + "default": "FilteringColumns", + "name": "FilteringColumns", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "\"No Tasks\" illustration type.", - "default": "NoTasks", - "name": "NoTasks", + "description": "\"Filter Table\" illustration type.", + "default": "FilterTable", + "deprecated": "Deprecated as of version 2.11.0, use FilteringColumns instead.", + "name": "FilterTable", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "\"No Tasks v1\" illustration type.", - "default": "NoTasks_v1", - "deprecated": "Deprecated as of version 2.11.0, use NoTasks instead.", - "name": "NoTasks_v1", + "description": "\"Grouping Columns\" illustration type.", + "default": "GroupingColumns", + "name": "GroupingColumns", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "\"No Dimensions Set\" illustration type.", - "default": "NoDimensionsSet", - "deprecated": "Deprecated as of version 2.11.0, use NoChartData instead.", - "name": "NoDimensionsSet", + "description": "\"Group Table\" illustration type.", + "default": "GroupTable", + "deprecated": "Deprecated as of version 2.11.0, use GroupingColumns instead.", + "name": "GroupTable", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "\"Unable To Load\" illustration type.", - "default": "UnableToLoad", - "name": "UnableToLoad", + "description": "\"Key Task\" illustration type.", + "default": "KeyTask", + "name": "KeyTask", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "\"Unable To Load Image\" illustration type.", - "default": "UnableToLoadImage", - "name": "UnableToLoadImage", + "description": "\"New Mail\" illustration type.", + "default": "NewMail", + "name": "NewMail", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "\"Unable To Upload\" illustration type.", - "default": "UnableToUpload", - "name": "UnableToUpload", + "description": "\"No Activities\" illustration type.", + "default": "NoActivities", + "name": "NoActivities", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "\"Upload To Cloud\" illustration type.", - "default": "UploadToCloud", - "name": "UploadToCloud", + "description": "\"No Chart Data\" illustration type.", + "default": "NoChartData", + "name": "NoChartData", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "\"Add Column\" illustration type.", - "default": "AddColumn", - "deprecated": "Deprecated as of version 2.11.0, use AddingColumns instead.", - "name": "AddColumn", + "description": "\"No Columns Set\" illustration type.", + "default": "NoColumnsSet", + "name": "NoColumnsSet", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "\"Add People\" illustration type.", - "default": "AddPeople", - "deprecated": "Deprecated as of version 2.11.0, use AddPeopleToCalendar instead.", - "name": "AddPeople", + "description": "\"No Data\" illustration type.", + "default": "NoData", + "name": "NoData", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "\"Add Dimensions\" illustration type.", - "default": "AddDimensions", - "name": "AddDimensions", + "description": "\"No Dimensions Set\" illustration type.", + "default": "NoDimensionsSet", + "deprecated": "Deprecated as of version 2.11.0, use NoChartData instead.", + "name": "NoDimensionsSet", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "\"Balloon Sky\" illustration type.", - "default": "BalloonSky", - "deprecated": "Deprecated as of version 2.11.0, use ReceiveAppreciation instead.", - "name": "BalloonSky", + "description": "\"No Entries\" illustration type.", + "default": "NoEntries", + "name": "NoEntries", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "\"Connection\" illustration type.", - "default": "Connection", - "deprecated": "Deprecated as of version 2.11.0, use UnableToLoad instead.", - "name": "Connection", + "description": "\"No Filter Results\" illustration type.", + "default": "NoFilterResults", + "name": "NoFilterResults", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "\"Empty Calendar\" illustration type.", - "default": "EmptyCalendar", - "deprecated": "Deprecated as of version 2.11.0, use NoActivities instead.", - "name": "EmptyCalendar", + "description": "\"No Email\" illustration type.", + "default": "NoMail", + "name": "NoMail", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "\"Empty List\" illustration type.", - "default": "EmptyList", - "deprecated": "Deprecated as of version 2.11.0, use NoEntries instead.", - "name": "EmptyList", + "description": "\"No Email v1\" illustration type.", + "default": "NoMail_v1", + "deprecated": "Deprecated as of version 2.11.0, use NoMail instead.", + "name": "NoMail_v1", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "\"Empty Planning Calendar\" illustration type.", - "default": "EmptyPlanningCalendar", - "name": "EmptyPlanningCalendar", + "description": "\"No Notifications\" illustration type.", + "default": "NoNotifications", + "name": "NoNotifications", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "\"Error Screen\" illustration type.", - "default": "ErrorScreen", - "deprecated": "Deprecated as of version 2.11.0, use UnableToUpload instead.", - "name": "ErrorScreen", + "description": "\"No Saved Items\" illustration type.", + "default": "NoSavedItems", + "name": "NoSavedItems", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "\"Filter Table\" illustration type.", - "default": "FilterTable", - "deprecated": "Deprecated as of version 2.11.0, use FilteringColumns instead.", - "name": "FilterTable", + "description": "\"No Saved Items v1\" illustration type.", + "default": "NoSavedItems_v1", + "deprecated": "Deprecated as of version 2.11.0, use NoSavedItems instead.", + "name": "NoSavedItems_v1", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "\"Group Table\" illustration type.", - "default": "GroupTable", - "deprecated": "Deprecated as of version 2.11.0, use GroupingColumns instead.", - "name": "GroupTable", + "description": "\"No Search Results\" illustration type.", + "default": "NoSearchResults", + "name": "NoSearchResults", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "\"Key Task\" illustration type.", - "default": "KeyTask", - "name": "KeyTask", + "description": "\"No Tasks\" illustration type.", + "default": "NoTasks", + "name": "NoTasks", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "\"No Chart Data\" illustration type.", - "default": "NoChartData", - "name": "NoChartData", + "description": "\"No Tasks v1\" illustration type.", + "default": "NoTasks_v1", + "deprecated": "Deprecated as of version 2.11.0, use NoTasks instead.", + "name": "NoTasks_v1", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "\"No Filter Results\" illustration type.", - "default": "NoFilterResults", - "name": "NoFilterResults", + "description": "\"Page Not Found\" illustration type.", + "default": "PageNotFound", + "name": "PageNotFound", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "\"Page Not Found\" illustration type.", - "default": "PageNotFound", - "name": "PageNotFound", + "description": "\"Receive Appreciation\" illustration type.", + "default": "ReceiveAppreciation", + "name": "ReceiveAppreciation", "readonly": true }, { @@ -12941,15 +15308,6 @@ "name": "ResizingColumns", "readonly": true }, - { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"Receive Appreciation\" illustration type.", - "default": "ReceiveAppreciation", - "name": "ReceiveAppreciation", - "readonly": true - }, { "kind": "field", "static": true, @@ -13207,25 +15565,6 @@ "name": "Tent", "readonly": true }, - { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"Upload Collection\" illustration type.", - "default": "UploadCollection", - "deprecated": "Deprecated as of version 2.11.0, use DragFilesToUpload instead.", - "name": "UploadCollection", - "readonly": true - }, - { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"User Has Signed Up\" illustration type.", - "default": "UserHasSignedUp", - "name": "UserHasSignedUp", - "readonly": true - }, { "kind": "field", "static": true, @@ -13639,6 +15978,61 @@ "default": "TntUser2", "name": "TntUser2", "readonly": true + }, + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "\"Unable To Load\" illustration type.", + "default": "UnableToLoad", + "name": "UnableToLoad", + "readonly": true + }, + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "\"Unable To Load Image\" illustration type.", + "default": "UnableToLoadImage", + "name": "UnableToLoadImage", + "readonly": true + }, + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "\"Unable To Upload\" illustration type.", + "default": "UnableToUpload", + "name": "UnableToUpload", + "readonly": true + }, + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "\"Upload Collection\" illustration type.", + "default": "UploadCollection", + "deprecated": "Deprecated as of version 2.11.0, use DragFilesToUpload instead.", + "name": "UploadCollection", + "readonly": true + }, + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "\"Upload To Cloud\" illustration type.", + "default": "UploadToCloud", + "name": "UploadToCloud", + "readonly": true + }, + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "\"User Has Signed Up\" illustration type.", + "default": "UserHasSignedUp", + "name": "UserHasSignedUp", + "readonly": true } ] } @@ -13719,18 +16113,18 @@ "kind": "field", "static": true, "privacy": "public", - "description": "Displays the layout as a vertical split between the thumbnails list and the selected image.", - "default": "Vertical", - "name": "Vertical", + "description": "Displays the layout as a horizontal split between the thumbnails list and the selected image.", + "default": "Horizontal", + "name": "Horizontal", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "Displays the layout as a horizontal split between the thumbnails list and the selected image.", - "default": "Horizontal", - "name": "Horizontal", + "description": "Displays the layout as a vertical split between the thumbnails list and the selected image.", + "default": "Vertical", + "name": "Vertical", "readonly": true } ] @@ -13803,18 +16197,18 @@ "kind": "field", "static": true, "privacy": "public", - "description": "Displays the menu at the top of the reference control.", - "default": "Top", - "name": "Top", + "description": "Displays the menu at the bottom of the reference control.", + "default": "Bottom", + "name": "Bottom", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "Displays the menu at the bottom of the reference control.", - "default": "Bottom", - "name": "Bottom", + "description": "Displays the menu at the top of the reference control.", + "default": "Top", + "name": "Top", "readonly": true } ] @@ -13896,16 +16290,16 @@ "kind": "field", "static": true, "privacy": "public", - "default": "Standard", - "name": "Standard", + "default": "Important", + "name": "Important", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "default": "Important", - "name": "Important", + "default": "Standard", + "name": "Standard", "readonly": true } ] @@ -14025,15 +16419,6 @@ "description": "SideContent FallDown options.", "_ui5privacy": "public", "members": [ - { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Side content falls down on breakpoints below XL", - "default": "BelowXL", - "name": "BelowXL", - "readonly": true - }, { "kind": "field", "static": true, @@ -14052,6 +16437,15 @@ "name": "BelowM", "readonly": true }, + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "Side content falls down on breakpoints below XL", + "default": "BelowXL", + "name": "BelowXL", + "readonly": true + }, { "kind": "field", "static": true, @@ -14136,6 +16530,15 @@ "name": "AlwaysShow", "readonly": true }, + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "Don't show the side content on any breakpoints", + "default": "NeverShow", + "name": "NeverShow", + "readonly": true + }, { "kind": "field", "static": true, @@ -14162,15 +16565,6 @@ "default": "ShowAboveS", "name": "ShowAboveS", "readonly": true - }, - { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Don't show the side content on any breakpoints", - "default": "NeverShow", - "name": "NeverShow", - "readonly": true } ] } @@ -14201,18 +16595,18 @@ "kind": "field", "static": true, "privacy": "public", - "description": "Design for items that perform navigation, contain navigation child items, or both.", - "default": "Default", - "name": "Default", + "description": "Design for items that trigger an action, such as opening a dialog.\n\n**Note:** Items with this design must not have sub-items.\n\n**Note:** Items that open a dialog must set `hasPopup=\"dialog\"` via `accessibilityAttributes` property.", + "default": "Action", + "name": "Action", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "Design for items that trigger an action, such as opening a dialog.\n\n**Note:** Items with this design must not have sub-items.\n\n**Note:** Items that open a dialog must set `hasPopup=\"dialog\"` via `accessibilityAttributes` property.", - "default": "Action", - "name": "Action", + "description": "Design for items that perform navigation, contain navigation child items, or both.", + "default": "Default", + "name": "Default", "readonly": true } ] @@ -14253,18 +16647,18 @@ "kind": "field", "static": true, "privacy": "public", - "description": "Event `load-more` is fired upon scroll.", - "default": "Scroll", - "name": "Scroll", + "description": "The growing feature is not enabled.", + "default": "None", + "name": "None", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "The growing feature is not enabled.", - "default": "None", - "name": "None", + "description": "Event `load-more` is fired upon scroll.", + "default": "Scroll", + "name": "Scroll", "readonly": true } ] @@ -14295,18 +16689,18 @@ "kind": "field", "static": true, "privacy": "public", - "description": "Vertical layout\nDefault type", - "default": "Vertical", - "name": "Vertical", + "description": "Horizontal layout", + "default": "Horizontal", + "name": "Horizontal", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "Horizontal layout", - "default": "Horizontal", - "name": "Horizontal", + "description": "Vertical layout\nDefault type", + "default": "Vertical", + "name": "Vertical", "readonly": true } ] @@ -14348,6 +16742,15 @@ "description": "Different UploadCollection selection modes.", "_ui5privacy": "public", "members": [ + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "Multi selection mode (more than one list item can be selected).", + "default": "Multiple", + "name": "Multiple", + "readonly": true + }, { "kind": "field", "static": true, @@ -14370,9 +16773,9 @@ "kind": "field", "static": true, "privacy": "public", - "description": "Left-positioned single selection mode (only one list item can be selected).", - "default": "SingleStart", - "name": "SingleStart", + "description": "Selected item is highlighted and selection is changed upon arrow navigation\n(only one list item can be selected - this is always the focused item).", + "default": "SingleAuto", + "name": "SingleAuto", "readonly": true }, { @@ -14388,18 +16791,9 @@ "kind": "field", "static": true, "privacy": "public", - "description": "Selected item is highlighted and selection is changed upon arrow navigation\n(only one list item can be selected - this is always the focused item).", - "default": "SingleAuto", - "name": "SingleAuto", - "readonly": true - }, - { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Multi selection mode (more than one list item can be selected).", - "default": "Multiple", - "name": "Multiple", + "description": "Left-positioned single selection mode (only one list item can be selected).", + "default": "SingleStart", + "name": "SingleStart", "readonly": true } ] @@ -14486,16 +16880,6 @@ "description": "Different types of ViewSettings.", "_ui5privacy": "public", "members": [ - { - "kind": "field", - "static": true, - "privacy": "public", - "_ui5since": "1.0.0-rc.16", - "description": "Default type", - "default": "Sort", - "name": "Sort", - "readonly": true - }, { "kind": "field", "static": true, @@ -14515,6 +16899,16 @@ "default": "Group", "name": "Group", "readonly": true + }, + { + "kind": "field", + "static": true, + "privacy": "public", + "_ui5since": "1.0.0-rc.16", + "description": "Default type", + "default": "Sort", + "name": "Sort", + "readonly": true } ] } diff --git a/.storybook/custom-element-manifests/main.json b/.storybook/custom-element-manifests/main.json index 1bc9ac57713..3d3e21fa5bc 100644 --- a/.storybook/custom-element-manifests/main.json +++ b/.storybook/custom-element-manifests/main.json @@ -26,23 +26,23 @@ "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### Keyboard Handling\n\n- [Space] / [Enter] or [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\";`", + "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] or [Return] - Fires the `click` event if the `mode` is set to `Interactive` or the deprecated `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\n**Note:** If you experience flickering of the provided image, you can hide the component until it is defined with the following CSS:<br/>\n`ui5-avatar:not(:defined) {`<br/>\n    `visibility: hidden;`<br/>\n`}`", - "_ui5since": "1.0.0-rc.15", - "_ui5propertyName": "image", + "name": "badge", + "description": "Defines the optional badge that will be used for visual affordance.\n\n**Recommendation:** While badges are supported on all avatars, it is recommended\nto use them with interactive avatars (via `mode=\"Interactive\"` or `interactive` attribute)\nto provide better user experience and accessibility.\n\n**Note:** While the slot allows for custom badges, to achieve\nthe Fiori design, use the `ui5-avatar-badge` component.", + "_ui5since": "1.7.0", "_ui5type": { "text": "Array<HTMLElement>" }, "_ui5privacy": "public" }, { - "name": "badge", - "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, use the `ui5-avatar-badge` component.", - "_ui5since": "1.7.0", + "name": "default", + "description": "Receives the desired `<img>` tag\n\n**Note:** If you experience flickering of the provided image, you can hide the component until it is defined with the following CSS:<br/>\n`ui5-avatar:not(:defined) {`<br/>\n    `visibility: hidden;`<br/>\n`}`", + "_ui5since": "1.0.0-rc.15", + "_ui5propertyName": "image", "_ui5type": { "text": "Array<HTMLElement>" }, @@ -52,32 +52,58 @@ "members": [ { "kind": "field", - "name": "disabled", + "name": "accessibilityAttributes", "type": { - "text": "boolean" + "text": "AvatarAccessibilityAttributes", + "references": [ + { + "name": "AvatarAccessibilityAttributes", + "package": "@ui5/webcomponents", + "module": "dist/Avatar.js" + } + ] }, - "default": "false", - "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.", - "privacy": "public" + "default": "{}", + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following field is supported:\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.", + "privacy": "public", + "_ui5since": "2.0.0" }, { "kind": "field", - "name": "interactive", + "name": "accessibleName", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "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`.", + "description": "Defines the text alternative of the component.\nIf not provided a default text alternative will be set, if present.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.0.0-rc.7" + }, + { + "kind": "field", + "name": "colorScheme", + "type": { + "text": "AvatarColorScheme", + "references": [ + { + "name": "AvatarColorScheme", + "package": "@ui5/webcomponents", + "module": "dist/types/AvatarColorScheme.js" + } + ] + }, + "default": "\"Auto\"", + "description": "Defines the background color of the desired image.\nIf `colorScheme` is set to `Auto`, the avatar will be displayed with the `Accent6` color.", "privacy": "public" }, { "kind": "field", - "name": "icon", + "name": "disabled", "type": { - "text": "string | undefined" + "text": "boolean" }, - "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`<ui5-avatar icon=\"employee\">`\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": "undefined", + "default": "false", + "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.", "privacy": "public" }, { @@ -90,6 +116,16 @@ "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`<ui5-avatar fallback-icon=\"alert\">`\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" }, + { + "kind": "field", + "name": "icon", + "type": { + "text": "string | undefined" + }, + "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`<ui5-avatar icon=\"employee\">`\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": "undefined", + "privacy": "public" + }, { "kind": "field", "name": "initials", @@ -102,83 +138,66 @@ }, { "kind": "field", - "name": "shape", + "name": "interactive", "type": { - "text": "AvatarShape", - "references": [ - { - "name": "AvatarShape", - "package": "@ui5/webcomponents", - "module": "dist/types/AvatarShape.js" - } - ] + "text": "boolean" }, - "default": "\"Circle\"", - "description": "Defines the shape of the component.", - "privacy": "public" + "default": "false", + "description": "Defines if the avatar is interactive (focusable and pressable).\n\n**Note:** When set to `true`, this property takes precedence over the `mode` property,\nand the avatar will be rendered as interactive (role=\"button\", focusable) regardless of the `mode` value.\n\n**Note:** This property won't have effect if the `disabled`\nproperty is set to `true`.", + "privacy": "public", + "deprecated": "Set `mode=\"Interactive\"` instead for the same functionality with proper accessibility." }, { "kind": "field", - "name": "size", + "name": "mode", "type": { - "text": "AvatarSize", + "text": "AvatarMode", "references": [ { - "name": "AvatarSize", + "name": "AvatarMode", "package": "@ui5/webcomponents", - "module": "dist/types/AvatarSize.js" + "module": "dist/types/AvatarMode.js" } ] }, - "default": "\"S\"", - "description": "Defines predefined size of the component.", - "privacy": "public" + "default": "\"Image\"", + "description": "Defines the mode of the component.\n\n**Note:**\n- `Image` (default) - renders with role=\"img\"\n- `Decorative` - renders with role=\"presentation\" and aria-hidden=\"true\", making it purely decorative\n- `Interactive` - renders with role=\"button\", focusable (tabindex=\"0\"), and supports keyboard interaction\n\n**Note:** This property is ignored when the `interactive` property is set to `true`.\nIn that case, the avatar will always be rendered as interactive.", + "privacy": "public", + "_ui5since": "2.20" }, { "kind": "field", - "name": "colorScheme", + "name": "shape", "type": { - "text": "AvatarColorScheme", + "text": "AvatarShape", "references": [ { - "name": "AvatarColorScheme", + "name": "AvatarShape", "package": "@ui5/webcomponents", - "module": "dist/types/AvatarColorScheme.js" + "module": "dist/types/AvatarShape.js" } ] }, - "default": "\"Auto\"", - "description": "Defines the background color of the desired image.\nIf `colorScheme` is set to `Auto`, the avatar will be displayed with the `Accent6` color.", + "default": "\"Circle\"", + "description": "Defines the shape of the component.", "privacy": "public" }, { "kind": "field", - "name": "accessibleName", - "type": { - "text": "string | undefined" - }, - "description": "Defines the text alternative of the component.\nIf not provided a default text alternative will be set, if present.", - "default": "undefined", - "privacy": "public", - "_ui5since": "1.0.0-rc.7" - }, - { - "kind": "field", - "name": "accessibilityAttributes", + "name": "size", "type": { - "text": "AvatarAccessibilityAttributes", + "text": "AvatarSize", "references": [ { - "name": "AvatarAccessibilityAttributes", + "name": "AvatarSize", "package": "@ui5/webcomponents", - "module": "dist/Avatar.js" + "module": "dist/types/AvatarSize.js" } ] }, - "default": "{}", - "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following field is supported:\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.", - "privacy": "public", - "_ui5since": "2.0.0" + "default": "\"S\"", + "description": "Defines predefined size of the component.", + "privacy": "public" } ], "events": [ @@ -196,6 +215,33 @@ } ], "attributes": [ + { + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following field is supported:\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.", + "name": "accessibility-attributes", + "default": "{}", + "fieldName": "accessibilityAttributes", + "type": { + "text": "AvatarAccessibilityAttributes" + } + }, + { + "description": "Defines the text alternative of the component.\nIf not provided a default text alternative will be set, if present.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the background color of the desired image.\nIf `colorScheme` is set to `Auto`, the avatar will be displayed with the `Accent6` color.", + "name": "color-scheme", + "default": "\"Auto\"", + "fieldName": "colorScheme", + "type": { + "text": "\"Auto\" | \"Accent1\" | \"Accent2\" | \"Accent3\" | \"Accent4\" | \"Accent5\" | \"Accent6\" | \"Accent7\" | \"Accent8\" | \"Accent9\" | \"Accent10\" | \"Placeholder\" | \"Transparent\"" + } + }, { "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.", "name": "disabled", @@ -206,12 +252,12 @@ } }, { - "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`.", - "name": "interactive", - "default": "false", - "fieldName": "interactive", + "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`<ui5-avatar fallback-icon=\"alert\">`\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "name": "fallback-icon", + "default": "\"employee\"", + "fieldName": "fallbackIcon", "type": { - "text": "boolean" + "text": "string" } }, { @@ -223,15 +269,6 @@ "text": "string | undefined" } }, - { - "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`<ui5-avatar fallback-icon=\"alert\">`\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", - "name": "fallback-icon", - "default": "\"employee\"", - "fieldName": "fallbackIcon", - "type": { - "text": "string" - } - }, { "description": "Defines the displayed initials.\n\nUp to three Latin letters can be displayed as initials.", "name": "initials", @@ -241,6 +278,25 @@ "text": "string | undefined" } }, + { + "description": "Defines if the avatar is interactive (focusable and pressable).\n\n**Note:** When set to `true`, this property takes precedence over the `mode` property,\nand the avatar will be rendered as interactive (role=\"button\", focusable) regardless of the `mode` value.\n\n**Note:** This property won't have effect if the `disabled`\nproperty is set to `true`.", + "name": "interactive", + "default": "false", + "fieldName": "interactive", + "type": { + "text": "boolean" + }, + "deprecated": "Set `mode=\"Interactive\"` instead for the same functionality with proper accessibility." + }, + { + "description": "Defines the mode of the component.\n\n**Note:**\n- `Image` (default) - renders with role=\"img\"\n- `Decorative` - renders with role=\"presentation\" and aria-hidden=\"true\", making it purely decorative\n- `Interactive` - renders with role=\"button\", focusable (tabindex=\"0\"), and supports keyboard interaction\n\n**Note:** This property is ignored when the `interactive` property is set to `true`.\nIn that case, the avatar will always be rendered as interactive.", + "name": "mode", + "default": "\"Image\"", + "fieldName": "mode", + "type": { + "text": "\"Image\" | \"Decorative\" | \"Interactive\"" + } + }, { "description": "Defines the shape of the component.", "name": "shape", @@ -258,33 +314,6 @@ "type": { "text": "\"XS\" | \"S\" | \"M\" | \"L\" | \"XL\"" } - }, - { - "description": "Defines the background color of the desired image.\nIf `colorScheme` is set to `Auto`, the avatar will be displayed with the `Accent6` color.", - "name": "color-scheme", - "default": "\"Auto\"", - "fieldName": "colorScheme", - "type": { - "text": "\"Auto\" | \"Accent1\" | \"Accent2\" | \"Accent3\" | \"Accent4\" | \"Accent5\" | \"Accent6\" | \"Accent7\" | \"Accent8\" | \"Accent9\" | \"Accent10\" | \"Placeholder\" | \"Transparent\"" - } - }, - { - "description": "Defines the text alternative of the component.\nIf not provided a default text alternative will be set, if present.", - "name": "accessible-name", - "default": "undefined", - "fieldName": "accessibleName", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following field is supported:\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.", - "name": "accessibility-attributes", - "default": "{}", - "fieldName": "accessibilityAttributes", - "type": { - "text": "AvatarAccessibilityAttributes" - } } ], "superclass": { @@ -415,12 +444,6 @@ "kind": "javascript-module", "path": "dist/AvatarGroup.js", "declarations": [ - { - "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`", - "_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### 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### 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### 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] or [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] or [Return] - Trigger `ui5-click` event", @@ -460,23 +483,6 @@ } ], "members": [ - { - "kind": "field", - "name": "type", - "type": { - "text": "AvatarGroupType", - "references": [ - { - "name": "AvatarGroupType", - "package": "@ui5/webcomponents", - "module": "dist/types/AvatarGroupType.js" - } - ] - }, - "default": "\"Group\"", - "description": "Defines the mode of the `AvatarGroup`.", - "privacy": "public" - }, { "kind": "field", "name": "accessibilityAttributes", @@ -517,6 +523,24 @@ "privacy": "public", "_ui5since": "2.12.0" }, + { + "kind": "field", + "name": "colorScheme", + "type": { + "text": "Array<AvatarColorScheme>", + "references": [ + { + "name": "AvatarColorScheme", + "package": "@ui5/webcomponents", + "module": "dist/types/AvatarColorScheme.js" + } + ] + }, + "description": "Returns an array containing the `AvatarColorScheme` values that correspond to the avatars in the component.", + "default": "[]", + "privacy": "public", + "readonly": true + }, { "kind": "field", "name": "hiddenItems", @@ -537,21 +561,20 @@ }, { "kind": "field", - "name": "colorScheme", + "name": "type", "type": { - "text": "Array<AvatarColorScheme>", + "text": "AvatarGroupType", "references": [ { - "name": "AvatarColorScheme", + "name": "AvatarGroupType", "package": "@ui5/webcomponents", - "module": "dist/types/AvatarColorScheme.js" + "module": "dist/types/AvatarGroupType.js" } ] }, - "description": "Returns an array containing the `AvatarColorScheme` values that correspond to the avatars in the component.", - "default": "[]", - "privacy": "public", - "readonly": true + "default": "\"Group\"", + "description": "Defines the mode of the `AvatarGroup`.", + "privacy": "public" } ], "events": [ @@ -576,19 +599,19 @@ "_ui5parameters": [ { "type": { - "text": "HTMLElement" + "text": "boolean" }, - "name": "targetRef", + "name": "overflowButtonClicked", "_ui5privacy": "public", - "description": "The DOM ref of the clicked item." + "description": "indicates if the overflow button is clicked" }, { "type": { - "text": "boolean" + "text": "HTMLElement" }, - "name": "overflowButtonClicked", + "name": "targetRef", "_ui5privacy": "public", - "description": "indicates if the overflow button is clicked" + "description": "The DOM ref of the clicked item." } ] }, @@ -606,15 +629,6 @@ } ], "attributes": [ - { - "description": "Defines the mode of the `AvatarGroup`.", - "name": "type", - "default": "\"Group\"", - "fieldName": "type", - "type": { - "text": "\"Group\" | \"Individual\"" - } - }, { "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following field is supported:\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.", "name": "accessibility-attributes", @@ -642,6 +656,15 @@ "text": "string | undefined" } }, + { + "description": "Returns an array containing the `AvatarColorScheme` values that correspond to the avatars in the component.", + "name": "color-scheme", + "default": "[]", + "fieldName": "colorScheme", + "type": { + "text": "any" + } + }, { "description": "Returns an array containing the `ui5-avatar` instances that are currently not displayed due to lack of space.", "name": "hidden-items", @@ -652,12 +675,12 @@ } }, { - "description": "Returns an array containing the `AvatarColorScheme` values that correspond to the avatars in the component.", - "name": "color-scheme", - "default": "[]", - "fieldName": "colorScheme", + "description": "Defines the mode of the `AvatarGroup`.", + "name": "type", + "default": "\"Group\"", + "fieldName": "type", "type": { - "text": "any" + "text": "\"Group\" | \"Individual\"" } } ], @@ -670,6 +693,12 @@ "customElement": true, "_ui5since": "1.0.0-rc.11", "_ui5privacy": "public" + }, + { + "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`", + "_ui5privacy": "public" } ], "exports": [ @@ -705,39 +734,39 @@ "name": "bar" }, { - "description": "Used to style the wrapper of the start content of the component", - "name": "startContent" + "description": "Used to style the wrapper of the end content of the component", + "name": "endContent" }, { "description": "Used to style the wrapper of the middle content of the component", "name": "midContent" }, { - "description": "Used to style the wrapper of the end content of the component", - "name": "endContent" + "description": "Used to style the wrapper of the start content of the component", + "name": "startContent" } ], "slots": [ { - "name": "startContent", - "description": "Defines the content at the start of the bar.", + "name": "default", + "description": "Defines the content in the middle of the bar.", + "_ui5propertyName": "middleContent", "_ui5type": { "text": "Array<HTMLElement>" }, "_ui5privacy": "public" }, { - "name": "default", - "description": "Defines the content in the middle of the bar.", - "_ui5propertyName": "middleContent", + "name": "endContent", + "description": "Defines the content at the end of the bar.", "_ui5type": { "text": "Array<HTMLElement>" }, "_ui5privacy": "public" }, { - "name": "endContent", - "description": "Defines the content at the end of the bar.", + "name": "startContent", + "description": "Defines the content at the start of the bar.", "_ui5type": { "text": "Array<HTMLElement>" }, @@ -747,20 +776,25 @@ "members": [ { "kind": "field", - "name": "design", + "name": "accessibleName", "type": { - "text": "BarDesign", - "references": [ - { - "name": "BarDesign", - "package": "@ui5/webcomponents", - "module": "dist/types/BarDesign.js" - } - ] + "text": "string | undefined" }, - "default": "\"Header\"", - "description": "Defines the component's design.", - "privacy": "public" + "description": "Defines the accessible ARIA name of the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.16.0" + }, + { + "kind": "field", + "name": "accessibleNameRef", + "type": { + "text": "string | undefined" + }, + "description": "Receives id(or many ids) of the elements that label the bar.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.16.0" }, { "kind": "field", @@ -782,35 +816,39 @@ }, { "kind": "field", - "name": "accessibleName", + "name": "design", "type": { - "text": "string | undefined" + "text": "BarDesign", + "references": [ + { + "name": "BarDesign", + "package": "@ui5/webcomponents", + "module": "dist/types/BarDesign.js" + } + ] }, + "default": "\"Header\"", + "description": "Defines the component's design.", + "privacy": "public" + } + ], + "attributes": [ + { "description": "Defines the accessible ARIA name of the component.", + "name": "accessible-name", "default": "undefined", - "privacy": "public", - "_ui5since": "2.16.0" - }, - { - "kind": "field", - "name": "accessibleNameRef", + "fieldName": "accessibleName", "type": { "text": "string | undefined" - }, + } + }, + { "description": "Receives id(or many ids) of the elements that label the bar.", + "name": "accessible-name-ref", "default": "undefined", - "privacy": "public", - "_ui5since": "2.16.0" - } - ], - "attributes": [ - { - "description": "Defines the component's design.", - "name": "design", - "default": "\"Header\"", - "fieldName": "design", + "fieldName": "accessibleNameRef", "type": { - "text": "\"Header\" | \"Subheader\" | \"Footer\" | \"FloatingFooter\"" + "text": "string | undefined" } }, { @@ -823,21 +861,12 @@ } }, { - "description": "Defines the accessible ARIA name of the component.", - "name": "accessible-name", - "default": "undefined", - "fieldName": "accessibleName", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Receives id(or many ids) of the elements that label the bar.", - "name": "accessible-name-ref", - "default": "undefined", - "fieldName": "accessibleNameRef", + "description": "Defines the component's design.", + "name": "design", + "default": "\"Header\"", + "fieldName": "design", "type": { - "text": "string | undefined" + "text": "\"Header\" | \"Subheader\" | \"Footer\" | \"FloatingFooter\"" } } ], @@ -952,14 +981,6 @@ "_ui5allowPreventDefault": true, "_ui5Bubbles": true, "_ui5parameters": [ - { - "type": { - "text": "HTMLElement" - }, - "name": "item", - "_ui5privacy": "public", - "description": "The clicked item." - }, { "type": { "text": "Boolean" @@ -976,6 +997,14 @@ "_ui5privacy": "public", "description": "Returns whether the \"CTRL\" key was pressed when the event was triggered." }, + { + "type": { + "text": "HTMLElement" + }, + "name": "item", + "_ui5privacy": "public", + "description": "The clicked item." + }, { "type": { "text": "Boolean" @@ -1023,7 +1052,14 @@ "tagName": "ui5-breadcrumbs", "customElement": true, "_ui5since": "1.0.0-rc.15", - "_ui5privacy": "public" + "_ui5privacy": "public", + "_ui5implements": [ + { + "name": "IToolbarItemContent", + "package": "@ui5/webcomponents", + "module": "dist/ToolbarItem.js" + } + ] } ], "exports": [ @@ -1067,59 +1103,59 @@ "members": [ { "kind": "field", - "name": "href", + "name": "accessibleName", "type": { "text": "string | undefined" }, - "description": "Defines the link href.\n\n**Note:** Standard hyperlink behavior is supported.", + "description": "Defines the accessible ARIA name of the item.", "default": "undefined", "privacy": "public" }, { "kind": "field", - "name": "target", + "name": "href", "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**Note:** This property must only be used when the `href` property is set.", + "description": "Defines the link href.\n\n**Note:** Standard hyperlink behavior is supported.", "default": "undefined", "privacy": "public" }, { "kind": "field", - "name": "accessibleName", + "name": "target", "type": { "text": "string | undefined" }, - "description": "Defines the accessible ARIA name of the item.", + "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" } ], "attributes": [ { - "description": "Defines the link href.\n\n**Note:** Standard hyperlink behavior is supported.", - "name": "href", + "description": "Defines the accessible ARIA name of the item.", + "name": "accessible-name", "default": "undefined", - "fieldName": "href", + "fieldName": "accessibleName", "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**Note:** This property must only be used when the `href` property is set.", - "name": "target", + "description": "Defines the link href.\n\n**Note:** Standard hyperlink behavior is supported.", + "name": "href", "default": "undefined", - "fieldName": "target", + "fieldName": "href", "type": { "text": "string | undefined" } }, { - "description": "Defines the accessible ARIA name of the item.", - "name": "accessible-name", + "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.", + "name": "target", "default": "undefined", - "fieldName": "accessibleName", + "fieldName": "target", "type": { "text": "string | undefined" } @@ -1177,14 +1213,23 @@ "members": [ { "kind": "field", - "name": "text", + "name": "active", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Defines text to be displayed below the component. It can be used to inform the user of the current operation.", - "privacy": "public", - "default": "undefined", - "_ui5since": "1.0.0-rc.7" + "default": "false", + "description": "Defines if the busy indicator is visible on the screen. By default it is not.", + "privacy": "public" + }, + { + "kind": "field", + "name": "delay", + "type": { + "text": "number" + }, + "default": "1000", + "description": "Defines the delay in milliseconds, after which the busy indicator will be visible on the screen.", + "privacy": "public" }, { "kind": "field", @@ -1205,23 +1250,14 @@ }, { "kind": "field", - "name": "active", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines if the busy indicator is visible on the screen. By default it is not.", - "privacy": "public" - }, - { - "kind": "field", - "name": "delay", + "name": "text", "type": { - "text": "number" + "text": "string | undefined" }, - "default": "1000", - "description": "Defines the delay in milliseconds, after which the busy indicator will be visible on the screen.", - "privacy": "public" + "description": "Defines text to be displayed below the component. It can be used to inform the user of the current operation.", + "privacy": "public", + "default": "undefined", + "_ui5since": "1.0.0-rc.7" }, { "kind": "field", @@ -1242,24 +1278,6 @@ } ], "attributes": [ - { - "description": "Defines text to be displayed below the component. It can be used to inform the user of the current operation.", - "name": "text", - "default": "undefined", - "fieldName": "text", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Defines the size of the component.", - "name": "size", - "default": "\"M\"", - "fieldName": "size", - "type": { - "text": "\"S\" | \"M\" | \"L\"" - } - }, { "description": "Defines if the busy indicator is visible on the screen. By default it is not.", "name": "active", @@ -1278,6 +1296,24 @@ "text": "number" } }, + { + "description": "Defines the size of the component.", + "name": "size", + "default": "\"M\"", + "fieldName": "size", + "type": { + "text": "\"S\" | \"M\" | \"L\"" + } + }, + { + "description": "Defines text to be displayed below the component. It can be used to inform the user of the current operation.", + "name": "text", + "default": "undefined", + "fieldName": "text", + "type": { + "text": "string | undefined" + } + }, { "description": "Defines the placement of the text.", "name": "text-placement", @@ -1322,12 +1358,6 @@ "kind": "javascript-module", "path": "dist/Button.js", "declarations": [ - { - "kind": "interface", - "name": "IButton", - "description": "Interface for components that may be used as a button inside numerous higher-order components", - "_ui5privacy": "public" - }, { "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### 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\";`", @@ -1337,25 +1367,16 @@ "description": "Used to style the native button element", "name": "button" }, - { - "description": "Used to style the icon in the native button element", - "name": "icon" - }, { "description": "Used to style the end icon in the native button element", "name": "endIcon" + }, + { + "description": "Used to style the icon in the native button element", + "name": "icon" } ], "slots": [ - { - "name": "default", - "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<Node>" - }, - "_ui5privacy": "public" - }, { "name": "badge", "description": "Adds a badge to the button.", @@ -1371,128 +1392,177 @@ ] }, "_ui5privacy": "public" + }, + { + "name": "default", + "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<Node>" + }, + "_ui5privacy": "public" } ], "members": [ { "kind": "field", - "name": "design", + "name": "accessibilityAttributes", "type": { - "text": "ButtonDesign", + "text": "ButtonAccessibilityAttributes", "references": [ { - "name": "ButtonDesign", + "name": "ButtonAccessibilityAttributes", "package": "@ui5/webcomponents", - "module": "dist/types/ButtonDesign.js" + "module": "dist/Button.js" } ] }, - "default": "\"Default\"", - "description": "Defines the component design.", - "privacy": "public" + "default": "{}", + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\nAccepts the following string values: `true` or `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.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n- **ariaLabel**: Defines the accessible ARIA name of the component.\nAccepts any string value.\n\n - **ariaKeyShortcuts**: Defines keyboard shortcuts that activate or give focus to the button.\n\n- **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element.\nAccepts a lowercase string value.", + "privacy": "public", + "_ui5since": "1.2.0" }, { "kind": "field", - "name": "disabled", + "name": "accessibleDescription", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.", - "privacy": "public" + "description": "Defines the accessible description of the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.5.0" }, { "kind": "field", - "name": "icon", + "name": "accessibleName", "type": { "text": "string | undefined" }, - "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).", + "description": "Defines the accessible ARIA name of the component.", "default": "undefined", - "privacy": "public" + "privacy": "public", + "_ui5since": "1.0.0-rc.15" }, { "kind": "field", - "name": "endIcon", + "name": "accessibleNameRef", "type": { "text": "string | undefined" }, - "description": "Defines the icon, displayed as graphical element within the component after the button text.\n\n**Note:** It is highly recommended to use `endIcon` property only together with `icon` and/or `text` properties.\nUsage of `endIcon` only should be avoided.\n\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).", + "description": "Receives id(or many ids) of the elements that label the component.", "default": "undefined", + "privacy": "public", + "_ui5since": "1.1.0" + }, + { + "kind": "field", + "name": "accessibleRole", + "type": { + "text": "ButtonAccessibleRole", + "references": [ + { + "name": "ButtonAccessibleRole", + "package": "@ui5/webcomponents", + "module": "dist/types/ButtonAccessibleRole.js" + } + ] + }, + "default": "\"Button\"", + "description": "Describes the accessibility role of the button.\n\n**Note:** Use <code>ButtonAccessibleRole.Link</code> role only with a press handler, which performs a navigation. In all other scenarios the default button semantics are recommended.", + "privacy": "public", + "_ui5since": "1.23" + }, + { + "kind": "field", + "name": "design", + "type": { + "text": "ButtonDesign", + "references": [ + { + "name": "ButtonDesign", + "package": "@ui5/webcomponents", + "module": "dist/types/ButtonDesign.js" + } + ] + }, + "default": "\"Default\"", + "description": "Defines the component design.", "privacy": "public" }, { "kind": "field", - "name": "submits", + "name": "disabled", "type": { "text": "boolean" }, "default": "false", - "description": "When set to `true`, the component will\nautomatically submit the nearest HTML form element on `press`.\n\n**Note:** This property is only applicable within the context of an HTML Form element.`", - "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\"." + "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.", + "privacy": "public" }, { "kind": "field", - "name": "tooltip", + "name": "endIcon", "type": { "text": "string | undefined" }, - "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.", + "description": "Defines the icon, displayed as graphical element within the component after the button text.\n\n**Note:** It is highly recommended to use `endIcon` property only together with `icon` and/or `text` properties.\nUsage of `endIcon` only should be avoided.\n\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": "undefined", - "privacy": "public", - "_ui5since": "1.2.0" + "privacy": "public" }, { "kind": "field", - "name": "accessibleName", + "name": "icon", "type": { "text": "string | undefined" }, - "description": "Defines the accessible ARIA name of the component.", + "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": "undefined", + "privacy": "public" + }, + { + "kind": "field", + "name": "loading", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the button shows a loading indicator.\n\n**Note:** If set to `true`, a busy indicator component will be displayed on the related button.", "privacy": "public", - "_ui5since": "1.0.0-rc.15" + "_ui5since": "2.13.0" }, { "kind": "field", - "name": "accessibleNameRef", + "name": "loadingDelay", "type": { - "text": "string | undefined" + "text": "number" }, - "description": "Receives id(or many ids) of the elements that label the component.", - "default": "undefined", + "default": "1000", + "description": "Specifies the delay in milliseconds before the loading indicator appears within the associated button.", "privacy": "public", - "_ui5since": "1.1.0" + "_ui5since": "2.13.0" }, { "kind": "field", - "name": "accessibilityAttributes", + "name": "submits", "type": { - "text": "ButtonAccessibilityAttributes", - "references": [ - { - "name": "ButtonAccessibilityAttributes", - "package": "@ui5/webcomponents", - "module": "dist/Button.js" - } - ] + "text": "boolean" }, - "default": "{}", - "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\nAccepts the following string values: `true` or `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.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n- **ariaLabel**: Defines the accessible ARIA name of the component.\nAccepts any string value.\n\n - **ariaKeyShortcuts**: Defines keyboard shortcuts that activate or give focus to the button.\n\n- **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element.\nAccepts a lowercase string value.", + "default": "false", + "description": "When set to `true`, the component will\nautomatically submit the nearest HTML form element on `press`.\n\n**Note:** This property is only applicable within the context of an HTML Form element.`", "privacy": "public", - "_ui5since": "1.2.0" + "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\"." }, { "kind": "field", - "name": "accessibleDescription", + "name": "tooltip", "type": { "text": "string | undefined" }, - "description": "Defines the accessible description of the component.", + "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": "undefined", "privacy": "public", - "_ui5since": "2.5.0" + "_ui5since": "1.2.0" }, { "kind": "field", @@ -1511,46 +1581,6 @@ "description": "Defines whether the button has special form-related functionality.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", "privacy": "public", "_ui5since": "1.15.0" - }, - { - "kind": "field", - "name": "accessibleRole", - "type": { - "text": "ButtonAccessibleRole", - "references": [ - { - "name": "ButtonAccessibleRole", - "package": "@ui5/webcomponents", - "module": "dist/types/ButtonAccessibleRole.js" - } - ] - }, - "default": "\"Button\"", - "description": "Describes the accessibility role of the button.\n\n**Note:** Use <code>ButtonAccessibleRole.Link</code> role only with a press handler, which performs a navigation. In all other scenarios the default button semantics are recommended.", - "privacy": "public", - "_ui5since": "1.23" - }, - { - "kind": "field", - "name": "loading", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines whether the button shows a loading indicator.\n\n**Note:** If set to `true`, a busy indicator component will be displayed on the related button.", - "privacy": "public", - "_ui5since": "2.13.0" - }, - { - "kind": "field", - "name": "loadingDelay", - "type": { - "text": "number" - }, - "default": "1000", - "description": "Specifies the delay in milliseconds before the loading indicator appears within the associated button.", - "privacy": "public", - "_ui5since": "2.13.0" } ], "events": [ @@ -1573,14 +1603,6 @@ "_ui5Bubbles": true, "_ui5since": "2.10.0", "_ui5parameters": [ - { - "type": { - "text": "Event" - }, - "name": "originalEvent", - "_ui5privacy": "public", - "description": "Returns original event that comes from user's **click** interaction" - }, { "type": { "text": "boolean" @@ -1605,6 +1627,14 @@ "_ui5privacy": "public", "description": "Returns whether the \"META\" key was pressed when the event was triggered." }, + { + "type": { + "text": "Event" + }, + "name": "originalEvent", + "_ui5privacy": "public", + "description": "Returns original event that comes from user's **click** interaction" + }, { "type": { "text": "boolean" @@ -1618,56 +1648,19 @@ ], "attributes": [ { - "description": "Defines the component design.", - "name": "design", - "default": "\"Default\"", - "fieldName": "design", - "type": { - "text": "\"Transparent\" | \"Positive\" | \"Negative\" | \"Default\" | \"Emphasized\" | \"Attention\"" - } - }, - { - "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.", - "name": "disabled", - "default": "false", - "fieldName": "disabled", - "type": { - "text": "boolean" - } - }, - { - "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).", - "name": "icon", - "default": "undefined", - "fieldName": "icon", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Defines the icon, displayed as graphical element within the component after the button text.\n\n**Note:** It is highly recommended to use `endIcon` property only together with `icon` and/or `text` properties.\nUsage of `endIcon` only should be avoided.\n\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).", - "name": "end-icon", - "default": "undefined", - "fieldName": "endIcon", + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\nAccepts the following string values: `true` or `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.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n- **ariaLabel**: Defines the accessible ARIA name of the component.\nAccepts any string value.\n\n - **ariaKeyShortcuts**: Defines keyboard shortcuts that activate or give focus to the button.\n\n- **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element.\nAccepts a lowercase string value.", + "name": "accessibility-attributes", + "default": "{}", + "fieldName": "accessibilityAttributes", "type": { - "text": "string | undefined" + "text": "ButtonAccessibilityAttributes" } }, { - "description": "When set to `true`, the component will\nautomatically submit the nearest HTML form element on `press`.\n\n**Note:** This property is only applicable within the context of an HTML Form element.`", - "name": "submits", - "default": "false", - "fieldName": "submits", - "type": { - "text": "boolean" - }, - "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\"." - }, - { - "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.", - "name": "tooltip", + "description": "Defines the accessible description of the component.", + "name": "accessible-description", "default": "undefined", - "fieldName": "tooltip", + "fieldName": "accessibleDescription", "type": { "text": "string | undefined" } @@ -1691,39 +1684,48 @@ } }, { - "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\nAccepts the following string values: `true` or `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.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n- **ariaLabel**: Defines the accessible ARIA name of the component.\nAccepts any string value.\n\n - **ariaKeyShortcuts**: Defines keyboard shortcuts that activate or give focus to the button.\n\n- **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element.\nAccepts a lowercase string value.", - "name": "accessibility-attributes", - "default": "{}", - "fieldName": "accessibilityAttributes", + "description": "Describes the accessibility role of the button.\n\n**Note:** Use <code>ButtonAccessibleRole.Link</code> role only with a press handler, which performs a navigation. In all other scenarios the default button semantics are recommended.", + "name": "accessible-role", + "default": "\"Button\"", + "fieldName": "accessibleRole", "type": { - "text": "ButtonAccessibilityAttributes" + "text": "\"Button\" | \"Link\"" } }, { - "description": "Defines the accessible description of the component.", - "name": "accessible-description", - "default": "undefined", - "fieldName": "accessibleDescription", + "description": "Defines the component design.", + "name": "design", + "default": "\"Default\"", + "fieldName": "design", "type": { - "text": "string | undefined" + "text": "\"Transparent\" | \"Positive\" | \"Negative\" | \"Default\" | \"Emphasized\" | \"Attention\"" } }, { - "description": "Defines whether the button has special form-related functionality.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", - "name": "type", - "default": "\"Button\"", - "fieldName": "type", + "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.", + "name": "disabled", + "default": "false", + "fieldName": "disabled", "type": { - "text": "\"Button\" | \"Submit\" | \"Reset\"" + "text": "boolean" } }, { - "description": "Describes the accessibility role of the button.\n\n**Note:** Use <code>ButtonAccessibleRole.Link</code> role only with a press handler, which performs a navigation. In all other scenarios the default button semantics are recommended.", - "name": "accessible-role", - "default": "\"Button\"", - "fieldName": "accessibleRole", + "description": "Defines the icon, displayed as graphical element within the component after the button text.\n\n**Note:** It is highly recommended to use `endIcon` property only together with `icon` and/or `text` properties.\nUsage of `endIcon` only should be avoided.\n\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).", + "name": "end-icon", + "default": "undefined", + "fieldName": "endIcon", "type": { - "text": "\"Button\" | \"Link\"" + "text": "string | undefined" + } + }, + { + "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).", + "name": "icon", + "default": "undefined", + "fieldName": "icon", + "type": { + "text": "string | undefined" } }, { @@ -1743,6 +1745,34 @@ "type": { "text": "number" } + }, + { + "description": "When set to `true`, the component will\nautomatically submit the nearest HTML form element on `press`.\n\n**Note:** This property is only applicable within the context of an HTML Form element.`", + "name": "submits", + "default": "false", + "fieldName": "submits", + "type": { + "text": "boolean" + }, + "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\"." + }, + { + "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.", + "name": "tooltip", + "default": "undefined", + "fieldName": "tooltip", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines whether the button has special form-related functionality.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", + "name": "type", + "default": "\"Button\"", + "fieldName": "type", + "type": { + "text": "\"Button\" | \"Submit\" | \"Reset\"" + } } ], "superclass": { @@ -1760,6 +1790,12 @@ "module": "dist/Button.js" } ] + }, + { + "kind": "interface", + "name": "IButton", + "description": "Interface for components that may be used as a button inside numerous higher-order components", + "_ui5privacy": "public" } ], "exports": [ @@ -1874,17 +1910,19 @@ "kind": "javascript-module", "path": "dist/Calendar.js", "declarations": [ - { - "kind": "interface", - "name": "ICalendarSelectedDates", - "description": "Interface for components that may be slotted inside a `ui5-calendar`.\n\n**Note:** Use with `ui5-date` or `ui5-date-range` as calendar date selection types.", - "_ui5privacy": "public" - }, { "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\n`selection-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- [Page Up] - Navigate to the previous month\n- [Page Down] - Navigate to the next month\n- [Shift] + [Page Up] - Navigate to the previous year\n- [Shift] + [Page Down] - Navigate to the next year\n- [Ctrl] + [Shift] + [Page Up] - Navigate ten years backwards\n- [Ctrl] + [Shift] + [Page Down] - 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- [Page Up] - Navigate to the previous year\n- [Page Down] - 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- [Page Up] - Navigate to the previous year range\n- [Page Down] - 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] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### 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<script data-id=\"sap-ui-config\" type=\"application/json\">\n\t{\n\t\t\"calendarType\": \"Japanese\"\n\t}\n</script>\n```\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Calendar.js\";`", "name": "Calendar", "cssParts": [ + { + "description": "Used to style the calendar header navigation arrow buttons (previous/next buttons).", + "name": "calendar-header-arrow-button" + }, + { + "description": "Used to style the calendar header middle buttons (month/year/year-range buttons).", + "name": "calendar-header-middle-button" + }, { "description": "Used to style the day cells.", "name": "day-cell" @@ -1944,14 +1982,6 @@ { "description": "Used to style the year range picker root container.", "name": "year-range-picker-root" - }, - { - "description": "Used to style the calendar header middle buttons (month/year/year-range buttons).", - "name": "calendar-header-middle-button" - }, - { - "description": "Used to style the calendar header navigation arrow buttons (previous/next buttons).", - "name": "calendar-header-arrow-button" } ], "slots": [ @@ -1988,32 +2018,32 @@ "_ui5privacy": "public" }, { - "name": "specialDates", - "description": "Defines the special dates, visually emphasized in the calendar.", - "_ui5since": "1.23.0", + "name": "disabledDates", + "description": "Defines the disabled date ranges that cannot be selected in the calendar.\nUse `ui5-date-range` elements to specify ranges of disabled dates.\nEach range can define a start date, an end date, or both.", + "_ui5since": "2.16.0", "_ui5type": { - "text": "Array<SpecialCalendarDate>", + "text": "Array<CalendarDateRange>", "references": [ { - "name": "SpecialCalendarDate", + "name": "CalendarDateRange", "package": "@ui5/webcomponents", - "module": "dist/SpecialCalendarDate.js" + "module": "dist/CalendarDateRange.js" } ] }, "_ui5privacy": "public" }, { - "name": "disabledDates", - "description": "Defines the disabled date ranges that cannot be selected in the calendar.\nUse `ui5-date-range` elements to specify ranges of disabled dates.\nEach range can define a start date, an end date, or both.", - "_ui5since": "2.16.0", + "name": "specialDates", + "description": "Defines the special dates, visually emphasized in the calendar.", + "_ui5since": "1.23.0", "_ui5type": { - "text": "Array<CalendarDateRange>", + "text": "Array<SpecialCalendarDate>", "references": [ { - "name": "CalendarDateRange", + "name": "SpecialCalendarDate", "package": "@ui5/webcomponents", - "module": "dist/CalendarDateRange.js" + "module": "dist/SpecialCalendarDate.js" } ] }, @@ -2023,19 +2053,42 @@ "members": [ { "kind": "field", - "name": "selectionMode", + "name": "calendarWeekNumbering", "type": { - "text": "CalendarSelectionMode", + "text": "CalendarWeekNumbering", "references": [ { - "name": "CalendarSelectionMode", + "name": "CalendarWeekNumbering", "package": "@ui5/webcomponents", - "module": "dist/types/CalendarSelectionMode.js" + "module": "dist/types/CalendarWeekNumbering.js" } ] }, - "default": "\"Single\"", - "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": "\"Default\"", + "description": "Defines how to calculate calendar weeks and first day of the week.\nIf not set, the calendar will be displayed according to the currently set global configuration.", + "privacy": "public", + "_ui5since": "2.2.0" + }, + { + "kind": "field", + "name": "displayFormat", + "type": { + "text": "string | undefined" + }, + "description": "Determines the format, displayed in the input field.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.14.0" + }, + { + "kind": "field", + "name": "formatPattern", + "type": { + "text": "string | undefined" + }, + "description": "Determines the format, displayed in the input field.", + "default": "undefined", + "deprecated": "Use displayFormat and valueFormat instead", "privacy": "public" }, { @@ -2048,6 +2101,28 @@ "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.", "privacy": "public" }, + { + "kind": "field", + "name": "maxDate", + "type": { + "text": "string" + }, + "default": "\"\"", + "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).", + "privacy": "public", + "_ui5since": "1.0.0-rc.6" + }, + { + "kind": "field", + "name": "minDate", + "type": { + "text": "string" + }, + "default": "\"\"", + "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).", + "privacy": "public", + "_ui5since": "1.0.0-rc.6" + }, { "kind": "field", "name": "primaryCalendarType", @@ -2063,11 +2138,7 @@ }, "description": "Sets a calendar type used for display.\nIf not set, the calendar type of the global configuration is used.", "default": "undefined", - "privacy": "public", - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" - } + "privacy": "public" }, { "kind": "field", @@ -2085,41 +2156,24 @@ "description": "Defines the secondary calendar type.\nIf not set, the calendar will only show the primary calendar type.", "default": "undefined", "privacy": "public", - "_ui5since": "1.0.0-rc.16", - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" - } - }, - { - "kind": "field", - "name": "formatPattern", - "type": { - "text": "string | undefined" - }, - "description": "Determines the format, displayed in the input field.", - "default": "undefined", - "deprecated": "Use displayFormat and valueFormat instead", - "privacy": "public", - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" - } + "_ui5since": "1.0.0-rc.16" }, { "kind": "field", - "name": "displayFormat", + "name": "selectionMode", "type": { - "text": "string | undefined" + "text": "CalendarSelectionMode", + "references": [ + { + "name": "CalendarSelectionMode", + "package": "@ui5/webcomponents", + "module": "dist/types/CalendarSelectionMode.js" + } + ] }, - "description": "Determines the format, displayed in the input field.", - "default": "undefined", - "privacy": "public", - "_ui5since": "2.14.0", - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" - } + "default": "\"Single\"", + "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.", + "privacy": "public" }, { "kind": "field", @@ -2130,69 +2184,13 @@ "description": "Determines the format, used for the value attribute.", "default": "undefined", "privacy": "public", - "_ui5since": "2.14.0", - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" - } - }, + "_ui5since": "2.14.0" + } + ], + "events": [ { - "kind": "field", - "name": "minDate", - "type": { - "text": "string" - }, - "default": "\"\"", - "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).", - "privacy": "public", - "_ui5since": "1.0.0-rc.6", - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" - } - }, - { - "kind": "field", - "name": "maxDate", - "type": { - "text": "string" - }, - "default": "\"\"", - "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).", - "privacy": "public", - "_ui5since": "1.0.0-rc.6", - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" - } - }, - { - "kind": "field", - "name": "calendarWeekNumbering", - "type": { - "text": "CalendarWeekNumbering", - "references": [ - { - "name": "CalendarWeekNumbering", - "package": "@ui5/webcomponents", - "module": "dist/types/CalendarWeekNumbering.js" - } - ] - }, - "default": "\"Default\"", - "description": "Defines how to calculate calendar weeks and first day of the week.\nIf not set, the calendar will be displayed according to the currently set global configuration.", - "privacy": "public", - "_ui5since": "2.2.0", - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" - } - } - ], - "events": [ - { - "name": "selection-change", - "_ui5privacy": "public", + "name": "selection-change", + "_ui5privacy": "public", "type": { "text": "CustomEvent<CalendarSelectionChangeEventDetail>", "references": [ @@ -2210,33 +2208,52 @@ "_ui5parameters": [ { "type": { - "text": "Array<string>" + "text": "Array<number>" }, - "name": "selectedValues", + "name": "selectedDates", "_ui5privacy": "public", - "description": "The selected dates" + "description": "The selected dates as UTC timestamps" }, { "type": { - "text": "Array<number>" + "text": "Array<string>" }, - "name": "selectedDates", + "name": "selectedValues", "_ui5privacy": "public", - "description": "The selected dates as UTC timestamps" + "description": "The selected dates" } ] } ], "attributes": [ { - "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.", - "name": "selection-mode", - "default": "\"Single\"", - "fieldName": "selectionMode", + "description": "Defines how to calculate calendar weeks and first day of the week.\nIf not set, the calendar will be displayed according to the currently set global configuration.", + "name": "calendar-week-numbering", + "default": "\"Default\"", + "fieldName": "calendarWeekNumbering", "type": { - "text": "\"Single\" | \"Multiple\" | \"Range\"" + "text": "\"Default\" | \"ISO_8601\" | \"MiddleEastern\" | \"WesternTraditional\"" + } + }, + { + "description": "Determines the format, displayed in the input field.", + "name": "display-format", + "default": "undefined", + "fieldName": "displayFormat", + "type": { + "text": "string | undefined" } }, + { + "description": "Determines the format, displayed in the input field.", + "name": "format-pattern", + "default": "undefined", + "fieldName": "formatPattern", + "type": { + "text": "string | undefined" + }, + "deprecated": "Use displayFormat and valueFormat instead" + }, { "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.", "name": "hide-week-numbers", @@ -2246,6 +2263,24 @@ "text": "boolean" } }, + { + "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).", + "name": "max-date", + "default": "\"\"", + "fieldName": "maxDate", + "type": { + "text": "string" + } + }, + { + "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).", + "name": "min-date", + "default": "\"\"", + "fieldName": "minDate", + "type": { + "text": "string" + } + }, { "description": "Sets a calendar type used for display.\nIf not set, the calendar type of the global configuration is used.", "name": "primary-calendar-type", @@ -2253,10 +2288,6 @@ "fieldName": "primaryCalendarType", "type": { "text": "\"Gregorian\" | \"Islamic\" | \"Japanese\" | \"Buddhist\" | \"Persian\" | undefined" - }, - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" } }, { @@ -2266,37 +2297,15 @@ "fieldName": "secondaryCalendarType", "type": { "text": "\"Gregorian\" | \"Islamic\" | \"Japanese\" | \"Buddhist\" | \"Persian\" | undefined" - }, - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" } }, { - "description": "Determines the format, displayed in the input field.", - "name": "format-pattern", - "default": "undefined", - "fieldName": "formatPattern", - "type": { - "text": "string | undefined" - }, - "deprecated": "Use displayFormat and valueFormat instead", - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" - } - }, - { - "description": "Determines the format, displayed in the input field.", - "name": "display-format", - "default": "undefined", - "fieldName": "displayFormat", + "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.", + "name": "selection-mode", + "default": "\"Single\"", + "fieldName": "selectionMode", "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" + "text": "\"Single\" | \"Multiple\" | \"Range\"" } }, { @@ -2306,49 +2315,6 @@ "fieldName": "valueFormat", "type": { "text": "string | undefined" - }, - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" - } - }, - { - "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).", - "name": "min-date", - "default": "\"\"", - "fieldName": "minDate", - "type": { - "text": "string" - }, - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" - } - }, - { - "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).", - "name": "max-date", - "default": "\"\"", - "fieldName": "maxDate", - "type": { - "text": "string" - }, - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" - } - }, - { - "description": "Defines how to calculate calendar weeks and first day of the week.\nIf not set, the calendar will be displayed according to the currently set global configuration.", - "name": "calendar-week-numbering", - "default": "\"Default\"", - "fieldName": "calendarWeekNumbering", - "type": { - "text": "\"Default\" | \"ISO_8601\" | \"MiddleEastern\" | \"WesternTraditional\"" - }, - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" } } ], @@ -2361,6 +2327,12 @@ "customElement": true, "_ui5since": "1.0.0-rc.11", "_ui5privacy": "public" + }, + { + "kind": "interface", + "name": "ICalendarSelectedDates", + "description": "Interface for components that may be slotted inside a `ui5-calendar`.\n\n**Note:** Use with `ui5-date` or `ui5-date-range` as calendar date selection types.", + "_ui5privacy": "public" } ], "exports": [ @@ -2461,40 +2433,40 @@ "members": [ { "kind": "field", - "name": "startValue", + "name": "endValue", "type": { "text": "string" }, "default": "\"\"", - "description": "Start of date range formatted according to the `formatPattern` property\nof the `ui5-calendar` that hosts the component.", + "description": "End of date range formatted according to the `formatPattern` property\nof the `ui5-calendar` that hosts the component.", "privacy": "public" }, { "kind": "field", - "name": "endValue", + "name": "startValue", "type": { "text": "string" }, "default": "\"\"", - "description": "End of date range formatted according to the `formatPattern` property\nof the `ui5-calendar` that hosts the component.", + "description": "Start of date range formatted according to the `formatPattern` property\nof the `ui5-calendar` that hosts the component.", "privacy": "public" } ], "attributes": [ { - "description": "Start of date range formatted according to the `formatPattern` property\nof the `ui5-calendar` that hosts the component.", - "name": "start-value", + "description": "End of date range formatted according to the `formatPattern` property\nof the `ui5-calendar` that hosts the component.", + "name": "end-value", "default": "\"\"", - "fieldName": "startValue", + "fieldName": "endValue", "type": { "text": "string" } }, { - "description": "End of date range formatted according to the `formatPattern` property\nof the `ui5-calendar` that hosts the component.", - "name": "end-value", + "description": "Start of date range formatted according to the `formatPattern` property\nof the `ui5-calendar` that hosts the component.", + "name": "start-value", "default": "\"\"", - "fieldName": "endValue", + "fieldName": "startValue", "type": { "text": "string" } @@ -2567,12 +2539,12 @@ "members": [ { "kind": "field", - "name": "hideToday", + "name": "hideNonWorkingDay", "type": { "text": "boolean" }, "default": "false", - "description": "Hides the Today item in the legend.", + "description": "Hides the Non-Working day item in the legend.", "privacy": "public" }, { @@ -2587,12 +2559,12 @@ }, { "kind": "field", - "name": "hideNonWorkingDay", + "name": "hideToday", "type": { "text": "boolean" }, "default": "false", - "description": "Hides the Non-Working day item in the legend.", + "description": "Hides the Today item in the legend.", "privacy": "public" }, { @@ -2608,10 +2580,10 @@ ], "attributes": [ { - "description": "Hides the Today item in the legend.", - "name": "hide-today", + "description": "Hides the Non-Working day item in the legend.", + "name": "hide-non-working-day", "default": "false", - "fieldName": "hideToday", + "fieldName": "hideNonWorkingDay", "type": { "text": "boolean" } @@ -2626,10 +2598,10 @@ } }, { - "description": "Hides the Non-Working day item in the legend.", - "name": "hide-non-working-day", + "description": "Hides the Today item in the legend.", + "name": "hide-today", "default": "false", - "fieldName": "hideNonWorkingDay", + "fieldName": "hideToday", "type": { "text": "boolean" } @@ -2772,91 +2744,54 @@ "members": [ { "kind": "field", - "name": "primaryCalendarType", - "type": { - "text": "CalendarType | undefined", - "references": [ - { - "name": "CalendarType", - "package": "@ui5/webcomponents-base", - "module": "dist/types/CalendarType.js" - } - ] - }, - "description": "Sets a calendar type used for display.\nIf not set, the calendar type of the global configuration is used.", - "default": "undefined", - "privacy": "public", - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" - } - }, - { - "kind": "field", - "name": "secondaryCalendarType", + "name": "calendarWeekNumbering", "type": { - "text": "CalendarType | undefined", + "text": "CalendarWeekNumbering", "references": [ { - "name": "CalendarType", - "package": "@ui5/webcomponents-base", - "module": "dist/types/CalendarType.js" + "name": "CalendarWeekNumbering", + "package": "@ui5/webcomponents", + "module": "dist/types/CalendarWeekNumbering.js" } ] }, - "description": "Defines the secondary calendar type.\nIf not set, the calendar will only show the primary calendar type.", - "default": "undefined", + "default": "\"Default\"", + "description": "Defines how to calculate calendar weeks and first day of the week.\nIf not set, the calendar will be displayed according to the currently set global configuration.", "privacy": "public", - "_ui5since": "1.0.0-rc.16", - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" - } + "_ui5since": "2.2.0" }, { "kind": "field", - "name": "formatPattern", + "name": "displayFormat", "type": { "text": "string | undefined" }, "description": "Determines the format, displayed in the input field.", "default": "undefined", - "deprecated": "Use displayFormat and valueFormat instead", "privacy": "public", - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" - } + "_ui5since": "2.14.0" }, { "kind": "field", - "name": "displayFormat", + "name": "formatPattern", "type": { "text": "string | undefined" }, "description": "Determines the format, displayed in the input field.", "default": "undefined", - "privacy": "public", - "_ui5since": "2.14.0", - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" - } + "deprecated": "Use displayFormat and valueFormat instead", + "privacy": "public" }, { "kind": "field", - "name": "valueFormat", + "name": "maxDate", "type": { - "text": "string | undefined" + "text": "string" }, - "description": "Determines the format, used for the value attribute.", - "default": "undefined", + "default": "\"\"", + "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).", "privacy": "public", - "_ui5since": "2.14.0", - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" - } + "_ui5since": "1.0.0-rc.6" }, { "kind": "field", @@ -2867,48 +2802,53 @@ "default": "\"\"", "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).", "privacy": "public", - "_ui5since": "1.0.0-rc.6", - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" - } + "_ui5since": "1.0.0-rc.6" }, { "kind": "field", - "name": "maxDate", + "name": "primaryCalendarType", "type": { - "text": "string" + "text": "CalendarType | undefined", + "references": [ + { + "name": "CalendarType", + "package": "@ui5/webcomponents-base", + "module": "dist/types/CalendarType.js" + } + ] }, - "default": "\"\"", - "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).", - "privacy": "public", - "_ui5since": "1.0.0-rc.6", - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" - } + "description": "Sets a calendar type used for display.\nIf not set, the calendar type of the global configuration is used.", + "default": "undefined", + "privacy": "public" }, { "kind": "field", - "name": "calendarWeekNumbering", + "name": "secondaryCalendarType", "type": { - "text": "CalendarWeekNumbering", + "text": "CalendarType | undefined", "references": [ { - "name": "CalendarWeekNumbering", - "package": "@ui5/webcomponents", - "module": "dist/types/CalendarWeekNumbering.js" + "name": "CalendarType", + "package": "@ui5/webcomponents-base", + "module": "dist/types/CalendarType.js" } ] }, - "default": "\"Default\"", - "description": "Defines how to calculate calendar weeks and first day of the week.\nIf not set, the calendar will be displayed according to the currently set global configuration.", + "description": "Defines the secondary calendar type.\nIf not set, the calendar will only show the primary calendar type.", + "default": "undefined", "privacy": "public", - "_ui5since": "2.2.0", - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" - } + "_ui5since": "1.0.0-rc.16" + }, + { + "kind": "field", + "name": "valueFormat", + "type": { + "text": "string | undefined" + }, + "description": "Determines the format, used for the value attribute.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.14.0" } ], "superclass": { @@ -2920,69 +2860,40 @@ "_ui5privacy": "public", "attributes": [ { - "description": "Sets a calendar type used for display.\nIf not set, the calendar type of the global configuration is used.", - "name": "primary-calendar-type", - "default": "undefined", - "fieldName": "primaryCalendarType", - "type": { - "text": "\"Gregorian\" | \"Islamic\" | \"Japanese\" | \"Buddhist\" | \"Persian\" | undefined" - }, - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" - } - }, - { - "description": "Defines the secondary calendar type.\nIf not set, the calendar will only show the primary calendar type.", - "name": "secondary-calendar-type", - "default": "undefined", - "fieldName": "secondaryCalendarType", + "description": "Defines how to calculate calendar weeks and first day of the week.\nIf not set, the calendar will be displayed according to the currently set global configuration.", + "name": "calendar-week-numbering", + "default": "\"Default\"", + "fieldName": "calendarWeekNumbering", "type": { - "text": "\"Gregorian\" | \"Islamic\" | \"Japanese\" | \"Buddhist\" | \"Persian\" | undefined" - }, - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" + "text": "\"Default\" | \"ISO_8601\" | \"MiddleEastern\" | \"WesternTraditional\"" } }, { "description": "Determines the format, displayed in the input field.", - "name": "format-pattern", + "name": "display-format", "default": "undefined", - "fieldName": "formatPattern", + "fieldName": "displayFormat", "type": { "text": "string | undefined" - }, - "deprecated": "Use displayFormat and valueFormat instead", - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" } }, { "description": "Determines the format, displayed in the input field.", - "name": "display-format", + "name": "format-pattern", "default": "undefined", - "fieldName": "displayFormat", + "fieldName": "formatPattern", "type": { "text": "string | undefined" }, - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" - } + "deprecated": "Use displayFormat and valueFormat instead" }, { - "description": "Determines the format, used for the value attribute.", - "name": "value-format", - "default": "undefined", - "fieldName": "valueFormat", + "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).", + "name": "max-date", + "default": "\"\"", + "fieldName": "maxDate", "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" + "text": "string" } }, { @@ -2992,36 +2903,33 @@ "fieldName": "minDate", "type": { "text": "string" - }, - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" } }, { - "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).", - "name": "max-date", - "default": "\"\"", - "fieldName": "maxDate", + "description": "Sets a calendar type used for display.\nIf not set, the calendar type of the global configuration is used.", + "name": "primary-calendar-type", + "default": "undefined", + "fieldName": "primaryCalendarType", "type": { - "text": "string" - }, - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" + "text": "\"Gregorian\" | \"Islamic\" | \"Japanese\" | \"Buddhist\" | \"Persian\" | undefined" } }, { - "description": "Defines how to calculate calendar weeks and first day of the week.\nIf not set, the calendar will be displayed according to the currently set global configuration.", - "name": "calendar-week-numbering", - "default": "\"Default\"", - "fieldName": "calendarWeekNumbering", + "description": "Defines the secondary calendar type.\nIf not set, the calendar will only show the primary calendar type.", + "name": "secondary-calendar-type", + "default": "undefined", + "fieldName": "secondaryCalendarType", "type": { - "text": "\"Default\" | \"ISO_8601\" | \"MiddleEastern\" | \"WesternTraditional\"" - }, - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" + "text": "\"Gregorian\" | \"Islamic\" | \"Japanese\" | \"Buddhist\" | \"Persian\" | undefined" + } + }, + { + "description": "Determines the format, used for the value attribute.", + "name": "value-format", + "default": "undefined", + "fieldName": "valueFormat", + "type": { + "text": "string | undefined" } } ] @@ -3047,13 +2955,13 @@ "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.js\";`\n\n`import \"@ui5/webcomponents/dist/CardHeader.js\";` (for `ui5-card-header`)", "name": "Card", "cssParts": [ - { - "description": "Used to style the root DOM element of the card component", - "name": "root" - }, { "description": "Used to style the content of the card", "name": "content" + }, + { + "description": "Used to style the root DOM element of the card component", + "name": "root" } ], "slots": [ @@ -3206,34 +3114,34 @@ "name": "CardHeader", "cssParts": [ { - "description": "Used to style the root DOM element of the CardHeader", - "name": "root" + "description": "Used to style the additional text of the CardHeader", + "name": "additional-text" }, { - "description": "Used to style the title of the CardHeader", - "name": "title" + "description": "Used to style the root DOM element of the CardHeader", + "name": "root" }, { "description": "Used to style the subtitle of the CardHeader", "name": "subtitle" }, { - "description": "Used to style the additional text of the CardHeader", - "name": "additional-text" + "description": "Used to style the title of the CardHeader", + "name": "title" } ], "slots": [ { - "name": "avatar", - "description": "Defines an avatar image, displayed in the left most part of the header.", + "name": "action", + "description": "Defines an action, displayed in the right most part of the header.", "_ui5type": { "text": "Array<HTMLElement>" }, "_ui5privacy": "public" }, { - "name": "action", - "description": "Defines an action, displayed in the right most part of the header.", + "name": "avatar", + "description": "Defines an avatar image, displayed in the left most part of the header.", "_ui5type": { "text": "Array<HTMLElement>" }, @@ -3243,42 +3151,42 @@ "members": [ { "kind": "field", - "name": "titleText", + "name": "additionalText", "type": { "text": "string | undefined" }, - "description": "Defines the title text.", + "description": "Defines the additional text.", "default": "undefined", "privacy": "public" }, { "kind": "field", - "name": "subtitleText", + "name": "interactive", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Defines the subtitle text.", - "default": "undefined", + "default": "false", + "description": "Defines if the component would be interactive,\ne.g gets hover effect and `click` event is fired, when pressed.", "privacy": "public" }, { "kind": "field", - "name": "additionalText", + "name": "subtitleText", "type": { "text": "string | undefined" }, - "description": "Defines the additional text.", + "description": "Defines the subtitle text.", "default": "undefined", "privacy": "public" }, { "kind": "field", - "name": "interactive", + "name": "titleText", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Defines if the component would be interactive,\ne.g gets hover effect and `click` event is fired, when pressed.", + "description": "Defines the title text.", + "default": "undefined", "privacy": "public" } ], @@ -3297,14 +3205,23 @@ ], "attributes": [ { - "description": "Defines the title text.", - "name": "title-text", + "description": "Defines the additional text.", + "name": "additional-text", "default": "undefined", - "fieldName": "titleText", + "fieldName": "additionalText", "type": { "text": "string | undefined" } }, + { + "description": "Defines if the component would be interactive,\ne.g gets hover effect and `click` event is fired, when pressed.", + "name": "interactive", + "default": "false", + "fieldName": "interactive", + "type": { + "text": "boolean" + } + }, { "description": "Defines the subtitle text.", "name": "subtitle-text", @@ -3315,22 +3232,13 @@ } }, { - "description": "Defines the additional text.", - "name": "additional-text", + "description": "Defines the title text.", + "name": "title-text", "default": "undefined", - "fieldName": "additionalText", + "fieldName": "titleText", "type": { "text": "string | undefined" } - }, - { - "description": "Defines if the component would be interactive,\ne.g gets hover effect and `click` event is fired, when pressed.", - "name": "interactive", - "default": "false", - "fieldName": "interactive", - "type": { - "text": "boolean" - } } ], "superclass": { @@ -3413,22 +3321,47 @@ }, { "kind": "field", - "name": "cyclic", + "name": "arrowsPlacement", "type": { - "text": "boolean" + "text": "CarouselArrowsPlacement", + "references": [ + { + "name": "CarouselArrowsPlacement", + "package": "@ui5/webcomponents", + "module": "dist/types/CarouselArrowsPlacement.js" + } + ] }, - "default": "false", - "description": "Defines whether the carousel should loop, i.e show the first page after the last page is reached and vice versa.", + "default": "\"Content\"", + "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.", "privacy": "public" }, { "kind": "field", - "name": "itemsPerPage", + "name": "backgroundDesign", "type": { - "text": "string" + "text": "BackgroundDesign", + "references": [ + { + "name": "BackgroundDesign", + "package": "@ui5/webcomponents", + "module": "dist/types/BackgroundDesign.js" + } + ] }, - "default": "\"S1 M1 L1 XL1\"", - "description": "Defines the number of items per page depending on the carousel width.\n\n- 'S' for screens smaller than 600 pixels.\n- 'M' for screens greater than or equal to 600 pixels and smaller than 1024 pixels.\n- 'L' for screens greater than or equal to 1024 pixels and smaller than 1440 pixels.\n- 'XL' for screens greater than or equal to 1440 pixels.\n\nOne item per page is shown by default.", + "default": "\"Translucent\"", + "description": "Defines the carousel's background design.", + "privacy": "public", + "_ui5since": "1.14" + }, + { + "kind": "field", + "name": "cyclic", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the carousel should loop, i.e show the first page after the last page is reached and vice versa.", "privacy": "public" }, { @@ -3455,39 +3388,35 @@ }, { "kind": "field", - "name": "pageIndicatorType", + "name": "itemsPerPage", "type": { - "text": "CarouselPageIndicatorType", - "references": [ - { - "name": "CarouselPageIndicatorType", - "package": "@ui5/webcomponents", - "module": "dist/types/CarouselPageIndicatorType.js" - } - ] + "text": "string" }, - "default": "\"Default\"", - "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)", - "privacy": "public", - "_ui5since": "1.10" + "default": "\"S1 M1 L1 XL1\"", + "description": "Defines the number of items per page depending on the carousel width.\n\n- 'S' for screens smaller than 600 pixels.\n- 'M' for screens greater than or equal to 600 pixels and smaller than 1024 pixels.\n- 'L' for screens greater than or equal to 1024 pixels and smaller than 1440 pixels.\n- 'XL' for screens greater than or equal to 1440 pixels.\n\nOne item per page is shown by default.", + "privacy": "public" }, { - "kind": "field", - "name": "backgroundDesign", - "type": { - "text": "BackgroundDesign", - "references": [ - { - "name": "BackgroundDesign", - "package": "@ui5/webcomponents", - "module": "dist/types/BackgroundDesign.js" - } - ] + "kind": "method", + "name": "navigateTo", + "return": { + "type": { + "text": "void" + } }, - "default": "\"Translucent\"", - "description": "Defines the carousel's background design.", + "parameters": [ + { + "name": "itemIndex", + "type": { + "text": "number" + }, + "description": "The index of the target item", + "_ui5privacy": "public" + } + ], + "description": "Changes the currently displayed page.", "privacy": "public", - "_ui5since": "1.14" + "_ui5since": "1.0.0-rc.15" }, { "kind": "field", @@ -3527,37 +3456,21 @@ }, { "kind": "field", - "name": "arrowsPlacement", + "name": "pageIndicatorType", "type": { - "text": "CarouselArrowsPlacement", + "text": "CarouselPageIndicatorType", "references": [ { - "name": "CarouselArrowsPlacement", + "name": "CarouselPageIndicatorType", "package": "@ui5/webcomponents", - "module": "dist/types/CarouselArrowsPlacement.js" + "module": "dist/types/CarouselPageIndicatorType.js" } ] }, - "default": "\"Content\"", - "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.", - "privacy": "public" - }, - { - "kind": "method", - "name": "navigateTo", - "parameters": [ - { - "name": "itemIndex", - "type": { - "text": "number" - }, - "description": "The index of the target item", - "_ui5privacy": "public" - } - ], - "description": "Changes the currently displayed page.", + "default": "\"Default\"", + "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)", "privacy": "public", - "_ui5since": "1.0.0-rc.15" + "_ui5since": "1.10" }, { "kind": "field", @@ -3622,6 +3535,24 @@ "text": "string | undefined" } }, + { + "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.", + "name": "arrows-placement", + "default": "\"Content\"", + "fieldName": "arrowsPlacement", + "type": { + "text": "\"Content\" | \"Navigation\"" + } + }, + { + "description": "Defines the carousel's background design.", + "name": "background-design", + "default": "\"Translucent\"", + "fieldName": "backgroundDesign", + "type": { + "text": "\"Transparent\" | \"Solid\" | \"Translucent\"" + } + }, { "description": "Defines whether the carousel should loop, i.e show the first page after the last page is reached and vice versa.", "name": "cyclic", @@ -3631,15 +3562,6 @@ "text": "boolean" } }, - { - "description": "Defines the number of items per page depending on the carousel width.\n\n- 'S' for screens smaller than 600 pixels.\n- 'M' for screens greater than or equal to 600 pixels and smaller than 1024 pixels.\n- 'L' for screens greater than or equal to 1024 pixels and smaller than 1440 pixels.\n- 'XL' for screens greater than or equal to 1440 pixels.\n\nOne item per page is shown by default.", - "name": "items-per-page", - "default": "\"S1 M1 L1 XL1\"", - "fieldName": "itemsPerPage", - "type": { - "text": "string" - } - }, { "description": "Defines the visibility of the navigation arrows.\nIf set to true the navigation arrows will be hidden.", "name": "hide-navigation-arrows", @@ -3659,21 +3581,12 @@ } }, { - "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)", - "name": "page-indicator-type", - "default": "\"Default\"", - "fieldName": "pageIndicatorType", - "type": { - "text": "\"Default\" | \"Numeric\"" - } - }, - { - "description": "Defines the carousel's background design.", - "name": "background-design", - "default": "\"Translucent\"", - "fieldName": "backgroundDesign", + "description": "Defines the number of items per page depending on the carousel width.\n\n- 'S' for screens smaller than 600 pixels.\n- 'M' for screens greater than or equal to 600 pixels and smaller than 1024 pixels.\n- 'L' for screens greater than or equal to 1024 pixels and smaller than 1440 pixels.\n- 'XL' for screens greater than or equal to 1440 pixels.\n\nOne item per page is shown by default.", + "name": "items-per-page", + "default": "\"S1 M1 L1 XL1\"", + "fieldName": "itemsPerPage", "type": { - "text": "\"Transparent\" | \"Solid\" | \"Translucent\"" + "text": "string" } }, { @@ -3695,12 +3608,12 @@ } }, { - "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.", - "name": "arrows-placement", - "default": "\"Content\"", - "fieldName": "arrowsPlacement", + "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)", + "name": "page-indicator-type", + "default": "\"Default\"", + "fieldName": "pageIndicatorType", "type": { - "text": "\"Content\" | \"Navigation\"" + "text": "\"Default\" | \"Numeric\"" } }, { @@ -3753,59 +3666,61 @@ "name": "CheckBox", "cssParts": [ { - "description": "Used to style the outermost wrapper of the `ui5-checkbox`", - "name": "root" + "description": "Used to style the icon of the `ui5-checkbox`", + "name": "icon" }, { "description": "Used to style the label of the `ui5-checkbox`", "name": "label" }, { - "description": "Used to style the icon of the `ui5-checkbox`", - "name": "icon" + "description": "Used to style the outermost wrapper of the `ui5-checkbox`", + "name": "root" } ], "members": [ { "kind": "field", - "name": "accessibleNameRef", + "name": "accessibleName", "type": { "text": "string | undefined" }, - "description": "Receives id(or many ids) of the elements that label the component", - "default": "undefined", + "description": "Defines the accessible ARIA name of the component.", "privacy": "public", + "default": "undefined", "_ui5since": "1.1.0" }, { "kind": "field", - "name": "accessibleName", + "name": "accessibleNameRef", "type": { "text": "string | undefined" }, - "description": "Defines the accessible ARIA name of the component.", - "privacy": "public", + "description": "Receives id(or many ids) of the elements that label the component", "default": "undefined", + "privacy": "public", "_ui5since": "1.1.0" }, { "kind": "field", - "name": "disabled", + "name": "checked", "type": { "text": "boolean" }, "default": "false", - "description": "Defines whether the component is disabled.\n\n**Note:** A disabled component is completely noninteractive.", - "privacy": "public" + "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.", + "privacy": "public", + "_ui5formProperty": true, + "_ui5formEvents": "change" }, { "kind": "field", - "name": "readonly", + "name": "disabled", "type": { "text": "boolean" }, "default": "false", - "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.", + "description": "Defines whether the component is disabled.\n\n**Note:** A disabled component is completely noninteractive.", "privacy": "public" }, { @@ -3821,37 +3736,45 @@ }, { "kind": "field", - "name": "required", + "name": "indeterminate", "type": { "text": "boolean" }, "default": "false", - "description": "Defines whether the component is required.\n\n**Note:** We advise against using the text property of the checkbox when there is a\nlabel associated with it to avoid having two required asterisks.", + "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", "privacy": "public", - "_ui5since": "1.3.0" + "_ui5since": "1.0.0-rc.15" }, { "kind": "field", - "name": "indeterminate", + "name": "name", + "type": { + "text": "string | undefined" + }, + "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", + "default": "undefined", + "privacy": "public" + }, + { + "kind": "field", + "name": "readonly", "type": { "text": "boolean" }, "default": "false", - "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", - "privacy": "public", - "_ui5since": "1.0.0-rc.15" + "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.", + "privacy": "public" }, { "kind": "field", - "name": "checked", + "name": "required", "type": { "text": "boolean" }, "default": "false", - "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.", + "description": "Defines whether the component is required.\n\n**Note:** We advise against using the text property of the checkbox when there is a\nlabel associated with it to avoid having two required asterisks.", "privacy": "public", - "_ui5formProperty": true, - "_ui5formEvents": "change" + "_ui5since": "1.3.0" }, { "kind": "field", @@ -3863,6 +3786,16 @@ "default": "undefined", "privacy": "public" }, + { + "kind": "field", + "name": "value", + "type": { + "text": "string" + }, + "default": "\"on\"", + "description": "Defines the form value of the component that is submitted when the checkbox is checked.\n\nWhen a form containing `ui5-checkbox` elements is submitted, only the values of the\n**checked** checkboxes are included in the form data sent to the server. Unchecked\ncheckboxes do not contribute any data to the form submission.\n\nThis property is particularly useful for **checkbox groups**, where multiple checkboxes with the same `name` but different `value` properties can be used to represent a set of related options.", + "privacy": "public" + }, { "kind": "field", "name": "valueState", @@ -3896,26 +3829,6 @@ "default": "\"Normal\"", "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.\n**Note:** for option \"None\" the text will be truncated with an ellipsis.", "privacy": "public" - }, - { - "kind": "field", - "name": "name", - "type": { - "text": "string | undefined" - }, - "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", - "default": "undefined", - "privacy": "public" - }, - { - "kind": "field", - "name": "value", - "type": { - "text": "string" - }, - "default": "\"on\"", - "description": "Defines the form value of the component that is submitted when the checkbox is checked.\n\nWhen a form containing `ui5-checkbox` elements is submitted, only the values of the\n**checked** checkboxes are included in the form data sent to the server. Unchecked\ncheckboxes do not contribute any data to the form submission.\n\nThis property is particularly useful for **checkbox groups**, where multiple checkboxes with the same `name` but different `value` properties can be used to represent a set of related options.", - "privacy": "public" } ], "events": [ @@ -3933,37 +3846,37 @@ ], "attributes": [ { - "description": "Receives id(or many ids) of the elements that label the component", - "name": "accessible-name-ref", + "description": "Defines the accessible ARIA name of the component.", + "name": "accessible-name", "default": "undefined", - "fieldName": "accessibleNameRef", + "fieldName": "accessibleName", "type": { "text": "string | undefined" } }, { - "description": "Defines the accessible ARIA name of the component.", - "name": "accessible-name", + "description": "Receives id(or many ids) of the elements that label the component", + "name": "accessible-name-ref", "default": "undefined", - "fieldName": "accessibleName", + "fieldName": "accessibleNameRef", "type": { "text": "string | undefined" } }, { - "description": "Defines whether the component is disabled.\n\n**Note:** A disabled component is completely noninteractive.", - "name": "disabled", + "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.", + "name": "checked", "default": "false", - "fieldName": "disabled", + "fieldName": "checked", "type": { "text": "boolean" } }, { - "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.", - "name": "readonly", + "description": "Defines whether the component is disabled.\n\n**Note:** A disabled component is completely noninteractive.", + "name": "disabled", "default": "false", - "fieldName": "readonly", + "fieldName": "disabled", "type": { "text": "boolean" } @@ -3978,28 +3891,37 @@ } }, { - "description": "Defines whether the component is required.\n\n**Note:** We advise against using the text property of the checkbox when there is a\nlabel associated with it to avoid having two required asterisks.", - "name": "required", + "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", + "name": "indeterminate", "default": "false", - "fieldName": "required", + "fieldName": "indeterminate", "type": { "text": "boolean" } }, { - "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", - "name": "indeterminate", + "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", + "name": "name", + "default": "undefined", + "fieldName": "name", + "type": { + "text": "string | undefined" + } + }, + { + "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.", + "name": "readonly", "default": "false", - "fieldName": "indeterminate", + "fieldName": "readonly", "type": { "text": "boolean" } }, { - "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.", - "name": "checked", + "description": "Defines whether the component is required.\n\n**Note:** We advise against using the text property of the checkbox when there is a\nlabel associated with it to avoid having two required asterisks.", + "name": "required", "default": "false", - "fieldName": "checked", + "fieldName": "required", "type": { "text": "boolean" } @@ -4013,6 +3935,15 @@ "text": "string | undefined" } }, + { + "description": "Defines the form value of the component that is submitted when the checkbox is checked.\n\nWhen a form containing `ui5-checkbox` elements is submitted, only the values of the\n**checked** checkboxes are included in the form data sent to the server. Unchecked\ncheckboxes do not contribute any data to the form submission.\n\nThis property is particularly useful for **checkbox groups**, where multiple checkboxes with the same `name` but different `value` properties can be used to represent a set of related options.", + "name": "value", + "default": "\"on\"", + "fieldName": "value", + "type": { + "text": "string" + } + }, { "description": "Defines the value state of the component.", "name": "value-state", @@ -4030,24 +3961,6 @@ "type": { "text": "\"None\" | \"Normal\"" } - }, - { - "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", - "name": "name", - "default": "undefined", - "fieldName": "name", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Defines the form value of the component that is submitted when the checkbox is checked.\n\nWhen a form containing `ui5-checkbox` elements is submitted, only the values of the\n**checked** checkboxes are included in the form data sent to the server. Unchecked\ncheckboxes do not contribute any data to the form submission.\n\nThis property is particularly useful for **checkbox groups**, where multiple checkboxes with the same `name` but different `value` properties can be used to represent a set of related options.", - "name": "value", - "default": "\"on\"", - "fieldName": "value", - "type": { - "text": "string" - } } ], "superclass": { @@ -4083,12 +3996,6 @@ "kind": "javascript-module", "path": "dist/ColorPalette.js", "declarations": [ - { - "kind": "interface", - "name": "IColorPaletteItem", - "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\n`import \"@ui5/webcomponents/dist/ColorPalette.js\";`", @@ -4111,6 +4018,30 @@ "_ui5privacy": "public" } ], + "members": [ + { + "kind": "field", + "name": "accessibleName", + "type": { + "text": "string | undefined" + }, + "description": "Defines the accessible name of the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.20.0" + }, + { + "kind": "field", + "name": "accessibleNameRef", + "type": { + "text": "string | undefined" + }, + "description": "Receives id(or many ids) of the elements that label the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.20.0" + } + ], "events": [ { "name": "item-click", @@ -4142,6 +4073,26 @@ ] } ], + "attributes": [ + { + "description": "Defines the accessible name of the component.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Receives id(or many ids) of the elements that label the component.", + "name": "accessible-name-ref", + "default": "undefined", + "fieldName": "accessibleNameRef", + "type": { + "text": "string | undefined" + } + } + ], "superclass": { "name": "UI5Element", "package": "@ui5/webcomponents-base", @@ -4150,8 +4101,13 @@ "tagName": "ui5-color-palette", "customElement": true, "_ui5since": "1.0.0-rc.12", - "_ui5privacy": "public", - "members": [] + "_ui5privacy": "public" + }, + { + "kind": "interface", + "name": "IColorPaletteItem", + "description": "Interface for components that may be used inside a `ui5-color-palette` or `ui5-color-palette-popover`", + "_ui5privacy": "public" } ], "exports": [ @@ -4182,16 +4138,6 @@ "description": "### Overview\n\nThe `ui5-color-palette-item` component represents a color in the the `ui5-color-palette`.", "name": "ColorPaletteItem", "members": [ - { - "kind": "field", - "name": "value", - "type": { - "text": "string" - }, - "default": "\"\"", - "description": "Defines the colour of the component.\n\n**Note:** The value should be a valid CSS color.", - "privacy": "public" - }, { "kind": "field", "name": "selected", @@ -4202,18 +4148,19 @@ "description": "Defines if the component is selected.\n\n**Note:** Only one item must be selected per <code>ui5-color-palette</code>.\nIf more than one item is defined as selected, the last one would be considered as the selected one.", "privacy": "public", "_ui5since": "2.0.0" - } - ], - "attributes": [ + }, { - "description": "Defines the colour of the component.\n\n**Note:** The value should be a valid CSS color.", + "kind": "field", "name": "value", - "default": "\"\"", - "fieldName": "value", "type": { "text": "string" - } - }, + }, + "default": "\"\"", + "description": "Defines the colour of the component.\n\n**Note:** The value should be a valid CSS color.", + "privacy": "public" + } + ], + "attributes": [ { "description": "Defines if the component is selected.\n\n**Note:** Only one item must be selected per <code>ui5-color-palette</code>.\nIf more than one item is defined as selected, the last one would be considered as the selected one.", "name": "selected", @@ -4222,6 +4169,15 @@ "type": { "text": "boolean" } + }, + { + "description": "Defines the colour of the component.\n\n**Note:** The value should be a valid CSS color.", + "name": "value", + "default": "\"\"", + "fieldName": "value", + "type": { + "text": "string" + } } ], "superclass": { @@ -4290,33 +4246,25 @@ "members": [ { "kind": "field", - "name": "showRecentColors", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines whether the user can see the last used colors in the bottom of the component", - "privacy": "public" - }, - { - "kind": "field", - "name": "showMoreColors", + "name": "accessibleName", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Defines whether the user can choose a custom color from a component.", - "privacy": "public" + "description": "Defines the accessible name of the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.20.0" }, { "kind": "field", - "name": "showDefaultColor", + "name": "accessibleNameRef", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Defines whether the user can choose the default color from a button.", - "privacy": "public" + "description": "Receives id(or many ids) of the elements that label the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.20.0" }, { "kind": "field", @@ -4367,9 +4315,51 @@ "description": "Determines on which side the component is placed at.", "privacy": "public", "_ui5since": "2.19.0" + }, + { + "kind": "field", + "name": "showDefaultColor", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the user can choose the default color from a button.", + "privacy": "public" + }, + { + "kind": "field", + "name": "showMoreColors", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the user can choose a custom color from a component.", + "privacy": "public" + }, + { + "kind": "field", + "name": "showRecentColors", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the user can see the last used colors in the bottom of the component", + "privacy": "public" } ], "events": [ + { + "name": "close", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the `ui5-color-palette-popover` is closed due to user interaction.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5since": "1.21.0" + }, { "name": "item-click", "_ui5privacy": "public", @@ -4397,46 +4387,25 @@ "description": "the selected color" } ] - }, - { - "name": "close", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired when the `ui5-color-palette-popover` is closed due to user interaction.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5since": "1.21.0" } ], "attributes": [ { - "description": "Defines whether the user can see the last used colors in the bottom of the component", - "name": "show-recent-colors", - "default": "false", - "fieldName": "showRecentColors", - "type": { - "text": "boolean" - } - }, - { - "description": "Defines whether the user can choose a custom color from a component.", - "name": "show-more-colors", - "default": "false", - "fieldName": "showMoreColors", + "description": "Defines the accessible name of the component.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", "type": { - "text": "boolean" + "text": "string | undefined" } }, { - "description": "Defines whether the user can choose the default color from a button.", - "name": "show-default-color", - "default": "false", - "fieldName": "showDefaultColor", + "description": "Receives id(or many ids) of the elements that label the component.", + "name": "accessible-name-ref", + "default": "undefined", + "fieldName": "accessibleNameRef", "type": { - "text": "boolean" + "text": "string | undefined" } }, { @@ -4474,6 +4443,33 @@ "type": { "text": "\"Top\" | \"Bottom\" | \"Start\" | \"End\"" } + }, + { + "description": "Defines whether the user can choose the default color from a button.", + "name": "show-default-color", + "default": "false", + "fieldName": "showDefaultColor", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines whether the user can choose a custom color from a component.", + "name": "show-more-colors", + "default": "false", + "fieldName": "showMoreColors", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines whether the user can see the last used colors in the bottom of the component", + "name": "show-recent-colors", + "default": "false", + "fieldName": "showRecentColors", + "type": { + "text": "boolean" + } } ], "superclass": { @@ -4517,13 +4513,25 @@ "members": [ { "kind": "field", - "name": "value", + "name": "accessibleName", "type": { - "text": "string" + "text": "string | undefined" }, - "default": "\"rgba(255,255,255,1)\"", - "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.", - "privacy": "public" + "description": "Defines the accessible name of the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.20.0" + }, + { + "kind": "field", + "name": "accessibleNameRef", + "type": { + "text": "string | undefined" + }, + "description": "Receives id(or many ids) of the elements that label the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.20.0" }, { "kind": "field", @@ -4546,6 +4554,16 @@ "description": "When set to `true`, the alpha slider and inputs for RGB values will not be displayed.", "privacy": "public", "_ui5since": "2.5.0" + }, + { + "kind": "field", + "name": "value", + "type": { + "text": "string" + }, + "default": "\"rgba(255,255,255,1)\"", + "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.", + "privacy": "public" } ], "events": [ @@ -4563,12 +4581,21 @@ ], "attributes": [ { - "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.", - "name": "value", - "default": "\"rgba(255,255,255,1)\"", - "fieldName": "value", + "description": "Defines the accessible name of the component.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", "type": { - "text": "string" + "text": "string | undefined" + } + }, + { + "description": "Receives id(or many ids) of the elements that label the component.", + "name": "accessible-name-ref", + "default": "undefined", + "fieldName": "accessibleNameRef", + "type": { + "text": "string | undefined" } }, { @@ -4588,6 +4615,15 @@ "type": { "text": "boolean" } + }, + { + "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.", + "name": "value", + "default": "\"rgba(255,255,255,1)\"", + "fieldName": "value", + "type": { + "text": "string" + } } ], "superclass": { @@ -4624,15 +4660,9 @@ "kind": "javascript-module", "path": "dist/ComboBox.js", "declarations": [ - { - "kind": "interface", - "name": "IComboBoxItem", - "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- 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- [Escape] - 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- [Page Down] - Moves selection down by page size (10 items by default).\n- [Page Up] - 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- [Ctrl]+[Alt]+[F8] or [Command]+[Option]+[F8] - Focuses the first link in the value state message, if available. Pressing [Tab] moves the focus to the next link in the value state message, or closes the value state message if there are no more links.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/ComboBox.js\";`", + "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### Working with Values\n\nThe ComboBox offers two ways to work with item selection:\n\n**1. Display Text Only (using `value`):**\n```html\n<ui5-combobox value=\"Germany\">\n <ui5-cb-item text=\"Germany\"></ui5-cb-item>\n <ui5-cb-item text=\"France\"></ui5-cb-item>\n</ui5-combobox>\n```\nUse this approach when the displayed text is sufficient for your needs.\n\n**2. Unique Identifiers - Recommended (using `selectedValue` and item `value`):**\n```html\n<ui5-combobox value=\"Germany\" selected-value=\"DE\">\n <ui5-cb-item text=\"Germany\" value=\"DE\"></ui5-cb-item>\n <ui5-cb-item text=\"France\" value=\"FR\"></ui5-cb-item>\n</ui5-combobox>\n```\nThis is the recommended approach when you need to work with unique identifiers (IDs, codes) separate from display text.\nThe `selectedValue` property references the `value` property of the selected item.\nIn forms, the item's `value` (e.g., \"DE\") will be submitted instead of the display text.\n\n**Important:** Do not mix the `selectedValue` approach with the deprecated `selected` property on items.\n\n### Keyboard Handling\n\nThe `ui5-combobox` provides advanced keyboard handling.\n\n- [F4], [Alt]+[Up], or [Alt]+[Down] - Toggles the picker.\n- [Escape] - 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- [Page Down] - Moves selection down by page size (10 items by default).\n- [Page Up] - 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- [Ctrl]+[Alt]+[F8] or [Command]+[Option]+[F8] - Focuses the first link in the value state message, if available. Pressing [Tab] moves the focus to the next link in the value state message, or closes the value state message if there are no more links.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/ComboBox.js\";`", "name": "ComboBox", "slots": [ { @@ -4651,15 +4681,6 @@ }, "_ui5privacy": "public" }, - { - "name": "valueStateMessage", - "description": "Defines the value state message that will be displayed as pop up under the component.\nThe value state message slot should contain only one root element.\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`, `Critical` or `Negative` value state.", - "_ui5since": "1.0.0-rc.9", - "_ui5type": { - "text": "Array<HTMLElement>" - }, - "_ui5privacy": "public" - }, { "name": "icon", "description": "Defines the icon to be displayed in the input field.", @@ -4675,52 +4696,39 @@ ] }, "_ui5privacy": "public" + }, + { + "name": "valueStateMessage", + "description": "Defines the value state message that will be displayed as pop up under the component.\nThe value state message slot should contain only one root element.\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`, `Critical` or `Negative` value state.", + "_ui5since": "1.0.0-rc.9", + "_ui5type": { + "text": "Array<HTMLElement>" + }, + "_ui5privacy": "public" } ], "members": [ { "kind": "field", - "name": "value", - "type": { - "text": "string" - }, - "default": "\"\"", - "description": "Defines the value of the component.", - "privacy": "public", - "_ui5formProperty": true, - "_ui5formEvents": "change,input" - }, - { - "kind": "field", - "name": "name", + "name": "accessibleName", "type": { "text": "string | undefined" }, - "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", + "description": "Defines the accessible ARIA name of the component.", "default": "undefined", "privacy": "public", - "_ui5since": "2.0.0" - }, - { - "kind": "field", - "name": "noTypeahead", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines whether the value will be autocompleted to match an item", - "privacy": "public", - "_ui5since": "1.19.0" + "_ui5since": "1.0.0-rc.15" }, { "kind": "field", - "name": "placeholder", + "name": "accessibleNameRef", "type": { "text": "string | undefined" }, - "description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.", + "description": "Receives id(or many ids) of the elements that label the component", "default": "undefined", - "privacy": "public" + "privacy": "public", + "_ui5since": "1.0.0-rc.15" }, { "kind": "field", @@ -4734,111 +4742,144 @@ }, { "kind": "field", - "name": "valueState", + "name": "filter", "type": { - "text": "ValueState", + "text": "ComboBoxFilter", "references": [ { - "name": "ValueState", - "package": "@ui5/webcomponents-base", - "module": "dist/types/ValueState.js" + "name": "ComboBoxFilter", + "package": "@ui5/webcomponents", + "module": "dist/types/ComboBoxFilter.js" } ] }, - "default": "\"None\"", - "description": "Defines the value state of the component.", + "default": "\"StartsWithPerTerm\"", + "description": "Defines the filter type of the component.", "privacy": "public" }, { "kind": "field", - "name": "readonly", + "name": "loading", "type": { "text": "boolean" }, "default": "false", - "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.", + "description": "Indicates whether a loading indicator should be shown in the picker.", "privacy": "public" }, { "kind": "field", - "name": "required", + "name": "name", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Defines whether the component is required.", - "privacy": "public" + "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.0.0" }, { "kind": "field", - "name": "loading", + "name": "noTypeahead", "type": { "text": "boolean" }, "default": "false", - "description": "Indicates whether a loading indicator should be shown in the picker.", - "privacy": "public" - }, - { - "kind": "field", - "name": "filter", - "type": { - "text": "ComboBoxFilter", - "references": [ - { - "name": "ComboBoxFilter", - "package": "@ui5/webcomponents", - "module": "dist/types/ComboBoxFilter.js" - } - ] - }, - "default": "\"StartsWithPerTerm\"", - "description": "Defines the filter type of the component.", - "privacy": "public" + "description": "Defines whether the value will be autocompleted to match an item", + "privacy": "public", + "_ui5since": "1.19.0" }, { "kind": "field", - "name": "showClearIcon", + "name": "open", "type": { "text": "boolean" }, "default": "false", - "description": "Defines whether the clear icon of the combobox will be shown.", + "description": "Indicates whether the items picker is open.", "privacy": "public", - "_ui5since": "1.20.1" + "_ui5since": "2.9.0" }, { "kind": "field", - "name": "accessibleName", + "name": "placeholder", "type": { "text": "string | undefined" }, - "description": "Defines the accessible ARIA name of the component.", + "description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.", "default": "undefined", - "privacy": "public", - "_ui5since": "1.0.0-rc.15" + "privacy": "public" }, { "kind": "field", - "name": "accessibleNameRef", + "name": "readonly", + "type": { + "text": "boolean" + }, + "default": "false", + "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.", + "privacy": "public" + }, + { + "kind": "field", + "name": "required", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the component is required.", + "privacy": "public" + }, + { + "kind": "field", + "name": "selectedValue", "type": { "text": "string | undefined" }, - "description": "Receives id(or many ids) of the elements that label the component", + "description": "Defines the value of the selected item (references the `value` property of `ui5-cb-item`).\n\nUse this property to work with unique identifiers (IDs, codes) instead of display text.\nWhen set, the ComboBox finds and selects the item whose `value` property matches this property.\n\n**Benefits:**\n- Select items programmatically by their unique identifier\n- Handle items with identical display text but different underlying values\n- Submit machine-readable values in forms (the item's `value` is submitted instead of the display text)\n\n**When to use `selectedValue` vs `value`:**\n- **Recommended:** Use `selectedValue` + item `value` when you need unique identifiers separate from display text (e.g., country codes \"DE\", \"FR\" with display names \"Germany\", \"France\")\n- Use only the ComboBox `value` property when the display text itself is sufficient for your use case", "default": "undefined", "privacy": "public", - "_ui5since": "1.0.0-rc.15" + "_ui5since": "2.20.0" }, { "kind": "field", - "name": "open", + "name": "showClearIcon", "type": { "text": "boolean" }, "default": "false", - "description": "Indicates whether the items picker is open.", + "description": "Defines whether the clear icon of the combobox will be shown.", "privacy": "public", - "_ui5since": "2.9.0" + "_ui5since": "1.20.1" + }, + { + "kind": "field", + "name": "value", + "type": { + "text": "string" + }, + "default": "\"\"", + "description": "Defines the value of the component.", + "privacy": "public", + "_ui5formProperty": true, + "_ui5formEvents": "change,input" + }, + { + "kind": "field", + "name": "valueState", + "type": { + "text": "ValueState", + "references": [ + { + "name": "ValueState", + "package": "@ui5/webcomponents-base", + "module": "dist/types/ValueState.js" + } + ] + }, + "default": "\"None\"", + "description": "Defines the value state of the component.", + "privacy": "public" } ], "events": [ @@ -4854,39 +4895,39 @@ "_ui5Bubbles": true }, { - "name": "open", + "name": "close", "_ui5privacy": "public", "type": { "text": "CustomEvent" }, - "description": "Fired when the dropdown is opened.", + "description": "Fired when the dropdown is closed.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, + "_ui5Bubbles": false, "_ui5since": "2.9.0" }, { - "name": "close", + "name": "input", "_ui5privacy": "public", "type": { "text": "CustomEvent" }, - "description": "Fired when the dropdown is closed.", + "description": "Fired when typing in input or clear icon is pressed.\n\n**Note:** filterValue property is updated, input is changed.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, - "_ui5Bubbles": false, - "_ui5since": "2.9.0" + "_ui5Bubbles": true }, { - "name": "input", + "name": "open", "_ui5privacy": "public", "type": { "text": "CustomEvent" }, - "description": "Fired when typing in input or clear icon is pressed.\n\n**Note:** filterValue property is updated, input is changed.", + "description": "Fired when the dropdown is opened.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, - "_ui5Bubbles": true + "_ui5Bubbles": true, + "_ui5since": "2.9.0" }, { "name": "selection-change", @@ -4926,57 +4967,84 @@ ], "attributes": [ { - "description": "Defines the value of the component.", - "name": "value", - "default": "\"\"", - "fieldName": "value", + "description": "Defines the accessible ARIA name of the component.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", "type": { - "text": "string" + "text": "string | undefined" } }, { - "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", - "name": "name", + "description": "Receives id(or many ids) of the elements that label the component", + "name": "accessible-name-ref", "default": "undefined", - "fieldName": "name", + "fieldName": "accessibleNameRef", "type": { "text": "string | undefined" } }, { - "description": "Defines whether the value will be autocompleted to match an item", - "name": "no-typeahead", + "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is completely noninteractive.", + "name": "disabled", "default": "false", - "fieldName": "noTypeahead", + "fieldName": "disabled", "type": { "text": "boolean" } }, { - "description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.", - "name": "placeholder", + "description": "Defines the filter type of the component.", + "name": "filter", + "default": "\"StartsWithPerTerm\"", + "fieldName": "filter", + "type": { + "text": "\"None\" | \"StartsWithPerTerm\" | \"StartsWith\" | \"Contains\"" + } + }, + { + "description": "Indicates whether a loading indicator should be shown in the picker.", + "name": "loading", + "default": "false", + "fieldName": "loading", + "type": { + "text": "boolean" + } + }, + { + "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", + "name": "name", "default": "undefined", - "fieldName": "placeholder", + "fieldName": "name", "type": { "text": "string | undefined" } }, { - "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is completely noninteractive.", - "name": "disabled", + "description": "Defines whether the value will be autocompleted to match an item", + "name": "no-typeahead", "default": "false", - "fieldName": "disabled", + "fieldName": "noTypeahead", "type": { "text": "boolean" } }, { - "description": "Defines the value state of the component.", - "name": "value-state", - "default": "\"None\"", - "fieldName": "valueState", + "description": "Indicates whether the items picker is open.", + "name": "open", + "default": "false", + "fieldName": "open", "type": { - "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" + "text": "boolean" + } + }, + { + "description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.", + "name": "placeholder", + "default": "undefined", + "fieldName": "placeholder", + "type": { + "text": "string | undefined" } }, { @@ -4998,21 +5066,12 @@ } }, { - "description": "Indicates whether a loading indicator should be shown in the picker.", - "name": "loading", - "default": "false", - "fieldName": "loading", - "type": { - "text": "boolean" - } - }, - { - "description": "Defines the filter type of the component.", - "name": "filter", - "default": "\"StartsWithPerTerm\"", - "fieldName": "filter", + "description": "Defines the value of the selected item (references the `value` property of `ui5-cb-item`).\n\nUse this property to work with unique identifiers (IDs, codes) instead of display text.\nWhen set, the ComboBox finds and selects the item whose `value` property matches this property.\n\n**Benefits:**\n- Select items programmatically by their unique identifier\n- Handle items with identical display text but different underlying values\n- Submit machine-readable values in forms (the item's `value` is submitted instead of the display text)\n\n**When to use `selectedValue` vs `value`:**\n- **Recommended:** Use `selectedValue` + item `value` when you need unique identifiers separate from display text (e.g., country codes \"DE\", \"FR\" with display names \"Germany\", \"France\")\n- Use only the ComboBox `value` property when the display text itself is sufficient for your use case", + "name": "selected-value", + "default": "undefined", + "fieldName": "selectedValue", "type": { - "text": "\"None\" | \"StartsWithPerTerm\" | \"StartsWith\" | \"Contains\"" + "text": "string | undefined" } }, { @@ -5025,30 +5084,21 @@ } }, { - "description": "Defines the accessible ARIA name of the component.", - "name": "accessible-name", - "default": "undefined", - "fieldName": "accessibleName", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Receives id(or many ids) of the elements that label the component", - "name": "accessible-name-ref", - "default": "undefined", - "fieldName": "accessibleNameRef", + "description": "Defines the value of the component.", + "name": "value", + "default": "\"\"", + "fieldName": "value", "type": { - "text": "string | undefined" + "text": "string" } }, { - "description": "Indicates whether the items picker is open.", - "name": "open", - "default": "false", - "fieldName": "open", + "description": "Defines the value state of the component.", + "name": "value-state", + "default": "\"None\"", + "fieldName": "valueState", "type": { - "text": "boolean" + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" } } ], @@ -5061,6 +5111,12 @@ "customElement": true, "_ui5since": "1.0.0-rc.6", "_ui5privacy": "public" + }, + { + "kind": "interface", + "name": "IComboBoxItem", + "description": "Interface for components that may be slotted inside a `ui5-combobox`", + "_ui5privacy": "public" } ], "exports": [ @@ -5091,6 +5147,17 @@ "description": "The `ui5-cb-item` represents the item for a `ui5-combobox`.", "name": "ComboBoxItem", "members": [ + { + "kind": "field", + "name": "additionalText", + "type": { + "text": "string | undefined" + }, + "description": "Defines the additional text of the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.0.0-rc.11" + }, { "kind": "field", "name": "text", @@ -5103,17 +5170,26 @@ }, { "kind": "field", - "name": "additionalText", + "name": "value", "type": { "text": "string | undefined" }, - "description": "Defines the additional text of the component.", + "description": "Defines the value of the `ui5-cb-item`.\n\nUse this property to associate a unique identifier or machine-readable value with the item,\nseparate from the display text. This enables:\n- Selecting items programmatically via `selectedValue` on the ComboBox\n- Submitting machine-readable values in forms\n- Distinguishing between items with identical display text\n\n**When to use:**\n- **Recommended:** Use the `value` property on items together with `selectedValue` on the ComboBox when you need unique identifiers\n- Omit `value` if the display text (`text` property) is sufficient for your use case\n\n**Example:**\n```html\n<ui5-combobox selected-value=\"DE\">\n <ui5-cb-item text=\"Germany\" value=\"DE\"></ui5-cb-item>\n <ui5-cb-item text=\"France\" value=\"FR\"></ui5-cb-item>\n</ui5-combobox>\n```", "default": "undefined", "privacy": "public", - "_ui5since": "1.0.0-rc.11" + "_ui5since": "2.20.0" } ], "attributes": [ + { + "description": "Defines the additional text of the component.", + "name": "additional-text", + "default": "undefined", + "fieldName": "additionalText", + "type": { + "text": "string | undefined" + } + }, { "description": "Defines the text of the component.", "name": "text", @@ -5124,10 +5200,10 @@ } }, { - "description": "Defines the additional text of the component.", - "name": "additional-text", + "description": "Defines the value of the `ui5-cb-item`.\n\nUse this property to associate a unique identifier or machine-readable value with the item,\nseparate from the display text. This enables:\n- Selecting items programmatically via `selectedValue` on the ComboBox\n- Submitting machine-readable values in forms\n- Distinguishing between items with identical display text\n\n**When to use:**\n- **Recommended:** Use the `value` property on items together with `selectedValue` on the ComboBox when you need unique identifiers\n- Omit `value` if the display text (`text` property) is sufficient for your use case\n\n**Example:**\n```html\n<ui5-combobox selected-value=\"DE\">\n <ui5-cb-item text=\"Germany\" value=\"DE\"></ui5-cb-item>\n <ui5-cb-item text=\"France\" value=\"FR\"></ui5-cb-item>\n</ui5-combobox>\n```", + "name": "value", "default": "undefined", - "fieldName": "additionalText", + "fieldName": "value", "type": { "text": "string | undefined" } @@ -5192,11 +5268,7 @@ } ] }, - "_ui5privacy": "public", - "inheritedFrom": { - "name": "ListItemGroup", - "module": "dist/ListItemGroup.js" - } + "_ui5privacy": "public" }, { "name": "header", @@ -5211,41 +5283,29 @@ } ] }, - "_ui5privacy": "public", - "inheritedFrom": { - "name": "ListItemGroup", - "module": "dist/ListItemGroup.js" - } + "_ui5privacy": "public" } ], "members": [ { "kind": "field", - "name": "headerText", + "name": "headerAccessibleName", "type": { "text": "string | undefined" }, - "description": "Defines the header text of the <code>ui5-li-group</code>.", + "description": "Defines the accessible name of the header.", "privacy": "public", - "default": "undefined", - "inheritedFrom": { - "name": "ListItemGroup", - "module": "dist/ListItemGroup.js" - } + "default": "undefined" }, { "kind": "field", - "name": "headerAccessibleName", + "name": "headerText", "type": { "text": "string | undefined" }, - "description": "Defines the accessible name of the header.", + "description": "Defines the header text of the <code>ui5-li-group</code>.", "privacy": "public", - "default": "undefined", - "inheritedFrom": { - "name": "ListItemGroup", - "module": "dist/ListItemGroup.js" - } + "default": "undefined" }, { "kind": "field", @@ -5263,11 +5323,7 @@ "default": "\"None\"", "description": "Defines if the text of the component should wrap when it's too long.\nWhen set to \"Normal\", the content (title, description) will be wrapped\nusing the `ui5-expandable-text` component.<br/>\n\nThe text can wrap up to 100 characters on small screens (size S) and\nup to 300 characters on larger screens (size M and above). When text exceeds\nthese limits, it truncates with an ellipsis followed by a text expansion trigger.\n\nAvailable options are:\n- `None` (default) - The text will truncate with an ellipsis.\n- `Normal` - The text will wrap (without truncation).", "privacy": "public", - "_ui5since": "2.15.0", - "inheritedFrom": { - "name": "ListItemGroup", - "module": "dist/ListItemGroup.js" - } + "_ui5since": "2.15.0" } ], "superclass": { @@ -5290,38 +5346,30 @@ "cssParts": [ { "description": "Used to style the header item of the group", - "name": "header", - "inheritedFrom": { - "name": "ListItemGroup", - "module": "dist/ListItemGroup.js" - } + "name": "header" + }, + { + "description": "Used to style the title of the group header", + "name": "title" } ], "attributes": [ { - "description": "Defines the header text of the <code>ui5-li-group</code>.", - "name": "header-text", + "description": "Defines the accessible name of the header.", + "name": "header-accessible-name", "default": "undefined", - "fieldName": "headerText", + "fieldName": "headerAccessibleName", "type": { "text": "string | undefined" - }, - "inheritedFrom": { - "name": "ListItemGroup", - "module": "dist/ListItemGroup.js" } }, { - "description": "Defines the accessible name of the header.", - "name": "header-accessible-name", + "description": "Defines the header text of the <code>ui5-li-group</code>.", + "name": "header-text", "default": "undefined", - "fieldName": "headerAccessibleName", + "fieldName": "headerText", "type": { "text": "string | undefined" - }, - "inheritedFrom": { - "name": "ListItemGroup", - "module": "dist/ListItemGroup.js" } }, { @@ -5331,16 +5379,12 @@ "fieldName": "wrappingType", "type": { "text": "\"None\" | \"Normal\"" - }, - "inheritedFrom": { - "name": "ListItemGroup", - "module": "dist/ListItemGroup.js" } } ], "events": [ { - "name": "move-over", + "name": "move", "_ui5privacy": "public", "type": { "text": "CustomEvent<ListItemGroupMoveEventDetail>", @@ -5352,9 +5396,9 @@ } ] }, - "description": "Fired when a movable list item is moved over a potential drop target during a dragging operation.\n\nIf the new position is valid, prevent the default action of the event using `preventDefault()`.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, + "description": "Fired when a movable list item is dropped onto a drop target.\n\n**Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, "_ui5Bubbles": true, "_ui5since": "2.1.0", "_ui5parameters": [ @@ -5362,26 +5406,22 @@ "type": { "text": "object" }, - "name": "source", + "name": "destination", "_ui5privacy": "public", - "description": "Contains information about the moved element under `element` property." + "description": "Contains information about the destination of the moved element. Has `element` and `placement` properties." }, { "type": { "text": "object" }, - "name": "destination", + "name": "source", "_ui5privacy": "public", - "description": "Contains information about the destination of the moved element. Has `element` and `placement` properties." + "description": "Contains information about the moved element under `element` property." } - ], - "inheritedFrom": { - "name": "ListItemGroup", - "module": "dist/ListItemGroup.js" - } + ] }, { - "name": "move", + "name": "move-over", "_ui5privacy": "public", "type": { "text": "CustomEvent<ListItemGroupMoveEventDetail>", @@ -5393,9 +5433,9 @@ } ] }, - "description": "Fired when a movable list item is dropped onto a drop target.\n\n**Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, + "description": "Fired when a movable list item is moved over a potential drop target during a dragging operation.\n\nIf the new position is valid, prevent the default action of the event using `preventDefault()`.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, "_ui5Bubbles": true, "_ui5since": "2.1.0", "_ui5parameters": [ @@ -5403,23 +5443,19 @@ "type": { "text": "object" }, - "name": "source", + "name": "destination", "_ui5privacy": "public", - "description": "Contains information about the moved element under `element` property." + "description": "Contains information about the destination of the moved element. Has `element` and `placement` properties." }, { "type": { "text": "object" }, - "name": "destination", + "name": "source", "_ui5privacy": "public", - "description": "Contains information about the destination of the moved element. Has `element` and `placement` properties." + "description": "Contains information about the moved element under `element` property." } - ], - "inheritedFrom": { - "name": "ListItemGroup", - "module": "dist/ListItemGroup.js" - } + ] } ] } @@ -5460,38 +5496,32 @@ "members": [ { "kind": "field", - "name": "primaryCalendarType", + "name": "calendarWeekNumbering", "type": { - "text": "CalendarType | undefined", + "text": "CalendarWeekNumbering", "references": [ { - "name": "CalendarType", - "package": "@ui5/webcomponents-base", - "module": "dist/types/CalendarType.js" + "name": "CalendarWeekNumbering", + "package": "@ui5/webcomponents", + "module": "dist/types/CalendarWeekNumbering.js" } ] }, - "description": "Sets a calendar type used for display.\nIf not set, the calendar type of the global configuration is used.", - "default": "undefined", - "privacy": "public" + "default": "\"Default\"", + "description": "Defines how to calculate calendar weeks and first day of the week.\nIf not set, the calendar will be displayed according to the currently set global configuration.", + "privacy": "public", + "_ui5since": "2.2.0" }, { "kind": "field", - "name": "secondaryCalendarType", + "name": "displayFormat", "type": { - "text": "CalendarType | undefined", - "references": [ - { - "name": "CalendarType", - "package": "@ui5/webcomponents-base", - "module": "dist/types/CalendarType.js" - } - ] + "text": "string | undefined" }, - "description": "Defines the secondary calendar type.\nIf not set, the calendar will only show the primary calendar type.", + "description": "Determines the format, displayed in the input field.", "default": "undefined", "privacy": "public", - "_ui5since": "1.0.0-rc.16" + "_ui5since": "2.14.0" }, { "kind": "field", @@ -5506,25 +5536,14 @@ }, { "kind": "field", - "name": "displayFormat", - "type": { - "text": "string | undefined" - }, - "description": "Determines the format, displayed in the input field.", - "default": "undefined", - "privacy": "public", - "_ui5since": "2.14.0" - }, - { - "kind": "field", - "name": "valueFormat", + "name": "maxDate", "type": { - "text": "string | undefined" + "text": "string" }, - "description": "Determines the format, used for the value attribute.", - "default": "undefined", + "default": "\"\"", + "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).", "privacy": "public", - "_ui5since": "2.14.0" + "_ui5since": "1.0.0-rc.6" }, { "kind": "field", @@ -5539,51 +5558,68 @@ }, { "kind": "field", - "name": "maxDate", + "name": "primaryCalendarType", "type": { - "text": "string" + "text": "CalendarType | undefined", + "references": [ + { + "name": "CalendarType", + "package": "@ui5/webcomponents-base", + "module": "dist/types/CalendarType.js" + } + ] }, - "default": "\"\"", - "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).", - "privacy": "public", - "_ui5since": "1.0.0-rc.6" + "description": "Sets a calendar type used for display.\nIf not set, the calendar type of the global configuration is used.", + "default": "undefined", + "privacy": "public" }, { "kind": "field", - "name": "calendarWeekNumbering", + "name": "secondaryCalendarType", "type": { - "text": "CalendarWeekNumbering", + "text": "CalendarType | undefined", "references": [ { - "name": "CalendarWeekNumbering", - "package": "@ui5/webcomponents", - "module": "dist/types/CalendarWeekNumbering.js" + "name": "CalendarType", + "package": "@ui5/webcomponents-base", + "module": "dist/types/CalendarType.js" } ] }, - "default": "\"Default\"", - "description": "Defines how to calculate calendar weeks and first day of the week.\nIf not set, the calendar will be displayed according to the currently set global configuration.", + "description": "Defines the secondary calendar type.\nIf not set, the calendar will only show the primary calendar type.", + "default": "undefined", "privacy": "public", - "_ui5since": "2.2.0" + "_ui5since": "1.0.0-rc.16" + }, + { + "kind": "field", + "name": "valueFormat", + "type": { + "text": "string | undefined" + }, + "description": "Determines the format, used for the value attribute.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.14.0" } ], "attributes": [ { - "description": "Sets a calendar type used for display.\nIf not set, the calendar type of the global configuration is used.", - "name": "primary-calendar-type", - "default": "undefined", - "fieldName": "primaryCalendarType", + "description": "Defines how to calculate calendar weeks and first day of the week.\nIf not set, the calendar will be displayed according to the currently set global configuration.", + "name": "calendar-week-numbering", + "default": "\"Default\"", + "fieldName": "calendarWeekNumbering", "type": { - "text": "\"Gregorian\" | \"Islamic\" | \"Japanese\" | \"Buddhist\" | \"Persian\" | undefined" + "text": "\"Default\" | \"ISO_8601\" | \"MiddleEastern\" | \"WesternTraditional\"" } }, { - "description": "Defines the secondary calendar type.\nIf not set, the calendar will only show the primary calendar type.", - "name": "secondary-calendar-type", + "description": "Determines the format, displayed in the input field.", + "name": "display-format", "default": "undefined", - "fieldName": "secondaryCalendarType", + "fieldName": "displayFormat", "type": { - "text": "\"Gregorian\" | \"Islamic\" | \"Japanese\" | \"Buddhist\" | \"Persian\" | undefined" + "text": "string | undefined" } }, { @@ -5597,21 +5633,12 @@ "deprecated": "Use displayFormat and valueFormat instead" }, { - "description": "Determines the format, displayed in the input field.", - "name": "display-format", - "default": "undefined", - "fieldName": "displayFormat", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Determines the format, used for the value attribute.", - "name": "value-format", - "default": "undefined", - "fieldName": "valueFormat", + "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).", + "name": "max-date", + "default": "\"\"", + "fieldName": "maxDate", "type": { - "text": "string | undefined" + "text": "string" } }, { @@ -5624,21 +5651,30 @@ } }, { - "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).", - "name": "max-date", - "default": "\"\"", - "fieldName": "maxDate", + "description": "Sets a calendar type used for display.\nIf not set, the calendar type of the global configuration is used.", + "name": "primary-calendar-type", + "default": "undefined", + "fieldName": "primaryCalendarType", "type": { - "text": "string" + "text": "\"Gregorian\" | \"Islamic\" | \"Japanese\" | \"Buddhist\" | \"Persian\" | undefined" } }, { - "description": "Defines how to calculate calendar weeks and first day of the week.\nIf not set, the calendar will be displayed according to the currently set global configuration.", - "name": "calendar-week-numbering", - "default": "\"Default\"", - "fieldName": "calendarWeekNumbering", + "description": "Defines the secondary calendar type.\nIf not set, the calendar will only show the primary calendar type.", + "name": "secondary-calendar-type", + "default": "undefined", + "fieldName": "secondaryCalendarType", "type": { - "text": "\"Default\" | \"ISO_8601\" | \"MiddleEastern\" | \"WesternTraditional\"" + "text": "\"Gregorian\" | \"Islamic\" | \"Japanese\" | \"Buddhist\" | \"Persian\" | undefined" + } + }, + { + "description": "Determines the format, used for the value attribute.", + "name": "value-format", + "default": "undefined", + "fieldName": "valueFormat", + "type": { + "text": "string | undefined" } } ], @@ -5669,7 +5705,7 @@ "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\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](https://unicode.org/reports/tr35/tr35-dates.html#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] or [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- [Page Down] - Decrements the corresponding day of the month by one\n- [Shift] + [Page Down] - Decrements the corresponding month by one\n- [Shift] + [Ctrl] + [Page Down] - Decrements the corresponding year by one\n- [Page Up] - Increments the corresponding day of the month by one\n- [Shift] + [Page Up] - Increments the corresponding month by one\n- [Shift] + [Ctrl] + [Page Up] - 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<script data-id=\"sap-ui-config\" type=\"application/json\">\n\t{\n\t\t\"calendarType\": \"Japanese\"\n\t}\n<script>\n```\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/DatePicker.js\";`", + "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](https://unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table).\n\nFor example, if the valueFormat is \"yyyy-MM-dd\", the displayFormat is \"MMM d, y\", and the used locale is English, a valid value string is \"2015-07-30\", which leads to an output of \"Jul 30, 2015\".\nIf no placeholder is set to the DatePicker, the used displayFormat is displayed as a placeholder. If another placeholder is needed, it must be set.\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] or [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- [Page Down] - Decrements the corresponding day of the month by one\n- [Shift] + [Page Down] - Decrements the corresponding month by one\n- [Shift] + [Ctrl] + [Page Down] - Decrements the corresponding year by one\n- [Page Up] - Increments the corresponding day of the month by one\n- [Shift] + [Page Up] - Increments the corresponding month by one\n- [Shift] + [Ctrl] + [Page Up] - 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<script data-id=\"sap-ui-config\" type=\"application/json\">\n\t{\n\t\t\"calendarType\": \"Japanese\"\n\t}\n<script>\n```\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/DatePicker.js\";`", "name": "DatePicker", "cssParts": [ { @@ -5691,153 +5727,157 @@ "members": [ { "kind": "field", - "name": "value", + "name": "accessibleDescription", "type": { - "text": "string" + "text": "string | undefined" }, - "default": "\"\"", - "description": "Defines a formatted date value.", + "description": "Defines the accessible description of the component.", + "default": "undefined", "privacy": "public", - "_ui5formProperty": true, - "_ui5formEvents": "change,input" + "_ui5since": "2.14.0" }, { "kind": "field", - "name": "valueState", + "name": "accessibleDescriptionRef", "type": { - "text": "ValueState", - "references": [ - { - "name": "ValueState", - "package": "@ui5/webcomponents-base", - "module": "dist/types/ValueState.js" - } - ] + "text": "string | undefined" }, - "default": "\"None\"", - "description": "Defines the value state of the component.", - "privacy": "public" + "description": "Receives id(or many ids) of the elements that describe the input.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.14.0" }, { "kind": "field", - "name": "required", + "name": "accessibleName", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Defines whether the component is required.", + "description": "Defines the aria-label attribute for the component.", + "default": "undefined", "privacy": "public", - "_ui5since": "1.0.0-rc.9" - }, - { - "kind": "field", - "name": "disabled", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Determines whether the component is displayed as disabled.", - "privacy": "public" + "_ui5since": "1.0.0-rc.15" }, { "kind": "field", - "name": "readonly", + "name": "accessibleNameRef", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Determines whether the component is displayed as read-only.", - "privacy": "public" + "description": "Receives id(or many ids) of the elements that label the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.0.0-rc.15" }, { "kind": "field", - "name": "placeholder", + "name": "calendarWeekNumbering", "type": { - "text": "string | undefined" + "text": "CalendarWeekNumbering", + "references": [ + { + "name": "CalendarWeekNumbering", + "package": "@ui5/webcomponents", + "module": "dist/types/CalendarWeekNumbering.js" + } + ] }, - "description": "Defines a short hint, intended to aid the user with data entry when the\ncomponent has no value.\n\n**Note:** When no placeholder is set, the format pattern is displayed as a placeholder.\nPassing an empty string as the value of this property will make the component appear empty - without placeholder or format pattern.", - "default": "undefined", - "privacy": "public" + "default": "\"Default\"", + "description": "Defines how to calculate calendar weeks and first day of the week.\nIf not set, the calendar will be displayed according to the currently set global configuration.", + "privacy": "public", + "_ui5since": "2.2.0" }, { "kind": "field", - "name": "name", + "name": "dateValue", "type": { - "text": "string | undefined" + "text": "Date | null" }, - "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", - "default": "undefined", - "privacy": "public" + "description": "Currently selected date represented as a Local JavaScript Date instance.\nNote: this getter can only be reliably used after the component is fully defined. Use dateValueAsync which resolves only when this condition is met.", + "privacy": "public", + "default": "null", + "deprecated": "Use dateValueAsync instead", + "readonly": true }, { "kind": "field", - "name": "hideWeekNumbers", + "name": "dateValueAsync", "type": { - "text": "boolean" + "text": "Promise<Date | null>" }, - "default": "false", - "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.", + "description": "Promise that resolves to the currently selected date represented as a Local JavaScript Date instance.", "privacy": "public", - "_ui5since": "1.0.0-rc.8" + "default": "Promise", + "readonly": true }, { "kind": "field", - "name": "open", + "name": "disabled", "type": { "text": "boolean" }, "default": "false", - "description": "Defines the open or closed state of the popover.", - "privacy": "public", - "_ui5since": "2.0.0" + "description": "Determines whether the component is displayed as disabled.", + "privacy": "public" }, { "kind": "field", - "name": "accessibleName", + "name": "displayFormat", "type": { "text": "string | undefined" }, - "description": "Defines the aria-label attribute for the component.", + "description": "Determines the format, displayed in the input field.", "default": "undefined", "privacy": "public", - "_ui5since": "1.0.0-rc.15" + "_ui5since": "2.14.0" }, { "kind": "field", - "name": "accessibleNameRef", + "name": "formatPattern", "type": { "text": "string | undefined" }, - "description": "Receives id(or many ids) of the elements that label the component.", + "description": "Determines the format, displayed in the input field.", "default": "undefined", - "privacy": "public", - "_ui5since": "1.0.0-rc.15" + "deprecated": "Use displayFormat and valueFormat instead", + "privacy": "public" }, { - "kind": "field", - "name": "accessibleDescription", - "type": { - "text": "string | undefined" + "kind": "method", + "name": "formatValue", + "return": { + "type": { + "text": "string" + }, + "description": "The date as string" }, - "description": "Defines the accessible description of the component.", - "default": "undefined", - "privacy": "public", - "_ui5since": "2.14.0" + "parameters": [ + { + "name": "date", + "type": { + "text": "Date" + }, + "description": "A Java Script date object to be formatted as string", + "_ui5privacy": "public" + } + ], + "description": "Formats a Java Script date object into a string representing a locale date\naccording to the `formatPattern` property of the DatePicker instance", + "privacy": "public" }, { "kind": "field", - "name": "accessibleDescriptionRef", + "name": "hideWeekNumbers", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Receives id(or many ids) of the elements that describe the input.", - "default": "undefined", + "default": "false", + "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.", "privacy": "public", - "_ui5since": "2.14.0" + "_ui5since": "1.0.0-rc.8" }, { "kind": "method", - "name": "isValid", + "name": "isInValidRange", "return": { "type": { "text": "boolean" @@ -5849,17 +5889,16 @@ "type": { "text": "string" }, - "description": "A value to be tested against the current date format", + "description": "A value to be checked", "_ui5privacy": "public" } ], - "description": "Checks if a value is valid against the current date format of the DatePicker.", - "privacy": "public", - "deprecated": "Use isValidValue or isValidDisplayValue instead" + "description": "Checks if a date is between the minimum and maximum date.", + "privacy": "public" }, { "kind": "method", - "name": "isValidValue", + "name": "isValid", "return": { "type": { "text": "boolean" @@ -5876,7 +5915,8 @@ } ], "description": "Checks if a value is valid against the current date format of the DatePicker.", - "privacy": "public" + "privacy": "public", + "deprecated": "Use isValidValue or isValidDisplayValue instead" }, { "kind": "method", @@ -5901,7 +5941,7 @@ }, { "kind": "method", - "name": "isInValidRange", + "name": "isValidValue", "return": { "type": { "text": "boolean" @@ -5913,57 +5953,65 @@ "type": { "text": "string" }, - "description": "A value to be checked", + "description": "A value to be tested against the current date format", "_ui5privacy": "public" } ], - "description": "Checks if a date is between the minimum and maximum date.", + "description": "Checks if a value is valid against the current date format of the DatePicker.", "privacy": "public" }, { - "kind": "method", - "name": "formatValue", - "return": { - "type": { - "text": "string" - }, - "description": "The date as string" + "kind": "field", + "name": "maxDate", + "type": { + "text": "string" }, - "parameters": [ - { - "name": "date", - "type": { - "text": "Date" - }, - "description": "A Java Script date object to be formatted as string", - "_ui5privacy": "public" - } - ], - "description": "Formats a Java Script date object into a string representing a locale date\naccording to the `formatPattern` property of the DatePicker instance", - "privacy": "public" + "default": "\"\"", + "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).", + "privacy": "public", + "_ui5since": "1.0.0-rc.6" }, { "kind": "field", - "name": "dateValue", + "name": "minDate", "type": { - "text": "Date | null" + "text": "string" }, - "description": "Currently selected date represented as a Local JavaScript Date instance.\nNote: this getter can only be reliably used after the component is fully defined. Use dateValueAsync which resolves only when this condition is met.", + "default": "\"\"", + "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).", "privacy": "public", - "default": "null", - "deprecated": "Use dateValueAsync instead", - "readonly": true + "_ui5since": "1.0.0-rc.6" }, { "kind": "field", - "name": "dateValueAsync", + "name": "name", "type": { - "text": "Promise<Date | null>" + "text": "string | undefined" }, - "description": "Promise that resolves to the currently selected date represented as a Local JavaScript Date instance.", + "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", + "default": "undefined", + "privacy": "public" + }, + { + "kind": "field", + "name": "open", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines the open or closed state of the popover.", "privacy": "public", - "default": "Promise", - "readonly": true + "_ui5since": "2.0.0" + }, + { + "kind": "field", + "name": "placeholder", + "type": { + "text": "string | undefined" + }, + "description": "Defines a short hint, intended to aid the user with data entry when the\ncomponent has no value.\n\n**Note:** When no placeholder is set, the format pattern is displayed as a placeholder.\nPassing an empty string as the value of this property will make the component appear empty - without placeholder or format pattern.", + "default": "undefined", + "privacy": "public" }, { "kind": "field", @@ -5980,11 +6028,28 @@ }, "description": "Sets a calendar type used for display.\nIf not set, the calendar type of the global configuration is used.", "default": "undefined", + "privacy": "public" + }, + { + "kind": "field", + "name": "readonly", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Determines whether the component is displayed as read-only.", + "privacy": "public" + }, + { + "kind": "field", + "name": "required", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the component is required.", "privacy": "public", - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" - } + "_ui5since": "1.0.0-rc.9" }, { "kind": "field", @@ -6002,41 +6067,30 @@ "description": "Defines the secondary calendar type.\nIf not set, the calendar will only show the primary calendar type.", "default": "undefined", "privacy": "public", - "_ui5since": "1.0.0-rc.16", - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" - } + "_ui5since": "1.0.0-rc.16" }, { "kind": "field", - "name": "formatPattern", + "name": "showClearIcon", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Determines the format, displayed in the input field.", - "default": "undefined", - "deprecated": "Use displayFormat and valueFormat instead", + "default": "false", + "description": "Defines whether the clear icon of the input will be shown.", "privacy": "public", - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" - } + "_ui5since": "2.20.0" }, { "kind": "field", - "name": "displayFormat", + "name": "value", "type": { - "text": "string | undefined" + "text": "string" }, - "description": "Determines the format, displayed in the input field.", - "default": "undefined", + "default": "\"\"", + "description": "Defines a formatted date value.", "privacy": "public", - "_ui5since": "2.14.0", - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" - } + "_ui5formProperty": true, + "_ui5formEvents": "change,input" }, { "kind": "field", @@ -6047,63 +6101,24 @@ "description": "Determines the format, used for the value attribute.", "default": "undefined", "privacy": "public", - "_ui5since": "2.14.0", - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" - } - }, - { - "kind": "field", - "name": "minDate", - "type": { - "text": "string" - }, - "default": "\"\"", - "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).", - "privacy": "public", - "_ui5since": "1.0.0-rc.6", - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" - } - }, - { - "kind": "field", - "name": "maxDate", - "type": { - "text": "string" - }, - "default": "\"\"", - "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).", - "privacy": "public", - "_ui5since": "1.0.0-rc.6", - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" - } + "_ui5since": "2.14.0" }, { "kind": "field", - "name": "calendarWeekNumbering", + "name": "valueState", "type": { - "text": "CalendarWeekNumbering", + "text": "ValueState", "references": [ { - "name": "CalendarWeekNumbering", - "package": "@ui5/webcomponents", - "module": "dist/types/CalendarWeekNumbering.js" + "name": "ValueState", + "package": "@ui5/webcomponents-base", + "module": "dist/types/ValueState.js" } ] }, - "default": "\"Default\"", - "description": "Defines how to calculate calendar weeks and first day of the week.\nIf not set, the calendar will be displayed according to the currently set global configuration.", - "privacy": "public", - "_ui5since": "2.2.0", - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" - } + "default": "\"None\"", + "description": "Defines the value state of the component.", + "privacy": "public" } ], "events": [ @@ -6127,22 +6142,34 @@ "_ui5parameters": [ { "type": { - "text": "string" + "text": "boolean" }, - "name": "value", + "name": "valid", "_ui5privacy": "public", - "description": "The submitted value." + "description": "Indicator if the value is in correct format pattern and in valid range." }, { "type": { - "text": "boolean" + "text": "string" }, - "name": "valid", + "name": "value", "_ui5privacy": "public", - "description": "Indicator if the value is in correct format pattern and in valid range." + "description": "The submitted value." } ] }, + { + "name": "close", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired after the component's picker is closed.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": false, + "_ui5since": "2.4.0" + }, { "name": "input", "_ui5privacy": "public", @@ -6163,22 +6190,34 @@ "_ui5parameters": [ { "type": { - "text": "string" + "text": "boolean" }, - "name": "value", + "name": "valid", "_ui5privacy": "public", - "description": "The submitted value." + "description": "Indicator if the value is in correct format pattern and in valid range." }, { "type": { - "text": "boolean" + "text": "string" }, - "name": "valid", + "name": "value", "_ui5privacy": "public", - "description": "Indicator if the value is in correct format pattern and in valid range." + "description": "The submitted value." } ] }, + { + "name": "open", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired after the component's picker is opened.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": false, + "_ui5since": "2.4.0" + }, { "name": "value-state-change", "_ui5privacy": "public", @@ -6199,129 +6238,42 @@ "_ui5parameters": [ { "type": { - "text": "string" + "text": "boolean" }, - "name": "valueState", + "name": "valid", "_ui5privacy": "public", - "description": "The new `valueState` that will be set." + "description": "Indicator if the value is in correct format pattern and in valid range." }, { "type": { - "text": "boolean" + "text": "string" }, - "name": "valid", + "name": "valueState", "_ui5privacy": "public", - "description": "Indicator if the value is in correct format pattern and in valid range." + "description": "The new `valueState` that will be set." } ] - }, - { - "name": "open", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired after the component's picker is opened.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": false, - "_ui5since": "2.4.0" - }, - { - "name": "close", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired after the component's picker is closed.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": false, - "_ui5since": "2.4.0" } ], "attributes": [ { - "description": "Defines a formatted date value.", - "name": "value", - "default": "\"\"", - "fieldName": "value", - "type": { - "text": "string" - } - }, - { - "description": "Defines the value state of the component.", - "name": "value-state", - "default": "\"None\"", - "fieldName": "valueState", - "type": { - "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" - } - }, - { - "description": "Defines whether the component is required.", - "name": "required", - "default": "false", - "fieldName": "required", - "type": { - "text": "boolean" - } - }, - { - "description": "Determines whether the component is displayed as disabled.", - "name": "disabled", - "default": "false", - "fieldName": "disabled", - "type": { - "text": "boolean" - } - }, - { - "description": "Determines whether the component is displayed as read-only.", - "name": "readonly", - "default": "false", - "fieldName": "readonly", - "type": { - "text": "boolean" - } - }, - { - "description": "Defines a short hint, intended to aid the user with data entry when the\ncomponent has no value.\n\n**Note:** When no placeholder is set, the format pattern is displayed as a placeholder.\nPassing an empty string as the value of this property will make the component appear empty - without placeholder or format pattern.", - "name": "placeholder", + "description": "Defines the accessible description of the component.", + "name": "accessible-description", "default": "undefined", - "fieldName": "placeholder", + "fieldName": "accessibleDescription", "type": { "text": "string | undefined" } }, { - "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", - "name": "name", + "description": "Receives id(or many ids) of the elements that describe the input.", + "name": "accessible-description-ref", "default": "undefined", - "fieldName": "name", + "fieldName": "accessibleDescriptionRef", "type": { "text": "string | undefined" } }, - { - "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.", - "name": "hide-week-numbers", - "default": "false", - "fieldName": "hideWeekNumbers", - "type": { - "text": "boolean" - } - }, - { - "description": "Defines the open or closed state of the popover.", - "name": "open", - "default": "false", - "fieldName": "open", - "type": { - "text": "boolean" - } - }, { "description": "Defines the aria-label attribute for the component.", "name": "accessible-name", @@ -6341,21 +6293,12 @@ } }, { - "description": "Defines the accessible description of the component.", - "name": "accessible-description", - "default": "undefined", - "fieldName": "accessibleDescription", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Receives id(or many ids) of the elements that describe the input.", - "name": "accessible-description-ref", - "default": "undefined", - "fieldName": "accessibleDescriptionRef", + "description": "Defines how to calculate calendar weeks and first day of the week.\nIf not set, the calendar will be displayed according to the currently set global configuration.", + "name": "calendar-week-numbering", + "default": "\"Default\"", + "fieldName": "calendarWeekNumbering", "type": { - "text": "string | undefined" + "text": "\"Default\" | \"ISO_8601\" | \"MiddleEastern\" | \"WesternTraditional\"" } }, { @@ -6378,29 +6321,21 @@ } }, { - "description": "Sets a calendar type used for display.\nIf not set, the calendar type of the global configuration is used.", - "name": "primary-calendar-type", - "default": "undefined", - "fieldName": "primaryCalendarType", + "description": "Determines whether the component is displayed as disabled.", + "name": "disabled", + "default": "false", + "fieldName": "disabled", "type": { - "text": "\"Gregorian\" | \"Islamic\" | \"Japanese\" | \"Buddhist\" | \"Persian\" | undefined" - }, - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" + "text": "boolean" } }, { - "description": "Defines the secondary calendar type.\nIf not set, the calendar will only show the primary calendar type.", - "name": "secondary-calendar-type", + "description": "Determines the format, displayed in the input field.", + "name": "display-format", "default": "undefined", - "fieldName": "secondaryCalendarType", + "fieldName": "displayFormat", "type": { - "text": "\"Gregorian\" | \"Islamic\" | \"Japanese\" | \"Buddhist\" | \"Persian\" | undefined" - }, - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" + "text": "string | undefined" } }, { @@ -6411,36 +6346,24 @@ "type": { "text": "string | undefined" }, - "deprecated": "Use displayFormat and valueFormat instead", - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" - } + "deprecated": "Use displayFormat and valueFormat instead" }, { - "description": "Determines the format, displayed in the input field.", - "name": "display-format", - "default": "undefined", - "fieldName": "displayFormat", + "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.", + "name": "hide-week-numbers", + "default": "false", + "fieldName": "hideWeekNumbers", "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" + "text": "boolean" } }, { - "description": "Determines the format, used for the value attribute.", - "name": "value-format", - "default": "undefined", - "fieldName": "valueFormat", + "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).", + "name": "max-date", + "default": "\"\"", + "fieldName": "maxDate", "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" + "text": "string" } }, { @@ -6450,36 +6373,105 @@ "fieldName": "minDate", "type": { "text": "string" - }, - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" } }, { - "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).", - "name": "max-date", + "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", + "name": "name", + "default": "undefined", + "fieldName": "name", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the open or closed state of the popover.", + "name": "open", + "default": "false", + "fieldName": "open", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines a short hint, intended to aid the user with data entry when the\ncomponent has no value.\n\n**Note:** When no placeholder is set, the format pattern is displayed as a placeholder.\nPassing an empty string as the value of this property will make the component appear empty - without placeholder or format pattern.", + "name": "placeholder", + "default": "undefined", + "fieldName": "placeholder", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Sets a calendar type used for display.\nIf not set, the calendar type of the global configuration is used.", + "name": "primary-calendar-type", + "default": "undefined", + "fieldName": "primaryCalendarType", + "type": { + "text": "\"Gregorian\" | \"Islamic\" | \"Japanese\" | \"Buddhist\" | \"Persian\" | undefined" + } + }, + { + "description": "Determines whether the component is displayed as read-only.", + "name": "readonly", + "default": "false", + "fieldName": "readonly", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines whether the component is required.", + "name": "required", + "default": "false", + "fieldName": "required", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines the secondary calendar type.\nIf not set, the calendar will only show the primary calendar type.", + "name": "secondary-calendar-type", + "default": "undefined", + "fieldName": "secondaryCalendarType", + "type": { + "text": "\"Gregorian\" | \"Islamic\" | \"Japanese\" | \"Buddhist\" | \"Persian\" | undefined" + } + }, + { + "description": "Defines whether the clear icon of the input will be shown.", + "name": "show-clear-icon", + "default": "false", + "fieldName": "showClearIcon", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines a formatted date value.", + "name": "value", "default": "\"\"", - "fieldName": "maxDate", + "fieldName": "value", "type": { "text": "string" - }, - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" } }, { - "description": "Defines how to calculate calendar weeks and first day of the week.\nIf not set, the calendar will be displayed according to the currently set global configuration.", - "name": "calendar-week-numbering", - "default": "\"Default\"", - "fieldName": "calendarWeekNumbering", + "description": "Determines the format, used for the value attribute.", + "name": "value-format", + "default": "undefined", + "fieldName": "valueFormat", "type": { - "text": "\"Default\" | \"ISO_8601\" | \"MiddleEastern\" | \"WesternTraditional\"" - }, - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" + "text": "string | undefined" + } + }, + { + "description": "Defines the value state of the component.", + "name": "value-state", + "default": "\"None\"", + "fieldName": "valueState", + "type": { + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" } } ], @@ -6523,13 +6515,65 @@ "members": [ { "kind": "field", - "name": "delimiter", + "name": "accessibleDescription", "type": { - "text": "string" + "text": "string | undefined" }, - "default": "\"-\"", - "description": "Determines the symbol which separates the dates.\nIf not supplied, the default time interval delimiter for the current locale will be used.", - "privacy": "public" + "description": "Defines the accessible description of the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.14.0" + }, + { + "kind": "field", + "name": "accessibleDescriptionRef", + "type": { + "text": "string | undefined" + }, + "description": "Receives id(or many ids) of the elements that describe the input.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.14.0" + }, + { + "kind": "field", + "name": "accessibleName", + "type": { + "text": "string | undefined" + }, + "description": "Defines the aria-label attribute for the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.0.0-rc.15" + }, + { + "kind": "field", + "name": "accessibleNameRef", + "type": { + "text": "string | undefined" + }, + "description": "Receives id(or many ids) of the elements that label the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.0.0-rc.15" + }, + { + "kind": "field", + "name": "calendarWeekNumbering", + "type": { + "text": "CalendarWeekNumbering", + "references": [ + { + "name": "CalendarWeekNumbering", + "package": "@ui5/webcomponents", + "module": "dist/types/CalendarWeekNumbering.js" + } + ] + }, + "default": "\"Default\"", + "description": "Defines how to calculate calendar weeks and first day of the week.\nIf not set, the calendar will be displayed according to the currently set global configuration.", + "privacy": "public", + "_ui5since": "2.2.0" }, { "kind": "field", @@ -6541,11 +6585,18 @@ "privacy": "public", "default": "null", "deprecated": "Use dateValueAsync instead", - "readonly": true, - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } + "readonly": true + }, + { + "kind": "field", + "name": "dateValueAsync", + "type": { + "text": "Promise<Date | null>" + }, + "description": "Promise that resolves to the currently selected date represented as a Local JavaScript Date instance.", + "privacy": "public", + "default": "Promise", + "readonly": true }, { "kind": "field", @@ -6556,22 +6607,38 @@ "readonly": true, "description": "**Note:** The getter method is inherited and not supported. If called it will return an empty value.", "privacy": "public", - "default": "null", - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } + "default": "null" }, { "kind": "field", - "name": "startDateValue", + "name": "delimiter", "type": { - "text": "Date | null" + "text": "string" }, - "description": "Returns the start date of the currently selected range as JavaScript Date instance.", + "default": "\"-\"", + "description": "Determines the symbol which separates the dates.\nIf not supplied, the default time interval delimiter for the current locale will be used.", + "privacy": "public" + }, + { + "kind": "field", + "name": "disabled", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Determines whether the component is displayed as disabled.", + "privacy": "public" + }, + { + "kind": "field", + "name": "displayFormat", + "type": { + "text": "string | undefined" + }, + "description": "Determines the format, displayed in the input field.", + "default": "undefined", "privacy": "public", - "default": "null", - "readonly": true + "_ui5since": "2.14.0" }, { "kind": "field", @@ -6584,9 +6651,53 @@ "default": "null", "readonly": true }, + { + "kind": "field", + "name": "formatPattern", + "type": { + "text": "string | undefined" + }, + "description": "Determines the format, displayed in the input field.", + "default": "undefined", + "deprecated": "Use displayFormat and valueFormat instead", + "privacy": "public" + }, { "kind": "method", - "name": "isValid", + "name": "formatValue", + "return": { + "type": { + "text": "string" + }, + "description": "The date as string" + }, + "parameters": [ + { + "name": "date", + "type": { + "text": "Date" + }, + "description": "A Java Script date object to be formatted as string", + "_ui5privacy": "public" + } + ], + "description": "Formats a Java Script date object into a string representing a locale date\naccording to the `formatPattern` property of the DatePicker instance", + "privacy": "public" + }, + { + "kind": "field", + "name": "hideWeekNumbers", + "type": { + "text": "boolean" + }, + "default": "false", + "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.", + "privacy": "public", + "_ui5since": "1.0.0-rc.8" + }, + { + "kind": "method", + "name": "isInValidRange", "return": { "type": { "text": "boolean" @@ -6598,21 +6709,16 @@ "type": { "text": "string" }, - "description": "A value to be tested against the current date format", + "description": "A value to be checked", "_ui5privacy": "public" } ], - "description": "Checks if a value is valid against the current date format of the DatePicker.", - "privacy": "public", - "deprecated": "Use isValidValue or isValidDisplayValue instead", - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } + "description": "Checks if a date is between the minimum and maximum date.", + "privacy": "public" }, { "kind": "method", - "name": "isValidValue", + "name": "isValid", "return": { "type": { "text": "boolean" @@ -6630,10 +6736,7 @@ ], "description": "Checks if a value is valid against the current date format of the DatePicker.", "privacy": "public", - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } + "deprecated": "Use isValidValue or isValidDisplayValue instead" }, { "kind": "method", @@ -6654,15 +6757,11 @@ } ], "description": "Checks if a value is valid against the current date format of the DatePicker.", - "privacy": "public", - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } + "privacy": "public" }, { "kind": "method", - "name": "isInValidRange", + "name": "isValidValue", "return": { "type": { "text": "boolean" @@ -6674,96 +6773,55 @@ "type": { "text": "string" }, - "description": "A value to be checked", + "description": "A value to be tested against the current date format", "_ui5privacy": "public" } ], - "description": "Checks if a date is between the minimum and maximum date.", - "privacy": "public", - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } + "description": "Checks if a value is valid against the current date format of the DatePicker.", + "privacy": "public" }, { "kind": "field", - "name": "value", + "name": "maxDate", "type": { "text": "string" }, "default": "\"\"", - "description": "Defines a formatted date value.", - "privacy": "public", - "_ui5formProperty": true, - "_ui5formEvents": "change,input", - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } - }, - { - "kind": "field", - "name": "valueState", - "type": { - "text": "ValueState", - "references": [ - { - "name": "ValueState", - "package": "@ui5/webcomponents-base", - "module": "dist/types/ValueState.js" - } - ] - }, - "default": "\"None\"", - "description": "Defines the value state of the component.", + "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).", "privacy": "public", - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } + "_ui5since": "1.0.0-rc.6" }, { "kind": "field", - "name": "required", + "name": "minDate", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Defines whether the component is required.", + "default": "\"\"", + "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).", "privacy": "public", - "_ui5since": "1.0.0-rc.9", - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } + "_ui5since": "1.0.0-rc.6" }, { "kind": "field", - "name": "disabled", + "name": "name", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Determines whether the component is displayed as disabled.", - "privacy": "public", - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } + "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", + "default": "undefined", + "privacy": "public" }, { "kind": "field", - "name": "readonly", + "name": "open", "type": { "text": "boolean" }, "default": "false", - "description": "Determines whether the component is displayed as read-only.", + "description": "Defines the open or closed state of the popover.", "privacy": "public", - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } + "_ui5since": "2.0.0" }, { "kind": "field", @@ -6773,306 +6831,171 @@ }, "description": "Defines a short hint, intended to aid the user with data entry when the\ncomponent has no value.\n\n**Note:** When no placeholder is set, the format pattern is displayed as a placeholder.\nPassing an empty string as the value of this property will make the component appear empty - without placeholder or format pattern.", "default": "undefined", - "privacy": "public", - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } + "privacy": "public" }, { "kind": "field", - "name": "name", + "name": "primaryCalendarType", "type": { - "text": "string | undefined" + "text": "CalendarType | undefined", + "references": [ + { + "name": "CalendarType", + "package": "@ui5/webcomponents-base", + "module": "dist/types/CalendarType.js" + } + ] }, - "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", + "description": "Sets a calendar type used for display.\nIf not set, the calendar type of the global configuration is used.", "default": "undefined", - "privacy": "public", - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } + "privacy": "public" }, { "kind": "field", - "name": "hideWeekNumbers", + "name": "readonly", "type": { "text": "boolean" }, "default": "false", - "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.", - "privacy": "public", - "_ui5since": "1.0.0-rc.8", - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } + "description": "Determines whether the component is displayed as read-only.", + "privacy": "public" }, { "kind": "field", - "name": "open", + "name": "required", "type": { "text": "boolean" }, "default": "false", - "description": "Defines the open or closed state of the popover.", + "description": "Defines whether the component is required.", "privacy": "public", - "_ui5since": "2.0.0", - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } + "_ui5since": "1.0.0-rc.9" }, { "kind": "field", - "name": "accessibleName", + "name": "secondaryCalendarType", "type": { - "text": "string | undefined" + "text": "CalendarType | undefined", + "references": [ + { + "name": "CalendarType", + "package": "@ui5/webcomponents-base", + "module": "dist/types/CalendarType.js" + } + ] }, - "description": "Defines the aria-label attribute for the component.", + "description": "Defines the secondary calendar type.\nIf not set, the calendar will only show the primary calendar type.", "default": "undefined", "privacy": "public", - "_ui5since": "1.0.0-rc.15", - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } + "_ui5since": "1.0.0-rc.16" }, { "kind": "field", - "name": "accessibleNameRef", + "name": "showClearIcon", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Receives id(or many ids) of the elements that label the component.", - "default": "undefined", + "default": "false", + "description": "Defines whether the clear icon of the input will be shown.", "privacy": "public", - "_ui5since": "1.0.0-rc.15", - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } + "_ui5since": "2.20.0" }, { "kind": "field", - "name": "accessibleDescription", + "name": "startDateValue", "type": { - "text": "string | undefined" + "text": "Date | null" }, - "description": "Defines the accessible description of the component.", - "default": "undefined", + "description": "Returns the start date of the currently selected range as JavaScript Date instance.", "privacy": "public", - "_ui5since": "2.14.0", - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } + "default": "null", + "readonly": true }, { "kind": "field", - "name": "accessibleDescriptionRef", + "name": "value", "type": { - "text": "string | undefined" - }, - "description": "Receives id(or many ids) of the elements that describe the input.", - "default": "undefined", - "privacy": "public", - "_ui5since": "2.14.0", - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } - }, - { - "kind": "method", - "name": "formatValue", - "return": { - "type": { - "text": "string" - }, - "description": "The date as string" + "text": "string" }, - "parameters": [ - { - "name": "date", - "type": { - "text": "Date" - }, - "description": "A Java Script date object to be formatted as string", - "_ui5privacy": "public" - } - ], - "description": "Formats a Java Script date object into a string representing a locale date\naccording to the `formatPattern` property of the DatePicker instance", + "default": "\"\"", + "description": "Defines a formatted date value.", "privacy": "public", - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } + "_ui5formProperty": true, + "_ui5formEvents": "change,input" }, { "kind": "field", - "name": "dateValueAsync", + "name": "valueFormat", "type": { - "text": "Promise<Date | null>" + "text": "string | undefined" }, - "description": "Promise that resolves to the currently selected date represented as a Local JavaScript Date instance.", + "description": "Determines the format, used for the value attribute.", + "default": "undefined", "privacy": "public", - "default": "Promise", - "readonly": true, - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } + "_ui5since": "2.14.0" }, { "kind": "field", - "name": "primaryCalendarType", + "name": "valueState", "type": { - "text": "CalendarType | undefined", + "text": "ValueState", "references": [ { - "name": "CalendarType", + "name": "ValueState", "package": "@ui5/webcomponents-base", - "module": "dist/types/CalendarType.js" + "module": "dist/types/ValueState.js" } ] }, - "description": "Sets a calendar type used for display.\nIf not set, the calendar type of the global configuration is used.", + "default": "\"None\"", + "description": "Defines the value state of the component.", + "privacy": "public" + } + ], + "attributes": [ + { + "description": "Defines the accessible description of the component.", + "name": "accessible-description", "default": "undefined", - "privacy": "public", - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" + "fieldName": "accessibleDescription", + "type": { + "text": "string | undefined" } }, { - "kind": "field", - "name": "secondaryCalendarType", - "type": { - "text": "CalendarType | undefined", - "references": [ - { - "name": "CalendarType", - "package": "@ui5/webcomponents-base", - "module": "dist/types/CalendarType.js" - } - ] - }, - "description": "Defines the secondary calendar type.\nIf not set, the calendar will only show the primary calendar type.", + "description": "Receives id(or many ids) of the elements that describe the input.", + "name": "accessible-description-ref", "default": "undefined", - "privacy": "public", - "_ui5since": "1.0.0-rc.16", - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" + "fieldName": "accessibleDescriptionRef", + "type": { + "text": "string | undefined" } }, { - "kind": "field", - "name": "formatPattern", + "description": "Defines the aria-label attribute for the component.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", "type": { "text": "string | undefined" - }, - "description": "Determines the format, displayed in the input field.", - "default": "undefined", - "deprecated": "Use displayFormat and valueFormat instead", - "privacy": "public", - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" } }, { - "kind": "field", - "name": "displayFormat", - "type": { - "text": "string | undefined" - }, - "description": "Determines the format, displayed in the input field.", + "description": "Receives id(or many ids) of the elements that label the component.", + "name": "accessible-name-ref", "default": "undefined", - "privacy": "public", - "_ui5since": "2.14.0", - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" - } - }, - { - "kind": "field", - "name": "valueFormat", + "fieldName": "accessibleNameRef", "type": { "text": "string | undefined" - }, - "description": "Determines the format, used for the value attribute.", - "default": "undefined", - "privacy": "public", - "_ui5since": "2.14.0", - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" - } - }, - { - "kind": "field", - "name": "minDate", - "type": { - "text": "string" - }, - "default": "\"\"", - "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).", - "privacy": "public", - "_ui5since": "1.0.0-rc.6", - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" - } - }, - { - "kind": "field", - "name": "maxDate", - "type": { - "text": "string" - }, - "default": "\"\"", - "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).", - "privacy": "public", - "_ui5since": "1.0.0-rc.6", - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" } }, { - "kind": "field", - "name": "calendarWeekNumbering", - "type": { - "text": "CalendarWeekNumbering", - "references": [ - { - "name": "CalendarWeekNumbering", - "package": "@ui5/webcomponents", - "module": "dist/types/CalendarWeekNumbering.js" - } - ] - }, - "default": "\"Default\"", "description": "Defines how to calculate calendar weeks and first day of the week.\nIf not set, the calendar will be displayed according to the currently set global configuration.", - "privacy": "public", - "_ui5since": "2.2.0", - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" - } - } - ], - "attributes": [ - { - "description": "Determines the symbol which separates the dates.\nIf not supplied, the default time interval delimiter for the current locale will be used.", - "name": "delimiter", - "default": "\"-\"", - "fieldName": "delimiter", + "name": "calendar-week-numbering", + "default": "\"Default\"", + "fieldName": "calendarWeekNumbering", "type": { - "text": "string" + "text": "\"Default\" | \"ISO_8601\" | \"MiddleEastern\" | \"WesternTraditional\"" } }, { @@ -7080,78 +7003,35 @@ "name": "date-value", "default": "null", "fieldName": "dateValue", - "type": { - "text": "any" - }, - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } - }, - { - "description": "**Note:** The getter method is inherited and not supported. If called it will return an empty value.", - "name": "date-value-utc", - "default": "null", - "fieldName": "dateValueUTC", "type": { "text": "any" } }, { - "description": "Returns the start date of the currently selected range as JavaScript Date instance.", - "name": "start-date-value", - "default": "null", - "fieldName": "startDateValue", + "description": "Promise that resolves to the currently selected date represented as a Local JavaScript Date instance.", + "name": "date-value-async", + "default": "Promise", + "fieldName": "dateValueAsync", "type": { "text": "any" } }, { - "description": "Returns the end date of the currently selected range as JavaScript Date instance.", - "name": "end-date-value", + "description": "**Note:** The getter method is inherited and not supported. If called it will return an empty value.", + "name": "date-value-utc", "default": "null", - "fieldName": "endDateValue", + "fieldName": "dateValueUTC", "type": { "text": "any" } }, { - "description": "Defines a formatted date value.", - "name": "value", - "default": "\"\"", - "fieldName": "value", + "description": "Determines the symbol which separates the dates.\nIf not supplied, the default time interval delimiter for the current locale will be used.", + "name": "delimiter", + "default": "\"-\"", + "fieldName": "delimiter", "type": { "text": "string" - }, - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } - }, - { - "description": "Defines the value state of the component.", - "name": "value-state", - "default": "\"None\"", - "fieldName": "valueState", - "type": { - "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" - }, - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } - }, - { - "description": "Defines whether the component is required.", - "name": "required", - "default": "false", - "fieldName": "required", - "type": { - "text": "boolean" - }, - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" } }, { @@ -7161,50 +7041,35 @@ "fieldName": "disabled", "type": { "text": "boolean" - }, - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" } }, { - "description": "Determines whether the component is displayed as read-only.", - "name": "readonly", - "default": "false", - "fieldName": "readonly", + "description": "Determines the format, displayed in the input field.", + "name": "display-format", + "default": "undefined", + "fieldName": "displayFormat", "type": { - "text": "boolean" - }, - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" + "text": "string | undefined" } }, { - "description": "Defines a short hint, intended to aid the user with data entry when the\ncomponent has no value.\n\n**Note:** When no placeholder is set, the format pattern is displayed as a placeholder.\nPassing an empty string as the value of this property will make the component appear empty - without placeholder or format pattern.", - "name": "placeholder", - "default": "undefined", - "fieldName": "placeholder", + "description": "Returns the end date of the currently selected range as JavaScript Date instance.", + "name": "end-date-value", + "default": "null", + "fieldName": "endDateValue", "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" + "text": "any" } }, { - "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", - "name": "name", + "description": "Determines the format, displayed in the input field.", + "name": "format-pattern", "default": "undefined", - "fieldName": "name", + "fieldName": "formatPattern", "type": { "text": "string | undefined" }, - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } + "deprecated": "Use displayFormat and valueFormat instead" }, { "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.", @@ -7213,88 +7078,51 @@ "fieldName": "hideWeekNumbers", "type": { "text": "boolean" - }, - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" } }, { - "description": "Defines the open or closed state of the popover.", - "name": "open", - "default": "false", - "fieldName": "open", + "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).", + "name": "max-date", + "default": "\"\"", + "fieldName": "maxDate", "type": { - "text": "boolean" - }, - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" + "text": "string" } }, { - "description": "Defines the aria-label attribute for the component.", - "name": "accessible-name", - "default": "undefined", - "fieldName": "accessibleName", + "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).", + "name": "min-date", + "default": "\"\"", + "fieldName": "minDate", "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" + "text": "string" } }, { - "description": "Receives id(or many ids) of the elements that label the component.", - "name": "accessible-name-ref", + "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", + "name": "name", "default": "undefined", - "fieldName": "accessibleNameRef", + "fieldName": "name", "type": { "text": "string | undefined" - }, - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" } }, { - "description": "Defines the accessible description of the component.", - "name": "accessible-description", - "default": "undefined", - "fieldName": "accessibleDescription", + "description": "Defines the open or closed state of the popover.", + "name": "open", + "default": "false", + "fieldName": "open", "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" + "text": "boolean" } }, { - "description": "Receives id(or many ids) of the elements that describe the input.", - "name": "accessible-description-ref", + "description": "Defines a short hint, intended to aid the user with data entry when the\ncomponent has no value.\n\n**Note:** When no placeholder is set, the format pattern is displayed as a placeholder.\nPassing an empty string as the value of this property will make the component appear empty - without placeholder or format pattern.", + "name": "placeholder", "default": "undefined", - "fieldName": "accessibleDescriptionRef", + "fieldName": "placeholder", "type": { "text": "string | undefined" - }, - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } - }, - { - "description": "Promise that resolves to the currently selected date represented as a Local JavaScript Date instance.", - "name": "date-value-async", - "default": "Promise", - "fieldName": "dateValueAsync", - "type": { - "text": "any" - }, - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" } }, { @@ -7304,102 +7132,78 @@ "fieldName": "primaryCalendarType", "type": { "text": "\"Gregorian\" | \"Islamic\" | \"Japanese\" | \"Buddhist\" | \"Persian\" | undefined" - }, - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" } }, { - "description": "Defines the secondary calendar type.\nIf not set, the calendar will only show the primary calendar type.", - "name": "secondary-calendar-type", - "default": "undefined", - "fieldName": "secondaryCalendarType", + "description": "Determines whether the component is displayed as read-only.", + "name": "readonly", + "default": "false", + "fieldName": "readonly", "type": { - "text": "\"Gregorian\" | \"Islamic\" | \"Japanese\" | \"Buddhist\" | \"Persian\" | undefined" - }, - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" + "text": "boolean" } }, { - "description": "Determines the format, displayed in the input field.", - "name": "format-pattern", - "default": "undefined", - "fieldName": "formatPattern", + "description": "Defines whether the component is required.", + "name": "required", + "default": "false", + "fieldName": "required", "type": { - "text": "string | undefined" - }, - "deprecated": "Use displayFormat and valueFormat instead", - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" + "text": "boolean" } }, { - "description": "Determines the format, displayed in the input field.", - "name": "display-format", + "description": "Defines the secondary calendar type.\nIf not set, the calendar will only show the primary calendar type.", + "name": "secondary-calendar-type", "default": "undefined", - "fieldName": "displayFormat", + "fieldName": "secondaryCalendarType", "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" + "text": "\"Gregorian\" | \"Islamic\" | \"Japanese\" | \"Buddhist\" | \"Persian\" | undefined" } }, { - "description": "Determines the format, used for the value attribute.", - "name": "value-format", - "default": "undefined", - "fieldName": "valueFormat", + "description": "Defines whether the clear icon of the input will be shown.", + "name": "show-clear-icon", + "default": "false", + "fieldName": "showClearIcon", "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" + "text": "boolean" } }, { - "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).", - "name": "min-date", - "default": "\"\"", - "fieldName": "minDate", + "description": "Returns the start date of the currently selected range as JavaScript Date instance.", + "name": "start-date-value", + "default": "null", + "fieldName": "startDateValue", "type": { - "text": "string" - }, - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" + "text": "any" } }, { - "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).", - "name": "max-date", + "description": "Defines a formatted date value.", + "name": "value", "default": "\"\"", - "fieldName": "maxDate", + "fieldName": "value", "type": { "text": "string" - }, - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" } }, { - "description": "Defines how to calculate calendar weeks and first day of the week.\nIf not set, the calendar will be displayed according to the currently set global configuration.", - "name": "calendar-week-numbering", - "default": "\"Default\"", - "fieldName": "calendarWeekNumbering", + "description": "Determines the format, used for the value attribute.", + "name": "value-format", + "default": "undefined", + "fieldName": "valueFormat", "type": { - "text": "\"Default\" | \"ISO_8601\" | \"MiddleEastern\" | \"WesternTraditional\"" - }, - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" + "text": "string | undefined" + } + }, + { + "description": "Defines the value state of the component.", + "name": "value-state", + "default": "\"None\"", + "fieldName": "valueState", + "type": { + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" } } ], @@ -7420,21 +7224,13 @@ "_ui5type": { "text": "Array<HTMLElement>" }, - "_ui5privacy": "public", - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } + "_ui5privacy": "public" } ], "cssParts": [ { "description": "Used to style the input element. This part is forwarded to the underlying ui5-input element.", - "name": "input", - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } + "name": "input" } ], "events": [ @@ -7458,25 +7254,33 @@ "_ui5parameters": [ { "type": { - "text": "string" + "text": "boolean" }, - "name": "value", + "name": "valid", "_ui5privacy": "public", - "description": "The submitted value." + "description": "Indicator if the value is in correct format pattern and in valid range." }, { "type": { - "text": "boolean" + "text": "string" }, - "name": "valid", + "name": "value", "_ui5privacy": "public", - "description": "Indicator if the value is in correct format pattern and in valid range." + "description": "The submitted value." } - ], - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } + ] + }, + { + "name": "close", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired after the component's picker is closed.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": false, + "_ui5since": "2.4.0" }, { "name": "input", @@ -7498,25 +7302,33 @@ "_ui5parameters": [ { "type": { - "text": "string" + "text": "boolean" }, - "name": "value", + "name": "valid", "_ui5privacy": "public", - "description": "The submitted value." + "description": "Indicator if the value is in correct format pattern and in valid range." }, { "type": { - "text": "boolean" + "text": "string" }, - "name": "valid", + "name": "value", "_ui5privacy": "public", - "description": "Indicator if the value is in correct format pattern and in valid range." + "description": "The submitted value." } - ], - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } + ] + }, + { + "name": "open", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired after the component's picker is opened.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": false, + "_ui5since": "2.4.0" }, { "name": "value-state-change", @@ -7538,57 +7350,21 @@ "_ui5parameters": [ { "type": { - "text": "string" + "text": "boolean" }, - "name": "valueState", + "name": "valid", "_ui5privacy": "public", - "description": "The new `valueState` that will be set." + "description": "Indicator if the value is in correct format pattern and in valid range." }, { "type": { - "text": "boolean" + "text": "string" }, - "name": "valid", + "name": "valueState", "_ui5privacy": "public", - "description": "Indicator if the value is in correct format pattern and in valid range." + "description": "The new `valueState` that will be set." } - ], - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } - }, - { - "name": "open", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired after the component's picker is opened.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": false, - "_ui5since": "2.4.0", - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } - }, - { - "name": "close", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired after the component's picker is closed.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": false, - "_ui5since": "2.4.0", - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } + ] } ] } @@ -7615,120 +7391,94 @@ { "kind": "javascript-module", "path": "dist/DateTimeInput.js", - "declarations": [], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "DateTimeInput", - "module": "dist/DateTimeInput.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/DateTimePicker.js", "declarations": [ { "kind": "class", - "description": "### Overview\nThe `DateTimePicker` component alows users to select both date (day, month and year) and time (hours, minutes and seconds)\nand for the purpose it consists of input field and Date/Time picker.\n\n### Usage\n\nUse the `DateTimePicker` if you need a combined date and time input component.\nDon't use it if you want to use either date, or time value.\nIn this case, use the `DatePicker` or the `TimePicker` components instead.\n\nThe user can set date/time by:\n\n- using the calendar and the time selectors\n- typing in the input field\n\nProgrammatically, to set date/time for the `DateTimePicker`, use the `value` property\n\n### Formatting\n\nThe value entered by typing into the input field must fit to the used date/time 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](https://unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table).\n\n**Example:** the following format `dd/MM/yyyy, hh:mm:ss aa`\ncorresponds the `13/04/2020, 03:16:16 AM` value.\n\nThe small 'h' defines \"12\" hours format and the \"aa\" symbols - \"AM/PM\" time periods.\n\n**Example:** the following format `dd/MM/yyyy, HH:mm:ss`\ncorresponds the `13/04/2020, 15:16:16` value.\n\nThe capital 'H' indicates \"24\" hours format.\n\n**Note:** If the `formatPattern` does NOT include time,\nthe `DateTimePicker` will fallback to the default time format according to the locale.\n\n**Note:** If no placeholder is set to the `DateTimePicker`,\nthe current `formatPattern` is displayed as a placeholder.\nIf another placeholder is needed, it must be set or in case no placeholder is needed - it can be set to an empty string.\n\n**Note:** If the user input does NOT match the `formatPattern`,\nthe `DateTimePicker` makes an attempt to parse it based on the\nlocale settings.\n\n### Responsive behavior\n\nThe `DateTimePicker` is responsive and fully adapts to all devices.\nFor larger screens, such as tablet or desktop, it is displayed as a popover, while\non phone devices, it is displayed full screen.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/DateTimePicker.js\";`", - "name": "DateTimePicker", + "description": "Extention of the UI5 Input, so we do not modify Input's private properties within the datetime components.\nIntended to be used for the DateTime components.", + "name": "DateTimeInput", "members": [ { "kind": "field", - "name": "value", + "name": "accessibleDescription", "type": { - "text": "string" + "text": "string | undefined" }, - "default": "\"\"", - "description": "Defines a formatted date value.", + "description": "Defines the accessible description of the component.", + "default": "undefined", "privacy": "public", - "_ui5formProperty": true, - "_ui5formEvents": "change,input", - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } + "_ui5since": "2.9.0" }, { "kind": "field", - "name": "valueState", + "name": "accessibleDescriptionRef", "type": { - "text": "ValueState", - "references": [ - { - "name": "ValueState", - "package": "@ui5/webcomponents-base", - "module": "dist/types/ValueState.js" - } - ] + "text": "string | undefined" }, - "default": "\"None\"", - "description": "Defines the value state of the component.", + "description": "Receives id(or many ids) of the elements that describe the input.", + "default": "undefined", "privacy": "public", - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } + "_ui5since": "2.9.0" }, { "kind": "field", - "name": "required", + "name": "accessibleName", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Defines whether the component is required.", + "description": "Defines the accessible ARIA name of the component.", + "default": "undefined", "privacy": "public", - "_ui5since": "1.0.0-rc.9", - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } + "_ui5since": "1.0.0-rc.15" }, { "kind": "field", - "name": "disabled", + "name": "accessibleNameRef", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Determines whether the component is displayed as disabled.", + "description": "Receives id(or many ids) of the elements that label the input.", + "default": "undefined", "privacy": "public", - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } + "_ui5since": "1.0.0-rc.15" }, { "kind": "field", - "name": "readonly", + "name": "disabled", "type": { "text": "boolean" }, "default": "false", - "description": "Determines whether the component is displayed as read-only.", + "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is completely noninteractive.", + "privacy": "public" + }, + { + "kind": "field", + "name": "filter", + "type": { + "text": "InputSuggestionsFilter", + "references": [ + { + "name": "InputSuggestionsFilter", + "package": "@ui5/webcomponents", + "module": "dist/types/InputSuggestionsFilter.js" + } + ] + }, + "description": "Defines the filter type of the component.", + "default": "\"None\"", "privacy": "public", - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } + "_ui5since": "2.19.0" }, { "kind": "field", - "name": "placeholder", + "name": "maxlength", "type": { - "text": "string | undefined" + "text": "number | undefined" }, - "description": "Defines a short hint, intended to aid the user with data entry when the\ncomponent has no value.\n\n**Note:** When no placeholder is set, the format pattern is displayed as a placeholder.\nPassing an empty string as the value of this property will make the component appear empty - without placeholder or format pattern.", + "description": "Sets the maximum number of characters available in the input field.\n\n**Note:** This property is not compatible with the ui5-input type InputType.Number. If the ui5-input type is set to Number, the maxlength value is ignored.", "default": "undefined", "privacy": "public", - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } + "_ui5since": "1.0.0-rc.5" }, { "kind": "field", @@ -7738,26 +7488,18 @@ }, "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", "default": "undefined", - "privacy": "public", - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } + "privacy": "public" }, { "kind": "field", - "name": "hideWeekNumbers", + "name": "noTypeahead", "type": { "text": "boolean" }, "default": "false", - "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.", + "description": "Defines whether the value will be autcompleted to match an item", "privacy": "public", - "_ui5since": "1.0.0-rc.8", - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } + "_ui5since": "1.4.0" }, { "kind": "field", @@ -7766,484 +7508,235 @@ "text": "boolean" }, "default": "false", - "description": "Defines the open or closed state of the popover.", + "description": "Defines whether the suggestions picker is open.\nThe picker will not open if the `showSuggestions` property is set to `false`, the input is disabled or the input is readonly.\nThe picker will close automatically and `close` event will be fired if the input is not in the viewport.", "privacy": "public", - "_ui5since": "2.0.0", - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } + "_ui5since": "2.0.0" }, { "kind": "field", - "name": "accessibleName", + "name": "placeholder", "type": { "text": "string | undefined" }, - "description": "Defines the aria-label attribute for the component.", + "description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.", "default": "undefined", - "privacy": "public", - "_ui5since": "1.0.0-rc.15", - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } - }, - { - "kind": "field", - "name": "accessibleNameRef", - "type": { - "text": "string | undefined" - }, - "description": "Receives id(or many ids) of the elements that label the component.", - "default": "undefined", - "privacy": "public", - "_ui5since": "1.0.0-rc.15", - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } - }, - { - "kind": "field", - "name": "accessibleDescription", - "type": { - "text": "string | undefined" - }, - "description": "Defines the accessible description of the component.", - "default": "undefined", - "privacy": "public", - "_ui5since": "2.14.0", - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } + "privacy": "public" }, { "kind": "field", - "name": "accessibleDescriptionRef", + "name": "readonly", "type": { - "text": "string | undefined" - }, - "description": "Receives id(or many ids) of the elements that describe the input.", - "default": "undefined", - "privacy": "public", - "_ui5since": "2.14.0", - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } - }, - { - "kind": "method", - "name": "isValid", - "return": { - "type": { - "text": "boolean" - } - }, - "parameters": [ - { - "name": "value", - "type": { - "text": "string" - }, - "description": "A value to be tested against the current date format", - "_ui5privacy": "public" - } - ], - "description": "Checks if a value is valid against the current date format of the DatePicker.", - "privacy": "public", - "deprecated": "Use isValidValue or isValidDisplayValue instead", - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } - }, - { - "kind": "method", - "name": "isValidValue", - "return": { - "type": { - "text": "boolean" - } - }, - "parameters": [ - { - "name": "value", - "type": { - "text": "string" - }, - "description": "A value to be tested against the current date format", - "_ui5privacy": "public" - } - ], - "description": "Checks if a value is valid against the current date format of the DatePicker.", - "privacy": "public", - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } - }, - { - "kind": "method", - "name": "isValidDisplayValue", - "return": { - "type": { - "text": "boolean" - } - }, - "parameters": [ - { - "name": "value", - "type": { - "text": "string" - }, - "description": "A value to be tested against the current date format", - "_ui5privacy": "public" - } - ], - "description": "Checks if a value is valid against the current date format of the DatePicker.", - "privacy": "public", - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } - }, - { - "kind": "method", - "name": "isInValidRange", - "return": { - "type": { - "text": "boolean" - } - }, - "parameters": [ - { - "name": "value", - "type": { - "text": "string" - }, - "description": "A value to be checked", - "_ui5privacy": "public" - } - ], - "description": "Checks if a date is between the minimum and maximum date.", - "privacy": "public", - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } - }, - { - "kind": "method", - "name": "formatValue", - "return": { - "type": { - "text": "string" - }, - "description": "The date as string" + "text": "boolean" }, - "parameters": [ - { - "name": "date", - "type": { - "text": "Date" - }, - "description": "A Java Script date object to be formatted as string", - "_ui5privacy": "public" - } - ], - "description": "Formats a Java Script date object into a string representing a locale date\naccording to the `formatPattern` property of the DatePicker instance", - "privacy": "public", - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } + "default": "false", + "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.", + "privacy": "public" }, { "kind": "field", - "name": "dateValue", + "name": "required", "type": { - "text": "Date | null" + "text": "boolean" }, - "description": "Currently selected date represented as a Local JavaScript Date instance.\nNote: this getter can only be reliably used after the component is fully defined. Use dateValueAsync which resolves only when this condition is met.", + "default": "false", + "description": "Defines whether the component is required.", "privacy": "public", - "default": "null", - "deprecated": "Use dateValueAsync instead", - "readonly": true, - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } + "_ui5since": "1.0.0-rc.3" }, { "kind": "field", - "name": "dateValueAsync", + "name": "showClearIcon", "type": { - "text": "Promise<Date | null>" + "text": "boolean" }, - "description": "Promise that resolves to the currently selected date represented as a Local JavaScript Date instance.", + "default": "false", + "description": "Defines whether the clear icon of the input will be shown.", "privacy": "public", - "default": "Promise", - "readonly": true, - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } + "_ui5since": "1.2.0" }, { "kind": "field", - "name": "primaryCalendarType", + "name": "showSuggestions", "type": { - "text": "CalendarType | undefined", - "references": [ - { - "name": "CalendarType", - "package": "@ui5/webcomponents-base", - "module": "dist/types/CalendarType.js" - } - ] + "text": "boolean" }, - "description": "Sets a calendar type used for display.\nIf not set, the calendar type of the global configuration is used.", - "default": "undefined", - "privacy": "public", - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" - } + "default": "false", + "description": "Defines whether the component should show suggestions, if such are present.", + "privacy": "public" }, { "kind": "field", - "name": "secondaryCalendarType", + "name": "type", "type": { - "text": "CalendarType | undefined", + "text": "InputType", "references": [ { - "name": "CalendarType", - "package": "@ui5/webcomponents-base", - "module": "dist/types/CalendarType.js" + "name": "InputType", + "package": "@ui5/webcomponents", + "module": "dist/types/InputType.js" } ] }, - "description": "Defines the secondary calendar type.\nIf not set, the calendar will only show the primary calendar type.", - "default": "undefined", - "privacy": "public", - "_ui5since": "1.0.0-rc.16", - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" - } - }, - { - "kind": "field", - "name": "formatPattern", - "type": { - "text": "string | undefined" - }, - "description": "Determines the format, displayed in the input field.", - "default": "undefined", - "deprecated": "Use displayFormat and valueFormat instead", - "privacy": "public", - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" - } - }, - { - "kind": "field", - "name": "displayFormat", - "type": { - "text": "string | undefined" - }, - "description": "Determines the format, displayed in the input field.", - "default": "undefined", - "privacy": "public", - "_ui5since": "2.14.0", - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" - } - }, - { - "kind": "field", - "name": "valueFormat", - "type": { - "text": "string | undefined" - }, - "description": "Determines the format, used for the value attribute.", - "default": "undefined", - "privacy": "public", - "_ui5since": "2.14.0", - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" - } - }, - { - "kind": "field", - "name": "minDate", - "type": { - "text": "string" - }, - "default": "\"\"", - "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).", - "privacy": "public", - "_ui5since": "1.0.0-rc.6", - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" - } + "default": "\"Text\"", + "description": "Defines the HTML type of the component.\n\n**Notes:**\n\n- The particular effect of this property differs depending on the browser\nand the current language settings, especially for type `Number`.\n- The property is mostly intended to be used with touch devices\nthat use different soft keyboard layouts depending on the given input type.", + "privacy": "public" }, { "kind": "field", - "name": "maxDate", + "name": "value", "type": { "text": "string" }, "default": "\"\"", - "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).", + "description": "Defines the value of the component.\n\n**Note:** The property is updated upon typing.", "privacy": "public", - "_ui5since": "1.0.0-rc.6", - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" - } + "_ui5formProperty": true, + "_ui5formEvents": "change,input" }, { "kind": "field", - "name": "calendarWeekNumbering", + "name": "valueState", "type": { - "text": "CalendarWeekNumbering", + "text": "ValueState", "references": [ { - "name": "CalendarWeekNumbering", - "package": "@ui5/webcomponents", - "module": "dist/types/CalendarWeekNumbering.js" + "name": "ValueState", + "package": "@ui5/webcomponents-base", + "module": "dist/types/ValueState.js" } ] }, - "default": "\"Default\"", - "description": "Defines how to calculate calendar weeks and first day of the week.\nIf not set, the calendar will be displayed according to the currently set global configuration.", - "privacy": "public", - "_ui5since": "2.2.0", - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" - } + "default": "\"None\"", + "description": "Defines the value state of the component.", + "privacy": "public" } ], "superclass": { - "name": "DatePicker", + "name": "Input", "package": "@ui5/webcomponents", - "module": "dist/DatePicker.js" + "module": "dist/Input.js" }, - "tagName": "ui5-datetime-picker", + "tagName": "ui5-datetime-input", "customElement": true, - "_ui5since": "1.0.0-rc.7", - "_ui5privacy": "public", + "_ui5privacy": "private", "slots": [ + { + "name": "default", + "description": "Defines the suggestion items.\n\n**Note:** The suggestions would be displayed only if the `showSuggestions`\nproperty is set to `true`.\n\n**Note:** The `<ui5-suggestion-item>`, `<ui5-suggestion-item-group>` and `ui5-suggestion-item-custom` are recommended to be used as suggestion items.", + "_ui5propertyName": "suggestionItems", + "_ui5type": { + "text": "Array<IInputSuggestionItem>", + "references": [ + { + "name": "IInputSuggestionItem", + "package": "@ui5/webcomponents", + "module": "dist/Input.js" + } + ] + }, + "_ui5privacy": "public" + }, + { + "name": "icon", + "description": "Defines the icon to be displayed in the component.", + "_ui5type": { + "text": "Array<IIcon>", + "references": [ + { + "name": "IIcon", + "package": "@ui5/webcomponents", + "module": "dist/Icon.js" + } + ] + }, + "_ui5privacy": "public" + }, { "name": "valueStateMessage", - "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 component is in `Information`, `Critical` or `Negative` value state.", - "_ui5since": "1.0.0-rc.7", + "description": "Defines the value state message that will be displayed as pop up under the component.\nThe value state message slot should contain only one root element.\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 component is in `Information`, `Critical` or `Negative` value state.\n\n**Note:** If the component has `suggestionItems`,\nthe `valueStateMessage` would be displayed as part of the same popover, if used on desktop, or dialog - on phone.", + "_ui5since": "1.0.0-rc.6", "_ui5type": { "text": "Array<HTMLElement>" }, - "_ui5privacy": "public", - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } + "_ui5privacy": "public" } ], "cssParts": [ { - "description": "Used to style the input element. This part is forwarded to the underlying ui5-input element.", - "name": "input", - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } + "description": "Used to style the clear icon, which can be pressed to clear user input text", + "name": "clear-icon" + }, + { + "description": "Used to style the native input element", + "name": "input" + }, + { + "description": "Used to style the root DOM element of the Input component", + "name": "root" } ], "attributes": [ { - "description": "Defines a formatted date value.", - "name": "value", - "default": "\"\"", - "fieldName": "value", + "description": "Defines the accessible description of the component.", + "name": "accessible-description", + "default": "undefined", + "fieldName": "accessibleDescription", "type": { - "text": "string" - }, - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" + "text": "string | undefined" } }, { - "description": "Defines the value state of the component.", - "name": "value-state", - "default": "\"None\"", - "fieldName": "valueState", + "description": "Receives id(or many ids) of the elements that describe the input.", + "name": "accessible-description-ref", + "default": "undefined", + "fieldName": "accessibleDescriptionRef", "type": { - "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" - }, - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" + "text": "string | undefined" } }, { - "description": "Defines whether the component is required.", - "name": "required", - "default": "false", - "fieldName": "required", + "description": "Defines the accessible ARIA name of the component.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", "type": { - "text": "boolean" - }, - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" + "text": "string | undefined" } }, { - "description": "Determines whether the component is displayed as disabled.", + "description": "Receives id(or many ids) of the elements that label the input.", + "name": "accessible-name-ref", + "default": "undefined", + "fieldName": "accessibleNameRef", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is completely noninteractive.", "name": "disabled", "default": "false", "fieldName": "disabled", "type": { "text": "boolean" - }, - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" } }, { - "description": "Determines whether the component is displayed as read-only.", - "name": "readonly", - "default": "false", - "fieldName": "readonly", + "description": "Defines the filter type of the component.", + "name": "filter", + "default": "\"None\"", + "fieldName": "filter", "type": { - "text": "boolean" - }, - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" + "text": "\"None\" | \"StartsWithPerTerm\" | \"StartsWith\" | \"Contains\"" } }, { - "description": "Defines a short hint, intended to aid the user with data entry when the\ncomponent has no value.\n\n**Note:** When no placeholder is set, the format pattern is displayed as a placeholder.\nPassing an empty string as the value of this property will make the component appear empty - without placeholder or format pattern.", - "name": "placeholder", + "description": "Sets the maximum number of characters available in the input field.\n\n**Note:** This property is not compatible with the ui5-input type InputType.Number. If the ui5-input type is set to Number, the maxlength value is ignored.", + "name": "maxlength", "default": "undefined", - "fieldName": "placeholder", + "fieldName": "maxlength", "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" + "text": "number | undefined" } }, { @@ -8253,375 +7746,186 @@ "fieldName": "name", "type": { "text": "string | undefined" - }, - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" } }, { - "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.", - "name": "hide-week-numbers", + "description": "Defines whether the value will be autcompleted to match an item", + "name": "no-typeahead", "default": "false", - "fieldName": "hideWeekNumbers", + "fieldName": "noTypeahead", "type": { "text": "boolean" - }, - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" } }, { - "description": "Defines the open or closed state of the popover.", + "description": "Defines whether the suggestions picker is open.\nThe picker will not open if the `showSuggestions` property is set to `false`, the input is disabled or the input is readonly.\nThe picker will close automatically and `close` event will be fired if the input is not in the viewport.", "name": "open", "default": "false", "fieldName": "open", "type": { "text": "boolean" - }, - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" } }, { - "description": "Defines the aria-label attribute for the component.", - "name": "accessible-name", + "description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.", + "name": "placeholder", "default": "undefined", - "fieldName": "accessibleName", + "fieldName": "placeholder", "type": { "text": "string | undefined" - }, - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" } }, { - "description": "Receives id(or many ids) of the elements that label the component.", - "name": "accessible-name-ref", - "default": "undefined", - "fieldName": "accessibleNameRef", + "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.", + "name": "readonly", + "default": "false", + "fieldName": "readonly", "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" + "text": "boolean" } }, { - "description": "Defines the accessible description of the component.", - "name": "accessible-description", - "default": "undefined", - "fieldName": "accessibleDescription", + "description": "Defines whether the component is required.", + "name": "required", + "default": "false", + "fieldName": "required", "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" + "text": "boolean" } }, { - "description": "Receives id(or many ids) of the elements that describe the input.", - "name": "accessible-description-ref", - "default": "undefined", - "fieldName": "accessibleDescriptionRef", + "description": "Defines whether the clear icon of the input will be shown.", + "name": "show-clear-icon", + "default": "false", + "fieldName": "showClearIcon", "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" + "text": "boolean" } }, { - "description": "Currently selected date represented as a Local JavaScript Date instance.\nNote: this getter can only be reliably used after the component is fully defined. Use dateValueAsync which resolves only when this condition is met.", - "name": "date-value", - "default": "null", - "fieldName": "dateValue", + "description": "Defines whether the component should show suggestions, if such are present.", + "name": "show-suggestions", + "default": "false", + "fieldName": "showSuggestions", "type": { - "text": "any" - }, - "deprecated": "Use dateValueAsync instead", - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" + "text": "boolean" } }, { - "description": "Promise that resolves to the currently selected date represented as a Local JavaScript Date instance.", - "name": "date-value-async", - "default": "Promise", - "fieldName": "dateValueAsync", + "description": "Defines the HTML type of the component.\n\n**Notes:**\n\n- The particular effect of this property differs depending on the browser\nand the current language settings, especially for type `Number`.\n- The property is mostly intended to be used with touch devices\nthat use different soft keyboard layouts depending on the given input type.", + "name": "type", + "default": "\"Text\"", + "fieldName": "type", "type": { - "text": "any" - }, - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" + "text": "\"Text\" | \"Email\" | \"Number\" | \"Password\" | \"Tel\" | \"URL\" | \"Search\"" } }, { - "description": "Sets a calendar type used for display.\nIf not set, the calendar type of the global configuration is used.", - "name": "primary-calendar-type", - "default": "undefined", - "fieldName": "primaryCalendarType", + "description": "Defines the value of the component.\n\n**Note:** The property is updated upon typing.", + "name": "value", + "default": "\"\"", + "fieldName": "value", "type": { - "text": "\"Gregorian\" | \"Islamic\" | \"Japanese\" | \"Buddhist\" | \"Persian\" | undefined" - }, - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" + "text": "string" } }, { - "description": "Defines the secondary calendar type.\nIf not set, the calendar will only show the primary calendar type.", - "name": "secondary-calendar-type", - "default": "undefined", - "fieldName": "secondaryCalendarType", + "description": "Defines the value state of the component.", + "name": "value-state", + "default": "\"None\"", + "fieldName": "valueState", "type": { - "text": "\"Gregorian\" | \"Islamic\" | \"Japanese\" | \"Buddhist\" | \"Persian\" | undefined" - }, - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" } - }, + } + ], + "events": [ { - "description": "Determines the format, displayed in the input field.", - "name": "format-pattern", - "default": "undefined", - "fieldName": "formatPattern", + "name": "change", + "_ui5privacy": "public", "type": { - "text": "string | undefined" + "text": "CustomEvent" }, - "deprecated": "Use displayFormat and valueFormat instead", - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" - } - }, - { - "description": "Determines the format, displayed in the input field.", - "name": "display-format", - "default": "undefined", - "fieldName": "displayFormat", - "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" - } - }, - { - "description": "Determines the format, used for the value attribute.", - "name": "value-format", - "default": "undefined", - "fieldName": "valueFormat", - "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" - } + "description": "Fired when the input operation has finished by pressing Enter or on focusout.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true }, { - "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).", - "name": "min-date", - "default": "\"\"", - "fieldName": "minDate", + "name": "close", + "_ui5privacy": "public", "type": { - "text": "string" + "text": "CustomEvent" }, - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" - } + "description": "Fired when the suggestions picker is closed.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": false, + "_ui5since": "2.0.0" }, { - "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).", - "name": "max-date", - "default": "\"\"", - "fieldName": "maxDate", + "name": "input", + "_ui5privacy": "public", "type": { - "text": "string" + "text": "CustomEvent" }, - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" - } + "description": "Fired when the value of the component changes at each keystroke,\nand when a suggestion item has been selected.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true }, { - "description": "Defines how to calculate calendar weeks and first day of the week.\nIf not set, the calendar will be displayed according to the currently set global configuration.", - "name": "calendar-week-numbering", - "default": "\"Default\"", - "fieldName": "calendarWeekNumbering", - "type": { - "text": "\"Default\" | \"ISO_8601\" | \"MiddleEastern\" | \"WesternTraditional\"" - }, - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" - } - } - ], - "events": [ - { - "name": "change", + "name": "open", "_ui5privacy": "public", "type": { - "text": "CustomEvent<DatePickerChangeEventDetail>", - "references": [ - { - "name": "DatePickerChangeEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/DatePicker.js" - } - ] + "text": "CustomEvent" }, - "description": "Fired when the input operation has finished by pressing Enter or on focusout.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, + "description": "Fired when the suggestions picker is open.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, "_ui5Bubbles": true, - "_ui5parameters": [ - { - "type": { - "text": "string" - }, - "name": "value", - "_ui5privacy": "public", - "description": "The submitted value." - }, - { - "type": { - "text": "boolean" - }, - "name": "valid", - "_ui5privacy": "public", - "description": "Indicator if the value is in correct format pattern and in valid range." - } - ], - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } + "_ui5since": "2.0.0" }, { - "name": "input", + "name": "select", "_ui5privacy": "public", "type": { - "text": "CustomEvent<DatePickerInputEventDetail>", - "references": [ - { - "name": "DatePickerInputEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/DatePicker.js" - } - ] + "text": "CustomEvent" }, - "description": "Fired when the value of the component is changed at each key stroke.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, + "description": "Fired when some text has been selected.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, "_ui5Bubbles": true, - "_ui5parameters": [ - { - "type": { - "text": "string" - }, - "name": "value", - "_ui5privacy": "public", - "description": "The submitted value." - }, - { - "type": { - "text": "boolean" - }, - "name": "valid", - "_ui5privacy": "public", - "description": "Indicator if the value is in correct format pattern and in valid range." - } - ], - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } + "_ui5since": "2.0.0" }, { - "name": "value-state-change", + "name": "selection-change", "_ui5privacy": "public", "type": { - "text": "CustomEvent<DatePickerValueStateChangeEventDetail>", + "text": "CustomEvent<InputSelectionChangeEventDetail>", "references": [ { - "name": "DatePickerValueStateChangeEventDetail", + "name": "InputSelectionChangeEventDetail", "package": "@ui5/webcomponents", - "module": "dist/DatePicker.js" + "module": "dist/Input.js" } ] }, - "description": "Fired before the value state of the component is updated internally.\nThe event is preventable, meaning that if it's default action is\nprevented, the component will not update the value state.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, + "description": "Fired when the user navigates to a suggestion item via the ARROW keys,\nas a preview, before the final selection.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, "_ui5Bubbles": true, + "_ui5since": "2.0.0", "_ui5parameters": [ { "type": { - "text": "string" - }, - "name": "valueState", - "_ui5privacy": "public", - "description": "The new `valueState` that will be set." - }, - { - "type": { - "text": "boolean" + "text": "HTMLElement" }, - "name": "valid", + "name": "item", "_ui5privacy": "public", - "description": "Indicator if the value is in correct format pattern and in valid range." + "description": "The previewed suggestion item." } - ], - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } - }, - { - "name": "open", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired after the component's picker is opened.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": false, - "_ui5since": "2.4.0", - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } - }, - { - "name": "close", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired after the component's picker is closed.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": false, - "_ui5since": "2.4.0", - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } + ] } ] } @@ -8631,710 +7935,805 @@ "kind": "js", "name": "default", "declaration": { - "name": "DateTimePicker", - "module": "dist/DateTimePicker.js" + "name": "DateTimeInput", + "module": "dist/DateTimeInput.js" } }, { "kind": "custom-element-definition", - "name": "ui5-datetime-picker", - "declaration": { - "name": "DateTimePicker", - "module": "dist/DateTimePicker.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/DayPicker.js", - "declarations": [], - "exports": [ - { - "kind": "js", - "name": "default", + "name": "ui5-datetime-input", "declaration": { - "name": "DayPicker", - "module": "dist/DayPicker.js" + "name": "DateTimeInput", + "module": "dist/DateTimeInput.js" } } ] }, { "kind": "javascript-module", - "path": "dist/Dialog.js", + "path": "dist/DateTimePicker.js", "declarations": [ { "kind": "class", - "description": "### Overview\nThe `ui5-dialog` component is used to temporarily display some information in a\nsize-limited window in front of the regular app screen.\nIt is used to prompt the user for an action or a confirmation.\nThe `ui5-dialog` interrupts the current app processing as it is the only focused UI element and\nthe main screen is dimmed/blocked.\nThe dialog combines concepts known from other technologies where the windows have\nnames such as dialog box, dialog window, pop-up, pop-up window, alert box, or message box.\n\nThe `ui5-dialog` is modal, which means that a user action is required before it is possible to return to the parent window.\nTo open multiple dialogs, each dialog element should be separate in the markup. This will ensure the correct modal behavior. Avoid nesting dialogs within each other.\nThe content of the `ui5-dialog` is fully customizable.\n\n### Structure\nA `ui5-dialog` consists of a header, content, and a footer for action buttons.\nThe `ui5-dialog` is usually displayed at the center of the screen.\nIts position can be changed by the user. To enable this, you need to set the property `draggable` accordingly.\n\n\n### Responsive Behavior\nThe `stretch` property can be used to stretch the `ui5-dialog` to full screen. For better usability, it's recommended to stretch the dialog to full screen on phone devices.\n\n**Note:** When a `ui5-bar` is used in the header or in the footer, you should remove the default dialog's paddings.\n\nFor more information see the sample \"Bar in Header/Footer\".\n\n### Keyboard Handling\n\n#### Basic Navigation\nWhen the `ui5-dialog` has the `draggable` property set to `true` and the header is focused, the user can move the dialog\nwith the following keyboard shortcuts:\n\n- [Up] or [Down] arrow keys - Move the dialog up/down.\n- [Left] or [Right] arrow keys - Move the dialog left/right.\n\n#### Resizing\nWhen the `ui5-dialog` has the `resizable` property set to `true` and the header is focused, the user can change the size of the dialog\nwith the following keyboard shortcuts:\n\n- [Shift] + [Up] or [Down] - Decrease/Increase the height of the dialog.\n- [Shift] + [Left] or [Right] - Decrease/Increase the width of the dialog.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Dialog\";`", - "name": "Dialog", - "cssParts": [ - { - "description": "Used to style the header of the component", - "name": "header" - }, - { - "description": "Used to style the content of the component", - "name": "content" - }, - { - "description": "Used to style the footer of the component", - "name": "footer" - } - ], - "slots": [ - { - "name": "header", - "description": "Defines the header HTML Element.\n\n**Note:** When a `ui5-bar` is used in the header, you should remove the default dialog's paddings.\n\n**Note:** If `header` slot is provided, the labelling of the dialog is a responsibility of the application developer.\n`accessibleName` should be used.", - "_ui5type": { - "text": "Array<HTMLElement>" - }, - "_ui5privacy": "public" - }, - { - "name": "footer", - "description": "Defines the footer HTML Element.\n\n**Note:** When a `ui5-bar` is used in the footer, you should remove the default dialog's paddings.", - "_ui5type": { - "text": "Array<HTMLElement>" - }, - "_ui5privacy": "public" - }, - { - "name": "default", - "description": "Defines the content of the Popup.", - "_ui5propertyName": "content", - "_ui5type": { - "text": "Array<HTMLElement>" - }, - "_ui5privacy": "public", - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } - } - ], + "description": "### Overview\nThe `DateTimePicker` component alows users to select both date (day, month and year) and time (hours, minutes and seconds)\nand for the purpose it consists of input field and Date/Time picker.\n\n### Usage\n\nUse the `DateTimePicker` if you need a combined date and time input component.\nDon't use it if you want to use either date, or time value.\nIn this case, use the `DatePicker` or the `TimePicker` components instead.\n\nThe user can set date/time by:\n\n- using the calendar and the time selectors\n- typing in the input field\n\nProgrammatically, to set date/time for the `DateTimePicker`, use the `value` property\n\n### Formatting\n\nThe value entered by typing into the input field must fit to the used date/time 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](https://unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table).\n\n**Example:** the following format `dd/MM/yyyy, hh:mm:ss aa`\ncorresponds the `13/04/2020, 03:16:16 AM` value.\n\nThe small 'h' defines \"12\" hours format and the \"aa\" symbols - \"AM/PM\" time periods.\n\n**Example:** the following format `dd/MM/yyyy, HH:mm:ss`\ncorresponds the `13/04/2020, 15:16:16` value.\n\nThe capital 'H' indicates \"24\" hours format.\n\n**Note:** If the `formatPattern` does NOT include time,\nthe `DateTimePicker` will fallback to the default time format according to the locale.\n\n**Note:** If no placeholder is set to the `DateTimePicker`,\nthe current `formatPattern` is displayed as a placeholder.\nIf another placeholder is needed, it must be set or in case no placeholder is needed - it can be set to an empty string.\n\n**Note:** If the user input does NOT match the `formatPattern`,\nthe `DateTimePicker` makes an attempt to parse it based on the\nlocale settings.\n\n### Responsive behavior\n\nThe `DateTimePicker` is responsive and fully adapts to all devices.\nFor larger screens, such as tablet or desktop, it is displayed as a popover, while\non phone devices, it is displayed full screen.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/DateTimePicker.js\";`", + "name": "DateTimePicker", "members": [ { "kind": "field", - "name": "headerText", + "name": "accessibleDescription", "type": { "text": "string | undefined" }, - "description": "Defines the header text.\n\n**Note:** If `header` slot is provided, the `headerText` is ignored.", + "description": "Defines the accessible description of the component.", "default": "undefined", - "privacy": "public" + "privacy": "public", + "_ui5since": "2.14.0" }, { "kind": "field", - "name": "stretch", + "name": "accessibleDescriptionRef", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Determines if the dialog will be stretched to full screen on mobile. On desktop,\nthe dialog will be stretched to approximately 90% of the viewport.\n\n**Note:** For better usability of the component it is recommended to set this property to \"true\" when the dialog is opened on phone.", - "privacy": "public" + "description": "Receives id(or many ids) of the elements that describe the input.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.14.0" }, { "kind": "field", - "name": "draggable", + "name": "accessibleName", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Determines whether the component is draggable.\nIf this property is set to true, the Dialog will be draggable by its header.\n\n**Note:** The component can be draggable only in desktop mode.\n\n**Note:** This property overrides the default HTML \"draggable\" attribute native behavior.\nWhen \"draggable\" is set to true, the native browser \"draggable\"\nbehavior is prevented and only the Dialog custom logic (\"draggable by its header\") works.", + "description": "Defines the aria-label attribute for the component.", + "default": "undefined", "privacy": "public", - "_ui5since": "1.0.0-rc.9" + "_ui5since": "1.0.0-rc.15" }, { "kind": "field", - "name": "resizable", + "name": "accessibleNameRef", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Configures the component to be resizable.\nIf this property is set to true, the Dialog will have a resize handle in its bottom right corner in LTR languages.\nIn RTL languages, the resize handle will be placed in the bottom left corner.\n\n**Note:** The component can be resizable only in desktop mode.\n\n**Note:** Upon resizing, externally defined height and width styling will be ignored.", + "description": "Receives id(or many ids) of the elements that label the component.", + "default": "undefined", "privacy": "public", - "_ui5since": "1.0.0-rc.10" + "_ui5since": "1.0.0-rc.15" }, { "kind": "field", - "name": "state", + "name": "calendarWeekNumbering", "type": { - "text": "ValueState", + "text": "CalendarWeekNumbering", "references": [ { - "name": "ValueState", - "package": "@ui5/webcomponents-base", - "module": "dist/types/ValueState.js" + "name": "CalendarWeekNumbering", + "package": "@ui5/webcomponents", + "module": "dist/types/CalendarWeekNumbering.js" } ] }, - "default": "\"None\"", - "description": "Defines the state of the `Dialog`.\n\n**Note:** If `\"Negative\"` and `\"Critical\"` states is set, it will change the\naccessibility role to \"alertdialog\", if the accessibleRole property is set to `\"Dialog\"`.", + "default": "\"Default\"", + "description": "Defines how to calculate calendar weeks and first day of the week.\nIf not set, the calendar will be displayed according to the currently set global configuration.", "privacy": "public", - "_ui5since": "1.0.0-rc.15" + "_ui5since": "2.2.0" }, { "kind": "field", - "name": "initialFocus", + "name": "dateValue", "type": { - "text": "string | undefined" + "text": "Date | null" }, - "description": "Defines the ID of the HTML Element, which will get the initial focus.\n\n**Note:** If an element with `autofocus` attribute is added inside the component,\n`initialFocus` won't take effect.", - "default": "undefined", + "description": "Currently selected date represented as a Local JavaScript Date instance.\nNote: this getter can only be reliably used after the component is fully defined. Use dateValueAsync which resolves only when this condition is met.", "privacy": "public", - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } + "default": "null", + "deprecated": "Use dateValueAsync instead", + "readonly": true }, { "kind": "field", - "name": "preventFocusRestore", + "name": "dateValueAsync", "type": { - "text": "boolean" + "text": "Promise<Date | null>" }, - "default": "false", - "description": "Defines if the focus should be returned to the previously focused element,\nwhen the popup closes.", + "description": "Promise that resolves to the currently selected date represented as a Local JavaScript Date instance.", "privacy": "public", - "_ui5since": "1.0.0-rc.8", - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } + "default": "Promise", + "readonly": true }, { "kind": "field", - "name": "accessibleName", + "name": "disabled", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Defines the accessible name of the component.", - "default": "undefined", - "privacy": "public", - "_ui5since": "1.0.0-rc.15", - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } + "default": "false", + "description": "Determines whether the component is displayed as disabled.", + "privacy": "public" }, { "kind": "field", - "name": "accessibleNameRef", + "name": "displayFormat", "type": { "text": "string | undefined" }, - "description": "Defines the IDs of the elements that label the component.", + "description": "Determines the format, displayed in the input field.", "default": "undefined", "privacy": "public", - "_ui5since": "1.1.0", - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } - }, - { - "kind": "field", - "name": "accessibleRole", - "type": { - "text": "PopupAccessibleRole", - "references": [ - { - "name": "PopupAccessibleRole", - "package": "@ui5/webcomponents", - "module": "dist/types/PopupAccessibleRole.js" - } - ] - }, - "default": "\"Dialog\"", - "description": "Allows setting a custom role.", - "privacy": "public", - "_ui5since": "1.10.0", - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } + "_ui5since": "2.14.0" }, { "kind": "field", - "name": "accessibleDescription", + "name": "formatPattern", "type": { "text": "string | undefined" }, - "description": "Defines the accessible description of the component.", + "description": "Determines the format, displayed in the input field.", "default": "undefined", - "privacy": "public", - "_ui5since": "2.11.0", - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } + "deprecated": "Use displayFormat and valueFormat instead", + "privacy": "public" }, { - "kind": "field", - "name": "accessibleDescriptionRef", - "type": { - "text": "string | undefined" + "kind": "method", + "name": "formatValue", + "return": { + "type": { + "text": "string" + }, + "description": "The date as string" }, - "description": "Receives id(or many ids) of the elements that describe the component.", - "default": "undefined", - "privacy": "public", - "_ui5since": "2.11.0", - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } + "parameters": [ + { + "name": "date", + "type": { + "text": "Date" + }, + "description": "A Java Script date object to be formatted as string", + "_ui5privacy": "public" + } + ], + "description": "Formats a Java Script date object into a string representing a locale date\naccording to the `formatPattern` property of the DatePicker instance", + "privacy": "public" }, { "kind": "field", - "name": "preventInitialFocus", + "name": "hideWeekNumbers", "type": { "text": "boolean" }, "default": "false", - "description": "Indicates whether initial focus should be prevented.", + "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.", "privacy": "public", - "_ui5since": "2.0.0", - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } + "_ui5since": "1.0.0-rc.8" }, { - "kind": "field", - "name": "open", - "description": "Indicates if the element is open", - "privacy": "public", - "default": "false", - "type": { - "text": "boolean" + "kind": "method", + "name": "isInValidRange", + "return": { + "type": { + "text": "boolean" + } }, - "_ui5since": "1.2.0", - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } + "parameters": [ + { + "name": "value", + "type": { + "text": "string" + }, + "description": "A value to be checked", + "_ui5privacy": "public" + } + ], + "description": "Checks if a date is between the minimum and maximum date.", + "privacy": "public" }, { "kind": "method", - "name": "applyFocus", + "name": "isValid", "return": { "type": { - "text": "Promise<void>" - }, - "description": "Promise that resolves when the focus is applied" + "text": "boolean" + } }, - "description": "Focuses the element denoted by `initialFocus`, if provided,\nor the first focusable element otherwise.", + "parameters": [ + { + "name": "value", + "type": { + "text": "string" + }, + "description": "A value to be tested against the current date format", + "_ui5privacy": "public" + } + ], + "description": "Checks if a value is valid against the current date format of the DatePicker.", "privacy": "public", - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } - } - ], - "attributes": [ - { - "description": "Defines the header text.\n\n**Note:** If `header` slot is provided, the `headerText` is ignored.", - "name": "header-text", - "default": "undefined", - "fieldName": "headerText", - "type": { - "text": "string | undefined" - } + "deprecated": "Use isValidValue or isValidDisplayValue instead" }, { - "description": "Determines if the dialog will be stretched to full screen on mobile. On desktop,\nthe dialog will be stretched to approximately 90% of the viewport.\n\n**Note:** For better usability of the component it is recommended to set this property to \"true\" when the dialog is opened on phone.", - "name": "stretch", - "default": "false", - "fieldName": "stretch", - "type": { - "text": "boolean" - } + "kind": "method", + "name": "isValidDisplayValue", + "return": { + "type": { + "text": "boolean" + } + }, + "parameters": [ + { + "name": "value", + "type": { + "text": "string" + }, + "description": "A value to be tested against the current date format", + "_ui5privacy": "public" + } + ], + "description": "Checks if a value is valid against the current date format of the DatePicker.", + "privacy": "public" }, { - "description": "Determines whether the component is draggable.\nIf this property is set to true, the Dialog will be draggable by its header.\n\n**Note:** The component can be draggable only in desktop mode.\n\n**Note:** This property overrides the default HTML \"draggable\" attribute native behavior.\nWhen \"draggable\" is set to true, the native browser \"draggable\"\nbehavior is prevented and only the Dialog custom logic (\"draggable by its header\") works.", - "name": "draggable", - "default": "false", - "fieldName": "draggable", - "type": { - "text": "boolean" - } - }, + "kind": "method", + "name": "isValidValue", + "return": { + "type": { + "text": "boolean" + } + }, + "parameters": [ + { + "name": "value", + "type": { + "text": "string" + }, + "description": "A value to be tested against the current date format", + "_ui5privacy": "public" + } + ], + "description": "Checks if a value is valid against the current date format of the DatePicker.", + "privacy": "public" + }, { - "description": "Configures the component to be resizable.\nIf this property is set to true, the Dialog will have a resize handle in its bottom right corner in LTR languages.\nIn RTL languages, the resize handle will be placed in the bottom left corner.\n\n**Note:** The component can be resizable only in desktop mode.\n\n**Note:** Upon resizing, externally defined height and width styling will be ignored.", - "name": "resizable", - "default": "false", - "fieldName": "resizable", + "kind": "field", + "name": "maxDate", "type": { - "text": "boolean" - } + "text": "string" + }, + "default": "\"\"", + "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).", + "privacy": "public", + "_ui5since": "1.0.0-rc.6" }, { - "description": "Defines the state of the `Dialog`.\n\n**Note:** If `\"Negative\"` and `\"Critical\"` states is set, it will change the\naccessibility role to \"alertdialog\", if the accessibleRole property is set to `\"Dialog\"`.", - "name": "state", - "default": "\"None\"", - "fieldName": "state", + "kind": "field", + "name": "minDate", "type": { - "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" - } + "text": "string" + }, + "default": "\"\"", + "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).", + "privacy": "public", + "_ui5since": "1.0.0-rc.6" }, { - "description": "Defines the ID of the HTML Element, which will get the initial focus.\n\n**Note:** If an element with `autofocus` attribute is added inside the component,\n`initialFocus` won't take effect.", - "name": "initial-focus", + "kind": "field", + "name": "name", + "type": { + "text": "string | undefined" + }, + "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", "default": "undefined", - "fieldName": "initialFocus", + "privacy": "public" + }, + { + "kind": "field", + "name": "open", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines the open or closed state of the popover.", + "privacy": "public", + "_ui5since": "2.0.0" + }, + { + "kind": "field", + "name": "placeholder", "type": { "text": "string | undefined" }, - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } + "description": "Defines a short hint, intended to aid the user with data entry when the\ncomponent has no value.\n\n**Note:** When no placeholder is set, the format pattern is displayed as a placeholder.\nPassing an empty string as the value of this property will make the component appear empty - without placeholder or format pattern.", + "default": "undefined", + "privacy": "public" }, { - "description": "Defines if the focus should be returned to the previously focused element,\nwhen the popup closes.", - "name": "prevent-focus-restore", + "kind": "field", + "name": "primaryCalendarType", + "type": { + "text": "CalendarType | undefined", + "references": [ + { + "name": "CalendarType", + "package": "@ui5/webcomponents-base", + "module": "dist/types/CalendarType.js" + } + ] + }, + "description": "Sets a calendar type used for display.\nIf not set, the calendar type of the global configuration is used.", + "default": "undefined", + "privacy": "public" + }, + { + "kind": "field", + "name": "readonly", + "type": { + "text": "boolean" + }, "default": "false", - "fieldName": "preventFocusRestore", + "description": "Determines whether the component is displayed as read-only.", + "privacy": "public" + }, + { + "kind": "field", + "name": "required", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the component is required.", + "privacy": "public", + "_ui5since": "1.0.0-rc.9" + }, + { + "kind": "field", + "name": "secondaryCalendarType", + "type": { + "text": "CalendarType | undefined", + "references": [ + { + "name": "CalendarType", + "package": "@ui5/webcomponents-base", + "module": "dist/types/CalendarType.js" + } + ] + }, + "description": "Defines the secondary calendar type.\nIf not set, the calendar will only show the primary calendar type.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.0.0-rc.16" + }, + { + "kind": "field", + "name": "showClearIcon", "type": { "text": "boolean" }, - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" + "default": "false", + "description": "Defines whether the clear icon of the input will be shown.", + "privacy": "public", + "_ui5since": "2.20.0" + }, + { + "kind": "field", + "name": "value", + "type": { + "text": "string" + }, + "default": "\"\"", + "description": "Defines a formatted date value.", + "privacy": "public", + "_ui5formProperty": true, + "_ui5formEvents": "change,input" + }, + { + "kind": "field", + "name": "valueFormat", + "type": { + "text": "string | undefined" + }, + "description": "Determines the format, used for the value attribute.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.14.0" + }, + { + "kind": "field", + "name": "valueState", + "type": { + "text": "ValueState", + "references": [ + { + "name": "ValueState", + "package": "@ui5/webcomponents-base", + "module": "dist/types/ValueState.js" + } + ] + }, + "default": "\"None\"", + "description": "Defines the value state of the component.", + "privacy": "public" + } + ], + "superclass": { + "name": "DatePicker", + "package": "@ui5/webcomponents", + "module": "dist/DatePicker.js" + }, + "tagName": "ui5-datetime-picker", + "customElement": true, + "_ui5since": "1.0.0-rc.7", + "_ui5privacy": "public", + "slots": [ + { + "name": "valueStateMessage", + "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 component is in `Information`, `Critical` or `Negative` value state.", + "_ui5since": "1.0.0-rc.7", + "_ui5type": { + "text": "Array<HTMLElement>" + }, + "_ui5privacy": "public" + } + ], + "cssParts": [ + { + "description": "Used to style the input element. This part is forwarded to the underlying ui5-input element.", + "name": "input" + } + ], + "attributes": [ + { + "description": "Defines the accessible description of the component.", + "name": "accessible-description", + "default": "undefined", + "fieldName": "accessibleDescription", + "type": { + "text": "string | undefined" } }, { - "description": "Defines the accessible name of the component.", + "description": "Receives id(or many ids) of the elements that describe the input.", + "name": "accessible-description-ref", + "default": "undefined", + "fieldName": "accessibleDescriptionRef", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the aria-label attribute for the component.", "name": "accessible-name", "default": "undefined", "fieldName": "accessibleName", "type": { "text": "string | undefined" - }, - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" } }, { - "description": "Defines the IDs of the elements that label the component.", + "description": "Receives id(or many ids) of the elements that label the component.", "name": "accessible-name-ref", "default": "undefined", "fieldName": "accessibleNameRef", "type": { "text": "string | undefined" - }, - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" } }, { - "description": "Allows setting a custom role.", - "name": "accessible-role", - "default": "\"Dialog\"", - "fieldName": "accessibleRole", + "description": "Defines how to calculate calendar weeks and first day of the week.\nIf not set, the calendar will be displayed according to the currently set global configuration.", + "name": "calendar-week-numbering", + "default": "\"Default\"", + "fieldName": "calendarWeekNumbering", "type": { - "text": "\"None\" | \"Dialog\" | \"AlertDialog\"" + "text": "\"Default\" | \"ISO_8601\" | \"MiddleEastern\" | \"WesternTraditional\"" + } + }, + { + "description": "Currently selected date represented as a Local JavaScript Date instance.\nNote: this getter can only be reliably used after the component is fully defined. Use dateValueAsync which resolves only when this condition is met.", + "name": "date-value", + "default": "null", + "fieldName": "dateValue", + "type": { + "text": "any" }, - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" + "deprecated": "Use dateValueAsync instead" + }, + { + "description": "Promise that resolves to the currently selected date represented as a Local JavaScript Date instance.", + "name": "date-value-async", + "default": "Promise", + "fieldName": "dateValueAsync", + "type": { + "text": "any" } }, { - "description": "Defines the accessible description of the component.", - "name": "accessible-description", + "description": "Determines whether the component is displayed as disabled.", + "name": "disabled", + "default": "false", + "fieldName": "disabled", + "type": { + "text": "boolean" + } + }, + { + "description": "Determines the format, displayed in the input field.", + "name": "display-format", "default": "undefined", - "fieldName": "accessibleDescription", + "fieldName": "displayFormat", "type": { "text": "string | undefined" - }, - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" } }, { - "description": "Receives id(or many ids) of the elements that describe the component.", - "name": "accessible-description-ref", + "description": "Determines the format, displayed in the input field.", + "name": "format-pattern", "default": "undefined", - "fieldName": "accessibleDescriptionRef", + "fieldName": "formatPattern", "type": { "text": "string | undefined" }, - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } + "deprecated": "Use displayFormat and valueFormat instead" }, { - "description": "Indicates whether initial focus should be prevented.", - "name": "prevent-initial-focus", + "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.", + "name": "hide-week-numbers", "default": "false", - "fieldName": "preventInitialFocus", + "fieldName": "hideWeekNumbers", "type": { "text": "boolean" - }, - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" } }, { - "description": "Indicates if the element is open", + "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).", + "name": "max-date", + "default": "\"\"", + "fieldName": "maxDate", + "type": { + "text": "string" + } + }, + { + "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).", + "name": "min-date", + "default": "\"\"", + "fieldName": "minDate", + "type": { + "text": "string" + } + }, + { + "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", + "name": "name", + "default": "undefined", + "fieldName": "name", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the open or closed state of the popover.", "name": "open", "default": "false", "fieldName": "open", "type": { - "text": "any" - }, - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" + "text": "boolean" + } + }, + { + "description": "Defines a short hint, intended to aid the user with data entry when the\ncomponent has no value.\n\n**Note:** When no placeholder is set, the format pattern is displayed as a placeholder.\nPassing an empty string as the value of this property will make the component appear empty - without placeholder or format pattern.", + "name": "placeholder", + "default": "undefined", + "fieldName": "placeholder", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Sets a calendar type used for display.\nIf not set, the calendar type of the global configuration is used.", + "name": "primary-calendar-type", + "default": "undefined", + "fieldName": "primaryCalendarType", + "type": { + "text": "\"Gregorian\" | \"Islamic\" | \"Japanese\" | \"Buddhist\" | \"Persian\" | undefined" + } + }, + { + "description": "Determines whether the component is displayed as read-only.", + "name": "readonly", + "default": "false", + "fieldName": "readonly", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines whether the component is required.", + "name": "required", + "default": "false", + "fieldName": "required", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines the secondary calendar type.\nIf not set, the calendar will only show the primary calendar type.", + "name": "secondary-calendar-type", + "default": "undefined", + "fieldName": "secondaryCalendarType", + "type": { + "text": "\"Gregorian\" | \"Islamic\" | \"Japanese\" | \"Buddhist\" | \"Persian\" | undefined" + } + }, + { + "description": "Defines whether the clear icon of the input will be shown.", + "name": "show-clear-icon", + "default": "false", + "fieldName": "showClearIcon", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines a formatted date value.", + "name": "value", + "default": "\"\"", + "fieldName": "value", + "type": { + "text": "string" + } + }, + { + "description": "Determines the format, used for the value attribute.", + "name": "value-format", + "default": "undefined", + "fieldName": "valueFormat", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the value state of the component.", + "name": "value-state", + "default": "\"None\"", + "fieldName": "valueState", + "type": { + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" } } ], - "superclass": { - "name": "Popup", - "package": "@ui5/webcomponents", - "module": "dist/Popup.js" - }, - "tagName": "ui5-dialog", - "customElement": true, - "_ui5privacy": "public", "events": [ { - "name": "before-open", + "name": "change", "_ui5privacy": "public", "type": { - "text": "CustomEvent" + "text": "CustomEvent<DatePickerChangeEventDetail>", + "references": [ + { + "name": "DatePickerChangeEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/DatePicker.js" + } + ] }, - "description": "Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening.", + "description": "Fired when the input operation has finished by pressing Enter or on focusout.", "_ui5Cancelable": true, "_ui5allowPreventDefault": true, - "_ui5Bubbles": false, - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } + "_ui5Bubbles": true, + "_ui5parameters": [ + { + "type": { + "text": "boolean" + }, + "name": "valid", + "_ui5privacy": "public", + "description": "Indicator if the value is in correct format pattern and in valid range." + }, + { + "type": { + "text": "string" + }, + "name": "value", + "_ui5privacy": "public", + "description": "The submitted value." + } + ] }, { - "name": "open", + "name": "close", "_ui5privacy": "public", "type": { "text": "CustomEvent" }, - "description": "Fired after the component is opened.", + "description": "Fired after the component's picker is closed.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, "_ui5Bubbles": false, - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } + "_ui5since": "2.4.0" }, { - "name": "before-close", + "name": "input", "_ui5privacy": "public", "type": { - "text": "CustomEvent<PopupBeforeCloseEventDetail>", + "text": "CustomEvent<DatePickerInputEventDetail>", "references": [ { - "name": "PopupBeforeCloseEventDetail", + "name": "DatePickerInputEventDetail", "package": "@ui5/webcomponents", - "module": "dist/Popup.js" + "module": "dist/DatePicker.js" } ] }, - "description": "Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing.", + "description": "Fired when the value of the component is changed at each key stroke.", "_ui5Cancelable": true, "_ui5allowPreventDefault": true, - "_ui5Bubbles": false, + "_ui5Bubbles": true, "_ui5parameters": [ { "type": { "text": "boolean" }, - "name": "escPressed", + "name": "valid", "_ui5privacy": "public", - "description": "Indicates that `ESC` key has triggered the event." + "description": "Indicator if the value is in correct format pattern and in valid range." + }, + { + "type": { + "text": "string" + }, + "name": "value", + "_ui5privacy": "public", + "description": "The submitted value." } - ], - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } + ] }, { - "name": "close", + "name": "open", "_ui5privacy": "public", "type": { "text": "CustomEvent" }, - "description": "Fired after the component is closed.", + "description": "Fired after the component's picker is opened.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, "_ui5Bubbles": false, - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } - } - ] - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "Dialog", - "module": "dist/Dialog.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-dialog", - "declaration": { - "name": "Dialog", - "module": "dist/Dialog.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/DropIndicator.js", - "declarations": [], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "DropIndicator", - "module": "dist/DropIndicator.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/DynamicDateRange.js", - "declarations": [ - { - "kind": "interface", - "name": "IDynamicDateRangeOption", - "description": "Represents a dynamic date range option used by the `ui5-dynamic-date-range` component.\n\nRepresents a dynamic date range option used for handling dynamic date ranges.\nThis interface defines the structure and behavior required for implementing\ndynamic date range options, including formatting, parsing, validation, and\nconversion of date range values.\n\n * Properties:\n- `icon`: The icon associated with the dynamic date range option, typically used for UI representation.\n- `operator`: A unique operator identifying the dynamic date range option.\n- `text`: The display text for the dynamic date range option.\n- `template` (optional): A JSX template for rendering the dynamic date range option.\n\nMethods:\n- `format(value: DynamicDateRangeValue): string`: Formats the given dynamic date range value into a string representation.\n- `parse(value: string): DynamicDateRangeValue | undefined`: Parses a string into a dynamic date range value.\n- `toDates(value: DynamicDateRangeValue): Array<Date>`: Converts a dynamic date range value into an array of `Date` objects.\n- `handleSelectionChange?(event: CustomEvent): DynamicDateRangeValue | undefined`: (Optional) Handles selection changes in the UI of the dynamic date range option.\n- `isValidString(value: string): boolean`: Validates whether a given string is a valid representation of the dynamic date range value.", - "_ui5privacy": "public", - "_ui5since": "2.11.0" - }, - { - "kind": "class", - "description": "### Overview\n\nThe `ui5-dynamic-date-range` component provides a flexible interface to define date ranges using a combination of absolute dates, relative intervals, and preset ranges (e.g., \"Today\", \"Yesterday\", etc.).\nIt allows users to select a date range from a predefined set of options or enter custom dates.\n\n### Usage\n\nThe component is typically used in scenarios where users need to filter data based on date ranges, such as in reports, dashboards, or data analysis tools.\nIt can be used with the predefined options or extended with custom options to suit specific requirements. You can create your own options by extending the `IDynamicDateRangeOption` interface.\nEvery option should be registered using the `DynamicDateRange.register` method.\n\nIf needed, you can also create a range of dates based on specific option using the `toDates` method.\n\n### Standard Options\n\nThe component comes with a set of standard options, including:\n- \"TODAY\" - Represents the current date. An example value is `{ operator: \"TODAY\"}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/Today.js\";`\n- \"YESTERDAY\" - Represents the previous date. An example value is `{ operator: \"YESTERDAY\"}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/Yesterday.js\";`\n- \"TOMORROW\" - Represents the next date. An example value is `{ operator: \"TOMORROW\"}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/Tomorrow.js\";`\n- \"DATE\" - Represents a single date. An example value is `{ operator: \"DATE\", values: [new Date()]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/SingleDate.js\";`\n- \"DATERANGE\" - Represents a range of dates. An example value is `{ operator: \"DATERANGE\", values: [new Date(), new Date()]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/DateRange.js\";`\n- \"DATETIMERANGE\" - Represents a range of dates with times. An example value is `{ operator: \"DATETIMERANGE\", values: [new Date(), new Date()]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/DateTimeRange.js\";`\n- \"FROMDATETIME\" - Represents a range from date and time. An example value is `{ operator: \"FROMDATETIME\", values: [new Date()]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/FromDateTime.js\";`\n- \"TODATETIME\" - Represents a range to date and time. An example value is `{ operator: \"TODATETIME\", values: [new Date()]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/ToDateTime.js\";`\n- \"LASTDAYS\" - Represents Last X Days from today. An example value is `{ operator: \"LASTDAYS\", values: [2]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/LastOptions.js\";`\n- \"LASTWEEKS\" - Represents Last X Weeks from today. An example value is `{ operator: \"LASTWEEKS\", values: [3]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/LastOptions.js\";`\n- \"LASTMONTHS\" - Represents Last X Months from today. An example value is `{ operator: \"LASTMONTHS\", values: [6]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/LastOptions.js\";`\n- \"LASTQUARTERS\" - Represents Last X Quarters from today. An example value is `{ operator: \"LASTQUARTERS\", values: [2]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/LastOptions.js\";`\n- \"LASTYEARS\" - Represents Last X Years from today. An example value is `{ operator: \"LASTYEARS\", values: [1]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/LastOptions.js\";`\n- \"NEXTDAYS\" - Represents Next X Days from today. An example value is `{ operator: \"NEXTDAYS\", values: [2]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/NextOptions.js\";`\n- \"NEXTWEEKS\" - Represents Next X Weeks from today. An example value is `{ operator: \"NEXTWEEKS\", values: [3]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/NextOptions.js\";`\n- \"NEXTMONTHS\" - Represents Next X Months from today. An example value is `{ operator: \"NEXTMONTHS\", values: [6]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/NextOptions.js\";`\n- \"NEXTQUARTERS\" - Represents Next X Quarters from today. An example value is `{ operator: \"NEXTQUARTERS\", values: [2]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/NextOptions.js\";`\n- \"NEXTYEARS\" - Represents Next X Years from today. An example value is `{ operator: \"NEXTYEARS\", values: [1]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/NextOptions.js\";`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/DynamicDateRange.js\";`", - "name": "DynamicDateRange", - "members": [ + "_ui5since": "2.4.0" + }, { - "kind": "field", - "name": "value", + "name": "value-state-change", + "_ui5privacy": "public", "type": { - "text": "DynamicDateRangeValue | undefined", + "text": "CustomEvent<DatePickerValueStateChangeEventDetail>", "references": [ { - "name": "DynamicDateRangeValue", + "name": "DatePickerValueStateChangeEventDetail", "package": "@ui5/webcomponents", - "module": "dist/DynamicDateRange.js" + "module": "dist/DatePicker.js" } ] }, - "description": "Defines the value object.", - "default": "undefined", - "privacy": "public", - "_ui5noAttribute": true - }, - { - "kind": "field", - "name": "options", - "type": { - "text": "string" - }, - "default": "\"\"", - "description": "Defines the options listed as a string, separated by commas and using capital case.\nExample: \"TODAY, YESTERDAY, DATERANGE\"", - "privacy": "public" - }, - { - "kind": "method", - "name": "toDates", - "return": { - "type": { - "text": "Array<Date>" + "description": "Fired before the value state of the component is updated internally.\nThe event is preventable, meaning that if it's default action is\nprevented, the component will not update the value state.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true, + "_ui5parameters": [ + { + "type": { + "text": "boolean" + }, + "name": "valid", + "_ui5privacy": "public", + "description": "Indicator if the value is in correct format pattern and in valid range." }, - "description": "An array of two `Date` objects representing the start and end dates." - }, - "parameters": [ { - "name": "value", "type": { - "text": "DynamicDateRangeValue", - "references": [ - { - "name": "DynamicDateRangeValue", - "package": "@ui5/webcomponents", - "module": "dist/DynamicDateRange.js" - } - ] + "text": "string" }, - "description": "The option to convert into an array of date ranges", - "_ui5privacy": "public" + "name": "valueState", + "_ui5privacy": "public", + "description": "The new `valueState` that will be set." } - ], - "description": "Converts a `value` into concrete `startDate` and `endDate` JavaScript `Date` objects.", - "privacy": "public" - } - ], - "events": [ - { - "name": "change", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired when the input operation has finished by pressing Enter or on focusout or a value is selected in the popover.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": true - } - ], - "attributes": [ - { - "description": "Defines the value object.", - "name": "value", - "default": "undefined", - "fieldName": "value", - "type": { - "text": "DynamicDateRangeValue | undefined" - } - }, - { - "description": "Defines the options listed as a string, separated by commas and using capital case.\nExample: \"TODAY, YESTERDAY, DATERANGE\"", - "name": "options", - "default": "\"\"", - "fieldName": "options", - "type": { - "text": "string" - } + ] } - ], - "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" - }, - "tagName": "ui5-dynamic-date-range", - "customElement": true, - "_ui5since": "2.11.0", - "_ui5privacy": "public" + ] } ], "exports": [ @@ -9342,131 +8741,221 @@ "kind": "js", "name": "default", "declaration": { - "name": "DynamicDateRange", - "module": "dist/DynamicDateRange.js" + "name": "DateTimePicker", + "module": "dist/DateTimePicker.js" } }, { "kind": "custom-element-definition", - "name": "ui5-dynamic-date-range", + "name": "ui5-datetime-picker", "declaration": { - "name": "DynamicDateRange", - "module": "dist/DynamicDateRange.js" + "name": "DateTimePicker", + "module": "dist/DateTimePicker.js" } } ] }, { "kind": "javascript-module", - "path": "dist/ExpandableText.js", + "path": "dist/DayPicker.js", "declarations": [ { "kind": "class", - "description": "### Overview\n\nThe `ui5-expandable-text` component allows displaying a large body of text in a small space. It provides an \"expand/collapse\" functionality, which shows/hides potentially truncated text.\n\n### Usage\n\n#### When to use:\n- To accommodate long texts in limited space, for example in list items, table cell texts, or forms\n\n#### When not to use:\n- The content is critical for the user. In this case use short descriptions that can fit in\n- Strive to provide short and meaningful texts to avoid excessive number of \"Show More\" links on the page\n\n### Responsive Behavior\n\nOn phones, if the component is configured to display the full text in a popover, the popover will appear in full screen.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/ExpandableText\";`", - "name": "ExpandableText", + "description": "Represents the days inside a single month view of the `ui5-calendar` component.", + "name": "DayPicker", "members": [ { "kind": "field", - "name": "text", + "name": "calendarWeekNumbering", + "type": { + "text": "CalendarWeekNumbering", + "references": [ + { + "name": "CalendarWeekNumbering", + "package": "@ui5/webcomponents", + "module": "dist/types/CalendarWeekNumbering.js" + } + ] + }, + "default": "\"Default\"", + "description": "Defines how to calculate calendar weeks and first day of the week.\nIf not set, the calendar will be displayed according to the currently set global configuration.", + "privacy": "public", + "_ui5since": "2.2.0" + }, + { + "kind": "field", + "name": "displayFormat", "type": { "text": "string | undefined" }, - "description": "Text of the component.", + "description": "Determines the format, displayed in the input field.", "default": "undefined", - "privacy": "public" + "privacy": "public", + "_ui5since": "2.14.0" }, { "kind": "field", - "name": "maxCharacters", + "name": "formatPattern", "type": { - "text": "number" + "text": "string | undefined" }, - "default": "100", - "description": "Maximum number of characters to be displayed initially. If the text length exceeds this limit, the text will be truncated with an ellipsis, and the \"More\" link will be displayed.", + "description": "Determines the format, displayed in the input field.", + "default": "undefined", + "deprecated": "Use displayFormat and valueFormat instead", "privacy": "public" }, { "kind": "field", - "name": "overflowMode", + "name": "maxDate", "type": { - "text": "ExpandableTextOverflowMode", + "text": "string" + }, + "default": "\"\"", + "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).", + "privacy": "public", + "_ui5since": "1.0.0-rc.6" + }, + { + "kind": "field", + "name": "minDate", + "type": { + "text": "string" + }, + "default": "\"\"", + "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).", + "privacy": "public", + "_ui5since": "1.0.0-rc.6" + }, + { + "kind": "field", + "name": "primaryCalendarType", + "type": { + "text": "CalendarType | undefined", "references": [ { - "name": "ExpandableTextOverflowMode", - "package": "@ui5/webcomponents", - "module": "dist/types/ExpandableTextOverflowMode.js" + "name": "CalendarType", + "package": "@ui5/webcomponents-base", + "module": "dist/types/CalendarType.js" } ] }, - "default": "\"InPlace\"", - "description": "Determines how the full text will be displayed.", + "description": "Sets a calendar type used for display.\nIf not set, the calendar type of the global configuration is used.", + "default": "undefined", "privacy": "public" }, { "kind": "field", - "name": "emptyIndicatorMode", + "name": "secondaryCalendarType", "type": { - "text": "TextEmptyIndicatorMode", + "text": "CalendarType | undefined", "references": [ { - "name": "TextEmptyIndicatorMode", - "package": "@ui5/webcomponents", - "module": "dist/types/TextEmptyIndicatorMode.js" + "name": "CalendarType", + "package": "@ui5/webcomponents-base", + "module": "dist/types/CalendarType.js" } ] }, - "default": "\"Off\"", - "description": "Specifies if an empty indicator should be displayed when there is no text.", - "privacy": "public" + "description": "Defines the secondary calendar type.\nIf not set, the calendar will only show the primary calendar type.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.0.0-rc.16" + }, + { + "kind": "field", + "name": "valueFormat", + "type": { + "text": "string | undefined" + }, + "description": "Determines the format, used for the value attribute.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.14.0" } ], + "superclass": { + "name": "CalendarPart", + "package": "@ui5/webcomponents", + "module": "dist/CalendarPart.js" + }, + "tagName": "ui5-daypicker", + "customElement": true, + "_ui5privacy": "private", "attributes": [ { - "description": "Text of the component.", - "name": "text", + "description": "Defines how to calculate calendar weeks and first day of the week.\nIf not set, the calendar will be displayed according to the currently set global configuration.", + "name": "calendar-week-numbering", + "default": "\"Default\"", + "fieldName": "calendarWeekNumbering", + "type": { + "text": "\"Default\" | \"ISO_8601\" | \"MiddleEastern\" | \"WesternTraditional\"" + } + }, + { + "description": "Determines the format, displayed in the input field.", + "name": "display-format", "default": "undefined", - "fieldName": "text", + "fieldName": "displayFormat", "type": { "text": "string | undefined" } }, { - "description": "Maximum number of characters to be displayed initially. If the text length exceeds this limit, the text will be truncated with an ellipsis, and the \"More\" link will be displayed.", - "name": "max-characters", - "default": "100", - "fieldName": "maxCharacters", + "description": "Determines the format, displayed in the input field.", + "name": "format-pattern", + "default": "undefined", + "fieldName": "formatPattern", "type": { - "text": "number" + "text": "string | undefined" + }, + "deprecated": "Use displayFormat and valueFormat instead" + }, + { + "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).", + "name": "max-date", + "default": "\"\"", + "fieldName": "maxDate", + "type": { + "text": "string" } }, { - "description": "Determines how the full text will be displayed.", - "name": "overflow-mode", - "default": "\"InPlace\"", - "fieldName": "overflowMode", + "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).", + "name": "min-date", + "default": "\"\"", + "fieldName": "minDate", "type": { - "text": "\"InPlace\" | \"Popover\"" + "text": "string" } }, { - "description": "Specifies if an empty indicator should be displayed when there is no text.", - "name": "empty-indicator-mode", - "default": "\"Off\"", - "fieldName": "emptyIndicatorMode", + "description": "Sets a calendar type used for display.\nIf not set, the calendar type of the global configuration is used.", + "name": "primary-calendar-type", + "default": "undefined", + "fieldName": "primaryCalendarType", "type": { - "text": "\"On\" | \"Off\"" + "text": "\"Gregorian\" | \"Islamic\" | \"Japanese\" | \"Buddhist\" | \"Persian\" | undefined" + } + }, + { + "description": "Defines the secondary calendar type.\nIf not set, the calendar will only show the primary calendar type.", + "name": "secondary-calendar-type", + "default": "undefined", + "fieldName": "secondaryCalendarType", + "type": { + "text": "\"Gregorian\" | \"Islamic\" | \"Japanese\" | \"Buddhist\" | \"Persian\" | undefined" + } + }, + { + "description": "Determines the format, used for the value attribute.", + "name": "value-format", + "default": "undefined", + "fieldName": "valueFormat", + "type": { + "text": "string | undefined" } } - ], - "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" - }, - "tagName": "ui5-expandable-text", - "customElement": true, - "_ui5since": "2.6.0", - "_ui5privacy": "public" + ] } ], "exports": [ @@ -9474,32 +8963,46 @@ "kind": "js", "name": "default", "declaration": { - "name": "ExpandableText", - "module": "dist/ExpandableText.js" + "name": "DayPicker", + "module": "dist/DayPicker.js" } }, { "kind": "custom-element-definition", - "name": "ui5-expandable-text", + "name": "ui5-daypicker", "declaration": { - "name": "ExpandableText", - "module": "dist/ExpandableText.js" + "name": "DayPicker", + "module": "dist/DayPicker.js" } } ] }, { "kind": "javascript-module", - "path": "dist/FileUploader.js", + "path": "dist/Dialog.js", "declarations": [ { "kind": "class", - "description": "### Overview\n\nThe `ui5-file-uploader` opens a file explorer dialog and enables users to upload files.\nThe component consists of input field, but you can provide an HTML element by your choice\nto trigger the file upload, by using the default slot.\nFurthermore, you can set the property \"hideInput\" to \"true\" to hide the input field.\n\nTo get all selected files, you can simply use the read-only \"files\" property.\nTo restrict the types of files the user can select, you can use the \"accept\" property.\n\nAnd, similar to all input based components, the FileUploader supports \"valueState\", \"placeholder\", \"name\", and \"disabled\" properties.\n\nFor the `ui5-file-uploader`\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/FileUploader.js\";`", - "name": "FileUploader", + "description": "### Overview\nThe `ui5-dialog` component is used to temporarily display some information in a\nsize-limited window in front of the regular app screen.\nIt is used to prompt the user for an action or a confirmation.\nThe `ui5-dialog` interrupts the current app processing as it is the only focused UI element and\nthe main screen is dimmed/blocked.\nThe dialog combines concepts known from other technologies where the windows have\nnames such as dialog box, dialog window, pop-up, pop-up window, alert box, or message box.\n\nThe `ui5-dialog` is modal, which means that a user action is required before it is possible to return to the parent window.\nTo open multiple dialogs, each dialog element should be separate in the markup. This will ensure the correct modal behavior. Avoid nesting dialogs within each other.\nThe content of the `ui5-dialog` is fully customizable.\n\n### Structure\nA `ui5-dialog` consists of a header, content, and a footer for action buttons.\nThe `ui5-dialog` is usually displayed at the center of the screen.\nIts position can be changed by the user. To enable this, you need to set the property `draggable` accordingly.\n\n\n### Responsive Behavior\nThe `stretch` property can be used to stretch the `ui5-dialog` to full screen. For better usability, it's recommended to stretch the dialog to full screen on phone devices.\n\n**Note:** When a `ui5-bar` is used in the header or in the footer, you should remove the default dialog's paddings.\n\nFor more information see the sample \"Bar in Header/Footer\".\n\n### Keyboard Handling\n\n#### Basic Navigation\nWhen the `ui5-dialog` has the `draggable` property set to `true` and the header is focused, the user can move the dialog\nwith the following keyboard shortcuts:\n\n- [Up] or [Down] arrow keys - Move the dialog up/down.\n- [Left] or [Right] arrow keys - Move the dialog left/right.\n\n#### Resizing\nWhen the `ui5-dialog` has the `resizable` property set to `true` and the header is focused, the user can change the size of the dialog\nwith the following keyboard shortcuts:\n\n- [Shift] + [Up] or [Down] - Decrease/Increase the height of the dialog.\n- [Shift] + [Left] or [Right] - Decrease/Increase the width of the dialog.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Dialog\";`", + "name": "Dialog", + "cssParts": [ + { + "description": "Used to style the content of the component", + "name": "content" + }, + { + "description": "Used to style the footer of the component", + "name": "footer" + }, + { + "description": "Used to style the header of the component", + "name": "header" + } + ], "slots": [ { "name": "default", - "description": "This slot allows you to add custom content to the component, such as a button or any other interactive element to trigger the file selection dialog.\n\n**Note:** For best accessibility experience, set a `tabindex` of \"-1\" on your interactive element, or it will be set automatically.\nThis slot is intended for use cases where you want a button-only file uploader.\nIt is recommended to set `hideInput` property to \"true\" when using this slot.\nNot setting `hideInput` may negatively impact the screen reader users.", + "description": "Defines the content of the Popup.", "_ui5propertyName": "content", "_ui5type": { "text": "Array<HTMLElement>" @@ -9507,9 +9010,16 @@ "_ui5privacy": "public" }, { - "name": "valueStateMessage", - "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 component is in `Information`, `Critical` or `Negative` value state.", - "_ui5since": "1.0.0-rc.9", + "name": "footer", + "description": "Defines the footer HTML Element.\n\n**Note:** When a `ui5-bar` is used in the footer, you should remove the default dialog's paddings.", + "_ui5type": { + "text": "Array<HTMLElement>" + }, + "_ui5privacy": "public" + }, + { + "name": "header", + "description": "Defines the header HTML Element.\n\n**Note:** When a `ui5-bar` is used in the header, you should remove the default dialog's paddings.\n\n**Note:** If `header` slot is provided, the labelling of the dialog is a responsibility of the application developer.\n`accessibleName` should be used.", "_ui5type": { "text": "Array<HTMLElement>" }, @@ -9519,383 +9029,381 @@ "members": [ { "kind": "field", - "name": "accept", + "name": "accessibleDescription", "type": { "text": "string | undefined" }, - "description": "Comma-separated list of file types that the component should accept.\n\n**Note:** Please make sure you are adding the `.` in front on the file type, e.g. `.png` in case you want to accept png's only.", + "description": "Defines the accessible description of the component.", "default": "undefined", - "privacy": "public" - }, - { - "kind": "field", - "name": "hideInput", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "If set to \"true\", the input field of component will not be rendered. Only the default slot that is passed will be rendered.\n\n**Note:** Use this property in combination with the default slot to achieve a button-only file uploader design.", - "privacy": "public" - }, - { - "kind": "field", - "name": "disabled", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is completely noninteractive.", - "privacy": "public" - }, - { - "kind": "field", - "name": "multiple", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Allows multiple files to be chosen.", - "privacy": "public" + "privacy": "public", + "_ui5since": "2.11.0" }, { "kind": "field", - "name": "name", + "name": "accessibleDescriptionRef", "type": { "text": "string | undefined" }, - "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", + "description": "Receives id(or many ids) of the elements that describe the component.", "default": "undefined", - "privacy": "public" + "privacy": "public", + "_ui5since": "2.11.0" }, { "kind": "field", - "name": "placeholder", + "name": "accessibleName", "type": { "text": "string | undefined" }, - "description": "Defines a short hint intended to aid the user with data entry when the component has no value.", + "description": "Defines the accessible name of the component.", "default": "undefined", - "privacy": "public" - }, - { - "kind": "field", - "name": "value", - "type": { - "text": "string" - }, - "default": "\"\"", - "description": "Defines the name/names of the file/files to upload.", "privacy": "public", - "_ui5formProperty": true, - "_ui5formEvents": "change" + "_ui5since": "1.0.0-rc.15" }, { "kind": "field", - "name": "maxFileSize", + "name": "accessibleNameRef", "type": { - "text": "number | undefined" + "text": "string | undefined" }, - "description": "Defines the maximum file size in megabytes which prevents the upload if at least one file exceeds it.", + "description": "Defines the IDs of the elements that label the component.", "default": "undefined", "privacy": "public", - "_ui5since": "2.2.0" + "_ui5since": "1.1.0" }, { "kind": "field", - "name": "valueState", + "name": "accessibleRole", "type": { - "text": "ValueState", + "text": "PopupAccessibleRole", "references": [ { - "name": "ValueState", - "package": "@ui5/webcomponents-base", - "module": "dist/types/ValueState.js" + "name": "PopupAccessibleRole", + "package": "@ui5/webcomponents", + "module": "dist/types/PopupAccessibleRole.js" } ] }, - "default": "\"None\"", - "description": "Defines the value state of the component.", + "default": "\"Dialog\"", + "description": "Allows setting a custom role.", + "privacy": "public", + "_ui5since": "1.10.0" + }, + { + "kind": "method", + "name": "applyFocus", + "return": { + "type": { + "text": "Promise<void>" + }, + "description": "Promise that resolves when the focus is applied" + }, + "description": "Focuses the element denoted by `initialFocus`, if provided,\nor the first focusable element otherwise.", "privacy": "public" }, { "kind": "field", - "name": "required", + "name": "draggable", "type": { "text": "boolean" }, "default": "false", - "description": "Defines whether the component is required.", + "description": "Determines whether the component is draggable.\nIf this property is set to true, the Dialog will be draggable by its header.\n\n**Note:** The component can be draggable only in desktop mode.\n\n**Note:** This property overrides the default HTML \"draggable\" attribute native behavior.\nWhen \"draggable\" is set to true, the native browser \"draggable\"\nbehavior is prevented and only the Dialog custom logic (\"draggable by its header\") works.", "privacy": "public", - "_ui5since": "2.13.0" + "_ui5since": "1.0.0-rc.9" }, { "kind": "field", - "name": "accessibleName", + "name": "headerText", "type": { "text": "string | undefined" }, - "description": "Defines the accessible ARIA name of the component.", + "description": "Defines the header text.\n\n**Note:** If `header` slot is provided, the `headerText` is ignored.", "default": "undefined", - "privacy": "public", - "_ui5since": "2.13.0" + "privacy": "public" }, { "kind": "field", - "name": "accessibleNameRef", + "name": "initialFocus", "type": { "text": "string | undefined" }, - "description": "Receives id(or many ids) of the elements that label the input.", + "description": "Defines the ID of the HTML Element, which will get the initial focus.\n\n**Note:** If an element with `autofocus` attribute is added inside the component,\n`initialFocus` won't take effect.", "default": "undefined", - "privacy": "public", - "_ui5since": "2.13.0" + "privacy": "public" }, { "kind": "field", - "name": "accessibleDescription", + "name": "open", + "description": "Indicates if the element is open", + "privacy": "public", + "default": "false", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Defines the accessible description of the component.", - "default": "undefined", - "privacy": "public", - "_ui5since": "2.14.0" + "_ui5since": "1.2.0" }, { "kind": "field", - "name": "accessibleDescriptionRef", + "name": "preventFocusRestore", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Receives id(or many ids) of the elements that describe the input.", - "default": "undefined", + "default": "false", + "description": "Defines if the focus should be returned to the previously focused element,\nwhen the popup closes.", "privacy": "public", - "_ui5since": "2.14.0" + "_ui5since": "1.0.0-rc.8" }, { "kind": "field", - "name": "files", + "name": "preventInitialFocus", "type": { - "text": "FileList | null" + "text": "boolean" }, - "description": "FileList of all selected files.", + "default": "false", + "description": "Indicates whether initial focus should be prevented.", "privacy": "public", - "default": "null", - "readonly": true - } - ], - "events": [ + "_ui5since": "2.0.0" + }, { - "name": "change", - "_ui5privacy": "public", + "kind": "field", + "name": "resizable", "type": { - "text": "CustomEvent<FileUploaderChangeEventDetail>", - "references": [ - { - "name": "FileUploaderChangeEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/FileUploader.js" - } - ] + "text": "boolean" }, - "description": "Event is fired when the value of the file path has been changed.\n\n**Note:** Keep in mind that because of the HTML input element of type file, the event is also fired in Chrome browser when the Cancel button of the uploads window is pressed.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5parameters": [ - { - "type": { - "text": "FileList | null" - }, - "name": "files", - "_ui5privacy": "public", - "description": "The current files." - } - ] + "default": "false", + "description": "Configures the component to be resizable.\nIf this property is set to true, the Dialog will have a resize handle in its bottom right corner in LTR languages.\nIn RTL languages, the resize handle will be placed in the bottom left corner.\n\n**Note:** The component can be resizable only in desktop mode.\n\n**Note:** Upon resizing, externally defined height and width styling will be ignored.", + "privacy": "public", + "_ui5since": "1.0.0-rc.10" }, { - "name": "file-size-exceed", - "_ui5privacy": "public", + "kind": "field", + "name": "state", "type": { - "text": "CustomEvent<FileUploaderFileSizeExceedEventDetail>", + "text": "ValueState", "references": [ { - "name": "FileUploaderFileSizeExceedEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/FileUploader.js" + "name": "ValueState", + "package": "@ui5/webcomponents-base", + "module": "dist/types/ValueState.js" } ] }, - "description": "Event is fired when the size of a file is above the `maxFileSize` property value.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5since": "2.2.0", - "_ui5parameters": [ - { - "type": { - "text": "Array<FileData>", - "references": [ - { - "name": "FileData", - "package": "@ui5/webcomponents", - "module": "dist/FileUploader.js" - } - ] - }, - "name": "filesData", - "_ui5privacy": "public", - "description": "An array of `FileData` objects containing the`fileName` and `fileSize` in MB of each file that exceeds the upload limit." - } - ] + "default": "\"None\"", + "description": "Defines the state of the `Dialog`.\n\n**Note:** If `\"Negative\"` and `\"Critical\"` states is set, it will change the\naccessibility role to \"alertdialog\", if the accessibleRole property is set to `\"Dialog\"`.", + "privacy": "public", + "_ui5since": "1.0.0-rc.15" + }, + { + "kind": "field", + "name": "stretch", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Determines if the dialog will be stretched to full screen on mobile. On desktop,\nthe dialog will be stretched to approximately 90% of the viewport.\n\n**Note:** For better usability of the component it is recommended to set this property to \"true\" when the dialog is opened on phone.", + "privacy": "public" } ], "attributes": [ { - "description": "Comma-separated list of file types that the component should accept.\n\n**Note:** Please make sure you are adding the `.` in front on the file type, e.g. `.png` in case you want to accept png's only.", - "name": "accept", + "description": "Defines the accessible description of the component.", + "name": "accessible-description", "default": "undefined", - "fieldName": "accept", + "fieldName": "accessibleDescription", "type": { "text": "string | undefined" } }, { - "description": "If set to \"true\", the input field of component will not be rendered. Only the default slot that is passed will be rendered.\n\n**Note:** Use this property in combination with the default slot to achieve a button-only file uploader design.", - "name": "hide-input", - "default": "false", - "fieldName": "hideInput", + "description": "Receives id(or many ids) of the elements that describe the component.", + "name": "accessible-description-ref", + "default": "undefined", + "fieldName": "accessibleDescriptionRef", "type": { - "text": "boolean" + "text": "string | undefined" } }, { - "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is completely noninteractive.", - "name": "disabled", - "default": "false", - "fieldName": "disabled", + "description": "Defines the accessible name of the component.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", "type": { - "text": "boolean" + "text": "string | undefined" } }, { - "description": "Allows multiple files to be chosen.", - "name": "multiple", + "description": "Defines the IDs of the elements that label the component.", + "name": "accessible-name-ref", + "default": "undefined", + "fieldName": "accessibleNameRef", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Allows setting a custom role.", + "name": "accessible-role", + "default": "\"Dialog\"", + "fieldName": "accessibleRole", + "type": { + "text": "\"None\" | \"Dialog\" | \"AlertDialog\"" + } + }, + { + "description": "Determines whether the component is draggable.\nIf this property is set to true, the Dialog will be draggable by its header.\n\n**Note:** The component can be draggable only in desktop mode.\n\n**Note:** This property overrides the default HTML \"draggable\" attribute native behavior.\nWhen \"draggable\" is set to true, the native browser \"draggable\"\nbehavior is prevented and only the Dialog custom logic (\"draggable by its header\") works.", + "name": "draggable", "default": "false", - "fieldName": "multiple", + "fieldName": "draggable", "type": { "text": "boolean" } }, { - "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", - "name": "name", + "description": "Defines the header text.\n\n**Note:** If `header` slot is provided, the `headerText` is ignored.", + "name": "header-text", "default": "undefined", - "fieldName": "name", + "fieldName": "headerText", "type": { "text": "string | undefined" } }, { - "description": "Defines a short hint intended to aid the user with data entry when the component has no value.", - "name": "placeholder", + "description": "Defines the ID of the HTML Element, which will get the initial focus.\n\n**Note:** If an element with `autofocus` attribute is added inside the component,\n`initialFocus` won't take effect.", + "name": "initial-focus", "default": "undefined", - "fieldName": "placeholder", + "fieldName": "initialFocus", "type": { "text": "string | undefined" } }, { - "description": "Defines the name/names of the file/files to upload.", - "name": "value", - "default": "\"\"", - "fieldName": "value", + "description": "Indicates if the element is open", + "name": "open", + "default": "false", + "fieldName": "open", "type": { - "text": "string" + "text": "any" } }, { - "description": "Defines the maximum file size in megabytes which prevents the upload if at least one file exceeds it.", - "name": "max-file-size", - "default": "undefined", - "fieldName": "maxFileSize", + "description": "Defines if the focus should be returned to the previously focused element,\nwhen the popup closes.", + "name": "prevent-focus-restore", + "default": "false", + "fieldName": "preventFocusRestore", "type": { - "text": "number | undefined" + "text": "boolean" } }, { - "description": "Defines the value state of the component.", - "name": "value-state", - "default": "\"None\"", - "fieldName": "valueState", + "description": "Indicates whether initial focus should be prevented.", + "name": "prevent-initial-focus", + "default": "false", + "fieldName": "preventInitialFocus", "type": { - "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" + "text": "boolean" } }, { - "description": "Defines whether the component is required.", - "name": "required", + "description": "Configures the component to be resizable.\nIf this property is set to true, the Dialog will have a resize handle in its bottom right corner in LTR languages.\nIn RTL languages, the resize handle will be placed in the bottom left corner.\n\n**Note:** The component can be resizable only in desktop mode.\n\n**Note:** Upon resizing, externally defined height and width styling will be ignored.", + "name": "resizable", "default": "false", - "fieldName": "required", + "fieldName": "resizable", "type": { "text": "boolean" } }, { - "description": "Defines the accessible ARIA name of the component.", - "name": "accessible-name", - "default": "undefined", - "fieldName": "accessibleName", + "description": "Defines the state of the `Dialog`.\n\n**Note:** If `\"Negative\"` and `\"Critical\"` states is set, it will change the\naccessibility role to \"alertdialog\", if the accessibleRole property is set to `\"Dialog\"`.", + "name": "state", + "default": "\"None\"", + "fieldName": "state", "type": { - "text": "string | undefined" + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" } }, { - "description": "Receives id(or many ids) of the elements that label the input.", - "name": "accessible-name-ref", - "default": "undefined", - "fieldName": "accessibleNameRef", + "description": "Determines if the dialog will be stretched to full screen on mobile. On desktop,\nthe dialog will be stretched to approximately 90% of the viewport.\n\n**Note:** For better usability of the component it is recommended to set this property to \"true\" when the dialog is opened on phone.", + "name": "stretch", + "default": "false", + "fieldName": "stretch", "type": { - "text": "string | undefined" + "text": "boolean" } + } + ], + "superclass": { + "name": "Popup", + "package": "@ui5/webcomponents", + "module": "dist/Popup.js" + }, + "tagName": "ui5-dialog", + "customElement": true, + "_ui5privacy": "public", + "events": [ + { + "name": "before-close", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<PopupBeforeCloseEventDetail>", + "references": [ + { + "name": "PopupBeforeCloseEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/Popup.js" + } + ] + }, + "description": "Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": false, + "_ui5parameters": [ + { + "type": { + "text": "boolean" + }, + "name": "escPressed", + "_ui5privacy": "public", + "description": "Indicates that `ESC` key has triggered the event." + } + ] }, { - "description": "Defines the accessible description of the component.", - "name": "accessible-description", - "default": "undefined", - "fieldName": "accessibleDescription", + "name": "before-open", + "_ui5privacy": "public", "type": { - "text": "string | undefined" - } + "text": "CustomEvent" + }, + "description": "Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": false }, { - "description": "Receives id(or many ids) of the elements that describe the input.", - "name": "accessible-description-ref", - "default": "undefined", - "fieldName": "accessibleDescriptionRef", + "name": "close", + "_ui5privacy": "public", "type": { - "text": "string | undefined" - } + "text": "CustomEvent" + }, + "description": "Fired after the component is closed.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": false }, { - "description": "FileList of all selected files.", - "name": "files", - "default": "null", - "fieldName": "files", + "name": "open", + "_ui5privacy": "public", "type": { - "text": "any" - } + "text": "CustomEvent" + }, + "description": "Fired after the component is opened.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": false } - ], - "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" - }, - "tagName": "ui5-file-uploader", - "customElement": true, - "_ui5since": "1.0.0-rc.6", - "_ui5privacy": "public" + ] } ], "exports": [ @@ -9903,279 +9411,119 @@ "kind": "js", "name": "default", "declaration": { - "name": "FileUploader", - "module": "dist/FileUploader.js" + "name": "Dialog", + "module": "dist/Dialog.js" } }, { "kind": "custom-element-definition", - "name": "ui5-file-uploader", + "name": "ui5-dialog", "declaration": { - "name": "FileUploader", - "module": "dist/FileUploader.js" + "name": "Dialog", + "module": "dist/Dialog.js" } } ] }, { "kind": "javascript-module", - "path": "dist/Filters.js", - "declarations": [], - "exports": [] - }, - { - "kind": "javascript-module", - "path": "dist/Form.js", + "path": "dist/DropIndicator.js", "declarations": [ - { - "kind": "interface", - "name": "IFormItem", - "description": "Interface for components that can be slotted inside `ui5-form` as items.", - "_ui5privacy": "public", - "_ui5since": "2.0.0" - }, { "kind": "class", - "description": "### Overview\n\nThe Form is a layout component that arranges labels and form fields (like input fields) pairs\ninto a specific number of columns.\n\n**Note:** The Form web component is a layout component, it isn't a replacement for the native `form` HTML element.\nThe Form web component does not provide any APIs for form submission.\n\n### Structure\n\n- **Form** (`ui5-form`) is the top-level container component, responsible for the content layout and responsiveness.\n- **FormGroup** (`ui5-form-group`) enables the grouping of the Form content.\n- **FormItem** (`ui5-form-item`) is a pair of label and form fields and can be used directly in a Form, or as part of a FormGroup.\n\nThe simplest Form (`ui5-form`) consists of a header area on top,\ndisplaying a header text (see the `headingText` property) and content below - an arbitrary number of FormItems (ui5-form-item),\nrepresenting the pairs of label and form fields.\n\nAnd, there is also \"grouping\" available to assist the implementation of richer UIs.\nThis is enabled by the FormGroup (`ui5-form-group`) component.\nIn this case, the Form is structured into FormGroups and each FormGroup consists of FormItems.\n\n### Responsiveness\n\nThe Form component reacts and changes its layout on predefined breakpoints.\nDepending on its size, the Form content (FormGroups and FormItems) gets divided into one or more columns as follows:\n- **S** (< 600px) – 1 column is recommended (default: 1)\n- **M** (600px - 1022px) – up to 2 columns are recommended (default: 1)\n- **L** (1023px - 1439px) - up to 3 columns are recommended (default: 2)\n- **XL** (> 1439px) – up to 6 columns are recommended (default: 3)\n\nTo change the layout, use the `layout` property - f.e. layout=\"S1 M2 L3 XL6\".\n\n### Groups\n\nTo make better use of screen space, there is built-in logic to determine how many columns should a FormGroup occupy.\n\n- **Example #1** (perfect match):\n4 columns and 4 groups: each group will use 1 column.\n\n- **Example #2** (balanced distribution):\n4 columns and 2 groups: each group will use 2 columns.\n6 columns and 2 groups: each group will use 3 columns.\n\n- **Example #3** (unbalanced distribution):\n3 columns and 2 groups: the larger one will use 2 columns, the smaller 1 column.\n5 columns and 3 groups: two of the groups will use 2 columns each, the smallest 1 column.\n\n**Note:** The size of a group element is determined by the number of FormItems assigned to it.\nIn the case of equality, the first in the DOM will use more columns, and the last - fewer columns.\n\n- **Example #4** (more groups than columns):\n3 columns and 4 groups: each FormGroup uses only 1 column, the last FormGroup will wrap on the second row.\n\n### Groups Column Span\n\nTo influence the built-in group distribution, described in the previous section,\nyou can use the FormGroup's `columnSpan` property, that defines how many columns the group should expand to.\n\n### Items Column Span\n\nFormItem's columnSpan property defines how many columns the form item should expand to inside a form group or the form.\n\n### Items Label Span\n\nThe placement of the labels depends on the size of the used column.\nIf there is enough space, the labels are next to their associated fields, otherwise - above the fields.\nBy default, the labels take 4/12 of the FormItem, leaving 8/12 parts to associated fields.\nYou can control what space the labels should take via the `labelSpan` property.\n\n**For example:** To always place the labels on top set: `labelSpan=\"S12 M12 L12 XL12\"` property.\n\n### Items Empty Span\n\nBy default, a form item spans 12 cells, fully divided between its label and field, with no empty space at the end:\n- **Label:** occupies 4 cells.\n- **Field:** occupies 8 cells.\n\nThe `emptySpan` property provides additional layout flexibility by defining empty space at the form item’s end.\n\n**For example:** Setting \"S0 M0 L3 XL3\" (or just \"L3 XL3\") adjusts the layout as follows:\n- **Label:** remains 4 cells.\n- **Field:** is reduced to 5 cells.\n- **Empty space:** 3 cells are added at the end.\n\nGreater values increase the empty space at the end of the form item, reducing the space available for the label and its field.\nHowever, setting `emptySpan` to 1 cell is recommended and typically sufficient to achieve a balanced layout.\n\n### Navigation flow\n\nThe Form component supports two layout options for keyboard navigation:\n\n#### Simple form\n\nIn this \"simple form\" layout, each `ui5-form-item` acts as a standalone group\nwith one item, so focus moves horizontally across the grid from one `ui5-form-item` to the next.\nThis layout is ideal for simpler forms and supports custom arrangements, e.g.,\n\n```\n| 1 | 2 |\n| 3 |\n| 4 | 5 |\n```\n\n#### Complex form\n\nIn this layout, items are grouped into `ui5-form-group` elements, allowing more complex configurations:\n\n- **Single-Column Group**: Focus moves vertically down from one item to the next.\n ```\n | 1 |\n | 2 |\n | 3 |\n ```\n\n- **Multi-Column Group**: Focus moves horizontally within each row, advancing to the next row after completing the current one.\n ```\n | 1 | 4 |\n | 2 | 5 |\n | 3 | 6 |\n ```\n\n### Keyboard Handling\n\n- [Tab] - Moves the focus to the next interactive element within the Form/FormGroup (if available) or to the next element in the tab chain outside the Form\n- [Shift] + [Tab] - Moves the focus to the previous interactive element within the Form/FormGroup (if available) or to the previous element in the tab chain outside the Form\n- [F6] - Moves the focus to the first interactive element of the next FormGroup (if available) or to the next element in the tab chain outside the Form\n- [Shift] + [F6] - Moves the focus to the first interactive element of the previous FormGroup (if available) or to the previous element in the tab chain outside the Form\n\n### ES6 Module Import\n\n- import @ui5/webcomponents/dist/Form.js\";\n- import @ui5/webcomponents/dist/FormGroup.js\";\n- import @ui5/webcomponents/dist/FormItem.js\";", - "name": "Form", - "cssParts": [ - { - "description": "Used to style the wrapper of the header.", - "name": "header" - }, - { - "description": "Used to style the element defining the form column layout.", - "name": "layout" - }, - { - "description": "Used to style a single column of the form column layout.", - "name": "column" - } - ], - "slots": [ - { - "name": "header", - "description": "Defines the component header area.\n\n**Note:** When a `header` is provided, the `headerText` property is ignored.", - "_ui5type": { - "text": "Array<HTMLElement>" - }, - "_ui5privacy": "public" - }, - { - "name": "default", - "description": "Defines the component content - FormGroups or FormItems.\n\n**Note:** Mixing FormGroups and standalone FormItems (not belonging to a group) is not supported.\nEither use FormGroups and make sure all FormItems are part of a FormGroup, or use just FormItems without any FormGroups.", - "_ui5propertyName": "items", - "_ui5type": { - "text": "Array<IFormItem>", - "references": [ - { - "name": "IFormItem", - "package": "@ui5/webcomponents", - "module": "dist/Form.js" - } - ] - }, - "_ui5privacy": "public" - } - ], + "description": "### Overview\n\n### Usage\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/DropIndicator.js\";`", + "name": "DropIndicator", "members": [ { "kind": "field", - "name": "accessibleName", - "type": { - "text": "string | undefined" - }, - "description": "Defines the accessible ARIA name of the component.", - "default": "undefined", - "privacy": "public", - "_ui5since": "2.10.0" - }, - { - "kind": "field", - "name": "accessibleNameRef", - "type": { - "text": "string | undefined" - }, - "description": "Defines id (or many ids) of the element (or elements) that label the component.", - "default": "undefined", - "privacy": "public", - "_ui5since": "2.16.0" - }, - { - "kind": "field", - "name": "accessibleMode", + "name": "orientation", "type": { - "text": "FormAccessibleMode", + "text": "Orientation", "references": [ { - "name": "FormAccessibleMode", - "package": "@ui5/webcomponents", - "module": "dist/types/FormAccessibleMode.js" + "name": "Orientation", + "package": "@ui5/webcomponents-base", + "module": "dist/types/Orientation.js" } ] }, - "default": "\"Display\"", - "description": "Defines the accessibility mode of the component in \"edit\" and \"display\" use-cases.\n\nBased on the mode, the component renders different HTML elements and ARIA attributes,\nwhich are appropriate for the use-case.\n\n**Usage:**\n- Set this property to \"Display\", when the form consists of non-editable (e.g. texts) form items.\n- Set this property to \"Edit\", when the form consists of editable (e.g. input fields) form items.", - "privacy": "public", - "_ui5since": "2.16.0" - }, - { - "kind": "field", - "name": "layout", - "type": { - "text": "string" - }, - "default": "\"S1 M1 L2 XL3\"", - "description": "Defines the number of columns to distribute the form content by breakpoint.\n\nSupported values:\n- `S` - 1 column by default (1 column is recommended)\n- `M` - 1 column by default (up to 2 columns are recommended)\n- `L` - 2 columns by default (up to 3 columns are recommended)\n- `XL` - 3 columns by default (up to 6 columns are recommended)", - "privacy": "public" - }, - { - "kind": "field", - "name": "labelSpan", - "type": { - "text": "string" - }, - "default": "\"S12 M4 L4 XL4\"", - "description": "Defines the width proportion of the labels and fields of a form item by breakpoint.\n\nBy default, the labels take 4/12 (or 1/3) of the form item in M,L and XL sizes,\nand 12/12 in S size, e.g in S the label is on top of its associated field.\n\nThe supported values are between 1 and 12. Greater the number, more space the label will use.\n\n**Note:** If \"12\" is set, the label will be displayed on top of its assosiated field.", + "default": "\"Vertical\"", + "description": "Orientation of the indicator.", "privacy": "public" }, { "kind": "field", - "name": "emptySpan", - "type": { - "text": "string" - }, - "default": "\"S0 M0 L0 XL0\"", - "description": "Defines the number of cells that are empty at the end of each form item, configurable by breakpoint.\n\nBy default, a form item spans 12 cells, fully divided between its label (4 cells) and field (8 cells), with no empty space at the end.\nThe `emptySpan` provides additional layout flexibility by defining empty space at the form item’s end.\n\n**Note:**\n- The maximum allowable empty space is 10 cells. At least 1 cell each must remain for the label and the field.\n- When `emptySpan` is specified (greater than 0), ensure that the combined value of `emptySpan` and `labelSpan` does not exceed 11. This guarantees a minimum of 1 cell for the field.", - "privacy": "public", - "_ui5since": "2.5.0" - }, - { - "kind": "field", - "name": "headerText", + "name": "ownerReference", "type": { - "text": "string | undefined" + "text": "HTMLElement | null" }, - "description": "Defines the header text of the component.\n\n**Note:** The property gets overridden by the `header` slot.", - "default": "undefined", + "default": "null", + "description": "Owner of the indicator and the target.", "privacy": "public" }, { "kind": "field", - "name": "headerLevel", + "name": "placement", "type": { - "text": "TitleLevel", + "text": "MovePlacement", "references": [ { - "name": "TitleLevel", - "package": "@ui5/webcomponents", - "module": "dist/types/TitleLevel.js" + "name": "MovePlacement", + "package": "@ui5/webcomponents-base", + "module": "dist/types/MovePlacement.js" } ] }, - "default": "\"H2\"", - "description": "Defines the compoennt heading level,\nset by the `headerText`.", - "privacy": "public", - "_ui5since": "2.10.0" + "default": "\"Before\"", + "description": "Placement of the indicator relative to the target.", + "privacy": "public" }, { "kind": "field", - "name": "itemSpacing", + "name": "targetReference", "type": { - "text": "FormItemSpacing", - "references": [ - { - "name": "FormItemSpacing", - "package": "@ui5/webcomponents", - "module": "dist/types/FormItemSpacing.js" - } - ] + "text": "HTMLElement | null" }, - "default": "\"Normal\"", - "description": "Defines the vertical spacing between form items.\n\n**Note:** If the Form is meant to be switched between \"display\"(\"non-edit\") and \"edit\" modes,\nwe recommend using \"Large\" item spacing in \"display\"(\"non-edit\") mode, and \"Normal\" - for \"edit\" mode,\nto avoid \"jumping\" effect, caused by the hight difference between texts in \"display\"(\"non-edit\") mode and the input fields in \"edit\" mode.", + "default": "null", + "description": "Element where the drop indicator will be shown.", "privacy": "public" } ], "attributes": [ { - "description": "Defines the accessible ARIA name of the component.", - "name": "accessible-name", - "default": "undefined", - "fieldName": "accessibleName", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Defines id (or many ids) of the element (or elements) that label the component.", - "name": "accessible-name-ref", - "default": "undefined", - "fieldName": "accessibleNameRef", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Defines the accessibility mode of the component in \"edit\" and \"display\" use-cases.\n\nBased on the mode, the component renders different HTML elements and ARIA attributes,\nwhich are appropriate for the use-case.\n\n**Usage:**\n- Set this property to \"Display\", when the form consists of non-editable (e.g. texts) form items.\n- Set this property to \"Edit\", when the form consists of editable (e.g. input fields) form items.", - "name": "accessible-mode", - "default": "\"Display\"", - "fieldName": "accessibleMode", + "description": "Orientation of the indicator.", + "name": "orientation", + "default": "\"Vertical\"", + "fieldName": "orientation", "type": { - "text": "\"Display\" | \"Edit\"" + "text": "\"Vertical\" | \"Horizontal\"" } }, { - "description": "Defines the number of columns to distribute the form content by breakpoint.\n\nSupported values:\n- `S` - 1 column by default (1 column is recommended)\n- `M` - 1 column by default (up to 2 columns are recommended)\n- `L` - 2 columns by default (up to 3 columns are recommended)\n- `XL` - 3 columns by default (up to 6 columns are recommended)", - "name": "layout", - "default": "\"S1 M1 L2 XL3\"", - "fieldName": "layout", + "description": "Owner of the indicator and the target.", + "name": "owner-reference", + "default": "null", + "fieldName": "ownerReference", "type": { - "text": "string" + "text": "HTMLElement | null" } }, { - "description": "Defines the width proportion of the labels and fields of a form item by breakpoint.\n\nBy default, the labels take 4/12 (or 1/3) of the form item in M,L and XL sizes,\nand 12/12 in S size, e.g in S the label is on top of its associated field.\n\nThe supported values are between 1 and 12. Greater the number, more space the label will use.\n\n**Note:** If \"12\" is set, the label will be displayed on top of its assosiated field.", - "name": "label-span", - "default": "\"S12 M4 L4 XL4\"", - "fieldName": "labelSpan", + "description": "Placement of the indicator relative to the target.", + "name": "placement", + "default": "\"Before\"", + "fieldName": "placement", "type": { - "text": "string" + "text": "\"On\" | \"Before\" | \"After\"" } }, { - "description": "Defines the number of cells that are empty at the end of each form item, configurable by breakpoint.\n\nBy default, a form item spans 12 cells, fully divided between its label (4 cells) and field (8 cells), with no empty space at the end.\nThe `emptySpan` provides additional layout flexibility by defining empty space at the form item’s end.\n\n**Note:**\n- The maximum allowable empty space is 10 cells. At least 1 cell each must remain for the label and the field.\n- When `emptySpan` is specified (greater than 0), ensure that the combined value of `emptySpan` and `labelSpan` does not exceed 11. This guarantees a minimum of 1 cell for the field.", - "name": "empty-span", - "default": "\"S0 M0 L0 XL0\"", - "fieldName": "emptySpan", + "description": "Element where the drop indicator will be shown.", + "name": "target-reference", + "default": "null", + "fieldName": "targetReference", "type": { - "text": "string" - } - }, - { - "description": "Defines the header text of the component.\n\n**Note:** The property gets overridden by the `header` slot.", - "name": "header-text", - "default": "undefined", - "fieldName": "headerText", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Defines the compoennt heading level,\nset by the `headerText`.", - "name": "header-level", - "default": "\"H2\"", - "fieldName": "headerLevel", - "type": { - "text": "\"H1\" | \"H2\" | \"H3\" | \"H4\" | \"H5\" | \"H6\"" - } - }, - { - "description": "Defines the vertical spacing between form items.\n\n**Note:** If the Form is meant to be switched between \"display\"(\"non-edit\") and \"edit\" modes,\nwe recommend using \"Large\" item spacing in \"display\"(\"non-edit\") mode, and \"Normal\" - for \"edit\" mode,\nto avoid \"jumping\" effect, caused by the hight difference between texts in \"display\"(\"non-edit\") mode and the input fields in \"edit\" mode.", - "name": "item-spacing", - "default": "\"Normal\"", - "fieldName": "itemSpacing", - "type": { - "text": "\"Normal\" | \"Large\"" + "text": "HTMLElement | null" } } ], @@ -10184,10 +9532,9 @@ "package": "@ui5/webcomponents-base", "module": "dist/UI5Element.js" }, - "tagName": "ui5-form", + "tagName": "ui5-drop-indicator", "customElement": true, - "_ui5since": "2.0.0", - "_ui5privacy": "public" + "_ui5privacy": "private" } ], "exports": [ @@ -10195,152 +9542,117 @@ "kind": "js", "name": "default", "declaration": { - "name": "Form", - "module": "dist/Form.js" + "name": "DropIndicator", + "module": "dist/DropIndicator.js" } }, { "kind": "custom-element-definition", - "name": "ui5-form", + "name": "ui5-drop-indicator", "declaration": { - "name": "Form", - "module": "dist/Form.js" + "name": "DropIndicator", + "module": "dist/DropIndicator.js" } } ] }, { "kind": "javascript-module", - "path": "dist/FormGroup.js", + "path": "dist/DynamicDateRange.js", "declarations": [ { "kind": "class", - "description": "### Overview\n\nThe FormGroup (ui5-form-group) represents a group inside the Form (ui5-form) component\nand it consists of FormItem (ui5-form-item) components.\n\nThe layout of the FormGroup is mostly defined and controlled by the overarching Form (ui5-form) component.\nStill, one can influence the layout via the FormGroup's `columnSpan` property,\nthat defines how many columns the group should expand to.\n\n### Usage\n\nТhe FormGroup (ui5-form-group) allows to split a Form into groups,\ne.g to group FormItems that logically belong together.\n\n### ES6 Module Import\n\n- import @ui5/webcomponents/dist/FormGroup.js\";", - "name": "FormGroup", - "slots": [ - { - "name": "default", - "description": "Defines the items of the component.", - "_ui5propertyName": "items", - "_ui5type": { - "text": "Array<FormItem>", - "references": [ - { - "name": "FormItem", - "package": "@ui5/webcomponents", - "module": "dist/FormItem.js" - } - ] - }, - "_ui5privacy": "public" - } - ], + "description": "### Overview\n\nThe `ui5-dynamic-date-range` component provides a flexible interface to define date ranges using a combination of absolute dates, relative intervals, and preset ranges (e.g., \"Today\", \"Yesterday\", etc.).\nIt allows users to select a date range from a predefined set of options or enter custom dates.\n\n### Usage\n\nThe component is typically used in scenarios where users need to filter data based on date ranges, such as in reports, dashboards, or data analysis tools.\nIt can be used with the predefined options or extended with custom options to suit specific requirements. You can create your own options by extending the `IDynamicDateRangeOption` interface.\nEvery option should be registered using the `DynamicDateRange.register` method.\n\nIf needed, you can also create a range of dates based on specific option using the `toDates` method.\n\n### Standard Options\n\nThe component comes with a set of standard options, including:\n- \"TODAY\" - Represents the current date. An example value is `{ operator: \"TODAY\"}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/Today.js\";`\n- \"YESTERDAY\" - Represents the previous date. An example value is `{ operator: \"YESTERDAY\"}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/Yesterday.js\";`\n- \"TOMORROW\" - Represents the next date. An example value is `{ operator: \"TOMORROW\"}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/Tomorrow.js\";`\n- \"DATE\" - Represents a single date. An example value is `{ operator: \"DATE\", values: [new Date()]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/SingleDate.js\";`\n- \"DATERANGE\" - Represents a range of dates. An example value is `{ operator: \"DATERANGE\", values: [new Date(), new Date()]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/DateRange.js\";`\n- \"DATETIMERANGE\" - Represents a range of dates with times. An example value is `{ operator: \"DATETIMERANGE\", values: [new Date(), new Date()]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/DateTimeRange.js\";`\n- \"FROMDATETIME\" - Represents a range from date and time. An example value is `{ operator: \"FROMDATETIME\", values: [new Date()]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/FromDateTime.js\";`\n- \"TODATETIME\" - Represents a range to date and time. An example value is `{ operator: \"TODATETIME\", values: [new Date()]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/ToDateTime.js\";`\n- \"LASTDAYS\" - Represents Last X Days from today. An example value is `{ operator: \"LASTDAYS\", values: [2]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/LastOptions.js\";`\n- \"LASTWEEKS\" - Represents Last X Weeks from today. An example value is `{ operator: \"LASTWEEKS\", values: [3]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/LastOptions.js\";`\n- \"LASTMONTHS\" - Represents Last X Months from today. An example value is `{ operator: \"LASTMONTHS\", values: [6]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/LastOptions.js\";`\n- \"LASTQUARTERS\" - Represents Last X Quarters from today. An example value is `{ operator: \"LASTQUARTERS\", values: [2]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/LastOptions.js\";`\n- \"LASTYEARS\" - Represents Last X Years from today. An example value is `{ operator: \"LASTYEARS\", values: [1]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/LastOptions.js\";`\n- \"NEXTDAYS\" - Represents Next X Days from today. An example value is `{ operator: \"NEXTDAYS\", values: [2]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/NextOptions.js\";`\n- \"NEXTWEEKS\" - Represents Next X Weeks from today. An example value is `{ operator: \"NEXTWEEKS\", values: [3]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/NextOptions.js\";`\n- \"NEXTMONTHS\" - Represents Next X Months from today. An example value is `{ operator: \"NEXTMONTHS\", values: [6]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/NextOptions.js\";`\n- \"NEXTQUARTERS\" - Represents Next X Quarters from today. An example value is `{ operator: \"NEXTQUARTERS\", values: [2]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/NextOptions.js\";`\n- \"NEXTYEARS\" - Represents Next X Years from today. An example value is `{ operator: \"NEXTYEARS\", values: [1]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/NextOptions.js\";`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/DynamicDateRange.js\";`", + "name": "DynamicDateRange", "members": [ { "kind": "field", - "name": "headerText", + "name": "options", "type": { - "text": "string | undefined" + "text": "string" }, - "description": "Defines header text of the component.", - "default": "undefined", + "default": "\"\"", + "description": "Defines the options listed as a string, separated by commas and using capital case.\nExample: \"TODAY, YESTERDAY, DATERANGE\"", + "privacy": "public" + }, + { + "kind": "method", + "name": "toDates", + "return": { + "type": { + "text": "Array<Date>" + }, + "description": "An array of two `Date` objects representing the start and end dates." + }, + "parameters": [ + { + "name": "value", + "type": { + "text": "DynamicDateRangeValue", + "references": [ + { + "name": "DynamicDateRangeValue", + "package": "@ui5/webcomponents", + "module": "dist/DynamicDateRange.js" + } + ] + }, + "description": "The option to convert into an array of date ranges", + "_ui5privacy": "public" + } + ], + "description": "Converts a `value` into concrete `startDate` and `endDate` JavaScript `Date` objects.", "privacy": "public" }, { "kind": "field", - "name": "headerLevel", + "name": "value", "type": { - "text": "TitleLevel", + "text": "DynamicDateRangeValue | undefined", "references": [ { - "name": "TitleLevel", + "name": "DynamicDateRangeValue", "package": "@ui5/webcomponents", - "module": "dist/types/TitleLevel.js" + "module": "dist/DynamicDateRange.js" } ] }, - "default": "\"H3\"", - "description": "Defines the compoennt heading level,\nset by the `headerText`.", - "privacy": "public", - "_ui5since": "2.10.0" - }, - { - "kind": "field", - "name": "columnSpan", - "type": { - "text": "number | undefined" - }, - "description": "Defines column span of the component,\ne.g how many columns the group should span to.", - "default": "undefined", - "privacy": "public" - }, - { - "kind": "field", - "name": "accessibleName", - "type": { - "text": "string | undefined" - }, - "description": "Defines the accessible ARIA name of the component.", + "description": "Defines the value object.", "default": "undefined", "privacy": "public", - "_ui5since": "2.16.0" - }, + "_ui5noAttribute": true + } + ], + "events": [ { - "kind": "field", - "name": "accessibleNameRef", + "name": "change", + "_ui5privacy": "public", "type": { - "text": "string | undefined" + "text": "CustomEvent" }, - "description": "Defines id (or many ids) of the element (or elements) that label the component.", - "default": "undefined", - "privacy": "public", - "_ui5since": "2.16.0" + "description": "Fired when the input operation has finished by pressing Enter or on focusout or a value is selected in the popover.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true } ], "attributes": [ { - "description": "Defines header text of the component.", - "name": "header-text", - "default": "undefined", - "fieldName": "headerText", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Defines the compoennt heading level,\nset by the `headerText`.", - "name": "header-level", - "default": "\"H3\"", - "fieldName": "headerLevel", - "type": { - "text": "\"H1\" | \"H2\" | \"H3\" | \"H4\" | \"H5\" | \"H6\"" - } - }, - { - "description": "Defines column span of the component,\ne.g how many columns the group should span to.", - "name": "column-span", - "default": "undefined", - "fieldName": "columnSpan", - "type": { - "text": "number | undefined" - } - }, - { - "description": "Defines the accessible ARIA name of the component.", - "name": "accessible-name", - "default": "undefined", - "fieldName": "accessibleName", + "description": "Defines the options listed as a string, separated by commas and using capital case.\nExample: \"TODAY, YESTERDAY, DATERANGE\"", + "name": "options", + "default": "\"\"", + "fieldName": "options", "type": { - "text": "string | undefined" + "text": "string" } }, { - "description": "Defines id (or many ids) of the element (or elements) that label the component.", - "name": "accessible-name-ref", + "description": "Defines the value object.", + "name": "value", "default": "undefined", - "fieldName": "accessibleNameRef", + "fieldName": "value", "type": { - "text": "string | undefined" + "text": "DynamicDateRangeValue | undefined" } } ], @@ -10349,17 +9661,17 @@ "package": "@ui5/webcomponents-base", "module": "dist/UI5Element.js" }, - "tagName": "ui5-form-group", + "tagName": "ui5-dynamic-date-range", "customElement": true, - "_ui5since": "2.0.0", + "_ui5since": "2.11.0", + "_ui5privacy": "public" + }, + { + "kind": "interface", + "name": "IDynamicDateRangeOption", + "description": "Represents a dynamic date range option used by the `ui5-dynamic-date-range` component.\n\nRepresents a dynamic date range option used for handling dynamic date ranges.\nThis interface defines the structure and behavior required for implementing\ndynamic date range options, including formatting, parsing, validation, and\nconversion of date range values.\n\n * Properties:\n- `icon`: The icon associated with the dynamic date range option, typically used for UI representation.\n- `operator`: A unique operator identifying the dynamic date range option.\n- `text`: The display text for the dynamic date range option.\n- `template` (optional): A JSX template for rendering the dynamic date range option.\n\nMethods:\n- `format(value: DynamicDateRangeValue): string`: Formats the given dynamic date range value into a string representation.\n- `parse(value: string): DynamicDateRangeValue | undefined`: Parses a string into a dynamic date range value.\n- `toDates(value: DynamicDateRangeValue): Array<Date>`: Converts a dynamic date range value into an array of `Date` objects.\n- `handleSelectionChange?(event: CustomEvent): DynamicDateRangeValue | undefined`: (Optional) Handles selection changes in the UI of the dynamic date range option.\n- `isValidString(value: string): boolean`: Validates whether a given string is a valid representation of the dynamic date range value.", "_ui5privacy": "public", - "_ui5implements": [ - { - "name": "IFormItem", - "package": "@ui5/webcomponents", - "module": "dist/Form.js" - } - ] + "_ui5since": "2.11.0" } ], "exports": [ @@ -10367,81 +9679,119 @@ "kind": "js", "name": "default", "declaration": { - "name": "FormGroup", - "module": "dist/FormGroup.js" + "name": "DynamicDateRange", + "module": "dist/DynamicDateRange.js" } }, { "kind": "custom-element-definition", - "name": "ui5-form-group", + "name": "ui5-dynamic-date-range", "declaration": { - "name": "FormGroup", - "module": "dist/FormGroup.js" + "name": "DynamicDateRange", + "module": "dist/DynamicDateRange.js" } } ] }, { "kind": "javascript-module", - "path": "dist/FormItem.js", + "path": "dist/ExpandableText.js", "declarations": [ { "kind": "class", - "description": "### Overview\n\nThe FormItem (ui5-form-item) represents pair of a label and\none or more components (text or text fields), associated to it.\n\n### Usage\n\nThe FormItem is being used in FormGroup (ui5-form-group) or directly in Form (ui5-form).\n\n### ES6 Module Import\n\n- import @ui5/webcomponents/dist/FormItem.js\";", - "name": "FormItem", - "cssParts": [ - { - "description": "Used to style the parent element of the label and content parts.", - "name": "layout" - }, + "description": "### Overview\n\nThe `ui5-expandable-text` component allows displaying a large body of text in a small space. It provides an \"expand/collapse\" functionality, which shows/hides potentially truncated text.\n\n### Usage\n\n#### When to use:\n- To accommodate long texts in limited space, for example in list items, table cell texts, or forms\n\n#### When not to use:\n- The content is critical for the user. In this case use short descriptions that can fit in\n- Strive to provide short and meaningful texts to avoid excessive number of \"Show More\" links on the page\n\n### Responsive Behavior\n\nOn phones, if the component is configured to display the full text in a popover, the popover will appear in full screen.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/ExpandableText\";`", + "name": "ExpandableText", + "members": [ { - "description": "Used to style the label part of the form item.", - "name": "label" + "kind": "field", + "name": "emptyIndicatorMode", + "type": { + "text": "TextEmptyIndicatorMode", + "references": [ + { + "name": "TextEmptyIndicatorMode", + "package": "@ui5/webcomponents", + "module": "dist/types/TextEmptyIndicatorMode.js" + } + ] + }, + "default": "\"Off\"", + "description": "Specifies if an empty indicator should be displayed when there is no text.", + "privacy": "public" }, { - "description": "Used to style the content part of the form item.", - "name": "content" - } - ], - "slots": [ - { - "name": "labelContent", - "description": "Defines the label of the component.", - "_ui5type": { - "text": "Array<HTMLElement>" + "kind": "field", + "name": "maxCharacters", + "type": { + "text": "number" }, - "_ui5privacy": "public" + "default": "100", + "description": "Maximum number of characters to be displayed initially. If the text length exceeds this limit, the text will be truncated with an ellipsis, and the \"More\" link will be displayed.", + "privacy": "public" }, { - "name": "default", - "description": "Defines the content of the component,\nassociated to `labelContent`.", - "_ui5propertyName": "content", - "_ui5type": { - "text": "Array<HTMLElement>" + "kind": "field", + "name": "overflowMode", + "type": { + "text": "ExpandableTextOverflowMode", + "references": [ + { + "name": "ExpandableTextOverflowMode", + "package": "@ui5/webcomponents", + "module": "dist/types/ExpandableTextOverflowMode.js" + } + ] }, - "_ui5privacy": "public" - } - ], - "members": [ + "default": "\"InPlace\"", + "description": "Determines how the full text will be displayed.", + "privacy": "public" + }, { "kind": "field", - "name": "columnSpan", + "name": "text", "type": { - "text": "number | undefined" + "text": "string | undefined" }, - "description": "Defines the column span of the component,\ne.g how many columns the component should span to.\n\n**Note:** The column span should be a number between 1 and the available columns of the FormGroup (when items are placed in a group)\nor the Form. The available columns can be affected by the FormGroup#columnSpan and/or the Form#layout.\nA number bigger than the available columns won't take effect.", + "description": "Text of the component.", "default": "undefined", "privacy": "public" } ], "attributes": [ { - "description": "Defines the column span of the component,\ne.g how many columns the component should span to.\n\n**Note:** The column span should be a number between 1 and the available columns of the FormGroup (when items are placed in a group)\nor the Form. The available columns can be affected by the FormGroup#columnSpan and/or the Form#layout.\nA number bigger than the available columns won't take effect.", - "name": "column-span", + "description": "Specifies if an empty indicator should be displayed when there is no text.", + "name": "empty-indicator-mode", + "default": "\"Off\"", + "fieldName": "emptyIndicatorMode", + "type": { + "text": "\"On\" | \"Off\"" + } + }, + { + "description": "Maximum number of characters to be displayed initially. If the text length exceeds this limit, the text will be truncated with an ellipsis, and the \"More\" link will be displayed.", + "name": "max-characters", + "default": "100", + "fieldName": "maxCharacters", + "type": { + "text": "number" + } + }, + { + "description": "Determines how the full text will be displayed.", + "name": "overflow-mode", + "default": "\"InPlace\"", + "fieldName": "overflowMode", + "type": { + "text": "\"InPlace\" | \"Popover\"" + } + }, + { + "description": "Text of the component.", + "name": "text", "default": "undefined", - "fieldName": "columnSpan", + "fieldName": "text", "type": { - "text": "number | undefined" + "text": "string | undefined" } } ], @@ -10450,17 +9800,10 @@ "package": "@ui5/webcomponents-base", "module": "dist/UI5Element.js" }, - "tagName": "ui5-form-item", + "tagName": "ui5-expandable-text", "customElement": true, - "_ui5since": "2.0.0", - "_ui5privacy": "public", - "_ui5implements": [ - { - "name": "IFormItem", - "package": "@ui5/webcomponents", - "module": "dist/Form.js" - } - ] + "_ui5since": "2.6.0", + "_ui5privacy": "public" } ], "exports": [ @@ -10468,83 +9811,80 @@ "kind": "js", "name": "default", "declaration": { - "name": "FormItem", - "module": "dist/FormItem.js" + "name": "ExpandableText", + "module": "dist/ExpandableText.js" } }, { "kind": "custom-element-definition", - "name": "ui5-form-item", - "declaration": { - "name": "FormItem", - "module": "dist/FormItem.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/GridWalker.js", - "declarations": [], - "exports": [ - { - "kind": "js", - "name": "default", + "name": "ui5-expandable-text", "declaration": { - "name": "GridWalker", - "module": "dist/GridWalker.js" + "name": "ExpandableText", + "module": "dist/ExpandableText.js" } } ] }, { "kind": "javascript-module", - "path": "dist/Icon.js", + "path": "dist/FileUploader.js", "declarations": [ - { - "kind": "interface", - "name": "IIcon", - "description": "Interface for components that represent an icon, usable in numerous higher-order components", - "_ui5privacy": "public" - }, { "kind": "class", - "description": "### Overview\n\nThe `ui5-icon` component represents an SVG icon.\nThere are two main scenarios how the `ui5-icon` component is used:\nas a purely decorative element,\nor as an interactive element that can be focused and clicked.\n\n### Usage\n\n1. **Get familiar with the icons collections.**\n\nBefore displaying an icon, you need to explore the icons collections to find and import the desired icon.\n\nCurrently there are 3 icons collection, available as 3 npm packages:\n\n- [@ui5/webcomponents-icons](https://www.npmjs.com/package/@ui5/webcomponents-icons) represents the \"SAP-icons\" collection and includes the following\n[icons](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons).\n- [@ui5/webcomponents-icons-tnt](https://www.npmjs.com/package/@ui5/webcomponents-icons-tnt) represents the \"tnt\" collection and includes the following\n[icons](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons-TNT).\n- [@ui5/webcomponents-icons-business-suite](https://www.npmjs.com/package/@ui5/webcomponents-icons-business-suite) represents the \"business-suite\" collection and includes the following\n[icons](https://ui5.sap.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/BusinessSuiteInAppSymbols).\n\n2. **After exploring the icons collections, add one or more of the packages as dependencies to your project.**\n\n`npm i @ui5/webcomponents-icons`\n`npm i @ui5/webcomponents-icons-tnt`\n`npm i @ui5/webcomponents-icons-business-suite`\n\n3. **Then, import the desired icon**.\n\n`import \"@ui5/\\{package_name\\}/dist/\\{icon_name\\}.js\";`\n\n**For Example**:\n\nFor the standard \"SAP-icons\" icon collection, import an icon from the `@ui5/webcomponents-icons` package:\n\n`import \"@ui5/webcomponents-icons/dist/employee.js\";`\n\nFor the \"tnt\" (SAP Fiori Tools) icon collection, import an icon from the `@ui5/webcomponents-icons-tnt` package:\n\n`import \"@ui5/webcomponents-icons-tnt/dist/antenna.js\";`\n\nFor the \"business-suite\" (SAP Business Suite) icon collection, import an icon from the `@ui5/webcomponents-icons-business-suite` package:\n\n`import \"@ui5/webcomponents-icons-business-suite/dist/ab-testing.js\";`\n\n4. **Display the icon using the `ui5-icon` web component.**\nSet the icon collection (\"SAP-icons\", \"tnt\" or \"business-suite\" - \"SAP-icons\" is the default icon collection and can be skipped)\nand the icon name to the `name` property.\n\n`<ui5-icon name=\"employee\"></ui5-icon>`\n`<ui5-icon name=\"tnt/antenna\"></ui5-icon>`\n`<ui5-icon name=\"business-suite/ab-testing\"></ui5-icon>`\n\n### Keyboard Handling\n\n- [Space] / [Enter] or [Return] - Fires the `click` event if the `mode` property is set to `Interactive`.\n- [Shift] - If [Space] / [Enter] or [Return] is pressed, pressing [Shift] releases the ui5-icon without triggering the click event.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Icon.js\";`", - "name": "Icon", - "cssParts": [ + "description": "### Overview\n\nThe `ui5-file-uploader` opens a file explorer dialog and enables users to upload files.\nThe component consists of input field, but you can provide an HTML element by your choice\nto trigger the file upload, by using the default slot.\nFurthermore, you can set the property \"hideInput\" to \"true\" to hide the input field.\n\nTo get all selected files, you can simply use the read-only \"files\" property.\nTo restrict the types of files the user can select, you can use the \"accept\" property.\n\nAnd, similar to all input based components, the FileUploader supports \"valueState\", \"placeholder\", \"name\", and \"disabled\" properties.\n\nFor the `ui5-file-uploader`\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/FileUploader.js\";`", + "name": "FileUploader", + "slots": [ { - "description": "Used to style the outermost wrapper of the `ui5-icon`.", - "name": "root" + "name": "default", + "description": "This slot allows you to add custom content to the component, such as a button or any other interactive element to trigger the file selection dialog.\n\n**Note:** For best accessibility experience, set a `tabindex` of \"-1\" on your interactive element, or it will be set automatically.\nThis slot is intended for use cases where you want a button-only file uploader.\nIt is recommended to set `hideInput` property to \"true\" when using this slot.\nNot setting `hideInput` may negatively impact the screen reader users.", + "_ui5propertyName": "content", + "_ui5type": { + "text": "Array<HTMLElement>" + }, + "_ui5privacy": "public" + }, + { + "name": "valueStateMessage", + "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 component is in `Information`, `Critical` or `Negative` value state.", + "_ui5since": "1.0.0-rc.9", + "_ui5type": { + "text": "Array<HTMLElement>" + }, + "_ui5privacy": "public" } ], "members": [ { "kind": "field", - "name": "design", + "name": "accept", "type": { - "text": "IconDesign", - "references": [ - { - "name": "IconDesign", - "package": "@ui5/webcomponents", - "module": "dist/types/IconDesign.js" - } - ] + "text": "string | undefined" }, - "default": "\"Default\"", - "description": "Defines the component semantic design.", + "description": "Comma-separated list of file types that the component should accept.\n\n**Note:** Please make sure you are adding the `.` in front on the file type, e.g. `.png` in case you want to accept png's only.", + "default": "undefined", + "privacy": "public" + }, + { + "kind": "field", + "name": "accessibleDescription", + "type": { + "text": "string | undefined" + }, + "description": "Defines the accessible description of the component.", + "default": "undefined", "privacy": "public", - "_ui5since": "1.9.2" + "_ui5since": "2.14.0" }, { "kind": "field", - "name": "name", + "name": "accessibleDescriptionRef", "type": { "text": "string | undefined" }, - "description": "Defines the unique identifier (icon name) of the component.\n\nTo browse all available icons, see the\n[SAP Icons](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html),\n[SAP Fiori Tools](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons-TNT) and\n[SAP Business Suite](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html)\n\nExample:\n`name='add'`, `name='delete'`, `name='employee'`.\n\n**Note:** To use the SAP Fiori Tools icons,\nyou need to set the `tnt` prefix in front of the icon's name.\n\nExample:\n`name='tnt/antenna'`, `name='tnt/actor'`, `name='tnt/api'`.\n\n**Note:** To use the SAP Business Suite icons,\nyou need to set the `business-suite` prefix in front of the icon's name.\n\nExample:\n`name='business-suite/3d'`, `name='business-suite/1x2-grid-layout'`, `name='business-suite/4x4-grid-layout'`.", + "description": "Receives id(or many ids) of the elements that describe the input.", "default": "undefined", - "privacy": "public" + "privacy": "public", + "_ui5since": "2.14.0" }, { "kind": "field", @@ -10552,74 +9892,231 @@ "type": { "text": "string | undefined" }, - "description": "Defines the text alternative of the component.\nIf not provided a default text alternative will be set, if present.\n\n**Note:** Every icon should have a text alternative in order to\ncalculate its accessible name.", + "description": "Defines the accessible ARIA name of the component.", "default": "undefined", - "privacy": "public" + "privacy": "public", + "_ui5since": "2.13.0" }, { "kind": "field", - "name": "showTooltip", + "name": "accessibleNameRef", + "type": { + "text": "string | undefined" + }, + "description": "Receives id(or many ids) of the elements that label the input.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.13.0" + }, + { + "kind": "field", + "name": "disabled", "type": { "text": "boolean" }, "default": "false", - "description": "Defines whether the component should have a tooltip.\n\n**Note:** The tooltip text should be provided via the `accessible-name` property.", + "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is completely noninteractive.", "privacy": "public" }, { "kind": "field", - "name": "mode", + "name": "files", "type": { - "text": "IconMode", - "references": [ - { - "name": "IconMode", - "package": "@ui5/webcomponents", - "module": "dist/types/IconMode.js" - } - ] + "text": "FileList | null" }, - "default": "\"Decorative\"", - "description": "Defines the mode of the component.", + "description": "FileList of all selected files.", "privacy": "public", - "_ui5since": "2.0.0" - } - ], - "events": [ + "default": "null", + "readonly": true + }, { - "name": "click", - "_ui5privacy": "public", + "kind": "field", + "name": "hideInput", "type": { - "text": "CustomEvent" + "text": "boolean" }, - "description": "Fired on mouseup, `SPACE` and `ENTER`.\n- on mouse click, the icon fires native `click` event\n- on `SPACE` and `ENTER`, the icon fires custom `click` event", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5since": "2.11.0" - } - ], - "attributes": [ + "default": "false", + "description": "If set to \"true\", the input field of component will not be rendered. Only the default slot that is passed will be rendered.\n\n**Note:** Use this property in combination with the default slot to achieve a button-only file uploader design.", + "privacy": "public" + }, { - "description": "Defines the component semantic design.", - "name": "design", - "default": "\"Default\"", - "fieldName": "design", + "kind": "field", + "name": "maxFileSize", "type": { - "text": "\"Positive\" | \"Critical\" | \"Negative\" | \"Information\" | \"Default\" | \"Contrast\" | \"Neutral\" | \"NonInteractive\"" - } + "text": "number | undefined" + }, + "description": "Defines the maximum file size in megabytes which prevents the upload if at least one file exceeds it.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.2.0" }, { - "description": "Defines the unique identifier (icon name) of the component.\n\nTo browse all available icons, see the\n[SAP Icons](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html),\n[SAP Fiori Tools](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons-TNT) and\n[SAP Business Suite](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html)\n\nExample:\n`name='add'`, `name='delete'`, `name='employee'`.\n\n**Note:** To use the SAP Fiori Tools icons,\nyou need to set the `tnt` prefix in front of the icon's name.\n\nExample:\n`name='tnt/antenna'`, `name='tnt/actor'`, `name='tnt/api'`.\n\n**Note:** To use the SAP Business Suite icons,\nyou need to set the `business-suite` prefix in front of the icon's name.\n\nExample:\n`name='business-suite/3d'`, `name='business-suite/1x2-grid-layout'`, `name='business-suite/4x4-grid-layout'`.", + "kind": "field", + "name": "multiple", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Allows multiple files to be chosen.", + "privacy": "public" + }, + { + "kind": "field", "name": "name", + "type": { + "text": "string | undefined" + }, + "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", "default": "undefined", - "fieldName": "name", + "privacy": "public" + }, + { + "kind": "field", + "name": "placeholder", + "type": { + "text": "string | undefined" + }, + "description": "Defines a short hint intended to aid the user with data entry when the component has no value.", + "default": "undefined", + "privacy": "public" + }, + { + "kind": "field", + "name": "required", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the component is required.", + "privacy": "public", + "_ui5since": "2.13.0" + }, + { + "kind": "field", + "name": "value", + "type": { + "text": "string" + }, + "default": "\"\"", + "description": "Defines the name/names of the file/files to upload.", + "privacy": "public", + "_ui5formProperty": true, + "_ui5formEvents": "change" + }, + { + "kind": "field", + "name": "valueState", + "type": { + "text": "ValueState", + "references": [ + { + "name": "ValueState", + "package": "@ui5/webcomponents-base", + "module": "dist/types/ValueState.js" + } + ] + }, + "default": "\"None\"", + "description": "Defines the value state of the component.", + "privacy": "public" + } + ], + "events": [ + { + "name": "change", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<FileUploaderChangeEventDetail>", + "references": [ + { + "name": "FileUploaderChangeEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/FileUploader.js" + } + ] + }, + "description": "Event is fired when the value of the file path has been changed.\n\n**Note:** Keep in mind that because of the HTML input element of type file, the event is also fired in Chrome browser when the Cancel button of the uploads window is pressed.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5parameters": [ + { + "type": { + "text": "FileList | null" + }, + "name": "files", + "_ui5privacy": "public", + "description": "The current files." + } + ] + }, + { + "name": "file-size-exceed", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<FileUploaderFileSizeExceedEventDetail>", + "references": [ + { + "name": "FileUploaderFileSizeExceedEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/FileUploader.js" + } + ] + }, + "description": "Event is fired when the size of a file is above the `maxFileSize` property value.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5since": "2.2.0", + "_ui5parameters": [ + { + "type": { + "text": "Array<FileData>", + "references": [ + { + "name": "FileData", + "package": "@ui5/webcomponents", + "module": "dist/FileUploader.js" + } + ] + }, + "name": "filesData", + "_ui5privacy": "public", + "description": "An array of `FileData` objects containing the`fileName` and `fileSize` in MB of each file that exceeds the upload limit." + } + ] + } + ], + "attributes": [ + { + "description": "Comma-separated list of file types that the component should accept.\n\n**Note:** Please make sure you are adding the `.` in front on the file type, e.g. `.png` in case you want to accept png's only.", + "name": "accept", + "default": "undefined", + "fieldName": "accept", "type": { "text": "string | undefined" } }, { - "description": "Defines the text alternative of the component.\nIf not provided a default text alternative will be set, if present.\n\n**Note:** Every icon should have a text alternative in order to\ncalculate its accessible name.", + "description": "Defines the accessible description of the component.", + "name": "accessible-description", + "default": "undefined", + "fieldName": "accessibleDescription", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Receives id(or many ids) of the elements that describe the input.", + "name": "accessible-description-ref", + "default": "undefined", + "fieldName": "accessibleDescriptionRef", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the accessible ARIA name of the component.", "name": "accessible-name", "default": "undefined", "fieldName": "accessibleName", @@ -10628,21 +10125,102 @@ } }, { - "description": "Defines whether the component should have a tooltip.\n\n**Note:** The tooltip text should be provided via the `accessible-name` property.", - "name": "show-tooltip", + "description": "Receives id(or many ids) of the elements that label the input.", + "name": "accessible-name-ref", + "default": "undefined", + "fieldName": "accessibleNameRef", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is completely noninteractive.", + "name": "disabled", "default": "false", - "fieldName": "showTooltip", + "fieldName": "disabled", "type": { "text": "boolean" } }, { - "description": "Defines the mode of the component.", - "name": "mode", - "default": "\"Decorative\"", - "fieldName": "mode", + "description": "FileList of all selected files.", + "name": "files", + "default": "null", + "fieldName": "files", "type": { - "text": "\"Image\" | \"Decorative\" | \"Interactive\"" + "text": "any" + } + }, + { + "description": "If set to \"true\", the input field of component will not be rendered. Only the default slot that is passed will be rendered.\n\n**Note:** Use this property in combination with the default slot to achieve a button-only file uploader design.", + "name": "hide-input", + "default": "false", + "fieldName": "hideInput", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines the maximum file size in megabytes which prevents the upload if at least one file exceeds it.", + "name": "max-file-size", + "default": "undefined", + "fieldName": "maxFileSize", + "type": { + "text": "number | undefined" + } + }, + { + "description": "Allows multiple files to be chosen.", + "name": "multiple", + "default": "false", + "fieldName": "multiple", + "type": { + "text": "boolean" + } + }, + { + "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", + "name": "name", + "default": "undefined", + "fieldName": "name", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines a short hint intended to aid the user with data entry when the component has no value.", + "name": "placeholder", + "default": "undefined", + "fieldName": "placeholder", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines whether the component is required.", + "name": "required", + "default": "false", + "fieldName": "required", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines the name/names of the file/files to upload.", + "name": "value", + "default": "\"\"", + "fieldName": "value", + "type": { + "text": "string" + } + }, + { + "description": "Defines the value state of the component.", + "name": "value-state", + "default": "\"None\"", + "fieldName": "valueState", + "type": { + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" } } ], @@ -10651,16 +10229,10 @@ "package": "@ui5/webcomponents-base", "module": "dist/UI5Element.js" }, - "tagName": "ui5-icon", + "tagName": "ui5-file-uploader", "customElement": true, - "_ui5privacy": "public", - "_ui5implements": [ - { - "name": "IIcon", - "package": "@ui5/webcomponents", - "module": "dist/Icon.js" - } - ] + "_ui5since": "1.0.0-rc.6", + "_ui5privacy": "public" } ], "exports": [ @@ -10668,84 +10240,68 @@ "kind": "js", "name": "default", "declaration": { - "name": "Icon", - "module": "dist/Icon.js" + "name": "FileUploader", + "module": "dist/FileUploader.js" } }, { "kind": "custom-element-definition", - "name": "ui5-icon", + "name": "ui5-file-uploader", "declaration": { - "name": "Icon", - "module": "dist/Icon.js" + "name": "FileUploader", + "module": "dist/FileUploader.js" } } ] }, { "kind": "javascript-module", - "path": "dist/Input.js", + "path": "dist/Filters.js", + "declarations": [], + "exports": [] + }, + { + "kind": "javascript-module", + "path": "dist/Form.js", "declarations": [ - { - "kind": "interface", - "name": "IInputSuggestionItem", - "description": "Interface for components that represent a suggestion item, usable in `ui5-input`", - "_ui5privacy": "public" - }, { "kind": "class", - "description": "### Overview\n\nThe `ui5-input` component allows the user to enter and edit text or numeric values in one line.\n\nAdditionally, you can provide `suggestionItems`,\nthat are displayed in a popover right under the input.\n\nThe text field can be editable or read-only (`readonly` property),\nand it can be enabled or disabled (`disabled` property).\nTo visualize semantic states, such as \"Negative\" or \"Critical\", the `valueState` property is provided.\nWhen the user makes changes to the text, the change event is fired,\nwhich enables you to react on any text change.\n\n### Keyboard Handling\nThe `ui5-input` provides the following keyboard shortcuts:\n\n- [Escape] - Closes the suggestion list, if open. If closed or not enabled, cancels changes and reverts to the value which the Input field had when it got the focus.\n- [Enter] or [Return] - If suggestion list is open takes over the current matching item and closes it. If value state or group header is focused, does nothing.\n- [Down] - Focuses the next matching item in the suggestion list. Selection-change event is fired.\n- [Up] - Focuses the previous matching item in the suggestion list. Selection-change event is fired.\n- [Home] - If focus is in the text input, moves caret before the first character. If focus is in the list, highlights the first item and updates the input accordingly.\n- [End] - If focus is in the text input, moves caret after the last character. If focus is in the list, highlights the last item and updates the input accordingly.\n- [Page Up] - If focus is in the list, moves highlight up by page size (10 items by default). If focus is in the input, does nothing.\n- [Page Down] - If focus is in the list, moves highlight down by page size (10 items by default). If focus is in the input, does nothing.\n- [Ctrl]+[Alt]+[F8] or [Command]+[Option]+[F8] - Focuses the first link in the value state message, if available. Pressing [Tab] moves the focus to the next link in the value state message, or closes the value state message if there are no more links.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Input.js\";`", - "name": "Input", + "description": "### Overview\n\nThe Form is a layout component that arranges labels and form fields (like input fields) pairs\ninto a specific number of columns.\n\n**Note:** The Form web component is a layout component, it isn't a replacement for the native `form` HTML element.\nThe Form web component does not provide any APIs for form submission.\n\n### Structure\n\n- **Form** (`ui5-form`) is the top-level container component, responsible for the content layout and responsiveness.\n- **FormGroup** (`ui5-form-group`) enables the grouping of the Form content.\n- **FormItem** (`ui5-form-item`) is a pair of label and form fields and can be used directly in a Form, or as part of a FormGroup.\n\nThe simplest Form (`ui5-form`) consists of a header area on top,\ndisplaying a header text (see the `headingText` property) and content below - an arbitrary number of FormItems (ui5-form-item),\nrepresenting the pairs of label and form fields.\n\nAnd, there is also \"grouping\" available to assist the implementation of richer UIs.\nThis is enabled by the FormGroup (`ui5-form-group`) component.\nIn this case, the Form is structured into FormGroups and each FormGroup consists of FormItems.\n\n### Responsiveness\n\nThe Form component reacts and changes its layout on predefined breakpoints.\nDepending on its size, the Form content (FormGroups and FormItems) gets divided into one or more columns as follows:\n- **S** (< 600px) – 1 column is recommended (default: 1)\n- **M** (600px - 1022px) – up to 2 columns are recommended (default: 1)\n- **L** (1023px - 1439px) - up to 3 columns are recommended (default: 2)\n- **XL** (> 1439px) – up to 6 columns are recommended (default: 3)\n\nTo change the layout, use the `layout` property - f.e. layout=\"S1 M2 L3 XL6\".\n\n### Groups\n\nTo make better use of screen space, there is built-in logic to determine how many columns should a FormGroup occupy.\n\n- **Example #1** (perfect match):\n4 columns and 4 groups: each group will use 1 column.\n\n- **Example #2** (balanced distribution):\n4 columns and 2 groups: each group will use 2 columns.\n6 columns and 2 groups: each group will use 3 columns.\n\n- **Example #3** (unbalanced distribution):\n3 columns and 2 groups: the larger one will use 2 columns, the smaller 1 column.\n5 columns and 3 groups: two of the groups will use 2 columns each, the smallest 1 column.\n\n**Note:** The size of a group element is determined by the number of FormItems assigned to it.\nIn the case of equality, the first in the DOM will use more columns, and the last - fewer columns.\n\n- **Example #4** (more groups than columns):\n3 columns and 4 groups: each FormGroup uses only 1 column, the last FormGroup will wrap on the second row.\n\n### Groups Column Span\n\nTo influence the built-in group distribution, described in the previous section,\nyou can use the FormGroup's `columnSpan` property, that defines how many columns the group should expand to.\n\n### Items Column Span\n\nFormItem's columnSpan property defines how many columns the form item should expand to inside a form group or the form.\n\n### Items Label Span\n\nThe placement of the labels depends on the size of the used column.\nIf there is enough space, the labels are next to their associated fields, otherwise - above the fields.\nBy default, the labels take 4/12 of the FormItem, leaving 8/12 parts to associated fields.\nYou can control what space the labels should take via the `labelSpan` property.\n\n**For example:** To always place the labels on top set: `labelSpan=\"S12 M12 L12 XL12\"` property.\n\n### Items Empty Span\n\nBy default, a form item spans 12 cells, fully divided between its label and field, with no empty space at the end:\n- **Label:** occupies 4 cells.\n- **Field:** occupies 8 cells.\n\nThe `emptySpan` property provides additional layout flexibility by defining empty space at the form item’s end.\n\n**For example:** Setting \"S0 M0 L3 XL3\" (or just \"L3 XL3\") adjusts the layout as follows:\n- **Label:** remains 4 cells.\n- **Field:** is reduced to 5 cells.\n- **Empty space:** 3 cells are added at the end.\n\nGreater values increase the empty space at the end of the form item, reducing the space available for the label and its field.\nHowever, setting `emptySpan` to 1 cell is recommended and typically sufficient to achieve a balanced layout.\n\n### Navigation flow\n\nThe Form component supports two layout options for keyboard navigation:\n\n#### Simple form\n\nIn this \"simple form\" layout, each `ui5-form-item` acts as a standalone group\nwith one item, so focus moves horizontally across the grid from one `ui5-form-item` to the next.\nThis layout is ideal for simpler forms and supports custom arrangements, e.g.,\n\n```\n| 1 | 2 |\n| 3 |\n| 4 | 5 |\n```\n\n#### Complex form\n\nIn this layout, items are grouped into `ui5-form-group` elements, allowing more complex configurations:\n\n- **Single-Column Group**: Focus moves vertically down from one item to the next.\n ```\n | 1 |\n | 2 |\n | 3 |\n ```\n\n- **Multi-Column Group**: Focus moves horizontally within each row, advancing to the next row after completing the current one.\n ```\n | 1 | 4 |\n | 2 | 5 |\n | 3 | 6 |\n ```\n\n### Keyboard Handling\n\n- [Tab] - Moves the focus to the next interactive element within the Form/FormGroup (if available) or to the next element in the tab chain outside the Form\n- [Shift] + [Tab] - Moves the focus to the previous interactive element within the Form/FormGroup (if available) or to the previous element in the tab chain outside the Form\n- [F6] - Moves the focus to the first interactive element of the next FormGroup (if available) or to the next element in the tab chain outside the Form\n- [Shift] + [F6] - Moves the focus to the first interactive element of the previous FormGroup (if available) or to the previous element in the tab chain outside the Form\n\n### ES6 Module Import\n\n- import @ui5/webcomponents/dist/Form.js\";\n- import @ui5/webcomponents/dist/FormGroup.js\";\n- import @ui5/webcomponents/dist/FormItem.js\";", + "name": "Form", "cssParts": [ { - "description": "Used to style the root DOM element of the Input component", - "name": "root" + "description": "Used to style a single column of the form column layout.", + "name": "column" }, { - "description": "Used to style the native input element", - "name": "input" + "description": "Used to style the wrapper of the header.", + "name": "header" }, { - "description": "Used to style the clear icon, which can be pressed to clear user input text", - "name": "clear-icon" + "description": "Used to style the element defining the form column layout.", + "name": "layout" } ], "slots": [ { "name": "default", - "description": "Defines the suggestion items.\n\n**Note:** The suggestions would be displayed only if the `showSuggestions`\nproperty is set to `true`.\n\n**Note:** The `<ui5-suggestion-item>`, `<ui5-suggestion-item-group>` and `ui5-suggestion-item-custom` are recommended to be used as suggestion items.", - "_ui5propertyName": "suggestionItems", - "_ui5type": { - "text": "Array<IInputSuggestionItem>", - "references": [ - { - "name": "IInputSuggestionItem", - "package": "@ui5/webcomponents", - "module": "dist/Input.js" - } - ] - }, - "_ui5privacy": "public" - }, - { - "name": "icon", - "description": "Defines the icon to be displayed in the component.", + "description": "Defines the component content - FormGroups or FormItems.\n\n**Note:** Mixing FormGroups and standalone FormItems (not belonging to a group) is not supported.\nEither use FormGroups and make sure all FormItems are part of a FormGroup, or use just FormItems without any FormGroups.", + "_ui5propertyName": "items", "_ui5type": { - "text": "Array<IIcon>", + "text": "Array<IFormItem>", "references": [ { - "name": "IIcon", + "name": "IFormItem", "package": "@ui5/webcomponents", - "module": "dist/Icon.js" + "module": "dist/Form.js" } ] }, "_ui5privacy": "public" }, { - "name": "valueStateMessage", - "description": "Defines the value state message that will be displayed as pop up under the component.\nThe value state message slot should contain only one root element.\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 component is in `Information`, `Critical` or `Negative` value state.\n\n**Note:** If the component has `suggestionItems`,\nthe `valueStateMessage` would be displayed as part of the same popover, if used on desktop, or dialog - on phone.", - "_ui5since": "1.0.0-rc.6", + "name": "header", + "description": "Defines the component header area.\n\n**Note:** When a `header` is provided, the `headerText` property is ignored.", "_ui5type": { "text": "Array<HTMLElement>" }, @@ -10755,468 +10311,201 @@ "members": [ { "kind": "field", - "name": "disabled", + "name": "accessibleMode", "type": { - "text": "boolean" + "text": "FormAccessibleMode", + "references": [ + { + "name": "FormAccessibleMode", + "package": "@ui5/webcomponents", + "module": "dist/types/FormAccessibleMode.js" + } + ] }, - "default": "false", - "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is completely noninteractive.", - "privacy": "public" + "default": "\"Display\"", + "description": "Defines the accessibility mode of the component in \"edit\" and \"display\" use-cases.\n\nBased on the mode, the component renders different HTML elements and ARIA attributes,\nwhich are appropriate for the use-case.\n\n**Usage:**\n- Set this property to \"Display\", when the form consists of non-editable (e.g. texts) form items.\n- Set this property to \"Edit\", when the form consists of editable (e.g. input fields) form items.", + "privacy": "public", + "_ui5since": "2.16.0" }, { "kind": "field", - "name": "placeholder", + "name": "accessibleName", "type": { "text": "string | undefined" }, - "description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.", + "description": "Defines the accessible ARIA name of the component.", "default": "undefined", - "privacy": "public" - }, - { - "kind": "field", - "name": "readonly", - "type": { - "text": "boolean" - }, - "default": "false", - "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.", - "privacy": "public" + "privacy": "public", + "_ui5since": "2.10.0" }, { "kind": "field", - "name": "required", + "name": "accessibleNameRef", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Defines whether the component is required.", + "description": "Defines id (or many ids) of the element (or elements) that label the component.", + "default": "undefined", "privacy": "public", - "_ui5since": "1.0.0-rc.3" + "_ui5since": "2.16.0" }, { "kind": "field", - "name": "noTypeahead", + "name": "emptySpan", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Defines whether the value will be autcompleted to match an item", + "default": "\"S0 M0 L0 XL0\"", + "description": "Defines the number of cells that are empty at the end of each form item, configurable by breakpoint.\n\nBy default, a form item spans 12 cells, fully divided between its label (4 cells) and field (8 cells), with no empty space at the end.\nThe `emptySpan` provides additional layout flexibility by defining empty space at the form item’s end.\n\n**Note:**\n- The maximum allowable empty space is 10 cells. At least 1 cell each must remain for the label and the field.\n- When `emptySpan` is specified (greater than 0), ensure that the combined value of `emptySpan` and `labelSpan` does not exceed 11. This guarantees a minimum of 1 cell for the field.", "privacy": "public", - "_ui5since": "1.4.0" + "_ui5since": "2.5.0" }, { "kind": "field", - "name": "type", + "name": "headerLevel", "type": { - "text": "InputType", + "text": "TitleLevel", "references": [ { - "name": "InputType", + "name": "TitleLevel", "package": "@ui5/webcomponents", - "module": "dist/types/InputType.js" + "module": "dist/types/TitleLevel.js" } ] }, - "default": "\"Text\"", - "description": "Defines the HTML type of the component.\n\n**Notes:**\n\n- The particular effect of this property differs depending on the browser\nand the current language settings, especially for type `Number`.\n- The property is mostly intended to be used with touch devices\nthat use different soft keyboard layouts depending on the given input type.", - "privacy": "public" + "default": "\"H2\"", + "description": "Defines the compoennt heading level,\nset by the `headerText`.", + "privacy": "public", + "_ui5since": "2.10.0" }, { "kind": "field", - "name": "value", + "name": "headerText", "type": { - "text": "string" + "text": "string | undefined" }, - "default": "\"\"", - "description": "Defines the value of the component.\n\n**Note:** The property is updated upon typing.", - "privacy": "public", - "_ui5formProperty": true, - "_ui5formEvents": "change,input" + "description": "Defines the header text of the component.\n\n**Note:** The property gets overridden by the `header` slot.", + "default": "undefined", + "privacy": "public" }, { "kind": "field", - "name": "valueState", + "name": "itemSpacing", "type": { - "text": "ValueState", + "text": "FormItemSpacing", "references": [ { - "name": "ValueState", - "package": "@ui5/webcomponents-base", - "module": "dist/types/ValueState.js" + "name": "FormItemSpacing", + "package": "@ui5/webcomponents", + "module": "dist/types/FormItemSpacing.js" } ] }, - "default": "\"None\"", - "description": "Defines the value state of the component.", + "default": "\"Normal\"", + "description": "Defines the vertical spacing between form items.\n\n**Note:** If the Form is meant to be switched between \"display\"(\"non-edit\") and \"edit\" modes,\nwe recommend using \"Large\" item spacing in \"display\"(\"non-edit\") mode, and \"Normal\" - for \"edit\" mode,\nto avoid \"jumping\" effect, caused by the hight difference between texts in \"display\"(\"non-edit\") mode and the input fields in \"edit\" mode.", "privacy": "public" }, { "kind": "field", - "name": "name", + "name": "labelSpan", "type": { - "text": "string | undefined" + "text": "string" }, - "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", - "default": "undefined", + "default": "\"S12 M4 L4 XL4\"", + "description": "Defines the width proportion of the labels and fields of a form item by breakpoint.\n\nBy default, the labels take 4/12 (or 1/3) of the form item in M,L and XL sizes,\nand 12/12 in S size, e.g in S the label is on top of its associated field.\n\nThe supported values are between 1 and 12. Greater the number, more space the label will use.\n\n**Note:** If \"12\" is set, the label will be displayed on top of its assosiated field.", "privacy": "public" }, { "kind": "field", - "name": "showSuggestions", + "name": "layout", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Defines whether the component should show suggestions, if such are present.", + "default": "\"S1 M1 L2 XL3\"", + "description": "Defines the number of columns to distribute the form content by breakpoint.\n\nSupported values:\n- `S` - 1 column by default (1 column is recommended)\n- `M` - 1 column by default (up to 2 columns are recommended)\n- `L` - 2 columns by default (up to 3 columns are recommended)\n- `XL` - 3 columns by default (up to 6 columns are recommended)", "privacy": "public" - }, + } + ], + "attributes": [ { - "kind": "field", - "name": "maxlength", + "description": "Defines the accessibility mode of the component in \"edit\" and \"display\" use-cases.\n\nBased on the mode, the component renders different HTML elements and ARIA attributes,\nwhich are appropriate for the use-case.\n\n**Usage:**\n- Set this property to \"Display\", when the form consists of non-editable (e.g. texts) form items.\n- Set this property to \"Edit\", when the form consists of editable (e.g. input fields) form items.", + "name": "accessible-mode", + "default": "\"Display\"", + "fieldName": "accessibleMode", "type": { - "text": "number | undefined" - }, - "description": "Sets the maximum number of characters available in the input field.\n\n**Note:** This property is not compatible with the ui5-input type InputType.Number. If the ui5-input type is set to Number, the maxlength value is ignored.", - "default": "undefined", - "privacy": "public", - "_ui5since": "1.0.0-rc.5" + "text": "\"Display\" | \"Edit\"" + } }, { - "kind": "field", - "name": "accessibleName", - "type": { - "text": "string | undefined" - }, "description": "Defines the accessible ARIA name of the component.", + "name": "accessible-name", "default": "undefined", - "privacy": "public", - "_ui5since": "1.0.0-rc.15" - }, - { - "kind": "field", - "name": "accessibleNameRef", + "fieldName": "accessibleName", "type": { "text": "string | undefined" - }, - "description": "Receives id(or many ids) of the elements that label the input.", - "default": "undefined", - "privacy": "public", - "_ui5since": "1.0.0-rc.15" + } }, { - "kind": "field", - "name": "accessibleDescription", - "type": { - "text": "string | undefined" - }, - "description": "Defines the accessible description of the component.", + "description": "Defines id (or many ids) of the element (or elements) that label the component.", + "name": "accessible-name-ref", "default": "undefined", - "privacy": "public", - "_ui5since": "2.9.0" - }, - { - "kind": "field", - "name": "accessibleDescriptionRef", + "fieldName": "accessibleNameRef", "type": { "text": "string | undefined" - }, - "description": "Receives id(or many ids) of the elements that describe the input.", - "default": "undefined", - "privacy": "public", - "_ui5since": "2.9.0" + } }, { - "kind": "field", - "name": "showClearIcon", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines whether the clear icon of the input will be shown.", - "privacy": "public", - "_ui5since": "1.2.0" - }, - { - "kind": "field", - "name": "open", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines whether the suggestions picker is open.\nThe picker will not open if the `showSuggestions` property is set to `false`, the input is disabled or the input is readonly.\nThe picker will close automatically and `close` event will be fired if the input is not in the viewport.", - "privacy": "public", - "_ui5since": "2.0.0" - }, - { - "kind": "field", - "name": "filter", - "type": { - "text": "InputSuggestionsFilter", - "references": [ - { - "name": "InputSuggestionsFilter", - "package": "@ui5/webcomponents", - "module": "dist/types/InputSuggestionsFilter.js" - } - ] - }, - "description": "Defines the filter type of the component.", - "default": "\"None\"", - "privacy": "public", - "_ui5since": "2.19.0" - } - ], - "events": [ - { - "name": "change", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired when the input operation has finished by pressing Enter or on focusout.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true - }, - { - "name": "input", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired when the value of the component changes at each keystroke,\nand when a suggestion item has been selected.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": true - }, - { - "name": "select", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired when some text has been selected.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5since": "2.0.0" - }, - { - "name": "selection-change", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent<InputSelectionChangeEventDetail>", - "references": [ - { - "name": "InputSelectionChangeEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/Input.js" - } - ] - }, - "description": "Fired when the user navigates to a suggestion item via the ARROW keys,\nas a preview, before the final selection.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5since": "2.0.0", - "_ui5parameters": [ - { - "type": { - "text": "HTMLElement" - }, - "name": "item", - "_ui5privacy": "public", - "description": "The previewed suggestion item." - } - ] - }, - { - "name": "open", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired when the suggestions picker is open.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5since": "2.0.0" - }, - { - "name": "close", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired when the suggestions picker is closed.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": false, - "_ui5since": "2.0.0" - } - ], - "attributes": [ - { - "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is completely noninteractive.", - "name": "disabled", - "default": "false", - "fieldName": "disabled", - "type": { - "text": "boolean" - } - }, - { - "description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.", - "name": "placeholder", - "default": "undefined", - "fieldName": "placeholder", - "type": { - "text": "string | undefined" - } - }, - { - "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.", - "name": "readonly", - "default": "false", - "fieldName": "readonly", - "type": { - "text": "boolean" - } - }, - { - "description": "Defines whether the component is required.", - "name": "required", - "default": "false", - "fieldName": "required", - "type": { - "text": "boolean" - } - }, - { - "description": "Defines whether the value will be autcompleted to match an item", - "name": "no-typeahead", - "default": "false", - "fieldName": "noTypeahead", - "type": { - "text": "boolean" - } - }, - { - "description": "Defines the HTML type of the component.\n\n**Notes:**\n\n- The particular effect of this property differs depending on the browser\nand the current language settings, especially for type `Number`.\n- The property is mostly intended to be used with touch devices\nthat use different soft keyboard layouts depending on the given input type.", - "name": "type", - "default": "\"Text\"", - "fieldName": "type", - "type": { - "text": "\"Text\" | \"Email\" | \"Number\" | \"Password\" | \"Tel\" | \"URL\" | \"Search\"" - } - }, - { - "description": "Defines the value of the component.\n\n**Note:** The property is updated upon typing.", - "name": "value", - "default": "\"\"", - "fieldName": "value", + "description": "Defines the number of cells that are empty at the end of each form item, configurable by breakpoint.\n\nBy default, a form item spans 12 cells, fully divided between its label (4 cells) and field (8 cells), with no empty space at the end.\nThe `emptySpan` provides additional layout flexibility by defining empty space at the form item’s end.\n\n**Note:**\n- The maximum allowable empty space is 10 cells. At least 1 cell each must remain for the label and the field.\n- When `emptySpan` is specified (greater than 0), ensure that the combined value of `emptySpan` and `labelSpan` does not exceed 11. This guarantees a minimum of 1 cell for the field.", + "name": "empty-span", + "default": "\"S0 M0 L0 XL0\"", + "fieldName": "emptySpan", "type": { "text": "string" } }, { - "description": "Defines the value state of the component.", - "name": "value-state", - "default": "\"None\"", - "fieldName": "valueState", - "type": { - "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" - } - }, - { - "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", - "name": "name", - "default": "undefined", - "fieldName": "name", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Defines whether the component should show suggestions, if such are present.", - "name": "show-suggestions", - "default": "false", - "fieldName": "showSuggestions", - "type": { - "text": "boolean" - } - }, - { - "description": "Sets the maximum number of characters available in the input field.\n\n**Note:** This property is not compatible with the ui5-input type InputType.Number. If the ui5-input type is set to Number, the maxlength value is ignored.", - "name": "maxlength", - "default": "undefined", - "fieldName": "maxlength", - "type": { - "text": "number | undefined" - } - }, - { - "description": "Defines the accessible ARIA name of the component.", - "name": "accessible-name", - "default": "undefined", - "fieldName": "accessibleName", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Receives id(or many ids) of the elements that label the input.", - "name": "accessible-name-ref", - "default": "undefined", - "fieldName": "accessibleNameRef", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Defines the accessible description of the component.", - "name": "accessible-description", - "default": "undefined", - "fieldName": "accessibleDescription", + "description": "Defines the compoennt heading level,\nset by the `headerText`.", + "name": "header-level", + "default": "\"H2\"", + "fieldName": "headerLevel", "type": { - "text": "string | undefined" + "text": "\"H1\" | \"H2\" | \"H3\" | \"H4\" | \"H5\" | \"H6\"" } }, { - "description": "Receives id(or many ids) of the elements that describe the input.", - "name": "accessible-description-ref", + "description": "Defines the header text of the component.\n\n**Note:** The property gets overridden by the `header` slot.", + "name": "header-text", "default": "undefined", - "fieldName": "accessibleDescriptionRef", + "fieldName": "headerText", "type": { "text": "string | undefined" } }, { - "description": "Defines whether the clear icon of the input will be shown.", - "name": "show-clear-icon", - "default": "false", - "fieldName": "showClearIcon", + "description": "Defines the vertical spacing between form items.\n\n**Note:** If the Form is meant to be switched between \"display\"(\"non-edit\") and \"edit\" modes,\nwe recommend using \"Large\" item spacing in \"display\"(\"non-edit\") mode, and \"Normal\" - for \"edit\" mode,\nto avoid \"jumping\" effect, caused by the hight difference between texts in \"display\"(\"non-edit\") mode and the input fields in \"edit\" mode.", + "name": "item-spacing", + "default": "\"Normal\"", + "fieldName": "itemSpacing", "type": { - "text": "boolean" + "text": "\"Normal\" | \"Large\"" } }, { - "description": "Defines whether the suggestions picker is open.\nThe picker will not open if the `showSuggestions` property is set to `false`, the input is disabled or the input is readonly.\nThe picker will close automatically and `close` event will be fired if the input is not in the viewport.", - "name": "open", - "default": "false", - "fieldName": "open", + "description": "Defines the width proportion of the labels and fields of a form item by breakpoint.\n\nBy default, the labels take 4/12 (or 1/3) of the form item in M,L and XL sizes,\nand 12/12 in S size, e.g in S the label is on top of its associated field.\n\nThe supported values are between 1 and 12. Greater the number, more space the label will use.\n\n**Note:** If \"12\" is set, the label will be displayed on top of its assosiated field.", + "name": "label-span", + "default": "\"S12 M4 L4 XL4\"", + "fieldName": "labelSpan", "type": { - "text": "boolean" + "text": "string" } }, { - "description": "Defines the filter type of the component.", - "name": "filter", - "default": "\"None\"", - "fieldName": "filter", + "description": "Defines the number of columns to distribute the form content by breakpoint.\n\nSupported values:\n- `S` - 1 column by default (1 column is recommended)\n- `M` - 1 column by default (up to 2 columns are recommended)\n- `L` - 2 columns by default (up to 3 columns are recommended)\n- `XL` - 3 columns by default (up to 6 columns are recommended)", + "name": "layout", + "default": "\"S1 M1 L2 XL3\"", + "fieldName": "layout", "type": { - "text": "\"None\" | \"StartsWithPerTerm\" | \"StartsWith\" | \"Contains\"" + "text": "string" } } ], @@ -11225,9 +10514,17 @@ "package": "@ui5/webcomponents-base", "module": "dist/UI5Element.js" }, - "tagName": "ui5-input", + "tagName": "ui5-form", "customElement": true, + "_ui5since": "2.0.0", "_ui5privacy": "public" + }, + { + "kind": "interface", + "name": "IFormItem", + "description": "Interface for components that can be slotted inside `ui5-form` as items.", + "_ui5privacy": "public", + "_ui5since": "2.0.0" } ], "exports": [ @@ -11235,122 +10532,152 @@ "kind": "js", "name": "default", "declaration": { - "name": "Input", - "module": "dist/Input.js" + "name": "Form", + "module": "dist/Form.js" } }, { "kind": "custom-element-definition", - "name": "ui5-input", + "name": "ui5-form", "declaration": { - "name": "Input", - "module": "dist/Input.js" + "name": "Form", + "module": "dist/Form.js" } } ] }, { "kind": "javascript-module", - "path": "dist/Label.js", + "path": "dist/FormGroup.js", "declarations": [ { "kind": "class", - "description": "### Overview\n\nThe `ui5-label` is a component used to represent a label for elements like input, textarea, select.\nThe `for` property of the `ui5-label` must be the same as the id attribute of the related input element.\nScreen readers read out the label, when the user focuses the labelled control.\n\nThe `ui5-label` appearance can be influenced by properties,\nsuch as `required` and `wrappingType`.\nThe appearance of the Label can be configured in a limited way by using the design property.\nFor a broader choice of designs, you can use custom styles.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Label\";`", - "name": "Label", + "description": "### Overview\n\nThe FormGroup (ui5-form-group) represents a group inside the Form (ui5-form) component\nand it consists of FormItem (ui5-form-item) components.\n\nThe layout of the FormGroup is mostly defined and controlled by the overarching Form (ui5-form) component.\nStill, one can influence the layout via the FormGroup's `columnSpan` property,\nthat defines how many columns the group should expand to.\n\n### Usage\n\nТhe FormGroup (ui5-form-group) allows to split a Form into groups,\ne.g to group FormItems that logically belong together.\n\n### ES6 Module Import\n\n- import @ui5/webcomponents/dist/FormGroup.js\";", + "name": "FormGroup", "slots": [ { - "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.", "name": "default", - "_ui5privacy": "public", + "description": "Defines the items of the component.", + "_ui5propertyName": "items", "_ui5type": { - "text": "Array<Node>" - } + "text": "Array<FormItem>", + "references": [ + { + "name": "FormItem", + "package": "@ui5/webcomponents", + "module": "dist/FormItem.js" + } + ] + }, + "_ui5privacy": "public" } ], "members": [ { "kind": "field", - "name": "for", + "name": "accessibleName", "type": { "text": "string | undefined" }, - "description": "Defines the labeled input by providing its ID.\n\n**Note:** Can be used with both `ui5-input` and native input.", + "description": "Defines the accessible ARIA name of the component.", "default": "undefined", - "privacy": "public" + "privacy": "public", + "_ui5since": "2.16.0" }, { "kind": "field", - "name": "showColon", + "name": "accessibleNameRef", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Defines whether colon is added to the component text.\n\n**Note:** Usually used in forms.", - "privacy": "public" + "description": "Defines id (or many ids) of the element (or elements) that label the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.16.0" }, { "kind": "field", - "name": "required", + "name": "columnSpan", "type": { - "text": "boolean" + "text": "number | undefined" }, - "default": "false", - "description": "Defines whether an asterisk character is added to the component text.\n\n**Note:** Usually indicates that user input (bound with the `for` property) is required.\nIn that case the `required` property of\nthe corresponding input should also be set.", + "description": "Defines column span of the component,\ne.g how many columns the group should span to.", + "default": "undefined", "privacy": "public" }, { "kind": "field", - "name": "wrappingType", + "name": "headerLevel", "type": { - "text": "WrappingType", + "text": "TitleLevel", "references": [ { - "name": "WrappingType", + "name": "TitleLevel", "package": "@ui5/webcomponents", - "module": "dist/types/WrappingType.js" + "module": "dist/types/TitleLevel.js" } ] }, - "default": "\"Normal\"", - "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 words will not be broken based on hyphenation.", + "default": "\"H3\"", + "description": "Defines the compoennt heading level,\nset by the `headerText`.", + "privacy": "public", + "_ui5since": "2.10.0" + }, + { + "kind": "field", + "name": "headerText", + "type": { + "text": "string | undefined" + }, + "description": "Defines header text of the component.", + "default": "undefined", "privacy": "public" } ], "attributes": [ { - "description": "Defines the labeled input by providing its ID.\n\n**Note:** Can be used with both `ui5-input` and native input.", - "name": "for", + "description": "Defines the accessible ARIA name of the component.", + "name": "accessible-name", "default": "undefined", - "fieldName": "for", + "fieldName": "accessibleName", "type": { "text": "string | undefined" } }, { - "description": "Defines whether colon is added to the component text.\n\n**Note:** Usually used in forms.", - "name": "show-colon", - "default": "false", - "fieldName": "showColon", + "description": "Defines id (or many ids) of the element (or elements) that label the component.", + "name": "accessible-name-ref", + "default": "undefined", + "fieldName": "accessibleNameRef", "type": { - "text": "boolean" + "text": "string | undefined" } }, { - "description": "Defines whether an asterisk character is added to the component text.\n\n**Note:** Usually indicates that user input (bound with the `for` property) is required.\nIn that case the `required` property of\nthe corresponding input should also be set.", - "name": "required", - "default": "false", - "fieldName": "required", + "description": "Defines column span of the component,\ne.g how many columns the group should span to.", + "name": "column-span", + "default": "undefined", + "fieldName": "columnSpan", "type": { - "text": "boolean" + "text": "number | undefined" } }, { - "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 words will not be broken based on hyphenation.", - "name": "wrapping-type", - "default": "\"Normal\"", - "fieldName": "wrappingType", + "description": "Defines the compoennt heading level,\nset by the `headerText`.", + "name": "header-level", + "default": "\"H3\"", + "fieldName": "headerLevel", "type": { - "text": "\"None\" | \"Normal\"" + "text": "\"H1\" | \"H2\" | \"H3\" | \"H4\" | \"H5\" | \"H6\"" + } + }, + { + "description": "Defines header text of the component.", + "name": "header-text", + "default": "undefined", + "fieldName": "headerText", + "type": { + "text": "string | undefined" } } ], @@ -11359,9 +10686,17 @@ "package": "@ui5/webcomponents-base", "module": "dist/UI5Element.js" }, - "tagName": "ui5-label", + "tagName": "ui5-form-group", "customElement": true, - "_ui5privacy": "public" + "_ui5since": "2.0.0", + "_ui5privacy": "public", + "_ui5implements": [ + { + "name": "IFormItem", + "package": "@ui5/webcomponents", + "module": "dist/Form.js" + } + ] } ], "exports": [ @@ -11369,232 +10704,216 @@ "kind": "js", "name": "default", "declaration": { - "name": "Label", - "module": "dist/Label.js" + "name": "FormGroup", + "module": "dist/FormGroup.js" } }, { "kind": "custom-element-definition", - "name": "ui5-label", + "name": "ui5-form-group", "declaration": { - "name": "Label", - "module": "dist/Label.js" + "name": "FormGroup", + "module": "dist/FormGroup.js" } } ] }, { "kind": "javascript-module", - "path": "dist/Link.js", + "path": "dist/FormItem.js", "declarations": [ { "kind": "class", - "description": "### Overview\nThe `ui5-link` is a hyperlink component that is used to navigate to other\napps and web pages, or to trigger actions.\nIt is a clickable text element, visualized in such a way that it stands out\nfrom the standard text.\nOn hover, it changes its style to an underlined text to provide additional feedback to the user.\n\n### Usage\n\nYou can set the `ui5-link` to be enabled or disabled.\n\nTo create a visual hierarchy in large lists of links, you can set the less important links as\n`Subtle` or the more important ones as `Emphasized`,\nby using the `design` property.\n\nIf the `href` property is set, the link behaves as the HTML\nanchor tag (`<a></a>`) and opens the specified URL in the given target frame (`target` property).\nTo specify where the linked content is opened, you can use the `target` property.\n\n### Responsive behavior\n\nIf there is not enough space, the text of the `ui5-link` becomes truncated.\nIf the `wrappingType` property is set to `\"Normal\"`, the text is displayed\non several lines instead of being truncated.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Link\";`", - "name": "Link", + "description": "### Overview\n\nThe FormItem (ui5-form-item) represents pair of a label and\none or more components (text or text fields), associated to it.\n\n### Usage\n\nThe FormItem is being used in FormGroup (ui5-form-group) or directly in Form (ui5-form).\n\n### ES6 Module Import\n\n- import @ui5/webcomponents/dist/FormItem.js\";", + "name": "FormItem", "cssParts": [ { - "description": "Used to style the provided icon within the link", - "name": "icon" + "description": "Used to style the content part of the form item.", + "name": "content" }, { - "description": "Used to style the provided endIcon within the link", - "name": "endIcon" + "description": "Used to style the label part of the form item.", + "name": "label" + }, + { + "description": "Used to style the parent element of the label and content parts.", + "name": "layout" } ], "slots": [ { - "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.", "name": "default", - "_ui5privacy": "public", + "description": "Defines the content of the component,\nassociated to `labelContent`.", + "_ui5propertyName": "content", "_ui5type": { - "text": "Array<Node>" - } + "text": "Array<HTMLElement>" + }, + "_ui5privacy": "public" + }, + { + "name": "labelContent", + "description": "Defines the label of the component.", + "_ui5type": { + "text": "Array<HTMLElement>" + }, + "_ui5privacy": "public" } ], "members": [ { "kind": "field", - "name": "disabled", + "name": "columnSpan", "type": { - "text": "boolean" + "text": "number | undefined" }, - "default": "false", - "description": "Defines whether the component is disabled.\n\n**Note:** When disabled, the click event cannot be triggered by the user.", + "description": "Defines the column span of the component,\ne.g how many columns the component should span to.\n\n**Note:** The column span should be a number between 1 and the available columns of the FormGroup (when items are placed in a group)\nor the Form. The available columns can be affected by the FormGroup#columnSpan and/or the Form#layout.\nA number bigger than the available columns won't take effect.", + "default": "undefined", "privacy": "public" - }, + } + ], + "attributes": [ { - "kind": "field", - "name": "tooltip", - "type": { - "text": "string | undefined" - }, - "description": "Defines the tooltip of the component.", + "description": "Defines the column span of the component,\ne.g how many columns the component should span to.\n\n**Note:** The column span should be a number between 1 and the available columns of the FormGroup (when items are placed in a group)\nor the Form. The available columns can be affected by the FormGroup#columnSpan and/or the Form#layout.\nA number bigger than the available columns won't take effect.", + "name": "column-span", "default": "undefined", - "privacy": "public", - "_ui5since": "2.0.0" - }, - { - "kind": "field", - "name": "href", + "fieldName": "columnSpan", "type": { - "text": "string | undefined" - }, - "description": "Defines the component href.\n\n**Note:** Standard hyperlink behavior is supported.", - "default": "undefined", - "privacy": "public" - }, - { - "kind": "field", - "name": "target", - "type": { - "text": "string | undefined" - }, - "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.**", - "default": "undefined", - "privacy": "public" - }, - { - "kind": "field", - "name": "design", - "type": { - "text": "LinkDesign", - "references": [ - { - "name": "LinkDesign", - "package": "@ui5/webcomponents", - "module": "dist/types/LinkDesign.js" - } - ] - }, - "default": "\"Default\"", - "description": "Defines the component design.\n\n**Note:** Avaialble options are `Default`, `Subtle`, and `Emphasized`.", - "privacy": "public" - }, + "text": "number | undefined" + } + } + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-form-item", + "customElement": true, + "_ui5since": "2.0.0", + "_ui5privacy": "public", + "_ui5implements": [ { - "kind": "field", - "name": "interactiveAreaSize", - "type": { - "text": "InteractiveAreaSize", - "references": [ - { - "name": "InteractiveAreaSize", - "package": "@ui5/webcomponents", - "module": "dist/types/InteractiveAreaSize.js" - } - ] - }, - "default": "\"Normal\"", - "description": "Defines the target area size of the link:\n- **InteractiveAreaSize.Normal**: The default target area size.\n- **InteractiveAreaSize.Large**: The target area size is enlarged to 24px in height.\n\n**Note:**The property is designed to make links easier to activate and helps meet the WCAG 2.2 Target Size requirement. It is applicable only for the SAP Horizon themes.\n**Note:**To improve <code>ui5-link</code>'s reliability and usability, it is recommended to use the <code>InteractiveAreaSize.Large</code> value in scenarios where the <code>ui5-link</code> component is placed inside another interactive component, such as a list item or a table cell.\nSetting the <code>interactiveAreaSize</code> property to <code>InteractiveAreaSize.Large</code> increases the <code>ui5-link</code>'s invisible touch area. As a result, the user's intended one-time selection command is more likely to activate the desired <code>ui5-link</code>, with minimal chance of unintentionally activating the underlying component.", - "privacy": "public", - "_ui5since": "2.8.0" - }, + "name": "IFormItem", + "package": "@ui5/webcomponents", + "module": "dist/Form.js" + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "FormItem", + "module": "dist/FormItem.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-form-item", + "declaration": { + "name": "FormItem", + "module": "dist/FormItem.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/GridWalker.js", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "GridWalker", + "module": "dist/GridWalker.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/Icon.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\n\nThe `ui5-icon` component represents an SVG icon.\nThere are two main scenarios how the `ui5-icon` component is used:\nas a purely decorative element,\nor as an interactive element that can be focused and clicked.\n\n### Usage\n\n1. **Get familiar with the icons collections.**\n\nBefore displaying an icon, you need to explore the icons collections to find and import the desired icon.\n\nCurrently there are 3 icons collection, available as 3 npm packages:\n\n- [@ui5/webcomponents-icons](https://www.npmjs.com/package/@ui5/webcomponents-icons) represents the \"SAP-icons\" collection and includes the following\n[icons](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons).\n- [@ui5/webcomponents-icons-tnt](https://www.npmjs.com/package/@ui5/webcomponents-icons-tnt) represents the \"tnt\" collection and includes the following\n[icons](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons-TNT).\n- [@ui5/webcomponents-icons-business-suite](https://www.npmjs.com/package/@ui5/webcomponents-icons-business-suite) represents the \"business-suite\" collection and includes the following\n[icons](https://ui5.sap.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/BusinessSuiteInAppSymbols).\n\n2. **After exploring the icons collections, add one or more of the packages as dependencies to your project.**\n\n`npm i @ui5/webcomponents-icons`\n`npm i @ui5/webcomponents-icons-tnt`\n`npm i @ui5/webcomponents-icons-business-suite`\n\n3. **Then, import the desired icon**.\n\n`import \"@ui5/\\{package_name\\}/dist/\\{icon_name\\}.js\";`\n\n**For Example**:\n\nFor the standard \"SAP-icons\" icon collection, import an icon from the `@ui5/webcomponents-icons` package:\n\n`import \"@ui5/webcomponents-icons/dist/employee.js\";`\n\nFor the \"tnt\" (SAP Fiori Tools) icon collection, import an icon from the `@ui5/webcomponents-icons-tnt` package:\n\n`import \"@ui5/webcomponents-icons-tnt/dist/antenna.js\";`\n\nFor the \"business-suite\" (SAP Business Suite) icon collection, import an icon from the `@ui5/webcomponents-icons-business-suite` package:\n\n`import \"@ui5/webcomponents-icons-business-suite/dist/ab-testing.js\";`\n\n4. **Display the icon using the `ui5-icon` web component.**\nSet the icon collection (\"SAP-icons\", \"tnt\" or \"business-suite\" - \"SAP-icons\" is the default icon collection and can be skipped)\nand the icon name to the `name` property.\n\n`<ui5-icon name=\"employee\"></ui5-icon>`\n`<ui5-icon name=\"tnt/antenna\"></ui5-icon>`\n`<ui5-icon name=\"business-suite/ab-testing\"></ui5-icon>`\n\n### Keyboard Handling\n\n- [Space] / [Enter] or [Return] - Fires the `click` event if the `mode` property is set to `Interactive`.\n- [Shift] - If [Space] / [Enter] or [Return] is pressed, pressing [Shift] releases the ui5-icon without triggering the click event.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Icon.js\";`", + "name": "Icon", + "cssParts": [ { - "kind": "field", - "name": "wrappingType", - "type": { - "text": "WrappingType", - "references": [ - { - "name": "WrappingType", - "package": "@ui5/webcomponents", - "module": "dist/types/WrappingType.js" - } - ] - }, - "default": "\"Normal\"", - "description": "Defines how the text of a component will be displayed when there is not enough space.\n\n**Note:** By default the text will wrap. If \"None\" is set - the text will truncate.", - "privacy": "public" - }, + "description": "Used to style the outermost wrapper of the `ui5-icon`.", + "name": "root" + } + ], + "members": [ { "kind": "field", "name": "accessibleName", "type": { "text": "string | undefined" }, - "description": "Defines the accessible ARIA name of the component.", - "default": "undefined", - "privacy": "public", - "_ui5since": "1.2.0" - }, - { - "kind": "field", - "name": "accessibleNameRef", - "type": { - "text": "string | undefined" - }, - "description": "Receives id(or many ids) of the elements that label the input", + "description": "Defines the text alternative of the component.\nIf not provided a default text alternative will be set, if present.\n\n**Note:** Every icon should have a text alternative in order to\ncalculate its accessible name.", "default": "undefined", - "privacy": "public", - "_ui5since": "1.0.0-rc.15" + "privacy": "public" }, { "kind": "field", - "name": "accessibleRole", + "name": "design", "type": { - "text": "LinkAccessibleRole", + "text": "IconDesign", "references": [ { - "name": "LinkAccessibleRole", + "name": "IconDesign", "package": "@ui5/webcomponents", - "module": "dist/types/LinkAccessibleRole.js" + "module": "dist/types/IconDesign.js" } ] }, - "default": "\"Link\"", - "description": "Defines the ARIA role of the component.\n\n**Note:** Use the <code>LinkAccessibleRole.Button</code> role in cases when navigation is not expected to occur and the href property is not defined.", + "default": "\"Default\"", + "description": "Defines the component semantic design.", "privacy": "public", - "_ui5since": "1.9.0" + "_ui5since": "1.9.2" }, { "kind": "field", - "name": "accessibilityAttributes", + "name": "mode", "type": { - "text": "LinkAccessibilityAttributes", + "text": "IconMode", "references": [ { - "name": "LinkAccessibilityAttributes", + "name": "IconMode", "package": "@ui5/webcomponents", - "module": "dist/Link.js" + "module": "dist/types/IconMode.js" } ] }, - "default": "{}", - "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\nAccepts the following string values: `true` or `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.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.", - "privacy": "public", - "_ui5since": "1.1.0" - }, - { - "kind": "field", - "name": "accessibleDescription", - "type": { - "text": "string | undefined" - }, - "description": "Defines the accessible description of the component.", - "default": "undefined", + "default": "\"Decorative\"", + "description": "Defines the mode of the component.", "privacy": "public", - "_ui5since": "2.5.0" + "_ui5since": "2.0.0" }, { "kind": "field", - "name": "icon", + "name": "name", "type": { "text": "string | undefined" }, - "description": "Defines the icon, displayed as graphical element within the component before the link's text.\nThe SAP-icons font provides numerous options.\n\n**Note:** Usage of icon-only link is not supported, the link must always have a text.\n\n**Note:** We recommend using аn icon in the beginning or the end only, and with text.\n\nSee all the available icons within the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "description": "Defines the unique identifier (icon name) of the component.\n\nTo browse all available icons, see the\n[SAP Icons](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html),\n[SAP Fiori Tools](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons-TNT) and\n[SAP Business Suite](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html)\n\nExample:\n`name='add'`, `name='delete'`, `name='employee'`.\n\n**Note:** To use the SAP Fiori Tools icons,\nyou need to set the `tnt` prefix in front of the icon's name.\n\nExample:\n`name='tnt/antenna'`, `name='tnt/actor'`, `name='tnt/api'`.\n\n**Note:** To use the SAP Business Suite icons,\nyou need to set the `business-suite` prefix in front of the icon's name.\n\nExample:\n`name='business-suite/3d'`, `name='business-suite/1x2-grid-layout'`, `name='business-suite/4x4-grid-layout'`.", "default": "undefined", - "privacy": "public", - "_ui5since": "2.0.0" + "privacy": "public" }, { "kind": "field", - "name": "endIcon", + "name": "showTooltip", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Defines the icon, displayed as graphical element within the component after the link's text.\nThe SAP-icons font provides numerous options.\n\n**Note:** Usage of icon-only link is not supported, the link must always have a text.\n\n**Note:** We recommend using аn icon in the beginning or the end only, and with text.\n\nSee all the available icons within the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", - "default": "undefined", - "privacy": "public", - "_ui5since": "2.0.0" + "default": "false", + "description": "Defines whether the component should have a tooltip.\n\n**Note:** The tooltip text should be provided via the `accessible-name` property.", + "privacy": "public" } ], "events": [ @@ -11602,180 +10921,59 @@ "name": "click", "_ui5privacy": "public", "type": { - "text": "CustomEvent<LinkClickEventDetail>", - "references": [ - { - "name": "LinkClickEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/Link.js" - } - ] + "text": "CustomEvent" }, - "description": "Fired when the component is triggered either with a mouse/tap\nor by using the Enter key.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, + "description": "Fired on mouseup, `SPACE` and `ENTER`.\n- on mouse click, the icon fires native `click` event\n- on `SPACE` and `ENTER`, the icon fires custom `click` event", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, "_ui5Bubbles": true, - "_ui5parameters": [ - { - "type": { - "text": "boolean" - }, - "name": "altKey", - "_ui5privacy": "public", - "description": "Returns whether the \"ALT\" key was pressed when the event was triggered." - }, - { - "type": { - "text": "boolean" - }, - "name": "ctrlKey", - "_ui5privacy": "public", - "description": "Returns whether the \"CTRL\" key was pressed when the event was triggered." - }, - { - "type": { - "text": "boolean" - }, - "name": "metaKey", - "_ui5privacy": "public", - "description": "Returns whether the \"META\" key was pressed when the event was triggered." - }, - { - "type": { - "text": "boolean" - }, - "name": "shiftKey", - "_ui5privacy": "public", - "description": "Returns whether the \"SHIFT\" key was pressed when the event was triggered." - } - ] + "_ui5since": "2.11.0" } ], "attributes": [ { - "description": "Defines whether the component is disabled.\n\n**Note:** When disabled, the click event cannot be triggered by the user.", - "name": "disabled", - "default": "false", - "fieldName": "disabled", - "type": { - "text": "boolean" - } - }, - { - "description": "Defines the tooltip of the component.", - "name": "tooltip", - "default": "undefined", - "fieldName": "tooltip", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Defines the component href.\n\n**Note:** Standard hyperlink behavior is supported.", - "name": "href", - "default": "undefined", - "fieldName": "href", - "type": { - "text": "string | undefined" - } - }, - { - "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.**", - "name": "target", + "description": "Defines the text alternative of the component.\nIf not provided a default text alternative will be set, if present.\n\n**Note:** Every icon should have a text alternative in order to\ncalculate its accessible name.", + "name": "accessible-name", "default": "undefined", - "fieldName": "target", + "fieldName": "accessibleName", "type": { "text": "string | undefined" } }, { - "description": "Defines the component design.\n\n**Note:** Avaialble options are `Default`, `Subtle`, and `Emphasized`.", + "description": "Defines the component semantic design.", "name": "design", "default": "\"Default\"", "fieldName": "design", "type": { - "text": "\"Default\" | \"Emphasized\" | \"Subtle\"" - } - }, - { - "description": "Defines the target area size of the link:\n- **InteractiveAreaSize.Normal**: The default target area size.\n- **InteractiveAreaSize.Large**: The target area size is enlarged to 24px in height.\n\n**Note:**The property is designed to make links easier to activate and helps meet the WCAG 2.2 Target Size requirement. It is applicable only for the SAP Horizon themes.\n**Note:**To improve <code>ui5-link</code>'s reliability and usability, it is recommended to use the <code>InteractiveAreaSize.Large</code> value in scenarios where the <code>ui5-link</code> component is placed inside another interactive component, such as a list item or a table cell.\nSetting the <code>interactiveAreaSize</code> property to <code>InteractiveAreaSize.Large</code> increases the <code>ui5-link</code>'s invisible touch area. As a result, the user's intended one-time selection command is more likely to activate the desired <code>ui5-link</code>, with minimal chance of unintentionally activating the underlying component.", - "name": "interactive-area-size", - "default": "\"Normal\"", - "fieldName": "interactiveAreaSize", - "type": { - "text": "\"Normal\" | \"Large\"" - } - }, - { - "description": "Defines how the text of a component will be displayed when there is not enough space.\n\n**Note:** By default the text will wrap. If \"None\" is set - the text will truncate.", - "name": "wrapping-type", - "default": "\"Normal\"", - "fieldName": "wrappingType", - "type": { - "text": "\"None\" | \"Normal\"" - } - }, - { - "description": "Defines the accessible ARIA name of the component.", - "name": "accessible-name", - "default": "undefined", - "fieldName": "accessibleName", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Receives id(or many ids) of the elements that label the input", - "name": "accessible-name-ref", - "default": "undefined", - "fieldName": "accessibleNameRef", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Defines the ARIA role of the component.\n\n**Note:** Use the <code>LinkAccessibleRole.Button</code> role in cases when navigation is not expected to occur and the href property is not defined.", - "name": "accessible-role", - "default": "\"Link\"", - "fieldName": "accessibleRole", - "type": { - "text": "\"Button\" | \"Link\"" - } - }, - { - "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\nAccepts the following string values: `true` or `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.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.", - "name": "accessibility-attributes", - "default": "{}", - "fieldName": "accessibilityAttributes", - "type": { - "text": "LinkAccessibilityAttributes" + "text": "\"Positive\" | \"Critical\" | \"Negative\" | \"Information\" | \"Default\" | \"Contrast\" | \"Neutral\" | \"NonInteractive\"" } }, { - "description": "Defines the accessible description of the component.", - "name": "accessible-description", - "default": "undefined", - "fieldName": "accessibleDescription", + "description": "Defines the mode of the component.", + "name": "mode", + "default": "\"Decorative\"", + "fieldName": "mode", "type": { - "text": "string | undefined" + "text": "\"Image\" | \"Decorative\" | \"Interactive\"" } }, { - "description": "Defines the icon, displayed as graphical element within the component before the link's text.\nThe SAP-icons font provides numerous options.\n\n**Note:** Usage of icon-only link is not supported, the link must always have a text.\n\n**Note:** We recommend using аn icon in the beginning or the end only, and with text.\n\nSee all the available icons within the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", - "name": "icon", + "description": "Defines the unique identifier (icon name) of the component.\n\nTo browse all available icons, see the\n[SAP Icons](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html),\n[SAP Fiori Tools](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons-TNT) and\n[SAP Business Suite](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html)\n\nExample:\n`name='add'`, `name='delete'`, `name='employee'`.\n\n**Note:** To use the SAP Fiori Tools icons,\nyou need to set the `tnt` prefix in front of the icon's name.\n\nExample:\n`name='tnt/antenna'`, `name='tnt/actor'`, `name='tnt/api'`.\n\n**Note:** To use the SAP Business Suite icons,\nyou need to set the `business-suite` prefix in front of the icon's name.\n\nExample:\n`name='business-suite/3d'`, `name='business-suite/1x2-grid-layout'`, `name='business-suite/4x4-grid-layout'`.", + "name": "name", "default": "undefined", - "fieldName": "icon", + "fieldName": "name", "type": { "text": "string | undefined" } }, { - "description": "Defines the icon, displayed as graphical element within the component after the link's text.\nThe SAP-icons font provides numerous options.\n\n**Note:** Usage of icon-only link is not supported, the link must always have a text.\n\n**Note:** We recommend using аn icon in the beginning or the end only, and with text.\n\nSee all the available icons within the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", - "name": "end-icon", - "default": "undefined", - "fieldName": "endIcon", + "description": "Defines whether the component should have a tooltip.\n\n**Note:** The tooltip text should be provided via the `accessible-name` property.", + "name": "show-tooltip", + "default": "false", + "fieldName": "showTooltip", "type": { - "text": "string | undefined" + "text": "boolean" } } ], @@ -11784,8 +10982,21 @@ "package": "@ui5/webcomponents-base", "module": "dist/UI5Element.js" }, - "tagName": "ui5-link", + "tagName": "ui5-icon", "customElement": true, + "_ui5privacy": "public", + "_ui5implements": [ + { + "name": "IIcon", + "package": "@ui5/webcomponents", + "module": "dist/Icon.js" + } + ] + }, + { + "kind": "interface", + "name": "IIcon", + "description": "Interface for components that represent an icon, usable in numerous higher-order components", "_ui5privacy": "public" } ], @@ -11794,51 +11005,84 @@ "kind": "js", "name": "default", "declaration": { - "name": "Link", - "module": "dist/Link.js" + "name": "Icon", + "module": "dist/Icon.js" } }, { "kind": "custom-element-definition", - "name": "ui5-link", + "name": "ui5-icon", "declaration": { - "name": "Link", - "module": "dist/Link.js" + "name": "Icon", + "module": "dist/Icon.js" } } ] }, { "kind": "javascript-module", - "path": "dist/List.js", + "path": "dist/Input.js", "declarations": [ + { + "kind": "interface", + "name": "IInputSuggestionItem", + "description": "Interface for components that represent a suggestion item, usable in `ui5-input`", + "_ui5privacy": "public" + }, { "kind": "class", - "description": "### Overview\n\nThe `ui5-list` component allows displaying a list of items, advanced keyboard\nhandling support for navigating between items, and predefined modes to improve the development efficiency.\n\nThe `ui5-list` is a container for the available list items:\n\n- `ui5-li`\n- `ui5-li-custom`\n- `ui5-li-group`\n\nTo benefit from the built-in selection mechanism, you can use the available\nselection modes, such as\n`Single`, `Multiple` and `Delete`.\n\nAdditionally, the `ui5-list` provides header, footer, and customization for the list item separators.\n\n### Keyboard Handling\n\n#### Basic Navigation\nThe `ui5-list` provides advanced keyboard handling.\nWhen a list is focused the user can use the following keyboard\nshortcuts in order to perform a navigation:\n\n- [Up] or [Down] - Navigates up and down the items\n- [Home] - Navigates to first item\n- [End] - Navigates to the last item\n\nThe user can use the following keyboard shortcuts to perform actions (such as select, delete),\nwhen the `selectionMode` property is in use:\n\n- [Space] - Select an item (if `type` is 'Active') when `selectionMode` is selection\n- [Delete] - Delete an item if `selectionMode` property is `Delete`\n\n#### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/List.js\";`\n\n`import \"@ui5/webcomponents/dist/ListItemStandard.js\";` (for `ui5-li`)\n\n`import \"@ui5/webcomponents/dist/ListItemCustom.js\";` (for `ui5-li-custom`)\n\n`import \"@ui5/webcomponents/dist/ListItemGroup.js\";` (for `ui5-li-group`)", - "name": "List", + "description": "### Overview\n\nThe `ui5-input` component allows the user to enter and edit text or numeric values in one line.\n\nAdditionally, you can provide `suggestionItems`,\nthat are displayed in a popover right under the input.\n\nThe text field can be editable or read-only (`readonly` property),\nand it can be enabled or disabled (`disabled` property).\nTo visualize semantic states, such as \"Negative\" or \"Critical\", the `valueState` property is provided.\nWhen the user makes changes to the text, the change event is fired,\nwhich enables you to react on any text change.\n\n### Keyboard Handling\nThe `ui5-input` provides the following keyboard shortcuts:\n\n- [Escape] - Closes the suggestion list, if open. If closed or not enabled, cancels changes and reverts to the value which the Input field had when it got the focus.\n- [Enter] or [Return] - If suggestion list is open takes over the current matching item and closes it. If value state or group header is focused, does nothing.\n- [Down] - Focuses the next matching item in the suggestion list. Selection-change event is fired.\n- [Up] - Focuses the previous matching item in the suggestion list. Selection-change event is fired.\n- [Home] - If focus is in the text input, moves caret before the first character. If focus is in the list, highlights the first item and updates the input accordingly.\n- [End] - If focus is in the text input, moves caret after the last character. If focus is in the list, highlights the last item and updates the input accordingly.\n- [Page Up] - If focus is in the list, moves highlight up by page size (10 items by default). If focus is in the input, does nothing.\n- [Page Down] - If focus is in the list, moves highlight down by page size (10 items by default). If focus is in the input, does nothing.\n- [Ctrl]+[Alt]+[F8] or [Command]+[Option]+[F8] - Focuses the first link in the value state message, if available. Pressing [Tab] moves the focus to the next link in the value state message, or closes the value state message if there are no more links.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Input.js\";`", + "name": "Input", "cssParts": [ { - "description": "Used to style the button, that is used for growing of the component", - "name": "growing-button" + "description": "Used to style the clear icon, which can be pressed to clear user input text", + "name": "clear-icon" }, { - "description": "Used to style the button inner element", - "name": "growing-button-inner" + "description": "Used to style the native input element", + "name": "input" + }, + { + "description": "Used to style the root DOM element of the Input component", + "name": "root" } ], "slots": [ { "name": "default", - "description": "Defines the items of the component.\n\n**Note:** Use `ui5-li`, `ui5-li-custom`, and `ui5-li-group` for the intended design.", - "_ui5propertyName": "items", + "description": "Defines the suggestion items.\n\n**Note:** The suggestions would be displayed only if the `showSuggestions`\nproperty is set to `true`.\n\n**Note:** The `<ui5-suggestion-item>`, `<ui5-suggestion-item-group>` and `ui5-suggestion-item-custom` are recommended to be used as suggestion items.", + "_ui5propertyName": "suggestionItems", "_ui5type": { - "text": "Array<ListItemBase | ListItemGroup>" + "text": "Array<IInputSuggestionItem>", + "references": [ + { + "name": "IInputSuggestionItem", + "package": "@ui5/webcomponents", + "module": "dist/Input.js" + } + ] }, "_ui5privacy": "public" }, { - "name": "header", - "description": "Defines the component header.\n\n**Note:** When `header` is set, the\n`headerText` property is ignored.", + "name": "icon", + "description": "Defines the icon to be displayed in the component.", + "_ui5type": { + "text": "Array<IIcon>", + "references": [ + { + "name": "IIcon", + "package": "@ui5/webcomponents", + "module": "dist/Icon.js" + } + ] + }, + "_ui5privacy": "public" + }, + { + "name": "valueStateMessage", + "description": "Defines the value state message that will be displayed as pop up under the component.\nThe value state message slot should contain only one root element.\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 component is in `Information`, `Critical` or `Negative` value state.\n\n**Note:** If the component has `suggestionItems`,\nthe `valueStateMessage` would be displayed as part of the same popover, if used on desktop, or dialog - on phone.", + "_ui5since": "1.0.0-rc.6", "_ui5type": { "text": "Array<HTMLElement>" }, @@ -11848,651 +11092,468 @@ "members": [ { "kind": "field", - "name": "headerText", + "name": "accessibleDescription", "type": { "text": "string | undefined" }, - "description": "Defines the component header text.\n\n**Note:** If `header` is set this property is ignored.", + "description": "Defines the accessible description of the component.", "default": "undefined", - "privacy": "public" + "privacy": "public", + "_ui5since": "2.9.0" }, { "kind": "field", - "name": "footerText", + "name": "accessibleDescriptionRef", "type": { "text": "string | undefined" }, - "description": "Defines the footer text.", + "description": "Receives id(or many ids) of the elements that describe the input.", "default": "undefined", - "privacy": "public" + "privacy": "public", + "_ui5since": "2.9.0" }, { "kind": "field", - "name": "indent", + "name": "accessibleName", + "type": { + "text": "string | undefined" + }, + "description": "Defines the accessible ARIA name of the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.0.0-rc.15" + }, + { + "kind": "field", + "name": "accessibleNameRef", + "type": { + "text": "string | undefined" + }, + "description": "Receives id(or many ids) of the elements that label the input.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.0.0-rc.15" + }, + { + "kind": "field", + "name": "disabled", "type": { "text": "boolean" }, "default": "false", - "description": "Determines whether the component is indented.", + "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is completely noninteractive.", "privacy": "public" }, { "kind": "field", - "name": "selectionMode", + "name": "filter", "type": { - "text": "ListSelectionMode", + "text": "InputSuggestionsFilter", "references": [ { - "name": "ListSelectionMode", + "name": "InputSuggestionsFilter", "package": "@ui5/webcomponents", - "module": "dist/types/ListSelectionMode.js" + "module": "dist/types/InputSuggestionsFilter.js" } ] }, + "description": "Defines the filter type of the component.", "default": "\"None\"", - "description": "Defines the selection mode of the component.", - "privacy": "public" + "privacy": "public", + "_ui5since": "2.19.0" }, { "kind": "field", - "name": "noDataText", + "name": "maxlength", "type": { - "text": "string | undefined" + "text": "number | undefined" }, - "description": "Defines the text that is displayed when the component contains no items.", + "description": "Sets the maximum number of characters available in the input field.\n\n**Note:** This property is not compatible with the ui5-input type InputType.Number. If the ui5-input type is set to Number, the maxlength value is ignored.", "default": "undefined", - "privacy": "public" - }, - { - "kind": "field", - "name": "separators", - "type": { - "text": "ListSeparator", - "references": [ - { - "name": "ListSeparator", - "package": "@ui5/webcomponents", - "module": "dist/types/ListSeparator.js" - } - ] - }, - "default": "\"All\"", - "description": "Defines the item separator style that is used.", - "privacy": "public" - }, - { - "kind": "field", - "name": "growing", - "type": { - "text": "ListGrowingMode", - "references": [ - { - "name": "ListGrowingMode", - "package": "@ui5/webcomponents", - "module": "dist/types/ListGrowingMode.js" - } - ] - }, - "default": "\"None\"", - "description": "Defines whether the component will have growing capability either by pressing a `More` button,\nor via user scroll. In both cases `load-more` event is fired.\n\n**Restrictions:** `growing=\"Scroll\"` is not supported for Internet Explorer,\non IE the component will fallback to `growing=\"Button\"`.", "privacy": "public", - "_ui5since": "1.0.0-rc.13" + "_ui5since": "1.0.0-rc.5" }, { "kind": "field", - "name": "growingButtonText", + "name": "name", "type": { "text": "string | undefined" }, - "description": "Defines the text that will be displayed inside the growing button.\n\n**Note:** If not specified a built-in text will be displayed.\n\n**Note:** This property takes effect if the `growing` property is set to the `Button`.", + "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", "default": "undefined", - "privacy": "public", - "_ui5since": "1.24" + "privacy": "public" }, { "kind": "field", - "name": "loading", + "name": "noTypeahead", "type": { "text": "boolean" }, "default": "false", - "description": "Defines if the component would display a loading indicator over the list.", + "description": "Defines whether the value will be autcompleted to match an item", "privacy": "public", - "_ui5since": "1.0.0-rc.6" - }, - { - "kind": "field", - "name": "loadingDelay", - "type": { - "text": "number" - }, - "default": "1000", - "description": "Defines the delay in milliseconds, after which the loading indicator will show up for this component.", - "privacy": "public" + "_ui5since": "1.4.0" }, { "kind": "field", - "name": "stickyHeader", + "name": "open", "type": { "text": "boolean" }, "default": "false", - "description": "Indicates whether the List header is sticky or not.\nIf stickyHeader is set to true, then whenever you scroll the content or\nthe application, the header of the list will be always visible.", + "description": "Defines whether the suggestions picker is open.\nThe picker will not open if the `showSuggestions` property is set to `false`, the input is disabled or the input is readonly.\nThe picker will close automatically and `close` event will be fired if the input is not in the viewport.", "privacy": "public", - "_ui5since": "2.19.0" + "_ui5since": "2.0.0" }, { "kind": "field", - "name": "accessibleName", + "name": "placeholder", "type": { "text": "string | undefined" }, - "description": "Defines the accessible name of the component.", + "description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.", "default": "undefined", - "privacy": "public", - "_ui5since": "1.0.0-rc.15" + "privacy": "public" }, { "kind": "field", - "name": "accessibilityAttributes", + "name": "readonly", "type": { - "text": "ListAccessibilityAttributes", - "references": [ - { - "name": "ListAccessibilityAttributes", - "package": "@ui5/webcomponents", - "module": "dist/List.js" - } - ] + "text": "boolean" }, - "default": "{}", - "description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following field:\n\n - **growingButton**: `growingButton.name`, `growingButton.description`.\n\n The accessibility attributes support the following values:\n\n- **name**: Defines the accessible ARIA name of the growing button.\nAccepts any string.\n\n- **description**: Defines the accessible ARIA description of the growing button.\nAccepts any string.\n\n **Note:** The `accessibilityAttributes` property is in an experimental state and is a subject to change.", - "privacy": "public", - "_ui5since": "2.13.0" + "default": "false", + "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.", + "privacy": "public" }, { "kind": "field", - "name": "accessibleNameRef", + "name": "required", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Defines the IDs of the elements that label the component.", - "default": "undefined", + "default": "false", + "description": "Defines whether the component is required.", "privacy": "public", - "_ui5since": "1.0.0-rc.15" + "_ui5since": "1.0.0-rc.3" }, { "kind": "field", - "name": "accessibleDescription", + "name": "showClearIcon", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Defines the accessible description of the component.", - "default": "undefined", + "default": "false", + "description": "Defines whether the clear icon of the input will be shown.", "privacy": "public", - "_ui5since": "2.5.0" + "_ui5since": "1.2.0" }, { "kind": "field", - "name": "accessibleDescriptionRef", + "name": "showSuggestions", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Defines the IDs of the elements that describe the component.", - "default": "undefined", - "privacy": "public", - "_ui5since": "2.5.0" + "default": "false", + "description": "Defines whether the component should show suggestions, if such are present.", + "privacy": "public" }, { "kind": "field", - "name": "accessibleRole", + "name": "type", "type": { - "text": "ListAccessibleRole", + "text": "InputType", "references": [ { - "name": "ListAccessibleRole", + "name": "InputType", "package": "@ui5/webcomponents", - "module": "dist/types/ListAccessibleRole.js" + "module": "dist/types/InputType.js" } ] }, - "default": "\"List\"", - "description": "Defines the accessible role of the component.", - "privacy": "public", - "_ui5since": "1.0.0-rc.15" + "default": "\"Text\"", + "description": "Defines the HTML type of the component.\n\n**Notes:**\n\n- The particular effect of this property differs depending on the browser\nand the current language settings, especially for type `Number`.\n- The property is mostly intended to be used with touch devices\nthat use different soft keyboard layouts depending on the given input type.", + "privacy": "public" }, { "kind": "field", - "name": "listItems", + "name": "value", "type": { - "text": "Array<ListItemBase>", - "references": [ - { - "name": "ListItemBase", - "package": "@ui5/webcomponents", - "module": "dist/ListItemBase.js" - } - ] + "text": "string" }, - "description": "Returns an array containing the list item instances without the groups in a flat structure.", - "default": "[]", + "default": "\"\"", + "description": "Defines the value of the component.\n\n**Note:** The property is updated upon typing.", "privacy": "public", - "readonly": true, - "_ui5since": "2.0.0" - } - ], - "events": [ - { - "name": "item-click", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent<ListItemClickEventDetail>", - "references": [ - { - "name": "ListItemClickEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/List.js" - } - ] - }, - "description": "Fired when an item is activated, unless the item's `type` property\nis set to `Inactive`.\n\n**Note**: This event is not triggered by interactions with selection components such as the checkboxes and radio buttons,\nassociated with non-default `selectionMode` values, or if any other **interactive** component\n(such as a button or input) within the list item is directly clicked.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": true, - "_ui5parameters": [ - { - "type": { - "text": "HTMLElement" - }, - "name": "item", - "_ui5privacy": "public", - "description": "The clicked item." - } - ] + "_ui5formProperty": true, + "_ui5formEvents": "change,input" }, { - "name": "item-close", - "_ui5privacy": "public", + "kind": "field", + "name": "valueState", "type": { - "text": "CustomEvent<ListItemCloseEventDetail>", + "text": "ValueState", "references": [ { - "name": "ListItemCloseEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/List.js" + "name": "ValueState", + "package": "@ui5/webcomponents-base", + "module": "dist/types/ValueState.js" } ] }, - "description": "Fired when the `Close` button of any item is clicked\n\n**Note:** This event is only applicable to list items that can be closed (such as notification list items),\nnot to be confused with `item-delete`.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5since": "1.0.0-rc.8", - "_ui5parameters": [ - { - "type": { - "text": "HTMLElement" - }, - "name": "item", - "_ui5privacy": "public", - "description": "the item about to be closed." - } - ] - }, + "default": "\"None\"", + "description": "Defines the value state of the component.", + "privacy": "public" + } + ], + "events": [ { - "name": "item-toggle", + "name": "change", "_ui5privacy": "public", "type": { - "text": "CustomEvent<ListItemToggleEventDetail>", - "references": [ - { - "name": "ListItemToggleEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/List.js" - } - ] + "text": "CustomEvent" }, - "description": "Fired when the `Toggle` button of any item is clicked.\n\n**Note:** This event is only applicable to list items that can be toggled (such as notification group list items).", + "description": "Fired when the input operation has finished by pressing Enter or on focusout.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5since": "1.0.0-rc.8", - "_ui5parameters": [ - { - "type": { - "text": "HTMLElement" - }, - "name": "item", - "_ui5privacy": "public", - "description": "the toggled item." - } - ] + "_ui5Bubbles": true }, { - "name": "item-delete", + "name": "close", "_ui5privacy": "public", "type": { - "text": "CustomEvent<ListItemDeleteEventDetail>", - "references": [ - { - "name": "ListItemDeleteEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/List.js" - } - ] + "text": "CustomEvent" }, - "description": "Fired when the Delete button of any item is pressed.\n\n**Note:** A Delete button is displayed on each item,\nwhen the component `selectionMode` property is set to `Delete`.", + "description": "Fired when the suggestions picker is closed.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5parameters": [ - { - "type": { - "text": "HTMLElement" - }, - "name": "item", - "_ui5privacy": "public", - "description": "the deleted item." - } - ] + "_ui5Bubbles": false, + "_ui5since": "2.0.0" }, { - "name": "selection-change", + "name": "input", "_ui5privacy": "public", "type": { - "text": "CustomEvent<ListSelectionChangeEventDetail>", - "references": [ - { - "name": "ListSelectionChangeEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/List.js" - } - ] + "text": "CustomEvent" }, - "description": "Fired when selection is changed by user interaction\nin `Single`, `SingleStart`, `SingleEnd` and `Multiple` selection modes.", + "description": "Fired when the value of the component changes at each keystroke,\nand when a suggestion item has been selected.", "_ui5Cancelable": true, "_ui5allowPreventDefault": true, - "_ui5Bubbles": true, - "_ui5parameters": [ - { - "type": { - "text": "Array<ListItemBase>", - "references": [ - { - "name": "ListItemBase", - "package": "@ui5/webcomponents", - "module": "dist/ListItemBase.js" - } - ] - }, - "name": "selectedItems", - "_ui5privacy": "public", - "description": "An array of the selected items." - }, - { - "type": { - "text": "Array<ListItemBase>", - "references": [ - { - "name": "ListItemBase", - "package": "@ui5/webcomponents", - "module": "dist/ListItemBase.js" - } - ] - }, - "name": "previouslySelectedItems", - "_ui5privacy": "public", - "description": "An array of the previously selected items." - } - ] + "_ui5Bubbles": true }, { - "name": "load-more", + "name": "open", "_ui5privacy": "public", "type": { "text": "CustomEvent" }, - "description": "Fired when the user scrolls to the bottom of the list.\n\n**Note:** The event is fired when the `growing='Scroll'` property is enabled.", + "description": "Fired when the suggestions picker is open.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, "_ui5Bubbles": true, - "_ui5since": "1.0.0-rc.6" + "_ui5since": "2.0.0" }, { - "name": "move-over", + "name": "select", "_ui5privacy": "public", "type": { - "text": "CustomEvent<ListMoveEventDetail>", - "references": [ - { - "name": "ListMoveEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/List.js" - } - ] + "text": "CustomEvent" }, - "description": "Fired when a movable list item is moved over a potential drop target during a dragging operation.\n\nIf the new position is valid, prevent the default action of the event using `preventDefault()`.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, + "description": "Fired when some text has been selected.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, "_ui5Bubbles": true, - "_ui5since": "2.0.0", - "_ui5parameters": [ - { - "type": { - "text": "object" - }, - "name": "source", - "_ui5privacy": "public", - "description": "Contains information about the moved element under `element` property." - }, - { - "type": { - "text": "object" - }, - "name": "destination", - "_ui5privacy": "public", - "description": "Contains information about the destination of the moved element. Has `element` and `placement` properties." - } - ] + "_ui5since": "2.0.0" }, { - "name": "move", + "name": "selection-change", "_ui5privacy": "public", "type": { - "text": "CustomEvent<ListMoveEventDetail>", + "text": "CustomEvent<InputSelectionChangeEventDetail>", "references": [ { - "name": "ListMoveEventDetail", + "name": "InputSelectionChangeEventDetail", "package": "@ui5/webcomponents", - "module": "dist/List.js" + "module": "dist/Input.js" } ] }, - "description": "Fired when a movable list item is dropped onto a drop target.\n\n**Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action.", + "description": "Fired when the user navigates to a suggestion item via the ARROW keys,\nas a preview, before the final selection.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, "_ui5Bubbles": true, + "_ui5since": "2.0.0", "_ui5parameters": [ { "type": { - "text": "object" - }, - "name": "source", - "_ui5privacy": "public", - "description": "Contains information about the moved element under `element` property." - }, - { - "type": { - "text": "object" + "text": "HTMLElement" }, - "name": "destination", + "name": "item", "_ui5privacy": "public", - "description": "Contains information about the destination of the moved element. Has `element` and `placement` properties." + "description": "The previewed suggestion item." } ] } ], "attributes": [ { - "description": "Defines the component header text.\n\n**Note:** If `header` is set this property is ignored.", - "name": "header-text", + "description": "Defines the accessible description of the component.", + "name": "accessible-description", "default": "undefined", - "fieldName": "headerText", + "fieldName": "accessibleDescription", "type": { "text": "string | undefined" } }, { - "description": "Defines the footer text.", - "name": "footer-text", + "description": "Receives id(or many ids) of the elements that describe the input.", + "name": "accessible-description-ref", "default": "undefined", - "fieldName": "footerText", + "fieldName": "accessibleDescriptionRef", "type": { "text": "string | undefined" } }, { - "description": "Determines whether the component is indented.", - "name": "indent", - "default": "false", - "fieldName": "indent", - "type": { - "text": "boolean" - } - }, - { - "description": "Defines the selection mode of the component.", - "name": "selection-mode", - "default": "\"None\"", - "fieldName": "selectionMode", + "description": "Defines the accessible ARIA name of the component.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", "type": { - "text": "\"None\" | \"Single\" | \"Multiple\" | \"SingleStart\" | \"SingleEnd\" | \"SingleAuto\" | \"Delete\"" + "text": "string | undefined" } }, { - "description": "Defines the text that is displayed when the component contains no items.", - "name": "no-data-text", + "description": "Receives id(or many ids) of the elements that label the input.", + "name": "accessible-name-ref", "default": "undefined", - "fieldName": "noDataText", + "fieldName": "accessibleNameRef", "type": { "text": "string | undefined" } }, { - "description": "Defines the item separator style that is used.", - "name": "separators", - "default": "\"All\"", - "fieldName": "separators", + "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is completely noninteractive.", + "name": "disabled", + "default": "false", + "fieldName": "disabled", "type": { - "text": "\"None\" | \"All\" | \"Inner\"" + "text": "boolean" } }, { - "description": "Defines whether the component will have growing capability either by pressing a `More` button,\nor via user scroll. In both cases `load-more` event is fired.\n\n**Restrictions:** `growing=\"Scroll\"` is not supported for Internet Explorer,\non IE the component will fallback to `growing=\"Button\"`.", - "name": "growing", + "description": "Defines the filter type of the component.", + "name": "filter", "default": "\"None\"", - "fieldName": "growing", + "fieldName": "filter", "type": { - "text": "\"None\" | \"Button\" | \"Scroll\"" + "text": "\"None\" | \"StartsWithPerTerm\" | \"StartsWith\" | \"Contains\"" } }, { - "description": "Defines the text that will be displayed inside the growing button.\n\n**Note:** If not specified a built-in text will be displayed.\n\n**Note:** This property takes effect if the `growing` property is set to the `Button`.", - "name": "growing-button-text", + "description": "Sets the maximum number of characters available in the input field.\n\n**Note:** This property is not compatible with the ui5-input type InputType.Number. If the ui5-input type is set to Number, the maxlength value is ignored.", + "name": "maxlength", "default": "undefined", - "fieldName": "growingButtonText", + "fieldName": "maxlength", "type": { - "text": "string | undefined" + "text": "number | undefined" } }, { - "description": "Defines if the component would display a loading indicator over the list.", - "name": "loading", - "default": "false", - "fieldName": "loading", + "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", + "name": "name", + "default": "undefined", + "fieldName": "name", "type": { - "text": "boolean" + "text": "string | undefined" } }, { - "description": "Defines the delay in milliseconds, after which the loading indicator will show up for this component.", - "name": "loading-delay", - "default": "1000", - "fieldName": "loadingDelay", + "description": "Defines whether the value will be autcompleted to match an item", + "name": "no-typeahead", + "default": "false", + "fieldName": "noTypeahead", "type": { - "text": "number" + "text": "boolean" } }, { - "description": "Indicates whether the List header is sticky or not.\nIf stickyHeader is set to true, then whenever you scroll the content or\nthe application, the header of the list will be always visible.", - "name": "sticky-header", + "description": "Defines whether the suggestions picker is open.\nThe picker will not open if the `showSuggestions` property is set to `false`, the input is disabled or the input is readonly.\nThe picker will close automatically and `close` event will be fired if the input is not in the viewport.", + "name": "open", "default": "false", - "fieldName": "stickyHeader", + "fieldName": "open", "type": { "text": "boolean" } }, { - "description": "Defines the accessible name of the component.", - "name": "accessible-name", + "description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.", + "name": "placeholder", "default": "undefined", - "fieldName": "accessibleName", + "fieldName": "placeholder", "type": { "text": "string | undefined" } }, { - "description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following field:\n\n - **growingButton**: `growingButton.name`, `growingButton.description`.\n\n The accessibility attributes support the following values:\n\n- **name**: Defines the accessible ARIA name of the growing button.\nAccepts any string.\n\n- **description**: Defines the accessible ARIA description of the growing button.\nAccepts any string.\n\n **Note:** The `accessibilityAttributes` property is in an experimental state and is a subject to change.", - "name": "accessibility-attributes", - "default": "{}", - "fieldName": "accessibilityAttributes", + "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.", + "name": "readonly", + "default": "false", + "fieldName": "readonly", "type": { - "text": "ListAccessibilityAttributes" + "text": "boolean" } }, { - "description": "Defines the IDs of the elements that label the component.", - "name": "accessible-name-ref", - "default": "undefined", - "fieldName": "accessibleNameRef", + "description": "Defines whether the component is required.", + "name": "required", + "default": "false", + "fieldName": "required", "type": { - "text": "string | undefined" + "text": "boolean" } }, { - "description": "Defines the accessible description of the component.", - "name": "accessible-description", - "default": "undefined", - "fieldName": "accessibleDescription", + "description": "Defines whether the clear icon of the input will be shown.", + "name": "show-clear-icon", + "default": "false", + "fieldName": "showClearIcon", "type": { - "text": "string | undefined" + "text": "boolean" } }, { - "description": "Defines the IDs of the elements that describe the component.", - "name": "accessible-description-ref", - "default": "undefined", - "fieldName": "accessibleDescriptionRef", + "description": "Defines whether the component should show suggestions, if such are present.", + "name": "show-suggestions", + "default": "false", + "fieldName": "showSuggestions", "type": { - "text": "string | undefined" + "text": "boolean" } }, { - "description": "Defines the accessible role of the component.", - "name": "accessible-role", - "default": "\"List\"", - "fieldName": "accessibleRole", + "description": "Defines the HTML type of the component.\n\n**Notes:**\n\n- The particular effect of this property differs depending on the browser\nand the current language settings, especially for type `Number`.\n- The property is mostly intended to be used with touch devices\nthat use different soft keyboard layouts depending on the given input type.", + "name": "type", + "default": "\"Text\"", + "fieldName": "type", "type": { - "text": "\"List\" | \"Menu\" | \"Tree\" | \"ListBox\"" + "text": "\"Text\" | \"Email\" | \"Number\" | \"Password\" | \"Tel\" | \"URL\" | \"Search\"" } }, { - "description": "Returns an array containing the list item instances without the groups in a flat structure.", - "name": "list-items", - "default": "[]", - "fieldName": "listItems", + "description": "Defines the value of the component.\n\n**Note:** The property is updated upon typing.", + "name": "value", + "default": "\"\"", + "fieldName": "value", "type": { - "text": "any" + "text": "string" + } + }, + { + "description": "Defines the value state of the component.", + "name": "value-state", + "default": "\"None\"", + "fieldName": "valueState", + "type": { + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" } } ], @@ -12501,7 +11562,7 @@ "package": "@ui5/webcomponents-base", "module": "dist/UI5Element.js" }, - "tagName": "ui5-list", + "tagName": "ui5-input", "customElement": true, "_ui5privacy": "public" } @@ -12511,244 +11572,133 @@ "kind": "js", "name": "default", "declaration": { - "name": "List", - "module": "dist/List.js" + "name": "Input", + "module": "dist/Input.js" } }, { "kind": "custom-element-definition", - "name": "ui5-list", + "name": "ui5-input", "declaration": { - "name": "List", - "module": "dist/List.js" + "name": "Input", + "module": "dist/Input.js" } } ] }, { "kind": "javascript-module", - "path": "dist/ListItem.js", + "path": "dist/Label.js", "declarations": [ { "kind": "class", - "description": "A class to serve as a base\nfor the `ListItemStandard` and `ListItemCustom` classes.", - "name": "ListItem", + "description": "### Overview\n\nThe `ui5-label` is a component used to represent a label for elements like input, textarea, select.\nThe `for` property of the `ui5-label` must be the same as the id attribute of the related input element.\nScreen readers read out the label, when the user focuses the labelled control.\n\nThe `ui5-label` appearance can be influenced by properties,\nsuch as `required` and `wrappingType`.\nThe appearance of the Label can be configured in a limited way by using the design property.\nFor a broader choice of designs, you can use custom styles.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Label\";`", + "name": "Label", "slots": [ { - "name": "deleteButton", - "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", + "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.", + "name": "default", + "_ui5privacy": "public", "_ui5type": { - "text": "Array<IButton>", - "references": [ - { - "name": "IButton", - "package": "@ui5/webcomponents", - "module": "dist/Button.js" - } - ] - }, - "_ui5privacy": "public" + "text": "Array<Node>" + } } ], "members": [ { "kind": "field", - "name": "type", + "name": "for", "type": { - "text": "ListItemType", - "references": [ - { - "name": "ListItemType", - "package": "@ui5/webcomponents", - "module": "dist/types/ListItemType.js" - } - ] + "text": "string | undefined" }, - "default": "\"Active\"", - "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.", + "description": "Defines the labeled input by providing its ID.\n\n**Note:** Can be used with both `ui5-input` and native input.", + "default": "undefined", "privacy": "public" }, { "kind": "field", - "name": "accessibilityAttributes", - "type": { - "text": "ListItemAccessibilityAttributes", - "references": [ - { - "name": "ListItemAccessibilityAttributes", - "package": "@ui5/webcomponents", - "module": "dist/ListItem.js" - } - ] - }, - "default": "{}", - "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaSetsize**: Defines the number of items in the current set when not all items in the set are present in the DOM.\n**Note:** The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`.\n\n\t- **ariaPosinset**: Defines an element's number or position in the current set when not all items are present in the DOM.\n\t**Note:** The value 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.", - "privacy": "public", - "_ui5since": "1.15.0" - }, - { - "kind": "field", - "name": "navigated", + "name": "required", "type": { "text": "boolean" }, "default": "false", - "description": "The navigated state of the list item.\nIf set to `true`, a navigation indicator is displayed at the end of the list item.", - "privacy": "public", - "_ui5since": "1.10.0" + "description": "Defines whether an asterisk character is added to the component text.\n\n**Note:** Usually indicates that user input (bound with the `for` property) is required.\nIn that case the `required` property of\nthe corresponding input should also be set.", + "privacy": "public" }, { "kind": "field", - "name": "tooltip", + "name": "showColon", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Defines the text of the tooltip that would be displayed for the list item.", - "default": "undefined", - "privacy": "public", - "_ui5since": "1.23.0" + "default": "false", + "description": "Defines whether colon is added to the component text.\n\n**Note:** Usually used in forms.", + "privacy": "public" }, { "kind": "field", - "name": "highlight", + "name": "wrappingType", "type": { - "text": "Highlight", + "text": "WrappingType", "references": [ { - "name": "Highlight", + "name": "WrappingType", "package": "@ui5/webcomponents", - "module": "dist/types/Highlight.js" + "module": "dist/types/WrappingType.js" } ] }, - "default": "\"None\"", - "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", - "privacy": "public", - "_ui5since": "1.24" - }, - { - "kind": "field", - "name": "selected", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines the selected state of the component.", - "privacy": "public", - "inheritedFrom": { - "name": "ListItemBase", - "module": "dist/ListItemBase.js" - } - } - ], - "events": [ - { - "name": "detail-click", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired when the user clicks on the detail button when type is `Detail`.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true + "default": "\"Normal\"", + "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 words will not be broken based on hyphenation.", + "privacy": "public" } ], "attributes": [ { - "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.", - "name": "type", - "default": "\"Active\"", - "fieldName": "type", - "type": { - "text": "\"Navigation\" | \"Inactive\" | \"Active\" | \"Detail\"" - } - }, - { - "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaSetsize**: Defines the number of items in the current set when not all items in the set are present in the DOM.\n**Note:** The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`.\n\n\t- **ariaPosinset**: Defines an element's number or position in the current set when not all items are present in the DOM.\n\t**Note:** The value 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.", - "name": "accessibility-attributes", - "default": "{}", - "fieldName": "accessibilityAttributes", + "description": "Defines the labeled input by providing its ID.\n\n**Note:** Can be used with both `ui5-input` and native input.", + "name": "for", + "default": "undefined", + "fieldName": "for", "type": { - "text": "ListItemAccessibilityAttributes" + "text": "string | undefined" } }, { - "description": "The navigated state of the list item.\nIf set to `true`, a navigation indicator is displayed at the end of the list item.", - "name": "navigated", + "description": "Defines whether an asterisk character is added to the component text.\n\n**Note:** Usually indicates that user input (bound with the `for` property) is required.\nIn that case the `required` property of\nthe corresponding input should also be set.", + "name": "required", "default": "false", - "fieldName": "navigated", + "fieldName": "required", "type": { "text": "boolean" } }, { - "description": "Defines the text of the tooltip that would be displayed for the list item.", - "name": "tooltip", - "default": "undefined", - "fieldName": "tooltip", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", - "name": "highlight", - "default": "\"None\"", - "fieldName": "highlight", + "description": "Defines whether colon is added to the component text.\n\n**Note:** Usually used in forms.", + "name": "show-colon", + "default": "false", + "fieldName": "showColon", "type": { - "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" + "text": "boolean" } }, { - "description": "Defines the selected state of the component.", - "name": "selected", - "default": "false", - "fieldName": "selected", + "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 words will not be broken based on hyphenation.", + "name": "wrapping-type", + "default": "\"Normal\"", + "fieldName": "wrappingType", "type": { - "text": "boolean" + "text": "\"None\" | \"Normal\"" } } ], - "superclass": { - "name": "ListItemBase", - "package": "@ui5/webcomponents", - "module": "dist/ListItemBase.js" - }, - "customElement": true, - "_ui5privacy": "public", - "_ui5abstract": true - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "ListItem", - "module": "dist/ListItem.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/ListItemBase.js", - "declarations": [ - { - "kind": "class", - "description": "A class to serve as a foundation\nfor the `ListItem` and `ListItemGroupHeader` classes.", - "name": "ListItemBase", "superclass": { "name": "UI5Element", "package": "@ui5/webcomponents-base", "module": "dist/UI5Element.js" }, + "tagName": "ui5-label", "customElement": true, - "_ui5privacy": "public", - "_ui5abstract": true, - "members": [] + "_ui5privacy": "public" } ], "exports": [ @@ -12756,91 +11706,77 @@ "kind": "js", "name": "default", "declaration": { - "name": "ListItemBase", - "module": "dist/ListItemBase.js" + "name": "Label", + "module": "dist/Label.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-label", + "declaration": { + "name": "Label", + "module": "dist/Label.js" } } ] }, { "kind": "javascript-module", - "path": "dist/ListItemCustom.js", + "path": "dist/Link.js", "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.", - "name": "ListItemCustom", + "description": "### Overview\nThe `ui5-link` is a hyperlink component that is used to navigate to other\napps and web pages, or to trigger actions.\nIt is a clickable text element, visualized in such a way that it stands out\nfrom the standard text.\nOn hover, it changes its style to an underlined text to provide additional feedback to the user.\n\n### Usage\n\nYou can set the `ui5-link` to be enabled or disabled.\n\nTo create a visual hierarchy in large lists of links, you can set the less important links as\n`Subtle` or the more important ones as `Emphasized`,\nby using the `design` property.\n\nIf the `href` property is set, the link behaves as the HTML\nanchor tag (`<a></a>`) and opens the specified URL in the given target frame (`target` property).\nTo specify where the linked content is opened, you can use the `target` property.\n\n### Responsive behavior\n\nIf there is not enough space, the text of the `ui5-link` becomes truncated.\nIf the `wrappingType` property is set to `\"Normal\"`, the text is displayed\non several lines instead of being truncated.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Link\";`", + "name": "Link", "cssParts": [ { - "description": "Used to style the main li tag of the list item", - "name": "native-li" - }, - { - "description": "Used to style the content area of the list item", - "name": "content" - }, - { - "description": "Used to style the button rendered when the list item is of type detail", - "name": "detail-button" - }, - { - "description": "Used to style the button rendered when the list item is in delete mode", - "name": "delete-button" - }, - { - "description": "Used to style the radio button rendered when the list item is in single selection mode", - "name": "radio" + "description": "Used to style the provided endIcon within the link", + "name": "endIcon" }, { - "description": "Used to style the checkbox rendered when the list item is in multiple selection mode", - "name": "checkbox" + "description": "Used to style the provided icon within the link", + "name": "icon" } ], "slots": [ { - "description": "Defines the content of the component.", + "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.", "name": "default", "_ui5privacy": "public", "_ui5type": { "text": "Array<Node>" } - }, + } + ], + "members": [ { - "name": "deleteButton", - "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<IButton>", + "kind": "field", + "name": "accessibilityAttributes", + "type": { + "text": "LinkAccessibilityAttributes", "references": [ { - "name": "IButton", + "name": "LinkAccessibilityAttributes", "package": "@ui5/webcomponents", - "module": "dist/Button.js" + "module": "dist/Link.js" } ] }, - "_ui5privacy": "public", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } - } - ], - "members": [ + "default": "{}", + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\nAccepts the following string values: `true` or `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.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.", + "privacy": "public", + "_ui5since": "1.1.0" + }, { "kind": "field", - "name": "movable", + "name": "accessibleDescription", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Defines whether the item is movable.", + "description": "Defines the accessible description of the component.", + "default": "undefined", "privacy": "public", - "_ui5since": "2.0.0", - "inheritedFrom": { - "name": "ListItemBase", - "module": "dist/ListItemBase.js" - } + "_ui5since": "2.5.0" }, { "kind": "field", @@ -12848,455 +11784,332 @@ "type": { "text": "string | undefined" }, - "description": "Defines the text alternative of the component.\n\n**Note**: If not provided a default text alternative will be set, if present.", + "description": "Defines the accessible ARIA name of the component.", "default": "undefined", "privacy": "public", - "_ui5since": "1.0.0-rc.15", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "_ui5since": "1.2.0" }, { "kind": "field", - "name": "type", + "name": "accessibleNameRef", "type": { - "text": "ListItemType", + "text": "string | undefined" + }, + "description": "Receives id(or many ids) of the elements that label the input", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.0.0-rc.15" + }, + { + "kind": "field", + "name": "accessibleRole", + "type": { + "text": "LinkAccessibleRole", "references": [ { - "name": "ListItemType", + "name": "LinkAccessibleRole", "package": "@ui5/webcomponents", - "module": "dist/types/ListItemType.js" + "module": "dist/types/LinkAccessibleRole.js" } ] }, - "default": "\"Active\"", - "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": "\"Link\"", + "description": "Defines the ARIA role of the component.\n\n**Note:** Use the <code>LinkAccessibleRole.Button</code> role in cases when navigation is not expected to occur and the href property is not defined.", "privacy": "public", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "_ui5since": "1.9.0" }, { "kind": "field", - "name": "accessibilityAttributes", + "name": "design", "type": { - "text": "ListItemAccessibilityAttributes", + "text": "LinkDesign", "references": [ { - "name": "ListItemAccessibilityAttributes", + "name": "LinkDesign", "package": "@ui5/webcomponents", - "module": "dist/ListItem.js" + "module": "dist/types/LinkDesign.js" } ] }, - "default": "{}", - "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaSetsize**: Defines the number of items in the current set when not all items in the set are present in the DOM.\n**Note:** The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`.\n\n\t- **ariaPosinset**: Defines an element's number or position in the current set when not all items are present in the DOM.\n\t**Note:** The value 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.", - "privacy": "public", - "_ui5since": "1.15.0", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "default": "\"Default\"", + "description": "Defines the component design.\n\n**Note:** Avaialble options are `Default`, `Subtle`, and `Emphasized`.", + "privacy": "public" }, { "kind": "field", - "name": "navigated", + "name": "disabled", "type": { "text": "boolean" }, "default": "false", - "description": "The navigated state of the list item.\nIf set to `true`, a navigation indicator is displayed at the end of the list item.", - "privacy": "public", - "_ui5since": "1.10.0", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "description": "Defines whether the component is disabled.\n\n**Note:** When disabled, the click event cannot be triggered by the user.", + "privacy": "public" }, { "kind": "field", - "name": "tooltip", + "name": "endIcon", "type": { "text": "string | undefined" }, - "description": "Defines the text of the tooltip that would be displayed for the list item.", + "description": "Defines the icon, displayed as graphical element within the component after the link's text.\nThe SAP-icons font provides numerous options.\n\n**Note:** Usage of icon-only link is not supported, the link must always have a text.\n\n**Note:** We recommend using аn icon in the beginning or the end only, and with text.\n\nSee all the available icons within the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", "default": "undefined", "privacy": "public", - "_ui5since": "1.23.0", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "_ui5since": "2.0.0" }, { "kind": "field", - "name": "highlight", + "name": "href", "type": { - "text": "Highlight", - "references": [ - { - "name": "Highlight", - "package": "@ui5/webcomponents", - "module": "dist/types/Highlight.js" - } - ] + "text": "string | undefined" }, - "default": "\"None\"", - "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", - "privacy": "public", - "_ui5since": "1.24", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "description": "Defines the component href.\n\n**Note:** Standard hyperlink behavior is supported.", + "default": "undefined", + "privacy": "public" }, { "kind": "field", - "name": "selected", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines the selected state of the component.", - "privacy": "public", - "inheritedFrom": { - "name": "ListItemBase", - "module": "dist/ListItemBase.js" - } - } - ], - "attributes": [ - { - "description": "Defines whether the item is movable.", - "name": "movable", - "default": "false", - "fieldName": "movable", - "type": { - "text": "boolean" - } - }, - { - "description": "Defines the text alternative of the component.\n\n**Note**: If not provided a default text alternative will be set, if present.", - "name": "accessible-name", - "default": "undefined", - "fieldName": "accessibleName", + "name": "icon", "type": { "text": "string | undefined" - } - }, - { - "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.", - "name": "type", - "default": "\"Active\"", - "fieldName": "type", - "type": { - "text": "\"Navigation\" | \"Inactive\" | \"Active\" | \"Detail\"" }, - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "description": "Defines the icon, displayed as graphical element within the component before the link's text.\nThe SAP-icons font provides numerous options.\n\n**Note:** Usage of icon-only link is not supported, the link must always have a text.\n\n**Note:** We recommend using аn icon in the beginning or the end only, and with text.\n\nSee all the available icons within the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.0.0" }, { - "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaSetsize**: Defines the number of items in the current set when not all items in the set are present in the DOM.\n**Note:** The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`.\n\n\t- **ariaPosinset**: Defines an element's number or position in the current set when not all items are present in the DOM.\n\t**Note:** The value 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.", - "name": "accessibility-attributes", - "default": "{}", - "fieldName": "accessibilityAttributes", + "kind": "field", + "name": "interactiveAreaSize", "type": { - "text": "ListItemAccessibilityAttributes" + "text": "InteractiveAreaSize", + "references": [ + { + "name": "InteractiveAreaSize", + "package": "@ui5/webcomponents", + "module": "dist/types/InteractiveAreaSize.js" + } + ] }, - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "default": "\"Normal\"", + "description": "Defines the target area size of the link:\n- **InteractiveAreaSize.Normal**: The default target area size.\n- **InteractiveAreaSize.Large**: The target area size is enlarged to 24px in height.\n\n**Note:**The property is designed to make links easier to activate and helps meet the WCAG 2.2 Target Size requirement. It is applicable only for the SAP Horizon themes.\n**Note:**To improve <code>ui5-link</code>'s reliability and usability, it is recommended to use the <code>InteractiveAreaSize.Large</code> value in scenarios where the <code>ui5-link</code> component is placed inside another interactive component, such as a list item or a table cell.\nSetting the <code>interactiveAreaSize</code> property to <code>InteractiveAreaSize.Large</code> increases the <code>ui5-link</code>'s invisible touch area. As a result, the user's intended one-time selection command is more likely to activate the desired <code>ui5-link</code>, with minimal chance of unintentionally activating the underlying component.", + "privacy": "public", + "_ui5since": "2.8.0" }, { - "description": "The navigated state of the list item.\nIf set to `true`, a navigation indicator is displayed at the end of the list item.", - "name": "navigated", - "default": "false", - "fieldName": "navigated", + "kind": "field", + "name": "target", "type": { - "text": "boolean" + "text": "string | undefined" }, - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "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.**", + "default": "undefined", + "privacy": "public" }, { - "description": "Defines the text of the tooltip that would be displayed for the list item.", + "kind": "field", "name": "tooltip", - "default": "undefined", - "fieldName": "tooltip", "type": { "text": "string | undefined" }, - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "description": "Defines the tooltip of the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.0.0" }, { - "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", - "name": "highlight", - "default": "\"None\"", - "fieldName": "highlight", + "kind": "field", + "name": "wrappingType", "type": { - "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" + "text": "WrappingType", + "references": [ + { + "name": "WrappingType", + "package": "@ui5/webcomponents", + "module": "dist/types/WrappingType.js" + } + ] }, - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } - }, - { - "description": "Defines the selected state of the component.", - "name": "selected", - "default": "false", - "fieldName": "selected", - "type": { - "text": "boolean" - }, - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } - } - ], - "superclass": { - "name": "ListItem", - "package": "@ui5/webcomponents", - "module": "dist/ListItem.js" - }, - "tagName": "ui5-li-custom", - "customElement": true, - "_ui5privacy": "public", - "events": [ - { - "name": "detail-click", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired when the user clicks on the detail button when type is `Detail`.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } - } - ] - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "ListItemCustom", - "module": "dist/ListItemCustom.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-li-custom", - "declaration": { - "name": "ListItemCustom", - "module": "dist/ListItemCustom.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/ListItemGroup.js", - "declarations": [ - { - "kind": "class", - "description": "### Overview\nThe `ui5-li-group` is a special list item, used only to create groups of list items.\n\nThis is the item to use inside a `ui5-list`.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents/dist/ListItemGroup.js\";`", - "name": "ListItemGroup", - "cssParts": [ - { - "description": "Used to style the header item of the group", - "name": "header" - } - ], - "slots": [ - { - "name": "default", - "description": "Defines the items of the <code>ui5-li-group</code>.", - "_ui5propertyName": "items", - "_ui5type": { - "text": "Array<ListItemBase>", - "references": [ - { - "name": "ListItemBase", - "package": "@ui5/webcomponents", - "module": "dist/ListItemBase.js" - } - ] - }, - "_ui5privacy": "public" - }, - { - "name": "header", - "description": "Defines the header of the component.\n\n**Note:** Using this slot, the default header text of group and the value of `headerText` property will be overwritten.", - "_ui5type": { - "text": "Array<ListItemBase>", - "references": [ - { - "name": "ListItemBase", - "package": "@ui5/webcomponents", - "module": "dist/ListItemBase.js" - } - ] - }, - "_ui5privacy": "public" - } - ], - "members": [ - { - "kind": "field", - "name": "headerText", - "type": { - "text": "string | undefined" - }, - "description": "Defines the header text of the <code>ui5-li-group</code>.", - "privacy": "public", - "default": "undefined" - }, - { - "kind": "field", - "name": "headerAccessibleName", - "type": { - "text": "string | undefined" - }, - "description": "Defines the accessible name of the header.", - "privacy": "public", - "default": "undefined" - }, - { - "kind": "field", - "name": "wrappingType", - "type": { - "text": "WrappingType", - "references": [ - { - "name": "WrappingType", - "package": "@ui5/webcomponents", - "module": "dist/types/WrappingType.js" - } - ] - }, - "default": "\"None\"", - "description": "Defines if the text of the component should wrap when it's too long.\nWhen set to \"Normal\", the content (title, description) will be wrapped\nusing the `ui5-expandable-text` component.<br/>\n\nThe text can wrap up to 100 characters on small screens (size S) and\nup to 300 characters on larger screens (size M and above). When text exceeds\nthese limits, it truncates with an ellipsis followed by a text expansion trigger.\n\nAvailable options are:\n- `None` (default) - The text will truncate with an ellipsis.\n- `Normal` - The text will wrap (without truncation).", - "privacy": "public", - "_ui5since": "2.15.0" + "default": "\"Normal\"", + "description": "Defines how the text of a component will be displayed when there is not enough space.\n\n**Note:** By default the text will wrap. If \"None\" is set - the text will truncate.", + "privacy": "public" } ], "events": [ { - "name": "move-over", + "name": "click", "_ui5privacy": "public", "type": { - "text": "CustomEvent<ListItemGroupMoveEventDetail>", + "text": "CustomEvent<LinkClickEventDetail>", "references": [ { - "name": "ListItemGroupMoveEventDetail", + "name": "LinkClickEventDetail", "package": "@ui5/webcomponents", - "module": "dist/ListItemGroup.js" + "module": "dist/Link.js" } ] }, - "description": "Fired when a movable list item is moved over a potential drop target during a dragging operation.\n\nIf the new position is valid, prevent the default action of the event using `preventDefault()`.", + "description": "Fired when the component is triggered either with a mouse/tap\nor by using the Enter key.", "_ui5Cancelable": true, "_ui5allowPreventDefault": true, "_ui5Bubbles": true, - "_ui5since": "2.1.0", "_ui5parameters": [ { "type": { - "text": "object" + "text": "boolean" }, - "name": "source", + "name": "altKey", "_ui5privacy": "public", - "description": "Contains information about the moved element under `element` property." + "description": "Returns whether the \"ALT\" key was pressed when the event was triggered." }, { "type": { - "text": "object" + "text": "boolean" }, - "name": "destination", + "name": "ctrlKey", "_ui5privacy": "public", - "description": "Contains information about the destination of the moved element. Has `element` and `placement` properties." - } - ] - }, - { - "name": "move", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent<ListItemGroupMoveEventDetail>", - "references": [ - { - "name": "ListItemGroupMoveEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/ListItemGroup.js" - } - ] - }, - "description": "Fired when a movable list item is dropped onto a drop target.\n\n**Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5since": "2.1.0", - "_ui5parameters": [ + "description": "Returns whether the \"CTRL\" key was pressed when the event was triggered." + }, { "type": { - "text": "object" + "text": "boolean" }, - "name": "source", + "name": "metaKey", "_ui5privacy": "public", - "description": "Contains information about the moved element under `element` property." + "description": "Returns whether the \"META\" key was pressed when the event was triggered." }, { "type": { - "text": "object" + "text": "boolean" }, - "name": "destination", + "name": "shiftKey", "_ui5privacy": "public", - "description": "Contains information about the destination of the moved element. Has `element` and `placement` properties." + "description": "Returns whether the \"SHIFT\" key was pressed when the event was triggered." } ] } ], "attributes": [ { - "description": "Defines the header text of the <code>ui5-li-group</code>.", - "name": "header-text", + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\nAccepts the following string values: `true` or `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.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.", + "name": "accessibility-attributes", + "default": "{}", + "fieldName": "accessibilityAttributes", + "type": { + "text": "LinkAccessibilityAttributes" + } + }, + { + "description": "Defines the accessible description of the component.", + "name": "accessible-description", "default": "undefined", - "fieldName": "headerText", + "fieldName": "accessibleDescription", "type": { "text": "string | undefined" } }, { - "description": "Defines the accessible name of the header.", - "name": "header-accessible-name", + "description": "Defines the accessible ARIA name of the component.", + "name": "accessible-name", "default": "undefined", - "fieldName": "headerAccessibleName", + "fieldName": "accessibleName", "type": { "text": "string | undefined" } }, { - "description": "Defines if the text of the component should wrap when it's too long.\nWhen set to \"Normal\", the content (title, description) will be wrapped\nusing the `ui5-expandable-text` component.<br/>\n\nThe text can wrap up to 100 characters on small screens (size S) and\nup to 300 characters on larger screens (size M and above). When text exceeds\nthese limits, it truncates with an ellipsis followed by a text expansion trigger.\n\nAvailable options are:\n- `None` (default) - The text will truncate with an ellipsis.\n- `Normal` - The text will wrap (without truncation).", + "description": "Receives id(or many ids) of the elements that label the input", + "name": "accessible-name-ref", + "default": "undefined", + "fieldName": "accessibleNameRef", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the ARIA role of the component.\n\n**Note:** Use the <code>LinkAccessibleRole.Button</code> role in cases when navigation is not expected to occur and the href property is not defined.", + "name": "accessible-role", + "default": "\"Link\"", + "fieldName": "accessibleRole", + "type": { + "text": "\"Button\" | \"Link\"" + } + }, + { + "description": "Defines the component design.\n\n**Note:** Avaialble options are `Default`, `Subtle`, and `Emphasized`.", + "name": "design", + "default": "\"Default\"", + "fieldName": "design", + "type": { + "text": "\"Default\" | \"Emphasized\" | \"Subtle\"" + } + }, + { + "description": "Defines whether the component is disabled.\n\n**Note:** When disabled, the click event cannot be triggered by the user.", + "name": "disabled", + "default": "false", + "fieldName": "disabled", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines the icon, displayed as graphical element within the component after the link's text.\nThe SAP-icons font provides numerous options.\n\n**Note:** Usage of icon-only link is not supported, the link must always have a text.\n\n**Note:** We recommend using аn icon in the beginning or the end only, and with text.\n\nSee all the available icons within the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "name": "end-icon", + "default": "undefined", + "fieldName": "endIcon", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the component href.\n\n**Note:** Standard hyperlink behavior is supported.", + "name": "href", + "default": "undefined", + "fieldName": "href", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the icon, displayed as graphical element within the component before the link's text.\nThe SAP-icons font provides numerous options.\n\n**Note:** Usage of icon-only link is not supported, the link must always have a text.\n\n**Note:** We recommend using аn icon in the beginning or the end only, and with text.\n\nSee all the available icons within the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "name": "icon", + "default": "undefined", + "fieldName": "icon", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the target area size of the link:\n- **InteractiveAreaSize.Normal**: The default target area size.\n- **InteractiveAreaSize.Large**: The target area size is enlarged to 24px in height.\n\n**Note:**The property is designed to make links easier to activate and helps meet the WCAG 2.2 Target Size requirement. It is applicable only for the SAP Horizon themes.\n**Note:**To improve <code>ui5-link</code>'s reliability and usability, it is recommended to use the <code>InteractiveAreaSize.Large</code> value in scenarios where the <code>ui5-link</code> component is placed inside another interactive component, such as a list item or a table cell.\nSetting the <code>interactiveAreaSize</code> property to <code>InteractiveAreaSize.Large</code> increases the <code>ui5-link</code>'s invisible touch area. As a result, the user's intended one-time selection command is more likely to activate the desired <code>ui5-link</code>, with minimal chance of unintentionally activating the underlying component.", + "name": "interactive-area-size", + "default": "\"Normal\"", + "fieldName": "interactiveAreaSize", + "type": { + "text": "\"Normal\" | \"Large\"" + } + }, + { + "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.**", + "name": "target", + "default": "undefined", + "fieldName": "target", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the tooltip of the component.", + "name": "tooltip", + "default": "undefined", + "fieldName": "tooltip", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines how the text of a component will be displayed when there is not enough space.\n\n**Note:** By default the text will wrap. If \"None\" is set - the text will truncate.", "name": "wrapping-type", - "default": "\"None\"", + "default": "\"Normal\"", "fieldName": "wrappingType", "type": { "text": "\"None\" | \"Normal\"" @@ -13308,9 +12121,8 @@ "package": "@ui5/webcomponents-base", "module": "dist/UI5Element.js" }, - "tagName": "ui5-li-group", + "tagName": "ui5-link", "customElement": true, - "_ui5since": "2.0.0", "_ui5privacy": "public" } ], @@ -13319,683 +12131,291 @@ "kind": "js", "name": "default", "declaration": { - "name": "ListItemGroup", - "module": "dist/ListItemGroup.js" + "name": "Link", + "module": "dist/Link.js" } }, { "kind": "custom-element-definition", - "name": "ui5-li-group", - "declaration": { - "name": "ListItemGroup", - "module": "dist/ListItemGroup.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/ListItemGroupHeader.js", - "declarations": [], - "exports": [ - { - "kind": "js", - "name": "default", + "name": "ui5-link", "declaration": { - "name": "ListItemGroupHeader", - "module": "dist/ListItemGroupHeader.js" + "name": "Link", + "module": "dist/Link.js" } } ] }, { "kind": "javascript-module", - "path": "dist/ListItemStandard.js", + "path": "dist/List.js", "declarations": [ { "kind": "class", - "description": "The `ui5-li` represents the simplest type of item for a `ui5-list`.\n\nThis is a list item,\nproviding the most common use cases such as `text`,\n`image` and `icon`.", - "name": "ListItemStandard", + "description": "### Overview\n\nThe `ui5-list` component allows displaying a list of items, advanced keyboard\nhandling support for navigating between items, and predefined modes to improve the development efficiency.\n\nThe `ui5-list` is a container for the available list items:\n\n- `ui5-li`\n- `ui5-li-custom`\n- `ui5-li-group`\n\nTo benefit from the built-in selection mechanism, you can use the available\nselection modes, such as\n`Single`, `Multiple` and `Delete`.\n\nAdditionally, the `ui5-list` provides header, footer, and customization for the list item separators.\n\n### Keyboard Handling\n\n#### Basic Navigation\nThe `ui5-list` provides advanced keyboard handling.\nWhen a list is focused the user can use the following keyboard\nshortcuts in order to perform a navigation:\n\n- [Up] or [Down] - Navigates up and down the items\n- [Home] - Navigates to first item\n- [End] - Navigates to the last item\n\nThe user can use the following keyboard shortcuts to perform actions (such as select, delete),\nwhen the `selectionMode` property is in use:\n\n- [Space] - Select an item (if `type` is 'Active') when `selectionMode` is selection\n- [Delete] - Delete an item if `selectionMode` property is `Delete`\n\n#### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/List.js\";`\n\n`import \"@ui5/webcomponents/dist/ListItemStandard.js\";` (for `ui5-li`)\n\n`import \"@ui5/webcomponents/dist/ListItemCustom.js\";` (for `ui5-li-custom`)\n\n`import \"@ui5/webcomponents/dist/ListItemGroup.js\";` (for `ui5-li-group`)", + "name": "List", "cssParts": [ { - "description": "Used to style the title of the list item", - "name": "title" - }, - { - "description": "Used to style the description of the list item", - "name": "description" - }, - { - "description": "Used to style the additionalText of the list item", - "name": "additional-text" - }, - { - "description": "Used to style the icon of the list item", - "name": "icon" - }, - { - "description": "Used to style the main li tag of the list item", - "name": "native-li" - }, - { - "description": "Used to style the content area of the list item", - "name": "content" - }, - { - "description": "Used to style the button rendered when the list item is of type detail", - "name": "detail-button" - }, - { - "description": "Used to style the button rendered when the list item is in delete mode", - "name": "delete-button" - }, - { - "description": "Used to style the radio button rendered when the list item is in single selection mode", - "name": "radio" + "description": "Used to style the button, that is used for growing of the component", + "name": "growing-button" }, { - "description": "Used to style the checkbox rendered when the list item is in multiple selection mode", - "name": "checkbox" + "description": "Used to style the button inner element", + "name": "growing-button-inner" } ], "slots": [ { "name": "default", - "description": "Defines the custom formatted text of the component.\n\n**Note:** For optimal text wrapping and a consistent layout, it is strongly recommended to use the `text` property.\n\nUse the `default` slot only when custom formatting with HTML elements (e.g., `<b>`, `<i>`) is required.\nBe aware that wrapping (via `wrappingType=\"Normal\"`) may not function correctly with custom HTML content in the `default` slot.\n\nIf both `text` and `default` slot are used, the `text` property takes precedence.", - "_ui5propertyName": "content", + "description": "Defines the items of the component.\n\n**Note:** Use `ui5-li`, `ui5-li-custom`, and `ui5-li-group` for the intended design.", + "_ui5propertyName": "items", "_ui5type": { - "text": "Array<Node>" + "text": "Array<ListItemBase | ListItemGroup>" }, "_ui5privacy": "public" }, { - "name": "image", - "description": "**Note:** While the slot allows option for setting custom avatar, to match the\ndesign guidelines, please use the `ui5-avatar` with it's default size - S.\n\n**Note:** If bigger `ui5-avatar` needs to be used, then the size of the\n`ui5-li` should be customized in order to fit.", - "_ui5since": "2.0.0", + "name": "header", + "description": "Defines the component header.\n\n**Note:** When `header` is set, the\n`headerText` property is ignored.", "_ui5type": { "text": "Array<HTMLElement>" }, "_ui5privacy": "public" - }, + } + ], + "members": [ { - "name": "deleteButton", - "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<IButton>", + "kind": "field", + "name": "accessibilityAttributes", + "type": { + "text": "ListAccessibilityAttributes", "references": [ { - "name": "IButton", + "name": "ListAccessibilityAttributes", "package": "@ui5/webcomponents", - "module": "dist/Button.js" + "module": "dist/List.js" } ] }, - "_ui5privacy": "public", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } - } - ], - "members": [ + "default": "{}", + "description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following field:\n\n - **growingButton**: `growingButton.name`, `growingButton.description`.\n\n The accessibility attributes support the following values:\n\n- **name**: Defines the accessible ARIA name of the growing button.\nAccepts any string.\n\n- **description**: Defines the accessible ARIA description of the growing button.\nAccepts any string.\n\n **Note:** The `accessibilityAttributes` property is in an experimental state and is a subject to change.", + "privacy": "public", + "_ui5since": "2.13.0" + }, { "kind": "field", - "name": "text", + "name": "accessibleDescription", "type": { "text": "string | undefined" }, - "description": "Defines the text of the component.", + "description": "Defines the accessible description of the component.", "default": "undefined", "privacy": "public", - "_ui5since": "2.10.0" + "_ui5since": "2.5.0" }, { "kind": "field", - "name": "description", + "name": "accessibleDescriptionRef", "type": { "text": "string | undefined" }, - "description": "Defines the description displayed right under the item text, if such is present.", + "description": "Defines the IDs of the elements that describe the component.", "default": "undefined", "privacy": "public", - "_ui5since": "0.8.0" + "_ui5since": "2.5.0" }, { "kind": "field", - "name": "icon", + "name": "accessibleName", "type": { "text": "string | undefined" }, - "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).", + "description": "Defines the accessible name of the component.", "default": "undefined", - "privacy": "public" - }, - { - "kind": "field", - "name": "iconEnd", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines whether the `icon` should be displayed in the beginning of the list item or in the end.", - "privacy": "public" + "privacy": "public", + "_ui5since": "1.0.0-rc.15" }, { "kind": "field", - "name": "additionalText", + "name": "accessibleNameRef", "type": { "text": "string | undefined" }, - "description": "Defines the `additionalText`, displayed in the end of the list item.", + "description": "Defines the IDs of the elements that label the component.", "default": "undefined", "privacy": "public", "_ui5since": "1.0.0-rc.15" }, { "kind": "field", - "name": "additionalTextState", + "name": "accessibleRole", "type": { - "text": "ValueState", + "text": "ListAccessibleRole", "references": [ { - "name": "ValueState", - "package": "@ui5/webcomponents-base", - "module": "dist/types/ValueState.js" + "name": "ListAccessibleRole", + "package": "@ui5/webcomponents", + "module": "dist/types/ListAccessibleRole.js" } ] }, - "default": "\"None\"", - "description": "Defines the state of the `additionalText`.\n\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", + "default": "\"List\"", + "description": "Defines the accessible role of the component.", "privacy": "public", "_ui5since": "1.0.0-rc.15" }, { "kind": "field", - "name": "movable", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines whether the item is movable.", - "privacy": "public", - "_ui5since": "2.0.0", - "inheritedFrom": { - "name": "ListItemBase", - "module": "dist/ListItemBase.js" - } - }, - { - "kind": "field", - "name": "accessibleName", + "name": "footerText", "type": { "text": "string | undefined" }, - "description": "Defines the text alternative of the component.\nNote: If not provided a default text alternative will be set, if present.", + "description": "Defines the footer text.", "default": "undefined", - "privacy": "public", - "_ui5since": "1.0.0-rc.15", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "privacy": "public" }, { "kind": "field", - "name": "wrappingType", + "name": "growing", "type": { - "text": "WrappingType", + "text": "ListGrowingMode", "references": [ { - "name": "WrappingType", + "name": "ListGrowingMode", "package": "@ui5/webcomponents", - "module": "dist/types/WrappingType.js" + "module": "dist/types/ListGrowingMode.js" } ] }, "default": "\"None\"", - "description": "Defines if the text of the component should wrap when it's too long.\nWhen set to \"Normal\", the content (title, description) will be wrapped\nusing the `ui5-expandable-text` component.<br/>\n\nThe text can wrap up to 100 characters on small screens (size S) and\nup to 300 characters on larger screens (size M and above). When text exceeds\nthese limits, it truncates with an ellipsis followed by a text expansion trigger.\n\nAvailable options are:\n- `None` (default) - The text will truncate with an ellipsis.\n- `Normal` - The text will wrap (without truncation).", + "description": "Defines whether the component will have growing capability either by pressing a `More` button,\nor via user scroll. In both cases `load-more` event is fired.\n\n**Restrictions:** `growing=\"Scroll\"` is not supported for Internet Explorer,\non IE the component will fallback to `growing=\"Button\"`.", "privacy": "public", - "_ui5since": "2.10.0" + "_ui5since": "1.0.0-rc.13" }, { "kind": "field", - "name": "type", + "name": "growingButtonText", "type": { - "text": "ListItemType", - "references": [ - { - "name": "ListItemType", - "package": "@ui5/webcomponents", - "module": "dist/types/ListItemType.js" - } - ] + "text": "string | undefined" }, - "default": "\"Active\"", - "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.", + "description": "Defines the text that will be displayed inside the growing button.\n\n**Note:** If not specified a built-in text will be displayed.\n\n**Note:** This property takes effect if the `growing` property is set to the `Button`.", + "default": "undefined", "privacy": "public", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "_ui5since": "1.24" }, { "kind": "field", - "name": "accessibilityAttributes", + "name": "headerText", "type": { - "text": "ListItemAccessibilityAttributes", - "references": [ - { - "name": "ListItemAccessibilityAttributes", - "package": "@ui5/webcomponents", - "module": "dist/ListItem.js" - } - ] + "text": "string | undefined" }, - "default": "{}", - "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaSetsize**: Defines the number of items in the current set when not all items in the set are present in the DOM.\n**Note:** The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`.\n\n\t- **ariaPosinset**: Defines an element's number or position in the current set when not all items are present in the DOM.\n\t**Note:** The value 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.", - "privacy": "public", - "_ui5since": "1.15.0", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "description": "Defines the component header text.\n\n**Note:** If `header` is set this property is ignored.", + "default": "undefined", + "privacy": "public" }, { "kind": "field", - "name": "navigated", + "name": "indent", "type": { "text": "boolean" }, "default": "false", - "description": "The navigated state of the list item.\nIf set to `true`, a navigation indicator is displayed at the end of the list item.", - "privacy": "public", - "_ui5since": "1.10.0", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } - }, - { - "kind": "field", - "name": "tooltip", - "type": { - "text": "string | undefined" - }, - "description": "Defines the text of the tooltip that would be displayed for the list item.", - "default": "undefined", - "privacy": "public", - "_ui5since": "1.23.0", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "description": "Determines whether the component is indented.", + "privacy": "public" }, { "kind": "field", - "name": "highlight", + "name": "listItems", "type": { - "text": "Highlight", + "text": "Array<ListItemBase>", "references": [ { - "name": "Highlight", + "name": "ListItemBase", "package": "@ui5/webcomponents", - "module": "dist/types/Highlight.js" + "module": "dist/ListItemBase.js" } ] }, - "default": "\"None\"", - "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", + "description": "Returns an array containing the list item instances without the groups in a flat structure.", + "default": "[]", "privacy": "public", - "_ui5since": "1.24", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "readonly": true, + "_ui5since": "2.0.0" }, { "kind": "field", - "name": "selected", + "name": "loading", "type": { "text": "boolean" }, "default": "false", - "description": "Defines the selected state of the component.", + "description": "Defines if the component would display a loading indicator over the list.", "privacy": "public", - "inheritedFrom": { - "name": "ListItemBase", - "module": "dist/ListItemBase.js" - } - } - ], - "attributes": [ - { - "description": "Defines the text of the component.", - "name": "text", - "default": "undefined", - "fieldName": "text", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Defines the description displayed right under the item text, if such is present.", - "name": "description", - "default": "undefined", - "fieldName": "description", - "type": { - "text": "string | undefined" - } - }, - { - "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).", - "name": "icon", - "default": "undefined", - "fieldName": "icon", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Defines whether the `icon` should be displayed in the beginning of the list item or in the end.", - "name": "icon-end", - "default": "false", - "fieldName": "iconEnd", - "type": { - "text": "boolean" - } - }, - { - "description": "Defines the `additionalText`, displayed in the end of the list item.", - "name": "additional-text", - "default": "undefined", - "fieldName": "additionalText", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Defines the state of the `additionalText`.\n\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", - "name": "additional-text-state", - "default": "\"None\"", - "fieldName": "additionalTextState", - "type": { - "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" - } - }, - { - "description": "Defines whether the item is movable.", - "name": "movable", - "default": "false", - "fieldName": "movable", - "type": { - "text": "boolean" - } - }, - { - "description": "Defines the text alternative of the component.\nNote: If not provided a default text alternative will be set, if present.", - "name": "accessible-name", - "default": "undefined", - "fieldName": "accessibleName", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Defines if the text of the component should wrap when it's too long.\nWhen set to \"Normal\", the content (title, description) will be wrapped\nusing the `ui5-expandable-text` component.<br/>\n\nThe text can wrap up to 100 characters on small screens (size S) and\nup to 300 characters on larger screens (size M and above). When text exceeds\nthese limits, it truncates with an ellipsis followed by a text expansion trigger.\n\nAvailable options are:\n- `None` (default) - The text will truncate with an ellipsis.\n- `Normal` - The text will wrap (without truncation).", - "name": "wrapping-type", - "default": "\"None\"", - "fieldName": "wrappingType", - "type": { - "text": "\"None\" | \"Normal\"" - } - }, - { - "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.", - "name": "type", - "default": "\"Active\"", - "fieldName": "type", - "type": { - "text": "\"Navigation\" | \"Inactive\" | \"Active\" | \"Detail\"" - }, - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } - }, - { - "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaSetsize**: Defines the number of items in the current set when not all items in the set are present in the DOM.\n**Note:** The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`.\n\n\t- **ariaPosinset**: Defines an element's number or position in the current set when not all items are present in the DOM.\n\t**Note:** The value 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.", - "name": "accessibility-attributes", - "default": "{}", - "fieldName": "accessibilityAttributes", - "type": { - "text": "ListItemAccessibilityAttributes" - }, - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } - }, - { - "description": "The navigated state of the list item.\nIf set to `true`, a navigation indicator is displayed at the end of the list item.", - "name": "navigated", - "default": "false", - "fieldName": "navigated", - "type": { - "text": "boolean" - }, - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } - }, - { - "description": "Defines the text of the tooltip that would be displayed for the list item.", - "name": "tooltip", - "default": "undefined", - "fieldName": "tooltip", - "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "_ui5since": "1.0.0-rc.6" }, { - "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", - "name": "highlight", - "default": "\"None\"", - "fieldName": "highlight", + "kind": "field", + "name": "loadingDelay", "type": { - "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" + "text": "number" }, - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "default": "1000", + "description": "Defines the delay in milliseconds, after which the loading indicator will show up for this component.", + "privacy": "public" }, - { - "description": "Defines the selected state of the component.", - "name": "selected", - "default": "false", - "fieldName": "selected", - "type": { - "text": "boolean" - }, - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } - } - ], - "superclass": { - "name": "ListItem", - "package": "@ui5/webcomponents", - "module": "dist/ListItem.js" - }, - "tagName": "ui5-li", - "customElement": true, - "_ui5privacy": "public", - "events": [ - { - "name": "detail-click", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired when the user clicks on the detail button when type is `Detail`.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } - } - ] - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "ListItemStandard", - "module": "dist/ListItemStandard.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-li", - "declaration": { - "name": "ListItemStandard", - "module": "dist/ListItemStandard.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/Menu.js", - "declarations": [ - { - "kind": "interface", - "name": "IMenuItem", - "description": "Interface for components that may be slotted inside a `ui5-menu`.\n\n**Note:** Use with `ui5-menu-item` or `ui5-menu-separator`. Implementing the interface does not guarantee that any other classes can work with the `ui5-menu`.", - "_ui5privacy": "public" - }, - { - "kind": "class", - "description": "### Overview\n\n`ui5-menu` component represents a hierarchical menu structure.\n\n### Structure\n\nThe `ui5-menu` can hold two types of entities:\n\n- `ui5-menu-item` components\n- `ui5-menu-separator` - used to separate menu items with a line\n\nAn arbitrary hierarchy structure can be represented by recursively nesting menu items.\n\n### Keyboard Handling\n\nThe `ui5-menu` provides advanced keyboard handling.\nThe user can use the following keyboard shortcuts in order to navigate trough the tree:\n\n- `Arrow Up` / `Arrow Down` - Navigates up and down the menu items that are currently visible.\n- `Arrow Right`, `Space` or `Enter` - Opens a sub-menu if there are menu items nested\nin the currently clicked menu item.\n- `Arrow Left` or `Escape` - Closes the currently opened sub-menu.\n\nwhen there is `endContent` :\n- `Arrow Left` or `ArrowRight` - Navigate between the menu item actions and the menu item itself\n- `Arrow Up` / `Arrow Down` - Navigates up and down the currently visible menu items\n\n**Note:** If the text direction is set to Right-to-left (RTL), `Arrow Right` and `Arrow Left` functionality is swapped.\n\nApplication developers are responsible for ensuring that interactive elements placed in the `endContent` slot\nhave the correct accessibility behaviour, including their enabled or disabled states.\nThe menu does not manage these aspects when the menu item state changes.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Menu.js\";`", - "name": "Menu", - "slots": [ - { - "name": "default", - "description": "Defines the items of this component.\n\n**Note:** Use `ui5-menu-item` and `ui5-menu-separator` for their intended design.", - "_ui5propertyName": "items", - "_ui5type": { - "text": "Array<IMenuItem>", - "references": [ - { - "name": "IMenuItem", - "package": "@ui5/webcomponents", - "module": "dist/Menu.js" - } - ] - }, - "_ui5privacy": "public" - } - ], - "members": [ { "kind": "field", - "name": "headerText", + "name": "noDataText", "type": { "text": "string | undefined" }, - "description": "Defines the header text of the menu (displayed on mobile).", + "description": "Defines the text that is displayed when the component contains no items.", "default": "undefined", "privacy": "public" }, { "kind": "field", - "name": "open", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Indicates if the menu is open.", - "privacy": "public", - "_ui5since": "1.10.0" - }, - { - "kind": "field", - "name": "placement", + "name": "selectionMode", "type": { - "text": "PopoverPlacement", + "text": "ListSelectionMode", "references": [ { - "name": "PopoverPlacement", + "name": "ListSelectionMode", "package": "@ui5/webcomponents", - "module": "dist/types/PopoverPlacement.js" + "module": "dist/types/ListSelectionMode.js" } ] }, - "default": "\"Bottom\"", - "description": "Determines on which side the component is placed at.", - "privacy": "public", - "_ui5since": "2.16.0" + "default": "\"None\"", + "description": "Defines the selection mode of the component.", + "privacy": "public" }, { "kind": "field", - "name": "horizontalAlign", + "name": "separators", "type": { - "text": "PopoverHorizontalAlign", + "text": "ListSeparator", "references": [ { - "name": "PopoverHorizontalAlign", + "name": "ListSeparator", "package": "@ui5/webcomponents", - "module": "dist/types/PopoverHorizontalAlign.js" + "module": "dist/types/ListSeparator.js" } ] }, - "default": "\"Start\"", - "description": "Determines the horizontal alignment of the menu relative to its opener control.", + "default": "\"All\"", + "description": "Defines the item separator style that is used.", "privacy": "public" }, { "kind": "field", - "name": "loading", + "name": "stickyHeader", "type": { "text": "boolean" }, "default": "false", - "description": "Defines if a loading indicator would be displayed inside the corresponding ui5-menu popover.", - "privacy": "public", - "_ui5since": "1.13.0" - }, - { - "kind": "field", - "name": "loadingDelay", - "type": { - "text": "number" - }, - "default": "1000", - "description": "Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding ui5-menu popover.", - "privacy": "public", - "_ui5since": "1.13.0" - }, - { - "kind": "field", - "name": "opener", - "type": { - "text": "HTMLElement | string | null | undefined" - }, - "description": "Defines the ID or DOM Reference of the element at which the menu is shown.\nWhen using this attribute in a declarative way, you must only use the `id` (as a string) of the element at which you want to show the popover.\nYou can only set the `opener` attribute to a DOM Reference when using JavaScript.", + "description": "Indicates whether the List header is sticky or not.\nIf stickyHeader is set to true, then whenever you scroll the content or\nthe application, the header of the list will be always visible.", "privacy": "public", - "default": "undefined", - "_ui5since": "1.10.0" + "_ui5since": "2.19.0" } ], "events": [ @@ -14003,19 +12423,19 @@ "name": "item-click", "_ui5privacy": "public", "type": { - "text": "CustomEvent<MenuItemClickEventDetail>", + "text": "CustomEvent<ListItemClickEventDetail>", "references": [ { - "name": "MenuItemClickEventDetail", + "name": "ListItemClickEventDetail", "package": "@ui5/webcomponents", - "module": "dist/Menu.js" + "module": "dist/List.js" } ] }, - "description": "Fired when an item is being clicked.\n\n**Note:** Since 1.17.0 the event is preventable, allowing the menu to remain open after an item is pressed.", + "description": "Fired when an item is activated, unless the item's `type` property\nis set to `Inactive`.\n\n**Note**: This event is not triggered by interactions with selection components such as the checkboxes and radio buttons,\nassociated with non-default `selectionMode` values, or if any other **interactive** component\n(such as a button or input) within the list item is directly clicked.", "_ui5Cancelable": true, "_ui5allowPreventDefault": true, - "_ui5Bubbles": false, + "_ui5Bubbles": true, "_ui5parameters": [ { "type": { @@ -14023,36 +12443,28 @@ }, "name": "item", "_ui5privacy": "public", - "description": "The currently clicked menu item." - }, - { - "type": { - "text": "string" - }, - "name": "text", - "_ui5privacy": "public", - "description": "The text of the currently clicked menu item." + "description": "The clicked item." } ] }, { - "name": "before-open", + "name": "item-close", "_ui5privacy": "public", "type": { - "text": "CustomEvent<MenuBeforeOpenEventDetail>", + "text": "CustomEvent<ListItemCloseEventDetail>", "references": [ { - "name": "MenuBeforeOpenEventDetail", + "name": "ListItemCloseEventDetail", "package": "@ui5/webcomponents", - "module": "dist/Menu.js" + "module": "dist/List.js" } ] }, - "description": "Fired before the menu is opened. This event can be cancelled, which will prevent the menu from opening.\n\n**Note:** Since 1.14.0 the event is also fired before a sub-menu opens.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, + "description": "Fired when the `Close` button of any item is clicked\n\n**Note:** This event is only applicable to list items that can be closed (such as notification list items),\nnot to be confused with `item-delete`.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, "_ui5Bubbles": true, - "_ui5since": "1.10.0", + "_ui5since": "1.0.0-rc.8", "_ui5parameters": [ { "type": { @@ -14060,103 +12472,314 @@ }, "name": "item", "_ui5privacy": "public", - "description": "The `ui5-menu-item` that triggers opening of the sub-menu or undefined when fired upon root menu opening." + "description": "the item about to be closed." } ] }, { - "name": "open", + "name": "item-delete", "_ui5privacy": "public", "type": { - "text": "CustomEvent" + "text": "CustomEvent<ListItemDeleteEventDetail>", + "references": [ + { + "name": "ListItemDeleteEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/List.js" + } + ] }, - "description": "Fired after the menu is opened.", + "description": "Fired when the Delete button of any item is pressed.\n\n**Note:** A Delete button is displayed on each item,\nwhen the component `selectionMode` property is set to `Delete`.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, "_ui5Bubbles": true, - "_ui5since": "1.10.0" + "_ui5parameters": [ + { + "type": { + "text": "HTMLElement" + }, + "name": "item", + "_ui5privacy": "public", + "description": "the deleted item." + } + ] }, { - "name": "before-close", + "name": "item-toggle", "_ui5privacy": "public", "type": { - "text": "CustomEvent<MenuBeforeCloseEventDetail>", + "text": "CustomEvent<ListItemToggleEventDetail>", "references": [ { - "name": "MenuBeforeCloseEventDetail", + "name": "ListItemToggleEventDetail", "package": "@ui5/webcomponents", - "module": "dist/Menu.js" + "module": "dist/List.js" } ] }, - "description": "Fired before the menu is closed. This event can be cancelled, which will prevent the menu from closing.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, + "description": "Fired when the `Toggle` button of any item is clicked.\n\n**Note:** This event is only applicable to list items that can be toggled (such as notification group list items).", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, "_ui5Bubbles": true, - "_ui5since": "1.10.0", + "_ui5since": "1.0.0-rc.8", "_ui5parameters": [ { "type": { - "text": "boolean" + "text": "HTMLElement" }, - "name": "escPressed", + "name": "item", "_ui5privacy": "public", - "description": "Indicates that `ESC` key has triggered the event." + "description": "the toggled item." } ] }, { - "name": "close", + "name": "load-more", "_ui5privacy": "public", "type": { "text": "CustomEvent" }, - "description": "Fired after the menu is closed.", + "description": "Fired when the user scrolls to the bottom of the list.\n\n**Note:** The event is fired when the `growing='Scroll'` property is enabled.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, - "_ui5Bubbles": false, - "_ui5since": "1.10.0" - } - ], - "attributes": [ - { - "description": "Defines the header text of the menu (displayed on mobile).", - "name": "header-text", - "default": "undefined", - "fieldName": "headerText", - "type": { - "text": "string | undefined" - } + "_ui5Bubbles": true, + "_ui5since": "1.0.0-rc.6" }, { - "description": "Indicates if the menu is open.", - "name": "open", - "default": "false", - "fieldName": "open", + "name": "move", + "_ui5privacy": "public", "type": { - "text": "boolean" - } + "text": "CustomEvent<ListMoveEventDetail>", + "references": [ + { + "name": "ListMoveEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/List.js" + } + ] + }, + "description": "Fired when a movable list item is dropped onto a drop target.\n\n**Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5parameters": [ + { + "type": { + "text": "object" + }, + "name": "destination", + "_ui5privacy": "public", + "description": "Contains information about the destination of the moved element. Has `element` and `placement` properties." + }, + { + "type": { + "text": "object" + }, + "name": "source", + "_ui5privacy": "public", + "description": "Contains information about the moved element under `element` property." + } + ] }, { - "description": "Determines on which side the component is placed at.", - "name": "placement", - "default": "\"Bottom\"", - "fieldName": "placement", + "name": "move-over", + "_ui5privacy": "public", "type": { - "text": "\"Top\" | \"Bottom\" | \"Start\" | \"End\"" + "text": "CustomEvent<ListMoveEventDetail>", + "references": [ + { + "name": "ListMoveEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/List.js" + } + ] + }, + "description": "Fired when a movable list item is moved over a potential drop target during a dragging operation.\n\nIf the new position is valid, prevent the default action of the event using `preventDefault()`.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true, + "_ui5since": "2.0.0", + "_ui5parameters": [ + { + "type": { + "text": "object" + }, + "name": "destination", + "_ui5privacy": "public", + "description": "Contains information about the destination of the moved element. Has `element` and `placement` properties." + }, + { + "type": { + "text": "object" + }, + "name": "source", + "_ui5privacy": "public", + "description": "Contains information about the moved element under `element` property." + } + ] + }, + { + "name": "selection-change", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<ListSelectionChangeEventDetail>", + "references": [ + { + "name": "ListSelectionChangeEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/List.js" + } + ] + }, + "description": "Fired when selection is changed by user interaction\nin `Single`, `SingleStart`, `SingleEnd` and `Multiple` selection modes.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true, + "_ui5parameters": [ + { + "type": { + "text": "Array<ListItemBase>", + "references": [ + { + "name": "ListItemBase", + "package": "@ui5/webcomponents", + "module": "dist/ListItemBase.js" + } + ] + }, + "name": "previouslySelectedItems", + "_ui5privacy": "public", + "description": "An array of the previously selected items." + }, + { + "type": { + "text": "Array<ListItemBase>", + "references": [ + { + "name": "ListItemBase", + "package": "@ui5/webcomponents", + "module": "dist/ListItemBase.js" + } + ] + }, + "name": "selectedItems", + "_ui5privacy": "public", + "description": "An array of the selected items." + } + ] + } + ], + "attributes": [ + { + "description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following field:\n\n - **growingButton**: `growingButton.name`, `growingButton.description`.\n\n The accessibility attributes support the following values:\n\n- **name**: Defines the accessible ARIA name of the growing button.\nAccepts any string.\n\n- **description**: Defines the accessible ARIA description of the growing button.\nAccepts any string.\n\n **Note:** The `accessibilityAttributes` property is in an experimental state and is a subject to change.", + "name": "accessibility-attributes", + "default": "{}", + "fieldName": "accessibilityAttributes", + "type": { + "text": "ListAccessibilityAttributes" } }, { - "description": "Determines the horizontal alignment of the menu relative to its opener control.", - "name": "horizontal-align", - "default": "\"Start\"", - "fieldName": "horizontalAlign", + "description": "Defines the accessible description of the component.", + "name": "accessible-description", + "default": "undefined", + "fieldName": "accessibleDescription", "type": { - "text": "\"Start\" | \"End\" | \"Center\" | \"Stretch\"" + "text": "string | undefined" } }, { - "description": "Defines if a loading indicator would be displayed inside the corresponding ui5-menu popover.", + "description": "Defines the IDs of the elements that describe the component.", + "name": "accessible-description-ref", + "default": "undefined", + "fieldName": "accessibleDescriptionRef", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the accessible name of the component.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the IDs of the elements that label the component.", + "name": "accessible-name-ref", + "default": "undefined", + "fieldName": "accessibleNameRef", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the accessible role of the component.", + "name": "accessible-role", + "default": "\"List\"", + "fieldName": "accessibleRole", + "type": { + "text": "\"List\" | \"Menu\" | \"Tree\" | \"ListBox\"" + } + }, + { + "description": "Defines the footer text.", + "name": "footer-text", + "default": "undefined", + "fieldName": "footerText", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines whether the component will have growing capability either by pressing a `More` button,\nor via user scroll. In both cases `load-more` event is fired.\n\n**Restrictions:** `growing=\"Scroll\"` is not supported for Internet Explorer,\non IE the component will fallback to `growing=\"Button\"`.", + "name": "growing", + "default": "\"None\"", + "fieldName": "growing", + "type": { + "text": "\"None\" | \"Button\" | \"Scroll\"" + } + }, + { + "description": "Defines the text that will be displayed inside the growing button.\n\n**Note:** If not specified a built-in text will be displayed.\n\n**Note:** This property takes effect if the `growing` property is set to the `Button`.", + "name": "growing-button-text", + "default": "undefined", + "fieldName": "growingButtonText", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the component header text.\n\n**Note:** If `header` is set this property is ignored.", + "name": "header-text", + "default": "undefined", + "fieldName": "headerText", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Determines whether the component is indented.", + "name": "indent", + "default": "false", + "fieldName": "indent", + "type": { + "text": "boolean" + } + }, + { + "description": "Returns an array containing the list item instances without the groups in a flat structure.", + "name": "list-items", + "default": "[]", + "fieldName": "listItems", + "type": { + "text": "any" + } + }, + { + "description": "Defines if the component would display a loading indicator over the list.", "name": "loading", "default": "false", "fieldName": "loading", @@ -14165,7 +12788,7 @@ } }, { - "description": "Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding ui5-menu popover.", + "description": "Defines the delay in milliseconds, after which the loading indicator will show up for this component.", "name": "loading-delay", "default": "1000", "fieldName": "loadingDelay", @@ -14174,12 +12797,39 @@ } }, { - "description": "Defines the ID or DOM Reference of the element at which the menu is shown.\nWhen using this attribute in a declarative way, you must only use the `id` (as a string) of the element at which you want to show the popover.\nYou can only set the `opener` attribute to a DOM Reference when using JavaScript.", - "name": "opener", + "description": "Defines the text that is displayed when the component contains no items.", + "name": "no-data-text", "default": "undefined", - "fieldName": "opener", + "fieldName": "noDataText", "type": { - "text": "string | HTMLElement | null | undefined" + "text": "string | undefined" + } + }, + { + "description": "Defines the selection mode of the component.", + "name": "selection-mode", + "default": "\"None\"", + "fieldName": "selectionMode", + "type": { + "text": "\"None\" | \"Single\" | \"Multiple\" | \"SingleStart\" | \"SingleEnd\" | \"SingleAuto\" | \"Delete\"" + } + }, + { + "description": "Defines the item separator style that is used.", + "name": "separators", + "default": "\"All\"", + "fieldName": "separators", + "type": { + "text": "\"None\" | \"All\" | \"Inner\"" + } + }, + { + "description": "Indicates whether the List header is sticky or not.\nIf stickyHeader is set to true, then whenever you scroll the content or\nthe application, the header of the list will be always visible.", + "name": "sticky-header", + "default": "false", + "fieldName": "stickyHeader", + "type": { + "text": "boolean" } } ], @@ -14188,9 +12838,8 @@ "package": "@ui5/webcomponents-base", "module": "dist/UI5Element.js" }, - "tagName": "ui5-menu", + "tagName": "ui5-list", "customElement": true, - "_ui5since": "1.3.0", "_ui5privacy": "public" } ], @@ -14199,54 +12848,29 @@ "kind": "js", "name": "default", "declaration": { - "name": "Menu", - "module": "dist/Menu.js" + "name": "List", + "module": "dist/List.js" } }, { "kind": "custom-element-definition", - "name": "ui5-menu", + "name": "ui5-list", "declaration": { - "name": "Menu", - "module": "dist/Menu.js" + "name": "List", + "module": "dist/List.js" } } ] }, { "kind": "javascript-module", - "path": "dist/MenuItem.js", + "path": "dist/ListItem.js", "declarations": [ { "kind": "class", - "description": "### Overview\n\n`ui5-menu-item` is the item to use inside a `ui5-menu`.\nAn arbitrary hierarchy structure can be represented by recursively nesting menu items.\n\n### Usage\n\n`ui5-menu-item` represents a node in a `ui5-menu`. The menu itself is rendered as a list,\nand each `ui5-menu-item` is represented by a list item in that list. Therefore, you should only use\n`ui5-menu-item` directly in your apps. The `ui5-li` list item is internal for the list, and not intended for public use.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/MenuItem.js\";`", - "name": "MenuItem", + "description": "A class to serve as a base\nfor the `ListItemStandard` and `ListItemCustom` classes.", + "name": "ListItem", "slots": [ - { - "name": "default", - "description": "Defines the items of this component.\n\n**Note:** The slot can hold menu item and menu separator items.\n\nIf there are items added to this slot, an arrow will be displayed at the end\nof the item in order to indicate that there are items added. In that case components added\nto `endContent` slot or `additionalText` content will not be displayed.\n\nThe priority of what will be displayed at the end of the menu item is as follows:\nsub-menu arrow (if there are items added in `items` slot) -> components added in `endContent` -> text set to `additionalText`.", - "_ui5propertyName": "items", - "_ui5type": { - "text": "Array<IMenuItem>", - "references": [ - { - "name": "IMenuItem", - "package": "@ui5/webcomponents", - "module": "dist/Menu.js" - } - ] - }, - "_ui5privacy": "public" - }, - { - "name": "endContent", - "description": "Defines the components that should be displayed at the end of the menu item.\n\n**Note:** It is highly recommended to slot only components of type `ui5-button`,`ui5-link`\nor `ui5-icon` in order to preserve the intended design. If there are components added to this slot,\nand there is text set in `additionalText`, it will not be displayed. If there are items added to `items` slot,\nnether `additionalText` nor components added to this slot would be displayed.\n\nThe priority of what will be displayed at the end of the menu item is as follows:\nsub-menu arrow (if there are items added in `items` slot) -> components added in `endContent` -> text set to `additionalText`.\n\nApplication developers are responsible for ensuring that interactive elements placed in the `endContent` slot\nhave the correct accessibility behaviour, including their enabled or disabled states.\nThe menu does not manage these aspects when the menu item state changes.", - "_ui5since": "2.0.0", - "_ui5type": { - "text": "Array<HTMLElement>" - }, - "_ui5privacy": "public" - }, { "name": "deleteButton", "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.", @@ -14261,95 +12885,66 @@ } ] }, - "_ui5privacy": "public", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "_ui5privacy": "public" } ], "members": [ { "kind": "field", - "name": "text", - "type": { - "text": "string | undefined" - }, - "description": "Defines the text of the tree item.", - "default": "undefined", - "privacy": "public" - }, - { - "kind": "field", - "name": "additionalText", + "name": "accessibilityAttributes", "type": { - "text": "string | undefined" + "text": "ListItemAccessibilityAttributes", + "references": [ + { + "name": "ListItemAccessibilityAttributes", + "package": "@ui5/webcomponents", + "module": "dist/ListItem.js" + } + ] }, - "description": "Defines the `additionalText`, displayed in the end of the menu item.\n\n**Note:** The additional text will not be displayed if there are items added in `items` slot or there are\ncomponents added to `endContent` slot.\n\nThe priority of what will be displayed at the end of the menu item is as follows:\nsub-menu arrow (if there are items added in `items` slot) -> components added in `endContent` -> text set to `additionalText`.", - "default": "undefined", + "default": "{}", + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaSetsize**: Defines the number of items in the current set when not all items in the set are present in the DOM.\n**Note:** The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`.\n\n\t- **ariaPosinset**: Defines an element's number or position in the current set when not all items are present in the DOM.\n\t**Note:** The value 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.", "privacy": "public", - "_ui5since": "1.8.0" + "_ui5since": "1.15.0" }, { "kind": "field", - "name": "icon", + "name": "highlight", "type": { - "text": "string | undefined" + "text": "Highlight", + "references": [ + { + "name": "Highlight", + "package": "@ui5/webcomponents", + "module": "dist/types/Highlight.js" + } + ] }, - "description": "Defines the icon to be displayed as graphical element within the component.\nThe SAP-icons font provides numerous options.\n\n**Example:**\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", - "default": "undefined", - "privacy": "public" + "default": "\"None\"", + "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", + "privacy": "public", + "_ui5since": "1.24" }, { "kind": "field", - "name": "disabled", + "name": "navigated", "type": { "text": "boolean" }, "default": "false", - "description": "Defines whether menu item is in disabled state.\n\n**Note:** A disabled menu item is noninteractive.", + "description": "The navigated state of the list item.\nIf set to `true`, a navigation indicator is displayed at the end of the list item.", "privacy": "public", - "inheritedFrom": { - "name": "ListItemBase", - "module": "dist/ListItemBase.js" - } + "_ui5since": "1.10.0" }, { "kind": "field", - "name": "loading", + "name": "selected", "type": { "text": "boolean" }, "default": "false", - "description": "Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding menu popover.\n\n**Note:** If set to `true` a busy indicator component will be displayed into the related one to the current menu item sub-menu popover.", - "privacy": "public", - "_ui5since": "1.13.0" - }, - { - "kind": "field", - "name": "loadingDelay", - "type": { - "text": "number" - }, - "default": "1000", - "description": "Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding menu popover.", - "privacy": "public", - "_ui5since": "1.13.0" - }, - { - "kind": "field", - "name": "accessibleName", - "type": { - "text": "string | undefined" - }, - "description": "Defines the accessible ARIA name of the component.", - "default": "undefined", - "privacy": "public", - "_ui5since": "1.7.0", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "description": "Defines the selected state of the component.", + "privacy": "public" }, { "kind": "field", @@ -14357,47 +12952,10 @@ "type": { "text": "string | undefined" }, - "description": "Defines the text of the tooltip for the menu item.", + "description": "Defines the text of the tooltip that would be displayed for the list item.", "default": "undefined", "privacy": "public", - "_ui5since": "1.23.0", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } - }, - { - "kind": "field", - "name": "checked", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines whether menu item is in checked state.\n\n**Note:** checked state is only taken into account when menu item is added to menu item group\nwith `checkMode` other than `None`.\n\n**Note:** A checked menu item has a checkmark displayed at its end.", - "privacy": "public", - "_ui5since": "2.12.0" - }, - { - "kind": "field", - "name": "accessibilityAttributes", - "type": { - "text": "MenuItemAccessibilityAttributes", - "references": [ - { - "name": "MenuItemAccessibilityAttributes", - "package": "@ui5/webcomponents", - "module": "dist/MenuItem.js" - } - ] - }, - "default": "{}", - "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaKeyShortcuts**: Indicated the availability of a keyboard shortcuts defined for the menu item.\n\n- **role**: Defines the role of the menu item. If not set, menu item will have default role=\"menuitem\".", - "privacy": "public", - "_ui5since": "2.1.0", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "_ui5since": "1.23.0" }, { "kind": "field", @@ -14414,284 +12972,333 @@ }, "default": "\"Active\"", "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.", - "privacy": "public", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } - }, + "privacy": "public" + } + ], + "events": [ { - "kind": "field", - "name": "navigated", + "name": "detail-click", + "_ui5privacy": "public", "type": { - "text": "boolean" + "text": "CustomEvent" }, - "default": "false", - "description": "The navigated state of the list item.\nIf set to `true`, a navigation indicator is displayed at the end of the list item.", - "privacy": "public", - "_ui5since": "1.10.0", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" + "description": "Fired when the user clicks on the detail button when type is `Detail`.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true + } + ], + "attributes": [ + { + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaSetsize**: Defines the number of items in the current set when not all items in the set are present in the DOM.\n**Note:** The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`.\n\n\t- **ariaPosinset**: Defines an element's number or position in the current set when not all items are present in the DOM.\n\t**Note:** The value 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.", + "name": "accessibility-attributes", + "default": "{}", + "fieldName": "accessibilityAttributes", + "type": { + "text": "ListItemAccessibilityAttributes" } }, { - "kind": "field", + "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", "name": "highlight", - "type": { - "text": "Highlight", - "references": [ - { - "name": "Highlight", - "package": "@ui5/webcomponents", - "module": "dist/types/Highlight.js" - } - ] - }, "default": "\"None\"", - "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", - "privacy": "public", - "_ui5since": "1.24", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" + "fieldName": "highlight", + "type": { + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" } }, { - "kind": "field", - "name": "selected", + "description": "The navigated state of the list item.\nIf set to `true`, a navigation indicator is displayed at the end of the list item.", + "name": "navigated", + "default": "false", + "fieldName": "navigated", "type": { "text": "boolean" - }, - "default": "false", - "description": "Defines the selected state of the component.", - "privacy": "public", - "inheritedFrom": { - "name": "ListItemBase", - "module": "dist/ListItemBase.js" } - } - ], - "events": [ + }, { - "name": "before-open", - "_ui5privacy": "public", + "description": "Defines the selected state of the component.", + "name": "selected", + "default": "false", + "fieldName": "selected", "type": { - "text": "CustomEvent<MenuBeforeOpenEventDetail>", - "references": [ - { - "name": "MenuBeforeOpenEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/MenuItem.js" - } - ] - }, - "description": "Fired before the menu is opened. This event can be cancelled, which will prevent the menu from opening.\n\n**Note:** Since 1.14.0 the event is also fired before a sub-menu opens.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": false, - "_ui5since": "1.10.0", - "_ui5parameters": [ - { - "type": { - "text": "HTMLElement" - }, - "name": "item", - "_ui5privacy": "public", - "description": "The menu item that triggers opening of the sub-menu or undefined when fired upon root menu opening." - } - ] + "text": "boolean" + } }, { - "name": "open", - "_ui5privacy": "public", + "description": "Defines the text of the tooltip that would be displayed for the list item.", + "name": "tooltip", + "default": "undefined", + "fieldName": "tooltip", "type": { - "text": "CustomEvent" - }, - "description": "Fired after the menu is opened.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": false + "text": "string | undefined" + } }, { - "name": "before-close", - "_ui5privacy": "public", + "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.", + "name": "type", + "default": "\"Active\"", + "fieldName": "type", "type": { - "text": "CustomEvent<MenuBeforeCloseEventDetail>", - "references": [ - { - "name": "MenuBeforeCloseEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/MenuItem.js" - } - ] - }, - "description": "Fired before the menu is closed. This event can be cancelled, which will prevent the menu from closing.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": false, - "_ui5since": "1.10.0", - "_ui5parameters": [ - { - "type": { - "text": "boolean" - }, - "name": "escPressed", - "_ui5privacy": "public", - "description": "Indicates that `ESC` key has triggered the event." - } - ] + "text": "\"Navigation\" | \"Inactive\" | \"Active\" | \"Detail\"" + } + } + ], + "superclass": { + "name": "ListItemBase", + "package": "@ui5/webcomponents", + "module": "dist/ListItemBase.js" + }, + "customElement": true, + "_ui5privacy": "public", + "_ui5abstract": true + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "ListItem", + "module": "dist/ListItem.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/ListItemBase.js", + "declarations": [ + { + "kind": "class", + "description": "A class to serve as a foundation\nfor the `ListItem` and `ListItemGroupHeader` classes.", + "name": "ListItemBase", + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "customElement": true, + "_ui5privacy": "public", + "_ui5abstract": true, + "members": [] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "ListItemBase", + "module": "dist/ListItemBase.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/ListItemCustom.js", + "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.", + "name": "ListItemCustom", + "cssParts": [ + { + "description": "Used to style the checkbox rendered when the list item is in multiple selection mode", + "name": "checkbox" }, { - "name": "close", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired after the menu is closed.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": false, - "_ui5since": "1.10.0" + "description": "Used to style the content area of the list item", + "name": "content" }, { - "name": "check", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired when an item is checked or unchecked.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5since": "2.12.0" + "description": "Used to style the button rendered when the list item is in delete mode", + "name": "delete-button" }, { - "name": "detail-click", + "description": "Used to style the button rendered when the list item is of type detail", + "name": "detail-button" + }, + { + "description": "Used to style the main li tag of the list item", + "name": "native-li" + }, + { + "description": "Used to style the radio button rendered when the list item is in single selection mode", + "name": "radio" + } + ], + "slots": [ + { + "description": "Defines the content of the component.", + "name": "default", "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired when the user clicks on the detail button when type is `Detail`.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" + "_ui5type": { + "text": "Array<Node>" } + }, + { + "name": "deleteButton", + "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<IButton>", + "references": [ + { + "name": "IButton", + "package": "@ui5/webcomponents", + "module": "dist/Button.js" + } + ] + }, + "_ui5privacy": "public" } ], - "attributes": [ + "members": [ { - "description": "Defines the text of the tree item.", - "name": "text", - "default": "undefined", - "fieldName": "text", + "kind": "field", + "name": "accessibilityAttributes", "type": { - "text": "string | undefined" - } + "text": "ListItemAccessibilityAttributes", + "references": [ + { + "name": "ListItemAccessibilityAttributes", + "package": "@ui5/webcomponents", + "module": "dist/ListItem.js" + } + ] + }, + "default": "{}", + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaSetsize**: Defines the number of items in the current set when not all items in the set are present in the DOM.\n**Note:** The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`.\n\n\t- **ariaPosinset**: Defines an element's number or position in the current set when not all items are present in the DOM.\n\t**Note:** The value 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.", + "privacy": "public", + "_ui5since": "1.15.0" }, { - "description": "Defines the `additionalText`, displayed in the end of the menu item.\n\n**Note:** The additional text will not be displayed if there are items added in `items` slot or there are\ncomponents added to `endContent` slot.\n\nThe priority of what will be displayed at the end of the menu item is as follows:\nsub-menu arrow (if there are items added in `items` slot) -> components added in `endContent` -> text set to `additionalText`.", - "name": "additional-text", - "default": "undefined", - "fieldName": "additionalText", + "kind": "field", + "name": "accessibleName", "type": { "text": "string | undefined" - } + }, + "description": "Defines the text alternative of the component.\n\n**Note**: If not provided a default text alternative will be set, if present.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.0.0-rc.15" }, { - "description": "Defines the icon to be displayed as graphical element within the component.\nThe SAP-icons font provides numerous options.\n\n**Example:**\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", - "name": "icon", - "default": "undefined", - "fieldName": "icon", + "kind": "field", + "name": "highlight", "type": { - "text": "string | undefined" - } + "text": "Highlight", + "references": [ + { + "name": "Highlight", + "package": "@ui5/webcomponents", + "module": "dist/types/Highlight.js" + } + ] + }, + "default": "\"None\"", + "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", + "privacy": "public", + "_ui5since": "1.24" }, { - "description": "Defines whether menu item is in disabled state.\n\n**Note:** A disabled menu item is noninteractive.", - "name": "disabled", - "default": "false", - "fieldName": "disabled", + "kind": "field", + "name": "movable", "type": { "text": "boolean" - } + }, + "default": "false", + "description": "Defines whether the item is movable.", + "privacy": "public", + "_ui5since": "2.0.0" }, { - "description": "Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding menu popover.\n\n**Note:** If set to `true` a busy indicator component will be displayed into the related one to the current menu item sub-menu popover.", - "name": "loading", - "default": "false", - "fieldName": "loading", + "kind": "field", + "name": "navigated", "type": { "text": "boolean" - } + }, + "default": "false", + "description": "The navigated state of the list item.\nIf set to `true`, a navigation indicator is displayed at the end of the list item.", + "privacy": "public", + "_ui5since": "1.10.0" }, { - "description": "Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding menu popover.", - "name": "loading-delay", - "default": "1000", - "fieldName": "loadingDelay", + "kind": "field", + "name": "selected", "type": { - "text": "number" - } + "text": "boolean" + }, + "default": "false", + "description": "Defines the selected state of the component.", + "privacy": "public" }, { - "description": "Defines the accessible ARIA name of the component.", - "name": "accessible-name", - "default": "undefined", - "fieldName": "accessibleName", + "kind": "field", + "name": "tooltip", "type": { "text": "string | undefined" - } + }, + "description": "Defines the text of the tooltip that would be displayed for the list item.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.23.0" }, { - "description": "Defines the text of the tooltip for the menu item.", - "name": "tooltip", - "default": "undefined", - "fieldName": "tooltip", + "kind": "field", + "name": "type", "type": { - "text": "string | undefined" + "text": "ListItemType", + "references": [ + { + "name": "ListItemType", + "package": "@ui5/webcomponents", + "module": "dist/types/ListItemType.js" + } + ] }, - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" + "default": "\"Active\"", + "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.", + "privacy": "public" + } + ], + "attributes": [ + { + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaSetsize**: Defines the number of items in the current set when not all items in the set are present in the DOM.\n**Note:** The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`.\n\n\t- **ariaPosinset**: Defines an element's number or position in the current set when not all items are present in the DOM.\n\t**Note:** The value 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.", + "name": "accessibility-attributes", + "default": "{}", + "fieldName": "accessibilityAttributes", + "type": { + "text": "ListItemAccessibilityAttributes" } }, { - "description": "Defines whether menu item is in checked state.\n\n**Note:** checked state is only taken into account when menu item is added to menu item group\nwith `checkMode` other than `None`.\n\n**Note:** A checked menu item has a checkmark displayed at its end.", - "name": "checked", - "default": "false", - "fieldName": "checked", + "description": "Defines the text alternative of the component.\n\n**Note**: If not provided a default text alternative will be set, if present.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", "type": { - "text": "boolean" + "text": "string | undefined" } }, { - "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaKeyShortcuts**: Indicated the availability of a keyboard shortcuts defined for the menu item.\n\n- **role**: Defines the role of the menu item. If not set, menu item will have default role=\"menuitem\".", - "name": "accessibility-attributes", - "default": "{}", - "fieldName": "accessibilityAttributes", + "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", + "name": "highlight", + "default": "\"None\"", + "fieldName": "highlight", "type": { - "text": "MenuItemAccessibilityAttributes" - }, - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" } }, { - "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.", - "name": "type", - "default": "\"Active\"", - "fieldName": "type", + "description": "Defines whether the item is movable.", + "name": "movable", + "default": "false", + "fieldName": "movable", "type": { - "text": "\"Navigation\" | \"Inactive\" | \"Active\" | \"Detail\"" - }, - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" + "text": "boolean" } }, { @@ -14701,23 +13308,6 @@ "fieldName": "navigated", "type": { "text": "boolean" - }, - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } - }, - { - "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", - "name": "highlight", - "default": "\"None\"", - "fieldName": "highlight", - "type": { - "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" - }, - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" } }, { @@ -14727,10 +13317,24 @@ "fieldName": "selected", "type": { "text": "boolean" - }, - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" + } + }, + { + "description": "Defines the text of the tooltip that would be displayed for the list item.", + "name": "tooltip", + "default": "undefined", + "fieldName": "tooltip", + "type": { + "text": "string | undefined" + } + }, + { + "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.", + "name": "type", + "default": "\"Active\"", + "fieldName": "type", + "type": { + "text": "\"Navigation\" | \"Inactive\" | \"Active\" | \"Detail\"" } } ], @@ -14739,15 +13343,20 @@ "package": "@ui5/webcomponents", "module": "dist/ListItem.js" }, - "tagName": "ui5-menu-item", + "tagName": "ui5-li-custom", "customElement": true, - "_ui5since": "1.3.0", "_ui5privacy": "public", - "_ui5implements": [ + "events": [ { - "name": "IMenuItem", - "package": "@ui5/webcomponents", - "module": "dist/Menu.js" + "name": "detail-click", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the user clicks on the detail button when type is `Detail`.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true } ] } @@ -14757,40 +13366,65 @@ "kind": "js", "name": "default", "declaration": { - "name": "MenuItem", - "module": "dist/MenuItem.js" + "name": "ListItemCustom", + "module": "dist/ListItemCustom.js" } }, { "kind": "custom-element-definition", - "name": "ui5-menu-item", + "name": "ui5-li-custom", "declaration": { - "name": "MenuItem", - "module": "dist/MenuItem.js" + "name": "ListItemCustom", + "module": "dist/ListItemCustom.js" } } ] }, { "kind": "javascript-module", - "path": "dist/MenuItemGroup.js", + "path": "dist/ListItemGroup.js", "declarations": [ { "kind": "class", - "description": "### Overview\n\nThe `ui5-menu-item-group` component represents a group of items designed for use inside a `ui5-menu`.\nItems belonging to the same group should be wrapped by a `ui5-menu-item-group`.\nEach group can have an `checkMode` property, which defines the check mode for the items within the group.\nThe possible values for `checkMode` are:\n- 'None' (default) - no items can be checked\n- 'Single' - Only one item can be checked at a time\n- 'Multiple' - Multiple items can be checked simultaneously\n\n**Note:** If the `checkMode` property is set to 'Single', only one item can remain checked at any given time.\nIf multiple items are marked as checked, the last checked item will take precedence.\n\n### Usage\n\n`ui5-menu-item-group` represents a collection of `ui5-menu-item` components that can have the same check mode.\nThe items are addeed to the group's `items` slot.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/MenuItemGroup.js\";`", - "name": "MenuItemGroup", + "description": "### Overview\nThe `ui5-li-group` is a special list item, used only to create groups of list items.\n\nThis is the item to use inside a `ui5-list`.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents/dist/ListItemGroup.js\";`", + "name": "ListItemGroup", + "cssParts": [ + { + "description": "Used to style the header item of the group", + "name": "header" + }, + { + "description": "Used to style the title of the group header", + "name": "title" + } + ], "slots": [ { "name": "default", - "description": "Defines the items of this component.\n**Note:** The slot can hold any combination of components of type `ui5-menu-item` or `ui5-menu-separator` or both.", + "description": "Defines the items of the <code>ui5-li-group</code>.", "_ui5propertyName": "items", "_ui5type": { - "text": "Array<IMenuItem>", + "text": "Array<ListItemBase>", "references": [ { - "name": "IMenuItem", + "name": "ListItemBase", "package": "@ui5/webcomponents", - "module": "dist/Menu.js" + "module": "dist/ListItemBase.js" + } + ] + }, + "_ui5privacy": "public" + }, + { + "name": "header", + "description": "Defines the header of the component.\n\n**Note:** Using this slot, the default header text of group and the value of `headerText` property will be overwritten.", + "_ui5type": { + "text": "Array<ListItemBase>", + "references": [ + { + "name": "ListItemBase", + "package": "@ui5/webcomponents", + "module": "dist/ListItemBase.js" } ] }, @@ -14800,95 +13434,157 @@ "members": [ { "kind": "field", - "name": "checkMode", + "name": "headerAccessibleName", "type": { - "text": "MenuItemGroupCheckMode", + "text": "string | undefined" + }, + "description": "Defines the accessible name of the header.", + "privacy": "public", + "default": "undefined" + }, + { + "kind": "field", + "name": "headerText", + "type": { + "text": "string | undefined" + }, + "description": "Defines the header text of the <code>ui5-li-group</code>.", + "privacy": "public", + "default": "undefined" + }, + { + "kind": "field", + "name": "wrappingType", + "type": { + "text": "WrappingType", "references": [ { - "name": "MenuItemGroupCheckMode", + "name": "WrappingType", "package": "@ui5/webcomponents", - "module": "dist/types/MenuItemGroupCheckMode.js" + "module": "dist/types/WrappingType.js" } ] }, "default": "\"None\"", - "description": "Defines the component's check mode.", - "privacy": "public" + "description": "Defines if the text of the component should wrap when it's too long.\nWhen set to \"Normal\", the content (title, description) will be wrapped\nusing the `ui5-expandable-text` component.<br/>\n\nThe text can wrap up to 100 characters on small screens (size S) and\nup to 300 characters on larger screens (size M and above). When text exceeds\nthese limits, it truncates with an ellipsis followed by a text expansion trigger.\n\nAvailable options are:\n- `None` (default) - The text will truncate with an ellipsis.\n- `Normal` - The text will wrap (without truncation).", + "privacy": "public", + "_ui5since": "2.15.0" } ], - "attributes": [ + "events": [ { - "description": "Defines the component's check mode.", - "name": "check-mode", - "default": "\"None\"", - "fieldName": "checkMode", + "name": "move", + "_ui5privacy": "public", "type": { - "text": "\"None\" | \"Single\" | \"Multiple\"" - } - } - ], - "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" - }, - "tagName": "ui5-menu-item-group", - "customElement": true, - "_ui5since": "2.12.0", - "_ui5privacy": "public", - "_ui5implements": [ + "text": "CustomEvent<ListItemGroupMoveEventDetail>", + "references": [ + { + "name": "ListItemGroupMoveEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/ListItemGroup.js" + } + ] + }, + "description": "Fired when a movable list item is dropped onto a drop target.\n\n**Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5since": "2.1.0", + "_ui5parameters": [ + { + "type": { + "text": "object" + }, + "name": "destination", + "_ui5privacy": "public", + "description": "Contains information about the destination of the moved element. Has `element` and `placement` properties." + }, + { + "type": { + "text": "object" + }, + "name": "source", + "_ui5privacy": "public", + "description": "Contains information about the moved element under `element` property." + } + ] + }, { - "name": "IMenuItem", - "package": "@ui5/webcomponents", - "module": "dist/Menu.js" - } - ] - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "MenuItemGroup", - "module": "dist/MenuItemGroup.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-menu-item-group", - "declaration": { - "name": "MenuItemGroup", - "module": "dist/MenuItemGroup.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/MenuSeparator.js", - "declarations": [ - { - "kind": "class", - "description": "The `ui5-menu-separator` represents a horizontal line to separate menu items inside a `ui5-menu`.", - "name": "MenuSeparator", + "name": "move-over", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<ListItemGroupMoveEventDetail>", + "references": [ + { + "name": "ListItemGroupMoveEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/ListItemGroup.js" + } + ] + }, + "description": "Fired when a movable list item is moved over a potential drop target during a dragging operation.\n\nIf the new position is valid, prevent the default action of the event using `preventDefault()`.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true, + "_ui5since": "2.1.0", + "_ui5parameters": [ + { + "type": { + "text": "object" + }, + "name": "destination", + "_ui5privacy": "public", + "description": "Contains information about the destination of the moved element. Has `element` and `placement` properties." + }, + { + "type": { + "text": "object" + }, + "name": "source", + "_ui5privacy": "public", + "description": "Contains information about the moved element under `element` property." + } + ] + } + ], + "attributes": [ + { + "description": "Defines the accessible name of the header.", + "name": "header-accessible-name", + "default": "undefined", + "fieldName": "headerAccessibleName", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the header text of the <code>ui5-li-group</code>.", + "name": "header-text", + "default": "undefined", + "fieldName": "headerText", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines if the text of the component should wrap when it's too long.\nWhen set to \"Normal\", the content (title, description) will be wrapped\nusing the `ui5-expandable-text` component.<br/>\n\nThe text can wrap up to 100 characters on small screens (size S) and\nup to 300 characters on larger screens (size M and above). When text exceeds\nthese limits, it truncates with an ellipsis followed by a text expansion trigger.\n\nAvailable options are:\n- `None` (default) - The text will truncate with an ellipsis.\n- `Normal` - The text will wrap (without truncation).", + "name": "wrapping-type", + "default": "\"None\"", + "fieldName": "wrappingType", + "type": { + "text": "\"None\" | \"Normal\"" + } + } + ], "superclass": { - "name": "ListItemBase", - "package": "@ui5/webcomponents", - "module": "dist/ListItemBase.js" + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" }, - "tagName": "ui5-menu-separator", + "tagName": "ui5-li-group", "customElement": true, "_ui5since": "2.0.0", - "_ui5privacy": "public", - "_ui5implements": [ - { - "name": "IMenuItem", - "package": "@ui5/webcomponents", - "module": "dist/Menu.js" - } - ], - "members": [] + "_ui5privacy": "public" } ], "exports": [ @@ -14896,28 +13592,28 @@ "kind": "js", "name": "default", "declaration": { - "name": "MenuSeparator", - "module": "dist/MenuSeparator.js" + "name": "ListItemGroup", + "module": "dist/ListItemGroup.js" } }, { "kind": "custom-element-definition", - "name": "ui5-menu-separator", + "name": "ui5-li-group", "declaration": { - "name": "MenuSeparator", - "module": "dist/MenuSeparator.js" + "name": "ListItemGroup", + "module": "dist/ListItemGroup.js" } } ] }, { "kind": "javascript-module", - "path": "dist/MessageStrip.js", + "path": "dist/ListItemGroupHeader.js", "declarations": [ { "kind": "class", - "description": "### Overview\n\nThe ui5-message-strip component allows for the embedding of application-related messages.\nIt supports four semantic designs, each with its own color and icon: \"Information\", \"Positive\", \"Critical\", and \"Negative\".\nAdditionally, users can choose from two color sets (\"ColorSet1\" and \"ColorSet2\"), each containing 10 predefined color schemes.\nEach message shows a \"Close\" button, so that it can be removed from the UI, if needed.\n\n### Usage\n\nFor the `ui5-message-strip` component, you can define whether it displays\nan icon in the beginning and a close button. Moreover, its size and background\ncan be controlled with CSS.\n\n### Keyboard Handling\n\n#### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/MessageStrip.js\";`", - "name": "MessageStrip", + "description": "The `ui5-li-group-header` is a special list item, used only to separate other list items into logical groups.", + "name": "ListItemGroupHeader", "slots": [ { "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.", @@ -14926,135 +13622,66 @@ "_ui5type": { "text": "Array<Node>" } - }, - { - "name": "icon", - "description": "Defines the content to be displayed as graphical element within the component.\n\n**Note:** If no icon is given, the default icon for the component type will be used.\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).", - "_ui5type": { - "text": "Array<IIcon>", - "references": [ - { - "name": "IIcon", - "package": "@ui5/webcomponents", - "module": "dist/Icon.js" - } - ] - }, - "_ui5privacy": "public" } ], "members": [ { "kind": "field", - "name": "design", - "type": { - "text": "MessageStripDesign", - "references": [ - { - "name": "MessageStripDesign", - "package": "@ui5/webcomponents", - "module": "dist/types/MessageStripDesign.js" - } - ] - }, - "default": "\"Information\"", - "description": "Defines the component type.", - "privacy": "public", - "_ui5since": "1.0.0-rc.15" - }, - { - "kind": "field", - "name": "colorScheme", + "name": "accessibleName", "type": { - "text": "string" + "text": "string | undefined" }, - "default": "\"1\"", - "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.", - "privacy": "public", - "_ui5since": "2.0.0" + "description": "Defines the text alternative of the component.\n\n**Note:** If not provided a default text alternative will be set, if present.", + "default": "undefined", + "privacy": "public" }, { "kind": "field", - "name": "hideIcon", + "name": "wrappingType", "type": { - "text": "boolean" + "text": "WrappingType", + "references": [ + { + "name": "WrappingType", + "package": "@ui5/webcomponents", + "module": "dist/types/WrappingType.js" + } + ] }, - "default": "false", - "description": "Defines whether the MessageStrip will show an icon in the beginning.\nYou can directly provide an icon with the `icon` slot. Otherwise, the default icon for the type will be used.\n\n * **Note:** If <code>MessageStripDesign.ColorSet1</code> or <code>MessageStripDesign.ColorSet2</code> value is set to the <code>design</code> property, default icon will not be presented.", + "default": "\"None\"", + "description": "Defines if the text of the component should wrap when it's too long.\nWhen set to \"Normal\", the content (title, description) will be wrapped\nusing the `ui5-expandable-text` component.<br/>\n\nThe text can wrap up to 100 characters on small screens (size S) and\nup to 300 characters on larger screens (size M and above). When text exceeds\nthese limits, it truncates with an ellipsis followed by a text expansion trigger.\n\nAvailable options are:\n- `None` (default) - The text will truncate with an ellipsis.\n- `Normal` - The text will wrap (without truncation).", "privacy": "public", - "_ui5since": "1.0.0-rc.15" - }, - { - "kind": "field", - "name": "hideCloseButton", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines whether the MessageStrip renders close button.", - "privacy": "public" - } - ], - "events": [ - { - "name": "close", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired when the close button is pressed either with a\nclick/tap or by using the Enter or Space key.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": false + "_ui5since": "2.15.0" } ], "attributes": [ { - "description": "Defines the component type.", - "name": "design", - "default": "\"Information\"", - "fieldName": "design", - "type": { - "text": "\"Positive\" | \"Critical\" | \"Negative\" | \"Information\" | \"ColorSet1\" | \"ColorSet2\"" - } - }, - { - "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.", - "name": "color-scheme", - "default": "\"1\"", - "fieldName": "colorScheme", - "type": { - "text": "string" - } - }, - { - "description": "Defines whether the MessageStrip will show an icon in the beginning.\nYou can directly provide an icon with the `icon` slot. Otherwise, the default icon for the type will be used.\n\n * **Note:** If <code>MessageStripDesign.ColorSet1</code> or <code>MessageStripDesign.ColorSet2</code> value is set to the <code>design</code> property, default icon will not be presented.", - "name": "hide-icon", - "default": "false", - "fieldName": "hideIcon", + "description": "Defines the text alternative of the component.\n\n**Note:** If not provided a default text alternative will be set, if present.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", "type": { - "text": "boolean" + "text": "string | undefined" } }, { - "description": "Defines whether the MessageStrip renders close button.", - "name": "hide-close-button", - "default": "false", - "fieldName": "hideCloseButton", + "description": "Defines if the text of the component should wrap when it's too long.\nWhen set to \"Normal\", the content (title, description) will be wrapped\nusing the `ui5-expandable-text` component.<br/>\n\nThe text can wrap up to 100 characters on small screens (size S) and\nup to 300 characters on larger screens (size M and above). When text exceeds\nthese limits, it truncates with an ellipsis followed by a text expansion trigger.\n\nAvailable options are:\n- `None` (default) - The text will truncate with an ellipsis.\n- `Normal` - The text will wrap (without truncation).", + "name": "wrapping-type", + "default": "\"None\"", + "fieldName": "wrappingType", "type": { - "text": "boolean" + "text": "\"None\" | \"Normal\"" } } ], "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" + "name": "ListItemBase", + "package": "@ui5/webcomponents", + "module": "dist/ListItemBase.js" }, - "tagName": "ui5-message-strip", + "tagName": "ui5-li-group-header", "customElement": true, - "_ui5since": "0.9.0", - "_ui5privacy": "public" + "_ui5privacy": "private" } ], "exports": [ @@ -15062,92 +13689,100 @@ "kind": "js", "name": "default", "declaration": { - "name": "MessageStrip", - "module": "dist/MessageStrip.js" + "name": "ListItemGroupHeader", + "module": "dist/ListItemGroupHeader.js" } }, { "kind": "custom-element-definition", - "name": "ui5-message-strip", - "declaration": { - "name": "MessageStrip", - "module": "dist/MessageStrip.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/MonthPicker.js", - "declarations": [], - "exports": [ - { - "kind": "js", - "name": "default", + "name": "ui5-li-group-header", "declaration": { - "name": "MonthPicker", - "module": "dist/MonthPicker.js" + "name": "ListItemGroupHeader", + "module": "dist/ListItemGroupHeader.js" } } ] }, { "kind": "javascript-module", - "path": "dist/MultiComboBox.js", + "path": "dist/ListItemStandard.js", "declarations": [ - { - "kind": "interface", - "name": "IMultiComboBoxItem", - "description": "Interface for components that may be slotted inside a `ui5-multi-combobox` as items", - "_ui5privacy": "public" - }, { "kind": "class", - "description": "### Overview\n\nThe `ui5-multi-combobox` component consists of a list box with items and a text field allowing the user to either type a value directly into the text field, or choose from the list of existing items.\n\nThe drop-down list is used for selecting and filtering values, it enables users to select one or more options from a predefined list. The control provides an editable input field to filter the list, and a dropdown arrow to expand/collapse the list of available options.\nThe options in the list have checkboxes that permit multi-selection. Entered values are displayed as tokens.\n### Structure\nThe `ui5-multi-combobox` consists of the following elements:\n\n- Tokenizer - a list of tokens with selected options.\n- Input field - displays the selected option/s as token/s. Users can type to filter the list.\n- Drop-down arrow - expands\\collapses the option list.\n- Option list - the list of available options.\n\n### Keyboard Handling\n\nThe `ui5-multi-combobox` provides advanced keyboard handling.\n\n#### Picker\nIf the `ui5-multi-combobox` 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` and `DOWN` arrow keys\nto navigate through the available options and select one by pressing the `Space` or `Enter` keys.\n[Ctrl]+[Alt]+[F8] or [Command]+[Option]+[F8] - Focuses the first link in the value state message, if available. Pressing [Tab] moves the focus to the next link in the value state message, or closes the value state message if there are no more links.\n\n#### Tokens\n\n- Left/Right arrow keys - moves the focus selection form the currently focused token to the previous/next one (if available).\n- Delete - deletes the token and focuses the previous token.\n- Backspace - deletes the token and focus the next token.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/MultiComboBox.js\";`", - "name": "MultiComboBox", + "description": "The `ui5-li` represents the simplest type of item for a `ui5-list`.\n\nThis is a list item,\nproviding the most common use cases such as `text`,\n`image` and `icon`.", + "name": "ListItemStandard", "cssParts": [ { - "description": "Used to style each token(where `token-0` corresponds to the first item)", - "name": "token-\\{index\\}" + "description": "Used to style the additionalText of the list item", + "name": "additional-text" + }, + { + "description": "Used to style the checkbox rendered when the list item is in multiple selection mode", + "name": "checkbox" + }, + { + "description": "Used to style the content area of the list item", + "name": "content" + }, + { + "description": "Used to style the button rendered when the list item is in delete mode", + "name": "delete-button" + }, + { + "description": "Used to style the description of the list item", + "name": "description" + }, + { + "description": "Used to style the button rendered when the list item is of type detail", + "name": "detail-button" + }, + { + "description": "Used to style the icon of the list item", + "name": "icon" + }, + { + "description": "Used to style the main li tag of the list item", + "name": "native-li" + }, + { + "description": "Used to style the radio button rendered when the list item is in single selection mode", + "name": "radio" + }, + { + "description": "Used to style the title of the list item", + "name": "title" } ], "slots": [ { "name": "default", - "description": "Defines the component items.", - "_ui5propertyName": "items", + "description": "Defines the custom formatted text of the component.\n\n**Note:** For optimal text wrapping and a consistent layout, it is strongly recommended to use the `text` property.\n\nUse the `default` slot only when custom formatting with HTML elements (e.g., `<b>`, `<i>`) is required.\nBe aware that wrapping (via `wrappingType=\"Normal\"`) may not function correctly with custom HTML content in the `default` slot.\n\nIf both `text` and `default` slot are used, the `text` property takes precedence.", + "_ui5propertyName": "content", "_ui5type": { - "text": "Array<IMultiComboBoxItem>", - "references": [ - { - "name": "IMultiComboBoxItem", - "package": "@ui5/webcomponents", - "module": "dist/MultiComboBox.js" - } - ] + "text": "Array<Node>" }, "_ui5privacy": "public" }, { - "name": "icon", - "description": "Defines the icon to be displayed in the component.", - "_ui5since": "1.0.0-rc.9", + "name": "deleteButton", + "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<IIcon>", + "text": "Array<IButton>", "references": [ { - "name": "IIcon", + "name": "IButton", "package": "@ui5/webcomponents", - "module": "dist/Icon.js" + "module": "dist/Button.js" } ] }, "_ui5privacy": "public" }, { - "name": "valueStateMessage", - "description": "Defines the value state message that will be displayed as pop up under the component.\nThe value state message slot should contain only one root element.\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 component is in `Information`, `Critical` or `Negative` value state.", - "_ui5since": "1.0.0-rc.9", + "name": "image", + "description": "**Note:** While the slot allows option for setting custom avatar, to match the\ndesign guidelines, please use the `ui5-avatar` with it's default size - S.\n\n**Note:** If bigger `ui5-avatar` needs to be used, then the size of the\n`ui5-li` should be customized in order to fit.", + "_ui5since": "2.0.0", "_ui5type": { "text": "Array<HTMLElement>" }, @@ -15157,579 +13792,357 @@ "members": [ { "kind": "field", - "name": "value", + "name": "accessibilityAttributes", "type": { - "text": "string" + "text": "ListItemAccessibilityAttributes", + "references": [ + { + "name": "ListItemAccessibilityAttributes", + "package": "@ui5/webcomponents", + "module": "dist/ListItem.js" + } + ] }, - "default": "\"\"", - "description": "Defines the value of the component.\n\n**Note:** The property is updated upon typing.", + "default": "{}", + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaSetsize**: Defines the number of items in the current set when not all items in the set are present in the DOM.\n**Note:** The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`.\n\n\t- **ariaPosinset**: Defines an element's number or position in the current set when not all items are present in the DOM.\n\t**Note:** The value 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.", "privacy": "public", - "_ui5formProperty": true, - "_ui5formEvents": "change,input" + "_ui5since": "1.15.0" }, { "kind": "field", - "name": "name", + "name": "accessibleName", "type": { "text": "string | undefined" }, - "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.\n**Note:** When the component is used inside a form element,\nthe value is sent as the first element in the form data, even if it's empty.", + "description": "Defines the text alternative of the component.\nNote: If not provided a default text alternative will be set, if present.", "default": "undefined", "privacy": "public", - "_ui5since": "2.0.0" - }, - { - "kind": "field", - "name": "noTypeahead", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines whether the value will be autcompleted to match an item", - "privacy": "public", - "_ui5since": "1.4.0" + "_ui5since": "1.0.0-rc.15" }, { "kind": "field", - "name": "placeholder", + "name": "additionalText", "type": { "text": "string | undefined" }, - "description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.", + "description": "Defines the `additionalText`, displayed in the end of the list item.", "default": "undefined", - "privacy": "public" + "privacy": "public", + "_ui5since": "1.0.0-rc.15" }, { "kind": "field", - "name": "noValidation", + "name": "additionalTextState", "type": { - "text": "boolean" + "text": "ValueState", + "references": [ + { + "name": "ValueState", + "package": "@ui5/webcomponents-base", + "module": "dist/types/ValueState.js" + } + ] }, - "default": "false", - "description": "Defines if the user input will be prevented, if no matching item has been found", - "privacy": "public" + "default": "\"None\"", + "description": "Defines the state of the `additionalText`.\n\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", + "privacy": "public", + "_ui5since": "1.0.0-rc.15" }, { "kind": "field", - "name": "disabled", + "name": "description", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is completely noninteractive.", - "privacy": "public" + "description": "Defines the description displayed right under the item text, if such is present.", + "default": "undefined", + "privacy": "public", + "_ui5since": "0.8.0" }, { "kind": "field", - "name": "valueState", + "name": "highlight", "type": { - "text": "ValueState", + "text": "Highlight", "references": [ { - "name": "ValueState", - "package": "@ui5/webcomponents-base", - "module": "dist/types/ValueState.js" + "name": "Highlight", + "package": "@ui5/webcomponents", + "module": "dist/types/Highlight.js" } ] }, "default": "\"None\"", - "description": "Defines the value state of the component.", - "privacy": "public" + "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", + "privacy": "public", + "_ui5since": "1.24" }, { "kind": "field", - "name": "readonly", + "name": "icon", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "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.", + "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": "undefined", "privacy": "public" }, { "kind": "field", - "name": "required", + "name": "iconEnd", "type": { "text": "boolean" }, "default": "false", - "description": "Defines whether the component is required.", - "privacy": "public", - "_ui5since": "1.0.0-rc.5" + "description": "Defines whether the `icon` should be displayed in the beginning of the list item or in the end.", + "privacy": "public" }, { "kind": "field", - "name": "loading", + "name": "movable", "type": { "text": "boolean" }, "default": "false", - "description": "Indicates whether a loading indicator should be shown in the picker.", - "privacy": "public" + "description": "Defines whether the item is movable.", + "privacy": "public", + "_ui5since": "2.0.0" }, { "kind": "field", - "name": "filter", + "name": "navigated", "type": { - "text": "ComboBoxFilter", - "references": [ - { - "name": "ComboBoxFilter", - "package": "@ui5/webcomponents", - "module": "dist/types/ComboBoxFilter.js" - } - ] + "text": "boolean" }, - "default": "\"StartsWithPerTerm\"", - "description": "Defines the filter type of the component.", - "privacy": "public" + "default": "false", + "description": "The navigated state of the list item.\nIf set to `true`, a navigation indicator is displayed at the end of the list item.", + "privacy": "public", + "_ui5since": "1.10.0" }, { "kind": "field", - "name": "showClearIcon", + "name": "selected", "type": { "text": "boolean" }, "default": "false", - "description": "Defines whether the clear icon of the multi-combobox will be shown.", - "privacy": "public", - "_ui5since": "1.20.1" + "description": "Defines the selected state of the component.", + "privacy": "public" }, { "kind": "field", - "name": "accessibleName", + "name": "text", "type": { "text": "string | undefined" }, - "description": "Defines the accessible ARIA name of the component.", + "description": "Defines the text of the component.", "default": "undefined", "privacy": "public", - "_ui5since": "1.4.0" + "_ui5since": "2.10.0" }, { "kind": "field", - "name": "accessibleNameRef", + "name": "tooltip", "type": { "text": "string | undefined" }, - "description": "Receives id(or many ids) of the elements that label the component.", + "description": "Defines the text of the tooltip that would be displayed for the list item.", "default": "undefined", "privacy": "public", - "_ui5since": "1.4.0" + "_ui5since": "1.23.0" }, { "kind": "field", - "name": "showSelectAll", + "name": "type", "type": { - "text": "boolean" - }, - "default": "false", - "description": "Determines if the select all checkbox is visible on top of suggestions.", - "privacy": "public" - }, - { - "kind": "field", - "name": "open", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Indicates whether the items picker is open.", - "privacy": "public", - "_ui5since": "2.9.0" - } - ], - "events": [ - { - "name": "change", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired when the input operation has finished by pressing Enter or on focusout.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true - }, - { - "name": "input", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired when the value of the component changes at each keystroke or clear icon is pressed.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true - }, - { - "name": "open", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired when the dropdown is opened.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": false, - "_ui5since": "2.0.0" - }, - { - "name": "close", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired when the dropdown is closed.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": false, - "_ui5since": "2.0.0" - }, - { - "name": "selection-change", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent<MultiComboBoxSelectionChangeEventDetail>", + "text": "ListItemType", "references": [ { - "name": "MultiComboBoxSelectionChangeEventDetail", + "name": "ListItemType", "package": "@ui5/webcomponents", - "module": "dist/MultiComboBox.js" + "module": "dist/types/ListItemType.js" } ] }, - "description": "Fired when selection is changed by user interaction.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": true, - "_ui5parameters": [ - { - "type": { - "text": "Array<IMultiComboBoxItem>", - "references": [ - { - "name": "IMultiComboBoxItem", - "package": "@ui5/webcomponents", - "module": "dist/MultiComboBox.js" - } - ] - }, - "name": "items", - "_ui5privacy": "public", - "description": "an array of the selected items." - } - ] + "default": "\"Active\"", + "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.", + "privacy": "public" }, { - "name": "value-state-change", - "_ui5privacy": "public", + "kind": "field", + "name": "wrappingType", "type": { - "text": "CustomEvent<MultiComboBoxValueStateChangeEventDetail>", + "text": "WrappingType", "references": [ { - "name": "MultiComboBoxValueStateChangeEventDetail", + "name": "WrappingType", "package": "@ui5/webcomponents", - "module": "dist/MultiComboBox.js" + "module": "dist/types/WrappingType.js" } ] }, - "description": "Fired before the value state of the component is updated internally.\nThe event is preventable, meaning that if it's default action is\nprevented, the component will not update the value state.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": true, - "_ui5since": "2.19.0", - "_ui5parameters": [ - { - "type": { - "text": "string" - }, - "name": "valueState", - "_ui5privacy": "public", - "description": "The new `valueState` that will be set." - } - ] + "default": "\"None\"", + "description": "Defines if the text of the component should wrap when it's too long.\nWhen set to \"Normal\", the content (title, description) will be wrapped\nusing the `ui5-expandable-text` component.<br/>\n\nThe text can wrap up to 100 characters on small screens (size S) and\nup to 300 characters on larger screens (size M and above). When text exceeds\nthese limits, it truncates with an ellipsis followed by a text expansion trigger.\n\nAvailable options are:\n- `None` (default) - The text will truncate with an ellipsis.\n- `Normal` - The text will wrap (without truncation).", + "privacy": "public", + "_ui5since": "2.10.0" } ], "attributes": [ { - "description": "Defines the value of the component.\n\n**Note:** The property is updated upon typing.", - "name": "value", - "default": "\"\"", - "fieldName": "value", + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaSetsize**: Defines the number of items in the current set when not all items in the set are present in the DOM.\n**Note:** The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`.\n\n\t- **ariaPosinset**: Defines an element's number or position in the current set when not all items are present in the DOM.\n\t**Note:** The value 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.", + "name": "accessibility-attributes", + "default": "{}", + "fieldName": "accessibilityAttributes", "type": { - "text": "string" + "text": "ListItemAccessibilityAttributes" } }, { - "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.\n**Note:** When the component is used inside a form element,\nthe value is sent as the first element in the form data, even if it's empty.", - "name": "name", + "description": "Defines the text alternative of the component.\nNote: If not provided a default text alternative will be set, if present.", + "name": "accessible-name", "default": "undefined", - "fieldName": "name", + "fieldName": "accessibleName", "type": { "text": "string | undefined" } }, { - "description": "Defines whether the value will be autcompleted to match an item", - "name": "no-typeahead", - "default": "false", - "fieldName": "noTypeahead", - "type": { - "text": "boolean" - } - }, - { - "description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.", - "name": "placeholder", + "description": "Defines the `additionalText`, displayed in the end of the list item.", + "name": "additional-text", "default": "undefined", - "fieldName": "placeholder", + "fieldName": "additionalText", "type": { "text": "string | undefined" } }, { - "description": "Defines if the user input will be prevented, if no matching item has been found", - "name": "no-validation", - "default": "false", - "fieldName": "noValidation", + "description": "Defines the state of the `additionalText`.\n\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", + "name": "additional-text-state", + "default": "\"None\"", + "fieldName": "additionalTextState", "type": { - "text": "boolean" + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" } }, { - "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is completely noninteractive.", - "name": "disabled", - "default": "false", - "fieldName": "disabled", + "description": "Defines the description displayed right under the item text, if such is present.", + "name": "description", + "default": "undefined", + "fieldName": "description", "type": { - "text": "boolean" + "text": "string | undefined" } }, { - "description": "Defines the value state of the component.", - "name": "value-state", + "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", + "name": "highlight", "default": "\"None\"", - "fieldName": "valueState", + "fieldName": "highlight", "type": { "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" } }, { - "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.", - "name": "readonly", - "default": "false", - "fieldName": "readonly", - "type": { - "text": "boolean" - } - }, - { - "description": "Defines whether the component is required.", - "name": "required", - "default": "false", - "fieldName": "required", + "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).", + "name": "icon", + "default": "undefined", + "fieldName": "icon", "type": { - "text": "boolean" + "text": "string | undefined" } }, { - "description": "Indicates whether a loading indicator should be shown in the picker.", - "name": "loading", + "description": "Defines whether the `icon` should be displayed in the beginning of the list item or in the end.", + "name": "icon-end", "default": "false", - "fieldName": "loading", + "fieldName": "iconEnd", "type": { "text": "boolean" } }, { - "description": "Defines the filter type of the component.", - "name": "filter", - "default": "\"StartsWithPerTerm\"", - "fieldName": "filter", - "type": { - "text": "\"None\" | \"StartsWithPerTerm\" | \"StartsWith\" | \"Contains\"" - } - }, - { - "description": "Defines whether the clear icon of the multi-combobox will be shown.", - "name": "show-clear-icon", + "description": "Defines whether the item is movable.", + "name": "movable", "default": "false", - "fieldName": "showClearIcon", + "fieldName": "movable", "type": { "text": "boolean" } }, { - "description": "Defines the accessible ARIA name of the component.", - "name": "accessible-name", - "default": "undefined", - "fieldName": "accessibleName", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Receives id(or many ids) of the elements that label the component.", - "name": "accessible-name-ref", - "default": "undefined", - "fieldName": "accessibleNameRef", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Determines if the select all checkbox is visible on top of suggestions.", - "name": "show-select-all", + "description": "The navigated state of the list item.\nIf set to `true`, a navigation indicator is displayed at the end of the list item.", + "name": "navigated", "default": "false", - "fieldName": "showSelectAll", + "fieldName": "navigated", "type": { "text": "boolean" } }, { - "description": "Indicates whether the items picker is open.", - "name": "open", - "default": "false", - "fieldName": "open", - "type": { - "text": "boolean" - } - } - ], - "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" - }, - "tagName": "ui5-multi-combobox", - "customElement": true, - "_ui5since": "0.11.0", - "_ui5privacy": "public" - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "MultiComboBox", - "module": "dist/MultiComboBox.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-multi-combobox", - "declaration": { - "name": "MultiComboBox", - "module": "dist/MultiComboBox.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/MultiComboBoxItem.js", - "declarations": [ - { - "kind": "class", - "description": "The `ui5-mcb-item` represents the item for a `ui5-multi-combobox`.", - "name": "MultiComboBoxItem", - "members": [ - { - "kind": "field", + "description": "Defines the selected state of the component.", "name": "selected", + "default": "false", + "fieldName": "selected", "type": { "text": "boolean" - }, - "default": "false", - "description": "Defines the selected state of the component.", - "privacy": "public", - "inheritedFrom": { - "name": "ListItemBase", - "module": "dist/ListItemBase.js" } }, { - "kind": "field", + "description": "Defines the text of the component.", "name": "text", + "default": "undefined", + "fieldName": "text", "type": { "text": "string | undefined" - }, - "description": "Defines the text of the component.", - "default": "undefined", - "privacy": "public", - "inheritedFrom": { - "name": "ComboBoxItem", - "module": "dist/ComboBoxItem.js" } }, { - "kind": "field", - "name": "additionalText", - "type": { - "text": "string | undefined" - }, - "description": "Defines the additional text of the component.", + "description": "Defines the text of the tooltip that would be displayed for the list item.", + "name": "tooltip", "default": "undefined", - "privacy": "public", - "_ui5since": "1.0.0-rc.11", - "inheritedFrom": { - "name": "ComboBoxItem", - "module": "dist/ComboBoxItem.js" - } - } - ], - "attributes": [ - { - "description": "Defines the selected state of the component.", - "name": "selected", - "default": "false", - "fieldName": "selected", + "fieldName": "tooltip", "type": { - "text": "boolean" + "text": "string | undefined" } }, { - "description": "Defines the text of the component.", - "name": "text", - "default": "undefined", - "fieldName": "text", + "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.", + "name": "type", + "default": "\"Active\"", + "fieldName": "type", "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "ComboBoxItem", - "module": "dist/ComboBoxItem.js" + "text": "\"Navigation\" | \"Inactive\" | \"Active\" | \"Detail\"" } }, { - "description": "Defines the additional text of the component.", - "name": "additional-text", - "default": "undefined", - "fieldName": "additionalText", + "description": "Defines if the text of the component should wrap when it's too long.\nWhen set to \"Normal\", the content (title, description) will be wrapped\nusing the `ui5-expandable-text` component.<br/>\n\nThe text can wrap up to 100 characters on small screens (size S) and\nup to 300 characters on larger screens (size M and above). When text exceeds\nthese limits, it truncates with an ellipsis followed by a text expansion trigger.\n\nAvailable options are:\n- `None` (default) - The text will truncate with an ellipsis.\n- `Normal` - The text will wrap (without truncation).", + "name": "wrapping-type", + "default": "\"None\"", + "fieldName": "wrappingType", "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "ComboBoxItem", - "module": "dist/ComboBoxItem.js" + "text": "\"None\" | \"Normal\"" } } ], "superclass": { - "name": "ComboBoxItem", + "name": "ListItem", "package": "@ui5/webcomponents", - "module": "dist/ComboBoxItem.js" + "module": "dist/ListItem.js" }, - "tagName": "ui5-mcb-item", + "tagName": "ui5-li", "customElement": true, "_ui5privacy": "public", - "_ui5implements": [ + "events": [ { - "name": "IMultiComboBoxItem", - "package": "@ui5/webcomponents", - "module": "dist/MultiComboBox.js" + "name": "detail-click", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the user clicks on the detail button when type is `Detail`.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true } ] } @@ -15739,272 +14152,337 @@ "kind": "js", "name": "default", "declaration": { - "name": "MultiComboBoxItem", - "module": "dist/MultiComboBoxItem.js" + "name": "ListItemStandard", + "module": "dist/ListItemStandard.js" } }, { "kind": "custom-element-definition", - "name": "ui5-mcb-item", + "name": "ui5-li", "declaration": { - "name": "MultiComboBoxItem", - "module": "dist/MultiComboBoxItem.js" + "name": "ListItemStandard", + "module": "dist/ListItemStandard.js" } } ] }, { "kind": "javascript-module", - "path": "dist/MultiComboBoxItemGroup.js", + "path": "dist/Menu.js", "declarations": [ + { + "kind": "interface", + "name": "IMenuItem", + "description": "Interface for components that may be slotted inside a `ui5-menu`.\n\n**Note:** Use with `ui5-menu-item` or `ui5-menu-separator`. Implementing the interface does not guarantee that any other classes can work with the `ui5-menu`.", + "_ui5privacy": "public" + }, { "kind": "class", - "description": "The `ui5-mcb-item-group` is type of suggestion item,\nthat can be used to split the `ui5-multi-combobox` suggestions into groups.", - "name": "MultiComboBoxItemGroup", + "description": "### Overview\n\n`ui5-menu` component represents a hierarchical menu structure.\n\n### Structure\n\nThe `ui5-menu` can hold two types of entities:\n\n- `ui5-menu-item` components\n- `ui5-menu-separator` - used to separate menu items with a line\n\nAn arbitrary hierarchy structure can be represented by recursively nesting menu items.\n\n### Keyboard Handling\n\nThe `ui5-menu` provides advanced keyboard handling.\nThe user can use the following keyboard shortcuts in order to navigate trough the tree:\n\n- `Arrow Up` / `Arrow Down` - Navigates up and down the menu items that are currently visible.\n- `Arrow Right`, `Space` or `Enter` - Opens a sub-menu if there are menu items nested\nin the currently clicked menu item.\n- `Arrow Left` or `Escape` - Closes the currently opened sub-menu.\n\nwhen there is `endContent` :\n- `Arrow Left` or `ArrowRight` - Navigate between the menu item actions and the menu item itself\n- `Arrow Up` / `Arrow Down` - Navigates up and down the currently visible menu items\n\n**Note:** If the text direction is set to Right-to-left (RTL), `Arrow Right` and `Arrow Left` functionality is swapped.\n\nApplication developers are responsible for ensuring that interactive elements placed in the `endContent` slot\nhave the correct accessibility behaviour, including their enabled or disabled states.\nThe menu does not manage these aspects when the menu item state changes.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Menu.js\";`", + "name": "Menu", "slots": [ { "name": "default", - "description": "Defines the items of the <code>ui5-mcb-item-group</code>.", + "description": "Defines the items of this component.\n\n**Note:** Use `ui5-menu-item` and `ui5-menu-separator` for their intended design.", "_ui5propertyName": "items", "_ui5type": { - "text": "Array<MultiComboBoxItem>", + "text": "Array<IMenuItem>", "references": [ { - "name": "MultiComboBoxItem", + "name": "IMenuItem", "package": "@ui5/webcomponents", - "module": "dist/MultiComboBoxItem.js" + "module": "dist/Menu.js" } ] }, - "_ui5privacy": "public", - "inheritedFrom": { - "name": "ListItemGroup", - "module": "dist/ListItemGroup.js" - } + "_ui5privacy": "public" + } + ], + "members": [ + { + "kind": "field", + "name": "headerText", + "type": { + "text": "string | undefined" + }, + "description": "Defines the header text of the menu (displayed on mobile).", + "default": "undefined", + "privacy": "public" }, { - "name": "header", - "description": "Defines the header of the component.\n\n**Note:** Using this slot, the default header text of group and the value of `headerText` property will be overwritten.", - "_ui5type": { - "text": "Array<ListItemBase>", + "kind": "field", + "name": "horizontalAlign", + "type": { + "text": "PopoverHorizontalAlign", "references": [ { - "name": "ListItemBase", + "name": "PopoverHorizontalAlign", "package": "@ui5/webcomponents", - "module": "dist/ListItemBase.js" + "module": "dist/types/PopoverHorizontalAlign.js" } ] }, - "_ui5privacy": "public", - "inheritedFrom": { - "name": "ListItemGroup", - "module": "dist/ListItemGroup.js" - } - } - ], - "members": [ + "default": "\"Start\"", + "description": "Determines the horizontal alignment of the menu relative to its opener control.", + "privacy": "public" + }, { "kind": "field", - "name": "headerText", + "name": "loading", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Defines the header text of the <code>ui5-li-group</code>.", + "default": "false", + "description": "Defines if a loading indicator would be displayed inside the corresponding ui5-menu popover.", "privacy": "public", - "default": "undefined", - "inheritedFrom": { - "name": "ListItemGroup", - "module": "dist/ListItemGroup.js" - } + "_ui5since": "1.13.0" }, { "kind": "field", - "name": "headerAccessibleName", + "name": "loadingDelay", "type": { - "text": "string | undefined" + "text": "number" }, - "description": "Defines the accessible name of the header.", + "default": "1000", + "description": "Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding ui5-menu popover.", + "privacy": "public", + "_ui5since": "1.13.0" + }, + { + "kind": "field", + "name": "open", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Indicates if the menu is open.", + "privacy": "public", + "_ui5since": "1.10.0" + }, + { + "kind": "field", + "name": "opener", + "type": { + "text": "HTMLElement | string | null | undefined" + }, + "description": "Defines the ID or DOM Reference of the element at which the menu is shown.\nWhen using this attribute in a declarative way, you must only use the `id` (as a string) of the element at which you want to show the popover.\nYou can only set the `opener` attribute to a DOM Reference when using JavaScript.", "privacy": "public", "default": "undefined", - "inheritedFrom": { - "name": "ListItemGroup", - "module": "dist/ListItemGroup.js" - } + "_ui5since": "1.10.0" }, { "kind": "field", - "name": "wrappingType", + "name": "placement", "type": { - "text": "WrappingType", + "text": "PopoverPlacement", "references": [ { - "name": "WrappingType", + "name": "PopoverPlacement", "package": "@ui5/webcomponents", - "module": "dist/types/WrappingType.js" + "module": "dist/types/PopoverPlacement.js" } ] }, - "default": "\"None\"", - "description": "Defines if the text of the component should wrap when it's too long.\nWhen set to \"Normal\", the content (title, description) will be wrapped\nusing the `ui5-expandable-text` component.<br/>\n\nThe text can wrap up to 100 characters on small screens (size S) and\nup to 300 characters on larger screens (size M and above). When text exceeds\nthese limits, it truncates with an ellipsis followed by a text expansion trigger.\n\nAvailable options are:\n- `None` (default) - The text will truncate with an ellipsis.\n- `Normal` - The text will wrap (without truncation).", + "default": "\"Bottom\"", + "description": "Determines on which side the component is placed at.", "privacy": "public", - "_ui5since": "2.15.0", - "inheritedFrom": { - "name": "ListItemGroup", - "module": "dist/ListItemGroup.js" - } - } - ], - "superclass": { - "name": "ComboBoxItemGroup", - "package": "@ui5/webcomponents", - "module": "dist/ComboBoxItemGroup.js" - }, - "tagName": "ui5-mcb-item-group", - "customElement": true, - "_ui5since": "2.0.0", - "_ui5privacy": "public", - "_ui5implements": [ - { - "name": "IMultiComboBoxItem", - "package": "@ui5/webcomponents", - "module": "dist/MultiComboBox.js" + "_ui5since": "2.16.0" } ], - "cssParts": [ + "events": [ { - "description": "Used to style the header item of the group", - "name": "header", - "inheritedFrom": { - "name": "ListItemGroup", - "module": "dist/ListItemGroup.js" - } - } - ], - "attributes": [ - { - "description": "Defines the header text of the <code>ui5-li-group</code>.", - "name": "header-text", - "default": "undefined", - "fieldName": "headerText", - "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "ListItemGroup", - "module": "dist/ListItemGroup.js" - } - }, - { - "description": "Defines the accessible name of the header.", - "name": "header-accessible-name", - "default": "undefined", - "fieldName": "headerAccessibleName", - "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "ListItemGroup", - "module": "dist/ListItemGroup.js" - } - }, - { - "description": "Defines if the text of the component should wrap when it's too long.\nWhen set to \"Normal\", the content (title, description) will be wrapped\nusing the `ui5-expandable-text` component.<br/>\n\nThe text can wrap up to 100 characters on small screens (size S) and\nup to 300 characters on larger screens (size M and above). When text exceeds\nthese limits, it truncates with an ellipsis followed by a text expansion trigger.\n\nAvailable options are:\n- `None` (default) - The text will truncate with an ellipsis.\n- `Normal` - The text will wrap (without truncation).", - "name": "wrapping-type", - "default": "\"None\"", - "fieldName": "wrappingType", - "type": { - "text": "\"None\" | \"Normal\"" - }, - "inheritedFrom": { - "name": "ListItemGroup", - "module": "dist/ListItemGroup.js" - } - } - ], - "events": [ - { - "name": "move-over", + "name": "before-close", "_ui5privacy": "public", "type": { - "text": "CustomEvent<ListItemGroupMoveEventDetail>", + "text": "CustomEvent<MenuBeforeCloseEventDetail>", "references": [ { - "name": "ListItemGroupMoveEventDetail", + "name": "MenuBeforeCloseEventDetail", "package": "@ui5/webcomponents", - "module": "dist/ListItemGroup.js" + "module": "dist/Menu.js" } ] }, - "description": "Fired when a movable list item is moved over a potential drop target during a dragging operation.\n\nIf the new position is valid, prevent the default action of the event using `preventDefault()`.", + "description": "Fired before the menu is closed. This event can be cancelled, which will prevent the menu from closing.", "_ui5Cancelable": true, "_ui5allowPreventDefault": true, "_ui5Bubbles": true, - "_ui5since": "2.1.0", + "_ui5since": "1.10.0", "_ui5parameters": [ { "type": { - "text": "object" + "text": "boolean" }, - "name": "source", + "name": "escPressed", "_ui5privacy": "public", - "description": "Contains information about the moved element under `element` property." - }, + "description": "Indicates that `ESC` key has triggered the event." + } + ] + }, + { + "name": "before-open", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<MenuBeforeOpenEventDetail>", + "references": [ + { + "name": "MenuBeforeOpenEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/Menu.js" + } + ] + }, + "description": "Fired before the menu is opened. This event can be cancelled, which will prevent the menu from opening.\n\n**Note:** Since 1.14.0 the event is also fired before a sub-menu opens.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true, + "_ui5since": "1.10.0", + "_ui5parameters": [ { "type": { - "text": "object" + "text": "HTMLElement" }, - "name": "destination", + "name": "item", "_ui5privacy": "public", - "description": "Contains information about the destination of the moved element. Has `element` and `placement` properties." + "description": "The `ui5-menu-item` that triggers opening of the sub-menu or undefined when fired upon root menu opening." } - ], - "inheritedFrom": { - "name": "ListItemGroup", - "module": "dist/ListItemGroup.js" - } + ] }, { - "name": "move", + "name": "close", "_ui5privacy": "public", "type": { - "text": "CustomEvent<ListItemGroupMoveEventDetail>", + "text": "CustomEvent" + }, + "description": "Fired after the menu is closed.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": false, + "_ui5since": "1.10.0" + }, + { + "name": "item-click", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<MenuItemClickEventDetail>", "references": [ { - "name": "ListItemGroupMoveEventDetail", + "name": "MenuItemClickEventDetail", "package": "@ui5/webcomponents", - "module": "dist/ListItemGroup.js" + "module": "dist/Menu.js" } ] }, - "description": "Fired when a movable list item is dropped onto a drop target.\n\n**Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5since": "2.1.0", + "description": "Fired when an item is being clicked.\n\n**Note:** Since 1.17.0 the event is preventable, allowing the menu to remain open after an item is pressed.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": false, "_ui5parameters": [ { "type": { - "text": "object" + "text": "HTMLElement" }, - "name": "source", + "name": "item", "_ui5privacy": "public", - "description": "Contains information about the moved element under `element` property." + "description": "The currently clicked menu item." }, { "type": { - "text": "object" + "text": "string" }, - "name": "destination", + "name": "text", "_ui5privacy": "public", - "description": "Contains information about the destination of the moved element. Has `element` and `placement` properties." + "description": "The text of the currently clicked menu item." } - ], - "inheritedFrom": { - "name": "ListItemGroup", - "module": "dist/ListItemGroup.js" + ] + }, + { + "name": "open", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired after the menu is opened.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5since": "1.10.0" + } + ], + "attributes": [ + { + "description": "Defines the header text of the menu (displayed on mobile).", + "name": "header-text", + "default": "undefined", + "fieldName": "headerText", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Determines the horizontal alignment of the menu relative to its opener control.", + "name": "horizontal-align", + "default": "\"Start\"", + "fieldName": "horizontalAlign", + "type": { + "text": "\"Start\" | \"End\" | \"Center\" | \"Stretch\"" + } + }, + { + "description": "Defines if a loading indicator would be displayed inside the corresponding ui5-menu popover.", + "name": "loading", + "default": "false", + "fieldName": "loading", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding ui5-menu popover.", + "name": "loading-delay", + "default": "1000", + "fieldName": "loadingDelay", + "type": { + "text": "number" + } + }, + { + "description": "Indicates if the menu is open.", + "name": "open", + "default": "false", + "fieldName": "open", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines the ID or DOM Reference of the element at which the menu is shown.\nWhen using this attribute in a declarative way, you must only use the `id` (as a string) of the element at which you want to show the popover.\nYou can only set the `opener` attribute to a DOM Reference when using JavaScript.", + "name": "opener", + "default": "undefined", + "fieldName": "opener", + "type": { + "text": "string | HTMLElement | null | undefined" + } + }, + { + "description": "Determines on which side the component is placed at.", + "name": "placement", + "default": "\"Bottom\"", + "fieldName": "placement", + "type": { + "text": "\"Top\" | \"Bottom\" | \"Start\" | \"End\"" } } - ] + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-menu", + "customElement": true, + "_ui5since": "1.3.0", + "_ui5privacy": "public" } ], "exports": [ @@ -16012,824 +14490,491 @@ "kind": "js", "name": "default", "declaration": { - "name": "MultiComboBoxItemGroup", - "module": "dist/MultiComboBoxItemGroup.js" + "name": "Menu", + "module": "dist/Menu.js" } }, { "kind": "custom-element-definition", - "name": "ui5-mcb-item-group", + "name": "ui5-menu", "declaration": { - "name": "MultiComboBoxItemGroup", - "module": "dist/MultiComboBoxItemGroup.js" + "name": "Menu", + "module": "dist/Menu.js" } } ] }, { "kind": "javascript-module", - "path": "dist/MultiInput.js", + "path": "dist/MenuItem.js", "declarations": [ { "kind": "class", - "description": "### Overview\nA `ui5-multi-input` field allows the user to enter multiple values, which are displayed as `ui5-token`.\n\nUser can choose interaction for creating tokens.\nFiori Guidelines say that user should create tokens when:\n\n- Type a value in the input and press enter or focus out the input field (`change` event is fired)\n- Move between suggestion items (`selection-change` event is fired)\n- Clicking on a suggestion item (`selection-change` event is fired if the clicked item is different than the current value. Also `change` event is fired )\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/MultiInput.js\";`", - "name": "MultiInput", + "description": "### Overview\n\n`ui5-menu-item` is the item to use inside a `ui5-menu`.\nAn arbitrary hierarchy structure can be represented by recursively nesting menu items.\n\n### Usage\n\n`ui5-menu-item` represents a node in a `ui5-menu`. The menu itself is rendered as a list,\nand each `ui5-menu-item` is represented by a list item in that list. Therefore, you should only use\n`ui5-menu-item` directly in your apps. The `ui5-li` list item is internal for the list, and not intended for public use.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/MenuItem.js\";`", + "name": "MenuItem", "slots": [ - { - "name": "tokens", - "description": "Defines the component tokens.", - "_ui5type": { - "text": "Array<IToken>", - "references": [ - { - "name": "IToken", - "package": "@ui5/webcomponents", - "module": "dist/MultiInput.js" - } - ] - }, - "_ui5privacy": "public" - }, { "name": "default", - "description": "Defines the suggestion items.\n\n**Note:** The suggestions would be displayed only if the `showSuggestions`\nproperty is set to `true`.\n\n**Note:** The `<ui5-suggestion-item>`, `<ui5-suggestion-item-group>` and `ui5-suggestion-item-custom` are recommended to be used as suggestion items.", - "_ui5propertyName": "suggestionItems", + "description": "Defines the items of this component.\n\n**Note:** The slot can hold menu item and menu separator items.\n\nIf there are items added to this slot, an arrow will be displayed at the end\nof the item in order to indicate that there are items added. In that case components added\nto `endContent` slot or `additionalText` content will not be displayed.\n\nThe priority of what will be displayed at the end of the menu item is as follows:\nsub-menu arrow (if there are items added in `items` slot) -> components added in `endContent` -> text set to `additionalText`.", + "_ui5propertyName": "items", "_ui5type": { - "text": "Array<IInputSuggestionItem>", + "text": "Array<IMenuItem>", "references": [ { - "name": "IInputSuggestionItem", + "name": "IMenuItem", "package": "@ui5/webcomponents", - "module": "dist/Input.js" + "module": "dist/Menu.js" } ] }, - "_ui5privacy": "public", - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" - } + "_ui5privacy": "public" }, { - "name": "icon", - "description": "Defines the icon to be displayed in the component.", + "name": "deleteButton", + "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<IIcon>", + "text": "Array<IButton>", "references": [ { - "name": "IIcon", + "name": "IButton", "package": "@ui5/webcomponents", - "module": "dist/Icon.js" + "module": "dist/Button.js" } ] }, - "_ui5privacy": "public", - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" - } + "_ui5privacy": "public" }, { - "name": "valueStateMessage", - "description": "Defines the value state message that will be displayed as pop up under the component.\nThe value state message slot should contain only one root element.\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 component is in `Information`, `Critical` or `Negative` value state.\n\n**Note:** If the component has `suggestionItems`,\nthe `valueStateMessage` would be displayed as part of the same popover, if used on desktop, or dialog - on phone.", - "_ui5since": "1.0.0-rc.6", + "name": "endContent", + "description": "Defines the components that should be displayed at the end of the menu item.\n\n**Note:** It is highly recommended to slot only components of type `ui5-button`,`ui5-link`\nor `ui5-icon` in order to preserve the intended design. If there are components added to this slot,\nand there is text set in `additionalText`, it will not be displayed. If there are items added to `items` slot,\nnether `additionalText` nor components added to this slot would be displayed.\n\nThe priority of what will be displayed at the end of the menu item is as follows:\nsub-menu arrow (if there are items added in `items` slot) -> components added in `endContent` -> text set to `additionalText`.\n\nApplication developers are responsible for ensuring that interactive elements placed in the `endContent` slot\nhave the correct accessibility behaviour, including their enabled or disabled states.\nThe menu does not manage these aspects when the menu item state changes.", + "_ui5since": "2.0.0", "_ui5type": { "text": "Array<HTMLElement>" }, - "_ui5privacy": "public", - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" - } + "_ui5privacy": "public" } ], "members": [ { "kind": "field", - "name": "showValueHelpIcon", + "name": "accessibilityAttributes", "type": { - "text": "boolean" + "text": "MenuItemAccessibilityAttributes", + "references": [ + { + "name": "MenuItemAccessibilityAttributes", + "package": "@ui5/webcomponents", + "module": "dist/MenuItem.js" + } + ] }, - "default": "false", - "description": "Determines whether a value help icon will be visualized in the end of the input.\nPressing the icon will fire `value-help-trigger` event.", - "privacy": "public" + "default": "{}", + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaKeyShortcuts**: Indicated the availability of a keyboard shortcuts defined for the menu item.\n\n- **role**: Defines the role of the menu item. If not set, menu item will have default role=\"menuitem\".", + "privacy": "public", + "_ui5since": "2.1.0" }, { "kind": "field", - "name": "name", + "name": "accessibleName", "type": { "text": "string | undefined" }, - "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.\n**Note:** When the component is used inside a form element,\nthe value is sent as the first element in the form data, even if it's empty.", + "description": "Defines the accessible ARIA name of the component.", "default": "undefined", "privacy": "public", - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" - } - }, - { - "kind": "field", - "name": "disabled", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is completely noninteractive.", - "privacy": "public", - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" - } + "_ui5since": "1.7.0" }, { "kind": "field", - "name": "placeholder", + "name": "additionalText", "type": { "text": "string | undefined" }, - "description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.", + "description": "Defines the `additionalText`, displayed in the end of the menu item.\n\n**Note:** The additional text will not be displayed if there are items added in `items` slot or there are\ncomponents added to `endContent` slot.\n\nThe priority of what will be displayed at the end of the menu item is as follows:\nsub-menu arrow (if there are items added in `items` slot) -> components added in `endContent` -> text set to `additionalText`.", "default": "undefined", "privacy": "public", - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" - } - }, - { - "kind": "field", - "name": "readonly", - "type": { - "text": "boolean" - }, - "default": "false", - "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.", - "privacy": "public", - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" - } + "_ui5since": "1.8.0" }, { "kind": "field", - "name": "required", + "name": "checked", "type": { "text": "boolean" }, "default": "false", - "description": "Defines whether the component is required.", + "description": "Defines whether menu item is in checked state.\n\n**Note:** checked state is only taken into account when menu item is added to menu item group\nwith `checkMode` other than `None`.\n\n**Note:** A checked menu item has a checkmark displayed at its end.", "privacy": "public", - "_ui5since": "1.0.0-rc.3", - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" - } + "_ui5since": "2.12.0" }, { "kind": "field", - "name": "noTypeahead", + "name": "disabled", "type": { "text": "boolean" }, "default": "false", - "description": "Defines whether the value will be autcompleted to match an item", - "privacy": "public", - "_ui5since": "1.4.0", - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" - } + "description": "Defines whether menu item is in disabled state.\n\n**Note:** A disabled menu item is noninteractive.", + "privacy": "public" }, { "kind": "field", - "name": "type", + "name": "highlight", "type": { - "text": "InputType", + "text": "Highlight", "references": [ { - "name": "InputType", + "name": "Highlight", "package": "@ui5/webcomponents", - "module": "dist/types/InputType.js" + "module": "dist/types/Highlight.js" } ] }, - "default": "\"Text\"", - "description": "Defines the HTML type of the component.\n\n**Notes:**\n\n- The particular effect of this property differs depending on the browser\nand the current language settings, especially for type `Number`.\n- The property is mostly intended to be used with touch devices\nthat use different soft keyboard layouts depending on the given input type.", - "privacy": "public", - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" - } - }, - { - "kind": "field", - "name": "value", - "type": { - "text": "string" - }, - "default": "\"\"", - "description": "Defines the value of the component.\n\n**Note:** The property is updated upon typing.", + "default": "\"None\"", + "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", "privacy": "public", - "_ui5formProperty": true, - "_ui5formEvents": "change,input", - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" - } + "_ui5since": "1.24" }, { "kind": "field", - "name": "valueState", + "name": "icon", "type": { - "text": "ValueState", - "references": [ - { - "name": "ValueState", - "package": "@ui5/webcomponents-base", - "module": "dist/types/ValueState.js" - } - ] + "text": "string | undefined" }, - "default": "\"None\"", - "description": "Defines the value state of the component.", - "privacy": "public", - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" - } + "description": "Defines the icon to be displayed as graphical element within the component.\nThe SAP-icons font provides numerous options.\n\n**Example:**\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "default": "undefined", + "privacy": "public" }, { "kind": "field", - "name": "showSuggestions", + "name": "loading", "type": { "text": "boolean" }, "default": "false", - "description": "Defines whether the component should show suggestions, if such are present.", + "description": "Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding menu popover.\n\n**Note:** If set to `true` a busy indicator component will be displayed into the related one to the current menu item sub-menu popover.", "privacy": "public", - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" - } + "_ui5since": "1.13.0" }, { "kind": "field", - "name": "maxlength", + "name": "loadingDelay", "type": { - "text": "number | undefined" + "text": "number" }, - "description": "Sets the maximum number of characters available in the input field.\n\n**Note:** This property is not compatible with the ui5-input type InputType.Number. If the ui5-input type is set to Number, the maxlength value is ignored.", - "default": "undefined", + "default": "1000", + "description": "Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding menu popover.", "privacy": "public", - "_ui5since": "1.0.0-rc.5", - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" - } + "_ui5since": "1.13.0" }, { "kind": "field", - "name": "accessibleName", + "name": "navigated", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Defines the accessible ARIA name of the component.", - "default": "undefined", + "default": "false", + "description": "The navigated state of the list item.\nIf set to `true`, a navigation indicator is displayed at the end of the list item.", "privacy": "public", - "_ui5since": "1.0.0-rc.15", - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" - } + "_ui5since": "1.10.0" }, { "kind": "field", - "name": "accessibleNameRef", + "name": "selected", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Receives id(or many ids) of the elements that label the input.", - "default": "undefined", - "privacy": "public", - "_ui5since": "1.0.0-rc.15", - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" - } + "default": "false", + "description": "Defines the selected state of the component.", + "privacy": "public" }, { "kind": "field", - "name": "accessibleDescription", + "name": "text", "type": { "text": "string | undefined" }, - "description": "Defines the accessible description of the component.", + "description": "Defines the text of the tree item.", "default": "undefined", - "privacy": "public", - "_ui5since": "2.9.0", - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" - } + "privacy": "public" }, { "kind": "field", - "name": "accessibleDescriptionRef", + "name": "tooltip", "type": { "text": "string | undefined" }, - "description": "Receives id(or many ids) of the elements that describe the input.", + "description": "Defines the text of the tooltip for the menu item.", "default": "undefined", "privacy": "public", - "_ui5since": "2.9.0", - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" - } - }, - { - "kind": "field", - "name": "showClearIcon", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines whether the clear icon of the input will be shown.", - "privacy": "public", - "_ui5since": "1.2.0", - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" - } - }, - { - "kind": "field", - "name": "open", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines whether the suggestions picker is open.\nThe picker will not open if the `showSuggestions` property is set to `false`, the input is disabled or the input is readonly.\nThe picker will close automatically and `close` event will be fired if the input is not in the viewport.", - "privacy": "public", - "_ui5since": "2.0.0", - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" - } + "_ui5since": "1.23.0" }, { "kind": "field", - "name": "filter", + "name": "type", "type": { - "text": "InputSuggestionsFilter", + "text": "ListItemType", "references": [ { - "name": "InputSuggestionsFilter", + "name": "ListItemType", "package": "@ui5/webcomponents", - "module": "dist/types/InputSuggestionsFilter.js" + "module": "dist/types/ListItemType.js" } ] }, - "description": "Defines the filter type of the component.", - "default": "\"None\"", - "privacy": "public", - "_ui5since": "2.19.0", - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" - } + "default": "\"Active\"", + "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.", + "privacy": "public" } ], "events": [ { - "name": "value-help-trigger", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired when the value help icon is pressed\nand F4 or ALT/OPTION + ARROW_UP/ARROW_DOWN keyboard keys are used.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true - }, - { - "name": "token-delete", + "name": "before-close", "_ui5privacy": "public", "type": { - "text": "CustomEvent<MultiInputTokenDeleteEventDetail>", + "text": "CustomEvent<MenuBeforeCloseEventDetail>", "references": [ { - "name": "MultiInputTokenDeleteEventDetail", + "name": "MenuBeforeCloseEventDetail", "package": "@ui5/webcomponents", - "module": "dist/MultiInput.js" + "module": "dist/MenuItem.js" } ] }, - "description": "Fired when tokens are being deleted.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5parameters": [ - { - "type": { - "text": "Array" + "description": "Fired before the menu is closed. This event can be cancelled, which will prevent the menu from closing.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": false, + "_ui5since": "1.10.0", + "_ui5parameters": [ + { + "type": { + "text": "boolean" }, - "name": "tokens", + "name": "escPressed", "_ui5privacy": "public", - "description": "An array containing the deleted tokens." + "description": "Indicates that `ESC` key has triggered the event." } ] }, { - "name": "change", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired when the input operation has finished by pressing Enter or on focusout.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" - } - }, - { - "name": "input", + "name": "before-open", "_ui5privacy": "public", "type": { - "text": "CustomEvent" + "text": "CustomEvent<MenuBeforeOpenEventDetail>", + "references": [ + { + "name": "MenuBeforeOpenEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/MenuItem.js" + } + ] }, - "description": "Fired when the value of the component changes at each keystroke,\nand when a suggestion item has been selected.", + "description": "Fired before the menu is opened. This event can be cancelled, which will prevent the menu from opening.\n\n**Note:** Since 1.14.0 the event is also fired before a sub-menu opens.", "_ui5Cancelable": true, "_ui5allowPreventDefault": true, - "_ui5Bubbles": true, - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" - } + "_ui5Bubbles": false, + "_ui5since": "1.10.0", + "_ui5parameters": [ + { + "type": { + "text": "HTMLElement" + }, + "name": "item", + "_ui5privacy": "public", + "description": "The menu item that triggers opening of the sub-menu or undefined when fired upon root menu opening." + } + ] }, { - "name": "select", + "name": "check", "_ui5privacy": "public", "type": { "text": "CustomEvent" }, - "description": "Fired when some text has been selected.", + "description": "Fired when an item is checked or unchecked.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, "_ui5Bubbles": true, - "_ui5since": "2.0.0", - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" - } + "_ui5since": "2.12.0" }, { - "name": "selection-change", + "name": "close", "_ui5privacy": "public", "type": { - "text": "CustomEvent<InputSelectionChangeEventDetail>", - "references": [ - { - "name": "InputSelectionChangeEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/Input.js" - } - ] + "text": "CustomEvent" }, - "description": "Fired when the user navigates to a suggestion item via the ARROW keys,\nas a preview, before the final selection.", + "description": "Fired after the menu is closed.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5since": "2.0.0", - "_ui5parameters": [ - { - "type": { - "text": "HTMLElement" - }, - "name": "item", - "_ui5privacy": "public", - "description": "The previewed suggestion item." - } - ], - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" - } + "_ui5Bubbles": false, + "_ui5since": "1.10.0" }, { - "name": "open", + "name": "detail-click", "_ui5privacy": "public", "type": { "text": "CustomEvent" }, - "description": "Fired when the suggestions picker is open.", + "description": "Fired when the user clicks on the detail button when type is `Detail`.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5since": "2.0.0", - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" - } + "_ui5Bubbles": true }, { - "name": "close", + "name": "open", "_ui5privacy": "public", "type": { "text": "CustomEvent" }, - "description": "Fired when the suggestions picker is closed.", + "description": "Fired after the menu is opened.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, - "_ui5Bubbles": false, - "_ui5since": "2.0.0", - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" - } + "_ui5Bubbles": false } ], "attributes": [ { - "description": "Determines whether a value help icon will be visualized in the end of the input.\nPressing the icon will fire `value-help-trigger` event.", - "name": "show-value-help-icon", - "default": "false", - "fieldName": "showValueHelpIcon", + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaKeyShortcuts**: Indicated the availability of a keyboard shortcuts defined for the menu item.\n\n- **role**: Defines the role of the menu item. If not set, menu item will have default role=\"menuitem\".", + "name": "accessibility-attributes", + "default": "{}", + "fieldName": "accessibilityAttributes", "type": { - "text": "boolean" + "text": "MenuItemAccessibilityAttributes" } }, { - "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.\n**Note:** When the component is used inside a form element,\nthe value is sent as the first element in the form data, even if it's empty.", - "name": "name", + "description": "Defines the accessible ARIA name of the component.", + "name": "accessible-name", "default": "undefined", - "fieldName": "name", + "fieldName": "accessibleName", "type": { "text": "string | undefined" - }, - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" - } - }, - { - "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is completely noninteractive.", - "name": "disabled", - "default": "false", - "fieldName": "disabled", - "type": { - "text": "boolean" - }, - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" } }, { - "description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.", - "name": "placeholder", + "description": "Defines the `additionalText`, displayed in the end of the menu item.\n\n**Note:** The additional text will not be displayed if there are items added in `items` slot or there are\ncomponents added to `endContent` slot.\n\nThe priority of what will be displayed at the end of the menu item is as follows:\nsub-menu arrow (if there are items added in `items` slot) -> components added in `endContent` -> text set to `additionalText`.", + "name": "additional-text", "default": "undefined", - "fieldName": "placeholder", + "fieldName": "additionalText", "type": { "text": "string | undefined" - }, - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" - } - }, - { - "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.", - "name": "readonly", - "default": "false", - "fieldName": "readonly", - "type": { - "text": "boolean" - }, - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" } }, { - "description": "Defines whether the component is required.", - "name": "required", + "description": "Defines whether menu item is in checked state.\n\n**Note:** checked state is only taken into account when menu item is added to menu item group\nwith `checkMode` other than `None`.\n\n**Note:** A checked menu item has a checkmark displayed at its end.", + "name": "checked", "default": "false", - "fieldName": "required", + "fieldName": "checked", "type": { "text": "boolean" - }, - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" } }, { - "description": "Defines whether the value will be autcompleted to match an item", - "name": "no-typeahead", + "description": "Defines whether menu item is in disabled state.\n\n**Note:** A disabled menu item is noninteractive.", + "name": "disabled", "default": "false", - "fieldName": "noTypeahead", + "fieldName": "disabled", "type": { "text": "boolean" - }, - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" - } - }, - { - "description": "Defines the HTML type of the component.\n\n**Notes:**\n\n- The particular effect of this property differs depending on the browser\nand the current language settings, especially for type `Number`.\n- The property is mostly intended to be used with touch devices\nthat use different soft keyboard layouts depending on the given input type.", - "name": "type", - "default": "\"Text\"", - "fieldName": "type", - "type": { - "text": "\"Text\" | \"Email\" | \"Number\" | \"Password\" | \"Tel\" | \"URL\" | \"Search\"" - }, - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" } }, { - "description": "Defines the value of the component.\n\n**Note:** The property is updated upon typing.", - "name": "value", - "default": "\"\"", - "fieldName": "value", + "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", + "name": "highlight", + "default": "\"None\"", + "fieldName": "highlight", "type": { - "text": "string" - }, - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" } }, { - "description": "Defines the value state of the component.", - "name": "value-state", - "default": "\"None\"", - "fieldName": "valueState", + "description": "Defines the icon to be displayed as graphical element within the component.\nThe SAP-icons font provides numerous options.\n\n**Example:**\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "name": "icon", + "default": "undefined", + "fieldName": "icon", "type": { - "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" - }, - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" + "text": "string | undefined" } }, { - "description": "Defines whether the component should show suggestions, if such are present.", - "name": "show-suggestions", + "description": "Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding menu popover.\n\n**Note:** If set to `true` a busy indicator component will be displayed into the related one to the current menu item sub-menu popover.", + "name": "loading", "default": "false", - "fieldName": "showSuggestions", + "fieldName": "loading", "type": { "text": "boolean" - }, - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" } }, { - "description": "Sets the maximum number of characters available in the input field.\n\n**Note:** This property is not compatible with the ui5-input type InputType.Number. If the ui5-input type is set to Number, the maxlength value is ignored.", - "name": "maxlength", - "default": "undefined", - "fieldName": "maxlength", + "description": "Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding menu popover.", + "name": "loading-delay", + "default": "1000", + "fieldName": "loadingDelay", "type": { - "text": "number | undefined" - }, - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" + "text": "number" } }, { - "description": "Defines the accessible ARIA name of the component.", - "name": "accessible-name", - "default": "undefined", - "fieldName": "accessibleName", + "description": "The navigated state of the list item.\nIf set to `true`, a navigation indicator is displayed at the end of the list item.", + "name": "navigated", + "default": "false", + "fieldName": "navigated", "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" + "text": "boolean" } }, { - "description": "Receives id(or many ids) of the elements that label the input.", - "name": "accessible-name-ref", - "default": "undefined", - "fieldName": "accessibleNameRef", + "description": "Defines the selected state of the component.", + "name": "selected", + "default": "false", + "fieldName": "selected", "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" + "text": "boolean" } }, { - "description": "Defines the accessible description of the component.", - "name": "accessible-description", + "description": "Defines the text of the tree item.", + "name": "text", "default": "undefined", - "fieldName": "accessibleDescription", + "fieldName": "text", "type": { "text": "string | undefined" - }, - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" } }, { - "description": "Receives id(or many ids) of the elements that describe the input.", - "name": "accessible-description-ref", + "description": "Defines the text of the tooltip for the menu item.", + "name": "tooltip", "default": "undefined", - "fieldName": "accessibleDescriptionRef", + "fieldName": "tooltip", "type": { "text": "string | undefined" - }, - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" - } - }, - { - "description": "Defines whether the clear icon of the input will be shown.", - "name": "show-clear-icon", - "default": "false", - "fieldName": "showClearIcon", - "type": { - "text": "boolean" - }, - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" - } - }, - { - "description": "Defines whether the suggestions picker is open.\nThe picker will not open if the `showSuggestions` property is set to `false`, the input is disabled or the input is readonly.\nThe picker will close automatically and `close` event will be fired if the input is not in the viewport.", - "name": "open", - "default": "false", - "fieldName": "open", - "type": { - "text": "boolean" - }, - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" } }, { - "description": "Defines the filter type of the component.", - "name": "filter", - "default": "\"None\"", - "fieldName": "filter", + "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.", + "name": "type", + "default": "\"Active\"", + "fieldName": "type", "type": { - "text": "\"None\" | \"StartsWithPerTerm\" | \"StartsWith\" | \"Contains\"" - }, - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" + "text": "\"Navigation\" | \"Inactive\" | \"Active\" | \"Detail\"" } } ], "superclass": { - "name": "Input", + "name": "ListItem", "package": "@ui5/webcomponents", - "module": "dist/Input.js" + "module": "dist/ListItem.js" }, - "tagName": "ui5-multi-input", + "tagName": "ui5-menu-item", "customElement": true, - "_ui5since": "1.0.0-rc.9", + "_ui5since": "1.3.0", "_ui5privacy": "public", - "cssParts": [ - { - "description": "Used to style the root DOM element of the Input component", - "name": "root", - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" - } - }, - { - "description": "Used to style the native input element", - "name": "input", - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" - } - }, + "_ui5implements": [ { - "description": "Used to style the clear icon, which can be pressed to clear user input text", - "name": "clear-icon", - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" - } + "name": "IMenuItem", + "package": "@ui5/webcomponents", + "module": "dist/Menu.js" } ] } @@ -16839,35 +14984,42 @@ "kind": "js", "name": "default", "declaration": { - "name": "MultiInput", - "module": "dist/MultiInput.js" + "name": "MenuItem", + "module": "dist/MenuItem.js" } }, { "kind": "custom-element-definition", - "name": "ui5-multi-input", + "name": "ui5-menu-item", "declaration": { - "name": "MultiInput", - "module": "dist/MultiInput.js" + "name": "MenuItem", + "module": "dist/MenuItem.js" } } ] }, { "kind": "javascript-module", - "path": "dist/Option.js", + "path": "dist/MenuItemGroup.js", "declarations": [ { "kind": "class", - "description": "### Overview\n\nThe `ui5-option` component defines the content of an option in the `ui5-select`.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Option.js\";`", - "name": "Option", + "description": "### Overview\n\nThe `ui5-menu-item-group` component represents a group of items designed for use inside a `ui5-menu`.\nItems belonging to the same group should be wrapped by a `ui5-menu-item-group`.\nEach group can have an `checkMode` property, which defines the check mode for the items within the group.\nThe possible values for `checkMode` are:\n- 'None' (default) - no items can be checked\n- 'Single' - Only one item can be checked at a time\n- 'Multiple' - Multiple items can be checked simultaneously\n\n**Note:** If the `checkMode` property is set to 'Single', only one item can remain checked at any given time.\nIf multiple items are marked as checked, the last checked item will take precedence.\n\n### Usage\n\n`ui5-menu-item-group` represents a collection of `ui5-menu-item` components that can have the same check mode.\nThe items are addeed to the group's `items` slot.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/MenuItemGroup.js\";`", + "name": "MenuItemGroup", "slots": [ { "name": "default", - "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", + "description": "Defines the items of this component.\n**Note:** The slot can hold any combination of components of type `ui5-menu-item` or `ui5-menu-separator` or both.", + "_ui5propertyName": "items", "_ui5type": { - "text": "Array<Node>" + "text": "Array<IMenuItem>", + "references": [ + { + "name": "IMenuItem", + "package": "@ui5/webcomponents", + "module": "dist/Menu.js" + } + ] }, "_ui5privacy": "public" } @@ -16875,123 +15027,95 @@ "members": [ { "kind": "field", - "name": "value", - "type": { - "text": "string | undefined" - }, - "description": "Defines the value of the `ui5-select` inside an HTML Form element when this component is selected.\nFor more information on HTML Form support, see the `name` property of `ui5-select`.", - "default": "undefined", - "privacy": "public" - }, - { - "kind": "field", - "name": "icon", + "name": "checkMode", "type": { - "text": "string | undefined" + "text": "MenuItemGroupCheckMode", + "references": [ + { + "name": "MenuItemGroupCheckMode", + "package": "@ui5/webcomponents", + "module": "dist/types/MenuItemGroupCheckMode.js" + } + ] }, - "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": "undefined", + "default": "\"None\"", + "description": "Defines the component's check mode.", "privacy": "public" - }, - { - "kind": "field", - "name": "additionalText", - "type": { - "text": "string | undefined" - }, - "description": "Defines the `additionalText`, displayed in the end of the option.", - "default": "undefined", - "privacy": "public", - "_ui5since": "1.0.0-rc.15" - }, - { - "kind": "field", - "name": "tooltip", - "type": { - "text": "string | undefined" - }, - "description": "Defines the tooltip of the option.", - "default": "undefined", - "privacy": "public", - "_ui5since": "2.0.0" - }, - { - "kind": "field", - "name": "selected", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines the selected state of the component.", - "privacy": "public", - "inheritedFrom": { - "name": "ListItemBase", - "module": "dist/ListItemBase.js" - } } ], "attributes": [ { - "description": "Defines the value of the `ui5-select` inside an HTML Form element when this component is selected.\nFor more information on HTML Form support, see the `name` property of `ui5-select`.", - "name": "value", - "default": "undefined", - "fieldName": "value", - "type": { - "text": "string | undefined" - } - }, - { - "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).", - "name": "icon", - "default": "undefined", - "fieldName": "icon", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Defines the `additionalText`, displayed in the end of the option.", - "name": "additional-text", - "default": "undefined", - "fieldName": "additionalText", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Defines the tooltip of the option.", - "name": "tooltip", - "default": "undefined", - "fieldName": "tooltip", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Defines the selected state of the component.", - "name": "selected", - "default": "false", - "fieldName": "selected", + "description": "Defines the component's check mode.", + "name": "check-mode", + "default": "\"None\"", + "fieldName": "checkMode", "type": { - "text": "boolean" + "text": "\"None\" | \"Single\" | \"Multiple\"" } } ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-menu-item-group", + "customElement": true, + "_ui5since": "2.12.0", + "_ui5privacy": "public", + "_ui5implements": [ + { + "name": "IMenuItem", + "package": "@ui5/webcomponents", + "module": "dist/Menu.js" + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "MenuItemGroup", + "module": "dist/MenuItemGroup.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-menu-item-group", + "declaration": { + "name": "MenuItemGroup", + "module": "dist/MenuItemGroup.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/MenuSeparator.js", + "declarations": [ + { + "kind": "class", + "description": "The `ui5-menu-separator` represents a horizontal line to separate menu items inside a `ui5-menu`.", + "name": "MenuSeparator", "superclass": { "name": "ListItemBase", "package": "@ui5/webcomponents", "module": "dist/ListItemBase.js" }, - "tagName": "ui5-option", + "tagName": "ui5-menu-separator", "customElement": true, + "_ui5since": "2.0.0", "_ui5privacy": "public", "_ui5implements": [ { - "name": "IOption", + "name": "IMenuItem", "package": "@ui5/webcomponents", - "module": "dist/Select.js" + "module": "dist/Menu.js" } - ] + ], + "members": [] } ], "exports": [ @@ -16999,139 +15123,165 @@ "kind": "js", "name": "default", "declaration": { - "name": "Option", - "module": "dist/Option.js" + "name": "MenuSeparator", + "module": "dist/MenuSeparator.js" } }, { "kind": "custom-element-definition", - "name": "ui5-option", + "name": "ui5-menu-separator", "declaration": { - "name": "Option", - "module": "dist/Option.js" + "name": "MenuSeparator", + "module": "dist/MenuSeparator.js" } } ] }, { "kind": "javascript-module", - "path": "dist/OptionCustom.js", + "path": "dist/MessageStrip.js", "declarations": [ { "kind": "class", - "description": "### Overview\n\nThe `ui5-option-custom` component defines a custom content of an option in the `ui5-select`.\nA component to be the same way as the standard `ui5-option`.\nThe component accepts arbitrary HTML content to allow full customization.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/OptionCustom.js\";`", - "name": "OptionCustom", + "description": "### Overview\n\nThe ui5-message-strip component allows for the embedding of application-related messages.\nIt supports four semantic designs, each with its own color and icon: \"Information\", \"Positive\", \"Critical\", and \"Negative\".\nAdditionally, users can choose from two color sets (\"ColorSet1\" and \"ColorSet2\"), each containing 10 predefined color schemes.\nEach message shows a \"Close\" button, so that it can be removed from the UI, if needed.\n\n### Usage\n\nFor the `ui5-message-strip` component, you can define whether it displays\nan icon in the beginning and a close button. Moreover, its size and background\ncan be controlled with CSS.\n\n### Keyboard Handling\n\n#### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/MessageStrip.js\";`", + "name": "MessageStrip", "slots": [ { + "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.", "name": "default", - "description": "Defines the content of the component.", - "_ui5propertyName": "content", + "_ui5privacy": "public", "_ui5type": { "text": "Array<Node>" - }, - "_ui5privacy": "public" + } + }, + { + "name": "icon", + "description": "Defines the content to be displayed as graphical element within the component.\n\n**Note:** If no icon is given, the default icon for the component type will be used.\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).", + "_ui5type": { + "text": "Array<IIcon>", + "references": [ + { + "name": "IIcon", + "package": "@ui5/webcomponents", + "module": "dist/Icon.js" + } + ] + }, + "_ui5privacy": "public" } ], "members": [ { "kind": "field", - "name": "displayText", + "name": "colorScheme", "type": { - "text": "string | undefined" + "text": "string" }, - "description": "Defines the text, displayed inside the `ui5-select` input filed\nwhen the option gets selected.", - "default": "undefined", - "privacy": "public" + "default": "\"1\"", + "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.", + "privacy": "public", + "_ui5since": "2.0.0" }, { "kind": "field", - "name": "value", + "name": "design", "type": { - "text": "string | undefined" + "text": "MessageStripDesign", + "references": [ + { + "name": "MessageStripDesign", + "package": "@ui5/webcomponents", + "module": "dist/types/MessageStripDesign.js" + } + ] }, - "description": "Defines the value of the `ui5-select` inside an HTML Form element when this component is selected.\nFor more information on HTML Form support, see the `name` property of `ui5-select`.", - "default": "undefined", - "privacy": "public" + "default": "\"Information\"", + "description": "Defines the component type.", + "privacy": "public", + "_ui5since": "1.0.0-rc.15" }, { "kind": "field", - "name": "tooltip", + "name": "hideCloseButton", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Defines the tooltip of the option.", - "default": "undefined", + "default": "false", + "description": "Defines whether the MessageStrip renders close button.", "privacy": "public" }, { "kind": "field", - "name": "selected", + "name": "hideIcon", "type": { "text": "boolean" }, "default": "false", - "description": "Defines the selected state of the component.", + "description": "Defines whether the MessageStrip will show an icon in the beginning.\nYou can directly provide an icon with the `icon` slot. Otherwise, the default icon for the type will be used.\n\n * **Note:** If <code>MessageStripDesign.ColorSet1</code> or <code>MessageStripDesign.ColorSet2</code> value is set to the <code>design</code> property, default icon will not be presented.", "privacy": "public", - "inheritedFrom": { - "name": "ListItemBase", - "module": "dist/ListItemBase.js" - } + "_ui5since": "1.0.0-rc.15" + } + ], + "events": [ + { + "name": "close", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the close button is pressed either with a\nclick/tap or by using the Enter or Space key.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": false } ], "attributes": [ { - "description": "Defines the text, displayed inside the `ui5-select` input filed\nwhen the option gets selected.", - "name": "display-text", - "default": "undefined", - "fieldName": "displayText", + "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.", + "name": "color-scheme", + "default": "\"1\"", + "fieldName": "colorScheme", "type": { - "text": "string | undefined" + "text": "string" } }, { - "description": "Defines the value of the `ui5-select` inside an HTML Form element when this component is selected.\nFor more information on HTML Form support, see the `name` property of `ui5-select`.", - "name": "value", - "default": "undefined", - "fieldName": "value", + "description": "Defines the component type.", + "name": "design", + "default": "\"Information\"", + "fieldName": "design", "type": { - "text": "string | undefined" + "text": "\"Positive\" | \"Critical\" | \"Negative\" | \"Information\" | \"ColorSet1\" | \"ColorSet2\"" } }, { - "description": "Defines the tooltip of the option.", - "name": "tooltip", - "default": "undefined", - "fieldName": "tooltip", + "description": "Defines whether the MessageStrip renders close button.", + "name": "hide-close-button", + "default": "false", + "fieldName": "hideCloseButton", "type": { - "text": "string | undefined" + "text": "boolean" } }, { - "description": "Defines the selected state of the component.", - "name": "selected", + "description": "Defines whether the MessageStrip will show an icon in the beginning.\nYou can directly provide an icon with the `icon` slot. Otherwise, the default icon for the type will be used.\n\n * **Note:** If <code>MessageStripDesign.ColorSet1</code> or <code>MessageStripDesign.ColorSet2</code> value is set to the <code>design</code> property, default icon will not be presented.", + "name": "hide-icon", "default": "false", - "fieldName": "selected", + "fieldName": "hideIcon", "type": { "text": "boolean" } } ], "superclass": { - "name": "ListItemBase", - "package": "@ui5/webcomponents", - "module": "dist/ListItemBase.js" + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" }, - "tagName": "ui5-option-custom", + "tagName": "ui5-message-strip", "customElement": true, - "_ui5since": "2.0.0", - "_ui5privacy": "public", - "_ui5implements": [ - { - "name": "IOption", - "package": "@ui5/webcomponents", - "module": "dist/Select.js" - } - ] + "_ui5since": "0.9.0", + "_ui5privacy": "public" } ], "exports": [ @@ -17139,250 +15289,221 @@ "kind": "js", "name": "default", "declaration": { - "name": "OptionCustom", - "module": "dist/OptionCustom.js" + "name": "MessageStrip", + "module": "dist/MessageStrip.js" } }, { "kind": "custom-element-definition", - "name": "ui5-option-custom", + "name": "ui5-message-strip", "declaration": { - "name": "OptionCustom", - "module": "dist/OptionCustom.js" + "name": "MessageStrip", + "module": "dist/MessageStrip.js" } } ] }, { "kind": "javascript-module", - "path": "dist/Panel.js", + "path": "dist/MonthPicker.js", "declarations": [ { "kind": "class", - "description": "### Overview\n\nThe `ui5-panel` component is a container which has a header and a\ncontent area and is used\nfor grouping and displaying information. It can be collapsed to save space on the screen.\n\n### Guidelines:\n\n- Nesting two or more panels is not recommended.\n- Do not stack too many panels on one page.\n\n### Structure\nThe panel's header area consists of a title bar with a header text or custom header.\n\nThe header is clickable and can be used to toggle between the expanded and collapsed state. It includes an icon which rotates depending on the state.\n\nThe custom header can be set through the `header` slot and it may contain arbitraray content, such as: title, buttons or any other HTML elements.\n\nThe content area can contain an arbitrary set of controls.\n\n**Note:** The custom header is not clickable out of the box, but in this case the icon is interactive and allows to show/hide the content area.\n\n### Responsive Behavior\n\n- If the width of the panel is set to 100% (default), the panel and its children are\nresized responsively,\ndepending on its parent container.\n- If the panel has a fixed height, it will take up the space even if the panel is\ncollapsed.\n- When the panel is expandable (the `fixed` property is set to `false`),\nan arrow icon (pointing to the right) appears in front of the header.\n- When the animation is activated, expand/collapse uses a smooth animation to open or\nclose the content area.\n- When the panel expands/collapses, the arrow icon rotates 90 degrees\nclockwise/counter-clockwise.\n\n### Keyboard Handling\n\n#### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Panel.js\";`", - "name": "Panel", - "cssParts": [ - { - "description": "Used to style the wrapper of the header.", - "name": "header" - }, - { - "description": "Used to style the wrapper of the content.", - "name": "content" - } - ], - "slots": [ - { - "description": "Defines the content of the component. The content is visible only when the component is expanded.", - "name": "default", - "_ui5privacy": "public", - "_ui5type": { - "text": "Array<Node>" - } - }, + "description": "Month picker component.", + "name": "MonthPicker", + "members": [ { - "name": "header", - "description": "Defines the component header area.\n\n**Note:** When a header is provided, the `headerText` property is ignored.", - "_ui5type": { - "text": "Array<HTMLElement>" + "kind": "field", + "name": "calendarWeekNumbering", + "type": { + "text": "CalendarWeekNumbering", + "references": [ + { + "name": "CalendarWeekNumbering", + "package": "@ui5/webcomponents", + "module": "dist/types/CalendarWeekNumbering.js" + } + ] }, - "_ui5privacy": "public" - } - ], - "members": [ + "default": "\"Default\"", + "description": "Defines how to calculate calendar weeks and first day of the week.\nIf not set, the calendar will be displayed according to the currently set global configuration.", + "privacy": "public", + "_ui5since": "2.2.0" + }, { "kind": "field", - "name": "headerText", + "name": "displayFormat", "type": { "text": "string | undefined" }, - "description": "This property is used to set the header text of the component.\nThe text is visible in both expanded and collapsed states.\n\n**Note:** This property is overridden by the `header` slot.", + "description": "Determines the format, displayed in the input field.", "default": "undefined", - "privacy": "public" + "privacy": "public", + "_ui5since": "2.14.0" }, { "kind": "field", - "name": "fixed", + "name": "formatPattern", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Determines whether the component is in a fixed state that is not\nexpandable/collapsible by user interaction.", + "description": "Determines the format, displayed in the input field.", + "default": "undefined", + "deprecated": "Use displayFormat and valueFormat instead", "privacy": "public" }, { "kind": "field", - "name": "collapsed", + "name": "maxDate", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Indicates whether the component is collapsed and only the header is displayed.", - "privacy": "public" + "default": "\"\"", + "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).", + "privacy": "public", + "_ui5since": "1.0.0-rc.6" }, { "kind": "field", - "name": "noAnimation", + "name": "minDate", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Indicates whether the transition between the expanded and the collapsed state of the component is animated. By default the animation is enabled.", + "default": "\"\"", + "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).", "privacy": "public", - "_ui5since": "1.0.0-rc.16" + "_ui5since": "1.0.0-rc.6" }, { "kind": "field", - "name": "accessibleRole", + "name": "primaryCalendarType", "type": { - "text": "PanelAccessibleRole", + "text": "CalendarType | undefined", "references": [ { - "name": "PanelAccessibleRole", - "package": "@ui5/webcomponents", - "module": "dist/types/PanelAccessibleRole.js" + "name": "CalendarType", + "package": "@ui5/webcomponents-base", + "module": "dist/types/CalendarType.js" } ] }, - "default": "\"Form\"", - "description": "Sets the accessible ARIA role of the component.\nDepending on the usage, you can change the role from the default `Form`\nto `Region` or `Complementary`.", + "description": "Sets a calendar type used for display.\nIf not set, the calendar type of the global configuration is used.", + "default": "undefined", "privacy": "public" }, { "kind": "field", - "name": "headerLevel", + "name": "secondaryCalendarType", "type": { - "text": "TitleLevel", + "text": "CalendarType | undefined", "references": [ { - "name": "TitleLevel", - "package": "@ui5/webcomponents", - "module": "dist/types/TitleLevel.js" + "name": "CalendarType", + "package": "@ui5/webcomponents-base", + "module": "dist/types/CalendarType.js" } ] }, - "default": "\"H2\"", - "description": "Defines the \"aria-level\" of component heading,\nset by the `headerText`.", - "privacy": "public" - }, - { - "kind": "field", - "name": "accessibleName", - "type": { - "text": "string | undefined" - }, - "description": "Defines the accessible ARIA name of the component.", + "description": "Defines the secondary calendar type.\nIf not set, the calendar will only show the primary calendar type.", "default": "undefined", "privacy": "public", - "_ui5since": "1.0.0-rc.15" + "_ui5since": "1.0.0-rc.16" }, { "kind": "field", - "name": "stickyHeader", + "name": "valueFormat", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Indicates whether the Panel header is sticky or not.\nIf stickyHeader is set to true, then whenever you scroll the content or\nthe application, the header of the panel will be always visible and\na solid color will be used for its design.", + "description": "Determines the format, used for the value attribute.", + "default": "undefined", "privacy": "public", - "_ui5since": "1.16.0-rc.1" - } - ], - "events": [ - { - "name": "toggle", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired when the component is expanded/collapsed by user interaction.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true + "_ui5since": "2.14.0" } ], + "superclass": { + "name": "CalendarPart", + "package": "@ui5/webcomponents", + "module": "dist/CalendarPart.js" + }, + "tagName": "ui5-monthpicker", + "customElement": true, + "_ui5privacy": "private", "attributes": [ { - "description": "This property is used to set the header text of the component.\nThe text is visible in both expanded and collapsed states.\n\n**Note:** This property is overridden by the `header` slot.", - "name": "header-text", - "default": "undefined", - "fieldName": "headerText", + "description": "Defines how to calculate calendar weeks and first day of the week.\nIf not set, the calendar will be displayed according to the currently set global configuration.", + "name": "calendar-week-numbering", + "default": "\"Default\"", + "fieldName": "calendarWeekNumbering", "type": { - "text": "string | undefined" + "text": "\"Default\" | \"ISO_8601\" | \"MiddleEastern\" | \"WesternTraditional\"" } }, { - "description": "Determines whether the component is in a fixed state that is not\nexpandable/collapsible by user interaction.", - "name": "fixed", - "default": "false", - "fieldName": "fixed", + "description": "Determines the format, displayed in the input field.", + "name": "display-format", + "default": "undefined", + "fieldName": "displayFormat", "type": { - "text": "boolean" + "text": "string | undefined" } }, { - "description": "Indicates whether the component is collapsed and only the header is displayed.", - "name": "collapsed", - "default": "false", - "fieldName": "collapsed", + "description": "Determines the format, displayed in the input field.", + "name": "format-pattern", + "default": "undefined", + "fieldName": "formatPattern", "type": { - "text": "boolean" - } + "text": "string | undefined" + }, + "deprecated": "Use displayFormat and valueFormat instead" }, { - "description": "Indicates whether the transition between the expanded and the collapsed state of the component is animated. By default the animation is enabled.", - "name": "no-animation", - "default": "false", - "fieldName": "noAnimation", + "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).", + "name": "max-date", + "default": "\"\"", + "fieldName": "maxDate", "type": { - "text": "boolean" + "text": "string" } }, { - "description": "Sets the accessible ARIA role of the component.\nDepending on the usage, you can change the role from the default `Form`\nto `Region` or `Complementary`.", - "name": "accessible-role", - "default": "\"Form\"", - "fieldName": "accessibleRole", + "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).", + "name": "min-date", + "default": "\"\"", + "fieldName": "minDate", "type": { - "text": "\"Complementary\" | \"Form\" | \"Region\"" + "text": "string" } }, { - "description": "Defines the \"aria-level\" of component heading,\nset by the `headerText`.", - "name": "header-level", - "default": "\"H2\"", - "fieldName": "headerLevel", + "description": "Sets a calendar type used for display.\nIf not set, the calendar type of the global configuration is used.", + "name": "primary-calendar-type", + "default": "undefined", + "fieldName": "primaryCalendarType", "type": { - "text": "\"H1\" | \"H2\" | \"H3\" | \"H4\" | \"H5\" | \"H6\"" + "text": "\"Gregorian\" | \"Islamic\" | \"Japanese\" | \"Buddhist\" | \"Persian\" | undefined" } }, { - "description": "Defines the accessible ARIA name of the component.", - "name": "accessible-name", + "description": "Defines the secondary calendar type.\nIf not set, the calendar will only show the primary calendar type.", + "name": "secondary-calendar-type", "default": "undefined", - "fieldName": "accessibleName", + "fieldName": "secondaryCalendarType", "type": { - "text": "string | undefined" + "text": "\"Gregorian\" | \"Islamic\" | \"Japanese\" | \"Buddhist\" | \"Persian\" | undefined" } }, { - "description": "Indicates whether the Panel header is sticky or not.\nIf stickyHeader is set to true, then whenever you scroll the content or\nthe application, the header of the panel will be always visible and\na solid color will be used for its design.", - "name": "sticky-header", - "default": "false", - "fieldName": "stickyHeader", + "description": "Determines the format, used for the value attribute.", + "name": "value-format", + "default": "undefined", + "fieldName": "valueFormat", "type": { - "text": "boolean" + "text": "string | undefined" } } - ], - "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" - }, - "tagName": "ui5-panel", - "customElement": true, - "_ui5privacy": "public" + ] } ], "exports": [ @@ -17390,634 +15511,555 @@ "kind": "js", "name": "default", "declaration": { - "name": "Panel", - "module": "dist/Panel.js" + "name": "MonthPicker", + "module": "dist/MonthPicker.js" } }, { "kind": "custom-element-definition", - "name": "ui5-panel", + "name": "ui5-monthpicker", "declaration": { - "name": "Panel", - "module": "dist/Panel.js" + "name": "MonthPicker", + "module": "dist/MonthPicker.js" } } ] }, { "kind": "javascript-module", - "path": "dist/Popover.js", + "path": "dist/MultiComboBox.js", "declarations": [ + { + "kind": "interface", + "name": "IMultiComboBoxItem", + "description": "Interface for components that may be slotted inside a `ui5-multi-combobox` as items", + "_ui5privacy": "public" + }, { "kind": "class", - "description": "### Overview\n\nThe `ui5-popover` component displays additional information for an object\nin a compact way and without leaving the page.\nThe Popover can contain various UI elements, such as fields, tables, images, and charts.\nIt can also include actions in the footer.\n\n### Structure\n\nThe popover has three main areas:\n\n- Header (optional)\n- Content\n- Footer (optional)\n\n**Note:** The `ui5-popover` is closed when the user clicks\nor taps outside the popover\nor selects an action within the popover. You can prevent this with the\n`modal` property.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Popover.js\";`", - "name": "Popover", + "description": "### Overview\n\nThe `ui5-multi-combobox` component consists of a list box with items and a text field allowing the user to either type a value directly into the text field, or choose from the list of existing items.\n\nThe drop-down list is used for selecting and filtering values, it enables users to select one or more options from a predefined list. The control provides an editable input field to filter the list, and a dropdown arrow to expand/collapse the list of available options.\nThe options in the list have checkboxes that permit multi-selection. Entered values are displayed as tokens.\n### Structure\nThe `ui5-multi-combobox` consists of the following elements:\n\n- Tokenizer - a list of tokens with selected options.\n- Input field - displays the selected option/s as token/s. Users can type to filter the list.\n- Drop-down arrow - expands\\collapses the option list.\n- Option list - the list of available options.\n\n### Keyboard Handling\n\nThe `ui5-multi-combobox` provides advanced keyboard handling.\n\n#### Picker\nIf the `ui5-multi-combobox` 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` and `DOWN` arrow keys\nto navigate through the available options and select one by pressing the `Space` or `Enter` keys.\n[Ctrl]+[Alt]+[F8] or [Command]+[Option]+[F8] - Focuses the first link in the value state message, if available. Pressing [Tab] moves the focus to the next link in the value state message, or closes the value state message if there are no more links.\n\n#### Tokens\n\n- Left/Right arrow keys - moves the focus selection form the currently focused token to the previous/next one (if available).\n- Delete - deletes the token and focuses the previous token.\n- Backspace - deletes the token and focus the next token.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/MultiComboBox.js\";`", + "name": "MultiComboBox", "cssParts": [ { - "description": "Used to style the header of the component", - "name": "header" - }, - { - "description": "Used to style the content of the component", - "name": "content" - }, - { - "description": "Used to style the footer of the component", - "name": "footer" + "description": "Used to style each token(where `token-0` corresponds to the first item)", + "name": "token-\\{index\\}" } ], "slots": [ { - "name": "header", - "description": "Defines the header HTML Element.", + "name": "default", + "description": "Defines the component items.", + "_ui5propertyName": "items", "_ui5type": { - "text": "Array<HTMLElement>" + "text": "Array<IMultiComboBoxItem>", + "references": [ + { + "name": "IMultiComboBoxItem", + "package": "@ui5/webcomponents", + "module": "dist/MultiComboBox.js" + } + ] }, "_ui5privacy": "public" }, { - "name": "footer", - "description": "Defines the footer HTML Element.", + "name": "icon", + "description": "Defines the icon to be displayed in the component.", + "_ui5since": "1.0.0-rc.9", "_ui5type": { - "text": "Array<HTMLElement>" + "text": "Array<IIcon>", + "references": [ + { + "name": "IIcon", + "package": "@ui5/webcomponents", + "module": "dist/Icon.js" + } + ] }, "_ui5privacy": "public" }, { - "name": "default", - "description": "Defines the content of the Popup.", - "_ui5propertyName": "content", + "name": "valueStateMessage", + "description": "Defines the value state message that will be displayed as pop up under the component.\nThe value state message slot should contain only one root element.\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 component is in `Information`, `Critical` or `Negative` value state.", + "_ui5since": "1.0.0-rc.9", "_ui5type": { "text": "Array<HTMLElement>" }, - "_ui5privacy": "public", - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } + "_ui5privacy": "public" } ], "members": [ { "kind": "field", - "name": "headerText", + "name": "accessibleName", "type": { "text": "string | undefined" }, - "description": "Defines the header text.\n\n**Note:** If `header` slot is provided, the `headerText` is ignored.", + "description": "Defines the accessible ARIA name of the component.", "default": "undefined", - "privacy": "public" + "privacy": "public", + "_ui5since": "1.4.0" }, { "kind": "field", - "name": "placement", + "name": "accessibleNameRef", "type": { - "text": "PopoverPlacement", - "references": [ - { - "name": "PopoverPlacement", - "package": "@ui5/webcomponents", - "module": "dist/types/PopoverPlacement.js" - } - ] + "text": "string | undefined" }, - "default": "\"End\"", - "description": "Determines on which side the component is placed at.", - "privacy": "public" + "description": "Receives id(or many ids) of the elements that label the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.4.0" }, { "kind": "field", - "name": "horizontalAlign", + "name": "disabled", "type": { - "text": "PopoverHorizontalAlign", - "references": [ - { - "name": "PopoverHorizontalAlign", - "package": "@ui5/webcomponents", - "module": "dist/types/PopoverHorizontalAlign.js" - } - ] + "text": "boolean" }, - "default": "\"Center\"", - "description": "Determines the horizontal alignment of the component.", + "default": "false", + "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is completely noninteractive.", "privacy": "public" }, { "kind": "field", - "name": "verticalAlign", + "name": "filter", "type": { - "text": "PopoverVerticalAlign", + "text": "ComboBoxFilter", "references": [ { - "name": "PopoverVerticalAlign", + "name": "ComboBoxFilter", "package": "@ui5/webcomponents", - "module": "dist/types/PopoverVerticalAlign.js" + "module": "dist/types/ComboBoxFilter.js" } ] }, - "default": "\"Center\"", - "description": "Determines the vertical alignment of the component.", + "default": "\"StartsWithPerTerm\"", + "description": "Defines the filter type of the component.", "privacy": "public" }, { "kind": "field", - "name": "modal", + "name": "loading", "type": { "text": "boolean" }, "default": "false", - "description": "Defines whether the component should close when\nclicking/tapping outside the popover.\nIf enabled, it blocks any interaction with the background.", + "description": "Indicates whether a loading indicator should be shown in the picker.", "privacy": "public" }, { "kind": "field", - "name": "hideArrow", + "name": "name", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Determines whether the component arrow is hidden.", + "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.\n**Note:** When the component is used inside a form element,\nthe value is sent as the first element in the form data, even if it's empty.", + "default": "undefined", "privacy": "public", - "_ui5since": "1.0.0-rc.15" + "_ui5since": "2.0.0" }, { "kind": "field", - "name": "allowTargetOverlap", + "name": "noTypeahead", "type": { "text": "boolean" }, "default": "false", - "description": "Determines if there is no enough space, the component can be placed\nover the target.", - "privacy": "public" + "description": "Defines whether the value will be autcompleted to match an item", + "privacy": "public", + "_ui5since": "1.4.0" }, { "kind": "field", - "name": "resizable", + "name": "noValidation", "type": { "text": "boolean" }, "default": "false", - "description": "Determines whether the component is resizable.\n**Note:** This property is effective only on desktop devices.", - "privacy": "public", - "_ui5since": "2.19.0" + "description": "Defines if the user input will be prevented, if no matching item has been found", + "privacy": "public" }, { "kind": "field", - "name": "opener", - "description": "Defines the ID or DOM Reference of the element at which the popover is shown.\nWhen using this attribute in a declarative way, you must only use the `id` (as a string) of the element at which you want to show the popover.\nYou can only set the `opener` attribute to a DOM Reference when using JavaScript.", - "privacy": "public", - "default": "undefined", + "name": "open", "type": { - "text": "HTMLElement | string | null | undefined" + "text": "boolean" }, - "_ui5since": "1.2.0" + "default": "false", + "description": "Indicates whether the items picker is open.", + "privacy": "public", + "_ui5since": "2.9.0" }, { "kind": "field", - "name": "initialFocus", + "name": "placeholder", "type": { "text": "string | undefined" }, - "description": "Defines the ID of the HTML Element, which will get the initial focus.\n\n**Note:** If an element with `autofocus` attribute is added inside the component,\n`initialFocus` won't take effect.", + "description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.", "default": "undefined", - "privacy": "public", - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } + "privacy": "public" }, { "kind": "field", - "name": "preventFocusRestore", + "name": "readonly", "type": { "text": "boolean" }, "default": "false", - "description": "Defines if the focus should be returned to the previously focused element,\nwhen the popup closes.", - "privacy": "public", - "_ui5since": "1.0.0-rc.8", - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } + "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.", + "privacy": "public" }, { "kind": "field", - "name": "accessibleName", + "name": "required", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Defines the accessible name of the component.", - "default": "undefined", + "default": "false", + "description": "Defines whether the component is required.", "privacy": "public", - "_ui5since": "1.0.0-rc.15", - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } + "_ui5since": "1.0.0-rc.5" }, { "kind": "field", - "name": "accessibleNameRef", + "name": "selectedValues", "type": { - "text": "string | undefined" + "text": "Array<string>" }, - "description": "Defines the IDs of the elements that label the component.", - "default": "undefined", + "default": "[]", + "description": "Defines the values of the selected items.\n\nUse this property to programmatically select items by their `value` property.\nEach string in the array should match the `value` attribute of a `ui5-mcb-item`.\n\n**Note:** If an item doesn't have a `value` attribute set, it cannot be selected via this property.\n\n**Note:** The recommended approach is to set the `value` property on each `ui5-mcb-item`\nand use `selectedValues` for programmatic selection. The `selected` property on items is\ndeprecated and should not be used together with `selectedValues`.", "privacy": "public", - "_ui5since": "1.1.0", - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } + "_ui5since": "2.20.0" }, { "kind": "field", - "name": "accessibleRole", + "name": "showClearIcon", "type": { - "text": "PopupAccessibleRole", - "references": [ - { - "name": "PopupAccessibleRole", - "package": "@ui5/webcomponents", - "module": "dist/types/PopupAccessibleRole.js" - } - ] + "text": "boolean" }, - "default": "\"Dialog\"", - "description": "Allows setting a custom role.", + "default": "false", + "description": "Defines whether the clear icon of the multi-combobox will be shown.", "privacy": "public", - "_ui5since": "1.10.0", - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } + "_ui5since": "1.20.1" }, { "kind": "field", - "name": "accessibleDescription", + "name": "showSelectAll", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Defines the accessible description of the component.", - "default": "undefined", - "privacy": "public", - "_ui5since": "2.11.0", - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } + "default": "false", + "description": "Determines if the select all checkbox is visible on top of suggestions.", + "privacy": "public" }, { "kind": "field", - "name": "accessibleDescriptionRef", + "name": "value", "type": { - "text": "string | undefined" + "text": "string" }, - "description": "Receives id(or many ids) of the elements that describe the component.", - "default": "undefined", + "default": "\"\"", + "description": "Defines the value of the component.\n\n**Note:** The property is updated upon typing.", "privacy": "public", - "_ui5since": "2.11.0", - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } + "_ui5formProperty": true, + "_ui5formEvents": "change,input" }, { "kind": "field", - "name": "preventInitialFocus", + "name": "valueState", "type": { - "text": "boolean" + "text": "ValueState", + "references": [ + { + "name": "ValueState", + "package": "@ui5/webcomponents-base", + "module": "dist/types/ValueState.js" + } + ] }, - "default": "false", - "description": "Indicates whether initial focus should be prevented.", - "privacy": "public", - "_ui5since": "2.0.0", - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } - }, + "default": "\"None\"", + "description": "Defines the value state of the component.", + "privacy": "public" + } + ], + "events": [ { - "kind": "field", - "name": "open", - "description": "Indicates if the element is open", - "privacy": "public", - "default": "false", + "name": "change", + "_ui5privacy": "public", "type": { - "text": "boolean" + "text": "CustomEvent" }, - "_ui5since": "1.2.0", - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } + "description": "Fired when the input operation has finished by pressing Enter or on focusout.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true }, { - "kind": "method", - "name": "applyFocus", - "return": { - "type": { - "text": "Promise<void>" - }, - "description": "Promise that resolves when the focus is applied" + "name": "close", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" }, - "description": "Focuses the element denoted by `initialFocus`, if provided,\nor the first focusable element otherwise.", - "privacy": "public", - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } - } - ], - "attributes": [ + "description": "Fired when the dropdown is closed.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": false, + "_ui5since": "2.0.0" + }, { - "description": "Defines the header text.\n\n**Note:** If `header` slot is provided, the `headerText` is ignored.", - "name": "header-text", - "default": "undefined", - "fieldName": "headerText", + "name": "input", + "_ui5privacy": "public", "type": { - "text": "string | undefined" - } + "text": "CustomEvent" + }, + "description": "Fired when the value of the component changes at each keystroke or clear icon is pressed.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true }, { - "description": "Determines on which side the component is placed at.", - "name": "placement", - "default": "\"End\"", - "fieldName": "placement", + "name": "open", + "_ui5privacy": "public", "type": { - "text": "\"Top\" | \"Bottom\" | \"Start\" | \"End\"" - } + "text": "CustomEvent" + }, + "description": "Fired when the dropdown is opened.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": false, + "_ui5since": "2.0.0" }, { - "description": "Determines the horizontal alignment of the component.", - "name": "horizontal-align", - "default": "\"Center\"", - "fieldName": "horizontalAlign", + "name": "selection-change", + "_ui5privacy": "public", "type": { - "text": "\"Start\" | \"End\" | \"Center\" | \"Stretch\"" - } + "text": "CustomEvent<MultiComboBoxSelectionChangeEventDetail>", + "references": [ + { + "name": "MultiComboBoxSelectionChangeEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/MultiComboBox.js" + } + ] + }, + "description": "Fired when selection is changed by user interaction.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true, + "_ui5parameters": [ + { + "type": { + "text": "Array<IMultiComboBoxItem>", + "references": [ + { + "name": "IMultiComboBoxItem", + "package": "@ui5/webcomponents", + "module": "dist/MultiComboBox.js" + } + ] + }, + "name": "items", + "_ui5privacy": "public", + "description": "an array of the selected items." + } + ] }, { - "description": "Determines the vertical alignment of the component.", - "name": "vertical-align", - "default": "\"Center\"", - "fieldName": "verticalAlign", + "name": "value-state-change", + "_ui5privacy": "public", "type": { - "text": "\"Top\" | \"Bottom\" | \"Center\" | \"Stretch\"" + "text": "CustomEvent<MultiComboBoxValueStateChangeEventDetail>", + "references": [ + { + "name": "MultiComboBoxValueStateChangeEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/MultiComboBox.js" + } + ] + }, + "description": "Fired before the value state of the component is updated internally.\nThe event is preventable, meaning that if it's default action is\nprevented, the component will not update the value state.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true, + "_ui5since": "2.19.0", + "_ui5parameters": [ + { + "type": { + "text": "string" + }, + "name": "valueState", + "_ui5privacy": "public", + "description": "The new `valueState` that will be set." + } + ] + } + ], + "attributes": [ + { + "description": "Defines the accessible ARIA name of the component.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", + "type": { + "text": "string | undefined" } }, { - "description": "Defines whether the component should close when\nclicking/tapping outside the popover.\nIf enabled, it blocks any interaction with the background.", - "name": "modal", - "default": "false", - "fieldName": "modal", + "description": "Receives id(or many ids) of the elements that label the component.", + "name": "accessible-name-ref", + "default": "undefined", + "fieldName": "accessibleNameRef", "type": { - "text": "boolean" + "text": "string | undefined" } }, { - "description": "Determines whether the component arrow is hidden.", - "name": "hide-arrow", + "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is completely noninteractive.", + "name": "disabled", "default": "false", - "fieldName": "hideArrow", + "fieldName": "disabled", "type": { "text": "boolean" } }, { - "description": "Determines if there is no enough space, the component can be placed\nover the target.", - "name": "allow-target-overlap", - "default": "false", - "fieldName": "allowTargetOverlap", + "description": "Defines the filter type of the component.", + "name": "filter", + "default": "\"StartsWithPerTerm\"", + "fieldName": "filter", "type": { - "text": "boolean" + "text": "\"None\" | \"StartsWithPerTerm\" | \"StartsWith\" | \"Contains\"" } }, { - "description": "Determines whether the component is resizable.\n**Note:** This property is effective only on desktop devices.", - "name": "resizable", + "description": "Indicates whether a loading indicator should be shown in the picker.", + "name": "loading", "default": "false", - "fieldName": "resizable", + "fieldName": "loading", "type": { "text": "boolean" } }, { - "description": "Defines the ID or DOM Reference of the element at which the popover is shown.\nWhen using this attribute in a declarative way, you must only use the `id` (as a string) of the element at which you want to show the popover.\nYou can only set the `opener` attribute to a DOM Reference when using JavaScript.", - "name": "opener", + "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.\n**Note:** When the component is used inside a form element,\nthe value is sent as the first element in the form data, even if it's empty.", + "name": "name", "default": "undefined", - "fieldName": "opener", + "fieldName": "name", "type": { - "text": "any" + "text": "string | undefined" } }, { - "description": "Defines the ID of the HTML Element, which will get the initial focus.\n\n**Note:** If an element with `autofocus` attribute is added inside the component,\n`initialFocus` won't take effect.", - "name": "initial-focus", - "default": "undefined", - "fieldName": "initialFocus", + "description": "Defines whether the value will be autcompleted to match an item", + "name": "no-typeahead", + "default": "false", + "fieldName": "noTypeahead", "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" + "text": "boolean" } }, { - "description": "Defines if the focus should be returned to the previously focused element,\nwhen the popup closes.", - "name": "prevent-focus-restore", + "description": "Defines if the user input will be prevented, if no matching item has been found", + "name": "no-validation", "default": "false", - "fieldName": "preventFocusRestore", + "fieldName": "noValidation", "type": { "text": "boolean" - }, - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" } }, { - "description": "Defines the accessible name of the component.", - "name": "accessible-name", - "default": "undefined", - "fieldName": "accessibleName", + "description": "Indicates whether the items picker is open.", + "name": "open", + "default": "false", + "fieldName": "open", "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" + "text": "boolean" } }, { - "description": "Defines the IDs of the elements that label the component.", - "name": "accessible-name-ref", + "description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.", + "name": "placeholder", "default": "undefined", - "fieldName": "accessibleNameRef", + "fieldName": "placeholder", "type": { "text": "string | undefined" - }, - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" } }, { - "description": "Allows setting a custom role.", - "name": "accessible-role", - "default": "\"Dialog\"", - "fieldName": "accessibleRole", + "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.", + "name": "readonly", + "default": "false", + "fieldName": "readonly", "type": { - "text": "\"None\" | \"Dialog\" | \"AlertDialog\"" - }, - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" + "text": "boolean" } }, { - "description": "Defines the accessible description of the component.", - "name": "accessible-description", - "default": "undefined", - "fieldName": "accessibleDescription", + "description": "Defines whether the component is required.", + "name": "required", + "default": "false", + "fieldName": "required", "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" + "text": "boolean" } }, { - "description": "Receives id(or many ids) of the elements that describe the component.", - "name": "accessible-description-ref", - "default": "undefined", - "fieldName": "accessibleDescriptionRef", + "description": "Defines the values of the selected items.\n\nUse this property to programmatically select items by their `value` property.\nEach string in the array should match the `value` attribute of a `ui5-mcb-item`.\n\n**Note:** If an item doesn't have a `value` attribute set, it cannot be selected via this property.\n\n**Note:** The recommended approach is to set the `value` property on each `ui5-mcb-item`\nand use `selectedValues` for programmatic selection. The `selected` property on items is\ndeprecated and should not be used together with `selectedValues`.", + "name": "selected-values", + "default": "[]", + "fieldName": "selectedValues", "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" + "text": "string[]" } }, { - "description": "Indicates whether initial focus should be prevented.", - "name": "prevent-initial-focus", + "description": "Defines whether the clear icon of the multi-combobox will be shown.", + "name": "show-clear-icon", "default": "false", - "fieldName": "preventInitialFocus", + "fieldName": "showClearIcon", "type": { "text": "boolean" - }, - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" } }, { - "description": "Indicates if the element is open", - "name": "open", + "description": "Determines if the select all checkbox is visible on top of suggestions.", + "name": "show-select-all", "default": "false", - "fieldName": "open", - "type": { - "text": "any" - }, - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } - } - ], - "superclass": { - "name": "Popup", - "package": "@ui5/webcomponents", - "module": "dist/Popup.js" - }, - "tagName": "ui5-popover", - "customElement": true, - "_ui5since": "1.0.0-rc.6", - "_ui5privacy": "public", - "events": [ - { - "name": "before-open", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": false, - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } - }, - { - "name": "open", - "_ui5privacy": "public", + "fieldName": "showSelectAll", "type": { - "text": "CustomEvent" - }, - "description": "Fired after the component is opened.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": false, - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" + "text": "boolean" } }, { - "name": "before-close", - "_ui5privacy": "public", + "description": "Defines the value of the component.\n\n**Note:** The property is updated upon typing.", + "name": "value", + "default": "\"\"", + "fieldName": "value", "type": { - "text": "CustomEvent<PopupBeforeCloseEventDetail>", - "references": [ - { - "name": "PopupBeforeCloseEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/Popup.js" - } - ] - }, - "description": "Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": false, - "_ui5parameters": [ - { - "type": { - "text": "boolean" - }, - "name": "escPressed", - "_ui5privacy": "public", - "description": "Indicates that `ESC` key has triggered the event." - } - ], - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" + "text": "string" } }, { - "name": "close", - "_ui5privacy": "public", + "description": "Defines the value state of the component.", + "name": "value-state", + "default": "\"None\"", + "fieldName": "valueState", "type": { - "text": "CustomEvent" - }, - "description": "Fired after the component is closed.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": false, - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" } } - ] + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-multi-combobox", + "customElement": true, + "_ui5since": "0.11.0", + "_ui5privacy": "public" } ], "exports": [ @@ -18025,326 +16067,127 @@ "kind": "js", "name": "default", "declaration": { - "name": "Popover", - "module": "dist/Popover.js" + "name": "MultiComboBox", + "module": "dist/MultiComboBox.js" } }, { "kind": "custom-element-definition", - "name": "ui5-popover", - "declaration": { - "name": "Popover", - "module": "dist/Popover.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/PopoverResize.js", - "declarations": [], - "exports": [ - { - "kind": "js", - "name": "default", + "name": "ui5-multi-combobox", "declaration": { - "name": "PopoverResize", - "module": "dist/PopoverResize.js" + "name": "MultiComboBox", + "module": "dist/MultiComboBox.js" } } ] }, { "kind": "javascript-module", - "path": "dist/Popup.js", + "path": "dist/MultiComboBoxItem.js", "declarations": [ { "kind": "class", - "description": "### Overview\nBase class for all popup Web Components.\n\nIf you need to create your own popup-like custom UI5 Web Components.\n\n1. The Popup class handles modality:\n - The \"isModal\" getter can be overridden by derivatives to provide their own conditions when they are modal or not\n - Derivatives may call the \"blockPageScrolling\" and \"unblockPageScrolling\" static methods to temporarily remove scrollbars on the html element\n - Derivatives may call the \"openPopup\" and \"closePopup\" methods which handle focus, manage the popup registry and for modal popups, manage the blocking layer\n\n 2. Provides blocking layer (relevant for modal popups only):\n - Controlled by the \"open\" and \"close\" methods\n\n3. The Popup class \"traps\" focus:\n - Derivatives may call the \"applyInitialFocus\" method (usually when opening, to transfer focus inside the popup)\n\n4. The template of this component exposes two inline partials you can override in derivatives:\n - beforeContent (upper part of the box, useful for header/title/close button)\n - afterContent (lower part, useful for footer/action buttons)", - "name": "Popup", - "slots": [ - { - "name": "default", - "description": "Defines the content of the Popup.", - "_ui5propertyName": "content", - "_ui5type": { - "text": "Array<HTMLElement>" - }, - "_ui5privacy": "public" - } - ], + "description": "The `ui5-mcb-item` represents the item for a `ui5-multi-combobox`.", + "name": "MultiComboBoxItem", "members": [ { "kind": "field", - "name": "initialFocus", + "name": "additionalText", "type": { "text": "string | undefined" }, - "description": "Defines the ID of the HTML Element, which will get the initial focus.\n\n**Note:** If an element with `autofocus` attribute is added inside the component,\n`initialFocus` won't take effect.", + "description": "Defines the additional text of the component.", "default": "undefined", - "privacy": "public" + "privacy": "public", + "_ui5since": "1.0.0-rc.11" }, { "kind": "field", - "name": "preventFocusRestore", + "name": "selected", "type": { "text": "boolean" }, "default": "false", - "description": "Defines if the focus should be returned to the previously focused element,\nwhen the popup closes.", - "privacy": "public", - "_ui5since": "1.0.0-rc.8" - }, - { - "kind": "field", - "name": "accessibleName", - "type": { - "text": "string | undefined" - }, - "description": "Defines the accessible name of the component.", - "default": "undefined", - "privacy": "public", - "_ui5since": "1.0.0-rc.15" - }, - { - "kind": "field", - "name": "accessibleNameRef", - "type": { - "text": "string | undefined" - }, - "description": "Defines the IDs of the elements that label the component.", - "default": "undefined", - "privacy": "public", - "_ui5since": "1.1.0" - }, - { - "kind": "field", - "name": "accessibleRole", - "type": { - "text": "PopupAccessibleRole", - "references": [ - { - "name": "PopupAccessibleRole", - "package": "@ui5/webcomponents", - "module": "dist/types/PopupAccessibleRole.js" - } - ] - }, - "default": "\"Dialog\"", - "description": "Allows setting a custom role.", + "description": "Defines the selected state of the component.", "privacy": "public", - "_ui5since": "1.10.0" + "deprecated": "Set the `value` property on items and use the `selectedValues` property on the parent `ui5-multi-combobox` instead for programmatic selection." }, { "kind": "field", - "name": "accessibleDescription", + "name": "text", "type": { "text": "string | undefined" }, - "description": "Defines the accessible description of the component.", + "description": "Defines the text of the component.", "default": "undefined", - "privacy": "public", - "_ui5since": "2.11.0" + "privacy": "public" }, { "kind": "field", - "name": "accessibleDescriptionRef", + "name": "value", "type": { "text": "string | undefined" }, - "description": "Receives id(or many ids) of the elements that describe the component.", + "description": "Defines the value of the component.\n\nUse this property to associate a unique identifier with the item,\nseparate from the display text. This enables selecting items\nprogrammatically via `selectedValues` on the parent MultiComboBox.", "default": "undefined", "privacy": "public", - "_ui5since": "2.11.0" - }, - { - "kind": "field", - "name": "preventInitialFocus", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Indicates whether initial focus should be prevented.", - "privacy": "public", - "_ui5since": "2.0.0" - }, - { - "kind": "field", - "name": "open", - "description": "Indicates if the element is open", - "privacy": "public", - "default": "false", - "type": { - "text": "boolean" - }, - "_ui5since": "1.2.0" - }, - { - "kind": "method", - "name": "applyFocus", - "return": { - "type": { - "text": "Promise<void>" - }, - "description": "Promise that resolves when the focus is applied" - }, - "description": "Focuses the element denoted by `initialFocus`, if provided,\nor the first focusable element otherwise.", - "privacy": "public" - } - ], - "events": [ - { - "name": "before-open", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": false - }, - { - "name": "open", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired after the component is opened.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": false - }, - { - "name": "before-close", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent<PopupBeforeCloseEventDetail>", - "references": [ - { - "name": "PopupBeforeCloseEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/Popup.js" - } - ] - }, - "description": "Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": false, - "_ui5parameters": [ - { - "type": { - "text": "boolean" - }, - "name": "escPressed", - "_ui5privacy": "public", - "description": "Indicates that `ESC` key has triggered the event." - } - ] - }, - { - "name": "close", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired after the component is closed.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": false + "_ui5since": "2.20.0" } ], "attributes": [ { - "description": "Defines the ID of the HTML Element, which will get the initial focus.\n\n**Note:** If an element with `autofocus` attribute is added inside the component,\n`initialFocus` won't take effect.", - "name": "initial-focus", + "description": "Defines the additional text of the component.", + "name": "additional-text", "default": "undefined", - "fieldName": "initialFocus", + "fieldName": "additionalText", "type": { "text": "string | undefined" } }, { - "description": "Defines if the focus should be returned to the previously focused element,\nwhen the popup closes.", - "name": "prevent-focus-restore", + "description": "Defines the selected state of the component.", + "name": "selected", "default": "false", - "fieldName": "preventFocusRestore", + "fieldName": "selected", "type": { "text": "boolean" - } - }, - { - "description": "Defines the accessible name of the component.", - "name": "accessible-name", - "default": "undefined", - "fieldName": "accessibleName", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Defines the IDs of the elements that label the component.", - "name": "accessible-name-ref", - "default": "undefined", - "fieldName": "accessibleNameRef", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Allows setting a custom role.", - "name": "accessible-role", - "default": "\"Dialog\"", - "fieldName": "accessibleRole", - "type": { - "text": "\"None\" | \"Dialog\" | \"AlertDialog\"" - } + }, + "deprecated": "Set the `value` property on items and use the `selectedValues` property on the parent `ui5-multi-combobox` instead for programmatic selection." }, { - "description": "Defines the accessible description of the component.", - "name": "accessible-description", + "description": "Defines the text of the component.", + "name": "text", "default": "undefined", - "fieldName": "accessibleDescription", + "fieldName": "text", "type": { "text": "string | undefined" } }, { - "description": "Receives id(or many ids) of the elements that describe the component.", - "name": "accessible-description-ref", + "description": "Defines the value of the component.\n\nUse this property to associate a unique identifier with the item,\nseparate from the display text. This enables selecting items\nprogrammatically via `selectedValues` on the parent MultiComboBox.", + "name": "value", "default": "undefined", - "fieldName": "accessibleDescriptionRef", + "fieldName": "value", "type": { "text": "string | undefined" } - }, - { - "description": "Indicates whether initial focus should be prevented.", - "name": "prevent-initial-focus", - "default": "false", - "fieldName": "preventInitialFocus", - "type": { - "text": "boolean" - } - }, - { - "description": "Indicates if the element is open", - "name": "open", - "default": "false", - "fieldName": "open", - "type": { - "text": "any" - } } ], "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" + "name": "ComboBoxItem", + "package": "@ui5/webcomponents", + "module": "dist/ComboBoxItem.js" }, + "tagName": "ui5-mcb-item", "customElement": true, - "_ui5privacy": "public" + "_ui5privacy": "public", + "_ui5implements": [ + { + "name": "IMultiComboBoxItem", + "package": "@ui5/webcomponents", + "module": "dist/MultiComboBox.js" + } + ] } ], "exports": [ @@ -18352,146 +16195,232 @@ "kind": "js", "name": "default", "declaration": { - "name": "Popup", - "module": "dist/Popup.js" + "name": "MultiComboBoxItem", + "module": "dist/MultiComboBoxItem.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-mcb-item", + "declaration": { + "name": "MultiComboBoxItem", + "module": "dist/MultiComboBoxItem.js" } } ] }, { "kind": "javascript-module", - "path": "dist/ProgressIndicator.js", + "path": "dist/MultiComboBoxItemGroup.js", "declarations": [ { "kind": "class", - "description": "### Overview\nShows the progress of a process in a graphical way. To indicate the progress,\nthe inside of the component is filled with a color.\n\n### Responsive Behavior\nYou can change the size of the Progress Indicator by changing its `width` or `height` CSS properties.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/ProgressIndicator.js\";`", - "name": "ProgressIndicator", - "cssParts": [ + "description": "The `ui5-mcb-item-group` is type of suggestion item,\nthat can be used to split the `ui5-multi-combobox` suggestions into groups.", + "name": "MultiComboBoxItemGroup", + "slots": [ { - "description": "Used to style the main bar of the `ui5-progress-indicator`", - "name": "bar" + "name": "default", + "description": "Defines the items of the <code>ui5-mcb-item-group</code>.", + "_ui5propertyName": "items", + "_ui5type": { + "text": "Array<MultiComboBoxItem>", + "references": [ + { + "name": "MultiComboBoxItem", + "package": "@ui5/webcomponents", + "module": "dist/MultiComboBoxItem.js" + } + ] + }, + "_ui5privacy": "public" }, { - "description": "Used to style the remaining bar of the `ui5-progress-indicator`", - "name": "remaining-bar" + "name": "header", + "description": "Defines the header of the component.\n\n**Note:** Using this slot, the default header text of group and the value of `headerText` property will be overwritten.", + "_ui5type": { + "text": "Array<ListItemBase>", + "references": [ + { + "name": "ListItemBase", + "package": "@ui5/webcomponents", + "module": "dist/ListItemBase.js" + } + ] + }, + "_ui5privacy": "public" } ], "members": [ { "kind": "field", - "name": "accessibleName", + "name": "headerAccessibleName", "type": { "text": "string | undefined" }, - "description": "Defines the accessible ARIA name of the component.", - "default": "undefined", + "description": "Defines the accessible name of the header.", "privacy": "public", - "_ui5since": "1.16.0" - }, - { - "kind": "field", - "name": "hideValue", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines whether the component value is shown.", - "privacy": "public" - }, - { - "kind": "field", - "name": "value", - "type": { - "text": "number" - }, - "default": "0", - "description": "Specifies the numerical value in percent for the length of the component.\n\n**Note:**\nIf a value greater than 100 is provided, the percentValue is set to 100. In other cases of invalid value, percentValue is set to its default of 0.", - "privacy": "public" + "default": "undefined" }, { "kind": "field", - "name": "displayValue", + "name": "headerText", "type": { "text": "string | undefined" }, - "description": "Specifies the text value to be displayed in the bar.\n\n**Note:**\n\n- If there is no value provided or the value is empty, the default percentage value is shown.\n- If `hideValue` property is `true` both the `displayValue` and `value` property values are not shown.", - "default": "undefined", - "privacy": "public" + "description": "Defines the header text of the <code>ui5-li-group</code>.", + "privacy": "public", + "default": "undefined" }, { "kind": "field", - "name": "valueState", + "name": "wrappingType", "type": { - "text": "ValueState", + "text": "WrappingType", "references": [ { - "name": "ValueState", - "package": "@ui5/webcomponents-base", - "module": "dist/types/ValueState.js" + "name": "WrappingType", + "package": "@ui5/webcomponents", + "module": "dist/types/WrappingType.js" } ] }, "default": "\"None\"", - "description": "Defines the value state of the component.", - "privacy": "public" + "description": "Defines if the text of the component should wrap when it's too long.\nWhen set to \"Normal\", the content (title, description) will be wrapped\nusing the `ui5-expandable-text` component.<br/>\n\nThe text can wrap up to 100 characters on small screens (size S) and\nup to 300 characters on larger screens (size M and above). When text exceeds\nthese limits, it truncates with an ellipsis followed by a text expansion trigger.\n\nAvailable options are:\n- `None` (default) - The text will truncate with an ellipsis.\n- `Normal` - The text will wrap (without truncation).", + "privacy": "public", + "_ui5since": "2.15.0" + } + ], + "superclass": { + "name": "ComboBoxItemGroup", + "package": "@ui5/webcomponents", + "module": "dist/ComboBoxItemGroup.js" + }, + "tagName": "ui5-mcb-item-group", + "customElement": true, + "_ui5since": "2.0.0", + "_ui5privacy": "public", + "_ui5implements": [ + { + "name": "IMultiComboBoxItem", + "package": "@ui5/webcomponents", + "module": "dist/MultiComboBox.js" + } + ], + "cssParts": [ + { + "description": "Used to style the header item of the group", + "name": "header" + }, + { + "description": "Used to style the title of the group header", + "name": "title" } ], "attributes": [ { - "description": "Defines the accessible ARIA name of the component.", - "name": "accessible-name", + "description": "Defines the accessible name of the header.", + "name": "header-accessible-name", "default": "undefined", - "fieldName": "accessibleName", + "fieldName": "headerAccessibleName", "type": { "text": "string | undefined" } }, { - "description": "Defines whether the component value is shown.", - "name": "hide-value", - "default": "false", - "fieldName": "hideValue", + "description": "Defines the header text of the <code>ui5-li-group</code>.", + "name": "header-text", + "default": "undefined", + "fieldName": "headerText", "type": { - "text": "boolean" + "text": "string | undefined" } }, { - "description": "Specifies the numerical value in percent for the length of the component.\n\n**Note:**\nIf a value greater than 100 is provided, the percentValue is set to 100. In other cases of invalid value, percentValue is set to its default of 0.", - "name": "value", - "default": "0", - "fieldName": "value", + "description": "Defines if the text of the component should wrap when it's too long.\nWhen set to \"Normal\", the content (title, description) will be wrapped\nusing the `ui5-expandable-text` component.<br/>\n\nThe text can wrap up to 100 characters on small screens (size S) and\nup to 300 characters on larger screens (size M and above). When text exceeds\nthese limits, it truncates with an ellipsis followed by a text expansion trigger.\n\nAvailable options are:\n- `None` (default) - The text will truncate with an ellipsis.\n- `Normal` - The text will wrap (without truncation).", + "name": "wrapping-type", + "default": "\"None\"", + "fieldName": "wrappingType", "type": { - "text": "number" + "text": "\"None\" | \"Normal\"" } - }, + } + ], + "events": [ { - "description": "Specifies the text value to be displayed in the bar.\n\n**Note:**\n\n- If there is no value provided or the value is empty, the default percentage value is shown.\n- If `hideValue` property is `true` both the `displayValue` and `value` property values are not shown.", - "name": "display-value", - "default": "undefined", - "fieldName": "displayValue", + "name": "move", + "_ui5privacy": "public", "type": { - "text": "string | undefined" - } + "text": "CustomEvent<ListItemGroupMoveEventDetail>", + "references": [ + { + "name": "ListItemGroupMoveEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/ListItemGroup.js" + } + ] + }, + "description": "Fired when a movable list item is dropped onto a drop target.\n\n**Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5since": "2.1.0", + "_ui5parameters": [ + { + "type": { + "text": "object" + }, + "name": "destination", + "_ui5privacy": "public", + "description": "Contains information about the destination of the moved element. Has `element` and `placement` properties." + }, + { + "type": { + "text": "object" + }, + "name": "source", + "_ui5privacy": "public", + "description": "Contains information about the moved element under `element` property." + } + ] }, { - "description": "Defines the value state of the component.", - "name": "value-state", - "default": "\"None\"", - "fieldName": "valueState", + "name": "move-over", + "_ui5privacy": "public", "type": { - "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" - } + "text": "CustomEvent<ListItemGroupMoveEventDetail>", + "references": [ + { + "name": "ListItemGroupMoveEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/ListItemGroup.js" + } + ] + }, + "description": "Fired when a movable list item is moved over a potential drop target during a dragging operation.\n\nIf the new position is valid, prevent the default action of the event using `preventDefault()`.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true, + "_ui5since": "2.1.0", + "_ui5parameters": [ + { + "type": { + "text": "object" + }, + "name": "destination", + "_ui5privacy": "public", + "description": "Contains information about the destination of the moved element. Has `element` and `placement` properties." + }, + { + "type": { + "text": "object" + }, + "name": "source", + "_ui5privacy": "public", + "description": "Contains information about the moved element under `element` property." + } + ] } - ], - "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" - }, - "tagName": "ui5-progress-indicator", - "customElement": true, - "_ui5since": "1.0.0-rc.8", - "_ui5privacy": "public" + ] } ], "exports": [ @@ -18499,39 +16428,130 @@ "kind": "js", "name": "default", "declaration": { - "name": "ProgressIndicator", - "module": "dist/ProgressIndicator.js" + "name": "MultiComboBoxItemGroup", + "module": "dist/MultiComboBoxItemGroup.js" } }, { "kind": "custom-element-definition", - "name": "ui5-progress-indicator", + "name": "ui5-mcb-item-group", "declaration": { - "name": "ProgressIndicator", - "module": "dist/ProgressIndicator.js" + "name": "MultiComboBoxItemGroup", + "module": "dist/MultiComboBoxItemGroup.js" } } ] }, { "kind": "javascript-module", - "path": "dist/RadioButton.js", + "path": "dist/MultiInput.js", "declarations": [ { "kind": "class", - "description": "### Overview\n\nThe `ui5-radio-button` component enables users to select a single option from a set of options.\nWhen a `ui5-radio-button` is selected by the user, the\n`change` event is fired.\nWhen a `ui5-radio-button` that is within a group is selected, the one\nthat was previously selected gets automatically deselected. You can group radio buttons by using the `name` property.\n\n**Note:** If `ui5-radio-button` is not part of a group, it can be selected once, but can not be deselected back.\n\n### Keyboard Handling\n\nOnce the `ui5-radio-button` is on focus, it might be selected by pressing the Space and Enter keys.\n\nThe Arrow Down/Arrow Up and Arrow Left/Arrow Right keys can be used to change selection between next/previous radio buttons in one group,\nwhile TAB and SHIFT + TAB can be used to enter or leave the radio button group.\n\n**Note:** On entering radio button group, the focus goes to the currently selected radio button.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/RadioButton\";`", - "name": "RadioButton", - "cssParts": [ + "description": "### Overview\nA `ui5-multi-input` field allows the user to enter multiple values, which are displayed as `ui5-token`.\n\nUser can choose interaction for creating tokens.\nFiori Guidelines say that user should create tokens when:\n\n- Type a value in the input and press enter or focus out the input field (`change` event is fired)\n- Move between suggestion items (`selection-change` event is fired)\n- Clicking on a suggestion item (`selection-change` event is fired if the clicked item is different than the current value. Also `change` event is fired )\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/MultiInput.js\";`", + "name": "MultiInput", + "slots": [ { - "description": "Used to style the outer ring of the `ui5-radio-button`.", - "name": "outer-ring" + "name": "default", + "description": "Defines the suggestion items.\n\n**Note:** The suggestions would be displayed only if the `showSuggestions`\nproperty is set to `true`.\n\n**Note:** The `<ui5-suggestion-item>`, `<ui5-suggestion-item-group>` and `ui5-suggestion-item-custom` are recommended to be used as suggestion items.", + "_ui5propertyName": "suggestionItems", + "_ui5type": { + "text": "Array<IInputSuggestionItem>", + "references": [ + { + "name": "IInputSuggestionItem", + "package": "@ui5/webcomponents", + "module": "dist/Input.js" + } + ] + }, + "_ui5privacy": "public" }, { - "description": "Used to style the inner ring of the `ui5-radio-button`.", - "name": "inner-ring" + "name": "icon", + "description": "Defines the icon to be displayed in the component.", + "_ui5type": { + "text": "Array<IIcon>", + "references": [ + { + "name": "IIcon", + "package": "@ui5/webcomponents", + "module": "dist/Icon.js" + } + ] + }, + "_ui5privacy": "public" + }, + { + "name": "tokens", + "description": "Defines the component tokens.", + "_ui5type": { + "text": "Array<IToken>", + "references": [ + { + "name": "IToken", + "package": "@ui5/webcomponents", + "module": "dist/MultiInput.js" + } + ] + }, + "_ui5privacy": "public" + }, + { + "name": "valueStateMessage", + "description": "Defines the value state message that will be displayed as pop up under the component.\nThe value state message slot should contain only one root element.\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 component is in `Information`, `Critical` or `Negative` value state.\n\n**Note:** If the component has `suggestionItems`,\nthe `valueStateMessage` would be displayed as part of the same popover, if used on desktop, or dialog - on phone.", + "_ui5since": "1.0.0-rc.6", + "_ui5type": { + "text": "Array<HTMLElement>" + }, + "_ui5privacy": "public" } ], "members": [ + { + "kind": "field", + "name": "accessibleDescription", + "type": { + "text": "string | undefined" + }, + "description": "Defines the accessible description of the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.9.0" + }, + { + "kind": "field", + "name": "accessibleDescriptionRef", + "type": { + "text": "string | undefined" + }, + "description": "Receives id(or many ids) of the elements that describe the input.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.9.0" + }, + { + "kind": "field", + "name": "accessibleName", + "type": { + "text": "string | undefined" + }, + "description": "Defines the accessible ARIA name of the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.0.0-rc.15" + }, + { + "kind": "field", + "name": "accessibleNameRef", + "type": { + "text": "string | undefined" + }, + "description": "Receives id(or many ids) of the elements that label the input.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.0.0-rc.15" + }, { "kind": "field", "name": "disabled", @@ -18539,128 +16559,177 @@ "text": "boolean" }, "default": "false", - "description": "Defines whether the component is disabled.\n\n**Note:** A disabled component is completely noninteractive.", + "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is completely noninteractive.", "privacy": "public" }, { "kind": "field", - "name": "readonly", + "name": "filter", "type": { - "text": "boolean" + "text": "InputSuggestionsFilter", + "references": [ + { + "name": "InputSuggestionsFilter", + "package": "@ui5/webcomponents", + "module": "dist/types/InputSuggestionsFilter.js" + } + ] }, - "default": "false", - "description": "Defines whether the component is read-only.\n\n**Note:** A read-only component isn't editable or selectable.\nHowever, because it's focusable, it still provides visual feedback upon user interaction.", + "description": "Defines the filter type of the component.", + "default": "\"None\"", + "privacy": "public", + "_ui5since": "2.19.0" + }, + { + "kind": "field", + "name": "maxlength", + "type": { + "text": "number | undefined" + }, + "description": "Sets the maximum number of characters available in the input field.\n\n**Note:** This property is not compatible with the ui5-input type InputType.Number. If the ui5-input type is set to Number, the maxlength value is ignored.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.0.0-rc.5" + }, + { + "kind": "field", + "name": "name", + "type": { + "text": "string | undefined" + }, + "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.\n**Note:** When the component is used inside a form element,\nthe value is sent as the first element in the form data, even if it's empty.", + "default": "undefined", "privacy": "public" }, { "kind": "field", - "name": "required", + "name": "noTypeahead", "type": { "text": "boolean" }, "default": "false", - "description": "Defines whether the component is required.", + "description": "Defines whether the value will be autcompleted to match an item", "privacy": "public", - "_ui5since": "1.9.0" + "_ui5since": "1.4.0" }, { "kind": "field", - "name": "checked", + "name": "open", "type": { "text": "boolean" }, "default": "false", - "description": "Defines whether the component is checked or not.\n\n**Note:** The property value can be changed with user interaction,\neither by clicking/tapping on the component,\nor by using the Space or Enter key.\n\n**Note:** Only enabled radio buttons can be checked.\nRead-only radio buttons are not selectable, and therefore are always unchecked.", + "description": "Defines whether the suggestions picker is open.\nThe picker will not open if the `showSuggestions` property is set to `false`, the input is disabled or the input is readonly.\nThe picker will close automatically and `close` event will be fired if the input is not in the viewport.", "privacy": "public", - "_ui5since": "1.0.0-rc.15", - "_ui5formProperty": true, - "_ui5formEvents": "change" + "_ui5since": "2.0.0" }, { "kind": "field", - "name": "text", + "name": "placeholder", "type": { "text": "string | undefined" }, - "description": "Defines the text of the component.", + "description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.", "default": "undefined", "privacy": "public" }, { "kind": "field", - "name": "valueState", + "name": "readonly", "type": { - "text": "ValueState", - "references": [ - { - "name": "ValueState", - "package": "@ui5/webcomponents-base", - "module": "dist/types/ValueState.js" - } - ] + "text": "boolean" }, - "default": "\"None\"", - "description": "Defines the value state of the component.", + "default": "false", + "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.", "privacy": "public" }, { "kind": "field", - "name": "name", + "name": "required", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\nRadio buttons with the same `name` will form a radio button group.\n\n**Note:** By this name the component will be identified upon submission in an HTML form.\n\n**Note:** The selection can be changed with `ARROW_UP/DOWN` and `ARROW_LEFT/RIGHT` keys between radio buttons in same group.\n\n**Note:** Only one radio button can be selected per group.", - "default": "undefined", + "default": "false", + "description": "Defines whether the component is required.", + "privacy": "public", + "_ui5since": "1.0.0-rc.3" + }, + { + "kind": "field", + "name": "showClearIcon", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the clear icon of the input will be shown.", + "privacy": "public", + "_ui5since": "1.2.0" + }, + { + "kind": "field", + "name": "showSuggestions", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the component should show suggestions, if such are present.", "privacy": "public" }, { "kind": "field", - "name": "value", + "name": "showValueHelpIcon", "type": { - "text": "string" + "text": "boolean" }, - "default": "\"\"", - "description": "Defines the form value of the component.\nWhen a form with a radio button group is submitted, the group's value\nwill be the value of the currently selected radio button.", + "default": "false", + "description": "Determines whether a value help icon will be visualized in the end of the input.\nPressing the icon will fire `value-help-trigger` event.", "privacy": "public" }, { "kind": "field", - "name": "wrappingType", + "name": "type", "type": { - "text": "WrappingType", + "text": "InputType", "references": [ { - "name": "WrappingType", + "name": "InputType", "package": "@ui5/webcomponents", - "module": "dist/types/WrappingType.js" + "module": "dist/types/InputType.js" } ] }, - "default": "\"Normal\"", - "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": "\"Text\"", + "description": "Defines the HTML type of the component.\n\n**Notes:**\n\n- The particular effect of this property differs depending on the browser\nand the current language settings, especially for type `Number`.\n- The property is mostly intended to be used with touch devices\nthat use different soft keyboard layouts depending on the given input type.", "privacy": "public" }, { "kind": "field", - "name": "accessibleName", + "name": "value", "type": { - "text": "string | undefined" + "text": "string" }, - "description": "Defines the accessible ARIA name of the component.", - "default": "undefined", + "default": "\"\"", + "description": "Defines the value of the component.\n\n**Note:** The property is updated upon typing.", "privacy": "public", - "_ui5since": "1.6.0" + "_ui5formProperty": true, + "_ui5formEvents": "change,input" }, { "kind": "field", - "name": "accessibleNameRef", + "name": "valueState", "type": { - "text": "string | undefined" + "text": "ValueState", + "references": [ + { + "name": "ValueState", + "package": "@ui5/webcomponents-base", + "module": "dist/types/ValueState.js" + } + ] }, - "description": "Defines the IDs of the elements that label the component.", - "default": "undefined", - "privacy": "public", - "_ui5since": "1.1.0" + "default": "\"None\"", + "description": "Defines the value state of the component.", + "privacy": "public" } ], "events": [ @@ -18670,16 +16739,166 @@ "type": { "text": "CustomEvent" }, - "description": "Fired when the component checked state changes.", + "description": "Fired when the input operation has finished by pressing Enter or on focusout.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true + }, + { + "name": "close", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the suggestions picker is closed.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": false, + "_ui5since": "2.0.0" + }, + { + "name": "input", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the value of the component changes at each keystroke,\nand when a suggestion item has been selected.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true + }, + { + "name": "open", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the suggestions picker is open.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, "_ui5Bubbles": true, - "_ui5since": "1.0.0-rc.15" + "_ui5since": "2.0.0" + }, + { + "name": "select", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when some text has been selected.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5since": "2.0.0" + }, + { + "name": "selection-change", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<InputSelectionChangeEventDetail>", + "references": [ + { + "name": "InputSelectionChangeEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/Input.js" + } + ] + }, + "description": "Fired when the user navigates to a suggestion item via the ARROW keys,\nas a preview, before the final selection.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5since": "2.0.0", + "_ui5parameters": [ + { + "type": { + "text": "HTMLElement" + }, + "name": "item", + "_ui5privacy": "public", + "description": "The previewed suggestion item." + } + ] + }, + { + "name": "token-delete", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<MultiInputTokenDeleteEventDetail>", + "references": [ + { + "name": "MultiInputTokenDeleteEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/MultiInput.js" + } + ] + }, + "description": "Fired when tokens are being deleted.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5parameters": [ + { + "type": { + "text": "Array" + }, + "name": "tokens", + "_ui5privacy": "public", + "description": "An array containing the deleted tokens." + } + ] + }, + { + "name": "value-help-trigger", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the value help icon is pressed\nand F4 or ALT/OPTION + ARROW_UP/ARROW_DOWN keyboard keys are used.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true } ], "attributes": [ { - "description": "Defines whether the component is disabled.\n\n**Note:** A disabled component is completely noninteractive.", + "description": "Defines the accessible description of the component.", + "name": "accessible-description", + "default": "undefined", + "fieldName": "accessibleDescription", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Receives id(or many ids) of the elements that describe the input.", + "name": "accessible-description-ref", + "default": "undefined", + "fieldName": "accessibleDescriptionRef", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the accessible ARIA name of the component.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Receives id(or many ids) of the elements that label the input.", + "name": "accessible-name-ref", + "default": "undefined", + "fieldName": "accessibleNameRef", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is completely noninteractive.", "name": "disabled", "default": "false", "fieldName": "disabled", @@ -18688,7 +16907,61 @@ } }, { - "description": "Defines whether the component is read-only.\n\n**Note:** A read-only component isn't editable or selectable.\nHowever, because it's focusable, it still provides visual feedback upon user interaction.", + "description": "Defines the filter type of the component.", + "name": "filter", + "default": "\"None\"", + "fieldName": "filter", + "type": { + "text": "\"None\" | \"StartsWithPerTerm\" | \"StartsWith\" | \"Contains\"" + } + }, + { + "description": "Sets the maximum number of characters available in the input field.\n\n**Note:** This property is not compatible with the ui5-input type InputType.Number. If the ui5-input type is set to Number, the maxlength value is ignored.", + "name": "maxlength", + "default": "undefined", + "fieldName": "maxlength", + "type": { + "text": "number | undefined" + } + }, + { + "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.\n**Note:** When the component is used inside a form element,\nthe value is sent as the first element in the form data, even if it's empty.", + "name": "name", + "default": "undefined", + "fieldName": "name", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines whether the value will be autcompleted to match an item", + "name": "no-typeahead", + "default": "false", + "fieldName": "noTypeahead", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines whether the suggestions picker is open.\nThe picker will not open if the `showSuggestions` property is set to `false`, the input is disabled or the input is readonly.\nThe picker will close automatically and `close` event will be fired if the input is not in the viewport.", + "name": "open", + "default": "false", + "fieldName": "open", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.", + "name": "placeholder", + "default": "undefined", + "fieldName": "placeholder", + "type": { + "text": "string | undefined" + } + }, + { + "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.", "name": "readonly", "default": "false", "fieldName": "readonly", @@ -18706,43 +16979,43 @@ } }, { - "description": "Defines whether the component is checked or not.\n\n**Note:** The property value can be changed with user interaction,\neither by clicking/tapping on the component,\nor by using the Space or Enter key.\n\n**Note:** Only enabled radio buttons can be checked.\nRead-only radio buttons are not selectable, and therefore are always unchecked.", - "name": "checked", + "description": "Defines whether the clear icon of the input will be shown.", + "name": "show-clear-icon", "default": "false", - "fieldName": "checked", + "fieldName": "showClearIcon", "type": { "text": "boolean" } }, { - "description": "Defines the text of the component.", - "name": "text", - "default": "undefined", - "fieldName": "text", + "description": "Defines whether the component should show suggestions, if such are present.", + "name": "show-suggestions", + "default": "false", + "fieldName": "showSuggestions", "type": { - "text": "string | undefined" + "text": "boolean" } }, { - "description": "Defines the value state of the component.", - "name": "value-state", - "default": "\"None\"", - "fieldName": "valueState", + "description": "Determines whether a value help icon will be visualized in the end of the input.\nPressing the icon will fire `value-help-trigger` event.", + "name": "show-value-help-icon", + "default": "false", + "fieldName": "showValueHelpIcon", "type": { - "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" + "text": "boolean" } }, { - "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\nRadio buttons with the same `name` will form a radio button group.\n\n**Note:** By this name the component will be identified upon submission in an HTML form.\n\n**Note:** The selection can be changed with `ARROW_UP/DOWN` and `ARROW_LEFT/RIGHT` keys between radio buttons in same group.\n\n**Note:** Only one radio button can be selected per group.", - "name": "name", - "default": "undefined", - "fieldName": "name", + "description": "Defines the HTML type of the component.\n\n**Notes:**\n\n- The particular effect of this property differs depending on the browser\nand the current language settings, especially for type `Number`.\n- The property is mostly intended to be used with touch devices\nthat use different soft keyboard layouts depending on the given input type.", + "name": "type", + "default": "\"Text\"", + "fieldName": "type", "type": { - "text": "string | undefined" + "text": "\"Text\" | \"Email\" | \"Number\" | \"Password\" | \"Tel\" | \"URL\" | \"Search\"" } }, { - "description": "Defines the form value of the component.\nWhen a form with a radio button group is submitted, the group's value\nwill be the value of the currently selected radio button.", + "description": "Defines the value of the component.\n\n**Note:** The property is updated upon typing.", "name": "value", "default": "\"\"", "fieldName": "value", @@ -18751,41 +17024,38 @@ } }, { - "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.", - "name": "wrapping-type", - "default": "\"Normal\"", - "fieldName": "wrappingType", - "type": { - "text": "\"None\" | \"Normal\"" - } - }, - { - "description": "Defines the accessible ARIA name of the component.", - "name": "accessible-name", - "default": "undefined", - "fieldName": "accessibleName", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Defines the IDs of the elements that label the component.", - "name": "accessible-name-ref", - "default": "undefined", - "fieldName": "accessibleNameRef", + "description": "Defines the value state of the component.", + "name": "value-state", + "default": "\"None\"", + "fieldName": "valueState", "type": { - "text": "string | undefined" + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" } } ], "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" + "name": "Input", + "package": "@ui5/webcomponents", + "module": "dist/Input.js" }, - "tagName": "ui5-radio-button", + "tagName": "ui5-multi-input", "customElement": true, - "_ui5privacy": "public" + "_ui5since": "1.0.0-rc.9", + "_ui5privacy": "public", + "cssParts": [ + { + "description": "Used to style the clear icon, which can be pressed to clear user input text", + "name": "clear-icon" + }, + { + "description": "Used to style the native input element", + "name": "input" + }, + { + "description": "Used to style the root DOM element of the Input component", + "name": "root" + } + ] } ], "exports": [ @@ -18793,414 +17063,291 @@ "kind": "js", "name": "default", "declaration": { - "name": "RadioButton", - "module": "dist/RadioButton.js" + "name": "MultiInput", + "module": "dist/MultiInput.js" } }, { "kind": "custom-element-definition", - "name": "ui5-radio-button", - "declaration": { - "name": "RadioButton", - "module": "dist/RadioButton.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/RadioButtonGroup.js", - "declarations": [], - "exports": [ - { - "kind": "js", - "name": "default", + "name": "ui5-multi-input", "declaration": { - "name": "RadioButtonGroup", - "module": "dist/RadioButtonGroup.js" + "name": "MultiInput", + "module": "dist/MultiInput.js" } } ] }, { "kind": "javascript-module", - "path": "dist/RangeSlider.js", + "path": "dist/Option.js", "declarations": [ { "kind": "class", - "description": "### Overview\nRepresents a numerical interval and two handles (grips) to select a sub-range within it.\nThe purpose of the component to enable visual selection of sub-ranges within a given interval.\n\n### Structure\nThe most important properties of the Range Slider are:\n\n- min - The minimum value of the slider range.\n- max - The maximum value of the slider range.\n- value - The current value of the slider.\n- step - Determines the increments in which the slider will move.\n- showTooltip - Determines if a tooltip should be displayed above the handle.\n- showTickmarks - Displays a visual divider between the step values.\n- labelInterval - Labels some or all of the tickmarks with their values.\n\n#### Notes:\n\n- The right and left handle can be moved individually and their positions could therefore switch.\n- The entire range can be moved along the interval.\n\n### Usage\nThe most common use case is to select and move sub-ranges on a continuous numerical scale.\n\n### Responsive Behavior\nYou can move the currently selected range by clicking on it and dragging it along the interval.\n\n### Keyboard Handling\n\n- `Left or Down Arrow` - Moves a component's handle or the entire selection one step to the left;\n- `Right or Up Arrow` - Moves a component's handle or the entire selection one step to the right;\n- `Left or Down Arrow + Ctrl/Cmd` - Moves a component's handle to the left or the entire range with step equal to 1/10th of the entire range;\n- `Right or Up Arrow + Ctrl/Cmd` - Moves a component's handle to the right or the entire range with step equal to 1/10th of the entire range;\n- `Plus` - Same as `Right or Up Arrow`;\n- `Minus` - Same as `Left or Down Arrow`;\n- `Home` - Moves the entire selection or the selected handle to the beginning of the component's range;\n- `End` - Moves the entire selection or the selected handle to the end of the component's range;\n- `Page Up` - Same as `Right or Up Arrow + Ctrl/Cmd`;\n- `Page Down` - Same as `Left or Down Arrow + Ctrl/Cmd`;\n- `Escape` - Resets the `startValue` and `endValue` properties to the values prior the component focusing;\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/RangeSlider.js\";`", - "name": "RangeSlider", - "cssParts": [ - { - "description": "Used to style the progress container, the horizontal bar that visually represents the range between the minimum and maximum values, of the `ui5-range-slider`.", - "name": "progress-container" - }, - { - "description": "Used to style the progress bar, which shows the progress of the `ui5-range-slider`.", - "name": "progress-bar" - }, + "description": "### Overview\n\nThe `ui5-option` component defines the content of an option in the `ui5-select`.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Option.js\";`", + "name": "Option", + "slots": [ { - "description": "Used to style the handles of the `ui5-range-slider`.", - "name": "handle" + "name": "default", + "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<Node>" + }, + "_ui5privacy": "public" } ], "members": [ { "kind": "field", - "name": "startValue", - "description": "Defines start point of a selection - position of a first handle on the slider.", - "default": "0", - "privacy": "public", - "type": { - "text": "number" - }, - "_ui5formProperty": true, - "_ui5formEvents": "change,input" - }, - { - "kind": "field", - "name": "endValue", - "description": "Defines end point of a selection - position of a second handle on the slider.", - "default": "100", - "privacy": "public", - "type": { - "text": "number" - }, - "_ui5formProperty": true, - "_ui5formEvents": "change,input" - }, - { - "kind": "field", - "name": "min", - "type": { - "text": "number" - }, - "default": "0", - "description": "Defines the minimum value of the slider.", - "privacy": "public", - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" - } - }, - { - "kind": "field", - "name": "max", - "type": { - "text": "number" - }, - "default": "100", - "description": "Defines the maximum value of the slider.", - "privacy": "public", - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" - } - }, - { - "kind": "field", - "name": "name", + "name": "additionalText", "type": { "text": "string | undefined" }, - "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", + "description": "Defines the `additionalText`, displayed in the end of the option.", "default": "undefined", "privacy": "public", - "_ui5since": "2.0.0", - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" - } - }, - { - "kind": "field", - "name": "step", - "type": { - "text": "number" - }, - "default": "1", - "description": "Defines the size of the slider's selection intervals (e.g. min = 0, max = 10, step = 5 would result in possible selection of the values 0, 5, 10).\n\n**Note:** If set to 0 the slider handle movement is disabled. When negative number or value other than a number, the component fallbacks to its default value.", - "privacy": "public", - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" - } - }, - { - "kind": "field", - "name": "labelInterval", - "type": { - "text": "number" - }, - "default": "0", - "description": "Displays a label with a value on every N-th step.\n\n**Note:** The step and tickmarks properties must be enabled.\nExample - if the step value is set to 2 and the label interval is also specified to 2 - then every second\ntickmark will be labelled, which means every 4th value number.", - "privacy": "public", - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" - } - }, - { - "kind": "field", - "name": "showTickmarks", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Enables tickmarks visualization for each step.\n\n**Note:** The step must be a positive number.", - "privacy": "public", - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" - } + "_ui5since": "1.0.0-rc.15" }, { "kind": "field", - "name": "showTooltip", + "name": "icon", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Enables handle tooltip displaying the current value.", - "privacy": "public", - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" - } + "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": "undefined", + "privacy": "public" }, { "kind": "field", - "name": "editableTooltip", + "name": "selected", "type": { "text": "boolean" }, "default": "false", - "description": "\nIndicates whether input fields should be used as tooltips for the handles.\n\n**Note:** Setting this option to true will only work if showTooltip is set to true.\n**Note:** In order for the component to comply with the accessibility standard, it is recommended to set the editableTooltip property to true.", + "description": "Defines the selected state of the component.", "privacy": "public", - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" - } + "deprecated": "since 2.20.0, please use the parent Select's `value` property instead." }, { "kind": "field", - "name": "disabled", + "name": "tooltip", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Defines whether the slider is in disabled state.", + "description": "Defines the tooltip of the option.", + "default": "undefined", "privacy": "public", - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" - } + "_ui5since": "2.0.0" }, { "kind": "field", - "name": "accessibleName", + "name": "value", "type": { "text": "string | undefined" }, - "description": "Defines the accessible ARIA name of the component.", + "description": "Defines the value of the `ui5-select` inside an HTML Form element when this component is selected.\nFor more information on HTML Form support, see the `name` property of `ui5-select`.", "default": "undefined", - "privacy": "public", - "_ui5since": "1.4.0", - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" - } + "privacy": "public" } ], "attributes": [ { - "description": "Defines start point of a selection - position of a first handle on the slider.", - "name": "start-value", + "description": "Defines the `additionalText`, displayed in the end of the option.", + "name": "additional-text", "default": "undefined", - "fieldName": "startValue", + "fieldName": "additionalText", "type": { - "text": "any" + "text": "string | undefined" } }, { - "description": "Defines end point of a selection - position of a second handle on the slider.", - "name": "end-value", + "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).", + "name": "icon", "default": "undefined", - "fieldName": "endValue", + "fieldName": "icon", "type": { - "text": "any" + "text": "string | undefined" } }, { - "description": "Defines the minimum value of the slider.", - "name": "min", - "default": "0", - "fieldName": "min", + "description": "Defines the selected state of the component.", + "name": "selected", + "default": "false", + "fieldName": "selected", "type": { - "text": "number" + "text": "boolean" }, - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" - } + "deprecated": "since 2.20.0, please use the parent Select's `value` property instead." }, { - "description": "Defines the maximum value of the slider.", - "name": "max", - "default": "100", - "fieldName": "max", + "description": "Defines the tooltip of the option.", + "name": "tooltip", + "default": "undefined", + "fieldName": "tooltip", "type": { - "text": "number" - }, - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" + "text": "string | undefined" } }, { - "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", - "name": "name", + "description": "Defines the value of the `ui5-select` inside an HTML Form element when this component is selected.\nFor more information on HTML Form support, see the `name` property of `ui5-select`.", + "name": "value", "default": "undefined", - "fieldName": "name", + "fieldName": "value", "type": { "text": "string | undefined" - }, - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" } - }, + } + ], + "superclass": { + "name": "ListItemBase", + "package": "@ui5/webcomponents", + "module": "dist/ListItemBase.js" + }, + "tagName": "ui5-option", + "customElement": true, + "_ui5privacy": "public", + "_ui5implements": [ { - "description": "Defines the size of the slider's selection intervals (e.g. min = 0, max = 10, step = 5 would result in possible selection of the values 0, 5, 10).\n\n**Note:** If set to 0 the slider handle movement is disabled. When negative number or value other than a number, the component fallbacks to its default value.", - "name": "step", - "default": "1", - "fieldName": "step", + "name": "IOption", + "package": "@ui5/webcomponents", + "module": "dist/Select.js" + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "Option", + "module": "dist/Option.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-option", + "declaration": { + "name": "Option", + "module": "dist/Option.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/OptionCustom.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\n\nThe `ui5-option-custom` component defines a custom content of an option in the `ui5-select`.\nA component to be the same way as the standard `ui5-option`.\nThe component accepts arbitrary HTML content to allow full customization.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/OptionCustom.js\";`", + "name": "OptionCustom", + "slots": [ + { + "name": "default", + "description": "Defines the content of the component.", + "_ui5propertyName": "content", + "_ui5type": { + "text": "Array<Node>" + }, + "_ui5privacy": "public" + } + ], + "members": [ + { + "kind": "field", + "name": "displayText", "type": { - "text": "number" + "text": "string | undefined" }, - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" - } + "description": "Defines the text, displayed inside the `ui5-select` input filed\nwhen the option gets selected.", + "default": "undefined", + "privacy": "public" }, { - "description": "Displays a label with a value on every N-th step.\n\n**Note:** The step and tickmarks properties must be enabled.\nExample - if the step value is set to 2 and the label interval is also specified to 2 - then every second\ntickmark will be labelled, which means every 4th value number.", - "name": "label-interval", - "default": "0", - "fieldName": "labelInterval", + "kind": "field", + "name": "selected", "type": { - "text": "number" + "text": "boolean" }, - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" - } + "default": "false", + "description": "Defines the selected state of the component.", + "privacy": "public" }, { - "description": "Enables tickmarks visualization for each step.\n\n**Note:** The step must be a positive number.", - "name": "show-tickmarks", - "default": "false", - "fieldName": "showTickmarks", + "kind": "field", + "name": "tooltip", "type": { - "text": "boolean" + "text": "string | undefined" }, - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" - } + "description": "Defines the tooltip of the option.", + "default": "undefined", + "privacy": "public" }, { - "description": "Enables handle tooltip displaying the current value.", - "name": "show-tooltip", - "default": "false", - "fieldName": "showTooltip", + "kind": "field", + "name": "value", "type": { - "text": "boolean" + "text": "string | undefined" }, - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" + "description": "Defines the value of the `ui5-select` inside an HTML Form element when this component is selected.\nFor more information on HTML Form support, see the `name` property of `ui5-select`.", + "default": "undefined", + "privacy": "public" + } + ], + "attributes": [ + { + "description": "Defines the text, displayed inside the `ui5-select` input filed\nwhen the option gets selected.", + "name": "display-text", + "default": "undefined", + "fieldName": "displayText", + "type": { + "text": "string | undefined" } }, { - "description": "\nIndicates whether input fields should be used as tooltips for the handles.\n\n**Note:** Setting this option to true will only work if showTooltip is set to true.\n**Note:** In order for the component to comply with the accessibility standard, it is recommended to set the editableTooltip property to true.", - "name": "editable-tooltip", + "description": "Defines the selected state of the component.", + "name": "selected", "default": "false", - "fieldName": "editableTooltip", + "fieldName": "selected", "type": { "text": "boolean" - }, - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" } }, { - "description": "Defines whether the slider is in disabled state.", - "name": "disabled", - "default": "false", - "fieldName": "disabled", + "description": "Defines the tooltip of the option.", + "name": "tooltip", + "default": "undefined", + "fieldName": "tooltip", "type": { - "text": "boolean" - }, - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" + "text": "string | undefined" } }, { - "description": "Defines the accessible ARIA name of the component.", - "name": "accessible-name", + "description": "Defines the value of the `ui5-select` inside an HTML Form element when this component is selected.\nFor more information on HTML Form support, see the `name` property of `ui5-select`.", + "name": "value", "default": "undefined", - "fieldName": "accessibleName", + "fieldName": "value", "type": { "text": "string | undefined" - }, - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" } } ], "superclass": { - "name": "SliderBase", + "name": "ListItemBase", "package": "@ui5/webcomponents", - "module": "dist/SliderBase.js" + "module": "dist/ListItemBase.js" }, - "tagName": "ui5-range-slider", + "tagName": "ui5-option-custom", "customElement": true, - "_ui5since": "1.0.0-rc.11", + "_ui5since": "2.0.0", "_ui5privacy": "public", - "events": [ - { - "name": "change", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired when the value changes and the user has finished interacting with the slider.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" - } - }, + "_ui5implements": [ { - "name": "input", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired when the value changes due to user interaction that is not yet finished - during mouse/touch dragging.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" - } + "name": "IOption", + "package": "@ui5/webcomponents", + "module": "dist/Select.js" } ] } @@ -19210,141 +17357,163 @@ "kind": "js", "name": "default", "declaration": { - "name": "RangeSlider", - "module": "dist/RangeSlider.js" + "name": "OptionCustom", + "module": "dist/OptionCustom.js" } }, { "kind": "custom-element-definition", - "name": "ui5-range-slider", + "name": "ui5-option-custom", "declaration": { - "name": "RangeSlider", - "module": "dist/RangeSlider.js" + "name": "OptionCustom", + "module": "dist/OptionCustom.js" } } ] }, { "kind": "javascript-module", - "path": "dist/RatingIndicator.js", + "path": "dist/Panel.js", "declarations": [ { "kind": "class", - "description": "### Overview\nThe Rating Indicator is used to display a specific number of icons that are used to rate an item.\nAdditionally, it is also used to display the average and overall ratings.\n\n### Usage\nThe recommended number of icons is between 5 and 7.\n\n### Responsive Behavior\nYou can change the size of the Rating Indicator by changing its `font-size` CSS property.\n\nExample: `<ui5-rating-indicator style=\"font-size: 3rem;\"></ui5-rating-indicator>`\n\n### Keyboard Handling\nWhen the `ui5-rating-indicator` is focused, the user can change the rating\nwith the following keyboard shortcuts:\n\n- [RIGHT/UP] - Increases the value of the rating by one step. If the highest value is reached, does nothing\n- [LEFT/DOWN] - Decreases the value of the rating by one step. If the lowest value is reached, does nothing.\n- [Home] - Sets the lowest value.\n- [End] - Sets the highest value.\n- [SPACE/ENTER/RETURN] - Increases the value of the rating by one step. If the highest value is reached, sets the rating to the lowest value.\n- Any number - Changes value to the corresponding number. If typed number is larger than the number of values, sets the highest value.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/RatingIndicator.js\";`", - "name": "RatingIndicator", - "members": [ + "description": "### Overview\n\nThe `ui5-panel` component is a container which has a header and a\ncontent area and is used\nfor grouping and displaying information. It can be collapsed to save space on the screen.\n\n### Guidelines:\n\n- Nesting two or more panels is not recommended.\n- Do not stack too many panels on one page.\n\n### Structure\nThe panel's header area consists of a title bar with a header text or custom header.\n\nThe header is clickable and can be used to toggle between the expanded and collapsed state. It includes an icon which rotates depending on the state.\n\nThe custom header can be set through the `header` slot and it may contain arbitraray content, such as: title, buttons or any other HTML elements.\n\nThe content area can contain an arbitrary set of controls.\n\n**Note:** The custom header is not clickable out of the box, but in this case the icon is interactive and allows to show/hide the content area.\n\n### Responsive Behavior\n\n- If the width of the panel is set to 100% (default), the panel and its children are\nresized responsively,\ndepending on its parent container.\n- If the panel has a fixed height, it will take up the space even if the panel is\ncollapsed.\n- When the panel is expandable (the `fixed` property is set to `false`),\nan arrow icon (pointing to the right) appears in front of the header.\n- When the animation is activated, expand/collapse uses a smooth animation to open or\nclose the content area.\n- When the panel expands/collapses, the arrow icon rotates 90 degrees\nclockwise/counter-clockwise.\n\n### Keyboard Handling\n\n#### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Panel.js\";`", + "name": "Panel", + "cssParts": [ { - "kind": "field", - "name": "value", - "type": { - "text": "number" - }, - "default": "0", - "description": "The indicated value of the rating.\n\n**Note:** If you set a number which is not round, it would be shown as follows:\n\n- 1.0 - 1.2 -> 1\n- 1.3 - 1.7 -> 1.5\n- 1.8 - 1.9 -> 2", - "privacy": "public" + "description": "Used to style the wrapper of the content.", + "name": "content" + }, + { + "description": "Used to style the wrapper of the header.", + "name": "header" + } + ], + "slots": [ + { + "description": "Defines the content of the component. The content is visible only when the component is expanded.", + "name": "default", + "_ui5privacy": "public", + "_ui5type": { + "text": "Array<Node>" + } }, + { + "name": "header", + "description": "Defines the component header area.\n\n**Note:** When a header is provided, the `headerText` property is ignored.", + "_ui5type": { + "text": "Array<HTMLElement>" + }, + "_ui5privacy": "public" + } + ], + "members": [ { "kind": "field", - "name": "max", + "name": "accessibleName", "type": { - "text": "number" + "text": "string | undefined" }, - "default": "5", - "description": "The number of displayed rating symbols.", + "description": "Defines the accessible ARIA name of the component.", + "default": "undefined", "privacy": "public", "_ui5since": "1.0.0-rc.15" }, { "kind": "field", - "name": "size", + "name": "accessibleRole", "type": { - "text": "RatingIndicatorSize", + "text": "PanelAccessibleRole", "references": [ { - "name": "RatingIndicatorSize", + "name": "PanelAccessibleRole", "package": "@ui5/webcomponents", - "module": "dist/types/RatingIndicatorSize.js" + "module": "dist/types/PanelAccessibleRole.js" } ] }, - "default": "\"M\"", - "description": "Defines the size of the component.", - "privacy": "public", - "_ui5since": "2.6.0" + "default": "\"Form\"", + "description": "Sets the accessible ARIA role of the component.\nDepending on the usage, you can change the role from the default `Form`\nto `Region` or `Complementary`.", + "privacy": "public" }, { "kind": "field", - "name": "disabled", + "name": "collapsed", "type": { "text": "boolean" }, "default": "false", - "description": "Defines whether the component is disabled.\n\n**Note:** A disabled component is completely noninteractive.", + "description": "Indicates whether the component is collapsed and only the header is displayed.", "privacy": "public" }, { "kind": "field", - "name": "readonly", + "name": "fixed", "type": { "text": "boolean" }, "default": "false", - "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.", + "description": "Determines whether the component is in a fixed state that is not\nexpandable/collapsible by user interaction.", "privacy": "public" }, { "kind": "field", - "name": "accessibleName", + "name": "headerLevel", "type": { - "text": "string | undefined" + "text": "TitleLevel", + "references": [ + { + "name": "TitleLevel", + "package": "@ui5/webcomponents", + "module": "dist/types/TitleLevel.js" + } + ] }, - "description": "Defines the accessible ARIA name of the component.", - "default": "undefined", - "privacy": "public", - "_ui5since": "1.0.0-rc.15" + "default": "\"H2\"", + "description": "Defines the \"aria-level\" of component heading,\nset by the `headerText`.", + "privacy": "public" }, { "kind": "field", - "name": "accessibleNameRef", + "name": "headerText", "type": { "text": "string | undefined" }, - "description": "Receives id(or many ids) of the elements that label the component.", + "description": "This property is used to set the header text of the component.\nThe text is visible in both expanded and collapsed states.\n\n**Note:** This property is overridden by the `header` slot.", "default": "undefined", - "privacy": "public", - "_ui5since": "1.15.0" + "privacy": "public" }, { "kind": "field", - "name": "required", + "name": "noAnimation", "type": { "text": "boolean" }, "default": "false", - "description": "Defines whether the component is required.", + "description": "Indicates whether the transition between the expanded and the collapsed state of the component is animated. By default the animation is enabled.", "privacy": "public", - "_ui5since": "1.15.0" + "_ui5since": "1.0.0-rc.16" }, { "kind": "field", - "name": "tooltip", + "name": "stickyHeader", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Defines the tooltip of the component.", - "default": "undefined", + "default": "false", + "description": "Indicates whether the Panel header is sticky or not.\nIf stickyHeader is set to true, then whenever you scroll the content or\nthe application, the header of the panel will be always visible and\na solid color will be used for its design.", "privacy": "public", - "_ui5since": "1.19.0" + "_ui5since": "1.16.0-rc.1" } ], "events": [ { - "name": "change", + "name": "toggle", "_ui5privacy": "public", "type": { "text": "CustomEvent" }, - "description": "The event is fired when the value changes.", + "description": "Fired when the component is expanded/collapsed by user interaction.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, "_ui5Bubbles": true @@ -19352,84 +17521,75 @@ ], "attributes": [ { - "description": "The indicated value of the rating.\n\n**Note:** If you set a number which is not round, it would be shown as follows:\n\n- 1.0 - 1.2 -> 1\n- 1.3 - 1.7 -> 1.5\n- 1.8 - 1.9 -> 2", - "name": "value", - "default": "0", - "fieldName": "value", - "type": { - "text": "number" - } - }, - { - "description": "The number of displayed rating symbols.", - "name": "max", - "default": "5", - "fieldName": "max", + "description": "Defines the accessible ARIA name of the component.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", "type": { - "text": "number" + "text": "string | undefined" } }, { - "description": "Defines the size of the component.", - "name": "size", - "default": "\"M\"", - "fieldName": "size", + "description": "Sets the accessible ARIA role of the component.\nDepending on the usage, you can change the role from the default `Form`\nto `Region` or `Complementary`.", + "name": "accessible-role", + "default": "\"Form\"", + "fieldName": "accessibleRole", "type": { - "text": "\"S\" | \"M\" | \"L\"" + "text": "\"Complementary\" | \"Form\" | \"Region\"" } }, { - "description": "Defines whether the component is disabled.\n\n**Note:** A disabled component is completely noninteractive.", - "name": "disabled", + "description": "Indicates whether the component is collapsed and only the header is displayed.", + "name": "collapsed", "default": "false", - "fieldName": "disabled", + "fieldName": "collapsed", "type": { "text": "boolean" } }, { - "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.", - "name": "readonly", + "description": "Determines whether the component is in a fixed state that is not\nexpandable/collapsible by user interaction.", + "name": "fixed", "default": "false", - "fieldName": "readonly", + "fieldName": "fixed", "type": { "text": "boolean" } }, { - "description": "Defines the accessible ARIA name of the component.", - "name": "accessible-name", - "default": "undefined", - "fieldName": "accessibleName", + "description": "Defines the \"aria-level\" of component heading,\nset by the `headerText`.", + "name": "header-level", + "default": "\"H2\"", + "fieldName": "headerLevel", "type": { - "text": "string | undefined" + "text": "\"H1\" | \"H2\" | \"H3\" | \"H4\" | \"H5\" | \"H6\"" } }, { - "description": "Receives id(or many ids) of the elements that label the component.", - "name": "accessible-name-ref", + "description": "This property is used to set the header text of the component.\nThe text is visible in both expanded and collapsed states.\n\n**Note:** This property is overridden by the `header` slot.", + "name": "header-text", "default": "undefined", - "fieldName": "accessibleNameRef", + "fieldName": "headerText", "type": { "text": "string | undefined" } }, { - "description": "Defines whether the component is required.", - "name": "required", + "description": "Indicates whether the transition between the expanded and the collapsed state of the component is animated. By default the animation is enabled.", + "name": "no-animation", "default": "false", - "fieldName": "required", + "fieldName": "noAnimation", "type": { "text": "boolean" } }, { - "description": "Defines the tooltip of the component.", - "name": "tooltip", - "default": "undefined", - "fieldName": "tooltip", + "description": "Indicates whether the Panel header is sticky or not.\nIf stickyHeader is set to true, then whenever you scroll the content or\nthe application, the header of the panel will be always visible and\na solid color will be used for its design.", + "name": "sticky-header", + "default": "false", + "fieldName": "stickyHeader", "type": { - "text": "string | undefined" + "text": "boolean" } } ], @@ -19438,9 +17598,8 @@ "package": "@ui5/webcomponents-base", "module": "dist/UI5Element.js" }, - "tagName": "ui5-rating-indicator", + "tagName": "ui5-panel", "customElement": true, - "_ui5since": "1.0.0-rc.8", "_ui5privacy": "public" } ], @@ -19449,204 +17608,191 @@ "kind": "js", "name": "default", "declaration": { - "name": "RatingIndicator", - "module": "dist/RatingIndicator.js" + "name": "Panel", + "module": "dist/Panel.js" } }, { "kind": "custom-element-definition", - "name": "ui5-rating-indicator", + "name": "ui5-panel", "declaration": { - "name": "RatingIndicator", - "module": "dist/RatingIndicator.js" + "name": "Panel", + "module": "dist/Panel.js" } } ] }, { "kind": "javascript-module", - "path": "dist/ResponsivePopover.js", + "path": "dist/Popover.js", "declarations": [ { "kind": "class", - "description": "### Overview\nThe `ui5-responsive-popover` acts as a Popover on desktop and tablet, while on phone it acts as a Dialog.\nThe component improves tremendously the user experience on mobile.\n\n### Usage\nUse it when you want to make sure that all the content is visible on any device.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/ResponsivePopover.js\";`", - "name": "ResponsivePopover", + "description": "### Overview\n\nThe `ui5-popover` component displays additional information for an object\nin a compact way and without leaving the page.\nThe Popover can contain various UI elements, such as fields, tables, images, and charts.\nIt can also include actions in the footer.\n\n### Structure\n\nThe popover has three main areas:\n\n- Header (optional)\n- Content\n- Footer (optional)\n\n**Note:** The `ui5-popover` is closed when the user clicks\nor taps outside the popover\nor selects an action within the popover. You can prevent this with the\n`modal` property.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Popover.js\";`", + "name": "Popover", "cssParts": [ - { - "description": "Used to style the header of the component", - "name": "header", - "inheritedFrom": { - "name": "Popover", - "module": "dist/Popover.js" - } - }, { "description": "Used to style the content of the component", - "name": "content", - "inheritedFrom": { - "name": "Popover", - "module": "dist/Popover.js" - } + "name": "content" }, { "description": "Used to style the footer of the component", + "name": "footer" + }, + { + "description": "Used to style the header of the component", + "name": "header" + } + ], + "slots": [ + { + "name": "default", + "description": "Defines the content of the Popup.", + "_ui5propertyName": "content", + "_ui5type": { + "text": "Array<HTMLElement>" + }, + "_ui5privacy": "public" + }, + { "name": "footer", - "inheritedFrom": { - "name": "Popover", - "module": "dist/Popover.js" - } + "description": "Defines the footer HTML Element.", + "_ui5type": { + "text": "Array<HTMLElement>" + }, + "_ui5privacy": "public" + }, + { + "name": "header", + "description": "Defines the header HTML Element.", + "_ui5type": { + "text": "Array<HTMLElement>" + }, + "_ui5privacy": "public" } ], "members": [ { "kind": "field", - "name": "headerText", + "name": "accessibleDescription", "type": { "text": "string | undefined" }, - "description": "Defines the header text.\n\n**Note:** If `header` slot is provided, the `headerText` is ignored.", + "description": "Defines the accessible description of the component.", "default": "undefined", "privacy": "public", - "inheritedFrom": { - "name": "Popover", - "module": "dist/Popover.js" - } + "_ui5since": "2.11.0" }, { "kind": "field", - "name": "placement", + "name": "accessibleDescriptionRef", "type": { - "text": "PopoverPlacement", - "references": [ - { - "name": "PopoverPlacement", - "package": "@ui5/webcomponents", - "module": "dist/types/PopoverPlacement.js" - } - ] + "text": "string | undefined" }, - "default": "\"End\"", - "description": "Determines on which side the component is placed at.", + "description": "Receives id(or many ids) of the elements that describe the component.", + "default": "undefined", "privacy": "public", - "inheritedFrom": { - "name": "Popover", - "module": "dist/Popover.js" - } + "_ui5since": "2.11.0" }, { "kind": "field", - "name": "horizontalAlign", + "name": "accessibleName", "type": { - "text": "PopoverHorizontalAlign", - "references": [ - { - "name": "PopoverHorizontalAlign", - "package": "@ui5/webcomponents", - "module": "dist/types/PopoverHorizontalAlign.js" - } - ] + "text": "string | undefined" }, - "default": "\"Center\"", - "description": "Determines the horizontal alignment of the component.", + "description": "Defines the accessible name of the component.", + "default": "undefined", "privacy": "public", - "inheritedFrom": { - "name": "Popover", - "module": "dist/Popover.js" - } + "_ui5since": "1.0.0-rc.15" }, { "kind": "field", - "name": "verticalAlign", + "name": "accessibleNameRef", "type": { - "text": "PopoverVerticalAlign", + "text": "string | undefined" + }, + "description": "Defines the IDs of the elements that label the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.1.0" + }, + { + "kind": "field", + "name": "accessibleRole", + "type": { + "text": "PopupAccessibleRole", "references": [ { - "name": "PopoverVerticalAlign", + "name": "PopupAccessibleRole", "package": "@ui5/webcomponents", - "module": "dist/types/PopoverVerticalAlign.js" + "module": "dist/types/PopupAccessibleRole.js" } ] }, - "default": "\"Center\"", - "description": "Determines the vertical alignment of the component.", + "default": "\"Dialog\"", + "description": "Allows setting a custom role.", "privacy": "public", - "inheritedFrom": { - "name": "Popover", - "module": "dist/Popover.js" - } + "_ui5since": "1.10.0" }, { "kind": "field", - "name": "modal", + "name": "allowTargetOverlap", "type": { "text": "boolean" }, "default": "false", - "description": "Defines whether the component should close when\nclicking/tapping outside the popover.\nIf enabled, it blocks any interaction with the background.", - "privacy": "public", - "inheritedFrom": { - "name": "Popover", - "module": "dist/Popover.js" - } + "description": "Determines if there is no enough space, the component can be placed\nover the target.", + "privacy": "public" }, { - "kind": "field", - "name": "hideArrow", - "type": { - "text": "boolean" + "kind": "method", + "name": "applyFocus", + "return": { + "type": { + "text": "Promise<void>" + }, + "description": "Promise that resolves when the focus is applied" }, - "default": "false", - "description": "Determines whether the component arrow is hidden.", - "privacy": "public", - "_ui5since": "1.0.0-rc.15", - "inheritedFrom": { - "name": "Popover", - "module": "dist/Popover.js" - } + "description": "Focuses the element denoted by `initialFocus`, if provided,\nor the first focusable element otherwise.", + "privacy": "public" }, { "kind": "field", - "name": "allowTargetOverlap", + "name": "headerText", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Determines if there is no enough space, the component can be placed\nover the target.", - "privacy": "public", - "inheritedFrom": { - "name": "Popover", - "module": "dist/Popover.js" - } + "description": "Defines the header text.\n\n**Note:** If `header` slot is provided, the `headerText` is ignored.", + "default": "undefined", + "privacy": "public" }, { "kind": "field", - "name": "resizable", + "name": "hideArrow", "type": { "text": "boolean" }, "default": "false", - "description": "Determines whether the component is resizable.\n**Note:** This property is effective only on desktop devices.", + "description": "Determines whether the component arrow is hidden.", "privacy": "public", - "_ui5since": "2.19.0", - "inheritedFrom": { - "name": "Popover", - "module": "dist/Popover.js" - } + "_ui5since": "1.0.0-rc.15" }, { "kind": "field", - "name": "opener", - "description": "Defines the ID or DOM Reference of the element at which the popover is shown.\nWhen using this attribute in a declarative way, you must only use the `id` (as a string) of the element at which you want to show the popover.\nYou can only set the `opener` attribute to a DOM Reference when using JavaScript.", - "privacy": "public", - "default": "undefined", + "name": "horizontalAlign", "type": { - "text": "HTMLElement | string | null | undefined" + "text": "PopoverHorizontalAlign", + "references": [ + { + "name": "PopoverHorizontalAlign", + "package": "@ui5/webcomponents", + "module": "dist/types/PopoverHorizontalAlign.js" + } + ] }, - "_ui5since": "1.2.0", - "inheritedFrom": { - "name": "Popover", - "module": "dist/Popover.js" - } + "default": "\"Center\"", + "description": "Determines the horizontal alignment of the component.", + "privacy": "public" }, { "kind": "field", @@ -19656,108 +17802,67 @@ }, "description": "Defines the ID of the HTML Element, which will get the initial focus.\n\n**Note:** If an element with `autofocus` attribute is added inside the component,\n`initialFocus` won't take effect.", "default": "undefined", - "privacy": "public", - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } + "privacy": "public" }, { "kind": "field", - "name": "preventFocusRestore", + "name": "modal", "type": { "text": "boolean" }, "default": "false", - "description": "Defines if the focus should be returned to the previously focused element,\nwhen the popup closes.", - "privacy": "public", - "_ui5since": "1.0.0-rc.8", - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } + "description": "Defines whether the component should close when\nclicking/tapping outside the popover.\nIf enabled, it blocks any interaction with the background.", + "privacy": "public" }, { "kind": "field", - "name": "accessibleName", + "name": "open", + "description": "Indicates if the element is open", + "privacy": "public", + "default": "false", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Defines the accessible name of the component.", - "default": "undefined", - "privacy": "public", - "_ui5since": "1.0.0-rc.15", - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } + "_ui5since": "1.2.0" }, { "kind": "field", - "name": "accessibleNameRef", + "name": "opener", + "description": "Defines the ID or DOM Reference of the element at which the popover is shown.\nWhen using this attribute in a declarative way, you must only use the `id` (as a string) of the element at which you want to show the popover.\nYou can only set the `opener` attribute to a DOM Reference when using JavaScript.", + "privacy": "public", + "default": "undefined", "type": { - "text": "string | undefined" + "text": "HTMLElement | string | null | undefined" }, - "description": "Defines the IDs of the elements that label the component.", - "default": "undefined", - "privacy": "public", - "_ui5since": "1.1.0", - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } + "_ui5since": "1.2.0" }, { "kind": "field", - "name": "accessibleRole", + "name": "placement", "type": { - "text": "PopupAccessibleRole", + "text": "PopoverPlacement", "references": [ { - "name": "PopupAccessibleRole", + "name": "PopoverPlacement", "package": "@ui5/webcomponents", - "module": "dist/types/PopupAccessibleRole.js" + "module": "dist/types/PopoverPlacement.js" } ] }, - "default": "\"Dialog\"", - "description": "Allows setting a custom role.", - "privacy": "public", - "_ui5since": "1.10.0", - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } - }, - { - "kind": "field", - "name": "accessibleDescription", - "type": { - "text": "string | undefined" - }, - "description": "Defines the accessible description of the component.", - "default": "undefined", - "privacy": "public", - "_ui5since": "2.11.0", - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } + "default": "\"End\"", + "description": "Determines on which side the component is placed at.", + "privacy": "public" }, { "kind": "field", - "name": "accessibleDescriptionRef", + "name": "preventFocusRestore", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Receives id(or many ids) of the elements that describe the component.", - "default": "undefined", + "default": "false", + "description": "Defines if the focus should be returned to the previously focused element,\nwhen the popup closes.", "privacy": "public", - "_ui5since": "2.11.0", - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } + "_ui5since": "1.0.0-rc.8" }, { "kind": "field", @@ -19768,156 +17873,99 @@ "default": "false", "description": "Indicates whether initial focus should be prevented.", "privacy": "public", - "_ui5since": "2.0.0", - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } + "_ui5since": "2.0.0" }, { "kind": "field", - "name": "open", - "description": "Indicates if the element is open", - "privacy": "public", - "default": "false", + "name": "resizable", "type": { "text": "boolean" }, - "_ui5since": "1.2.0", - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } + "default": "false", + "description": "Determines whether the component is resizable.\n**Note:** This property is effective only on desktop devices.", + "privacy": "public", + "_ui5since": "2.19.0" }, { - "kind": "method", - "name": "applyFocus", - "return": { - "type": { - "text": "Promise<void>" - }, - "description": "Promise that resolves when the focus is applied" + "kind": "field", + "name": "verticalAlign", + "type": { + "text": "PopoverVerticalAlign", + "references": [ + { + "name": "PopoverVerticalAlign", + "package": "@ui5/webcomponents", + "module": "dist/types/PopoverVerticalAlign.js" + } + ] }, - "description": "Focuses the element denoted by `initialFocus`, if provided,\nor the first focusable element otherwise.", - "privacy": "public", - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } + "default": "\"Center\"", + "description": "Determines the vertical alignment of the component.", + "privacy": "public" } ], - "superclass": { - "name": "Popover", - "package": "@ui5/webcomponents", - "module": "dist/Popover.js" - }, - "tagName": "ui5-responsive-popover", - "customElement": true, - "_ui5since": "1.0.0-rc.6", - "_ui5privacy": "public", - "slots": [ + "attributes": [ { - "name": "header", - "description": "Defines the header HTML Element.", - "_ui5type": { - "text": "Array<HTMLElement>" - }, - "_ui5privacy": "public", - "inheritedFrom": { - "name": "Popover", - "module": "dist/Popover.js" + "description": "Defines the accessible description of the component.", + "name": "accessible-description", + "default": "undefined", + "fieldName": "accessibleDescription", + "type": { + "text": "string | undefined" } }, { - "name": "footer", - "description": "Defines the footer HTML Element.", - "_ui5type": { - "text": "Array<HTMLElement>" - }, - "_ui5privacy": "public", - "inheritedFrom": { - "name": "Popover", - "module": "dist/Popover.js" + "description": "Receives id(or many ids) of the elements that describe the component.", + "name": "accessible-description-ref", + "default": "undefined", + "fieldName": "accessibleDescriptionRef", + "type": { + "text": "string | undefined" } }, { - "name": "default", - "description": "Defines the content of the Popup.", - "_ui5propertyName": "content", - "_ui5type": { - "text": "Array<HTMLElement>" - }, - "_ui5privacy": "public", - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" + "description": "Defines the accessible name of the component.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", + "type": { + "text": "string | undefined" } - } - ], - "attributes": [ + }, { - "description": "Defines the header text.\n\n**Note:** If `header` slot is provided, the `headerText` is ignored.", - "name": "header-text", + "description": "Defines the IDs of the elements that label the component.", + "name": "accessible-name-ref", "default": "undefined", - "fieldName": "headerText", + "fieldName": "accessibleNameRef", "type": { "text": "string | undefined" - }, - "inheritedFrom": { - "name": "Popover", - "module": "dist/Popover.js" } }, { - "description": "Determines on which side the component is placed at.", - "name": "placement", - "default": "\"End\"", - "fieldName": "placement", + "description": "Allows setting a custom role.", + "name": "accessible-role", + "default": "\"Dialog\"", + "fieldName": "accessibleRole", "type": { - "text": "\"Top\" | \"Bottom\" | \"Start\" | \"End\"" - }, - "inheritedFrom": { - "name": "Popover", - "module": "dist/Popover.js" + "text": "\"None\" | \"Dialog\" | \"AlertDialog\"" } }, { - "description": "Determines the horizontal alignment of the component.", - "name": "horizontal-align", - "default": "\"Center\"", - "fieldName": "horizontalAlign", + "description": "Determines if there is no enough space, the component can be placed\nover the target.", + "name": "allow-target-overlap", + "default": "false", + "fieldName": "allowTargetOverlap", "type": { - "text": "\"Start\" | \"End\" | \"Center\" | \"Stretch\"" - }, - "inheritedFrom": { - "name": "Popover", - "module": "dist/Popover.js" + "text": "boolean" } }, { - "description": "Determines the vertical alignment of the component.", - "name": "vertical-align", - "default": "\"Center\"", - "fieldName": "verticalAlign", - "type": { - "text": "\"Top\" | \"Bottom\" | \"Center\" | \"Stretch\"" - }, - "inheritedFrom": { - "name": "Popover", - "module": "dist/Popover.js" - } - }, - { - "description": "Defines whether the component should close when\nclicking/tapping outside the popover.\nIf enabled, it blocks any interaction with the background.", - "name": "modal", - "default": "false", - "fieldName": "modal", + "description": "Defines the header text.\n\n**Note:** If `header` slot is provided, the `headerText` is ignored.", + "name": "header-text", + "default": "undefined", + "fieldName": "headerText", "type": { - "text": "boolean" - }, - "inheritedFrom": { - "name": "Popover", - "module": "dist/Popover.js" + "text": "string | undefined" } }, { @@ -19927,49 +17975,15 @@ "fieldName": "hideArrow", "type": { "text": "boolean" - }, - "inheritedFrom": { - "name": "Popover", - "module": "dist/Popover.js" - } - }, - { - "description": "Determines if there is no enough space, the component can be placed\nover the target.", - "name": "allow-target-overlap", - "default": "false", - "fieldName": "allowTargetOverlap", - "type": { - "text": "boolean" - }, - "inheritedFrom": { - "name": "Popover", - "module": "dist/Popover.js" - } - }, - { - "description": "Determines whether the component is resizable.\n**Note:** This property is effective only on desktop devices.", - "name": "resizable", - "default": "false", - "fieldName": "resizable", - "type": { - "text": "boolean" - }, - "inheritedFrom": { - "name": "Popover", - "module": "dist/Popover.js" } }, { - "description": "Defines the ID or DOM Reference of the element at which the popover is shown.\nWhen using this attribute in a declarative way, you must only use the `id` (as a string) of the element at which you want to show the popover.\nYou can only set the `opener` attribute to a DOM Reference when using JavaScript.", - "name": "opener", - "default": "undefined", - "fieldName": "opener", + "description": "Determines the horizontal alignment of the component.", + "name": "horizontal-align", + "default": "\"Center\"", + "fieldName": "horizontalAlign", "type": { - "text": "any" - }, - "inheritedFrom": { - "name": "Popover", - "module": "dist/Popover.js" + "text": "\"Start\" | \"End\" | \"Center\" | \"Stretch\"" } }, { @@ -19979,88 +17993,51 @@ "fieldName": "initialFocus", "type": { "text": "string | undefined" - }, - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" } }, { - "description": "Defines if the focus should be returned to the previously focused element,\nwhen the popup closes.", - "name": "prevent-focus-restore", + "description": "Defines whether the component should close when\nclicking/tapping outside the popover.\nIf enabled, it blocks any interaction with the background.", + "name": "modal", "default": "false", - "fieldName": "preventFocusRestore", + "fieldName": "modal", "type": { "text": "boolean" - }, - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" } }, { - "description": "Defines the accessible name of the component.", - "name": "accessible-name", - "default": "undefined", - "fieldName": "accessibleName", + "description": "Indicates if the element is open", + "name": "open", + "default": "false", + "fieldName": "open", "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" + "text": "any" } }, { - "description": "Defines the IDs of the elements that label the component.", - "name": "accessible-name-ref", + "description": "Defines the ID or DOM Reference of the element at which the popover is shown.\nWhen using this attribute in a declarative way, you must only use the `id` (as a string) of the element at which you want to show the popover.\nYou can only set the `opener` attribute to a DOM Reference when using JavaScript.", + "name": "opener", "default": "undefined", - "fieldName": "accessibleNameRef", - "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } - }, - { - "description": "Allows setting a custom role.", - "name": "accessible-role", - "default": "\"Dialog\"", - "fieldName": "accessibleRole", + "fieldName": "opener", "type": { - "text": "\"None\" | \"Dialog\" | \"AlertDialog\"" - }, - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" + "text": "any" } }, { - "description": "Defines the accessible description of the component.", - "name": "accessible-description", - "default": "undefined", - "fieldName": "accessibleDescription", + "description": "Determines on which side the component is placed at.", + "name": "placement", + "default": "\"End\"", + "fieldName": "placement", "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" + "text": "\"Top\" | \"Bottom\" | \"Start\" | \"End\"" } }, { - "description": "Receives id(or many ids) of the elements that describe the component.", - "name": "accessible-description-ref", - "default": "undefined", - "fieldName": "accessibleDescriptionRef", + "description": "Defines if the focus should be returned to the previously focused element,\nwhen the popup closes.", + "name": "prevent-focus-restore", + "default": "false", + "fieldName": "preventFocusRestore", "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" + "text": "boolean" } }, { @@ -20070,57 +18047,37 @@ "fieldName": "preventInitialFocus", "type": { "text": "boolean" - }, - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" } }, { - "description": "Indicates if the element is open", - "name": "open", + "description": "Determines whether the component is resizable.\n**Note:** This property is effective only on desktop devices.", + "name": "resizable", "default": "false", - "fieldName": "open", - "type": { - "text": "any" - }, - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } - } - ], - "events": [ - { - "name": "before-open", - "_ui5privacy": "public", + "fieldName": "resizable", "type": { - "text": "CustomEvent" - }, - "description": "Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": false, - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" + "text": "boolean" } }, { - "name": "open", - "_ui5privacy": "public", + "description": "Determines the vertical alignment of the component.", + "name": "vertical-align", + "default": "\"Center\"", + "fieldName": "verticalAlign", "type": { - "text": "CustomEvent" - }, - "description": "Fired after the component is opened.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": false, - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" + "text": "\"Top\" | \"Bottom\" | \"Center\" | \"Stretch\"" } - }, + } + ], + "superclass": { + "name": "Popup", + "package": "@ui5/webcomponents", + "module": "dist/Popup.js" + }, + "tagName": "ui5-popover", + "customElement": true, + "_ui5since": "1.0.0-rc.6", + "_ui5privacy": "public", + "events": [ { "name": "before-close", "_ui5privacy": "public", @@ -20147,11 +18104,18 @@ "_ui5privacy": "public", "description": "Indicates that `ESC` key has triggered the event." } - ], - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } + ] + }, + { + "name": "before-open", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": false }, { "name": "close", @@ -20162,11 +18126,18 @@ "description": "Fired after the component is closed.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, - "_ui5Bubbles": false, - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } + "_ui5Bubbles": false + }, + { + "name": "open", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired after the component is opened.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": false } ] } @@ -20176,48 +18147,50 @@ "kind": "js", "name": "default", "declaration": { - "name": "ResponsivePopover", - "module": "dist/ResponsivePopover.js" + "name": "Popover", + "module": "dist/Popover.js" } }, { "kind": "custom-element-definition", - "name": "ui5-responsive-popover", + "name": "ui5-popover", "declaration": { - "name": "ResponsivePopover", - "module": "dist/ResponsivePopover.js" + "name": "Popover", + "module": "dist/Popover.js" } } ] }, { "kind": "javascript-module", - "path": "dist/SegmentedButton.js", - "declarations": [ + "path": "dist/PopoverResize.js", + "declarations": [], + "exports": [ { - "kind": "interface", - "name": "ISegmentedButtonItem", - "description": "Interface for components that may be slotted inside `ui5-segmented-button` as items", - "_ui5privacy": "public" - }, + "kind": "js", + "name": "default", + "declaration": { + "name": "PopoverResize", + "module": "dist/PopoverResize.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/Popup.js", + "declarations": [ { "kind": "class", - "description": "### Overview\n\nThe `ui5-segmented-button` shows a group of items. When the user clicks or taps\none of the items, it stays in a pressed state. It automatically resizes the items\nto fit proportionally within the component. When no width is set, the component uses the available width.\n\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/SegmentedButton.js\";`", - "name": "SegmentedButton", + "description": "### Overview\nBase class for all popup Web Components.\n\nIf you need to create your own popup-like custom UI5 Web Components.\n\n1. The Popup class handles modality:\n - The \"isModal\" getter can be overridden by derivatives to provide their own conditions when they are modal or not\n - Derivatives may call the \"blockPageScrolling\" and \"unblockPageScrolling\" static methods to temporarily remove scrollbars on the html element\n - Derivatives may call the \"openPopup\" and \"closePopup\" methods which handle focus, manage the popup registry and for modal popups, manage the blocking layer\n\n 2. Provides blocking layer (relevant for modal popups only):\n - Controlled by the \"open\" and \"close\" methods\n\n3. The Popup class \"traps\" focus:\n - Derivatives may call the \"applyInitialFocus\" method (usually when opening, to transfer focus inside the popup)\n\n4. The template of this component exposes two inline partials you can override in derivatives:\n - beforeContent (upper part of the box, useful for header/title/close button)\n - afterContent (lower part, useful for footer/action buttons)", + "name": "Popup", "slots": [ { "name": "default", - "description": "Defines the items of `ui5-segmented-button`.\n\n**Note:** Multiple items are allowed.\n\n**Note:** Use the `ui5-segmented-button-item` for the intended design.", - "_ui5propertyName": "items", + "description": "Defines the content of the Popup.", + "_ui5propertyName": "content", "_ui5type": { - "text": "Array<ISegmentedButtonItem>", - "references": [ - { - "name": "ISegmentedButtonItem", - "package": "@ui5/webcomponents", - "module": "dist/SegmentedButton.js" - } - ] + "text": "Array<HTMLElement>" }, "_ui5privacy": "public" } @@ -20225,137 +18198,206 @@ "members": [ { "kind": "field", - "name": "accessibleName", + "name": "accessibleDescription", "type": { "text": "string | undefined" }, - "description": "Defines the accessible ARIA name of the component.", + "description": "Defines the accessible description of the component.", "default": "undefined", "privacy": "public", - "_ui5since": "1.0.3" + "_ui5since": "2.11.0" }, { "kind": "field", - "name": "accessibleNameRef", + "name": "accessibleDescriptionRef", "type": { "text": "string | undefined" }, - "description": "Defines the IDs of the HTML Elements that label the component.", + "description": "Receives id(or many ids) of the elements that describe the component.", "default": "undefined", "privacy": "public", - "_ui5since": "2.15.0" + "_ui5since": "2.11.0" }, { "kind": "field", - "name": "accessibleDescription", + "name": "accessibleName", "type": { "text": "string | undefined" }, - "description": "Defines the accessible description of the component.", + "description": "Defines the accessible name of the component.", "default": "undefined", "privacy": "public", - "_ui5since": "2.15.0" + "_ui5since": "1.0.0-rc.15" }, { "kind": "field", - "name": "accessibleDescriptionRef", + "name": "accessibleNameRef", "type": { "text": "string | undefined" }, - "description": "Defines the IDs of the HTML Elements that describe the component.", + "description": "Defines the IDs of the elements that label the component.", "default": "undefined", "privacy": "public", - "_ui5since": "2.15.0" + "_ui5since": "1.1.0" }, { "kind": "field", - "name": "selectionMode", + "name": "accessibleRole", "type": { - "text": "SegmentedButtonSelectionMode", + "text": "PopupAccessibleRole", "references": [ { - "name": "SegmentedButtonSelectionMode", + "name": "PopupAccessibleRole", "package": "@ui5/webcomponents", - "module": "dist/types/SegmentedButtonSelectionMode.js" + "module": "dist/types/PopupAccessibleRole.js" } ] }, - "default": "\"Single\"", - "description": "Defines the component selection mode.", + "default": "\"Dialog\"", + "description": "Allows setting a custom role.", "privacy": "public", - "_ui5since": "1.14.0" + "_ui5since": "1.10.0" + }, + { + "kind": "method", + "name": "applyFocus", + "return": { + "type": { + "text": "Promise<void>" + }, + "description": "Promise that resolves when the focus is applied" + }, + "description": "Focuses the element denoted by `initialFocus`, if provided,\nor the first focusable element otherwise.", + "privacy": "public" }, { "kind": "field", - "name": "itemsFitContent", + "name": "initialFocus", + "type": { + "text": "string | undefined" + }, + "description": "Defines the ID of the HTML Element, which will get the initial focus.\n\n**Note:** If an element with `autofocus` attribute is added inside the component,\n`initialFocus` won't take effect.", + "default": "undefined", + "privacy": "public" + }, + { + "kind": "field", + "name": "open", + "description": "Indicates if the element is open", + "privacy": "public", + "default": "false", + "type": { + "text": "boolean" + }, + "_ui5since": "1.2.0" + }, + { + "kind": "field", + "name": "preventFocusRestore", "type": { "text": "boolean" }, "default": "false", - "description": "Determines whether the segmented button items should be sized to fit their content.\n\nIf set to `true`, each item will be sized to fit its content, with any extra space distributed after the last item.\nIf set to `false` (the default), all items will be equally sized to fill the available space.", + "description": "Defines if the focus should be returned to the previously focused element,\nwhen the popup closes.", "privacy": "public", - "_ui5since": "2.16.0" + "_ui5since": "1.0.0-rc.8" }, { "kind": "field", - "name": "selectedItems", + "name": "preventInitialFocus", "type": { - "text": "Array<ISegmentedButtonItem>", - "references": [ - { - "name": "ISegmentedButtonItem", - "package": "@ui5/webcomponents", - "module": "dist/SegmentedButton.js" - } - ] + "text": "boolean" }, - "description": "Returns an array of the currently selected items.", + "default": "false", + "description": "Indicates whether initial focus should be prevented.", "privacy": "public", - "default": "[]", - "readonly": true, - "_ui5since": "1.14.0" + "_ui5since": "2.0.0" } ], "events": [ { - "name": "selection-change", + "name": "before-close", "_ui5privacy": "public", "type": { - "text": "CustomEvent<SegmentedButtonSelectionChangeEventDetail>", + "text": "CustomEvent<PopupBeforeCloseEventDetail>", "references": [ { - "name": "SegmentedButtonSelectionChangeEventDetail", + "name": "PopupBeforeCloseEventDetail", "package": "@ui5/webcomponents", - "module": "dist/SegmentedButton.js" + "module": "dist/Popup.js" } ] }, - "description": "Fired when the selected item changes.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, + "description": "Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": false, "_ui5parameters": [ { "type": { - "text": "Array<ISegmentedButtonItem>", - "references": [ - { - "name": "ISegmentedButtonItem", - "package": "@ui5/webcomponents", - "module": "dist/SegmentedButton.js" - } - ] + "text": "boolean" }, - "name": "selectedItems", + "name": "escPressed", "_ui5privacy": "public", - "description": "an array of selected items. Since: 1.14.0" + "description": "Indicates that `ESC` key has triggered the event." } ] + }, + { + "name": "before-open", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": false + }, + { + "name": "close", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired after the component is closed.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": false + }, + { + "name": "open", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired after the component is opened.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": false } ], "attributes": [ { - "description": "Defines the accessible ARIA name of the component.", + "description": "Defines the accessible description of the component.", + "name": "accessible-description", + "default": "undefined", + "fieldName": "accessibleDescription", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Receives id(or many ids) of the elements that describe the component.", + "name": "accessible-description-ref", + "default": "undefined", + "fieldName": "accessibleDescriptionRef", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the accessible name of the component.", "name": "accessible-name", "default": "undefined", "fieldName": "accessibleName", @@ -20364,7 +18406,7 @@ } }, { - "description": "Defines the IDs of the HTML Elements that label the component.", + "description": "Defines the IDs of the elements that label the component.", "name": "accessible-name-ref", "default": "undefined", "fieldName": "accessibleNameRef", @@ -20373,48 +18415,48 @@ } }, { - "description": "Defines the accessible description of the component.", - "name": "accessible-description", - "default": "undefined", - "fieldName": "accessibleDescription", + "description": "Allows setting a custom role.", + "name": "accessible-role", + "default": "\"Dialog\"", + "fieldName": "accessibleRole", "type": { - "text": "string | undefined" + "text": "\"None\" | \"Dialog\" | \"AlertDialog\"" } }, { - "description": "Defines the IDs of the HTML Elements that describe the component.", - "name": "accessible-description-ref", + "description": "Defines the ID of the HTML Element, which will get the initial focus.\n\n**Note:** If an element with `autofocus` attribute is added inside the component,\n`initialFocus` won't take effect.", + "name": "initial-focus", "default": "undefined", - "fieldName": "accessibleDescriptionRef", + "fieldName": "initialFocus", "type": { "text": "string | undefined" } }, { - "description": "Defines the component selection mode.", - "name": "selection-mode", - "default": "\"Single\"", - "fieldName": "selectionMode", + "description": "Indicates if the element is open", + "name": "open", + "default": "false", + "fieldName": "open", "type": { - "text": "\"Single\" | \"Multiple\"" + "text": "any" } }, { - "description": "Determines whether the segmented button items should be sized to fit their content.\n\nIf set to `true`, each item will be sized to fit its content, with any extra space distributed after the last item.\nIf set to `false` (the default), all items will be equally sized to fill the available space.", - "name": "items-fit-content", + "description": "Defines if the focus should be returned to the previously focused element,\nwhen the popup closes.", + "name": "prevent-focus-restore", "default": "false", - "fieldName": "itemsFitContent", + "fieldName": "preventFocusRestore", "type": { "text": "boolean" } }, { - "description": "Returns an array of the currently selected items.", - "name": "selected-items", - "default": "[]", - "fieldName": "selectedItems", + "description": "Indicates whether initial focus should be prevented.", + "name": "prevent-initial-focus", + "default": "false", + "fieldName": "preventInitialFocus", "type": { - "text": "any" + "text": "boolean" } } ], @@ -20423,9 +18465,7 @@ "package": "@ui5/webcomponents-base", "module": "dist/UI5Element.js" }, - "tagName": "ui5-segmented-button", "customElement": true, - "_ui5since": "1.0.0-rc.6", "_ui5privacy": "public" } ], @@ -20434,154 +18474,91 @@ "kind": "js", "name": "default", "declaration": { - "name": "SegmentedButton", - "module": "dist/SegmentedButton.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-segmented-button", - "declaration": { - "name": "SegmentedButton", - "module": "dist/SegmentedButton.js" + "name": "Popup", + "module": "dist/Popup.js" } } ] }, { "kind": "javascript-module", - "path": "dist/SegmentedButtonItem.js", + "path": "dist/ProgressIndicator.js", "declarations": [ { "kind": "class", - "description": "### Overview\n\nUsers can use the `ui5-segmented-button-item` as part of a `ui5-segmented-button`.\n\nClicking or tapping on a `ui5-segmented-button-item` changes its state to `selected`.\nThe item returns to its initial state when the user clicks or taps on it again.\nBy applying additional custom CSS-styling classes, apps can give a different style to any\n`ui5-segmented-button-item`.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/SegmentedButtonItem.js\";`", - "name": "SegmentedButtonItem", - "slots": [ + "description": "### Overview\nShows the progress of a process in a graphical way. To indicate the progress,\nthe inside of the component is filled with a color.\n\n### Responsive Behavior\nYou can change the size of the Progress Indicator by changing its `width` or `height` CSS properties.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/ProgressIndicator.js\";`", + "name": "ProgressIndicator", + "cssParts": [ { - "name": "default", - "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<Node>" - }, - "_ui5privacy": "public" + "description": "Used to style the main bar of the `ui5-progress-indicator`", + "name": "bar" + }, + { + "description": "Used to style the remaining bar of the `ui5-progress-indicator`", + "name": "remaining-bar" } ], "members": [ { "kind": "field", - "name": "disabled", + "name": "accessibleName", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Defines whether the component is disabled.\nA disabled component can't be selected or\nfocused, and it is not in the tab chain.", - "privacy": "public" + "description": "Defines the accessible ARIA name of the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.16.0" }, { "kind": "field", - "name": "selected", + "name": "displayValue", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Determines whether the component is displayed as selected.", + "description": "Specifies the text value to be displayed in the bar.\n\n**Note:**\n\n- If there is no value provided or the value is empty, the default percentage value is shown.\n- If `hideValue` property is `true` both the `displayValue` and `value` property values are not shown.", + "default": "undefined", "privacy": "public" }, { "kind": "field", - "name": "tooltip", - "type": { - "text": "string | undefined" - }, - "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": "undefined", - "privacy": "public", - "_ui5since": "1.2.0" - }, - { - "kind": "field", - "name": "accessibleName", - "type": { - "text": "string | undefined" - }, - "description": "Defines the accessible ARIA name of the component.", - "default": "undefined", - "privacy": "public", - "_ui5since": "1.0.0-rc.15" - }, - { - "kind": "field", - "name": "accessibleNameRef", - "type": { - "text": "string | undefined" - }, - "description": "Receives id(or many ids) of the elements that label the component.", - "default": "undefined", - "privacy": "public", - "_ui5since": "1.1.0" - }, - { - "kind": "field", - "name": "accessibleDescription", + "name": "hideValue", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Defines the accessible description of the component.", - "default": "undefined", - "privacy": "public", - "_ui5since": "2.15.0" + "default": "false", + "description": "Defines whether the component value is shown.", + "privacy": "public" }, { "kind": "field", - "name": "accessibleDescriptionRef", + "name": "value", "type": { - "text": "string | undefined" + "text": "number" }, - "description": "Defines the IDs of the HTML Elements that describe the component.", - "default": "undefined", - "privacy": "public", - "_ui5since": "2.15.0" + "default": "0", + "description": "Specifies the numerical value in percent for the length of the component.\n\n**Note:**\nIf a value greater than 100 is provided, the percentValue is set to 100. In other cases of invalid value, percentValue is set to its default of 0.", + "privacy": "public" }, { "kind": "field", - "name": "icon", + "name": "valueState", "type": { - "text": "string | undefined" + "text": "ValueState", + "references": [ + { + "name": "ValueState", + "package": "@ui5/webcomponents-base", + "module": "dist/types/ValueState.js" + } + ] }, - "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": "undefined", + "default": "\"None\"", + "description": "Defines the value state of the component.", "privacy": "public" } ], "attributes": [ - { - "description": "Defines whether the component is disabled.\nA disabled component can't be selected or\nfocused, and it is not in the tab chain.", - "name": "disabled", - "default": "false", - "fieldName": "disabled", - "type": { - "text": "boolean" - } - }, - { - "description": "Determines whether the component is displayed as selected.", - "name": "selected", - "default": "false", - "fieldName": "selected", - "type": { - "text": "boolean" - } - }, - { - "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.", - "name": "tooltip", - "default": "undefined", - "fieldName": "tooltip", - "type": { - "text": "string | undefined" - } - }, { "description": "Defines the accessible ARIA name of the component.", "name": "accessible-name", @@ -20592,39 +18569,39 @@ } }, { - "description": "Receives id(or many ids) of the elements that label the component.", - "name": "accessible-name-ref", + "description": "Specifies the text value to be displayed in the bar.\n\n**Note:**\n\n- If there is no value provided or the value is empty, the default percentage value is shown.\n- If `hideValue` property is `true` both the `displayValue` and `value` property values are not shown.", + "name": "display-value", "default": "undefined", - "fieldName": "accessibleNameRef", + "fieldName": "displayValue", "type": { "text": "string | undefined" } }, { - "description": "Defines the accessible description of the component.", - "name": "accessible-description", - "default": "undefined", - "fieldName": "accessibleDescription", + "description": "Defines whether the component value is shown.", + "name": "hide-value", + "default": "false", + "fieldName": "hideValue", "type": { - "text": "string | undefined" + "text": "boolean" } }, { - "description": "Defines the IDs of the HTML Elements that describe the component.", - "name": "accessible-description-ref", - "default": "undefined", - "fieldName": "accessibleDescriptionRef", + "description": "Specifies the numerical value in percent for the length of the component.\n\n**Note:**\nIf a value greater than 100 is provided, the percentValue is set to 100. In other cases of invalid value, percentValue is set to its default of 0.", + "name": "value", + "default": "0", + "fieldName": "value", "type": { - "text": "string | undefined" + "text": "number" } }, { - "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).", - "name": "icon", - "default": "undefined", - "fieldName": "icon", + "description": "Defines the value state of the component.", + "name": "value-state", + "default": "\"None\"", + "fieldName": "valueState", "type": { - "text": "string | undefined" + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" } } ], @@ -20633,21 +18610,10 @@ "package": "@ui5/webcomponents-base", "module": "dist/UI5Element.js" }, - "tagName": "ui5-segmented-button-item", + "tagName": "ui5-progress-indicator", "customElement": true, - "_ui5privacy": "public", - "_ui5implements": [ - { - "name": "ISegmentedButtonItem", - "package": "@ui5/webcomponents", - "module": "dist/SegmentedButton.js" - }, - { - "name": "IButton", - "package": "@ui5/webcomponents", - "module": "dist/Button.js" - } - ] + "_ui5since": "1.0.0-rc.8", + "_ui5privacy": "public" } ], "exports": [ @@ -20655,238 +18621,168 @@ "kind": "js", "name": "default", "declaration": { - "name": "SegmentedButtonItem", - "module": "dist/SegmentedButtonItem.js" + "name": "ProgressIndicator", + "module": "dist/ProgressIndicator.js" } }, { "kind": "custom-element-definition", - "name": "ui5-segmented-button-item", + "name": "ui5-progress-indicator", "declaration": { - "name": "SegmentedButtonItem", - "module": "dist/SegmentedButtonItem.js" + "name": "ProgressIndicator", + "module": "dist/ProgressIndicator.js" } } ] }, { "kind": "javascript-module", - "path": "dist/Select.js", + "path": "dist/RadioButton.js", "declarations": [ - { - "kind": "interface", - "name": "IOption", - "description": "Interface for components that may be slotted inside `ui5-select` as options", - "_ui5privacy": "public" - }, { "kind": "class", - "description": "### Overview\n\nThe `ui5-select` component is used to create a drop-down list.\n\n### Usage\n\nThere are two main usages of the `ui5-select>`.\n\n- With Option (`ui5-option`) web component:\n\nThe available options of the Select are defined by using the Option component.\nThe Option comes with predefined design and layout, including `icon`, `text` and `additional-text`.\n\n- With OptionCustom (`ui5-option-custom`) web component.\n\nOptions with custom content are defined by using the OptionCustom component.\nThe OptionCustom component comes with no predefined layout and it expects consumers to define it.\n\n### Selection\n\nThe options can be selected via user interaction (click or with the use of the Space and Enter keys)\nand programmatically - the Select component supports two distinct selection APIs, though mixing them is not supported:\n- The \"value\" property of the Select component\n- The \"selected\" property on individual options\n\n**Note:** If the \"value\" property is set but does not match any option,\nno option will be selected and the Select component will be displayed as empty.\n\n**Note:** when both \"value\" and \"selected\" are both used (although discouraged),\nthe \"value\" property will take precedence.\n\n### Keyboard Handling\n\nThe `ui5-select` provides advanced keyboard handling.\n\n- [F4] / [Alt] + [Up] / [Alt] + [Down] / [Space] or [Enter] - Opens/closes the drop-down.\n- [Up] or [Down] - If the drop-down is closed - changes selection to the next or the previous option. If the drop-down is opened - moves focus to the next or the previous option.\n- [Space], [Enter] - If the drop-down is opened - selects the focused option.\n- [Escape] - Closes the drop-down without changing the selection.\n- [Home] - Navigates to first option\n- [End] - Navigates to the last option\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Select\";`\n\n`import \"@ui5/webcomponents/dist/Option\";`\n`import \"@ui5/webcomponents/dist/OptionCustom\";`", - "name": "Select", + "description": "### Overview\n\nThe `ui5-radio-button` component enables users to select a single option from a set of options.\nWhen a `ui5-radio-button` is selected by the user, the\n`change` event is fired.\nWhen a `ui5-radio-button` that is within a group is selected, the one\nthat was previously selected gets automatically deselected. You can group radio buttons by using the `name` property.\n\n**Note:** If `ui5-radio-button` is not part of a group, it can be selected once, but can not be deselected back.\n\n### Keyboard Handling\n\nOnce the `ui5-radio-button` is on focus, it might be selected by pressing the Space and Enter keys.\n\nThe Arrow Down/Arrow Up and Arrow Left/Arrow Right keys can be used to change selection between next/previous radio buttons in one group,\nwhile TAB and SHIFT + TAB can be used to enter or leave the radio button group.\n\n**Note:** On entering radio button group, the focus goes to the currently selected radio button.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/RadioButton\";`", + "name": "RadioButton", "cssParts": [ { - "description": "Used to style the popover element", - "name": "popover" - } - ], - "slots": [ - { - "name": "default", - "description": "Defines the component options.\n\n**Note:** Only one selected option is allowed.\nIf more than one option is defined as selected, the last one would be considered as the selected one.\n\n**Note:** Use the `ui5-option` component to define the desired options.", - "_ui5propertyName": "options", - "_ui5type": { - "text": "Array<IOption>", - "references": [ - { - "name": "IOption", - "package": "@ui5/webcomponents", - "module": "dist/Select.js" - } - ] - }, - "_ui5privacy": "public" - }, - { - "name": "valueStateMessage", - "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 component is in `Information`, `Critical` or `Negative` value state.\n\n**Note:** If the component has `suggestionItems`,\nthe `valueStateMessage` would be displayed as part of the same popover, if used on desktop, or dialog - on phone.", - "_ui5type": { - "text": "Array<HTMLElement>" - }, - "_ui5privacy": "public" + "description": "Used to style the inner ring of the `ui5-radio-button`.", + "name": "inner-ring" }, { - "name": "label", - "description": "Defines the HTML element that will be displayed in the component input part,\nrepresenting the selected option.\n\n**Note:** If not specified and `ui5-option-custom` is used,\neither the option's `display-text` or its textContent will be displayed.\n\n**Note:** If not specified and `ui5-option` is used,\nthe option's textContent will be displayed.", - "_ui5since": "1.17.0", - "_ui5type": { - "text": "Array<HTMLElement>" - }, - "_ui5privacy": "public" + "description": "Used to style the outer ring of the `ui5-radio-button`.", + "name": "outer-ring" } ], "members": [ { "kind": "field", - "name": "disabled", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is noninteractive.", - "privacy": "public" - }, - { - "kind": "field", - "name": "name", + "name": "accessibleName", "type": { "text": "string | undefined" }, - "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", + "description": "Defines the accessible ARIA name of the component.", "default": "undefined", - "privacy": "public" + "privacy": "public", + "_ui5since": "1.6.0" }, { "kind": "field", - "name": "valueState", + "name": "accessibleNameRef", "type": { - "text": "ValueState", - "references": [ - { - "name": "ValueState", - "package": "@ui5/webcomponents-base", - "module": "dist/types/ValueState.js" - } - ] + "text": "string | undefined" }, - "default": "\"None\"", - "description": "Defines the value state of the component.", - "privacy": "public" + "description": "Defines the IDs of the elements that label the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.1.0" }, { "kind": "field", - "name": "required", + "name": "checked", "type": { "text": "boolean" }, "default": "false", - "description": "Defines whether the component is required.", + "description": "Defines whether the component is checked or not.\n\n**Note:** The property value can be changed with user interaction,\neither by clicking/tapping on the component,\nor by using the Space or Enter key.\n\n**Note:** Only enabled radio buttons can be checked.\nRead-only radio buttons are not selectable, and therefore are always unchecked.", "privacy": "public", - "_ui5since": "1.0.0-rc.9" + "_ui5since": "1.0.0-rc.15", + "_ui5formProperty": true, + "_ui5formEvents": "change" }, { "kind": "field", - "name": "readonly", + "name": "disabled", "type": { "text": "boolean" }, "default": "false", - "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.", - "privacy": "public", - "_ui5since": "1.21.0" + "description": "Defines whether the component is disabled.\n\n**Note:** A disabled component is completely noninteractive.", + "privacy": "public" }, { "kind": "field", - "name": "accessibleName", + "name": "name", "type": { "text": "string | undefined" }, - "description": "Defines the accessible ARIA name of the component.", - "privacy": "public", + "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\nRadio buttons with the same `name` will form a radio button group.\n\n**Note:** By this name the component will be identified upon submission in an HTML form.\n\n**Note:** The selection can be changed with `ARROW_UP/DOWN` and `ARROW_LEFT/RIGHT` keys between radio buttons in same group.\n\n**Note:** Only one radio button can be selected per group.", "default": "undefined", - "_ui5since": "1.0.0-rc.9" + "privacy": "public" }, { "kind": "field", - "name": "accessibleNameRef", + "name": "readonly", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Receives id(or many ids) of the elements that label the select.", - "default": "undefined", - "privacy": "public", - "_ui5since": "1.0.0-rc.15" + "default": "false", + "description": "Defines whether the component is read-only.\n\n**Note:** A read-only component isn't editable or selectable.\nHowever, because it's focusable, it still provides visual feedback upon user interaction.", + "privacy": "public" }, { "kind": "field", - "name": "accessibleDescription", + "name": "required", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Defines the accessible description of the component.", - "default": "undefined", + "default": "false", + "description": "Defines whether the component is required.", "privacy": "public", - "_ui5since": "2.14.0" + "_ui5since": "1.9.0" }, { "kind": "field", - "name": "accessibleDescriptionRef", + "name": "text", "type": { "text": "string | undefined" }, - "description": "Receives id(or many ids) of the elements that describe the select.", + "description": "Defines the text of the component.", "default": "undefined", - "privacy": "public", - "_ui5since": "2.14.0" + "privacy": "public" }, { "kind": "field", - "name": "tooltip", + "name": "value", "type": { - "text": "string | undefined" + "text": "string" }, - "description": "Defines the tooltip of the select.", - "default": "undefined", - "privacy": "public", - "_ui5since": "2.8.0" + "default": "\"\"", + "description": "Defines the form value of the component.\nWhen a form with a radio button group is submitted, the group's value\nwill be the value of the currently selected radio button.", + "privacy": "public" }, { "kind": "field", - "name": "textSeparator", + "name": "valueState", "type": { - "text": "SelectTextSeparator", + "text": "ValueState", "references": [ { - "name": "SelectTextSeparator", - "package": "@ui5/webcomponents", - "module": "dist/types/SelectTextSeparator.js" + "name": "ValueState", + "package": "@ui5/webcomponents-base", + "module": "dist/types/ValueState.js" } ] }, - "default": "\"Dash\"", - "description": "Defines the separator type for the two columns layout when Select is in read-only mode.", - "privacy": "public", - "_ui5since": "2.16.0" - }, - { - "kind": "field", - "name": "value", - "description": "Defines the value of the component:\n\n- when get - returns the value of the component or the value/text content of the selected option.\n- when set - selects the option with matching `value` property or text content.\n\n**Note:** Use either the Select's value or the Options' selected property.\nMixed usage could result in unexpected behavior.\n\n**Note:** If the given value does not match any existing option,\nno option will be selected and the Select component will be displayed as empty.", - "privacy": "public", - "default": "\"\"", - "type": { - "text": "string" - }, - "_ui5since": "1.20.0", - "_ui5formProperty": true, - "_ui5formEvents": "change,liveChange" + "default": "\"None\"", + "description": "Defines the value state of the component.", + "privacy": "public" }, { "kind": "field", - "name": "selectedOption", + "name": "wrappingType", "type": { - "text": "IOption | undefined", + "text": "WrappingType", "references": [ { - "name": "IOption", + "name": "WrappingType", "package": "@ui5/webcomponents", - "module": "dist/Select.js" + "module": "dist/types/WrappingType.js" } ] }, - "description": "Currently selected `ui5-option` element.", - "privacy": "public", - "default": "undefined", - "readonly": true + "default": "\"Normal\"", + "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.", + "privacy": "public" } ], "events": [ @@ -20894,99 +18790,45 @@ "name": "change", "_ui5privacy": "public", "type": { - "text": "CustomEvent<SelectChangeEventDetail>", - "references": [ - { - "name": "SelectChangeEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/Select.js" - } - ] - }, - "description": "Fired when the selected option changes.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": true, - "_ui5parameters": [ - { - "type": { - "text": "IOption", - "references": [ - { - "name": "IOption", - "package": "@ui5/webcomponents", - "module": "dist/Select.js" - } - ] - }, - "name": "selectedOption", - "_ui5privacy": "public", - "description": "the selected option." - } - ] - }, - { - "name": "live-change", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent<SelectLiveChangeEventDetail>", - "references": [ - { - "name": "SelectLiveChangeEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/Select.js" - } - ] + "text": "CustomEvent" }, - "description": "Fired when the user navigates through the options, but the selection is not finalized,\nor when pressing the ESC key to revert the current selection.", + "description": "Fired when the component checked state changes.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, "_ui5Bubbles": true, - "_ui5since": "1.17.0", - "_ui5parameters": [ - { - "type": { - "text": "IOption", - "references": [ - { - "name": "IOption", - "package": "@ui5/webcomponents", - "module": "dist/Select.js" - } - ] - }, - "name": "selectedOption", - "_ui5privacy": "public", - "description": "the selected option." - } - ] + "_ui5since": "1.0.0-rc.15" + } + ], + "attributes": [ + { + "description": "Defines the accessible ARIA name of the component.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", + "type": { + "text": "string | undefined" + } }, { - "name": "open", - "_ui5privacy": "public", + "description": "Defines the IDs of the elements that label the component.", + "name": "accessible-name-ref", + "default": "undefined", + "fieldName": "accessibleNameRef", "type": { - "text": "CustomEvent" - }, - "description": "Fired after the component's dropdown menu opens.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": false + "text": "string | undefined" + } }, { - "name": "close", - "_ui5privacy": "public", + "description": "Defines whether the component is checked or not.\n\n**Note:** The property value can be changed with user interaction,\neither by clicking/tapping on the component,\nor by using the Space or Enter key.\n\n**Note:** Only enabled radio buttons can be checked.\nRead-only radio buttons are not selectable, and therefore are always unchecked.", + "name": "checked", + "default": "false", + "fieldName": "checked", "type": { - "text": "CustomEvent" - }, - "description": "Fired after the component's dropdown menu closes.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": false - } - ], - "attributes": [ + "text": "boolean" + } + }, { - "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is noninteractive.", + "description": "Defines whether the component is disabled.\n\n**Note:** A disabled component is completely noninteractive.", "name": "disabled", "default": "false", "fieldName": "disabled", @@ -20995,7 +18837,7 @@ } }, { - "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", + "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\nRadio buttons with the same `name` will form a radio button group.\n\n**Note:** By this name the component will be identified upon submission in an HTML form.\n\n**Note:** The selection can be changed with `ARROW_UP/DOWN` and `ARROW_LEFT/RIGHT` keys between radio buttons in same group.\n\n**Note:** Only one radio button can be selected per group.", "name": "name", "default": "undefined", "fieldName": "name", @@ -21004,12 +18846,12 @@ } }, { - "description": "Defines the value state of the component.", - "name": "value-state", - "default": "\"None\"", - "fieldName": "valueState", + "description": "Defines whether the component is read-only.\n\n**Note:** A read-only component isn't editable or selectable.\nHowever, because it's focusable, it still provides visual feedback upon user interaction.", + "name": "readonly", + "default": "false", + "fieldName": "readonly", "type": { - "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" + "text": "boolean" } }, { @@ -21022,84 +18864,39 @@ } }, { - "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.", - "name": "readonly", - "default": "false", - "fieldName": "readonly", - "type": { - "text": "boolean" - } - }, - { - "description": "Defines the accessible ARIA name of the component.", - "name": "accessible-name", + "description": "Defines the text of the component.", + "name": "text", "default": "undefined", - "fieldName": "accessibleName", + "fieldName": "text", "type": { "text": "string | undefined" } }, { - "description": "Receives id(or many ids) of the elements that label the select.", - "name": "accessible-name-ref", - "default": "undefined", - "fieldName": "accessibleNameRef", + "description": "Defines the form value of the component.\nWhen a form with a radio button group is submitted, the group's value\nwill be the value of the currently selected radio button.", + "name": "value", + "default": "\"\"", + "fieldName": "value", "type": { - "text": "string | undefined" + "text": "string" } }, { - "description": "Defines the accessible description of the component.", - "name": "accessible-description", - "default": "undefined", - "fieldName": "accessibleDescription", + "description": "Defines the value state of the component.", + "name": "value-state", + "default": "\"None\"", + "fieldName": "valueState", "type": { - "text": "string | undefined" + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" } }, { - "description": "Receives id(or many ids) of the elements that describe the select.", - "name": "accessible-description-ref", - "default": "undefined", - "fieldName": "accessibleDescriptionRef", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Defines the tooltip of the select.", - "name": "tooltip", - "default": "undefined", - "fieldName": "tooltip", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Defines the separator type for the two columns layout when Select is in read-only mode.", - "name": "text-separator", - "default": "\"Dash\"", - "fieldName": "textSeparator", - "type": { - "text": "\"Bullet\" | \"Dash\" | \"VerticalLine\"" - } - }, - { - "description": "Defines the value of the component:\n\n- when get - returns the value of the component or the value/text content of the selected option.\n- when set - selects the option with matching `value` property or text content.\n\n**Note:** Use either the Select's value or the Options' selected property.\nMixed usage could result in unexpected behavior.\n\n**Note:** If the given value does not match any existing option,\nno option will be selected and the Select component will be displayed as empty.", - "name": "value", - "default": "\"\"", - "fieldName": "value", - "type": { - "text": "any" - } - }, - { - "description": "Currently selected `ui5-option` element.", - "name": "selected-option", - "default": "undefined", - "fieldName": "selectedOption", + "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.", + "name": "wrapping-type", + "default": "\"Normal\"", + "fieldName": "wrappingType", "type": { - "text": "any" + "text": "\"None\" | \"Normal\"" } } ], @@ -21108,9 +18905,8 @@ "package": "@ui5/webcomponents-base", "module": "dist/UI5Element.js" }, - "tagName": "ui5-select", + "tagName": "ui5-radio-button", "customElement": true, - "_ui5since": "0.8.0", "_ui5privacy": "public" } ], @@ -21119,129 +18915,141 @@ "kind": "js", "name": "default", "declaration": { - "name": "Select", - "module": "dist/Select.js" + "name": "RadioButton", + "module": "dist/RadioButton.js" } }, { "kind": "custom-element-definition", - "name": "ui5-select", + "name": "ui5-radio-button", "declaration": { - "name": "Select", - "module": "dist/Select.js" + "name": "RadioButton", + "module": "dist/RadioButton.js" } } ] }, { "kind": "javascript-module", - "path": "dist/Slider.js", + "path": "dist/RadioButtonGroup.js", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "RadioButtonGroup", + "module": "dist/RadioButtonGroup.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/RangeSlider.js", "declarations": [ { "kind": "class", - "description": "### Overview\nThe Slider component represents a numerical range and a handle (grip).\nThe purpose of the component is to enable visual selection of a value in\na continuous numerical range by moving an adjustable handle.\n\n### Structure\nThe most important properties of the Slider are:\n\n- min - The minimum value of the slider range.\n- max - The maximum value of the slider range.\n- value - The current value of the slider range.\n- step - Determines the increments in which the slider will move.\n- showTooltip - Determines if a tooltip should be displayed above the handle.\n- showTickmarks - Displays a visual divider between the step values.\n- labelInterval - Labels some or all of the tickmarks with their values.\n\n### Usage\nThe most common use case is to select values on a continuous numerical scale (e.g. temperature, volume, etc. ).\n\n### Responsive Behavior\nThe `ui5-slider` component adjusts to the size of its parent container by recalculating and\nresizing the width of the control. You can move the slider handle in several different ways:\n\n- Drag and drop the handle to the desired value.\n- Click/tap on the range bar to move the handle to that location.\n\n### Keyboard Handling\n\n- `Left or Down Arrow` - Moves the handle one step to the left, effectively decreasing the component's value by `step` amount;\n- `Right or Up Arrow` - Moves the handle one step to the right, effectively increasing the component's value by `step` amount;\n- `Left or Down Arrow + Ctrl/Cmd` - Moves the handle to the left with step equal to 1/10th of the entire range, effectively decreasing the component's value by 1/10th of the range;\n- `Right or Up Arrow + Ctrl/Cmd` - Moves the handle to the right with step equal to 1/10th of the entire range, effectively increasing the component's value by 1/10th of the range;\n- `Plus` - Same as `Right or Up Arrow`;\n- `Minus` - Same as `Left or Down Arrow`;\n- `Home` - Moves the handle to the beginning of the range;\n- `End` - Moves the handle to the end of the range;\n- `Page Up` - Same as `Right or Up + Ctrl/Cmd`;\n- `Page Down` - Same as `Left or Down + Ctrl/Cmd`;\n- `Escape` - Resets the value property after interaction, to the position prior the component's focusing;\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Slider.js\";`", - "name": "Slider", + "description": "### Overview\nRepresents a numerical interval and two handles (grips) to select a sub-range within it.\nThe purpose of the component to enable visual selection of sub-ranges within a given interval.\n\n### Structure\nThe most important properties of the Range Slider are:\n\n- min - The minimum value of the slider range.\n- max - The maximum value of the slider range.\n- value - The current value of the slider.\n- step - Determines the increments in which the slider will move.\n- showTooltip - Determines if a tooltip should be displayed above the handle.\n- showTickmarks - Displays a visual divider between the step values.\n- labelInterval - Labels some or all of the tickmarks with their values.\n\n#### Notes:\n\n- The right and left handle can be moved individually and their positions could therefore switch.\n- The entire range can be moved along the interval.\n\n### Usage\nThe most common use case is to select and move sub-ranges on a continuous numerical scale.\n\n### Responsive Behavior\nYou can move the currently selected range by clicking on it and dragging it along the interval.\n\n### Keyboard Handling\n\n- `Left or Down Arrow` - Moves a component's handle or the entire selection one step to the left;\n- `Right or Up Arrow` - Moves a component's handle or the entire selection one step to the right;\n- `Left or Down Arrow + Ctrl/Cmd` - Moves a component's handle to the left or the entire range with step equal to 1/10th of the entire range;\n- `Right or Up Arrow + Ctrl/Cmd` - Moves a component's handle to the right or the entire range with step equal to 1/10th of the entire range;\n- `Plus` - Same as `Right or Up Arrow`;\n- `Minus` - Same as `Left or Down Arrow`;\n- `Home` - Moves the entire selection or the selected handle to the beginning of the component's range;\n- `End` - Moves the entire selection or the selected handle to the end of the component's range;\n- `Page Up` - Same as `Right or Up Arrow + Ctrl/Cmd`;\n- `Page Down` - Same as `Left or Down Arrow + Ctrl/Cmd`;\n- `Escape` - Resets the `startValue` and `endValue` properties to the values prior the component focusing;\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/RangeSlider.js\";`", + "name": "RangeSlider", "cssParts": [ { - "description": "Used to style the progress container, the horizontal bar that visually represents the range between the minimum and maximum values, of the `ui5-slider`.", - "name": "progress-container" + "description": "Used to style the handles of the `ui5-range-slider`.", + "name": "handle" }, { - "description": "Used to style the progress bar, which shows the progress of the `ui5-slider`.", + "description": "Used to style the progress bar, which shows the progress of the `ui5-range-slider`.", "name": "progress-bar" }, { - "description": "Used to style the handle of the `ui5-slider`.", - "name": "handle" + "description": "Used to style the progress container, the horizontal bar that visually represents the range between the minimum and maximum values, of the `ui5-range-slider`.", + "name": "progress-container" } ], "members": [ { "kind": "field", - "name": "value", + "name": "accessibleName", "type": { - "text": "number" + "text": "string | undefined" }, - "default": "0", + "description": "Defines the accessible ARIA name of the component.", + "default": "undefined", "privacy": "public", - "description": "Current value of the slider", - "_ui5formProperty": true, - "_ui5formEvents": "change,input", - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" - } + "_ui5since": "1.4.0" }, { "kind": "field", - "name": "min", + "name": "disabled", "type": { - "text": "number" + "text": "boolean" }, - "default": "0", - "description": "Defines the minimum value of the slider.", - "privacy": "public", - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" - } + "default": "false", + "description": "Defines whether the slider is in disabled state.", + "privacy": "public" }, { "kind": "field", - "name": "max", + "name": "editableTooltip", "type": { - "text": "number" + "text": "boolean" }, + "default": "false", + "description": "\nIndicates whether input fields should be used as tooltips for the handles.\n\n**Note:** Setting this option to true will only work if showTooltip is set to true.\n**Note:** In order for the component to comply with the accessibility standard, it is recommended to set the editableTooltip property to true.", + "privacy": "public" + }, + { + "kind": "field", + "name": "endValue", + "description": "Defines end point of a selection - position of a second handle on the slider.", "default": "100", - "description": "Defines the maximum value of the slider.", "privacy": "public", - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" - } + "type": { + "text": "number" + }, + "_ui5formProperty": true, + "_ui5formEvents": "change,input" }, { "kind": "field", - "name": "name", + "name": "labelInterval", "type": { - "text": "string | undefined" + "text": "number" }, - "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", - "default": "undefined", - "privacy": "public", - "_ui5since": "2.0.0", - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" - } + "default": "0", + "description": "Displays a label with a value on every N-th step.\n\n**Note:** The step and tickmarks properties must be enabled.\nExample - if the step value is set to 2 and the label interval is also specified to 2 - then every second\ntickmark will be labelled, which means every 4th value number.", + "privacy": "public" }, { "kind": "field", - "name": "step", + "name": "max", "type": { "text": "number" }, - "default": "1", - "description": "Defines the size of the slider's selection intervals (e.g. min = 0, max = 10, step = 5 would result in possible selection of the values 0, 5, 10).\n\n**Note:** If set to 0 the slider handle movement is disabled. When negative number or value other than a number, the component fallbacks to its default value.", - "privacy": "public", - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" - } + "default": "100", + "description": "Defines the maximum value of the slider.", + "privacy": "public" }, { "kind": "field", - "name": "labelInterval", + "name": "min", "type": { "text": "number" }, "default": "0", - "description": "Displays a label with a value on every N-th step.\n\n**Note:** The step and tickmarks properties must be enabled.\nExample - if the step value is set to 2 and the label interval is also specified to 2 - then every second\ntickmark will be labelled, which means every 4th value number.", + "description": "Defines the minimum value of the slider.", + "privacy": "public" + }, + { + "kind": "field", + "name": "name", + "type": { + "text": "string | undefined" + }, + "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", + "default": "undefined", "privacy": "public", - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" - } + "_ui5since": "2.0.0" }, { "kind": "field", @@ -21251,11 +19059,7 @@ }, "default": "false", "description": "Enables tickmarks visualization for each step.\n\n**Note:** The step must be a positive number.", - "privacy": "public", - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" - } + "privacy": "public" }, { "kind": "field", @@ -21265,77 +19069,75 @@ }, "default": "false", "description": "Enables handle tooltip displaying the current value.", + "privacy": "public" + }, + { + "kind": "field", + "name": "startValue", + "description": "Defines start point of a selection - position of a first handle on the slider.", + "default": "0", "privacy": "public", - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" - } + "type": { + "text": "number" + }, + "_ui5formProperty": true, + "_ui5formEvents": "change,input" }, { "kind": "field", - "name": "editableTooltip", + "name": "step", "type": { - "text": "boolean" + "text": "number" }, - "default": "false", - "description": "\nIndicates whether input fields should be used as tooltips for the handles.\n\n**Note:** Setting this option to true will only work if showTooltip is set to true.\n**Note:** In order for the component to comply with the accessibility standard, it is recommended to set the editableTooltip property to true.", - "privacy": "public", - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" + "default": "1", + "description": "Defines the size of the slider's selection intervals (e.g. min = 0, max = 10, step = 5 would result in possible selection of the values 0, 5, 10).\n\n**Note:** If set to 0 the slider handle movement is disabled. When negative number or value other than a number, the component fallbacks to its default value.", + "privacy": "public" + } + ], + "attributes": [ + { + "description": "Defines the accessible ARIA name of the component.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", + "type": { + "text": "string | undefined" } }, { - "kind": "field", + "description": "Defines whether the slider is in disabled state.", "name": "disabled", + "default": "false", + "fieldName": "disabled", "type": { "text": "boolean" - }, - "default": "false", - "description": "Defines whether the slider is in disabled state.", - "privacy": "public", - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" } }, { - "kind": "field", - "name": "accessibleName", + "description": "\nIndicates whether input fields should be used as tooltips for the handles.\n\n**Note:** Setting this option to true will only work if showTooltip is set to true.\n**Note:** In order for the component to comply with the accessibility standard, it is recommended to set the editableTooltip property to true.", + "name": "editable-tooltip", + "default": "false", + "fieldName": "editableTooltip", "type": { - "text": "string | undefined" - }, - "description": "Defines the accessible ARIA name of the component.", - "default": "undefined", - "privacy": "public", - "_ui5since": "1.4.0", - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" + "text": "boolean" } - } - ], - "attributes": [ + }, { - "description": "Current value of the slider", - "name": "value", + "description": "Defines end point of a selection - position of a second handle on the slider.", + "name": "end-value", "default": "undefined", - "fieldName": "value", + "fieldName": "endValue", "type": { - "text": "number" + "text": "any" } }, { - "description": "Defines the minimum value of the slider.", - "name": "min", + "description": "Displays a label with a value on every N-th step.\n\n**Note:** The step and tickmarks properties must be enabled.\nExample - if the step value is set to 2 and the label interval is also specified to 2 - then every second\ntickmark will be labelled, which means every 4th value number.", + "name": "label-interval", "default": "0", - "fieldName": "min", + "fieldName": "labelInterval", "type": { "text": "number" - }, - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" } }, { @@ -21345,49 +19147,24 @@ "fieldName": "max", "type": { "text": "number" - }, - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" } }, { - "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", - "name": "name", - "default": "undefined", - "fieldName": "name", - "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" - } - }, - { - "description": "Defines the size of the slider's selection intervals (e.g. min = 0, max = 10, step = 5 would result in possible selection of the values 0, 5, 10).\n\n**Note:** If set to 0 the slider handle movement is disabled. When negative number or value other than a number, the component fallbacks to its default value.", - "name": "step", - "default": "1", - "fieldName": "step", + "description": "Defines the minimum value of the slider.", + "name": "min", + "default": "0", + "fieldName": "min", "type": { "text": "number" - }, - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" } }, { - "description": "Displays a label with a value on every N-th step.\n\n**Note:** The step and tickmarks properties must be enabled.\nExample - if the step value is set to 2 and the label interval is also specified to 2 - then every second\ntickmark will be labelled, which means every 4th value number.", - "name": "label-interval", - "default": "0", - "fieldName": "labelInterval", + "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", + "name": "name", + "default": "undefined", + "fieldName": "name", "type": { - "text": "number" - }, - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" + "text": "string | undefined" } }, { @@ -21397,10 +19174,6 @@ "fieldName": "showTickmarks", "type": { "text": "boolean" - }, - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" } }, { @@ -21410,49 +19183,24 @@ "fieldName": "showTooltip", "type": { "text": "boolean" - }, - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" - } - }, - { - "description": "\nIndicates whether input fields should be used as tooltips for the handles.\n\n**Note:** Setting this option to true will only work if showTooltip is set to true.\n**Note:** In order for the component to comply with the accessibility standard, it is recommended to set the editableTooltip property to true.", - "name": "editable-tooltip", - "default": "false", - "fieldName": "editableTooltip", - "type": { - "text": "boolean" - }, - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" } }, { - "description": "Defines whether the slider is in disabled state.", - "name": "disabled", - "default": "false", - "fieldName": "disabled", + "description": "Defines start point of a selection - position of a first handle on the slider.", + "name": "start-value", + "default": "undefined", + "fieldName": "startValue", "type": { - "text": "boolean" - }, - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" + "text": "any" } }, { - "description": "Defines the accessible ARIA name of the component.", - "name": "accessible-name", - "default": "undefined", - "fieldName": "accessibleName", + "description": "Defines the size of the slider's selection intervals (e.g. min = 0, max = 10, step = 5 would result in possible selection of the values 0, 5, 10).\n\n**Note:** If set to 0 the slider handle movement is disabled. When negative number or value other than a number, the component fallbacks to its default value.", + "name": "step", + "default": "1", + "fieldName": "step", "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" + "text": "number" } } ], @@ -21461,7 +19209,7 @@ "package": "@ui5/webcomponents", "module": "dist/SliderBase.js" }, - "tagName": "ui5-slider", + "tagName": "ui5-range-slider", "customElement": true, "_ui5since": "1.0.0-rc.11", "_ui5privacy": "public", @@ -21475,11 +19223,7 @@ "description": "Fired when the value changes and the user has finished interacting with the slider.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" - } + "_ui5Bubbles": true }, { "name": "input", @@ -21490,11 +19234,7 @@ "description": "Fired when the value changes due to user interaction that is not yet finished - during mouse/touch dragging.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" - } + "_ui5Bubbles": true } ] } @@ -21504,151 +19244,163 @@ "kind": "js", "name": "default", "declaration": { - "name": "Slider", - "module": "dist/Slider.js" + "name": "RangeSlider", + "module": "dist/RangeSlider.js" } }, { "kind": "custom-element-definition", - "name": "ui5-slider", + "name": "ui5-range-slider", "declaration": { - "name": "Slider", - "module": "dist/Slider.js" + "name": "RangeSlider", + "module": "dist/RangeSlider.js" } } ] }, { "kind": "javascript-module", - "path": "dist/SliderBase.js", + "path": "dist/RatingIndicator.js", "declarations": [ { "kind": "class", - "description": "### Overview", - "name": "SliderBase", + "description": "### Overview\nThe Rating Indicator is used to display a specific number of icons that are used to rate an item.\nAdditionally, it is also used to display the average and overall ratings.\n\n### Usage\nThe recommended number of icons is between 5 and 7.\n\n### Responsive Behavior\nYou can change the size of the Rating Indicator by changing its `font-size` CSS property.\n\nExample: `<ui5-rating-indicator style=\"font-size: 3rem;\"></ui5-rating-indicator>`\n\n### Keyboard Handling\nWhen the `ui5-rating-indicator` is focused, the user can change the rating\nwith the following keyboard shortcuts:\n\n- [RIGHT/UP] - Increases the value of the rating by one step. If the highest value is reached, does nothing\n- [LEFT/DOWN] - Decreases the value of the rating by one step. If the lowest value is reached, does nothing.\n- [Home] - Sets the lowest value.\n- [End] - Sets the highest value.\n- [SPACE/ENTER/RETURN] - Increases the value of the rating by one step. If the highest value is reached, sets the rating to the lowest value.\n- Any number - Changes value to the corresponding number. If typed number is larger than the number of values, sets the highest value.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/RatingIndicator.js\";`", + "name": "RatingIndicator", "members": [ { "kind": "field", - "name": "min", - "type": { - "text": "number" - }, - "default": "0", - "description": "Defines the minimum value of the slider.", - "privacy": "public" - }, - { - "kind": "field", - "name": "max", + "name": "accessibleName", "type": { - "text": "number" + "text": "string | undefined" }, - "default": "100", - "description": "Defines the maximum value of the slider.", - "privacy": "public" + "description": "Defines the accessible ARIA name of the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.0.0-rc.15" }, { "kind": "field", - "name": "name", + "name": "accessibleNameRef", "type": { "text": "string | undefined" }, - "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", + "description": "Receives id(or many ids) of the elements that label the component.", "default": "undefined", "privacy": "public", - "_ui5since": "2.0.0" + "_ui5since": "1.15.0" }, { "kind": "field", - "name": "step", + "name": "disabled", "type": { - "text": "number" + "text": "boolean" }, - "default": "1", - "description": "Defines the size of the slider's selection intervals (e.g. min = 0, max = 10, step = 5 would result in possible selection of the values 0, 5, 10).\n\n**Note:** If set to 0 the slider handle movement is disabled. When negative number or value other than a number, the component fallbacks to its default value.", + "default": "false", + "description": "Defines whether the component is disabled.\n\n**Note:** A disabled component is completely noninteractive.", "privacy": "public" }, { "kind": "field", - "name": "labelInterval", + "name": "max", "type": { "text": "number" }, - "default": "0", - "description": "Displays a label with a value on every N-th step.\n\n**Note:** The step and tickmarks properties must be enabled.\nExample - if the step value is set to 2 and the label interval is also specified to 2 - then every second\ntickmark will be labelled, which means every 4th value number.", - "privacy": "public" + "default": "5", + "description": "The number of displayed rating symbols.", + "privacy": "public", + "_ui5since": "1.0.0-rc.15" }, { "kind": "field", - "name": "showTickmarks", + "name": "ratedIcon", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Enables tickmarks visualization for each step.\n\n**Note:** The step must be a positive number.", - "privacy": "public" + "default": "\"favorite\"", + "description": "Defines the icon to be displayed for the selected (filled) rating symbol.", + "privacy": "public", + "_ui5since": "2.20" }, { "kind": "field", - "name": "showTooltip", + "name": "readonly", "type": { "text": "boolean" }, "default": "false", - "description": "Enables handle tooltip displaying the current value.", + "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.", "privacy": "public" }, { "kind": "field", - "name": "editableTooltip", + "name": "required", "type": { "text": "boolean" }, "default": "false", - "description": "\nIndicates whether input fields should be used as tooltips for the handles.\n\n**Note:** Setting this option to true will only work if showTooltip is set to true.\n**Note:** In order for the component to comply with the accessibility standard, it is recommended to set the editableTooltip property to true.", - "privacy": "public" + "description": "Defines whether the component is required.", + "privacy": "public", + "_ui5since": "1.15.0" }, { "kind": "field", - "name": "disabled", + "name": "size", "type": { - "text": "boolean" + "text": "RatingIndicatorSize", + "references": [ + { + "name": "RatingIndicatorSize", + "package": "@ui5/webcomponents", + "module": "dist/types/RatingIndicatorSize.js" + } + ] }, - "default": "false", - "description": "Defines whether the slider is in disabled state.", - "privacy": "public" + "default": "\"M\"", + "description": "Defines the size of the component.", + "privacy": "public", + "_ui5since": "2.6.0" }, { "kind": "field", - "name": "accessibleName", + "name": "tooltip", "type": { "text": "string | undefined" }, - "description": "Defines the accessible ARIA name of the component.", + "description": "Defines the tooltip of the component.", "default": "undefined", "privacy": "public", - "_ui5since": "1.4.0" - } - ], - "events": [ + "_ui5since": "1.19.0" + }, { - "name": "change", - "_ui5privacy": "public", + "kind": "field", + "name": "unratedIcon", "type": { - "text": "CustomEvent" + "text": "string" }, - "description": "Fired when the value changes and the user has finished interacting with the slider.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true + "default": "\"unfavorite\"", + "description": "Defines the icon to be displayed for the unselected (empty) rating symbol.", + "privacy": "public", + "_ui5since": "2.20" }, { - "name": "input", + "kind": "field", + "name": "value", + "type": { + "text": "number" + }, + "default": "0", + "description": "The indicated value of the rating.\n\n**Note:** If you set a number which is not round, it would be shown as follows:\n\n- 1.0 - 1.2 -> 1\n- 1.3 - 1.7 -> 1.5\n- 1.8 - 1.9 -> 2", + "privacy": "public" + } + ], + "events": [ + { + "name": "change", "_ui5privacy": "public", "type": { "text": "CustomEvent" }, - "description": "Fired when the value changes due to user interaction that is not yet finished - during mouse/touch dragging.", + "description": "The event is fired when the value changes.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, "_ui5Bubbles": true @@ -21656,185 +19408,102 @@ ], "attributes": [ { - "description": "Defines the minimum value of the slider.", - "name": "min", - "default": "0", - "fieldName": "min", + "description": "Defines the accessible ARIA name of the component.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", "type": { - "text": "number" + "text": "string | undefined" } }, { - "description": "Defines the maximum value of the slider.", - "name": "max", - "default": "100", - "fieldName": "max", + "description": "Receives id(or many ids) of the elements that label the component.", + "name": "accessible-name-ref", + "default": "undefined", + "fieldName": "accessibleNameRef", "type": { - "text": "number" + "text": "string | undefined" } }, { - "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", - "name": "name", - "default": "undefined", - "fieldName": "name", + "description": "Defines whether the component is disabled.\n\n**Note:** A disabled component is completely noninteractive.", + "name": "disabled", + "default": "false", + "fieldName": "disabled", "type": { - "text": "string | undefined" + "text": "boolean" } }, { - "description": "Defines the size of the slider's selection intervals (e.g. min = 0, max = 10, step = 5 would result in possible selection of the values 0, 5, 10).\n\n**Note:** If set to 0 the slider handle movement is disabled. When negative number or value other than a number, the component fallbacks to its default value.", - "name": "step", - "default": "1", - "fieldName": "step", + "description": "The number of displayed rating symbols.", + "name": "max", + "default": "5", + "fieldName": "max", "type": { "text": "number" } }, { - "description": "Displays a label with a value on every N-th step.\n\n**Note:** The step and tickmarks properties must be enabled.\nExample - if the step value is set to 2 and the label interval is also specified to 2 - then every second\ntickmark will be labelled, which means every 4th value number.", - "name": "label-interval", - "default": "0", - "fieldName": "labelInterval", + "description": "Defines the icon to be displayed for the selected (filled) rating symbol.", + "name": "rated-icon", + "default": "\"favorite\"", + "fieldName": "ratedIcon", "type": { - "text": "number" + "text": "string" } }, { - "description": "Enables tickmarks visualization for each step.\n\n**Note:** The step must be a positive number.", - "name": "show-tickmarks", + "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.", + "name": "readonly", "default": "false", - "fieldName": "showTickmarks", + "fieldName": "readonly", "type": { "text": "boolean" } }, { - "description": "Enables handle tooltip displaying the current value.", - "name": "show-tooltip", + "description": "Defines whether the component is required.", + "name": "required", "default": "false", - "fieldName": "showTooltip", + "fieldName": "required", "type": { "text": "boolean" } }, { - "description": "\nIndicates whether input fields should be used as tooltips for the handles.\n\n**Note:** Setting this option to true will only work if showTooltip is set to true.\n**Note:** In order for the component to comply with the accessibility standard, it is recommended to set the editableTooltip property to true.", - "name": "editable-tooltip", - "default": "false", - "fieldName": "editableTooltip", + "description": "Defines the size of the component.", + "name": "size", + "default": "\"M\"", + "fieldName": "size", "type": { - "text": "boolean" + "text": "\"S\" | \"M\" | \"L\"" } }, { - "description": "Defines whether the slider is in disabled state.", - "name": "disabled", - "default": "false", - "fieldName": "disabled", - "type": { - "text": "boolean" - } - }, - { - "description": "Defines the accessible ARIA name of the component.", - "name": "accessible-name", + "description": "Defines the tooltip of the component.", + "name": "tooltip", "default": "undefined", - "fieldName": "accessibleName", + "fieldName": "tooltip", "type": { "text": "string | undefined" } - } - ], - "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" - }, - "customElement": true, - "_ui5privacy": "public" - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "SliderBase", - "module": "dist/SliderBase.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/SliderTooltip.js", - "declarations": [], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "SliderTooltip", - "module": "dist/SliderTooltip.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/SpecialCalendarDate.js", - "declarations": [ - { - "kind": "class", - "description": "### Overview\n\nThe `ui5-special-date` component defines a special calendar date to be used inside `ui5-calendar`,\nwhich is visually distinguished from the rest of the dates.", - "name": "SpecialCalendarDate", - "members": [ - { - "kind": "field", - "name": "value", - "type": { - "text": "string" - }, - "default": "\"\"", - "description": "The date formatted according to the `formatPattern` property\nof the `ui5-calendar` that hosts the component.", - "privacy": "public" }, { - "kind": "field", - "name": "type", - "type": { - "text": "CalendarLegendItemType", - "references": [ - { - "name": "CalendarLegendItemType", - "package": "@ui5/webcomponents", - "module": "dist/types/CalendarLegendItemType.js" - } - ] - }, - "default": "\"None\"", - "description": "Defines the type of the special date.", - "privacy": "public" - } - ], - "attributes": [ - { - "description": "The date formatted according to the `formatPattern` property\nof the `ui5-calendar` that hosts the component.", - "name": "value", - "default": "\"\"", - "fieldName": "value", + "description": "Defines the icon to be displayed for the unselected (empty) rating symbol.", + "name": "unrated-icon", + "default": "\"unfavorite\"", + "fieldName": "unratedIcon", "type": { "text": "string" } }, { - "description": "Defines the type of the special date.", - "name": "type", - "default": "\"None\"", - "fieldName": "type", + "description": "The indicated value of the rating.\n\n**Note:** If you set a number which is not round, it would be shown as follows:\n\n- 1.0 - 1.2 -> 1\n- 1.3 - 1.7 -> 1.5\n- 1.8 - 1.9 -> 2", + "name": "value", + "default": "0", + "fieldName": "value", "type": { - "text": "\"None\" | \"Today\" | \"Selected\" | \"Working\" | \"NonWorking\" | \"Type01\" | \"Type02\" | \"Type03\" | \"Type04\" | \"Type05\" | \"Type06\" | \"Type07\" | \"Type08\" | \"Type09\" | \"Type10\" | \"Type11\" | ... 8 more ... | \"Type20\"" + "text": "number" } } ], @@ -21843,11 +19512,10 @@ "package": "@ui5/webcomponents-base", "module": "dist/UI5Element.js" }, - "tagName": "ui5-special-date", + "tagName": "ui5-rating-indicator", "customElement": true, - "_ui5since": "1.23.0", - "_ui5privacy": "public", - "_ui5abstract": true + "_ui5since": "1.0.0-rc.8", + "_ui5privacy": "public" } ], "exports": [ @@ -21855,755 +19523,536 @@ "kind": "js", "name": "default", "declaration": { - "name": "SpecialCalendarDate", - "module": "dist/SpecialCalendarDate.js" + "name": "RatingIndicator", + "module": "dist/RatingIndicator.js" } }, { "kind": "custom-element-definition", - "name": "ui5-special-date", + "name": "ui5-rating-indicator", "declaration": { - "name": "SpecialCalendarDate", - "module": "dist/SpecialCalendarDate.js" + "name": "RatingIndicator", + "module": "dist/RatingIndicator.js" } } ] }, { "kind": "javascript-module", - "path": "dist/SplitButton.js", + "path": "dist/ResponsivePopover.js", "declarations": [ { "kind": "class", - "description": "### Overview\n\n`ui5-split-button` enables users to trigger actions. It is constructed of two separate actions -\ndefault action and arrow action that can be activated by clicking or tapping, or by\npressing certain keyboard keys - `Space` or `Enter` for default action,\nand `Arrow Down` or `Arrow Up` for arrow action.\n\n### Usage\n\n`ui5-split-button` consists two separate buttons:\n\n- for the first one (default action) you can define some `text` or an `icon`, or both.\n- the second one (arrow action) contains only `slim-arrow-down` icon.\n\nYou can choose a `design` from a set of predefined types (the same as for ui5-button) that offer\ndifferent styling to correspond to the triggered action. Both text and arrow actions have the same design.\n\nYou can set the `ui5-split-button` as enabled or disabled. Both parts of an enabled\n`ui5-split-button` can be pressed by clicking or tapping it, or by certain keys, which changes\nthe style to provide visual feedback to the user that it is pressed or hovered over with\nthe mouse cursor. A disabled `ui5-split-button` appears inactive and any of the two buttons\ncannot be pressed.\n\n### Keyboard Handling\n\n- `Space` or `Enter` - triggers the default action\n- `Shift` or `Escape` - if `Space` is pressed, releases the default action button without triggering the click event.\n- `Arrow Down`, `Arrow Up`, `Alt`+`Arrow Down`, `Alt`+`Arrow Up`, or `F4` - triggers the arrow action\nThere are separate events that are fired on activating of `ui5-split-button` parts:\n\n- `click` for the first button (default action)\n- `arrow-click` for the second button (arrow action)\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/SplitButton.js\";`", - "name": "SplitButton", + "description": "### Overview\nThe `ui5-responsive-popover` acts as a Popover on desktop and tablet, while on phone it acts as a Dialog.\nThe component improves tremendously the user experience on mobile.\n\n### Usage\nUse it when you want to make sure that all the content is visible on any device.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/ResponsivePopover.js\";`", + "name": "ResponsivePopover", "cssParts": [ { - "description": "Used to style the native button element", - "name": "button" + "description": "Used to style the content of the component", + "name": "content" }, { - "description": "Used to style the icon in the native button element", - "name": "icon" + "description": "Used to style the footer of the component", + "name": "footer" }, { - "description": "Used to style the end icon in the native button element", - "name": "endIcon" - } - ], - "slots": [ - { - "name": "default", - "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<Node>" - }, - "_ui5privacy": "public" + "description": "Used to style the header of the component", + "name": "header" } ], "members": [ { "kind": "field", - "name": "icon", + "name": "accessibleDescription", "type": { "text": "string | undefined" }, - "description": "Defines the icon to be displayed as graphical element within the component.\nThe SAP-icons font provides numerous options.\n\nExample:\n\nSee all available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "description": "Defines the accessible description of the component.", "default": "undefined", - "privacy": "public" - }, - { - "kind": "field", - "name": "activeArrowButton", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines whether the arrow button should have the active state styles or not.", "privacy": "public", - "_ui5since": "1.21.0" + "_ui5since": "2.11.0" }, { "kind": "field", - "name": "design", + "name": "accessibleDescriptionRef", "type": { - "text": "ButtonDesign", - "references": [ - { - "name": "ButtonDesign", - "package": "@ui5/webcomponents", - "module": "dist/types/ButtonDesign.js" - } - ] + "text": "string | undefined" }, - "default": "\"Default\"", - "description": "Defines the component design.", - "privacy": "public" + "description": "Receives id(or many ids) of the elements that describe the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.11.0" }, { "kind": "field", - "name": "disabled", + "name": "accessibleName", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.", - "privacy": "public" + "description": "Defines the accessible name of the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.0.0-rc.15" }, { "kind": "field", - "name": "accessibleName", + "name": "accessibleNameRef", "type": { "text": "string | undefined" }, - "description": "Defines the accessible ARIA name of the component.", + "description": "Defines the IDs of the elements that label the component.", "default": "undefined", - "privacy": "public" + "privacy": "public", + "_ui5since": "1.1.0" }, { "kind": "field", - "name": "accessibilityAttributes", + "name": "accessibleRole", "type": { - "text": "SplitButtonAccessibilityAttributes", + "text": "PopupAccessibleRole", "references": [ { - "name": "SplitButtonAccessibilityAttributes", + "name": "PopupAccessibleRole", "package": "@ui5/webcomponents", - "module": "dist/SplitButton.js" + "module": "dist/types/PopupAccessibleRole.js" } ] }, - "default": "{}", - "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe `accessibilityAttributes` property accepts an object with the following optional fields:\n\n- **root**: Attributes that will be applied to the main (text) button.\n - **hasPopup**: Indicates the presence and type of popup triggered by the button.\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **roleDescription**: Provides a human-readable description for the role of the button.\n Accepts any string value.\n - **title**: Specifies a tooltip or description for screen readers.\n Accepts any string value.\n\t- **ariaKeyShortcuts**: Defines keyboard shortcuts that activate or give focus to the button.\n\n- **arrowButton**: Attributes applied specifically to the arrow (split) button.\n - **hasPopup**: Indicates the presence and type of popup triggered by the arrow button.\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **expanded**: Indicates whether the popup triggered by the arrow button is currently expanded.\n Accepts boolean values: `true` or `false`.", + "default": "\"Dialog\"", + "description": "Allows setting a custom role.", "privacy": "public", - "_ui5since": "2.13.0" - } - ], - "events": [ - { - "name": "click", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired when the user clicks on the default action.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true - }, - { - "name": "arrow-click", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired when the user clicks on the arrow action.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true - } - ], - "attributes": [ - { - "description": "Defines the icon to be displayed as graphical element within the component.\nThe SAP-icons font provides numerous options.\n\nExample:\n\nSee all available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", - "name": "icon", - "default": "undefined", - "fieldName": "icon", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Defines whether the arrow button should have the active state styles or not.", - "name": "active-arrow-button", - "default": "false", - "fieldName": "activeArrowButton", - "type": { - "text": "boolean" - } - }, - { - "description": "Defines the component design.", - "name": "design", - "default": "\"Default\"", - "fieldName": "design", - "type": { - "text": "\"Transparent\" | \"Positive\" | \"Negative\" | \"Default\" | \"Emphasized\" | \"Attention\"" - } - }, - { - "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.", - "name": "disabled", - "default": "false", - "fieldName": "disabled", - "type": { - "text": "boolean" - } - }, - { - "description": "Defines the accessible ARIA name of the component.", - "name": "accessible-name", - "default": "undefined", - "fieldName": "accessibleName", - "type": { - "text": "string | undefined" - } + "_ui5since": "1.10.0" }, - { - "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe `accessibilityAttributes` property accepts an object with the following optional fields:\n\n- **root**: Attributes that will be applied to the main (text) button.\n - **hasPopup**: Indicates the presence and type of popup triggered by the button.\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **roleDescription**: Provides a human-readable description for the role of the button.\n Accepts any string value.\n - **title**: Specifies a tooltip or description for screen readers.\n Accepts any string value.\n\t- **ariaKeyShortcuts**: Defines keyboard shortcuts that activate or give focus to the button.\n\n- **arrowButton**: Attributes applied specifically to the arrow (split) button.\n - **hasPopup**: Indicates the presence and type of popup triggered by the arrow button.\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **expanded**: Indicates whether the popup triggered by the arrow button is currently expanded.\n Accepts boolean values: `true` or `false`.", - "name": "accessibility-attributes", - "default": "{}", - "fieldName": "accessibilityAttributes", - "type": { - "text": "SplitButtonAccessibilityAttributes" - } - } - ], - "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" - }, - "tagName": "ui5-split-button", - "customElement": true, - "_ui5since": "1.1.0", - "_ui5privacy": "public" - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "SplitButton", - "module": "dist/SplitButton.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-split-button", - "declaration": { - "name": "SplitButton", - "module": "dist/SplitButton.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/StepInput.js", - "declarations": [ - { - "kind": "class", - "description": "### Overview\n\nThe `ui5-step-input` consists of an input field and buttons with icons to increase/decrease the value\nwith the predefined step.\n\nThe user can change the value of the component by pressing the increase/decrease buttons,\nby typing a number directly, by using the keyboard up/down and page up/down,\nor by using the mouse scroll wheel. Decimal values are supported.\n\n### Usage\n\nThe default step is 1 but the app developer can set a different one.\n\nApp developers can set a maximum and minimum value for the `StepInput`.\nThe increase/decrease button and the up/down keyboard navigation become disabled when\nthe value reaches the max/min or a new value is entered from the input which is greater/less than the max/min.\n\n#### When to use:\n\n- To adjust amounts, quantities, or other values quickly.\n- To adjust values for a specific step.\n\n#### When not to use:\n\n- To enter a static number (for example, postal code, phone number, or ID). In this case,\nuse the regular `ui5-input` instead.\n- To display a value that rarely needs to be adjusted and does not pertain to a particular step.\nIn this case, use the regular `ui5-input` instead.\n- To enter dates and times. In this case, use date/time related components instead.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/StepInput.js\";`", - "name": "StepInput", - "slots": [ - { - "name": "valueStateMessage", - "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 component is in `Information`, `Critical` or `Negative` value state.", - "_ui5type": { - "text": "Array<HTMLElement>" - }, - "_ui5privacy": "public" - } - ], - "members": [ { "kind": "field", - "name": "value", + "name": "allowTargetOverlap", "type": { - "text": "number" + "text": "boolean" }, - "default": "0", - "description": "Defines a value of the component.", + "default": "false", + "description": "Determines if there is no enough space, the component can be placed\nover the target.", "privacy": "public" }, { - "kind": "field", - "name": "min", - "type": { - "text": "number | undefined" + "kind": "method", + "name": "applyFocus", + "return": { + "type": { + "text": "Promise<void>" + }, + "description": "Promise that resolves when the focus is applied" }, - "description": "Defines a minimum value of the component.", - "default": "undefined", + "description": "Focuses the element denoted by `initialFocus`, if provided,\nor the first focusable element otherwise.", "privacy": "public" }, { "kind": "field", - "name": "max", + "name": "headerText", "type": { - "text": "number | undefined" + "text": "string | undefined" }, - "description": "Defines a maximum value of the component.", + "description": "Defines the header text.\n\n**Note:** If `header` slot is provided, the `headerText` is ignored.", "default": "undefined", "privacy": "public" }, { "kind": "field", - "name": "step", + "name": "hideArrow", "type": { - "text": "number" + "text": "boolean" }, - "default": "1", - "description": "Defines a step of increasing/decreasing the value of the component.", - "privacy": "public" + "default": "false", + "description": "Determines whether the component arrow is hidden.", + "privacy": "public", + "_ui5since": "1.0.0-rc.15" }, { "kind": "field", - "name": "valueState", + "name": "horizontalAlign", "type": { - "text": "ValueState", + "text": "PopoverHorizontalAlign", "references": [ { - "name": "ValueState", - "package": "@ui5/webcomponents-base", - "module": "dist/types/ValueState.js" + "name": "PopoverHorizontalAlign", + "package": "@ui5/webcomponents", + "module": "dist/types/PopoverHorizontalAlign.js" } ] }, - "default": "\"None\"", - "description": "Defines the value state of the component.", + "default": "\"Center\"", + "description": "Determines the horizontal alignment of the component.", "privacy": "public" }, { "kind": "field", - "name": "required", + "name": "initialFocus", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Defines whether the component is required.", + "description": "Defines the ID of the HTML Element, which will get the initial focus.\n\n**Note:** If an element with `autofocus` attribute is added inside the component,\n`initialFocus` won't take effect.", + "default": "undefined", "privacy": "public" }, { "kind": "field", - "name": "disabled", + "name": "modal", "type": { "text": "boolean" }, "default": "false", - "description": "Determines whether the component is displayed as disabled.", + "description": "Defines whether the component should close when\nclicking/tapping outside the popover.\nIf enabled, it blocks any interaction with the background.", "privacy": "public" }, { "kind": "field", - "name": "readonly", + "name": "open", + "description": "Indicates if the element is open", + "privacy": "public", + "default": "false", "type": { "text": "boolean" }, - "default": "false", - "description": "Determines whether the component is displayed as read-only.", - "privacy": "public" + "_ui5since": "1.2.0" }, { "kind": "field", - "name": "placeholder", - "type": { - "text": "string | undefined" - }, - "description": "Defines a short hint, intended to aid the user with data entry when the\ncomponent has no value.\n\n**Note:** When no placeholder is set, the format pattern is displayed as a placeholder.\nPassing an empty string as the value of this property will make the component appear empty - without placeholder or format pattern.", + "name": "opener", + "description": "Defines the ID or DOM Reference of the element at which the popover is shown.\nWhen using this attribute in a declarative way, you must only use the `id` (as a string) of the element at which you want to show the popover.\nYou can only set the `opener` attribute to a DOM Reference when using JavaScript.", + "privacy": "public", "default": "undefined", - "privacy": "public" - }, - { - "kind": "field", - "name": "name", "type": { - "text": "string | undefined" + "text": "HTMLElement | string | null | undefined" }, - "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", - "default": "undefined", - "privacy": "public" + "_ui5since": "1.2.0" }, { "kind": "field", - "name": "valuePrecision", + "name": "placement", "type": { - "text": "number" + "text": "PopoverPlacement", + "references": [ + { + "name": "PopoverPlacement", + "package": "@ui5/webcomponents", + "module": "dist/types/PopoverPlacement.js" + } + ] }, - "default": "0", - "description": "Determines the number of digits after the decimal point of the component.", + "default": "\"End\"", + "description": "Determines on which side the component is placed at.", "privacy": "public" }, { "kind": "field", - "name": "accessibleName", + "name": "preventFocusRestore", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Defines the accessible ARIA name of the component.", - "default": "undefined", + "default": "false", + "description": "Defines if the focus should be returned to the previously focused element,\nwhen the popup closes.", "privacy": "public", - "_ui5since": "1.0.0-rc.15" + "_ui5since": "1.0.0-rc.8" }, { "kind": "field", - "name": "accessibleNameRef", + "name": "preventInitialFocus", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Receives id(or many ids) of the elements that label the component.", - "default": "undefined", + "default": "false", + "description": "Indicates whether initial focus should be prevented.", "privacy": "public", - "_ui5since": "1.0.0-rc.15" - } - ], - "events": [ - { - "name": "change", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired when the input operation has finished by pressing Enter or on focusout.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true + "_ui5since": "2.0.0" }, { - "name": "input", - "_ui5privacy": "public", + "kind": "field", + "name": "resizable", "type": { - "text": "CustomEvent" + "text": "boolean" }, - "description": "Fired when the value of the component changes at each keystroke.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": true, - "_ui5since": "2.6.0" + "default": "false", + "description": "Determines whether the component is resizable.\n**Note:** This property is effective only on desktop devices.", + "privacy": "public", + "_ui5since": "2.19.0" }, { - "name": "value-state-change", - "_ui5privacy": "public", + "kind": "field", + "name": "verticalAlign", "type": { - "text": "CustomEvent<StepInputValueStateChangeEventDetail>", + "text": "PopoverVerticalAlign", "references": [ { - "name": "StepInputValueStateChangeEventDetail", + "name": "PopoverVerticalAlign", "package": "@ui5/webcomponents", - "module": "dist/StepInput.js" + "module": "dist/types/PopoverVerticalAlign.js" } ] }, - "description": "Fired before the value state of the component is updated internally.\nThe event is preventable, meaning that if it's default action is\nprevented, the component will not update the value state.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": true, - "_ui5since": "1.23.0", - "_ui5parameters": [ - { - "type": { - "text": "string" - }, - "name": "valueState", - "_ui5privacy": "public", - "description": "The new `valueState` that will be set." - }, - { - "type": { - "text": "boolean" - }, - "name": "valid", - "_ui5privacy": "public", - "description": "Indicator if the value is in between the min and max value." - } - ] + "default": "\"Center\"", + "description": "Determines the vertical alignment of the component.", + "privacy": "public" + } + ], + "superclass": { + "name": "Popover", + "package": "@ui5/webcomponents", + "module": "dist/Popover.js" + }, + "tagName": "ui5-responsive-popover", + "customElement": true, + "_ui5since": "1.0.0-rc.6", + "_ui5privacy": "public", + "slots": [ + { + "name": "default", + "description": "Defines the content of the Popup.", + "_ui5propertyName": "content", + "_ui5type": { + "text": "Array<HTMLElement>" + }, + "_ui5privacy": "public" + }, + { + "name": "footer", + "description": "Defines the footer HTML Element.", + "_ui5type": { + "text": "Array<HTMLElement>" + }, + "_ui5privacy": "public" + }, + { + "name": "header", + "description": "Defines the header HTML Element.", + "_ui5type": { + "text": "Array<HTMLElement>" + }, + "_ui5privacy": "public" } ], "attributes": [ { - "description": "Defines a value of the component.", - "name": "value", - "default": "0", - "fieldName": "value", + "description": "Defines the accessible description of the component.", + "name": "accessible-description", + "default": "undefined", + "fieldName": "accessibleDescription", "type": { - "text": "number" + "text": "string | undefined" } }, { - "description": "Defines a minimum value of the component.", - "name": "min", + "description": "Receives id(or many ids) of the elements that describe the component.", + "name": "accessible-description-ref", "default": "undefined", - "fieldName": "min", + "fieldName": "accessibleDescriptionRef", "type": { - "text": "number | undefined" + "text": "string | undefined" } }, { - "description": "Defines a maximum value of the component.", - "name": "max", + "description": "Defines the accessible name of the component.", + "name": "accessible-name", "default": "undefined", - "fieldName": "max", + "fieldName": "accessibleName", "type": { - "text": "number | undefined" + "text": "string | undefined" } }, { - "description": "Defines a step of increasing/decreasing the value of the component.", - "name": "step", - "default": "1", - "fieldName": "step", + "description": "Defines the IDs of the elements that label the component.", + "name": "accessible-name-ref", + "default": "undefined", + "fieldName": "accessibleNameRef", "type": { - "text": "number" + "text": "string | undefined" } }, { - "description": "Defines the value state of the component.", - "name": "value-state", - "default": "\"None\"", - "fieldName": "valueState", + "description": "Allows setting a custom role.", + "name": "accessible-role", + "default": "\"Dialog\"", + "fieldName": "accessibleRole", "type": { - "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" + "text": "\"None\" | \"Dialog\" | \"AlertDialog\"" } }, { - "description": "Defines whether the component is required.", - "name": "required", + "description": "Determines if there is no enough space, the component can be placed\nover the target.", + "name": "allow-target-overlap", "default": "false", - "fieldName": "required", + "fieldName": "allowTargetOverlap", "type": { "text": "boolean" } }, { - "description": "Determines whether the component is displayed as disabled.", - "name": "disabled", - "default": "false", - "fieldName": "disabled", + "description": "Defines the header text.\n\n**Note:** If `header` slot is provided, the `headerText` is ignored.", + "name": "header-text", + "default": "undefined", + "fieldName": "headerText", "type": { - "text": "boolean" + "text": "string | undefined" } }, { - "description": "Determines whether the component is displayed as read-only.", - "name": "readonly", + "description": "Determines whether the component arrow is hidden.", + "name": "hide-arrow", "default": "false", - "fieldName": "readonly", + "fieldName": "hideArrow", "type": { "text": "boolean" } }, { - "description": "Defines a short hint, intended to aid the user with data entry when the\ncomponent has no value.\n\n**Note:** When no placeholder is set, the format pattern is displayed as a placeholder.\nPassing an empty string as the value of this property will make the component appear empty - without placeholder or format pattern.", - "name": "placeholder", - "default": "undefined", - "fieldName": "placeholder", + "description": "Determines the horizontal alignment of the component.", + "name": "horizontal-align", + "default": "\"Center\"", + "fieldName": "horizontalAlign", "type": { - "text": "string | undefined" + "text": "\"Start\" | \"End\" | \"Center\" | \"Stretch\"" } }, { - "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", - "name": "name", + "description": "Defines the ID of the HTML Element, which will get the initial focus.\n\n**Note:** If an element with `autofocus` attribute is added inside the component,\n`initialFocus` won't take effect.", + "name": "initial-focus", "default": "undefined", - "fieldName": "name", + "fieldName": "initialFocus", "type": { "text": "string | undefined" } }, { - "description": "Determines the number of digits after the decimal point of the component.", - "name": "value-precision", - "default": "0", - "fieldName": "valuePrecision", + "description": "Defines whether the component should close when\nclicking/tapping outside the popover.\nIf enabled, it blocks any interaction with the background.", + "name": "modal", + "default": "false", + "fieldName": "modal", "type": { - "text": "number" + "text": "boolean" } }, { - "description": "Defines the accessible ARIA name of the component.", - "name": "accessible-name", - "default": "undefined", - "fieldName": "accessibleName", + "description": "Indicates if the element is open", + "name": "open", + "default": "false", + "fieldName": "open", "type": { - "text": "string | undefined" + "text": "any" } }, { - "description": "Receives id(or many ids) of the elements that label the component.", - "name": "accessible-name-ref", + "description": "Defines the ID or DOM Reference of the element at which the popover is shown.\nWhen using this attribute in a declarative way, you must only use the `id` (as a string) of the element at which you want to show the popover.\nYou can only set the `opener` attribute to a DOM Reference when using JavaScript.", + "name": "opener", "default": "undefined", - "fieldName": "accessibleNameRef", + "fieldName": "opener", "type": { - "text": "string | undefined" + "text": "any" } - } - ], - "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" - }, - "tagName": "ui5-step-input", - "customElement": true, - "_ui5since": "1.0.0-rc.13", - "_ui5privacy": "public" - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "StepInput", - "module": "dist/StepInput.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-step-input", - "declaration": { - "name": "StepInput", - "module": "dist/StepInput.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/SuggestionItem.js", - "declarations": [ - { - "kind": "class", - "description": "The `ui5-suggestion-item` represents the suggestion item of the `ui5-input`.", - "name": "SuggestionItem", - "members": [ + }, { - "kind": "field", - "name": "text", + "description": "Determines on which side the component is placed at.", + "name": "placement", + "default": "\"End\"", + "fieldName": "placement", "type": { - "text": "string | undefined" - }, - "description": "Defines the text of the component.", - "default": "undefined", - "privacy": "public" + "text": "\"Top\" | \"Bottom\" | \"Start\" | \"End\"" + } }, { - "kind": "field", - "name": "additionalText", + "description": "Defines if the focus should be returned to the previously focused element,\nwhen the popup closes.", + "name": "prevent-focus-restore", + "default": "false", + "fieldName": "preventFocusRestore", "type": { - "text": "string | undefined" - }, - "description": "Defines the `additionalText`, displayed in the end of the item.", - "default": "undefined", - "privacy": "public", - "_ui5since": "1.0.0-rc.15" - } - ], - "attributes": [ + "text": "boolean" + } + }, { - "description": "Defines the text of the component.", - "name": "text", - "default": "undefined", - "fieldName": "text", + "description": "Indicates whether initial focus should be prevented.", + "name": "prevent-initial-focus", + "default": "false", + "fieldName": "preventInitialFocus", "type": { - "text": "string | undefined" + "text": "boolean" } }, { - "description": "Defines the `additionalText`, displayed in the end of the item.", - "name": "additional-text", - "default": "undefined", - "fieldName": "additionalText", + "description": "Determines whether the component is resizable.\n**Note:** This property is effective only on desktop devices.", + "name": "resizable", + "default": "false", + "fieldName": "resizable", "type": { - "text": "string | undefined" + "text": "boolean" } - } - ], - "superclass": { - "name": "ListItemBase", - "package": "@ui5/webcomponents", - "module": "dist/ListItemBase.js" - }, - "tagName": "ui5-suggestion-item", - "customElement": true, - "_ui5privacy": "public", - "_ui5abstract": true, - "_ui5implements": [ + }, { - "name": "IInputSuggestionItemSelectable", - "package": "@ui5/webcomponents", - "module": "dist/Input.js" + "description": "Determines the vertical alignment of the component.", + "name": "vertical-align", + "default": "\"Center\"", + "fieldName": "verticalAlign", + "type": { + "text": "\"Top\" | \"Bottom\" | \"Center\" | \"Stretch\"" + } } - ] - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "SuggestionItem", - "module": "dist/SuggestionItem.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-suggestion-item", - "declaration": { - "name": "SuggestionItem", - "module": "dist/SuggestionItem.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/SuggestionItemCustom.js", - "declarations": [ - { - "kind": "class", - "description": "The `ui5-suggestion-item-custom` is type of suggestion item,\nthat can be used to place suggestion items with custom content in the input.\nThe text property is considered only for autocomplete.\nIn case the user needs highlighting functionality, check \"@ui5/webcomponents-base/dist/util/generateHighlightedMarkup.js\"", - "name": "SuggestionItemCustom", - "slots": [ + ], + "events": [ { - "name": "default", - "description": "Defines the content of the component.", - "_ui5propertyName": "content", - "_ui5type": { - "text": "Array<Node>" + "name": "before-close", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<PopupBeforeCloseEventDetail>", + "references": [ + { + "name": "PopupBeforeCloseEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/Popup.js" + } + ] }, - "_ui5privacy": "public" - } - ], - "members": [ + "description": "Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": false, + "_ui5parameters": [ + { + "type": { + "text": "boolean" + }, + "name": "escPressed", + "_ui5privacy": "public", + "description": "Indicates that `ESC` key has triggered the event." + } + ] + }, { - "kind": "field", - "name": "text", + "name": "before-open", + "_ui5privacy": "public", "type": { - "text": "string | undefined" + "text": "CustomEvent" }, - "description": "Defines the text of the `ui5-suggestion-item-custom`.\n**Note:** The text property is considered only for autocomplete.", - "default": "undefined", - "privacy": "public" - } - ], - "attributes": [ + "description": "Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": false + }, { - "description": "Defines the text of the `ui5-suggestion-item-custom`.\n**Note:** The text property is considered only for autocomplete.", - "name": "text", - "default": "undefined", - "fieldName": "text", + "name": "close", + "_ui5privacy": "public", "type": { - "text": "string | undefined" - } - } - ], - "superclass": { - "name": "ListItemBase", - "package": "@ui5/webcomponents", - "module": "dist/ListItemBase.js" - }, - "tagName": "ui5-suggestion-item-custom", - "customElement": true, - "_ui5since": "2.0.0", - "_ui5privacy": "public", - "_ui5implements": [ + "text": "CustomEvent" + }, + "description": "Fired after the component is closed.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": false + }, { - "name": "IInputSuggestionItemSelectable", - "package": "@ui5/webcomponents", - "module": "dist/Input.js" + "name": "open", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired after the component is opened.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": false } ] } @@ -22613,265 +20062,257 @@ "kind": "js", "name": "default", "declaration": { - "name": "SuggestionItemCustom", - "module": "dist/SuggestionItemCustom.js" + "name": "ResponsivePopover", + "module": "dist/ResponsivePopover.js" } }, { "kind": "custom-element-definition", - "name": "ui5-suggestion-item-custom", + "name": "ui5-responsive-popover", "declaration": { - "name": "SuggestionItemCustom", - "module": "dist/SuggestionItemCustom.js" + "name": "ResponsivePopover", + "module": "dist/ResponsivePopover.js" } } ] }, { "kind": "javascript-module", - "path": "dist/SuggestionItemGroup.js", + "path": "dist/SegmentedButton.js", "declarations": [ + { + "kind": "interface", + "name": "ISegmentedButtonItem", + "description": "Interface for components that may be slotted inside `ui5-segmented-button` as items", + "_ui5privacy": "public" + }, { "kind": "class", - "description": "The `ui5-suggestion-item-group` is type of suggestion item,\nthat can be used to split the `ui5-input` suggestions into groups.", - "name": "SuggestionItemGroup", + "description": "### Overview\n\nThe `ui5-segmented-button` shows a group of items. When the user clicks or taps\none of the items, it stays in a pressed state. It automatically resizes the items\nto fit proportionally within the component. When no width is set, the component uses the available width.\n\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/SegmentedButton.js\";`", + "name": "SegmentedButton", "slots": [ { "name": "default", - "description": "Defines the items of the <code>ui5-suggestion-item-group</code>.", + "description": "Defines the items of `ui5-segmented-button`.\n\n**Note:** Multiple items are allowed.\n\n**Note:** Use the `ui5-segmented-button-item` for the intended design.", "_ui5propertyName": "items", "_ui5type": { - "text": "Array<SuggestionListItem>", - "references": [ - { - "name": "SuggestionListItem", - "package": "@ui5/webcomponents", - "module": "dist/SuggestionListItem.js" - } - ] - }, - "_ui5privacy": "public", - "inheritedFrom": { - "name": "ListItemGroup", - "module": "dist/ListItemGroup.js" - } - }, - { - "name": "header", - "description": "Defines the header of the component.\n\n**Note:** Using this slot, the default header text of group and the value of `headerText` property will be overwritten.", - "_ui5type": { - "text": "Array<ListItemBase>", + "text": "Array<ISegmentedButtonItem>", "references": [ { - "name": "ListItemBase", + "name": "ISegmentedButtonItem", "package": "@ui5/webcomponents", - "module": "dist/ListItemBase.js" + "module": "dist/SegmentedButton.js" } ] }, - "_ui5privacy": "public", - "inheritedFrom": { - "name": "ListItemGroup", - "module": "dist/ListItemGroup.js" - } - } - ], - "superclass": { - "name": "ListItemGroup", - "package": "@ui5/webcomponents", - "module": "dist/ListItemGroup.js" - }, - "tagName": "ui5-suggestion-item-group", - "customElement": true, - "_ui5since": "2.0.0", - "_ui5privacy": "public", - "cssParts": [ - { - "description": "Used to style the header item of the group", - "name": "header", - "inheritedFrom": { - "name": "ListItemGroup", - "module": "dist/ListItemGroup.js" - } + "_ui5privacy": "public" } ], - "attributes": [ + "members": [ { - "description": "Defines the header text of the <code>ui5-li-group</code>.", - "name": "header-text", - "default": "undefined", - "fieldName": "headerText", + "kind": "field", + "name": "accessibleDescription", "type": { "text": "string | undefined" }, - "inheritedFrom": { - "name": "ListItemGroup", - "module": "dist/ListItemGroup.js" - } + "description": "Defines the accessible description of the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.15.0" }, { - "description": "Defines the accessible name of the header.", - "name": "header-accessible-name", - "default": "undefined", - "fieldName": "headerAccessibleName", + "kind": "field", + "name": "accessibleDescriptionRef", "type": { "text": "string | undefined" }, - "inheritedFrom": { - "name": "ListItemGroup", - "module": "dist/ListItemGroup.js" - } + "description": "Defines the IDs of the HTML Elements that describe the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.15.0" }, { - "description": "Defines if the text of the component should wrap when it's too long.\nWhen set to \"Normal\", the content (title, description) will be wrapped\nusing the `ui5-expandable-text` component.<br/>\n\nThe text can wrap up to 100 characters on small screens (size S) and\nup to 300 characters on larger screens (size M and above). When text exceeds\nthese limits, it truncates with an ellipsis followed by a text expansion trigger.\n\nAvailable options are:\n- `None` (default) - The text will truncate with an ellipsis.\n- `Normal` - The text will wrap (without truncation).", - "name": "wrapping-type", - "default": "\"None\"", - "fieldName": "wrappingType", + "kind": "field", + "name": "accessibleName", "type": { - "text": "\"None\" | \"Normal\"" + "text": "string | undefined" }, - "inheritedFrom": { - "name": "ListItemGroup", - "module": "dist/ListItemGroup.js" - } - } - ], - "members": [ + "description": "Defines the accessible ARIA name of the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.0.3" + }, { "kind": "field", - "name": "headerText", + "name": "accessibleNameRef", "type": { "text": "string | undefined" }, - "description": "Defines the header text of the <code>ui5-li-group</code>.", - "privacy": "public", + "description": "Defines the IDs of the HTML Elements that label the component.", "default": "undefined", - "inheritedFrom": { - "name": "ListItemGroup", - "module": "dist/ListItemGroup.js" - } + "privacy": "public", + "_ui5since": "2.15.0" }, { "kind": "field", - "name": "headerAccessibleName", + "name": "itemsFitContent", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Defines the accessible name of the header.", + "default": "false", + "description": "Determines whether the segmented button items should be sized to fit their content.\n\nIf set to `true`, each item will be sized to fit its content, with any extra space distributed after the last item.\nIf set to `false` (the default), all items will be equally sized to fill the available space.", "privacy": "public", - "default": "undefined", - "inheritedFrom": { - "name": "ListItemGroup", - "module": "dist/ListItemGroup.js" - } + "_ui5since": "2.16.0" }, { "kind": "field", - "name": "wrappingType", + "name": "selectedItems", "type": { - "text": "WrappingType", + "text": "Array<ISegmentedButtonItem>", "references": [ { - "name": "WrappingType", + "name": "ISegmentedButtonItem", "package": "@ui5/webcomponents", - "module": "dist/types/WrappingType.js" + "module": "dist/SegmentedButton.js" } ] }, - "default": "\"None\"", - "description": "Defines if the text of the component should wrap when it's too long.\nWhen set to \"Normal\", the content (title, description) will be wrapped\nusing the `ui5-expandable-text` component.<br/>\n\nThe text can wrap up to 100 characters on small screens (size S) and\nup to 300 characters on larger screens (size M and above). When text exceeds\nthese limits, it truncates with an ellipsis followed by a text expansion trigger.\n\nAvailable options are:\n- `None` (default) - The text will truncate with an ellipsis.\n- `Normal` - The text will wrap (without truncation).", + "description": "Returns an array of the currently selected items.", "privacy": "public", - "_ui5since": "2.15.0", - "inheritedFrom": { - "name": "ListItemGroup", - "module": "dist/ListItemGroup.js" - } - } - ], - "events": [ + "default": "[]", + "readonly": true, + "_ui5since": "1.14.0" + }, { - "name": "move-over", - "_ui5privacy": "public", + "kind": "field", + "name": "selectionMode", "type": { - "text": "CustomEvent<ListItemGroupMoveEventDetail>", + "text": "SegmentedButtonSelectionMode", "references": [ { - "name": "ListItemGroupMoveEventDetail", + "name": "SegmentedButtonSelectionMode", "package": "@ui5/webcomponents", - "module": "dist/ListItemGroup.js" + "module": "dist/types/SegmentedButtonSelectionMode.js" } ] }, - "description": "Fired when a movable list item is moved over a potential drop target during a dragging operation.\n\nIf the new position is valid, prevent the default action of the event using `preventDefault()`.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": true, - "_ui5since": "2.1.0", - "_ui5parameters": [ - { - "type": { - "text": "object" - }, - "name": "source", - "_ui5privacy": "public", - "description": "Contains information about the moved element under `element` property." - }, - { - "type": { - "text": "object" - }, - "name": "destination", - "_ui5privacy": "public", - "description": "Contains information about the destination of the moved element. Has `element` and `placement` properties." - } - ], - "inheritedFrom": { - "name": "ListItemGroup", - "module": "dist/ListItemGroup.js" - } - }, + "default": "\"Single\"", + "description": "Defines the component selection mode.", + "privacy": "public", + "_ui5since": "1.14.0" + } + ], + "events": [ { - "name": "move", + "name": "selection-change", "_ui5privacy": "public", "type": { - "text": "CustomEvent<ListItemGroupMoveEventDetail>", + "text": "CustomEvent<SegmentedButtonSelectionChangeEventDetail>", "references": [ { - "name": "ListItemGroupMoveEventDetail", + "name": "SegmentedButtonSelectionChangeEventDetail", "package": "@ui5/webcomponents", - "module": "dist/ListItemGroup.js" + "module": "dist/SegmentedButton.js" } ] }, - "description": "Fired when a movable list item is dropped onto a drop target.\n\n**Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action.", + "description": "Fired when the selected item changes.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, "_ui5Bubbles": true, - "_ui5since": "2.1.0", "_ui5parameters": [ { "type": { - "text": "object" - }, - "name": "source", - "_ui5privacy": "public", - "description": "Contains information about the moved element under `element` property." - }, - { - "type": { - "text": "object" + "text": "Array<ISegmentedButtonItem>", + "references": [ + { + "name": "ISegmentedButtonItem", + "package": "@ui5/webcomponents", + "module": "dist/SegmentedButton.js" + } + ] }, - "name": "destination", + "name": "selectedItems", "_ui5privacy": "public", - "description": "Contains information about the destination of the moved element. Has `element` and `placement` properties." + "description": "an array of selected items. Since: 1.14.0" } - ], - "inheritedFrom": { - "name": "ListItemGroup", - "module": "dist/ListItemGroup.js" + ] + } + ], + "attributes": [ + { + "description": "Defines the accessible description of the component.", + "name": "accessible-description", + "default": "undefined", + "fieldName": "accessibleDescription", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the IDs of the HTML Elements that describe the component.", + "name": "accessible-description-ref", + "default": "undefined", + "fieldName": "accessibleDescriptionRef", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the accessible ARIA name of the component.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the IDs of the HTML Elements that label the component.", + "name": "accessible-name-ref", + "default": "undefined", + "fieldName": "accessibleNameRef", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Determines whether the segmented button items should be sized to fit their content.\n\nIf set to `true`, each item will be sized to fit its content, with any extra space distributed after the last item.\nIf set to `false` (the default), all items will be equally sized to fill the available space.", + "name": "items-fit-content", + "default": "false", + "fieldName": "itemsFitContent", + "type": { + "text": "boolean" + } + }, + { + "description": "Returns an array of the currently selected items.", + "name": "selected-items", + "default": "[]", + "fieldName": "selectedItems", + "type": { + "text": "any" + } + }, + { + "description": "Defines the component selection mode.", + "name": "selection-mode", + "default": "\"Single\"", + "fieldName": "selectionMode", + "type": { + "text": "\"Single\" | \"Multiple\"" } } - ] + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-segmented-button", + "customElement": true, + "_ui5since": "1.0.0-rc.6", + "_ui5privacy": "public" } ], "exports": [ @@ -22879,120 +20320,61 @@ "kind": "js", "name": "default", "declaration": { - "name": "SuggestionItemGroup", - "module": "dist/SuggestionItemGroup.js" + "name": "SegmentedButton", + "module": "dist/SegmentedButton.js" } }, { "kind": "custom-element-definition", - "name": "ui5-suggestion-item-group", - "declaration": { - "name": "SuggestionItemGroup", - "module": "dist/SuggestionItemGroup.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/SuggestionListItem.js", - "declarations": [], - "exports": [ - { - "kind": "js", - "name": "default", + "name": "ui5-segmented-button", "declaration": { - "name": "SuggestionListItem", - "module": "dist/SuggestionListItem.js" + "name": "SegmentedButton", + "module": "dist/SegmentedButton.js" } } ] }, { "kind": "javascript-module", - "path": "dist/Switch.js", + "path": "dist/SegmentedButtonItem.js", "declarations": [ { "kind": "class", - "description": "### Overview\nThe `ui5-switch` component is used for changing between binary states.\n\nThe component can display texts, that will be switched, based on the component state, via the `textOn` and `textOff` properties,\nbut texts longer than 3 letters will be cutted off.\n\nHowever, users are able to customize the width of `ui5-switch` with pure CSS (`<ui5-switch style=\"width: 200px\">`), and set widths, depending on the texts they would use.\n\nNote: the component would not automatically stretch to fit the whole text width.\n\n### Keyboard Handling\nThe state can be changed by pressing the Space and Enter keys.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Switch\";`", - "name": "Switch", - "cssParts": [ - { - "description": "Used to style the track, where the handle is being slid", - "name": "slider" - }, - { - "description": "Used to style the `textOn` property text", - "name": "text-on" - }, - { - "description": "Used to style the `textOff` property text", - "name": "text-off" - }, + "description": "### Overview\n\nUsers can use the `ui5-segmented-button-item` as part of a `ui5-segmented-button`.\n\nClicking or tapping on a `ui5-segmented-button-item` changes its state to `selected`.\nThe item returns to its initial state when the user clicks or taps on it again.\nBy applying additional custom CSS-styling classes, apps can give a different style to any\n`ui5-segmented-button-item`.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/SegmentedButtonItem.js\";`", + "name": "SegmentedButtonItem", + "slots": [ { - "description": "Used to style the handle of the switch", - "name": "handle" + "name": "default", + "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<Node>" + }, + "_ui5privacy": "public" } ], "members": [ { "kind": "field", - "name": "design", - "type": { - "text": "SwitchDesign", - "references": [ - { - "name": "SwitchDesign", - "package": "@ui5/webcomponents", - "module": "dist/types/SwitchDesign.js" - } - ] - }, - "default": "\"Textual\"", - "description": "Defines the component design.\n\n**Note:** If `Graphical` type is set,\npositive and negative icons will replace the `textOn` and `textOff`.", - "privacy": "public" - }, - { - "kind": "field", - "name": "checked", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines if the component is checked.\n\n**Note:** The property can be changed with user interaction,\neither by cliking the component, or by pressing the `Enter` or `Space` key.", - "privacy": "public", - "_ui5formProperty": true, - "_ui5formEvents": "change" - }, - { - "kind": "field", - "name": "disabled", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines whether the component is disabled.\n\n**Note:** A disabled component is noninteractive.", - "privacy": "public" - }, - { - "kind": "field", - "name": "textOn", + "name": "accessibleDescription", "type": { "text": "string | undefined" }, - "description": "Defines the text, displayed when the component is checked.\n\n**Note:** We recommend using short texts, up to 3 letters (larger texts would be cut off).", + "description": "Defines the accessible description of the component.", "default": "undefined", - "privacy": "public" + "privacy": "public", + "_ui5since": "2.15.0" }, { "kind": "field", - "name": "textOff", + "name": "accessibleDescriptionRef", "type": { "text": "string | undefined" }, - "description": "Defines the text, displayed when the component is not checked.\n\n**Note:** We recommend using short texts, up to 3 letters (larger texts would be cut off).", + "description": "Defines the IDs of the HTML Elements that describe the component.", "default": "undefined", - "privacy": "public" + "privacy": "public", + "_ui5since": "2.15.0" }, { "kind": "field", @@ -23000,10 +20382,10 @@ "type": { "text": "string | undefined" }, - "description": "Sets the accessible ARIA name of the component.\n\n**Note**: We recommend that you set an accessibleNameRef pointing to an external label or at least an `accessibleName`.\nProviding an `accessibleNameRef` or an `accessibleName` is mandatory in the cases when `textOn` and `textOff` properties aren't set.", + "description": "Defines the accessible ARIA name of the component.", "default": "undefined", "privacy": "public", - "_ui5since": "1.2.0" + "_ui5since": "1.0.0-rc.15" }, { "kind": "field", @@ -23011,117 +20393,74 @@ "type": { "text": "string | undefined" }, - "description": "Receives id(or many ids) of the elements that label the component.\n\n**Note**: We recommend that you set an accessibleNameRef pointing to an external label or at least an `accessibleName`.\nProviding an `accessibleNameRef` or an `accessibleName` is mandatory in the cases when `textOn` and `textOff` properties aren't set.", + "description": "Receives id(or many ids) of the elements that label the component.", "default": "undefined", "privacy": "public", "_ui5since": "1.1.0" }, { "kind": "field", - "name": "tooltip", - "type": { - "text": "string | undefined" - }, - "description": "Defines the tooltip of the component.\n\n**Note:** If applicable an external label reference should always be the preferred option to provide context to the `ui5-switch` component over a tooltip.", - "default": "undefined", - "privacy": "public", - "_ui5since": "1.9.0" - }, - { - "kind": "field", - "name": "required", + "name": "disabled", "type": { "text": "boolean" }, "default": "false", - "description": "Defines whether the component is required.", - "privacy": "public", - "_ui5since": "1.16.0" + "description": "Defines whether the component is disabled.\nA disabled component can't be selected or\nfocused, and it is not in the tab chain.", + "privacy": "public" }, { "kind": "field", - "name": "name", + "name": "icon", "type": { "text": "string | undefined" }, - "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", + "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": "undefined", - "privacy": "public", - "_ui5since": "1.16.0" + "privacy": "public" }, { "kind": "field", - "name": "value", + "name": "selected", "type": { - "text": "string" + "text": "boolean" }, - "default": "\"\"", - "description": "Defines the form value of the component.", - "privacy": "public", - "_ui5since": "2.12.0" - } - ], - "events": [ + "default": "false", + "description": "Determines whether the component is displayed as selected.", + "privacy": "public" + }, { - "name": "change", - "_ui5privacy": "public", + "kind": "field", + "name": "tooltip", "type": { - "text": "CustomEvent" + "text": "string | undefined" }, - "description": "Fired when the component checked state changes.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": true + "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": "undefined", + "privacy": "public", + "_ui5since": "1.2.0" } ], "attributes": [ { - "description": "Defines the component design.\n\n**Note:** If `Graphical` type is set,\npositive and negative icons will replace the `textOn` and `textOff`.", - "name": "design", - "default": "\"Textual\"", - "fieldName": "design", - "type": { - "text": "\"Textual\" | \"Graphical\"" - } - }, - { - "description": "Defines if the component is checked.\n\n**Note:** The property can be changed with user interaction,\neither by cliking the component, or by pressing the `Enter` or `Space` key.", - "name": "checked", - "default": "false", - "fieldName": "checked", - "type": { - "text": "boolean" - } - }, - { - "description": "Defines whether the component is disabled.\n\n**Note:** A disabled component is noninteractive.", - "name": "disabled", - "default": "false", - "fieldName": "disabled", - "type": { - "text": "boolean" - } - }, - { - "description": "Defines the text, displayed when the component is checked.\n\n**Note:** We recommend using short texts, up to 3 letters (larger texts would be cut off).", - "name": "text-on", + "description": "Defines the accessible description of the component.", + "name": "accessible-description", "default": "undefined", - "fieldName": "textOn", + "fieldName": "accessibleDescription", "type": { "text": "string | undefined" } }, { - "description": "Defines the text, displayed when the component is not checked.\n\n**Note:** We recommend using short texts, up to 3 letters (larger texts would be cut off).", - "name": "text-off", + "description": "Defines the IDs of the HTML Elements that describe the component.", + "name": "accessible-description-ref", "default": "undefined", - "fieldName": "textOff", + "fieldName": "accessibleDescriptionRef", "type": { "text": "string | undefined" } }, { - "description": "Sets the accessible ARIA name of the component.\n\n**Note**: We recommend that you set an accessibleNameRef pointing to an external label or at least an `accessibleName`.\nProviding an `accessibleNameRef` or an `accessibleName` is mandatory in the cases when `textOn` and `textOff` properties aren't set.", + "description": "Defines the accessible ARIA name of the component.", "name": "accessible-name", "default": "undefined", "fieldName": "accessibleName", @@ -23130,7 +20469,7 @@ } }, { - "description": "Receives id(or many ids) of the elements that label the component.\n\n**Note**: We recommend that you set an accessibleNameRef pointing to an external label or at least an `accessibleName`.\nProviding an `accessibleNameRef` or an `accessibleName` is mandatory in the cases when `textOn` and `textOff` properties aren't set.", + "description": "Receives id(or many ids) of the elements that label the component.", "name": "accessible-name-ref", "default": "undefined", "fieldName": "accessibleNameRef", @@ -23139,40 +20478,40 @@ } }, { - "description": "Defines the tooltip of the component.\n\n**Note:** If applicable an external label reference should always be the preferred option to provide context to the `ui5-switch` component over a tooltip.", - "name": "tooltip", + "description": "Defines whether the component is disabled.\nA disabled component can't be selected or\nfocused, and it is not in the tab chain.", + "name": "disabled", + "default": "false", + "fieldName": "disabled", + "type": { + "text": "boolean" + } + }, + { + "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).", + "name": "icon", "default": "undefined", - "fieldName": "tooltip", + "fieldName": "icon", "type": { "text": "string | undefined" } }, { - "description": "Defines whether the component is required.", - "name": "required", + "description": "Determines whether the component is displayed as selected.", + "name": "selected", "default": "false", - "fieldName": "required", + "fieldName": "selected", "type": { "text": "boolean" } }, { - "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", - "name": "name", + "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.", + "name": "tooltip", "default": "undefined", - "fieldName": "name", + "fieldName": "tooltip", "type": { "text": "string | undefined" } - }, - { - "description": "Defines the form value of the component.", - "name": "value", - "default": "\"\"", - "fieldName": "value", - "type": { - "text": "string" - } } ], "superclass": { @@ -23180,10 +20519,21 @@ "package": "@ui5/webcomponents-base", "module": "dist/UI5Element.js" }, - "tagName": "ui5-switch", + "tagName": "ui5-segmented-button-item", "customElement": true, - "_ui5since": "0.8.0", - "_ui5privacy": "public" + "_ui5privacy": "public", + "_ui5implements": [ + { + "name": "IButton", + "package": "@ui5/webcomponents", + "module": "dist/Button.js" + }, + { + "name": "ISegmentedButtonItem", + "package": "@ui5/webcomponents", + "module": "dist/SegmentedButton.js" + } + ] } ], "exports": [ @@ -23191,666 +20541,452 @@ "kind": "js", "name": "default", "declaration": { - "name": "Switch", - "module": "dist/Switch.js" + "name": "SegmentedButtonItem", + "module": "dist/SegmentedButtonItem.js" } }, { "kind": "custom-element-definition", - "name": "ui5-switch", + "name": "ui5-segmented-button-item", "declaration": { - "name": "Switch", - "module": "dist/Switch.js" + "name": "SegmentedButtonItem", + "module": "dist/SegmentedButtonItem.js" } } ] }, { "kind": "javascript-module", - "path": "dist/Tab.js", + "path": "dist/Select.js", "declarations": [ + { + "kind": "interface", + "name": "IOption", + "description": "Interface for components that may be slotted inside `ui5-select` as options", + "_ui5privacy": "public" + }, { "kind": "class", - "description": "The `ui5-tab` represents a selectable item inside a `ui5-tabcontainer`.\nIt defines both the item in the tab strip (top part of the `ui5-tabcontainer`) and the\ncontent that is presented to the user once the tab is selected.", - "name": "Tab", + "description": "### Overview\n\nThe `ui5-select` component is used to create a drop-down list.\n\n### Usage\n\nThere are two main usages of the `ui5-select>`.\n\n- With Option (`ui5-option`) web component:\n\nThe available options of the Select are defined by using the Option component.\nThe Option comes with predefined design and layout, including `icon`, `text` and `additional-text`.\n\n- With OptionCustom (`ui5-option-custom`) web component.\n\nOptions with custom content are defined by using the OptionCustom component.\nThe OptionCustom component comes with no predefined layout and it expects consumers to define it.\n\n### Selection\n\nThe options can be selected via user interaction (click or with the use of the Space and Enter keys)\nand programmatically - the Select component supports two distinct selection APIs, though mixing them is not supported:\n- The \"value\" property of the Select component\n- The \"selected\" property on individual options\n\n**Note:** If the \"value\" property is set but does not match any option,\nno option will be selected and the Select component will be displayed as empty.\n\n**Note:** when both \"value\" and \"selected\" are both used (although discouraged),\nthe \"value\" property will take precedence.\n\n### Keyboard Handling\n\nThe `ui5-select` provides advanced keyboard handling.\n\n- [F4] / [Alt] + [Up] / [Alt] + [Down] / [Space] or [Enter] - Opens/closes the drop-down.\n- [Up] or [Down] - If the drop-down is closed - changes selection to the next or the previous option. If the drop-down is opened - moves focus to the next or the previous option.\n- [Space], [Enter] - If the drop-down is opened - selects the focused option.\n- [Escape] - Closes the drop-down without changing the selection.\n- [Home] - Navigates to first option\n- [End] - Navigates to the last option\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Select\";`\n\n`import \"@ui5/webcomponents/dist/Option\";`\n`import \"@ui5/webcomponents/dist/OptionCustom\";`", + "name": "Select", + "cssParts": [ + { + "description": "Used to style the popover element", + "name": "popover" + } + ], "slots": [ { "name": "default", - "description": "Holds the content associated with this tab.", - "_ui5propertyName": "content", - "_ui5type": { - "text": "Array<Node>" - }, - "_ui5privacy": "public" - }, - { - "name": "items", - "description": "Defines hierarchies with nested sub tabs.\n\n**Note:** Use `ui5-tab` and `ui5-tab-separator` for the intended design.", + "description": "Defines the component options.\n\n**Note:** Only one selected option is allowed.\nIf more than one option is defined as selected, the last one would be considered as the selected one.\n\n**Note:** Use the `ui5-option` component to define the desired options.", + "_ui5propertyName": "options", "_ui5type": { - "text": "Array<ITab>", + "text": "Array<IOption>", "references": [ { - "name": "ITab", + "name": "IOption", "package": "@ui5/webcomponents", - "module": "dist/TabContainer.js" + "module": "dist/Select.js" } ] }, "_ui5privacy": "public" - } - ], - "members": [ + }, { - "kind": "field", - "name": "text", - "type": { - "text": "string | undefined" - }, - "description": "The text to be displayed for the item.", - "default": "undefined", - "privacy": "public" + "name": "label", + "description": "Defines the HTML element that will be displayed in the component input part,\nrepresenting the selected option.\n\n**Note:** If not specified and `ui5-option-custom` is used,\neither the option's `display-text` or its textContent will be displayed.\n\n**Note:** If not specified and `ui5-option` is used,\nthe option's textContent will be displayed.", + "_ui5since": "1.17.0", + "_ui5type": { + "text": "Array<HTMLElement>" + }, + "_ui5privacy": "public" }, { - "kind": "field", - "name": "disabled", - "type": { - "text": "boolean" + "name": "valueStateMessage", + "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 component is in `Information`, `Critical` or `Negative` value state.\n\n**Note:** If the component has `suggestionItems`,\nthe `valueStateMessage` would be displayed as part of the same popover, if used on desktop, or dialog - on phone.", + "_ui5type": { + "text": "Array<HTMLElement>" }, - "default": "false", - "description": "Disabled tabs can't be selected.", - "privacy": "public" - }, + "_ui5privacy": "public" + } + ], + "members": [ { "kind": "field", - "name": "additionalText", + "name": "accessibleDescription", "type": { "text": "string | undefined" }, - "description": "Represents the \"additionalText\" text, which is displayed in the tab. In the cases when in the same time there are tabs with icons and tabs without icons, if a tab has no icon the \"additionalText\" is displayed larger.", + "description": "Defines the accessible description of the component.", "default": "undefined", - "privacy": "public" + "privacy": "public", + "_ui5since": "2.14.0" }, { "kind": "field", - "name": "icon", + "name": "accessibleDescriptionRef", "type": { "text": "string | undefined" }, - "description": "Defines the icon source URI to be displayed as graphical element within the component.\nThe SAP-icons font provides numerous built-in icons.\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "description": "Receives id(or many ids) of the elements that describe the select.", "default": "undefined", - "privacy": "public" + "privacy": "public", + "_ui5since": "2.14.0" }, { "kind": "field", - "name": "design", + "name": "accessibleName", "type": { - "text": "SemanticColor", - "references": [ - { - "name": "SemanticColor", - "package": "@ui5/webcomponents", - "module": "dist/types/SemanticColor.js" - } - ] + "text": "string | undefined" }, - "default": "\"Default\"", - "description": "Defines the component's design color.\n\nThe design is applied to:\n\n- the component icon\n- the `text` when the component overflows\n- the tab selection line\n\nAvailable designs are: `\"Default\"`, `\"Neutral\"`, `\"Positive\"`, `\"Critical\"` and `\"Negative\"`.\n\n**Note:** The design depends on the current theme.", - "privacy": "public" + "description": "Defines the accessible ARIA name of the component.", + "privacy": "public", + "default": "undefined", + "_ui5since": "1.0.0-rc.9" }, { "kind": "field", - "name": "selected", + "name": "accessibleNameRef", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Specifies if the component is selected.", - "privacy": "public" + "description": "Receives id(or many ids) of the elements that label the select.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.0.0-rc.15" }, { "kind": "field", - "name": "movable", + "name": "disabled", "type": { "text": "boolean" }, "default": "false", - "description": "Defines if the tab is movable.", - "privacy": "public", - "_ui5since": "2.0.0" - }, - { - "kind": "method", - "name": "getDomRefInStrip", - "return": { - "type": { - "text": "HTMLElement | undefined" - } - }, - "description": "Returns the DOM reference of the tab that is placed in the header.\n\n**Note:** Tabs, placed in the `items` slot of other tabs are not shown in the header. Calling this method on such tabs will return `undefined`.\n\n**Note:** If you need a DOM ref to the tab content please use the `getDomRef` method.", - "privacy": "public", - "_ui5since": "1.0.0-rc.16" - } - ], - "attributes": [ - { - "description": "The text to be displayed for the item.", - "name": "text", - "default": "undefined", - "fieldName": "text", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Disabled tabs can't be selected.", - "name": "disabled", - "default": "false", - "fieldName": "disabled", - "type": { - "text": "boolean" - } - }, - { - "description": "Represents the \"additionalText\" text, which is displayed in the tab. In the cases when in the same time there are tabs with icons and tabs without icons, if a tab has no icon the \"additionalText\" is displayed larger.", - "name": "additional-text", - "default": "undefined", - "fieldName": "additionalText", - "type": { - "text": "string | undefined" - } + "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is noninteractive.", + "privacy": "public" }, { - "description": "Defines the icon source URI to be displayed as graphical element within the component.\nThe SAP-icons font provides numerous built-in icons.\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", - "name": "icon", - "default": "undefined", - "fieldName": "icon", + "kind": "field", + "name": "name", "type": { "text": "string | undefined" - } - }, - { - "description": "Defines the component's design color.\n\nThe design is applied to:\n\n- the component icon\n- the `text` when the component overflows\n- the tab selection line\n\nAvailable designs are: `\"Default\"`, `\"Neutral\"`, `\"Positive\"`, `\"Critical\"` and `\"Negative\"`.\n\n**Note:** The design depends on the current theme.", - "name": "design", - "default": "\"Default\"", - "fieldName": "design", - "type": { - "text": "\"Positive\" | \"Critical\" | \"Negative\" | \"Default\" | \"Neutral\"" - } - }, - { - "description": "Specifies if the component is selected.", - "name": "selected", - "default": "false", - "fieldName": "selected", - "type": { - "text": "boolean" - } - }, - { - "description": "Defines if the tab is movable.", - "name": "movable", - "default": "false", - "fieldName": "movable", - "type": { - "text": "boolean" - } - } - ], - "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" - }, - "tagName": "ui5-tab", - "customElement": true, - "_ui5privacy": "public", - "_ui5abstract": true, - "_ui5implements": [ - { - "name": "ITab", - "package": "@ui5/webcomponents", - "module": "dist/TabContainer.js" - } - ] - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "Tab", - "module": "dist/Tab.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-tab", - "declaration": { - "name": "Tab", - "module": "dist/Tab.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/TabContainer.js", - "declarations": [ - { - "kind": "interface", - "name": "ITab", - "description": "Interface for components that may be slotted inside `ui5-tabcontainer` as items\n\n**Note:** Use directly `ui5-tab` or `ui5-tab-seprator`. Implementing the interface does not guarantee that the class can work as a tab.", - "_ui5privacy": "public" - }, - { - "kind": "class", - "description": "### Overview\n\nThe `ui5-tabcontainer` represents a collection of tabs with associated content.\nNavigation through the tabs changes the content display of the currently active content area.\nA tab can be labeled with text only, or icons with text.\n\n### Structure\n\nThe `ui5-tabcontainer` can hold two types of entities:\n\n- `ui5-tab` - contains all the information on an item (text and icon)\n- `ui5-tab-separator` - used to separate tabs with a line\n\n### Hierarchies\nMultiple sub tabs could be placed underneath one main tab. Nesting allows deeper hierarchies with indentations\nto indicate the level of each nested tab. When a tab has both sub tabs and own content its click area is split\nto allow the user to display the content or alternatively to expand / collapse the list of sub tabs.\n\n### Keyboard Handling\n\n#### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TabContainer.js\";`\n\n`import \"@ui5/webcomponents/dist/Tab.js\";` (for `ui5-tab`)\n\n`import \"@ui5/webcomponents/dist/TabSeparator.js\";` (for `ui5-tab-separator`)", - "name": "TabContainer", - "cssParts": [ - { - "description": "Used to style the content of the component", - "name": "content" - }, - { - "description": "Used to style the tabstrip of the component", - "name": "tabstrip" - } - ], - "slots": [ - { - "name": "default", - "description": "Defines the tabs.\n\n**Note:** Use `ui5-tab` and `ui5-tab-separator` for the intended design.", - "_ui5propertyName": "items", - "_ui5type": { - "text": "Array<ITab>", - "references": [ - { - "name": "ITab", - "package": "@ui5/webcomponents", - "module": "dist/TabContainer.js" - } - ] - }, - "_ui5privacy": "public" - }, - { - "name": "overflowButton", - "description": "Defines the button which will open the overflow menu. If nothing is provided to this slot,\nthe default button will be used.", - "_ui5since": "1.0.0-rc.9", - "_ui5type": { - "text": "Array<IButton>", - "references": [ - { - "name": "IButton", - "package": "@ui5/webcomponents", - "module": "dist/Button.js" - } - ] }, - "_ui5privacy": "public" + "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", + "default": "undefined", + "privacy": "public" }, - { - "name": "startOverflowButton", - "description": "Defines the button which will open the start overflow menu if available. If nothing is provided to this slot,\nthe default button will be used.", - "_ui5since": "1.1.0", - "_ui5type": { - "text": "Array<IButton>", - "references": [ - { - "name": "IButton", - "package": "@ui5/webcomponents", - "module": "dist/Button.js" - } - ] - }, - "_ui5privacy": "public" - } - ], - "members": [ { "kind": "field", - "name": "collapsed", + "name": "readonly", "type": { "text": "boolean" }, "default": "false", - "description": "Defines whether the tab content is collapsed.", - "privacy": "public" + "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.", + "privacy": "public", + "_ui5since": "1.21.0" }, { "kind": "field", - "name": "tabLayout", + "name": "required", "type": { - "text": "TabLayout", - "references": [ - { - "name": "TabLayout", - "package": "@ui5/webcomponents", - "module": "dist/types/TabLayout.js" - } - ] + "text": "boolean" }, - "default": "\"Standard\"", - "description": "Defines the alignment of the content and the `additionalText` of a tab.\n\n**Note:**\nThe content and the `additionalText` would be displayed vertically by default,\nbut when set to `Inline`, they would be displayed horizontally.", - "privacy": "public" + "default": "false", + "description": "Defines whether the component is required.", + "privacy": "public", + "_ui5since": "1.0.0-rc.9" }, { "kind": "field", - "name": "overflowMode", + "name": "selectedOption", "type": { - "text": "OverflowMode", + "text": "IOption | undefined", "references": [ { - "name": "OverflowMode", + "name": "IOption", "package": "@ui5/webcomponents", - "module": "dist/types/OverflowMode.js" + "module": "dist/Select.js" } ] }, - "default": "\"End\"", - "description": "Defines the overflow mode of the header (the tab strip). If you have a large number of tabs, only the tabs that can fit on screen will be visible.\nAll other tabs that can 't fit on the screen are available in an overflow tab \"More\".\n\n**Note:**\nOnly one overflow at the end would be displayed by default,\nbut when set to `StartAndEnd`, there will be two overflows on both ends, and tab order will not change on tab selection.", + "description": "Currently selected `ui5-option` element.", "privacy": "public", - "_ui5since": "1.1.0" + "default": "undefined", + "readonly": true }, { "kind": "field", - "name": "headerBackgroundDesign", + "name": "textSeparator", "type": { - "text": "BackgroundDesign", + "text": "SelectTextSeparator", "references": [ { - "name": "BackgroundDesign", + "name": "SelectTextSeparator", "package": "@ui5/webcomponents", - "module": "dist/types/BackgroundDesign.js" + "module": "dist/types/SelectTextSeparator.js" } ] }, - "default": "\"Solid\"", - "description": "Sets the background color of the Tab Container's header as `Solid`, `Transparent`, or `Translucent`.", + "default": "\"Dash\"", + "description": "Defines the separator type for the two columns layout when Select is in read-only mode.", "privacy": "public", - "_ui5since": "1.10.0" + "_ui5since": "2.16.0" }, { "kind": "field", - "name": "contentBackgroundDesign", + "name": "tooltip", "type": { - "text": "BackgroundDesign", - "references": [ - { - "name": "BackgroundDesign", - "package": "@ui5/webcomponents", - "module": "dist/types/BackgroundDesign.js" - } - ] + "text": "string | undefined" }, - "default": "\"Solid\"", - "description": "Sets the background color of the Tab Container's content as `Solid`, `Transparent`, or `Translucent`.", + "description": "Defines the tooltip of the select.", + "default": "undefined", "privacy": "public", - "_ui5since": "1.10.0" + "_ui5since": "2.8.0" }, { "kind": "field", - "name": "noAutoSelection", + "name": "value", + "description": "Defines the value of the component:\n\n- when get - returns the value of the component or the value/text content of the selected option.\n- when set - selects the option with matching `value` property or text content.\n\n**Note:** Use either the Select's value or the Options' selected property.\nMixed usage could result in unexpected behavior.\n\n**Note:** If the given value does not match any existing option,\nno option will be selected and the Select component will be displayed as empty.", + "privacy": "public", + "default": "\"\"", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Defines if automatic tab selection is deactivated.\n\n**Note:** By default, if none of the child tabs have the `selected` property set, the first tab will be automatically selected.\nSetting this property to `true` allows preventing this behavior.", - "privacy": "public", - "_ui5since": "2.9.0" + "_ui5since": "1.20.0", + "_ui5formProperty": true, + "_ui5formEvents": "change,liveChange" }, { "kind": "field", - "name": "allItems", + "name": "valueState", "type": { - "text": "Array<ITab>", + "text": "ValueState", "references": [ { - "name": "ITab", - "package": "@ui5/webcomponents", - "module": "dist/TabContainer.js" + "name": "ValueState", + "package": "@ui5/webcomponents-base", + "module": "dist/types/ValueState.js" } ] }, - "description": "Returns all slotted tabs and their subTabs in a flattened array.\nThe order of tabs is depth-first.", - "privacy": "public", - "default": "[]", - "readonly": true + "default": "\"None\"", + "description": "Defines the value state of the component.", + "privacy": "public" } ], "events": [ { - "name": "tab-select", + "name": "change", "_ui5privacy": "public", "type": { - "text": "CustomEvent<TabContainerTabSelectEventDetail>", + "text": "CustomEvent<SelectChangeEventDetail>", "references": [ { - "name": "TabContainerTabSelectEventDetail", + "name": "SelectChangeEventDetail", "package": "@ui5/webcomponents", - "module": "dist/TabContainer.js" + "module": "dist/Select.js" } ] }, - "description": "Fired when a tab is selected.", + "description": "Fired when the selected option changes.", "_ui5Cancelable": true, "_ui5allowPreventDefault": true, "_ui5Bubbles": true, - "_ui5since": "2.0.0", "_ui5parameters": [ { "type": { - "text": "Tab", + "text": "IOption", "references": [ { - "name": "Tab", + "name": "IOption", "package": "@ui5/webcomponents", - "module": "dist/Tab.js" + "module": "dist/Select.js" } ] }, - "name": "tab", - "_ui5privacy": "public", - "description": "The selected `tab`." - }, - { - "type": { - "text": "Integer" - }, - "name": "tabIndex", + "name": "selectedOption", "_ui5privacy": "public", - "description": "The selected `tab` index in the flattened array of all tabs and their subTabs, provided by the `allItems` getter." + "description": "the selected option." } ] }, { - "name": "move-over", + "name": "close", "_ui5privacy": "public", "type": { - "text": "CustomEvent<TabContainerMoveEventDetail>", - "references": [ - { - "name": "TabContainerMoveEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/TabContainer.js" - } - ] + "text": "CustomEvent" }, - "description": "Fired when element is being moved over the tab container.\n\nIf the new position is valid, prevent the default action of the event using `preventDefault()`.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": true, - "_ui5since": "2.0.0", - "_ui5parameters": [ - { - "type": { - "text": "object" - }, - "name": "source", - "_ui5privacy": "public", - "description": "Contains information about the moved element under `element` property." - }, - { - "type": { - "text": "object" - }, - "name": "destination", - "_ui5privacy": "public", - "description": "Contains information about the destination of the moved element. Has `element` and `placement` properties." - } - ] + "description": "Fired after the component's dropdown menu closes.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": false }, { - "name": "move", + "name": "live-change", "_ui5privacy": "public", "type": { - "text": "CustomEvent<TabContainerMoveEventDetail>", + "text": "CustomEvent<SelectLiveChangeEventDetail>", "references": [ { - "name": "TabContainerMoveEventDetail", + "name": "SelectLiveChangeEventDetail", "package": "@ui5/webcomponents", - "module": "dist/TabContainer.js" + "module": "dist/Select.js" } ] }, - "description": "Fired when element is moved to the tab container.\n\n**Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action.", + "description": "Fired when the user navigates through the options, but the selection is not finalized,\nor when pressing the ESC key to revert the current selection.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, "_ui5Bubbles": true, + "_ui5since": "1.17.0", "_ui5parameters": [ { "type": { - "text": "object" - }, - "name": "source", - "_ui5privacy": "public", - "description": "Contains information about the moved element under `element` property." - }, - { - "type": { - "text": "object" + "text": "IOption", + "references": [ + { + "name": "IOption", + "package": "@ui5/webcomponents", + "module": "dist/Select.js" + } + ] }, - "name": "destination", + "name": "selectedOption", "_ui5privacy": "public", - "description": "Contains information about the destination of the moved element. Has `element` and `placement` properties." + "description": "the selected option." } ] + }, + { + "name": "open", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired after the component's dropdown menu opens.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": false } ], "attributes": [ { - "description": "Defines whether the tab content is collapsed.", - "name": "collapsed", - "default": "false", - "fieldName": "collapsed", + "description": "Defines the accessible description of the component.", + "name": "accessible-description", + "default": "undefined", + "fieldName": "accessibleDescription", "type": { - "text": "boolean" + "text": "string | undefined" } }, { - "description": "Defines the alignment of the content and the `additionalText` of a tab.\n\n**Note:**\nThe content and the `additionalText` would be displayed vertically by default,\nbut when set to `Inline`, they would be displayed horizontally.", - "name": "tab-layout", - "default": "\"Standard\"", - "fieldName": "tabLayout", + "description": "Receives id(or many ids) of the elements that describe the select.", + "name": "accessible-description-ref", + "default": "undefined", + "fieldName": "accessibleDescriptionRef", "type": { - "text": "\"Standard\" | \"Inline\"" + "text": "string | undefined" } }, { - "description": "Defines the overflow mode of the header (the tab strip). If you have a large number of tabs, only the tabs that can fit on screen will be visible.\nAll other tabs that can 't fit on the screen are available in an overflow tab \"More\".\n\n**Note:**\nOnly one overflow at the end would be displayed by default,\nbut when set to `StartAndEnd`, there will be two overflows on both ends, and tab order will not change on tab selection.", - "name": "overflow-mode", - "default": "\"End\"", - "fieldName": "overflowMode", + "description": "Defines the accessible ARIA name of the component.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", "type": { - "text": "\"End\" | \"StartAndEnd\"" + "text": "string | undefined" } }, { - "description": "Sets the background color of the Tab Container's header as `Solid`, `Transparent`, or `Translucent`.", - "name": "header-background-design", - "default": "\"Solid\"", - "fieldName": "headerBackgroundDesign", - "type": { - "text": "\"Transparent\" | \"Solid\" | \"Translucent\"" + "description": "Receives id(or many ids) of the elements that label the select.", + "name": "accessible-name-ref", + "default": "undefined", + "fieldName": "accessibleNameRef", + "type": { + "text": "string | undefined" } }, { - "description": "Sets the background color of the Tab Container's content as `Solid`, `Transparent`, or `Translucent`.", - "name": "content-background-design", - "default": "\"Solid\"", - "fieldName": "contentBackgroundDesign", + "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is noninteractive.", + "name": "disabled", + "default": "false", + "fieldName": "disabled", "type": { - "text": "\"Transparent\" | \"Solid\" | \"Translucent\"" + "text": "boolean" } }, { - "description": "Defines if automatic tab selection is deactivated.\n\n**Note:** By default, if none of the child tabs have the `selected` property set, the first tab will be automatically selected.\nSetting this property to `true` allows preventing this behavior.", - "name": "no-auto-selection", + "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", + "name": "name", + "default": "undefined", + "fieldName": "name", + "type": { + "text": "string | undefined" + } + }, + { + "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.", + "name": "readonly", "default": "false", - "fieldName": "noAutoSelection", + "fieldName": "readonly", "type": { "text": "boolean" } }, { - "description": "Returns all slotted tabs and their subTabs in a flattened array.\nThe order of tabs is depth-first.", - "name": "all-items", - "default": "[]", - "fieldName": "allItems", + "description": "Defines whether the component is required.", + "name": "required", + "default": "false", + "fieldName": "required", + "type": { + "text": "boolean" + } + }, + { + "description": "Currently selected `ui5-option` element.", + "name": "selected-option", + "default": "undefined", + "fieldName": "selectedOption", "type": { "text": "any" } - } - ], - "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" - }, - "tagName": "ui5-tabcontainer", - "customElement": true, - "_ui5privacy": "public" - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "TabContainer", - "module": "dist/TabContainer.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-tabcontainer", - "declaration": { - "name": "TabContainer", - "module": "dist/TabContainer.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/TabSeparator.js", - "declarations": [ - { - "kind": "class", - "description": "The `ui5-tab-separator` represents a vertical line to separate tabs inside a `ui5-tabcontainer`.", - "name": "TabSeparator", - "members": [ + }, { - "kind": "method", - "name": "getDomRefInStrip", - "return": { - "type": { - "text": "HTMLElement | undefined" - } - }, - "description": "Returns the DOM reference of the separator that is placed in the header.\n\n**Note:** Separators, placed in the `items` slot of other tabs are not shown in the header. Calling this method on such separators will return `undefined`.", - "privacy": "public" + "description": "Defines the separator type for the two columns layout when Select is in read-only mode.", + "name": "text-separator", + "default": "\"Dash\"", + "fieldName": "textSeparator", + "type": { + "text": "\"Bullet\" | \"Dash\" | \"VerticalLine\"" + } + }, + { + "description": "Defines the tooltip of the select.", + "name": "tooltip", + "default": "undefined", + "fieldName": "tooltip", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the value of the component:\n\n- when get - returns the value of the component or the value/text content of the selected option.\n- when set - selects the option with matching `value` property or text content.\n\n**Note:** Use either the Select's value or the Options' selected property.\nMixed usage could result in unexpected behavior.\n\n**Note:** If the given value does not match any existing option,\nno option will be selected and the Select component will be displayed as empty.", + "name": "value", + "default": "\"\"", + "fieldName": "value", + "type": { + "text": "any" + } + }, + { + "description": "Defines the value state of the component.", + "name": "value-state", + "default": "\"None\"", + "fieldName": "valueState", + "type": { + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" + } } ], "superclass": { @@ -23858,17 +20994,10 @@ "package": "@ui5/webcomponents-base", "module": "dist/UI5Element.js" }, - "tagName": "ui5-tab-separator", + "tagName": "ui5-select", "customElement": true, - "_ui5privacy": "public", - "_ui5abstract": true, - "_ui5implements": [ - { - "name": "ITab", - "package": "@ui5/webcomponents", - "module": "dist/TabContainer.js" - } - ] + "_ui5since": "0.8.0", + "_ui5privacy": "public" } ], "exports": [ @@ -23876,96 +21005,40 @@ "kind": "js", "name": "default", "declaration": { - "name": "TabSeparator", - "module": "dist/TabSeparator.js" + "name": "Select", + "module": "dist/Select.js" } }, { "kind": "custom-element-definition", - "name": "ui5-tab-separator", + "name": "ui5-select", "declaration": { - "name": "TabSeparator", - "module": "dist/TabSeparator.js" + "name": "Select", + "module": "dist/Select.js" } } ] }, { "kind": "javascript-module", - "path": "dist/Table.js", + "path": "dist/Slider.js", "declarations": [ - { - "kind": "interface", - "name": "ITableFeature", - "description": "Interface for components that can be slotted inside the `features` slot of the `ui5-table`.", - "_ui5experimental": true, - "_ui5privacy": "public" - }, - { - "kind": "interface", - "name": "ITableGrowing", - "description": "Interface for components that can be slotted inside the `features` slot of the `ui5-table`\nand provide growing/data loading functionality.", - "_ui5experimental": true, - "_ui5privacy": "public" - }, { "kind": "class", - "description": "### Overview\n\nThe `ui5-table` component provides a set of sophisticated features for displaying and dealing with vast amounts of data in a responsive manner.\nTo render the `ui5-table`, you need to define the columns and rows. You can use the provided `ui5-table-header-row` and `ui5-table-row` components for this purpose.\n\n### Features\n\nThe `ui5-table` can be enhanced in its functionalities by applying different features.\nFeatures can be slotted into the `features` slot, to enable them in the component.\nFeatures need to be imported separately, as they are not enabled by default.\n\nThe following features are currently available:\n\n* [TableSelectionMulti](../TableSelectionMulti) - adds multi-selection capabilities to the table\n* [TableSelectionSingle](../TableSelectionSingle) - adds single-selection capabilities to the table\n* [TableGrowing](../TableGrowing) - provides growing capabilities to load more data\n* [TableVirtualizer](../TableVirtualizer) - adds virtualization capabilities to the table\n\n### Keyboard Handling\n\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\nFurthermore, you can interact with `ui5-table` via the following keys:\n\nIf the focus is on a row, the following keyboard shortcuts are available:\n* <kbd>Down</kbd> - Navigates down\n* <kbd>Up</kbd> - Navigates up\n* <kbd>Right</kbd> - Selects the first cell of the row\n* <kbd>Space</kbd> - Toggles the selection of the row\n* <kbd>Ctrl/Cmd + A</kbd> - In multi selection mode, toggles the selection of all rows\n* <kbd>Home</kbd> - Navigates to the first row, if the focus is on the first row, navigates to the header row\n* <kbd>End</kbd> - Navigates to the last row, if the focus is on the last row, navigates to the growing button\n* <kbd>Page Up</kbd> - Navigates one page up, if the focus is on the first row, navigates to the header row\n* <kbd>Page Down</kbd> - Navigates one page down, if the focus is on the last row, navigates to the growing button\n* <kbd>F2</kbd> - Focuses the first tabbable element in the row\n* <kbd>F7</kbd> - If focus position is remembered, moves focus to the corresponding focus position row, otherwise to the first tabbable element within the row\n* <kbd>[Shift]Tab</kbd> - Move focus to the element in the tab chain outside the table\n\nIf the focus is on a cell, the following keyboard shortcuts are available:\n* <kbd>Down</kbd> - Navigates down\n* <kbd>Up</kbd> - Navigates up\n* <kbd>Right</kbd> - Navigates right\n* <kbd>Left</kbd> - Navigates left, if the focus is on the first cell of the row, the focus is moved to the row.\n* <kbd>Home</kbd> - Navigates to the first cell of the current row, if the focus is on the first cell, navigates to the corresponding row\n* <kbd>End</kbd> - Navigates to the last cell of the current row, if the focus is on the last cell, navigates to the corresponding row\n* <kbd>Page Up</kbd> - Navigates one page up while keeping the focus in same column\n* <kbd>Page Down</kbd> - Navigates one page down while keeping the focus in same column\n* <kbd>F2</kbd> - Toggles the focus between the first tabbable cell content and the cell\n* <kbd>Enter</kbd> - Focuses the first tabbable cell content\n* <kbd>F7</kbd> - If the focus is on an interactive element inside a row, moves focus to the corresponding row and remembers the focus position of the element within the row\n* <kbd>[Shift]Tab</kbd> - Move focus to the element in the tab chain outside the table\n\nIf the focus is on an interactive cell content, the following keyboard shortcuts are available:\n* <kbd>Down</kbd> - Move the focus to the interactive element in the same column of the previous row, unless the focused element prevents the default\n* <kbd>Up</kbd> - Move the focus to the interactive element in the same column of the next row, unless the focused element prevents the default\n* <kbd>[Shift]Tab</kbd> - Move the focus to the element in the tab chain\n\n### Accessibility\n\nThe `ui5-table` follows the [ARIA grid design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/grid/).\nThis pattern enables cell-based keyboard navigation and, as explained above, we also support row-based keyboard navigation.\nSince the grid design pattern does not inherently provide row-based keyboard behavior, if the focus is on a row, not only the row information but also the corresponding column headers for each cell must be announced.\nThis can only be achieved through a custom accessibility announcement.\nTo support this, UI5 Web Components expose its own accessibility metadata via the `accessibilityInfo` property.\nThe `ui5-table` uses this information to create the required custom announcements dynamically.\nIf you include custom web components inside table cells that are not part of the standard UI5 Web Components set, their accessibility information can be provided using the `data-ui5-acc-text` attribute.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Table.js\";` (`ui5-table`)\\\n`import \"@ui5/webcomponents/dist/TableRow.js\";` (`ui5-table-row`)\\\n`import \"@ui5/webcomponents/dist/TableCell.js\";` (`ui5-table-cell`)\\\n`import \"@ui5/webcomponents/dist/TableHeaderRow.js\";` (`ui5-table-header-row`)\\\n`import \"@ui5/webcomponents/dist/TableHeaderCell.js\";` (`ui5-table-header-cell`)", - "name": "Table", - "slots": [ - { - "name": "default", - "description": "Defines the rows of the component.\n\n**Note:** Use `ui5-table-row` for the intended design.", - "_ui5propertyName": "rows", - "_ui5type": { - "text": "Array<TableRow>", - "references": [ - { - "name": "TableRow", - "package": "@ui5/webcomponents", - "module": "dist/TableRow.js" - } - ] - }, - "_ui5privacy": "public" - }, + "description": "### Overview\nThe Slider component represents a numerical range and a handle (grip).\nThe purpose of the component is to enable visual selection of a value in\na continuous numerical range by moving an adjustable handle.\n\n### Structure\nThe most important properties of the Slider are:\n\n- min - The minimum value of the slider range.\n- max - The maximum value of the slider range.\n- value - The current value of the slider range.\n- step - Determines the increments in which the slider will move.\n- showTooltip - Determines if a tooltip should be displayed above the handle.\n- showTickmarks - Displays a visual divider between the step values.\n- labelInterval - Labels some or all of the tickmarks with their values.\n\n### Usage\nThe most common use case is to select values on a continuous numerical scale (e.g. temperature, volume, etc. ).\n\n### Responsive Behavior\nThe `ui5-slider` component adjusts to the size of its parent container by recalculating and\nresizing the width of the control. You can move the slider handle in several different ways:\n\n- Drag and drop the handle to the desired value.\n- Click/tap on the range bar to move the handle to that location.\n\n### Keyboard Handling\n\n- `Left or Down Arrow` - Moves the handle one step to the left, effectively decreasing the component's value by `step` amount;\n- `Right or Up Arrow` - Moves the handle one step to the right, effectively increasing the component's value by `step` amount;\n- `Left or Down Arrow + Ctrl/Cmd` - Moves the handle to the left with step equal to 1/10th of the entire range, effectively decreasing the component's value by 1/10th of the range;\n- `Right or Up Arrow + Ctrl/Cmd` - Moves the handle to the right with step equal to 1/10th of the entire range, effectively increasing the component's value by 1/10th of the range;\n- `Plus` - Same as `Right or Up Arrow`;\n- `Minus` - Same as `Left or Down Arrow`;\n- `Home` - Moves the handle to the beginning of the range;\n- `End` - Moves the handle to the end of the range;\n- `Page Up` - Same as `Right or Up + Ctrl/Cmd`;\n- `Page Down` - Same as `Left or Down + Ctrl/Cmd`;\n- `Escape` - Resets the value property after interaction, to the position prior the component's focusing;\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Slider.js\";`", + "name": "Slider", + "cssParts": [ { - "name": "headerRow", - "description": "Defines the header row of the component.\n\n**Note:** Use `ui5-table-header-row` for the intended design.", - "_ui5type": { - "text": "Array<TableHeaderRow>", - "references": [ - { - "name": "TableHeaderRow", - "package": "@ui5/webcomponents", - "module": "dist/TableHeaderRow.js" - } - ] - }, - "_ui5privacy": "public" + "description": "Used to style the handle of the `ui5-slider`.", + "name": "handle" }, { - "name": "noData", - "description": "Defines the custom visualization if there is no data available.", - "_ui5type": { - "text": "Array<HTMLElement>" - }, - "_ui5privacy": "public" + "description": "Used to style the progress bar, which shows the progress of the `ui5-slider`.", + "name": "progress-bar" }, { - "name": "features", - "description": "Defines the features of the component.", - "_ui5type": { - "text": "Array<ITableFeature>", - "references": [ - { - "name": "ITableFeature", - "package": "@ui5/webcomponents", - "module": "dist/Table.js" - } - ] - }, - "_ui5privacy": "public" + "description": "Used to style the progress container, the horizontal bar that visually represents the range between the minimum and maximum values, of the `ui5-slider`.", + "name": "progress-container" } ], "members": [ @@ -23977,262 +21050,111 @@ }, "description": "Defines the accessible ARIA name of the component.", "default": "undefined", - "privacy": "public" + "privacy": "public", + "_ui5since": "1.4.0" }, { "kind": "field", - "name": "accessibleNameRef", + "name": "disabled", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Identifies the element (or elements) that labels the component.", - "default": "undefined", + "default": "false", + "description": "Defines whether the slider is in disabled state.", "privacy": "public" }, { "kind": "field", - "name": "noDataText", + "name": "editableTooltip", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Defines the text to be displayed when there are no rows in the component.", - "default": "undefined", + "default": "false", + "description": "\nIndicates whether input fields should be used as tooltips for the handles.\n\n**Note:** Setting this option to true will only work if showTooltip is set to true.\n**Note:** In order for the component to comply with the accessibility standard, it is recommended to set the editableTooltip property to true.", "privacy": "public" }, { "kind": "field", - "name": "overflowMode", + "name": "labelInterval", "type": { - "text": "TableOverflowMode", - "references": [ - { - "name": "TableOverflowMode", - "package": "@ui5/webcomponents", - "module": "dist/types/TableOverflowMode.js" - } - ] + "text": "number" }, - "default": "\"Scroll\"", - "description": "Defines the mode of the <code>ui5-table</code> overflow behavior.\n\nAvailable options are:\n\n<code>Scroll</code> - Columns are shown as regular columns and horizontal scrolling is enabled.\n<code>Popin</code> - Columns are shown as pop-ins instead of regular columns.", + "default": "0", + "description": "Displays a label with a value on every N-th step.\n\n**Note:** The step and tickmarks properties must be enabled.\nExample - if the step value is set to 2 and the label interval is also specified to 2 - then every second\ntickmark will be labelled, which means every 4th value number.", "privacy": "public" }, { "kind": "field", - "name": "loading", + "name": "max", "type": { - "text": "boolean" + "text": "number" }, - "default": "false", - "description": "Defines if the loading indicator should be shown.\n\n**Note:** When the component is loading, it is not interactive.", + "default": "100", + "description": "Defines the maximum value of the slider.", "privacy": "public" }, { "kind": "field", - "name": "loadingDelay", + "name": "min", "type": { "text": "number" }, - "default": "1000", - "description": "Defines the delay in milliseconds, after which the loading indicator will show up for this component.", + "default": "0", + "description": "Defines the minimum value of the slider.", "privacy": "public" }, { "kind": "field", - "name": "rowActionCount", + "name": "name", "type": { - "text": "number" + "text": "string | undefined" }, - "default": "0", - "description": "Defines the maximum number of row actions that is displayed, which determines the width of the row action column.\n\n**Note:** It is recommended to use a maximum of 3 row actions, as exceeding this limit may take up too much space on smaller screens.", + "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", + "default": "undefined", "privacy": "public", - "_ui5since": "2.7.0" + "_ui5since": "2.0.0" }, { "kind": "field", - "name": "alternateRowColors", + "name": "showTickmarks", "type": { "text": "boolean" }, "default": "false", - "description": "Determines whether the table rows are displayed with alternating background colors.", - "privacy": "public", - "_ui5since": "2.17" - } - ], - "events": [ - { - "name": "row-click", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent<TableRowClickEventDetail>", - "references": [ - { - "name": "TableRowClickEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/Table.js" - } - ] - }, - "description": "Fired when an interactive row is clicked.\n\n**Note:** This event is not fired if the `behavior` property of the selection component is set to `RowOnly`.\nIn that case, use the `change` event of the selection component instead.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5parameters": [ - { - "type": { - "text": "TableRow", - "references": [ - { - "name": "TableRow", - "package": "@ui5/webcomponents", - "module": "dist/TableRow.js" - } - ] - }, - "name": "row", - "_ui5privacy": "public", - "description": "The row instance" - } - ] + "description": "Enables tickmarks visualization for each step.\n\n**Note:** The step must be a positive number.", + "privacy": "public" }, { - "name": "move-over", - "_ui5privacy": "public", + "kind": "field", + "name": "showTooltip", "type": { - "text": "CustomEvent<TableMoveEventDetail>", - "references": [ - { - "name": "TableMoveEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/Table.js" - } - ] + "text": "boolean" }, - "description": "Fired when a movable item is moved over a potential drop target during a dragging operation.\n\nIf the new position is valid, prevent the default action of the event using `preventDefault()`.\n\n**Note:** If the dragging operation is a cross-browser operation or files are moved to a potential drop target,\nthe `source` parameter will be `null`.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": true, - "_ui5parameters": [ - { - "type": { - "text": "Event" - }, - "name": "originalEvent", - "_ui5privacy": "public", - "description": "The original `dragover` event" - }, - { - "type": { - "text": "object" - }, - "name": "source", - "_ui5privacy": "public", - "description": "The source object" - }, - { - "type": { - "text": "object" - }, - "name": "destination", - "_ui5privacy": "public", - "description": "The destination object" - } - ] + "default": "false", + "description": "Enables handle tooltip displaying the current value.", + "privacy": "public" }, { - "name": "move", - "_ui5privacy": "public", + "kind": "field", + "name": "step", "type": { - "text": "CustomEvent<TableMoveEventDetail>", - "references": [ - { - "name": "TableMoveEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/Table.js" - } - ] + "text": "number" }, - "description": "Fired when a movable list item is dropped onto a drop target.\n\n**Notes:**\n\nThe `move` event is fired only if there was a preceding `move-over` with prevented default action.\n\nIf the dragging operation is a cross-browser operation or files are moved to a potential drop target,\nthe `source` parameter will be `null`.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5parameters": [ - { - "type": { - "text": "Event" - }, - "name": "originalEvent", - "_ui5privacy": "public", - "description": "The original `drop` event" - }, - { - "type": { - "text": "object" - }, - "name": "source", - "_ui5privacy": "public", - "description": "The source object" - }, - { - "type": { - "text": "object" - }, - "name": "destination", - "_ui5privacy": "public", - "description": "The destination object" - } - ] + "default": "1", + "description": "Defines the size of the slider's selection intervals (e.g. min = 0, max = 10, step = 5 would result in possible selection of the values 0, 5, 10).\n\n**Note:** If set to 0 the slider handle movement is disabled.", + "privacy": "public" }, { - "name": "row-action-click", - "_ui5privacy": "public", + "kind": "field", + "name": "value", "type": { - "text": "CustomEvent<TableRowActionClickEventDetail>", - "references": [ - { - "name": "TableRowActionClickEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/Table.js" - } - ] + "text": "number" }, - "description": "Fired when a row action is clicked.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5since": "2.6.0", - "_ui5parameters": [ - { - "type": { - "text": "TableRowActionBase", - "references": [ - { - "name": "TableRowActionBase", - "package": "@ui5/webcomponents", - "module": "dist/TableRowActionBase.js" - } - ] - }, - "name": "action", - "_ui5privacy": "public", - "description": "The row action instance" - }, - { - "type": { - "text": "TableRow", - "references": [ - { - "name": "TableRow", - "package": "@ui5/webcomponents", - "module": "dist/TableRow.js" - } - ] - }, - "name": "row", - "_ui5privacy": "public", - "description": "The row instance" - } - ] + "default": "0", + "privacy": "public", + "description": "Current value of the slider", + "_ui5formProperty": true, + "_ui5formEvents": "change,input" } ], "attributes": [ @@ -24246,167 +21168,127 @@ } }, { - "description": "Identifies the element (or elements) that labels the component.", - "name": "accessible-name-ref", - "default": "undefined", - "fieldName": "accessibleNameRef", + "description": "Defines whether the slider is in disabled state.", + "name": "disabled", + "default": "false", + "fieldName": "disabled", "type": { - "text": "string | undefined" + "text": "boolean" } }, { - "description": "Defines the text to be displayed when there are no rows in the component.", - "name": "no-data-text", - "default": "undefined", - "fieldName": "noDataText", + "description": "\nIndicates whether input fields should be used as tooltips for the handles.\n\n**Note:** Setting this option to true will only work if showTooltip is set to true.\n**Note:** In order for the component to comply with the accessibility standard, it is recommended to set the editableTooltip property to true.", + "name": "editable-tooltip", + "default": "false", + "fieldName": "editableTooltip", "type": { - "text": "string | undefined" + "text": "boolean" } }, { - "description": "Defines the mode of the <code>ui5-table</code> overflow behavior.\n\nAvailable options are:\n\n<code>Scroll</code> - Columns are shown as regular columns and horizontal scrolling is enabled.\n<code>Popin</code> - Columns are shown as pop-ins instead of regular columns.", - "name": "overflow-mode", - "default": "\"Scroll\"", - "fieldName": "overflowMode", + "description": "Displays a label with a value on every N-th step.\n\n**Note:** The step and tickmarks properties must be enabled.\nExample - if the step value is set to 2 and the label interval is also specified to 2 - then every second\ntickmark will be labelled, which means every 4th value number.", + "name": "label-interval", + "default": "0", + "fieldName": "labelInterval", "type": { - "text": "\"Scroll\" | \"Popin\"" + "text": "number" } }, { - "description": "Defines if the loading indicator should be shown.\n\n**Note:** When the component is loading, it is not interactive.", - "name": "loading", - "default": "false", - "fieldName": "loading", + "description": "Defines the maximum value of the slider.", + "name": "max", + "default": "100", + "fieldName": "max", "type": { - "text": "boolean" + "text": "number" } }, { - "description": "Defines the delay in milliseconds, after which the loading indicator will show up for this component.", - "name": "loading-delay", - "default": "1000", - "fieldName": "loadingDelay", + "description": "Defines the minimum value of the slider.", + "name": "min", + "default": "0", + "fieldName": "min", "type": { "text": "number" } }, { - "description": "Defines the maximum number of row actions that is displayed, which determines the width of the row action column.\n\n**Note:** It is recommended to use a maximum of 3 row actions, as exceeding this limit may take up too much space on smaller screens.", - "name": "row-action-count", - "default": "0", - "fieldName": "rowActionCount", + "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", + "name": "name", + "default": "undefined", + "fieldName": "name", "type": { - "text": "number" + "text": "string | undefined" } }, { - "description": "Determines whether the table rows are displayed with alternating background colors.", - "name": "alternate-row-colors", + "description": "Enables tickmarks visualization for each step.\n\n**Note:** The step must be a positive number.", + "name": "show-tickmarks", "default": "false", - "fieldName": "alternateRowColors", + "fieldName": "showTickmarks", "type": { "text": "boolean" } - } - ], - "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" - }, - "tagName": "ui5-table", - "customElement": true, - "_ui5since": "2.0.0", - "_ui5privacy": "public" - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "Table", - "module": "dist/Table.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-table", - "declaration": { - "name": "Table", - "module": "dist/Table.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/TableCell.js", - "declarations": [ - { - "kind": "class", - "description": "### Overview\n\nThe `ui5-table-cell` represents a cell inside of a `ui5-table`.\nIt is tightly coupled to the `ui5-table` and thus should only be used in the table component.\n\n### ES6 Module Import\n\n`import @ui5/webcomponents/dist/TableCell.js;`", - "name": "TableCell", - "members": [ + }, { - "kind": "field", - "name": "horizontalAlign", + "description": "Enables handle tooltip displaying the current value.", + "name": "show-tooltip", + "default": "false", + "fieldName": "showTooltip", "type": { - "text": "TableCellHorizontalAlign | undefined", - "references": [ - { - "name": "TableCellHorizontalAlign", - "package": "@ui5/webcomponents", - "module": "dist/types/TableCellHorizontalAlign.js" - } - ] - }, - "description": "Determines the horizontal alignment of table cells.", - "default": "undefined", - "privacy": "public", - "inheritedFrom": { - "name": "TableCellBase", - "module": "dist/TableCellBase.js" + "text": "boolean" + } + }, + { + "description": "Defines the size of the slider's selection intervals (e.g. min = 0, max = 10, step = 5 would result in possible selection of the values 0, 5, 10).\n\n**Note:** If set to 0 the slider handle movement is disabled.", + "name": "step", + "default": "1", + "fieldName": "step", + "type": { + "text": "number" + } + }, + { + "description": "Current value of the slider", + "name": "value", + "default": "0", + "fieldName": "value", + "type": { + "text": "number" } } ], "superclass": { - "name": "TableCellBase", + "name": "SliderBase", "package": "@ui5/webcomponents", - "module": "dist/TableCellBase.js" + "module": "dist/SliderBase.js" }, - "tagName": "ui5-table-cell", + "tagName": "ui5-slider", "customElement": true, - "_ui5since": "2.0.0", + "_ui5since": "1.0.0-rc.11", "_ui5privacy": "public", - "slots": [ + "events": [ { - "name": "default", - "description": "Defines the content of the component.", - "_ui5propertyName": "content", - "_ui5type": { - "text": "Array<Node>" - }, + "name": "change", "_ui5privacy": "public", - "inheritedFrom": { - "name": "TableCellBase", - "module": "dist/TableCellBase.js" - } - } - ], - "attributes": [ + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the value changes and the user has finished interacting with the slider.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true + }, { - "description": "Determines the horizontal alignment of table cells.", - "name": "horizontal-align", - "default": "undefined", - "fieldName": "horizontalAlign", + "name": "input", + "_ui5privacy": "public", "type": { - "text": "\"Start\" | \"End\" | \"Center\" | \"Left\" | \"Right\" | undefined" + "text": "CustomEvent" }, - "inheritedFrom": { - "name": "TableCellBase", - "module": "dist/TableCellBase.js" - } + "description": "Fired when the value changes due to user interaction that is not yet finished - during mouse/touch dragging.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true } ] } @@ -24416,191 +21298,151 @@ "kind": "js", "name": "default", "declaration": { - "name": "TableCell", - "module": "dist/TableCell.js" + "name": "Slider", + "module": "dist/Slider.js" } }, { "kind": "custom-element-definition", - "name": "ui5-table-cell", + "name": "ui5-slider", "declaration": { - "name": "TableCell", - "module": "dist/TableCell.js" + "name": "Slider", + "module": "dist/Slider.js" } } ] }, { "kind": "javascript-module", - "path": "dist/TableCellBase.js", + "path": "dist/SliderBase.js", "declarations": [ { "kind": "class", - "description": "A class to serve as a foundation for the `TableCell` and `TableHeaderCell` classes.", - "name": "TableCellBase", - "slots": [ - { - "name": "default", - "description": "Defines the content of the component.", - "_ui5propertyName": "content", - "_ui5type": { - "text": "Array<Node>" - }, - "_ui5privacy": "public" - } - ], + "description": "### Overview", + "name": "SliderBase", "members": [ { "kind": "field", - "name": "horizontalAlign", + "name": "accessibleName", "type": { - "text": "TableCellHorizontalAlign | undefined", - "references": [ - { - "name": "TableCellHorizontalAlign", - "package": "@ui5/webcomponents", - "module": "dist/types/TableCellHorizontalAlign.js" - } - ] + "text": "string | undefined" }, - "description": "Determines the horizontal alignment of table cells.", + "description": "Defines the accessible ARIA name of the component.", "default": "undefined", + "privacy": "public", + "_ui5since": "1.4.0" + }, + { + "kind": "field", + "name": "disabled", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the slider is in disabled state.", "privacy": "public" - } - ], - "attributes": [ + }, { - "description": "Determines the horizontal alignment of table cells.", - "name": "horizontal-align", - "default": "undefined", - "fieldName": "horizontalAlign", + "kind": "field", + "name": "editableTooltip", "type": { - "text": "\"Start\" | \"End\" | \"Center\" | \"Left\" | \"Right\" | undefined" - } - } - ], - "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" - }, - "customElement": true, - "_ui5since": "2.0.0", - "_ui5privacy": "public", - "_ui5abstract": true - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "TableCellBase", - "module": "dist/TableCellBase.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/TableCustomAnnouncement.js", - "declarations": [], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "TableCustomAnnouncement", - "module": "dist/TableCustomAnnouncement.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/TableDragAndDrop.js", - "declarations": [], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "TableDragAndDrop", - "module": "dist/TableDragAndDrop.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/TableExtension.js", - "declarations": [], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "TableExtension", - "module": "dist/TableExtension.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/TableGrowing.js", - "declarations": [ - { - "kind": "class", - "description": "### Overview\n\nThe `ui5-table-growing` component is used inside the `ui5-table` to add a growing/data loading functionalities\nto the table.\n\nThe component offers two options:\n* Button - a More button is displayed, clicking it will load more data.\n* Scroll - additional data is loaded automatically when the user scrolls to the end of the table.\n\n### Usage\n\nThe `ui5-table-growing` component is only used inside the `ui5-table` component as a feature.\nIt has to be slotted inside the `ui5-table` in the `features` slot.\nThe component is not intended to be used as a standalone component.\n\n```html\n<ui5-table>\n\t<ui5-table-growing mode=\"Button\" text=\"More\" slot=\"features\"></ui5-table-growing>\n</ui5-table>\n```\n\n**Notes**:\n* When the `ui5-table-growing` component is used with the `Scroll` mode and the table is currently not scrollable,\nthe component will render a growing button instead to ensure growing capabilities until the table becomes scrollable.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TableGrowing.js\";`", - "name": "TableGrowing", - "members": [ + "text": "boolean" + }, + "default": "false", + "description": "\nIndicates whether input fields should be used as tooltips for the handles.\n\n**Note:** Setting this option to true will only work if showTooltip is set to true.\n**Note:** In order for the component to comply with the accessibility standard, it is recommended to set the editableTooltip property to true.", + "privacy": "public" + }, { "kind": "field", - "name": "mode", + "name": "labelInterval", "type": { - "text": "TableGrowingMode", - "references": [ - { - "name": "TableGrowingMode", - "package": "@ui5/webcomponents", - "module": "dist/types/TableGrowingMode.js" - } - ] + "text": "number" }, - "default": "\"Button\"", - "description": "Defines the mode of the <code>ui5-table</code> growing.\n\nAvailable options are:\n\nButton - Shows a More button at the bottom of the table, pressing it will load more rows.\n\nScroll - The rows are loaded automatically by scrolling to the bottom of the table. If the table is not scrollable,\na growing button will be rendered instead to ensure growing functionality.", + "default": "0", + "description": "Displays a label with a value on every N-th step.\n\n**Note:** The step and tickmarks properties must be enabled.\nExample - if the step value is set to 2 and the label interval is also specified to 2 - then every second\ntickmark will be labelled, which means every 4th value number.", "privacy": "public" }, { "kind": "field", - "name": "text", + "name": "max", "type": { - "text": "string | undefined" + "text": "number" }, - "description": "Defines the text that will be displayed inside the growing button.\nHas no effect when mode is set to `Scroll`.\n\n**Note:** When not provided and the mode is set to Button, a default text is displayed, corresponding to the\ncurrent language.", - "default": "undefined", + "default": "100", + "description": "Defines the maximum value of the slider.", "privacy": "public" }, { "kind": "field", - "name": "subtext", + "name": "min", + "type": { + "text": "number" + }, + "default": "0", + "description": "Defines the minimum value of the slider.", + "privacy": "public" + }, + { + "kind": "field", + "name": "name", "type": { "text": "string | undefined" }, - "description": "Defines the text that will be displayed below the `text` inside the growing button.\nHas no effect when mode is set to Scroll.", + "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", "default": "undefined", + "privacy": "public", + "_ui5since": "2.0.0" + }, + { + "kind": "field", + "name": "showTickmarks", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Enables tickmarks visualization for each step.\n\n**Note:** The step must be a positive number.", + "privacy": "public" + }, + { + "kind": "field", + "name": "showTooltip", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Enables handle tooltip displaying the current value.", + "privacy": "public" + }, + { + "kind": "field", + "name": "step", + "type": { + "text": "number" + }, + "default": "1", + "description": "Defines the size of the slider's selection intervals (e.g. min = 0, max = 10, step = 5 would result in possible selection of the values 0, 5, 10).\n\n**Note:** If set to 0 the slider handle movement is disabled. When negative number or value other than a number, the component fallbacks to its default value.", "privacy": "public" } ], "events": [ { - "name": "load-more", + "name": "change", "_ui5privacy": "public", "type": { "text": "CustomEvent" }, - "description": "Fired when the growing button is pressed or the user scrolls to the end of the table.", + "description": "Fired when the value changes and the user has finished interacting with the slider.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true + }, + { + "name": "input", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the value changes due to user interaction that is not yet finished - during mouse/touch dragging.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, "_ui5Bubbles": true @@ -24608,31 +21450,94 @@ ], "attributes": [ { - "description": "Defines the mode of the <code>ui5-table</code> growing.\n\nAvailable options are:\n\nButton - Shows a More button at the bottom of the table, pressing it will load more rows.\n\nScroll - The rows are loaded automatically by scrolling to the bottom of the table. If the table is not scrollable,\na growing button will be rendered instead to ensure growing functionality.", - "name": "mode", - "default": "\"Button\"", - "fieldName": "mode", + "description": "Defines the accessible ARIA name of the component.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", "type": { - "text": "\"Button\" | \"Scroll\"" + "text": "string | undefined" } }, { - "description": "Defines the text that will be displayed inside the growing button.\nHas no effect when mode is set to `Scroll`.\n\n**Note:** When not provided and the mode is set to Button, a default text is displayed, corresponding to the\ncurrent language.", - "name": "text", - "default": "undefined", - "fieldName": "text", + "description": "Defines whether the slider is in disabled state.", + "name": "disabled", + "default": "false", + "fieldName": "disabled", "type": { - "text": "string | undefined" + "text": "boolean" } }, { - "description": "Defines the text that will be displayed below the `text` inside the growing button.\nHas no effect when mode is set to Scroll.", - "name": "subtext", + "description": "\nIndicates whether input fields should be used as tooltips for the handles.\n\n**Note:** Setting this option to true will only work if showTooltip is set to true.\n**Note:** In order for the component to comply with the accessibility standard, it is recommended to set the editableTooltip property to true.", + "name": "editable-tooltip", + "default": "false", + "fieldName": "editableTooltip", + "type": { + "text": "boolean" + } + }, + { + "description": "Displays a label with a value on every N-th step.\n\n**Note:** The step and tickmarks properties must be enabled.\nExample - if the step value is set to 2 and the label interval is also specified to 2 - then every second\ntickmark will be labelled, which means every 4th value number.", + "name": "label-interval", + "default": "0", + "fieldName": "labelInterval", + "type": { + "text": "number" + } + }, + { + "description": "Defines the maximum value of the slider.", + "name": "max", + "default": "100", + "fieldName": "max", + "type": { + "text": "number" + } + }, + { + "description": "Defines the minimum value of the slider.", + "name": "min", + "default": "0", + "fieldName": "min", + "type": { + "text": "number" + } + }, + { + "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", + "name": "name", "default": "undefined", - "fieldName": "subtext", + "fieldName": "name", "type": { "text": "string | undefined" } + }, + { + "description": "Enables tickmarks visualization for each step.\n\n**Note:** The step must be a positive number.", + "name": "show-tickmarks", + "default": "false", + "fieldName": "showTickmarks", + "type": { + "text": "boolean" + } + }, + { + "description": "Enables handle tooltip displaying the current value.", + "name": "show-tooltip", + "default": "false", + "fieldName": "showTooltip", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines the size of the slider's selection intervals (e.g. min = 0, max = 10, step = 5 would result in possible selection of the values 0, 5, 10).\n\n**Note:** If set to 0 the slider handle movement is disabled. When negative number or value other than a number, the component fallbacks to its default value.", + "name": "step", + "default": "1", + "fieldName": "step", + "type": { + "text": "number" + } } ], "superclass": { @@ -24640,9 +21545,7 @@ "package": "@ui5/webcomponents-base", "module": "dist/UI5Element.js" }, - "tagName": "ui5-table-growing", "customElement": true, - "_ui5since": "2.0.0", "_ui5privacy": "public" } ], @@ -24651,230 +21554,133 @@ "kind": "js", "name": "default", "declaration": { - "name": "TableGrowing", - "module": "dist/TableGrowing.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-table-growing", - "declaration": { - "name": "TableGrowing", - "module": "dist/TableGrowing.js" + "name": "SliderBase", + "module": "dist/SliderBase.js" } } ] }, { "kind": "javascript-module", - "path": "dist/TableHeaderCell.js", + "path": "dist/SliderHandle.js", "declarations": [ { "kind": "class", - "description": "### Overview\n\nThe `ui5-table-header-cell` component represents a column in the `ui5-table`.\n\nAs it is tightly coupled to the `ui5-table`, it should only be used in the `ui5-table-header-row`\nto ensure correct layout and design.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TableHeaderCell.js\";`", - "name": "TableHeaderCell", - "slots": [ + "description": "The <code>ui5-slider-handle</code> component represents the handle of the <code>ui5-slider</code> component.", + "name": "SliderHandle", + "members": [ { - "name": "action", - "description": "Defines the action of the column.\n\n**Note:** While multiple actions are technically possible, this is not supported.", - "_ui5since": "2.8.0", - "_ui5type": { - "text": "Array<TableHeaderCellActionBase>", - "references": [ - { - "name": "TableHeaderCellActionBase", - "package": "@ui5/webcomponents", - "module": "dist/TableHeaderCellActionBase.js" - } - ] + "kind": "field", + "name": "active", + "type": { + "text": "boolean" }, - "_ui5privacy": "public" - }, - { - "name": "default", - "description": "Defines the content of the component.", - "_ui5propertyName": "content", - "_ui5type": { - "text": "Array<Node>" - }, - "_ui5privacy": "public", - "inheritedFrom": { - "name": "TableCellBase", - "module": "dist/TableCellBase.js" - } - } - ], - "members": [ - { - "kind": "field", - "name": "width", - "type": { - "text": "string | undefined" - }, - "description": "Defines the width of the column.\n\nBy default, the column will grow and shrink according to the available space.\nThis will distribute the space proportionally among all columns with no specific width set.\n\nSee [\\<length\\>](https://developer.mozilla.org/en-US/docs/Web/CSS/length) and\n[\\<percentage\\>](https://developer.mozilla.org/en-US/docs/Web/CSS/percentage) for possible width values.", - "default": "undefined", - "privacy": "public" + "default": "false", + "description": "Defines whether the slider handle is active.\n<br><br>\n<b>Note:</b> An active slider handle is currently being interacted with.", + "privacy": "public", + "_ui5since": "2.19.0" }, { "kind": "field", - "name": "minWidth", + "name": "disabled", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Defines the minimum width of the column.\n\nIf the table is in `Popin` mode and the minimum width does not fit anymore,\nthe column will move into the popin.\n\nBy default, the table prevents the column from becoming too small.\nChanging this value to a small value might lead to accessibility issues.\n\n**Note:** This property only takes effect for columns with a [\\<percentage\\>](https://developer.mozilla.org/en-US/docs/Web/CSS/percentage) value\nor the default width.", + "default": "false", + "description": "Defines whether the slider handle is disabled.\n<br><br>\n<b>Note:</b> A disabled slider handle cannot be interacted with.", "privacy": "public", - "default": "undefined" + "_ui5since": "2.19.0" }, { "kind": "field", - "name": "importance", + "name": "max", "type": { "text": "number" }, - "default": "0", - "description": "Defines the importance of the column.\n\nThis property affects the popin behaviour.\nColumns with higher importance will move into the popin area later then less important\ncolumns.", - "privacy": "public" - }, - { - "kind": "field", - "name": "popinText", - "type": { - "text": "string | undefined" - }, - "description": "The text for the column when it pops in.", - "default": "undefined", - "privacy": "public", - "_ui5since": "2.7.0" - }, - { - "kind": "field", - "name": "sortIndicator", - "type": { - "text": "SortOrder", - "references": [ - { - "name": "SortOrder", - "package": "@ui5/webcomponents-base", - "module": "dist/types/SortOrder.js" - } - ] - }, - "default": "\"None\"", - "description": "Defines the sort indicator of the column.", + "default": "100", + "description": "Defines the maximum value of the slider handle.\n<br><br>\n<b>Note:</b> The value should be greater than the <code>min</code> property of the parent <code>ui5-slider</code>.", "privacy": "public", - "_ui5since": "2.8.0" + "_ui5since": "2.19.0" }, { "kind": "field", - "name": "popinHidden", + "name": "min", "type": { - "text": "boolean" + "text": "number" }, - "default": "false", - "description": "Defines if the column is hidden in the popin.\n\n**Note:** Please be aware that hiding the column in the popin might lead to accessibility issues as\nusers might not be able to access the content of the column on small screens.", + "default": "0", + "description": "Defines the minimum value of the slider handle.\n<br><br>\n<b>Note:</b> The value should be less than the <code>max</code> property of the parent <code>ui5-slider</code>.", "privacy": "public", - "_ui5since": "2.8.0" + "_ui5since": "2.19.0" }, { "kind": "field", - "name": "horizontalAlign", + "name": "value", "type": { - "text": "TableCellHorizontalAlign | undefined", - "references": [ - { - "name": "TableCellHorizontalAlign", - "package": "@ui5/webcomponents", - "module": "dist/types/TableCellHorizontalAlign.js" - } - ] + "text": "number" }, - "description": "Determines the horizontal alignment of table cells.", - "default": "undefined", + "default": "0", + "description": "Defines the value of the slider handle.\n<br><br>\n<b>Note:</b> The value should be between the <code>min</code> and <code>max</code> properties of the parent <code>ui5-slider</code>.", "privacy": "public", - "inheritedFrom": { - "name": "TableCellBase", - "module": "dist/TableCellBase.js" - } + "_ui5since": "2.19.0" } ], "attributes": [ { - "description": "Defines the width of the column.\n\nBy default, the column will grow and shrink according to the available space.\nThis will distribute the space proportionally among all columns with no specific width set.\n\nSee [\\<length\\>](https://developer.mozilla.org/en-US/docs/Web/CSS/length) and\n[\\<percentage\\>](https://developer.mozilla.org/en-US/docs/Web/CSS/percentage) for possible width values.", - "name": "width", - "default": "undefined", - "fieldName": "width", + "description": "Defines whether the slider handle is active.\n<br><br>\n<b>Note:</b> An active slider handle is currently being interacted with.", + "name": "active", + "default": "false", + "fieldName": "active", "type": { - "text": "string | undefined" + "text": "boolean" } }, { - "description": "Defines the minimum width of the column.\n\nIf the table is in `Popin` mode and the minimum width does not fit anymore,\nthe column will move into the popin.\n\nBy default, the table prevents the column from becoming too small.\nChanging this value to a small value might lead to accessibility issues.\n\n**Note:** This property only takes effect for columns with a [\\<percentage\\>](https://developer.mozilla.org/en-US/docs/Web/CSS/percentage) value\nor the default width.", - "name": "min-width", - "default": "undefined", - "fieldName": "minWidth", + "description": "Defines whether the slider handle is disabled.\n<br><br>\n<b>Note:</b> A disabled slider handle cannot be interacted with.", + "name": "disabled", + "default": "false", + "fieldName": "disabled", "type": { - "text": "string | undefined" + "text": "boolean" } }, { - "description": "Defines the importance of the column.\n\nThis property affects the popin behaviour.\nColumns with higher importance will move into the popin area later then less important\ncolumns.", - "name": "importance", - "default": "0", - "fieldName": "importance", + "description": "Defines the maximum value of the slider handle.\n<br><br>\n<b>Note:</b> The value should be greater than the <code>min</code> property of the parent <code>ui5-slider</code>.", + "name": "max", + "default": "100", + "fieldName": "max", "type": { "text": "number" } }, { - "description": "The text for the column when it pops in.", - "name": "popin-text", - "default": "undefined", - "fieldName": "popinText", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Defines the sort indicator of the column.", - "name": "sort-indicator", - "default": "\"None\"", - "fieldName": "sortIndicator", - "type": { - "text": "\"None\" | \"Ascending\" | \"Descending\"" - } - }, - { - "description": "Defines if the column is hidden in the popin.\n\n**Note:** Please be aware that hiding the column in the popin might lead to accessibility issues as\nusers might not be able to access the content of the column on small screens.", - "name": "popin-hidden", - "default": "false", - "fieldName": "popinHidden", + "description": "Defines the minimum value of the slider handle.\n<br><br>\n<b>Note:</b> The value should be less than the <code>max</code> property of the parent <code>ui5-slider</code>.", + "name": "min", + "default": "0", + "fieldName": "min", "type": { - "text": "boolean" + "text": "number" } }, { - "description": "Determines the horizontal alignment of table cells.", - "name": "horizontal-align", - "default": "undefined", - "fieldName": "horizontalAlign", + "description": "Defines the value of the slider handle.\n<br><br>\n<b>Note:</b> The value should be between the <code>min</code> and <code>max</code> properties of the parent <code>ui5-slider</code>.", + "name": "value", + "default": "0", + "fieldName": "value", "type": { - "text": "\"Start\" | \"End\" | \"Center\" | \"Left\" | \"Right\" | undefined" - }, - "inheritedFrom": { - "name": "TableCellBase", - "module": "dist/TableCellBase.js" + "text": "number" } } ], "superclass": { - "name": "TableCellBase", - "package": "@ui5/webcomponents", - "module": "dist/TableCellBase.js" + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" }, - "tagName": "ui5-table-header-cell", + "tagName": "ui5-slider-handle", "customElement": true, - "_ui5since": "2.0.0", - "_ui5privacy": "public" + "_ui5since": "2.19.0", + "_ui5privacy": "private" } ], "exports": [ @@ -24882,142 +21688,51 @@ "kind": "js", "name": "default", "declaration": { - "name": "TableHeaderCell", - "module": "dist/TableHeaderCell.js" + "name": "SliderHandle", + "module": "dist/SliderHandle.js" } }, { "kind": "custom-element-definition", - "name": "ui5-table-header-cell", + "name": "ui5-slider-handle", "declaration": { - "name": "TableHeaderCell", - "module": "dist/TableHeaderCell.js" + "name": "SliderHandle", + "module": "dist/SliderHandle.js" } } ] }, { "kind": "javascript-module", - "path": "dist/TableHeaderCellActionAI.js", - "declarations": [ - { - "kind": "class", - "description": "### Overview\n\nThe `ui5-table-header-cell-action-ai` component defines a dedicated AI action for the table column.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TableHeaderCellActionAI.js\";`", - "name": "TableHeaderCellActionAI", - "superclass": { - "name": "TableHeaderCellActionBase", - "package": "@ui5/webcomponents", - "module": "dist/TableHeaderCellActionBase.js" - }, - "tagName": "ui5-table-header-cell-action-ai", - "customElement": true, - "_ui5since": "2.8.0", - "_ui5privacy": "public", - "events": [ - { - "name": "click", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent<TableHeaderCellActionClickEventDetail>", - "references": [ - { - "name": "TableHeaderCellActionClickEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/TableHeaderCellActionBase.js" - } - ] - }, - "description": "Fired when a header cell action is clicked.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5since": "2.8.0", - "_ui5parameters": [ - { - "type": { - "text": "HTMLElement" - }, - "name": "targetRef", - "_ui5privacy": "public", - "description": "The reference to the element that triggered the event" - } - ], - "inheritedFrom": { - "name": "TableHeaderCellActionBase", - "module": "dist/TableHeaderCellActionBase.js" - } - } - ], - "members": [] - } - ], + "path": "dist/SliderScale.js", + "declarations": [], "exports": [ { "kind": "js", "name": "default", "declaration": { - "name": "TableHeaderCellActionAI", - "module": "dist/TableHeaderCellActionAI.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-table-header-cell-action-ai", - "declaration": { - "name": "TableHeaderCellActionAI", - "module": "dist/TableHeaderCellActionAI.js" + "name": "SliderScale", + "module": "dist/SliderScale.js" } } ] }, { "kind": "javascript-module", - "path": "dist/TableHeaderCellActionBase.js", + "path": "dist/SliderTooltip.js", "declarations": [ { "kind": "class", - "description": "The `TableHeaderCellActionBase` class serves as a foundation for table header cell actions.", - "name": "TableHeaderCellActionBase", - "events": [ - { - "name": "click", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent<TableHeaderCellActionClickEventDetail>", - "references": [ - { - "name": "TableHeaderCellActionClickEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/TableHeaderCellActionBase.js" - } - ] - }, - "description": "Fired when a header cell action is clicked.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5since": "2.8.0", - "_ui5parameters": [ - { - "type": { - "text": "HTMLElement" - }, - "name": "targetRef", - "_ui5privacy": "public", - "description": "The reference to the element that triggered the event" - } - ] - } - ], + "description": "### Overview", + "name": "SliderTooltip", "superclass": { "name": "UI5Element", "package": "@ui5/webcomponents-base", "module": "dist/UI5Element.js" }, + "tagName": "ui5-slider-tooltip", "customElement": true, - "_ui5since": "2.8.0", - "_ui5privacy": "public", - "_ui5abstract": true, + "_ui5privacy": "private", "members": [] } ], @@ -25026,70 +21741,87 @@ "kind": "js", "name": "default", "declaration": { - "name": "TableHeaderCellActionBase", - "module": "dist/TableHeaderCellActionBase.js" + "name": "SliderTooltip", + "module": "dist/SliderTooltip.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-slider-tooltip", + "declaration": { + "name": "SliderTooltip", + "module": "dist/SliderTooltip.js" } } ] }, { "kind": "javascript-module", - "path": "dist/TableHeaderRow.js", + "path": "dist/SpecialCalendarDate.js", "declarations": [ { "kind": "class", - "description": "### Overview\n\nThe `ui5-table-header-row` component represents the table headers of a `ui5-table`.\n\nIt is tightly coupled to the `ui5-table` and should therefore be used in the `ui5-table` only.\nThe header row is placed in the `headerRow` slot of the table.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TableHeaderRow.js\";`", - "name": "TableHeaderRow", - "slots": [ + "description": "### Overview\n\nThe `ui5-special-date` component defines a special calendar date to be used inside `ui5-calendar`,\nwhich is visually distinguished from the rest of the dates.", + "name": "SpecialCalendarDate", + "members": [ { - "name": "default", - "description": "Defines the cells of the component.\n\n**Note:** Use `ui5-table-header-cell` for the intended design.", - "_ui5propertyName": "cells", - "_ui5type": { - "text": "Array<TableHeaderCell>", + "kind": "field", + "name": "type", + "type": { + "text": "CalendarLegendItemType", "references": [ { - "name": "TableHeaderCell", + "name": "CalendarLegendItemType", "package": "@ui5/webcomponents", - "module": "dist/TableHeaderCell.js" + "module": "dist/types/CalendarLegendItemType.js" } ] }, - "_ui5privacy": "public" - } - ], - "members": [ + "default": "\"None\"", + "description": "Defines the type of the special date.", + "privacy": "public" + }, { "kind": "field", - "name": "sticky", + "name": "value", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Sticks the `ui5-table-header-row` to the top of a table.\n\nNote: If used in combination with overflowMode \"Scroll\", the table needs a defined height for the sticky header to work as expected.", + "default": "\"\"", + "description": "The date formatted according to the `formatPattern` property\nof the `ui5-calendar` that hosts the component.", "privacy": "public" } ], "attributes": [ { - "description": "Sticks the `ui5-table-header-row` to the top of a table.\n\nNote: If used in combination with overflowMode \"Scroll\", the table needs a defined height for the sticky header to work as expected.", - "name": "sticky", - "default": "false", - "fieldName": "sticky", + "description": "Defines the type of the special date.", + "name": "type", + "default": "\"None\"", + "fieldName": "type", "type": { - "text": "boolean" + "text": "\"None\" | \"Today\" | \"Selected\" | \"Working\" | \"NonWorking\" | \"Type01\" | \"Type02\" | \"Type03\" | \"Type04\" | \"Type05\" | \"Type06\" | \"Type07\" | \"Type08\" | \"Type09\" | \"Type10\" | \"Type11\" | ... 8 more ... | \"Type20\"" + } + }, + { + "description": "The date formatted according to the `formatPattern` property\nof the `ui5-calendar` that hosts the component.", + "name": "value", + "default": "\"\"", + "fieldName": "value", + "type": { + "text": "string" } } ], "superclass": { - "name": "TableRowBase", - "package": "@ui5/webcomponents", - "module": "dist/TableRowBase.js" + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" }, - "tagName": "ui5-table-header-row", + "tagName": "ui5-special-date", "customElement": true, - "_ui5since": "2.0.0", - "_ui5privacy": "public" + "_ui5since": "1.23.0", + "_ui5privacy": "public", + "_ui5abstract": true } ], "exports": [ @@ -25097,186 +21829,219 @@ "kind": "js", "name": "default", "declaration": { - "name": "TableHeaderRow", - "module": "dist/TableHeaderRow.js" + "name": "SpecialCalendarDate", + "module": "dist/SpecialCalendarDate.js" } }, { "kind": "custom-element-definition", - "name": "ui5-table-header-row", - "declaration": { - "name": "TableHeaderRow", - "module": "dist/TableHeaderRow.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/TableNavigation.js", - "declarations": [], - "exports": [ - { - "kind": "js", - "name": "default", + "name": "ui5-special-date", "declaration": { - "name": "TableNavigation", - "module": "dist/TableNavigation.js" + "name": "SpecialCalendarDate", + "module": "dist/SpecialCalendarDate.js" } } ] }, { "kind": "javascript-module", - "path": "dist/TableRow.js", + "path": "dist/SplitButton.js", "declarations": [ { "kind": "class", - "description": "### Overview\n\nThe `ui5-table-row` component represents a row in the `ui5-table`.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TableRow.js\";`", - "name": "TableRow", + "description": "### Overview\n\n`ui5-split-button` enables users to trigger actions. It is constructed of two separate actions -\ndefault action and arrow action that can be activated by clicking or tapping, or by\npressing certain keyboard keys - `Space` or `Enter` for default action,\nand `Arrow Down` or `Arrow Up` for arrow action.\n\n### Usage\n\n`ui5-split-button` consists two separate buttons:\n\n- for the first one (default action) you can define some `text` or an `icon`, or both.\n- the second one (arrow action) contains only `slim-arrow-down` icon.\n\nYou can choose a `design` from a set of predefined types (the same as for ui5-button) that offer\ndifferent styling to correspond to the triggered action. Both text and arrow actions have the same design.\n\nYou can set the `ui5-split-button` as enabled or disabled. Both parts of an enabled\n`ui5-split-button` can be pressed by clicking or tapping it, or by certain keys, which changes\nthe style to provide visual feedback to the user that it is pressed or hovered over with\nthe mouse cursor. A disabled `ui5-split-button` appears inactive and any of the two buttons\ncannot be pressed.\n\n### Keyboard Handling\n\n- `Space` or `Enter` - triggers the default action\n- `Shift` or `Escape` - if `Space` is pressed, releases the default action button without triggering the click event.\n- `Arrow Down`, `Arrow Up`, `Alt`+`Arrow Down`, `Alt`+`Arrow Up`, or `F4` - triggers the arrow action\nThere are separate events that are fired on activating of `ui5-split-button` parts:\n\n- `click` for the first button (default action)\n- `arrow-click` for the second button (arrow action)\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/SplitButton.js\";`", + "name": "SplitButton", + "cssParts": [ + { + "description": "Used to style the native button element", + "name": "button" + }, + { + "description": "Used to style the end icon in the native button element", + "name": "endIcon" + }, + { + "description": "Used to style the icon in the native button element", + "name": "icon" + } + ], "slots": [ { "name": "default", - "description": "Defines the cells of the component.\n\n**Note:** Use `ui5-table-cell` for the intended design.", - "_ui5propertyName": "cells", + "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<TableCell>", - "references": [ - { - "name": "TableCell", - "package": "@ui5/webcomponents", - "module": "dist/TableCell.js" - } - ] + "text": "Array<Node>" }, "_ui5privacy": "public" - }, + } + ], + "members": [ { - "name": "actions", - "description": "Defines the actions of the component.\n\n**Note:** Use `ui5-table-row-action` or `ui5-table-row-action-navigation` for the intended design.", - "_ui5since": "2.7.0", - "_ui5type": { - "text": "Array<TableRowActionBase>", + "kind": "field", + "name": "accessibilityAttributes", + "type": { + "text": "SplitButtonAccessibilityAttributes", "references": [ { - "name": "TableRowActionBase", + "name": "SplitButtonAccessibilityAttributes", "package": "@ui5/webcomponents", - "module": "dist/TableRowActionBase.js" + "module": "dist/SplitButton.js" } ] }, - "_ui5privacy": "public" - } - ], - "members": [ + "default": "{}", + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe `accessibilityAttributes` property accepts an object with the following optional fields:\n\n- **root**: Attributes that will be applied to the main (text) button.\n - **hasPopup**: Indicates the presence and type of popup triggered by the button.\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **roleDescription**: Provides a human-readable description for the role of the button.\n Accepts any string value.\n - **title**: Specifies a tooltip or description for screen readers.\n Accepts any string value.\n\t- **ariaKeyShortcuts**: Defines keyboard shortcuts that activate or give focus to the button.\n\n- **arrowButton**: Attributes applied specifically to the arrow (split) button.\n - **hasPopup**: Indicates the presence and type of popup triggered by the arrow button.\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **expanded**: Indicates whether the popup triggered by the arrow button is currently expanded.\n Accepts boolean values: `true` or `false`.", + "privacy": "public", + "_ui5since": "2.13.0" + }, { "kind": "field", - "name": "rowKey", + "name": "accessibleName", "type": { "text": "string | undefined" }, - "description": "Unique identifier of the row.\n\n**Note:** For selection features to work properly, this property is mandatory, and its value must not contain spaces.", + "description": "Defines the accessible ARIA name of the component.", "default": "undefined", "privacy": "public" }, { "kind": "field", - "name": "position", + "name": "activeArrowButton", "type": { - "text": "number | undefined" + "text": "boolean" }, - "description": "Defines the 0-based position of the row related to the total number of rows within the table when the `ui5-table-virtualizer` feature is used.", - "default": "undefined", + "default": "false", + "description": "Defines whether the arrow button should have the active state styles or not.", "privacy": "public", - "_ui5since": "2.5.0" + "_ui5since": "1.21.0" }, { "kind": "field", - "name": "interactive", + "name": "design", "type": { - "text": "boolean" + "text": "ButtonDesign", + "references": [ + { + "name": "ButtonDesign", + "package": "@ui5/webcomponents", + "module": "dist/types/ButtonDesign.js" + } + ] }, - "default": "false", - "description": "Defines the interactive state of the row.", + "default": "\"Default\"", + "description": "Defines the component design.", "privacy": "public" }, { "kind": "field", - "name": "navigated", + "name": "disabled", "type": { "text": "boolean" }, "default": "false", - "description": "Defines the navigated state of the row.", + "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.", "privacy": "public" }, { "kind": "field", - "name": "movable", + "name": "icon", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Defines whether the row is movable.", - "privacy": "public", - "_ui5since": "2.6.0" + "description": "Defines the icon to be displayed as graphical element within the component.\nThe SAP-icons font provides numerous options.\n\nExample:\n\nSee all available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "default": "undefined", + "privacy": "public" } ], - "attributes": [ + "events": [ { - "description": "Unique identifier of the row.\n\n**Note:** For selection features to work properly, this property is mandatory, and its value must not contain spaces.", - "name": "row-key", - "default": "undefined", - "fieldName": "rowKey", + "name": "arrow-click", + "_ui5privacy": "public", "type": { - "text": "string | undefined" - } + "text": "CustomEvent" + }, + "description": "Fired when the user clicks on the arrow action.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true }, { - "description": "Defines the 0-based position of the row related to the total number of rows within the table when the `ui5-table-virtualizer` feature is used.", - "name": "position", - "default": "undefined", - "fieldName": "position", + "name": "click", + "_ui5privacy": "public", "type": { - "text": "number | undefined" + "text": "CustomEvent" + }, + "description": "Fired when the user clicks on the default action.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true + } + ], + "attributes": [ + { + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe `accessibilityAttributes` property accepts an object with the following optional fields:\n\n- **root**: Attributes that will be applied to the main (text) button.\n - **hasPopup**: Indicates the presence and type of popup triggered by the button.\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **roleDescription**: Provides a human-readable description for the role of the button.\n Accepts any string value.\n - **title**: Specifies a tooltip or description for screen readers.\n Accepts any string value.\n\t- **ariaKeyShortcuts**: Defines keyboard shortcuts that activate or give focus to the button.\n\n- **arrowButton**: Attributes applied specifically to the arrow (split) button.\n - **hasPopup**: Indicates the presence and type of popup triggered by the arrow button.\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **expanded**: Indicates whether the popup triggered by the arrow button is currently expanded.\n Accepts boolean values: `true` or `false`.", + "name": "accessibility-attributes", + "default": "{}", + "fieldName": "accessibilityAttributes", + "type": { + "text": "SplitButtonAccessibilityAttributes" } }, { - "description": "Defines the interactive state of the row.", - "name": "interactive", - "default": "false", - "fieldName": "interactive", + "description": "Defines the accessible ARIA name of the component.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", "type": { - "text": "boolean" + "text": "string | undefined" } }, { - "description": "Defines the navigated state of the row.", - "name": "navigated", + "description": "Defines whether the arrow button should have the active state styles or not.", + "name": "active-arrow-button", "default": "false", - "fieldName": "navigated", + "fieldName": "activeArrowButton", "type": { "text": "boolean" } }, { - "description": "Defines whether the row is movable.", - "name": "movable", + "description": "Defines the component design.", + "name": "design", + "default": "\"Default\"", + "fieldName": "design", + "type": { + "text": "\"Transparent\" | \"Positive\" | \"Negative\" | \"Default\" | \"Emphasized\" | \"Attention\"" + } + }, + { + "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.", + "name": "disabled", "default": "false", - "fieldName": "movable", + "fieldName": "disabled", "type": { "text": "boolean" } + }, + { + "description": "Defines the icon to be displayed as graphical element within the component.\nThe SAP-icons font provides numerous options.\n\nExample:\n\nSee all available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "name": "icon", + "default": "undefined", + "fieldName": "icon", + "type": { + "text": "string | undefined" + } } ], "superclass": { - "name": "TableRowBase", - "package": "@ui5/webcomponents", - "module": "dist/TableRowBase.js" + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" }, - "tagName": "ui5-table-row", + "tagName": "ui5-split-button", "customElement": true, - "_ui5since": "2.0.0", + "_ui5since": "1.1.0", "_ui5privacy": "public" } ], @@ -25285,188 +22050,358 @@ "kind": "js", "name": "default", "declaration": { - "name": "TableRow", - "module": "dist/TableRow.js" + "name": "SplitButton", + "module": "dist/SplitButton.js" } }, { "kind": "custom-element-definition", - "name": "ui5-table-row", + "name": "ui5-split-button", "declaration": { - "name": "TableRow", - "module": "dist/TableRow.js" + "name": "SplitButton", + "module": "dist/SplitButton.js" } } ] }, { "kind": "javascript-module", - "path": "dist/TableRowAction.js", + "path": "dist/StepInput.js", "declarations": [ { "kind": "class", - "description": "### Overview\n\nThe `ui5-table-row-action` component defines an action for table rows.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TableRowAction.js\";`", - "name": "TableRowAction", + "description": "### Overview\n\nThe `ui5-step-input` consists of an input field and buttons with icons to increase/decrease the value\nwith the predefined step.\n\nThe user can change the value of the component by pressing the increase/decrease buttons,\nby typing a number directly, by using the keyboard up/down and page up/down,\nor by using the mouse scroll wheel. Decimal values are supported.\n\n### Usage\n\nThe default step is 1 but the app developer can set a different one.\n\nApp developers can set a maximum and minimum value for the `StepInput`.\nThe increase/decrease button and the up/down keyboard navigation become disabled when\nthe value reaches the max/min or a new value is entered from the input which is greater/less than the max/min.\n\n#### When to use:\n\n- To adjust amounts, quantities, or other values quickly.\n- To adjust values for a specific step.\n\n#### When not to use:\n\n- To enter a static number (for example, postal code, phone number, or ID). In this case,\nuse the regular `ui5-input` instead.\n- To display a value that rarely needs to be adjusted and does not pertain to a particular step.\nIn this case, use the regular `ui5-input` instead.\n- To enter dates and times. In this case, use date/time related components instead.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/StepInput.js\";`", + "name": "StepInput", + "slots": [ + { + "name": "valueStateMessage", + "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 component is in `Information`, `Critical` or `Negative` value state.", + "_ui5type": { + "text": "Array<HTMLElement>" + }, + "_ui5privacy": "public" + } + ], "members": [ { "kind": "field", - "name": "icon", + "name": "accessibleName", "type": { - "text": "string" + "text": "string | undefined" }, - "default": "\"\"", - "description": "Defines the icon of the row action.\n\n**Note:** For row actions to work properly, this property is mandatory.\n\n**Note:** SAP-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).", - "privacy": "public" + "description": "Defines the accessible ARIA name of the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.0.0-rc.15" }, { "kind": "field", - "name": "text", + "name": "accessibleNameRef", "type": { - "text": "string" + "text": "string | undefined" }, - "default": "\"\"", - "description": "Defines the text of the row action.\n\n**Note:** For row actions to work properly, this property is mandatory.", - "privacy": "public" + "description": "Receives id(or many ids) of the elements that label the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.0.0-rc.15" }, { "kind": "field", - "name": "invisible", + "name": "disabled", "type": { "text": "boolean" }, "default": "false", - "description": "Defines the visibility of the row action.\n\n**Note:** Invisible row actions still take up space, allowing to hide the action while maintaining its position.", - "privacy": "public", - "inheritedFrom": { - "name": "TableRowActionBase", - "module": "dist/TableRowActionBase.js" - } - } - ], - "attributes": [ + "description": "Determines whether the component is displayed as disabled.", + "privacy": "public" + }, { - "description": "Defines the icon of the row action.\n\n**Note:** For row actions to work properly, this property is mandatory.\n\n**Note:** SAP-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).", - "name": "icon", - "default": "\"\"", - "fieldName": "icon", + "kind": "field", + "name": "max", "type": { - "text": "string" - } + "text": "number | undefined" + }, + "description": "Defines a maximum value of the component.", + "default": "undefined", + "privacy": "public" }, { - "description": "Defines the text of the row action.\n\n**Note:** For row actions to work properly, this property is mandatory.", - "name": "text", - "default": "\"\"", - "fieldName": "text", + "kind": "field", + "name": "min", "type": { - "text": "string" - } + "text": "number | undefined" + }, + "description": "Defines a minimum value of the component.", + "default": "undefined", + "privacy": "public" }, { - "description": "Defines the visibility of the row action.\n\n**Note:** Invisible row actions still take up space, allowing to hide the action while maintaining its position.", - "name": "invisible", - "default": "false", - "fieldName": "invisible", + "kind": "field", + "name": "name", "type": { - "text": "boolean" + "text": "string | undefined" }, - "inheritedFrom": { - "name": "TableRowActionBase", - "module": "dist/TableRowActionBase.js" - } - } - ], - "superclass": { - "name": "TableRowActionBase", - "package": "@ui5/webcomponents", - "module": "dist/TableRowActionBase.js" - }, - "tagName": "ui5-table-row-action", - "customElement": true, - "_ui5since": "2.7.0", - "_ui5privacy": "public", - "events": [ + "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", + "default": "undefined", + "privacy": "public" + }, { - "name": "click", - "_ui5privacy": "public", + "kind": "field", + "name": "placeholder", "type": { - "text": "CustomEvent" + "text": "string | undefined" }, - "description": "Fired when a row action is clicked.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5since": "2.9.0", - "inheritedFrom": { - "name": "TableRowActionBase", - "module": "dist/TableRowActionBase.js" - } - } - ] - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "TableRowAction", - "module": "dist/TableRowAction.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-table-row-action", - "declaration": { - "name": "TableRowAction", - "module": "dist/TableRowAction.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/TableRowActionBase.js", - "declarations": [ - { - "kind": "class", - "description": "The `TableRowActionBase` class serves as a foundation for table row actions.", - "name": "TableRowActionBase", - "members": [ + "description": "Defines a short hint, intended to aid the user with data entry when the\ncomponent has no value.\n\n**Note:** When no placeholder is set, the format pattern is displayed as a placeholder.\nPassing an empty string as the value of this property will make the component appear empty - without placeholder or format pattern.", + "default": "undefined", + "privacy": "public" + }, { "kind": "field", - "name": "invisible", + "name": "readonly", "type": { "text": "boolean" }, "default": "false", - "description": "Defines the visibility of the row action.\n\n**Note:** Invisible row actions still take up space, allowing to hide the action while maintaining its position.", + "description": "Determines whether the component is displayed as read-only.", + "privacy": "public" + }, + { + "kind": "field", + "name": "required", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the component is required.", + "privacy": "public" + }, + { + "kind": "field", + "name": "step", + "type": { + "text": "number" + }, + "default": "1", + "description": "Defines a step of increasing/decreasing the value of the component.", + "privacy": "public" + }, + { + "kind": "field", + "name": "value", + "type": { + "text": "number" + }, + "default": "0", + "description": "Defines a value of the component.", + "privacy": "public" + }, + { + "kind": "field", + "name": "valuePrecision", + "type": { + "text": "number" + }, + "default": "0", + "description": "Determines the number of digits after the decimal point of the component.", + "privacy": "public" + }, + { + "kind": "field", + "name": "valueState", + "type": { + "text": "ValueState", + "references": [ + { + "name": "ValueState", + "package": "@ui5/webcomponents-base", + "module": "dist/types/ValueState.js" + } + ] + }, + "default": "\"None\"", + "description": "Defines the value state of the component.", "privacy": "public" } ], "events": [ { - "name": "click", + "name": "change", "_ui5privacy": "public", "type": { "text": "CustomEvent" }, - "description": "Fired when a row action is clicked.", + "description": "Fired when the input operation has finished by pressing Enter or on focusout.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, + "_ui5Bubbles": true + }, + { + "name": "input", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the value of the component changes at each keystroke.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, "_ui5Bubbles": true, - "_ui5since": "2.9.0" + "_ui5since": "2.6.0" + }, + { + "name": "value-state-change", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<StepInputValueStateChangeEventDetail>", + "references": [ + { + "name": "StepInputValueStateChangeEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/StepInput.js" + } + ] + }, + "description": "Fired before the value state of the component is updated internally.\nThe event is preventable, meaning that if it's default action is\nprevented, the component will not update the value state.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true, + "_ui5since": "1.23.0", + "_ui5parameters": [ + { + "type": { + "text": "boolean" + }, + "name": "valid", + "_ui5privacy": "public", + "description": "Indicator if the value is in between the min and max value." + }, + { + "type": { + "text": "string" + }, + "name": "valueState", + "_ui5privacy": "public", + "description": "The new `valueState` that will be set." + } + ] } ], "attributes": [ { - "description": "Defines the visibility of the row action.\n\n**Note:** Invisible row actions still take up space, allowing to hide the action while maintaining its position.", - "name": "invisible", + "description": "Defines the accessible ARIA name of the component.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Receives id(or many ids) of the elements that label the component.", + "name": "accessible-name-ref", + "default": "undefined", + "fieldName": "accessibleNameRef", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Determines whether the component is displayed as disabled.", + "name": "disabled", "default": "false", - "fieldName": "invisible", + "fieldName": "disabled", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines a maximum value of the component.", + "name": "max", + "default": "undefined", + "fieldName": "max", + "type": { + "text": "number | undefined" + } + }, + { + "description": "Defines a minimum value of the component.", + "name": "min", + "default": "undefined", + "fieldName": "min", + "type": { + "text": "number | undefined" + } + }, + { + "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", + "name": "name", + "default": "undefined", + "fieldName": "name", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines a short hint, intended to aid the user with data entry when the\ncomponent has no value.\n\n**Note:** When no placeholder is set, the format pattern is displayed as a placeholder.\nPassing an empty string as the value of this property will make the component appear empty - without placeholder or format pattern.", + "name": "placeholder", + "default": "undefined", + "fieldName": "placeholder", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Determines whether the component is displayed as read-only.", + "name": "readonly", + "default": "false", + "fieldName": "readonly", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines whether the component is required.", + "name": "required", + "default": "false", + "fieldName": "required", "type": { "text": "boolean" } + }, + { + "description": "Defines a step of increasing/decreasing the value of the component.", + "name": "step", + "default": "1", + "fieldName": "step", + "type": { + "text": "number" + } + }, + { + "description": "Defines a value of the component.", + "name": "value", + "default": "0", + "fieldName": "value", + "type": { + "text": "number" + } + }, + { + "description": "Determines the number of digits after the decimal point of the component.", + "name": "value-precision", + "default": "0", + "fieldName": "valuePrecision", + "type": { + "text": "number" + } + }, + { + "description": "Defines the value state of the component.", + "name": "value-state", + "default": "\"None\"", + "fieldName": "valueState", + "type": { + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" + } } ], "superclass": { @@ -25474,10 +22409,10 @@ "package": "@ui5/webcomponents-base", "module": "dist/UI5Element.js" }, + "tagName": "ui5-step-input", "customElement": true, - "_ui5since": "2.7.0", - "_ui5privacy": "public", - "_ui5abstract": true + "_ui5since": "1.0.0-rc.13", + "_ui5privacy": "public" } ], "exports": [ @@ -25485,95 +22420,85 @@ "kind": "js", "name": "default", "declaration": { - "name": "TableRowActionBase", - "module": "dist/TableRowActionBase.js" + "name": "StepInput", + "module": "dist/StepInput.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-step-input", + "declaration": { + "name": "StepInput", + "module": "dist/StepInput.js" } } ] }, { "kind": "javascript-module", - "path": "dist/TableRowActionNavigation.js", + "path": "dist/SuggestionItem.js", "declarations": [ { "kind": "class", - "description": "### Overview\n\nThe `ui5-table-row-action-navigation` component defines a navigation action for table rows.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TableRowActionNavigation.js\";`", - "name": "TableRowActionNavigation", + "description": "The `ui5-suggestion-item` represents the suggestion item of the `ui5-input`.", + "name": "SuggestionItem", "members": [ { "kind": "field", - "name": "interactive", + "name": "additionalText", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Defines the interactive state of the navigation action.", - "privacy": "public" + "description": "Defines the `additionalText`, displayed in the end of the item.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.0.0-rc.15" }, { "kind": "field", - "name": "invisible", + "name": "text", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Defines the visibility of the row action.\n\n**Note:** Invisible row actions still take up space, allowing to hide the action while maintaining its position.", - "privacy": "public", - "inheritedFrom": { - "name": "TableRowActionBase", - "module": "dist/TableRowActionBase.js" - } + "description": "Defines the text of the component.", + "default": "undefined", + "privacy": "public" } ], "attributes": [ { - "description": "Defines the interactive state of the navigation action.", - "name": "interactive", - "default": "false", - "fieldName": "interactive", + "description": "Defines the `additionalText`, displayed in the end of the item.", + "name": "additional-text", + "default": "undefined", + "fieldName": "additionalText", "type": { - "text": "boolean" + "text": "string | undefined" } }, { - "description": "Defines the visibility of the row action.\n\n**Note:** Invisible row actions still take up space, allowing to hide the action while maintaining its position.", - "name": "invisible", - "default": "false", - "fieldName": "invisible", + "description": "Defines the text of the component.", + "name": "text", + "default": "undefined", + "fieldName": "text", "type": { - "text": "boolean" - }, - "inheritedFrom": { - "name": "TableRowActionBase", - "module": "dist/TableRowActionBase.js" + "text": "string | undefined" } } ], "superclass": { - "name": "TableRowActionBase", + "name": "ListItemBase", "package": "@ui5/webcomponents", - "module": "dist/TableRowActionBase.js" + "module": "dist/ListItemBase.js" }, - "tagName": "ui5-table-row-action-navigation", + "tagName": "ui5-suggestion-item", "customElement": true, - "_ui5since": "2.7.0", "_ui5privacy": "public", - "events": [ + "_ui5abstract": true, + "_ui5implements": [ { - "name": "click", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired when a row action is clicked.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5since": "2.9.0", - "inheritedFrom": { - "name": "TableRowActionBase", - "module": "dist/TableRowActionBase.js" - } + "name": "IInputSuggestionItemSelectable", + "package": "@ui5/webcomponents", + "module": "dist/Input.js" } ] } @@ -25583,38 +22508,78 @@ "kind": "js", "name": "default", "declaration": { - "name": "TableRowActionNavigation", - "module": "dist/TableRowActionNavigation.js" + "name": "SuggestionItem", + "module": "dist/SuggestionItem.js" } }, { "kind": "custom-element-definition", - "name": "ui5-table-row-action-navigation", + "name": "ui5-suggestion-item", "declaration": { - "name": "TableRowActionNavigation", - "module": "dist/TableRowActionNavigation.js" + "name": "SuggestionItem", + "module": "dist/SuggestionItem.js" } } ] }, { "kind": "javascript-module", - "path": "dist/TableRowBase.js", + "path": "dist/SuggestionItemCustom.js", "declarations": [ { "kind": "class", - "description": "A class to serve as a foundation for the `TableRow` and `TableHeaderRow` classes.", - "name": "TableRowBase", + "description": "The `ui5-suggestion-item-custom` is type of suggestion item,\nthat can be used to place suggestion items with custom content in the input.\nThe text property is considered only for autocomplete.\nIn case the user needs highlighting functionality, check \"@ui5/webcomponents-base/dist/util/generateHighlightedMarkup.js\"", + "name": "SuggestionItemCustom", + "slots": [ + { + "name": "default", + "description": "Defines the content of the component.", + "_ui5propertyName": "content", + "_ui5type": { + "text": "Array<Node>" + }, + "_ui5privacy": "public" + } + ], + "members": [ + { + "kind": "field", + "name": "text", + "type": { + "text": "string | undefined" + }, + "description": "Defines the text of the `ui5-suggestion-item-custom`.\n**Note:** The text property is considered only for autocomplete.", + "default": "undefined", + "privacy": "public" + } + ], + "attributes": [ + { + "description": "Defines the text of the `ui5-suggestion-item-custom`.\n**Note:** The text property is considered only for autocomplete.", + "name": "text", + "default": "undefined", + "fieldName": "text", + "type": { + "text": "string | undefined" + } + } + ], "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" + "name": "ListItemBase", + "package": "@ui5/webcomponents", + "module": "dist/ListItemBase.js" }, + "tagName": "ui5-suggestion-item-custom", "customElement": true, "_ui5since": "2.0.0", "_ui5privacy": "public", - "_ui5abstract": true, - "members": [] + "_ui5implements": [ + { + "name": "IInputSuggestionItemSelectable", + "package": "@ui5/webcomponents", + "module": "dist/Input.js" + } + ] } ], "exports": [ @@ -25622,221 +22587,225 @@ "kind": "js", "name": "default", "declaration": { - "name": "TableRowBase", - "module": "dist/TableRowBase.js" + "name": "SuggestionItemCustom", + "module": "dist/SuggestionItemCustom.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-suggestion-item-custom", + "declaration": { + "name": "SuggestionItemCustom", + "module": "dist/SuggestionItemCustom.js" } } ] }, { "kind": "javascript-module", - "path": "dist/TableSelection.js", + "path": "dist/SuggestionItemGroup.js", "declarations": [ { "kind": "class", - "description": "### Overview\n\nThe `ui5-table-selection` component is used inside the `ui5-table` to add key-based selection capabilities to the `ui5-table`.\n\nThe component offers three selection modes:\n* Single - select a single row.\n* Multiple - select multiple rows.\n* None - no selection active.\n\nAs the selection is key-based, `ui5-table-row` components need to define a unique `row-key` property.\n\n### Usage\n\nThe `ui5-table-selection` component is only used inside the `ui5-table` component as a feature.\nIt has to be slotted inside the `ui5-table` in the `features` slot.\nThe component is not intended to be used as a standalone component.\n\n```html\n<ui5-table>\n\t<ui5-table-selection mode=\"Multiple\" slot=\"features\"></ui5-table-selection>\n</ui5-table>\n```\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TableSelection.js\";`", - "name": "TableSelection", - "members": [ + "description": "The `ui5-suggestion-item-group` is type of suggestion item,\nthat can be used to split the `ui5-input` suggestions into groups.", + "name": "SuggestionItemGroup", + "slots": [ { - "kind": "field", - "name": "mode", - "type": { - "text": "TableSelectionMode", + "name": "default", + "description": "Defines the items of the <code>ui5-suggestion-item-group</code>.", + "_ui5propertyName": "items", + "_ui5type": { + "text": "Array<SuggestionListItem>", "references": [ { - "name": "TableSelectionMode", + "name": "SuggestionListItem", "package": "@ui5/webcomponents", - "module": "dist/types/TableSelectionMode.js" + "module": "dist/SuggestionListItem.js" } ] }, - "default": "\"Multiple\"", - "description": "Defines the selection mode.", - "privacy": "public" + "_ui5privacy": "public" }, { - "kind": "field", - "name": "selected", - "type": { - "text": "string" + "name": "header", + "description": "Defines the header of the component.\n\n**Note:** Using this slot, the default header text of group and the value of `headerText` property will be overwritten.", + "_ui5type": { + "text": "Array<ListItemBase>", + "references": [ + { + "name": "ListItemBase", + "package": "@ui5/webcomponents", + "module": "dist/ListItemBase.js" + } + ] }, - "default": "\"\"", - "description": "Defines the selected rows separated by a space.", - "privacy": "public" + "_ui5privacy": "public" } ], - "events": [ + "superclass": { + "name": "ListItemGroup", + "package": "@ui5/webcomponents", + "module": "dist/ListItemGroup.js" + }, + "tagName": "ui5-suggestion-item-group", + "customElement": true, + "_ui5since": "2.0.0", + "_ui5privacy": "public", + "cssParts": [ { - "name": "change", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired when the selection is changed by user interaction.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true + "description": "Used to style the header item of the group", + "name": "header" + }, + { + "description": "Used to style the title of the group header", + "name": "title" } ], "attributes": [ { - "description": "Defines the selection mode.", - "name": "mode", - "default": "\"Multiple\"", - "fieldName": "mode", + "description": "Defines the accessible name of the header.", + "name": "header-accessible-name", + "default": "undefined", + "fieldName": "headerAccessibleName", "type": { - "text": "\"None\" | \"Single\" | \"Multiple\"" + "text": "string | undefined" } }, { - "description": "Defines the selected rows separated by a space.", - "name": "selected", - "default": "\"\"", - "fieldName": "selected", + "description": "Defines the header text of the <code>ui5-li-group</code>.", + "name": "header-text", + "default": "undefined", + "fieldName": "headerText", "type": { - "text": "string" + "text": "string | undefined" + } + }, + { + "description": "Defines if the text of the component should wrap when it's too long.\nWhen set to \"Normal\", the content (title, description) will be wrapped\nusing the `ui5-expandable-text` component.<br/>\n\nThe text can wrap up to 100 characters on small screens (size S) and\nup to 300 characters on larger screens (size M and above). When text exceeds\nthese limits, it truncates with an ellipsis followed by a text expansion trigger.\n\nAvailable options are:\n- `None` (default) - The text will truncate with an ellipsis.\n- `Normal` - The text will wrap (without truncation).", + "name": "wrapping-type", + "default": "\"None\"", + "fieldName": "wrappingType", + "type": { + "text": "\"None\" | \"Normal\"" } } ], - "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" - }, - "deprecated": "This component is deprecated and will be removed in future releases. Use the `ui5-table-selection-single` or `ui5-table-selection-multi` components instead.", - "tagName": "ui5-table-selection", - "customElement": true, - "_ui5experimental": "This web component is available since 2.0 with an experimental flag and its API and behavior are subject to change.", - "_ui5since": "2.0.0", - "_ui5privacy": "public" - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "TableSelection", - "module": "dist/TableSelection.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-table-selection", - "declaration": { - "name": "TableSelection", - "module": "dist/TableSelection.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/TableSelectionBase.js", - "declarations": [ - { - "kind": "class", - "description": "The `TableSelectionBase` class serves as a foundation for table selections.", - "name": "TableSelectionBase", "members": [ { "kind": "field", - "name": "selected", + "name": "headerAccessibleName", "type": { "text": "string | undefined" }, - "description": "Defines the selected elements of the component.", - "default": "undefined", - "privacy": "public" + "description": "Defines the accessible name of the header.", + "privacy": "public", + "default": "undefined" }, { "kind": "field", - "name": "behavior", + "name": "headerText", "type": { - "text": "TableSelectionBehavior", + "text": "string | undefined" + }, + "description": "Defines the header text of the <code>ui5-li-group</code>.", + "privacy": "public", + "default": "undefined" + }, + { + "kind": "field", + "name": "wrappingType", + "type": { + "text": "WrappingType", "references": [ { - "name": "TableSelectionBehavior", + "name": "WrappingType", "package": "@ui5/webcomponents", - "module": "dist/types/TableSelectionBehavior.js" + "module": "dist/types/WrappingType.js" } ] }, - "default": "\"RowSelector\"", - "description": "Defines the selection behavior.", + "default": "\"None\"", + "description": "Defines if the text of the component should wrap when it's too long.\nWhen set to \"Normal\", the content (title, description) will be wrapped\nusing the `ui5-expandable-text` component.<br/>\n\nThe text can wrap up to 100 characters on small screens (size S) and\nup to 300 characters on larger screens (size M and above). When text exceeds\nthese limits, it truncates with an ellipsis followed by a text expansion trigger.\n\nAvailable options are:\n- `None` (default) - The text will truncate with an ellipsis.\n- `Normal` - The text will wrap (without truncation).", "privacy": "public", - "_ui5since": "2.11" - }, - { - "kind": "method", - "name": "getRowByKey", - "return": { - "type": { - "text": "TableRow | undefined", - "references": [ - { - "name": "TableRow", - "package": "@ui5/webcomponents", - "module": "dist/TableRow.js" - } - ] - } - }, - "parameters": [ - { - "name": "rowKey", - "type": { - "text": "string" - }, - "description": "The row key", - "_ui5privacy": "public" - } - ], - "description": "Returns the table row instance for the given row key.", - "privacy": "public" + "_ui5since": "2.15.0" } ], "events": [ { - "name": "change", + "name": "move", "_ui5privacy": "public", "type": { - "text": "CustomEvent" + "text": "CustomEvent<ListItemGroupMoveEventDetail>", + "references": [ + { + "name": "ListItemGroupMoveEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/ListItemGroup.js" + } + ] }, - "description": "Fired when the selection is changed by user interaction.", + "description": "Fired when a movable list item is dropped onto a drop target.\n\n**Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, - "_ui5Bubbles": true - } - ], - "attributes": [ - { - "description": "Defines the selected elements of the component.", - "name": "selected", - "default": "undefined", - "fieldName": "selected", - "type": { - "text": "string | undefined" - } + "_ui5Bubbles": true, + "_ui5since": "2.1.0", + "_ui5parameters": [ + { + "type": { + "text": "object" + }, + "name": "destination", + "_ui5privacy": "public", + "description": "Contains information about the destination of the moved element. Has `element` and `placement` properties." + }, + { + "type": { + "text": "object" + }, + "name": "source", + "_ui5privacy": "public", + "description": "Contains information about the moved element under `element` property." + } + ] }, { - "description": "Defines the selection behavior.", - "name": "behavior", - "default": "\"RowSelector\"", - "fieldName": "behavior", + "name": "move-over", + "_ui5privacy": "public", "type": { - "text": "\"RowSelector\" | \"RowOnly\"" - } + "text": "CustomEvent<ListItemGroupMoveEventDetail>", + "references": [ + { + "name": "ListItemGroupMoveEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/ListItemGroup.js" + } + ] + }, + "description": "Fired when a movable list item is moved over a potential drop target during a dragging operation.\n\nIf the new position is valid, prevent the default action of the event using `preventDefault()`.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true, + "_ui5since": "2.1.0", + "_ui5parameters": [ + { + "type": { + "text": "object" + }, + "name": "destination", + "_ui5privacy": "public", + "description": "Contains information about the destination of the moved element. Has `element` and `placement` properties." + }, + { + "type": { + "text": "object" + }, + "name": "source", + "_ui5privacy": "public", + "description": "Contains information about the moved element under `element` property." + } + ] } - ], - "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" - }, - "customElement": true, - "_ui5since": "2.8.0", - "_ui5privacy": "public" + ] } ], "exports": [ @@ -25844,219 +22813,473 @@ "kind": "js", "name": "default", "declaration": { - "name": "TableSelectionBase", - "module": "dist/TableSelectionBase.js" + "name": "SuggestionItemGroup", + "module": "dist/SuggestionItemGroup.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-suggestion-item-group", + "declaration": { + "name": "SuggestionItemGroup", + "module": "dist/SuggestionItemGroup.js" } } ] }, { "kind": "javascript-module", - "path": "dist/TableSelectionMulti.js", + "path": "dist/SuggestionListItem.js", "declarations": [ { "kind": "class", - "description": "### Overview\n\nThe `ui5-table-selection-multi` component is used inside the `ui5-table` to add multi-selection capabilities to the `ui5-table`.\nSince selection is key-based, each `ui5-table-row` must define a unique `row-key` property.\n\n### Usage\n\nThe `ui5-table-selection-multi` component is a feature designed exclusively for use within the `ui5-table` component.\nIt must be placed inside the `features` slot of `ui5-table`.\nThis component is not intended for standalone use.\n\n```html\n<ui5-table>\n\t<ui5-table-selection-multi slot=\"features\" selected=\"Row1 Row3\"></ui5-table-selection-multi>\n</ui5-table>\n```\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TableSelectionMulti.js\";`", - "name": "TableSelectionMulti", - "members": [ + "description": "The `ui5-li-suggestion-item` represents the suggestion item in the `ui5-input`\nsuggestion popover.", + "name": "SuggestionListItem", + "cssParts": [ { - "kind": "field", - "name": "selected", - "type": { - "text": "string | undefined" + "description": "Used to style the additionalText of the list item", + "name": "additional-text" + }, + { + "description": "Used to style the checkbox rendered when the list item is in multiple selection mode", + "name": "checkbox" + }, + { + "description": "Used to style the content area of the list item", + "name": "content" + }, + { + "description": "Used to style the button rendered when the list item is in delete mode", + "name": "delete-button" + }, + { + "description": "Used to style the description of the suggestion list item", + "name": "description" + }, + { + "description": "Used to style the button rendered when the list item is of type detail", + "name": "detail-button" + }, + { + "description": "Used to style the icon of the list item", + "name": "icon" + }, + { + "description": "Used to style the info of the suggestion list item", + "name": "info" + }, + { + "description": "Used to style the main li tag of the list item", + "name": "native-li" + }, + { + "description": "Used to style the radio button rendered when the list item is in single selection mode", + "name": "radio" + }, + { + "description": "Used to style the title of the suggestion list item", + "name": "title" + } + ], + "slots": [ + { + "name": "default", + "description": "Defines the title text of the suggestion item.", + "_ui5propertyName": "titleText", + "_ui5type": { + "text": "Array<Node>" }, - "description": "Defines the `row-key` values of selected rows, with each value separated by a space.", - "default": "undefined", - "privacy": "public", - "inheritedFrom": { - "name": "TableSelectionBase", - "module": "dist/TableSelectionBase.js" - } + "_ui5privacy": "public" }, { - "kind": "field", - "name": "headerSelector", - "type": { - "text": "TableSelectionMultiHeaderSelector", + "name": "deleteButton", + "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<IButton>", "references": [ { - "name": "TableSelectionMultiHeaderSelector", + "name": "IButton", "package": "@ui5/webcomponents", - "module": "dist/types/TableSelectionMultiHeaderSelector.js" + "module": "dist/Button.js" } ] }, - "default": "\"SelectAll\"", - "description": "Defines the selector of the header row.", - "privacy": "public", - "_ui5since": "2.12" + "_ui5privacy": "public" }, { - "kind": "method", - "name": "getSelectedRows", - "return": { - "type": { - "text": "Array<TableRow>", - "references": [ - { - "name": "TableRow", - "package": "@ui5/webcomponents", - "module": "dist/TableRow.js" - } - ] - } + "name": "image", + "description": "**Note:** While the slot allows option for setting custom avatar, to match the\ndesign guidelines, please use the `ui5-avatar` with it's default size - S.\n\n**Note:** If bigger `ui5-avatar` needs to be used, then the size of the\n`ui5-li` should be customized in order to fit.", + "_ui5since": "2.0.0", + "_ui5type": { + "text": "Array<HTMLElement>" }, - "description": "Returns an array of the selected rows.", - "privacy": "public" + "_ui5privacy": "public" }, { - "kind": "method", - "name": "getSelectedAsSet", - "return": { - "type": { - "text": "Set<string>" - } + "name": "richDescription", + "description": "Defines a description that can contain HTML.\n**Note:** If not specified, the `description` property will be used.", + "_ui5since": "1.0.0-rc.8", + "_ui5type": { + "text": "Array<HTMLElement>" }, - "description": "Returns the `selected` property as a set of unique `row-key` values.", - "privacy": "public" - }, - { - "kind": "method", - "name": "setSelectedAsSet", - "return": { - "type": { - "text": "void" - } + "_ui5privacy": "public" + } + ], + "members": [ + { + "kind": "field", + "name": "accessibilityAttributes", + "type": { + "text": "ListItemAccessibilityAttributes", + "references": [ + { + "name": "ListItemAccessibilityAttributes", + "package": "@ui5/webcomponents", + "module": "dist/ListItem.js" + } + ] }, - "parameters": [ - { - "name": "selectedSet", - "type": { - "text": "Set<string>" - }, - "description": "A set of `row-key` values", - "_ui5privacy": "public" - } - ], - "description": "Sets the `selected` property using the provided set of unique `row-key` values.", - "privacy": "public" + "default": "{}", + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaSetsize**: Defines the number of items in the current set when not all items in the set are present in the DOM.\n**Note:** The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`.\n\n\t- **ariaPosinset**: Defines an element's number or position in the current set when not all items are present in the DOM.\n\t**Note:** The value 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.", + "privacy": "public", + "_ui5since": "1.15.0" }, { "kind": "field", - "name": "behavior", + "name": "accessibleName", "type": { - "text": "TableSelectionBehavior", + "text": "string | undefined" + }, + "description": "Defines the text alternative of the component.\nNote: If not provided a default text alternative will be set, if present.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.0.0-rc.15" + }, + { + "kind": "field", + "name": "additionalText", + "type": { + "text": "string | undefined" + }, + "description": "Defines the `additionalText`, displayed in the end of the list item.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.0.0-rc.15" + }, + { + "kind": "field", + "name": "additionalTextState", + "type": { + "text": "ValueState", "references": [ { - "name": "TableSelectionBehavior", + "name": "ValueState", + "package": "@ui5/webcomponents-base", + "module": "dist/types/ValueState.js" + } + ] + }, + "default": "\"None\"", + "description": "Defines the state of the `additionalText`.\n\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", + "privacy": "public", + "_ui5since": "1.0.0-rc.15" + }, + { + "kind": "field", + "name": "description", + "type": { + "text": "string | undefined" + }, + "description": "Defines the description displayed right under the item text, if such is present.", + "default": "undefined", + "privacy": "public", + "_ui5since": "0.8.0" + }, + { + "kind": "field", + "name": "highlight", + "type": { + "text": "Highlight", + "references": [ + { + "name": "Highlight", "package": "@ui5/webcomponents", - "module": "dist/types/TableSelectionBehavior.js" + "module": "dist/types/Highlight.js" } ] }, - "default": "\"RowSelector\"", - "description": "Defines the selection behavior.", + "default": "\"None\"", + "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", "privacy": "public", - "_ui5since": "2.11", - "inheritedFrom": { - "name": "TableSelectionBase", - "module": "dist/TableSelectionBase.js" - } + "_ui5since": "1.24" }, { - "kind": "method", - "name": "getRowByKey", - "return": { - "type": { - "text": "TableRow | undefined", - "references": [ - { - "name": "TableRow", - "package": "@ui5/webcomponents", - "module": "dist/TableRow.js" - } - ] - } + "kind": "field", + "name": "icon", + "type": { + "text": "string | undefined" }, - "parameters": [ - { - "name": "rowKey", - "type": { - "text": "string" - }, - "description": "The row key", - "_ui5privacy": "public" - } - ], - "description": "Returns the table row instance for the given row key.", + "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": "undefined", + "privacy": "public" + }, + { + "kind": "field", + "name": "iconEnd", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the `icon` should be displayed in the beginning of the list item or in the end.", + "privacy": "public" + }, + { + "kind": "field", + "name": "movable", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the item is movable.", "privacy": "public", - "inheritedFrom": { - "name": "TableSelectionBase", - "module": "dist/TableSelectionBase.js" - } - } - ], - "attributes": [ + "_ui5since": "2.0.0" + }, { - "description": "Defines the `row-key` values of selected rows, with each value separated by a space.", + "kind": "field", + "name": "navigated", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "The navigated state of the list item.\nIf set to `true`, a navigation indicator is displayed at the end of the list item.", + "privacy": "public", + "_ui5since": "1.10.0" + }, + { + "kind": "field", "name": "selected", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines the selected state of the component.", + "privacy": "public" + }, + { + "kind": "field", + "name": "text", + "type": { + "text": "string | undefined" + }, + "description": "Defines the text of the component.", "default": "undefined", - "fieldName": "selected", + "privacy": "public", + "_ui5since": "2.10.0" + }, + { + "kind": "field", + "name": "tooltip", "type": { "text": "string | undefined" }, - "inheritedFrom": { - "name": "TableSelectionBase", - "module": "dist/TableSelectionBase.js" - } + "description": "Defines the text of the tooltip that would be displayed for the list item.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.23.0" }, { - "description": "Defines the selector of the header row.", - "name": "header-selector", - "default": "\"SelectAll\"", - "fieldName": "headerSelector", + "kind": "field", + "name": "type", "type": { - "text": "\"SelectAll\" | \"ClearAll\"" - } + "text": "ListItemType", + "references": [ + { + "name": "ListItemType", + "package": "@ui5/webcomponents", + "module": "dist/types/ListItemType.js" + } + ] + }, + "default": "\"Active\"", + "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.", + "privacy": "public" }, { - "description": "Defines the selection behavior.", - "name": "behavior", - "default": "\"RowSelector\"", - "fieldName": "behavior", + "kind": "field", + "name": "wrappingType", "type": { - "text": "\"RowSelector\" | \"RowOnly\"" + "text": "WrappingType", + "references": [ + { + "name": "WrappingType", + "package": "@ui5/webcomponents", + "module": "dist/types/WrappingType.js" + } + ] }, - "inheritedFrom": { - "name": "TableSelectionBase", - "module": "dist/TableSelectionBase.js" - } + "default": "\"None\"", + "description": "Defines if the text of the component should wrap when it's too long.\nWhen set to \"Normal\", the content (title, description) will be wrapped\nusing the `ui5-expandable-text` component.<br/>\n\nThe text can wrap up to 100 characters on small screens (size S) and\nup to 300 characters on larger screens (size M and above). When text exceeds\nthese limits, it truncates with an ellipsis followed by a text expansion trigger.\n\nAvailable options are:\n- `None` (default) - The text will truncate with an ellipsis.\n- `Normal` - The text will wrap (without truncation).", + "privacy": "public", + "_ui5since": "2.10.0" } ], "superclass": { - "name": "TableSelectionBase", + "name": "ListItemStandard", "package": "@ui5/webcomponents", - "module": "dist/TableSelectionBase.js" + "module": "dist/ListItemStandard.js" }, - "tagName": "ui5-table-selection-multi", + "tagName": "ui5-li-suggestion-item", "customElement": true, - "_ui5since": "2.8.0", - "_ui5privacy": "public", + "_ui5privacy": "private", + "attributes": [ + { + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaSetsize**: Defines the number of items in the current set when not all items in the set are present in the DOM.\n**Note:** The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`.\n\n\t- **ariaPosinset**: Defines an element's number or position in the current set when not all items are present in the DOM.\n\t**Note:** The value 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.", + "name": "accessibility-attributes", + "default": "{}", + "fieldName": "accessibilityAttributes", + "type": { + "text": "ListItemAccessibilityAttributes" + } + }, + { + "description": "Defines the text alternative of the component.\nNote: If not provided a default text alternative will be set, if present.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the `additionalText`, displayed in the end of the list item.", + "name": "additional-text", + "default": "undefined", + "fieldName": "additionalText", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the state of the `additionalText`.\n\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", + "name": "additional-text-state", + "default": "\"None\"", + "fieldName": "additionalTextState", + "type": { + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" + } + }, + { + "description": "Defines the description displayed right under the item text, if such is present.", + "name": "description", + "default": "undefined", + "fieldName": "description", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", + "name": "highlight", + "default": "\"None\"", + "fieldName": "highlight", + "type": { + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" + } + }, + { + "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).", + "name": "icon", + "default": "undefined", + "fieldName": "icon", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines whether the `icon` should be displayed in the beginning of the list item or in the end.", + "name": "icon-end", + "default": "false", + "fieldName": "iconEnd", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines whether the item is movable.", + "name": "movable", + "default": "false", + "fieldName": "movable", + "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.", + "name": "navigated", + "default": "false", + "fieldName": "navigated", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines the selected state of the component.", + "name": "selected", + "default": "false", + "fieldName": "selected", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines the text of the component.", + "name": "text", + "default": "undefined", + "fieldName": "text", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the text of the tooltip that would be displayed for the list item.", + "name": "tooltip", + "default": "undefined", + "fieldName": "tooltip", + "type": { + "text": "string | undefined" + } + }, + { + "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.", + "name": "type", + "default": "\"Active\"", + "fieldName": "type", + "type": { + "text": "\"Navigation\" | \"Inactive\" | \"Active\" | \"Detail\"" + } + }, + { + "description": "Defines if the text of the component should wrap when it's too long.\nWhen set to \"Normal\", the content (title, description) will be wrapped\nusing the `ui5-expandable-text` component.<br/>\n\nThe text can wrap up to 100 characters on small screens (size S) and\nup to 300 characters on larger screens (size M and above). When text exceeds\nthese limits, it truncates with an ellipsis followed by a text expansion trigger.\n\nAvailable options are:\n- `None` (default) - The text will truncate with an ellipsis.\n- `Normal` - The text will wrap (without truncation).", + "name": "wrapping-type", + "default": "\"None\"", + "fieldName": "wrappingType", + "type": { + "text": "\"None\" | \"Normal\"" + } + } + ], "events": [ { - "name": "change", + "name": "detail-click", "_ui5privacy": "public", "type": { "text": "CustomEvent" }, - "description": "Fired when the selection is changed by user interaction.", + "description": "Fired when the user clicks on the detail button when type is `Detail`.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "inheritedFrom": { - "name": "TableSelectionBase", - "module": "dist/TableSelectionBase.js" - } + "_ui5Bubbles": true } ] } @@ -26066,541 +23289,4656 @@ "kind": "js", "name": "default", "declaration": { - "name": "TableSelectionMulti", - "module": "dist/TableSelectionMulti.js" + "name": "SuggestionListItem", + "module": "dist/SuggestionListItem.js" } }, { "kind": "custom-element-definition", - "name": "ui5-table-selection-multi", + "name": "ui5-li-suggestion-item", "declaration": { - "name": "TableSelectionMulti", - "module": "dist/TableSelectionMulti.js" + "name": "SuggestionListItem", + "module": "dist/SuggestionListItem.js" } } ] }, { "kind": "javascript-module", - "path": "dist/TableSelectionSingle.js", + "path": "dist/Switch.js", "declarations": [ { "kind": "class", - "description": "### Overview\n\nThe `ui5-table-selection-single` component is used inside the `ui5-table` to add single selection capabilities to the `ui5-table`.\nSince selection is key-based, each `ui5-table-row` must define a unique `row-key` property.\n\n### Usage\n\nThe `ui5-table-selection-single` component is a feature designed exclusively for use within the `ui5-table` component.\nIt must be placed inside the `features` slot of `ui5-table`.\nThis component is not intended for standalone use.\n\n```html\n<ui5-table>\n\t<ui5-table-selection-single slot=\"features\" selected=\"Row1\"></ui5-table-selection-single>\n</ui5-table>\n```\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TableSelectionSingle.js\";`", - "name": "TableSelectionSingle", + "description": "### Overview\nThe `ui5-switch` component is used for changing between binary states.\n\nThe component can display texts, that will be switched, based on the component state, via the `textOn` and `textOff` properties,\nbut texts longer than 3 letters will be cutted off.\n\nHowever, users are able to customize the width of `ui5-switch` with pure CSS (`<ui5-switch style=\"width: 200px\">`), and set widths, depending on the texts they would use.\n\nNote: the component would not automatically stretch to fit the whole text width.\n\n### Keyboard Handling\nThe state can be changed by pressing the Space and Enter keys.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Switch\";`", + "name": "Switch", + "cssParts": [ + { + "description": "Used to style the handle of the switch", + "name": "handle" + }, + { + "description": "Used to style the track, where the handle is being slid", + "name": "slider" + }, + { + "description": "Used to style the `textOff` property text", + "name": "text-off" + }, + { + "description": "Used to style the `textOn` property text", + "name": "text-on" + } + ], "members": [ { "kind": "field", - "name": "selected", + "name": "accessibleName", + "type": { + "text": "string | undefined" + }, + "description": "Sets the accessible ARIA name of the component.\n\n**Note**: We recommend that you set an accessibleNameRef pointing to an external label or at least an `accessibleName`.\nProviding an `accessibleNameRef` or an `accessibleName` is mandatory in the cases when `textOn` and `textOff` properties aren't set.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.2.0" + }, + { + "kind": "field", + "name": "accessibleNameRef", + "type": { + "text": "string | undefined" + }, + "description": "Receives id(or many ids) of the elements that label the component.\n\n**Note**: We recommend that you set an accessibleNameRef pointing to an external label or at least an `accessibleName`.\nProviding an `accessibleNameRef` or an `accessibleName` is mandatory in the cases when `textOn` and `textOff` properties aren't set.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.1.0" + }, + { + "kind": "field", + "name": "checked", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines if the component is checked.\n\n**Note:** The property can be changed with user interaction,\neither by cliking the component, or by pressing the `Enter` or `Space` key.", + "privacy": "public", + "_ui5formProperty": true, + "_ui5formEvents": "change" + }, + { + "kind": "field", + "name": "design", + "type": { + "text": "SwitchDesign", + "references": [ + { + "name": "SwitchDesign", + "package": "@ui5/webcomponents", + "module": "dist/types/SwitchDesign.js" + } + ] + }, + "default": "\"Textual\"", + "description": "Defines the component design.\n\n**Note:** If `Graphical` type is set,\npositive and negative icons will replace the `textOn` and `textOff`.", + "privacy": "public" + }, + { + "kind": "field", + "name": "disabled", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the component is disabled.\n\n**Note:** A disabled component is noninteractive.", + "privacy": "public" + }, + { + "kind": "field", + "name": "name", + "type": { + "text": "string | undefined" + }, + "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.16.0" + }, + { + "kind": "field", + "name": "required", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the component is required.", + "privacy": "public", + "_ui5since": "1.16.0" + }, + { + "kind": "field", + "name": "textOff", + "type": { + "text": "string | undefined" + }, + "description": "Defines the text, displayed when the component is not checked.\n\n**Note:** We recommend using short texts, up to 3 letters (larger texts would be cut off).", + "default": "undefined", + "privacy": "public" + }, + { + "kind": "field", + "name": "textOn", + "type": { + "text": "string | undefined" + }, + "description": "Defines the text, displayed when the component is checked.\n\n**Note:** We recommend using short texts, up to 3 letters (larger texts would be cut off).", + "default": "undefined", + "privacy": "public" + }, + { + "kind": "field", + "name": "tooltip", + "type": { + "text": "string | undefined" + }, + "description": "Defines the tooltip of the component.\n\n**Note:** If applicable an external label reference should always be the preferred option to provide context to the `ui5-switch` component over a tooltip.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.9.0" + }, + { + "kind": "field", + "name": "value", + "type": { + "text": "string" + }, + "default": "\"\"", + "description": "Defines the form value of the component.", + "privacy": "public", + "_ui5since": "2.12.0" + } + ], + "events": [ + { + "name": "change", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the component checked state changes.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true + } + ], + "attributes": [ + { + "description": "Sets the accessible ARIA name of the component.\n\n**Note**: We recommend that you set an accessibleNameRef pointing to an external label or at least an `accessibleName`.\nProviding an `accessibleNameRef` or an `accessibleName` is mandatory in the cases when `textOn` and `textOff` properties aren't set.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Receives id(or many ids) of the elements that label the component.\n\n**Note**: We recommend that you set an accessibleNameRef pointing to an external label or at least an `accessibleName`.\nProviding an `accessibleNameRef` or an `accessibleName` is mandatory in the cases when `textOn` and `textOff` properties aren't set.", + "name": "accessible-name-ref", + "default": "undefined", + "fieldName": "accessibleNameRef", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines if the component is checked.\n\n**Note:** The property can be changed with user interaction,\neither by cliking the component, or by pressing the `Enter` or `Space` key.", + "name": "checked", + "default": "false", + "fieldName": "checked", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines the component design.\n\n**Note:** If `Graphical` type is set,\npositive and negative icons will replace the `textOn` and `textOff`.", + "name": "design", + "default": "\"Textual\"", + "fieldName": "design", + "type": { + "text": "\"Textual\" | \"Graphical\"" + } + }, + { + "description": "Defines whether the component is disabled.\n\n**Note:** A disabled component is noninteractive.", + "name": "disabled", + "default": "false", + "fieldName": "disabled", + "type": { + "text": "boolean" + } + }, + { + "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", + "name": "name", + "default": "undefined", + "fieldName": "name", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines whether the component is required.", + "name": "required", + "default": "false", + "fieldName": "required", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines the text, displayed when the component is not checked.\n\n**Note:** We recommend using short texts, up to 3 letters (larger texts would be cut off).", + "name": "text-off", + "default": "undefined", + "fieldName": "textOff", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the text, displayed when the component is checked.\n\n**Note:** We recommend using short texts, up to 3 letters (larger texts would be cut off).", + "name": "text-on", + "default": "undefined", + "fieldName": "textOn", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the tooltip of the component.\n\n**Note:** If applicable an external label reference should always be the preferred option to provide context to the `ui5-switch` component over a tooltip.", + "name": "tooltip", + "default": "undefined", + "fieldName": "tooltip", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the form value of the component.", + "name": "value", + "default": "\"\"", + "fieldName": "value", + "type": { + "text": "string" + } + } + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-switch", + "customElement": true, + "_ui5since": "0.8.0", + "_ui5privacy": "public" + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "Switch", + "module": "dist/Switch.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-switch", + "declaration": { + "name": "Switch", + "module": "dist/Switch.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/Tab.js", + "declarations": [ + { + "kind": "class", + "description": "The `ui5-tab` represents a selectable item inside a `ui5-tabcontainer`.\nIt defines both the item in the tab strip (top part of the `ui5-tabcontainer`) and the\ncontent that is presented to the user once the tab is selected.", + "name": "Tab", + "slots": [ + { + "name": "default", + "description": "Holds the content associated with this tab.", + "_ui5propertyName": "content", + "_ui5type": { + "text": "Array<Node>" + }, + "_ui5privacy": "public" + }, + { + "name": "items", + "description": "Defines hierarchies with nested sub tabs.\n\n**Note:** Use `ui5-tab` and `ui5-tab-separator` for the intended design.", + "_ui5type": { + "text": "Array<ITab>", + "references": [ + { + "name": "ITab", + "package": "@ui5/webcomponents", + "module": "dist/TabContainer.js" + } + ] + }, + "_ui5privacy": "public" + } + ], + "members": [ + { + "kind": "field", + "name": "additionalText", + "type": { + "text": "string | undefined" + }, + "description": "Represents the \"additionalText\" text, which is displayed in the tab. In the cases when in the same time there are tabs with icons and tabs without icons, if a tab has no icon the \"additionalText\" is displayed larger.", + "default": "undefined", + "privacy": "public" + }, + { + "kind": "field", + "name": "design", + "type": { + "text": "SemanticColor", + "references": [ + { + "name": "SemanticColor", + "package": "@ui5/webcomponents", + "module": "dist/types/SemanticColor.js" + } + ] + }, + "default": "\"Default\"", + "description": "Defines the component's design color.\n\nThe design is applied to:\n\n- the component icon\n- the `text` when the component overflows\n- the tab selection line\n\nAvailable designs are: `\"Default\"`, `\"Neutral\"`, `\"Positive\"`, `\"Critical\"` and `\"Negative\"`.\n\n**Note:** The design depends on the current theme.", + "privacy": "public" + }, + { + "kind": "field", + "name": "disabled", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Disabled tabs can't be selected.", + "privacy": "public" + }, + { + "kind": "method", + "name": "getDomRefInStrip", + "return": { + "type": { + "text": "HTMLElement | undefined" + } + }, + "description": "Returns the DOM reference of the tab that is placed in the header.\n\n**Note:** Tabs, placed in the `items` slot of other tabs are not shown in the header. Calling this method on such tabs will return `undefined`.\n\n**Note:** If you need a DOM ref to the tab content please use the `getDomRef` method.", + "privacy": "public", + "_ui5since": "1.0.0-rc.16" + }, + { + "kind": "field", + "name": "icon", + "type": { + "text": "string | undefined" + }, + "description": "Defines the icon source URI to be displayed as graphical element within the component.\nThe SAP-icons font provides numerous built-in icons.\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "default": "undefined", + "privacy": "public" + }, + { + "kind": "field", + "name": "movable", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines if the tab is movable.", + "privacy": "public", + "_ui5since": "2.0.0" + }, + { + "kind": "field", + "name": "selected", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Specifies if the component is selected.", + "privacy": "public" + }, + { + "kind": "field", + "name": "text", + "type": { + "text": "string | undefined" + }, + "description": "The text to be displayed for the item.", + "default": "undefined", + "privacy": "public" + } + ], + "attributes": [ + { + "description": "Represents the \"additionalText\" text, which is displayed in the tab. In the cases when in the same time there are tabs with icons and tabs without icons, if a tab has no icon the \"additionalText\" is displayed larger.", + "name": "additional-text", + "default": "undefined", + "fieldName": "additionalText", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the component's design color.\n\nThe design is applied to:\n\n- the component icon\n- the `text` when the component overflows\n- the tab selection line\n\nAvailable designs are: `\"Default\"`, `\"Neutral\"`, `\"Positive\"`, `\"Critical\"` and `\"Negative\"`.\n\n**Note:** The design depends on the current theme.", + "name": "design", + "default": "\"Default\"", + "fieldName": "design", + "type": { + "text": "\"Positive\" | \"Critical\" | \"Negative\" | \"Default\" | \"Neutral\"" + } + }, + { + "description": "Disabled tabs can't be selected.", + "name": "disabled", + "default": "false", + "fieldName": "disabled", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines the icon source URI to be displayed as graphical element within the component.\nThe SAP-icons font provides numerous built-in icons.\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "name": "icon", + "default": "undefined", + "fieldName": "icon", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines if the tab is movable.", + "name": "movable", + "default": "false", + "fieldName": "movable", + "type": { + "text": "boolean" + } + }, + { + "description": "Specifies if the component is selected.", + "name": "selected", + "default": "false", + "fieldName": "selected", + "type": { + "text": "boolean" + } + }, + { + "description": "The text to be displayed for the item.", + "name": "text", + "default": "undefined", + "fieldName": "text", + "type": { + "text": "string | undefined" + } + } + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-tab", + "customElement": true, + "_ui5privacy": "public", + "_ui5abstract": true, + "_ui5implements": [ + { + "name": "ITab", + "package": "@ui5/webcomponents", + "module": "dist/TabContainer.js" + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "Tab", + "module": "dist/Tab.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-tab", + "declaration": { + "name": "Tab", + "module": "dist/Tab.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/TabContainer.js", + "declarations": [ + { + "kind": "interface", + "name": "ITab", + "description": "Interface for components that may be slotted inside `ui5-tabcontainer` as items\n\n**Note:** Use directly `ui5-tab` or `ui5-tab-seprator`. Implementing the interface does not guarantee that the class can work as a tab.", + "_ui5privacy": "public" + }, + { + "kind": "class", + "description": "### Overview\n\nThe `ui5-tabcontainer` represents a collection of tabs with associated content.\nNavigation through the tabs changes the content display of the currently active content area.\nA tab can be labeled with text only, or icons with text.\n\n### Structure\n\nThe `ui5-tabcontainer` can hold two types of entities:\n\n- `ui5-tab` - contains all the information on an item (text and icon)\n- `ui5-tab-separator` - used to separate tabs with a line\n\n### Hierarchies\nMultiple sub tabs could be placed underneath one main tab. Nesting allows deeper hierarchies with indentations\nto indicate the level of each nested tab. When a tab has both sub tabs and own content its click area is split\nto allow the user to display the content or alternatively to expand / collapse the list of sub tabs.\n\n### Keyboard Handling\n\n#### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TabContainer.js\";`\n\n`import \"@ui5/webcomponents/dist/Tab.js\";` (for `ui5-tab`)\n\n`import \"@ui5/webcomponents/dist/TabSeparator.js\";` (for `ui5-tab-separator`)", + "name": "TabContainer", + "cssParts": [ + { + "description": "Used to style the content of the component", + "name": "content" + }, + { + "description": "Used to style the tabstrip of the component", + "name": "tabstrip" + } + ], + "slots": [ + { + "name": "default", + "description": "Defines the tabs.\n\n**Note:** Use `ui5-tab` and `ui5-tab-separator` for the intended design.", + "_ui5propertyName": "items", + "_ui5type": { + "text": "Array<ITab>", + "references": [ + { + "name": "ITab", + "package": "@ui5/webcomponents", + "module": "dist/TabContainer.js" + } + ] + }, + "_ui5privacy": "public" + }, + { + "name": "overflowButton", + "description": "Defines the button which will open the overflow menu. If nothing is provided to this slot,\nthe default button will be used.", + "_ui5since": "1.0.0-rc.9", + "_ui5type": { + "text": "Array<IButton>", + "references": [ + { + "name": "IButton", + "package": "@ui5/webcomponents", + "module": "dist/Button.js" + } + ] + }, + "_ui5privacy": "public" + }, + { + "name": "startOverflowButton", + "description": "Defines the button which will open the start overflow menu if available. If nothing is provided to this slot,\nthe default button will be used.", + "_ui5since": "1.1.0", + "_ui5type": { + "text": "Array<IButton>", + "references": [ + { + "name": "IButton", + "package": "@ui5/webcomponents", + "module": "dist/Button.js" + } + ] + }, + "_ui5privacy": "public" + } + ], + "members": [ + { + "kind": "field", + "name": "allItems", + "type": { + "text": "Array<ITab>", + "references": [ + { + "name": "ITab", + "package": "@ui5/webcomponents", + "module": "dist/TabContainer.js" + } + ] + }, + "description": "Returns all slotted tabs and their subTabs in a flattened array.\nThe order of tabs is depth-first.", + "privacy": "public", + "default": "[]", + "readonly": true + }, + { + "kind": "field", + "name": "collapsed", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the tab content is collapsed.", + "privacy": "public" + }, + { + "kind": "field", + "name": "contentBackgroundDesign", + "type": { + "text": "BackgroundDesign", + "references": [ + { + "name": "BackgroundDesign", + "package": "@ui5/webcomponents", + "module": "dist/types/BackgroundDesign.js" + } + ] + }, + "default": "\"Solid\"", + "description": "Sets the background color of the Tab Container's content as `Solid`, `Transparent`, or `Translucent`.", + "privacy": "public", + "_ui5since": "1.10.0" + }, + { + "kind": "field", + "name": "headerBackgroundDesign", + "type": { + "text": "BackgroundDesign", + "references": [ + { + "name": "BackgroundDesign", + "package": "@ui5/webcomponents", + "module": "dist/types/BackgroundDesign.js" + } + ] + }, + "default": "\"Solid\"", + "description": "Sets the background color of the Tab Container's header as `Solid`, `Transparent`, or `Translucent`.", + "privacy": "public", + "_ui5since": "1.10.0" + }, + { + "kind": "field", + "name": "noAutoSelection", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines if automatic tab selection is deactivated.\n\n**Note:** By default, if none of the child tabs have the `selected` property set, the first tab will be automatically selected.\nSetting this property to `true` allows preventing this behavior.", + "privacy": "public", + "_ui5since": "2.9.0" + }, + { + "kind": "field", + "name": "overflowMode", + "type": { + "text": "OverflowMode", + "references": [ + { + "name": "OverflowMode", + "package": "@ui5/webcomponents", + "module": "dist/types/OverflowMode.js" + } + ] + }, + "default": "\"End\"", + "description": "Defines the overflow mode of the header (the tab strip). If you have a large number of tabs, only the tabs that can fit on screen will be visible.\nAll other tabs that can 't fit on the screen are available in an overflow tab \"More\".\n\n**Note:**\nOnly one overflow at the end would be displayed by default,\nbut when set to `StartAndEnd`, there will be two overflows on both ends, and tab order will not change on tab selection.", + "privacy": "public", + "_ui5since": "1.1.0" + }, + { + "kind": "field", + "name": "tabLayout", + "type": { + "text": "TabLayout", + "references": [ + { + "name": "TabLayout", + "package": "@ui5/webcomponents", + "module": "dist/types/TabLayout.js" + } + ] + }, + "default": "\"Standard\"", + "description": "Defines the alignment of the content and the `additionalText` of a tab.\n\n**Note:**\nThe content and the `additionalText` would be displayed vertically by default,\nbut when set to `Inline`, they would be displayed horizontally.", + "privacy": "public" + } + ], + "events": [ + { + "name": "move", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<TabContainerMoveEventDetail>", + "references": [ + { + "name": "TabContainerMoveEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/TabContainer.js" + } + ] + }, + "description": "Fired when element is moved to the tab container.\n\n**Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5parameters": [ + { + "type": { + "text": "object" + }, + "name": "destination", + "_ui5privacy": "public", + "description": "Contains information about the destination of the moved element. Has `element` and `placement` properties." + }, + { + "type": { + "text": "object" + }, + "name": "source", + "_ui5privacy": "public", + "description": "Contains information about the moved element under `element` property." + } + ] + }, + { + "name": "move-over", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<TabContainerMoveEventDetail>", + "references": [ + { + "name": "TabContainerMoveEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/TabContainer.js" + } + ] + }, + "description": "Fired when element is being moved over the tab container.\n\nIf the new position is valid, prevent the default action of the event using `preventDefault()`.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true, + "_ui5since": "2.0.0", + "_ui5parameters": [ + { + "type": { + "text": "object" + }, + "name": "destination", + "_ui5privacy": "public", + "description": "Contains information about the destination of the moved element. Has `element` and `placement` properties." + }, + { + "type": { + "text": "object" + }, + "name": "source", + "_ui5privacy": "public", + "description": "Contains information about the moved element under `element` property." + } + ] + }, + { + "name": "tab-select", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<TabContainerTabSelectEventDetail>", + "references": [ + { + "name": "TabContainerTabSelectEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/TabContainer.js" + } + ] + }, + "description": "Fired when a tab is selected.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true, + "_ui5since": "2.0.0", + "_ui5parameters": [ + { + "type": { + "text": "Tab", + "references": [ + { + "name": "Tab", + "package": "@ui5/webcomponents", + "module": "dist/Tab.js" + } + ] + }, + "name": "tab", + "_ui5privacy": "public", + "description": "The selected `tab`." + }, + { + "type": { + "text": "Integer" + }, + "name": "tabIndex", + "_ui5privacy": "public", + "description": "The selected `tab` index in the flattened array of all tabs and their subTabs, provided by the `allItems` getter." + } + ] + } + ], + "attributes": [ + { + "description": "Returns all slotted tabs and their subTabs in a flattened array.\nThe order of tabs is depth-first.", + "name": "all-items", + "default": "[]", + "fieldName": "allItems", + "type": { + "text": "any" + } + }, + { + "description": "Defines whether the tab content is collapsed.", + "name": "collapsed", + "default": "false", + "fieldName": "collapsed", + "type": { + "text": "boolean" + } + }, + { + "description": "Sets the background color of the Tab Container's content as `Solid`, `Transparent`, or `Translucent`.", + "name": "content-background-design", + "default": "\"Solid\"", + "fieldName": "contentBackgroundDesign", + "type": { + "text": "\"Transparent\" | \"Solid\" | \"Translucent\"" + } + }, + { + "description": "Sets the background color of the Tab Container's header as `Solid`, `Transparent`, or `Translucent`.", + "name": "header-background-design", + "default": "\"Solid\"", + "fieldName": "headerBackgroundDesign", + "type": { + "text": "\"Transparent\" | \"Solid\" | \"Translucent\"" + } + }, + { + "description": "Defines if automatic tab selection is deactivated.\n\n**Note:** By default, if none of the child tabs have the `selected` property set, the first tab will be automatically selected.\nSetting this property to `true` allows preventing this behavior.", + "name": "no-auto-selection", + "default": "false", + "fieldName": "noAutoSelection", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines the overflow mode of the header (the tab strip). If you have a large number of tabs, only the tabs that can fit on screen will be visible.\nAll other tabs that can 't fit on the screen are available in an overflow tab \"More\".\n\n**Note:**\nOnly one overflow at the end would be displayed by default,\nbut when set to `StartAndEnd`, there will be two overflows on both ends, and tab order will not change on tab selection.", + "name": "overflow-mode", + "default": "\"End\"", + "fieldName": "overflowMode", + "type": { + "text": "\"End\" | \"StartAndEnd\"" + } + }, + { + "description": "Defines the alignment of the content and the `additionalText` of a tab.\n\n**Note:**\nThe content and the `additionalText` would be displayed vertically by default,\nbut when set to `Inline`, they would be displayed horizontally.", + "name": "tab-layout", + "default": "\"Standard\"", + "fieldName": "tabLayout", + "type": { + "text": "\"Standard\" | \"Inline\"" + } + } + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-tabcontainer", + "customElement": true, + "_ui5privacy": "public" + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "TabContainer", + "module": "dist/TabContainer.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-tabcontainer", + "declaration": { + "name": "TabContainer", + "module": "dist/TabContainer.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/TabSeparator.js", + "declarations": [ + { + "kind": "class", + "description": "The `ui5-tab-separator` represents a vertical line to separate tabs inside a `ui5-tabcontainer`.", + "name": "TabSeparator", + "members": [ + { + "kind": "method", + "name": "getDomRefInStrip", + "return": { + "type": { + "text": "HTMLElement | undefined" + } + }, + "description": "Returns the DOM reference of the separator that is placed in the header.\n\n**Note:** Separators, placed in the `items` slot of other tabs are not shown in the header. Calling this method on such separators will return `undefined`.", + "privacy": "public" + } + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-tab-separator", + "customElement": true, + "_ui5privacy": "public", + "_ui5abstract": true, + "_ui5implements": [ + { + "name": "ITab", + "package": "@ui5/webcomponents", + "module": "dist/TabContainer.js" + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "TabSeparator", + "module": "dist/TabSeparator.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-tab-separator", + "declaration": { + "name": "TabSeparator", + "module": "dist/TabSeparator.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/Table.js", + "declarations": [ + { + "kind": "interface", + "name": "ITableFeature", + "description": "Interface for components that can be slotted inside the `features` slot of the `ui5-table`.", + "_ui5experimental": true, + "_ui5privacy": "public" + }, + { + "kind": "interface", + "name": "ITableGrowing", + "description": "Interface for components that can be slotted inside the `features` slot of the `ui5-table`\nand provide growing/data loading functionality.", + "_ui5experimental": true, + "_ui5privacy": "public" + }, + { + "kind": "class", + "description": "### Overview\n\nThe `ui5-table` component provides a set of sophisticated features for displaying and dealing with vast amounts of data in a responsive manner.\nTo render the `ui5-table`, you need to define the columns and rows. You can use the provided `ui5-table-header-row` and `ui5-table-row` components for this purpose.\n\n### Features\n\nThe `ui5-table` can be enhanced in its functionalities by applying different features.\nFeatures can be slotted into the `features` slot, to enable them in the component.\nFeatures need to be imported separately, as they are not enabled by default.\n\nThe following features are currently available:\n\n* [TableSelectionMulti](../TableSelectionMulti) - adds multi-selection capabilities to the table\n* [TableSelectionSingle](../TableSelectionSingle) - adds single-selection capabilities to the table\n* [TableGrowing](../TableGrowing) - provides growing capabilities to load more data\n* [TableVirtualizer](../TableVirtualizer) - adds virtualization capabilities to the table\n\n### Keyboard Handling\n\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\nFurthermore, you can interact with `ui5-table` via the following keys:\n\nIf the focus is on a row, the following keyboard shortcuts are available:\n* <kbd>Down</kbd> - Navigates down\n* <kbd>Up</kbd> - Navigates up\n* <kbd>Right</kbd> - Selects the first cell of the row\n* <kbd>Space</kbd> - Toggles the selection of the row\n* <kbd>Ctrl/Cmd + A</kbd> - In multi selection mode, toggles the selection of all rows\n* <kbd>Home</kbd> - Navigates to the first row, if the focus is on the first row, navigates to the header row\n* <kbd>End</kbd> - Navigates to the last row, if the focus is on the last row, navigates to the growing button\n* <kbd>Page Up</kbd> - Navigates one page up, if the focus is on the first row, navigates to the header row\n* <kbd>Page Down</kbd> - Navigates one page down, if the focus is on the last row, navigates to the growing button\n* <kbd>F2</kbd> - Focuses the first tabbable element in the row\n* <kbd>F7</kbd> - If focus position is remembered, moves focus to the corresponding focus position row, otherwise to the first tabbable element within the row\n* <kbd>[Shift]Tab</kbd> - Move focus to the element in the tab chain outside the table\n\nIf the focus is on a cell, the following keyboard shortcuts are available:\n* <kbd>Down</kbd> - Navigates down\n* <kbd>Up</kbd> - Navigates up\n* <kbd>Right</kbd> - Navigates right\n* <kbd>Left</kbd> - Navigates left, if the focus is on the first cell of the row, the focus is moved to the row.\n* <kbd>Home</kbd> - Navigates to the first cell of the current row, if the focus is on the first cell, navigates to the corresponding row\n* <kbd>End</kbd> - Navigates to the last cell of the current row, if the focus is on the last cell, navigates to the corresponding row\n* <kbd>Page Up</kbd> - Navigates one page up while keeping the focus in same column\n* <kbd>Page Down</kbd> - Navigates one page down while keeping the focus in same column\n* <kbd>F2</kbd> - Toggles the focus between the first tabbable cell content and the cell\n* <kbd>Enter</kbd> - Focuses the first tabbable cell content\n* <kbd>F7</kbd> - If the focus is on an interactive element inside a row, moves focus to the corresponding row and remembers the focus position of the element within the row\n* <kbd>[Shift]Tab</kbd> - Move focus to the element in the tab chain outside the table\n\nIf the focus is on an interactive cell content, the following keyboard shortcuts are available:\n* <kbd>Down</kbd> - Move the focus to the interactive element in the same column of the previous row, unless the focused element prevents the default\n* <kbd>Up</kbd> - Move the focus to the interactive element in the same column of the next row, unless the focused element prevents the default\n* <kbd>[Shift]Tab</kbd> - Move the focus to the element in the tab chain\n\n### Accessibility\n\nThe `ui5-table` follows the [ARIA grid design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/grid/).\nThis pattern enables cell-based keyboard navigation and, as explained above, we also support row-based keyboard navigation.\nSince the grid design pattern does not inherently provide row-based keyboard behavior, if the focus is on a row, not only the row information but also the corresponding column headers for each cell must be announced.\nThis can only be achieved through a custom accessibility announcement.\nTo support this, UI5 Web Components expose its own accessibility metadata via the `accessibilityInfo` property.\nThe `ui5-table` uses this information to create the required custom announcements dynamically.\nIf you include custom web components inside table cells that are not part of the standard UI5 Web Components set, their accessibility information can be provided using the `data-ui5-acc-text` attribute.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Table.js\";` (`ui5-table`)\\\n`import \"@ui5/webcomponents/dist/TableRow.js\";` (`ui5-table-row`)\\\n`import \"@ui5/webcomponents/dist/TableCell.js\";` (`ui5-table-cell`)\\\n`import \"@ui5/webcomponents/dist/TableHeaderRow.js\";` (`ui5-table-header-row`)\\\n`import \"@ui5/webcomponents/dist/TableHeaderCell.js\";` (`ui5-table-header-cell`)", + "name": "Table", + "slots": [ + { + "name": "default", + "description": "Defines the rows of the component.\n\n**Note:** Use `ui5-table-row` for the intended design.", + "_ui5propertyName": "rows", + "_ui5type": { + "text": "Array<TableRow>", + "references": [ + { + "name": "TableRow", + "package": "@ui5/webcomponents", + "module": "dist/TableRow.js" + } + ] + }, + "_ui5privacy": "public" + }, + { + "name": "features", + "description": "Defines the features of the component.", + "_ui5type": { + "text": "Array<ITableFeature>", + "references": [ + { + "name": "ITableFeature", + "package": "@ui5/webcomponents", + "module": "dist/Table.js" + } + ] + }, + "_ui5privacy": "public" + }, + { + "name": "headerRow", + "description": "Defines the header row of the component.\n\n**Note:** Use `ui5-table-header-row` for the intended design.", + "_ui5type": { + "text": "Array<TableHeaderRow>", + "references": [ + { + "name": "TableHeaderRow", + "package": "@ui5/webcomponents", + "module": "dist/TableHeaderRow.js" + } + ] + }, + "_ui5privacy": "public" + }, + { + "name": "noData", + "description": "Defines the custom visualization if there is no data available.", + "_ui5type": { + "text": "Array<HTMLElement>" + }, + "_ui5privacy": "public" + } + ], + "members": [ + { + "kind": "field", + "name": "accessibleName", + "type": { + "text": "string | undefined" + }, + "description": "Defines the accessible ARIA name of the component.", + "default": "undefined", + "privacy": "public" + }, + { + "kind": "field", + "name": "accessibleNameRef", + "type": { + "text": "string | undefined" + }, + "description": "Identifies the element (or elements) that labels the component.", + "default": "undefined", + "privacy": "public" + }, + { + "kind": "field", + "name": "alternateRowColors", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Determines whether the table rows are displayed with alternating background colors.", + "privacy": "public", + "_ui5since": "2.17" + }, + { + "kind": "field", + "name": "loading", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines if the loading indicator should be shown.\n\n**Note:** When the component is loading, it is not interactive.", + "privacy": "public" + }, + { + "kind": "field", + "name": "loadingDelay", + "type": { + "text": "number" + }, + "default": "1000", + "description": "Defines the delay in milliseconds, after which the loading indicator will show up for this component.", + "privacy": "public" + }, + { + "kind": "field", + "name": "noDataText", + "type": { + "text": "string | undefined" + }, + "description": "Defines the text to be displayed when there are no rows in the component.", + "default": "undefined", + "privacy": "public" + }, + { + "kind": "field", + "name": "overflowMode", + "type": { + "text": "TableOverflowMode", + "references": [ + { + "name": "TableOverflowMode", + "package": "@ui5/webcomponents", + "module": "dist/types/TableOverflowMode.js" + } + ] + }, + "default": "\"Scroll\"", + "description": "Defines the mode of the <code>ui5-table</code> overflow behavior.\n\nAvailable options are:\n\n<code>Scroll</code> - Columns are shown as regular columns and horizontal scrolling is enabled.\n<code>Popin</code> - Columns are shown as pop-ins instead of regular columns.", + "privacy": "public" + }, + { + "kind": "field", + "name": "rowActionCount", + "type": { + "text": "number" + }, + "default": "0", + "description": "Defines the maximum number of row actions that is displayed, which determines the width of the row action column.\n\n**Note:** It is recommended to use a maximum of 3 row actions, as exceeding this limit may take up too much space on smaller screens.", + "privacy": "public", + "_ui5since": "2.7.0" + } + ], + "events": [ + { + "name": "move", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<TableMoveEventDetail>", + "references": [ + { + "name": "TableMoveEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/Table.js" + } + ] + }, + "description": "Fired when a movable list item is dropped onto a drop target.\n\n**Notes:**\n\nThe `move` event is fired only if there was a preceding `move-over` with prevented default action.\n\nIf the dragging operation is a cross-browser operation or files are moved to a potential drop target,\nthe `source` parameter will be `null`.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5parameters": [ + { + "type": { + "text": "object" + }, + "name": "destination", + "_ui5privacy": "public", + "description": "The destination object" + }, + { + "type": { + "text": "Event" + }, + "name": "originalEvent", + "_ui5privacy": "public", + "description": "The original `drop` event" + }, + { + "type": { + "text": "object" + }, + "name": "source", + "_ui5privacy": "public", + "description": "The source object" + } + ] + }, + { + "name": "move-over", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<TableMoveEventDetail>", + "references": [ + { + "name": "TableMoveEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/Table.js" + } + ] + }, + "description": "Fired when a movable item is moved over a potential drop target during a dragging operation.\n\nIf the new position is valid, prevent the default action of the event using `preventDefault()`.\n\n**Note:** If the dragging operation is a cross-browser operation or files are moved to a potential drop target,\nthe `source` parameter will be `null`.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true, + "_ui5parameters": [ + { + "type": { + "text": "object" + }, + "name": "destination", + "_ui5privacy": "public", + "description": "The destination object" + }, + { + "type": { + "text": "Event" + }, + "name": "originalEvent", + "_ui5privacy": "public", + "description": "The original `dragover` event" + }, + { + "type": { + "text": "object" + }, + "name": "source", + "_ui5privacy": "public", + "description": "The source object" + } + ] + }, + { + "name": "row-action-click", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<TableRowActionClickEventDetail>", + "references": [ + { + "name": "TableRowActionClickEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/Table.js" + } + ] + }, + "description": "Fired when a row action is clicked.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5since": "2.6.0", + "_ui5parameters": [ + { + "type": { + "text": "TableRowActionBase", + "references": [ + { + "name": "TableRowActionBase", + "package": "@ui5/webcomponents", + "module": "dist/TableRowActionBase.js" + } + ] + }, + "name": "action", + "_ui5privacy": "public", + "description": "The row action instance" + }, + { + "type": { + "text": "TableRow", + "references": [ + { + "name": "TableRow", + "package": "@ui5/webcomponents", + "module": "dist/TableRow.js" + } + ] + }, + "name": "row", + "_ui5privacy": "public", + "description": "The row instance" + } + ] + }, + { + "name": "row-click", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<TableRowClickEventDetail>", + "references": [ + { + "name": "TableRowClickEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/Table.js" + } + ] + }, + "description": "Fired when an interactive row is clicked.\n\n**Note:** This event is not fired if the `behavior` property of the selection component is set to `RowOnly`.\nIn that case, use the `change` event of the selection component instead.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5parameters": [ + { + "type": { + "text": "TableRow", + "references": [ + { + "name": "TableRow", + "package": "@ui5/webcomponents", + "module": "dist/TableRow.js" + } + ] + }, + "name": "row", + "_ui5privacy": "public", + "description": "The row instance" + } + ] + } + ], + "attributes": [ + { + "description": "Defines the accessible ARIA name of the component.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Identifies the element (or elements) that labels the component.", + "name": "accessible-name-ref", + "default": "undefined", + "fieldName": "accessibleNameRef", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Determines whether the table rows are displayed with alternating background colors.", + "name": "alternate-row-colors", + "default": "false", + "fieldName": "alternateRowColors", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines if the loading indicator should be shown.\n\n**Note:** When the component is loading, it is not interactive.", + "name": "loading", + "default": "false", + "fieldName": "loading", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines the delay in milliseconds, after which the loading indicator will show up for this component.", + "name": "loading-delay", + "default": "1000", + "fieldName": "loadingDelay", + "type": { + "text": "number" + } + }, + { + "description": "Defines the text to be displayed when there are no rows in the component.", + "name": "no-data-text", + "default": "undefined", + "fieldName": "noDataText", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the mode of the <code>ui5-table</code> overflow behavior.\n\nAvailable options are:\n\n<code>Scroll</code> - Columns are shown as regular columns and horizontal scrolling is enabled.\n<code>Popin</code> - Columns are shown as pop-ins instead of regular columns.", + "name": "overflow-mode", + "default": "\"Scroll\"", + "fieldName": "overflowMode", + "type": { + "text": "\"Scroll\" | \"Popin\"" + } + }, + { + "description": "Defines the maximum number of row actions that is displayed, which determines the width of the row action column.\n\n**Note:** It is recommended to use a maximum of 3 row actions, as exceeding this limit may take up too much space on smaller screens.", + "name": "row-action-count", + "default": "0", + "fieldName": "rowActionCount", + "type": { + "text": "number" + } + } + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-table", + "customElement": true, + "_ui5since": "2.0.0", + "_ui5privacy": "public" + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "Table", + "module": "dist/Table.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-table", + "declaration": { + "name": "Table", + "module": "dist/Table.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/TableCell.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\n\nThe `ui5-table-cell` represents a cell inside of a `ui5-table`.\nIt is tightly coupled to the `ui5-table` and thus should only be used in the table component.\n\n### ES6 Module Import\n\n`import @ui5/webcomponents/dist/TableCell.js;`", + "name": "TableCell", + "members": [ + { + "kind": "field", + "name": "horizontalAlign", + "type": { + "text": "TableCellHorizontalAlign | undefined", + "references": [ + { + "name": "TableCellHorizontalAlign", + "package": "@ui5/webcomponents", + "module": "dist/types/TableCellHorizontalAlign.js" + } + ] + }, + "description": "Determines the horizontal alignment of table cells.", + "default": "undefined", + "privacy": "public" + } + ], + "superclass": { + "name": "TableCellBase", + "package": "@ui5/webcomponents", + "module": "dist/TableCellBase.js" + }, + "tagName": "ui5-table-cell", + "customElement": true, + "_ui5since": "2.0.0", + "_ui5privacy": "public", + "slots": [ + { + "name": "default", + "description": "Defines the content of the component.", + "_ui5propertyName": "content", + "_ui5type": { + "text": "Array<Node>" + }, + "_ui5privacy": "public" + } + ], + "attributes": [ + { + "description": "Determines the horizontal alignment of table cells.", + "name": "horizontal-align", + "default": "undefined", + "fieldName": "horizontalAlign", + "type": { + "text": "\"Start\" | \"End\" | \"Center\" | \"Left\" | \"Right\" | undefined" + } + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "TableCell", + "module": "dist/TableCell.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-table-cell", + "declaration": { + "name": "TableCell", + "module": "dist/TableCell.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/TableCellBase.js", + "declarations": [ + { + "kind": "class", + "description": "A class to serve as a foundation for the `TableCell` and `TableHeaderCell` classes.", + "name": "TableCellBase", + "slots": [ + { + "name": "default", + "description": "Defines the content of the component.", + "_ui5propertyName": "content", + "_ui5type": { + "text": "Array<Node>" + }, + "_ui5privacy": "public" + } + ], + "members": [ + { + "kind": "field", + "name": "horizontalAlign", + "type": { + "text": "TableCellHorizontalAlign | undefined", + "references": [ + { + "name": "TableCellHorizontalAlign", + "package": "@ui5/webcomponents", + "module": "dist/types/TableCellHorizontalAlign.js" + } + ] + }, + "description": "Determines the horizontal alignment of table cells.", + "default": "undefined", + "privacy": "public" + } + ], + "attributes": [ + { + "description": "Determines the horizontal alignment of table cells.", + "name": "horizontal-align", + "default": "undefined", + "fieldName": "horizontalAlign", + "type": { + "text": "\"Start\" | \"End\" | \"Center\" | \"Left\" | \"Right\" | undefined" + } + } + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "customElement": true, + "_ui5since": "2.0.0", + "_ui5privacy": "public", + "_ui5abstract": true + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "TableCellBase", + "module": "dist/TableCellBase.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/TableCustomAnnouncement.js", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "TableCustomAnnouncement", + "module": "dist/TableCustomAnnouncement.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/TableDragAndDrop.js", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "TableDragAndDrop", + "module": "dist/TableDragAndDrop.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/TableExtension.js", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "TableExtension", + "module": "dist/TableExtension.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/TableGrowing.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\n\nThe `ui5-table-growing` component is used inside the `ui5-table` to add a growing/data loading functionalities\nto the table.\n\nThe component offers two options:\n* Button - a More button is displayed, clicking it will load more data.\n* Scroll - additional data is loaded automatically when the user scrolls to the end of the table.\n\n### Usage\n\nThe `ui5-table-growing` component is only used inside the `ui5-table` component as a feature.\nIt has to be slotted inside the `ui5-table` in the `features` slot.\nThe component is not intended to be used as a standalone component.\n\n```html\n<ui5-table>\n\t<ui5-table-growing mode=\"Button\" text=\"More\" slot=\"features\"></ui5-table-growing>\n</ui5-table>\n```\n\n**Notes**:\n* When the `ui5-table-growing` component is used with the `Scroll` mode and the table is currently not scrollable,\nthe component will render a growing button instead to ensure growing capabilities until the table becomes scrollable.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TableGrowing.js\";`", + "name": "TableGrowing", + "members": [ + { + "kind": "field", + "name": "mode", + "type": { + "text": "TableGrowingMode", + "references": [ + { + "name": "TableGrowingMode", + "package": "@ui5/webcomponents", + "module": "dist/types/TableGrowingMode.js" + } + ] + }, + "default": "\"Button\"", + "description": "Defines the mode of the <code>ui5-table</code> growing.\n\nAvailable options are:\n\nButton - Shows a More button at the bottom of the table, pressing it will load more rows.\n\nScroll - The rows are loaded automatically by scrolling to the bottom of the table. If the table is not scrollable,\na growing button will be rendered instead to ensure growing functionality.", + "privacy": "public" + }, + { + "kind": "field", + "name": "subtext", + "type": { + "text": "string | undefined" + }, + "description": "Defines the text that will be displayed below the `text` inside the growing button.\nHas no effect when mode is set to Scroll.", + "default": "undefined", + "privacy": "public" + }, + { + "kind": "field", + "name": "text", + "type": { + "text": "string | undefined" + }, + "description": "Defines the text that will be displayed inside the growing button.\nHas no effect when mode is set to `Scroll`.\n\n**Note:** When not provided and the mode is set to Button, a default text is displayed, corresponding to the\ncurrent language.", + "default": "undefined", + "privacy": "public" + } + ], + "events": [ + { + "name": "load-more", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the growing button is pressed or the user scrolls to the end of the table.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true + } + ], + "attributes": [ + { + "description": "Defines the mode of the <code>ui5-table</code> growing.\n\nAvailable options are:\n\nButton - Shows a More button at the bottom of the table, pressing it will load more rows.\n\nScroll - The rows are loaded automatically by scrolling to the bottom of the table. If the table is not scrollable,\na growing button will be rendered instead to ensure growing functionality.", + "name": "mode", + "default": "\"Button\"", + "fieldName": "mode", + "type": { + "text": "\"Button\" | \"Scroll\"" + } + }, + { + "description": "Defines the text that will be displayed below the `text` inside the growing button.\nHas no effect when mode is set to Scroll.", + "name": "subtext", + "default": "undefined", + "fieldName": "subtext", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the text that will be displayed inside the growing button.\nHas no effect when mode is set to `Scroll`.\n\n**Note:** When not provided and the mode is set to Button, a default text is displayed, corresponding to the\ncurrent language.", + "name": "text", + "default": "undefined", + "fieldName": "text", + "type": { + "text": "string | undefined" + } + } + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-table-growing", + "customElement": true, + "_ui5since": "2.0.0", + "_ui5privacy": "public" + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "TableGrowing", + "module": "dist/TableGrowing.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-table-growing", + "declaration": { + "name": "TableGrowing", + "module": "dist/TableGrowing.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/TableHeaderCell.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\n\nThe `ui5-table-header-cell` component represents a column in the `ui5-table`.\n\nAs it is tightly coupled to the `ui5-table`, it should only be used in the `ui5-table-header-row`\nto ensure correct layout and design.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TableHeaderCell.js\";`", + "name": "TableHeaderCell", + "slots": [ + { + "name": "action", + "description": "Defines the action of the column.\n\n**Note:** While multiple actions are technically possible, this is not supported.", + "_ui5since": "2.8.0", + "_ui5type": { + "text": "Array<TableHeaderCellActionBase>", + "references": [ + { + "name": "TableHeaderCellActionBase", + "package": "@ui5/webcomponents", + "module": "dist/TableHeaderCellActionBase.js" + } + ] + }, + "_ui5privacy": "public" + }, + { + "name": "default", + "description": "Defines the content of the component.", + "_ui5propertyName": "content", + "_ui5type": { + "text": "Array<Node>" + }, + "_ui5privacy": "public" + } + ], + "members": [ + { + "kind": "field", + "name": "horizontalAlign", + "type": { + "text": "TableCellHorizontalAlign | undefined", + "references": [ + { + "name": "TableCellHorizontalAlign", + "package": "@ui5/webcomponents", + "module": "dist/types/TableCellHorizontalAlign.js" + } + ] + }, + "description": "Determines the horizontal alignment of table cells.", + "default": "undefined", + "privacy": "public" + }, + { + "kind": "field", + "name": "importance", + "type": { + "text": "number" + }, + "default": "0", + "description": "Defines the importance of the column.\n\nThis property affects the popin behaviour.\nColumns with higher importance will move into the popin area later then less important\ncolumns.", + "privacy": "public" + }, + { + "kind": "field", + "name": "minWidth", + "type": { + "text": "string | undefined" + }, + "description": "Defines the minimum width of the column.\n\nIf the table is in `Popin` mode and the minimum width does not fit anymore,\nthe column will move into the popin.\n\nBy default, the table prevents the column from becoming too small.\nChanging this value to a small value might lead to accessibility issues.\n\n**Note:** This property only takes effect for columns with a [\\<percentage\\>](https://developer.mozilla.org/en-US/docs/Web/CSS/percentage) value\nor the default width.", + "privacy": "public", + "default": "undefined" + }, + { + "kind": "field", + "name": "popinHidden", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines if the column is hidden in the popin.\n\n**Note:** Please be aware that hiding the column in the popin might lead to accessibility issues as\nusers might not be able to access the content of the column on small screens.", + "privacy": "public", + "_ui5since": "2.8.0" + }, + { + "kind": "field", + "name": "popinText", + "type": { + "text": "string | undefined" + }, + "description": "The text for the column when it pops in.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.7.0" + }, + { + "kind": "field", + "name": "sortIndicator", + "type": { + "text": "SortOrder", + "references": [ + { + "name": "SortOrder", + "package": "@ui5/webcomponents-base", + "module": "dist/types/SortOrder.js" + } + ] + }, + "default": "\"None\"", + "description": "Defines the sort indicator of the column.", + "privacy": "public", + "_ui5since": "2.8.0" + }, + { + "kind": "field", + "name": "width", + "type": { + "text": "string | undefined" + }, + "description": "Defines the width of the column.\n\nBy default, the column will grow and shrink according to the available space.\nThis will distribute the space proportionally among all columns with no specific width set.\n\nSee [\\<length\\>](https://developer.mozilla.org/en-US/docs/Web/CSS/length) and\n[\\<percentage\\>](https://developer.mozilla.org/en-US/docs/Web/CSS/percentage) for possible width values.", + "default": "undefined", + "privacy": "public" + } + ], + "attributes": [ + { + "description": "Determines the horizontal alignment of table cells.", + "name": "horizontal-align", + "default": "undefined", + "fieldName": "horizontalAlign", + "type": { + "text": "\"Start\" | \"End\" | \"Center\" | \"Left\" | \"Right\" | undefined" + } + }, + { + "description": "Defines the importance of the column.\n\nThis property affects the popin behaviour.\nColumns with higher importance will move into the popin area later then less important\ncolumns.", + "name": "importance", + "default": "0", + "fieldName": "importance", + "type": { + "text": "number" + } + }, + { + "description": "Defines the minimum width of the column.\n\nIf the table is in `Popin` mode and the minimum width does not fit anymore,\nthe column will move into the popin.\n\nBy default, the table prevents the column from becoming too small.\nChanging this value to a small value might lead to accessibility issues.\n\n**Note:** This property only takes effect for columns with a [\\<percentage\\>](https://developer.mozilla.org/en-US/docs/Web/CSS/percentage) value\nor the default width.", + "name": "min-width", + "default": "undefined", + "fieldName": "minWidth", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines if the column is hidden in the popin.\n\n**Note:** Please be aware that hiding the column in the popin might lead to accessibility issues as\nusers might not be able to access the content of the column on small screens.", + "name": "popin-hidden", + "default": "false", + "fieldName": "popinHidden", + "type": { + "text": "boolean" + } + }, + { + "description": "The text for the column when it pops in.", + "name": "popin-text", + "default": "undefined", + "fieldName": "popinText", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the sort indicator of the column.", + "name": "sort-indicator", + "default": "\"None\"", + "fieldName": "sortIndicator", + "type": { + "text": "\"None\" | \"Ascending\" | \"Descending\"" + } + }, + { + "description": "Defines the width of the column.\n\nBy default, the column will grow and shrink according to the available space.\nThis will distribute the space proportionally among all columns with no specific width set.\n\nSee [\\<length\\>](https://developer.mozilla.org/en-US/docs/Web/CSS/length) and\n[\\<percentage\\>](https://developer.mozilla.org/en-US/docs/Web/CSS/percentage) for possible width values.", + "name": "width", + "default": "undefined", + "fieldName": "width", + "type": { + "text": "string | undefined" + } + } + ], + "superclass": { + "name": "TableCellBase", + "package": "@ui5/webcomponents", + "module": "dist/TableCellBase.js" + }, + "tagName": "ui5-table-header-cell", + "customElement": true, + "_ui5since": "2.0.0", + "_ui5privacy": "public" + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "TableHeaderCell", + "module": "dist/TableHeaderCell.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-table-header-cell", + "declaration": { + "name": "TableHeaderCell", + "module": "dist/TableHeaderCell.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/TableHeaderCellActionAI.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\n\nThe `ui5-table-header-cell-action-ai` component defines a dedicated AI action for the table column.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TableHeaderCellActionAI.js\";`", + "name": "TableHeaderCellActionAI", + "superclass": { + "name": "TableHeaderCellActionBase", + "package": "@ui5/webcomponents", + "module": "dist/TableHeaderCellActionBase.js" + }, + "tagName": "ui5-table-header-cell-action-ai", + "customElement": true, + "_ui5since": "2.8.0", + "_ui5privacy": "public", + "events": [ + { + "name": "click", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<TableHeaderCellActionClickEventDetail>", + "references": [ + { + "name": "TableHeaderCellActionClickEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/TableHeaderCellActionBase.js" + } + ] + }, + "description": "Fired when a header cell action is clicked.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5since": "2.8.0", + "_ui5parameters": [ + { + "type": { + "text": "HTMLElement" + }, + "name": "targetRef", + "_ui5privacy": "public", + "description": "The reference to the element that triggered the event" + } + ] + } + ], + "members": [] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "TableHeaderCellActionAI", + "module": "dist/TableHeaderCellActionAI.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-table-header-cell-action-ai", + "declaration": { + "name": "TableHeaderCellActionAI", + "module": "dist/TableHeaderCellActionAI.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/TableHeaderCellActionBase.js", + "declarations": [ + { + "kind": "class", + "description": "The `TableHeaderCellActionBase` class serves as a foundation for table header cell actions.", + "name": "TableHeaderCellActionBase", + "events": [ + { + "name": "click", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<TableHeaderCellActionClickEventDetail>", + "references": [ + { + "name": "TableHeaderCellActionClickEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/TableHeaderCellActionBase.js" + } + ] + }, + "description": "Fired when a header cell action is clicked.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5since": "2.8.0", + "_ui5parameters": [ + { + "type": { + "text": "HTMLElement" + }, + "name": "targetRef", + "_ui5privacy": "public", + "description": "The reference to the element that triggered the event" + } + ] + } + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "customElement": true, + "_ui5since": "2.8.0", + "_ui5privacy": "public", + "_ui5abstract": true, + "members": [] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "TableHeaderCellActionBase", + "module": "dist/TableHeaderCellActionBase.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/TableHeaderRow.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\n\nThe `ui5-table-header-row` component represents the table headers of a `ui5-table`.\n\nIt is tightly coupled to the `ui5-table` and should therefore be used in the `ui5-table` only.\nThe header row is placed in the `headerRow` slot of the table.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TableHeaderRow.js\";`", + "name": "TableHeaderRow", + "slots": [ + { + "name": "default", + "description": "Defines the cells of the component.\n\n**Note:** Use `ui5-table-header-cell` for the intended design.", + "_ui5propertyName": "cells", + "_ui5type": { + "text": "Array<TableHeaderCell>", + "references": [ + { + "name": "TableHeaderCell", + "package": "@ui5/webcomponents", + "module": "dist/TableHeaderCell.js" + } + ] + }, + "_ui5privacy": "public" + } + ], + "members": [ + { + "kind": "field", + "name": "sticky", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Sticks the `ui5-table-header-row` to the top of a table.\n\nNote: If used in combination with overflowMode \"Scroll\", the table needs a defined height for the sticky header to work as expected.", + "privacy": "public" + } + ], + "attributes": [ + { + "description": "Sticks the `ui5-table-header-row` to the top of a table.\n\nNote: If used in combination with overflowMode \"Scroll\", the table needs a defined height for the sticky header to work as expected.", + "name": "sticky", + "default": "false", + "fieldName": "sticky", + "type": { + "text": "boolean" + } + } + ], + "superclass": { + "name": "TableRowBase", + "package": "@ui5/webcomponents", + "module": "dist/TableRowBase.js" + }, + "tagName": "ui5-table-header-row", + "customElement": true, + "_ui5since": "2.0.0", + "_ui5privacy": "public" + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "TableHeaderRow", + "module": "dist/TableHeaderRow.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-table-header-row", + "declaration": { + "name": "TableHeaderRow", + "module": "dist/TableHeaderRow.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/TableNavigation.js", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "TableNavigation", + "module": "dist/TableNavigation.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/TableRow.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\n\nThe `ui5-table-row` component represents a row in the `ui5-table`.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TableRow.js\";`", + "name": "TableRow", + "slots": [ + { + "name": "actions", + "description": "Defines the actions of the component.\n\n**Note:** Use `ui5-table-row-action` or `ui5-table-row-action-navigation` for the intended design.", + "_ui5since": "2.7.0", + "_ui5type": { + "text": "Array<TableRowActionBase>", + "references": [ + { + "name": "TableRowActionBase", + "package": "@ui5/webcomponents", + "module": "dist/TableRowActionBase.js" + } + ] + }, + "_ui5privacy": "public" + }, + { + "name": "default", + "description": "Defines the cells of the component.\n\n**Note:** Use `ui5-table-cell` for the intended design.", + "_ui5propertyName": "cells", + "_ui5type": { + "text": "Array<TableCell>", + "references": [ + { + "name": "TableCell", + "package": "@ui5/webcomponents", + "module": "dist/TableCell.js" + } + ] + }, + "_ui5privacy": "public" + } + ], + "members": [ + { + "kind": "field", + "name": "interactive", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines the interactive state of the row.", + "privacy": "public" + }, + { + "kind": "field", + "name": "movable", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the row is movable.", + "privacy": "public", + "_ui5since": "2.6.0" + }, + { + "kind": "field", + "name": "navigated", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines the navigated state of the row.", + "privacy": "public" + }, + { + "kind": "field", + "name": "position", + "type": { + "text": "number | undefined" + }, + "description": "Defines the 0-based position of the row related to the total number of rows within the table when the `ui5-table-virtualizer` feature is used.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.5.0" + }, + { + "kind": "field", + "name": "rowKey", + "type": { + "text": "string | undefined" + }, + "description": "Unique identifier of the row.\n\n**Note:** For selection features to work properly, this property is mandatory, and its value must not contain spaces.", + "default": "undefined", + "privacy": "public" + } + ], + "attributes": [ + { + "description": "Defines the interactive state of the row.", + "name": "interactive", + "default": "false", + "fieldName": "interactive", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines whether the row is movable.", + "name": "movable", + "default": "false", + "fieldName": "movable", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines the navigated state of the row.", + "name": "navigated", + "default": "false", + "fieldName": "navigated", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines the 0-based position of the row related to the total number of rows within the table when the `ui5-table-virtualizer` feature is used.", + "name": "position", + "default": "undefined", + "fieldName": "position", + "type": { + "text": "number | undefined" + } + }, + { + "description": "Unique identifier of the row.\n\n**Note:** For selection features to work properly, this property is mandatory, and its value must not contain spaces.", + "name": "row-key", + "default": "undefined", + "fieldName": "rowKey", + "type": { + "text": "string | undefined" + } + } + ], + "superclass": { + "name": "TableRowBase", + "package": "@ui5/webcomponents", + "module": "dist/TableRowBase.js" + }, + "tagName": "ui5-table-row", + "customElement": true, + "_ui5since": "2.0.0", + "_ui5privacy": "public" + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "TableRow", + "module": "dist/TableRow.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-table-row", + "declaration": { + "name": "TableRow", + "module": "dist/TableRow.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/TableRowAction.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\n\nThe `ui5-table-row-action` component defines an action for table rows.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TableRowAction.js\";`", + "name": "TableRowAction", + "members": [ + { + "kind": "field", + "name": "icon", + "type": { + "text": "string" + }, + "default": "\"\"", + "description": "Defines the icon of the row action.\n\n**Note:** For row actions to work properly, this property is mandatory.\n\n**Note:** SAP-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).", + "privacy": "public" + }, + { + "kind": "field", + "name": "invisible", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines the visibility of the row action.\n\n**Note:** Invisible row actions still take up space, allowing to hide the action while maintaining its position.", + "privacy": "public" + }, + { + "kind": "field", + "name": "text", + "type": { + "text": "string" + }, + "default": "\"\"", + "description": "Defines the text of the row action.\n\n**Note:** For row actions to work properly, this property is mandatory.", + "privacy": "public" + } + ], + "attributes": [ + { + "description": "Defines the icon of the row action.\n\n**Note:** For row actions to work properly, this property is mandatory.\n\n**Note:** SAP-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).", + "name": "icon", + "default": "\"\"", + "fieldName": "icon", + "type": { + "text": "string" + } + }, + { + "description": "Defines the visibility of the row action.\n\n**Note:** Invisible row actions still take up space, allowing to hide the action while maintaining its position.", + "name": "invisible", + "default": "false", + "fieldName": "invisible", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines the text of the row action.\n\n**Note:** For row actions to work properly, this property is mandatory.", + "name": "text", + "default": "\"\"", + "fieldName": "text", + "type": { + "text": "string" + } + } + ], + "superclass": { + "name": "TableRowActionBase", + "package": "@ui5/webcomponents", + "module": "dist/TableRowActionBase.js" + }, + "tagName": "ui5-table-row-action", + "customElement": true, + "_ui5since": "2.7.0", + "_ui5privacy": "public", + "events": [ + { + "name": "click", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when a row action is clicked.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5since": "2.9.0" + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "TableRowAction", + "module": "dist/TableRowAction.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-table-row-action", + "declaration": { + "name": "TableRowAction", + "module": "dist/TableRowAction.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/TableRowActionBase.js", + "declarations": [ + { + "kind": "class", + "description": "The `TableRowActionBase` class serves as a foundation for table row actions.", + "name": "TableRowActionBase", + "members": [ + { + "kind": "field", + "name": "invisible", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines the visibility of the row action.\n\n**Note:** Invisible row actions still take up space, allowing to hide the action while maintaining its position.", + "privacy": "public" + } + ], + "events": [ + { + "name": "click", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when a row action is clicked.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5since": "2.9.0" + } + ], + "attributes": [ + { + "description": "Defines the visibility of the row action.\n\n**Note:** Invisible row actions still take up space, allowing to hide the action while maintaining its position.", + "name": "invisible", + "default": "false", + "fieldName": "invisible", + "type": { + "text": "boolean" + } + } + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "customElement": true, + "_ui5since": "2.7.0", + "_ui5privacy": "public", + "_ui5abstract": true + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "TableRowActionBase", + "module": "dist/TableRowActionBase.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/TableRowActionNavigation.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\n\nThe `ui5-table-row-action-navigation` component defines a navigation action for table rows.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TableRowActionNavigation.js\";`", + "name": "TableRowActionNavigation", + "members": [ + { + "kind": "field", + "name": "interactive", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines the interactive state of the navigation action.", + "privacy": "public", + "deprecated": "As of version 2.20.0, the navigation icon is deprecated.\nFor better accessibility, the interactive mode which renders a button, must be used instead. To handle the action, attach a listener to the `click` event.\nIf the navigation should be triggered when a row is pressed, set the row's `interactive` property and use the `row-click` event of the `ui5-table`.\nThis property will be removed in a future release." + }, + { + "kind": "field", + "name": "invisible", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines the visibility of the row action.\n\n**Note:** Invisible row actions still take up space, allowing to hide the action while maintaining its position.", + "privacy": "public" + } + ], + "attributes": [ + { + "description": "Defines the interactive state of the navigation action.", + "name": "interactive", + "default": "false", + "fieldName": "interactive", + "type": { + "text": "boolean" + }, + "deprecated": "As of version 2.20.0, the navigation icon is deprecated.\nFor better accessibility, the interactive mode which renders a button, must be used instead. To handle the action, attach a listener to the `click` event.\nIf the navigation should be triggered when a row is pressed, set the row's `interactive` property and use the `row-click` event of the `ui5-table`.\nThis property will be removed in a future release." + }, + { + "description": "Defines the visibility of the row action.\n\n**Note:** Invisible row actions still take up space, allowing to hide the action while maintaining its position.", + "name": "invisible", + "default": "false", + "fieldName": "invisible", + "type": { + "text": "boolean" + } + } + ], + "superclass": { + "name": "TableRowActionBase", + "package": "@ui5/webcomponents", + "module": "dist/TableRowActionBase.js" + }, + "tagName": "ui5-table-row-action-navigation", + "customElement": true, + "_ui5since": "2.7.0", + "_ui5privacy": "public", + "events": [ + { + "name": "click", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when a row action is clicked.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5since": "2.9.0" + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "TableRowActionNavigation", + "module": "dist/TableRowActionNavigation.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-table-row-action-navigation", + "declaration": { + "name": "TableRowActionNavigation", + "module": "dist/TableRowActionNavigation.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/TableRowBase.js", + "declarations": [ + { + "kind": "class", + "description": "A class to serve as a foundation for the `TableRow` and `TableHeaderRow` classes.", + "name": "TableRowBase", + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "customElement": true, + "_ui5since": "2.0.0", + "_ui5privacy": "public", + "_ui5abstract": true, + "members": [] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "TableRowBase", + "module": "dist/TableRowBase.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/TableSelection.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\n\nThe `ui5-table-selection` component is used inside the `ui5-table` to add key-based selection capabilities to the `ui5-table`.\n\nThe component offers three selection modes:\n* Single - select a single row.\n* Multiple - select multiple rows.\n* None - no selection active.\n\nAs the selection is key-based, `ui5-table-row` components need to define a unique `row-key` property.\n\n### Usage\n\nThe `ui5-table-selection` component is only used inside the `ui5-table` component as a feature.\nIt has to be slotted inside the `ui5-table` in the `features` slot.\nThe component is not intended to be used as a standalone component.\n\n```html\n<ui5-table>\n\t<ui5-table-selection mode=\"Multiple\" slot=\"features\"></ui5-table-selection>\n</ui5-table>\n```\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TableSelection.js\";`", + "name": "TableSelection", + "members": [ + { + "kind": "field", + "name": "mode", + "type": { + "text": "TableSelectionMode", + "references": [ + { + "name": "TableSelectionMode", + "package": "@ui5/webcomponents", + "module": "dist/types/TableSelectionMode.js" + } + ] + }, + "default": "\"Multiple\"", + "description": "Defines the selection mode.", + "privacy": "public" + }, + { + "kind": "field", + "name": "selected", + "type": { + "text": "string" + }, + "default": "\"\"", + "description": "Defines the selected rows separated by a space.", + "privacy": "public" + } + ], + "events": [ + { + "name": "change", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the selection is changed by user interaction.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true + } + ], + "attributes": [ + { + "description": "Defines the selection mode.", + "name": "mode", + "default": "\"Multiple\"", + "fieldName": "mode", + "type": { + "text": "\"None\" | \"Single\" | \"Multiple\"" + } + }, + { + "description": "Defines the selected rows separated by a space.", + "name": "selected", + "default": "\"\"", + "fieldName": "selected", + "type": { + "text": "string" + } + } + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "deprecated": "This component is deprecated and will be removed in future releases. Use the `ui5-table-selection-single` or `ui5-table-selection-multi` components instead.", + "tagName": "ui5-table-selection", + "customElement": true, + "_ui5experimental": "This web component is available since 2.0 with an experimental flag and its API and behavior are subject to change.", + "_ui5since": "2.0.0", + "_ui5privacy": "public" + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "TableSelection", + "module": "dist/TableSelection.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-table-selection", + "declaration": { + "name": "TableSelection", + "module": "dist/TableSelection.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/TableSelectionBase.js", + "declarations": [ + { + "kind": "class", + "description": "The `TableSelectionBase` class serves as a foundation for table selections.", + "name": "TableSelectionBase", + "members": [ + { + "kind": "field", + "name": "behavior", + "type": { + "text": "TableSelectionBehavior", + "references": [ + { + "name": "TableSelectionBehavior", + "package": "@ui5/webcomponents", + "module": "dist/types/TableSelectionBehavior.js" + } + ] + }, + "default": "\"RowSelector\"", + "description": "Defines the selection behavior.", + "privacy": "public", + "_ui5since": "2.11" + }, + { + "kind": "method", + "name": "getRowByKey", + "return": { + "type": { + "text": "TableRow | undefined", + "references": [ + { + "name": "TableRow", + "package": "@ui5/webcomponents", + "module": "dist/TableRow.js" + } + ] + } + }, + "parameters": [ + { + "name": "rowKey", + "type": { + "text": "string" + }, + "description": "The row key", + "_ui5privacy": "public" + } + ], + "description": "Returns the table row instance for the given row key.", + "privacy": "public" + }, + { + "kind": "field", + "name": "selected", + "type": { + "text": "string | undefined" + }, + "description": "Defines the selected elements of the component.", + "default": "undefined", + "privacy": "public" + } + ], + "events": [ + { + "name": "change", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the selection is changed by user interaction.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true + } + ], + "attributes": [ + { + "description": "Defines the selection behavior.", + "name": "behavior", + "default": "\"RowSelector\"", + "fieldName": "behavior", + "type": { + "text": "\"RowSelector\" | \"RowOnly\"" + } + }, + { + "description": "Defines the selected elements of the component.", + "name": "selected", + "default": "undefined", + "fieldName": "selected", + "type": { + "text": "string | undefined" + } + } + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "customElement": true, + "_ui5since": "2.8.0", + "_ui5privacy": "public" + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "TableSelectionBase", + "module": "dist/TableSelectionBase.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/TableSelectionMulti.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\n\nThe `ui5-table-selection-multi` component is used inside the `ui5-table` to add multi-selection capabilities to the `ui5-table`.\nSince selection is key-based, each `ui5-table-row` must define a unique `row-key` property.\n\n### Usage\n\nThe `ui5-table-selection-multi` component is a feature designed exclusively for use within the `ui5-table` component.\nIt must be placed inside the `features` slot of `ui5-table`.\nThis component is not intended for standalone use.\n\n```html\n<ui5-table>\n\t<ui5-table-selection-multi slot=\"features\" selected=\"Row1 Row3\"></ui5-table-selection-multi>\n</ui5-table>\n```\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TableSelectionMulti.js\";`", + "name": "TableSelectionMulti", + "members": [ + { + "kind": "field", + "name": "behavior", + "type": { + "text": "TableSelectionBehavior", + "references": [ + { + "name": "TableSelectionBehavior", + "package": "@ui5/webcomponents", + "module": "dist/types/TableSelectionBehavior.js" + } + ] + }, + "default": "\"RowSelector\"", + "description": "Defines the selection behavior.", + "privacy": "public", + "_ui5since": "2.11" + }, + { + "kind": "method", + "name": "getRowByKey", + "return": { + "type": { + "text": "TableRow | undefined", + "references": [ + { + "name": "TableRow", + "package": "@ui5/webcomponents", + "module": "dist/TableRow.js" + } + ] + } + }, + "parameters": [ + { + "name": "rowKey", + "type": { + "text": "string" + }, + "description": "The row key", + "_ui5privacy": "public" + } + ], + "description": "Returns the table row instance for the given row key.", + "privacy": "public" + }, + { + "kind": "method", + "name": "getSelectedAsSet", + "return": { + "type": { + "text": "Set<string>" + } + }, + "description": "Returns the `selected` property as a set of unique `row-key` values.", + "privacy": "public" + }, + { + "kind": "method", + "name": "getSelectedRows", + "return": { + "type": { + "text": "Array<TableRow>", + "references": [ + { + "name": "TableRow", + "package": "@ui5/webcomponents", + "module": "dist/TableRow.js" + } + ] + } + }, + "description": "Returns an array of the selected rows.", + "privacy": "public" + }, + { + "kind": "field", + "name": "headerSelector", + "type": { + "text": "TableSelectionMultiHeaderSelector", + "references": [ + { + "name": "TableSelectionMultiHeaderSelector", + "package": "@ui5/webcomponents", + "module": "dist/types/TableSelectionMultiHeaderSelector.js" + } + ] + }, + "default": "\"SelectAll\"", + "description": "Defines the selector of the header row.", + "privacy": "public", + "_ui5since": "2.12" + }, + { + "kind": "field", + "name": "selected", + "type": { + "text": "string | undefined" + }, + "description": "Defines the `row-key` values of selected rows, with each value separated by a space.", + "default": "undefined", + "privacy": "public" + }, + { + "kind": "method", + "name": "setSelectedAsSet", + "return": { + "type": { + "text": "void" + } + }, + "parameters": [ + { + "name": "selectedSet", + "type": { + "text": "Set<string>" + }, + "description": "A set of `row-key` values", + "_ui5privacy": "public" + } + ], + "description": "Sets the `selected` property using the provided set of unique `row-key` values.", + "privacy": "public" + } + ], + "attributes": [ + { + "description": "Defines the selection behavior.", + "name": "behavior", + "default": "\"RowSelector\"", + "fieldName": "behavior", + "type": { + "text": "\"RowSelector\" | \"RowOnly\"" + } + }, + { + "description": "Defines the selector of the header row.", + "name": "header-selector", + "default": "\"SelectAll\"", + "fieldName": "headerSelector", + "type": { + "text": "\"SelectAll\" | \"ClearAll\"" + } + }, + { + "description": "Defines the `row-key` values of selected rows, with each value separated by a space.", + "name": "selected", + "default": "undefined", + "fieldName": "selected", + "type": { + "text": "string | undefined" + } + } + ], + "superclass": { + "name": "TableSelectionBase", + "package": "@ui5/webcomponents", + "module": "dist/TableSelectionBase.js" + }, + "tagName": "ui5-table-selection-multi", + "customElement": true, + "_ui5since": "2.8.0", + "_ui5privacy": "public", + "events": [ + { + "name": "change", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the selection is changed by user interaction.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "TableSelectionMulti", + "module": "dist/TableSelectionMulti.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-table-selection-multi", + "declaration": { + "name": "TableSelectionMulti", + "module": "dist/TableSelectionMulti.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/TableSelectionSingle.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\n\nThe `ui5-table-selection-single` component is used inside the `ui5-table` to add single selection capabilities to the `ui5-table`.\nSince selection is key-based, each `ui5-table-row` must define a unique `row-key` property.\n\n### Usage\n\nThe `ui5-table-selection-single` component is a feature designed exclusively for use within the `ui5-table` component.\nIt must be placed inside the `features` slot of `ui5-table`.\nThis component is not intended for standalone use.\n\n```html\n<ui5-table>\n\t<ui5-table-selection-single slot=\"features\" selected=\"Row1\"></ui5-table-selection-single>\n</ui5-table>\n```\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TableSelectionSingle.js\";`", + "name": "TableSelectionSingle", + "members": [ + { + "kind": "field", + "name": "behavior", + "type": { + "text": "TableSelectionBehavior", + "references": [ + { + "name": "TableSelectionBehavior", + "package": "@ui5/webcomponents", + "module": "dist/types/TableSelectionBehavior.js" + } + ] + }, + "default": "\"RowSelector\"", + "description": "Defines the selection behavior.", + "privacy": "public", + "_ui5since": "2.11" + }, + { + "kind": "method", + "name": "getRowByKey", + "return": { + "type": { + "text": "TableRow | undefined", + "references": [ + { + "name": "TableRow", + "package": "@ui5/webcomponents", + "module": "dist/TableRow.js" + } + ] + } + }, + "parameters": [ + { + "name": "rowKey", + "type": { + "text": "string" + }, + "description": "The row key", + "_ui5privacy": "public" + } + ], + "description": "Returns the table row instance for the given row key.", + "privacy": "public" + }, + { + "kind": "method", + "name": "getSelectedRow", + "return": { + "type": { + "text": "TableRow | undefined", + "references": [ + { + "name": "TableRow", + "package": "@ui5/webcomponents", + "module": "dist/TableRow.js" + } + ] + } + }, + "description": "Returns the selected row.", + "privacy": "public" + }, + { + "kind": "field", + "name": "selected", + "type": { + "text": "string | undefined" + }, + "description": "Defines the `row-key` value of the selected row.", + "default": "undefined", + "privacy": "public" + } + ], + "attributes": [ + { + "description": "Defines the selection behavior.", + "name": "behavior", + "default": "\"RowSelector\"", + "fieldName": "behavior", + "type": { + "text": "\"RowSelector\" | \"RowOnly\"" + } + }, + { + "description": "Defines the `row-key` value of the selected row.", + "name": "selected", + "default": "undefined", + "fieldName": "selected", + "type": { + "text": "string | undefined" + } + } + ], + "superclass": { + "name": "TableSelectionBase", + "package": "@ui5/webcomponents", + "module": "dist/TableSelectionBase.js" + }, + "tagName": "ui5-table-selection-single", + "customElement": true, + "_ui5since": "2.8.0", + "_ui5privacy": "public", + "events": [ + { + "name": "change", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the selection is changed by user interaction.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "TableSelectionSingle", + "module": "dist/TableSelectionSingle.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-table-selection-single", + "declaration": { + "name": "TableSelectionSingle", + "module": "dist/TableSelectionSingle.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/TableUtils.js", + "declarations": [], + "exports": [] + }, + { + "kind": "javascript-module", + "path": "dist/TableVirtualizer.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\n\nThe `ui5-table-virtualizer` component is used inside the `ui5-table` to virtualize the table rows, if the `overflowMode` property of the table is set to 'Scroll'.\nIt is responsible for rendering only the rows that are visible in the viewport and updating them on scroll.\nThis allows large numbers of rows to exist, but maintain high performance by only paying the cost for those that are currently visible.\n\n**Note:** The maximum number of virtualized rows is limited by browser constraints, specifically the maximum supported height for a DOM element.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents/dist/TableVirtualizer.js\";`", + "name": "TableVirtualizer", + "members": [ + { + "kind": "field", + "name": "extraRows", + "type": { + "text": "number" + }, + "default": "0", + "description": "Defines the count of extra rows to be rendered at the top and bottom of the table.\n\n**Note:** This property is experimental and may be changed or deleted in the future.", + "privacy": "public" + }, + { + "kind": "method", + "name": "reset", + "return": { + "type": { + "text": "void" + } + }, + "description": "Resets the virtualizer to its initial state and triggers the `range-change` event.", + "privacy": "public" + }, + { + "kind": "field", + "name": "rowCount", + "type": { + "text": "number" + }, + "default": "100", + "description": "Defines the total count of rows in the table.\n\n**Note:** For virtualization to work properly, this property is mandatory.", + "privacy": "public" + }, + { + "kind": "field", + "name": "rowHeight", + "type": { + "text": "number" + }, + "default": "45", + "description": "Defines the height of the rows in the table.\n\n**Note:** For virtualization to work properly, this property is mandatory.", + "privacy": "public" + } + ], + "events": [ + { + "name": "range-change", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<RangeChangeEventDetail>", + "references": [ + { + "name": "RangeChangeEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/TableVirtualizer.js" + } + ] + }, + "description": "Fired when the virtualizer is changed by user interaction e.g. on scrolling.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": false, + "_ui5parameters": [ + { + "type": { + "text": "number" + }, + "name": "first", + "_ui5privacy": "public", + "description": "The 0-based index of the first children currently rendered" + }, + { + "type": { + "text": "number" + }, + "name": "last", + "_ui5privacy": "public", + "description": "The 0-based index of the last children currently rendered" + } + ] + } + ], + "attributes": [ + { + "description": "Defines the count of extra rows to be rendered at the top and bottom of the table.\n\n**Note:** This property is experimental and may be changed or deleted in the future.", + "name": "extra-rows", + "default": "0", + "fieldName": "extraRows", + "type": { + "text": "number" + } + }, + { + "description": "Defines the total count of rows in the table.\n\n**Note:** For virtualization to work properly, this property is mandatory.", + "name": "row-count", + "default": "100", + "fieldName": "rowCount", + "type": { + "text": "number" + } + }, + { + "description": "Defines the height of the rows in the table.\n\n**Note:** For virtualization to work properly, this property is mandatory.", + "name": "row-height", + "default": "45", + "fieldName": "rowHeight", + "type": { + "text": "number" + } + } + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-table-virtualizer", + "customElement": true, + "_ui5experimental": "This component is not intended to be used in a productive enviroment. The API is under development and may be changed in the future.", + "_ui5since": "2.5.0", + "_ui5privacy": "public" + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "TableVirtualizer", + "module": "dist/TableVirtualizer.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-table-virtualizer", + "declaration": { + "name": "TableVirtualizer", + "module": "dist/TableVirtualizer.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/Tag.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\n\nThe `ui5-tag` 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/Tag.js\";`", + "name": "Tag", + "cssParts": [ + { + "description": "Used to style the root element.", + "name": "root" + } + ], + "slots": [ + { + "name": "default", + "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<Node>" + }, + "_ui5privacy": "public" + }, + { + "name": "icon", + "description": "Defines the icon to be displayed in the component.", + "_ui5type": { + "text": "Array<IIcon>", + "references": [ + { + "name": "IIcon", + "package": "@ui5/webcomponents", + "module": "dist/Icon.js" + } + ] + }, + "_ui5privacy": "public" + } + ], + "members": [ + { + "kind": "field", + "name": "colorScheme", + "type": { + "text": "string" + }, + "default": "\"1\"", + "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.", + "privacy": "public" + }, + { + "kind": "field", + "name": "design", + "type": { + "text": "TagDesign", + "references": [ + { + "name": "TagDesign", + "package": "@ui5/webcomponents", + "module": "dist/types/TagDesign.js" + } + ] + }, + "default": "\"Neutral\"", + "description": "Defines the design type of the component.", + "privacy": "public", + "_ui5since": "1.22.0" + }, + { + "kind": "field", + "name": "hideStateIcon", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines if the default state icon is shown.", + "privacy": "public", + "_ui5since": "1.22.0" + }, + { + "kind": "field", + "name": "interactive", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines if the component is interactive (focusable and pressable).", + "privacy": "public", + "_ui5since": "1.22.0" + }, + { + "kind": "field", + "name": "size", + "type": { + "text": "TagSize", + "references": [ + { + "name": "TagSize", + "package": "@ui5/webcomponents", + "module": "dist/types/TagSize.js" + } + ] + }, + "default": "\"S\"", + "description": "Defines predefined size of the component.", + "privacy": "public", + "_ui5since": "2.0.0" + }, + { + "kind": "field", + "name": "wrappingType", + "type": { + "text": "WrappingType", + "references": [ + { + "name": "WrappingType", + "package": "@ui5/webcomponents", + "module": "dist/types/WrappingType.js" + } + ] + }, + "default": "\"Normal\"", + "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.", + "privacy": "public", + "_ui5since": "1.22.0" + } + ], + "events": [ + { + "name": "click", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the user clicks on an interactive tag.\n\n**Note:** The event will be fired if the `interactive` property is `true`", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5since": "1.22.0" + } + ], + "attributes": [ + { + "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.", + "name": "color-scheme", + "default": "\"1\"", + "fieldName": "colorScheme", + "type": { + "text": "string" + } + }, + { + "description": "Defines the design type of the component.", + "name": "design", + "default": "\"Neutral\"", + "fieldName": "design", + "type": { + "text": "\"Positive\" | \"Critical\" | \"Negative\" | \"Information\" | \"Neutral\" | \"Set1\" | \"Set2\"" + } + }, + { + "description": "Defines if the default state icon is shown.", + "name": "hide-state-icon", + "default": "false", + "fieldName": "hideStateIcon", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines if the component is interactive (focusable and pressable).", + "name": "interactive", + "default": "false", + "fieldName": "interactive", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines predefined size of the component.", + "name": "size", + "default": "\"S\"", + "fieldName": "size", + "type": { + "text": "\"S\" | \"L\"" + } + }, + { + "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.", + "name": "wrapping-type", + "default": "\"Normal\"", + "fieldName": "wrappingType", + "type": { + "text": "\"None\" | \"Normal\"" + } + } + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-tag", + "customElement": true, + "_ui5since": "2.0.0", + "_ui5privacy": "public" + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "Tag", + "module": "dist/Tag.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-tag", + "declaration": { + "name": "Tag", + "module": "dist/Tag.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/Text.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\n\nThe `ui5-text` component displays text that can be used in any content area of an application.\n\n### Usage\n\n- Use the `ui5-text` if you want to display text inside a form, table, or any other content area.\n- Do not use the `ui5-text` if you need to reference input type of components (use ui5-label).\n\n### Responsive behavior\n\nThe `ui5-text` component is fully adaptive to all screen sizes.\nBy default, the text will wrap when the space is not enough.\nIn addition, the component supports truncation via the `max-lines` property,\nby defining the number of lines the text should wrap before start truncating.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Text\";`", + "name": "Text", + "slots": [ + { + "name": "default", + "description": "Defines the text of the component.", + "_ui5propertyName": "text", + "_ui5type": { + "text": "Array<Node>" + }, + "_ui5privacy": "public" + } + ], + "members": [ + { + "kind": "field", + "name": "emptyIndicatorMode", + "type": { + "text": "TextEmptyIndicatorMode", + "references": [ + { + "name": "TextEmptyIndicatorMode", + "package": "@ui5/webcomponents", + "module": "dist/types/TextEmptyIndicatorMode.js" + } + ] + }, + "default": "\"Off\"", + "description": "Specifies if an empty indicator should be displayed when there is no text.", + "privacy": "public", + "_ui5since": "2.2.0" + }, + { + "kind": "field", + "name": "maxLines", + "type": { + "text": "number" + }, + "default": "Infinity", + "description": "Defines the number of lines the text should wrap before it truncates.", + "privacy": "public" + } + ], + "attributes": [ + { + "description": "Specifies if an empty indicator should be displayed when there is no text.", + "name": "empty-indicator-mode", + "default": "\"Off\"", + "fieldName": "emptyIndicatorMode", + "type": { + "text": "\"On\" | \"Off\"" + } + }, + { + "description": "Defines the number of lines the text should wrap before it truncates.", + "name": "max-lines", + "default": "Infinity", + "fieldName": "maxLines", + "type": { + "text": "number" + } + } + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-text", + "customElement": true, + "_ui5since": "2.0.0", + "_ui5privacy": "public" + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "Text", + "module": "dist/Text.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-text", + "declaration": { + "name": "Text", + "module": "dist/Text.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/TextArea.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\n\nThe `ui5-textarea` component is used to enter multiple rows of text.\n\nWhen empty, it can hold a placeholder similar to a `ui5-input`.\nYou can define the rows of the `ui5-textarea` and also determine specific behavior when handling long texts.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TextArea.js\";`", + "name": "TextArea", + "cssParts": [ + { + "description": "Used to style the native textarea", + "name": "textarea" + } + ], + "slots": [ + { + "name": "valueStateMessage", + "description": "Defines the value state message that will be displayed as pop up under the component.\nThe value state message slot should contain only one root element.\n \n**Note:** If not specified, a default text (in the respective language) will be displayed.\n\n**Note:** The `valueStateMessage` would be displayed if the component has\n`valueState` of type `Information`, `Critical` or `Negative`.", + "_ui5since": "1.0.0-rc.7", + "_ui5type": { + "text": "Array<HTMLElement>" + }, + "_ui5privacy": "public" + } + ], + "members": [ + { + "kind": "field", + "name": "accessibleDescription", + "type": { + "text": "string | undefined" + }, + "description": "Defines the accessible description of the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.16.0" + }, + { + "kind": "field", + "name": "accessibleDescriptionRef", + "type": { + "text": "string | undefined" + }, + "description": "Receives id(or many ids) of the elements that describe the textarea.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.16.0" + }, + { + "kind": "field", + "name": "accessibleName", + "type": { + "text": "string | undefined" + }, + "description": "Defines the accessible ARIA name of the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.0.0-rc.15" + }, + { + "kind": "field", + "name": "accessibleNameRef", + "type": { + "text": "string | undefined" + }, + "description": "Receives id(or many ids) of the elements that label the textarea.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.0.0-rc.15" + }, + { + "kind": "field", + "name": "disabled", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Indicates whether the user can interact with the component or not.\n\n**Note:** A disabled component is completely noninteractive.", + "privacy": "public" + }, + { + "kind": "field", + "name": "growing", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Enables the component to automatically grow and shrink dynamically with its content.", + "privacy": "public" + }, + { + "kind": "field", + "name": "growingMaxRows", + "type": { + "text": "number" + }, + "default": "0", + "description": "Defines the maximum number of rows that the component can grow.", + "privacy": "public" + }, + { + "kind": "field", + "name": "maxlength", + "type": { + "text": "number | undefined" + }, + "description": "Defines the maximum number of characters that the `value` can have.", + "default": "undefined", + "privacy": "public" + }, + { + "kind": "field", + "name": "name", + "type": { + "text": "string | undefined" + }, + "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", + "default": "undefined", + "privacy": "public" + }, + { + "kind": "field", + "name": "placeholder", + "type": { + "text": "string | undefined" + }, + "description": "Defines a short hint intended to aid the user with data entry when the component has no value.", + "default": "undefined", + "privacy": "public" + }, + { + "kind": "field", + "name": "readonly", + "type": { + "text": "boolean" + }, + "default": "false", + "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.", + "privacy": "public" + }, + { + "kind": "field", + "name": "required", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the component is required.", + "privacy": "public", + "_ui5since": "1.0.0-rc.3" + }, + { + "kind": "field", + "name": "rows", + "type": { + "text": "number" + }, + "default": "0", + "description": "Defines the number of visible text rows for the component.\n\n**Notes:**\n\n- If the `growing` property is enabled, this property defines the minimum rows to be displayed\nin the textarea.\n- The CSS `height` property wins over the `rows` property, if both are set.", + "privacy": "public" + }, + { + "kind": "field", + "name": "showExceededText", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Determines whether the characters exceeding the maximum allowed character count are visible\nin the component.\n\nIf set to `false`, the user is not allowed to enter more characters than what is set in the\n`maxlength` property.\nIf set to `true` the characters exceeding the `maxlength` value are selected on\npaste and the counter below the component displays their number.", + "privacy": "public" + }, + { + "kind": "field", + "name": "value", + "type": { + "text": "string" + }, + "default": "\"\"", + "description": "Defines the value of the component.", + "privacy": "public", + "_ui5formProperty": true, + "_ui5formEvents": "change,input" + }, + { + "kind": "field", + "name": "valueState", + "type": { + "text": "ValueState", + "references": [ + { + "name": "ValueState", + "package": "@ui5/webcomponents-base", + "module": "dist/types/ValueState.js" + } + ] + }, + "default": "\"None\"", + "description": "Defines the value state of the component.\n\n**Note:** If `maxlength` property is set,\nthe component turns into \"Critical\" state once the characters exceeds the limit.\nIn this case, only the \"Negative\" state is considered and can be applied.", + "privacy": "public", + "_ui5since": "1.0.0-rc.7" + } + ], + "events": [ + { + "name": "change", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the text has changed and the focus leaves the component.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true + }, + { + "name": "input", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<TextAreaInputEventDetail>", + "references": [ + { + "name": "TextAreaInputEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/TextArea.js" + } + ] + }, + "description": "Fired when the value of the component changes at each keystroke or when\nsomething is pasted.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true, + "_ui5since": "1.0.0-rc.5", + "_ui5parameters": [ + { + "type": { + "text": "boolean" + }, + "name": "escapePressed", + "_ui5privacy": "public", + "description": "Indicates whether the Escape key was pressed, which triggers a revert to the previous value" + } + ] + }, + { + "name": "scroll", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when textarea is scrolled.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5since": "1.23.0" + }, + { + "name": "select", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when some text has been selected.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5since": "1.23.0" + } + ], + "attributes": [ + { + "description": "Defines the accessible description of the component.", + "name": "accessible-description", + "default": "undefined", + "fieldName": "accessibleDescription", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Receives id(or many ids) of the elements that describe the textarea.", + "name": "accessible-description-ref", + "default": "undefined", + "fieldName": "accessibleDescriptionRef", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the accessible ARIA name of the component.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Receives id(or many ids) of the elements that label the textarea.", + "name": "accessible-name-ref", + "default": "undefined", + "fieldName": "accessibleNameRef", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Indicates whether the user can interact with the component or not.\n\n**Note:** A disabled component is completely noninteractive.", + "name": "disabled", + "default": "false", + "fieldName": "disabled", + "type": { + "text": "boolean" + } + }, + { + "description": "Enables the component to automatically grow and shrink dynamically with its content.", + "name": "growing", + "default": "false", + "fieldName": "growing", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines the maximum number of rows that the component can grow.", + "name": "growing-max-rows", + "default": "0", + "fieldName": "growingMaxRows", + "type": { + "text": "number" + } + }, + { + "description": "Defines the maximum number of characters that the `value` can have.", + "name": "maxlength", + "default": "undefined", + "fieldName": "maxlength", + "type": { + "text": "number | undefined" + } + }, + { + "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", + "name": "name", + "default": "undefined", + "fieldName": "name", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines a short hint intended to aid the user with data entry when the component has no value.", + "name": "placeholder", + "default": "undefined", + "fieldName": "placeholder", + "type": { + "text": "string | undefined" + } + }, + { + "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.", + "name": "readonly", + "default": "false", + "fieldName": "readonly", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines whether the component is required.", + "name": "required", + "default": "false", + "fieldName": "required", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines the number of visible text rows for the component.\n\n**Notes:**\n\n- If the `growing` property is enabled, this property defines the minimum rows to be displayed\nin the textarea.\n- The CSS `height` property wins over the `rows` property, if both are set.", + "name": "rows", + "default": "0", + "fieldName": "rows", + "type": { + "text": "number" + } + }, + { + "description": "Determines whether the characters exceeding the maximum allowed character count are visible\nin the component.\n\nIf set to `false`, the user is not allowed to enter more characters than what is set in the\n`maxlength` property.\nIf set to `true` the characters exceeding the `maxlength` value are selected on\npaste and the counter below the component displays their number.", + "name": "show-exceeded-text", + "default": "false", + "fieldName": "showExceededText", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines the value of the component.", + "name": "value", + "default": "\"\"", + "fieldName": "value", + "type": { + "text": "string" + } + }, + { + "description": "Defines the value state of the component.\n\n**Note:** If `maxlength` property is set,\nthe component turns into \"Critical\" state once the characters exceeds the limit.\nIn this case, only the \"Negative\" state is considered and can be applied.", + "name": "value-state", + "default": "\"None\"", + "fieldName": "valueState", + "type": { + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" + } + } + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-textarea", + "customElement": true, + "_ui5privacy": "public" + } + ], + "exports": [ + { + "kind": "js", + "name": "BaseTextArea", + "declaration": { + "name": "TextArea", + "module": "dist/TextArea.js" + } + }, + { + "kind": "js", + "name": "default", + "declaration": { + "name": "TextArea", + "module": "dist/TextArea.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-textarea", + "declaration": { + "name": "TextArea", + "module": "dist/TextArea.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-textarea", + "declaration": { + "name": "TextArea", + "module": "dist/TextArea.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/TimePicker.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\nThe `ui5-time-picker` component provides an input field with assigned clocks which are opened on user action.\nThe `ui5-time-picker` allows users to select a localized time using touch, mouse, or keyboard input.\nIt consists of two parts: the time input field and the clocks.\n\n### Usage\nThe user can enter a time by:\n\n- Using the clocks that are displayed in a popup\n- Typing it in directly in the input field\n\nWhen the user makes an entry and chooses the enter key, the clocks show the corresponding time (hours, minutes and seconds separately).\nWhen the user directly triggers the clocks display, the actual time is displayed.\nFor the `ui5-time-picker`\n\n### Formatting\n\nIf a time is entered by typing it into\nthe input field, it must fit to the used time 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](https://unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table).\n\nFor example, if the `format-pattern` is \"HH:mm:ss\",\na valid value string is \"11:42:35\" and the same is displayed in the input.\n\n### Keyboard handling\n[F4], [Alt]+[Up], [Alt]+[Down] Open/Close picker dialog and move focus to it.\n\nWhen closed:\n\n- [Page Up] - Increments hours by 1. If 12 am is reached, increment hours to 1 pm and vice versa.\n- [Page Down] - Decrements the corresponding field by 1. If 1 pm is reached, decrement hours to 12 am and vice versa.\n- [Shift]+[Page Up] - Increments minutes by 1.\n- [Shift]+[Page Down] - Decrements minutes by 1.\n- [Shift]+[Ctrl]+[Page Up] - Increments seconds by 1.\n- [Shift]+[Ctrl]+[Page Down] - Decrements seconds by 1.\n-\n\nWhen opened:\n\n- [Page Up] - Increments hours by 1. If 12 am is reached, increment hours to 1 pm and vice versa.\n- [Page Down] - Decrements the corresponding field by 1. If 1 pm is reached, decrement hours to 12 am and vice versa.\n- [Shift]+[Page Up] - Increments minutes by 1.\n- [Shift]+[Page Down] - Decrements minutes by 1.\n- [Shift]+[Ctrl]+[Page Up] - Increments seconds by 1.\n- [Shift]+[Ctrl]+[Page Down] - Decrements seconds by 1.\n- [A] or [P] - Selects AM or PM respectively.\n- [0]-[9] - Allows direct time selecting (hours/minutes/seconds).\n- [:] - Allows switching between hours/minutes/seconds clocks. If the last clock is displayed and [:] is pressed, the first clock is beind displayed.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TimePicker.js\";`", + "name": "TimePicker", + "cssParts": [ + { + "description": "Used to style the input element. This part is forwarded to the underlying ui5-input element.", + "name": "input" + } + ], + "slots": [ + { + "name": "valueStateMessage", + "description": "Defines the value state message that will be displayed as pop up under the `ui5-time-picker`.\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-time-picker` is in `Information`, `Critical` or `Negative` value state.", + "_ui5since": "1.0.0-rc.8", + "_ui5type": { + "text": "Array<HTMLElement>" + }, + "_ui5privacy": "public" + } + ], + "members": [ + { + "kind": "field", + "name": "accessibleDescription", + "type": { + "text": "string | undefined" + }, + "description": "Defines the accessible description of the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.14.0" + }, + { + "kind": "field", + "name": "accessibleDescriptionRef", + "type": { + "text": "string | undefined" + }, + "description": "Receives id(or many ids) of the elements that describe the input.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.14.0" + }, + { + "kind": "field", + "name": "accessibleName", + "type": { + "text": "string | undefined" + }, + "description": "Defines the aria-label attribute for the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.1.0" + }, + { + "kind": "field", + "name": "accessibleNameRef", + "type": { + "text": "string | undefined" + }, + "description": "Receives id (or many ids) of the elements that label the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.1.0" + }, + { + "kind": "field", + "name": "dateValue", + "type": { + "text": "Date | null" + }, + "description": "Currently selected time represented as JavaScript Date instance", + "privacy": "public", + "default": "null", + "readonly": true + }, + { + "kind": "field", + "name": "disabled", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines the disabled state of the comonent.", + "privacy": "public" + }, + { + "kind": "field", + "name": "formatPattern", "type": { "text": "string | undefined" }, - "description": "Defines the `row-key` value of the selected row.", + "description": "Determines the format, displayed in the input field.\n\nExample:\nHH:mm:ss -> 11:42:35\nhh:mm:ss a -> 2:23:15 PM\nmm:ss -> 12:04 (only minutes and seconds)", "default": "undefined", - "privacy": "public", - "inheritedFrom": { - "name": "TableSelectionBase", - "module": "dist/TableSelectionBase.js" - } + "privacy": "public" }, { "kind": "method", - "name": "getSelectedRow", + "name": "formatValue", "return": { "type": { - "text": "TableRow | undefined", - "references": [ - { - "name": "TableRow", - "package": "@ui5/webcomponents", - "module": "dist/TableRow.js" - } - ] - } + "text": "string" + }, + "description": "formatted value" }, - "description": "Returns the selected row.", + "parameters": [ + { + "name": "date", + "type": { + "text": "Date" + }, + "description": "A Java Script date object to be formatted as string", + "_ui5privacy": "public" + } + ], + "description": "Formats a Java Script date object into a string representing a locale date and time\naccording to the `formatPattern` property of the TimePicker instance", "privacy": "public" }, - { - "kind": "field", - "name": "behavior", - "type": { - "text": "TableSelectionBehavior", - "references": [ - { - "name": "TableSelectionBehavior", - "package": "@ui5/webcomponents", - "module": "dist/types/TableSelectionBehavior.js" - } - ] - }, - "default": "\"RowSelector\"", - "description": "Defines the selection behavior.", - "privacy": "public", - "_ui5since": "2.11", - "inheritedFrom": { - "name": "TableSelectionBase", - "module": "dist/TableSelectionBase.js" - } - }, { "kind": "method", - "name": "getRowByKey", + "name": "isValid", "return": { "type": { - "text": "TableRow | undefined", - "references": [ - { - "name": "TableRow", - "package": "@ui5/webcomponents", - "module": "dist/TableRow.js" - } - ] + "text": "boolean" } }, "parameters": [ { - "name": "rowKey", + "name": "value", "type": { - "text": "string" + "text": "string | undefined" }, - "description": "The row key", + "description": "The value to be tested against the current date format", "_ui5privacy": "public" } ], - "description": "Returns the table row instance for the given row key.", - "privacy": "public", - "inheritedFrom": { - "name": "TableSelectionBase", - "module": "dist/TableSelectionBase.js" - } - } - ], - "attributes": [ + "description": "Checks if a value is valid against the current `formatPattern` value.\n\n**Note:** an empty string is considered as valid value.", + "privacy": "public" + }, { - "description": "Defines the `row-key` value of the selected row.", - "name": "selected", - "default": "undefined", - "fieldName": "selected", + "kind": "field", + "name": "name", "type": { "text": "string | undefined" }, - "inheritedFrom": { - "name": "TableSelectionBase", - "module": "dist/TableSelectionBase.js" - } + "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.0.0" }, { - "description": "Defines the selection behavior.", - "name": "behavior", - "default": "\"RowSelector\"", - "fieldName": "behavior", + "kind": "field", + "name": "open", "type": { - "text": "\"RowSelector\" | \"RowOnly\"" + "text": "boolean" }, - "inheritedFrom": { - "name": "TableSelectionBase", - "module": "dist/TableSelectionBase.js" - } - } - ], - "superclass": { - "name": "TableSelectionBase", - "package": "@ui5/webcomponents", - "module": "dist/TableSelectionBase.js" - }, - "tagName": "ui5-table-selection-single", - "customElement": true, - "_ui5since": "2.8.0", - "_ui5privacy": "public", - "events": [ + "default": "false", + "description": "Defines the open or closed state of the popover.", + "privacy": "public", + "_ui5since": "2.0.0" + }, { - "name": "change", - "_ui5privacy": "public", + "kind": "field", + "name": "placeholder", "type": { - "text": "CustomEvent" + "text": "string | undefined" }, - "description": "Fired when the selection is changed by user interaction.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "inheritedFrom": { - "name": "TableSelectionBase", - "module": "dist/TableSelectionBase.js" - } - } - ] - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "TableSelectionSingle", - "module": "dist/TableSelectionSingle.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-table-selection-single", - "declaration": { - "name": "TableSelectionSingle", - "module": "dist/TableSelectionSingle.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/TableUtils.js", - "declarations": [], - "exports": [] - }, - { - "kind": "javascript-module", - "path": "dist/TableVirtualizer.js", - "declarations": [ - { - "kind": "class", - "description": "### Overview\n\nThe `ui5-table-virtualizer` component is used inside the `ui5-table` to virtualize the table rows, if the `overflowMode` property of the table is set to 'Scroll'.\nIt is responsible for rendering only the rows that are visible in the viewport and updating them on scroll.\nThis allows large numbers of rows to exist, but maintain high performance by only paying the cost for those that are currently visible.\n\n**Note:** The maximum number of virtualized rows is limited by browser constraints, specifically the maximum supported height for a DOM element.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents/dist/TableVirtualizer.js\";`", - "name": "TableVirtualizer", - "members": [ + "description": "Defines a short hint, intended to aid the user with data entry when the\ncomponent has no value.\n\n**Note:** When no placeholder is set, the format pattern is displayed as a placeholder.\nPassing an empty string as the value of this property will make the component appear empty - without placeholder or format pattern.", + "default": "undefined", + "privacy": "public" + }, { "kind": "field", - "name": "rowHeight", + "name": "readonly", "type": { - "text": "number" + "text": "boolean" }, - "default": "45", - "description": "Defines the height of the rows in the table.\n\n**Note:** For virtualization to work properly, this property is mandatory.", + "default": "false", + "description": "Defines the readonly state of the comonent.", "privacy": "public" }, { "kind": "field", - "name": "rowCount", + "name": "required", "type": { - "text": "number" + "text": "boolean" }, - "default": "100", - "description": "Defines the total count of rows in the table.\n\n**Note:** For virtualization to work properly, this property is mandatory.", - "privacy": "public" + "default": "false", + "description": "Defines whether the component is required.", + "privacy": "public", + "_ui5since": "2.1.0" }, { "kind": "field", - "name": "extraRows", + "name": "value", "type": { - "text": "number" + "text": "string" }, - "default": "0", - "description": "Defines the count of extra rows to be rendered at the top and bottom of the table.\n\n**Note:** This property is experimental and may be changed or deleted in the future.", - "privacy": "public" + "default": "\"\"", + "description": "Defines a formatted time value.", + "privacy": "public", + "_ui5formProperty": true, + "_ui5formEvents": "change,input" }, { - "kind": "method", - "name": "reset", - "return": { - "type": { - "text": "void" - } + "kind": "field", + "name": "valueState", + "type": { + "text": "ValueState", + "references": [ + { + "name": "ValueState", + "package": "@ui5/webcomponents-base", + "module": "dist/types/ValueState.js" + } + ] }, - "description": "Resets the virtualizer to its initial state and triggers the `range-change` event.", + "default": "\"None\"", + "description": "Defines the value state of the component.", "privacy": "public" } ], "events": [ { - "name": "range-change", + "name": "change", "_ui5privacy": "public", "type": { - "text": "CustomEvent<RangeChangeEventDetail>", + "text": "CustomEvent<TimePickerChangeEventDetail>", "references": [ { - "name": "RangeChangeEventDetail", + "name": "TimePickerChangeEventDetail", "package": "@ui5/webcomponents", - "module": "dist/TableVirtualizer.js" + "module": "dist/TimePicker.js" } ] }, - "description": "Fired when the virtualizer is changed by user interaction e.g. on scrolling.", + "description": "Fired when the input operation has finished by clicking the \"OK\" button or\nwhen the text in the input field has changed and the focus leaves the input field.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, - "_ui5Bubbles": false, + "_ui5Bubbles": true, "_ui5parameters": [ { "type": { - "text": "number" + "text": "boolean" }, - "name": "first", + "name": "valid", "_ui5privacy": "public", - "description": "The 0-based index of the first children currently rendered" + "description": "Indicator if the value is in correct format pattern and in valid range." }, { "type": { - "text": "number" + "text": "string" }, - "name": "last", + "name": "value", "_ui5privacy": "public", - "description": "The 0-based index of the last children currently rendered" + "description": "The submitted value." } ] - } - ], - "attributes": [ - { - "description": "Defines the height of the rows in the table.\n\n**Note:** For virtualization to work properly, this property is mandatory.", - "name": "row-height", - "default": "45", - "fieldName": "rowHeight", - "type": { - "text": "number" - } - }, - { - "description": "Defines the total count of rows in the table.\n\n**Note:** For virtualization to work properly, this property is mandatory.", - "name": "row-count", - "default": "100", - "fieldName": "rowCount", - "type": { - "text": "number" - } }, { - "description": "Defines the count of extra rows to be rendered at the top and bottom of the table.\n\n**Note:** This property is experimental and may be changed or deleted in the future.", - "name": "extra-rows", - "default": "0", - "fieldName": "extraRows", + "name": "close", + "_ui5privacy": "public", "type": { - "text": "number" - } - } - ], - "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" - }, - "tagName": "ui5-table-virtualizer", - "customElement": true, - "_ui5experimental": "This component is not intended to be used in a productive enviroment. The API is under development and may be changed in the future.", - "_ui5since": "2.5.0", - "_ui5privacy": "public" - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "TableVirtualizer", - "module": "dist/TableVirtualizer.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-table-virtualizer", - "declaration": { - "name": "TableVirtualizer", - "module": "dist/TableVirtualizer.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/Tag.js", - "declarations": [ - { - "kind": "class", - "description": "### Overview\n\nThe `ui5-tag` 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/Tag.js\";`", - "name": "Tag", - "cssParts": [ - { - "description": "Used to style the root element.", - "name": "root" - } - ], - "slots": [ - { - "name": "default", - "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<Node>" + "text": "CustomEvent" }, - "_ui5privacy": "public" + "description": "Fired after the value-help dialog of the component is closed.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5since": "2.0.0" }, { - "name": "icon", - "description": "Defines the icon to be displayed in the component.", - "_ui5type": { - "text": "Array<IIcon>", + "name": "input", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<TimePickerInputEventDetail>", "references": [ { - "name": "IIcon", + "name": "TimePickerInputEventDetail", "package": "@ui5/webcomponents", - "module": "dist/Icon.js" + "module": "dist/TimePicker.js" } ] }, - "_ui5privacy": "public" + "description": "Fired when the value of the `ui5-time-picker` is changed at each key stroke.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5parameters": [ + { + "type": { + "text": "boolean" + }, + "name": "valid", + "_ui5privacy": "public", + "description": "Indicator if the value is in correct format pattern and in valid range." + }, + { + "type": { + "text": "string" + }, + "name": "value", + "_ui5privacy": "public", + "description": "The current value." + } + ] + }, + { + "name": "open", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired after the value-help dialog of the component is opened.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5since": "2.0.0" } ], - "members": [ + "attributes": [ { - "kind": "field", - "name": "design", + "description": "Defines the accessible description of the component.", + "name": "accessible-description", + "default": "undefined", + "fieldName": "accessibleDescription", "type": { - "text": "TagDesign", - "references": [ - { - "name": "TagDesign", - "package": "@ui5/webcomponents", - "module": "dist/types/TagDesign.js" - } - ] - }, - "default": "\"Neutral\"", - "description": "Defines the design type of the component.", - "privacy": "public", - "_ui5since": "1.22.0" + "text": "string | undefined" + } }, { - "kind": "field", - "name": "colorScheme", + "description": "Receives id(or many ids) of the elements that describe the input.", + "name": "accessible-description-ref", + "default": "undefined", + "fieldName": "accessibleDescriptionRef", "type": { - "text": "string" - }, - "default": "\"1\"", - "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.", - "privacy": "public" + "text": "string | undefined" + } }, { - "kind": "field", - "name": "hideStateIcon", + "description": "Defines the aria-label attribute for the component.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines if the default state icon is shown.", - "privacy": "public", - "_ui5since": "1.22.0" + "text": "string | undefined" + } }, { - "kind": "field", - "name": "interactive", + "description": "Receives id (or many ids) of the elements that label the component.", + "name": "accessible-name-ref", + "default": "undefined", + "fieldName": "accessibleNameRef", "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines if the component is interactive (focusable and pressable).", - "privacy": "public", - "_ui5since": "1.22.0" + "text": "string | undefined" + } }, { - "kind": "field", - "name": "wrappingType", + "description": "Currently selected time represented as JavaScript Date instance", + "name": "date-value", + "default": "null", + "fieldName": "dateValue", "type": { - "text": "WrappingType", - "references": [ - { - "name": "WrappingType", - "package": "@ui5/webcomponents", - "module": "dist/types/WrappingType.js" - } - ] - }, - "default": "\"Normal\"", - "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.", - "privacy": "public", - "_ui5since": "1.22.0" + "text": "any" + } }, { - "kind": "field", - "name": "size", + "description": "Defines the disabled state of the comonent.", + "name": "disabled", + "default": "false", + "fieldName": "disabled", "type": { - "text": "TagSize", - "references": [ - { - "name": "TagSize", - "package": "@ui5/webcomponents", - "module": "dist/types/TagSize.js" - } - ] - }, - "default": "\"S\"", - "description": "Defines predefined size of the component.", - "privacy": "public", - "_ui5since": "2.0.0" - } - ], - "events": [ + "text": "boolean" + } + }, { - "name": "click", - "_ui5privacy": "public", + "description": "Determines the format, displayed in the input field.\n\nExample:\nHH:mm:ss -> 11:42:35\nhh:mm:ss a -> 2:23:15 PM\nmm:ss -> 12:04 (only minutes and seconds)", + "name": "format-pattern", + "default": "undefined", + "fieldName": "formatPattern", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", + "name": "name", + "default": "undefined", + "fieldName": "name", "type": { - "text": "CustomEvent" - }, - "description": "Fired when the user clicks on an interactive tag.\n\n**Note:** The event will be fired if the `interactive` property is `true`", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5since": "1.22.0" - } - ], - "attributes": [ + "text": "string | undefined" + } + }, { - "description": "Defines the design type of the component.", - "name": "design", - "default": "\"Neutral\"", - "fieldName": "design", + "description": "Defines the open or closed state of the popover.", + "name": "open", + "default": "false", + "fieldName": "open", "type": { - "text": "\"Positive\" | \"Critical\" | \"Negative\" | \"Information\" | \"Neutral\" | \"Set1\" | \"Set2\"" + "text": "boolean" } }, { - "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.", - "name": "color-scheme", - "default": "\"1\"", - "fieldName": "colorScheme", + "description": "Defines a short hint, intended to aid the user with data entry when the\ncomponent has no value.\n\n**Note:** When no placeholder is set, the format pattern is displayed as a placeholder.\nPassing an empty string as the value of this property will make the component appear empty - without placeholder or format pattern.", + "name": "placeholder", + "default": "undefined", + "fieldName": "placeholder", "type": { - "text": "string" + "text": "string | undefined" } }, { - "description": "Defines if the default state icon is shown.", - "name": "hide-state-icon", + "description": "Defines the readonly state of the comonent.", + "name": "readonly", "default": "false", - "fieldName": "hideStateIcon", + "fieldName": "readonly", "type": { "text": "boolean" } }, { - "description": "Defines if the component is interactive (focusable and pressable).", - "name": "interactive", + "description": "Defines whether the component is required.", + "name": "required", "default": "false", - "fieldName": "interactive", + "fieldName": "required", "type": { "text": "boolean" } }, { - "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.", - "name": "wrapping-type", - "default": "\"Normal\"", - "fieldName": "wrappingType", + "description": "Defines a formatted time value.", + "name": "value", + "default": "\"\"", + "fieldName": "value", "type": { - "text": "\"None\" | \"Normal\"" + "text": "string" } }, { - "description": "Defines predefined size of the component.", - "name": "size", - "default": "\"S\"", - "fieldName": "size", + "description": "Defines the value state of the component.", + "name": "value-state", + "default": "\"None\"", + "fieldName": "valueState", "type": { - "text": "\"S\" | \"L\"" + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" } } ], @@ -26609,9 +27947,9 @@ "package": "@ui5/webcomponents-base", "module": "dist/UI5Element.js" }, - "tagName": "ui5-tag", + "tagName": "ui5-time-picker", "customElement": true, - "_ui5since": "2.0.0", + "_ui5since": "1.0.0-rc.6", "_ui5privacy": "public" } ], @@ -26620,98 +27958,38 @@ "kind": "js", "name": "default", "declaration": { - "name": "Tag", - "module": "dist/Tag.js" + "name": "TimePicker", + "module": "dist/TimePicker.js" } }, { "kind": "custom-element-definition", - "name": "ui5-tag", + "name": "ui5-time-picker", "declaration": { - "name": "Tag", - "module": "dist/Tag.js" + "name": "TimePicker", + "module": "dist/TimePicker.js" } } ] }, { "kind": "javascript-module", - "path": "dist/Text.js", + "path": "dist/TimePickerClock.js", "declarations": [ { "kind": "class", - "description": "### Overview\n\nThe `ui5-text` component displays text that can be used in any content area of an application.\n\n### Usage\n\n- Use the `ui5-text` if you want to display text inside a form, table, or any other content area.\n- Do not use the `ui5-text` if you need to reference input type of components (use ui5-label).\n\n### Responsive behavior\n\nThe `ui5-text` component is fully adaptive to all screen sizes.\nBy default, the text will wrap when the space is not enough.\nIn addition, the component supports truncation via the `max-lines` property,\nby defining the number of lines the text should wrap before start truncating.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Text\";`", - "name": "Text", - "slots": [ - { - "name": "default", - "description": "Defines the text of the component.", - "_ui5propertyName": "text", - "_ui5type": { - "text": "Array<Node>" - }, - "_ui5privacy": "public" - } - ], - "members": [ - { - "kind": "field", - "name": "maxLines", - "type": { - "text": "number" - }, - "default": "Infinity", - "description": "Defines the number of lines the text should wrap before it truncates.", - "privacy": "public" - }, - { - "kind": "field", - "name": "emptyIndicatorMode", - "type": { - "text": "TextEmptyIndicatorMode", - "references": [ - { - "name": "TextEmptyIndicatorMode", - "package": "@ui5/webcomponents", - "module": "dist/types/TextEmptyIndicatorMode.js" - } - ] - }, - "default": "\"Off\"", - "description": "Specifies if an empty indicator should be displayed when there is no text.", - "privacy": "public", - "_ui5since": "2.2.0" - } - ], - "attributes": [ - { - "description": "Defines the number of lines the text should wrap before it truncates.", - "name": "max-lines", - "default": "Infinity", - "fieldName": "maxLines", - "type": { - "text": "number" - } - }, - { - "description": "Specifies if an empty indicator should be displayed when there is no text.", - "name": "empty-indicator-mode", - "default": "\"Off\"", - "fieldName": "emptyIndicatorMode", - "type": { - "text": "\"On\" | \"Off\"" - } - } - ], + "description": "### Overview\n\n`ui5-time-picker-clock` allows selecting of hours,minutes or seconds (depending on property set).\nThe component supports interactions with mouse, touch and mouse wheel.\nThe step for displaying or selecting of items can be configured.\n\n`ui5-time-picker-clock` is used as part of `ui5-time-selection-clocks` component, which\nis used in `ui5-time-picker` component respectively.\n\n### Usage\n\n`ui5-time-picker-clock` can display hours, minutes or seconds\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TimePickerClock.js\";`", + "name": "TimePickerClock", "superclass": { "name": "UI5Element", "package": "@ui5/webcomponents-base", "module": "dist/UI5Element.js" }, - "tagName": "ui5-text", + "tagName": "ui5-time-picker-clock", "customElement": true, - "_ui5since": "2.0.0", - "_ui5privacy": "public" + "_ui5since": "1.15.0", + "_ui5privacy": "private", + "members": [] } ], "exports": [ @@ -26719,431 +27997,350 @@ "kind": "js", "name": "default", "declaration": { - "name": "Text", - "module": "dist/Text.js" + "name": "TimePickerClock", + "module": "dist/TimePickerClock.js" } }, { "kind": "custom-element-definition", - "name": "ui5-text", + "name": "ui5-time-picker-clock", "declaration": { - "name": "Text", - "module": "dist/Text.js" + "name": "TimePickerClock", + "module": "dist/TimePickerClock.js" } } ] }, { "kind": "javascript-module", - "path": "dist/TextArea.js", + "path": "dist/TimePickerInternals.js", "declarations": [ { "kind": "class", - "description": "### Overview\n\nThe `ui5-textarea` component is used to enter multiple rows of text.\n\nWhen empty, it can hold a placeholder similar to a `ui5-input`.\nYou can define the rows of the `ui5-textarea` and also determine specific behavior when handling long texts.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TextArea.js\";`", - "name": "TextArea", - "cssParts": [ - { - "description": "Used to style the native textarea", - "name": "textarea" - } - ], - "slots": [ - { - "name": "valueStateMessage", - "description": "Defines the value state message that will be displayed as pop up under the component.\nThe value state message slot should contain only one root element.\n \n**Note:** If not specified, a default text (in the respective language) will be displayed.\n\n**Note:** The `valueStateMessage` would be displayed if the component has\n`valueState` of type `Information`, `Critical` or `Negative`.", - "_ui5since": "1.0.0-rc.7", - "_ui5type": { - "text": "Array<HTMLElement>" - }, - "_ui5privacy": "public" - } - ], + "description": "### Overview\n\n`ui5-time-picker-internals` is helper component that contains shared methods used in `ui5-time-selection-clocks`\nand `<ui5-time-selection-inputs>` components and should not be used separately.", + "name": "TimePickerInternals", "members": [ { "kind": "field", - "name": "value", - "type": { - "text": "string" - }, - "default": "\"\"", - "description": "Defines the value of the component.", - "privacy": "public", - "_ui5formProperty": true, - "_ui5formEvents": "change,input" - }, - { - "kind": "field", - "name": "disabled", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Indicates whether the user can interact with the component or not.\n\n**Note:** A disabled component is completely noninteractive.", - "privacy": "public" - }, - { - "kind": "field", - "name": "readonly", - "type": { - "text": "boolean" - }, - "default": "false", - "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.", - "privacy": "public" - }, - { - "kind": "field", - "name": "required", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines whether the component is required.", - "privacy": "public", - "_ui5since": "1.0.0-rc.3" - }, - { - "kind": "field", - "name": "placeholder", + "name": "formatPattern", "type": { "text": "string | undefined" }, - "description": "Defines a short hint intended to aid the user with data entry when the component has no value.", - "default": "undefined", - "privacy": "public" - }, - { - "kind": "field", - "name": "valueState", - "type": { - "text": "ValueState", - "references": [ - { - "name": "ValueState", - "package": "@ui5/webcomponents-base", - "module": "dist/types/ValueState.js" - } - ] - }, - "default": "\"None\"", - "description": "Defines the value state of the component.\n\n**Note:** If `maxlength` property is set,\nthe component turns into \"Critical\" state once the characters exceeds the limit.\nIn this case, only the \"Negative\" state is considered and can be applied.", - "privacy": "public", - "_ui5since": "1.0.0-rc.7" - }, - { - "kind": "field", - "name": "rows", - "type": { - "text": "number" - }, - "default": "0", - "description": "Defines the number of visible text rows for the component.\n\n**Notes:**\n\n- If the `growing` property is enabled, this property defines the minimum rows to be displayed\nin the textarea.\n- The CSS `height` property wins over the `rows` property, if both are set.", - "privacy": "public" - }, - { - "kind": "field", - "name": "maxlength", - "type": { - "text": "number | undefined" - }, - "description": "Defines the maximum number of characters that the `value` can have.", + "description": "Determines the format, displayed in the input field.\n\nExample:\nHH:mm:ss -> 11:42:35\nhh:mm:ss a -> 2:23:15 PM\nmm:ss -> 12:04 (only minutes and seconds)", "default": "undefined", "privacy": "public" }, { "kind": "field", - "name": "showExceededText", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Determines whether the characters exceeding the maximum allowed character count are visible\nin the component.\n\nIf set to `false`, the user is not allowed to enter more characters than what is set in the\n`maxlength` property.\nIf set to `true` the characters exceeding the `maxlength` value are selected on\npaste and the counter below the component displays their number.", - "privacy": "public" - }, - { - "kind": "field", - "name": "growing", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Enables the component to automatically grow and shrink dynamically with its content.", - "privacy": "public" - }, - { - "kind": "field", - "name": "growingMaxRows", - "type": { - "text": "number" - }, - "default": "0", - "description": "Defines the maximum number of rows that the component can grow.", - "privacy": "public" - }, - { - "kind": "field", - "name": "name", + "name": "value", "type": { "text": "string | undefined" }, - "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", + "description": "Defines a formatted time value.", "default": "undefined", "privacy": "public" - }, + } + ], + "attributes": [ { - "kind": "field", - "name": "accessibleName", + "description": "Determines the format, displayed in the input field.\n\nExample:\nHH:mm:ss -> 11:42:35\nhh:mm:ss a -> 2:23:15 PM\nmm:ss -> 12:04 (only minutes and seconds)", + "name": "format-pattern", + "default": "undefined", + "fieldName": "formatPattern", "type": { "text": "string | undefined" - }, - "description": "Defines the accessible ARIA name of the component.", - "default": "undefined", - "privacy": "public", - "_ui5since": "1.0.0-rc.15" + } }, { - "kind": "field", - "name": "accessibleNameRef", + "description": "Defines a formatted time value.", + "name": "value", + "default": "undefined", + "fieldName": "value", "type": { "text": "string | undefined" - }, - "description": "Receives id(or many ids) of the elements that label the textarea.", - "default": "undefined", - "privacy": "public", - "_ui5since": "1.0.0-rc.15" - }, + } + } + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "customElement": true, + "_ui5since": "1.15.0", + "_ui5privacy": "private", + "_ui5abstract": true + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "TimePickerInternals", + "module": "dist/TimePickerInternals.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/TimeSelectionClocks.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\n\n`ui5-time-selection-clocks` is component that contains all the `ui5-time-picker-clock` components\nnecessary for the `ui5-time-picker` as well as all necessary `ui5-toggle-spin-button` components\nused for switching between different clocks.\n`ui5-time-picker-clock` components and `ui5-toggle-spin-button` depend on the time format set to\n`ui5-time-picker` component.\n\nThis component should not be used separately.", + "name": "TimeSelectionClocks", + "members": [ { "kind": "field", - "name": "accessibleDescription", + "name": "formatPattern", "type": { "text": "string | undefined" }, - "description": "Defines the accessible description of the component.", + "description": "Determines the format, displayed in the input field.\n\nExample:\nHH:mm:ss -> 11:42:35\nhh:mm:ss a -> 2:23:15 PM\nmm:ss -> 12:04 (only minutes and seconds)", "default": "undefined", - "privacy": "public", - "_ui5since": "2.16.0" + "privacy": "public" }, { "kind": "field", - "name": "accessibleDescriptionRef", + "name": "value", "type": { "text": "string | undefined" }, - "description": "Receives id(or many ids) of the elements that describe the textarea.", + "description": "Defines a formatted time value.", "default": "undefined", - "privacy": "public", - "_ui5since": "2.16.0" - } - ], - "events": [ - { - "name": "change", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired when the text has changed and the focus leaves the component.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true - }, - { - "name": "input", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent<TextAreaInputEventDetail>", - "references": [ - { - "name": "TextAreaInputEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/TextArea.js" - } - ] - }, - "description": "Fired when the value of the component changes at each keystroke or when\nsomething is pasted.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": true, - "_ui5since": "1.0.0-rc.5", - "_ui5parameters": [ - { - "type": { - "text": "boolean" - }, - "name": "escapePressed", - "_ui5privacy": "public", - "description": "Indicates whether the Escape key was pressed, which triggers a revert to the previous value" - } - ] - }, - { - "name": "select", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired when some text has been selected.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5since": "1.23.0" - }, - { - "name": "scroll", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired when textarea is scrolled.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5since": "1.23.0" + "privacy": "public" } ], + "superclass": { + "name": "TimePickerInternals", + "package": "@ui5/webcomponents", + "module": "dist/TimePickerInternals.js" + }, + "tagName": "ui5-time-selection-clocks", + "customElement": true, + "_ui5since": "1.15.0", + "_ui5privacy": "private", "attributes": [ { - "description": "Defines the value of the component.", - "name": "value", - "default": "\"\"", - "fieldName": "value", - "type": { - "text": "string" - } - }, - { - "description": "Indicates whether the user can interact with the component or not.\n\n**Note:** A disabled component is completely noninteractive.", - "name": "disabled", - "default": "false", - "fieldName": "disabled", - "type": { - "text": "boolean" - } - }, - { - "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.", - "name": "readonly", - "default": "false", - "fieldName": "readonly", + "description": "Determines the format, displayed in the input field.\n\nExample:\nHH:mm:ss -> 11:42:35\nhh:mm:ss a -> 2:23:15 PM\nmm:ss -> 12:04 (only minutes and seconds)", + "name": "format-pattern", + "default": "undefined", + "fieldName": "formatPattern", "type": { - "text": "boolean" + "text": "string | undefined" } }, { - "description": "Defines whether the component is required.", - "name": "required", - "default": "false", - "fieldName": "required", + "description": "Defines a formatted time value.", + "name": "value", + "default": "undefined", + "fieldName": "value", "type": { - "text": "boolean" + "text": "string | undefined" } - }, + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "TimeSelectionClocks", + "module": "dist/TimeSelectionClocks.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-time-selection-clocks", + "declaration": { + "name": "TimeSelectionClocks", + "module": "dist/TimeSelectionClocks.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/TimeSelectionInputs.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\n\n`ui5-time-selection-inputs` displays a popover with `ui5-input` components of type=\"number\" and an\noptional a AM/PM `ui5-segmented-button` according to the display format given to the `ui5-time-picker`.\nUsing of numeric input components enables display of mobile devices' native numeric keyboard, which speeds up entering of the time.\nThe popup appears only on mobile devices when there is a tap on the `ui5-time-picker` input.\n\nThis component should not be used separately.", + "name": "TimeSelectionInputs", + "members": [ { - "description": "Defines a short hint intended to aid the user with data entry when the component has no value.", - "name": "placeholder", - "default": "undefined", - "fieldName": "placeholder", + "kind": "field", + "name": "formatPattern", "type": { "text": "string | undefined" - } - }, - { - "description": "Defines the value state of the component.\n\n**Note:** If `maxlength` property is set,\nthe component turns into \"Critical\" state once the characters exceeds the limit.\nIn this case, only the \"Negative\" state is considered and can be applied.", - "name": "value-state", - "default": "\"None\"", - "fieldName": "valueState", - "type": { - "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" - } + }, + "description": "Determines the format, displayed in the input field.\n\nExample:\nHH:mm:ss -> 11:42:35\nhh:mm:ss a -> 2:23:15 PM\nmm:ss -> 12:04 (only minutes and seconds)", + "default": "undefined", + "privacy": "public" }, { - "description": "Defines the number of visible text rows for the component.\n\n**Notes:**\n\n- If the `growing` property is enabled, this property defines the minimum rows to be displayed\nin the textarea.\n- The CSS `height` property wins over the `rows` property, if both are set.", - "name": "rows", - "default": "0", - "fieldName": "rows", + "kind": "field", + "name": "value", "type": { - "text": "number" - } - }, + "text": "string | undefined" + }, + "description": "Defines a formatted time value.", + "default": "undefined", + "privacy": "public" + } + ], + "superclass": { + "name": "TimePickerInternals", + "package": "@ui5/webcomponents", + "module": "dist/TimePickerInternals.js" + }, + "tagName": "ui5-time-selection-inputs", + "customElement": true, + "_ui5since": "1.18.0", + "_ui5privacy": "private", + "_ui5abstract": true, + "attributes": [ { - "description": "Defines the maximum number of characters that the `value` can have.", - "name": "maxlength", + "description": "Determines the format, displayed in the input field.\n\nExample:\nHH:mm:ss -> 11:42:35\nhh:mm:ss a -> 2:23:15 PM\nmm:ss -> 12:04 (only minutes and seconds)", + "name": "format-pattern", "default": "undefined", - "fieldName": "maxlength", + "fieldName": "formatPattern", "type": { - "text": "number | undefined" + "text": "string | undefined" } }, { - "description": "Determines whether the characters exceeding the maximum allowed character count are visible\nin the component.\n\nIf set to `false`, the user is not allowed to enter more characters than what is set in the\n`maxlength` property.\nIf set to `true` the characters exceeding the `maxlength` value are selected on\npaste and the counter below the component displays their number.", - "name": "show-exceeded-text", - "default": "false", - "fieldName": "showExceededText", + "description": "Defines a formatted time value.", + "name": "value", + "default": "undefined", + "fieldName": "value", "type": { - "text": "boolean" + "text": "string | undefined" } - }, + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "TimeSelectionInputs", + "module": "dist/TimeSelectionInputs.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-time-selection-inputs", + "declaration": { + "name": "TimeSelectionInputs", + "module": "dist/TimeSelectionInputs.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/Title.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\n\nThe `ui5-title` component is used to display titles inside a page.\nIt is a simple, large-sized text with explicit header/title semantics.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Title.js\";`", + "name": "Title", + "slots": [ { - "description": "Enables the component to automatically grow and shrink dynamically with its content.", - "name": "growing", - "default": "false", - "fieldName": "growing", - "type": { - "text": "boolean" + "description": "Defines the text of the component.\nThis component supports nesting a `Link` component inside.\n\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.", + "name": "default", + "_ui5privacy": "public", + "_ui5type": { + "text": "Array<Node>" } - }, + } + ], + "members": [ { - "description": "Defines the maximum number of rows that the component can grow.", - "name": "growing-max-rows", - "default": "0", - "fieldName": "growingMaxRows", + "kind": "field", + "name": "level", "type": { - "text": "number" - } + "text": "TitleLevel", + "references": [ + { + "name": "TitleLevel", + "package": "@ui5/webcomponents", + "module": "dist/types/TitleLevel.js" + } + ] + }, + "default": "\"H2\"", + "description": "Defines the component level.\nAvailable options are: `\"H6\"` to `\"H1\"`.\nThis property does not influence the style of the component.\nUse the property `size` for this purpose instead.", + "privacy": "public" }, { - "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", - "name": "name", - "default": "undefined", - "fieldName": "name", + "kind": "field", + "name": "size", "type": { - "text": "string | undefined" - } + "text": "TitleLevel", + "references": [ + { + "name": "TitleLevel", + "package": "@ui5/webcomponents", + "module": "dist/types/TitleLevel.js" + } + ] + }, + "default": "\"H5\"", + "description": "Defines the visual appearance of the title.\nAvailable options are: `\"H6\"` to `\"H1\"`.", + "privacy": "public" }, { - "description": "Defines the accessible ARIA name of the component.", - "name": "accessible-name", - "default": "undefined", - "fieldName": "accessibleName", + "kind": "field", + "name": "wrappingType", "type": { - "text": "string | undefined" - } - }, + "text": "WrappingType", + "references": [ + { + "name": "WrappingType", + "package": "@ui5/webcomponents", + "module": "dist/types/WrappingType.js" + } + ] + }, + "default": "\"Normal\"", + "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 words will not be broken based on hyphenation.", + "privacy": "public" + } + ], + "attributes": [ { - "description": "Receives id(or many ids) of the elements that label the textarea.", - "name": "accessible-name-ref", - "default": "undefined", - "fieldName": "accessibleNameRef", + "description": "Defines the component level.\nAvailable options are: `\"H6\"` to `\"H1\"`.\nThis property does not influence the style of the component.\nUse the property `size` for this purpose instead.", + "name": "level", + "default": "\"H2\"", + "fieldName": "level", "type": { - "text": "string | undefined" + "text": "\"H1\" | \"H2\" | \"H3\" | \"H4\" | \"H5\" | \"H6\"" } }, { - "description": "Defines the accessible description of the component.", - "name": "accessible-description", - "default": "undefined", - "fieldName": "accessibleDescription", + "description": "Defines the visual appearance of the title.\nAvailable options are: `\"H6\"` to `\"H1\"`.", + "name": "size", + "default": "\"H5\"", + "fieldName": "size", "type": { - "text": "string | undefined" + "text": "\"H1\" | \"H2\" | \"H3\" | \"H4\" | \"H5\" | \"H6\"" } }, { - "description": "Receives id(or many ids) of the elements that describe the textarea.", - "name": "accessible-description-ref", - "default": "undefined", - "fieldName": "accessibleDescriptionRef", + "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 words will not be broken based on hyphenation.", + "name": "wrapping-type", + "default": "\"Normal\"", + "fieldName": "wrappingType", "type": { - "text": "string | undefined" + "text": "\"None\" | \"Normal\"" } } ], @@ -27152,7 +28349,7 @@ "package": "@ui5/webcomponents-base", "module": "dist/UI5Element.js" }, - "tagName": "ui5-textarea", + "tagName": "ui5-title", "customElement": true, "_ui5privacy": "public" } @@ -27162,687 +28359,599 @@ "kind": "js", "name": "default", "declaration": { - "name": "TextArea", - "module": "dist/TextArea.js" - } - }, - { - "kind": "js", - "name": "BaseTextArea", - "declaration": { - "name": "TextArea", - "module": "dist/TextArea.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-textarea", - "declaration": { - "name": "TextArea", - "module": "dist/TextArea.js" + "name": "Title", + "module": "dist/Title.js" } }, { "kind": "custom-element-definition", - "name": "ui5-textarea", + "name": "ui5-title", "declaration": { - "name": "TextArea", - "module": "dist/TextArea.js" + "name": "Title", + "module": "dist/Title.js" } } ] }, { "kind": "javascript-module", - "path": "dist/TimePicker.js", + "path": "dist/Toast.js", "declarations": [ { "kind": "class", - "description": "### Overview\nThe `ui5-time-picker` component provides an input field with assigned clocks which are opened on user action.\nThe `ui5-time-picker` allows users to select a localized time using touch, mouse, or keyboard input.\nIt consists of two parts: the time input field and the clocks.\n\n### Usage\nThe user can enter a time by:\n\n- Using the clocks that are displayed in a popup\n- Typing it in directly in the input field\n\nWhen the user makes an entry and chooses the enter key, the clocks show the corresponding time (hours, minutes and seconds separately).\nWhen the user directly triggers the clocks display, the actual time is displayed.\nFor the `ui5-time-picker`\n\n### Formatting\n\nIf a time is entered by typing it into\nthe input field, it must fit to the used time 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](https://unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table).\n\nFor example, if the `format-pattern` is \"HH:mm:ss\",\na valid value string is \"11:42:35\" and the same is displayed in the input.\n\n### Keyboard handling\n[F4], [Alt]+[Up], [Alt]+[Down] Open/Close picker dialog and move focus to it.\n\nWhen closed:\n\n- [Page Up] - Increments hours by 1. If 12 am is reached, increment hours to 1 pm and vice versa.\n- [Page Down] - Decrements the corresponding field by 1. If 1 pm is reached, decrement hours to 12 am and vice versa.\n- [Shift]+[Page Up] - Increments minutes by 1.\n- [Shift]+[Page Down] - Decrements minutes by 1.\n- [Shift]+[Ctrl]+[Page Up] - Increments seconds by 1.\n- [Shift]+[Ctrl]+[Page Down] - Decrements seconds by 1.\n-\n\nWhen opened:\n\n- [Page Up] - Increments hours by 1. If 12 am is reached, increment hours to 1 pm and vice versa.\n- [Page Down] - Decrements the corresponding field by 1. If 1 pm is reached, decrement hours to 12 am and vice versa.\n- [Shift]+[Page Up] - Increments minutes by 1.\n- [Shift]+[Page Down] - Decrements minutes by 1.\n- [Shift]+[Ctrl]+[Page Up] - Increments seconds by 1.\n- [Shift]+[Ctrl]+[Page Down] - Decrements seconds by 1.\n- [A] or [P] - Selects AM or PM respectively.\n- [0]-[9] - Allows direct time selecting (hours/minutes/seconds).\n- [:] - Allows switching between hours/minutes/seconds clocks. If the last clock is displayed and [:] is pressed, the first clock is beind displayed.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TimePicker.js\";`", - "name": "TimePicker", - "cssParts": [ - { - "description": "Used to style the input element. This part is forwarded to the underlying ui5-input element.", - "name": "input" - } - ], + "description": "### Overview\n\nThe `ui5-toast` is a small, non-disruptive popup for success or information messages that\ndisappears automatically after a few seconds.\n\n### Usage\n\n#### When to use:\n\n- You want to display a short success or information message.\n- You do not want to interrupt users while they are performing an action.\n- You want to confirm a successful action.\n\n#### When not to use:\n\n- You want to display error or warning message.\n- You want to interrupt users while they are performing an action.\n- You want to make sure that users read the message before they leave the page.\n- You want users to be able to copy some part of the message text.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Toast.js\";`", + "name": "Toast", "slots": [ { - "name": "valueStateMessage", - "description": "Defines the value state message that will be displayed as pop up under the `ui5-time-picker`.\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-time-picker` is in `Information`, `Critical` or `Negative` value state.", - "_ui5since": "1.0.0-rc.8", + "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.", + "name": "default", + "_ui5privacy": "public", "_ui5type": { - "text": "Array<HTMLElement>" - }, - "_ui5privacy": "public" + "text": "Array<Node>" + } } ], "members": [ { "kind": "field", - "name": "value", + "name": "duration", "type": { - "text": "string" + "text": "number" }, - "default": "\"\"", - "description": "Defines a formatted time value.", - "privacy": "public", - "_ui5formProperty": true, - "_ui5formEvents": "change,input" + "default": "3000", + "description": "Defines the duration in milliseconds for which component\nremains on the screen before it's automatically closed.\n\n**Note:** The minimum supported value is `500` ms\nand even if a lower value is set, the duration would remain `500` ms.", + "privacy": "public" }, { "kind": "field", - "name": "name", + "name": "open", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", - "default": "undefined", + "default": "false", + "description": "Indicates whether the component is open (visible).", "privacy": "public", "_ui5since": "2.0.0" }, { "kind": "field", - "name": "valueState", + "name": "placement", "type": { - "text": "ValueState", + "text": "ToastPlacement", "references": [ { - "name": "ValueState", - "package": "@ui5/webcomponents-base", - "module": "dist/types/ValueState.js" + "name": "ToastPlacement", + "package": "@ui5/webcomponents", + "module": "dist/types/ToastPlacement.js" } ] }, - "default": "\"None\"", - "description": "Defines the value state of the component.", + "default": "\"BottomCenter\"", + "description": "Defines the placement of the component.", "privacy": "public" - }, + } + ], + "events": [ { - "kind": "field", - "name": "disabled", + "name": "close", + "_ui5privacy": "public", "type": { - "text": "boolean" + "text": "CustomEvent" }, + "description": "Fired after the component is auto closed.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": false, + "_ui5since": "2.0.0" + } + ], + "attributes": [ + { + "description": "Defines the duration in milliseconds for which component\nremains on the screen before it's automatically closed.\n\n**Note:** The minimum supported value is `500` ms\nand even if a lower value is set, the duration would remain `500` ms.", + "name": "duration", + "default": "3000", + "fieldName": "duration", + "type": { + "text": "number" + } + }, + { + "description": "Indicates whether the component is open (visible).", + "name": "open", "default": "false", - "description": "Defines the disabled state of the comonent.", - "privacy": "public" + "fieldName": "open", + "type": { + "text": "boolean" + } }, + { + "description": "Defines the placement of the component.", + "name": "placement", + "default": "\"BottomCenter\"", + "fieldName": "placement", + "type": { + "text": "\"TopStart\" | \"TopCenter\" | \"TopEnd\" | \"MiddleStart\" | \"MiddleCenter\" | \"MiddleEnd\" | \"BottomStart\" | \"BottomCenter\" | \"BottomEnd\"" + } + } + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-toast", + "customElement": true, + "_ui5since": "1.0.0-rc.6", + "_ui5privacy": "public" + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "Toast", + "module": "dist/Toast.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-toast", + "declaration": { + "name": "Toast", + "module": "dist/Toast.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/ToggleButton.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\n\nThe `ui5-toggle-button` component is an enhanced `ui5-button`\nthat can be toggled between pressed and normal states.\nUsers can use the `ui5-toggle-button` as a switch to turn a setting on or off.\nIt can also be used to represent an independent choice similar to a check box.\n\nClicking or tapping on a `ui5-toggle-button` changes its state to `pressed`. The button returns to\nits initial state when the user clicks or taps on it again.\nBy applying additional custom CSS-styling classes, apps can give a different style to any `ui5-toggle-button`.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/ToggleButton.js\";`", + "name": "ToggleButton", + "members": [ { "kind": "field", - "name": "readonly", + "name": "accessibilityAttributes", "type": { - "text": "boolean" + "text": "ButtonAccessibilityAttributes", + "references": [ + { + "name": "ButtonAccessibilityAttributes", + "package": "@ui5/webcomponents", + "module": "dist/Button.js" + } + ] }, - "default": "false", - "description": "Defines the readonly state of the comonent.", - "privacy": "public" + "default": "{}", + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\nAccepts the following string values: `true` or `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.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n- **ariaLabel**: Defines the accessible ARIA name of the component.\nAccepts any string value.\n\n - **ariaKeyShortcuts**: Defines keyboard shortcuts that activate or give focus to the button.\n\n- **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element.\nAccepts a lowercase string value.", + "privacy": "public", + "_ui5since": "1.2.0" }, { "kind": "field", - "name": "placeholder", + "name": "accessibleDescription", "type": { "text": "string | undefined" }, - "description": "Defines a short hint, intended to aid the user with data entry when the\ncomponent has no value.\n\n**Note:** When no placeholder is set, the format pattern is displayed as a placeholder.\nPassing an empty string as the value of this property will make the component appear empty - without placeholder or format pattern.", + "description": "Defines the accessible description of the component.", "default": "undefined", - "privacy": "public" + "privacy": "public", + "_ui5since": "2.5.0" }, { "kind": "field", - "name": "formatPattern", + "name": "accessibleName", "type": { "text": "string | undefined" }, - "description": "Determines the format, displayed in the input field.\n\nExample:\nHH:mm:ss -> 11:42:35\nhh:mm:ss a -> 2:23:15 PM\nmm:ss -> 12:04 (only minutes and seconds)", + "description": "Defines the accessible ARIA name of the component.", "default": "undefined", - "privacy": "public" + "privacy": "public", + "_ui5since": "1.0.0-rc.15" }, { "kind": "field", - "name": "open", + "name": "accessibleNameRef", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Defines the open or closed state of the popover.", + "description": "Receives id(or many ids) of the elements that label the component.", + "default": "undefined", "privacy": "public", - "_ui5since": "2.0.0" + "_ui5since": "1.1.0" }, { "kind": "field", - "name": "required", + "name": "accessibleRole", "type": { - "text": "boolean" + "text": "ButtonAccessibleRole", + "references": [ + { + "name": "ButtonAccessibleRole", + "package": "@ui5/webcomponents", + "module": "dist/types/ButtonAccessibleRole.js" + } + ] }, - "default": "false", - "description": "Defines whether the component is required.", + "default": "\"Button\"", + "description": "Describes the accessibility role of the button.\n\n**Note:** Use <code>ButtonAccessibleRole.Link</code> role only with a press handler, which performs a navigation. In all other scenarios the default button semantics are recommended.", "privacy": "public", - "_ui5since": "2.1.0" + "_ui5since": "1.23" }, { "kind": "field", - "name": "accessibleName", + "name": "design", "type": { - "text": "string | undefined" + "text": "ButtonDesign", + "references": [ + { + "name": "ButtonDesign", + "package": "@ui5/webcomponents", + "module": "dist/types/ButtonDesign.js" + } + ] }, - "description": "Defines the aria-label attribute for the component.", - "default": "undefined", - "privacy": "public", - "_ui5since": "2.1.0" + "default": "\"Default\"", + "description": "Defines the component design.", + "privacy": "public" }, { "kind": "field", - "name": "accessibleNameRef", + "name": "disabled", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Receives id (or many ids) of the elements that label the component.", - "default": "undefined", - "privacy": "public", - "_ui5since": "2.1.0" + "default": "false", + "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.", + "privacy": "public" }, { "kind": "field", - "name": "accessibleDescription", + "name": "endIcon", "type": { "text": "string | undefined" }, - "description": "Defines the accessible description of the component.", + "description": "Defines the icon, displayed as graphical element within the component after the button text.\n\n**Note:** It is highly recommended to use `endIcon` property only together with `icon` and/or `text` properties.\nUsage of `endIcon` only should be avoided.\n\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": "undefined", - "privacy": "public", - "_ui5since": "2.14.0" + "privacy": "public" }, { "kind": "field", - "name": "accessibleDescriptionRef", + "name": "icon", "type": { "text": "string | undefined" }, - "description": "Receives id(or many ids) of the elements that describe the input.", + "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": "undefined", - "privacy": "public", - "_ui5since": "2.14.0" + "privacy": "public" }, { "kind": "field", - "name": "dateValue", + "name": "loading", "type": { - "text": "Date | null" + "text": "boolean" }, - "description": "Currently selected time represented as JavaScript Date instance", + "default": "false", + "description": "Defines whether the button shows a loading indicator.\n\n**Note:** If set to `true`, a busy indicator component will be displayed on the related button.", "privacy": "public", - "default": "null", - "readonly": true + "_ui5since": "2.13.0" }, { - "kind": "method", - "name": "formatValue", - "return": { - "type": { - "text": "string" - }, - "description": "formatted value" + "kind": "field", + "name": "loadingDelay", + "type": { + "text": "number" }, - "parameters": [ - { - "name": "date", - "type": { - "text": "Date" - }, - "description": "A Java Script date object to be formatted as string", - "_ui5privacy": "public" - } - ], - "description": "Formats a Java Script date object into a string representing a locale date and time\naccording to the `formatPattern` property of the TimePicker instance", - "privacy": "public" + "default": "1000", + "description": "Specifies the delay in milliseconds before the loading indicator appears within the associated button.", + "privacy": "public", + "_ui5since": "2.13.0" }, { - "kind": "method", - "name": "isValid", - "return": { - "type": { - "text": "boolean" - } + "kind": "field", + "name": "pressed", + "type": { + "text": "boolean" }, - "parameters": [ - { - "name": "value", - "type": { - "text": "string | undefined" - }, - "description": "The value to be tested against the current date format", - "_ui5privacy": "public" - } - ], - "description": "Checks if a value is valid against the current `formatPattern` value.\n\n**Note:** an empty string is considered as valid value.", + "default": "false", + "description": "Determines whether the component is displayed as pressed.", "privacy": "public" - } - ], - "events": [ + }, { - "name": "change", - "_ui5privacy": "public", + "kind": "field", + "name": "submits", "type": { - "text": "CustomEvent<TimePickerChangeEventDetail>", - "references": [ - { - "name": "TimePickerChangeEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/TimePicker.js" - } - ] + "text": "boolean" }, - "description": "Fired when the input operation has finished by clicking the \"OK\" button or\nwhen the text in the input field has changed and the focus leaves the input field.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5parameters": [ - { - "type": { - "text": "string" - }, - "name": "value", - "_ui5privacy": "public", - "description": "The submitted value." - }, - { - "type": { - "text": "boolean" - }, - "name": "valid", - "_ui5privacy": "public", - "description": "Indicator if the value is in correct format pattern and in valid range." - } - ] + "default": "false", + "description": "When set to `true`, the component will\nautomatically submit the nearest HTML form element on `press`.\n\n**Note:** This property is only applicable within the context of an HTML Form element.`", + "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\"." }, { - "name": "input", - "_ui5privacy": "public", + "kind": "field", + "name": "tooltip", "type": { - "text": "CustomEvent<TimePickerInputEventDetail>", + "text": "string | undefined" + }, + "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": "undefined", + "privacy": "public", + "_ui5since": "1.2.0" + }, + { + "kind": "field", + "name": "type", + "type": { + "text": "ButtonType", "references": [ { - "name": "TimePickerInputEventDetail", + "name": "ButtonType", "package": "@ui5/webcomponents", - "module": "dist/TimePicker.js" + "module": "dist/types/ButtonType.js" } ] }, - "description": "Fired when the value of the `ui5-time-picker` is changed at each key stroke.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5parameters": [ - { - "type": { - "text": "string" - }, - "name": "value", - "_ui5privacy": "public", - "description": "The current value." - }, - { - "type": { - "text": "boolean" - }, - "name": "valid", - "_ui5privacy": "public", - "description": "Indicator if the value is in correct format pattern and in valid range." - } - ] - }, + "default": "\"Button\"", + "description": "Defines whether the button has special form-related functionality.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", + "privacy": "public", + "_ui5since": "1.15.0" + } + ], + "attributes": [ { - "name": "open", - "_ui5privacy": "public", + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\nAccepts the following string values: `true` or `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.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n- **ariaLabel**: Defines the accessible ARIA name of the component.\nAccepts any string value.\n\n - **ariaKeyShortcuts**: Defines keyboard shortcuts that activate or give focus to the button.\n\n- **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element.\nAccepts a lowercase string value.", + "name": "accessibility-attributes", + "default": "{}", + "fieldName": "accessibilityAttributes", "type": { - "text": "CustomEvent" - }, - "description": "Fired after the value-help dialog of the component is opened.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5since": "2.0.0" + "text": "ButtonAccessibilityAttributes" + } }, { - "name": "close", - "_ui5privacy": "public", + "description": "Defines the accessible description of the component.", + "name": "accessible-description", + "default": "undefined", + "fieldName": "accessibleDescription", "type": { - "text": "CustomEvent" - }, - "description": "Fired after the value-help dialog of the component is closed.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5since": "2.0.0" - } - ], - "attributes": [ + "text": "string | undefined" + } + }, { - "description": "Defines a formatted time value.", - "name": "value", - "default": "\"\"", - "fieldName": "value", + "description": "Defines the accessible ARIA name of the component.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", "type": { - "text": "string" + "text": "string | undefined" } }, { - "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", - "name": "name", + "description": "Receives id(or many ids) of the elements that label the component.", + "name": "accessible-name-ref", "default": "undefined", - "fieldName": "name", + "fieldName": "accessibleNameRef", "type": { "text": "string | undefined" } }, { - "description": "Defines the value state of the component.", - "name": "value-state", - "default": "\"None\"", - "fieldName": "valueState", + "description": "Describes the accessibility role of the button.\n\n**Note:** Use <code>ButtonAccessibleRole.Link</code> role only with a press handler, which performs a navigation. In all other scenarios the default button semantics are recommended.", + "name": "accessible-role", + "default": "\"Button\"", + "fieldName": "accessibleRole", "type": { - "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" + "text": "\"Button\" | \"Link\"" } }, { - "description": "Defines the disabled state of the comonent.", - "name": "disabled", - "default": "false", - "fieldName": "disabled", + "description": "Defines the component design.", + "name": "design", + "default": "\"Default\"", + "fieldName": "design", "type": { - "text": "boolean" + "text": "\"Transparent\" | \"Positive\" | \"Negative\" | \"Default\" | \"Emphasized\" | \"Attention\"" } }, { - "description": "Defines the readonly state of the comonent.", - "name": "readonly", + "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.", + "name": "disabled", "default": "false", - "fieldName": "readonly", + "fieldName": "disabled", "type": { "text": "boolean" } }, { - "description": "Defines a short hint, intended to aid the user with data entry when the\ncomponent has no value.\n\n**Note:** When no placeholder is set, the format pattern is displayed as a placeholder.\nPassing an empty string as the value of this property will make the component appear empty - without placeholder or format pattern.", - "name": "placeholder", + "description": "Defines the icon, displayed as graphical element within the component after the button text.\n\n**Note:** It is highly recommended to use `endIcon` property only together with `icon` and/or `text` properties.\nUsage of `endIcon` only should be avoided.\n\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).", + "name": "end-icon", "default": "undefined", - "fieldName": "placeholder", + "fieldName": "endIcon", "type": { "text": "string | undefined" } }, { - "description": "Determines the format, displayed in the input field.\n\nExample:\nHH:mm:ss -> 11:42:35\nhh:mm:ss a -> 2:23:15 PM\nmm:ss -> 12:04 (only minutes and seconds)", - "name": "format-pattern", + "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).", + "name": "icon", "default": "undefined", - "fieldName": "formatPattern", + "fieldName": "icon", "type": { "text": "string | undefined" } }, { - "description": "Defines the open or closed state of the popover.", - "name": "open", - "default": "false", - "fieldName": "open", - "type": { - "text": "boolean" - } - }, - { - "description": "Defines whether the component is required.", - "name": "required", + "description": "Defines whether the button shows a loading indicator.\n\n**Note:** If set to `true`, a busy indicator component will be displayed on the related button.", + "name": "loading", "default": "false", - "fieldName": "required", + "fieldName": "loading", "type": { "text": "boolean" } }, { - "description": "Defines the aria-label attribute for the component.", - "name": "accessible-name", - "default": "undefined", - "fieldName": "accessibleName", + "description": "Specifies the delay in milliseconds before the loading indicator appears within the associated button.", + "name": "loading-delay", + "default": "1000", + "fieldName": "loadingDelay", "type": { - "text": "string | undefined" + "text": "number" } }, { - "description": "Receives id (or many ids) of the elements that label the component.", - "name": "accessible-name-ref", - "default": "undefined", - "fieldName": "accessibleNameRef", + "description": "Determines whether the component is displayed as pressed.", + "name": "pressed", + "default": "false", + "fieldName": "pressed", "type": { - "text": "string | undefined" + "text": "boolean" } }, { - "description": "Defines the accessible description of the component.", - "name": "accessible-description", - "default": "undefined", - "fieldName": "accessibleDescription", + "description": "When set to `true`, the component will\nautomatically submit the nearest HTML form element on `press`.\n\n**Note:** This property is only applicable within the context of an HTML Form element.`", + "name": "submits", + "default": "false", + "fieldName": "submits", "type": { - "text": "string | undefined" - } + "text": "boolean" + }, + "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\"." }, { - "description": "Receives id(or many ids) of the elements that describe the input.", - "name": "accessible-description-ref", + "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.", + "name": "tooltip", "default": "undefined", - "fieldName": "accessibleDescriptionRef", + "fieldName": "tooltip", "type": { "text": "string | undefined" } }, { - "description": "Currently selected time represented as JavaScript Date instance", - "name": "date-value", - "default": "null", - "fieldName": "dateValue", + "description": "Defines whether the button has special form-related functionality.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", + "name": "type", + "default": "\"Button\"", + "fieldName": "type", "type": { - "text": "any" + "text": "\"Button\" | \"Submit\" | \"Reset\"" } } ], "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" + "name": "Button", + "package": "@ui5/webcomponents", + "module": "dist/Button.js" }, - "tagName": "ui5-time-picker", + "tagName": "ui5-toggle-button", "customElement": true, - "_ui5since": "1.0.0-rc.6", - "_ui5privacy": "public" - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "TimePicker", - "module": "dist/TimePicker.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-time-picker", - "declaration": { - "name": "TimePicker", - "module": "dist/TimePicker.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/TimePickerClock.js", - "declarations": [], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "TimePickerClock", - "module": "dist/TimePickerClock.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/TimePickerInternals.js", - "declarations": [], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "TimePickerInternals", - "module": "dist/TimePickerInternals.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/TimeSelectionClocks.js", - "declarations": [], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "TimeSelectionClocks", - "module": "dist/TimeSelectionClocks.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/TimeSelectionInputs.js", - "declarations": [], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "TimeSelectionInputs", - "module": "dist/TimeSelectionInputs.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/Title.js", - "declarations": [ - { - "kind": "class", - "description": "### Overview\n\nThe `ui5-title` component is used to display titles inside a page.\nIt is a simple, large-sized text with explicit header/title semantics.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Title.js\";`", - "name": "Title", + "_ui5privacy": "public", "slots": [ { - "description": "Defines the text of the component.\nThis component supports nesting a `Link` component inside.\n\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.", - "name": "default", - "_ui5privacy": "public", + "name": "badge", + "description": "Adds a badge to the button.", + "_ui5since": "2.7.0", "_ui5type": { - "text": "Array<Node>" - } - } - ], - "members": [ - { - "kind": "field", - "name": "wrappingType", - "type": { - "text": "WrappingType", + "text": "Array<ButtonBadge>", "references": [ { - "name": "WrappingType", + "name": "ButtonBadge", "package": "@ui5/webcomponents", - "module": "dist/types/WrappingType.js" + "module": "dist/ButtonBadge.js" } ] }, - "default": "\"Normal\"", - "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 words will not be broken based on hyphenation.", - "privacy": "public" + "_ui5privacy": "public" }, { - "kind": "field", - "name": "level", - "type": { - "text": "TitleLevel", - "references": [ - { - "name": "TitleLevel", - "package": "@ui5/webcomponents", - "module": "dist/types/TitleLevel.js" - } - ] + "name": "default", + "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<Node>" }, - "default": "\"H2\"", - "description": "Defines the component level.\nAvailable options are: `\"H6\"` to `\"H1\"`.\nThis property does not influence the style of the component.\nUse the property `size` for this purpose instead.", - "privacy": "public" + "_ui5privacy": "public" + } + ], + "cssParts": [ + { + "description": "Used to style the native button element", + "name": "button" }, { - "kind": "field", - "name": "size", + "description": "Used to style the end icon in the native button element", + "name": "endIcon" + }, + { + "description": "Used to style the icon in the native button element", + "name": "icon" + } + ], + "events": [ + { + "name": "click", + "_ui5privacy": "public", "type": { - "text": "TitleLevel", + "text": "CustomEvent<ButtonClickEventDetail>", "references": [ { - "name": "TitleLevel", + "name": "ButtonClickEventDetail", "package": "@ui5/webcomponents", - "module": "dist/types/TitleLevel.js" + "module": "dist/Button.js" } ] }, - "default": "\"H5\"", - "description": "Defines the visual appearance of the title.\nAvailable options are: `\"H6\"` to `\"H1\"`.", - "privacy": "public" - } - ], - "attributes": [ - { - "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 words will not be broken based on hyphenation.", - "name": "wrapping-type", - "default": "\"Normal\"", - "fieldName": "wrappingType", - "type": { - "text": "\"None\" | \"Normal\"" - } - }, - { - "description": "Defines the component level.\nAvailable options are: `\"H6\"` to `\"H1\"`.\nThis property does not influence the style of the component.\nUse the property `size` for this purpose instead.", - "name": "level", - "default": "\"H2\"", - "fieldName": "level", - "type": { - "text": "\"H1\" | \"H2\" | \"H3\" | \"H4\" | \"H5\" | \"H6\"" - } - }, - { - "description": "Defines the visual appearance of the title.\nAvailable options are: `\"H6\"` to `\"H1\"`.", - "name": "size", - "default": "\"H5\"", - "fieldName": "size", - "type": { - "text": "\"H1\" | \"H2\" | \"H3\" | \"H4\" | \"H5\" | \"H6\"" - } + "description": "Fired when the component is activated either with a mouse/tap or by using the Enter or Space key.\n\n**Note:** The event will not be fired if the `disabled` property is set to `true`.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true, + "_ui5since": "2.10.0", + "_ui5parameters": [ + { + "type": { + "text": "boolean" + }, + "name": "altKey", + "_ui5privacy": "public", + "description": "Returns whether the \"ALT\" key was pressed when the event was triggered." + }, + { + "type": { + "text": "boolean" + }, + "name": "ctrlKey", + "_ui5privacy": "public", + "description": "Returns whether the \"CTRL\" key was pressed when the event was triggered." + }, + { + "type": { + "text": "boolean" + }, + "name": "metaKey", + "_ui5privacy": "public", + "description": "Returns whether the \"META\" key was pressed when the event was triggered." + }, + { + "type": { + "text": "Event" + }, + "name": "originalEvent", + "_ui5privacy": "public", + "description": "Returns original event that comes from user's **click** interaction" + }, + { + "type": { + "text": "boolean" + }, + "name": "shiftKey", + "_ui5privacy": "public", + "description": "Returns whether the \"SHIFT\" key was pressed when the event was triggered." + } + ] } - ], - "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" - }, - "tagName": "ui5-title", - "customElement": true, - "_ui5privacy": "public" + ] } ], "exports": [ @@ -27850,169 +28959,97 @@ "kind": "js", "name": "default", "declaration": { - "name": "Title", - "module": "dist/Title.js" + "name": "ToggleButton", + "module": "dist/ToggleButton.js" } }, { "kind": "custom-element-definition", - "name": "ui5-title", + "name": "ui5-toggle-button", "declaration": { - "name": "Title", - "module": "dist/Title.js" + "name": "ToggleButton", + "module": "dist/ToggleButton.js" } } ] }, { "kind": "javascript-module", - "path": "dist/Toast.js", + "path": "dist/ToggleSpinButton.js", "declarations": [ { "kind": "class", - "description": "### Overview\n\nThe `ui5-toast` is a small, non-disruptive popup for success or information messages that\ndisappears automatically after a few seconds.\n\n### Usage\n\n#### When to use:\n\n- You want to display a short success or information message.\n- You do not want to interrupt users while they are performing an action.\n- You want to confirm a successful action.\n\n#### When not to use:\n\n- You want to display error or warning message.\n- You want to interrupt users while they are performing an action.\n- You want to make sure that users read the message before they leave the page.\n- You want users to be able to copy some part of the message text.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Toast.js\";`", - "name": "Toast", - "slots": [ - { - "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.", - "name": "default", - "_ui5privacy": "public", - "_ui5type": { - "text": "Array<Node>" - } - } - ], + "description": "### Overview\n\n`ui5-toggle-spin-button` is explicitly used in the new design of `ui5-time-picker`.\nIt extends `ui5-toggle-button` with some specific accessibility-related properties in order to\nhave spin button look and feel from accessibility point of view. This component should not be used separately.", + "name": "ToggleSpinButton", "members": [ { "kind": "field", - "name": "duration", - "type": { - "text": "number" - }, - "default": "3000", - "description": "Defines the duration in milliseconds for which component\nremains on the screen before it's automatically closed.\n\n**Note:** The minimum supported value is `500` ms\nand even if a lower value is set, the duration would remain `500` ms.", - "privacy": "public" - }, - { - "kind": "field", - "name": "placement", + "name": "accessibilityAttributes", "type": { - "text": "ToastPlacement", + "text": "ButtonAccessibilityAttributes", "references": [ { - "name": "ToastPlacement", + "name": "ButtonAccessibilityAttributes", "package": "@ui5/webcomponents", - "module": "dist/types/ToastPlacement.js" + "module": "dist/Button.js" } ] }, - "default": "\"BottomCenter\"", - "description": "Defines the placement of the component.", - "privacy": "public" + "default": "{}", + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\nAccepts the following string values: `true` or `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.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n- **ariaLabel**: Defines the accessible ARIA name of the component.\nAccepts any string value.\n\n - **ariaKeyShortcuts**: Defines keyboard shortcuts that activate or give focus to the button.\n\n- **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element.\nAccepts a lowercase string value.", + "privacy": "public", + "_ui5since": "1.2.0" }, { "kind": "field", - "name": "open", + "name": "accessibleDescription", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Indicates whether the component is open (visible).", + "description": "Defines the accessible description of the component.", + "default": "undefined", "privacy": "public", - "_ui5since": "2.0.0" - } - ], - "events": [ + "_ui5since": "2.5.0" + }, { - "name": "close", - "_ui5privacy": "public", + "kind": "field", + "name": "accessibleName", "type": { - "text": "CustomEvent" + "text": "string | undefined" }, - "description": "Fired after the component is auto closed.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": false, - "_ui5since": "2.0.0" - } - ], - "attributes": [ - { - "description": "Defines the duration in milliseconds for which component\nremains on the screen before it's automatically closed.\n\n**Note:** The minimum supported value is `500` ms\nand even if a lower value is set, the duration would remain `500` ms.", - "name": "duration", - "default": "3000", - "fieldName": "duration", - "type": { - "text": "number" - } + "description": "Defines the accessible ARIA name of the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.0.0-rc.15" }, { - "description": "Defines the placement of the component.", - "name": "placement", - "default": "\"BottomCenter\"", - "fieldName": "placement", + "kind": "field", + "name": "accessibleNameRef", "type": { - "text": "\"TopStart\" | \"TopCenter\" | \"TopEnd\" | \"MiddleStart\" | \"MiddleCenter\" | \"MiddleEnd\" | \"BottomStart\" | \"BottomCenter\" | \"BottomEnd\"" - } + "text": "string | undefined" + }, + "description": "Receives id(or many ids) of the elements that label the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.1.0" }, - { - "description": "Indicates whether the component is open (visible).", - "name": "open", - "default": "false", - "fieldName": "open", - "type": { - "text": "boolean" - } - } - ], - "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" - }, - "tagName": "ui5-toast", - "customElement": true, - "_ui5since": "1.0.0-rc.6", - "_ui5privacy": "public" - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "Toast", - "module": "dist/Toast.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-toast", - "declaration": { - "name": "Toast", - "module": "dist/Toast.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/ToggleButton.js", - "declarations": [ - { - "kind": "class", - "description": "### Overview\n\nThe `ui5-toggle-button` component is an enhanced `ui5-button`\nthat can be toggled between pressed and normal states.\nUsers can use the `ui5-toggle-button` as a switch to turn a setting on or off.\nIt can also be used to represent an independent choice similar to a check box.\n\nClicking or tapping on a `ui5-toggle-button` changes its state to `pressed`. The button returns to\nits initial state when the user clicks or taps on it again.\nBy applying additional custom CSS-styling classes, apps can give a different style to any `ui5-toggle-button`.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/ToggleButton.js\";`", - "name": "ToggleButton", - "members": [ { "kind": "field", - "name": "pressed", + "name": "accessibleRole", "type": { - "text": "boolean" + "text": "ButtonAccessibleRole", + "references": [ + { + "name": "ButtonAccessibleRole", + "package": "@ui5/webcomponents", + "module": "dist/types/ButtonAccessibleRole.js" + } + ] }, - "default": "false", - "description": "Determines whether the component is displayed as pressed.", - "privacy": "public" + "default": "\"Button\"", + "description": "Describes the accessibility role of the button.\n\n**Note:** Use <code>ButtonAccessibleRole.Link</code> role only with a press handler, which performs a navigation. In all other scenarios the default button semantics are recommended.", + "privacy": "public", + "_ui5since": "1.23" }, { "kind": "field", @@ -28029,11 +29066,7 @@ }, "default": "\"Default\"", "description": "Defines the component design.", - "privacy": "public", - "inheritedFrom": { - "name": "Button", - "module": "dist/Button.js" - } + "privacy": "public" }, { "kind": "field", @@ -28043,136 +29076,81 @@ }, "default": "false", "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.", - "privacy": "public", - "inheritedFrom": { - "name": "Button", - "module": "dist/Button.js" - } + "privacy": "public" }, { "kind": "field", - "name": "icon", + "name": "endIcon", "type": { "text": "string | undefined" }, - "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).", + "description": "Defines the icon, displayed as graphical element within the component after the button text.\n\n**Note:** It is highly recommended to use `endIcon` property only together with `icon` and/or `text` properties.\nUsage of `endIcon` only should be avoided.\n\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": "undefined", - "privacy": "public", - "inheritedFrom": { - "name": "Button", - "module": "dist/Button.js" - } + "privacy": "public" }, { "kind": "field", - "name": "endIcon", + "name": "icon", "type": { "text": "string | undefined" }, - "description": "Defines the icon, displayed as graphical element within the component after the button text.\n\n**Note:** It is highly recommended to use `endIcon` property only together with `icon` and/or `text` properties.\nUsage of `endIcon` only should be avoided.\n\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).", + "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": "undefined", - "privacy": "public", - "inheritedFrom": { - "name": "Button", - "module": "dist/Button.js" - } + "privacy": "public" }, { "kind": "field", - "name": "submits", + "name": "loading", "type": { "text": "boolean" }, "default": "false", - "description": "When set to `true`, the component will\nautomatically submit the nearest HTML form element on `press`.\n\n**Note:** This property is only applicable within the context of an HTML Form element.`", - "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\".", - "inheritedFrom": { - "name": "Button", - "module": "dist/Button.js" - } - }, - { - "kind": "field", - "name": "tooltip", - "type": { - "text": "string | undefined" - }, - "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": "undefined", + "description": "Defines whether the button shows a loading indicator.\n\n**Note:** If set to `true`, a busy indicator component will be displayed on the related button.", "privacy": "public", - "_ui5since": "1.2.0", - "inheritedFrom": { - "name": "Button", - "module": "dist/Button.js" - } + "_ui5since": "2.13.0" }, { "kind": "field", - "name": "accessibleName", + "name": "loadingDelay", "type": { - "text": "string | undefined" + "text": "number" }, - "description": "Defines the accessible ARIA name of the component.", - "default": "undefined", + "default": "1000", + "description": "Specifies the delay in milliseconds before the loading indicator appears within the associated button.", "privacy": "public", - "_ui5since": "1.0.0-rc.15", - "inheritedFrom": { - "name": "Button", - "module": "dist/Button.js" - } + "_ui5since": "2.13.0" }, { "kind": "field", - "name": "accessibleNameRef", + "name": "pressed", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Receives id(or many ids) of the elements that label the component.", - "default": "undefined", - "privacy": "public", - "_ui5since": "1.1.0", - "inheritedFrom": { - "name": "Button", - "module": "dist/Button.js" - } + "default": "false", + "description": "Determines whether the component is displayed as pressed.", + "privacy": "public" }, { "kind": "field", - "name": "accessibilityAttributes", + "name": "submits", "type": { - "text": "ButtonAccessibilityAttributes", - "references": [ - { - "name": "ButtonAccessibilityAttributes", - "package": "@ui5/webcomponents", - "module": "dist/Button.js" - } - ] + "text": "boolean" }, - "default": "{}", - "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\nAccepts the following string values: `true` or `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.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n- **ariaLabel**: Defines the accessible ARIA name of the component.\nAccepts any string value.\n\n - **ariaKeyShortcuts**: Defines keyboard shortcuts that activate or give focus to the button.\n\n- **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element.\nAccepts a lowercase string value.", + "default": "false", + "description": "When set to `true`, the component will\nautomatically submit the nearest HTML form element on `press`.\n\n**Note:** This property is only applicable within the context of an HTML Form element.`", "privacy": "public", - "_ui5since": "1.2.0", - "inheritedFrom": { - "name": "Button", - "module": "dist/Button.js" - } + "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\"." }, { "kind": "field", - "name": "accessibleDescription", + "name": "tooltip", "type": { "text": "string | undefined" }, - "description": "Defines the accessible description of the component.", + "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": "undefined", "privacy": "public", - "_ui5since": "2.5.0", - "inheritedFrom": { - "name": "Button", - "module": "dist/Button.js" - } + "_ui5since": "1.2.0" }, { "kind": "field", @@ -28190,152 +29168,76 @@ "default": "\"Button\"", "description": "Defines whether the button has special form-related functionality.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", "privacy": "public", - "_ui5since": "1.15.0", - "inheritedFrom": { - "name": "Button", - "module": "dist/Button.js" - } - }, + "_ui5since": "1.15.0" + } + ], + "superclass": { + "name": "ToggleButton", + "package": "@ui5/webcomponents", + "module": "dist/ToggleButton.js" + }, + "tagName": "ui5-toggle-spin-button", + "customElement": true, + "_ui5since": "1.15.0", + "_ui5privacy": "private", + "slots": [ { - "kind": "field", - "name": "accessibleRole", - "type": { - "text": "ButtonAccessibleRole", + "name": "badge", + "description": "Adds a badge to the button.", + "_ui5since": "2.7.0", + "_ui5type": { + "text": "Array<ButtonBadge>", "references": [ { - "name": "ButtonAccessibleRole", + "name": "ButtonBadge", "package": "@ui5/webcomponents", - "module": "dist/types/ButtonAccessibleRole.js" + "module": "dist/ButtonBadge.js" } ] }, - "default": "\"Button\"", - "description": "Describes the accessibility role of the button.\n\n**Note:** Use <code>ButtonAccessibleRole.Link</code> role only with a press handler, which performs a navigation. In all other scenarios the default button semantics are recommended.", - "privacy": "public", - "_ui5since": "1.23", - "inheritedFrom": { - "name": "Button", - "module": "dist/Button.js" - } - }, - { - "kind": "field", - "name": "loading", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines whether the button shows a loading indicator.\n\n**Note:** If set to `true`, a busy indicator component will be displayed on the related button.", - "privacy": "public", - "_ui5since": "2.13.0", - "inheritedFrom": { - "name": "Button", - "module": "dist/Button.js" - } + "_ui5privacy": "public" }, { - "kind": "field", - "name": "loadingDelay", - "type": { - "text": "number" + "name": "default", + "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<Node>" }, - "default": "1000", - "description": "Specifies the delay in milliseconds before the loading indicator appears within the associated button.", - "privacy": "public", - "_ui5since": "2.13.0", - "inheritedFrom": { - "name": "Button", - "module": "dist/Button.js" - } + "_ui5privacy": "public" } ], - "attributes": [ - { - "description": "Determines whether the component is displayed as pressed.", - "name": "pressed", - "default": "false", - "fieldName": "pressed", - "type": { - "text": "boolean" - } - }, - { - "description": "Defines the component design.", - "name": "design", - "default": "\"Default\"", - "fieldName": "design", - "type": { - "text": "\"Transparent\" | \"Positive\" | \"Negative\" | \"Default\" | \"Emphasized\" | \"Attention\"" - }, - "inheritedFrom": { - "name": "Button", - "module": "dist/Button.js" - } - }, + "cssParts": [ { - "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.", - "name": "disabled", - "default": "false", - "fieldName": "disabled", - "type": { - "text": "boolean" - }, - "inheritedFrom": { - "name": "Button", - "module": "dist/Button.js" - } + "description": "Used to style the native button element", + "name": "button" }, { - "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).", - "name": "icon", - "default": "undefined", - "fieldName": "icon", - "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "Button", - "module": "dist/Button.js" - } + "description": "Used to style the end icon in the native button element", + "name": "endIcon" }, { - "description": "Defines the icon, displayed as graphical element within the component after the button text.\n\n**Note:** It is highly recommended to use `endIcon` property only together with `icon` and/or `text` properties.\nUsage of `endIcon` only should be avoided.\n\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).", - "name": "end-icon", - "default": "undefined", - "fieldName": "endIcon", - "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "Button", - "module": "dist/Button.js" - } - }, + "description": "Used to style the icon in the native button element", + "name": "icon" + } + ], + "attributes": [ { - "description": "When set to `true`, the component will\nautomatically submit the nearest HTML form element on `press`.\n\n**Note:** This property is only applicable within the context of an HTML Form element.`", - "name": "submits", - "default": "false", - "fieldName": "submits", + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\nAccepts the following string values: `true` or `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.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n- **ariaLabel**: Defines the accessible ARIA name of the component.\nAccepts any string value.\n\n - **ariaKeyShortcuts**: Defines keyboard shortcuts that activate or give focus to the button.\n\n- **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element.\nAccepts a lowercase string value.", + "name": "accessibility-attributes", + "default": "{}", + "fieldName": "accessibilityAttributes", "type": { - "text": "boolean" - }, - "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\".", - "inheritedFrom": { - "name": "Button", - "module": "dist/Button.js" + "text": "ButtonAccessibilityAttributes" } }, { - "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.", - "name": "tooltip", + "description": "Defines the accessible description of the component.", + "name": "accessible-description", "default": "undefined", - "fieldName": "tooltip", + "fieldName": "accessibleDescription", "type": { "text": "string | undefined" - }, - "inheritedFrom": { - "name": "Button", - "module": "dist/Button.js" } }, { @@ -28345,10 +29247,6 @@ "fieldName": "accessibleName", "type": { "text": "string | undefined" - }, - "inheritedFrom": { - "name": "Button", - "module": "dist/Button.js" } }, { @@ -28358,62 +29256,51 @@ "fieldName": "accessibleNameRef", "type": { "text": "string | undefined" - }, - "inheritedFrom": { - "name": "Button", - "module": "dist/Button.js" } }, { - "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\nAccepts the following string values: `true` or `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.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n- **ariaLabel**: Defines the accessible ARIA name of the component.\nAccepts any string value.\n\n - **ariaKeyShortcuts**: Defines keyboard shortcuts that activate or give focus to the button.\n\n- **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element.\nAccepts a lowercase string value.", - "name": "accessibility-attributes", - "default": "{}", - "fieldName": "accessibilityAttributes", + "description": "Describes the accessibility role of the button.\n\n**Note:** Use <code>ButtonAccessibleRole.Link</code> role only with a press handler, which performs a navigation. In all other scenarios the default button semantics are recommended.", + "name": "accessible-role", + "default": "\"Button\"", + "fieldName": "accessibleRole", "type": { - "text": "ButtonAccessibilityAttributes" - }, - "inheritedFrom": { - "name": "Button", - "module": "dist/Button.js" + "text": "\"Button\" | \"Link\"" } }, { - "description": "Defines the accessible description of the component.", - "name": "accessible-description", - "default": "undefined", - "fieldName": "accessibleDescription", + "description": "Defines the component design.", + "name": "design", + "default": "\"Default\"", + "fieldName": "design", "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "Button", - "module": "dist/Button.js" + "text": "\"Transparent\" | \"Positive\" | \"Negative\" | \"Default\" | \"Emphasized\" | \"Attention\"" } }, { - "description": "Defines whether the button has special form-related functionality.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", - "name": "type", - "default": "\"Button\"", - "fieldName": "type", + "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.", + "name": "disabled", + "default": "false", + "fieldName": "disabled", "type": { - "text": "\"Button\" | \"Submit\" | \"Reset\"" - }, - "inheritedFrom": { - "name": "Button", - "module": "dist/Button.js" + "text": "boolean" } }, { - "description": "Describes the accessibility role of the button.\n\n**Note:** Use <code>ButtonAccessibleRole.Link</code> role only with a press handler, which performs a navigation. In all other scenarios the default button semantics are recommended.", - "name": "accessible-role", - "default": "\"Button\"", - "fieldName": "accessibleRole", + "description": "Defines the icon, displayed as graphical element within the component after the button text.\n\n**Note:** It is highly recommended to use `endIcon` property only together with `icon` and/or `text` properties.\nUsage of `endIcon` only should be avoided.\n\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).", + "name": "end-icon", + "default": "undefined", + "fieldName": "endIcon", "type": { - "text": "\"Button\" | \"Link\"" - }, - "inheritedFrom": { - "name": "Button", - "module": "dist/Button.js" + "text": "string | undefined" + } + }, + { + "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).", + "name": "icon", + "default": "undefined", + "fieldName": "icon", + "type": { + "text": "string | undefined" } }, { @@ -28423,10 +29310,6 @@ "fieldName": "loading", "type": { "text": "boolean" - }, - "inheritedFrom": { - "name": "Button", - "module": "dist/Button.js" } }, { @@ -28436,79 +29319,43 @@ "fieldName": "loadingDelay", "type": { "text": "number" - }, - "inheritedFrom": { - "name": "Button", - "module": "dist/Button.js" } - } - ], - "superclass": { - "name": "Button", - "package": "@ui5/webcomponents", - "module": "dist/Button.js" - }, - "tagName": "ui5-toggle-button", - "customElement": true, - "_ui5privacy": "public", - "slots": [ + }, { - "name": "default", - "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<Node>" - }, - "_ui5privacy": "public", - "inheritedFrom": { - "name": "Button", - "module": "dist/Button.js" + "description": "Determines whether the component is displayed as pressed.", + "name": "pressed", + "default": "false", + "fieldName": "pressed", + "type": { + "text": "boolean" } }, { - "name": "badge", - "description": "Adds a badge to the button.", - "_ui5since": "2.7.0", - "_ui5type": { - "text": "Array<ButtonBadge>", - "references": [ - { - "name": "ButtonBadge", - "package": "@ui5/webcomponents", - "module": "dist/ButtonBadge.js" - } - ] + "description": "When set to `true`, the component will\nautomatically submit the nearest HTML form element on `press`.\n\n**Note:** This property is only applicable within the context of an HTML Form element.`", + "name": "submits", + "default": "false", + "fieldName": "submits", + "type": { + "text": "boolean" }, - "_ui5privacy": "public", - "inheritedFrom": { - "name": "Button", - "module": "dist/Button.js" - } - } - ], - "cssParts": [ - { - "description": "Used to style the native button element", - "name": "button", - "inheritedFrom": { - "name": "Button", - "module": "dist/Button.js" - } + "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\"." }, { - "description": "Used to style the icon in the native button element", - "name": "icon", - "inheritedFrom": { - "name": "Button", - "module": "dist/Button.js" + "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.", + "name": "tooltip", + "default": "undefined", + "fieldName": "tooltip", + "type": { + "text": "string | undefined" } }, { - "description": "Used to style the end icon in the native button element", - "name": "endIcon", - "inheritedFrom": { - "name": "Button", - "module": "dist/Button.js" + "description": "Defines whether the button has special form-related functionality.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", + "name": "type", + "default": "\"Button\"", + "fieldName": "type", + "type": { + "text": "\"Button\" | \"Submit\" | \"Reset\"" } } ], @@ -28532,14 +29379,6 @@ "_ui5Bubbles": true, "_ui5since": "2.10.0", "_ui5parameters": [ - { - "type": { - "text": "Event" - }, - "name": "originalEvent", - "_ui5privacy": "public", - "description": "Returns original event that comes from user's **click** interaction" - }, { "type": { "text": "boolean" @@ -28564,6 +29403,14 @@ "_ui5privacy": "public", "description": "Returns whether the \"META\" key was pressed when the event was triggered." }, + { + "type": { + "text": "Event" + }, + "name": "originalEvent", + "_ui5privacy": "public", + "description": "Returns original event that comes from user's **click** interaction" + }, { "type": { "text": "boolean" @@ -28572,11 +29419,7 @@ "_ui5privacy": "public", "description": "Returns whether the \"SHIFT\" key was pressed when the event was triggered." } - ], - "inheritedFrom": { - "name": "Button", - "module": "dist/Button.js" - } + ] } ] } @@ -28586,28 +29429,13 @@ "kind": "js", "name": "default", "declaration": { - "name": "ToggleButton", - "module": "dist/ToggleButton.js" + "name": "ToggleSpinButton", + "module": "dist/ToggleSpinButton.js" } }, { "kind": "custom-element-definition", - "name": "ui5-toggle-button", - "declaration": { - "name": "ToggleButton", - "module": "dist/ToggleButton.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/ToggleSpinButton.js", - "declarations": [], - "exports": [ - { - "kind": "js", - "name": "default", + "name": "ui5-toggle-spin-button", "declaration": { "name": "ToggleSpinButton", "module": "dist/ToggleSpinButton.js" @@ -28644,35 +29472,26 @@ "members": [ { "kind": "field", - "name": "text", + "name": "selected", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Defines the text of the token.", - "default": "undefined", + "default": "false", + "description": "Defines whether the component is selected or not.", "privacy": "public" }, { "kind": "field", - "name": "selected", + "name": "text", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Defines whether the component is selected or not.", + "description": "Defines the text of the token.", + "default": "undefined", "privacy": "public" } ], "attributes": [ - { - "description": "Defines the text of the token.", - "name": "text", - "default": "undefined", - "fieldName": "text", - "type": { - "text": "string | undefined" - } - }, { "description": "Defines whether the component is selected or not.", "name": "selected", @@ -28681,6 +29500,15 @@ "type": { "text": "boolean" } + }, + { + "description": "Defines the text of the token.", + "name": "text", + "default": "undefined", + "fieldName": "text", + "type": { + "text": "string | undefined" + } } ], "superclass": { @@ -28749,148 +29577,166 @@ "members": [ { "kind": "field", - "name": "readonly", + "name": "accessibleName", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "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.", + "description": "Defines the accessible ARIA name of the component.", + "default": "undefined", "privacy": "public" }, { "kind": "field", - "name": "multiLine", + "name": "accessibleNameRef", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Defines whether tokens are displayed on multiple lines.\n\n**Note:** The `multiLine` property is in an experimental state and is a subject to change.", - "privacy": "public", - "_ui5since": "2.5.0" + "description": "Receives id(or many ids) of the elements that label the component.", + "default": "undefined", + "privacy": "public" }, { "kind": "field", - "name": "name", + "name": "disabled", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.\n**Note:** When the component is used inside a form element,\nthe value is sent as the first element in the form data, even if it's empty.", - "default": "undefined", + "default": "false", + "description": "Defines whether the component is disabled.\n\n**Note:** A disabled component is completely noninteractive.", "privacy": "public" }, { "kind": "field", - "name": "showClearAll", + "name": "multiLine", "type": { "text": "boolean" }, "default": "false", - "description": "Defines whether \"Clear All\" button is present. Ensure `multiLine` is enabled, otherwise `showClearAll` will have no effect.\n\n**Note:** The `showClearAll` property is in an experimental state and is a subject to change.", + "description": "Defines whether tokens are displayed on multiple lines.\n\n**Note:** The `multiLine` property is in an experimental state and is a subject to change.", "privacy": "public", "_ui5since": "2.5.0" }, { "kind": "field", - "name": "disabled", + "name": "name", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Defines whether the component is disabled.\n\n**Note:** A disabled component is completely noninteractive.", + "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.\n**Note:** When the component is used inside a form element,\nthe value is sent as the first element in the form data, even if it's empty.", + "default": "undefined", "privacy": "public" }, { "kind": "field", - "name": "accessibleName", + "name": "readonly", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Defines the accessible ARIA name of the component.", - "default": "undefined", + "default": "false", + "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.", "privacy": "public" }, { "kind": "field", - "name": "accessibleNameRef", + "name": "showClearAll", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Receives id(or many ids) of the elements that label the component.", - "default": "undefined", - "privacy": "public" + "default": "false", + "description": "Defines whether \"Clear All\" button is present. Ensure `multiLine` is enabled, otherwise `showClearAll` will have no effect.\n\n**Note:** The `showClearAll` property is in an experimental state and is a subject to change.", + "privacy": "public", + "_ui5since": "2.5.0" } ], "events": [ { - "name": "token-delete", + "name": "selection-change", "_ui5privacy": "public", "type": { - "text": "CustomEvent<TokenizerTokenDeleteEventDetail>", + "text": "CustomEvent<TokenizerSelectionChangeEventDetail>", "references": [ { - "name": "TokenizerTokenDeleteEventDetail", + "name": "TokenizerSelectionChangeEventDetail", "package": "@ui5/webcomponents", "module": "dist/Tokenizer.js" } ] }, - "description": "Fired when tokens are being deleted (delete icon, delete or backspace is pressed)", + "description": "Fired when token selection is changed by user interaction", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, "_ui5Bubbles": true, "_ui5parameters": [ { "type": { - "text": "Array" + "text": "Array<Token>", + "references": [ + { + "name": "Token", + "package": "@ui5/webcomponents", + "module": "dist/Token.js" + } + ] }, "name": "tokens", "_ui5privacy": "public", - "description": "An array containing the deleted tokens." + "description": "An array of the selected items." } ] }, { - "name": "selection-change", + "name": "token-delete", "_ui5privacy": "public", "type": { - "text": "CustomEvent<TokenizerSelectionChangeEventDetail>", + "text": "CustomEvent<TokenizerTokenDeleteEventDetail>", "references": [ { - "name": "TokenizerSelectionChangeEventDetail", + "name": "TokenizerTokenDeleteEventDetail", "package": "@ui5/webcomponents", "module": "dist/Tokenizer.js" } ] }, - "description": "Fired when token selection is changed by user interaction", + "description": "Fired when tokens are being deleted (delete icon, delete or backspace is pressed)", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, "_ui5Bubbles": true, "_ui5parameters": [ { "type": { - "text": "Array<Token>", - "references": [ - { - "name": "Token", - "package": "@ui5/webcomponents", - "module": "dist/Token.js" - } - ] + "text": "Array" }, "name": "tokens", "_ui5privacy": "public", - "description": "An array of the selected items." + "description": "An array containing the deleted tokens." } ] } ], "attributes": [ { - "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.", - "name": "readonly", + "description": "Defines the accessible ARIA name of the component.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Receives id(or many ids) of the elements that label the component.", + "name": "accessible-name-ref", + "default": "undefined", + "fieldName": "accessibleNameRef", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines whether the component is disabled.\n\n**Note:** A disabled component is completely noninteractive.", + "name": "disabled", "default": "false", - "fieldName": "readonly", + "fieldName": "disabled", "type": { "text": "boolean" } @@ -28914,40 +29760,22 @@ } }, { - "description": "Defines whether \"Clear All\" button is present. Ensure `multiLine` is enabled, otherwise `showClearAll` will have no effect.\n\n**Note:** The `showClearAll` property is in an experimental state and is a subject to change.", - "name": "show-clear-all", + "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.", + "name": "readonly", "default": "false", - "fieldName": "showClearAll", + "fieldName": "readonly", "type": { "text": "boolean" } }, { - "description": "Defines whether the component is disabled.\n\n**Note:** A disabled component is completely noninteractive.", - "name": "disabled", + "description": "Defines whether \"Clear All\" button is present. Ensure `multiLine` is enabled, otherwise `showClearAll` will have no effect.\n\n**Note:** The `showClearAll` property is in an experimental state and is a subject to change.", + "name": "show-clear-all", "default": "false", - "fieldName": "disabled", + "fieldName": "showClearAll", "type": { "text": "boolean" } - }, - { - "description": "Defines the accessible ARIA name of the component.", - "name": "accessible-name", - "default": "undefined", - "fieldName": "accessibleName", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Receives id(or many ids) of the elements that label the component.", - "name": "accessible-name-ref", - "default": "undefined", - "fieldName": "accessibleNameRef", - "type": { - "text": "string | undefined" - } } ], "superclass": { @@ -28995,12 +29823,12 @@ "description": "Defines the items of the component.\n\n**Note:** Currently only `ui5-toolbar-button`, `ui5-toolbar-select`, `ui5-toolbar-separator` and `ui5-toolbar-spacer` are allowed here.", "_ui5propertyName": "items", "_ui5type": { - "text": "Array<ToolbarItem>", + "text": "Array<ToolbarItemBase>", "references": [ { - "name": "ToolbarItem", + "name": "ToolbarItemBase", "package": "@ui5/webcomponents", - "module": "dist/ToolbarItem.js" + "module": "dist/ToolbarItemBase.js" } ] }, @@ -29008,23 +29836,6 @@ } ], "members": [ - { - "kind": "field", - "name": "alignContent", - "type": { - "text": "ToolbarAlign", - "references": [ - { - "name": "ToolbarAlign", - "package": "@ui5/webcomponents", - "module": "dist/types/ToolbarAlign.js" - } - ] - }, - "default": "\"End\"", - "description": "Indicated the direction in which the Toolbar items will be aligned.", - "privacy": "public" - }, { "kind": "field", "name": "accessibleName", @@ -29045,6 +29856,23 @@ "default": "undefined", "privacy": "public" }, + { + "kind": "field", + "name": "alignContent", + "type": { + "text": "ToolbarAlign", + "references": [ + { + "name": "ToolbarAlign", + "package": "@ui5/webcomponents", + "module": "dist/types/ToolbarAlign.js" + } + ] + }, + "default": "\"End\"", + "description": "Indicated the direction in which the Toolbar items will be aligned.", + "privacy": "public" + }, { "kind": "field", "name": "design", @@ -29076,15 +29904,6 @@ } ], "attributes": [ - { - "description": "Indicated the direction in which the Toolbar items will be aligned.", - "name": "align-content", - "default": "\"End\"", - "fieldName": "alignContent", - "type": { - "text": "\"Start\" | \"End\"" - } - }, { "description": "Defines the accessible ARIA name of the component.", "name": "accessible-name", @@ -29103,6 +29922,15 @@ "text": "string | undefined" } }, + { + "description": "Indicated the direction in which the Toolbar items will be aligned.", + "name": "align-content", + "default": "\"End\"", + "fieldName": "alignContent", + "type": { + "text": "\"Start\" | \"End\"" + } + }, { "description": "Defines the toolbar design.", "name": "design", @@ -29154,107 +29982,114 @@ "members": [ { "kind": "field", - "name": "disabled", - "type": { - "text": "boolean" - }, - "default": "false", - "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.", - "privacy": "public" - }, - { - "kind": "field", - "name": "design", + "name": "accessibilityAttributes", "type": { - "text": "ButtonDesign", + "text": "ToolbarButtonAccessibilityAttributes", "references": [ { - "name": "ButtonDesign", + "name": "ToolbarButtonAccessibilityAttributes", "package": "@ui5/webcomponents", - "module": "dist/types/ButtonDesign.js" + "module": "dist/ToolbarButton.js" } ] }, - "default": "\"Default\"", - "description": "Defines the action design.", + "default": "{}", + "description": "Defines the additional accessibility attributes that will be applied to the component.\n\nThe following fields are supported:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\nAccepts the following string values: `true` or `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.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n- **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element.\nAccepts a lowercase string value.", "privacy": "public" }, { "kind": "field", - "name": "icon", + "name": "accessibleName", "type": { "text": "string | undefined" }, - "description": "Defines the `icon` source URI.\n\n**Note:** SAP-icons font provides numerous buil-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).", + "description": "Defines the accessible ARIA name of the component.", "default": "undefined", "privacy": "public" }, { "kind": "field", - "name": "endIcon", + "name": "accessibleNameRef", "type": { "text": "string | undefined" }, - "description": "Defines the icon, displayed as graphical element within the component after the button text.\n\n**Note:** It is highly recommended to use `endIcon` property only together with `icon` and/or `text` properties.\nUsage of `endIcon` only should be avoided.\n\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).", + "description": "Receives id(or many ids) of the elements that label the component.", "default": "undefined", "privacy": "public" }, { "kind": "field", - "name": "tooltip", + "name": "design", "type": { - "text": "string | undefined" + "text": "ButtonDesign", + "references": [ + { + "name": "ButtonDesign", + "package": "@ui5/webcomponents", + "module": "dist/types/ButtonDesign.js" + } + ] }, - "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": "undefined", + "default": "\"Default\"", + "description": "Defines the action design.", "privacy": "public" }, { "kind": "field", - "name": "accessibleName", + "name": "disabled", + "type": { + "text": "boolean" + }, + "default": "false", + "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.", + "privacy": "public" + }, + { + "kind": "field", + "name": "endIcon", "type": { "text": "string | undefined" }, - "description": "Defines the accessible ARIA name of the component.", + "description": "Defines the icon, displayed as graphical element within the component after the button text.\n\n**Note:** It is highly recommended to use `endIcon` property only together with `icon` and/or `text` properties.\nUsage of `endIcon` only should be avoided.\n\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": "undefined", "privacy": "public" }, { "kind": "field", - "name": "accessibleNameRef", + "name": "icon", "type": { "text": "string | undefined" }, - "description": "Receives id(or many ids) of the elements that label the component.", + "description": "Defines the `icon` source URI.\n\n**Note:** SAP-icons font provides numerous buil-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": "undefined", "privacy": "public" }, { "kind": "field", - "name": "accessibilityAttributes", + "name": "overflowPriority", "type": { - "text": "ToolbarButtonAccessibilityAttributes", + "text": "ToolbarItemOverflowBehavior", "references": [ { - "name": "ToolbarButtonAccessibilityAttributes", + "name": "ToolbarItemOverflowBehavior", "package": "@ui5/webcomponents", - "module": "dist/ToolbarButton.js" + "module": "dist/types/ToolbarItemOverflowBehavior.js" } ] }, - "default": "{}", - "description": "Defines the additional accessibility attributes that will be applied to the component.\n\nThe following fields are supported:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\nAccepts the following string values: `true` or `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.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n- **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element.\nAccepts a lowercase string value.", + "default": "\"Default\"", + "description": "Property used to define the access of the item to the overflow Popover. If \"NeverOverflow\" option is set,\nthe item never goes in the Popover, if \"AlwaysOverflow\" - it never comes out of it.", "privacy": "public" }, { "kind": "field", - "name": "text", + "name": "preventOverflowClosing", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Button text", - "privacy": "public", - "default": "undefined" + "default": "false", + "description": "Defines if the toolbar overflow popup should close upon interaction with the item.\nIt will close by default.", + "privacy": "public" }, { "kind": "field", @@ -29269,48 +30104,33 @@ }, { "kind": "field", - "name": "width", + "name": "text", "type": { "text": "string | undefined" }, - "description": "Defines the width of the button.\n\n**Note:** all CSS sizes are supported - 'percentage', 'px', 'rem', 'auto', etc.", - "default": "undefined", - "privacy": "public" + "description": "Button text", + "privacy": "public", + "default": "undefined" }, { "kind": "field", - "name": "overflowPriority", + "name": "tooltip", "type": { - "text": "ToolbarItemOverflowBehavior", - "references": [ - { - "name": "ToolbarItemOverflowBehavior", - "package": "@ui5/webcomponents", - "module": "dist/types/ToolbarItemOverflowBehavior.js" - } - ] + "text": "string | undefined" }, - "default": "\"Default\"", - "description": "Property used to define the access of the item to the overflow Popover. If \"NeverOverflow\" option is set,\nthe item never goes in the Popover, if \"AlwaysOverflow\" - it never comes out of it.", - "privacy": "public", - "inheritedFrom": { - "name": "ToolbarItem", - "module": "dist/ToolbarItem.js" - } + "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": "undefined", + "privacy": "public" }, { "kind": "field", - "name": "preventOverflowClosing", + "name": "width", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Defines if the toolbar overflow popup should close upon intereaction with the item.\nIt will close by default.", - "privacy": "public", - "inheritedFrom": { - "name": "ToolbarItem", - "module": "dist/ToolbarItem.js" - } + "description": "Defines the width of the button.\n\n**Note:** all CSS sizes are supported - 'percentage', 'px', 'rem', 'auto', etc.", + "default": "undefined", + "privacy": "public" } ], "events": [ @@ -29328,12 +30148,30 @@ ], "attributes": [ { - "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.", - "name": "disabled", - "default": "false", - "fieldName": "disabled", + "description": "Defines the additional accessibility attributes that will be applied to the component.\n\nThe following fields are supported:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\nAccepts the following string values: `true` or `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.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n- **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element.\nAccepts a lowercase string value.", + "name": "accessibility-attributes", + "default": "{}", + "fieldName": "accessibilityAttributes", "type": { - "text": "boolean" + "text": "ButtonAccessibilityAttributes" + } + }, + { + "description": "Defines the accessible ARIA name of the component.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Receives id(or many ids) of the elements that label the component.", + "name": "accessible-name-ref", + "default": "undefined", + "fieldName": "accessibleNameRef", + "type": { + "text": "string | undefined" } }, { @@ -29346,12 +30184,12 @@ } }, { - "description": "Defines the `icon` source URI.\n\n**Note:** SAP-icons font provides numerous buil-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).", - "name": "icon", - "default": "undefined", - "fieldName": "icon", + "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.", + "name": "disabled", + "default": "false", + "fieldName": "disabled", "type": { - "text": "string | undefined" + "text": "boolean" } }, { @@ -29364,39 +30202,39 @@ } }, { - "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.", - "name": "tooltip", + "description": "Defines the `icon` source URI.\n\n**Note:** SAP-icons font provides numerous buil-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).", + "name": "icon", "default": "undefined", - "fieldName": "tooltip", + "fieldName": "icon", "type": { "text": "string | undefined" } }, { - "description": "Defines the accessible ARIA name of the component.", - "name": "accessible-name", - "default": "undefined", - "fieldName": "accessibleName", + "description": "Property used to define the access of the item to the overflow Popover. If \"NeverOverflow\" option is set,\nthe item never goes in the Popover, if \"AlwaysOverflow\" - it never comes out of it.", + "name": "overflow-priority", + "default": "\"Default\"", + "fieldName": "overflowPriority", "type": { - "text": "string | undefined" + "text": "\"Default\" | \"NeverOverflow\" | \"AlwaysOverflow\"" } }, { - "description": "Receives id(or many ids) of the elements that label the component.", - "name": "accessible-name-ref", - "default": "undefined", - "fieldName": "accessibleNameRef", + "description": "Defines if the toolbar overflow popup should close upon interaction with the item.\nIt will close by default.", + "name": "prevent-overflow-closing", + "default": "false", + "fieldName": "preventOverflowClosing", "type": { - "text": "string | undefined" + "text": "boolean" } }, { - "description": "Defines the additional accessibility attributes that will be applied to the component.\n\nThe following fields are supported:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\nAccepts the following string values: `true` or `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.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n- **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element.\nAccepts a lowercase string value.", - "name": "accessibility-attributes", - "default": "{}", - "fieldName": "accessibilityAttributes", + "description": "Defines whether the button text should only be displayed in the overflow popover.\n\nWhen set to `true`, the button appears as icon-only in the main toolbar,\nbut shows both icon and text when moved to the overflow popover.\n\n**Note:** This property only takes effect when the `text` property is also set.", + "name": "show-overflow-text", + "default": "false", + "fieldName": "showOverflowText", "type": { - "text": "ButtonAccessibilityAttributes" + "text": "boolean" } }, { @@ -29409,12 +30247,12 @@ } }, { - "description": "Defines whether the button text should only be displayed in the overflow popover.\n\nWhen set to `true`, the button appears as icon-only in the main toolbar,\nbut shows both icon and text when moved to the overflow popover.\n\n**Note:** This property only takes effect when the `text` property is also set.", - "name": "show-overflow-text", - "default": "false", - "fieldName": "showOverflowText", + "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.", + "name": "tooltip", + "default": "undefined", + "fieldName": "tooltip", "type": { - "text": "boolean" + "text": "string | undefined" } }, { @@ -29425,38 +30263,12 @@ "type": { "text": "string | undefined" } - }, - { - "description": "Property used to define the access of the item to the overflow Popover. If \"NeverOverflow\" option is set,\nthe item never goes in the Popover, if \"AlwaysOverflow\" - it never comes out of it.", - "name": "overflow-priority", - "default": "\"Default\"", - "fieldName": "overflowPriority", - "type": { - "text": "\"Default\" | \"NeverOverflow\" | \"AlwaysOverflow\"" - }, - "inheritedFrom": { - "name": "ToolbarItem", - "module": "dist/ToolbarItem.js" - } - }, - { - "description": "Defines if the toolbar overflow popup should close upon intereaction with the item.\nIt will close by default.", - "name": "prevent-overflow-closing", - "default": "false", - "fieldName": "preventOverflowClosing", - "type": { - "text": "boolean" - }, - "inheritedFrom": { - "name": "ToolbarItem", - "module": "dist/ToolbarItem.js" - } } ], "superclass": { - "name": "ToolbarItem", + "name": "ToolbarItemBase", "package": "@ui5/webcomponents", - "module": "dist/ToolbarItem.js" + "module": "dist/ToolbarItemBase.js" }, "tagName": "ui5-toolbar-button", "customElement": true, @@ -29488,10 +30300,36 @@ "kind": "javascript-module", "path": "dist/ToolbarItem.js", "declarations": [ + { + "kind": "interface", + "name": "IToolbarItemContent", + "description": "Interface for the slotted item in `ui5-toolbar-item`.\n\nIt could be any HTMLElement or UI5 Web Component with option to specify custom overflow closing events and overflow behavior.", + "_ui5privacy": "public", + "_ui5since": "2.20.0" + }, { "kind": "class", - "description": "Represents an abstract class for items, used in the `ui5-toolbar`.", + "description": "### Overview\nThe `ui5-toolbar-item` is a wrapper component used to integrate UI5 Web Components into the `ui5-toolbar`.\nIt renders within the toolbar's shadow DOM and manages the lifecycle\nand overflow behavior of its child component.\n\n### Structure\nThe toolbar item wraps a single UI5 Web Component (such as CheckBox, Title, etc.) and handles:\n- Overflow management (determining if the item should be displayed in the main toolbar or overflow popover)\n- Automatic popover closing on interaction\n- CSS custom state exposure for styling based on overflow state\n\n### Usage\nThe `ui5-toolbar-item` is typically used implicitly when adding components to a toolbar,\nbut specialized wrappers like `ui5-toolbar-button` provide\ncomponent-specific functionality and should be preferred when available.", "name": "ToolbarItem", + "slots": [ + { + "name": "default", + "description": "Wrapped component slot.", + "_ui5since": "2.20.0", + "_ui5propertyName": "item", + "_ui5type": { + "text": "Array<IToolbarItemContent>", + "references": [ + { + "name": "IToolbarItemContent", + "package": "@ui5/webcomponents", + "module": "dist/ToolbarItem.js" + } + ] + }, + "_ui5privacy": "public" + } + ], "members": [ { "kind": "field", @@ -29517,10 +30355,19 @@ "text": "boolean" }, "default": "false", - "description": "Defines if the toolbar overflow popup should close upon intereaction with the item.\nIt will close by default.", + "description": "Defines if the toolbar overflow popup should close upon interaction with the item.\nIt will close by default.", "privacy": "public" } ], + "superclass": { + "name": "ToolbarItemBase", + "package": "@ui5/webcomponents", + "module": "dist/ToolbarItemBase.js" + }, + "tagName": "ui5-toolbar-item", + "customElement": true, + "_ui5since": "2.20.0", + "_ui5privacy": "public", "attributes": [ { "description": "Property used to define the access of the item to the overflow Popover. If \"NeverOverflow\" option is set,\nthe item never goes in the Popover, if \"AlwaysOverflow\" - it never comes out of it.", @@ -29532,7 +30379,85 @@ } }, { - "description": "Defines if the toolbar overflow popup should close upon intereaction with the item.\nIt will close by default.", + "description": "Defines if the toolbar overflow popup should close upon interaction with the item.\nIt will close by default.", + "name": "prevent-overflow-closing", + "default": "false", + "fieldName": "preventOverflowClosing", + "type": { + "text": "boolean" + } + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "ToolbarItem", + "module": "dist/ToolbarItem.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-toolbar-item", + "declaration": { + "name": "ToolbarItem", + "module": "dist/ToolbarItem.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/ToolbarItemBase.js", + "declarations": [ + { + "kind": "class", + "description": "Represents an abstract base class for items used in the `ui5-toolbar`.", + "name": "ToolbarItemBase", + "members": [ + { + "kind": "field", + "name": "overflowPriority", + "type": { + "text": "ToolbarItemOverflowBehavior", + "references": [ + { + "name": "ToolbarItemOverflowBehavior", + "package": "@ui5/webcomponents", + "module": "dist/types/ToolbarItemOverflowBehavior.js" + } + ] + }, + "default": "\"Default\"", + "description": "Property used to define the access of the item to the overflow Popover. If \"NeverOverflow\" option is set,\nthe item never goes in the Popover, if \"AlwaysOverflow\" - it never comes out of it.", + "privacy": "public" + }, + { + "kind": "field", + "name": "preventOverflowClosing", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines if the toolbar overflow popup should close upon interaction with the item.\nIt will close by default.", + "privacy": "public" + } + ], + "attributes": [ + { + "description": "Property used to define the access of the item to the overflow Popover. If \"NeverOverflow\" option is set,\nthe item never goes in the Popover, if \"AlwaysOverflow\" - it never comes out of it.", + "name": "overflow-priority", + "default": "\"Default\"", + "fieldName": "overflowPriority", + "type": { + "text": "\"Default\" | \"NeverOverflow\" | \"AlwaysOverflow\"" + } + }, + { + "description": "Defines if the toolbar overflow popup should close upon interaction with the item.\nIt will close by default.", "name": "prevent-overflow-closing", "default": "false", "fieldName": "preventOverflowClosing", @@ -29557,8 +30482,8 @@ "kind": "js", "name": "default", "declaration": { - "name": "ToolbarItem", - "module": "dist/ToolbarItem.js" + "name": "ToolbarItemBase", + "module": "dist/ToolbarItemBase.js" } } ] @@ -29601,29 +30526,22 @@ "members": [ { "kind": "field", - "name": "width", + "name": "accessibleName", "type": { "text": "string | undefined" }, - "description": "Defines the width of the select.\n\n**Note:** all CSS sizes are supported - 'percentage', 'px', 'rem', 'auto', etc.", - "default": "undefined", - "privacy": "public" + "description": "Defines the accessible ARIA name of the component.", + "privacy": "public", + "default": "undefined" }, { "kind": "field", - "name": "valueState", + "name": "accessibleNameRef", "type": { - "text": "ValueState", - "references": [ - { - "name": "ValueState", - "package": "@ui5/webcomponents-base", - "module": "dist/types/ValueState.js" - } - ] + "text": "string | undefined" }, - "default": "\"None\"", - "description": "Defines the value state of the component.", + "description": "Receives id(or many ids) of the elements that label the select.", + "default": "undefined", "privacy": "public" }, { @@ -29638,22 +30556,29 @@ }, { "kind": "field", - "name": "accessibleName", + "name": "overflowPriority", "type": { - "text": "string | undefined" + "text": "ToolbarItemOverflowBehavior", + "references": [ + { + "name": "ToolbarItemOverflowBehavior", + "package": "@ui5/webcomponents", + "module": "dist/types/ToolbarItemOverflowBehavior.js" + } + ] }, - "description": "Defines the accessible ARIA name of the component.", - "privacy": "public", - "default": "undefined" + "default": "\"Default\"", + "description": "Property used to define the access of the item to the overflow Popover. If \"NeverOverflow\" option is set,\nthe item never goes in the Popover, if \"AlwaysOverflow\" - it never comes out of it.", + "privacy": "public" }, { "kind": "field", - "name": "accessibleNameRef", + "name": "preventOverflowClosing", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Receives id(or many ids) of the elements that label the select.", - "default": "undefined", + "default": "false", + "description": "Defines if the toolbar overflow popup should close upon interaction with the item.\nIt will close by default.", "privacy": "public" }, { @@ -29669,38 +30594,30 @@ }, { "kind": "field", - "name": "overflowPriority", + "name": "valueState", "type": { - "text": "ToolbarItemOverflowBehavior", + "text": "ValueState", "references": [ { - "name": "ToolbarItemOverflowBehavior", - "package": "@ui5/webcomponents", - "module": "dist/types/ToolbarItemOverflowBehavior.js" + "name": "ValueState", + "package": "@ui5/webcomponents-base", + "module": "dist/types/ValueState.js" } ] }, - "default": "\"Default\"", - "description": "Property used to define the access of the item to the overflow Popover. If \"NeverOverflow\" option is set,\nthe item never goes in the Popover, if \"AlwaysOverflow\" - it never comes out of it.", - "privacy": "public", - "inheritedFrom": { - "name": "ToolbarItem", - "module": "dist/ToolbarItem.js" - } + "default": "\"None\"", + "description": "Defines the value state of the component.", + "privacy": "public" }, { "kind": "field", - "name": "preventOverflowClosing", + "name": "width", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Defines if the toolbar overflow popup should close upon intereaction with the item.\nIt will close by default.", - "privacy": "public", - "inheritedFrom": { - "name": "ToolbarItem", - "module": "dist/ToolbarItem.js" - } + "description": "Defines the width of the select.\n\n**Note:** all CSS sizes are supported - 'percentage', 'px', 'rem', 'auto', etc.", + "default": "undefined", + "privacy": "public" } ], "events": [ @@ -29733,45 +30650,45 @@ ] }, { - "name": "open", + "name": "close", "_ui5privacy": "public", "type": { "text": "CustomEvent" }, - "description": "Fired after the component's dropdown menu opens.", + "description": "Fired after the component's dropdown menu closes.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, - "_ui5Bubbles": true + "_ui5Bubbles": false }, { - "name": "close", + "name": "open", "_ui5privacy": "public", "type": { "text": "CustomEvent" }, - "description": "Fired after the component's dropdown menu closes.", + "description": "Fired after the component's dropdown menu opens.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, - "_ui5Bubbles": false + "_ui5Bubbles": true } ], "attributes": [ { - "description": "Defines the width of the select.\n\n**Note:** all CSS sizes are supported - 'percentage', 'px', 'rem', 'auto', etc.", - "name": "width", + "description": "Defines the accessible ARIA name of the component.", + "name": "accessible-name", "default": "undefined", - "fieldName": "width", + "fieldName": "accessibleName", "type": { "text": "string | undefined" } }, { - "description": "Defines the value state of the component.", - "name": "value-state", - "default": "\"None\"", - "fieldName": "valueState", + "description": "Receives id(or many ids) of the elements that label the select.", + "name": "accessible-name-ref", + "default": "undefined", + "fieldName": "accessibleNameRef", "type": { - "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" + "text": "string | undefined" } }, { @@ -29784,21 +30701,21 @@ } }, { - "description": "Defines the accessible ARIA name of the component.", - "name": "accessible-name", - "default": "undefined", - "fieldName": "accessibleName", + "description": "Property used to define the access of the item to the overflow Popover. If \"NeverOverflow\" option is set,\nthe item never goes in the Popover, if \"AlwaysOverflow\" - it never comes out of it.", + "name": "overflow-priority", + "default": "\"Default\"", + "fieldName": "overflowPriority", "type": { - "text": "string | undefined" + "text": "\"Default\" | \"NeverOverflow\" | \"AlwaysOverflow\"" } }, { - "description": "Receives id(or many ids) of the elements that label the select.", - "name": "accessible-name-ref", - "default": "undefined", - "fieldName": "accessibleNameRef", + "description": "Defines if the toolbar overflow popup should close upon interaction with the item.\nIt will close by default.", + "name": "prevent-overflow-closing", + "default": "false", + "fieldName": "preventOverflowClosing", "type": { - "text": "string | undefined" + "text": "boolean" } }, { @@ -29811,36 +30728,28 @@ } }, { - "description": "Property used to define the access of the item to the overflow Popover. If \"NeverOverflow\" option is set,\nthe item never goes in the Popover, if \"AlwaysOverflow\" - it never comes out of it.", - "name": "overflow-priority", - "default": "\"Default\"", - "fieldName": "overflowPriority", + "description": "Defines the value state of the component.", + "name": "value-state", + "default": "\"None\"", + "fieldName": "valueState", "type": { - "text": "\"Default\" | \"NeverOverflow\" | \"AlwaysOverflow\"" - }, - "inheritedFrom": { - "name": "ToolbarItem", - "module": "dist/ToolbarItem.js" + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" } }, { - "description": "Defines if the toolbar overflow popup should close upon intereaction with the item.\nIt will close by default.", - "name": "prevent-overflow-closing", - "default": "false", - "fieldName": "preventOverflowClosing", + "description": "Defines the width of the select.\n\n**Note:** all CSS sizes are supported - 'percentage', 'px', 'rem', 'auto', etc.", + "name": "width", + "default": "undefined", + "fieldName": "width", "type": { - "text": "boolean" - }, - "inheritedFrom": { - "name": "ToolbarItem", - "module": "dist/ToolbarItem.js" + "text": "string | undefined" } } ], "superclass": { - "name": "ToolbarItem", + "name": "ToolbarItemBase", "package": "@ui5/webcomponents", - "module": "dist/ToolbarItem.js" + "module": "dist/ToolbarItemBase.js" }, "tagName": "ui5-toolbar-select", "customElement": true, @@ -29965,11 +30874,7 @@ }, "default": "\"Default\"", "description": "Property used to define the access of the item to the overflow Popover. If \"NeverOverflow\" option is set,\nthe item never goes in the Popover, if \"AlwaysOverflow\" - it never comes out of it.", - "privacy": "public", - "inheritedFrom": { - "name": "ToolbarItem", - "module": "dist/ToolbarItem.js" - } + "privacy": "public" }, { "kind": "field", @@ -29978,18 +30883,14 @@ "text": "boolean" }, "default": "false", - "description": "Defines if the toolbar overflow popup should close upon intereaction with the item.\nIt will close by default.", - "privacy": "public", - "inheritedFrom": { - "name": "ToolbarItem", - "module": "dist/ToolbarItem.js" - } + "description": "Defines if the toolbar overflow popup should close upon interaction with the item.\nIt will close by default.", + "privacy": "public" } ], "superclass": { - "name": "ToolbarItem", + "name": "ToolbarItemBase", "package": "@ui5/webcomponents", - "module": "dist/ToolbarItem.js" + "module": "dist/ToolbarItemBase.js" }, "tagName": "ui5-toolbar-separator", "customElement": true, @@ -30004,23 +30905,15 @@ "fieldName": "overflowPriority", "type": { "text": "\"Default\" | \"NeverOverflow\" | \"AlwaysOverflow\"" - }, - "inheritedFrom": { - "name": "ToolbarItem", - "module": "dist/ToolbarItem.js" } }, { - "description": "Defines if the toolbar overflow popup should close upon intereaction with the item.\nIt will close by default.", + "description": "Defines if the toolbar overflow popup should close upon interaction with the item.\nIt will close by default.", "name": "prevent-overflow-closing", "default": "false", "fieldName": "preventOverflowClosing", "type": { "text": "boolean" - }, - "inheritedFrom": { - "name": "ToolbarItem", - "module": "dist/ToolbarItem.js" } } ] @@ -30054,16 +30947,6 @@ "description": "### Overview\nThe `ui5-toolbar-spacer` is an element, used for taking needed space for toolbar items to take 100% width.\nIt takes no space in calculating toolbar items width.", "name": "ToolbarSpacer", "members": [ - { - "kind": "field", - "name": "width", - "type": { - "text": "string | undefined" - }, - "description": "Defines the width of the spacer.\n\n**Note:** all CSS sizes are supported - 'percentage', 'px', 'rem', 'auto', etc.", - "privacy": "public", - "default": "undefined" - }, { "kind": "field", "name": "overflowPriority", @@ -30079,11 +30962,7 @@ }, "default": "\"Default\"", "description": "Property used to define the access of the item to the overflow Popover. If \"NeverOverflow\" option is set,\nthe item never goes in the Popover, if \"AlwaysOverflow\" - it never comes out of it.", - "privacy": "public", - "inheritedFrom": { - "name": "ToolbarItem", - "module": "dist/ToolbarItem.js" - } + "privacy": "public" }, { "kind": "field", @@ -30092,24 +30971,21 @@ "text": "boolean" }, "default": "false", - "description": "Defines if the toolbar overflow popup should close upon intereaction with the item.\nIt will close by default.", - "privacy": "public", - "inheritedFrom": { - "name": "ToolbarItem", - "module": "dist/ToolbarItem.js" - } - } - ], - "attributes": [ + "description": "Defines if the toolbar overflow popup should close upon interaction with the item.\nIt will close by default.", + "privacy": "public" + }, { - "description": "Defines the width of the spacer.\n\n**Note:** all CSS sizes are supported - 'percentage', 'px', 'rem', 'auto', etc.", + "kind": "field", "name": "width", - "default": "undefined", - "fieldName": "width", "type": { "text": "string | undefined" - } - }, + }, + "description": "Defines the width of the spacer.\n\n**Note:** all CSS sizes are supported - 'percentage', 'px', 'rem', 'auto', etc.", + "privacy": "public", + "default": "undefined" + } + ], + "attributes": [ { "description": "Property used to define the access of the item to the overflow Popover. If \"NeverOverflow\" option is set,\nthe item never goes in the Popover, if \"AlwaysOverflow\" - it never comes out of it.", "name": "overflow-priority", @@ -30117,30 +30993,31 @@ "fieldName": "overflowPriority", "type": { "text": "\"Default\" | \"NeverOverflow\" | \"AlwaysOverflow\"" - }, - "inheritedFrom": { - "name": "ToolbarItem", - "module": "dist/ToolbarItem.js" } }, { - "description": "Defines if the toolbar overflow popup should close upon intereaction with the item.\nIt will close by default.", + "description": "Defines if the toolbar overflow popup should close upon interaction with the item.\nIt will close by default.", "name": "prevent-overflow-closing", "default": "false", "fieldName": "preventOverflowClosing", "type": { "text": "boolean" - }, - "inheritedFrom": { - "name": "ToolbarItem", - "module": "dist/ToolbarItem.js" + } + }, + { + "description": "Defines the width of the spacer.\n\n**Note:** all CSS sizes are supported - 'percentage', 'px', 'rem', 'auto', etc.", + "name": "width", + "default": "undefined", + "fieldName": "width", + "type": { + "text": "string | undefined" } } ], "superclass": { - "name": "ToolbarItem", + "name": "ToolbarItemBase", "package": "@ui5/webcomponents", - "module": "dist/ToolbarItem.js" + "module": "dist/ToolbarItemBase.js" }, "tagName": "ui5-toolbar-spacer", "customElement": true, @@ -30191,64 +31068,39 @@ } ] }, - "_ui5privacy": "public" - }, - { - "name": "header", - "description": "Defines the component header.\n\n**Note:** When the `header` slot is set, the\n`headerText` property is ignored.", - "_ui5type": { - "text": "Array<HTMLElement>" - }, - "_ui5privacy": "public" - } - ], - "members": [ - { - "kind": "field", - "name": "selectionMode", - "type": { - "text": "ListSelectionMode | undefined", - "references": [ - { - "name": "ListSelectionMode", - "package": "@ui5/webcomponents", - "module": "dist/types/ListSelectionMode.js" - } - ] - }, - "default": "\"None\"", - "description": "Defines the selection mode of the component. Since the tree uses a `ui5-list` to display its structure,\nthe tree modes are exactly the same as the list modes, and are all applicable.", - "privacy": "public" + "_ui5privacy": "public" }, { - "kind": "field", - "name": "noDataText", - "type": { - "text": "string | undefined" + "name": "header", + "description": "Defines the component header.\n\n**Note:** When the `header` slot is set, the\n`headerText` property is ignored.", + "_ui5type": { + "text": "Array<HTMLElement>" }, - "description": "Defines the text that is displayed when the component contains no items.", - "default": "undefined", - "privacy": "public" - }, + "_ui5privacy": "public" + } + ], + "members": [ { "kind": "field", - "name": "headerText", + "name": "accessibleDescription", "type": { "text": "string | undefined" }, - "description": "Defines the component header text.\n\n**Note:** If the `header` slot is set, this property is ignored.", + "description": "Defines the accessible description of the component.", "default": "undefined", - "privacy": "public" + "privacy": "public", + "_ui5since": "2.5.0" }, { "kind": "field", - "name": "footerText", + "name": "accessibleDescriptionRef", "type": { "text": "string | undefined" }, - "description": "Defines the component footer text.", + "description": "Defines the IDs of the elements that describe the component.", "default": "undefined", - "privacy": "public" + "privacy": "public", + "_ui5since": "2.5.0" }, { "kind": "field", @@ -30274,25 +31126,50 @@ }, { "kind": "field", - "name": "accessibleDescription", + "name": "footerText", "type": { "text": "string | undefined" }, - "description": "Defines the accessible description of the component.", + "description": "Defines the component footer text.", "default": "undefined", - "privacy": "public", - "_ui5since": "2.5.0" + "privacy": "public" }, { "kind": "field", - "name": "accessibleDescriptionRef", + "name": "headerText", "type": { "text": "string | undefined" }, - "description": "Defines the IDs of the elements that describe the component.", + "description": "Defines the component header text.\n\n**Note:** If the `header` slot is set, this property is ignored.", "default": "undefined", - "privacy": "public", - "_ui5since": "2.5.0" + "privacy": "public" + }, + { + "kind": "field", + "name": "noDataText", + "type": { + "text": "string | undefined" + }, + "description": "Defines the text that is displayed when the component contains no items.", + "default": "undefined", + "privacy": "public" + }, + { + "kind": "field", + "name": "selectionMode", + "type": { + "text": "ListSelectionMode | undefined", + "references": [ + { + "name": "ListSelectionMode", + "package": "@ui5/webcomponents", + "module": "dist/types/ListSelectionMode.js" + } + ] + }, + "default": "\"None\"", + "description": "Defines the selection mode of the component. Since the tree uses a `ui5-list` to display its structure,\nthe tree modes are exactly the same as the list modes, and are all applicable.", + "privacy": "public" }, { "kind": "method", @@ -30325,19 +31202,19 @@ ], "events": [ { - "name": "item-toggle", + "name": "item-click", "_ui5privacy": "public", "type": { - "text": "CustomEvent<TreeItemToggleEventDetail>", + "text": "CustomEvent<TreeItemClickEventDetail>", "references": [ { - "name": "TreeItemToggleEventDetail", + "name": "TreeItemClickEventDetail", "package": "@ui5/webcomponents", "module": "dist/Tree.js" } ] }, - "description": "Fired when a tree item is expanded or collapsed.\n\n**Note:** You can call `preventDefault()` on the event object to suppress the event, if needed.\nThis may be handy for example if you want to dynamically load tree items upon the user expanding a node.\nEven if you prevented the event's default behavior, you can always manually call `toggle()` on a tree item.", + "description": "Fired when a tree item is activated.", "_ui5Cancelable": true, "_ui5allowPreventDefault": true, "_ui5Bubbles": true, @@ -30348,28 +31225,27 @@ }, "name": "item", "_ui5privacy": "public", - "description": "the toggled item." + "description": "The clicked item." } ] }, { - "name": "item-mouseover", + "name": "item-delete", "_ui5privacy": "public", "type": { - "text": "CustomEvent<TreeItemMouseoverEventDetail>", + "text": "CustomEvent<TreeItemDeleteEventDetail>", "references": [ { - "name": "TreeItemMouseoverEventDetail", + "name": "TreeItemDeleteEventDetail", "package": "@ui5/webcomponents", "module": "dist/Tree.js" } ] }, - "description": "Fired when the mouse cursor enters the tree item borders.", + "description": "Fired when the Delete button of any tree item is pressed.\n\n**Note:** A Delete button is displayed on each item,\nwhen the component `selectionMode` property is set to `Delete`.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, "_ui5Bubbles": true, - "_ui5since": "1.0.0-rc.16", "_ui5parameters": [ { "type": { @@ -30377,7 +31253,7 @@ }, "name": "item", "_ui5privacy": "public", - "description": "the hovered item." + "description": "the deleted item." } ] }, @@ -30411,19 +31287,48 @@ ] }, { - "name": "item-click", + "name": "item-mouseover", "_ui5privacy": "public", "type": { - "text": "CustomEvent<TreeItemClickEventDetail>", + "text": "CustomEvent<TreeItemMouseoverEventDetail>", "references": [ { - "name": "TreeItemClickEventDetail", + "name": "TreeItemMouseoverEventDetail", "package": "@ui5/webcomponents", "module": "dist/Tree.js" } ] }, - "description": "Fired when a tree item is activated.", + "description": "Fired when the mouse cursor enters the tree item borders.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5since": "1.0.0-rc.16", + "_ui5parameters": [ + { + "type": { + "text": "HTMLElement" + }, + "name": "item", + "_ui5privacy": "public", + "description": "the hovered item." + } + ] + }, + { + "name": "item-toggle", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<TreeItemToggleEventDetail>", + "references": [ + { + "name": "TreeItemToggleEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/Tree.js" + } + ] + }, + "description": "Fired when a tree item is expanded or collapsed.\n\n**Note:** You can call `preventDefault()` on the event object to suppress the event, if needed.\nThis may be handy for example if you want to dynamically load tree items upon the user expanding a node.\nEven if you prevented the event's default behavior, you can always manually call `toggle()` on a tree item.", "_ui5Cancelable": true, "_ui5allowPreventDefault": true, "_ui5Bubbles": true, @@ -30434,238 +31339,655 @@ }, "name": "item", "_ui5privacy": "public", - "description": "The clicked item." + "description": "the toggled item." + } + ] + }, + { + "name": "move", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<TreeMoveEventDetail>", + "references": [ + { + "name": "TreeMoveEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/Tree.js" + } + ] + }, + "description": "Fired when a movable tree item is moved over a potential drop target during a drag-and-drop operation.\n\nIf the new position is valid, prevent the default action of the event using `preventDefault()`.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5parameters": [ + { + "type": { + "text": "object" + }, + "name": "destination", + "_ui5privacy": "public", + "description": "Contains information about the destination of the moved element. Has `element` and `placement` properties." + }, + { + "type": { + "text": "object" + }, + "name": "source", + "_ui5privacy": "public", + "description": "Contains information about the moved element under the `element` property." + } + ] + }, + { + "name": "move-over", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<TreeMoveEventDetail>", + "references": [ + { + "name": "TreeMoveEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/Tree.js" + } + ] + }, + "description": "Fired when a movable tree item is dropped onto a drop target.\n\n**Note:** The `move` event is fired only if there was a preceding `move-over` event with prevented default action.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true, + "_ui5parameters": [ + { + "type": { + "text": "object" + }, + "name": "destination", + "_ui5privacy": "public", + "description": "Contains information about the destination of the moved element. Has `element` and `placement` properties." + }, + { + "type": { + "text": "object" + }, + "name": "source", + "_ui5privacy": "public", + "description": "Contains information about the moved element under the `element` property." + } + ] + }, + { + "name": "selection-change", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<TreeSelectionChangeEventDetail>", + "references": [ + { + "name": "TreeSelectionChangeEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/Tree.js" + } + ] + }, + "description": "Fired when selection is changed by user interaction\nin `Single`, `SingleStart`, `SingleEnd` and `Multiple` modes.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5parameters": [ + { + "type": { + "text": "Array" + }, + "name": "previouslySelectedItems", + "_ui5privacy": "public", + "description": "An array of the previously selected items." + }, + { + "type": { + "text": "Array" + }, + "name": "selectedItems", + "_ui5privacy": "public", + "description": "An array of the selected items." + }, + { + "type": { + "text": "HTMLElement" + }, + "name": "targetItem", + "_ui5privacy": "public", + "description": "The item triggering the event." } ] + } + ], + "attributes": [ + { + "description": "Defines the accessible description of the component.", + "name": "accessible-description", + "default": "undefined", + "fieldName": "accessibleDescription", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the IDs of the elements that describe the component.", + "name": "accessible-description-ref", + "default": "undefined", + "fieldName": "accessibleDescriptionRef", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the accessible name of the component.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the IDs of the elements that label the component.", + "name": "accessible-name-ref", + "default": "undefined", + "fieldName": "accessibleNameRef", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the component footer text.", + "name": "footer-text", + "default": "undefined", + "fieldName": "footerText", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the component header text.\n\n**Note:** If the `header` slot is set, this property is ignored.", + "name": "header-text", + "default": "undefined", + "fieldName": "headerText", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the text that is displayed when the component contains no items.", + "name": "no-data-text", + "default": "undefined", + "fieldName": "noDataText", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the selection mode of the component. Since the tree uses a `ui5-list` to display its structure,\nthe tree modes are exactly the same as the list modes, and are all applicable.", + "name": "selection-mode", + "default": "\"None\"", + "fieldName": "selectionMode", + "type": { + "text": "\"None\" | \"Single\" | \"Multiple\" | \"SingleStart\" | \"SingleEnd\" | \"SingleAuto\" | \"Delete\" | undefined" + } + } + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-tree", + "customElement": true, + "_ui5since": "1.0.0-rc.8", + "_ui5privacy": "public" + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "Tree", + "module": "dist/Tree.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-tree", + "declaration": { + "name": "Tree", + "module": "dist/Tree.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/TreeItem.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\nThe `ui5-tree-item` represents a node in a tree structure, shown as a `ui5-list`.\n\nThis is the item to use inside a `ui5-tree`.\nYou can represent an arbitrary tree structure by recursively nesting tree items.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents/dist/TreeItem.js\";`", + "name": "TreeItem", + "cssParts": [ + { + "description": "Used to style the additionalText of the tree list item", + "name": "additionalText" + }, + { + "description": "Used to style the icon of the tree list item", + "name": "icon" + }, + { + "description": "Used to style the title of the tree list item", + "name": "title" + } + ], + "members": [ + { + "kind": "field", + "name": "accessibilityAttributes", + "type": { + "text": "ListItemAccessibilityAttributes", + "references": [ + { + "name": "ListItemAccessibilityAttributes", + "package": "@ui5/webcomponents", + "module": "dist/ListItem.js" + } + ] + }, + "default": "{}", + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaSetsize**: Defines the number of items in the current set when not all items in the set are present in the DOM.\n**Note:** The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`.\n\n\t- **ariaPosinset**: Defines an element's number or position in the current set when not all items are present in the DOM.\n\t**Note:** The value 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.", + "privacy": "public", + "_ui5since": "1.15.0" + }, + { + "kind": "field", + "name": "accessibleName", + "type": { + "text": "string | undefined" + }, + "description": "Defines the accessible name of the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.8.0" + }, + { + "kind": "field", + "name": "additionalText", + "type": { + "text": "string | undefined" + }, + "description": "Defines the `additionalText`, displayed in the end of the tree item.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.0.0-rc.15" + }, + { + "kind": "field", + "name": "additionalTextState", + "type": { + "text": "ValueState", + "references": [ + { + "name": "ValueState", + "package": "@ui5/webcomponents-base", + "module": "dist/types/ValueState.js" + } + ] + }, + "default": "\"None\"", + "description": "Defines the state of the `additionalText`.\n\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", + "privacy": "public", + "_ui5since": "1.0.0-rc.15" + }, + { + "kind": "field", + "name": "expanded", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the tree list item will show a collapse or expand icon inside its toggle button.", + "privacy": "public" + }, + { + "kind": "field", + "name": "hasChildren", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the tree node has children, even if currently no other tree nodes are slotted inside.\n\n**Note:** This property is useful for showing big tree structures where not all nodes are initially loaded due to performance reasons.\nSet this to `true` for nodes you intend to load lazily, when the user clicks the expand button.\nIt is not necessary to set this property otherwise. If a tree item has children, the expand button will be displayed anyway.", + "privacy": "public" + }, + { + "kind": "field", + "name": "highlight", + "type": { + "text": "Highlight", + "references": [ + { + "name": "Highlight", + "package": "@ui5/webcomponents", + "module": "dist/types/Highlight.js" + } + ] + }, + "default": "\"None\"", + "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", + "privacy": "public", + "_ui5since": "1.24" + }, + { + "kind": "field", + "name": "icon", + "type": { + "text": "string | undefined" + }, + "description": "If set, an icon will be displayed before the text of the tree list item.", + "privacy": "public", + "default": "undefined" + }, + { + "kind": "field", + "name": "indeterminate", + "type": { + "text": "boolean" + }, + "description": "Defines whether the selection of a tree node is displayed as partially selected.\n\n**Note:** The indeterminate state can be set only programmatically and can’t be achieved by user\ninteraction, meaning that the resulting visual state depends on the values of the `indeterminate`\nand `selected` properties:\n\n- If a tree node has both `selected` and `indeterminate` set to `true`, it is displayed as partially selected.\n- If a tree node has `selected` set to `true` and `indeterminate` set to `false`, it is displayed as selected.\n- If a tree node has `selected` set to `false`, it is displayed as not selected regardless of the value of the `indeterminate` property.\n\n**Note:** This property takes effect only when the `ui5-tree` is in `Multiple` mode.", + "default": "false", + "privacy": "public", + "_ui5since": "1.1.0" + }, + { + "kind": "field", + "name": "movable", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the item is movable.", + "privacy": "public", + "_ui5since": "2.0.0" + }, + { + "kind": "field", + "name": "navigated", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "The navigated state of the list item.\nIf set to `true`, a navigation indicator is displayed at the end of the list item.", + "privacy": "public", + "_ui5since": "1.10.0" }, { - "name": "item-delete", - "_ui5privacy": "public", + "kind": "field", + "name": "selected", "type": { - "text": "CustomEvent<TreeItemDeleteEventDetail>", - "references": [ - { - "name": "TreeItemDeleteEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/Tree.js" - } - ] + "text": "boolean" }, - "description": "Fired when the Delete button of any tree item is pressed.\n\n**Note:** A Delete button is displayed on each item,\nwhen the component `selectionMode` property is set to `Delete`.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5parameters": [ - { - "type": { - "text": "HTMLElement" - }, - "name": "item", - "_ui5privacy": "public", - "description": "the deleted item." - } - ] + "default": "false", + "description": "Defines the selected state of the component.", + "privacy": "public" }, { - "name": "selection-change", - "_ui5privacy": "public", + "kind": "field", + "name": "text", "type": { - "text": "CustomEvent<TreeSelectionChangeEventDetail>", - "references": [ - { - "name": "TreeSelectionChangeEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/Tree.js" - } - ] + "text": "string | undefined" }, - "description": "Fired when selection is changed by user interaction\nin `Single`, `SingleStart`, `SingleEnd` and `Multiple` modes.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5parameters": [ - { - "type": { - "text": "Array" - }, - "name": "selectedItems", - "_ui5privacy": "public", - "description": "An array of the selected items." - }, - { - "type": { - "text": "Array" - }, - "name": "previouslySelectedItems", - "_ui5privacy": "public", - "description": "An array of the previously selected items." - }, - { - "type": { - "text": "HTMLElement" - }, - "name": "targetItem", - "_ui5privacy": "public", - "description": "The item triggering the event." + "description": "Defines the text of the tree item.", + "privacy": "public", + "default": "undefined" + }, + { + "kind": "method", + "name": "toggle", + "return": { + "type": { + "text": "void" } - ] + }, + "description": "Call this method to manually switch the `expanded` state of a tree item.", + "privacy": "public" }, { - "name": "move", - "_ui5privacy": "public", + "kind": "field", + "name": "tooltip", "type": { - "text": "CustomEvent<TreeMoveEventDetail>", - "references": [ - { - "name": "TreeMoveEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/Tree.js" - } - ] + "text": "string | undefined" }, - "description": "Fired when a movable tree item is moved over a potential drop target during a drag-and-drop operation.\n\nIf the new position is valid, prevent the default action of the event using `preventDefault()`.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5parameters": [ - { - "type": { - "text": "object" - }, - "name": "source", - "_ui5privacy": "public", - "description": "Contains information about the moved element under the `element` property." - }, - { - "type": { - "text": "object" - }, - "name": "destination", - "_ui5privacy": "public", - "description": "Contains information about the destination of the moved element. Has `element` and `placement` properties." - } - ] + "description": "Defines the text of the tooltip that would be displayed for the list item.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.23.0" }, { - "name": "move-over", - "_ui5privacy": "public", + "kind": "field", + "name": "type", "type": { - "text": "CustomEvent<TreeMoveEventDetail>", + "text": "ListItemType", "references": [ { - "name": "TreeMoveEventDetail", + "name": "ListItemType", "package": "@ui5/webcomponents", - "module": "dist/Tree.js" + "module": "dist/types/ListItemType.js" } ] }, - "description": "Fired when a movable tree item is dropped onto a drop target.\n\n**Note:** The `move` event is fired only if there was a preceding `move-over` event with prevented default action.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": true, - "_ui5parameters": [ - { - "type": { - "text": "object" - }, - "name": "source", - "_ui5privacy": "public", - "description": "Contains information about the moved element under the `element` property." - }, - { - "type": { - "text": "object" - }, - "name": "destination", - "_ui5privacy": "public", - "description": "Contains information about the destination of the moved element. Has `element` and `placement` properties." - } - ] + "default": "\"Active\"", + "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.", + "privacy": "public" } ], "attributes": [ { - "description": "Defines the selection mode of the component. Since the tree uses a `ui5-list` to display its structure,\nthe tree modes are exactly the same as the list modes, and are all applicable.", - "name": "selection-mode", - "default": "\"None\"", - "fieldName": "selectionMode", + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaSetsize**: Defines the number of items in the current set when not all items in the set are present in the DOM.\n**Note:** The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`.\n\n\t- **ariaPosinset**: Defines an element's number or position in the current set when not all items are present in the DOM.\n\t**Note:** The value 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.", + "name": "accessibility-attributes", + "default": "{}", + "fieldName": "accessibilityAttributes", "type": { - "text": "\"None\" | \"Single\" | \"Multiple\" | \"SingleStart\" | \"SingleEnd\" | \"SingleAuto\" | \"Delete\" | undefined" + "text": "ListItemAccessibilityAttributes" } }, { - "description": "Defines the text that is displayed when the component contains no items.", - "name": "no-data-text", + "description": "Defines the accessible name of the component.", + "name": "accessible-name", "default": "undefined", - "fieldName": "noDataText", + "fieldName": "accessibleName", "type": { "text": "string | undefined" } }, { - "description": "Defines the component header text.\n\n**Note:** If the `header` slot is set, this property is ignored.", - "name": "header-text", + "description": "Defines the `additionalText`, displayed in the end of the tree item.", + "name": "additional-text", "default": "undefined", - "fieldName": "headerText", + "fieldName": "additionalText", "type": { "text": "string | undefined" } }, { - "description": "Defines the component footer text.", - "name": "footer-text", - "default": "undefined", - "fieldName": "footerText", + "description": "Defines the state of the `additionalText`.\n\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", + "name": "additional-text-state", + "default": "\"None\"", + "fieldName": "additionalTextState", "type": { - "text": "string | undefined" + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" } }, { - "description": "Defines the accessible name of the component.", - "name": "accessible-name", - "default": "undefined", - "fieldName": "accessibleName", + "description": "Defines whether the tree list item will show a collapse or expand icon inside its toggle button.", + "name": "expanded", + "default": "false", + "fieldName": "expanded", "type": { - "text": "string | undefined" + "text": "boolean" } }, { - "description": "Defines the IDs of the elements that label the component.", - "name": "accessible-name-ref", + "description": "Defines whether the tree node has children, even if currently no other tree nodes are slotted inside.\n\n**Note:** This property is useful for showing big tree structures where not all nodes are initially loaded due to performance reasons.\nSet this to `true` for nodes you intend to load lazily, when the user clicks the expand button.\nIt is not necessary to set this property otherwise. If a tree item has children, the expand button will be displayed anyway.", + "name": "has-children", + "default": "false", + "fieldName": "hasChildren", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", + "name": "highlight", + "default": "\"None\"", + "fieldName": "highlight", + "type": { + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" + } + }, + { + "description": "If set, an icon will be displayed before the text of the tree list item.", + "name": "icon", "default": "undefined", - "fieldName": "accessibleNameRef", + "fieldName": "icon", "type": { "text": "string | undefined" } }, { - "description": "Defines the accessible description of the component.", - "name": "accessible-description", + "description": "Defines whether the selection of a tree node is displayed as partially selected.\n\n**Note:** The indeterminate state can be set only programmatically and can’t be achieved by user\ninteraction, meaning that the resulting visual state depends on the values of the `indeterminate`\nand `selected` properties:\n\n- If a tree node has both `selected` and `indeterminate` set to `true`, it is displayed as partially selected.\n- If a tree node has `selected` set to `true` and `indeterminate` set to `false`, it is displayed as selected.\n- If a tree node has `selected` set to `false`, it is displayed as not selected regardless of the value of the `indeterminate` property.\n\n**Note:** This property takes effect only when the `ui5-tree` is in `Multiple` mode.", + "name": "indeterminate", + "default": "false", + "fieldName": "indeterminate", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines whether the item is movable.", + "name": "movable", + "default": "false", + "fieldName": "movable", + "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.", + "name": "navigated", + "default": "false", + "fieldName": "navigated", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines the selected state of the component.", + "name": "selected", + "default": "false", + "fieldName": "selected", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines the text of the tree item.", + "name": "text", "default": "undefined", - "fieldName": "accessibleDescription", + "fieldName": "text", "type": { "text": "string | undefined" } }, { - "description": "Defines the IDs of the elements that describe the component.", - "name": "accessible-description-ref", + "description": "Defines the text of the tooltip that would be displayed for the list item.", + "name": "tooltip", "default": "undefined", - "fieldName": "accessibleDescriptionRef", + "fieldName": "tooltip", "type": { "text": "string | undefined" } + }, + { + "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.", + "name": "type", + "default": "\"Active\"", + "fieldName": "type", + "type": { + "text": "\"Navigation\" | \"Inactive\" | \"Active\" | \"Detail\"" + } } ], "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" + "name": "TreeItemBase", + "package": "@ui5/webcomponents", + "module": "dist/TreeItemBase.js" }, - "tagName": "ui5-tree", + "tagName": "ui5-tree-item", "customElement": true, "_ui5since": "1.0.0-rc.8", - "_ui5privacy": "public" + "_ui5privacy": "public", + "slots": [ + { + "name": "default", + "description": "Defines the items of the component.\n\n**Note:** Use `ui5-tree-item` or `ui5-tree-item-custom`", + "_ui5propertyName": "items", + "_ui5type": { + "text": "Array<TreeItemBase>", + "references": [ + { + "name": "TreeItemBase", + "package": "@ui5/webcomponents", + "module": "dist/TreeItemBase.js" + } + ] + }, + "_ui5privacy": "public" + }, + { + "name": "deleteButton", + "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<IButton>", + "references": [ + { + "name": "IButton", + "package": "@ui5/webcomponents", + "module": "dist/Button.js" + } + ] + }, + "_ui5privacy": "public" + }, + { + "name": "image", + "description": "**Note:** While the slot allows option for setting custom avatar, to match the\ndesign guidelines, please use the `ui5-avatar` with size XS.\n\n**Note:** If bigger `ui5-avatar` needs to be used, then the size of the\n`ui5-tree-item` should be customized in order to fit.", + "_ui5since": "2.10.0", + "_ui5type": { + "text": "Array<HTMLElement>" + }, + "_ui5privacy": "public" + } + ], + "events": [ + { + "name": "detail-click", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the user clicks on the detail button when type is `Detail`.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true + } + ] } ], "exports": [ @@ -30673,77 +31995,118 @@ "kind": "js", "name": "default", "declaration": { - "name": "Tree", - "module": "dist/Tree.js" + "name": "TreeItem", + "module": "dist/TreeItem.js" } }, { "kind": "custom-element-definition", - "name": "ui5-tree", + "name": "ui5-tree-item", "declaration": { - "name": "Tree", - "module": "dist/Tree.js" + "name": "TreeItem", + "module": "dist/TreeItem.js" } } ] }, { "kind": "javascript-module", - "path": "dist/TreeItem.js", + "path": "dist/TreeItemBase.js", "declarations": [ { "kind": "class", - "description": "### Overview\nThe `ui5-tree-item` represents a node in a tree structure, shown as a `ui5-list`.\n\nThis is the item to use inside a `ui5-tree`.\nYou can represent an arbitrary tree structure by recursively nesting tree items.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents/dist/TreeItem.js\";`", - "name": "TreeItem", - "cssParts": [ + "description": "A class to serve as a foundation\nfor the `TreeItem` and `TreeItemCustom` classes.", + "name": "TreeItemBase", + "slots": [ { - "description": "Used to style the title of the tree list item", - "name": "title" + "name": "default", + "description": "Defines the items of the component.\n\n**Note:** Use `ui5-tree-item` or `ui5-tree-item-custom`", + "_ui5propertyName": "items", + "_ui5type": { + "text": "Array<TreeItemBase>", + "references": [ + { + "name": "TreeItemBase", + "package": "@ui5/webcomponents", + "module": "dist/TreeItemBase.js" + } + ] + }, + "_ui5privacy": "public" }, { - "description": "Used to style the additionalText of the tree list item", - "name": "additionalText" + "name": "deleteButton", + "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<IButton>", + "references": [ + { + "name": "IButton", + "package": "@ui5/webcomponents", + "module": "dist/Button.js" + } + ] + }, + "_ui5privacy": "public" }, { - "description": "Used to style the icon of the tree list item", - "name": "icon" + "name": "image", + "description": "**Note:** While the slot allows option for setting custom avatar, to match the\ndesign guidelines, please use the `ui5-avatar` with size XS.\n\n**Note:** If bigger `ui5-avatar` needs to be used, then the size of the\n`ui5-tree-item` should be customized in order to fit.", + "_ui5since": "2.10.0", + "_ui5type": { + "text": "Array<HTMLElement>" + }, + "_ui5privacy": "public" } ], "members": [ { "kind": "field", - "name": "text", + "name": "accessibilityAttributes", "type": { - "text": "string | undefined" + "text": "ListItemAccessibilityAttributes", + "references": [ + { + "name": "ListItemAccessibilityAttributes", + "package": "@ui5/webcomponents", + "module": "dist/ListItem.js" + } + ] }, - "description": "Defines the text of the tree item.", + "default": "{}", + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaSetsize**: Defines the number of items in the current set when not all items in the set are present in the DOM.\n**Note:** The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`.\n\n\t- **ariaPosinset**: Defines an element's number or position in the current set when not all items are present in the DOM.\n\t**Note:** The value 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.", "privacy": "public", - "default": "undefined" + "_ui5since": "1.15.0" }, { "kind": "field", - "name": "additionalText", + "name": "accessibleName", "type": { "text": "string | undefined" }, - "description": "Defines the `additionalText`, displayed in the end of the tree item.", + "description": "Defines the accessible name of the component.", "default": "undefined", "privacy": "public", - "_ui5since": "1.0.0-rc.15" + "_ui5since": "1.8.0" }, { "kind": "field", - "name": "icon", + "name": "additionalTextState", "type": { - "text": "string | undefined" + "text": "ValueState", + "references": [ + { + "name": "ValueState", + "package": "@ui5/webcomponents-base", + "module": "dist/types/ValueState.js" + } + ] }, - "description": "If set, an icon will be displayed before the text of the tree list item.", + "default": "\"None\"", + "description": "Defines the state of the `additionalText`.\n\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", "privacy": "public", - "default": "undefined", - "inheritedFrom": { - "name": "TreeItemBase", - "module": "dist/TreeItemBase.js" - } + "_ui5since": "1.0.0-rc.15" }, { "kind": "field", @@ -30753,41 +32116,7 @@ }, "default": "false", "description": "Defines whether the tree list item will show a collapse or expand icon inside its toggle button.", - "privacy": "public", - "inheritedFrom": { - "name": "TreeItemBase", - "module": "dist/TreeItemBase.js" - } - }, - { - "kind": "field", - "name": "movable", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines whether the item is movable.", - "privacy": "public", - "_ui5since": "2.0.0", - "inheritedFrom": { - "name": "ListItemBase", - "module": "dist/ListItemBase.js" - } - }, - { - "kind": "field", - "name": "indeterminate", - "type": { - "text": "boolean" - }, - "description": "Defines whether the selection of a tree node is displayed as partially selected.\n\n**Note:** The indeterminate state can be set only programmatically and can’t be achieved by user\ninteraction, meaning that the resulting visual state depends on the values of the `indeterminate`\nand `selected` properties:\n\n- If a tree node has both `selected` and `indeterminate` set to `true`, it is displayed as partially selected.\n- If a tree node has `selected` set to `true` and `indeterminate` set to `false`, it is displayed as selected.\n- If a tree node has `selected` set to `false`, it is displayed as not selected regardless of the value of the `indeterminate` property.\n\n**Note:** This property takes effect only when the `ui5-tree` is in `Multiple` mode.", - "default": "false", - "privacy": "public", - "_ui5since": "1.1.0", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "privacy": "public" }, { "kind": "field", @@ -30797,106 +32126,57 @@ }, "default": "false", "description": "Defines whether the tree node has children, even if currently no other tree nodes are slotted inside.\n\n**Note:** This property is useful for showing big tree structures where not all nodes are initially loaded due to performance reasons.\nSet this to `true` for nodes you intend to load lazily, when the user clicks the expand button.\nIt is not necessary to set this property otherwise. If a tree item has children, the expand button will be displayed anyway.", - "privacy": "public", - "inheritedFrom": { - "name": "TreeItemBase", - "module": "dist/TreeItemBase.js" - } + "privacy": "public" }, { "kind": "field", - "name": "additionalTextState", + "name": "highlight", "type": { - "text": "ValueState", + "text": "Highlight", "references": [ { - "name": "ValueState", - "package": "@ui5/webcomponents-base", - "module": "dist/types/ValueState.js" + "name": "Highlight", + "package": "@ui5/webcomponents", + "module": "dist/types/Highlight.js" } ] }, "default": "\"None\"", - "description": "Defines the state of the `additionalText`.\n\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", + "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", "privacy": "public", - "_ui5since": "1.0.0-rc.15", - "inheritedFrom": { - "name": "TreeItemBase", - "module": "dist/TreeItemBase.js" - } + "_ui5since": "1.24" }, { "kind": "field", - "name": "accessibleName", + "name": "icon", "type": { "text": "string | undefined" }, - "description": "Defines the accessible name of the component.", - "default": "undefined", - "privacy": "public", - "_ui5since": "1.8.0", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } - }, - { - "kind": "method", - "name": "toggle", - "return": { - "type": { - "text": "void" - } - }, - "description": "Call this method to manually switch the `expanded` state of a tree item.", + "description": "If set, an icon will be displayed before the text of the tree list item.", "privacy": "public", - "inheritedFrom": { - "name": "TreeItemBase", - "module": "dist/TreeItemBase.js" - } + "default": "undefined" }, { "kind": "field", - "name": "type", + "name": "indeterminate", "type": { - "text": "ListItemType", - "references": [ - { - "name": "ListItemType", - "package": "@ui5/webcomponents", - "module": "dist/types/ListItemType.js" - } - ] + "text": "boolean" }, - "default": "\"Active\"", - "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.", + "description": "Defines whether the selection of a tree node is displayed as partially selected.\n\n**Note:** The indeterminate state can be set only programmatically and can’t be achieved by user\ninteraction, meaning that the resulting visual state depends on the values of the `indeterminate`\nand `selected` properties:\n\n- If a tree node has both `selected` and `indeterminate` set to `true`, it is displayed as partially selected.\n- If a tree node has `selected` set to `true` and `indeterminate` set to `false`, it is displayed as selected.\n- If a tree node has `selected` set to `false`, it is displayed as not selected regardless of the value of the `indeterminate` property.\n\n**Note:** This property takes effect only when the `ui5-tree` is in `Multiple` mode.", + "default": "false", "privacy": "public", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "_ui5since": "1.1.0" }, { "kind": "field", - "name": "accessibilityAttributes", + "name": "movable", "type": { - "text": "ListItemAccessibilityAttributes", - "references": [ - { - "name": "ListItemAccessibilityAttributes", - "package": "@ui5/webcomponents", - "module": "dist/ListItem.js" - } - ] + "text": "boolean" }, - "default": "{}", - "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaSetsize**: Defines the number of items in the current set when not all items in the set are present in the DOM.\n**Note:** The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`.\n\n\t- **ariaPosinset**: Defines an element's number or position in the current set when not all items are present in the DOM.\n\t**Note:** The value 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": "false", + "description": "Defines whether the item is movable.", "privacy": "public", - "_ui5since": "1.15.0", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "_ui5since": "2.0.0" }, { "kind": "field", @@ -30907,11 +32187,28 @@ "default": "false", "description": "The navigated state of the list item.\nIf set to `true`, a navigation indicator is displayed at the end of the list item.", "privacy": "public", - "_ui5since": "1.10.0", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "_ui5since": "1.10.0" + }, + { + "kind": "field", + "name": "selected", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines the selected state of the component.", + "privacy": "public" + }, + { + "kind": "method", + "name": "toggle", + "return": { + "type": { + "text": "void" + } + }, + "description": "Call this method to manually switch the `expanded` state of a tree item.", + "privacy": "public" }, { "kind": "field", @@ -30922,79 +32219,65 @@ "description": "Defines the text of the tooltip that would be displayed for the list item.", "default": "undefined", "privacy": "public", - "_ui5since": "1.23.0", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "_ui5since": "1.23.0" }, { "kind": "field", - "name": "highlight", + "name": "type", "type": { - "text": "Highlight", + "text": "ListItemType", "references": [ { - "name": "Highlight", + "name": "ListItemType", "package": "@ui5/webcomponents", - "module": "dist/types/Highlight.js" + "module": "dist/types/ListItemType.js" } ] }, - "default": "\"None\"", - "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", - "privacy": "public", - "_ui5since": "1.24", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } - }, + "default": "\"Active\"", + "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.", + "privacy": "public" + } + ], + "events": [ { - "kind": "field", - "name": "selected", + "name": "detail-click", + "_ui5privacy": "public", "type": { - "text": "boolean" + "text": "CustomEvent" }, - "default": "false", - "description": "Defines the selected state of the component.", - "privacy": "public", - "inheritedFrom": { - "name": "ListItemBase", - "module": "dist/ListItemBase.js" - } + "description": "Fired when the user clicks on the detail button when type is `Detail`.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true } ], "attributes": [ { - "description": "Defines the text of the tree item.", - "name": "text", - "default": "undefined", - "fieldName": "text", + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaSetsize**: Defines the number of items in the current set when not all items in the set are present in the DOM.\n**Note:** The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`.\n\n\t- **ariaPosinset**: Defines an element's number or position in the current set when not all items are present in the DOM.\n\t**Note:** The value 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.", + "name": "accessibility-attributes", + "default": "{}", + "fieldName": "accessibilityAttributes", "type": { - "text": "string | undefined" + "text": "ListItemAccessibilityAttributes" } }, { - "description": "Defines the `additionalText`, displayed in the end of the tree item.", - "name": "additional-text", + "description": "Defines the accessible name of the component.", + "name": "accessible-name", "default": "undefined", - "fieldName": "additionalText", + "fieldName": "accessibleName", "type": { "text": "string | undefined" } }, { - "description": "If set, an icon will be displayed before the text of the tree list item.", - "name": "icon", - "default": "undefined", - "fieldName": "icon", + "description": "Defines the state of the `additionalText`.\n\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", + "name": "additional-text-state", + "default": "\"None\"", + "fieldName": "additionalTextState", "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "TreeItemBase", - "module": "dist/TreeItemBase.js" + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" } }, { @@ -31004,36 +32287,6 @@ "fieldName": "expanded", "type": { "text": "boolean" - }, - "inheritedFrom": { - "name": "TreeItemBase", - "module": "dist/TreeItemBase.js" - } - }, - { - "description": "Defines whether the item is movable.", - "name": "movable", - "default": "false", - "fieldName": "movable", - "type": { - "text": "boolean" - }, - "inheritedFrom": { - "name": "TreeItemBase", - "module": "dist/TreeItemBase.js" - } - }, - { - "description": "Defines whether the selection of a tree node is displayed as partially selected.\n\n**Note:** The indeterminate state can be set only programmatically and can’t be achieved by user\ninteraction, meaning that the resulting visual state depends on the values of the `indeterminate`\nand `selected` properties:\n\n- If a tree node has both `selected` and `indeterminate` set to `true`, it is displayed as partially selected.\n- If a tree node has `selected` set to `true` and `indeterminate` set to `false`, it is displayed as selected.\n- If a tree node has `selected` set to `false`, it is displayed as not selected regardless of the value of the `indeterminate` property.\n\n**Note:** This property takes effect only when the `ui5-tree` is in `Multiple` mode.", - "name": "indeterminate", - "default": "false", - "fieldName": "indeterminate", - "type": { - "text": "boolean" - }, - "inheritedFrom": { - "name": "TreeItemBase", - "module": "dist/TreeItemBase.js" } }, { @@ -31043,62 +32296,42 @@ "fieldName": "hasChildren", "type": { "text": "boolean" - }, - "inheritedFrom": { - "name": "TreeItemBase", - "module": "dist/TreeItemBase.js" } }, { - "description": "Defines the state of the `additionalText`.\n\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", - "name": "additional-text-state", + "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", + "name": "highlight", "default": "\"None\"", - "fieldName": "additionalTextState", + "fieldName": "highlight", "type": { "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" - }, - "inheritedFrom": { - "name": "TreeItemBase", - "module": "dist/TreeItemBase.js" } }, { - "description": "Defines the accessible name of the component.", - "name": "accessible-name", + "description": "If set, an icon will be displayed before the text of the tree list item.", + "name": "icon", "default": "undefined", - "fieldName": "accessibleName", + "fieldName": "icon", "type": { "text": "string | undefined" - }, - "inheritedFrom": { - "name": "TreeItemBase", - "module": "dist/TreeItemBase.js" } }, { - "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.", - "name": "type", - "default": "\"Active\"", - "fieldName": "type", + "description": "Defines whether the selection of a tree node is displayed as partially selected.\n\n**Note:** The indeterminate state can be set only programmatically and can’t be achieved by user\ninteraction, meaning that the resulting visual state depends on the values of the `indeterminate`\nand `selected` properties:\n\n- If a tree node has both `selected` and `indeterminate` set to `true`, it is displayed as partially selected.\n- If a tree node has `selected` set to `true` and `indeterminate` set to `false`, it is displayed as selected.\n- If a tree node has `selected` set to `false`, it is displayed as not selected regardless of the value of the `indeterminate` property.\n\n**Note:** This property takes effect only when the `ui5-tree` is in `Multiple` mode.", + "name": "indeterminate", + "default": "false", + "fieldName": "indeterminate", "type": { - "text": "\"Navigation\" | \"Inactive\" | \"Active\" | \"Detail\"" - }, - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" + "text": "boolean" } }, { - "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaSetsize**: Defines the number of items in the current set when not all items in the set are present in the DOM.\n**Note:** The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`.\n\n\t- **ariaPosinset**: Defines an element's number or position in the current set when not all items are present in the DOM.\n\t**Note:** The value 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.", - "name": "accessibility-attributes", - "default": "{}", - "fieldName": "accessibilityAttributes", + "description": "Defines whether the item is movable.", + "name": "movable", + "default": "false", + "fieldName": "movable", "type": { - "text": "ListItemAccessibilityAttributes" - }, - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" + "text": "boolean" } }, { @@ -31108,10 +32341,15 @@ "fieldName": "navigated", "type": { "text": "boolean" - }, - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" + } + }, + { + "description": "Defines the selected state of the component.", + "name": "selected", + "default": "false", + "fieldName": "selected", + "type": { + "text": "boolean" } }, { @@ -31121,120 +32359,26 @@ "fieldName": "tooltip", "type": { "text": "string | undefined" - }, - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } - }, - { - "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", - "name": "highlight", - "default": "\"None\"", - "fieldName": "highlight", - "type": { - "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" - }, - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" } }, { - "description": "Defines the selected state of the component.", - "name": "selected", - "default": "false", - "fieldName": "selected", + "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.", + "name": "type", + "default": "\"Active\"", + "fieldName": "type", "type": { - "text": "boolean" - }, - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" + "text": "\"Navigation\" | \"Inactive\" | \"Active\" | \"Detail\"" } } ], "superclass": { - "name": "TreeItemBase", + "name": "ListItem", "package": "@ui5/webcomponents", - "module": "dist/TreeItemBase.js" + "module": "dist/ListItem.js" }, - "tagName": "ui5-tree-item", "customElement": true, - "_ui5since": "1.0.0-rc.8", "_ui5privacy": "public", - "slots": [ - { - "name": "default", - "description": "Defines the items of the component.\n\n**Note:** Use `ui5-tree-item` or `ui5-tree-item-custom`", - "_ui5propertyName": "items", - "_ui5type": { - "text": "Array<TreeItemBase>", - "references": [ - { - "name": "TreeItemBase", - "package": "@ui5/webcomponents", - "module": "dist/TreeItemBase.js" - } - ] - }, - "_ui5privacy": "public", - "inheritedFrom": { - "name": "TreeItemBase", - "module": "dist/TreeItemBase.js" - } - }, - { - "name": "image", - "description": "**Note:** While the slot allows option for setting custom avatar, to match the\ndesign guidelines, please use the `ui5-avatar` with size XS.\n\n**Note:** If bigger `ui5-avatar` needs to be used, then the size of the\n`ui5-tree-item` should be customized in order to fit.", - "_ui5since": "2.10.0", - "_ui5type": { - "text": "Array<HTMLElement>" - }, - "_ui5privacy": "public", - "inheritedFrom": { - "name": "TreeItemBase", - "module": "dist/TreeItemBase.js" - } - }, - { - "name": "deleteButton", - "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<IButton>", - "references": [ - { - "name": "IButton", - "package": "@ui5/webcomponents", - "module": "dist/Button.js" - } - ] - }, - "_ui5privacy": "public", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } - } - ], - "events": [ - { - "name": "detail-click", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired when the user clicks on the detail button when type is `Detail`.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } - } - ] + "_ui5abstract": true } ], "exports": [ @@ -31242,29 +32386,43 @@ "kind": "js", "name": "default", "declaration": { - "name": "TreeItem", - "module": "dist/TreeItem.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-tree-item", - "declaration": { - "name": "TreeItem", - "module": "dist/TreeItem.js" + "name": "TreeItemBase", + "module": "dist/TreeItemBase.js" } } ] }, { "kind": "javascript-module", - "path": "dist/TreeItemBase.js", + "path": "dist/TreeItemCustom.js", "declarations": [ { "kind": "class", - "description": "A class to serve as a foundation\nfor the `TreeItem` and `TreeItemCustom` classes.", - "name": "TreeItemBase", + "description": "The `ui5-tree-item-custom` represents a node in a tree structure, shown as a `ui5-list`.\n\nThis is the item to use inside a `ui5-tree`.\nYou can represent an arbitrary tree structure by recursively nesting tree items.\n\nYou can use this item to put any custom content inside the tree item.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents/dist/TreeItemCustom.js\";`", + "name": "TreeItemCustom", + "cssParts": [ + { + "description": "Used to style the additionalText of the tree list item", + "name": "additionalText" + }, + { + "description": "Used to style the icon of the tree list item", + "name": "icon" + }, + { + "description": "Used to style the title of the tree list item", + "name": "title" + } + ], "slots": [ + { + "name": "content", + "description": "Defines the content of the `ui5-tree-item`.", + "_ui5type": { + "text": "Array<HTMLElement>" + }, + "_ui5privacy": "public" + }, { "name": "default", "description": "Defines the items of the component.\n\n**Note:** Use `ui5-tree-item` or `ui5-tree-item-custom`", @@ -31281,15 +32439,6 @@ }, "_ui5privacy": "public" }, - { - "name": "image", - "description": "**Note:** While the slot allows option for setting custom avatar, to match the\ndesign guidelines, please use the `ui5-avatar` with size XS.\n\n**Note:** If bigger `ui5-avatar` needs to be used, then the size of the\n`ui5-tree-item` should be customized in order to fit.", - "_ui5since": "2.10.0", - "_ui5type": { - "text": "Array<HTMLElement>" - }, - "_ui5privacy": "public" - }, { "name": "deleteButton", "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.", @@ -31304,63 +32453,75 @@ } ] }, - "_ui5privacy": "public", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "_ui5privacy": "public" + }, + { + "name": "image", + "description": "**Note:** While the slot allows option for setting custom avatar, to match the\ndesign guidelines, please use the `ui5-avatar` with size XS.\n\n**Note:** If bigger `ui5-avatar` needs to be used, then the size of the\n`ui5-tree-item` should be customized in order to fit.", + "_ui5since": "2.10.0", + "_ui5type": { + "text": "Array<HTMLElement>" + }, + "_ui5privacy": "public" } ], "members": [ { "kind": "field", - "name": "icon", + "name": "accessibilityAttributes", "type": { - "text": "string | undefined" + "text": "ListItemAccessibilityAttributes", + "references": [ + { + "name": "ListItemAccessibilityAttributes", + "package": "@ui5/webcomponents", + "module": "dist/ListItem.js" + } + ] }, - "description": "If set, an icon will be displayed before the text of the tree list item.", + "default": "{}", + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaSetsize**: Defines the number of items in the current set when not all items in the set are present in the DOM.\n**Note:** The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`.\n\n\t- **ariaPosinset**: Defines an element's number or position in the current set when not all items are present in the DOM.\n\t**Note:** The value 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.", "privacy": "public", - "default": "undefined" + "_ui5since": "1.15.0" }, { "kind": "field", - "name": "expanded", + "name": "accessibleName", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Defines whether the tree list item will show a collapse or expand icon inside its toggle button.", - "privacy": "public" + "description": "Defines the accessible name of the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.8.0" }, { "kind": "field", - "name": "movable", + "name": "additionalTextState", "type": { - "text": "boolean" + "text": "ValueState", + "references": [ + { + "name": "ValueState", + "package": "@ui5/webcomponents-base", + "module": "dist/types/ValueState.js" + } + ] }, - "default": "false", - "description": "Defines whether the item is movable.", + "default": "\"None\"", + "description": "Defines the state of the `additionalText`.\n\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", "privacy": "public", - "_ui5since": "2.0.0", - "inheritedFrom": { - "name": "ListItemBase", - "module": "dist/ListItemBase.js" - } + "_ui5since": "1.0.0-rc.15" }, { "kind": "field", - "name": "indeterminate", + "name": "expanded", "type": { "text": "boolean" }, - "description": "Defines whether the selection of a tree node is displayed as partially selected.\n\n**Note:** The indeterminate state can be set only programmatically and can’t be achieved by user\ninteraction, meaning that the resulting visual state depends on the values of the `indeterminate`\nand `selected` properties:\n\n- If a tree node has both `selected` and `indeterminate` set to `true`, it is displayed as partially selected.\n- If a tree node has `selected` set to `true` and `indeterminate` set to `false`, it is displayed as selected.\n- If a tree node has `selected` set to `false`, it is displayed as not selected regardless of the value of the `indeterminate` property.\n\n**Note:** This property takes effect only when the `ui5-tree` is in `Multiple` mode.", "default": "false", - "privacy": "public", - "_ui5since": "1.1.0", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "description": "Defines whether the tree list item will show a collapse or expand icon inside its toggle button.", + "privacy": "public" }, { "kind": "field", @@ -31374,90 +32535,63 @@ }, { "kind": "field", - "name": "additionalTextState", + "name": "hideSelectionElement", "type": { - "text": "ValueState", + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the tree list item should display the selection element.", + "privacy": "public" + }, + { + "kind": "field", + "name": "highlight", + "type": { + "text": "Highlight", "references": [ { - "name": "ValueState", - "package": "@ui5/webcomponents-base", - "module": "dist/types/ValueState.js" + "name": "Highlight", + "package": "@ui5/webcomponents", + "module": "dist/types/Highlight.js" } ] }, "default": "\"None\"", - "description": "Defines the state of the `additionalText`.\n\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", + "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", "privacy": "public", - "_ui5since": "1.0.0-rc.15" + "_ui5since": "1.24" }, { "kind": "field", - "name": "accessibleName", + "name": "icon", "type": { "text": "string | undefined" }, - "description": "Defines the accessible name of the component.", - "default": "undefined", + "description": "If set, an icon will be displayed before the text of the tree list item.", "privacy": "public", - "_ui5since": "1.8.0", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } - }, - { - "kind": "method", - "name": "toggle", - "return": { - "type": { - "text": "void" - } - }, - "description": "Call this method to manually switch the `expanded` state of a tree item.", - "privacy": "public" + "default": "undefined" }, { "kind": "field", - "name": "type", + "name": "indeterminate", "type": { - "text": "ListItemType", - "references": [ - { - "name": "ListItemType", - "package": "@ui5/webcomponents", - "module": "dist/types/ListItemType.js" - } - ] + "text": "boolean" }, - "default": "\"Active\"", - "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.", + "description": "Defines whether the selection of a tree node is displayed as partially selected.\n\n**Note:** The indeterminate state can be set only programmatically and can’t be achieved by user\ninteraction, meaning that the resulting visual state depends on the values of the `indeterminate`\nand `selected` properties:\n\n- If a tree node has both `selected` and `indeterminate` set to `true`, it is displayed as partially selected.\n- If a tree node has `selected` set to `true` and `indeterminate` set to `false`, it is displayed as selected.\n- If a tree node has `selected` set to `false`, it is displayed as not selected regardless of the value of the `indeterminate` property.\n\n**Note:** This property takes effect only when the `ui5-tree` is in `Multiple` mode.", + "default": "false", "privacy": "public", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "_ui5since": "1.1.0" }, { "kind": "field", - "name": "accessibilityAttributes", + "name": "movable", "type": { - "text": "ListItemAccessibilityAttributes", - "references": [ - { - "name": "ListItemAccessibilityAttributes", - "package": "@ui5/webcomponents", - "module": "dist/ListItem.js" - } - ] + "text": "boolean" }, - "default": "{}", - "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaSetsize**: Defines the number of items in the current set when not all items in the set are present in the DOM.\n**Note:** The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`.\n\n\t- **ariaPosinset**: Defines an element's number or position in the current set when not all items are present in the DOM.\n\t**Note:** The value 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": "false", + "description": "Defines whether the item is movable.", "privacy": "public", - "_ui5since": "1.15.0", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "_ui5since": "2.0.0" }, { "kind": "field", @@ -31468,169 +32602,147 @@ "default": "false", "description": "The navigated state of the list item.\nIf set to `true`, a navigation indicator is displayed at the end of the list item.", "privacy": "public", - "_ui5since": "1.10.0", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "_ui5since": "1.10.0" }, { "kind": "field", - "name": "tooltip", + "name": "selected", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Defines the text of the tooltip that would be displayed for the list item.", - "default": "undefined", - "privacy": "public", - "_ui5since": "1.23.0", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "default": "false", + "description": "Defines the selected state of the component.", + "privacy": "public" + }, + { + "kind": "method", + "name": "toggle", + "return": { + "type": { + "text": "void" + } + }, + "description": "Call this method to manually switch the `expanded` state of a tree item.", + "privacy": "public" }, { "kind": "field", - "name": "highlight", + "name": "tooltip", "type": { - "text": "Highlight", - "references": [ - { - "name": "Highlight", - "package": "@ui5/webcomponents", - "module": "dist/types/Highlight.js" - } - ] + "text": "string | undefined" }, - "default": "\"None\"", - "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", + "description": "Defines the text of the tooltip that would be displayed for the list item.", + "default": "undefined", "privacy": "public", - "_ui5since": "1.24", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "_ui5since": "1.23.0" }, { "kind": "field", - "name": "selected", + "name": "type", "type": { - "text": "boolean" + "text": "ListItemType", + "references": [ + { + "name": "ListItemType", + "package": "@ui5/webcomponents", + "module": "dist/types/ListItemType.js" + } + ] }, - "default": "false", - "description": "Defines the selected state of the component.", - "privacy": "public", - "inheritedFrom": { - "name": "ListItemBase", - "module": "dist/ListItemBase.js" - } + "default": "\"Active\"", + "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.", + "privacy": "public" } ], - "events": [ + "attributes": [ { - "name": "detail-click", - "_ui5privacy": "public", + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaSetsize**: Defines the number of items in the current set when not all items in the set are present in the DOM.\n**Note:** The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`.\n\n\t- **ariaPosinset**: Defines an element's number or position in the current set when not all items are present in the DOM.\n\t**Note:** The value 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.", + "name": "accessibility-attributes", + "default": "{}", + "fieldName": "accessibilityAttributes", "type": { - "text": "CustomEvent" - }, - "description": "Fired when the user clicks on the detail button when type is `Detail`.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" + "text": "ListItemAccessibilityAttributes" } - } - ], - "attributes": [ + }, { - "description": "If set, an icon will be displayed before the text of the tree list item.", - "name": "icon", + "description": "Defines the accessible name of the component.", + "name": "accessible-name", "default": "undefined", - "fieldName": "icon", + "fieldName": "accessibleName", "type": { "text": "string | undefined" } }, { - "description": "Defines whether the tree list item will show a collapse or expand icon inside its toggle button.", - "name": "expanded", - "default": "false", - "fieldName": "expanded", + "description": "Defines the state of the `additionalText`.\n\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", + "name": "additional-text-state", + "default": "\"None\"", + "fieldName": "additionalTextState", "type": { - "text": "boolean" + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" } }, { - "description": "Defines whether the item is movable.", - "name": "movable", + "description": "Defines whether the tree list item will show a collapse or expand icon inside its toggle button.", + "name": "expanded", "default": "false", - "fieldName": "movable", + "fieldName": "expanded", "type": { "text": "boolean" } }, { - "description": "Defines whether the selection of a tree node is displayed as partially selected.\n\n**Note:** The indeterminate state can be set only programmatically and can’t be achieved by user\ninteraction, meaning that the resulting visual state depends on the values of the `indeterminate`\nand `selected` properties:\n\n- If a tree node has both `selected` and `indeterminate` set to `true`, it is displayed as partially selected.\n- If a tree node has `selected` set to `true` and `indeterminate` set to `false`, it is displayed as selected.\n- If a tree node has `selected` set to `false`, it is displayed as not selected regardless of the value of the `indeterminate` property.\n\n**Note:** This property takes effect only when the `ui5-tree` is in `Multiple` mode.", - "name": "indeterminate", + "description": "Defines whether the tree node has children, even if currently no other tree nodes are slotted inside.\n\n**Note:** This property is useful for showing big tree structures where not all nodes are initially loaded due to performance reasons.\nSet this to `true` for nodes you intend to load lazily, when the user clicks the expand button.\nIt is not necessary to set this property otherwise. If a tree item has children, the expand button will be displayed anyway.", + "name": "has-children", "default": "false", - "fieldName": "indeterminate", + "fieldName": "hasChildren", "type": { "text": "boolean" } }, { - "description": "Defines whether the tree node has children, even if currently no other tree nodes are slotted inside.\n\n**Note:** This property is useful for showing big tree structures where not all nodes are initially loaded due to performance reasons.\nSet this to `true` for nodes you intend to load lazily, when the user clicks the expand button.\nIt is not necessary to set this property otherwise. If a tree item has children, the expand button will be displayed anyway.", - "name": "has-children", + "description": "Defines whether the tree list item should display the selection element.", + "name": "hide-selection-element", "default": "false", - "fieldName": "hasChildren", + "fieldName": "hideSelectionElement", "type": { "text": "boolean" } }, { - "description": "Defines the state of the `additionalText`.\n\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", - "name": "additional-text-state", + "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", + "name": "highlight", "default": "\"None\"", - "fieldName": "additionalTextState", + "fieldName": "highlight", "type": { "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" } }, { - "description": "Defines the accessible name of the component.", - "name": "accessible-name", + "description": "If set, an icon will be displayed before the text of the tree list item.", + "name": "icon", "default": "undefined", - "fieldName": "accessibleName", + "fieldName": "icon", "type": { "text": "string | undefined" } }, { - "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.", - "name": "type", - "default": "\"Active\"", - "fieldName": "type", + "description": "Defines whether the selection of a tree node is displayed as partially selected.\n\n**Note:** The indeterminate state can be set only programmatically and can’t be achieved by user\ninteraction, meaning that the resulting visual state depends on the values of the `indeterminate`\nand `selected` properties:\n\n- If a tree node has both `selected` and `indeterminate` set to `true`, it is displayed as partially selected.\n- If a tree node has `selected` set to `true` and `indeterminate` set to `false`, it is displayed as selected.\n- If a tree node has `selected` set to `false`, it is displayed as not selected regardless of the value of the `indeterminate` property.\n\n**Note:** This property takes effect only when the `ui5-tree` is in `Multiple` mode.", + "name": "indeterminate", + "default": "false", + "fieldName": "indeterminate", "type": { - "text": "\"Navigation\" | \"Inactive\" | \"Active\" | \"Detail\"" - }, - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" + "text": "boolean" } }, { - "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaSetsize**: Defines the number of items in the current set when not all items in the set are present in the DOM.\n**Note:** The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`.\n\n\t- **ariaPosinset**: Defines an element's number or position in the current set when not all items are present in the DOM.\n\t**Note:** The value 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.", - "name": "accessibility-attributes", - "default": "{}", - "fieldName": "accessibilityAttributes", + "description": "Defines whether the item is movable.", + "name": "movable", + "default": "false", + "fieldName": "movable", "type": { - "text": "ListItemAccessibilityAttributes" - }, - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" + "text": "boolean" } }, { @@ -31640,10 +32752,15 @@ "fieldName": "navigated", "type": { "text": "boolean" - }, - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" + } + }, + { + "description": "Defines the selected state of the component.", + "name": "selected", + "default": "false", + "fieldName": "selected", + "type": { + "text": "boolean" } }, { @@ -31653,47 +32770,40 @@ "fieldName": "tooltip", "type": { "text": "string | undefined" - }, - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } - }, - { - "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", - "name": "highlight", - "default": "\"None\"", - "fieldName": "highlight", - "type": { - "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" - }, - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" } }, { - "description": "Defines the selected state of the component.", - "name": "selected", - "default": "false", - "fieldName": "selected", + "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.", + "name": "type", + "default": "\"Active\"", + "fieldName": "type", "type": { - "text": "boolean" - }, - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" + "text": "\"Navigation\" | \"Inactive\" | \"Active\" | \"Detail\"" } } ], "superclass": { - "name": "ListItem", + "name": "TreeItemBase", "package": "@ui5/webcomponents", - "module": "dist/ListItem.js" + "module": "dist/TreeItemBase.js" }, + "tagName": "ui5-tree-item-custom", "customElement": true, + "_ui5since": "1.9.2", "_ui5privacy": "public", - "_ui5abstract": true + "events": [ + { + "name": "detail-click", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the user clicks on the detail button when type is `Detail`.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true + } + ] } ], "exports": [ @@ -31701,545 +32811,455 @@ "kind": "js", "name": "default", "declaration": { - "name": "TreeItemBase", - "module": "dist/TreeItemBase.js" + "name": "TreeItemCustom", + "module": "dist/TreeItemCustom.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-tree-item-custom", + "declaration": { + "name": "TreeItemCustom", + "module": "dist/TreeItemCustom.js" } } ] }, { "kind": "javascript-module", - "path": "dist/TreeItemCustom.js", + "path": "dist/TreeList.js", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "TreeList", + "module": "dist/TreeList.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/YearPicker.js", "declarations": [ { "kind": "class", - "description": "The `ui5-tree-item-custom` represents a node in a tree structure, shown as a `ui5-list`.\n\nThis is the item to use inside a `ui5-tree`.\nYou can represent an arbitrary tree structure by recursively nesting tree items.\n\nYou can use this item to put any custom content inside the tree item.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents/dist/TreeItemCustom.js\";`", - "name": "TreeItemCustom", - "cssParts": [ + "description": "Displays years which can be selected.", + "name": "YearPicker", + "members": [ { - "description": "Used to style the title of the tree list item", - "name": "title" + "kind": "field", + "name": "calendarWeekNumbering", + "type": { + "text": "CalendarWeekNumbering", + "references": [ + { + "name": "CalendarWeekNumbering", + "package": "@ui5/webcomponents", + "module": "dist/types/CalendarWeekNumbering.js" + } + ] + }, + "default": "\"Default\"", + "description": "Defines how to calculate calendar weeks and first day of the week.\nIf not set, the calendar will be displayed according to the currently set global configuration.", + "privacy": "public", + "_ui5since": "2.2.0" }, { - "description": "Used to style the additionalText of the tree list item", - "name": "additionalText" + "kind": "field", + "name": "displayFormat", + "type": { + "text": "string | undefined" + }, + "description": "Determines the format, displayed in the input field.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.14.0" }, { - "description": "Used to style the icon of the tree list item", - "name": "icon" - } - ], - "slots": [ - { - "name": "content", - "description": "Defines the content of the `ui5-tree-item`.", - "_ui5type": { - "text": "Array<HTMLElement>" + "kind": "field", + "name": "formatPattern", + "type": { + "text": "string | undefined" }, - "_ui5privacy": "public" + "description": "Determines the format, displayed in the input field.", + "default": "undefined", + "deprecated": "Use displayFormat and valueFormat instead", + "privacy": "public" }, { - "name": "default", - "description": "Defines the items of the component.\n\n**Note:** Use `ui5-tree-item` or `ui5-tree-item-custom`", - "_ui5propertyName": "items", - "_ui5type": { - "text": "Array<TreeItemBase>", - "references": [ - { - "name": "TreeItemBase", - "package": "@ui5/webcomponents", - "module": "dist/TreeItemBase.js" - } - ] + "kind": "field", + "name": "maxDate", + "type": { + "text": "string" }, - "_ui5privacy": "public", - "inheritedFrom": { - "name": "TreeItemBase", - "module": "dist/TreeItemBase.js" - } + "default": "\"\"", + "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).", + "privacy": "public", + "_ui5since": "1.0.0-rc.6" }, { - "name": "image", - "description": "**Note:** While the slot allows option for setting custom avatar, to match the\ndesign guidelines, please use the `ui5-avatar` with size XS.\n\n**Note:** If bigger `ui5-avatar` needs to be used, then the size of the\n`ui5-tree-item` should be customized in order to fit.", - "_ui5since": "2.10.0", - "_ui5type": { - "text": "Array<HTMLElement>" + "kind": "field", + "name": "minDate", + "type": { + "text": "string" }, - "_ui5privacy": "public", - "inheritedFrom": { - "name": "TreeItemBase", - "module": "dist/TreeItemBase.js" - } + "default": "\"\"", + "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).", + "privacy": "public", + "_ui5since": "1.0.0-rc.6" }, { - "name": "deleteButton", - "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<IButton>", + "kind": "field", + "name": "primaryCalendarType", + "type": { + "text": "CalendarType | undefined", "references": [ { - "name": "IButton", - "package": "@ui5/webcomponents", - "module": "dist/Button.js" + "name": "CalendarType", + "package": "@ui5/webcomponents-base", + "module": "dist/types/CalendarType.js" } ] }, - "_ui5privacy": "public", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } - } - ], - "members": [ + "description": "Sets a calendar type used for display.\nIf not set, the calendar type of the global configuration is used.", + "default": "undefined", + "privacy": "public" + }, { "kind": "field", - "name": "hideSelectionElement", + "name": "secondaryCalendarType", "type": { - "text": "boolean" + "text": "CalendarType | undefined", + "references": [ + { + "name": "CalendarType", + "package": "@ui5/webcomponents-base", + "module": "dist/types/CalendarType.js" + } + ] }, - "default": "false", - "description": "Defines whether the tree list item should display the selection element.", - "privacy": "public" + "description": "Defines the secondary calendar type.\nIf not set, the calendar will only show the primary calendar type.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.0.0-rc.16" }, { "kind": "field", - "name": "icon", + "name": "valueFormat", "type": { "text": "string | undefined" }, - "description": "If set, an icon will be displayed before the text of the tree list item.", + "description": "Determines the format, used for the value attribute.", + "default": "undefined", "privacy": "public", + "_ui5since": "2.14.0" + } + ], + "superclass": { + "name": "CalendarPart", + "package": "@ui5/webcomponents", + "module": "dist/CalendarPart.js" + }, + "tagName": "ui5-yearpicker", + "customElement": true, + "_ui5privacy": "private", + "attributes": [ + { + "description": "Defines how to calculate calendar weeks and first day of the week.\nIf not set, the calendar will be displayed according to the currently set global configuration.", + "name": "calendar-week-numbering", + "default": "\"Default\"", + "fieldName": "calendarWeekNumbering", + "type": { + "text": "\"Default\" | \"ISO_8601\" | \"MiddleEastern\" | \"WesternTraditional\"" + } + }, + { + "description": "Determines the format, displayed in the input field.", + "name": "display-format", "default": "undefined", - "inheritedFrom": { - "name": "TreeItemBase", - "module": "dist/TreeItemBase.js" + "fieldName": "displayFormat", + "type": { + "text": "string | undefined" } }, { - "kind": "field", - "name": "expanded", + "description": "Determines the format, displayed in the input field.", + "name": "format-pattern", + "default": "undefined", + "fieldName": "formatPattern", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Defines whether the tree list item will show a collapse or expand icon inside its toggle button.", - "privacy": "public", - "inheritedFrom": { - "name": "TreeItemBase", - "module": "dist/TreeItemBase.js" + "deprecated": "Use displayFormat and valueFormat instead" + }, + { + "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).", + "name": "max-date", + "default": "\"\"", + "fieldName": "maxDate", + "type": { + "text": "string" } }, { - "kind": "field", - "name": "movable", + "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).", + "name": "min-date", + "default": "\"\"", + "fieldName": "minDate", "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines whether the item is movable.", - "privacy": "public", - "_ui5since": "2.0.0", - "inheritedFrom": { - "name": "ListItemBase", - "module": "dist/ListItemBase.js" + "text": "string" } }, { - "kind": "field", - "name": "indeterminate", + "description": "Sets a calendar type used for display.\nIf not set, the calendar type of the global configuration is used.", + "name": "primary-calendar-type", + "default": "undefined", + "fieldName": "primaryCalendarType", "type": { - "text": "boolean" - }, - "description": "Defines whether the selection of a tree node is displayed as partially selected.\n\n**Note:** The indeterminate state can be set only programmatically and can’t be achieved by user\ninteraction, meaning that the resulting visual state depends on the values of the `indeterminate`\nand `selected` properties:\n\n- If a tree node has both `selected` and `indeterminate` set to `true`, it is displayed as partially selected.\n- If a tree node has `selected` set to `true` and `indeterminate` set to `false`, it is displayed as selected.\n- If a tree node has `selected` set to `false`, it is displayed as not selected regardless of the value of the `indeterminate` property.\n\n**Note:** This property takes effect only when the `ui5-tree` is in `Multiple` mode.", - "default": "false", - "privacy": "public", - "_ui5since": "1.1.0", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" + "text": "\"Gregorian\" | \"Islamic\" | \"Japanese\" | \"Buddhist\" | \"Persian\" | undefined" } }, { - "kind": "field", - "name": "hasChildren", + "description": "Defines the secondary calendar type.\nIf not set, the calendar will only show the primary calendar type.", + "name": "secondary-calendar-type", + "default": "undefined", + "fieldName": "secondaryCalendarType", "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines whether the tree node has children, even if currently no other tree nodes are slotted inside.\n\n**Note:** This property is useful for showing big tree structures where not all nodes are initially loaded due to performance reasons.\nSet this to `true` for nodes you intend to load lazily, when the user clicks the expand button.\nIt is not necessary to set this property otherwise. If a tree item has children, the expand button will be displayed anyway.", - "privacy": "public", - "inheritedFrom": { - "name": "TreeItemBase", - "module": "dist/TreeItemBase.js" + "text": "\"Gregorian\" | \"Islamic\" | \"Japanese\" | \"Buddhist\" | \"Persian\" | undefined" } }, + { + "description": "Determines the format, used for the value attribute.", + "name": "value-format", + "default": "undefined", + "fieldName": "valueFormat", + "type": { + "text": "string | undefined" + } + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "YearPicker", + "module": "dist/YearPicker.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-yearpicker", + "declaration": { + "name": "YearPicker", + "module": "dist/YearPicker.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/YearRangePicker.js", + "declarations": [ + { + "kind": "class", + "description": "Displays year ranges which help navigate through years faster.", + "name": "YearRangePicker", + "members": [ { "kind": "field", - "name": "additionalTextState", + "name": "calendarWeekNumbering", "type": { - "text": "ValueState", + "text": "CalendarWeekNumbering", "references": [ { - "name": "ValueState", - "package": "@ui5/webcomponents-base", - "module": "dist/types/ValueState.js" + "name": "CalendarWeekNumbering", + "package": "@ui5/webcomponents", + "module": "dist/types/CalendarWeekNumbering.js" } ] }, - "default": "\"None\"", - "description": "Defines the state of the `additionalText`.\n\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", + "default": "\"Default\"", + "description": "Defines how to calculate calendar weeks and first day of the week.\nIf not set, the calendar will be displayed according to the currently set global configuration.", "privacy": "public", - "_ui5since": "1.0.0-rc.15", - "inheritedFrom": { - "name": "TreeItemBase", - "module": "dist/TreeItemBase.js" - } + "_ui5since": "2.2.0" }, { "kind": "field", - "name": "accessibleName", + "name": "displayFormat", "type": { "text": "string | undefined" }, - "description": "Defines the accessible name of the component.", + "description": "Determines the format, displayed in the input field.", "default": "undefined", "privacy": "public", - "_ui5since": "1.8.0", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } - }, - { - "kind": "method", - "name": "toggle", - "return": { - "type": { - "text": "void" - } - }, - "description": "Call this method to manually switch the `expanded` state of a tree item.", - "privacy": "public", - "inheritedFrom": { - "name": "TreeItemBase", - "module": "dist/TreeItemBase.js" - } + "_ui5since": "2.14.0" }, { "kind": "field", - "name": "type", + "name": "formatPattern", "type": { - "text": "ListItemType", - "references": [ - { - "name": "ListItemType", - "package": "@ui5/webcomponents", - "module": "dist/types/ListItemType.js" - } - ] + "text": "string | undefined" }, - "default": "\"Active\"", - "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.", - "privacy": "public", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "description": "Determines the format, displayed in the input field.", + "default": "undefined", + "deprecated": "Use displayFormat and valueFormat instead", + "privacy": "public" }, { "kind": "field", - "name": "accessibilityAttributes", + "name": "maxDate", "type": { - "text": "ListItemAccessibilityAttributes", - "references": [ - { - "name": "ListItemAccessibilityAttributes", - "package": "@ui5/webcomponents", - "module": "dist/ListItem.js" - } - ] + "text": "string" }, - "default": "{}", - "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaSetsize**: Defines the number of items in the current set when not all items in the set are present in the DOM.\n**Note:** The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`.\n\n\t- **ariaPosinset**: Defines an element's number or position in the current set when not all items are present in the DOM.\n\t**Note:** The value 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": "\"\"", + "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).", "privacy": "public", - "_ui5since": "1.15.0", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "_ui5since": "1.0.0-rc.6" }, { "kind": "field", - "name": "navigated", + "name": "minDate", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "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": "\"\"", + "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).", "privacy": "public", - "_ui5since": "1.10.0", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "_ui5since": "1.0.0-rc.6" }, { "kind": "field", - "name": "tooltip", + "name": "primaryCalendarType", "type": { - "text": "string | undefined" + "text": "CalendarType | undefined", + "references": [ + { + "name": "CalendarType", + "package": "@ui5/webcomponents-base", + "module": "dist/types/CalendarType.js" + } + ] }, - "description": "Defines the text of the tooltip that would be displayed for the list item.", + "description": "Sets a calendar type used for display.\nIf not set, the calendar type of the global configuration is used.", "default": "undefined", - "privacy": "public", - "_ui5since": "1.23.0", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "privacy": "public" }, { "kind": "field", - "name": "highlight", + "name": "secondaryCalendarType", "type": { - "text": "Highlight", + "text": "CalendarType | undefined", "references": [ { - "name": "Highlight", - "package": "@ui5/webcomponents", - "module": "dist/types/Highlight.js" + "name": "CalendarType", + "package": "@ui5/webcomponents-base", + "module": "dist/types/CalendarType.js" } ] }, - "default": "\"None\"", - "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", + "description": "Defines the secondary calendar type.\nIf not set, the calendar will only show the primary calendar type.", + "default": "undefined", "privacy": "public", - "_ui5since": "1.24", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "_ui5since": "1.0.0-rc.16" }, { "kind": "field", - "name": "selected", + "name": "valueFormat", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Defines the selected state of the component.", + "description": "Determines the format, used for the value attribute.", + "default": "undefined", "privacy": "public", - "inheritedFrom": { - "name": "ListItemBase", - "module": "dist/ListItemBase.js" - } + "_ui5since": "2.14.0" } ], + "superclass": { + "name": "CalendarPart", + "package": "@ui5/webcomponents", + "module": "dist/CalendarPart.js" + }, + "tagName": "ui5-yearrangepicker", + "customElement": true, + "_ui5privacy": "private", "attributes": [ { - "description": "Defines whether the tree list item should display the selection element.", - "name": "hide-selection-element", - "default": "false", - "fieldName": "hideSelectionElement", + "description": "Defines how to calculate calendar weeks and first day of the week.\nIf not set, the calendar will be displayed according to the currently set global configuration.", + "name": "calendar-week-numbering", + "default": "\"Default\"", + "fieldName": "calendarWeekNumbering", "type": { - "text": "boolean" + "text": "\"Default\" | \"ISO_8601\" | \"MiddleEastern\" | \"WesternTraditional\"" } }, { - "description": "If set, an icon will be displayed before the text of the tree list item.", - "name": "icon", + "description": "Determines the format, displayed in the input field.", + "name": "display-format", "default": "undefined", - "fieldName": "icon", + "fieldName": "displayFormat", "type": { "text": "string | undefined" - }, - "inheritedFrom": { - "name": "TreeItemBase", - "module": "dist/TreeItemBase.js" - } - }, - { - "description": "Defines whether the tree list item will show a collapse or expand icon inside its toggle button.", - "name": "expanded", - "default": "false", - "fieldName": "expanded", - "type": { - "text": "boolean" - }, - "inheritedFrom": { - "name": "TreeItemBase", - "module": "dist/TreeItemBase.js" - } - }, - { - "description": "Defines whether the item is movable.", - "name": "movable", - "default": "false", - "fieldName": "movable", - "type": { - "text": "boolean" - }, - "inheritedFrom": { - "name": "TreeItemBase", - "module": "dist/TreeItemBase.js" - } - }, - { - "description": "Defines whether the selection of a tree node is displayed as partially selected.\n\n**Note:** The indeterminate state can be set only programmatically and can’t be achieved by user\ninteraction, meaning that the resulting visual state depends on the values of the `indeterminate`\nand `selected` properties:\n\n- If a tree node has both `selected` and `indeterminate` set to `true`, it is displayed as partially selected.\n- If a tree node has `selected` set to `true` and `indeterminate` set to `false`, it is displayed as selected.\n- If a tree node has `selected` set to `false`, it is displayed as not selected regardless of the value of the `indeterminate` property.\n\n**Note:** This property takes effect only when the `ui5-tree` is in `Multiple` mode.", - "name": "indeterminate", - "default": "false", - "fieldName": "indeterminate", - "type": { - "text": "boolean" - }, - "inheritedFrom": { - "name": "TreeItemBase", - "module": "dist/TreeItemBase.js" - } - }, - { - "description": "Defines whether the tree node has children, even if currently no other tree nodes are slotted inside.\n\n**Note:** This property is useful for showing big tree structures where not all nodes are initially loaded due to performance reasons.\nSet this to `true` for nodes you intend to load lazily, when the user clicks the expand button.\nIt is not necessary to set this property otherwise. If a tree item has children, the expand button will be displayed anyway.", - "name": "has-children", - "default": "false", - "fieldName": "hasChildren", - "type": { - "text": "boolean" - }, - "inheritedFrom": { - "name": "TreeItemBase", - "module": "dist/TreeItemBase.js" - } - }, - { - "description": "Defines the state of the `additionalText`.\n\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", - "name": "additional-text-state", - "default": "\"None\"", - "fieldName": "additionalTextState", - "type": { - "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" - }, - "inheritedFrom": { - "name": "TreeItemBase", - "module": "dist/TreeItemBase.js" } }, { - "description": "Defines the accessible name of the component.", - "name": "accessible-name", + "description": "Determines the format, displayed in the input field.", + "name": "format-pattern", "default": "undefined", - "fieldName": "accessibleName", + "fieldName": "formatPattern", "type": { "text": "string | undefined" }, - "inheritedFrom": { - "name": "TreeItemBase", - "module": "dist/TreeItemBase.js" - } - }, - { - "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.", - "name": "type", - "default": "\"Active\"", - "fieldName": "type", - "type": { - "text": "\"Navigation\" | \"Inactive\" | \"Active\" | \"Detail\"" - }, - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "deprecated": "Use displayFormat and valueFormat instead" }, { - "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaSetsize**: Defines the number of items in the current set when not all items in the set are present in the DOM.\n**Note:** The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`.\n\n\t- **ariaPosinset**: Defines an element's number or position in the current set when not all items are present in the DOM.\n\t**Note:** The value 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.", - "name": "accessibility-attributes", - "default": "{}", - "fieldName": "accessibilityAttributes", + "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).", + "name": "max-date", + "default": "\"\"", + "fieldName": "maxDate", "type": { - "text": "ListItemAccessibilityAttributes" - }, - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" + "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.", - "name": "navigated", - "default": "false", - "fieldName": "navigated", + "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).", + "name": "min-date", + "default": "\"\"", + "fieldName": "minDate", "type": { - "text": "boolean" - }, - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" + "text": "string" } }, { - "description": "Defines the text of the tooltip that would be displayed for the list item.", - "name": "tooltip", + "description": "Sets a calendar type used for display.\nIf not set, the calendar type of the global configuration is used.", + "name": "primary-calendar-type", "default": "undefined", - "fieldName": "tooltip", + "fieldName": "primaryCalendarType", "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" + "text": "\"Gregorian\" | \"Islamic\" | \"Japanese\" | \"Buddhist\" | \"Persian\" | undefined" } }, { - "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", - "name": "highlight", - "default": "\"None\"", - "fieldName": "highlight", + "description": "Defines the secondary calendar type.\nIf not set, the calendar will only show the primary calendar type.", + "name": "secondary-calendar-type", + "default": "undefined", + "fieldName": "secondaryCalendarType", "type": { - "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" - }, - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" + "text": "\"Gregorian\" | \"Islamic\" | \"Japanese\" | \"Buddhist\" | \"Persian\" | undefined" } }, { - "description": "Defines the selected state of the component.", - "name": "selected", - "default": "false", - "fieldName": "selected", - "type": { - "text": "boolean" - }, - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } - } - ], - "superclass": { - "name": "TreeItemBase", - "package": "@ui5/webcomponents", - "module": "dist/TreeItemBase.js" - }, - "tagName": "ui5-tree-item-custom", - "customElement": true, - "_ui5since": "1.9.2", - "_ui5privacy": "public", - "events": [ - { - "name": "detail-click", - "_ui5privacy": "public", + "description": "Determines the format, used for the value attribute.", + "name": "value-format", + "default": "undefined", + "fieldName": "valueFormat", "type": { - "text": "CustomEvent" - }, - "description": "Fired when the user clicks on the detail button when type is `Detail`.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" + "text": "string | undefined" } } ] @@ -32250,58 +33270,13 @@ "kind": "js", "name": "default", "declaration": { - "name": "TreeItemCustom", - "module": "dist/TreeItemCustom.js" + "name": "YearRangePicker", + "module": "dist/YearRangePicker.js" } }, { "kind": "custom-element-definition", - "name": "ui5-tree-item-custom", - "declaration": { - "name": "TreeItemCustom", - "module": "dist/TreeItemCustom.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/TreeList.js", - "declarations": [], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "TreeList", - "module": "dist/TreeList.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/YearPicker.js", - "declarations": [], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "YearPicker", - "module": "dist/YearPicker.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/YearRangePicker.js", - "declarations": [], - "exports": [ - { - "kind": "js", - "name": "default", + "name": "ui5-yearrangepicker", "declaration": { "name": "YearRangePicker", "module": "dist/YearRangePicker.js" @@ -32348,7 +33323,14 @@ "description": "", "name": "DateRange", "_ui5since": "2.11.0", - "_ui5privacy": "public" + "_ui5privacy": "public", + "_ui5implements": [ + { + "name": "IDynamicDateRangeOption", + "package": "@ui5/webcomponents", + "module": "dist/DynamicDateRange.js" + } + ] } ], "exports": [ @@ -32371,7 +33353,14 @@ "description": "", "name": "DateTimeRange", "_ui5since": "2.16.0", - "_ui5privacy": "public" + "_ui5privacy": "public", + "_ui5implements": [ + { + "name": "IDynamicDateRangeOption", + "package": "@ui5/webcomponents", + "module": "dist/DynamicDateRange.js" + } + ] } ], "exports": [ @@ -32394,7 +33383,14 @@ "description": "", "name": "FromDateTime", "_ui5since": "2.11.0", - "_ui5privacy": "public" + "_ui5privacy": "public", + "_ui5implements": [ + { + "name": "IDynamicDateRangeOption", + "package": "@ui5/webcomponents", + "module": "dist/DynamicDateRange.js" + } + ] } ], "exports": [ @@ -32423,7 +33419,14 @@ "description": "", "name": "LastOptions", "_ui5since": "2.14.0", - "_ui5privacy": "public" + "_ui5privacy": "public", + "_ui5implements": [ + { + "name": "IDynamicDateRangeOption", + "package": "@ui5/webcomponents", + "module": "dist/DynamicDateRange.js" + } + ] } ], "exports": [ @@ -32446,7 +33449,14 @@ "description": "", "name": "NextOptions", "_ui5since": "2.14.0", - "_ui5privacy": "public" + "_ui5privacy": "public", + "_ui5implements": [ + { + "name": "IDynamicDateRangeOption", + "package": "@ui5/webcomponents", + "module": "dist/DynamicDateRange.js" + } + ] } ], "exports": [ @@ -32469,7 +33479,14 @@ "description": "", "name": "SingleDate", "_ui5since": "2.11.0", - "_ui5privacy": "public" + "_ui5privacy": "public", + "_ui5implements": [ + { + "name": "IDynamicDateRangeOption", + "package": "@ui5/webcomponents", + "module": "dist/DynamicDateRange.js" + } + ] } ], "exports": [ @@ -32492,7 +33509,14 @@ "description": "", "name": "ToDateTime", "_ui5since": "2.11.0", - "_ui5privacy": "public" + "_ui5privacy": "public", + "_ui5implements": [ + { + "name": "IDynamicDateRangeOption", + "package": "@ui5/webcomponents", + "module": "dist/DynamicDateRange.js" + } + ] } ], "exports": [ @@ -32515,7 +33539,14 @@ "description": "", "name": "Today", "_ui5since": "2.11.0", - "_ui5privacy": "public" + "_ui5privacy": "public", + "_ui5implements": [ + { + "name": "IDynamicDateRangeOption", + "package": "@ui5/webcomponents", + "module": "dist/DynamicDateRange.js" + } + ] } ], "exports": [ @@ -32538,7 +33569,14 @@ "description": "", "name": "Tomorrow", "_ui5since": "2.11.0", - "_ui5privacy": "public" + "_ui5privacy": "public", + "_ui5implements": [ + { + "name": "IDynamicDateRangeOption", + "package": "@ui5/webcomponents", + "module": "dist/DynamicDateRange.js" + } + ] } ], "exports": [ @@ -32561,7 +33599,14 @@ "description": "", "name": "Yesterday", "_ui5since": "2.11.0", - "_ui5privacy": "public" + "_ui5privacy": "public", + "_ui5implements": [ + { + "name": "IDynamicDateRangeOption", + "package": "@ui5/webcomponents", + "module": "dist/DynamicDateRange.js" + } + ] } ], "exports": [ @@ -32655,17 +33700,16 @@ "kind": "field", "static": true, "privacy": "public", - "_ui5since": "2.9.0", - "default": "Auto", - "name": "Auto", + "default": "Accent1", + "name": "Accent1", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "default": "Accent1", - "name": "Accent1", + "default": "Accent10", + "name": "Accent10", "readonly": true }, { @@ -32736,8 +33780,9 @@ "kind": "field", "static": true, "privacy": "public", - "default": "Accent10", - "name": "Accent10", + "_ui5since": "2.9.0", + "default": "Auto", + "name": "Auto", "readonly": true }, { @@ -32812,6 +33857,58 @@ } ] }, + { + "kind": "javascript-module", + "path": "dist/types/AvatarMode.js", + "declarations": [ + { + "kind": "enum", + "name": "AvatarMode", + "description": "Different Avatar modes.", + "_ui5privacy": "public", + "_ui5since": "2.20.0", + "members": [ + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "Decorative mode.\nConfigures the component to internally render role=\"presentation\" and aria-hidden=\"true\",\nmaking it purely decorative without semantic content or interactivity.", + "default": "Decorative", + "name": "Decorative", + "readonly": true + }, + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "Image mode (by default).\nConfigures the component to internally render role=\"img\".", + "default": "Image", + "name": "Image", + "readonly": true + }, + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "Interactive mode.\nConfigures the component to internally render role=\"button\".\nThis mode also supports focus and enables keyboard interaction.", + "default": "Interactive", + "name": "Interactive", + "readonly": true + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "AvatarMode", + "module": "dist/types/AvatarMode.js" + } + } + ] + }, { "kind": "javascript-module", "path": "dist/types/AvatarShape.js", @@ -32868,18 +33965,9 @@ "kind": "field", "static": true, "privacy": "public", - "description": "component size - 2rem\nfont size - 1rem", - "default": "XS", - "name": "XS", - "readonly": true - }, - { - "kind": "field", - "static": true, - "privacy": "public", - "description": "component size - 3rem\nfont size - 1.5rem", - "default": "S", - "name": "S", + "description": "component size - 5rem\nfont size - 2.5rem", + "default": "L", + "name": "L", "readonly": true }, { @@ -32895,9 +33983,9 @@ "kind": "field", "static": true, "privacy": "public", - "description": "component size - 5rem\nfont size - 2.5rem", - "default": "L", - "name": "L", + "description": "component size - 3rem\nfont size - 1.5rem", + "default": "S", + "name": "S", "readonly": true }, { @@ -32908,6 +33996,15 @@ "default": "XL", "name": "XL", "readonly": true + }, + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "component size - 2rem\nfont size - 1rem", + "default": "XS", + "name": "XS", + "readonly": true } ] } @@ -32946,18 +34043,18 @@ "kind": "field", "static": true, "privacy": "public", - "description": "Transparent background.", - "default": "Transparent", - "name": "Transparent", + "description": "A translucent background depending on the opacity value of the theme.", + "default": "Translucent", + "name": "Translucent", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "A translucent background depending on the opacity value of the theme.", - "default": "Translucent", - "name": "Translucent", + "description": "Transparent background.", + "default": "Transparent", + "name": "Transparent", "readonly": true } ] @@ -32989,18 +34086,18 @@ "kind": "field", "static": true, "privacy": "public", - "description": "Represents the ARIA role \"toolbar\".", - "default": "Toolbar", - "name": "Toolbar", + "description": "Represents the ARIA role \"none\".", + "default": "None", + "name": "None", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "Represents the ARIA role \"none\".", - "default": "None", - "name": "None", + "description": "Represents the ARIA role \"toolbar\".", + "default": "Toolbar", + "name": "Toolbar", "readonly": true } ] @@ -33031,36 +34128,36 @@ "kind": "field", "static": true, "privacy": "public", - "description": "Default type", - "default": "Header", - "name": "Header", + "description": "Floating Footer type - there is visible border on all sides", + "default": "FloatingFooter", + "name": "FloatingFooter", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "Subheader type", - "default": "Subheader", - "name": "Subheader", + "description": "Footer type", + "default": "Footer", + "name": "Footer", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "Footer type", - "default": "Footer", - "name": "Footer", + "description": "Default type", + "default": "Header", + "name": "Header", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "Floating Footer type - there is visible border on all sides", - "default": "FloatingFooter", - "name": "FloatingFooter", + "description": "Subheader type", + "default": "Subheader", + "name": "Subheader", "readonly": true } ] @@ -33091,18 +34188,18 @@ "kind": "field", "static": true, "privacy": "public", - "description": "A solid border color dependent on the theme.", - "default": "Solid", - "name": "Solid", + "description": "Specifies no border.", + "default": "None", + "name": "None", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "Specifies no border.", - "default": "None", - "name": "None", + "description": "A solid border color dependent on the theme.", + "default": "Solid", + "name": "Solid", "readonly": true } ] @@ -33133,18 +34230,18 @@ "kind": "field", "static": true, "privacy": "public", - "description": "Shows the current page as the last item in the trail.\nThe last item contains only plain text and is not a link.", - "default": "Standard", - "name": "Standard", + "description": "All items are displayed as links.", + "default": "NoCurrentPage", + "name": "NoCurrentPage", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "All items are displayed as links.", - "default": "NoCurrentPage", - "name": "NoCurrentPage", + "description": "Shows the current page as the last item in the trail.\nThe last item contains only plain text and is not a link.", + "default": "Standard", + "name": "Standard", "readonly": true } ] @@ -33171,15 +34268,6 @@ "description": "Different Breadcrumbs separators.", "_ui5privacy": "public", "members": [ - { - "kind": "field", - "static": true, - "privacy": "public", - "description": "The separator appears as \"/\".", - "default": "Slash", - "name": "Slash", - "readonly": true - }, { "kind": "field", "static": true, @@ -33224,6 +34312,15 @@ "default": "GreaterThan", "name": "GreaterThan", "readonly": true + }, + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "The separator appears as \"/\".", + "default": "Slash", + "name": "Slash", + "readonly": true } ] } @@ -33253,9 +34350,9 @@ "kind": "field", "static": true, "privacy": "public", - "description": "small size", - "default": "S", - "name": "S", + "description": "large size", + "default": "L", + "name": "L", "readonly": true }, { @@ -33271,9 +34368,9 @@ "kind": "field", "static": true, "privacy": "public", - "description": "large size", - "default": "L", - "name": "L", + "description": "small size", + "default": "S", + "name": "S", "readonly": true } ] @@ -33304,18 +34401,18 @@ "kind": "field", "static": true, "privacy": "public", - "description": "The text will be displayed on top of the busy indicator.", - "default": "Top", - "name": "Top", + "description": "The text will be displayed at the bottom of the busy indicator.", + "default": "Bottom", + "name": "Bottom", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "The text will be displayed at the bottom of the busy indicator.", - "default": "Bottom", - "name": "Bottom", + "description": "The text will be displayed on top of the busy indicator.", + "default": "Top", + "name": "Top", "readonly": true } ] @@ -33390,27 +34487,27 @@ "kind": "field", "static": true, "privacy": "public", - "description": "The badge is displayed after the text, inside the button.", - "default": "InlineText", - "name": "InlineText", + "description": "The badge is displayed as an attention dot.", + "default": "AttentionDot", + "name": "AttentionDot", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "The badge is displayed at the top-end corner of the button.\n\n**Note:** According to design guidance, the OverlayText design mode is best used in cozy density to avoid potential visual issues in compact.", - "default": "OverlayText", - "name": "OverlayText", + "description": "The badge is displayed after the text, inside the button.", + "default": "InlineText", + "name": "InlineText", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "The badge is displayed as an attention dot.", - "default": "AttentionDot", - "name": "AttentionDot", + "description": "The badge is displayed at the top-end corner of the button.\n\n**Note:** According to design guidance, the OverlayText design mode is best used in cozy density to avoid potential visual issues in compact.", + "default": "OverlayText", + "name": "OverlayText", "readonly": true } ] @@ -33441,54 +34538,54 @@ "kind": "field", "static": true, "privacy": "public", - "description": "default type (no special styling)", - "default": "Default", - "name": "Default", + "description": "attention type", + "default": "Attention", + "name": "Attention", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "accept type (green button)", - "default": "Positive", - "name": "Positive", + "description": "default type (no special styling)", + "default": "Default", + "name": "Default", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "reject style (red button)", - "default": "Negative", - "name": "Negative", + "description": "emphasized type", + "default": "Emphasized", + "name": "Emphasized", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "transparent type", - "default": "Transparent", - "name": "Transparent", + "description": "reject style (red button)", + "default": "Negative", + "name": "Negative", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "emphasized type", - "default": "Emphasized", - "name": "Emphasized", + "description": "accept type (green button)", + "default": "Positive", + "name": "Positive", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "attention type", - "default": "Attention", - "name": "Attention", + "description": "transparent type", + "default": "Transparent", + "name": "Transparent", "readonly": true } ] @@ -33528,18 +34625,18 @@ "kind": "field", "static": true, "privacy": "public", - "description": "The button acts as a submit button (submits a form)", - "default": "Submit", - "name": "Submit", + "description": "The button acts as a reset button (resets a form)", + "default": "Reset", + "name": "Reset", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "The button acts as a reset button (resets a form)", - "default": "Reset", - "name": "Reset", + "description": "The button acts as a submit button (submits a form)", + "default": "Submit", + "name": "Submit", "readonly": true } ] @@ -33576,15 +34673,6 @@ "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, @@ -33773,6 +34861,15 @@ "default": "Type20", "name": "Type20", "readonly": true + }, + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "Represents the \"Working\" item in the calendar legend.", + "default": "Working", + "name": "Working", + "readonly": true } ] } @@ -33813,15 +34910,6 @@ "description": "Different Calendar selection mode.", "_ui5privacy": "public", "members": [ - { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Only one date can be selected at a time", - "default": "Single", - "name": "Single", - "readonly": true - }, { "kind": "field", "static": true, @@ -33839,6 +34927,15 @@ "default": "Range", "name": "Range", "readonly": true + }, + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "Only one date can be selected at a time", + "default": "Single", + "name": "Single", + "readonly": true } ] } @@ -34013,36 +35110,36 @@ "kind": "field", "static": true, "privacy": "public", - "description": "Defines filtering by first symbol of each word of item's text.", - "default": "StartsWithPerTerm", - "name": "StartsWithPerTerm", + "description": "Defines contains filtering.", + "default": "Contains", + "name": "Contains", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "Defines filtering by starting symbol of item's text.", - "default": "StartsWith", - "name": "StartsWith", + "description": "Removes any filtering applied while typing", + "default": "None", + "name": "None", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "Defines contains filtering.", - "default": "Contains", - "name": "Contains", + "description": "Defines filtering by starting symbol of item's text.", + "default": "StartsWith", + "name": "StartsWith", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "Removes any filtering applied while typing", - "default": "None", - "name": "None", + "description": "Defines filtering by first symbol of each word of item's text.", + "default": "StartsWithPerTerm", + "name": "StartsWithPerTerm", "readonly": true } ] @@ -34165,18 +35262,18 @@ "kind": "field", "static": true, "privacy": "public", - "description": "Normal spacing (smaller vertical space between form items).", - "default": "Normal", - "name": "Normal", + "description": "Large spacing (larger vertical space between form items).", + "default": "Large", + "name": "Large", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "Large spacing (larger vertical space between form items).", - "default": "Large", - "name": "Large", + "description": "Normal spacing (smaller vertical space between form items).", + "default": "Normal", + "name": "Normal", "readonly": true } ] @@ -34207,40 +35304,40 @@ "kind": "field", "static": true, "privacy": "public", - "default": "None", - "name": "None", + "default": "Critical", + "name": "Critical", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "default": "Positive", - "name": "Positive", + "default": "Information", + "name": "Information", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "default": "Critical", - "name": "Critical", + "default": "Negative", + "name": "Negative", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "default": "Negative", - "name": "Negative", + "default": "None", + "name": "None", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "default": "Information", - "name": "Information", + "default": "Positive", + "name": "Positive", "readonly": true } ] @@ -34368,18 +35465,18 @@ "kind": "field", "static": true, "privacy": "public", - "description": "Image mode (by default).\nConfigures the component to internally render role=\"img\".", - "default": "Image", - "name": "Image", + "description": "Decorative mode.\nConfigures the component to internally render role=\"presentation\" and aria-hidden=\"true\",\nmaking it purely decorative without semantic content or interactivity.", + "default": "Decorative", + "name": "Decorative", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "Decorative mode.\nConfigures the component to internally render role=\"presentation\" and aria-hidden=\"true\",\nmaking it purely decorative without semantic content or interactivity.", - "default": "Decorative", - "name": "Decorative", + "description": "Image mode (by default).\nConfigures the component to internally render role=\"img\".", + "default": "Image", + "name": "Image", "readonly": true }, { @@ -34434,36 +35531,36 @@ "kind": "field", "static": true, "privacy": "public", - "description": "Defines filtering by first symbol of each word of item's text.", - "default": "StartsWithPerTerm", - "name": "StartsWithPerTerm", + "description": "Defines contains filtering.", + "default": "Contains", + "name": "Contains", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "Defines filtering by starting symbol of item's text.", - "default": "StartsWith", - "name": "StartsWith", + "description": "Removes any filtering applied while typing", + "default": "None", + "name": "None", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "Defines contains filtering.", - "default": "Contains", - "name": "Contains", + "description": "Defines filtering by starting symbol of item's text.", + "default": "StartsWith", + "name": "StartsWith", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "Removes any filtering applied while typing", - "default": "None", - "name": "None", + "description": "Defines filtering by first symbol of each word of item's text.", + "default": "StartsWithPerTerm", + "name": "StartsWithPerTerm", "readonly": true } ] @@ -34490,15 +35587,6 @@ "description": "Different input types.", "_ui5privacy": "public", "members": [ - { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Defines a one-line text input field:", - "default": "Text", - "name": "Text", - "readonly": true - }, { "kind": "field", "static": true, @@ -34526,6 +35614,16 @@ "name": "Password", "readonly": true }, + { + "kind": "field", + "static": true, + "privacy": "public", + "_ui5since": "2.0.0", + "description": "Used for input fields that should contain a search term.", + "default": "Search", + "name": "Search", + "readonly": true + }, { "kind": "field", "static": true, @@ -34539,19 +35637,18 @@ "kind": "field", "static": true, "privacy": "public", - "description": "Used for input fields that should contain a URL address.", - "default": "URL", - "name": "URL", + "description": "Defines a one-line text input field:", + "default": "Text", + "name": "Text", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "_ui5since": "2.0.0", - "description": "Used for input fields that should contain a search term.", - "default": "Search", - "name": "Search", + "description": "Used for input fields that should contain a URL address.", + "default": "URL", + "name": "URL", "readonly": true } ] @@ -34583,18 +35680,18 @@ "kind": "field", "static": true, "privacy": "public", - "description": "The default target area size (the area taken by the component itself without any extra invisible touch area).", - "default": "Normal", - "name": "Normal", + "description": "Enlarged target area size (up to 24px in height) provides users with an enhanced dedicated space to interact with the component.", + "default": "Large", + "name": "Large", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "Enlarged target area size (up to 24px in height) provides users with an enhanced dedicated space to interact with the component.", - "default": "Large", - "name": "Large", + "description": "The default target area size (the area taken by the component itself without any extra invisible touch area).", + "default": "Normal", + "name": "Normal", "readonly": true } ] @@ -34626,18 +35723,18 @@ "kind": "field", "static": true, "privacy": "public", - "description": "Represents Default (link) ARIA role.", - "default": "Link", - "name": "Link", + "description": "Represents the ARIA role \"button\".", + "default": "Button", + "name": "Button", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "Represents the ARIA role \"button\".", - "default": "Button", - "name": "Button", + "description": "Represents Default (link) ARIA role.", + "default": "Link", + "name": "Link", "readonly": true } ] @@ -34677,18 +35774,18 @@ "kind": "field", "static": true, "privacy": "public", - "description": "subtle type (appears as regular text, rather than a link)", - "default": "Subtle", - "name": "Subtle", + "description": "emphasized type", + "default": "Emphasized", + "name": "Emphasized", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "emphasized type", - "default": "Emphasized", - "name": "Emphasized", + "description": "subtle type (appears as regular text, rather than a link)", + "default": "Subtle", + "name": "Subtle", "readonly": true } ] @@ -34729,27 +35826,27 @@ "kind": "field", "static": true, "privacy": "public", - "description": "Represents the ARIA role \"menu\".", - "default": "Menu", - "name": "Menu", + "description": "Represents the ARIA role \"listbox\".", + "default": "ListBox", + "name": "ListBox", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "Represents the ARIA role \"tree\".", - "default": "Tree", - "name": "Tree", + "description": "Represents the ARIA role \"menu\".", + "default": "Menu", + "name": "Menu", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "Represents the ARIA role \"listbox\".", - "default": "ListBox", - "name": "ListBox", + "description": "Represents the ARIA role \"tree\".", + "default": "Tree", + "name": "Tree", "readonly": true } ] @@ -34789,18 +35886,18 @@ "kind": "field", "static": true, "privacy": "public", - "description": "Component's \"load-more\" is fired upon scroll.", - "default": "Scroll", - "name": "Scroll", + "description": "Component's growing is not enabled.", + "default": "None", + "name": "None", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "Component's growing is not enabled.", - "default": "None", - "name": "None", + "description": "Component's \"load-more\" is fired upon scroll.", + "default": "Scroll", + "name": "Scroll", "readonly": true } ] @@ -34850,9 +35947,9 @@ "kind": "field", "static": true, "privacy": "public", - "description": "Represents the ARIA role \"treeitem\".", - "default": "TreeItem", - "name": "TreeItem", + "description": "Represents the ARIA role \"none\".", + "default": "None", + "name": "None", "readonly": true }, { @@ -34868,9 +35965,9 @@ "kind": "field", "static": true, "privacy": "public", - "description": "Represents the ARIA role \"none\".", - "default": "None", - "name": "None", + "description": "Represents the ARIA role \"treeitem\".", + "default": "TreeItem", + "name": "TreeItem", "readonly": true } ] @@ -34897,15 +35994,6 @@ "description": "Different list item types.", "_ui5privacy": "public", "members": [ - { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Indicates the list item does not have any active feedback when item is pressed.", - "default": "Inactive", - "name": "Inactive", - "readonly": true - }, { "kind": "field", "static": true, @@ -34924,6 +36012,15 @@ "name": "Detail", "readonly": true }, + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "Indicates the list item does not have any active feedback when item is pressed.", + "default": "Inactive", + "name": "Inactive", + "readonly": true + }, { "kind": "field", "static": true, @@ -34961,36 +36058,36 @@ "kind": "field", "static": true, "privacy": "public", - "description": "Default mode (no selection).", - "default": "None", - "name": "None", + "description": "Delete mode (only one list item can be deleted via provided delete button)", + "default": "Delete", + "name": "Delete", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "Right-positioned single selection mode (only one list item can be selected).", - "default": "Single", - "name": "Single", + "description": "Multi selection mode (more than one list item can be selected).", + "default": "Multiple", + "name": "Multiple", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "Left-positioned single selection mode (only one list item can be selected).", - "default": "SingleStart", - "name": "SingleStart", + "description": "Default mode (no selection).", + "default": "None", + "name": "None", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "Selected item is highlighted but no selection element is visible\n(only one list item can be selected).", - "default": "SingleEnd", - "name": "SingleEnd", + "description": "Right-positioned single selection mode (only one list item can be selected).", + "default": "Single", + "name": "Single", "readonly": true }, { @@ -35006,18 +36103,18 @@ "kind": "field", "static": true, "privacy": "public", - "description": "Multi selection mode (more than one list item can be selected).", - "default": "Multiple", - "name": "Multiple", + "description": "Selected item is highlighted but no selection element is visible\n(only one list item can be selected).", + "default": "SingleEnd", + "name": "SingleEnd", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "Delete mode (only one list item can be deleted via provided delete button)", - "default": "Delete", - "name": "Delete", + "description": "Left-positioned single selection mode (only one list item can be selected).", + "default": "SingleStart", + "name": "SingleStart", "readonly": true } ] @@ -35101,27 +36198,27 @@ "kind": "field", "static": true, "privacy": "public", - "description": "default type (items in a group cannot be checked)", - "default": "None", - "name": "None", + "description": "Multiple items check mode (multiple items in a group can be checked at a time)", + "default": "Multiple", + "name": "Multiple", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "Single item check mode (only one item in a group can be checked at a time)", - "default": "Single", - "name": "Single", + "description": "default type (items in a group cannot be checked)", + "default": "None", + "name": "None", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "Multiple items check mode (multiple items in a group can be checked at a time)", - "default": "Multiple", - "name": "Multiple", + "description": "Single item check mode (only one item in a group can be checked at a time)", + "default": "Single", + "name": "Single", "readonly": true } ] @@ -35152,54 +36249,54 @@ "kind": "field", "static": true, "privacy": "public", - "description": "Message should be just an information", - "default": "Information", - "name": "Information", + "description": "Message uses custom color set 1", + "default": "ColorSet1", + "name": "ColorSet1", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "Message is a success message", - "default": "Positive", - "name": "Positive", + "description": "Message uses custom color set 2", + "default": "ColorSet2", + "name": "ColorSet2", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "Message is an error", - "default": "Negative", - "name": "Negative", + "description": "Message is a warning", + "default": "Critical", + "name": "Critical", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "Message is a warning", - "default": "Critical", - "name": "Critical", + "description": "Message should be just an information", + "default": "Information", + "name": "Information", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "Message uses custom color set 1", - "default": "ColorSet1", - "name": "ColorSet1", + "description": "Message is an error", + "default": "Negative", + "name": "Negative", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "Message uses custom color set 2", - "default": "ColorSet2", - "name": "ColorSet2", + "description": "Message is a success message", + "default": "Positive", + "name": "Positive", "readonly": true } ] @@ -35374,18 +36471,18 @@ "kind": "field", "static": true, "privacy": "public", - "description": "Popover is aligned with the start of the target.", - "default": "Start", - "name": "Start", + "description": "Popover is aligned with the end of the target.", + "default": "End", + "name": "End", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "Popover is aligned with the end of the target.", - "default": "End", - "name": "End", + "description": "Popover is aligned with the start of the target.", + "default": "Start", + "name": "Start", "readonly": true }, { @@ -35425,9 +36522,9 @@ "kind": "field", "static": true, "privacy": "public", - "description": "Popover will be placed at the start of the reference element.", - "default": "Start", - "name": "Start", + "description": "Popover will be placed at the bottom of the reference element.", + "default": "Bottom", + "name": "Bottom", "readonly": true }, { @@ -35443,18 +36540,18 @@ "kind": "field", "static": true, "privacy": "public", - "description": "Popover will be placed at the top of the reference element.", - "default": "Top", - "name": "Top", + "description": "Popover will be placed at the start of the reference element.", + "default": "Start", + "name": "Start", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "Popover will be placed at the bottom of the reference element.", - "default": "Bottom", - "name": "Bottom", + "description": "Popover will be placed at the top of the reference element.", + "default": "Top", + "name": "Top", "readonly": true } ] @@ -35485,35 +36582,35 @@ "kind": "field", "static": true, "privacy": "public", - "default": "Center", - "name": "Center", + "description": "Popover will be placed at the bottom of the reference control.", + "default": "Bottom", + "name": "Bottom", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "Popover will be placed at the top of the reference control.", - "default": "Top", - "name": "Top", + "default": "Center", + "name": "Center", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "Popover will be placed at the bottom of the reference control.", - "default": "Bottom", - "name": "Bottom", + "description": "Popover will be streched", + "default": "Stretch", + "name": "Stretch", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "Popover will be streched", - "default": "Stretch", - "name": "Stretch", + "description": "Popover will be placed at the top of the reference control.", + "default": "Top", + "name": "Top", "readonly": true } ] @@ -35544,9 +36641,9 @@ "kind": "field", "static": true, "privacy": "public", - "description": "Represents no ARIA role.", - "default": "None", - "name": "None", + "description": "Represents the ARIA role \"alertdialog\".", + "default": "AlertDialog", + "name": "AlertDialog", "readonly": true }, { @@ -35562,9 +36659,9 @@ "kind": "field", "static": true, "privacy": "public", - "description": "Represents the ARIA role \"alertdialog\".", - "default": "AlertDialog", - "name": "AlertDialog", + "description": "Represents no ARIA role.", + "default": "None", + "name": "None", "readonly": true } ] @@ -35604,18 +36701,18 @@ "kind": "field", "static": true, "privacy": "public", - "description": "Medium priority.", - "default": "Medium", - "name": "Medium", + "description": "Low priority.", + "default": "Low", + "name": "Low", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "Low priority.", - "default": "Low", - "name": "Low", + "description": "Medium priority.", + "default": "Medium", + "name": "Medium", "readonly": true }, { @@ -35656,9 +36753,9 @@ "kind": "field", "static": true, "privacy": "public", - "description": "Small size for compact layouts.", - "default": "S", - "name": "S", + "description": "Large size for prominent or spacious layouts.", + "default": "L", + "name": "L", "readonly": true }, { @@ -35674,9 +36771,9 @@ "kind": "field", "static": true, "privacy": "public", - "description": "Large size for prominent or spacious layouts.", - "default": "L", - "name": "L", + "description": "Small size for compact layouts.", + "default": "S", + "name": "S", "readonly": true } ] @@ -35707,18 +36804,18 @@ "kind": "field", "static": true, "privacy": "public", - "description": "There is always one selected. Selecting one deselects the previous one.", - "default": "Single", - "name": "Single", + "description": "Multiple items can be selected at a time. All items can be deselected.", + "default": "Multiple", + "name": "Multiple", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "Multiple items can be selected at a time. All items can be deselected.", - "default": "Multiple", - "name": "Multiple", + "description": "There is always one selected. Selecting one deselects the previous one.", + "default": "Single", + "name": "Single", "readonly": true } ] @@ -35801,18 +36898,18 @@ "kind": "field", "static": true, "privacy": "public", - "description": "Default color (brand color)", - "default": "Default", - "name": "Default", + "description": "Critical color", + "default": "Critical", + "name": "Critical", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "Positive color", - "default": "Positive", - "name": "Positive", + "description": "Default color (brand color)", + "default": "Default", + "name": "Default", "readonly": true }, { @@ -35828,18 +36925,18 @@ "kind": "field", "static": true, "privacy": "public", - "description": "Critical color", - "default": "Critical", - "name": "Critical", + "description": "Neutral color.", + "default": "Neutral", + "name": "Neutral", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "Neutral color.", - "default": "Neutral", - "name": "Neutral", + "description": "Positive color", + "default": "Positive", + "name": "Positive", "readonly": true } ] @@ -35870,18 +36967,18 @@ "kind": "field", "static": true, "privacy": "public", - "description": "Defines the Switch as Textual", - "default": "Textual", - "name": "Textual", + "description": "Defines the Switch as Graphical", + "default": "Graphical", + "name": "Graphical", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "Defines the Switch as Graphical", - "default": "Graphical", - "name": "Graphical", + "description": "Defines the Switch as Textual", + "default": "Textual", + "name": "Textual", "readonly": true } ] @@ -35970,40 +37067,40 @@ "kind": "field", "static": true, "privacy": "public", - "default": "Left", - "name": "Left", + "default": "Center", + "name": "Center", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "default": "Start", - "name": "Start", + "default": "End", + "name": "End", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "default": "Right", - "name": "Right", + "default": "Left", + "name": "Left", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "default": "End", - "name": "End", + "default": "Right", + "name": "Right", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "default": "Center", - "name": "Center", + "default": "Start", + "name": "Start", "readonly": true } ] @@ -36069,26 +37166,25 @@ { "kind": "enum", "name": "TableOverflowMode", - "description": "Overflow mode of the <ui5-table> component.", - "_ui5experimental": true, + "description": "Overflow mode of the `ui5-table` component.", "_ui5privacy": "public", "members": [ { "kind": "field", "static": true, "privacy": "public", - "description": "Shows a scrollbar, when the table cannot fit all columns.", - "default": "Scroll", - "name": "Scroll", + "description": "Pops in columns, that do not fit into the table anymore.", + "default": "Popin", + "name": "Popin", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "Pops in columns, that do not fit into the table anymore.", - "default": "Popin", - "name": "Popin", + "description": "Shows a scrollbar, when the table cannot fit all columns.", + "default": "Scroll", + "name": "Scroll", "readonly": true } ] @@ -36120,18 +37216,18 @@ "kind": "field", "static": true, "privacy": "public", - "description": "Rows can only be selected by using the row selector column.", - "default": "RowSelector", - "name": "RowSelector", + "description": "Rows can only be selected by clicking directly on the row, as the row selector column is hidden.\n\n**Note:** In this mode, the `row-click` event of the `ui5-table` component is not fired.", + "default": "RowOnly", + "name": "RowOnly", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "Rows can only be selected by clicking directly on the row, as the row selector column is hidden.\n\n**Note:** In this mode, the `row-click` event of the `ui5-table` component is not fired.", - "default": "RowOnly", - "name": "RowOnly", + "description": "Rows can only be selected by using the row selector column.", + "default": "RowSelector", + "name": "RowSelector", "readonly": true } ] @@ -36164,27 +37260,27 @@ "kind": "field", "static": true, "privacy": "public", - "description": "Default mode (no selection).", - "default": "None", - "name": "None", + "description": "Multi selection mode (more than one table row can be selected).", + "default": "Multiple", + "name": "Multiple", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "Single selection mode (only one table row can be selected).", - "default": "Single", - "name": "Single", + "description": "Default mode (no selection).", + "default": "None", + "name": "None", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "Multi selection mode (more than one table row can be selected).", - "default": "Multiple", - "name": "Multiple", + "description": "Single selection mode (only one table row can be selected).", + "default": "Single", + "name": "Single", "readonly": true } ] @@ -36216,18 +37312,18 @@ "kind": "field", "static": true, "privacy": "public", - "description": "Renders a checkbox in the table header row that toggles the selection of all rows.", - "default": "SelectAll", - "name": "SelectAll", + "description": "Renders an icon in the table header row that removes the selection of all rows.", + "default": "ClearAll", + "name": "ClearAll", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "Renders an icon in the table header row that removes the selection of all rows.", - "default": "ClearAll", - "name": "ClearAll", + "description": "Renders a checkbox in the table header row that toggles the selection of all rows.", + "default": "SelectAll", + "name": "SelectAll", "readonly": true } ] @@ -36258,36 +37354,36 @@ "kind": "field", "static": true, "privacy": "public", - "description": "Set1 of generic indication colors that are intended for industry-specific use cases", - "default": "Set1", - "name": "Set1", + "description": "Critical design", + "default": "Critical", + "name": "Critical", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "Set2 of generic indication colors that are intended for industry-specific use cases", - "default": "Set2", - "name": "Set2", + "description": "Information design", + "default": "Information", + "name": "Information", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "Neutral design", - "default": "Neutral", - "name": "Neutral", + "description": "Negative design", + "default": "Negative", + "name": "Negative", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "Information design", - "default": "Information", - "name": "Information", + "description": "Neutral design", + "default": "Neutral", + "name": "Neutral", "readonly": true }, { @@ -36303,18 +37399,18 @@ "kind": "field", "static": true, "privacy": "public", - "description": "Negative design", - "default": "Negative", - "name": "Negative", + "description": "Set1 of generic indication colors that are intended for industry-specific use cases", + "default": "Set1", + "name": "Set1", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "Critical design", - "default": "Critical", - "name": "Critical", + "description": "Set2 of generic indication colors that are intended for industry-specific use cases", + "default": "Set2", + "name": "Set2", "readonly": true } ] @@ -36345,18 +37441,18 @@ "kind": "field", "static": true, "privacy": "public", - "description": "Small size of the tag", - "default": "S", - "name": "S", + "description": "Large size of the tag", + "default": "L", + "name": "L", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "Large size of the tag", - "default": "L", - "name": "L", + "description": "Small size of the tag", + "default": "S", + "name": "S", "readonly": true } ] @@ -36507,36 +37603,27 @@ "kind": "field", "static": true, "privacy": "public", - "description": "Toast is placed at the `TopStart` position of its container.", - "default": "TopStart", - "name": "TopStart", - "readonly": true - }, - { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Toast is placed at the `TopCenter` position of its container.", - "default": "TopCenter", - "name": "TopCenter", + "description": "Toast is placed at the `BottomCenter` position of its container.\nDefault placement (no selection)", + "default": "BottomCenter", + "name": "BottomCenter", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "Toast is placed at the `TopEnd` position of its container.", - "default": "TopEnd", - "name": "TopEnd", + "description": "Toast is placed at the `BottomEnd` position of its container.", + "default": "BottomEnd", + "name": "BottomEnd", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "Toast is placed at the `MiddleStart` position of its container.", - "default": "MiddleStart", - "name": "MiddleStart", + "description": "Toast is placed at the `BottomStart` position of its container.", + "default": "BottomStart", + "name": "BottomStart", "readonly": true }, { @@ -36561,27 +37648,36 @@ "kind": "field", "static": true, "privacy": "public", - "description": "Toast is placed at the `BottomStart` position of its container.", - "default": "BottomStart", - "name": "BottomStart", + "description": "Toast is placed at the `MiddleStart` position of its container.", + "default": "MiddleStart", + "name": "MiddleStart", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "Toast is placed at the `BottomCenter` position of its container.\nDefault placement (no selection)", - "default": "BottomCenter", - "name": "BottomCenter", + "description": "Toast is placed at the `TopCenter` position of its container.", + "default": "TopCenter", + "name": "TopCenter", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "Toast is placed at the `BottomEnd` position of its container.", - "default": "BottomEnd", - "name": "BottomEnd", + "description": "Toast is placed at the `TopEnd` position of its container.", + "default": "TopEnd", + "name": "TopEnd", + "readonly": true + }, + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "Toast is placed at the `TopStart` position of its container.", + "default": "TopStart", + "name": "TopStart", "readonly": true } ] @@ -36612,18 +37708,18 @@ "kind": "field", "static": true, "privacy": "public", - "description": "Toolbar items are situated at the `start` of the Toolbar", - "default": "Start", - "name": "Start", + "description": "Toolbar items are situated at the `end` of the Toolbar", + "default": "End", + "name": "End", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "Toolbar items are situated at the `end` of the Toolbar", - "default": "End", - "name": "End", + "description": "Toolbar items are situated at the `start` of the Toolbar", + "default": "Start", + "name": "Start", "readonly": true } ] @@ -36697,27 +37793,27 @@ "kind": "field", "static": true, "privacy": "public", - "description": "The item is presented inside the toolbar and goes in the popover, when there is not enough space.", - "default": "Default", - "name": "Default", + "description": "When set, the item will be always part of the overflow part of ui5-toolbar.", + "default": "AlwaysOverflow", + "name": "AlwaysOverflow", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "When set, the item will never go to the overflow popover.", - "default": "NeverOverflow", - "name": "NeverOverflow", + "description": "The item is presented inside the toolbar and goes in the popover, when there is not enough space.", + "default": "Default", + "name": "Default", "readonly": true }, { "kind": "field", "static": true, "privacy": "public", - "description": "When set, the item will be always part of the overflow part of ui5-toolbar.", - "default": "AlwaysOverflow", - "name": "AlwaysOverflow", + "description": "When set, the item will never go to the overflow popover.", + "default": "NeverOverflow", + "name": "NeverOverflow", "readonly": true } ] diff --git a/packages/main/src/webComponents/Avatar/index.tsx b/packages/main/src/webComponents/Avatar/index.tsx index 601bf0ae498..80aca65587d 100644 --- a/packages/main/src/webComponents/Avatar/index.tsx +++ b/packages/main/src/webComponents/Avatar/index.tsx @@ -3,6 +3,7 @@ import '@ui5/webcomponents/dist/Avatar.js'; import type { AvatarAccessibilityAttributes } from '@ui5/webcomponents/dist/Avatar.js'; import type AvatarColorScheme from '@ui5/webcomponents/dist/types/AvatarColorScheme.js'; +import type AvatarMode from '@ui5/webcomponents/dist/types/AvatarMode.js'; import type AvatarShape from '@ui5/webcomponents/dist/types/AvatarShape.js'; import type AvatarSize from '@ui5/webcomponents/dist/types/AvatarSize.js'; import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base'; @@ -93,12 +94,32 @@ interface AvatarAttributes { /** * Defines if the avatar is interactive (focusable and pressable). * + * **Note:** When set to `true`, this property takes precedence over the `mode` property, + * and the avatar will be rendered as interactive (role="button", focusable) regardless of the `mode` value. + * * **Note:** This property won't have effect if the `disabled` * property is set to `true`. * @default false + * @deprecated Set `mode="Interactive"` instead for the same functionality with proper accessibility. */ interactive?: boolean; + /** + * Defines the mode of the component. + * + * **Note:** + * - `Image` (default) - renders with role="img" + * - `Decorative` - renders with role="presentation" and aria-hidden="true", making it purely decorative + * - `Interactive` - renders with role="button", focusable (tabindex="0"), and supports keyboard interaction + * + * **Note:** This property is ignored when the `interactive` property is set to `true`. + * In that case, the avatar will always be rendered as interactive. + * + * **Note:** Available since [v2.20](https://github.com/UI5/webcomponents/releases/tag/v2.20) of **@ui5/webcomponents**. + * @default "Image" + */ + mode?: AvatarMode | keyof typeof AvatarMode; + /** * Defines the shape of the component. * @default "Circle" @@ -119,6 +140,10 @@ interface AvatarPropTypes /** * Defines the optional badge that will be used for visual affordance. * + * **Recommendation:** While badges are supported on all avatars, it is recommended + * to use them with interactive avatars (via `mode="Interactive"` or `interactive` attribute) + * to provide better user experience and accessibility. + * * **Note:** While the slot allows for custom badges, to achieve * the Fiori design, use the `AvatarBadge` component. * @@ -169,7 +194,7 @@ interface AvatarPropTypes * * ### Keyboard Handling * - * - [Space] / [Enter] or [Return] - Fires the `click` event if the `interactive` property is set to true. + * - [Space] / [Enter] or [Return] - Fires the `click` event if the `mode` is set to `Interactive` or the deprecated `interactive` property is set to true. * - [Shift] - If [Space] is pressed, pressing [Shift] releases the component without triggering the click event. * * @@ -178,7 +203,17 @@ interface AvatarPropTypes */ const Avatar = withWebComponent<AvatarPropTypes, AvatarDomRef>( 'ui5-avatar', - ['accessibilityAttributes', 'accessibleName', 'colorScheme', 'fallbackIcon', 'icon', 'initials', 'shape', 'size'], + [ + 'accessibilityAttributes', + 'accessibleName', + 'colorScheme', + 'fallbackIcon', + 'icon', + 'initials', + 'mode', + 'shape', + 'size', + ], ['disabled', 'interactive'], ['badge'], ['click'], diff --git a/packages/main/src/webComponents/Carousel/index.tsx b/packages/main/src/webComponents/Carousel/index.tsx index aaf3a88100d..ff4c4ff5153 100644 --- a/packages/main/src/webComponents/Carousel/index.tsx +++ b/packages/main/src/webComponents/Carousel/index.tsx @@ -112,6 +112,7 @@ interface CarouselDomRef extends Required<CarouselAttributes>, Ui5DomRef { /** * Changes the currently displayed page. * @param {number} itemIndex - The index of the target item + * @returns {void} */ navigateTo: (itemIndex: number) => void; diff --git a/packages/main/src/webComponents/ColorPalette/index.tsx b/packages/main/src/webComponents/ColorPalette/index.tsx index 4efb503205d..3459589da48 100644 --- a/packages/main/src/webComponents/ColorPalette/index.tsx +++ b/packages/main/src/webComponents/ColorPalette/index.tsx @@ -6,11 +6,28 @@ import { withWebComponent } from '@ui5/webcomponents-react-base'; import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; -interface ColorPaletteAttributes {} +interface ColorPaletteAttributes { + /** + * Defines the accessible name of the component. + * + * **Note:** Available since [v2.20.0](https://github.com/UI5/webcomponents/releases/tag/v2.20.0) of **@ui5/webcomponents**. + * @default undefined + */ + accessibleName?: string | undefined; + + /** + * Receives id(or many ids) of the elements that label the component. + * + * **Note:** Available since [v2.20.0](https://github.com/UI5/webcomponents/releases/tag/v2.20.0) of **@ui5/webcomponents**. + * @default undefined + */ + accessibleNameRef?: string | undefined; +} interface ColorPaletteDomRef extends Required<ColorPaletteAttributes>, Ui5DomRef {} -interface ColorPalettePropTypes extends ColorPaletteAttributes, Omit<CommonProps, 'children' | 'onItemClick'> { +interface ColorPalettePropTypes + extends ColorPaletteAttributes, Omit<CommonProps, keyof ColorPaletteAttributes | 'children' | 'onItemClick'> { /** * Defines the `ColorPaletteItem` elements. * @@ -41,7 +58,7 @@ interface ColorPalettePropTypes extends ColorPaletteAttributes, Omit<CommonProps */ const ColorPalette = withWebComponent<ColorPalettePropTypes, ColorPaletteDomRef>( 'ui5-color-palette', - [], + ['accessibleName', 'accessibleNameRef'], [], [], ['item-click'], diff --git a/packages/main/src/webComponents/ColorPalettePopover/index.tsx b/packages/main/src/webComponents/ColorPalettePopover/index.tsx index 213b079a0e8..9d05e186599 100644 --- a/packages/main/src/webComponents/ColorPalettePopover/index.tsx +++ b/packages/main/src/webComponents/ColorPalettePopover/index.tsx @@ -8,6 +8,22 @@ import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '@ui5/webcomponents- import type { ReactNode } from 'react'; interface ColorPalettePopoverAttributes { + /** + * Defines the accessible name of the component. + * + * **Note:** Available since [v2.20.0](https://github.com/UI5/webcomponents/releases/tag/v2.20.0) of **@ui5/webcomponents**. + * @default undefined + */ + accessibleName?: string | undefined; + + /** + * Receives id(or many ids) of the elements that label the component. + * + * **Note:** Available since [v2.20.0](https://github.com/UI5/webcomponents/releases/tag/v2.20.0) of **@ui5/webcomponents**. + * @default undefined + */ + accessibleNameRef?: string | undefined; + /** * Defines the default color of the component. * @@ -114,7 +130,7 @@ interface ColorPalettePopoverPropTypes */ const ColorPalettePopover = withWebComponent<ColorPalettePopoverPropTypes, ColorPalettePopoverDomRef>( 'ui5-color-palette-popover', - ['defaultColor', 'opener', 'placement'], + ['accessibleName', 'accessibleNameRef', 'defaultColor', 'opener', 'placement'], ['open', 'showDefaultColor', 'showMoreColors', 'showRecentColors'], [], ['close', 'item-click'], diff --git a/packages/main/src/webComponents/ColorPicker/index.tsx b/packages/main/src/webComponents/ColorPicker/index.tsx index 4e33ae2da2f..b73aeafa12a 100644 --- a/packages/main/src/webComponents/ColorPicker/index.tsx +++ b/packages/main/src/webComponents/ColorPicker/index.tsx @@ -5,6 +5,22 @@ import { withWebComponent } from '@ui5/webcomponents-react-base'; import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '@ui5/webcomponents-react-base'; interface ColorPickerAttributes { + /** + * Defines the accessible name of the component. + * + * **Note:** Available since [v2.20.0](https://github.com/UI5/webcomponents/releases/tag/v2.20.0) of **@ui5/webcomponents**. + * @default undefined + */ + accessibleName?: string | undefined; + + /** + * Receives id(or many ids) of the elements that label the component. + * + * **Note:** Available since [v2.20.0](https://github.com/UI5/webcomponents/releases/tag/v2.20.0) of **@ui5/webcomponents**. + * @default undefined + */ + accessibleNameRef?: string | undefined; + /** * Determines the name by which the component will be identified upon submission in an HTML form. * @@ -66,7 +82,7 @@ interface ColorPickerPropTypes */ const ColorPicker = withWebComponent<ColorPickerPropTypes, ColorPickerDomRef>( 'ui5-color-picker', - ['name', 'value'], + ['accessibleName', 'accessibleNameRef', 'name', 'value'], ['simplified'], [], ['change'], diff --git a/packages/main/src/webComponents/ComboBox/index.tsx b/packages/main/src/webComponents/ComboBox/index.tsx index ea0bc6e2f55..3905fb5a952 100644 --- a/packages/main/src/webComponents/ComboBox/index.tsx +++ b/packages/main/src/webComponents/ComboBox/index.tsx @@ -89,6 +89,26 @@ interface ComboBoxAttributes { */ required?: boolean; + /** + * Defines the value of the selected item (references the `value` property of `ComboBoxItem`). + * + * Use this property to work with unique identifiers (IDs, codes) instead of display text. + * When set, the ComboBox finds and selects the item whose `value` property matches this property. + * + * **Benefits:** + * - Select items programmatically by their unique identifier + * - Handle items with identical display text but different underlying values + * - Submit machine-readable values in forms (the item's `value` is submitted instead of the display text) + * + * **When to use `selectedValue` vs `value`:** + * - **Recommended:** Use `selectedValue` + item `value` when you need unique identifiers separate from display text (e.g., country codes "DE", "FR" with display names "Germany", "France") + * - Use only the ComboBox `value` property when the display text itself is sufficient for your use case + * + * **Note:** Available since [v2.20.0](https://github.com/UI5/webcomponents/releases/tag/v2.20.0) of **@ui5/webcomponents**. + * @default undefined + */ + selectedValue?: string | undefined; + /** * Defines whether the clear icon of the combobox will be shown. * @@ -228,6 +248,32 @@ interface ComboBoxPropTypes * - Drop-down arrow - expands\collapses the option list. * - Option list - the list of available options. * + * ### Working with Values + * + * The ComboBox offers two ways to work with item selection: + * + * **1. Display Text Only (using `value`):** + * ```html + * <ComboBox value="Germany"> + * <ComboBoxItem text="Germany"></ComboBoxItem> + * <ComboBoxItem text="France"></ComboBoxItem> + * </ComboBox> + * ``` + * Use this approach when the displayed text is sufficient for your needs. + * + * **2. Unique Identifiers - Recommended (using `selectedValue` and item `value`):** + * ```html + * <ComboBox value="Germany" selected-value="DE"> + * <ComboBoxItem text="Germany" value="DE"></ComboBoxItem> + * <ComboBoxItem text="France" value="FR"></ComboBoxItem> + * </ComboBox> + * ``` + * This is the recommended approach when you need to work with unique identifiers (IDs, codes) separate from display text. + * The `selectedValue` property references the `value` property of the selected item. + * In forms, the item's `value` (e.g., "DE") will be submitted instead of the display text. + * + * **Important:** Do not mix the `selectedValue` approach with the deprecated `selected` property on items. + * * ### Keyboard Handling * * The `ComboBox` provides advanced keyboard handling. @@ -249,7 +295,7 @@ interface ComboBoxPropTypes */ const ComboBox = withWebComponent<ComboBoxPropTypes, ComboBoxDomRef>( 'ui5-combobox', - ['accessibleName', 'accessibleNameRef', 'filter', 'name', 'placeholder', 'value', 'valueState'], + ['accessibleName', 'accessibleNameRef', 'filter', 'name', 'placeholder', 'selectedValue', 'value', 'valueState'], ['disabled', 'loading', 'noTypeahead', 'open', 'readonly', 'required', 'showClearIcon'], ['icon', 'valueStateMessage'], ['change', 'close', 'input', 'open', 'selection-change'], diff --git a/packages/main/src/webComponents/ComboBoxItem/index.tsx b/packages/main/src/webComponents/ComboBoxItem/index.tsx index 41ae9990f45..7dfe7f8987f 100644 --- a/packages/main/src/webComponents/ComboBoxItem/index.tsx +++ b/packages/main/src/webComponents/ComboBoxItem/index.tsx @@ -16,6 +16,32 @@ interface ComboBoxItemAttributes { * @default undefined */ text?: string | undefined; + + /** + * Defines the value of the `ComboBoxItem`. + * + * Use this property to associate a unique identifier or machine-readable value with the item, + * separate from the display text. This enables: + * - Selecting items programmatically via `selectedValue` on the ComboBox + * - Submitting machine-readable values in forms + * - Distinguishing between items with identical display text + * + * **When to use:** + * - **Recommended:** Use the `value` property on items together with `selectedValue` on the ComboBox when you need unique identifiers + * - Omit `value` if the display text (`text` property) is sufficient for your use case + * + * **Example:** + * ```html + * <ComboBox selected-value="DE"> + * <ComboBoxItem text="Germany" value="DE"></ComboBoxItem> + * <ComboBoxItem text="France" value="FR"></ComboBoxItem> + * </ComboBox> + * ``` + * + * **Note:** Available since [v2.20.0](https://github.com/UI5/webcomponents/releases/tag/v2.20.0) of **@ui5/webcomponents**. + * @default undefined + */ + value?: string | undefined; } interface ComboBoxItemDomRef extends Required<ComboBoxItemAttributes>, Ui5DomRef {} @@ -29,7 +55,7 @@ interface ComboBoxItemPropTypes extends ComboBoxItemAttributes, Omit<CommonProps */ const ComboBoxItem = withWebComponent<ComboBoxItemPropTypes, ComboBoxItemDomRef>( 'ui5-cb-item', - ['additionalText', 'text'], + ['additionalText', 'text', 'value'], [], [], [], diff --git a/packages/main/src/webComponents/DatePicker/index.tsx b/packages/main/src/webComponents/DatePicker/index.tsx index 56a23fe84c2..e581b17d266 100644 --- a/packages/main/src/webComponents/DatePicker/index.tsx +++ b/packages/main/src/webComponents/DatePicker/index.tsx @@ -146,6 +146,14 @@ interface DatePickerAttributes { */ secondaryCalendarType?: CalendarType | undefined | keyof typeof CalendarType; + /** + * Defines whether the clear icon of the input will be shown. + * + * **Note:** Available since [v2.20.0](https://github.com/UI5/webcomponents/releases/tag/v2.20.0) of **@ui5/webcomponents**. + * @default false + */ + showClearIcon?: boolean; + /** * Defines a formatted date value. */ @@ -331,8 +339,8 @@ interface DatePickerPropTypes * Supported format options are pattern-based on Unicode LDML Date Format notation. * For more information, see [UTS #35: Unicode Locale Data Markup Language](https://unicode.org/reports/tr35/tr35-dates.html#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 valueFormat is "yyyy-MM-dd", the displayFormat is "MMM d, y", and the used locale is English, a valid value string is "2015-07-30", which leads to an output of "Jul 30, 2015". + * If no placeholder is set to the DatePicker, the used displayFormat is displayed as a placeholder. If another placeholder is needed, it must be set. * * ### Keyboard Handling * The `DatePicker` provides advanced keyboard handling. @@ -400,7 +408,7 @@ const DatePicker = withWebComponent<DatePickerPropTypes, DatePickerDomRef>( 'valueFormat', 'valueState', ], - ['disabled', 'hideWeekNumbers', 'open', 'readonly', 'required'], + ['disabled', 'hideWeekNumbers', 'open', 'readonly', 'required', 'showClearIcon'], ['valueStateMessage'], ['change', 'close', 'input', 'open', 'value-state-change'], ); diff --git a/packages/main/src/webComponents/DateRangePicker/index.tsx b/packages/main/src/webComponents/DateRangePicker/index.tsx index d02435d7ffd..b7c2f4f3dc1 100644 --- a/packages/main/src/webComponents/DateRangePicker/index.tsx +++ b/packages/main/src/webComponents/DateRangePicker/index.tsx @@ -153,6 +153,14 @@ interface DateRangePickerAttributes { */ secondaryCalendarType?: CalendarType | undefined | keyof typeof CalendarType; + /** + * Defines whether the clear icon of the input will be shown. + * + * **Note:** Available since [v2.20.0](https://github.com/UI5/webcomponents/releases/tag/v2.20.0) of **@ui5/webcomponents**. + * @default false + */ + showClearIcon?: boolean; + /** * Defines a formatted date value. */ @@ -374,7 +382,7 @@ const DateRangePicker = withWebComponent<DateRangePickerPropTypes, DateRangePick 'valueFormat', 'valueState', ], - ['disabled', 'hideWeekNumbers', 'open', 'readonly', 'required'], + ['disabled', 'hideWeekNumbers', 'open', 'readonly', 'required', 'showClearIcon'], ['valueStateMessage'], ['change', 'close', 'input', 'open', 'value-state-change'], ); diff --git a/packages/main/src/webComponents/DateTimePicker/index.tsx b/packages/main/src/webComponents/DateTimePicker/index.tsx index 11d9753cf1b..d0745293f1a 100644 --- a/packages/main/src/webComponents/DateTimePicker/index.tsx +++ b/packages/main/src/webComponents/DateTimePicker/index.tsx @@ -146,6 +146,14 @@ interface DateTimePickerAttributes { */ secondaryCalendarType?: CalendarType | undefined | keyof typeof CalendarType; + /** + * Defines whether the clear icon of the input will be shown. + * + * **Note:** Available since [v2.20.0](https://github.com/UI5/webcomponents/releases/tag/v2.20.0) of **@ui5/webcomponents**. + * @default false + */ + showClearIcon?: boolean; + /** * Defines a formatted date value. */ @@ -382,7 +390,7 @@ const DateTimePicker = withWebComponent<DateTimePickerPropTypes, DateTimePickerD 'valueFormat', 'valueState', ], - ['disabled', 'hideWeekNumbers', 'open', 'readonly', 'required'], + ['disabled', 'hideWeekNumbers', 'open', 'readonly', 'required', 'showClearIcon'], ['valueStateMessage'], ['change', 'close', 'input', 'open', 'value-state-change'], ); diff --git a/packages/main/src/webComponents/DynamicPageTitle/index.tsx b/packages/main/src/webComponents/DynamicPageTitle/index.tsx index 0f8504d4104..8eeb20056ac 100644 --- a/packages/main/src/webComponents/DynamicPageTitle/index.tsx +++ b/packages/main/src/webComponents/DynamicPageTitle/index.tsx @@ -168,7 +168,7 @@ interface DynamicPageTitlePropTypes * The user can switch between the expanded/collapsed states of the * `DynamicPage` by clicking on the `DynamicPageTitle` * or by using the expand/collapse visual indicators, positioned at the bottom of the - * `DynamicPageTitle` and the `DynamicPageHeader` inside `ui5-dynamic-page-header-actions`. + * `DynamicPageTitle` and the `DynamicPageHeader` inside `DynamicPageHeaderActions`. * * ### Responsive Behavior * diff --git a/packages/main/src/webComponents/FlexibleColumnLayout/index.tsx b/packages/main/src/webComponents/FlexibleColumnLayout/index.tsx index 14c48a623d3..a52f757fb6b 100644 --- a/packages/main/src/webComponents/FlexibleColumnLayout/index.tsx +++ b/packages/main/src/webComponents/FlexibleColumnLayout/index.tsx @@ -172,6 +172,8 @@ interface FlexibleColumnLayoutPropTypes /** * Fired when the `layoutsConfiguration` changes via user interaction by dragging the separators. * + * **Note:** The `layout-configuration-change` event is in an experimental state and is a subject to change. + * * **Note:** Available since [v2.16.0](https://github.com/UI5/webcomponents/releases/tag/v2.16.0) of **@ui5/webcomponents-fiori**. * * | cancelable | bubbles | diff --git a/packages/main/src/webComponents/MultiComboBox/index.tsx b/packages/main/src/webComponents/MultiComboBox/index.tsx index c7e1a2d1c41..3a7fe3522ca 100644 --- a/packages/main/src/webComponents/MultiComboBox/index.tsx +++ b/packages/main/src/webComponents/MultiComboBox/index.tsx @@ -104,6 +104,23 @@ interface MultiComboBoxAttributes { */ required?: boolean; + /** + * Defines the values of the selected items. + * + * Use this property to programmatically select items by their `value` property. + * Each string in the array should match the `value` attribute of a `MultiComboBoxItem`. + * + * **Note:** If an item doesn't have a `value` attribute set, it cannot be selected via this property. + * + * **Note:** The recommended approach is to set the `value` property on each `MultiComboBoxItem` + * and use `selectedValues` for programmatic selection. The `selected` property on items is + * deprecated and should not be used together with `selectedValues`. + * + * **Note:** Available since [v2.20.0](https://github.com/UI5/webcomponents/releases/tag/v2.20.0) of **@ui5/webcomponents**. + * @default [] + */ + selectedValues?: Array<string>; + /** * Defines whether the clear icon of the multi-combobox will be shown. * @@ -291,7 +308,7 @@ interface MultiComboBoxPropTypes */ const MultiComboBox = withWebComponent<MultiComboBoxPropTypes, MultiComboBoxDomRef>( 'ui5-multi-combobox', - ['accessibleName', 'accessibleNameRef', 'filter', 'name', 'placeholder', 'value', 'valueState'], + ['accessibleName', 'accessibleNameRef', 'filter', 'name', 'placeholder', 'selectedValues', 'value', 'valueState'], [ 'disabled', 'loading', diff --git a/packages/main/src/webComponents/MultiComboBoxItem/index.tsx b/packages/main/src/webComponents/MultiComboBoxItem/index.tsx index b909b36d0f8..3a1d77caacd 100644 --- a/packages/main/src/webComponents/MultiComboBoxItem/index.tsx +++ b/packages/main/src/webComponents/MultiComboBoxItem/index.tsx @@ -14,6 +14,7 @@ interface MultiComboBoxItemAttributes { /** * Defines the selected state of the component. * @default false + * @deprecated Set the `value` property on items and use the `selectedValues` property on the parent `ui5-multi-combobox` instead for programmatic selection. */ selected?: boolean; @@ -22,6 +23,18 @@ interface MultiComboBoxItemAttributes { * @default undefined */ text?: string | undefined; + + /** + * Defines the value of the component. + * + * Use this property to associate a unique identifier with the item, + * separate from the display text. This enables selecting items + * programmatically via `selectedValues` on the parent MultiComboBox. + * + * **Note:** Available since [v2.20.0](https://github.com/UI5/webcomponents/releases/tag/v2.20.0) of **@ui5/webcomponents**. + * @default undefined + */ + value?: string | undefined; } interface MultiComboBoxItemDomRef extends Required<MultiComboBoxItemAttributes>, Ui5DomRef {} @@ -36,7 +49,7 @@ interface MultiComboBoxItemPropTypes */ const MultiComboBoxItem = withWebComponent<MultiComboBoxItemPropTypes, MultiComboBoxItemDomRef>( 'ui5-mcb-item', - ['additionalText', 'text'], + ['additionalText', 'text', 'value'], ['selected'], [], [], diff --git a/packages/main/src/webComponents/Option/index.tsx b/packages/main/src/webComponents/Option/index.tsx index 04c6e42ab26..3a841b62601 100644 --- a/packages/main/src/webComponents/Option/index.tsx +++ b/packages/main/src/webComponents/Option/index.tsx @@ -25,6 +25,7 @@ interface OptionAttributes { /** * Defines the selected state of the component. * @default false + * @deprecated since 2.20.0, please use the parent Select's `value` property instead. */ selected?: boolean; diff --git a/packages/main/src/webComponents/RatingIndicator/index.tsx b/packages/main/src/webComponents/RatingIndicator/index.tsx index 8fdb7739026..88a42412bf0 100644 --- a/packages/main/src/webComponents/RatingIndicator/index.tsx +++ b/packages/main/src/webComponents/RatingIndicator/index.tsx @@ -34,6 +34,14 @@ interface RatingIndicatorAttributes { */ max?: number; + /** + * Defines the icon to be displayed for the selected (filled) rating symbol. + * + * **Note:** Available since [v2.20](https://github.com/UI5/webcomponents/releases/tag/v2.20) of **@ui5/webcomponents**. + * @default "favorite" + */ + ratedIcon?: string; + /** * Defines whether the component is read-only. * @@ -67,6 +75,14 @@ interface RatingIndicatorAttributes { */ tooltip?: string | undefined; + /** + * Defines the icon to be displayed for the unselected (empty) rating symbol. + * + * **Note:** Available since [v2.20](https://github.com/UI5/webcomponents/releases/tag/v2.20) of **@ui5/webcomponents**. + * @default "unfavorite" + */ + unratedIcon?: string; + /** * The indicated value of the rating. * @@ -123,7 +139,7 @@ interface RatingIndicatorPropTypes */ const RatingIndicator = withWebComponent<RatingIndicatorPropTypes, RatingIndicatorDomRef>( 'ui5-rating-indicator', - ['accessibleName', 'accessibleNameRef', 'max', 'size', 'tooltip', 'value'], + ['accessibleName', 'accessibleNameRef', 'max', 'ratedIcon', 'size', 'tooltip', 'unratedIcon', 'value'], ['disabled', 'readonly', 'required'], [], ['change'], diff --git a/packages/main/src/webComponents/ShellBar/index.tsx b/packages/main/src/webComponents/ShellBar/index.tsx index 6b3c2d6b6de..3421cc7e7b3 100644 --- a/packages/main/src/webComponents/ShellBar/index.tsx +++ b/packages/main/src/webComponents/ShellBar/index.tsx @@ -1,8 +1,8 @@ 'use client'; import '@ui5/webcomponents-fiori/dist/ShellBar.js'; +import type { ShellBarAccessibilityAttributes } from '@ui5/webcomponents-fiori/dist/shellbar/ShellBarAccessibility.js'; import type { - ShellBarAccessibilityAttributes, ShellBarContentItemVisibilityChangeEventDetail, ShellBarLogoClickEventDetail, ShellBarMenuItemClickEventDetail, @@ -115,17 +115,14 @@ interface ShellBarAttributes { interface ShellBarDomRef extends Required<ShellBarAttributes>, Ui5DomRef { /** - * Closes the overflow area. - * Useful to manually close the overflow after having suppressed automatic closing with preventDefault() of ShellbarItem's press event + * Closes the overflow popover. * @returns {void} */ closeOverflow: () => void; /** - * Returns the `search` icon DOM ref. - * - * **Note:** Available since [v2.10.0](https://github.com/UI5/webcomponents/releases/tag/v2.10.0) of **@ui5/webcomponents-fiori**. - * @returns {Promise<HTMLElement | null>} - The search icon DOM ref + * Returns the search button DOM reference. + * @returns {Promise<HTMLElement | null>} */ getSearchButtonDomRef: () => Promise<HTMLElement | null>; diff --git a/packages/main/src/webComponents/ShellBarItem/index.tsx b/packages/main/src/webComponents/ShellBarItem/index.tsx index 0c42210f635..d4da4b8fd10 100644 --- a/packages/main/src/webComponents/ShellBarItem/index.tsx +++ b/packages/main/src/webComponents/ShellBarItem/index.tsx @@ -31,13 +31,13 @@ interface ShellBarItemAttributes { accessibilityAttributes?: ShellBarItemAccessibilityAttributes; /** - * Defines the count displayed in the top-right corner. + * Defines the count displayed in badge. * @default undefined */ count?: string | undefined; /** - * Defines the name of the item's icon. + * Defines the item's icon. * @default undefined */ icon?: string | undefined; @@ -56,7 +56,7 @@ interface ShellBarItemDomRef extends Required<ShellBarItemAttributes>, Ui5DomRef interface ShellBarItemPropTypes extends ShellBarItemAttributes, Omit<CommonProps, keyof ShellBarItemAttributes | 'onClick'> { /** - * Fired, when the item is pressed. + * Fired when the item is clicked. * * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s. * @@ -68,13 +68,11 @@ interface ShellBarItemPropTypes } /** - * The `ShellBarItem` represents a custom item, that - * might be added to the `ShellBar`. + * The `ShellBarItem` represents a custom item for `ShellBar`. * * * * __Note:__ This is a UI5 Web Component! [ShellBarItem UI5 Web Component Documentation](https://ui5.github.io/webcomponents/components/fiori/ShellBarItem) | [Repository](https://github.com/UI5/webcomponents) - * @abstract */ const ShellBarItem = withWebComponent<ShellBarItemPropTypes, ShellBarItemDomRef>( 'ui5-shellbar-item', diff --git a/packages/main/src/webComponents/SideNavigation/index.tsx b/packages/main/src/webComponents/SideNavigation/index.tsx index 015cde5b463..ef0810d8f18 100644 --- a/packages/main/src/webComponents/SideNavigation/index.tsx +++ b/packages/main/src/webComponents/SideNavigation/index.tsx @@ -1,7 +1,10 @@ 'use client'; import '@ui5/webcomponents-fiori/dist/SideNavigation.js'; -import type { SideNavigationSelectionChangeEventDetail } from '@ui5/webcomponents-fiori/dist/SideNavigation.js'; +import type { + SideNavigationItemClickEventDetail, + SideNavigationSelectionChangeEventDetail, +} from '@ui5/webcomponents-fiori/dist/SideNavigation.js'; import { withWebComponent } from '@ui5/webcomponents-react-base'; import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; @@ -34,7 +37,10 @@ interface SideNavigationDomRef extends Required<SideNavigationAttributes>, Ui5Do interface SideNavigationPropTypes extends SideNavigationAttributes, - Omit<CommonProps, keyof SideNavigationAttributes | 'children' | 'fixedItems' | 'header' | 'onSelectionChange'> { + Omit< + CommonProps, + keyof SideNavigationAttributes | 'children' | 'fixedItems' | 'header' | 'onItemClick' | 'onSelectionChange' + > { /** * Defines the main items of the component. * @@ -72,7 +78,20 @@ interface SideNavigationPropTypes */ header?: UI5WCSlotsNode; /** - * Fired when the selection has changed via user interaction + * Fired when an item is clicked. + * + * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s. + * + * **Note:** Available since [v2.20.0](https://github.com/UI5/webcomponents/releases/tag/v2.20.0) of **@ui5/webcomponents-fiori**. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ✅|✅| + */ + onItemClick?: (event: Ui5CustomEvent<SideNavigationDomRef, SideNavigationItemClickEventDetail>) => void; + + /** + * Fired when the selection has changed via user interaction. * * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s. * @@ -88,7 +107,7 @@ interface SideNavigationPropTypes * It consists of three containers: header (top-aligned), main navigation section (top-aligned) and the secondary section (bottom-aligned). * * - The header is meant for displaying user related information - profile data, avatar, etc. - * - The main navigation section is related to the user’s current work context + * - The main navigation section is related to the user's current work context. * - 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). * * ### Usage @@ -127,7 +146,7 @@ const SideNavigation = withWebComponent<SideNavigationPropTypes, SideNavigationD ['accessibleName'], ['collapsed'], ['fixedItems', 'header'], - ['selection-change'], + ['item-click', 'selection-change'], ); SideNavigation.displayName = 'SideNavigation'; diff --git a/packages/main/src/webComponents/Slider/index.tsx b/packages/main/src/webComponents/Slider/index.tsx index 032ef90df07..3594f68aa71 100644 --- a/packages/main/src/webComponents/Slider/index.tsx +++ b/packages/main/src/webComponents/Slider/index.tsx @@ -78,7 +78,7 @@ interface SliderAttributes { /** * Defines the size of the slider's selection intervals (e.g. min = 0, max = 10, step = 5 would result in possible selection of the values 0, 5, 10). * - * **Note:** If set to 0 the slider handle movement is disabled. When negative number or value other than a number, the component fallbacks to its default value. + * **Note:** If set to 0 the slider handle movement is disabled. * @default 1 */ step?: number; diff --git a/packages/main/src/webComponents/TableRowActionNavigation/index.tsx b/packages/main/src/webComponents/TableRowActionNavigation/index.tsx index 727922245e3..7cee78ca38b 100644 --- a/packages/main/src/webComponents/TableRowActionNavigation/index.tsx +++ b/packages/main/src/webComponents/TableRowActionNavigation/index.tsx @@ -6,9 +6,13 @@ import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '@ui5/webcomponents- interface TableRowActionNavigationAttributes { /** - * Defines the interactive state of the navigation action. - * @default false - */ +* Defines the interactive state of the navigation action. +* @default false +* @deprecated As of version 2.20.0, the navigation icon is deprecated. +For better accessibility, the interactive mode which renders a button, must be used instead. To handle the action, attach a listener to the `click` event. +If the navigation should be triggered when a row is pressed, set the row's `interactive` property and use the `row-click` event of the `ui5-table`. +This property will be removed in a future release. +*/ interactive?: boolean; /** diff --git a/packages/main/src/webComponents/Toolbar/index.tsx b/packages/main/src/webComponents/Toolbar/index.tsx index 7c22ba187b2..be5aef11e73 100644 --- a/packages/main/src/webComponents/Toolbar/index.tsx +++ b/packages/main/src/webComponents/Toolbar/index.tsx @@ -49,7 +49,7 @@ interface ToolbarPropTypes extends ToolbarAttributes, Omit<CommonProps, keyof To * * **Note:** Currently only `ToolbarButton`, `ToolbarSelect`, `ToolbarSeparator` and `ToolbarSpacer` are allowed here. * - * __Supported Node Type/s:__ `Array<ToolbarItem>` + * __Supported Node Type/s:__ `Array<ToolbarItemBase>` */ children?: ReactNode | ReactNode[]; } diff --git a/packages/main/src/webComponents/ToolbarButton/index.tsx b/packages/main/src/webComponents/ToolbarButton/index.tsx index db2b6dfa75c..5f6366536c8 100644 --- a/packages/main/src/webComponents/ToolbarButton/index.tsx +++ b/packages/main/src/webComponents/ToolbarButton/index.tsx @@ -82,7 +82,7 @@ interface ToolbarButtonAttributes { overflowPriority?: ToolbarItemOverflowBehavior | keyof typeof ToolbarItemOverflowBehavior; /** - * Defines if the toolbar overflow popup should close upon intereaction with the item. + * Defines if the toolbar overflow popup should close upon interaction with the item. * It will close by default. * @default false */ diff --git a/packages/main/src/webComponents/ToolbarItem/index.tsx b/packages/main/src/webComponents/ToolbarItem/index.tsx new file mode 100644 index 00000000000..0615de3edab --- /dev/null +++ b/packages/main/src/webComponents/ToolbarItem/index.tsx @@ -0,0 +1,70 @@ +'use client'; + +import '@ui5/webcomponents/dist/ToolbarItem.js'; +import type ToolbarItemOverflowBehavior from '@ui5/webcomponents/dist/types/ToolbarItemOverflowBehavior.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5DomRef } from '@ui5/webcomponents-react-base'; +import type { ReactNode } from 'react'; + +interface ToolbarItemAttributes { + /** + * Property used to define the access of the item to the overflow Popover. If "NeverOverflow" option is set, + * the item never goes in the Popover, if "AlwaysOverflow" - it never comes out of it. + * @default "Default" + */ + overflowPriority?: ToolbarItemOverflowBehavior | keyof typeof ToolbarItemOverflowBehavior; + + /** + * Defines if the toolbar overflow popup should close upon interaction with the item. + * It will close by default. + * @default false + */ + preventOverflowClosing?: boolean; +} + +interface ToolbarItemDomRef extends Required<ToolbarItemAttributes>, Ui5DomRef {} + +interface ToolbarItemPropTypes + extends ToolbarItemAttributes, Omit<CommonProps, keyof ToolbarItemAttributes | 'children'> { + /** + * Wrapped component slot. + * + * **Note:** Available since [v2.20.0](https://github.com/UI5/webcomponents/releases/tag/v2.20.0) of **@ui5/webcomponents**. + * + * __Supported Node Type/s:__ `Array<IToolbarItemContent>` + */ + children?: ReactNode | ReactNode[]; +} + +/** + * The `ToolbarItem` is a wrapper component used to integrate UI5 Web Components into the `Toolbar`. + * It renders within the toolbar's shadow DOM and manages the lifecycle + * and overflow behavior of its child component. + * + * ### Structure + * The toolbar item wraps a single UI5 Web Component (such as CheckBox, Title, etc.) and handles: + * - Overflow management (determining if the item should be displayed in the main toolbar or overflow popover) + * - Automatic popover closing on interaction + * - CSS custom state exposure for styling based on overflow state + * + * ### Usage + * The `ToolbarItem` is typically used implicitly when adding components to a toolbar, + * but specialized wrappers like `ToolbarButton` provide + * component-specific functionality and should be preferred when available. + * + * __Note:__ This is a UI5 Web Component! [ToolbarItem UI5 Web Component Documentation](https://ui5.github.io/webcomponents/components/ToolbarItem) | [Repository](https://github.com/UI5/webcomponents) + * + * @since [2.20.0](https://github.com/UI5/webcomponents/releases/tag/v2.20.0) of __@ui5/webcomponents__. + */ +const ToolbarItem = withWebComponent<ToolbarItemPropTypes, ToolbarItemDomRef>( + 'ui5-toolbar-item', + ['overflowPriority'], + ['preventOverflowClosing'], + [], + [], +); + +ToolbarItem.displayName = 'ToolbarItem'; + +export { ToolbarItem }; +export type { ToolbarItemDomRef, ToolbarItemPropTypes }; diff --git a/packages/main/src/webComponents/ToolbarSelect/index.tsx b/packages/main/src/webComponents/ToolbarSelect/index.tsx index 197e917727f..d26f05f3a3b 100644 --- a/packages/main/src/webComponents/ToolbarSelect/index.tsx +++ b/packages/main/src/webComponents/ToolbarSelect/index.tsx @@ -37,7 +37,7 @@ interface ToolbarSelectAttributes { overflowPriority?: ToolbarItemOverflowBehavior | keyof typeof ToolbarItemOverflowBehavior; /** - * Defines if the toolbar overflow popup should close upon intereaction with the item. + * Defines if the toolbar overflow popup should close upon interaction with the item. * It will close by default. * @default false */ diff --git a/packages/main/src/webComponents/ToolbarSeparator/index.tsx b/packages/main/src/webComponents/ToolbarSeparator/index.tsx index 8d27b10bb8b..803a98b0175 100644 --- a/packages/main/src/webComponents/ToolbarSeparator/index.tsx +++ b/packages/main/src/webComponents/ToolbarSeparator/index.tsx @@ -14,7 +14,7 @@ interface ToolbarSeparatorAttributes { overflowPriority?: ToolbarItemOverflowBehavior | keyof typeof ToolbarItemOverflowBehavior; /** - * Defines if the toolbar overflow popup should close upon intereaction with the item. + * Defines if the toolbar overflow popup should close upon interaction with the item. * It will close by default. * @default false */ diff --git a/packages/main/src/webComponents/ToolbarSpacer/index.tsx b/packages/main/src/webComponents/ToolbarSpacer/index.tsx index a532447cfd3..25391a734e3 100644 --- a/packages/main/src/webComponents/ToolbarSpacer/index.tsx +++ b/packages/main/src/webComponents/ToolbarSpacer/index.tsx @@ -14,7 +14,7 @@ interface ToolbarSpacerAttributes { overflowPriority?: ToolbarItemOverflowBehavior | keyof typeof ToolbarItemOverflowBehavior; /** - * Defines if the toolbar overflow popup should close upon intereaction with the item. + * Defines if the toolbar overflow popup should close upon interaction with the item. * It will close by default. * @default false */ diff --git a/packages/main/src/webComponents/UserMenu/index.tsx b/packages/main/src/webComponents/UserMenu/index.tsx index 1e35fbcf698..0a77c44954f 100644 --- a/packages/main/src/webComponents/UserMenu/index.tsx +++ b/packages/main/src/webComponents/UserMenu/index.tsx @@ -61,6 +61,7 @@ interface UserMenuPropTypes | keyof UserMenuAttributes | 'accounts' | 'children' + | 'footer' | 'onAvatarClick' | 'onChangeAccount' | 'onClose' @@ -92,6 +93,23 @@ interface UserMenuPropTypes * __Supported Node Type/s:__ `Array<UserMenuItem>` */ children?: ReactNode | ReactNode[]; + + /** + * Defines custom footer content. + * + * **Note:** When provided, replaces the default "Sign Out" button. Use an empty element to hide the footer completely. + * + * __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="footer"`). + * 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. + * + * __Note:__ When passing a custom React component to this prop, you have to make sure your component reads the `slot` prop and appends it to the most outer element of your component. + * Learn more about it [here](https://ui5.github.io/webcomponents-react/v2/?path=/docs/knowledge-base-handling-slots--docs). + * + * **Note:** Available since [v2.20.0](https://github.com/UI5/webcomponents/releases/tag/v2.20.0) of **@ui5/webcomponents-fiori**. + * + * __Supported Node Type/s:__ `Array<HTMLElement>` + */ + footer?: UI5WCSlotsNode; /** * Fired when the account avatar is selected. * @@ -188,13 +206,12 @@ interface UserMenuPropTypes * __Note:__ This is a UI5 Web Component! [UserMenu UI5 Web Component Documentation](https://ui5.github.io/webcomponents/components/fiori/UserMenu) | [Repository](https://github.com/UI5/webcomponents) * * @since [2.5.0](https://github.com/UI5/webcomponents/releases/tag/v2.5.0) of __@ui5/webcomponents-fiori__. - * @experimental */ const UserMenu = withWebComponent<UserMenuPropTypes, UserMenuDomRef>( 'ui5-user-menu', ['opener'], ['open', 'showEditAccounts', 'showEditButton', 'showManageAccount', 'showOtherAccounts'], - ['accounts'], + ['accounts', 'footer'], [ 'avatar-click', 'change-account', diff --git a/packages/main/src/webComponents/UserMenuAccount/index.tsx b/packages/main/src/webComponents/UserMenuAccount/index.tsx index f825be200bd..5f03e6b9ee2 100644 --- a/packages/main/src/webComponents/UserMenuAccount/index.tsx +++ b/packages/main/src/webComponents/UserMenuAccount/index.tsx @@ -72,7 +72,6 @@ interface UserMenuAccountPropTypes * __Note:__ This is a UI5 Web Component! [UserMenuAccount UI5 Web Component Documentation](https://ui5.github.io/webcomponents/components/fiori/UserMenuAccount) | [Repository](https://github.com/UI5/webcomponents) * * @since [2.5.0](https://github.com/UI5/webcomponents/releases/tag/v2.5.0) of __@ui5/webcomponents-fiori__. - * @experimental */ const UserMenuAccount = withWebComponent<UserMenuAccountPropTypes, UserMenuAccountDomRef>( 'ui5-user-menu-account', diff --git a/packages/main/src/webComponents/UserMenuItem/index.tsx b/packages/main/src/webComponents/UserMenuItem/index.tsx index 2387fd5238f..13c1cbd750b 100644 --- a/packages/main/src/webComponents/UserMenuItem/index.tsx +++ b/packages/main/src/webComponents/UserMenuItem/index.tsx @@ -302,7 +302,6 @@ interface UserMenuItemPropTypes * __Note:__ This is a UI5 Web Component! [UserMenuItem UI5 Web Component Documentation](https://ui5.github.io/webcomponents/components/fiori/UserMenuItem) | [Repository](https://github.com/UI5/webcomponents) * * @since [2.5.0](https://github.com/UI5/webcomponents/releases/tag/v2.5.0) of __@ui5/webcomponents-fiori__. - * @experimental */ const UserMenuItem = withWebComponent<UserMenuItemPropTypes, UserMenuItemDomRef>( 'ui5-user-menu-item', diff --git a/packages/main/src/webComponents/UserMenuItemGroup/index.tsx b/packages/main/src/webComponents/UserMenuItemGroup/index.tsx index 7bd1a5becae..affbca54bc8 100644 --- a/packages/main/src/webComponents/UserMenuItemGroup/index.tsx +++ b/packages/main/src/webComponents/UserMenuItemGroup/index.tsx @@ -49,7 +49,6 @@ interface UserMenuItemGroupPropTypes * __Note:__ This is a UI5 Web Component! [UserMenuItemGroup UI5 Web Component Documentation](https://ui5.github.io/webcomponents/components/fiori/UserMenuItemGroup) | [Repository](https://github.com/UI5/webcomponents) * * @since [2.12.0](https://github.com/UI5/webcomponents/releases/tag/v2.12.0) of __@ui5/webcomponents-fiori__. - * @experimental */ const UserMenuItemGroup = withWebComponent<UserMenuItemGroupPropTypes, UserMenuItemGroupDomRef>( 'ui5-user-menu-item-group', diff --git a/packages/main/src/webComponents/UserSettingsAccountView/index.tsx b/packages/main/src/webComponents/UserSettingsAccountView/index.tsx index 39776e5cea5..2499a1122a9 100644 --- a/packages/main/src/webComponents/UserSettingsAccountView/index.tsx +++ b/packages/main/src/webComponents/UserSettingsAccountView/index.tsx @@ -85,7 +85,6 @@ interface UserSettingsAccountViewPropTypes * __Note:__ This is a UI5 Web Component! [UserSettingsAccountView UI5 Web Component Documentation](https://ui5.github.io/webcomponents/components/fiori/UserSettingsAccountView) | [Repository](https://github.com/UI5/webcomponents) * * @since [2.17.0](https://github.com/UI5/webcomponents/releases/tag/v2.17.0) of __@ui5/webcomponents-fiori__. - * @experimental */ const UserSettingsAccountView = withWebComponent<UserSettingsAccountViewPropTypes, UserSettingsAccountViewDomRef>( 'ui5-user-settings-account-view', diff --git a/packages/main/src/webComponents/UserSettingsAppearanceView/index.tsx b/packages/main/src/webComponents/UserSettingsAppearanceView/index.tsx index a24d27b94dd..7f91509872f 100644 --- a/packages/main/src/webComponents/UserSettingsAppearanceView/index.tsx +++ b/packages/main/src/webComponents/UserSettingsAppearanceView/index.tsx @@ -77,7 +77,6 @@ interface UserSettingsAppearanceViewPropTypes * __Note:__ This is a UI5 Web Component! [UserSettingsAppearanceView UI5 Web Component Documentation](https://ui5.github.io/webcomponents/components/fiori/UserSettingsAppearanceView) | [Repository](https://github.com/UI5/webcomponents) * * @since [2.17.0](https://github.com/UI5/webcomponents/releases/tag/v2.17.0) of __@ui5/webcomponents-fiori__. - * @experimental */ const UserSettingsAppearanceView = withWebComponent< UserSettingsAppearanceViewPropTypes, diff --git a/packages/main/src/webComponents/UserSettingsAppearanceViewGroup/index.tsx b/packages/main/src/webComponents/UserSettingsAppearanceViewGroup/index.tsx index ff85814ea2f..16f873b0ab1 100644 --- a/packages/main/src/webComponents/UserSettingsAppearanceViewGroup/index.tsx +++ b/packages/main/src/webComponents/UserSettingsAppearanceViewGroup/index.tsx @@ -109,7 +109,6 @@ interface UserSettingsAppearanceViewGroupPropTypes * __Note:__ This is a UI5 Web Component! [UserSettingsAppearanceViewGroup UI5 Web Component Documentation](https://ui5.github.io/webcomponents/components/fiori/UserSettingsAppearanceViewGroup) | [Repository](https://github.com/UI5/webcomponents) * * @since [2.17.0](https://github.com/UI5/webcomponents/releases/tag/v2.17.0) of __@ui5/webcomponents-fiori__. - * @experimental */ const UserSettingsAppearanceViewGroup = withWebComponent< UserSettingsAppearanceViewGroupPropTypes, diff --git a/packages/main/src/webComponents/UserSettingsAppearanceViewItem/index.tsx b/packages/main/src/webComponents/UserSettingsAppearanceViewItem/index.tsx index 3a9a7a7d622..10926b2f5da 100644 --- a/packages/main/src/webComponents/UserSettingsAppearanceViewItem/index.tsx +++ b/packages/main/src/webComponents/UserSettingsAppearanceViewItem/index.tsx @@ -156,7 +156,6 @@ interface UserSettingsAppearanceViewItemPropTypes * __Note:__ This is a UI5 Web Component! [UserSettingsAppearanceViewItem UI5 Web Component Documentation](https://ui5.github.io/webcomponents/components/fiori/UserSettingsAppearanceViewItem) | [Repository](https://github.com/UI5/webcomponents) * * @since [2.17.0](https://github.com/UI5/webcomponents/releases/tag/v2.17.0) of __@ui5/webcomponents-fiori__. - * @experimental */ const UserSettingsAppearanceViewItem = withWebComponent< UserSettingsAppearanceViewItemPropTypes, diff --git a/packages/main/src/webComponents/UserSettingsDialog/index.tsx b/packages/main/src/webComponents/UserSettingsDialog/index.tsx index c80bc0c0ee6..e8ae0e5aa91 100644 --- a/packages/main/src/webComponents/UserSettingsDialog/index.tsx +++ b/packages/main/src/webComponents/UserSettingsDialog/index.tsx @@ -114,7 +114,6 @@ interface UserSettingsDialogPropTypes * __Note:__ This is a UI5 Web Component! [UserSettingsDialog UI5 Web Component Documentation](https://ui5.github.io/webcomponents/components/fiori/UserSettingsDialog) | [Repository](https://github.com/UI5/webcomponents) * * @since [2.8.0](https://github.com/UI5/webcomponents/releases/tag/v2.8.0) of __@ui5/webcomponents-fiori__. - * @experimental */ const UserSettingsDialog = withWebComponent<UserSettingsDialogPropTypes, UserSettingsDialogDomRef>( 'ui5-user-settings-dialog', diff --git a/packages/main/src/webComponents/UserSettingsItem/index.tsx b/packages/main/src/webComponents/UserSettingsItem/index.tsx index 73aee6050d2..bf00894eedc 100644 --- a/packages/main/src/webComponents/UserSettingsItem/index.tsx +++ b/packages/main/src/webComponents/UserSettingsItem/index.tsx @@ -118,7 +118,6 @@ interface UserSettingsItemPropTypes * __Note:__ This is a UI5 Web Component! [UserSettingsItem UI5 Web Component Documentation](https://ui5.github.io/webcomponents/components/fiori/UserSettingsItem) | [Repository](https://github.com/UI5/webcomponents) * * @since [2.8.0](https://github.com/UI5/webcomponents/releases/tag/v2.8.0) of __@ui5/webcomponents-fiori__. - * @experimental */ const UserSettingsItem = withWebComponent<UserSettingsItemPropTypes, UserSettingsItemDomRef>( 'ui5-user-settings-item', diff --git a/packages/main/src/webComponents/UserSettingsView/index.tsx b/packages/main/src/webComponents/UserSettingsView/index.tsx index e8f2458561a..86eadd1cc95 100644 --- a/packages/main/src/webComponents/UserSettingsView/index.tsx +++ b/packages/main/src/webComponents/UserSettingsView/index.tsx @@ -44,7 +44,6 @@ interface UserSettingsViewPropTypes * __Note:__ This is a UI5 Web Component! [UserSettingsView UI5 Web Component Documentation](https://ui5.github.io/webcomponents/components/fiori/UserSettingsView) | [Repository](https://github.com/UI5/webcomponents) * * @since [2.8.0](https://github.com/UI5/webcomponents/releases/tag/v2.8.0) of __@ui5/webcomponents-fiori__. - * @experimental */ const UserSettingsView = withWebComponent<UserSettingsViewPropTypes, UserSettingsViewDomRef>( 'ui5-user-settings-view', From b07e2ae0d31c3071b2d144b825e6a2ef3b54bb4a Mon Sep 17 00:00:00 2001 From: Lukas Harbarth <lukas.harbarth@sap.com> Date: Thu, 5 Mar 2026 12:16:30 +0100 Subject: [PATCH 3/9] add ToolbarItem to root export & export map --- packages/main/package.json | 4 ++++ packages/main/src/webComponents/index.ts | 1 + 2 files changed, 5 insertions(+) diff --git a/packages/main/package.json b/packages/main/package.json index 875b8564373..86745299102 100644 --- a/packages/main/package.json +++ b/packages/main/package.json @@ -688,6 +688,10 @@ "types": "./dist/webComponents/ToolbarButton/index.d.ts", "default": "./dist/webComponents/ToolbarButton/index.js" }, + "./ToolbarItem": { + "types": "./dist/webComponents/ToolbarItem/index.d.ts", + "default": "./dist/webComponents/ToolbarItem/index.js" + }, "./ToolbarSelect": { "types": "./dist/webComponents/ToolbarSelect/index.d.ts", "default": "./dist/webComponents/ToolbarSelect/index.js" diff --git a/packages/main/src/webComponents/index.ts b/packages/main/src/webComponents/index.ts index 408870282d1..41c8facb811 100644 --- a/packages/main/src/webComponents/index.ts +++ b/packages/main/src/webComponents/index.ts @@ -135,6 +135,7 @@ export * from './Token/index.js'; export * from './Tokenizer/index.js'; export * from './Toolbar/index.js'; export * from './ToolbarButton/index.js'; +export * from './ToolbarItem/index.js'; export * from './ToolbarSelect/index.js'; export * from './ToolbarSelectOption/index.js'; export * from './ToolbarSeparator/index.js'; From 56f951c0dad6afd45728b1c5530834ffd9af8587 Mon Sep 17 00:00:00 2001 From: Lukas Harbarth <lukas.harbarth@sap.com> Date: Thu, 5 Mar 2026 12:28:52 +0100 Subject: [PATCH 4/9] SB: remove experimental badge --- packages/main/src/webComponents/UserMenu/UserMenu.mdx | 2 +- packages/main/src/webComponents/UserMenu/UserMenu.stories.tsx | 2 +- .../src/webComponents/UserSettingsDialog/UserSettingsDialog.mdx | 2 +- .../UserSettingsDialog/UserSettingsDialog.stories.tsx | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/main/src/webComponents/UserMenu/UserMenu.mdx b/packages/main/src/webComponents/UserMenu/UserMenu.mdx index e2657eb2084..caee102894d 100644 --- a/packages/main/src/webComponents/UserMenu/UserMenu.mdx +++ b/packages/main/src/webComponents/UserMenu/UserMenu.mdx @@ -8,7 +8,7 @@ import * as ComponentStories from './UserMenu.stories'; <Meta of={ComponentStories} /> -<DocsHeader of={ComponentStories} experimental /> +<DocsHeader of={ComponentStories} /> <br /> diff --git a/packages/main/src/webComponents/UserMenu/UserMenu.stories.tsx b/packages/main/src/webComponents/UserMenu/UserMenu.stories.tsx index c086c4c72df..b28dac22196 100644 --- a/packages/main/src/webComponents/UserMenu/UserMenu.stories.tsx +++ b/packages/main/src/webComponents/UserMenu/UserMenu.stories.tsx @@ -50,7 +50,7 @@ const meta = { </> ), }, - tags: ['package:@ui5/webcomponents', 'experimental'], + tags: ['package:@ui5/webcomponents'], } satisfies Meta<typeof UserMenu>; export default meta; diff --git a/packages/main/src/webComponents/UserSettingsDialog/UserSettingsDialog.mdx b/packages/main/src/webComponents/UserSettingsDialog/UserSettingsDialog.mdx index 0817e2d935b..b42a8a41169 100644 --- a/packages/main/src/webComponents/UserSettingsDialog/UserSettingsDialog.mdx +++ b/packages/main/src/webComponents/UserSettingsDialog/UserSettingsDialog.mdx @@ -10,7 +10,7 @@ import * as ComponentStories from './UserSettingsDialog.stories'; <Meta of={ComponentStories} /> -<DocsHeader of={ComponentStories} experimental mergeSubComponents subComponents={['UserSettingsItem', 'UserSettingsView', "UserSettingsAppearanceView","UserSettingsAppearanceViewGroup","UserSettingsAppearanceViewItem"]} /> +<DocsHeader of={ComponentStories} mergeSubComponents subComponents={['UserSettingsItem', 'UserSettingsView', "UserSettingsAppearanceView","UserSettingsAppearanceViewGroup","UserSettingsAppearanceViewItem"]} /> <br /> diff --git a/packages/main/src/webComponents/UserSettingsDialog/UserSettingsDialog.stories.tsx b/packages/main/src/webComponents/UserSettingsDialog/UserSettingsDialog.stories.tsx index f7de50b3ddd..4574da7e0ed 100644 --- a/packages/main/src/webComponents/UserSettingsDialog/UserSettingsDialog.stories.tsx +++ b/packages/main/src/webComponents/UserSettingsDialog/UserSettingsDialog.stories.tsx @@ -35,7 +35,7 @@ const meta = { fixedItems: { control: { disable: true } }, }, args: {}, - tags: ['package:@ui5/webcomponents', 'experimental'], + tags: ['package:@ui5/webcomponents'], } satisfies Meta<typeof UserSettingsDialog>; type Story = StoryObj<typeof meta>; export default meta; From 2c4e76fd7ba2ca8d7e34a5ce1b9f3428ec9042b4 Mon Sep 17 00:00:00 2001 From: Lukas Harbarth <lukas.harbarth@sap.com> Date: Thu, 5 Mar 2026 12:30:45 +0100 Subject: [PATCH 5/9] Update version-info.json --- config/version-info.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/config/version-info.json b/config/version-info.json index b12946d9599..180b4fc9f4c 100644 --- a/config/version-info.json +++ b/config/version-info.json @@ -61,5 +61,6 @@ "2.16.1": "2.16.0", "2.17.0": "2.17.0", "2.18.0": "2.18.0", - "2.19.0": "2.19.0" + "2.19.0": "2.19.0", + "2.20.0": "2.20.0" } From 2e3389766f62dcdf60b7e8acea9e73081936a97b Mon Sep 17 00:00:00 2001 From: Lukas Harbarth <lukas.harbarth@sap.com> Date: Thu, 5 Mar 2026 12:43:32 +0100 Subject: [PATCH 6/9] SB: RatingIndicator custom icons example --- .../RatingIndicator/RatingIndicator.mdx | 8 ++++++++ .../RatingIndicator.stories.tsx | 19 +++++++++++++++++++ 2 files changed, 27 insertions(+) diff --git a/packages/main/src/webComponents/RatingIndicator/RatingIndicator.mdx b/packages/main/src/webComponents/RatingIndicator/RatingIndicator.mdx index 5b236170cd7..07c4d959d46 100644 --- a/packages/main/src/webComponents/RatingIndicator/RatingIndicator.mdx +++ b/packages/main/src/webComponents/RatingIndicator/RatingIndicator.mdx @@ -16,4 +16,12 @@ import * as ComponentStories from './RatingIndicator.stories'; <ControlsWithNote of={ComponentStories.Default} /> +## More Examples + +## Custom Icons + +The RatingIndicator supports custom icons for both selected and unselected states using the `ratedIcon` and `unratedIcon` props. + +<Canvas of={ComponentStories.CustomIcons} /> + <Footer /> diff --git a/packages/main/src/webComponents/RatingIndicator/RatingIndicator.stories.tsx b/packages/main/src/webComponents/RatingIndicator/RatingIndicator.stories.tsx index a310153b44c..29633854e92 100644 --- a/packages/main/src/webComponents/RatingIndicator/RatingIndicator.stories.tsx +++ b/packages/main/src/webComponents/RatingIndicator/RatingIndicator.stories.tsx @@ -1,4 +1,9 @@ import type { Meta, StoryObj } from '@storybook/react-vite'; +import borderIcon from '@ui5/webcomponents-icons/dist/border.js'; +import circleTask2Icon from '@ui5/webcomponents-icons/dist/circle-task-2.js'; +import heart2Icon from '@ui5/webcomponents-icons/dist/heart-2.js'; +import heartIcon from '@ui5/webcomponents-icons/dist/heart.js'; +import thumbUpIcon from '@ui5/webcomponents-icons/dist/thumb-up.js'; import { RatingIndicator } from './index.js'; const meta = { @@ -13,3 +18,17 @@ export default meta; type Story = StoryObj<typeof meta>; export const Default: Story = {}; + +export const CustomIcons: Story = { + render() { + return ( + <> + <RatingIndicator value={3} ratedIcon={heartIcon} unratedIcon={heart2Icon} /> + <br /> + <RatingIndicator value={4} ratedIcon={thumbUpIcon} unratedIcon={borderIcon} /> + <br /> + <RatingIndicator value={2.5} ratedIcon={circleTask2Icon} unratedIcon={borderIcon} readonly /> + </> + ); + }, +}; From f011040ea1e570b2a688180d7975f82cb05b609a Mon Sep 17 00:00:00 2001 From: Lukas Harbarth <lukas.harbarth@sap.com> Date: Thu, 5 Mar 2026 13:05:50 +0100 Subject: [PATCH 7/9] SB: ToolbarItem story --- .storybook/preview-head.html | 7 +++ .../src/webComponents/Toolbar/Toolbar.mdx | 24 +++++++- .../webComponents/Toolbar/Toolbar.stories.tsx | 56 +++++++++++++++++++ 3 files changed, 86 insertions(+), 1 deletion(-) diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html index 56dd2cec306..f957ff1189a 100644 --- a/.storybook/preview-head.html +++ b/.storybook/preview-head.html @@ -184,6 +184,13 @@ text-shadow: none; } + /*ToolbarItem overflow column display*/ + ui5-toolbar-item:state(overflowed) .toolbar-item-group { + display: flex; + flex-direction: column; + align-items: flex-start; + } + /* TODO remove this workaround as soon as https://github.com/storybookjs/storybook/issues/20497 is fixed */ .docs-story > div > div[scale] { min-height: 20px; diff --git a/packages/main/src/webComponents/Toolbar/Toolbar.mdx b/packages/main/src/webComponents/Toolbar/Toolbar.mdx index 8ce0d0574f4..5f4ed674340 100644 --- a/packages/main/src/webComponents/Toolbar/Toolbar.mdx +++ b/packages/main/src/webComponents/Toolbar/Toolbar.mdx @@ -1,7 +1,7 @@ import { ArgTypesWithNote, ControlsWithNote, DocsHeader, Footer } from '@sb/components'; import SubcomponentsSection from '@sb/docs/SubcomponentsSection.md?raw'; import { Canvas, Description, Markdown, Meta } from '@storybook/addon-docs/blocks'; -import { ToolbarButton, ToolbarSelect, ToolbarSelectOption, ToolbarSeparator, ToolbarSpacer } from '../index.ts'; +import { ToolbarButton, ToolbarItem, ToolbarSelect, ToolbarSelectOption, ToolbarSeparator, ToolbarSpacer } from '../index.ts'; import * as ComponentStories from './Toolbar.stories'; <Meta of={ComponentStories} /> @@ -18,6 +18,23 @@ import * as ComponentStories from './Toolbar.stories'; <ControlsWithNote of={ComponentStories.Default} /> +## ToolbarItem + +ToolbarItem wrapper used to add any component to Toolbar. + +**Note:** To display the radio buttons and checkboxes in a column in the overflow popover, the `toolbar-item-group` CSS class is used: + +```css +/* Use :state(overflowed) to style items differently when in overflow popover */ +[ui5-toolbar-item]:state(overflowed) .toolbar-item-group { + display: flex; + flex-direction: column; + align-items: flex-start; +} +``` + +<Canvas of={ComponentStories.WithToolbarItem} /> + ## Opening Popovers via ToolbarButton Since the `ToolbarButton` is an [abstract UI5 web component](?path=/docs/knowledge-base-faq--docs#what-are-abstract-ui5-web-components), the opener of the `Popover` needs the DOM reference of the actual element to position the popover correctly. @@ -64,6 +81,11 @@ function ToolbarWithPopover() { <Markdown>{SubcomponentsSection}</Markdown> +## ToolbarItem + +<Description of={ToolbarItem} />" +<ArgTypesWithNote metaOf={ComponentStories} of={ToolbarItem} /> + ## ToolbarButton <Description of={ToolbarButton} /> diff --git a/packages/main/src/webComponents/Toolbar/Toolbar.stories.tsx b/packages/main/src/webComponents/Toolbar/Toolbar.stories.tsx index 98cc2fe7c04..905269a0ac5 100644 --- a/packages/main/src/webComponents/Toolbar/Toolbar.stories.tsx +++ b/packages/main/src/webComponents/Toolbar/Toolbar.stories.tsx @@ -1,9 +1,19 @@ import type { Meta, StoryObj } from '@storybook/react-vite'; import ToolbarAlign from '@ui5/webcomponents/dist/types/ToolbarAlign.js'; import { useRef, useState } from 'react'; +import { CheckBox } from '../CheckBox/index.js'; +import { ComboBox } from '../ComboBox/index.js'; +import { ComboBoxItem } from '../ComboBoxItem/index.js'; +import { DatePicker } from '../DatePicker/index.js'; +import { Input } from '../Input/index.js'; +import { MultiComboBox } from '../MultiComboBox/index.js'; +import { MultiComboBoxItem } from '../MultiComboBoxItem/index.js'; import { Popover } from '../Popover/index.js'; import type { PopoverDomRef } from '../Popover/index.js'; +import { RadioButton } from '../RadioButton/index.js'; +import { Switch } from '../Switch/index.js'; import { ToolbarButton } from '../ToolbarButton/index.js'; +import { ToolbarItem } from '../ToolbarItem/index.js'; import { ToolbarSelect } from '../ToolbarSelect/index.js'; import { ToolbarSelectOption } from '../ToolbarSelectOption/index.js'; import { ToolbarSeparator } from '../ToolbarSeparator/index.js'; @@ -80,3 +90,49 @@ export const OpenPopover: Story = { ); }, }; + +export const WithToolbarItem: Story = { + render(args) { + return ( + <Toolbar {...args}> + <ToolbarItem> + <div role="radiogroup" aria-label="Options" className="toolbar-item-group"> + <RadioButton name="group1" text="Option 1" checked /> + <RadioButton name="group1" text="Option 2" /> + <RadioButton name="group1" text="Option 3" /> + </div> + </ToolbarItem> + <ToolbarItem> + <div role="group" aria-label="Checkboxes" className="toolbar-item-group"> + <CheckBox text="Checkbox 1" /> + <CheckBox text="Checkbox 2" checked /> + <CheckBox text="Checkbox 3" /> + </div> + </ToolbarItem> + <ToolbarItem> + <Input placeholder="Enter text" /> + </ToolbarItem> + <ToolbarItem> + <ComboBox placeholder="Select an option"> + <ComboBoxItem text="Option 1" /> + <ComboBoxItem text="Option 2" /> + <ComboBoxItem text="Option 3" /> + </ComboBox> + </ToolbarItem> + <ToolbarItem> + <MultiComboBox placeholder="Select options"> + <MultiComboBoxItem text="Item 1" /> + <MultiComboBoxItem text="Item 2" /> + <MultiComboBoxItem text="Item 3" /> + </MultiComboBox> + </ToolbarItem> + <ToolbarItem> + <Switch textOn="On" textOff="Off" /> + </ToolbarItem> + <ToolbarItem> + <DatePicker placeholder="Select a date" /> + </ToolbarItem> + </Toolbar> + ); + }, +}; From c002b6b96e9927be4eeb9a1170217f70ff2741ef Mon Sep 17 00:00:00 2001 From: Lukas Harbarth <lukas.harbarth@sap.com> Date: Thu, 5 Mar 2026 13:14:51 +0100 Subject: [PATCH 8/9] [ci chromatic] From 40aef7fffe0477a8a7b1da8f0cc4c156ddc93c0f Mon Sep 17 00:00:00 2001 From: Lukas Harbarth <lukas.harbarth@sap.com> Date: Thu, 5 Mar 2026 16:47:42 +0100 Subject: [PATCH 9/9] AnalyticalTable: add safeguard for useF2CellEdit plugin hook --- .../AnalyticalTable/pluginHooks/useF2CellEdit.ts | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/main/src/components/AnalyticalTable/pluginHooks/useF2CellEdit.ts b/packages/main/src/components/AnalyticalTable/pluginHooks/useF2CellEdit.ts index 7dd9b437e63..6116700facf 100644 --- a/packages/main/src/components/AnalyticalTable/pluginHooks/useF2CellEdit.ts +++ b/packages/main/src/components/AnalyticalTable/pluginHooks/useF2CellEdit.ts @@ -146,7 +146,13 @@ useF2CellEdit.useCallbackRef = <T extends HTMLElement = HTMLElement>(props: Cell if (typeof (el as Ui5DomRef).getFocusDomRefAsync === 'function') { void (el as Ui5DomRef) .getFocusDomRefAsync() - .then((resolved) => setTabIndex(resolved)) + .then((resolved) => { + if (resolved && resolved !== el) { + setTabIndex(resolved); + } else { + el.setAttribute('tabindex', cellContentTabIndex); + } + }) .catch(() => { // fail silently });