@ui5/webcomponents-base 0.0.0-0a074c90e → 0.0.0-111ecd79a

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/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/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,182 +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) {
-		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;

package/src/features/OpenUI5Support.js

@@ -1,90 +0,0 @@
-import { registerFeature } from "../FeaturesRegistry.js";
-import { setTheme } from "../config/Theme.js";
-
-const sap = window.sap;
-const core = sap && sap.ui && typeof sap.ui.getCore === "function" && sap.ui.getCore();
-
-const isLoaded = () => {
-	return !!core;
-};
-
-const init = () => {
-	if (!core) {
-		return Promise.resolve();
-	}
-
-	return new Promise(resolve => {
-		core.attachInit(() => {
-			sap.ui.require(["sap/ui/core/LocaleData"], resolve);
-		});
-	});
-};
-
-const getConfigurationSettingsObject = () => {
-	if (!core) {
-		return;
-	}
-
-	const config = core.getConfiguration();
-	const LocaleData = sap.ui.require("sap/ui/core/LocaleData");
-
-	return {
-		animationMode: config.getAnimationMode(),
-		language: config.getLanguage(),
-		theme: config.getTheme(),
-		rtl: config.getRTL(),
-		calendarType: config.getCalendarType(),
-		formatSettings: {
-			firstDayOfWeek: LocaleData ? LocaleData.getInstance(config.getLocale()).getFirstDayOfWeek() : undefined,
-		},
-	};
-};
-
-const getLocaleDataObject = () => {
-	if (!core) {
-		return;
-	}
-
-	const config = core.getConfiguration();
-	const LocaleData = sap.ui.require("sap/ui/core/LocaleData");
-	return LocaleData.getInstance(config.getLocale())._get();
-};
-
-const listenForThemeChange = () => {
-	const config = core.getConfiguration();
-	core.attachThemeChanged(async () => {
-		await setTheme(config.getTheme());
-	});
-};
-
-const attachListeners = () => {
-	if (!core) {
-		return;
-	}
-
-	listenForThemeChange();
-};
-
-const cssVariablesLoaded = () => {
-	if (!core) {
-		return;
-	}
-
-	const link = [...document.head.children].find(el => el.id === "sap-ui-theme-sap.ui.core"); // more reliable than querySelector early
-	if (!link) {
-		return;
-	}
-
-	return !!link.href.match(/\/css(-|_)variables\.css/);
-};
-
-const OpenUI5Support = {
-	isLoaded,
-	init,
-	getConfigurationSettingsObject,
-	getLocaleDataObject,
-	attachListeners,
-	cssVariablesLoaded,
-};
-
-registerFeature("OpenUI5Support", OpenUI5Support);

package/src/i18nBundle.js

@@ -1,52 +0,0 @@
-import { registerI18nLoader, fetchI18nBundle, getI18nBundleData } from "./asset-registries/i18n.js";
-import formatMessage from "./util/formatMessage.js";
-
-const I18nBundleInstances = new Map();
-
-/**
- * @class
- * @public
- */
-class I18nBundle {
-	constructor(packageName) {
-		this.packageName = packageName;
-	}
-
-	/**
-	 * Returns a text in the currently loaded language
-	 *
-	 * @param {Object|String} textObj key/defaultText pair or just the key
-	 * @param params Values for the placeholders
-	 * @returns {*}
-	 */
-	getText(textObj, ...params) {
-		if (typeof textObj === "string") {
-			textObj = { key: textObj, defaultText: textObj };
-		}
-
-		if (!textObj || !textObj.key) {
-			return "";
-		}
-
-		const bundle = getI18nBundleData(this.packageName);
-		const messageText = bundle && bundle[textObj.key] ? bundle[textObj.key] : (textObj.defaultText || textObj.key);
-
-		return formatMessage(messageText, params);
-	}
-}
-
-const getI18nBundle = packageName => {
-	if (I18nBundleInstances.has(packageName)) {
-		return I18nBundleInstances.get(packageName);
-	}
-
-	const i18nBundle = new I18nBundle(packageName);
-	I18nBundleInstances.set(packageName, i18nBundle);
-	return i18nBundle;
-};
-
-export {
-	registerI18nLoader,
-	fetchI18nBundle,
-	getI18nBundle,
-};

package/src/isLegacyBrowser.js

@@ -1,3 +0,0 @@
-const isLegacyBrowser = () => !!window.ShadyDOM;
-
-export default isLegacyBrowser;

package/src/locale/RTLAwareRegistry.js

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

package/src/locale/languageChange.js

@@ -1,22 +0,0 @@
-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/renderer/LitRenderer.js

@@ -1,31 +0,0 @@
-import { html, svg, render } from "lit-html/lit-html.js";
-import scopeHTML from "./scopeHTML.js";
-
-let tags;
-let	suffix;
-
-const setTags = t => {
-	tags = t;
-};
-const setSuffix = s => {
-	suffix = s;
-};
-
-const litRender = (templateResult, domNode, styles, { eventContext } = {}) => {
-	if (styles) {
-		templateResult = html`<style>${styles}</style>${templateResult}`;
-	}
-	render(templateResult, domNode, { eventContext });
-};
-
-const scopedHtml = (strings, ...values) => html(scopeHTML(strings, tags, suffix), ...values);
-const scopedSvg = (strings, ...values) => svg(scopeHTML(strings, tags, suffix), ...values);
-
-export { setTags, setSuffix };
-export { scopedHtml as html, scopedSvg as svg };
-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 { unsafeHTML } from "lit-html/directives/unsafe-html.js";
-
-export default litRender;

package/src/renderer/executeTemplate.js

@@ -1,17 +0,0 @@
-import { getCustomElementsScopingSuffix, shouldScopeCustomElement } from "../CustomElementsScope.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 = component.constructor.getUniqueDependencies().map(dep => dep.getMetadata().getPureTag()).filter(shouldScopeCustomElement);
-	const scope = getCustomElementsScopingSuffix();
-	return template(component, tagsToScope, scope);
-};
-
-export default executeTemplate;

package/src/renderer/ifDefined.js

@@ -1,21 +0,0 @@
-import {
-	AttributePart,
-	directive,
-	noChange,
-} from "lit-html/lit-html.js";
-
-/*
-	lit-html directive that removes and attribute if it is undefined
-*/
-export default directive(value => part => {
-	if ((value === undefined) && part instanceof AttributePart) {
-		if (value !== part.value) {
-			const name = part.committer.name;
-			part.committer.element.removeAttribute(name);
-		}
-	} else if (part.committer && part.committer.element && part.committer.element.getAttribute(part.committer.name) === value) {
-		part.setValue(noChange);
-	} else {
-		part.setValue(value);
-	}
-});

package/src/renderer/scopeHTML.js

@@ -1,32 +0,0 @@
-const cache = new Map();
-
-const scopeHTML = (strings, tags, suffix) => {
-	if (suffix && tags && tags.length) {
-		strings = strings.map(string => {
-			if (cache.has(string)) {
-				return cache.get(string);
-			}
-
-			/*
-			const allTags = [...string.matchAll(/<(ui5-.*?)[> ]/g)].map(x => x[1]);
-			allTags.forEach(t => {
-				if (!tags.includes(t)) {
-					throw new Error(`${t} not found in ${string}`);
-					// console.log(t, " in ", string);
-				}
-			});
-			*/
-
-			let result = string;
-			tags.forEach(tag => {
-				result = result.replace(new RegExp(`(</?)(${tag})(/?[> \t\n])`, "g"), `$1$2-${suffix}$3`);
-			});
-			cache.set(string, result);
-			return result;
-		});
-	}
-
-	return strings;
-};
-
-export default scopeHTML;