@ui5/webcomponents-base 0.0.0-bf8366eb6 → 0.0.0-c143e338b

package/dist/UI5Element.js

@@ -11,17 +11,47 @@ 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 { kebabToCamelCase, camelToKebabCase } from "./util/StringHelper.js";
+import { kebabToCamelCase, camelToKebabCase, kebabToPascalCase } from "./util/StringHelper.js";
 import isValidPropertyName from "./util/isValidPropertyName.js";
 import { getSlotName, getSlottedNodesList } from "./util/SlotsHelper.js";
 import arraysAreEqual from "./util/arraysAreEqual.js";
 import { markAsRtlAware } from "./locale/RTLAwareRegistry.js";
-import executeTemplate, { getTagsToScope } from "./renderer/executeTemplate.js";
-import { attachFormElementInternals, setFormValue } from "./features/InputElementsFormSupport.js";
+import executeTemplate from "./renderer/executeTemplate.js";
+import { shouldScopeCustomElement } from "./CustomElementsScopeUtils.js";
+import { updateFormValue, setFormValue } from "./features/InputElementsFormSupport.js";
+import { getI18nBundle } from "./i18nBundle.js";
+import { fetchCldr } from "./asset-registries/LocaleData.js";
+import getLocale from "./locale/getLocale.js";
+import { getLanguageChangePending } from "./config/Language.js";
 const DEV_MODE = true;
 let autoId = 0;
 const elementTimeouts = new Map();
 const uniqueDependenciesCache = new Map();
+const defaultConverter = {
+    fromAttribute(value, type) {
+        if (type === Boolean) {
+            return value !== null;
+        }
+        if (type === Number) {
+            return value === null ? undefined : parseFloat(value);
+        }
+        return value;
+    },
+    toAttribute(value, type) {
+        if (type === Boolean) {
+            return value ? "" : null;
+        }
+        // don't set attributes for arrays and objects
+        if (type === Object || type === Array) {
+            return null;
+        }
+        // object, array, other
+        if (value === null || value === undefined) {
+            return null;
+        }
+        return String(value);
+    },
+};
 /**
  * Triggers re-rendering of a UI5Element instance due to state change.
  * @param {ChangeInfo} changeInfo An object with information about the change that caused invalidation.
@@ -33,6 +63,13 @@ function _invalidate(changeInfo) {
     if (this._suppressInvalidation) {
         return;
     }
+    const ctor = this.constructor;
+    // Skip re-rendering of language-aware components while language-specific data (e.g., CLDR, language bundles) is still loading.
+    // Once all necessary language data has been loaded, the language change
+    // will trigger a re-render of all language-aware components.
+    if (ctor.getMetadata().isLanguageAware() && getLanguageChangePending()) {
+        return;
+    }
     // Call the onInvalidation hook
     this.onInvalidation(changeInfo);
     this._changedState.push(changeInfo);
@@ -65,6 +102,11 @@ function getPropertyDescriptor(proto, name) {
 class UI5Element extends HTMLElement {
     constructor() {
         super();
+        this.__shouldHydrate = false;
+        // used to differentiate whether a setter is called from the constructor (from an initializer) or later
+        // setters from the constructor should not set attributes, this is delegated after the first rendering but is async
+        // setters after the constructor can set attributes synchronously for more convinient development
+        this._rendered = false;
         const ctor = this.constructor;
         this._changedState = []; // Filled on each invalidation, cleared on re-render (used for debugging)
         this._suppressInvalidation = true; // A flag telling whether all invalidations should be ignored. Initialized with "true" because a UI5Element can not be invalidated until it is rendered for the first time
@@ -82,10 +124,43 @@ class UI5Element extends HTMLElement {
         this._doNotSyncAttributes = new Set(); // attributes that are excluded from attributeChangedCallback synchronization
         this._slotsAssignedNodes = new WeakMap(); // map of all nodes, slotted (directly or transitively) per component slot
         this._state = { ...ctor.getMetadata().getInitialState() };
-        this._upgradeAllProperties();
+        // save properties set before element is upgraded, as they will be overriden by the field initializers in the constructor
+        this.initializedProperties = new Map();
+        const allProps = this.constructor.getMetadata().getPropertiesList();
+        allProps.forEach(propertyName => {
+            if (this.hasOwnProperty(propertyName)) { // eslint-disable-line
+                const value = this[propertyName];
+                this.initializedProperties.set(propertyName, value);
+            }
+        });
+        this._internals = this.attachInternals();
+        this._initShadowRoot();
+    }
+    _initShadowRoot() {
+        const ctor = this.constructor;
         if (ctor._needsShadowDOM()) {
             const defaultOptions = { mode: "open" };
-            this.attachShadow({ ...defaultOptions, ...ctor.getMetadata().getShadowRootOptions() });
+            if (!this.shadowRoot) {
+                this.attachShadow({ ...defaultOptions, ...ctor.getMetadata().getShadowRootOptions() });
+            }
+            else {
+                // The shadow root is initially rendered. This applies to case where the component's template
+                // is inserted into the DOM declaratively using a <template> tag.
+                this.__shouldHydrate = true;
+            }
+            const slotsAreManaged = ctor.getMetadata().slotsAreManaged();
+            if (slotsAreManaged) {
+                this.shadowRoot.addEventListener("slotchange", this._onShadowRootSlotChange.bind(this));
+            }
+        }
+    }
+    /**
+     * Note: this "slotchange" listener is for slots, rendered in the component's shadow root
+     */
+    _onShadowRootSlotChange(e) {
+        const targetShadowRoot = e.target?.getRootNode(); // the "slotchange" event target is always a slot element
+        if (targetShadowRoot === this.shadowRoot) { // only for slotchange events that originate from slots, belonging to the component's shadow root
+            this._processChildren();
         }
     }
     /**
@@ -109,22 +184,11 @@ class UI5Element extends HTMLElement {
      * @private
      */
     async connectedCallback() {
-        if (DEV_MODE) {
-            const rootNode = this.getRootNode();
-            // when an element is connected, check if it exists in the `dependencies` of the parent
-            if (rootNode instanceof ShadowRoot && instanceOfUI5Element(rootNode.host)) {
-                const klass = rootNode.host.constructor;
-                const hasDependency = getTagsToScope(rootNode.host).includes(this.constructor.getMetadata().getPureTag());
-                if (!hasDependency) {
-                    // eslint-disable-next-line no-console
-                    console.error(`[UI5-FWK] ${this.constructor.getMetadata().getTag()} not found in dependencies of ${klass.getMetadata().getTag()}`);
-                }
-            }
-        }
         if (DEV_MODE) {
             const props = this.constructor.getMetadata().getProperties();
             for (const [prop, propData] of Object.entries(props)) { // eslint-disable-line
-                if (Object.hasOwn(this, prop)) {
+                if (Object.hasOwn(this, prop) && !this.initializedProperties.has(prop)) {
+                    // initialized properties should not trigger this error as they will be reassigned, only property initializers will trigger this in case unsupported TS mode
                     // eslint-disable-next-line no-console
                     console.error(`[UI5-FWK] ${this.constructor.getMetadata().getTag()} has a property [${prop}] that is shadowed by the instance. Updates to this property will not invalidate the component. Possible reason is TS target ES2022 or TS useDefineForClassFields`);
                 }
@@ -132,7 +196,7 @@ class UI5Element extends HTMLElement {
         }
         const ctor = this.constructor;
         this.setAttribute(ctor.getMetadata().getPureTag(), "");
-        if (ctor.getMetadata().supportsF6FastNavigation()) {
+        if (ctor.getMetadata().supportsF6FastNavigation() && !this.hasAttribute("data-sap-ui-fastnavgroup")) {
             this.setAttribute("data-sap-ui-fastnavgroup", "true");
         }
         const slotsAreManaged = ctor.getMetadata().slotsAreManaged();
@@ -142,6 +206,9 @@ class UI5Element extends HTMLElement {
             this._startObservingDOMChildren();
             await this._processChildren();
         }
+        if (!ctor.asyncFinished) {
+            await ctor.definePromise;
+        }
         if (!this._inDOM) { // Component removed from DOM while _processChildren was running
             return;
         }
@@ -199,10 +266,9 @@ class UI5Element extends HTMLElement {
             return;
         }
         const canSlotText = metadata.canSlotText();
-        const hasClonedSlot = Object.keys(metadata.getSlots()).some(slotName => metadata.getSlots()[slotName].cloned);
         const mutationObserverOptions = {
             childList: true,
-            subtree: canSlotText || hasClonedSlot,
+            subtree: canSlotText,
             characterData: canSlotText,
         };
         observeDOMNode(this, this._processChildren.bind(this), mutationObserverOptions);
@@ -301,6 +367,7 @@ class UI5Element extends HTMLElement {
         // not the order elements are defined.
         slottedChildrenMap.forEach((children, propertyName) => {
             this._state[propertyName] = children.sort((a, b) => a.idx - b.idx).map(_ => _.child);
+            this._state[kebabToCamelCase(propertyName)] = this._state[propertyName];
         });
         // Compare the content of each slot with the cached values and invalidate for the ones that changed
         let invalidated = false;
@@ -345,6 +412,7 @@ class UI5Element extends HTMLElement {
             }
         });
         this._state[propertyName] = [];
+        this._state[kebabToCamelCase(propertyName)] = this._state[propertyName];
     }
     /**
      * Attach a callback that will be executed whenever the component is invalidated
@@ -398,20 +466,8 @@ class UI5Element extends HTMLElement {
         const nameInCamelCase = kebabToCamelCase(realName);
         if (properties.hasOwnProperty(nameInCamelCase)) { // eslint-disable-line
             const propData = properties[nameInCamelCase];
-            const propertyType = propData.type;
-            let propertyValidator = propData.validator;
-            if (propertyType && propertyType.isDataTypeClass) {
-                propertyValidator = propertyType;
-            }
-            if (propertyValidator) {
-                newPropertyValue = propertyValidator.attributeToProperty(newValue);
-            }
-            else if (propertyType === Boolean) {
-                newPropertyValue = newValue !== null;
-            }
-            else {
-                newPropertyValue = newValue;
-            }
+            const converter = propData.converter ?? defaultConverter;
+            newPropertyValue = converter.fromAttribute(newValue, propData.type);
             this[nameInCamelCase] = newPropertyValue;
         }
     }
@@ -420,7 +476,7 @@ class UI5Element extends HTMLElement {
         if (!ctor.getMetadata().isFormAssociated()) {
             return;
         }
-        attachFormElementInternals(this);
+        updateFormValue(this);
     }
     static get formAssociated() {
         return this.getMetadata().isFormAssociated();
@@ -435,54 +491,32 @@ class UI5Element extends HTMLElement {
         }
         const properties = ctor.getMetadata().getProperties();
         const propData = properties[name];
-        const propertyType = propData.type;
-        let propertyValidator = propData.validator;
         const attrName = camelToKebabCase(name);
-        const attrValue = this.getAttribute(attrName);
-        if (propertyType && propertyType.isDataTypeClass) {
-            propertyValidator = propertyType;
-        }
-        if (propertyValidator) {
-            const newAttrValue = propertyValidator.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);
+        const converter = propData.converter || defaultConverter;
+        if (DEV_MODE) {
+            const tag = this.constructor.getMetadata().getTag();
+            if (typeof newValue === "boolean" && propData.type !== Boolean) {
+                // eslint-disable-next-line
+                console.error(`[UI5-FWK] boolean value for property [${name}] of component [${tag}] is missing "{ type: Boolean }" in its property decorator. Attribute conversion will treat it as a string. If this is intended, pass the value converted to string, otherwise add the type to the property decorator`);
             }
-        }
-        else if (propertyType === Boolean) {
-            if (newValue === true && attrValue === null) {
-                this.setAttribute(attrName, "");
+            if (typeof newValue === "number" && propData.type !== Number) {
+                // eslint-disable-next-line
+                console.error(`[UI5-FWK] numeric value for property [${name}] of component [${tag}] is missing "{ type: Number }" in its property decorator. Attribute conversion will treat it as a string. If this is intended, pass the value converted to string, otherwise add the type to the property decorator`);
             }
-            else if (newValue === false && attrValue !== null) {
-                this.removeAttribute(attrName);
+            if (typeof newValue === "string" && propData.type && propData.type !== String) {
+                // eslint-disable-next-line
+                console.error(`[UI5-FWK] string value for property [${name}] of component [${tag}] which has a non-string type [${propData.type}] in its property decorator. Attribute conversion will stop and keep the string value in the property.`);
             }
         }
-        else if (typeof newValue !== "object") {
-            if (attrValue !== newValue) {
-                this.setAttribute(attrName, newValue);
-            }
-        } // else { return; } // old object handling
-    }
-    /**
-     * @private
-     */
-    _upgradeProperty(propertyName) {
-        if (this.hasOwnProperty(propertyName)) { // eslint-disable-line
-            const value = this[propertyName];
-            delete this[propertyName];
-            this[propertyName] = value;
+        const newAttrValue = converter.toAttribute(newValue, propData.type);
+        this._doNotSyncAttributes.add(attrName); // skip the attributeChangedCallback call for this attribute
+        if (newAttrValue === null || newAttrValue === undefined) { // null means there must be no attribute for the current value of the property
+            this.removeAttribute(attrName); // remove the attribute safely (will not trigger synchronization to the property value due to the above line)
         }
-    }
-    /**
-     * @private
-     */
-    _upgradeAllProperties() {
-        const allProps = this.constructor.getMetadata().getPropertiesList();
-        allProps.forEach(this._upgradeProperty.bind(this));
+        else {
+            this.setAttribute(attrName, newAttrValue); // setting attributes from properties should not trigger the property setter again
+        }
+        this._doNotSyncAttributes.delete(attrName); // enable synchronization again for this attribute
     }
     /**
      * Returns a singleton event listener for the "change" event of a child in a given slot
@@ -546,6 +580,7 @@ class UI5Element extends HTMLElement {
     }
     /**
      * Whenever a slot element is slotted inside a UI5 Web Component, its slotchange event invalidates the component
+     * Note: this "slotchange" listener is for slots that are children of the component (in the light dom, as opposed to slots rendered by the component in the shadow root)
      *
      * @param slotName the name of the slot, where the slot element (whose slotchange event we're listening to) is
      * @private
@@ -585,6 +620,13 @@ class UI5Element extends HTMLElement {
      * @public
      */
     onInvalidation(changeInfo) { } // eslint-disable-line
+    updateAttributes() {
+        const ctor = this.constructor;
+        const props = ctor.getMetadata().getProperties();
+        for (const [prop, propData] of Object.entries(props)) { // eslint-disable-line
+            this._updateAttribute(prop, this[prop]);
+        }
+    }
     /**
      * Do not call this method directly, only intended to be called by js
      * @protected
@@ -592,13 +634,29 @@ class UI5Element extends HTMLElement {
     _render() {
         const ctor = this.constructor;
         const hasIndividualSlots = ctor.getMetadata().hasIndividualSlots();
+        // restore properties that were initialized before `define` by calling the setter
+        if (this.initializedProperties.size > 0) {
+            Array.from(this.initializedProperties.entries()).forEach(([prop, value]) => {
+                delete this[prop];
+                this[prop] = value;
+            });
+            this.initializedProperties.clear();
+        }
         // suppress invalidation to prevent state changes scheduling another rendering
         this._suppressInvalidation = true;
-        this.onBeforeRendering();
-        // Intended for framework usage only. Currently ItemNavigation updates tab indexes after the component has updated its state but before the template is rendered
-        this._componentStateFinalizedEventProvider.fireEvent("componentStateFinalized");
-        // resume normal invalidation handling
-        this._suppressInvalidation = false;
+        try {
+            this.onBeforeRendering();
+            if (!this._rendered) {
+                // first time rendering, previous setters might have been initializers from the constructor - update attributes here
+                this.updateAttributes();
+            }
+            // Intended for framework usage only. Currently ItemNavigation updates tab indexes after the component has updated its state but before the template is rendered
+            this._componentStateFinalizedEventProvider.fireEvent("componentStateFinalized");
+        }
+        finally {
+            // always resume normal invalidation handling
+            this._suppressInvalidation = false;
+        }
         // Update the shadow root with the render result
         /*
         if (this._changedState.length) {
@@ -621,10 +679,11 @@ class UI5Element extends HTMLElement {
         }
         */
         this._changedState = [];
-        // Update shadow root and static area item
+        // Update shadow root
         if (ctor._needsShadowDOM()) {
             updateShadowRoot(this);
         }
+        this._rendered = true;
         // Safari requires that children get the slot attribute only after the slot tags have been rendered in the shadow DOM
         if (hasIndividualSlots) {
             this._assignIndividualSlotsToChildren();
@@ -695,7 +754,10 @@ class UI5Element extends HTMLElement {
     async focus(focusOptions) {
         await this._waitForDomRef();
         const focusDomRef = this.getFocusDomRef();
-        if (focusDomRef && typeof focusDomRef.focus === "function") {
+        if (focusDomRef === this || !this.isConnected) {
+            HTMLElement.prototype.focus.call(this, focusOptions);
+        }
+        else if (focusDomRef && typeof focusDomRef.focus === "function") {
             focusDomRef.focus(focusOptions);
         }
     }
@@ -707,12 +769,39 @@ class UI5Element extends HTMLElement {
      * @param cancelable - true, if the user can call preventDefault on the event object
      * @param bubbles - true, if the event bubbles
      * @returns false, if the event was cancelled (preventDefault called), true otherwise
+     * @deprecated use fireDecoratorEvent instead
      */
     fireEvent(name, data, cancelable = false, bubbles = true) {
         const eventResult = this._fireEvent(name, data, cancelable, bubbles);
-        const camelCaseEventName = kebabToCamelCase(name);
-        if (camelCaseEventName !== name) {
-            return eventResult && this._fireEvent(camelCaseEventName, data, cancelable, bubbles);
+        const pascalCaseEventName = kebabToPascalCase(name);
+        // pascal events are more convinient for native react usage
+        // live-change:
+        //	 Before: onlive-change
+        //	 After: onLiveChange
+        if (pascalCaseEventName !== name) {
+            return eventResult && this._fireEvent(pascalCaseEventName, data, cancelable, bubbles);
+        }
+        return eventResult;
+    }
+    /**
+     * Fires a custom event, configured via the "event" decorator.
+     * @public
+     * @param name - name of the event
+     * @param data - additional data for the event
+     * @returns false, if the event was cancelled (preventDefault called), true otherwise
+     */
+    fireDecoratorEvent(name, data) {
+        const eventData = this.getEventData(name);
+        const cancellable = eventData ? eventData.cancelable : false;
+        const bubbles = eventData ? eventData.bubbles : false;
+        const eventResult = this._fireEvent(name, data, cancellable, bubbles);
+        const pascalCaseEventName = kebabToPascalCase(name);
+        // pascal events are more convinient for native react usage
+        // live-change:
+        //	 Before: onlive-change
+        //	 After: onLiveChange
+        if (pascalCaseEventName !== name) {
+            return eventResult && this._fireEvent(pascalCaseEventName, data, cancellable, bubbles);
         }
         return eventResult;
     }
@@ -739,6 +828,11 @@ class UI5Element extends HTMLElement {
         // Return false if any of the two events was prevented (its result was false).
         return normalEventResult && noConflictEventResult;
     }
+    getEventData(name) {
+        const ctor = this.constructor;
+        const eventMap = ctor.getMetadata().getEvents();
+        return eventMap[name];
+    }
     /**
      * Returns the actual children, associated with a slot.
      * Useful when there are transitive slots in nested component scenarios and you don't want to get a list of the slots, but rather of their content.
@@ -784,6 +878,9 @@ class UI5Element extends HTMLElement {
     get isUI5Element() {
         return true;
     }
+    get isUI5AbstractElement() {
+        return !this.constructor._needsShadowDOM();
+    }
     get classes() {
         return {};
     }
@@ -792,7 +889,7 @@ class UI5Element extends HTMLElement {
      * @private
      */
     get accessibilityInfo() {
-        return {};
+        return undefined;
     }
     /**
      * Do not override this method in derivatives of UI5Element, use metadata properties instead
@@ -801,6 +898,19 @@ class UI5Element extends HTMLElement {
     static get observedAttributes() {
         return this.getMetadata().getAttributesList();
     }
+    /**
+     * Returns all tags, used inside component's template subject to scoping.
+     * returns {Array[]} // TODO add @
+     * @private
+     */
+    static get tagsToScope() {
+        const componentTag = this.getMetadata().getPureTag();
+        const tagsToScope = this.getUniqueDependencies().map((dep) => dep.getMetadata().getPureTag()).filter(shouldScopeCustomElement);
+        if (shouldScopeCustomElement(componentTag)) {
+            tagsToScope.push(componentTag);
+        }
+        return tagsToScope;
+    }
     /**
      * @private
      */
@@ -819,18 +929,6 @@ class UI5Element extends HTMLElement {
             if (!isValidPropertyName(prop)) {
                 console.warn(`"${prop}" is not a valid property name. Use a name that does not collide with DOM APIs`); /* eslint-disable-line */
             }
-            if (propData.type === Boolean && propData.defaultValue) {
-                throw new Error(`Cannot set a default value for property "${prop}". All booleans are false by default.`);
-            }
-            if (propData.type === Array) {
-                throw new Error(`Wrong type for property "${prop}". Properties cannot be of type Array - use "multiple: true" and set "type" to the single value type, such as "String", "Object", etc...`);
-            }
-            if (propData.type === Object && propData.defaultValue) {
-                throw new Error(`Cannot set a default value for property "${prop}". All properties of type "Object" are empty objects by default.`);
-            }
-            if (propData.multiple && propData.defaultValue) {
-                throw new Error(`Cannot set a default value for property "${prop}". All multiple properties are empty arrays by default.`);
-            }
             const descriptor = getPropertyDescriptor(proto, prop);
             // if the decorator is on a setter, proxy the new setter to it
             let origSet;
@@ -850,43 +948,12 @@ class UI5Element extends HTMLElement {
                     if (origGet) {
                         return origGet.call(this);
                     }
-                    if (this._state[prop] !== undefined) {
-                        return this._state[prop];
-                    }
-                    const propDefaultValue = propData.defaultValue;
-                    if (propData.type === Boolean) {
-                        return false;
-                    }
-                    else if (propData.type === String) { // eslint-disable-line
-                        return propDefaultValue;
-                    }
-                    else if (propData.multiple) { // eslint-disable-line
-                        return [];
-                    }
-                    else {
-                        return propDefaultValue;
-                    }
+                    return this._state[prop];
                 },
                 set(value) {
-                    let isDifferent;
                     const ctor = this.constructor;
-                    const metadataCtor = ctor.getMetadata().constructor;
-                    value = metadataCtor.validatePropertyValue(value, propData);
-                    const propertyType = propData.type;
-                    let propertyValidator = propData.validator;
                     const oldState = origGet ? origGet.call(this) : this._state[prop];
-                    if (propertyType && propertyType.isDataTypeClass) {
-                        propertyValidator = propertyType;
-                    }
-                    if (propertyValidator) {
-                        isDifferent = !propertyValidator.valuesAreEqual(oldState, value);
-                    }
-                    else if (Array.isArray(oldState) && Array.isArray(value) && propData.multiple && propData.compareValues) { // compareValues is added for IE, test if needed now
-                        isDifferent = !arraysAreEqual(oldState, value);
-                    }
-                    else {
-                        isDifferent = oldState !== value;
-                    }
+                    const isDifferent = oldState !== value;
                     if (isDifferent) {
                         // if the decorator is on a setter, use it for storage
                         if (origSet) {
@@ -901,10 +968,17 @@ class UI5Element extends HTMLElement {
                             newValue: value,
                             oldValue: oldState,
                         });
+                        if (this._rendered) {
+                            // the component is already rendered, indicating it is not the constructor -
+                            // therefore the attribute can be set synchronously.
+                            // get the effective value of the property,
+                            // as it might differ from the provided value
+                            const newValue = origGet ? origGet.call(this) : this._state[prop];
+                            this._updateAttribute(prop, newValue);
+                        }
                         if (ctor.getMetadata().isFormAssociated()) {
                             setFormValue(this);
                         }
-                        this._updateAttribute(prop, value);
                     }
                 },
             });
@@ -917,7 +991,7 @@ class UI5Element extends HTMLElement {
                     console.warn(`"${slotName}" is not a valid property name. Use a name that does not collide with DOM APIs`); /* eslint-disable-line */
                 }
                 const propertyName = slotData.propertyName || slotName;
-                Object.defineProperty(proto, propertyName, {
+                const propertyDescriptor = {
                     get() {
                         if (this._state[propertyName] !== undefined) {
                             return this._state[propertyName];
@@ -927,20 +1001,29 @@ class UI5Element extends HTMLElement {
                     set() {
                         throw new Error("Cannot set slot content directly, use the DOM APIs (appendChild, removeChild, etc...)");
                     },
-                });
+                };
+                Object.defineProperty(proto, propertyName, propertyDescriptor);
+                if (propertyName !== kebabToCamelCase(propertyName)) {
+                    Object.defineProperty(proto, kebabToCamelCase(propertyName), propertyDescriptor);
+                }
             }
         }
     }
     /**
      * Returns an array with the dependencies for this UI5 Web Component, which could be:
-     *  - composed components (used in its shadow root or static area item)
+     *  - composed components (used in its shadow root)
      *  - slotted components that the component may need to communicate with
      *
+     * @deprecated no longer necessary for jsxRenderer-enabled components
      * @protected
      */
     static get dependencies() {
         return [];
     }
+    static cacheUniqueDependencies() {
+        const filtered = this.dependencies.filter((dep, index, deps) => deps.indexOf(dep) === index);
+        uniqueDependenciesCache.set(this, filtered);
+    }
     /**
      * Returns a list of the unique dependencies for this UI5 Web Component
      *
@@ -948,35 +1031,54 @@ class UI5Element extends HTMLElement {
      */
     static getUniqueDependencies() {
         if (!uniqueDependenciesCache.has(this)) {
-            const filtered = this.dependencies.filter((dep, index, deps) => deps.indexOf(dep) === index);
-            uniqueDependenciesCache.set(this, filtered);
+            this.cacheUniqueDependencies();
         }
         return uniqueDependenciesCache.get(this) || [];
     }
-    /**
-     * Returns a promise that resolves whenever all dependencies for this UI5 Web Component have resolved
-     */
-    static whenDependenciesDefined() {
-        return Promise.all(this.getUniqueDependencies().map(dep => dep.define()));
-    }
     /**
      * Hook that will be called upon custom element definition
      *
      * @protected
+     * @deprecated use the "i18n" decorator for fetching message bundles and the "cldr" option in the "customElements" decorator for fetching CLDR
      */
     static async onDefine() {
         return Promise.resolve();
     }
+    static fetchI18nBundles() {
+        return Promise.all(Object.entries(this.getMetadata().getI18n()).map(pair => {
+            const { bundleName } = pair[1];
+            return getI18nBundle(bundleName);
+        }));
+    }
+    static fetchCLDR() {
+        if (this.getMetadata().needsCLDR()) {
+            return fetchCldr(getLocale().getLanguage(), getLocale().getRegion(), getLocale().getScript());
+        }
+        return Promise.resolve();
+    }
+    static get i18nBundles() {
+        return this.i18nBundleStorage;
+    }
     /**
      * Registers a UI5 Web Component in the browser window object
      * @public
      */
-    static async define() {
-        await boot();
-        await Promise.all([
-            this.whenDependenciesDefined(),
-            this.onDefine(),
-        ]);
+    static define() {
+        const defineSequence = async () => {
+            await boot(); // boot must finish first, because it initializes configuration
+            const result = await Promise.all([
+                this.fetchI18nBundles(), // uses configuration
+                this.fetchCLDR(),
+                this.onDefine(),
+            ]);
+            const [i18nBundles] = result;
+            Object.entries(this.getMetadata().getI18n()).forEach((pair, index) => {
+                const bundleName = pair[1].bundleName;
+                this.i18nBundleStorage[bundleName] = i18nBundles[index];
+            });
+            this.asyncFinished = true;
+        };
+        this.definePromise = defineSequence();
         const tag = this.getMetadata().getTag();
         const definedLocally = isTagRegistered(tag);
         const definedGlobally = customElements.get(tag);
@@ -1009,10 +1111,10 @@ class UI5Element extends HTMLElement {
         this._metadata = new UI5ElementMetadata(mergedMetadata);
         return this._metadata;
     }
-    get validity() { return this._internals?.validity; }
-    get validationMessage() { return this._internals?.validationMessage; }
-    checkValidity() { return this._internals?.checkValidity(); }
-    reportValidity() { return this._internals?.reportValidity(); }
+    get validity() { return this._internals.validity; }
+    get validationMessage() { return this._internals.validationMessage; }
+    checkValidity() { return this._internals.checkValidity(); }
+    reportValidity() { return this._internals.reportValidity(); }
 }
 /**
  * Returns the metadata object for this UI5 Web Component Class
@@ -1024,6 +1126,7 @@ UI5Element.metadata = {};
  * @protected
  */
 UI5Element.styles = "";
+UI5Element.i18nBundleStorage = {};
 /**
  * Always use duck-typing to cover all runtimes on the page.
  */