@ui5/webcomponents-base 0.34.0 → 1.0.1
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.
- package/.eslintignore +3 -1
- package/CHANGELOG.md +52 -0
- package/README.md +26 -2
- package/bundle.esm.js +6 -2
- package/dist/CSP.js +59 -0
- package/dist/Device.js +7 -0
- package/dist/EventProvider.js +19 -25
- package/dist/FontFace.js +7 -95
- package/dist/InitialConfiguration.js +31 -14
- package/dist/Keys.js +15 -0
- package/dist/ManagedStyles.js +83 -0
- package/dist/Render.js +3 -1
- package/dist/StaticAreaItem.js +11 -9
- package/dist/SystemCSSVars.js +4 -25
- package/dist/UI5Element.js +46 -60
- package/dist/UI5ElementMetadata.js +9 -1
- package/dist/asset-registries/Icons.js +29 -8
- package/dist/asset-registries/Illustrations.js +30 -0
- package/dist/asset-registries/LocaleData.js +11 -2
- package/dist/assets-meta/IconCollectionsAlias.js +18 -0
- package/dist/config/Theme.js +14 -0
- package/dist/css/FontFace.css +45 -0
- package/dist/css/OverrideFontFace.css +32 -0
- package/dist/css/SystemCSSVars.css +17 -0
- package/dist/delegate/ItemNavigation.js +66 -0
- package/dist/delegate/ScrollEnablement.js +7 -1
- package/dist/generated/AssetParameters.js +1 -1
- package/dist/generated/css/FontFace.css.js +5 -0
- package/dist/generated/css/OverrideFontFace.css.js +5 -0
- package/dist/generated/css/SystemCSSVars.css.js +5 -0
- package/dist/i18nBundle.js +33 -2
- package/dist/renderer/LitRenderer.js +24 -21
- package/dist/renderer/directives/style-map.js +72 -0
- package/dist/resources/bundle.esm.js +17 -101
- package/dist/resources/bundle.esm.js.map +1 -1
- package/dist/sap/base/Log.js +241 -0
- package/dist/sap/base/assert.js +8 -0
- package/dist/sap/base/security/URLListValidator.js +148 -0
- package/dist/sap/base/security/sanitizeHTML.js +16 -0
- package/dist/sap/base/util/now.js +7 -0
- package/dist/sap/ui/thirdparty/caja-html-sanitizer.js +3585 -0
- package/dist/test-resources/elements/WithStaticArea.js +2 -1
- package/dist/test-resources/pages/AllTestElements.html +3 -0
- package/dist/test-resources/pages/i18n.html +1 -3
- package/dist/test-resources/specs/ConfigurationChange.spec.js +9 -9
- package/dist/test-resources/specs/ConfigurationScript.spec.js +24 -24
- package/dist/test-resources/specs/ConfigurationURL.spec.js +64 -18
- package/dist/test-resources/specs/CustomTheme.spec.js +7 -7
- package/dist/test-resources/specs/EventProvider.spec.js +63 -0
- package/dist/test-resources/specs/StaticArea.spec.js +55 -13
- package/dist/test-resources/specs/Theming.spec.js +11 -11
- package/dist/test-resources/specs/UI5ElementInvalidation.js +29 -29
- package/dist/test-resources/specs/UI5ElementLifecycle.js +11 -11
- package/dist/test-resources/specs/UI5ElementListenForChildPropChanges.spec.js +11 -11
- package/dist/test-resources/specs/UI5ElementMetadataExt.js +8 -8
- package/dist/test-resources/specs/UI5ElementPropertyValidation.js +6 -6
- package/dist/test-resources/specs/UI5ElementPropsAndAttrs.spec.js +36 -36
- package/dist/test-resources/specs/UI5ElementShadowDOM.js +9 -9
- package/dist/test-resources/specs/UI5ElementSlots.js +9 -9
- package/dist/theming/CustomStyle.js +23 -3
- package/dist/theming/applyTheme.js +5 -8
- package/dist/theming/getEffectiveLinksHrefs.js +20 -0
- package/dist/theming/getStylesString.js +4 -2
- package/dist/theming/getThemeDesignerTheme.js +2 -1
- package/dist/theming/preloadLinks.js +23 -0
- package/dist/types/DataType.js +12 -0
- package/dist/types/Float.js +4 -0
- package/dist/types/Integer.js +4 -0
- package/dist/types/InvisibleMessageMode.js +30 -0
- package/dist/updateShadowRoot.js +8 -4
- package/dist/util/AriaLabelHelper.js +4 -4
- package/dist/util/FocusableElements.js +5 -1
- package/dist/util/HTMLSanitizer.js +7 -0
- package/dist/util/InvisibleMessage.js +58 -0
- package/dist/util/PopupUtils.js +1 -1
- package/dist/util/TabbableElements.js +1 -1
- package/dist/util/createLinkInHead.js +19 -0
- package/dist/util/encodeXML.js +35 -0
- package/dist/util/escapeRegex.js +10 -0
- package/dist/util/generateHighlightedMarkup.js +42 -0
- package/dist/util/getClassCopy.js +7 -2
- package/dist/util/isNodeTabbable.js +4 -4
- package/hash.txt +1 -1
- package/index.js +1 -1
- package/lib/generate-asset-parameters/index.js +0 -1
- package/lib/generate-styles/index.js +18 -0
- package/package-scripts.js +25 -3
- package/package.json +17 -9
- package/src/CSP.js +59 -0
- package/src/Device.js +7 -0
- package/src/EventProvider.js +19 -25
- package/src/FontFace.js +7 -95
- package/src/InitialConfiguration.js +31 -14
- package/src/Keys.js +15 -0
- package/src/ManagedStyles.js +83 -0
- package/src/Render.js +3 -1
- package/src/StaticAreaItem.js +11 -9
- package/src/SystemCSSVars.js +4 -25
- package/src/UI5Element.js +46 -60
- package/src/UI5ElementMetadata.js +9 -1
- package/src/asset-registries/Icons.js +29 -8
- package/src/asset-registries/Illustrations.js +30 -0
- package/src/asset-registries/LocaleData.js +11 -2
- package/src/assets-meta/IconCollectionsAlias.js +18 -0
- package/src/config/Theme.js +14 -0
- package/src/css/FontFace.css +45 -0
- package/src/css/OverrideFontFace.css +32 -0
- package/src/css/SystemCSSVars.css +17 -0
- package/src/delegate/ItemNavigation.js +66 -0
- package/src/delegate/ScrollEnablement.js +7 -1
- package/src/i18nBundle.js +33 -2
- package/src/renderer/LitRenderer.js +24 -21
- package/src/renderer/directives/style-map.js +72 -0
- package/src/theming/CustomStyle.js +23 -3
- package/src/theming/applyTheme.js +5 -8
- package/src/theming/getEffectiveLinksHrefs.js +20 -0
- package/src/theming/getStylesString.js +4 -2
- package/src/theming/getThemeDesignerTheme.js +2 -1
- package/src/theming/preloadLinks.js +23 -0
- package/src/types/DataType.js +12 -0
- package/src/types/Float.js +4 -0
- package/src/types/Integer.js +4 -0
- package/src/types/InvisibleMessageMode.js +30 -0
- package/src/updateShadowRoot.js +8 -4
- package/src/util/AriaLabelHelper.js +4 -4
- package/src/util/FocusableElements.js +5 -1
- package/src/util/HTMLSanitizer.js +7 -0
- package/src/util/InvisibleMessage.js +58 -0
- package/src/util/PopupUtils.js +1 -1
- package/src/util/TabbableElements.js +1 -1
- package/src/util/createLinkInHead.js +19 -0
- package/src/util/encodeXML.js +35 -0
- package/src/util/escapeRegex.js +10 -0
- package/src/util/generateHighlightedMarkup.js +42 -0
- package/src/util/getClassCopy.js +7 -2
- package/src/util/isNodeTabbable.js +4 -4
- package/used-modules.txt +7 -0
- package/dist/config/AssetsPath.js +0 -17
- package/dist/renderer/ifDefined.js +0 -21
- package/dist/renderer/scopeHTML.js +0 -32
- package/dist/theming/createThemePropertiesStyleTag.js +0 -20
- package/src/config/AssetsPath.js +0 -17
- package/src/renderer/ifDefined.js +0 -21
- package/src/renderer/scopeHTML.js +0 -32
- package/src/theming/createThemePropertiesStyleTag.js +0 -20
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import escapeRegex from "./escapeRegex.js";
|
|
2
|
+
import encodeXML from "./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;
|
package/src/util/getClassCopy.js
CHANGED
|
@@ -1,5 +1,10 @@
|
|
|
1
|
-
const getClassCopy = klass => {
|
|
2
|
-
return class classCopy extends klass {
|
|
1
|
+
const getClassCopy = (klass, constructorCallback) => {
|
|
2
|
+
return class classCopy extends klass {
|
|
3
|
+
constructor() {
|
|
4
|
+
super();
|
|
5
|
+
constructorCallback && constructorCallback();
|
|
6
|
+
}
|
|
7
|
+
};
|
|
3
8
|
};
|
|
4
9
|
|
|
5
10
|
export default getClassCopy;
|
|
@@ -15,14 +15,14 @@ const isNodeTabbable = node => {
|
|
|
15
15
|
return false;
|
|
16
16
|
}
|
|
17
17
|
|
|
18
|
-
if (nodeName === "a" || /input|select|textarea|button|object/.test(nodeName)) {
|
|
19
|
-
return !node.disabled;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
18
|
const tabIndex = node.getAttribute("tabindex");
|
|
23
19
|
if (tabIndex !== null && tabIndex !== undefined) {
|
|
24
20
|
return parseInt(tabIndex) >= 0;
|
|
25
21
|
}
|
|
22
|
+
|
|
23
|
+
if (nodeName === "a" || /input|select|textarea|button|object/.test(nodeName)) {
|
|
24
|
+
return !node.disabled;
|
|
25
|
+
}
|
|
26
26
|
};
|
|
27
27
|
|
|
28
28
|
export default isNodeTabbable;
|
package/used-modules.txt
ADDED
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import { getAssetsPath as getConfiguredAssetsPath } from "../InitialConfiguration.js";
|
|
2
|
-
|
|
3
|
-
let assetsPath;
|
|
4
|
-
|
|
5
|
-
const getAssetsPath = () => {
|
|
6
|
-
if (assetsPath === undefined) {
|
|
7
|
-
assetsPath = getConfiguredAssetsPath();
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
return assetsPath;
|
|
11
|
-
};
|
|
12
|
-
|
|
13
|
-
const setAssetsPath = newAssetsPath => {
|
|
14
|
-
assetsPath = newAssetsPath;
|
|
15
|
-
};
|
|
16
|
-
|
|
17
|
-
export { getAssetsPath, setAssetsPath }; // eslint-disable-line
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
AttributePart,
|
|
3
|
-
directive,
|
|
4
|
-
noChange,
|
|
5
|
-
} from "lit-html/lit-html.js";
|
|
6
|
-
|
|
7
|
-
/*
|
|
8
|
-
lit-html directive that removes and attribute if it is undefined
|
|
9
|
-
*/
|
|
10
|
-
export default directive(value => part => {
|
|
11
|
-
if ((value === undefined) && part instanceof AttributePart) {
|
|
12
|
-
if (value !== part.value) {
|
|
13
|
-
const name = part.committer.name;
|
|
14
|
-
part.committer.element.removeAttribute(name);
|
|
15
|
-
}
|
|
16
|
-
} else if (part.committer && part.committer.element && part.committer.element.getAttribute(part.committer.name) === value) {
|
|
17
|
-
part.setValue(noChange);
|
|
18
|
-
} else {
|
|
19
|
-
part.setValue(value);
|
|
20
|
-
}
|
|
21
|
-
});
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
const cache = new Map();
|
|
2
|
-
|
|
3
|
-
const scopeHTML = (strings, tags, suffix) => {
|
|
4
|
-
if (suffix && tags && tags.length) {
|
|
5
|
-
strings = strings.map(string => {
|
|
6
|
-
if (cache.has(string)) {
|
|
7
|
-
return cache.get(string);
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
/*
|
|
11
|
-
const allTags = [...string.matchAll(/<(ui5-.*?)[> ]/g)].map(x => x[1]);
|
|
12
|
-
allTags.forEach(t => {
|
|
13
|
-
if (!tags.includes(t)) {
|
|
14
|
-
throw new Error(`${t} not found in ${string}`);
|
|
15
|
-
// console.log(t, " in ", string);
|
|
16
|
-
}
|
|
17
|
-
});
|
|
18
|
-
*/
|
|
19
|
-
|
|
20
|
-
let result = string;
|
|
21
|
-
tags.forEach(tag => {
|
|
22
|
-
result = result.replace(new RegExp(`(</?)(${tag})(/?[> \t\n])`, "g"), `$1$2-${suffix}$3`);
|
|
23
|
-
});
|
|
24
|
-
cache.set(string, result);
|
|
25
|
-
return result;
|
|
26
|
-
});
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
return strings;
|
|
30
|
-
};
|
|
31
|
-
|
|
32
|
-
export default scopeHTML;
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import createStyleInHead from "../util/createStyleInHead.js";
|
|
2
|
-
|
|
3
|
-
/**
|
|
4
|
-
* Creates/updates a style element holding all CSS Custom Properties
|
|
5
|
-
* @param cssText
|
|
6
|
-
* @param packageName
|
|
7
|
-
*/
|
|
8
|
-
const createThemePropertiesStyleTag = (cssText, packageName) => {
|
|
9
|
-
const styleElement = document.head.querySelector(`style[data-ui5-theme-properties="${packageName}"]`);
|
|
10
|
-
if (styleElement) {
|
|
11
|
-
styleElement.textContent = cssText || ""; // in case of undefined
|
|
12
|
-
} else {
|
|
13
|
-
const attributes = {
|
|
14
|
-
"data-ui5-theme-properties": packageName,
|
|
15
|
-
};
|
|
16
|
-
createStyleInHead(cssText, attributes);
|
|
17
|
-
}
|
|
18
|
-
};
|
|
19
|
-
|
|
20
|
-
export default createThemePropertiesStyleTag;
|
package/src/config/AssetsPath.js
DELETED
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import { getAssetsPath as getConfiguredAssetsPath } from "../InitialConfiguration.js";
|
|
2
|
-
|
|
3
|
-
let assetsPath;
|
|
4
|
-
|
|
5
|
-
const getAssetsPath = () => {
|
|
6
|
-
if (assetsPath === undefined) {
|
|
7
|
-
assetsPath = getConfiguredAssetsPath();
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
return assetsPath;
|
|
11
|
-
};
|
|
12
|
-
|
|
13
|
-
const setAssetsPath = newAssetsPath => {
|
|
14
|
-
assetsPath = newAssetsPath;
|
|
15
|
-
};
|
|
16
|
-
|
|
17
|
-
export { getAssetsPath, setAssetsPath }; // eslint-disable-line
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
AttributePart,
|
|
3
|
-
directive,
|
|
4
|
-
noChange,
|
|
5
|
-
} from "lit-html/lit-html.js";
|
|
6
|
-
|
|
7
|
-
/*
|
|
8
|
-
lit-html directive that removes and attribute if it is undefined
|
|
9
|
-
*/
|
|
10
|
-
export default directive(value => part => {
|
|
11
|
-
if ((value === undefined) && part instanceof AttributePart) {
|
|
12
|
-
if (value !== part.value) {
|
|
13
|
-
const name = part.committer.name;
|
|
14
|
-
part.committer.element.removeAttribute(name);
|
|
15
|
-
}
|
|
16
|
-
} else if (part.committer && part.committer.element && part.committer.element.getAttribute(part.committer.name) === value) {
|
|
17
|
-
part.setValue(noChange);
|
|
18
|
-
} else {
|
|
19
|
-
part.setValue(value);
|
|
20
|
-
}
|
|
21
|
-
});
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
const cache = new Map();
|
|
2
|
-
|
|
3
|
-
const scopeHTML = (strings, tags, suffix) => {
|
|
4
|
-
if (suffix && tags && tags.length) {
|
|
5
|
-
strings = strings.map(string => {
|
|
6
|
-
if (cache.has(string)) {
|
|
7
|
-
return cache.get(string);
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
/*
|
|
11
|
-
const allTags = [...string.matchAll(/<(ui5-.*?)[> ]/g)].map(x => x[1]);
|
|
12
|
-
allTags.forEach(t => {
|
|
13
|
-
if (!tags.includes(t)) {
|
|
14
|
-
throw new Error(`${t} not found in ${string}`);
|
|
15
|
-
// console.log(t, " in ", string);
|
|
16
|
-
}
|
|
17
|
-
});
|
|
18
|
-
*/
|
|
19
|
-
|
|
20
|
-
let result = string;
|
|
21
|
-
tags.forEach(tag => {
|
|
22
|
-
result = result.replace(new RegExp(`(</?)(${tag})(/?[> \t\n])`, "g"), `$1$2-${suffix}$3`);
|
|
23
|
-
});
|
|
24
|
-
cache.set(string, result);
|
|
25
|
-
return result;
|
|
26
|
-
});
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
return strings;
|
|
30
|
-
};
|
|
31
|
-
|
|
32
|
-
export default scopeHTML;
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import createStyleInHead from "../util/createStyleInHead.js";
|
|
2
|
-
|
|
3
|
-
/**
|
|
4
|
-
* Creates/updates a style element holding all CSS Custom Properties
|
|
5
|
-
* @param cssText
|
|
6
|
-
* @param packageName
|
|
7
|
-
*/
|
|
8
|
-
const createThemePropertiesStyleTag = (cssText, packageName) => {
|
|
9
|
-
const styleElement = document.head.querySelector(`style[data-ui5-theme-properties="${packageName}"]`);
|
|
10
|
-
if (styleElement) {
|
|
11
|
-
styleElement.textContent = cssText || ""; // in case of undefined
|
|
12
|
-
} else {
|
|
13
|
-
const attributes = {
|
|
14
|
-
"data-ui5-theme-properties": packageName,
|
|
15
|
-
};
|
|
16
|
-
createStyleInHead(cssText, attributes);
|
|
17
|
-
}
|
|
18
|
-
};
|
|
19
|
-
|
|
20
|
-
export default createThemePropertiesStyleTag;
|