@ui5/webcomponents-base 0.0.0-db2be6526 → 0.0.0-db622d8a8

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 (619) hide show
  1. package/.eslintignore +7 -5
  2. package/.npsrc.json +3 -0
  3. package/CHANGELOG.md +621 -0
  4. package/README.md +32 -6
  5. package/bundle.esm.js +20 -11
  6. package/config/wdio.conf.cjs +400 -0
  7. package/{src/AssetRegistry.js → dist/AssetRegistry.d.ts} +1 -7
  8. package/dist/AssetRegistry.js +2 -7
  9. package/dist/AssetRegistry.js.map +1 -0
  10. package/dist/Boot.d.ts +9 -0
  11. package/dist/Boot.js +56 -28
  12. package/dist/Boot.js.map +1 -0
  13. package/dist/CSP.d.ts +30 -0
  14. package/dist/CSP.js +51 -0
  15. package/dist/CSP.js.map +1 -0
  16. package/dist/CustomElementsRegistry.d.ts +5 -0
  17. package/dist/CustomElementsRegistry.js +69 -30
  18. package/dist/CustomElementsRegistry.js.map +1 -0
  19. package/dist/CustomElementsScope.d.ts +7 -0
  20. package/dist/CustomElementsScope.js +11 -108
  21. package/dist/CustomElementsScope.js.map +1 -0
  22. package/dist/CustomElementsScopeUtils.d.ts +55 -0
  23. package/{src/CustomElementsScope.js → dist/CustomElementsScopeUtils.js} +34 -52
  24. package/dist/CustomElementsScopeUtils.js.map +1 -0
  25. package/dist/DOMObserver.d.ts +11 -0
  26. package/dist/DOMObserver.js +12 -54
  27. package/dist/DOMObserver.js.map +1 -0
  28. package/dist/Device.d.ts +12 -0
  29. package/dist/Device.js +148 -89
  30. package/dist/Device.js.map +1 -0
  31. package/dist/EventProvider.d.ts +25 -0
  32. package/dist/EventProvider.js +67 -82
  33. package/dist/EventProvider.js.map +1 -0
  34. package/dist/FeaturesRegistry.d.ts +3 -0
  35. package/dist/FeaturesRegistry.js +5 -7
  36. package/dist/FeaturesRegistry.js.map +1 -0
  37. package/dist/FontFace.d.ts +2 -0
  38. package/dist/FontFace.js +16 -121
  39. package/dist/FontFace.js.map +1 -0
  40. package/dist/IgnoreCustomElements.d.ts +27 -0
  41. package/dist/IgnoreCustomElements.js +39 -0
  42. package/dist/IgnoreCustomElements.js.map +1 -0
  43. package/dist/InitialConfiguration.d.ts +27 -0
  44. package/dist/InitialConfiguration.js +121 -131
  45. package/dist/InitialConfiguration.js.map +1 -0
  46. package/dist/Keys.d.ts +57 -0
  47. package/dist/Keys.js +174 -244
  48. package/dist/Keys.js.map +1 -0
  49. package/dist/ManagedStyles.d.ts +8 -0
  50. package/dist/ManagedStyles.js +77 -29
  51. package/dist/ManagedStyles.js.map +1 -0
  52. package/dist/MarkedEvents.d.ts +9 -0
  53. package/dist/MarkedEvents.js +15 -0
  54. package/dist/MarkedEvents.js.map +1 -0
  55. package/dist/MediaRange.d.ts +37 -0
  56. package/dist/MediaRange.js +54 -65
  57. package/dist/MediaRange.js.map +1 -0
  58. package/dist/PropertiesFileFormat.d.ts +8 -0
  59. package/dist/PropertiesFileFormat.js +72 -82
  60. package/dist/PropertiesFileFormat.js.map +1 -0
  61. package/dist/Render.d.ts +47 -0
  62. package/dist/Render.js +82 -112
  63. package/dist/Render.js.map +1 -0
  64. package/dist/RenderQueue.d.ts +19 -0
  65. package/dist/RenderQueue.js +52 -62
  66. package/dist/RenderQueue.js.map +1 -0
  67. package/dist/Runtimes.d.ts +27 -0
  68. package/dist/Runtimes.js +86 -0
  69. package/dist/Runtimes.js.map +1 -0
  70. package/dist/StaticArea.d.ts +3 -0
  71. package/dist/StaticArea.js +5 -1
  72. package/dist/StaticArea.js.map +1 -0
  73. package/dist/StaticAreaItem.d.ts +36 -0
  74. package/dist/StaticAreaItem.js +88 -93
  75. package/dist/StaticAreaItem.js.map +1 -0
  76. package/dist/SystemCSSVars.d.ts +2 -0
  77. package/dist/SystemCSSVars.js +5 -25
  78. package/dist/SystemCSSVars.js.map +1 -0
  79. package/{src/Theming.js → dist/Theming.d.ts} +0 -1
  80. package/dist/Theming.js +1 -1
  81. package/dist/Theming.js.map +1 -0
  82. package/dist/UI5Element.d.ts +380 -0
  83. package/dist/UI5Element.js +931 -989
  84. package/dist/UI5Element.js.map +1 -0
  85. package/dist/UI5ElementMetadata.d.ts +150 -0
  86. package/dist/UI5ElementMetadata.js +278 -298
  87. package/dist/UI5ElementMetadata.js.map +1 -0
  88. package/dist/animations/AnimationQueue.d.ts +8 -0
  89. package/dist/animations/AnimationQueue.js +31 -38
  90. package/dist/animations/AnimationQueue.js.map +1 -0
  91. package/dist/animations/animate.d.ts +14 -0
  92. package/dist/animations/animate.js +46 -51
  93. package/dist/animations/animate.js.map +1 -0
  94. package/dist/animations/scroll.d.ts +5 -0
  95. package/dist/animations/scroll.js +18 -27
  96. package/dist/animations/scroll.js.map +1 -0
  97. package/dist/animations/slideDown.d.ts +5 -0
  98. package/dist/animations/slideDown.js +53 -78
  99. package/dist/animations/slideDown.js.map +1 -0
  100. package/dist/animations/slideUp.d.ts +5 -0
  101. package/dist/animations/slideUp.js +49 -70
  102. package/dist/animations/slideUp.js.map +1 -0
  103. package/dist/api.json +1 -0
  104. package/dist/asset-registries/Icons.d.ts +38 -0
  105. package/dist/asset-registries/Icons.js +109 -112
  106. package/dist/asset-registries/Icons.js.map +1 -0
  107. package/dist/asset-registries/Illustrations.d.ts +17 -0
  108. package/dist/asset-registries/Illustrations.js +41 -25
  109. package/dist/asset-registries/Illustrations.js.map +1 -0
  110. package/dist/asset-registries/LocaleData.d.ts +7 -0
  111. package/dist/asset-registries/LocaleData.js +104 -127
  112. package/dist/asset-registries/LocaleData.js.map +1 -0
  113. package/dist/asset-registries/Themes.d.ts +11 -0
  114. package/dist/asset-registries/Themes.js +40 -66
  115. package/dist/asset-registries/Themes.js.map +1 -0
  116. package/dist/asset-registries/i18n.d.ts +23 -0
  117. package/dist/asset-registries/i18n.js +61 -81
  118. package/dist/asset-registries/i18n.js.map +1 -0
  119. package/dist/assets/Boot.34b7cea0.css +1 -0
  120. package/dist/assets/Boot.48b53df7.js +9 -0
  121. package/dist/assets/bundle.esm.7885cd75.js +50 -0
  122. package/dist/assets-meta/IconCollectionsAlias.d.ts +31 -0
  123. package/dist/assets-meta/IconCollectionsAlias.js +38 -0
  124. package/dist/assets-meta/IconCollectionsAlias.js.map +1 -0
  125. package/dist/config/AnimationMode.d.ts +14 -0
  126. package/dist/config/AnimationMode.js +21 -18
  127. package/dist/config/AnimationMode.js.map +1 -0
  128. package/dist/config/CalendarType.d.ts +8 -0
  129. package/dist/config/CalendarType.js +13 -12
  130. package/dist/config/CalendarType.js.map +1 -0
  131. package/dist/config/FormatSettings.d.ts +15 -0
  132. package/dist/config/FormatSettings.js +15 -9
  133. package/dist/config/FormatSettings.js.map +1 -0
  134. package/dist/config/Icons.d.ts +55 -0
  135. package/dist/config/Icons.js +103 -0
  136. package/dist/config/Icons.js.map +1 -0
  137. package/dist/config/Language.d.ts +40 -0
  138. package/dist/config/Language.js +43 -43
  139. package/dist/config/Language.js.map +1 -0
  140. package/dist/config/NoConflict.d.ts +20 -0
  141. package/dist/config/NoConflict.js +41 -41
  142. package/dist/config/NoConflict.js.map +1 -0
  143. package/dist/config/RTL.d.ts +7 -0
  144. package/dist/config/RTL.js +26 -20
  145. package/dist/config/RTL.js.map +1 -0
  146. package/dist/config/Theme.d.ts +38 -0
  147. package/dist/config/Theme.js +64 -22
  148. package/dist/config/Theme.js.map +1 -0
  149. package/dist/config/ThemeRoot.d.ts +29 -0
  150. package/dist/config/ThemeRoot.js +59 -0
  151. package/dist/config/ThemeRoot.js.map +1 -0
  152. package/dist/config/Timezone.d.ts +17 -0
  153. package/dist/config/Timezone.js +30 -0
  154. package/dist/config/Timezone.js.map +1 -0
  155. package/dist/css/BusyIndicator.css +80 -0
  156. package/dist/css/FontFace.css +66 -0
  157. package/dist/css/OverrideFontFace.css +32 -0
  158. package/dist/css/SystemCSSVars.css +17 -0
  159. package/dist/decorators/customElement.d.ts +23 -0
  160. package/dist/decorators/customElement.js +37 -0
  161. package/dist/decorators/customElement.js.map +1 -0
  162. package/dist/decorators/event.d.ts +10 -0
  163. package/dist/decorators/event.js +24 -0
  164. package/dist/decorators/event.js.map +1 -0
  165. package/dist/decorators/property.d.ts +9 -0
  166. package/dist/decorators/property.js +24 -0
  167. package/dist/decorators/property.js.map +1 -0
  168. package/dist/decorators/slot.d.ts +9 -0
  169. package/dist/decorators/slot.js +37 -0
  170. package/dist/decorators/slot.js.map +1 -0
  171. package/dist/delegate/ItemNavigation.d.ts +113 -0
  172. package/dist/delegate/ItemNavigation.js +277 -312
  173. package/dist/delegate/ItemNavigation.js.map +1 -0
  174. package/dist/delegate/ResizeHandler.d.ts +25 -0
  175. package/dist/delegate/ResizeHandler.js +72 -91
  176. package/dist/delegate/ResizeHandler.js.map +1 -0
  177. package/dist/delegate/ScrollEnablement.d.ts +49 -0
  178. package/dist/delegate/ScrollEnablement.js +157 -180
  179. package/dist/delegate/ScrollEnablement.js.map +1 -0
  180. package/dist/features/F6Navigation.d.ts +19 -0
  181. package/dist/features/F6Navigation.js +151 -0
  182. package/dist/features/F6Navigation.js.map +1 -0
  183. package/dist/features/LegacyDateFormats.d.ts +18 -0
  184. package/dist/features/LegacyDateFormats.js +20 -0
  185. package/dist/features/LegacyDateFormats.js.map +1 -0
  186. package/dist/features/OpenUI5Element.d.ts +9 -0
  187. package/dist/features/OpenUI5Element.js +5 -0
  188. package/dist/features/OpenUI5Element.js.map +1 -0
  189. package/dist/features/OpenUI5Enablement.d.ts +11 -0
  190. package/dist/features/OpenUI5Enablement.js +96 -0
  191. package/dist/features/OpenUI5Enablement.js.map +1 -0
  192. package/dist/features/OpenUI5Support.d.ts +26 -0
  193. package/dist/features/OpenUI5Support.js +93 -119
  194. package/dist/features/OpenUI5Support.js.map +1 -0
  195. package/dist/generated/AssetParameters.js +3 -1
  196. package/dist/generated/VersionInfo.js +10 -0
  197. package/dist/generated/css/BusyIndicator.css.d.ts +3 -0
  198. package/dist/generated/css/BusyIndicator.css.js +7 -0
  199. package/dist/generated/css/BusyIndicator.css.js.map +1 -0
  200. package/dist/generated/css/FontFace.css.d.ts +3 -0
  201. package/dist/generated/css/FontFace.css.js +7 -0
  202. package/dist/generated/css/FontFace.css.js.map +1 -0
  203. package/dist/generated/css/OverrideFontFace.css.d.ts +3 -0
  204. package/dist/generated/css/OverrideFontFace.css.js +7 -0
  205. package/dist/generated/css/OverrideFontFace.css.js.map +1 -0
  206. package/dist/generated/css/SystemCSSVars.css.d.ts +3 -0
  207. package/dist/generated/css/SystemCSSVars.css.js +7 -0
  208. package/dist/generated/css/SystemCSSVars.css.js.map +1 -0
  209. package/dist/generated/templates/elements/WithComplexTemplateTemplate.lit.d.ts +4 -0
  210. package/dist/generated/templates/elements/WithComplexTemplateTemplate.lit.js +9 -0
  211. package/dist/generated/templates/elements/WithComplexTemplateTemplate.lit.js.map +1 -0
  212. package/dist/getSharedResource.d.ts +11 -0
  213. package/dist/getSharedResource.js +28 -18
  214. package/dist/getSharedResource.js.map +1 -0
  215. package/dist/global.d.ts +40 -0
  216. package/dist/i18nBundle.d.ts +43 -0
  217. package/dist/i18nBundle.js +57 -64
  218. package/dist/i18nBundle.js.map +1 -0
  219. package/dist/locale/Locale.d.ts +22 -0
  220. package/dist/locale/Locale.js +75 -87
  221. package/dist/locale/Locale.js.map +1 -0
  222. package/dist/locale/RTLAwareRegistry.d.ts +4 -0
  223. package/dist/locale/RTLAwareRegistry.js +6 -11
  224. package/dist/locale/RTLAwareRegistry.js.map +1 -0
  225. package/dist/locale/applyDirection.d.ts +10 -0
  226. package/dist/locale/applyDirection.js +7 -7
  227. package/dist/locale/applyDirection.js.map +1 -0
  228. package/dist/locale/directionChange.d.ts +15 -0
  229. package/dist/locale/directionChange.js +7 -15
  230. package/dist/locale/directionChange.js.map +1 -0
  231. package/dist/locale/getEffectiveDir.d.ts +2 -0
  232. package/dist/locale/getEffectiveDir.js +20 -24
  233. package/dist/locale/getEffectiveDir.js.map +1 -0
  234. package/dist/locale/getLocale.d.ts +7 -0
  235. package/dist/locale/getLocale.js +26 -29
  236. package/dist/locale/getLocale.js.map +1 -0
  237. package/dist/locale/languageChange.d.ts +5 -0
  238. package/dist/locale/languageChange.js +8 -16
  239. package/dist/locale/languageChange.js.map +1 -0
  240. package/dist/locale/nextFallbackLocale.d.ts +8 -0
  241. package/dist/locale/nextFallbackLocale.js +15 -19
  242. package/dist/locale/nextFallbackLocale.js.map +1 -0
  243. package/dist/locale/normalizeLocale.d.ts +7 -0
  244. package/dist/locale/normalizeLocale.js +34 -41
  245. package/dist/locale/normalizeLocale.js.map +1 -0
  246. package/dist/renderer/LitRenderer.d.ts +14 -0
  247. package/dist/renderer/LitRenderer.js +31 -22
  248. package/dist/renderer/LitRenderer.js.map +1 -0
  249. package/dist/renderer/executeTemplate.d.ts +13 -0
  250. package/dist/renderer/executeTemplate.js +20 -7
  251. package/dist/renderer/executeTemplate.js.map +1 -0
  252. package/dist/sap/base/Log.js +28 -29
  253. package/dist/sap/base/assert.js +5 -6
  254. package/dist/sap/base/security/URLListValidator.js +13 -2
  255. package/dist/sap/base/security/encodeCSS.js +14 -0
  256. package/dist/sap/base/security/encodeXML.js +23 -0
  257. package/dist/sap/base/strings/toHex.js +8 -0
  258. package/dist/sap/ui/thirdparty/caja-html-sanitizer.js +1 -1
  259. package/dist/theming/CustomStyle.d.ts +6 -0
  260. package/dist/theming/CustomStyle.js +39 -31
  261. package/dist/theming/CustomStyle.js.map +1 -0
  262. package/dist/theming/ThemeLoaded.d.ts +5 -0
  263. package/dist/theming/ThemeLoaded.js +8 -16
  264. package/dist/theming/ThemeLoaded.js.map +1 -0
  265. package/dist/theming/ThemeRegistered.d.ts +4 -0
  266. package/dist/theming/ThemeRegistered.js +11 -0
  267. package/dist/theming/ThemeRegistered.js.map +1 -0
  268. package/dist/theming/applyTheme.d.ts +2 -0
  269. package/dist/theming/applyTheme.js +62 -64
  270. package/dist/theming/applyTheme.js.map +1 -0
  271. package/dist/theming/getConstructableStyle.d.ts +9 -0
  272. package/dist/theming/getConstructableStyle.js +12 -17
  273. package/dist/theming/getConstructableStyle.js.map +1 -0
  274. package/dist/theming/getEffectiveLinksHrefs.d.ts +3 -0
  275. package/dist/theming/getEffectiveLinksHrefs.js +17 -0
  276. package/dist/theming/getEffectiveLinksHrefs.js.map +1 -0
  277. package/dist/theming/getEffectiveStyle.d.ts +3 -0
  278. package/dist/theming/getEffectiveStyle.js +25 -23
  279. package/dist/theming/getEffectiveStyle.js.map +1 -0
  280. package/dist/theming/getStylesString.d.ts +3 -0
  281. package/dist/theming/getStylesString.js +9 -11
  282. package/dist/theming/getStylesString.js.map +1 -0
  283. package/dist/theming/getThemeDesignerTheme.d.ts +7 -0
  284. package/dist/theming/getThemeDesignerTheme.js +73 -61
  285. package/dist/theming/getThemeDesignerTheme.js.map +1 -0
  286. package/dist/theming/preloadLinks.d.ts +3 -0
  287. package/dist/theming/preloadLinks.js +19 -0
  288. package/dist/theming/preloadLinks.js.map +1 -0
  289. package/dist/thirdparty/_merge.d.ts +2 -0
  290. package/dist/thirdparty/_merge.js +7 -4
  291. package/dist/thirdparty/_merge.js.map +1 -0
  292. package/dist/thirdparty/isPlainObject.d.ts +2 -0
  293. package/dist/thirdparty/isPlainObject.js +11 -10
  294. package/dist/thirdparty/isPlainObject.js.map +1 -0
  295. package/dist/thirdparty/merge.d.ts +2 -0
  296. package/dist/thirdparty/merge.js +4 -8
  297. package/dist/thirdparty/merge.js.map +1 -0
  298. package/dist/types/AnimationMode.d.ts +32 -0
  299. package/dist/types/AnimationMode.js +33 -6
  300. package/dist/types/AnimationMode.js.map +1 -0
  301. package/dist/types/CSSColor.d.ts +15 -0
  302. package/dist/types/CSSColor.js +14 -5
  303. package/dist/types/CSSColor.js.map +1 -0
  304. package/dist/types/CalendarType.d.ts +37 -0
  305. package/dist/types/CalendarType.js +35 -18
  306. package/dist/types/CalendarType.js.map +1 -0
  307. package/dist/types/DOMReference.d.ts +17 -0
  308. package/dist/types/DOMReference.js +25 -0
  309. package/dist/types/DOMReference.js.map +1 -0
  310. package/dist/types/DataType.d.ts +25 -0
  311. package/dist/types/DataType.js +33 -26
  312. package/dist/types/DataType.js.map +1 -0
  313. package/dist/types/Float.d.ts +17 -0
  314. package/dist/types/Float.js +17 -10
  315. package/dist/types/Float.js.map +1 -0
  316. package/dist/types/Integer.d.ts +17 -0
  317. package/dist/types/Integer.js +17 -9
  318. package/dist/types/Integer.js.map +1 -0
  319. package/dist/types/InvisibleMessageMode.d.ts +25 -0
  320. package/dist/types/InvisibleMessageMode.js +20 -23
  321. package/dist/types/InvisibleMessageMode.js.map +1 -0
  322. package/dist/types/ItemNavigationBehavior.d.ts +24 -0
  323. package/dist/types/ItemNavigationBehavior.js +22 -12
  324. package/dist/types/ItemNavigationBehavior.js.map +1 -0
  325. package/dist/types/NavigationMode.d.ts +32 -0
  326. package/dist/types/NavigationMode.js +33 -6
  327. package/dist/types/NavigationMode.js.map +1 -0
  328. package/dist/types/ValueState.d.ts +42 -0
  329. package/dist/types/ValueState.js +41 -19
  330. package/dist/types/ValueState.js.map +1 -0
  331. package/dist/types.d.ts +18 -0
  332. package/dist/types.js +2 -0
  333. package/dist/types.js.map +1 -0
  334. package/dist/updateShadowRoot.d.ts +8 -0
  335. package/dist/updateShadowRoot.js +31 -16
  336. package/dist/updateShadowRoot.js.map +1 -0
  337. package/dist/util/AriaLabelHelper.d.ts +15 -0
  338. package/dist/util/AriaLabelHelper.js +166 -36
  339. package/dist/util/AriaLabelHelper.js.map +1 -0
  340. package/dist/util/Caret.d.ts +7 -0
  341. package/dist/util/Caret.js +16 -38
  342. package/dist/util/Caret.js.map +1 -0
  343. package/dist/util/ColorConversion.d.ts +30 -0
  344. package/dist/util/ColorConversion.js +315 -348
  345. package/dist/util/ColorConversion.js.map +1 -0
  346. package/dist/util/FetchHelper.d.ts +3 -0
  347. package/dist/util/FetchHelper.js +19 -25
  348. package/dist/util/FetchHelper.js.map +1 -0
  349. package/dist/util/FocusableElements.d.ts +4 -0
  350. package/dist/util/FocusableElements.js +67 -72
  351. package/dist/util/FocusableElements.js.map +1 -0
  352. package/{src/util/HTMLSanitizer.js → dist/util/HTMLSanitizer.d.ts} +1 -5
  353. package/dist/util/HTMLSanitizer.js +4 -5
  354. package/dist/util/HTMLSanitizer.js.map +1 -0
  355. package/dist/util/InvisibleMessage.d.ts +10 -0
  356. package/dist/util/InvisibleMessage.js +42 -44
  357. package/dist/util/InvisibleMessage.js.map +1 -0
  358. package/dist/util/PopupUtils.d.ts +7 -0
  359. package/dist/util/PopupUtils.js +58 -77
  360. package/dist/util/PopupUtils.js.map +1 -0
  361. package/dist/util/SlotsHelper.d.ts +9 -0
  362. package/dist/util/SlotsHelper.js +22 -35
  363. package/dist/util/SlotsHelper.js.map +1 -0
  364. package/dist/util/StringHelper.d.ts +3 -0
  365. package/dist/util/StringHelper.js +17 -20
  366. package/dist/util/StringHelper.js.map +1 -0
  367. package/dist/util/TabbableElements.d.ts +17 -0
  368. package/dist/util/TabbableElements.js +53 -43
  369. package/dist/util/TabbableElements.js.map +1 -0
  370. package/dist/util/arraysAreEqual.d.ts +2 -0
  371. package/dist/util/arraysAreEqual.js +10 -12
  372. package/dist/util/arraysAreEqual.js.map +1 -0
  373. package/{src/util/clamp.js → dist/util/clamp.d.ts} +1 -4
  374. package/dist/util/clamp.js +2 -2
  375. package/dist/util/clamp.js.map +1 -0
  376. package/dist/util/createLinkInHead.d.ts +7 -0
  377. package/dist/util/createLinkInHead.js +21 -0
  378. package/dist/util/createLinkInHead.js.map +1 -0
  379. package/dist/util/createStyleInHead.d.ts +8 -0
  380. package/dist/util/createStyleInHead.js +10 -10
  381. package/dist/util/createStyleInHead.js.map +1 -0
  382. package/dist/util/debounce.d.ts +2 -0
  383. package/dist/util/debounce.js +6 -8
  384. package/dist/util/debounce.js.map +1 -0
  385. package/dist/util/detectNavigatorLanguage.d.ts +2 -0
  386. package/dist/util/detectNavigatorLanguage.js +7 -10
  387. package/dist/util/detectNavigatorLanguage.js.map +1 -0
  388. package/dist/util/escapeRegex.d.ts +8 -0
  389. package/dist/util/escapeRegex.js +11 -0
  390. package/dist/util/escapeRegex.js.map +1 -0
  391. package/dist/util/formatMessage.d.ts +2 -0
  392. package/dist/util/formatMessage.js +15 -19
  393. package/dist/util/formatMessage.js.map +1 -0
  394. package/dist/util/generateHighlightedMarkup.d.ts +9 -0
  395. package/dist/util/generateHighlightedMarkup.js +41 -0
  396. package/dist/util/generateHighlightedMarkup.js.map +1 -0
  397. package/dist/util/getActiveElement.d.ts +2 -0
  398. package/dist/util/getActiveElement.js +6 -8
  399. package/dist/util/getActiveElement.js.map +1 -0
  400. package/dist/util/getClassCopy.d.ts +400 -0
  401. package/dist/util/getClassCopy.js +7 -7
  402. package/dist/util/getClassCopy.js.map +1 -0
  403. package/dist/util/getDesigntimePropertyAsArray.d.ts +2 -0
  404. package/dist/util/getDesigntimePropertyAsArray.js +4 -3
  405. package/dist/util/getDesigntimePropertyAsArray.js.map +1 -0
  406. package/dist/util/getEffectiveContentDensity.d.ts +2 -0
  407. package/dist/util/getEffectiveContentDensity.js +2 -3
  408. package/dist/util/getEffectiveContentDensity.js.map +1 -0
  409. package/dist/util/getEffectiveScrollbarStyle.d.ts +2 -0
  410. package/dist/util/getEffectiveScrollbarStyle.js +4 -0
  411. package/dist/util/getEffectiveScrollbarStyle.js.map +1 -0
  412. package/dist/util/getFastNavigationGroups.d.ts +2 -0
  413. package/dist/util/getFastNavigationGroups.js +51 -0
  414. package/dist/util/getFastNavigationGroups.js.map +1 -0
  415. package/{src/util/getFileExtension.js → dist/util/getFileExtension.d.ts} +3 -12
  416. package/dist/util/getFileExtension.js +9 -11
  417. package/dist/util/getFileExtension.js.map +1 -0
  418. package/dist/util/getNormalizedTarget.d.ts +7 -0
  419. package/dist/util/getNormalizedTarget.js +14 -0
  420. package/dist/util/getNormalizedTarget.js.map +1 -0
  421. package/dist/util/getSingletonElementInstance.d.ts +11 -0
  422. package/dist/util/getSingletonElementInstance.js +17 -11
  423. package/dist/util/getSingletonElementInstance.js.map +1 -0
  424. package/dist/util/isElementClickable.d.ts +2 -0
  425. package/dist/util/isElementClickable.js +16 -0
  426. package/dist/util/isElementClickable.js.map +1 -0
  427. package/dist/util/isElementHidden.d.ts +2 -0
  428. package/dist/util/isElementHidden.js +8 -0
  429. package/dist/util/isElementHidden.js.map +1 -0
  430. package/dist/util/isElementInView.d.ts +6 -0
  431. package/dist/util/isElementInView.js +6 -9
  432. package/dist/util/isElementInView.js.map +1 -0
  433. package/dist/util/isElementTabbable.d.ts +9 -0
  434. package/dist/util/isElementTabbable.js +30 -0
  435. package/dist/util/isElementTabbable.js.map +1 -0
  436. package/dist/util/isValidPropertyName.d.ts +8 -0
  437. package/dist/util/isValidPropertyName.js +16 -17
  438. package/dist/util/isValidPropertyName.js.map +1 -0
  439. package/dist/util/whenDOMReady.d.ts +2 -0
  440. package/dist/util/whenDOMReady.js +11 -10
  441. package/dist/util/whenDOMReady.js.map +1 -0
  442. package/dist/util/willShowContent.d.ts +2 -0
  443. package/dist/util/willShowContent.js +7 -0
  444. package/dist/util/willShowContent.js.map +1 -0
  445. package/dist/validateThemeRoot.d.ts +2 -0
  446. package/dist/validateThemeRoot.js +48 -0
  447. package/dist/validateThemeRoot.js.map +1 -0
  448. package/index.js +227 -1
  449. package/lib/generate-asset-parameters/index.js +11 -5
  450. package/lib/generate-styles/index.js +31 -0
  451. package/lib/generate-version-info/index.js +32 -0
  452. package/package-scripts.cjs +71 -0
  453. package/package.json +9 -6
  454. package/src/css/BusyIndicator.css +80 -0
  455. package/src/css/FontFace.css +66 -0
  456. package/src/css/OverrideFontFace.css +32 -0
  457. package/src/css/SystemCSSVars.css +17 -0
  458. package/tsconfig.json +14 -0
  459. package/used-modules.txt +4 -1
  460. package/config/rollup.config.js +0 -1
  461. package/config/wdio.conf.js +0 -1
  462. package/dist/RenderScheduler.js +0 -44
  463. package/dist/animations/config.js +0 -5
  464. package/dist/isLegacyBrowser.js +0 -3
  465. package/dist/resources/bundle.esm.js +0 -37
  466. package/dist/resources/bundle.esm.js.map +0 -1
  467. package/dist/test-resources/assets/Themes.js +0 -17
  468. package/dist/test-resources/elements/Child.js +0 -35
  469. package/dist/test-resources/elements/Generic.js +0 -84
  470. package/dist/test-resources/elements/GenericExt.js +0 -26
  471. package/dist/test-resources/elements/NoShadowDOM.js +0 -13
  472. package/dist/test-resources/elements/Parent.js +0 -41
  473. package/dist/test-resources/elements/WithStaticArea.js +0 -77
  474. package/dist/test-resources/pages/AllTestElements.html +0 -42
  475. package/dist/test-resources/pages/Configuration.html +0 -18
  476. package/dist/test-resources/pages/ConfigurationScript.html +0 -34
  477. package/dist/test-resources/pages/assets/messagebundle_de.properties +0 -1
  478. package/dist/test-resources/pages/assets/messagebundle_en.properties +0 -1
  479. package/dist/test-resources/pages/assets/messagebundle_es.properties +0 -1
  480. package/dist/test-resources/pages/assets/messagebundle_fr.properties +0 -1
  481. package/dist/test-resources/pages/i18n.html +0 -33
  482. package/dist/test-resources/specs/ConfigurationChange.spec.js +0 -27
  483. package/dist/test-resources/specs/ConfigurationScript.spec.js +0 -63
  484. package/dist/test-resources/specs/ConfigurationURL.spec.js +0 -93
  485. package/dist/test-resources/specs/CustomTheme.spec.js +0 -27
  486. package/dist/test-resources/specs/EventProvider.spec.js +0 -63
  487. package/dist/test-resources/specs/StaticArea.spec.js +0 -78
  488. package/dist/test-resources/specs/Theming.spec.js +0 -33
  489. package/dist/test-resources/specs/UI5ElementInvalidation.js +0 -242
  490. package/dist/test-resources/specs/UI5ElementLifecycle.js +0 -98
  491. package/dist/test-resources/specs/UI5ElementListenForChildPropChanges.spec.js +0 -75
  492. package/dist/test-resources/specs/UI5ElementMetadataExt.js +0 -42
  493. package/dist/test-resources/specs/UI5ElementPropertyValidation.js +0 -14
  494. package/dist/test-resources/specs/UI5ElementPropsAndAttrs.spec.js +0 -67
  495. package/dist/test-resources/specs/UI5ElementShadowDOM.js +0 -24
  496. package/dist/test-resources/specs/UI5ElementSlots.js +0 -36
  497. package/dist/theming/createThemePropertiesStyleTag.js +0 -16
  498. package/dist/types/CSSSize.js +0 -9
  499. package/dist/types/PopupState.js +0 -37
  500. package/dist/util/encodeCSS.js +0 -24
  501. package/dist/util/findNodeOwner.js +0 -35
  502. package/dist/util/isDescendantOf.js +0 -15
  503. package/dist/util/isNodeClickable.js +0 -19
  504. package/dist/util/isNodeHidden.js +0 -9
  505. package/dist/util/isNodeTabbable.js +0 -28
  506. package/dist/util/setToArray.js +0 -10
  507. package/hash.txt +0 -1
  508. package/package-scripts.js +0 -62
  509. package/src/Boot.js +0 -43
  510. package/src/CustomElementsRegistry.js +0 -39
  511. package/src/DOMObserver.js +0 -65
  512. package/src/Device.js +0 -107
  513. package/src/EventProvider.js +0 -85
  514. package/src/FeaturesRegistry.js +0 -11
  515. package/src/FontFace.js +0 -130
  516. package/src/InitialConfiguration.js +0 -166
  517. package/src/Keys.js +0 -248
  518. package/src/ManagedStyles.js +0 -36
  519. package/src/MediaRange.js +0 -109
  520. package/src/PropertiesFileFormat.js +0 -95
  521. package/src/Render.js +0 -173
  522. package/src/RenderQueue.js +0 -66
  523. package/src/RenderScheduler.js +0 -44
  524. package/src/StaticArea.js +0 -3
  525. package/src/StaticAreaItem.js +0 -107
  526. package/src/SystemCSSVars.js +0 -29
  527. package/src/UI5Element.js +0 -1026
  528. package/src/UI5ElementMetadata.js +0 -311
  529. package/src/animations/AnimationQueue.js +0 -42
  530. package/src/animations/animate.js +0 -53
  531. package/src/animations/config.js +0 -5
  532. package/src/animations/scroll.js +0 -28
  533. package/src/animations/slideDown.js +0 -79
  534. package/src/animations/slideUp.js +0 -71
  535. package/src/asset-registries/Icons.js +0 -128
  536. package/src/asset-registries/Illustrations.js +0 -30
  537. package/src/asset-registries/LocaleData.js +0 -159
  538. package/src/asset-registries/Themes.js +0 -78
  539. package/src/asset-registries/i18n.js +0 -121
  540. package/src/config/AnimationMode.js +0 -23
  541. package/src/config/CalendarType.js +0 -18
  542. package/src/config/FormatSettings.js +0 -13
  543. package/src/config/Language.js +0 -68
  544. package/src/config/NoConflict.js +0 -51
  545. package/src/config/RTL.js +0 -31
  546. package/src/config/Theme.js +0 -28
  547. package/src/delegate/ItemNavigation.js +0 -351
  548. package/src/delegate/ResizeHandler.js +0 -106
  549. package/src/delegate/ScrollEnablement.js +0 -188
  550. package/src/features/OpenUI5Support.js +0 -125
  551. package/src/getSharedResource.js +0 -30
  552. package/src/i18nBundle.js +0 -86
  553. package/src/isLegacyBrowser.js +0 -3
  554. package/src/locale/Locale.js +0 -91
  555. package/src/locale/RTLAwareRegistry.js +0 -14
  556. package/src/locale/applyDirection.js +0 -17
  557. package/src/locale/directionChange.js +0 -32
  558. package/src/locale/getEffectiveDir.js +0 -28
  559. package/src/locale/getLocale.js +0 -41
  560. package/src/locale/languageChange.js +0 -22
  561. package/src/locale/nextFallbackLocale.js +0 -28
  562. package/src/locale/normalizeLocale.js +0 -54
  563. package/src/renderer/LitRenderer.js +0 -32
  564. package/src/renderer/executeTemplate.js +0 -17
  565. package/src/theming/CustomStyle.js +0 -40
  566. package/src/theming/ThemeLoaded.js +0 -22
  567. package/src/theming/applyTheme.js +0 -78
  568. package/src/theming/createThemePropertiesStyleTag.js +0 -16
  569. package/src/theming/getConstructableStyle.js +0 -30
  570. package/src/theming/getEffectiveStyle.js +0 -30
  571. package/src/theming/getStylesString.js +0 -13
  572. package/src/theming/getThemeDesignerTheme.js +0 -68
  573. package/src/thirdparty/_merge.js +0 -32
  574. package/src/thirdparty/isPlainObject.js +0 -18
  575. package/src/thirdparty/merge.js +0 -10
  576. package/src/types/AnimationMode.js +0 -7
  577. package/src/types/CSSColor.js +0 -9
  578. package/src/types/CSSSize.js +0 -9
  579. package/src/types/CalendarType.js +0 -22
  580. package/src/types/DataType.js +0 -37
  581. package/src/types/Float.js +0 -14
  582. package/src/types/Integer.js +0 -13
  583. package/src/types/InvisibleMessageMode.js +0 -30
  584. package/src/types/ItemNavigationBehavior.js +0 -16
  585. package/src/types/NavigationMode.js +0 -7
  586. package/src/types/PopupState.js +0 -37
  587. package/src/types/ValueState.js +0 -22
  588. package/src/updateShadowRoot.js +0 -26
  589. package/src/util/AriaLabelHelper.js +0 -41
  590. package/src/util/Caret.js +0 -45
  591. package/src/util/ColorConversion.js +0 -370
  592. package/src/util/FetchHelper.js +0 -31
  593. package/src/util/FocusableElements.js +0 -77
  594. package/src/util/InvisibleMessage.js +0 -58
  595. package/src/util/PopupUtils.js +0 -93
  596. package/src/util/SlotsHelper.js +0 -43
  597. package/src/util/StringHelper.js +0 -26
  598. package/src/util/TabbableElements.js +0 -47
  599. package/src/util/arraysAreEqual.js +0 -15
  600. package/src/util/createStyleInHead.js +0 -18
  601. package/src/util/debounce.js +0 -17
  602. package/src/util/detectNavigatorLanguage.js +0 -13
  603. package/src/util/encodeCSS.js +0 -24
  604. package/src/util/findNodeOwner.js +0 -35
  605. package/src/util/formatMessage.js +0 -23
  606. package/src/util/getActiveElement.js +0 -11
  607. package/src/util/getClassCopy.js +0 -10
  608. package/src/util/getDesigntimePropertyAsArray.js +0 -4
  609. package/src/util/getEffectiveContentDensity.js +0 -5
  610. package/src/util/getSingletonElementInstance.js +0 -13
  611. package/src/util/isDescendantOf.js +0 -15
  612. package/src/util/isElementInView.js +0 -15
  613. package/src/util/isNodeClickable.js +0 -19
  614. package/src/util/isNodeHidden.js +0 -9
  615. package/src/util/isNodeTabbable.js +0 -28
  616. package/src/util/isValidPropertyName.js +0 -29
  617. package/src/util/setToArray.js +0 -10
  618. package/src/util/whenDOMReady.js +0 -13
  619. /package/{config/.eslintrc.js → .eslintrc.cjs} +0 -0
package/src/config/RTL.js DELETED
@@ -1,31 +0,0 @@
1
- import { getRTL as getConfiguredRTL } from "../InitialConfiguration.js";
2
- import { getLanguage } from "./Language.js";
3
- import getDesigntimePropertyAsArray from "../util/getDesigntimePropertyAsArray.js";
4
- import detectNavigatorLanguage from "../util/detectNavigatorLanguage.js";
5
-
6
- const M_ISO639_OLD_TO_NEW = {
7
- "iw": "he",
8
- "ji": "yi",
9
- "in": "id",
10
- "sh": "sr",
11
- };
12
-
13
- const A_RTL_LOCALES = getDesigntimePropertyAsArray("$cldr-rtl-locales:ar,fa,he$") || [];
14
-
15
- const impliesRTL = language => {
16
- language = (language && M_ISO639_OLD_TO_NEW[language]) || language;
17
-
18
- return A_RTL_LOCALES.indexOf(language) >= 0;
19
- };
20
-
21
- const getRTL = () => {
22
- const configurationRTL = getConfiguredRTL();
23
-
24
- if (configurationRTL !== null) {
25
- return !!configurationRTL;
26
- }
27
-
28
- return impliesRTL(getLanguage() || detectNavigatorLanguage());
29
- };
30
-
31
- export { getRTL }; // eslint-disable-line
@@ -1,28 +0,0 @@
1
- import { getTheme as getConfiguredTheme } from "../InitialConfiguration.js";
2
- import applyTheme from "../theming/applyTheme.js";
3
-
4
- let theme;
5
-
6
- const getTheme = () => {
7
- if (theme === undefined) {
8
- theme = getConfiguredTheme();
9
- }
10
-
11
- return theme;
12
- };
13
-
14
- const setTheme = async newTheme => {
15
- if (theme === newTheme) {
16
- return;
17
- }
18
-
19
- theme = newTheme;
20
-
21
- // Update CSS Custom Properties
22
- await applyTheme(theme);
23
- };
24
-
25
- export {
26
- getTheme,
27
- setTheme,
28
- };
@@ -1,351 +0,0 @@
1
- import {
2
- isDown,
3
- isUp,
4
- isLeft,
5
- isRight,
6
- isHome,
7
- isEnd,
8
- isPageDown,
9
- isPageUp,
10
- } from "../Keys.js";
11
- import getActiveElement from "../util/getActiveElement.js";
12
-
13
- import NavigationMode from "../types/NavigationMode.js";
14
- import ItemNavigationBehavior from "../types/ItemNavigationBehavior.js";
15
-
16
- /**
17
- * The ItemNavigation class manages the calculations to determine the correct "tabindex" for a group of related items inside a root component.
18
- * Important: ItemNavigation only does the calculations and does not change "tabindex" directly, this is a responsibility of the developer.
19
- *
20
- * The keys that trigger ItemNavigation are:
21
- * - Up/down
22
- * - Left/right
23
- * - Home/End
24
- *
25
- * Usage:
26
- * 1) Use the "getItemsCallback" constructor property to pass a callback to ItemNavigation, which, whenever called, will return the list of items to navigate among.
27
- *
28
- * Each item passed to ItemNavigation via "getItemsCallback" must be:
29
- * - A) either a UI5Element with a "_tabIndex" property
30
- * - B) or an Object with "id" and "_tabIndex" properties which represents a part of the root component's shadow DOM.
31
- * The "id" must be a valid ID within the shadow root of the component ItemNavigation operates on.
32
- * This object must not be a DOM object because, as said, ItemNavigation will not set "tabindex" on it. It must be a representation of a DOM object only
33
- * and the developer has the responsibility to update the "tabindex" in the component's DOM.
34
- * - C) a combination of the above
35
- *
36
- * Whenever the user navigates with the keyboard, ItemNavigation will modify the "_tabIndex" properties of the items.
37
- * It is the items' responsibilities to re-render themselves and apply the correct value of "tabindex" (i.e. to map the "_tabIndex" ItemNavigation set to them to the "tabindex" property).
38
- * If the items of the ItemNavigation are UI5Elements themselves, this can happen naturally since they will be invalidated by their "_tabIndex" property.
39
- * If the items are Objects with "id" and "_tabIndex" however, it is the developer's responsibility to apply these and the easiest way is to have the root component invalidated by ItemNavigation.
40
- * To do so, set the "affectedPropertiesNames" constructor property to point to one or more of the root component's properties that need refreshing when "_tabIndex" is changed deeply.
41
- *
42
- * 2) Call the "setCurrentItem" method of ItemNavigation whenever you want to change the current item.
43
- * This is most commonly required if the user for example clicks on an item and thus selects it directly.
44
- * Pass as the only argument to "setCurrentItem" the item that becomes current (must be one of the items, returned by "getItemsCallback").
45
- *
46
- * @class
47
- * @public
48
- */
49
- class ItemNavigation {
50
- /**
51
- *
52
- * @param rootWebComponent the component to operate on (component that slots or contains within its shadow root the items the user navigates among)
53
- * @param options Object with configuration options:
54
- * - currentIndex: the index of the item that will be initially selected (from which navigation will begin)
55
- * - navigationMode (Auto|Horizontal|Vertical): whether the items are displayed horizontally (Horizontal), vertically (Vertical) or as a matrix (Auto) meaning the user can navigate in both directions (up/down and left/right)
56
- * - rowSize: tells how many items per row there are when the items are not rendered as a flat list but rather as a matrix. Relevant for navigationMode=Auto
57
- * - skipItemsSize: tells how many items upon PAGE_UP and PAGE_DOWN should be skipped to applying the focus on the next item
58
- * - behavior (Static|Cycling): tells what to do when trying to navigate beyond the first and last items
59
- * Static means that nothing happens if the user tries to navigate beyond the first/last item.
60
- * Cycling means that when the user navigates beyond the last item they go to the first and vice versa.
61
- * - getItemsCallback: function that, when called, returns an array with all items the user can navigate among
62
- * - affectedPropertiesNames: a list of metadata properties on the root component which, upon user navigation, will be reassigned by address thus causing the root component to invalidate
63
- */
64
- constructor(rootWebComponent, options = {}) {
65
- this._setRootComponent(rootWebComponent);
66
- this._initOptions(options);
67
- }
68
-
69
- _setRootComponent(rootWebComponent) {
70
- if (!rootWebComponent.isUI5Element) {
71
- throw new Error("The root web component must be a UI5 Element instance");
72
- }
73
- this.rootWebComponent = rootWebComponent;
74
- this.rootWebComponent.addEventListener("keydown", this._onkeydown.bind(this));
75
- this.rootWebComponent._onComponentStateFinalized = () => {
76
- this._init();
77
- };
78
- }
79
-
80
- _initOptions(options) {
81
- if (typeof options.getItemsCallback !== "function") {
82
- throw new Error("getItemsCallback is required");
83
- }
84
-
85
- this._getItems = options.getItemsCallback;
86
- this._currentIndex = options.currentIndex || 0;
87
- this._rowSize = options.rowSize || 1;
88
- this._behavior = options.behavior || ItemNavigationBehavior.Static;
89
- this._navigationMode = options.navigationMode || NavigationMode.Auto;
90
- this._affectedPropertiesNames = options.affectedPropertiesNames || [];
91
- this._skipItemsSize = options.skipItemsSize || null;
92
- }
93
-
94
- /**
95
- * Call this method to set a new "current" (selected) item in the item navigation
96
- * Note: the item passed to this function must be one of the items, returned by the getItemsCallback function
97
- *
98
- * @public
99
- * @param current the new selected item
100
- */
101
- setCurrentItem(current) {
102
- const currentItemIndex = this._getItems().indexOf(current);
103
-
104
- if (currentItemIndex === -1) {
105
- console.warn(`The provided item is not managed by ItemNavigation`, current); // eslint-disable-line
106
- return;
107
- }
108
-
109
- this._currentIndex = currentItemIndex;
110
- this._applyTabIndex();
111
- }
112
-
113
- /**
114
- * Call this method to dynamically change the row size
115
- *
116
- * @public
117
- * @param newRowSize
118
- */
119
- setRowSize(newRowSize) {
120
- this._rowSize = newRowSize;
121
- }
122
-
123
- _init() {
124
- this._getItems().forEach((item, idx) => {
125
- item._tabIndex = (idx === this._currentIndex) ? "0" : "-1";
126
- });
127
- }
128
-
129
- _onkeydown(event) {
130
- if (!this._canNavigate()) {
131
- return;
132
- }
133
-
134
- const horizontalNavigationOn = this._navigationMode === NavigationMode.Horizontal || this._navigationMode === NavigationMode.Auto;
135
- const verticalNavigationOn = this._navigationMode === NavigationMode.Vertical || this._navigationMode === NavigationMode.Auto;
136
-
137
- if (isUp(event) && verticalNavigationOn) {
138
- this._handleUp();
139
- } else if (isDown(event) && verticalNavigationOn) {
140
- this._handleDown();
141
- } else if (isLeft(event) && horizontalNavigationOn) {
142
- this._handleLeft();
143
- } else if (isRight(event) && horizontalNavigationOn) {
144
- this._handleRight();
145
- } else if (isHome(event)) {
146
- this._handleHome();
147
- } else if (isEnd(event)) {
148
- this._handleEnd();
149
- } else if (isPageUp(event)) {
150
- this._handlePageUp();
151
- } else if (isPageDown(event)) {
152
- this._handlePageDown();
153
- } else {
154
- return; // if none of the supported keys is pressed, we don't want to prevent the event or update the item navigation
155
- }
156
-
157
- event.preventDefault();
158
- this._applyTabIndex();
159
- this._focusCurrentItem();
160
- }
161
-
162
- _handleUp() {
163
- const itemsLength = this._getItems().length;
164
- if (this._currentIndex - this._rowSize >= 0) { // no border reached, just decrease the index by a row
165
- this._currentIndex -= this._rowSize;
166
- return;
167
- }
168
-
169
- if (this._behavior === ItemNavigationBehavior.Cyclic) { // if cyclic, go to the **last** item in the **previous** column
170
- const firstItemInThisColumnIndex = this._currentIndex % this._rowSize;
171
- const firstItemInPreviousColumnIndex = firstItemInThisColumnIndex === 0 ? this._rowSize - 1 : firstItemInThisColumnIndex - 1; // find the first item in the previous column (if the current column is the first column -> move to the last column)
172
- const rows = Math.ceil(itemsLength / this._rowSize); // how many rows there are (even if incomplete, f.e. for 14 items and _rowSize=4 -> 4 rows total, although only 2 items on the last row)
173
- let lastItemInPreviousColumnIndex = firstItemInPreviousColumnIndex + (rows - 1) * this._rowSize; // multiply rows by columns, and add the column's first item's index
174
- if (lastItemInPreviousColumnIndex > itemsLength - 1) { // for incomplete rows, use the previous row's last item, as for them the last item is missing
175
- lastItemInPreviousColumnIndex -= this._rowSize;
176
- }
177
- this._currentIndex = lastItemInPreviousColumnIndex;
178
- } else { // not cyclic, so just go to the first item
179
- this._currentIndex = 0;
180
- }
181
- }
182
-
183
- _handleDown() {
184
- const itemsLength = this._getItems().length;
185
- if (this._currentIndex + this._rowSize < itemsLength) { // no border reached, just increase the index by a row
186
- this._currentIndex += this._rowSize;
187
- return;
188
- }
189
-
190
- if (this._behavior === ItemNavigationBehavior.Cyclic) { // if cyclic, go to the **first** item in the **next** column
191
- const firstItemInThisColumnIndex = this._currentIndex % this._rowSize; // find the first item in the current column first
192
- const firstItemInNextColumnIndex = (firstItemInThisColumnIndex + 1) % this._rowSize; // to get the first item in the next column, just increase the index by 1. The modulo by rows is for the case when we are at the last column
193
- this._currentIndex = firstItemInNextColumnIndex;
194
- } else { // not cyclic, so just go to the last item
195
- this._currentIndex = itemsLength - 1;
196
- }
197
- }
198
-
199
- _handleLeft() {
200
- const itemsLength = this._getItems().length;
201
- if (this._currentIndex > 0) {
202
- this._currentIndex -= 1;
203
- return;
204
- }
205
-
206
- if (this._behavior === ItemNavigationBehavior.Cyclic) { // go to the first item in the next column
207
- this._currentIndex = itemsLength - 1;
208
- }
209
- }
210
-
211
- _handleRight() {
212
- const itemsLength = this._getItems().length;
213
- if (this._currentIndex < itemsLength - 1) {
214
- this._currentIndex += 1;
215
- return;
216
- }
217
-
218
- if (this._behavior === ItemNavigationBehavior.Cyclic) { // go to the first item in the next column
219
- this._currentIndex = 0;
220
- }
221
- }
222
-
223
- _handleHome() {
224
- const homeEndRange = this._rowSize > 1 ? this._rowSize : this._getItems().length;
225
- this._currentIndex -= this._currentIndex % homeEndRange;
226
- }
227
-
228
- _handleEnd() {
229
- const homeEndRange = this._rowSize > 1 ? this._rowSize : this._getItems().length;
230
- this._currentIndex += (homeEndRange - 1 - this._currentIndex % homeEndRange); // eslint-disable-line
231
- }
232
-
233
- _handlePageUp() {
234
- if (this._rowSize > 1) {
235
- // eslint-disable-next-line
236
- // TODO: handle page up on matrix (grid) layout - ColorPalette, ProductSwitch.
237
- return;
238
- }
239
- this._handlePageUpFlat();
240
- }
241
-
242
- _handlePageDown() {
243
- if (this._rowSize > 1) {
244
- // eslint-disable-next-line
245
- // TODO: handle page up on matrix (grid) layout - ColorPalette, ProductSwitch.
246
- return;
247
- }
248
- this._handlePageDownFlat();
249
- }
250
-
251
- /**
252
- * Handles PAGE_UP in a flat list-like structure, both vertically and horizontally.
253
- */
254
- _handlePageUpFlat() {
255
- if (this._skipItemsSize === null) {
256
- // Move the focus to the very top (as Home).
257
- this._currentIndex -= this._currentIndex;
258
- }
259
-
260
- if (this._currentIndex + 1 > this._skipItemsSize) {
261
- // When there are more than "skipItemsSize" number of items to the top,
262
- // move the focus up/left with the predefined number.
263
- this._currentIndex -= this._skipItemsSize;
264
- } else {
265
- // Otherwise, move the focus to the very top (as Home).
266
- this._currentIndex -= this._currentIndex;
267
- }
268
- }
269
-
270
- /**
271
- * Handles PAGE_DOWN in a flat list-like structure, both vertically and horizontally.
272
- */
273
- _handlePageDownFlat() {
274
- if (this._skipItemsSize === null) {
275
- // Move the focus to the very bottom (as End).
276
- this._currentIndex = this._getItems().length - 1;
277
- }
278
-
279
- const currentToEndRange = this._getItems().length - this._currentIndex - 1;
280
-
281
- if (currentToEndRange > this._skipItemsSize) {
282
- // When there are more than "skipItemsSize" number of items until the bottom,
283
- // move the focus down/right with the predefined number.
284
- this._currentIndex += this._skipItemsSize;
285
- } else {
286
- // Otherwise, move the focus to the very bottom (as End).
287
- this._currentIndex = this._getItems().length - 1;
288
- }
289
- }
290
-
291
- _applyTabIndex() {
292
- const items = this._getItems();
293
- for (let i = 0; i < items.length; i++) {
294
- items[i]._tabIndex = i === this._currentIndex ? "0" : "-1";
295
- }
296
-
297
- this._affectedPropertiesNames.forEach(propName => {
298
- const prop = this.rootWebComponent[propName];
299
- this.rootWebComponent[propName] = Array.isArray(prop) ? [...prop] : { ...prop };
300
- });
301
- }
302
-
303
- _focusCurrentItem() {
304
- const currentItem = this._getCurrentItem();
305
- if (currentItem) {
306
- currentItem.focus();
307
- }
308
- }
309
-
310
- _canNavigate() {
311
- const currentItem = this._getCurrentItem();
312
- const activeElement = getActiveElement();
313
-
314
- return currentItem && currentItem === activeElement;
315
- }
316
-
317
- _getCurrentItem() {
318
- const items = this._getItems();
319
-
320
- if (!items.length) {
321
- return null;
322
- }
323
-
324
- // normalize the index
325
- while (this._currentIndex >= items.length) {
326
- this._currentIndex -= this._rowSize;
327
- }
328
-
329
- if (this._currentIndex < 0) {
330
- this._currentIndex = 0;
331
- }
332
-
333
- const currentItem = items[this._currentIndex];
334
-
335
- if (!currentItem) {
336
- return;
337
- }
338
-
339
- if (currentItem.isUI5Element) {
340
- return currentItem.getFocusDomRef();
341
- }
342
-
343
- if (!this.rootWebComponent.getDomRef()) {
344
- return;
345
- }
346
-
347
- return this.rootWebComponent.getDomRef().querySelector(`#${currentItem.id}`);
348
- }
349
- }
350
-
351
- export default ItemNavigation;
@@ -1,106 +0,0 @@
1
- let resizeObserver;
2
- const observedElements = new Map();
3
-
4
- const getResizeObserver = () => {
5
- if (!resizeObserver) {
6
- resizeObserver = new window.ResizeObserver(entries => {
7
- entries.forEach(entry => {
8
- const callbacks = observedElements.get(entry.target);
9
- callbacks.forEach(callback => callback());
10
- });
11
- });
12
- }
13
- return resizeObserver;
14
- };
15
-
16
- let observe = (element, callback) => {
17
- const callbacks = observedElements.get(element) || [];
18
-
19
- // if no callbacks have been added for this element - start observing it
20
- if (!callbacks.length) {
21
- getResizeObserver().observe(element);
22
- }
23
-
24
- // save the callbacks in an array
25
- observedElements.set(element, [...callbacks, callback]);
26
- };
27
-
28
- let unobserve = (element, callback) => {
29
- const callbacks = observedElements.get(element) || [];
30
- if (callbacks.length === 0) {
31
- return;
32
- }
33
-
34
- const filteredCallbacks = callbacks.filter(fn => fn !== callback);
35
- if (filteredCallbacks.length === 0) {
36
- getResizeObserver().unobserve(element);
37
- observedElements.delete(element);
38
- } else {
39
- observedElements.set(element, filteredCallbacks);
40
- }
41
- };
42
-
43
- /**
44
- * Allows to register/deregister resize observers for a DOM element
45
- *
46
- * @public
47
- * @class
48
- */
49
- class ResizeHandler {
50
- /**
51
- * @static
52
- * @public
53
- * @param {*} element UI5 Web Component or DOM Element to be observed
54
- * @param {*} callback Callback to be executed
55
- */
56
- static register(element, callback) {
57
- if (element.isUI5Element) {
58
- element = element.getDomRef();
59
- }
60
-
61
- if (element instanceof HTMLElement) {
62
- observe(element, callback);
63
- } else {
64
- console.warn("Cannot register ResizeHandler for element", element); // eslint-disable-line
65
- }
66
- }
67
-
68
- /**
69
- * @static
70
- * @public
71
- * @param {*} element UI5 Web Component or DOM Element to be unobserved
72
- * @param {*} callback Callback to be removed
73
- */
74
- static deregister(element, callback) {
75
- if (element.isUI5Element) {
76
- element = element.getDomRef();
77
- }
78
-
79
- if (element instanceof HTMLElement) {
80
- unobserve(element, callback);
81
- } else {
82
- console.warn("Cannot deregister ResizeHandler for element", element); // eslint-disable-line
83
- }
84
- }
85
- }
86
-
87
- /**
88
- * Set a function to be executed whenever a DOM node needs to be observed for size change.
89
- * @public
90
- * @param fn
91
- */
92
- const setResizeHandlerObserveFn = fn => {
93
- observe = fn;
94
- };
95
-
96
- /**
97
- * Set a function to be executed whenever a DOM node needs to no longer be observed for size changes
98
- * @public
99
- * @param fn
100
- */
101
- const setResizeHandlerUnobserveFn = fn => {
102
- unobserve = fn;
103
- };
104
-
105
- export default ResizeHandler;
106
- export { setResizeHandlerObserveFn, setResizeHandlerUnobserveFn };
@@ -1,188 +0,0 @@
1
- import { supportsTouch } from "../Device.js";
2
- import EventProvider from "../EventProvider.js";
3
- import scroll from "../animations/scroll.js";
4
-
5
- const scrollEventName = "scroll";
6
- const touchEndEventName = supportsTouch() ? "touchend" : "mouseup";
7
-
8
- class ScrollEnablement extends EventProvider {
9
- constructor(containerComponent) {
10
- super();
11
- this.containerComponent = containerComponent;
12
- this.mouseMove = this.ontouchmove.bind(this);
13
- this.mouseUp = this.ontouchend.bind(this);
14
- this.touchStart = this.ontouchstart.bind(this);
15
-
16
- this.supportsTouch = supportsTouch();
17
-
18
- // On Android devices touchmove is thrown one more time than neccessary (together with touchend)
19
- // so we have to cache the previus coordinates in order to provide correct parameters in the
20
- // event for Android
21
- this.cachedValue = {};
22
-
23
- // In components like Carousel you need to know if the user has clicked on something or swiped
24
- // in order to throw the needed event or not
25
- this.startX = 0;
26
- this.startY = 0;
27
-
28
- if (this.supportsTouch) {
29
- containerComponent.addEventListener("touchstart", this.touchStart, { passive: true });
30
- containerComponent.addEventListener("touchmove", this.mouseMove, { passive: true });
31
- containerComponent.addEventListener("touchend", this.mouseUp, { passive: true });
32
- } else {
33
- containerComponent.addEventListener("mousedown", this.touchStart, { passive: true });
34
- }
35
- }
36
-
37
- set scrollContainer(container) {
38
- this._container = container;
39
- }
40
-
41
- get scrollContainer() {
42
- return this._container;
43
- }
44
-
45
- /**
46
- * Scrolls the container to the left/top position, retrying retryCount times, if the container is not yet painted
47
- *
48
- * @param left
49
- * @param top
50
- * @param retryCount
51
- * @param retryInterval
52
- * @returns {Promise<void>} resolved when scrolled successfully
53
- */
54
- async scrollTo(left, top, retryCount = 0, retryInterval = 0) {
55
- let containerPainted = this.scrollContainer.clientHeight > 0 && this.scrollContainer.clientWidth > 0;
56
-
57
- /* eslint-disable no-loop-func, no-await-in-loop */
58
- while (!containerPainted && retryCount > 0) {
59
- await new Promise(resolve => {
60
- setTimeout(() => {
61
- containerPainted = this.scrollContainer.clientHeight > 0 && this.scrollContainer.clientWidth > 0;
62
- retryCount--;
63
- resolve();
64
- }, retryInterval);
65
- });
66
- }
67
- /* eslint-disable no-loop-func, no-await-in-loop */
68
-
69
- this._container.scrollLeft = left;
70
- this._container.scrollTop = top;
71
- }
72
-
73
- move(dx, dy, disableAnimation) {
74
- if (disableAnimation) {
75
- this._container.scrollLeft += dx;
76
- this._container.scrollTop += dy;
77
- return;
78
- }
79
-
80
- return scroll({
81
- element: this._container,
82
- dx,
83
- dy,
84
- });
85
- }
86
-
87
- getScrollLeft() {
88
- return this._container.scrollLeft;
89
- }
90
-
91
- getScrollTop() {
92
- return this._container.scrollTop;
93
- }
94
-
95
- _isTouchInside(touch) {
96
- const rect = this._container.getBoundingClientRect();
97
- const x = this.supportsTouch ? touch.clientX : touch.x;
98
- const y = this.supportsTouch ? touch.clientY : touch.y;
99
-
100
- return x >= rect.left && x <= rect.right
101
- && y >= rect.top && y <= rect.bottom;
102
- }
103
-
104
- ontouchstart(event) {
105
- const touch = this.supportsTouch ? event.touches[0] : null;
106
-
107
- if (!this.supportsTouch) {
108
- document.addEventListener("mouseup", this.mouseUp, { passive: true });
109
- document.addEventListener("mousemove", this.mouseMove, { passive: true });
110
- } else {
111
- // Needed only on mobile
112
- this.startX = touch.pageX;
113
- this.startY = touch.pageY;
114
- }
115
-
116
- this._prevDragX = this.supportsTouch ? touch.pageX : event.x;
117
- this._prevDragY = this.supportsTouch ? touch.pageY : event.y;
118
-
119
- this._canScroll = this._isTouchInside(this.supportsTouch ? touch : event);
120
- }
121
-
122
- ontouchmove(event) {
123
- if (!this._canScroll) {
124
- return;
125
- }
126
-
127
- const container = this._container;
128
- const touch = this.supportsTouch ? event.touches[0] : null;
129
-
130
- const dragX = this.supportsTouch ? touch.pageX : event.x;
131
- const dragY = this.supportsTouch ? touch.pageY : event.y;
132
-
133
- container.scrollLeft += this._prevDragX - dragX;
134
- container.scrollTop += this._prevDragY - dragY;
135
-
136
- this.fireEvent(scrollEventName, {
137
- isLeft: dragX > this._prevDragX,
138
- isRight: dragX < this._prevDragX,
139
- });
140
-
141
- this.cachedValue.dragX = this._prevDragX;
142
- this.cachedValue.dragY = this._prevDragY;
143
-
144
- this._prevDragX = dragX;
145
- this._prevDragY = dragY;
146
- }
147
-
148
- ontouchend(event) {
149
- if (this.supportsTouch) {
150
- const deltaX = Math.abs(event.changedTouches[0].pageX - this.startX);
151
- const deltaY = Math.abs(event.changedTouches[0].pageY - this.startY);
152
-
153
- if (deltaX < 10 && deltaY < 10) {
154
- return;
155
- }
156
- }
157
-
158
- if (!this._canScroll) {
159
- return;
160
- }
161
-
162
- const container = this._container;
163
- const dragX = this.supportsTouch ? event.changedTouches[0].pageX : event.x;
164
- const dragY = this.supportsTouch ? event.changedTouches[0].pageY : event.y;
165
-
166
- container.scrollLeft += this._prevDragX - dragX;
167
- container.scrollTop += this._prevDragY - dragY;
168
-
169
- const useCachedValues = dragX === this._prevDragX;
170
- const _dragX = useCachedValues ? this.cachedValue.dragX : dragX;
171
- // const _dragY = useCachedValues ? this.cachedValue.dragY : dragY; add if needed
172
-
173
- this.fireEvent(touchEndEventName, {
174
- isLeft: _dragX < this._prevDragX,
175
- isRight: _dragX > this._prevDragX,
176
- });
177
-
178
- this._prevDragX = dragX;
179
- this._prevDragY = dragY;
180
-
181
- if (!this.supportsTouch) {
182
- document.removeEventListener("mousemove", this.mouseMove, { passive: true });
183
- document.removeEventListener("mouseup", this.mouseUp);
184
- }
185
- }
186
- }
187
-
188
- export default ScrollEnablement;