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

package/src/util/encodeCSS.js

@@ -0,0 +1,24 @@
+const rCSS = /[\x00-\x2f\x3a-\x40\x5b-\x60\x7b-\xff\u2028\u2029][0-9A-Fa-f]?/g; // eslint-disable-line
+
+const toHex = (iChar, iLength) => {
+	let sHex = iChar.toString(16);
+	if (iLength) {
+		sHex = sHex.padStart(iLength, "0");
+	}
+	return sHex;
+};
+
+const fnCSS = sChar => {
+	const iChar = sChar.charCodeAt(0);
+	if (sChar.length === 1) {
+		return `\\${toHex(iChar)}`;
+	}
+
+	return `\\${toHex(iChar)} ${sChar.substr(1)}`;
+};
+
+const encodeCSS = string => {
+	return string.replace(rCSS, fnCSS);
+};
+
+export default encodeCSS;

package/src/util/getActiveElement.js

@@ -0,0 +1,11 @@
+const getActiveElement = () => {
+	let element = document.activeElement;
+
+	while (element && element.shadowRoot && element.shadowRoot.activeElement) {
+		element = element.shadowRoot.activeElement;
+	}
+
+	return element;
+};
+
+export default getActiveElement;

package/src/util/getClassCopy.js

@@ -0,0 +1,10 @@
+const getClassCopy = (klass, constructorCallback) => {
+	return class classCopy extends klass {
+		constructor() {
+			super();
+			constructorCallback && constructorCallback();
+		}
+	};
+};
+
+export default getClassCopy;

package/src/util/getEffectiveContentDensity.js

@@ -0,0 +1,5 @@
+const GLOBAL_CONTENT_DENSITY_CSS_VAR = "--_ui5_content_density";
+
+const getEffectiveContentDensity = el => getComputedStyle(el).getPropertyValue(GLOBAL_CONTENT_DENSITY_CSS_VAR);
+
+export default getEffectiveContentDensity;

package/src/util/getSingletonElementInstance.js

@@ -0,0 +1,13 @@
+const getSingletonElementInstance = (tag, parentElement = document.body) => {
+	let el = document.querySelector(tag);
+
+	if (el) {
+		return el;
+	}
+
+	el = document.createElement(tag);
+
+	return parentElement.insertBefore(el, parentElement.firstChild);
+};
+
+export default getSingletonElementInstance;

package/src/util/isElementInView.js

@@ -0,0 +1,15 @@
+/**
+ * Determines if the element is within the viewport.
+ * @param el {HTMLElement}
+ */
+const isElementInView = el => {
+	const rect = el.getBoundingClientRect();
+
+	return (
+		rect.top >= 0 && rect.left >= 0
+			&& rect.bottom <= (window.innerHeight || document.documentElement.clientHeight)
+			&& rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+	);
+};
+
+export default isElementInView;

package/src/util/isNodeHidden.js

@@ -3,11 +3,7 @@ const isNodeHidden = node => {
 		return false;
 	}
 
-	const rect = node.getBoundingClientRect();
-
-	return (node.offsetWidth <= 0 && node.offsetHeight <= 0)
-		|| node.style.visibility === "hidden"
-		|| (rect.width === 0 && 0 && rect.height === 0);
+	return (node.offsetWidth <= 0 && node.offsetHeight <= 0) || node.style.visibility === "hidden";
 };
 
 export default isNodeHidden;

package/src/util/isNodeTabbable.js

@@ -15,14 +15,14 @@ const isNodeTabbable = node => {
 		return false;
 	}
 
-	if (nodeName === "a" || /input|select|textarea|button|object/.test(nodeName)) {
-		return !node.disabled;
-	}
-
 	const tabIndex = node.getAttribute("tabindex");
 	if (tabIndex !== null && tabIndex !== undefined) {
 		return parseInt(tabIndex) >= 0;
 	}
+
+	if (nodeName === "a" || /input|select|textarea|button|object/.test(nodeName)) {
+		return !node.disabled;
+	}
 };
 
 export default isNodeTabbable;

package/src/util/isValidPropertyName.js

@@ -1,6 +1,12 @@
 // Note: disabled is present in IE so we explicitly allow it here.
-// Others, such as ariaLabel, we explicitly override, so valid too
-const whitelist = ["disabled", "ariaLabel"];
+// Others, such as title/hidden, we explicitly override, so valid too
+const allowList = [
+	"disabled",
+	"title",
+	"hidden",
+	"role",
+	"draggable",
+];
 
 /**
  * Checks whether a property name is valid (does not collide with existing DOM API properties)
@@ -9,7 +15,7 @@ const whitelist = ["disabled", "ariaLabel"];
  * @returns {boolean}
  */
 const isValidPropertyName = name => {
-	if (whitelist.includes(name)) {
+	if (allowList.includes(name) || name.startsWith("aria")) {
 		return true;
 	}
 	const classes = [

package/src/util/setToArray.js

@@ -0,0 +1,10 @@
+// This is needed as IE11 doesn't have Set.prototype.keys/values/entries, so [...mySet.values()] is not an option
+const setToArray = s => {
+	const arr = [];
+	s.forEach(item => {
+		arr.push(item);
+	});
+	return arr;
+};
+
+export default setToArray;

package/used-modules.txt

@@ -0,0 +1,7 @@
+# Needed files from OpenUI5
+
+sap/base/util/now.js
+sap/base/Log.js
+sap/base/assert.js
+sap/base/security/URLListValidator.js
+sap/base/security/sanitizeHTML.js

package/bundle.es5.js

@@ -1,28 +0,0 @@
-// ES5 bundle targets IE11 only
-import "./dist/features/browsersupport/IE11.js";
-
-import "./bundle.esm.js";
-
-import { getAnimationMode } from "./dist/config/AnimationMode.js";
-import { getLanguage } from "./dist/config/Language.js";
-import { getCalendarType } from "./dist/config/CalendarType.js";
-import { getTheme, setTheme } from "./dist/config/Theme.js";
-import { getNoConflict, setNoConflict } from "./dist/config/NoConflict.js";
-import { getRTL } from "./dist/config/RTL.js";
-import { getFirstDayOfWeek } from "./dist/config/FormatSettings.js";
-import { getRegisteredNames as getIconNames } from  "./dist/SVGIconRegistry.js"
-const configuration = {
-	getAnimationMode,
-	getLanguage,
-	getTheme,
-	setTheme,
-	getNoConflict,
-	setNoConflict,
-	getCalendarType,
-	getRTL,
-	getFirstDayOfWeek,
-};
-export {
-	configuration,
-	getIconNames,
-};

package/dist/SVGIconRegistry.js

@@ -1,60 +0,0 @@
-const registry = new Map();
-const iconCollectionPromises = new Map();
-
-const ICON_NOT_FOUND = "ICON_NOT_FOUND";
-const DEFAULT_COLLECTION = "SAP-icons";
-
-const calcKey = (name, collection) => {
-	// silently support ui5-compatible URIs
-	if (name.startsWith("sap-icon://")) {
-		name = name.replace("sap-icon://", "");
-		[name, collection] = name.split("/").reverse();
-	}
-	collection = collection || DEFAULT_COLLECTION;
-	return `${collection}:${name}`;
-};
-
-const registerIcon = (name, { pathData, accData, collection } = {}) => {
-	const key = calcKey(name, collection);
-	registry.set(key, { pathData, accData });
-};
-
-const getIconDataSync = (name, collection = DEFAULT_COLLECTION) => {
-	const key = calcKey(name, collection);
-	return registry.get(key);
-};
-
-const getIconData = async (name, collection = DEFAULT_COLLECTION) => {
-	const key = calcKey(name, collection);
-
-	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(key);
-};
-
-const getRegisteredNames = async () => {
-	if (iconCollectionPromises.has(DEFAULT_COLLECTION)) {
-		await iconCollectionPromises.get(DEFAULT_COLLECTION);
-	}
-	return Array.from(registry.keys()).map(k => k.split(":")[1]);
-};
-
-const registerCollectionPromise = (collection, promise) => {
-	iconCollectionPromises.set(collection, promise);
-};
-
-export {
-	getIconData,
-	getIconDataSync,
-	registerIcon,
-	getRegisteredNames,
-	registerCollectionPromise,
-};

package/dist/boot.js

@@ -1,32 +0,0 @@
-import whenDOMReady from "./util/whenDOMReady.js";
-import insertFontFace from "./FontFace.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();
-		await whenPolyfillLoaded();
-		resolve();
-	});
-
-	return bootPromise;
-};
-
-export default boot;

package/dist/compatibility/DOMObserver.js

@@ -1,62 +0,0 @@
-// Shorthands
-const w = window;
-
-// Map of observer objects per dom node
-const observers = new WeakMap();
-
-/**
- * Implements universal DOM node observation methods.
- */
-class DOMObserver {
-	constructor() {
-		throw new Error("Static class");
-	}
-
-	/**
-	 * This function abstracts out mutation observer usage inside shadow DOM.
-	 * For native shadow DOM the native mutation observer is used.
-	 * When the polyfill is used, the observeChildren ShadyDOM method is used instead.
-	 *
-	 * @throws Exception
-	 * Note: does not allow several mutation observers per node. If there is a valid use-case, this behavior can be changed.
-	 *
-	 * @param node
-	 * @param callback
-	 * @param options - Only used for the native mutation observer
-	 */
-	static observeDOMNode(node, callback, options) {
-		let observerObject = observers.get(node);
-		if (observerObject) {
-			throw new Error("A mutation/ShadyDOM observer is already assigned to this node.");
-		}
-
-		if (w.ShadyDOM) {
-			observerObject = w.ShadyDOM.observeChildren(node, callback);
-		} else {
-			observerObject = new MutationObserver(callback);
-			observerObject.observe(node, options);
-		}
-
-		observers.set(node, observerObject);
-	}
-
-	/**
-	 * De-registers the mutation observer, depending on its type
-	 * @param node
-	 */
-	static unobserveDOMNode(node) {
-		const observerObject = observers.get(node);
-		if (!observerObject) {
-			return;
-		}
-
-		if (observerObject instanceof MutationObserver) {
-			observerObject.disconnect();
-		} else {
-			w.ShadyDOM.unobserveChildren(observerObject);
-		}
-		observers.delete(node);
-	}
-}
-
-export default DOMObserver;

package/dist/compatibility/patchNodeValue.js

@@ -1,24 +0,0 @@
-const patchNodeValue = () => {
-	if (!window.ShadyDOM) {
-		return;
-	}
-	const nativeNodeValue = Object.getOwnPropertyDescriptor(Node.prototype, "nodeValue");
-	Object.defineProperty(Node.prototype, "nodeValue", {
-		get() {
-			return nativeNodeValue.get.apply(this);
-		},
-		set(text) {
-			nativeNodeValue.set.apply(this, arguments); // eslint-disable-line
-
-			// Call manually the mutation observer callback
-			const parentElement = this.parentNode;
-			if (parentElement instanceof HTMLElement && parentElement.isUI5Element) {
-				parentElement._processChildren();
-			}
-		},
-	});
-};
-
-patchNodeValue();
-
-export default {};

package/dist/compatibility/whenPolyfillLoaded.js

@@ -1,26 +0,0 @@
-let polyfillLoadedPromise;
-
-const whenPolyfillLoaded = () => {
-	if (polyfillLoadedPromise) {
-		return polyfillLoadedPromise;
-	}
-
-	polyfillLoadedPromise = new Promise(resolve => {
-		if (window.WebComponents
-			&& !window.WebComponents.ready
-			&& window.WebComponents.waitFor) {
-			// the polyfill loader is present
-			window.WebComponents.waitFor(() => {
-				// the polyfills are loaded, safe to execute code depending on their APIs
-				resolve();
-			});
-		} else {
-			// polyfill loader missing, modern browsers only
-			resolve();
-		}
-	});
-
-	return polyfillLoadedPromise;
-};
-
-export default whenPolyfillLoaded;

package/dist/delegate/CustomResize.js

@@ -1,78 +0,0 @@
-const INTERVAL = 300;
-
-class CustomResize {
-	static initialize() {
-		CustomResize.initialized = false;
-		CustomResize.resizeInterval = undefined;
-		CustomResize.resizeListeners = new Map();
-	}
-
-	static attachListener(ref, callback) {
-		const observedObject = CustomResize.resizeListeners.get(ref);
-		const existingCallbacks = observedObject ? observedObject.callbacks : [];
-
-		CustomResize.resizeListeners.set(ref, {
-			width: ref ? ref.offsetWidth : 0,
-			height: ref ? ref.offsetHeight : 0,
-			callbacks: existingCallbacks.concat(callback),
-		});
-
-		CustomResize.initListener();
-	}
-
-	static initListener() {
-		if (CustomResize.resizeListeners.size > 0 && !CustomResize.initialized) {
-			CustomResize.resizeInterval = setInterval(CustomResize.checkListeners.bind(CustomResize), INTERVAL);
-		}
-	}
-
-	static checkListeners() {
-		CustomResize.resizeListeners.forEach((entry, ref) => {
-			const changed = CustomResize.checkSizes(entry, ref);
-
-			if (changed || (entry && !entry._hasBeenRendered)) {
-				CustomResize.updateSizes(entry, ref.offsetWidth, ref.offsetHeight);
-				entry.callbacks.forEach(el => el());
-				entry._hasBeenRendered = true;
-			}
-		});
-	}
-
-	static updateSizes(sizes, newWidth, newHeight) {
-		sizes.width = newWidth;
-		sizes.height = newHeight;
-	}
-
-	static checkSizes(entry, ref) {
-		const oldHeight = entry.height;
-		const oldWidth = entry.width;
-		const newHeight = ref.offsetHeight;
-		const newWidth = ref.offsetWidth;
-
-		return ((oldHeight !== newHeight) || oldWidth !== newWidth);
-	}
-
-	static detachListener(ref, callback) {
-		const listenerObject = CustomResize.resizeListeners.get(ref);
-		const callbacks = listenerObject ? listenerObject.callbacks : [];
-		const filteredCallbacks = callbacks.filter(fn => fn !== callback);
-
-		if (!listenerObject || (callbacks.length === filteredCallbacks.length && callbacks.length !== 0)) {
-			return;
-		}
-
-		CustomResize.resizeListeners.set(ref, Object.assign(listenerObject, { callbacks: filteredCallbacks }));
-
-		if (!filteredCallbacks.length) {
-			listenerObject.callbacks = null;
-			CustomResize.resizeListeners.delete(ref);
-		}
-
-		if (CustomResize.resizeListeners.size === 0) {
-			CustomResize.initialized = false;
-			clearInterval(CustomResize.resizeInterval);
-		}
-	}
-}
-
-export default CustomResize;

package/dist/delegate/NativeResize.js

@@ -1,44 +0,0 @@
-class NativeResize {
-	static initialize() {
-		NativeResize.resizeObserver = new window.ResizeObserver(entries => {
-			// call attached callbacks
-			entries.forEach(entry => {
-				const callbacks = NativeResize.observedObjects.get(entry.target);
-
-				callbacks.forEach(el => el());
-			});
-		});
-
-		NativeResize.observedObjects = new Map();
-	}
-
-	static attachListener(ref, callback) {
-		const observedDOMs = NativeResize.observedObjects;
-		const callbacks = observedDOMs.get(ref) || [];
-
-		// if no callbacks has been added for this ref - start observing it
-		if (!callbacks.length) {
-			NativeResize.resizeObserver.observe(ref);
-		}
-
-		// save the callbacks in an array
-		observedDOMs.set(ref, [...callbacks, callback]);
-	}
-
-	static detachListener(ref, callback) {
-		const callbacks = NativeResize.observedObjects.get(ref) || [];
-		const filteredCallbacks = callbacks.filter(fn => fn !== callback);
-
-		if (!callbacks.length || (callbacks.length === filteredCallbacks.length && callbacks.length !== 0)) {
-			return;
-		}
-
-		NativeResize.observedObjects.set(ref, filteredCallbacks);
-
-		if (!filteredCallbacks.length) {
-			NativeResize.resizeObserver.unobserve(ref);
-		}
-	}
-}
-
-export default NativeResize;

package/dist/features/browsersupport/Edge.js

@@ -1,6 +0,0 @@
-// URLSearchParams
-import "url-search-params-polyfill/index.js";
-
-
-// "pseudo mutation observer" fix for nodeValue
-import "../../compatibility/patchNodeValue.js";

package/dist/features/browsersupport/IE11.js

@@ -1,41 +0,0 @@
-// CSS Custom Properties
-import cssVars from "css-vars-ponyfill/dist/css-vars-ponyfill.esm.js";
-
-// String
-import "../../thirdparty/es6-string-methods.js";
-
-// Object
-import "../../thirdparty/Object.entries.js";
-
-// Array
-import "../../thirdparty/Array.prototype.fill.js";
-import "../../thirdparty/Array.prototype.find.js";
-import "../../thirdparty/Array.prototype.includes.js";
-
-// Map
-import "../../thirdparty/Map.prototype.keys.js";
-
-// Number
-import "../../thirdparty/Number.isInteger.js";
-import "../../thirdparty/Number.isNaN.js";
-import "../../thirdparty/Number.parseInt.js";
-
-// Element
-import "../../thirdparty/Element.prototype.matches.js";
-import "../../thirdparty/Element.prototype.closest.js";
-
-// WeakSet
-import "../../thirdparty/WeakSet.js";
-
-// fetch
-import "../../thirdparty/fetch.js";
-
-// async - await
-import "regenerator-runtime/runtime.js";
-
-// Plus all polyfills needed for Edge are also needed for IE11
-import "./Edge.js";
-
-window.CSSVarsPonyfill = {
-	cssVars,
-};

package/dist/features/browsersupport/IE11WithWebComponentsPolyfill.js

@@ -1,5 +0,0 @@
-// All web components polyfills (including platform) with "window" passed as argument to the iife
-import "../../thirdparty/webcomponents-sd-ce-pf.js";
-
-// All IE11 polyfills, needed by the project itself
-import "./IE11.js";

package/dist/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);
-	}
-});