@ui5/webcomponents-base 0.0.0-11d529e8a → 0.0.0-1e08ebdef
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 +2 -1
- package/CHANGELOG.md +42 -0
- package/README.md +2 -3
- package/bundle.esm.js +1 -2
- package/dist/CSP.js +59 -0
- package/dist/Device.js +11 -0
- package/dist/FontFace.js +7 -95
- package/dist/InitialConfiguration.js +11 -0
- package/dist/ManagedStyles.js +83 -0
- package/dist/Render.js +3 -1
- package/dist/StaticAreaItem.js +0 -9
- package/dist/SystemCSSVars.js +4 -25
- package/dist/UI5Element.js +14 -21
- package/dist/UI5ElementMetadata.js +8 -0
- package/dist/asset-registries/Icons.js +25 -14
- 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/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 +32 -2
- package/dist/renderer/LitRenderer.js +6 -4
- package/dist/renderer/directives/style-map.js +72 -0
- package/dist/resources/bundle.esm.js +8 -8
- package/dist/resources/bundle.esm.js.map +1 -1
- package/dist/sap/base/security/encodeCSS.js +14 -0
- package/dist/sap/base/security/encodeXML.js +23 -0
- package/dist/sap/base/strings/toHex.js +8 -0
- package/dist/test-resources/pages/i18n.html +1 -3
- package/dist/test-resources/specs/CustomTheme.spec.js +2 -2
- package/dist/test-resources/specs/Theming.spec.js +4 -4
- package/dist/theming/CustomStyle.js +23 -3
- package/dist/theming/applyTheme.js +11 -10
- package/dist/theming/getEffectiveLinksHrefs.js +20 -0
- package/dist/theming/getStylesString.js +4 -2
- package/dist/theming/getThemeDesignerTheme.js +25 -5
- package/dist/theming/preloadLinks.js +23 -0
- package/dist/updateShadowRoot.js +8 -4
- package/dist/util/createLinkInHead.js +19 -0
- package/dist/util/escapeRegex.js +10 -0
- package/dist/util/generateHighlightedMarkup.js +42 -0
- package/hash.txt +1 -1
- package/lib/generate-asset-parameters/index.js +0 -1
- package/lib/generate-styles/index.js +18 -0
- package/package-scripts.js +6 -3
- package/package.json +8 -9
- package/src/CSP.js +59 -0
- package/src/Device.js +11 -0
- package/src/FontFace.js +7 -95
- package/src/InitialConfiguration.js +11 -0
- package/src/ManagedStyles.js +83 -0
- package/src/Render.js +3 -1
- package/src/StaticAreaItem.js +0 -9
- package/src/SystemCSSVars.js +4 -25
- package/src/UI5Element.js +14 -21
- package/src/UI5ElementMetadata.js +8 -0
- package/src/asset-registries/Icons.js +25 -14
- 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/i18nBundle.js +32 -2
- package/src/renderer/LitRenderer.js +6 -4
- package/src/renderer/directives/style-map.js +72 -0
- package/src/theming/CustomStyle.js +23 -3
- package/src/theming/applyTheme.js +11 -10
- package/src/theming/getEffectiveLinksHrefs.js +20 -0
- package/src/theming/getStylesString.js +4 -2
- package/src/theming/getThemeDesignerTheme.js +25 -5
- package/src/theming/preloadLinks.js +23 -0
- package/src/updateShadowRoot.js +8 -4
- package/src/util/createLinkInHead.js +19 -0
- package/src/util/escapeRegex.js +10 -0
- package/src/util/generateHighlightedMarkup.js +42 -0
- package/used-modules.txt +4 -1
- package/dist/theming/createThemePropertiesStyleTag.js +0 -20
- package/dist/util/encodeCSS.js +0 -24
- package/src/theming/createThemePropertiesStyleTag.js +0 -20
- package/src/util/encodeCSS.js +0 -24
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Supported icon collection names and aliases.
|
|
3
|
+
*
|
|
4
|
+
* Users might specify a collection, using both the key and the value in the following key-value pairs,
|
|
5
|
+
* e.g the following pairs are completely exchangeable:
|
|
6
|
+
* "SAP-icons-TNT/actor" and "tnt/actor", "BusinessSuiteInAppSymbols/3d" and "business-suite/3d",
|
|
7
|
+
* "SAP-icons-v5/accept" and "horizon/accept".
|
|
8
|
+
*
|
|
9
|
+
* Note: technically, in the code we maintain the collections under the "value" name - "tnt", "business-suite",
|
|
10
|
+
* SAP-icons-v5" and "SAP-icons"(which does not have an alias).
|
|
11
|
+
*/
|
|
12
|
+
const IconCollectionsAlias = {
|
|
13
|
+
"SAP-icons-TNT": "tnt",
|
|
14
|
+
"BusinessSuiteInAppSymbols": "business-suite",
|
|
15
|
+
"horizon": "SAP-icons-v5",
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
export default IconCollectionsAlias;
|
package/dist/config/Theme.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { getTheme as getConfiguredTheme } from "../InitialConfiguration.js";
|
|
2
|
+
import { reRenderAllUI5Elements } from "../Render.js";
|
|
2
3
|
import applyTheme from "../theming/applyTheme.js";
|
|
3
4
|
|
|
4
5
|
let theme;
|
|
@@ -20,9 +21,22 @@ const setTheme = async newTheme => {
|
|
|
20
21
|
|
|
21
22
|
// Update CSS Custom Properties
|
|
22
23
|
await applyTheme(theme);
|
|
24
|
+
await reRenderAllUI5Elements({ themeAware: true });
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
/**
|
|
28
|
+
* Returns if the given theme name is the one currently applied.
|
|
29
|
+
* @private
|
|
30
|
+
* @param {String}
|
|
31
|
+
* @returns {boolean}
|
|
32
|
+
*/
|
|
33
|
+
const isTheme = _theme => {
|
|
34
|
+
const currentTheme = getTheme();
|
|
35
|
+
return currentTheme === _theme || currentTheme === `${_theme}_exp`;
|
|
23
36
|
};
|
|
24
37
|
|
|
25
38
|
export {
|
|
26
39
|
getTheme,
|
|
27
40
|
setTheme,
|
|
41
|
+
isTheme,
|
|
28
42
|
};
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
@font-face {
|
|
2
|
+
font-family: "72";
|
|
3
|
+
font-style: normal;
|
|
4
|
+
font-weight: 400;
|
|
5
|
+
src: local("72"),
|
|
6
|
+
url(https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Regular.woff2?ui5-webcomponents) format("woff2"),
|
|
7
|
+
url(https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Regular.woff?ui5-webcomponents) format("woff");
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
@font-face {
|
|
11
|
+
font-family: "72full";
|
|
12
|
+
font-style: normal;
|
|
13
|
+
font-weight: 400;
|
|
14
|
+
src: local('72-full'),
|
|
15
|
+
url(https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Regular-full.woff2?ui5-webcomponents) format("woff2"),
|
|
16
|
+
url(https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Regular-full.woff?ui5-webcomponents) format("woff");
|
|
17
|
+
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
@font-face {
|
|
21
|
+
font-family: "72";
|
|
22
|
+
font-style: normal;
|
|
23
|
+
font-weight: 700;
|
|
24
|
+
src: local('72-Bold'),
|
|
25
|
+
url(https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold.woff2?ui5-webcomponents) format("woff2"),
|
|
26
|
+
url(https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold.woff?ui5-webcomponents) format("woff");
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
@font-face {
|
|
30
|
+
font-family: "72full";
|
|
31
|
+
font-style: normal;
|
|
32
|
+
font-weight: 700;
|
|
33
|
+
src: local('72-Bold-full'),
|
|
34
|
+
url(https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold-full.woff2?ui5-webcomponents) format("woff2"),
|
|
35
|
+
url(https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold-full.woff?ui5-webcomponents) format("woff");
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
@font-face {
|
|
39
|
+
font-family: "72Black";
|
|
40
|
+
font-style: bold;
|
|
41
|
+
font-weight: 900;
|
|
42
|
+
src: local('72Black'),
|
|
43
|
+
url(https://openui5nightly.hana.ondemand.com/resources/sap/ui/core/themes/sap_horizon/fonts/72-Black.woff2?ui5-webcomponents) format("woff2"),
|
|
44
|
+
url(https://openui5nightly.hana.ondemand.com/resources/sap/ui/core/themes/sap_horizon/fonts/72-Black.woff?ui5-webcomponents) format("woff");
|
|
45
|
+
}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Some diacritics are supported by the 72 font:
|
|
3
|
+
* * Grave
|
|
4
|
+
* * Acute
|
|
5
|
+
* * Circumflex
|
|
6
|
+
* * Tilde
|
|
7
|
+
*
|
|
8
|
+
* However, the following diacritics and the combination of multiple diacritics (including the supported ones) are not supported:
|
|
9
|
+
* * Breve
|
|
10
|
+
* * Horn
|
|
11
|
+
* * Dot below
|
|
12
|
+
* * Hook above
|
|
13
|
+
*
|
|
14
|
+
*
|
|
15
|
+
* Override for the characters that aren't covered by the '72' font to other system fonts
|
|
16
|
+
*
|
|
17
|
+
* U+0102-0103: A and a with Breve
|
|
18
|
+
* U+01A0-01A1: O and o with Horn
|
|
19
|
+
* U+01AF-01B0: U and u with Horn
|
|
20
|
+
* U+1EA0-1EB7: A and a with diacritics that are not supported by the font and combination of multiple diacritics
|
|
21
|
+
* U+1EB8-1EC7: E and e with diacritics that are not supported by the font and combination of multiple diacritics
|
|
22
|
+
* U+1EC8-1ECB: I and i with diacritics that are not supported by the font and combination of multiple diacritics
|
|
23
|
+
* U+1ECC-1EE3: O and o with diacritics that are not supported by the font and combination of multiple diacritics
|
|
24
|
+
* U+1EE4-1EF1: U and u with diacritics that are not supported by the font and combination of multiple diacritics
|
|
25
|
+
* U+1EF4-1EF7: Y and y with diacritics that are not supported by the font and combination of multiple diacritics
|
|
26
|
+
*
|
|
27
|
+
*/
|
|
28
|
+
@font-face {
|
|
29
|
+
font-family: '72override';
|
|
30
|
+
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;
|
|
31
|
+
src: local('Arial'), local('Helvetica'), local('sans-serif');
|
|
32
|
+
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--_ui5_content_density:cozy;
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
[data-ui5-compact-size],
|
|
6
|
+
.ui5-content-density-compact,
|
|
7
|
+
.sapUiSizeCompact {
|
|
8
|
+
--_ui5_content_density:compact;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
[dir="rtl"] {
|
|
12
|
+
--_ui5_dir:rtl;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
[dir="ltr"] {
|
|
16
|
+
--_ui5_dir:ltr;
|
|
17
|
+
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
const assetParameters = {"themes":{"default":"sap_fiori_3","all":["sap_fiori_3","sap_fiori_3_dark","sap_belize","sap_belize_hcb","sap_belize_hcw","sap_fiori_3_hcb","sap_fiori_3_hcw","sap_horizon"]},"languages":{"default":"en","all":["ar","bg","ca","cs","cy","da","de","el","en","en_GB","en_US_sappsd","en_US_saprigi","en_US_saptrc","es","es_MX","et","fi","fr","fr_CA","hi","hr","hu","in","it","iw","ja","kk","ko","lt","lv","ms","nl","no","pl","pt_PT","pt","ro","ru","sh","sk","sl","sv","th","tr","uk","vi","zh_CN","zh_TW"]},"locales":{"default":"en","all":["ar","ar_EG","ar_SA","bg","ca","cs","da","de","de_AT","de_CH","el","el_CY","en","en_AU","en_GB","en_HK","en_IE","en_IN","en_NZ","en_PG","en_SG","en_ZA","es","es_AR","es_BO","es_CL","es_CO","es_MX","es_PE","es_UY","es_VE","et","fa","fi","fr","fr_BE","fr_CA","fr_CH","fr_LU","he","hi","hr","hu","id","it","it_CH","ja","kk","ko","lt","lv","ms","nb","nl","nl_BE","pl","pt","pt_PT","ro","ru","ru_UA","sk","sl","sr","sv","th","tr","uk","vi","zh_CN","zh_HK","zh_SG","zh_TW"]}};
|
|
1
|
+
const assetParameters = {"themes":{"default":"sap_fiori_3","all":["sap_fiori_3","sap_fiori_3_dark","sap_belize","sap_belize_hcb","sap_belize_hcw","sap_fiori_3_hcb","sap_fiori_3_hcw","sap_horizon","sap_horizon_exp"]},"languages":{"default":"en","all":["ar","bg","ca","cs","cy","da","de","el","en","en_GB","en_US_sappsd","en_US_saprigi","en_US_saptrc","es","es_MX","et","fi","fr","fr_CA","hi","hr","hu","in","it","iw","ja","kk","ko","lt","lv","ms","nl","no","pl","pt_PT","pt","ro","ru","sh","sk","sl","sv","th","tr","uk","vi","zh_CN","zh_TW"]},"locales":{"default":"en","all":["ar","ar_EG","ar_SA","bg","ca","cs","da","de","de_AT","de_CH","el","el_CY","en","en_AU","en_GB","en_HK","en_IE","en_IN","en_NZ","en_PG","en_SG","en_ZA","es","es_AR","es_BO","es_CL","es_CO","es_MX","es_PE","es_UY","es_VE","et","fa","fi","fr","fr_BE","fr_CA","fr_CH","fr_LU","he","hi","hr","hu","id","it","it_CH","ja","kk","ko","lt","lv","ms","nb","nl","nl_BE","pl","pt","pt_PT","ro","ru","ru_UA","sk","sl","sr","sv","th","tr","uk","vi","zh_CN","zh_HK","zh_SG","zh_TW"]}};
|
|
2
2
|
|
|
3
3
|
const DEFAULT_THEME = assetParameters.themes.default;
|
|
4
4
|
const DEFAULT_LANGUAGE = assetParameters.languages.default;
|
|
@@ -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:"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
|
|
@@ -39,7 +41,7 @@ class I18nBundle {
|
|
|
39
41
|
}
|
|
40
42
|
}
|
|
41
43
|
|
|
42
|
-
const
|
|
44
|
+
const getI18nBundleSync = packageName => {
|
|
43
45
|
if (I18nBundleInstances.has(packageName)) {
|
|
44
46
|
return I18nBundleInstances.get(packageName);
|
|
45
47
|
}
|
|
@@ -49,8 +51,36 @@ const getI18nBundle = packageName => {
|
|
|
49
51
|
return i18nBundle;
|
|
50
52
|
};
|
|
51
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
|
+
|
|
52
82
|
export {
|
|
53
83
|
registerI18nLoader,
|
|
54
|
-
fetchI18nBundle,
|
|
55
84
|
getI18nBundle,
|
|
85
|
+
registerCustomI18nBundleGetter,
|
|
56
86
|
};
|
|
@@ -5,9 +5,11 @@ import {
|
|
|
5
5
|
unsafeStatic,
|
|
6
6
|
} from "lit-html/static.js";
|
|
7
7
|
|
|
8
|
-
const litRender = (templateResult, domNode,
|
|
9
|
-
if (
|
|
10
|
-
templateResult = html`<style>${
|
|
8
|
+
const litRender = (templateResult, domNode, styleStrOrHrefsArr, { host } = {}) => {
|
|
9
|
+
if (typeof styleStrOrHrefsArr === "string") {
|
|
10
|
+
templateResult = html`<style>${styleStrOrHrefsArr}</style>${templateResult}`;
|
|
11
|
+
} else if (Array.isArray(styleStrOrHrefsArr) && styleStrOrHrefsArr.length) {
|
|
12
|
+
templateResult = html`${styleStrOrHrefsArr.map(href => html`<link type="text/css" rel="stylesheet" href="${href}">`)}${templateResult}`;
|
|
11
13
|
}
|
|
12
14
|
render(templateResult, domNode, { host });
|
|
13
15
|
};
|
|
@@ -25,7 +27,7 @@ export {
|
|
|
25
27
|
export { scopeTag };
|
|
26
28
|
export { repeat } from "lit-html/directives/repeat.js";
|
|
27
29
|
export { classMap } from "lit-html/directives/class-map.js";
|
|
28
|
-
export { styleMap } from "
|
|
30
|
+
export { styleMap } from "./directives/style-map.js";
|
|
29
31
|
export { ifDefined } from "lit-html/directives/if-defined.js";
|
|
30
32
|
export { unsafeHTML } from "lit-html/directives/unsafe-html.js";
|
|
31
33
|
|
|
@@ -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);
|