@ui5/webcomponents-base 0.0.0-e463d2345 → 0.0.0-e818f286e

package/src/getSharedResource.js

@@ -0,0 +1,30 @@
+import getSingletonElementInstance from "./util/getSingletonElementInstance.js";
+
+const getSharedResourcesInstance = () => getSingletonElementInstance("ui5-shared-resources", document.head);
+
+/**
+ * Use this method to initialize/get resources that you would like to be shared among UI5 Web Components runtime instances.
+ * The data will be accessed via a singleton "ui5-shared-resources" HTML element in the "head" element of the page.
+ *
+ * @public
+ * @param namespace Unique ID of the resource, may contain "." to denote hierarchy
+ * @param initialValue Object or primitive that will be used as an initial value if the resource does not exist
+ * @returns {*}
+ */
+const getSharedResource = (namespace, initialValue) => {
+	const parts = namespace.split(".");
+	let current = getSharedResourcesInstance();
+
+	for (let i = 0; i < parts.length; i++) {
+		const part = parts[i];
+		const lastPart = i === parts.length - 1;
+		if (!Object.prototype.hasOwnProperty.call(current, part)) {
+			current[part] = lastPart ? initialValue : {};
+		}
+		current = current[part];
+	}
+
+	return current;
+};
+
+export default getSharedResource;

package/src/i18nBundle.js

@@ -1,35 +1,86 @@
-import { fetchI18nBundle, getI18nBundleData } from "./asset-registries/i18n.js";
+import { registerI18nLoader, fetchI18nBundle, getI18nBundleData } from "./asset-registries/i18n.js";
 import formatMessage from "./util/formatMessage.js";
 
 const I18nBundleInstances = new Map();
 
+let customGetI18nBundle;
+
+/**
+ * @class
+ * @public
+ */
 class I18nBundle {
 	constructor(packageName) {
 		this.packageName = packageName;
 	}
 
+	/**
+	 * Returns a text in the currently loaded language
+	 *
+	 * @public
+	 * @param {Object|String} textObj key/defaultText pair or just the key
+	 * @param params Values for the placeholders
+	 * @returns {*}
+	 */
 	getText(textObj, ...params) {
-		if (!textObj || !textObj.key || !textObj.defaultText) {
+		if (typeof textObj === "string") {
+			textObj = { key: textObj, defaultText: textObj };
+		}
+
+		if (!textObj || !textObj.key) {
 			return "";
 		}
-		const bundle = getI18nBundleData(this.packageName);
 
-		if (!bundle || !bundle[textObj.key]) {
-			return formatMessage(textObj.defaultText, params); // Fallback to "en"
+		const bundle = getI18nBundleData(this.packageName);
+		if (bundle && !bundle[textObj.key]) {
+			console.warn(`Key ${textObj.key} not found in the i18n bundle, the default text will be used`); // eslint-disable-line
 		}
+		const messageText = bundle && bundle[textObj.key] ? bundle[textObj.key] : (textObj.defaultText || textObj.key);
 
-		return formatMessage(bundle[textObj.key], params);
+		return formatMessage(messageText, params);
 	}
 }
 
-const getI18nBundle = packageName => {
+const getI18nBundleSync = packageName => {
 	if (I18nBundleInstances.has(packageName)) {
 		return I18nBundleInstances.get(packageName);
 	}
 
-	const i18nBunle = new I18nBundle(packageName);
-	I18nBundleInstances.set(packageName, i18nBunle);
-	return i18nBunle;
+	const i18nBundle = new I18nBundle(packageName);
+	I18nBundleInstances.set(packageName, i18nBundle);
+	return i18nBundle;
+};
+
+/**
+ * Allows developers to provide a custom getI18nBundle implementation
+ * If this function is called, the custom implementation will be used for all components and will completely
+ * replace the default implementation.
+ *
+ * @public
+ * @param customGet the function to use instead of the standard getI18nBundle implementation
+ */
+const registerCustomI18nBundleGetter = customGet => {
+	customGetI18nBundle = customGet;
+};
+
+/**
+ * Fetches and returns the I18nBundle instance for the given package
+ *
+ * @public
+ * @param packageName
+ * @returns {Promise<I18nBundle>}
+ */
+const getI18nBundle = async packageName => {
+	if (customGetI18nBundle) {
+		return customGetI18nBundle(packageName);
+	}
+
+	await fetchI18nBundle(packageName);
+	return getI18nBundleSync(packageName);
 };
 
-export { fetchI18nBundle, getI18nBundle };
+export {
+	registerI18nLoader,
+	getI18nBundle,
+	registerCustomI18nBundleGetter,
+};

package/{dist → src/locale}/Locale.js

@@ -1,5 +1,3 @@
-import getDesigntimePropertyAsArray from "./util/getDesigntimePropertyAsArray.js";
-
 const rLocale = /^((?:[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;
 
 class Locale {
@@ -88,14 +86,6 @@ class Locale {
 		}
 		return r.join("-");
 	}
-
-	static get _cldrLocales() {
-		return getDesigntimePropertyAsArray("$cldr-locales:ar,ar_EG,ar_SA,bg,br,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,nn,pl,pt,pt_PT,ro,ru,ru_UA,sk,sl,sr,sv,th,tr,uk,vi,zh_CN,zh_HK,zh_SG,zh_TW$");
-	}
-
-	static get _coreI18nLocales() {
-		return getDesigntimePropertyAsArray("$core-i18n-locales:,ar,bg,ca,cs,da,de,el,en,es,et,fi,fr,hi,hr,hu,it,iw,ja,ko,lt,lv,nl,no,pl,pt,ro,ru,sh,sk,sl,sv,th,tr,uk,vi,zh_CN,zh_TW$");
-	}
 }
 
 export default Locale;

package/src/locale/RTLAwareRegistry.js

@@ -0,0 +1,14 @@
+const rtlAwareSet = new Set();
+
+const markAsRtlAware = klass => {
+	rtlAwareSet.add(klass);
+};
+
+const isRtlAware = klass => {
+	return rtlAwareSet.has(klass);
+};
+
+export {
+	markAsRtlAware,
+	isRtlAware,
+};

package/src/locale/applyDirection.js

@@ -0,0 +1,17 @@
+import { reRenderAllUI5Elements } from "../Render.js";
+import { fireDirectionChange } from "./directionChange.js";
+
+/**
+ * Re-renders all RTL-aware UI5 Elements.
+ * Call this method whenever you change the "dir" property anywhere in your HTML page
+ * Example: document.body.dir = "rtl"; applyDirection();
+ *
+ * @returns {Promise<void>}
+ */
+const applyDirection = async () => {
+	const listenersResults = fireDirectionChange();
+	await Promise.all(listenersResults);
+	await reRenderAllUI5Elements({ rtlAware: true });
+};
+
+export default applyDirection;

package/src/locale/directionChange.js

@@ -0,0 +1,32 @@
+import EventProvider from "../EventProvider.js";
+
+const eventProvider = new EventProvider();
+const DIR_CHANGE = "directionChange";
+
+/**
+ * Attach a callback that will be executed whenever the application calls the "applyDirection" function
+ * @public
+ * @param listener
+ */
+const attachDirectionChange = listener => {
+	eventProvider.attachEvent(DIR_CHANGE, listener);
+};
+
+/**
+ * Detach a callback that was passed with "attachDirectionChange"
+ * @public
+ * @param listener
+ */
+const detachDirectionChange = listener => {
+	eventProvider.detachEvent(DIR_CHANGE, listener);
+};
+
+const fireDirectionChange = () => {
+	return eventProvider.fireEvent(DIR_CHANGE);
+};
+
+export {
+	attachDirectionChange,
+	detachDirectionChange,
+	fireDirectionChange,
+};

package/src/locale/getEffectiveDir.js

@@ -0,0 +1,28 @@
+import { getRTL } from "../config/RTL.js";
+
+const GLOBAL_DIR_CSS_VAR = "--_ui5_dir";
+
+const getEffectiveDir = element => {
+	const doc = window.document;
+	const dirValues = ["ltr", "rtl"]; // exclude "auto" and "" from all calculations
+	const locallyAppliedDir = getComputedStyle(element).getPropertyValue(GLOBAL_DIR_CSS_VAR);
+
+	// In that order, inspect the CSS Var (for modern browsers), the element itself, html and body (for IE fallback)
+	if (dirValues.includes(locallyAppliedDir)) {
+		return locallyAppliedDir;
+	}
+	if (dirValues.includes(element.dir)) {
+		return element.dir;
+	}
+	if (dirValues.includes(doc.documentElement.dir)) {
+		return doc.documentElement.dir;
+	}
+	if (dirValues.includes(doc.body.dir)) {
+		return doc.body.dir;
+	}
+
+	// Finally, check the configuration for explicitly set RTL or language-implied RTL
+	return getRTL() ? "rtl" : undefined;
+};
+
+export default getEffectiveDir;

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/src/{util → 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,52 @@
-import { html, render } from "lit-html/lit-html.js";
+import {
+	render,
+	html,
+	svg,
+} from "lit-html";
+import { getFeature } from "../FeaturesRegistry.js";
 
-const litRender = (templateResult, domNode, styles, { eventContext } = {}) => {
-	if (styles) {
-		templateResult = html`<style>${styles}</style>${templateResult}`;
+const effectiveHtml = (...args) => {
+	const LitStatic = getFeature("LitStatic");
+	const fn = LitStatic ? LitStatic.html : html;
+	return fn(...args);
+};
+
+const effectiveSvg = (...args) => {
+	const LitStatic = getFeature("LitStatic");
+	const fn = LitStatic ? LitStatic.svg : svg;
+	return fn(...args);
+};
+
+const litRender = (templateResult, domNode, styleStrOrHrefsArr, forStaticArea, { host } = {}) => {
+	const OpenUI5Enablement = getFeature("OpenUI5Enablement");
+	if (OpenUI5Enablement && !forStaticArea) {
+		templateResult = OpenUI5Enablement.wrapTemplateResultInBusyMarkup(effectiveHtml, host, templateResult);
+	}
+
+	if (typeof styleStrOrHrefsArr === "string") {
+		templateResult = effectiveHtml`<style>${styleStrOrHrefsArr}</style>${templateResult}`;
+	} else if (Array.isArray(styleStrOrHrefsArr) && styleStrOrHrefsArr.length) {
+		templateResult = effectiveHtml`${styleStrOrHrefsArr.map(href => effectiveHtml`<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 LitStatic = getFeature("LitStatic");
+	if (LitStatic) {
+		return LitStatic.unsafeStatic((tags || []).includes(tag) ? `${tag}-${suffix}` : tag);
+	}
+};
+
+export {
+	effectiveHtml as html,
+	effectiveSvg as svg,
+};
+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,34 @@
+import { getCustomElementsScopingSuffix, shouldScopeCustomElement } from "../CustomElementsScopeUtils.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 = getTagsToScope(component);
+	const scope = getCustomElementsScopingSuffix();
+	return template(component, tagsToScope, scope);
+};
+
+/**
+ * Returns all tags, used inside component's template subject to scoping.
+ * @param component - the component
+ * @returns {Array[]}
+ * @private
+ */
+const getTagsToScope = component => {
+	const componentTag = component.constructor.getMetadata().getPureTag();
+	const tagsToScope = component.constructor.getUniqueDependencies().map(dep => dep.getMetadata().getPureTag()).filter(shouldScopeCustomElement);
+
+	if (shouldScopeCustomElement(componentTag)) {
+		tagsToScope.push(componentTag);
+	}
+
+	return tagsToScope;
+};
+
+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,
+};