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

package/src/RenderScheduler.js

@@ -1,169 +0,0 @@
-import RenderQueue from "./RenderQueue.js";
-import { getAllRegisteredTags } from "./CustomElementsRegistry.js";
-import { isRtlAware } from "./locale/RTLAwareRegistry.js";
-
-const registeredElements = new Set();
-
-// Queue for invalidated web components
-const invalidatedWebComponents = new RenderQueue();
-
-let renderTaskPromise,
-	renderTaskPromiseResolve;
-
-let mutationObserverTimer;
-
-let queuePromise;
-
-/**
- * Class that manages the rendering/re-rendering of web components
- * This is always asynchronous
- */
-class RenderScheduler {
-	constructor() {
-		throw new Error("Static class");
-	}
-
-	/**
-	 * Schedules a render task (if not already scheduled) to render the component
-	 *
-	 * @param webComponent
-	 * @returns {Promise}
-	 */
-	static async renderDeferred(webComponent) {
-		// Enqueue the web component
-		invalidatedWebComponents.add(webComponent);
-
-		// Schedule a rendering task
-		await RenderScheduler.scheduleRenderTask();
-	}
-
-	/**
-	 * Renders a component synchronously
-	 *
-	 * @param webComponent
-	 */
-	static renderImmediately(webComponent) {
-		webComponent._render();
-	}
-
-	/**
-	 * Cancels the rendering of a component, added to the queue with renderDeferred
-	 *
-	 * @param webComponent
-	 */
-	static cancelRender(webComponent) {
-		invalidatedWebComponents.remove(webComponent);
-	}
-
-	/**
-	 * Schedules a rendering task, if not scheduled already
-	 */
-	static async scheduleRenderTask() {
-		if (!queuePromise) {
-			queuePromise = new Promise(resolve => {
-				window.requestAnimationFrame(() => {
-					// Render all components in the queue
-
-					// console.log(`--------------------RENDER TASK START------------------------------`); // eslint-disable-line
-					invalidatedWebComponents.process(component => component._render());
-					// console.log(`--------------------RENDER TASK END------------------------------`); // eslint-disable-line
-
-					// Resolve the promise so that callers of renderDeferred can continue
-					queuePromise = null;
-					resolve();
-
-					// Wait for Mutation observer before the render task is considered finished
-					if (!mutationObserverTimer) {
-						mutationObserverTimer = setTimeout(() => {
-							mutationObserverTimer = undefined;
-							if (invalidatedWebComponents.isEmpty()) {
-								RenderScheduler._resolveTaskPromise();
-							}
-						}, 200);
-					}
-				});
-			});
-		}
-
-		await queuePromise;
-	}
-
-	/**
-	 * return a promise that will be resolved once all invalidated web components are rendered
-	 */
-	static whenDOMUpdated() {
-		if (renderTaskPromise) {
-			return renderTaskPromise;
-		}
-
-		renderTaskPromise = new Promise(resolve => {
-			renderTaskPromiseResolve = resolve;
-			window.requestAnimationFrame(() => {
-				if (invalidatedWebComponents.isEmpty()) {
-					renderTaskPromise = undefined;
-					resolve();
-				}
-			});
-		});
-
-		return renderTaskPromise;
-	}
-
-	static whenAllCustomElementsAreDefined() {
-		const definedPromises = getAllRegisteredTags().map(tag => customElements.whenDefined(tag));
-		return Promise.all(definedPromises);
-	}
-
-	static async whenFinished() {
-		await RenderScheduler.whenAllCustomElementsAreDefined();
-		await RenderScheduler.whenDOMUpdated();
-	}
-
-	static _resolveTaskPromise() {
-		if (!invalidatedWebComponents.isEmpty()) {
-			// More updates are pending. Resolve will be called again
-			return;
-		}
-
-		if (renderTaskPromiseResolve) {
-			renderTaskPromiseResolve.call(this);
-			renderTaskPromiseResolve = undefined;
-			renderTaskPromise = undefined;
-		}
-	}
-
-	static register(element) {
-		registeredElements.add(element);
-	}
-
-	static deregister(element) {
-		registeredElements.delete(element);
-	}
-
-	/**
-	 * Re-renders all UI5 Elements on the page, with the option to specify filters to rerender only some components.
-	 *
-	 * Usage:
-	 * reRenderAllUI5Elements() -> rerenders all components
-	 * reRenderAllUI5Elements({tag: "ui5-button"}) -> re-renders only instances of ui5-button
-	 * reRenderAllUI5Elements({rtlAware: true}) -> re-renders only rtlAware components
-	 * reRenderAllUI5Elements({languageAware: true}) -> re-renders only languageAware components
-	 * reRenderAllUI5Elements({rtlAware: true, languageAware: true}) -> re-renders components that are rtlAware or languageAware
-	 * etc...
-	 *
-	 * @public
-	 * @param {Object|undefined} filters - Object with keys that can be "rtlAware" or "languageAware"
-	 */
-	static reRenderAllUI5Elements(filters) {
-		registeredElements.forEach(element => {
-			const tag = element.constructor.getMetadata().getTag();
-			const rtlAware = isRtlAware(element.constructor);
-			const languageAware = element.constructor.getMetadata().isLanguageAware();
-			if (!filters || (filters.tag === tag) || (filters.rtlAware && rtlAware) || (filters.languageAware && languageAware)) {
-				RenderScheduler.renderDeferred(element);
-			}
-		});
-	}
-}
-
-export default RenderScheduler;

package/src/SVGIconRegistry.js

@@ -1,73 +0,0 @@
-import getSharedResource from "./getSharedResource.js";
-
-const registry = getSharedResource("SVGIcons.registry", new Map());
-const iconCollectionPromises = getSharedResource("SVGIcons.promises", new Map());
-
-const ICON_NOT_FOUND = "ICON_NOT_FOUND";
-const DEFAULT_COLLECTION = "SAP-icons";
-
-const parseName = name => {
-	// silently support ui5-compatible URIs
-	if (name.startsWith("sap-icon://")) {
-		name = name.replace("sap-icon://", "");
-	}
-
-	let collection;
-	[name, collection] = name.split("/").reverse();
-	collection = collection || DEFAULT_COLLECTION;
-	// hardcoded alias in case icon explorer is used, resolve `SAP-icons-TNT` to `tnt`
-	// aliases can be made a feature in the future if more collections need it or more aliases are needed.
-	if (collection === "SAP-icons-TNT") {
-		collection = "tnt";
-	}
-	const registryKey = `${collection}/${name}`;
-	return { name, collection, registryKey };
-};
-
-
-const registerIcon = (name, { pathData, ltr, accData, collection } = {}) => { // eslint-disable-line
-	if (!collection) {
-		collection = DEFAULT_COLLECTION;
-	}
-
-	const key = `${collection}/${name}`;
-	registry.set(key, { pathData, ltr, accData });
-};
-
-const getIconDataSync = nameProp => {
-	const { registryKey } = parseName(nameProp);
-	return registry.get(registryKey);
-};
-
-const getIconData = async nameProp => {
-	const { collection, registryKey } = parseName(nameProp);
-
-	if (!iconCollectionPromises.has(collection)) {
-		iconCollectionPromises.set(collection, Promise.resolve(ICON_NOT_FOUND));
-	}
-
-	const iconData = await iconCollectionPromises.get(collection);
-
-	if (iconData === ICON_NOT_FOUND) {
-		return iconData;
-	}
-
-	return registry.get(registryKey);
-};
-
-const getRegisteredNames = async () => {
-	await Promise.all(Array.from(iconCollectionPromises.values()));
-	return Array.from(registry.keys());
-};
-
-const registerCollectionPromise = (collection, promise) => {
-	iconCollectionPromises.set(collection, promise);
-};
-
-export {
-	getIconData,
-	getIconDataSync,
-	registerIcon,
-	getRegisteredNames,
-	registerCollectionPromise,
-};

package/src/StaticArea.js

@@ -1,31 +0,0 @@
-import getSingletonElementInstance from "./util/getSingletonElementInstance.js";
-
-const getStaticAreaInstance = () => getSingletonElementInstance("ui5-static-area");
-
-const removeStaticArea = () => {
-	getStaticAreaInstance().destroy();
-};
-
-class StaticAreaElement extends HTMLElement {
-	constructor() {
-		super();
-	}
-
-	get isUI5Element() {
-		return true;
-	}
-
-	destroy() {
-		const staticAreaDomRef = document.querySelector(this.tagName.toLowerCase());
-		staticAreaDomRef.parentElement.removeChild(staticAreaDomRef);
-	}
-}
-
-if (!customElements.get("ui5-static-area")) {
-	customElements.define("ui5-static-area", StaticAreaElement);
-}
-
-export {
-	getStaticAreaInstance,
-	removeStaticArea,
-};

package/src/StaticAreaItem.js

@@ -1,108 +0,0 @@
-import { getStaticAreaInstance, removeStaticArea } from "./StaticArea.js";
-import RenderScheduler from "./RenderScheduler.js";
-import getStylesString from "./theming/getStylesString.js";
-import executeTemplate from "./renderer/executeTemplate.js";
-
-/**
- * @class
- * @author SAP SE
- * @private
- * Defines and takes care of ui5-static-are-item items
- */
-class StaticAreaItem {
-	constructor(_ui5ElementContext) {
-		this.ui5ElementContext = _ui5ElementContext;
-		this._rendered = false;
-	}
-
-	isRendered() {
-		return this._rendered;
-	}
-
-	/**
-	 * @protected
-	 */
-	_updateFragment() {
-		const renderResult = executeTemplate(this.ui5ElementContext.constructor.staticAreaTemplate, this.ui5ElementContext),
-			stylesToAdd = window.ShadyDOM ? false : getStylesString(this.ui5ElementContext.constructor.staticAreaStyles);
-
-		if (!this.staticAreaItemDomRef) {
-			// Initial rendering of fragment
-
-			this.staticAreaItemDomRef = document.createElement("ui5-static-area-item");
-			this.staticAreaItemDomRef.attachShadow({ mode: "open" });
-			this.staticAreaItemDomRef.classList.add(this.ui5ElementContext._id); // used for getting the popover in the tests
-
-			getStaticAreaInstance().appendChild(this.staticAreaItemDomRef);
-			this._rendered = true;
-		}
-
-		this._updateContentDensity(this.ui5ElementContext.isCompact);
-		this.ui5ElementContext.constructor.render(renderResult, this.staticAreaItemDomRef.shadowRoot, stylesToAdd, { eventContext: this.ui5ElementContext });
-	}
-
-	/**
-	 * @protected
-	 */
-	_removeFragmentFromStaticArea() {
-		if (!this.staticAreaItemDomRef) {
-			return;
-		}
-
-		const staticArea = getStaticAreaInstance();
-
-		staticArea.removeChild(this.staticAreaItemDomRef);
-
-		this.staticAreaItemDomRef = null;
-
-		// remove static area
-		if (staticArea.childElementCount < 1) {
-			removeStaticArea();
-		}
-	}
-
-	/**
-	 * @protected
-	 */
-	_updateContentDensity(isCompact) {
-		if (!this.staticAreaItemDomRef) {
-			return;
-		}
-
-		if (isCompact) {
-			this.staticAreaItemDomRef.classList.add("sapUiSizeCompact");
-			this.staticAreaItemDomRef.classList.add("ui5-content-density-compact");
-		} else {
-			this.staticAreaItemDomRef.classList.remove("sapUiSizeCompact");
-			this.staticAreaItemDomRef.classList.remove("ui5-content-density-compact");
-		}
-	}
-
-	/**
-	 * @protected
-	 * Returns reference to the DOM element where the current fragment is added.
-	 */
-	async getDomRef() {
-		if (!this._rendered || !this.staticAreaItemDomRef) {
-			this._updateFragment();
-		}
-		await RenderScheduler.whenDOMUpdated(); // Wait for the content of the ui5-static-area-item to be rendered
-		return this.staticAreaItemDomRef && this.staticAreaItemDomRef.shadowRoot;
-	}
-}
-
-class StaticAreaItemElement extends HTMLElement {
-	constructor() {
-		super();
-	}
-
-	get isUI5Element() {
-		return true;
-	}
-}
-
-if (!customElements.get("ui5-static-area-item")) {
-	customElements.define("ui5-static-area-item", StaticAreaItemElement);
-}
-
-export default StaticAreaItem;

package/src/SystemCSSVars.js

@@ -1,31 +0,0 @@
-import createStyleInHead from "./util/createStyleInHead.js";
-
-const systemCSSVars = `
-	:root {
-		--_ui5_content_density:cozy;
-	}
-	
-	[data-ui5-compact-size],
-	.ui5-content-density-compact,
-	.sapUiSizeCompact {
-		--_ui5_content_density:compact;
-	}
-	
-	[dir="rtl"] {
-		--_ui5_dir:rtl;
-	}
-	
-	[dir="ltr"] {
-		--_ui5_dir:ltr;
-	}
-`;
-
-const insertSystemCSSVars = () => {
-	if (document.querySelector(`head>style[data-ui5-system-css-vars]`)) {
-		return;
-	}
-
-	createStyleInHead(systemCSSVars, { "data-ui5-system-css-vars": "" });
-};
-
-export default insertSystemCSSVars;

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,32 +0,0 @@
-import { registerIcon, registerCollectionPromise } from "../SVGIconRegistry.js";
-import { fetchJsonOnce } from "../util/FetchHelper.js";
-import { getEffectiveAssetPath } from "../util/EffectiveAssetPath.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(getEffectiveAssetPath(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,135 +0,0 @@
-import { fetchJsonOnce } from "../util/FetchHelper.js";
-import { attachLanguageChange } from "../locale/languageChange.js";
-import getLocale from "../locale/getLocale.js";
-import { getFeature } from "../FeaturesRegistry.js";
-import { DEFAULT_LOCALE, SUPPORTED_LOCALES } from "../generated/AssetParameters.js";
-import { getEffectiveAssetPath } from "../util/EffectiveAssetPath.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(getEffectiveAssetPath(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;
-};
-
-// When the language changes dynamically (the user calls setLanguage),
-// re-fetch the required CDRD data.
-attachLanguageChange(() => {
-	const locale = getLocale();
-	return fetchCldr(locale.getLanguage(), locale.getRegion(), locale.getScript());
-});
-
-export {
-	fetchCldr,
-	registerCldr,
-	setCldrData,
-	getCldrData,
-	getModuleContent,
-	_registerMappingFunction,
-};