@ui5/webcomponents-base 0.0.0-6895c16dd → 0.0.0-6cb3eb0db

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;
 		}
 

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/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/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/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 @@
+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,23 +1,42 @@
-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",
+		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" dist/`,
+		test: `copy-and-watch "test/**/*.*" dist/test-resources`,
 	},
 	generateAssetParameters: `node "${assetParametersScript}"`,
 	watch: {
@@ -28,16 +47,13 @@ const scripts = {
 	},
 	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-6895c16dd",
+  "version": "0.0.0-6cb3eb0db",
   "description": "UI5 Web Components: webcomponents.base",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -15,25 +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": {
-    "lit-html": "^1.0.0"
+    "lit-html": "2.0.0"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "0.0.0-6895c16dd",
-    "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",
+    "@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/Boot.js

@@ -6,7 +6,7 @@ import { getTheme } from "./config/Theme.js";
 import applyTheme from "./theming/applyTheme.js";
 import { getFeature } from "./FeaturesRegistry.js";
 
-let bootPromise;
+let booted = false;
 const eventProvider = new EventProvider();
 
 /**
@@ -18,28 +18,23 @@ const attachBoot = listener => {
 	eventProvider.attachEvent("boot", listener);
 };
 
-const boot = () => {
-	if (bootPromise) {
-		return bootPromise;
+const boot = async () => {
+	if (booted) {
+		return;
 	}
 
-	bootPromise = new Promise(async resolve => {
-		const OpenUI5Support = getFeature("OpenUI5Support");
-		if (OpenUI5Support) {
-			await OpenUI5Support.init();
-		}
-
-		await whenDOMReady();
-		await applyTheme(getTheme());
-		OpenUI5Support && OpenUI5Support.attachListeners();
-		insertFontFace();
-		insertSystemCSSVars();
-		await eventProvider.fireEventAsync("boot");
-
-		resolve();
-	});
+	const OpenUI5Support = getFeature("OpenUI5Support");
+	if (OpenUI5Support) {
+		await OpenUI5Support.init();
+	}
 
-	return bootPromise;
+	await whenDOMReady();
+	await applyTheme(getTheme());
+	OpenUI5Support && OpenUI5Support.attachListeners();
+	insertFontFace();
+	insertSystemCSSVars();
+	await eventProvider.fireEventAsync("boot");
+	booted = true;
 };
 
 export {

package/src/Device.js

@@ -75,6 +75,7 @@ const detectTablet = () => {
 const supportsTouch = () => touch;
 const isIE = () => ie;
 const isSafari = () => safari;
+const isChrome = () => chrome;
 
 const isTablet = () => {
 	detectTablet();
@@ -94,6 +95,7 @@ export {
 	supportsTouch,
 	isIE,
 	isSafari,
+	isChrome,
 	isPhone,
 	isTablet,
 	isDesktop,

package/src/EventProvider.js

@@ -1,36 +1,37 @@
 class EventProvider {
 	constructor() {
-		this._eventRegistry = {};
+		this._eventRegistry = new Map();
 	}
 
 	attachEvent(eventName, fnFunction) {
 		const eventRegistry = this._eventRegistry;
-		let eventListeners = eventRegistry[eventName];
+		const eventListeners = eventRegistry.get(eventName);
 
 		if (!Array.isArray(eventListeners)) {
-			eventRegistry[eventName] = [];
-			eventListeners = eventRegistry[eventName];
+			eventRegistry.set(eventName, [fnFunction]);
+			return;
 		}
 
-		eventListeners.push({
-			"function": fnFunction,
-		});
+		if (!eventListeners.includes(fnFunction)) {
+			eventListeners.push(fnFunction);
+		}
 	}
 
 	detachEvent(eventName, fnFunction) {
 		const eventRegistry = this._eventRegistry;
-		let eventListeners = eventRegistry[eventName];
+		const eventListeners = eventRegistry.get(eventName);
 
 		if (!eventListeners) {
 			return;
 		}
+		const indexOfFnToDetach = eventListeners.indexOf(fnFunction);
 
-		eventListeners = eventListeners.filter(event => {
-			return event["function"] !== fnFunction; // eslint-disable-line
-		});
+		if (indexOfFnToDetach !== -1) {
+			eventListeners.splice(indexOfFnToDetach, 1);
+		}
 
 		if (eventListeners.length === 0) {
-			delete eventRegistry[eventName];
+			eventRegistry.delete(eventName);
 		}
 	}
 
@@ -43,14 +44,14 @@ class EventProvider {
 	 */
 	fireEvent(eventName, data) {
 		const eventRegistry = this._eventRegistry;
-		const eventListeners = eventRegistry[eventName];
+		const eventListeners = eventRegistry.get(eventName);
 
 		if (!eventListeners) {
 			return [];
 		}
 
-		return eventListeners.map(event => {
-			return event["function"].call(this, data); // eslint-disable-line
+		return eventListeners.map(fn => {
+			return fn.call(this, data); // eslint-disable-line
 		});
 	}
 
@@ -67,24 +68,17 @@ class EventProvider {
 
 	isHandlerAttached(eventName, fnFunction) {
 		const eventRegistry = this._eventRegistry;
-		const eventListeners = eventRegistry[eventName];
+		const eventListeners = eventRegistry.get(eventName);
 
 		if (!eventListeners) {
 			return false;
 		}
 
-		for (let i = 0; i < eventListeners.length; i++) {
-			const event = eventListeners[i];
-			if (event["function"] === fnFunction) { // eslint-disable-line
-				return true;
-			}
-		}
-
-		return false;
+		return eventListeners.includes(fnFunction);
 	}
 
 	hasListeners(eventName) {
-		return !!this._eventRegistry[eventName];
+		return !!this._eventRegistry.get(eventName);
 	}
 }
 

package/src/InitialConfiguration.js

@@ -13,7 +13,6 @@ let initialConfig = {
 	noConflict: false, // no URL
 	formatSettings: {},
 	fetchDefaultLanguage: false,
-	assetsPath: "",
 };
 
 /* General settings */
@@ -62,11 +61,6 @@ const getFormatSettings = () => {
 	return initialConfig.formatSettings;
 };
 
-const getAssetsPath = () => {
-	initConfiguration();
-	return initialConfig.assetsPath;
-};
-
 const booleanMapping = new Map();
 booleanMapping.set("true", true);
 booleanMapping.set("false", false);
@@ -92,23 +86,36 @@ const parseConfigurationScript = () => {
 const parseURLParameters = () => {
 	const params = new URLSearchParams(window.location.search);
 
+	// Process "sap-*" params first
 	params.forEach((value, key) => {
-		if (!key.startsWith("sap-ui")) {
+		const parts = key.split("sap-").length;
+		if (parts === 0 || parts === key.split("sap-ui-").length) {
 			return;
 		}
 
-		const lowerCaseValue = value.toLowerCase();
-
-		const param = key.split("sap-ui-")[1];
+		applyURLParam(key, value, "sap");
+	});
 
-		if (booleanMapping.has(value)) {
-			value = booleanMapping.get(lowerCaseValue);
+	// Process "sap-ui-*" params
+	params.forEach((value, key) => {
+		if (!key.startsWith("sap-ui")) {
+			return;
 		}
 
-		initialConfig[param] = value;
+		applyURLParam(key, value, "sap-ui");
 	});
 };
 
+const applyURLParam = (key, value, paramType) => {
+	const lowerCaseValue = value.toLowerCase();
+	const param = key.split(`${paramType}-`)[1];
+
+	if (booleanMapping.has(value)) {
+		value = booleanMapping.get(lowerCaseValue);
+	}
+	initialConfig[param] = value;
+};
+
 const applyOpenUI5Configuration = () => {
 	const OpenUI5Support = getFeature("OpenUI5Support");
 	if (!OpenUI5Support || !OpenUI5Support.isLoaded()) {
@@ -119,7 +126,6 @@ const applyOpenUI5Configuration = () => {
 	initialConfig = merge(initialConfig, OpenUI5Config);
 };
 
-
 const initConfiguration = () => {
 	if (initialized) {
 		return;
@@ -146,5 +152,4 @@ export {
 	getNoConflict,
 	getCalendarType,
 	getFormatSettings,
-	getAssetsPath,
 };

package/src/Keys.js

@@ -131,6 +131,10 @@ const isUpShift = event => (event.key ? (event.key === "ArrowUp" || event.key ==
 
 const isDownShift = event => (event.key ? (event.key === "ArrowDown" || event.key === "Down") : event.keyCode === KeyCodes.ARROW_DOWN) && checkModifierKeys(event, false, false, true);
 
+const isLeftShift = event => (event.key ? (event.key === "ArrowLeft" || event.key === "Left") : event.keyCode === KeyCodes.ARROW_LEFT) && checkModifierKeys(event, false, false, true);
+
+const isRightShift = event => (event.key ? (event.key === "ArrowRight" || event.key === "Right") : event.keyCode === KeyCodes.ARROW_RIGHT) && checkModifierKeys(event, false, false, true);
+
 const isUpShiftCtrl = event => (event.key ? (event.key === "ArrowUp" || event.key === "Up") : event.keyCode === KeyCodes.ARROW_UP) && checkModifierKeys(event, true, false, true);
 
 const isDownShiftCtrl = event => (event.key ? (event.key === "ArrowDown" || event.key === "Down") : event.keyCode === KeyCodes.ARROW_DOWN) && checkModifierKeys(event, true, false, true);
@@ -159,8 +163,12 @@ const isPageDown = event => (event.key ? event.key === "PageDown" : event.keyCod
 
 const isPageUpShift = event => (event.key ? event.key === "PageUp" : event.keyCode === KeyCodes.PAGE_UP) && checkModifierKeys(event, false, false, true);
 
+const isPageUpAlt = event => (event.key ? event.key === "PageUp" : event.keyCode === KeyCodes.PAGE_UP) && checkModifierKeys(event, false, true, false);
+
 const isPageDownShift = event => (event.key ? event.key === "PageDown" : event.keyCode === KeyCodes.PAGE_DOWN) && checkModifierKeys(event, false, false, true);
 
+const isPageDownAlt = event => (event.key ? event.key === "PageDown" : event.keyCode === KeyCodes.PAGE_DOWN) && checkModifierKeys(event, false, true, false);
+
 const isPageUpShiftCtrl = event => (event.key ? event.key === "PageUp" : event.keyCode === KeyCodes.PAGE_UP) && checkModifierKeys(event, true, false, true);
 
 const isPageDownShiftCtrl = event => (event.key ? event.key === "PageDown" : event.keyCode === KeyCodes.PAGE_DOWN) && checkModifierKeys(event, true, false, true);
@@ -183,6 +191,8 @@ const isF4 = event => {
 
 const isF4Shift = event => (event.key ? event.key === "F4" : event.keyCode === KeyCodes.F4) && checkModifierKeys(event, false, false, true);
 
+const isF7 = event => (event.key ? event.key === "F7" : event.keyCode === KeyCodes.F7) && !hasModifierKeys(event);
+
 const isShowByArrows = event => {
 	return ((event.key === "ArrowDown" || event.key === "Down") || (event.key === "ArrowUp" || event.key === "Up")) && checkModifierKeys(event, /* Ctrl */ false, /* Alt */ true, /* Shift */ false);
 };
@@ -208,6 +218,8 @@ export {
 	isDownCtrl,
 	isUpShift,
 	isDownShift,
+	isLeftShift,
+	isRightShift,
 	isUpShiftCtrl,
 	isDownShiftCtrl,
 	isHome,
@@ -224,10 +236,13 @@ export {
 	isShow,
 	isF4,
 	isF4Shift,
+	isF7,
 	isPageUp,
 	isPageDown,
 	isPageUpShift,
+	isPageUpAlt,
 	isPageDownShift,
+	isPageDownAlt,
 	isPageUpShiftCtrl,
 	isPageDownShiftCtrl,
 };

package/src/MediaRange.js

@@ -104,7 +104,6 @@ const MediaRange = {
 	getCurrentRange: _getCurrentRange,
 };
 
-
 MediaRange.initRangeSet(MediaRange.RANGESETS.RANGE_4STEPS, [600, 1024, 1440], ["S", "M", "L", "XL"]);
 
 export default MediaRange;

package/src/Render.js

@@ -15,7 +15,6 @@ let mutationObserverTimer;
 
 let queuePromise;
 
-
 /**
  * Schedules a render task (if not already scheduled) to render the component
  *

package/src/StaticArea.js

@@ -0,0 +1,3 @@
+if (!customElements.get("ui5-static-area")) {
+	customElements.define("ui5-static-area", class extends HTMLElement {});
+}

package/src/StaticAreaItem.js

@@ -1,6 +1,9 @@
+import "./StaticArea.js";
 import updateShadowRoot from "./updateShadowRoot.js";
 import { renderFinished } from "./Render.js";
 import getEffectiveContentDensity from "./util/getEffectiveContentDensity.js";
+import { getEffectiveScopingSuffixForTag } from "./CustomElementsScope.js";
+import getEffectiveDir from "./locale/getEffectiveDir.js";
 
 /**
  *
@@ -31,6 +34,7 @@ class StaticAreaItem extends HTMLElement {
 	update() {
 		if (this._rendered) {
 			this._updateContentDensity();
+			this._updateDirection();
 			updateShadowRoot(this.ownerElement, true);
 		}
 	}
@@ -49,6 +53,15 @@ class StaticAreaItem extends HTMLElement {
 		}
 	}
 
+	_updateDirection() {
+		const dir = getEffectiveDir(this.ownerElement);
+		if (dir) {
+			this.setAttribute("dir", dir);
+		} else {
+			this.removeAttribute("dir");
+		}
+	}
+
 	/**
 	 * @protected
 	 * Returns reference to the DOM element where the current fragment is added.
@@ -71,10 +84,24 @@ class StaticAreaItem extends HTMLElement {
 	getStableDomRef(refName) {
 		return this.shadowRoot.querySelector(`[data-ui5-stable=${refName}]`);
 	}
-}
 
-if (!customElements.get("ui5-static-area-item")) {
-	customElements.define("ui5-static-area-item", StaticAreaItem);
+	static getTag() {
+		const pureTag = "ui5-static-area-item";
+		const suffix = getEffectiveScopingSuffixForTag(pureTag);
+		if (!suffix) {
+			return pureTag;
+		}
+
+		return `${pureTag}-${suffix}`;
+	}
+
+	static createInstance() {
+		if (!customElements.get(StaticAreaItem.getTag())) {
+			customElements.define(StaticAreaItem.getTag(), StaticAreaItem);
+		}
+
+		return document.createElement(this.getTag());
+	}
 }
 
 export default StaticAreaItem;