@ui5/webcomponents-base 0.0.0-96e98c995 → 0.0.0-97cba4b0b

package/src/getSharedResource.ts

@@ -1,6 +1,11 @@
 import getSingletonElementInstance from "./util/getSingletonElementInstance.js";
 
-const getSharedResourcesInstance = () => getSingletonElementInstance("ui5-shared-resources", document.head);
+const getSharedResourcesInstance = (): Record<string, unknown> | null => {
+	if (typeof document === "undefined") {
+		return null;
+	}
+	return getSingletonElementInstance("ui5-shared-resources", document.head) as unknown as Record<string, unknown>;
+};
 
 /**
  * Use this method to initialize/get resources that you would like to be shared among UI5 Web Components runtime instances.
@@ -15,6 +20,10 @@ const getSharedResource = <T>(namespace: string, initialValue: T): T => {
 	const parts = namespace.split(".");
 	let current = getSharedResourcesInstance() as Record<string, any>;
 
+	if (!current) {
+		return initialValue;
+	}
+
 	for (let i = 0; i < parts.length; i++) {
 		const part = parts[i];
 		const lastPart = i === parts.length - 1;

package/src/global.d.ts

@@ -1,5 +1,3 @@
-import { StyleData } from "./types.js";
-
 export {};
 
 declare global {
@@ -19,10 +17,6 @@ declare global {
 		chrome: any;
 		v8: any;
 	}
-	module "*.css.js" {
-		const content: StyleData;
-		export default content;
-	}
 
 	module "*generated/AssetParameters.js" {
 		const DEFAULT_THEME: string;

package/src/renderer/LitRenderer.ts

@@ -3,13 +3,13 @@ import {
 	html,
 	svg,
 	TemplateResult,
-	RenderOptions,
 } from "lit-html";
 
 import { getFeature } from "../FeaturesRegistry.js";
 import type { LitStatic } from "../CustomElementsScope.js";
 import type OpenUI5Enablement from "../features/OpenUI5Enablement.js";
 import type UI5Element from "../UI5Element.js";
+import type { Renderer, RendererOptions } from "../UI5Element.js";
 import { TemplateFunctionResult } from "./executeTemplate.js";
 
 const effectiveHtml = (strings: TemplateStringsArray, ...values: Array<unknown>) => {
@@ -24,7 +24,7 @@ const effectiveSvg = (strings: TemplateStringsArray, ...values: Array<unknown>)
 	return fn(strings, ...values);
 };
 
-const litRender = (templateResult: TemplateFunctionResult, container: HTMLElement | DocumentFragment, styleStrOrHrefsArr: string | Array<string> | undefined, forStaticArea: boolean, options: RenderOptions) => {
+const litRender: Renderer = (templateResult: TemplateFunctionResult, container: HTMLElement | DocumentFragment, styleStrOrHrefsArr: string | Array<string> | undefined, forStaticArea: boolean, options: RendererOptions) => {
 	const openUI5Enablement = getFeature<typeof OpenUI5Enablement>("OpenUI5Enablement");
 	if (openUI5Enablement && !forStaticArea) {
 		templateResult = openUI5Enablement.wrapTemplateResultInBusyMarkup(effectiveHtml, options.host as UI5Element, templateResult as TemplateResult);

package/src/theming/CustomStyle.ts

@@ -4,22 +4,22 @@ import EventProvider from "../EventProvider.js";
 
 type CustomCSSChangeCallback = (tag: string) => void;
 
-const eventProvider = getSharedResource("CustomStyle.eventProvider", new EventProvider<string, void>());
+const getEventProvider = () => getSharedResource("CustomStyle.eventProvider", new EventProvider<string, void>());
 const CUSTOM_CSS_CHANGE = "CustomCSSChange";
 
 const attachCustomCSSChange = (listener: CustomCSSChangeCallback) => {
-	eventProvider.attachEvent(CUSTOM_CSS_CHANGE, listener);
+	getEventProvider().attachEvent(CUSTOM_CSS_CHANGE, listener);
 };
 
 const detachCustomCSSChange = (listener: CustomCSSChangeCallback) => {
-	eventProvider.detachEvent(CUSTOM_CSS_CHANGE, listener);
+	getEventProvider().detachEvent(CUSTOM_CSS_CHANGE, listener);
 };
 
 const fireCustomCSSChange = (tag: string) => {
-	return eventProvider.fireEvent(CUSTOM_CSS_CHANGE, tag);
+	return getEventProvider().fireEvent(CUSTOM_CSS_CHANGE, tag);
 };
 
-const customCSSFor = getSharedResource<Record<string, Array<string>>>("CustomStyle.customCSSFor", {});
+const getCustomCSSFor = () => getSharedResource<Record<string, Array<string>>>("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
@@ -32,6 +32,7 @@ attachCustomCSSChange((tag: string) => {
 });
 
 const addCustomCSS = (tag: string, css: string) => {
+	const customCSSFor = getCustomCSSFor();
 	if (!customCSSFor[tag]) {
 		customCSSFor[tag] = [];
 	}
@@ -51,6 +52,7 @@ const addCustomCSS = (tag: string, css: string) => {
 };
 
 const getCustomCSS = (tag: string) => {
+	const customCSSFor = getCustomCSSFor();
 	return customCSSFor[tag] ? customCSSFor[tag].join("") : "";
 };
 

package/src/theming/getEffectiveLinksHrefs.ts

@@ -2,7 +2,7 @@ import { getUrl } from "../CSP.js";
 import { getFeature } from "../FeaturesRegistry.js";
 import type UI5Element from "../UI5Element.js";
 import type OpenUI5Enablement from "../features/OpenUI5Enablement.js";
-import { ComponentStylesData, StyleDataCSP } from "../types.js";
+import type { ComponentStylesData, StyleDataCSP } from "../types.js";
 
 const MAX_DEPTH_INHERITED_CLASSES = 10; // TypeScript complains about Infinity and big numbers
 

package/src/theming/getStylesString.ts

@@ -1,4 +1,4 @@
-import { ComponentStylesData, StyleData } from "../types.js";
+import type { ComponentStylesData, StyleData } from "../types.js";
 
 const MAX_DEPTH_INHERITED_CLASSES = 10; // TypeScript complains about Infinity and big numbers
 

package/src/types/AnimationMode.ts

@@ -1,7 +1,7 @@
 /**
  * Different types of AnimationMode.
  *
- * @class
+ * @readonly
  * @enum {string}
  * @public
  * @author SAP SE

package/src/types/CSSColor.ts

@@ -9,7 +9,6 @@ import DataType from "./DataType.js";
  * @author SAP SE
  * @alias sap.ui.webc.base.types.CSSColor
  * @public
- * @enum {string}
  */
 class CSSColor extends DataType {
 	static override isValid(value: string) {

package/src/types/CalendarType.ts

@@ -1,7 +1,7 @@
 /**
  * Different calendar types.
  *
- * @class
+ * @readonly
  * @enum {string}
  * @public
  * @author SAP SE

package/src/types/Float.ts

@@ -10,7 +10,6 @@ import DataType from "./DataType.js";
  * @author SAP SE
  * @alias sap.ui.webc.base.types.Float
  * @public
- * @enum {number}
  */
 class Float extends DataType {
 	static override isValid(value: any) {

package/src/types/Integer.ts

@@ -10,7 +10,6 @@ import DataType from "./DataType.js";
  * @author SAP SE
  * @alias sap.ui.webc.base.types.Integer
  * @public
- * @enum {number}
  */
 class Integer extends DataType {
 	static override isValid(value: any) {

package/src/types/InvisibleMessageMode.ts

@@ -1,7 +1,7 @@
 /**
  * Enumeration for different mode behaviors of the InvisibleMessage.
  *
- * @class
+ * @readonly
  * @enum {string}
  * @public
  * @author SAP SE

package/src/types/ItemNavigationBehavior.ts

@@ -1,7 +1,7 @@
 /**
  * Different behavior for ItemNavigation.
  *
- * @class
+ * @readonly
  * @enum {string}
  * @public
  * @author SAP SE

package/src/types/NavigationMode.ts

@@ -1,7 +1,7 @@
 /**
  * Different navigation modes for ItemNavigation.
  *
- * @class
+ * @readonly
  * @enum {string}
  * @public
  * @author SAP SE

package/src/types/ValueState.ts

@@ -1,7 +1,7 @@
 /**
  * Different types of ValueStates.
  *
- * @class
+ * @readonly
  * @enum {string}
  * @public
  * @author SAP SE

package/src/updateShadowRoot.ts

@@ -31,6 +31,11 @@ const updateShadowRoot = (element: UI5Element, forStaticArea = false) => {
 		styleStrOrHrefsArr = getEffectiveStyle(ctor, forStaticArea);
 	}
 
+	if (ctor.renderer) {
+		ctor.renderer(renderResult, shadowRoot, styleStrOrHrefsArr, forStaticArea, { host: element });
+		return;
+	}
+
 	ctor.render(renderResult, shadowRoot, styleStrOrHrefsArr, forStaticArea, { host: element });
 };
 

package/src/util/AriaLabelHelper.ts

@@ -1,7 +1,32 @@
+import UI5Element, { ChangeInfo } from "../UI5Element.js";
+
+type InvalidateCallback = (changeInfo: ChangeInfo) => void;
+type MutationCallback = () => void;
+type AssociatedElement = {
+	observer: MutationObserver | null;
+	callbacks: Array<MutationCallback>;
+};
+type RegisteredElement = {
+	host: UI5Element;
+	observedElements: Array<HTMLElement>;
+	callback: MutationCallback;
+	invalidationCallback: InvalidateCallback;
+};
+
+const associatedElements = new WeakMap<HTMLElement, AssociatedElement>();
+const registeredElements = new WeakMap<UI5Element, RegisteredElement>();
+
 type AccessibleElement = HTMLElement & {
-	accessibleNameRef: string,
-	accessibleName: string,
-}
+	accessibleNameRef: string;
+	accessibleName: string;
+};
+
+const observerOptions = {
+	attributes: true,
+	childList: true,
+	characterData: true,
+	subtree: true,
+};
 
 const getEffectiveAriaLabelText = (el: HTMLElement) => {
 	const accessibleEl = el as AccessibleElement;
@@ -14,38 +39,68 @@ const getEffectiveAriaLabelText = (el: HTMLElement) => {
 		return undefined;
 	}
 
-	return _getAriaLabelledByTexts(el);
+	return getAllAccessibleNameRefTexts(el);
 };
 
 /**
  *
  * @param {HTMLElement} el Defines the HTMLElement, for which you need to get all related texts
  */
-const _getAriaLabelledByTexts = (el: HTMLElement) => {
-	const ids = (el as AccessibleElement).accessibleNameRef.split(" ");
+const getAllAccessibleNameRefTexts = (el: HTMLElement) => {
+	const ids = (el as AccessibleElement).accessibleNameRef?.split(" ") ?? [];
 	const owner = el.getRootNode() as HTMLElement;
 	let result = "";
 
 	ids.forEach((elementId: string, index: number) => {
 		const element = owner.querySelector(`[id='${elementId}']`);
-		result += `${element && element.textContent ? element.textContent : ""}`;
-
-		if (index < ids.length - 1) {
-			result += " ";
+		const text = `${element && element.textContent ? element.textContent : ""}`;
+		if (text) {
+			result += text;
+			if (index < ids.length - 1) {
+				result += " ";
+			}
 		}
 	});
 
 	return result;
 };
 
+const _getAllAssociatedElementsFromDOM = (el: UI5Element): Array<HTMLElement> => {
+	const set = new Set<HTMLElement>();
+	// adding labels with attribute for matching the el.id
+	const labelsForAssociated = _getAssociatedLabels(el);
+	labelsForAssociated.forEach(itm => {
+		set.add(itm);
+	});
+	// adding other elements that id is the same as accessibleNameRef value
+	const value = el["accessibleNameRef" as keyof typeof el] as string;
+	const ids = value?.split(" ") ?? [];
+	ids.forEach(id => {
+		const refEl = _getReferencedElementById(el, id);
+		if (refEl) {
+			set.add(refEl);
+		}
+	});
+	return Array.from(set);
+};
+
+const _getAssociatedLabels = (el: HTMLElement): Array<HTMLElement> => {
+	const labels = (el.getRootNode() as HTMLElement).querySelectorAll<HTMLElement>(`[for="${el.id}"]`);
+	return Array.from(labels);
+};
+
+const _getReferencedElementById = (el: HTMLElement, elementId: string): HTMLElement | null => {
+	return (el.getRootNode() as HTMLElement).querySelector<HTMLElement>(`[id='${elementId}']`);
+};
+
 /**
  * @param {HTMLElement} el Defines the HTMLElement, for which you need to get all related "label for" texts
  */
 const getAssociatedLabelForTexts = (el: HTMLElement) => {
 	const results: Array<string> = [];
-	const labels = (el.getRootNode() as HTMLElement).querySelectorAll(`[ui5-label][for="${el.id}"],label[for="${el.id}"]`);
+	const labels = _getAssociatedLabels(el);
 
-	labels.forEach((label: Node) => {
+	labels.forEach((label: HTMLElement) => {
 		const labelText = label.textContent;
 		labelText && results.push(labelText);
 	});
@@ -57,7 +112,107 @@ const getAssociatedLabelForTexts = (el: HTMLElement) => {
 	return undefined;
 };
 
+const _createInvalidationCallback = (el: UI5Element) => {
+	const invalidationCallback = (changeInfo: ChangeInfo) => {
+		if (!(changeInfo && changeInfo.type === "property" && changeInfo.name === "accessibleNameRef")) {
+			return;
+		}
+		const registeredElement = registeredElements.get(el);
+		if (!registeredElement) {
+			return;
+		}
+		const oldAssociatedElements = registeredElement.observedElements;
+		const newAssociatedElements = _getAllAssociatedElementsFromDOM(el);
+		oldAssociatedElements.forEach(oldElement => {
+			if (!newAssociatedElements.includes(oldElement)) {
+				_removeObservedElementFromRegisteredElement(registeredElement, oldElement);
+			}
+		});
+		newAssociatedElements.forEach(newElement => {
+			if (!oldAssociatedElements.includes(newElement)) {
+				_addObservedElementToRegisteredElement(registeredElement, newElement);
+				registeredElement.observedElements.push(newElement);
+			}
+		});
+		registeredElement?.callback();
+	};
+	return invalidationCallback;
+};
+
+const registerUI5Element = (el: UI5Element, callback: MutationCallback) => {
+	if (registeredElements.has(el)) {
+		return;
+	}
+	const allAssociatedElements = _getAllAssociatedElementsFromDOM(el);
+	const invalidationCallback = _createInvalidationCallback(el);
+	const registeredElement = {
+		host: el,
+		observedElements: allAssociatedElements,
+		callback,
+		invalidationCallback,
+	};
+	registeredElements.set(el, registeredElement);
+	el.attachInvalidate(invalidationCallback);
+
+	allAssociatedElements.forEach((element: HTMLElement) => {
+		_addObservedElementToRegisteredElement(registeredElement, element);
+	});
+	callback();
+};
+
+const _addObservedElementToRegisteredElement = (registeredElement: RegisteredElement, element: HTMLElement) => {
+	let associatedElement = associatedElements.get(element);
+	if (!associatedElement) {
+		associatedElement = { observer: null, callbacks: [] };
+		const observer = new MutationObserver(() => {
+			const callbacks = (associatedElement as AssociatedElement).callbacks;
+			callbacks.forEach(callback => {
+				callback();
+			});
+			const domEl = document.getElementById(element.id);
+			// if no longer should be observed from this registeredElement, remove it
+			if (!(registeredElement.host.id === element.getAttribute("for") || domEl)) {
+				_removeObservedElementFromRegisteredElement(registeredElement, element);
+			}
+		});
+		associatedElement.observer = observer;
+		observer.observe(element, observerOptions);
+		associatedElements.set(element, associatedElement);
+	}
+	if (!associatedElement.callbacks.includes(registeredElement.callback)) {
+		associatedElement.callbacks.push(registeredElement.callback);
+	}
+};
+
+const _removeObservedElementFromRegisteredElement = (registeredElement: RegisteredElement, element: HTMLElement) => {
+	const associatedElement = associatedElements.get(element);
+	if (associatedElement) {
+		associatedElement.callbacks = associatedElement.callbacks.filter(itm => itm !== registeredElement.callback);
+		if (!associatedElement.callbacks.length) {
+			associatedElement.observer?.disconnect();
+			associatedElements.delete(element);
+		}
+	}
+	registeredElement.observedElements = registeredElement.observedElements.filter(itm => itm !== element);
+};
+
+const deregisterUI5Element = (el: UI5Element) => {
+	const registeredElement = registeredElements.get(el);
+	if (!registeredElement) {
+		return;
+	}
+	const oldObservedElements = [...registeredElement.observedElements];
+	oldObservedElements.forEach(observedElement => {
+		_removeObservedElementFromRegisteredElement(registeredElement, observedElement);
+	});
+	el.detachInvalidate(registeredElement.invalidationCallback);
+	registeredElements.delete(el);
+};
+
 export {
 	getEffectiveAriaLabelText,
 	getAssociatedLabelForTexts,
+	registerUI5Element,
+	deregisterUI5Element,
+	getAllAccessibleNameRefTexts,
 };

package/src/util/FocusableElements.ts

@@ -30,12 +30,15 @@ const isElemFocusable = (el: HTMLElement) => {
 
 const findFocusableElement = async (container: HTMLElement, forward: boolean, startFromContainer?: boolean): FocusableElementPromise => {
 	let child: HTMLElement | undefined;
+	let assignedElements;
+	let currentIndex = -1;
 
 	if (container.shadowRoot) {
 		child = forward ? container.shadowRoot.firstChild as HTMLElement : container.shadowRoot.lastChild as HTMLElement;
 	} else if (container instanceof HTMLSlotElement && container.assignedNodes()) {
-		const assignedElements = container.assignedNodes();
-		child = forward ? assignedElements[0] as HTMLElement : assignedElements[assignedElements.length - 1] as HTMLElement;
+		assignedElements = container.assignedNodes();
+		currentIndex = forward ? 0 : assignedElements.length - 1;
+		child = assignedElements[currentIndex] as HTMLElement;
 	} else if (startFromContainer) {
 		child = container;
 	} else {
@@ -69,6 +72,13 @@ const findFocusableElement = async (container: HTMLElement, forward: boolean, st
 		}
 
 		child = forward ? originalChild.nextSibling as HTMLElement : originalChild.previousSibling as HTMLElement;
+
+		// If the child element is not part of the currently assigned element,
+		// we have to check the next element assigned to the slot or continue with the next sibling of the slot,
+		// otherwise, the nextSibling is the next element inside the light DOM
+		if (assignedElements && !assignedElements[currentIndex].contains(child)) {
+			child = assignedElements[++currentIndex] as HTMLElement;
+		}
 	}
 
 	/* eslint-enable no-await-in-loop */