@ui5/webcomponents-base 0.0.0-cc312800a → 0.0.0-cf50976ce

package/dist/UI5Element.js

@@ -10,15 +10,15 @@ import { registerTag, isTagRegistered, recordTagRegistrationFailure } from "./Cu
 import { observeDOMNode, unobserveDOMNode } from "./DOMObserver.js";
 import { skipOriginalEvent } from "./config/NoConflict.js";
 import getEffectiveDir from "./locale/getEffectiveDir.js";
-import Integer from "./types/Integer.js";
-import Float from "./types/Float.js";
+import DataType from "./types/DataType.js";
 import { kebabToCamelCase, camelToKebabCase } from "./util/StringHelper.js";
 import isValidPropertyName from "./util/isValidPropertyName.js";
+import isDescendantOf from "./util/isDescendantOf.js";
 import { isSlot, getSlotName, getSlottedElementsList } from "./util/SlotsHelper.js";
 import arraysAreEqual from "./util/arraysAreEqual.js";
 import getClassCopy from "./util/getClassCopy.js";
 import { markAsRtlAware } from "./locale/RTLAwareRegistry.js";
-import isLegacyBrowser from "./isLegacyBrowser.js";
+import preloadLinks from "./theming/preloadLinks.js";
 
 let autoId = 0;
 
@@ -43,9 +43,11 @@ function _invalidate(changeInfo) {
 
 	this._changedState.push(changeInfo);
 	renderDeferred(this);
-	this._eventProvider.fireEvent("change", { ...changeInfo, target: this });
+	this._eventProvider.fireEvent("invalidate", { ...changeInfo, target: this });
 }
 
+let metadata = {};
+
 /**
  * Base class for all UI5 Web Components
  *
@@ -72,6 +74,7 @@ class UI5Element extends HTMLElement {
 			deferredResolve = resolve;
 		});
 		this._domRefReadyPromise._deferredResolve = deferredResolve;
+		this._doNotSyncAttributes = new Set(); // attributes that are excluded from attributeChangedCallback synchronization
 
 		this._initializeState();
 		this._upgradeAllProperties();
@@ -101,8 +104,10 @@ class UI5Element extends HTMLElement {
 	 */
 	async connectedCallback() {
 		this.setAttribute(this.constructor.getMetadata().getPureTag(), "");
+		if (this.constructor.getMetadata().supportsF6FastNavigation()) {
+			this.setAttribute("data-sap-ui-fastnavgroup", "true");
+		}
 
-		const needsShadowDOM = this.constructor._needsShadowDOM();
 		const slotsAreManaged = this.constructor.getMetadata().slotsAreManaged();
 
 		this._inDOM = true;
@@ -113,10 +118,6 @@ class UI5Element extends HTMLElement {
 			await this._processChildren();
 		}
 
-		if (needsShadowDOM && !this.shadowRoot) { // Workaround for Firefox74 bug
-			await Promise.resolve();
-		}
-
 		if (!this._inDOM) { // Component removed from DOM while _processChildren was running
 			return;
 		}
@@ -134,7 +135,6 @@ class UI5Element extends HTMLElement {
 	 * @private
 	 */
 	disconnectedCallback() {
-		const needsShadowDOM = this.constructor._needsShadowDOM();
 		const slotsAreManaged = this.constructor.getMetadata().slotsAreManaged();
 
 		this._inDOM = false;
@@ -143,13 +143,11 @@ class UI5Element extends HTMLElement {
 			this._stopObservingDOMChildren();
 		}
 
-		if (needsShadowDOM) {
-			if (this._fullyConnected) {
-				if (typeof this.onExitDOM === "function") {
-					this.onExitDOM();
-				}
-				this._fullyConnected = false;
+		if (this._fullyConnected) {
+			if (typeof this.onExitDOM === "function") {
+				this.onExitDOM();
 			}
+			this._fullyConnected = false;
 		}
 
 		if (this.staticAreaItem && this.staticAreaItem.parentElement) {
@@ -259,7 +257,8 @@ class UI5Element extends HTMLElement {
 
 			// Listen for any invalidation on the child if invalidateOnChildChange is true or an object (ignore when false or not set)
 			if (child.isUI5Element && slotData.invalidateOnChildChange) {
-				child._attachChange(this._getChildChangeListener(slotName));
+				const method = (child.attachInvalidate || child._attachChange).bind(child);
+				method(this._getChildChangeListener(slotName));
 			}
 
 			// Listen for the slotchange event if the child is a slot itself
@@ -319,7 +318,8 @@ class UI5Element extends HTMLElement {
 
 		children.forEach(child => {
 			if (child && child.isUI5Element) {
-				child._detachChange(this._getChildChangeListener(slotName));
+				const method = (child.detachInvalidate || child._detachChange).bind(child);
+				method(this._getChildChangeListener(slotName));
 			}
 
 			if (isSlot(child)) {
@@ -334,20 +334,20 @@ class UI5Element extends HTMLElement {
 	 * Attach a callback that will be executed whenever the component is invalidated
 	 *
 	 * @param callback
-	 * @protected
+	 * @public
 	 */
-	_attachChange(callback) {
-		this._eventProvider.attachEvent("change", callback);
+	attachInvalidate(callback) {
+		this._eventProvider.attachEvent("invalidate", callback);
 	}
 
 	/**
 	 * Detach the callback that is executed whenever the component is invalidated
 	 *
 	 * @param callback
-	 * @protected
+	 * @public
 	 */
-	_detachChange(callback) {
-		this._eventProvider.detachEvent("change", callback);
+	detachInvalidate(callback) {
+		this._eventProvider.detachEvent("invalidate", callback);
 	}
 
 	/**
@@ -377,6 +377,10 @@ class UI5Element extends HTMLElement {
 	 * @private
 	 */
 	attributeChangedCallback(name, oldValue, newValue) {
+		if (this._doNotSyncAttributes.has(name)) { // This attribute is mutated internally, not by the user
+			return;
+		}
+
 		const properties = this.constructor.getMetadata().getProperties();
 		const realName = name.replace(/^ui5-/, "");
 		const nameInCamelCase = kebabToCamelCase(realName);
@@ -384,12 +388,8 @@ class UI5Element extends HTMLElement {
 			const propertyTypeClass = properties[nameInCamelCase].type;
 			if (propertyTypeClass === Boolean) {
 				newValue = newValue !== null;
-			}
-			if (propertyTypeClass === Integer) {
-				newValue = parseInt(newValue);
-			}
-			if (propertyTypeClass === Float) {
-				newValue = parseFloat(newValue);
+			} else if (isDescendantOf(propertyTypeClass, DataType)) {
+				newValue = propertyTypeClass.attributeToProperty(newValue);
 			}
 			this[nameInCamelCase] = newValue;
 		}
@@ -402,22 +402,31 @@ class UI5Element extends HTMLElement {
 		if (!this.constructor.getMetadata().hasAttribute(name)) {
 			return;
 		}
-
-		if (typeof newValue === "object") {
-			return;
-		}
-
+		const properties = this.constructor.getMetadata().getProperties();
+		const propertyTypeClass = properties[name].type;
 		const attrName = camelToKebabCase(name);
 		const attrValue = this.getAttribute(attrName);
-		if (typeof newValue === "boolean") {
+
+		if (propertyTypeClass === Boolean) {
 			if (newValue === true && attrValue === null) {
 				this.setAttribute(attrName, "");
 			} else if (newValue === false && attrValue !== null) {
 				this.removeAttribute(attrName);
 			}
-		} else if (attrValue !== newValue) {
-			this.setAttribute(attrName, newValue);
-		}
+		} else if (isDescendantOf(propertyTypeClass, DataType)) {
+			const newAttrValue = propertyTypeClass.propertyToAttribute(newValue);
+			if (newAttrValue === null) { // null means there must be no attribute for the current value of the property
+				this._doNotSyncAttributes.add(attrName); // skip the attributeChangedCallback call for this attribute
+				this.removeAttribute(attrName); // remove the attribute safely (will not trigger synchronization to the property value due to the above line)
+				this._doNotSyncAttributes.delete(attrName); // enable synchronization again for this attribute
+			} else {
+				this.setAttribute(attrName, newAttrValue);
+			}
+		} else if (typeof newValue !== "object") {
+			if (attrValue !== newValue) {
+				this.setAttribute(attrName, newValue);
+			}
+		} // else { return; } // old object handling
 	}
 
 	/**
@@ -617,25 +626,27 @@ class UI5Element extends HTMLElement {
 
 	/**
 	 * Returns the DOM Element inside the Shadow Root that corresponds to the opening tag in the UI5 Web Component's template
+	 * *Note:* For logical (abstract) elements (items, options, etc...), returns the part of the parent's DOM that represents this option
 	 * Use this method instead of "this.shadowRoot" to read the Shadow DOM, if ever necessary
+	 *
 	 * @public
 	 */
 	getDomRef() {
+		// If a component set _getRealDomRef to its children, use the return value of this function
+		if (typeof this._getRealDomRef === "function") {
+			return this._getRealDomRef();
+		}
+
 		if (!this.shadowRoot || this.shadowRoot.children.length === 0) {
 			return;
 		}
 
-		this._assertShadowRootStructure();
-
-		return this.shadowRoot.children.length === 1
-			? this.shadowRoot.children[0] : this.shadowRoot.children[1];
-	}
-
-	_assertShadowRootStructure() {
-		const expectedChildrenCount = document.adoptedStyleSheets || isLegacyBrowser() ? 1 : 2;
-		if (this.shadowRoot.children.length !== expectedChildrenCount) {
+		const children = [...this.shadowRoot.children].filter(child => !["link", "style"].includes(child.localName));
+		if (children.length !== 1) {
 			console.warn(`The shadow DOM for ${this.constructor.getMetadata().getTag()} does not have a top level element, the getDomRef() method might not work as expected`); // eslint-disable-line
 		}
+
+		return children[0];
 	}
 
 	/**
@@ -661,17 +672,6 @@ class UI5Element extends HTMLElement {
 		return this.getFocusDomRef();
 	}
 
-	/**
-	 * Use this method in order to get a reference to an element in the shadow root of the web component or the static area item of the component
-	 * @public
-	 * @method
-	 * @param {String} refName Defines the name of the stable DOM ref
-	 */
-	getStableDomRef(refName) {
-		const staticAreaResult = this.staticAreaItem && this.staticAreaItem.getStableDomRef(refName);
-		return staticAreaResult || this.getDomRef().querySelector(`[data-ui5-stable=${refName}]`);
-	}
-
 	/**
 	 * Set the focus to the element, returned by "getFocusDomRef()" (marked by "data-sap-focus-ref")
 	 * @public
@@ -861,6 +861,8 @@ class UI5Element extends HTMLElement {
 					const oldState = this._state[prop];
 					if (propData.multiple && propData.compareValues) {
 						isDifferent = !arraysAreEqual(oldState, value);
+					} else if (isDescendantOf(propData.type, DataType)) {
+						isDifferent = !propData.type.valuesAreEqual(oldState, value);
 					} else {
 						isDifferent = oldState !== value;
 					}
@@ -908,7 +910,15 @@ class UI5Element extends HTMLElement {
 	 * @protected
 	 */
 	static get metadata() {
-		return {};
+		return metadata;
+	}
+
+	/**
+	 * Sets a new metadata object for this UI5 Web Component Class
+	 * @protected
+	 */
+	static set metadata(newMetadata) {
+		metadata = newMetadata;
 	}
 
 	/**
@@ -996,6 +1006,7 @@ class UI5Element extends HTMLElement {
 			this._generateAccessors();
 			registerTag(tag);
 			window.customElements.define(tag, this);
+			preloadLinks(this);
 
 			if (altTag && !customElements.get(altTag)) {
 				registerTag(altTag);

package/dist/UI5ElementMetadata.js

@@ -2,7 +2,7 @@ import DataType from "./types/DataType.js";
 import isDescendantOf from "./util/isDescendantOf.js";
 import { camelToKebabCase } from "./util/StringHelper.js";
 import { getSlottedElements } from "./util/SlotsHelper.js";
-import { getEffectiveScopingSuffixForTag } from "./CustomElementsScope.js";
+import { getEffectiveScopingSuffixForTag } from "./CustomElementsScopeUtils.js";
 
 /**
  *
@@ -126,7 +126,7 @@ class UI5ElementMetadata {
 	 */
 	hasAttribute(propName) {
 		const propData = this.getProperties()[propName];
-		return propData.type !== Object && !propData.noAttribute;
+		return propData.type !== Object && !propData.noAttribute && !propData.multiple;
 	}
 
 	/**
@@ -188,6 +188,14 @@ class UI5ElementMetadata {
 		return !!this.metadata.managedSlots;
 	}
 
+	/**
+	 * Determines whether this control supports F6 fast navigation
+	 * @public
+	 */
+	supportsF6FastNavigation() {
+		return !!this.metadata.fastNavigation;
+	}
+
 	/**
 	 * Returns an object with key-value pairs of properties and their metadata definitions
 	 * @public
@@ -212,6 +220,14 @@ class UI5ElementMetadata {
 		return !!this.metadata.languageAware;
 	}
 
+	/**
+	 * Determines whether this UI5 Element has any theme dependant carachteristics.
+	 * @returns {boolean}
+	 */
+	 isThemeAware() {
+		return !!this.metadata.themeAware;
+	}
+
 	/**
 	 * Matches a changed entity (property/slot) with the given name against the "invalidateOnChildChange" configuration
 	 * and determines whether this should cause and invalidation

package/dist/asset-registries/Icons.js

@@ -1,11 +1,12 @@
 import getSharedResource from "../getSharedResource.js";
+import IconCollectionsAlias from "../assets-meta/IconCollectionsAlias.js";
+import { getEffectiveDefaultIconCollection } from "../config/Icons.js";
 
 const loaders = new Map();
 const registry = getSharedResource("SVGIcons.registry", new Map());
 const iconCollectionPromises = getSharedResource("SVGIcons.promises", new Map());
 
 const ICON_NOT_FOUND = "ICON_NOT_FOUND";
-const DEFAULT_COLLECTION = "SAP-icons";
 
 /**
  * @deprecated
@@ -20,6 +21,9 @@ const registerIconLoader = async (collectionName, loader) => {
 
 const _loadIconCollectionOnce = async collectionName => {
 	if (!iconCollectionPromises.has(collectionName)) {
+		if (!loaders.has(collectionName)) {
+			throw new Error(`No loader registered for the ${collectionName} icons collection. Probably you forgot to import the "AllIcons.js" module for the respective package.`);
+		}
 		const loadIcons = loaders.get(collectionName);
 		iconCollectionPromises.set(collectionName, loadIcons(collectionName));
 	}
@@ -32,7 +36,7 @@ const _fillRegistry = bundleData => {
 		const iconData = bundleData.data[iconName];
 
 		registerIcon(iconName, {
-			pathData: iconData.path,
+			pathData: iconData.path || iconData.paths,
 			ltr: iconData.ltr,
 			accData: iconData.acc,
 			collection: bundleData.collection,
@@ -44,7 +48,7 @@ const _fillRegistry = bundleData => {
 // set
 const registerIcon = (name, { pathData, ltr, accData, collection, packageName } = {}) => { // eslint-disable-line
 	if (!collection) {
-		collection = DEFAULT_COLLECTION;
+		collection = getEffectiveDefaultIconCollection();
 	}
 
 	const key = `${collection}/${name}`;
@@ -64,12 +68,16 @@ const _parseName = name => {
 
 	let collection;
 	[name, collection] = name.split("/").reverse();
-	collection = collection || DEFAULT_COLLECTION;
-	// hardcoded alias in case icon explorer is used, resolve `SAP-icons-TNT` to `tnt`
-	// aliases can be made a feature in the future if more collections need it or more aliases are needed.
-	if (collection === "SAP-icons-TNT") {
-		collection = "tnt";
-	}
+	collection = collection || getEffectiveDefaultIconCollection();
+
+	// Normalize collection name.
+	// - resolve `SAP-icons-TNT` to `tnt`.
+	// - resolve `BusinessSuiteInAppSymbols` to `business-suite`.
+	// - resolve `horizon` to `SAP-icons-v5`,
+	// Note: aliases can be made as a feature, if more collections need it or more aliases are needed.
+	collection = _normalizeCollection(collection);
+	name = name.replace("icon-", "");
+
 	const registryKey = `${collection}/${name}`;
 	return { name, collection, registryKey };
 };
@@ -105,9 +113,18 @@ const _getRegisteredNames = async () => {
 	// fetch one icon of each collection to trigger the bundle load
 	await getIconData("edit");
 	await getIconData("tnt/arrow");
+	await getIconData("business-suite/3d");
 	return Array.from(registry.keys());
 };
 
+const _normalizeCollection = collectionName => {
+	if (IconCollectionsAlias[collectionName]) {
+		return IconCollectionsAlias[collectionName];
+	}
+
+	return collectionName;
+};
+
 export {
 	registerIconBundle,
 	registerIconLoader,

package/dist/asset-registries/Illustrations.js

@@ -0,0 +1,30 @@
+import getSharedResource from "../getSharedResource.js";
+
+const registry = getSharedResource("SVGIllustration.registry", new Map());
+const ILLUSTRATION_NOT_FOUND = "ILLUSTRATION_NOT_FOUND";
+
+const registerIllustration = (name, { dialogSvg, sceneSvg, spotSvg, set, title, subtitle } = {}) => { // eslint-disable-line
+	registry.set(`${set}/${name}`, {
+		dialogSvg,
+		sceneSvg,
+		spotSvg,
+		title,
+		subtitle,
+	});
+};
+
+const getIllustrationDataSync = nameProp => {
+	let set = "fiori";
+
+	if (nameProp.startsWith("Tnt")) {
+		set = "tnt";
+		nameProp = nameProp.replace(/^Tnt/, "");
+	}
+
+	return registry.get(`${set}/${nameProp}`) || ILLUSTRATION_NOT_FOUND;
+};
+
+export {
+	getIllustrationDataSync,
+	registerIllustration,
+};

package/dist/asset-registries/LocaleData.js

@@ -13,14 +13,22 @@ const M_ISO639_OLD_TO_NEW = {
 	"iw": "he",
 	"ji": "yi",
 	"in": "id",
-	"sh": "sr",
 };
 
+const DEV_MODE = false;
+
 const _showAssetsWarningOnce = localeId => {
-	if (!warningShown) {
+	if (warningShown) {
+		return;
+	}
+
+	if (!DEV_MODE) {
 		console.warn(`[LocaleData] Supported locale "${localeId}" not configured, import the "Assets.js" module from the webcomponents package you are using.`); /* eslint-disable-line */
-		warningShown = true;
+	} else {
+		console.warn(`[LocaleData] Note: in dev mode, CLDR assets might be disabled for performance reasons. Try running "ENABLE_CLDR=1 yarn start" to test CLDR assets.`); /* eslint-disable-line */
 	}
+
+	warningShown = true;
 };
 
 const calcLocale = (language, region, script) => {
@@ -39,6 +47,12 @@ const calcLocale = (language, region, script) => {
 		}
 	}
 
+	// Special case 3: for Serbian, there are cyrillic and latin scripts, "sh" and "sr-latn" map to "latin", "sr" maps to cyrillic.
+	if (language === "sh" || (language === "sr" && script === "Latn")) {
+		language = "sr";
+		region = "Latn";
+	}
+
 	// try language + region
 	let localeId = `${language}_${region}`;
 	if (SUPPORTED_LOCALES.includes(localeId)) {
@@ -133,7 +147,7 @@ const registerLocaleDataLoader = (localeId, loader) => {
 
 // register default loader for "en" from ui5 CDN (dev workflow without assets)
 registerLocaleDataLoader("en", async runtimeLocaleId => {
-	return (await fetch(`https://ui5.sap.com/1.60.2/resources/sap/ui/core/cldr/en.json`)).json();
+	return (await fetch(`https://sdk.openui5.org/1.103.0/resources/sap/ui/core/cldr/en.json`)).json();
 });
 
 // When the language changes dynamically (the user calls setLanguage),

package/dist/asset-registries/Themes.js

@@ -38,10 +38,14 @@ const getThemeProperties = async (packageName, themeName) => {
 
 	if (!registeredThemes.has(themeName)) {
 		const regThemesStr = [...registeredThemes.values()].join(", ");
-		console.warn(`You have requested a non-registered theme - falling back to ${DEFAULT_THEME}. Registered themes are: ${regThemesStr}`); /* eslint-disable-line */
-		return themeStyles.get(`${packageName}_${DEFAULT_THEME}`);
+		console.warn(`You have requested a non-registered theme ${themeName} - falling back to ${DEFAULT_THEME}. Registered themes are: ${regThemesStr}`); /* eslint-disable-line */
+		return _getThemeProperties(packageName, DEFAULT_THEME);
 	}
 
+	return _getThemeProperties(packageName, themeName);
+};
+
+const _getThemeProperties = async (packageName, themeName) => {
 	const loader = loaders.get(`${packageName}/${themeName}`);
 	if (!loader) {
 		// no themes for package

package/dist/asset-registries/i18n.js

@@ -14,10 +14,12 @@ const bundlePromises = new Map();
 const loaders = new Map();
 
 /**
+ * Registers i18n loader function for given package and locale.
  *
+ * @public
  * @param {string} packageName for which package this loader can fetch data
+ * @param {string} localeId locale that this loader can handle
  * @param {function} loader async function that will be passed a localeId and should return a JSON object
- * @param {Array} localeIds Array of locale IDs that this loader can handle
  */
 const registerI18nLoader = (packageName, localeId, loader) => {
 	// register loader by key