@sapudex/web-components 2.60.0 → 2.61.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 (294) hide show
  1. package/cypress/specs/Carousel.cy.tsx +46 -0
  2. package/cypress/specs/SecondaryNavigationDesktop.cy.tsx +52 -3
  3. package/cypress/specs/SelectBox.cy.tsx +37 -5
  4. package/cypress/specs/SideNavigation.cy.tsx +509 -0
  5. package/cypress/specs/Table.cy.tsx +90 -0
  6. package/cypress/support/component-imports.instrumented.ts +6 -0
  7. package/cypress/support/component-imports.src.ts +6 -0
  8. package/dist/Carousel.d.ts +1 -0
  9. package/dist/Carousel.js +16 -1
  10. package/dist/Carousel.js.map +1 -1
  11. package/dist/Pagination.d.ts +0 -1
  12. package/dist/Pagination.js +2 -2
  13. package/dist/Pagination.js.map +1 -1
  14. package/dist/SearchableListBaseTemplate.js +0 -1
  15. package/dist/SearchableListBaseTemplate.js.map +1 -1
  16. package/dist/SecondaryNavigation.d.ts +2 -1
  17. package/dist/SecondaryNavigation.js.map +1 -1
  18. package/dist/SecondaryNavigationItem.js +12 -6
  19. package/dist/SecondaryNavigationItem.js.map +1 -1
  20. package/dist/SecondaryNavigationTemplate.js +1 -2
  21. package/dist/SecondaryNavigationTemplate.js.map +1 -1
  22. package/dist/SelectBase.js +1 -1
  23. package/dist/SelectBase.js.map +1 -1
  24. package/dist/SideNavigation.d.ts +23 -0
  25. package/dist/SideNavigation.js +39 -0
  26. package/dist/SideNavigation.js.map +1 -1
  27. package/dist/SideNavigationItem.d.ts +10 -0
  28. package/dist/SideNavigationItem.js +67 -0
  29. package/dist/SideNavigationItem.js.map +1 -1
  30. package/dist/SideNavigationMobileTemplate.js +1 -1
  31. package/dist/SideNavigationMobileTemplate.js.map +1 -1
  32. package/dist/SideNavigationSubItem.d.ts +23 -0
  33. package/dist/SideNavigationSubItem.js +103 -0
  34. package/dist/SideNavigationSubItem.js.map +1 -1
  35. package/dist/SideNavigationSubItemTemplate.d.ts +2 -0
  36. package/dist/SideNavigationSubItemTemplate.js +10 -0
  37. package/dist/SideNavigationSubItemTemplate.js.map +1 -0
  38. package/dist/Table.js +1 -1
  39. package/dist/Table.js.map +1 -1
  40. package/dist/TableCell.d.ts +8 -2
  41. package/dist/TableCell.js +13 -11
  42. package/dist/TableCell.js.map +1 -1
  43. package/dist/TableCellBase.d.ts +2 -1
  44. package/dist/TableCellBase.js +9 -0
  45. package/dist/TableCellBase.js.map +1 -1
  46. package/dist/TableHeaderCell.d.ts +0 -1
  47. package/dist/TableHeaderCell.js +0 -4
  48. package/dist/TableHeaderCell.js.map +1 -1
  49. package/dist/TableRow.d.ts +10 -0
  50. package/dist/TableRow.js +23 -0
  51. package/dist/TableRow.js.map +1 -1
  52. package/dist/UploadItem.js +3 -4
  53. package/dist/UploadItem.js.map +1 -1
  54. package/dist/assets/{InputSuggestions-DyNcKgip.js → InputSuggestions-1OnUn6pM.js} +1 -1
  55. package/dist/assets/{ListItemStandardExpandableTextTemplate-qdKPzaOQ.js → ListItemStandardExpandableTextTemplate-CoBAMp_v.js} +1 -1
  56. package/dist/assets/{bundle.esm-sUYwSJOp.js → bundle.esm-BqaVWFKf.js} +233 -233
  57. package/dist/css/themes/AccordionSpotlight.css +1 -1
  58. package/dist/css/themes/Contact.css +1 -1
  59. package/dist/css/themes/EventRibbon.css +1 -1
  60. package/dist/css/themes/Feed.css +1 -1
  61. package/dist/css/themes/HeroBanner.css +1 -1
  62. package/dist/css/themes/ImageGridCloud.css +1 -1
  63. package/dist/css/themes/ImageGridTicker.css +1 -1
  64. package/dist/css/themes/ImageGridTickerItem.css +1 -1
  65. package/dist/css/themes/LinkList.css +1 -1
  66. package/dist/css/themes/MastheadCountrySelector.css +1 -1
  67. package/dist/css/themes/MastheadItem.css +1 -1
  68. package/dist/css/themes/MastheadMenu.css +1 -1
  69. package/dist/css/themes/MastheadMenuItem.css +1 -1
  70. package/dist/css/themes/MastheadMobileMenu.css +1 -1
  71. package/dist/css/themes/MastheadProfileMenu.css +1 -1
  72. package/dist/css/themes/MastheadShell.css +1 -1
  73. package/dist/css/themes/MessageStrip.css +1 -1
  74. package/dist/css/themes/Modal.css +1 -1
  75. package/dist/css/themes/PromoTile.css +1 -1
  76. package/dist/css/themes/Quote.css +1 -1
  77. package/dist/css/themes/Review.css +1 -1
  78. package/dist/css/themes/ReviewItem.css +1 -1
  79. package/dist/css/themes/SecondaryNavigation.css +1 -1
  80. package/dist/css/themes/SecondaryNavigationItem.css +1 -1
  81. package/dist/css/themes/SelectBase.css +1 -1
  82. package/dist/css/themes/SideNavigation.css +1 -1
  83. package/dist/css/themes/SideNavigationItem.css +1 -1
  84. package/dist/css/themes/SideNavigationMobile.css +1 -1
  85. package/dist/css/themes/SideNavigationMobileDropdown.css +1 -1
  86. package/dist/css/themes/SideNavigationSubItem.css +1 -1
  87. package/dist/css/themes/TabNavigation.css +1 -1
  88. package/dist/css/themes/Table.css +1 -1
  89. package/dist/css/themes/TableCellBase.css +1 -1
  90. package/dist/css/themes/Upload.css +1 -1
  91. package/dist/css/themes/UploadItem.css +1 -1
  92. package/dist/custom-elements-internal.json +155 -12
  93. package/dist/custom-elements.json +144 -19
  94. package/dist/generated/themes/AccordionSpotlight.css.d.ts +1 -1
  95. package/dist/generated/themes/AccordionSpotlight.css.js +1 -1
  96. package/dist/generated/themes/AccordionSpotlight.css.js.map +1 -1
  97. package/dist/generated/themes/Contact.css.d.ts +1 -1
  98. package/dist/generated/themes/Contact.css.js +1 -1
  99. package/dist/generated/themes/Contact.css.js.map +1 -1
  100. package/dist/generated/themes/EventRibbon.css.d.ts +1 -1
  101. package/dist/generated/themes/EventRibbon.css.js +1 -1
  102. package/dist/generated/themes/EventRibbon.css.js.map +1 -1
  103. package/dist/generated/themes/Feed.css.d.ts +1 -1
  104. package/dist/generated/themes/Feed.css.js +1 -1
  105. package/dist/generated/themes/Feed.css.js.map +1 -1
  106. package/dist/generated/themes/HeroBanner.css.d.ts +1 -1
  107. package/dist/generated/themes/HeroBanner.css.js +1 -1
  108. package/dist/generated/themes/HeroBanner.css.js.map +1 -1
  109. package/dist/generated/themes/ImageGridCloud.css.d.ts +1 -1
  110. package/dist/generated/themes/ImageGridCloud.css.js +1 -1
  111. package/dist/generated/themes/ImageGridCloud.css.js.map +1 -1
  112. package/dist/generated/themes/ImageGridTicker.css.d.ts +1 -1
  113. package/dist/generated/themes/ImageGridTicker.css.js +1 -1
  114. package/dist/generated/themes/ImageGridTicker.css.js.map +1 -1
  115. package/dist/generated/themes/ImageGridTickerItem.css.d.ts +1 -1
  116. package/dist/generated/themes/ImageGridTickerItem.css.js +1 -1
  117. package/dist/generated/themes/ImageGridTickerItem.css.js.map +1 -1
  118. package/dist/generated/themes/LinkList.css.d.ts +1 -1
  119. package/dist/generated/themes/LinkList.css.js +1 -1
  120. package/dist/generated/themes/LinkList.css.js.map +1 -1
  121. package/dist/generated/themes/MastheadCountrySelector.css.d.ts +1 -1
  122. package/dist/generated/themes/MastheadCountrySelector.css.js +1 -1
  123. package/dist/generated/themes/MastheadCountrySelector.css.js.map +1 -1
  124. package/dist/generated/themes/MastheadItem.css.d.ts +1 -1
  125. package/dist/generated/themes/MastheadItem.css.js +1 -1
  126. package/dist/generated/themes/MastheadItem.css.js.map +1 -1
  127. package/dist/generated/themes/MastheadMenu.css.d.ts +1 -1
  128. package/dist/generated/themes/MastheadMenu.css.js +1 -1
  129. package/dist/generated/themes/MastheadMenu.css.js.map +1 -1
  130. package/dist/generated/themes/MastheadMenuItem.css.d.ts +1 -1
  131. package/dist/generated/themes/MastheadMenuItem.css.js +1 -1
  132. package/dist/generated/themes/MastheadMenuItem.css.js.map +1 -1
  133. package/dist/generated/themes/MastheadMobileMenu.css.d.ts +1 -1
  134. package/dist/generated/themes/MastheadMobileMenu.css.js +1 -1
  135. package/dist/generated/themes/MastheadMobileMenu.css.js.map +1 -1
  136. package/dist/generated/themes/MastheadProfileMenu.css.d.ts +1 -1
  137. package/dist/generated/themes/MastheadProfileMenu.css.js +1 -1
  138. package/dist/generated/themes/MastheadProfileMenu.css.js.map +1 -1
  139. package/dist/generated/themes/MastheadShell.css.d.ts +1 -1
  140. package/dist/generated/themes/MastheadShell.css.js +1 -1
  141. package/dist/generated/themes/MastheadShell.css.js.map +1 -1
  142. package/dist/generated/themes/MessageStrip.css.d.ts +1 -1
  143. package/dist/generated/themes/MessageStrip.css.js +1 -1
  144. package/dist/generated/themes/MessageStrip.css.js.map +1 -1
  145. package/dist/generated/themes/Modal.css.d.ts +1 -1
  146. package/dist/generated/themes/Modal.css.js +1 -1
  147. package/dist/generated/themes/Modal.css.js.map +1 -1
  148. package/dist/generated/themes/PromoTile.css.d.ts +1 -1
  149. package/dist/generated/themes/PromoTile.css.js +1 -1
  150. package/dist/generated/themes/PromoTile.css.js.map +1 -1
  151. package/dist/generated/themes/Quote.css.d.ts +1 -1
  152. package/dist/generated/themes/Quote.css.js +1 -1
  153. package/dist/generated/themes/Quote.css.js.map +1 -1
  154. package/dist/generated/themes/Review.css.d.ts +1 -1
  155. package/dist/generated/themes/Review.css.js +1 -1
  156. package/dist/generated/themes/Review.css.js.map +1 -1
  157. package/dist/generated/themes/ReviewItem.css.d.ts +1 -1
  158. package/dist/generated/themes/ReviewItem.css.js +1 -1
  159. package/dist/generated/themes/ReviewItem.css.js.map +1 -1
  160. package/dist/generated/themes/SecondaryNavigation.css.d.ts +1 -1
  161. package/dist/generated/themes/SecondaryNavigation.css.js +1 -1
  162. package/dist/generated/themes/SecondaryNavigation.css.js.map +1 -1
  163. package/dist/generated/themes/SecondaryNavigationItem.css.d.ts +1 -1
  164. package/dist/generated/themes/SecondaryNavigationItem.css.js +1 -1
  165. package/dist/generated/themes/SecondaryNavigationItem.css.js.map +1 -1
  166. package/dist/generated/themes/SelectBase.css.d.ts +1 -1
  167. package/dist/generated/themes/SelectBase.css.js +1 -1
  168. package/dist/generated/themes/SelectBase.css.js.map +1 -1
  169. package/dist/generated/themes/SideNavigation.css.d.ts +1 -1
  170. package/dist/generated/themes/SideNavigation.css.js +1 -1
  171. package/dist/generated/themes/SideNavigation.css.js.map +1 -1
  172. package/dist/generated/themes/SideNavigationItem.css.d.ts +1 -1
  173. package/dist/generated/themes/SideNavigationItem.css.js +1 -1
  174. package/dist/generated/themes/SideNavigationItem.css.js.map +1 -1
  175. package/dist/generated/themes/SideNavigationMobile.css.d.ts +1 -1
  176. package/dist/generated/themes/SideNavigationMobile.css.js +1 -1
  177. package/dist/generated/themes/SideNavigationMobile.css.js.map +1 -1
  178. package/dist/generated/themes/SideNavigationMobileDropdown.css.d.ts +1 -1
  179. package/dist/generated/themes/SideNavigationMobileDropdown.css.js +1 -1
  180. package/dist/generated/themes/SideNavigationMobileDropdown.css.js.map +1 -1
  181. package/dist/generated/themes/SideNavigationSubItem.css.d.ts +1 -1
  182. package/dist/generated/themes/SideNavigationSubItem.css.js +1 -1
  183. package/dist/generated/themes/SideNavigationSubItem.css.js.map +1 -1
  184. package/dist/generated/themes/TabNavigation.css.d.ts +1 -1
  185. package/dist/generated/themes/TabNavigation.css.js +1 -1
  186. package/dist/generated/themes/TabNavigation.css.js.map +1 -1
  187. package/dist/generated/themes/Table.css.d.ts +1 -1
  188. package/dist/generated/themes/Table.css.js +1 -1
  189. package/dist/generated/themes/Table.css.js.map +1 -1
  190. package/dist/generated/themes/TableCellBase.css.d.ts +1 -1
  191. package/dist/generated/themes/TableCellBase.css.js +1 -1
  192. package/dist/generated/themes/TableCellBase.css.js.map +1 -1
  193. package/dist/generated/themes/Upload.css.d.ts +1 -1
  194. package/dist/generated/themes/Upload.css.js +1 -1
  195. package/dist/generated/themes/Upload.css.js.map +1 -1
  196. package/dist/generated/themes/UploadItem.css.d.ts +1 -1
  197. package/dist/generated/themes/UploadItem.css.js +1 -1
  198. package/dist/generated/themes/UploadItem.css.js.map +1 -1
  199. package/dist/types/Table.d.ts +6 -2
  200. package/dist/types/Table.js +7 -2
  201. package/dist/types/Table.js.map +1 -1
  202. package/dist/vscode.html-custom-data.json +44 -3
  203. package/dist/web-types.json +80 -6
  204. package/package.json +1 -1
  205. package/run-cypress.js +8 -1
  206. package/src/Carousel.ts +17 -1
  207. package/src/Pagination.ts +2 -3
  208. package/src/SearchableListBaseTemplate.tsx +0 -1
  209. package/src/SecondaryNavigation.ts +2 -1
  210. package/src/SecondaryNavigationItem.ts +14 -6
  211. package/src/SecondaryNavigationTemplate.tsx +4 -6
  212. package/src/SelectBase.ts +1 -1
  213. package/src/SideNavigation.ts +35 -0
  214. package/src/SideNavigationItem.ts +75 -0
  215. package/src/SideNavigationMobileTemplate.tsx +2 -1
  216. package/src/SideNavigationSubItem.ts +117 -1
  217. package/src/SideNavigationSubItemTemplate.tsx +56 -0
  218. package/src/Table.ts +1 -2
  219. package/src/TableCell.ts +9 -12
  220. package/src/TableCellBase.ts +10 -1
  221. package/src/TableHeaderCell.ts +0 -5
  222. package/src/TableRow.ts +20 -0
  223. package/src/UploadItem.ts +3 -5
  224. package/src/generated/themes/AccordionSpotlight.css.ts +1 -1
  225. package/src/generated/themes/Contact.css.ts +1 -1
  226. package/src/generated/themes/EventRibbon.css.ts +1 -1
  227. package/src/generated/themes/Feed.css.ts +1 -1
  228. package/src/generated/themes/HeroBanner.css.ts +1 -1
  229. package/src/generated/themes/ImageGridCloud.css.ts +1 -1
  230. package/src/generated/themes/ImageGridTicker.css.ts +1 -1
  231. package/src/generated/themes/ImageGridTickerItem.css.ts +1 -1
  232. package/src/generated/themes/LinkList.css.ts +1 -1
  233. package/src/generated/themes/MastheadCountrySelector.css.ts +1 -1
  234. package/src/generated/themes/MastheadItem.css.ts +1 -1
  235. package/src/generated/themes/MastheadMenu.css.ts +1 -1
  236. package/src/generated/themes/MastheadMenuItem.css.ts +1 -1
  237. package/src/generated/themes/MastheadMobileMenu.css.ts +1 -1
  238. package/src/generated/themes/MastheadProfileMenu.css.ts +1 -1
  239. package/src/generated/themes/MastheadShell.css.ts +1 -1
  240. package/src/generated/themes/MessageStrip.css.ts +1 -1
  241. package/src/generated/themes/Modal.css.ts +1 -1
  242. package/src/generated/themes/PromoTile.css.ts +1 -1
  243. package/src/generated/themes/Quote.css.ts +1 -1
  244. package/src/generated/themes/Review.css.ts +1 -1
  245. package/src/generated/themes/ReviewItem.css.ts +1 -1
  246. package/src/generated/themes/SecondaryNavigation.css.ts +1 -1
  247. package/src/generated/themes/SecondaryNavigationItem.css.ts +1 -1
  248. package/src/generated/themes/SelectBase.css.ts +1 -1
  249. package/src/generated/themes/SideNavigation.css.ts +1 -1
  250. package/src/generated/themes/SideNavigationItem.css.ts +1 -1
  251. package/src/generated/themes/SideNavigationMobile.css.ts +1 -1
  252. package/src/generated/themes/SideNavigationMobileDropdown.css.ts +1 -1
  253. package/src/generated/themes/SideNavigationSubItem.css.ts +1 -1
  254. package/src/generated/themes/TabNavigation.css.ts +1 -1
  255. package/src/generated/themes/Table.css.ts +1 -1
  256. package/src/generated/themes/TableCellBase.css.ts +1 -1
  257. package/src/generated/themes/Upload.css.ts +1 -1
  258. package/src/generated/themes/UploadItem.css.ts +1 -1
  259. package/src/themes/AccordionSpotlight.css +4 -1
  260. package/src/themes/Contact.css +1 -1
  261. package/src/themes/EventRibbon.css +4 -4
  262. package/src/themes/Feed.css +2 -2
  263. package/src/themes/HeroBanner.css +3 -3
  264. package/src/themes/ImageGridCloud.css +1 -1
  265. package/src/themes/ImageGridTicker.css +1 -1
  266. package/src/themes/ImageGridTickerItem.css +1 -1
  267. package/src/themes/LinkList.css +4 -4
  268. package/src/themes/MastheadCountrySelector.css +1 -1
  269. package/src/themes/MastheadItem.css +4 -4
  270. package/src/themes/MastheadMenu.css +1 -1
  271. package/src/themes/MastheadMenuItem.css +1 -1
  272. package/src/themes/MastheadMobileMenu.css +2 -2
  273. package/src/themes/MastheadProfileMenu.css +1 -1
  274. package/src/themes/MastheadShell.css +4 -4
  275. package/src/themes/MessageStrip.css +7 -2
  276. package/src/themes/Modal.css +1 -1
  277. package/src/themes/PromoTile.css +4 -3
  278. package/src/themes/Quote.css +2 -2
  279. package/src/themes/Review.css +2 -2
  280. package/src/themes/ReviewItem.css +2 -2
  281. package/src/themes/SecondaryNavigation.css +1 -2
  282. package/src/themes/SecondaryNavigationItem.css +3 -6
  283. package/src/themes/SelectBase.css +1 -1
  284. package/src/themes/SideNavigation.css +31 -8
  285. package/src/themes/SideNavigationItem.css +46 -18
  286. package/src/themes/SideNavigationMobile.css +6 -7
  287. package/src/themes/SideNavigationMobileDropdown.css +10 -3
  288. package/src/themes/SideNavigationSubItem.css +73 -17
  289. package/src/themes/TabNavigation.css +2 -2
  290. package/src/themes/Table.css +1 -1
  291. package/src/themes/TableCellBase.css +8 -0
  292. package/src/themes/Upload.css +1 -1
  293. package/src/themes/UploadItem.css +1 -1
  294. package/src/types/Table.ts +6 -2
@@ -1 +1 @@
1
- {"version":3,"file":"SideNavigationMobileTemplate.js","sourceRoot":"","sources":["../src/SideNavigationMobileTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,IAAI,MAAM,iCAAiC,CAAC;AACnD,OAAO,YAAY,MAAM,eAAe,CAAC;AACzC,OAAO,kBAAkB,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,4BAA4B,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AACrG,OAAO,aAAa,MAAM,kDAAkD,CAAC;AAE7E,MAAM,CAAC,OAAO,UAAU,4BAA4B;IAClD,OAAO,CACL,8BACE,eACE,EAAE,EAAE,QAAQ,IAAI,CAAC,GAAG,iCAAiC,EACrD,KAAK,EAAC,sCAAsC,mBAC9B,MAAM,EACpB,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,OAAO,EAAE,IAAI,CAAC,kBAAkB,qBAChB,QAAQ,EAEtB,QAAQ,EAAE,IAAI,CAAC,eAAe,IAAI,SAAS,aAE7C,cAAK,KAAK,EAAC,4CAA4C,YACpD,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CACpB,8BACG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC,CACzB,KAAC,IAAI,IACH,KAAK,EAAC,iDAAiD,EACvD,IAAI,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,GACxB,CACR,CAAC,CAAC,CAAC,SAAS,EACb,yBAAO,IAAI,CAAC,aAAa,CAAC,IAAI,GAAQ,IACrC,CACJ,CAAC,CAAC,CAAC,SAAS,GACT,EACN,KAAC,IAAI,IACH,KAAK,EAAC,kDAAkD,EACxD,IAAI,EAAE,aAAa,GACd,IACH,EACN,KAAC,YAAY,IACX,EAAE,EAAE,QAAQ,IAAI,CAAC,GAAG,kCAAkC,EACtD,KAAK,EAAC,sCAAsC,EAC5C,SAAS,EAAE,sBAAsB,CAAC,MAAM,EACxC,MAAM,EAAE,IAAI,CAAC,kBAAkB,EAC/B,OAAO,EAAE,IAAI,CAAC,mBAAmB,EACjC,eAAe,EAAE,4BAA4B,CAAC,OAAO,EACrD,MAAM,EAAC,MAAM,EAEX,QAAQ,EAAE,QAAQ,IAAI,CAAC,GAAG,iCAAiC;gBAC3D,wBAAwB,EAAE,MAAM,YAElC,KAAC,kBAAkB,IACjB,GAAG,EAAE,IAAI,CAAC,YAAY,EACtB,iBAAiB,EAAE,IAAI,CAAC,uBAA8B,GACnC,GACR,IACd,CACJ,CAAC;AACJ,CAAC","sourcesContent":["import type UDExSideNavigationMobile from \"./SideNavigationMobile.js\";\nimport Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport UDExDropdown from \"./Dropdown.js\";\nimport UDExSideNavigation from \"./SideNavigation.js\";\nimport { PopoverActualHorizontalAlign, PopoverActualPlacement } from \"@ui5/webcomponents/Popover.js\";\nimport slimArrowDown from \"@ui5/webcomponents-icons/dist/slim-arrow-down.js\";\n\nexport default function SideNavigationMobileTemplate(this: UDExSideNavigationMobile) {\n return (\n <>\n <div\n id={`udex-${this._id}-side-navigation-mobile__opener`}\n class=\"udex-side-navigation-mobile__trigger\"\n aria-haspopup=\"true\"\n tabindex={0}\n onKeyDown={this.handleKeydown}\n onClick={this.handleTriggerClick}\n accessible-role=\"button\"\n {...{\n \"active\": this._dropdownOpened || undefined,\n }}>\n <div class=\"udex-side-navigation-mobile__selected-item\">\n {this._selectedItem ? (\n <>\n {this._selectedItem.icon ? (\n <Icon\n class=\"udex-side-navigation-mobile__selected-item-icon\"\n name={this._selectedItem.icon}>\n </Icon>\n ) : undefined}\n <span>{this._selectedItem.text}</span>\n </>\n ) : undefined}\n </div>\n <Icon\n class=\"udex-side-navigation-mobile__trigger-toggle-icon\"\n name={slimArrowDown}>\n </Icon>\n </div>\n <UDExDropdown\n id={`udex-${this._id}-side-navigation-mobile__popover`}\n class=\"udex-side-navigation-mobile__popover\"\n placement={PopoverActualPlacement.Bottom}\n onOpen={this._afterDropdownOpen}\n onClose={this._afterDropdownClose}\n horizontalAlign={PopoverActualHorizontalAlign.Stretch}\n height=\"none\"\n {...{\n \"opener\": `udex-${this._id}-side-navigation-mobile__opener`,\n \"disable-target-overlap\": \"true\",\n }}>\n <UDExSideNavigation\n ref={this._setNavItems}\n onSelectionChange={this._handleSelectionChanged as any}>\n </UDExSideNavigation>\n </UDExDropdown>\n </>\n );\n}\n"]}
1
+ {"version":3,"file":"SideNavigationMobileTemplate.js","sourceRoot":"","sources":["../src/SideNavigationMobileTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,IAAI,MAAM,iCAAiC,CAAC;AACnD,OAAO,YAAY,MAAM,eAAe,CAAC;AACzC,OAAO,kBAAkB,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,4BAA4B,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AACrG,OAAO,aAAa,MAAM,kDAAkD,CAAC;AAE7E,MAAM,CAAC,OAAO,UAAU,4BAA4B;IAClD,OAAO,CACL,8BACE,eACE,EAAE,EAAE,QAAQ,IAAI,CAAC,GAAG,iCAAiC,EACrD,KAAK,EAAC,sCAAsC,mBAC9B,MAAM,EACpB,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,OAAO,EAAE,IAAI,CAAC,kBAAkB,qBAChB,QAAQ,EAEtB,QAAQ,EAAE,IAAI,CAAC,eAAe,IAAI,SAAS,aAE7C,cAAK,KAAK,EAAC,4CAA4C,YACpD,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CACpB,8BACG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC,CACzB,KAAC,IAAI,IACH,KAAK,EAAC,iDAAiD,EACvD,IAAI,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,GACxB,CACR,CAAC,CAAC,CAAC,SAAS,EACb,yBAAO,IAAI,CAAC,aAAa,CAAC,IAAI,GAAQ,IACrC,CACJ,CAAC,CAAC,CAAC,SAAS,GACT,EACN,KAAC,IAAI,IACH,KAAK,EAAC,kDAAkD,EACxD,IAAI,EAAE,aAAa,GACd,IACH,EACN,KAAC,YAAY,IACX,EAAE,EAAE,QAAQ,IAAI,CAAC,GAAG,kCAAkC,EACtD,KAAK,EAAC,sCAAsC,EAC5C,SAAS,EAAE,sBAAsB,CAAC,MAAM,EACxC,MAAM,EAAE,IAAI,CAAC,kBAAkB,EAC/B,OAAO,EAAE,IAAI,CAAC,mBAAmB,EACjC,eAAe,EAAE,4BAA4B,CAAC,OAAO,EACrD,MAAM,EAAC,MAAM,EAEX,QAAQ,EAAE,QAAQ,IAAI,CAAC,GAAG,iCAAiC;gBAC3D,wBAAwB,EAAE,MAAM,YAElC,KAAC,kBAAkB,IACjB,GAAG,EAAE,IAAI,CAAC,YAAY,EACtB,iBAAiB,EAAE,IAAI,CAAC,uBAA8B,EAChD,WAAW,EAAE,EAAE,GACF,GACR,IACd,CACJ,CAAC;AACJ,CAAC","sourcesContent":["import type UDExSideNavigationMobile from \"./SideNavigationMobile.js\";\nimport Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport UDExDropdown from \"./Dropdown.js\";\nimport UDExSideNavigation from \"./SideNavigation.js\";\nimport { PopoverActualHorizontalAlign, PopoverActualPlacement } from \"@ui5/webcomponents/Popover.js\";\nimport slimArrowDown from \"@ui5/webcomponents-icons/dist/slim-arrow-down.js\";\n\nexport default function SideNavigationMobileTemplate(this: UDExSideNavigationMobile) {\n return (\n <>\n <div\n id={`udex-${this._id}-side-navigation-mobile__opener`}\n class=\"udex-side-navigation-mobile__trigger\"\n aria-haspopup=\"true\"\n tabindex={0}\n onKeyDown={this.handleKeydown}\n onClick={this.handleTriggerClick}\n accessible-role=\"button\"\n {...{\n \"active\": this._dropdownOpened || undefined,\n }}>\n <div class=\"udex-side-navigation-mobile__selected-item\">\n {this._selectedItem ? (\n <>\n {this._selectedItem.icon ? (\n <Icon\n class=\"udex-side-navigation-mobile__selected-item-icon\"\n name={this._selectedItem.icon}>\n </Icon>\n ) : undefined}\n <span>{this._selectedItem.text}</span>\n </>\n ) : undefined}\n </div>\n <Icon\n class=\"udex-side-navigation-mobile__trigger-toggle-icon\"\n name={slimArrowDown}>\n </Icon>\n </div>\n <UDExDropdown\n id={`udex-${this._id}-side-navigation-mobile__popover`}\n class=\"udex-side-navigation-mobile__popover\"\n placement={PopoverActualPlacement.Bottom}\n onOpen={this._afterDropdownOpen}\n onClose={this._afterDropdownClose}\n horizontalAlign={PopoverActualHorizontalAlign.Stretch}\n height=\"none\"\n {...{\n \"opener\": `udex-${this._id}-side-navigation-mobile__opener`,\n \"disable-target-overlap\": \"true\",\n }}>\n <UDExSideNavigation\n ref={this._setNavItems}\n onSelectionChange={this._handleSelectionChanged as any}\n {...{ \"in-mobile\": \"\" }}>\n </UDExSideNavigation>\n </UDExDropdown>\n </>\n );\n}\n"]}
@@ -1,3 +1,4 @@
1
+ import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js";
1
2
  import SideNavigationSubItem from "@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js";
2
3
  /**
3
4
  * @class
@@ -17,5 +18,27 @@ import SideNavigationSubItem from "@ui5/webcomponents-fiori/dist/SideNavigationS
17
18
  * @public
18
19
  */
19
20
  declare class UDExSideNavigationSubItem extends SideNavigationSubItem {
21
+ /**
22
+ * Defines whether the sub-item is expanded (shows level-3 children).
23
+ *
24
+ * @default false
25
+ * @public
26
+ */
27
+ expanded: boolean;
28
+ /**
29
+ * Defines the level-3 sub-items slotted inside this sub-item.
30
+ * @public
31
+ */
32
+ subItems: DefaultSlot<UDExSideNavigationSubItem>;
33
+ get hasSubItems(): boolean;
34
+ get focusableItems(): Array<UDExSideNavigationSubItem>;
35
+ get selectableItems(): Array<UDExSideNavigationSubItem>;
36
+ get allItems(): Array<UDExSideNavigationSubItem>;
37
+ onBeforeRendering(): void;
38
+ get _subGroupId(): string | undefined;
39
+ get _subExpanded(): boolean | undefined;
40
+ _onToggleClick(e: Event): void;
41
+ _onkeydown(e: KeyboardEvent): void;
42
+ _onclick(e: MouseEvent): void;
20
43
  }
21
44
  export default UDExSideNavigationSubItem;
@@ -6,7 +6,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
6
6
  };
7
7
  import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
8
8
  import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
9
+ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
10
+ import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
11
+ import { isLeft, isRight, isMinus, isPlus, } from "@ui5/webcomponents-base/dist/Keys.js";
9
12
  import SideNavigationSubItem from "@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js";
13
+ import SideNavigationSubItemTemplate from "./SideNavigationSubItemTemplate.js";
10
14
  // Styles
11
15
  import SideNavigationSubItemCss from "./generated/themes/SideNavigationSubItem.css.js";
12
16
  /**
@@ -27,12 +31,111 @@ import SideNavigationSubItemCss from "./generated/themes/SideNavigationSubItem.c
27
31
  * @public
28
32
  */
29
33
  let UDExSideNavigationSubItem = class UDExSideNavigationSubItem extends SideNavigationSubItem {
34
+ constructor() {
35
+ super(...arguments);
36
+ /**
37
+ * Defines whether the sub-item is expanded (shows level-3 children).
38
+ *
39
+ * @default false
40
+ * @public
41
+ */
42
+ this.expanded = false;
43
+ }
44
+ get hasSubItems() {
45
+ return this.subItems.length > 0;
46
+ }
47
+ get focusableItems() {
48
+ if (this.hasSubItems && this.expanded) {
49
+ return [this, ...this.subItems];
50
+ }
51
+ return [this];
52
+ }
53
+ get selectableItems() {
54
+ // Expose this level-2 sub-item plus its level-3 children so the Side Navigation's
55
+ // selection registry (built by UDExSideNavigationItem.selectableItems) reaches level 3.
56
+ return this.hasSubItems ? [this, ...this.subItems] : [this];
57
+ }
58
+ get allItems() {
59
+ // Expose this sub-item plus its level-3 children so SideNavigation._getAllItems wires
60
+ // `sideNavigation` and collapsed state onto level-3 items. Without it, a level-3 leaf's
61
+ // click handler has no `sideNavigation` reference and cannot fire selection-change.
62
+ return this.hasSubItems ? [this, ...this.subItems] : [this];
63
+ }
64
+ onBeforeRendering() {
65
+ super.onBeforeRendering();
66
+ this.subItems.forEach(subItem => {
67
+ if (!subItem.hasAttribute("nested")) {
68
+ subItem.setAttribute("nested", "");
69
+ }
70
+ });
71
+ }
72
+ get _subGroupId() {
73
+ return this.hasSubItems ? `${this._id}-group` : undefined;
74
+ }
75
+ get _subExpanded() {
76
+ return this.hasSubItems ? this.expanded : undefined;
77
+ }
78
+ _onToggleClick(e) {
79
+ e.stopPropagation();
80
+ e.preventDefault();
81
+ this.expanded = !this.expanded;
82
+ }
83
+ _onkeydown(e) {
84
+ if (this.hasSubItems && !this.sideNavCollapsed) {
85
+ const isRTL = this.effectiveDir === "rtl";
86
+ if (isLeft(e)) {
87
+ e.preventDefault();
88
+ this.expanded = isRTL;
89
+ return;
90
+ }
91
+ if (isRight(e)) {
92
+ e.preventDefault();
93
+ this.expanded = !isRTL;
94
+ return;
95
+ }
96
+ if (isMinus(e)) {
97
+ e.preventDefault();
98
+ this.expanded = false;
99
+ return;
100
+ }
101
+ if (isPlus(e)) {
102
+ e.preventDefault();
103
+ this.expanded = true;
104
+ return;
105
+ }
106
+ }
107
+ // Level-3 leaves fall through to the base, which activates on Enter and fires
108
+ // selection-change — the same behaviour as level-1 and level-2 leaves.
109
+ super._onkeydown(e);
110
+ }
111
+ _onclick(e) {
112
+ // A group sub-item (one with sub-items) toggles expand/collapse and never navigates —
113
+ // a parent with children must not have an href. A leaf (including a level-3 leaf) falls
114
+ // through to the base handler, which fires selection-change and navigates via its href,
115
+ // exactly like level-1 and level-2 leaves.
116
+ if (this.hasSubItems) {
117
+ e.preventDefault();
118
+ e.stopPropagation();
119
+ this.expanded = !this.expanded;
120
+ }
121
+ else {
122
+ super._onclick(e);
123
+ }
124
+ }
30
125
  };
126
+ __decorate([
127
+ property({ type: Boolean })
128
+ ], UDExSideNavigationSubItem.prototype, "expanded", void 0);
129
+ __decorate([
130
+ slot({ type: HTMLElement, invalidateOnChildChange: true, "default": true })
131
+ ], UDExSideNavigationSubItem.prototype, "subItems", void 0);
31
132
  UDExSideNavigationSubItem = __decorate([
32
133
  customElement({
33
134
  tag: "udex-side-navigation-sub-item",
34
135
  renderer: jsxRenderer,
136
+ template: SideNavigationSubItemTemplate,
35
137
  styles: [SideNavigationSubItem.styles, SideNavigationSubItemCss],
138
+ dependencies: [UDExSideNavigationSubItem],
36
139
  })
37
140
  ], UDExSideNavigationSubItem);
38
141
  UDExSideNavigationSubItem.define();
@@ -1 +1 @@
1
- {"version":3,"file":"SideNavigationSubItem.js","sourceRoot":"","sources":["../src/SideNavigationSubItem.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAC/E,OAAO,qBAAqB,MAAM,wDAAwD,CAAC;AAE3F,SAAS;AACT,OAAO,wBAAwB,MAAM,iDAAiD,CAAC;AAEvF;;;;;;;;;;;;;;;;GAgBG;AAOH,IAAM,yBAAyB,GAA/B,MAAM,yBAA0B,SAAQ,qBAAqB;CAAG,CAAA;AAA1D,yBAAyB;IAN9B,aAAa,CAAC;QACb,GAAG,EAAE,+BAA+B;QACpC,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,CAAC,qBAAqB,CAAC,MAAM,EAAE,wBAAwB,CAAC;KACjE,CAAC;GAEI,yBAAyB,CAAiC;AAEhE,yBAAyB,CAAC,MAAM,EAAE,CAAC;AAEnC,eAAe,yBAAyB,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport SideNavigationSubItem from \"@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js\";\n\n// Styles\nimport SideNavigationSubItemCss from \"./generated/themes/SideNavigationSubItem.css.js\";\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-side-navigation-sub-item</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/SideNavigationSubItem.js\";</code>\n *\n * @constructor\n * @extends SideNavigationSubItem\n * @public\n */\n@customElement({\n tag: \"udex-side-navigation-sub-item\",\n renderer: jsxRenderer,\n styles: [SideNavigationSubItem.styles, SideNavigationSubItemCss],\n})\n\nclass UDExSideNavigationSubItem extends SideNavigationSubItem {}\n\nUDExSideNavigationSubItem.define();\n\nexport default UDExSideNavigationSubItem;\n"]}
1
+ {"version":3,"file":"SideNavigationSubItem.js","sourceRoot":"","sources":["../src/SideNavigationSubItem.ts"],"names":[],"mappings":"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","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot-strict.js\";\nimport type { DefaultSlot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport {\n isLeft,\n isRight,\n isMinus,\n isPlus,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport SideNavigationSubItem from \"@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js\";\nimport SideNavigationSubItemTemplate from \"./SideNavigationSubItemTemplate.js\";\n\n// Styles\nimport SideNavigationSubItemCss from \"./generated/themes/SideNavigationSubItem.css.js\";\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-side-navigation-sub-item</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/SideNavigationSubItem.js\";</code>\n *\n * @constructor\n * @extends SideNavigationSubItem\n * @public\n */\n@customElement({\n tag: \"udex-side-navigation-sub-item\",\n renderer: jsxRenderer,\n template: SideNavigationSubItemTemplate,\n styles: [SideNavigationSubItem.styles, SideNavigationSubItemCss],\n dependencies: [UDExSideNavigationSubItem],\n})\n\nclass UDExSideNavigationSubItem extends SideNavigationSubItem {\n /**\n * Defines whether the sub-item is expanded (shows level-3 children).\n *\n * @default false\n * @public\n */\n @property({ type: Boolean })\n expanded = false;\n\n /**\n * Defines the level-3 sub-items slotted inside this sub-item.\n * @public\n */\n @slot({ type: HTMLElement, invalidateOnChildChange: true, \"default\": true })\n subItems!: DefaultSlot<UDExSideNavigationSubItem>;\n\n get hasSubItems() {\n return this.subItems.length > 0;\n }\n\n get focusableItems(): Array<UDExSideNavigationSubItem> {\n if (this.hasSubItems && this.expanded) {\n return [this, ...this.subItems];\n }\n return [this];\n }\n\n get selectableItems(): Array<UDExSideNavigationSubItem> {\n // Expose this level-2 sub-item plus its level-3 children so the Side Navigation's\n // selection registry (built by UDExSideNavigationItem.selectableItems) reaches level 3.\n return this.hasSubItems ? [this, ...this.subItems] : [this];\n }\n\n get allItems(): Array<UDExSideNavigationSubItem> {\n // Expose this sub-item plus its level-3 children so SideNavigation._getAllItems wires\n // `sideNavigation` and collapsed state onto level-3 items. Without it, a level-3 leaf's\n // click handler has no `sideNavigation` reference and cannot fire selection-change.\n return this.hasSubItems ? [this, ...this.subItems] : [this];\n }\n\n onBeforeRendering() {\n super.onBeforeRendering();\n this.subItems.forEach(subItem => {\n if (!subItem.hasAttribute(\"nested\")) { subItem.setAttribute(\"nested\", \"\"); }\n });\n }\n\n get _subGroupId(): string | undefined {\n return this.hasSubItems ? `${this._id}-group` : undefined;\n }\n\n get _subExpanded(): boolean | undefined {\n return this.hasSubItems ? this.expanded : undefined;\n }\n\n _onToggleClick(e: Event) {\n e.stopPropagation();\n e.preventDefault();\n this.expanded = !this.expanded;\n }\n\n _onkeydown(e: KeyboardEvent) {\n if (this.hasSubItems && !this.sideNavCollapsed) {\n const isRTL = this.effectiveDir === \"rtl\";\n if (isLeft(e)) {\n e.preventDefault();\n this.expanded = isRTL;\n return;\n }\n if (isRight(e)) {\n e.preventDefault();\n this.expanded = !isRTL;\n return;\n }\n if (isMinus(e)) {\n e.preventDefault();\n this.expanded = false;\n return;\n }\n if (isPlus(e)) {\n e.preventDefault();\n this.expanded = true;\n return;\n }\n }\n // Level-3 leaves fall through to the base, which activates on Enter and fires\n // selection-change — the same behaviour as level-1 and level-2 leaves.\n super._onkeydown(e);\n }\n\n _onclick(e: MouseEvent) {\n // A group sub-item (one with sub-items) toggles expand/collapse and never navigates —\n // a parent with children must not have an href. A leaf (including a level-3 leaf) falls\n // through to the base handler, which fires selection-change and navigates via its href,\n // exactly like level-1 and level-2 leaves.\n if (this.hasSubItems) {\n e.preventDefault();\n e.stopPropagation();\n this.expanded = !this.expanded;\n } else {\n super._onclick(e);\n }\n }\n}\n\nUDExSideNavigationSubItem.define();\n\nexport default UDExSideNavigationSubItem;\n"]}
@@ -0,0 +1,2 @@
1
+ import type UDExSideNavigationSubItem from "./SideNavigationSubItem.js";
2
+ export default function SideNavigationSubItemTemplate(this: UDExSideNavigationSubItem): import("@ui5/webcomponents-base").JSX.Element;
@@ -0,0 +1,10 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
2
+ import Icon from "@ui5/webcomponents/dist/Icon.js";
3
+ import arrowRight from "@ui5/webcomponents-icons/dist/arrow-right.js";
4
+ import navRightArrow from "@ui5/webcomponents-icons/dist/navigation-right-arrow.js";
5
+ import navDownArrow from "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
6
+ export default function SideNavigationSubItemTemplate() {
7
+ const EffectiveTag = this._effectiveTag;
8
+ return (_jsxs("li", { id: this._id, class: "ui5-sn-list-li", role: "none", children: [_jsxs(EffectiveTag, { id: this._id, "data-sap-focus-ref": true, class: `ui5-sn-item ui5-sn-item-level2 ${this._classes}`, role: this.ariaRole, onKeyDown: this._onkeydown, onKeyUp: this._onkeyup, onClick: this._onclick, onFocusIn: this._onfocusin, tabIndex: this.effectiveTabIndex, "aria-current": this._ariaCurrent, "aria-selected": this._ariaSelected, "aria-label": this.accessibleName || undefined, title: this._tooltip, "aria-disabled": this.effectiveDisabled, href: this._href, target: this._target, "aria-haspopup": this._ariaHasPopup, "aria-describedby": this._describedBy, "aria-expanded": this._subExpanded, "aria-owns": this._subGroupId, children: [this.icon && _jsx(Icon, { class: "ui5-sn-item-icon", name: this.icon }), _jsx("div", { class: "ui5-sn-item-text", id: this._textId, children: this.text }), this.hasTag && (_jsx("div", { id: this._tagId, class: "ui5-sn-item-tag-slot", children: _jsx("slot", { name: "tag" }) })), this.hasSubItems && (_jsx(Icon, { class: "ui5-sn-item-toggle-icon", name: this.expanded ? navDownArrow : navRightArrow, onClick: (e) => this._onToggleClick(e) })), this.isExternalLink && _jsx(Icon, { class: "ui5-sn-item-external-link-icon", name: arrowRight })] }), this.hasSubItems && (_jsx("ul", { id: this._subGroupId, class: "ui5-sn-item-ul", role: "group", children: _jsx("slot", {}) }))] }));
9
+ }
10
+ //# sourceMappingURL=SideNavigationSubItemTemplate.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"SideNavigationSubItemTemplate.js","sourceRoot":"","sources":["../src/SideNavigationSubItemTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,iCAAiC,CAAC;AACnD,OAAO,UAAU,MAAM,8CAA8C,CAAC;AACtE,OAAO,aAAa,MAAM,yDAAyD,CAAC;AACpF,OAAO,YAAY,MAAM,wDAAwD,CAAC;AAGlF,MAAM,CAAC,OAAO,UAAU,6BAA6B;IACnD,MAAM,YAAY,GAAG,IAAI,CAAC,aAAa,CAAC;IACxC,OAAO,CACL,cAAI,EAAE,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAC,MAAM,aAClD,MAAC,YAAY,IACX,EAAE,EAAE,IAAI,CAAC,GAAG,8BAEZ,KAAK,EAAE,kCAAkC,IAAI,CAAC,QAAQ,EAAE,EACxD,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,QAAQ,EAAE,IAAI,CAAC,iBAAiB,kBAClB,IAAI,CAAC,YAAY,mBAChB,IAAI,CAAC,aAAa,gBACrB,IAAI,CAAC,cAAc,IAAI,SAAS,EAC5C,KAAK,EAAE,IAAI,CAAC,QAAQ,mBACL,IAAI,CAAC,iBAAiB,EACrC,IAAI,EAAE,IAAI,CAAC,KAAK,EAChB,MAAM,EAAE,IAAI,CAAC,OAAO,mBACL,IAAI,CAAC,aAAa,sBACf,IAAI,CAAC,YAAY,mBACpB,IAAI,CAAC,YAAY,eACrB,IAAI,CAAC,WAAW,aAE1B,IAAI,CAAC,IAAI,IAAI,KAAC,IAAI,IAAC,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,EAChE,cAAK,KAAK,EAAC,kBAAkB,EAAC,EAAE,EAAE,IAAI,CAAC,OAAO,YAAG,IAAI,CAAC,IAAI,GAAO,EAChE,IAAI,CAAC,MAAM,IAAI,CACd,cAAK,EAAE,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAC,sBAAsB,YAChD,eAAM,IAAI,EAAC,KAAK,GAAG,GACf,CACP,EACA,IAAI,CAAC,WAAW,IAAI,CACnB,KAAC,IAAI,IACH,KAAK,EAAC,yBAAyB,EAC/B,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,aAAa,EAClD,OAAO,EAAE,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,GAC7C,CACH,EACA,IAAI,CAAC,cAAc,IAAI,KAAC,IAAI,IAAC,KAAK,EAAC,gCAAgC,EAAC,IAAI,EAAE,UAAU,GAAI,IAC5E,EACd,IAAI,CAAC,WAAW,IAAI,CACnB,aAAI,EAAE,EAAE,IAAI,CAAC,WAAW,EAAE,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAC,OAAO,YAC3D,gBAAQ,GACL,CACN,IACE,CACN,CAAC;AACJ,CAAC","sourcesContent":["import Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport arrowRight from \"@ui5/webcomponents-icons/dist/arrow-right.js\";\nimport navRightArrow from \"@ui5/webcomponents-icons/dist/navigation-right-arrow.js\";\nimport navDownArrow from \"@ui5/webcomponents-icons/dist/navigation-down-arrow.js\";\nimport type UDExSideNavigationSubItem from \"./SideNavigationSubItem.js\";\n\nexport default function SideNavigationSubItemTemplate(this: UDExSideNavigationSubItem) {\n const EffectiveTag = this._effectiveTag;\n return (\n <li id={this._id} class=\"ui5-sn-list-li\" role=\"none\">\n <EffectiveTag\n id={this._id}\n data-sap-focus-ref\n class={`ui5-sn-item ui5-sn-item-level2 ${this._classes}`}\n role={this.ariaRole}\n onKeyDown={this._onkeydown}\n onKeyUp={this._onkeyup}\n onClick={this._onclick}\n onFocusIn={this._onfocusin}\n tabIndex={this.effectiveTabIndex}\n aria-current={this._ariaCurrent}\n aria-selected={this._ariaSelected}\n aria-label={this.accessibleName || undefined}\n title={this._tooltip}\n aria-disabled={this.effectiveDisabled}\n href={this._href}\n target={this._target}\n aria-haspopup={this._ariaHasPopup}\n aria-describedby={this._describedBy}\n aria-expanded={this._subExpanded}\n aria-owns={this._subGroupId}\n >\n {this.icon && <Icon class=\"ui5-sn-item-icon\" name={this.icon} />}\n <div class=\"ui5-sn-item-text\" id={this._textId}>{this.text}</div>\n {this.hasTag && (\n <div id={this._tagId} class=\"ui5-sn-item-tag-slot\">\n <slot name=\"tag\" />\n </div>\n )}\n {this.hasSubItems && (\n <Icon\n class=\"ui5-sn-item-toggle-icon\"\n name={this.expanded ? navDownArrow : navRightArrow}\n onClick={(e: Event) => this._onToggleClick(e)}\n />\n )}\n {this.isExternalLink && <Icon class=\"ui5-sn-item-external-link-icon\" name={arrowRight} />}\n </EffectiveTag>\n {this.hasSubItems && (\n <ul id={this._subGroupId} class=\"ui5-sn-item-ul\" role=\"group\">\n <slot />\n </ul>\n )}\n </li>\n );\n}\n"]}
package/dist/Table.js CHANGED
@@ -15,10 +15,10 @@ import UDExTableGroupRow from "./TableGroupRow.js";
15
15
  import { TABLE_NO_DATA_FOUND } from "./generated/i18n/i18n-defaults.js";
16
16
  import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
17
17
  import TableTemplate from "./TableTemplate.js";
18
+ import translate from "./utils/translate.js";
18
19
  // Styles
19
20
  import TableCss from "./generated/themes/Table.css.js";
20
21
  import getEffectiveScrollbarStyle from "./utils/getEffectiveScrollbarStyle.js";
21
- import translate from "./utils/translate.js";
22
22
  /**
23
23
  * @class
24
24
  *
package/dist/Table.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Table.js","sourceRoot":"","sources":["../src/Table.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AAEpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,IAAI,MAAM,wDAAwD,CAAC;AAC1E,OAAO,WAAW,MAAM,iDAAiD,CAAC;AAC1E,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,EACL,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,GAC9B,MAAM,sCAAsC,CAAC;AAG9C,OAAO,iBAAiB,MAAM,oBAAoB,CAAC;AAEnD,OAAO,EAAE,mBAAmB,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,IAAI,MAAM,iDAAiD,CAAC;AAEnE,OAAO,aAAa,MAAM,oBAAoB,CAAC;AAE/C,SAAS;AACT,OAAO,QAAQ,MAAM,iCAAiC,CAAC;AACvD,OAAO,0BAA0B,MAAM,uCAAuC,CAAC;AAC/E,OAAO,SAAS,MAAM,sBAAsB,CAAC;AAU7C;;;;;;;;;;;;;;;GAeG;AAQH,IAAM,SAAS,iBAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QA0CE;;;;WAIG;QAED,iBAAY,GAAW,IAAI,CAAC;IA4RhC,CAAC;IAlNC,gBAAgB;QACd,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;YACtB,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAC/B,CAAC;QAED,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAExB,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC9B,CAAC;IACH,CAAC;IAED,cAAc,CAAC,CAAgB;QAC7B,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;QACtB,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC;QACxB,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC;QACxB,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC;IAC3B,CAAC;IAED,aAAa,CAAC,CAAgB;QAC5B,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC;YACZ,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC;QACxB,CAAC;IACH,CAAC;IAED,eAAe,CAAC,CAAgB;QAC9B,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;YACd,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;QACvB,CAAC;IACH,CAAC;IAED,gBAAgB,CAAC,CAAgB;QAC/B,IAAI,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;YACf,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;QACxB,CAAC;IACH,CAAC;IAED,eAAe,CAAC,CAAgB;QAC9B,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;YACd,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;QACzB,CAAC;IACH,CAAC;IAED,YAAY,CAAC,MAAc;QACzB,MAAM,KAAK,GAAG,IAAI,CAAC,0BAA0B,EAAE,CAAC;QAChD,MAAM,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,IAAI,CAAC,YAAY,EAAE,CAAC,GAAG,CAAiB,CAAC;QAC3F,MAAM,WAAW,GAAG,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;QAC9C,MAAM,QAAQ,GAAG,KAAK,CAAC,WAAW,GAAG,MAAM,CAAC,CAAC;QAE7C,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC;IACjC,CAAC;IAED,aAAa,CAAC,MAAc;QAC1B,MAAM,SAAS,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC;QAEtC,IAAI,CAAE,SAA+B,CAAC,OAAO,EAAE,CAAC;YAC9C,MAAM,mBAAmB,GAAG,IAAI,CAAC,sBAAsB,CAAC,SAAyB,CAAC,CAAC;YACnF,MAAM,YAAY,GAAG,mBAAmB,CAAC,OAAO,CAAc,QAAQ,CAAC,aAAa,CAAC,CAAC;YACtF,MAAM,WAAW,GAAG,YAAY,GAAG,MAAM,CAAC;YAC1C,IAAI,WAAW,IAAI,CAAC,IAAI,WAAW,GAAG,mBAAmB,CAAC,MAAM,EAAE,CAAC;gBACjE,mBAAmB,CAAC,WAAW,CAAC,EAAE,KAAK,EAAE,CAAC;YAC5C,CAAC;QACH,CAAC;IACH,CAAC;IAED,SAAS;QACP,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,YAAY,CAAC;QAEpD,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;YACtB,IAAI,CAAC,eAAe,GAAG,SAAS,GAAG,CAAC,CAAC;QACvC,CAAC;QAED,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;YACtB,IAAI,CAAC,2BAA2B,CAAC,UAAU,CAAC,CAAC;QAC/C,CAAC;IACH,CAAC;IAED,oBAAoB;QAClB,MAAM,sBAAsB,GAAG,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE;YAC7D,OAAO,MAAM,CAAC,KAAK;iBAChB,MAAM,CAAC,IAAI,CAAC,EAAE,CAAE,IAA4B,CAAC,WAAW,KAAK,IAAI,CAAC;iBAClE,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;QACvC,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;YACtB,IAAI,CAAC,CAAC,GAAG,YAAY,iBAAiB,CAAC,EAAE,CAAC;gBACxC,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;oBACvB,IAAI,sBAAsB,CAAC,QAAQ,CAAC,IAAI,CAAC,eAAe,CAAC,EAAE,CAAC;wBAC1D,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,EAAE,CAAC,CAAC;oBACxC,CAAC;gBACH,CAAC,CAAC,CAAC;YACL,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAED,qBAAqB;QACnB,CAAC,GAAG,IAAI,CAAC,SAAS,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;YAC9C,IAAI,CAAC,CAAC,GAAG,YAAY,iBAAiB,CAAC,EAAE,CAAC;gBACxC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC;YAC9B,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAED,gBAAgB;QACd,CAAC,GAAG,IAAI,CAAC,SAAS,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE;YACvD,GAAG,CAAC,MAAM,GAAG,KAAK,CAAC;QACrB,CAAC,CAAC,CAAC;IACL,CAAC;IAED,2BAA2B,CAAC,UAAkB;QAC5C,CAAC,GAAG,IAAI,CAAC,SAAS,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;YAC9C,IAAI,CAAC,CAAC,GAAG,YAAY,iBAAiB,CAAC,EAAE,CAAC;gBACxC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,iBAAiB,GAAG,UAAU,GAAG,CAAC,CAAC;YAClD,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAED,YAAY;QACV,MAAM,cAAc,GAAG,QAAQ,CAAC,aAA4B,CAAC;QAC7D,OAAO,cAAc,CAAC,OAAO,CAAC,mEAAmE,CAAE,CAAC;IACtG,CAAC;IAED,0BAA0B;QACxB,MAAM,KAAK,GAAwB,EAAE,CAAC;QAEtC,MAAM,oBAAoB,GAAG,CAAC,GAA0D,EAAE,WAAgC,EAAE,EAAE;YAC5H,IAAI,WAAW,EAAE,CAAC;gBAChB,KAAK,CAAC,IAAI,CAAe;oBACvB,EAAE,EAAE,GAAG,CAAC,GAAG;oBACX,QAAQ,EAAE,CAAC,GAAG,CAAC,UAAU,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;iBACpD,CAAC,CAAC;YACL,CAAC;YACA,GAAyB,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;gBACjD,KAAK,CAAC,IAAI,CAAC;oBACT,EAAE,EAAE,QAAQ,CAAC,GAAG;oBAChB,KAAK,EAAE,IAAI;oBACX,QAAQ,EAAE,IAAI,CAAC,sBAAsB,CAAC,QAAQ,CAAC;iBAChD,CAAC,CAAC;YACL,CAAC,CAAC,CAAC;QACL,CAAC,CAAC;QAEF,MAAM,mBAAmB,GAAG,CAAC,GAA0D,EAAE,EAAE;YACzF,KAAK,CAAC,IAAI,CAAe;gBACvB,EAAE,EAAE,GAAG,CAAC,GAAG;gBACX,KAAK,EAAE,KAAK;gBACZ,QAAQ,EAAE,GAAG,CAAC,OAAO;oBACnB,CAAC,CAAC,CAAC,GAAG,CAAC,UAAU,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;oBAC3C,CAAC,CAAC,IAAI,CAAC,sBAAsB,CAAC,GAAmB,CAAC;aACrD,CAAC,CAAC;QACL,CAAC,CAAC;QAEF,CAAC,GAAG,IAAI,CAAC,SAAS,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;YAC9C,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,GAAG,GAAwB,CAAC;YACnE,IAAI,OAAO,IAAI,OAAO,EAAE,CAAC;gBACvB,oBAAoB,CAAC,GAAG,EAAE,WAAW,CAAC,CAAC;YACzC,CAAC;iBAAM,CAAC;gBACN,mBAAmB,CAAC,GAAG,CAAC,CAAC;YAC3B,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;IACzD,CAAC;IAED,sBAAsB,CAAC,EAAgB;QACrC,OAAO,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,CACxC,IAAI,CAAC,gBAAgB,CAAC,gEAAgE,CAAC,CACxF,CAAC,CAAC;IACL,CAAC;IAED,IAAI,oBAAoB;QACtB,OAAO,IAAI,CAAC,UAAU,IAAI,SAAS,CAAC,WAAS,EAAE,mBAAmB,CAAC,CAAC;IACtE,CAAC;IAED,IAAI,WAAW;QACb,OAAO,IAAI,CAAC,OAAO,EAAE,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,OAAO,EAAE,MAAM,GAAG,CAAC,CAAC;IAC9D,CAAC;IAED,IAAI,eAAe;QACjB,OAAO,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC;IAClD,CAAC;IAED,IAAI,YAAY;QACd,OAAO,IAAI,CAAC,UAAU,EAAE,cAAc,CAAC,OAAO,CAAgB,CAAC;IACjE,CAAC;IAED,IAAI,oBAAoB;QACtB,MAAM,WAAW,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAkB,CAAA,CAAC,KAAK,CAAC,MAAM,CAAC;QACvG,OAAO,UAAU,WAAW,SAAS,CAAC;IACxC,CAAC;IAED,IAAI,OAAO;QACT,MAAM,cAAc,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,YAAY,EAAE,UAAU,EAAE,EAAE;YACrF,IAAI,UAAU,CAAC,eAAe,KAAK,SAAS,EAAE,CAAC;gBAC7C,YAAY,CAAC,sBAAsB,UAAU,CAAC,eAAe,EAAE,CAAC,GAAG,UAAU,CAAC,eAAe,CAAC;YAChG,CAAC;YACD,OAAO,YAAY,CAAC;QACtB,CAAC,EAAE,EAA+B,CAAC,CAAC;QAEpC,OAAO;YACL,KAAK,EAAE;gBACL,uBAAuB,EAAE,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,oBAAoB;gBACxE,YAAY,EAAE,IAAI,CAAC,eAAe;gBAClC,GAAG,cAAc;aAClB;SACF,CAAC;IACJ,CAAC;CACF,CAAA;AAnUG;IADD,QAAQ,EAAE;4CACU;AASnB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDACD;AAOxB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CACR;AAOjB;IADD,QAAQ,EAAE;6CACW;AAQpB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CACR;AAQlB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CACG;AAS5B;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+CACH;AASvB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+CACH;AAOvB;IADD,IAAI,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;uCACU;AAOrD;IADD,IAAI,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC;4CACW;AAOrC;IADD,IAAI,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC;0CACE;AAO5B;IADD,IAAI,EAAE;yCACsB;AAO3B;IADD,IAAI,EAAE;4CACyB;AAO9B;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDACF;AASvB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kDACA;AAGrB;IADN,IAAI,CAAC,yBAAyB,CAAC;mCACF;AAxH1B,SAAS;IAPd,aAAa,CAAC;QACb,GAAG,EAAE,YAAY;QACjB,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,CAAC,QAAQ,EAAE,0BAA0B,EAAE,CAAC;QAChD,QAAQ,EAAE,aAAa;KACxB,CAAC;GAEI,SAAS,CA4Ud;AAED,SAAS,CAAC,MAAM,EAAE,CAAC;AAEnB,eAAe,SAAS,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { DefaultSlot, Slot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot-strict.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/renderer/JsxRenderer.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport {\n isUp, isDown, isLeft, isRight,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport type UDExTableHeaderRow from \"./TableHeaderRow.js\";\nimport type UDExTableRow from \"./TableRow.js\";\nimport UDExTableGroupRow from \"./TableGroupRow.js\";\nimport type UDExTableHeaderCell from \"./TableHeaderCell.js\";\nimport { TABLE_NO_DATA_FOUND } from \"./generated/i18n/i18n-defaults.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport TableTemplate from \"./TableTemplate.js\";\n\n// Styles\nimport TableCss from \"./generated/themes/Table.css.js\";\nimport getEffectiveScrollbarStyle from \"./utils/getEffectiveScrollbarStyle.js\";\nimport translate from \"./utils/translate.js\";\n\nexport type TableBaseRow = UDExTableHeaderRow | UDExTableRow;\n\nexport type KeyBoardItem = {\n id: string;\n group?: boolean;\n elements: Array<HTMLElement>;\n}\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-table</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/Table.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n tag: \"udex-table\",\n renderer: jsxRenderer,\n styles: [TableCss, getEffectiveScrollbarStyle()],\n template: TableTemplate,\n})\n\nclass UDExTable extends UI5Element {\n /**\n * Defines the height of the table.\n * Allows control over the maximum height.\n *\n * @default \"\"\n * @public\n */\n @property()\n maxHeight!: string;\n\n /**\n * Defines the accessible ARIA name of the table.\n *\n * @default undefined\n * @public\n */\n @property({ type: String })\n accessibleName?: string;\n\n /**\n * Defines the heading of the table.\n * @public\n */\n @property({ type: String })\n heading!: string;\n\n /**\n * Defines the text to be displayed when there are no rows in the component.\n * @public\n */\n @property()\n noDataText?: string;\n\n /**\n * Defines if the loading indicator should be shown.\n * @default false\n * @public\n */\n @property({ type: Boolean })\n loading!: boolean;\n\n /**\n * Defines the delay in milliseconds, after which the loading indicator will show up for this component.\n * @default 1000\n * @public\n */\n @property({ type: Number })\n loadingDelay: number = 1000;\n\n /**\n * Sticks the toolbar and header row to the top of the table.\n *\n * @default false\n * @public\n */\n @property({ type: Boolean })\n stickyHeader!: boolean;\n\n /**\n * Sticks the first column to the left of the table.\n *\n * @default false\n * @public\n */\n @property({ type: Boolean })\n stickyColumn!: boolean;\n\n /**\n * Defines the rows of the table.\n * @public\n */\n @slot({ type: HTMLElement, \"default\": true })\n rows!: DefaultSlot<UDExTableRow | UDExTableGroupRow>;\n\n /**\n * Defines the header row of the table.\n * @public\n */\n @slot({ type: HTMLElement })\n headerRow!: Slot<UDExTableHeaderRow>;\n\n /**\n * Defines the actions of the table.\n * @public\n */\n @slot({ type: HTMLElement })\n actions!: Slot<HTMLElement>;\n\n /**\n * Defines the custom visualization if there is no data available.\n * @public\n */\n @slot()\n noData!: Slot<HTMLElement>;\n\n /**\n * Defines the footnotes of the table.\n * @public\n */\n @slot()\n footnotes!: Slot<HTMLElement>;\n\n /**\n * Defines the rows of the table.\n * @public\n */\n @property({ type: String })\n customColumns!: string;\n\n /**\n * Defines the table has vertical scrolling.\n *\n * @default false\n * @private\n */\n @property({ type: Boolean })\n _verticalOffset?: boolean;\n\n @i18n(\"@sapudex/web-components\")\n static i18nBundle: I18nBundle;\n\n onAfterRendering() {\n if (this.stickyColumn) {\n this._setStickyAttrToCells();\n }\n\n this._setIndexToCells();\n\n if (this.headerRow) {\n this._setCellsHighlighter();\n }\n }\n\n _handleKeyDown(e: KeyboardEvent) {\n this.handleUpArrow(e);\n this.handleDownArrow(e);\n this.handleLeftArrow(e);\n this.handleRightArrow(e);\n }\n\n handleUpArrow(e: KeyboardEvent) {\n if (isUp(e)) {\n e.preventDefault();\n this.navigateRows(-1);\n }\n }\n\n handleDownArrow(e: KeyboardEvent) {\n if (isDown(e)) {\n e.preventDefault();\n this.navigateRows(1);\n }\n }\n\n handleRightArrow(e: KeyboardEvent) {\n if (isRight(e)) {\n e.preventDefault();\n this.navigateCells(1);\n }\n }\n\n handleLeftArrow(e: KeyboardEvent) {\n if (isLeft(e)) {\n e.preventDefault();\n this.navigateCells(-1);\n }\n }\n\n navigateRows(offset: number) {\n const items = this.getKeyboardNavigationItems();\n const activeItem = items.find(item => item.id === this.getParentRow()._id) as KeyBoardItem;\n const activeIndex = items.indexOf(activeItem);\n const nextItem = items[activeIndex + offset];\n\n nextItem?.elements[0]?.focus();\n }\n\n navigateCells(offset: number) {\n const parentRow = this.getParentRow();\n\n if (!(parentRow as UDExTableGroupRow).isGroup) {\n const interactiveElements = this.getInteractiveElements(parentRow as TableBaseRow);\n const currentIndex = interactiveElements.indexOf(<HTMLElement>document.activeElement);\n const targetIndex = currentIndex + offset;\n if (targetIndex >= 0 && targetIndex < interactiveElements.length) {\n interactiveElements[targetIndex]?.focus();\n }\n }\n }\n\n _onScroll() {\n const { scrollLeft, scrollTop } = this._tableHolder;\n\n if (this.stickyHeader) {\n this._verticalOffset = scrollTop > 0;\n }\n\n if (this.stickyColumn) {\n this._setHorizontalOffsetToCells(scrollLeft);\n }\n }\n\n _setCellsHighlighter(): void {\n const highlightedHeaderCells = this.headerRow.flatMap(header => {\n return header.cells\n .filter(cell => (cell as UDExTableHeaderCell).highlighted === true)\n .map(cell => cell._individualSlot);\n });\n\n this.rows.forEach(row => {\n if (!(row instanceof UDExTableGroupRow)) {\n row.cells.forEach(cell => {\n if (highlightedHeaderCells.includes(cell._individualSlot)) {\n cell.setAttribute(\"_highlighted\", \"\");\n }\n });\n }\n });\n }\n\n _setStickyAttrToCells():void {\n [...this.headerRow, ...this.rows].forEach(row => {\n if (!(row instanceof UDExTableGroupRow)) {\n row.cells[0]._sticky = true;\n }\n });\n }\n\n _setIndexToCells(): void {\n [...this.headerRow, ...this.rows].forEach((row, index) => {\n row._index = index;\n });\n }\n\n _setHorizontalOffsetToCells(scrollLeft: number):void {\n [...this.headerRow, ...this.rows].forEach(row => {\n if (!(row instanceof UDExTableGroupRow)) {\n row.cells[0]._horizontalOffset = scrollLeft > 0;\n }\n });\n }\n\n getParentRow(): UDExTableRow | UDExTableHeaderRow | UDExTableGroupRow {\n const focusedElement = document.activeElement as HTMLElement;\n return focusedElement.closest(\"[udex-table-row], [udex-table-header-row], [udex-table-group-row]\")!;\n }\n\n getKeyboardNavigationItems(): Array<KeyBoardItem> {\n const items: Array<KeyBoardItem> = [];\n\n const pushItemGroupToItems = (row: UDExTableHeaderRow | UDExTableRow | UDExTableGroupRow, collapsible: boolean | undefined) => {\n if (collapsible) {\n items.push(<KeyBoardItem>{\n id: row._id,\n elements: [row.shadowRoot?.querySelector(\"button\")],\n });\n }\n (row as UDExTableGroupRow).rows.forEach(rowGroup => {\n items.push({\n id: rowGroup._id,\n group: true,\n elements: this.getInteractiveElements(rowGroup),\n });\n });\n };\n\n const pushItemBaseToItems = (row: UDExTableHeaderRow | UDExTableRow | UDExTableGroupRow) => {\n items.push(<KeyBoardItem>{\n id: row._id,\n group: false,\n elements: row.isGroup\n ? [row.shadowRoot?.querySelector(\"button\")]\n : this.getInteractiveElements(row as TableBaseRow),\n });\n };\n\n [...this.headerRow, ...this.rows].forEach(row => {\n const { isGroup, _isOpen, collapsible } = row as UDExTableGroupRow;\n if (isGroup && _isOpen) {\n pushItemGroupToItems(row, collapsible);\n } else {\n pushItemBaseToItems(row);\n }\n });\n\n return items.filter(({ elements }) => elements.length);\n }\n\n getInteractiveElements(el: TableBaseRow): Array<HTMLElement> {\n return el.cells.flatMap(cell => Array.from(\n cell.querySelectorAll(\"button, a, [udex-button], [udex-link], [udex-rating-indicator]\"),\n ));\n }\n\n get _effectiveNoDataText() {\n return this.noDataText || translate(UDExTable, TABLE_NO_DATA_FOUND);\n }\n\n get _hasToolbar(): boolean {\n return this.heading?.length > 0 || this.actions?.length > 0;\n }\n\n get _tableMaxHeight(): string {\n return this.maxHeight ? this.maxHeight : \"auto\";\n }\n\n get _tableHolder(): HTMLElement {\n return this.shadowRoot?.getElementById(\"table\") as HTMLElement;\n }\n\n get _gridTemplateColumns(): string {\n const cellsLength = this.headerRow?.[0]?.cells.length || (this.rows?.[0] as TableBaseRow).cells.length;\n return `repeat(${cellsLength}, auto)`;\n }\n\n get _styles() {\n const headerStyleMap = this.headerRow?.[0]?.cells?.reduce((headerStyles, headerCell) => {\n if (headerCell.horizontalAlign !== undefined) {\n headerStyles[`--horizontal-align-${headerCell._individualSlot}`] = headerCell.horizontalAlign;\n }\n return headerStyles;\n }, {} as { [key: string]: string });\n\n return {\n table: {\n \"grid-template-columns\": this.customColumns || this._gridTemplateColumns,\n \"max-height\": this._tableMaxHeight,\n ...headerStyleMap,\n },\n };\n }\n}\n\nUDExTable.define();\n\nexport default UDExTable;\n"]}
1
+ {"version":3,"file":"Table.js","sourceRoot":"","sources":["../src/Table.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { DefaultSlot, Slot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot-strict.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/renderer/JsxRenderer.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport {\n isUp, isDown, isLeft, isRight,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport type UDExTableHeaderRow from \"./TableHeaderRow.js\";\nimport type UDExTableRow from \"./TableRow.js\";\nimport UDExTableGroupRow from \"./TableGroupRow.js\";\nimport type UDExTableHeaderCell from \"./TableHeaderCell.js\";\nimport { TABLE_NO_DATA_FOUND } from \"./generated/i18n/i18n-defaults.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport TableTemplate from \"./TableTemplate.js\";\nimport translate from \"./utils/translate.js\";\n// Styles\nimport TableCss from \"./generated/themes/Table.css.js\";\nimport getEffectiveScrollbarStyle from \"./utils/getEffectiveScrollbarStyle.js\";\n\nexport type TableBaseRow = UDExTableHeaderRow | UDExTableRow;\n\nexport type KeyBoardItem = {\n id: string;\n group?: boolean;\n elements: Array<HTMLElement>;\n}\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-table</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/Table.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n tag: \"udex-table\",\n renderer: jsxRenderer,\n styles: [TableCss, getEffectiveScrollbarStyle()],\n template: TableTemplate,\n})\n\nclass UDExTable extends UI5Element {\n /**\n * Defines the height of the table.\n * Allows control over the maximum height.\n *\n * @default \"\"\n * @public\n */\n @property()\n maxHeight!: string;\n\n /**\n * Defines the accessible ARIA name of the table.\n *\n * @default undefined\n * @public\n */\n @property({ type: String })\n accessibleName?: string;\n\n /**\n * Defines the heading of the table.\n * @public\n */\n @property({ type: String })\n heading!: string;\n\n /**\n * Defines the text to be displayed when there are no rows in the component.\n * @public\n */\n @property()\n noDataText?: string;\n\n /**\n * Defines if the loading indicator should be shown.\n * @default false\n * @public\n */\n @property({ type: Boolean })\n loading!: boolean;\n\n /**\n * Defines the delay in milliseconds, after which the loading indicator will show up for this component.\n * @default 1000\n * @public\n */\n @property({ type: Number })\n loadingDelay: number = 1000;\n\n /**\n * Sticks the toolbar and header row to the top of the table.\n *\n * @default false\n * @public\n */\n @property({ type: Boolean })\n stickyHeader!: boolean;\n\n /**\n * Sticks the first column to the left of the table.\n *\n * @default false\n * @public\n */\n @property({ type: Boolean })\n stickyColumn!: boolean;\n\n /**\n * Defines the rows of the table.\n * @public\n */\n @slot({ type: HTMLElement, \"default\": true })\n rows!: DefaultSlot<UDExTableRow | UDExTableGroupRow>;\n\n /**\n * Defines the header row of the table.\n * @public\n */\n @slot({ type: HTMLElement })\n headerRow!: Slot<UDExTableHeaderRow>;\n\n /**\n * Defines the actions of the table.\n * @public\n */\n @slot({ type: HTMLElement })\n actions!: Slot<HTMLElement>;\n\n /**\n * Defines the custom visualization if there is no data available.\n * @public\n */\n @slot()\n noData!: Slot<HTMLElement>;\n\n /**\n * Defines the footnotes of the table.\n * @public\n */\n @slot()\n footnotes!: Slot<HTMLElement>;\n\n /**\n * Defines the rows of the table.\n * @public\n */\n @property({ type: String })\n customColumns!: string;\n\n /**\n * Defines the table has vertical scrolling.\n *\n * @default false\n * @private\n */\n @property({ type: Boolean })\n _verticalOffset?: boolean;\n\n @i18n(\"@sapudex/web-components\")\n static i18nBundle: I18nBundle;\n\n onAfterRendering() {\n if (this.stickyColumn) {\n this._setStickyAttrToCells();\n }\n\n this._setIndexToCells();\n\n if (this.headerRow) {\n this._setCellsHighlighter();\n }\n }\n\n _handleKeyDown(e: KeyboardEvent) {\n this.handleUpArrow(e);\n this.handleDownArrow(e);\n this.handleLeftArrow(e);\n this.handleRightArrow(e);\n }\n\n handleUpArrow(e: KeyboardEvent) {\n if (isUp(e)) {\n e.preventDefault();\n this.navigateRows(-1);\n }\n }\n\n handleDownArrow(e: KeyboardEvent) {\n if (isDown(e)) {\n e.preventDefault();\n this.navigateRows(1);\n }\n }\n\n handleRightArrow(e: KeyboardEvent) {\n if (isRight(e)) {\n e.preventDefault();\n this.navigateCells(1);\n }\n }\n\n handleLeftArrow(e: KeyboardEvent) {\n if (isLeft(e)) {\n e.preventDefault();\n this.navigateCells(-1);\n }\n }\n\n navigateRows(offset: number) {\n const items = this.getKeyboardNavigationItems();\n const activeItem = items.find(item => item.id === this.getParentRow()._id) as KeyBoardItem;\n const activeIndex = items.indexOf(activeItem);\n const nextItem = items[activeIndex + offset];\n\n nextItem?.elements[0]?.focus();\n }\n\n navigateCells(offset: number) {\n const parentRow = this.getParentRow();\n\n if (!(parentRow as UDExTableGroupRow).isGroup) {\n const interactiveElements = this.getInteractiveElements(parentRow as TableBaseRow);\n const currentIndex = interactiveElements.indexOf(<HTMLElement>document.activeElement);\n const targetIndex = currentIndex + offset;\n if (targetIndex >= 0 && targetIndex < interactiveElements.length) {\n interactiveElements[targetIndex]?.focus();\n }\n }\n }\n\n _onScroll() {\n const { scrollLeft, scrollTop } = this._tableHolder;\n\n if (this.stickyHeader) {\n this._verticalOffset = scrollTop > 0;\n }\n\n if (this.stickyColumn) {\n this._setHorizontalOffsetToCells(scrollLeft);\n }\n }\n\n _setCellsHighlighter(): void {\n const highlightedHeaderCells = this.headerRow.flatMap(header => {\n return header.cells\n .filter(cell => (cell as UDExTableHeaderCell).highlighted === true)\n .map(cell => cell._individualSlot);\n });\n\n this.rows.forEach(row => {\n if (!(row instanceof UDExTableGroupRow)) {\n row.cells.forEach(cell => {\n if (highlightedHeaderCells.includes(cell._individualSlot)) {\n cell.setAttribute(\"_highlighted\", \"\");\n }\n });\n }\n });\n }\n\n _setStickyAttrToCells():void {\n [...this.headerRow, ...this.rows].forEach(row => {\n if (!(row instanceof UDExTableGroupRow)) {\n row.cells[0]._sticky = true;\n }\n });\n }\n\n _setIndexToCells(): void {\n [...this.headerRow, ...this.rows].forEach((row, index) => {\n row._index = index;\n });\n }\n\n _setHorizontalOffsetToCells(scrollLeft: number):void {\n [...this.headerRow, ...this.rows].forEach(row => {\n if (!(row instanceof UDExTableGroupRow)) {\n row.cells[0]._horizontalOffset = scrollLeft > 0;\n }\n });\n }\n\n getParentRow(): UDExTableRow | UDExTableHeaderRow | UDExTableGroupRow {\n const focusedElement = document.activeElement as HTMLElement;\n return focusedElement.closest(\"[udex-table-row], [udex-table-header-row], [udex-table-group-row]\")!;\n }\n\n getKeyboardNavigationItems(): Array<KeyBoardItem> {\n const items: Array<KeyBoardItem> = [];\n\n const pushItemGroupToItems = (row: UDExTableHeaderRow | UDExTableRow | UDExTableGroupRow, collapsible: boolean | undefined) => {\n if (collapsible) {\n items.push(<KeyBoardItem>{\n id: row._id,\n elements: [row.shadowRoot?.querySelector(\"button\")],\n });\n }\n (row as UDExTableGroupRow).rows.forEach(rowGroup => {\n items.push({\n id: rowGroup._id,\n group: true,\n elements: this.getInteractiveElements(rowGroup),\n });\n });\n };\n\n const pushItemBaseToItems = (row: UDExTableHeaderRow | UDExTableRow | UDExTableGroupRow) => {\n items.push(<KeyBoardItem>{\n id: row._id,\n group: false,\n elements: row.isGroup\n ? [row.shadowRoot?.querySelector(\"button\")]\n : this.getInteractiveElements(row as TableBaseRow),\n });\n };\n\n [...this.headerRow, ...this.rows].forEach(row => {\n const { isGroup, _isOpen, collapsible } = row as UDExTableGroupRow;\n if (isGroup && _isOpen) {\n pushItemGroupToItems(row, collapsible);\n } else {\n pushItemBaseToItems(row);\n }\n });\n\n return items.filter(({ elements }) => elements.length);\n }\n\n getInteractiveElements(el: TableBaseRow): Array<HTMLElement> {\n return el.cells.flatMap(cell => Array.from(\n cell.querySelectorAll(\"button, a, [udex-button], [udex-link], [udex-rating-indicator]\"),\n ));\n }\n\n get _effectiveNoDataText() {\n return this.noDataText || translate(UDExTable, TABLE_NO_DATA_FOUND);\n }\n\n get _hasToolbar(): boolean {\n return this.heading?.length > 0 || this.actions?.length > 0;\n }\n\n get _tableMaxHeight(): string {\n return this.maxHeight ? this.maxHeight : \"auto\";\n }\n\n get _tableHolder(): HTMLElement {\n return this.shadowRoot?.getElementById(\"table\") as HTMLElement;\n }\n\n get _gridTemplateColumns(): string {\n const cellsLength = this.headerRow?.[0]?.cells.length || (this.rows?.[0] as TableBaseRow).cells.length;\n return `repeat(${cellsLength}, auto)`;\n }\n\n get _styles() {\n const headerStyleMap = this.headerRow?.[0]?.cells?.reduce((headerStyles, headerCell) => {\n if (headerCell.horizontalAlign !== undefined) {\n headerStyles[`--horizontal-align-${headerCell._individualSlot}`] = headerCell.horizontalAlign;\n }\n return headerStyles;\n }, {} as { [key: string]: string });\n\n return {\n table: {\n \"grid-template-columns\": this.customColumns || this._gridTemplateColumns,\n \"max-height\": this._tableMaxHeight,\n ...headerStyleMap,\n },\n };\n }\n}\n\nUDExTable.define();\n\nexport default UDExTable;\n"]}
@@ -1,4 +1,5 @@
1
1
  import UDExTableCellBase from "./TableCellBase.js";
2
+ import { UDExTableCellVerticalAlign } from "./types/Table.js";
2
3
  /**
3
4
  * @class
4
5
  *
@@ -30,7 +31,12 @@ declare class UDExTableCell extends UDExTableCellBase {
30
31
  * @private
31
32
  */
32
33
  _highlighted?: boolean;
33
- onBeforeRendering(): void;
34
- setJustifyContent(): void;
34
+ /**
35
+ * Determines the vertical alignment of the cell content.
36
+ *
37
+ * @default "Center"
38
+ * @public
39
+ */
40
+ verticalAlign: `${UDExTableCellVerticalAlign}`;
35
41
  }
36
42
  export default UDExTableCell;
package/dist/TableCell.js CHANGED
@@ -9,6 +9,7 @@ import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
9
9
  import property from "@ui5/webcomponents-base/dist/decorators/property.js";
10
10
  import UDExTableCellBase from "./TableCellBase.js";
11
11
  import TableCellTemplate from "./TableCellTemplate.js";
12
+ import { UDExTableCellVerticalAlign } from "./types/Table.js";
12
13
  // Styles
13
14
  import TableCellCss from "./generated/themes/TableCell.css.js";
14
15
  /**
@@ -29,17 +30,15 @@ import TableCellCss from "./generated/themes/TableCell.css.js";
29
30
  * @public
30
31
  */
31
32
  let UDExTableCell = class UDExTableCell extends UDExTableCellBase {
32
- onBeforeRendering() {
33
- super.onBeforeRendering();
34
- this.setJustifyContent();
35
- }
36
- setJustifyContent() {
37
- if (this.horizontalAlign) {
38
- this.style.justifyContent = this.horizontalAlign;
39
- }
40
- else {
41
- this.style.justifyContent = `var(--horizontal-align-${(this)._individualSlot})`;
42
- }
33
+ constructor() {
34
+ super(...arguments);
35
+ /**
36
+ * Determines the vertical alignment of the cell content.
37
+ *
38
+ * @default "Center"
39
+ * @public
40
+ */
41
+ this.verticalAlign = UDExTableCellVerticalAlign.Center;
43
42
  }
44
43
  };
45
44
  __decorate([
@@ -48,6 +47,9 @@ __decorate([
48
47
  __decorate([
49
48
  property({ type: Boolean })
50
49
  ], UDExTableCell.prototype, "_highlighted", void 0);
50
+ __decorate([
51
+ property()
52
+ ], UDExTableCell.prototype, "verticalAlign", void 0);
51
53
  UDExTableCell = __decorate([
52
54
  customElement({
53
55
  tag: "udex-table-cell",
@@ -1 +1 @@
1
- {"version":3,"file":"TableCell.js","sourceRoot":"","sources":["../src/TableCell.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,WAAW,MAAM,iDAAiD,CAAC;AAC1E,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,iBAAiB,MAAM,oBAAoB,CAAC;AACnD,OAAO,iBAAiB,MAAM,wBAAwB,CAAC;AAEvD,SAAS;AACT,OAAO,YAAY,MAAM,qCAAqC,CAAC;AAE/D;;;;;;;;;;;;;;;;GAgBG;AASH,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,iBAAiB;IAkB3C,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC3B,CAAC;IAED,iBAAiB;QACf,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;YACzB,IAAI,CAAC,KAAK,CAAC,cAAc,GAAG,IAAI,CAAC,eAAe,CAAC;QACnD,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,KAAK,CAAC,cAAc,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC,eAAe,GAAG,CAAC;QAClF,CAAC;IACH,CAAC;CACF,CAAA;AAtBG;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACX;AAQd;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;mDACH;AAhBrB,aAAa;IARlB,aAAa,CAAC;QACb,GAAG,EAAE,iBAAiB;QACtB,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,CAAC,iBAAiB,CAAC,MAAM,EAAE,YAAY,CAAC;QAChD,QAAQ,EAAE,iBAAiB;QAC3B,YAAY,EAAE,EAAE;KACjB,CAAC;GAEI,aAAa,CA8BlB;AAED,aAAa,CAAC,MAAM,EAAE,CAAC;AAEvB,eAAe,aAAa,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/renderer/JsxRenderer.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport UDExTableCellBase from \"./TableCellBase.js\";\nimport TableCellTemplate from \"./TableCellTemplate.js\";\n\n// Styles\nimport TableCellCss from \"./generated/themes/TableCell.css.js\";\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-table-cell</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/TableCell.js\";</code>\n *\n * @constructor\n * @extends UDExTableCellBase\n * @public\n */\n@customElement({\n tag: \"udex-table-cell\",\n renderer: jsxRenderer,\n styles: [UDExTableCellBase.styles, TableCellCss],\n template: TableCellTemplate,\n dependencies: [],\n})\n\nclass UDExTableCell extends UDExTableCellBase {\n /**\n * Defines the name of the UI5 Icon, that will be displayed at the beginning of the content.\n *\n * @default undefined\n * @public\n */\n @property({ type: String })\n icon?: string;\n\n /**\n * Defines highlighted of the table cell.\n *\n * @private\n */\n @property({ type: Boolean })\n _highlighted?: boolean;\n\n onBeforeRendering() {\n super.onBeforeRendering();\n this.setJustifyContent();\n }\n\n setJustifyContent(): void {\n if (this.horizontalAlign) {\n this.style.justifyContent = this.horizontalAlign;\n } else {\n this.style.justifyContent = `var(--horizontal-align-${(this)._individualSlot})`;\n }\n }\n}\n\nUDExTableCell.define();\n\nexport default UDExTableCell;\n"]}
1
+ {"version":3,"file":"TableCell.js","sourceRoot":"","sources":["../src/TableCell.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,WAAW,MAAM,iDAAiD,CAAC;AAC1E,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,iBAAiB,MAAM,oBAAoB,CAAC;AACnD,OAAO,iBAAiB,MAAM,wBAAwB,CAAC;AACvD,OAAO,EAAE,0BAA0B,EAAE,MAAM,kBAAkB,CAAC;AAE9D,SAAS;AACT,OAAO,YAAY,MAAM,qCAAqC,CAAC;AAE/D;;;;;;;;;;;;;;;;GAgBG;AASH,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,iBAAiB;IAA7C;;QAkBE;;;;;WAKG;QAED,kBAAa,GAAoC,0BAA0B,CAAC,MAAM,CAAC;IACvF,CAAC;CAAA,CAAA;AAlBG;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACX;AAQd;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;mDACH;AASvB;IADD,QAAQ,EAAE;oDAC0E;AAzBjF,aAAa;IARlB,aAAa,CAAC;QACb,GAAG,EAAE,iBAAiB;QACtB,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,CAAC,iBAAiB,CAAC,MAAM,EAAE,YAAY,CAAC;QAChD,QAAQ,EAAE,iBAAiB;QAC3B,YAAY,EAAE,EAAE;KACjB,CAAC;GAEI,aAAa,CA0BlB;AAED,aAAa,CAAC,MAAM,EAAE,CAAC;AAEvB,eAAe,aAAa,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/renderer/JsxRenderer.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport UDExTableCellBase from \"./TableCellBase.js\";\nimport TableCellTemplate from \"./TableCellTemplate.js\";\nimport { UDExTableCellVerticalAlign } from \"./types/Table.js\";\n\n// Styles\nimport TableCellCss from \"./generated/themes/TableCell.css.js\";\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-table-cell</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/TableCell.js\";</code>\n *\n * @constructor\n * @extends UDExTableCellBase\n * @public\n */\n@customElement({\n tag: \"udex-table-cell\",\n renderer: jsxRenderer,\n styles: [UDExTableCellBase.styles, TableCellCss],\n template: TableCellTemplate,\n dependencies: [],\n})\n\nclass UDExTableCell extends UDExTableCellBase {\n /**\n * Defines the name of the UI5 Icon, that will be displayed at the beginning of the content.\n *\n * @default undefined\n * @public\n */\n @property({ type: String })\n icon?: string;\n\n /**\n * Defines highlighted of the table cell.\n *\n * @private\n */\n @property({ type: Boolean })\n _highlighted?: boolean;\n\n /**\n * Determines the vertical alignment of the cell content.\n *\n * @default \"Center\"\n * @public\n */\n @property()\n verticalAlign: `${UDExTableCellVerticalAlign}` = UDExTableCellVerticalAlign.Center;\n}\n\nUDExTableCell.define();\n\nexport default UDExTableCell;\n"]}
@@ -1,6 +1,6 @@
1
1
  import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
2
2
  import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js";
3
- import type UDExTableCellHorizontalAlign from "./types/Table.js";
3
+ import type { UDExTableCellHorizontalAlign } from "./types/Table.js";
4
4
  /**
5
5
  * @class
6
6
  * A class to serve as a foundation for the `UDExTableCell` and `UDExTableHeaderCell` classes.
@@ -38,5 +38,6 @@ declare abstract class UDExTableCellBase extends UI5Element {
38
38
  _individualSlot?: string;
39
39
  protected ariaRole: string;
40
40
  onBeforeRendering(): void;
41
+ setJustifyContent(): void;
41
42
  }
42
43
  export default UDExTableCellBase;
@@ -26,6 +26,15 @@ let UDExTableCellBase = class UDExTableCellBase extends UI5Element {
26
26
  }
27
27
  onBeforeRendering() {
28
28
  this.setAttribute("role", this.ariaRole);
29
+ this.setJustifyContent();
30
+ }
31
+ setJustifyContent() {
32
+ if (this.horizontalAlign) {
33
+ this.style.justifyContent = this.horizontalAlign;
34
+ }
35
+ else {
36
+ this.style.justifyContent = `var(--horizontal-align-${this._individualSlot})`;
37
+ }
29
38
  }
30
39
  };
31
40
  __decorate([
@@ -1 +1 @@
1
- {"version":3,"file":"TableCellBase.js","sourceRoot":"","sources":["../src/TableCellBase.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AAEpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,IAAI,MAAM,wDAAwD,CAAC;AAC1E,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,SAAS,MAAM,sDAAsD,CAAC;AAG7E,SAAS;AACT,OAAO,gBAAgB,MAAM,yCAAyC,CAAC;AAEvE;;;;;;;GAOG;AAMH,IAAe,iBAAiB,GAAhC,MAAe,iBAAkB,SAAQ,UAAU;IAAnD;;QAoCY,aAAQ,GAAW,MAAM,CAAC;IAKtC,CAAC;IAHC,iBAAiB;QACf,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC3C,CAAC;CACF,CAAA;AAjCG;IADD,QAAQ,EAAE;0DAC2C;AAOpD;IADD,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;kDACR;AAQ5B;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kDACR;AASlB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4DACE;AAhCjB,iBAAiB;IAL/B,aAAa,CAAC;QACb,QAAQ,EAAE,SAAS;QACnB,MAAM,EAAE,gBAAgB;KACzB,CAAC;GAEa,iBAAiB,CAyC/B;AAED,eAAe,iBAAiB,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { DefaultSlot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot-strict.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport type UDExTableCellHorizontalAlign from \"./types/Table.js\";\n\n// Styles\nimport TableCellBaseCss from \"./generated/themes/TableCellBase.css.js\";\n\n/**\n * @class\n * A class to serve as a foundation for the `UDExTableCell` and `UDExTableHeaderCell` classes.\n * @constructor\n * @abstract\n * @extends UI5Element\n * @public\n */\n@customElement({\n renderer: litRender,\n styles: TableCellBaseCss,\n})\n\nabstract class UDExTableCellBase extends UI5Element {\n /**\n * Determines the horizontal alignment of table cells.\n * Note: All values valid for justify-content can be used not just the ones inside the enum.\n * @default undefined\n * @public\n */\n @property()\n horizontalAlign?: `${UDExTableCellHorizontalAlign}`;\n\n /**\n * Defines the content of the component.\n * @public\n */\n @slot({ type: Node, \"default\": true })\n content!: DefaultSlot<Node>;\n\n /**\n * Defines position sticky of the table cell.\n *\n * @private\n */\n @property({ type: Boolean })\n _sticky?: boolean;\n\n /**\n * Defines the table has horizontal scrolling.\n *\n * @default false\n * @private\n */\n @property({ type: Boolean })\n _horizontalOffset?: boolean;\n\n _individualSlot?: string;\n\n protected ariaRole: string = \"cell\";\n\n onBeforeRendering() {\n this.setAttribute(\"role\", this.ariaRole);\n }\n}\n\nexport default UDExTableCellBase;\n"]}
1
+ {"version":3,"file":"TableCellBase.js","sourceRoot":"","sources":["../src/TableCellBase.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AAEpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,IAAI,MAAM,wDAAwD,CAAC;AAC1E,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,SAAS,MAAM,sDAAsD,CAAC;AAG7E,SAAS;AACT,OAAO,gBAAgB,MAAM,yCAAyC,CAAC;AAEvE;;;;;;;GAOG;AAMH,IAAe,iBAAiB,GAAhC,MAAe,iBAAkB,SAAQ,UAAU;IAAnD;;QAoCY,aAAQ,GAAW,MAAM,CAAC;IActC,CAAC;IAZC,iBAAiB;QACf,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;QACzC,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC3B,CAAC;IAED,iBAAiB;QACf,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;YACzB,IAAI,CAAC,KAAK,CAAC,cAAc,GAAG,IAAI,CAAC,eAAe,CAAC;QACnD,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,KAAK,CAAC,cAAc,GAAG,0BAA0B,IAAI,CAAC,eAAe,GAAG,CAAC;QAChF,CAAC;IACH,CAAC;CACF,CAAA;AA1CG;IADD,QAAQ,EAAE;0DAC2C;AAOpD;IADD,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;kDACR;AAQ5B;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kDACR;AASlB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4DACE;AAhCjB,iBAAiB;IAL/B,aAAa,CAAC;QACb,QAAQ,EAAE,SAAS;QACnB,MAAM,EAAE,gBAAgB;KACzB,CAAC;GAEa,iBAAiB,CAkD/B;AAED,eAAe,iBAAiB,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { DefaultSlot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot-strict.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport type { UDExTableCellHorizontalAlign } from \"./types/Table.js\";\n\n// Styles\nimport TableCellBaseCss from \"./generated/themes/TableCellBase.css.js\";\n\n/**\n * @class\n * A class to serve as a foundation for the `UDExTableCell` and `UDExTableHeaderCell` classes.\n * @constructor\n * @abstract\n * @extends UI5Element\n * @public\n */\n@customElement({\n renderer: litRender,\n styles: TableCellBaseCss,\n})\n\nabstract class UDExTableCellBase extends UI5Element {\n /**\n * Determines the horizontal alignment of table cells.\n * Note: All values valid for justify-content can be used not just the ones inside the enum.\n * @default undefined\n * @public\n */\n @property()\n horizontalAlign?: `${UDExTableCellHorizontalAlign}`;\n\n /**\n * Defines the content of the component.\n * @public\n */\n @slot({ type: Node, \"default\": true })\n content!: DefaultSlot<Node>;\n\n /**\n * Defines position sticky of the table cell.\n *\n * @private\n */\n @property({ type: Boolean })\n _sticky?: boolean;\n\n /**\n * Defines the table has horizontal scrolling.\n *\n * @default false\n * @private\n */\n @property({ type: Boolean })\n _horizontalOffset?: boolean;\n\n _individualSlot?: string;\n\n protected ariaRole: string = \"cell\";\n\n onBeforeRendering() {\n this.setAttribute(\"role\", this.ariaRole);\n this.setJustifyContent();\n }\n\n setJustifyContent(): void {\n if (this.horizontalAlign) {\n this.style.justifyContent = this.horizontalAlign;\n } else {\n this.style.justifyContent = `var(--horizontal-align-${this._individualSlot})`;\n }\n }\n}\n\nexport default UDExTableCellBase;\n"]}
@@ -39,7 +39,6 @@ declare class UDExTableHeaderCell extends UDExTableCellBase {
39
39
  */
40
40
  iconEnd: string;
41
41
  protected ariaRole: string;
42
- onBeforeRendering(): void;
43
42
  get _hasIcons(): boolean;
44
43
  }
45
44
  export default UDExTableHeaderCell;
@@ -47,10 +47,6 @@ let UDExTableHeaderCell = class UDExTableHeaderCell extends UDExTableCellBase {
47
47
  this.iconEnd = "";
48
48
  this.ariaRole = "columnheader";
49
49
  }
50
- onBeforeRendering() {
51
- super.onBeforeRendering();
52
- this.style.justifyContent = `var(--horizontal-align-${this._individualSlot})`;
53
- }
54
50
  get _hasIcons() {
55
51
  return this.iconStart.length > 0 || this.iconEnd.length > 0;
56
52
  }
@@ -1 +1 @@
1
- {"version":3,"file":"TableHeaderCell.js","sourceRoot":"","sources":["../src/TableHeaderCell.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,WAAW,MAAM,iDAAiD,CAAC;AAC1E,OAAO,uBAAuB,MAAM,8BAA8B,CAAC;AACnE,OAAO,iBAAiB,MAAM,oBAAoB,CAAC;AAEnD,SAAS;AACT,OAAO,kBAAkB,MAAM,2CAA2C,CAAC;AAE3E;;;;;;;;;;;;;;;;GAgBG;AAQH,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,iBAAiB;IAAnD;;QAUE;;;;;WAKG;QAED,cAAS,GAAW,EAAE,CAAC;QAEzB;;;;;WAKG;QAED,YAAO,GAAW,EAAE,CAAC;QAEb,aAAQ,GAAW,cAAc,CAAC;IAU9C,CAAC;IARC,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,KAAK,CAAC,cAAc,GAAG,0BAA0B,IAAI,CAAC,eAAe,GAAG,CAAC;IAChF,CAAC;IAED,IAAI,SAAS;QACX,OAAO,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC;IAC9D,CAAC;CACF,CAAA;AA9BG;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wDACJ;AAStB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sDACF;AASvB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDACJ;AA1BnB,mBAAmB;IAPxB,aAAa,CAAC;QACb,GAAG,EAAE,wBAAwB;QAC7B,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,CAAC,iBAAiB,CAAC,MAAM,EAAE,kBAAkB,CAAC;QACtD,QAAQ,EAAE,uBAAuB;KAClC,CAAC;GAEI,mBAAmB,CAsCxB;AAED,mBAAmB,CAAC,MAAM,EAAE,CAAC;AAE7B,eAAe,mBAAmB,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/renderer/JsxRenderer.js\";\nimport TableHeaderCellTemplate from \"./TableHeaderCellTemplate.js\";\nimport UDExTableCellBase from \"./TableCellBase.js\";\n\n// Styles\nimport TableHeaderCellCss from \"./generated/themes/TableHeaderCell.css.js\";\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-table-header-cell</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/TableHeaderCell.js\";</code>\n *\n * @constructor\n * @extends UDExTableCellBase\n * @public\n */\n@customElement({\n tag: \"udex-table-header-cell\",\n renderer: jsxRenderer,\n styles: [UDExTableCellBase.styles, TableHeaderCellCss],\n template: TableHeaderCellTemplate,\n})\n\nclass UDExTableHeaderCell extends UDExTableCellBase {\n /**\n * Defines highlighted the header cell.\n *\n * @default false\n * @public\n */\n @property({ type: Boolean })\n highlighted?: boolean;\n\n /**\n * Defines the name of the UI5 Icon, that will be displayed at the beginning of the content.\n *\n * @default \"\"\n * @public\n */\n @property({ type: String })\n iconStart: string = \"\";\n\n /**\n * Defines the name of the UI5 Icon, that will be displayed at the end of the content.\n *\n * @default \"\"\n * @public\n */\n @property({ type: String })\n iconEnd: string = \"\";\n\n protected ariaRole: string = \"columnheader\";\n\n onBeforeRendering() {\n super.onBeforeRendering();\n this.style.justifyContent = `var(--horizontal-align-${this._individualSlot})`;\n }\n\n get _hasIcons(): boolean {\n return this.iconStart.length > 0 || this.iconEnd.length > 0;\n }\n}\n\nUDExTableHeaderCell.define();\n\nexport default UDExTableHeaderCell;\n"]}
1
+ {"version":3,"file":"TableHeaderCell.js","sourceRoot":"","sources":["../src/TableHeaderCell.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,WAAW,MAAM,iDAAiD,CAAC;AAC1E,OAAO,uBAAuB,MAAM,8BAA8B,CAAC;AACnE,OAAO,iBAAiB,MAAM,oBAAoB,CAAC;AAEnD,SAAS;AACT,OAAO,kBAAkB,MAAM,2CAA2C,CAAC;AAE3E;;;;;;;;;;;;;;;;GAgBG;AAQH,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,iBAAiB;IAAnD;;QAUE;;;;;WAKG;QAED,cAAS,GAAW,EAAE,CAAC;QAEzB;;;;;WAKG;QAED,YAAO,GAAW,EAAE,CAAC;QAEb,aAAQ,GAAW,cAAc,CAAC;IAK9C,CAAC;IAHC,IAAI,SAAS;QACX,OAAO,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC;IAC9D,CAAC;CACF,CAAA;AAzBG;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wDACJ;AAStB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sDACF;AASvB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDACJ;AA1BnB,mBAAmB;IAPxB,aAAa,CAAC;QACb,GAAG,EAAE,wBAAwB;QAC7B,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,CAAC,iBAAiB,CAAC,MAAM,EAAE,kBAAkB,CAAC;QACtD,QAAQ,EAAE,uBAAuB;KAClC,CAAC;GAEI,mBAAmB,CAiCxB;AAED,mBAAmB,CAAC,MAAM,EAAE,CAAC;AAE7B,eAAe,mBAAmB,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/renderer/JsxRenderer.js\";\nimport TableHeaderCellTemplate from \"./TableHeaderCellTemplate.js\";\nimport UDExTableCellBase from \"./TableCellBase.js\";\n\n// Styles\nimport TableHeaderCellCss from \"./generated/themes/TableHeaderCell.css.js\";\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-table-header-cell</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/TableHeaderCell.js\";</code>\n *\n * @constructor\n * @extends UDExTableCellBase\n * @public\n */\n@customElement({\n tag: \"udex-table-header-cell\",\n renderer: jsxRenderer,\n styles: [UDExTableCellBase.styles, TableHeaderCellCss],\n template: TableHeaderCellTemplate,\n})\n\nclass UDExTableHeaderCell extends UDExTableCellBase {\n /**\n * Defines highlighted the header cell.\n *\n * @default false\n * @public\n */\n @property({ type: Boolean })\n highlighted?: boolean;\n\n /**\n * Defines the name of the UI5 Icon, that will be displayed at the beginning of the content.\n *\n * @default \"\"\n * @public\n */\n @property({ type: String })\n iconStart: string = \"\";\n\n /**\n * Defines the name of the UI5 Icon, that will be displayed at the end of the content.\n *\n * @default \"\"\n * @public\n */\n @property({ type: String })\n iconEnd: string = \"\";\n\n protected ariaRole: string = \"columnheader\";\n\n get _hasIcons(): boolean {\n return this.iconStart.length > 0 || this.iconEnd.length > 0;\n }\n}\n\nUDExTableHeaderCell.define();\n\nexport default UDExTableHeaderCell;\n"]}
@@ -1,5 +1,6 @@
1
1
  import UDExTableRowBase from "./TableRowBase.js";
2
2
  import type UDExTableCell from "./TableCell.js";
3
+ import { UDExTableCellVerticalAlign } from "./types/Table.js";
3
4
  /**
4
5
  * @class
5
6
  *
@@ -32,8 +33,17 @@ declare class UDExTableRow extends UDExTableRowBase {
32
33
  * @public
33
34
  */
34
35
  highlighted?: boolean;
36
+ /**
37
+ * Determines the vertical alignment of all cells in the row.
38
+ * Applies to every cell that does not define its own verticalAlign.
39
+ *
40
+ * @default "Center"
41
+ * @public
42
+ */
43
+ verticalAlign: `${UDExTableCellVerticalAlign}`;
35
44
  onBeforeRendering(): void;
36
45
  _setHighlightToCells(): void;
46
+ _setVerticalAlignToCells(): void;
37
47
  get isGroup(): boolean;
38
48
  get cellsInRow(): Array<UDExTableCell>;
39
49
  }
package/dist/TableRow.js CHANGED
@@ -9,6 +9,7 @@ import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
9
9
  import property from "@ui5/webcomponents-base/dist/decorators/property.js";
10
10
  import UDExTableRowBase from "./TableRowBase.js";
11
11
  import TableRowTemplate from "./TableRowTemplate.js";
12
+ import { UDExTableCellVerticalAlign } from "./types/Table.js";
12
13
  /**
13
14
  * @class
14
15
  *
@@ -27,16 +28,35 @@ import TableRowTemplate from "./TableRowTemplate.js";
27
28
  * @public
28
29
  */
29
30
  let UDExTableRow = class UDExTableRow extends UDExTableRowBase {
31
+ constructor() {
32
+ super(...arguments);
33
+ /**
34
+ * Determines the vertical alignment of all cells in the row.
35
+ * Applies to every cell that does not define its own verticalAlign.
36
+ *
37
+ * @default "Center"
38
+ * @public
39
+ */
40
+ this.verticalAlign = UDExTableCellVerticalAlign.Center;
41
+ }
30
42
  onBeforeRendering() {
31
43
  if (this.highlighted) {
32
44
  this._setHighlightToCells();
33
45
  }
46
+ this._setVerticalAlignToCells();
34
47
  }
35
48
  _setHighlightToCells() {
36
49
  this.cellsInRow.forEach(cell => {
37
50
  cell._highlighted = true;
38
51
  });
39
52
  }
53
+ _setVerticalAlignToCells() {
54
+ this.cellsInRow.forEach(cell => {
55
+ if (cell.verticalAlign === UDExTableCellVerticalAlign.Center) {
56
+ cell.verticalAlign = this.verticalAlign;
57
+ }
58
+ });
59
+ }
40
60
  get isGroup() {
41
61
  return false;
42
62
  }
@@ -50,6 +70,9 @@ __decorate([
50
70
  __decorate([
51
71
  property({ type: Boolean })
52
72
  ], UDExTableRow.prototype, "highlighted", void 0);
73
+ __decorate([
74
+ property()
75
+ ], UDExTableRow.prototype, "verticalAlign", void 0);
53
76
  UDExTableRow = __decorate([
54
77
  customElement({
55
78
  tag: "udex-table-row",
@@ -1 +1 @@
1
- {"version":3,"file":"TableRow.js","sourceRoot":"","sources":["../src/TableRow.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,WAAW,MAAM,iDAAiD,CAAC;AAC1E,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,gBAAgB,MAAM,mBAAmB,CAAC;AAEjD,OAAO,gBAAgB,MAAM,uBAAuB,CAAC;AAErD;;;;;;;;;;;;;;;;GAgBG;AAQH,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,gBAAgB;IAmBzC,iBAAiB;QACf,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC9B,CAAC;IACH,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;YAC7B,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;QAC3B,CAAC,CAAC,CAAC;IACL,CAAC;IAED,IAAI,OAAO;QACT,OAAO,KAAK,CAAC;IACf,CAAC;IAED,IAAI,UAAU;QACZ,OAAO,IAAI,CAAC,eAAe,CAAgB,OAAO,CAAC,CAAC;IACtD,CAAC;CACF,CAAA;AA9BG;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDACJ;AAStB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDACJ;AAjBpB,YAAY;IAPjB,aAAa,CAAC;QACb,GAAG,EAAE,gBAAgB;QACrB,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,CAAC,gBAAgB,CAAC,MAAM,CAAC;QACjC,QAAQ,EAAE,gBAAgB;KAC3B,CAAC;GAEI,YAAY,CAsCjB;AAED,YAAY,CAAC,MAAM,EAAE,CAAC;AAEtB,eAAe,YAAY,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/renderer/JsxRenderer.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport UDExTableRowBase from \"./TableRowBase.js\";\nimport type UDExTableCell from \"./TableCell.js\";\nimport TableRowTemplate from \"./TableRowTemplate.js\";\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-table-row</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/TableRow.js\";</code>\n *\n * @constructor\n * @extends UDExTableRowBase\n * @public\n */\n@customElement({\n tag: \"udex-table-row\",\n renderer: jsxRenderer,\n styles: [UDExTableRowBase.styles],\n template: TableRowTemplate,\n})\n\nclass UDExTableRow extends UDExTableRowBase {\n /**\n * Defines the interactive state of the row.\n *\n * @default false\n * @public\n */\n @property({ type: Boolean })\n interactive?: boolean;\n\n /**\n * Defines highlighted the row.\n *\n * @default false\n * @public\n */\n @property({ type: Boolean })\n highlighted?: boolean;\n\n onBeforeRendering(): void {\n if (this.highlighted) {\n this._setHighlightToCells();\n }\n }\n\n _setHighlightToCells(): void {\n this.cellsInRow.forEach(cell => {\n cell._highlighted = true;\n });\n }\n\n get isGroup(): boolean {\n return false;\n }\n\n get cellsInRow(): Array<UDExTableCell> {\n return this.getSlottedNodes<UDExTableCell>(\"cells\");\n }\n}\n\nUDExTableRow.define();\n\nexport default UDExTableRow;\n"]}
1
+ {"version":3,"file":"TableRow.js","sourceRoot":"","sources":["../src/TableRow.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,WAAW,MAAM,iDAAiD,CAAC;AAC1E,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,gBAAgB,MAAM,mBAAmB,CAAC;AAEjD,OAAO,gBAAgB,MAAM,uBAAuB,CAAC;AACrD,OAAO,EAAE,0BAA0B,EAAE,MAAM,kBAAkB,CAAC;AAE9D;;;;;;;;;;;;;;;;GAgBG;AAQH,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,gBAAgB;IAA3C;;QAmBE;;;;;;WAMG;QAED,kBAAa,GAAoC,0BAA0B,CAAC,MAAM,CAAC;IA8BvF,CAAC;IA5BC,iBAAiB;QACf,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC9B,CAAC;QACD,IAAI,CAAC,wBAAwB,EAAE,CAAC;IAClC,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;YAC7B,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;QAC3B,CAAC,CAAC,CAAC;IACL,CAAC;IAED,wBAAwB;QACtB,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;YAC7B,IAAI,IAAI,CAAC,aAAa,KAAK,0BAA0B,CAAC,MAAM,EAAE,CAAC;gBAC7D,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC;YAC1C,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAED,IAAI,OAAO;QACT,OAAO,KAAK,CAAC;IACf,CAAC;IAED,IAAI,UAAU;QACZ,OAAO,IAAI,CAAC,eAAe,CAAgB,OAAO,CAAC,CAAC;IACtD,CAAC;CACF,CAAA;AAjDG;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDACJ;AAStB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDACJ;AAUtB;IADD,QAAQ,EAAE;mDAC0E;AA3BjF,YAAY;IAPjB,aAAa,CAAC;QACb,GAAG,EAAE,gBAAgB;QACrB,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,CAAC,gBAAgB,CAAC,MAAM,CAAC;QACjC,QAAQ,EAAE,gBAAgB;KAC3B,CAAC;GAEI,YAAY,CAyDjB;AAED,YAAY,CAAC,MAAM,EAAE,CAAC;AAEtB,eAAe,YAAY,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/renderer/JsxRenderer.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport UDExTableRowBase from \"./TableRowBase.js\";\nimport type UDExTableCell from \"./TableCell.js\";\nimport TableRowTemplate from \"./TableRowTemplate.js\";\nimport { UDExTableCellVerticalAlign } from \"./types/Table.js\";\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-table-row</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/TableRow.js\";</code>\n *\n * @constructor\n * @extends UDExTableRowBase\n * @public\n */\n@customElement({\n tag: \"udex-table-row\",\n renderer: jsxRenderer,\n styles: [UDExTableRowBase.styles],\n template: TableRowTemplate,\n})\n\nclass UDExTableRow extends UDExTableRowBase {\n /**\n * Defines the interactive state of the row.\n *\n * @default false\n * @public\n */\n @property({ type: Boolean })\n interactive?: boolean;\n\n /**\n * Defines highlighted the row.\n *\n * @default false\n * @public\n */\n @property({ type: Boolean })\n highlighted?: boolean;\n\n /**\n * Determines the vertical alignment of all cells in the row.\n * Applies to every cell that does not define its own verticalAlign.\n *\n * @default \"Center\"\n * @public\n */\n @property()\n verticalAlign: `${UDExTableCellVerticalAlign}` = UDExTableCellVerticalAlign.Center;\n\n onBeforeRendering(): void {\n if (this.highlighted) {\n this._setHighlightToCells();\n }\n this._setVerticalAlignToCells();\n }\n\n _setHighlightToCells(): void {\n this.cellsInRow.forEach(cell => {\n cell._highlighted = true;\n });\n }\n\n _setVerticalAlignToCells(): void {\n this.cellsInRow.forEach(cell => {\n if (cell.verticalAlign === UDExTableCellVerticalAlign.Center) {\n cell.verticalAlign = this.verticalAlign;\n }\n });\n }\n\n get isGroup(): boolean {\n return false;\n }\n\n get cellsInRow(): Array<UDExTableCell> {\n return this.getSlottedNodes<UDExTableCell>(\"cells\");\n }\n}\n\nUDExTableRow.define();\n\nexport default UDExTableRow;\n"]}