@ui5/webcomponents-base 0.0.0-5f8ce9393 → 0.0.0-6cb3eb0db

package/dist/util/PopupUtils.js

@@ -0,0 +1,93 @@
+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/dist/util/SlotsHelper.js

@@ -0,0 +1,43 @@
+/**
+ * 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/dist/util/StringHelper.js

@@ -1,6 +1,21 @@
-const kebabToCamelCase = string => toCamelCase(string.split("-"));
+const kebabToCamelMap = new Map();
+const camelToKebabMap = new Map();
 
-const camelToKebabCase = string => string.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+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) => {

package/dist/util/TabbableElements.js

@@ -1,4 +1,3 @@
-
 import isNodeTabbable from "./isNodeTabbable.js";
 
 const getTabbableElements = node => {
@@ -13,8 +12,12 @@ const getLastTabbableElement = node => {
 const getTabbables = (nodes, tabbables) => {
 	const tabbablesNodes = tabbables || [];
 
+	if (!nodes) {
+		return tabbablesNodes;
+	}
+
 	Array.from(nodes).forEach(currentNode => {
-		if (currentNode.nodeType === Node.TEXT_NODE) {
+		if (currentNode.nodeType === Node.TEXT_NODE || currentNode.nodeType === Node.COMMENT_NODE || currentNode.hasAttribute("data-sap-no-tab-ref")) {
 			return;
 		}
 

package/dist/util/arraysAreEqual.js

@@ -0,0 +1,15 @@
+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/dist/util/clamp.js

@@ -0,0 +1,12 @@
+/**
+ * Returns a value clamped between an upper bound 'max' and lower bound 'min'.
+ * @param {number} val value
+ * @param {number} min lower bound
+ * @param {number} max upper bound
+ * @returns {number}
+ */
+const clamp = (val, min, max) => {
+	return Math.min(Math.max(val, min), max);
+};
+
+export default clamp;

package/dist/util/debounce.js

@@ -0,0 +1,17 @@
+/**
+ * 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/dist/util/detectNavigatorLanguage.js

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

package/dist/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/dist/util/findNodeOwner.js

@@ -0,0 +1,35 @@
+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/dist/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/dist/util/getClassCopy.js

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

package/dist/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/dist/util/getFileExtension.js

@@ -0,0 +1,21 @@
+/**
+ * ""                        -> ""
+ * "noExtension"             -> ""
+ * "file.txt"                -> ".txt"
+ * "file.with.many.dots.doc" -> ".doc"
+ * ".gitignore"              -> ""
+ *
+ * @param fileName - the file name
+ * @returns {string}
+ */
+const getFileExtension = fileName => {
+	const dotPos = fileName.lastIndexOf(".");
+
+	if (dotPos < 1) {
+		return "";
+	}
+
+	return fileName.slice(dotPos);
+};
+
+export default getFileExtension;

package/dist/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/dist/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/dist/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/dist/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/dist/util/isValidPropertyName.js

@@ -1,12 +1,21 @@
+// Note: disabled is present in IE so we explicitly allow it here.
+// 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)
- * Note: disabled is present in IE so we explicitly allow it here.
  *
  * @param name
  * @returns {boolean}
  */
 const isValidPropertyName = name => {
-	if (name === "disabled") {
+	if (allowList.includes(name) || name.startsWith("aria")) {
 		return true;
 	}
 	const classes = [

package/dist/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/hash.txt

@@ -0,0 +1 @@
+rdDAWx+4D0PvEdxuBB9NMlHEXYo=

package/index.js

@@ -1,4 +1,4 @@
-import UI5Element from "./src/UI5Element.js";
+import UI5Element from "./dist/UI5Element.js";
 
 export default UI5Element;
 export { UI5Element };

package/lib/generate-asset-parameters/index.js

@@ -0,0 +1,22 @@
+const fs = require('fs');
+const path = require('path');
+const mkdirp = require('mkdirp');
+const assets = require('@ui5/webcomponents-tools/assets-meta.js');
+
+const fileContent = `const assetParameters = ${JSON.stringify(assets)};
+
+const DEFAULT_THEME = assetParameters.themes.default;
+const DEFAULT_LANGUAGE = assetParameters.languages.default;
+const DEFAULT_LOCALE = assetParameters.locales.default;
+const SUPPORTED_LOCALES = assetParameters.locales.all;
+
+export {
+	DEFAULT_THEME,
+	DEFAULT_LANGUAGE,
+	DEFAULT_LOCALE,
+	SUPPORTED_LOCALES,
+};`;
+
+mkdirp.sync("dist/generated/");
+fs.writeFileSync("dist/generated/AssetParameters.js", fileContent);
+

package/package-scripts.js

@@ -1,39 +1,59 @@
-const serveConfig = `../tools/components-package/serve.json`;
-const port = `9191`;
+const resolve = require("resolve");
+
+const assetParametersScript = resolve.sync("@ui5/webcomponents-base/lib/generate-asset-parameters/index.js");
+const serve = resolve.sync("@ui5/webcomponents-tools/lib/serve/index.js");
+const generateHash = resolve.sync("@ui5/webcomponents-tools/lib/hash/generate.js");
+const hashIsUpToDate = resolve.sync("@ui5/webcomponents-tools/lib/hash/upToDate.js");
+const copyUsedModules = resolve.sync("@ui5/webcomponents-tools/lib/copy-list/index.js");
+const replaceGlobalCore = resolve.sync("@ui5/webcomponents-tools/lib/replace-global-core/index.js");
+const esmAbsToRel = resolve.sync("@ui5/webcomponents-tools/lib/esm-abs-to-rel/index.js");
+const UP_TO_DATE = `node "${hashIsUpToDate}" dist/ hash.txt && echo "Up to date."`;
 
 const scripts = {
-	clean: "rimraf dist",
+	clean: "rimraf dist && rimraf .port",
 	lint: "eslint . --config config/.eslintrc.js",
-	prepare: "nps clean copy",
+	prepare: "nps clean integrate copy generateAssetParameters",
+	integrate: {
+		default: "nps integrate.copy-used-modules integrate.copy-overlay integrate.replace-amd integrate.replace-export-true integrate.replace-export-false integrate.amd-to-es6 integrate.replace-global-core-usage integrate.esm-abs-to-rel integrate.third-party",
+		"copy-used-modules": `node "${copyUsedModules}" ./used-modules.txt dist/`,
+		"copy-overlay": `copy-and-watch "overlay/**/*.js" dist/`,
+		"replace-amd": "replace-in-file sap.ui.define define dist/**/*.js",
+		"replace-export-true": `replace-in-file ", /* bExport= */ true" "" dist/**/*.js`,
+		"replace-export-false": `replace-in-file ", /* bExport= */ false" "" dist/**/*.js`,
+		"amd-to-es6": "amdtoes6 --src=dist/ --replace --glob=**/*.js",
+		"replace-global-core-usage": `node "${replaceGlobalCore}" dist/`,
+		"esm-abs-to-rel": `node "${esmAbsToRel}" dist/ dist/`,
+		"third-party": {
+			default: "nps integrate.third-party.copy integrate.third-party.fix",
+			copy: "mkdirp dist/sap/ui/thirdparty/ && copy-and-watch ../../node_modules/@openui5/sap.ui.core/src/sap/ui/thirdparty/caja-html-sanitizer.js dist/sap/ui/thirdparty/",
+			fix: "replace-in-file 240 xA0 dist/sap/ui/thirdparty/caja-html-sanitizer.js"
+		},
+	},
 	build: {
-		default: "nps lint prepare build.bundle",
-		bundle: "rollup --config config/rollup.config.js --environment ES5_BUILD",
+		default: `${UP_TO_DATE} || nps lint prepare build.bundle hash`,
+		bundle: "rollup --config config/rollup.config.js",
 	},
 	copy: {
-		default: "nps copy.cldr copy.src copy.test copy.webcomponents-polyfill",
-		cldr: 'copy-and-watch "../../node_modules/@ui5/webcomponents-utils/dist/**/cldr/*.json" dist/generated/assets/cldr/',
-		src: "copy-and-watch \"src/**/*.js\" dist/",
-		test: "copy-and-watch \"test/**/*.*\" dist/test-resources",
-		"webcomponents-polyfill": "copy-and-watch \"../../node_modules/@webcomponents/webcomponentsjs/**/*.*\" dist/webcomponentsjs/",
+		default: "nps copy.src copy.test",
+		src: `copy-and-watch "src/**/*.js" dist/`,
+		test: `copy-and-watch "test/**/*.*" dist/test-resources`,
 	},
+	generateAssetParameters: `node "${assetParametersScript}"`,
 	watch: {
 		default: 'concurrently "nps watch.test" "nps watch.src" "nps watch.bundle"',
 		src: 'nps "copy.src --watch --skip-initial-copy"',
 		test: 'nps "copy.test --watch --skip-initial-copy"',
-		bundle: "rollup --config config/rollup.config.js -w --environment ES5_BUILD,DEV",
+		bundle: "rollup --config config/rollup.config.js -w --environment DEV",
 	},
 	dev: 'concurrently "nps serve" "nps watch"',
 	start: "nps prepare dev",
-	serve: {
-		default: "nps serve.prepare serve.run",
-		prepare: `copy-and-watch "${serveConfig}" dist/`,
-		run: `serve --no-clipboard -l ${port} dist`,
-	},
+	serve: `node "${serve}" --dir="dist/" --port=9191 --packageName="@ui5/webcomponents-base"`,
 	test: {
 		// --success first - report the exit code of the test run (first command to finish), as serve is always terminated and has a non-0 exit code
 		default: 'concurrently "nps serve" "nps test.run" --kill-others --success first',
 		run: "cross-env WDIO_LOG_LEVEL=error FORCE_COLOR=0 wdio config/wdio.conf.js",
 	},
+	hash: `node "${generateHash}" dist/ hash.txt`,
 };
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-base",
-  "version": "0.0.0-5f8ce9393",
+  "version": "0.0.0-6cb3eb0db",
   "description": "UI5 Web Components: webcomponents.base",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -15,28 +15,36 @@
     "url": "https://github.com/SAP/ui5-webcomponents.git",
     "directory": "packages/base"
   },
+  "exports": {
+    ".": "./index.js",
+    "./dist/*": "./dist/*",
+    "./package.json": "./package.json",
+    "./bundle.esm.js": "./bundle.esm.js",
+    "./*": "./dist/*"
+  },
   "scripts": {
     "clean": "nps clean",
     "lint": "nps lint",
     "start": "nps start",
     "build": "nps build",
     "test": "nps test",
+    "hash": "nps hash",
     "prepublishOnly": "npm run clean && npm run build"
   },
   "dependencies": {
-    "@ui5/webcomponents-utils": "0.0.0-5f8ce9393",
-    "css-vars-ponyfill": "^2.1.2",
-    "lit-html": "^1.0.0",
-    "regenerator-runtime": "0.12.1",
-    "url-search-params-polyfill": "^5.0.0"
+    "lit-html": "2.0.0"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "0.0.0-5f8ce9393",
-    "array-uniq": "^2.0.0",
-    "copy-and-watch": "^0.1.4",
-    "eslint": "^5.13.0",
-    "eslint-config-airbnb-base": "^13.1.0",
+    "@buxlabs/amd-to-es6": "0.16.1",
+    "@openui5/sap.ui.core": "1.94.0",
+    "@ui5/webcomponents-tools": "0.0.0-6cb3eb0db",
+    "array-uniq": "^3.0.0",
+    "chromedriver": "94.0.0",
+    "copy-and-watch": "^0.1.5",
+    "eslint": "^7.22.0",
+    "eslint-config-airbnb-base": "^14.2.1",
     "npm-run-all": "^4.1.5",
-    "path-exists-cli": "^1.0.0"
+    "path-exists-cli": "^2.0.0",
+    "replace-in-file": "^6.2.0"
   }
 }

package/src/AssetRegistry.js

@@ -1,9 +1,11 @@
-import { registerI18nBundle } from "./asset-registries/i18n.js";
-import { registerCldr } from "./asset-registries/LocaleData.js";
-import { registerThemeProperties } from "./asset-registries/Themes.js";
+import { registerI18nLoader } from "./asset-registries/i18n.js";
+import { registerLocaleDataLoader } from "./asset-registries/LocaleData.js";
+import { registerThemePropertiesLoader } from "./asset-registries/Themes.js";
+import { registerIconLoader } from "./asset-registries/Icons.js";
 
 export {
-	registerCldr,
-	registerThemeProperties,
-	registerI18nBundle,
+	registerI18nLoader,
+	registerLocaleDataLoader,
+	registerThemePropertiesLoader,
+	registerIconLoader,
 };