@ui5/webcomponents-base 0.0.0-2c7615fe9 → 0.0.0-3236d56be

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 (147) hide show
  1. package/.eslintignore +3 -2
  2. package/CHANGELOG.md +199 -0
  3. package/README.md +26 -2
  4. package/bundle.esm.js +3 -2
  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 +20 -1
  11. package/dist/EventProvider.js +5 -2
  12. package/dist/FeaturesRegistry.js +4 -1
  13. package/dist/FontFace.js +7 -95
  14. package/dist/InitialConfiguration.js +11 -7
  15. package/dist/Keys.js +47 -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 +4 -10
  20. package/dist/SystemCSSVars.js +4 -25
  21. package/dist/UI5Element.js +31 -24
  22. package/dist/UI5ElementMetadata.js +17 -1
  23. package/dist/asset-registries/Icons.js +21 -14
  24. package/dist/asset-registries/Illustrations.js +10 -3
  25. package/dist/asset-registries/LocaleData.js +17 -3
  26. package/dist/assets-meta/IconCollectionsAlias.js +18 -0
  27. package/dist/config/Icons.js +52 -0
  28. package/dist/config/Theme.js +25 -0
  29. package/dist/css/BusyIndicator.css +76 -0
  30. package/dist/css/FontFace.css +75 -0
  31. package/dist/css/OverrideFontFace.css +32 -0
  32. package/dist/css/SystemCSSVars.css +17 -0
  33. package/dist/features/F6Navigation.js +108 -0
  34. package/dist/features/OpenUI5Enablement.js +119 -0
  35. package/dist/generated/AssetParameters.js +1 -1
  36. package/dist/generated/VersionInfo.js +10 -0
  37. package/dist/generated/css/BusyIndicator.css.js +5 -0
  38. package/dist/generated/css/FontFace.css.js +5 -0
  39. package/dist/generated/css/OverrideFontFace.css.js +5 -0
  40. package/dist/generated/css/SystemCSSVars.css.js +5 -0
  41. package/dist/i18nBundle.js +33 -2
  42. package/dist/renderer/LitRenderer.js +32 -12
  43. package/dist/renderer/directives/style-map.js +72 -0
  44. package/dist/renderer/executeTemplate.js +19 -2
  45. package/dist/resources/bundle.esm.js +14 -8
  46. package/dist/resources/bundle.esm.js.map +1 -1
  47. package/dist/sap/base/Log.js +2 -10
  48. package/dist/sap/base/assert.js +1 -5
  49. package/dist/sap/base/security/encodeCSS.js +14 -0
  50. package/dist/sap/base/security/encodeXML.js +23 -0
  51. package/dist/sap/base/strings/toHex.js +8 -0
  52. package/dist/sap/ui/thirdparty/caja-html-sanitizer.js +1 -1
  53. package/dist/test-resources/pages/i18n.html +1 -3
  54. package/dist/test-resources/specs/ConfigurationChange.spec.js +9 -9
  55. package/dist/test-resources/specs/ConfigurationScript.spec.js +24 -24
  56. package/dist/test-resources/specs/ConfigurationURL.spec.js +33 -33
  57. package/dist/test-resources/specs/CustomTheme.spec.js +7 -7
  58. package/dist/test-resources/specs/EventProvider.spec.js +63 -0
  59. package/dist/test-resources/specs/StaticArea.spec.js +35 -35
  60. package/dist/test-resources/specs/Theming.spec.js +11 -11
  61. package/dist/test-resources/specs/UI5ElementInvalidation.js +29 -29
  62. package/dist/test-resources/specs/UI5ElementLifecycle.js +11 -11
  63. package/dist/test-resources/specs/UI5ElementListenForChildPropChanges.spec.js +11 -11
  64. package/dist/test-resources/specs/UI5ElementMetadataExt.js +8 -8
  65. package/dist/test-resources/specs/UI5ElementPropertyValidation.js +6 -6
  66. package/dist/test-resources/specs/UI5ElementPropsAndAttrs.spec.js +36 -36
  67. package/dist/test-resources/specs/UI5ElementShadowDOM.js +9 -9
  68. package/dist/test-resources/specs/UI5ElementSlots.js +9 -9
  69. package/dist/theming/CustomStyle.js +23 -3
  70. package/dist/theming/applyTheme.js +11 -10
  71. package/dist/theming/getEffectiveLinksHrefs.js +27 -0
  72. package/dist/theming/getEffectiveStyle.js +9 -0
  73. package/dist/theming/getStylesString.js +4 -2
  74. package/dist/theming/getThemeDesignerTheme.js +25 -5
  75. package/dist/theming/preloadLinks.js +23 -0
  76. package/dist/updateShadowRoot.js +8 -4
  77. package/dist/util/FocusableElements.js +8 -6
  78. package/dist/util/InvisibleMessage.js +11 -9
  79. package/dist/util/TabbableElements.js +4 -0
  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/getNormalizedTarget.js +16 -0
  84. package/dist/util/isNodeHidden.js +1 -1
  85. package/lib/generate-asset-parameters/index.js +8 -5
  86. package/lib/generate-styles/index.js +26 -0
  87. package/lib/generate-version-info/index.js +32 -0
  88. package/package-scripts.js +12 -16
  89. package/package.json +10 -12
  90. package/src/Boot.js +34 -18
  91. package/src/CSP.js +59 -0
  92. package/src/CustomElementsRegistry.js +60 -4
  93. package/src/CustomElementsScope.js +20 -98
  94. package/src/CustomElementsScopeUtils.js +108 -0
  95. package/src/Device.js +20 -1
  96. package/src/EventProvider.js +5 -2
  97. package/src/FeaturesRegistry.js +4 -1
  98. package/src/FontFace.js +7 -95
  99. package/src/InitialConfiguration.js +11 -7
  100. package/src/Keys.js +47 -0
  101. package/src/ManagedStyles.js +83 -0
  102. package/src/Render.js +3 -1
  103. package/src/Runtimes.js +107 -0
  104. package/src/StaticAreaItem.js +4 -10
  105. package/src/SystemCSSVars.js +4 -25
  106. package/src/UI5Element.js +31 -24
  107. package/src/UI5ElementMetadata.js +17 -1
  108. package/src/asset-registries/Icons.js +21 -14
  109. package/src/asset-registries/Illustrations.js +10 -3
  110. package/src/asset-registries/LocaleData.js +17 -3
  111. package/src/assets-meta/IconCollectionsAlias.js +18 -0
  112. package/src/config/Icons.js +52 -0
  113. package/src/config/Theme.js +25 -0
  114. package/src/css/BusyIndicator.css +76 -0
  115. package/src/css/FontFace.css +75 -0
  116. package/src/css/OverrideFontFace.css +32 -0
  117. package/src/css/SystemCSSVars.css +17 -0
  118. package/src/features/F6Navigation.js +108 -0
  119. package/src/features/OpenUI5Enablement.js +119 -0
  120. package/src/i18nBundle.js +33 -2
  121. package/src/renderer/LitRenderer.js +32 -12
  122. package/src/renderer/directives/style-map.js +72 -0
  123. package/src/renderer/executeTemplate.js +19 -2
  124. package/src/theming/CustomStyle.js +23 -3
  125. package/src/theming/applyTheme.js +11 -10
  126. package/src/theming/getEffectiveLinksHrefs.js +27 -0
  127. package/src/theming/getEffectiveStyle.js +9 -0
  128. package/src/theming/getStylesString.js +4 -2
  129. package/src/theming/getThemeDesignerTheme.js +25 -5
  130. package/src/theming/preloadLinks.js +23 -0
  131. package/src/updateShadowRoot.js +8 -4
  132. package/src/util/FocusableElements.js +8 -6
  133. package/src/util/InvisibleMessage.js +11 -9
  134. package/src/util/TabbableElements.js +4 -0
  135. package/src/util/createLinkInHead.js +19 -0
  136. package/src/util/escapeRegex.js +10 -0
  137. package/src/util/generateHighlightedMarkup.js +42 -0
  138. package/src/util/getNormalizedTarget.js +16 -0
  139. package/src/util/isNodeHidden.js +1 -1
  140. package/used-modules.txt +4 -1
  141. package/dist/config/AssetsPath.js +0 -17
  142. package/dist/theming/createThemePropertiesStyleTag.js +0 -20
  143. package/dist/util/encodeCSS.js +0 -24
  144. package/hash.txt +0 -1
  145. package/src/config/AssetsPath.js +0 -17
  146. package/src/theming/createThemePropertiesStyleTag.js +0 -20
  147. package/src/util/encodeCSS.js +0 -24
@@ -0,0 +1,27 @@
1
+ import { getUrl } from "../CSP.js";
2
+ import { getFeature } from "../FeaturesRegistry.js";
3
+
4
+ const flatten = arr => {
5
+ return arr.reduce((acc, val) => acc.concat(Array.isArray(val) ? flatten(val) : val), []);
6
+ };
7
+
8
+ const getEffectiveLinksHrefs = (ElementClass, forStaticArea = false) => {
9
+ let stylesData = ElementClass[forStaticArea ? "staticAreaStyles" : "styles"];
10
+ const OpenUI5Enablement = getFeature("OpenUI5Enablement");
11
+
12
+ if (!stylesData) {
13
+ return;
14
+ }
15
+
16
+ if (!Array.isArray(stylesData)) {
17
+ stylesData = [stylesData];
18
+ }
19
+
20
+ if (OpenUI5Enablement) {
21
+ stylesData.push(OpenUI5Enablement.getBusyIndicatorStyles());
22
+ }
23
+
24
+ return flatten(stylesData).filter(data => !!data).map(data => getUrl(data.packageName, data.fileName));
25
+ };
26
+
27
+ export default getEffectiveLinksHrefs;
@@ -1,5 +1,6 @@
1
1
  import { getCustomCSS, attachCustomCSSChange } from "./CustomStyle.js";
2
2
  import getStylesString from "./getStylesString.js";
3
+ import { getFeature } from "../FeaturesRegistry.js";
3
4
 
4
5
  const effectiveStyleMap = new Map();
5
6
 
@@ -10,9 +11,15 @@ attachCustomCSSChange(tag => {
10
11
  const getEffectiveStyle = (ElementClass, forStaticArea = false) => {
11
12
  const tag = ElementClass.getMetadata().getTag();
12
13
  const key = `${tag}_${forStaticArea ? "static" : "normal"}`;
14
+ const OpenUI5Enablement = getFeature("OpenUI5Enablement");
13
15
 
14
16
  if (!effectiveStyleMap.has(key)) {
15
17
  let effectiveStyle;
18
+ let busyIndicatorStyles = "";
19
+
20
+ if (OpenUI5Enablement) {
21
+ busyIndicatorStyles = getStylesString(OpenUI5Enablement.getBusyIndicatorStyles());
22
+ }
16
23
 
17
24
  if (forStaticArea) {
18
25
  effectiveStyle = getStylesString(ElementClass.staticAreaStyles);
@@ -21,6 +28,8 @@ const getEffectiveStyle = (ElementClass, forStaticArea = false) => {
21
28
  const builtInStyles = getStylesString(ElementClass.styles);
22
29
  effectiveStyle = `${builtInStyles} ${customStyle}`;
23
30
  }
31
+
32
+ effectiveStyle = `${effectiveStyle} ${busyIndicatorStyles}`;
24
33
  effectiveStyleMap.set(key, effectiveStyle);
25
34
  }
26
35
 
@@ -1,9 +1,11 @@
1
1
  const getStylesString = styles => {
2
2
  if (Array.isArray(styles)) {
3
- return flatten(styles.filter(style => !!style)).join(" ");
3
+ return flatten(styles.filter(style => !!style)).map(style => {
4
+ return typeof style === "string" ? style : style.content;
5
+ }).join(" ");
4
6
  }
5
7
 
6
- return styles;
8
+ return typeof styles === "string" ? styles : styles.content;
7
9
  };
8
10
 
9
11
  const flatten = arr => {
@@ -1,15 +1,26 @@
1
+ const warnings = new Set();
2
+
1
3
  const getThemeMetadata = () => {
2
4
  // Check if the class was already applied, most commonly to the link/style tag with the CSS Variables
3
- let el = document.querySelector(".sapThemeMetaData-Base-baseLib");
5
+ let el = document.querySelector(".sapThemeMetaData-Base-baseLib") || document.querySelector(".sapThemeMetaData-UI5-sap-ui-core");
4
6
  if (el) {
5
7
  return getComputedStyle(el).backgroundImage;
6
8
  }
7
9
 
8
10
  el = document.createElement("span");
9
11
  el.style.display = "none";
12
+
13
+ // Try with sapThemeMetaData-Base-baseLib first
10
14
  el.classList.add("sapThemeMetaData-Base-baseLib");
11
15
  document.body.appendChild(el);
12
- const metadata = getComputedStyle(el).backgroundImage;
16
+ let metadata = getComputedStyle(el).backgroundImage;
17
+
18
+ // Try with sapThemeMetaData-UI5-sap-ui-core only if the previous selector was not found
19
+ if (metadata === "none") {
20
+ el.classList.add("sapThemeMetaData-UI5-sap-ui-core");
21
+ metadata = getComputedStyle(el).backgroundImage;
22
+ }
23
+
13
24
  document.body.removeChild(el);
14
25
 
15
26
  return metadata;
@@ -24,14 +35,20 @@ const parseThemeMetadata = metadataString => {
24
35
  try {
25
36
  paramsString = decodeURIComponent(paramsString);
26
37
  } catch (ex) {
27
- console.warn("Malformed theme metadata string, unable to decodeURIComponent"); // eslint-disable-line
38
+ if (!warnings.has("decode")) {
39
+ console.warn("Malformed theme metadata string, unable to decodeURIComponent"); // eslint-disable-line
40
+ warnings.add("decode");
41
+ }
28
42
  return;
29
43
  }
30
44
  }
31
45
  try {
32
46
  return JSON.parse(paramsString);
33
47
  } catch (ex) {
34
- console.warn("Malformed theme metadata string, unable to parse JSON"); // eslint-disable-line
48
+ if (!warnings.has("parse")) {
49
+ console.warn("Malformed theme metadata string, unable to parse JSON"); // eslint-disable-line
50
+ warnings.add("parse");
51
+ }
35
52
  }
36
53
  }
37
54
  };
@@ -44,7 +61,10 @@ const processThemeMetadata = metadata => {
44
61
  themeName = metadata.Path.match(/\.([^.]+)\.css_variables$/)[1];
45
62
  baseThemeName = metadata.Extends[0];
46
63
  } catch (ex) {
47
- console.warn("Malformed theme metadata Object", metadata); // eslint-disable-line
64
+ if (!warnings.has("object")) {
65
+ console.warn("Malformed theme metadata Object", metadata); // eslint-disable-line
66
+ warnings.add("object");
67
+ }
48
68
  return;
49
69
  }
50
70
 
@@ -0,0 +1,23 @@
1
+ import getEffectiveLinksHrefs from "./getEffectiveLinksHrefs.js";
2
+ import createLinkInHead from "../util/createLinkInHead.js";
3
+ import { shouldUseLinks, shouldPreloadLinks } from "../CSP.js";
4
+
5
+ const preloaded = new Set();
6
+
7
+ const preloadLinks = ElementClass => {
8
+ if (!shouldUseLinks() || !shouldPreloadLinks()) {
9
+ return;
10
+ }
11
+
12
+ const linksHrefs = getEffectiveLinksHrefs(ElementClass, false) || [];
13
+ const staticAreaLinksHrefs = getEffectiveLinksHrefs(ElementClass, true) || [];
14
+
15
+ [...linksHrefs, ...staticAreaLinksHrefs].forEach(href => {
16
+ if (!preloaded.has(href)) {
17
+ createLinkInHead(href, { rel: "preload", as: "style" });
18
+ preloaded.add(href);
19
+ }
20
+ });
21
+ };
22
+
23
+ export default preloadLinks;
@@ -1,7 +1,9 @@
1
1
  import executeTemplate from "./renderer/executeTemplate.js";
2
2
  import getConstructableStyle from "./theming/getConstructableStyle.js";
3
3
  import getEffectiveStyle from "./theming/getEffectiveStyle.js";
4
+ import getEffectiveLinksHrefs from "./theming/getEffectiveLinksHrefs.js";
4
5
  import isLegacyBrowser from "./isLegacyBrowser.js";
6
+ import { shouldUseLinks } from "./CSP.js";
5
7
 
6
8
  /**
7
9
  * Updates the shadow root of a UI5Element or its static area item
@@ -9,18 +11,20 @@ import isLegacyBrowser from "./isLegacyBrowser.js";
9
11
  * @param forStaticArea
10
12
  */
11
13
  const updateShadowRoot = (element, forStaticArea = false) => {
12
- let styleToPrepend;
14
+ let styleStrOrHrefsArr;
13
15
  const template = forStaticArea ? "staticAreaTemplate" : "template";
14
16
  const shadowRoot = forStaticArea ? element.staticAreaItem.shadowRoot : element.shadowRoot;
15
17
  const renderResult = executeTemplate(element.constructor[template], element);
16
18
 
17
- if (document.adoptedStyleSheets) { // Chrome
19
+ if (shouldUseLinks()) {
20
+ styleStrOrHrefsArr = getEffectiveLinksHrefs(element.constructor, forStaticArea);
21
+ } else if (document.adoptedStyleSheets) { // Chrome
18
22
  shadowRoot.adoptedStyleSheets = getConstructableStyle(element.constructor, forStaticArea);
19
23
  } else if (!isLegacyBrowser()) { // FF, Safari
20
- styleToPrepend = getEffectiveStyle(element.constructor, forStaticArea);
24
+ styleStrOrHrefsArr = getEffectiveStyle(element.constructor, forStaticArea);
21
25
  }
22
26
 
23
- element.constructor.render(renderResult, shadowRoot, styleToPrepend, { host: element });
27
+ element.constructor.render(renderResult, shadowRoot, styleStrOrHrefsArr, forStaticArea, { host: element });
24
28
  };
25
29
 
26
30
  export default updateShadowRoot;
@@ -5,27 +5,27 @@ const isFocusTrap = el => {
5
5
  return el.hasAttribute("data-ui5-focus-trap");
6
6
  };
7
7
 
8
- const getFirstFocusableElement = async container => {
8
+ const getFirstFocusableElement = async (container, startFromContainer) => {
9
9
  if (!container || isNodeHidden(container)) {
10
10
  return null;
11
11
  }
12
12
 
13
- return findFocusableElement(container, true);
13
+ return findFocusableElement(container, true, startFromContainer);
14
14
  };
15
15
 
16
- const getLastFocusableElement = async container => {
16
+ const getLastFocusableElement = async (container, startFromContainer) => {
17
17
  if (!container || isNodeHidden(container)) {
18
18
  return null;
19
19
  }
20
20
 
21
- return findFocusableElement(container, false);
21
+ return findFocusableElement(container, false, startFromContainer);
22
22
  };
23
23
 
24
24
  const isElemFocusable = el => {
25
25
  return el.hasAttribute("data-ui5-focus-redirect") || !isNodeHidden(el);
26
26
  };
27
27
 
28
- const findFocusableElement = async (container, forward) => {
28
+ const findFocusableElement = async (container, forward, startFromContainer) => {
29
29
  let child;
30
30
 
31
31
  if (container.shadowRoot) {
@@ -33,8 +33,10 @@ const findFocusableElement = async (container, forward) => {
33
33
  } else if (container.assignedNodes && container.assignedNodes()) {
34
34
  const assignedElements = container.assignedNodes();
35
35
  child = forward ? assignedElements[0] : assignedElements[assignedElements.length - 1];
36
+ } else if (startFromContainer) {
37
+ child = container;
36
38
  } else {
37
- child = forward ? container.firstChild : container.lastChild;
39
+ child = forward ? container.firstElementChild : container.lastElementChild;
38
40
  }
39
41
 
40
42
  let focusableDescendant;
@@ -5,18 +5,20 @@ import { attachBoot } from "../Boot.js";
5
5
  let politeSpan;
6
6
  let assertiveSpan;
7
7
 
8
+ const setOutOfViewportStyles = el => {
9
+ el.style.position = "absolute";
10
+ el.style.clip = "rect(1px,1px,1px,1px)";
11
+ el.style.userSelect = "none";
12
+ el.style.left = "-1000px";
13
+ el.style.top = "-1000px";
14
+ el.style.pointerEvents = "none";
15
+ };
16
+
8
17
  attachBoot(() => {
9
18
  if (politeSpan && assertiveSpan) {
10
19
  return;
11
20
  }
12
21
 
13
- const styles = `position: absolute;
14
- clip: rect(1px,1px,1px,1px);
15
- user-select: none;
16
- left: -1000px;
17
- top: -1000px;
18
- pointer-events: none;`;
19
-
20
22
  politeSpan = document.createElement("span");
21
23
  assertiveSpan = document.createElement("span");
22
24
 
@@ -29,8 +31,8 @@ attachBoot(() => {
29
31
  politeSpan.setAttribute("role", "alert");
30
32
  assertiveSpan.setAttribute("role", "alert");
31
33
 
32
- politeSpan.style.cssText = styles;
33
- assertiveSpan.style.cssText = styles;
34
+ setOutOfViewportStyles(politeSpan);
35
+ setOutOfViewportStyles(assertiveSpan);
34
36
 
35
37
  getSingletonElementInstance("ui5-static-area").appendChild(politeSpan);
36
38
  getSingletonElementInstance("ui5-static-area").appendChild(assertiveSpan);
@@ -27,6 +27,10 @@ const getTabbables = (nodes, tabbables) => {
27
27
  currentNode = Array.from(children).find(node => node.tagName !== "STYLE");
28
28
  }
29
29
 
30
+ if (!currentNode) {
31
+ return;
32
+ }
33
+
30
34
  if (isNodeTabbable(currentNode)) {
31
35
  tabbablesNodes.push(currentNode);
32
36
  }
@@ -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;
@@ -0,0 +1,10 @@
1
+ /**
2
+ * Escape a regular expression text so that it can be used in a regular expression.
3
+ * @param {string} text The string to be interpreted literally
4
+ * @returns Regular expression string to pass to regex
5
+ */
6
+ function escapeRegex(text) {
7
+ return text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
8
+ }
9
+
10
+ export default escapeRegex;
@@ -0,0 +1,42 @@
1
+ import escapeRegex from "./escapeRegex.js";
2
+ import encodeXML from "../sap/base/security/encodeXML.js";
3
+
4
+ // utility to replace all occurances of a string
5
+ function replaceAll(text, find, replace, caseInsensitive) {
6
+ return text.replace(new RegExp(escapeRegex(find), `${caseInsensitive ? "i" : ""}g`), replace);
7
+ }
8
+
9
+ /**
10
+ * Generate markup for a raw string where a particular text is wrapped with some tag, by default `<b>` (bold) tag.
11
+ * All inputs to this function are considered literal text, and special characters will always be escaped.
12
+ * @param {string} text The text to add highlighting to
13
+ * @param {string} textToHighlight The text which should be highlighted
14
+ * @return {string} the markup HTML which contains all occurrances of the input text surrounded with a `<b>` tag.
15
+ */
16
+ function generateHighlightedMarkup(text, textToHighlight) {
17
+ if (!text || !textToHighlight) {
18
+ return text;
19
+ }
20
+ // a token is some string that does not appear in either of the input strings
21
+ // repeat the token until it does not appear in the string
22
+ const makeToken = t => {
23
+ const [s, e] = t.split("");
24
+ while (text.indexOf(t) >= 0 || textToHighlight.indexOf(t) >= 0) {
25
+ t = `${s}${t}${e}`;
26
+ }
27
+ return t;
28
+ };
29
+ // It doesn't matter what characters are used as long as all 4 of them are unique
30
+ // And also that encodeXML will not change these characters
31
+ const openToken = makeToken("12");
32
+ const closeToken = makeToken("34");
33
+ // wrap every occurance of the textToHighlight using the open/close tokens (instead of markup at this point)
34
+ let result = encodeXML(replaceAll(text, textToHighlight, match => `${openToken}${match}${closeToken}`, true));
35
+ // now replace the open and close tokens with the markup that we expect
36
+ [[openToken, "<b>"], [closeToken, "</b>"]].forEach(([find, replace]) => {
37
+ result = replaceAll(result, find, replace);
38
+ });
39
+ return result;
40
+ }
41
+
42
+ export default generateHighlightedMarkup;
@@ -0,0 +1,16 @@
1
+ /**
2
+ * Returns the normalized event target in cases when it has shadow root.
3
+ * @param {Object} target The original event target
4
+ * @returns {Object} The normalized target
5
+ */
6
+ const getNormalizedTarget = target => {
7
+ let element = target;
8
+
9
+ if (target.shadowRoot && target.shadowRoot.activeElement) {
10
+ element = target.shadowRoot.activeElement;
11
+ }
12
+
13
+ return element;
14
+ };
15
+
16
+ export default getNormalizedTarget;
@@ -3,7 +3,7 @@ const isNodeHidden = node => {
3
3
  return false;
4
4
  }
5
5
 
6
- return (node.offsetWidth <= 0 && node.offsetHeight <= 0) || node.style.visibility === "hidden";
6
+ return (node.offsetWidth <= 0 && node.offsetHeight <= 0) || (node.style && node.style.visibility === "hidden");
7
7
  };
8
8
 
9
9
  export default isNodeHidden;
@@ -1,6 +1,4 @@
1
- const fs = require('fs');
2
- const path = require('path');
3
- const mkdirp = require('mkdirp');
1
+ const fs = require('fs').promises;
4
2
  const assets = require('@ui5/webcomponents-tools/assets-meta.js');
5
3
 
6
4
  const fileContent = `const assetParameters = ${JSON.stringify(assets)};
@@ -17,6 +15,11 @@ export {
17
15
  SUPPORTED_LOCALES,
18
16
  };`;
19
17
 
20
- mkdirp.sync("dist/generated/");
21
- fs.writeFileSync("dist/generated/AssetParameters.js", fileContent);
18
+ const generate = async () => {
19
+ await fs.mkdir("dist/generated/", { recursive: true });
20
+ return fs.writeFile("dist/generated/AssetParameters.js", fileContent);
21
+ }
22
22
 
23
+ generate().then(() => {
24
+ console.log("Assets parameters generated.");
25
+ });
@@ -0,0 +1,26 @@
1
+ const fs = require('fs').promises;
2
+ const path = require('path');
3
+ const CleanCSS = require('clean-css');
4
+
5
+ const generate = async () => {
6
+ await fs.mkdir("dist/generated/css/");
7
+
8
+ const files = (await fs.readdir("src/css/")).filter(file => file.endsWith(".css"));
9
+ const filesPromises = files.map(async file => {
10
+ let content = await fs.readFile(path.join("src/css/", file));
11
+ const res = new CleanCSS().minify(`${content}`);
12
+ content = `export default {
13
+ packageName: "@ui5/webcomponents-base",
14
+ fileName: "${file}",
15
+ content: \`${res.styles}\`
16
+ };`;
17
+
18
+ return fs.writeFile(path.join("dist/generated/css/", `${file}.js`), content);
19
+ });
20
+
21
+ return Promise.all(filesPromises);
22
+ };
23
+
24
+ generate().then(() => {
25
+ console.log("Styles files generated.");
26
+ });
@@ -0,0 +1,32 @@
1
+ const fs = require('fs').promises;
2
+
3
+ const generate = async () => {
4
+ const version = JSON.parse(await fs.readFile("package.json")).version;
5
+
6
+ // Parse version
7
+ const matches = version.match(/^([0-9]+)\.([0-9]+)\.([0-9]+)(.*)$/);
8
+ if (!matches) {
9
+ throw new Error("Unsupported version format");
10
+ }
11
+
12
+ const isNext = version.match(/[a-f0-9]{9}$/);
13
+ const buildTime = Math.floor(new Date().getTime() / 1000);
14
+
15
+ const fileContent = `const VersionInfo = {
16
+ version: "${version}",
17
+ major: ${matches[1]},
18
+ minor: ${matches[2]},
19
+ patch: ${matches[3]},
20
+ suffix: "${matches[4]}",
21
+ isNext: ${isNext ? "true" : "false"},
22
+ buildTime: ${buildTime},
23
+ };
24
+ export default VersionInfo;`;
25
+
26
+ await fs.mkdir("dist/generated/", { recursive: true });
27
+ await fs.writeFile("dist/generated/VersionInfo.js", fileContent);
28
+ }
29
+
30
+ generate().then(() => {
31
+ console.log("Version info file generated.");
32
+ });
@@ -1,28 +1,22 @@
1
1
  const resolve = require("resolve");
2
2
 
3
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 versionScript = resolve.sync("@ui5/webcomponents-base/lib/generate-version-info/index.js");
4
6
  const serve = resolve.sync("@ui5/webcomponents-tools/lib/serve/index.js");
5
- const generateHash = resolve.sync("@ui5/webcomponents-tools/lib/hash/generate.js");
6
- const hashIsUpToDate = resolve.sync("@ui5/webcomponents-tools/lib/hash/upToDate.js");
7
7
  const copyUsedModules = resolve.sync("@ui5/webcomponents-tools/lib/copy-list/index.js");
8
- const replaceGlobalCore = resolve.sync("@ui5/webcomponents-tools/lib/replace-global-core/index.js");
9
8
  const esmAbsToRel = resolve.sync("@ui5/webcomponents-tools/lib/esm-abs-to-rel/index.js");
10
- const UP_TO_DATE = `node "${hashIsUpToDate}" dist/ hash.txt && echo "Up to date."`;
11
9
 
12
10
  const scripts = {
13
11
  clean: "rimraf dist && rimraf .port",
14
12
  lint: "eslint . --config config/.eslintrc.js",
15
- prepare: "nps clean integrate copy generateAssetParameters",
13
+ prepare: "nps clean integrate copy generateAssetParameters generateVersionInfo generateStyles",
16
14
  integrate: {
17
- 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",
18
- "copy-used-modules": `node ${copyUsedModules} ./used-modules.txt dist/`,
19
- "copy-overlay": `copy-and-watch "overlay/**/*.js" dist/`,
15
+ default: "nps integrate.copy-used-modules integrate.replace-amd integrate.amd-to-es6 integrate.esm-abs-to-rel integrate.third-party",
16
+ "copy-used-modules": `node "${copyUsedModules}" ./used-modules.txt dist/`,
20
17
  "replace-amd": "replace-in-file sap.ui.define define dist/**/*.js",
21
- "replace-export-true": `replace-in-file ", /* bExport= */ true" "" dist/**/*.js`,
22
- "replace-export-false": `replace-in-file ", /* bExport= */ false" "" dist/**/*.js`,
23
18
  "amd-to-es6": "amdtoes6 --src=dist/ --replace --glob=**/*.js",
24
- "replace-global-core-usage": `node ${replaceGlobalCore} dist/`,
25
- "esm-abs-to-rel": `node ${esmAbsToRel} dist/ dist/`,
19
+ "esm-abs-to-rel": `node "${esmAbsToRel}" dist/ dist/`,
26
20
  "third-party": {
27
21
  default: "nps integrate.third-party.copy integrate.third-party.fix",
28
22
  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,20 +24,23 @@ const scripts = {
30
24
  },
31
25
  },
32
26
  build: {
33
- default: `${UP_TO_DATE} || nps lint prepare build.bundle hash`,
27
+ default: `nps lint prepare build.bundle`,
34
28
  bundle: "rollup --config config/rollup.config.js",
35
29
  },
36
30
  copy: {
37
31
  default: "nps copy.src copy.test",
38
- src: `copy-and-watch "src/**/*.js" dist/`,
32
+ src: `copy-and-watch "src/**/*.{js,css}" dist/`,
39
33
  test: `copy-and-watch "test/**/*.*" dist/test-resources`,
40
34
  },
41
35
  generateAssetParameters: `node "${assetParametersScript}"`,
36
+ generateVersionInfo: `node "${versionScript}"`,
37
+ generateStyles: `node "${stylesScript}"`,
42
38
  watch: {
43
- default: 'concurrently "nps watch.test" "nps watch.src" "nps watch.bundle"',
39
+ default: 'concurrently "nps watch.test" "nps watch.src" "nps watch.bundle" "nps watch.styles"',
44
40
  src: 'nps "copy.src --watch --skip-initial-copy"',
45
41
  test: 'nps "copy.test --watch --skip-initial-copy"',
46
42
  bundle: "rollup --config config/rollup.config.js -w --environment DEV",
43
+ styles: 'chokidar "src/css/*.css" -c "nps generateStyles"'
47
44
  },
48
45
  dev: 'concurrently "nps serve" "nps watch"',
49
46
  start: "nps prepare dev",
@@ -53,7 +50,6 @@ const scripts = {
53
50
  default: 'concurrently "nps serve" "nps test.run" --kill-others --success first',
54
51
  run: "cross-env WDIO_LOG_LEVEL=error FORCE_COLOR=0 wdio config/wdio.conf.js",
55
52
  },
56
- hash: `node "${generateHash}" dist/ hash.txt`,
57
53
  };
58
54
 
59
55
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ui5/webcomponents-base",
3
- "version": "0.0.0-2c7615fe9",
3
+ "version": "0.0.0-3236d56be",
4
4
  "description": "UI5 Web Components: webcomponents.base",
5
5
  "author": "SAP SE (https://www.sap.com)",
6
6
  "license": "Apache-2.0",
@@ -28,23 +28,21 @@
28
28
  "start": "nps start",
29
29
  "build": "nps build",
30
30
  "test": "nps test",
31
- "hash": "nps hash",
32
31
  "prepublishOnly": "npm run clean && npm run build"
33
32
  },
34
33
  "dependencies": {
35
- "lit-html": "2.0.0-rc.3"
34
+ "lit-html": "^2.0.1"
36
35
  },
37
36
  "devDependencies": {
38
- "@ui5/webcomponents-tools": "0.0.0-2c7615fe9",
39
- "@buxlabs/amd-to-es6": "0.16.0",
40
- "@openui5/sap.ui.core": "1.87.3",
41
- "array-uniq": "^2.0.0",
42
- "chromedriver": "92.0.0",
37
+ "@buxlabs/amd-to-es6": "0.16.1",
38
+ "@openui5/sap.ui.core": "1.101.0",
39
+ "@ui5/webcomponents-tools": "0.0.0-3236d56be",
40
+ "chromedriver": "100.0.0",
41
+ "clean-css": "^5.2.2",
43
42
  "copy-and-watch": "^0.1.5",
43
+ "cross-env": "^7.0.3",
44
44
  "eslint": "^7.22.0",
45
- "eslint-config-airbnb-base": "^14.2.1",
46
- "npm-run-all": "^4.1.5",
47
- "path-exists-cli": "^1.0.0",
48
- "replace-in-file": "^6.2.0"
45
+ "mkdirp": "^1.0.4",
46
+ "resolve": "^1.20.0"
49
47
  }
50
48
  }