@ui5/webcomponents-base 1.7.1 → 1.9.0

package/package-scripts.js

@@ -15,7 +15,7 @@ const eslintConfig = `--config ${require.resolve("@ui5/webcomponents-tools/compo
 const scripts = {
 	clean: "rimraf dist && rimraf .port",
 	lint: `eslint . ${eslintConfig}`,
-	prepare: "nps clean integrate copy generateAssetParameters generateVersionInfo generateStyles",
+	prepare: "nps clean integrate copy generateAssetParameters generateVersionInfo generateStyles generateTemplates generateAPI",
 	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/`,
@@ -39,6 +39,8 @@ const scripts = {
 	generateAssetParameters: `node "${assetParametersScript}"`,
 	generateVersionInfo: `node "${versionScript}"`,
 	generateStyles: `node "${stylesScript}"`,
+	generateTemplates: `mkdirp dist/generated/templates && node "${LIB}/hbs2ui5/index.js" -d test/elements -o dist/generated/templates`,
+	generateAPI: `jsdoc -c "${LIB}/jsdoc/config.json"`,
 	watch: {
 		default: 'concurrently "nps watch.src" "nps watch.styles"',
 		withBundle: 'concurrently "nps watch.src" "nps watch.bundle" "nps watch.styles"',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-base",
-  "version": "1.7.1",
+  "version": "1.9.0",
   "description": "UI5 Web Components: webcomponents.base",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -36,8 +36,8 @@
   "devDependencies": {
     "@buxlabs/amd-to-es6": "0.16.1",
     "@openui5/sap.ui.core": "1.101.0",
-    "@ui5/webcomponents-tools": "1.7.1",
-    "chromedriver": "104.0.0",
+    "@ui5/webcomponents-tools": "1.9.0",
+    "chromedriver": "106.0.1",
     "clean-css": "^5.2.2",
     "copy-and-watch": "^0.1.5",
     "cross-env": "^7.0.3",

package/src/Boot.js

@@ -33,10 +33,14 @@ const boot = async () => {
 		registerCurrentRuntime();
 
 		const OpenUI5Support = getFeature("OpenUI5Support");
+		const isOpenUI5Loaded = OpenUI5Support ? OpenUI5Support.isLoaded() : false;
 		const F6Navigation = getFeature("F6Navigation");
+
 		if (OpenUI5Support) {
 			await OpenUI5Support.init();
-		} else if (F6Navigation) {
+		}
+
+		if (F6Navigation && !isOpenUI5Loaded) {
 			F6Navigation.init();
 		}
 

package/src/InitialConfiguration.js

@@ -1,12 +1,14 @@
 import merge from "./thirdparty/merge.js";
 import { getFeature } from "./FeaturesRegistry.js";
 import { DEFAULT_THEME } from "./generated/AssetParameters.js";
+import validateThemeRoot from "./validateThemeRoot.js";
 
 let initialized = false;
 
 let initialConfig = {
 	animationMode: "full",
 	theme: DEFAULT_THEME,
+	themeRoot: null,
 	rtl: null,
 	language: null,
 	calendarType: null,
@@ -26,6 +28,11 @@ const getTheme = () => {
 	return initialConfig.theme;
 };
 
+const getThemeRoot = () => {
+	initConfiguration();
+	return initialConfig.themeRoot;
+};
+
 const getRTL = () => {
 	initConfiguration();
 	return initialConfig.rtl;
@@ -106,7 +113,13 @@ const parseURLParameters = () => {
 	});
 };
 
-const normalizeParamValue = (param, value) => {
+const normalizeThemeRootParamValue = value => {
+	const themeRoot = value.split("@")[1];
+
+	return validateThemeRoot(themeRoot);
+};
+
+const normalizeThemeParamValue = (param, value) => {
 	if (param === "theme" && value.includes("@")) { // the theme parameter might have @<URL-TO-THEME> in the value - strip this
 		return value.split("@")[0];
 	}
@@ -122,9 +135,15 @@ const applyURLParam = (key, value, paramType) => {
 		value = booleanMapping.get(lowerCaseValue);
 	}
 
-	value = normalizeParamValue(param, value);
+	if (param === "theme") {
+		initialConfig.theme = normalizeThemeParamValue(param, value);
 
-	initialConfig[param] = value;
+		if (value && value.includes("@")) {
+			initialConfig.themeRoot = normalizeThemeRootParamValue(value);
+		}
+	} else {
+		initialConfig[param] = value;
+	}
 };
 
 const applyOpenUI5Configuration = () => {
@@ -157,6 +176,7 @@ const initConfiguration = () => {
 export {
 	getAnimationMode,
 	getTheme,
+	getThemeRoot,
 	getRTL,
 	getLanguage,
 	getFetchDefaultLanguage,

package/src/Keys.js

@@ -215,7 +215,7 @@ const isF6Next = event => ((event.key ? event.key === "F6" : event.keyCode === K
 || ((event.key ? (event.key === "ArrowDown" || event.key === "Down") : event.keyCode === KeyCodes.ARROW_DOWN) && checkModifierKeys(event, true, true, false));
 
 const isF6Previous = event => ((event.key ? event.key === "F6" : event.keyCode === KeyCodes.F6) && checkModifierKeys(event, false, false, true))
-|| ((event.key ? (event.key === "ArrowUp" || event.key === "Up") : event.keyCode === KeyCodes.ARROW_Up) && checkModifierKeys(event, true, true, false));
+|| ((event.key ? (event.key === "ArrowUp" || event.key === "Up") : event.keyCode === KeyCodes.ARROW_UP) && checkModifierKeys(event, true, true, false));
 
 const isF7 = event => (event.key ? event.key === "F7" : event.keyCode === KeyCodes.F7) && !hasModifierKeys(event);
 

package/src/StaticAreaItem.js

@@ -16,6 +16,8 @@ class StaticAreaItem extends HTMLElement {
 		super();
 		this._rendered = false;
 		this.attachShadow({ mode: "open" });
+		this.pureTagName = "ui5-static-area-item";
+		this.popupIntegrationAttr = "data-sap-ui-integration-popup-content";
 	}
 
 	/**
@@ -36,6 +38,7 @@ class StaticAreaItem extends HTMLElement {
 	 */
 	update() {
 		if (this._rendered) {
+			this._updateAdditionalAttrs();
 			this._updateContentDensity();
 			this._updateDirection();
 			updateShadowRoot(this.ownerElement, true);
@@ -65,6 +68,11 @@ class StaticAreaItem extends HTMLElement {
 		}
 	}
 
+	_updateAdditionalAttrs() {
+		this.setAttribute(this.pureTagName, "");
+		this.setAttribute(this.popupIntegrationAttr, "");
+	}
+
 	/**
 	 * @protected
 	 * Returns reference to the DOM element where the current fragment is added.

package/src/asset-registries/Icons.js

@@ -46,7 +46,7 @@ const _fillRegistry = bundleData => {
 };
 
 // set
-const registerIcon = (name, { pathData, ltr, accData, collection, packageName } = {}) => { // eslint-disable-line
+const registerIcon = (name, { pathData, ltr, accData, collection, packageName, customTemplate, viewBox } = {}) => { // eslint-disable-line
 	if (!collection) {
 		collection = getEffectiveDefaultIconCollection();
 	}
@@ -57,6 +57,8 @@ const registerIcon = (name, { pathData, ltr, accData, collection, packageName }
 		ltr,
 		accData,
 		packageName,
+		customTemplate,
+		viewBox,
 	});
 };
 

package/src/asset-registries/Illustrations.js

@@ -1,6 +1,8 @@
 import getSharedResource from "../getSharedResource.js";
 
+const loaders = new Map();
 const registry = getSharedResource("SVGIllustration.registry", new Map());
+const illustrationPromises = getSharedResource("SVGIllustration.promises", new Map());
 const ILLUSTRATION_NOT_FOUND = "ILLUSTRATION_NOT_FOUND";
 
 const registerIllustration = (name, { dialogSvg, sceneSvg, spotSvg, set, title, subtitle } = {}) => { // eslint-disable-line
@@ -13,6 +15,21 @@ const registerIllustration = (name, { dialogSvg, sceneSvg, spotSvg, set, title,
 	});
 };
 
+const registerIllustrationLoader = async (illustrationName, loader) => {
+	loaders.set(illustrationName, loader);
+};
+
+const _loadIllustrationOnce = async illustrationName => {
+	if (!illustrationPromises.has(illustrationName)) {
+		if (!loaders.has(illustrationName)) {
+			throw new Error(`No loader registered for the ${illustrationName} illustration. Probably you forgot to import the "@ui5/webcomponents-fiori/dist/illustrations/AllIllustrations.js" module.`);
+		}
+		const loadIllustrations = loaders.get(illustrationName);
+		illustrationPromises.set(illustrationName, loadIllustrations(illustrationName));
+	}
+	return illustrationPromises.get(illustrationName);
+};
+
 const getIllustrationDataSync = nameProp => {
 	let set = "fiori";
 
@@ -20,11 +37,23 @@ const getIllustrationDataSync = nameProp => {
 		set = "tnt";
 		nameProp = nameProp.replace(/^Tnt/, "");
 	}
+	return registry.get(`${set}/${nameProp}`);
+};
+
+const getIllustrationData = async illustrationName => {
+	let set = "fiori";
 
-	return registry.get(`${set}/${nameProp}`) || ILLUSTRATION_NOT_FOUND;
+	await _loadIllustrationOnce(illustrationName);
+	if (illustrationName.startsWith("Tnt")) {
+		set = "tnt";
+		illustrationName = illustrationName.replace(/^Tnt/, "");
+	}
+	return registry.get(`${set}/${illustrationName}`) || ILLUSTRATION_NOT_FOUND;
 };
 
 export {
 	getIllustrationDataSync,
 	registerIllustration,
+	registerIllustrationLoader,
+	getIllustrationData,
 };

package/src/asset-registries/LocaleData.js

@@ -15,18 +15,12 @@ const M_ISO639_OLD_TO_NEW = {
 	"in": "id",
 };
 
-const DEV_MODE = false;
-
 const _showAssetsWarningOnce = localeId => {
 	if (warningShown) {
 		return;
 	}
 
-	if (!DEV_MODE) {
-		console.warn(`[LocaleData] Supported locale "${localeId}" not configured, import the "Assets.js" module from the webcomponents package you are using.`); /* eslint-disable-line */
-	} else {
-		console.warn(`[LocaleData] Note: in dev mode, CLDR assets might be disabled for performance reasons. Try running "ENABLE_CLDR=1 yarn start" to test CLDR assets.`); /* eslint-disable-line */
-	}
+	console.warn(`[LocaleData] Supported locale "${localeId}" not configured, import the "Assets.js" module from the webcomponents package you are using.`); /* eslint-disable-line */
 
 	warningShown = true;
 };

package/src/config/ThemeRoots.js

@@ -0,0 +1,39 @@
+import createLinkInHead from "../util/createLinkInHead.js";
+import validateThemeRoot from "../validateThemeRoot.js";
+import { getThemeRoot as getConfiguredThemeRoot } from "../InitialConfiguration.js";
+
+let themeRoot;
+
+const getThemeRoot = () => {
+	if (themeRoot === undefined) {
+		themeRoot = getConfiguredThemeRoot();
+	}
+
+	return themeRoot;
+};
+
+const setThemeRoot = (theme, newThemeRoot) => {
+	themeRoot = validateThemeRoot(newThemeRoot);
+
+	attachCustomThemeStylesToHead(theme);
+};
+
+const formatThemeLink = theme => {
+	return `${getThemeRoot()}Base/baseLib/${theme}/css_variables.css`;
+};
+
+const attachCustomThemeStylesToHead = async theme => {
+	const link = document.querySelector(`[sap-ui-webcomponents-theme="${theme}"]`);
+
+	if (link) {
+		document.head.removeChild(link);
+	}
+
+	await createLinkInHead(formatThemeLink(theme), { "sap-ui-webcomponents-theme": theme });
+};
+
+export {
+	getThemeRoot,
+	setThemeRoot,
+	attachCustomThemeStylesToHead,
+};

package/src/css/FontFace.css

@@ -62,5 +62,5 @@
     font-style: bold;
     font-weight: 900;
     src: local('72Black'),
-    url(https://sdk.openui5.org.com/resources/sap/ui/core/themes/sap_horizon/fonts/72-Black.woff2?ui5-webcomponents) format("woff2");
+    url(https://sdk.openui5.org/resources/sap/ui/core/themes/sap_horizon/fonts/72-Black.woff2?ui5-webcomponents) format("woff2");
 }

package/src/features/F6Navigation.js

@@ -1,6 +1,7 @@
 import { registerFeature } from "../FeaturesRegistry.js";
 import { isF6Next, isF6Previous } from "../Keys.js";
 import { getFirstFocusableElement } from "../util/FocusableElements.js";
+import getFastNavigationGroups from "../util/getFastNavigationGroups.js";
 
 class F6Navigation {
 	init() {
@@ -17,6 +18,7 @@ class F6Navigation {
 	async _keydownHandler(event) {
 		if (isF6Next(event)) {
 			this.updateGroups();
+
 			if (this.groups.length < 1) {
 				return;
 			}
@@ -42,6 +44,7 @@ class F6Navigation {
 
 		if (isF6Previous(event)) {
 			this.updateGroups();
+
 			if (this.groups.length < 1) {
 				return;
 			}
@@ -51,24 +54,20 @@ class F6Navigation {
 			const nextIndex = this.groups.indexOf(this.selectedGroup);
 			let nextElement = null;
 
-			if (nextIndex > -1) {
-				if (nextIndex - 1 < 0) {
-					nextElement = this.groups[this.groups.length - 1];
-				} else {
-					// Handle the situation where the first focusable element of two neighbor groups is the same
-					// For example:
-					// <ui5-flexible-column-layout>
-					//     <ui5-list>
-					//         <ui5-li>List Item</ui5-li>
-					//     </ui5-list>
-					// </ui5-flexible-column-layout>
-					// Here for both FCL & List the firstFoccusableElement is the same (the ui5-li)
-
-					const firstFocusable = await getFirstFocusableElement(this.groups[nextIndex - 1], true);
-					const shouldSkipParent = firstFocusable === await getFirstFocusableElement(this.groups[nextIndex], true);
-
-					nextElement = this.groups[shouldSkipParent ? nextIndex - 2 : nextIndex - 1];
-				}
+			if (nextIndex > 0) {
+				// Handle the situation where the first focusable element of two neighbor groups is the same
+				// For example:
+				// <ui5-flexible-column-layout>
+				//     <ui5-list>
+				//         <ui5-li>List Item</ui5-li>
+				//     </ui5-list>
+				// </ui5-flexible-column-layout>
+				// Here for both FCL & List the firstFoccusableElement is the same (the ui5-li)
+
+				const firstFocusable = await getFirstFocusableElement(this.groups[nextIndex - 1], true);
+				const shouldSkipParent = firstFocusable === await getFirstFocusableElement(this.groups[nextIndex], true);
+
+				nextElement = this.groups[shouldSkipParent ? nextIndex - 2 : nextIndex - 1];
 			} else {
 				nextElement = this.groups[this.groups.length - 1];
 			}
@@ -83,22 +82,29 @@ class F6Navigation {
 	}
 
 	updateGroups() {
-		this.setSelectedGroup(document.activeElement);
-		this.setGroups();
+		this.setSelectedGroup();
+		this.groups = getFastNavigationGroups(document.body);
 	}
 
-	setGroups() {
-		this.groups = Array.from(document.querySelectorAll("[data-sap-ui-fastnavgroup='true']")).filter(group => group.clientWidth && window.getComputedStyle(group).visibility !== "hidden");
-	}
+	setSelectedGroup(element = document) {
+		const htmlElement = document.querySelector("html");
+		element = this.deepActive(element);
 
-	setSelectedGroup(element) {
-		while (element && element.getAttribute("data-sap-ui-fastnavgroup") !== "true" && element !== document.querySelector("html")) {
+		while (element && element.getAttribute("data-sap-ui-fastnavgroup") !== "true" && element !== htmlElement) {
 			element = element.parentElement ? element.parentNode : element.parentNode.host;
 		}
 
 		this.selectedGroup = element;
 	}
 
+	deepActive(root) {
+		if (root.activeElement && root.activeElement.shadowRoot) {
+			return this.deepActive(root.activeElement.shadowRoot);
+		}
+
+		return root.activeElement;
+	}
+
 	destroy() {
 		this.removeEventListeners();
 	}

package/src/features/OpenUI5Support.js

@@ -41,6 +41,7 @@ const getConfigurationSettingsObject = () => {
 		animationMode: config.getAnimationMode(),
 		language: config.getLanguage(),
 		theme: config.getTheme(),
+		themeRoot: config.getThemeRoot(),
 		rtl: config.getRTL(),
 		calendarType: config.getCalendarType(),
 		formatSettings: {

package/src/theming/applyTheme.js

@@ -3,6 +3,7 @@ import { removeStyle, createOrUpdateStyle } from "../ManagedStyles.js";
 import getThemeDesignerTheme from "./getThemeDesignerTheme.js";
 import { fireThemeLoaded } from "./ThemeLoaded.js";
 import { getFeature } from "../FeaturesRegistry.js";
+import { attachCustomThemeStylesToHead, getThemeRoot } from "../config/ThemeRoots.js";
 
 const BASE_THEME_PACKAGE = "@ui5/webcomponents-theming";
 
@@ -40,7 +41,7 @@ const loadComponentPackages = async theme => {
 	});
 };
 
-const detectExternalTheme = () => {
+const detectExternalTheme = async theme => {
 	// If theme designer theme is detected, use this
 	const extTheme = getThemeDesignerTheme();
 	if (extTheme) {
@@ -56,11 +57,15 @@ const detectExternalTheme = () => {
 				themeName: OpenUI5Support.getConfigurationSettingsObject().theme, // just themeName, baseThemeName is only relevant for custom themes
 			};
 		}
+	} else if (getThemeRoot()) {
+		await attachCustomThemeStylesToHead(theme);
+
+		return getThemeDesignerTheme();
 	}
 };
 
 const applyTheme = async theme => {
-	const extTheme = detectExternalTheme();
+	const extTheme = await detectExternalTheme(theme);
 
 	// Only load theme_base properties if there is no externally loaded theme, or there is, but it is not being loaded
 	if (!extTheme || theme !== extTheme.themeName) {

package/src/types/CSSColor.js

@@ -1,5 +1,16 @@
 import DataType from "./DataType.js";
 
+/**
+ * @class
+ * CSSColor data type.
+ *
+ * @extends sap.ui.webcomponents.base.types.DataType
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.base.types.CSSColor
+ * @public
+ * @enum {string}
+ */
 class CSSColor extends DataType {
 	static isValid(value) {
 		return /^(#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})|rgb\(\s*((1?[0-9]?[0-9]|2([0-4][0-9]|5[0-5]))|([0-9]?[0-9](\.[0-9]+)?|100(\.0+)?)%)\s*(,\s*((1?[0-9]?[0-9]|2([0-4][0-9]|5[0-5]))|([0-9]?[0-9](\.[0-9]+)?|100(\.0+)?)%)\s*){2}\)|rgba\((\s*((1?[0-9]?[0-9]|2([0-4][0-9]|5[0-5]))|([0-9]?[0-9](\.[0-9]+)?|100(\.0+)?)%)\s*,){3}\s*(0(\.[0-9]+)?|1(\.0+)?)\s*\)|hsl\(\s*([0-2]?[0-9]?[0-9]|3([0-5][0-9]|60))\s*(,\s*(([0-9]?[0-9](\.[0-9]+)?|100(\.0+)?)%)\s*){2}\)|hsla\(\s*([0-2]?[0-9]?[0-9]|3([0-5][0-9]|60))\s*,(\s*(([0-9]?[0-9](\.[0-9]+)?|100(\.0+)?)%)\s*,){2}\s*(0(\.[0-9]+)?|1(\.0+)?)\s*\)|aliceblue|antiquewhite|aqua|aquamarine|azure|beige|bisque|black|blanchedalmond|blue|blueviolet|brown|burlywood|cadetblue|chartreuse|chocolate|coral|cornflowerblue|cornsilk|crimson|cyan|darkblue|darkcyan|darkgoldenrod|darkgray|darkgrey|darkgreen|darkkhaki|darkmagenta|darkolivegreen|darkorange|darkorchid|darkred|darksalmon|darkseagreen|darkslateblue|darkslategray|darkslategrey|darkturquoise|darkviolet|deeppink|deepskyblue|dimgray|dimgrey|dodgerblue|firebrick|floralwhite|forestgreen|fuchsia|gainsboro|ghostwhite|gold|goldenrod|gray|grey|green|greenyellow|honeydew|hotpink|indianred|indigo|ivory|khaki|lavender|lavenderblush|lawngreen|lemonchiffon|lightblue|lightcoral|lightcyan|lightgoldenrodyellow|lightgray|lightgrey|lightgreen|lightpink|lightsalmon|lightseagreen|lightskyblue|lightslategray|lightslategrey|lightsteelblue|lightyellow|lime|limegreen|linen|magenta|maroon|mediumaquamarine|mediumblue|mediumorchid|mediumpurple|mediumseagreen|mediumslateblue|mediumspringgreen|mediumturquoise|mediumvioletred|midnightblue|mintcream|mistyrose|moccasin|navajowhite|navy|oldlace|olive|olivedrab|orange|orangered|orchid|palegoldenrod|palegreen|paleturquoise|palevioletred|papayawhip|peachpuff|peru|pink|plum|powderblue|purple|red|rosybrown|royalblue|saddlebrown|salmon|sandybrown|seagreen|seashell|sienna|silverskyblue|slateblue|slategray|slategrey|snow|springgreen|steelblue|tan|teal|thistle|tomato|turquoise|violet|wheat|white|whitesmoke|yellow|yellowgreen|transparent|inherit|)$/.test(value ); // eslint-disable-line

package/src/types/CSSSize.js

@@ -1,5 +1,16 @@
 import DataType from "./DataType.js";
 
+/**
+ * @class
+ * CSSSize data type.
+ *
+ * @extends sap.ui.webcomponents.base.types.DataType
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.base.types.CSSSize
+ * @public
+ * @enum {string}
+ */
 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

package/src/types/CalendarType.js

@@ -2,15 +2,52 @@ import DataType from "./DataType.js";
 
 /**
  * Different calendar types.
+ * @lends sap.ui.webcomponents.base.types.CalendarType.prototype
+ * @public
  */
 const CalendarTypes = {
+	/**
+	 * @public
+	 * @type {Gregorian}
+	 */
 	Gregorian: "Gregorian",
+
+	/**
+	 * @public
+	 * @type {Islamic}
+	 */
 	Islamic: "Islamic",
+
+	/**
+	 * @public
+	 * @type {Japanese}
+	 */
 	Japanese: "Japanese",
+
+	/**
+	 * @public
+	 * @type {Buddhist}
+	 */
 	Buddhist: "Buddhist",
+
+	/**
+	 * @public
+	 * @type {Persian}
+	 */
 	Persian: "Persian",
 };
 
+/**
+ * @class
+ * Different calendar types.
+ *
+ * @extends sap.ui.webcomponents.base.types.DataType
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.base.types.CalendarType
+ * @public
+ * @enum {string}
+ */
 class CalendarType extends DataType {
 	static isValid(value) {
 		return !!CalendarTypes[value];

package/src/types/DOMReference.js

@@ -5,6 +5,10 @@ import DataType from "./DataType.js";
  * DOM Element reference or ID.
  * <b>Note:</b> If an ID is passed, it is expected to be part of the same <code>document</code> element as the consuming component.
  *
+ * @constructor
+ * @extends sap.ui.webcomponents.base.types.DataType
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.base.types.DOMReference
  * @public
  */
 class DOMReference extends DataType {

package/src/types/DataType.js

@@ -8,6 +8,12 @@
  * @public
  */
 class DataType {
+	/**
+	 * Checks if the value is valid for its data type.
+ 	 * @public
+	 * @abstract
+	 * @returns {Boolean}
+	 */
 	static isValid(value) {
 	}
 

package/src/types/Float.js

@@ -1,5 +1,16 @@
 import DataType from "./DataType.js";
 
+/**
+ * @class
+ * Float data type.
+ *
+ * @constructor
+ * @extends sap.ui.webcomponents.base.types.DataType
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.base.types.Float
+ * @public
+ * @enum {number}
+ */
 class Float extends DataType {
 	static isValid(value) {
 		// Assuming that integers are floats as well!

package/src/types/Integer.js

@@ -1,5 +1,16 @@
 import DataType from "./DataType.js";
 
+/**
+ * @class
+ * Integer data type.
+ *
+ * @constructor
+ * @extends sap.ui.webcomponents.base.types.DataType
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.base.types.Integer
+ * @public
+ * @enum {number}
+ */
 class Integer extends DataType {
 	static isValid(value) {
 		return Number.isInteger(value);

package/src/types/InvisibleMessageMode.js

@@ -2,23 +2,39 @@ import DataType from "./DataType.js";
 
 /**
  * Enumeration for different mode behaviors of the <code>InvisibleMessage</code>.
- * @private
+ * @lends sap.ui.webcomponents.base.types.InvisibleMessageMode.prototype
+ * @public
  */
 const InvisibleMessageModes = {
 
 	/**
      * Indicates that updates to the region should be presented at the next graceful opportunity,
      * such as at the end of reading the current sentence, or when the user pauses typing.
+	 * @public
+	 * @type {Polite}
      */
 	Polite: "Polite",
 
 	/**
      * Indicates that updates to the region have the highest priority and should be presented to the user immediately.
+	 * @public
+	 * @type {Assertive}
      */
 	Assertive: "Assertive",
 
 };
 
+/**
+ * @class
+ * Different types of InvisibleMessageMode.
+ *
+ * @extends sap.ui.webcomponents.base.types.DataType
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.base.types.InvisibleMessageMode
+ * @public
+ * @enum {string}
+ */
 class InvisibleMessageMode extends DataType {
 	static isValid(value) {
 		return !!InvisibleMessageModes[value];