@ui5/webcomponents-base 0.0.0-78035f8e7 → 0.0.0-7e7d9ea6f

package/src/renderer/LitRenderer.js

@@ -1,16 +1,52 @@
-import { html, render } from "lit-html/lit-html.js";
+import {
+	render,
+	html,
+	svg,
+} from "lit-html";
+import { getFeature } from "../FeaturesRegistry.js";
 
-const litRender = (templateResult, domNode, styles, { eventContext } = {}) => {
-	if (styles) {
-		templateResult = html`<style>${styles}</style>${templateResult}`;
+const effectiveHtml = (...args) => {
+	const LitStatic = getFeature("LitStatic");
+	const fn = LitStatic ? LitStatic.html : html;
+	return fn(...args);
+};
+
+const effectiveSvg = (...args) => {
+	const LitStatic = getFeature("LitStatic");
+	const fn = LitStatic ? LitStatic.svg : svg;
+	return fn(...args);
+};
+
+const litRender = (templateResult, domNode, styleStrOrHrefsArr, forStaticArea, { host } = {}) => {
+	const OpenUI5Enablement = getFeature("OpenUI5Enablement");
+	if (OpenUI5Enablement && !forStaticArea) {
+		templateResult = OpenUI5Enablement.wrapTemplateResultInBusyMarkup(effectiveHtml, host, templateResult);
+	}
+
+	if (typeof styleStrOrHrefsArr === "string") {
+		templateResult = effectiveHtml`<style>${styleStrOrHrefsArr}</style>${templateResult}`;
+	} else if (Array.isArray(styleStrOrHrefsArr) && styleStrOrHrefsArr.length) {
+		templateResult = effectiveHtml`${styleStrOrHrefsArr.map(href => effectiveHtml`<link type="text/css" rel="stylesheet" href="${href}">`)}${templateResult}`;
 	}
-	render(templateResult, domNode, { eventContext });
+	render(templateResult, domNode, { host });
 };
 
-export { html, svg } from "lit-html/lit-html.js";
+const scopeTag = (tag, tags, suffix) => {
+	const LitStatic = getFeature("LitStatic");
+	if (LitStatic) {
+		return LitStatic.unsafeStatic((tags || []).includes(tag) ? `${tag}-${suffix}` : tag);
+	}
+};
+
+export {
+	effectiveHtml as html,
+	effectiveSvg as svg,
+};
+export { scopeTag };
 export { repeat } from "lit-html/directives/repeat.js";
 export { classMap } from "lit-html/directives/class-map.js";
-export { styleMap } from "lit-html/directives/style-map.js";
+export { styleMap } from "./directives/style-map.js";
+export { ifDefined } from "lit-html/directives/if-defined.js";
 export { unsafeHTML } from "lit-html/directives/unsafe-html.js";
 
 export default litRender;

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/src/renderer/executeTemplate.js

@@ -0,0 +1,34 @@
+import { getCustomElementsScopingSuffix, shouldScopeCustomElement } from "../CustomElementsScopeUtils.js";
+
+/**
+ * Runs a component's template with the component's current state, while also scoping HTML
+ *
+ * @param template - the template to execute
+ * @param component - the component
+ * @public
+ * @returns {*}
+ */
+const executeTemplate = (template, component) => {
+	const tagsToScope = getTagsToScope(component);
+	const scope = getCustomElementsScopingSuffix();
+	return template(component, tagsToScope, scope);
+};
+
+/**
+ * Returns all tags, used inside component's template subject to scoping.
+ * @param component - the component
+ * @returns {Array[]}
+ * @private
+ */
+const getTagsToScope = component => {
+	const componentTag = component.constructor.getMetadata().getPureTag();
+	const tagsToScope = component.constructor.getUniqueDependencies().map(dep => dep.getMetadata().getPureTag()).filter(shouldScopeCustomElement);
+
+	if (shouldScopeCustomElement(componentTag)) {
+		tagsToScope.push(componentTag);
+	}
+
+	return tagsToScope;
+};
+
+export default executeTemplate;

package/src/theming/CustomStyle.js

@@ -1,19 +1,60 @@
-const customCSSFor = {};
+import { reRenderAllUI5Elements } from "../Render.js";
+import getSharedResource from "../getSharedResource.js";
+import EventProvider from "../EventProvider.js";
 
-const addCustomCSS = (tag, css, ...rest) => {
-	if (rest.length) {
-		throw new Error("addCustomCSS no longer accepts theme specific CSS. new signature is `addCustomCSS(tag, css)`");
+const eventProvider = getSharedResource("CustomStyle.eventProvider", new EventProvider());
+const CUSTOM_CSS_CHANGE = "CustomCSSChange";
+
+const attachCustomCSSChange = listener => {
+	eventProvider.attachEvent(CUSTOM_CSS_CHANGE, listener);
+};
+
+const detachCustomCSSChange = listener => {
+	eventProvider.detachEvent(CUSTOM_CSS_CHANGE, listener);
+};
+
+const fireCustomCSSChange = tag => {
+	return eventProvider.fireEvent(CUSTOM_CSS_CHANGE, tag);
+};
+
+const customCSSFor = getSharedResource("CustomStyle.customCSSFor", {});
+
+// Listen to the eventProvider, in case other copies of this CustomStyle module fire this
+// event, and this copy would therefore need to reRender the ui5 webcomponents; but
+// don't reRender if it was this copy that fired the event to begin with.
+let skipRerender;
+attachCustomCSSChange(tag => {
+	if (!skipRerender) {
+		reRenderAllUI5Elements({ tag });
 	}
+});
 
+const addCustomCSS = (tag, css) => {
 	if (!customCSSFor[tag]) {
 		customCSSFor[tag] = [];
 	}
-
 	customCSSFor[tag].push(css);
+
+	skipRerender = true;
+	try {
+		// The event is fired and the attached event listeners are all called synchronously
+		// The skipRerender flag will be used to avoid calling reRenderAllUI5Elements twice when it is this copy
+		// of CustomStyle.js which is firing the `CustomCSSChange` event.
+		fireCustomCSSChange(tag);
+	} finally {
+		skipRerender = false;
+	}
+
+	return reRenderAllUI5Elements({ tag });
 };
 
 const getCustomCSS = tag => {
 	return customCSSFor[tag] ? customCSSFor[tag].join("") : "";
 };
 
-export { addCustomCSS, getCustomCSS };
+export {
+	addCustomCSS,
+	getCustomCSS,
+	attachCustomCSSChange,
+	detachCustomCSSChange,
+};

package/src/theming/ThemeLoaded.js

@@ -0,0 +1,22 @@
+import EventProvider from "../EventProvider.js";
+
+const eventProvider = new EventProvider();
+const THEME_LOADED = "themeLoaded";
+
+const attachThemeLoaded = listener => {
+	eventProvider.attachEvent(THEME_LOADED, listener);
+};
+
+const detachThemeLoaded = listener => {
+	eventProvider.detachEvent(THEME_LOADED, listener);
+};
+
+const fireThemeLoaded = theme => {
+	return eventProvider.fireEvent(THEME_LOADED, theme);
+};
+
+export {
+	attachThemeLoaded,
+	detachThemeLoaded,
+	fireThemeLoaded,
+};

package/src/theming/applyTheme.js

@@ -1,10 +1,10 @@
 import { getThemeProperties, getRegisteredPackages, isThemeRegistered } from "../asset-registries/Themes.js";
-import createThemePropertiesStyleTag from "./createThemePropertiesStyleTag.js";
+import { removeStyle, createOrUpdateStyle } from "../ManagedStyles.js";
 import getThemeDesignerTheme from "./getThemeDesignerTheme.js";
-import { ponyfillNeeded, runPonyfill } from "./CSSVarsPonyfill.js";
+import { fireThemeLoaded } from "./ThemeLoaded.js";
 import { getFeature } from "../FeaturesRegistry.js";
 
-const BASE_THEME_PACKAGE = "@ui5/webcomponents-theme-base";
+const BASE_THEME_PACKAGE = "@ui5/webcomponents-theming";
 
 const isThemeBaseRegistered = () => {
 	const registeredPackages = getRegisteredPackages();
@@ -16,15 +16,14 @@ const loadThemeBase = async theme => {
 		return;
 	}
 
-	const cssText = await getThemeProperties(BASE_THEME_PACKAGE, theme);
-	createThemePropertiesStyleTag(cssText, BASE_THEME_PACKAGE);
+	const cssData = await getThemeProperties(BASE_THEME_PACKAGE, theme);
+	if (cssData) {
+		createOrUpdateStyle(cssData, "data-ui5-theme-properties", BASE_THEME_PACKAGE);
+	}
 };
 
 const deleteThemeBase = () => {
-	const styleElement = document.head.querySelector(`style[data-ui5-theme-properties="${BASE_THEME_PACKAGE}"]`);
-	if (styleElement) {
-		styleElement.parentElement.removeChild(styleElement);
-	}
+	removeStyle("data-ui5-theme-properties", BASE_THEME_PACKAGE);
 };
 
 const loadComponentPackages = async theme => {
@@ -34,8 +33,10 @@ const loadComponentPackages = async theme => {
 			return;
 		}
 
-		const cssText = await getThemeProperties(packageName, theme);
-		createThemePropertiesStyleTag(cssText, packageName);
+		const cssData = await getThemeProperties(packageName, theme);
+		if (cssData) {
+			createOrUpdateStyle(cssData, "data-ui5-theme-properties", packageName);
+		}
 	});
 };
 
@@ -72,10 +73,7 @@ const applyTheme = async theme => {
 	const packagesTheme = isThemeRegistered(theme) ? theme : extTheme && extTheme.baseThemeName;
 	await loadComponentPackages(packagesTheme);
 
-	// When changing the theme, run the ponyfill immediately
-	if (ponyfillNeeded()) {
-		runPonyfill();
-	}
+	fireThemeLoaded(theme);
 };
 
 export default applyTheme;

package/src/theming/getConstructableStyle.js

@@ -1,25 +1,30 @@
 import getEffectiveStyle from "./getEffectiveStyle.js";
+import { attachCustomCSSChange } from "./CustomStyle.js";
 
 const constructableStyleMap = new Map();
 
+attachCustomCSSChange(tag => {
+	constructableStyleMap.delete(`${tag}_normal`); // there is custom CSS only for the component itself, not for its static area part
+});
+
 /**
  * Returns (and caches) a constructable style sheet for a web component class
  * Note: Chrome
  * @param ElementClass
  * @returns {*}
  */
-const getConstructableStyle = ElementClass => {
-	const tagName = ElementClass.getMetadata().getTag();
-	const styleContent = getEffectiveStyle(ElementClass);
-	if (constructableStyleMap.has(tagName)) {
-		return constructableStyleMap.get(tagName);
-	}
+const getConstructableStyle = (ElementClass, forStaticArea = false) => {
+	const tag = ElementClass.getMetadata().getTag();
+	const key = `${tag}_${forStaticArea ? "static" : "normal"}`;
 
-	const style = new CSSStyleSheet();
-	style.replaceSync(styleContent);
+	if (!constructableStyleMap.has(key)) {
+		const styleContent = getEffectiveStyle(ElementClass, forStaticArea);
+		const style = new CSSStyleSheet();
+		style.replaceSync(styleContent);
+		constructableStyleMap.set(key, [style]);
+	}
 
-	constructableStyleMap.set(tagName, style);
-	return style;
+	return constructableStyleMap.get(key);
 };
 
 export default getConstructableStyle;

package/src/theming/getEffectiveLinksHrefs.js

@@ -0,0 +1,27 @@
+import { getUrl } from "../CSP.js";
+import { getFeature } from "../FeaturesRegistry.js";
+
+const flatten = arr => {
+	return arr.reduce((acc, val) => acc.concat(Array.isArray(val) ? flatten(val) : val), []);
+};
+
+const getEffectiveLinksHrefs = (ElementClass, forStaticArea = false) => {
+	let stylesData = ElementClass[forStaticArea ? "staticAreaStyles" : "styles"];
+	const OpenUI5Enablement = getFeature("OpenUI5Enablement");
+
+	if (!stylesData) {
+		return;
+	}
+
+	if (!Array.isArray(stylesData)) {
+		stylesData = [stylesData];
+	}
+
+	if (OpenUI5Enablement) {
+		stylesData.push(OpenUI5Enablement.getBusyIndicatorStyles());
+	}
+
+	return flatten(stylesData).filter(data => !!data).map(data => getUrl(data.packageName, data.fileName));
+};
+
+export default getEffectiveLinksHrefs;

package/src/theming/getEffectiveStyle.js

@@ -1,15 +1,39 @@
-import { getCustomCSS } from "./CustomStyle.js";
+import { getCustomCSS, attachCustomCSSChange } from "./CustomStyle.js";
+import getStylesString from "./getStylesString.js";
+import { getFeature } from "../FeaturesRegistry.js";
 
-const getEffectiveStyle = ElementClass => {
+const effectiveStyleMap = new Map();
+
+attachCustomCSSChange(tag => {
+	effectiveStyleMap.delete(`${tag}_normal`); // there is custom CSS only for the component itself, not for its static area part
+});
+
+const getEffectiveStyle = (ElementClass, forStaticArea = false) => {
 	const tag = ElementClass.getMetadata().getTag();
-	const customStyle = getCustomCSS(tag) || "";
-	let componentStyles = ElementClass.styles;
+	const key = `${tag}_${forStaticArea ? "static" : "normal"}`;
+	const OpenUI5Enablement = getFeature("OpenUI5Enablement");
+
+	if (!effectiveStyleMap.has(key)) {
+		let effectiveStyle;
+		let busyIndicatorStyles = "";
+
+		if (OpenUI5Enablement) {
+			busyIndicatorStyles = getStylesString(OpenUI5Enablement.getBusyIndicatorStyles());
+		}
 
-	if (Array.isArray(componentStyles)) {
-		componentStyles = componentStyles.join(" ");
+		if (forStaticArea) {
+			effectiveStyle = getStylesString(ElementClass.staticAreaStyles);
+		} else {
+			const customStyle = getCustomCSS(tag) || "";
+			const builtInStyles = getStylesString(ElementClass.styles);
+			effectiveStyle = `${builtInStyles} ${customStyle}`;
+		}
+
+		effectiveStyle = `${effectiveStyle} ${busyIndicatorStyles}`;
+		effectiveStyleMap.set(key, effectiveStyle);
 	}
-	return `${componentStyles} ${customStyle}`;
-};
 
+	return effectiveStyleMap.get(key);
+};
 
 export default getEffectiveStyle;

package/src/theming/getStylesString.js

@@ -0,0 +1,15 @@
+const getStylesString = styles => {
+	if (Array.isArray(styles)) {
+		return flatten(styles.filter(style => !!style)).map(style => {
+			return typeof style === "string" ? style : style.content;
+		}).join(" ");
+	}
+
+	return typeof styles === "string" ? styles : styles.content;
+};
+
+const flatten = arr => {
+	return arr.reduce((acc, val) => acc.concat(Array.isArray(val) ? flatten(val) : val), []);
+};
+
+export default getStylesString;

package/src/theming/getThemeDesignerTheme.js

@@ -1,15 +1,26 @@
+const warnings = new Set();
+
 const getThemeMetadata = () => {
 	// Check if the class was already applied, most commonly to the link/style tag with the CSS Variables
-	let el = document.querySelector(".sapThemeMetaData-Base-baseLib");
+	let el = document.querySelector(".sapThemeMetaData-Base-baseLib") || document.querySelector(".sapThemeMetaData-UI5-sap-ui-core");
 	if (el) {
 		return getComputedStyle(el).backgroundImage;
 	}
 
 	el = document.createElement("span");
 	el.style.display = "none";
+
+	// Try with sapThemeMetaData-Base-baseLib first
 	el.classList.add("sapThemeMetaData-Base-baseLib");
 	document.body.appendChild(el);
-	const metadata = getComputedStyle(el).backgroundImage;
+	let metadata = getComputedStyle(el).backgroundImage;
+
+	// Try with sapThemeMetaData-UI5-sap-ui-core only if the previous selector was not found
+	if (metadata === "none") {
+		el.classList.add("sapThemeMetaData-UI5-sap-ui-core");
+		metadata = getComputedStyle(el).backgroundImage;
+	}
+
 	document.body.removeChild(el);
 
 	return metadata;
@@ -24,14 +35,20 @@ const parseThemeMetadata = metadataString => {
 			try {
 				paramsString = decodeURIComponent(paramsString);
 			} catch (ex) {
-				console.warn("Malformed theme metadata string, unable to decodeURIComponent"); // eslint-disable-line
+				if (!warnings.has("decode")) {
+					console.warn("Malformed theme metadata string, unable to decodeURIComponent"); // eslint-disable-line
+					warnings.add("decode");
+				}
 				return;
 			}
 		}
 		try {
 			return JSON.parse(paramsString);
 		} catch (ex) {
-			console.warn("Malformed theme metadata string, unable to parse JSON"); // eslint-disable-line
+			if (!warnings.has("parse")) {
+				console.warn("Malformed theme metadata string, unable to parse JSON"); // eslint-disable-line
+				warnings.add("parse");
+			}
 		}
 	}
 };
@@ -44,7 +61,10 @@ const processThemeMetadata = metadata => {
 		themeName = metadata.Path.match(/\.([^.]+)\.css_variables$/)[1];
 		baseThemeName = metadata.Extends[0];
 	} catch (ex) {
-		console.warn("Malformed theme metadata Object", metadata); // eslint-disable-line
+		if (!warnings.has("object")) {
+			console.warn("Malformed theme metadata Object", metadata); // eslint-disable-line
+			warnings.add("object");
+		}
 		return;
 	}
 

package/src/theming/preloadLinks.js

@@ -0,0 +1,23 @@
+import getEffectiveLinksHrefs from "./getEffectiveLinksHrefs.js";
+import createLinkInHead from "../util/createLinkInHead.js";
+import { shouldUseLinks, shouldPreloadLinks } from "../CSP.js";
+
+const preloaded = new Set();
+
+const preloadLinks = ElementClass => {
+	if (!shouldUseLinks() || !shouldPreloadLinks()) {
+		return;
+	}
+
+	const linksHrefs = getEffectiveLinksHrefs(ElementClass, false) || [];
+	const staticAreaLinksHrefs = getEffectiveLinksHrefs(ElementClass, true) || [];
+
+	[...linksHrefs, ...staticAreaLinksHrefs].forEach(href => {
+		if (!preloaded.has(href)) {
+			createLinkInHead(href, { rel: "preload", as: "style" });
+			preloaded.add(href);
+		}
+	});
+};
+
+export default preloadLinks;

package/src/types/CSSColor.js

@@ -0,0 +1,9 @@
+import DataType from "./DataType.js";
+
+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
+	}
+}
+
+export default CSSColor;

package/src/types/CalendarType.js

@@ -17,6 +17,6 @@ class CalendarType extends DataType {
 	}
 }
 
-CalendarType.generataTypeAcessors(CalendarTypes);
+CalendarType.generateTypeAccessors(CalendarTypes);
 
 export default CalendarType;

package/src/types/DataType.js

@@ -11,7 +11,19 @@ class DataType {
 	static isValid(value) {
 	}
 
-	static generataTypeAcessors(types) {
+	static attributeToProperty(attributeValue) {
+		return attributeValue;
+	}
+
+	static propertyToAttribute(propertyValue) {
+		return `${propertyValue}`;
+	}
+
+	static valuesAreEqual(value1, value2) {
+		return value1 === value2;
+	}
+
+	static generateTypeAccessors(types) {
 		Object.keys(types).forEach(type => {
 			Object.defineProperty(this, type, {
 				get() {

package/src/types/Float.js

@@ -5,6 +5,10 @@ class Float extends DataType {
 		// Assuming that integers are floats as well!
 		return Number(value) === value;
 	}
+
+	static attributeToProperty(attributeValue) {
+		return parseFloat(attributeValue);
+	}
 }
 
 export default Float;

package/src/types/Integer.js

@@ -4,6 +4,10 @@ class Integer extends DataType {
 	static isValid(value) {
 		return Number.isInteger(value);
 	}
+
+	static attributeToProperty(attributeValue) {
+		return parseInt(attributeValue);
+	}
 }
 
 export default Integer;

package/src/types/InvisibleMessageMode.js

@@ -0,0 +1,30 @@
+import DataType from "./DataType.js";
+
+/**
+ * Enumeration for different mode behaviors of the <code>InvisibleMessage</code>.
+ * @private
+ */
+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.
+     */
+	Polite: "Polite",
+
+	/**
+     * Indicates that updates to the region have the highest priority and should be presented to the user immediately.
+     */
+	Assertive: "Assertive",
+
+};
+
+class InvisibleMessageMode extends DataType {
+	static isValid(value) {
+		return !!InvisibleMessageModes[value];
+	}
+}
+
+InvisibleMessageMode.generateTypeAccessors(InvisibleMessageModes);
+
+export default InvisibleMessageModes;

package/src/types/ItemNavigationBehavior.js

@@ -4,18 +4,13 @@
  */
 const ItemNavigationBehavior = {
 	/**
-	* Static behavior: when border of the items is reached, you can't go out of the cage.
+	* Static behavior: navigations stops at the first or last item.
  	*/
 	Static: "Static",
 
 	/**
-	* Cycling behavior: when border of the items is reached, you can cycle through the items.
+	* Cycling behavior: navigating past the last item continues with the first and vice versa.
  	*/
 	Cyclic: "Cyclic",
-
-	/**
-	* Paging behavior: when border of the items is reached, tou can go up/down based on the rowsize(e.g. DayPicker)
- 	*/
-	Paging: "Paging",
 };
 export default ItemNavigationBehavior;

package/src/types/PopupState.js

@@ -32,6 +32,6 @@ class PopupState extends DataType {
 	}
 }
 
-PopupState.generataTypeAcessors(PopupStates);
+PopupState.generateTypeAccessors(PopupStates);
 
 export default PopupState;