@ui5/webcomponents-base 0.0.0-39bd3067f → 0.0.0-4180fe799

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 (329) hide show
  1. package/.eslintignore +3 -0
  2. package/CHANGELOG.md +158 -0
  3. package/README.md +26 -2
  4. package/bundle.esm.js +16 -7
  5. package/dist/AssetRegistry.js +8 -6
  6. package/dist/Boot.js +43 -0
  7. package/dist/CSP.js +59 -0
  8. package/dist/CustomElementsRegistry.js +24 -8
  9. package/dist/CustomElementsScope.js +108 -0
  10. package/dist/DOMObserver.js +65 -0
  11. package/dist/Device.js +62 -778
  12. package/dist/EventProvider.js +38 -26
  13. package/dist/FontFace.js +19 -62
  14. package/dist/InitialConfiguration.js +43 -8
  15. package/dist/Keys.js +89 -2
  16. package/dist/ManagedStyles.js +83 -0
  17. package/dist/MediaRange.js +109 -0
  18. package/dist/PropertiesFileFormat.js +95 -0
  19. package/dist/Render.js +175 -0
  20. package/dist/RenderQueue.js +41 -17
  21. package/dist/RenderScheduler.js +24 -126
  22. package/dist/StaticArea.js +1 -39
  23. package/dist/StaticAreaItem.js +56 -63
  24. package/dist/SystemCSSVars.js +10 -0
  25. package/dist/Theming.js +2 -1
  26. package/dist/UI5Element.js +421 -301
  27. package/dist/UI5ElementMetadata.js +165 -19
  28. package/dist/asset-registries/Icons.js +129 -14
  29. package/dist/asset-registries/Illustrations.js +30 -0
  30. package/dist/asset-registries/LocaleData.js +99 -65
  31. package/dist/asset-registries/Themes.js +24 -33
  32. package/dist/asset-registries/i18n.js +72 -30
  33. package/dist/assets-meta/IconCollectionsAlias.js +18 -0
  34. package/dist/config/AnimationMode.js +11 -1
  35. package/dist/config/Language.js +58 -2
  36. package/dist/config/Theme.js +14 -0
  37. package/dist/css/FontFace.css +45 -0
  38. package/dist/css/OverrideFontFace.css +32 -0
  39. package/dist/css/SystemCSSVars.css +17 -0
  40. package/dist/delegate/ItemNavigation.js +244 -171
  41. package/dist/delegate/ResizeHandler.js +78 -38
  42. package/dist/delegate/ScrollEnablement.js +49 -20
  43. package/dist/features/OpenUI5Support.js +42 -7
  44. package/dist/generated/AssetParameters.js +1 -1
  45. package/dist/generated/css/FontFace.css.js +5 -0
  46. package/dist/generated/css/OverrideFontFace.css.js +5 -0
  47. package/dist/generated/css/SystemCSSVars.css.js +5 -0
  48. package/dist/getSharedResource.js +30 -0
  49. package/dist/i18nBundle.js +58 -5
  50. package/dist/isLegacyBrowser.js +3 -0
  51. package/dist/locale/RTLAwareRegistry.js +14 -0
  52. package/dist/locale/applyDirection.js +17 -0
  53. package/dist/locale/directionChange.js +32 -0
  54. package/dist/locale/getEffectiveDir.js +28 -0
  55. package/dist/locale/getLocale.js +12 -2
  56. package/dist/locale/languageChange.js +22 -0
  57. package/dist/renderer/LitRenderer.js +26 -7
  58. package/dist/renderer/directives/style-map.js +72 -0
  59. package/dist/renderer/executeTemplate.js +17 -0
  60. package/dist/resources/bundle.esm.js +17 -109
  61. package/dist/resources/bundle.esm.js.map +1 -1
  62. package/dist/sap/base/Log.js +241 -0
  63. package/dist/sap/base/assert.js +8 -0
  64. package/dist/sap/base/security/URLListValidator.js +148 -0
  65. package/dist/sap/base/security/sanitizeHTML.js +16 -0
  66. package/dist/sap/base/util/now.js +7 -0
  67. package/dist/sap/ui/thirdparty/caja-html-sanitizer.js +3585 -0
  68. package/dist/test-resources/assets/Themes.js +10 -6
  69. package/dist/test-resources/elements/Parent.js +6 -2
  70. package/dist/test-resources/elements/WithStaticArea.js +2 -1
  71. package/dist/test-resources/pages/AllTestElements.html +3 -3
  72. package/dist/test-resources/pages/Configuration.html +0 -2
  73. package/dist/test-resources/pages/ConfigurationScript.html +1 -3
  74. package/dist/test-resources/pages/assets/messagebundle_de.properties +1 -0
  75. package/dist/test-resources/pages/assets/messagebundle_en.properties +1 -0
  76. package/dist/test-resources/pages/assets/messagebundle_es.properties +1 -0
  77. package/dist/test-resources/pages/assets/messagebundle_fr.properties +1 -0
  78. package/dist/test-resources/pages/i18n.html +33 -0
  79. package/dist/test-resources/specs/ConfigurationChange.spec.js +11 -9
  80. package/dist/test-resources/specs/ConfigurationScript.spec.js +25 -23
  81. package/dist/test-resources/specs/ConfigurationURL.spec.js +65 -17
  82. package/dist/test-resources/specs/CustomTheme.spec.js +9 -7
  83. package/dist/test-resources/specs/EventProvider.spec.js +63 -0
  84. package/dist/test-resources/specs/StaticArea.spec.js +56 -12
  85. package/dist/test-resources/specs/Theming.spec.js +12 -10
  86. package/dist/test-resources/specs/UI5ElementInvalidation.js +54 -70
  87. package/dist/test-resources/specs/UI5ElementLifecycle.js +19 -14
  88. package/dist/test-resources/specs/UI5ElementListenForChildPropChanges.spec.js +25 -51
  89. package/dist/test-resources/specs/UI5ElementMetadataExt.js +9 -7
  90. package/dist/test-resources/specs/UI5ElementPropertyValidation.js +7 -5
  91. package/dist/test-resources/specs/UI5ElementPropsAndAttrs.spec.js +37 -35
  92. package/dist/test-resources/specs/UI5ElementShadowDOM.js +10 -8
  93. package/dist/test-resources/specs/UI5ElementSlots.js +10 -8
  94. package/dist/theming/CustomStyle.js +28 -7
  95. package/dist/theming/ThemeLoaded.js +22 -0
  96. package/dist/theming/applyTheme.js +7 -13
  97. package/dist/theming/getConstructableStyle.js +15 -10
  98. package/dist/theming/getEffectiveLinksHrefs.js +20 -0
  99. package/dist/theming/getEffectiveStyle.js +23 -8
  100. package/dist/theming/getStylesString.js +15 -0
  101. package/dist/theming/getThemeDesignerTheme.js +2 -1
  102. package/dist/theming/preloadLinks.js +23 -0
  103. package/dist/types/CSSColor.js +9 -0
  104. package/dist/types/CalendarType.js +1 -1
  105. package/dist/types/DataType.js +13 -1
  106. package/dist/types/Float.js +14 -0
  107. package/dist/types/Integer.js +4 -0
  108. package/dist/types/InvisibleMessageMode.js +30 -0
  109. package/dist/types/ItemNavigationBehavior.js +2 -7
  110. package/dist/types/NavigationMode.js +1 -0
  111. package/dist/types/PopupState.js +1 -1
  112. package/dist/types/ValueState.js +1 -1
  113. package/dist/updateShadowRoot.js +30 -0
  114. package/dist/util/AriaLabelHelper.js +41 -0
  115. package/dist/util/Caret.js +45 -0
  116. package/dist/util/ColorConversion.js +370 -0
  117. package/dist/util/FocusableElements.js +25 -8
  118. package/dist/util/HTMLSanitizer.js +7 -0
  119. package/dist/util/InvisibleMessage.js +58 -0
  120. package/dist/util/PopupUtils.js +93 -0
  121. package/dist/util/SlotsHelper.js +43 -0
  122. package/dist/util/TabbableElements.js +5 -1
  123. package/dist/util/arraysAreEqual.js +15 -0
  124. package/dist/util/clamp.js +12 -0
  125. package/dist/util/createLinkInHead.js +19 -0
  126. package/dist/util/debounce.js +17 -0
  127. package/dist/util/encodeCSS.js +24 -0
  128. package/dist/util/getActiveElement.js +11 -0
  129. package/dist/util/getClassCopy.js +10 -0
  130. package/dist/util/getEffectiveContentDensity.js +5 -0
  131. package/dist/util/getSingletonElementInstance.js +13 -0
  132. package/dist/util/isElementInView.js +15 -0
  133. package/dist/util/isNodeHidden.js +1 -5
  134. package/dist/util/isNodeTabbable.js +4 -4
  135. package/dist/util/isValidPropertyName.js +9 -3
  136. package/dist/util/setToArray.js +10 -0
  137. package/hash.txt +1 -0
  138. package/index.js +1 -1
  139. package/lib/generate-asset-parameters/index.js +0 -1
  140. package/lib/generate-styles/index.js +18 -0
  141. package/package-scripts.js +37 -19
  142. package/package.json +19 -12
  143. package/src/AssetRegistry.js +8 -6
  144. package/src/Boot.js +43 -0
  145. package/src/CSP.js +59 -0
  146. package/src/CustomElementsRegistry.js +24 -8
  147. package/src/CustomElementsScope.js +108 -0
  148. package/src/DOMObserver.js +65 -0
  149. package/src/Device.js +62 -778
  150. package/src/EventProvider.js +38 -26
  151. package/src/FontFace.js +19 -62
  152. package/src/InitialConfiguration.js +43 -8
  153. package/src/Keys.js +89 -2
  154. package/src/ManagedStyles.js +83 -0
  155. package/src/MediaRange.js +109 -0
  156. package/src/PropertiesFileFormat.js +95 -0
  157. package/src/Render.js +175 -0
  158. package/src/RenderQueue.js +41 -17
  159. package/src/RenderScheduler.js +24 -126
  160. package/src/StaticArea.js +1 -39
  161. package/src/StaticAreaItem.js +56 -63
  162. package/src/SystemCSSVars.js +10 -0
  163. package/src/Theming.js +2 -1
  164. package/src/UI5Element.js +421 -301
  165. package/src/UI5ElementMetadata.js +165 -19
  166. package/src/asset-registries/Icons.js +129 -14
  167. package/src/asset-registries/Illustrations.js +30 -0
  168. package/src/asset-registries/LocaleData.js +99 -65
  169. package/src/asset-registries/Themes.js +24 -33
  170. package/src/asset-registries/i18n.js +72 -30
  171. package/src/assets-meta/IconCollectionsAlias.js +18 -0
  172. package/src/config/AnimationMode.js +11 -1
  173. package/src/config/Language.js +58 -2
  174. package/src/config/Theme.js +14 -0
  175. package/src/css/FontFace.css +45 -0
  176. package/src/css/OverrideFontFace.css +32 -0
  177. package/src/css/SystemCSSVars.css +17 -0
  178. package/src/delegate/ItemNavigation.js +244 -171
  179. package/src/delegate/ResizeHandler.js +78 -38
  180. package/src/delegate/ScrollEnablement.js +49 -20
  181. package/src/features/OpenUI5Support.js +42 -7
  182. package/src/getSharedResource.js +30 -0
  183. package/src/i18nBundle.js +58 -5
  184. package/src/isLegacyBrowser.js +3 -0
  185. package/src/locale/RTLAwareRegistry.js +14 -0
  186. package/src/locale/applyDirection.js +17 -0
  187. package/src/locale/directionChange.js +32 -0
  188. package/src/locale/getEffectiveDir.js +28 -0
  189. package/src/locale/getLocale.js +12 -2
  190. package/src/locale/languageChange.js +22 -0
  191. package/src/renderer/LitRenderer.js +26 -7
  192. package/src/renderer/directives/style-map.js +72 -0
  193. package/src/renderer/executeTemplate.js +17 -0
  194. package/src/theming/CustomStyle.js +28 -7
  195. package/src/theming/ThemeLoaded.js +22 -0
  196. package/src/theming/applyTheme.js +7 -13
  197. package/src/theming/getConstructableStyle.js +15 -10
  198. package/src/theming/getEffectiveLinksHrefs.js +20 -0
  199. package/src/theming/getEffectiveStyle.js +23 -8
  200. package/src/theming/getStylesString.js +15 -0
  201. package/src/theming/getThemeDesignerTheme.js +2 -1
  202. package/src/theming/preloadLinks.js +23 -0
  203. package/src/types/CSSColor.js +9 -0
  204. package/src/types/CalendarType.js +1 -1
  205. package/src/types/DataType.js +13 -1
  206. package/src/types/Float.js +14 -0
  207. package/src/types/Integer.js +4 -0
  208. package/src/types/InvisibleMessageMode.js +30 -0
  209. package/src/types/ItemNavigationBehavior.js +2 -7
  210. package/src/types/NavigationMode.js +1 -0
  211. package/src/types/PopupState.js +1 -1
  212. package/src/types/ValueState.js +1 -1
  213. package/src/updateShadowRoot.js +30 -0
  214. package/src/util/AriaLabelHelper.js +41 -0
  215. package/src/util/Caret.js +45 -0
  216. package/src/util/ColorConversion.js +370 -0
  217. package/src/util/FocusableElements.js +25 -8
  218. package/src/util/HTMLSanitizer.js +7 -0
  219. package/src/util/InvisibleMessage.js +58 -0
  220. package/src/util/PopupUtils.js +93 -0
  221. package/src/util/SlotsHelper.js +43 -0
  222. package/src/util/TabbableElements.js +5 -1
  223. package/src/util/arraysAreEqual.js +15 -0
  224. package/src/util/clamp.js +12 -0
  225. package/src/util/createLinkInHead.js +19 -0
  226. package/src/util/debounce.js +17 -0
  227. package/src/util/encodeCSS.js +24 -0
  228. package/src/util/getActiveElement.js +11 -0
  229. package/src/util/getClassCopy.js +10 -0
  230. package/src/util/getEffectiveContentDensity.js +5 -0
  231. package/src/util/getSingletonElementInstance.js +13 -0
  232. package/src/util/isElementInView.js +15 -0
  233. package/src/util/isNodeHidden.js +1 -5
  234. package/src/util/isNodeTabbable.js +4 -4
  235. package/src/util/isValidPropertyName.js +9 -3
  236. package/src/util/setToArray.js +10 -0
  237. package/used-modules.txt +7 -0
  238. package/bundle.es5.js +0 -28
  239. package/dist/SVGIconRegistry.js +0 -60
  240. package/dist/boot.js +0 -32
  241. package/dist/compatibility/DOMObserver.js +0 -62
  242. package/dist/compatibility/patchNodeValue.js +0 -24
  243. package/dist/compatibility/whenPolyfillLoaded.js +0 -26
  244. package/dist/delegate/CustomResize.js +0 -78
  245. package/dist/delegate/NativeResize.js +0 -44
  246. package/dist/features/browsersupport/Edge.js +0 -6
  247. package/dist/features/browsersupport/IE11.js +0 -41
  248. package/dist/features/browsersupport/IE11WithWebComponentsPolyfill.js +0 -5
  249. package/dist/renderer/ifDefined.js +0 -21
  250. package/dist/resources/bundle.es5.js +0 -212
  251. package/dist/resources/bundle.es5.js.map +0 -1
  252. package/dist/theming/CSSVarsPonyfill.js +0 -24
  253. package/dist/theming/adaptCSSForIE.js +0 -90
  254. package/dist/theming/createComponentStyleTag.js +0 -49
  255. package/dist/theming/createThemePropertiesStyleTag.js +0 -20
  256. package/dist/thirdparty/Array.from.js +0 -16
  257. package/dist/thirdparty/Array.prototype.fill.js +0 -44
  258. package/dist/thirdparty/Array.prototype.find.js +0 -46
  259. package/dist/thirdparty/Array.prototype.includes.js +0 -51
  260. package/dist/thirdparty/Element.prototype.closest.js +0 -11
  261. package/dist/thirdparty/Element.prototype.matches.js +0 -6
  262. package/dist/thirdparty/Map.prototype.keys.js +0 -9
  263. package/dist/thirdparty/Number.isInteger.js +0 -5
  264. package/dist/thirdparty/Number.isNaN.js +0 -1
  265. package/dist/thirdparty/Number.parseInt.js +0 -1
  266. package/dist/thirdparty/Object.assign.js +0 -31
  267. package/dist/thirdparty/Object.entries.js +0 -11
  268. package/dist/thirdparty/Symbol.js +0 -2
  269. package/dist/thirdparty/WeakSet.js +0 -27
  270. package/dist/thirdparty/es6-string-methods.js +0 -182
  271. package/dist/thirdparty/events-polyfills.js +0 -89
  272. package/dist/thirdparty/fetch.js +0 -1
  273. package/dist/thirdparty/template.js +0 -600
  274. package/dist/thirdparty/webcomponents-sd-ce-pf.js +0 -318
  275. package/dist/webcomponentsjs/LICENSE.md +0 -19
  276. package/dist/webcomponentsjs/README.md +0 -229
  277. package/dist/webcomponentsjs/bundles/webcomponents-ce.js +0 -63
  278. package/dist/webcomponentsjs/bundles/webcomponents-ce.js.map +0 -1
  279. package/dist/webcomponentsjs/bundles/webcomponents-sd-ce-pf.js +0 -297
  280. package/dist/webcomponentsjs/bundles/webcomponents-sd-ce-pf.js.map +0 -1
  281. package/dist/webcomponentsjs/bundles/webcomponents-sd-ce.js +0 -208
  282. package/dist/webcomponentsjs/bundles/webcomponents-sd-ce.js.map +0 -1
  283. package/dist/webcomponentsjs/bundles/webcomponents-sd.js +0 -166
  284. package/dist/webcomponentsjs/bundles/webcomponents-sd.js.map +0 -1
  285. package/dist/webcomponentsjs/custom-elements-es5-adapter.js +0 -15
  286. package/dist/webcomponentsjs/package.json +0 -46
  287. package/dist/webcomponentsjs/src/entrypoints/custom-elements-es5-adapter-index.js +0 -16
  288. package/dist/webcomponentsjs/src/entrypoints/webcomponents-bundle-index.js +0 -53
  289. package/dist/webcomponentsjs/src/entrypoints/webcomponents-ce-index.js +0 -17
  290. package/dist/webcomponentsjs/src/entrypoints/webcomponents-sd-ce-index.js +0 -19
  291. package/dist/webcomponentsjs/src/entrypoints/webcomponents-sd-ce-pf-index.js +0 -28
  292. package/dist/webcomponentsjs/src/entrypoints/webcomponents-sd-index.js +0 -18
  293. package/dist/webcomponentsjs/webcomponents-bundle.js +0 -298
  294. package/dist/webcomponentsjs/webcomponents-bundle.js.map +0 -1
  295. package/dist/webcomponentsjs/webcomponents-loader.js +0 -185
  296. package/src/SVGIconRegistry.js +0 -60
  297. package/src/boot.js +0 -32
  298. package/src/compatibility/DOMObserver.js +0 -62
  299. package/src/compatibility/patchNodeValue.js +0 -24
  300. package/src/compatibility/whenPolyfillLoaded.js +0 -26
  301. package/src/delegate/CustomResize.js +0 -78
  302. package/src/delegate/NativeResize.js +0 -44
  303. package/src/features/browsersupport/Edge.js +0 -6
  304. package/src/features/browsersupport/IE11.js +0 -41
  305. package/src/features/browsersupport/IE11WithWebComponentsPolyfill.js +0 -5
  306. package/src/renderer/ifDefined.js +0 -21
  307. package/src/theming/CSSVarsPonyfill.js +0 -24
  308. package/src/theming/adaptCSSForIE.js +0 -90
  309. package/src/theming/createComponentStyleTag.js +0 -49
  310. package/src/theming/createThemePropertiesStyleTag.js +0 -20
  311. package/src/thirdparty/Array.from.js +0 -16
  312. package/src/thirdparty/Array.prototype.fill.js +0 -44
  313. package/src/thirdparty/Array.prototype.find.js +0 -46
  314. package/src/thirdparty/Array.prototype.includes.js +0 -51
  315. package/src/thirdparty/Element.prototype.closest.js +0 -11
  316. package/src/thirdparty/Element.prototype.matches.js +0 -6
  317. package/src/thirdparty/Map.prototype.keys.js +0 -9
  318. package/src/thirdparty/Number.isInteger.js +0 -5
  319. package/src/thirdparty/Number.isNaN.js +0 -1
  320. package/src/thirdparty/Number.parseInt.js +0 -1
  321. package/src/thirdparty/Object.assign.js +0 -31
  322. package/src/thirdparty/Object.entries.js +0 -11
  323. package/src/thirdparty/Symbol.js +0 -2
  324. package/src/thirdparty/WeakSet.js +0 -27
  325. package/src/thirdparty/es6-string-methods.js +0 -182
  326. package/src/thirdparty/events-polyfills.js +0 -89
  327. package/src/thirdparty/fetch.js +0 -1
  328. package/src/thirdparty/template.js +0 -600
  329. package/src/thirdparty/webcomponents-sd-ce-pf.js +0 -318
package/dist/util/SlotsHelper.js ADDED
@@ -0,0 +1,43 @@
1
+ /**
2
+ * Determines the slot to which a node should be assigned
3
+ * @param node Text node or HTML element
4
+ * @returns {string}
5
+ */
6
+ const getSlotName = node => {
7
+ // Text nodes can only go to the default slot
8
+ if (!(node instanceof HTMLElement)) {
9
+ return "default";
10
+ }
11
+
12
+ // Discover the slot based on the real slot name (f.e. footer => footer, or content-32 => content)
13
+ const slot = node.getAttribute("slot");
14
+ if (slot) {
15
+ const match = slot.match(/^(.+?)-\d+$/);
16
+ return match ? match[1] : slot;
17
+ }
18
+
19
+ // Use default slot as a fallback
20
+ return "default";
21
+ };
22
+
23
+ const isSlot = el => el && el instanceof HTMLElement && el.localName === "slot";
24
+
25
+ const getSlottedElements = el => {
26
+ if (isSlot(el)) {
27
+ return el.assignedNodes({ flatten: true }).filter(item => item instanceof HTMLElement);
28
+ }
29
+
30
+ return [el];
31
+ };
32
+
33
+ const getSlottedElementsList = elList => {
34
+ const reducer = (acc, curr) => acc.concat(getSlottedElements(curr));
35
+ return elList.reduce(reducer, []);
36
+ };
37
+
38
+ export {
39
+ getSlotName,
40
+ isSlot,
41
+ getSlottedElements,
42
+ getSlottedElementsList,
43
+ };
package/dist/util/TabbableElements.js CHANGED
@@ -12,8 +12,12 @@ const getLastTabbableElement = node => {
12
12
  const getTabbables = (nodes, tabbables) => {
13
13
  const tabbablesNodes = tabbables || [];
14
14
 
15
+ if (!nodes) {
16
+ return tabbablesNodes;
17
+ }
18
+
15
19
  Array.from(nodes).forEach(currentNode => {
16
- if (currentNode.nodeType === Node.TEXT_NODE) {
20
+ if (currentNode.nodeType === Node.TEXT_NODE || currentNode.nodeType === Node.COMMENT_NODE || currentNode.hasAttribute("data-sap-no-tab-ref")) {
17
21
  return;
18
22
  }
19
23
 
package/dist/util/arraysAreEqual.js ADDED
@@ -0,0 +1,15 @@
1
+ const arraysAreEqual = (arr1, arr2) => {
2
+ if (arr1.length !== arr2.length) {
3
+ return false;
4
+ }
5
+
6
+ for (let i = 0; i < arr1.length; i++) {
7
+ if (arr1[i] !== arr2[i]) {
8
+ return false;
9
+ }
10
+ }
11
+
12
+ return true;
13
+ };
14
+
15
+ export default arraysAreEqual;
package/dist/util/clamp.js ADDED
@@ -0,0 +1,12 @@
1
+ /**
2
+ * Returns a value clamped between an upper bound 'max' and lower bound 'min'.
3
+ * @param {number} val value
4
+ * @param {number} min lower bound
5
+ * @param {number} max upper bound
6
+ * @returns {number}
7
+ */
8
+ const clamp = (val, min, max) => {
9
+ return Math.min(Math.max(val, min), max);
10
+ };
11
+
12
+ export default clamp;
package/dist/util/createLinkInHead.js ADDED
@@ -0,0 +1,19 @@
1
+ /**
2
+ * Creates a <link> tag in the <head> tag
3
+ * @param href - the CSS
4
+ * @param attributes - optional attributes to add to the tag
5
+ * @returns {HTMLElement}
6
+ */
7
+ const createLinkInHead = (href, attributes = {}) => {
8
+ const link = document.createElement("link");
9
+ link.type = "text/css";
10
+ link.rel = "stylesheet";
11
+
12
+ Object.entries(attributes).forEach(pair => link.setAttribute(...pair));
13
+
14
+ link.href = href;
15
+ document.head.appendChild(link);
16
+ return link;
17
+ };
18
+
19
+ export default createLinkInHead;
package/dist/util/debounce.js ADDED
@@ -0,0 +1,17 @@
1
+ /**
2
+ * Delays function execution by given threshold.
3
+ * @param fn {Function}
4
+ * @param delay {Integer}
5
+ */
6
+
7
+ let debounceInterval = null;
8
+
9
+ const debounce = (fn, delay) => {
10
+ clearTimeout(debounceInterval);
11
+ debounceInterval = setTimeout(() => {
12
+ debounceInterval = null;
13
+ fn();
14
+ }, delay);
15
+ };
16
+
17
+ export default debounce;
package/dist/util/encodeCSS.js ADDED
@@ -0,0 +1,24 @@
1
+ const rCSS = /[\x00-\x2f\x3a-\x40\x5b-\x60\x7b-\xff\u2028\u2029][0-9A-Fa-f]?/g; // eslint-disable-line
2
+
3
+ const toHex = (iChar, iLength) => {
4
+ let sHex = iChar.toString(16);
5
+ if (iLength) {
6
+ sHex = sHex.padStart(iLength, "0");
7
+ }
8
+ return sHex;
9
+ };
10
+
11
+ const fnCSS = sChar => {
12
+ const iChar = sChar.charCodeAt(0);
13
+ if (sChar.length === 1) {
14
+ return `\\${toHex(iChar)}`;
15
+ }
16
+
17
+ return `\\${toHex(iChar)} ${sChar.substr(1)}`;
18
+ };
19
+
20
+ const encodeCSS = string => {
21
+ return string.replace(rCSS, fnCSS);
22
+ };
23
+
24
+ export default encodeCSS;
package/dist/util/getActiveElement.js ADDED
@@ -0,0 +1,11 @@
1
+ const getActiveElement = () => {
2
+ let element = document.activeElement;
3
+
4
+ while (element && element.shadowRoot && element.shadowRoot.activeElement) {
5
+ element = element.shadowRoot.activeElement;
6
+ }
7
+
8
+ return element;
9
+ };
10
+
11
+ export default getActiveElement;
package/dist/util/getClassCopy.js ADDED
@@ -0,0 +1,10 @@
1
+ const getClassCopy = (klass, constructorCallback) => {
2
+ return class classCopy extends klass {
3
+ constructor() {
4
+ super();
5
+ constructorCallback && constructorCallback();
6
+ }
7
+ };
8
+ };
9
+
10
+ export default getClassCopy;
package/dist/util/getEffectiveContentDensity.js ADDED
@@ -0,0 +1,5 @@
1
+ const GLOBAL_CONTENT_DENSITY_CSS_VAR = "--_ui5_content_density";
2
+
3
+ const getEffectiveContentDensity = el => getComputedStyle(el).getPropertyValue(GLOBAL_CONTENT_DENSITY_CSS_VAR);
4
+
5
+ export default getEffectiveContentDensity;
package/dist/util/getSingletonElementInstance.js ADDED
@@ -0,0 +1,13 @@
1
+ const getSingletonElementInstance = (tag, parentElement = document.body) => {
2
+ let el = document.querySelector(tag);
3
+
4
+ if (el) {
5
+ return el;
6
+ }
7
+
8
+ el = document.createElement(tag);
9
+
10
+ return parentElement.insertBefore(el, parentElement.firstChild);
11
+ };
12
+
13
+ export default getSingletonElementInstance;
package/dist/util/isElementInView.js ADDED
@@ -0,0 +1,15 @@
1
+ /**
2
+ * Determines if the element is within the viewport.
3
+ * @param el {HTMLElement}
4
+ */
5
+ const isElementInView = el => {
6
+ const rect = el.getBoundingClientRect();
7
+
8
+ return (
9
+ rect.top >= 0 && rect.left >= 0
10
+ && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight)
11
+ && rect.right <= (window.innerWidth || document.documentElement.clientWidth)
12
+ );
13
+ };
14
+
15
+ export default isElementInView;
package/dist/util/isNodeHidden.js CHANGED
@@ -3,11 +3,7 @@ const isNodeHidden = node => {
3
3
  return false;
4
4
  }
5
5
 
6
- const rect = node.getBoundingClientRect();
7
-
8
- return (node.offsetWidth <= 0 && node.offsetHeight <= 0)
9
- || node.style.visibility === "hidden"
10
- || (rect.width === 0 && 0 && rect.height === 0);
6
+ return (node.offsetWidth <= 0 && node.offsetHeight <= 0) || node.style.visibility === "hidden";
11
7
  };
12
8
 
13
9
  export default isNodeHidden;
package/dist/util/isNodeTabbable.js CHANGED
@@ -15,14 +15,14 @@ const isNodeTabbable = node => {
15
15
  return false;
16
16
  }
17
17
 
18
- if (nodeName === "a" || /input|select|textarea|button|object/.test(nodeName)) {
19
- return !node.disabled;
20
- }
21
-
22
18
  const tabIndex = node.getAttribute("tabindex");
23
19
  if (tabIndex !== null && tabIndex !== undefined) {
24
20
  return parseInt(tabIndex) >= 0;
25
21
  }
22
+
23
+ if (nodeName === "a" || /input|select|textarea|button|object/.test(nodeName)) {
24
+ return !node.disabled;
25
+ }
26
26
  };
27
27
 
28
28
  export default isNodeTabbable;
package/dist/util/isValidPropertyName.js CHANGED
@@ -1,6 +1,12 @@
1
1
  // Note: disabled is present in IE so we explicitly allow it here.
2
- // Others, such as ariaLabel, we explicitly override, so valid too
3
- const whitelist = ["disabled", "ariaLabel"];
2
+ // Others, such as title/hidden, we explicitly override, so valid too
3
+ const allowList = [
4
+ "disabled",
5
+ "title",
6
+ "hidden",
7
+ "role",
8
+ "draggable",
9
+ ];
4
10
 
5
11
  /**
6
12
  * Checks whether a property name is valid (does not collide with existing DOM API properties)
@@ -9,7 +15,7 @@ const whitelist = ["disabled", "ariaLabel"];
9
15
  * @returns {boolean}
10
16
  */
11
17
  const isValidPropertyName = name => {
12
- if (whitelist.includes(name)) {
18
+ if (allowList.includes(name) || name.startsWith("aria")) {
13
19
  return true;
14
20
  }
15
21
  const classes = [
package/dist/util/setToArray.js ADDED
@@ -0,0 +1,10 @@
1
+ // This is needed as IE11 doesn't have Set.prototype.keys/values/entries, so [...mySet.values()] is not an option
2
+ const setToArray = s => {
3
+ const arr = [];
4
+ s.forEach(item => {
5
+ arr.push(item);
6
+ });
7
+ return arr;
8
+ };
9
+
10
+ export default setToArray;
package/hash.txt ADDED
@@ -0,0 +1 @@
1
+ Wx4+yAG9sYh4qW/UnR3S1MLSOZU=
package/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import UI5Element from "./src/UI5Element.js";
1
+ import UI5Element from "./dist/UI5Element.js";
2
2
 
3
3
  export default UI5Element;
4
4
  export { UI5Element };
package/lib/generate-asset-parameters/index.js CHANGED
@@ -1,5 +1,4 @@
1
1
  const fs = require('fs');
2
- const path = require('path');
3
2
  const mkdirp = require('mkdirp');
4
3
  const assets = require('@ui5/webcomponents-tools/assets-meta.js');
5
4
 
package/lib/generate-styles/index.js ADDED
@@ -0,0 +1,18 @@
1
+ const fs = require('fs');
2
+ const path = require('path');
3
+ const mkdirp = require('mkdirp');
4
+ const CleanCSS = require('clean-css');
5
+
6
+ mkdirp.sync("dist/generated/css/");
7
+ fs.readdirSync("src/css/").filter(file => file.endsWith(".css")).forEach(file => {
8
+ let content = fs.readFileSync(path.join("src/css/", file));
9
+ const res = new CleanCSS().minify(`${content}`);
10
+ content = `export default {
11
+ packageName: "@ui5/webcomponents-base",
12
+ fileName: "${file}",
13
+ content: \`${res.styles}\`
14
+ };`;
15
+
16
+ fs.writeFileSync(path.join("dist/generated/css/", `${file}.js`), content);
17
+ });
18
+
package/package-scripts.js CHANGED
@@ -1,44 +1,62 @@
1
- const path = require("path");
2
1
  const resolve = require("resolve");
3
2
 
4
- const serveConfig = `../tools/components-package/serve.json`;
5
- const port = `9191`;
6
-
7
3
  const assetParametersScript = resolve.sync("@ui5/webcomponents-base/lib/generate-asset-parameters/index.js");
4
+ const stylesScript = resolve.sync("@ui5/webcomponents-base/lib/generate-styles/index.js");
5
+ const serve = resolve.sync("@ui5/webcomponents-tools/lib/serve/index.js");
6
+ const generateHash = resolve.sync("@ui5/webcomponents-tools/lib/hash/generate.js");
7
+ const hashIsUpToDate = resolve.sync("@ui5/webcomponents-tools/lib/hash/upToDate.js");
8
+ const copyUsedModules = resolve.sync("@ui5/webcomponents-tools/lib/copy-list/index.js");
9
+ const replaceGlobalCore = resolve.sync("@ui5/webcomponents-tools/lib/replace-global-core/index.js");
10
+ const esmAbsToRel = resolve.sync("@ui5/webcomponents-tools/lib/esm-abs-to-rel/index.js");
11
+ const UP_TO_DATE = `node "${hashIsUpToDate}" dist/ hash.txt && echo "Up to date."`;
8
12
 
9
13
  const scripts = {
10
- clean: "rimraf dist",
14
+ clean: "rimraf dist && rimraf .port",
11
15
  lint: "eslint . --config config/.eslintrc.js",
12
- prepare: "nps clean copy generateAssetParameters",
16
+ prepare: "nps clean integrate copy generateAssetParameters generateStyles",
17
+ integrate: {
18
+ default: "nps integrate.copy-used-modules integrate.copy-overlay integrate.replace-amd integrate.replace-export-true integrate.replace-export-false integrate.amd-to-es6 integrate.replace-global-core-usage integrate.esm-abs-to-rel integrate.third-party",
19
+ "copy-used-modules": `node "${copyUsedModules}" ./used-modules.txt dist/`,
20
+ "copy-overlay": `copy-and-watch "overlay/**/*.js" dist/`,
21
+ "replace-amd": "replace-in-file sap.ui.define define dist/**/*.js",
22
+ "replace-export-true": `replace-in-file ", /* bExport= */ true" "" dist/**/*.js`,
23
+ "replace-export-false": `replace-in-file ", /* bExport= */ false" "" dist/**/*.js`,
24
+ "amd-to-es6": "amdtoes6 --src=dist/ --replace --glob=**/*.js",
25
+ "replace-global-core-usage": `node "${replaceGlobalCore}" dist/`,
26
+ "esm-abs-to-rel": `node "${esmAbsToRel}" dist/ dist/`,
27
+ "third-party": {
28
+ default: "nps integrate.third-party.copy integrate.third-party.fix",
29
+ copy: "mkdirp dist/sap/ui/thirdparty/ && copy-and-watch ../../node_modules/@openui5/sap.ui.core/src/sap/ui/thirdparty/caja-html-sanitizer.js dist/sap/ui/thirdparty/",
30
+ fix: "replace-in-file 240 xA0 dist/sap/ui/thirdparty/caja-html-sanitizer.js"
31
+ },
32
+ },
13
33
  build: {
14
- default: "nps lint prepare build.bundle",
15
- bundle: "rollup --config config/rollup.config.js --environment ES5_BUILD",
34
+ default: `${UP_TO_DATE} || nps lint prepare build.bundle hash`,
35
+ bundle: "rollup --config config/rollup.config.js",
16
36
  },
17
37
  copy: {
18
- default: "nps copy.src copy.test copy.webcomponents-polyfill",
19
- src: "copy-and-watch \"src/**/*.js\" dist/",
20
- test: "copy-and-watch \"test/**/*.*\" dist/test-resources",
21
- "webcomponents-polyfill": "copy-and-watch \"../../node_modules/@webcomponents/webcomponentsjs/**/*.*\" dist/webcomponentsjs/",
38
+ default: "nps copy.src copy.test",
39
+ src: `copy-and-watch "src/**/*.{js,css}" dist/`,
40
+ test: `copy-and-watch "test/**/*.*" dist/test-resources`,
22
41
  },
23
42
  generateAssetParameters: `node "${assetParametersScript}"`,
43
+ generateStyles: `node "${stylesScript}"`,
24
44
  watch: {
25
- default: 'concurrently "nps watch.test" "nps watch.src" "nps watch.bundle"',
45
+ default: 'concurrently "nps watch.test" "nps watch.src" "nps watch.bundle" "nps watch.styles"',
26
46
  src: 'nps "copy.src --watch --skip-initial-copy"',
27
47
  test: 'nps "copy.test --watch --skip-initial-copy"',
28
- bundle: "rollup --config config/rollup.config.js -w --environment ES5_BUILD,DEV",
48
+ bundle: "rollup --config config/rollup.config.js -w --environment DEV",
49
+ styles: 'chokidar "src/css/*.css" -c "nps generateStyles"'
29
50
  },
30
51
  dev: 'concurrently "nps serve" "nps watch"',
31
52
  start: "nps prepare dev",
32
- serve: {
33
- default: "nps serve.prepare serve.run",
34
- prepare: `copy-and-watch "${serveConfig}" dist/`,
35
- run: `serve --no-clipboard -l ${port} dist`,
36
- },
53
+ serve: `node "${serve}" --dir="dist/" --port=9191 --packageName="@ui5/webcomponents-base"`,
37
54
  test: {
38
55
  // --success first - report the exit code of the test run (first command to finish), as serve is always terminated and has a non-0 exit code
39
56
  default: 'concurrently "nps serve" "nps test.run" --kill-others --success first',
40
57
  run: "cross-env WDIO_LOG_LEVEL=error FORCE_COLOR=0 wdio config/wdio.conf.js",
41
58
  },
59
+ hash: `node "${generateHash}" dist/ hash.txt`,
42
60
  };
43
61
 
44
62
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ui5/webcomponents-base",
3
- "version": "0.0.0-39bd3067f",
3
+ "version": "0.0.0-4180fe799",
4
4
  "description": "UI5 Web Components: webcomponents.base",
5
5
  "author": "SAP SE (https://www.sap.com)",
6
6
  "license": "Apache-2.0",
@@ -15,27 +15,34 @@
15
15
  "url": "https://github.com/SAP/ui5-webcomponents.git",
16
16
  "directory": "packages/base"
17
17
  },
18
+ "exports": {
19
+ ".": "./index.js",
20
+ "./dist/*": "./dist/*",
21
+ "./package.json": "./package.json",
22
+ "./bundle.esm.js": "./bundle.esm.js",
23
+ "./*": "./dist/*"
24
+ },
18
25
  "scripts": {
19
26
  "clean": "nps clean",
20
27
  "lint": "nps lint",
21
28
  "start": "nps start",
22
29
  "build": "nps build",
23
30
  "test": "nps test",
31
+ "hash": "nps hash",
24
32
  "prepublishOnly": "npm run clean && npm run build"
25
33
  },
26
34
  "dependencies": {
27
- "css-vars-ponyfill": "^2.1.2",
28
- "lit-html": "^1.0.0",
29
- "regenerator-runtime": "0.12.1",
30
- "url-search-params-polyfill": "^5.0.0"
35
+ "lit-html": "2.0.1"
31
36
  },
32
37
  "devDependencies": {
33
- "@ui5/webcomponents-tools": "0.0.0-39bd3067f",
34
- "array-uniq": "^2.0.0",
35
- "copy-and-watch": "^0.1.4",
36
- "eslint": "^5.13.0",
37
- "eslint-config-airbnb-base": "^13.1.0",
38
- "npm-run-all": "^4.1.5",
39
- "path-exists-cli": "^1.0.0"
38
+ "@buxlabs/amd-to-es6": "0.16.1",
39
+ "@openui5/sap.ui.core": "1.94.0",
40
+ "@ui5/webcomponents-tools": "0.0.0-4180fe799",
41
+ "chromedriver": "95.0.0",
42
+ "clean-css": "^5.2.2",
43
+ "copy-and-watch": "^0.1.5",
44
+ "eslint": "^7.22.0",
45
+ "mkdirp": "^1.0.4",
46
+ "resolve": "^1.20.0"
40
47
  }
41
48
  }
package/src/AssetRegistry.js CHANGED
@@ -1,9 +1,11 @@
1
- import { registerI18nBundle } from "./asset-registries/i18n.js";
2
- import { registerCldr } from "./asset-registries/LocaleData.js";
3
- import { registerThemeProperties } from "./asset-registries/Themes.js";
1
+ import { registerI18nLoader } from "./asset-registries/i18n.js";
2
+ import { registerLocaleDataLoader } from "./asset-registries/LocaleData.js";
3
+ import { registerThemePropertiesLoader } from "./asset-registries/Themes.js";
4
+ import { registerIconLoader } from "./asset-registries/Icons.js";
4
5
 
5
6
  export {
6
- registerCldr,
7
- registerThemeProperties,
8
- registerI18nBundle,
7
+ registerI18nLoader,
8
+ registerLocaleDataLoader,
9
+ registerThemePropertiesLoader,
10
+ registerIconLoader,
9
11
  };
package/src/Boot.js ADDED
@@ -0,0 +1,43 @@
1
+ import EventProvider from "./EventProvider.js";
2
+ import whenDOMReady from "./util/whenDOMReady.js";
3
+ import insertFontFace from "./FontFace.js";
4
+ import insertSystemCSSVars from "./SystemCSSVars.js";
5
+ import { getTheme } from "./config/Theme.js";
6
+ import applyTheme from "./theming/applyTheme.js";
7
+ import { getFeature } from "./FeaturesRegistry.js";
8
+
9
+ let booted = false;
10
+ const eventProvider = new EventProvider();
11
+
12
+ /**
13
+ * Attach a callback that will be executed on boot
14
+ * @public
15
+ * @param listener
16
+ */
17
+ const attachBoot = listener => {
18
+ eventProvider.attachEvent("boot", listener);
19
+ };
20
+
21
+ const boot = async () => {
22
+ if (booted) {
23
+ return;
24
+ }
25
+
26
+ const OpenUI5Support = getFeature("OpenUI5Support");
27
+ if (OpenUI5Support) {
28
+ await OpenUI5Support.init();
29
+ }
30
+
31
+ await whenDOMReady();
32
+ await applyTheme(getTheme());
33
+ OpenUI5Support && OpenUI5Support.attachListeners();
34
+ insertFontFace();
35
+ insertSystemCSSVars();
36
+ await eventProvider.fireEventAsync("boot");
37
+ booted = true;
38
+ };
39
+
40
+ export {
41
+ boot,
42
+ attachBoot,
43
+ };
package/src/CSP.js ADDED
@@ -0,0 +1,59 @@
1
+ const roots = new Map();
2
+ let useLinks = false;
3
+ let preloadLinks = true;
4
+
5
+ /**
6
+ * Use this function to provide the path to the directory where the css resources for the given package will be served from
7
+ *
8
+ * @public
9
+ * @param packageName name of the package that is being configured
10
+ * @param root path, accessible by the server that will serve the css resources
11
+ */
12
+ const setPackageCSSRoot = (packageName, root) => {
13
+ roots.set(packageName, root);
14
+ };
15
+
16
+ const getUrl = (packageName, path) => {
17
+ return `${roots.get(packageName)}${path}`;
18
+ };
19
+
20
+ /**
21
+ * Call this function to enable or disable the usage of <link> tags instead of <style> tags to achieve CSP compliance
22
+ * Example: "setUseLinks(true)" will unconditionally use <link> tags for all browsers;
23
+ * Example: "setUseLinks(!document.adoptedStyleSheets) will only enable the usage of <link> tags for browsers that do not support constructable stylesheets.
24
+ *
25
+ * @public
26
+ * @param use whether links will be used
27
+ */
28
+ const setUseLinks = use => {
29
+ useLinks = use;
30
+ };
31
+
32
+ /**
33
+ * Call this function to enable or disable the preloading of <link> tags.
34
+ * Note: only taken into account when <link> tags are being used.
35
+ * Note: links are being preloaded by default, so call "setPreloadLinks(false)" to opt out of this.
36
+ *
37
+ * @public
38
+ * @param preload
39
+ */
40
+ const setPreloadLinks = preload => {
41
+ preloadLinks = preload;
42
+ };
43
+
44
+ const shouldUseLinks = () => {
45
+ return useLinks;
46
+ };
47
+
48
+ const shouldPreloadLinks = () => {
49
+ return preloadLinks;
50
+ };
51
+
52
+ export {
53
+ setPackageCSSRoot,
54
+ getUrl,
55
+ setUseLinks,
56
+ setPreloadLinks,
57
+ shouldUseLinks,
58
+ shouldPreloadLinks,
59
+ };
package/src/CustomElementsRegistry.js CHANGED
@@ -1,23 +1,39 @@
1
- const DefinitionsSet = new Set();
1
+ import setToArray from "./util/setToArray.js";
2
+
3
+ const Definitions = new Set();
4
+ const Failures = new Set();
5
+ let failureTimeout;
2
6
 
3
7
  const registerTag = tag => {
4
- DefinitionsSet.add(tag);
8
+ Definitions.add(tag);
5
9
  };
6
10
 
7
11
  const isTagRegistered = tag => {
8
- return DefinitionsSet.has(tag);
12
+ return Definitions.has(tag);
9
13
  };
10
14
 
11
15
  const getAllRegisteredTags = () => {
12
- const arr = [];
13
- DefinitionsSet.forEach(tag => {
14
- arr.push(tag);
15
- });
16
- return arr;
16
+ return setToArray(Definitions);
17
+ };
18
+
19
+ const recordTagRegistrationFailure = tag => {
20
+ Failures.add(tag);
21
+ if (!failureTimeout) {
22
+ failureTimeout = setTimeout(() => {
23
+ displayFailedRegistrations();
24
+ failureTimeout = undefined;
25
+ }, 1000);
26
+ }
27
+ };
28
+
29
+ const displayFailedRegistrations = () => {
30
+ console.warn(`The following tags have already been defined by a different UI5 Web Components version: ${setToArray(Failures).join(", ")}`); // eslint-disable-line
31
+ Failures.clear();
17
32
  };
18
33
 
19
34
  export {
20
35
  registerTag,
21
36
  isTagRegistered,
22
37
  getAllRegisteredTags,
38
+ recordTagRegistrationFailure,
23
39
  };