@ui5/webcomponents-base 0.0.0-4180fe799 → 0.0.0-41ab6cd28

package/src/util/FocusableElements.js

@@ -1,77 +0,0 @@
-import isNodeHidden from "./isNodeHidden.js";
-import isNodeClickable from "./isNodeClickable.js";
-
-const isFocusTrap = el => {
-	return el.hasAttribute("data-ui5-focus-trap");
-};
-
-const getFirstFocusableElement = async container => {
-	if (!container || isNodeHidden(container)) {
-		return null;
-	}
-
-	return findFocusableElement(container, true);
-};
-
-const getLastFocusableElement = async container => {
-	if (!container || isNodeHidden(container)) {
-		return null;
-	}
-
-	return findFocusableElement(container, false);
-};
-
-const isElemFocusable = el => {
-	return el.hasAttribute("data-ui5-focus-redirect") || !isNodeHidden(el);
-};
-
-const findFocusableElement = async (container, forward) => {
-	let child;
-
-	if (container.shadowRoot) {
-		child = forward ? container.shadowRoot.firstChild : container.shadowRoot.lastChild;
-	} else if (container.assignedNodes && container.assignedNodes()) {
-		const assignedElements = container.assignedNodes();
-		child = forward ? assignedElements[0] : assignedElements[assignedElements.length - 1];
-	} else {
-		child = forward ? container.firstChild : container.lastChild;
-	}
-
-	let focusableDescendant;
-
-	/* eslint-disable no-await-in-loop */
-
-	while (child) {
-		const originalChild = child;
-
-		if (child.isUI5Element) {
-			child = await child.getFocusDomRefAsync();
-		}
-
-		if (!child) {
-			return null;
-		}
-
-		if (child.nodeType === 1 && isElemFocusable(child) && !isFocusTrap(child)) {
-			if (isNodeClickable(child)) {
-				return (child && typeof child.focus === "function") ? child : null;
-			}
-
-			focusableDescendant = await findFocusableElement(child, forward);
-			if (focusableDescendant) {
-				return (focusableDescendant && typeof focusableDescendant.focus === "function") ? focusableDescendant : null;
-			}
-		}
-
-		child = forward ? originalChild.nextSibling : originalChild.previousSibling;
-	}
-
-	/* eslint-enable no-await-in-loop */
-
-	return null;
-};
-
-export {
-	getFirstFocusableElement,
-	getLastFocusableElement,
-};

package/src/util/InvisibleMessage.js

@@ -1,58 +0,0 @@
-import InvisibleMessageMode from "../types/InvisibleMessageMode.js";
-import getSingletonElementInstance from "./getSingletonElementInstance.js";
-import { attachBoot } from "../Boot.js";
-
-let politeSpan;
-let assertiveSpan;
-
-attachBoot(() => {
-	if (politeSpan && assertiveSpan) {
-		return;
-	}
-
-	const styles = `position: absolute;
-	clip: rect(1px,1px,1px,1px);
-	user-select: none;
-	left: -1000px;
-	top: -1000px;
-	pointer-events: none;`;
-
-	politeSpan = document.createElement("span");
-	assertiveSpan = document.createElement("span");
-
-	politeSpan.classList.add("ui5-invisiblemessage-polite");
-	assertiveSpan.classList.add("ui5-invisiblemessage-assertive");
-
-	politeSpan.setAttribute("aria-live", "polite");
-	assertiveSpan.setAttribute("aria-live", "assertive");
-
-	politeSpan.setAttribute("role", "alert");
-	assertiveSpan.setAttribute("role", "alert");
-
-	politeSpan.style.cssText = styles;
-	assertiveSpan.style.cssText = styles;
-
-	getSingletonElementInstance("ui5-static-area").appendChild(politeSpan);
-	getSingletonElementInstance("ui5-static-area").appendChild(assertiveSpan);
-});
-
-/**
- * Inserts the string into the respective span, depending on the mode provided.
- *
- * @param {string} message String to be announced by the screen reader.
- * @param {sap.ui.core.InvisibleMessageMode} mode The mode to be inserted in the aria-live attribute.
- */
-const announce = (message, mode) => {
-	// If no type is presented, fallback to polite announcement.
-	const span = mode === InvisibleMessageMode.Assertive ? assertiveSpan : politeSpan;
-
-	// Set textContent to empty string in order to trigger screen reader's announcement.
-	span.textContent = "";
-	span.textContent = message;
-
-	if (mode !== InvisibleMessageMode.Assertive && mode !== InvisibleMessageMode.Polite) {
-		console.warn(`You have entered an invalid mode. Valid values are: "Polite" and "Assertive". The framework will automatically set the mode to "Polite".`); // eslint-disable-line
-	}
-};
-
-export default announce;

package/src/util/PopupUtils.js

@@ -1,93 +0,0 @@
-import getSharedResource from "../getSharedResource.js";
-import { getFeature } from "../FeaturesRegistry.js";
-import getActiveElement from "./getActiveElement.js";
-
-const PopupUtilsData = getSharedResource("PopupUtilsData", {});
-PopupUtilsData.currentZIndex = PopupUtilsData.currentZIndex || 100;
-
-const getFocusedElement = () => {
-	const element = getActiveElement();
-	return (element && typeof element.focus === "function") ? element : null;
-};
-
-const isFocusedElementWithinNode = node => {
-	const fe = getFocusedElement();
-
-	if (fe) {
-		return isNodeContainedWithin(node, fe);
-	}
-
-	return false;
-};
-
-const isNodeContainedWithin = (parent, child) => {
-	let currentNode = parent;
-
-	if (currentNode.shadowRoot) {
-		currentNode = Array.from(currentNode.shadowRoot.children).find(n => n.localName !== "style");
-	}
-
-	if (currentNode === child) {
-		return true;
-	}
-
-	const childNodes = currentNode.localName === "slot" ? currentNode.assignedNodes() : currentNode.children;
-
-	if (childNodes) {
-		return Array.from(childNodes).some(n => isNodeContainedWithin(n, child));
-	}
-};
-
-const isPointInRect = (x, y, rect) => {
-	return x >= rect.left && x <= rect.right
-		&& y >= rect.top && y <= rect.bottom;
-};
-
-const isClickInRect = (event, rect) => {
-	let x;
-	let y;
-
-	if (event.touches) {
-		const touch = event.touches[0];
-		x = touch.clientX;
-		y = touch.clientY;
-	} else {
-		x = event.clientX;
-		y = event.clientY;
-	}
-
-	return isPointInRect(x, y, rect);
-};
-
-const getClosedPopupParent = el => {
-	const parent = el.parentElement || (el.getRootNode && el.getRootNode().host);
-
-	if (parent && ((parent.showAt && parent.isUI5Element) || (parent.open && parent.isUI5Element) || parent === document.documentElement)) {
-		return parent;
-	}
-
-	return getClosedPopupParent(parent);
-};
-
-const getNextZIndex = () => {
-	const OpenUI5Support = getFeature("OpenUI5Support");
-	if (OpenUI5Support && OpenUI5Support.isLoaded()) { // use OpenUI5 for getting z-index values, if loaded
-		return OpenUI5Support.getNextZIndex();
-	}
-
-	PopupUtilsData.currentZIndex += 2;
-	return PopupUtilsData.currentZIndex;
-};
-
-const getCurrentZIndex = () => {
-	return PopupUtilsData.currentZIndex;
-};
-
-export {
-	getFocusedElement,
-	isClickInRect,
-	getClosedPopupParent,
-	getNextZIndex,
-	getCurrentZIndex,
-	isFocusedElementWithinNode,
-};

package/src/util/SlotsHelper.js

@@ -1,43 +0,0 @@
-/**
- * Determines the slot to which a node should be assigned
- * @param node Text node or HTML element
- * @returns {string}
- */
-const getSlotName = node => {
-	// Text nodes can only go to the default slot
-	if (!(node instanceof HTMLElement)) {
-		return "default";
-	}
-
-	// Discover the slot based on the real slot name (f.e. footer => footer, or content-32 => content)
-	const slot = node.getAttribute("slot");
-	if (slot) {
-		const match = slot.match(/^(.+?)-\d+$/);
-		return match ? match[1] : slot;
-	}
-
-	// Use default slot as a fallback
-	return "default";
-};
-
-const isSlot = el => el && el instanceof HTMLElement && el.localName === "slot";
-
-const getSlottedElements = el => {
-	if (isSlot(el)) {
-		return el.assignedNodes({ flatten: true }).filter(item => item instanceof HTMLElement);
-	}
-
-	return [el];
-};
-
-const getSlottedElementsList = elList => {
-	const reducer = (acc, curr) => acc.concat(getSlottedElements(curr));
-	return elList.reduce(reducer, []);
-};
-
-export {
-	getSlotName,
-	isSlot,
-	getSlottedElements,
-	getSlottedElementsList,
-};

package/src/util/StringHelper.js

@@ -1,26 +0,0 @@
-const kebabToCamelMap = new Map();
-const camelToKebabMap = new Map();
-
-const kebabToCamelCase = string => {
-	if (!kebabToCamelMap.has(string)) {
-		const result = toCamelCase(string.split("-"));
-		kebabToCamelMap.set(string, result);
-	}
-	return kebabToCamelMap.get(string);
-};
-
-const camelToKebabCase = string => {
-	if (!camelToKebabMap.has(string)) {
-		const result = string.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
-		camelToKebabMap.set(string, result);
-	}
-	return camelToKebabMap.get(string);
-};
-
-const toCamelCase = parts => {
-	return parts.map((string, index) => {
-		return index === 0 ? string.toLowerCase() : string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
-	}).join("");
-};
-
-export { kebabToCamelCase, camelToKebabCase };

package/src/util/TabbableElements.js

@@ -1,47 +0,0 @@
-import isNodeTabbable from "./isNodeTabbable.js";
-
-const getTabbableElements = node => {
-	return getTabbables(node.children);
-};
-
-const getLastTabbableElement = node => {
-	const tabbables = getTabbables(node.children);
-	return tabbables.length ? tabbables[tabbables.length - 1] : null;
-};
-
-const getTabbables = (nodes, tabbables) => {
-	const tabbablesNodes = tabbables || [];
-
-	if (!nodes) {
-		return tabbablesNodes;
-	}
-
-	Array.from(nodes).forEach(currentNode => {
-		if (currentNode.nodeType === Node.TEXT_NODE || currentNode.nodeType === Node.COMMENT_NODE || currentNode.hasAttribute("data-sap-no-tab-ref")) {
-			return;
-		}
-
-		if (currentNode.shadowRoot) {
-			// get the root node of the ShadowDom (1st none style tag)
-			const children = currentNode.shadowRoot.children;
-			currentNode = Array.from(children).find(node => node.tagName !== "STYLE");
-		}
-
-		if (isNodeTabbable(currentNode)) {
-			tabbablesNodes.push(currentNode);
-		}
-
-		if (currentNode.tagName === "SLOT") {
-			getTabbables(currentNode.assignedNodes(), tabbablesNodes);
-		} else {
-			getTabbables(currentNode.children, tabbablesNodes);
-		}
-	});
-
-	return tabbablesNodes;
-};
-
-export {
-	getTabbableElements,
-	getLastTabbableElement,
-};

package/src/util/arraysAreEqual.js

@@ -1,15 +0,0 @@
-const arraysAreEqual = (arr1, arr2) => {
-	if (arr1.length !== arr2.length) {
-		return false;
-	}
-
-	for (let i = 0; i < arr1.length; i++) {
-		if (arr1[i] !== arr2[i]) {
-			return false;
-		}
-	}
-
-	return true;
-};
-
-export default arraysAreEqual;

package/src/util/createLinkInHead.js

@@ -1,19 +0,0 @@
-/**
- * Creates a <link> tag in the <head> tag
- * @param href - the CSS
- * @param attributes - optional attributes to add to the tag
- * @returns {HTMLElement}
- */
-const createLinkInHead = (href, attributes = {}) => {
-	const link = document.createElement("link");
-	link.type = "text/css";
-	link.rel = "stylesheet";
-
-	Object.entries(attributes).forEach(pair => link.setAttribute(...pair));
-
-	link.href = href;
-	document.head.appendChild(link);
-	return link;
-};
-
-export default createLinkInHead;

package/src/util/createStyleInHead.js

@@ -1,18 +0,0 @@
-/**
- * Creates a <style> tag in the <head> tag
- * @param cssText - the CSS
- * @param attributes - optional attributes to add to the tag
- * @returns {HTMLElement}
- */
-const createStyleInHead = (cssText, attributes = {}) => {
-	const style = document.createElement("style");
-	style.type = "text/css";
-
-	Object.entries(attributes).forEach(pair => style.setAttribute(...pair));
-
-	style.textContent = cssText;
-	document.head.appendChild(style);
-	return style;
-};
-
-export default createStyleInHead;

package/src/util/debounce.js

@@ -1,17 +0,0 @@
-/**
- * Delays function execution by given threshold.
- * @param fn {Function}
- * @param delay {Integer}
- */
-
-let debounceInterval = null;
-
-const debounce = (fn, delay) => {
-	clearTimeout(debounceInterval);
-	debounceInterval = setTimeout(() => {
-		debounceInterval = null;
-		fn();
-	}, delay);
-};
-
-export default debounce;

package/src/util/detectNavigatorLanguage.js

@@ -1,13 +0,0 @@
-import { DEFAULT_LANGUAGE } from "../generated/AssetParameters.js";
-
-export default () => {
-	const browserLanguages = navigator.languages;
-
-	const navigatorLanguage = () => {
-		return navigator.language;
-	};
-
-	const rawLocale = (browserLanguages && browserLanguages[0]) || navigatorLanguage() || navigator.userLanguage || navigator.browserLanguage;
-
-	return rawLocale || DEFAULT_LANGUAGE;
-};

package/src/util/encodeCSS.js

@@ -1,24 +0,0 @@
-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/findNodeOwner.js

@@ -1,35 +0,0 @@
-const findNodeOwner = node => {
-	if (!(node instanceof HTMLElement)) {
-		throw new Error("Argument node should be of type HTMLElement");
-	}
-
-	const ownerTypes = [HTMLHtmlElement, HTMLIFrameElement];
-	let currentShadowRootFlag = true;
-	let currentCustomElementFlag = true;
-
-	while (node) {
-		if (node.toString() === "[object ShadowRoot]") {
-			// Web Component
-			// or the shadow root of web component with attached shadow root
-			if (currentShadowRootFlag) {
-				currentShadowRootFlag = false;
-			}
-			if (!currentCustomElementFlag && !currentShadowRootFlag) {
-				return node;
-			}
-		} else if (node.tagName && node.tagName.indexOf("-") > -1) {
-			if (currentCustomElementFlag) {
-				currentCustomElementFlag = false;
-			} else {
-				return node;
-			}
-		} else if (ownerTypes.indexOf(node.constructor) > -1) {
-			// Document or Iframe reached
-			return node;
-		}
-
-		node = node.parentNode || node.host;
-	}
-};
-
-export default findNodeOwner;

package/src/util/formatMessage.js

@@ -1,23 +0,0 @@
-const messageFormatRegEX = /('')|'([^']+(?:''[^']*)*)(?:'|$)|\{([0-9]+(?:\s*,[^{}]*)?)\}|[{}]/g;
-
-const formatMessage = (text, values) => {
-	values = values || [];
-
-	return text.replace(messageFormatRegEX, ($0, $1, $2, $3, offset) => {
-		if ($1) {
-			return '\''; /* eslint-disable-line */
-		}
-
-		if ($2) {
-			return $2.replace(/''/g, '\''); /* eslint-disable-line */
-		}
-
-		if ($3) {
-			return String(values[parseInt($3)]);
-		}
-
-		throw new Error(`[i18n]: pattern syntax error at pos ${offset}`);
-	});
-};
-
-export default formatMessage;

package/src/util/getActiveElement.js

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

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

package/src/util/getDesigntimePropertyAsArray.js

@@ -1,4 +0,0 @@
-export default value => {
-	const m = /\$([-a-z0-9A-Z._]+)(?::([^$]*))?\$/.exec(value);
-	return m && m[2] ? m[2].split(/,/) : null;
-};

package/src/util/getEffectiveContentDensity.js

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

@@ -1,13 +0,0 @@
-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/isDescendantOf.js

@@ -1,15 +0,0 @@
-const isDescendantOf = (klass, baseKlass, inclusive = false) => {
-	if (typeof klass !== "function" || typeof baseKlass !== "function") {
-		return false;
-	}
-	if (inclusive && klass === baseKlass) {
-		return true;
-	}
-	let parent = klass;
-	do {
-		parent = Object.getPrototypeOf(parent);
-	} while (parent !== null && parent !== baseKlass);
-	return parent === baseKlass;
-};
-
-export default isDescendantOf;

package/src/util/isElementInView.js

@@ -1,15 +0,0 @@
-/**
- * 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/isNodeClickable.js

@@ -1,19 +0,0 @@
-const rClickable = /^(?:a|area)$/i;
-const rFocusable = /^(?:input|select|textarea|button)$/i;
-
-const isNodeClickable = node => {
-	if (node.disabled) {
-		return false;
-	}
-
-	const tabIndex = node.getAttribute("tabindex");
-	if (tabIndex !== null && tabIndex !== undefined) {
-		return parseInt(tabIndex) >= 0;
-	}
-
-	return rFocusable.test(node.nodeName)
-		|| (rClickable.test(node.nodeName)
-		&& node.href);
-};
-
-export default isNodeClickable;

package/src/util/isNodeHidden.js

@@ -1,9 +0,0 @@
-const isNodeHidden = node => {
-	if (node.nodeName === "SLOT") {
-		return false;
-	}
-
-	return (node.offsetWidth <= 0 && node.offsetHeight <= 0) || node.style.visibility === "hidden";
-};
-
-export default isNodeHidden;

package/src/util/isNodeTabbable.js

@@ -1,28 +0,0 @@
-import isNodeHidden from "./isNodeHidden.js";
-
-const isNodeTabbable = node => {
-	if (!node) {
-		return false;
-	}
-
-	const nodeName = node.nodeName.toLowerCase();
-
-	if (node.hasAttribute("data-sap-no-tab-ref")) {
-		return false;
-	}
-
-	if (isNodeHidden(node)) {
-		return false;
-	}
-
-	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;