@ui5/webcomponents-base 0.0.0-9261ac932 → 0.0.0-95afb1087

package/dist/UI5Element.js

@@ -16,12 +16,13 @@ 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 executeTemplate from "./renderer/executeTemplate.js";
+import { shouldScopeCustomElement } from "./CustomElementsScopeUtils.js";
 import { updateFormValue, setFormValue } from "./features/InputElementsFormSupport.js";
-import { getComponentFeature, subscribeForFeatureLoad } from "./FeaturesRegistry.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();
@@ -62,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);
@@ -94,6 +102,7 @@ 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
@@ -131,7 +140,14 @@ class UI5Element extends HTMLElement {
         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));
@@ -168,18 +184,6 @@ 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
@@ -192,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();
@@ -202,12 +206,12 @@ class UI5Element extends HTMLElement {
             this._startObservingDOMChildren();
             await this._processChildren();
         }
-        if (!this._inDOM) { // Component removed from DOM while _processChildren was running
-            return;
-        }
         if (!ctor.asyncFinished) {
             await ctor.definePromise;
         }
+        if (!this._inDOM) { // Component removed from DOM while _processChildren was running
+            return;
+        }
         renderImmediately(this);
         this._domRefReadyPromise._deferredResolve();
         this._fullyConnected = true;
@@ -675,7 +679,7 @@ class UI5Element extends HTMLElement {
         }
         */
         this._changedState = [];
-        // Update shadow root and static area item
+        // Update shadow root
         if (ctor._needsShadowDOM()) {
             updateShadowRoot(this);
         }
@@ -750,7 +754,7 @@ class UI5Element extends HTMLElement {
     async focus(focusOptions) {
         await this._waitForDomRef();
         const focusDomRef = this.getFocusDomRef();
-        if (focusDomRef === this) {
+        if (focusDomRef === this || !this.isConnected) {
             HTMLElement.prototype.focus.call(this, focusOptions);
         }
         else if (focusDomRef && typeof focusDomRef.focus === "function") {
@@ -874,6 +878,9 @@ class UI5Element extends HTMLElement {
     get isUI5Element() {
         return true;
     }
+    get isUI5AbstractElement() {
+        return !this.constructor._needsShadowDOM();
+    }
     get classes() {
         return {};
     }
@@ -882,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
@@ -891,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
      */
@@ -949,8 +969,12 @@ class UI5Element extends HTMLElement {
                             oldValue: oldState,
                         });
                         if (this._rendered) {
-                            // is already rendered so it is not the constructor - can set the attribute synchronously
-                            this._updateAttribute(prop, value);
+                            // 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);
@@ -987,9 +1011,10 @@ class UI5Element extends HTMLElement {
     }
     /**
      * 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() {
@@ -1031,33 +1056,30 @@ class UI5Element extends HTMLElement {
         }
         return Promise.resolve();
     }
+    static get i18nBundles() {
+        return this.i18nBundleStorage;
+    }
     /**
      * Registers a UI5 Web Component in the browser window object
      * @public
      */
     static define() {
-        this.definePromise = Promise.all([
-            this.fetchI18nBundles(),
-            this.fetchCLDR(),
-            boot(),
-            this.onDefine(),
-        ]).then(result => {
+        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 propertyName = pair[0];
-                const targetClass = pair[1].target;
-                targetClass[propertyName] = i18nBundles[index];
+                const bundleName = pair[1].bundleName;
+                this.i18nBundleStorage[bundleName] = i18nBundles[index];
             });
             this.asyncFinished = true;
-        });
+        };
+        this.definePromise = defineSequence();
         const tag = this.getMetadata().getTag();
-        const features = this.getMetadata().getFeatures();
-        features.forEach(feature => {
-            if (getComponentFeature(feature)) {
-                this.cacheUniqueDependencies();
-            }
-            subscribeForFeatureLoad(feature, this, this.cacheUniqueDependencies.bind(this));
-        });
         const definedLocally = isTagRegistered(tag);
         const definedGlobally = customElements.get(tag);
         if (definedGlobally && !definedLocally) {
@@ -1104,6 +1126,7 @@ UI5Element.metadata = {};
  * @protected
  */
 UI5Element.styles = "";
+UI5Element.i18nBundleStorage = {};
 /**
  * Always use duck-typing to cover all runtimes on the page.
  */