@ui5/webcomponents 2.22.0 → 2.23.0-rc.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +32 -0
- package/dist/.tsbuildinfo +1 -1
- package/dist/Carousel.js +13 -3
- package/dist/Carousel.js.map +1 -1
- package/dist/ComboBox.d.ts +4 -0
- package/dist/ComboBox.js +6 -0
- package/dist/ComboBox.js.map +1 -1
- package/dist/DateComponentBase.d.ts +8 -0
- package/dist/DateComponentBase.js +10 -8
- package/dist/DateComponentBase.js.map +1 -1
- package/dist/DateTimePicker.d.ts +5 -6
- package/dist/DateTimePicker.js +9 -11
- package/dist/DateTimePicker.js.map +1 -1
- package/dist/DayPicker.d.ts +16 -1
- package/dist/DayPicker.js +28 -7
- package/dist/DayPicker.js.map +1 -1
- package/dist/Form.d.ts +4 -4
- package/dist/Form.js +6 -6
- package/dist/Form.js.map +1 -1
- package/dist/GridWalker.js +8 -2
- package/dist/GridWalker.js.map +1 -1
- package/dist/Icon.d.ts +19 -0
- package/dist/Icon.js +17 -0
- package/dist/Icon.js.map +1 -1
- package/dist/IconTemplate.js +4 -1
- package/dist/IconTemplate.js.map +1 -1
- package/dist/Input.d.ts +4 -0
- package/dist/Input.js.map +1 -1
- package/dist/List.js +54 -2
- package/dist/List.js.map +1 -1
- package/dist/ListItem.d.ts +21 -6
- package/dist/ListItem.js +72 -23
- package/dist/ListItem.js.map +1 -1
- package/dist/ListItemBase.d.ts +6 -1
- package/dist/ListItemBase.js +20 -1
- package/dist/ListItemBase.js.map +1 -1
- package/dist/ListItemBaseTemplate.d.ts +2 -2
- package/dist/ListItemBaseTemplate.js.map +1 -1
- package/dist/ListItemGroup.d.ts +2 -0
- package/dist/ListItemGroup.js.map +1 -1
- package/dist/ListItemTemplate.js +1 -1
- package/dist/ListItemTemplate.js.map +1 -1
- package/dist/Menu.d.ts +4 -0
- package/dist/Menu.js.map +1 -1
- package/dist/MultiComboBox.d.ts +5 -1
- package/dist/MultiComboBox.js +41 -24
- package/dist/MultiComboBox.js.map +1 -1
- package/dist/MultiInput.d.ts +6 -0
- package/dist/MultiInput.js +38 -9
- package/dist/MultiInput.js.map +1 -1
- package/dist/Panel.d.ts +2 -1
- package/dist/Panel.js +2 -1
- package/dist/Panel.js.map +1 -1
- package/dist/PanelTemplate.js +1 -1
- package/dist/PanelTemplate.js.map +1 -1
- package/dist/Select.d.ts +2 -0
- package/dist/Select.js +3 -0
- package/dist/Select.js.map +1 -1
- package/dist/Tab.d.ts +8 -1
- package/dist/Tab.js +13 -0
- package/dist/Tab.js.map +1 -1
- package/dist/TabContainer.d.ts +6 -3
- package/dist/TabContainer.js +15 -10
- package/dist/TabContainer.js.map +1 -1
- package/dist/Table.d.ts +1 -0
- package/dist/Table.js +25 -10
- package/dist/Table.js.map +1 -1
- package/dist/TableCustomAnnouncement.d.ts +1 -0
- package/dist/TableCustomAnnouncement.js +17 -2
- package/dist/TableCustomAnnouncement.js.map +1 -1
- package/dist/TableGroupRow.d.ts +60 -0
- package/dist/TableGroupRow.js +114 -0
- package/dist/TableGroupRow.js.map +1 -0
- package/dist/TableGroupRowTemplate.d.ts +2 -0
- package/dist/TableGroupRowTemplate.js +7 -0
- package/dist/TableGroupRowTemplate.js.map +1 -0
- package/dist/TableRowActionBase.d.ts +1 -1
- package/dist/TableRowActionBase.js +1 -1
- package/dist/TableRowActionBase.js.map +1 -1
- package/dist/TableRowActionNavigation.d.ts +2 -1
- package/dist/TableRowActionNavigation.js +11 -1
- package/dist/TableRowActionNavigation.js.map +1 -1
- package/dist/TableRowBase.d.ts +1 -0
- package/dist/TableRowBase.js +3 -0
- package/dist/TableRowBase.js.map +1 -1
- package/dist/TableSelection.js +2 -2
- package/dist/TableSelection.js.map +1 -1
- package/dist/TableSelectionMulti.js +1 -1
- package/dist/TableSelectionMulti.js.map +1 -1
- package/dist/TableVirtualizer.d.ts +1 -0
- package/dist/TableVirtualizer.js +1 -0
- package/dist/TableVirtualizer.js.map +1 -1
- package/dist/Token.js +9 -5
- package/dist/Token.js.map +1 -1
- package/dist/Tokenizer.d.ts +1 -0
- package/dist/Tokenizer.js +31 -5
- package/dist/Tokenizer.js.map +1 -1
- package/dist/bundle.esm.js +3 -0
- package/dist/bundle.esm.js.map +1 -1
- package/dist/css/themes/Dialog.css +1 -1
- package/dist/css/themes/Form.css +1 -1
- package/dist/css/themes/FormItemSpan.css +1 -1
- package/dist/css/themes/FormLayout.css +1 -1
- package/dist/css/themes/Icon.css +1 -1
- package/dist/css/themes/ListItemBase.css +1 -1
- package/dist/css/themes/OptionBase.css +1 -1
- package/dist/css/themes/Select.css +1 -1
- package/dist/css/themes/SliderTooltip.css +1 -1
- package/dist/css/themes/Table.css +1 -1
- package/dist/css/themes/TableGroupRow.css +1 -0
- package/dist/css/themes/TableRowBase.css +1 -1
- package/dist/css/themes/Toolbar.css +1 -1
- package/dist/css/themes/sap_fiori_3/parameters-bundle.css +1 -1
- package/dist/css/themes/sap_fiori_3_dark/parameters-bundle.css +1 -1
- package/dist/css/themes/sap_fiori_3_hcb/parameters-bundle.css +1 -1
- package/dist/css/themes/sap_fiori_3_hcw/parameters-bundle.css +1 -1
- package/dist/css/themes/sap_horizon/parameters-bundle.css +1 -1
- package/dist/css/themes/sap_horizon_auto/parameters-bundle.css +6 -5
- package/dist/css/themes/sap_horizon_dark/parameters-bundle.css +1 -1
- package/dist/css/themes/sap_horizon_hc_auto/parameters-bundle.css +4 -2
- package/dist/css/themes/sap_horizon_hcb/parameters-bundle.css +1 -1
- package/dist/css/themes/sap_horizon_hcw/parameters-bundle.css +1 -1
- package/dist/custom-elements-internal.json +1271 -111
- package/dist/custom-elements.json +591 -12
- package/dist/dynamic-date-range-options/DateTimeRangeTemplate.js +7 -2
- package/dist/dynamic-date-range-options/DateTimeRangeTemplate.js.map +1 -1
- package/dist/dynamic-date-range-options/FromDateTimeTemplate.js +1 -1
- package/dist/dynamic-date-range-options/FromDateTimeTemplate.js.map +1 -1
- package/dist/generated/assets/i18n/messagebundle_ar.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_bg.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_ca.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_cnr.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_cs.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_cy.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_da.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_de.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_el.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_en.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_en_GB.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_en_US_sappsd.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_en_US_saprigi.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_en_US_saptrc.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_es.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_es_MX.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_et.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_fi.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_fr.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_fr_CA.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_hi.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_hr.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_hu.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_id.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_it.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_iw.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_ja.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_kk.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_ko.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_lt.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_lv.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_mk.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_ms.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_nl.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_no.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_pl.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_pt.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_pt_PT.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_ro.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_ru.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_sh.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_sk.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_sl.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_sr.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_sv.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_th.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_tr.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_uk.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_vi.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_zh_CN.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_zh_TW.json +1 -1
- package/dist/generated/assets/themes/sap_fiori_3/parameters-bundle.css.json +1 -1
- package/dist/generated/assets/themes/sap_fiori_3_dark/parameters-bundle.css.json +1 -1
- package/dist/generated/assets/themes/sap_fiori_3_hcb/parameters-bundle.css.json +1 -1
- package/dist/generated/assets/themes/sap_fiori_3_hcw/parameters-bundle.css.json +1 -1
- package/dist/generated/assets/themes/sap_horizon/parameters-bundle.css.json +1 -1
- package/dist/generated/assets/themes/sap_horizon_auto/parameters-bundle.css.json +1 -1
- package/dist/generated/assets/themes/sap_horizon_dark/parameters-bundle.css.json +1 -1
- package/dist/generated/assets/themes/sap_horizon_hc_auto/parameters-bundle.css.json +1 -1
- package/dist/generated/assets/themes/sap_horizon_hcb/parameters-bundle.css.json +1 -1
- package/dist/generated/assets/themes/sap_horizon_hcw/parameters-bundle.css.json +1 -1
- package/dist/generated/i18n/i18n-defaults.d.ts +2 -1
- package/dist/generated/i18n/i18n-defaults.js +6 -5
- package/dist/generated/i18n/i18n-defaults.js.map +1 -1
- package/dist/generated/themes/Dialog.css.d.ts +1 -1
- package/dist/generated/themes/Dialog.css.js +1 -1
- package/dist/generated/themes/Dialog.css.js.map +1 -1
- package/dist/generated/themes/Form.css.d.ts +1 -1
- package/dist/generated/themes/Form.css.js +1 -1
- package/dist/generated/themes/Form.css.js.map +1 -1
- package/dist/generated/themes/FormItemSpan.css.d.ts +1 -1
- package/dist/generated/themes/FormItemSpan.css.js +1 -1
- package/dist/generated/themes/FormItemSpan.css.js.map +1 -1
- package/dist/generated/themes/FormLayout.css.d.ts +1 -1
- package/dist/generated/themes/FormLayout.css.js +1 -1
- package/dist/generated/themes/FormLayout.css.js.map +1 -1
- package/dist/generated/themes/Icon.css.d.ts +1 -1
- package/dist/generated/themes/Icon.css.js +1 -1
- package/dist/generated/themes/Icon.css.js.map +1 -1
- package/dist/generated/themes/ListItemBase.css.d.ts +1 -1
- package/dist/generated/themes/ListItemBase.css.js +1 -1
- package/dist/generated/themes/ListItemBase.css.js.map +1 -1
- package/dist/generated/themes/OptionBase.css.d.ts +1 -1
- package/dist/generated/themes/OptionBase.css.js +1 -1
- package/dist/generated/themes/OptionBase.css.js.map +1 -1
- package/dist/generated/themes/Select.css.d.ts +1 -1
- package/dist/generated/themes/Select.css.js +1 -1
- package/dist/generated/themes/Select.css.js.map +1 -1
- package/dist/generated/themes/SliderTooltip.css.d.ts +1 -1
- package/dist/generated/themes/SliderTooltip.css.js +1 -1
- package/dist/generated/themes/SliderTooltip.css.js.map +1 -1
- package/dist/generated/themes/Table.css.d.ts +1 -1
- package/dist/generated/themes/Table.css.js +1 -1
- package/dist/generated/themes/Table.css.js.map +1 -1
- package/dist/generated/themes/TableGroupRow.css.d.ts +2 -0
- package/dist/generated/themes/TableGroupRow.css.js +8 -0
- package/dist/generated/themes/TableGroupRow.css.js.map +1 -0
- package/dist/generated/themes/TableRowBase.css.d.ts +1 -1
- package/dist/generated/themes/TableRowBase.css.js +1 -1
- package/dist/generated/themes/TableRowBase.css.js.map +1 -1
- package/dist/generated/themes/Toolbar.css.d.ts +1 -1
- package/dist/generated/themes/Toolbar.css.js +1 -1
- package/dist/generated/themes/Toolbar.css.js.map +1 -1
- package/dist/generated/themes/sap_fiori_3/parameters-bundle.css.d.ts +1 -1
- package/dist/generated/themes/sap_fiori_3/parameters-bundle.css.js +1 -1
- package/dist/generated/themes/sap_fiori_3/parameters-bundle.css.js.map +1 -1
- package/dist/generated/themes/sap_fiori_3_dark/parameters-bundle.css.d.ts +1 -1
- package/dist/generated/themes/sap_fiori_3_dark/parameters-bundle.css.js +1 -1
- package/dist/generated/themes/sap_fiori_3_dark/parameters-bundle.css.js.map +1 -1
- package/dist/generated/themes/sap_fiori_3_hcb/parameters-bundle.css.d.ts +1 -1
- package/dist/generated/themes/sap_fiori_3_hcb/parameters-bundle.css.js +1 -1
- package/dist/generated/themes/sap_fiori_3_hcb/parameters-bundle.css.js.map +1 -1
- package/dist/generated/themes/sap_fiori_3_hcw/parameters-bundle.css.d.ts +1 -1
- package/dist/generated/themes/sap_fiori_3_hcw/parameters-bundle.css.js +1 -1
- package/dist/generated/themes/sap_fiori_3_hcw/parameters-bundle.css.js.map +1 -1
- package/dist/generated/themes/sap_horizon/parameters-bundle.css.d.ts +1 -1
- package/dist/generated/themes/sap_horizon/parameters-bundle.css.js +1 -1
- package/dist/generated/themes/sap_horizon/parameters-bundle.css.js.map +1 -1
- package/dist/generated/themes/sap_horizon_auto/parameters-bundle.css.d.ts +1 -1
- package/dist/generated/themes/sap_horizon_auto/parameters-bundle.css.js +6 -5
- package/dist/generated/themes/sap_horizon_auto/parameters-bundle.css.js.map +1 -1
- package/dist/generated/themes/sap_horizon_dark/parameters-bundle.css.d.ts +1 -1
- package/dist/generated/themes/sap_horizon_dark/parameters-bundle.css.js +1 -1
- package/dist/generated/themes/sap_horizon_dark/parameters-bundle.css.js.map +1 -1
- package/dist/generated/themes/sap_horizon_hc_auto/parameters-bundle.css.d.ts +1 -1
- package/dist/generated/themes/sap_horizon_hc_auto/parameters-bundle.css.js +4 -2
- package/dist/generated/themes/sap_horizon_hc_auto/parameters-bundle.css.js.map +1 -1
- package/dist/generated/themes/sap_horizon_hcb/parameters-bundle.css.d.ts +1 -1
- package/dist/generated/themes/sap_horizon_hcb/parameters-bundle.css.js +1 -1
- package/dist/generated/themes/sap_horizon_hcb/parameters-bundle.css.js.map +1 -1
- package/dist/generated/themes/sap_horizon_hcw/parameters-bundle.css.d.ts +1 -1
- package/dist/generated/themes/sap_horizon_hcw/parameters-bundle.css.js +1 -1
- package/dist/generated/themes/sap_horizon_hcw/parameters-bundle.css.js.map +1 -1
- package/dist/vscode.html-custom-data.json +142 -22
- package/dist/web-types.json +351 -40
- package/package-scripts.cjs +1 -0
- package/package.json +9 -9
- package/src/IconTemplate.tsx +18 -0
- package/src/ListItemBaseTemplate.tsx +3 -3
- package/src/ListItemTemplate.tsx +0 -2
- package/src/PanelTemplate.tsx +1 -0
- package/src/TableGroupRowTemplate.tsx +24 -0
- package/src/dynamic-date-range-options/DateTimeRangeTemplate.tsx +8 -2
- package/src/dynamic-date-range-options/FromDateTimeTemplate.tsx +1 -1
- package/src/i18n/messagebundle.properties +2 -0
- package/src/i18n/messagebundle_ar.properties +26 -6
- package/src/i18n/messagebundle_bg.properties +24 -4
- package/src/i18n/messagebundle_ca.properties +24 -4
- package/src/i18n/messagebundle_cnr.properties +24 -4
- package/src/i18n/messagebundle_cs.properties +25 -5
- package/src/i18n/messagebundle_cy.properties +24 -4
- package/src/i18n/messagebundle_da.properties +25 -5
- package/src/i18n/messagebundle_de.properties +24 -4
- package/src/i18n/messagebundle_el.properties +24 -4
- package/src/i18n/messagebundle_en.properties +24 -4
- package/src/i18n/messagebundle_en_GB.properties +24 -4
- package/src/i18n/messagebundle_en_US_sappsd.properties +24 -4
- package/src/i18n/messagebundle_en_US_saprigi.properties +22 -4
- package/src/i18n/messagebundle_en_US_saptrc.properties +24 -4
- package/src/i18n/messagebundle_es.properties +25 -5
- package/src/i18n/messagebundle_es_MX.properties +24 -4
- package/src/i18n/messagebundle_et.properties +24 -4
- package/src/i18n/messagebundle_fi.properties +24 -4
- package/src/i18n/messagebundle_fr.properties +25 -5
- package/src/i18n/messagebundle_fr_CA.properties +28 -8
- package/src/i18n/messagebundle_hi.properties +25 -5
- package/src/i18n/messagebundle_hr.properties +24 -4
- package/src/i18n/messagebundle_hu.properties +24 -4
- package/src/i18n/messagebundle_id.properties +25 -5
- package/src/i18n/messagebundle_it.properties +25 -5
- package/src/i18n/messagebundle_iw.properties +24 -4
- package/src/i18n/messagebundle_ja.properties +24 -4
- package/src/i18n/messagebundle_kk.properties +24 -4
- package/src/i18n/messagebundle_ko.properties +27 -7
- package/src/i18n/messagebundle_lt.properties +24 -4
- package/src/i18n/messagebundle_lv.properties +24 -4
- package/src/i18n/messagebundle_mk.properties +25 -5
- package/src/i18n/messagebundle_ms.properties +24 -4
- package/src/i18n/messagebundle_nl.properties +24 -4
- package/src/i18n/messagebundle_no.properties +25 -5
- package/src/i18n/messagebundle_pl.properties +24 -4
- package/src/i18n/messagebundle_pt.properties +24 -4
- package/src/i18n/messagebundle_pt_PT.properties +24 -4
- package/src/i18n/messagebundle_ro.properties +24 -4
- package/src/i18n/messagebundle_ru.properties +26 -6
- package/src/i18n/messagebundle_sh.properties +24 -4
- package/src/i18n/messagebundle_sk.properties +24 -4
- package/src/i18n/messagebundle_sl.properties +25 -5
- package/src/i18n/messagebundle_sr.properties +24 -4
- package/src/i18n/messagebundle_sv.properties +24 -4
- package/src/i18n/messagebundle_th.properties +24 -4
- package/src/i18n/messagebundle_tr.properties +24 -4
- package/src/i18n/messagebundle_uk.properties +36 -16
- package/src/i18n/messagebundle_vi.properties +25 -5
- package/src/i18n/messagebundle_zh_CN.properties +26 -6
- package/src/i18n/messagebundle_zh_TW.properties +24 -4
- package/src/themes/Dialog.css +2 -2
- package/src/themes/FormItemSpan.css +4 -4
- package/src/themes/FormLayout.css +4 -4
- package/src/themes/Icon.css +6 -0
- package/src/themes/ListItemBase.css +4 -3
- package/src/themes/OptionBase.css +6 -0
- package/src/themes/Select.css +11 -0
- package/src/themes/SliderTooltip.css +1 -1
- package/src/themes/Table.css +1 -4
- package/src/themes/TableGroupRow.css +20 -0
- package/src/themes/TableRowBase.css +5 -0
- package/src/themes/Toolbar.css +2 -2
- package/src/themes/base/Select-parameters.css +2 -0
- package/src/themes/base/sizes-parameters.css +2 -2
- package/src/themes/sap_fiori_3_hcb/Link-parameters.css +1 -1
- package/src/themes/sap_fiori_3_hcw/Link-parameters.css +1 -1
- package/src/themes/sap_horizon/Select-parameters.css +6 -3
- package/src/themes/sap_horizon_dark/Select-parameters.css +6 -3
- package/src/themes/sap_horizon_hcb/Link-parameters.css +1 -1
- package/src/themes/sap_horizon_hcw/Link-parameters.css +1 -1
- package/src/themes/base/SliderTooltip-parameters.css +0 -3
- package/src/themes/sap_fiori_3/SliderTooltip-parameters.css +0 -5
- package/src/themes/sap_fiori_3_dark/SliderTooltip-parameters.css +0 -5
- package/src/themes/sap_fiori_3_hcb/SliderTooltip-parameters.css +0 -5
- package/src/themes/sap_fiori_3_hcw/SliderTooltip-parameters.css +0 -5
- package/src/themes/sap_horizon_dark/SliderTooltip-parameters.css +0 -1
- package/src/themes/sap_horizon_hcb/SliderTooltip-parameters.css +0 -1
- package/src/themes/sap_horizon_hcw/SliderTooltip-parameters.css +0 -1
|
@@ -1040,7 +1040,7 @@
|
|
|
1040
1040
|
},
|
|
1041
1041
|
{
|
|
1042
1042
|
"name": "ui5-cb-item",
|
|
1043
|
-
"description": "The `ui5-cb-item` represents the item for a `ui5-combobox`.\n\n\n---\n\n\n",
|
|
1043
|
+
"description": "The `ui5-cb-item` represents the item for a `ui5-combobox`.\n\n\n---\n\n\n\n\n### **Events:**\n - **click** - 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`.",
|
|
1044
1044
|
"attributes": [
|
|
1045
1045
|
{
|
|
1046
1046
|
"name": "additional-text",
|
|
@@ -2053,7 +2053,7 @@
|
|
|
2053
2053
|
},
|
|
2054
2054
|
{
|
|
2055
2055
|
"name": "ui5-form",
|
|
2056
|
-
"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** (
|
|
2056
|
+
"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** (0 - 599px) – 1 column is recommended (default: 1)\n- **M** (600px - 1023px) – up to 2 columns are recommended (default: 1)\n- **L** (1024px - 1439px) - up to 3 columns are recommended (default: 2)\n- **XL** (>= 1440px) – 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\";\n\n\n---\n\n\n\n\n### **Slots:**\n - **default** - 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.\n- **header** - Defines the component header area.\n\n**Note:** When a `header` is provided, the `headerText` property is ignored.\n\n### **CSS Parts:**\n - **column** - Used to style a single column of the form column layout.\n- **header** - Used to style the wrapper of the header.\n- **layout** - Used to style the element defining the form column layout.",
|
|
2057
2057
|
"attributes": [
|
|
2058
2058
|
{
|
|
2059
2059
|
"name": "accessible-mode",
|
|
@@ -2163,7 +2163,7 @@
|
|
|
2163
2163
|
},
|
|
2164
2164
|
{
|
|
2165
2165
|
"name": "ui5-icon",
|
|
2166
|
-
"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\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Icon.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **click** - Fired when the component is activated by mouse/touch, keyboard (Enter or Space),\nor screen reader virtual cursor activation.\n\n**Note:** The event will not be fired if the `mode` property is set to `Decorative` or `Image`.\n\n### **CSS Parts:**\n - **root** - Used to style the outermost wrapper of the `ui5-icon`.",
|
|
2166
|
+
"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\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Icon.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **click** - Fired when the component is activated by mouse/touch, keyboard (Enter or Space),\nor screen reader virtual cursor activation.\n\n**Note:** The event will not be fired if the `mode` property is set to `Decorative` or `Image`.\n\n### **Slots:**\n - **fontIcon** - Defines the font icon to be used as an icon.\nIntended for font-based icon libraries where\nthe application loads the font and provides a slotted element with the unicode character.\nWhen this slot is used, the component renders a `<span>` instead of an `<svg>`.\nAccessibility is fully delegated to the application — set `accessible-name` and `mode` explicitly.\n\n**Example:**\n```html\n<ui5-icon mode=\"Image\" accessible-name=\"Home\">\n <i class=\"fa fa-home\" slot=\"fontIcon\"></i>\n</ui5-icon>\n```\n\n### **CSS Parts:**\n - **root** - Used to style the outermost wrapper of the `ui5-icon`.",
|
|
2167
2167
|
"attributes": [
|
|
2168
2168
|
{
|
|
2169
2169
|
"name": "accessible-name",
|
|
@@ -2546,13 +2546,24 @@
|
|
|
2546
2546
|
},
|
|
2547
2547
|
{
|
|
2548
2548
|
"name": "list-item",
|
|
2549
|
-
"description": "A class to serve as a base\nfor the `ListItemStandard` and `ListItemCustom` classes.\n\n\n---\n\n\n\n\n### **Events:**\n - **detail-click** - Fired when the user clicks on the detail button when type is `Detail`.\n\n### **Slots:**\n - **deleteButton** - 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.",
|
|
2549
|
+
"description": "A class to serve as a base\nfor the `ListItemStandard` and `ListItemCustom` classes.\n\n\n---\n\n\n\n\n### **Events:**\n - **click** - 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`.\n- **detail-click** - Fired when the user clicks on the detail button when type is `Detail`.\n\n### **Slots:**\n - **deleteButton** - 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.",
|
|
2550
2550
|
"attributes": [
|
|
2551
2551
|
{
|
|
2552
2552
|
"name": "accessibility-attributes",
|
|
2553
2553
|
"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.",
|
|
2554
2554
|
"values": [{ "name": "ListItemAccessibilityAttributes" }]
|
|
2555
2555
|
},
|
|
2556
|
+
{
|
|
2557
|
+
"name": "accessible-role",
|
|
2558
|
+
"description": "Used to define the role of the list item.\n\n**Note:** If not set, the role is automatically inherited from the parent `ui5-list` based on its `accessible-role` property\n(e.g. `Menu` -> `MenuItem`, `Tree` -> `TreeItem`, `ListBox` -> `Option`).\nAn explicitly set `accessible-role` on the list item takes precedence over the inherited role.",
|
|
2559
|
+
"values": [
|
|
2560
|
+
{ "name": "None" },
|
|
2561
|
+
{ "name": "ListItem" },
|
|
2562
|
+
{ "name": "MenuItem" },
|
|
2563
|
+
{ "name": "TreeItem" },
|
|
2564
|
+
{ "name": "Option" }
|
|
2565
|
+
]
|
|
2566
|
+
},
|
|
2556
2567
|
{
|
|
2557
2568
|
"name": "highlight",
|
|
2558
2569
|
"description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.",
|
|
@@ -2594,13 +2605,13 @@
|
|
|
2594
2605
|
},
|
|
2595
2606
|
{
|
|
2596
2607
|
"name": "list-item-base",
|
|
2597
|
-
"description": "A class to serve as a foundation\nfor the `ListItem` and `ListItemGroupHeader` classes.\n\n\n---\n\n\n",
|
|
2608
|
+
"description": "A class to serve as a foundation\nfor the `ListItem` and `ListItemGroupHeader` classes.\n\n\n---\n\n\n\n\n### **Events:**\n - **click** - 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`.",
|
|
2598
2609
|
"attributes": [],
|
|
2599
2610
|
"references": []
|
|
2600
2611
|
},
|
|
2601
2612
|
{
|
|
2602
2613
|
"name": "ui5-li-custom",
|
|
2603
|
-
"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.\n\n\n---\n\n\n\n\n### **Events:**\n - **detail-click** - Fired when the user clicks on the detail button when type is `Detail`.\n\n### **Slots:**\n - **default** - Defines the content of the component.\n- **deleteButton** - 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.\n\n### **CSS Parts:**\n - **checkbox** - Used to style the checkbox rendered when the list item is in multiple selection mode\n- **content** - Used to style the content area of the list item\n- **delete-button** - Used to style the button rendered when the list item is in delete mode\n- **detail-button** - Used to style the button rendered when the list item is of type detail\n- **native-li** - Used to style the main li tag of the list item\n- **radio** - Used to style the radio button rendered when the list item is in single selection mode",
|
|
2614
|
+
"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.\n\n\n---\n\n\n\n\n### **Events:**\n - **click** - 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`.\n- **detail-click** - Fired when the user clicks on the detail button when type is `Detail`.\n\n### **Slots:**\n - **default** - Defines the content of the component.\n- **deleteButton** - 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.\n\n### **CSS Parts:**\n - **checkbox** - Used to style the checkbox rendered when the list item is in multiple selection mode\n- **content** - Used to style the content area of the list item\n- **delete-button** - Used to style the button rendered when the list item is in delete mode\n- **detail-button** - Used to style the button rendered when the list item is of type detail\n- **native-li** - Used to style the main li tag of the list item\n- **radio** - Used to style the radio button rendered when the list item is in single selection mode",
|
|
2604
2615
|
"attributes": [
|
|
2605
2616
|
{
|
|
2606
2617
|
"name": "accessibility-attributes",
|
|
@@ -2612,6 +2623,17 @@
|
|
|
2612
2623
|
"description": "Defines the text alternative of the component.\n\n**Note**: If not provided a default text alternative will be set, if present.",
|
|
2613
2624
|
"values": []
|
|
2614
2625
|
},
|
|
2626
|
+
{
|
|
2627
|
+
"name": "accessible-role",
|
|
2628
|
+
"description": "Used to define the role of the list item.\n\n**Note:** If not set, the role is automatically inherited from the parent `ui5-list` based on its `accessible-role` property\n(e.g. `Menu` -> `MenuItem`, `Tree` -> `TreeItem`, `ListBox` -> `Option`).\nAn explicitly set `accessible-role` on the list item takes precedence over the inherited role.",
|
|
2629
|
+
"values": [
|
|
2630
|
+
{ "name": "None" },
|
|
2631
|
+
{ "name": "ListItem" },
|
|
2632
|
+
{ "name": "MenuItem" },
|
|
2633
|
+
{ "name": "TreeItem" },
|
|
2634
|
+
{ "name": "Option" }
|
|
2635
|
+
]
|
|
2636
|
+
},
|
|
2615
2637
|
{
|
|
2616
2638
|
"name": "highlight",
|
|
2617
2639
|
"description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.",
|
|
@@ -2680,7 +2702,7 @@
|
|
|
2680
2702
|
},
|
|
2681
2703
|
{
|
|
2682
2704
|
"name": "ui5-li-group-header",
|
|
2683
|
-
"description": "The `ui5-li-group-header` is a special list item, used only to separate other list items into logical groups.\n\n\n---\n\n\n\n\n### **Slots:**\n - **default** - 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.",
|
|
2705
|
+
"description": "The `ui5-li-group-header` is a special list item, used only to separate other list items into logical groups.\n\n\n---\n\n\n\n\n### **Events:**\n - **click** - 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`.\n\n### **Slots:**\n - **default** - 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.",
|
|
2684
2706
|
"attributes": [
|
|
2685
2707
|
{
|
|
2686
2708
|
"name": "accessible-name",
|
|
@@ -2697,7 +2719,7 @@
|
|
|
2697
2719
|
},
|
|
2698
2720
|
{
|
|
2699
2721
|
"name": "ui5-li",
|
|
2700
|
-
"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`.\n\n\n---\n\n\n\n\n### **Events:**\n - **detail-click** - Fired when the user clicks on the detail button when type is `Detail`.\n\n### **Slots:**\n - **default** - 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.\n- **deleteButton** - 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.\n- **image** - **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.\n\n### **CSS Parts:**\n - **additional-text** - Used to style the additionalText of the list item\n- **checkbox** - Used to style the checkbox rendered when the list item is in multiple selection mode\n- **content** - Used to style the content area of the list item\n- **delete-button** - Used to style the button rendered when the list item is in delete mode\n- **description** - Used to style the description of the list item\n- **detail-button** - Used to style the button rendered when the list item is of type detail\n- **icon** - Used to style the icon of the list item\n- **native-li** - Used to style the main li tag of the list item\n- **radio** - Used to style the radio button rendered when the list item is in single selection mode\n- **title** - Used to style the title of the list item",
|
|
2722
|
+
"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`.\n\n\n---\n\n\n\n\n### **Events:**\n - **click** - 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`.\n- **detail-click** - Fired when the user clicks on the detail button when type is `Detail`.\n\n### **Slots:**\n - **default** - 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.\n- **deleteButton** - 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.\n- **image** - **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.\n\n### **CSS Parts:**\n - **additional-text** - Used to style the additionalText of the list item\n- **checkbox** - Used to style the checkbox rendered when the list item is in multiple selection mode\n- **content** - Used to style the content area of the list item\n- **delete-button** - Used to style the button rendered when the list item is in delete mode\n- **description** - Used to style the description of the list item\n- **detail-button** - Used to style the button rendered when the list item is of type detail\n- **icon** - Used to style the icon of the list item\n- **native-li** - Used to style the main li tag of the list item\n- **radio** - Used to style the radio button rendered when the list item is in single selection mode\n- **title** - Used to style the title of the list item",
|
|
2701
2723
|
"attributes": [
|
|
2702
2724
|
{
|
|
2703
2725
|
"name": "accessibility-attributes",
|
|
@@ -2709,6 +2731,17 @@
|
|
|
2709
2731
|
"description": "Defines the text alternative of the component.\nNote: If not provided a default text alternative will be set, if present.",
|
|
2710
2732
|
"values": []
|
|
2711
2733
|
},
|
|
2734
|
+
{
|
|
2735
|
+
"name": "accessible-role",
|
|
2736
|
+
"description": "Used to define the role of the list item.\n\n**Note:** If not set, the role is automatically inherited from the parent `ui5-list` based on its `accessible-role` property\n(e.g. `Menu` -> `MenuItem`, `Tree` -> `TreeItem`, `ListBox` -> `Option`).\nAn explicitly set `accessible-role` on the list item takes precedence over the inherited role.",
|
|
2737
|
+
"values": [
|
|
2738
|
+
{ "name": "None" },
|
|
2739
|
+
{ "name": "ListItem" },
|
|
2740
|
+
{ "name": "MenuItem" },
|
|
2741
|
+
{ "name": "TreeItem" },
|
|
2742
|
+
{ "name": "Option" }
|
|
2743
|
+
]
|
|
2744
|
+
},
|
|
2712
2745
|
{
|
|
2713
2746
|
"name": "additional-text",
|
|
2714
2747
|
"description": "Defines the `additionalText`, displayed in the end of the list item.",
|
|
@@ -2848,7 +2881,7 @@
|
|
|
2848
2881
|
},
|
|
2849
2882
|
{
|
|
2850
2883
|
"name": "ui5-menu-item",
|
|
2851
|
-
"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\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **before-close** - Fired before the menu is closed. This event can be cancelled, which will prevent the menu from closing.\n- **before-open** - 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.\n- **check** - Fired when an item is checked or unchecked.\n- **close** - Fired after the menu is closed.\n- **detail-click** - Fired when the user clicks on the detail button when type is `Detail`.\n- **open** - Fired after the menu is opened.\n\n### **Slots:**\n - **default** - 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`.\n- **deleteButton** - 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.\n- **endContent** - 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.",
|
|
2884
|
+
"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\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **before-close** - Fired before the menu is closed. This event can be cancelled, which will prevent the menu from closing.\n- **before-open** - 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.\n- **check** - Fired when an item is checked or unchecked.\n- **click** - 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`.\n- **close** - Fired after the menu is closed.\n- **detail-click** - Fired when the user clicks on the detail button when type is `Detail`.\n- **open** - Fired after the menu is opened.\n\n### **Slots:**\n - **default** - 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`.\n- **deleteButton** - 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.\n- **endContent** - 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.",
|
|
2852
2885
|
"attributes": [
|
|
2853
2886
|
{
|
|
2854
2887
|
"name": "accessibility-attributes",
|
|
@@ -2860,6 +2893,17 @@
|
|
|
2860
2893
|
"description": "Defines the accessible ARIA name of the component.",
|
|
2861
2894
|
"values": []
|
|
2862
2895
|
},
|
|
2896
|
+
{
|
|
2897
|
+
"name": "accessible-role",
|
|
2898
|
+
"description": "Used to define the role of the list item.\n\n**Note:** If not set, the role is automatically inherited from the parent `ui5-list` based on its `accessible-role` property\n(e.g. `Menu` -> `MenuItem`, `Tree` -> `TreeItem`, `ListBox` -> `Option`).\nAn explicitly set `accessible-role` on the list item takes precedence over the inherited role.",
|
|
2899
|
+
"values": [
|
|
2900
|
+
{ "name": "None" },
|
|
2901
|
+
{ "name": "ListItem" },
|
|
2902
|
+
{ "name": "MenuItem" },
|
|
2903
|
+
{ "name": "TreeItem" },
|
|
2904
|
+
{ "name": "Option" }
|
|
2905
|
+
]
|
|
2906
|
+
},
|
|
2863
2907
|
{
|
|
2864
2908
|
"name": "additional-text",
|
|
2865
2909
|
"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`.",
|
|
@@ -2952,7 +2996,7 @@
|
|
|
2952
2996
|
},
|
|
2953
2997
|
{
|
|
2954
2998
|
"name": "ui5-menu-separator",
|
|
2955
|
-
"description": "The `ui5-menu-separator` represents a horizontal line to separate menu items inside a `ui5-menu`.\n\n\n---\n\n\n",
|
|
2999
|
+
"description": "The `ui5-menu-separator` represents a horizontal line to separate menu items inside a `ui5-menu`.\n\n\n---\n\n\n\n\n### **Events:**\n - **click** - 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`.",
|
|
2956
3000
|
"attributes": [],
|
|
2957
3001
|
"references": []
|
|
2958
3002
|
},
|
|
@@ -3159,7 +3203,7 @@
|
|
|
3159
3203
|
},
|
|
3160
3204
|
{
|
|
3161
3205
|
"name": "ui5-mcb-item",
|
|
3162
|
-
"description": "The `ui5-mcb-item` represents the item for a `ui5-multi-combobox`.\n\n\n---\n\n\n",
|
|
3206
|
+
"description": "The `ui5-mcb-item` represents the item for a `ui5-multi-combobox`.\n\n\n---\n\n\n\n\n### **Events:**\n - **click** - 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`.",
|
|
3163
3207
|
"attributes": [
|
|
3164
3208
|
{
|
|
3165
3209
|
"name": "additional-text",
|
|
@@ -3329,7 +3373,7 @@
|
|
|
3329
3373
|
},
|
|
3330
3374
|
{
|
|
3331
3375
|
"name": "ui5-option",
|
|
3332
|
-
"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\";`\n\n\n---\n\n\n\n\n### **Slots:**\n - **default** - 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.",
|
|
3376
|
+
"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\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **click** - 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`.\n\n### **Slots:**\n - **default** - 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.",
|
|
3333
3377
|
"attributes": [
|
|
3334
3378
|
{
|
|
3335
3379
|
"name": "additional-text",
|
|
@@ -3361,7 +3405,7 @@
|
|
|
3361
3405
|
},
|
|
3362
3406
|
{
|
|
3363
3407
|
"name": "ui5-option-custom",
|
|
3364
|
-
"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\";`\n\n\n---\n\n\n\n\n### **Slots:**\n - **default** - Defines the content of the component.",
|
|
3408
|
+
"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\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **click** - 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`.\n\n### **Slots:**\n - **default** - Defines the content of the component.",
|
|
3365
3409
|
"attributes": [
|
|
3366
3410
|
{
|
|
3367
3411
|
"name": "display-text",
|
|
@@ -3388,7 +3432,7 @@
|
|
|
3388
3432
|
},
|
|
3389
3433
|
{
|
|
3390
3434
|
"name": "ui5-panel",
|
|
3391
|
-
"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\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **toggle** - Fired when the component is expanded/collapsed by user interaction.\n\n### **Slots:**\n - **default** - Defines the content of the component. The content is visible only when the component is expanded.\n- **header** - Defines the component header area.\n\n**Note:** When a header is provided, the `headerText` property is ignored.\n\n### **CSS Parts:**\n - **content** - Used to style the wrapper of the content.\n- **header** - Used to style the wrapper
|
|
3435
|
+
"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\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **toggle** - Fired when the component is expanded/collapsed by user interaction.\n\n### **Slots:**\n - **default** - Defines the content of the component. The content is visible only when the component is expanded.\n- **header** - Defines the component header area.\n\n**Note:** When a header is provided, the `headerText` property is ignored.\n\n### **CSS Parts:**\n - **content** - Used to style the wrapper of the content.\n- **header** - Used to style the header.\n- **header-wrapper** - Used to style the outermost header wrapper, useful for adjusting sticky header position.",
|
|
3392
3436
|
"attributes": [
|
|
3393
3437
|
{
|
|
3394
3438
|
"name": "accessible-name",
|
|
@@ -4429,7 +4473,7 @@
|
|
|
4429
4473
|
},
|
|
4430
4474
|
{
|
|
4431
4475
|
"name": "ui5-suggestion-item",
|
|
4432
|
-
"description": "The `ui5-suggestion-item` represents the suggestion item of the `ui5-input`.\n\n\n---\n\n\n",
|
|
4476
|
+
"description": "The `ui5-suggestion-item` represents the suggestion item of the `ui5-input`.\n\n\n---\n\n\n\n\n### **Events:**\n - **click** - 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`.",
|
|
4433
4477
|
"attributes": [
|
|
4434
4478
|
{
|
|
4435
4479
|
"name": "additional-text",
|
|
@@ -4446,7 +4490,7 @@
|
|
|
4446
4490
|
},
|
|
4447
4491
|
{
|
|
4448
4492
|
"name": "ui5-suggestion-item-custom",
|
|
4449
|
-
"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\"\n\n\n---\n\n\n\n\n### **Slots:**\n - **default** - Defines the content of the component.",
|
|
4493
|
+
"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\"\n\n\n---\n\n\n\n\n### **Events:**\n - **click** - 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`.\n\n### **Slots:**\n - **default** - Defines the content of the component.",
|
|
4450
4494
|
"attributes": [
|
|
4451
4495
|
{
|
|
4452
4496
|
"name": "text",
|
|
@@ -4480,7 +4524,7 @@
|
|
|
4480
4524
|
},
|
|
4481
4525
|
{
|
|
4482
4526
|
"name": "ui5-li-suggestion-item",
|
|
4483
|
-
"description": "The `ui5-li-suggestion-item` represents the suggestion item in the `ui5-input`\nsuggestion popover.\n\n\n---\n\n\n\n\n### **Events:**\n - **detail-click** - Fired when the user clicks on the detail button when type is `Detail`.\n\n### **Slots:**\n - **default** - Defines the title text of the suggestion item.\n- **deleteButton** - 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.\n- **image** - **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.\n- **richDescription** - Defines a description that can contain HTML.\n**Note:** If not specified, the `description` property will be used.\n\n### **CSS Parts:**\n - **additional-text** - Used to style the additionalText of the list item\n- **checkbox** - Used to style the checkbox rendered when the list item is in multiple selection mode\n- **content** - Used to style the content area of the list item\n- **delete-button** - Used to style the button rendered when the list item is in delete mode\n- **description** - Used to style the description of the suggestion list item\n- **detail-button** - Used to style the button rendered when the list item is of type detail\n- **icon** - Used to style the icon of the list item\n- **info** - Used to style the info of the suggestion list item\n- **native-li** - Used to style the main li tag of the list item\n- **radio** - Used to style the radio button rendered when the list item is in single selection mode\n- **title** - Used to style the title of the suggestion list item",
|
|
4527
|
+
"description": "The `ui5-li-suggestion-item` represents the suggestion item in the `ui5-input`\nsuggestion popover.\n\n\n---\n\n\n\n\n### **Events:**\n - **click** - 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`.\n- **detail-click** - Fired when the user clicks on the detail button when type is `Detail`.\n\n### **Slots:**\n - **default** - Defines the title text of the suggestion item.\n- **deleteButton** - 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.\n- **image** - **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.\n- **richDescription** - Defines a description that can contain HTML.\n**Note:** If not specified, the `description` property will be used.\n\n### **CSS Parts:**\n - **additional-text** - Used to style the additionalText of the list item\n- **checkbox** - Used to style the checkbox rendered when the list item is in multiple selection mode\n- **content** - Used to style the content area of the list item\n- **delete-button** - Used to style the button rendered when the list item is in delete mode\n- **description** - Used to style the description of the suggestion list item\n- **detail-button** - Used to style the button rendered when the list item is of type detail\n- **icon** - Used to style the icon of the list item\n- **info** - Used to style the info of the suggestion list item\n- **native-li** - Used to style the main li tag of the list item\n- **radio** - Used to style the radio button rendered when the list item is in single selection mode\n- **title** - Used to style the title of the suggestion list item",
|
|
4484
4528
|
"attributes": [
|
|
4485
4529
|
{
|
|
4486
4530
|
"name": "accessibility-attributes",
|
|
@@ -4492,6 +4536,17 @@
|
|
|
4492
4536
|
"description": "Defines the text alternative of the component.\nNote: If not provided a default text alternative will be set, if present.",
|
|
4493
4537
|
"values": []
|
|
4494
4538
|
},
|
|
4539
|
+
{
|
|
4540
|
+
"name": "accessible-role",
|
|
4541
|
+
"description": "Used to define the role of the list item.\n\n**Note:** If not set, the role is automatically inherited from the parent `ui5-list` based on its `accessible-role` property\n(e.g. `Menu` -> `MenuItem`, `Tree` -> `TreeItem`, `ListBox` -> `Option`).\nAn explicitly set `accessible-role` on the list item takes precedence over the inherited role.",
|
|
4542
|
+
"values": [
|
|
4543
|
+
{ "name": "None" },
|
|
4544
|
+
{ "name": "ListItem" },
|
|
4545
|
+
{ "name": "MenuItem" },
|
|
4546
|
+
{ "name": "TreeItem" },
|
|
4547
|
+
{ "name": "Option" }
|
|
4548
|
+
]
|
|
4549
|
+
},
|
|
4495
4550
|
{
|
|
4496
4551
|
"name": "additional-text",
|
|
4497
4552
|
"description": "Defines the `additionalText`, displayed in the end of the list item.",
|
|
@@ -4646,7 +4701,7 @@
|
|
|
4646
4701
|
},
|
|
4647
4702
|
{
|
|
4648
4703
|
"name": "ui5-tab",
|
|
4649
|
-
"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.\n\n\n---\n\n\n\n\n### **Methods:**\n - **getDomRefInStrip(): _HTMLElement | undefined_** - 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.\n\n### **Slots:**\n - **default** - Holds the content associated with this tab.\n- **items** - Defines hierarchies with nested sub tabs.\n\n**Note:** Use `ui5-tab` and `ui5-tab-separator` for the intended design.",
|
|
4704
|
+
"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.\n\n\n---\n\n\n\n\n### **Events:**\n - **click** - Fired when the tab is selected either with a mouse/tap or by using the Enter or Space key.\n\n### **Methods:**\n - **getDomRefInStrip(): _HTMLElement | undefined_** - 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.\n\n### **Slots:**\n - **default** - Holds the content associated with this tab.\n- **items** - Defines hierarchies with nested sub tabs.\n\n**Note:** Use `ui5-tab` and `ui5-tab-separator` for the intended design.",
|
|
4650
4705
|
"attributes": [
|
|
4651
4706
|
{
|
|
4652
4707
|
"name": "additional-text",
|
|
@@ -4836,6 +4891,38 @@
|
|
|
4836
4891
|
],
|
|
4837
4892
|
"references": []
|
|
4838
4893
|
},
|
|
4894
|
+
{
|
|
4895
|
+
"name": "ui5-table-group-row",
|
|
4896
|
+
"description": "### Overview\n\nThe `ui5-table-group-row` component represents a group header row in the `ui5-table`.\nIt is used to visually group rows and spans across all visible table columns.\n\n### Usage\n\nThe `ui5-table-group-row` is placed as a direct child of `ui5-table`, alongside `ui5-table-row` elements.\nRows following a group row are considered part of that group until the next group row.\n\n```html\n<ui5-table>\n <ui5-table-header-row>...</ui5-table-header-row>\n <ui5-table-group-row>Country: Germany</ui5-table-group-row>\n <ui5-table-row>...</ui5-table-row>\n <ui5-table-row>...</ui5-table-row>\n <ui5-table-group-row>Country: France</ui5-table-group-row>\n <ui5-table-row>...</ui5-table-row>\n</ui5-table>\n```\n\n### Unsupported Features\n\nThe following features of `ui5-table-row` are currently not supported by `ui5-table-group-row` and have no effect:\n\n- **Cells** (`cells` slot): Group rows render a single spanning cell with a text. Any slotted `ui5-table-cell` elements are ignored.\n- **Actions** (`actions` slot): Row actions such as `ui5-table-row-action` or `ui5-table-row-action-navigation` are not rendered.\n- **Navigation** (`navigated` property): The navigated indicator is not rendered on group rows.\n- **Interactive** (`interactive` property): Group rows do not support click/activation behavior.\n- **Selection** (`rowKey` property`): Group rows cannot be selected. They are excluded from select all and range selection operations.\n- **Virtualizer** (`position` property`): Group rows are not supported by the `ui5-table-virtualizer`.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TableGroupRow.js\";`\n\n\n---\n\n\n\n\n### **Slots:**\n - **actions** - Defines the actions of the component.\n\n**Note:** Use `ui5-table-row-action` or `ui5-table-row-action-navigation` for the intended design.\n- **default** - Defines the cells of the component.\n\n**Note:** Use `ui5-table-cell` for the intended design.",
|
|
4897
|
+
"attributes": [
|
|
4898
|
+
{
|
|
4899
|
+
"name": "interactive",
|
|
4900
|
+
"description": "Defines the interactive state of the row.",
|
|
4901
|
+
"values": []
|
|
4902
|
+
},
|
|
4903
|
+
{
|
|
4904
|
+
"name": "movable",
|
|
4905
|
+
"description": "Defines whether the row is movable.",
|
|
4906
|
+
"values": []
|
|
4907
|
+
},
|
|
4908
|
+
{
|
|
4909
|
+
"name": "navigated",
|
|
4910
|
+
"description": "Defines the navigated state of the row.",
|
|
4911
|
+
"values": []
|
|
4912
|
+
},
|
|
4913
|
+
{
|
|
4914
|
+
"name": "position",
|
|
4915
|
+
"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.",
|
|
4916
|
+
"values": []
|
|
4917
|
+
},
|
|
4918
|
+
{
|
|
4919
|
+
"name": "row-key",
|
|
4920
|
+
"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.",
|
|
4921
|
+
"values": []
|
|
4922
|
+
}
|
|
4923
|
+
],
|
|
4924
|
+
"references": []
|
|
4925
|
+
},
|
|
4839
4926
|
{
|
|
4840
4927
|
"name": "ui5-table-growing",
|
|
4841
4928
|
"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\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **load-more** - Fired when the growing button is pressed or the user scrolls to the end of the table.",
|
|
@@ -5102,7 +5189,7 @@
|
|
|
5102
5189
|
},
|
|
5103
5190
|
{
|
|
5104
5191
|
"name": "ui5-table-virtualizer",
|
|
5105
|
-
"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\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **range-change** - Fired when the virtualizer is changed by user interaction e.g. on scrolling.\n\n### **Methods:**\n - **reset(): _void_** - Resets the virtualizer to its initial state and triggers the `range-change` event.",
|
|
5192
|
+
"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**Note:** The `ui5-table-group-row` component is not supported by the virtualizer. Only `ui5-table-row` elements can be virtualized.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents/dist/TableVirtualizer.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **range-change** - Fired when the virtualizer is changed by user interaction e.g. on scrolling.\n\n### **Methods:**\n - **reset(): _void_** - Resets the virtualizer to its initial state and triggers the `range-change` event.",
|
|
5106
5193
|
"attributes": [
|
|
5107
5194
|
{
|
|
5108
5195
|
"name": "extra-rows",
|
|
@@ -6076,7 +6163,7 @@
|
|
|
6076
6163
|
},
|
|
6077
6164
|
{
|
|
6078
6165
|
"name": "ui5-tree-item",
|
|
6079
|
-
"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\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **detail-click** - Fired when the user clicks on the detail button when type is `Detail`.\n\n### **Methods:**\n - **toggle(): _void_** - Call this method to manually switch the `expanded` state of a tree item.\n\n### **Slots:**\n - **default** - Defines the items of the component.\n\n**Note:** Use `ui5-tree-item` or `ui5-tree-item-custom`\n- **deleteButton** - 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.\n- **image** - **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.\n\n### **CSS Parts:**\n - **additionalText** - Used to style the additionalText of the tree list item\n- **icon** - Used to style the icon of the tree list item\n- **title** - Used to style the title of the tree list item",
|
|
6166
|
+
"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\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **click** - 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`.\n- **detail-click** - Fired when the user clicks on the detail button when type is `Detail`.\n\n### **Methods:**\n - **toggle(): _void_** - Call this method to manually switch the `expanded` state of a tree item.\n\n### **Slots:**\n - **default** - Defines the items of the component.\n\n**Note:** Use `ui5-tree-item` or `ui5-tree-item-custom`\n- **deleteButton** - 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.\n- **image** - **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.\n\n### **CSS Parts:**\n - **additionalText** - Used to style the additionalText of the tree list item\n- **icon** - Used to style the icon of the tree list item\n- **title** - Used to style the title of the tree list item",
|
|
6080
6167
|
"attributes": [
|
|
6081
6168
|
{
|
|
6082
6169
|
"name": "accessibility-attributes",
|
|
@@ -6088,6 +6175,17 @@
|
|
|
6088
6175
|
"description": "Defines the accessible name of the component.",
|
|
6089
6176
|
"values": []
|
|
6090
6177
|
},
|
|
6178
|
+
{
|
|
6179
|
+
"name": "accessible-role",
|
|
6180
|
+
"description": "Used to define the role of the list item.\n\n**Note:** If not set, the role is automatically inherited from the parent `ui5-list` based on its `accessible-role` property\n(e.g. `Menu` -> `MenuItem`, `Tree` -> `TreeItem`, `ListBox` -> `Option`).\nAn explicitly set `accessible-role` on the list item takes precedence over the inherited role.",
|
|
6181
|
+
"values": [
|
|
6182
|
+
{ "name": "None" },
|
|
6183
|
+
{ "name": "ListItem" },
|
|
6184
|
+
{ "name": "MenuItem" },
|
|
6185
|
+
{ "name": "TreeItem" },
|
|
6186
|
+
{ "name": "Option" }
|
|
6187
|
+
]
|
|
6188
|
+
},
|
|
6091
6189
|
{
|
|
6092
6190
|
"name": "additional-text",
|
|
6093
6191
|
"description": "Defines the `additionalText`, displayed in the end of the tree item.",
|
|
@@ -6175,7 +6273,7 @@
|
|
|
6175
6273
|
},
|
|
6176
6274
|
{
|
|
6177
6275
|
"name": "tree-item-base",
|
|
6178
|
-
"description": "A class to serve as a foundation\nfor the `TreeItem` and `TreeItemCustom` classes.\n\n\n---\n\n\n\n\n### **Events:**\n - **detail-click** - Fired when the user clicks on the detail button when type is `Detail`.\n\n### **Methods:**\n - **toggle(): _void_** - Call this method to manually switch the `expanded` state of a tree item.\n\n### **Slots:**\n - **default** - Defines the items of the component.\n\n**Note:** Use `ui5-tree-item` or `ui5-tree-item-custom`\n- **deleteButton** - 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.\n- **image** - **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.",
|
|
6276
|
+
"description": "A class to serve as a foundation\nfor the `TreeItem` and `TreeItemCustom` classes.\n\n\n---\n\n\n\n\n### **Events:**\n - **click** - 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`.\n- **detail-click** - Fired when the user clicks on the detail button when type is `Detail`.\n\n### **Methods:**\n - **toggle(): _void_** - Call this method to manually switch the `expanded` state of a tree item.\n\n### **Slots:**\n - **default** - Defines the items of the component.\n\n**Note:** Use `ui5-tree-item` or `ui5-tree-item-custom`\n- **deleteButton** - 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.\n- **image** - **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.",
|
|
6179
6277
|
"attributes": [
|
|
6180
6278
|
{
|
|
6181
6279
|
"name": "accessibility-attributes",
|
|
@@ -6187,6 +6285,17 @@
|
|
|
6187
6285
|
"description": "Defines the accessible name of the component.",
|
|
6188
6286
|
"values": []
|
|
6189
6287
|
},
|
|
6288
|
+
{
|
|
6289
|
+
"name": "accessible-role",
|
|
6290
|
+
"description": "Used to define the role of the list item.\n\n**Note:** If not set, the role is automatically inherited from the parent `ui5-list` based on its `accessible-role` property\n(e.g. `Menu` -> `MenuItem`, `Tree` -> `TreeItem`, `ListBox` -> `Option`).\nAn explicitly set `accessible-role` on the list item takes precedence over the inherited role.",
|
|
6291
|
+
"values": [
|
|
6292
|
+
{ "name": "None" },
|
|
6293
|
+
{ "name": "ListItem" },
|
|
6294
|
+
{ "name": "MenuItem" },
|
|
6295
|
+
{ "name": "TreeItem" },
|
|
6296
|
+
{ "name": "Option" }
|
|
6297
|
+
]
|
|
6298
|
+
},
|
|
6190
6299
|
{
|
|
6191
6300
|
"name": "additional-text-state",
|
|
6192
6301
|
"description": "Defines the state of the `additionalText`.\n\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.",
|
|
@@ -6264,7 +6373,7 @@
|
|
|
6264
6373
|
},
|
|
6265
6374
|
{
|
|
6266
6375
|
"name": "ui5-tree-item-custom",
|
|
6267
|
-
"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\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **detail-click** - Fired when the user clicks on the detail button when type is `Detail`.\n\n### **Methods:**\n - **toggle(): _void_** - Call this method to manually switch the `expanded` state of a tree item.\n\n### **Slots:**\n - **content** - Defines the content of the `ui5-tree-item`.\n- **default** - Defines the items of the component.\n\n**Note:** Use `ui5-tree-item` or `ui5-tree-item-custom`\n- **deleteButton** - 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.\n- **image** - **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.\n\n### **CSS Parts:**\n - **additionalText** - Used to style the additionalText of the tree list item\n- **icon** - Used to style the icon of the tree list item\n- **title** - Used to style the title of the tree list item",
|
|
6376
|
+
"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\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **click** - 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`.\n- **detail-click** - Fired when the user clicks on the detail button when type is `Detail`.\n\n### **Methods:**\n - **toggle(): _void_** - Call this method to manually switch the `expanded` state of a tree item.\n\n### **Slots:**\n - **content** - Defines the content of the `ui5-tree-item`.\n- **default** - Defines the items of the component.\n\n**Note:** Use `ui5-tree-item` or `ui5-tree-item-custom`\n- **deleteButton** - 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.\n- **image** - **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.\n\n### **CSS Parts:**\n - **additionalText** - Used to style the additionalText of the tree list item\n- **icon** - Used to style the icon of the tree list item\n- **title** - Used to style the title of the tree list item",
|
|
6268
6377
|
"attributes": [
|
|
6269
6378
|
{
|
|
6270
6379
|
"name": "accessibility-attributes",
|
|
@@ -6276,6 +6385,17 @@
|
|
|
6276
6385
|
"description": "Defines the accessible name of the component.",
|
|
6277
6386
|
"values": []
|
|
6278
6387
|
},
|
|
6388
|
+
{
|
|
6389
|
+
"name": "accessible-role",
|
|
6390
|
+
"description": "Used to define the role of the list item.\n\n**Note:** If not set, the role is automatically inherited from the parent `ui5-list` based on its `accessible-role` property\n(e.g. `Menu` -> `MenuItem`, `Tree` -> `TreeItem`, `ListBox` -> `Option`).\nAn explicitly set `accessible-role` on the list item takes precedence over the inherited role.",
|
|
6391
|
+
"values": [
|
|
6392
|
+
{ "name": "None" },
|
|
6393
|
+
{ "name": "ListItem" },
|
|
6394
|
+
{ "name": "MenuItem" },
|
|
6395
|
+
{ "name": "TreeItem" },
|
|
6396
|
+
{ "name": "Option" }
|
|
6397
|
+
]
|
|
6398
|
+
},
|
|
6279
6399
|
{
|
|
6280
6400
|
"name": "additional-text-state",
|
|
6281
6401
|
"description": "Defines the state of the `additionalText`.\n\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.",
|