@ui5/webcomponents-base 0.0.0-7e7d9ea6f → 0.0.0-81513ce21

package/index.js

@@ -1,4 +1,230 @@
+// animations/
+import scroll from "./dist/animations/scroll.js";
+import slideDown from "./dist/animations/slideDown.js";
+import slideUp from "./dist/animations/slideup.js";
+
+// config/
+import { getAnimationMode, setAnimationMode } from "./dist/config/AnimationMode.js";
+import { getCalendarType } from "./dist/config/CalendarType.js";
+import { getFirstDayOfWeek, getLegacyDateCalendarCustomizing } from "./dist/config/FormatSettings.js";
+import {
+	setDefaultIconCollection,
+	getDefaultIconCollection,
+	getEffectiveIconCollection,
+	RegisteredIconCollection,
+} from "./dist/config/Icons.js";
+import {
+	getLanguage,
+	setLanguage,
+	getDefaultLanguage,
+	setFetchDefaultLanguage,
+	getFetchDefaultLanguage,
+} from "./dist/config/Language.js";
+import { getNoConflict, setNoConflict } from "./dist/config/NoConflict.js";
+import { getRTL } from "./dist/config/RTL.js";
+import {
+	getTheme,
+	setTheme,
+	getDefaultTheme,
+} from "./dist/config/Theme.js";
+
+// decorators/
+import customElement from "./dist/decorators/customElement.js";
+import event from "./dist/decorators/event.js";
+import property from "./dist/decorators/property.js";
+import slot from "./dist/decorators/slot.js";
+
+// delegate/
+import ItemNavigation from "./dist/delegate/ItemNavigation.js";
+import ResizeHandler from "./dist/delegate/ResizeHandler.js";
+import ScrollEnablement from "./dist/delegate/ScrollEnablement.js";
+
+// locale/
+import applyDirection from "./dist/locale/applyDirection.js";
+import { attachDirectionChange, detachDirectionChange } from "./dist/locale/directionChange.js";
+import getEffectiveDir from "./dist/locale/getEffectiveDir.js";
+import { attachLanguageChange, detachLanguageChange } from "./dist/locale/languageChange.js";
+
+// util/
+import { URLListValidator, sanitizeHTML } from "./dist/util/HTMLSanitizer.js";
+
+// Assets.ts
+import { registerI18nLoader } from "./dist/asset-registries/i18n.js";
+import { registerLocaleDataLoader } from "./dist/asset-registries/LocaleData.js";
+import { registerThemePropertiesLoader } from "./dist/asset-registries/Themes.js";
+import { registerIconLoader } from "./dist/asset-registries/Icons.js";
+
+// Boot.ts
+import { attachBoot } from "./dist/Boot.js";
+
+// CSP.ts
+import {
+	setPackageCSSRoot,
+	setUseLinks,
+	setPreloadLinks,
+} from "./dist/CSP.js";
+
+// CustomElementsScope.ts
+import {
+	setCustomElementsScopingSuffix,
+	getCustomElementsScopingSuffix,
+	setCustomElementsScopingRules,
+	getCustomElementsScopingRules,
+	getEffectiveScopingSuffixForTag,
+} from "./dist/CustomElementsScope.js";
+
+// Device.ts
+import {
+	supportsTouch,
+	isIE,
+	isSafari,
+	isChrome,
+	isFirefox,
+	isPhone,
+	isTablet,
+	isDesktop,
+	isCombi,
+	isIOS,
+	isAndroid,
+} from "./dist/Device.js";
+
+// EventProvider.ts
+import EventProvider from "./dist/EventProvider.js";
+
+// i18nBundle.ts
+import I18nBundle, { getI18nBundle, registerCustomI18nBundleGetter } from "./dist/i18nBundle.js";
+
+// MediaRange.ts
+import MediaRange from "./dist/MediaRange.js";
+
+// PropertiesFileFormat.ts
+import parseProperties from "./dist/PropertiesFileFormat.js";
+
+// Render.ts
+import {
+	renderDeferred,
+	renderImmediately,
+	cancelRender,
+	renderFinished,
+} from "./dist/Render.js";
+
+// Theming.ts
+import { addCustomCSS, attachThemeLoaded, detachThemeLoaded } from "./dist/Theming.js";
+
+// UI5Element.ts
 import UI5Element from "./dist/UI5Element.js";
 
 export default UI5Element;
-export { UI5Element };
+export {
+	// animations/
+	scroll,
+	slideDown,
+	slideUp,
+
+	// config/
+	getAnimationMode,
+	setAnimationMode,
+	getCalendarType,
+	getFirstDayOfWeek,
+	getLegacyDateCalendarCustomizing,
+	setDefaultIconCollection,
+	getDefaultIconCollection,
+	getEffectiveIconCollection,
+	RegisteredIconCollection,
+	getLanguage,
+	setLanguage,
+	getDefaultLanguage,
+	setFetchDefaultLanguage,
+	getFetchDefaultLanguage,
+	getNoConflict,
+	setNoConflict,
+	getRTL,
+	getTheme,
+	setTheme,
+	getDefaultTheme,
+
+	// decorators/
+	customElement,
+	event,
+	property,
+	slot,
+
+	// delegate/
+	ItemNavigation,
+	ResizeHandler,
+	ScrollEnablement,
+
+	// locale/
+	applyDirection,
+	attachDirectionChange,
+	detachDirectionChange,
+	getEffectiveDir,
+	attachLanguageChange,
+	detachLanguageChange,
+
+	// util/
+	URLListValidator,
+	sanitizeHTML,
+
+	// Assets.ts
+	registerI18nLoader,
+	registerLocaleDataLoader,
+	registerThemePropertiesLoader,
+	registerIconLoader,
+
+	// Boot.ts
+	attachBoot,
+
+	// CSP.ts
+	setPackageCSSRoot,
+	setUseLinks,
+	setPreloadLinks,
+
+	// CustomElementsScope.ts
+	setCustomElementsScopingSuffix,
+	getCustomElementsScopingSuffix,
+	setCustomElementsScopingRules,
+	getCustomElementsScopingRules,
+	getEffectiveScopingSuffixForTag,
+
+	// Device.ts
+	supportsTouch,
+	isIE,
+	isSafari,
+	isChrome,
+	isFirefox,
+	isPhone,
+	isTablet,
+	isDesktop,
+	isCombi,
+	isIOS,
+	isAndroid,
+
+	// EventProvider.ts
+	EventProvider,
+
+	// i18nBundle.ts
+	I18nBundle,
+	getI18nBundle,
+	registerCustomI18nBundleGetter,
+
+	// MediaRange.ts
+	MediaRange,
+
+	// PropertiesFileFormat.ts
+	parseProperties,
+
+	// Render.ts
+	renderDeferred,
+	renderImmediately,
+	cancelRender,
+	renderFinished,
+
+	// Theming.ts
+	addCustomCSS,
+	attachThemeLoaded,
+	detachThemeLoaded,
+
+	// UI5Element.ts
+	UI5Element,
+};

package/lib/generate-asset-parameters/index.js

@@ -1,15 +1,17 @@
-const fs = require('fs').promises;
-const assets = require('@ui5/webcomponents-tools/assets-meta.js');
+import fs from "fs/promises";
+import assets from "@ui5/webcomponents-tools/assets-meta.js";
 
 const fileContent = `const assetParameters = ${JSON.stringify(assets)};
 
 const DEFAULT_THEME = assetParameters.themes.default;
+const SUPPORTED_THEMES = assetParameters.themes.all;
 const DEFAULT_LANGUAGE = assetParameters.languages.default;
 const DEFAULT_LOCALE = assetParameters.locales.default;
 const SUPPORTED_LOCALES = assetParameters.locales.all;
 
 export {
 	DEFAULT_THEME,
+	SUPPORTED_THEMES,
 	DEFAULT_LANGUAGE,
 	DEFAULT_LOCALE,
 	SUPPORTED_LOCALES,

package/lib/generate-styles/index.js

@@ -1,21 +1,26 @@
-const fs = require('fs').promises;
-const path = require('path');
-const CleanCSS = require('clean-css');
+import fs from 'fs/promises';
+import path from "path";
+import CleanCSS from "clean-css";
 
 const generate = async () => {
-	await fs.mkdir("dist/generated/css/");
+	await fs.mkdir("src/generated/css/", {recursive: true});
 
 	const files = (await fs.readdir("src/css/")).filter(file => file.endsWith(".css"));
 	const filesPromises = files.map(async file => {
 		let content = await fs.readFile(path.join("src/css/", file));
 		const res = new CleanCSS().minify(`${content}`);
-		content = `export default {
+		content = `import type { StyleData } from "../../types.js";
+
+const styleData: StyleData = {
 	packageName: "@ui5/webcomponents-base",
 	fileName: "${file}",
-	content: \`${res.styles}\`
-};`;
+	content: \`${res.styles}\`,
+};
+
+export default styleData;
+`;
 
-		return fs.writeFile(path.join("dist/generated/css/", `${file}.js`), content);
+		return fs.writeFile(path.join("src/generated/css/", `${file}.ts`), content);
 	});
 
 	return Promise.all(filesPromises);

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

@@ -1,4 +1,4 @@
-const fs = require('fs').promises;
+import fs from "fs/promises";
 
 const generate = async () => {
 	const version = JSON.parse(await fs.readFile("package.json")).version;

package/{package-scripts.js → package-scripts.cjs}

@@ -6,16 +6,17 @@ const stylesScript = resolve.sync("@ui5/webcomponents-base/lib/generate-styles/i
 const versionScript = resolve.sync("@ui5/webcomponents-base/lib/generate-version-info/index.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 preprocessJSDocScript = resolve.sync("@ui5/webcomponents-tools/lib/jsdoc/preprocess.js");
 
 const LIB = path.join(__dirname, `../tools/lib/`);
 
 const viteConfig = `-c "${require.resolve("@ui5/webcomponents-tools/components-package/vite.config.js")}"`;
-const eslintConfig = `--config ${require.resolve("@ui5/webcomponents-tools/components-package/eslint.js")}`;
 
 const scripts = {
-	clean: "rimraf dist && rimraf .port",
-	lint: `eslint . ${eslintConfig}`,
-	prepare: "nps clean integrate copy generateAssetParameters generateVersionInfo generateStyles",
+	clean: "rimraf jsdoc-dist && rimraf src/generated && rimraf dist && rimraf .port",
+	lint: `eslint .`,
+	prepare: "cross-env UI5_TS=true nps clean integrate copy generateAssetParameters generateVersionInfo generateStyles generateTemplates typescript generateAPI",
+	typescript: "tsc",
 	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/`,
@@ -29,25 +30,39 @@ const scripts = {
 		},
 	},
 	build: {
-		default: `nps lint prepare build.bundle`,
+		default: `nps prepare lint build.bundle`,
 		bundle: `vite build ${viteConfig}`,
 	},
 	copy: {
 		default: "nps copy.src",
-		src: `copy-and-watch "src/**/*.{js,css}" dist/`,
+		src: `copy-and-watch "src/**/*.{js,css,d.ts}" dist/`,
 	},
 	generateAssetParameters: `node "${assetParametersScript}"`,
 	generateVersionInfo: `node "${versionScript}"`,
 	generateStyles: `node "${stylesScript}"`,
+	generateTemplates: `mkdirp src/generated/templates && cross-env UI5_BASE=true UI5_TS=true node "${LIB}/hbs2ui5/index.js" -d test/elements -o src/generated/templates`,
+	generateAPI: {
+		default: "nps generateAPI.prepare generateAPI.preprocess generateAPI.jsdoc generateAPI.cleanup",
+		prepare: `copy-and-watch "dist/**/*.js" jsdoc-dist/`,
+		preprocess: `node "${preprocessJSDocScript}" jsdoc-dist/`,
+		jsdoc: `jsdoc -c "${LIB}/jsdoc/configTypescript.json"`,
+		cleanup: "rimraf jsdoc-dist/"
+	},
 	watch: {
-		default: 'concurrently "nps watch.src" "nps watch.styles"',
-		withBundle: 'concurrently "nps watch.src" "nps watch.bundle" "nps watch.styles"',
+		default: 'concurrently "nps watch.src" "nps watch.styles" "nps watch.typescript"',
+		withBundle: 'concurrently "nps watch.src" "nps watch.bundle" "nps watch.styles" "nps watch.typescript"',
 		src: 'nps "copy.src --watch --skip-initial-copy"',
+		typescript: 'tsc --watch',
 		bundle: `node ${LIB}/dev-server/dev-server.js ${viteConfig}`,
 		styles: 'chokidar "src/css/*.css" -c "nps generateStyles"'
 	},
 	start: "nps prepare watch.withBundle",
-	test: `node "${LIB}/test-runner/test-runner.js"`,
+	test: {
+		default: 'concurrently "nps test.wdio" "nps test.ssr" "nps test.ssr2"',
+		ssr: `mocha test/ssr`,
+		ssr2: "node -e \"import('./dist/Device.js')\"",
+		wdio: `node "${LIB}/test-runner/test-runner.js"`
+	},
 };
 
 

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@ui5/webcomponents-base",
-  "version": "0.0.0-7e7d9ea6f",
+  "version": "0.0.0-81513ce21",
   "description": "UI5 Web Components: webcomponents.base",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
+  "type": "module",
   "module": "index.js",
   "keywords": [
     "openui5",
@@ -35,9 +36,9 @@
   },
   "devDependencies": {
     "@buxlabs/amd-to-es6": "0.16.1",
-    "@openui5/sap.ui.core": "1.101.0",
-    "@ui5/webcomponents-tools": "0.0.0-7e7d9ea6f",
-    "chromedriver": "102.0.0",
+    "@openui5/sap.ui.core": "1.112.0",
+    "@ui5/webcomponents-tools": "0.0.0-81513ce21",
+    "chromedriver": "112.0.0",
     "clean-css": "^5.2.2",
     "copy-and-watch": "^0.1.5",
     "cross-env": "^7.0.3",

package/src/css/FontFace.css

@@ -3,8 +3,7 @@
     font-style: normal;
     font-weight: 400;
     src: local("72"),
-    url(https://ui5.sap.com/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Regular.woff2?ui5-webcomponents) format("woff2"),
-    url(https://ui5.sap.com/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Regular.woff?ui5-webcomponents) format("woff");
+    url(https://sdk.openui5.org/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Regular.woff2?ui5-webcomponents) format("woff2");
 }
 
 @font-face {
@@ -12,8 +11,7 @@
     font-style: normal;
     font-weight: 400;
     src: local('72-full'),
-    url(https://ui5.sap.com/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Regular-full.woff2?ui5-webcomponents) format("woff2"),
-    url(https://ui5.sap.com/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Regular-full.woff?ui5-webcomponents) format("woff");
+    url(https://sdk.openui5.org/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Regular-full.woff2?ui5-webcomponents) format("woff2");
 
 }
 
@@ -22,8 +20,7 @@
     font-style: normal;
     font-weight: 700;
     src: local('72-Bold'),
-    url(https://ui5.sap.com/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold.woff2?ui5-webcomponents) format("woff2"),
-    url(https://ui5.sap.com/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold.woff?ui5-webcomponents) format("woff");
+    url(https://sdk.openui5.org/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold.woff2?ui5-webcomponents) format("woff2");
 }
 
 @font-face {
@@ -31,38 +28,33 @@
     font-style: normal;
     font-weight: 700;
     src: local('72-Bold-full'),
-    url(https://ui5.sap.com/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold-full.woff2?ui5-webcomponents) format("woff2"),
-    url(https://ui5.sap.com/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold-full.woff?ui5-webcomponents) format("woff");
+    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://ui5.sap.com/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold.woff2?ui5-webcomponents) format("woff2"),
-    url(https://ui5.sap.com/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold.woff?ui5-webcomponents) format("woff");
+    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://ui5.sap.com/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold-full.woff2?ui5-webcomponents) format("woff2"),
-         url(https://ui5.sap.com/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold-full.woff?ui5-webcomponents) format("woff");
+    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://ui5.sap.com/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Light.woff2?ui5-webcomponents) format("woff2"),
-        url(https://ui5.sap.com/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Light.woff?ui5-webcomponents) format("woff");
+        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://ui5.sap.com/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Light-full.woff2?ui5-webcomponents) format("woff2"),
-    url(https://ui5.sap.com/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Light-full.woff?ui5-webcomponents) format("woff");
+    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 {
@@ -70,6 +62,5 @@
     font-style: bold;
     font-weight: 900;
     src: local('72Black'),
-    url(https://openui5nightly.hana.ondemand.com/resources/sap/ui/core/themes/sap_horizon/fonts/72-Black.woff2?ui5-webcomponents) format("woff2"),
-    url(https://openui5nightly.hana.ondemand.com/resources/sap/ui/core/themes/sap_horizon/fonts/72-Black.woff?ui5-webcomponents) format("woff");
+    url(https://sdk.openui5.org/resources/sap/ui/core/themes/sap_horizon/fonts/72-Black.woff2?ui5-webcomponents) format("woff2");
 }

package/tsconfig.json

@@ -0,0 +1,15 @@
+{
+    "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,
+      "module": "node16",
+      "moduleResolution": "node16",
+    },
+}

package/config/wdio.conf.js

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

package/dist/RenderScheduler.js

@@ -1,44 +0,0 @@
-import {
-	renderDeferred,
-	renderImmediately,
-	renderFinished,
-} from "./Render.js";
-
-/**
- * @deprecated Use the Render.js module instead
- */
-class RenderScheduler {
-	/**
-	 * Schedules a render task (if not already scheduled) to render the component
-	 *
-	 * @param webComponent
-	 * @returns {Promise}
-	 * @deprecated Use renderDeferred from the Render.js module instead
-	 */
-	static async renderDeferred(webComponent) {
-		console.log("RenderScheduler.renderDeferred is deprecated, please use renderDeferred, exported by Render.js instead"); // eslint-disable-line
-		await renderDeferred(webComponent);
-	}
-
-	/**
-	 * Renders a component synchronously
-	 *
-	 * @param webComponent
-	 * @deprecated Use renderImmediately from the Render.js module instead
-	 */
-	static renderImmediately(webComponent) {
-		console.log("RenderScheduler.renderImmediately is deprecated, please use renderImmediately, exported by Render.js instead"); // eslint-disable-line
-		return renderImmediately(webComponent);
-	}
-
-	/**
-	 * @deprecated Use renderFinished from the Render.js module instead
-	 * @returns {Promise<void>}
-	 */
-	static async whenFinished() {
-		console.log("RenderScheduler.whenFinished is deprecated, please use renderFinished, exported by Render.js instead"); // eslint-disable-line
-		await renderFinished();
-	}
-}
-
-export default RenderScheduler;

package/dist/animations/config.js

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