@sapudex/web-components 2.62.0 → 2.63.1
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/cypress/specs/FilterMenu.cy.tsx +43 -22
- package/cypress/specs/FilterMenuAccessibility.cy.tsx +1017 -0
- package/cypress/specs/ListItem.cy.tsx +234 -6
- package/cypress/specs/MastheadCountrySelector.cy.tsx +177 -0
- package/cypress/specs/SelectBox.cy.tsx +7 -2
- package/cypress/specs/SelectBoxAccessibility.cy.tsx +5 -5
- package/cypress/specs/SideNavigation.cy.tsx +49 -0
- package/cypress/specs/SideNavigationMobile.cy.tsx +69 -0
- package/cypress/support/component-imports.instrumented.ts +4 -0
- package/cypress/support/component-imports.src.ts +4 -0
- package/dist/AccordionItemTemplate.js +1 -1
- package/dist/AccordionItemTemplate.js.map +1 -1
- package/dist/FilterMenu.d.ts +2 -2
- package/dist/FilterMenu.js +6 -4
- package/dist/FilterMenu.js.map +1 -1
- package/dist/FilterMenuTemplate.js +2 -2
- package/dist/FilterMenuTemplate.js.map +1 -1
- package/dist/List.d.ts +1 -8
- package/dist/List.js +4 -12
- package/dist/List.js.map +1 -1
- package/dist/ListGroupHeaderTemplate.js +8 -7
- package/dist/ListGroupHeaderTemplate.js.map +1 -1
- package/dist/ListItem.js +12 -1
- package/dist/ListItem.js.map +1 -1
- package/dist/ListItemBase.d.ts +5 -0
- package/dist/ListItemBase.js +3 -0
- package/dist/ListItemBase.js.map +1 -1
- package/dist/ListItemTemplate.js +2 -2
- package/dist/ListItemTemplate.js.map +1 -1
- package/dist/ListSelectAllTemplate.js +1 -1
- package/dist/ListSelectAllTemplate.js.map +1 -1
- package/dist/MastheadCountrySelector.d.ts +14 -0
- package/dist/MastheadCountrySelector.js +6 -0
- package/dist/MastheadCountrySelector.js.map +1 -1
- package/dist/MastheadCountrySelectorTemplate.js +1 -1
- package/dist/MastheadCountrySelectorTemplate.js.map +1 -1
- package/dist/MessageStrip.d.ts +1 -0
- package/dist/MessageStrip.js +6 -0
- package/dist/MessageStrip.js.map +1 -1
- package/dist/SearchTemplate.js +1 -1
- package/dist/SearchTemplate.js.map +1 -1
- package/dist/SearchableListBaseTemplate.js +8 -10
- package/dist/SearchableListBaseTemplate.js.map +1 -1
- package/dist/SideNavigation.d.ts +9 -0
- package/dist/SideNavigation.js +9 -0
- package/dist/SideNavigation.js.map +1 -1
- package/dist/SideNavigationMobile.d.ts +19 -0
- package/dist/SideNavigationMobile.js +32 -1
- package/dist/SideNavigationMobile.js.map +1 -1
- package/dist/SideNavigationMobileTemplate.js +1 -2
- package/dist/SideNavigationMobileTemplate.js.map +1 -1
- package/dist/SideNavigationSubItem.d.ts +4 -1
- package/dist/SideNavigationSubItem.js +20 -9
- package/dist/SideNavigationSubItem.js.map +1 -1
- package/dist/SideNavigationSubItemTemplate.js +1 -1
- package/dist/SideNavigationSubItemTemplate.js.map +1 -1
- package/dist/SideNavigationTemplate.d.ts +2 -0
- package/dist/SideNavigationTemplate.js +6 -0
- package/dist/SideNavigationTemplate.js.map +1 -0
- package/dist/assets/{InputSuggestions-BPKrPqPb.js → InputSuggestions-DSPGFWZq.js} +2 -2
- package/dist/assets/{ListItemStandardExpandableTextTemplate-DkdOcCxC.js → ListItemStandardExpandableTextTemplate-hSNo3Xyr.js} +2 -2
- package/dist/assets/{bundle.esm-17Yt5gDr.js → bundle.esm-qSu0eWiH.js} +237 -238
- package/dist/assets/messagebundle_ar-22dGHdkl.js +1 -0
- package/dist/assets/messagebundle_ar-DbxuUDUB.js +1 -0
- package/dist/assets/messagebundle_bg-CaaOz5e4.js +1 -0
- package/dist/assets/messagebundle_bg-QOUvq6-8.js +1 -0
- package/dist/assets/messagebundle_ca-D-8eSg1w.js +1 -0
- package/dist/assets/messagebundle_ca-jsUpFfNJ.js +1 -0
- package/dist/assets/messagebundle_cnr-BdSolJRo.js +1 -0
- package/dist/assets/messagebundle_cnr-rtr9Ox4O.js +1 -0
- package/dist/assets/messagebundle_cs-CbM7zJ23.js +1 -0
- package/dist/assets/messagebundle_cy-D5E7e9o1.js +1 -0
- package/dist/assets/messagebundle_cy-hajQLyoj.js +1 -0
- package/dist/assets/messagebundle_da-C3PD-hWQ.js +1 -0
- package/dist/assets/messagebundle_da-DFzvQYW2.js +1 -0
- package/dist/assets/messagebundle_de-C106E9io.js +1 -0
- package/dist/assets/messagebundle_de-C36z5lgV.js +1 -0
- package/dist/assets/messagebundle_el-BLHqa1_J.js +1 -0
- package/dist/assets/messagebundle_el-k8W9FVQI.js +1 -0
- package/dist/assets/messagebundle_en-ClXds397.js +1 -0
- package/dist/assets/messagebundle_en-DgPtAFO8.js +1 -0
- package/dist/assets/messagebundle_en_GB-DxulA9qE.js +1 -0
- package/dist/assets/messagebundle_en_GB-LxAIZigF.js +1 -0
- package/dist/assets/{messagebundle_en_US_sappsd-Se8GgI58.js → messagebundle_en_US_sappsd-TZz2y4pV.js} +1 -1
- package/dist/assets/messagebundle_en_US_sappsd-oE0A2op2.js +1 -0
- package/dist/assets/messagebundle_en_US_saprigi-C6FsbpF8.js +1 -0
- package/dist/assets/{messagebundle_en_US_saprigi-CbfvaHUL.js → messagebundle_en_US_saprigi-CkPhuOLS.js} +1 -1
- package/dist/assets/messagebundle_en_US_saptrc-CFSYKuS7.js +1 -0
- package/dist/assets/messagebundle_en_US_saptrc-CNZe1wPP.js +1 -0
- package/dist/assets/messagebundle_es-C3ijAvKG.js +1 -0
- package/dist/assets/messagebundle_es-wi4P-8Bo.js +1 -0
- package/dist/assets/messagebundle_es_MX-JEoOD2AD.js +1 -0
- package/dist/assets/messagebundle_es_MX-qDQ65ei9.js +1 -0
- package/dist/assets/messagebundle_et-C3wgDmm9.js +1 -0
- package/dist/assets/messagebundle_et-D4r4iubd.js +1 -0
- package/dist/assets/messagebundle_fi-BjyQcbRb.js +1 -0
- package/dist/assets/messagebundle_fi-CivJKH9k.js +1 -0
- package/dist/assets/messagebundle_fr-BxDSBfD5.js +1 -0
- package/dist/assets/messagebundle_fr-JN2VAe-b.js +1 -0
- package/dist/assets/messagebundle_fr_CA-FkrcsWH5.js +1 -0
- package/dist/assets/messagebundle_fr_CA-phd0XOeR.js +1 -0
- package/dist/assets/messagebundle_hi-B_pehoTp.js +1 -0
- package/dist/assets/messagebundle_hi-CVOoC3dA.js +1 -0
- package/dist/assets/messagebundle_hr-BYS-ya62.js +1 -0
- package/dist/assets/messagebundle_hr-DHuCJjK8.js +1 -0
- package/dist/assets/messagebundle_hu-Crn0Y1hl.js +1 -0
- package/dist/assets/messagebundle_hu-DJL3QHT4.js +1 -0
- package/dist/assets/messagebundle_id-BJEG-7Up.js +1 -0
- package/dist/assets/messagebundle_id-CgbG2IVb.js +1 -0
- package/dist/assets/messagebundle_it-B-E3gO1k.js +1 -0
- package/dist/assets/messagebundle_it-DHwy0JuE.js +1 -0
- package/dist/assets/messagebundle_iw-BFfL9nZy.js +1 -0
- package/dist/assets/messagebundle_iw-BgyHu_0a.js +1 -0
- package/dist/assets/messagebundle_ja-BDNEwBMO.js +1 -0
- package/dist/assets/messagebundle_ja-eyoqeb4r.js +1 -0
- package/dist/assets/messagebundle_kk-BA_1qhYv.js +1 -0
- package/dist/assets/messagebundle_kk-CTAXqbPN.js +1 -0
- package/dist/assets/messagebundle_ko-C1tsjQMn.js +1 -0
- package/dist/assets/messagebundle_ko-CkiNi7iV.js +1 -0
- package/dist/assets/messagebundle_lt-Dp0c8r7p.js +1 -0
- package/dist/assets/{messagebundle_lt-BGK5mpcm.js → messagebundle_lt-bNum-ekg.js} +1 -1
- package/dist/assets/messagebundle_lv-B9UWTGX9.js +1 -0
- package/dist/assets/messagebundle_lv-D02PBhtR.js +1 -0
- package/dist/assets/messagebundle_mk--Xt_Ciey.js +1 -0
- package/dist/assets/messagebundle_mk-D6s2Tr95.js +1 -0
- package/dist/assets/messagebundle_ms-BAqsvtp5.js +1 -0
- package/dist/assets/messagebundle_ms-BobJaFPp.js +1 -0
- package/dist/assets/messagebundle_nl-BJCykHj1.js +1 -0
- package/dist/assets/messagebundle_nl-Dj7LaMyb.js +1 -0
- package/dist/assets/messagebundle_no-CR_uQXUz.js +1 -0
- package/dist/assets/messagebundle_no-CnwJbEW8.js +1 -0
- package/dist/assets/messagebundle_pl-D6FQ-6EC.js +1 -0
- package/dist/assets/messagebundle_pl-eJC2NE6N.js +1 -0
- package/dist/assets/messagebundle_pt-CbdPbTKR.js +1 -0
- package/dist/assets/messagebundle_pt-n8LcOyWG.js +1 -0
- package/dist/assets/messagebundle_pt_PT-B17ziKL9.js +1 -0
- package/dist/assets/messagebundle_pt_PT-BVpS4lrC.js +1 -0
- package/dist/assets/messagebundle_ro-C0jrNva4.js +1 -0
- package/dist/assets/messagebundle_ro-ixITTbJt.js +1 -0
- package/dist/assets/messagebundle_ru-Bh6RMNe2.js +1 -0
- package/dist/assets/messagebundle_ru-Dbxms1Xm.js +1 -0
- package/dist/assets/messagebundle_sh-CMDXUWge.js +1 -0
- package/dist/assets/messagebundle_sh-Cb-sVI_0.js +1 -0
- package/dist/assets/messagebundle_sk-DZkkgRSd.js +1 -0
- package/dist/assets/{messagebundle_sk-CXOF1RuF.js → messagebundle_sk-Dqb_XwMg.js} +1 -1
- package/dist/assets/messagebundle_sl-DIl-2Lb1.js +1 -0
- package/dist/assets/messagebundle_sl-Dx6UWXni.js +1 -0
- package/dist/assets/messagebundle_sr-DstlyDjZ.js +1 -0
- package/dist/assets/messagebundle_sr-yQWBd9jR.js +1 -0
- package/dist/assets/messagebundle_sv-Dr2hDyEO.js +1 -0
- package/dist/assets/messagebundle_sv-iHKWgaRg.js +1 -0
- package/dist/assets/messagebundle_th-DbWfCb5y.js +1 -0
- package/dist/assets/messagebundle_th-yLU2SE6L.js +1 -0
- package/dist/assets/messagebundle_tr-CIoGg6uY.js +1 -0
- package/dist/assets/messagebundle_tr-lAQvvdUi.js +1 -0
- package/dist/assets/messagebundle_uk-DIBItAKu.js +1 -0
- package/dist/assets/messagebundle_uk-j_sqGY4D.js +1 -0
- package/dist/assets/messagebundle_vi-C40OW2eC.js +1 -0
- package/dist/assets/messagebundle_vi-xWTpoKPI.js +1 -0
- package/dist/assets/messagebundle_zh_CN-CmeOlVfl.js +1 -0
- package/dist/assets/messagebundle_zh_CN-U8Z0kuQb.js +1 -0
- package/dist/assets/messagebundle_zh_TW-B_1_vc8O.js +1 -0
- package/dist/assets/messagebundle_zh_TW-hwHN6ElU.js +1 -0
- package/dist/assets/{parameters-bundle.css-Cv89y49I.js → parameters-bundle.css-2ZsUlBNO.js} +299 -151
- package/dist/assets/parameters-bundle.css-31Bw5XOG.js +2 -0
- package/dist/assets/parameters-bundle.css-BJp4ZvSQ.js +2 -0
- package/dist/assets/{parameters-bundle.css-vNsSPPU5.js → parameters-bundle.css-BKlkVfkE.js} +742 -494
- package/dist/assets/parameters-bundle.css-BMOU75LU.js +2 -0
- package/dist/assets/parameters-bundle.css-BZF5sWSb.js +1 -0
- package/dist/assets/{parameters-bundle.css-DmEWEk0u.js → parameters-bundle.css-Bf1GOISM.js} +786 -513
- package/dist/assets/parameters-bundle.css-BpWLGMCI.js +2 -0
- package/dist/assets/parameters-bundle.css-BsoxE2UF.js +2 -0
- package/dist/assets/parameters-bundle.css-CAhrGUcA.js +2 -0
- package/dist/assets/{parameters-bundle.css-C3eDVARm.js → parameters-bundle.css-CDJt5bvS.js} +176 -89
- package/dist/assets/parameters-bundle.css-CIr3BQBD.js +2 -0
- package/dist/assets/parameters-bundle.css-CVUmNgQM.js +2 -0
- package/dist/assets/parameters-bundle.css-C_pu3Dce.js +2 -0
- package/dist/assets/parameters-bundle.css-ChtqHIDX.js +2 -0
- package/dist/assets/parameters-bundle.css-CvaMQVtq.js +1 -0
- package/dist/assets/parameters-bundle.css-Cwz89dEH.js +2 -0
- package/dist/assets/parameters-bundle.css-CyCovTbK.js +2 -0
- package/dist/assets/parameters-bundle.css-Cyf5K2-Q.js +2 -0
- package/dist/assets/parameters-bundle.css-DdDLbfHl.js +2 -0
- package/dist/assets/{parameters-bundle.css-C5V2Zp_F.js → parameters-bundle.css-Dfz9lgd6.js} +131 -95
- package/dist/assets/{parameters-bundle.css-K-MvKimD.js → parameters-bundle.css-DjW0INFD.js} +139 -88
- package/dist/assets/parameters-bundle.css-JyFiyY-_.js +2 -0
- package/dist/assets/parameters-bundle.css-tf-z7jv9.js +2 -0
- package/dist/css/themes/MastheadShell.css +1 -1
- package/dist/css/themes/PromoTile.css +1 -1
- package/dist/css/themes/SideNavigation.css +1 -1
- package/dist/css/themes/SideNavigationMobile.css +1 -1
- package/dist/css/themes/Slider.css +1 -1
- package/dist/css/themes/sap_fiori_3/parameters-bundle.css +0 -1
- package/dist/css/themes/sap_glow/parameters-bundle.css +0 -1
- package/dist/css/themes/sap_horizon/parameters-bundle.css +0 -1
- package/dist/custom-elements-internal.json +1436 -0
- package/dist/custom-elements.json +1490 -21
- package/dist/generated/assets/themes/sap_fiori_3/parameters-bundle.css.json +1 -1
- package/dist/generated/assets/themes/sap_glow/parameters-bundle.css.json +1 -1
- package/dist/generated/assets/themes/sap_horizon/parameters-bundle.css.json +1 -1
- package/dist/generated/themes/MastheadShell.css.d.ts +1 -1
- package/dist/generated/themes/MastheadShell.css.js +1 -1
- package/dist/generated/themes/MastheadShell.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/SideNavigation.css.d.ts +1 -1
- package/dist/generated/themes/SideNavigation.css.js +1 -1
- package/dist/generated/themes/SideNavigation.css.js.map +1 -1
- package/dist/generated/themes/SideNavigationMobile.css.d.ts +1 -1
- package/dist/generated/themes/SideNavigationMobile.css.js +1 -1
- package/dist/generated/themes/SideNavigationMobile.css.js.map +1 -1
- package/dist/generated/themes/Slider.css.d.ts +1 -1
- package/dist/generated/themes/Slider.css.js +1 -1
- package/dist/generated/themes/Slider.css.js.map +1 -1
- package/dist/generated/themes/sap_fiori_3/parameters-bundle.css.d.ts +1 -1
- package/dist/generated/themes/sap_fiori_3/parameters-bundle.css.js +1 -1
- package/dist/generated/themes/sap_fiori_3/parameters-bundle.css.js.map +1 -1
- package/dist/generated/themes/sap_glow/parameters-bundle.css.d.ts +1 -1
- package/dist/generated/themes/sap_glow/parameters-bundle.css.js +1 -1
- package/dist/generated/themes/sap_glow/parameters-bundle.css.js.map +1 -1
- package/dist/generated/themes/sap_horizon/parameters-bundle.css.d.ts +1 -1
- package/dist/generated/themes/sap_horizon/parameters-bundle.css.js +1 -1
- package/dist/generated/themes/sap_horizon/parameters-bundle.css.js.map +1 -1
- package/dist/vscode.html-custom-data.json +12 -2
- package/dist/web-types.json +33 -3
- package/package.json +8 -8
- package/src/AccordionItemTemplate.tsx +1 -0
- package/src/FilterMenu.ts +6 -4
- package/src/FilterMenuTemplate.tsx +12 -8
- package/src/List.ts +4 -12
- package/src/ListGroupHeaderTemplate.tsx +9 -3
- package/src/ListItem.ts +12 -1
- package/src/ListItemBase.ts +7 -0
- package/src/ListItemTemplate.tsx +6 -1
- package/src/ListSelectAllTemplate.tsx +11 -12
- package/src/MastheadCountrySelector.ts +18 -0
- package/src/MastheadCountrySelectorTemplate.tsx +2 -0
- package/src/MessageStrip.ts +7 -0
- package/src/SearchTemplate.tsx +3 -1
- package/src/SearchableListBaseTemplate.tsx +12 -12
- package/src/SideNavigation.ts +17 -0
- package/src/SideNavigationMobile.ts +52 -0
- package/src/SideNavigationMobileTemplate.tsx +3 -5
- package/src/SideNavigationSubItem.ts +17 -5
- package/src/SideNavigationSubItemTemplate.tsx +3 -1
- package/src/SideNavigationTemplate.tsx +17 -0
- package/src/generated/themes/MastheadShell.css.ts +1 -1
- package/src/generated/themes/PromoTile.css.ts +1 -1
- package/src/generated/themes/SideNavigation.css.ts +1 -1
- package/src/generated/themes/SideNavigationMobile.css.ts +1 -1
- package/src/generated/themes/Slider.css.ts +1 -1
- package/src/generated/themes/sap_fiori_3/parameters-bundle.css.ts +1 -1
- package/src/generated/themes/sap_glow/parameters-bundle.css.ts +1 -1
- package/src/generated/themes/sap_horizon/parameters-bundle.css.ts +1 -1
- package/src/themes/MastheadShell.css +14 -2
- package/src/themes/PromoTile.css +5 -0
- package/src/themes/SideNavigation.css +43 -8
- package/src/themes/SideNavigationMobile.css +1 -0
- package/src/themes/Slider.css +25 -11
- package/dist/assets/messagebundle_ar-C3EXytoC.js +0 -1
- package/dist/assets/messagebundle_ar-DmZrrjEF.js +0 -1
- package/dist/assets/messagebundle_bg-BaZ97Q_b.js +0 -1
- package/dist/assets/messagebundle_bg-CgU7GPvK.js +0 -1
- package/dist/assets/messagebundle_ca-BwjVUbUA.js +0 -1
- package/dist/assets/messagebundle_ca-YiUGbO_8.js +0 -1
- package/dist/assets/messagebundle_cnr-CN2hPZIN.js +0 -1
- package/dist/assets/messagebundle_cnr-zdEdPJvc.js +0 -1
- package/dist/assets/messagebundle_cs-CGbnEjza.js +0 -1
- package/dist/assets/messagebundle_cy-BF0YH9Iz.js +0 -1
- package/dist/assets/messagebundle_cy-CUiGsjO6.js +0 -1
- package/dist/assets/messagebundle_da-CWKLQJiq.js +0 -1
- package/dist/assets/messagebundle_da-bTkr4pUc.js +0 -1
- package/dist/assets/messagebundle_de-BmnClk4G.js +0 -1
- package/dist/assets/messagebundle_de-vB6qhgvG.js +0 -1
- package/dist/assets/messagebundle_el-DKdItEgW.js +0 -1
- package/dist/assets/messagebundle_el-Gv1Ly8aj.js +0 -1
- package/dist/assets/messagebundle_en-DbKo-Dkl.js +0 -1
- package/dist/assets/messagebundle_en-DcV886MF.js +0 -1
- package/dist/assets/messagebundle_en_GB-Be93_Z4H.js +0 -1
- package/dist/assets/messagebundle_en_GB-CFh7e8hQ.js +0 -1
- package/dist/assets/messagebundle_en_US_sappsd-HCarC-Yr.js +0 -1
- package/dist/assets/messagebundle_en_US_saprigi-CCHFk7YZ.js +0 -1
- package/dist/assets/messagebundle_en_US_saptrc-B8AIRzlo.js +0 -1
- package/dist/assets/messagebundle_en_US_saptrc-yJ3PcdEm.js +0 -1
- package/dist/assets/messagebundle_es-BH-a8BxO.js +0 -1
- package/dist/assets/messagebundle_es-Dt93wbGV.js +0 -1
- package/dist/assets/messagebundle_es_MX-BedlYlF3.js +0 -1
- package/dist/assets/messagebundle_es_MX-COPqooo9.js +0 -1
- package/dist/assets/messagebundle_et-BsYgDw46.js +0 -1
- package/dist/assets/messagebundle_et-UwpqUE-p.js +0 -1
- package/dist/assets/messagebundle_fi-BN3UWEz0.js +0 -1
- package/dist/assets/messagebundle_fi-Cwf7Puui.js +0 -1
- package/dist/assets/messagebundle_fr-43w09LAE.js +0 -1
- package/dist/assets/messagebundle_fr-CVRaf9_H.js +0 -1
- package/dist/assets/messagebundle_fr_CA-BM04X6xU.js +0 -1
- package/dist/assets/messagebundle_fr_CA-CdnVYumi.js +0 -1
- package/dist/assets/messagebundle_hi-DfeonbAH.js +0 -1
- package/dist/assets/messagebundle_hi-JRJlP9Uh.js +0 -1
- package/dist/assets/messagebundle_hr-CKOnn34q.js +0 -1
- package/dist/assets/messagebundle_hr-CbyIBlH3.js +0 -1
- package/dist/assets/messagebundle_hu-DF1gQudE.js +0 -1
- package/dist/assets/messagebundle_hu-D_IQ9kTy.js +0 -1
- package/dist/assets/messagebundle_id-B0K1usj4.js +0 -1
- package/dist/assets/messagebundle_id-gDJYoaGq.js +0 -1
- package/dist/assets/messagebundle_it-B80_R2Ih.js +0 -1
- package/dist/assets/messagebundle_it-CVqU4g6t.js +0 -1
- package/dist/assets/messagebundle_iw-BoelOIS4.js +0 -1
- package/dist/assets/messagebundle_iw-iMDtLxaa.js +0 -1
- package/dist/assets/messagebundle_ja-BlRbv4vb.js +0 -1
- package/dist/assets/messagebundle_ja-BrDH-19-.js +0 -1
- package/dist/assets/messagebundle_kk-C7VPek1-.js +0 -1
- package/dist/assets/messagebundle_kk-DhAT_bim.js +0 -1
- package/dist/assets/messagebundle_ko-CIqP8x6n.js +0 -1
- package/dist/assets/messagebundle_ko-DgD6uyZ5.js +0 -1
- package/dist/assets/messagebundle_lt-BV0kKrY0.js +0 -1
- package/dist/assets/messagebundle_lv-5IcjoxWD.js +0 -1
- package/dist/assets/messagebundle_lv-DDBi7iKe.js +0 -1
- package/dist/assets/messagebundle_mk-BUrn04sZ.js +0 -1
- package/dist/assets/messagebundle_mk-P5veRdg2.js +0 -1
- package/dist/assets/messagebundle_ms-9VDLR5en.js +0 -1
- package/dist/assets/messagebundle_ms-CB8sQUg2.js +0 -1
- package/dist/assets/messagebundle_nl-BaAgPO7h.js +0 -1
- package/dist/assets/messagebundle_nl-f1Up3dB9.js +0 -1
- package/dist/assets/messagebundle_no-C-_ldp7o.js +0 -1
- package/dist/assets/messagebundle_no-DRSqWQ-C.js +0 -1
- package/dist/assets/messagebundle_pl-BQoPaokq.js +0 -1
- package/dist/assets/messagebundle_pl-DBO1atMe.js +0 -1
- package/dist/assets/messagebundle_pt-BNEglYxa.js +0 -1
- package/dist/assets/messagebundle_pt-DgAMHmW-.js +0 -1
- package/dist/assets/messagebundle_pt_PT-BtYzp9KB.js +0 -1
- package/dist/assets/messagebundle_pt_PT-D1Ef8kUU.js +0 -1
- package/dist/assets/messagebundle_ro-CuDPp2fe.js +0 -1
- package/dist/assets/messagebundle_ro-D591wJ6f.js +0 -1
- package/dist/assets/messagebundle_ru-D0NridWi.js +0 -1
- package/dist/assets/messagebundle_ru-I8YLCfrn.js +0 -1
- package/dist/assets/messagebundle_sh-BswdbSRi.js +0 -1
- package/dist/assets/messagebundle_sh-Dw2y_oct.js +0 -1
- package/dist/assets/messagebundle_sk-BG4S4ZVk.js +0 -1
- package/dist/assets/messagebundle_sl-CAnJO_8X.js +0 -1
- package/dist/assets/messagebundle_sl-kpVWxIp_.js +0 -1
- package/dist/assets/messagebundle_sr-BTWvO8VQ.js +0 -1
- package/dist/assets/messagebundle_sr-VJmRSdj4.js +0 -1
- package/dist/assets/messagebundle_sv-B-RCgnW_.js +0 -1
- package/dist/assets/messagebundle_sv-Bd4wCcDb.js +0 -1
- package/dist/assets/messagebundle_th-CMHmLdI3.js +0 -1
- package/dist/assets/messagebundle_th-CZ1imsCy.js +0 -1
- package/dist/assets/messagebundle_tr-BfWAYIdW.js +0 -1
- package/dist/assets/messagebundle_tr-D-BnBirv.js +0 -1
- package/dist/assets/messagebundle_uk-DhxIThVl.js +0 -1
- package/dist/assets/messagebundle_uk-HU8hI0yj.js +0 -1
- package/dist/assets/messagebundle_vi-BUTqUKd4.js +0 -1
- package/dist/assets/messagebundle_vi-D1El4_Wj.js +0 -1
- package/dist/assets/messagebundle_zh_CN-Dt0azUea.js +0 -1
- package/dist/assets/messagebundle_zh_CN-Ofgx2uXY.js +0 -1
- package/dist/assets/messagebundle_zh_TW-5lv7yYS1.js +0 -1
- package/dist/assets/messagebundle_zh_TW-LSErOAsd.js +0 -1
- package/dist/assets/parameters-bundle.css-B68EyCuR.js +0 -278
- package/dist/assets/parameters-bundle.css-BkJSEiFx.js +0 -278
- package/dist/assets/parameters-bundle.css-CI4HNvFw.js +0 -1
- package/dist/assets/parameters-bundle.css-COeynv6D.js +0 -277
- package/dist/assets/parameters-bundle.css-CRa5DITh.js +0 -1
- package/dist/assets/parameters-bundle.css-CnIzAMdG.js +0 -3
- package/dist/assets/parameters-bundle.css-CsV5qbZp.js +0 -3
- package/dist/assets/parameters-bundle.css-DCvHNL3s.js +0 -3
- package/dist/assets/parameters-bundle.css-DK40uKOQ.js +0 -3
- package/dist/assets/parameters-bundle.css-DMfTAqMv.js +0 -2
- package/dist/assets/parameters-bundle.css-DO35k9r0.js +0 -2
- package/dist/assets/parameters-bundle.css-Df7wtRW4.js +0 -2
- package/dist/assets/parameters-bundle.css-DvAfqdlT.js +0 -3
- package/dist/assets/parameters-bundle.css-KoXGNyLG.js +0 -3
- package/dist/assets/parameters-bundle.css-P_M_rm9z.js +0 -3
- package/dist/assets/parameters-bundle.css-UJIxXHL5.js +0 -2
- package/dist/assets/parameters-bundle.css-co26r5Nz.js +0 -3
- package/dist/assets/parameters-bundle.css-uT62L0va.js +0 -3
|
@@ -207,6 +207,24 @@ class UDExMastheadCountrySelector extends UI5Element {
|
|
|
207
207
|
@property()
|
|
208
208
|
languageVoice!: string;
|
|
209
209
|
|
|
210
|
+
/**
|
|
211
|
+
* Defines the accessible ARIA name of the search field.
|
|
212
|
+
*
|
|
213
|
+
* @default ""
|
|
214
|
+
* @public
|
|
215
|
+
*/
|
|
216
|
+
@property()
|
|
217
|
+
accessibleNameSearch!: string;
|
|
218
|
+
|
|
219
|
+
/**
|
|
220
|
+
* Defines the accessible ARIA name of the search reset icon.
|
|
221
|
+
*
|
|
222
|
+
* @default ""
|
|
223
|
+
* @public
|
|
224
|
+
*/
|
|
225
|
+
@property()
|
|
226
|
+
accessibleNameSearchResetIcon!: string;
|
|
227
|
+
|
|
210
228
|
/**
|
|
211
229
|
* Defines the country list of the region is opened
|
|
212
230
|
*
|
|
@@ -35,6 +35,8 @@ function activeRegionView(this: UDExMastheadCountrySelector) {
|
|
|
35
35
|
onui5-submit-search-value={this.handleSearch}
|
|
36
36
|
language-voice={this.languageVoice}
|
|
37
37
|
label={this.searchLabel}
|
|
38
|
+
accessible-name={this.accessibleNameSearch}
|
|
39
|
+
accessible-name-reset-icon={this.accessibleNameSearchResetIcon}
|
|
38
40
|
mode={this.homeSearchMode}
|
|
39
41
|
show-voice-button={this.showSearchVoiceButton}
|
|
40
42
|
non-interactive-submit-button={true}
|
package/src/MessageStrip.ts
CHANGED
|
@@ -224,6 +224,13 @@ class UDExMessageStrip extends MessageStrip {
|
|
|
224
224
|
return this.isDecorativeDesign || this.isNotIconStatusType;
|
|
225
225
|
}
|
|
226
226
|
|
|
227
|
+
get _closableText(): string {
|
|
228
|
+
if (!MessageStrip.i18nBundle) {
|
|
229
|
+
return "";
|
|
230
|
+
}
|
|
231
|
+
return super._closableText;
|
|
232
|
+
}
|
|
233
|
+
|
|
227
234
|
get hiddenText(): string {
|
|
228
235
|
const statusText = this.isDecorativeDesign ? (this.textStatusTypeMapping()[this.design] ?? "") : this.textStatusTypeMapping()[this.design];
|
|
229
236
|
return `${statusText} ${this.hideCloseButton ? "" : this._closableText}`.trim();
|
package/src/SearchTemplate.tsx
CHANGED
|
@@ -49,12 +49,12 @@ export default function SearchTemplate(this: UDExSearch) {
|
|
|
49
49
|
size={UDExButtonSize.Small}
|
|
50
50
|
design={UDExButtonDesign.Default}
|
|
51
51
|
tooltip={this.tooltipInfo.tooltipResetButton}
|
|
52
|
+
accessible-name={this.accInfo.accessibleNameResetIcon}
|
|
52
53
|
onClick={this.onReset as any}
|
|
53
54
|
onKeyDown={this.handleKeyDownReset}
|
|
54
55
|
>
|
|
55
56
|
<UI5Icon
|
|
56
57
|
class="udex-search__button-icon"
|
|
57
|
-
accessible-name={this.accInfo.accessibleNameResetIcon}
|
|
58
58
|
accessible-role="presentation"
|
|
59
59
|
name={decline}
|
|
60
60
|
></UI5Icon>
|
|
@@ -111,6 +111,7 @@ export default function SearchTemplate(this: UDExSearch) {
|
|
|
111
111
|
design={UDExButtonDesign.Default}
|
|
112
112
|
icon={search}
|
|
113
113
|
size={UDExButtonSize.Small}
|
|
114
|
+
accessible-name={this.accInfo.accessibleNameSearchIcon}
|
|
114
115
|
tooltip={this.tooltipInfo.tooltipSubmitButton}
|
|
115
116
|
onClick={this.onSubmit as any}
|
|
116
117
|
></UDExButton>
|
|
@@ -127,6 +128,7 @@ export default function SearchTemplate(this: UDExSearch) {
|
|
|
127
128
|
icon={search}
|
|
128
129
|
tooltip={this.tooltipInfo.tooltipSubmitButton}
|
|
129
130
|
onClick={this.onSubmit as any}
|
|
131
|
+
accessible-name={this.accInfo.accessibleNameSearchIcon}
|
|
130
132
|
></UDExControlButton>
|
|
131
133
|
) : ""
|
|
132
134
|
}
|
|
@@ -35,9 +35,9 @@ export default function SearchableListBaseTemplate(this: UDExSearchableListBase)
|
|
|
35
35
|
<div class="udex-no-result">
|
|
36
36
|
<IllustratedMessage
|
|
37
37
|
name="NoSearchResults"
|
|
38
|
-
design="Dot"
|
|
39
|
-
|
|
40
|
-
|
|
38
|
+
design="Dot">
|
|
39
|
+
<div slot="title"></div>
|
|
40
|
+
<div slot="subtitle"></div>
|
|
41
41
|
</IllustratedMessage>
|
|
42
42
|
<span>{this.getNoResultText}</span>
|
|
43
43
|
</div>
|
|
@@ -66,7 +66,7 @@ export default function SearchableListBaseTemplate(this: UDExSearchableListBase)
|
|
|
66
66
|
{this._filteredItems.map((processedItem, index) => (
|
|
67
67
|
processedItem.isGroup
|
|
68
68
|
? renderGroup.call(this, processedItem, index)
|
|
69
|
-
: renderListItem(processedItem.item as UDExListItem, index, "none", this.listItemRole, this.fireFirstIconClickEvent, this.fireSecondIconClickEvent, this._activeDescendantMode, this.isTreeStructure, this._activeDescendantMode ? index + 1 : undefined, this._activeDescendantMode ? this._filteredItems.length : undefined)
|
|
69
|
+
: renderListItem(processedItem.item as UDExListItem, index, "none", this.listItemRole, this.fireFirstIconClickEvent, this.fireSecondIconClickEvent, this._activeDescendantMode, this.isTreeStructure, this._activeDescendantMode || this.isTreeStructure ? index + 1 : undefined, this._activeDescendantMode || this.isTreeStructure ? this._filteredItems.length : undefined)
|
|
70
70
|
))}
|
|
71
71
|
</UDExList>
|
|
72
72
|
)}
|
|
@@ -91,6 +91,8 @@ function renderSelectAll(this: UDExSearchableListBase, processedItem: UDExProces
|
|
|
91
91
|
{...UDExGroupHostAria.call(this, header, index, label)}
|
|
92
92
|
mode={this.mode}
|
|
93
93
|
_treeMode={this.isTreeStructure}
|
|
94
|
+
_ariaPosInSet={!this._activeDescendantMode && this.isTreeStructure ? index + 1 : undefined}
|
|
95
|
+
_ariaSetSize={!this._activeDescendantMode && this.isTreeStructure ? this._filteredItems.length : undefined}
|
|
94
96
|
_additional-class-name={this.additionalClassName}
|
|
95
97
|
data-token-id={item._id}
|
|
96
98
|
label={item.label}
|
|
@@ -102,7 +104,7 @@ function renderSelectAll(this: UDExSearchableListBase, processedItem: UDExProces
|
|
|
102
104
|
onFirstIconClick={this.fireFirstIconClickEvent}
|
|
103
105
|
onSecondIconClick={this.fireSecondIconClickEvent}>
|
|
104
106
|
{groupItems.map((child, i) =>
|
|
105
|
-
renderListItem(child as UDExListItem, i,
|
|
107
|
+
renderListItem(child as UDExListItem, i, "none", this.isTreeStructure ? "treeitem" : undefined, this.fireFirstIconClickEvent, this.fireSecondIconClickEvent, this._activeDescendantMode, this.isTreeStructure, i + 1, groupItems.length)
|
|
106
108
|
)}
|
|
107
109
|
</UDExListSelectAll>
|
|
108
110
|
);
|
|
@@ -129,14 +131,11 @@ function renderGroupHeader(this: UDExSearchableListBase, processedItem: UDExProc
|
|
|
129
131
|
const { item, groupItems } = processedItem;
|
|
130
132
|
const header = item as UDExListGroupHeaderBase;
|
|
131
133
|
const childAccessibleRole = this.isTreeStructure ? "treeitem" : undefined;
|
|
132
|
-
//
|
|
133
|
-
|
|
134
|
-
const groupPosInSet = treeGroups.indexOf(processedItem) + 1;
|
|
135
|
-
const groupSetSize = treeGroups.length;
|
|
136
|
-
// Keep the existing real-focus position overrides separate from host-owned ARIA.
|
|
134
|
+
// Every root participates in the same set, including ordinary root leaves and Select All.
|
|
135
|
+
// Keep real-focus position overrides separate from host-owned ARIA.
|
|
137
136
|
const treePositionAttrs = (!this._activeDescendantMode && this.isTreeStructure && this.modeMultiSelect) ? {
|
|
138
|
-
"_aria-pos-in-set":
|
|
139
|
-
"_aria-set-size":
|
|
137
|
+
"_aria-pos-in-set": index + 1,
|
|
138
|
+
"_aria-set-size": this._filteredItems.length,
|
|
140
139
|
} : {};
|
|
141
140
|
// In aria-activedescendant mode (SelectBox), each group header host element
|
|
142
141
|
// must carry role + ARIA state so screen readers can reach them via the pointer.
|
|
@@ -215,6 +214,7 @@ function renderListItem(
|
|
|
215
214
|
const treePositionAttrs = (!activeDescendantMode && posInSet != null && setSize != null) ? {
|
|
216
215
|
"_aria-pos-in-set": posInSet,
|
|
217
216
|
"_aria-set-size": setSize,
|
|
217
|
+
"_aria-level": isTreeStructure ? ((item.parentElement as UDExListGroupHeaderBase | null)?.isGroup ? 2 : 1) : undefined,
|
|
218
218
|
} : {};
|
|
219
219
|
return (
|
|
220
220
|
<UDExListItem
|
package/src/SideNavigation.ts
CHANGED
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
|
|
2
2
|
import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
|
|
3
3
|
import property from "@ui5/webcomponents-base/dist/decorators/property.js";
|
|
4
|
+
import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
|
|
5
|
+
import type { Slot } from "@ui5/webcomponents-base/dist/UI5Element.js";
|
|
4
6
|
import SideNavigation from "@ui5/webcomponents-fiori/dist/SideNavigation.js";
|
|
7
|
+
import SideNavigationTemplate from "./SideNavigationTemplate.js";
|
|
5
8
|
|
|
6
9
|
// Styles
|
|
7
10
|
import SideNavigationCss from "./generated/themes/SideNavigation.css.js";
|
|
@@ -36,6 +39,7 @@ export enum UDExSideNavigationPlacement {
|
|
|
36
39
|
@customElement({
|
|
37
40
|
tag: "udex-side-navigation",
|
|
38
41
|
renderer: jsxRenderer,
|
|
42
|
+
template: SideNavigationTemplate,
|
|
39
43
|
styles: [SideNavigation.styles, SideNavigationCss],
|
|
40
44
|
})
|
|
41
45
|
|
|
@@ -67,12 +71,25 @@ class UDExSideNavigation extends SideNavigation {
|
|
|
67
71
|
@property()
|
|
68
72
|
placement: `${UDExSideNavigationPlacement}` = UDExSideNavigationPlacement.Left;
|
|
69
73
|
|
|
74
|
+
/**
|
|
75
|
+
* Defines additional free-form content rendered in a dedicated area at the bottom
|
|
76
|
+
* of the component, below the navigation items.
|
|
77
|
+
*
|
|
78
|
+
* @public
|
|
79
|
+
*/
|
|
80
|
+
@slot({ type: HTMLElement, invalidateOnChildChange: true })
|
|
81
|
+
additionalContent!: Slot<HTMLElement>;
|
|
82
|
+
|
|
70
83
|
onBeforeRendering() {
|
|
71
84
|
super.onBeforeRendering();
|
|
72
85
|
this.querySelectorAll("[udex-side-navigation-item], [udex-side-navigation-sub-item]").forEach(item => {
|
|
73
86
|
item.setAttribute("variant", this.variant);
|
|
74
87
|
});
|
|
75
88
|
}
|
|
89
|
+
|
|
90
|
+
get hasAdditionalContent(): boolean {
|
|
91
|
+
return !!this.additionalContent && this.additionalContent.length > 0;
|
|
92
|
+
}
|
|
76
93
|
}
|
|
77
94
|
|
|
78
95
|
UDExSideNavigation.define();
|
|
@@ -15,6 +15,9 @@ import SideNavigationMobileCss from "./generated/themes/SideNavigationMobile.css
|
|
|
15
15
|
|
|
16
16
|
export type SelectedItem = UDExSideNavigationItem | UDExSideNavigationSubItem | null;
|
|
17
17
|
|
|
18
|
+
// Gap (in px) kept between the bottom of the opened dropdown and the viewport bottom.
|
|
19
|
+
const DROPDOWN_BOTTOM_GAP = 24;
|
|
20
|
+
|
|
18
21
|
/**
|
|
19
22
|
* @class
|
|
20
23
|
*
|
|
@@ -49,6 +52,15 @@ class UDExSideNavigationMobile extends UI5Element {
|
|
|
49
52
|
@property({ noAttribute: true, type: Boolean })
|
|
50
53
|
_dropdownOpened!: boolean;
|
|
51
54
|
|
|
55
|
+
/**
|
|
56
|
+
* Holds the computed max-height of the opened dropdown, so it spans from below the
|
|
57
|
+
* trigger down to a fixed gap above the viewport bottom (matching the mobile secondary navigation).
|
|
58
|
+
*
|
|
59
|
+
* @private
|
|
60
|
+
*/
|
|
61
|
+
@property({ noAttribute: true })
|
|
62
|
+
_dropdownHeight?: string;
|
|
63
|
+
|
|
52
64
|
/**
|
|
53
65
|
* Defines the main items of the `ui5-side-navigation`. Use the `ui5-side-navigation-item` component
|
|
54
66
|
* for the top-level items, and the `ui5-side-navigation-sub-item` component for second-level items, nested
|
|
@@ -70,6 +82,15 @@ class UDExSideNavigationMobile extends UI5Element {
|
|
|
70
82
|
@slot({ type: HTMLElement, invalidateOnChildChange: true })
|
|
71
83
|
fixedItems!: Slot<UDExSideNavigationItem | UDExSideNavigationGroup>;
|
|
72
84
|
|
|
85
|
+
/**
|
|
86
|
+
* Defines additional free-form content rendered in a dedicated area at the bottom
|
|
87
|
+
* of the dropdown, below the navigation items.
|
|
88
|
+
*
|
|
89
|
+
* @public
|
|
90
|
+
*/
|
|
91
|
+
@slot({ type: HTMLElement, invalidateOnChildChange: true })
|
|
92
|
+
additionalContent!: Slot<HTMLElement>;
|
|
93
|
+
|
|
73
94
|
/**
|
|
74
95
|
* Indicates selected item element
|
|
75
96
|
*
|
|
@@ -80,7 +101,18 @@ class UDExSideNavigationMobile extends UI5Element {
|
|
|
80
101
|
_selectedItem!: SelectedItem;
|
|
81
102
|
|
|
82
103
|
_navItems!: Array<UDExSideNavigationItem | UDExSideNavigationGroup>;
|
|
104
|
+
_additionalContentNodes!: Array<HTMLElement>;
|
|
83
105
|
_dropdown!: UDExDropdown;
|
|
106
|
+
_boundUpdateDropdownHeight: () => void;
|
|
107
|
+
|
|
108
|
+
constructor() {
|
|
109
|
+
super();
|
|
110
|
+
this._boundUpdateDropdownHeight = this._updateDropdownHeight.bind(this);
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
onExitDOM() {
|
|
114
|
+
window.removeEventListener("resize", this._boundUpdateDropdownHeight);
|
|
115
|
+
}
|
|
84
116
|
|
|
85
117
|
onBeforeRendering() {
|
|
86
118
|
const items = this.getSlottedNodes<UDExSideNavigationItem | UDExSideNavigationGroup>("navItems");
|
|
@@ -92,6 +124,7 @@ class UDExSideNavigationMobile extends UI5Element {
|
|
|
92
124
|
if (!this._selectedItem && this._navItems?.length) {
|
|
93
125
|
this._selectedItem = this.getSelectedItem() || null;
|
|
94
126
|
}
|
|
127
|
+
this._additionalContentNodes = this.getSlottedNodes<HTMLElement>("additionalContent");
|
|
95
128
|
}
|
|
96
129
|
|
|
97
130
|
onAfterRendering() {
|
|
@@ -107,6 +140,11 @@ class UDExSideNavigationMobile extends UI5Element {
|
|
|
107
140
|
sideNavigation.appendChild(item);
|
|
108
141
|
}
|
|
109
142
|
});
|
|
143
|
+
this._additionalContentNodes?.forEach(node => {
|
|
144
|
+
if (node.parentElement !== sideNavigation) {
|
|
145
|
+
sideNavigation.appendChild(node);
|
|
146
|
+
}
|
|
147
|
+
});
|
|
110
148
|
};
|
|
111
149
|
|
|
112
150
|
_getResponsePopover(): UDExDropdown {
|
|
@@ -115,16 +153,30 @@ class UDExSideNavigationMobile extends UI5Element {
|
|
|
115
153
|
|
|
116
154
|
_afterDropdownOpen() {
|
|
117
155
|
this._dropdownOpened = true;
|
|
156
|
+
window.addEventListener("resize", this._boundUpdateDropdownHeight);
|
|
118
157
|
}
|
|
119
158
|
|
|
120
159
|
_afterDropdownClose() {
|
|
121
160
|
this._dropdownOpened = false;
|
|
161
|
+
window.removeEventListener("resize", this._boundUpdateDropdownHeight);
|
|
122
162
|
}
|
|
123
163
|
|
|
124
164
|
handleTriggerClick() {
|
|
165
|
+
if (!this._dropdown.open) {
|
|
166
|
+
this._updateDropdownHeight();
|
|
167
|
+
}
|
|
125
168
|
this._dropdown.open = !this._dropdown.open;
|
|
126
169
|
}
|
|
127
170
|
|
|
171
|
+
_updateDropdownHeight() {
|
|
172
|
+
const trigger = this.shadowRoot!.querySelector<HTMLElement>(".udex-side-navigation-mobile__trigger");
|
|
173
|
+
if (!trigger) {
|
|
174
|
+
return;
|
|
175
|
+
}
|
|
176
|
+
const { bottom } = trigger.getBoundingClientRect();
|
|
177
|
+
this._dropdownHeight = `${window.innerHeight - bottom - DROPDOWN_BOTTOM_GAP}px`;
|
|
178
|
+
}
|
|
179
|
+
|
|
128
180
|
handleKeydown(event: KeyboardEvent) {
|
|
129
181
|
if ((event.key === "Enter" || event.key === " ")) {
|
|
130
182
|
this.handleTriggerClick();
|
|
@@ -44,11 +44,9 @@ export default function SideNavigationMobileTemplate(this: UDExSideNavigationMob
|
|
|
44
44
|
onOpen={this._afterDropdownOpen}
|
|
45
45
|
onClose={this._afterDropdownClose}
|
|
46
46
|
horizontalAlign={PopoverActualHorizontalAlign.Stretch}
|
|
47
|
-
height=
|
|
48
|
-
{
|
|
49
|
-
|
|
50
|
-
"disable-target-overlap": "true",
|
|
51
|
-
}}>
|
|
47
|
+
height={this._dropdownHeight}
|
|
48
|
+
opener={`udex-${this._id}-side-navigation-mobile__opener`}
|
|
49
|
+
disable-target-overlap="true">
|
|
52
50
|
<UDExSideNavigation
|
|
53
51
|
ref={this._setNavItems}
|
|
54
52
|
onSelectionChange={this._handleSelectionChanged as any}
|
|
@@ -2,6 +2,8 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
|
|
|
2
2
|
import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
|
|
3
3
|
import property from "@ui5/webcomponents-base/dist/decorators/property.js";
|
|
4
4
|
import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
|
|
5
|
+
import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
|
|
6
|
+
import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
|
|
5
7
|
import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js";
|
|
6
8
|
import {
|
|
7
9
|
isLeft,
|
|
@@ -11,6 +13,7 @@ import {
|
|
|
11
13
|
} from "@ui5/webcomponents-base/dist/Keys.js";
|
|
12
14
|
import SideNavigationSubItem from "@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js";
|
|
13
15
|
import SideNavigationSubItemTemplate from "./SideNavigationSubItemTemplate.js";
|
|
16
|
+
import { EXPAND, COLLAPSE } from "./generated/i18n/i18n-defaults.js";
|
|
14
17
|
|
|
15
18
|
// Styles
|
|
16
19
|
import SideNavigationSubItemCss from "./generated/themes/SideNavigationSubItem.css.js";
|
|
@@ -58,6 +61,16 @@ class UDExSideNavigationSubItem extends SideNavigationSubItem {
|
|
|
58
61
|
@slot({ type: HTMLElement, invalidateOnChildChange: true, "default": true })
|
|
59
62
|
subItems!: DefaultSlot<UDExSideNavigationSubItem>;
|
|
60
63
|
|
|
64
|
+
@i18n("@sapudex/web-components")
|
|
65
|
+
static i18nBundle: I18nBundle;
|
|
66
|
+
|
|
67
|
+
onBeforeRendering() {
|
|
68
|
+
super.onBeforeRendering();
|
|
69
|
+
this.subItems.forEach(subItem => {
|
|
70
|
+
if (!subItem.hasAttribute("nested")) { subItem.setAttribute("nested", ""); }
|
|
71
|
+
});
|
|
72
|
+
}
|
|
73
|
+
|
|
61
74
|
get hasSubItems() {
|
|
62
75
|
return this.subItems.length > 0;
|
|
63
76
|
}
|
|
@@ -82,11 +95,10 @@ class UDExSideNavigationSubItem extends SideNavigationSubItem {
|
|
|
82
95
|
return this.hasSubItems ? [this, ...this.subItems] : [this];
|
|
83
96
|
}
|
|
84
97
|
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
});
|
|
98
|
+
get _arrowTooltip(): string {
|
|
99
|
+
return this.expanded
|
|
100
|
+
? UDExSideNavigationSubItem.i18nBundle.getText(COLLAPSE)
|
|
101
|
+
: UDExSideNavigationSubItem.i18nBundle.getText(EXPAND);
|
|
90
102
|
}
|
|
91
103
|
|
|
92
104
|
get _subGroupId(): string | undefined {
|
|
@@ -41,6 +41,8 @@ export default function SideNavigationSubItemTemplate(this: UDExSideNavigationSu
|
|
|
41
41
|
<Icon
|
|
42
42
|
class="ui5-sn-item-toggle-icon"
|
|
43
43
|
name={navRightArrow}
|
|
44
|
+
accessibleName={this._arrowTooltip}
|
|
45
|
+
showTooltip={true}
|
|
44
46
|
onClick={(e: Event) => this._onToggleClick(e)}
|
|
45
47
|
/>
|
|
46
48
|
</div>
|
|
@@ -48,7 +50,7 @@ export default function SideNavigationSubItemTemplate(this: UDExSideNavigationSu
|
|
|
48
50
|
{this.isExternalLink && <Icon class="ui5-sn-item-external-link-icon" name={arrowRight} />}
|
|
49
51
|
</EffectiveTag>
|
|
50
52
|
{this.hasSubItems && (
|
|
51
|
-
<ul id={this._subGroupId} class="ui5-sn-item-ul" role="group">
|
|
53
|
+
<ul id={this._subGroupId} class="ui5-sn-item-ul" aria-label={this.accessibleName || this.text} role="group">
|
|
52
54
|
<slot />
|
|
53
55
|
</ul>
|
|
54
56
|
)}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import type UDExSideNavigation from "./SideNavigation.js";
|
|
2
|
+
import UI5SideNavigationTemplate from "@ui5/webcomponents-fiori/dist/SideNavigationTemplate.js";
|
|
3
|
+
|
|
4
|
+
export default function SideNavigationTemplate(this: UDExSideNavigation) {
|
|
5
|
+
return (
|
|
6
|
+
<>
|
|
7
|
+
{UI5SideNavigationTemplate.call(this)}
|
|
8
|
+
{this.hasAdditionalContent ? (
|
|
9
|
+
<div
|
|
10
|
+
class="udex-side-navigation__additional-content"
|
|
11
|
+
part="additional-content">
|
|
12
|
+
<slot name="additionalContent"></slot>
|
|
13
|
+
</div>
|
|
14
|
+
) : undefined}
|
|
15
|
+
</>
|
|
16
|
+
);
|
|
17
|
+
}
|
|
@@ -5,5 +5,5 @@ import defaultTheme from "./sap_horizon/parameters-bundle.css.js";
|
|
|
5
5
|
|
|
6
6
|
registerThemePropertiesLoader("@" + "ui5" + "/" + "webcomponents-theming", "sap_horizon", async () => defaultThemeBase);
|
|
7
7
|
registerThemePropertiesLoader("@" + "s" + "a" + "p" + "u" + "d" + "e" + "x" + "/" + "w" + "e" + "b" + "-" + "c" + "o" + "m" + "p" + "o" + "n" + "e" + "n" + "t" + "s", "sap_horizon", async () => defaultTheme, "host");
|
|
8
|
-
export default `:host{--udex-masthead-shell-logo-width: 64px;--udex-masthead-shell-co-brand-width: 135px;--udex-masthead-shell-height: 60px;--udex-masthead-shell-background: var(--udexColorGrey1, #F5F6F7);--udex-masthead-shell-dropdown-shadow: var(--sapContent_Shadow2, 0 10px 30px 0 #22364940);--udex-masthead-shell-site-label-font-size: var(--udexTypographyNavigationRegularXLFontSize, 16px);--udex-masthead-shell-site-label-line-height: 24px;--udex-masthead-shell-site-label-font-weight: var(--udexTypographyFontWeightBold, 700);--udex-masthead-shell-site-label-text-decoration: none;--udex-masthead-shell-site-label-color: var(--udexColorGrey8, #354A5F);--udex-masthead-shell-site-label-color-hover: var(--udexColorBlue7, #0070F2);--udex-masthead-shell-item-gap: var(--udexSpacer24);--udex-masthead-shell-item-icon-gap: var(--udexSpacer8);--udex-grid-gutter: 3rem;--udex-grid-margin-m: 4.5rem;--udex-grid-margin-l: 4.5rem;--udex-grid-margin-xl: 5.25rem;--udex-column-width-l: calc((100% - 2 * var(--udex-grid-margin-l) - 11 * var(--udex-grid-gutter)) / 12);--udex-column-width-xl: calc((100% - 2 * var(--udex-grid-margin-xl) - 11 * var(--udex-grid-gutter)) / 12);--udex-masthead-shell-search-container-width-xl: calc(8 * var(--udex-column-width-xl) + 7 * var(--udex-grid-gutter));--udex-masthead-shell-close-button-divider-color: var(--udexColorGrey3, #D5DADD);--udex-masthead-shell-z-index: 10;--udex-masthead-shell-container-xl-max-width: 1432px;--udex-masthead-shell-container-l-max-width: 1456px;--udex-masthead-mobile-menu-buttons-width: 360px;--udex-masthead-right-menu-padding: var(--udexSpacer64);--udex-masthead-shell-explore-margin: var(--udexSpacer12);--udex-masthead-shell-mobile-menu-height: 100%}:host{position:relative;display:block;width:100%;container-type:inline-size;background:var(--udex-masthead-shell-background);z-index:var(--udex-masthead-shell-z-index)}:host([sticky-position]){position:sticky;top:0}:host([show-search-by-default]) .udex-masthead-shell__right-menu,:host([show-search-by-default]) .udex-masthead-shell__main-content,:host([_is-search-opened]) .udex-masthead-shell__main-content{width:30%}:host([show-search-by-default]) .udex-masthead-shell__search-container,:host([_is-search-opened]) .udex-masthead-shell__search-container{width:40%}.udex-masthead-shell__search-container{background:var(--udex-masthead-shell-background)}.udex-masthead-shell__btn-holder{display:flex;justify-content:flex-end;width:30%}.udex-masthead-shell__close-search-btn{--udex-control-button-small-height: 32px;--udex-control-button-small-width: 32px;--udex-control-button-small-icon-size: 18px}.udex-masthead-shell{display:flex;justify-content:space-between;align-items:center;position:relative;padding:0 var(--udexSpacer84);max-width:var(--udex-masthead-shell-container-xl-max-width);margin:0 auto;height:var(--udex-masthead-shell-height)}.udex-masthead-shell__logo{margin-inline-end:var(--udexSpacer16);width:var(--udex-masthead-shell-logo-width)}.udex-masthead-shell__co-brand{width:var(--udex-masthead-shell-co-brand-width);margin-inline-end:var(--udexSpacer24);padding-inline-start:var(--udexSpacer16);border-inline-start:1px solid var(--udexColorGrey3, #D5DADD)}.udex-masthead-shell__co-brand,.udex-masthead-shell__co-brand-link{display:flex}.udex-masthead-shell__co-brand-image,.udex-masthead-shell__logo-image{width:100%}.udex-masthead-shell__logo--link{cursor:pointer;display:flex}.udex-masthead-shell__co-brand-link:focus,.udex-masthead-shell__co-brand-link:focus-visible,.udex-masthead-shell__logo--link:focus,.udex-masthead-shell__site-label--link:focus{outline:none}:host([desktop]) .udex-masthead-shell__site-label--link:focus,:host([desktop]) .udex-masthead-shell__logo--link:focus,.udex-masthead-shell__logo--link:focus-visible,.udex-masthead-shell__site-label--link:focus-visible{outline:var(--udexRadiusXXS) solid var(--udexColorBlue10);outline-offset:var(--udexSpacer2);border-radius:var(--udexRadiusXXS)}.udex-masthead-shell__site-label{font-family:var(--sapFontFamily);font-size:var(--udex-masthead-shell-site-label-font-size);line-height:var(--udex-masthead-shell-site-label-line-height);color:var(--udex-masthead-shell-site-label-color);font-weight:var(--udex-masthead-shell-site-label-font-weight);text-decoration:var(--udex-masthead-shell-site-label-text-decoration);margin-inline-end:var(--udexSpacer24);white-space:nowrap}.udex-masthead-shell__site-label--link:hover{color:var(--udex-masthead-shell-site-label-color-hover)}.udex-masthead-shell__main-content{display:flex;align-items:center;box-sizing:border-box}.udex-masthead-shell__main-menu{display:flex;align-items:center;gap:var(--udex-masthead-shell-item-gap);max-width:100%;margin:0;padding:0;list-style:none}.udex-masthead-shell__landing-wrap{display:flex;align-items:center}.udex-masthead-shell__right-menu{display:flex;align-items:center;justify-content:flex-end;gap:var(--udex-masthead-shell-item-icon-gap);padding-inline-start:var(--udex-masthead-right-menu-padding);box-sizing:border-box}.udex-masthead-shell__right-menu_simple-explore .udex-masthead-shell__explore{margin-inline-end:0}.udex-masthead-shell__explore{white-space:nowrap;margin-inline-end:var(--udex-masthead-shell-explore-margin)}.udex-masthead-shell__item_icon{display:flex;align-items:center}.udex-masthead-shell__menu-btn{height:18px}.udex-masthead-shell__close-btn{position:relative;margin-inline-start:var(--udexSpacer12)}.udex-masthead-shell__close-btn:before{content:"";position:absolute;left:-12px;top:0;bottom:0;height:32px;border-radius:var(--udexRadiusXXS);width:1px;background:var(--udex-masthead-shell-close-button-divider-color)}:dir(rtl) .udex-masthead-shell__close-btn:before{left:auto;right:-12px}:dir(rtl) .udex-masthead-mobile-wrap{right:auto;left:0}.udex-masthead-shell__close-btn:hover{color:var(--udex-masthead-shell-site-label-color-hover)}:host([show-search-by-default]) .udex-masthead-shell__search-icon,:host([_is-search-opened]) .udex-masthead-shell__right-menu,:host([_is-mobile-mode]) .udex-masthead-shell__item_icon,:host([_is-mobile-mode]) .udex-masthead-shell__explore,:host([_is-mobile-mode]) .udex-masthead-shell__nav,.udex-masthead-shell__right-menu:empty,.udex-masthead-shell__close-btn,.udex-masthead-shell__menu-btn{display:none}:host([_is-mobile-mode]) .udex-masthead-shell__menu-btn,:host([_is-mobile-menu-open]) .udex-masthead-shell__country-selector,:host([_is-mobile-menu-open]) .udex-masthead-shell__cart,:host([_is-mobile-menu-open]) .udex-masthead-shell__joule,:host([_is-mobile-menu-open]) .udex-masthead-shell__profile,:host([_is-mobile-mode][_is-mobile-menu-open]) .udex-masthead-shell__close-btn{display:flex}:host([_is-mobile-menu-open]) .udex-masthead-shell__right-menu{width:var(--udex-masthead-mobile-menu-buttons-width);background:var(--udex-masthead-shell-background);padding-inline-end:var(--udexSpacer84);padding-inline-start:var(--udexSpacer32);gap:var(--udexSpacer12);position:absolute;top:0;bottom:0;right:0;z-index:var(--udexZIndex1, 1)}:host([_is-mobile-menu-open]) .udex-masthead-shell__right-menu:dir(rtl){right:auto;left:0}.udex-masthead-shell_co-brand-without-nav .udex-masthead-shell__main-content,.udex-masthead-shell_co-brand-without-nav .udex-masthead-shell__landing-wrap{flex:auto}.udex-masthead-shell_co-brand-without-nav .udex-masthead-shell__co-brand{border:none;margin-inline-start:auto;margin-inline-end:0;padding:0}@media (width < 1600px){.udex-masthead-shell{padding-left:var(--udexSpacer72);padding-right:var(--udexSpacer72);max-width:var(--udex-masthead-shell-container-l-max-width)}.udex-masthead-shell__search-container{right:var(--udexSpacer72)}.udex-masthead-shell__search-container:dir(rtl){left:var(--udexSpacer72);right:auto}:host([_is-mobile-menu-open]) .udex-masthead-shell__right-menu{padding-inline-end:var(--udexSpacer72)}}@media (width < 1280px){:host([_is-mobile-menu-open][show-search-by-default]) .udex-masthead-shell__right-menu{width:var(--udex-masthead-mobile-menu-buttons-width)}:host([show-search-by-default]) .udex-masthead-shell__search-container,:host([show-search-by-default]) .udex-masthead-shell__main-content,:host([show-search-by-default]) .udex-masthead-shell__right-menu{width:auto}:host([show-search-by-default]) .udex-masthead-shell__search-container{flex:auto}:host([show-search-by-default]) .udex-masthead-shell__site-label{margin:0}:host([show-search-by-default]) .udex-masthead-shell__main-content{padding-inline-end:var(--udexSpacer32)}.udex-masthead-shell__item_icon,.udex-masthead-shell__explore,.udex-masthead-shell__nav{display:none}:host([_is-mobile-menu-open]) .udex-masthead-shell__close-btn,.udex-masthead-shell__menu-btn{display:flex}.udex-masthead-shell__right-menu{padding-inline-start:var(--udexSpacer32);gap:var(--udexSpacer12)}.udex-masthead-shell__site-label{font-size:var(--udexTypographyNavigationBoldMFontSize, 14px)}}@media (width < 980px){:host([_is-mobile-menu-open][show-search-by-default]) .udex-masthead-shell__right-menu{width:100%}:host([_is-search-opened][show-search-by-default]) .udex-masthead-shell__search-container,:host([show-search-by-default]) .udex-masthead-shell__search-icon{display:block}:host([_is-search-opened]) .udex-masthead-shell__right-menu,:host([show-search-by-default]) .udex-masthead-shell__search-container,:host([_is-mobile-menu-open][show-search-by-default]) .udex-masthead-shell__search-icon,:host([_is-mobile-menu-open]) .udex-masthead-shell__site-label,:host([_is-mobile-menu-open]) .udex-masthead-shell__logo{display:none}:host([_is-mobile-menu-open]) .udex-masthead-shell__right-menu{padding-inline-end:var(--udexSpacer48);width:auto;left:0}:host([_is-mobile-menu-open]) .udex-masthead-shell__right-menu:dir(rtl){right:0}.udex-masthead-shell{padding:0 var(--udexSpacer48)}.udex-masthead-shell__btn-holder{padding-inline-start:var(--udexSpacer32);width:auto}}@media (width < 640px){:host([_is-search-opened]) .udex-masthead-shell__main-content{display:none}:host([_is-mobile-menu-open]) .udex-masthead-shell__right-menu{padding-inline-end:var(--udexSpacer24)}.udex-masthead-shell{padding:0 var(--udexSpacer24)}.udex-masthead-shell__btn-holder{padding-inline-start:var(--udexSpacer8)}}
|
|
8
|
+
export default `:host{--udex-masthead-shell-logo-width: 64px;--udex-masthead-shell-co-brand-width: 135px;--udex-masthead-shell-height: 60px;--udex-masthead-shell-background: var(--udexColorGrey1, #F5F6F7);--udex-masthead-shell-dropdown-shadow: var(--sapContent_Shadow2, 0 10px 30px 0 #22364940);--udex-masthead-shell-site-label-font-size: var(--udexTypographyNavigationRegularXLFontSize, 16px);--udex-masthead-shell-site-label-max-width-desktop: 250px;--udex-masthead-shell-site-label-max-width-mobile: auto;--udex-masthead-shell-site-label-line-height: 24px;--udex-masthead-shell-site-label-font-weight: var(--udexTypographyFontWeightBold, 700);--udex-masthead-shell-site-label-text-decoration: none;--udex-masthead-shell-site-label-color: var(--udexColorGrey8, #354A5F);--udex-masthead-shell-site-label-color-hover: var(--udexColorBlue7, #0070F2);--udex-masthead-shell-item-gap: var(--udexSpacer24);--udex-masthead-shell-item-icon-gap: var(--udexSpacer8);--udex-grid-gutter: 3rem;--udex-grid-margin-m: 4.5rem;--udex-grid-margin-l: 4.5rem;--udex-grid-margin-xl: 5.25rem;--udex-column-width-l: calc((100% - 2 * var(--udex-grid-margin-l) - 11 * var(--udex-grid-gutter)) / 12);--udex-column-width-xl: calc((100% - 2 * var(--udex-grid-margin-xl) - 11 * var(--udex-grid-gutter)) / 12);--udex-masthead-shell-search-container-width-xl: calc(8 * var(--udex-column-width-xl) + 7 * var(--udex-grid-gutter));--udex-masthead-shell-close-button-divider-color: var(--udexColorGrey3, #D5DADD);--udex-masthead-shell-z-index: 101;--udex-masthead-shell-container-xl-max-width: 1432px;--udex-masthead-shell-container-l-max-width: 1456px;--udex-masthead-mobile-menu-buttons-width: 360px;--udex-masthead-right-menu-padding: var(--udexSpacer64);--udex-masthead-shell-explore-margin: var(--udexSpacer12);--udex-masthead-shell-mobile-menu-height: 100%}:host{position:relative;display:block;width:100%;container-type:inline-size;background:var(--udex-masthead-shell-background);z-index:var(--udex-masthead-shell-z-index)}:host([sticky-position]){position:sticky;top:0}:host([show-search-by-default]) .udex-masthead-shell__right-menu,:host([show-search-by-default]) .udex-masthead-shell__main-content,:host([_is-search-opened]) .udex-masthead-shell__main-content{width:30%}:host([show-search-by-default]) .udex-masthead-shell__search-container,:host([_is-search-opened]) .udex-masthead-shell__search-container{width:40%}.udex-masthead-shell__search-container{background:var(--udex-masthead-shell-background)}.udex-masthead-shell__btn-holder{display:flex;justify-content:flex-end;width:30%}.udex-masthead-shell__close-search-btn{--udex-control-button-small-height: 32px;--udex-control-button-small-width: 32px;--udex-control-button-small-icon-size: 18px}.udex-masthead-shell{display:flex;justify-content:space-between;align-items:center;position:relative;padding:0 var(--udexSpacer84);max-width:var(--udex-masthead-shell-container-xl-max-width);margin:0 auto;height:var(--udex-masthead-shell-height)}.udex-masthead-shell__logo{margin-inline-end:var(--udexSpacer16);width:var(--udex-masthead-shell-logo-width);min-width:var(--udex-masthead-shell-logo-width)}.udex-masthead-shell__co-brand{width:var(--udex-masthead-shell-co-brand-width);margin-inline-end:var(--udexSpacer24);padding-inline-start:var(--udexSpacer16);border-inline-start:1px solid var(--udexColorGrey3, #D5DADD)}.udex-masthead-shell__co-brand,.udex-masthead-shell__co-brand-link{display:flex}.udex-masthead-shell__co-brand-image,.udex-masthead-shell__logo-image{width:100%}.udex-masthead-shell__logo--link{cursor:pointer;display:flex}.udex-masthead-shell__co-brand-link:focus,.udex-masthead-shell__co-brand-link:focus-visible,.udex-masthead-shell__logo--link:focus,.udex-masthead-shell__site-label--link:focus{outline:none}:host([desktop]) .udex-masthead-shell__site-label--link:focus,:host([desktop]) .udex-masthead-shell__logo--link:focus,.udex-masthead-shell__logo--link:focus-visible,.udex-masthead-shell__site-label--link:focus-visible{outline:var(--udexRadiusXXS) solid var(--udexColorBlue10);outline-offset:var(--udexSpacer2);border-radius:var(--udexRadiusXXS)}.udex-masthead-shell__site-label{font-family:var(--sapFontFamily);font-size:var(--udex-masthead-shell-site-label-font-size);line-height:var(--udex-masthead-shell-site-label-line-height);color:var(--udex-masthead-shell-site-label-color);font-weight:var(--udex-masthead-shell-site-label-font-weight);text-decoration:var(--udex-masthead-shell-site-label-text-decoration);margin-inline-end:var(--udexSpacer24);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:var(--udex-masthead-shell-site-label-max-width-desktop)}.udex-masthead-shell__site-label--link:hover{color:var(--udex-masthead-shell-site-label-color-hover)}.udex-masthead-shell__main-content{display:flex;align-items:center;box-sizing:border-box}.udex-masthead-shell__main-menu{display:flex;align-items:center;gap:var(--udex-masthead-shell-item-gap);max-width:100%;margin:0;padding:0;list-style:none}.udex-masthead-shell__landing-wrap{display:flex;align-items:center}.udex-masthead-shell__right-menu{display:flex;align-items:center;justify-content:flex-end;gap:var(--udex-masthead-shell-item-icon-gap);padding-inline-start:var(--udex-masthead-right-menu-padding);box-sizing:border-box}.udex-masthead-shell__right-menu_simple-explore .udex-masthead-shell__explore{margin-inline-end:0}.udex-masthead-shell__explore{white-space:nowrap;margin-inline-end:var(--udex-masthead-shell-explore-margin)}.udex-masthead-shell__item_icon{display:flex;align-items:center}.udex-masthead-shell__menu-btn{height:18px}.udex-masthead-shell__close-btn{position:relative;margin-inline-start:var(--udexSpacer12)}.udex-masthead-shell__close-btn:before{content:"";position:absolute;left:-12px;top:0;bottom:0;height:32px;border-radius:var(--udexRadiusXXS);width:1px;background:var(--udex-masthead-shell-close-button-divider-color)}:dir(rtl) .udex-masthead-shell__close-btn:before{left:auto;right:-12px}:dir(rtl) .udex-masthead-mobile-wrap{right:auto;left:0}.udex-masthead-shell__close-btn:hover{color:var(--udex-masthead-shell-site-label-color-hover)}:host([show-search-by-default]) .udex-masthead-shell__search-icon,:host([_is-search-opened]) .udex-masthead-shell__right-menu,:host([_is-mobile-mode]) .udex-masthead-shell__item_icon,:host([_is-mobile-mode]) .udex-masthead-shell__explore,:host([_is-mobile-mode]) .udex-masthead-shell__nav,.udex-masthead-shell__right-menu:empty,.udex-masthead-shell__close-btn,.udex-masthead-shell__menu-btn{display:none}:host([_is-mobile-mode]) .udex-masthead-shell__menu-btn,:host([_is-mobile-menu-open]) .udex-masthead-shell__country-selector,:host([_is-mobile-menu-open]) .udex-masthead-shell__cart,:host([_is-mobile-menu-open]) .udex-masthead-shell__joule,:host([_is-mobile-menu-open]) .udex-masthead-shell__profile,:host([_is-mobile-mode][_is-mobile-menu-open]) .udex-masthead-shell__close-btn{display:flex}:host([_is-mobile-menu-open]) .udex-masthead-shell__right-menu{width:var(--udex-masthead-mobile-menu-buttons-width);background:var(--udex-masthead-shell-background);padding-inline-end:var(--udexSpacer84);padding-inline-start:var(--udexSpacer32);gap:var(--udexSpacer12);position:absolute;top:0;bottom:0;right:0;z-index:var(--udexZIndex1, 1)}:host([_is-mobile-menu-open]) .udex-masthead-shell__right-menu:dir(rtl){right:auto;left:0}.udex-masthead-shell_co-brand-without-nav .udex-masthead-shell__main-content,.udex-masthead-shell_co-brand-without-nav .udex-masthead-shell__landing-wrap{flex:auto}.udex-masthead-shell_co-brand-without-nav .udex-masthead-shell__co-brand{border:none;margin-inline-start:auto;margin-inline-end:0;padding:0}@media (width < 1600px){.udex-masthead-shell{padding-left:var(--udexSpacer72);padding-right:var(--udexSpacer72);max-width:var(--udex-masthead-shell-container-l-max-width)}.udex-masthead-shell__search-container{right:var(--udexSpacer72)}.udex-masthead-shell__search-container:dir(rtl){left:var(--udexSpacer72);right:auto}:host([_is-mobile-menu-open]) .udex-masthead-shell__right-menu{padding-inline-end:var(--udexSpacer72)}}@media (width < 1280px){:host([_is-mobile-menu-open][show-search-by-default]) .udex-masthead-shell__right-menu{width:var(--udex-masthead-mobile-menu-buttons-width)}:host([show-search-by-default]) .udex-masthead-shell__search-container,:host([show-search-by-default]) .udex-masthead-shell__main-content,:host([show-search-by-default]) .udex-masthead-shell__right-menu{width:auto}:host([show-search-by-default]) .udex-masthead-shell__search-container{flex:auto}:host([show-search-by-default]) .udex-masthead-shell__site-label{margin:0}:host([show-search-by-default]) .udex-masthead-shell__main-content{padding-inline-end:var(--udexSpacer32)}.udex-masthead-shell__item_icon,.udex-masthead-shell__explore,.udex-masthead-shell__nav{display:none}:host([_is-mobile-menu-open]) .udex-masthead-shell__close-btn,.udex-masthead-shell__menu-btn{display:flex}.udex-masthead-shell__right-menu{padding-inline-start:var(--udexSpacer32);gap:var(--udexSpacer12)}.udex-masthead-shell__site-label{font-size:var(--udexTypographyNavigationBoldMFontSize, 14px)}:host([_is-mobile-mode]) .udex-masthead-shell__site-label,.udex-masthead-shell__site-label{max-width:var(--udex-masthead-shell-site-label-max-width-mobile)}}@media (width < 980px){:host([_is-mobile-menu-open][show-search-by-default]) .udex-masthead-shell__right-menu{width:100%}:host([_is-search-opened][show-search-by-default]) .udex-masthead-shell__search-container,:host([show-search-by-default]) .udex-masthead-shell__search-icon{display:block}:host([_is-search-opened]) .udex-masthead-shell__right-menu,:host([show-search-by-default]) .udex-masthead-shell__search-container,:host([_is-mobile-menu-open][show-search-by-default]) .udex-masthead-shell__search-icon,:host([_is-mobile-menu-open]) .udex-masthead-shell__site-label,:host([_is-mobile-menu-open]) .udex-masthead-shell__logo{display:none}:host([_is-mobile-menu-open]) .udex-masthead-shell__right-menu{padding-inline-end:var(--udexSpacer48);width:auto;left:0}:host([_is-mobile-menu-open]) .udex-masthead-shell__right-menu:dir(rtl){right:0}.udex-masthead-shell{padding:0 var(--udexSpacer48)}.udex-masthead-shell__btn-holder{padding-inline-start:var(--udexSpacer32);width:auto}}@media (width < 640px){:host([_is-search-opened]) .udex-masthead-shell__main-content{display:none}:host([_is-mobile-menu-open]) .udex-masthead-shell__right-menu{padding-inline-end:var(--udexSpacer24)}.udex-masthead-shell{padding:0 var(--udexSpacer24)}.udex-masthead-shell__btn-holder{padding-inline-start:var(--udexSpacer8)}}
|
|
9
9
|
`
|
|
@@ -5,5 +5,5 @@ import defaultTheme from "./sap_horizon/parameters-bundle.css.js";
|
|
|
5
5
|
|
|
6
6
|
registerThemePropertiesLoader("@" + "ui5" + "/" + "webcomponents-theming", "sap_horizon", async () => defaultThemeBase);
|
|
7
7
|
registerThemePropertiesLoader("@" + "s" + "a" + "p" + "u" + "d" + "e" + "x" + "/" + "w" + "e" + "b" + "-" + "c" + "o" + "m" + "p" + "o" + "n" + "e" + "n" + "t" + "s", "sap_horizon", async () => defaultTheme, "host");
|
|
8
|
-
export default `:host{width:100%;max-height:100%;overflow:hidden;--udex-promo-tile-background: var(--udexColorBlue1, #EBF8FF);--udex-promo-tile-border-radius: var(--udexRadiusXL, 16px);--udex-promo-tile-border-width: var(--sapElement_BorderWidth, 1px);--udex-promo-tile-border-color: var(--udex-promo-tile-background);--udex-promo-tile-pictogram-width: var(--udexSpacer120, 120px);--udex-promo-tile-pictogram-height: var(--udexSpacer120, 120px);--udex-promo-tile-logo-width: 200px;--udex-promo-tile-logo-height: 100px;--udex-promo-tile-icon-width: 100%;--udex-promo-tile-icon-height: 100%;--udex-promo-tile-icon-fill-color: inherit;--udex-promo-tile-eyebrow-color: var(--udexColorBlue8, #0057D2);--udex-promo-tile-header-color-light: var(--udexColorNeutralWhite, #FFFFFF);--udex-promo-tile-header-color-dark: var(--udexColorNeutralBlack, #000000);--udex-promo-tile-text-color-light: var(--udexColorNeutralWhite, #FFFFFF);--udex-promo-tile-text-color-dark: var(--udexColorGrey9, #223548);--udex-promo-tile-image-object-fit: contain}:host ::slotted([slot="pictogram"]){width:100%}.udex-promo-tile__container{width:100%;height:100%;box-sizing:border-box;display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:space-between;border-radius:var(--udex-promo-tile-border-radius);background:var(--udex-promo-tile-background);padding:var(--udexSpacer32, 32px);gap:var(--udexSpacer16, 16px);border:var(--udex-promo-tile-border-width) solid var(--udex-promo-tile-border-color)}.udex-promo-tile--horizontal{flex-direction:row;padding:var(--udexSpacer32, 32px);gap:var(--udexSpacer32, 32px)}.udex-promo-tile__pictogram{width:var(--udex-promo-tile-pictogram-width);height:var(--udex-promo-tile-pictogram-height);max-width:100%;display:flex;justify-content:center;align-items:center;flex-grow:0;flex-shrink:0;overflow:hidden}.udex-promo-tile__pictogram.udex-promo-tile__pictogram--logo{width:var(--udex-promo-tile-logo-width);height:var(--udex-promo-tile-logo-height)}.udex-promo-tile__pictogram img{width:100%;height:100%;object-fit:var(--udex-promo-tile-image-object-fit)}.udex-promo-tile--horizontal .udex-promo-tile__pictogram,.udex-promo-tile--horizontal .udex-promo-tile__footer{flex-shrink:0;flex-grow:0}.udex-promo-tile__pictogram [ui5-icon]{width:var(--udex-promo-tile-icon-width);height:var(--udex-promo-tile-icon-height);fill:var(--udex-promo-tile-icon-fill-color);--_ui5_icon_transform_scale: none}.udex-promo-tile__content{display:flex;flex-grow:1;flex-direction:column;justify-content:space-between;gap:var(--udexSpacer32, 32px);font-family:var(--sapFontFamily);font-size:var(--udexTypographyBodySFontSize, 16px);font-weight:var(--udexTypographyFontWeightRegular, 400);line-height:var(--udexTypographyBodyLineHeight, 1.5);color:var(--udex-promo-tile-text-color-dark)}.udex-promo-tile--horizontal .udex-promo-tile__content{flex-grow:1;flex-direction:row}.udex-promo-tile--dark .udex-promo-tile__content{color:var(--udex-promo-tile-text-color-light)}.udex-promo-tile__eyebrow{font-size:var(--udexTypographyEyebrowLFontSize, 16px);line-height:var(--udexTypographyEyebrowLineHeight, 1.1);font-weight:var(--udexTypographyFontWeightMedium, 500);text-transform:uppercase;letter-spacing:.5px;color:var(--udex-promo-tile-eyebrow-color);margin-block-end:var(--udexSpacer8, 8px)}.udex-promo-tile__header{font-size:var(--udexTypographyHeadingMediumSFontSize, 28px);line-height:var(--udexTypographyHeadingLineHeight, 1.1);font-weight:var(--udexTypographyFontWeightMedium, 500);margin-block-end:var(--udexSpacer16, 16px);color:var(--udex-promo-tile-header-color-dark)}.udex-promo-tile--dark .udex-promo-tile__header{color:var(--udex-promo-tile-header-color-light)}.udex-promo-tile--horizontal .udex-promo-tile__header{margin-block-end:var(--udexSpacer8, 8px)}.udex-promo-tile__footer{display:flex;align-items:center}@media (width < 1280px){.udex-promo-tile--horizontal{padding:var(--udexSpacer24, 24px);gap:var(--udexSpacer24, 24px)}.udex-promo-tile--horizontal .udex-promo-tile__content{flex-direction:column;gap:var(--udexSpacer24, 24px)}.udex-promo-tile__header{font-size:var(--udexTypographyHeadingMediumXSFontSize, 24px)}}@media (width < 980px){.udex-promo-tile--horizontal{flex-direction:column}}.udex-promo-tile--dark [udex-button]{--udex-button-focus-border-color: var(--udexColorNeutralWhite, #FFFFFF);--sapContent_FocusColor: var(--udexColorNeutralWhite, #FFFFFF);--udex-button-color-primary-standard-default-background: var(--udexColorNeutralWhite, #FFFFFF);--udex-button-color-primary-standard-default-border-color: var(--udexColorNeutralWhite, #FFFFFF);--udex-button-color-primary-standard-default-text-and-icon: var(--udexColorBlue8, #0057D2);--udex-button-color-primary-standard-hover-background: var(--udexColorGrey4, #A9B4BE);--udex-button-color-primary-standard-hover-border-color: var(--udexColorGrey3, #D5DADD);--udex-button-color-primary-standard-hover-text-and-icon: var(--udexColorBlue10, #002A86);--udex-button-color-primary-standard-active-background: var(--udexColorNeutralBlack70, #000000B3);--udex-button-color-primary-standard-active-border: var(--udexColorBlue4, #89D1FF);--udex-button-color-primary-standard-active-text-and-icon: var(--udexColorBlue4, #89D1FF);--udex-button-color-primary-standard-disabled-background: var(--udexColorNeutralWhite, #FFFFFF);--udex-button-color-primary-standard-disabled-text-and-icon: var(--udexColorBlue8, #0057D2);--udex-button-color-primary-standard-focus-border: var(--udexColorBlue10, #002A86);--udex-button-color-primary-toggled-default-background: var(--udexColorNeutralBlack40, #00000066);--udex-button-color-primary-toggled-default-border: var(--udexColorBlue4, #89D1FF);--udex-button-color-primary-toggled-default-text-and-icon: var(--udexColorBlue4, #89D1FF);--udex-button-color-primary-toggled-hover-background: var(--udexColorBlue10, #002A86);--udex-button-color-primary-toggled-hover-border: var(--udexColorBlue4, #89D1FF);--udex-button-color-primary-toggled-hover-text-and-icon: var(--udexColorBlue4, #89D1FF);--udex-button-color-primary-toggled-disabled-background: var(--udexColorNeutralBlack40, #00000066);--udex-button-color-primary-toggled-disabled-border: var(--udexColorBlue4, #89D1FF);--udex-button-color-primary-toggled-disabled-text-and-icon: var(--udexColorBlue4, #89D1FF);--udex-button-color-secondary-standard-default-background: var(--udexColorNeutralWhite0, #FFFFFF00);--udex-button-color-secondary-standard-default-border: var(--udexColorNeutralWhite, #FFFFFF);--udex-button-color-secondary-standard-default-text-and-icon: var(--udexColorNeutralWhite, #FFFFFF);--udex-button-color-secondary-standard-hover-background: var(--udexColorNeutralBlack10, #0000001A);--udex-button-color-secondary-standard-hover-border: var(--udexColorGrey5, #8396A8);--udex-button-color-secondary-standard-hover-text-and-icon: var(--udexColorBlue3, #A6E0FF);--udex-button-color-secondary-standard-active-background: var(--udexColorNeutralBlack40, #00000066);--udex-button-color-secondary-standard-active-border: var(--udexColorBlue4, #89D1FF);--udex-button-color-secondary-standard-active-text-and-icon: var(--udexColorBlue4, #89D1FF);--udex-button-color-secondary-standard-disabled-background: var(--udexColorNeutralWhite0, #FFFFFF00);--udex-button-color-secondary-standard-disabled-border: var(--udexColorNeutralWhite, #FFFFFF);--udex-button-color-secondary-standard-disabled-text-and-icon: var(--udexColorNeutralWhite, #FFFFFF);--udex-button-color-secondary-toggled-default-background: var(--udexColorNeutralWhite0, #FFFFFF00);--udex-button-color-secondary-toggled-default-border: var(--udexColorNeutralWhite, #FFFFFF);--udex-button-color-secondary-toggled-default-text-and-icon: var(--udexColorNeutralWhite, #FFFFFF);--udex-button-color-secondary-toggled-hover-background: var(--udexColorNeutralBlack10, #0000001A);--udex-button-color-secondary-toggled-hover-border: var(--udexColorGrey5, #8396A8);--udex-button-color-secondary-toggled-hover-text-and-icon: var(--udexColorBlue3, #A6E0FF);--udex-button-color-secondary-toggled-disabled-background: var(--udexColorNeutralWhite0, #FFFFFF00);--udex-button-color-secondary-toggled-disabled-border: var(--udexColorNeutralWhite, #FFFFFF);--udex-button-color-secondary-toggled-disabled-text-and-icon: var(--udexColorNeutralWhite, #FFFFFF);--udex-button-color-tertiary-standard-default-background: var(--udexColorNeutralWhite0, #FFFFFF00);--udex-button-color-tertiary-standard-default-border: var(--udexColorNeutralWhite0, #FFFFFF00);--udex-button-color-tertiary-standard-default-text-and-icon: var(--udexColorNeutralWhite, #FFFFFF);--udex-button-color-tertiary-standard-hover-background: var(--udexColorNeutralBlack10, #0000001A);--udex-button-color-tertiary-standard-hover-border: var(--udexColorGrey5, #8396A8);--udex-button-color-tertiary-standard-hover-text-and-icon: var(--udexColorBlue3, #A6E0FF);--udex-button-color-tertiary-standard-active-background: var(--udexColorNeutralBlack40, #00000066);--udex-button-color-tertiary-standard-active-border: var(--udexColorBlue4, #89D1FF);--udex-button-color-tertiary-standard-active-text-and-icon: var(--udexColorBlue4, #89D1FF);--udex-button-color-tertiary-standard-disabled-background: var(--udexColorNeutralBlack, #000000);--udex-button-color-tertiary-standard-disabled-border: var(--udexColorNeutralWhite, #FFFFFF);--udex-button-color-tertiary-standard-disabled-text-and-icon: var(--udexColorNeutralWhite, #FFFFFF);--udex-button-color-tertiary-toggled-default-background: var(--udexColorNeutralWhite0, #FFFFFF00);--udex-button-color-tertiary-toggled-default-border: var(--udexColorNeutralWhite0, #FFFFFF00);--udex-button-color-tertiary-toggled-default-text-and-icon: var(--udexColorNeutralWhite, #FFFFFF);--udex-button-color-tertiary-toggled-hover-background: var(--udexColorNeutralBlack10, #0000001A);--udex-button-color-tertiary-toggled-hover-border: var(--udexColorGrey5, #8396A8);--udex-button-color-tertiary-toggled-hover-text-and-icon: var(--udexColorBlue3, #A6E0FF);--udex-button-color-tertiary-toggled-disabled-background: var(--udexColorNeutralWhite0, #FFFFFF00);--udex-button-color-tertiary-toggled-disabled-border: var(--udexColorNeutralWhite, #FFFFFF);--udex-button-color-tertiary-toggled-disabled-text-and-icon: var(--udexColorNeutralWhite, #FFFFFF);--udex-button-color-invisible-standard-default-text-and-icon: var(--udexColorBlue3, #A6E0FF);--udex-button-color-invisible-standard-hover-text-and-icon: var(--udexColorNeutralWhite, #FFFFFF);--udex-button-color-invisible-standard-active-text-and-icon: var(--udexColorBlue5, #4DB1FF);--udex-button-color-invisible-standard-disabled-text-and-icon: var(--udexColorBlue3, #A6E0FF);--udex-button-color-positive-standard-default-background: var(--udexColorGreen8, #256F3A);--udex-button-color-positive-standard-default-border: var(--udexColorGreen3, #BDE986);--udex-button-color-positive-standard-default-text-and-icon: var(--udexColorGreen2, #EBF5CB);--udex-button-color-positive-standard-hover-background: var(--udexColorGreen10, #164323);--udex-button-color-positive-standard-hover-border: var(--udexColorGreen3, #BDE986);--udex-button-color-positive-standard-hover-text-and-icon: var(--udexColorGreen3, #BDE986);--udex-button-color-positive-standard-active-background: var(--udexColorGrey11, #12171C);--udex-button-color-positive-standard-active-border: var(--udexColorGreen4, #97DD40);--udex-button-color-positive-standard-active-text-and-icon: var(--udexColorGreen4, #97DD40);--udex-button-color-positive-standard-disabled-background: var(--udexColorGreen8, #256F3A);--udex-button-color-positive-standard-disabled-border: var(--udexColorGreen3, #BDE986);--udex-button-color-positive-standard-disabled-text-and-icon: var(--udexColorGreen2, #EBF5CB);--udex-button-color-positive-toggled-default-background: var(--udexColorGrey11, #12171C);--udex-button-color-positive-toggled-default-border: var(--udexColorBlue4, #89D1FF);--udex-button-color-positive-toggled-default-text-and-icon: var(--udexColorBlue4, #89D1FF);--udex-button-color-positive-toggled-hover-background: var(--udexColorBlue10, #002A86);--udex-button-color-positive-toggled-hover-border: var(--udexColorBlue4, #89D1FF);--udex-button-color-positive-toggled-hover-text-and-icon: var(--udexColorBlue4, #89D1FF);--udex-button-color-positive-toggled-disabled-background: var(--udexColorGrey11, #12171C);--udex-button-color-positive-toggled-disabled-border: var(--udexColorBlue4, #89D1FF);--udex-button-color-positive-toggled-disabled-text-and-icon: var(--udexColorBlue4, #89D1FF);--udex-button-color-negative-standard-default-background: var(--udexColorRed8, #AA0808);--udex-button-color-negative-standard-default-border: var(--udexColorRed3, #FFB2D2);--udex-button-color-negative-standard-default-text-and-icon: var(--udexColorRed2, #FFD5EA);--udex-button-color-negative-standard-hover-background: var(--udexColorRed10, #5A0404);--udex-button-color-negative-standard-hover-border: var(--udexColorRed3, #FFB2D2);--udex-button-color-negative-standard-hover-text-and-icon: var(--udexColorRed3, #FFB2D2);--udex-button-color-negative-standard-active-background: var(--udexColorGrey11, #12171C);--udex-button-color-negative-standard-active-border: var(--udexColorRed4, #FF8CB2);--udex-button-color-negative-standard-active-text-and-icon: var(--udexColorRed4, #FF8CB2);--udex-button-color-negative-standard-disabled-background: var(--udexColorRed8, #AA0808);--udex-button-color-negative-standard-disabled-border: var(--udexColorRed3, #FFB2D2);--udex-button-color-negative-standard-disabled-text-and-icon: var(--udexColorRed2, #FFD5EA);--udex-button-color-negative-toggled-default-background: var(--udexColorGrey11, #12171C);--udex-button-color-negative-toggled-default-border: var(--udexColorRed3, #FFB2D2);--udex-button-color-negative-toggled-default-text-and-icon: var(--udexColorRed3, #FFB2D2);--udex-button-color-negative-toggled-hover-background: var(--udexColorMango4, #FFC933);--udex-button-color-negative-toggled-hover-border: var(--udexColorNeutralBlack, #000000);--udex-button-color-negative-toggled-hover-text-and-icon: var(--udexColorNeutralBlack, #000000);--udex-button-color-negative-toggled-disabled-background: var(--udexColorBlue4, #89D1FF);--udex-button-color-negative-toggled-disabled-border: var(--udexColorNeutralBlack, #000000);--udex-button-color-negative-toggled-disabled-text-and-icon: var(--udexColorNeutralBlack, #000000);--udex-button-color-warning-standard-default-background: var(--udexColorMango8, #A93E00);--udex-button-color-warning-standard-default-border: var(--udexColorMango3, #FFDF72);--udex-button-color-warning-standard-default-text-and-icon: var(--udexColorMango2, #FFF3B8);--udex-button-color-warning-standard-hover-background: var(--udexColorMango10, #6D1900);--udex-button-color-warning-standard-hover-border: var(--udexColorMango3, #FFDF72);--udex-button-color-warning-standard-hover-text-and-icon: var(--udexColorMango3, #FFDF72);--udex-button-color-warning-standard-active-background: var(--udexColorGrey11, #12171C);--udex-button-color-warning-standard-active-border: var(--udexColorMango4, #FFC933);--udex-button-color-warning-standard-active-text-and-icon: var(--udexColorMango4, #FFC933);--udex-button-color-warning-standard-disabled-background: var(--udexColorMango8, #A93E00);--udex-button-color-warning-standard-disabled-border: var(--udexColorMango3, #FFDF72);--udex-button-color-warning-standard-disabled-text-and-icon: var(--udexColorMango2, #FFF3B8);--udex-button-color-warning-toggled-default-background: var(--udexColorNeutralWhite, #FFFFFF);--udex-button-color-warning-toggled-default-border: var(--udexColorMango10, #6D1900);--udex-button-color-warning-toggled-default-text-and-icon: var(--udexColorMango10, #6D1900);--udex-button-color-warning-toggled-hover-background: var(--udexColorMango2, #FFF3B8);--udex-button-color-warning-toggled-hover-border: var(--udexColorMango8, #A93E00);--udex-button-color-warning-toggled-hover-text-and-icon: var(--udexColorMango8, #A93E00);--udex-button-color-warning-toggled-disabled-background: var(--udexColorNeutralWhite, #FFFFFF);--udex-button-color-warning-toggled-disabled-border: var(--udexColorMango10, #6D1900);--udex-button-color-warning-toggled-disabled-text-and-icon: var(--udexColorMango10, #6D1900)}
|
|
8
|
+
export default `:host{width:100%;max-height:100%;overflow:hidden;--udex-promo-tile-background: var(--udexColorBlue1, #EBF8FF);--udex-promo-tile-border-radius: var(--udexRadiusXL, 16px);--udex-promo-tile-border-width: var(--sapElement_BorderWidth, 1px);--udex-promo-tile-border-color: var(--udex-promo-tile-background);--udex-promo-tile-pictogram-width: var(--udexSpacer120, 120px);--udex-promo-tile-pictogram-height: var(--udexSpacer120, 120px);--udex-promo-tile-logo-width: 200px;--udex-promo-tile-logo-height: 100px;--udex-promo-tile-icon-width: 100%;--udex-promo-tile-icon-height: 100%;--udex-promo-tile-icon-fill-color: inherit;--udex-promo-tile-eyebrow-color: var(--udexColorBlue8, #0057D2);--udex-promo-tile-header-color-light: var(--udexColorNeutralWhite, #FFFFFF);--udex-promo-tile-header-color-dark: var(--udexColorNeutralBlack, #000000);--udex-promo-tile-text-color-light: var(--udexColorNeutralWhite, #FFFFFF);--udex-promo-tile-text-color-dark: var(--udexColorGrey9, #223548);--udex-promo-tile-image-object-fit: contain}:host ::slotted([slot="pictogram"]){width:100%}.udex-promo-tile__container{width:100%;height:100%;box-sizing:border-box;display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:space-between;border-radius:var(--udex-promo-tile-border-radius);background:var(--udex-promo-tile-background);padding:var(--udexSpacer32, 32px);gap:var(--udexSpacer16, 16px);border:var(--udex-promo-tile-border-width) solid var(--udex-promo-tile-border-color)}.udex-promo-tile--horizontal{flex-direction:row;padding:var(--udexSpacer32, 32px);gap:var(--udexSpacer32, 32px)}.udex-promo-tile__pictogram{width:var(--udex-promo-tile-pictogram-width);height:var(--udex-promo-tile-pictogram-height);max-width:100%;display:flex;justify-content:center;align-items:center;flex-grow:0;flex-shrink:0;overflow:hidden;align-self:center}.udex-promo-tile__pictogram.udex-promo-tile__pictogram--logo{width:var(--udex-promo-tile-logo-width);height:var(--udex-promo-tile-logo-height)}.udex-promo-tile__pictogram img{width:100%;height:100%;object-fit:var(--udex-promo-tile-image-object-fit)}.udex-promo-tile--horizontal .udex-promo-tile__pictogram,.udex-promo-tile--horizontal .udex-promo-tile__footer{flex-shrink:0;flex-grow:0}.udex-promo-tile__pictogram [ui5-icon]{width:var(--udex-promo-tile-icon-width);height:var(--udex-promo-tile-icon-height);fill:var(--udex-promo-tile-icon-fill-color);--_ui5_icon_transform_scale: none}.udex-promo-tile__content{display:flex;flex-grow:1;flex-direction:column;justify-content:space-between;gap:var(--udexSpacer32, 32px);font-family:var(--sapFontFamily);font-size:var(--udexTypographyBodySFontSize, 16px);font-weight:var(--udexTypographyFontWeightRegular, 400);line-height:var(--udexTypographyBodyLineHeight, 1.5);color:var(--udex-promo-tile-text-color-dark)}.udex-promo-tile--horizontal .udex-promo-tile__content{flex-grow:1;flex-direction:row}.udex-promo-tile--dark .udex-promo-tile__content{color:var(--udex-promo-tile-text-color-light)}.udex-promo-tile__eyebrow{font-size:var(--udexTypographyEyebrowLFontSize, 16px);line-height:var(--udexTypographyEyebrowLineHeight, 1.1);font-weight:var(--udexTypographyFontWeightMedium, 500);text-transform:uppercase;letter-spacing:.5px;color:var(--udex-promo-tile-eyebrow-color);margin-block-end:var(--udexSpacer8, 8px)}.udex-promo-tile__header{font-size:var(--udexTypographyHeadingMediumSFontSize, 28px);line-height:var(--udexTypographyHeadingLineHeight, 1.1);font-weight:var(--udexTypographyFontWeightMedium, 500);margin-block-end:var(--udexSpacer16, 16px);color:var(--udex-promo-tile-header-color-dark)}.udex-promo-tile--dark .udex-promo-tile__header{color:var(--udex-promo-tile-header-color-light)}.udex-promo-tile--horizontal .udex-promo-tile__header{margin-block-end:var(--udexSpacer8, 8px)}.udex-promo-tile__footer{display:flex;align-items:center}@media (width < 1280px){.udex-promo-tile--horizontal{padding:var(--udexSpacer24, 24px);gap:var(--udexSpacer24, 24px)}.udex-promo-tile__pictogram{align-self:flex-start}.udex-promo-tile--horizontal .udex-promo-tile__content{flex-direction:column;gap:var(--udexSpacer24, 24px)}.udex-promo-tile__header{font-size:var(--udexTypographyHeadingMediumXSFontSize, 24px)}}@media (width < 980px){.udex-promo-tile--horizontal{flex-direction:column}}.udex-promo-tile--dark [udex-button]{--udex-button-focus-border-color: var(--udexColorNeutralWhite, #FFFFFF);--sapContent_FocusColor: var(--udexColorNeutralWhite, #FFFFFF);--udex-button-color-primary-standard-default-background: var(--udexColorNeutralWhite, #FFFFFF);--udex-button-color-primary-standard-default-border-color: var(--udexColorNeutralWhite, #FFFFFF);--udex-button-color-primary-standard-default-text-and-icon: var(--udexColorBlue8, #0057D2);--udex-button-color-primary-standard-hover-background: var(--udexColorGrey4, #A9B4BE);--udex-button-color-primary-standard-hover-border-color: var(--udexColorGrey3, #D5DADD);--udex-button-color-primary-standard-hover-text-and-icon: var(--udexColorBlue10, #002A86);--udex-button-color-primary-standard-active-background: var(--udexColorNeutralBlack70, #000000B3);--udex-button-color-primary-standard-active-border: var(--udexColorBlue4, #89D1FF);--udex-button-color-primary-standard-active-text-and-icon: var(--udexColorBlue4, #89D1FF);--udex-button-color-primary-standard-disabled-background: var(--udexColorNeutralWhite, #FFFFFF);--udex-button-color-primary-standard-disabled-text-and-icon: var(--udexColorBlue8, #0057D2);--udex-button-color-primary-standard-focus-border: var(--udexColorBlue10, #002A86);--udex-button-color-primary-toggled-default-background: var(--udexColorNeutralBlack40, #00000066);--udex-button-color-primary-toggled-default-border: var(--udexColorBlue4, #89D1FF);--udex-button-color-primary-toggled-default-text-and-icon: var(--udexColorBlue4, #89D1FF);--udex-button-color-primary-toggled-hover-background: var(--udexColorBlue10, #002A86);--udex-button-color-primary-toggled-hover-border: var(--udexColorBlue4, #89D1FF);--udex-button-color-primary-toggled-hover-text-and-icon: var(--udexColorBlue4, #89D1FF);--udex-button-color-primary-toggled-disabled-background: var(--udexColorNeutralBlack40, #00000066);--udex-button-color-primary-toggled-disabled-border: var(--udexColorBlue4, #89D1FF);--udex-button-color-primary-toggled-disabled-text-and-icon: var(--udexColorBlue4, #89D1FF);--udex-button-color-secondary-standard-default-background: var(--udexColorNeutralWhite0, #FFFFFF00);--udex-button-color-secondary-standard-default-border: var(--udexColorNeutralWhite, #FFFFFF);--udex-button-color-secondary-standard-default-text-and-icon: var(--udexColorNeutralWhite, #FFFFFF);--udex-button-color-secondary-standard-hover-background: var(--udexColorNeutralBlack10, #0000001A);--udex-button-color-secondary-standard-hover-border: var(--udexColorGrey5, #8396A8);--udex-button-color-secondary-standard-hover-text-and-icon: var(--udexColorBlue3, #A6E0FF);--udex-button-color-secondary-standard-active-background: var(--udexColorNeutralBlack40, #00000066);--udex-button-color-secondary-standard-active-border: var(--udexColorBlue4, #89D1FF);--udex-button-color-secondary-standard-active-text-and-icon: var(--udexColorBlue4, #89D1FF);--udex-button-color-secondary-standard-disabled-background: var(--udexColorNeutralWhite0, #FFFFFF00);--udex-button-color-secondary-standard-disabled-border: var(--udexColorNeutralWhite, #FFFFFF);--udex-button-color-secondary-standard-disabled-text-and-icon: var(--udexColorNeutralWhite, #FFFFFF);--udex-button-color-secondary-toggled-default-background: var(--udexColorNeutralWhite0, #FFFFFF00);--udex-button-color-secondary-toggled-default-border: var(--udexColorNeutralWhite, #FFFFFF);--udex-button-color-secondary-toggled-default-text-and-icon: var(--udexColorNeutralWhite, #FFFFFF);--udex-button-color-secondary-toggled-hover-background: var(--udexColorNeutralBlack10, #0000001A);--udex-button-color-secondary-toggled-hover-border: var(--udexColorGrey5, #8396A8);--udex-button-color-secondary-toggled-hover-text-and-icon: var(--udexColorBlue3, #A6E0FF);--udex-button-color-secondary-toggled-disabled-background: var(--udexColorNeutralWhite0, #FFFFFF00);--udex-button-color-secondary-toggled-disabled-border: var(--udexColorNeutralWhite, #FFFFFF);--udex-button-color-secondary-toggled-disabled-text-and-icon: var(--udexColorNeutralWhite, #FFFFFF);--udex-button-color-tertiary-standard-default-background: var(--udexColorNeutralWhite0, #FFFFFF00);--udex-button-color-tertiary-standard-default-border: var(--udexColorNeutralWhite0, #FFFFFF00);--udex-button-color-tertiary-standard-default-text-and-icon: var(--udexColorNeutralWhite, #FFFFFF);--udex-button-color-tertiary-standard-hover-background: var(--udexColorNeutralBlack10, #0000001A);--udex-button-color-tertiary-standard-hover-border: var(--udexColorGrey5, #8396A8);--udex-button-color-tertiary-standard-hover-text-and-icon: var(--udexColorBlue3, #A6E0FF);--udex-button-color-tertiary-standard-active-background: var(--udexColorNeutralBlack40, #00000066);--udex-button-color-tertiary-standard-active-border: var(--udexColorBlue4, #89D1FF);--udex-button-color-tertiary-standard-active-text-and-icon: var(--udexColorBlue4, #89D1FF);--udex-button-color-tertiary-standard-disabled-background: var(--udexColorNeutralBlack, #000000);--udex-button-color-tertiary-standard-disabled-border: var(--udexColorNeutralWhite, #FFFFFF);--udex-button-color-tertiary-standard-disabled-text-and-icon: var(--udexColorNeutralWhite, #FFFFFF);--udex-button-color-tertiary-toggled-default-background: var(--udexColorNeutralWhite0, #FFFFFF00);--udex-button-color-tertiary-toggled-default-border: var(--udexColorNeutralWhite0, #FFFFFF00);--udex-button-color-tertiary-toggled-default-text-and-icon: var(--udexColorNeutralWhite, #FFFFFF);--udex-button-color-tertiary-toggled-hover-background: var(--udexColorNeutralBlack10, #0000001A);--udex-button-color-tertiary-toggled-hover-border: var(--udexColorGrey5, #8396A8);--udex-button-color-tertiary-toggled-hover-text-and-icon: var(--udexColorBlue3, #A6E0FF);--udex-button-color-tertiary-toggled-disabled-background: var(--udexColorNeutralWhite0, #FFFFFF00);--udex-button-color-tertiary-toggled-disabled-border: var(--udexColorNeutralWhite, #FFFFFF);--udex-button-color-tertiary-toggled-disabled-text-and-icon: var(--udexColorNeutralWhite, #FFFFFF);--udex-button-color-invisible-standard-default-text-and-icon: var(--udexColorBlue3, #A6E0FF);--udex-button-color-invisible-standard-hover-text-and-icon: var(--udexColorNeutralWhite, #FFFFFF);--udex-button-color-invisible-standard-active-text-and-icon: var(--udexColorBlue5, #4DB1FF);--udex-button-color-invisible-standard-disabled-text-and-icon: var(--udexColorBlue3, #A6E0FF);--udex-button-color-positive-standard-default-background: var(--udexColorGreen8, #256F3A);--udex-button-color-positive-standard-default-border: var(--udexColorGreen3, #BDE986);--udex-button-color-positive-standard-default-text-and-icon: var(--udexColorGreen2, #EBF5CB);--udex-button-color-positive-standard-hover-background: var(--udexColorGreen10, #164323);--udex-button-color-positive-standard-hover-border: var(--udexColorGreen3, #BDE986);--udex-button-color-positive-standard-hover-text-and-icon: var(--udexColorGreen3, #BDE986);--udex-button-color-positive-standard-active-background: var(--udexColorGrey11, #12171C);--udex-button-color-positive-standard-active-border: var(--udexColorGreen4, #97DD40);--udex-button-color-positive-standard-active-text-and-icon: var(--udexColorGreen4, #97DD40);--udex-button-color-positive-standard-disabled-background: var(--udexColorGreen8, #256F3A);--udex-button-color-positive-standard-disabled-border: var(--udexColorGreen3, #BDE986);--udex-button-color-positive-standard-disabled-text-and-icon: var(--udexColorGreen2, #EBF5CB);--udex-button-color-positive-toggled-default-background: var(--udexColorGrey11, #12171C);--udex-button-color-positive-toggled-default-border: var(--udexColorBlue4, #89D1FF);--udex-button-color-positive-toggled-default-text-and-icon: var(--udexColorBlue4, #89D1FF);--udex-button-color-positive-toggled-hover-background: var(--udexColorBlue10, #002A86);--udex-button-color-positive-toggled-hover-border: var(--udexColorBlue4, #89D1FF);--udex-button-color-positive-toggled-hover-text-and-icon: var(--udexColorBlue4, #89D1FF);--udex-button-color-positive-toggled-disabled-background: var(--udexColorGrey11, #12171C);--udex-button-color-positive-toggled-disabled-border: var(--udexColorBlue4, #89D1FF);--udex-button-color-positive-toggled-disabled-text-and-icon: var(--udexColorBlue4, #89D1FF);--udex-button-color-negative-standard-default-background: var(--udexColorRed8, #AA0808);--udex-button-color-negative-standard-default-border: var(--udexColorRed3, #FFB2D2);--udex-button-color-negative-standard-default-text-and-icon: var(--udexColorRed2, #FFD5EA);--udex-button-color-negative-standard-hover-background: var(--udexColorRed10, #5A0404);--udex-button-color-negative-standard-hover-border: var(--udexColorRed3, #FFB2D2);--udex-button-color-negative-standard-hover-text-and-icon: var(--udexColorRed3, #FFB2D2);--udex-button-color-negative-standard-active-background: var(--udexColorGrey11, #12171C);--udex-button-color-negative-standard-active-border: var(--udexColorRed4, #FF8CB2);--udex-button-color-negative-standard-active-text-and-icon: var(--udexColorRed4, #FF8CB2);--udex-button-color-negative-standard-disabled-background: var(--udexColorRed8, #AA0808);--udex-button-color-negative-standard-disabled-border: var(--udexColorRed3, #FFB2D2);--udex-button-color-negative-standard-disabled-text-and-icon: var(--udexColorRed2, #FFD5EA);--udex-button-color-negative-toggled-default-background: var(--udexColorGrey11, #12171C);--udex-button-color-negative-toggled-default-border: var(--udexColorRed3, #FFB2D2);--udex-button-color-negative-toggled-default-text-and-icon: var(--udexColorRed3, #FFB2D2);--udex-button-color-negative-toggled-hover-background: var(--udexColorMango4, #FFC933);--udex-button-color-negative-toggled-hover-border: var(--udexColorNeutralBlack, #000000);--udex-button-color-negative-toggled-hover-text-and-icon: var(--udexColorNeutralBlack, #000000);--udex-button-color-negative-toggled-disabled-background: var(--udexColorBlue4, #89D1FF);--udex-button-color-negative-toggled-disabled-border: var(--udexColorNeutralBlack, #000000);--udex-button-color-negative-toggled-disabled-text-and-icon: var(--udexColorNeutralBlack, #000000);--udex-button-color-warning-standard-default-background: var(--udexColorMango8, #A93E00);--udex-button-color-warning-standard-default-border: var(--udexColorMango3, #FFDF72);--udex-button-color-warning-standard-default-text-and-icon: var(--udexColorMango2, #FFF3B8);--udex-button-color-warning-standard-hover-background: var(--udexColorMango10, #6D1900);--udex-button-color-warning-standard-hover-border: var(--udexColorMango3, #FFDF72);--udex-button-color-warning-standard-hover-text-and-icon: var(--udexColorMango3, #FFDF72);--udex-button-color-warning-standard-active-background: var(--udexColorGrey11, #12171C);--udex-button-color-warning-standard-active-border: var(--udexColorMango4, #FFC933);--udex-button-color-warning-standard-active-text-and-icon: var(--udexColorMango4, #FFC933);--udex-button-color-warning-standard-disabled-background: var(--udexColorMango8, #A93E00);--udex-button-color-warning-standard-disabled-border: var(--udexColorMango3, #FFDF72);--udex-button-color-warning-standard-disabled-text-and-icon: var(--udexColorMango2, #FFF3B8);--udex-button-color-warning-toggled-default-background: var(--udexColorNeutralWhite, #FFFFFF);--udex-button-color-warning-toggled-default-border: var(--udexColorMango10, #6D1900);--udex-button-color-warning-toggled-default-text-and-icon: var(--udexColorMango10, #6D1900);--udex-button-color-warning-toggled-hover-background: var(--udexColorMango2, #FFF3B8);--udex-button-color-warning-toggled-hover-border: var(--udexColorMango8, #A93E00);--udex-button-color-warning-toggled-hover-text-and-icon: var(--udexColorMango8, #A93E00);--udex-button-color-warning-toggled-disabled-background: var(--udexColorNeutralWhite, #FFFFFF);--udex-button-color-warning-toggled-disabled-border: var(--udexColorMango10, #6D1900);--udex-button-color-warning-toggled-disabled-text-and-icon: var(--udexColorMango10, #6D1900)}
|
|
9
9
|
`
|
|
@@ -5,5 +5,5 @@ import defaultTheme from "./sap_horizon/parameters-bundle.css.js";
|
|
|
5
5
|
|
|
6
6
|
registerThemePropertiesLoader("@" + "ui5" + "/" + "webcomponents-theming", "sap_horizon", async () => defaultThemeBase);
|
|
7
7
|
registerThemePropertiesLoader("@" + "s" + "a" + "p" + "u" + "d" + "e" + "x" + "/" + "w" + "e" + "b" + "-" + "c" + "o" + "m" + "p" + "o" + "n" + "e" + "n" + "t" + "s", "sap_horizon", async () => defaultTheme, "host");
|
|
8
|
-
export default `:host{--udex-side-navigation-navigation-separator-radius: 0;--udex-side-navigation-navigation-separator-background-color: var(--udexColorGrey3);--udex-side-navigation-navigation-separator-height: 1px;--udex-side-navigation-navigation-separator-margin: var(--udexSpacer2) 0;--udex-grid-gutter: 3rem;--udex-grid-margin-m: 4.5rem;--udex-grid-margin-l: 4.5rem;--udex-grid-margin-xl: 5.25rem;--udex-column-width-m: calc((100% - (2 * var(--udex-grid-margin-m)) - (11 * var(--udex-grid-gutter))) / 12);--udex-column-width-l: calc((100% - 2 * var(--udex-grid-margin-l) - 11 * var(--udex-grid-gutter)) / 12);--udex-column-width-xl: calc((100% - 2 * var(--udex-grid-margin-xl) - 11 * var(--udex-grid-gutter)) / 12);--udex-side-navigation-max-width-m: calc(4 * var(--udex-column-width-m) + 3 * var(--udex-grid-gutter));--udex-side-navigation-max-width-l: calc(3 * var(--udex-column-width-l) + 2 * var(--udex-grid-gutter));--udex-side-navigation-max-width-xl: calc(3 * var(--udex-column-width-xl) + 2 * var(--udex-grid-gutter));--udex-side-navigation-max-width: var(--udex-side-navigation-max-width-m);font-size:var(--udexTypographyNavigationMediumMFontSize)}:host([fixed-in-place="true"]){position:sticky;top:0}:host(:not([hidden])){box-shadow:var(--udex-side-navigation-box-shadow);font-family:var(--sapFontFamily);width:100
|
|
8
|
+
export default `:host{--udex-side-navigation-navigation-separator-radius: 0;--udex-side-navigation-navigation-separator-background-color: var(--udexColorGrey3);--udex-side-navigation-navigation-separator-height: 1px;--udex-side-navigation-navigation-separator-margin: var(--udexSpacer2) 0;--udex-grid-gutter: 3rem;--udex-grid-margin-m: 4.5rem;--udex-grid-margin-l: 4.5rem;--udex-grid-margin-xl: 5.25rem;--udex-column-width-m: calc((100% - (2 * var(--udex-grid-margin-m)) - (11 * var(--udex-grid-gutter))) / 12);--udex-column-width-l: calc((100% - 2 * var(--udex-grid-margin-l) - 11 * var(--udex-grid-gutter)) / 12);--udex-column-width-xl: calc((100% - 2 * var(--udex-grid-margin-xl) - 11 * var(--udex-grid-gutter)) / 12);--udex-side-navigation-max-width-m: calc(4 * var(--udex-column-width-m) + 3 * var(--udex-grid-gutter));--udex-side-navigation-max-width-l: calc(3 * var(--udex-column-width-l) + 2 * var(--udex-grid-gutter));--udex-side-navigation-max-width-xl: calc(3 * var(--udex-column-width-xl) + 2 * var(--udex-grid-gutter));--udex-side-navigation-max-width: var(--udex-side-navigation-max-width-m);--udex-side-navigation-additinal-content-padding: var(--udexSpacer24, 24px) 0 0;font-size:var(--udexTypographyNavigationMediumMFontSize)}:host([fixed-in-place="true"]){position:sticky;top:0}:host(:not([hidden])){box-shadow:var(--udex-side-navigation-box-shadow);font-family:var(--sapFontFamily);width:100%;display:flex;flex-direction:column}.ui5-sn-root{height:auto;flex:1 1 auto;min-height:0}:host(:not([hidden])),.ui5-sn-list.ui5-sn-flexible{min-width:auto}.ui5-sn-fixed{padding:0;margin:0}:host(:not([variant="Content"])) .ui5-sn-root .ui5-sn-list.ui5-sn-flexible{padding:var(--udexSpacer8) 0}:host([in-mobile]) .ui5-sn-root .ui5-sn-list.ui5-sn-flexible,:host([variant="Content"]) .ui5-sn-root .ui5-sn-list.ui5-sn-flexible{padding:0}.ui5-sn-root .ui5-sn-list.ui5-sn-fixed{padding:var(--udexSpacer16) 0 var(--udexSpacer8)}.ui5-sn-spacer{background-color:var(--udex-side-navigation-navigation-separator-background-color);min-height:var(--udex-side-navigation-navigation-separator-height);height:var(--udex-side-navigation-navigation-separator-height);border-radius:var(--udex-side-navigation-navigation-separator-radius);box-sizing:content-box;margin:var(--udex-side-navigation-navigation-separator-margin)}@media (min-width: 980px){:host{--udex-side-navigation-max-width: var(--udex-side-navigation-max-width-m)}}@media (min-width: 1280px){:host{--udex-side-navigation-max-width: var(--udex-side-navigation-max-width-l)}}@media (min-width: 1600px){:host{--udex-side-navigation-max-width: var(--udex-side-navigation-max-width-xl)}}:host(:not([variant="Content"])) .ui5-sn-fixed ::slotted(*){width:100%;box-sizing:border-box}.udex-side-navigation__additional-content{text-align:left;padding:var(--udex-side-navigation-additinal-content-padding);border-top:var(--udex-side-navigation-navigation-separator-height) solid var(--udex-side-navigation-navigation-separator-background-color);font-size:var(--udexTypographyBodyXSFontSize);line-height:var(--udexTypographyBodyLineHeight);color:var(--udexColorGrey7)}.udex-side-navigation__additional-content:dir(rtl){text-align:right}:host([collapsed]) .udex-side-navigation__additional-content{display:none}:host([in-mobile]){height:auto}:host([in-mobile]) .ui5-sn-root{height:auto;flex:0 0 auto}:host([in-mobile]) .ui5-sn-root .ui5-sn-list.ui5-sn-flexible,:host([in-mobile]) .ui5-sn-root .ui5-sn-list.ui5-sn-fixed{flex:0 0 auto;min-height:auto;overflow:visible}
|
|
9
9
|
`
|
|
@@ -5,5 +5,5 @@ import defaultTheme from "./sap_horizon/parameters-bundle.css.js";
|
|
|
5
5
|
|
|
6
6
|
registerThemePropertiesLoader("@" + "ui5" + "/" + "webcomponents-theming", "sap_horizon", async () => defaultThemeBase);
|
|
7
7
|
registerThemePropertiesLoader("@" + "s" + "a" + "p" + "u" + "d" + "e" + "x" + "/" + "w" + "e" + "b" + "-" + "c" + "o" + "m" + "p" + "o" + "n" + "e" + "n" + "t" + "s", "sap_horizon", async () => defaultTheme, "host");
|
|
8
|
-
export default `:host{--udex-side-navigation-item-bottom-margin: var(--udexSpacer8, 8px);--udex-side-navigation-icon-size: 20px;--udex-side-navigation-item-padding-left: var(--udexSpacer16, 16px);--udex-side-navigation-mobile-trigger-icon-padding-inline-start: var(--udexSpacer16, 16px);--udex-side-navigation-selected-item-text-weight: var(--udexTypographyFontWeightMedium);--udex-side-navigation-mobile-trigger-shadow: var(--sapContent_Shadow1, 0 2px 8px 0 #2236494D);--udex-side-navigation-mobile-trigger-padding: 10px var(--udexSpacer16, 16px);--udex-side-navigation-mobile-active-trigger-border-color: var(--udexColorBlue8, #0057D2);--udex-side-navigation-mobile-icon-color: var(--udexColorGrey7, #475E75);--udex-side-navigation-mobile-item-label-color: var(--udexColorGrey9, #223548);width:100%;font-size:var(--udexTypographyNavigationMediumMFontSize);font-family:var(--sapFontFamily);position:relative;z-index:106}.udex-side-navigation-mobile__trigger{display:flex;justify-content:space-between;align-items:center;box-shadow:var(--udex-side-navigation-mobile-trigger-shadow);height:var(--udex-side-navigation-item-height);padding:var(--udex-side-navigation-mobile-trigger-padding);cursor:pointer;position:relative}.udex-side-navigation-mobile__trigger:focus-visible{outline:var(--udexRadiusXXS) solid var(--udexColorBlue10);border-radius:var(--udexRadiusXXS)}.udex-side-navigation-mobile__selected-item{display:flex;align-items:center;font-weight:var(--udex-side-navigation-selected-item-text-weight);color:var(--udex-side-navigation-mobile-item-label-color)}.udex-side-navigation-mobile__selected-item-icon{width:var(--udex-side-navigation-icon-size);height:var(--udex-side-navigation-icon-size);min-width:var(--udex-side-navigation-icon-size);color:var(--udex-side-navigation-mobile-icon-color);padding-inline-end:calc(var(--udexSpacer48) - var(--udex-side-navigation-icon-size) - var(--udex-side-navigation-item-padding-left))}.udex-side-navigation-mobile__trigger-toggle-icon{height:1rem;width:1rem;min-width:1rem;color:var(--udex-side-navigation-mobile-icon-color);padding-inline-start:var(--udex-side-navigation-mobile-trigger-icon-padding-inline-start)}.udex-side-navigation-mobile__trigger[active]{box-shadow:var(--udex-side-navigation-mobile-trigger-shadow);position:relative}.udex-side-navigation-mobile__trigger[active]:before{content:"";position:absolute;bottom:-1px;left:0;right:0;height:1px;background-color:var(--udex-side-navigation-mobile-active-trigger-border-color)}.udex-side-navigation-mobile__popover{--udex-dropdown-vertical-distance: 0;--udex-dropdown-border-radius: 0;--udex-dropdown-border-width: 0;--udex-dropdown-pane-max-width: 100%;--udex-dropdown-pane-overflow: auto;margin-top:1px}.udex-side-navigation-mobile__popover:before{content:"";width:100%;height:40px;bottom:100%;position:absolute;box-shadow:var(--udex-side-navigation-mobile-trigger-shadow)}[udex-side-navigation]{--udex-side-navigation-max-width: 100
|
|
8
|
+
export default `:host{--udex-side-navigation-item-bottom-margin: var(--udexSpacer8, 8px);--udex-side-navigation-icon-size: 20px;--udex-side-navigation-item-padding-left: var(--udexSpacer16, 16px);--udex-side-navigation-mobile-trigger-icon-padding-inline-start: var(--udexSpacer16, 16px);--udex-side-navigation-selected-item-text-weight: var(--udexTypographyFontWeightMedium);--udex-side-navigation-mobile-trigger-shadow: var(--sapContent_Shadow1, 0 2px 8px 0 #2236494D);--udex-side-navigation-mobile-trigger-padding: 10px var(--udexSpacer16, 16px);--udex-side-navigation-mobile-active-trigger-border-color: var(--udexColorBlue8, #0057D2);--udex-side-navigation-mobile-icon-color: var(--udexColorGrey7, #475E75);--udex-side-navigation-mobile-item-label-color: var(--udexColorGrey9, #223548);width:100%;font-size:var(--udexTypographyNavigationMediumMFontSize);font-family:var(--sapFontFamily);position:relative;z-index:106}.udex-side-navigation-mobile__trigger{display:flex;justify-content:space-between;align-items:center;box-shadow:var(--udex-side-navigation-mobile-trigger-shadow);height:var(--udex-side-navigation-item-height);padding:var(--udex-side-navigation-mobile-trigger-padding);cursor:pointer;position:relative}.udex-side-navigation-mobile__trigger:focus-visible{outline:var(--udexRadiusXXS) solid var(--udexColorBlue10);border-radius:var(--udexRadiusXXS)}.udex-side-navigation-mobile__selected-item{display:flex;align-items:center;font-weight:var(--udex-side-navigation-selected-item-text-weight);color:var(--udex-side-navigation-mobile-item-label-color)}.udex-side-navigation-mobile__selected-item-icon{width:var(--udex-side-navigation-icon-size);height:var(--udex-side-navigation-icon-size);min-width:var(--udex-side-navigation-icon-size);color:var(--udex-side-navigation-mobile-icon-color);padding-inline-end:calc(var(--udexSpacer48) - var(--udex-side-navigation-icon-size) - var(--udex-side-navigation-item-padding-left))}.udex-side-navigation-mobile__trigger-toggle-icon{height:1rem;width:1rem;min-width:1rem;color:var(--udex-side-navigation-mobile-icon-color);padding-inline-start:var(--udex-side-navigation-mobile-trigger-icon-padding-inline-start)}.udex-side-navigation-mobile__trigger[active]{box-shadow:var(--udex-side-navigation-mobile-trigger-shadow);position:relative}.udex-side-navigation-mobile__trigger[active]:before{content:"";position:absolute;bottom:-1px;left:0;right:0;height:1px;background-color:var(--udex-side-navigation-mobile-active-trigger-border-color)}.udex-side-navigation-mobile__popover{--udex-dropdown-vertical-distance: 0;--udex-dropdown-border-radius: 0;--udex-dropdown-border-width: 0;--udex-dropdown-pane-max-width: 100%;--udex-dropdown-pane-overflow: auto;margin-top:1px}.udex-side-navigation-mobile__popover:before{content:"";width:100%;height:40px;bottom:100%;position:absolute;box-shadow:var(--udex-side-navigation-mobile-trigger-shadow)}[udex-side-navigation]{--udex-side-navigation-max-width: 100%;--udex-side-navigation-additinal-content-padding: var(--udexSpacer24, 24px) var(--udexSpacer16, 16px) var(--udexSpacer8, 8px);padding-block:var(--udexSpacer16)}[udex-side-navigation-item]{--udex-side-navigation-item-padding-inline-start: var(--udexSpacer16, 16px);--udex-side-navigation-item-padding-inline-end: var(--udexSpacer16, 16px);--udex-side-navigation-item-icon-padding-inline-start: var(--udex-side-navigation-mobile-trigger-icon-padding-inline-start)}[udex-side-navigation-sub-item]{--udex-side-navigation-sub-item-padding-inline-start: 44px}
|
|
9
9
|
`
|
|
@@ -5,5 +5,5 @@ import defaultTheme from "./sap_horizon/parameters-bundle.css.js";
|
|
|
5
5
|
|
|
6
6
|
registerThemePropertiesLoader("@" + "ui5" + "/" + "webcomponents-theming", "sap_horizon", async () => defaultThemeBase);
|
|
7
7
|
registerThemePropertiesLoader("@" + "s" + "a" + "p" + "u" + "d" + "e" + "x" + "/" + "w" + "e" + "b" + "-" + "c" + "o" + "m" + "p" + "o" + "n" + "e" + "n" + "t" + "s", "sap_horizon", async () => defaultTheme, "host");
|
|
8
|
-
export default `:host{--udex-slider-color-track-start-point: var(--sapSlider_Selected_Background, #0070f2);--udex-slider-color-track-active: var(--sapSlider_Selected_Background, #0070f2);--udex-slider-color-handle-focus-range: var(--sapSlider_Selected_BorderColor, #0070f2);--udex-slider-color-handle-active-background: var(--sapSlider_Active_HandleBackground, #ffffff);--udex-slider-color-handle-default-icon: var(--sapContent_Selected_ForegroundColor, #0040b0);--udex-slider-radius-range-size: var(--udexRadiusM, 8px);--udex-slider-handle-width: 2.75rem;--udex-slider-handle-top: -.875rem;--udex-slider-handle-height: var(--udexSpacer32, 2rem);--udex-slider-start-end-point-left: -1rem;--udex-slider-start-end-point-right: -1rem;--udex-slider-progress-after-background: var(--sapContent_MeasureIndicatorColor, #5b738b);--udex-slider-handle-icon-size: var(--udexSpacer20, 1.25rem);--udex-slider-tooltip-bottom: 2.5rem;--udex-slider-tooltip-border: 1px solid var(--udexColorGrey4, #A9B4BE);--udex-slider-tooltip-border-radius: var(--udexSpacer4, .25rem);--udex-slider-tooltip-font-size: var(--udexTypographyNavigationRegularMFontSize, 14px);--udex-slider-tooltip-color: var(--udexColorGrey9, #223548);--udex-slider-tooltip-background: var(--sapBaseColor, #ffffff);--udex-slider-tooltip-height: var(--udexSpacer32, 2rem);--udex-slider-tooltip-min-width: 2.75rem;--udex-slider-tickmark-in-range-bg: var(--sapSlider_Selected_BorderColor, #0070f2);--udex-slider-tickmark-bg: var(--sapContent_MeasureIndicatorColor, #5b738b);--udex-slider-label-color: var(--sapContent_MeasureIndicatorColor, #5b738b);--udex-slider-handle-focus-border: 2px solid var(--sapSlider_Active_HandleBorderColor);--udex-slider-
|
|
8
|
+
export default `:host{--udex-slider-color-track-start-point: var(--sapSlider_Selected_Background, #0070f2);--udex-slider-color-track-active: var(--sapSlider_Selected_Background, #0070f2);--udex-slider-color-handle-focus-range: var(--sapSlider_Selected_BorderColor, #0070f2);--udex-slider-color-handle-active-background: var(--sapSlider_Active_HandleBackground, #ffffff);--udex-slider-color-handle-default-icon: var(--sapContent_Selected_ForegroundColor, #0040b0);--udex-slider-radius-range-size: var(--udexRadiusM, 8px);--udex-slider-handle-width: 2.75rem;--udex-slider-handle-top: -.875rem;--udex-slider-handle-height: var(--udexSpacer32, 2rem);--udex-slider-start-end-point-left: -1rem;--udex-slider-start-end-point-right: -1rem;--udex-slider-progress-after-background: var(--sapContent_MeasureIndicatorColor, #5b738b);--udex-slider-handle-icon-size: var(--udexSpacer20, 1.25rem);--udex-slider-tooltip-bottom: 2.5rem;--udex-slider-tooltip-border: 1px solid var(--udexColorGrey4, #A9B4BE);--udex-slider-tooltip-border-radius: var(--udexSpacer4, .25rem);--udex-slider-tooltip-font-size: var(--udexTypographyNavigationRegularMFontSize, 14px);--udex-slider-tooltip-color: var(--udexColorGrey9, #223548);--udex-slider-tooltip-background: var(--sapBaseColor, #ffffff);--udex-slider-tooltip-height: var(--udexSpacer32, 2rem);--udex-slider-tooltip-min-width: 2.75rem;--udex-slider-tickmark-in-range-bg: var(--sapSlider_Selected_BorderColor, #0070f2);--udex-slider-tickmark-bg: var(--sapContent_MeasureIndicatorColor, #5b738b);--udex-slider-label-color: var(--sapContent_MeasureIndicatorColor, #5b738b);--udex-slider-handle-focus-border: 2px solid var(--sapSlider_Active_HandleBorderColor);--udex-slider-root-padding: 1rem 1.0625rem}:host{font-family:var(--sapFontFamily);font-weight:var(--udexTypographyFontWeightRegular, 400);font-size:var(--udexTypographyNavigationRegularMFontSize, 14px);line-height:var(--udexTypographyHeadingLineHeight, 1.1);color:var(--sapContent_MeasureIndicatorColor, #5b738b);height:74px;padding:var(--udex-slider-root-padding)}[ui5-slider-handle]{--_ui5_slider_handle_width: var(--udex-slider-handle-width);--_ui5_slider_handle_height: var(--udex-slider-handle-height);width:var(--udex-slider-handle-width);height:var(--udex-slider-handle-height);border-radius:var(--udex-slider-radius-range-size);z-index:5}[ui5-slider-handle]:focus{border:var(--udex-slider-handle-focus-border)}[ui5-slider-handle]::part(icon){width:var(--udex-slider-handle-icon-size);height:var(--udex-slider-handle-icon-size);color:var(--udex-slider-color-handle-default-icon)}.ui5-slider-progress-container:before{background-color:var(--udex-slider-color-track-start-point);inset-inline-start:var(--udex-slider-start-end-point-left)}.ui5-slider-progress-container:after{background-color:var(--udex-slider-progress-after-background);inset-inline-end:var(--udex-slider-start-end-point-right)}.ui5-slider-progress{background-color:var(--udex-slider-color-track-active)}[ui5-slider-scale]::part(progress):focus:after{content:"";display:block;position:absolute;box-sizing:border-box;border:var(--_ui5_range_slider_progress_focus_border);border-radius:var(--_ui5_range_slider_progress_focus_border_radius);top:var(--_ui5_range_slider_progress_focus_top);height:var(--_ui5_range_slider_progress_focus_height);inset-inline-start:var(--_ui5_range_slider_progress_focus_left);inset-inline-end:var(--_ui5_range_slider_progress_focus_right)}:host([desktop]) [ui5-slider-handle]:focus,[ui5-slider-handle]:focus-visible{background-color:var(--_ui5_range_slider_handle_background_focus)}.ui5-slider-root:focus .ui5-slider-inner [ui5-slider-handle],[ui5-slider-handle]:focus{border:var(--udex-slider-handle-focus-border)}.ui5-slider-handle-container{margin-inline-start:calc(-1 * var(--udex-slider-handle-width) / 2);top:var(--udex-slider-handle-top)}.ui5-slider-handle{height:var(--udex-slider-handle-height);width:var(--udex-slider-handle-width);border-radius:var(--udex-slider-radius-range-size)}:host([desktop]) .ui5-slider-handle:focus,.ui5-slider-handle:focus-visible{background-color:var(--_ui5_range_slider_handle_background_focus)}.ui5-slider-root:focus .ui5-slider-inner .ui5-slider-handle,.ui5-slider-handle:focus{border:var(--udex-slider-handle-focus-border)}[slider-icon]{color:var(--udex-slider-color-handle-default-icon);width:var(--udex-slider-handle-icon-size);height:var(--udex-slider-handle-icon-size)}:host .ui5-slider-inner .ui5-slider-labels li,.ui5-slider-labels li{height:1.375rem;font-family:var(--sapFontFamily);font-size:var(--udexTypographyNavigationRegularMFontSize, 14px);color:var(--udex-slider-label-color)}.ui5-slider-tickmarks li{border-inline-start:1px solid var(--udex-slider-tickmark-bg)}.ui5-slider-tickmarks li.ui5-slider-tickmark-in-range{border-inline-start:1px solid var(--udex-slider-tickmark-in-range-bg)}.ui5-slider-evo-root{padding:0 14px}[ui5-slider-scale]{--sapFontSmallSize: var(--udexTypographyNavigationRegularMFontSize, 14px);--_ui5_slider_handle_height: var(--udex-slider-handle-height);--_ui5_slider_handle_width: var(--udex-slider-handle-width);--_ui5_range_slider_progress_focus_border: 2px solid var(--udex-slider-color-handle-focus-range);--_ui5_range_slider_progress_focus_border_radius: var(--udex-slider-radius-range-size);--_ui5_range_slider_progress_focus_top: -1.12rem;--_ui5_range_slider_progress_focus_height: calc(var(--udex-slider-handle-height) + 8px);--_ui5_range_slider_progress_focus_left: calc(-1 * (var(--udex-slider-handle-width) / 2) - 5px);--_ui5_range_slider_progress_focus_right: calc(-1 * (var(--udex-slider-handle-width) / 2) - 5px);--_ui5_slider_scale_dots_distance: -14px}[ui5-slider-scale]::part(inner):before{border:0}:host(:not([hidden])) .ui5-slider-handle-container [ui5-slider-tooltip],[ui5-slider-tooltip]{box-sizing:border-box;height:var(--udex-slider-tooltip-height);min-width:var(--udex-slider-tooltip-min-width);border:var(--udex-slider-tooltip-border);box-shadow:var(--sapContent_Shadow0, 0px 2px 4px 0px rgba(34, 53, 72, .2));border-radius:var(--udex-slider-tooltip-border-radius);font-size:var(--udex-slider-tooltip-font-size);color:var(--udex-slider-tooltip-color);background-color:var(--udex-slider-tooltip-background);padding:8px 12px;margin-top:calc(-1 * var(--udex-slider-tooltip-bottom))}
|
|
9
9
|
`
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export default
|
|
1
|
+
export default ``
|