@ui5/webcomponents-base 0.0.0-cf50976ce → 0.0.0-d4d43327a

package/src/asset-registries/Icons.js

@@ -1,135 +0,0 @@
-import getSharedResource from "../getSharedResource.js";
-import IconCollectionsAlias from "../assets-meta/IconCollectionsAlias.js";
-import { getEffectiveDefaultIconCollection } from "../config/Icons.js";
-
-const loaders = new Map();
-const registry = getSharedResource("SVGIcons.registry", new Map());
-const iconCollectionPromises = getSharedResource("SVGIcons.promises", new Map());
-
-const ICON_NOT_FOUND = "ICON_NOT_FOUND";
-
-/**
- * @deprecated
- */
-const registerIconBundle = async (collectionName, bundleData) => {
-	throw new Error("This method has been removed. Use `registerIconLoader` instead.");
-};
-
-const registerIconLoader = async (collectionName, loader) => {
-	loaders.set(collectionName, loader);
-};
-
-const _loadIconCollectionOnce = async collectionName => {
-	if (!iconCollectionPromises.has(collectionName)) {
-		if (!loaders.has(collectionName)) {
-			throw new Error(`No loader registered for the ${collectionName} icons collection. Probably you forgot to import the "AllIcons.js" module for the respective package.`);
-		}
-		const loadIcons = loaders.get(collectionName);
-		iconCollectionPromises.set(collectionName, loadIcons(collectionName));
-	}
-
-	return iconCollectionPromises.get(collectionName);
-};
-
-const _fillRegistry = bundleData => {
-	Object.keys(bundleData.data).forEach(iconName => {
-		const iconData = bundleData.data[iconName];
-
-		registerIcon(iconName, {
-			pathData: iconData.path || iconData.paths,
-			ltr: iconData.ltr,
-			accData: iconData.acc,
-			collection: bundleData.collection,
-			packageName: bundleData.packageName,
-		 });
-	});
-};
-
-// set
-const registerIcon = (name, { pathData, ltr, accData, collection, packageName } = {}) => { // eslint-disable-line
-	if (!collection) {
-		collection = getEffectiveDefaultIconCollection();
-	}
-
-	const key = `${collection}/${name}`;
-	registry.set(key, {
-		pathData,
-		ltr,
-		accData,
-		packageName,
-	});
-};
-
-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 || getEffectiveDefaultIconCollection();
-
-	// Normalize collection name.
-	// - resolve `SAP-icons-TNT` to `tnt`.
-	// - resolve `BusinessSuiteInAppSymbols` to `business-suite`.
-	// - resolve `horizon` to `SAP-icons-v5`,
-	// Note: aliases can be made as a feature, if more collections need it or more aliases are needed.
-	collection = _normalizeCollection(collection);
-	name = name.replace("icon-", "");
-
-	const registryKey = `${collection}/${name}`;
-	return { name, collection, registryKey };
-};
-
-const getIconDataSync = nameProp => {
-	const { registryKey } = _parseName(nameProp);
-	return registry.get(registryKey);
-};
-
-const getIconData = async nameProp => {
-	const { collection, registryKey } = _parseName(nameProp);
-
-	let iconData = ICON_NOT_FOUND;
-	try {
-		iconData = await _loadIconCollectionOnce(collection);
-	} catch (e) {
-		console.error(e.message); /* eslint-disable-line */
-	}
-
-	if (iconData === ICON_NOT_FOUND) {
-		return iconData;
-	}
-
-	if (!registry.has(registryKey)) {
-		// not filled by another await. many getters will await on the same loader, but fill only once
-		_fillRegistry(iconData);
-	}
-	return registry.get(registryKey);
-};
-
-// test page usage only
-const _getRegisteredNames = async () => {
-	// fetch one icon of each collection to trigger the bundle load
-	await getIconData("edit");
-	await getIconData("tnt/arrow");
-	await getIconData("business-suite/3d");
-	return Array.from(registry.keys());
-};
-
-const _normalizeCollection = collectionName => {
-	if (IconCollectionsAlias[collectionName]) {
-		return IconCollectionsAlias[collectionName];
-	}
-
-	return collectionName;
-};
-
-export {
-	registerIconBundle,
-	registerIconLoader,
-	getIconData,
-	getIconDataSync,
-	registerIcon,
-	_getRegisteredNames,
-};

package/src/asset-registries/Illustrations.js

@@ -1,30 +0,0 @@
-import getSharedResource from "../getSharedResource.js";
-
-const registry = getSharedResource("SVGIllustration.registry", new Map());
-const ILLUSTRATION_NOT_FOUND = "ILLUSTRATION_NOT_FOUND";
-
-const registerIllustration = (name, { dialogSvg, sceneSvg, spotSvg, set, title, subtitle } = {}) => { // eslint-disable-line
-	registry.set(`${set}/${name}`, {
-		dialogSvg,
-		sceneSvg,
-		spotSvg,
-		title,
-		subtitle,
-	});
-};
-
-const getIllustrationDataSync = nameProp => {
-	let set = "fiori";
-
-	if (nameProp.startsWith("Tnt")) {
-		set = "tnt";
-		nameProp = nameProp.replace(/^Tnt/, "");
-	}
-
-	return registry.get(`${set}/${nameProp}`) || ILLUSTRATION_NOT_FOUND;
-};
-
-export {
-	getIllustrationDataSync,
-	registerIllustration,
-};

package/src/assets-meta/IconCollectionsAlias.js

@@ -1,18 +0,0 @@
-/**
- * Supported icon collection names and aliases.
- *
- * Users might specify a collection, using both the key and the value in the following key-value pairs,
- * e.g the following pairs are completely exchangeable:
- * "SAP-icons-TNT/actor" and "tnt/actor", "BusinessSuiteInAppSymbols/3d" and "business-suite/3d",
- * "SAP-icons-v5/accept" and "horizon/accept".
- *
- * Note: technically, in the code we maintain the collections under the "value" name - "tnt", "business-suite",
- * SAP-icons-v5" and "SAP-icons"(which does not have an alias).
- */
-const IconCollectionsAlias = {
-	"SAP-icons-TNT": "tnt",
-	"BusinessSuiteInAppSymbols": "business-suite",
-	"horizon": "SAP-icons-v5",
-};
-
-export default IconCollectionsAlias;

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/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/Icons.js

@@ -1,52 +0,0 @@
-import { getTheme, isThemeFamily } from "./Theme.js";
-
-const IconCollectionConfiguration = new Map();
-
-/**
- * Sets the default icon collection (v4 or v5) per theme,
- * which will be applied in case icon collection is not specified.
- *
- * Note: by default SAP-icons-v5 is used in SAP Horizon and  SAP-icons-v4 for all the rest.
- * @param {String} theme
- * @param {String} collectionName
- */
-const setDefaultIconCollection = (theme, collectionName) => {
-	if (collectionName === "horizon") {
-		collectionName = "SAP-icons-v5";
-	}
-
-	IconCollectionConfiguration.set(theme, collectionName);
-};
-
-/**
- * Returns the default icon collection (v4 or v5) for given theme,
- * that is configured.
- *
- * @param {String} theme
- * @returns {String}
- */
-const getDefaultIconCollection = theme => {
-	return IconCollectionConfiguration.get(theme);
-};
-
-/**
- * Returns the effective icon collection that will be applied for icon web components
- * whenever namespace is not specified.
- * @returns {String}
- */
-const getEffectiveDefaultIconCollection = () => {
-	const currentTheme = getTheme();
-	const currentThemeConfiguration = IconCollectionConfiguration.get(currentTheme);
-
-	if (currentThemeConfiguration) {
-		return currentThemeConfiguration;
-	}
-
-	return isThemeFamily("sap_horizon") ? "SAP-icons-v5" : "SAP-icons";
-};
-
-export {
-	setDefaultIconCollection,
-	getDefaultIconCollection,
-	getEffectiveDefaultIconCollection,
-};

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,53 +0,0 @@
-import { getTheme as getConfiguredTheme } from "../InitialConfiguration.js";
-import { reRenderAllUI5Elements } from "../Render.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);
-	await reRenderAllUI5Elements({ themeAware: true });
-};
-
-/**
- * Returns if the given theme name is the one currently applied.
- * @private
- * @param {String}
- * @returns {boolean}
- */
-const isTheme = _theme => {
-	const currentTheme = getTheme();
-	return currentTheme === _theme || currentTheme === `${_theme}_exp`;
-};
-
-/**
- * Returns if the current theme is part of given theme family
- * @private
- * @param {String} the theme family
- * @returns {boolean}
- */
-const isThemeFamily = _theme => {
-	return getTheme().startsWith(_theme);
-};
-
-export {
-	getTheme,
-	setTheme,
-	isTheme,
-	isThemeFamily,
-};

package/src/delegate/ResizeHandler.js

@@ -1,106 +0,0 @@
-let resizeObserver;
-const observedElements = new Map();
-
-const getResizeObserver = () => {
-	if (!resizeObserver) {
-		resizeObserver = new window.ResizeObserver(entries => {
-			entries.forEach(entry => {
-				const callbacks = observedElements.get(entry.target);
-				callbacks.forEach(callback => callback());
-			});
-		});
-	}
-	return resizeObserver;
-};
-
-let observe = (element, callback) => {
-	const callbacks = observedElements.get(element) || [];
-
-	// if no callbacks have been added for this element - start observing it
-	if (!callbacks.length) {
-		getResizeObserver().observe(element);
-	}
-
-	// save the callbacks in an array
-	observedElements.set(element, [...callbacks, callback]);
-};
-
-let unobserve = (element, callback) => {
-	const callbacks = observedElements.get(element) || [];
-	if (callbacks.length === 0) {
-		return;
-	}
-
-	const filteredCallbacks = callbacks.filter(fn => fn !== callback);
-	if (filteredCallbacks.length === 0) {
-		getResizeObserver().unobserve(element);
-		observedElements.delete(element);
-	} else {
-		observedElements.set(element, filteredCallbacks);
-	}
-};
-
-/**
- * Allows to register/deregister resize observers for a DOM element
- *
- * @public
- * @class
-  */
-class ResizeHandler {
-	/**
-	 * @static
-	 * @public
-	 * @param {*} element UI5 Web Component or DOM Element to be observed
-	 * @param {*} callback Callback to be executed
-	 */
-	static register(element, callback) {
-		if (element.isUI5Element) {
-			element = element.getDomRef();
-		}
-
-		if (element instanceof HTMLElement) {
-			observe(element, callback);
-		} else {
-			console.warn("Cannot register ResizeHandler for element", element); // eslint-disable-line
-		}
-	}
-
-	/**
-	 * @static
-	 * @public
-	 * @param {*} element UI5 Web Component or DOM Element to be unobserved
-	 * @param {*} callback Callback to be removed
-	 */
-	static deregister(element, callback) {
-		if (element.isUI5Element) {
-			element = element.getDomRef();
-		}
-
-		if (element instanceof HTMLElement) {
-			unobserve(element, callback);
-		} else {
-			console.warn("Cannot deregister ResizeHandler for element", element); // eslint-disable-line
-		}
-	}
-}
-
-/**
- * Set a function to be executed whenever a DOM node needs to be observed for size change.
- * @public
- * @param fn
- */
-const setResizeHandlerObserveFn = fn => {
-	observe = fn;
-};
-
-/**
- * Set a function to be executed whenever a DOM node needs to no longer be observed for size changes
- * @public
- * @param fn
- */
-const setResizeHandlerUnobserveFn = fn => {
-	unobserve = fn;
-};
-
-export default ResizeHandler;
-export { setResizeHandlerObserveFn, setResizeHandlerUnobserveFn };

package/src/delegate/ScrollEnablement.js

@@ -1,188 +0,0 @@
-import { supportsTouch } from "../Device.js";
-import EventProvider from "../EventProvider.js";
-import scroll from "../animations/scroll.js";
-
-const scrollEventName = "scroll";
-const touchEndEventName = supportsTouch() ? "touchend" : "mouseup";
-
-class ScrollEnablement extends EventProvider {
-	constructor(containerComponent) {
-		super();
-		this.containerComponent = containerComponent;
-		this.mouseMove = this.ontouchmove.bind(this);
-		this.mouseUp = this.ontouchend.bind(this);
-		this.touchStart = this.ontouchstart.bind(this);
-
-		this.supportsTouch = supportsTouch();
-
-		// On Android devices touchmove is thrown one more time than neccessary (together with touchend)
-		// so we have to cache the previus coordinates in order to provide correct parameters in the
-		// event for Android
-		this.cachedValue = {};
-
-		// In components like Carousel you need to know if the user has clicked on something or swiped
-		// in order to throw the needed event or not
-		this.startX = 0;
-		this.startY = 0;
-
-		if (this.supportsTouch) {
-			containerComponent.addEventListener("touchstart", this.touchStart, { passive: true });
-			containerComponent.addEventListener("touchmove", this.mouseMove, { passive: true });
-			containerComponent.addEventListener("touchend", this.mouseUp, { passive: true });
-		} else {
-			containerComponent.addEventListener("mousedown", this.touchStart, { passive: true });
-		}
-	}
-
-	set scrollContainer(container) {
-		this._container = container;
-	}
-
-	get scrollContainer() {
-		return this._container;
-	}
-
-	/**
-	 * Scrolls the container to the left/top position, retrying retryCount times, if the container is not yet painted
-	 *
-	 * @param left
-	 * @param top
-	 * @param retryCount
-	 * @param retryInterval
-	 * @returns {Promise<void>} resolved when scrolled successfully
-	 */
-	async scrollTo(left, top, retryCount = 0, retryInterval = 0) {
-		let containerPainted = this.scrollContainer.clientHeight > 0 && this.scrollContainer.clientWidth > 0;
-
-		/* eslint-disable no-loop-func, no-await-in-loop */
-		while (!containerPainted && retryCount > 0) {
-			await new Promise(resolve => {
-				setTimeout(() => {
-					containerPainted = this.scrollContainer.clientHeight > 0 && this.scrollContainer.clientWidth > 0;
-					retryCount--;
-					resolve();
-				}, retryInterval);
-			});
-		}
-		/* eslint-disable no-loop-func, no-await-in-loop */
-
-		this._container.scrollLeft = left;
-		this._container.scrollTop = top;
-	}
-
-	move(dx, dy, disableAnimation) {
-		if (disableAnimation) {
-			this._container.scrollLeft += dx;
-			this._container.scrollTop += dy;
-			return;
-		}
-
-		return scroll({
-			element: this._container,
-			dx,
-			dy,
-		});
-	}
-
-	getScrollLeft() {
-		return this._container.scrollLeft;
-	}
-
-	getScrollTop() {
-		return this._container.scrollTop;
-	}
-
-	_isTouchInside(touch) {
-		const rect = this._container.getBoundingClientRect();
-		const x = this.supportsTouch ? touch.clientX : touch.x;
-		const y = this.supportsTouch ? touch.clientY : touch.y;
-
-		return x >= rect.left && x <= rect.right
-			&& y >= rect.top && y <= rect.bottom;
-	}
-
-	ontouchstart(event) {
-		const touch = this.supportsTouch ? event.touches[0] : null;
-
-		if (!this.supportsTouch) {
-			document.addEventListener("mouseup", this.mouseUp, { passive: true });
-			document.addEventListener("mousemove", this.mouseMove, { passive: true });
-		} else {
-			// Needed only on mobile
-			this.startX = touch.pageX;
-			this.startY = touch.pageY;
-		}
-
-		this._prevDragX = this.supportsTouch ? touch.pageX : event.x;
-		this._prevDragY = this.supportsTouch ? touch.pageY : event.y;
-
-		this._canScroll = this._isTouchInside(this.supportsTouch ? touch : event);
-	}
-
-	ontouchmove(event) {
-		if (!this._canScroll) {
-			return;
-		}
-
-		const container = this._container;
-		const touch = this.supportsTouch ? event.touches[0] : null;
-
-		const dragX = this.supportsTouch ? touch.pageX : event.x;
-		const dragY = this.supportsTouch ? touch.pageY : event.y;
-
-		container.scrollLeft += this._prevDragX - dragX;
-		container.scrollTop += this._prevDragY - dragY;
-
-		this.fireEvent(scrollEventName, {
-			isLeft: dragX > this._prevDragX,
-			isRight: dragX < this._prevDragX,
-		});
-
-		this.cachedValue.dragX = this._prevDragX;
-		this.cachedValue.dragY = this._prevDragY;
-
-		this._prevDragX = dragX;
-		this._prevDragY = dragY;
-	}
-
-	ontouchend(event) {
-		if (this.supportsTouch) {
-			const deltaX = Math.abs(event.changedTouches[0].pageX - this.startX);
-			const deltaY = Math.abs(event.changedTouches[0].pageY - this.startY);
-
-			if (deltaX < 10 && deltaY < 10) {
-				return;
-			}
-		}
-
-		if (!this._canScroll) {
-			return;
-		}
-
-		const container = this._container;
-		const dragX = this.supportsTouch ? event.changedTouches[0].pageX : event.x;
-		const dragY = this.supportsTouch ? event.changedTouches[0].pageY : event.y;
-
-		container.scrollLeft += this._prevDragX - dragX;
-		container.scrollTop += this._prevDragY - dragY;
-
-		const useCachedValues = dragX === this._prevDragX;
-		const _dragX = useCachedValues ? this.cachedValue.dragX : dragX;
-		// const _dragY = useCachedValues ? this.cachedValue.dragY : dragY; add if needed
-
-		this.fireEvent(touchEndEventName, {
-			isLeft: _dragX < this._prevDragX,
-			isRight: _dragX > this._prevDragX,
-		});
-
-		this._prevDragX = dragX;
-		this._prevDragY = dragY;
-
-		if (!this.supportsTouch) {
-			document.removeEventListener("mousemove", this.mouseMove, { passive: true });
-			document.removeEventListener("mouseup", this.mouseUp);
-		}
-	}
-}
-
-export default ScrollEnablement;