js-cloudimage-hotspot 1.1.9 → 1.1.11

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

@@ -67,7 +67,8 @@ const nt = {
   markerTheme: "default",
   brandColor: "#00aaff",
   fullscreenButton: !0,
-  zoomControlsPosition: "bottom-right"
+  zoomControlsPosition: "bottom-right",
+  popoverTextAlign: "left"
 }, at = {
   "data-ci-hotspot-src": { key: "src", type: "string" },
   "data-ci-hotspot-alt": { key: "alt", type: "string" },
@@ -95,7 +96,8 @@ const nt = {
   "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 ct(n) {
   const t = {}, e = {};
@@ -927,7 +929,7 @@ const ot = '.ci-hotspot-container{--ci-hotspot-marker-size: 24px;--ci-hotspot-ma
   applyTheme() {
     this.config.theme === "dark" ? m(this.containerEl, "ci-hotspot-theme-dark") : b(this.containerEl, "ci-hotspot-theme-dark");
     const t = this.config.markerTheme && this.config.markerTheme !== "default" ? this.config.markerTheme : this.config.invertMarkerTheme ? "inverted" : "default";
-    b(this.containerEl, "ci-hotspot-marker-inverted"), b(this.containerEl, "ci-hotspot-marker-brand"), this.containerEl.style.removeProperty("--ci-hotspot-brand-color"), t === "inverted" ? m(this.containerEl, "ci-hotspot-marker-inverted") : t === "brand" && m(this.containerEl, "ci-hotspot-marker-brand"), this.config.brandColor && this.containerEl.style.setProperty("--ci-hotspot-brand-color", this.config.brandColor);
+    b(this.containerEl, "ci-hotspot-marker-inverted"), b(this.containerEl, "ci-hotspot-marker-brand"), this.containerEl.style.removeProperty("--ci-hotspot-brand-color"), t === "inverted" ? m(this.containerEl, "ci-hotspot-marker-inverted") : t === "brand" && m(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 = () => {
@@ -1020,13 +1022,13 @@ const ot = '.ci-hotspot-container{--ci-hotspot-marker-size: 24px;--ci-hotspot-ma
     });
     this.popovers.set(t.id, l), l.mount(this.containerEl, s), this.bindTrigger(t, s, l, a), a === "load" && this.imageLoaded && (this.closeAll(), l.show(), v(s, !0), this.ensureFocusTrap(t.id, l.element, s), (u = this.focusTraps.get(t.id)) == null || u.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), i = t.label || (e == null ? void 0 : e.alt) || (e == null ? void 0 : e.id);
+    return i ? {
       ...t,
-      data: { title: t.label || e.alt || e.id }
+      data: { title: i }
     } : t;
   }
   bindNavigateTrigger(t, e, i) {