@salesforce/lightning-out 2.2.0-rc.2

package/dist/index.iife.debug.js

@@ -0,0 +1,1724 @@
+/*! @salesforce/lightning-out v2.2.0-rc.2 (2026-03-18) */
+var LO2 = (function (exports) {
+    'use strict';
+
+    /**
+     * EmbeddingResizer - Handles dynamic iframe/container resizing
+     * Uses ResizeObserver to monitor element size changes and notify the host
+     */
+    /**
+     * Generates a pseudo-random alphanumeric identifier string for unique
+     * element IDs or temporary identifiers (not cryptographically secure).
+     *
+     * @returns Random alphanumeric string
+     *
+     * @example
+     * getUUID(); // 'k2j8f5l9m'
+     */
+    function getUUID() {
+        return Math.floor(Math.random() * Number.MAX_SAFE_INTEGER).toString(36);
+    }
+
+    /**
+     * Events fired by dispatchEvent
+     */
+    const events = {
+        lo: {
+            // public
+            application: {
+                ready: "lo.application.ready",
+                error: "lo.application.error",
+                logout: "lo.application.logout",
+                auth: {
+                    redirect: "lo.application.auth.redirect",
+                },
+            },
+            // public
+            component: {
+                ready: "lo.component.ready",
+                error: "lo.component.error",
+            },
+            // internal
+            iframe: {
+                load: "lo.iframe.load",
+                error: "lo.iframe.error",
+                logout: "lo.iframe.logout",
+                auth: {
+                    redirect: "lo.iframe.auth.redirect",
+                },
+            },
+        },
+    };
+    /**
+     * Messages sent by postMessage (all internal)
+     */
+    const messages = {
+        lo: {
+            addEventListener: "lo.addEventListener",
+            dispatchEvent: "lo.dispatchEvent",
+            error: "lo.error",
+            getComponentData: "lo.getComponentData",
+            loaded: "lo.loaded",
+            logout: "lo.logout",
+            ready: "lo.ready",
+            redirect: "lo.redirect",
+            removeEventListener: "lo.removeEventListener",
+            setComponentData: "lo.setComponentData",
+            setComponentProps: "lo.setComponentProps",
+        },
+    };
+
+    const logLevels = {
+        error: 0,
+        warn: 1,
+        info: 2,
+        debug: 3,
+        trace: 4,
+    };
+    class Logger {
+        static #prefix = "LO2";
+        static #level = "error";
+        #branding;
+        static set level(level) {
+            this.#level = level;
+        }
+        static set prefix(prefix) {
+            this.#prefix = prefix;
+        }
+        // This string appears first in the console, it can be used for filtering messages
+        get brand() {
+            return `${Logger.#prefix}:${this.#branding}:`;
+        }
+        constructor(branding) {
+            if (typeof branding === "string") {
+                this.#branding = branding;
+            }
+            else {
+                this.#branding = branding.constructor?.name;
+            }
+        }
+        error(...args) {
+            if (logLevels.error <= logLevels[Logger.#level]) {
+                console.error(this.brand, ...args);
+            }
+        }
+        warn(...args) {
+            if (logLevels.warn <= logLevels[Logger.#level]) {
+                console.warn(this.brand, ...args);
+            }
+        }
+        info(...args) {
+            if (logLevels.info <= logLevels[Logger.#level]) {
+                console.info(this.brand, ...args);
+            }
+        }
+        debug(...args) {
+            if (logLevels.debug <= logLevels[Logger.#level]) {
+                console.debug(this.brand, ...args);
+            }
+        }
+        trace(...args) {
+            if (logLevels.trace <= logLevels[Logger.#level]) {
+                console.trace(this.brand, ...args);
+            }
+        }
+    }
+
+    /**
+     * Error class for Lightning Out
+     */
+    const logger$4 = new Logger("LightningOutError");
+    class LightningOutError {
+        #eventTarget;
+        #branding;
+        constructor(branding) {
+            if (typeof branding === "string") {
+                this.#branding = branding;
+            }
+            else {
+                this.#branding = branding.constructor?.name;
+            }
+            if (typeof branding.dispatchEvent === "function") {
+                this.#eventTarget = branding;
+            }
+        }
+        #branded(message) {
+            return `${this.#branding}: ${message}`;
+        }
+        create(error) {
+            const message = typeof error === "string" ? error : error.message;
+            return new Error(this.#branded(message));
+        }
+        dispatch(type, error) {
+            const message = typeof error === "string" ? error : error.message || error.detail?.message;
+            if (this.#eventTarget) {
+                const detail = error.detail || {
+                    message: this.#branded(message),
+                    originalError: error,
+                };
+                const loErrorEvent = new CustomEvent(type, { detail });
+                this.#eventTarget.dispatchEvent(loErrorEvent);
+                logger$4.error(`${this.#branded("dispatched error")} -> ${type}: ${message}`);
+            }
+            else {
+                logger$4.error(`${this.#branded("unable to dispatch error on a non-EventTarget object")} -> ${type}: ${message}`);
+            }
+        }
+    }
+
+    /**
+     * Utility functions for Lightning Out
+     * @fileoverview Collection of utility functions used throughout the Lightning Out framework
+     * @author Salesforce ECS Team
+     * @version 2.1.0
+     */
+    const loError = new LightningOutError("LightningOutUtils");
+    /**
+     * Converts HTML attribute/element names from kebab-case format to JavaScript property/component names in camelCase
+     * format.
+     *
+     * @param attrName - The kebab-case string to convert (should be all lowercase)
+     * @returns The camelCase string
+     *
+     * @example
+     * kebabToCamel('data-attribute-name'); // 'dataAttributeName'
+     */
+    function kebabToCamel(attrName) {
+        // Validate the input is all lowercase
+        if (/[A-Z]/.test(attrName)) {
+            throw loError.create(`kebabToCamel: "${attrName}" is not valid kebab-case - must be all lowercase.`);
+        }
+        // Standard kebab-case to camelCase conversion
+        return attrName.replace(/-([a-z])/g, (_, char) => char.toUpperCase());
+    }
+    /**
+     * Converts JavaScript property/component names from camelCase format to HTML attribute/element names in kebab-case
+     * format. This function performs pure transformation without validation.
+     *
+     * @param propName - The camelCase string to convert
+     * @returns The kebab-case string
+     *
+     * @example
+     * camelToKebab('dataAttributeName'); // 'data-attribute-name'
+     */
+    function camelToKebab(propName) {
+        // Standard camelCase to kebab-case conversion
+        return propName.replace(/([A-Z])/g, "-$1").toLowerCase();
+    }
+    /**
+     * Converts JavaScript property names from camelCase format to snake_case format. Preserves existing underscores by
+     * escaping them as double underscores.
+     *
+     * @param propName - The camelCase string to convert
+     * @returns The snake_case string
+     *
+     * @example
+     * camelToSnake('cwcMessaging'); // 'cwc_messaging'
+     * camelToSnake('my_variableName'); // 'my__variable_name'
+     */
+    function camelToSnake(propName) {
+        return propName.replace(/([A-Z_])/g, "_$1").toLowerCase();
+    }
+    /**
+     * Converts snake_case strings to camelCase format. Handles escaped double underscores by converting them back to single
+     * underscores.
+     *
+     * @param snakeName - The snake_case string to convert (should be all lowercase)
+     * @returns The camelCase string
+     *
+     * @example
+     * snakeToCamel('cwc_messaging'); // 'cwcMessaging'
+     * snakeToCamel('my__variable_name'); // 'my_variableName'
+     */
+    function snakeToCamel(snakeName) {
+        if (/[A-Z]/.test(snakeName)) {
+            throw loError.create(`snakeToCamel: "${snakeName}" is not valid snake_case - must be all lowercase.`);
+        }
+        return snakeName.replace(/_([a-z_])/g, (_, char) => char.toUpperCase());
+    }
+    /**
+     * Transforms custom element names in kebab-name format (i.e. foo-bar) into standard Salesforce Lightning Web component
+     * names (i.e. foo/bar) for internal component resolution.
+     *
+     * @param elementName - The custom element tag name (must contain a hyphen and be all lowercase)
+     * @param isAura - Whether this is an Aura component
+     * @returns Lightning component name in namespace/componentName format (LWC) or namespace:componentName format (Aura)
+     * @throws LightningOutError if the element name input doesn't contain a hyphen or contains uppercase letters
+     *
+     * @example
+     * elementNameToStandardName('c-my-component'); // 'c/myComponent'
+     * elementNameToStandardName('c-my-component', true); // 'c:myComponent'
+     */
+    function elementNameToStandardName(elementName, isAura = false) {
+        // Validate the element name input is all lowercase
+        if (/[A-Z]/.test(elementName)) {
+            throw loError.create(`elementNameToStandardName: "${elementName}" is not a valid custom element name - must be all lowercase.`);
+        }
+        const nsSepIdx = elementName.indexOf("-");
+        if (nsSepIdx === -1) {
+            throw loError.create(`elementNameToStandardName: "${elementName}" is not a valid custom element name - missing hyphen character.`);
+        }
+        // Namespace part (before first hyphen) may contain underscores - convert to camelCase
+        const namespace = snakeToCamel(elementName.slice(0, nsSepIdx));
+        const name = kebabToCamel(elementName.slice(nsSepIdx + 1));
+        // Use colon separator for Aura, slash for LWC
+        const separator = isAura ? ":" : "/";
+        return `${namespace}${separator}${name}`;
+    }
+    /**
+     * Transforms standard Salesforce Lightning component names (i.e. foo/bar for LWC, foo:bar for Aura) into custom element
+     * names (i.e. foo-bar) for HTML usage.
+     *
+     * @param standardName - The Lightning component name
+     * @returns Custom element tag name in kebab-case format
+     * @throws LightningOutError if standard name doesn't contain a separator (/ or :), or if namespace contains hyphens
+     *
+     * @example
+     * standardNameToElementName('c/myComponent'); // 'c-my-component'
+     * standardNameToElementName('c:myComponent'); // 'c-my-component'
+     */
+    function standardNameToElementName(standardName) {
+        // Detect namespace separator - slash for LWC, colon for Aura
+        const separator = standardName.includes("/") ? "/" : ":";
+        const sepIdx = standardName.indexOf(separator);
+        if (sepIdx === -1) {
+            throw loError.create(`standardNameToElementName: "${standardName}" is not a valid component name - missing namespace separator.`);
+        }
+        // Validate entire component name input must not contain hyphens
+        if (/-/.test(standardName)) {
+            throw loError.create(`standardNameToElementName: "${standardName}" is not a valid component name - must not contain hyphens.`);
+        }
+        // Validate first character is not uppercase
+        if (/^[A-Z]/.test(standardName)) {
+            throw loError.create(`standardNameToElementName: "${standardName}" is not a valid component name - first character must not be uppercase.`);
+        }
+        // Separate the namespace and component name inputs
+        const namespaceInput = standardName.slice(0, sepIdx);
+        const nameInput = standardName.slice(sepIdx + 1);
+        // Convert namespace input from camelCase to snake_case
+        const namespace = camelToSnake(namespaceInput);
+        // Convert component name input from camelCase to kebab-case
+        const name = camelToKebab(nameInput);
+        return `${namespace}-${name}`;
+    }
+    /**
+     * Checks if a name is in standard Lightning component format (contains '/' for LWC or ':' for Aura).
+     *
+     * @param name - The name to check
+     * @returns True if the name contains a forward slash or colon, false otherwise
+     *
+     * @example
+     * isStandardName('c/myComponent'); // true
+     * isStandardName('c:myComponent'); // true
+     * isStandardName('my-component'); // false
+     */
+    function isStandardName(name) {
+        return name.includes("/") || name.includes(":");
+    }
+    /**
+     * Applies property transformations and validation callbacks to component
+     * property changes before they are sent to Lightning components.
+     * Handles 'dataMirror' prefixes and invokes element-specific property callbacks.
+     *
+     * @param element - Element that may contain property change callbacks
+     * @param changes - Property changes to process
+     * @returns Processed property changes
+     *
+     * @example
+     * processPropertyChanges(element, { dataMirrorHeight: '100px' }); // { height: '100px' }
+     */
+    function processPropertyChanges(element, changes) {
+        const processed = Object.entries(changes).map((entry) => {
+            // Extract the key name (already in camelCase) and it's value
+            let [key, value] = entry;
+            // Check if the key name has the special 'dataMirror' prefix, and if it does, use the suffix
+            // as the actual key name, i.e. 'dataMirrorHeight' becomes 'height'
+            const mirror = key.split("dataMirror");
+            if (mirror.length === 2 && mirror[0] === "") {
+                key = mirror[1].charAt(0).toLowerCase() + mirror[1].slice(1);
+            }
+            // Check if there is a _propertyChanged_ callback for the key, and if there is, call it to
+            // transform the value
+            const callbackName = `_propertyChanged_${key}`;
+            if (typeof element[callbackName] === "function") {
+                const callback = element[callbackName];
+                value = callback(value);
+            }
+            // Return the (possibly) transformed key name and value
+            return [key, value];
+        });
+        // This will remove duplicate key names from the object, if any, the last one prevails.
+        return Object.fromEntries(processed);
+    }
+    /**
+     * Parses and structures URL information for debugging and logging, with
+     * specialized parsing for Salesforce authentication frontdoor URLs.
+     *
+     * @param url - URL object to analyze
+     * @returns Structured URL data with parsed parameters
+     *
+     * @example
+     * getUrlData(new URL('https://example.com/path?param=value'));
+     */
+    function getUrlData(url) {
+        // This function is useful for debugging URLs, it understands frontdoor.jsp URLs
+        const urlData = {};
+        const paramsData = (params) => {
+            const paramsData = {};
+            for (const [key, value] of params.entries()) {
+                paramsData[key] = value;
+            }
+            return paramsData;
+        };
+        urlData.url = url.origin + url.pathname;
+        urlData.urlParams = paramsData(url.searchParams);
+        if (url.pathname === "/secur/frontdoor.jsp") {
+            const paramName = urlData.urlParams["otp"] ? "startURL" : "retURL";
+            const startURL = new URL(urlData.urlParams[paramName], "http://dummy.com");
+            urlData.urlParams[paramName] = {
+                url: startURL.pathname,
+                urlParams: paramsData(startURL.searchParams),
+            };
+        }
+        return urlData;
+    }
+
+    /**
+     * IFrame manager for Lightning Out
+     */
+    const logger$3 = new Logger("LightningOutIFrame");
+    class LightningOutIFrame {
+        #parentElement;
+        #isVisible;
+        #parentError;
+        #hiddenStyle = "display:none";
+        #visibleStyle = "border:0px; width:100%; height:100%; overflow:auto;";
+        #shadowRoot;
+        #element;
+        #window;
+        #origin;
+        #endpoint;
+        #timeoutID;
+        constructor(iframeConfig) {
+            this.#parentElement = iframeConfig.parentElement;
+            this.#isVisible = iframeConfig.isVisible;
+            // Dispatch errors to the iframe's parentElement
+            this.#parentError = new LightningOutError(iframeConfig.parentElement);
+        }
+        get iframeReady() {
+            return !!this.#window && !!this.#origin;
+        }
+        get iframeElement() {
+            return this.#element;
+        }
+        #config(window, origin) {
+            this.#window = window;
+            this.#origin = origin;
+        }
+        #messageListener = (event) => {
+            if (event.data.id !== this.#parentElement._uuid) {
+                // Ignore messages that are not meant to be received by the parent Custom Element
+                return;
+            }
+            logger$3.debug("#messageListener:", `parentElement._uuid: ${this.#parentElement._uuid}`, `parentElement.localName: ${this.#parentElement.localName}`, JSON.stringify(event.data));
+            switch (event.data.type) {
+                case messages.lo.loaded: {
+                    // Clear the timeout, cache its window and origin
+                    this.#timeoutID = clearTimeout(this.#timeoutID);
+                    this.#config(event.source, event.origin);
+                    // Notify the parentElement that the iframe has successfully loaded. The origin where the iframe landed
+                    // might be different than the origin used to load the frontdoor url, so notify that back.
+                    this.#parentElement.dispatchEvent(new CustomEvent(events.lo.iframe.load, {
+                        detail: event.origin,
+                    }));
+                    break;
+                }
+                case messages.lo.logout: {
+                    // Clear the timeout
+                    this.#timeoutID = clearTimeout(this.#timeoutID);
+                    // Notify the parentElement that the iframe loaded the logout page
+                    this.#parentElement.dispatchEvent(new CustomEvent(events.lo.iframe.logout));
+                    break;
+                }
+                case messages.lo.redirect: {
+                    // Clear the timeout
+                    this.#timeoutID = clearTimeout(this.#timeoutID);
+                    // Notify the parentElement that the iframe loaded with a redirection
+                    this.#parentElement.dispatchEvent(new CustomEvent(events.lo.iframe.auth.redirect, {
+                        detail: {
+                            redirectUrl: event.data.redirectUrl,
+                            redirectOrigin: event.origin,
+                        },
+                    }));
+                    break;
+                }
+            }
+        };
+        #init() {
+            if (!this.#element) {
+                const iframe = window.document.createElement("iframe");
+                iframe.name = "lightning_af";
+                // allow-top-navigation should only be enabled for UMA External Forms as Forms are first party and trusted.
+                // No custom code is enabled in External Forms scenario. When this assumption changed, this code needs to
+                // be reviewed and updated.
+                iframe.setAttribute("sandbox", [
+                    "allow-downloads",
+                    "allow-forms",
+                    "allow-popups",
+                    "allow-same-origin",
+                    "allow-scripts",
+                    "allow-top-navigation-by-user-activation",
+                ].join(" "));
+                iframe.style.cssText = this.#isVisible ? this.#visibleStyle : this.#hiddenStyle;
+                this.#element = iframe;
+                this.#shadowRoot = this.#parentElement.attachShadow({
+                    mode: "closed",
+                });
+                this.#shadowRoot.appendChild(this.#element);
+                // Note: In WebKit browsers (Safari/Chrome), the iframe's `onload` event
+                // will be triggered twice if the `onload` handler is attached **before**
+                // the iframe is appended to the DOM.
+                iframe.addEventListener("load", this.#loaded);
+                window.addEventListener("message", this.#messageListener);
+            }
+            return this.#element;
+        }
+        load(endpoint) {
+            const iframe = this.#init();
+            this.#endpoint = new URL(endpoint);
+            logger$3.debug(`#loadIframe: endpoint =`, getUrlData(this.#endpoint));
+            this.#config(undefined, undefined);
+            if (this.#isVisible) {
+                iframe.src = endpoint;
+            }
+            else {
+                // This is to help us debug issues with hidden iframes. The target page should call postMessage like this:
+                // (window.opener ?? window.parent).postMessage();
+                if (localStorage.getItem("LightningOutIFrame:load:window.open")) {
+                    window.open(endpoint, `LO2 Hidden ${this.#parentElement._uuid}`, "left=200,top=200,width=800,height=800");
+                }
+                else {
+                    iframe.src = endpoint;
+                }
+            }
+        }
+        #loaded = () => {
+            // Browsers will call the onload event even when there is an error, so if the iframe
+            // is not ready when the timeout expires, there was an error but we don't know
+            // exactly what.
+            const timeout = 60 * 1000; // It should take less than this to receive the "lo.loaded" message
+            if (this.#timeoutID) {
+                clearTimeout(this.#timeoutID);
+            }
+            this.#timeoutID = setTimeout(() => {
+                if (!this.iframeReady) {
+                    const message = "Error: Unknown error, unable to load the iframe.";
+                    this.#parentError.dispatch(events.lo.iframe.error, message);
+                    this.#showErrorMessage(message);
+                }
+            }, timeout);
+        };
+        destroy() {
+            if (this.#shadowRoot) {
+                this.#shadowRoot.innerHTML = "";
+            }
+            if (this.#element) {
+                this.#element.remove();
+            }
+            this.#shadowRoot = undefined;
+            this.#element = undefined;
+            this.#config(undefined, undefined);
+        }
+        #showErrorMessage(message) {
+            if (this.#isVisible && this.#endpoint) {
+                const url = new URL("/lightning/lightning.out.message.html", this.#endpoint.origin);
+                url.search = new URLSearchParams({
+                    loAppOrigin: window.location.origin,
+                    parentElementId: this.#parentElement._uuid,
+                    message: message,
+                }).toString();
+                this.load(url.href);
+            }
+        }
+        postMessage(message) {
+            if (this.#window && this.#origin) {
+                logger$3.debug("postMessage:", `parentElement: ${this.#parentElement._uuid}`, JSON.stringify(message));
+                try {
+                    this.#window.postMessage(message, this.#origin);
+                }
+                catch (err) {
+                    const message = `postMessage error: ${err}`;
+                    this.#parentError.dispatch(events.lo.iframe.error, message);
+                    throw this.#parentError.create(message);
+                }
+            }
+            else {
+                throw this.#parentError.create("Error attempting to postMessage on an iframe that is not ready.");
+            }
+        }
+    }
+
+    /**
+     * @file property-observer.ts
+     * @author Caridy Patiño (2025)
+     * @license MIT
+     * @description Provides the PropertyObserver class, a utility to observe property and attribute
+     * changes on any DOM element, with automatic getter/setter interception and batched notifications.
+     */
+    const logger$2 = new Logger("PropertyObserver");
+    /**
+     * The PropertyObserver class allows developers to monitor property and attribute changes
+     * on any DOM element. It focuses on non-standard properties and attributes, automatically
+     * installing getter/setter interceptors for property changes and using MutationObserver
+     * for attribute changes.
+     *
+     * Key features:
+     * 1. Observes both element properties (el.foo = 1) and HTML attributes
+     * 2. Focuses on non-standard attributes/properties only
+     * 3. Converts between attribute names (kebab-case) and property names (camelCase)
+     * 4. Installs getter/setter interceptors for real-time property change detection
+     * 5. Uses MutationObserver for attribute change detection
+     * 6. Batches multiple changes using microtasks (except initial synchronous call)
+     *
+     * @example
+     * ```typescript
+     * const myElement = document.getElementById('my-element');
+     *
+     * function handleChanges(changes: Record<string, any>) {
+     *   logger.log('Properties/attributes changed:', changes);
+     *   // Example: changes might be { myProp: 'newValue', anotherProp: 42 }
+     * }
+     *
+     * const observer = new PropertyObserver(myElement!, handleChanges);
+     *
+     * // Later...
+     * myElement!.myProp = 'test'; // Will trigger callback
+     * myElement!.setAttribute('my-prop', 'test2'); // Will also trigger callback
+     *
+     * // To stop observing:
+     * observer.disconnect();
+     * ```
+     */
+    class PropertyObserver {
+        /**
+         * The HTML element whose properties and attributes are being observed.
+         */
+        _el;
+        /**
+         * The callback function to invoke when properties/attributes change.
+         */
+        _cb;
+        /**
+         * A cache of the last known values of observed properties.
+         * Keys are property names (camelCase), values are their current values.
+         */
+        _cache;
+        /**
+         * The callback to determine if a property should be observed.
+         */
+        _shouldObserve;
+        /**
+         * Set of property names that we've installed getter/setter interceptors for.
+         */
+        _interceptedProps;
+        /**
+         * Map of original property descriptors that we've replaced.
+         */
+        _originalDescriptors;
+        /**
+         * The MutationObserver instance watching for attribute changes.
+         */
+        _observer;
+        /**
+         * Flag to track if we have a pending microtask for batched changes.
+         */
+        _changesPending;
+        /**
+         * Accumulated changes waiting to be reported in the next microtask.
+         */
+        _pendingChanges;
+        /**
+         * Map of attribute names that don't follow standard kebab-case to camelCase conversion.
+         * Maps attribute name -> property name for special cases.
+         */
+        _attributeExceptions = new Map([
+            ["for", "htmlFor"],
+            ["class", "className"],
+            ["formnovalidate", "formNoValidate"],
+            ["readonly", "readOnly"],
+            ["maxlength", "maxLength"],
+            ["minlength", "minLength"],
+            ["contenteditable", "contentEditable"],
+            ["spellcheck", "spellcheck"], // This one actually matches, but explicitly included for clarity
+            ["novalidate", "noValidate"],
+            ["autofocus", "autofocus"], // This one actually matches too
+            ["autocomplete", "autocomplete"], // And this one
+            ["crossorigin", "crossOrigin"],
+        ]);
+        /**
+         * Creates an instance of PropertyObserver.
+         *
+         * @param target The DOM element whose properties and attributes you want to observe.
+         * @param callback
+         *   The function to be invoked when one or more properties/attributes change.
+         *   This function receives a single argument: an object where keys are property names
+         *   (in camelCase) and values are their new values.
+         *   This callback is called synchronously once upon initialization with all initial values,
+         *   then asynchronously (batched via microtask) for subsequent changes.
+         * @throws {TypeError} If `target` is not a DOM Element or `callback` is not a function.
+         */
+        constructor(target, callback, shouldObserve) {
+            if (!(target instanceof Element)) {
+                throw new TypeError("Target must be a DOM Element");
+            }
+            if (typeof callback !== "function") {
+                throw new TypeError("Callback must be a function");
+            }
+            if (shouldObserve && typeof shouldObserve !== "function") {
+                throw new TypeError("shouldObserve callback must be a function");
+            }
+            const shouldObserveDefault = (propName, isStandard) => {
+                // By default, observe only non-standard (i.e. custom) properties and attributes.
+                return isStandard === false;
+            };
+            this._el = target;
+            this._cb = callback;
+            this._cache = new Map();
+            this._shouldObserve = shouldObserve || shouldObserveDefault;
+            this._interceptedProps = new Set();
+            this._originalDescriptors = new Map();
+            this._changesPending = false;
+            this._pendingChanges = {};
+            // Perform initial scan and setup
+            this._initialScan();
+            this._setupMutationObserver();
+        }
+        /**
+         * Disconnects the observer and restores original property descriptors.
+         * This stops observing changes and cleans up any modifications made to the element.
+         */
+        disconnect() {
+            // Disconnect mutation observer
+            if (this._observer) {
+                this._observer.disconnect();
+            }
+            // Restore original property descriptors
+            for (const [propName, descriptor] of this._originalDescriptors) {
+                Object.defineProperty(this._el, propName, descriptor);
+            }
+            // Clear all internal state
+            this._cache.clear();
+            this._interceptedProps.clear();
+            this._originalDescriptors.clear();
+            this._pendingChanges = {};
+            this._changesPending = false;
+        }
+        /**
+         * Performs the initial scan of the element to detect non-standard attributes
+         * and properties, then calls the callback synchronously with initial values.
+         */
+        _initialScan() {
+            const initialValues = {};
+            // Scan attributes
+            for (const attr of Array.from(this._el.attributes)) {
+                const attrName = attr.name;
+                // Check if the attribute itself is standard
+                const isStandard = this._isStandardAttribute(attrName);
+                // Skip the attribute if the user says it should not be observed
+                if (!this._shouldObserve(attrName, isStandard)) {
+                    continue;
+                }
+                const propName = this._attributeNameToPropName(attrName);
+                const value = attr.value;
+                initialValues[propName] = value;
+                this._cache.set(propName, value);
+                // Install property interceptor
+                this._installPropertyInterceptor(propName);
+            }
+            // Also scan for existing custom properties on the element
+            for (const propName of Object.getOwnPropertyNames(this._el)) {
+                // Check if the property itself is standard
+                const isStandard = this._isStandardProperty(propName);
+                // Skip the property if it is already processed as an attribute (check this first), or
+                // if it the user says it should not be observed.
+                if (this._cache.has(propName) || !this._shouldObserve(propName, isStandard)) {
+                    continue;
+                }
+                // If it's an own property, it's likely custom and worth observing
+                const value = this._el[propName];
+                initialValues[propName] = value;
+                this._cache.set(propName, value);
+                // Install property interceptor
+                this._installPropertyInterceptor(propName);
+            }
+            // Call callback synchronously with initial values
+            if (Object.keys(initialValues).length > 0) {
+                try {
+                    this._cb(initialValues);
+                }
+                catch (e) {
+                    logger$2.error("Error in initial PropertyObserver callback:", e);
+                }
+            }
+        }
+        /**
+         * Sets up the MutationObserver to watch for attribute changes.
+         */
+        _setupMutationObserver() {
+            this._observer = new MutationObserver((mutations) => {
+                const changes = {};
+                for (const mutation of mutations) {
+                    if (mutation.type === "attributes" && mutation.attributeName) {
+                        const attrName = mutation.attributeName;
+                        // Check if the attribute itself is standard
+                        const isStandard = this._isStandardAttribute(attrName);
+                        // Skip the attribute if the user says it should not be observed
+                        if (!this._shouldObserve(attrName, isStandard)) {
+                            continue;
+                        }
+                        const propName = this._attributeNameToPropName(attrName);
+                        const newValue = this._el.getAttribute(attrName);
+                        const cachedValue = this._cache.get(propName);
+                        if (newValue !== cachedValue) {
+                            changes[propName] = newValue;
+                            this._cache.set(propName, newValue);
+                            // Install interceptor for new properties
+                            if (!this._interceptedProps.has(propName)) {
+                                this._installPropertyInterceptor(propName);
+                            }
+                        }
+                    }
+                }
+                if (Object.keys(changes).length > 0) {
+                    this._batchChanges(changes);
+                }
+            });
+            this._observer.observe(this._el, {
+                attributes: true,
+                attributeOldValue: false, // We track old values ourselves
+            });
+        }
+        /**
+         * Installs a getter/setter interceptor for a property to detect changes.
+         * @param propName The property name to intercept
+         */
+        _installPropertyInterceptor(propName) {
+            if (this._interceptedProps.has(propName)) {
+                return; // Already intercepted
+            }
+            // Get current descriptor
+            const currentDescriptor = Object.getOwnPropertyDescriptor(this._el, propName) || {
+                value: this._el[propName],
+                writable: true,
+                enumerable: true,
+                configurable: true,
+            };
+            // Store original descriptor
+            this._originalDescriptors.set(propName, currentDescriptor);
+            // Create new descriptor with getter/setter
+            const newDescriptor = {
+                enumerable: currentDescriptor.enumerable,
+                configurable: currentDescriptor.configurable,
+                get: currentDescriptor.get || (() => currentDescriptor.value),
+                set: (newValue) => {
+                    const oldValue = this._cache.get(propName);
+                    if (newValue !== oldValue) {
+                        // Update the actual property
+                        if (currentDescriptor.set) {
+                            currentDescriptor.set.call(this._el, newValue);
+                        }
+                        else {
+                            currentDescriptor.value = newValue;
+                        }
+                        // Update cache and batch the change
+                        this._cache.set(propName, newValue);
+                        this._batchChanges({ [propName]: newValue });
+                    }
+                },
+            };
+            // Install the new descriptor
+            Object.defineProperty(this._el, propName, newDescriptor);
+            this._interceptedProps.add(propName);
+        }
+        /**
+         * Batches changes to be reported in the next microtask.
+         * @param changes Changes to batch
+         */
+        _batchChanges(changes) {
+            // Merge with pending changes
+            Object.assign(this._pendingChanges, changes);
+            if (!this._changesPending) {
+                this._changesPending = true;
+                queueMicrotask(() => {
+                    this._changesPending = false;
+                    const changesToReport = { ...this._pendingChanges };
+                    this._pendingChanges = {};
+                    try {
+                        this._cb(changesToReport);
+                    }
+                    catch (e) {
+                        logger$2.error("Error in PropertyObserver callback:", e);
+                    }
+                });
+            }
+        }
+        /**
+         * Converts an attribute name (kebab-case) to a property name (camelCase).
+         * @param attrName The attribute name
+         * @returns The property name
+         */
+        _attributeNameToPropName(attrName) {
+            // Check for special cases that don't follow standard conversion
+            if (this._attributeExceptions.has(attrName)) {
+                return this._attributeExceptions.get(attrName);
+            }
+            // Standard kebab-case to camelCase conversion
+            return attrName.replace(/-([a-z])/g, (match, letter) => letter.toUpperCase());
+        }
+        /**
+         * Checks if an attribute name is a standard HTML attribute that should be ignored.
+         * @param attrName The attribute name (already lowercase per HTML spec)
+         * @returns True if it's a standard attribute
+         */
+        _isStandardAttribute(attrName) {
+            // Skip known prefixes that are always standard
+            if (attrName.startsWith("data-") || attrName.startsWith("aria-") || attrName.startsWith("on")) {
+                return true;
+            }
+            // Convert attribute name to property name and check if it exists in prototypes
+            const propName = this._attributeNameToPropName(attrName);
+            return this._isStandardProperty(propName);
+        }
+        /**
+         * Checks if a property name corresponds to a standard property that should be ignored.
+         * @param propName The property name
+         * @returns True if it's a standard property
+         */
+        _isStandardProperty(propName) {
+            // Check if the property exists in the standard prototype chain
+            // HTMLElement.prototype inherits from Element → Node → EventTarget
+            return propName in HTMLElement.prototype;
+        }
+    }
+
+    /**
+     * A registry for managing the relationship between parent `App` instances
+     * and child `Comp` instances.
+     */
+    class Registry {
+        #loError = new LightningOutError("LightningOutRegistry");
+        appToComps = new WeakMap();
+        compToApp = new WeakMap();
+        compNameToApp = new Map();
+        /**
+         * Registers a new App instance in the registry.
+         * @param app The App instance to register.
+         * registered app.
+         */
+        registerApplication(app) {
+            if (!this.appToComps.has(app)) {
+                this.appToComps.set(app, new Set());
+            }
+        }
+        /**
+         * Registers a component name which is owned by a specific App
+         * @param name The component name
+         * @param app The app that owns the name
+         * @throws {LightningOutError} if the name is already registered
+         */
+        registerComponentName(name, app) {
+            if (this.compNameToApp.has(name)) {
+                throw this.#loError.create(`"${name}" is already registered to another App.`);
+            }
+            this.compNameToApp.set(name, app);
+        }
+        /**
+         * Registers a Comp instance and associates it with a parent App.
+         * @param comp The Comp instance to register.
+         * @param app The parent App instance. (Optional)
+         * @returns The parent App
+         * @throws {LightningOutError} If the Comp is already registered or if no parent App is found.
+         */
+        registerComponent(comp, app) {
+            if (this.compToApp.has(comp)) {
+                throw this.#loError.create("This Comp is already registered to another App.");
+            }
+            let parentApp = app;
+            // If no app was provided, find it by component name
+            if (!parentApp) {
+                const compName = comp.localName; // inherited from Element
+                parentApp = this.compNameToApp.get(compName);
+                if (!parentApp) {
+                    throw this.#loError.create(`Could not find a parent App for component "${comp.localName}"`);
+                }
+            }
+            // Associate the component with its parent app
+            this.appToComps.get(parentApp).add(comp);
+            this.compToApp.set(comp, parentApp);
+            return parentApp;
+        }
+        /**
+         * Unregister a Comp instance from the registry.
+         * @param comp The Comp instance to unregister.
+         * @returns `true` if the component was found and unregistered, otherwise `false`.
+         */
+        unregisterComponent(comp) {
+            const app = this.compToApp.get(comp);
+            if (!app) {
+                return false;
+            }
+            const comps = this.appToComps.get(app);
+            comps?.delete(comp);
+            this.compToApp.delete(comp);
+            return true;
+        }
+        /**
+         * Retrieves the set of Comps associated with a given App.
+         * @param app The App instance for which to retrieve components.
+         * @returns A Set of Comp instances associated with the given App.
+         * @throws {LightningOutError} If the set of components for the given app cannot be found.
+         */
+        getComps(app) {
+            const comps = this.appToComps.get(app);
+            if (!comps) {
+                throw this.#loError.create("Unable to find set of LightningOutComponents");
+            }
+            return comps;
+        }
+    }
+    /**
+     * Singleton instance of the Registry class.
+     */
+    const registry = new Registry();
+
+    /**
+     * LightningOutComponent class for Lightning Out
+     */
+    const logger$1 = new Logger("LightningOutComponent");
+    // These attributes are mirrored into the iframe
+    const MIRROR = new Set([
+        "autocapitalize",
+        "autocorrect",
+        "dir",
+        "enterkeyhint",
+        "inputmode",
+        "lang",
+        "spellcheck",
+        "style", // this is mirrored but only the css variables
+        "title",
+        "translate",
+    ]);
+    // These aria attributes are mirrored into the iframe (specially for extensions of lightning-input)
+    const ARIA_MIRROR = new Set([
+        "aria-disabled",
+        "aria-hidden",
+        "aria-label",
+        "aria-live",
+        "aria-modal",
+        "aria-pressed",
+        "aria-valuemax",
+        "aria-valuemin",
+        "aria-valuenow",
+    ]);
+    // These attributes are not mirrored into the iframe
+    const BLOCK = new Set([
+        "accesskey",
+        "autofocus",
+        "draggable",
+        "exportparts",
+        "hidden",
+        "inert",
+        "nonce", // block for security reasons!
+        "part",
+        "slot",
+        "tabindex",
+    ]);
+    // These aria attributes are not mirrored into the iframe (they are ID refs)
+    const ARIA_BLOCK = new Set([
+        "aria-activedescendant",
+        "aria-controls",
+        "aria-describedby",
+        "aria-details",
+        "aria-errormessage",
+        "aria-flowto",
+        "aria-labelledby",
+        "aria-owns",
+    ]);
+    class LightningOutComponent extends HTMLElement {
+        _uuid = getUUID();
+        _ready = false;
+        _standardName = elementNameToStandardName(this.localName); // May change during registration
+        #parentApp; // The parent LightningOutApplication
+        #loError = new LightningOutError(this);
+        #loIFrame = new LightningOutIFrame({
+            parentElement: this,
+            isVisible: true,
+        });
+        #propObserver;
+        #initialRender = true;
+        #eventQueue = [];
+        #listenerKeyMap = new WeakMap();
+        // Seed for generating unique listener keys.
+        #listenerKeySeed = 0;
+        constructor() {
+            super();
+            logger$1.trace("constructor: called", `_uuid: ${this._uuid}`);
+        }
+        _getComponentURL() {
+            const parentApp = this.#parentApp;
+            if (!parentApp) {
+                throw this.#loError.create("Undefined parent App!");
+            }
+            const compURL = parentApp._getComponentURL(this._standardName, this._uuid);
+            return compURL;
+        }
+        _init() {
+            if (!this._ready) {
+                // We don't care about events.lo.iframe.ready, we care about messages.lo.ready
+                this.#loIFrame.load(this._getComponentURL().href);
+            }
+        }
+        #messageListener = (event) => {
+            if (event.data.id !== this._uuid) {
+                // Ignore messages that are not meant to be received by this instance.
+                return;
+            }
+            logger$1.debug("#messageListener:", `this._uuid: ${this._uuid}`, `this._standardName: ${this._standardName}`, `event.data: ${JSON.stringify(event.data)}`);
+            switch (event.data.type) {
+                case messages.lo.ready: {
+                    while (this.#eventQueue.length) {
+                        const item = this.#eventQueue.shift();
+                        if (!item)
+                            continue;
+                        if (item.type === "add") {
+                            this.addEventListener(...item.args);
+                        }
+                        else if (item.type === "remove") {
+                            this.removeEventListener(...item.args);
+                        }
+                        else if (item.type === "dispatch") {
+                            this.dispatchEvent(item.event);
+                        }
+                    }
+                    this._ready = true;
+                    super.dispatchEvent(new CustomEvent(events.lo.component.ready));
+                    break;
+                }
+                case messages.lo.getComponentData: {
+                    this.#propObserver = new PropertyObserver(this, this.#propObserverCallback, this.#shouldObserveCallback);
+                    break;
+                }
+                case messages.lo.dispatchEvent: {
+                    const customEvent = new CustomEvent(event.data.name, {
+                        detail: event.data.detail,
+                    });
+                    super.dispatchEvent(customEvent);
+                    break;
+                }
+                case messages.lo.error: {
+                    this.#loError.dispatch(events.lo.component.error, event.data.error);
+                    break;
+                }
+                default: {
+                    logger$1.info(`#messageListener:`, `Unknown message received:`, {
+                        "event.data": event.data,
+                    });
+                }
+            }
+        };
+        _propertyChanged_style = (_style) => {
+            // Iterate over the CSSStyleDeclaration object to filter the CSS variables. (Notice we don't
+            // use the style argument, we take it from this.style).
+            const cssDeclaration = this.style;
+            const cssVars = [];
+            for (let i = 0; i < cssDeclaration.length; i += 1) {
+                const prop = cssDeclaration.item(i);
+                if (prop.startsWith("--")) {
+                    cssVars.push(`${prop}:${cssDeclaration.getPropertyValue(prop)}`);
+                }
+            }
+            return cssVars.join(";");
+        };
+        #propObserverCallback = (changes) => {
+            const propsToSend = processPropertyChanges(this, changes);
+            logger$1.debug("#propObserverCallback:", { changes, propsToSend });
+            if (this.#initialRender) {
+                this.#initialRender = false;
+                this.#loIFrame.postMessage({
+                    type: messages.lo.setComponentData,
+                    componentData: {
+                        id: this._uuid,
+                        name: this._standardName,
+                        props: propsToSend,
+                    },
+                });
+            }
+            else {
+                this.#loIFrame.postMessage({
+                    type: messages.lo.setComponentProps,
+                    componentProps: propsToSend,
+                });
+            }
+        };
+        #shouldObserveCallback = (attrOrPropName, isStandard) => {
+            const attrName = camelToKebab(attrOrPropName); // do this becaouse our config Sets are in kebab-case
+            logger$1.debug("#shouldObserveCallback:", { attrOrPropName, attrName, isStandard });
+            if (isStandard) {
+                if (MIRROR.has(attrName) || ARIA_MIRROR.has(attrName)) {
+                    return true;
+                }
+                if (BLOCK.has(attrName) || ARIA_BLOCK.has(attrName) || attrName.startsWith("on")) {
+                    logger$1.warn(`"${attrName}" will not be mirrored.`);
+                    return false;
+                }
+                if (attrName.startsWith("data-mirror-")) {
+                    return true;
+                }
+                // Everything else
+                logger$1.warn(`"${attrName}" will not be mirrored.`);
+                return false;
+            }
+            else {
+                return !attrName.startsWith("_");
+            }
+        };
+        addEventListener(eventName, listener, options) {
+            let key = this.#listenerKeyMap.get(listener);
+            if (!key) {
+                key = `${eventName}_${this.#listenerKeySeed++}`;
+                this.#listenerKeyMap.set(listener, key);
+            }
+            if (this.#loIFrame.iframeReady) {
+                // @ts-ignore: Spread arguments works at runtime even though TypeScript doesn't like it
+                super.addEventListener(...arguments);
+                this.#loIFrame.postMessage({
+                    name: eventName,
+                    options: options,
+                    listenerKey: key,
+                    type: messages.lo.addEventListener,
+                });
+            }
+            else {
+                this.#eventQueue.push({ type: "add", args: [eventName, listener, options] });
+                logger$1.debug(`addEventListener:`, `#eventQueue pushed add args:`, [eventName, listener, options]);
+            }
+        }
+        dispatchEvent(event) {
+            if (event.type.startsWith("lo.")) {
+                logger$1.debug(`dispatchEvent: dispatching event "${event.type}" to this Element only`);
+                return super.dispatchEvent(event);
+            }
+            else {
+                if (this.#loIFrame.iframeReady) {
+                    logger$1.debug(`dispatchEvent: dispatching event "${event.type}" to this Element and embedded Element inside the iframe`);
+                    const result = super.dispatchEvent(event);
+                    this.#loIFrame.postMessage({
+                        name: event.type,
+                        detail: event.detail || {},
+                        type: messages.lo.dispatchEvent,
+                    });
+                    return result;
+                }
+                else {
+                    logger$1.debug(`dispatchEvent: iframe not reade, queueing event "${event.type}"`);
+                    this.#eventQueue.push({ type: "dispatch", event });
+                    return true; // Assuming success since we're queueing it
+                }
+            }
+        }
+        removeEventListener(eventName, listener, options) {
+            const key = this.#listenerKeyMap.get(listener);
+            if (this.#loIFrame.iframeReady) {
+                // @ts-ignore: Spread arguments works at runtime even though TypeScript doesn't like it
+                super.removeEventListener(...arguments);
+                this.#loIFrame.postMessage({
+                    name: eventName,
+                    options: options,
+                    listenerKey: key,
+                    type: messages.lo.removeEventListener,
+                });
+            }
+            else {
+                this.#eventQueue.push({ type: "remove", args: [eventName, listener, options] });
+                logger$1.debug(`removeEventListener:`, `#eventQueue pushed remove args:`, [eventName, listener, options]);
+            }
+            if (key) {
+                this.#listenerKeyMap.delete(listener);
+            }
+        }
+        adoptedCallback() {
+            this.remove(); // will call disconnectedCallback
+            throw this.#loError.create("This component cannot be rerendered for security reasons.");
+        }
+        connectedCallback() {
+            logger$1.trace("connectedCallback: called", `_uuid: ${this._uuid}`);
+            window.addEventListener("message", this.#messageListener);
+            if (this.hasChildNodes()) {
+                throw this.#loError.create("Should not have child nodes");
+            }
+            // Apply default styles
+            this.style.display ||= "block";
+            this.style.width ||= "100%";
+            this.style.height ||= "100%";
+            this.#parentApp = registry.registerComponent(this);
+            this._standardName = this.#parentApp._getComponentStandardName(this);
+            if (this.#parentApp._ready) {
+                this._init();
+            }
+        }
+        disconnectedCallback() {
+            logger$1.trace("disconnectedCallback: called", `_uuid: ${this._uuid}`);
+            // Since disconnectedCallback is called after the DOM has been removed, destroying the iframe here may be a moot
+            // point, but doing it for completeness.
+            this.#loIFrame.destroy();
+            window.removeEventListener("message", this.#messageListener);
+            registry.unregisterComponent(this);
+            // Stop PropertyObserver
+            this.#propObserver?.disconnect();
+        }
+        connectedMoveCallback() {
+            // Define this callback but do nothing
+        }
+    }
+
+    /**
+     * Router for handling Lightning Out component URLs
+     */
+    class LightningOutRouter {
+        config;
+        errorHandler;
+        constructor(config, errorHandler) {
+            this.config = config;
+            this.errorHandler = errorHandler;
+            if (!this.config.origin) {
+                throw this.errorHandler(`Missing "frontdoor-url" or "org-url" attribute`);
+            }
+        }
+        getComponentURL(componentName, parentElementId) {
+            let appURL;
+            if (this.config.sitePrefix === undefined) {
+                // Route to LWR
+                let lwrApp = componentName.includes("/")
+                    ? this.config.lwrAppComp
+                    : componentName.includes(":")
+                        ? this.config.lwrAppAura
+                        : undefined;
+                if (lwrApp === undefined) {
+                    throw this.errorHandler(`Invalid componentName: ${componentName}`);
+                }
+                lwrApp = lwrApp.replace("/", "%2F"); // ¯\_(ツ)_/¯
+                const lang = this.config.lang ? `l/${this.config.lang}/` : "";
+                appURL = new URL(`lwr/application/amd/0/${lang}ai/${lwrApp}`, this.config.origin);
+            }
+            else {
+                // Route to CLWR or TEST environment. Note: sitePrefix may be blank and that's okay.
+                const pathname = `${this.config.sitePrefix}/lightning-out` ;
+                appURL = new URL(pathname, this.config.origin);
+            }
+            appURL.searchParams.set("componentName", componentName);
+            return this.#addCommonParams(appURL, parentElementId);
+        }
+        getAuthURL(parentElementId) {
+            let appURL;
+            if (this.config.sitePrefix === undefined) {
+                // Route to LWR
+                const lwrApp = this.config.lwrAppAuth.replace("/", "%2F"); // ¯\_(ツ)_/¯
+                appURL = new URL(`lwr/application/amd/0/ai/${lwrApp}`, this.config.origin);
+            }
+            else {
+                // Route to CLWR or TEST environment. Note: sitePrefix may be blank and that's okay.
+                appURL = new URL(this.config.lwrPageAuth, this.config.origin);
+            }
+            return this.#addCommonParams(appURL, parentElementId);
+        }
+        getPageURL(pagePathname, parentElementId) {
+            const pageURL = new URL(pagePathname, this.config.origin);
+            return this.#addCommonParams(pageURL, parentElementId);
+        }
+        #addCommonParams(url, parentElementId) {
+            url.searchParams.set("parentElementId", parentElementId);
+            url.searchParams.set("loAppOrigin", this.config.loAppOrigin);
+            // This helps in general but also for cache busting
+            url.searchParams.set("loVersion", "2.2.0-rc.2");
+            if (this.config.appId) {
+                url.searchParams.set("appId", this.config.appId);
+            }
+            if (this.config.testMode) {
+                url.searchParams.set("testMode", "true");
+            }
+            if (this.config.designSystem) {
+                url.searchParams.set("designSystem", this.config.designSystem);
+            }
+            if (this.config.globalStyle) {
+                url.searchParams.set("globalStyle", this.config.globalStyle);
+            }
+            return url;
+        }
+    }
+
+    /**
+     * LightningOutApplication class for Lightning Out
+     */
+    const logger = new Logger("LightningOutApplication");
+    /** Valid values for the optional design-system attribute. */
+    const DESIGN_SYSTEM_VALUES = new Set(["slds1", "slds2", "none"]);
+    // These props trigger LO app initialization
+    const INIT_TRIGGERING_PROPS = new Set(["frontdoorUrl", "orgUrl"]);
+    class LightningOutApplication extends HTMLElement {
+        _uuid = getUUID();
+        _ready = false;
+        #loError = new LightningOutError(this);
+        #loIFrame = new LightningOutIFrame({
+            parentElement: this,
+            isVisible: false,
+        });
+        #loRouter;
+        #propObserver;
+        #lwrAppOrigin = "";
+        #lwrAppAuth = "lightningout/auth";
+        #lwrAppComp = "lightningout/container";
+        #lwrAppAura = "lightningout/auraContainer";
+        #lwrPageAuth = "lightning/lightning.out.auth.html";
+        #lwrPageLogout = "lightning/lightning.out.logout.html";
+        #lwrPageAuthError = "lightning/lightning.out.auth.error.html";
+        #logoutUrl = "/secur/logout.jsp";
+        lwrApplication;
+        orgUrl;
+        #orgUrl;
+        frontdoorUrl;
+        #frontdoorUrl;
+        appId;
+        #appId;
+        components; // CSV of component names
+        #compNames = new Map(); // a Map of of component name->alias
+        sitePrefix;
+        #sitePrefix;
+        designSystem;
+        #designSystem;
+        globalStyle;
+        #globalStyle;
+        #lang = document.documentElement.lang ?? "";
+        constructor() {
+            super();
+            logger.trace("constructor: called", `_uuid: ${this._uuid}`);
+            // We have to register this instance as early as possible
+            registry.registerApplication(this);
+        }
+        #access(orgUrl) {
+            try {
+                this.#orgUrl = new URL(orgUrl);
+            }
+            catch {
+                throw this.#loError.create(`Invalid org-url: ${orgUrl}`);
+            }
+            // Skip auth by simulating a successful lo.iframe.load event to continue normally
+            this.dispatchEvent(new CustomEvent(events.lo.iframe.load, {
+                detail: this.#orgUrl.origin,
+            }));
+        }
+        #login(frontdoorUrl) {
+            try {
+                this.#frontdoorUrl = new URL(frontdoorUrl);
+                this.#lwrAppOrigin = this.#frontdoorUrl.origin;
+                // Append/override the `startURL` param in frontdoor.jsp
+                const startURL = this.#getAuthURL();
+                // (It is important to use the right paramName!)
+                const paramName = this.#frontdoorUrl.searchParams.has("otp") ? "startURL" : "retURL";
+                this.#frontdoorUrl.searchParams.set(paramName, startURL.pathname + startURL.search);
+                // Append the `error-redirect-uri` param to frontdoor.jsp
+                const authErrorPage = this.#getPageURL(this.#lwrPageAuthError);
+                this.#frontdoorUrl.searchParams.set("error-redirect-uri", authErrorPage.pathname + authErrorPage.search);
+            }
+            catch {
+                throw this.#loError.create(`Invalid frontdoor-url: ${frontdoorUrl}`);
+            }
+            this.#loIFrame.load(this.#frontdoorUrl.href);
+        }
+        #logout() {
+            const logoutUrl = new URL(this.#logoutUrl, this.#lwrAppOrigin);
+            const logoutPage = this.#getPageURL(this.#lwrPageLogout);
+            // Append the `redirect-uri` param to logout.jsp (using the same auth page just to get the lo.loaded message)
+            logoutUrl.searchParams.set("redirect-uri", logoutPage.pathname + logoutPage.search);
+            // (This next piece of code should be removed after making sure `redirect-uri` works well)
+            logoutUrl.searchParams.set("retUrl", logoutPage.pathname + logoutPage.search);
+            this.#loIFrame.load(logoutUrl.href);
+            // (This next piece of code should be removed after making sure `redirect-uri` works well)
+            setTimeout(() => {
+                this.dispatchEvent(new CustomEvent(events.lo.application.logout));
+            }, 3000);
+        }
+        getRouter() {
+            if (this.#loRouter === undefined) {
+                const config = {
+                    origin: this.#lwrAppOrigin,
+                    lwrPageAuth: this.#lwrPageAuth,
+                    lwrAppAuth: this.#lwrAppAuth,
+                    lwrAppComp: this.#lwrAppComp,
+                    lwrAppAura: this.#lwrAppAura,
+                    sitePrefix: this.#sitePrefix,
+                    lang: this.#lang,
+                    appId: this.#appId,
+                    testMode: this.__testMode || "debug" === "test",
+                    loAppOrigin: window.location.origin,
+                    designSystem: this.#designSystem,
+                    globalStyle: this.#globalStyle,
+                };
+                this.#loRouter = new LightningOutRouter(config, (msg) => this.#loError.create(msg));
+            }
+            return this.#loRouter;
+        }
+        _getComponentURL(componentName, parentElementId) {
+            return this.getRouter().getComponentURL(componentName, parentElementId);
+        }
+        #getAuthURL() {
+            return this.getRouter().getAuthURL(this._uuid);
+        }
+        #getPageURL(pagePathname) {
+            return this.getRouter().getPageURL(pagePathname, this._uuid);
+        }
+        #iframeLoaded = (event) => {
+            // Set our internal flag
+            this._ready = true;
+            // The origin where the iframe landed might be different than the origin used to load the
+            // frontdoor url, so update its value.
+            this.#lwrAppOrigin = event.detail;
+            // Initiate registered components
+            this.#initComponents();
+            // Notify the user that the application session is ready
+            this.dispatchEvent(new CustomEvent(events.lo.application.ready));
+        };
+        #iframeError = (event) => {
+            // Notify the user that the application session has failed
+            this.#loError.dispatch(events.lo.application.error, event);
+        };
+        #iframeLogout = (event) => {
+            // Notify the user that the application session is terminated
+            this.#loError.dispatch(events.lo.application.logout, event);
+        };
+        #iframeAuthRedirect = (event) => {
+            // Notify the user that an authorization redirect was issued, and pass the redirectUrl and redirectOrigin
+            this.dispatchEvent(new CustomEvent(events.lo.application.auth.redirect, { detail: event.detail }));
+        };
+        #initComponents() {
+            const myComps = registry.getComps(this);
+            myComps.forEach((comp) => {
+                comp._init();
+            });
+        }
+        #propObserverCallback = (changes) => {
+            // If multiple attrs/props are being changed at the same time, process the ones that don't trigger
+            // initialization first, and the ones that trigger initialization last.
+            const changesFirst = {};
+            const changesLast = {};
+            Object.keys(changes).forEach((prop) => {
+                if (INIT_TRIGGERING_PROPS.has(prop)) {
+                    changesLast[prop] = changes[prop];
+                }
+                else {
+                    changesFirst[prop] = changes[prop];
+                }
+            });
+            processPropertyChanges(this, changesFirst);
+            processPropertyChanges(this, changesLast);
+        };
+        #shouldObserveCallback = (propName, isStandard) => {
+            if (isStandard) {
+                if (propName === "lang") {
+                    return true;
+                }
+                return false;
+            }
+            else {
+                return !propName.startsWith("_");
+            }
+        };
+        _propertyChanged_lwrApplication = (lwrApplication) => {
+            if (lwrApplication !== undefined) {
+                const parts = lwrApplication.split("/");
+                if (parts.length !== 2 || !parts[0] || !parts[1]) {
+                    throw this.#loError.create(`"${lwrApplication}" is not a valid lwr-application name, must be of the form 'namespace/name'`);
+                }
+                this.#lwrAppComp = lwrApplication;
+            }
+        };
+        _propertyChanged_lang = (lang) => {
+            this.#lang = lang ?? "";
+        };
+        _propertyChanged_orgUrl = (orgUrl) => {
+            if (orgUrl !== undefined) {
+                if (this.#frontdoorUrl !== undefined) {
+                    throw this.#loError.create(`Can't set "org-url" because "frontdoor-url" is already set`);
+                }
+                if (orgUrl === "") {
+                    this.#logout();
+                }
+                else {
+                    this.#access(orgUrl);
+                }
+            }
+        };
+        _propertyChanged_frontdoorUrl = (frontdoorUrl) => {
+            if (frontdoorUrl !== undefined) {
+                if (this.#orgUrl !== undefined) {
+                    throw this.#loError.create(`Can't set "frontdoor-url" because "org-url" is already set`);
+                }
+                if (frontdoorUrl === "") {
+                    this.#logout();
+                }
+                else {
+                    this.#login(frontdoorUrl);
+                }
+            }
+        };
+        _propertyChanged_sitePrefix = (sitePrefix) => {
+            if (sitePrefix !== undefined) {
+                this.#sitePrefix = sitePrefix;
+            }
+        };
+        _propertyChanged_appId = (appId) => {
+            if (appId !== undefined) {
+                this.#appId = appId;
+            }
+        };
+        _propertyChanged_globalStyle = (globalStyle) => {
+            if (globalStyle !== undefined) {
+                // Validate that all properties are CSS custom properties (start with --)
+                // and normalize by removing unnecessary whitespace
+                const properties = globalStyle
+                    .split(";")
+                    .map((prop) => prop.trim())
+                    .filter((prop) => prop.length > 0);
+                const normalizedProperties = [];
+                for (const property of properties) {
+                    const [key, ...valueParts] = property.split(":");
+                    const trimmedKey = key.trim();
+                    // Validate CSS custom property
+                    if (!trimmedKey.startsWith("--")) {
+                        throw this.#loError.create(`Invalid global-style: "${trimmedKey}" is not a CSS custom property. Only CSS custom properties (starting with --) are allowed.`);
+                    }
+                    // Normalize: remove extra whitespace
+                    const trimmedValue = valueParts.join(":").trim();
+                    if (trimmedValue) {
+                        normalizedProperties.push(`${trimmedKey}:${trimmedValue}`);
+                    }
+                }
+                // Store normalized version (removes unnecessary whitespace and keeps trailing semicolon)
+                this.#globalStyle = normalizedProperties.join(";") + ";";
+            }
+        };
+        /**
+         * components is a comma separated list of names with optional aliases. The names can be standard (i.e. foo/bar) or
+         * kebab (i.e. foo-bar). It is recommended to use standard names because that's what the backend runtime requires,
+         * and converting from kebab name to standard name can be ambiguous. (W-19562914)
+         *
+         * Example: components = "foo/bar, baz-qux, c/myComp as alias-for-my-comp, other-comp as other-comp-alias"
+         */
+        _propertyChanged_components = (components) => {
+            // Ignore undefined initialization value
+            if (components === undefined) {
+                return;
+            }
+            components.split(",").forEach((comp) => {
+                const [name, alias] = comp.split(" as ").map((n) => n.trim());
+                // Register the component name and its optional alias. This callback may be called
+                // multiple times, so if a component name is already registered by this application
+                // instance, just skip it, so only register new names.
+                const isStandard = isStandardName(name);
+                // Disallow Aura-style names (namespace:name) in components; Aura is indicated via the "aura"
+                // attribute on the component element instead.
+                if (isStandard && name.includes(":")) {
+                    throw this.#loError.create(`"${name}" is not supported in components. Use  kebab "namespace-name" in components and the "aura" attribute on the component element instead.`);
+                }
+                const standardName = isStandard ? name : elementNameToStandardName(name);
+                const localName = alias || (isStandard ? standardNameToElementName(standardName) : name);
+                if (localName && !this.#compNames.has(localName)) {
+                    this.#compNames.set(localName, standardName);
+                    try {
+                        registry.registerComponentName(localName, this);
+                        // Use a new anonymous class for each definition, extending our base class
+                        customElements.define(localName, class extends LightningOutComponent {
+                        });
+                    }
+                    catch (err) {
+                        // This name is already registered by another application.
+                        throw this.#loError.create(`"${localName}" is already registered. ${err}`);
+                    }
+                }
+            });
+        };
+        _propertyChanged_designSystem = (designSystem) => {
+            if (designSystem !== undefined && !DESIGN_SYSTEM_VALUES.has(designSystem)) {
+                throw this.#loError.create(`Invalid design-system: ${designSystem}`);
+            }
+            this.#designSystem = designSystem;
+        };
+        _getComponentStandardName(component) {
+            const localName = component.localName;
+            const isAura = component.hasAttribute("aura");
+            const standardName = this.#compNames.get(localName);
+            if (!standardName) {
+                throw this.#loError.create(`"${localName}" is not registered.`);
+            }
+            if (isAura) {
+                // If this is an Aura component (has aura attribute) and the stored name is in LWC format (c/name),
+                // convert it to Aura format (c:name)
+                if (standardName.includes("/")) {
+                    return standardName.replace("/", ":");
+                }
+            }
+            return standardName;
+        }
+        get _compNames() {
+        }
+        connectedCallback() {
+            logger.trace("connectedCallback: called", `_uuid: ${this._uuid}`);
+            if (this.hasChildNodes()) {
+                throw this.#loError.create("Should not have child nodes");
+            }
+            // Apply default styles
+            this.style.display ||= "none";
+            // Add event listeners
+            this.addEventListener(events.lo.iframe.load, this.#iframeLoaded);
+            this.addEventListener(events.lo.iframe.error, this.#iframeError);
+            this.addEventListener(events.lo.iframe.logout, this.#iframeLogout);
+            this.addEventListener(events.lo.iframe.auth.redirect, this.#iframeAuthRedirect);
+            // Start PropertyObserver
+            this.#propObserver = new PropertyObserver(this, this.#propObserverCallback, this.#shouldObserveCallback);
+        }
+        disconnectedCallback() {
+            logger.trace("disconnectedCallback: called", `_uuid: ${this._uuid}`);
+            // Since disconnectedCallback is called after the DOM has been removed, calling logout and destroying the iframe
+            // here may be a moot point, but doing it for completeness.
+            this.#logout();
+            this.#loIFrame.destroy();
+            // Remove event listeners
+            this.removeEventListener(events.lo.iframe.load, this.#iframeLoaded);
+            this.removeEventListener(events.lo.iframe.error, this.#iframeError);
+            this.removeEventListener(events.lo.iframe.logout, this.#iframeLogout);
+            this.removeEventListener(events.lo.iframe.auth.redirect, this.#iframeAuthRedirect);
+            // Stop PropertyObserver
+            this.#propObserver?.disconnect();
+        }
+        connectedMoveCallback() {
+            // Define this callback but do nothing
+        }
+    }
+
+    /**
+     * Core functionality for Lightning Out 2.0
+     */
+    Logger.level = "debug";
+
+    /**
+     * @salesforce/lightning-out
+     *
+     * Main entry point for Lightning Out 2.0
+     */
+    window.customElements.define("lightning-out-application", LightningOutApplication);
+
+    exports.LightningOutApplication = LightningOutApplication;
+
+    return exports;
+
+})({});
+//# sourceMappingURL=index.iife.debug.js.map