@ui5/webcomponents-base 0.0.0-b4cbc43ba → 0.0.0-b93c2a321

package/dist/util/FocusableElements.js

@@ -5,23 +5,27 @@ const isFocusTrap = el => {
 	return el.hasAttribute("data-ui5-focus-trap");
 };
 
-const getFirstFocusableElement = async container => {
+const getFirstFocusableElement = async (container, startFromContainer) => {
 	if (!container || isNodeHidden(container)) {
 		return null;
 	}
 
-	return findFocusableElement(container, true);
+	return findFocusableElement(container, true, startFromContainer);
 };
 
-const getLastFocusableElement = async container => {
+const getLastFocusableElement = async (container, startFromContainer) => {
 	if (!container || isNodeHidden(container)) {
 		return null;
 	}
 
-	return findFocusableElement(container, false);
+	return findFocusableElement(container, false, startFromContainer);
 };
 
-const findFocusableElement = async (container, forward) => {
+const isElemFocusable = el => {
+	return el.hasAttribute("data-ui5-focus-redirect") || !isNodeHidden(el);
+};
+
+const findFocusableElement = async (container, forward, startFromContainer) => {
 	let child;
 
 	if (container.shadowRoot) {
@@ -29,8 +33,10 @@ const findFocusableElement = async (container, forward) => {
 	} else if (container.assignedNodes && container.assignedNodes()) {
 		const assignedElements = container.assignedNodes();
 		child = forward ? assignedElements[0] : assignedElements[assignedElements.length - 1];
+	} else if (startFromContainer) {
+		child = container;
 	} else {
-		child = forward ? container.firstChild : container.lastChild;
+		child = forward ? container.firstElementChild : container.lastElementChild;
 	}
 
 	let focusableDescendant;
@@ -48,7 +54,7 @@ const findFocusableElement = async (container, forward) => {
 			return null;
 		}
 
-		if (child.nodeType === 1 && !isNodeHidden(child) && !isFocusTrap(child)) {
+		if (child.nodeType === 1 && isElemFocusable(child) && !isFocusTrap(child)) {
 			if (isNodeClickable(child)) {
 				return (child && typeof child.focus === "function") ? child : null;
 			}

package/dist/util/HTMLSanitizer.js

@@ -0,0 +1,7 @@
+import sanitizeHTML from "../sap/base/security/sanitizeHTML.js";
+import URLListValidator from "../sap/base/security/URLListValidator.js";
+
+export {
+	URLListValidator,
+	sanitizeHTML,
+};

package/dist/util/InvisibleMessage.js

@@ -0,0 +1,60 @@
+import InvisibleMessageMode from "../types/InvisibleMessageMode.js";
+import getSingletonElementInstance from "./getSingletonElementInstance.js";
+import { attachBoot } from "../Boot.js";
+
+let politeSpan;
+let assertiveSpan;
+
+const setOutOfViewportStyles = el => {
+	el.style.position = "absolute";
+	el.style.clip = "rect(1px,1px,1px,1px)";
+	el.style.userSelect = "none";
+	el.style.left = "-1000px";
+	el.style.top = "-1000px";
+	el.style.pointerEvents = "none";
+};
+
+attachBoot(() => {
+	if (politeSpan && assertiveSpan) {
+		return;
+	}
+
+	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");
+
+	setOutOfViewportStyles(politeSpan);
+	setOutOfViewportStyles(assertiveSpan);
+
+	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/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/TabbableElements.js

@@ -17,7 +17,7 @@ const getTabbables = (nodes, tabbables) => {
 	}
 
 	Array.from(nodes).forEach(currentNode => {
-		if (currentNode.nodeType === Node.TEXT_NODE || currentNode.nodeType === Node.COMMENT_NODE) {
+		if (currentNode.nodeType === Node.TEXT_NODE || currentNode.nodeType === Node.COMMENT_NODE || currentNode.hasAttribute("data-sap-no-tab-ref")) {
 			return;
 		}
 
@@ -27,6 +27,10 @@ const getTabbables = (nodes, tabbables) => {
 			currentNode = Array.from(children).find(node => node.tagName !== "STYLE");
 		}
 
+		if (!currentNode) {
+			return;
+		}
+
 		if (isNodeTabbable(currentNode)) {
 			tabbablesNodes.push(currentNode);
 		}

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/createLinkInHead.js

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

@@ -0,0 +1,10 @@
+/**
+ * Escape a regular expression text so that it can be used in a regular expression.
+ * @param {string} text The string to be interpreted literally
+ * @returns Regular expression string to pass to regex
+ */
+function escapeRegex(text) {
+	return text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+
+export default escapeRegex;

package/dist/util/generateHighlightedMarkup.js

@@ -0,0 +1,42 @@
+import escapeRegex from "./escapeRegex.js";
+import encodeXML from "../sap/base/security/encodeXML.js";
+
+// utility to replace all occurances of a string
+function replaceAll(text, find, replace, caseInsensitive) {
+	return text.replace(new RegExp(escapeRegex(find), `${caseInsensitive ? "i" : ""}g`), replace);
+}
+
+/**
+ * Generate markup for a raw string where a particular text is wrapped with some tag, by default `<b>` (bold) tag.
+ * All inputs to this function are considered literal text, and special characters will always be escaped.
+ * @param {string} text The text to add highlighting to
+ * @param {string} textToHighlight The text which should be highlighted
+ * @return {string} the markup HTML which contains all occurrances of the input text surrounded with a `<b>` tag.
+ */
+function generateHighlightedMarkup(text, textToHighlight) {
+	if (!text || !textToHighlight) {
+		return text;
+	}
+	// a token is some string that does not appear in either of the input strings
+	// repeat the token until it does not appear in the string
+	const makeToken = t => {
+		const [s, e] = t.split("");
+		while (text.indexOf(t) >= 0 || textToHighlight.indexOf(t) >= 0) {
+			t = `${s}${t}${e}`;
+		}
+		return t;
+	};
+	// It doesn't matter what characters are used as long as all 4 of them are unique
+	// And also that encodeXML will not change these characters
+	const openToken = makeToken("12");
+	const closeToken = makeToken("34");
+	// wrap every occurance of the textToHighlight using the open/close tokens (instead of markup at this point)
+	let result = encodeXML(replaceAll(text, textToHighlight, match => `${openToken}${match}${closeToken}`, true));
+	// now replace the open and close tokens with the markup that we expect
+	[[openToken, "<b>"], [closeToken, "</b>"]].forEach(([find, replace]) => {
+		result = replaceAll(result, find, replace);
+	});
+	return result;
+}
+
+export default generateHighlightedMarkup;

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/getNormalizedTarget.js

@@ -0,0 +1,16 @@
+/**
+ * Returns the normalized event target in cases when it has shadow root.
+ * @param {Object} target The original event target
+ * @returns {Object} The normalized target
+ */
+const getNormalizedTarget = target => {
+	let element = target;
+
+	if (target.shadowRoot && target.shadowRoot.activeElement) {
+		element = target.shadowRoot.activeElement;
+	}
+
+	return element;
+};
+
+export default getNormalizedTarget;

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,7 +3,7 @@ const isNodeHidden = node => {
 		return false;
 	}
 
-	return (node.offsetWidth <= 0 && node.offsetHeight <= 0) || node.style.visibility === "hidden";
+	return (node.offsetWidth <= 0 && node.offsetHeight <= 0) || (node.style && 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/hash.txt

@@ -0,0 +1 @@
+V3VnHwLnXyQCsPM9NpRrmRHVxPc=

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

@@ -1,5 +1,4 @@
 const fs = require('fs');
-const path = require('path');
 const mkdirp = require('mkdirp');
 const assets = require('@ui5/webcomponents-tools/assets-meta.js');
 

package/lib/generate-styles/index.js

@@ -0,0 +1,18 @@
+const fs = require('fs');
+const path = require('path');
+const mkdirp = require('mkdirp');
+const CleanCSS = require('clean-css');
+
+mkdirp.sync("dist/generated/css/");
+fs.readdirSync("src/css/").filter(file => file.endsWith(".css")).forEach(file => {
+	let content = fs.readFileSync(path.join("src/css/", file));
+	const res = new CleanCSS().minify(`${content}`);
+	content = `export default {
+	packageName: "@ui5/webcomponents-base",
+	fileName: "${file}",
+	content: \`${res.styles}\`
+};`;
+
+	fs.writeFileSync(path.join("dist/generated/css/", `${file}.js`), content);
+});
+

package/lib/generate-version-info/index.js

@@ -0,0 +1,27 @@
+const fs = require('fs');
+const mkdirp = require('mkdirp');
+
+const version = JSON.parse(fs.readFileSync("package.json")).version;
+
+// Parse version
+const matches = version.match(/^([0-9]+)\.([0-9]+)\.([0-9]+)(.*)$/);
+if (!matches) {
+	throw new Error("Unsupported version format");
+}
+
+const isNext = version.match(/[a-f0-9]{9}$/);
+const buildTime = Math.floor(new Date().getTime() / 1000);
+
+const fileContent = `const VersionInfo = {
+	version: "${version}",
+	major: ${matches[1]},
+	minor: ${matches[2]},
+	patch: ${matches[3]},
+	suffix: "${matches[4]}",
+	isNext: ${isNext ? "true" : "false"},
+	buildTime: ${buildTime},
+};
+export default VersionInfo;`;
+
+mkdirp.sync("dist/generated/");
+fs.writeFileSync("dist/generated/VersionInfo.js", fileContent);

package/package-scripts.js

@@ -1,43 +1,59 @@
-const path = require("path");
 const resolve = require("resolve");
 
-const serveConfig = `../tools/components-package/serve.json`;
-const port = `9191`;
-
 const assetParametersScript = resolve.sync("@ui5/webcomponents-base/lib/generate-asset-parameters/index.js");
+const stylesScript = resolve.sync("@ui5/webcomponents-base/lib/generate-styles/index.js");
+const versionScript = resolve.sync("@ui5/webcomponents-base/lib/generate-version-info/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 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 generateAssetParameters",
+	prepare: "nps clean integrate copy generateAssetParameters generateVersionInfo generateStyles",
+	integrate: {
+		default: "nps integrate.copy-used-modules integrate.replace-amd integrate.amd-to-es6 integrate.esm-abs-to-rel integrate.third-party",
+		"copy-used-modules": `node "${copyUsedModules}" ./used-modules.txt dist/`,
+		"replace-amd": "replace-in-file sap.ui.define define dist/**/*.js",
+		"amd-to-es6": "amdtoes6 --src=dist/ --replace --glob=**/*.js",
+		"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",
+		default: `${UP_TO_DATE} || nps lint prepare build.bundle hash`,
 		bundle: "rollup --config config/rollup.config.js",
 	},
 	copy: {
 		default: "nps copy.src copy.test",
-		src: "copy-and-watch \"src/**/*.js\" dist/",
-		test: "copy-and-watch \"test/**/*.*\" dist/test-resources",
+		src: `copy-and-watch "src/**/*.{js,css}" dist/`,
+		test: `copy-and-watch "test/**/*.*" dist/test-resources`,
 	},
 	generateAssetParameters: `node "${assetParametersScript}"`,
+	generateVersionInfo: `node "${versionScript}"`,
+	generateStyles: `node "${stylesScript}"`,
 	watch: {
-		default: 'concurrently "nps watch.test" "nps watch.src" "nps watch.bundle"',
+		default: 'concurrently "nps watch.test" "nps watch.src" "nps watch.bundle" "nps watch.styles"',
 		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 DEV",
+		styles: 'chokidar "src/css/*.css" -c "nps generateStyles"'
 	},
 	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-b4cbc43ba",
+  "version": "0.0.0-b93c2a321",
   "description": "UI5 Web Components: webcomponents.base",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -15,25 +15,34 @@
     "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": {
-    "lit-html": "^1.0.0"
+    "lit-html": "2.0.1"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "0.0.0-b4cbc43ba",
-    "array-uniq": "^2.0.0",
-    "chromedriver": "88.0.0",
-    "copy-and-watch": "^0.1.4",
-    "eslint": "^5.13.0",
-    "eslint-config-airbnb-base": "^13.1.0",
-    "npm-run-all": "^4.1.5",
-    "path-exists-cli": "^1.0.0"
+    "@buxlabs/amd-to-es6": "0.16.1",
+    "@openui5/sap.ui.core": "1.94.0",
+    "@ui5/webcomponents-tools": "0.0.0-b93c2a321",
+    "chromedriver": "100.0.0",
+    "clean-css": "^5.2.2",
+    "copy-and-watch": "^0.1.5",
+    "eslint": "^7.22.0",
+    "mkdirp": "^1.0.4",
+    "resolve": "^1.20.0"
   }
 }

package/src/AssetRegistry.js

@@ -1,12 +1,11 @@
-import { registerI18nBundle } from "./asset-registries/i18n.js";
-import { registerCldr, _registerMappingFunction as registerCldrMappingFunction } from "./asset-registries/LocaleData.js";
-import { registerThemeProperties } from "./asset-registries/Themes.js";
-import { registerAssetPathMappingFunction } from "./util/EffectiveAssetPath.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,
-	registerCldrMappingFunction,
-	registerThemeProperties,
-	registerI18nBundle,
-	registerAssetPathMappingFunction,
+	registerI18nLoader,
+	registerLocaleDataLoader,
+	registerThemePropertiesLoader,
+	registerIconLoader,
 };