@ui5/webcomponents-base 0.0.0-0fcda382e → 0.0.0-11d529e8a

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 (298) hide show
  1. package/.eslintignore +2 -0
  2. package/CHANGELOG.md +137 -0
  3. package/README.md +26 -1
  4. package/bundle.esm.js +17 -7
  5. package/dist/AssetRegistry.js +8 -6
  6. package/dist/Boot.js +43 -0
  7. package/dist/CustomElementsRegistry.js +24 -8
  8. package/dist/CustomElementsScope.js +108 -0
  9. package/dist/DOMObserver.js +65 -0
  10. package/dist/Device.js +58 -779
  11. package/dist/EventProvider.js +38 -26
  12. package/dist/FontFace.js +52 -7
  13. package/dist/InitialConfiguration.js +32 -8
  14. package/dist/Keys.js +89 -2
  15. package/dist/MediaRange.js +109 -0
  16. package/dist/PropertiesFileFormat.js +95 -0
  17. package/dist/Render.js +173 -0
  18. package/dist/RenderQueue.js +41 -17
  19. package/dist/RenderScheduler.js +24 -126
  20. package/dist/StaticArea.js +1 -39
  21. package/dist/StaticAreaItem.js +64 -62
  22. package/dist/SystemCSSVars.js +31 -0
  23. package/dist/Theming.js +2 -1
  24. package/dist/UI5Element.js +427 -299
  25. package/dist/UI5ElementMetadata.js +157 -19
  26. package/dist/asset-registries/Icons.js +118 -14
  27. package/dist/asset-registries/Illustrations.js +30 -0
  28. package/dist/asset-registries/LocaleData.js +90 -65
  29. package/dist/asset-registries/Themes.js +23 -32
  30. package/dist/asset-registries/i18n.js +72 -30
  31. package/dist/config/AnimationMode.js +11 -1
  32. package/dist/config/Language.js +58 -2
  33. package/dist/delegate/ItemNavigation.js +244 -171
  34. package/dist/delegate/ResizeHandler.js +78 -38
  35. package/dist/delegate/ScrollEnablement.js +49 -20
  36. package/dist/features/OpenUI5Support.js +42 -7
  37. package/dist/generated/AssetParameters.js +1 -1
  38. package/dist/getSharedResource.js +30 -0
  39. package/dist/i18nBundle.js +27 -4
  40. package/dist/isLegacyBrowser.js +3 -0
  41. package/dist/locale/RTLAwareRegistry.js +14 -0
  42. package/dist/locale/applyDirection.js +17 -0
  43. package/dist/locale/directionChange.js +32 -0
  44. package/dist/locale/getEffectiveDir.js +28 -0
  45. package/dist/locale/getLocale.js +12 -2
  46. package/dist/locale/languageChange.js +22 -0
  47. package/dist/renderer/LitRenderer.js +21 -4
  48. package/dist/renderer/executeTemplate.js +17 -0
  49. package/dist/resources/bundle.esm.js +17 -109
  50. package/dist/resources/bundle.esm.js.map +1 -1
  51. package/dist/sap/base/Log.js +241 -0
  52. package/dist/sap/base/assert.js +8 -0
  53. package/dist/sap/base/security/URLListValidator.js +148 -0
  54. package/dist/sap/base/security/sanitizeHTML.js +16 -0
  55. package/dist/sap/base/util/now.js +7 -0
  56. package/dist/sap/ui/thirdparty/caja-html-sanitizer.js +3585 -0
  57. package/dist/test-resources/assets/Themes.js +10 -6
  58. package/dist/test-resources/elements/Parent.js +6 -2
  59. package/dist/test-resources/elements/WithStaticArea.js +2 -1
  60. package/dist/test-resources/pages/AllTestElements.html +3 -3
  61. package/dist/test-resources/pages/Configuration.html +0 -2
  62. package/dist/test-resources/pages/ConfigurationScript.html +1 -3
  63. package/dist/test-resources/pages/assets/messagebundle_de.properties +1 -0
  64. package/dist/test-resources/pages/assets/messagebundle_en.properties +1 -0
  65. package/dist/test-resources/pages/assets/messagebundle_es.properties +1 -0
  66. package/dist/test-resources/pages/assets/messagebundle_fr.properties +1 -0
  67. package/dist/test-resources/pages/i18n.html +35 -0
  68. package/dist/test-resources/specs/ConfigurationChange.spec.js +11 -9
  69. package/dist/test-resources/specs/ConfigurationScript.spec.js +25 -23
  70. package/dist/test-resources/specs/ConfigurationURL.spec.js +65 -17
  71. package/dist/test-resources/specs/CustomTheme.spec.js +7 -5
  72. package/dist/test-resources/specs/EventProvider.spec.js +63 -0
  73. package/dist/test-resources/specs/StaticArea.spec.js +56 -12
  74. package/dist/test-resources/specs/Theming.spec.js +9 -7
  75. package/dist/test-resources/specs/UI5ElementInvalidation.js +54 -70
  76. package/dist/test-resources/specs/UI5ElementLifecycle.js +19 -14
  77. package/dist/test-resources/specs/UI5ElementListenForChildPropChanges.spec.js +25 -51
  78. package/dist/test-resources/specs/UI5ElementMetadataExt.js +9 -7
  79. package/dist/test-resources/specs/UI5ElementPropertyValidation.js +7 -5
  80. package/dist/test-resources/specs/UI5ElementPropsAndAttrs.spec.js +37 -35
  81. package/dist/test-resources/specs/UI5ElementShadowDOM.js +10 -8
  82. package/dist/test-resources/specs/UI5ElementSlots.js +10 -8
  83. package/dist/theming/CustomStyle.js +28 -7
  84. package/dist/theming/ThemeLoaded.js +22 -0
  85. package/dist/theming/applyTheme.js +2 -5
  86. package/dist/theming/getConstructableStyle.js +15 -10
  87. package/dist/theming/getEffectiveStyle.js +23 -8
  88. package/dist/theming/getStylesString.js +13 -0
  89. package/dist/types/CSSColor.js +9 -0
  90. package/dist/types/CalendarType.js +1 -1
  91. package/dist/types/DataType.js +13 -1
  92. package/dist/types/Float.js +14 -0
  93. package/dist/types/Integer.js +4 -0
  94. package/dist/types/InvisibleMessageMode.js +30 -0
  95. package/dist/types/ItemNavigationBehavior.js +2 -7
  96. package/dist/types/NavigationMode.js +1 -0
  97. package/dist/types/PopupState.js +1 -1
  98. package/dist/types/ValueState.js +1 -1
  99. package/dist/updateShadowRoot.js +26 -0
  100. package/dist/util/AriaLabelHelper.js +41 -0
  101. package/dist/util/Caret.js +45 -0
  102. package/dist/util/ColorConversion.js +370 -0
  103. package/dist/util/FocusableElements.js +25 -8
  104. package/dist/util/HTMLSanitizer.js +7 -0
  105. package/dist/util/InvisibleMessage.js +58 -0
  106. package/dist/util/PopupUtils.js +93 -0
  107. package/dist/util/SlotsHelper.js +43 -0
  108. package/dist/util/TabbableElements.js +1 -1
  109. package/dist/util/arraysAreEqual.js +15 -0
  110. package/dist/util/clamp.js +12 -0
  111. package/dist/util/debounce.js +17 -0
  112. package/dist/util/encodeCSS.js +24 -0
  113. package/dist/util/getActiveElement.js +11 -0
  114. package/dist/util/getClassCopy.js +10 -0
  115. package/dist/util/getEffectiveContentDensity.js +5 -0
  116. package/dist/util/getSingletonElementInstance.js +13 -0
  117. package/dist/util/isElementInView.js +15 -0
  118. package/dist/util/isNodeHidden.js +1 -5
  119. package/dist/util/isNodeTabbable.js +4 -4
  120. package/dist/util/isValidPropertyName.js +9 -3
  121. package/dist/util/setToArray.js +10 -0
  122. package/hash.txt +1 -0
  123. package/index.js +1 -1
  124. package/package-scripts.js +33 -18
  125. package/package.json +20 -11
  126. package/src/AssetRegistry.js +8 -6
  127. package/src/Boot.js +43 -0
  128. package/src/CustomElementsRegistry.js +24 -8
  129. package/src/CustomElementsScope.js +108 -0
  130. package/src/DOMObserver.js +65 -0
  131. package/src/Device.js +58 -779
  132. package/src/EventProvider.js +38 -26
  133. package/src/FontFace.js +52 -7
  134. package/src/InitialConfiguration.js +32 -8
  135. package/src/Keys.js +89 -2
  136. package/src/MediaRange.js +109 -0
  137. package/src/PropertiesFileFormat.js +95 -0
  138. package/src/Render.js +173 -0
  139. package/src/RenderQueue.js +41 -17
  140. package/src/RenderScheduler.js +24 -126
  141. package/src/StaticArea.js +1 -39
  142. package/src/StaticAreaItem.js +64 -62
  143. package/src/SystemCSSVars.js +31 -0
  144. package/src/Theming.js +2 -1
  145. package/src/UI5Element.js +427 -299
  146. package/src/UI5ElementMetadata.js +157 -19
  147. package/src/asset-registries/Icons.js +118 -14
  148. package/src/asset-registries/Illustrations.js +30 -0
  149. package/src/asset-registries/LocaleData.js +90 -65
  150. package/src/asset-registries/Themes.js +23 -32
  151. package/src/asset-registries/i18n.js +72 -30
  152. package/src/config/AnimationMode.js +11 -1
  153. package/src/config/Language.js +58 -2
  154. package/src/delegate/ItemNavigation.js +244 -171
  155. package/src/delegate/ResizeHandler.js +78 -38
  156. package/src/delegate/ScrollEnablement.js +49 -20
  157. package/src/features/OpenUI5Support.js +42 -7
  158. package/src/getSharedResource.js +30 -0
  159. package/src/i18nBundle.js +27 -4
  160. package/src/isLegacyBrowser.js +3 -0
  161. package/src/locale/RTLAwareRegistry.js +14 -0
  162. package/src/locale/applyDirection.js +17 -0
  163. package/src/locale/directionChange.js +32 -0
  164. package/src/locale/getEffectiveDir.js +28 -0
  165. package/src/locale/getLocale.js +12 -2
  166. package/src/locale/languageChange.js +22 -0
  167. package/src/renderer/LitRenderer.js +21 -4
  168. package/src/renderer/executeTemplate.js +17 -0
  169. package/src/theming/CustomStyle.js +28 -7
  170. package/src/theming/ThemeLoaded.js +22 -0
  171. package/src/theming/applyTheme.js +2 -5
  172. package/src/theming/getConstructableStyle.js +15 -10
  173. package/src/theming/getEffectiveStyle.js +23 -8
  174. package/src/theming/getStylesString.js +13 -0
  175. package/src/types/CSSColor.js +9 -0
  176. package/src/types/CalendarType.js +1 -1
  177. package/src/types/DataType.js +13 -1
  178. package/src/types/Float.js +14 -0
  179. package/src/types/Integer.js +4 -0
  180. package/src/types/InvisibleMessageMode.js +30 -0
  181. package/src/types/ItemNavigationBehavior.js +2 -7
  182. package/src/types/NavigationMode.js +1 -0
  183. package/src/types/PopupState.js +1 -1
  184. package/src/types/ValueState.js +1 -1
  185. package/src/updateShadowRoot.js +26 -0
  186. package/src/util/AriaLabelHelper.js +41 -0
  187. package/src/util/Caret.js +45 -0
  188. package/src/util/ColorConversion.js +370 -0
  189. package/src/util/FocusableElements.js +25 -8
  190. package/src/util/HTMLSanitizer.js +7 -0
  191. package/src/util/InvisibleMessage.js +58 -0
  192. package/src/util/PopupUtils.js +93 -0
  193. package/src/util/SlotsHelper.js +43 -0
  194. package/src/util/TabbableElements.js +1 -1
  195. package/src/util/arraysAreEqual.js +15 -0
  196. package/src/util/clamp.js +12 -0
  197. package/src/util/debounce.js +17 -0
  198. package/src/util/encodeCSS.js +24 -0
  199. package/src/util/getActiveElement.js +11 -0
  200. package/src/util/getClassCopy.js +10 -0
  201. package/src/util/getEffectiveContentDensity.js +5 -0
  202. package/src/util/getSingletonElementInstance.js +13 -0
  203. package/src/util/isElementInView.js +15 -0
  204. package/src/util/isNodeHidden.js +1 -5
  205. package/src/util/isNodeTabbable.js +4 -4
  206. package/src/util/isValidPropertyName.js +9 -3
  207. package/src/util/setToArray.js +10 -0
  208. package/used-modules.txt +7 -0
  209. package/bundle.es5.js +0 -28
  210. package/dist/SVGIconRegistry.js +0 -60
  211. package/dist/boot.js +0 -32
  212. package/dist/compatibility/DOMObserver.js +0 -62
  213. package/dist/compatibility/patchNodeValue.js +0 -24
  214. package/dist/compatibility/whenPolyfillLoaded.js +0 -26
  215. package/dist/delegate/CustomResize.js +0 -78
  216. package/dist/delegate/NativeResize.js +0 -44
  217. package/dist/features/browsersupport/Edge.js +0 -6
  218. package/dist/features/browsersupport/IE11.js +0 -41
  219. package/dist/features/browsersupport/IE11WithWebComponentsPolyfill.js +0 -5
  220. package/dist/renderer/ifDefined.js +0 -21
  221. package/dist/resources/bundle.es5.js +0 -212
  222. package/dist/resources/bundle.es5.js.map +0 -1
  223. package/dist/theming/CSSVarsPonyfill.js +0 -24
  224. package/dist/theming/adaptCSSForIE.js +0 -90
  225. package/dist/theming/createComponentStyleTag.js +0 -49
  226. package/dist/thirdparty/Array.from.js +0 -16
  227. package/dist/thirdparty/Array.prototype.fill.js +0 -44
  228. package/dist/thirdparty/Array.prototype.find.js +0 -46
  229. package/dist/thirdparty/Array.prototype.includes.js +0 -51
  230. package/dist/thirdparty/Element.prototype.closest.js +0 -11
  231. package/dist/thirdparty/Element.prototype.matches.js +0 -6
  232. package/dist/thirdparty/Map.prototype.keys.js +0 -9
  233. package/dist/thirdparty/Number.isInteger.js +0 -5
  234. package/dist/thirdparty/Number.isNaN.js +0 -1
  235. package/dist/thirdparty/Number.parseInt.js +0 -1
  236. package/dist/thirdparty/Object.assign.js +0 -31
  237. package/dist/thirdparty/Object.entries.js +0 -11
  238. package/dist/thirdparty/Symbol.js +0 -2
  239. package/dist/thirdparty/WeakSet.js +0 -27
  240. package/dist/thirdparty/es6-string-methods.js +0 -182
  241. package/dist/thirdparty/events-polyfills.js +0 -89
  242. package/dist/thirdparty/fetch.js +0 -1
  243. package/dist/thirdparty/template.js +0 -600
  244. package/dist/thirdparty/webcomponents-sd-ce-pf.js +0 -318
  245. package/dist/webcomponentsjs/LICENSE.md +0 -19
  246. package/dist/webcomponentsjs/README.md +0 -229
  247. package/dist/webcomponentsjs/bundles/webcomponents-ce.js +0 -63
  248. package/dist/webcomponentsjs/bundles/webcomponents-ce.js.map +0 -1
  249. package/dist/webcomponentsjs/bundles/webcomponents-sd-ce-pf.js +0 -297
  250. package/dist/webcomponentsjs/bundles/webcomponents-sd-ce-pf.js.map +0 -1
  251. package/dist/webcomponentsjs/bundles/webcomponents-sd-ce.js +0 -208
  252. package/dist/webcomponentsjs/bundles/webcomponents-sd-ce.js.map +0 -1
  253. package/dist/webcomponentsjs/bundles/webcomponents-sd.js +0 -166
  254. package/dist/webcomponentsjs/bundles/webcomponents-sd.js.map +0 -1
  255. package/dist/webcomponentsjs/custom-elements-es5-adapter.js +0 -15
  256. package/dist/webcomponentsjs/package.json +0 -46
  257. package/dist/webcomponentsjs/src/entrypoints/custom-elements-es5-adapter-index.js +0 -16
  258. package/dist/webcomponentsjs/src/entrypoints/webcomponents-bundle-index.js +0 -53
  259. package/dist/webcomponentsjs/src/entrypoints/webcomponents-ce-index.js +0 -17
  260. package/dist/webcomponentsjs/src/entrypoints/webcomponents-sd-ce-index.js +0 -19
  261. package/dist/webcomponentsjs/src/entrypoints/webcomponents-sd-ce-pf-index.js +0 -28
  262. package/dist/webcomponentsjs/src/entrypoints/webcomponents-sd-index.js +0 -18
  263. package/dist/webcomponentsjs/webcomponents-bundle.js +0 -298
  264. package/dist/webcomponentsjs/webcomponents-bundle.js.map +0 -1
  265. package/dist/webcomponentsjs/webcomponents-loader.js +0 -185
  266. package/src/SVGIconRegistry.js +0 -60
  267. package/src/boot.js +0 -32
  268. package/src/compatibility/DOMObserver.js +0 -62
  269. package/src/compatibility/patchNodeValue.js +0 -24
  270. package/src/compatibility/whenPolyfillLoaded.js +0 -26
  271. package/src/delegate/CustomResize.js +0 -78
  272. package/src/delegate/NativeResize.js +0 -44
  273. package/src/features/browsersupport/Edge.js +0 -6
  274. package/src/features/browsersupport/IE11.js +0 -41
  275. package/src/features/browsersupport/IE11WithWebComponentsPolyfill.js +0 -5
  276. package/src/renderer/ifDefined.js +0 -21
  277. package/src/theming/CSSVarsPonyfill.js +0 -24
  278. package/src/theming/adaptCSSForIE.js +0 -90
  279. package/src/theming/createComponentStyleTag.js +0 -49
  280. package/src/thirdparty/Array.from.js +0 -16
  281. package/src/thirdparty/Array.prototype.fill.js +0 -44
  282. package/src/thirdparty/Array.prototype.find.js +0 -46
  283. package/src/thirdparty/Array.prototype.includes.js +0 -51
  284. package/src/thirdparty/Element.prototype.closest.js +0 -11
  285. package/src/thirdparty/Element.prototype.matches.js +0 -6
  286. package/src/thirdparty/Map.prototype.keys.js +0 -9
  287. package/src/thirdparty/Number.isInteger.js +0 -5
  288. package/src/thirdparty/Number.isNaN.js +0 -1
  289. package/src/thirdparty/Number.parseInt.js +0 -1
  290. package/src/thirdparty/Object.assign.js +0 -31
  291. package/src/thirdparty/Object.entries.js +0 -11
  292. package/src/thirdparty/Symbol.js +0 -2
  293. package/src/thirdparty/WeakSet.js +0 -27
  294. package/src/thirdparty/es6-string-methods.js +0 -182
  295. package/src/thirdparty/events-polyfills.js +0 -89
  296. package/src/thirdparty/fetch.js +0 -1
  297. package/src/thirdparty/template.js +0 -600
  298. package/src/thirdparty/webcomponents-sd-ce-pf.js +0 -318
@@ -1,13 +1,17 @@
1
- import { registerThemeProperties } from "../../asset-registries/Themes.js";
1
+ import { registerThemePropertiesLoader } from "../../asset-registries/Themes.js";
2
2
 
3
3
  const fiori3 = `:root{ --var1: red; }`;
4
4
  const fiori3Dark = `:root{ --var1: green; }`;
5
5
  const belize = `:root{ --var1: blue; }`;
6
6
  const belizeHcb = `:root{ --var1: orange; }`;
7
7
  const belizeHcw = `:root{ --var1: orange; }`;
8
+ const fiori3Hcb = `:root{ --var1: yellow; }`;
9
+ const fiori3Hcw = `:root{ --var1: yellow; }`;
8
10
 
9
- registerThemeProperties("@ui5/webcomponents-base-test", "sap_fiori_3", fiori3);
10
- registerThemeProperties("@ui5/webcomponents-base-test", "sap_fiori_3_dark", fiori3Dark);
11
- registerThemeProperties("@ui5/webcomponents-base-test", "sap_belize", belize);
12
- registerThemeProperties("@ui5/webcomponents-base-test", "sap_belize_hcb", belizeHcb);
13
- registerThemeProperties("@ui5/webcomponents-base-test", "sap_belize_hcw", belizeHcw);
11
+ registerThemePropertiesLoader("@ui5/webcomponents-base-test", "sap_fiori_3", () => fiori3);
12
+ registerThemePropertiesLoader("@ui5/webcomponents-base-test", "sap_fiori_3_dark", () => fiori3Dark);
13
+ registerThemePropertiesLoader("@ui5/webcomponents-base-test", "sap_belize", () => belize);
14
+ registerThemePropertiesLoader("@ui5/webcomponents-base-test", "sap_belize_hcb", () => belizeHcb);
15
+ registerThemePropertiesLoader("@ui5/webcomponents-base-test", "sap_belize_hcw", () => belizeHcw);
16
+ registerThemePropertiesLoader("@ui5/webcomponents-base-test", "sap_fiori_3_hcb", () => fiori3Hcb);
17
+ registerThemePropertiesLoader("@ui5/webcomponents-base-test", "sap_fiori_3_hcw", () => fiori3Hcw);
@@ -7,11 +7,15 @@ const metadata = {
7
7
  slots: {
8
8
  default: {
9
9
  type: Node,
10
- listenFor: ["prop1"],
10
+ invalidateOnChildChange: {
11
+ properties: ["prop1"]
12
+ },
11
13
  },
12
14
  items: {
13
15
  type: HTMLElement,
14
- listenFor: { include: ["*"], exclude: ["prop3"] }
16
+ invalidateOnChildChange: {
17
+ properties: true
18
+ },
15
19
  }
16
20
  }
17
21
  };
@@ -27,8 +27,9 @@ class WithStaticArea extends UI5Element {
27
27
 
28
28
  static get template() {
29
29
  return element => {
30
+ // access effectiveDir getter to mark control as RTL-aware (test changes dir attribute and expects rerender)
30
31
  return html`
31
- <div>
32
+ <div dir=${element.effectiveDir}>
32
33
  WithStaticArea works!
33
34
  </div>`;
34
35
  };
@@ -6,10 +6,7 @@
6
6
 
7
7
  <title>Base package default test page</title>
8
8
 
9
- <script src="../../webcomponentsjs/webcomponents-loader.js"></script>
10
9
  <script src="../../resources/bundle.esm.js" type="module"></script>
11
- <script nomodule src="../../resources/bundle.es5.js"></script>
12
-
13
10
  </head>
14
11
 
15
12
  <body>
@@ -38,5 +35,8 @@
38
35
 
39
36
  <ui5-with-static-area id="no-static-area"></ui5-with-static-area>
40
37
  <ui5-with-static-area id="with-static-area" static-content></ui5-with-static-area>
38
+ <div id="with-static-area-rtl-container" dir="rtl">
39
+ <ui5-with-static-area id="with-static-area-rtl" static-content></ui5-with-static-area>
40
+ </div>
41
41
  </body>
42
42
  </html>
@@ -6,9 +6,7 @@
6
6
 
7
7
  <title>Base package default test page</title>
8
8
 
9
- <script src="../../webcomponentsjs/webcomponents-loader.js"></script>
10
9
  <script src="../../resources/bundle.esm.js" type="module"></script>
11
- <script nomodule src="../../resources/bundle.es5.js"></script>
12
10
 
13
11
  </head>
14
12
 
@@ -17,14 +17,12 @@
17
17
  },
18
18
  "theme": "sap_belize_hcb",
19
19
  "noConflict": {
20
- "events": ["selectionChange", "headerClick"]
20
+ "events": ["selection-change", "header-click"]
21
21
  }
22
22
  }
23
23
  </script>
24
24
 
25
- <script src="../../webcomponentsjs/webcomponents-loader.js"></script>
26
25
  <script src="../../resources/bundle.esm.js" type="module"></script>
27
- <script nomodule src="../../resources/bundle.es5.js"></script>
28
26
 
29
27
  </head>
30
28
 
@@ -0,0 +1 @@
1
+ PLEASE_WAIT=Bitte warten
@@ -0,0 +1 @@
1
+ PLEASE_WAIT=Please wait
@@ -0,0 +1 @@
1
+ PLEASE_WAIT=Espere
@@ -0,0 +1 @@
1
+ PLEASE_WAIT=Patientez.
@@ -0,0 +1,35 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
5
+ <meta charset="utf-8">
6
+
7
+ <title>i18n</title>
8
+
9
+ <script src="../../resources/bundle.esm.js" ></script>
10
+
11
+ </head>
12
+
13
+ <body>
14
+
15
+ <script>
16
+
17
+ const demo = async () => {
18
+ ["de", "es", "fr", "en"].forEach(localeId => registerI18nLoader("myApp", localeId, () => `./assets/messagebundle_${localeId}.properties`));
19
+
20
+ await fetchI18nBundle("myApp");
21
+
22
+ const bundle = getI18nBundle("myApp");
23
+
24
+ const pleaseWait = bundle.getText("PLEASE_WAIT");
25
+ console.log("Please wait in the current language is: ", pleaseWait);
26
+ };
27
+
28
+ demo();
29
+
30
+
31
+ </script>
32
+
33
+
34
+ </body>
35
+ </html>
@@ -1,25 +1,27 @@
1
1
  const assert = require("chai").assert;
2
2
 
3
3
  describe("Some configuration options can be changed at runtime", () => {
4
- browser.url("http://localhost:9191/test-resources/pages/Configuration.html");
4
+ before(async () => {
5
+ await browser.url("http://localhost:9191/test-resources/pages/Configuration.html");
6
+ });
5
7
 
6
- it("Tests that theme can be changed", () => {
8
+ it("Tests that theme can be changed", async () => {
7
9
  const newTheme = 'sap_belize_hcb';
8
10
 
9
- const res = browser.executeAsync( async (newTheme, done) => {
11
+ const res = await browser.executeAsync( async (newTheme, done) => {
10
12
  const config = window['sap-ui-webcomponents-bundle'].configuration;
11
13
  await config.setTheme(newTheme);
12
- return done(config.getTheme());
14
+ done(config.getTheme());
13
15
  }, newTheme);
14
16
  assert.strictEqual(res, newTheme, "Theme changed to HCB");
15
17
  });
16
18
 
17
- it("Tests that noConflict can be changed", () => {
18
- const res = browser.execute( () => {
19
+ it("Tests that noConflict can be changed", async () => {
20
+ const res = await browser.executeAsync(done => {
19
21
  const config = window['sap-ui-webcomponents-bundle'].configuration;
20
- config.setNoConflict({events: ["selectionChange"]});
21
- return config.getNoConflict();
22
+ config.setNoConflict({events: ["selection-change"]});
23
+ done(config.getNoConflict());
22
24
  });
23
- assert.strictEqual(res.events.includes("selectionChange"), true, "selectionChange was successfully registered as a no conflict event");
25
+ assert.include(res.events, "selection-change", "selection-change was successfully registered as a no conflict event");
24
26
  });
25
27
  });
@@ -1,60 +1,62 @@
1
1
  const assert = require("chai").assert;
2
2
 
3
3
  describe("Configuration script has effect", () => {
4
- browser.url("http://localhost:9191/test-resources/pages/ConfigurationScript.html");
4
+ before(async () => {
5
+ await browser.url("http://localhost:9191/test-resources/pages/ConfigurationScript.html?do-not-change-configuration");
6
+ });
5
7
 
6
- it("Tests that RTL is applied", () => {
7
- const res = browser.execute( () => {
8
+ it("Tests that RTL is applied", async () => {
9
+ const res = await browser.executeAsync(done => {
8
10
  const config = window['sap-ui-webcomponents-bundle'].configuration;
9
- return config.getRTL();
11
+ done(config.getRTL());
10
12
  });
11
13
  assert.strictEqual(res, true, "RTL is true");
12
14
  });
13
15
 
14
- it("Tests that language is applied", () => {
15
- const res = browser.execute( () => {
16
+ it("Tests that language is applied", async () => {
17
+ const res = await browser.executeAsync(done => {
16
18
  const config = window['sap-ui-webcomponents-bundle'].configuration;
17
- return config.getLanguage();
19
+ done(config.getLanguage());
18
20
  });
19
21
  assert.strictEqual(res, 'ja', "language is japanese");
20
22
  });
21
23
 
22
- it("Tests that calendarType is applied", () => {
23
- const res = browser.execute( () => {
24
+ it("Tests that calendarType is applied", async () => {
25
+ const res = await browser.executeAsync(done => {
24
26
  const config = window['sap-ui-webcomponents-bundle'].configuration;
25
- return config.getCalendarType();
27
+ done(config.getCalendarType());
26
28
  });
27
29
  assert.strictEqual(res, 'Japanese', "calendarType is japanese");
28
30
  });
29
31
 
30
- it("Tests that formatSettings are applied", () => {
31
- const res = browser.execute( () => {
32
+ it("Tests that formatSettings are applied", async () => {
33
+ const res = await browser.executeAsync(done => {
32
34
  const config = window['sap-ui-webcomponents-bundle'].configuration;
33
- return config.getFirstDayOfWeek();
35
+ done(config.getFirstDayOfWeek());
34
36
  });
35
37
  assert.strictEqual(res, 0, "First day of week is applied");
36
38
  });
37
39
 
38
- it("Tests that theme is applied", () => {
39
- const res = browser.execute( () => {
40
+ it("Tests that theme is applied", async () => {
41
+ const res = await browser.executeAsync(done => {
40
42
  const config = window['sap-ui-webcomponents-bundle'].configuration;
41
- return config.getTheme();
43
+ done(config.getTheme());
42
44
  });
43
45
  assert.strictEqual(res, 'sap_belize_hcb', "Thems is HCB");
44
46
  });
45
47
 
46
- it("Tests that noConflict is applied", () => {
47
- const res = browser.execute( () => {
48
+ it("Tests that noConflict is applied", async () => {
49
+ const res = await browser.executeAsync(done => {
48
50
  const config = window['sap-ui-webcomponents-bundle'].configuration;
49
- return config.getNoConflict();
51
+ done(config.getNoConflict());
50
52
  });
51
- assert.strictEqual(res.events.includes("selectionChange"), true, "selectionChange was successfully registered as a no conflict event");
53
+ assert.include(res.events, "selection-change", "selectionChange was successfully registered as a no conflict event");
52
54
  });
53
55
 
54
- it("Tests that animationMode is applied", () => {
55
- const res = browser.execute( () => {
56
+ it("Tests that animationMode is applied", async () => {
57
+ const res = await browser.executeAsync(done => {
56
58
  const config = window['sap-ui-webcomponents-bundle'].configuration;
57
- return config.getAnimationMode();
59
+ done(config.getAnimationMode());
58
60
  });
59
61
  assert.strictEqual(res, 'basic', "animationMode is basic");
60
62
  });
@@ -1,45 +1,93 @@
1
1
  const assert = require("chai").assert;
2
2
 
3
- describe("Some settings can be set via URL params", () => {
4
- browser.url("http://localhost:9191/test-resources/pages/Configuration.html?sap-ui-rtl=true&sap-ui-language=ja&sap-ui-calendarType=Japanese&sap-ui-theme=sap_belize_hcb&sap-ui-animationMode=basic");
3
+ describe("Some settings can be set via SAP UI URL params", () => {
4
+ before(async () => {
5
+ await browser.url("http://localhost:9191/test-resources/pages/Configuration.html?sap-ui-rtl=true&sap-ui-language=ja&sap-ui-calendarType=Japanese&sap-ui-theme=sap_belize_hcb&sap-ui-animationMode=basic");
6
+ });
5
7
 
6
- it("Tests that RTL is applied", () => {
7
- const res = browser.execute( () => {
8
+ it("Tests that RTL is applied", async () => {
9
+ const res = await browser.executeAsync(done => {
8
10
  const config = window['sap-ui-webcomponents-bundle'].configuration;
9
- return config.getRTL();
11
+ done(config.getRTL());
10
12
  });
11
13
  assert.strictEqual(res, true, "RTL is true");
12
14
  });
13
15
 
14
- it("Tests that language is applied", () => {
15
- const res = browser.execute( () => {
16
+ it("Tests that language is applied", async () => {
17
+ const res = await browser.executeAsync(done => {
16
18
  const config = window['sap-ui-webcomponents-bundle'].configuration;
17
- return config.getLanguage();
19
+ done(config.getLanguage());
18
20
  });
19
21
  assert.strictEqual(res, 'ja', "language is japanese");
20
22
  });
21
23
 
22
- it("Tests that calendarType is applied", () => {
23
- const res = browser.execute( () => {
24
+ it("Tests that calendarType is applied", async () => {
25
+ const res = await browser.executeAsync(done => {
24
26
  const config = window['sap-ui-webcomponents-bundle'].configuration;
25
- return config.getCalendarType();
27
+ done(config.getCalendarType());
26
28
  });
27
29
  assert.strictEqual(res, 'Japanese', "calendarType is japanese");
28
30
  });
29
31
 
30
- it("Tests that theme is applied", () => {
31
- const res = browser.execute( () => {
32
+ it("Tests that theme is applied", async () => {
33
+ const res = await browser.executeAsync(done => {
32
34
  const config = window['sap-ui-webcomponents-bundle'].configuration;
33
- return config.getTheme();
35
+ done(config.getTheme());
34
36
  });
35
37
  assert.strictEqual(res, 'sap_belize_hcb', "Thems is HCB");
36
38
  });
37
39
 
38
- it("Tests that animationMode is applied", () => {
39
- const res = browser.execute( () => {
40
+ it("Tests that animationMode is applied", async () => {
41
+ const res = await browser.executeAsync(done => {
40
42
  const config = window['sap-ui-webcomponents-bundle'].configuration;
41
- return config.getAnimationMode();
43
+ done(config.getAnimationMode());
42
44
  });
43
45
  assert.strictEqual(res, 'basic', "animationMode is basic");
44
46
  });
45
47
  });
48
+
49
+
50
+ describe("Some settings can be set via SAP URL params", () => {
51
+ before(async () => {
52
+ await browser.url("http://localhost:9191/test-resources/pages/Configuration.html?sap-language=bg&sap-theme=sap_fiori_3_dark");
53
+ });
54
+
55
+ it("Tests that language is applied", async () => {
56
+ const res = await browser.executeAsync(done => {
57
+ const config = window['sap-ui-webcomponents-bundle'].configuration;
58
+ done(config.getLanguage());
59
+ });
60
+ assert.strictEqual(res, 'bg', "language is bulgarian");
61
+ });
62
+
63
+ it("Tests that theme is applied", async () => {
64
+ const res = await browser.executeAsync(done => {
65
+ const config = window['sap-ui-webcomponents-bundle'].configuration;
66
+ done(config.getTheme());
67
+ });
68
+ assert.strictEqual(res, 'sap_fiori_3_dark', "Thems is Fiori Dark");
69
+ });
70
+ });
71
+
72
+
73
+ describe("SAP UI params take precedence over the SAP params", () => {
74
+ before(async () => {
75
+ await browser.url("http://localhost:9191/test-resources/pages/Configuration.html?sap-language=bg&sap-ui-language=de&sap-theme=sap_fiori_3_dark&sap-theme=sap_fiori_3_hcb");
76
+ });
77
+
78
+ it("Tests that language is applied via sap-ui-language", async () => {
79
+ const res = await browser.executeAsync(done => {
80
+ const config = window['sap-ui-webcomponents-bundle'].configuration;
81
+ done(config.getLanguage());
82
+ });
83
+ assert.strictEqual(res, 'de', "language is german");
84
+ });
85
+
86
+ it("Tests that theme is applied via sap-ui-theme", async () => {
87
+ const res = await browser.executeAsync(done => {
88
+ const config = window['sap-ui-webcomponents-bundle'].configuration;
89
+ done(config.getTheme());
90
+ });
91
+ assert.strictEqual(res, 'sap_fiori_3_hcb', "Thems is Fiori HCB");
92
+ });
93
+ });
@@ -1,22 +1,24 @@
1
1
  const assert = require("chai").assert;
2
2
 
3
3
  describe("Custom themes can be registered", () => {
4
- browser.url("http://localhost:9191/test-resources/pages/AllTestElements.html");
4
+ before(async () => {
5
+ await browser.url("http://localhost:9191/test-resources/pages/AllTestElements.html");
6
+ });
5
7
 
6
- it("Tests that theme parameters are changed on theme change", () => {
8
+ it("Tests that theme parameters are changed on theme change", async () => {
7
9
  const newTheme = 'my_custom_theme';
8
10
 
9
- const res = browser.executeAsync( async (newTheme, done) => {
11
+ const res = await browser.executeAsync( async (newTheme, done) => {
10
12
  const var1 = "--var1: #555555";
11
13
 
12
- window.registerThemeProperties("@ui5/webcomponents-base-test", newTheme, `:root{ ${var1}; }`);
14
+ window.registerThemePropertiesLoader("@ui5/webcomponents-base-test", newTheme, () => `:root{ ${var1}; }`);
13
15
 
14
16
  const config = window['sap-ui-webcomponents-bundle'].configuration;
15
17
  await config.setTheme(newTheme);
16
18
 
17
19
  const style = document.querySelector(`style[data-ui5-theme-properties="@ui5/webcomponents-base-test"]`);
18
20
  const varsFound = style && style.textContent.includes(var1);
19
- return done(varsFound);
21
+ done(varsFound);
20
22
  }, newTheme);
21
23
 
22
24
  assert.strictEqual(res, true, "Theme parameters changed");
@@ -0,0 +1,63 @@
1
+ const assert = require("chai").assert;
2
+
3
+ describe("Event provider attaches and detaches listeners properly", () => {
4
+ before(async () => {
5
+ await browser.url("http://localhost:9191/test-resources/pages/AllTestElements.html");
6
+ });
7
+
8
+ it("Tests that listeners can be removed (1 listener)", async () => {
9
+
10
+ const res = await browser.executeAsync(done => {
11
+ let timesCalled = 0;
12
+ const ep = new window["sap-ui-webcomponents-bundle"].EventProvider();
13
+ const callback = () => {
14
+ timesCalled++;
15
+ };
16
+
17
+ // Setup
18
+ ep.attachEvent("test", callback);
19
+
20
+ // Act
21
+ ep.fireEvent("test"); // should execute the callback and increase the counter
22
+
23
+ // Setup
24
+ ep.detachEvent("test", callback);
25
+
26
+ // Act
27
+ ep.fireEvent("test"); // should not execute the callback and increase the counter
28
+
29
+ done(timesCalled);
30
+ });
31
+
32
+ assert.strictEqual(res, 1, "The callback should be called exactly once");
33
+ });
34
+
35
+ it("Tests that listeners can be removed (more than 1 listener)", async () => {
36
+
37
+ const res = await browser.executeAsync(done => {
38
+ let timesCalled = 0;
39
+ const ep = new window["sap-ui-webcomponents-bundle"].EventProvider();
40
+ const callback = () => {
41
+ timesCalled++;
42
+ };
43
+ const somePreviousCallback = () => {};
44
+
45
+ // Setup
46
+ ep.attachEvent("test", somePreviousCallback); // Attach something so that after detachEvent the listeners array is not empty!
47
+ ep.attachEvent("test", callback);
48
+
49
+ // Act
50
+ ep.fireEvent("test"); // should execute the callback and increase the counter
51
+
52
+ // Setup
53
+ ep.detachEvent("test", callback);
54
+
55
+ // Act
56
+ ep.fireEvent("test"); // should not execute the callback and increase the counter
57
+
58
+ done(timesCalled);
59
+ });
60
+
61
+ assert.strictEqual(res, 1, "The callback should be called exactly once");
62
+ });
63
+ });
@@ -1,24 +1,26 @@
1
1
  const assert = require("chai").assert;
2
2
 
3
3
  describe("Some configuration options can be changed at runtime", () => {
4
- browser.url("http://localhost:9191/test-resources/pages/AllTestElements.html");
4
+ before(async () => {
5
+ await browser.url("http://localhost:9191/test-resources/pages/AllTestElements.html");
6
+ });
5
7
 
6
- it("Tests control with no static area item", () => {
7
- const componentId = browser.$("#no-static-area").getProperty("_id");
8
- const staticArea = browser.$("ui5-static-area");
8
+ it("Tests control with no static area item", async () => {
9
+ const componentId = await browser.$("#no-static-area").getProperty("_id");
10
+ const staticArea = await browser.$("ui5-static-area");
9
11
 
10
- assert.notOk(staticArea.$(`.${componentId}`).isExisting(), "No static area item is defined for this control");
12
+ assert.notOk(await staticArea.$(`.${componentId}`).isExisting(), "No static area item is defined for this control");
11
13
  });
12
14
 
13
- it("Tests control with static area item", () => {
14
- const componentId = browser.$("#with-static-area").getProperty("_id");
15
- const staticArea = browser.$("ui5-static-area");
15
+ it("Tests control with static area item", async () => {
16
+ const componentId = await browser.$("#with-static-area").getProperty("_id");
17
+ const staticArea = await browser.$("ui5-static-area");
16
18
 
17
- assert.ok(staticArea.$(`.${componentId}`).isExisting(), "No static area item is defined for this control");
19
+ assert.ok(await staticArea.$(`.${componentId}`).isExisting(), "No static area item is defined for this control");
18
20
  });
19
21
 
20
- it("Tests removing an element with static area", () => {
21
- const result = browser.execute(() => {
22
+ it("Tests removing an element with static area", async () => {
23
+ const result = await browser.executeAsync(done => {
22
24
  let res = true;
23
25
  window.onerror = (errorMsg, url, lineNumber) => {
24
26
  res = false;
@@ -26,9 +28,51 @@ describe("Some configuration options can be changed at runtime", () => {
26
28
 
27
29
  document.querySelector("#no-static-area").remove();
28
30
 
29
- return res;
31
+ done(res);
30
32
  });
31
33
 
32
34
  assert.ok(result, "Static area removed from DOM successfully");
33
35
  });
36
+
37
+ it("Test RTL not set for static area items", async () => {
38
+ const componentId = await browser.$("#with-static-area").getProperty("_id");
39
+ const staticArea = await browser.$("ui5-static-area");
40
+
41
+ assert.notOk(await staticArea.$(`.${componentId}`).getAttribute("dir"), "dir attribute not set for static area item");
42
+ });
43
+
44
+ it("Test RTL set for static area items", async () => {
45
+ const componentId = await browser.$("#with-static-area-rtl").getProperty("_id");
46
+ const staticArea = await browser.$("ui5-static-area");
47
+
48
+ assert.equal(await staticArea.$(`.${componentId}`).getAttribute("dir"), "rtl", "dir property correctly set for static area item");
49
+ });
50
+
51
+ it("Test setting RTL for a static area item owner", async () => {
52
+ const componentId = await browser.$("#with-static-area").getProperty("_id");
53
+ const staticArea = await browser.$("ui5-static-area");
54
+
55
+ await browser.$("#with-static-area").setAttribute("dir", "rtl");
56
+ await browser.executeAsync( async (done) => {
57
+ await window["sap-ui-webcomponents-bundle"].applyDirection();
58
+ await window["sap-ui-webcomponents-bundle"].renderFinished();
59
+
60
+ done();
61
+ });
62
+ assert.equal(await staticArea.$(`.${componentId}`).getAttribute("dir"), "rtl", "dir attribute dynamically set for static area item owner");
63
+ });
64
+
65
+ it("Test removing RTL for a static area item owner", async () => {
66
+ const componentId = await browser.$("#with-static-area-rtl").getProperty("_id");
67
+ const staticArea = await browser.$("ui5-static-area");
68
+
69
+ await browser.$("#with-static-area-rtl-container").removeAttribute("dir");
70
+ await browser.executeAsync( async (done) => {
71
+ await window["sap-ui-webcomponents-bundle"].applyDirection();
72
+ await window["sap-ui-webcomponents-bundle"].renderFinished();
73
+
74
+ done();
75
+ });
76
+ assert.notOk(await staticArea.$(`.${componentId}`).getAttribute("dir"), "dir attribute dynamically removed for static area item owner");
77
+ });
34
78
  });
@@ -1,28 +1,30 @@
1
1
  const assert = require("chai").assert;
2
2
 
3
3
  describe("Theming works", () => {
4
- browser.url("http://localhost:9191/test-resources/pages/AllTestElements.html");
4
+ before(async () => {
5
+ await browser.url("http://localhost:9191/test-resources/pages/AllTestElements.html");
6
+ });
5
7
 
6
- it("Tests that the parameters for the default theme are embedded on boot", () => {
8
+ it("Tests that the parameters for the default theme are embedded on boot", async () => {
7
9
 
8
- const res = browser.execute(() => {
10
+ const res = await browser.executeAsync(done => {
9
11
  const style = document.querySelector(`style[data-ui5-theme-properties="@ui5/webcomponents-base-test"]`);
10
- return style && style.textContent.includes("--var1: red"); // see test/assets/Themes.js
12
+ done(style && style.textContent.includes("--var1: red")); // see test/assets/Themes.js
11
13
  });
12
14
 
13
15
  assert.strictEqual(res, true, "The fiori3 vars are found");
14
16
  });
15
17
 
16
- it("Tests that theme parameters are changed on theme change", () => {
18
+ it("Tests that theme parameters are changed on theme change", async () => {
17
19
  const newTheme = 'sap_belize_hcb';
18
20
 
19
- const res = browser.executeAsync( async (newTheme, done) => {
21
+ const res = await browser.executeAsync( async (newTheme, done) => {
20
22
  const config = window['sap-ui-webcomponents-bundle'].configuration;
21
23
  await config.setTheme(newTheme);
22
24
 
23
25
  const style = document.querySelector(`style[data-ui5-theme-properties="@ui5/webcomponents-base-test"]`);
24
26
  const varsFound = style && style.textContent.includes("--var1: orange"); // see test/assets/Themes.js
25
- return done(varsFound);
27
+ done(varsFound);
26
28
  }, newTheme);
27
29
 
28
30
  assert.strictEqual(res, true, "Theme parameters changed");