@ui5/webcomponents-base 0.0.0-de4752078 → 0.0.0-deac3098a
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 +168 -0
- package/README.md +26 -2
- package/bundle.esm.js +6 -2
- package/dist/Boot.js +34 -18
- package/dist/CSP.js +59 -0
- package/dist/CustomElementsRegistry.js +60 -4
- package/dist/CustomElementsScope.js +20 -98
- package/dist/CustomElementsScopeUtils.js +108 -0
- package/dist/Device.js +17 -1
- package/dist/EventProvider.js +19 -25
- package/dist/FeaturesRegistry.js +4 -1
- package/dist/FontFace.js +7 -95
- package/dist/InitialConfiguration.js +31 -14
- package/dist/Keys.js +62 -0
- package/dist/ManagedStyles.js +83 -0
- package/dist/Render.js +3 -1
- package/dist/Runtimes.js +107 -0
- package/dist/StaticAreaItem.js +15 -10
- package/dist/SystemCSSVars.js +4 -25
- package/dist/UI5Element.js +62 -61
- package/dist/UI5ElementMetadata.js +18 -2
- package/dist/asset-registries/Icons.js +25 -8
- package/dist/asset-registries/Illustrations.js +30 -0
- package/dist/asset-registries/LocaleData.js +17 -3
- package/dist/assets-meta/IconCollectionsAlias.js +18 -0
- package/dist/config/Icons.js +52 -0
- package/dist/config/Theme.js +25 -0
- package/dist/css/BusyIndicator.css +76 -0
- package/dist/css/FontFace.css +75 -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/features/F6Navigation.js +108 -0
- package/dist/features/OpenUI5Enablement.js +119 -0
- package/dist/generated/AssetParameters.js +1 -1
- package/dist/generated/VersionInfo.js +10 -0
- package/dist/generated/css/BusyIndicator.css.js +5 -0
- 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 +39 -18
- package/dist/renderer/directives/style-map.js +72 -0
- package/dist/renderer/executeTemplate.js +19 -2
- package/dist/resources/bundle.esm.js +15 -104
- 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/encodeCSS.js +14 -0
- package/dist/sap/base/security/encodeXML.js +23 -0
- package/dist/sap/base/security/sanitizeHTML.js +16 -0
- package/dist/sap/base/strings/toHex.js +8 -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 +11 -10
- package/dist/theming/getEffectiveLinksHrefs.js +27 -0
- package/dist/theming/getEffectiveStyle.js +9 -0
- package/dist/theming/getStylesString.js +4 -2
- package/dist/theming/getThemeDesignerTheme.js +25 -5
- 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 +13 -7
- package/dist/util/HTMLSanitizer.js +7 -0
- package/dist/util/InvisibleMessage.js +60 -0
- package/dist/util/PopupUtils.js +1 -1
- package/dist/util/TabbableElements.js +5 -1
- package/dist/util/createLinkInHead.js +19 -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/getNormalizedTarget.js +16 -0
- package/dist/util/isNodeHidden.js +1 -1
- 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/lib/generate-version-info/index.js +27 -0
- package/package-scripts.js +22 -3
- package/package.json +16 -8
- package/src/Boot.js +34 -18
- package/src/CSP.js +59 -0
- package/src/CustomElementsRegistry.js +60 -4
- package/src/CustomElementsScope.js +20 -98
- package/src/CustomElementsScopeUtils.js +108 -0
- package/src/Device.js +17 -1
- package/src/EventProvider.js +19 -25
- package/src/FeaturesRegistry.js +4 -1
- package/src/FontFace.js +7 -95
- package/src/InitialConfiguration.js +31 -14
- package/src/Keys.js +62 -0
- package/src/ManagedStyles.js +83 -0
- package/src/Render.js +3 -1
- package/src/Runtimes.js +107 -0
- package/src/StaticAreaItem.js +15 -10
- package/src/SystemCSSVars.js +4 -25
- package/src/UI5Element.js +62 -61
- package/src/UI5ElementMetadata.js +18 -2
- package/src/asset-registries/Icons.js +25 -8
- package/src/asset-registries/Illustrations.js +30 -0
- package/src/asset-registries/LocaleData.js +17 -3
- package/src/assets-meta/IconCollectionsAlias.js +18 -0
- package/src/config/Icons.js +52 -0
- package/src/config/Theme.js +25 -0
- package/src/css/BusyIndicator.css +76 -0
- package/src/css/FontFace.css +75 -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/features/F6Navigation.js +108 -0
- package/src/features/OpenUI5Enablement.js +119 -0
- package/src/i18nBundle.js +33 -2
- package/src/renderer/LitRenderer.js +39 -18
- package/src/renderer/directives/style-map.js +72 -0
- package/src/renderer/executeTemplate.js +19 -2
- package/src/theming/CustomStyle.js +23 -3
- package/src/theming/applyTheme.js +11 -10
- package/src/theming/getEffectiveLinksHrefs.js +27 -0
- package/src/theming/getEffectiveStyle.js +9 -0
- package/src/theming/getStylesString.js +4 -2
- package/src/theming/getThemeDesignerTheme.js +25 -5
- 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 +13 -7
- package/src/util/HTMLSanitizer.js +7 -0
- package/src/util/InvisibleMessage.js +60 -0
- package/src/util/PopupUtils.js +1 -1
- package/src/util/TabbableElements.js +5 -1
- package/src/util/createLinkInHead.js +19 -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/getNormalizedTarget.js +16 -0
- package/src/util/isNodeHidden.js +1 -1
- package/src/util/isNodeTabbable.js +4 -4
- package/used-modules.txt +10 -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/dist/util/encodeCSS.js +0 -24
- 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
- package/src/util/encodeCSS.js +0 -24
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export default {
|
|
2
|
+
packageName: "@ui5/webcomponents-base",
|
|
3
|
+
fileName: "BusyIndicator.css",
|
|
4
|
+
content: `.busy-indicator-wrapper{position:relative;height:100%;width:100%}.busy-indicator-overlay{display:var(--ui5_web_components_busy_indicator_display);position:absolute;inset:0;background:var(--ui5_web_components_busy_indicator_background-color);z-index:99}.busy-indicator-busy-area{display:var(--ui5_web_components_busy_indicator_display);position:absolute;z-index:99;inset:0;justify-content:center;align-items:center;background-color:inherit;flex-direction:column;color:var(--_ui5_busy_indicator_color)}:host([__is-busy]) .busy-indicator-wrapper>:not(.busy-indicator-busy-area):not(.busy-indicator-overlay):not([busy-indicator-before-span]){--ui5_web_components_busy_indicator_display:none}.busy-indicator-busy-area:focus{outline:var(--_ui5_busy_indicator_focus_outline);outline-offset:-.125rem}.busy-indicator-circle{width:1rem;height:1rem;display:inline-block;background-color:currentColor;border-radius:50%}.circle-animation-0{animation:grow 1.6s infinite cubic-bezier(.32,.06,.85,1.11)}.circle-animation-1{animation:grow 1.6s infinite cubic-bezier(.32,.06,.85,1.11);animation-delay:.2s}.circle-animation-2{animation:grow 1.6s infinite cubic-bezier(.32,.06,.85,1.11);animation-delay:.4s}.sapUiLocalBusy{--ui5_web_components_busy_indicator_display:none}@keyframes grow{0%,100%,50%{-webkit-transform:scale(.5);-moz-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5)}25%{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}`
|
|
5
|
+
};
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export default {
|
|
2
|
+
packageName: "@ui5/webcomponents-base",
|
|
3
|
+
fileName: "FontFace.css",
|
|
4
|
+
content: `@font-face{font-family:"72";font-style:normal;font-weight:400;src:local("72"),url(https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Regular.woff2?ui5-webcomponents) format("woff2"),url(https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Regular.woff?ui5-webcomponents) format("woff")}@font-face{font-family:"72full";font-style:normal;font-weight:400;src:local('72-full'),url(https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Regular-full.woff2?ui5-webcomponents) format("woff2"),url(https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Regular-full.woff?ui5-webcomponents) format("woff")}@font-face{font-family:"72";font-style:normal;font-weight:700;src:local('72-Bold'),url(https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold.woff2?ui5-webcomponents) format("woff2"),url(https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold.woff?ui5-webcomponents) format("woff")}@font-face{font-family:"72full";font-style:normal;font-weight:700;src:local('72-Bold-full'),url(https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold-full.woff2?ui5-webcomponents) format("woff2"),url(https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold-full.woff?ui5-webcomponents) format("woff")}@font-face{font-family:'72-Bold';font-style:normal;src:local('72-Bold'),url(https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold.woff2?ui5-webcomponents) format("woff2"),url(https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold.woff?ui5-webcomponents) format("woff")}@font-face{font-family:'72-Boldfull';font-style:normal;src:url(https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold-full.woff2?ui5-webcomponents) format("woff2"),url(https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold-full.woff?ui5-webcomponents) format("woff")}@font-face{font-family:'72-Light';font-style:normal;src:local('72-Light'),url(https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Light.woff2?ui5-webcomponents) format("woff2"),url(https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Light.woff?ui5-webcomponents) format("woff")}@font-face{font-family:'72-Lightfull';font-style:normal;src:url(https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Light-full.woff2?ui5-webcomponents) format("woff2"),url(https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Light-full.woff?ui5-webcomponents) format("woff")}@font-face{font-family:"72Black";font-style:bold;font-weight:900;src:local('72Black'),url(https://openui5nightly.hana.ondemand.com/resources/sap/ui/core/themes/sap_horizon/fonts/72-Black.woff2?ui5-webcomponents) format("woff2"),url(https://openui5nightly.hana.ondemand.com/resources/sap/ui/core/themes/sap_horizon/fonts/72-Black.woff?ui5-webcomponents) format("woff")}`
|
|
5
|
+
};
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export default {
|
|
2
|
+
packageName: "@ui5/webcomponents-base",
|
|
3
|
+
fileName: "OverrideFontFace.css",
|
|
4
|
+
content: `@font-face{font-family:'72override';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;src:local('Arial'),local('Helvetica'),local('sans-serif')}`
|
|
5
|
+
};
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export default {
|
|
2
|
+
packageName: "@ui5/webcomponents-base",
|
|
3
|
+
fileName: "SystemCSSVars.css",
|
|
4
|
+
content: `:root{--_ui5_content_density:cozy}.sapUiSizeCompact,.ui5-content-density-compact,[data-ui5-compact-size]{--_ui5_content_density:compact}[dir=rtl]{--_ui5_dir:rtl}[dir=ltr]{--_ui5_dir:ltr}`
|
|
5
|
+
};
|
package/dist/i18nBundle.js
CHANGED
|
@@ -3,6 +3,8 @@ import formatMessage from "./util/formatMessage.js";
|
|
|
3
3
|
|
|
4
4
|
const I18nBundleInstances = new Map();
|
|
5
5
|
|
|
6
|
+
let customGetI18nBundle;
|
|
7
|
+
|
|
6
8
|
/**
|
|
7
9
|
* @class
|
|
8
10
|
* @public
|
|
@@ -15,6 +17,7 @@ class I18nBundle {
|
|
|
15
17
|
/**
|
|
16
18
|
* Returns a text in the currently loaded language
|
|
17
19
|
*
|
|
20
|
+
* @public
|
|
18
21
|
* @param {Object|String} textObj key/defaultText pair or just the key
|
|
19
22
|
* @param params Values for the placeholders
|
|
20
23
|
* @returns {*}
|
|
@@ -38,7 +41,7 @@ class I18nBundle {
|
|
|
38
41
|
}
|
|
39
42
|
}
|
|
40
43
|
|
|
41
|
-
const
|
|
44
|
+
const getI18nBundleSync = packageName => {
|
|
42
45
|
if (I18nBundleInstances.has(packageName)) {
|
|
43
46
|
return I18nBundleInstances.get(packageName);
|
|
44
47
|
}
|
|
@@ -48,8 +51,36 @@ const getI18nBundle = packageName => {
|
|
|
48
51
|
return i18nBundle;
|
|
49
52
|
};
|
|
50
53
|
|
|
54
|
+
/**
|
|
55
|
+
* Allows developers to provide a custom getI18nBundle implementation
|
|
56
|
+
* If this function is called, the custom implementation will be used for all components and will completely
|
|
57
|
+
* replace the default implementation.
|
|
58
|
+
*
|
|
59
|
+
* @public
|
|
60
|
+
* @param customGet the function to use instead of the standard getI18nBundle implementation
|
|
61
|
+
*/
|
|
62
|
+
const registerCustomI18nBundleGetter = customGet => {
|
|
63
|
+
customGetI18nBundle = customGet;
|
|
64
|
+
};
|
|
65
|
+
|
|
66
|
+
/**
|
|
67
|
+
* Fetches and returns the I18nBundle instance for the given package
|
|
68
|
+
*
|
|
69
|
+
* @public
|
|
70
|
+
* @param packageName
|
|
71
|
+
* @returns {Promise<I18nBundle>}
|
|
72
|
+
*/
|
|
73
|
+
const getI18nBundle = async packageName => {
|
|
74
|
+
if (customGetI18nBundle) {
|
|
75
|
+
return customGetI18nBundle(packageName);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
await fetchI18nBundle(packageName);
|
|
79
|
+
return getI18nBundleSync(packageName);
|
|
80
|
+
};
|
|
81
|
+
|
|
51
82
|
export {
|
|
52
83
|
registerI18nLoader,
|
|
53
|
-
fetchI18nBundle,
|
|
54
84
|
getI18nBundle,
|
|
85
|
+
registerCustomI18nBundleGetter,
|
|
55
86
|
};
|
|
@@ -1,31 +1,52 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
1
|
+
import {
|
|
2
|
+
render,
|
|
3
|
+
html,
|
|
4
|
+
svg,
|
|
5
|
+
} from "lit-html";
|
|
6
|
+
import { getFeature } from "../FeaturesRegistry.js";
|
|
3
7
|
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
tags = t;
|
|
8
|
+
const effectiveHtml = (...args) => {
|
|
9
|
+
const LitStatic = getFeature("LitStatic");
|
|
10
|
+
const fn = LitStatic ? LitStatic.html : html;
|
|
11
|
+
return fn(...args);
|
|
9
12
|
};
|
|
10
|
-
|
|
11
|
-
|
|
13
|
+
|
|
14
|
+
const effectiveSvg = (...args) => {
|
|
15
|
+
const LitStatic = getFeature("LitStatic");
|
|
16
|
+
const fn = LitStatic ? LitStatic.svg : svg;
|
|
17
|
+
return fn(...args);
|
|
12
18
|
};
|
|
13
19
|
|
|
14
|
-
const litRender = (templateResult, domNode,
|
|
15
|
-
|
|
16
|
-
|
|
20
|
+
const litRender = (templateResult, domNode, styleStrOrHrefsArr, forStaticArea, { host } = {}) => {
|
|
21
|
+
const OpenUI5Enablement = getFeature("OpenUI5Enablement");
|
|
22
|
+
if (OpenUI5Enablement && !forStaticArea) {
|
|
23
|
+
templateResult = OpenUI5Enablement.wrapTemplateResultInBusyMarkup(effectiveHtml, host, templateResult);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
if (typeof styleStrOrHrefsArr === "string") {
|
|
27
|
+
templateResult = effectiveHtml`<style>${styleStrOrHrefsArr}</style>${templateResult}`;
|
|
28
|
+
} else if (Array.isArray(styleStrOrHrefsArr) && styleStrOrHrefsArr.length) {
|
|
29
|
+
templateResult = effectiveHtml`${styleStrOrHrefsArr.map(href => effectiveHtml`<link type="text/css" rel="stylesheet" href="${href}">`)}${templateResult}`;
|
|
17
30
|
}
|
|
18
|
-
render(templateResult, domNode, {
|
|
31
|
+
render(templateResult, domNode, { host });
|
|
19
32
|
};
|
|
20
33
|
|
|
21
|
-
const
|
|
22
|
-
const
|
|
34
|
+
const scopeTag = (tag, tags, suffix) => {
|
|
35
|
+
const LitStatic = getFeature("LitStatic");
|
|
36
|
+
if (LitStatic) {
|
|
37
|
+
return LitStatic.unsafeStatic((tags || []).includes(tag) ? `${tag}-${suffix}` : tag);
|
|
38
|
+
}
|
|
39
|
+
};
|
|
23
40
|
|
|
24
|
-
export {
|
|
25
|
-
|
|
41
|
+
export {
|
|
42
|
+
effectiveHtml as html,
|
|
43
|
+
effectiveSvg as svg,
|
|
44
|
+
};
|
|
45
|
+
export { scopeTag };
|
|
26
46
|
export { repeat } from "lit-html/directives/repeat.js";
|
|
27
47
|
export { classMap } from "lit-html/directives/class-map.js";
|
|
28
|
-
export { styleMap } from "
|
|
48
|
+
export { styleMap } from "./directives/style-map.js";
|
|
49
|
+
export { ifDefined } from "lit-html/directives/if-defined.js";
|
|
29
50
|
export { unsafeHTML } from "lit-html/directives/unsafe-html.js";
|
|
30
51
|
|
|
31
52
|
export default litRender;
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright 2018 Google LLC
|
|
4
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* This is the original style-map.js directive from lit-html 2 with the only difference that "render" is not called even for the first rendering (update is used instead)
|
|
9
|
+
*/
|
|
10
|
+
|
|
11
|
+
import { noChange } from 'lit-html';
|
|
12
|
+
import { directive, Directive, PartType, } from 'lit-html/directive.js';
|
|
13
|
+
class StyleMapDirective extends Directive {
|
|
14
|
+
constructor(partInfo) {
|
|
15
|
+
var _a;
|
|
16
|
+
super(partInfo);
|
|
17
|
+
if (partInfo.type !== PartType.ATTRIBUTE ||
|
|
18
|
+
partInfo.name !== 'style' ||
|
|
19
|
+
((_a = partInfo.strings) === null || _a === void 0 ? void 0 : _a.length) > 2) {
|
|
20
|
+
throw new Error('The `styleMap` directive must be used in the `style` attribute ' +
|
|
21
|
+
'and must be the only part in the attribute.');
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
render(styleInfo) {
|
|
25
|
+
return "";
|
|
26
|
+
}
|
|
27
|
+
update(part, [styleInfo]) {
|
|
28
|
+
const { style } = part.element;
|
|
29
|
+
if (this._previousStyleProperties === undefined) {
|
|
30
|
+
this._previousStyleProperties = new Set();
|
|
31
|
+
for (const name in styleInfo) {
|
|
32
|
+
this._previousStyleProperties.add(name);
|
|
33
|
+
}
|
|
34
|
+
// return this.render(styleInfo);
|
|
35
|
+
}
|
|
36
|
+
// Remove old properties that no longer exist in styleInfo
|
|
37
|
+
// We use forEach() instead of for-of so that re don't require down-level
|
|
38
|
+
// iteration.
|
|
39
|
+
this._previousStyleProperties.forEach((name) => {
|
|
40
|
+
// If the name isn't in styleInfo or it's null/undefined
|
|
41
|
+
if (styleInfo[name] == null) {
|
|
42
|
+
this._previousStyleProperties.delete(name);
|
|
43
|
+
if (name.includes('-')) {
|
|
44
|
+
style.removeProperty(name);
|
|
45
|
+
}
|
|
46
|
+
else {
|
|
47
|
+
// Note reset using empty string (vs null) as IE11 does not always
|
|
48
|
+
// reset via null (https://developer.mozilla.org/en-US/docs/Web/API/ElementCSSInlineStyle/style#setting_styles)
|
|
49
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
50
|
+
style[name] = '';
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
});
|
|
54
|
+
// Add or update properties
|
|
55
|
+
for (const name in styleInfo) {
|
|
56
|
+
const value = styleInfo[name];
|
|
57
|
+
if (value != null) {
|
|
58
|
+
this._previousStyleProperties.add(name);
|
|
59
|
+
if (name.includes('-')) {
|
|
60
|
+
style.setProperty(name, value);
|
|
61
|
+
}
|
|
62
|
+
else {
|
|
63
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
64
|
+
style[name] = value;
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
return noChange;
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
export const styleMap = directive(StyleMapDirective);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { getCustomElementsScopingSuffix, shouldScopeCustomElement } from "../
|
|
1
|
+
import { getCustomElementsScopingSuffix, shouldScopeCustomElement } from "../CustomElementsScopeUtils.js";
|
|
2
2
|
|
|
3
3
|
/**
|
|
4
4
|
* Runs a component's template with the component's current state, while also scoping HTML
|
|
@@ -9,9 +9,26 @@ import { getCustomElementsScopingSuffix, shouldScopeCustomElement } from "../Cus
|
|
|
9
9
|
* @returns {*}
|
|
10
10
|
*/
|
|
11
11
|
const executeTemplate = (template, component) => {
|
|
12
|
-
const tagsToScope = component
|
|
12
|
+
const tagsToScope = getTagsToScope(component);
|
|
13
13
|
const scope = getCustomElementsScopingSuffix();
|
|
14
14
|
return template(component, tagsToScope, scope);
|
|
15
15
|
};
|
|
16
16
|
|
|
17
|
+
/**
|
|
18
|
+
* Returns all tags, used inside component's template subject to scoping.
|
|
19
|
+
* @param component - the component
|
|
20
|
+
* @returns {Array[]}
|
|
21
|
+
* @private
|
|
22
|
+
*/
|
|
23
|
+
const getTagsToScope = component => {
|
|
24
|
+
const componentTag = component.constructor.getMetadata().getPureTag();
|
|
25
|
+
const tagsToScope = component.constructor.getUniqueDependencies().map(dep => dep.getMetadata().getPureTag()).filter(shouldScopeCustomElement);
|
|
26
|
+
|
|
27
|
+
if (shouldScopeCustomElement(componentTag)) {
|
|
28
|
+
tagsToScope.push(componentTag);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
return tagsToScope;
|
|
32
|
+
};
|
|
33
|
+
|
|
17
34
|
export default executeTemplate;
|