@sapudex/web-components 2.56.0 → 2.58.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/README.md +258 -0
- package/cypress/specs/FilterMenu.cy.tsx +209 -19
- package/cypress/specs/List.cy.tsx +67 -4
- package/cypress/specs/ListItem.cy.tsx +35 -9
- package/cypress/specs/SelectBox.cy.tsx +100 -0
- package/cypress/specs/TabNavigation.cy.tsx +297 -21
- package/cypress/specs/TagGroup.cy.tsx +35 -0
- package/dist/Carousel.d.ts +9 -3
- package/dist/Carousel.js +35 -6
- package/dist/Carousel.js.map +1 -1
- package/dist/CarouselTemplate.js +3 -3
- package/dist/CarouselTemplate.js.map +1 -1
- package/dist/List.d.ts +15 -1
- package/dist/List.js +23 -2
- package/dist/List.js.map +1 -1
- package/dist/ListGroupHeaderBase.d.ts +13 -0
- package/dist/ListGroupHeaderBase.js +43 -2
- package/dist/ListGroupHeaderBase.js.map +1 -1
- package/dist/ListGroupHeaderTemplate.js +26 -7
- package/dist/ListGroupHeaderTemplate.js.map +1 -1
- package/dist/ListItem.d.ts +0 -3
- package/dist/ListItem.js +18 -12
- package/dist/ListItem.js.map +1 -1
- package/dist/ListItemBase.d.ts +17 -0
- package/dist/ListItemBase.js +15 -0
- package/dist/ListItemBase.js.map +1 -1
- package/dist/ListItemTemplate.js +2 -2
- package/dist/ListItemTemplate.js.map +1 -1
- package/dist/MastheadCountrySelector.js +5 -5
- package/dist/MastheadCountrySelector.js.map +1 -1
- package/dist/MastheadCountrySelectorTemplate.d.ts +2 -0
- package/dist/MastheadCountrySelectorTemplate.js +15 -0
- package/dist/MastheadCountrySelectorTemplate.js.map +1 -0
- package/dist/MastheadItem.d.ts +0 -3
- package/dist/MastheadItem.js +3 -6
- package/dist/MastheadItem.js.map +1 -1
- package/dist/MastheadItemTemplate.d.ts +2 -0
- package/dist/MastheadItemTemplate.js +41 -0
- package/dist/MastheadItemTemplate.js.map +1 -0
- package/dist/MastheadMenu.d.ts +1 -0
- package/dist/MastheadMenu.js +4 -6
- package/dist/MastheadMenu.js.map +1 -1
- package/dist/MastheadMenuItem.d.ts +0 -3
- package/dist/MastheadMenuItem.js +3 -6
- package/dist/MastheadMenuItem.js.map +1 -1
- package/dist/MastheadMenuItemTemplate.d.ts +2 -0
- package/dist/MastheadMenuItemTemplate.js +36 -0
- package/dist/MastheadMenuItemTemplate.js.map +1 -0
- package/dist/MastheadMenuTemplate.d.ts +2 -0
- package/dist/MastheadMenuTemplate.js +13 -0
- package/dist/MastheadMenuTemplate.js.map +1 -0
- package/dist/MastheadMobileMenu.js +3 -3
- package/dist/MastheadMobileMenu.js.map +1 -1
- package/dist/MastheadMobileMenuTemplate.d.ts +2 -0
- package/dist/MastheadMobileMenuTemplate.js +33 -0
- package/dist/MastheadMobileMenuTemplate.js.map +1 -0
- package/dist/MastheadProfileMenu.d.ts +2 -4
- package/dist/MastheadProfileMenu.js +5 -20
- package/dist/MastheadProfileMenu.js.map +1 -1
- package/dist/MastheadProfileMenuTemplate.d.ts +2 -0
- package/dist/MastheadProfileMenuTemplate.js +24 -0
- package/dist/MastheadProfileMenuTemplate.js.map +1 -0
- package/dist/MastheadShell.js +3 -5
- package/dist/MastheadShell.js.map +1 -1
- package/dist/MastheadShellTemplate.d.ts +2 -0
- package/dist/MastheadShellTemplate.js +20 -0
- package/dist/MastheadShellTemplate.js.map +1 -0
- package/dist/SearchableListBase.d.ts +10 -0
- package/dist/SearchableListBase.js +34 -1
- package/dist/SearchableListBase.js.map +1 -1
- package/dist/SearchableListBaseTemplate.js +35 -4
- package/dist/SearchableListBaseTemplate.js.map +1 -1
- package/dist/SecondaryNavigation.d.ts +1 -0
- package/dist/SecondaryNavigation.js +20 -6
- package/dist/SecondaryNavigation.js.map +1 -1
- package/dist/SelectBase.js +8 -3
- package/dist/SelectBase.js.map +1 -1
- package/dist/Tab.d.ts +0 -7
- package/dist/Tab.js +4 -19
- package/dist/Tab.js.map +1 -1
- package/dist/TabHeaderTemplate.d.ts +2 -0
- package/dist/TabHeaderTemplate.js +15 -0
- package/dist/TabHeaderTemplate.js.map +1 -0
- package/dist/TabInOverflowTemplate.d.ts +2 -0
- package/dist/TabInOverflowTemplate.js +7 -0
- package/dist/TabInOverflowTemplate.js.map +1 -0
- package/dist/TabNavigation.d.ts +6 -6
- package/dist/TabNavigation.js +56 -42
- package/dist/TabNavigation.js.map +1 -1
- package/dist/TabNavigationPopoverTemplate.d.ts +2 -0
- package/dist/TabNavigationPopoverTemplate.js +9 -0
- package/dist/TabNavigationPopoverTemplate.js.map +1 -0
- package/dist/TabNavigationTemplate.d.ts +2 -0
- package/dist/TabNavigationTemplate.js +10 -0
- package/dist/TabNavigationTemplate.js.map +1 -0
- package/dist/TabTemplate.d.ts +2 -0
- package/dist/TabTemplate.js +5 -0
- package/dist/TabTemplate.js.map +1 -0
- package/dist/Tag.d.ts +1 -0
- package/dist/Tag.js +6 -0
- package/dist/Tag.js.map +1 -1
- package/dist/TagGroup.js +4 -2
- package/dist/TagGroup.js.map +1 -1
- package/dist/assets/{InputSuggestions-ChhTxYh4.js → InputSuggestions-CMYjJsHw.js} +1 -1
- package/dist/assets/{ListItemStandardExpandableTextTemplate-Bh1HxZfH.js → ListItemStandardExpandableTextTemplate-D2i8wWuR.js} +1 -1
- package/dist/assets/{bundle.esm-DCX_ohoZ.js → bundle.esm-BjN47C_y.js} +242 -242
- package/dist/assets/messagebundle_ar-BvIvqOKJ.js +1 -0
- package/dist/assets/messagebundle_bg-CbE9TJP3.js +1 -0
- package/dist/assets/messagebundle_cs-D7sDCnrw.js +1 -0
- package/dist/assets/messagebundle_da-BKcG2gb3.js +1 -0
- package/dist/assets/messagebundle_de-CqojOAqG.js +1 -0
- package/dist/assets/messagebundle_el-DLfp0_Vm.js +1 -0
- package/dist/assets/messagebundle_en-B7YJOdQz.js +1 -0
- package/dist/assets/messagebundle_es-dcaagZn0.js +1 -0
- package/dist/assets/messagebundle_et-XYXhCdvm.js +1 -0
- package/dist/assets/messagebundle_fi-Dffg0zEq.js +1 -0
- package/dist/assets/messagebundle_fr-CW8ENL86.js +1 -0
- package/dist/assets/messagebundle_hr-onMgZwRd.js +1 -0
- package/dist/assets/messagebundle_hu-BPDuHAe0.js +1 -0
- package/dist/assets/messagebundle_it-BcfXVW1A.js +1 -0
- package/dist/assets/messagebundle_ja-EWp-Nkd9.js +1 -0
- package/dist/assets/messagebundle_ko-BKQ27UJW.js +1 -0
- package/dist/assets/messagebundle_lt-A-f2EeMY.js +1 -0
- package/dist/assets/messagebundle_lv-CHVU_rnx.js +1 -0
- package/dist/assets/messagebundle_nl-gmf1np1i.js +1 -0
- package/dist/assets/messagebundle_no-CazfcIRA.js +1 -0
- package/dist/assets/messagebundle_pl-iv_zMkL4.js +1 -0
- package/dist/assets/messagebundle_pt-usY49ESJ.js +1 -0
- package/dist/assets/messagebundle_pt_PT-DTLEUiTC.js +1 -0
- package/dist/assets/messagebundle_ro-BHeGIHaV.js +1 -0
- package/dist/assets/messagebundle_ru-DJB1z_R0.js +1 -0
- package/dist/assets/messagebundle_sk-DlNIpzr3.js +1 -0
- package/dist/assets/messagebundle_sl-Day075Cf.js +1 -0
- package/dist/assets/messagebundle_sr-iI_TwIHf.js +1 -0
- package/dist/assets/messagebundle_sv-BPj73b5X.js +1 -0
- package/dist/assets/messagebundle_tr-DpdBqQtI.js +1 -0
- package/dist/assets/messagebundle_uk-CT4EqEBF.js +1 -0
- package/dist/assets/messagebundle_zh_CN-B_42cWcu.js +1 -0
- package/dist/assets/messagebundle_zh_TW-D25iNCcy.js +1 -0
- package/dist/css/themes/Button.css +1 -1
- package/dist/css/themes/Carousel.css +1 -1
- package/dist/css/themes/ListGroupHeader.css +1 -1
- package/dist/css/themes/PromoTile.css +1 -1
- package/dist/css/themes/Switch.css +1 -1
- package/dist/css/themes/TabInOverflow.css +1 -1
- package/dist/css/themes/TabNavigation.css +1 -1
- package/dist/css/themes/Tooltip.css +1 -1
- package/dist/custom-elements-internal.json +12 -12
- package/dist/custom-elements.json +12 -12
- 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_cs.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_es.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_hr.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_hu.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_it.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_ja.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_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_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_tr.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_uk.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/i18n/i18n-defaults.d.ts +3 -9
- package/dist/generated/i18n/i18n-defaults.js +3 -9
- package/dist/generated/i18n/i18n-defaults.js.map +1 -1
- package/dist/generated/themes/Button.css.d.ts +1 -1
- package/dist/generated/themes/Button.css.js +1 -1
- package/dist/generated/themes/Button.css.js.map +1 -1
- package/dist/generated/themes/Carousel.css.d.ts +1 -1
- package/dist/generated/themes/Carousel.css.js +1 -1
- package/dist/generated/themes/Carousel.css.js.map +1 -1
- package/dist/generated/themes/ListGroupHeader.css.d.ts +1 -1
- package/dist/generated/themes/ListGroupHeader.css.js +1 -1
- package/dist/generated/themes/ListGroupHeader.css.js.map +1 -1
- package/dist/generated/themes/PromoTile.css.d.ts +1 -1
- package/dist/generated/themes/PromoTile.css.js +1 -1
- package/dist/generated/themes/PromoTile.css.js.map +1 -1
- package/dist/generated/themes/Switch.css.d.ts +1 -1
- package/dist/generated/themes/Switch.css.js +1 -1
- package/dist/generated/themes/Switch.css.js.map +1 -1
- package/dist/generated/themes/TabInOverflow.css.d.ts +1 -1
- package/dist/generated/themes/TabInOverflow.css.js +1 -1
- package/dist/generated/themes/TabInOverflow.css.js.map +1 -1
- package/dist/generated/themes/TabNavigation.css.d.ts +1 -1
- package/dist/generated/themes/TabNavigation.css.js +1 -1
- package/dist/generated/themes/TabNavigation.css.js.map +1 -1
- package/dist/generated/themes/Tooltip.css.d.ts +1 -1
- package/dist/generated/themes/Tooltip.css.js +1 -1
- package/dist/generated/themes/Tooltip.css.js.map +1 -1
- package/dist/messagebundle.properties +4 -10
- package/dist/messagebundle_ar.properties +0 -6
- package/dist/messagebundle_bg.properties +0 -8
- package/dist/messagebundle_cs.properties +0 -8
- package/dist/messagebundle_da.properties +0 -8
- package/dist/messagebundle_de.properties +0 -8
- package/dist/messagebundle_el.properties +0 -8
- package/dist/messagebundle_en.properties +2 -8
- package/dist/messagebundle_es.properties +0 -8
- package/dist/messagebundle_et.properties +0 -8
- package/dist/messagebundle_fi.properties +0 -8
- package/dist/messagebundle_fr.properties +0 -8
- package/dist/messagebundle_hr.properties +0 -8
- package/dist/messagebundle_hu.properties +0 -8
- package/dist/messagebundle_it.properties +0 -8
- package/dist/messagebundle_ja.properties +0 -8
- package/dist/messagebundle_ko.properties +0 -8
- package/dist/messagebundle_lt.properties +0 -8
- package/dist/messagebundle_lv.properties +0 -8
- package/dist/messagebundle_nl.properties +0 -8
- package/dist/messagebundle_no.properties +0 -8
- package/dist/messagebundle_pl.properties +0 -8
- package/dist/messagebundle_pt.properties +0 -8
- package/dist/messagebundle_pt_PT.properties +0 -8
- package/dist/messagebundle_ro.properties +0 -8
- package/dist/messagebundle_ru.properties +0 -8
- package/dist/messagebundle_sk.properties +0 -8
- package/dist/messagebundle_sl.properties +0 -7
- package/dist/messagebundle_sr.properties +0 -8
- package/dist/messagebundle_sv.properties +0 -8
- package/dist/messagebundle_tr.properties +0 -8
- package/dist/messagebundle_uk.properties +0 -8
- package/dist/messagebundle_zh_CN.properties +0 -8
- package/dist/messagebundle_zh_TW.properties +0 -8
- package/dist/vscode.html-custom-data.json +10 -2
- package/dist/web-types.json +6 -6
- package/package.json +1 -1
- package/src/Carousel.ts +51 -8
- package/src/CarouselTemplate.tsx +7 -7
- package/src/List.ts +24 -2
- package/src/ListGroupHeaderBase.ts +44 -2
- package/src/ListGroupHeaderTemplate.tsx +74 -23
- package/src/ListItem.ts +18 -15
- package/src/ListItemBase.ts +30 -0
- package/src/ListItemTemplate.tsx +4 -4
- package/src/MastheadCountrySelector.ts +5 -5
- package/src/MastheadCountrySelectorTemplate.tsx +98 -0
- package/src/MastheadItem.ts +3 -6
- package/src/MastheadItemTemplate.tsx +178 -0
- package/src/MastheadMenu.ts +5 -6
- package/src/MastheadMenuItem.ts +3 -7
- package/src/MastheadMenuItemTemplate.tsx +123 -0
- package/src/MastheadMenuTemplate.tsx +142 -0
- package/src/MastheadMobileMenu.ts +3 -3
- package/src/MastheadMobileMenuTemplate.tsx +274 -0
- package/src/MastheadProfileMenu.ts +10 -23
- package/src/MastheadProfileMenuTemplate.tsx +143 -0
- package/src/MastheadShell.ts +3 -5
- package/src/MastheadShellTemplate.tsx +228 -0
- package/src/SearchableListBase.ts +37 -1
- package/src/SearchableListBaseTemplate.tsx +38 -2
- package/src/SecondaryNavigation.ts +21 -6
- package/src/SelectBase.ts +8 -3
- package/src/Tab.ts +4 -24
- package/src/TabHeaderTemplate.tsx +153 -0
- package/src/TabInOverflowTemplate.tsx +68 -0
- package/src/TabNavigation.ts +64 -46
- package/src/TabNavigationPopoverTemplate.tsx +27 -0
- package/src/TabNavigationTemplate.tsx +98 -0
- package/src/TabTemplate.tsx +7 -0
- package/src/Tag.ts +7 -0
- package/src/TagGroup.ts +4 -2
- package/src/generated/i18n/i18n-defaults.ts +2 -2
- package/src/generated/themes/Button.css.ts +1 -1
- package/src/generated/themes/Carousel.css.ts +1 -1
- package/src/generated/themes/ListGroupHeader.css.ts +1 -1
- package/src/generated/themes/PromoTile.css.ts +1 -1
- package/src/generated/themes/Switch.css.ts +1 -1
- package/src/generated/themes/TabInOverflow.css.ts +1 -1
- package/src/generated/themes/TabNavigation.css.ts +1 -1
- package/src/generated/themes/Tooltip.css.ts +1 -1
- package/src/i18n/messagebundle.properties +4 -10
- package/src/i18n/messagebundle_ar.properties +0 -6
- package/src/i18n/messagebundle_bg.properties +0 -8
- package/src/i18n/messagebundle_cs.properties +0 -8
- package/src/i18n/messagebundle_da.properties +0 -8
- package/src/i18n/messagebundle_de.properties +0 -8
- package/src/i18n/messagebundle_el.properties +0 -8
- package/src/i18n/messagebundle_en.properties +2 -8
- package/src/i18n/messagebundle_es.properties +0 -8
- package/src/i18n/messagebundle_et.properties +0 -8
- package/src/i18n/messagebundle_fi.properties +0 -8
- package/src/i18n/messagebundle_fr.properties +0 -8
- package/src/i18n/messagebundle_hr.properties +0 -8
- package/src/i18n/messagebundle_hu.properties +0 -8
- package/src/i18n/messagebundle_it.properties +0 -8
- package/src/i18n/messagebundle_ja.properties +0 -8
- package/src/i18n/messagebundle_ko.properties +0 -8
- package/src/i18n/messagebundle_lt.properties +0 -8
- package/src/i18n/messagebundle_lv.properties +0 -8
- package/src/i18n/messagebundle_nl.properties +0 -8
- package/src/i18n/messagebundle_no.properties +0 -8
- package/src/i18n/messagebundle_pl.properties +0 -8
- package/src/i18n/messagebundle_pt.properties +0 -8
- package/src/i18n/messagebundle_pt_PT.properties +0 -8
- package/src/i18n/messagebundle_ro.properties +0 -8
- package/src/i18n/messagebundle_ru.properties +0 -8
- package/src/i18n/messagebundle_sk.properties +0 -8
- package/src/i18n/messagebundle_sl.properties +0 -7
- package/src/i18n/messagebundle_sr.properties +0 -8
- package/src/i18n/messagebundle_sv.properties +0 -8
- package/src/i18n/messagebundle_tr.properties +0 -8
- package/src/i18n/messagebundle_uk.properties +0 -8
- package/src/i18n/messagebundle_zh_CN.properties +0 -8
- package/src/i18n/messagebundle_zh_TW.properties +0 -8
- package/src/themes/Button.css +2 -1
- package/src/themes/Carousel.css +17 -10
- package/src/themes/ListGroupHeader.css +50 -7
- package/src/themes/PromoTile.css +1 -0
- package/src/themes/Switch.css +2 -2
- package/src/themes/TabInOverflow.css +9 -4
- package/src/themes/TabNavigation.css +1 -0
- package/src/themes/Tooltip.css +5 -4
- package/dist/assets/messagebundle_ar-BUZ_gTvQ.js +0 -1
- package/dist/assets/messagebundle_bg-4ainC3nj.js +0 -1
- package/dist/assets/messagebundle_cs-CFtmLavu.js +0 -1
- package/dist/assets/messagebundle_da-BHL-qTPd.js +0 -1
- package/dist/assets/messagebundle_de-SMiMT-ST.js +0 -1
- package/dist/assets/messagebundle_el-ChAszJ4A.js +0 -1
- package/dist/assets/messagebundle_en-B0P3kkb6.js +0 -1
- package/dist/assets/messagebundle_es-LGmRBKqB.js +0 -1
- package/dist/assets/messagebundle_et-yYsmBPXN.js +0 -1
- package/dist/assets/messagebundle_fi-DeMNrHC9.js +0 -1
- package/dist/assets/messagebundle_fr-qEm5Eykz.js +0 -1
- package/dist/assets/messagebundle_hr-NBdiYo-T.js +0 -1
- package/dist/assets/messagebundle_hu-CBV3ISbF.js +0 -1
- package/dist/assets/messagebundle_it-BML2SC0W.js +0 -1
- package/dist/assets/messagebundle_ja-zyFfZHcj.js +0 -1
- package/dist/assets/messagebundle_ko-BCPaSqNp.js +0 -1
- package/dist/assets/messagebundle_lt-DB4b6FVx.js +0 -1
- package/dist/assets/messagebundle_lv-tAOia5tU.js +0 -1
- package/dist/assets/messagebundle_nl-BKUpVV-D.js +0 -1
- package/dist/assets/messagebundle_no-BZQfeWxT.js +0 -1
- package/dist/assets/messagebundle_pl-CsXeN1y6.js +0 -1
- package/dist/assets/messagebundle_pt-D9rap3lj.js +0 -1
- package/dist/assets/messagebundle_pt_PT-CQ5YAsmx.js +0 -1
- package/dist/assets/messagebundle_ro-BTNJ9YdP.js +0 -1
- package/dist/assets/messagebundle_ru-BTDmH8CB.js +0 -1
- package/dist/assets/messagebundle_sk-Lb4jvtpc.js +0 -1
- package/dist/assets/messagebundle_sl-BZi2bKSy.js +0 -1
- package/dist/assets/messagebundle_sr-B9TYgxO1.js +0 -1
- package/dist/assets/messagebundle_sv-DWlY9RTQ.js +0 -1
- package/dist/assets/messagebundle_tr-DOeCmUdx.js +0 -1
- package/dist/assets/messagebundle_uk-CCv57GhV.js +0 -1
- package/dist/assets/messagebundle_zh_CN-CHwH3F3-.js +0 -1
- package/dist/assets/messagebundle_zh_TW-FO0BCkub.js +0 -1
- package/dist/generated/templates/MastheadCountrySelectorTemplate.lit.d.ts +0 -3
- package/dist/generated/templates/MastheadCountrySelectorTemplate.lit.js +0 -13
- package/dist/generated/templates/MastheadCountrySelectorTemplate.lit.js.map +0 -1
- package/dist/generated/templates/MastheadItemTemplate.lit.d.ts +0 -3
- package/dist/generated/templates/MastheadItemTemplate.lit.js +0 -43
- package/dist/generated/templates/MastheadItemTemplate.lit.js.map +0 -1
- package/dist/generated/templates/MastheadMenuItemTemplate.lit.d.ts +0 -3
- package/dist/generated/templates/MastheadMenuItemTemplate.lit.js +0 -21
- package/dist/generated/templates/MastheadMenuItemTemplate.lit.js.map +0 -1
- package/dist/generated/templates/MastheadMenuTemplate.lit.d.ts +0 -3
- package/dist/generated/templates/MastheadMenuTemplate.lit.js +0 -25
- package/dist/generated/templates/MastheadMenuTemplate.lit.js.map +0 -1
- package/dist/generated/templates/MastheadMobileMenuTemplate.lit.d.ts +0 -3
- package/dist/generated/templates/MastheadMobileMenuTemplate.lit.js +0 -37
- package/dist/generated/templates/MastheadMobileMenuTemplate.lit.js.map +0 -1
- package/dist/generated/templates/MastheadProfileMenuTemplate.lit.d.ts +0 -3
- package/dist/generated/templates/MastheadProfileMenuTemplate.lit.js +0 -18
- package/dist/generated/templates/MastheadProfileMenuTemplate.lit.js.map +0 -1
- package/dist/generated/templates/MastheadShellTemplate.lit.d.ts +0 -3
- package/dist/generated/templates/MastheadShellTemplate.lit.js +0 -28
- package/dist/generated/templates/MastheadShellTemplate.lit.js.map +0 -1
- package/dist/generated/templates/TabHeaderTemplate.lit.d.ts +0 -3
- package/dist/generated/templates/TabHeaderTemplate.lit.js +0 -52
- package/dist/generated/templates/TabHeaderTemplate.lit.js.map +0 -1
- package/dist/generated/templates/TabInOverflowTemplate.lit.d.ts +0 -3
- package/dist/generated/templates/TabInOverflowTemplate.lit.js +0 -15
- package/dist/generated/templates/TabInOverflowTemplate.lit.js.map +0 -1
- package/dist/generated/templates/TabNavigationPopoverTemplate.lit.d.ts +0 -3
- package/dist/generated/templates/TabNavigationPopoverTemplate.lit.js +0 -8
- package/dist/generated/templates/TabNavigationPopoverTemplate.lit.js.map +0 -1
- package/dist/generated/templates/TabNavigationTemplate.lit.d.ts +0 -3
- package/dist/generated/templates/TabNavigationTemplate.lit.js +0 -16
- package/dist/generated/templates/TabNavigationTemplate.lit.js.map +0 -1
- package/dist/generated/templates/TabTemplate.lit.d.ts +0 -3
- package/dist/generated/templates/TabTemplate.lit.js +0 -7
- package/dist/generated/templates/TabTemplate.lit.js.map +0 -1
- package/src/MastheadCountrySelector.hbs +0 -76
- package/src/MastheadItem.hbs +0 -136
- package/src/MastheadMenu.hbs +0 -131
- package/src/MastheadMenuItem.hbs +0 -102
- package/src/MastheadMobileMenu.hbs +0 -253
- package/src/MastheadProfileMenu.hbs +0 -121
- package/src/MastheadShell.hbs +0 -223
- package/src/Tab.hbs +0 -1
- package/src/TabHeader.hbs +0 -141
- package/src/TabInOverflow.hbs +0 -59
- package/src/TabNavigation.hbs +0 -86
- package/src/TabNavigationPopover.hbs +0 -18
- package/src/generated/templates/MastheadCountrySelectorTemplate.lit.ts +0 -17
- package/src/generated/templates/MastheadItemTemplate.lit.ts +0 -47
- package/src/generated/templates/MastheadMenuItemTemplate.lit.ts +0 -25
- package/src/generated/templates/MastheadMenuTemplate.lit.ts +0 -29
- package/src/generated/templates/MastheadMobileMenuTemplate.lit.ts +0 -41
- package/src/generated/templates/MastheadProfileMenuTemplate.lit.ts +0 -22
- package/src/generated/templates/MastheadShellTemplate.lit.ts +0 -32
- package/src/generated/templates/TabHeaderTemplate.lit.ts +0 -56
- package/src/generated/templates/TabInOverflowTemplate.lit.ts +0 -19
- package/src/generated/templates/TabNavigationPopoverTemplate.lit.ts +0 -12
- package/src/generated/templates/TabNavigationTemplate.lit.ts +0 -20
- package/src/generated/templates/TabTemplate.lit.ts +0 -11
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsxs as _jsxs, jsx as _jsx } from "@ui5/webcomponents-base/jsx-runtime";
|
|
1
|
+
import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "@ui5/webcomponents-base/jsx-runtime";
|
|
2
2
|
import UDExListItem from "./ListItem.js";
|
|
3
3
|
import UDExButton from "./Button.js";
|
|
4
4
|
import Icon from "@ui5/webcomponents/dist/Icon.js";
|
|
@@ -8,26 +8,45 @@ import slimArrowRight from "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
|
|
|
8
8
|
function SingleGroupHeader() {
|
|
9
9
|
return (_jsxs("div", { class: `udex-list__group-content udex-list__group-header-wrap ${this.sizeClass}`, part: "group-item", children: [this.typeNumber && _jsxs("span", { class: "udex-list__number", children: [this.numberOfItem, "."] }), this.typeCircle && _jsx("span", { class: "udex-list__circle", children: "\u2022" }), this.typeIcon && (_jsx(Icon, { class: "udex-list__icon", "accessible-role": "presentation", "aria-hidden": "true", part: "icon", name: this._icon })), _jsxs("div", { class: "udex-list__header", children: [_jsx("span", { id: "group-heading", class: "udex-list__header-title", ...{ innerHTML: this.label } }), this.supportingText && (_jsx("span", { class: `udex-list__supporting-text ${this.sizeClass}`, children: this.supportingText }))] })] }));
|
|
10
10
|
}
|
|
11
|
+
// The visible header row of the single-select collapsible group: number/icon,
|
|
12
|
+
// heading + supporting text, and the expand/collapse chevron.
|
|
13
|
+
function SingleCollapsibleHeaderRow() {
|
|
14
|
+
return (_jsxs(_Fragment, { children: [this.typeNumber && _jsxs("span", { class: "udex-list__number", children: [this.numberOfItem, "."] }), this.typeCircle && _jsx("span", { class: "udex-list__circle", children: "\u2022" }), this.typeIcon && (_jsx(Icon, { name: this._icon, class: "udex-list__icon", "accessible-role": "presentation", "aria-hidden": "true", part: "icon" })), _jsxs("div", { class: "udex-list__header", children: [_jsx("span", { id: "group-heading", class: "udex-list__header-title", ...{ innerHTML: this.label } }), this.supportingText && (_jsx("span", { id: "group-supporting-text", class: `udex-list__supporting-text ${this.sizeClass}`, children: this.supportingText }))] }), _jsx("div", { class: "udex-list__group-heading__icon-wrapper", children: _jsx(UDExButton, { size: "Small", design: "Tertiary", class: "udex-list__group-heading__icon", onClick: this.handleCollapseIconClick, onMouseDown: this.handleCollapseIconMouseDown, tabindex: -1, "accessible-name": this.expandButtonAccessibleName, icon: slimArrowRight, ...{ "mode": "Interactive" } }) })] }));
|
|
15
|
+
}
|
|
11
16
|
function SingleGroupHeaderCollapsible() {
|
|
12
|
-
|
|
17
|
+
// Conformant WAI-ARIA tree (FilterMenu real focus): nest the child role="group"
|
|
18
|
+
// INSIDE this treeitem so screen readers count children per group natively — no
|
|
19
|
+
// explicit aria-posinset/aria-setsize (which JAWS distrusts). Excludes SelectBox
|
|
20
|
+
// (aria-activedescendant, _useHostAriaRole) and non-tree modes, which keep the flat
|
|
21
|
+
// structure with the content region emitted as a sibling by the template body.
|
|
22
|
+
const nested = this.isTreeAccessibleRole && !this._useHostAriaRole;
|
|
23
|
+
return (_jsx("div", { class: `udex-list__group-content ${nested ? "udex-list__group-content--nested " : ""}udex-list__group-header-wrap ${this.sizeClass}`, part: "group-item", id: `${this._id}_group-content__focusable`, role: this.singleCollapsibleHeaderRole, tabIndex: 0, onKeyDown: this.handleKeyDown, "aria-expanded": this.expanded, "aria-controls": this.ariaControlsId, "aria-labelledby": this.collapsibleHeaderLabelledBy, "_tab-index": Number(this._effectiveTabIndex), children: nested ? (_jsxs(_Fragment, { children: [_jsx("div", { class: "udex-list__group-header-row", children: SingleCollapsibleHeaderRow.call(this) }), _jsx("div", { id: this.ariaControlsId, role: this.contentRegionRole, class: "udex-list__group-list__content", children: _jsx("slot", {}) })] })) : (SingleCollapsibleHeaderRow.call(this)) }));
|
|
13
24
|
}
|
|
14
25
|
function MultiOrRadioGroupHeader() {
|
|
15
26
|
if (this.isNonActiveHeader) {
|
|
16
27
|
return (_jsx("header", { id: "group-heading", class: "udex-list__inactive-header udex-list__group-header-wrap", children: _jsxs("div", { class: "udex-list__inactive-header-content", children: [_jsx("span", { class: "udex-list__header-title", ...{ innerHTML: this.label } }), this.supportingText && (_jsx("span", { class: "udex-list__supporting-text", children: this.supportingText }))] }) }));
|
|
17
28
|
}
|
|
18
|
-
return (_jsx(UDExListItem, { id: "group-heading", part: "group-item", role: "none", selected: this.selected, indeterminate: this.indeterminate, class: this.className, mode: this.mode, controlled: this.controlled, onClick: this.handleHeaderPress, onKeyDown: this.handleKeyDownPress, type: this.type, label: this.label, size: this.size, supportingText: this.supportingText, "accessible-role": this.nonCollapsibleHeaderAccessibleRole, "_additional-class-name": this._additionalClassName, "_tab-index": Number(this._effectiveTabIndex), _icon: this._icon, _filtered: this._filtered }));
|
|
29
|
+
return (_jsx(UDExListItem, { id: "group-heading", part: "group-item", role: "none", selected: this.selected, indeterminate: this.indeterminate, class: this.className, mode: this.mode, controlled: this.controlled, onClick: this.handleHeaderPress, onKeyDown: this.handleKeyDownPress, type: this.type, label: this.label, size: this.size, supportingText: this.supportingText, "accessible-role": this.nonCollapsibleHeaderAccessibleRole, "_additional-class-name": this._additionalClassName, "_tab-index": Number(this._effectiveTabIndex), "_aria-pos-in-set": this._ariaPosInSet, "_aria-set-size": this._ariaSetSize, _icon: this._icon, _filtered: this._filtered }));
|
|
19
30
|
}
|
|
20
31
|
function MultiOrRadioGroupHeaderCollapsible() {
|
|
21
32
|
if (this.isNonActiveHeader) {
|
|
22
33
|
return (_jsxs("header", { role: "button", id: "group-heading", class: "udex-list__inactive-header udex-list__group-header-wrap", tabIndex: Number(this._effectiveTabIndex), "aria-expanded": this.expanded, "aria-controls": this.ariaControlsId, children: [_jsxs("div", { class: "udex-list__inactive-header-content", children: [_jsx("span", { class: "udex-list__header-title", ...{ innerHTML: this.label } }), this.supportingText && (_jsx("span", { class: "udex-list__supporting-text", children: this.supportingText }))] }), _jsx("div", { class: "udex-list__group-heading__icon-wrapper", children: _jsx(UDExButton, { class: "udex-list__group-heading__icon", size: UDExButtonSize.Small, design: UDExButtonDesign.Tertiary, tabindex: -1, icon: slimArrowRight, onClick: this.handleCollapseIconClick, "accessible-name": this.expandButtonAccessibleName, ...{ "mode": "Interactive" } }) })] }));
|
|
23
34
|
}
|
|
24
|
-
return (_jsx(UDExListItem, { id: "group-heading", part: "group-item", role: "none", "aria-expanded": this.expanded, "aria-controls": this.ariaControlsId, selected: this.selected, indeterminate: this.indeterminate, collapsible: this.collapsible, collapsed: this.collapsed, class: this.className, mode: this.mode, controlled: this.controlled, onClick: this.handleHeaderPress, onKeyDown: this.handleKeyDownPress, type: this.type, label: this.label, size: this.size, supportingText: this.supportingText, "accessible-role": this.collapsibleHeaderAccessibleRole, onAccordionIconClick: this.handleCollapseIconClick, "_additional-class-name": this._additionalClassName, "_tab-index": Number(this._effectiveTabIndex), _icon: this._icon, _filtered: this._filtered }));
|
|
35
|
+
return (_jsx(UDExListItem, { id: "group-heading", part: "group-item", role: "none", "aria-expanded": this.expanded, "aria-controls": this.ariaControlsId, selected: this.selected, indeterminate: this.indeterminate, collapsible: this.collapsible, collapsed: this.collapsed, class: this.className, mode: this.mode, controlled: this.controlled, onClick: this.handleHeaderPress, onKeyDown: this.handleKeyDownPress, type: this.type, label: this.label, size: this.size, supportingText: this.supportingText, "accessible-role": this.collapsibleHeaderAccessibleRole, onAccordionIconClick: this.handleCollapseIconClick, "_additional-class-name": this._additionalClassName, "_tab-index": Number(this._effectiveTabIndex), "_aria-pos-in-set": this._ariaPosInSet, "_aria-set-size": this._ariaSetSize, _icon: this._icon, _filtered: this._filtered }));
|
|
25
36
|
}
|
|
26
37
|
export default function ListGroupHeaderTemplate() {
|
|
27
|
-
|
|
38
|
+
// Single-select real-focus tree: SingleGroupHeaderCollapsible now emits the
|
|
39
|
+
// role="group" content region as a CHILD of the treeitem (conformant nesting),
|
|
40
|
+
// so the template body must not also emit it as a sibling.
|
|
41
|
+
const singleSelectNested = this.isTreeAccessibleRole && !this.useListItemHeader && !this._useHostAriaRole;
|
|
42
|
+
return (_jsx("div", { part: "item", class: "udex-list__group", role: this.groupWrapperRole, "aria-labelledby": (!this.isTreeAccessibleRole && !this.isPerGroupListbox) ? "group-heading" : undefined, children: this.collapsible ? (_jsxs("div", { class: "udex-list__group-list", "onui5-item-press": this.getHandleGroupItemsClick, ...{ name: "group" }, children: [this.useListItemHeader
|
|
28
43
|
? MultiOrRadioGroupHeaderCollapsible.call(this)
|
|
29
|
-
: SingleGroupHeaderCollapsible.call(this), _jsx("div", { id: this.ariaControlsId, role: this.contentRegionRole, class: "udex-list__group-list__content", children: this.isTreeAccessibleRole ? (_jsx("slot", {})) : (_jsx("div", { role: "listbox", "aria-label": "group", children: _jsx("slot", {}) })) })] })) : (_jsxs("div", { role: this.nonCollapsibleContainerRole, class: "udex-list__group-list", "
|
|
44
|
+
: SingleGroupHeaderCollapsible.call(this), !singleSelectNested && (_jsx("div", { id: this.ariaControlsId, role: this.contentRegionRole, class: "udex-list__group-list__content", children: this.isTreeAccessibleRole ? (_jsx("slot", {})) : (_jsx("div", { role: "listbox", "aria-label": "group", children: _jsx("slot", {}) })) }))] })) : (_jsxs("div", { role: this.nonCollapsibleContainerRole, class: "udex-list__group-list", "onui5-item-press": this.getHandleGroupItemsClick, ...{ name: "group" }, children: [this.modeMultiSelectOrRadioGroup
|
|
30
45
|
? MultiOrRadioGroupHeader.call(this)
|
|
31
|
-
: SingleGroupHeader.call(this), _jsx("slot", {})
|
|
46
|
+
: SingleGroupHeader.call(this), this.isTreeAccessibleRole ? (_jsx("div", { role: "group", children: _jsx("slot", {}) })) : this.isPerGroupListbox ? (
|
|
47
|
+
// Each group is its own labelled listbox: JAWS counts the options natively
|
|
48
|
+
// per group ("Python, 1 of 4"). The outer #udex-list is presentational
|
|
49
|
+
// (SearchableListBase.isPerGroupListbox) so this is not a nested listbox.
|
|
50
|
+
_jsx("div", { role: "listbox", "aria-labelledby": "group-heading", children: _jsx("slot", {}) })) : (_jsx("slot", {}))] })) }));
|
|
32
51
|
}
|
|
33
52
|
//# sourceMappingURL=ListGroupHeaderTemplate.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListGroupHeaderTemplate.js","sourceRoot":"","sources":["../src/ListGroupHeaderTemplate.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { AriaRole } from \"@ui5/webcomponents-base/dist/types.js\";\nimport type UDExListGroupHeader from \"./ListGroupHeader.js\";\nimport UDExListItem from \"./ListItem.js\";\nimport UDExButton from \"./Button.js\";\nimport Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport UDExButtonSize from \"./types/ButtonSize.js\";\nimport UDExButtonDesign from \"./types/ButtonDesign.js\";\nimport slimArrowRight from \"@ui5/webcomponents-icons/dist/slim-arrow-right.js\";\n\nfunction SingleGroupHeader(this: UDExListGroupHeader) {\n return (\n <div class={`udex-list__group-content udex-list__group-header-wrap ${this.sizeClass}`} part=\"group-item\">\n {this.typeNumber && <span class=\"udex-list__number\">{this.numberOfItem}.</span>}\n {this.typeCircle && <span class=\"udex-list__circle\">•</span>}\n {this.typeIcon && (\n <Icon\n class=\"udex-list__icon\"\n accessible-role=\"presentation\"\n aria-hidden=\"true\"\n part=\"icon\"\n name={this._icon}\n />\n )}\n <div class=\"udex-list__header\">\n <span\n id=\"group-heading\"\n class=\"udex-list__header-title\"\n {...({ innerHTML: this.label } as object)}>\n </span>\n {this.supportingText && (\n <span class={`udex-list__supporting-text ${this.sizeClass}`}>{this.supportingText}</span>\n )}\n </div>\n </div>\n );\n}\n\nfunction SingleGroupHeaderCollapsible(this: UDExListGroupHeader) {\n return (\n <div\n class={`udex-list__group-content udex-list__group-header-wrap ${this.sizeClass}`}\n part=\"group-item\"\n id={`${this._id}_group-content__focusable`}\n role={this.singleCollapsibleHeaderRole as AriaRole}\n tabIndex={0}\n onKeyDown={this.handleKeyDown}\n aria-expanded={this.expanded}\n aria-controls={this.ariaControlsId}\n _tab-index={Number(this._effectiveTabIndex)}>\n {this.typeNumber && <span class=\"udex-list__number\">{this.numberOfItem}.</span>}\n {this.typeCircle && <span class=\"udex-list__circle\">•</span>}\n {this.typeIcon && (\n <Icon\n name={this._icon}\n class=\"udex-list__icon\"\n accessible-role=\"presentation\"\n aria-hidden=\"true\"\n part=\"icon\"\n />\n )}\n <div class=\"udex-list__header\">\n <span\n id=\"group-heading\"\n class=\"udex-list__header-title\"\n {...({ innerHTML: this.label } as object)}>\n </span>\n {this.supportingText && (\n <span class={`udex-list__supporting-text ${this.sizeClass}`}>{this.supportingText}</span>\n )}\n </div>\n <div class=\"udex-list__group-heading__icon-wrapper\">\n <UDExButton\n size=\"Small\"\n design=\"Tertiary\"\n class=\"udex-list__group-heading__icon\"\n onClick={this.handleCollapseIconClick as unknown as EventListener}\n tabindex={-1}\n accessible-name={this.expandButtonAccessibleName}\n icon={slimArrowRight}\n {...({ \"mode\": \"Interactive\" } as object)}\n />\n </div>\n </div>\n );\n}\n\nfunction MultiOrRadioGroupHeader(this: UDExListGroupHeader) {\n if (this.isNonActiveHeader) {\n return (\n <header id=\"group-heading\" class=\"udex-list__inactive-header udex-list__group-header-wrap\">\n <div class=\"udex-list__inactive-header-content\">\n <span class=\"udex-list__header-title\" {...({ innerHTML: this.label } as object)}></span>\n {this.supportingText && (\n <span class=\"udex-list__supporting-text\">{this.supportingText}</span>\n )}\n </div>\n </header>\n );\n }\n return (\n <UDExListItem\n id=\"group-heading\"\n part=\"group-item\"\n role=\"none\"\n selected={this.selected}\n indeterminate={this.indeterminate}\n class={this.className}\n mode={this.mode}\n controlled={this.controlled}\n onClick={this.handleHeaderPress}\n onKeyDown={this.handleKeyDownPress}\n type={this.type}\n label={this.label}\n size={this.size}\n supportingText={this.supportingText}\n accessible-role={this.nonCollapsibleHeaderAccessibleRole}\n _additional-class-name={this._additionalClassName}\n _tab-index={Number(this._effectiveTabIndex)}\n _icon={this._icon}\n _filtered={this._filtered}\n />\n );\n}\n\nfunction MultiOrRadioGroupHeaderCollapsible(this: UDExListGroupHeader) {\n if (this.isNonActiveHeader) {\n return (\n <header\n role=\"button\"\n id=\"group-heading\"\n class=\"udex-list__inactive-header udex-list__group-header-wrap\"\n tabIndex={Number(this._effectiveTabIndex)}\n aria-expanded={this.expanded}\n aria-controls={this.ariaControlsId}>\n <div class=\"udex-list__inactive-header-content\">\n <span class=\"udex-list__header-title\" {...({ innerHTML: this.label } as object)}></span>\n {this.supportingText && (\n <span class=\"udex-list__supporting-text\">{this.supportingText}</span>\n )}\n </div>\n <div class=\"udex-list__group-heading__icon-wrapper\">\n <UDExButton\n class=\"udex-list__group-heading__icon\"\n size={UDExButtonSize.Small}\n design={UDExButtonDesign.Tertiary}\n tabindex={-1}\n icon={slimArrowRight}\n onClick={this.handleCollapseIconClick as EventListener}\n accessible-name={this.expandButtonAccessibleName}\n {...({ \"mode\": \"Interactive\" } as object)}\n />\n </div>\n </header>\n );\n }\n return (\n <UDExListItem\n id=\"group-heading\"\n part=\"group-item\"\n role=\"none\"\n aria-expanded={this.expanded}\n aria-controls={this.ariaControlsId}\n selected={this.selected}\n indeterminate={this.indeterminate}\n collapsible={this.collapsible}\n collapsed={this.collapsed}\n class={this.className}\n mode={this.mode}\n controlled={this.controlled}\n onClick={this.handleHeaderPress}\n onKeyDown={this.handleKeyDownPress}\n type={this.type}\n label={this.label}\n size={this.size}\n supportingText={this.supportingText}\n accessible-role={this.collapsibleHeaderAccessibleRole}\n onAccordionIconClick={this.handleCollapseIconClick as EventListener}\n _additional-class-name={this._additionalClassName}\n _tab-index={Number(this._effectiveTabIndex)}\n _icon={this._icon}\n _filtered={this._filtered}\n />\n );\n}\n\nexport default function ListGroupHeaderTemplate(this: UDExListGroupHeader) {\n return (\n <div\n part=\"item\"\n class=\"udex-list__group\"\n role={this.groupWrapperRole as AriaRole}\n aria-labelledby={!this.isTreeAccessibleRole ? \"group-heading\" : undefined}>\n {this.collapsible ? (\n <div\n class=\"udex-list__group-list\"\n onui5-item-press={this.getHandleGroupItemsClick}\n {...({ name: \"group\" } as object)}>\n {this.useListItemHeader\n ? MultiOrRadioGroupHeaderCollapsible.call(this)\n : SingleGroupHeaderCollapsible.call(this)\n }\n <div id={this.ariaControlsId} role={this.contentRegionRole as AriaRole} class=\"udex-list__group-list__content\">\n {this.isTreeAccessibleRole ? (\n <slot></slot>\n ) : (\n <div role=\"listbox\" aria-label=\"group\">\n <slot></slot>\n </div>\n )}\n </div>\n </div>\n ) : (\n <div\n role={this.nonCollapsibleContainerRole as AriaRole}\n class=\"udex-list__group-list\"\n aria-label=\"group\"\n onui5-item-press={this.getHandleGroupItemsClick}\n {...({ name: \"group\" } as object)}>\n {this.modeMultiSelectOrRadioGroup\n ? MultiOrRadioGroupHeader.call(this)\n : SingleGroupHeader.call(this)\n }\n <slot></slot>\n </div>\n )}\n </div>\n );\n}\n"]}
|
|
1
|
+
{"version":3,"file":"ListGroupHeaderTemplate.js","sourceRoot":"","sources":["../src/ListGroupHeaderTemplate.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { AriaRole } from \"@ui5/webcomponents-base/dist/types.js\";\nimport type UDExListGroupHeader from \"./ListGroupHeader.js\";\nimport UDExListItem from \"./ListItem.js\";\nimport UDExButton from \"./Button.js\";\nimport Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport UDExButtonSize from \"./types/ButtonSize.js\";\nimport UDExButtonDesign from \"./types/ButtonDesign.js\";\nimport slimArrowRight from \"@ui5/webcomponents-icons/dist/slim-arrow-right.js\";\n\nfunction SingleGroupHeader(this: UDExListGroupHeader) {\n return (\n <div class={`udex-list__group-content udex-list__group-header-wrap ${this.sizeClass}`} part=\"group-item\">\n {this.typeNumber && <span class=\"udex-list__number\">{this.numberOfItem}.</span>}\n {this.typeCircle && <span class=\"udex-list__circle\">•</span>}\n {this.typeIcon && (\n <Icon\n class=\"udex-list__icon\"\n accessible-role=\"presentation\"\n aria-hidden=\"true\"\n part=\"icon\"\n name={this._icon}\n />\n )}\n <div class=\"udex-list__header\">\n <span\n id=\"group-heading\"\n class=\"udex-list__header-title\"\n {...({ innerHTML: this.label } as object)}>\n </span>\n {this.supportingText && (\n <span class={`udex-list__supporting-text ${this.sizeClass}`}>{this.supportingText}</span>\n )}\n </div>\n </div>\n );\n}\n\n// The visible header row of the single-select collapsible group: number/icon,\n// heading + supporting text, and the expand/collapse chevron.\nfunction SingleCollapsibleHeaderRow(this: UDExListGroupHeader) {\n return (\n <>\n {this.typeNumber && <span class=\"udex-list__number\">{this.numberOfItem}.</span>}\n {this.typeCircle && <span class=\"udex-list__circle\">•</span>}\n {this.typeIcon && (\n <Icon\n name={this._icon}\n class=\"udex-list__icon\"\n accessible-role=\"presentation\"\n aria-hidden=\"true\"\n part=\"icon\"\n />\n )}\n <div class=\"udex-list__header\">\n <span\n id=\"group-heading\"\n class=\"udex-list__header-title\"\n {...({ innerHTML: this.label } as object)}>\n </span>\n {this.supportingText && (\n <span id=\"group-supporting-text\" class={`udex-list__supporting-text ${this.sizeClass}`}>{this.supportingText}</span>\n )}\n </div>\n <div class=\"udex-list__group-heading__icon-wrapper\">\n <UDExButton\n size=\"Small\"\n design=\"Tertiary\"\n class=\"udex-list__group-heading__icon\"\n onClick={this.handleCollapseIconClick as unknown as EventListener}\n onMouseDown={this.handleCollapseIconMouseDown}\n tabindex={-1}\n accessible-name={this.expandButtonAccessibleName}\n icon={slimArrowRight}\n {...({ \"mode\": \"Interactive\" } as object)}\n />\n </div>\n </>\n );\n}\n\nfunction SingleGroupHeaderCollapsible(this: UDExListGroupHeader) {\n // Conformant WAI-ARIA tree (FilterMenu real focus): nest the child role=\"group\"\n // INSIDE this treeitem so screen readers count children per group natively — no\n // explicit aria-posinset/aria-setsize (which JAWS distrusts). Excludes SelectBox\n // (aria-activedescendant, _useHostAriaRole) and non-tree modes, which keep the flat\n // structure with the content region emitted as a sibling by the template body.\n const nested = this.isTreeAccessibleRole && !this._useHostAriaRole;\n return (\n <div\n class={`udex-list__group-content ${nested ? \"udex-list__group-content--nested \" : \"\"}udex-list__group-header-wrap ${this.sizeClass}`}\n part=\"group-item\"\n id={`${this._id}_group-content__focusable`}\n role={this.singleCollapsibleHeaderRole as AriaRole}\n tabIndex={0}\n onKeyDown={this.handleKeyDown}\n aria-expanded={this.expanded}\n aria-controls={this.ariaControlsId}\n aria-labelledby={this.collapsibleHeaderLabelledBy}\n _tab-index={Number(this._effectiveTabIndex)}>\n {nested ? (\n <>\n <div class=\"udex-list__group-header-row\">\n {SingleCollapsibleHeaderRow.call(this)}\n </div>\n <div id={this.ariaControlsId} role={this.contentRegionRole as AriaRole} class=\"udex-list__group-list__content\">\n <slot></slot>\n </div>\n </>\n ) : (\n SingleCollapsibleHeaderRow.call(this)\n )}\n </div>\n );\n}\n\nfunction MultiOrRadioGroupHeader(this: UDExListGroupHeader) {\n if (this.isNonActiveHeader) {\n return (\n <header id=\"group-heading\" class=\"udex-list__inactive-header udex-list__group-header-wrap\">\n <div class=\"udex-list__inactive-header-content\">\n <span class=\"udex-list__header-title\" {...({ innerHTML: this.label } as object)}></span>\n {this.supportingText && (\n <span class=\"udex-list__supporting-text\">{this.supportingText}</span>\n )}\n </div>\n </header>\n );\n }\n return (\n <UDExListItem\n id=\"group-heading\"\n part=\"group-item\"\n role=\"none\"\n selected={this.selected}\n indeterminate={this.indeterminate}\n class={this.className}\n mode={this.mode}\n controlled={this.controlled}\n onClick={this.handleHeaderPress}\n onKeyDown={this.handleKeyDownPress}\n type={this.type}\n label={this.label}\n size={this.size}\n supportingText={this.supportingText}\n accessible-role={this.nonCollapsibleHeaderAccessibleRole}\n _additional-class-name={this._additionalClassName}\n _tab-index={Number(this._effectiveTabIndex)}\n _aria-pos-in-set={this._ariaPosInSet}\n _aria-set-size={this._ariaSetSize}\n _icon={this._icon}\n _filtered={this._filtered}\n />\n );\n}\n\nfunction MultiOrRadioGroupHeaderCollapsible(this: UDExListGroupHeader) {\n if (this.isNonActiveHeader) {\n return (\n <header\n role=\"button\"\n id=\"group-heading\"\n class=\"udex-list__inactive-header udex-list__group-header-wrap\"\n tabIndex={Number(this._effectiveTabIndex)}\n aria-expanded={this.expanded}\n aria-controls={this.ariaControlsId}>\n <div class=\"udex-list__inactive-header-content\">\n <span class=\"udex-list__header-title\" {...({ innerHTML: this.label } as object)}></span>\n {this.supportingText && (\n <span class=\"udex-list__supporting-text\">{this.supportingText}</span>\n )}\n </div>\n <div class=\"udex-list__group-heading__icon-wrapper\">\n <UDExButton\n class=\"udex-list__group-heading__icon\"\n size={UDExButtonSize.Small}\n design={UDExButtonDesign.Tertiary}\n tabindex={-1}\n icon={slimArrowRight}\n onClick={this.handleCollapseIconClick as EventListener}\n accessible-name={this.expandButtonAccessibleName}\n {...({ \"mode\": \"Interactive\" } as object)}\n />\n </div>\n </header>\n );\n }\n return (\n <UDExListItem\n id=\"group-heading\"\n part=\"group-item\"\n role=\"none\"\n aria-expanded={this.expanded}\n aria-controls={this.ariaControlsId}\n selected={this.selected}\n indeterminate={this.indeterminate}\n collapsible={this.collapsible}\n collapsed={this.collapsed}\n class={this.className}\n mode={this.mode}\n controlled={this.controlled}\n onClick={this.handleHeaderPress}\n onKeyDown={this.handleKeyDownPress}\n type={this.type}\n label={this.label}\n size={this.size}\n supportingText={this.supportingText}\n accessible-role={this.collapsibleHeaderAccessibleRole}\n onAccordionIconClick={this.handleCollapseIconClick as EventListener}\n _additional-class-name={this._additionalClassName}\n _tab-index={Number(this._effectiveTabIndex)}\n _aria-pos-in-set={this._ariaPosInSet}\n _aria-set-size={this._ariaSetSize}\n _icon={this._icon}\n _filtered={this._filtered}\n />\n );\n}\n\nexport default function ListGroupHeaderTemplate(this: UDExListGroupHeader) {\n // Single-select real-focus tree: SingleGroupHeaderCollapsible now emits the\n // role=\"group\" content region as a CHILD of the treeitem (conformant nesting),\n // so the template body must not also emit it as a sibling.\n const singleSelectNested = this.isTreeAccessibleRole && !this.useListItemHeader && !this._useHostAriaRole;\n return (\n <div\n part=\"item\"\n class=\"udex-list__group\"\n role={this.groupWrapperRole as AriaRole}\n aria-labelledby={(!this.isTreeAccessibleRole && !this.isPerGroupListbox) ? \"group-heading\" : undefined}>\n {this.collapsible ? (\n <div\n class=\"udex-list__group-list\"\n onui5-item-press={this.getHandleGroupItemsClick}\n {...({ name: \"group\" } as object)}>\n {this.useListItemHeader\n ? MultiOrRadioGroupHeaderCollapsible.call(this)\n : SingleGroupHeaderCollapsible.call(this)\n }\n {!singleSelectNested && (\n <div id={this.ariaControlsId} role={this.contentRegionRole as AriaRole} class=\"udex-list__group-list__content\">\n {this.isTreeAccessibleRole ? (\n <slot></slot>\n ) : (\n <div role=\"listbox\" aria-label=\"group\">\n <slot></slot>\n </div>\n )}\n </div>\n )}\n </div>\n ) : (\n <div\n role={this.nonCollapsibleContainerRole as AriaRole}\n class=\"udex-list__group-list\"\n onui5-item-press={this.getHandleGroupItemsClick}\n {...({ name: \"group\" } as object)}>\n {this.modeMultiSelectOrRadioGroup\n ? MultiOrRadioGroupHeader.call(this)\n : SingleGroupHeader.call(this)\n }\n {this.isTreeAccessibleRole ? (\n <div role=\"group\">\n <slot></slot>\n </div>\n ) : this.isPerGroupListbox ? (\n // Each group is its own labelled listbox: JAWS counts the options natively\n // per group (\"Python, 1 of 4\"). The outer #udex-list is presentational\n // (SearchableListBase.isPerGroupListbox) so this is not a nested listbox.\n <div role=\"listbox\" aria-labelledby=\"group-heading\">\n <slot></slot>\n </div>\n ) : (\n <slot></slot>\n )}\n </div>\n )}\n </div>\n );\n}\n"]}
|
package/dist/ListItem.d.ts
CHANGED
|
@@ -170,7 +170,6 @@ declare class UDExListItem extends UDExListItemBase {
|
|
|
170
170
|
get ariaCheckedValue(): "true" | "false" | "mixed" | undefined;
|
|
171
171
|
get ariaSelectedValue(): "true" | "false" | undefined;
|
|
172
172
|
get ariaExpandedValue(): "true" | "false" | undefined;
|
|
173
|
-
get checkboxAriaHidden(): boolean;
|
|
174
173
|
get _ariaDisabled(): boolean | undefined;
|
|
175
174
|
get modeSingleContent(): boolean;
|
|
176
175
|
get modeRadioGroup(): boolean;
|
|
@@ -178,8 +177,6 @@ declare class UDExListItem extends UDExListItemBase {
|
|
|
178
177
|
get isLargeSize(): boolean;
|
|
179
178
|
get accessibleListItemName(): string;
|
|
180
179
|
get stateAccessibleName(): string;
|
|
181
|
-
get itemDescribedBy(): string;
|
|
182
|
-
get itemState(): string;
|
|
183
180
|
get ratingAriaLabel(): string;
|
|
184
181
|
}
|
|
185
182
|
export default UDExListItem;
|
package/dist/ListItem.js
CHANGED
|
@@ -214,24 +214,36 @@ let UDExListItem = UDExListItem_1 = class UDExListItem extends UDExListItemBase
|
|
|
214
214
|
return this.selected ? "true" : "false";
|
|
215
215
|
}
|
|
216
216
|
get ariaSelectedValue() {
|
|
217
|
-
|
|
217
|
+
// RadioGroup conveys its state through the radio control, never aria-selected.
|
|
218
|
+
if (this.modeRadioGroup) {
|
|
219
|
+
return undefined;
|
|
220
|
+
}
|
|
221
|
+
// MultiSelect treeitems convey state via aria-checked (see ariaCheckedValue).
|
|
222
|
+
// Every other selectable node — listbox options in both SingleSelect AND
|
|
223
|
+
// MultiSelect, plus SingleSelect treeitems — announces its state natively
|
|
224
|
+
// through aria-selected so the screen reader re-reads it when focus is on the
|
|
225
|
+
// item and when Enter/Space toggles it.
|
|
226
|
+
if (this.roleItem === "treeitem" && this.modeMultiSelect) {
|
|
218
227
|
return undefined;
|
|
219
228
|
}
|
|
220
|
-
//
|
|
221
|
-
|
|
229
|
+
// Gated on the actual rendered role of the [part=item] div — never the
|
|
230
|
+
// presentational inner div used in aria-activedescendant mode (SelectBox sets
|
|
231
|
+
// aria-selected on the host).
|
|
232
|
+
if (this.roleItem !== "treeitem" && this.roleItem !== "option") {
|
|
222
233
|
return undefined;
|
|
223
234
|
}
|
|
224
235
|
return this.selected ? "true" : "false";
|
|
225
236
|
}
|
|
226
237
|
get ariaExpandedValue() {
|
|
238
|
+
// aria-expanded is exposed ONLY on collapsible headers — a node the user can
|
|
239
|
+
// actually expand/collapse. Non-collapsible group headers must NOT report an
|
|
240
|
+
// expanded/collapsed state (nothing to toggle); the tree hierarchy is conveyed
|
|
241
|
+
// structurally by the nested role="group", not by aria-expanded.
|
|
227
242
|
if (!this.collapsible) {
|
|
228
243
|
return undefined;
|
|
229
244
|
}
|
|
230
245
|
return this.expanded ? "true" : "false";
|
|
231
246
|
}
|
|
232
|
-
get checkboxAriaHidden() {
|
|
233
|
-
return this.effectiveRole === "treeitem";
|
|
234
|
-
}
|
|
235
247
|
get _ariaDisabled() {
|
|
236
248
|
return this.disabled ? true : undefined;
|
|
237
249
|
}
|
|
@@ -256,12 +268,6 @@ let UDExListItem = UDExListItem_1 = class UDExListItem extends UDExListItemBase
|
|
|
256
268
|
}
|
|
257
269
|
return `${this.selected ? translate(UDExListItem_1, SELECTED) : translate(UDExListItem_1, UNSELECTED)} `;
|
|
258
270
|
}
|
|
259
|
-
get itemDescribedBy() {
|
|
260
|
-
return `${this._id}-invisibleText-describedby`;
|
|
261
|
-
}
|
|
262
|
-
get itemState() {
|
|
263
|
-
return this.selected ? "Selected" : "Not selected";
|
|
264
|
-
}
|
|
265
271
|
get ratingAriaLabel() {
|
|
266
272
|
const ratingText = this.ratingCount ? `${translate(UDExListItem_1, RATING_COUNT_TITLE)} ${this.ratingCount}` : "";
|
|
267
273
|
const totalText = this.totalCount ? `${translate(UDExListItem_1, TOTAL)} ${this.totalCount}` : "";
|
package/dist/ListItem.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItem.js","sourceRoot":"","sources":["../src/ListItem.ts"],"names":[],"mappings":"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","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/renderer/JsxRenderer.js\";\nimport type { Slot, DefaultSlot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot-strict.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport { isEnter, isSpace } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport { isDesktop } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport UDExCheckbox from \"./Checkbox.js\";\nimport type { UDExListItemBaseEvents } from \"./ListItemBase.js\";\nimport UDExListItemBase from \"./ListItemBase.js\";\nimport type UDExListGroupHeaderBase from \"./ListGroupHeaderBase.js\";\nimport UDExAvatar, { UDExAvatarShape, UDExAvatarSize } from \"./Avatar.js\";\nimport UDExButton from \"./Button.js\";\nimport UDExStatusBadge from \"./StatusBadge.js\";\nimport UDExRatingIndicator, { UDExDisplayType } from \"./RatingIndicator.js\";\nimport type UDExStatusBadgeValueState from \"./types/StatusBadgeValueState.js\";\nimport { UDExListItemSize, UDExListMode, UDExAdditionalTextState } from \"./types/List.js\";\nimport UDExRadioButton from \"./RadioButton.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport {\n INDETERMINATE, SELECTED, UNSELECTED, RATING_INDICATOR_TEXT, RATING_COUNT_TITLE, TOTAL,\n} from \"./generated/i18n/i18n-defaults.js\";\nimport translate from \"./utils/translate.js\";\n\nimport ListItemTemplate from \"./ListItemTemplate.js\";\n\n// Styles\nimport ListItemCss from \"./generated/themes/ListItem.css.js\";\n\nconst listItemClass: string = \"udex-list__item\";\nconst listItemRole: string = \"option\";\n\ntype UDExListItemBaseEventDetail = {\n item: HTMLElement,\n}\n\ntype UDExListItemItemPressEventDetail = {\n selected: boolean,\n item: HTMLElement,\n}\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-list-item</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/ListItem.js\";</code>\n *\n * @constructor\n * @author SAP SE\n * @extends UDExListItemBase\n * @tagname udex-list-item\n * @public\n */\n\n@customElement({\n tag: \"udex-list-item\",\n languageAware: true,\n renderer: jsxRenderer,\n styles: ListItemCss,\n template: ListItemTemplate,\n dependencies: [\n UDExAvatar,\n UDExButton,\n UDExRadioButton,\n UDExCheckbox,\n UDExStatusBadge,\n UDExRatingIndicator,\n Icon,\n ],\n})\n\n/**\n * Fired event when the user click on a list item.\n *\n * @public\n * @param {boolean} selected Indicates whether the item is selected or not\n */\n@event(\"item-press\", { bubbles: true })\n/**\n * Fired event when the user focuses on a list item.\n *\n * @public\n * @param {HTMLElement} item The focused list item\n */\n@event(\"item-focus\", { bubbles: true })\n\nclass UDExListItem extends UDExListItemBase {\n eventDetails!: {\n \"item-press\": UDExListItemItemPressEventDetail,\n \"item-focus\": UDExListItemBaseEventDetail,\n } & UDExListItemBaseEvents;\n /**\n * Defines the image badge state of the component.\n *\n * @default \"\"\n * @public\n */\n @property()\n imageBadgeState?: `${UDExStatusBadgeValueState}`;\n\n /**\n * Defines the accessible name of the item.\n *\n * @default \"\"\n * @public\n */\n @property()\n accessibleName: string = \"\";\n\n /**\n * Defines the position for flag image.\n *\n * @public\n */\n @property({ type: String })\n flagPosition?: string;\n\n /**\n * Defines the image, displayed at the start of the item.\n *\n * @public\n */\n @property({ type: Boolean })\n flag?: boolean;\n\n /**\n * Indicates if the item is active.\n *\n * @private\n */\n @property({ type: Boolean })\n active!: boolean;\n\n /**\n * Indicates if the item is on focus\n *\n * @private\n */\n @property({ type: Boolean })\n focused!: boolean;\n\n /**\n * Defines the additionalText, displayed at the end of the list item.\n *\n * @public\n */\n @property({ type: String })\n additionalText?: string;\n\n /**\n * Defines the state of the additionalText.\n *\n * @default \"None\"\n * @public\n */\n @property()\n additionalTextState: `${UDExAdditionalTextState}` = UDExAdditionalTextState.None;\n\n /**\n * Allows control over the image source.\n *\n * @public\n */\n @property({ type: String })\n image?: string;\n\n /**\n * Allows control over the alternative text of the image.\n *\n * @public\n */\n @property({ type: String })\n imageAlt?: string;\n\n /**\n * Defines the shape of the image.\n *\n * @default \"Circle\"\n * @public\n */\n @property()\n imageShape: `${UDExAvatarShape}` = UDExAvatarShape.Circle;\n\n /**\n * Allows control over the size of the image.\n *\n * @default \"S\"\n * @public\n */\n @property()\n imageSize: `${UDExAvatarSize}` = UDExAvatarSize.S;\n\n /**\n * Slot for list item content.\n *\n * @slot\n * @public\n */\n @slot({ type: Node, \"default\": true })\n content!: DefaultSlot<Node>;\n\n /**\n * Slot for first icon.\n *\n * @slot\n * @public\n */\n @slot({ type: UDExButton })\n firstIcon!: Slot<UDExButton>;\n\n /**\n * Slot for second icon.\n *\n * @slot\n * @public\n */\n @slot({ type: UDExButton })\n secondIcon!: Slot<UDExButton>;\n\n /**\n * Defines the role attribute of component\n *\n * @default \"\"\n * @public\n */\n @property({ type: String })\n accessibleRole: string = \"\";\n\n @property({ type: String })\n _additionalClassName!: string;\n\n _displayRating: UDExDisplayType = UDExDisplayType.Desktop;\n\n deactivate: () => void;\n\n @i18n(\"@sapudex/web-components\")\n static i18nBundle: I18nBundle;\n\n constructor() {\n super();\n\n this.deactivate = () => {\n if (this.active) {\n this.active = false;\n }\n };\n }\n\n onEnterDOM() {\n document.addEventListener(\"mouseup\", this.deactivate);\n if (isDesktop()) {\n this.setAttribute(\"desktop\", \"\");\n }\n }\n\n onExitDOM() {\n document.removeEventListener(\"mouseup\", this.deactivate);\n }\n\n handleMouseDown() {\n this.activate();\n }\n\n handleMouseUp() {\n this.deactivate();\n }\n\n handleKeyUp(e: KeyboardEvent) {\n e.preventDefault();\n if (isSpace(e) || isEnter(e)) {\n this.deactivate();\n }\n }\n\n handleKeyDown(e: KeyboardEvent) {\n if (this.firstIconElement === e.target || this.secondIconElement === e.target || (e.target as HTMLElement).classList.contains(\"udex-list__group-heading__icon\")) {\n return;\n }\n\n if (isSpace(e)) {\n e.preventDefault();\n }\n if (isSpace(e) || isEnter(e)) {\n this.activate();\n this.handleItemClick(e);\n }\n }\n\n handleKeyDownIcon(e: KeyboardEvent) {\n e.stopPropagation();\n }\n\n handleItemClick(e: Event) {\n if (this.disabled) {\n return;\n }\n if (!this.indeterminate && !this.controlled) {\n this.selected = !this.selected;\n }\n this.fireItemPress(e);\n }\n\n handleFocusIn() {\n if (!this.disabled) {\n this.focused = true;\n this.fireDecoratorEvent(\"item-focus\", {\n item: this,\n });\n }\n }\n\n handleFocusOut() {\n if (!this.disabled) {\n this.focused = false;\n this.deactivate();\n }\n }\n\n fireItemPress(e: Event) {\n if (isEnter(e as KeyboardEvent)) {\n e.preventDefault();\n }\n this.fireDecoratorEvent(\"item-press\", {\n selected: this.selected,\n item: this,\n });\n }\n\n activate() {\n if (!this.disabled) {\n this.active = true;\n }\n }\n\n get className(): string {\n const isGroupChild = this?.parentElement as UDExListGroupHeaderBase;\n const controlledClassName = this.controlled ? `${listItemClass}_controlled` : \"\";\n const groupClassName = isGroupChild?.isGroup ? `${listItemClass}_group` : \"\";\n const largeSizeClassName = this.isLargeSize ? `${listItemClass}_large` : \"\";\n return `${listItemClass} ${groupClassName} ${this._additionalClassName} ${controlledClassName} ${largeSizeClassName}`.trim();\n }\n\n get firstIconElement(): UDExButton {\n return this.getSlottedNodes<UDExButton>(\"firstIcon\")[0];\n }\n\n get secondIconElement(): UDExButton {\n return this.getSlottedNodes<UDExButton>(\"secondIcon\")[0];\n }\n\n get hasFirstIcon(): boolean {\n return !!this.firstIcon;\n }\n\n get hasSecondIcon(): boolean {\n return !!this.secondIcon;\n }\n\n get roleItem(): string {\n // When the host element carries the role (aria-activedescendant mode), the\n // inner [part=item] div must be presentational to avoid a duplicate ARIA node.\n if (this._useHostAriaRole) {\n return \"presentation\";\n }\n if (this.accessibleRole.length > 0) {\n return this.accessibleRole;\n }\n // SingleContent is informational (not a selection widget) — listitem is semantically correct\n return this.modeSingleContent ? \"listitem\" : listItemRole;\n }\n\n get effectiveRole(): string {\n return this.accessibleRole.length > 0 ? this.accessibleRole : listItemRole;\n }\n\n get ariaCheckedValue(): \"true\" | \"false\" | \"mixed\" | undefined {\n if (this.effectiveRole !== \"treeitem\") {\n return undefined;\n }\n // Only MultiSelect treeitems expose aria-checked; SingleSelect uses aria-selected.\n if (!this.modeMultiSelect) {\n return undefined;\n }\n if (this.indeterminate) {\n return \"mixed\";\n }\n return this.selected ? \"true\" : \"false\";\n }\n\n get ariaSelectedValue(): \"true\" | \"false\" | undefined {\n if (this.effectiveRole !== \"treeitem\") {\n return undefined;\n }\n // Only SingleSelect treeitems expose aria-selected; MultiSelect uses aria-checked.\n if (this.modeMultiSelect) {\n return undefined;\n }\n return this.selected ? \"true\" : \"false\";\n }\n\n get ariaExpandedValue(): \"true\" | \"false\" | undefined {\n if (!this.collapsible) {\n return undefined;\n }\n return this.expanded ? \"true\" : \"false\";\n }\n\n get checkboxAriaHidden(): boolean {\n return this.effectiveRole === \"treeitem\";\n }\n\n get _ariaDisabled(): boolean | undefined {\n return this.disabled ? true : undefined;\n }\n\n get modeSingleContent(): boolean {\n return this.mode === UDExListMode.SingleContent;\n }\n\n get modeRadioGroup(): boolean {\n return this.mode === UDExListMode.RadioGroup;\n }\n\n get modeSelected(): boolean {\n return [UDExListMode.SingleSelect, UDExListMode.MultiSelect, UDExListMode.RadioGroup].includes(this.mode as UDExListMode);\n }\n\n get isLargeSize(): boolean {\n return this.size === UDExListItemSize.Large;\n }\n\n get accessibleListItemName(): string {\n return this.accessibleName || this.label?.replace(/<[^>]+>/g, \"\");\n }\n\n get stateAccessibleName(): string {\n if (this.indeterminate) {\n return translate(UDExListItem, INDETERMINATE);\n }\n return `${this.selected ? translate(UDExListItem, SELECTED) : translate(UDExListItem, UNSELECTED)} `;\n }\n\n get itemDescribedBy(): string {\n return `${this._id}-invisibleText-describedby`;\n }\n\n get itemState(): string {\n return this.selected ? \"Selected\" : \"Not selected\";\n }\n\n get ratingAriaLabel(): string {\n const ratingText = this.ratingCount ? `${translate(UDExListItem, RATING_COUNT_TITLE)} ${this.ratingCount}` : \"\";\n const totalText = this.totalCount ? `${translate(UDExListItem, TOTAL)} ${this.totalCount}` : \"\";\n const ratingTitleText = translate(UDExListItem, RATING_INDICATOR_TEXT);\n return [...[ratingText, totalText].filter(Boolean), `${ratingTitleText} ${this.rating} of ${this.ratingMax}`].join(\", \");\n }\n}\n\nUDExListItem.define();\n\nexport default UDExListItem;\nexport type { UDExListItemBaseEventDetail, UDExListItemItemPressEventDetail };\n"]}
|
|
1
|
+
{"version":3,"file":"ListItem.js","sourceRoot":"","sources":["../src/ListItem.ts"],"names":[],"mappings":"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","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/renderer/JsxRenderer.js\";\nimport type { Slot, DefaultSlot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot-strict.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport { isEnter, isSpace } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport { isDesktop } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport UDExCheckbox from \"./Checkbox.js\";\nimport type { UDExListItemBaseEvents } from \"./ListItemBase.js\";\nimport UDExListItemBase from \"./ListItemBase.js\";\nimport type UDExListGroupHeaderBase from \"./ListGroupHeaderBase.js\";\nimport UDExAvatar, { UDExAvatarShape, UDExAvatarSize } from \"./Avatar.js\";\nimport UDExButton from \"./Button.js\";\nimport UDExStatusBadge from \"./StatusBadge.js\";\nimport UDExRatingIndicator, { UDExDisplayType } from \"./RatingIndicator.js\";\nimport type UDExStatusBadgeValueState from \"./types/StatusBadgeValueState.js\";\nimport { UDExListItemSize, UDExListMode, UDExAdditionalTextState } from \"./types/List.js\";\nimport UDExRadioButton from \"./RadioButton.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport {\n INDETERMINATE, SELECTED, UNSELECTED, RATING_INDICATOR_TEXT, RATING_COUNT_TITLE, TOTAL,\n} from \"./generated/i18n/i18n-defaults.js\";\nimport translate from \"./utils/translate.js\";\n\nimport ListItemTemplate from \"./ListItemTemplate.js\";\n\n// Styles\nimport ListItemCss from \"./generated/themes/ListItem.css.js\";\n\nconst listItemClass: string = \"udex-list__item\";\nconst listItemRole: string = \"option\";\n\ntype UDExListItemBaseEventDetail = {\n item: HTMLElement,\n}\n\ntype UDExListItemItemPressEventDetail = {\n selected: boolean,\n item: HTMLElement,\n}\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-list-item</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/ListItem.js\";</code>\n *\n * @constructor\n * @author SAP SE\n * @extends UDExListItemBase\n * @tagname udex-list-item\n * @public\n */\n\n@customElement({\n tag: \"udex-list-item\",\n languageAware: true,\n renderer: jsxRenderer,\n styles: ListItemCss,\n template: ListItemTemplate,\n dependencies: [\n UDExAvatar,\n UDExButton,\n UDExRadioButton,\n UDExCheckbox,\n UDExStatusBadge,\n UDExRatingIndicator,\n Icon,\n ],\n})\n\n/**\n * Fired event when the user click on a list item.\n *\n * @public\n * @param {boolean} selected Indicates whether the item is selected or not\n */\n@event(\"item-press\", { bubbles: true })\n/**\n * Fired event when the user focuses on a list item.\n *\n * @public\n * @param {HTMLElement} item The focused list item\n */\n@event(\"item-focus\", { bubbles: true })\n\nclass UDExListItem extends UDExListItemBase {\n eventDetails!: {\n \"item-press\": UDExListItemItemPressEventDetail,\n \"item-focus\": UDExListItemBaseEventDetail,\n } & UDExListItemBaseEvents;\n /**\n * Defines the image badge state of the component.\n *\n * @default \"\"\n * @public\n */\n @property()\n imageBadgeState?: `${UDExStatusBadgeValueState}`;\n\n /**\n * Defines the accessible name of the item.\n *\n * @default \"\"\n * @public\n */\n @property()\n accessibleName: string = \"\";\n\n /**\n * Defines the position for flag image.\n *\n * @public\n */\n @property({ type: String })\n flagPosition?: string;\n\n /**\n * Defines the image, displayed at the start of the item.\n *\n * @public\n */\n @property({ type: Boolean })\n flag?: boolean;\n\n /**\n * Indicates if the item is active.\n *\n * @private\n */\n @property({ type: Boolean })\n active!: boolean;\n\n /**\n * Indicates if the item is on focus\n *\n * @private\n */\n @property({ type: Boolean })\n focused!: boolean;\n\n /**\n * Defines the additionalText, displayed at the end of the list item.\n *\n * @public\n */\n @property({ type: String })\n additionalText?: string;\n\n /**\n * Defines the state of the additionalText.\n *\n * @default \"None\"\n * @public\n */\n @property()\n additionalTextState: `${UDExAdditionalTextState}` = UDExAdditionalTextState.None;\n\n /**\n * Allows control over the image source.\n *\n * @public\n */\n @property({ type: String })\n image?: string;\n\n /**\n * Allows control over the alternative text of the image.\n *\n * @public\n */\n @property({ type: String })\n imageAlt?: string;\n\n /**\n * Defines the shape of the image.\n *\n * @default \"Circle\"\n * @public\n */\n @property()\n imageShape: `${UDExAvatarShape}` = UDExAvatarShape.Circle;\n\n /**\n * Allows control over the size of the image.\n *\n * @default \"S\"\n * @public\n */\n @property()\n imageSize: `${UDExAvatarSize}` = UDExAvatarSize.S;\n\n /**\n * Slot for list item content.\n *\n * @slot\n * @public\n */\n @slot({ type: Node, \"default\": true })\n content!: DefaultSlot<Node>;\n\n /**\n * Slot for first icon.\n *\n * @slot\n * @public\n */\n @slot({ type: UDExButton })\n firstIcon!: Slot<UDExButton>;\n\n /**\n * Slot for second icon.\n *\n * @slot\n * @public\n */\n @slot({ type: UDExButton })\n secondIcon!: Slot<UDExButton>;\n\n /**\n * Defines the role attribute of component\n *\n * @default \"\"\n * @public\n */\n @property({ type: String })\n accessibleRole: string = \"\";\n\n @property({ type: String })\n _additionalClassName!: string;\n\n _displayRating: UDExDisplayType = UDExDisplayType.Desktop;\n\n deactivate: () => void;\n\n @i18n(\"@sapudex/web-components\")\n static i18nBundle: I18nBundle;\n\n constructor() {\n super();\n\n this.deactivate = () => {\n if (this.active) {\n this.active = false;\n }\n };\n }\n\n onEnterDOM() {\n document.addEventListener(\"mouseup\", this.deactivate);\n if (isDesktop()) {\n this.setAttribute(\"desktop\", \"\");\n }\n }\n\n onExitDOM() {\n document.removeEventListener(\"mouseup\", this.deactivate);\n }\n\n handleMouseDown() {\n this.activate();\n }\n\n handleMouseUp() {\n this.deactivate();\n }\n\n handleKeyUp(e: KeyboardEvent) {\n e.preventDefault();\n if (isSpace(e) || isEnter(e)) {\n this.deactivate();\n }\n }\n\n handleKeyDown(e: KeyboardEvent) {\n if (this.firstIconElement === e.target || this.secondIconElement === e.target || (e.target as HTMLElement).classList.contains(\"udex-list__group-heading__icon\")) {\n return;\n }\n\n if (isSpace(e)) {\n e.preventDefault();\n }\n if (isSpace(e) || isEnter(e)) {\n this.activate();\n this.handleItemClick(e);\n }\n }\n\n handleKeyDownIcon(e: KeyboardEvent) {\n e.stopPropagation();\n }\n\n handleItemClick(e: Event) {\n if (this.disabled) {\n return;\n }\n if (!this.indeterminate && !this.controlled) {\n this.selected = !this.selected;\n }\n this.fireItemPress(e);\n }\n\n handleFocusIn() {\n if (!this.disabled) {\n this.focused = true;\n this.fireDecoratorEvent(\"item-focus\", {\n item: this,\n });\n }\n }\n\n handleFocusOut() {\n if (!this.disabled) {\n this.focused = false;\n this.deactivate();\n }\n }\n\n fireItemPress(e: Event) {\n if (isEnter(e as KeyboardEvent)) {\n e.preventDefault();\n }\n this.fireDecoratorEvent(\"item-press\", {\n selected: this.selected,\n item: this,\n });\n }\n\n activate() {\n if (!this.disabled) {\n this.active = true;\n }\n }\n\n get className(): string {\n const isGroupChild = this?.parentElement as UDExListGroupHeaderBase;\n const controlledClassName = this.controlled ? `${listItemClass}_controlled` : \"\";\n const groupClassName = isGroupChild?.isGroup ? `${listItemClass}_group` : \"\";\n const largeSizeClassName = this.isLargeSize ? `${listItemClass}_large` : \"\";\n return `${listItemClass} ${groupClassName} ${this._additionalClassName} ${controlledClassName} ${largeSizeClassName}`.trim();\n }\n\n get firstIconElement(): UDExButton {\n return this.getSlottedNodes<UDExButton>(\"firstIcon\")[0];\n }\n\n get secondIconElement(): UDExButton {\n return this.getSlottedNodes<UDExButton>(\"secondIcon\")[0];\n }\n\n get hasFirstIcon(): boolean {\n return !!this.firstIcon;\n }\n\n get hasSecondIcon(): boolean {\n return !!this.secondIcon;\n }\n\n get roleItem(): string {\n // When the host element carries the role (aria-activedescendant mode), the\n // inner [part=item] div must be presentational to avoid a duplicate ARIA node.\n if (this._useHostAriaRole) {\n return \"presentation\";\n }\n if (this.accessibleRole.length > 0) {\n return this.accessibleRole;\n }\n // SingleContent is informational (not a selection widget) — listitem is semantically correct\n return this.modeSingleContent ? \"listitem\" : listItemRole;\n }\n\n get effectiveRole(): string {\n return this.accessibleRole.length > 0 ? this.accessibleRole : listItemRole;\n }\n\n get ariaCheckedValue(): \"true\" | \"false\" | \"mixed\" | undefined {\n if (this.effectiveRole !== \"treeitem\") {\n return undefined;\n }\n // Only MultiSelect treeitems expose aria-checked; SingleSelect uses aria-selected.\n if (!this.modeMultiSelect) {\n return undefined;\n }\n if (this.indeterminate) {\n return \"mixed\";\n }\n return this.selected ? \"true\" : \"false\";\n }\n\n get ariaSelectedValue(): \"true\" | \"false\" | undefined {\n // RadioGroup conveys its state through the radio control, never aria-selected.\n if (this.modeRadioGroup) {\n return undefined;\n }\n // MultiSelect treeitems convey state via aria-checked (see ariaCheckedValue).\n // Every other selectable node — listbox options in both SingleSelect AND\n // MultiSelect, plus SingleSelect treeitems — announces its state natively\n // through aria-selected so the screen reader re-reads it when focus is on the\n // item and when Enter/Space toggles it.\n if (this.roleItem === \"treeitem\" && this.modeMultiSelect) {\n return undefined;\n }\n // Gated on the actual rendered role of the [part=item] div — never the\n // presentational inner div used in aria-activedescendant mode (SelectBox sets\n // aria-selected on the host).\n if (this.roleItem !== \"treeitem\" && this.roleItem !== \"option\") {\n return undefined;\n }\n return this.selected ? \"true\" : \"false\";\n }\n\n get ariaExpandedValue(): \"true\" | \"false\" | undefined {\n // aria-expanded is exposed ONLY on collapsible headers — a node the user can\n // actually expand/collapse. Non-collapsible group headers must NOT report an\n // expanded/collapsed state (nothing to toggle); the tree hierarchy is conveyed\n // structurally by the nested role=\"group\", not by aria-expanded.\n if (!this.collapsible) {\n return undefined;\n }\n return this.expanded ? \"true\" : \"false\";\n }\n\n get _ariaDisabled(): boolean | undefined {\n return this.disabled ? true : undefined;\n }\n\n get modeSingleContent(): boolean {\n return this.mode === UDExListMode.SingleContent;\n }\n\n get modeRadioGroup(): boolean {\n return this.mode === UDExListMode.RadioGroup;\n }\n\n get modeSelected(): boolean {\n return [UDExListMode.SingleSelect, UDExListMode.MultiSelect, UDExListMode.RadioGroup].includes(this.mode as UDExListMode);\n }\n\n get isLargeSize(): boolean {\n return this.size === UDExListItemSize.Large;\n }\n\n get accessibleListItemName(): string {\n return this.accessibleName || this.label?.replace(/<[^>]+>/g, \"\");\n }\n\n get stateAccessibleName(): string {\n if (this.indeterminate) {\n return translate(UDExListItem, INDETERMINATE);\n }\n return `${this.selected ? translate(UDExListItem, SELECTED) : translate(UDExListItem, UNSELECTED)} `;\n }\n\n get ratingAriaLabel(): string {\n const ratingText = this.ratingCount ? `${translate(UDExListItem, RATING_COUNT_TITLE)} ${this.ratingCount}` : \"\";\n const totalText = this.totalCount ? `${translate(UDExListItem, TOTAL)} ${this.totalCount}` : \"\";\n const ratingTitleText = translate(UDExListItem, RATING_INDICATOR_TEXT);\n return [...[ratingText, totalText].filter(Boolean), `${ratingTitleText} ${this.rating} of ${this.ratingMax}`].join(\", \");\n }\n}\n\nUDExListItem.define();\n\nexport default UDExListItem;\nexport type { UDExListItemBaseEventDetail, UDExListItemItemPressEventDetail };\n"]}
|
package/dist/ListItemBase.d.ts
CHANGED
|
@@ -158,6 +158,23 @@ declare class UDExListItemBase extends UI5Element {
|
|
|
158
158
|
* @private
|
|
159
159
|
*/
|
|
160
160
|
_useHostAriaRole: boolean;
|
|
161
|
+
/**
|
|
162
|
+
* Explicit 1-based position of this treeitem within its own group, for a grouped
|
|
163
|
+
* tree structure. The sibling-group tree markup makes JAWS/NVDA compute a flattened
|
|
164
|
+
* posinset/setsize across all groups; setting these explicitly restores the
|
|
165
|
+
* per-group count so each item announces "N of <items in this group>".
|
|
166
|
+
* Only rendered on real treeitems (never in aria-activedescendant mode).
|
|
167
|
+
*
|
|
168
|
+
* @private
|
|
169
|
+
*/
|
|
170
|
+
_ariaPosInSet?: number;
|
|
171
|
+
/**
|
|
172
|
+
* Explicit set size (number of treeitems within this item's own group) — the
|
|
173
|
+
* companion to {@link _ariaPosInSet}.
|
|
174
|
+
*
|
|
175
|
+
* @private
|
|
176
|
+
*/
|
|
177
|
+
_ariaSetSize?: number;
|
|
161
178
|
/**
|
|
162
179
|
* Defines the tab index of the component.
|
|
163
180
|
*
|
package/dist/ListItemBase.js
CHANGED
|
@@ -135,6 +135,15 @@ let UDExListItemBase = UDExListItemBase_1 = class UDExListItemBase extends UI5El
|
|
|
135
135
|
}
|
|
136
136
|
handleCollapseIconMouseDown(e) {
|
|
137
137
|
e.stopPropagation();
|
|
138
|
+
// In aria-activedescendant mode (SelectBox) DOM focus must stay on the search
|
|
139
|
+
// input. Preventing the mousedown default stops the chevron/header body div from
|
|
140
|
+
// stealing focus, which would otherwise trigger a focusout→refocus + scroll-into-view
|
|
141
|
+
// that shifts the chevron out from under the pointer and eats the first click.
|
|
142
|
+
// Real-focus components (FilterMenu/List) leave _useHostAriaRole false and are
|
|
143
|
+
// unaffected. The click still fires, so collapse/expand happens on the first click.
|
|
144
|
+
if (this._useHostAriaRole) {
|
|
145
|
+
e.preventDefault();
|
|
146
|
+
}
|
|
138
147
|
}
|
|
139
148
|
handleCollapseIconClick(e) {
|
|
140
149
|
e.stopPropagation();
|
|
@@ -244,6 +253,12 @@ __decorate([
|
|
|
244
253
|
__decorate([
|
|
245
254
|
property({ type: Boolean })
|
|
246
255
|
], UDExListItemBase.prototype, "_useHostAriaRole", void 0);
|
|
256
|
+
__decorate([
|
|
257
|
+
property({ type: Number })
|
|
258
|
+
], UDExListItemBase.prototype, "_ariaPosInSet", void 0);
|
|
259
|
+
__decorate([
|
|
260
|
+
property({ type: Number })
|
|
261
|
+
], UDExListItemBase.prototype, "_ariaSetSize", void 0);
|
|
247
262
|
__decorate([
|
|
248
263
|
property({ type: String })
|
|
249
264
|
], UDExListItemBase.prototype, "_tabIndex", void 0);
|
package/dist/ListItemBase.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItemBase.js","sourceRoot":"","sources":["../src/ListItemBase.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/renderer/JsxRenderer.js\";\nimport { UDExListItemSize, UDExListMode, UDExListStyleType } from \"./types/List.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport translate from \"./utils/translate.js\";\nimport { COLLAPSE, EXPAND } from \"./generated/i18n/i18n-defaults.js\";\n\nexport type UDExListItemBaseEvents = {\n \"first-icon-click\": UDExListItemBaseEventDetail,\n \"second-icon-click\": UDExListItemBaseEventDetail,\n \"accordion-icon-click\": UDExListItemBaseAccordionClickEventDetail,\n}\n\ntype UDExListItemBaseEventDetail = {\n originalEvent: PointerEvent,\n item: HTMLElement,\n}\n\ntype UDExListItemBaseAccordionClickEventDetail = {\n collapsed: boolean;\n}\n\n/**\n * @class\n *\n * A class to serve as a foundation\n * for the <code>UDExListItem</code>,<code>UDExFilterMenuItem</code> and <code>UDExGroupHeaderBase</code> classes.\n *\n * @constructor\n * @author SAP SE\n * @extends UI5Element\n * @public\n */\n@customElement({\n renderer: jsxRenderer,\n})\n\n/**\n * Fired event when the user click on a first icon.\n * @param { PointerEvent } originalEvent The original event object\n * @param { HTMLElement } item The list item\n * @public\n * @param { PointerEvent } originalEvent The original event object\n * @param { HTMLElement } item The list item\n */\n@event(\"first-icon-click\", { bubbles: true })\n/**\n * Fired event when the user click on a second icon.\n * @param { PointerEvent } originalEvent The original event object\n * @param { HTMLElement } item The list item\n * @public\n * @param { PointerEvent } originalEvent The original event object\n * @param { HTMLElement } item The list item\n */\n@event(\"second-icon-click\", { bubbles: true })\n\n/**\n * Triggered when the user clicks on an accordion item.\n * @public\n * @param { string } name\n * @param { boolean } expanded\n */\n@event(\"accordion-icon-click\", { bubbles: true })\n\nclass UDExListItemBase extends UI5Element {\n eventDetails!: UDExListItemBaseEvents;\n\n /**\n * Defines the number of displayed rating symbols.\n *\n * @default 5\n * @public\n */\n @property({ type: Number })\n ratingMax: number = 5;\n\n /**\n * Defines the value of the rating.\n * Use for rating indicator to represent aggregated review scores within list items\n *\n * @public\n */\n @property({ type: String })\n rating?: string;\n\n /**\n * Defines the number of the rating.\n * Use for the rating indicator\n *\n * @public\n */\n @property({ type: String })\n ratingCount?: string;\n\n /**\n * The number of total votes.\n * Use for the rating indicator\n *\n * @public\n */\n @property({ type: String })\n totalCount?: string;\n\n /**\n * Defines the <code>label</code> for the item.\n *\n * @public\n */\n @property()\n label!: string;\n\n /**\n * Defines whether a visual separator should be rendered after the item.\n *\n * @default false\n * @public\n */\n @property({ type: Boolean })\n divider!: boolean;\n\n /**\n * Defines whether <code> list item</code> is in disabled state.\n *\n * @public\n */\n @property({ type: Boolean })\n disabled!: boolean;\n\n /**\n * Defines the supportingText, displayed in the end of the item.\n *\n * @public\n */\n @property()\n supportingText!: string;\n\n /**\n * Defines the selected state of the item.\n *\n * @default false\n * @public\n */\n @property({ type: Boolean })\n selected: boolean = false;\n\n /**\n * Defines whether the selection of a list is displayed as partially selected.\n *\n * @default false\n * @public\n */\n @property({ type: Boolean })\n indeterminate?: boolean;\n\n /**\n * Defines the controlled state of the item.\n *\n * @default false\n * @public\n */\n @property({ type: Boolean })\n controlled?: boolean;\n\n /**\n * Defines the mode of the item.\n *\n * @default \"SingleSelect\"\n * @public\n */\n @property()\n mode: `${UDExListMode}` = UDExListMode.SingleSelect;\n\n /**\n * Defines the size of the item.\n *\n * @default \"Standard\"\n * @public\n */\n @property()\n size: `${UDExListItemSize}` = UDExListItemSize.Standard;\n\n /**\n * Defines the type of the item.\n *\n * @default \"None\"\n * @public\n */\n @property()\n type: `${UDExListStyleType}` = UDExListStyleType.None;\n\n /**\n * Defines the icon of the component.\n *\n * @default \"\"\n * @private\n */\n @property({ type: String })\n _icon: string = \"\";\n\n /**\n * Defines if grouping header can collapse/expand child elements.\n *\n * @default false\n * @public\n */\n @property({ type: Boolean })\n collapsible!: boolean;\n\n /**\n * Defines if collapsible grouping header is collapsed or expanded\n *\n * @default undefined\n * @public\n */\n @property({ type: Boolean })\n collapsed!: boolean;\n\n /**\n * Defines if item is part of filtered list\n *\n * @default undefined\n * @private\n */\n @property({ type: Boolean })\n _filtered!: boolean;\n\n /**\n * When true, the host element carries role + ARIA state attributes directly\n * (set by the outer template) so that aria-activedescendant works across shadow DOM.\n * The inner [part=item] div is then rendered as role=\"presentation\".\n *\n * @default false\n * @private\n */\n @property({ type: Boolean })\n _useHostAriaRole: boolean = false;\n\n /**\n * Defines the tab index of the component.\n *\n * @default \"\"\n * @private\n */\n @property({ type: String })\n _tabIndex: string = \"\";\n\n _resizeHandler: () => void;\n contentElement: HTMLElement | null | undefined;\n\n constructor() {\n super();\n this._resizeHandler = this._onResize.bind(this);\n this.contentElement = null;\n }\n\n @i18n(\"@sapudex/web-components\")\n static i18nBundle: I18nBundle;\n\n onAfterRendering() {\n if (!this.collapsible) {\n return;\n }\n this.contentElement = this.shadowRoot?.querySelector<HTMLElement>(\".udex-list__group-list__content\");\n if (this.contentElement) {\n this.setContentHeight();\n }\n }\n\n onEnterDOM() {\n if (this.contentElement && this.collapsible) {\n ResizeHandler.register(this.contentElement, this._resizeHandler);\n }\n }\n\n onExitDOM(): void {\n if (this.contentElement && this.collapsible) {\n ResizeHandler.deregister(this.contentElement, this._resizeHandler);\n }\n }\n\n setContentHeight() {\n this.style.setProperty(\"--udex-list-content-max-height\", `${this.contentElement?.scrollHeight || 0}px`);\n }\n\n _onResize(): void {\n if (this.contentElement && this.collapsible && this.contentElement.scrollHeight > 0) {\n this.setContentHeight();\n }\n }\n\n _fireIconClickEvent(e: PointerEvent): void {\n const target = e.target as HTMLElement;\n const slot = target.getAttribute(\"slot\");\n if (slot === \"firstIcon\") {\n this.fireDecoratorEvent(\"first-icon-click\", {\n originalEvent: e,\n item: this,\n });\n } else if (slot === \"secondIcon\") {\n this.fireDecoratorEvent(\"second-icon-click\", {\n originalEvent: e,\n item: this,\n });\n }\n }\n\n handleCollapseIconMouseDown(e: MouseEvent) {\n e.stopPropagation();\n }\n\n handleCollapseIconClick(e: MouseEvent | KeyboardEvent) {\n e.stopPropagation();\n e.preventDefault();\n this.fireDecoratorEvent(\"accordion-icon-click\", { collapsed: this.collapsed });\n }\n\n get _effectiveTabIndex(): string {\n if (this.disabled) {\n return \"-1\";\n }\n return this._tabIndex;\n }\n\n get numberOfItem(): number {\n return [...this.parentNode!.children].indexOf(this) + 1;\n }\n\n get isGroup(): boolean {\n return false;\n }\n\n get modeRadioGroup(): boolean {\n return this.mode === UDExListMode.RadioGroup;\n }\n\n get modeMultiSelect(): boolean {\n return this.mode === UDExListMode.MultiSelect;\n }\n\n get modeSingleSelect(): boolean {\n return this.mode === UDExListMode.SingleSelect;\n }\n\n get modeMultiSelectOrRadioGroup(): boolean {\n return this.modeMultiSelect || this.modeRadioGroup;\n }\n\n get typeNumber(): boolean {\n return this.type === UDExListStyleType.Number;\n }\n\n get typeCircle(): boolean {\n return this.type === UDExListStyleType.Circle;\n }\n\n get typeIcon(): boolean {\n return this.type === UDExListStyleType.Icon;\n }\n\n get ariaControlsId(): string {\n return `udex-list-${this._id}__group-content`;\n }\n\n get expandButtonAccessibleName(): string {\n return this.collapsed ? translate(UDExListItemBase, EXPAND) : translate(UDExListItemBase, COLLAPSE);\n }\n\n get expanded(): boolean {\n return !this.collapsed;\n }\n\n get hasRating(): boolean {\n return !!this.rating;\n }\n}\n\nexport default UDExListItemBase;\nexport type { UDExListItemBaseEventDetail, UDExListItemBaseAccordionClickEventDetail };\n"]}
|
|
1
|
+
{"version":3,"file":"ListItemBase.js","sourceRoot":"","sources":["../src/ListItemBase.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/renderer/JsxRenderer.js\";\nimport { UDExListItemSize, UDExListMode, UDExListStyleType } from \"./types/List.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport translate from \"./utils/translate.js\";\nimport { COLLAPSE, EXPAND } from \"./generated/i18n/i18n-defaults.js\";\n\nexport type UDExListItemBaseEvents = {\n \"first-icon-click\": UDExListItemBaseEventDetail,\n \"second-icon-click\": UDExListItemBaseEventDetail,\n \"accordion-icon-click\": UDExListItemBaseAccordionClickEventDetail,\n}\n\ntype UDExListItemBaseEventDetail = {\n originalEvent: PointerEvent,\n item: HTMLElement,\n}\n\ntype UDExListItemBaseAccordionClickEventDetail = {\n collapsed: boolean;\n}\n\n/**\n * @class\n *\n * A class to serve as a foundation\n * for the <code>UDExListItem</code>,<code>UDExFilterMenuItem</code> and <code>UDExGroupHeaderBase</code> classes.\n *\n * @constructor\n * @author SAP SE\n * @extends UI5Element\n * @public\n */\n@customElement({\n renderer: jsxRenderer,\n})\n\n/**\n * Fired event when the user click on a first icon.\n * @param { PointerEvent } originalEvent The original event object\n * @param { HTMLElement } item The list item\n * @public\n * @param { PointerEvent } originalEvent The original event object\n * @param { HTMLElement } item The list item\n */\n@event(\"first-icon-click\", { bubbles: true })\n/**\n * Fired event when the user click on a second icon.\n * @param { PointerEvent } originalEvent The original event object\n * @param { HTMLElement } item The list item\n * @public\n * @param { PointerEvent } originalEvent The original event object\n * @param { HTMLElement } item The list item\n */\n@event(\"second-icon-click\", { bubbles: true })\n\n/**\n * Triggered when the user clicks on an accordion item.\n * @public\n * @param { string } name\n * @param { boolean } expanded\n */\n@event(\"accordion-icon-click\", { bubbles: true })\n\nclass UDExListItemBase extends UI5Element {\n eventDetails!: UDExListItemBaseEvents;\n\n /**\n * Defines the number of displayed rating symbols.\n *\n * @default 5\n * @public\n */\n @property({ type: Number })\n ratingMax: number = 5;\n\n /**\n * Defines the value of the rating.\n * Use for rating indicator to represent aggregated review scores within list items\n *\n * @public\n */\n @property({ type: String })\n rating?: string;\n\n /**\n * Defines the number of the rating.\n * Use for the rating indicator\n *\n * @public\n */\n @property({ type: String })\n ratingCount?: string;\n\n /**\n * The number of total votes.\n * Use for the rating indicator\n *\n * @public\n */\n @property({ type: String })\n totalCount?: string;\n\n /**\n * Defines the <code>label</code> for the item.\n *\n * @public\n */\n @property()\n label!: string;\n\n /**\n * Defines whether a visual separator should be rendered after the item.\n *\n * @default false\n * @public\n */\n @property({ type: Boolean })\n divider!: boolean;\n\n /**\n * Defines whether <code> list item</code> is in disabled state.\n *\n * @public\n */\n @property({ type: Boolean })\n disabled!: boolean;\n\n /**\n * Defines the supportingText, displayed in the end of the item.\n *\n * @public\n */\n @property()\n supportingText!: string;\n\n /**\n * Defines the selected state of the item.\n *\n * @default false\n * @public\n */\n @property({ type: Boolean })\n selected: boolean = false;\n\n /**\n * Defines whether the selection of a list is displayed as partially selected.\n *\n * @default false\n * @public\n */\n @property({ type: Boolean })\n indeterminate?: boolean;\n\n /**\n * Defines the controlled state of the item.\n *\n * @default false\n * @public\n */\n @property({ type: Boolean })\n controlled?: boolean;\n\n /**\n * Defines the mode of the item.\n *\n * @default \"SingleSelect\"\n * @public\n */\n @property()\n mode: `${UDExListMode}` = UDExListMode.SingleSelect;\n\n /**\n * Defines the size of the item.\n *\n * @default \"Standard\"\n * @public\n */\n @property()\n size: `${UDExListItemSize}` = UDExListItemSize.Standard;\n\n /**\n * Defines the type of the item.\n *\n * @default \"None\"\n * @public\n */\n @property()\n type: `${UDExListStyleType}` = UDExListStyleType.None;\n\n /**\n * Defines the icon of the component.\n *\n * @default \"\"\n * @private\n */\n @property({ type: String })\n _icon: string = \"\";\n\n /**\n * Defines if grouping header can collapse/expand child elements.\n *\n * @default false\n * @public\n */\n @property({ type: Boolean })\n collapsible!: boolean;\n\n /**\n * Defines if collapsible grouping header is collapsed or expanded\n *\n * @default undefined\n * @public\n */\n @property({ type: Boolean })\n collapsed!: boolean;\n\n /**\n * Defines if item is part of filtered list\n *\n * @default undefined\n * @private\n */\n @property({ type: Boolean })\n _filtered!: boolean;\n\n /**\n * When true, the host element carries role + ARIA state attributes directly\n * (set by the outer template) so that aria-activedescendant works across shadow DOM.\n * The inner [part=item] div is then rendered as role=\"presentation\".\n *\n * @default false\n * @private\n */\n @property({ type: Boolean })\n _useHostAriaRole: boolean = false;\n\n /**\n * Explicit 1-based position of this treeitem within its own group, for a grouped\n * tree structure. The sibling-group tree markup makes JAWS/NVDA compute a flattened\n * posinset/setsize across all groups; setting these explicitly restores the\n * per-group count so each item announces \"N of <items in this group>\".\n * Only rendered on real treeitems (never in aria-activedescendant mode).\n *\n * @private\n */\n @property({ type: Number })\n _ariaPosInSet?: number;\n\n /**\n * Explicit set size (number of treeitems within this item's own group) — the\n * companion to {@link _ariaPosInSet}.\n *\n * @private\n */\n @property({ type: Number })\n _ariaSetSize?: number;\n\n /**\n * Defines the tab index of the component.\n *\n * @default \"\"\n * @private\n */\n @property({ type: String })\n _tabIndex: string = \"\";\n\n _resizeHandler: () => void;\n contentElement: HTMLElement | null | undefined;\n\n constructor() {\n super();\n this._resizeHandler = this._onResize.bind(this);\n this.contentElement = null;\n }\n\n @i18n(\"@sapudex/web-components\")\n static i18nBundle: I18nBundle;\n\n onAfterRendering() {\n if (!this.collapsible) {\n return;\n }\n this.contentElement = this.shadowRoot?.querySelector<HTMLElement>(\".udex-list__group-list__content\");\n if (this.contentElement) {\n this.setContentHeight();\n }\n }\n\n onEnterDOM() {\n if (this.contentElement && this.collapsible) {\n ResizeHandler.register(this.contentElement, this._resizeHandler);\n }\n }\n\n onExitDOM(): void {\n if (this.contentElement && this.collapsible) {\n ResizeHandler.deregister(this.contentElement, this._resizeHandler);\n }\n }\n\n setContentHeight() {\n this.style.setProperty(\"--udex-list-content-max-height\", `${this.contentElement?.scrollHeight || 0}px`);\n }\n\n _onResize(): void {\n if (this.contentElement && this.collapsible && this.contentElement.scrollHeight > 0) {\n this.setContentHeight();\n }\n }\n\n _fireIconClickEvent(e: PointerEvent): void {\n const target = e.target as HTMLElement;\n const slot = target.getAttribute(\"slot\");\n if (slot === \"firstIcon\") {\n this.fireDecoratorEvent(\"first-icon-click\", {\n originalEvent: e,\n item: this,\n });\n } else if (slot === \"secondIcon\") {\n this.fireDecoratorEvent(\"second-icon-click\", {\n originalEvent: e,\n item: this,\n });\n }\n }\n\n handleCollapseIconMouseDown(e: MouseEvent) {\n e.stopPropagation();\n // In aria-activedescendant mode (SelectBox) DOM focus must stay on the search\n // input. Preventing the mousedown default stops the chevron/header body div from\n // stealing focus, which would otherwise trigger a focusout→refocus + scroll-into-view\n // that shifts the chevron out from under the pointer and eats the first click.\n // Real-focus components (FilterMenu/List) leave _useHostAriaRole false and are\n // unaffected. The click still fires, so collapse/expand happens on the first click.\n if (this._useHostAriaRole) {\n e.preventDefault();\n }\n }\n\n handleCollapseIconClick(e: MouseEvent | KeyboardEvent) {\n e.stopPropagation();\n e.preventDefault();\n this.fireDecoratorEvent(\"accordion-icon-click\", { collapsed: this.collapsed });\n }\n\n get _effectiveTabIndex(): string {\n if (this.disabled) {\n return \"-1\";\n }\n return this._tabIndex;\n }\n\n get numberOfItem(): number {\n return [...this.parentNode!.children].indexOf(this) + 1;\n }\n\n get isGroup(): boolean {\n return false;\n }\n\n get modeRadioGroup(): boolean {\n return this.mode === UDExListMode.RadioGroup;\n }\n\n get modeMultiSelect(): boolean {\n return this.mode === UDExListMode.MultiSelect;\n }\n\n get modeSingleSelect(): boolean {\n return this.mode === UDExListMode.SingleSelect;\n }\n\n get modeMultiSelectOrRadioGroup(): boolean {\n return this.modeMultiSelect || this.modeRadioGroup;\n }\n\n get typeNumber(): boolean {\n return this.type === UDExListStyleType.Number;\n }\n\n get typeCircle(): boolean {\n return this.type === UDExListStyleType.Circle;\n }\n\n get typeIcon(): boolean {\n return this.type === UDExListStyleType.Icon;\n }\n\n get ariaControlsId(): string {\n return `udex-list-${this._id}__group-content`;\n }\n\n get expandButtonAccessibleName(): string {\n return this.collapsed ? translate(UDExListItemBase, EXPAND) : translate(UDExListItemBase, COLLAPSE);\n }\n\n get expanded(): boolean {\n return !this.collapsed;\n }\n\n get hasRating(): boolean {\n return !!this.rating;\n }\n}\n\nexport default UDExListItemBase;\nexport type { UDExListItemBaseEventDetail, UDExListItemBaseAccordionClickEventDetail };\n"]}
|
package/dist/ListItemTemplate.js
CHANGED
|
@@ -10,9 +10,9 @@ import UDExButtonSize from "./types/ButtonSize.js";
|
|
|
10
10
|
import UDExButtonDesign from "./types/ButtonDesign.js";
|
|
11
11
|
import slimArrowRight from "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
|
|
12
12
|
function ContentList() {
|
|
13
|
-
return (_jsxs("div", { class: "udex-list__content-wrap", ...{ "_id": this._id }, "aria-labelledby": `${this._id}-invisibleText`, "aria-label": this.accessibleListItemName, children: [this.flag && (_jsx("div", { class: "udex-list__flag-wrap", children: _jsx("span", { class: "udex-list__flag", style: { backgroundPosition: this.flagPosition } }) })), this.typeNumber && _jsxs("span", { class: "udex-list__number", children: [this.numberOfItem, "."] }), this.typeCircle && _jsx("span", { class: "udex-list__circle", children: "\u2022" }), this.typeIcon && (_jsx(Icon, { name: this._icon, class: "udex-list__icon", "accessible-role": "presentation", "aria-hidden": "true", part: "icon" })), this.image && (_jsxs(UDExAvatar, { class: "udex-list__avatar", part: "avatar", shape: this.imageShape, size: this.imageSize, children: [this.imageBadgeState && (_jsx(UDExStatusBadge, { slot: "badge", "value-state": this.imageBadgeState, size: this.imageSize })), _jsx("img", { src: this.image, alt: this.imageAlt })] })), _jsxs("div", { class: "udex-list__content", part: "content", children: [this.label ? (_jsxs(_Fragment, { children: [_jsxs("div", { class: "udex-list__text-holder", children: [_jsx("span", { part: "title", ...{ innerHTML: this.label } }), this.supportingText && (_jsx("span", { class: "udex-list__supporting-text", part: "supporting", children: this.supportingText })), _jsx("slot", { part: "content" }), this.hasRating && (_jsx(UDExRatingIndicator, { "aria-label": this.ratingAriaLabel, value: this.rating !== undefined ? Number(this.rating) : undefined, "rating-count": this.ratingCount, "total-count": this.totalCount, max: this.ratingMax, display: this._displayRating, disabled: true, readonly: true }))] }), this.additionalText && (_jsx("div", { class: "udex-list__add-text", part: "additional-text", children: this.additionalText })), _jsxs("div", { class: "udex-list__btn-wrap", children: [this.hasFirstIcon && _jsx("slot", { name: "firstIcon", onClick: this._fireIconClickEvent }), this.hasSecondIcon && _jsx("slot", { name: "secondIcon", onClick: this._fireIconClickEvent })] })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { class: "udex-list__text-holder", children: [_jsx("slot", { part: "content" }), this.supportingText && (_jsx("span", { class: "udex-list__supporting-text", part: "supporting", children: this.supportingText })), this.hasRating && (_jsx(UDExRatingIndicator, { "aria-label": this.ratingAriaLabel, value: this.rating !== undefined ? Number(this.rating) : undefined, "rating-count": this.ratingCount, "total-count": this.totalCount, max: this.ratingMax, display: this._displayRating, disabled: true, readonly: true }))] }), this.additionalText && (_jsx("div", { class: "udex-list__add-text", part: "additional-text", children: this.additionalText })), _jsxs("div", { class: "udex-list__btn-wrap", children: [this.hasFirstIcon && _jsx("slot", { name: "firstIcon", onClick: this._fireIconClickEvent }), this.hasSecondIcon && _jsx("slot", { name: "secondIcon", onClick: this._fireIconClickEvent })] })] })), this.collapsible && (_jsx("div", { class: "udex-list__group-heading__icon-wrapper", children: _jsx(UDExButton, { class: "udex-list__group-heading__icon", size: UDExButtonSize.Small, design: UDExButtonDesign.Tertiary, onMouseDown: this.handleCollapseIconMouseDown, onClick: this.handleCollapseIconClick, tabindex: -1, "accessible-name": this.expandButtonAccessibleName, ...{ "mode": "Interactive" }, icon: slimArrowRight }) }))] }), _jsx("div", { class: "hidden", id: `${this._id}-invisibleText`, children: this.accessibleListItemName })
|
|
13
|
+
return (_jsxs("div", { class: "udex-list__content-wrap", ...{ "_id": this._id }, "aria-labelledby": `${this._id}-invisibleText`, "aria-label": this.accessibleListItemName, children: [this.flag && (_jsx("div", { class: "udex-list__flag-wrap", children: _jsx("span", { class: "udex-list__flag", style: { backgroundPosition: this.flagPosition } }) })), this.typeNumber && _jsxs("span", { class: "udex-list__number", children: [this.numberOfItem, "."] }), this.typeCircle && _jsx("span", { class: "udex-list__circle", children: "\u2022" }), this.typeIcon && (_jsx(Icon, { name: this._icon, class: "udex-list__icon", "accessible-role": "presentation", "aria-hidden": "true", part: "icon" })), this.image && (_jsxs(UDExAvatar, { class: "udex-list__avatar", part: "avatar", shape: this.imageShape, size: this.imageSize, children: [this.imageBadgeState && (_jsx(UDExStatusBadge, { slot: "badge", "value-state": this.imageBadgeState, size: this.imageSize })), _jsx("img", { src: this.image, alt: this.imageAlt })] })), _jsxs("div", { class: "udex-list__content", part: "content", children: [this.label ? (_jsxs(_Fragment, { children: [_jsxs("div", { class: "udex-list__text-holder", children: [_jsx("span", { part: "title", ...{ innerHTML: this.label } }), this.supportingText && (_jsx("span", { class: "udex-list__supporting-text", part: "supporting", children: this.supportingText })), _jsx("slot", { part: "content" }), this.hasRating && (_jsx(UDExRatingIndicator, { "aria-label": this.ratingAriaLabel, value: this.rating !== undefined ? Number(this.rating) : undefined, "rating-count": this.ratingCount, "total-count": this.totalCount, max: this.ratingMax, display: this._displayRating, disabled: true, readonly: true }))] }), this.additionalText && (_jsx("div", { class: "udex-list__add-text", part: "additional-text", children: this.additionalText })), _jsxs("div", { class: "udex-list__btn-wrap", children: [this.hasFirstIcon && _jsx("slot", { name: "firstIcon", onClick: this._fireIconClickEvent }), this.hasSecondIcon && _jsx("slot", { name: "secondIcon", onClick: this._fireIconClickEvent })] })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { class: "udex-list__text-holder", children: [_jsx("slot", { part: "content" }), this.supportingText && (_jsx("span", { class: "udex-list__supporting-text", part: "supporting", children: this.supportingText })), this.hasRating && (_jsx(UDExRatingIndicator, { "aria-label": this.ratingAriaLabel, value: this.rating !== undefined ? Number(this.rating) : undefined, "rating-count": this.ratingCount, "total-count": this.totalCount, max: this.ratingMax, display: this._displayRating, disabled: true, readonly: true }))] }), this.additionalText && (_jsx("div", { class: "udex-list__add-text", part: "additional-text", children: this.additionalText })), _jsxs("div", { class: "udex-list__btn-wrap", children: [this.hasFirstIcon && _jsx("slot", { name: "firstIcon", onClick: this._fireIconClickEvent }), this.hasSecondIcon && _jsx("slot", { name: "secondIcon", onClick: this._fireIconClickEvent })] })] })), this.collapsible && (_jsx("div", { class: "udex-list__group-heading__icon-wrapper", children: _jsx(UDExButton, { class: "udex-list__group-heading__icon", size: UDExButtonSize.Small, design: UDExButtonDesign.Tertiary, onMouseDown: this.handleCollapseIconMouseDown, onClick: this.handleCollapseIconClick, tabindex: -1, "accessible-name": this.expandButtonAccessibleName, ...{ "mode": "Interactive" }, icon: slimArrowRight }) }))] }), _jsx("div", { class: "hidden", id: `${this._id}-invisibleText`, children: this.accessibleListItemName })] }));
|
|
14
14
|
}
|
|
15
15
|
export default function ListItemTemplate() {
|
|
16
|
-
return (_jsxs(_Fragment, { children: [this.modeSelected && (_jsxs("div", { part: "item", tabIndex: Number(this._effectiveTabIndex), "aria-disabled": this._ariaDisabled, class: this.className, role: this.roleItem, "aria-checked": this.ariaCheckedValue, "aria-selected": this.ariaSelectedValue, "aria-expanded": this.ariaExpandedValue, onFocusIn: this.handleFocusIn, onFocusOut: this.handleFocusOut, onClick: this.handleItemClick, onMouseDown: this.handleMouseDown, onMouseUp: this.handleMouseUp, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, ...{ divider: this.divider, "_id": this._id }, "data-selected": this.selected,
|
|
16
|
+
return (_jsxs(_Fragment, { children: [this.modeSelected && (_jsxs("div", { part: "item", tabIndex: Number(this._effectiveTabIndex), "aria-disabled": this._ariaDisabled, class: this.className, role: this.roleItem, "aria-checked": this.ariaCheckedValue, "aria-selected": this.ariaSelectedValue, "aria-expanded": this.ariaExpandedValue, "aria-posinset": this._ariaPosInSet || undefined, "aria-setsize": this._ariaSetSize || undefined, onFocusIn: this.handleFocusIn, onFocusOut: this.handleFocusOut, onClick: this.handleItemClick, onMouseDown: this.handleMouseDown, onMouseUp: this.handleMouseUp, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, ...{ divider: this.divider, "_id": this._id }, "data-selected": this.selected, children: [this.modeMultiSelect && (_jsx(UDExCheckbox, { class: "udex-list__checkbox", part: "checkbox", tabindex: -1, indeterminate: this.indeterminate, "accessible-name": `checkbox ${this.stateAccessibleName}`, checked: this.selected, disabled: this.disabled, "aria-hidden": "true" })), this.modeRadioGroup && (_jsx(UDExRadioButton, { class: "udex-list__radio", part: "radio", tabindex: -1, "accessible-name": `radio ${this.stateAccessibleName}`, checked: this.selected, disabled: this.disabled })), ContentList.call(this)] })), this.modeSingleContent && (_jsx("div", { part: "item", role: this.roleItem, "aria-selected": this.selected, class: this.className, children: ContentList.call(this) }))] }));
|
|
17
17
|
}
|
|
18
18
|
//# sourceMappingURL=ListItemTemplate.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItemTemplate.js","sourceRoot":"","sources":["../src/ListItemTemplate.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { AriaRole } from \"@ui5/webcomponents-base/dist/types.js\";\nimport type UDExListItem from \"./ListItem.js\";\nimport UDExCheckbox from \"./Checkbox.js\";\nimport UDExRadioButton from \"./RadioButton.js\";\nimport Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport UDExAvatar from \"./Avatar.js\";\nimport UDExStatusBadge from \"./StatusBadge.js\";\nimport UDExRatingIndicator from \"./RatingIndicator.js\";\nimport UDExButton from \"./Button.js\";\nimport UDExButtonSize from \"./types/ButtonSize.js\";\nimport UDExButtonDesign from \"./types/ButtonDesign.js\";\nimport slimArrowRight from \"@ui5/webcomponents-icons/dist/slim-arrow-right.js\";\n\nfunction ContentList(this: UDExListItem) {\n return (\n <div\n class=\"udex-list__content-wrap\"\n {...({ \"_id\": this._id } as object)}\n aria-labelledby={`${this._id}-invisibleText`}\n aria-label={this.accessibleListItemName}>\n {this.flag && (\n <div class=\"udex-list__flag-wrap\">\n <span class=\"udex-list__flag\" style={{ backgroundPosition: this.flagPosition }}></span>\n </div>\n )}\n {this.typeNumber && <span class=\"udex-list__number\">{this.numberOfItem}.</span>}\n {this.typeCircle && <span class=\"udex-list__circle\">•</span>}\n {this.typeIcon && (\n <Icon\n name={this._icon}\n class=\"udex-list__icon\"\n accessible-role=\"presentation\"\n aria-hidden=\"true\"\n part=\"icon\"\n />\n )}\n {this.image && (\n <UDExAvatar\n class=\"udex-list__avatar\"\n part=\"avatar\"\n shape={this.imageShape}\n size={this.imageSize}>\n {this.imageBadgeState && (\n <UDExStatusBadge\n slot=\"badge\"\n value-state={this.imageBadgeState}\n size={this.imageSize}\n />\n )}\n <img src={this.image} alt={this.imageAlt} />\n </UDExAvatar>\n )}\n <div class=\"udex-list__content\" part=\"content\">\n {this.label ? (\n <>\n <div class=\"udex-list__text-holder\">\n <span part=\"title\" {...({ innerHTML: this.label } as object)}></span>\n {this.supportingText && (\n <span class=\"udex-list__supporting-text\" part=\"supporting\">{this.supportingText}</span>\n )}\n <slot part=\"content\"></slot>\n {this.hasRating && (\n <UDExRatingIndicator\n aria-label={this.ratingAriaLabel}\n value={this.rating !== undefined ? Number(this.rating) : undefined}\n rating-count={this.ratingCount}\n total-count={this.totalCount}\n max={this.ratingMax}\n display={this._displayRating}\n disabled\n readonly\n />\n )}\n </div>\n {this.additionalText && (\n <div class=\"udex-list__add-text\" part=\"additional-text\">{this.additionalText}</div>\n )}\n <div class=\"udex-list__btn-wrap\">\n {this.hasFirstIcon && <slot name=\"firstIcon\" onClick={this._fireIconClickEvent as EventListener}></slot>}\n {this.hasSecondIcon && <slot name=\"secondIcon\" onClick={this._fireIconClickEvent as EventListener}></slot>}\n </div>\n </>\n ) : (\n <>\n <div class=\"udex-list__text-holder\">\n <slot part=\"content\"></slot>\n {this.supportingText && (\n <span class=\"udex-list__supporting-text\" part=\"supporting\">{this.supportingText}</span>\n )}\n {this.hasRating && (\n <UDExRatingIndicator\n aria-label={this.ratingAriaLabel}\n value={this.rating !== undefined ? Number(this.rating) : undefined}\n rating-count={this.ratingCount}\n total-count={this.totalCount}\n max={this.ratingMax}\n display={this._displayRating}\n disabled\n readonly\n />\n )}\n </div>\n {this.additionalText && (\n <div class=\"udex-list__add-text\" part=\"additional-text\">{this.additionalText}</div>\n )}\n <div class=\"udex-list__btn-wrap\">\n {this.hasFirstIcon && <slot name=\"firstIcon\" onClick={this._fireIconClickEvent as EventListener}></slot>}\n {this.hasSecondIcon && <slot name=\"secondIcon\" onClick={this._fireIconClickEvent as EventListener}></slot>}\n </div>\n </>\n )}\n {this.collapsible && (\n <div class=\"udex-list__group-heading__icon-wrapper\">\n <UDExButton\n class=\"udex-list__group-heading__icon\"\n size={UDExButtonSize.Small}\n design={UDExButtonDesign.Tertiary}\n onMouseDown={this.handleCollapseIconMouseDown}\n onClick={this.handleCollapseIconClick as EventListener}\n tabindex={-1}\n accessible-name={this.expandButtonAccessibleName}\n {...({ \"mode\": \"Interactive\" } as object)}\n icon={slimArrowRight}\n />\n </div>\n )}\n </div>\n <div class=\"hidden\" id={`${this._id}-invisibleText`}>{this.accessibleListItemName}</div>\n <div class=\"hidden\" id={`${this._id}-invisibleText-describedby`}>{this.itemState}</div>\n </div>\n );\n}\n\nexport default function ListItemTemplate(this: UDExListItem) {\n return (\n <>\n {this.modeSelected && (\n <div\n part=\"item\"\n tabIndex={Number(this._effectiveTabIndex)}\n aria-disabled={this._ariaDisabled}\n class={this.className}\n role={this.roleItem as AriaRole}\n aria-checked={this.ariaCheckedValue}\n aria-selected={this.ariaSelectedValue}\n aria-expanded={this.ariaExpandedValue}\n onFocusIn={this.handleFocusIn}\n onFocusOut={this.handleFocusOut}\n onClick={this.handleItemClick}\n onMouseDown={this.handleMouseDown}\n onMouseUp={this.handleMouseUp}\n onKeyUp={this.handleKeyUp}\n onKeyDown={this.handleKeyDown}\n {...({ divider: this.divider, \"_id\": this._id } as object)}\n data-selected={this.selected}\n aria-describedby={this.itemDescribedBy}>\n {this.modeMultiSelect && (\n <UDExCheckbox\n class=\"udex-list__checkbox\"\n part=\"checkbox\"\n tabindex={-1}\n indeterminate={this.indeterminate}\n accessible-name={`checkbox ${this.stateAccessibleName}`}\n checked={this.selected}\n disabled={this.disabled}\n aria-hidden={this.checkboxAriaHidden ? \"true\" : undefined}\n />\n )}\n {this.modeRadioGroup && (\n <UDExRadioButton\n class=\"udex-list__radio\"\n part=\"radio\"\n tabindex={-1}\n accessible-name={`radio ${this.stateAccessibleName}`}\n checked={this.selected}\n disabled={this.disabled}\n />\n )}\n {ContentList.call(this)}\n </div>\n )}\n {this.modeSingleContent && (\n <div\n part=\"item\"\n role={this.roleItem as AriaRole}\n aria-selected={this.selected}\n class={this.className}>\n {ContentList.call(this)}\n </div>\n )}\n </>\n );\n}\n"]}
|
|
1
|
+
{"version":3,"file":"ListItemTemplate.js","sourceRoot":"","sources":["../src/ListItemTemplate.tsx"],"names":[],"mappings":";AAEA,OAAO,YAAY,MAAM,eAAe,CAAC;AACzC,OAAO,eAAe,MAAM,kBAAkB,CAAC;AAC/C,OAAO,IAAI,MAAM,iCAAiC,CAAC;AACnD,OAAO,UAAU,MAAM,aAAa,CAAC;AACrC,OAAO,eAAe,MAAM,kBAAkB,CAAC;AAC/C,OAAO,mBAAmB,MAAM,sBAAsB,CAAC;AACvD,OAAO,UAAU,MAAM,aAAa,CAAC;AACrC,OAAO,cAAc,MAAM,uBAAuB,CAAC;AACnD,OAAO,gBAAgB,MAAM,yBAAyB,CAAC;AACvD,OAAO,cAAc,MAAM,mDAAmD,CAAC;AAE/E,SAAS,WAAW;IAClB,OAAO,CACL,eACE,KAAK,EAAC,yBAAyB,KAC1B,EAAE,KAAK,EAAE,IAAI,CAAC,GAAG,EAAa,qBAClB,GAAG,IAAI,CAAC,GAAG,gBAAgB,gBAChC,IAAI,CAAC,sBAAsB,aACtC,IAAI,CAAC,IAAI,IAAI,CACZ,cAAK,KAAK,EAAC,sBAAsB,YAC/B,eAAM,KAAK,EAAC,iBAAiB,EAAC,KAAK,EAAE,EAAE,kBAAkB,EAAE,IAAI,CAAC,YAAY,EAAE,GAAS,GACnF,CACP,EACA,IAAI,CAAC,UAAU,IAAI,gBAAM,KAAK,EAAC,mBAAmB,aAAE,IAAI,CAAC,YAAY,SAAS,EAC9E,IAAI,CAAC,UAAU,IAAI,eAAM,KAAK,EAAC,mBAAmB,uBAAgB,EAClE,IAAI,CAAC,QAAQ,IAAI,CAChB,KAAC,IAAI,IACH,IAAI,EAAE,IAAI,CAAC,KAAK,EAChB,KAAK,EAAC,iBAAiB,qBACP,cAAc,iBAClB,MAAM,EAClB,IAAI,EAAC,MAAM,GACX,CACH,EACA,IAAI,CAAC,KAAK,IAAI,CACb,MAAC,UAAU,IACT,KAAK,EAAC,mBAAmB,EACzB,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,IAAI,CAAC,UAAU,EACtB,IAAI,EAAE,IAAI,CAAC,SAAS,aACnB,IAAI,CAAC,eAAe,IAAI,CACvB,KAAC,eAAe,IACd,IAAI,EAAC,OAAO,iBACC,IAAI,CAAC,eAAe,EACjC,IAAI,EAAE,IAAI,CAAC,SAAS,GACpB,CACH,EACD,cAAK,GAAG,EAAE,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,IAAI,CAAC,QAAQ,GAAI,IACjC,CACd,EACD,eAAK,KAAK,EAAC,oBAAoB,EAAC,IAAI,EAAC,SAAS,aAC3C,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CACZ,8BACE,eAAK,KAAK,EAAC,wBAAwB,aACjC,eAAM,IAAI,EAAC,OAAO,KAAM,EAAE,SAAS,EAAE,IAAI,CAAC,KAAK,EAAa,GAAS,EACpE,IAAI,CAAC,cAAc,IAAI,CACtB,eAAM,KAAK,EAAC,4BAA4B,EAAC,IAAI,EAAC,YAAY,YAAE,IAAI,CAAC,cAAc,GAAQ,CACxF,EACD,eAAM,IAAI,EAAC,SAAS,GAAQ,EAC3B,IAAI,CAAC,SAAS,IAAI,CACjB,KAAC,mBAAmB,kBACN,IAAI,CAAC,eAAe,EAChC,KAAK,EAAE,IAAI,CAAC,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,kBACpD,IAAI,CAAC,WAAW,iBACjB,IAAI,CAAC,UAAU,EAC5B,GAAG,EAAE,IAAI,CAAC,SAAS,EACnB,OAAO,EAAE,IAAI,CAAC,cAAc,EAC5B,QAAQ,QACR,QAAQ,SACR,CACH,IACG,EACL,IAAI,CAAC,cAAc,IAAI,CACtB,cAAK,KAAK,EAAC,qBAAqB,EAAC,IAAI,EAAC,iBAAiB,YAAE,IAAI,CAAC,cAAc,GAAO,CACpF,EACD,eAAK,KAAK,EAAC,qBAAqB,aAC7B,IAAI,CAAC,YAAY,IAAI,eAAM,IAAI,EAAC,WAAW,EAAC,OAAO,EAAE,IAAI,CAAC,mBAAoC,GAAS,EACvG,IAAI,CAAC,aAAa,IAAI,eAAM,IAAI,EAAC,YAAY,EAAC,OAAO,EAAE,IAAI,CAAC,mBAAoC,GAAS,IACtG,IACL,CACJ,CAAC,CAAC,CAAC,CACF,8BACE,eAAK,KAAK,EAAC,wBAAwB,aACjC,eAAM,IAAI,EAAC,SAAS,GAAQ,EAC3B,IAAI,CAAC,cAAc,IAAI,CACtB,eAAM,KAAK,EAAC,4BAA4B,EAAC,IAAI,EAAC,YAAY,YAAE,IAAI,CAAC,cAAc,GAAQ,CACxF,EACA,IAAI,CAAC,SAAS,IAAI,CACjB,KAAC,mBAAmB,kBACN,IAAI,CAAC,eAAe,EAChC,KAAK,EAAE,IAAI,CAAC,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,kBACpD,IAAI,CAAC,WAAW,iBACjB,IAAI,CAAC,UAAU,EAC5B,GAAG,EAAE,IAAI,CAAC,SAAS,EACnB,OAAO,EAAE,IAAI,CAAC,cAAc,EAC5B,QAAQ,QACR,QAAQ,SACR,CACH,IACG,EACL,IAAI,CAAC,cAAc,IAAI,CACtB,cAAK,KAAK,EAAC,qBAAqB,EAAC,IAAI,EAAC,iBAAiB,YAAE,IAAI,CAAC,cAAc,GAAO,CACpF,EACD,eAAK,KAAK,EAAC,qBAAqB,aAC7B,IAAI,CAAC,YAAY,IAAI,eAAM,IAAI,EAAC,WAAW,EAAC,OAAO,EAAE,IAAI,CAAC,mBAAoC,GAAS,EACvG,IAAI,CAAC,aAAa,IAAI,eAAM,IAAI,EAAC,YAAY,EAAC,OAAO,EAAE,IAAI,CAAC,mBAAoC,GAAS,IACtG,IACL,CACJ,EACA,IAAI,CAAC,WAAW,IAAI,CACnB,cAAK,KAAK,EAAC,wCAAwC,YACjD,KAAC,UAAU,IACT,KAAK,EAAC,gCAAgC,EACtC,IAAI,EAAE,cAAc,CAAC,KAAK,EAC1B,MAAM,EAAE,gBAAgB,CAAC,QAAQ,EACjC,WAAW,EAAE,IAAI,CAAC,2BAA2B,EAC7C,OAAO,EAAE,IAAI,CAAC,uBAAwC,EACtD,QAAQ,EAAE,CAAC,CAAC,qBACK,IAAI,CAAC,0BAA0B,KAC3C,EAAE,MAAM,EAAE,aAAa,EAAa,EACzC,IAAI,EAAE,cAAc,GACpB,GACE,CACP,IACG,EACN,cAAK,KAAK,EAAC,QAAQ,EAAC,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,gBAAgB,YAAG,IAAI,CAAC,sBAAsB,GAAO,IACpF,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,OAAO,UAAU,gBAAgB;IACtC,OAAO,CACL,8BACG,IAAI,CAAC,YAAY,IAAI,CACpB,eACE,IAAI,EAAC,MAAM,EACX,QAAQ,EAAE,MAAM,CAAC,IAAI,CAAC,kBAAkB,CAAC,mBAC1B,IAAI,CAAC,aAAa,EACjC,KAAK,EAAE,IAAI,CAAC,SAAS,EACrB,IAAI,EAAE,IAAI,CAAC,QAAoB,kBACjB,IAAI,CAAC,gBAAgB,mBACpB,IAAI,CAAC,iBAAiB,mBACtB,IAAI,CAAC,iBAAiB,mBACtB,IAAI,CAAC,aAAa,IAAI,SAAS,kBAChC,IAAI,CAAC,YAAY,IAAI,SAAS,EAC5C,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,UAAU,EAAE,IAAI,CAAC,cAAc,EAC/B,OAAO,EAAE,IAAI,CAAC,eAAe,EAC7B,WAAW,EAAE,IAAI,CAAC,eAAe,EACjC,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,IAAI,CAAC,aAAa,KACxB,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,GAAG,EAAa,mBAC3C,IAAI,CAAC,QAAQ,aAC3B,IAAI,CAAC,eAAe,IAAI,CACvB,KAAC,YAAY,IACX,KAAK,EAAC,qBAAqB,EAC3B,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,CAAC,CAAC,EACZ,aAAa,EAAE,IAAI,CAAC,aAAa,qBAChB,YAAY,IAAI,CAAC,mBAAmB,EAAE,EACvD,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,QAAQ,EAAE,IAAI,CAAC,QAAQ,iBACX,MAAM,GAClB,CACH,EACA,IAAI,CAAC,cAAc,IAAI,CACtB,KAAC,eAAe,IACd,KAAK,EAAC,kBAAkB,EACxB,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,CAAC,CAAC,qBACK,SAAS,IAAI,CAAC,mBAAmB,EAAE,EACpD,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACvB,CACH,EACA,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,IACnB,CACP,EACA,IAAI,CAAC,iBAAiB,IAAI,CACzB,cACE,IAAI,EAAC,MAAM,EACX,IAAI,EAAE,IAAI,CAAC,QAAoB,mBAChB,IAAI,CAAC,QAAQ,EAC5B,KAAK,EAAE,IAAI,CAAC,SAAS,YACpB,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,GACnB,CACP,IACA,CACJ,CAAC;AACJ,CAAC","sourcesContent":["import type { AriaRole } from \"@ui5/webcomponents-base/dist/types.js\";\nimport type UDExListItem from \"./ListItem.js\";\nimport UDExCheckbox from \"./Checkbox.js\";\nimport UDExRadioButton from \"./RadioButton.js\";\nimport Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport UDExAvatar from \"./Avatar.js\";\nimport UDExStatusBadge from \"./StatusBadge.js\";\nimport UDExRatingIndicator from \"./RatingIndicator.js\";\nimport UDExButton from \"./Button.js\";\nimport UDExButtonSize from \"./types/ButtonSize.js\";\nimport UDExButtonDesign from \"./types/ButtonDesign.js\";\nimport slimArrowRight from \"@ui5/webcomponents-icons/dist/slim-arrow-right.js\";\n\nfunction ContentList(this: UDExListItem) {\n return (\n <div\n class=\"udex-list__content-wrap\"\n {...({ \"_id\": this._id } as object)}\n aria-labelledby={`${this._id}-invisibleText`}\n aria-label={this.accessibleListItemName}>\n {this.flag && (\n <div class=\"udex-list__flag-wrap\">\n <span class=\"udex-list__flag\" style={{ backgroundPosition: this.flagPosition }}></span>\n </div>\n )}\n {this.typeNumber && <span class=\"udex-list__number\">{this.numberOfItem}.</span>}\n {this.typeCircle && <span class=\"udex-list__circle\">•</span>}\n {this.typeIcon && (\n <Icon\n name={this._icon}\n class=\"udex-list__icon\"\n accessible-role=\"presentation\"\n aria-hidden=\"true\"\n part=\"icon\"\n />\n )}\n {this.image && (\n <UDExAvatar\n class=\"udex-list__avatar\"\n part=\"avatar\"\n shape={this.imageShape}\n size={this.imageSize}>\n {this.imageBadgeState && (\n <UDExStatusBadge\n slot=\"badge\"\n value-state={this.imageBadgeState}\n size={this.imageSize}\n />\n )}\n <img src={this.image} alt={this.imageAlt} />\n </UDExAvatar>\n )}\n <div class=\"udex-list__content\" part=\"content\">\n {this.label ? (\n <>\n <div class=\"udex-list__text-holder\">\n <span part=\"title\" {...({ innerHTML: this.label } as object)}></span>\n {this.supportingText && (\n <span class=\"udex-list__supporting-text\" part=\"supporting\">{this.supportingText}</span>\n )}\n <slot part=\"content\"></slot>\n {this.hasRating && (\n <UDExRatingIndicator\n aria-label={this.ratingAriaLabel}\n value={this.rating !== undefined ? Number(this.rating) : undefined}\n rating-count={this.ratingCount}\n total-count={this.totalCount}\n max={this.ratingMax}\n display={this._displayRating}\n disabled\n readonly\n />\n )}\n </div>\n {this.additionalText && (\n <div class=\"udex-list__add-text\" part=\"additional-text\">{this.additionalText}</div>\n )}\n <div class=\"udex-list__btn-wrap\">\n {this.hasFirstIcon && <slot name=\"firstIcon\" onClick={this._fireIconClickEvent as EventListener}></slot>}\n {this.hasSecondIcon && <slot name=\"secondIcon\" onClick={this._fireIconClickEvent as EventListener}></slot>}\n </div>\n </>\n ) : (\n <>\n <div class=\"udex-list__text-holder\">\n <slot part=\"content\"></slot>\n {this.supportingText && (\n <span class=\"udex-list__supporting-text\" part=\"supporting\">{this.supportingText}</span>\n )}\n {this.hasRating && (\n <UDExRatingIndicator\n aria-label={this.ratingAriaLabel}\n value={this.rating !== undefined ? Number(this.rating) : undefined}\n rating-count={this.ratingCount}\n total-count={this.totalCount}\n max={this.ratingMax}\n display={this._displayRating}\n disabled\n readonly\n />\n )}\n </div>\n {this.additionalText && (\n <div class=\"udex-list__add-text\" part=\"additional-text\">{this.additionalText}</div>\n )}\n <div class=\"udex-list__btn-wrap\">\n {this.hasFirstIcon && <slot name=\"firstIcon\" onClick={this._fireIconClickEvent as EventListener}></slot>}\n {this.hasSecondIcon && <slot name=\"secondIcon\" onClick={this._fireIconClickEvent as EventListener}></slot>}\n </div>\n </>\n )}\n {this.collapsible && (\n <div class=\"udex-list__group-heading__icon-wrapper\">\n <UDExButton\n class=\"udex-list__group-heading__icon\"\n size={UDExButtonSize.Small}\n design={UDExButtonDesign.Tertiary}\n onMouseDown={this.handleCollapseIconMouseDown}\n onClick={this.handleCollapseIconClick as EventListener}\n tabindex={-1}\n accessible-name={this.expandButtonAccessibleName}\n {...({ \"mode\": \"Interactive\" } as object)}\n icon={slimArrowRight}\n />\n </div>\n )}\n </div>\n <div class=\"hidden\" id={`${this._id}-invisibleText`}>{this.accessibleListItemName}</div>\n </div>\n );\n}\n\nexport default function ListItemTemplate(this: UDExListItem) {\n return (\n <>\n {this.modeSelected && (\n <div\n part=\"item\"\n tabIndex={Number(this._effectiveTabIndex)}\n aria-disabled={this._ariaDisabled}\n class={this.className}\n role={this.roleItem as AriaRole}\n aria-checked={this.ariaCheckedValue}\n aria-selected={this.ariaSelectedValue}\n aria-expanded={this.ariaExpandedValue}\n aria-posinset={this._ariaPosInSet || undefined}\n aria-setsize={this._ariaSetSize || undefined}\n onFocusIn={this.handleFocusIn}\n onFocusOut={this.handleFocusOut}\n onClick={this.handleItemClick}\n onMouseDown={this.handleMouseDown}\n onMouseUp={this.handleMouseUp}\n onKeyUp={this.handleKeyUp}\n onKeyDown={this.handleKeyDown}\n {...({ divider: this.divider, \"_id\": this._id } as object)}\n data-selected={this.selected}>\n {this.modeMultiSelect && (\n <UDExCheckbox\n class=\"udex-list__checkbox\"\n part=\"checkbox\"\n tabindex={-1}\n indeterminate={this.indeterminate}\n accessible-name={`checkbox ${this.stateAccessibleName}`}\n checked={this.selected}\n disabled={this.disabled}\n aria-hidden=\"true\"\n />\n )}\n {this.modeRadioGroup && (\n <UDExRadioButton\n class=\"udex-list__radio\"\n part=\"radio\"\n tabindex={-1}\n accessible-name={`radio ${this.stateAccessibleName}`}\n checked={this.selected}\n disabled={this.disabled}\n />\n )}\n {ContentList.call(this)}\n </div>\n )}\n {this.modeSingleContent && (\n <div\n part=\"item\"\n role={this.roleItem as AriaRole}\n aria-selected={this.selected}\n class={this.className}>\n {ContentList.call(this)}\n </div>\n )}\n </>\n );\n}\n"]}
|