@ui5/webcomponents-base 0.0.0-5f8ce9393 → 0.0.0-6cb3eb0db

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

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

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

@@ -1,20 +1,22 @@
 const assert = require("chai").assert;
 
 describe("The framework can define web components", () => {
-	browser.url("http://localhost:9191/test-resources/pages/AllTestElements.html");
+	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", () => {
-		const res = browser.execute(() => {
-			return document.getElementById("gen").shadowRoot;
+	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(browser.$("#gen").shadow$("div>p").isExisting(), true, "Shadow root content 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", () => {
-		const res = browser.execute(() => {
-			return document.getElementById("noShadow").shadowRoot;
+	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,10 +1,12 @@
 const assert = require("chai").assert;
 
 describe("Slots work properly", () => {
-	browser.url("http://localhost:9191/test-resources/pages/AllTestElements.html");
+	before(async () => {
+		await browser.url("http://localhost:9191/test-resources/pages/AllTestElements.html");
+	});
 
-	it("Tests that properties exist on the element for each slot", () => {
-		const res = browser.execute(() => {
+	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");
@@ -15,7 +17,7 @@ describe("Slots work properly", () => {
 			expectedValues.items = el.items.length === 2;
 			expectedValues.named = el.named === undefined;
 
-			return expectedValues;
+			done(expectedValues);
 		});
 
 		assert.strictEqual(res.default, true, "There are elements in the default property");
@@ -25,10 +27,10 @@ describe("Slots work properly", () => {
 		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", () => {
-		assert.strictEqual(browser.$$("#withContent>[slot=individual]").length, 0, "There are no children with slot=individual");
-		assert.strictEqual(browser.$$("#withContent>[slot=individual-1]").length, 1, "The slot of the first child became individual-1");
-		assert.strictEqual(browser.$$("#withContent>[slot=individual-2]").length, 1, "The slot of the second child became individual-2");
+	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/CustomStyle.js

@@ -1,19 +1,40 @@
-const customCSSFor = {};
+import { reRenderAllUI5Elements } from "../Render.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 = 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 = {};
+
+const addCustomCSS = (tag, css) => {
 	if (!customCSSFor[tag]) {
 		customCSSFor[tag] = [];
 	}
-
 	customCSSFor[tag].push(css);
+	fireCustomCSSChange(tag);
+
+	return reRenderAllUI5Elements({ tag });
 };
 
 const getCustomCSS = tag => {
 	return customCSSFor[tag] ? customCSSFor[tag].join("") : "";
 };
 
-export { addCustomCSS, getCustomCSS };
+export {
+	addCustomCSS,
+	getCustomCSS,
+	attachCustomCSSChange,
+	detachCustomCSSChange,
+};

package/dist/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/dist/theming/applyTheme.js

@@ -0,0 +1,78 @@
+import { getThemeProperties, getRegisteredPackages, isThemeRegistered } from "../asset-registries/Themes.js";
+import createThemePropertiesStyleTag from "./createThemePropertiesStyleTag.js";
+import getThemeDesignerTheme from "./getThemeDesignerTheme.js";
+import { fireThemeLoaded } from "./ThemeLoaded.js";
+import { getFeature } from "../FeaturesRegistry.js";
+
+const BASE_THEME_PACKAGE = "@ui5/webcomponents-theme-base";
+
+const isThemeBaseRegistered = () => {
+	const registeredPackages = getRegisteredPackages();
+	return registeredPackages.has(BASE_THEME_PACKAGE);
+};
+
+const loadThemeBase = async theme => {
+	if (!isThemeBaseRegistered()) {
+		return;
+	}
+
+	const cssText = await getThemeProperties(BASE_THEME_PACKAGE, theme);
+	createThemePropertiesStyleTag(cssText, BASE_THEME_PACKAGE);
+};
+
+const deleteThemeBase = () => {
+	const styleElement = document.head.querySelector(`style[data-ui5-theme-properties="${BASE_THEME_PACKAGE}"]`);
+	if (styleElement) {
+		styleElement.parentElement.removeChild(styleElement);
+	}
+};
+
+const loadComponentPackages = async theme => {
+	const registeredPackages = getRegisteredPackages();
+	registeredPackages.forEach(async packageName => {
+		if (packageName === BASE_THEME_PACKAGE) {
+			return;
+		}
+
+		const cssText = await getThemeProperties(packageName, theme);
+		createThemePropertiesStyleTag(cssText, packageName);
+	});
+};
+
+const detectExternalTheme = () => {
+	// If theme designer theme is detected, use this
+	const extTheme = getThemeDesignerTheme();
+	if (extTheme) {
+		return extTheme;
+	}
+
+	// If OpenUI5Support is enabled, try to find out if it loaded variables
+	const OpenUI5Support = getFeature("OpenUI5Support");
+	if (OpenUI5Support) {
+		const varsLoaded = OpenUI5Support.cssVariablesLoaded();
+		if (varsLoaded) {
+			return {
+				themeName: OpenUI5Support.getConfigurationSettingsObject().theme, // just themeName, baseThemeName is only relevant for custom themes
+			};
+		}
+	}
+};
+
+const applyTheme = async theme => {
+	const extTheme = detectExternalTheme();
+
+	// 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) {
+		await loadThemeBase(theme);
+	} else {
+		deleteThemeBase();
+	}
+
+	// Always load component packages properties. For non-registered themes, try with the base theme, if any
+	const packagesTheme = isThemeRegistered(theme) ? theme : extTheme && extTheme.baseThemeName;
+	await loadComponentPackages(packagesTheme);
+
+	fireThemeLoaded(theme);
+};
+
+export default applyTheme;

package/dist/theming/createThemePropertiesStyleTag.js

@@ -0,0 +1,20 @@
+import createStyleInHead from "../util/createStyleInHead.js";
+
+/**
+ * Creates/updates a style element holding all CSS Custom Properties
+ * @param cssText
+ * @param packageName
+ */
+const createThemePropertiesStyleTag = (cssText, packageName) => {
+	const styleElement = document.head.querySelector(`style[data-ui5-theme-properties="${packageName}"]`);
+	if (styleElement) {
+		styleElement.textContent = cssText || "";	// in case of undefined
+	} else {
+		const attributes = {
+			"data-ui5-theme-properties": packageName,
+		};
+		createStyleInHead(cssText, attributes);
+	}
+};
+
+export default createThemePropertiesStyleTag;

package/dist/theming/getConstructableStyle.js

@@ -0,0 +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, forStaticArea = false) => {
+	const tag = ElementClass.getMetadata().getTag();
+	const key = `${tag}_${forStaticArea ? "static" : "normal"}`;
+
+	if (!constructableStyleMap.has(key)) {
+		const styleContent = getEffectiveStyle(ElementClass, forStaticArea);
+		const style = new CSSStyleSheet();
+		style.replaceSync(styleContent);
+		constructableStyleMap.set(key, [style]);
+	}
+
+	return constructableStyleMap.get(key);
+};
+
+export default getConstructableStyle;

package/dist/theming/getEffectiveStyle.js

@@ -0,0 +1,30 @@
+import { getCustomCSS, attachCustomCSSChange } from "./CustomStyle.js";
+import getStylesString from "./getStylesString.js";
+
+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 key = `${tag}_${forStaticArea ? "static" : "normal"}`;
+
+	if (!effectiveStyleMap.has(key)) {
+		let effectiveStyle;
+
+		if (forStaticArea) {
+			effectiveStyle = getStylesString(ElementClass.staticAreaStyles);
+		} else {
+			const customStyle = getCustomCSS(tag) || "";
+			const builtInStyles = getStylesString(ElementClass.styles);
+			effectiveStyle = `${builtInStyles} ${customStyle}`;
+		}
+		effectiveStyleMap.set(key, effectiveStyle);
+	}
+
+	return effectiveStyleMap.get(key);
+};
+
+export default getEffectiveStyle;

package/dist/theming/getStylesString.js

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

package/dist/theming/getThemeDesignerTheme.js

@@ -0,0 +1,67 @@
+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");
+	if (el) {
+		return getComputedStyle(el).backgroundImage;
+	}
+
+	el = document.createElement("span");
+	el.style.display = "none";
+	el.classList.add("sapThemeMetaData-Base-baseLib");
+	document.body.appendChild(el);
+	const metadata = getComputedStyle(el).backgroundImage;
+	document.body.removeChild(el);
+
+	return metadata;
+};
+
+const parseThemeMetadata = metadataString => {
+	const params = /\(["']?data:text\/plain;utf-8,(.*?)['"]?\)$/i.exec(metadataString);
+	if (params && params.length >= 2) {
+		let paramsString = params[1];
+		paramsString = paramsString.replace(/\\"/g, `"`);
+		if (paramsString.charAt(0) !== "{" && paramsString.charAt(paramsString.length - 1) !== "}") {
+			try {
+				paramsString = decodeURIComponent(paramsString);
+			} catch (ex) {
+				console.warn("Malformed theme metadata string, unable to decodeURIComponent"); // eslint-disable-line
+				return;
+			}
+		}
+		try {
+			return JSON.parse(paramsString);
+		} catch (ex) {
+			console.warn("Malformed theme metadata string, unable to parse JSON"); // eslint-disable-line
+		}
+	}
+};
+
+const processThemeMetadata = metadata => {
+	let themeName;
+	let baseThemeName;
+
+	try {
+		themeName = metadata.Path.match(/\.([^.]+)\.css_variables$/)[1];
+		baseThemeName = metadata.Extends[0];
+	} catch (ex) {
+		console.warn("Malformed theme metadata Object", metadata); // eslint-disable-line
+		return;
+	}
+
+	return {
+		themeName,
+		baseThemeName,
+	};
+};
+
+const getThemeDesignerTheme = () => {
+	const metadataString = getThemeMetadata();
+	if (!metadataString || metadataString === "none") {
+		return;
+	}
+
+	const metadata = parseThemeMetadata(metadataString);
+	return processThemeMetadata(metadata);
+};
+
+export default getThemeDesignerTheme;

package/dist/thirdparty/_merge.js

@@ -0,0 +1,32 @@
+import isPlainObject from './isPlainObject.js';
+var oToken = Object.create(null);
+var fnMerge = function () {
+    var src, copyIsArray, copy, name, options, clone, target = arguments[2] || {}, i = 3, length = arguments.length, deep = arguments[0] || false, skipToken = arguments[1] ? undefined : oToken;
+    if (typeof target !== 'object' && typeof target !== 'function') {
+        target = {};
+    }
+    for (; i < length; i++) {
+        if ((options = arguments[i]) != null) {
+            for (name in options) {
+                src = target[name];
+                copy = options[name];
+                if (name === '__proto__' || target === copy) {
+                    continue;
+                }
+                if (deep && copy && (isPlainObject(copy) || (copyIsArray = Array.isArray(copy)))) {
+                    if (copyIsArray) {
+                        copyIsArray = false;
+                        clone = src && Array.isArray(src) ? src : [];
+                    } else {
+                        clone = src && isPlainObject(src) ? src : {};
+                    }
+                    target[name] = fnMerge(deep, arguments[1], clone, copy);
+                } else if (copy !== skipToken) {
+                    target[name] = copy;
+                }
+            }
+        }
+    }
+    return target;
+};
+export default fnMerge;

package/dist/thirdparty/isPlainObject.js

@@ -0,0 +1,18 @@
+var class2type = {};
+var hasOwn = class2type.hasOwnProperty;
+var toString = class2type.toString;
+var fnToString = hasOwn.toString;
+var ObjectFunctionString = fnToString.call(Object);
+var fnIsPlainObject = function (obj) {
+  var proto, Ctor;
+  if (!obj || toString.call(obj) !== "[object Object]") {
+    return false;
+  }
+  proto = Object.getPrototypeOf(obj);
+  if (!proto) {
+    return true;
+  }
+  Ctor = hasOwn.call(proto, "constructor") && proto.constructor;
+  return typeof Ctor === "function" && fnToString.call(Ctor) === ObjectFunctionString;
+};
+export default fnIsPlainObject;

package/dist/thirdparty/merge.js

@@ -0,0 +1,10 @@
+import _merge from './_merge.js';
+var fnMerge = function () {
+    var args = [
+        true,
+        false
+    ];
+    args.push.apply(args, arguments);
+    return _merge.apply(null, args);
+};
+export default fnMerge;

package/dist/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/dates → dist/types}/CalendarType.js

@@ -1,4 +1,4 @@
-import DataType from "../types/DataType.js";
+import DataType from "./DataType.js";
 
 /**
  * Different calendar types.
@@ -17,6 +17,6 @@ class CalendarType extends DataType {
 	}
 }
 
-CalendarType.generataTypeAcessors(CalendarTypes);
+CalendarType.generateTypeAccessors(CalendarTypes);
 
 export default CalendarType;

package/dist/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/dist/types/Float.js

@@ -0,0 +1,14 @@
+import DataType from "./DataType.js";
+
+class Float extends DataType {
+	static isValid(value) {
+		// Assuming that integers are floats as well!
+		return Number(value) === value;
+	}
+
+	static attributeToProperty(attributeValue) {
+		return parseFloat(attributeValue);
+	}
+}
+
+export default Float;

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