@sapudex/web-components 0.114.2 → 0.127.6

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 (456) hide show
  1. package/bundle.esm.js +6 -0
  2. package/config/wdio.conf.js +19 -8
  3. package/dist/AccordionItem.d.ts +2 -1
  4. package/dist/AccordionItem.js +3 -3
  5. package/dist/AccordionItem.js.map +1 -1
  6. package/dist/Avatar.d.ts +20 -1
  7. package/dist/Avatar.js +26 -2
  8. package/dist/Avatar.js.map +1 -1
  9. package/dist/AvatarGroup.d.ts +28 -0
  10. package/dist/AvatarGroup.js +126 -0
  11. package/dist/AvatarGroup.js.map +1 -0
  12. package/dist/CountrySelector.d.ts +1 -0
  13. package/dist/CountrySelector.js +3 -0
  14. package/dist/CountrySelector.js.map +1 -1
  15. package/dist/Dropdown.d.ts +11 -1
  16. package/dist/Dropdown.js +15 -3
  17. package/dist/Dropdown.js.map +1 -1
  18. package/dist/FilterMenu.d.ts +21 -5
  19. package/dist/FilterMenu.js +50 -8
  20. package/dist/FilterMenu.js.map +1 -1
  21. package/dist/Footer.d.ts +27 -0
  22. package/dist/Footer.js +27 -36
  23. package/dist/Footer.js.map +1 -1
  24. package/dist/HeroBanner.js +3 -0
  25. package/dist/HeroBanner.js.map +1 -1
  26. package/dist/InputGroup.js.map +1 -1
  27. package/dist/List.d.ts +7 -0
  28. package/dist/List.js +78 -18
  29. package/dist/List.js.map +1 -1
  30. package/dist/ListItem.d.ts +0 -1
  31. package/dist/ListItem.js +0 -6
  32. package/dist/ListItem.js.map +1 -1
  33. package/dist/ListItemBase.d.ts +3 -0
  34. package/dist/ListItemBase.js +12 -0
  35. package/dist/ListItemBase.js.map +1 -1
  36. package/dist/MastheadItem.d.ts +1 -0
  37. package/dist/MastheadItem.js +5 -11
  38. package/dist/MastheadItem.js.map +1 -1
  39. package/dist/MastheadShell.d.ts +8 -0
  40. package/dist/MastheadShell.js +10 -0
  41. package/dist/MastheadShell.js.map +1 -1
  42. package/dist/MessageStrip.js +1 -1
  43. package/dist/MessageStrip.js.map +1 -1
  44. package/dist/Pagination.d.ts +3 -0
  45. package/dist/Pagination.js +16 -4
  46. package/dist/Pagination.js.map +1 -1
  47. package/dist/PasswordField.d.ts +14 -4
  48. package/dist/PasswordField.js +24 -15
  49. package/dist/PasswordField.js.map +1 -1
  50. package/dist/PhoneNumberField.d.ts +6 -0
  51. package/dist/PhoneNumberField.js +6 -1
  52. package/dist/PhoneNumberField.js.map +1 -1
  53. package/dist/RatingBar.d.ts +53 -0
  54. package/dist/RatingBar.js +96 -0
  55. package/dist/RatingBar.js.map +1 -0
  56. package/dist/Review.d.ts +71 -0
  57. package/dist/Review.js +108 -0
  58. package/dist/Review.js.map +1 -0
  59. package/dist/Search.d.ts +51 -0
  60. package/dist/Search.js +65 -11
  61. package/dist/Search.js.map +1 -1
  62. package/dist/SearchableListBase.d.ts +1 -1
  63. package/dist/SearchableListBase.js +1 -1
  64. package/dist/SearchableListBase.js.map +1 -1
  65. package/dist/SecondaryNavigation.d.ts +35 -47
  66. package/dist/SecondaryNavigation.js +158 -167
  67. package/dist/SecondaryNavigation.js.map +1 -1
  68. package/dist/SecondaryNavigationItem.d.ts +101 -0
  69. package/dist/SecondaryNavigationItem.js +297 -0
  70. package/dist/SecondaryNavigationItem.js.map +1 -0
  71. package/dist/SecondaryNavigationItemBase.d.ts +82 -0
  72. package/dist/SecondaryNavigationItemBase.js +104 -0
  73. package/dist/SecondaryNavigationItemBase.js.map +1 -0
  74. package/dist/SecondaryNavigationSubItem.d.ts +53 -0
  75. package/dist/SecondaryNavigationSubItem.js +105 -0
  76. package/dist/SecondaryNavigationSubItem.js.map +1 -0
  77. package/dist/SelectBox.d.ts +1 -0
  78. package/dist/SelectBox.js +15 -1
  79. package/dist/SelectBox.js.map +1 -1
  80. package/dist/StatusBadge.d.ts +67 -0
  81. package/dist/StatusBadge.js +104 -0
  82. package/dist/StatusBadge.js.map +1 -0
  83. package/dist/Switch.d.ts +1 -0
  84. package/dist/Switch.js +3 -0
  85. package/dist/Switch.js.map +1 -1
  86. package/dist/Tab.d.ts +8 -0
  87. package/dist/Tab.js +4 -1
  88. package/dist/Tab.js.map +1 -1
  89. package/dist/TabNavigation.d.ts +20 -20
  90. package/dist/TabNavigation.js +82 -101
  91. package/dist/TabNavigation.js.map +1 -1
  92. package/dist/Tag.d.ts +13 -6
  93. package/dist/Tag.js +34 -20
  94. package/dist/Tag.js.map +1 -1
  95. package/dist/TextArea.d.ts +1 -1
  96. package/dist/TextArea.js +3 -0
  97. package/dist/TextArea.js.map +1 -1
  98. package/dist/TextField.d.ts +9 -0
  99. package/dist/TextField.js +16 -0
  100. package/dist/TextField.js.map +1 -1
  101. package/dist/Tooltip.d.ts +2 -2
  102. package/dist/Tooltip.js +3 -3
  103. package/dist/Tooltip.js.map +1 -1
  104. package/dist/assets/bundle.esm-7d53f4f2.js +314 -0
  105. package/dist/assets/messagebundle_en-6dcc9ab4.js +1 -0
  106. package/dist/assets/parameters-bundle.css-de55cf62.js +2 -0
  107. package/dist/css/themes/AccordionItem.css +1 -1
  108. package/dist/css/themes/Avatar.css +1 -1
  109. package/dist/css/themes/Badge.css +1 -1
  110. package/dist/css/themes/Checkbox.css +1 -1
  111. package/dist/css/themes/CountrySelector.css +1 -1
  112. package/dist/css/themes/Divider.css +1 -1
  113. package/dist/css/themes/Dropdown.css +1 -1
  114. package/dist/css/themes/FilterMenu.css +1 -1
  115. package/dist/css/themes/Footer.css +1 -1
  116. package/dist/css/themes/HeroBanner.css +1 -1
  117. package/dist/css/themes/MastheadShell.css +1 -1
  118. package/dist/css/themes/MediaPlayer.css +1 -1
  119. package/dist/css/themes/Modal.css +1 -1
  120. package/dist/css/themes/Pagination.css +1 -1
  121. package/dist/css/themes/PhoneNumberField.css +1 -1
  122. package/dist/css/themes/RatingBar.css +1 -0
  123. package/dist/css/themes/RatingIndicator.css +1 -1
  124. package/dist/css/themes/Review.css +1 -0
  125. package/dist/css/themes/Search.css +1 -1
  126. package/dist/css/themes/SecondaryNavigation.css +1 -1
  127. package/dist/css/themes/SecondaryNavigationItem.css +1 -0
  128. package/dist/css/themes/SecondaryNavigationSubItem.css +1 -0
  129. package/dist/css/themes/SelectBox.css +1 -1
  130. package/dist/css/themes/Slider.css +1 -1
  131. package/dist/css/themes/StatusBadge.css +1 -0
  132. package/dist/css/themes/StepInput.css +1 -1
  133. package/dist/css/themes/TabNavigation.css +1 -1
  134. package/dist/css/themes/Tag.css +1 -1
  135. package/dist/css/themes/TextField.css +1 -1
  136. package/dist/css/themes/overrides/@ui5/webcomponents/sap_glow/parameters-bundle.css +1 -1
  137. package/dist/custom-elements-internal.json +1291 -119
  138. package/dist/custom-elements.json +1298 -199
  139. package/dist/data/CountryListISO3166.js +162 -162
  140. package/dist/data/CountryListISO3166.js.map +1 -1
  141. package/dist/generated/assets/i18n/messagebundle_en.json +1 -1
  142. package/dist/generated/assets/themes/overrides/@ui5/webcomponents/sap_glow/parameters-bundle.css.json +1 -1
  143. package/dist/generated/i18n/i18n-defaults.d.ts +16 -1
  144. package/dist/generated/i18n/i18n-defaults.js +20 -5
  145. package/dist/generated/i18n/i18n-defaults.js.map +1 -1
  146. package/dist/generated/templates/AccordionItemTemplate.lit.js +1 -1
  147. package/dist/generated/templates/AccordionItemTemplate.lit.js.map +1 -1
  148. package/dist/generated/templates/CountrySelectorTemplate.lit.js +1 -1
  149. package/dist/generated/templates/CountrySelectorTemplate.lit.js.map +1 -1
  150. package/dist/generated/templates/DatePickerTemplate.lit.js +1 -1
  151. package/dist/generated/templates/DatePickerTemplate.lit.js.map +1 -1
  152. package/dist/generated/templates/DropdownTemplate.lit.js +2 -2
  153. package/dist/generated/templates/DropdownTemplate.lit.js.map +1 -1
  154. package/dist/generated/templates/FilterMenuTemplate.lit.js +3 -3
  155. package/dist/generated/templates/FilterMenuTemplate.lit.js.map +1 -1
  156. package/dist/generated/templates/FooterTemplate.lit.js +26 -28
  157. package/dist/generated/templates/FooterTemplate.lit.js.map +1 -1
  158. package/dist/generated/templates/HeroBannerTemplate.lit.js +9 -8
  159. package/dist/generated/templates/HeroBannerTemplate.lit.js.map +1 -1
  160. package/dist/generated/templates/ListGroupHeaderTemplate.lit.js +4 -4
  161. package/dist/generated/templates/ListGroupHeaderTemplate.lit.js.map +1 -1
  162. package/dist/generated/templates/ListItemTemplate.lit.js +1 -1
  163. package/dist/generated/templates/ListItemTemplate.lit.js.map +1 -1
  164. package/dist/generated/templates/ListSelectAllTemplate.lit.js +1 -1
  165. package/dist/generated/templates/ListSelectAllTemplate.lit.js.map +1 -1
  166. package/dist/generated/templates/MastheadItemTemplate.lit.js +3 -3
  167. package/dist/generated/templates/MastheadItemTemplate.lit.js.map +1 -1
  168. package/dist/generated/templates/MastheadShellTemplate.lit.js +2 -2
  169. package/dist/generated/templates/MastheadShellTemplate.lit.js.map +1 -1
  170. package/dist/generated/templates/PaginationTemplate.lit.js +1 -1
  171. package/dist/generated/templates/PaginationTemplate.lit.js.map +1 -1
  172. package/dist/generated/templates/PasswordFieldTemplate.lit.js +1 -2
  173. package/dist/generated/templates/PasswordFieldTemplate.lit.js.map +1 -1
  174. package/dist/generated/templates/PhoneNumberFieldTemplate.lit.js +3 -3
  175. package/dist/generated/templates/PhoneNumberFieldTemplate.lit.js.map +1 -1
  176. package/dist/generated/templates/RatingBarTemplate.lit.d.ts +4 -0
  177. package/dist/generated/templates/RatingBarTemplate.lit.js +6 -0
  178. package/dist/generated/templates/RatingBarTemplate.lit.js.map +1 -0
  179. package/dist/generated/templates/ReviewTemplate.lit.d.ts +4 -0
  180. package/dist/generated/templates/ReviewTemplate.lit.js +10 -0
  181. package/dist/generated/templates/ReviewTemplate.lit.js.map +1 -0
  182. package/dist/generated/templates/SearchSuggestionsTemplate.lit.js +1 -1
  183. package/dist/generated/templates/SearchSuggestionsTemplate.lit.js.map +1 -1
  184. package/dist/generated/templates/SearchTemplate.lit.js +7 -7
  185. package/dist/generated/templates/SearchTemplate.lit.js.map +1 -1
  186. package/dist/generated/templates/SearchableListBaseTemplate.lit.js +2 -2
  187. package/dist/generated/templates/SearchableListBaseTemplate.lit.js.map +1 -1
  188. package/dist/generated/templates/SecondaryNavigationItemTemplate.lit.d.ts +4 -0
  189. package/dist/generated/templates/SecondaryNavigationItemTemplate.lit.js +11 -0
  190. package/dist/generated/templates/SecondaryNavigationItemTemplate.lit.js.map +1 -0
  191. package/dist/generated/templates/SecondaryNavigationSubItemTemplate.lit.d.ts +4 -0
  192. package/dist/generated/templates/SecondaryNavigationSubItemTemplate.lit.js +10 -0
  193. package/dist/generated/templates/SecondaryNavigationSubItemTemplate.lit.js.map +1 -0
  194. package/dist/generated/templates/SecondaryNavigationTemplate.lit.js +7 -10
  195. package/dist/generated/templates/SecondaryNavigationTemplate.lit.js.map +1 -1
  196. package/dist/generated/templates/SelectBoxTemplate.lit.js +2 -2
  197. package/dist/generated/templates/SelectBoxTemplate.lit.js.map +1 -1
  198. package/dist/generated/templates/StatusBadgeTemplate.lit.d.ts +4 -0
  199. package/dist/generated/templates/StatusBadgeTemplate.lit.js +5 -0
  200. package/dist/generated/templates/StatusBadgeTemplate.lit.js.map +1 -0
  201. package/dist/generated/templates/SwitchTemplate.lit.js +2 -2
  202. package/dist/generated/templates/SwitchTemplate.lit.js.map +1 -1
  203. package/dist/generated/templates/TabInOverflowTemplate.lit.js +2 -2
  204. package/dist/generated/templates/TabInOverflowTemplate.lit.js.map +1 -1
  205. package/dist/generated/templates/TabNavigationPopoverTemplate.lit.js +1 -1
  206. package/dist/generated/templates/TabNavigationPopoverTemplate.lit.js.map +1 -1
  207. package/dist/generated/templates/TabNavigationTemplate.lit.js +2 -2
  208. package/dist/generated/templates/TabNavigationTemplate.lit.js.map +1 -1
  209. package/dist/generated/templates/TagTemplate.lit.js +9 -3
  210. package/dist/generated/templates/TagTemplate.lit.js.map +1 -1
  211. package/dist/generated/templates/TextAreaTemplate.lit.js +1 -1
  212. package/dist/generated/templates/TextAreaTemplate.lit.js.map +1 -1
  213. package/dist/generated/templates/TextFieldTemplate.lit.js +2 -2
  214. package/dist/generated/templates/TextFieldTemplate.lit.js.map +1 -1
  215. package/dist/generated/templates/TooltipTemplate.lit.js +1 -1
  216. package/dist/generated/templates/TooltipTemplate.lit.js.map +1 -1
  217. package/dist/generated/themes/AccordionItem.css.js +1 -1
  218. package/dist/generated/themes/AccordionItem.css.js.map +1 -1
  219. package/dist/generated/themes/Avatar.css.js +1 -1
  220. package/dist/generated/themes/Avatar.css.js.map +1 -1
  221. package/dist/generated/themes/Badge.css.js +1 -1
  222. package/dist/generated/themes/Badge.css.js.map +1 -1
  223. package/dist/generated/themes/Checkbox.css.js +1 -1
  224. package/dist/generated/themes/Checkbox.css.js.map +1 -1
  225. package/dist/generated/themes/CountrySelector.css.js +1 -1
  226. package/dist/generated/themes/CountrySelector.css.js.map +1 -1
  227. package/dist/generated/themes/Divider.css.js +1 -1
  228. package/dist/generated/themes/Divider.css.js.map +1 -1
  229. package/dist/generated/themes/Dropdown.css.js +1 -1
  230. package/dist/generated/themes/Dropdown.css.js.map +1 -1
  231. package/dist/generated/themes/FilterMenu.css.js +1 -1
  232. package/dist/generated/themes/FilterMenu.css.js.map +1 -1
  233. package/dist/generated/themes/Footer.css.js +1 -1
  234. package/dist/generated/themes/Footer.css.js.map +1 -1
  235. package/dist/generated/themes/HeroBanner.css.js +1 -1
  236. package/dist/generated/themes/HeroBanner.css.js.map +1 -1
  237. package/dist/generated/themes/MastheadShell.css.js +1 -1
  238. package/dist/generated/themes/MastheadShell.css.js.map +1 -1
  239. package/dist/generated/themes/MediaPlayer.css.js +1 -1
  240. package/dist/generated/themes/MediaPlayer.css.js.map +1 -1
  241. package/dist/generated/themes/Modal.css.js +1 -1
  242. package/dist/generated/themes/Modal.css.js.map +1 -1
  243. package/dist/generated/themes/Pagination.css.js +1 -1
  244. package/dist/generated/themes/Pagination.css.js.map +1 -1
  245. package/dist/generated/themes/PhoneNumberField.css.js +1 -1
  246. package/dist/generated/themes/PhoneNumberField.css.js.map +1 -1
  247. package/dist/generated/themes/RatingBar.css.js +9 -0
  248. package/dist/generated/themes/RatingBar.css.js.map +1 -0
  249. package/dist/generated/themes/RatingIndicator.css.js +1 -1
  250. package/dist/generated/themes/RatingIndicator.css.js.map +1 -1
  251. package/dist/generated/themes/Review.css.d.ts +3 -0
  252. package/dist/generated/themes/Review.css.js +9 -0
  253. package/dist/generated/themes/Review.css.js.map +1 -0
  254. package/dist/generated/themes/Search.css.js +1 -1
  255. package/dist/generated/themes/Search.css.js.map +1 -1
  256. package/dist/generated/themes/SecondaryNavigation.css.js +1 -1
  257. package/dist/generated/themes/SecondaryNavigation.css.js.map +1 -1
  258. package/dist/generated/themes/SecondaryNavigationItem.css.d.ts +3 -0
  259. package/dist/generated/themes/SecondaryNavigationItem.css.js +9 -0
  260. package/dist/generated/themes/SecondaryNavigationItem.css.js.map +1 -0
  261. package/dist/generated/themes/SecondaryNavigationSubItem.css.d.ts +3 -0
  262. package/dist/generated/themes/SecondaryNavigationSubItem.css.js +9 -0
  263. package/dist/generated/themes/SecondaryNavigationSubItem.css.js.map +1 -0
  264. package/dist/generated/themes/SelectBox.css.js +1 -1
  265. package/dist/generated/themes/SelectBox.css.js.map +1 -1
  266. package/dist/generated/themes/Slider.css.js +1 -1
  267. package/dist/generated/themes/Slider.css.js.map +1 -1
  268. package/dist/generated/themes/StatusBadge.css.d.ts +3 -0
  269. package/dist/generated/themes/StatusBadge.css.js +9 -0
  270. package/dist/generated/themes/StatusBadge.css.js.map +1 -0
  271. package/dist/generated/themes/StepInput.css.js +1 -1
  272. package/dist/generated/themes/StepInput.css.js.map +1 -1
  273. package/dist/generated/themes/TabNavigation.css.js +1 -1
  274. package/dist/generated/themes/TabNavigation.css.js.map +1 -1
  275. package/dist/generated/themes/Tag.css.js +1 -1
  276. package/dist/generated/themes/Tag.css.js.map +1 -1
  277. package/dist/generated/themes/TextField.css.js +1 -1
  278. package/dist/generated/themes/TextField.css.js.map +1 -1
  279. package/dist/generated/themes/overrides/@ui5/webcomponents/sap_glow/parameters-bundle.css.js +1 -1
  280. package/dist/generated/themes/overrides/@ui5/webcomponents/sap_glow/parameters-bundle.css.js.map +1 -1
  281. package/dist/i18n/messagebundle.properties +40 -5
  282. package/dist/i18n/messagebundle_en.properties +20 -5
  283. package/dist/vscode.html-custom-data.json +239 -16
  284. package/dist/web-types.json +405 -25
  285. package/package.json +8 -8
  286. package/src/AccordionItem.hbs +1 -4
  287. package/src/AccordionItem.ts +5 -4
  288. package/src/Avatar.ts +35 -3
  289. package/src/AvatarGroup.ts +135 -0
  290. package/src/CountrySelector.hbs +2 -1
  291. package/src/CountrySelector.ts +4 -1
  292. package/src/DatePicker.hbs +0 -1
  293. package/src/Dropdown.hbs +5 -3
  294. package/src/Dropdown.ts +24 -3
  295. package/src/FilterMenu.hbs +8 -1
  296. package/src/FilterMenu.ts +70 -12
  297. package/src/Footer.hbs +12 -37
  298. package/src/Footer.ts +64 -51
  299. package/src/HeroBanner.hbs +28 -21
  300. package/src/HeroBanner.ts +3 -0
  301. package/src/InputGroup.ts +6 -5
  302. package/src/List.ts +92 -21
  303. package/src/ListGroupHeader.hbs +9 -5
  304. package/src/ListItem.hbs +2 -1
  305. package/src/ListItem.ts +0 -7
  306. package/src/ListItemBase.ts +14 -0
  307. package/src/ListSelectAll.hbs +1 -0
  308. package/src/MastheadItem.hbs +3 -3
  309. package/src/MastheadItem.ts +10 -4
  310. package/src/MastheadShell.hbs +4 -0
  311. package/src/MastheadShell.ts +18 -0
  312. package/src/MessageStrip.ts +1 -1
  313. package/src/Pagination.hbs +4 -2
  314. package/src/Pagination.ts +19 -4
  315. package/src/PasswordField.hbs +6 -17
  316. package/src/PasswordField.ts +31 -23
  317. package/src/PhoneNumberField.hbs +8 -3
  318. package/src/PhoneNumberField.ts +12 -2
  319. package/src/RatingBar.hbs +11 -0
  320. package/src/RatingBar.ts +113 -0
  321. package/src/Review.hbs +44 -0
  322. package/src/Review.ts +140 -0
  323. package/src/Search.hbs +20 -14
  324. package/src/Search.ts +107 -10
  325. package/src/SearchSuggestions.hbs +2 -1
  326. package/src/SearchableListBase.hbs +2 -0
  327. package/src/SearchableListBase.ts +1 -1
  328. package/src/SecondaryNavigation.hbs +53 -71
  329. package/src/SecondaryNavigation.ts +192 -198
  330. package/src/SecondaryNavigationItem.hbs +64 -0
  331. package/src/SecondaryNavigationItem.ts +368 -0
  332. package/src/SecondaryNavigationItemBase.ts +153 -0
  333. package/src/SecondaryNavigationSubItem.hbs +44 -0
  334. package/src/SecondaryNavigationSubItem.ts +127 -0
  335. package/src/SelectBox.hbs +76 -76
  336. package/src/SelectBox.ts +18 -1
  337. package/src/StatusBadge.hbs +9 -0
  338. package/src/StatusBadge.ts +129 -0
  339. package/src/Switch.hbs +3 -3
  340. package/src/Switch.ts +4 -0
  341. package/src/Tab.ts +11 -1
  342. package/src/TabInOverflow.hbs +3 -2
  343. package/src/TabNavigation.hbs +12 -10
  344. package/src/TabNavigation.ts +92 -116
  345. package/src/TabNavigationPopover.hbs +1 -0
  346. package/src/Tag.hbs +60 -26
  347. package/src/Tag.ts +54 -34
  348. package/src/TextArea.hbs +3 -4
  349. package/src/TextArea.ts +3 -0
  350. package/src/TextField.hbs +40 -36
  351. package/src/TextField.ts +24 -0
  352. package/src/Tooltip.hbs +2 -2
  353. package/src/Tooltip.ts +4 -4
  354. package/src/data/CountryListISO3166.ts +162 -162
  355. package/src/generated/i18n/i18n-defaults.ts +2 -2
  356. package/src/generated/templates/AccordionItemTemplate.lit.ts +1 -1
  357. package/src/generated/templates/CountrySelectorTemplate.lit.ts +1 -1
  358. package/src/generated/templates/DatePickerTemplate.lit.ts +1 -1
  359. package/src/generated/templates/DropdownTemplate.lit.ts +2 -2
  360. package/src/generated/templates/FilterMenuTemplate.lit.ts +3 -3
  361. package/src/generated/templates/FooterTemplate.lit.ts +26 -28
  362. package/src/generated/templates/HeroBannerTemplate.lit.ts +9 -8
  363. package/src/generated/templates/ListGroupHeaderTemplate.lit.ts +4 -4
  364. package/src/generated/templates/ListItemTemplate.lit.ts +1 -1
  365. package/src/generated/templates/ListSelectAllTemplate.lit.ts +1 -1
  366. package/src/generated/templates/MastheadItemTemplate.lit.ts +3 -3
  367. package/src/generated/templates/MastheadShellTemplate.lit.ts +2 -2
  368. package/src/generated/templates/PaginationTemplate.lit.ts +1 -1
  369. package/src/generated/templates/PasswordFieldTemplate.lit.ts +1 -2
  370. package/src/generated/templates/PhoneNumberFieldTemplate.lit.ts +3 -3
  371. package/src/generated/templates/RatingBarTemplate.lit.ts +11 -0
  372. package/src/generated/templates/ReviewTemplate.lit.ts +15 -0
  373. package/src/generated/templates/SearchSuggestionsTemplate.lit.ts +1 -1
  374. package/src/generated/templates/SearchTemplate.lit.ts +7 -7
  375. package/src/generated/templates/SearchableListBaseTemplate.lit.ts +2 -2
  376. package/src/generated/templates/SecondaryNavigationItemTemplate.lit.ts +16 -0
  377. package/src/generated/templates/SecondaryNavigationSubItemTemplate.lit.ts +15 -0
  378. package/src/generated/templates/SecondaryNavigationTemplate.lit.ts +7 -10
  379. package/src/generated/templates/SelectBoxTemplate.lit.ts +2 -2
  380. package/src/generated/templates/StatusBadgeTemplate.lit.ts +10 -0
  381. package/src/generated/templates/SwitchTemplate.lit.ts +2 -2
  382. package/src/generated/templates/TabInOverflowTemplate.lit.ts +2 -2
  383. package/src/generated/templates/TabNavigationPopoverTemplate.lit.ts +1 -1
  384. package/src/generated/templates/TabNavigationTemplate.lit.ts +2 -2
  385. package/src/generated/templates/TagTemplate.lit.ts +9 -3
  386. package/src/generated/templates/TextAreaTemplate.lit.ts +1 -1
  387. package/src/generated/templates/TextFieldTemplate.lit.ts +2 -2
  388. package/src/generated/templates/TooltipTemplate.lit.ts +1 -1
  389. package/src/generated/themes/AccordionItem.css.ts +1 -1
  390. package/src/generated/themes/Avatar.css.ts +1 -1
  391. package/src/generated/themes/Badge.css.ts +1 -1
  392. package/src/generated/themes/Checkbox.css.ts +1 -1
  393. package/src/generated/themes/CountrySelector.css.ts +1 -1
  394. package/src/generated/themes/Divider.css.ts +1 -1
  395. package/src/generated/themes/Dropdown.css.ts +1 -1
  396. package/src/generated/themes/FilterMenu.css.ts +1 -1
  397. package/src/generated/themes/Footer.css.ts +1 -1
  398. package/src/generated/themes/HeroBanner.css.ts +1 -1
  399. package/src/generated/themes/MastheadShell.css.ts +1 -1
  400. package/src/generated/themes/MediaPlayer.css.ts +1 -1
  401. package/src/generated/themes/Modal.css.ts +1 -1
  402. package/src/generated/themes/Pagination.css.ts +1 -1
  403. package/src/generated/themes/PhoneNumberField.css.ts +1 -1
  404. package/src/generated/themes/RatingBar.css.ts +13 -0
  405. package/src/generated/themes/RatingIndicator.css.ts +1 -1
  406. package/src/generated/themes/Review.css.ts +13 -0
  407. package/src/generated/themes/Search.css.ts +1 -1
  408. package/src/generated/themes/SecondaryNavigation.css.ts +1 -1
  409. package/src/generated/themes/SecondaryNavigationItem.css.ts +13 -0
  410. package/src/generated/themes/SecondaryNavigationSubItem.css.ts +13 -0
  411. package/src/generated/themes/SelectBox.css.ts +1 -1
  412. package/src/generated/themes/Slider.css.ts +1 -1
  413. package/src/generated/themes/StatusBadge.css.ts +13 -0
  414. package/src/generated/themes/StepInput.css.ts +1 -1
  415. package/src/generated/themes/TabNavigation.css.ts +1 -1
  416. package/src/generated/themes/Tag.css.ts +1 -1
  417. package/src/generated/themes/TextField.css.ts +1 -1
  418. package/src/generated/themes/overrides/@ui5/webcomponents/sap_glow/parameters-bundle.css.ts +1 -1
  419. package/src/i18n/messagebundle.properties +40 -5
  420. package/src/i18n/messagebundle_en.properties +20 -5
  421. package/src/themes/AccordionItem.css +6 -4
  422. package/src/themes/Avatar.css +43 -6
  423. package/src/themes/Badge.css +1 -1
  424. package/src/themes/Checkbox.css +12 -0
  425. package/src/themes/CountrySelector.css +4 -0
  426. package/src/themes/Divider.css +6 -2
  427. package/src/themes/Dropdown.css +2 -0
  428. package/src/themes/FilterMenu.css +10 -0
  429. package/src/themes/Footer.css +93 -168
  430. package/src/themes/HeroBanner.css +84 -20
  431. package/src/themes/MastheadShell.css +25 -29
  432. package/src/themes/MediaPlayer.css +3 -2
  433. package/src/themes/Modal.css +6 -0
  434. package/src/themes/Pagination.css +7 -0
  435. package/src/themes/PhoneNumberField.css +5 -0
  436. package/src/themes/RatingBar.css +52 -0
  437. package/src/themes/Review.css +196 -0
  438. package/src/themes/Search.css +37 -21
  439. package/src/themes/SecondaryNavigation.css +64 -293
  440. package/src/themes/SecondaryNavigationItem.css +221 -0
  441. package/src/themes/SecondaryNavigationSubItem.css +118 -0
  442. package/src/themes/SelectBox.css +17 -24
  443. package/src/themes/StatusBadge.css +135 -0
  444. package/src/themes/StepInput.css +5 -2
  445. package/src/themes/TabNavigation.css +7 -1
  446. package/src/themes/Tag.css +180 -148
  447. package/src/themes/TextField.css +75 -55
  448. package/dist/assets/bundle.esm-ab45813e.js +0 -312
  449. package/dist/assets/messagebundle_en-26cd7a92.js +0 -1
  450. package/dist/assets/parameters-bundle.css-76ef62fa.js +0 -2
  451. package/dist/css/themes/PasswordField.css +0 -1
  452. package/dist/generated/themes/PasswordField.css.js +0 -9
  453. package/dist/generated/themes/PasswordField.css.js.map +0 -1
  454. package/src/generated/themes/PasswordField.css.ts +0 -13
  455. package/src/themes/PasswordField.css +0 -29
  456. /package/dist/generated/themes/{PasswordField.css.d.ts → RatingBar.css.d.ts} +0 -0
@@ -13,25 +13,17 @@ import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
13
13
  import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
14
14
  import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
15
15
  import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
16
- import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
17
16
  import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
18
- import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
19
- import { isLeft, isRight, isUp, isDown, isEscape, } from "@ui5/webcomponents-base/dist/Keys.js";
17
+ import { isLeft, isRight, isEscape, } from "@ui5/webcomponents-base/dist/Keys.js";
20
18
  import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
19
+ import UDExSecondaryNavigationItem from "./SecondaryNavigationItem.js";
21
20
  import { MORE } from "./generated/i18n/i18n-defaults.js";
22
21
  import SecondaryNavigationTemplate from "./generated/templates/SecondaryNavigationTemplate.lit.js";
23
22
  // Styles
24
23
  import SecondaryNavigationCss from "./generated/themes/SecondaryNavigation.css.js";
25
- const mobileMenuActiveClass = "udex-secondary-navigation__root_open";
24
+ const canvasContentFont = "16px / 17.6px '72 Brand Variable'";
26
25
  const rootClass = "udex-secondary-navigation__root";
27
- const breakpointSizeS = 979;
28
- export var Target;
29
- (function (Target) {
30
- Target["_blank"] = "_blank";
31
- Target["_parent"] = "_parent";
32
- Target["_self"] = "_self";
33
- Target["_top"] = "_top";
34
- })(Target || (Target = {}));
26
+ export const breakpointSizeS = 979;
35
27
  /**
36
28
  * @class
37
29
  *
@@ -64,187 +56,189 @@ let UDExSecondaryNavigation = UDExSecondaryNavigation_1 = class UDExSecondaryNav
64
56
  if (isDesktop()) {
65
57
  this.setAttribute("desktop", "");
66
58
  }
67
- if (this.isDesktopScreen) {
68
- this.reflowItems();
69
- }
70
- ResizeHandler.register(this.rootHolder, this._boundReflowItems);
59
+ ResizeHandler.register(this, this._boundReflowItems);
71
60
  }
72
61
  onExitDOM() {
73
- ResizeHandler.deregister(this.rootHolder, this._boundReflowItems);
62
+ ResizeHandler.deregister(this, this._boundReflowItems);
74
63
  }
75
64
  onInvalidation(changeInfo) {
76
65
  if (changeInfo.name === "navItems") {
77
- this._navigationList = undefined;
78
66
  this.reflowItems();
79
67
  }
80
68
  }
81
69
  onAfterRendering() {
82
70
  this._rootHolder = this.rootHolder;
83
- this._dropdown = this.getDropdown();
84
71
  this.handleOutsideClick();
85
72
  }
86
73
  refreshRendering() {
87
74
  this._requestRender = !this._requestRender;
88
75
  }
89
76
  reflowItems() {
90
- const availableWidth = this.rootHolder.offsetWidth - this.heading.offsetWidth - (this.optionalButtons?.offsetWidth || 0);
77
+ const availableWidth = this.rootHolder.offsetWidth - this.heading?.offsetWidth - (this.optionalButtons?.offsetWidth || 0);
91
78
  const moreButtonWidth = this.getMoreButtonWidth();
92
79
  const itemsGap = 20;
93
- const widths = this.navigationList.map(item => this.getItemWidth(item));
80
+ const widths = this.parsedItems.map(item => this.getItemWidth(item));
94
81
  const steps = [];
95
- widths.forEach((itemWidth, index) => {
82
+ widths?.forEach((itemWidth, index) => {
96
83
  steps.push((steps.at(-1) || 0) + itemWidth + (index && itemsGap));
97
84
  });
98
85
  if ((steps.at(-1) || 0) <= availableWidth) {
99
- this._navItems.splice(0, Infinity, ...this.navigationList);
86
+ this._visibleItems.splice(0, Infinity, ...this.parsedItems);
100
87
  this._showMoreButton = false;
101
88
  this.refreshRendering();
102
89
  return;
103
90
  }
104
- // @ts-ignore
105
- const lastVisibleIndex = steps.findLastIndex((size) => size < (availableWidth - moreButtonWidth - itemsGap));
106
- this._navItems.splice(0, Infinity, ...this.navigationList.slice(0, lastVisibleIndex + 1));
107
- this._overflowItems.splice(0, Infinity, ...this.navigationList.slice(lastVisibleIndex + 1));
108
- this._showMoreButton = true;
109
- this.refreshRendering();
110
- }
111
- handleKeyDown(e) {
112
- e.stopPropagation();
113
- this.handleLeftArrow(e);
114
- this.handleRightArrow(e);
115
- this.handleEscapeKey(e);
116
- }
117
- handleEscapeKey(e) {
118
- if (isEscape(e)) {
119
- if (!this.isDesktopScreen) {
120
- this._rootHolder?.classList.remove(mobileMenuActiveClass);
121
- this.getMobileButtonMenu().focus();
122
- }
123
- else {
124
- this.onCloseDropdown();
125
- this.getMoreButton().focus();
126
- }
91
+ if (this.parsedItems) {
92
+ // @ts-ignore
93
+ const lastVisibleIndex = steps.findLastIndex((size) => size < (availableWidth - moreButtonWidth - itemsGap));
94
+ this._visibleItems.splice(0, Infinity, ...this.parsedItems.slice(0, lastVisibleIndex + 1));
95
+ this._overflowItems.splice(0, Infinity, ...this.parsedItems.slice(lastVisibleIndex + 1));
96
+ this._showMoreButton = true;
97
+ this.refreshRendering();
127
98
  }
128
99
  }
129
- handleKeyDownDropdown(e) {
100
+ handleKeyDown(e) {
130
101
  e.stopPropagation();
131
- this.handleUpArrow(e);
132
- this.handleDownArrow(e);
133
- this.handleEscapeKey(e);
134
- }
135
- handleLeftArrow(e) {
136
102
  if (isLeft(e)) {
137
103
  this.focusPrevNavItem(e);
138
104
  }
139
- }
140
- handleRightArrow(e) {
141
105
  if (isRight(e)) {
142
106
  this.focusNextNavItem(e);
143
107
  }
144
- }
145
- handleUpArrow(e) {
146
- if (isUp(e)) {
147
- this.focusPrevNavItem(e);
148
- }
149
- }
150
- handleDownArrow(e) {
151
- if (isDown(e)) {
152
- this.focusNextNavItem(e);
108
+ if (isEscape(e)) {
109
+ e.target.closeDropdown();
153
110
  }
154
111
  }
155
- handleOutsideClick() {
156
- document.addEventListener("click", () => {
157
- if (this._dropdown) {
158
- this.onCloseDropdown();
159
- }
160
- });
161
- }
162
- handleMobileOpen() {
163
- this.toggleActiveClass();
164
- this._mobileBtnExpanded = !this._mobileBtnExpanded;
165
- }
166
- handleToggleDropdown() {
167
- this._dropdownMoreIsOpen = !this._dropdownMoreIsOpen;
168
- }
169
- toggleActiveClass() {
170
- this._rootHolder?.classList.toggle(mobileMenuActiveClass);
171
- }
172
112
  focusPrevNavItem(e) {
173
- const el = e.target;
174
- const currentItem = el.parentElement;
175
- const currentSelectedIndex = this.getCurrentIndex(currentItem);
176
- const lastItemIndex = this.navigationItems.length - 1;
113
+ const item = e.target;
114
+ const currentSelectedIndex = this.getCurrentIndex(item);
115
+ const lastItemIndex = this.domNavItems.length - 1;
177
116
  const previousSelectIndex = currentSelectedIndex - 1 < 0 ? lastItemIndex : currentSelectedIndex - 1;
178
- const listItem = this.getListItemByIndex(previousSelectIndex);
179
- listItem?.focus();
117
+ this.domNavItems[previousSelectIndex]?.focus();
180
118
  }
181
119
  focusNextNavItem(e) {
182
- const el = e.target;
183
- const currentItem = el.parentElement;
184
- const currentSelectedIndex = this.getCurrentIndex(currentItem);
185
- const nextSelectIndex = currentSelectedIndex + 1 > this.navigationItems.length - 1 ? 0 : currentSelectedIndex + 1;
186
- const listItem = this.getListItemByIndex(nextSelectIndex);
187
- listItem?.focus();
188
- }
189
- onCloseDropdown() {
190
- this._dropdownMoreIsOpen = false;
120
+ const item = e.target;
121
+ const currentSelectedIndex = this.getCurrentIndex(item);
122
+ const nextSelectIndex = currentSelectedIndex + 1 > this.domNavItems.length - 1 ? 0 : currentSelectedIndex + 1;
123
+ this.domNavItems[nextSelectIndex].focus();
191
124
  }
192
125
  getItemWidth(item) {
193
- const canvas = document.createElement("canvas");
194
- const context = canvas.getContext("2d");
195
- context.font = "16px / 17.6px '72 Brand Variable'";
126
+ const context = this.getCanvasContext();
127
+ context.font = canvasContentFont;
196
128
  return Math.ceil(context.measureText(item.title).width);
197
129
  }
198
- getCurrentIndex(item) {
199
- return this.navigationItems.indexOf(item);
200
- }
201
- getListItemByIndex(index) {
202
- return this.navigationItems[index].querySelector(".udex-secondary-navigation__link-btn");
203
- }
204
- getDropdown() {
205
- return this.shadowRoot.querySelector(".udex-secondary-navigation__dropdown");
206
- }
207
- getMobileButtonMenu() {
208
- return this.shadowRoot?.querySelector(".udex-secondary-navigation__mobile-opener");
209
- }
210
- getMoreButton() {
211
- return this.shadowRoot.querySelector(".udex-secondary-navigation__list-item_more > button");
212
- }
213
130
  getMoreButtonWidth() {
131
+ const context = this.getCanvasContext();
132
+ context.font = canvasContentFont;
133
+ return Math.ceil(context.measureText(this.moreButtonText).width);
134
+ }
135
+ getCanvasContext() {
214
136
  const canvas = document.createElement("canvas");
215
- const context = canvas.getContext("2d");
216
- context.font = "16px / 17.6px '72 Brand Variable'";
217
- return Math.ceil(context.measureText("More").width) + 4 + 16;
137
+ return canvas.getContext("2d");
218
138
  }
219
- parseArrayFromString(string) {
220
- return string ? JSON.parse(string) : [];
139
+ getCurrentIndex(item) {
140
+ return this.domNavItems.indexOf(item);
141
+ }
142
+ handleItemClick(e) {
143
+ const clickedItem = e.detail.item;
144
+ const { path, target, title, active, subItems, _id, mobileLinkTitle, } = clickedItem;
145
+ const prevented = !this.fireEventItemClick(e, {
146
+ path,
147
+ target,
148
+ title,
149
+ active,
150
+ mobileLinkTitle,
151
+ items: subItems,
152
+ });
153
+ if (prevented) {
154
+ e.preventDefault();
155
+ return;
156
+ }
157
+ this._clickedNavItem = clickedItem;
158
+ this.closePrevDropdown(_id);
159
+ if (!subItems.length) {
160
+ this.setActiveItem(this.parsedItems, clickedItem);
161
+ }
221
162
  }
222
- handleNavigationClick(e) {
223
- const target = e.target;
224
- const clickedIndex = this.domNavItems.indexOf(target);
225
- const prevented = !this.fireEvent("item-click", {
226
- originalEvent: e,
227
- clickedItem: target,
228
- clickedIndex,
229
- }, true);
163
+ handleSubItemClick(e) {
164
+ const item = e.detail.item;
165
+ const { items } = item;
166
+ const prevented = !this.fireEventItemClick(e, item);
230
167
  if (prevented) {
231
168
  e.preventDefault();
232
169
  return;
233
170
  }
234
- if (this.domNavItems.length > 0) {
235
- this.navigationList.forEach(item => delete item.active);
236
- this.navigationList[clickedIndex].active = true;
237
- this.refreshRendering();
238
- this.toggleActiveClass();
171
+ if (this.isMobileScreen && !items) {
172
+ this.mobileNav.closeDropdown();
239
173
  }
174
+ if (!items) {
175
+ this.setActiveItem(this.parsedItems, item);
176
+ this._clickedNavItem?.closeDropdown();
177
+ }
178
+ }
179
+ fireEventItemClick(e, { items, target, path, title, active, mobileLinkTitle, }) {
180
+ return this.fireEvent("item-click", {
181
+ originalEvent: e,
182
+ clickedItem: {
183
+ mobileLinkTitle: mobileLinkTitle || "",
184
+ path: path || "",
185
+ active: active || false,
186
+ items: items || [],
187
+ target,
188
+ title,
189
+ },
190
+ clickedIndex: e.detail.index,
191
+ }, true);
192
+ }
193
+ setActiveItem(navItems, clickedItem) {
194
+ const updateNav = (items, { title, path }) => {
195
+ items.forEach(item => {
196
+ if (item.title === title && (item.path === path || !item.path)) {
197
+ item.active = true;
198
+ return;
199
+ }
200
+ delete item.active;
201
+ if (item.items) {
202
+ updateNav(item.items, clickedItem);
203
+ }
204
+ });
205
+ };
206
+ updateNav(navItems, clickedItem);
207
+ this.navItems = JSON.stringify(navItems);
208
+ }
209
+ handleOutsideClick() {
210
+ document.addEventListener("click", (e) => {
211
+ if (this.isMobileScreen && e.target !== this) {
212
+ this.closeMobileDropdown();
213
+ return;
214
+ }
215
+ if (this.isDesktopScreen) {
216
+ this.handleDesktopDropdown(e);
217
+ }
218
+ });
240
219
  }
241
- get navigationItems() {
242
- return Array.from(this.shadowRoot.querySelectorAll(".udex-secondary-navigation__link-btn-wrap"));
220
+ closeMobileDropdown() {
221
+ this.mobileNav?.closeDropdown();
222
+ }
223
+ handleDesktopDropdown(e) {
224
+ const isClickedNavItem = e.composedPath().includes(this._clickedNavItem);
225
+ if (!isClickedNavItem && this._clickedNavItem) {
226
+ this._clickedNavItem.closeDropdown();
227
+ }
228
+ }
229
+ closePrevDropdown(clickedItemId) {
230
+ this.domNavItems.forEach(item => {
231
+ if (clickedItemId !== item._id) {
232
+ item.closeDropdown();
233
+ }
234
+ });
235
+ }
236
+ parseArrayFromString(string) {
237
+ return string ? JSON.parse(string) : [];
243
238
  }
244
239
  get domNavItems() {
245
- const navigationItemsSelector = ".udex-secondary-navigation__item:not(.udex-secondary-navigation__link-btn-more), .udex-secondary-navigation__dropdown-item";
246
- const domNavItems = this.shadowRoot?.querySelectorAll(navigationItemsSelector);
247
- return domNavItems ? Array.from(domNavItems) : [];
240
+ const items = this.shadowRoot?.querySelectorAll("udex-secondary-navigation-item");
241
+ return items ? Array.from(items) : [];
248
242
  }
249
243
  get rootHolder() {
250
244
  return (this.shadowRoot ? this.shadowRoot.querySelector(".udex-secondary-navigation__root") : undefined);
@@ -252,48 +246,42 @@ let UDExSecondaryNavigation = UDExSecondaryNavigation_1 = class UDExSecondaryNav
252
246
  get heading() {
253
247
  return (this.shadowRoot ? this.shadowRoot.querySelector(".udex-secondary-navigation__heading") : undefined);
254
248
  }
249
+ get mobileNav() {
250
+ return (this.shadowRoot ? this.shadowRoot.querySelector(".udex-secondary-navigation__mobile-nav") : undefined);
251
+ }
255
252
  get optionalButtons() {
256
253
  return this.shadowRoot?.querySelector(".udex-secondary-navigation__buttons");
257
254
  }
258
- get linksList() {
259
- return this.shadowRoot?.querySelector(".udex-secondary-navigation__list");
260
- }
261
255
  get moreButtonText() {
262
256
  return UDExSecondaryNavigation_1.i18nBundle.getText(MORE);
263
257
  }
264
- get activeItemText() {
265
- const activeItem = this.navigationList.find(item => item.active);
266
- return activeItem ? activeItem?.title : "";
258
+ get parsedItems() {
259
+ return this.parseArrayFromString(this.navItems);
267
260
  }
268
- get moreClass() {
269
- const rootClasses = "udex-secondary-navigation__list-item udex-secondary-navigation__list-item_more";
270
- return this._dropdownMoreIsOpen ? `${rootClasses} udex-secondary-navigation__list-item_open` : `${rootClasses}`;
261
+ get visibleItems() {
262
+ return this.isDesktopScreen ? this._visibleItems : this.parsedItems;
271
263
  }
272
- get navigationList() {
273
- if (!this._navigationList) {
274
- this._navigationList = this.parseArrayFromString(this.navItems);
275
- }
276
- return this._navigationList;
277
- }
278
- get items() {
279
- return this.isDesktopScreen ? this._navItems : this.navigationList;
280
- }
281
- get moreIsActive() {
282
- return this._overflowItems.some(item => item.active);
264
+ get hasBreadcrumbsSlot() {
265
+ return !!this.getSlottedNodes("breadcrumbs").length && this.isDesktopScreen;
283
266
  }
284
267
  get rootClass() {
285
- const centeredClass = this.hasBreadcrumbsSlot ? "" : `${rootClass}_centered`;
286
- return `${rootClass} ${centeredClass}`;
268
+ return `${rootClass} ${this.hasBreadcrumbsSlot ? "" : `${rootClass}_centered`}`.trim();
287
269
  }
288
- get hasBreadcrumbsSlot() {
289
- return !!this.getSlottedNodes("breadcrumbs").length;
270
+ get hasDesktopButtonsSlot() {
271
+ return this.hasButtons && this.isDesktopScreen;
290
272
  }
291
- get hasButtonsSlot() {
273
+ get hasMobileButtonsSlot() {
274
+ return this.hasButtons && this.isMobileScreen;
275
+ }
276
+ get hasButtons() {
292
277
  return !!this.getSlottedNodes("buttons").length;
293
278
  }
294
279
  get isDesktopScreen() {
295
280
  return window.innerWidth > breakpointSizeS;
296
281
  }
282
+ get isMobileScreen() {
283
+ return window.innerWidth <= breakpointSizeS;
284
+ }
297
285
  };
298
286
  __decorate([
299
287
  property({ type: String })
@@ -310,15 +298,18 @@ __decorate([
310
298
  __decorate([
311
299
  property()
312
300
  ], UDExSecondaryNavigation.prototype, "title", void 0);
301
+ __decorate([
302
+ property()
303
+ ], UDExSecondaryNavigation.prototype, "titleHref", void 0);
313
304
  __decorate([
314
305
  property({ type: Boolean, noAttribute: true })
315
- ], UDExSecondaryNavigation.prototype, "_dropdownMoreIsOpen", void 0);
306
+ ], UDExSecondaryNavigation.prototype, "_selectedMore", void 0);
316
307
  __decorate([
317
- property({ type: HTMLElement, defaultValue: [], noAttribute: true })
308
+ property({ type: Object, multiple: true, noAttribute: true })
318
309
  ], UDExSecondaryNavigation.prototype, "_overflowItems", void 0);
319
310
  __decorate([
320
- property({ type: HTMLElement, defaultValue: [], noAttribute: true })
321
- ], UDExSecondaryNavigation.prototype, "_navItems", void 0);
311
+ property({ type: Object, multiple: true, noAttribute: true })
312
+ ], UDExSecondaryNavigation.prototype, "_visibleItems", void 0);
322
313
  __decorate([
323
314
  property({ type: Boolean, noAttribute: true })
324
315
  ], UDExSecondaryNavigation.prototype, "_requestRender", void 0);
@@ -331,7 +322,7 @@ UDExSecondaryNavigation = UDExSecondaryNavigation_1 = __decorate([
331
322
  renderer: litRender,
332
323
  styles: SecondaryNavigationCss,
333
324
  template: SecondaryNavigationTemplate,
334
- dependencies: [UI5Icon],
325
+ dependencies: [UDExSecondaryNavigationItem],
335
326
  })
336
327
  /**
337
328
  * Fires when item is clicked
@@ -346,7 +337,7 @@ UDExSecondaryNavigation = UDExSecondaryNavigation_1 = __decorate([
346
337
  type: Event,
347
338
  },
348
339
  clickedItem: {
349
- type: HTMLElement,
340
+ type: Object,
350
341
  },
351
342
  clickedIndex: {
352
343
  type: Integer,
@@ -1 +1 @@
1
- {"version":3,"file":"SecondaryNavigation.js","sourceRoot":"","sources":["../src/SecondaryNavigation.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element, { ChangeInfo } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport { isDesktop } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport UI5Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport Integer from \"@ui5/webcomponents-base/dist/types/Integer.js\";\nimport \"@ui5/webcomponents-icons/dist/slim-arrow-down.js\";\nimport {\n isLeft,\n isRight,\n isUp,\n isDown,\n isEscape,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport { MORE } from \"./generated/i18n/i18n-defaults.js\";\n\nimport SecondaryNavigationTemplate from \"./generated/templates/SecondaryNavigationTemplate.lit.js\";\n\n// Styles\nimport SecondaryNavigationCss from \"./generated/themes/SecondaryNavigation.css.js\";\n\nconst mobileMenuActiveClass = \"udex-secondary-navigation__root_open\";\nconst rootClass = \"udex-secondary-navigation__root\";\nconst breakpointSizeS: number = 979;\n\nexport enum Target {\n _blank = \"_blank\",\n _parent = \"_parent\",\n _self = \"_self\",\n _top = \"_top\",\n}\n\nexport type NavItem = {\n path: string;\n mobileLinkTitle: string;\n target: Target;\n title: string;\n active?: boolean;\n}\n\nexport type SecondaryNavigationItemClickDetail = {\n originalEvent: Event,\n clickedItem: HTMLElement;\n clickedIndex: number;\n}\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-secondary-navigation</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@udex/web-components/dist/SecondaryNavigation.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n tag: \"udex-secondary-navigation\",\n renderer: litRender,\n styles: SecondaryNavigationCss,\n template: SecondaryNavigationTemplate,\n dependencies: [UI5Icon],\n})\n\n/**\n * Fires when item is clicked\n *\n * @allowPreventDefault\n * @public\n */\n@event<SecondaryNavigationItemClickDetail>(\"item-click\", {\n detail: {\n originalEvent: {\n type: Event,\n },\n clickedItem: {\n type: HTMLElement,\n },\n clickedIndex: {\n type: Integer,\n },\n },\n})\n\nclass UDExSecondaryNavigation extends UI5Element {\n /**\n * Defines an aria label for the mobile menu opener\n *\n * @public\n */\n @property({ type: String })\n mobileMenuOpenerAriaLabel!: string;\n\n /**\n * List of the nav items\n *\n * @default \"[]\"\n * @public\n */\n @property({ type: String, defaultValue: \"[]\" })\n navItems!: string;\n\n /**\n * Slot for breadcrumbs.\n *\n * @slot breadcrumbs\n * @public\n */\n @slot({ type: HTMLElement })\n breadcrumbs!: Array<HTMLElement>;\n\n /**\n * Slot for action buttons.\n *\n * @slot buttons\n * @public\n */\n @slot({ type: HTMLElement })\n buttons!: Array<HTMLElement>;\n\n /**\n * Defines the title of the component.\n *\n * @default \"\"\n * @public\n */\n @property()\n title!: string;\n\n @property({ type: Boolean, noAttribute: true })\n _dropdownMoreIsOpen!: boolean;\n\n @property({ type: HTMLElement, defaultValue: [], noAttribute: true })\n _overflowItems!: Array<NavItem>;\n\n @property({ type: HTMLElement, defaultValue: [], noAttribute: true })\n _navItems!: Array<NavItem>;\n\n @property({ type: Boolean, noAttribute: true })\n _requestRender = false;\n\n @property({ type: Boolean, noAttribute: true })\n _mobileBtnExpanded = false;\n\n _showMoreButton: boolean;\n _navigationList: Array<NavItem> | undefined;\n _dropdown!: HTMLElement | null | undefined;\n _rootHolder!: HTMLElement | null | undefined;\n _boundReflowItems: () => void;\n\n static i18nBundle: any;\n\n static async onDefine(): Promise<void> {\n UDExSecondaryNavigation.i18nBundle = await getI18nBundle(\"udex-secondary-navigation\");\n }\n\n constructor() {\n super();\n this._showMoreButton = true;\n this._boundReflowItems = this.reflowItems.bind(this);\n }\n\n onEnterDOM(): void {\n if (isDesktop()) {\n this.setAttribute(\"desktop\", \"\");\n }\n\n if (this.isDesktopScreen) {\n this.reflowItems();\n }\n\n ResizeHandler.register(this.rootHolder, this._boundReflowItems);\n }\n\n onExitDOM(): void {\n ResizeHandler.deregister(this.rootHolder, this._boundReflowItems);\n }\n\n onInvalidation(changeInfo: ChangeInfo): void {\n if (changeInfo.name === \"navItems\") {\n this._navigationList = undefined;\n this.reflowItems();\n }\n }\n\n onAfterRendering(): void {\n this._rootHolder = this.rootHolder;\n this._dropdown = this.getDropdown();\n\n this.handleOutsideClick();\n }\n\n refreshRendering(): void {\n this._requestRender = !this._requestRender;\n }\n\n reflowItems(): void {\n const availableWidth = this.rootHolder.offsetWidth - this.heading.offsetWidth - (this.optionalButtons?.offsetWidth || 0);\n const moreButtonWidth = this.getMoreButtonWidth();\n const itemsGap = 20;\n\n const widths = this.navigationList.map(item => this.getItemWidth(item));\n\n const steps: Array<number> = [];\n widths.forEach((itemWidth, index) => {\n steps.push((steps.at(-1) || 0) + itemWidth + (index && itemsGap));\n });\n\n if ((steps.at(-1) || 0) <= availableWidth) {\n this._navItems.splice(0, Infinity, ...this.navigationList);\n this._showMoreButton = false;\n this.refreshRendering();\n return;\n }\n\n // @ts-ignore\n const lastVisibleIndex: number = steps.findLastIndex((size: number) => size < (availableWidth - moreButtonWidth - itemsGap));\n this._navItems.splice(0, Infinity, ...this.navigationList.slice(0, lastVisibleIndex + 1));\n this._overflowItems.splice(0, Infinity, ...this.navigationList.slice(lastVisibleIndex + 1));\n this._showMoreButton = true;\n this.refreshRendering();\n }\n\n handleKeyDown(e: KeyboardEvent) {\n e.stopPropagation();\n this.handleLeftArrow(e);\n this.handleRightArrow(e);\n this.handleEscapeKey(e);\n }\n\n handleEscapeKey(e: KeyboardEvent) {\n if (isEscape(e)) {\n if (!this.isDesktopScreen) {\n this._rootHolder?.classList.remove(mobileMenuActiveClass);\n this.getMobileButtonMenu().focus();\n } else {\n this.onCloseDropdown();\n this.getMoreButton().focus();\n }\n }\n }\n\n handleKeyDownDropdown(e: KeyboardEvent) {\n e.stopPropagation();\n this.handleUpArrow(e);\n this.handleDownArrow(e);\n this.handleEscapeKey(e);\n }\n\n handleLeftArrow(e: KeyboardEvent): void {\n if (isLeft(e)) {\n this.focusPrevNavItem(e);\n }\n }\n\n handleRightArrow(e: KeyboardEvent): void {\n if (isRight(e)) {\n this.focusNextNavItem(e);\n }\n }\n\n handleUpArrow(e: KeyboardEvent): void {\n if (isUp(e)) {\n this.focusPrevNavItem(e);\n }\n }\n\n handleDownArrow(e: KeyboardEvent): void {\n if (isDown(e)) {\n this.focusNextNavItem(e);\n }\n }\n\n handleOutsideClick(): void {\n document.addEventListener(\"click\", () => {\n if (this._dropdown) {\n this.onCloseDropdown();\n }\n });\n }\n\n handleMobileOpen(): void {\n this.toggleActiveClass();\n this._mobileBtnExpanded = !this._mobileBtnExpanded;\n }\n\n handleToggleDropdown(): void {\n this._dropdownMoreIsOpen = !this._dropdownMoreIsOpen;\n }\n\n toggleActiveClass() {\n this._rootHolder?.classList.toggle(mobileMenuActiveClass);\n }\n\n focusPrevNavItem(e: KeyboardEvent): void {\n const el = e.target as HTMLElement;\n const currentItem = el.parentElement as HTMLElement;\n const currentSelectedIndex = this.getCurrentIndex(currentItem);\n const lastItemIndex = this.navigationItems.length - 1;\n const previousSelectIndex = currentSelectedIndex - 1 < 0 ? lastItemIndex : currentSelectedIndex - 1;\n const listItem = this.getListItemByIndex(previousSelectIndex);\n listItem?.focus();\n }\n\n focusNextNavItem(e: KeyboardEvent): void {\n const el = e.target as HTMLElement;\n const currentItem = el.parentElement as HTMLElement;\n const currentSelectedIndex = this.getCurrentIndex(currentItem);\n const nextSelectIndex = currentSelectedIndex + 1 > this.navigationItems.length - 1 ? 0 : currentSelectedIndex + 1;\n const listItem = this.getListItemByIndex(nextSelectIndex);\n listItem?.focus();\n }\n\n onCloseDropdown(): void {\n this._dropdownMoreIsOpen = false;\n }\n\n getItemWidth(item: NavItem): number {\n const canvas = document.createElement(\"canvas\");\n const context = canvas.getContext(\"2d\")!;\n context.font = \"16px / 17.6px '72 Brand Variable'\";\n\n return Math.ceil(context.measureText(item.title).width);\n }\n\n getCurrentIndex(item: HTMLElement): number {\n return this.navigationItems.indexOf(item);\n }\n\n getListItemByIndex(index: number): HTMLElement | null {\n return this.navigationItems[index].querySelector(\".udex-secondary-navigation__link-btn\");\n }\n\n getDropdown(): HTMLElement {\n return this.shadowRoot!.querySelector(\".udex-secondary-navigation__dropdown\")!;\n }\n\n getMobileButtonMenu(): HTMLElement {\n return this.shadowRoot?.querySelector(\".udex-secondary-navigation__mobile-opener\") as HTMLElement;\n }\n\n getMoreButton(): HTMLElement {\n return this.shadowRoot!.querySelector(\".udex-secondary-navigation__list-item_more > button\")!;\n }\n\n getMoreButtonWidth(): number {\n const canvas = document.createElement(\"canvas\");\n const context = canvas.getContext(\"2d\")!;\n context.font = \"16px / 17.6px '72 Brand Variable'\";\n\n return Math.ceil(context.measureText(\"More\").width) + 4 + 16;\n }\n\n parseArrayFromString<T>(string: string): T[] {\n return string ? JSON.parse(string) as T[] : [];\n }\n\n handleNavigationClick(e: MouseEvent) {\n const target = e.target as HTMLElement;\n const clickedIndex = this.domNavItems.indexOf(target);\n const prevented = !this.fireEvent(\"item-click\", {\n originalEvent: e,\n clickedItem: target,\n clickedIndex,\n }, true);\n\n if (prevented) {\n e.preventDefault();\n return;\n }\n\n if (this.domNavItems.length > 0) {\n this.navigationList.forEach(item => delete item.active);\n this.navigationList[clickedIndex].active = true;\n this.refreshRendering();\n this.toggleActiveClass();\n }\n }\n\n get navigationItems(): Array<HTMLElement> {\n return Array.from(this.shadowRoot!.querySelectorAll(\".udex-secondary-navigation__link-btn-wrap\"));\n }\n\n get domNavItems(): Array<HTMLElement> {\n const navigationItemsSelector = \".udex-secondary-navigation__item:not(.udex-secondary-navigation__link-btn-more), .udex-secondary-navigation__dropdown-item\";\n const domNavItems = this.shadowRoot?.querySelectorAll<HTMLElement>(navigationItemsSelector);\n return domNavItems ? Array.from(domNavItems) : [];\n }\n\n get rootHolder(): HTMLElement {\n return (this.shadowRoot ? this.shadowRoot.querySelector<HTMLElement>(\".udex-secondary-navigation__root\") : undefined)!;\n }\n\n get heading(): HTMLElement {\n return (this.shadowRoot ? this.shadowRoot.querySelector<HTMLElement>(\".udex-secondary-navigation__heading\") : undefined)!;\n }\n\n get optionalButtons() {\n return this.shadowRoot?.querySelector<HTMLElement>(\".udex-secondary-navigation__buttons\");\n }\n\n get linksList() {\n return this.shadowRoot?.querySelector<HTMLElement>(\".udex-secondary-navigation__list\");\n }\n\n get moreButtonText(): string {\n return UDExSecondaryNavigation.i18nBundle.getText(MORE) as string;\n }\n\n get activeItemText(): string {\n const activeItem = this.navigationList.find(item => item.active);\n return activeItem ? activeItem?.title : \"\";\n }\n\n get moreClass(): string {\n const rootClasses = \"udex-secondary-navigation__list-item udex-secondary-navigation__list-item_more\";\n return this._dropdownMoreIsOpen ? `${rootClasses} udex-secondary-navigation__list-item_open` : `${rootClasses}`;\n }\n\n get navigationList(): Array<NavItem> {\n if (!this._navigationList) {\n this._navigationList = this.parseArrayFromString<NavItem>(this.navItems);\n }\n return this._navigationList;\n }\n\n get items(): Array<NavItem> {\n return this.isDesktopScreen ? this._navItems : this.navigationList;\n }\n\n get moreIsActive(): boolean {\n return this._overflowItems.some(item => item.active);\n }\n\n get rootClass(): string {\n const centeredClass = this.hasBreadcrumbsSlot ? \"\" : `${rootClass}_centered`;\n return `${rootClass} ${centeredClass}`;\n }\n\n get hasBreadcrumbsSlot(): boolean {\n return !!this.getSlottedNodes(\"breadcrumbs\").length;\n }\n\n get hasButtonsSlot(): boolean {\n return !!this.getSlottedNodes(\"buttons\").length;\n }\n\n get isDesktopScreen(): boolean {\n return window.innerWidth > breakpointSizeS;\n }\n}\n\nUDExSecondaryNavigation.define();\n\nexport default UDExSecondaryNavigation;\n"]}
1
+ {"version":3,"file":"SecondaryNavigation.js","sourceRoot":"","sources":["../src/SecondaryNavigation.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element, { ChangeInfo } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport { isDesktop } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport Integer from \"@ui5/webcomponents-base/dist/types/Integer.js\";\nimport {\n isLeft,\n isRight,\n isEscape,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport UDExSecondaryNavigationItem from \"./SecondaryNavigationItem.js\";\nimport UDExSecondaryNavigationSubItem from \"./SecondaryNavigationSubItem.js\";\nimport UDExSecondaryNavigationItemBase, { NavItem } from \"./SecondaryNavigationItemBase.js\";\nimport { MORE } from \"./generated/i18n/i18n-defaults.js\";\n\nimport SecondaryNavigationTemplate from \"./generated/templates/SecondaryNavigationTemplate.lit.js\";\n\n// Styles\nimport SecondaryNavigationCss from \"./generated/themes/SecondaryNavigation.css.js\";\n\nconst canvasContentFont: string = \"16px / 17.6px '72 Brand Variable'\";\nconst rootClass = \"udex-secondary-navigation__root\";\nexport const breakpointSizeS: number = 979;\n\nexport type ItemClickDetail = {\n originalEvent: Event,\n clickedItem: NavItem;\n clickedIndex: number;\n};\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-secondary-navigation</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@udex/web-components/dist/SecondaryNavigation.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n tag: \"udex-secondary-navigation\",\n renderer: litRender,\n styles: SecondaryNavigationCss,\n template: SecondaryNavigationTemplate,\n dependencies: [UDExSecondaryNavigationItem],\n})\n\n/**\n * Fires when item is clicked\n *\n * @allowPreventDefault\n * @public\n */\n@event<ItemClickDetail>(\"item-click\", {\n detail: {\n originalEvent: {\n type: Event,\n },\n clickedItem: {\n type: Object,\n },\n clickedIndex: {\n type: Integer,\n },\n },\n})\n\nclass UDExSecondaryNavigation extends UI5Element {\n /**\n * Defines an aria label for the mobile menu opener\n *\n * @public\n */\n @property({ type: String })\n mobileMenuOpenerAriaLabel!: string;\n\n /**\n * List of the nav items\n *\n * @default \"[]\"\n * @public\n */\n @property({ type: String, defaultValue: \"[]\" })\n navItems!: string;\n\n /**\n * Slot for breadcrumbs.\n *\n * @slot breadcrumbs\n * @public\n */\n @slot({ type: HTMLElement })\n breadcrumbs!: Array<HTMLElement>;\n\n /**\n * Slot for action buttons.\n *\n * @slot buttons\n * @public\n */\n @slot({ type: HTMLElement })\n buttons!: Array<HTMLElement>;\n\n /**\n * Defines the title of the component.\n *\n * @default \"\"\n * @public\n */\n @property()\n title!: string;\n\n /**\n * Defines the href of the title.\n *\n * @default \"\"\n * @public\n */\n @property()\n titleHref!: string;\n\n @property({ type: Boolean, noAttribute: true })\n _selectedMore!: boolean;\n\n @property({ type: Object, multiple: true, noAttribute: true })\n _overflowItems!: Array<NavItem>;\n\n @property({ type: Object, multiple: true, noAttribute: true })\n _visibleItems!: Array<NavItem>;\n\n @property({ type: Boolean, noAttribute: true })\n _requestRender = false;\n\n @property({ type: Boolean, noAttribute: true })\n _mobileBtnExpanded = false;\n\n _navItems!: Array<NavItem>;\n _showMoreButton: boolean;\n _rootHolder!: HTMLElement | null | undefined;\n _clickedNavItem!: UDExSecondaryNavigationItem;\n _boundReflowItems: () => void;\n\n static i18nBundle: any;\n\n static async onDefine(): Promise<void> {\n UDExSecondaryNavigation.i18nBundle = await getI18nBundle(\"udex-secondary-navigation\");\n }\n\n constructor() {\n super();\n this._showMoreButton = true;\n this._boundReflowItems = this.reflowItems.bind(this);\n }\n\n onEnterDOM(): void {\n if (isDesktop()) {\n this.setAttribute(\"desktop\", \"\");\n }\n\n ResizeHandler.register(this, this._boundReflowItems);\n }\n\n onExitDOM(): void {\n ResizeHandler.deregister(this, this._boundReflowItems);\n }\n\n onInvalidation(changeInfo: ChangeInfo): void {\n if (changeInfo.name === \"navItems\") {\n this.reflowItems();\n }\n }\n\n onAfterRendering(): void {\n this._rootHolder = this.rootHolder;\n this.handleOutsideClick();\n }\n\n refreshRendering(): void {\n this._requestRender = !this._requestRender;\n }\n\n reflowItems(): void {\n const availableWidth = this.rootHolder.offsetWidth - this.heading?.offsetWidth - (this.optionalButtons?.offsetWidth || 0);\n const moreButtonWidth = this.getMoreButtonWidth();\n const itemsGap = 20;\n const widths = this.parsedItems.map(item => this.getItemWidth(item));\n const steps: Array<number> = [];\n\n widths?.forEach((itemWidth, index) => {\n steps.push((steps.at(-1) || 0) + itemWidth + (index && itemsGap));\n });\n\n if ((steps.at(-1) || 0) <= availableWidth) {\n this._visibleItems.splice(0, Infinity, ...this.parsedItems);\n this._showMoreButton = false;\n this.refreshRendering();\n return;\n }\n\n if (this.parsedItems) {\n // @ts-ignore\n const lastVisibleIndex: number = steps.findLastIndex((size: number) => size < (availableWidth - moreButtonWidth - itemsGap));\n this._visibleItems.splice(0, Infinity, ...this.parsedItems.slice(0, lastVisibleIndex + 1));\n this._overflowItems.splice(0, Infinity, ...this.parsedItems.slice(lastVisibleIndex + 1));\n this._showMoreButton = true;\n this.refreshRendering();\n }\n }\n\n handleKeyDown(e: KeyboardEvent): void {\n e.stopPropagation();\n if (isLeft(e)) {\n this.focusPrevNavItem(e);\n }\n if (isRight(e)) {\n this.focusNextNavItem(e);\n }\n if (isEscape(e)) {\n (e.target as UDExSecondaryNavigationItem).closeDropdown();\n }\n }\n\n focusPrevNavItem(e: KeyboardEvent): void {\n const item = e.target as UDExSecondaryNavigationItem;\n const currentSelectedIndex = this.getCurrentIndex(item);\n const lastItemIndex = this.domNavItems.length - 1;\n const previousSelectIndex = currentSelectedIndex - 1 < 0 ? lastItemIndex : currentSelectedIndex - 1;\n this.domNavItems[previousSelectIndex]?.focus();\n }\n\n focusNextNavItem(e: KeyboardEvent): void {\n const item = e.target as UDExSecondaryNavigationItem;\n const currentSelectedIndex = this.getCurrentIndex(item);\n const nextSelectIndex = currentSelectedIndex + 1 > this.domNavItems.length - 1 ? 0 : currentSelectedIndex + 1;\n this.domNavItems[nextSelectIndex].focus();\n }\n\n getItemWidth(item: NavItem): number {\n const context = this.getCanvasContext();\n context.font = canvasContentFont;\n\n return Math.ceil(context.measureText(item.title).width);\n }\n\n getMoreButtonWidth(): number {\n const context = this.getCanvasContext();\n context.font = canvasContentFont;\n\n return Math.ceil(context.measureText(this.moreButtonText).width);\n }\n\n getCanvasContext(): CanvasRenderingContext2D {\n const canvas = document.createElement(\"canvas\");\n return canvas.getContext(\"2d\")!;\n }\n\n getCurrentIndex(item: UDExSecondaryNavigationItem): number {\n return this.domNavItems.indexOf(item);\n }\n\n handleItemClick(e: CustomEvent): void {\n const clickedItem = e.detail.item as UDExSecondaryNavigationItem;\n const {\n path, target, title, active, subItems, _id, mobileLinkTitle,\n } = clickedItem;\n\n const prevented = !this.fireEventItemClick(e, {\n path,\n target,\n title,\n active,\n mobileLinkTitle,\n items: subItems,\n });\n\n if (prevented) {\n e.preventDefault();\n return;\n }\n\n this._clickedNavItem = clickedItem;\n this.closePrevDropdown(_id);\n\n if (!subItems.length) {\n this.setActiveItem(this.parsedItems, clickedItem);\n }\n }\n\n handleSubItemClick(e: CustomEvent): void {\n const item = e.detail.item as UDExSecondaryNavigationSubItem;\n const { items } = item as NavItem;\n const prevented = !this.fireEventItemClick(e, item);\n\n if (prevented) {\n e.preventDefault();\n return;\n }\n\n if (this.isMobileScreen && !items) {\n this.mobileNav.closeDropdown();\n }\n\n if (!items) {\n this.setActiveItem(this.parsedItems, item);\n this._clickedNavItem?.closeDropdown();\n }\n }\n\n fireEventItemClick(\n e: CustomEvent,\n {\n items, target, path, title, active, mobileLinkTitle,\n }: NavItem,\n ): boolean {\n return this.fireEvent(\"item-click\", {\n originalEvent: e,\n clickedItem: {\n mobileLinkTitle: mobileLinkTitle || \"\",\n path: path || \"\",\n active: active || false,\n items: items || [],\n target,\n title,\n },\n clickedIndex: e.detail.index,\n }, true);\n }\n\n setActiveItem(navItems: Array<NavItem>, clickedItem: UDExSecondaryNavigationItemBase): void {\n const updateNav = (items: Array<NavItem>, { title, path }: UDExSecondaryNavigationItemBase) => {\n items.forEach(item => {\n if (item.title === title && (item.path === path || !item.path)) {\n item.active = true;\n return;\n }\n delete item.active;\n\n if (item.items) {\n updateNav(item.items, clickedItem);\n }\n });\n };\n\n updateNav(navItems, clickedItem);\n this.navItems = JSON.stringify(navItems);\n }\n\n handleOutsideClick(): void {\n document.addEventListener(\"click\", (e: MouseEvent) => {\n if (this.isMobileScreen && e.target !== this) {\n this.closeMobileDropdown();\n return;\n }\n\n if (this.isDesktopScreen) {\n this.handleDesktopDropdown(e);\n }\n });\n }\n\n closeMobileDropdown(): void {\n this.mobileNav?.closeDropdown();\n }\n\n handleDesktopDropdown(e: MouseEvent): void {\n const isClickedNavItem = e.composedPath().includes(this._clickedNavItem);\n if (!isClickedNavItem && this._clickedNavItem) {\n this._clickedNavItem.closeDropdown();\n }\n }\n\n closePrevDropdown(clickedItemId: string): void {\n this.domNavItems.forEach(item => {\n if (clickedItemId !== item._id) {\n item.closeDropdown();\n }\n });\n }\n\n parseArrayFromString<T>(string: string): T[] {\n return string ? JSON.parse(string) as T[] : [];\n }\n\n get domNavItems(): Array<UDExSecondaryNavigationItem> {\n const items = this.shadowRoot?.querySelectorAll<UDExSecondaryNavigationItem>(\"udex-secondary-navigation-item\");\n return items ? Array.from(items) : [];\n }\n\n get rootHolder(): HTMLElement {\n return (this.shadowRoot ? this.shadowRoot.querySelector<HTMLElement>(\".udex-secondary-navigation__root\") : undefined)!;\n }\n\n get heading(): HTMLElement {\n return (this.shadowRoot ? this.shadowRoot.querySelector<HTMLElement>(\".udex-secondary-navigation__heading\") : undefined)!;\n }\n\n get mobileNav(): UDExSecondaryNavigationItem {\n return (this.shadowRoot ? this.shadowRoot.querySelector<UDExSecondaryNavigationItem>(\".udex-secondary-navigation__mobile-nav\") : undefined)!;\n }\n\n get optionalButtons(): HTMLElement | null | undefined {\n return this.shadowRoot?.querySelector<HTMLElement>(\".udex-secondary-navigation__buttons\");\n }\n\n get moreButtonText(): string {\n return UDExSecondaryNavigation.i18nBundle.getText(MORE) as string;\n }\n\n get parsedItems(): Array<NavItem> {\n return this.parseArrayFromString<NavItem>(this.navItems);\n }\n\n get visibleItems(): Array<NavItem> {\n return this.isDesktopScreen ? this._visibleItems : this.parsedItems;\n }\n\n get hasBreadcrumbsSlot(): boolean {\n return !!this.getSlottedNodes(\"breadcrumbs\").length && this.isDesktopScreen;\n }\n\n get rootClass(): string {\n return `${rootClass} ${this.hasBreadcrumbsSlot ? \"\" : `${rootClass}_centered`}`.trim();\n }\n\n get hasDesktopButtonsSlot(): boolean {\n return this.hasButtons && this.isDesktopScreen;\n }\n\n get hasMobileButtonsSlot(): boolean {\n return this.hasButtons && this.isMobileScreen;\n }\n\n get hasButtons(): boolean {\n return !!this.getSlottedNodes(\"buttons\").length;\n }\n\n get isDesktopScreen(): boolean {\n return window.innerWidth > breakpointSizeS;\n }\n\n get isMobileScreen(): boolean {\n return window.innerWidth <= breakpointSizeS;\n }\n}\n\nUDExSecondaryNavigation.define();\n\nexport default UDExSecondaryNavigation;\n"]}