@ui5/webcomponents-base 0.0.0-dff5837d7 → 0.0.0-e0658a650

package/src/UI5ElementMetadata.js

@@ -1,187 +0,0 @@
-import DataType from "./types/DataType.js";
-import isDescendantOf from "./util/isDescendantOf.js";
-import { camelToKebabCase } from "./util/StringHelper.js";
-import isSlot from "./util/isSlot.js";
-
-/**
- *
- * @class
- * @public
- */
-class UI5ElementMetadata {
-	constructor(metadata) {
-		this.metadata = metadata;
-	}
-
-	/**
-	 * Only intended for use by UI5Element.js
-	 * @protected
-	 */
-	static validatePropertyValue(value, propData) {
-		const isMultiple = propData.multiple;
-		if (isMultiple) {
-			return value.map(propValue => validateSingleProperty(propValue, propData));
-		}
-		return validateSingleProperty(value, propData);
-	}
-
-	/**
-	 * Only intended for use by UI5Element.js
-	 * @protected
-	 */
-	static validateSlotValue(value, slotData) {
-		return validateSingleSlot(value, slotData);
-	}
-
-	/**
-	 * Returns the tag of the UI5 Element
-	 * @public
-	 */
-	getTag() {
-		return this.metadata.tag;
-	}
-
-	/**
-	 * Used to get the tag we need to register for backwards compatibility
-	 * @public
-	 */
-	getAltTag() {
-		return this.metadata.altTag;
-	}
-
-	/**
-	 * Determines whether a property should have an attribute counterpart
-	 * @public
-	 * @param propName
-	 * @returns {boolean}
-	 */
-	hasAttribute(propName) {
-		const propData = this.getProperties()[propName];
-		return propData.type !== Object && !propData.noAttribute;
-	}
-
-	/**
-	 * Returns an array with the properties of the UI5 Element (in camelCase)
-	 * @public
-	 * @returns {string[]}
-	 */
-	getPropertiesList() {
-		return Object.keys(this.getProperties());
-	}
-
-	/**
-	 * Returns an array with the attributes of the UI5 Element (in kebab-case)
-	 * @public
-	 * @returns {string[]}
-	 */
-	getAttributesList() {
-		return this.getPropertiesList().filter(this.hasAttribute, this).map(camelToKebabCase);
-	}
-
-	/**
-	 * Returns an object with key-value pairs of slots and their metadata definitions
-	 * @public
-	 */
-	getSlots() {
-		return this.metadata.slots || {};
-	}
-
-	/**
-	 * Determines whether this UI5 Element has a default slot of type Node, therefore can slot text
-	 * @returns {boolean}
-	 */
-	canSlotText() {
-		const defaultSlot = this.getSlots().default;
-		return defaultSlot && defaultSlot.type === Node;
-	}
-
-	/**
-	 * Determines whether this UI5 Element supports any slots
-	 * @public
-	 */
-	hasSlots() {
-		return !!Object.entries(this.getSlots()).length;
-	}
-
-	/**
-	 * Determines whether this UI5 Element supports any slots with "individualSlots: true"
-	 * @public
-	 */
-	hasIndividualSlots() {
-		return this.slotsAreManaged() && Object.entries(this.getSlots()).some(([_slotName, slotData]) => slotData.individualSlots);
-	}
-
-	/**
-	 * Determines whether this UI5 Element needs to invalidate if children are added/removed/changed
-	 * @public
-	 */
-	slotsAreManaged() {
-		return !!this.metadata.managedSlots;
-	}
-
-	/**
-	 * Returns an object with key-value pairs of properties and their metadata definitions
-	 * @public
-	 */
-	getProperties() {
-		return this.metadata.properties || {};
-	}
-
-	/**
-	 * Returns an object with key-value pairs of events and their metadata definitions
-	 * @public
-	 */
-	getEvents() {
-		return this.metadata.events || {};
-	}
-
-	/**
-	 * Determines whether this UI5 Element has any translatable texts (needs to be invalidated upon language change)
-	 * @returns {boolean}
-	 */
-	isLanguageAware() {
-		return !!this.metadata.languageAware;
-	}
-}
-
-const validateSingleProperty = (value, propData) => {
-	const propertyType = propData.type;
-
-	if (propertyType === Boolean) {
-		return typeof value === "boolean" ? value : false;
-	}
-	if (propertyType === String) {
-		return (typeof value === "string" || typeof value === "undefined" || value === null) ? value : value.toString();
-	}
-	if (propertyType === Object) {
-		return typeof value === "object" ? value : propData.defaultValue;
-	}
-	if (isDescendantOf(propertyType, DataType)) {
-		return propertyType.isValid(value) ? value : propData.defaultValue;
-	}
-};
-
-const validateSingleSlot = (value, slotData) => {
-	if (value === null) {
-		return value;
-	}
-
-	const getSlottedNodes = el => {
-		if (isSlot(el)) {
-			return el.assignedNodes({ flatten: true }).filter(item => item instanceof HTMLElement);
-		}
-
-		return [el];
-	};
-
-	const slottedNodes = getSlottedNodes(value);
-	slottedNodes.forEach(el => {
-		if (!(el instanceof slotData.type)) {
-			throw new Error(`${el} is not of type ${slotData.type}`);
-		}
-	});
-
-	return value;
-};
-
-export default UI5ElementMetadata;

package/src/animations/animate.js

@@ -1,53 +0,0 @@
-import AnimationQueue from "./AnimationQueue.js";
-import animationConfig from "./config.js";
-
-export default ({
-	beforeStart = animationConfig.identity,
-	duration = animationConfig.defaultDuration,
-	element = animationConfig.element,
-	progress: progressCallback = animationConfig.identity,
-}) => {
-	let start = null;
-	let stopped = false;
-	let animationFrame;
-	let stop;
-	let animate;
-
-	const promise = new Promise((resolve, reject) => {
-		animate = timestamp => {
-			start = start || timestamp;
-
-			const timeElapsed = timestamp - start;
-			const remaining = duration - timeElapsed;
-
-			if (timeElapsed <= duration) {
-				const progress = 1 - remaining / duration; // easing formula (currently linear)
-				progressCallback(progress);
-				animationFrame = !stopped && requestAnimationFrame(animate);
-			} else {
-				progressCallback(1);
-				resolve();
-			}
-		};
-
-		stop = () => {
-			stopped = true;
-			cancelAnimationFrame(animationFrame);
-			reject(new Error("animation stopped"));
-		};
-	}).catch(oReason => oReason);
-
-	AnimationQueue.push(element, () => {
-		beforeStart();
-		requestAnimationFrame(animate);
-
-		return new Promise(resolve => {
-			promise.then(() => resolve());
-		});
-	});
-
-	return {
-		promise: () => promise,
-		stop: () => stop,
-	};
-};

package/src/animations/config.js

@@ -1,5 +0,0 @@
-export default {
-	defaultDuration: 400,
-	element: document.createElement("DIV"),
-	identity: () => {},
-};

package/src/animations/scroll.js

@@ -1,28 +0,0 @@
-import animate from "./animate.js";
-import animationConfig from "./config.js";
-
-export default ({
-	element = animationConfig.element,
-	duration = animationConfig.duration,
-	progress: progressCallback = animationConfig.identity,
-	dx = 0,
-	dy = 0,
-}) => {
-	let scrollLeft;
-	let scrollTop;
-
-	return animate({
-		beforeStart: () => {
-			scrollLeft = element.scrollLeft;
-			scrollTop = element.scrollTop;
-		},
-		duration,
-		element,
-		progress: progress => {
-			progressCallback(progress);
-
-			element.scrollLeft = scrollLeft + (progress * dx); // easing - linear
-			element.scrollTop = scrollTop + (progress * dy); // easing - linear
-		},
-	});
-};

package/src/asset-registries/Icons.js

@@ -1,31 +0,0 @@
-import { registerIcon, registerCollectionPromise } from "../SVGIconRegistry.js";
-import { fetchJsonOnce } from "../util/FetchHelper.js";
-
-const registerIconBundle = async (collectionName, bundleData) => {
-	let resolveFn;
-	const collectionFetched = new Promise(resolve => {
-		resolveFn = resolve;
-	});
-	registerCollectionPromise(collectionName, collectionFetched);
-
-	if (typeof bundleData !== "object") { // not inlined from build -> fetch it
-		bundleData = await fetchJsonOnce(bundleData);
-	}
-	fillRegistry(bundleData);
-	resolveFn();
-};
-
-const fillRegistry = bundleData => {
-	Object.keys(bundleData.data).forEach(iconName => {
-		const iconData = bundleData.data[iconName];
-
-		registerIcon(iconName, {
-			pathData: iconData.path,
-			ltr: iconData.ltr,
-			accData: iconData.acc,
-			collection: bundleData.collection,
-		 });
-	});
-};
-
-export { registerIconBundle }; // eslint-disable-line

package/src/asset-registries/LocaleData.js

@@ -1,125 +0,0 @@
-import { fetchJsonOnce } from "../util/FetchHelper.js";
-import { getFeature } from "../FeaturesRegistry.js";
-import { DEFAULT_LOCALE, SUPPORTED_LOCALES } from "../generated/AssetParameters.js";
-
-const resources = new Map();
-const cldrData = {};
-const cldrUrls = {};
-
-// externally configurable mapping function for resolving (localeId -> URL)
-// default implementation - ui5 CDN
-let cldrMappingFn = locale => `https://ui5.sap.com/1.60.2/resources/sap/ui/core/cldr/${locale}.json`;
-
-const M_ISO639_OLD_TO_NEW = {
-	"iw": "he",
-	"ji": "yi",
-	"in": "id",
-	"sh": "sr",
-};
-
-const calcLocale = (language, region, script) => {
-	// normalize language and handle special cases
-	language = (language && M_ISO639_OLD_TO_NEW[language]) || language;
-	// Special case 1: in an SAP context, the inclusive language code "no" always means Norwegian Bokmal ("nb")
-	if (language === "no") {
-		language = "nb";
-	}
-	// Special case 2: for Chinese, derive a default region from the script (this behavior is inherited from Java)
-	if (language === "zh" && !region) {
-		if (script === "Hans") {
-			region = "CN";
-		} else if (script === "Hant") {
-			region = "TW";
-		}
-	}
-
-	// try language + region
-	let localeId = `${language}_${region}`;
-	if (!SUPPORTED_LOCALES.includes(localeId)) {
-		// fallback to language only
-		localeId = language;
-	}
-	if (!SUPPORTED_LOCALES.includes(localeId)) {
-		// fallback to english
-		localeId = DEFAULT_LOCALE;
-	}
-
-	return localeId;
-};
-
-
-const resolveMissingMappings = () => {
-	if (!cldrMappingFn) {
-		return;
-	}
-
-	const missingLocales = SUPPORTED_LOCALES.filter(locale => !cldrData[locale] && !cldrUrls[locale]);
-	missingLocales.forEach(locale => {
-		cldrUrls[locale] = cldrMappingFn(locale);
-	});
-};
-
-const registerModuleContent = (moduleName, content) => {
-	resources.set(moduleName, content);
-};
-
-const getModuleContent = moduleName => {
-	const moduleContent = resources.get(moduleName);
-	if (moduleContent) {
-		return moduleContent;
-	}
-
-	const missingModule = moduleName.match(/sap\/ui\/core\/cldr\/(\w+)\.json/);
-	if (missingModule) {
-		throw new Error(`CLDR data for locale ${missingModule[1]} is not loaded!`);
-	}
-
-	throw new Error(`Unknown module ${moduleName}`);
-};
-
-const fetchCldr = async (language, region, script) => {
-	resolveMissingMappings();
-	const localeId = calcLocale(language, region, script);
-
-	let cldrObj = cldrData[localeId];
-	const url = cldrUrls[localeId];
-
-	const OpenUI5Support = getFeature("OpenUI5Support");
-	if (!cldrObj && OpenUI5Support) {
-		cldrObj = OpenUI5Support.getLocaleDataObject();
-	}
-
-	if (cldrObj) {
-		// inlined from build or fetched independently
-		registerModuleContent(`sap/ui/core/cldr/${localeId}.json`, cldrObj);
-	} else if (url) {
-		// fetch it
-		const cldrContent = await fetchJsonOnce(url);
-		registerModuleContent(`sap/ui/core/cldr/${localeId}.json`, cldrContent);
-	}
-};
-
-const registerCldr = (locale, url) => {
-	cldrUrls[locale] = url;
-};
-
-const setCldrData = (locale, data) => {
-	cldrData[locale] = data;
-};
-
-const getCldrData = locale => {
-	return cldrData[locale];
-};
-
-const _registerMappingFunction = mappingFn => {
-	cldrMappingFn = mappingFn;
-};
-
-export {
-	fetchCldr,
-	registerCldr,
-	setCldrData,
-	getCldrData,
-	getModuleContent,
-	_registerMappingFunction,
-};

package/src/asset-registries/Themes.js

@@ -1,87 +0,0 @@
-import { fetchJsonOnce, fetchTextOnce } from "../util/FetchHelper.js";
-import { DEFAULT_THEME } from "../generated/AssetParameters.js";
-import getFileExtension from "../util/getFileExtension.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(url);
-};
-
-const getRegisteredPackages = () => {
-	return registeredPackages;
-};
-
-const isThemeRegistered = theme => {
-	return registeredThemes.has(theme);
-};
-
-export {
-	registerThemeProperties,
-	getThemeProperties,
-	getRegisteredPackages,
-	isThemeRegistered,
-};

package/src/asset-registries/i18n.js

@@ -1,106 +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";
-
-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();
-
-	let localeId = normalizeLocale(language);
-	while (localeId !== DEFAULT_LANGUAGE && !bundlesForPackage[localeId]) {
-		localeId = nextFallbackLocale(localeId);
-	}
-
-	if (!bundlesForPackage[localeId]) {
-		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(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;