@ui5/webcomponents-base 0.0.0-32b659ddc → 0.0.0-35e2c9666

package/src/locale/getLocale.js

@@ -0,0 +1,41 @@
+import detectNavigatorLanguage from "../util/detectNavigatorLanguage.js";
+import { getLanguage as getConfigLanguage } from "../config/Language.js";
+import Locale from "./Locale.js";
+
+const cache = new Map();
+
+const getLocaleInstance = lang => {
+	if (!cache.has(lang)) {
+		cache.set(lang, new Locale(lang));
+	}
+
+	return cache.get(lang);
+};
+
+const convertToLocaleOrNull = lang => {
+	try {
+		if (lang && typeof lang === "string") {
+			return getLocaleInstance(lang);
+		}
+	} catch (e) {
+		// ignore
+	}
+};
+
+/**
+ * Returns the locale based on the parameter or configured language Configuration#getLanguage
+ * If no language has been configured - a new locale based on browser language is returned
+ */
+const getLocale = lang => {
+	if (lang) {
+		return convertToLocaleOrNull(lang);
+	}
+
+	if (getConfigLanguage()) {
+		return getLocaleInstance(getConfigLanguage());
+	}
+
+	return convertToLocaleOrNull(detectNavigatorLanguage());
+};
+
+export default getLocale;

package/src/locale/languageChange.js

@@ -0,0 +1,22 @@
+import EventProvider from "../EventProvider.js";
+
+const eventProvider = new EventProvider();
+const LANG_CHANGE = "languageChange";
+
+const attachLanguageChange = listener => {
+	eventProvider.attachEvent(LANG_CHANGE, listener);
+};
+
+const detachLanguageChange = listener => {
+	eventProvider.detachEvent(LANG_CHANGE, listener);
+};
+
+const fireLanguageChange = lang => {
+	return eventProvider.fireEventAsync(LANG_CHANGE, lang);
+};
+
+export {
+	attachLanguageChange,
+	detachLanguageChange,
+	fireLanguageChange,
+};

package/src/locale/nextFallbackLocale.js

@@ -0,0 +1,28 @@
+import { DEFAULT_LOCALE } from "../generated/AssetParameters.js";
+
+/**
+ * Calculates the next fallback locale for the given locale.
+ *
+ * @param {string} locale Locale string in Java format (underscores) or null
+ * @returns {string} Next fallback Locale or "en" if no fallbacks found.
+ */
+const nextFallbackLocale = locale => {
+	if (!locale) {
+		return DEFAULT_LOCALE;
+	}
+
+	if (locale === "zh_HK") {
+		return "zh_TW";
+	}
+
+	// if there are multiple segments (separated by underscores), remove the last one
+	const p = locale.lastIndexOf("_");
+	if (p >= 0) {
+		return locale.slice(0, p);
+	}
+
+	// for any language but the default, fallback to the default first before falling back to the 'raw' language (empty string)
+	return locale !== DEFAULT_LOCALE ? DEFAULT_LOCALE : "";
+};
+
+export default nextFallbackLocale;

package/{dist/util → src/locale}/normalizeLocale.js

@@ -1,3 +1,5 @@
+import { DEFAULT_LOCALE } from "../generated/AssetParameters.js";
+
 const localeRegEX = /^((?:[A-Z]{2,3}(?:-[A-Z]{3}){0,3})|[A-Z]{4}|[A-Z]{5,8})(?:-([A-Z]{4}))?(?:-([A-Z]{2}|[0-9]{3}))?((?:-[0-9A-Z]{5,8}|-[0-9][0-9A-Z]{3})*)((?:-[0-9A-WYZ](?:-[0-9A-Z]{2,8})+)*)(?:-(X(?:-[0-9A-Z]{1,8})+))?$/i;
 const SAPSupportabilityLocales = /(?:^|-)(saptrc|sappsd)(?:-|$)/i;
 
@@ -12,11 +14,15 @@ const M_ISO639_NEW_TO_OLD = {
 /**
  * Normalizes the given locale in BCP-47 syntax.
  * @param {string} locale locale to normalize
- * @returns {string} Normalized locale or undefined if the locale can't be normalized
+ * @returns {string} Normalized locale, "undefined" if the locale can't be normalized or the default locale, if no locale provided.
  */
 const normalizeLocale = locale => {
 	let m;
 
+	if (!locale) {
+		return DEFAULT_LOCALE;
+	}
+
 	if (typeof locale === "string" && (m = localeRegEX.exec(locale.replace(/_/g, "-")))) {/* eslint-disable-line */
 		let language = m[1].toLowerCase();
 		let region = m[3] ? m[3].toUpperCase() : undefined;
@@ -45,33 +51,4 @@ const normalizeLocale = locale => {
 	}
 };
 
-
-/**
- * Calculates the next fallback locale for the given locale.
- *
- * @param {string} locale Locale string in Java format (underscores) or null
- * @returns {string|null} Next fallback Locale or null if there is no more fallback
- */
-const nextFallbackLocale = locale => {
-	if (!locale) {
-		return null;
-	}
-
-	if (locale === "zh_HK") {
-		return "zh_TW";
-	}
-
-	// if there are multiple segments (separated by underscores), remove the last one
-	const p = locale.lastIndexOf("_");
-	if (p >= 0) {
-		return locale.slice(0, p);
-	}
-
-	// for any language but 'en', fallback to 'en' first before falling back to the 'raw' language (empty string)
-	return locale !== "en" ? "en" : "";
-};
-
-export {
-	normalizeLocale,
-	nextFallbackLocale,
-};
+export default normalizeLocale;

package/src/renderer/LitRenderer.js

@@ -1,15 +1,34 @@
-import { html, render } from "lit-html/lit-html.js";
+import { render } from "lit-html";
+import {
+	html,
+	svg,
+	unsafeStatic,
+} from "lit-html/static.js";
 
-const litRender = (templateResult, domNode, styles, { eventContext } = {}) => {
-	if (styles) {
-		templateResult = html`<style>${styles}</style>${templateResult}`;
+const litRender = (templateResult, domNode, styleStrOrHrefsArr, { host } = {}) => {
+	if (typeof styleStrOrHrefsArr === "string") {
+		templateResult = html`<style>${styleStrOrHrefsArr}</style>${templateResult}`;
+	} else if (Array.isArray(styleStrOrHrefsArr) && styleStrOrHrefsArr.length) {
+		templateResult = html`${styleStrOrHrefsArr.map(href => html`<link type="text/css" rel="stylesheet" href="${href}">`)}${templateResult}`;
 	}
-	render(templateResult, domNode, { eventContext });
+	render(templateResult, domNode, { host });
 };
 
-export { html, svg } from "lit-html/lit-html.js";
+const scopeTag = (tag, tags, suffix) => {
+	const resultTag = suffix && (tags || []).includes(tag) ? `${tag}-${suffix}` : tag;
+	return unsafeStatic(resultTag);
+};
+
+export {
+	html,
+	svg,
+	unsafeStatic,
+};
+export { scopeTag };
 export { repeat } from "lit-html/directives/repeat.js";
 export { classMap } from "lit-html/directives/class-map.js";
-export { styleMap } from "lit-html/directives/style-map.js";
+export { styleMap } from "./directives/style-map.js";
+export { ifDefined } from "lit-html/directives/if-defined.js";
+export { unsafeHTML } from "lit-html/directives/unsafe-html.js";
 
 export default litRender;

package/src/renderer/directives/style-map.js

@@ -0,0 +1,72 @@
+/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+/**
+ * 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)
+ */
+
+import { noChange } from 'lit-html';
+import { directive, Directive, PartType, } from 'lit-html/directive.js';
+class StyleMapDirective extends Directive {
+	constructor(partInfo) {
+		var _a;
+		super(partInfo);
+		if (partInfo.type !== PartType.ATTRIBUTE ||
+			partInfo.name !== 'style' ||
+			((_a = partInfo.strings) === null || _a === void 0 ? void 0 : _a.length) > 2) {
+			throw new Error('The `styleMap` directive must be used in the `style` attribute ' +
+				'and must be the only part in the attribute.');
+		}
+	}
+	render(styleInfo) {
+		return "";
+	}
+	update(part, [styleInfo]) {
+		const { style } = part.element;
+		if (this._previousStyleProperties === undefined) {
+			this._previousStyleProperties = new Set();
+			for (const name in styleInfo) {
+				this._previousStyleProperties.add(name);
+			}
+			// return this.render(styleInfo);
+		}
+		// Remove old properties that no longer exist in styleInfo
+		// We use forEach() instead of for-of so that re don't require down-level
+		// iteration.
+		this._previousStyleProperties.forEach((name) => {
+			// If the name isn't in styleInfo or it's null/undefined
+			if (styleInfo[name] == null) {
+				this._previousStyleProperties.delete(name);
+				if (name.includes('-')) {
+					style.removeProperty(name);
+				}
+				else {
+					// Note reset using empty string (vs null) as IE11 does not always
+					// reset via null (https://developer.mozilla.org/en-US/docs/Web/API/ElementCSSInlineStyle/style#setting_styles)
+					// eslint-disable-next-line @typescript-eslint/no-explicit-any
+					style[name] = '';
+				}
+			}
+		});
+		// Add or update properties
+		for (const name in styleInfo) {
+			const value = styleInfo[name];
+			if (value != null) {
+				this._previousStyleProperties.add(name);
+				if (name.includes('-')) {
+					style.setProperty(name, value);
+				}
+				else {
+					// eslint-disable-next-line @typescript-eslint/no-explicit-any
+					style[name] = value;
+				}
+			}
+		}
+		return noChange;
+	}
+}
+
+export const styleMap = directive(StyleMapDirective);

package/src/renderer/executeTemplate.js

@@ -0,0 +1,17 @@
+import { getCustomElementsScopingSuffix, shouldScopeCustomElement } from "../CustomElementsScope.js";
+
+/**
+ * Runs a component's template with the component's current state, while also scoping HTML
+ *
+ * @param template - the template to execute
+ * @param component - the component
+ * @public
+ * @returns {*}
+ */
+const executeTemplate = (template, component) => {
+	const tagsToScope = component.constructor.getUniqueDependencies().map(dep => dep.getMetadata().getPureTag()).filter(shouldScopeCustomElement);
+	const scope = getCustomElementsScopingSuffix();
+	return template(component, tagsToScope, scope);
+};
+
+export default executeTemplate;

package/src/theming/CustomStyle.js

@@ -1,19 +1,60 @@
-const customCSSFor = {};
+import { reRenderAllUI5Elements } from "../Render.js";
+import getSharedResource from "../getSharedResource.js";
+import EventProvider from "../EventProvider.js";
 
-const addCustomCSS = (tag, css, ...rest) => {
-	if (rest.length) {
-		throw new Error("addCustomCSS no longer accepts theme specific CSS. new signature is `addCustomCSS(tag, css)`");
+const eventProvider = getSharedResource("CustomStyle.eventProvider", new EventProvider());
+const CUSTOM_CSS_CHANGE = "CustomCSSChange";
+
+const attachCustomCSSChange = listener => {
+	eventProvider.attachEvent(CUSTOM_CSS_CHANGE, listener);
+};
+
+const detachCustomCSSChange = listener => {
+	eventProvider.detachEvent(CUSTOM_CSS_CHANGE, listener);
+};
+
+const fireCustomCSSChange = tag => {
+	return eventProvider.fireEvent(CUSTOM_CSS_CHANGE, tag);
+};
+
+const customCSSFor = getSharedResource("CustomStyle.customCSSFor", {});
+
+// Listen to the eventProvider, in case other copies of this CustomStyle module fire this
+// event, and this copy would therefore need to reRender the ui5 webcomponents; but
+// don't reRender if it was this copy that fired the event to begin with.
+let skipRerender;
+attachCustomCSSChange(tag => {
+	if (!skipRerender) {
+		reRenderAllUI5Elements({ tag });
 	}
+});
 
+const addCustomCSS = (tag, css) => {
 	if (!customCSSFor[tag]) {
 		customCSSFor[tag] = [];
 	}
-
 	customCSSFor[tag].push(css);
+
+	skipRerender = true;
+	try {
+		// The event is fired and the attached event listeners are all called synchronously
+		// The skipRerender flag will be used to avoid calling reRenderAllUI5Elements twice when it is this copy
+		// of CustomStyle.js which is firing the `CustomCSSChange` event.
+		fireCustomCSSChange(tag);
+	} finally {
+		skipRerender = false;
+	}
+
+	return reRenderAllUI5Elements({ tag });
 };
 
 const getCustomCSS = tag => {
 	return customCSSFor[tag] ? customCSSFor[tag].join("") : "";
 };
 
-export { addCustomCSS, getCustomCSS };
+export {
+	addCustomCSS,
+	getCustomCSS,
+	attachCustomCSSChange,
+	detachCustomCSSChange,
+};

package/src/theming/ThemeLoaded.js

@@ -0,0 +1,22 @@
+import EventProvider from "../EventProvider.js";
+
+const eventProvider = new EventProvider();
+const THEME_LOADED = "themeLoaded";
+
+const attachThemeLoaded = listener => {
+	eventProvider.attachEvent(THEME_LOADED, listener);
+};
+
+const detachThemeLoaded = listener => {
+	eventProvider.detachEvent(THEME_LOADED, listener);
+};
+
+const fireThemeLoaded = theme => {
+	return eventProvider.fireEvent(THEME_LOADED, theme);
+};
+
+export {
+	attachThemeLoaded,
+	detachThemeLoaded,
+	fireThemeLoaded,
+};

package/src/theming/applyTheme.js

@@ -0,0 +1,79 @@
+import { getThemeProperties, getRegisteredPackages, isThemeRegistered } from "../asset-registries/Themes.js";
+import { removeStyle, createOrUpdateStyle } from "../ManagedStyles.js";
+import getThemeDesignerTheme from "./getThemeDesignerTheme.js";
+import { fireThemeLoaded } from "./ThemeLoaded.js";
+import { getFeature } from "../FeaturesRegistry.js";
+
+const BASE_THEME_PACKAGE = "@ui5/webcomponents-theming";
+
+const isThemeBaseRegistered = () => {
+	const registeredPackages = getRegisteredPackages();
+	return registeredPackages.has(BASE_THEME_PACKAGE);
+};
+
+const loadThemeBase = async theme => {
+	if (!isThemeBaseRegistered()) {
+		return;
+	}
+
+	const cssData = await getThemeProperties(BASE_THEME_PACKAGE, theme);
+	if (cssData) {
+		createOrUpdateStyle(cssData, "data-ui5-theme-properties", BASE_THEME_PACKAGE);
+	}
+};
+
+const deleteThemeBase = () => {
+	removeStyle("data-ui5-theme-properties", BASE_THEME_PACKAGE);
+};
+
+const loadComponentPackages = async theme => {
+	const registeredPackages = getRegisteredPackages();
+	registeredPackages.forEach(async packageName => {
+		if (packageName === BASE_THEME_PACKAGE) {
+			return;
+		}
+
+		const cssData = await getThemeProperties(packageName, theme);
+		if (cssData) {
+			createOrUpdateStyle(cssData, "data-ui5-theme-properties", packageName);
+		}
+	});
+};
+
+const detectExternalTheme = () => {
+	// If theme designer theme is detected, use this
+	const extTheme = getThemeDesignerTheme();
+	if (extTheme) {
+		return extTheme;
+	}
+
+	// If OpenUI5Support is enabled, try to find out if it loaded variables
+	const OpenUI5Support = getFeature("OpenUI5Support");
+	if (OpenUI5Support) {
+		const varsLoaded = OpenUI5Support.cssVariablesLoaded();
+		if (varsLoaded) {
+			return {
+				themeName: OpenUI5Support.getConfigurationSettingsObject().theme, // just themeName, baseThemeName is only relevant for custom themes
+			};
+		}
+	}
+};
+
+const applyTheme = async theme => {
+	const extTheme = detectExternalTheme();
+
+	// Only load theme_base properties if there is no externally loaded theme, or there is, but it is not being loaded
+	if (!extTheme || theme !== extTheme.themeName) {
+		await loadThemeBase(theme);
+	} else {
+		deleteThemeBase();
+	}
+
+	// Always load component packages properties. For non-registered themes, try with the base theme, if any
+	const packagesTheme = isThemeRegistered(theme) ? theme : extTheme && extTheme.baseThemeName;
+	await loadComponentPackages(packagesTheme);
+
+	fireThemeLoaded(theme);
+};
+
+export default applyTheme;

package/src/theming/getConstructableStyle.js

@@ -0,0 +1,30 @@
+import getEffectiveStyle from "./getEffectiveStyle.js";
+import { attachCustomCSSChange } from "./CustomStyle.js";
+
+const constructableStyleMap = new Map();
+
+attachCustomCSSChange(tag => {
+	constructableStyleMap.delete(`${tag}_normal`); // there is custom CSS only for the component itself, not for its static area part
+});
+
+/**
+ * Returns (and caches) a constructable style sheet for a web component class
+ * Note: Chrome
+ * @param ElementClass
+ * @returns {*}
+ */
+const getConstructableStyle = (ElementClass, forStaticArea = false) => {
+	const tag = ElementClass.getMetadata().getTag();
+	const key = `${tag}_${forStaticArea ? "static" : "normal"}`;
+
+	if (!constructableStyleMap.has(key)) {
+		const styleContent = getEffectiveStyle(ElementClass, forStaticArea);
+		const style = new CSSStyleSheet();
+		style.replaceSync(styleContent);
+		constructableStyleMap.set(key, [style]);
+	}
+
+	return constructableStyleMap.get(key);
+};
+
+export default getConstructableStyle;

package/src/theming/getEffectiveLinksHrefs.js

@@ -0,0 +1,20 @@
+import { getUrl } from "../CSP.js";
+
+const flatten = arr => {
+	return arr.reduce((acc, val) => acc.concat(Array.isArray(val) ? flatten(val) : val), []);
+};
+
+const getEffectiveLinksHrefs = (ElementClass, forStaticArea = false) => {
+	let stylesData = ElementClass[forStaticArea ? "staticAreaStyles" : "styles"];
+	if (!stylesData) {
+		return;
+	}
+
+	if (!Array.isArray(stylesData)) {
+		stylesData = [stylesData];
+	}
+
+	return flatten(stylesData).filter(data => !!data).map(data => getUrl(data.packageName, data.fileName));
+};
+
+export default getEffectiveLinksHrefs;

package/src/theming/getEffectiveStyle.js

@@ -0,0 +1,30 @@
+import { getCustomCSS, attachCustomCSSChange } from "./CustomStyle.js";
+import getStylesString from "./getStylesString.js";
+
+const effectiveStyleMap = new Map();
+
+attachCustomCSSChange(tag => {
+	effectiveStyleMap.delete(`${tag}_normal`); // there is custom CSS only for the component itself, not for its static area part
+});
+
+const getEffectiveStyle = (ElementClass, forStaticArea = false) => {
+	const tag = ElementClass.getMetadata().getTag();
+	const key = `${tag}_${forStaticArea ? "static" : "normal"}`;
+
+	if (!effectiveStyleMap.has(key)) {
+		let effectiveStyle;
+
+		if (forStaticArea) {
+			effectiveStyle = getStylesString(ElementClass.staticAreaStyles);
+		} else {
+			const customStyle = getCustomCSS(tag) || "";
+			const builtInStyles = getStylesString(ElementClass.styles);
+			effectiveStyle = `${builtInStyles} ${customStyle}`;
+		}
+		effectiveStyleMap.set(key, effectiveStyle);
+	}
+
+	return effectiveStyleMap.get(key);
+};
+
+export default getEffectiveStyle;

package/src/theming/getStylesString.js

@@ -0,0 +1,15 @@
+const getStylesString = styles => {
+	if (Array.isArray(styles)) {
+		return flatten(styles.filter(style => !!style)).map(style => {
+			return typeof style === "string" ? style : style.content;
+		}).join(" ");
+	}
+
+	return typeof styles === "string" ? styles : styles.content;
+};
+
+const flatten = arr => {
+	return arr.reduce((acc, val) => acc.concat(Array.isArray(val) ? flatten(val) : val), []);
+};
+
+export default getStylesString;

package/src/theming/getThemeDesignerTheme.js

@@ -0,0 +1,87 @@
+const warnings = new Set();
+
+const getThemeMetadata = () => {
+	// Check if the class was already applied, most commonly to the link/style tag with the CSS Variables
+	let el = document.querySelector(".sapThemeMetaData-Base-baseLib") || document.querySelector(".sapThemeMetaData-UI5-sap-ui-core");
+	if (el) {
+		return getComputedStyle(el).backgroundImage;
+	}
+
+	el = document.createElement("span");
+	el.style.display = "none";
+
+	// Try with sapThemeMetaData-Base-baseLib first
+	el.classList.add("sapThemeMetaData-Base-baseLib");
+	document.body.appendChild(el);
+	let metadata = getComputedStyle(el).backgroundImage;
+
+	// Try with sapThemeMetaData-UI5-sap-ui-core only if the previous selector was not found
+	if (metadata === "none") {
+		el.classList.add("sapThemeMetaData-UI5-sap-ui-core");
+		metadata = getComputedStyle(el).backgroundImage;
+	}
+
+	document.body.removeChild(el);
+
+	return metadata;
+};
+
+const parseThemeMetadata = metadataString => {
+	const params = /\(["']?data:text\/plain;utf-8,(.*?)['"]?\)$/i.exec(metadataString);
+	if (params && params.length >= 2) {
+		let paramsString = params[1];
+		paramsString = paramsString.replace(/\\"/g, `"`);
+		if (paramsString.charAt(0) !== "{" && paramsString.charAt(paramsString.length - 1) !== "}") {
+			try {
+				paramsString = decodeURIComponent(paramsString);
+			} catch (ex) {
+				if (!warnings.has("decode")) {
+					console.warn("Malformed theme metadata string, unable to decodeURIComponent"); // eslint-disable-line
+					warnings.add("decode");
+				}
+				return;
+			}
+		}
+		try {
+			return JSON.parse(paramsString);
+		} catch (ex) {
+			if (!warnings.has("parse")) {
+				console.warn("Malformed theme metadata string, unable to parse JSON"); // eslint-disable-line
+				warnings.add("parse");
+			}
+		}
+	}
+};
+
+const processThemeMetadata = metadata => {
+	let themeName;
+	let baseThemeName;
+
+	try {
+		themeName = metadata.Path.match(/\.([^.]+)\.css_variables$/)[1];
+		baseThemeName = metadata.Extends[0];
+	} catch (ex) {
+		if (!warnings.has("object")) {
+			console.warn("Malformed theme metadata Object", metadata); // eslint-disable-line
+			warnings.add("object");
+		}
+		return;
+	}
+
+	return {
+		themeName,
+		baseThemeName,
+	};
+};
+
+const getThemeDesignerTheme = () => {
+	const metadataString = getThemeMetadata();
+	if (!metadataString || metadataString === "none") {
+		return;
+	}
+
+	const metadata = parseThemeMetadata(metadataString);
+	return processThemeMetadata(metadata);
+};
+
+export default getThemeDesignerTheme;

package/src/theming/preloadLinks.js

@@ -0,0 +1,23 @@
+import getEffectiveLinksHrefs from "./getEffectiveLinksHrefs.js";
+import createLinkInHead from "../util/createLinkInHead.js";
+import { shouldUseLinks, shouldPreloadLinks } from "../CSP.js";
+
+const preloaded = new Set();
+
+const preloadLinks = ElementClass => {
+	if (!shouldUseLinks() || !shouldPreloadLinks()) {
+		return;
+	}
+
+	const linksHrefs = getEffectiveLinksHrefs(ElementClass, false) || [];
+	const staticAreaLinksHrefs = getEffectiveLinksHrefs(ElementClass, true) || [];
+
+	[...linksHrefs, ...staticAreaLinksHrefs].forEach(href => {
+		if (!preloaded.has(href)) {
+			createLinkInHead(href, { rel: "preload", as: "style" });
+			preloaded.add(href);
+		}
+	});
+};
+
+export default preloadLinks;