@sapudex/web-components 0.117.1 → 0.138.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 (536) hide show
  1. package/bundle.esm.js +5 -0
  2. package/config/wdio.conf.js +19 -8
  3. package/dist/Accordion.d.ts +1 -1
  4. package/dist/Accordion.js +1 -1
  5. package/dist/Accordion.js.map +1 -1
  6. package/dist/AccordionItem.d.ts +3 -2
  7. package/dist/AccordionItem.js +4 -4
  8. package/dist/AccordionItem.js.map +1 -1
  9. package/dist/Avatar.d.ts +12 -0
  10. package/dist/Avatar.js +22 -1
  11. package/dist/Avatar.js.map +1 -1
  12. package/dist/AvatarGroup.d.ts +28 -0
  13. package/dist/AvatarGroup.js +126 -0
  14. package/dist/AvatarGroup.js.map +1 -0
  15. package/dist/Checkbox.d.ts +1 -1
  16. package/dist/Checkbox.js +1 -1
  17. package/dist/Checkbox.js.map +1 -1
  18. package/dist/CountrySelector.d.ts +24 -6
  19. package/dist/CountrySelector.js +25 -7
  20. package/dist/CountrySelector.js.map +1 -1
  21. package/dist/DatePicker.d.ts +1 -0
  22. package/dist/DatePicker.js +4 -1
  23. package/dist/DatePicker.js.map +1 -1
  24. package/dist/Dropdown.d.ts +12 -2
  25. package/dist/Dropdown.js +18 -6
  26. package/dist/Dropdown.js.map +1 -1
  27. package/dist/FilterMenu.d.ts +26 -6
  28. package/dist/FilterMenu.js +61 -21
  29. package/dist/FilterMenu.js.map +1 -1
  30. package/dist/Footer.d.ts +36 -1
  31. package/dist/Footer.js +35 -37
  32. package/dist/Footer.js.map +1 -1
  33. package/dist/HeroBanner.js +3 -0
  34. package/dist/HeroBanner.js.map +1 -1
  35. package/dist/Link.d.ts +1 -1
  36. package/dist/Link.js +1 -1
  37. package/dist/Link.js.map +1 -1
  38. package/dist/List.d.ts +1 -1
  39. package/dist/List.js +17 -1
  40. package/dist/List.js.map +1 -1
  41. package/dist/ListGroupHeader.d.ts +2 -2
  42. package/dist/ListGroupHeader.js +2 -2
  43. package/dist/ListGroupHeader.js.map +1 -1
  44. package/dist/ListItem.d.ts +3 -3
  45. package/dist/ListItem.js +6 -7
  46. package/dist/ListItem.js.map +1 -1
  47. package/dist/ListSelectAll.d.ts +1 -1
  48. package/dist/ListSelectAll.js +1 -1
  49. package/dist/ListSelectAll.js.map +1 -1
  50. package/dist/MastheadItem.d.ts +10 -1
  51. package/dist/MastheadItem.js +29 -18
  52. package/dist/MastheadItem.js.map +1 -1
  53. package/dist/MastheadMenu.d.ts +5 -0
  54. package/dist/MastheadMenu.js +24 -0
  55. package/dist/MastheadMenu.js.map +1 -1
  56. package/dist/MastheadMenuItem.d.ts +2 -3
  57. package/dist/MastheadMenuItem.js +2 -17
  58. package/dist/MastheadMenuItem.js.map +1 -1
  59. package/dist/MastheadMobileMenu.d.ts +25 -5
  60. package/dist/MastheadMobileMenu.js +135 -21
  61. package/dist/MastheadMobileMenu.js.map +1 -1
  62. package/dist/MastheadProfileMenu.d.ts +13 -4
  63. package/dist/MastheadProfileMenu.js +40 -9
  64. package/dist/MastheadProfileMenu.js.map +1 -1
  65. package/dist/MastheadShell.d.ts +11 -0
  66. package/dist/MastheadShell.js +52 -8
  67. package/dist/MastheadShell.js.map +1 -1
  68. package/dist/MediaPlayer.d.ts +3 -3
  69. package/dist/MediaPlayer.js +115 -25
  70. package/dist/MediaPlayer.js.map +1 -1
  71. package/dist/MessageStrip.js +1 -1
  72. package/dist/MessageStrip.js.map +1 -1
  73. package/dist/Pagination.d.ts +3 -0
  74. package/dist/Pagination.js +16 -4
  75. package/dist/Pagination.js.map +1 -1
  76. package/dist/PasswordField.d.ts +14 -4
  77. package/dist/PasswordField.js +24 -15
  78. package/dist/PasswordField.js.map +1 -1
  79. package/dist/PhoneNumberField.d.ts +32 -0
  80. package/dist/PhoneNumberField.js +51 -2
  81. package/dist/PhoneNumberField.js.map +1 -1
  82. package/dist/RatingBar.d.ts +53 -0
  83. package/dist/RatingBar.js +96 -0
  84. package/dist/RatingBar.js.map +1 -0
  85. package/dist/Review.d.ts +71 -0
  86. package/dist/Review.js +108 -0
  87. package/dist/Review.js.map +1 -0
  88. package/dist/ReviewItem.d.ts +105 -0
  89. package/dist/ReviewItem.js +157 -0
  90. package/dist/ReviewItem.js.map +1 -0
  91. package/dist/Search.d.ts +64 -2
  92. package/dist/Search.js +62 -8
  93. package/dist/Search.js.map +1 -1
  94. package/dist/SearchableListBase.d.ts +1 -1
  95. package/dist/SearchableListBase.js +1 -1
  96. package/dist/SearchableListBase.js.map +1 -1
  97. package/dist/SecondaryNavigation.d.ts +9 -8
  98. package/dist/SecondaryNavigation.js +59 -46
  99. package/dist/SecondaryNavigation.js.map +1 -1
  100. package/dist/SecondaryNavigationItem.d.ts +1 -1
  101. package/dist/SecondaryNavigationItem.js +15 -5
  102. package/dist/SecondaryNavigationItem.js.map +1 -1
  103. package/dist/SecondaryNavigationItemBase.d.ts +16 -2
  104. package/dist/SecondaryNavigationItemBase.js +27 -1
  105. package/dist/SecondaryNavigationItemBase.js.map +1 -1
  106. package/dist/SecondaryNavigationSubItem.d.ts +2 -1
  107. package/dist/SecondaryNavigationSubItem.js +5 -2
  108. package/dist/SecondaryNavigationSubItem.js.map +1 -1
  109. package/dist/SelectBox.d.ts +33 -9
  110. package/dist/SelectBox.js +121 -60
  111. package/dist/SelectBox.js.map +1 -1
  112. package/dist/StatusBadge.d.ts +5 -5
  113. package/dist/StatusBadge.js.map +1 -1
  114. package/dist/Switch.d.ts +20 -0
  115. package/dist/Switch.js +22 -0
  116. package/dist/Switch.js.map +1 -1
  117. package/dist/Tab.d.ts +9 -1
  118. package/dist/Tab.js +4 -1
  119. package/dist/Tab.js.map +1 -1
  120. package/dist/TabNavigation.d.ts +21 -21
  121. package/dist/TabNavigation.js +83 -102
  122. package/dist/TabNavigation.js.map +1 -1
  123. package/dist/Tag.d.ts +22 -7
  124. package/dist/Tag.js +52 -21
  125. package/dist/Tag.js.map +1 -1
  126. package/dist/TagGroup.d.ts +94 -0
  127. package/dist/TagGroup.js +174 -0
  128. package/dist/TagGroup.js.map +1 -0
  129. package/dist/TextArea.d.ts +14 -1
  130. package/dist/TextArea.js +18 -0
  131. package/dist/TextArea.js.map +1 -1
  132. package/dist/TextField.d.ts +32 -13
  133. package/dist/TextField.js +32 -2
  134. package/dist/TextField.js.map +1 -1
  135. package/dist/Tooltip.d.ts +3 -3
  136. package/dist/Tooltip.js +4 -4
  137. package/dist/Tooltip.js.map +1 -1
  138. package/dist/assets/bundle.esm-bb1c7413.js +316 -0
  139. package/dist/assets/messagebundle_en-c677773a.js +1 -0
  140. package/dist/assets/parameters-bundle.css-c897ae23.js +2 -0
  141. package/dist/assets/video.es-60bfb78c.js +228 -0
  142. package/dist/css/themes/AccordionItem.css +1 -1
  143. package/dist/css/themes/Avatar.css +1 -1
  144. package/dist/css/themes/Badge.css +1 -1
  145. package/dist/css/themes/CountrySelector.css +1 -1
  146. package/dist/css/themes/Divider.css +1 -1
  147. package/dist/css/themes/FilterMenu.css +1 -1
  148. package/dist/css/themes/Footer.css +1 -1
  149. package/dist/css/themes/HeroBanner.css +1 -1
  150. package/dist/css/themes/ListItem.css +1 -1
  151. package/dist/css/themes/MastheadItem.css +1 -1
  152. package/dist/css/themes/MastheadMobileMenu.css +1 -1
  153. package/dist/css/themes/MastheadShell.css +1 -1
  154. package/dist/css/themes/Modal.css +1 -1
  155. package/dist/css/themes/Pagination.css +1 -1
  156. package/dist/css/themes/PhoneNumberField.css +1 -1
  157. package/dist/css/themes/RatingBar.css +1 -0
  158. package/dist/css/themes/RatingIndicator.css +1 -1
  159. package/dist/css/themes/Review.css +1 -0
  160. package/dist/css/themes/ReviewItem.css +1 -0
  161. package/dist/css/themes/Search.css +1 -1
  162. package/dist/css/themes/SecondaryNavigation.css +1 -1
  163. package/dist/css/themes/SecondaryNavigationItem.css +1 -1
  164. package/dist/css/themes/SecondaryNavigationSubItem.css +1 -1
  165. package/dist/css/themes/SelectBox.css +1 -1
  166. package/dist/css/themes/Slider.css +1 -1
  167. package/dist/css/themes/StepInput.css +1 -1
  168. package/dist/css/themes/TabNavigation.css +1 -1
  169. package/dist/css/themes/Tag.css +1 -1
  170. package/dist/css/themes/TagGroup.css +1 -0
  171. package/dist/css/themes/TextArea.css +1 -1
  172. package/dist/css/themes/TextField.css +1 -1
  173. package/dist/css/themes/Toast.css +1 -1
  174. package/dist/css/themes/overrides/@ui5/webcomponents/sap_glow/parameters-bundle.css +1 -1
  175. package/dist/custom-elements-internal.json +1435 -444
  176. package/dist/custom-elements.json +1267 -358
  177. package/dist/data/CountryListISO3166.js +162 -162
  178. package/dist/data/CountryListISO3166.js.map +1 -1
  179. package/dist/generated/assets/i18n/messagebundle_en.json +1 -1
  180. package/dist/generated/assets/themes/overrides/@ui5/webcomponents/sap_glow/parameters-bundle.css.json +1 -1
  181. package/dist/generated/i18n/i18n-defaults.d.ts +11 -1
  182. package/dist/generated/i18n/i18n-defaults.js +18 -8
  183. package/dist/generated/i18n/i18n-defaults.js.map +1 -1
  184. package/dist/generated/templates/AccordionItemTemplate.lit.js +1 -1
  185. package/dist/generated/templates/AccordionItemTemplate.lit.js.map +1 -1
  186. package/dist/generated/templates/CountrySelectorTemplate.lit.js +3 -3
  187. package/dist/generated/templates/CountrySelectorTemplate.lit.js.map +1 -1
  188. package/dist/generated/templates/DatePickerTemplate.lit.js +1 -1
  189. package/dist/generated/templates/DatePickerTemplate.lit.js.map +1 -1
  190. package/dist/generated/templates/DropdownTemplate.lit.js +2 -2
  191. package/dist/generated/templates/DropdownTemplate.lit.js.map +1 -1
  192. package/dist/generated/templates/FilterMenuTemplate.lit.js +1 -1
  193. package/dist/generated/templates/FilterMenuTemplate.lit.js.map +1 -1
  194. package/dist/generated/templates/FooterTemplate.lit.js +26 -28
  195. package/dist/generated/templates/FooterTemplate.lit.js.map +1 -1
  196. package/dist/generated/templates/HeroBannerTemplate.lit.js +7 -7
  197. package/dist/generated/templates/HeroBannerTemplate.lit.js.map +1 -1
  198. package/dist/generated/templates/ListItemTemplate.lit.js +6 -6
  199. package/dist/generated/templates/ListItemTemplate.lit.js.map +1 -1
  200. package/dist/generated/templates/ListSelectAllTemplate.lit.js +1 -1
  201. package/dist/generated/templates/ListSelectAllTemplate.lit.js.map +1 -1
  202. package/dist/generated/templates/MastheadItemTemplate.lit.js +3 -3
  203. package/dist/generated/templates/MastheadItemTemplate.lit.js.map +1 -1
  204. package/dist/generated/templates/MastheadMenuItemTemplate.lit.js +1 -1
  205. package/dist/generated/templates/MastheadMenuItemTemplate.lit.js.map +1 -1
  206. package/dist/generated/templates/MastheadMenuTemplate.lit.js +2 -2
  207. package/dist/generated/templates/MastheadMenuTemplate.lit.js.map +1 -1
  208. package/dist/generated/templates/MastheadMobileMenuTemplate.lit.js +16 -12
  209. package/dist/generated/templates/MastheadMobileMenuTemplate.lit.js.map +1 -1
  210. package/dist/generated/templates/MastheadProfileMenuTemplate.lit.js +2 -2
  211. package/dist/generated/templates/MastheadProfileMenuTemplate.lit.js.map +1 -1
  212. package/dist/generated/templates/MastheadShellTemplate.lit.js +8 -8
  213. package/dist/generated/templates/MastheadShellTemplate.lit.js.map +1 -1
  214. package/dist/generated/templates/MediaPlayerTemplate.lit.js +2 -2
  215. package/dist/generated/templates/MediaPlayerTemplate.lit.js.map +1 -1
  216. package/dist/generated/templates/PaginationTemplate.lit.js +1 -1
  217. package/dist/generated/templates/PaginationTemplate.lit.js.map +1 -1
  218. package/dist/generated/templates/PasswordFieldTemplate.lit.js +1 -2
  219. package/dist/generated/templates/PasswordFieldTemplate.lit.js.map +1 -1
  220. package/dist/generated/templates/PhoneNumberFieldTemplate.lit.js +6 -3
  221. package/dist/generated/templates/PhoneNumberFieldTemplate.lit.js.map +1 -1
  222. package/dist/generated/templates/RatingBarTemplate.lit.d.ts +4 -0
  223. package/dist/generated/templates/RatingBarTemplate.lit.js +6 -0
  224. package/dist/generated/templates/RatingBarTemplate.lit.js.map +1 -0
  225. package/dist/generated/templates/ReviewItemTemplate.lit.d.ts +4 -0
  226. package/dist/generated/templates/ReviewItemTemplate.lit.js +8 -0
  227. package/dist/generated/templates/ReviewItemTemplate.lit.js.map +1 -0
  228. package/dist/generated/templates/ReviewTemplate.lit.d.ts +4 -0
  229. package/dist/generated/templates/ReviewTemplate.lit.js +10 -0
  230. package/dist/generated/templates/ReviewTemplate.lit.js.map +1 -0
  231. package/dist/generated/templates/SearchSuggestionsTemplate.lit.js +1 -1
  232. package/dist/generated/templates/SearchSuggestionsTemplate.lit.js.map +1 -1
  233. package/dist/generated/templates/SearchTemplate.lit.js +7 -7
  234. package/dist/generated/templates/SearchTemplate.lit.js.map +1 -1
  235. package/dist/generated/templates/SecondaryNavigationItemTemplate.lit.js +3 -3
  236. package/dist/generated/templates/SecondaryNavigationItemTemplate.lit.js.map +1 -1
  237. package/dist/generated/templates/SecondaryNavigationSubItemTemplate.lit.js +5 -4
  238. package/dist/generated/templates/SecondaryNavigationSubItemTemplate.lit.js.map +1 -1
  239. package/dist/generated/templates/SecondaryNavigationTemplate.lit.js +7 -6
  240. package/dist/generated/templates/SecondaryNavigationTemplate.lit.js.map +1 -1
  241. package/dist/generated/templates/SelectBoxTemplate.lit.js +2 -2
  242. package/dist/generated/templates/SelectBoxTemplate.lit.js.map +1 -1
  243. package/dist/generated/templates/SwitchTemplate.lit.js +2 -2
  244. package/dist/generated/templates/SwitchTemplate.lit.js.map +1 -1
  245. package/dist/generated/templates/TabHeaderTemplate.lit.js +2 -2
  246. package/dist/generated/templates/TabHeaderTemplate.lit.js.map +1 -1
  247. package/dist/generated/templates/TabInOverflowTemplate.lit.js +6 -6
  248. package/dist/generated/templates/TabInOverflowTemplate.lit.js.map +1 -1
  249. package/dist/generated/templates/TabNavigationPopoverTemplate.lit.js +1 -1
  250. package/dist/generated/templates/TabNavigationPopoverTemplate.lit.js.map +1 -1
  251. package/dist/generated/templates/TabNavigationTemplate.lit.js +4 -2
  252. package/dist/generated/templates/TabNavigationTemplate.lit.js.map +1 -1
  253. package/dist/generated/templates/TagGroupTemplate.lit.d.ts +4 -0
  254. package/dist/generated/templates/TagGroupTemplate.lit.js +8 -0
  255. package/dist/generated/templates/TagGroupTemplate.lit.js.map +1 -0
  256. package/dist/generated/templates/TagTemplate.lit.js +13 -3
  257. package/dist/generated/templates/TagTemplate.lit.js.map +1 -1
  258. package/dist/generated/templates/TextAreaTemplate.lit.js +1 -1
  259. package/dist/generated/templates/TextAreaTemplate.lit.js.map +1 -1
  260. package/dist/generated/templates/TextFieldTemplate.lit.js +2 -2
  261. package/dist/generated/templates/TextFieldTemplate.lit.js.map +1 -1
  262. package/dist/generated/templates/TooltipTemplate.lit.js +1 -1
  263. package/dist/generated/templates/TooltipTemplate.lit.js.map +1 -1
  264. package/dist/generated/themes/AccordionItem.css.js +1 -1
  265. package/dist/generated/themes/AccordionItem.css.js.map +1 -1
  266. package/dist/generated/themes/Avatar.css.js +1 -1
  267. package/dist/generated/themes/Avatar.css.js.map +1 -1
  268. package/dist/generated/themes/Badge.css.js +1 -1
  269. package/dist/generated/themes/Badge.css.js.map +1 -1
  270. package/dist/generated/themes/CountrySelector.css.js +1 -1
  271. package/dist/generated/themes/CountrySelector.css.js.map +1 -1
  272. package/dist/generated/themes/Divider.css.js +1 -1
  273. package/dist/generated/themes/Divider.css.js.map +1 -1
  274. package/dist/generated/themes/FilterMenu.css.js +1 -1
  275. package/dist/generated/themes/FilterMenu.css.js.map +1 -1
  276. package/dist/generated/themes/Footer.css.js +1 -1
  277. package/dist/generated/themes/Footer.css.js.map +1 -1
  278. package/dist/generated/themes/HeroBanner.css.js +1 -1
  279. package/dist/generated/themes/HeroBanner.css.js.map +1 -1
  280. package/dist/generated/themes/ListItem.css.js +1 -1
  281. package/dist/generated/themes/ListItem.css.js.map +1 -1
  282. package/dist/generated/themes/MastheadItem.css.js +1 -1
  283. package/dist/generated/themes/MastheadItem.css.js.map +1 -1
  284. package/dist/generated/themes/MastheadMobileMenu.css.js +1 -1
  285. package/dist/generated/themes/MastheadMobileMenu.css.js.map +1 -1
  286. package/dist/generated/themes/MastheadShell.css.js +1 -1
  287. package/dist/generated/themes/MastheadShell.css.js.map +1 -1
  288. package/dist/generated/themes/Modal.css.js +1 -1
  289. package/dist/generated/themes/Modal.css.js.map +1 -1
  290. package/dist/generated/themes/Pagination.css.js +1 -1
  291. package/dist/generated/themes/Pagination.css.js.map +1 -1
  292. package/dist/generated/themes/PhoneNumberField.css.js +1 -1
  293. package/dist/generated/themes/PhoneNumberField.css.js.map +1 -1
  294. package/dist/generated/themes/RatingBar.css.js +9 -0
  295. package/dist/generated/themes/RatingBar.css.js.map +1 -0
  296. package/dist/generated/themes/RatingIndicator.css.js +1 -1
  297. package/dist/generated/themes/RatingIndicator.css.js.map +1 -1
  298. package/dist/generated/themes/Review.css.d.ts +3 -0
  299. package/dist/generated/themes/Review.css.js +9 -0
  300. package/dist/generated/themes/Review.css.js.map +1 -0
  301. package/dist/generated/themes/ReviewItem.css.d.ts +3 -0
  302. package/dist/generated/themes/ReviewItem.css.js +9 -0
  303. package/dist/generated/themes/ReviewItem.css.js.map +1 -0
  304. package/dist/generated/themes/Search.css.js +1 -1
  305. package/dist/generated/themes/Search.css.js.map +1 -1
  306. package/dist/generated/themes/SecondaryNavigation.css.js +1 -1
  307. package/dist/generated/themes/SecondaryNavigation.css.js.map +1 -1
  308. package/dist/generated/themes/SecondaryNavigationItem.css.js +1 -1
  309. package/dist/generated/themes/SecondaryNavigationItem.css.js.map +1 -1
  310. package/dist/generated/themes/SecondaryNavigationSubItem.css.js +1 -1
  311. package/dist/generated/themes/SecondaryNavigationSubItem.css.js.map +1 -1
  312. package/dist/generated/themes/SelectBox.css.js +1 -1
  313. package/dist/generated/themes/SelectBox.css.js.map +1 -1
  314. package/dist/generated/themes/Slider.css.js +1 -1
  315. package/dist/generated/themes/Slider.css.js.map +1 -1
  316. package/dist/generated/themes/StepInput.css.js +1 -1
  317. package/dist/generated/themes/StepInput.css.js.map +1 -1
  318. package/dist/generated/themes/TabNavigation.css.js +1 -1
  319. package/dist/generated/themes/TabNavigation.css.js.map +1 -1
  320. package/dist/generated/themes/Tag.css.js +1 -1
  321. package/dist/generated/themes/Tag.css.js.map +1 -1
  322. package/dist/generated/themes/TagGroup.css.d.ts +3 -0
  323. package/dist/generated/themes/TagGroup.css.js +9 -0
  324. package/dist/generated/themes/TagGroup.css.js.map +1 -0
  325. package/dist/generated/themes/TextArea.css.js +1 -1
  326. package/dist/generated/themes/TextArea.css.js.map +1 -1
  327. package/dist/generated/themes/TextField.css.js +1 -1
  328. package/dist/generated/themes/TextField.css.js.map +1 -1
  329. package/dist/generated/themes/Toast.css.js +1 -1
  330. package/dist/generated/themes/Toast.css.js.map +1 -1
  331. package/dist/generated/themes/overrides/@ui5/webcomponents/sap_glow/parameters-bundle.css.js +1 -1
  332. package/dist/generated/themes/overrides/@ui5/webcomponents/sap_glow/parameters-bundle.css.js.map +1 -1
  333. package/dist/i18n/messagebundle.properties +35 -7
  334. package/dist/i18n/messagebundle_en.properties +17 -7
  335. package/dist/vscode.html-custom-data.json +260 -95
  336. package/dist/web-types.json +605 -183
  337. package/package.json +9 -9
  338. package/src/Accordion.ts +1 -1
  339. package/src/AccordionItem.hbs +1 -4
  340. package/src/AccordionItem.ts +6 -5
  341. package/src/Avatar.ts +24 -1
  342. package/src/AvatarGroup.ts +135 -0
  343. package/src/Checkbox.ts +1 -1
  344. package/src/CountrySelector.hbs +19 -15
  345. package/src/CountrySelector.ts +42 -9
  346. package/src/DatePicker.hbs +7 -9
  347. package/src/DatePicker.ts +14 -10
  348. package/src/Dropdown.hbs +8 -2
  349. package/src/Dropdown.ts +27 -6
  350. package/src/FilterMenu.hbs +58 -56
  351. package/src/FilterMenu.ts +101 -39
  352. package/src/Footer.hbs +21 -37
  353. package/src/Footer.ts +74 -52
  354. package/src/HeroBanner.hbs +22 -15
  355. package/src/HeroBanner.ts +3 -0
  356. package/src/Link.ts +1 -1
  357. package/src/List.ts +43 -23
  358. package/src/ListGroupHeader.ts +2 -2
  359. package/src/ListItem.hbs +4 -2
  360. package/src/ListItem.ts +8 -10
  361. package/src/ListSelectAll.hbs +1 -1
  362. package/src/ListSelectAll.ts +1 -1
  363. package/src/MastheadItem.hbs +7 -5
  364. package/src/MastheadItem.ts +44 -11
  365. package/src/MastheadMenu.hbs +4 -2
  366. package/src/MastheadMenu.ts +30 -0
  367. package/src/MastheadMenuItem.hbs +0 -2
  368. package/src/MastheadMenuItem.ts +2 -16
  369. package/src/MastheadMobileMenu.hbs +36 -10
  370. package/src/MastheadMobileMenu.ts +162 -22
  371. package/src/MastheadProfileMenu.hbs +6 -2
  372. package/src/MastheadProfileMenu.ts +66 -20
  373. package/src/MastheadShell.hbs +14 -4
  374. package/src/MastheadShell.ts +67 -8
  375. package/src/MediaPlayer.hbs +1 -3
  376. package/src/MediaPlayer.ts +122 -26
  377. package/src/MessageStrip.ts +1 -1
  378. package/src/Pagination.hbs +4 -2
  379. package/src/Pagination.ts +19 -4
  380. package/src/PasswordField.hbs +6 -17
  381. package/src/PasswordField.ts +31 -23
  382. package/src/PhoneNumberField.hbs +26 -6
  383. package/src/PhoneNumberField.ts +77 -2
  384. package/src/RatingBar.hbs +11 -0
  385. package/src/RatingBar.ts +113 -0
  386. package/src/Review.hbs +44 -0
  387. package/src/Review.ts +140 -0
  388. package/src/ReviewItem.hbs +20 -0
  389. package/src/ReviewItem.ts +227 -0
  390. package/src/Search.hbs +19 -14
  391. package/src/Search.ts +113 -6
  392. package/src/SearchSuggestions.hbs +1 -0
  393. package/src/SearchableListBase.ts +1 -1
  394. package/src/SecondaryNavigation.hbs +14 -8
  395. package/src/SecondaryNavigation.ts +76 -56
  396. package/src/SecondaryNavigationItem.hbs +3 -2
  397. package/src/SecondaryNavigationItem.ts +15 -5
  398. package/src/SecondaryNavigationItemBase.ts +41 -3
  399. package/src/SecondaryNavigationSubItem.hbs +13 -10
  400. package/src/SecondaryNavigationSubItem.ts +6 -2
  401. package/src/SelectBox.hbs +84 -83
  402. package/src/SelectBox.ts +155 -72
  403. package/src/StatusBadge.ts +2 -2
  404. package/src/Switch.hbs +3 -3
  405. package/src/Switch.ts +25 -0
  406. package/src/Tab.ts +11 -1
  407. package/src/TabHeader.hbs +3 -1
  408. package/src/TabInOverflow.hbs +19 -6
  409. package/src/TabNavigation.hbs +22 -12
  410. package/src/TabNavigation.ts +93 -117
  411. package/src/TabNavigationPopover.hbs +1 -0
  412. package/src/Tag.hbs +76 -26
  413. package/src/Tag.ts +77 -36
  414. package/src/TagGroup.hbs +48 -0
  415. package/src/TagGroup.ts +222 -0
  416. package/src/TextArea.hbs +36 -34
  417. package/src/TextArea.ts +28 -0
  418. package/src/TextField.hbs +45 -39
  419. package/src/TextField.ts +73 -17
  420. package/src/Tooltip.hbs +2 -2
  421. package/src/Tooltip.ts +5 -5
  422. package/src/data/CountryListISO3166.ts +162 -162
  423. package/src/generated/i18n/i18n-defaults.ts +2 -2
  424. package/src/generated/templates/AccordionItemTemplate.lit.ts +1 -1
  425. package/src/generated/templates/CountrySelectorTemplate.lit.ts +3 -3
  426. package/src/generated/templates/DatePickerTemplate.lit.ts +1 -1
  427. package/src/generated/templates/DropdownTemplate.lit.ts +2 -2
  428. package/src/generated/templates/FilterMenuTemplate.lit.ts +1 -1
  429. package/src/generated/templates/FooterTemplate.lit.ts +26 -28
  430. package/src/generated/templates/HeroBannerTemplate.lit.ts +7 -7
  431. package/src/generated/templates/ListItemTemplate.lit.ts +6 -6
  432. package/src/generated/templates/ListSelectAllTemplate.lit.ts +1 -1
  433. package/src/generated/templates/MastheadItemTemplate.lit.ts +3 -3
  434. package/src/generated/templates/MastheadMenuItemTemplate.lit.ts +1 -1
  435. package/src/generated/templates/MastheadMenuTemplate.lit.ts +2 -2
  436. package/src/generated/templates/MastheadMobileMenuTemplate.lit.ts +16 -12
  437. package/src/generated/templates/MastheadProfileMenuTemplate.lit.ts +2 -2
  438. package/src/generated/templates/MastheadShellTemplate.lit.ts +8 -8
  439. package/src/generated/templates/MediaPlayerTemplate.lit.ts +2 -2
  440. package/src/generated/templates/PaginationTemplate.lit.ts +1 -1
  441. package/src/generated/templates/PasswordFieldTemplate.lit.ts +1 -2
  442. package/src/generated/templates/PhoneNumberFieldTemplate.lit.ts +6 -3
  443. package/src/generated/templates/RatingBarTemplate.lit.ts +11 -0
  444. package/src/generated/templates/ReviewItemTemplate.lit.ts +13 -0
  445. package/src/generated/templates/ReviewTemplate.lit.ts +15 -0
  446. package/src/generated/templates/SearchSuggestionsTemplate.lit.ts +1 -1
  447. package/src/generated/templates/SearchTemplate.lit.ts +7 -7
  448. package/src/generated/templates/SecondaryNavigationItemTemplate.lit.ts +3 -3
  449. package/src/generated/templates/SecondaryNavigationSubItemTemplate.lit.ts +5 -4
  450. package/src/generated/templates/SecondaryNavigationTemplate.lit.ts +7 -6
  451. package/src/generated/templates/SelectBoxTemplate.lit.ts +2 -2
  452. package/src/generated/templates/SwitchTemplate.lit.ts +2 -2
  453. package/src/generated/templates/TabHeaderTemplate.lit.ts +2 -2
  454. package/src/generated/templates/TabInOverflowTemplate.lit.ts +6 -6
  455. package/src/generated/templates/TabNavigationPopoverTemplate.lit.ts +1 -1
  456. package/src/generated/templates/TabNavigationTemplate.lit.ts +4 -2
  457. package/src/generated/templates/TagGroupTemplate.lit.ts +13 -0
  458. package/src/generated/templates/TagTemplate.lit.ts +13 -3
  459. package/src/generated/templates/TextAreaTemplate.lit.ts +1 -1
  460. package/src/generated/templates/TextFieldTemplate.lit.ts +2 -2
  461. package/src/generated/templates/TooltipTemplate.lit.ts +1 -1
  462. package/src/generated/themes/AccordionItem.css.ts +1 -1
  463. package/src/generated/themes/Avatar.css.ts +1 -1
  464. package/src/generated/themes/Badge.css.ts +1 -1
  465. package/src/generated/themes/CountrySelector.css.ts +1 -1
  466. package/src/generated/themes/Divider.css.ts +1 -1
  467. package/src/generated/themes/FilterMenu.css.ts +1 -1
  468. package/src/generated/themes/Footer.css.ts +1 -1
  469. package/src/generated/themes/HeroBanner.css.ts +1 -1
  470. package/src/generated/themes/ListItem.css.ts +1 -1
  471. package/src/generated/themes/MastheadItem.css.ts +1 -1
  472. package/src/generated/themes/MastheadMobileMenu.css.ts +1 -1
  473. package/src/generated/themes/MastheadShell.css.ts +1 -1
  474. package/src/generated/themes/Modal.css.ts +1 -1
  475. package/src/generated/themes/Pagination.css.ts +1 -1
  476. package/src/generated/themes/PhoneNumberField.css.ts +1 -1
  477. package/src/generated/themes/RatingBar.css.ts +13 -0
  478. package/src/generated/themes/RatingIndicator.css.ts +1 -1
  479. package/src/generated/themes/Review.css.ts +13 -0
  480. package/src/generated/themes/ReviewItem.css.ts +13 -0
  481. package/src/generated/themes/Search.css.ts +1 -1
  482. package/src/generated/themes/SecondaryNavigation.css.ts +1 -1
  483. package/src/generated/themes/SecondaryNavigationItem.css.ts +1 -1
  484. package/src/generated/themes/SecondaryNavigationSubItem.css.ts +1 -1
  485. package/src/generated/themes/SelectBox.css.ts +1 -1
  486. package/src/generated/themes/Slider.css.ts +1 -1
  487. package/src/generated/themes/StepInput.css.ts +1 -1
  488. package/src/generated/themes/TabNavigation.css.ts +1 -1
  489. package/src/generated/themes/Tag.css.ts +1 -1
  490. package/src/generated/themes/TagGroup.css.ts +13 -0
  491. package/src/generated/themes/TextArea.css.ts +1 -1
  492. package/src/generated/themes/TextField.css.ts +1 -1
  493. package/src/generated/themes/Toast.css.ts +1 -1
  494. package/src/generated/themes/overrides/@ui5/webcomponents/sap_glow/parameters-bundle.css.ts +1 -1
  495. package/src/i18n/messagebundle.properties +35 -7
  496. package/src/i18n/messagebundle_en.properties +17 -7
  497. package/src/themes/AccordionItem.css +6 -4
  498. package/src/themes/Avatar.css +24 -7
  499. package/src/themes/Badge.css +1 -1
  500. package/src/themes/CountrySelector.css +49 -26
  501. package/src/themes/Divider.css +6 -2
  502. package/src/themes/FilterMenu.css +52 -15
  503. package/src/themes/Footer.css +93 -168
  504. package/src/themes/HeroBanner.css +52 -24
  505. package/src/themes/ListItem.css +4 -0
  506. package/src/themes/MastheadItem.css +12 -2
  507. package/src/themes/MastheadMobileMenu.css +4 -0
  508. package/src/themes/MastheadShell.css +25 -29
  509. package/src/themes/Modal.css +6 -0
  510. package/src/themes/Pagination.css +7 -0
  511. package/src/themes/PhoneNumberField.css +15 -1
  512. package/src/themes/RatingBar.css +52 -0
  513. package/src/themes/Review.css +196 -0
  514. package/src/themes/ReviewItem.css +121 -0
  515. package/src/themes/Search.css +46 -25
  516. package/src/themes/SecondaryNavigation.css +41 -13
  517. package/src/themes/SecondaryNavigationItem.css +6 -4
  518. package/src/themes/SecondaryNavigationSubItem.css +5 -5
  519. package/src/themes/SelectBox.css +51 -24
  520. package/src/themes/StepInput.css +5 -2
  521. package/src/themes/TabNavigation.css +7 -1
  522. package/src/themes/Tag.css +200 -148
  523. package/src/themes/TagGroup.css +90 -0
  524. package/src/themes/TextArea.css +13 -0
  525. package/src/themes/TextField.css +97 -60
  526. package/src/themes/Toast.css +4 -0
  527. package/dist/assets/bundle.esm-f65ae7da.js +0 -315
  528. package/dist/assets/messagebundle_en-7249941b.js +0 -1
  529. package/dist/assets/parameters-bundle.css-76ef62fa.js +0 -2
  530. package/dist/assets/video.es-17aecf95.js +0 -219
  531. package/dist/css/themes/PasswordField.css +0 -1
  532. package/dist/generated/themes/PasswordField.css.js +0 -9
  533. package/dist/generated/themes/PasswordField.css.js.map +0 -1
  534. package/src/generated/themes/PasswordField.css.ts +0 -13
  535. package/src/themes/PasswordField.css +0 -29
  536. /package/dist/generated/themes/{PasswordField.css.d.ts → RatingBar.css.d.ts} +0 -0
package/src/themes/Tag.css CHANGED
@@ -1,110 +1,138 @@
1
1
  :host {
2
- --udex-tags-font-size: var(--udexTypographyBodyXXSFontSize, 12px);
3
- --udex-tags-medium-font-size: var(--udexTypographyBodyXSFontSize, 14px);
4
- --udex-tags-text-color: var(--udexColorGrey9, #223548);
5
- --udex-tags-min-height: 16px;
6
- --udex-tags-line-height: 18px;
7
- --udex-tags-medium-line-height: 21px;
8
- --udex-tags-icon-size: 12px;
9
- --udex-tags-medium-icon-size: 14px;
10
- --udex-tags-radius-size: 6px;
11
- --udex-tags-text-icon-gap: 3px;
12
- --udex-tags-padding-vertical: var(--udexSpacer2, 2px);
13
- --udex-tags-padding-horizontal: var(--udexSpacer8, 8px);
14
- --udex-tags-grey-default-caption-color: var(--udexColorGrey9, #223548);
15
- --udex-tags-grey-default-background-color: var(--sapButton_TokenBackground, var(--udexColorGrey2, #EAECEE));
16
- --udex-tags-grey-hover-caption-color: var(--udexColorGrey9, #223548);
17
- --udex-tags-grey-hover-background-color: var(--udexColorGrey3, #D5DADD);
18
- --udex-tags-grey-selected-caption-color: var(--udexColorBlue8, #0057D2);
19
- --udex-tags-grey-selected-background-color: var(--udexColorBlue2, #D1EFFF);
20
- --udex-tags-grey-hover-selected-caption-color: var(--udexColorBlue9, #0040B0);
21
- --udex-tags-grey-hover-selected-background-color: var(--udexColorBlue3, #A6E0FF);
22
- --udex-tags-grey-read-only-caption-color : var(--udexColorGrey6 ,#5B738B);
23
- --udex-tags-grey-read-only-background-color: var(--sapNeutralBackground, #FFFFFF);
24
- --udex-tags-outlined-default-background-color: var(--udexColorNeutralWhite, #FFFFFF);
25
- --udex-tags-outlined-default-border-color: var(--udexColorGrey4, #A9B4BE);
26
- --udex-tags-outlined-default-border-width: 1px;
27
- --udex-tags-outlined-default-caption-color: var(--udexCoreTextDark, #223548);
28
- --udex-tags-outlined-hover-background-color: var(--udexColorGrey1, #F5F6F7);
29
- --udex-tags-outlined-hover-border-color: var(--udexColorGrey4, #A9B4BE);
30
- --udex-tags-outlined-hover-caption-color: var(--udexCoreTextDark, #223548);;
31
- --udex-tags-outlined-selected-background-color: var(--udexColorNeutralWhite, #FFFFFF);
32
- --udex-tags-outlined-selected-border-color: var(--udexColorBlue7, #0070F2);
33
- --udex-tags-outlined-selected-caption-color: var(--udexColorBlue7, #0070F2);
34
- --udex-tags-outlined-hover-selected-background-color: var(--udexColorBlue1 , #EBF8FF);
35
- --udex-tags-outlined-hover-selected-border-color: var(--udexColorBlue7, #0070F2);
36
- --udex-tags-outlined-hover-selected-caption-color: var(--udexColorBlue7, #0070F2);
37
- --udex-tags-outlined-read-only-background-color: var(--udexColorNeutralWhite, #FFFFFF);
38
- --udex-tags-outlined-read-only-border-color: var(--udexColorGrey4, #A9B4BE);
39
- --udex-tags-outlined-read-only-caption-color: var(--udexColorGrey6 ,#5B738B);
40
- --udex-tags-text-only-default-caption-color: var(--udexColorBlue7, #0070F2);
41
- --udex-tags-text-only-hover-caption-color: var(--udexColorBlue9, #0040B0);
42
- --udex-tags-text-only-hover-selected-caption-color: var(--udexColorBlue11, #00144A);
43
- --udex-tags-text-only-read-only-caption-color: var(--udexColorGrey6, #5B738B);
44
- --udex-tags-text-only-selected-caption-color: var(--udexColorBlue10, #002A86);
45
- --udex-tags-white-default-background-color: var(--udexColorNeutralWhite, #FFFFFF);
46
- --udex-tags-white-default-caption-color: var(--udexCoreTextDark, #223548);
47
- --udex-tags-white-hover-background-color: var(--udexColorGrey2, #EAECEE);
48
- --udex-tags-white-hover-caption-color: var(--udexCoreTextDark, #223548);
49
- --udex-tags-white-hover-selected-background-color: var(--udexColorBlue2, #D1EFFF);
50
- --udex-tags-white-hover-selected-caption-color: var(--udexColorBlue8, #0057D2);
51
- --udex-tags-white-read-only-background-color: var(--udexColorNeutralWhite, #FFFFFF);
52
- --udex-tags-white-read-only-caption-color: var(--udexColorGrey6, #5B738B);
53
- --udex-tags-white-selected-background-color: var(--udexColorBlue1, #EBF8FF);
54
- --udex-tags-white-selected-caption-color: var(--udexColorBlue7, #0070F2);
2
+ --udex-tags-font-size: var(--udexTypographyBodyXXSFontSize, 12px);
3
+ --udex-tags-medium-font-size: var(--udexTypographyBodyXSFontSize, 14px);
4
+ --udex-tags-text-color: var(--udexColorGrey9, #223548);
5
+ --udex-tags-min-height: 16px;
6
+ --udex-tags-line-height: 18px;
7
+ --udex-tags-medium-line-height: 21px;
8
+ --udex-tags-icon-size: 12px;
9
+ --udex-tags-medium-icon-size: 14px;
10
+ --udex-tags-radius-size: 6px;
11
+ --udex-tags-text-icon-gap: 3px;
12
+ --udex-tags-padding-vertical: var(--udexSpacer2, 2px);
13
+ --udex-tags-padding-horizontal: var(--udexSpacer8, 8px);
14
+ --udex-tags-grey-default-caption-color: var(--udexColorGrey9, #223548);
15
+ --udex-tags-grey-default-background-color: var(--sapButton_TokenBackground, var(--udexColorGrey2, #EAECEE));
16
+ --udex-tags-grey-hover-caption-color: var(--udexColorGrey9, #223548);
17
+ --udex-tags-grey-hover-background-color: var(--udexColorGrey3, #D5DADD);
18
+ --udex-tags-grey-selected-caption-color: var(--udexColorBlue8, #0057D2);
19
+ --udex-tags-grey-selected-background-color: var(--udexColorBlue2, #D1EFFF);
20
+ --udex-tags-grey-hover-selected-caption-color: var(--udexColorBlue9, #0040B0);
21
+ --udex-tags-grey-hover-selected-background-color: var(--udexColorBlue3, #A6E0FF);
22
+ --udex-tags-grey-read-only-caption-color : var(--udexColorGrey6 ,#5B738B);
23
+ --udex-tags-grey-read-only-background-color: var(--sapNeutralBackground, #FFFFFF);
24
+ --udex-tags-outlined-default-background-color: var(--udexColorNeutralWhite, #FFFFFF);
25
+ --udex-tags-outlined-default-border-color: var(--udexColorGrey4, #A9B4BE);
26
+ --udex-tags-outlined-default-border-width: 1px;
27
+ --udex-tags-outlined-default-caption-color: var(--udexCoreTextDark, #223548);
28
+ --udex-tags-outlined-hover-background-color: var(--udexColorGrey1, #F5F6F7);
29
+ --udex-tags-outlined-hover-border-color: var(--udexColorGrey4, #A9B4BE);
30
+ --udex-tags-outlined-hover-caption-color: var(--udexCoreTextDark, #223548);;
31
+ --udex-tags-outlined-selected-background-color: var(--udexColorNeutralWhite, #FFFFFF);
32
+ --udex-tags-outlined-selected-border-color: var(--udexColorBlue7, #0070F2);
33
+ --udex-tags-outlined-selected-caption-color: var(--udexColorBlue7, #0070F2);
34
+ --udex-tags-outlined-hover-selected-background-color: var(--udexColorBlue1 , #EBF8FF);
35
+ --udex-tags-outlined-hover-selected-border-color: var(--udexColorBlue7, #0070F2);
36
+ --udex-tags-outlined-hover-selected-caption-color: var(--udexColorBlue7, #0070F2);
37
+ --udex-tags-outlined-read-only-background-color: var(--udexColorNeutralWhite, #FFFFFF);
38
+ --udex-tags-outlined-read-only-border-color: var(--udexColorGrey4, #A9B4BE);
39
+ --udex-tags-outlined-read-only-caption-color: var(--udexColorGrey6 ,#5B738B);
40
+ --udex-tags-text-only-default-caption-color: var(--udexColorBlue7, #0070F2);
41
+ --udex-tags-text-only-hover-caption-color: var(--udexColorBlue9, #0040B0);
42
+ --udex-tags-text-only-hover-selected-caption-color: var(--udexColorBlue11, #00144A);
43
+ --udex-tags-text-only-read-only-caption-color: var(--udexColorGrey6, #5B738B);
44
+ --udex-tags-text-only-selected-caption-color: var(--udexColorBlue10, #002A86);
45
+ --udex-tags-white-default-background-color: var(--udexColorNeutralWhite, #FFFFFF);
46
+ --udex-tags-white-default-caption-color: var(--udexCoreTextDark, #223548);
47
+ --udex-tags-white-hover-background-color: var(--udexColorGrey2, #EAECEE);
48
+ --udex-tags-white-hover-caption-color: var(--udexCoreTextDark, #223548);
49
+ --udex-tags-white-hover-selected-background-color: var(--udexColorBlue2, #D1EFFF);
50
+ --udex-tags-white-hover-selected-caption-color: var(--udexColorBlue8, #0057D2);
51
+ --udex-tags-white-read-only-background-color: var(--udexColorNeutralWhite, #FFFFFF);
52
+ --udex-tags-white-read-only-caption-color: var(--udexColorGrey6, #5B738B);
53
+ --udex-tags-white-selected-background-color: var(--udexColorBlue1, #EBF8FF);
54
+ --udex-tags-white-selected-caption-color: var(--udexColorBlue7, #0070F2);
55
55
  }
56
56
 
57
57
  :host([desktop]) .udex-tag:focus,
58
+ :host([desktop]) .udex-tag__btn-icon:focus,
58
59
  .udex-tag:focus-visible {
59
60
  outline: solid var(--udexSpacer2, 2px) var(--udexColorBlue9, #0040B0);
60
61
  outline-offset: -2px;
61
62
  }
62
63
 
63
64
  .udex-tag {
64
- font-family: var(--sapFontFamily, sans-serif);
65
- font-size: var(--udex-tags-font-size);
66
- line-height: var(--udex-tags-line-height);
67
- color: var(--udex-tags-text-color);
68
- border-radius: var(--udex-tags-radius-size);
69
- cursor: pointer;
70
- display: inline-flex;
71
- padding: var(--udex-tags-padding-vertical) var(--udex-tags-padding-horizontal);
72
- gap: var(--udex-tags-text-icon-gap);
73
- align-items: center;
74
- overflow: hidden;
75
- position: relative;
76
- max-width: 100%;
77
- }
78
-
79
- .udex-tag--medium {
80
- font-size: var(--udex-tags-medium-font-size);
81
- line-height: var(--udex-tags-medium-line-height);
65
+ font-family: var(--sapFontFamily, sans-serif);
66
+ font-size: var(--udex-tags-font-size);
67
+ line-height: var(--udex-tags-line-height);
68
+ color: var(--udex-tags-text-color);
69
+ border-radius: var(--udex-tags-radius-size);
70
+ display: inline-flex;
71
+ padding: var(--udex-tags-padding-vertical) var(--udex-tags-padding-horizontal);
72
+ gap: var(--udex-tags-text-icon-gap);
73
+ align-items: center;
74
+ overflow: hidden;
75
+ position: relative;
76
+ max-width: 100%;
77
+ cursor: pointer;
78
+ }
79
+
80
+ .udex-tag__btn-icon {
81
+ cursor: pointer;
82
+ border: none;
83
+ display: flex;
84
+ padding: 3px 0;
85
+ align-items: center;
86
+ justify-content: center;
87
+ border-radius: var(--udex-tags-radius-size);
88
+ outline-offset: -2px;
89
+ background: transparent;
90
+ color: inherit;
91
+ }
92
+
93
+ .udex-tag.udex-tag--nonselectable.udex-tag--has-icon {
94
+ padding: var(--udexSpacer2) var(--udexSpacer8);
95
+ }
96
+
97
+ .udex-tag--medium {
98
+ font-size: var(--udex-tags-medium-font-size);
99
+ line-height: var(--udex-tags-medium-line-height);
82
100
  }
83
101
 
84
102
  .udex-tag__icon {
85
- height: var(--udex-tags-icon-size);
86
- min-width: var(--udex-tags-icon-size);
87
- color: inherit;
103
+ height: var(--udex-tags-icon-size);
104
+ min-width: var(--udex-tags-icon-size);
105
+ color: inherit;
88
106
  }
89
107
 
90
108
  .udex-tag--medium .udex-tag__icon {
91
- height: var(--udex-tags-medium-icon-size);
92
- min-width: var(--udex-tags-medium-icon-size);
109
+ height: var(--udex-tags-medium-icon-size);
110
+ min-width: var(--udex-tags-medium-icon-size);
111
+ }
112
+
113
+ .udex-tag-grey,
114
+ .udex-tag-grey.udex-tag--nonselectable,
115
+ .udex-tag-grey.udex-tag--nonselectable:hover {
116
+ color: var(--udex-tags-grey-default-caption-color);
117
+ background-color: var(--udex-tags-grey-default-background-color);
93
118
  }
94
119
 
95
- .udex-tag-grey {
96
- color: var(--udex-tags-grey-default-caption-color);
97
- background-color: var(--udex-tags-grey-default-background-color);
120
+ .udex-tag-grey.udex-tag--nonselectable .udex-tag__icon:hover {
121
+ background-color: var(--udex-tags-grey-hover-background-color);
98
122
  }
99
123
 
100
124
  .udex-tag-grey:hover {
101
- color: var(--udex-tags-grey-hover-caption-color);
102
- background-color: var(--udex-tags-grey-hover-background-color);
125
+ color: var(--udex-tags-grey-hover-caption-color);
126
+ background-color: var(--udex-tags-grey-hover-background-color);
103
127
  }
104
128
 
105
129
  .udex-tag-grey.udex-tag--selected {
106
- color: var(--udex-tags-grey-selected-caption-color);
107
- background-color: var(--udex-tags-grey-selected-background-color);
130
+ color: var(--udex-tags-grey-selected-caption-color);
131
+ background-color: var(--udex-tags-grey-selected-background-color);
132
+ }
133
+
134
+ .udex-tag--nonselectable {
135
+ cursor: default;
108
136
  }
109
137
 
110
138
  .udex-tag-grey.udex-tag--nonselectable,
@@ -113,135 +141,155 @@
113
141
  }
114
142
 
115
143
  .udex-tag-grey.udex-tag--selected:after {
116
- content: '';
117
- position: absolute;
118
- height: 2px;
119
- width: 100%;
120
- bottom: 0;
121
- left: 0;
122
- background-color: var(--udex-tags-grey-selected-caption-color);
144
+ content: '';
145
+ position: absolute;
146
+ height: 2px;
147
+ width: 100%;
148
+ bottom: 0;
149
+ left: 0;
150
+ background-color: var(--udex-tags-grey-selected-caption-color);
123
151
  }
124
152
 
125
153
  .udex-tag-grey.udex-tag--selected:hover {
126
- color: var(--udex-tags-grey-hover-selected-caption-color);
127
- background-color: var(--udex-tags-grey-hover-selected-background-color);
154
+ color: var(--udex-tags-grey-hover-selected-caption-color);
155
+ background-color: var(--udex-tags-grey-hover-selected-background-color);
128
156
  }
129
157
 
130
158
  .udex-tag-grey.udex-tag--selected:hover:after {
131
- background-color: var(--udex-tags-grey-hover-selected-caption-color);
159
+ background-color: var(--udex-tags-grey-hover-selected-caption-color);
160
+ }
161
+
162
+ .udex-tag--readonly {
163
+ cursor: default;
132
164
  }
133
165
 
134
166
  .udex-tag-grey.udex-tag--readonly:hover,
135
167
  .udex-tag-grey.udex-tag--readonly {
136
- color: var(--udex-tags-grey-read-only-caption-color);
137
- background-color: var(--udex-tags-grey-read-only-background-color);
138
- cursor: default;
168
+ color: var(--udex-tags-grey-read-only-caption-color);
169
+ background-color: var(--udex-tags-grey-read-only-background-color);
139
170
  }
140
171
 
141
- .udex-tag-outlined {
142
- color: var(--udex-tags-outlined-default-caption-color);
143
- background-color: var(--udex-tags-outlined-default-background-color);
144
- box-shadow: inset 0px 0px 0px var(--udex-tags-outlined-default-border-width) var(--udex-tags-outlined-default-border-color);
172
+ .udex-tag-outlined,
173
+ .udex-tag-outlined.udex-tag--nonselectable:hover {
174
+ color: var(--udex-tags-outlined-default-caption-color);
175
+ background-color: var(--udex-tags-outlined-default-background-color);
176
+ box-shadow: inset 0 0 0 var(--udex-tags-outlined-default-border-width) var(--udex-tags-outlined-default-border-color);
177
+ }
178
+
179
+ .udex-tag-outlined.udex-tag--nonselectable .udex-tag__icon:hover {
180
+ background-color: var(--udex-tags-outlined-hover-background-color);
145
181
  }
146
182
 
147
183
  .udex-tag-outlined:hover {
148
- color: var(--udex-tags-outlined-hover-caption-color);
149
- background-color: var(--udex-tags-outlined-hover-background-color);
150
- box-shadow: inset 0px 0px 0px var(--udex-tags-outlined-default-border-width) var(--udex-tags-outlined-hover-border-color);
184
+ color: var(--udex-tags-outlined-hover-caption-color);
185
+ background-color: var(--udex-tags-outlined-hover-background-color);
186
+ box-shadow: inset 0 0 0 var(--udex-tags-outlined-default-border-width) var(--udex-tags-outlined-hover-border-color);
151
187
  }
152
188
 
153
189
  .udex-tag-outlined.udex-tag--selected {
154
- color: var(--udex-tags-outlined-selected-caption-color);
155
- background-color: var(--udex-tags-outlined-selected-background-color);
156
- box-shadow: inset 0px 0px 0px var(--udex-tags-outlined-default-border-width) var(--udex-tags-outlined-selected-border-color);
190
+ color: var(--udex-tags-outlined-selected-caption-color);
191
+ background-color: var(--udex-tags-outlined-selected-background-color);
192
+ box-shadow: inset 0 0 0 var(--udex-tags-outlined-default-border-width) var(--udex-tags-outlined-selected-border-color);
157
193
  }
158
194
 
159
195
  .udex-tag-outlined.udex-tag--selected:after {
160
- content: '';
161
- position: absolute;
162
- height: 2px;
163
- width: 100%;
164
- bottom: 0;
165
- left: 0;
166
- background-color: var(--udex-tags-outlined-selected-caption-color);
196
+ content: '';
197
+ position: absolute;
198
+ height: 2px;
199
+ width: 100%;
200
+ bottom: 0;
201
+ left: 0;
202
+ background-color: var(--udex-tags-outlined-selected-caption-color);
167
203
  }
168
204
 
169
205
  .udex-tag-outlined.udex-tag--selected:hover {
170
- color: var(--udex-tags-outlined-hover-selected-caption-color);
171
- background-color: var(--udex-tags-outlined-hover-selected-background-color);
172
- box-shadow: inset 0px 0px 0px var(--udex-tags-outlined-default-border-width) var(--udex-tags-outlined-hover-selected-border-color);
206
+ color: var(--udex-tags-outlined-hover-selected-caption-color);
207
+ background-color: var(--udex-tags-outlined-hover-selected-background-color);
208
+ box-shadow: inset 0 0 0 var(--udex-tags-outlined-default-border-width) var(--udex-tags-outlined-hover-selected-border-color);
173
209
  }
174
210
 
175
211
  .udex-tag-outlined.udex-tag--readonly:hover,
176
212
  .udex-tag-outlined.udex-tag--readonly {
177
- color: var(--udex-tags-outlined-read-only-caption-color);
178
- background-color: var(--udex-tags-outlined-read-only-background-color);
179
- box-shadow: inset 0px 0px 0px var(--udex-tags-outlined-default-border-width) var(--udex-tags-outlined-read-only-border-color);
180
- cursor: default;
213
+ color: var(--udex-tags-outlined-read-only-caption-color);
214
+ background-color: var(--udex-tags-outlined-read-only-background-color);
215
+ box-shadow: inset 0 0 0 var(--udex-tags-outlined-default-border-width) var(--udex-tags-outlined-read-only-border-color);
216
+ }
217
+
218
+ .udex-tag-text,
219
+ .udex-tag-text.udex-tag--nonselectable.udex-tag--has-icon,
220
+ .udex-tag-text.udex-tag--nonselectable:hover {
221
+ color: var(--udex-tags-text-only-default-caption-color);
222
+ padding: var(--udex-tags-padding-vertical) 0;
223
+ }
224
+
225
+ .udex-tag-text .udex-tag__btn-icon {
226
+ padding: var(--udexSpacer4) 0;
181
227
  }
182
228
 
183
- .udex-tag-text {
184
- color: var(--udex-tags-text-only-default-caption-color);
185
- padding: var(--udex-tags-padding-vertical) 0;
229
+ .udex-tag-text.udex-tag--nonselectable .udex-tag__icon:hover {
230
+ color: var(--udex-tags-text-only-hover-caption-color);
186
231
  }
187
232
 
188
233
  .udex-tag-text:hover {
189
- color: var(--udex-tags-text-only-hover-caption-color);
234
+ color: var(--udex-tags-text-only-hover-caption-color);
190
235
  }
191
236
 
192
237
  .udex-tag-text.udex-tag--selected {
193
- color: var(--udex-tags-text-only-selected-caption-color);
238
+ color: var(--udex-tags-text-only-selected-caption-color);
194
239
  }
195
240
 
196
241
  .udex-tag-text.udex-tag--selected:hover {
197
- color: var(--udex-tags-text-only-hover-selected-caption-color);
242
+ color: var(--udex-tags-text-only-hover-selected-caption-color);
198
243
  }
199
244
 
200
245
  .udex-tag-text.udex-tag--readonly:hover,
201
246
  .udex-tag-text.udex-tag--readonly {
202
- color: var(--udex-tags-text-only-read-only-caption-color);
203
- cursor: default;
247
+ color: var(--udex-tags-text-only-read-only-caption-color);
204
248
  }
205
249
 
206
- .udex-tag-white {
207
- color: var(--udex-tags-white-default-caption-color);
208
- background-color: var(--udex-tags-white-default-background-color);
250
+ .udex-tag-white,
251
+ .udex-tag-white.udex-tag--nonselectable:hover{
252
+ color: var(--udex-tags-white-default-caption-color);
253
+ background-color: var(--udex-tags-white-default-background-color);
254
+ }
255
+
256
+ .udex-tag-white.udex-tag--nonselectable .udex-tag__icon:hover {
257
+ background-color: var(--udex-tags-white-hover-background-color);
209
258
  }
210
259
 
211
260
  .udex-tag-white:hover {
212
- color: var(--udex-tags-white-hover-caption-color);
213
- background-color: var(--udex-tags-white-hover-background-color);
261
+ color: var(--udex-tags-white-hover-caption-color);
262
+ background-color: var(--udex-tags-white-hover-background-color);
214
263
  }
215
264
 
216
265
  .udex-tag-white.udex-tag--selected {
217
- color: var(--udex-tags-white-selected-caption-color);
218
- background-color: var(--udex-tags-white-selected-background-color);
266
+ color: var(--udex-tags-white-selected-caption-color);
267
+ background-color: var(--udex-tags-white-selected-background-color);
219
268
  }
220
269
 
221
270
  .udex-tag-white.udex-tag--selected:after {
222
- content: '';
223
- position: absolute;
224
- height: 2px;
225
- width: 100%;
226
- bottom: 0;
227
- left: 0;
228
- background-color: var(--udex-tags-white-selected-caption-color);
271
+ content: '';
272
+ position: absolute;
273
+ height: 2px;
274
+ width: 100%;
275
+ bottom: 0;
276
+ left: 0;
277
+ background-color: var(--udex-tags-white-selected-caption-color);
229
278
  }
230
279
 
231
280
  .udex-tag-white.udex-tag--selected:hover {
232
- color: var(--udex-tags-white-hover-selected-caption-color);
233
- background-color: var(--udex-tags-white-hover-selected-background-color);
281
+ color: var(--udex-tags-white-hover-selected-caption-color);
282
+ background-color: var(--udex-tags-white-hover-selected-background-color);
234
283
  }
235
284
 
236
285
  .udex-tag-white.udex-tag--selected:hover:after {
237
- background-color: var(--udex-tags-white-hover-selected-caption-color);
286
+ background-color: var(--udex-tags-white-hover-selected-caption-color);
238
287
  }
239
288
 
240
289
  .udex-tag-white.udex-tag--readonly:hover,
241
290
  .udex-tag-white.udex-tag--readonly {
242
- color: var(--udex-tags-white-read-only-caption-color );
243
- background-color: var(--udex-tags-white-read-only-background-color);
244
- cursor: default;
291
+ color: var(--udex-tags-white-read-only-caption-color );
292
+ background-color: var(--udex-tags-white-read-only-background-color);
245
293
  }
246
294
 
247
295
  .udex-tag__text b {
@@ -255,3 +303,7 @@
255
303
  white-space: nowrap;
256
304
  min-height: var(--udex-tags-min-height);
257
305
  }
306
+
307
+ .udex-tag--link {
308
+ text-decoration: none;
309
+ }
package/src/themes/TagGroup.css ADDED
@@ -0,0 +1,90 @@
1
+ .udex-tag-group__tokenizer {
2
+ border: none;
3
+ width: 100%;
4
+ min-width: 100px;
5
+ line-height: normal
6
+ }
7
+
8
+ ::part(n-more-text) {
9
+ font-size: var(--udexTypographyBodyXXSFontSize);
10
+ }
11
+
12
+ :host([disabled]) {
13
+ opacity: var(--sapContent_DisabledOpacity);
14
+ }
15
+
16
+ .udex-tag-group__tag {
17
+ margin-inline-end: var(--udexSpacer8);
18
+ max-width: 100%;
19
+ }
20
+
21
+ :host(:not([displayonly])) .udex-tag-group-tooltip__content {
22
+ line-height: 1.75;
23
+ }
24
+
25
+ .udex-tag-group__tag[data-overflows] {
26
+ margin-inline-end: var(--udexSpacer4);
27
+ }
28
+
29
+ .udex-tag-group__tag[overflows] {
30
+ display: none;
31
+ }
32
+
33
+ :host([disabled]) .udex-tag-group__tokenizer,
34
+ :host([readonly]) .udex-tag-group__tokenizer {
35
+ pointer-events: none;
36
+ }
37
+
38
+ :host([displayonly]) .udex-tag-group__tag[data-overflows] {
39
+ margin-inline-end: -10px;
40
+ }
41
+
42
+ :host([displayonly]) .udex-tag-group__tag {
43
+ margin-inline-end: 0;
44
+ position: relative;
45
+ }
46
+
47
+ :host([displayonly]:dir(rtl)) .udex-tag-group__tag:not(:first-child):before {
48
+ left: auto;
49
+ right: -2px;
50
+ }
51
+
52
+ :host([displayonly])::part(n-more-text):before,
53
+ :host([displayonly]) .udex-tag-group__tag:not(:first-child):not([data-overflows]):before {
54
+ content: '';
55
+ position: absolute;
56
+ top: 9px;
57
+ left: -2px;
58
+ display: block;
59
+ width: 4px;
60
+ height: 4px;
61
+ border-radius: 50%;
62
+ z-index: 1;
63
+ background: var(--udexColorGrey9, #223548);
64
+ }
65
+
66
+ :host([displayonly])::part(n-more-text):before {
67
+ top: 5px;
68
+ left: -10px;
69
+ }
70
+
71
+ :host([readonly])::part(n-more-text) {
72
+ color: var(--udexColorGrey6 ,#5B738B);
73
+ }
74
+
75
+ :host([displayonly])::part(n-more-text) {
76
+ position: relative;
77
+ margin-inline-start: 9px;
78
+ }
79
+
80
+ :host([displayonly]:dir(rtl))::part(n-more-text):before {
81
+ left: auto;
82
+ right: -10px;
83
+ }
84
+
85
+ ::part(n-more-text):focus,
86
+ ::part(n-more-text):focus-visible {
87
+ outline: solid var(--udexSpacer2, 2px) var(--udexColorBlue9, #0040B0);
88
+ outline-offset: 3px;
89
+ outline-style: auto;
90
+ }
package/src/themes/TextArea.css CHANGED
@@ -114,6 +114,19 @@
114
114
  border-color: var(--udex-textarea-color-standard-actives-border);
115
115
  }
116
116
 
117
+ .udex-textarea__wrapper {
118
+ position: relative;
119
+ }
120
+
121
+ :host(:not([_is-touched])[active]) .udex-textarea__wrapper:before {
122
+ content:"";
123
+ position:absolute;
124
+ z-index: -1;
125
+ inset: -5px;
126
+ border: 2px solid var(--udexColorBlue10);
127
+ border-radius: var(--udexRadiusS, 6px);
128
+ }
129
+
117
130
  :host([field-state="Warning"]) .udex-textarea__field {
118
131
  background-color: var(--udex-textarea-color-warning-default-background);
119
132
  border-color: var(--udex-textarea-color-warning-default-border);