@ui5/webcomponents-base 0.0.0-0fcda382e → 0.0.0-11d529e8a

package/dist/delegate/ScrollEnablement.js

@@ -1,9 +1,9 @@
-import { isPhone } from "../Device.js";
+import { supportsTouch } from "../Device.js";
 import EventProvider from "../EventProvider.js";
 import scroll from "../animations/scroll.js";
 
 const scrollEventName = "scroll";
-const touchEndEventName = isPhone() ? "touchend" : "mouseup";
+const touchEndEventName = supportsTouch() ? "touchend" : "mouseup";
 
 class ScrollEnablement extends EventProvider {
 	constructor(containerComponent) {
@@ -13,7 +13,7 @@ class ScrollEnablement extends EventProvider {
 		this.mouseUp = this.ontouchend.bind(this);
 		this.touchStart = this.ontouchstart.bind(this);
 
-		this.isPhone = isPhone();
+		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
@@ -25,7 +25,7 @@ class ScrollEnablement extends EventProvider {
 		this.startX = 0;
 		this.startY = 0;
 
-		if (this.isPhone) {
+		if (this.supportsTouch) {
 			containerComponent.addEventListener("touchstart", this.touchStart, { passive: true });
 			containerComponent.addEventListener("touchmove", this.mouseMove, { passive: true });
 			containerComponent.addEventListener("touchend", this.mouseUp, { passive: true });
@@ -42,12 +42,41 @@ class ScrollEnablement extends EventProvider {
 		return this._container;
 	}
 
-	scrollTo(left, top) {
+	/**
+	 * 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) {
+	move(dx, dy, disableAnimation) {
+		if (disableAnimation) {
+			this._container.scrollLeft += dx;
+			this._container.scrollTop += dy;
+			return;
+		}
+
 		return scroll({
 			element: this._container,
 			dx,
@@ -65,17 +94,17 @@ class ScrollEnablement extends EventProvider {
 
 	_isTouchInside(touch) {
 		const rect = this._container.getBoundingClientRect();
-		const x = this.isPhone ? touch.clientX : touch.x;
-		const y = this.isPhone ? touch.clientY : touch.y;
+		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.isPhone ? event.touches[0] : null;
+		const touch = this.supportsTouch ? event.touches[0] : null;
 
-		if (!this.isPhone) {
+		if (!this.supportsTouch) {
 			document.addEventListener("mouseup", this.mouseUp, { passive: true });
 			document.addEventListener("mousemove", this.mouseMove, { passive: true });
 		} else {
@@ -84,10 +113,10 @@ class ScrollEnablement extends EventProvider {
 			this.startY = touch.pageY;
 		}
 
-		this._prevDragX = this.isPhone ? touch.pageX : event.x;
-		this._prevDragY = this.isPhone ? touch.pageY : event.y;
+		this._prevDragX = this.supportsTouch ? touch.pageX : event.x;
+		this._prevDragY = this.supportsTouch ? touch.pageY : event.y;
 
-		this._canScroll = this._isTouchInside(this.isPhone ? touch : event);
+		this._canScroll = this._isTouchInside(this.supportsTouch ? touch : event);
 	}
 
 	ontouchmove(event) {
@@ -96,10 +125,10 @@ class ScrollEnablement extends EventProvider {
 		}
 
 		const container = this._container;
-		const touch = this.isPhone ? event.touches[0] : null;
+		const touch = this.supportsTouch ? event.touches[0] : null;
 
-		const dragX = this.isPhone ? touch.pageX : event.x;
-		const dragY = this.isPhone ? touch.pageY : event.y;
+		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;
@@ -117,7 +146,7 @@ class ScrollEnablement extends EventProvider {
 	}
 
 	ontouchend(event) {
-		if (this.isPhone) {
+		if (this.supportsTouch) {
 			const deltaX = Math.abs(event.changedTouches[0].pageX - this.startX);
 			const deltaY = Math.abs(event.changedTouches[0].pageY - this.startY);
 
@@ -131,8 +160,8 @@ class ScrollEnablement extends EventProvider {
 		}
 
 		const container = this._container;
-		const dragX = this.isPhone ? event.changedTouches[0].pageX : event.x;
-		const dragY = this.isPhone ? event.changedTouches[0].pageY : event.y;
+		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;
@@ -149,7 +178,7 @@ class ScrollEnablement extends EventProvider {
 		this._prevDragX = dragX;
 		this._prevDragY = dragY;
 
-		if (!this.isPhone) {
+		if (!this.supportsTouch) {
 			document.removeEventListener("mousemove", this.mouseMove, { passive: true });
 			document.removeEventListener("mouseup", this.mouseUp);
 		}

package/dist/features/OpenUI5Support.js

@@ -1,32 +1,41 @@
 import { registerFeature } from "../FeaturesRegistry.js";
 import { setTheme } from "../config/Theme.js";
+import { getCurrentZIndex } from "../util/PopupUtils.js";
 
-const sap = window.sap;
-const core = sap && sap.ui && typeof sap.ui.getCore === "function" && sap.ui.getCore();
+const getCore = () => {
+	const sap = window.sap;
+	const core = sap && sap.ui && typeof sap.ui.getCore === "function" && sap.ui.getCore();
+	return core;
+};
 
 const isLoaded = () => {
-	return !!core;
+	return !!getCore();
 };
 
 const init = () => {
+	const core = getCore();
 	if (!core) {
 		return Promise.resolve();
 	}
 
 	return new Promise(resolve => {
 		core.attachInit(() => {
-			sap.ui.require(["sap/ui/core/LocaleData"], resolve);
+			window.sap.ui.require(["sap/ui/core/LocaleData", "sap/ui/core/Popup"], (LocaleData, Popup) => {
+				Popup.setInitialZIndex(getCurrentZIndex());
+				resolve();
+			});
 		});
 	});
 };
 
 const getConfigurationSettingsObject = () => {
+	const core = getCore();
 	if (!core) {
 		return;
 	}
 
 	const config = core.getConfiguration();
-	const LocaleData = sap.ui.require("sap/ui/core/LocaleData");
+	const LocaleData = window.sap.ui.require("sap/ui/core/LocaleData");
 
 	return {
 		animationMode: config.getAnimationMode(),
@@ -41,16 +50,18 @@ const getConfigurationSettingsObject = () => {
 };
 
 const getLocaleDataObject = () => {
+	const core = getCore();
 	if (!core) {
 		return;
 	}
 
 	const config = core.getConfiguration();
-	const LocaleData = sap.ui.require("sap/ui/core/LocaleData");
+	const LocaleData = window.sap.ui.require("sap/ui/core/LocaleData");
 	return LocaleData.getInstance(config.getLocale())._get();
 };
 
 const listenForThemeChange = () => {
+	const core = getCore();
 	const config = core.getConfiguration();
 	core.attachThemeChanged(async () => {
 		await setTheme(config.getTheme());
@@ -58,6 +69,7 @@ const listenForThemeChange = () => {
 };
 
 const attachListeners = () => {
+	const core = getCore();
 	if (!core) {
 		return;
 	}
@@ -66,6 +78,7 @@ const attachListeners = () => {
 };
 
 const cssVariablesLoaded = () => {
+	const core = getCore();
 	if (!core) {
 		return;
 	}
@@ -75,7 +88,27 @@ const cssVariablesLoaded = () => {
 		return;
 	}
 
-	return !!link.href.match(/\/css-variables\.css/);
+	return !!link.href.match(/\/css(-|_)variables\.css/);
+};
+
+const getNextZIndex = () => {
+	const core = getCore();
+	if (!core) {
+		return;
+	}
+
+	const Popup = window.sap.ui.require("sap/ui/core/Popup");
+	return Popup.getNextZIndex();
+};
+
+const setInitialZIndex = () => {
+	const core = getCore();
+	if (!core) {
+		return;
+	}
+
+	const Popup = window.sap.ui.require("sap/ui/core/Popup");
+	Popup.setInitialZIndex(getCurrentZIndex());
 };
 
 const OpenUI5Support = {
@@ -85,6 +118,8 @@ const OpenUI5Support = {
 	getLocaleDataObject,
 	attachListeners,
 	cssVariablesLoaded,
+	getNextZIndex,
+	setInitialZIndex,
 };
 
 registerFeature("OpenUI5Support", OpenUI5Support);

package/dist/generated/AssetParameters.js

@@ -1,4 +1,4 @@
-const assetParameters = {"themes":{"default":"sap_fiori_3","all":["sap_fiori_3","sap_fiori_3_dark","sap_belize","sap_belize_hcb","sap_belize_hcw"]},"languages":{"default":"en","all":["ar","bg","ca","cs","da","de","el","en","es","et","fi","fr","hi","hr","hu","it","iw","ja","kk","ko","lt","lv","ms","nl","no","pl","pt","ro","ru","sh","sk","sl","sv","th","tr","uk","vi","zh_CN","zh_TW"]},"locales":{"default":"en","all":["ar","ar_EG","ar_SA","bg","ca","cs","da","de","de_AT","de_CH","el","el_CY","en","en_AU","en_GB","en_HK","en_IE","en_IN","en_NZ","en_PG","en_SG","en_ZA","es","es_AR","es_BO","es_CL","es_CO","es_MX","es_PE","es_UY","es_VE","et","fa","fi","fr","fr_BE","fr_CA","fr_CH","fr_LU","he","hi","hr","hu","id","it","it_CH","ja","kk","ko","lt","lv","ms","nb","nl","nl_BE","pl","pt","pt_PT","ro","ru","ru_UA","sk","sl","sr","sv","th","tr","uk","vi","zh_CN","zh_HK","zh_SG","zh_TW"]}};
+const assetParameters = {"themes":{"default":"sap_fiori_3","all":["sap_fiori_3","sap_fiori_3_dark","sap_belize","sap_belize_hcb","sap_belize_hcw","sap_fiori_3_hcb","sap_fiori_3_hcw","sap_horizon"]},"languages":{"default":"en","all":["ar","bg","ca","cs","cy","da","de","el","en","en_GB","en_US_sappsd","en_US_saprigi","en_US_saptrc","es","es_MX","et","fi","fr","fr_CA","hi","hr","hu","in","it","iw","ja","kk","ko","lt","lv","ms","nl","no","pl","pt_PT","pt","ro","ru","sh","sk","sl","sv","th","tr","uk","vi","zh_CN","zh_TW"]},"locales":{"default":"en","all":["ar","ar_EG","ar_SA","bg","ca","cs","da","de","de_AT","de_CH","el","el_CY","en","en_AU","en_GB","en_HK","en_IE","en_IN","en_NZ","en_PG","en_SG","en_ZA","es","es_AR","es_BO","es_CL","es_CO","es_MX","es_PE","es_UY","es_VE","et","fa","fi","fr","fr_BE","fr_CA","fr_CH","fr_LU","he","hi","hr","hu","id","it","it_CH","ja","kk","ko","lt","lv","ms","nb","nl","nl_BE","pl","pt","pt_PT","ro","ru","ru_UA","sk","sl","sr","sv","th","tr","uk","vi","zh_CN","zh_HK","zh_SG","zh_TW"]}};
 
 const DEFAULT_THEME = assetParameters.themes.default;
 const DEFAULT_LANGUAGE = assetParameters.languages.default;

package/dist/getSharedResource.js

@@ -0,0 +1,30 @@
+import getSingletonElementInstance from "./util/getSingletonElementInstance.js";
+
+const getSharedResourcesInstance = () => getSingletonElementInstance("ui5-shared-resources", document.head);
+
+/**
+ * Use this method to initialize/get resources that you would like to be shared among UI5 Web Components runtime instances.
+ * The data will be accessed via a singleton "ui5-shared-resources" HTML element in the "head" element of the page.
+ *
+ * @public
+ * @param namespace Unique ID of the resource, may contain "." to denote hierarchy
+ * @param initialValue Object or primitive that will be used as an initial value if the resource does not exist
+ * @returns {*}
+ */
+const getSharedResource = (namespace, initialValue) => {
+	const parts = namespace.split(".");
+	let current = getSharedResourcesInstance();
+
+	for (let i = 0; i < parts.length; i++) {
+		const part = parts[i];
+		const lastPart = i === parts.length - 1;
+		if (!Object.prototype.hasOwnProperty.call(current, part)) {
+			current[part] = lastPart ? initialValue : {};
+		}
+		current = current[part];
+	}
+
+	return current;
+};
+
+export default getSharedResource;

package/dist/i18nBundle.js

@@ -1,20 +1,39 @@
-import { fetchI18nBundle, getI18nBundleData } from "./asset-registries/i18n.js";
+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
+	 *
+	 * @public
+	 * @param {Object|String} textObj key/defaultText pair or just the key
+	 * @param params Values for the placeholders
+	 * @returns {*}
+	 */
 	getText(textObj, ...params) {
-		if (!textObj || !textObj.key || !textObj.defaultText) {
+		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;
+		if (bundle && !bundle[textObj.key]) {
+			console.warn(`Key ${textObj.key} not found in the i18n bundle, the default text will be used`); // eslint-disable-line
+		}
+		const messageText = bundle && bundle[textObj.key] ? bundle[textObj.key] : (textObj.defaultText || textObj.key);
 
 		return formatMessage(messageText, params);
 	}
@@ -30,4 +49,8 @@ const getI18nBundle = packageName => {
 	return i18nBundle;
 };
 
-export { fetchI18nBundle, getI18nBundle };
+export {
+	registerI18nLoader,
+	fetchI18nBundle,
+	getI18nBundle,
+};

package/dist/isLegacyBrowser.js

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

package/dist/locale/RTLAwareRegistry.js

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

package/dist/locale/applyDirection.js

@@ -0,0 +1,17 @@
+import { reRenderAllUI5Elements } from "../Render.js";
+import { fireDirectionChange } from "./directionChange.js";
+
+/**
+ * Re-renders all RTL-aware UI5 Elements.
+ * Call this method whenever you change the "dir" property anywhere in your HTML page
+ * Example: document.body.dir = "rtl"; applyDirection();
+ *
+ * @returns {Promise<void>}
+ */
+const applyDirection = async () => {
+	const listenersResults = fireDirectionChange();
+	await Promise.all(listenersResults);
+	await reRenderAllUI5Elements({ rtlAware: true });
+};
+
+export default applyDirection;

package/dist/locale/directionChange.js

@@ -0,0 +1,32 @@
+import EventProvider from "../EventProvider.js";
+
+const eventProvider = new EventProvider();
+const DIR_CHANGE = "directionChange";
+
+/**
+ * Attach a callback that will be executed whenever the application calls the "applyDirection" function
+ * @public
+ * @param listener
+ */
+const attachDirectionChange = listener => {
+	eventProvider.attachEvent(DIR_CHANGE, listener);
+};
+
+/**
+ * Detach a callback that was passed with "attachDirectionChange"
+ * @public
+ * @param listener
+ */
+const detachDirectionChange = listener => {
+	eventProvider.detachEvent(DIR_CHANGE, listener);
+};
+
+const fireDirectionChange = () => {
+	return eventProvider.fireEvent(DIR_CHANGE);
+};
+
+export {
+	attachDirectionChange,
+	detachDirectionChange,
+	fireDirectionChange,
+};

package/dist/locale/getEffectiveDir.js

@@ -0,0 +1,28 @@
+import { getRTL } from "../config/RTL.js";
+
+const GLOBAL_DIR_CSS_VAR = "--_ui5_dir";
+
+const getEffectiveDir = element => {
+	const doc = window.document;
+	const dirValues = ["ltr", "rtl"]; // exclude "auto" and "" from all calculations
+	const locallyAppliedDir = getComputedStyle(element).getPropertyValue(GLOBAL_DIR_CSS_VAR);
+
+	// In that order, inspect the CSS Var (for modern browsers), the element itself, html and body (for IE fallback)
+	if (dirValues.includes(locallyAppliedDir)) {
+		return locallyAppliedDir;
+	}
+	if (dirValues.includes(element.dir)) {
+		return element.dir;
+	}
+	if (dirValues.includes(doc.documentElement.dir)) {
+		return doc.documentElement.dir;
+	}
+	if (dirValues.includes(doc.body.dir)) {
+		return doc.body.dir;
+	}
+
+	// Finally, check the configuration for explicitly set RTL or language-implied RTL
+	return getRTL() ? "rtl" : undefined;
+};
+
+export default getEffectiveDir;

package/dist/locale/getLocale.js

@@ -2,10 +2,20 @@ import detectNavigatorLanguage from "../util/detectNavigatorLanguage.js";
 import { getLanguage as getConfigLanguage } from "../config/Language.js";
 import Locale from "./Locale.js";
 
+const cache = new Map();
+
+const getLocaleInstance = lang => {
+	if (!cache.has(lang)) {
+		cache.set(lang, new Locale(lang));
+	}
+
+	return cache.get(lang);
+};
+
 const convertToLocaleOrNull = lang => {
 	try {
 		if (lang && typeof lang === "string") {
-			return new Locale(lang);
+			return getLocaleInstance(lang);
 		}
 	} catch (e) {
 		// ignore
@@ -22,7 +32,7 @@ const getLocale = lang => {
 	}
 
 	if (getConfigLanguage()) {
-		return new Locale(getConfigLanguage());
+		return getLocaleInstance(getConfigLanguage());
 	}
 
 	return convertToLocaleOrNull(detectNavigatorLanguage());

package/dist/locale/languageChange.js

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

@@ -1,15 +1,32 @@
-import { html, render } from "lit-html/lit-html.js";
+import { render } from "lit-html";
+import {
+	html,
+	svg,
+	unsafeStatic,
+} from "lit-html/static.js";
 
-const litRender = (templateResult, domNode, styles, { eventContext } = {}) => {
+const litRender = (templateResult, domNode, styles, { host } = {}) => {
 	if (styles) {
 		templateResult = html`<style>${styles}</style>${templateResult}`;
 	}
-	render(templateResult, domNode, { eventContext });
+	render(templateResult, domNode, { host });
 };
 
-export { html, svg } from "lit-html/lit-html.js";
+const scopeTag = (tag, tags, suffix) => {
+	const resultTag = suffix && (tags || []).includes(tag) ? `${tag}-${suffix}` : tag;
+	return unsafeStatic(resultTag);
+};
+
+export {
+	html,
+	svg,
+	unsafeStatic,
+};
+export { scopeTag };
 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 { ifDefined } from "lit-html/directives/if-defined.js";
+export { unsafeHTML } from "lit-html/directives/unsafe-html.js";
 
 export default litRender;

package/dist/renderer/executeTemplate.js

@@ -0,0 +1,17 @@
+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;