@ui5/webcomponents-base 0.0.0-cc312800a → 0.0.0-cf50976ce

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 (209) hide show
  1. package/.eslintignore +3 -1
  2. package/CHANGELOG.md +280 -0
  3. package/README.md +53 -7
  4. package/bundle.esm.js +13 -11
  5. package/dist/Boot.js +34 -18
  6. package/dist/CSP.js +59 -0
  7. package/dist/CustomElementsRegistry.js +60 -4
  8. package/dist/CustomElementsScope.js +20 -98
  9. package/dist/CustomElementsScopeUtils.js +108 -0
  10. package/dist/Device.js +22 -1
  11. package/dist/EventProvider.js +19 -25
  12. package/dist/FeaturesRegistry.js +4 -1
  13. package/dist/FontFace.js +7 -95
  14. package/dist/InitialConfiguration.js +31 -14
  15. package/dist/Keys.js +62 -0
  16. package/dist/ManagedStyles.js +83 -0
  17. package/dist/Render.js +3 -1
  18. package/dist/Runtimes.js +107 -0
  19. package/dist/StaticAreaItem.js +15 -10
  20. package/dist/SystemCSSVars.js +4 -25
  21. package/dist/UI5Element.js +71 -60
  22. package/dist/UI5ElementMetadata.js +18 -2
  23. package/dist/asset-registries/Icons.js +26 -9
  24. package/dist/asset-registries/Illustrations.js +30 -0
  25. package/dist/asset-registries/LocaleData.js +18 -4
  26. package/dist/asset-registries/Themes.js +6 -2
  27. package/dist/asset-registries/i18n.js +3 -1
  28. package/dist/assets/bundle.esm.83f057b4.js +43 -0
  29. package/dist/assets-meta/IconCollectionsAlias.js +18 -0
  30. package/dist/config/Icons.js +52 -0
  31. package/dist/config/Theme.js +25 -0
  32. package/dist/css/BusyIndicator.css +80 -0
  33. package/dist/css/FontFace.css +66 -0
  34. package/dist/css/OverrideFontFace.css +32 -0
  35. package/dist/css/SystemCSSVars.css +17 -0
  36. package/dist/delegate/ItemNavigation.js +75 -4
  37. package/dist/delegate/ScrollEnablement.js +7 -1
  38. package/dist/features/F6Navigation.js +110 -0
  39. package/dist/features/OpenUI5Enablement.js +119 -0
  40. package/dist/generated/AssetParameters.js +1 -1
  41. package/dist/generated/VersionInfo.js +10 -0
  42. package/dist/generated/css/BusyIndicator.css.js +5 -0
  43. package/dist/generated/css/FontFace.css.js +5 -0
  44. package/dist/generated/css/OverrideFontFace.css.js +5 -0
  45. package/dist/generated/css/SystemCSSVars.css.js +5 -0
  46. package/dist/i18nBundle.js +34 -3
  47. package/dist/renderer/LitRenderer.js +39 -18
  48. package/dist/renderer/directives/style-map.js +72 -0
  49. package/dist/renderer/executeTemplate.js +19 -2
  50. package/dist/sap/base/Log.js +241 -0
  51. package/dist/sap/base/assert.js +8 -0
  52. package/dist/sap/base/security/URLListValidator.js +148 -0
  53. package/dist/sap/base/security/encodeCSS.js +14 -0
  54. package/dist/sap/base/security/encodeXML.js +23 -0
  55. package/dist/sap/base/security/sanitizeHTML.js +16 -0
  56. package/dist/sap/base/strings/toHex.js +8 -0
  57. package/dist/sap/base/util/now.js +7 -0
  58. package/dist/sap/ui/thirdparty/caja-html-sanitizer.js +3585 -0
  59. package/dist/theming/CustomStyle.js +23 -3
  60. package/dist/theming/applyTheme.js +11 -10
  61. package/dist/theming/getEffectiveLinksHrefs.js +27 -0
  62. package/dist/theming/getEffectiveStyle.js +9 -0
  63. package/dist/theming/getStylesString.js +4 -2
  64. package/dist/theming/getThemeDesignerTheme.js +25 -5
  65. package/dist/theming/preloadLinks.js +23 -0
  66. package/dist/types/DOMReference.js +24 -0
  67. package/dist/types/DataType.js +12 -0
  68. package/dist/types/Float.js +4 -0
  69. package/dist/types/Integer.js +4 -0
  70. package/dist/types/InvisibleMessageMode.js +30 -0
  71. package/dist/updateShadowRoot.js +9 -6
  72. package/dist/util/AriaLabelHelper.js +6 -8
  73. package/dist/util/Caret.js +1 -14
  74. package/dist/util/ColorConversion.js +30 -2
  75. package/dist/util/FocusableElements.js +13 -7
  76. package/dist/util/HTMLSanitizer.js +7 -0
  77. package/dist/util/InvisibleMessage.js +69 -0
  78. package/dist/util/PopupUtils.js +1 -1
  79. package/dist/util/TabbableElements.js +5 -1
  80. package/dist/util/createLinkInHead.js +19 -0
  81. package/dist/util/escapeRegex.js +10 -0
  82. package/dist/util/generateHighlightedMarkup.js +42 -0
  83. package/dist/util/getEffectiveScrollbarStyle.js +5 -0
  84. package/dist/util/getNormalizedTarget.js +16 -0
  85. package/dist/util/isDefaultSlotProvided.js +11 -0
  86. package/dist/util/isNodeHidden.js +1 -1
  87. package/dist/util/isNodeTabbable.js +4 -4
  88. package/hash.txt +1 -1
  89. package/index.js +1 -1
  90. package/lib/generate-asset-parameters/index.js +8 -5
  91. package/lib/generate-styles/index.js +26 -0
  92. package/lib/generate-version-info/index.js +32 -0
  93. package/package-scripts.js +36 -23
  94. package/package.json +18 -9
  95. package/src/Boot.js +34 -18
  96. package/src/CSP.js +59 -0
  97. package/src/CustomElementsRegistry.js +60 -4
  98. package/src/CustomElementsScope.js +20 -98
  99. package/src/CustomElementsScopeUtils.js +108 -0
  100. package/src/Device.js +22 -1
  101. package/src/EventProvider.js +19 -25
  102. package/src/FeaturesRegistry.js +4 -1
  103. package/src/FontFace.js +7 -95
  104. package/src/InitialConfiguration.js +31 -14
  105. package/src/Keys.js +62 -0
  106. package/src/ManagedStyles.js +83 -0
  107. package/src/Render.js +3 -1
  108. package/src/Runtimes.js +107 -0
  109. package/src/StaticAreaItem.js +15 -10
  110. package/src/SystemCSSVars.js +4 -25
  111. package/src/UI5Element.js +71 -60
  112. package/src/UI5ElementMetadata.js +18 -2
  113. package/src/asset-registries/Icons.js +26 -9
  114. package/src/asset-registries/Illustrations.js +30 -0
  115. package/src/asset-registries/LocaleData.js +18 -4
  116. package/src/asset-registries/Themes.js +6 -2
  117. package/src/asset-registries/i18n.js +3 -1
  118. package/src/assets-meta/IconCollectionsAlias.js +18 -0
  119. package/src/config/Icons.js +52 -0
  120. package/src/config/Theme.js +25 -0
  121. package/src/css/BusyIndicator.css +80 -0
  122. package/src/css/FontFace.css +66 -0
  123. package/src/css/OverrideFontFace.css +32 -0
  124. package/src/css/SystemCSSVars.css +17 -0
  125. package/src/delegate/ItemNavigation.js +75 -4
  126. package/src/delegate/ScrollEnablement.js +7 -1
  127. package/src/features/F6Navigation.js +110 -0
  128. package/src/features/OpenUI5Enablement.js +119 -0
  129. package/src/i18nBundle.js +34 -3
  130. package/src/renderer/LitRenderer.js +39 -18
  131. package/src/renderer/directives/style-map.js +72 -0
  132. package/src/renderer/executeTemplate.js +19 -2
  133. package/src/theming/CustomStyle.js +23 -3
  134. package/src/theming/applyTheme.js +11 -10
  135. package/src/theming/getEffectiveLinksHrefs.js +27 -0
  136. package/src/theming/getEffectiveStyle.js +9 -0
  137. package/src/theming/getStylesString.js +4 -2
  138. package/src/theming/getThemeDesignerTheme.js +25 -5
  139. package/src/theming/preloadLinks.js +23 -0
  140. package/src/types/DOMReference.js +24 -0
  141. package/src/types/DataType.js +12 -0
  142. package/src/types/Float.js +4 -0
  143. package/src/types/Integer.js +4 -0
  144. package/src/types/InvisibleMessageMode.js +30 -0
  145. package/src/updateShadowRoot.js +9 -6
  146. package/src/util/AriaLabelHelper.js +6 -8
  147. package/src/util/Caret.js +1 -14
  148. package/src/util/ColorConversion.js +30 -2
  149. package/src/util/FocusableElements.js +13 -7
  150. package/src/util/HTMLSanitizer.js +7 -0
  151. package/src/util/InvisibleMessage.js +69 -0
  152. package/src/util/PopupUtils.js +1 -1
  153. package/src/util/TabbableElements.js +5 -1
  154. package/src/util/createLinkInHead.js +19 -0
  155. package/src/util/escapeRegex.js +10 -0
  156. package/src/util/generateHighlightedMarkup.js +42 -0
  157. package/src/util/getEffectiveScrollbarStyle.js +5 -0
  158. package/src/util/getNormalizedTarget.js +16 -0
  159. package/src/util/isDefaultSlotProvided.js +11 -0
  160. package/src/util/isNodeHidden.js +1 -1
  161. package/src/util/isNodeTabbable.js +4 -4
  162. package/used-modules.txt +10 -0
  163. package/config/.eslintrc.js +0 -3
  164. package/config/rollup.config.js +0 -1
  165. package/dist/config/AssetsPath.js +0 -17
  166. package/dist/isLegacyBrowser.js +0 -3
  167. package/dist/renderer/ifDefined.js +0 -21
  168. package/dist/renderer/scopeHTML.js +0 -32
  169. package/dist/resources/bundle.esm.js +0 -121
  170. package/dist/resources/bundle.esm.js.map +0 -1
  171. package/dist/test-resources/assets/Themes.js +0 -17
  172. package/dist/test-resources/elements/Child.js +0 -35
  173. package/dist/test-resources/elements/Generic.js +0 -84
  174. package/dist/test-resources/elements/GenericExt.js +0 -26
  175. package/dist/test-resources/elements/NoShadowDOM.js +0 -13
  176. package/dist/test-resources/elements/Parent.js +0 -41
  177. package/dist/test-resources/elements/WithStaticArea.js +0 -76
  178. package/dist/test-resources/pages/AllTestElements.html +0 -39
  179. package/dist/test-resources/pages/Configuration.html +0 -18
  180. package/dist/test-resources/pages/ConfigurationScript.html +0 -34
  181. package/dist/test-resources/pages/assets/messagebundle_de.properties +0 -1
  182. package/dist/test-resources/pages/assets/messagebundle_en.properties +0 -1
  183. package/dist/test-resources/pages/assets/messagebundle_es.properties +0 -1
  184. package/dist/test-resources/pages/assets/messagebundle_fr.properties +0 -1
  185. package/dist/test-resources/pages/i18n.html +0 -35
  186. package/dist/test-resources/specs/ConfigurationChange.spec.js +0 -27
  187. package/dist/test-resources/specs/ConfigurationScript.spec.js +0 -63
  188. package/dist/test-resources/specs/ConfigurationURL.spec.js +0 -47
  189. package/dist/test-resources/specs/CustomTheme.spec.js +0 -27
  190. package/dist/test-resources/specs/StaticArea.spec.js +0 -36
  191. package/dist/test-resources/specs/Theming.spec.js +0 -33
  192. package/dist/test-resources/specs/UI5ElementInvalidation.js +0 -242
  193. package/dist/test-resources/specs/UI5ElementLifecycle.js +0 -98
  194. package/dist/test-resources/specs/UI5ElementListenForChildPropChanges.spec.js +0 -75
  195. package/dist/test-resources/specs/UI5ElementMetadataExt.js +0 -42
  196. package/dist/test-resources/specs/UI5ElementPropertyValidation.js +0 -14
  197. package/dist/test-resources/specs/UI5ElementPropsAndAttrs.spec.js +0 -67
  198. package/dist/test-resources/specs/UI5ElementShadowDOM.js +0 -24
  199. package/dist/test-resources/specs/UI5ElementSlots.js +0 -36
  200. package/dist/theming/createThemePropertiesStyleTag.js +0 -20
  201. package/dist/util/encodeCSS.js +0 -24
  202. package/dist/util/findNodeOwner.js +0 -35
  203. package/src/config/AssetsPath.js +0 -17
  204. package/src/isLegacyBrowser.js +0 -3
  205. package/src/renderer/ifDefined.js +0 -21
  206. package/src/renderer/scopeHTML.js +0 -32
  207. package/src/theming/createThemePropertiesStyleTag.js +0 -20
  208. package/src/util/encodeCSS.js +0 -24
  209. package/src/util/findNodeOwner.js +0 -35
@@ -1,11 +1,18 @@
1
1
  import setToArray from "./util/setToArray.js";
2
+ import getSharedResource from "./getSharedResource.js";
3
+ import { getCurrentRuntimeIndex, compareRuntimes, getAllRuntimes } from "./Runtimes.js";
4
+
5
+ const Tags = getSharedResource("Tags", new Map());
2
6
 
3
7
  const Definitions = new Set();
4
- const Failures = new Set();
8
+ let Failures = {};
5
9
  let failureTimeout;
6
10
 
11
+ const UNKNOWN_RUNTIME = "unknown";
12
+
7
13
  const registerTag = tag => {
8
14
  Definitions.add(tag);
15
+ Tags.set(tag, getCurrentRuntimeIndex());
9
16
  };
10
17
 
11
18
  const isTagRegistered = tag => {
@@ -17,18 +24,67 @@ const getAllRegisteredTags = () => {
17
24
  };
18
25
 
19
26
  const recordTagRegistrationFailure = tag => {
20
- Failures.add(tag);
27
+ let tagRegRuntimeIndex = Tags.get(tag);
28
+ if (tagRegRuntimeIndex === undefined) {
29
+ tagRegRuntimeIndex = UNKNOWN_RUNTIME; // If the tag is taken, but not registered in Tags, then a version before 1.1.0 defined it => use the "unknown" key
30
+ }
31
+ Failures[tagRegRuntimeIndex] = Failures[tagRegRuntimeIndex] || new Set();
32
+ Failures[tagRegRuntimeIndex].add(tag);
33
+
21
34
  if (!failureTimeout) {
22
35
  failureTimeout = setTimeout(() => {
23
36
  displayFailedRegistrations();
37
+ Failures = {};
24
38
  failureTimeout = undefined;
25
39
  }, 1000);
26
40
  }
27
41
  };
28
42
 
29
43
  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();
44
+ const allRuntimes = getAllRuntimes();
45
+ const currentRuntimeIndex = getCurrentRuntimeIndex();
46
+ const currentRuntime = allRuntimes[currentRuntimeIndex];
47
+
48
+ let message = `Multiple UI5 Web Components instances detected.`;
49
+
50
+ if (allRuntimes.length > 1) {
51
+ message = `${message}\nLoading order (versions before 1.1.0 not listed): ${allRuntimes.map(runtime => `\n${runtime.description}`).join("")}`;
52
+ }
53
+
54
+ Object.keys(Failures).forEach(otherRuntimeIndex => {
55
+ let comparison;
56
+ let otherRuntime;
57
+
58
+ if (otherRuntimeIndex === UNKNOWN_RUNTIME) { // version < 1.1.0 defined the tag
59
+ comparison = 1; // the current runtime is considered newer
60
+ otherRuntime = {
61
+ description: `Older unknown runtime`,
62
+ };
63
+ } else {
64
+ comparison = compareRuntimes(currentRuntimeIndex, otherRuntimeIndex);
65
+ otherRuntime = allRuntimes[otherRuntimeIndex];
66
+ }
67
+
68
+ let compareWord;
69
+ if (comparison > 0) {
70
+ compareWord = "an older";
71
+ } else if (comparison < 0) {
72
+ compareWord = "a newer";
73
+ } else {
74
+ compareWord = "the same";
75
+ }
76
+ message = `${message}\n\n"${currentRuntime.description}" failed to define ${Failures[otherRuntimeIndex].size} tag(s) as they were defined by a runtime of ${compareWord} version "${otherRuntime.description}": ${setToArray(Failures[otherRuntimeIndex]).sort().join(", ")}.`;
77
+
78
+ if (comparison > 0) {
79
+ message = `${message}\nWARNING! If your code uses features of the above web components, unavailable in ${otherRuntime.description}, it might not work as expected!`;
80
+ } else {
81
+ message = `${message}\nSince the above web components were defined by the same or newer version runtime, they should be compatible with your code.`;
82
+ }
83
+ });
84
+
85
+ message = `${message}\n\nTo prevent other runtimes from defining tags that you use, consider using scoping or have third-party libraries use scoping: https://github.com/SAP/ui5-webcomponents/blob/main/docs/2-advanced/03-scoping.md.`;
86
+
87
+ console.warn(message); // eslint-disable-line
32
88
  };
33
89
 
34
90
  export {
@@ -1,102 +1,24 @@
1
- let suf;
2
- let rulesObj = {
3
- include: [/^ui5-/],
4
- exclude: [],
5
- };
6
- const tagsCache = new Map(); // true/false means the tag should/should not be cached, undefined means not known yet.
7
-
8
- /**
9
- * Sets the suffix to be used for custom elements scoping, f.e. pass "demo" to get tags such as "ui5-button-demo".
10
- * Note: by default all tags starting with "ui5-" will be scoped, unless you change this by calling "setCustomElementsScopingRules"
11
- *
12
- * @public
13
- * @param suffix The scoping suffix
14
- */
15
- const setCustomElementsScopingSuffix = suffix => {
16
- if (!suffix.match(/^[a-zA-Z0-9_-]+$/)) {
17
- throw new Error("Only alphanumeric characters and dashes allowed for the scoping suffix");
18
- }
19
-
20
- suf = suffix;
21
- };
22
-
23
- /**
24
- * Returns the currently set scoping suffix, or undefined if not set.
25
- *
26
- * @public
27
- * @returns {String|undefined}
28
- */
29
- const getCustomElementsScopingSuffix = () => {
30
- return suf;
31
- };
1
+ import {
2
+ html,
3
+ svg,
4
+ unsafeStatic,
5
+ } from "lit-html/static.js";
32
6
 
33
- /**
34
- * Sets the rules, governing which custom element tags to scope and which not, f.e.
35
- * setCustomElementsScopingRules({include: [/^ui5-/]}, exclude: [/^ui5-mylib-/, /^ui5-carousel$/]);
36
- * will scope all elements starting with "ui5-" but not the ones starting with "ui5-mylib-" and not "ui5-carousel".
37
- *
38
- * @public
39
- * @param rules Object with "include" and "exclude" properties, both arrays of regular expressions. Note that "include"
40
- * rules are applied first and "exclude" rules second.
41
- */
42
- const setCustomElementsScopingRules = rules => {
43
- if (!rules || !rules.include) {
44
- throw new Error(`"rules" must be an object with at least an "include" property`);
45
- }
46
-
47
- if (!Array.isArray(rules.include) || rules.include.some(rule => !(rule instanceof RegExp))) {
48
- throw new Error(`"rules.include" must be an array of regular expressions`);
49
- }
50
-
51
- if (rules.exclude && (!Array.isArray(rules.exclude) || rules.exclude.some(rule => !(rule instanceof RegExp)))) {
52
- throw new Error(`"rules.exclude" must be an array of regular expressions`);
53
- }
54
-
55
- rules.exclude = rules.exclude || [];
56
- rulesObj = rules;
57
- tagsCache.clear(); // reset the cache upon setting new rules
58
- };
59
-
60
- /**
61
- * Returns the rules, governing which custom element tags to scope and which not. By default, all elements
62
- * starting with "ui5-" are scoped. The default rules are: {include: [/^ui5-/]}.
63
- *
64
- * @public
65
- * @returns {Object}
66
- */
67
- const getCustomElementsScopingRules = () => {
68
- return rulesObj;
69
- };
70
-
71
- /**
72
- * Determines whether custom elements with the given tag should be scoped or not.
73
- * The tag is first matched against the "include" rules and then against the "exclude" rules and the
74
- * result is cached until new rules are set.
75
- *
76
- * @public
77
- * @param tag
78
- */
79
- const shouldScopeCustomElement = tag => {
80
- if (!tagsCache.has(tag)) {
81
- const result = rulesObj.include.some(rule => tag.match(rule)) && !rulesObj.exclude.some(rule => tag.match(rule));
82
- tagsCache.set(tag, result);
83
- }
84
-
85
- return tagsCache.get(tag);
86
- };
87
-
88
- /**
89
- * Returns the currently set scoping suffix, if any and if the tag should be scoped, or undefined otherwise.
90
- *
91
- * @public
92
- * @param tag
93
- * @returns {String}
94
- */
95
- const getEffectiveScopingSuffixForTag = tag => {
96
- if (shouldScopeCustomElement(tag)) {
97
- return getCustomElementsScopingSuffix();
98
- }
99
- };
7
+ import {
8
+ setCustomElementsScopingSuffix,
9
+ getCustomElementsScopingSuffix,
10
+ setCustomElementsScopingRules,
11
+ getCustomElementsScopingRules,
12
+ shouldScopeCustomElement,
13
+ getEffectiveScopingSuffixForTag,
14
+ } from "./CustomElementsScopeUtils.js";
15
+ import { registerFeature } from "./FeaturesRegistry.js";
16
+
17
+ registerFeature("LitStatic", {
18
+ html,
19
+ svg,
20
+ unsafeStatic,
21
+ });
100
22
 
101
23
  export {
102
24
  setCustomElementsScopingSuffix,
@@ -0,0 +1,108 @@
1
+ let suf;
2
+ let rulesObj = {
3
+ include: [/^ui5-/],
4
+ exclude: [],
5
+ };
6
+ const tagsCache = new Map(); // true/false means the tag should/should not be cached, undefined means not known yet.
7
+
8
+ /**
9
+ * Sets the suffix to be used for custom elements scoping, f.e. pass "demo" to get tags such as "ui5-button-demo".
10
+ * Note: by default all tags starting with "ui5-" will be scoped, unless you change this by calling "setCustomElementsScopingRules"
11
+ *
12
+ * @public
13
+ * @param suffix The scoping suffix
14
+ */
15
+ const setCustomElementsScopingSuffix = suffix => {
16
+ if (!suffix.match(/^[a-zA-Z0-9_-]+$/)) {
17
+ throw new Error("Only alphanumeric characters and dashes allowed for the scoping suffix");
18
+ }
19
+
20
+ suf = suffix;
21
+ };
22
+
23
+ /**
24
+ * Returns the currently set scoping suffix, or undefined if not set.
25
+ *
26
+ * @public
27
+ * @returns {String|undefined}
28
+ */
29
+ const getCustomElementsScopingSuffix = () => {
30
+ return suf;
31
+ };
32
+
33
+ /**
34
+ * Sets the rules, governing which custom element tags to scope and which not, f.e.
35
+ * setCustomElementsScopingRules({include: [/^ui5-/]}, exclude: [/^ui5-mylib-/, /^ui5-carousel$/]);
36
+ * will scope all elements starting with "ui5-" but not the ones starting with "ui5-mylib-" and not "ui5-carousel".
37
+ *
38
+ * @public
39
+ * @param rules Object with "include" and "exclude" properties, both arrays of regular expressions. Note that "include"
40
+ * rules are applied first and "exclude" rules second.
41
+ */
42
+ const setCustomElementsScopingRules = rules => {
43
+ if (!rules || !rules.include) {
44
+ throw new Error(`"rules" must be an object with at least an "include" property`);
45
+ }
46
+
47
+ if (!Array.isArray(rules.include) || rules.include.some(rule => !(rule instanceof RegExp))) {
48
+ throw new Error(`"rules.include" must be an array of regular expressions`);
49
+ }
50
+
51
+ if (rules.exclude && (!Array.isArray(rules.exclude) || rules.exclude.some(rule => !(rule instanceof RegExp)))) {
52
+ throw new Error(`"rules.exclude" must be an array of regular expressions`);
53
+ }
54
+
55
+ rules.exclude = rules.exclude || [];
56
+ rulesObj = rules;
57
+ tagsCache.clear(); // reset the cache upon setting new rules
58
+ };
59
+
60
+ /**
61
+ * Returns the rules, governing which custom element tags to scope and which not. By default, all elements
62
+ * starting with "ui5-" are scoped. The default rules are: {include: [/^ui5-/]}.
63
+ *
64
+ * @public
65
+ * @returns {Object}
66
+ */
67
+ const getCustomElementsScopingRules = () => {
68
+ return rulesObj;
69
+ };
70
+
71
+ /**
72
+ * Determines whether custom elements with the given tag should be scoped or not.
73
+ * The tag is first matched against the "include" rules and then against the "exclude" rules and the
74
+ * result is cached until new rules are set.
75
+ *
76
+ * @public
77
+ * @param tag
78
+ */
79
+ const shouldScopeCustomElement = tag => {
80
+ if (!tagsCache.has(tag)) {
81
+ const result = rulesObj.include.some(rule => tag.match(rule)) && !rulesObj.exclude.some(rule => tag.match(rule));
82
+ tagsCache.set(tag, result);
83
+ }
84
+
85
+ return tagsCache.get(tag);
86
+ };
87
+
88
+ /**
89
+ * Returns the currently set scoping suffix, if any and if the tag should be scoped, or undefined otherwise.
90
+ *
91
+ * @public
92
+ * @param tag
93
+ * @returns {String}
94
+ */
95
+ const getEffectiveScopingSuffixForTag = tag => {
96
+ if (shouldScopeCustomElement(tag)) {
97
+ return getCustomElementsScopingSuffix();
98
+ }
99
+ };
100
+
101
+ export {
102
+ setCustomElementsScopingSuffix,
103
+ getCustomElementsScopingSuffix,
104
+ setCustomElementsScopingRules,
105
+ getCustomElementsScopingRules,
106
+ shouldScopeCustomElement,
107
+ getEffectiveScopingSuffixForTag,
108
+ };
package/dist/Device.js CHANGED
@@ -5,9 +5,13 @@ const chrome = !ie && /(Chrome|CriOS)/.test(ua);
5
5
  const safari = !ie && !chrome && /(Version|PhantomJS)\/(\d+\.\d+).*Safari/.test(ua);
6
6
  const webkit = !ie && /webkit/.test(ua);
7
7
  const windows = navigator.platform.indexOf("Win") !== -1;
8
+ const iOS = navigator.platform.match(/iPhone|iPad|iPod/) || (navigator.userAgent.match(/Mac/) && "ontouchend" in document);
8
9
  const android = !windows && /Android/.test(ua);
9
10
  const androidPhone = android && /(?=android)(?=.*mobile)/i.test(ua);
10
- const ipad = /ipad/i.test(ua);
11
+ const ipad = /ipad/i.test(ua) || (/Macintosh/i.test(ua) && "ontouchend" in document);
12
+ // With iOS 13 the string 'iPad' was removed from the user agent string through a browser setting, which is applied on all sites by default:
13
+ // "Request Desktop Website -> All websites" (for more infos see: https://forums.developer.apple.com/thread/119186).
14
+ // Therefore the OS is detected as MACINTOSH instead of iOS and the device is a tablet if the Device.support.touch is true.
11
15
 
12
16
  let windowsVersion;
13
17
  let webkitVersion;
@@ -75,6 +79,7 @@ const detectTablet = () => {
75
79
  const supportsTouch = () => touch;
76
80
  const isIE = () => ie;
77
81
  const isSafari = () => safari;
82
+ const isChrome = () => chrome;
78
83
 
79
84
  const isTablet = () => {
80
85
  detectTablet();
@@ -90,11 +95,27 @@ const isDesktop = () => {
90
95
  return (!isTablet() && !isPhone()) || isWindows8OrAbove();
91
96
  };
92
97
 
98
+ const isCombi = () => {
99
+ return isTablet() && isDesktop();
100
+ };
101
+
102
+ const isIOS = () => {
103
+ return iOS;
104
+ };
105
+
106
+ const isAndroid = () => {
107
+ return android || androidPhone;
108
+ };
109
+
93
110
  export {
94
111
  supportsTouch,
95
112
  isIE,
96
113
  isSafari,
114
+ isChrome,
97
115
  isPhone,
98
116
  isTablet,
99
117
  isDesktop,
118
+ isCombi,
119
+ isIOS,
120
+ isAndroid,
100
121
  };
@@ -1,36 +1,37 @@
1
1
  class EventProvider {
2
2
  constructor() {
3
- this._eventRegistry = {};
3
+ this._eventRegistry = new Map();
4
4
  }
5
5
 
6
6
  attachEvent(eventName, fnFunction) {
7
7
  const eventRegistry = this._eventRegistry;
8
- let eventListeners = eventRegistry[eventName];
8
+ const eventListeners = eventRegistry.get(eventName);
9
9
 
10
10
  if (!Array.isArray(eventListeners)) {
11
- eventRegistry[eventName] = [];
12
- eventListeners = eventRegistry[eventName];
11
+ eventRegistry.set(eventName, [fnFunction]);
12
+ return;
13
13
  }
14
14
 
15
- eventListeners.push({
16
- "function": fnFunction,
17
- });
15
+ if (!eventListeners.includes(fnFunction)) {
16
+ eventListeners.push(fnFunction);
17
+ }
18
18
  }
19
19
 
20
20
  detachEvent(eventName, fnFunction) {
21
21
  const eventRegistry = this._eventRegistry;
22
- let eventListeners = eventRegistry[eventName];
22
+ const eventListeners = eventRegistry.get(eventName);
23
23
 
24
24
  if (!eventListeners) {
25
25
  return;
26
26
  }
27
+ const indexOfFnToDetach = eventListeners.indexOf(fnFunction);
27
28
 
28
- eventListeners = eventListeners.filter(event => {
29
- return event["function"] !== fnFunction; // eslint-disable-line
30
- });
29
+ if (indexOfFnToDetach !== -1) {
30
+ eventListeners.splice(indexOfFnToDetach, 1);
31
+ }
31
32
 
32
33
  if (eventListeners.length === 0) {
33
- delete eventRegistry[eventName];
34
+ eventRegistry.delete(eventName);
34
35
  }
35
36
  }
36
37
 
@@ -43,14 +44,14 @@ class EventProvider {
43
44
  */
44
45
  fireEvent(eventName, data) {
45
46
  const eventRegistry = this._eventRegistry;
46
- const eventListeners = eventRegistry[eventName];
47
+ const eventListeners = eventRegistry.get(eventName);
47
48
 
48
49
  if (!eventListeners) {
49
50
  return [];
50
51
  }
51
52
 
52
- return eventListeners.map(event => {
53
- return event["function"].call(this, data); // eslint-disable-line
53
+ return eventListeners.map(fn => {
54
+ return fn.call(this, data); // eslint-disable-line
54
55
  });
55
56
  }
56
57
 
@@ -67,24 +68,17 @@ class EventProvider {
67
68
 
68
69
  isHandlerAttached(eventName, fnFunction) {
69
70
  const eventRegistry = this._eventRegistry;
70
- const eventListeners = eventRegistry[eventName];
71
+ const eventListeners = eventRegistry.get(eventName);
71
72
 
72
73
  if (!eventListeners) {
73
74
  return false;
74
75
  }
75
76
 
76
- for (let i = 0; i < eventListeners.length; i++) {
77
- const event = eventListeners[i];
78
- if (event["function"] === fnFunction) { // eslint-disable-line
79
- return true;
80
- }
81
- }
82
-
83
- return false;
77
+ return eventListeners.includes(fnFunction);
84
78
  }
85
79
 
86
80
  hasListeners(eventName) {
87
- return !!this._eventRegistry[eventName];
81
+ return !!this._eventRegistry.get(eventName);
88
82
  }
89
83
  }
90
84
 
@@ -8,4 +8,7 @@ const getFeature = name => {
8
8
  return features.get(name);
9
9
  };
10
10
 
11
- export { registerFeature, getFeature };
11
+ export {
12
+ registerFeature,
13
+ getFeature,
14
+ };
package/dist/FontFace.js CHANGED
@@ -1,95 +1,7 @@
1
- /**
2
- * CSS font face used for the texts provided by SAP.
3
- */
4
- import createStyleInHead from "./util/createStyleInHead.js";
1
+ import { hasStyle, createStyle } from "./ManagedStyles.js";
5
2
  import { getFeature } from "./FeaturesRegistry.js";
6
-
7
- /* CDN Locations */
8
- const font72RegularWoff = `https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Regular.woff?ui5-webcomponents`;
9
- const font72RegularWoff2 = `https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Regular.woff2?ui5-webcomponents`;
10
-
11
- const font72RegularFullWoff = `https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Regular-full.woff?ui5-webcomponents`;
12
- const font72RegularFullWoff2 = `https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Regular-full.woff2?ui5-webcomponents`;
13
-
14
- const font72BoldWoff = `https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold.woff?ui5-webcomponents`;
15
- const font72BoldWoff2 = `https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold.woff2?ui5-webcomponents`;
16
-
17
- const font72BoldFullWoff = `https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold-full.woff?ui5-webcomponents`;
18
- const font72BoldFullWoff2 = `https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold-full.woff2?ui5-webcomponents`;
19
-
20
- const fontFaceCSS = `
21
- @font-face {
22
- font-family: "72";
23
- font-style: normal;
24
- font-weight: 400;
25
- src: local("72"),
26
- url(${font72RegularWoff2}) format("woff2"),
27
- url(${font72RegularWoff}) format("woff");
28
- }
29
-
30
- @font-face {
31
- font-family: "72full";
32
- font-style: normal;
33
- font-weight: 400;
34
- src: local('72-full'),
35
- url(${font72RegularFullWoff2}) format("woff2"),
36
- url(${font72RegularFullWoff}) format("woff");
37
-
38
- }
39
-
40
- @font-face {
41
- font-family: "72";
42
- font-style: normal;
43
- font-weight: 700;
44
- src: local('72-Bold'),
45
- url(${font72BoldWoff2}) format("woff2"),
46
- url(${font72BoldWoff}) format("woff");
47
- }
48
-
49
- @font-face {
50
- font-family: "72full";
51
- font-style: normal;
52
- font-weight: 700;
53
- src: local('72-Bold-full'),
54
- url(${font72BoldFullWoff2}) format("woff2"),
55
- url(${font72BoldFullWoff}) format("woff");
56
- }
57
- `;
58
-
59
- /**
60
- * Some diacritics are supported by the 72 font:
61
- * * Grave
62
- * * Acute
63
- * * Circumflex
64
- * * Tilde
65
- *
66
- * However, the following diacritics and the combination of multiple diacritics (including the supported ones) are not supported:
67
- * * Breve
68
- * * Horn
69
- * * Dot below
70
- * * Hook above
71
- *
72
- *
73
- * Override for the characters that aren't covered by the '72' font to other system fonts
74
- *
75
- * U+0102-0103: A and a with Breve
76
- * U+01A0-01A1: O and o with Horn
77
- * U+01AF-01B0: U and u with Horn
78
- * U+1EA0-1EB7: A and a with diacritics that are not supported by the font and combination of multiple diacritics
79
- * U+1EB8-1EC7: E and e with diacritics that are not supported by the font and combination of multiple diacritics
80
- * U+1EC8-1ECB: I and i with diacritics that are not supported by the font and combination of multiple diacritics
81
- * U+1ECC-1EE3: O and o with diacritics that are not supported by the font and combination of multiple diacritics
82
- * U+1EE4-1EF1: U and u with diacritics that are not supported by the font and combination of multiple diacritics
83
- * U+1EF4-1EF7: Y and y with diacritics that are not supported by the font and combination of multiple diacritics
84
- *
85
- */
86
- const overrideFontFaceCSS = `
87
- @font-face {
88
- font-family: '72override';
89
- unicode-range: U+0102-0103, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EB7, U+1EB8-1EC7, U+1EC8-1ECB, U+1ECC-1EE3, U+1EE4-1EF1, U+1EF4-1EF7;
90
- src: local('Arial'), local('Helvetica'), local('sans-serif');
91
- }
92
- `;
3
+ import fontFaceCSS from "./generated/css/FontFace.css.js";
4
+ import overrideFontFaceCSS from "./generated/css/OverrideFontFace.css.js";
93
5
 
94
6
  const insertFontFace = () => {
95
7
  const OpenUI5Support = getFeature("OpenUI5Support");
@@ -104,14 +16,14 @@ const insertFontFace = () => {
104
16
  };
105
17
 
106
18
  const insertMainFontFace = () => {
107
- if (!document.querySelector(`head>style[data-ui5-font-face]`)) {
108
- createStyleInHead(fontFaceCSS, { "data-ui5-font-face": "" });
19
+ if (!hasStyle("data-ui5-font-face")) {
20
+ createStyle(fontFaceCSS, "data-ui5-font-face");
109
21
  }
110
22
  };
111
23
 
112
24
  const insertOverrideFontFace = () => {
113
- if (!document.querySelector(`head>style[data-ui5-font-face-override]`)) {
114
- createStyleInHead(overrideFontFaceCSS, { "data-ui5-font-face-override": "" });
25
+ if (!hasStyle("data-ui5-font-face-override")) {
26
+ createStyle(overrideFontFaceCSS, "data-ui5-font-face-override");
115
27
  }
116
28
  };
117
29
 
@@ -13,7 +13,6 @@ let initialConfig = {
13
13
  noConflict: false, // no URL
14
14
  formatSettings: {},
15
15
  fetchDefaultLanguage: false,
16
- assetsPath: "",
17
16
  };
18
17
 
19
18
  /* General settings */
@@ -62,11 +61,6 @@ const getFormatSettings = () => {
62
61
  return initialConfig.formatSettings;
63
62
  };
64
63
 
65
- const getAssetsPath = () => {
66
- initConfiguration();
67
- return initialConfig.assetsPath;
68
- };
69
-
70
64
  const booleanMapping = new Map();
71
65
  booleanMapping.set("true", true);
72
66
  booleanMapping.set("false", false);
@@ -92,23 +86,47 @@ const parseConfigurationScript = () => {
92
86
  const parseURLParameters = () => {
93
87
  const params = new URLSearchParams(window.location.search);
94
88
 
89
+ // Process "sap-*" params first
95
90
  params.forEach((value, key) => {
96
- if (!key.startsWith("sap-ui")) {
91
+ const parts = key.split("sap-").length;
92
+ if (parts === 0 || parts === key.split("sap-ui-").length) {
97
93
  return;
98
94
  }
99
95
 
100
- const lowerCaseValue = value.toLowerCase();
101
-
102
- const param = key.split("sap-ui-")[1];
96
+ applyURLParam(key, value, "sap");
97
+ });
103
98
 
104
- if (booleanMapping.has(value)) {
105
- value = booleanMapping.get(lowerCaseValue);
99
+ // Process "sap-ui-*" params
100
+ params.forEach((value, key) => {
101
+ if (!key.startsWith("sap-ui")) {
102
+ return;
106
103
  }
107
104
 
108
- initialConfig[param] = value;
105
+ applyURLParam(key, value, "sap-ui");
109
106
  });
110
107
  };
111
108
 
109
+ const normalizeParamValue = (param, value) => {
110
+ if (param === "theme" && value.includes("@")) { // the theme parameter might have @<URL-TO-THEME> in the value - strip this
111
+ return value.split("@")[0];
112
+ }
113
+
114
+ return value;
115
+ };
116
+
117
+ const applyURLParam = (key, value, paramType) => {
118
+ const lowerCaseValue = value.toLowerCase();
119
+ const param = key.split(`${paramType}-`)[1];
120
+
121
+ if (booleanMapping.has(value)) {
122
+ value = booleanMapping.get(lowerCaseValue);
123
+ }
124
+
125
+ value = normalizeParamValue(param, value);
126
+
127
+ initialConfig[param] = value;
128
+ };
129
+
112
130
  const applyOpenUI5Configuration = () => {
113
131
  const OpenUI5Support = getFeature("OpenUI5Support");
114
132
  if (!OpenUI5Support || !OpenUI5Support.isLoaded()) {
@@ -145,5 +163,4 @@ export {
145
163
  getNoConflict,
146
164
  getCalendarType,
147
165
  getFormatSettings,
148
- getAssetsPath,
149
166
  };