@ui5/webcomponents-base 0.0.0-c6d8872f3 → 0.0.0-cad512aa3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-base",
-  "version": "0.0.0-c6d8872f3",
+  "version": "0.0.0-cad512aa3",
   "description": "UI5 Web Components: webcomponents.base",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -15,6 +15,13 @@
     "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",
@@ -24,18 +31,19 @@
     "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.1"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "0.0.0-c6d8872f3",
-    "array-uniq": "^2.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.109.0",
+    "@ui5/webcomponents-tools": "0.0.0-cad512aa3",
+    "chromedriver": "110.0.0",
+    "clean-css": "^5.2.2",
+    "copy-and-watch": "^0.1.5",
+    "cross-env": "^7.0.3",
+    "eslint": "^7.22.0",
+    "mkdirp": "^1.0.4",
+    "replace-in-file": "^6.3.5",
+    "resolve": "^1.20.0"
   }
 }

package/src/css/BusyIndicator.css

@@ -0,0 +1,80 @@
+.busy-indicator-wrapper {
+    position: relative;
+    height: 100%;
+    width: 100%;
+}
+
+.busy-indicator-overlay {
+    display: var(--ui5_web_components_busy_indicator_display);
+    position: absolute;
+    inset: 0;
+    background: var(--ui5_web_components_busy_indicator_background-color);
+    z-index: 99;
+}
+
+.busy-indicator-busy-area {
+    display: var(--ui5_web_components_busy_indicator_display);
+    position: absolute;
+    z-index: 99;
+    inset: 0;
+    justify-content: center;
+    align-items: center;
+    background-color: inherit;
+    flex-direction: column;
+    color: var(--_ui5_busy_indicator_color);
+}
+
+:host([__is-busy]) .busy-indicator-wrapper > :not(.busy-indicator-busy-area):not(.busy-indicator-overlay):not([busy-indicator-before-span]) {
+    --ui5_web_components_busy_indicator_display: none;
+}
+
+.busy-indicator-busy-area:focus {
+    outline: var(--_ui5_busy_indicator_focus_outline);
+    outline-offset: -.125rem;
+}
+
+.busy-indicator-circle {
+    width: 1rem;
+    height: 1rem;
+    display: inline-block;
+    background-color: currentColor;
+    border-radius: 50%;
+}
+
+.circle-animation-0 {
+    animation: grow 1.6s infinite cubic-bezier(0.32, 0.06, 0.85, 1.11);
+}
+
+.circle-animation-1 {
+    animation: grow 1.6s infinite cubic-bezier(0.32, 0.06, 0.85, 1.11);
+    animation-delay: 200ms;
+}
+
+.circle-animation-2 {
+    animation: grow 1.6s infinite cubic-bezier(0.32, 0.06, 0.85, 1.11);
+    animation-delay: 400ms;
+}
+
+.sapUiLocalBusy {
+	--ui5_web_components_busy_indicator_display: none;
+}
+
+.busy-indicator-wrapper [ui5-busy-indicator] {
+    display: none;
+}
+
+@keyframes grow {
+    0%, 50%, 100% {
+        -webkit-transform: scale(0.5);
+        -moz-transform: scale(0.5);
+        -ms-transform: scale(0.5);
+        transform: scale(0.5);
+    }
+
+    25% {
+        -webkit-transform: scale(1);
+        -moz-transform: scale(1);
+        -ms-transform: scale(1);
+        transform: scale(1);
+    }
+}

package/src/css/FontFace.css

@@ -0,0 +1,66 @@
+@font-face {
+    font-family: "72";
+    font-style: normal;
+    font-weight: 400;
+    src: local("72"),
+    url(https://sdk.openui5.org/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Regular.woff2?ui5-webcomponents) format("woff2");
+}
+
+@font-face {
+    font-family: "72full";
+    font-style: normal;
+    font-weight: 400;
+    src: local('72-full'),
+    url(https://sdk.openui5.org/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Regular-full.woff2?ui5-webcomponents) format("woff2");
+
+}
+
+@font-face {
+    font-family: "72";
+    font-style: normal;
+    font-weight: 700;
+    src: local('72-Bold'),
+    url(https://sdk.openui5.org/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold.woff2?ui5-webcomponents) format("woff2");
+}
+
+@font-face {
+    font-family: "72full";
+    font-style: normal;
+    font-weight: 700;
+    src: local('72-Bold-full'),
+    url(https://sdk.openui5.org/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold-full.woff2?ui5-webcomponents) format("woff2");
+}
+
+@font-face {
+    font-family: '72-Bold';
+    font-style: normal;
+    src: local('72-Bold'),
+    url(https://sdk.openui5.org/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold.woff2?ui5-webcomponents) format("woff2");
+}
+
+@font-face {
+    font-family: '72-Boldfull';
+    font-style: normal;
+    src: url(https://sdk.openui5.org/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold-full.woff2?ui5-webcomponents) format("woff2");
+}
+
+@font-face {
+    font-family: '72-Light';
+    font-style: normal;
+    src: local('72-Light'),
+        url(https://sdk.openui5.org/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Light.woff2?ui5-webcomponents) format("woff2");
+}
+
+@font-face {
+    font-family: '72-Lightfull';
+    font-style: normal;
+    src: url(https://sdk.openui5.org/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Light-full.woff2?ui5-webcomponents) format("woff2");
+}
+
+@font-face {
+    font-family: "72Black";
+    font-style: bold;
+    font-weight: 900;
+    src: local('72Black'),
+    url(https://sdk.openui5.org/resources/sap/ui/core/themes/sap_horizon/fonts/72-Black.woff2?ui5-webcomponents) format("woff2");
+}

package/src/css/OverrideFontFace.css

@@ -0,0 +1,32 @@
+/**
+ * Some diacritics are supported by the 72 font:
+ *  * Grave
+ *  * Acute
+ *  * Circumflex
+ *  * Tilde
+ *
+ * However, the following diacritics and the combination of multiple diacritics (including the supported ones) are not supported:
+ *  * Breve
+ *  * Horn
+ *  * Dot below
+ *  * Hook above
+ *
+ *
+ * Override for the characters that aren't covered by the '72' font to other system fonts
+ *
+ * U+0102-0103: A and a with Breve
+ * U+01A0-01A1: O and o with Horn
+ * U+01AF-01B0: U and u with Horn
+ * U+1EA0-1EB7: A and a with diacritics that are not supported by the font and combination of multiple diacritics
+ * U+1EB8-1EC7: E and e with diacritics that are not supported by the font and combination of multiple diacritics
+ * U+1EC8-1ECB: I and i with diacritics that are not supported by the font and combination of multiple diacritics
+ * U+1ECC-1EE3: O and o with diacritics that are not supported by the font and combination of multiple diacritics
+ * U+1EE4-1EF1: U and u with diacritics that are not supported by the font and combination of multiple diacritics
+ * U+1EF4-1EF7: Y and y with diacritics that are not supported by the font and combination of multiple diacritics
+ *
+ */
+@font-face {
+    font-family: '72override';
+    unicode-range: U+0102-0103, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EB7, U+1EB8-1EC7, U+1EC8-1ECB, U+1ECC-1EE3, U+1EE4-1EF1, U+1EF4-1EF7;
+    src: local('Arial'), local('Helvetica'), local('sans-serif');
+}

package/src/css/SystemCSSVars.css

@@ -0,0 +1,17 @@
+:root {
+    --_ui5_content_density:cozy;
+}
+
+[data-ui5-compact-size],
+.ui5-content-density-compact,
+.sapUiSizeCompact {
+    --_ui5_content_density:compact;
+}
+
+[dir="rtl"] {
+    --_ui5_dir:rtl;
+}
+
+[dir="ltr"] {
+    --_ui5_dir:ltr;
+}

package/src/renderer/directives/style-map.js

@@ -0,0 +1,72 @@
+/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+/**
+ * This is the original style-map.js directive from lit-html 2 with the only difference that "render" is not called even for the first rendering (update is used instead)
+ */
+
+import { noChange } from 'lit-html';
+import { directive, Directive, PartType, } from 'lit-html/directive.js';
+class StyleMapDirective extends Directive {
+	constructor(partInfo) {
+		var _a;
+		super(partInfo);
+		if (partInfo.type !== PartType.ATTRIBUTE ||
+			partInfo.name !== 'style' ||
+			((_a = partInfo.strings) === null || _a === void 0 ? void 0 : _a.length) > 2) {
+			throw new Error('The `styleMap` directive must be used in the `style` attribute ' +
+				'and must be the only part in the attribute.');
+		}
+	}
+	render(styleInfo) {
+		return "";
+	}
+	update(part, [styleInfo]) {
+		const { style } = part.element;
+		if (this._previousStyleProperties === undefined) {
+			this._previousStyleProperties = new Set();
+			for (const name in styleInfo) {
+				this._previousStyleProperties.add(name);
+			}
+			// return this.render(styleInfo);
+		}
+		// Remove old properties that no longer exist in styleInfo
+		// We use forEach() instead of for-of so that re don't require down-level
+		// iteration.
+		this._previousStyleProperties.forEach((name) => {
+			// If the name isn't in styleInfo or it's null/undefined
+			if (styleInfo[name] == null) {
+				this._previousStyleProperties.delete(name);
+				if (name.includes('-')) {
+					style.removeProperty(name);
+				}
+				else {
+					// Note reset using empty string (vs null) as IE11 does not always
+					// reset via null (https://developer.mozilla.org/en-US/docs/Web/API/ElementCSSInlineStyle/style#setting_styles)
+					// eslint-disable-next-line @typescript-eslint/no-explicit-any
+					style[name] = '';
+				}
+			}
+		});
+		// Add or update properties
+		for (const name in styleInfo) {
+			const value = styleInfo[name];
+			if (value != null) {
+				this._previousStyleProperties.add(name);
+				if (name.includes('-')) {
+					style.setProperty(name, value);
+				}
+				else {
+					// eslint-disable-next-line @typescript-eslint/no-explicit-any
+					style[name] = value;
+				}
+			}
+		}
+		return noChange;
+	}
+}
+
+export const styleMap = directive(StyleMapDirective);

package/tsconfig.json

@@ -0,0 +1,14 @@
+{
+    "include": ["src/**/*", "src/global.d.ts"],
+    "compilerOptions": {
+      "target": "ES2021",
+      // Generate d.ts files
+      "declaration": true,
+      "outDir": "dist",
+      "skipLibCheck": true,
+      "sourceMap": true,
+      "inlineSources": true,
+      "strict": true,
+      "moduleResolution": "node",
+    },
+}

package/used-modules.txt

@@ -0,0 +1,10 @@
+# Needed files from OpenUI5
+
+sap/base/util/now.js
+sap/base/Log.js
+sap/base/assert.js
+sap/base/security/URLListValidator.js
+sap/base/security/sanitizeHTML.js
+sap/base/strings/toHex.js
+sap/base/security/encodeXML.js
+sap/base/security/encodeCSS.js

package/bundle.es5.js

@@ -1,28 +0,0 @@
-// ES5 bundle targets IE11 only
-import "./dist/features/browsersupport/IE11.js";
-
-import "./bundle.esm.js";
-
-import { getAnimationMode } from "./dist/config/AnimationMode.js";
-import { getLanguage } from "./dist/config/Language.js";
-import { getCalendarType } from "./dist/config/CalendarType.js";
-import { getTheme, setTheme } from "./dist/config/Theme.js";
-import { getNoConflict, setNoConflict } from "./dist/config/NoConflict.js";
-import { getRTL } from "./dist/config/RTL.js";
-import { getFirstDayOfWeek } from "./dist/config/FormatSettings.js";
-import { getRegisteredNames as getIconNames } from  "./dist/SVGIconRegistry.js"
-const configuration = {
-	getAnimationMode,
-	getLanguage,
-	getTheme,
-	setTheme,
-	getNoConflict,
-	setNoConflict,
-	getCalendarType,
-	getRTL,
-	getFirstDayOfWeek,
-};
-export {
-	configuration,
-	getIconNames,
-};

package/config/rollup.config.js

@@ -1 +0,0 @@
-module.exports = require("@ui5/webcomponents-tools/components-package/rollup.js");

package/dist/RenderScheduler.js

@@ -1,165 +0,0 @@
-import RenderQueue from "./RenderQueue.js";
-
-const MAX_RERENDER_COUNT = 10;
-
-// Tells whether a render task is currently scheduled
-let renderTaskId;
-
-// Queue for invalidated web components
-const invalidatedWebComponents = new RenderQueue();
-
-let renderTaskPromise,
-	renderTaskPromiseResolve,
-	taskResult;
-
-let mutationObserverTimer;
-
-/**
- * Class that manages the rendering/re-rendering of web components
- * This is always asynchronous
- */
-class RenderScheduler {
-	constructor() {
-		throw new Error("Static class");
-	}
-
-	/**
-	 * Queues a web component for re-rendering
-	 * @param webComponent
-	 */
-	static renderDeferred(webComponent) {
-		// Enqueue the web component
-		const res = invalidatedWebComponents.add(webComponent);
-
-		// Schedule a rendering task
-		RenderScheduler.scheduleRenderTask();
-		return res;
-	}
-
-	static renderImmediately(webComponent) {
-		// Enqueue the web component
-		const res = invalidatedWebComponents.add(webComponent);
-
-		// Immediately start a render task
-		RenderScheduler.runRenderTask();
-		return res;
-	}
-
-	/**
-	 * Schedules a rendering task, if not scheduled already
-	 */
-	static scheduleRenderTask() {
-		if (!renderTaskId) {
-			// renderTaskId = window.setTimeout(RenderScheduler.renderWebComponents, 3000); // Task
-			// renderTaskId = Promise.resolve().then(RenderScheduler.renderWebComponents); // Micro task
-			renderTaskId = window.requestAnimationFrame(RenderScheduler.renderWebComponents); // AF
-		}
-	}
-
-	static runRenderTask() {
-		if (!renderTaskId) {
-			renderTaskId = 1; // prevent another rendering task from being scheduled, all web components should use this task
-			RenderScheduler.renderWebComponents();
-		}
-	}
-
-	static renderWebComponents() {
-		// console.log("------------- NEW RENDER TASK ---------------");
-
-		let webComponentInfo,
-			webComponent,
-			promise;
-		const renderStats = new Map();
-		while (webComponentInfo = invalidatedWebComponents.shift()) { // eslint-disable-line
-			webComponent = webComponentInfo.webComponent;
-			promise = webComponentInfo.promise;
-
-			const timesRerendered = renderStats.get(webComponent) || 0;
-			if (timesRerendered > MAX_RERENDER_COUNT) {
-				// console.warn("WARNING RERENDER", webComponent);
-				throw new Error(`Web component re-rendered too many times this task, max allowed is: ${MAX_RERENDER_COUNT}`);
-			}
-			webComponent._render();
-			promise._deferredResolve();
-			renderStats.set(webComponent, timesRerendered + 1);
-		}
-
-		// wait for Mutation observer just in case
-		if (!mutationObserverTimer) {
-			mutationObserverTimer = setTimeout(() => {
-				mutationObserverTimer = undefined;
-				if (invalidatedWebComponents.getList().length === 0) {
-					RenderScheduler._resolveTaskPromise();
-				}
-			}, 200);
-		}
-
-		renderTaskId = undefined;
-	}
-
-	/**
-	 * return a promise that will be resolved once all invalidated web components are rendered
-	 */
-	static whenDOMUpdated() {
-		if (renderTaskPromise) {
-			return renderTaskPromise;
-		}
-
-		renderTaskPromise = new Promise(resolve => {
-			renderTaskPromiseResolve = resolve;
-			window.requestAnimationFrame(() => {
-				if (invalidatedWebComponents.getList().length === 0) {
-					renderTaskPromise = undefined;
-					resolve();
-				}
-			});
-		});
-
-		return renderTaskPromise;
-	}
-
-	static getNotDefinedComponents() {
-		return Array.from(document.querySelectorAll("*")).filter(el => el.localName.startsWith("ui5-") && !el.isUI5Element);
-	}
-
-	/**
-	 * return a promise that will be resolved once all ui5 webcomponents on the page have their shadow root ready
-	 */
-	static async whenShadowDOMReady() {
-		const undefinedElements = this.getNotDefinedComponents();
-
-		const definedPromises = undefinedElements.map(
-		  el => customElements.whenDefined(el.localName)
-		);
-		const timeoutPromise = new Promise(resolve => setTimeout(resolve, 5000));
-
-		await Promise.race([Promise.all(definedPromises), timeoutPromise]);
-		const stillUndefined = this.getNotDefinedComponents();
-		if (stillUndefined.length) {
-			// eslint-disable-next-line
-			console.warn("undefined elements after 5 seconds are: " + [...stillUndefined].map(el => el.localName).join(" ; "));
-		}
-
-		return Promise.resolve();
-	}
-
-	static async whenFinished() {
-		await RenderScheduler.whenShadowDOMReady();
-		await RenderScheduler.whenDOMUpdated();
-	}
-
-	static _resolveTaskPromise() {
-		if (invalidatedWebComponents.getList().length > 0) {
-			// More updates are pending. Resolve will be called again
-			return;
-		}
-
-		if (renderTaskPromiseResolve) {
-			renderTaskPromiseResolve.call(this, taskResult);
-			renderTaskPromiseResolve = undefined;
-			renderTaskPromise = undefined;
-		}
-	}
-}
-
-export default RenderScheduler;

package/dist/SVGIconRegistry.js

@@ -1,60 +0,0 @@
-const registry = new Map();
-const iconCollectionPromises = new Map();
-
-const ICON_NOT_FOUND = "ICON_NOT_FOUND";
-const DEFAULT_COLLECTION = "SAP-icons";
-
-const calcKey = (name, collection) => {
-	// silently support ui5-compatible URIs
-	if (name.startsWith("sap-icon://")) {
-		name = name.replace("sap-icon://", "");
-		[name, collection] = name.split("/").reverse();
-	}
-	collection = collection || DEFAULT_COLLECTION;
-	return `${collection}:${name}`;
-};
-
-const registerIcon = (name, { pathData, accData, collection } = {}) => {
-	const key = calcKey(name, collection);
-	registry.set(key, { pathData, accData });
-};
-
-const getIconDataSync = (name, collection = DEFAULT_COLLECTION) => {
-	const key = calcKey(name, collection);
-	return registry.get(key);
-};
-
-const getIconData = async (name, collection = DEFAULT_COLLECTION) => {
-	const key = calcKey(name, collection);
-
-	if (!iconCollectionPromises.has(collection)) {
-		iconCollectionPromises.set(collection, Promise.resolve(ICON_NOT_FOUND));
-	}
-
-	const iconData = await iconCollectionPromises.get(collection);
-
-	if (iconData === ICON_NOT_FOUND) {
-		return iconData;
-	}
-
-	return registry.get(key);
-};
-
-const getRegisteredNames = async () => {
-	if (iconCollectionPromises.has(DEFAULT_COLLECTION)) {
-		await iconCollectionPromises.get(DEFAULT_COLLECTION);
-	}
-	return Array.from(registry.keys()).map(k => k.split(":")[1]);
-};
-
-const registerCollectionPromise = (collection, promise) => {
-	iconCollectionPromises.set(collection, promise);
-};
-
-export {
-	getIconData,
-	getIconDataSync,
-	registerIcon,
-	getRegisteredNames,
-	registerCollectionPromise,
-};

package/dist/animations/config.js

@@ -1,5 +0,0 @@
-export default {
-	defaultDuration: 400,
-	element: document.createElement("DIV"),
-	identity: () => {},
-};

package/dist/boot.js

@@ -1,32 +0,0 @@
-import whenDOMReady from "./util/whenDOMReady.js";
-import insertFontFace from "./FontFace.js";
-import { getTheme } from "./config/Theme.js";
-import applyTheme from "./theming/applyTheme.js";
-import whenPolyfillLoaded from "./compatibility/whenPolyfillLoaded.js";
-import { getFeature } from "./FeaturesRegistry.js";
-
-let bootPromise;
-const OpenUI5Support = getFeature("OpenUI5Support");
-
-const boot = () => {
-	if (bootPromise) {
-		return bootPromise;
-	}
-
-	bootPromise = new Promise(async resolve => {
-		if (OpenUI5Support) {
-			await OpenUI5Support.init();
-		}
-
-		await whenDOMReady();
-		await applyTheme(getTheme());
-		OpenUI5Support && OpenUI5Support.attachListeners();
-		insertFontFace();
-		await whenPolyfillLoaded();
-		resolve();
-	});
-
-	return bootPromise;
-};
-
-export default boot;