@ui5/webcomponents-base 0.0.0-39bd3067f → 0.0.0-4180fe799

package/src/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/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();
@@ -17,14 +17,11 @@ const loadThemeBase = async theme => {
 	}
 
 	const cssText = await getThemeProperties(BASE_THEME_PACKAGE, theme);
-	createThemePropertiesStyleTag(cssText, BASE_THEME_PACKAGE);
+	createOrUpdateStyle(cssText, "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 => {
@@ -35,7 +32,7 @@ const loadComponentPackages = async theme => {
 		}
 
 		const cssText = await getThemeProperties(packageName, theme);
-		createThemePropertiesStyleTag(cssText, packageName);
+		createOrUpdateStyle(cssText, "data-ui5-theme-properties", packageName);
 	});
 };
 
@@ -72,10 +69,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,20 @@
+import { getUrl } from "../CSP.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"];
+	if (!stylesData) {
+		return;
+	}
+
+	if (!Array.isArray(stylesData)) {
+		stylesData = [stylesData];
+	}
+
+	return flatten(stylesData).filter(data => !!data).map(data => getUrl(data.packageName, data.fileName));
+};
+
+export default getEffectiveLinksHrefs;

package/src/theming/getEffectiveStyle.js

@@ -1,15 +1,30 @@
-import { getCustomCSS } from "./CustomStyle.js";
+import { getCustomCSS, attachCustomCSSChange } from "./CustomStyle.js";
+import getStylesString from "./getStylesString.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"}`;
+
+	if (!effectiveStyleMap.has(key)) {
+		let effectiveStyle;
 
-	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}`;
+		}
+		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,6 +1,6 @@
 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;
 	}
@@ -8,6 +8,7 @@ const getThemeMetadata = () => {
 	el = document.createElement("span");
 	el.style.display = "none";
 	el.classList.add("sapThemeMetaData-Base-baseLib");
+	el.classList.add("sapThemeMetaData-UI5-sap-ui-core");
 	document.body.appendChild(el);
 	const metadata = getComputedStyle(el).backgroundImage;
 	document.body.removeChild(el);

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

@@ -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/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/NavigationMode.js

@@ -2,5 +2,6 @@ const NavigationMode = {
 	Auto: "Auto",
 	Vertical: "Vertical",
 	Horizontal: "Horizontal",
+	Paging: "Paging",
 };
 export default NavigationMode;

package/src/types/PopupState.js

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

package/src/types/ValueState.js

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

package/src/updateShadowRoot.js

@@ -0,0 +1,30 @@
+import executeTemplate from "./renderer/executeTemplate.js";
+import getConstructableStyle from "./theming/getConstructableStyle.js";
+import getEffectiveStyle from "./theming/getEffectiveStyle.js";
+import getEffectiveLinksHrefs from "./theming/getEffectiveLinksHrefs.js";
+import isLegacyBrowser from "./isLegacyBrowser.js";
+import { shouldUseLinks } from "./CSP.js";
+
+/**
+ * Updates the shadow root of a UI5Element or its static area item
+ * @param element
+ * @param forStaticArea
+ */
+const updateShadowRoot = (element, forStaticArea = false) => {
+	let styleStrOrHrefsArr;
+	const template = forStaticArea ? "staticAreaTemplate" : "template";
+	const shadowRoot = forStaticArea ? element.staticAreaItem.shadowRoot : element.shadowRoot;
+	const renderResult = executeTemplate(element.constructor[template], element);
+
+	if (shouldUseLinks()) {
+		styleStrOrHrefsArr = getEffectiveLinksHrefs(element.constructor, forStaticArea);
+	} else if (document.adoptedStyleSheets) { // Chrome
+		shadowRoot.adoptedStyleSheets = getConstructableStyle(element.constructor, forStaticArea);
+	} else if (!isLegacyBrowser()) { // FF, Safari
+		styleStrOrHrefsArr = getEffectiveStyle(element.constructor, forStaticArea);
+	}
+
+	element.constructor.render(renderResult, shadowRoot, styleStrOrHrefsArr, { host: element });
+};
+
+export default updateShadowRoot;

package/src/util/AriaLabelHelper.js

@@ -0,0 +1,41 @@
+import findNodeOwner from "./findNodeOwner.js";
+
+const getEffectiveAriaLabelText = el => {
+	if (!el.accessibleNameRef) {
+		if (el.accessibleName) {
+			return el.accessibleName;
+		}
+
+		return undefined;
+	}
+
+	return getAriaLabelledByTexts(el);
+};
+
+/**
+ *
+ * @param {HTMLElement} el Defines the HTMLElement, for which you need to get all related texts
+ * @param {HTMLElement} ownerDocument (Optional) Defines the HTMLElement(might document or custom element) where the you want to search for the texts.
+ * @param {String} readyIds (Optional) Defines a string of elements ids. The text of these elements will be returned. If used you should provide either el or ownerDocument
+ */
+const getAriaLabelledByTexts = (el, ownerDocument, readyIds = "") => {
+	const ids = (readyIds && readyIds.split(" ")) || el.accessibleNameRef.split(" ");
+	const owner = ownerDocument || findNodeOwner(el);
+	let result = "";
+
+	ids.forEach((elementId, index) => {
+		const element = owner.querySelector(`[id='${elementId}']`);
+		result += `${element ? element.textContent : ""}`;
+
+		if (index < ids.length - 1) {
+			result += " ";
+		}
+	});
+
+	return result;
+};
+
+export {
+	getEffectiveAriaLabelText,
+	getAriaLabelledByTexts,
+};

package/src/util/Caret.js

@@ -0,0 +1,45 @@
+/**
+ * Returns the caret (cursor) position of the specified text field (field).
+ * Return value range is 0-field.value.length.
+ */
+const getCaretPosition = field => {
+	// Initialize
+	let caretPos = 0;
+
+	// IE Support
+	if (document.selection) {
+		// Set focus on the element
+		field.focus();
+
+		// To get cursor position, get empty selection range
+		const selection = document.selection.createRange();
+
+		// Move selection start to 0 position
+		selection.moveStart("character", -field.value.length);
+
+		// The caret position is selection length
+		caretPos = selection.text.length;
+	} else if (field.selectionStart || field.selectionStart === "0") { // Firefox support
+		caretPos = field.selectionDirection === "backward" ? field.selectionStart : field.selectionEnd;
+	}
+
+	return caretPos;
+};
+
+const setCaretPosition = (field, caretPos) => {
+	if (field.createTextRange) {
+		const range = field.createTextRange();
+		range.move("character", caretPos);
+		range.select();
+	} else if (field.selectionStart) {
+		field.focus();
+		field.setSelectionRange(caretPos, caretPos);
+	} else {
+		field.focus();
+	}
+};
+
+export {
+	getCaretPosition,
+	setCaretPosition,
+};