universal-ad-loader 0.1.1 → 0.2.0

package/dist/ual.js

@@ -272,6 +272,247 @@
     return out;
   }
 
+  // src/core/native.js
+  var NATIVE_LIMITS = { title: 150, body: 300, sponsoredBy: 60, cta: 30, displayUrl: 100, price: 30, label: 20 };
+  var NATIVE_LAYOUTS = ["card", "list", "compact"];
+  var clip = (v, n) => typeof v === "string" ? v.trim().slice(0, n) : "";
+  function normalizeNative(raw, safeUrl2) {
+    if (!raw || typeof raw !== "object") return { ok: false, reason: "native mancante" };
+    const title = clip(raw.title, NATIVE_LIMITS.title);
+    if (!title) return { ok: false, reason: "native: titolo mancante" };
+    const img = (v) => {
+      const o = typeof v === "string" ? { src: v } : v;
+      const src = o && typeof o === "object" ? safeUrl2(o.src, true) : null;
+      if (!src) return null;
+      const dim2 = (n) => {
+        const x = Math.round(Number(n));
+        return x > 0 && x <= 2e3 ? x : 0;
+      };
+      return { src, width: dim2(o.width), height: dim2(o.height) };
+    };
+    const rating = Number(raw.rating);
+    return {
+      ok: true,
+      native: {
+        title,
+        body: clip(raw.body, NATIVE_LIMITS.body),
+        sponsoredBy: clip(raw.sponsoredBy, NATIVE_LIMITS.sponsoredBy),
+        cta: clip(raw.cta, NATIVE_LIMITS.cta),
+        displayUrl: clip(raw.displayUrl, NATIVE_LIMITS.displayUrl),
+        price: clip(raw.price, NATIVE_LIMITS.price),
+        rating: Number.isFinite(rating) && rating >= 0 && rating <= 5 ? rating : null,
+        image: img(raw.image),
+        icon: img(raw.icon),
+        layout: NATIVE_LAYOUTS.includes(raw.layout) ? raw.layout : "card",
+        label: clip(raw.label, NATIVE_LIMITS.label) || "Sponsored"
+      }
+    };
+  }
+  var STYLE = `
+:host{display:block;max-width:100%;font:inherit;color:inherit;line-height:1.35}
+*{box-sizing:border-box}
+.card{display:flex;flex-direction:column;gap:.5em;padding:.75em;text-decoration:none;color:inherit;border:1px solid var(--ual-native-border,rgba(128,128,128,.35));border-radius:var(--ual-native-radius,8px);background:var(--ual-native-bg,transparent);position:relative}
+a.card:hover .title{text-decoration:underline}
+.label{font-size:.72em;letter-spacing:.04em;text-transform:uppercase;opacity:.75}
+.main{display:block;width:100%;height:auto;border-radius:calc(var(--ual-native-radius,8px) - 2px);background:rgba(128,128,128,.12)}
+.row{display:flex;gap:.6em;align-items:flex-start}
+.icon{width:2.4em;height:2.4em;flex:none;border-radius:6px;object-fit:cover}
+.title{font-weight:700;font-size:1.05em}
+.body{opacity:.9;font-size:.92em}
+.meta{font-size:.8em;opacity:.7}
+.cta{align-self:flex-start;font-weight:600;font-size:.9em;padding:.35em .8em;border-radius:999px;background:var(--ual-native-accent,#2563eb);color:var(--ual-native-accent-text,#fff)}
+.price{font-weight:600}
+.layout-list{flex-direction:row;align-items:flex-start}
+.layout-list .main{width:35%;max-width:180px;flex:none}
+.layout-list .text{display:flex;flex-direction:column;gap:.35em;min-width:0}
+.layout-compact .main{display:none}
+`;
+  function el(tag, cls, text) {
+    const e = document.createElement(tag);
+    if (cls) e.className = cls;
+    if (text != null) e.textContent = text;
+    return e;
+  }
+  function image(i, cls, alt) {
+    const im = el("img", cls);
+    im.src = i.src;
+    im.alt = alt || "";
+    im.loading = "lazy";
+    im.referrerPolicy = "strict-origin-when-cross-origin";
+    if (i.width && i.height) {
+      im.width = i.width;
+      im.height = i.height;
+    }
+    return im;
+  }
+  function renderNative(container, ad, { onClick } = {}) {
+    const n = ad.native;
+    const host = el("div", "ual-native");
+    const root = host.attachShadow ? host.attachShadow({ mode: "open" }) : host;
+    const style = document.createElement("style");
+    style.textContent = STYLE;
+    root.appendChild(style);
+    const card = ad.clickUrl ? el("a", `card layout-${n.layout}`) : el("div", `card layout-${n.layout}`);
+    if (ad.clickUrl) {
+      card.href = ad.clickUrl;
+      card.target = "_blank";
+      card.rel = "noopener noreferrer sponsored nofollow";
+      card.addEventListener("click", () => {
+        if (onClick) onClick();
+      });
+    }
+    card.appendChild(el("span", "label", n.label));
+    if (n.image) card.appendChild(image(n.image, "main", n.title));
+    const text = el("div", "text");
+    const head = el("div", "row");
+    if (n.icon) head.appendChild(image(n.icon, "icon", ""));
+    const titles = el("div");
+    titles.appendChild(el("div", "title", n.title));
+    if (n.sponsoredBy) titles.appendChild(el("div", "meta", n.sponsoredBy));
+    head.appendChild(titles);
+    text.appendChild(head);
+    if (n.body) text.appendChild(el("div", "body", n.body));
+    const meta = [n.displayUrl, n.rating !== null ? `\u2605 ${n.rating}` : ""].filter(Boolean).join(" \xB7 ");
+    if (meta) text.appendChild(el("div", "meta", meta));
+    if (n.price) text.appendChild(el("div", "price", n.price));
+    if (n.cta) text.appendChild(el("span", "cta", n.cta));
+    card.appendChild(text);
+    root.appendChild(card);
+    container.innerHTML = "";
+    container.appendChild(host);
+    return { el: host, destroy: () => host.remove() };
+  }
+
+  // src/core/video.js
+  var QUARTILES = [["firstQuartile", 0.25], ["midpoint", 0.5], ["thirdQuartile", 0.75]];
+  var QUARTILE_NAMES = ["firstQuartile", "midpoint", "thirdQuartile", "complete"];
+  var PLAY_THRESHOLD = 0.5;
+  function quartileHits(fired, currentTime, duration) {
+    if (!(duration > 0) || !(currentTime >= 0)) return [];
+    const f = currentTime / duration;
+    const hits = [];
+    for (const [name, at] of QUARTILES) {
+      if (f >= at && !fired.has(name)) {
+        fired.add(name);
+        hits.push(name);
+      }
+    }
+    return hits;
+  }
+  function normalizeVideo(raw, safeUrl2) {
+    const src = safeUrl2(raw.src);
+    if (!src) return { ok: false, reason: "video: src non valido (ammessi solo http e https)" };
+    return { ok: true, video: { src, poster: safeUrl2(raw.poster, true) || "", mime: typeof raw.mime === "string" && /^video\/[\w.+-]+$/.test(raw.mime) ? raw.mime : "" } };
+  }
+  function btn(label) {
+    const b = document.createElement("button");
+    b.type = "button";
+    b.textContent = label;
+    b.style.cssText = "position:absolute;right:8px;bottom:8px;z-index:2;padding:4px 10px;border:0;border-radius:999px;background:rgba(0,0,0,.65);color:#fff;font:600 12px/1.4 system-ui,sans-serif;cursor:pointer";
+    return b;
+  }
+  function renderVideo(container, ad, { onClick, onEvent, onError } = {}) {
+    const wrap = document.createElement("div");
+    wrap.className = "ual-video";
+    wrap.style.cssText = `position:relative;display:block;margin:0 auto;width:${ad.width}px;max-width:100%;aspect-ratio:${ad.width}/${ad.height};background:#000;overflow:hidden`;
+    const v = document.createElement("video");
+    v.muted = true;
+    v.defaultMuted = true;
+    v.playsInline = true;
+    v.setAttribute("playsinline", "");
+    v.preload = "metadata";
+    v.disablePictureInPicture = true;
+    v.controls = false;
+    v.style.cssText = "display:block;width:100%;height:100%;object-fit:contain";
+    if (ad.video.poster) v.poster = ad.video.poster;
+    const source = document.createElement("source");
+    source.src = ad.video.src;
+    if (ad.video.mime) source.type = ad.video.mime;
+    v.appendChild(source);
+    wrap.appendChild(v);
+    const label = document.createElement("span");
+    label.textContent = "Advertisement";
+    label.style.cssText = "position:absolute;left:8px;top:8px;z-index:2;padding:2px 6px;border-radius:4px;background:rgba(0,0,0,.55);color:#fff;font:600 11px/1.4 system-ui,sans-serif";
+    wrap.appendChild(label);
+    if (ad.clickUrl) {
+      const a = document.createElement("a");
+      a.href = ad.clickUrl;
+      a.target = "_blank";
+      a.rel = "noopener noreferrer sponsored nofollow";
+      a.setAttribute("aria-label", "Open the advertiser page");
+      a.style.cssText = "position:absolute;inset:0;z-index:1";
+      a.addEventListener("click", () => {
+        if (onClick) onClick();
+      });
+      wrap.appendChild(a);
+    }
+    const sound = btn("Sound on");
+    sound.setAttribute("aria-label", "Turn sound on");
+    sound.addEventListener("click", () => {
+      v.muted = !v.muted;
+      sound.textContent = v.muted ? "Sound on" : "Sound off";
+      sound.setAttribute("aria-label", v.muted ? "Turn sound on" : "Turn sound off");
+    });
+    wrap.appendChild(sound);
+    const trackers = ad.trackers || {};
+    const fired = /* @__PURE__ */ new Set();
+    let started = false;
+    const emit = (name, urls) => {
+      fire(urls);
+      if (onEvent) onEvent(name);
+    };
+    v.addEventListener("playing", () => {
+      if (!started) {
+        started = true;
+        emit("start", trackers.start);
+      }
+    });
+    v.addEventListener("timeupdate", () => {
+      quartileHits(fired, v.currentTime, v.duration).forEach((n) => emit(n, trackers.quartile && trackers.quartile[n]));
+    });
+    v.addEventListener("ended", () => {
+      quartileHits(fired, v.duration, v.duration).forEach((n) => emit(n, trackers.quartile && trackers.quartile[n]));
+      if (!fired.has("complete")) {
+        fired.add("complete");
+        emit("complete", trackers.quartile && trackers.quartile.complete);
+      }
+    });
+    v.addEventListener("error", () => {
+      if (onError) onError(new Error("video: file non riproducibile"));
+    });
+    let inView = false;
+    const sync = () => {
+      if (v.ended) return;
+      if (inView && document.visibilityState === "visible") {
+        const p = v.play();
+        if (p && p.catch) p.catch(() => {
+        });
+      } else v.pause();
+    };
+    const io = "IntersectionObserver" in window ? new IntersectionObserver((entries) => {
+      entries.forEach((en) => {
+        inView = en.intersectionRatio >= PLAY_THRESHOLD;
+      });
+      sync();
+    }, { threshold: [0, PLAY_THRESHOLD, 1] }) : null;
+    if (io) io.observe(wrap);
+    document.addEventListener("visibilitychange", sync);
+    container.innerHTML = "";
+    container.appendChild(wrap);
+    return {
+      el: wrap,
+      destroy: () => {
+        if (io) io.disconnect();
+        document.removeEventListener("visibilitychange", sync);
+        v.pause();
+        v.removeAttribute("src");
+        source.remove();
+        v.load();
+        wrap.remove();
+      }
+    };
+  }
+
   // src/core/render.js
   var DEFAULT_SANDBOX = "allow-scripts allow-popups allow-popups-to-escape-sandbox";
   var MAX_DIM = 2e3;
@@ -294,12 +535,20 @@
   function cleanList(list) {
     return (Array.isArray(list) ? list : []).map((u) => safeUrl(u)).filter(Boolean);
   }
+  function cleanCustom(custom) {
+    const out = {};
+    if (!custom || typeof custom !== "object") return out;
+    Object.keys(custom).slice(0, 20).forEach((name) => {
+      if (/^[\w-]{1,40}$/.test(name)) out[name] = cleanList(custom[name]);
+    });
+    return out;
+  }
   function normalizeAd(raw) {
     if (!raw || typeof raw !== "object") return { ok: false, reason: "annuncio non valido" };
     const type = raw.type || (raw.url ? "url" : raw.src ? "image" : "html");
     const width = dim(raw.width);
     const height = dim(raw.height);
-    if (!width || !height) return { ok: false, reason: `dimensioni non valide (${raw.width}x${raw.height}, max ${MAX_DIM})` };
+    if (type !== "native" && (!width || !height)) return { ok: false, reason: `dimensioni non valide (${raw.width}x${raw.height}, max ${MAX_DIM})` };
     const t = raw.trackers || {};
     const ad = {
       type,
@@ -307,7 +556,14 @@
       height,
       alt: raw.alt == null ? void 0 : String(raw.alt),
       clickUrl: safeUrl(raw.clickUrl) || "",
-      trackers: { impression: cleanList(t.impression), viewable: cleanList(t.viewable), click: cleanList(t.click) },
+      trackers: {
+        impression: cleanList(t.impression),
+        viewable: cleanList(t.viewable),
+        click: cleanList(t.click),
+        start: cleanList(t.start),
+        quartile: Object.fromEntries(QUARTILE_NAMES.map((n) => [n, cleanList(t.quartile && t.quartile[n])])),
+        custom: cleanCustom(t.custom)
+      },
       sandbox: typeof raw.sandbox === "string" ? raw.sandbox : void 0
     };
     if (type === "image") {
@@ -319,6 +575,14 @@
     } else if (type === "html") {
       if (typeof raw.html !== "string" || !raw.html) return { ok: false, reason: "html mancante" };
       ad.html = raw.html;
+    } else if (type === "native") {
+      const n = normalizeNative(raw.native, safeUrl);
+      if (!n.ok) return n;
+      ad.native = n.native;
+    } else if (type === "video") {
+      const v = normalizeVideo(raw, safeUrl);
+      if (!v.ok) return v;
+      ad.video = v.video;
     } else {
       return { ok: false, reason: "tipo sconosciuto: " + type };
     }
@@ -353,7 +617,8 @@ window.UALExt={
   expand:function(w,h){s({cmd:'resize',w:w,h:h,expanded:true});},
   collapse:function(){s({cmd:'collapse'});},
   close:function(){s({cmd:'close'});},
-  click:function(){s({cmd:'click'});if(window.clickTag)window.open(window.clickTag,'_blank');}
+  click:function(){s({cmd:'click'});if(window.clickTag)window.open(window.clickTag,'_blank');},
+  track:function(n){s({cmd:'track',name:String(n)});}
 };
 })();<\/script>`;
   }
@@ -396,6 +661,11 @@ window.UALExt={
         fire(ad.trackers && ad.trackers.click);
         if (onClick) onClick();
       },
+      // UALExt.track(nome): solo i nomi dichiarati dall'ad server nella risposta
+      onTrack: (name) => {
+        const custom = ad.trackers && ad.trackers.custom;
+        if (typeof name === "string" && custom && Object.hasOwn(custom, name)) fire(custom[name]);
+      },
       onClose
     });
     container.innerHTML = "";
@@ -431,12 +701,42 @@ window.UALExt={
       case "click":
         f.onClick();
         break;
+      case "track":
+        f.onTrack(d.name);
+        break;
       default:
     }
   }
 
+  // src/core/sticky.js
+  var STICKY_MAX_SCREEN_SHARE = 0.3;
+  var STICKY_POSITIONS = ["bottom", "top"];
+  function stickyAllowed(adHeight, viewportHeight) {
+    return adHeight > 0 && viewportHeight > 0 && adHeight <= viewportHeight * STICKY_MAX_SCREEN_SHARE;
+  }
+  function stickyPosition(cfg) {
+    if (!cfg) return null;
+    const p = typeof cfg === "string" ? cfg : cfg && typeof cfg === "object" ? cfg.position : "bottom";
+    return STICKY_POSITIONS.includes(p) ? p : "bottom";
+  }
+  function applySticky(el2, position, onClose) {
+    const saved = el2.style.cssText;
+    el2.style.cssText += `;position:fixed;left:0;right:0;${position}:0;z-index:2147483000;text-align:center;margin:0;padding:0`;
+    const close = document.createElement("button");
+    close.type = "button";
+    close.textContent = "\xD7";
+    close.setAttribute("aria-label", "Close advertisement");
+    close.style.cssText = `position:absolute;right:6px;${position === "bottom" ? "top" : "bottom"}:-26px;width:26px;height:26px;border:0;border-radius:6px 6px 0 0;background:rgba(0,0,0,.7);color:#fff;font:16px/26px system-ui,sans-serif;cursor:pointer`;
+    close.addEventListener("click", onClose);
+    el2.appendChild(close);
+    return () => {
+      el2.style.cssText = saved;
+      close.remove();
+    };
+  }
+
   // src/core/viewability.js
-  function watchViewability(el, { threshold = 0.5, durationMs = 1e3 } = {}, onViewable) {
+  function watchViewability(el2, { threshold = 0.5, durationMs = 1e3 } = {}, onViewable) {
     if (!("IntersectionObserver" in window)) return () => {
     };
     let timer = null;
@@ -463,7 +763,7 @@ window.UALExt={
     }, { threshold: [0, threshold, 1] });
     const onVis = () => document.visibilityState === "visible" && inView ? start() : stop();
     document.addEventListener("visibilitychange", onVis);
-    io.observe(el);
+    io.observe(el2);
     function cleanup() {
       stop();
       io.disconnect();
@@ -557,50 +857,50 @@ window.UALExt={
     function scan(root) {
       const list = [];
       if (root.nodeType === 1 && root.matches && root.matches("[data-ad-slot]")) list.push(root);
-      if (root.querySelectorAll) root.querySelectorAll("[data-ad-slot]").forEach((el) => list.push(el));
+      if (root.querySelectorAll) root.querySelectorAll("[data-ad-slot]").forEach((el2) => list.push(el2));
       list.forEach(maybeRegister);
     }
-    function maybeRegister(el) {
-      const id = el.dataset.ualId;
-      if (!id) return register(el);
+    function maybeRegister(el2) {
+      const id = el2.dataset.ualId;
+      if (!id) return register(el2);
       if (slots.has(id)) return;
-      if (FINAL_STATUS.has(el.dataset.ualStatus)) return;
-      resetEl(el);
-      register(el);
+      if (FINAL_STATUS.has(el2.dataset.ualStatus)) return;
+      resetEl(el2);
+      register(el2);
     }
-    function resetEl(el) {
-      delete el.dataset.ualId;
-      delete el.dataset.ualStatus;
-      el.querySelectorAll(":scope > .ual-label, :scope > .ual-creative").forEach((n) => n.remove());
-      el.classList.remove("ual-slot", "ual-filled");
-      el.style.display = "";
-      el.style.minHeight = "";
+    function resetEl(el2) {
+      delete el2.dataset.ualId;
+      delete el2.dataset.ualStatus;
+      el2.querySelectorAll(":scope > .ual-label, :scope > .ual-creative").forEach((n) => n.remove());
+      el2.classList.remove("ual-slot", "ual-filled");
+      el2.style.display = "";
+      el2.style.minHeight = "";
     }
-    function register(el) {
-      const name = el.getAttribute("data-ad-slot");
+    function register(el2) {
+      const name = el2.getAttribute("data-ad-slot");
       const slotCfg = cfg.slots[name];
-      el.dataset.ualId = name + "#" + ++seq2;
+      el2.dataset.ualId = name + "#" + ++seq2;
       if (!slotCfg) {
         log("Slot non configurato, ignorato:", name);
-        el.dataset.ualStatus = "unconfigured";
+        el2.dataset.ualStatus = "unconfigured";
         return;
       }
       if (slotCfg.enabled === false) {
         log("Slot disabilitato:", name);
-        el.dataset.ualStatus = "disabled";
-        collapse(el, slotCfg);
+        el2.dataset.ualStatus = "disabled";
+        collapse(el2, slotCfg);
         return;
       }
       let params = {};
       try {
-        params = el.dataset.adParams ? JSON.parse(el.dataset.adParams) : {};
+        params = el2.dataset.adParams ? JSON.parse(el2.dataset.adParams) : {};
       } catch (e) {
-        warn("data-ad-params non \xE8 JSON valido", el);
+        warn("data-ad-params non \xE8 JSON valido", el2);
       }
       const slot = {
-        instanceId: el.dataset.ualId,
+        instanceId: el2.dataset.ualId,
         name,
-        el,
+        el: el2,
         cfg: slotCfg,
         params,
         status: "idle",
@@ -612,23 +912,23 @@ window.UALExt={
       prepare(slot);
       bus.emit("slotRegistered", publicSlot(slot));
       const lazy = slotCfg.lazy !== void 0 ? slotCfg.lazy : cfg.lazy.enabled;
-      if (lazy && lazyIO) lazyIO.observe(el);
+      if (lazy && lazyIO) lazyIO.observe(el2);
       else enqueue(slot);
     }
     function prepare(slot) {
-      const { el, cfg: c } = slot;
-      if (c.minHeight) el.style.minHeight = c.minHeight + "px";
-      el.classList.add("ual-slot");
+      const { el: el2, cfg: c } = slot;
+      if (c.minHeight) el2.style.minHeight = c.minHeight + "px";
+      el2.classList.add("ual-slot");
       if (c.label) {
         const l = document.createElement("div");
         l.className = "ual-label";
         l.textContent = c.label;
         l.style.cssText = "font:10px/1.4 sans-serif;color:#888;text-align:center;text-transform:uppercase;letter-spacing:.05em";
-        el.appendChild(l);
+        el2.appendChild(l);
       }
       const box = document.createElement("div");
       box.className = "ual-creative";
-      el.appendChild(box);
+      el2.appendChild(box);
       slot.box = box;
     }
     function observeDom() {
@@ -753,7 +1053,7 @@ window.UALExt={
           const res = await withTimeout(adapter.request(req, pcfg, c), timeout, {});
           group.forEach((s, i) => {
             const raw = res[req[i].id];
-            if (!raw || !raw.html && !raw.src && !raw.url) {
+            if (!raw || !raw.html && !raw.src && !raw.url && !raw.native) {
               unfilled.push(s);
               return;
             }
@@ -765,14 +1065,18 @@ window.UALExt={
               return;
             }
             const ad = n.ad;
-            const handle = renderInFrame(s.box, ad, {
+            const onClick = () => {
+              fire(ad.trackers.click);
+              bus.emit("slotClick", publicSlot(s));
+            };
+            const handle = ad.type === "native" ? renderNative(s.box, ad, { onClick }) : ad.type === "video" ? renderVideo(s.box, ad, {
+              onClick,
+              onEvent: (name) => bus.emit("videoEvent", { ...publicSlot(s), event: name }),
+              onError: (error) => bus.emit("error", { provider: pid, slot: s.name, error })
+            }) : renderInFrame(s.box, ad, {
               slotId: s.instanceId,
               onClick: () => bus.emit("slotClick", publicSlot(s)),
-              onClose: () => {
-                destroySlot(s);
-                s.el.dataset.ualStatus = "closed";
-                collapse(s.el, s.cfg, true);
-              }
+              onClose: () => closeSlot(s)
             });
             s.cleanup.push(handle.destroy);
             fire(ad.trackers.impression);
@@ -799,6 +1103,14 @@ window.UALExt={
       s.el.style.display = "";
       bus.emit("slotRendered", { ...publicSlot(s), width: info.width, height: info.height, meta: info.meta });
       const vcfg = { ...cfg.viewability, ...s.cfg.viewability };
+      if (info.ad && info.ad.type === "video" && !(s.cfg.viewability && s.cfg.viewability.durationMs !== void 0)) {
+        vcfg.durationMs = Math.max(vcfg.durationMs, 2e3);
+      }
+      const pos = stickyPosition(s.cfg.sticky);
+      if (pos && info.height) {
+        if (stickyAllowed(info.height, window.innerHeight)) s.cleanup.push(applySticky(s.el, pos, () => closeSlot(s)));
+        else warn(`Slot "${s.name}": sticky ignorato, l'annuncio (${info.height}px) supera il 30% dello schermo`);
+      }
       const area = (info.width || 0) * (info.height || 0);
       if (area > LARGE_AD_AREA && !(s.cfg.viewability && s.cfg.viewability.threshold !== void 0)) {
         vcfg.threshold = Math.min(vcfg.threshold, 0.3);
@@ -818,11 +1130,11 @@ window.UALExt={
       collapse(s.el, s.cfg);
       bus.emit("slotEmpty", publicSlot(s));
     }
-    function collapse(el, c, force) {
+    function collapse(el2, c, force) {
       const doCollapse = force || (c.collapseEmpty !== void 0 ? c.collapseEmpty : cfg && cfg.collapseEmpty);
       if (doCollapse) {
-        el.style.display = "none";
-        el.style.minHeight = "";
+        el2.style.display = "none";
+        el2.style.minHeight = "";
       }
     }
     function clear(s) {
@@ -870,6 +1182,11 @@ window.UALExt={
       s.consentSkipped = false;
       enqueue(s);
     }
+    function closeSlot(s) {
+      destroySlot(s);
+      s.el.dataset.ualStatus = "closed";
+      collapse(s.el, s.cfg, true);
+    }
     function destroySlot(s) {
       callDestroy(s);
       clear(s);
@@ -1234,7 +1551,7 @@ window.UALExt={
   };
 
   // src/lib.js
-  var version = true ? "0.1.1" : "dev";
+  var version = true ? "0.2.0" : "dev";
   function createUal() {
     const registry = new Map(Object.entries({
       json: json_default,