@ui5/webcomponents-base 0.0.0-db2be6526 → 0.0.0-db622d8a8

package/dist/test-resources/specs/UI5ElementPropsAndAttrs.spec.js

@@ -1,67 +0,0 @@
-const assert = require("chai").assert;
-
-describe("Properties and attributes convert to each other", () => {
-	before(async () => {
-		await browser.url("http://localhost:9191/test-resources/pages/AllTestElements.html");
-	});
-
-	it("Tests that properties with default values are initialized with the default value", async () => {
-		const el = await browser.$("#gen");
-
-		assert.strictEqual(await el.getProperty("defaultValueProp"), "Hello", "defaultValueProp is properly initialized");
-	});
-
-	it("Tests that prop-attr conversion works for string properties", async () => {
-		const el = await browser.$("#gen");
-
-		await el.setProperty("strProp", "test1");
-		assert.strictEqual(await el.getAttribute("str-prop"), "test1", "Attribute affected by property change");
-
-		await el.setAttribute("str-prop", "test2");
-		assert.strictEqual(await el.getProperty("strProp"), "test2", "Property affected by attribute change");
-	});
-
-	it("Tests that prop-attr conversion works for boolean properties", async () => {
-		const el = await browser.$("#gen");
-
-		await el.setProperty("boolProp", true);
-		assert.strictEqual(await el.getAttribute("bool-prop"), "", "Attribute affected by property change");
-
-		await el.setProperty("boolProp", false);
-		assert.strictEqual(await el.getAttribute("bool-prop"), null, "Attribute affected by property change");
-
-		await el.setAttribute("bool-prop", "");
-		assert.strictEqual(await el.getProperty("boolProp"), true, "Property affected by attribute change");
-
-		await el.removeAttribute("bool-prop");
-		assert.strictEqual(await el.getProperty("boolProp"), false, "Property affected by attribute change");
-	});
-
-	it("Tests that object properties have no attributes", async () => {
-		const el = await browser.$("#gen");
-
-		await el.setProperty("objectProp", {});
-		assert.strictEqual(await el.getAttribute("object-prop"), null, "Attribute not there");
-	});
-
-	it("Tests that array properties have no attributes", async () => {
-		const el = await browser.$("#gen");
-
-		await el.setProperty("multiProp", ["a", "b"]);
-		assert.strictEqual(await el.getAttribute("multi-prop"), null, "Attribute not there");
-	});
-
-	it("Tests that noAttribute properties have no attributes", async () => {
-		const el = await browser.$("#gen");
-
-		await el.setProperty("noAttributeProp", "some value");
-		assert.strictEqual(await el.getAttribute("no-attribute-prop"), null, "Attribute not there");
-	});
-
-	it("Tests that properties with default values do not automatically set attributes", async () => {
-		const el = await browser.$("#gen");
-
-		assert.strictEqual(await el.getAttribute("default-value-prop"), null, "Attribute not there for defaultValueProp");
-	});
-
-});

package/dist/test-resources/specs/UI5ElementShadowDOM.js

@@ -1,24 +0,0 @@
-const assert = require("chai").assert;
-
-describe("The framework can define web components", () => {
-	before(async () => {
-		await browser.url("http://localhost:9191/test-resources/pages/AllTestElements.html");
-	});
-
-	it("Tests that element's Shadow DOM is rendered if it has a template", async () => {
-		const res = await browser.executeAsync(done => {
-			done(document.getElementById("gen").shadowRoot);
-		});
-
-		assert.strictEqual(!!res, true, "Shadow root created");
-		assert.strictEqual(await browser.$("#gen").shadow$("div>p").isExisting(), true, "Shadow root content created");
-	});
-
-	it("Tests that element's Shadow DOM is not rendered if it has no template", async () => {
-		const res = await browser.executeAsync(done => {
-			done(document.getElementById("noShadow").shadowRoot);
-		});
-
-		assert.strictEqual(!!res, false, "Shadow root not created");
-	});
-});

package/dist/test-resources/specs/UI5ElementSlots.js

@@ -1,36 +0,0 @@
-const assert = require("chai").assert;
-
-describe("Slots work properly", () => {
-	before(async () => {
-		await browser.url("http://localhost:9191/test-resources/pages/AllTestElements.html");
-	});
-
-	it("Tests that properties exist on the element for each slot", async () => {
-		const res = await browser.executeAsync(done => {
-			const expectedValues = {};
-
-			const el = document.getElementById("withContent");
-
-			expectedValues.default = el.default.length > 0;
-			expectedValues.other = el.other.length === 2;
-			expectedValues.individual = el.individual.length === 2;
-			expectedValues.items = el.items.length === 2;
-			expectedValues.named = el.named === undefined;
-
-			done(expectedValues);
-		});
-
-		assert.strictEqual(res.default, true, "There are elements in the default property");
-		assert.strictEqual(res.other, true, "There are 2 elements in the other property");
-		assert.strictEqual(res.individual, true, "There are 2 elements in the individual property");
-		assert.strictEqual(res.items, true, "There are 2 elements in the items property");
-		assert.strictEqual(res.named, true, "There is no named property as propertyName changed it to items");
-	});
-
-	it("Tests that individualSlots modifies the slot property of slotted children", async () => {
-		assert.strictEqual((await browser.$$("#withContent>[slot=individual]")).length, 0, "There are no children with slot=individual");
-		assert.strictEqual((await browser.$$("#withContent>[slot=individual-1]")).length, 1, "The slot of the first child became individual-1");
-		assert.strictEqual((await browser.$$("#withContent>[slot=individual-2]")).length, 1, "The slot of the second child became individual-2");
-	});
-
-});

package/dist/theming/createThemePropertiesStyleTag.js

@@ -1,16 +0,0 @@
-import { hasStyle, createStyle, updateStyle } from "../ManagedStyles.js";
-
-/**
- * Creates/updates a style element holding all CSS Custom Properties
- * @param cssText
- * @param packageName
- */
-const createThemePropertiesStyleTag = (cssText, packageName) => {
-	if (hasStyle("data-ui5-theme-properties", packageName)) {
-		updateStyle(cssText, "data-ui5-theme-properties", packageName);
-	} else {
-		createStyle(cssText, "data-ui5-theme-properties", packageName);
-	}
-};
-
-export default createThemePropertiesStyleTag;

package/dist/types/CSSSize.js

@@ -1,9 +0,0 @@
-import DataType from "./DataType.js";
-
-class CSSSize extends DataType {
-	static isValid(value) {
-		return /^(auto|inherit|[-+]?(0*|([0-9]+|[0-9]*\.[0-9]+)([rR][eE][mM]|[eE][mM]|[eE][xX]|[pP][xX]|[cC][mM]|[mM][mM]|[iI][nN]|[pP][tT]|[pP][cC]|%))|calc\(\s*(\(\s*)*[-+]?(([0-9]+|[0-9]*\.[0-9]+)([rR][eE][mM]|[eE][mM]|[eE][xX]|[pP][xX]|[cC][mM]|[mM][mM]|[iI][nN]|[pP][tT]|[pP][cC]|%)?)(\s*(\)\s*)*(\s[-+]\s|[*\/])\s*(\(\s*)*([-+]?(([0-9]+|[0-9]*\.[0-9]+)([rR][eE][mM]|[eE][mM]|[eE][xX]|[pP][xX]|[cC][mM]|[mM][mM]|[iI][nN]|[pP][tT]|[pP][cC]|%)?)))*\s*(\)\s*)*\))$/.test(value); // eslint-disable-line
-	}
-}
-
-export default CSSSize;

package/dist/types/PopupState.js

@@ -1,37 +0,0 @@
-import DataType from "./DataType.js";
-
-const PopupStates = {
-	/**
-	 * Open and currently not changing states.
-	 * @public
-	 */
-	OPEN: "OPEN",
-
-	/**
-	 * Closed and currently not changing states.
-	 * @public
-	 */
-	CLOSED: "CLOSED",
-
-	/**
-	 * Already left the CLOSED state, is not OPEN yet, but in the process of getting OPEN.
-	 * @public
-	 */
-	OPENING: "OPENING",
-
-	/**
-	 * Still open, but in the process of going to the CLOSED state.
-	 * @public
-	 */
-	CLOSING: "CLOSING",
-};
-
-class PopupState extends DataType {
-	static isValid(value) {
-		return !!PopupStates[value];
-	}
-}
-
-PopupState.generateTypeAccessors(PopupStates);
-
-export default PopupState;

package/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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;

package/dist/util/setToArray.js

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

@@ -1 +0,0 @@
-JNWgflBAJXdY6hVcYESgptjZSY4=

package/package-scripts.js

@@ -1,62 +0,0 @@
-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 && rimraf .port",
-	lint: "eslint . --config config/.eslintrc.js",
-	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: `${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`,
-	},
-	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 DEV",
-	},
-	dev: 'concurrently "nps serve" "nps watch"',
-	start: "nps prepare dev",
-	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`,
-};
-
-
-module.exports = {
-	scripts,
-};

package/src/Boot.js

@@ -1,43 +0,0 @@
-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,39 +0,0 @@
-import setToArray from "./util/setToArray.js";
-
-const Definitions = new Set();
-const Failures = new Set();
-let failureTimeout;
-
-const registerTag = tag => {
-	Definitions.add(tag);
-};
-
-const isTagRegistered = tag => {
-	return Definitions.has(tag);
-};
-
-const getAllRegisteredTags = () => {
-	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/DOMObserver.js

@@ -1,65 +0,0 @@
-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,
-};

package/src/Device.js

@@ -1,107 +0,0 @@
-const ua = navigator.userAgent;
-const touch = "ontouchstart" in window || navigator.maxTouchPoints > 0;
-const ie = /(msie|trident)/i.test(ua);
-const chrome = !ie && /(Chrome|CriOS)/.test(ua);
-const safari = !ie && !chrome && /(Version|PhantomJS)\/(\d+\.\d+).*Safari/.test(ua);
-const webkit = !ie && /webkit/.test(ua);
-const windows = navigator.platform.indexOf("Win") !== -1;
-const android = !windows && /Android/.test(ua);
-const androidPhone = android && /(?=android)(?=.*mobile)/i.test(ua);
-const ipad = /ipad/i.test(ua);
-
-let windowsVersion;
-let webkitVersion;
-let tablet;
-
-const isWindows8OrAbove = () => {
-	if (!windows) {
-		return false;
-	}
-
-	if (windowsVersion === undefined) {
-		const matches = ua.match(/Windows NT (\d+).(\d)/);
-		windowsVersion = matches ? parseFloat(matches[1]) : 0;
-	}
-
-	return windowsVersion >= 8;
-};
-
-const isWebkit537OrAbove = () => {
-	if (!webkit) {
-		return false;
-	}
-
-	if (webkitVersion === undefined) {
-		const matches = ua.match(/(webkit)[ /]([\w.]+)/);
-		webkitVersion = matches ? parseFloat(matches[1]) : 0;
-	}
-
-	return webkitVersion >= 537.10;
-};
-
-const detectTablet = () => {
-	if (tablet !== undefined) {
-		return;
-	}
-
-	if (ipad) {
-		tablet = true;
-		return;
-	}
-
-	if (touch) {
-		if (isWindows8OrAbove()) {
-			tablet = true;
-			return;
-		}
-
-		if (chrome && android) {
-			tablet = !/Mobile Safari\/[.0-9]+/.test(ua);
-			return;
-		}
-
-		let densityFactor = window.devicePixelRatio ? window.devicePixelRatio : 1; // may be undefined in Windows Phone devices
-		if (android && isWebkit537OrAbove()) {
-			densityFactor = 1;
-		}
-
-		tablet = (Math.min(window.screen.width / densityFactor, window.screen.height / densityFactor) >= 600);
-		return;
-	}
-
-	tablet = (ie && ua.indexOf("Touch") !== -1) || (android && !androidPhone);
-};
-
-const supportsTouch = () => touch;
-const isIE = () => ie;
-const isSafari = () => safari;
-const isChrome = () => chrome;
-
-const isTablet = () => {
-	detectTablet();
-	return (touch || isWindows8OrAbove()) && tablet;
-};
-
-const isPhone = () => {
-	detectTablet();
-	return touch && !tablet;
-};
-
-const isDesktop = () => {
-	return (!isTablet() && !isPhone()) || isWindows8OrAbove();
-};
-
-const isCombi = () => {
-	return isTablet() && isDesktop();
-};
-
-export {
-	supportsTouch,
-	isIE,
-	isSafari,
-	isChrome,
-	isPhone,
-	isTablet,
-	isDesktop,
-	isCombi,
-};