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

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/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/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,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/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/package-scripts.js

@@ -1,44 +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 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 generateAssetParameters",
+	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.src copy.test copy.webcomponents-polyfill",
-		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-0fcda382e",
+  "version": "0.0.0-11d529e8a",
   "description": "UI5 Web Components: webcomponents.base",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -15,27 +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": {
-    "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-0fcda382e",
-    "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-11d529e8a",
+    "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,
 };

package/src/Boot.js

@@ -0,0 +1,43 @@
+import EventProvider from "./EventProvider.js";
+import whenDOMReady from "./util/whenDOMReady.js";
+import insertFontFace from "./FontFace.js";
+import insertSystemCSSVars from "./SystemCSSVars.js";
+import { getTheme } from "./config/Theme.js";
+import applyTheme from "./theming/applyTheme.js";
+import { getFeature } from "./FeaturesRegistry.js";
+
+let booted = false;
+const eventProvider = new EventProvider();
+
+/**
+ * Attach a callback that will be executed on boot
+ * @public
+ * @param listener
+ */
+const attachBoot = listener => {
+	eventProvider.attachEvent("boot", listener);
+};
+
+const boot = async () => {
+	if (booted) {
+		return;
+	}
+
+	const OpenUI5Support = getFeature("OpenUI5Support");
+	if (OpenUI5Support) {
+		await OpenUI5Support.init();
+	}
+
+	await whenDOMReady();
+	await applyTheme(getTheme());
+	OpenUI5Support && OpenUI5Support.attachListeners();
+	insertFontFace();
+	insertSystemCSSVars();
+	await eventProvider.fireEventAsync("boot");
+	booted = true;
+};
+
+export {
+	boot,
+	attachBoot,
+};

package/src/CustomElementsRegistry.js

@@ -1,23 +1,39 @@
-const DefinitionsSet = new Set();
+import setToArray from "./util/setToArray.js";
+
+const Definitions = new Set();
+const Failures = new Set();
+let failureTimeout;
 
 const registerTag = tag => {
-	DefinitionsSet.add(tag);
+	Definitions.add(tag);
 };
 
 const isTagRegistered = tag => {
-	return DefinitionsSet.has(tag);
+	return Definitions.has(tag);
 };
 
 const getAllRegisteredTags = () => {
-	const arr = [];
-	DefinitionsSet.forEach(tag => {
-		arr.push(tag);
-	});
-	return arr;
+	return setToArray(Definitions);
+};
+
+const recordTagRegistrationFailure = tag => {
+	Failures.add(tag);
+	if (!failureTimeout) {
+		failureTimeout = setTimeout(() => {
+			displayFailedRegistrations();
+			failureTimeout = undefined;
+		}, 1000);
+	}
+};
+
+const displayFailedRegistrations = () => {
+	console.warn(`The following tags have already been defined by a different UI5 Web Components version: ${setToArray(Failures).join(", ")}`); // eslint-disable-line
+	Failures.clear();
 };
 
 export {
 	registerTag,
 	isTagRegistered,
 	getAllRegisteredTags,
+	recordTagRegistrationFailure,
 };

package/src/CustomElementsScope.js

@@ -0,0 +1,108 @@
+let suf;
+let rulesObj = {
+	include: [/^ui5-/],
+	exclude: [],
+};
+const tagsCache = new Map(); // true/false means the tag should/should not be cached, undefined means not known yet.
+
+/**
+ * Sets the suffix to be used for custom elements scoping, f.e. pass "demo" to get tags such as "ui5-button-demo".
+ * Note: by default all tags starting with "ui5-" will be scoped, unless you change this by calling "setCustomElementsScopingRules"
+ *
+ * @public
+ * @param suffix The scoping suffix
+ */
+const setCustomElementsScopingSuffix = suffix => {
+	if (!suffix.match(/^[a-zA-Z0-9_-]+$/)) {
+		throw new Error("Only alphanumeric characters and dashes allowed for the scoping suffix");
+	}
+
+	suf = suffix;
+};
+
+/**
+ * Returns the currently set scoping suffix, or undefined if not set.
+ *
+ * @public
+ * @returns {String|undefined}
+ */
+const getCustomElementsScopingSuffix = () => {
+	return suf;
+};
+
+/**
+ * Sets the rules, governing which custom element tags to scope and which not, f.e.
+ * setCustomElementsScopingRules({include: [/^ui5-/]}, exclude: [/^ui5-mylib-/, /^ui5-carousel$/]);
+ * will scope all elements starting with "ui5-" but not the ones starting with "ui5-mylib-" and not "ui5-carousel".
+ *
+ * @public
+ * @param rules Object with "include" and "exclude" properties, both arrays of regular expressions. Note that "include"
+ * rules are applied first and "exclude" rules second.
+ */
+const setCustomElementsScopingRules = rules => {
+	if (!rules || !rules.include) {
+		throw new Error(`"rules" must be an object with at least an "include" property`);
+	}
+
+	if (!Array.isArray(rules.include) || rules.include.some(rule => !(rule instanceof RegExp))) {
+		throw new Error(`"rules.include" must be an array of regular expressions`);
+	}
+
+	if (rules.exclude && (!Array.isArray(rules.exclude) || rules.exclude.some(rule => !(rule instanceof RegExp)))) {
+		throw new Error(`"rules.exclude" must be an array of regular expressions`);
+	}
+
+	rules.exclude = rules.exclude || [];
+	rulesObj = rules;
+	tagsCache.clear(); // reset the cache upon setting new rules
+};
+
+/**
+ * Returns the rules, governing which custom element tags to scope and which not. By default, all elements
+ * starting with "ui5-" are scoped. The default rules are: {include: [/^ui5-/]}.
+ *
+ * @public
+ * @returns {Object}
+ */
+const getCustomElementsScopingRules = () => {
+	return rulesObj;
+};
+
+/**
+ * Determines whether custom elements with the given tag should be scoped or not.
+ * The tag is first matched against the "include" rules and then against the "exclude" rules and the
+ * result is cached until new rules are set.
+ *
+ * @public
+ * @param tag
+ */
+const shouldScopeCustomElement = tag => {
+	if (!tagsCache.has(tag)) {
+		const result = rulesObj.include.some(rule => tag.match(rule)) && !rulesObj.exclude.some(rule => tag.match(rule));
+		tagsCache.set(tag, result);
+	}
+
+	return tagsCache.get(tag);
+};
+
+/**
+ * Returns the currently set scoping suffix, if any and if the tag should be scoped, or undefined otherwise.
+ *
+ * @public
+ * @param tag
+ * @returns {String}
+ */
+const getEffectiveScopingSuffixForTag = tag => {
+	if (shouldScopeCustomElement(tag)) {
+		return getCustomElementsScopingSuffix();
+	}
+};
+
+export {
+	setCustomElementsScopingSuffix,
+	getCustomElementsScopingSuffix,
+	setCustomElementsScopingRules,
+	getCustomElementsScopingRules,
+	shouldScopeCustomElement,
+	getEffectiveScopingSuffixForTag,
+};

package/src/DOMObserver.js

@@ -0,0 +1,65 @@
+const observers = new WeakMap(); // We want just one observer per node, store them here -> DOM nodes are keys
+
+/**
+ * Default implementation with MutationObserver for browsers with native support
+ */
+let _createObserver = (node, callback, options) => {
+	const observer = new MutationObserver(callback);
+	observer.observe(node, options);
+	return observer;
+};
+
+/**
+ * Default implementation with MutationObserver for browsers with native support
+ */
+let _destroyObserver = observer => {
+	observer.disconnect();
+};
+
+/**
+ * Allows to create an alternative DOM observer implementation
+ * @param createFn
+ */
+const setCreateObserverCallback = createFn => {
+	if (typeof createFn === "function") {
+		_createObserver = createFn;
+	}
+};
+
+/**
+ * Allows to create an alternative DOM observer implementation
+ * @param destroyFn
+ */
+const setDestroyObserverCallback = destroyFn => {
+	if (typeof destroyFn === "function") {
+		_destroyObserver = destroyFn;
+	}
+};
+
+/**
+ * @param node
+ * @param callback
+ * @param options
+ */
+const observeDOMNode = (node, callback, options) => {
+	const observer = _createObserver(node, callback, options);
+	observers.set(node, observer);
+};
+
+/**
+ * @param node
+ */
+const unobserveDOMNode = node => {
+	const observer = observers.get(node);
+	if (observer) {
+		_destroyObserver(observer);
+		observers.delete(node);
+	}
+};
+
+export {
+	setCreateObserverCallback,
+	setDestroyObserverCallback,
+	observeDOMNode,
+	unobserveDOMNode,
+};