@vio-live/web-sdk 0.23.0 → 0.24.0

package/dist/{chunk-COCHGJ2K.js → chunk-N6U65DWG.js}

@@ -1,4 +1,4 @@
-import { Vio, __decorateClass, primaryImageUrl, displayPrice, getGlobalCurrency, ensureVippsButton, formatPrice, nexiReturnPaymentId, readNexiPending, kustomReturnOutcome, KUSTOM_RETURN_QUERY_KEYS, ADYEN_RETURN_METHOD, adyenReturnParams, ADYEN_RETURN_QUERY_KEYS, adyenReturnOutcome, AdyenOriginError, autoSlotDisplayName, autoSlotId, normalizeScope } from './chunk-AMDI7KH3.js';
+import { Vio, __decorateClass, primaryImageUrl, displayPrice, toCampaignId, getGlobalCurrency, ensureVippsButton, formatPrice, nexiReturnPaymentId, readNexiPending, kustomReturnOutcome, KUSTOM_RETURN_QUERY_KEYS, ADYEN_RETURN_METHOD, adyenReturnParams, ADYEN_RETURN_QUERY_KEYS, adyenReturnOutcome, AdyenOriginError, normalizeSlotId, autoSlotDisplayName, autoSlotId, normalizeScope, campaignCandidates } from './chunk-AXJKB2CW.js';
 import { LitElement, css, html } from 'lit';
 import { property, state, query } from 'lit/decorators.js';
 
@@ -171,61 +171,94 @@ var SCOPE_ATTR = "vio-scope";
 var SCOPE_NAME_ATTR = "vio-scope-name";
 var SCOPE_DATA_ATTR = "data-vio-scope";
 var SCOPE_NAME_DATA_ATTR = "data-vio-scope-name";
+var CAMPAIGN_ATTR = "vio-campaign";
+var CAMPAIGN_DATA_ATTR = "data-vio-campaign";
+var liveAutoIds = (() => {
+  const g = globalThis;
+  return g.__VIO_LIVE_SLOT_IDS__ ?? (g.__VIO_LIVE_SLOT_IDS__ = /* @__PURE__ */ new Map());
+})();
 var SlotRegistration = class {
   constructor(host, kind) {
     this.host = host;
     this.kind = kind;
     this.identity = null;
     this.release = null;
-    /** The element's position-based identity, fixed at connect time. */
-    this.position = null;
+    /** The auto identity held (its number is kept while the element lives). */
+    this.auto = null;
+    /** Set by connect(); the scope label is read then too. */
+    this.connected = false;
+    this.scope = "";
+    this.scopeName = "";
   }
   /** The effective slot id ('' before connect / after disconnect). */
   get effective() {
     return this.identity?.id ?? "";
   }
-  /** The identity in effect, or null. */
-  get current() {
-    return this.identity;
+  /** The element's own page campaign (`vio-campaign` / ancestor `data-vio-campaign`); undefined → `Vio.init`'s applies. */
+  get campaignId() {
+    return this.identity?.campaignId;
   }
-  /** On connect: fix scope + ordinal from the element's position, then register. */
+  /** The element's page-campaign candidates in order (own, ancestor) — the hint for `Vio.attribution` / `campaignForSlot`. */
+  get campaignHint() {
+    return this.identity?.campaignCandidates ?? [];
+  }
+  /** On connect: read the scope from the DOM, then register. */
   connect(attrs) {
-    this.position = positionOf(this.host, attrs);
+    this.connected = true;
+    this.scope = scopeOf(this.host, attrs);
+    this.scopeName = scopeNameOf(this.host, attrs);
     this.sync(attrs);
   }
   /** (Re)register when the attributes changed the identity. */
   sync(attrs) {
-    if (this.position && scopeOf(this.host, attrs) !== this.position.scope) {
-      this.position = positionOf(this.host, attrs);
+    if (!this.connected) return;
+    const scope = scopeOf(this.host, attrs);
+    if (scope !== this.scope) {
+      this.scope = scope;
+      this.scopeName = scopeNameOf(this.host, attrs);
+      this.releaseAuto();
+    } else {
+      const scopeName = scopeNameOf(this.host, attrs);
+      if (scopeName !== this.scopeName) this.scopeName = scopeName;
     }
     const next = this.resolve(attrs);
     if (sameIdentity(next, this.identity)) return;
-    this.clear();
+    this.unregister();
     if (!next) return;
     try {
-      this.release = Vio.registerSlot(next.id, next.displayName);
+      this.release = typeof Vio.registerSlot !== "function" ? null : next.campaignId !== void 0 ? Vio.registerSlot(next.id, next.displayName, next.campaignId) : Vio.registerSlot(next.id, next.displayName);
       this.identity = next;
     } catch {
       this.release = null;
       this.identity = null;
     }
   }
-  /** What the identity would be for these attributes (null before connect without a host id). */
+  /** What the identity is for these attributes (null before connect without a host id). */
   resolve(attrs) {
-    const explicit = typeof attrs.vioSlot === "string" ? attrs.vioSlot.trim() : "";
+    const explicit = normalizeSlotId(attrs.vioSlot);
     const name = typeof attrs.vioSlotName === "string" && attrs.vioSlotName.trim() ? attrs.vioSlotName.trim() : void 0;
-    if (explicit) return { id: explicit, displayName: name, auto: false, scope: this.position?.scope ?? "" };
-    if (!this.position) return null;
-    const { scope, scopeName, ordinal } = this.position;
+    const campaignCandidates2 = campaignCandidatesOf(this.host, attrs);
+    const campaignId = campaignCandidates2[0];
+    if (explicit) {
+      this.releaseAuto();
+      return { id: explicit, displayName: name, campaignId, campaignCandidates: campaignCandidates2 };
+    }
+    if (!this.connected) return null;
+    const auto = this.claimAuto();
     return {
-      id: autoSlotId(this.kind, ordinal, scope),
-      displayName: name ?? autoSlotDisplayName(this.kind, ordinal, scopeName),
-      auto: true,
-      scope
+      id: auto.id,
+      displayName: name ?? autoSlotDisplayName(this.kind, auto.number - 1, this.scopeName),
+      campaignId,
+      campaignCandidates: campaignCandidates2
     };
   }
-  /** Unregister whatever is registered. */
+  /** Unregister whatever is registered and free the auto number. */
   clear() {
+    this.unregister();
+    this.releaseAuto();
+    this.connected = false;
+  }
+  unregister() {
     try {
       this.release?.();
     } catch {
@@ -233,40 +266,46 @@ var SlotRegistration = class {
     this.release = null;
     this.identity = null;
   }
+  /** The element's auto id: the one it already holds, else the first free number. */
+  claimAuto() {
+    if (this.auto && this.auto.scope === this.scope) return this.auto;
+    this.releaseAuto();
+    for (let number = 1; ; number++) {
+      const id = autoSlotId(this.kind, number - 1, this.scope);
+      const holders = liveAutoIds.get(id);
+      if (!holders || holders.size === 0 || holders.size === 1 && holders.has(this.host)) {
+        const set = holders ?? /* @__PURE__ */ new Set();
+        set.add(this.host);
+        liveAutoIds.set(id, set);
+        this.auto = { id, scope: this.scope, number };
+        return this.auto;
+      }
+    }
+  }
+  releaseAuto() {
+    if (!this.auto) return;
+    const holders = liveAutoIds.get(this.auto.id);
+    holders?.delete(this.host);
+    if (holders && holders.size === 0) liveAutoIds.delete(this.auto.id);
+    this.auto = null;
+  }
 };
 function sameIdentity(a, b) {
   if (!a || !b) return a === b;
-  return a.id === b.id && a.displayName === b.displayName;
+  return a.id === b.id && a.displayName === b.displayName && a.campaignId === b.campaignId;
+}
+function campaignCandidatesOf(el, attrs) {
+  const own = attrs && attrs.vioCampaign !== void 0 && attrs.vioCampaign !== null ? attrs.vioCampaign : el.vioCampaign !== void 0 ? el.vioCampaign : el.getAttribute(CAMPAIGN_ATTR);
+  const ancestor = closestAcrossShadow(el, `[${CAMPAIGN_DATA_ATTR}]`)?.getAttribute(CAMPAIGN_DATA_ATTR);
+  return campaignCandidates([own, ancestor]);
 }
 function scopeOf(el, attrs) {
   const own = attrs && typeof attrs.vioScope === "string" ? attrs.vioScope : typeof el.vioScope === "string" ? el.vioScope ?? "" : el.getAttribute(SCOPE_ATTR) ?? "";
-  const value = normalizeScope(own) || normalizeScope(closestAcrossShadow(el, `[${SCOPE_DATA_ATTR}]`)?.getAttribute(SCOPE_DATA_ATTR));
-  return value;
+  return normalizeScope(own) || normalizeScope(closestAcrossShadow(el, `[${SCOPE_DATA_ATTR}]`)?.getAttribute(SCOPE_DATA_ATTR));
 }
 function scopeNameOf(el, attrs) {
   const own = attrs && typeof attrs.vioScopeName === "string" ? attrs.vioScopeName : typeof el.vioScopeName === "string" ? el.vioScopeName ?? "" : el.getAttribute(SCOPE_NAME_ATTR) ?? "";
-  const value = own.trim() || (closestAcrossShadow(el, `[${SCOPE_NAME_DATA_ATTR}]`)?.getAttribute(SCOPE_NAME_DATA_ATTR) ?? "").trim();
-  return value;
-}
-function positionOf(host, attrs) {
-  const scope = scopeOf(host, attrs);
-  const scopeName = scopeNameOf(host, attrs);
-  let ordinal = 0;
-  try {
-    const tag = host.tagName.toLowerCase();
-    const root = host.getRootNode();
-    const scopeRoot = root && typeof root.querySelectorAll === "function" ? root : typeof document !== "undefined" ? document : null;
-    if (scopeRoot) {
-      const peers = Array.from(scopeRoot.querySelectorAll(tag)).filter(
-        (el) => el === host || scopeOf(el) === scope
-      );
-      const index = peers.indexOf(host);
-      ordinal = index >= 0 ? index : 0;
-    }
-  } catch {
-    ordinal = 0;
-  }
-  return { scope, scopeName, ordinal };
+  return own.trim() || (closestAcrossShadow(el, `[${SCOPE_NAME_DATA_ATTR}]`)?.getAttribute(SCOPE_NAME_DATA_ATTR) ?? "").trim();
 }
 function closestAcrossShadow(start, selector) {
   try {
@@ -297,6 +336,7 @@ var VioProduct = class extends LitElement {
     this.vioSlotName = "";
     this.vioScope = "";
     this.vioScopeName = "";
+    this.vioCampaign = "";
     this.vioContentId = "";
     this.vioContentTitle = "";
     this.slotRegistration = new SlotRegistration(this, "card");
@@ -313,9 +353,13 @@ var VioProduct = class extends LitElement {
   get effectiveSlot() {
     return this.slotRegistration.effective;
   }
+  /** The element's own page campaign (`vio-campaign` / ancestor), if any; `Vio.init`'s applies otherwise. */
+  get effectiveCampaignId() {
+    return this.slotRegistration.campaignId;
+  }
   /** The slot campaign's sponsor as the string the attributes use ('' when unknown). */
   sponsorFromAttribution() {
-    const id = Vio.attribution(this.effectiveSlot).sponsorId;
+    const id = typeof Vio.attribution === "function" ? Vio.attribution(this.effectiveSlot, { campaignId: this.slotRegistration.campaignHint }).sponsorId : void 0;
     return id !== void 0 ? String(id) : "";
   }
   slotAttributes() {
@@ -323,7 +367,8 @@ var VioProduct = class extends LitElement {
       vioSlot: this.vioSlot,
       vioSlotName: this.vioSlotName,
       vioScope: this.vioScope,
-      vioScopeName: this.vioScopeName
+      vioScopeName: this.vioScopeName,
+      vioCampaign: this.vioCampaign
     };
   }
   /**
@@ -332,7 +377,10 @@ var VioProduct = class extends LitElement {
    * set `vio-content-id` / `vio-content-title` on this card.
    */
   attribution() {
-    const base = Vio.attribution(this.effectiveSlot, { sponsorId: this.sponsorId || void 0 });
+    const base = typeof Vio.attribution === "function" ? Vio.attribution(this.effectiveSlot, {
+      sponsorId: this.sponsorId || void 0,
+      campaignId: this.slotRegistration.campaignHint
+    }) : { slot: this.effectiveSlot || void 0 };
     return {
       ...base,
       ...this.vioContentId ? { contentId: this.vioContentId } : {},
@@ -462,7 +510,7 @@ var VioProduct = class extends LitElement {
   }
   updated(changed) {
     if (changed.has("productId") || changed.has("sponsorId")) this.updateInCart();
-    if (changed.has("vioSlot") || changed.has("vioSlotName") || changed.has("vioScope") || changed.has("vioScopeName")) {
+    if (changed.has("vioSlot") || changed.has("vioSlotName") || changed.has("vioScope") || changed.has("vioScopeName") || changed.has("vioCampaign")) {
       this.slotRegistration.sync(this.slotAttributes());
     }
   }
@@ -618,6 +666,9 @@ __decorateClass([
 __decorateClass([
   property({ type: String, attribute: "vio-scope-name" })
 ], VioProduct.prototype, "vioScopeName", 2);
+__decorateClass([
+  property({ type: String, attribute: "vio-campaign" })
+], VioProduct.prototype, "vioCampaign", 2);
 __decorateClass([
   property({ type: String, attribute: "vio-content-id" })
 ], VioProduct.prototype, "vioContentId", 2);
@@ -662,6 +713,7 @@ var VioProductCarousel = class extends LitElement {
     this.vioSlotName = "";
     this.vioScope = "";
     this.vioScopeName = "";
+    this.vioCampaign = "";
     this.vioContentId = "";
     this.vioContentTitle = "";
     this.slotRegistration = new SlotRegistration(this, "carousel");
@@ -680,17 +732,25 @@ var VioProductCarousel = class extends LitElement {
   get effectiveSlot() {
     return this.slotRegistration.effective;
   }
+  /** The element's own page campaign (`vio-campaign` / ancestor), if any; `Vio.init`'s applies otherwise. */
+  get effectiveCampaignId() {
+    return this.slotRegistration.campaignId;
+  }
   slotAttributes() {
     return {
       vioSlot: this.vioSlot,
       vioSlotName: this.vioSlotName,
       vioScope: this.vioScope,
-      vioScopeName: this.vioScopeName
+      vioScopeName: this.vioScopeName,
+      vioCampaign: this.vioCampaign
     };
   }
   /** Attribution every analytics event of this carousel carries (`Vio.attribution` + the content overrides). */
   attribution() {
-    const base = Vio.attribution(this.effectiveSlot, { sponsorId: this.sponsorId > 0 ? this.sponsorId : void 0 });
+    const base = typeof Vio.attribution === "function" ? Vio.attribution(this.effectiveSlot, {
+      sponsorId: this.sponsorId > 0 ? this.sponsorId : void 0,
+      campaignId: this.slotRegistration.campaignHint
+    }) : { slot: this.effectiveSlot || void 0 };
     return {
       ...base,
       ...this.vioContentId ? { contentId: this.vioContentId } : {},
@@ -857,10 +917,10 @@ var VioProductCarousel = class extends LitElement {
     super.disconnectedCallback();
   }
   updated(changed) {
-    if (changed.has("vioSlot") || changed.has("vioSlotName") || changed.has("vioScope") || changed.has("vioScopeName")) {
+    if (changed.has("vioSlot") || changed.has("vioSlotName") || changed.has("vioScope") || changed.has("vioScopeName") || changed.has("vioCampaign")) {
       this.slotRegistration.sync(this.slotAttributes());
     }
-    const propChanged = changed.has("productRefs") || changed.has("productIds") || changed.has("commerceKey") || changed.has("sponsorId") || changed.has("vioSlot");
+    const propChanged = changed.has("productRefs") || changed.has("productIds") || changed.has("commerceKey") || changed.has("sponsorId") || changed.has("vioSlot") || changed.has("vioCampaign");
     if (propChanged && (this.productRefs.trim() || this.productIds.trim())) {
       void this.autoFetch();
     }
@@ -872,7 +932,7 @@ var VioProductCarousel = class extends LitElement {
    */
   effectiveSponsorId() {
     if (this.sponsorId > 0) return this.sponsorId;
-    const fromSlot = Number(Vio.campaignForSlot(this.effectiveSlot || null)?.primarySponsor?.id);
+    const fromSlot = typeof Vio.campaignForSlot === "function" ? Number(Vio.campaignForSlot(this.effectiveSlot || null, { campaignId: this.slotRegistration.campaignHint })?.primarySponsor?.id) : NaN;
     return Number.isFinite(fromSlot) && fromSlot > 0 ? fromSlot : 0;
   }
   async autoFetch() {
@@ -1021,6 +1081,7 @@ var VioProductCarousel = class extends LitElement {
             image-url=${img}
             ?has-variants=${(p.variants?.length ?? 0) > 1}
             .vioSlot=${this.effectiveSlot}
+            .vioCampaign=${this.effectiveCampaignId !== void 0 ? String(this.effectiveCampaignId) : ""}
             .vioContentId=${this.vioContentId}
             .vioContentTitle=${this.vioContentTitle}
           ></vio-product>
@@ -1104,6 +1165,9 @@ __decorateClass([
 __decorateClass([
   property({ type: String, attribute: "vio-scope-name" })
 ], VioProductCarousel.prototype, "vioScopeName", 2);
+__decorateClass([
+  property({ type: String, attribute: "vio-campaign" })
+], VioProductCarousel.prototype, "vioCampaign", 2);
 __decorateClass([
   property({ type: String, attribute: "vio-content-id" })
 ], VioProductCarousel.prototype, "vioContentId", 2);
@@ -1352,13 +1416,16 @@ var VioProductDetail = class extends LitElement {
     this.vioSlotName = "";
     this.vioScope = "";
     this.vioScopeName = "";
+    this.vioCampaign = "";
     this.vioContentId = "";
     this.vioContentTitle = "";
     this.slotRegistration = new SlotRegistration(this, "detail");
-    /** What the click that opened the detail carried ('' when nothing). */
+    /** What the click that opened the detail carried ('' when nothing), and for which product. */
     this.eventSlot = "";
     this.eventContentId = "";
     this.eventContentTitle = "";
+    this.eventCampaignId = void 0;
+    this.eventProductId = "";
     this.product = null;
     this.sellerName = null;
     this.sellerSettled = false;
@@ -1392,11 +1459,17 @@ var VioProductDetail = class extends LitElement {
       const slot = typeof ev.detail.slot === "string" ? ev.detail.slot.trim() : "";
       let sponsorIdNum = parseInt(ev.detail.sponsorId, 10);
       if (Number.isNaN(sponsorIdNum) || sponsorIdNum <= 0) {
-        const fromSlot = Number(Vio.campaignForSlot(slot || this.effectiveSlot || null)?.primarySponsor?.id);
+        const fromSlot = typeof Vio.campaignForSlot === "function" ? Number(
+          Vio.campaignForSlot(slot || this.effectiveSlot || null, {
+            campaignId: [ev.detail.campaignId, ...this.slotRegistration.campaignHint]
+          })?.primarySponsor?.id
+        ) : NaN;
         if (!Number.isFinite(fromSlot) || fromSlot <= 0) return;
         sponsorIdNum = fromSlot;
       }
       this.eventSlot = slot;
+      this.eventCampaignId = toCampaignId(ev.detail.campaignId);
+      this.eventProductId = String(ev.detail.productId);
       this.eventContentId = ev.detail.contentId !== void 0 && ev.detail.contentId !== null ? String(ev.detail.contentId).trim() : "";
       this.eventContentTitle = typeof ev.detail.contentTitle === "string" ? ev.detail.contentTitle.trim() : "";
       this.productId = ev.detail.productId;
@@ -1406,27 +1479,44 @@ var VioProductDetail = class extends LitElement {
       void this.fetchProduct();
     };
   }
+  /** The card's context applies to the product it opened — not to one the host opened by hand later. */
+  get fromCard() {
+    return this.eventProductId !== "" && this.eventProductId === String(this.productId);
+  }
   /** The slot id in effect for this element: `vio-slot`, else the auto id (`detail-N`). Read-only. */
   get effectiveSlot() {
     return this.slotRegistration.effective;
   }
+  /** The element's own page campaign (`vio-campaign` / ancestor), if any; `Vio.init`'s applies otherwise. */
+  get effectiveCampaignId() {
+    return this.slotRegistration.campaignId;
+  }
   /** The slot the open product is attributed to: the opening card's, else this element's. */
   get activeSlot() {
-    return this.eventSlot || this.effectiveSlot;
+    return this.fromCard && this.eventSlot || this.effectiveSlot;
+  }
+  /** The page-campaign candidates of the open product: the opening card's, then this element's own and its ancestor's. */
+  get activeCampaignHint() {
+    const own = this.slotRegistration.campaignHint;
+    return this.fromCard && this.eventCampaignId !== void 0 ? [this.eventCampaignId, ...own] : own;
   }
   slotAttributes() {
     return {
       vioSlot: this.vioSlot,
       vioSlotName: this.vioSlotName,
       vioScope: this.vioScope,
-      vioScopeName: this.vioScopeName
+      vioScopeName: this.vioScopeName,
+      vioCampaign: this.vioCampaign
     };
   }
   /** Attribution every event of the open product carries (`Vio.attribution` of the opening card's slot, else this element's). */
   attribution() {
-    const base = Vio.attribution(this.activeSlot, { sponsorId: this.sponsorId > 0 ? this.sponsorId : void 0 });
-    const contentId = this.eventContentId || this.vioContentId;
-    const contentTitle = this.eventContentTitle || this.vioContentTitle;
+    const base = typeof Vio.attribution === "function" ? Vio.attribution(this.activeSlot, {
+      sponsorId: this.sponsorId > 0 ? this.sponsorId : void 0,
+      campaignId: this.activeCampaignHint
+    }) : { slot: this.activeSlot || void 0 };
+    const contentId = this.fromCard && this.eventContentId || this.vioContentId;
+    const contentTitle = this.fromCard && this.eventContentTitle || this.vioContentTitle;
     return {
       ...base,
       ...contentId ? { contentId } : {},
@@ -1891,7 +1981,7 @@ var VioProductDetail = class extends LitElement {
   }
   updated(changed) {
     if (changed.has("open")) this.dialogFocus.update(this.open);
-    if (changed.has("vioSlot") || changed.has("vioSlotName") || changed.has("vioScope") || changed.has("vioScopeName")) {
+    if (changed.has("vioSlot") || changed.has("vioSlotName") || changed.has("vioScope") || changed.has("vioScopeName") || changed.has("vioCampaign")) {
       this.slotRegistration.sync(this.slotAttributes());
     }
   }
@@ -1902,6 +1992,11 @@ var VioProductDetail = class extends LitElement {
     this.open = false;
     setTimeout(() => {
       if (!this.open) {
+        this.eventSlot = "";
+        this.eventContentId = "";
+        this.eventContentTitle = "";
+        this.eventCampaignId = void 0;
+        this.eventProductId = "";
         this.product = null;
         this.sellerName = null;
         this.sellerSettled = false;
@@ -2001,7 +2096,7 @@ var VioProductDetail = class extends LitElement {
   }
   /** Which buy buttons to render — backend-configured per sponsor. */
   async loadAvailablePaymentMethods() {
-    const spId = this.sponsorId || Number(Vio.campaignForSlot(this.activeSlot || null)?.primarySponsor?.id) || globalThis.__VIO_SPONSOR_ID__;
+    const spId = this.sponsorId || (typeof Vio.campaignForSlot === "function" ? Number(Vio.campaignForSlot(this.activeSlot || null, { campaignId: this.activeCampaignHint })?.primarySponsor?.id) : 0) || globalThis.__VIO_SPONSOR_ID__;
     if (!spId) return;
     try {
       const methods = await Vio.checkout.getAvailablePaymentMethods(spId);
@@ -2707,6 +2802,9 @@ __decorateClass([
 __decorateClass([
   property({ type: String, attribute: "vio-scope-name" })
 ], VioProductDetail.prototype, "vioScopeName", 2);
+__decorateClass([
+  property({ type: String, attribute: "vio-campaign" })
+], VioProductDetail.prototype, "vioCampaign", 2);
 __decorateClass([
   property({ type: String, attribute: "vio-content-id" })
 ], VioProductDetail.prototype, "vioContentId", 2);
@@ -7007,5 +7105,5 @@ function registerVioElements() {
 }
 
 export { VioCart, VioCheckout, VioProduct, VioProductCarousel, VioProductDetail, VioTokens, applyVioTheme, registerVioElements };
-//# sourceMappingURL=chunk-COCHGJ2K.js.map
-//# sourceMappingURL=chunk-COCHGJ2K.js.map
+//# sourceMappingURL=chunk-N6U65DWG.js.map
+//# sourceMappingURL=chunk-N6U65DWG.js.map