@ui5/webcomponents-base 0.0.0-50304f58c → 0.0.0-51202adee

package/src/asset-registries/Themes.js

@@ -1,88 +0,0 @@
-import { fetchJsonOnce, fetchTextOnce } from "../util/FetchHelper.js";
-import { DEFAULT_THEME } from "../generated/AssetParameters.js";
-import getFileExtension from "../util/getFileExtension.js";
-import { getEffectiveAssetPath } from "../util/EffectiveAssetPath.js";
-
-const themeURLs = new Map();
-const themeStyles = new Map();
-const registeredPackages = new Set();
-const registeredThemes = new Set();
-
-/**
- * Used to provide CSS Vars for a specific theme for a specific package.
- * The CSS Vars can be passed directly as a string (containing them), as an object with a "_" property(containing them in the "_" property), or as a URL.
- * This URL must point to a JSON file, containing a "_" property.
- *
- * Example usage:
- *  1) Pass the CSS Vars as a string directly.
- *  registerThemeProperties("my-package", "my_theme", ":root{--var1: red;}");
- *  2) Pass the CSS Vars as an object directly
- *  registerThemeProperties("my-package", "my_theme", {"_": ":root{--var1: red;}"});
- *  3) Pass a URL to a CSS file, containing the CSS Vars. Will be fetched on demand, not upon registration.
- *  registerThemeProperties("my-package", "my_theme", "http://url/to/my/theme.css");
- *  4) Pass a URL to a JSON file, containing the CSS Vars in its "_" property. Will be fetched on demand, not upon registration.
- *  registerThemeProperties("my-package", "my_theme", "http://url/to/my/theme.json");
- *
- * @public
- * @param packageName - the NPM package for which CSS Vars are registered
- * @param themeName - the theme which the CSS Vars implement
- * @param style - can be one of four options: a string, an object with a "_" property, URL to a CSS file, or URL to a JSON file with a "_" property
- */
-const registerThemeProperties = (packageName, themeName, style) => {
-	if (style._) {
-		// JSON object like ({"_": ":root"})
-		themeStyles.set(`${packageName}_${themeName}`, style._);
-	} else if (style.includes(":root") || style === "") {
-		// pure string, including empty string
-		themeStyles.set(`${packageName}_${themeName}`, style);
-	} else {
-		// url for fetching
-		themeURLs.set(`${packageName}_${themeName}`, style);
-	}
-	registeredPackages.add(packageName);
-	registeredThemes.add(themeName);
-};
-
-const getThemeProperties = async (packageName, themeName) => {
-	const style = themeStyles.get(`${packageName}_${themeName}`);
-	if (style !== undefined) { // it's valid for style to be an empty string
-		return style;
-	}
-
-	if (!registeredThemes.has(themeName)) {
-		const regThemesStr = [...registeredThemes.values()].join(", ");
-		console.warn(`You have requested a non-registered theme - falling back to ${DEFAULT_THEME}. Registered themes are: ${regThemesStr}`); /* eslint-disable-line */
-		return themeStyles.get(`${packageName}_${DEFAULT_THEME}`);
-	}
-
-	const data = await fetchThemeProperties(packageName, themeName);
-	const themeProps = data._ || data;
-
-	themeStyles.set(`${packageName}_${themeName}`, themeProps);
-	return themeProps;
-};
-
-const fetchThemeProperties = async (packageName, themeName) => {
-	const url = themeURLs.get(`${packageName}_${themeName}`);
-
-	if (!url) {
-		throw new Error(`You have to import the ${packageName}/dist/Assets.js module to switch to additional themes`);
-	}
-
-	return getFileExtension(url) === ".css" ? fetchTextOnce(url) : fetchJsonOnce(getEffectiveAssetPath(url));
-};
-
-const getRegisteredPackages = () => {
-	return registeredPackages;
-};
-
-const isThemeRegistered = theme => {
-	return registeredThemes.has(theme);
-};
-
-export {
-	registerThemeProperties,
-	getThemeProperties,
-	getRegisteredPackages,
-	isThemeRegistered,
-};

package/src/asset-registries/i18n.js

@@ -1,110 +0,0 @@
-import { getFeature } from "../FeaturesRegistry.js";
-import getLocale from "../locale/getLocale.js";
-import { attachLanguageChange } from "../locale/languageChange.js";
-import { fetchTextOnce } from "../util/FetchHelper.js";
-import normalizeLocale from "../locale/normalizeLocale.js";
-import nextFallbackLocale from "../locale/nextFallbackLocale.js";
-import { DEFAULT_LANGUAGE } from "../generated/AssetParameters.js";
-import { getEffectiveAssetPath } from "../util/EffectiveAssetPath.js";
-import { getUseDefaultLanguage } from "../config/Language.js";
-
-const bundleData = new Map();
-const bundleURLs = new Map();
-
-/**
- * Sets a map with texts and ID the are related to.
- * @param {string} packageName package ID that the i18n bundle will be related to
- * @param {Object} data an object with string locales as keys and text translataions as values
- * @public
- */
-const setI18nBundleData = (packageName, data) => {
-	bundleData.set(packageName, data);
-};
-
-const getI18nBundleData = packageName => {
-	return bundleData.get(packageName);
-};
-
-/**
- * Registers a map of locale/url information, to be used by the <code>fetchI18nBundle</code> method.
- * Note: In order to be able to register ".properties" files, you must import the following module:
- * import "@ui5/webcomponents-base/dist/features/PropertiesFormatSupport.js";
- *
- * @param {string} packageName package ID that the i18n bundle will be related to
- * @param {Object} bundle an object with string locales as keys and the URLs (in .json or .properties format - see the note above) where the corresponding locale can be fetched from, f.e {"en": "path/en.json", ...}
- *
- * @public
- */
-const registerI18nBundle = (packageName, bundle) => {
-	const oldBundle = bundleURLs.get(packageName) || {};
-	bundleURLs.set(packageName, Object.assign({}, oldBundle, bundle));
-};
-
-/**
- * This method preforms the asynchronous task of fetching the actual text resources. It will fetch
- * each text resource over the network once (even for multiple calls to the same method).
- * It should be fully finished before the i18nBundle class is created in the webcomponents.
- * This method uses the bundle URLs that are populated by the <code>registerI18nBundle</code> method.
- * To simplify the usage, the synchronization of both methods happens internally for the same <code>bundleId</code>
- * @param {packageName} packageName the NPM package name
- * @public
- */
-const fetchI18nBundle = async packageName => {
-	const bundlesForPackage = bundleURLs.get(packageName);
-
-	if (!bundlesForPackage) {
-		console.warn(`Message bundle assets are not configured. Falling back to English texts.`, /* eslint-disable-line */
-		` You need to import ${packageName}/dist/Assets.js with a build tool that supports JSON imports.`); /* eslint-disable-line */
-		return;
-	}
-
-	const language = getLocale().getLanguage();
-	const region = getLocale().getRegion();
-	const useDefaultLanguage = getUseDefaultLanguage();
-	let localeId = normalizeLocale(language + (region ? `-${region}` : ``));
-
-	while (localeId !== DEFAULT_LANGUAGE && !bundlesForPackage[localeId]) {
-		localeId = nextFallbackLocale(localeId);
-	}
-
-	if (useDefaultLanguage && localeId === DEFAULT_LANGUAGE) {
-		setI18nBundleData(packageName, null); // reset for the default language (if data was set for a previous language)
-		return;
-	}
-
-	const bundleURL = bundlesForPackage[localeId];
-
-	if (typeof bundleURL === "object") { // inlined from build
-		setI18nBundleData(packageName, bundleURL);
-		return;
-	}
-
-	const content = await fetchTextOnce(getEffectiveAssetPath(bundleURL));
-	let parser;
-	if (content.startsWith("{")) {
-		parser = JSON.parse;
-	} else {
-		const PropertiesFormatSupport = getFeature("PropertiesFormatSupport");
-		if (!PropertiesFormatSupport) {
-			throw new Error(`In order to support .properties files, please: import "@ui5/webcomponents-base/dist/features/PropertiesFormatSupport.js";`);
-		}
-		parser = PropertiesFormatSupport.parser;
-	}
-
-	const data = parser(content);
-
-	setI18nBundleData(packageName, data);
-};
-
-// When the language changes dynamically (the user calls setLanguage), re-fetch all previously fetched bundles
-attachLanguageChange(() => {
-	const allPackages = [...bundleData.keys()];
-	return Promise.all(allPackages.map(fetchI18nBundle));
-});
-
-export {
-	fetchI18nBundle,
-	registerI18nBundle,
-	setI18nBundleData,
-	getI18nBundleData,
-};

package/src/boot.js

@@ -1,34 +0,0 @@
-import whenDOMReady from "./util/whenDOMReady.js";
-import insertFontFace from "./FontFace.js";
-import insertSystemCSSVars from "./SystemCSSVars.js";
-import { getTheme } from "./config/Theme.js";
-import applyTheme from "./theming/applyTheme.js";
-import whenPolyfillLoaded from "./compatibility/whenPolyfillLoaded.js";
-import { getFeature } from "./FeaturesRegistry.js";
-
-let bootPromise;
-
-const boot = () => {
-	if (bootPromise) {
-		return bootPromise;
-	}
-
-	bootPromise = new Promise(async resolve => {
-		const OpenUI5Support = getFeature("OpenUI5Support");
-		if (OpenUI5Support) {
-			await OpenUI5Support.init();
-		}
-
-		await whenDOMReady();
-		await applyTheme(getTheme());
-		OpenUI5Support && OpenUI5Support.attachListeners();
-		insertFontFace();
-		insertSystemCSSVars();
-		await whenPolyfillLoaded();
-		resolve();
-	});
-
-	return bootPromise;
-};
-
-export default boot;

package/src/compatibility/DOMObserver.js

@@ -1,62 +0,0 @@
-// Shorthands
-const w = window;
-
-// Map of observer objects per dom node
-const observers = new WeakMap();
-
-/**
- * Implements universal DOM node observation methods.
- */
-class DOMObserver {
-	constructor() {
-		throw new Error("Static class");
-	}
-
-	/**
-	 * This function abstracts out mutation observer usage inside shadow DOM.
-	 * For native shadow DOM the native mutation observer is used.
-	 * When the polyfill is used, the observeChildren ShadyDOM method is used instead.
-	 *
-	 * @throws Exception
-	 * Note: does not allow several mutation observers per node. If there is a valid use-case, this behavior can be changed.
-	 *
-	 * @param node
-	 * @param callback
-	 * @param options - Only used for the native mutation observer
-	 */
-	static observeDOMNode(node, callback, options) {
-		let observerObject = observers.get(node);
-		if (observerObject) {
-			throw new Error("A mutation/ShadyDOM observer is already assigned to this node.");
-		}
-
-		if (w.ShadyDOM) {
-			observerObject = w.ShadyDOM.observeChildren(node, callback);
-		} else {
-			observerObject = new MutationObserver(callback);
-			observerObject.observe(node, options);
-		}
-
-		observers.set(node, observerObject);
-	}
-
-	/**
-	 * De-registers the mutation observer, depending on its type
-	 * @param node
-	 */
-	static unobserveDOMNode(node) {
-		const observerObject = observers.get(node);
-		if (!observerObject) {
-			return;
-		}
-
-		if (observerObject instanceof MutationObserver) {
-			observerObject.disconnect();
-		} else {
-			w.ShadyDOM.unobserveChildren(observerObject);
-		}
-		observers.delete(node);
-	}
-}
-
-export default DOMObserver;

package/src/compatibility/patchNodeValue.js

@@ -1,24 +0,0 @@
-const patchNodeValue = () => {
-	if (!window.ShadyDOM) {
-		return;
-	}
-	const nativeNodeValue = Object.getOwnPropertyDescriptor(Node.prototype, "nodeValue");
-	Object.defineProperty(Node.prototype, "nodeValue", {
-		get() {
-			return nativeNodeValue.get.apply(this);
-		},
-		set(text) {
-			nativeNodeValue.set.apply(this, arguments); // eslint-disable-line
-
-			// Call manually the mutation observer callback
-			const parentElement = this.parentNode;
-			if (parentElement instanceof HTMLElement && parentElement.isUI5Element) {
-				parentElement._processChildren();
-			}
-		},
-	});
-};
-
-patchNodeValue();
-
-export default {};

package/src/compatibility/whenPolyfillLoaded.js

@@ -1,26 +0,0 @@
-let polyfillLoadedPromise;
-
-const whenPolyfillLoaded = () => {
-	if (polyfillLoadedPromise) {
-		return polyfillLoadedPromise;
-	}
-
-	polyfillLoadedPromise = new Promise(resolve => {
-		if (window.WebComponents
-			&& !window.WebComponents.ready
-			&& window.WebComponents.waitFor) {
-			// the polyfill loader is present
-			window.WebComponents.waitFor(() => {
-				// the polyfills are loaded, safe to execute code depending on their APIs
-				resolve();
-			});
-		} else {
-			// polyfill loader missing, modern browsers only
-			resolve();
-		}
-	});
-
-	return polyfillLoadedPromise;
-};
-
-export default whenPolyfillLoaded;

package/src/config/AnimationMode.js

@@ -1,23 +0,0 @@
-import { getAnimationMode as getConfiguredAnimationMode } from "../InitialConfiguration.js";
-import AnimationMode from "../types/AnimationMode.js";
-
-let animationMode;
-
-const getAnimationMode = () => {
-	if (animationMode === undefined) {
-		animationMode = getConfiguredAnimationMode();
-	}
-
-	return animationMode;
-};
-
-const setAnimationMode = newAnimationMode => {
-	if (Object.values(AnimationMode).includes(newAnimationMode)) {
-		animationMode = newAnimationMode;
-	}
-};
-
-export {
-	getAnimationMode,
-	setAnimationMode,
-};

package/src/config/AssetsPath.js

@@ -1,17 +0,0 @@
-import { getAssetsPath as getConfiguredAssetsPath } from "../InitialConfiguration.js";
-
-let assetsPath;
-
-const getAssetsPath = () => {
-	if (assetsPath === undefined) {
-		assetsPath = getConfiguredAssetsPath();
-	}
-
-	return assetsPath;
-};
-
-const setAssetsPath = newAssetsPath => {
-	assetsPath = newAssetsPath;
-};
-
-export { getAssetsPath, setAssetsPath }; // eslint-disable-line

package/src/config/FormatSettings.js

@@ -1,13 +0,0 @@
-import { getFormatSettings } from "../InitialConfiguration.js";
-
-let formatSettings;
-
-const getFirstDayOfWeek = () => {
-	if (formatSettings === undefined) {
-		formatSettings = getFormatSettings();
-	}
-
-	return formatSettings.firstDayOfWeek;
-};
-
-export { getFirstDayOfWeek }; // eslint-disable-line

package/src/config/Language.js

@@ -1,70 +0,0 @@
-import {
-	getLanguage as getConfiguredLanguage,
-	getUseDefaultLanguage as getConfiguredUseDefaultLanguage,
-} from "../InitialConfiguration.js";
-import { fireLanguageChange } from "../locale/languageChange.js";
-import RenderScheduler from "../RenderScheduler.js";
-
-let language;
-let useDefaultLanguage;
-
-/**
- * Returns the currently configured language, or the browser language as a fallback
- * @returns {String}
- */
-const getLanguage = () => {
-	if (language === undefined) {
-		language = getConfiguredLanguage();
-	}
-	return language;
-};
-
-/**
- * Changes the current language, re-fetches all message bundles, updates all language-aware components
- * and returns a promise that resolves when all rendering is done
- *
- * @param newLanguage
- * @returns {Promise<void>}
- */
-const setLanguage = async newLanguage => {
-	if (language === newLanguage) {
-		return;
-	}
-
-	language = newLanguage;
-
-	const listenersResults = fireLanguageChange(newLanguage);
-	await Promise.all(listenersResults);
-	RenderScheduler.reRenderAllUI5Elements({ languageAware: true });
-	return RenderScheduler.whenFinished();
-};
-
-/**
- * Defines if the default language, that is inlined, should be used,
- * instead of fetching the language over the network.
- * <b>Note:</b> By default the language will be fetched.
- *
- * @param {Boolean} useDefaultLanguage
- */
-const setUseDefaultLanguage = useDefaultLang => {
-	useDefaultLanguage = useDefaultLang;
-};
-
-/**
- * Returns if the default language, that is inlined, should be used.
- * @returns {Boolean}
- */
-const getUseDefaultLanguage = () => {
-	if (useDefaultLanguage === undefined) {
-		setUseDefaultLanguage(getConfiguredUseDefaultLanguage());
-	}
-
-	return useDefaultLanguage;
-};
-
-export {
-	getLanguage,
-	setLanguage,
-	setUseDefaultLanguage,
-	getUseDefaultLanguage,
-};

package/src/config/NoConflict.js

@@ -1,51 +0,0 @@
-import { getNoConflict as getConfiguredNoConflict } from "../InitialConfiguration.js";
-
-// Fire these events even with noConflict: true
-const excludeList = [
-	"value-changed",
-];
-
-const shouldFireOriginalEvent = eventName => {
-	return excludeList.includes(eventName);
-};
-
-let noConflict;
-
-const shouldNotFireOriginalEvent = eventName => {
-	const nc = getNoConflict();
-	return !(nc.events && nc.events.includes && nc.events.includes(eventName));
-};
-
-const getNoConflict = () => {
-	if (noConflict === undefined) {
-		noConflict = getConfiguredNoConflict();
-	}
-
-	return noConflict;
-};
-
-const skipOriginalEvent = eventName => {
-	const nc = getNoConflict();
-
-	// Always fire these events
-	if (shouldFireOriginalEvent(eventName)) {
-		return false;
-	}
-
-	// Read from the configuration
-	if (nc === true) {
-		return true;
-	}
-
-	return !shouldNotFireOriginalEvent(eventName);
-};
-
-const setNoConflict = noConflictData => {
-	noConflict = noConflictData;
-};
-
-export {
-	getNoConflict,
-	setNoConflict,
-	skipOriginalEvent,
-};

package/src/config/Theme.js

@@ -1,28 +0,0 @@
-import { getTheme as getConfiguredTheme } from "../InitialConfiguration.js";
-import applyTheme from "../theming/applyTheme.js";
-
-let theme;
-
-const getTheme = () => {
-	if (theme === undefined) {
-		theme = getConfiguredTheme();
-	}
-
-	return theme;
-};
-
-const setTheme = async newTheme => {
-	if (theme === newTheme) {
-		return;
-	}
-
-	theme = newTheme;
-
-	// Update CSS Custom Properties
-	await applyTheme(theme);
-};
-
-export {
-	getTheme,
-	setTheme,
-};

package/src/delegate/CustomResize.js

@@ -1,78 +0,0 @@
-const INTERVAL = 300;
-
-class CustomResize {
-	static initialize() {
-		CustomResize.initialized = false;
-		CustomResize.resizeInterval = undefined;
-		CustomResize.resizeListeners = new Map();
-	}
-
-	static attachListener(ref, callback) {
-		const observedObject = CustomResize.resizeListeners.get(ref);
-		const existingCallbacks = observedObject ? observedObject.callbacks : [];
-
-		CustomResize.resizeListeners.set(ref, {
-			width: ref ? ref.offsetWidth : 0,
-			height: ref ? ref.offsetHeight : 0,
-			callbacks: existingCallbacks.concat(callback),
-		});
-
-		CustomResize.initListener();
-	}
-
-	static initListener() {
-		if (CustomResize.resizeListeners.size > 0 && !CustomResize.initialized) {
-			CustomResize.resizeInterval = setInterval(CustomResize.checkListeners.bind(CustomResize), INTERVAL);
-		}
-	}
-
-	static checkListeners() {
-		CustomResize.resizeListeners.forEach((entry, ref) => {
-			const changed = CustomResize.checkSizes(entry, ref);
-
-			if (changed || (entry && !entry._hasBeenRendered)) {
-				CustomResize.updateSizes(entry, ref.offsetWidth, ref.offsetHeight);
-				entry.callbacks.forEach(el => el());
-				entry._hasBeenRendered = true;
-			}
-		});
-	}
-
-	static updateSizes(sizes, newWidth, newHeight) {
-		sizes.width = newWidth;
-		sizes.height = newHeight;
-	}
-
-	static checkSizes(entry, ref) {
-		const oldHeight = entry.height;
-		const oldWidth = entry.width;
-		const newHeight = ref.offsetHeight;
-		const newWidth = ref.offsetWidth;
-
-		return ((oldHeight !== newHeight) || oldWidth !== newWidth);
-	}
-
-	static detachListener(ref, callback) {
-		const listenerObject = CustomResize.resizeListeners.get(ref);
-		const callbacks = listenerObject ? listenerObject.callbacks : [];
-		const filteredCallbacks = callbacks.filter(fn => fn !== callback);
-
-		if (!listenerObject || (callbacks.length === filteredCallbacks.length && callbacks.length !== 0)) {
-			return;
-		}
-
-		CustomResize.resizeListeners.set(ref, Object.assign(listenerObject, { callbacks: filteredCallbacks }));
-
-		if (!filteredCallbacks.length) {
-			listenerObject.callbacks = null;
-			CustomResize.resizeListeners.delete(ref);
-		}
-
-		if (CustomResize.resizeListeners.size === 0) {
-			CustomResize.initialized = false;
-			clearInterval(CustomResize.resizeInterval);
-		}
-	}
-}
-
-export default CustomResize;