@seatlayer/js 0.21.0 → 0.22.0

package/dist/index.cjs

@@ -360,6 +360,7 @@ var TYPES = /* @__PURE__ */ new Set([
   "seatlayer.designer.error"
 ]);
 var DEFAULT_LOADING_TIMEOUT_MS = 2e4;
+var DEFAULT_MIN_FILL_HEIGHT = 480;
 function resolveContainer2(container) {
   if (typeof container !== "string") return container;
   const element = document.querySelector(container);
@@ -407,12 +408,23 @@ var EmbeddedDesigner = class {
     this.fsKeyHandler = null;
     /** Latest height (px string) the Designer reported; re-applied after unpin. */
     this.lastAutoHeight = "";
+    // Viewport-fill sizing: pending rAF handle + whether listeners are attached.
+    this.fillRaf = null;
+    this.fillListening = false;
+    /** rAF-throttled fill recompute, so a burst of scroll/resize ticks coalesces. */
+    this.scheduleFill = () => {
+      if (this.fillRaf !== null) return;
+      this.fillRaf = requestAnimationFrame(() => {
+        this.fillRaf = null;
+        this.applyFill();
+      });
+    };
     this.handleMessage = (event) => {
       if (!this.frame || event.origin !== this.designerOrigin || event.source !== this.frame.contentWindow) return;
       if (!event.data || typeof event.data !== "object") return;
       const data = event.data;
       if (data.type === "seatlayer.designer.resize") {
-        if (this.autoResizeEnabled() && typeof data.px === "number" && Number.isFinite(data.px) && data.px > 0) {
+        if (!this.fillEnabled() && this.autoResizeEnabled() && typeof data.px === "number" && Number.isFinite(data.px) && data.px > 0) {
           this.lastAutoHeight = `${Math.round(data.px)}px`;
           if (!this.pinned) this.frame.style.height = this.lastAutoHeight;
         }
@@ -470,11 +482,11 @@ var EmbeddedDesigner = class {
     this.designerOrigin = url.origin;
     const frame = document.createElement("iframe");
     frame.title = this.options.title ?? "Venue chart Designer";
-    frame.allow = this.options.allow ?? "clipboard-write";
+    frame.allow = this.options.allow ?? "fullscreen; clipboard-write";
     frame.referrerPolicy = this.options.referrerPolicy ?? "origin";
     frame.src = url.toString();
     frame.style.width = "100%";
-    frame.style.height = "100%";
+    frame.style.height = typeof this.options.height === "number" ? `${this.options.height}px` : "100%";
     frame.style.border = "0";
     Object.assign(frame.style, this.options.style);
     if (this.options.className) frame.className = this.options.className;
@@ -482,6 +494,7 @@ var EmbeddedDesigner = class {
     window.addEventListener("message", this.handleMessage);
     container.append(frame);
     this.frame = frame;
+    if (this.fillEnabled()) this.startFill();
     this.phase = "loading";
     if (this.loadingStateEnabled()) {
       this.ensureContainerPositioned(container);
@@ -505,6 +518,7 @@ var EmbeddedDesigner = class {
   }
   destroy() {
     window.removeEventListener("message", this.handleMessage);
+    this.stopFill();
     this.unpinFullscreen();
     this.clearTimeoutTimer();
     this.removeOverlay();
@@ -521,6 +535,41 @@ var EmbeddedDesigner = class {
   autoResizeEnabled() {
     return this.options.autoResize !== false;
   }
+  /** Fill mode is the default; a numeric `height` opts into a fixed pixel box. */
+  fillEnabled() {
+    return typeof this.options.height !== "number";
+  }
+  /**
+   * Size the iframe so its bottom edge meets the bottom of the viewport
+   * (`window.innerHeight - top`), clamped to `minHeight`. No-op while pinned
+   * fullscreen (the pin fills the viewport itself).
+   */
+  applyFill() {
+    if (!this.frame || this.pinned) return;
+    const min = this.options.minHeight ?? DEFAULT_MIN_FILL_HEIGHT;
+    const top = this.frame.getBoundingClientRect().top;
+    const target = Math.max(min, Math.round(window.innerHeight - top));
+    this.frame.style.height = `${target}px`;
+  }
+  startFill() {
+    this.applyFill();
+    if (this.fillListening) return;
+    this.fillListening = true;
+    window.addEventListener("resize", this.scheduleFill);
+    window.addEventListener("orientationchange", this.scheduleFill);
+    window.addEventListener("scroll", this.scheduleFill, { passive: true });
+  }
+  stopFill() {
+    if (this.fillRaf !== null) {
+      cancelAnimationFrame(this.fillRaf);
+      this.fillRaf = null;
+    }
+    if (!this.fillListening) return;
+    this.fillListening = false;
+    window.removeEventListener("resize", this.scheduleFill);
+    window.removeEventListener("orientationchange", this.scheduleFill);
+    window.removeEventListener("scroll", this.scheduleFill);
+  }
   /**
    * Pin the iframe over the host page as a viewport-filling overlay. We save the
    * iframe's inline style and the document scroll state so `unpinFullscreen`
@@ -559,7 +608,8 @@ var EmbeddedDesigner = class {
     if (this.frame) {
       if (this.frameStyleBeforeFs === null) this.frame.removeAttribute("style");
       else this.frame.setAttribute("style", this.frameStyleBeforeFs);
-      if (this.autoResizeEnabled() && this.lastAutoHeight) this.frame.style.height = this.lastAutoHeight;
+      if (this.fillEnabled()) this.applyFill();
+      else if (this.autoResizeEnabled() && this.lastAutoHeight) this.frame.style.height = this.lastAutoHeight;
     }
     this.frameStyleBeforeFs = null;
     if (this.docOverflowBeforeFs !== null) {
@@ -862,6 +912,11 @@ var CSS = `
 .sl-picker[data-layout="narrow"][data-has-selection="true"] .sl-filtersec,
 .sl-picker[data-layout="narrow"][data-has-selection="true"] .sl-filters,
 .sl-picker[data-layout="narrow"][data-has-selection="true"] .sl-prices-sec{display:none}
+/* Reclaim the bottom sheet once the cart has anything: the "Find best seats"
+   panel collapses too. EXCEPT the confirm ("Replace your current choices?") and
+   in-flight busy states, which legitimately show with a non-empty cart \u2014 those
+   set data-ba-active="true" (see setAttribute alongside data-has-selection). */
+.sl-picker[data-layout="narrow"][data-has-selection="true"]:not([data-ba-active="true"]) .sl-ba{display:none}
 /* touch chrome: pinch-zoom exists \u2014 hide +/\u2212 on the sheet layout (keep fit) */
 .sl-picker[data-layout="narrow"] .sl-zoom [data-ref="zin"],
 .sl-picker[data-layout="narrow"] .sl-zoom [data-ref="zout"]{display:none}
@@ -2712,6 +2767,7 @@ var SeatPicker = class _SeatPicker {
     if (narrow) {
       card.className = "sl-seccard strip on";
       card.setAttribute("role", "status");
+      card.setAttribute("aria-label", (0, import_core2.t)("picker.sectionSummaryAria", { label: summary.label }));
       card.innerHTML = `<span class="sl-seccard-dot" style="background:${summary.color}"></span><span class="sl-seccard-name">${summary.label}</span><span class="sl-seccard-left">${leftLabel}</span>` + (summary.categories.length ? `<span class="sl-seccard-price">${priceLabel}</span>` : "") + xBtn;
       card.querySelector(".sl-seccard-x").addEventListener("click", () => this.controller.overview());
       (this.els.sheetHead ?? this.els.side ?? this.els.map).appendChild(card);
@@ -3122,7 +3178,7 @@ var SeatPicker = class _SeatPicker {
     } else if (!seats.length && !heldItems.length) {
       parts.push(`<div class="sl-tray-hint">Tap a seat on the map \u2014 or grab standing tickets below.</div>`);
     }
-    const noPicks = !seats.length && !heldItems.length;
+    const noPicks = !seats.length && !heldItems.length && !this.pendingGACount();
     if (!this.hold && (noPicks || this.bestAvailableBusy || this.bestAvailableConfirm)) {
       const cats = this.controller.doc?.categories ?? [];
       parts.push(this.bestAvailableConfirm ? `<div class="sl-ba" role="alert"><div class="sl-ba-title"><span class="spark" aria-hidden="true">\u2726</span>Replace your current choices?</div><div class="sl-ba-replace"><b>We\u2019ll find ${this.baQty} seats together.</b><span>Your manually selected tickets will be removed only after a new group is secured.</span></div><div class="sl-ba-actions"><button type="button" data-ba-cancel>Keep mine</button><button type="button" class="replace" data-ba-replace>Find new seats</button></div></div>` : `<div class="sl-ba"><div class="sl-ba-title"><span class="spark" aria-hidden="true">\u2726</span>Find the best seats together</div><div class="sl-ba-copy"><span class="wide">We\u2019ll choose the closest available group for you.</span><span class="narrow">Closest available group, chosen instantly.</span></div>` + (cats.length > 1 ? `<select aria-label="Preferred ticket type" data-ba-cat><option value="">Any ticket type</option>` + cats.map((c) => `<option value="${c.key}"${this.baCat === c.key ? " selected" : ""}>${c.label}</option>`).join("") + `</select>` : `<span aria-hidden="true"></span>`) + `<div class="sl-ba-qty"><button type="button" data-ba="-1" aria-label="Fewer seats">\u2212</button><span>${this.baQty}</span><button type="button" data-ba="1" aria-label="More seats">+</button></div><button type="button" class="sl-ba-go"${this.bestAvailableBusy ? " disabled" : ""}>` + (this.bestAvailableBusy ? `<span class="sl-ba-spin" aria-hidden="true"></span>Finding the best seats\u2026` : `Find ${this.baQty} best ${this.baQty === 1 ? "seat" : "seats"}`) + `</button></div>`);
@@ -3266,6 +3322,10 @@ var SeatPicker = class _SeatPicker {
     this.els.count.textContent = count ? `${count} ${count === 1 ? "ticket" : "tickets"}` : "No seats selected";
     this.els.total.textContent = count ? this.money(total) : "";
     this.root?.setAttribute("data-has-selection", String(count > 0));
+    this.root?.setAttribute(
+      "data-ba-active",
+      String(this.bestAvailableConfirm || this.bestAvailableBusy)
+    );
     this.els.foot?.classList.toggle("empty", count === 0);
     if (this.els.seatSummary) {
       this.els.seatSummary.textContent = count ? `${count} selected` : "";