@sapudex/web-components 2.12.1 → 2.14.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (251) hide show
  1. package/cypress/specs/EventRibbon.cy.tsx +10 -2
  2. package/cypress/specs/FilterMenu.cy.tsx +17 -1
  3. package/cypress/specs/HeroBanner.cy.tsx +174 -0
  4. package/cypress/specs/SelectBox.cy.tsx +17 -0
  5. package/cypress/specs/SocialMediaButton.cy.tsx +6 -0
  6. package/cypress/support/component-imports.instrumented.ts +2 -0
  7. package/cypress/support/component-imports.src.ts +2 -0
  8. package/dist/Accordion.d.ts +4 -3
  9. package/dist/Accordion.js.map +1 -1
  10. package/dist/AccordionItem.js.map +1 -1
  11. package/dist/Breadcrumbs.d.ts +2 -1
  12. package/dist/Breadcrumbs.js +2 -2
  13. package/dist/Breadcrumbs.js.map +1 -1
  14. package/dist/Checkbox.js +1 -1
  15. package/dist/Checkbox.js.map +1 -1
  16. package/dist/ContactItem.d.ts +1 -0
  17. package/dist/ContactItem.js.map +1 -1
  18. package/dist/ControlButton.js +3 -3
  19. package/dist/ControlButton.js.map +1 -1
  20. package/dist/CountrySelector.d.ts +1 -0
  21. package/dist/CountrySelector.js +1 -1
  22. package/dist/CountrySelector.js.map +1 -1
  23. package/dist/DatePicker.d.ts +3 -2
  24. package/dist/DatePicker.js.map +1 -1
  25. package/dist/Dropdown.js.map +1 -1
  26. package/dist/EventRibbon.js +1 -1
  27. package/dist/EventRibbon.js.map +1 -1
  28. package/dist/EventRibbonTemplate.js +3 -2
  29. package/dist/EventRibbonTemplate.js.map +1 -1
  30. package/dist/FilterMenu.d.ts +11 -5
  31. package/dist/FilterMenu.js +7 -0
  32. package/dist/FilterMenu.js.map +1 -1
  33. package/dist/FilterMenuGroupHeader.js.map +1 -1
  34. package/dist/FilterMenuItem.js.map +1 -1
  35. package/dist/Footer.d.ts +1 -0
  36. package/dist/Footer.js.map +1 -1
  37. package/dist/HeroBanner.d.ts +8 -0
  38. package/dist/HeroBanner.js +6 -0
  39. package/dist/HeroBanner.js.map +1 -1
  40. package/dist/InputGroup.js.map +1 -1
  41. package/dist/LinkList.js.map +1 -1
  42. package/dist/LinkListItem.d.ts +1 -0
  43. package/dist/LinkListItem.js.map +1 -1
  44. package/dist/List.d.ts +1 -0
  45. package/dist/List.js +1 -1
  46. package/dist/List.js.map +1 -1
  47. package/dist/ListGroupHeader.d.ts +1 -0
  48. package/dist/ListGroupHeader.js.map +1 -1
  49. package/dist/ListGroupHeaderBase.js.map +1 -1
  50. package/dist/ListItem.d.ts +1 -0
  51. package/dist/ListItem.js +1 -1
  52. package/dist/ListItem.js.map +1 -1
  53. package/dist/ListItemBase.d.ts +5 -4
  54. package/dist/ListItemBase.js.map +1 -1
  55. package/dist/ListSelectAll.d.ts +1 -0
  56. package/dist/ListSelectAll.js.map +1 -1
  57. package/dist/MastheadCountrySelector.d.ts +10 -9
  58. package/dist/MastheadCountrySelector.js.map +1 -1
  59. package/dist/MastheadItem.d.ts +2 -1
  60. package/dist/MastheadItem.js.map +1 -1
  61. package/dist/MastheadMenu.d.ts +1 -0
  62. package/dist/MastheadMenu.js.map +1 -1
  63. package/dist/MastheadMenuItem.js.map +1 -1
  64. package/dist/MastheadMobileMenu.d.ts +1 -0
  65. package/dist/MastheadMobileMenu.js.map +1 -1
  66. package/dist/MastheadProfileMenu.d.ts +4 -3
  67. package/dist/MastheadProfileMenu.js +2 -2
  68. package/dist/MastheadProfileMenu.js.map +1 -1
  69. package/dist/MastheadShell.d.ts +12 -11
  70. package/dist/MastheadShell.js.map +1 -1
  71. package/dist/MediaPlayer.d.ts +2 -1
  72. package/dist/MediaPlayer.js.map +1 -1
  73. package/dist/MediaPlayerVimeo.d.ts +1 -0
  74. package/dist/MediaPlayerVimeo.js.map +1 -1
  75. package/dist/MediaPlayerYoutube.d.ts +1 -0
  76. package/dist/MediaPlayerYoutube.js.map +1 -1
  77. package/dist/Pagination.d.ts +3 -2
  78. package/dist/Pagination.js.map +1 -1
  79. package/dist/PromoTile.d.ts +12 -22
  80. package/dist/PromoTile.js +6 -7
  81. package/dist/PromoTile.js.map +1 -1
  82. package/dist/RatingIndicator.js.map +1 -1
  83. package/dist/Search.d.ts +11 -5
  84. package/dist/Search.js +6 -6
  85. package/dist/Search.js.map +1 -1
  86. package/dist/SearchableListBase.d.ts +5 -4
  87. package/dist/SearchableListBase.js.map +1 -1
  88. package/dist/SecondaryNavigation.d.ts +1 -0
  89. package/dist/SecondaryNavigation.js.map +1 -1
  90. package/dist/SecondaryNavigationItem.d.ts +3 -2
  91. package/dist/SecondaryNavigationItem.js.map +1 -1
  92. package/dist/SecondaryNavigationItemBase.js.map +1 -1
  93. package/dist/SecondaryNavigationSubItem.d.ts +3 -2
  94. package/dist/SecondaryNavigationSubItem.js.map +1 -1
  95. package/dist/SelectBox.d.ts +6 -0
  96. package/dist/SelectBox.js +7 -0
  97. package/dist/SelectBox.js.map +1 -1
  98. package/dist/SelectBoxGroupHeader.js.map +1 -1
  99. package/dist/SideNavigationMobile.d.ts +1 -1
  100. package/dist/SideNavigationMobile.js.map +1 -1
  101. package/dist/SocialMediaButton.d.ts +8 -0
  102. package/dist/SocialMediaButton.js +10 -1
  103. package/dist/SocialMediaButton.js.map +1 -1
  104. package/dist/SocialMediaButtonTemplate.js +1 -1
  105. package/dist/SocialMediaButtonTemplate.js.map +1 -1
  106. package/dist/StepInput.d.ts +3 -2
  107. package/dist/StepInput.js.map +1 -1
  108. package/dist/StepInputTemplate.js +1 -1
  109. package/dist/StepInputTemplate.js.map +1 -1
  110. package/dist/Switch.js.map +1 -1
  111. package/dist/Tab.d.ts +1 -2
  112. package/dist/Tab.js.map +1 -1
  113. package/dist/TabNavigation.d.ts +1 -0
  114. package/dist/TabNavigation.js.map +1 -1
  115. package/dist/Table.d.ts +2 -2
  116. package/dist/Table.js.map +1 -1
  117. package/dist/TableCellBase.js.map +1 -1
  118. package/dist/TableRowBase.js.map +1 -1
  119. package/dist/Tag.d.ts +1 -0
  120. package/dist/Tag.js.map +1 -1
  121. package/dist/TagGroup.d.ts +1 -0
  122. package/dist/TagGroup.js.map +1 -1
  123. package/dist/TextField.d.ts +2 -1
  124. package/dist/TextField.js.map +1 -1
  125. package/dist/Tile.d.ts +2 -0
  126. package/dist/Tile.js.map +1 -1
  127. package/dist/Tooltip.d.ts +11 -0
  128. package/dist/Tooltip.js +42 -0
  129. package/dist/Tooltip.js.map +1 -1
  130. package/dist/Upload.d.ts +1 -0
  131. package/dist/Upload.js.map +1 -1
  132. package/dist/UploadItem.js +1 -1
  133. package/dist/UploadItem.js.map +1 -1
  134. package/dist/Wizard.d.ts +2 -2
  135. package/dist/Wizard.js.map +1 -1
  136. package/dist/WizardTab.js +1 -1
  137. package/dist/WizardTab.js.map +1 -1
  138. package/dist/assets/{InputSuggestions-CgAp8PwR.js → InputSuggestions-AxcsfuTc.js} +1 -1
  139. package/dist/assets/{ListItemStandardExpandableTextTemplate-D5HEHY33.js → ListItemStandardExpandableTextTemplate-CaS49yZt.js} +1 -1
  140. package/dist/assets/{bundle.esm-CjcqU0ib.js → bundle.esm-DzkSPQ0p.js} +157 -157
  141. package/dist/css/themes/EventRibbon.css +1 -1
  142. package/dist/css/themes/Link.css +1 -1
  143. package/dist/css/themes/RatingIndicator.css +1 -1
  144. package/dist/css/themes/Slider.css +1 -1
  145. package/dist/css/themes/SocialMediaButton.css +1 -1
  146. package/dist/custom-elements-internal.json +136 -12
  147. package/dist/custom-elements.json +101 -12
  148. package/dist/generated/templates/HeroBannerTemplate.lit.js +2 -1
  149. package/dist/generated/templates/HeroBannerTemplate.lit.js.map +1 -1
  150. package/dist/generated/templates/TooltipTemplate.lit.js +1 -1
  151. package/dist/generated/templates/TooltipTemplate.lit.js.map +1 -1
  152. package/dist/generated/themes/EventRibbon.css.d.ts +1 -1
  153. package/dist/generated/themes/EventRibbon.css.js +1 -1
  154. package/dist/generated/themes/EventRibbon.css.js.map +1 -1
  155. package/dist/generated/themes/Link.css.d.ts +1 -1
  156. package/dist/generated/themes/Link.css.js +1 -1
  157. package/dist/generated/themes/Link.css.js.map +1 -1
  158. package/dist/generated/themes/RatingIndicator.css.d.ts +1 -1
  159. package/dist/generated/themes/RatingIndicator.css.js +1 -1
  160. package/dist/generated/themes/RatingIndicator.css.js.map +1 -1
  161. package/dist/generated/themes/Slider.css.d.ts +1 -1
  162. package/dist/generated/themes/Slider.css.js +1 -1
  163. package/dist/generated/themes/Slider.css.js.map +1 -1
  164. package/dist/generated/themes/SocialMediaButton.css.d.ts +1 -1
  165. package/dist/generated/themes/SocialMediaButton.css.js +1 -1
  166. package/dist/generated/themes/SocialMediaButton.css.js.map +1 -1
  167. package/dist/types/PromoTile.d.ts +1 -1
  168. package/dist/types/PromoTile.js +57 -57
  169. package/dist/types/PromoTile.js.map +1 -1
  170. package/dist/vscode.html-custom-data.json +6 -6
  171. package/dist/web-types.json +72 -19
  172. package/package.json +1 -1
  173. package/src/Accordion.ts +5 -4
  174. package/src/AccordionItem.ts +1 -0
  175. package/src/Breadcrumbs.ts +4 -10
  176. package/src/Checkbox.ts +3 -2
  177. package/src/ContactItem.ts +1 -0
  178. package/src/ControlButton.ts +3 -3
  179. package/src/CountrySelector.ts +2 -5
  180. package/src/DatePicker.ts +3 -2
  181. package/src/Dropdown.ts +0 -1
  182. package/src/EventRibbon.ts +1 -1
  183. package/src/EventRibbonTemplate.tsx +6 -7
  184. package/src/FilterMenu.ts +16 -7
  185. package/src/FilterMenuGroupHeader.ts +0 -1
  186. package/src/FilterMenuItem.ts +1 -0
  187. package/src/Footer.ts +1 -0
  188. package/src/HeroBanner.hbs +3 -0
  189. package/src/HeroBanner.ts +14 -1
  190. package/src/InputGroup.ts +0 -1
  191. package/src/LinkList.ts +1 -0
  192. package/src/LinkListItem.ts +1 -0
  193. package/src/List.ts +3 -8
  194. package/src/ListGroupHeader.ts +1 -0
  195. package/src/ListGroupHeaderBase.ts +0 -1
  196. package/src/ListItem.ts +2 -3
  197. package/src/ListItemBase.ts +6 -6
  198. package/src/ListSelectAll.ts +1 -0
  199. package/src/MastheadCountrySelector.ts +12 -11
  200. package/src/MastheadItem.ts +2 -1
  201. package/src/MastheadMenu.ts +1 -0
  202. package/src/MastheadMenuItem.ts +1 -0
  203. package/src/MastheadMobileMenu.ts +1 -0
  204. package/src/MastheadProfileMenu.ts +7 -5
  205. package/src/MastheadShell.ts +14 -12
  206. package/src/MediaPlayer.ts +2 -2
  207. package/src/MediaPlayerVimeo.ts +1 -0
  208. package/src/MediaPlayerYoutube.ts +1 -0
  209. package/src/Pagination.ts +3 -2
  210. package/src/PromoTile.ts +16 -26
  211. package/src/RatingIndicator.ts +0 -1
  212. package/src/Search.ts +14 -17
  213. package/src/SearchableListBase.ts +8 -5
  214. package/src/SecondaryNavigation.ts +1 -0
  215. package/src/SecondaryNavigationItem.ts +4 -11
  216. package/src/SecondaryNavigationItemBase.ts +0 -1
  217. package/src/SecondaryNavigationSubItem.ts +3 -2
  218. package/src/SelectBox.ts +10 -12
  219. package/src/SelectBoxGroupHeader.ts +0 -1
  220. package/src/SideNavigationMobile.ts +1 -1
  221. package/src/SocialMediaButton.ts +17 -1
  222. package/src/SocialMediaButtonTemplate.tsx +3 -1
  223. package/src/StepInput.ts +4 -14
  224. package/src/StepInputTemplate.tsx +1 -1
  225. package/src/Switch.ts +0 -1
  226. package/src/Tab.ts +1 -2
  227. package/src/TabNavigation.ts +5 -14
  228. package/src/Table.ts +2 -2
  229. package/src/TableCellBase.ts +0 -1
  230. package/src/TableRowBase.ts +0 -1
  231. package/src/Tag.ts +1 -0
  232. package/src/TagGroup.ts +1 -0
  233. package/src/TextField.ts +2 -1
  234. package/src/Tile.ts +3 -1
  235. package/src/Tooltip.hbs +5 -1
  236. package/src/Tooltip.ts +52 -0
  237. package/src/Upload.ts +1 -0
  238. package/src/UploadItem.ts +1 -4
  239. package/src/Wizard.ts +2 -2
  240. package/src/WizardTab.ts +1 -1
  241. package/src/generated/templates/HeroBannerTemplate.lit.ts +2 -1
  242. package/src/generated/templates/TooltipTemplate.lit.ts +1 -1
  243. package/src/generated/themes/EventRibbon.css.ts +1 -1
  244. package/src/generated/themes/Link.css.ts +1 -1
  245. package/src/generated/themes/RatingIndicator.css.ts +1 -1
  246. package/src/generated/themes/Slider.css.ts +1 -1
  247. package/src/generated/themes/SocialMediaButton.css.ts +1 -1
  248. package/src/themes/EventRibbon.css +20 -9
  249. package/src/themes/Link.css +4 -2
  250. package/src/themes/SocialMediaButton.css +4 -1
  251. package/src/types/PromoTile.ts +1 -1
package/src/generated/themes/Slider.css.ts CHANGED
@@ -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);
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: -.875rem;--udex-slider-start-end-point-right: -.875rem;--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(--sapField_BorderColor, #5B738B);--udex-slider-tooltip-border-radius: var(--udexSpacer4, .25rem);--udex-slider-tooltip-font-size: var(--udexTypographyNavigationRegularMFontSize,14px);--udex-slider-tooltip-color: var(--sapContent_MeasureIndicatorColor, #5b738b);--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-progress-focus-top: -1.18rem;--udex-slider-progress-focus-left:calc(-1.375rem - 5px);--udex-slider-progress-focus-height: 42px;--udex-slider-progress-focus-width:calc(100% + 2.75rem + 10px)}: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}.ui5-slider-progress-container:before{background-color:var(--udex-slider-color-track-start-point)}.ui5-slider-progress{background-color:var(--udex-slider-color-track-active)}.ui5-slider-progress:focus:after{border:2px solid var(--udex-slider-color-handle-focus-range);border-radius:var(--udex-slider-radius-range-size);top:var(--udex-slider-progress-focus-top);height:var(--udex-slider-progress-focus-height);width:var(--udex-slider-progress-focus-width);left:var(--udex-slider-progress-focus-left)}:host([desktop]) .ui5-slider-handle:focus,.ui5-slider-handle:focus-visible{background-color:var(--_ui5-v2-12-1_range_slider_handle_background_focus)}:host .ui5-slider-inner .ui5-slider-labels{top:34px}:host .ui5-slider-inner .ui5-slider-labels li{height:1.375rem;font-family:var(--sapFontFamily);font-size:var(--udexTypographyNavigationRegularMFontSize, 14px)}[slider-icon]{color:var(--udex-slider-color-handle-default-icon)}.ui5-slider-root:focus .ui5-slider-inner .ui5-slider-handle,.ui5-slider-handle:focus{border:var(--udex-slider-handle-focus-border)}.ui5-slider-labels li{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)}:host(:not([hidden])) .ui5-slider-handle-container .ui5-slider-tooltip{bottom:var(--udex-slider-tooltip-bottom);border:var(--udex-slider-tooltip-border);border-radius:var(--udex-slider-tooltip-border-radius);font-size:var(--udex-slider-tooltip-font-size);color:var(--udex-slider-tooltip-color);height:var(--udex-slider-tooltip-height);min-width:var(--udex-slider-tooltip-min-width)}[slider-icon]{width:var(--udex-slider-handle-icon-size);height:var(--udex-slider-handle-icon-size)}.ui5-slider-progress-container:after{background-color:var(--udex-slider-progress-after-background)}.ui5-slider-progress-container:before{inset-inline-start:var(--udex-slider-start-end-point-left)}.ui5-slider-progress-container:after{inset-inline-end:var(--udex-slider-start-end-point-right)}.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)}
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: -.875rem;--udex-slider-start-end-point-right: -.875rem;--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(--sapField_BorderColor, #5B738B);--udex-slider-tooltip-border-radius: var(--udexSpacer4, .25rem);--udex-slider-tooltip-font-size: var(--udexTypographyNavigationRegularMFontSize,14px);--udex-slider-tooltip-color: var(--sapContent_MeasureIndicatorColor, #5b738b);--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-progress-focus-top: -1.18rem;--udex-slider-progress-focus-left:calc(-1.375rem - 5px);--udex-slider-progress-focus-height: 42px;--udex-slider-progress-focus-width:calc(100% + 2.75rem + 10px)}: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}.ui5-slider-progress-container:before{background-color:var(--udex-slider-color-track-start-point)}.ui5-slider-progress{background-color:var(--udex-slider-color-track-active)}.ui5-slider-progress:focus:after{border:2px solid var(--udex-slider-color-handle-focus-range);border-radius:var(--udex-slider-radius-range-size);top:var(--udex-slider-progress-focus-top);height:var(--udex-slider-progress-focus-height);width:var(--udex-slider-progress-focus-width);left:var(--udex-slider-progress-focus-left)}:host([desktop]) .ui5-slider-handle:focus,.ui5-slider-handle:focus-visible{background-color:var(--_ui5-v2-14-0_range_slider_handle_background_focus)}:host .ui5-slider-inner .ui5-slider-labels{top:34px}:host .ui5-slider-inner .ui5-slider-labels li{height:1.375rem;font-family:var(--sapFontFamily);font-size:var(--udexTypographyNavigationRegularMFontSize, 14px)}[slider-icon]{color:var(--udex-slider-color-handle-default-icon)}.ui5-slider-root:focus .ui5-slider-inner .ui5-slider-handle,.ui5-slider-handle:focus{border:var(--udex-slider-handle-focus-border)}.ui5-slider-labels li{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)}:host(:not([hidden])) .ui5-slider-handle-container .ui5-slider-tooltip{bottom:var(--udex-slider-tooltip-bottom);border:var(--udex-slider-tooltip-border);border-radius:var(--udex-slider-tooltip-border-radius);font-size:var(--udex-slider-tooltip-font-size);color:var(--udex-slider-tooltip-color);height:var(--udex-slider-tooltip-height);min-width:var(--udex-slider-tooltip-min-width)}[slider-icon]{width:var(--udex-slider-handle-icon-size);height:var(--udex-slider-handle-icon-size)}.ui5-slider-progress-container:after{background-color:var(--udex-slider-progress-after-background)}.ui5-slider-progress-container:before{inset-inline-start:var(--udex-slider-start-end-point-left)}.ui5-slider-progress-container:after{inset-inline-end:var(--udex-slider-start-end-point-right)}.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)}
9
9
  `
package/src/generated/themes/SocialMediaButton.css.ts CHANGED
@@ -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);
8
- export default `:host{--udex-social-media-button-width: var(--udexSpacer32, 32px);--udex-social-media-button-height: var(--udexSpacer32, 32px);--udex-social-media-button-border-width: var(--udexCoreSizeBorderXS, 1px);--udex-social-media-button-border-color: var(--sapButton_Neutral_Selected_Background, #FFFFFF);--udex-social-media-button-border-radius: var(--udexRadiusXS, 4px);--udex-social-media-button-background-color: var(--sapButton_Neutral_Background, #FFFFFF);--udex-social-media-button-hover-border-color: var(--sapButton_Neutral_Hover_BorderColor, #A9B4BE);--udex-social-media-button-hover-background-color: var(--sapButton_Neutral_Selected_Background, #FFFFFF);--udex-social-media-button-hover-icon-color: var(--sapButton_Hover_TextColor, #0040B0);--udex-social-media-button-selected-border-color: var(--sapButton_Neutral_Selected_BorderColor, #0040B0);--udex-social-media-button-selected-background-color: var(--sapButton_Neutral_Selected_Background, #FFFFFF);--udexLinkOutlineOffset: calc(-1 * var(--udexRadiusXS, 4px));--udexLinkOutlineRadius: calc(var(--udexRadiusXS, 4px) + 2px)}.udex-social-media-button{width:calc(var(--udex-social-media-button-width) - 2 * var(--udex-social-media-button-border-width));height:calc(var(--udex-social-media-button-height) - 2 * var(--udex-social-media-button-border-width));text-align:center;border-radius:var(--udex-social-media-button-border-radius);background:var(--udex-social-media-button-background-color);border:var(--udex-social-media-button-border-width) solid var(--udex-social-media-button-border-color);display:flex;justify-content:center;align-items:center}.udex-social-media-button svg{max-height:16px}.udex-social-media-button:hover{background-color:var(--udex-social-media-button-hover-background-color);border-color:var(--udex-social-media-button-hover-border-color)}.udex-social-media-button:hover:not(:active) svg path{fill:var(--udex-social-media-button-hover-icon-color)}.udex-social-media-button:active{background-color:var(--udex-social-media-button-selected-background-color);border-color:var(--udex-social-media-button-selected-border-color)}.hidden{display:none}
8
+ export default `:host{--udex-social-media-button-width: var(--udexSpacer32, 32px);--udex-social-media-button-height: var(--udexSpacer32, 32px);--udex-social-media-button-image-width: var(--udexSpacer16, 16px);--udex-social-media-button-image-height: var(--udexSpacer16, 16px);--udex-social-media-button-border-width: var(--udexCoreSizeBorderXS, 1px);--udex-social-media-button-border-color: var(--sapButton_Neutral_Selected_Background, #FFFFFF);--udex-social-media-button-border-radius: var(--udexRadiusXS, 4px);--udex-social-media-button-background-color: var(--sapButton_Neutral_Background, #FFFFFF);--udex-social-media-button-hover-border-color: var(--sapButton_Neutral_Hover_BorderColor, #A9B4BE);--udex-social-media-button-hover-background-color: var(--sapButton_Neutral_Selected_Background, #FFFFFF);--udex-social-media-button-hover-icon-color: var(--sapButton_Hover_TextColor, #0040B0);--udex-social-media-button-selected-border-color: var(--sapButton_Neutral_Selected_BorderColor, #0040B0);--udex-social-media-button-selected-background-color: var(--sapButton_Neutral_Selected_Background, #FFFFFF);--udexLinkOutlineOffset: calc(-1 * var(--udexRadiusXS, 4px));--udexLinkOutlineRadius: calc(var(--udexRadiusXS, 4px) + 2px)}.udex-social-media-button{width:calc(var(--udex-social-media-button-width) - 2 * var(--udex-social-media-button-border-width));height:calc(var(--udex-social-media-button-height) - 2 * var(--udex-social-media-button-border-width));text-align:center;border-radius:var(--udex-social-media-button-border-radius);background:var(--udex-social-media-button-background-color);border:var(--udex-social-media-button-border-width) solid var(--udex-social-media-button-border-color);display:flex;justify-content:center;align-items:center}.udex-social-media-button svg{max-height:var(--udex-social-media-button-image-height);max-width:var(--udex-social-media-button-image-width)}.udex-social-media-button:hover{background-color:var(--udex-social-media-button-hover-background-color);border-color:var(--udex-social-media-button-hover-border-color)}.udex-social-media-button:hover:not(:active) svg path{fill:var(--udex-social-media-button-hover-icon-color)}.udex-social-media-button:active{background-color:var(--udex-social-media-button-selected-background-color);border-color:var(--udex-social-media-button-selected-border-color)}.hidden{display:none}
9
9
  `
package/src/themes/EventRibbon.css CHANGED
@@ -241,12 +241,19 @@
241
241
  --udex-event-ribbon-background-color: transparent;
242
242
  --udex-event-ribbon-hover-background-color: transparent;
243
243
 
244
+ --udex-event-ribbon-background-blend-mode: multiply;
245
+ --udex-event-ribbon-background-position: center;
246
+ --udex-event-ribbon-background-size: 100%;
247
+ --udex-event-ribbon-hover-background-size: 112%;
248
+
244
249
  --udex-event-ribbon-margin-xl: 84px;
245
250
  --udex-event-ribbon-margin-m-l: 72px;
246
251
  --udex-event-ribbon-margin-s: 48px;
247
252
  --udex-event-ribbon-margin-xs: 24px;
248
253
 
249
254
  --udex-event-ribbon-logo-height: auto;
255
+ --udex-event-ribbon-custom-logo-dark-filter: none;
256
+ --udex-event-ribbon-logo-dark-filter: brightness(0) invert(1);
250
257
 
251
258
  --udex-event-ribbon-column-width: calc((100vw - (2 * var(--udex-event-ribbon-margin-xl)) - (11 * var(--udexGridXLGutters))) / 12);
252
259
  }
@@ -273,9 +280,9 @@
273
280
 
274
281
  .udex-event-ribbon__container-with-background-image {
275
282
  background-image: var(--udex-event-ribbon-background-image);
276
- background-blend-mode: multiply;
277
- background-position: center;
278
- background-size: 100%;
283
+ background-blend-mode: var(--udex-event-ribbon-background-blend-mode);
284
+ background-position: var(--udex-event-ribbon-background-position);
285
+ background-size: var(--udex-event-ribbon-background-size);
279
286
  background-repeat: no-repeat;
280
287
  transition: background ease-out 300ms;
281
288
  }
@@ -291,7 +298,7 @@
291
298
  }
292
299
 
293
300
  .udex-event-ribbon__container-with-background-image:hover {
294
- background-size: 112%;
301
+ background-size: var(--udex-event-ribbon-hover-background-size);
295
302
  }
296
303
 
297
304
  :host([mode="dark"]) .udex-event-ribbon__container {
@@ -302,7 +309,7 @@
302
309
  position: relative;
303
310
  display: flex;
304
311
  justify-content: flex-end;
305
- width: 24.8%;
312
+ width: 24%;
306
313
  }
307
314
 
308
315
  :host([event-logo='sapphire']) {
@@ -327,8 +334,12 @@
327
334
  max-width: 100%;
328
335
  }
329
336
 
330
- :host([mode="dark"]) .udex-event-ribbon__logo-img {
331
- filter: brightness(0) invert(1);
337
+ :host([mode="dark"]) .udex-event-ribbon__custom-logo {
338
+ filter: var(--udex-event-ribbon-custom-logo-dark-filter);
339
+ }
340
+
341
+ :host([mode="dark"]) .udex-event-ribbon__logo-img:not(.udex-event-ribbon__custom-logo) {
342
+ filter: var(--udex-event-ribbon-logo-dark-filter);
332
343
  }
333
344
 
334
345
  .udex-event-ribbon__text {
@@ -337,7 +348,7 @@
337
348
  padding: 0;
338
349
  font-size: var(--udexTypographyBodyXSFontSize);
339
350
  line-height: var(--udexTypographyBodyLineHeight);
340
- width: 51%;
351
+ width: 52%;
341
352
  max-height: 100%;
342
353
  display: -webkit-box;
343
354
  -webkit-box-orient: vertical;
@@ -352,7 +363,7 @@
352
363
  display: flex;
353
364
  align-items: center;
354
365
  gap: var(--udexSpacer8, 8px);
355
- width: 21%;
366
+ width: 24%;
356
367
  }
357
368
 
358
369
  .udex-event-ribbon__link-text {
package/src/themes/Link.css CHANGED
@@ -6,12 +6,12 @@
6
6
  --udex-link-focus-outline-offset: var(--udexLinkOutlineOffset, 0px);
7
7
  --udex-link-focus-border-radius: var(--udexLinkOutlineRadius, 2px);
8
8
  --udex-link-emphasized-text-decoration: none;
9
- --udex-link-icon-height: 24px;
9
+ --udex-link-icon-height: 16px;
10
10
  --udex-link-line-height: var(--udexTypographyBodyLineHeight, 1.5);
11
11
  --udex-link-color: var(--udexColorBlue8);
12
12
  --udex-link-hover-color: var(--udexColorBlue10);
13
13
  --udex-link-active-color: var(--udexColorBlue11);
14
- --udex-link-icon-width: var(--sapFontSize);
14
+ --udex-link-icon-width: 16px;
15
15
  --udex-link-white-space: break-spaces;
16
16
  --udex-link-subtle-color: var(--udexColorGrey8, #354A5F);
17
17
  --udex-link-subtle-hover-color: var(--udexColorGrey11, #12171C);
@@ -69,6 +69,8 @@
69
69
  }
70
70
 
71
71
  .ui5-link-root {
72
+ display: inline-flex;
73
+ align-items: center;
72
74
  overflow: visible;
73
75
  line-height: var(--udex-link-line-height);
74
76
  }
package/src/themes/SocialMediaButton.css CHANGED
@@ -1,6 +1,8 @@
1
1
  :host {
2
2
  --udex-social-media-button-width: var(--udexSpacer32, 32px);
3
3
  --udex-social-media-button-height: var(--udexSpacer32, 32px);
4
+ --udex-social-media-button-image-width: var(--udexSpacer16, 16px);
5
+ --udex-social-media-button-image-height: var(--udexSpacer16, 16px);
4
6
  --udex-social-media-button-border-width: var(--udexCoreSizeBorderXS, 1px);
5
7
  --udex-social-media-button-border-color: var(--sapButton_Neutral_Selected_Background, #FFFFFF);
6
8
  --udex-social-media-button-border-radius: var(--udexRadiusXS, 4px);
@@ -28,7 +30,8 @@
28
30
  }
29
31
 
30
32
  .udex-social-media-button svg {
31
- max-height: 16px;
33
+ max-height: var(--udex-social-media-button-image-height);
34
+ max-width: var(--udex-social-media-button-image-width);
32
35
  }
33
36
 
34
37
  .udex-social-media-button:hover {
package/src/types/PromoTile.ts CHANGED
@@ -1,4 +1,4 @@
1
- export enum UDExPromoTileColorSheme {
1
+ export enum UDExPromoTileColorScheme {
2
2
  Grey1 = "Grey1",
3
3
  Grey2 = "Grey2",
4
4
  Grey7 = "Grey7",