@vio-live/web-sdk 0.9.0 → 0.10.0

package/dist/{chunk-OTL6QM3G.js → chunk-WIQ53CCM.js}

@@ -1,4 +1,4 @@
-import { Vio, __decorateClass, primaryImageUrl, displayPrice, getGlobalCurrency, formatPrice } from './chunk-SNIF67UB.js';
+import { Vio, __decorateClass, primaryImageUrl, displayPrice, getGlobalCurrency, formatPrice } from './chunk-PX27CQGX.js';
 import { LitElement, css, html } from 'lit';
 import { property, state, query } from 'lit/decorators.js';
 
@@ -3599,9 +3599,7 @@ var _VioCheckout = class _VioCheckout extends LitElement {
           if (order?.html_snippet) {
             this.qliroMountedOrderId = order.order_id;
             await this.updateComplete;
-            const container = this.renderRoot?.querySelector(
-              "#vio-qliro-checkout-container"
-            );
+            const container = this.lightContainer("vio-qliro-checkout-container", "vio-qliro");
             if (container) {
               Vio.checkout.renderKustomSnippet(container, order.html_snippet);
             }
@@ -3656,9 +3654,7 @@ var _VioCheckout = class _VioCheckout extends LitElement {
           if (order?.html_snippet) {
             this.walleyMountedOrderId = order.order_id;
             await this.updateComplete;
-            const container = this.renderRoot?.querySelector(
-              "#vio-walley-checkout-container"
-            );
+            const container = this.lightContainer("vio-walley-checkout-container", "vio-walley");
             if (container) {
               Vio.checkout.renderKustomSnippet(container, order.html_snippet);
             }
@@ -4268,14 +4264,33 @@ var _VioCheckout = class _VioCheckout extends LitElement {
     `;
   }
   /** Mount the Qliro embedded checkout once it's the chosen method. */
+  /**
+   * Container for a third-party embed, living in the LIGHT DOM.
+   *
+   * Qliro's (and Walley's) bootstrap script resolves its mount point from the
+   * document, so a container inside this component's shadow root is invisible
+   * to it and the widget silently never renders — verified against Qliro's
+   * staging widget: identical snippet, light DOM renders the iframe, shadow
+   * DOM renders nothing at all. The element is a child of the host (light DOM)
+   * and is projected back into the panel through a named slot, so the layout
+   * is unchanged. Kustom's KCO snippet resolves its own script's parent, so it
+   * works either way and keeps using the shadow-root container.
+   */
+  lightContainer(id, slotName) {
+    let el = this.querySelector(`#${id}`);
+    if (!el) {
+      el = document.createElement("div");
+      el.id = id;
+      el.setAttribute("slot", slotName);
+      this.appendChild(el);
+    }
+    return el;
+  }
   async mountQliroIfNeeded() {
     if (!this.open || !this.checkoutState) return;
     if (this.checkoutState.paymentMethod !== "qliro") return;
     if (this.qliroMounting) return;
-    const container = this.renderRoot?.querySelector(
-      "#vio-qliro-checkout-container"
-    );
-    if (!container) return;
+    const container = this.lightContainer("vio-qliro-checkout-container", "vio-qliro");
     if (this.qliroMountedOrderId && container.childElementCount > 0) return;
     this.qliroMounting = true;
     container.innerHTML = "";
@@ -4297,16 +4312,14 @@ var _VioCheckout = class _VioCheckout extends LitElement {
   }
   unmountQliro() {
     this.qliroMountedOrderId = null;
-    const container = this.renderRoot?.querySelector(
-      "#vio-qliro-checkout-container"
-    );
-    if (container) container.innerHTML = "";
+    Vio.checkout.destroyQliroListeners();
+    this.querySelector("#vio-qliro-checkout-container")?.remove();
   }
   renderQliroPanel() {
     return html`
       <div class="qliro-panel">
         ${this.qliroMounting ? html`<div style="font-size:13px;opacity:0.7;padding:8px 0;">Laster Qliro…</div>` : ""}
-        <div id="vio-qliro-checkout-container"></div>
+        <slot name="vio-qliro"></slot>
       </div>
     `;
   }
@@ -4320,10 +4333,7 @@ var _VioCheckout = class _VioCheckout extends LitElement {
     if (!this.open || !this.checkoutState) return;
     if (this.checkoutState.paymentMethod !== "walley") return;
     if (this.walleyMounting) return;
-    const container = this.renderRoot?.querySelector(
-      "#vio-walley-checkout-container"
-    );
-    if (!container) return;
+    const container = this.lightContainer("vio-walley-checkout-container", "vio-walley");
     if (this.walleyMountedOrderId && container.childElementCount > 0) return;
     this.walleyMounting = true;
     container.innerHTML = "";
@@ -4361,16 +4371,13 @@ var _VioCheckout = class _VioCheckout extends LitElement {
   }
   unmountWalley() {
     this.walleyMountedOrderId = null;
-    const container = this.renderRoot?.querySelector(
-      "#vio-walley-checkout-container"
-    );
-    if (container) container.innerHTML = "";
+    this.querySelector("#vio-walley-checkout-container")?.remove();
   }
   renderWalleyPanel() {
     return html`
       <div class="walley-panel">
         ${this.walleyMounting ? html`<div style="font-size:13px;opacity:0.7;padding:8px 0;">Laster Walley…</div>` : ""}
-        <div id="vio-walley-checkout-container"></div>
+        <slot name="vio-walley"></slot>
       </div>
     `;
   }
@@ -4865,5 +4872,5 @@ function registerVioElements() {
 }
 
 export { VioCart, VioCheckout, VioProduct, VioProductCarousel, VioProductDetail, VioTokens, applyVioTheme, registerVioElements };
-//# sourceMappingURL=chunk-OTL6QM3G.js.map
-//# sourceMappingURL=chunk-OTL6QM3G.js.map
+//# sourceMappingURL=chunk-WIQ53CCM.js.map
+//# sourceMappingURL=chunk-WIQ53CCM.js.map