@ui5/webcomponents-base 0.0.0-dff5837d7 → 0.0.0-ec448881d

package/src/locale/getEffectiveDir.js

@@ -0,0 +1,28 @@
+import { getRTL } from "../config/RTL.js";
+
+const GLOBAL_DIR_CSS_VAR = "--_ui5_dir";
+
+const getEffectiveDir = element => {
+	const doc = window.document;
+	const dirValues = ["ltr", "rtl"]; // exclude "auto" and "" from all calculations
+	const locallyAppliedDir = getComputedStyle(element).getPropertyValue(GLOBAL_DIR_CSS_VAR);
+
+	// In that order, inspect the CSS Var (for modern browsers), the element itself, html and body (for IE fallback)
+	if (dirValues.includes(locallyAppliedDir)) {
+		return locallyAppliedDir;
+	}
+	if (dirValues.includes(element.dir)) {
+		return element.dir;
+	}
+	if (dirValues.includes(doc.documentElement.dir)) {
+		return doc.documentElement.dir;
+	}
+	if (dirValues.includes(doc.body.dir)) {
+		return doc.body.dir;
+	}
+
+	// Finally, check the configuration for explicitly set RTL or language-implied RTL
+	return getRTL() ? "rtl" : undefined;
+};
+
+export default getEffectiveDir;

package/src/locale/getLocale.js

@@ -2,10 +2,20 @@ import detectNavigatorLanguage from "../util/detectNavigatorLanguage.js";
 import { getLanguage as getConfigLanguage } from "../config/Language.js";
 import Locale from "./Locale.js";
 
+const cache = new Map();
+
+const getLocaleInstance = lang => {
+	if (!cache.has(lang)) {
+		cache.set(lang, new Locale(lang));
+	}
+
+	return cache.get(lang);
+};
+
 const convertToLocaleOrNull = lang => {
 	try {
 		if (lang && typeof lang === "string") {
-			return new Locale(lang);
+			return getLocaleInstance(lang);
 		}
 	} catch (e) {
 		// ignore
@@ -22,7 +32,7 @@ const getLocale = lang => {
 	}
 
 	if (getConfigLanguage()) {
-		return new Locale(getConfigLanguage());
+		return getLocaleInstance(getConfigLanguage());
 	}
 
 	return convertToLocaleOrNull(detectNavigatorLanguage());

package/src/locale/languageChange.js

@@ -12,7 +12,7 @@ const detachLanguageChange = listener => {
 };
 
 const fireLanguageChange = lang => {
-	return eventProvider.fireEvent(LANG_CHANGE, lang);
+	return eventProvider.fireEventAsync(LANG_CHANGE, lang);
 };
 
 export {

package/src/renderer/LitRenderer.js

@@ -1,15 +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;