js-cloudimage-hotspot 1.1.9 → 1.1.11

package/dist/js-cloudimage-hotspot.esm.js

@@ -15,7 +15,8 @@ const et = {
   markerTheme: "default",
   brandColor: "#00aaff",
   fullscreenButton: !0,
-  zoomControlsPosition: "bottom-right"
+  zoomControlsPosition: "bottom-right",
+  popoverTextAlign: "left"
 }, ot = {
   "data-ci-hotspot-src": { key: "src", type: "string" },
   "data-ci-hotspot-alt": { key: "alt", type: "string" },
@@ -43,7 +44,8 @@ const et = {
   "data-ci-hotspot-marker-theme": { key: "markerTheme", type: "string" },
   "data-ci-hotspot-brand-color": { key: "brandColor", type: "string" },
   "data-ci-hotspot-fullscreen-button": { key: "fullscreenButton", type: "boolean" },
-  "data-ci-hotspot-zoom-controls-position": { key: "zoomControlsPosition", type: "string" }
+  "data-ci-hotspot-zoom-controls-position": { key: "zoomControlsPosition", type: "string" },
+  "data-ci-hotspot-popover-text-align": { key: "popoverTextAlign", type: "string" }
 };
 function it(s) {
   const t = {}, e = {};
@@ -908,7 +910,7 @@ const Wt = '.ci-hotspot-container{--ci-hotspot-marker-size: 24px;--ci-hotspot-ma
   applyTheme() {
     this.config.theme === "dark" ? u(this.containerEl, "ci-hotspot-theme-dark") : v(this.containerEl, "ci-hotspot-theme-dark");
     const t = this.config.markerTheme && this.config.markerTheme !== "default" ? this.config.markerTheme : this.config.invertMarkerTheme ? "inverted" : "default";
-    v(this.containerEl, "ci-hotspot-marker-inverted"), v(this.containerEl, "ci-hotspot-marker-brand"), this.containerEl.style.removeProperty("--ci-hotspot-brand-color"), t === "inverted" ? u(this.containerEl, "ci-hotspot-marker-inverted") : t === "brand" && u(this.containerEl, "ci-hotspot-marker-brand"), this.config.brandColor && this.containerEl.style.setProperty("--ci-hotspot-brand-color", this.config.brandColor);
+    v(this.containerEl, "ci-hotspot-marker-inverted"), v(this.containerEl, "ci-hotspot-marker-brand"), this.containerEl.style.removeProperty("--ci-hotspot-brand-color"), t === "inverted" ? u(this.containerEl, "ci-hotspot-marker-inverted") : t === "brand" && u(this.containerEl, "ci-hotspot-marker-brand"), this.config.brandColor && this.containerEl.style.setProperty("--ci-hotspot-brand-color", this.config.brandColor), this.config.popoverTextAlign ? this.containerEl.style.setProperty("--ci-hotspot-popover-text-align", this.config.popoverTextAlign) : this.containerEl.style.removeProperty("--ci-hotspot-popover-text-align");
   }
   setupImage() {
     const t = () => {
@@ -1001,13 +1003,13 @@ const Wt = '.ci-hotspot-container{--ci-hotspot-marker-size: 24px;--ci-hotspot-ma
     });
     this.popovers.set(t.id, l), l.mount(this.containerEl, n), this.bindTrigger(t, n, l, r), r === "load" && this.imageLoaded && (this.closeAll(), l.show(), m(n, !0), this.ensureFocusTrap(t.id, l.element, n), (d = this.focusTraps.get(t.id)) == null || d.activate());
   }
-  /** For navigateTo hotspots without explicit data/content, generate popover content from the destination scene */
+  /** For navigateTo hotspots without explicit data/content, generate popover content from the destination scene or label */
   enrichNavigateHotspot(t) {
     if (t.data || t.content) return t;
-    const e = this.scenesMap.get(t.navigateTo);
-    return e ? {
+    const e = this.scenesMap.get(t.navigateTo), o = t.label || (e == null ? void 0 : e.alt) || (e == null ? void 0 : e.id);
+    return o ? {
       ...t,
-      data: { title: t.label || e.alt || e.id }
+      data: { title: o }
     } : t;
   }
   bindNavigateTrigger(t, e, o) {