@lightning-out/lwc-shell 2.2.0-rc.0

package/dist/index.iife.prod.js

@@ -0,0 +1,3 @@
+/*! @lightning-out/lwc-shell v2.2.0-rc.1 (2026-02-27) */
+var LwcShell=function(e){"use strict";const t=Symbol("Guid"),i=Symbol("DoCloseConfirmation"),s={DoCloseConfirmation:i,Guid:t},n=["allow-scripts","allow-pointer-lock"],a=["allow-downloads","allow-forms","allow-modals"],r=["allow-same-origin","allow-top-navigation","allow-popups"],l="state-loading",o="state-loaded";class d extends HTMLElement{_shadow;_iframe=null;_container=null;_currentState=l;_hasExplicitResize=!1;_readinessTimeout=null;_isFullscreen=!1;_lastThemeData={};_lastPayloadData={};_bridgeReady=!1;_hasSentTheme=!1;_hasSentData=!1;_src=null;_srcdoc=null;_sandbox=null;_title="Embedded widget";_view="compact";_dirtyComponentGuid=function(){return Math.floor(Math.random()*Number.MAX_SAFE_INTEGER).toString(36)}();_beforeUnloadHandler=null;_dirtyStateModal=null;_pendingDirtyActions=new Map;_debugEnabled=!0;static get observedAttributes(){return["src","srcdoc","sandbox","title","view","debug"]}constructor(){super(),this._shadow=this.attachShadow({mode:"closed"})}connectedCallback(){this._renderInitial(),this._setupMessageListener(),this._log("connectedCallback")}disconnectedCallback(){window.removeEventListener("message",this._handleMessage),this._readinessTimeout&&(clearTimeout(this._readinessTimeout),this._readinessTimeout=null),this._log("disconnectedCallback")}attributeChangedCallback(e,t,i){if(t!==i)switch(e){case"src":this.src=i;break;case"srcdoc":this.srcdoc=i;break;case"sandbox":this.sandbox=i;break;case"title":this.title=i;break;case"view":this.view=i;break;case"debug":this.debug=null!==i}}get src(){return this._src}set src(e){const t=e||null;this._src!==t&&(this._src=t,null!==t?this.setAttribute("src",t):this.removeAttribute("src"),this._updateIframeSrc())}get srcdoc(){return this._srcdoc}set srcdoc(e){const t=e||null;this._srcdoc!==t&&(this._srcdoc=t,null!==t?this.setAttribute("srcdoc",t):this.removeAttribute("srcdoc"),this._updateIframeSrc())}get sandbox(){return this._sandbox}set sandbox(e){const t=e||null;this._sandbox!==t&&(this._sandbox=t,null!==t?this.setAttribute("sandbox",t):this.removeAttribute("sandbox"),this._applySandbox())}get title(){return this._title}set title(e){const t=e||"Embedded widget";this._title!==t&&(this._title=t,this.setAttribute("title",t),this._updateTitle())}get view(){return this._view}set view(e){const t="full"===e?"full":"compact";this._view!==t&&(this._view=t,this.setAttribute("view",t),this._updateViewDOM())}get debug(){return this._debugEnabled}set debug(e){const t=!!e;this._debugEnabled!==t&&(this._debugEnabled=t,t?this.setAttribute("debug",""):this.removeAttribute("debug"))}get _SelfManagedDirtyComponent(){return s}get dirtyStateModal(){return this._dirtyStateModal}set dirtyStateModal(e){this._dirtyStateModal=e||null,this._log("dirtyStateModal set",!!e)}updateData(e){if(!e||"object"!=typeof e)return;Object.entries(e).forEach(([e,t])=>{const i=`data-${String(e).replace(/[A-Z]/g,"-$&").toLowerCase()}`;this.setAttribute(i,String(t))});const t=this._collectDataAttributes();this._lastPayloadData=t,this._bridgeReady?(this._postToIframe("data",t),this._hasSentData=!0,this._log("send data",t)):this._log("queue data until bridge ready",t)}refreshTheme(){this._sendInitialTheme()}get _isFullView(){return"full"===this._view}get _frameClass(){return this._isFullView?"frame frameFull":"frame"}_log(...e){this._debugEnabled&&console.log("[InternalHostLwcShell]",JSON.stringify(e,null,2))}_renderInitial(){const e=this._shadow;e.innerHTML=`\n            <style>\n:host {\n    display: block;\n    position: relative;\n    min-height: 100px;\n    border: 1px solid #ddd;\n    border-radius: 4px;\n    overflow: hidden;\n}\n\n.container {\n    width: 100%;\n    height: 100%;\n    position: relative;\n}\n\n.frame {\n    visibility: hidden;\n    display: block;\n    width: 100%;\n    height: 100%;\n    border: none;\n}\n\n.container[data-state='state-loaded'] .frame {\n    visibility: visible;\n}\n\n/* Fullscreen overlay */\n.overlayBackdrop {\n    position: fixed;\n    inset: 0;\n    width: 100vw;\n    height: 100vh;\n    z-index: 9998;\n    background: rgba(0, 0, 0, 0.8);\n    backdrop-filter: blur(4px);\n}\n\n.overlayClose {\n    position: fixed;\n    top: 24px;\n    right: 24px;\n    z-index: 9999;\n    width: 32px;\n    height: 32px;\n    background: rgba(0, 0, 0, 0.7);\n    color: #fff;\n    border-radius: 50%;\n    border: none;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 16px;\n    font-weight: bold;\n    cursor: pointer;\n}\n\n.frameFull {\n    position: fixed;\n    inset: 0;\n    width: 90vw;\n    height: 90vh !important;\n    margin: 5vh 5vw;\n    z-index: 10000;\n    background: #fff;\n    border-radius: 8px;\n    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);\n}\n</style>\n            <div class="container" data-state="${this._currentState}"\n                 tabindex="0" role="region" aria-label="${this._title}">\n                <iframe\n                    class="${this._frameClass}"\n                    title="${this._title}"\n                    aria-label="Interactive widget content"\n                ></iframe>\n            </div>\n        `,this._container=e.querySelector(".container"),this._iframe=e.querySelector("iframe"),this._container.addEventListener("click",()=>this._handleContainerClick()),this._applySandbox(),this._updateIframeSrc(),this._sendInitialTheme(),this._log("renderInitial: iframe ready")}_updateContainerState(){this._container&&this._container.setAttribute("data-state",this._currentState)}_updateTitle(){this._iframe&&this._iframe.setAttribute("title",this._title),this._container&&this._container.setAttribute("aria-label",this._title),this._log("title",this._title)}_updateViewDOM(){if(this._iframe&&(this._iframe.className=this._frameClass),!this._container)return;const e=this._container.querySelector(".overlayBackdrop"),t=this._container.querySelector(".overlayClose");if(e&&e.remove(),t&&t.remove(),this._isFullView){const e=document.createElement("div");e.className="overlayBackdrop",e.setAttribute("aria-hidden","true");const t=document.createElement("button");t.className="overlayClose",t.type="button",t.setAttribute("aria-label","Close fullscreen"),t.textContent="✕",t.addEventListener("click",this._exitFullscreen),this._container.appendChild(e),this._container.appendChild(t)}}_setState(e){this._currentState=e,this._updateContainerState(),e===o&&this._sendInitialData()}_setupMessageListener(){window.addEventListener("message",this._handleMessage)}_handleMessage=e=>{const t=this._iframe?.contentWindow;if(e.source!==t)return;const i=e.data||{},{type:s,data:n}=i;if(this._log("receive",s,n),"bridge-event"===s){const{eventType:e,detail:t}=n||{};if(this._log("bridge-event",e,t),"resize"===e)this._hasExplicitResize=!0,this._handleResize(t);else{if("widget-ready"!==e)throw new RangeError(`Invalid bridge event ${e}`);this._handleWidgetReady()}}else if("custom-event"===s){const{eventType:e,detail:t}=n||{};if(this._log("custom-event",e,t),"fullscreen-request"===e){this.dispatchEvent(new CustomEvent(e,{detail:t,bubbles:!0,cancelable:!0}))&&this._handleFullscreenRequest()}else"mfe:dirty-state-detected"===e?this._handleDirtyStateDetected():"mfe:dirty-state-reset"===e?this._handleDirtyStateReset():"mfe:dirty-state-modal-handle-status"===e&&this._handleDirtyStateModalStatus(t)}else"bridge-ready"===s?this._handleBridgeReady():"bridge-error"===s&&this._handleBridgeError(n)};_dispatchSelfManagedDirtyEvent(e){const t=new CustomEvent("privatelightningselfmanageddirtystatechanged",{bubbles:!0,composed:!0,cancelable:!0,detail:{isUnsaved:e,unsavedComponent:this}});this.dispatchEvent(t)}_toggleBeforeUnload(e){e?this._beforeUnloadHandler||(this._beforeUnloadHandler=e=>(e.preventDefault(),e.returnValue="",""),window.addEventListener("beforeunload",this._beforeUnloadHandler)):this._beforeUnloadHandler&&(window.removeEventListener("beforeunload",this._beforeUnloadHandler),this._beforeUnloadHandler=null)}_handleDirtyStateDetected(){this._toggleBeforeUnload(!0),this._dispatchSelfManagedDirtyEvent(!0)}_handleDirtyStateReset(){this._toggleBeforeUnload(!1),this._dispatchSelfManagedDirtyEvent(!1)}_handleDirtyStateModalStatus(e){const{correlationId:t,isSuccess:i}=e||{},s=this._pendingDirtyActions.get(t);s?(this._pendingDirtyActions.delete(t),s.resolve(i)):this._log("No pending handler for correlationId",t)}_handleResize({height:e}){const t=new CustomEvent("resize",{detail:{height:e},cancelable:!0});this.dispatchEvent(t),t.defaultPrevented||this._isFullscreen||"number"!=typeof e||!Number.isFinite(e)||(this._iframe&&(this._iframe.style.height=e+"px"),this._log("applied resize",e))}_handleWidgetReady(){this._readinessTimeout&&(clearTimeout(this._readinessTimeout),this._readinessTimeout=null),this.dispatchEvent(new CustomEvent("widget-ready",{bubbles:!0})),this._log("widget-ready")}_handleFullscreenRequest(){this._isFullscreen||this._enterFullscreen()}_enterFullscreen(){this._isFullscreen=!0,this._view="full",this._updateViewDOM(),this._iframe&&(this._iframe.style.height="100%"),this.updateData({view:"full"}),this.dispatchEvent(new CustomEvent("fullscreen-entered",{detail:{element:this},bubbles:!0})),this._log("enter fullscreen")}_exitFullscreen=()=>{this._isFullscreen=!1,this._view="compact",this._updateViewDOM(),this._iframe&&(this._iframe.style.height=""),this.updateData({view:"compact"}),this.dispatchEvent(new CustomEvent("fullscreen-exited",{detail:{element:this},bubbles:!0})),this._log("exit fullscreen")};_handleBridgeReady(){this._bridgeReady=!0,this._setState(o),this._log("bridge-ready")}_handleBridgeError(e){this.dispatchEvent(new CustomEvent("widget-bridge-error",{detail:e})),this._log("bridge-error",e)}_handleContainerClick(){}_applySandbox(){const e=this._iframe;if(!e)return;const t=this._computeSandboxTokens();e.setAttribute("sandbox",t),this._log("sandbox",t)}_computeSandboxTokens(){const e=[...n];if(this._sandbox){String(this._sandbox).split(/\s+/).filter(Boolean).forEach(t=>{a.includes(t)&&!e.includes(t)&&e.push(t),r.includes(t)&&this.dispatchEvent(new CustomEvent("security-violation",{detail:{type:"blocked-sandbox-token",token:t,element:this}}))})}return e.join(" ")}_updateIframeSrc(){const e=this._iframe;if(e){if(this._hasExplicitResize=!1,this._currentState=l,this._updateContainerState(),e.removeAttribute("src"),e.removeAttribute("srcdoc"),this._src)e.setAttribute("src",this._src);else if(this._srcdoc)try{e.setAttribute("srcdoc",this._srcdoc)}catch{e.setAttribute("src","about:blank")}e.onload=this._handleIframeLoad,e.onerror=this._handleIframeError,this._log("updateIframeSrc",this._src?"src":this._srcdoc?"srcdoc":"blank")}}_handleIframeLoad=()=>{this.dispatchEvent(new CustomEvent("iframe-loaded",{detail:{element:this},bubbles:!0})),this._log("iframe-loaded"),this._readinessTimeout=setTimeout(()=>{this._currentState!==o&&(this.dispatchEvent(new CustomEvent("widget-readiness-warning",{detail:{element:this,message:"Widget may not be using ChatBridge for readiness signaling"},bubbles:!0})),this._log("widget-readiness-warning"))},3e3)};_handleIframeError=e=>{this.dispatchEvent(new CustomEvent("widget-error",{detail:{error:e,element:this}}))};_postToIframe(e,t){const i=this._iframe,s=i&&i.contentWindow;if(s)try{const i=`salesforce-${e}`;s.postMessage("BRIDGE-JSON:"+JSON.stringify({type:i,data:t}),"*"),this._log("postMessage",i,t)}catch(e){this._log("postMessage error",e instanceof Error?e.message:String(e))}}_collectDataAttributes(){const e={};for(let t=0;t<this.attributes.length;t++){const i=this.attributes[t];if(i.name.startsWith("data-")){e[i.name.replace(/^data-/,"").replace(/-([a-z])/g,(e,t)=>t.toUpperCase())]=i.value}}return e}_sendInitialTheme(){const e=getComputedStyle(this),t={};for(let i=0;i<e.length;i++){const s=e[i];if(s.startsWith("--")){const i=e.getPropertyValue(s).trim();i&&(t[s]=i)}}this._lastThemeData=t,this._bridgeReady?(this._postToIframe("theme",t),this._hasSentTheme=!0,this._log("send theme",t)):this._log("queue theme until bridge ready",t)}_sendInitialData(){this._lastThemeData&&Object.keys(this._lastThemeData).length&&(this._postToIframe("theme",this._lastThemeData),this._hasSentTheme=!0,this._log("send theme (initial)",this._lastThemeData));const e=this._collectDataAttributes();this._lastPayloadData={...e},this._postToIframe("data",this._lastPayloadData),this._hasSentData=!0,this._log("send data (initial)",this._lastPayloadData),this._postToIframe("bridge-ready")}[t]=this._dirtyComponentGuid;[i](){if(!this._dirtyStateModal)return this._log("DoCloseConfirmation: no modal configured, auto-resolving SUCCESS"),Promise.resolve("SUCCESS");if("function"!=typeof this._dirtyStateModal.open)return this._log("DoCloseConfirmation: modal.open is not a function, auto-resolving SUCCESS"),Promise.resolve("SUCCESS");const e={modalFields:{label:`Unsaved Changes in ${this._title}`,description:"You have unsaved changes. If you leave, your changes will be lost.",buttons:[{buttonKey:"cancel",buttonLabel:"Cancel"},{buttonKey:"discard",buttonLabel:"Discard Changes",buttonVariant:"brand"}]},size:"small"};return this._dirtyStateModal.open(e).then(e=>e?"discard"===e?(this._dispatchSelfManagedDirtyEvent(!1),"SUCCESS"):"cancel"===e?"CANCEL":"ERROR":"CANCEL").catch(e=>(this._log("DoCloseConfirmation: error",e),"ERROR"))}}return window.customElements.get("lwc-shell")||window.customElements.define("lwc-shell",d),e.InternalHostLwcShell=d,e.default=d,Object.defineProperty(e,"__esModule",{value:!0}),e}({});
+//# sourceMappingURL=index.iife.prod.js.map

package/dist/lwc/dirtyStateModal/dirtyStateModal.html

@@ -0,0 +1,33 @@
+<!--
+    dirtyStateModal template — shipped with @lightning-out/lwc-shell.
+
+    This template is entirely generic / config-driven:
+    - Header label, body description, and footer buttons are all bound to
+      the `modalFields` @api property — nothing is hard-coded here.
+    - The concrete values (e.g. "Unsaved Changes", "Discard Changes" button)
+      are defined in InternalHostLwcShell.ts inside the
+      `[DoCloseConfirmation]()` method and passed at open-time.
+    - To change what the modal displays, update the config object in
+      InternalHostLwcShell.ts, NOT this template.
+
+    Customers: copy this file (along with .js and .js-meta.xml) into your
+    SFDX project's lwc/dirtyStateModal/ folder and deploy to your org.
+-->
+<template>
+    <lightning-modal-header label={modalFields.label}></lightning-modal-header>
+    <lightning-modal-body>
+        <p>{modalFields.description}</p>
+    </lightning-modal-body>
+    <lightning-modal-footer>
+        <template for:each={modalFields.buttons} for:item="button">
+            <lightning-button
+                key={button.buttonKey}
+                label={button.buttonLabel}
+                variant={button.buttonVariant}
+                data-key={button.buttonKey}
+                onclick={handleButtonClick}
+                class="slds-m-right_x-small"
+            ></lightning-button>
+        </template>
+    </lightning-modal-footer>
+</template>

package/dist/lwc/dirtyStateModal/dirtyStateModal.js

@@ -0,0 +1,82 @@
+/**
+ * dirtyStateModal — Generic, config-driven LWC modal shipped with
+ * @lightning-out/lwc-shell.
+ *
+ * IMPORTANT: This modal is intentionally **generic**. It does NOT hard-code
+ * any specific labels, descriptions, or button definitions. Instead, it
+ * receives all of its display configuration through the `modalFields` @api
+ * property at open-time. This makes it reusable for any confirmation
+ * scenario — the caller decides what the modal says and which buttons it
+ * shows.
+ *
+ * The **concrete configuration** for the current lwc-shell dirty-state
+ * flow lives in `InternalHostLwcShell.ts` inside the
+ * `[DoCloseConfirmation]()` method, where the `dirtStateModalConfig` object
+ * is built and passed to `DirtyStateModal.open(dirtStateModalConfig)`.
+ * That config currently specifies:
+ *   - label: "Unsaved Changes"
+ *   - description: "You have unsaved changes. If you leave, your changes
+ *     will be lost."
+ *   - buttons: "Cancel" and "Discard Changes" (brand variant)
+ *   - size: "small"
+ *
+ * If you need to change the wording, add/remove buttons, or adjust the
+ * modal size, update the config object in `InternalHostLwcShell.ts` —
+ * **not** in this component.
+ *
+ * ---
+ * Deployment: customers must copy this component from the lwc-shell
+ * package's `dist/lwc/dirtyStateModal/` folder into their own SFDX
+ * project and deploy it to their Salesforce org.
+ *
+ * Usage in wrapper LWC:
+ *   import DirtyStateModal from 'c/dirtyStateModal';
+ *   shell.dirtyStateModal = DirtyStateModal;
+ */
+import LightningModal from "lightning/modal";
+import { api } from "lwc";
+
+export default class DirtyStateModal extends LightningModal {
+    /**
+     * Generic configuration object — NOT owned by this component.
+     *
+     * The actual values are supplied by the caller (InternalHostLwcShell)
+     * at open-time via `DirtyStateModal.open({ modalFields: { ... } })`.
+     * The defaults below are minimal fallbacks; the real config (label,
+     * description, full button set) is defined in InternalHostLwcShell's
+     * `[DoCloseConfirmation]()` method.
+     *
+     * Shape:
+     *   {
+     *     label:       string,          // Modal header text
+     *     description: string,          // Modal body text
+     *     buttons: [                    // Footer buttons (rendered dynamically)
+     *       {
+     *         buttonKey:     string,    // Unique key returned on click
+     *         buttonLabel:   string,    // Visible label
+     *         buttonVariant: string     // Optional SLDS variant (e.g. 'brand')
+     *       }
+     *     ]
+     *   }
+     */
+    @api modalFields = {
+        label: "Unsaved Changes",
+        description: "You have unsaved changes.",
+        buttons: [
+            {
+                buttonKey: "cancel",
+                buttonLabel: "Cancel",
+            },
+        ],
+    };
+
+    /**
+     * Generic button handler — closes the modal and returns the clicked
+     * button's `buttonKey` to the caller's `.open()` promise so the caller
+     * (InternalHostLwcShell) can decide what action to take.
+     */
+    handleButtonClick(event) {
+        const key = event.target.dataset.key;
+        this.close(key);
+    }
+}

package/dist/lwc/dirtyStateModal/dirtyStateModal.js-meta.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
+    <apiVersion>64.0</apiVersion>
+    <isExposed>false</isExposed>
+</LightningComponentBundle>

package/dist/utils/dirtyStateModal.d.ts

@@ -0,0 +1,23 @@
+import { DoCloseConfirmation, Guid } from "./symbols";
+/**
+ * Symbol-keyed contract for components that self-manage their dirty state.
+ *
+ * - `DoCloseConfirmation` — The component **must** define this as a function
+ *   that returns a `Promise` resolving to one of:
+ *     - `'SUCCESS'` – dirty state resolved, tab closure should continue.
+ *     - `'CANCEL'`  – the user cancelled the operation.
+ *     - `'ERROR'`   – a problem occurred resolving the dirty state.
+ *
+ *   If the promise resolves to `'SUCCESS'`, the component **must** have
+ *   already dispatched a `'privatelightningselfmanageddirtystatechanged'`
+ *   event with `isUnsaved: false` to clear its dirty state.
+ *
+ * - `Guid` — Optionally, the component can define this as a property
+ *   containing a globally unique string. If undefined, a GUID will be
+ *   generated automatically.
+ */
+export declare const SelfManagedDirtyComponent: Readonly<{
+    DoCloseConfirmation: typeof DoCloseConfirmation;
+    Guid: typeof Guid;
+}>;
+//# sourceMappingURL=dirtyStateModal.d.ts.map

package/dist/utils/dirtyStateModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dirtyStateModal.d.ts","sourceRoot":"","sources":["../../src/utils/dirtyStateModal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAEtD;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,yBAAyB,EAAE,QAAQ,CAAC;IAC7C,mBAAmB,EAAE,OAAO,mBAAmB,CAAC;IAChD,IAAI,EAAE,OAAO,IAAI,CAAC;CACrB,CAGS,CAAC"}

package/dist/utils/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Utils barrel — re-exports all utility modules used by lwc-shell.
+ *
+ * This folder is designed to grow as new features are added (e.g. additional
+ * state managers, analytics hooks). Each feature should get its own module
+ * and be re-exported from this index.
+ *
+ * Currently provides:
+ * - Dirty-state management symbols and helpers (`dirtyStateModal`, `symbols`).
+ */
+export { SelfManagedDirtyComponent } from "./dirtyStateModal";
+export { DoCloseConfirmation, Guid } from "./symbols";
+//# sourceMappingURL=index.d.ts.map

package/dist/utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAO,EAAE,mBAAmB,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC"}

package/dist/utils/symbols.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Symbols used as property / method keys for the dirty-state contract.
+ *
+ * These symbols are attached to the host LWC component by `<lwc-shell>`
+ * (via the `hostComponent` setter) so that Salesforce's tab-close flow can
+ * invoke `DoCloseConfirmation` and identify the component by `Guid`.
+ *
+ * See `InternalHostLwcShell.hostComponent` setter for wiring details,
+ * and the `SelfManagedDirtyComponent` object in `dirtyStateModal.ts` for
+ * the full contract description.
+ */
+export declare const Guid: unique symbol;
+export declare const DoCloseConfirmation: unique symbol;
+/**
+ * Generic constructor type used by the mixin.
+ */
+export type Constructor<T = HTMLElement> = new (...args: any[]) => T;
+//# sourceMappingURL=symbols.d.ts.map

package/dist/utils/symbols.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"symbols.d.ts","sourceRoot":"","sources":["../../src/utils/symbols.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,eAAO,MAAM,IAAI,EAAE,OAAO,MAAuB,CAAC;AAClD,eAAO,MAAM,mBAAmB,EAAE,OAAO,MAAsC,CAAC;AAEhF;;GAEG;AACH,MAAM,MAAM,WAAW,CAAC,CAAC,GAAG,WAAW,IAAI,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC"}

package/index.d.ts

@@ -0,0 +1,151 @@
+/**
+ * Symbols used as property / method keys for the dirty-state contract.
+ *
+ * These symbols are attached to the host LWC component by `<lwc-shell>`
+ * (via the `hostComponent` setter) so that Salesforce's tab-close flow can
+ * invoke `DoCloseConfirmation` and identify the component by `Guid`.
+ *
+ * See `InternalHostLwcShell.hostComponent` setter for wiring details,
+ * and the `SelfManagedDirtyComponent` object in `dirtyStateModal.ts` for
+ * the full contract description.
+ */
+declare const Guid: unique symbol;
+declare const DoCloseConfirmation: unique symbol;
+
+/**
+ * InternalHostLwcShell
+ *
+ * A standard Web Component (custom element) that embeds an iframe-based widget
+ * with bridge communication, sandbox management, fullscreen support, and
+ * dirty-state tracking.
+ *
+ * Registered as `<lwc-shell>`.
+ *
+ * Ported from the LWC `widgetContainerLo` component (formerly known as
+ * WidgetContainer) — all Lightning Web Component framework dependencies have
+ * been removed so this can run as a plain custom element inside any LWC host.
+ *
+ * **How customers use this:**
+ * 1. The build produces `dist/index.esm.js` which bundles this class.
+ * 2. Customers copy that file into their SFDX project as an LWC entity
+ *    (e.g. `c/lwcShell`) and deploy it to their Salesforce org.
+ * 3. A wrapper LWC imports `'c/lwcShell'` and creates `<lwc-shell>`
+ *    imperatively via `document.createElement('lwc-shell')`.
+ *
+ * See the README and the `productRegistrationWidgetLo` demo for a full recipe.
+ */
+
+interface DirtyStateModalButton {
+    buttonKey: string;
+    buttonLabel: string;
+    buttonVariant?: string;
+}
+interface DirtyStateModalFields {
+    label?: string;
+    description?: string;
+    buttons?: DirtyStateModalButton[];
+}
+/**
+ * Represents a LightningModal-style class with a static `.open()` method.
+ */
+interface DirtyStateModalClass {
+    open(config: {
+        modalFields?: DirtyStateModalFields;
+        size?: string;
+    }): Promise<string | undefined>;
+}
+declare class InternalHostLwcShell extends HTMLElement {
+    private _shadow;
+    private _iframe;
+    private _container;
+    private _currentState;
+    private _hasExplicitResize;
+    private _readinessTimeout;
+    private _isFullscreen;
+    private _lastThemeData;
+    private _lastPayloadData;
+    private _bridgeReady;
+    private _hasSentTheme;
+    private _hasSentData;
+    private _src;
+    private _srcdoc;
+    private _sandbox;
+    private _title;
+    private _view;
+    private _dirtyComponentGuid;
+    private _beforeUnloadHandler;
+    private _dirtyStateModal;
+    private _pendingDirtyActions;
+    private _debugEnabled;
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
+    get src(): string | null;
+    set src(v: string | null);
+    get srcdoc(): string | null;
+    set srcdoc(v: string | null);
+    get sandbox(): string | null;
+    set sandbox(v: string | null);
+    get title(): string;
+    set title(v: string | null);
+    get view(): string | null;
+    set view(v: string | null);
+    /**
+     * Controls debug logging. Toggle via:
+     * - HTML attribute: `<lwc-shell debug>`
+     * - Programmatically: `shell.debug = true`
+     */
+    get debug(): boolean;
+    set debug(v: boolean);
+    get _SelfManagedDirtyComponent(): Readonly<{
+        DoCloseConfirmation: typeof DoCloseConfirmation;
+        Guid: typeof Guid;
+    }>;
+    /**
+     * The LightningModal class used to show the unsaved-changes confirmation.
+     * Wrapper LWC sets this via: `shell.dirtyStateModal = DirtyStateModal;`
+     * where `DirtyStateModal` is the class imported from `'c/dirtyStateModal'`.
+     */
+    get dirtyStateModal(): DirtyStateModalClass | null;
+    set dirtyStateModal(v: DirtyStateModalClass | null);
+    updateData(newData: Record<string, unknown>): void;
+    refreshTheme(): void;
+    private get _isFullView();
+    private get _frameClass();
+    private _log;
+    private _renderInitial;
+    private _updateContainerState;
+    private _updateTitle;
+    private _updateViewDOM;
+    private _setState;
+    private _setupMessageListener;
+    private _handleMessage;
+    private _dispatchSelfManagedDirtyEvent;
+    private _toggleBeforeUnload;
+    private _handleDirtyStateDetected;
+    private _handleDirtyStateReset;
+    private _handleDirtyStateModalStatus;
+    private _handleResize;
+    private _handleWidgetReady;
+    private _handleFullscreenRequest;
+    private _enterFullscreen;
+    private _exitFullscreen;
+    private _handleBridgeReady;
+    private _handleBridgeError;
+    private _handleContainerClick;
+    private _applySandbox;
+    private _computeSandboxTokens;
+    private _updateIframeSrc;
+    private _handleIframeLoad;
+    private _handleIframeError;
+    private _postToIframe;
+    private _collectDataAttributes;
+    private _sendInitialTheme;
+    private _sendInitialData;
+    [Guid]: string;
+    [DoCloseConfirmation](): Promise<"SUCCESS" | "CANCEL" | "ERROR">;
+}
+
+export { InternalHostLwcShell, InternalHostLwcShell as default };

package/package.json

@@ -0,0 +1,45 @@
+{
+    "name": "@lightning-out/lwc-shell",
+    "version": "2.2.0-rc.0",
+    "private": false,
+    "description": "A standard Web Component shell for UI Embedding",
+    "license": "SEE LICENSE IN LICENSE.txt",
+    "author": "Salesforce MFE Team",
+    "main": "dist/index.esm.js",
+    "module": "dist/index.esm.js",
+    "types": "index.d.ts",
+    "exports": {
+        ".": {
+            "types": "./index.d.ts",
+            "import": "./dist/index.esm.js",
+            "require": "./dist/index.esm.js",
+            "default": "./dist/index.esm.js"
+        }
+    },
+    "bin": {
+        "lwc-shell-vendor-build": "./scripts/vendor-build.mjs"
+    },
+    "scripts": {
+        "build": "rollup -c",
+        "build:types": "tsc --emitDeclarationOnly",
+        "test": "jest",
+        "clean": "rimraf dist"
+    },
+    "devDependencies": {
+        "@lightning-out/utils": "2.2.0-rc.0",
+        "rollup-plugin-copy": "3.5.0"
+    },
+    "files": [
+        "dist/",
+        "!dist/*.test.js",
+        "!dist/*.map",
+        "scripts/",
+        "index.d.ts",
+        "README.md",
+        "LICENSE.txt"
+    ],
+    "publishConfig": {
+        "access": "public"
+    },
+    "sideEffects": true
+}

package/scripts/templates/vendor-banner.js

@@ -0,0 +1,2 @@
+/* eslint-disable */
+// Vendored from @lightning-out/lwc-shell npm package

package/scripts/templates/vendor-meta.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
+    <apiVersion>64.0</apiVersion>
+    <isExposed>false</isExposed>
+</LightningComponentBundle>

package/scripts/vendor-build.mjs

@@ -0,0 +1,76 @@
+#!/usr/bin/env node
+/**
+ * vendor-build.mjs
+ *
+ * Copies the pre-built @lightning-out/lwc-shell artifacts into force-app
+ * as vendor-prefixed LWC components ready for deployment:
+ *
+ *   1. dist/index.esm.js  → vendorLwcShell/vendorLwcShell.js
+ *   2. dist/lwc/*          → vendor<Name>/vendor<Name>.* (e.g. vendorDirtyStateModal)
+ */
+import { dirname, join } from 'path';
+import { fileURLToPath } from 'url';
+import { mkdir, readFile, writeFile, readdir } from 'fs/promises';
+import { createRequire } from 'module';
+
+const require = createRequire(import.meta.url);
+const __dirname = fileURLToPath(new URL('.', import.meta.url));
+
+// Resolve the package path using Node's module resolution (works regardless of node_modules location)
+const lwcShellDistDir = dirname(require.resolve('@lightning-out/lwc-shell'));
+const lwcShellLwcDir = join(lwcShellDistDir, 'lwc');
+const lwcDest = 'force-app/main/default/lwc';
+
+const VENDOR_PREFIX = 'vendor';
+
+// Load templates from external files so they can be edited independently with syntax highlighting
+const VENDOR_BANNER = await readFile(join(__dirname, 'templates', 'vendor-banner.js'), 'utf-8');
+const META_XML = await readFile(join(__dirname, 'templates', 'vendor-meta.xml'), 'utf-8');
+
+/** Prefix a component name: dirtyStateModal → vendorDirtyStateModal */
+function toVendorName(name) {
+    return VENDOR_PREFIX + name.charAt(0).toUpperCase() + name.slice(1);
+}
+
+// 1. Generate vendorLwcShell from dist/index.esm.js
+const vendorShellName = 'vendorLwcShell';
+const vendorShellDir = join(lwcDest, vendorShellName);
+await mkdir(vendorShellDir, { recursive: true });
+
+const esmSource = await readFile(join(lwcShellDistDir, 'index.esm.js'), 'utf-8');
+await writeFile(join(vendorShellDir, `${vendorShellName}.js`), VENDOR_BANNER + esmSource);
+await writeFile(join(vendorShellDir, `${vendorShellName}.js-meta.xml`), META_XML);
+
+// 2. Copy LWC components with vendor prefix
+const entries = await readdir(lwcShellLwcDir, { withFileTypes: true });
+const components = entries.filter(entry => entry.isDirectory()).map(entry => entry.name);
+
+const vendorComponentNames = [];
+for (const originalName of components) {
+    const vendorName = toVendorName(originalName);
+    const destDir = join(lwcDest, vendorName);
+    await mkdir(destDir, { recursive: true });
+
+    // Copy each file, renaming from originalName.* to vendorName.*
+    const srcDir = join(lwcShellLwcDir, originalName);
+    const files = await readdir(srcDir);
+    for (const file of files) {
+        const renamedFile = file.replace(originalName, vendorName);
+        const contents = await readFile(join(srcDir, file), 'utf-8');
+        await writeFile(join(destDir, renamedFile), contents);
+    }
+
+    vendorComponentNames.push(vendorName);
+}
+
+// 3. Print deployment instructions
+const allComponents = [vendorShellName, ...vendorComponentNames];
+const list = allComponents
+    .map((name, i) => `  ${i + 1}. ${lwcDest}/${name}`)
+    .join('\n');
+console.log(
+    `\n` +
+    `Below LWC components are generated from @lightning-out/lwc-shell.\n` +
+    `Please ensure to deploy them to your Salesforce org:\n` +
+    `${list}\n`
+);