@epigraph/solutions 0.0.2-alpha → 0.0.5-alpha

package/dist/HotspotsManager-mmFi8qV9.js

@@ -0,0 +1,1426 @@
+import { v as C, V as R, i as x, x as p, n as r, e as S, r as B, E as b, B as W } from "./three.module-CYfxkCtM.js";
+import { b as U, B as _, g as i, D as a, r as H } from "./baseUiComponent-_PPHqnvV.js";
+var M = /* @__PURE__ */ ((s) => (s.IMAGE = "image", s.VIDEO = "video", s))(M || {}), v = /* @__PURE__ */ ((s) => (s.LEFT = "left", s.RIGHT = "right", s))(v || {}), D = /* @__PURE__ */ ((s) => (s.DOTS = "DOTS", s))(D || {}), d = /* @__PURE__ */ ((s) => (s.expanded = "expanded", s.collapsed = "collapsed", s))(d || {});
+class T {
+  constructor({
+    config: t,
+    appWcRef: o,
+    hotspotManagerRef: n
+  }) {
+    this._cameraDirection = new C(), this.hotspotID = 0, this.header = {
+      preheadText: "",
+      headerText: "",
+      subheadText: "",
+      media: {
+        uri: "",
+        type: M.IMAGE,
+        mediaCaption: "",
+        altText: ""
+      }
+    }, this.carousel = {
+      // Limit to eight items in the mediaItems for carousel
+      mediaItems: [],
+      indicator: D.DOTS
+    }, this.details = "", this.position = new C(), this.normals = new C(0, 0, 0), this.screenPosition = new R(), this.camera = {
+      position: new C(),
+      target: new C(),
+      focalLength: 35
+    }, this.animation = [], this.desktopPlacement = v.LEFT, this.visited = !1, this.appWcRef = o, this.hotspotsManager = n, this.hotspotID = t.hotspotID, this.updateHotspotConfig(t);
+  }
+  static {
+    this.styles = x`
+        .hotspot-card {
+            width: 100%;
+        }
+
+        .hotspot-indicator {
+            position: absolute;
+            transform: translate(-50%, -50%);
+            transition: opacity 0.5s;
+        }
+
+        .hotspot-indicator.active {
+            opacity: 0.4;
+            pointer-events: none;
+        }
+
+        .hotspot-indicator.inactive {
+            opacity: 0 !important;
+            pointer-events: none !important;
+        }
+
+        .hotspot-indicator.occluded {
+            opacity: 0.3;
+        }
+    `;
+  }
+  _updateHotspotNormals() {
+    const t = new C();
+    this.appWcRef.dimensionsManager.getCurrentSceneBounds().getCenter(t), this.normals.subVectors(this.position, t);
+  }
+  updateHotspotConfig(t) {
+    this.header = t.header, this.carousel = t.carousel, this.details = t.details, this.position.set(t.position.x, t.position.y, t.position.z), this._updateHotspotNormals(), this.camera.position.set(t.camera.position.x, t.camera.position.y, t.camera.position.z), this.camera.target.set(t.camera.target.x, t.camera.target.y, t.camera.target.z), this.camera.focalLength = t.camera.focalLength, this.animation = t.animation, t.desktopPlacement && (this.desktopPlacement = t.desktopPlacement);
+  }
+  onHotspotClick() {
+    this.hotspotsManager.activeHotspot || (this.visited = !0, this.appWcRef.appEvents.hotspotClickedEvent.fire({ hotspot: this }));
+  }
+  _isFacingCamera() {
+    return this.appWcRef.cameraManager.cameras.main.getWorldDirection(this._cameraDirection), this.normals.angleTo(this._cameraDirection) > Math.PI / 2.2;
+  }
+  renderAnnotationTemplate(t) {
+    this.screenPosition = this.appWcRef.getScreenPositionFromWorld(this.position);
+    const o = t !== void 0 && t === this.hotspotID, n = t !== void 0 && t !== this.hotspotID;
+    let e = "top-left";
+    return this.screenPosition.y > this.appWcRef.getCanvasSize().height * 0.12 ? e = "top" : e = "bottom", this.screenPosition.x > this.appWcRef.getCanvasSize().width * 0.5 ? e += "-right" : e += "-left", p`
+            <epg-tool-hotspot 
+                class="hotspot-indicator ${n ? "inactive" : ""} ${this._isFacingCamera() ? "" : "occluded"}"
+                style="left: ${this.screenPosition.x}px; top: ${this.screenPosition.y}px"
+                hotspot-id=${this.hotspotID}
+                tooltip-label=${this.header.headerText}
+                tooltip-placement=${e}
+                ?active=${o}
+                ?visited=${this.visited}
+                @epgonclick=${this.onHotspotClick.bind(this)}
+                size="medium"
+            ></epg-tool-hotspot>
+        `;
+  }
+  renderCardTemplate() {
+    return p`
+            <epg-card 
+                class="hotspot-card" 
+                .data=${{ ...this }} 
+                .onNextHotspotButtonClick=${this.hotspotsManager.nextHotspot.bind(this.hotspotsManager)}
+                .onPrevHotspotButtonClick=${this.hotspotsManager.previousHotspot.bind(this.hotspotsManager)}
+            ></epg-card>
+        `;
+  }
+}
+const P = "epg-button", c = {
+  ...U,
+  ariaLabel: {
+    name: "aria-label",
+    defaultValue: "Button",
+    argType: {
+      control: "text"
+    }
+  },
+  label: {
+    name: "label",
+    defaultValue: "Button",
+    argType: {
+      control: "text"
+    }
+  },
+  isLoading: {
+    name: "is-loading",
+    defaultValue: !1,
+    argType: {
+      control: "boolean"
+    }
+  },
+  loadingLabel: {
+    name: "loading-label",
+    defaultValue: "Loading...",
+    argType: {
+      control: "string"
+    }
+  },
+  leftIcon: {
+    name: "left-icon",
+    defaultValue: "3d-select-solid",
+    argType: {
+      control: "text"
+    }
+  },
+  rightIcon: {
+    name: "right-icon",
+    defaultValue: "3d-select-solid",
+    argType: {
+      control: "text"
+    }
+  },
+  fullWidth: {
+    name: "full-width",
+    defaultValue: !1,
+    argType: {
+      control: "boolean"
+    }
+  },
+  tooltipPlacement: {
+    name: "tooltip-placement",
+    defaultValue: "none",
+    argType: {
+      control: "select",
+      options: [
+        "none",
+        "left",
+        "right",
+        "bottom-left",
+        "bottom-center",
+        "bottom-right",
+        "top-left",
+        "top-center",
+        "top-right"
+      ]
+    }
+  },
+  tooltipLabel: {
+    name: "tooltip-label",
+    defaultValue: "",
+    argType: {
+      control: "text"
+    }
+  }
+}, L = "epg-tool-hotspot", $ = {
+  label: {
+    name: "label",
+    defaultValue: "Tool Control"
+  },
+  active: {
+    name: "active"
+  },
+  visited: {
+    name: "visited"
+  },
+  togglable: {
+    name: "togglable"
+  },
+  tooltipLabel: {
+    defaultValue: "HOTSPOT LABEL"
+  }
+}, A = "epg-tooltip", I = {
+  placement: {
+    name: "placement",
+    defaultValue: "none"
+  },
+  theme: {
+    defaultValue: "dark"
+  }
+}, z = "epg-icon", O = {
+  iconName: {
+    name: "icon-name",
+    defaultValue: "trash"
+  }
+};
+var X = Object.defineProperty, V = (s, t, o, n) => {
+  for (var e = void 0, l = s.length - 1, h; l >= 0; l--)
+    (h = s[l]) && (e = h(t, o, e) || e);
+  return e && X(t, o, e), e;
+};
+class E extends _ {
+  constructor() {
+    super(...arguments), this.iconName = O.iconName.defaultValue.toString();
+  }
+  static {
+    this.styles = [
+      super.styles,
+      x`
+            :host {
+                display: inline-block;
+                vertical-align: middle;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                width: 50px;
+                height: 50px;
+                aspect-ratio: 1;
+            }
+
+            .icon-container {
+                width: 100%;
+                height: 100%;
+            }
+        `
+    ];
+  }
+  hide() {
+    this.style.display = "none";
+  }
+  /**
+   * Loads an SVG from URL and appends it is a child of this component.
+   *
+   * @returns
+   */
+  async loadSVG() {
+    if (!this.iconName) {
+      this.hide();
+      return;
+    }
+    try {
+      const t = this._iconContainerRef;
+      if (!t) {
+        this.hide();
+        return;
+      }
+      const o = await fetch(
+        `https://asset.myepigraph.com/design-assets/icons/${this.iconName}.svg`
+      );
+      if (!o.ok) {
+        this.hide();
+        return;
+      }
+      let n = await o.text();
+      n = n.replace(
+        /stroke="#?[0-9A-Fa-f]{3,6}"/g,
+        'stroke="currentColor"'
+      ), n = n.replace(/fill="#?[0-9A-Fa-f]{3,6}"/g, 'fill="currentColor"'), t.innerHTML = n;
+      const e = t.querySelector("svg");
+      e && (e.setAttribute("width", "100%"), e.setAttribute("height", "100%"), e.setAttribute("role", "img"), e.setAttribute("aria-hidden", this.iconName ? "false" : "true"), e.setAttribute("aria-label", this.iconName));
+    } catch (t) {
+      window.epigraph.logger.error(`Error loading SVG: ${this.iconName}`, t), this.hide();
+    }
+  }
+  updated(t) {
+    t.has("iconName") && this.loadSVG();
+  }
+  render() {
+    return p`
+            <div
+                id="iconContainer"
+                class="icon-container"
+                role="img"
+                aria-hidden="${this.iconName ? "false" : "true"}"
+                aria-label="${this.iconName || ""}"
+            ></div>
+        `;
+  }
+}
+V([
+  r({ type: String, attribute: O.iconName.name })
+], E.prototype, "iconName");
+V([
+  S("#iconContainer")
+], E.prototype, "_iconContainerRef");
+window.customElements.get(z) || window.customElements.define(z, E);
+var j = Object.defineProperty, Y = (s, t, o, n) => {
+  for (var e = void 0, l = s.length - 1, h; l >= 0; l--)
+    (h = s[l]) && (e = h(t, o, e) || e);
+  return e && j(t, o, e), e;
+};
+class F extends _ {
+  constructor() {
+    super(...arguments), this.placement = I.placement.defaultValue.toString(), this.theme = I.theme.defaultValue.toString();
+  }
+  static {
+    this.styles = [
+      super.styles,
+      x`
+            :host {
+                --pointer-side-margin: 15px;
+                display: flex;
+                flex-direction: row;
+                font-size: 16px;
+                font-style: normal;
+                font-weight: 500;
+                align-items: center;
+                justify-content: center;
+                border-radius: 6px;
+                position: relative;
+                user-select: none;
+                width: fit-content;
+                white-space: nowrap;
+                filter: drop-shadow(0px 0px 4px rgba(50, 50, 0, 0.5));
+            }
+
+            :host([disabled]) {
+                display: none;
+            }
+
+            :host([theme="light"]) {
+                --tooltip-background-color: #fff;
+                --tooltip-color: ${i(a.Color.Text.NeutralSecondary.$value)};
+            }
+
+            :host([theme="dark"]) {
+                --tooltip-background-color: #6d6d6e;
+                --tooltip-color: ${i(a.Color.Text.Invert.$value)};
+            }
+
+            :host([placement="left"]) {
+                flex-direction: row-reverse;
+
+                .pointer {
+                    transform: rotate(-90deg);
+                }
+            }
+
+            :host([placement="right"]) {
+                flex-direction: row;
+
+                .pointer {
+                    transform: rotate(90deg);
+                }
+            }
+
+            :host([placement="bottom-left"]) {
+                flex-direction: column;
+                
+                .pointer {
+                    align-self: flex-start;
+                    transform: rotate(180deg);
+                    margin-left: var(--pointer-side-margin);
+                }
+            }
+
+            :host([placement="bottom-center"]) {
+                flex-direction: column;
+
+                .pointer {
+                    align-self: center;
+                    transform: rotate(180deg);
+                }
+            }
+
+            :host([placement="bottom-right"]) {
+                flex-direction: column;
+                
+                .pointer {
+                    align-self: flex-end;
+                    transform: rotate(180deg);
+                    margin-right: var(--pointer-side-margin);
+                }
+            }
+
+            :host([placement="top-left"]) {
+                flex-direction: column-reverse;
+
+                .pointer {
+                    align-self: flex-start;
+                    margin-left: var(--pointer-side-margin);
+                }
+            }
+
+            :host([placement="top-center"]) {
+                flex-direction: column-reverse;
+
+                .pointer {
+                    align-self: center;
+                }
+            }
+
+            :host([placement="top-right"]) {
+                flex-direction: column-reverse;
+
+                .pointer {
+                    align-self: flex-end;
+                    margin-right: var(--pointer-side-margin);
+                }
+            }
+
+            .contents-container {
+                display: flex;
+                border-radius: inherit;
+                padding: 12px;
+                height: 20px;
+                gap: 8px;
+                background-color: var(--tooltip-background-color);
+                color: var(--tooltip-color);
+                outline: 3px solid var(--tooltip-background-color);
+                outline-offset: -2px;
+                align-items: center;
+            }
+
+            .pointer {
+                --pointer-width: 20px;
+                --pointer-height: 20px;
+                content: "";
+                width: var(--pointer-width);
+                height: var(--pointer-height);
+                background-color: var(--tooltip-background-color);
+                clip-path: polygon(100% 0px, 50% 70%, 0 0px);
+                display: none;
+            }
+
+            .pointer.visible {
+                display: block;
+            }
+
+            .left-icon {
+                height: 100%;
+                aspect-ratio: 3.5;
+            }
+
+            .right-icon {
+                width: auto;
+                height: 120%;
+                aspect-ratio: 3.5;
+            }
+        `
+    ];
+  }
+  render() {
+    return p`
+            <span class="pointer ${this.placement} ${this.placement !== "none" ? "visible" : ""}"></span>
+            <div class="contents-container">
+                <slot name="replace-all">
+                    <div class="label">Powered by</div>
+                    <epg-icon id="rightIcon" class="right-icon" icon-name="epigraph" alt="Right Icon"></epg-icon>
+                </slot>
+            </div>
+        `;
+  }
+}
+Y([
+  r({ attribute: I.placement.name })
+], F.prototype, "placement");
+window.customElements.get(A) || window.customElements.define(A, F);
+const N = "epg-loader-circle";
+class G extends _ {
+  static {
+    this.styles = [
+      super.styles,
+      x`
+            :host {
+                display: flex;
+                width: 100px;
+                height: 100px;
+                justify-content: center;
+                align-items: center;
+            }
+
+            .loader {
+                animation: rotate 1s linear infinite;
+            }
+
+            .loader-container {
+                width: 100%;
+                height: 100%;
+            }
+
+            .progress {
+                stroke-dasharray: 251.2; /* Full circle */
+                stroke-dashoffset: 188.4; /* 1/4 of the circle */
+                transform: rotate(-90deg);
+                transform-origin: center;
+            }
+
+            @keyframes rotate {
+                0% {
+                    transform: rotate(0deg);
+                }
+                100% {
+                    transform: rotate(360deg);
+                }
+            }
+        `
+    ];
+  }
+  render() {
+    return p`
+            <div class="loader-container" role="status" aria-live="polite" aria-label="Loading...">
+                <svg
+                    class="loader"
+                    viewBox="0 0 100 100"
+                    focusable="false"
+                    aria-hidden="true"
+                >
+                    <circle
+                        cx="50"
+                        cy="50"
+                        r="40"
+                        stroke=${this.theme == "light" ? "#0C0C0D1A" : "#FFFFFF66"}
+                        stroke-width="10"
+                        fill="none"
+                    />
+                    <circle
+                        class="progress"
+                        cx="50"
+                        cy="50"
+                        r="40"
+                        stroke=${this.theme == "light" ? "#0C0C0D80" : "#FFFFFFCC"}
+                        stroke-width="10"
+                        fill="none"
+                        stroke-dasharray="251.2"
+                        stroke-dashoffset="188.4"
+                        stroke-linecap="round"
+                    />
+                </svg>
+            </div>
+        `;
+  }
+}
+window.customElements.get(N) || window.customElements.define(N, G);
+var K = Object.defineProperty, m = (s, t, o, n) => {
+  for (var e = void 0, l = s.length - 1, h; l >= 0; l--)
+    (h = s[l]) && (e = h(t, o, e) || e);
+  return e && K(t, o, e), e;
+};
+const q = B(
+  `${i(a.Space.Padding.Small.$value)} ${i(a.Space.Padding.Medium.$value)}`
+);
+class u extends _ {
+  constructor() {
+    super(), this.size = c.size.defaultValue.toString(), this.ariaLabel = c.ariaLabel.defaultValue.toString(), this.label = c.label.defaultValue.toString(), this.isLoading = !1, this.loadingLabel = c.loadingLabel.defaultValue.toString(), this.leftIcon = c.leftIcon.defaultValue.toString(), this.rightIcon = c.rightIcon.defaultValue.toString(), this.fullWidth = !1, this.tooltipPlacement = c.tooltipPlacement.defaultValue.toString(), this.tooltipLabel = c.tooltipLabel.defaultValue.toString(), this._isKeyDown = !1, this.addEventListener("keydown", this.handleKeyDown), this.addEventListener("keyup", this.handleKeyUp), this.addEventListener("click", this.doClick);
+  }
+  static {
+    this.styles = [
+      super.styles,
+      x`
+            :host {
+                display: flex;
+                position: relative;
+                font-family: ${i(a.Font.Family.Body.$value)};
+                font-size: ${i(a.Size.Text.Large.$value)};
+                font-style: normal;
+                font-weight: 400;
+                letter-spacing: ${i(a.Font.Tracking.Normal.$value)};
+                width: max-content;
+                height: fit-content;
+                justify-content: center;
+                align-items: center;
+                user-select: none;
+                gap: ${i(a.Space.Gap.Small.$value)};
+                color: ${i(a.Color.Text.Invert.$value)};
+                padding: ${q};
+                box-sizing: border-box;
+                background-color: ${i(a.Color.Fill.Accent.$value)};
+                border-radius: ${i(a.Size.Radius.Medium.$value)};
+                cursor: pointer;
+                outline: none;
+            }
+
+            :host([full-width]) {
+                width: 100%;
+            }
+
+            :host(:hover) {
+                background-color: ${i(a.Color.Fill.AccentHover.$value)};
+
+                .tooltip {
+                    opacity: 1;
+                }
+            }
+
+            :host(:active) {
+                background-color: ${i(a.Color.Fill.AccentPress.$value)};
+            }
+
+            :host(:focus-visible) {
+                outline: revert !important;
+            }
+
+            :host([disabled]) {
+                color: ${i(a.Color.Text.Disabled.$value)} !important;
+                background-color: ${i(a.Color.Fill.Disabled.$value)} !important;
+                pointer-events: none !important;
+            }
+
+            :host .tooltip {
+                opacity: 0;
+                transition: 0.15s ease-in-out;
+            }
+
+            :host([size="small"]) {
+                .icon {
+                    width: ${i(a.Size.Icon.Small.$value)};
+                    height: ${i(a.Size.Icon.Small.$value)};
+                }
+
+                .label {
+                    font-size: ${i(a.Size.Text.Small.$value)};
+                    height: ${i(a.Size.Icon.Small.$value)};
+                }
+            }
+
+            :host([size="medium"]) {
+                .icon {
+                    width: ${i(a.Size.Icon.Medium.$value)};
+                    height: ${i(a.Size.Icon.Medium.$value)};
+                }
+
+                .label {
+                    font-size: ${i(a.Size.Text.Medium.$value)};
+                    height: ${i(a.Size.Icon.Medium.$value)};
+                }
+            }
+
+            :host([size="large"]) {
+                .icon {
+                    width: ${i(a.Size.Icon.Large.$value)};
+                    height: ${i(a.Size.Icon.Large.$value)};
+                }
+                
+                .label {
+                    font-size: ${i(a.Size.Text.Large.$value)};
+                    height: ${i(a.Size.Icon.Large.$value)};
+                }
+            }
+
+            .tooltip {
+                position: absolute;
+                pointer-events: none;
+                transition: opacity 0.5s ease;
+                opacity: 1;
+                z-index: 9999;
+            }
+
+            .tooltip.right {
+                right: 0;
+                transform: translateX(100%);
+            }
+
+            .tooltip.left {
+                left: 0;
+                transform: translateX(-100%);
+            }
+
+            .tooltip.top-left {
+                top: 0;
+                transform: translate(-10px, -100%);
+                left: 0;
+            }
+            
+            .tooltip.top-center {
+                top: 0;
+                transform: translateY(-100%);
+            }
+
+            .tooltip.top-right {
+                top: 0;
+                transform: translate(15px, -100%);
+                right: 0;
+            }
+
+            .tooltip.bottom-left {
+                bottom: 0;
+                transform: translate(-10px, 100%);
+                left: 0;
+            }
+
+            .tooltip.bottom-center {
+                bottom: 0;
+                transform: translateY(100%);
+            }
+
+            .tooltip.bottom-right {
+                bottom: 0;
+                transform: translate(15px, 100%);
+                right: 0;
+            }
+        `
+    ];
+  }
+  handleKeyDown(t) {
+    this._isKeyDown || (this._isKeyDown = !0, (t.key === "Enter" || t.key === " ") && !this.disabled && (t.preventDefault(), this.doClick()));
+  }
+  handleKeyUp(t) {
+    (t.key === "Enter" || t.key === " ") && (this._isKeyDown = !1);
+  }
+  defaultContents() {
+    let t;
+    return this.isLoading ? t = p` <epg-loader-circle class="icon ${this.size}"></epg-loader-circle>
+                ${this.loadingLabel ? p`<div class="label ${this.size}">${this.loadingLabel}</div>` : b}` : t = p`
+                <epg-icon class="icon ${this.size}" icon-name=${this.leftIcon}></epg-icon>
+                ${this.label ? p`<div class="label ${this.size}">${this.label}</div>` : b}
+                <epg-icon class="icon ${this.size}" icon-name=${this.rightIcon}></epg-icon>
+            `, t;
+  }
+  _renderTooltip() {
+    const t = this.tooltipLabel ? p`<div slot="replace-all">${this.tooltipLabel}</div>` : b;
+    return p`
+            <epg-tooltip class="tooltip ${this.tooltipPlacement}" ?disabled=${this.tooltipPlacement === "none"} placement=${this.tooltipPlacement}>
+                ${t}
+            </epg-tooltip>
+        `;
+  }
+  render() {
+    return p`
+            <slot 
+                name="replace-all" 
+                role="button" 
+                tabindex=${this.disabled ? "-1" : "0"} 
+                aria-disabled=${this.disabled} 
+                aria-label=${this.label ?? this.ariaLabel}
+            >
+                ${this.defaultContents()} 
+            </slot>
+            ${this._renderTooltip()}
+        `;
+  }
+}
+m([
+  r({ attribute: c.ariaLabel.name })
+], u.prototype, "ariaLabel");
+m([
+  r({ attribute: c.label.name })
+], u.prototype, "label");
+m([
+  r({ type: Boolean, attribute: c.isLoading.name })
+], u.prototype, "isLoading");
+m([
+  r({ attribute: c.loadingLabel.name })
+], u.prototype, "loadingLabel");
+m([
+  r({ attribute: c.leftIcon.name })
+], u.prototype, "leftIcon");
+m([
+  r({ attribute: c.rightIcon.name })
+], u.prototype, "rightIcon");
+m([
+  r({ type: Boolean, attribute: c.fullWidth.name })
+], u.prototype, "fullWidth");
+m([
+  r({ attribute: c.tooltipPlacement.name })
+], u.prototype, "tooltipPlacement");
+m([
+  r({ attribute: c.tooltipLabel.name })
+], u.prototype, "tooltipLabel");
+m([
+  H()
+], u.prototype, "_isKeyDown");
+window.customElements.get(P) || window.customElements.define(P, u);
+var J = Object.defineProperty, w = (s, t, o, n) => {
+  for (var e = void 0, l = s.length - 1, h; l >= 0; l--)
+    (h = s[l]) && (e = h(t, o, e) || e);
+  return e && J(t, o, e), e;
+};
+class y extends u {
+  constructor() {
+    super(...arguments), this.label = $.label.defaultValue.toString(), this.leftIcon = "", this.rightIcon = "", this.togglable = !1, this.visited = !1, this.active = !1, this.showLabel = !1, this.tooltipPlacement = "top-left", this.tooltipLabel = $.tooltipLabel.defaultValue.toString(), this.tooltipLeftIcon = "", this.tooltipRightIcon = "";
+  }
+  static {
+    this.styles = [
+      super.styles,
+      x`
+            :host {
+                all: unset;
+                color: #333;
+                gap: 8px;
+                padding: 0px;
+                box-shadow: unset;
+                background-color: unset;
+                display: block;
+            }
+
+            :host(:hover) {
+                background-color: unset;
+                cursor: pointer;
+
+                .hotspot-center-circle {
+                    width: 80%;
+                    height: 80%;
+                }
+            }
+
+            :host .hotspot-main {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                width: 100%;
+                height: 100%;
+                border-radius: 50%;
+                border: 2px solid rgba(204, 204, 204, 1);
+                background-color: ${i(a.Color.Fill.HotspotSecondary.$value)};
+                backdrop-filter: blur(3px);
+                transition: opacity 0.5s ease-in-out;
+            }
+
+            :host .hotspot-center-circle {
+                width: 30%;
+                height: 30%;
+                border-radius: 50%;
+                background-color: white;
+                transition: width 0.2s ease-in-out, height 0.2s ease-in-out, opacity 0.2s ease-in-out;
+            }
+
+            :host(:disabled) {
+                color: #b3b3b3;
+                border-radius: 12px;
+                background: #ccc;
+            }
+
+            :host([active]) {
+                .hotspot-main {
+                    opacity: 0.5;
+                }
+
+                .hotspot-center-circle {
+                    opacity: 0;
+                }
+
+                .tooltip {
+                    opacity: 0 !important;
+                }
+            }
+
+            :host([size="small"]) {
+                width: 25px !important;
+                height: 25px !important;
+                aspect-ratio: 1 !important;
+            }
+
+            :host([size="medium"]) {
+                width: 34px !important;
+                height: 34px !important;
+                aspect-ratio: 1 !important;
+            }
+
+            :host([visited]) {
+                .hotspot-main {
+                    border-color: transparent !important;
+                }
+            }
+        `
+    ];
+  }
+  doClick() {
+    if (this.disabled)
+      return;
+    this.togglable && (this.active = !this.active), typeof this.onClickCallback == "function" && this.onClickCallback.bind(this);
+    const t = new CustomEvent("epgonclick");
+    this.dispatchEvent(t);
+  }
+  updated(t) {
+    super.updated(t), t.has("active") && this.shadowRoot?.host.toggleAttribute("active", this.active);
+  }
+  _renderTooltip() {
+    const t = this.tooltipLabel ? p`<div slot="replace-all">${this.tooltipLabel}</div>` : b;
+    return p`
+            <epg-tooltip class="tooltip ${this.tooltipPlacement}" ?disabled=${this.tooltipPlacement === "none"} placement=${this.tooltipPlacement} theme="light">
+                ${t}
+            </epg-tooltip>
+        `;
+  }
+  defaultContents() {
+    return p`
+            <div class="hotspot-main">
+                <span class="hotspot-center-circle"></span>
+            </div>
+        `;
+  }
+}
+w([
+  r({ attribute: $.label.name })
+], y.prototype, "label");
+w([
+  r({ attribute: !1 })
+], y.prototype, "leftIcon");
+w([
+  r({ attribute: !1 })
+], y.prototype, "rightIcon");
+w([
+  r({ type: Boolean, attribute: $.togglable.name })
+], y.prototype, "togglable");
+w([
+  r({ type: Boolean, attribute: $.visited.name })
+], y.prototype, "visited");
+w([
+  r({
+    type: Boolean,
+    attribute: $.active.name
+  })
+], y.prototype, "active");
+window.customElements.get(L) || window.customElements.define(L, y);
+var Q = Object.defineProperty, g = (s, t, o, n) => {
+  for (var e = void 0, l = s.length - 1, h; l >= 0; l--)
+    (h = s[l]) && (e = h(t, o, e) || e);
+  return e && Q(t, o, e), e;
+};
+const f = class k extends W {
+  constructor() {
+    super(), this._loggerContext = "HOTSPOTS MANAGER", this.hotspots = /* @__PURE__ */ new Map(), this.activeHotspot = void 0, this.activeHotspotIndex = -1, this.isPortrait = !0, this._cardsState = d.collapsed, this._leftCardContents = b, this._rightCardContents = b, this._allCards = [];
+  }
+  static {
+    this.webComponentName = "hotspots-manager";
+  }
+  updateActiveHotspotIndex() {
+    this.activeHotspot && (this.activeHotspotIndex = this.hotspotsOrder.indexOf(this.activeHotspot?.hotspotID));
+  }
+  static {
+    this.styles = [
+      T.styles,
+      x`
+            :host {
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                pointer-events: none;
+            }
+
+            :host * {
+                pointer-events: auto;
+            }
+
+            .hotspot-cards-container {
+                --landscape-cards-offset: 40px;
+                width: 40%;
+                min-width: 320px;
+                height: calc(100% - (var(--landscape-cards-offset)*2));
+                align-self: anchor-center;
+                box-sizing: border-box;
+                position: absolute;
+                z-index: 1;
+                opacity: 0;
+                top: 0;
+                display: none;
+                transform: translateX(30%) translateY(30%);
+                flex-direction: column-reverse;
+                background-color: rgba(255, 255, 255, 0);
+                transition: opacity 0.6s ease, display 0.6s ease allow-discrete, transform 0.6s, max-height 0.5s, background-color 1s;
+
+                .close-button {
+                    position: absolute;
+                    top: 20px;
+                    right: 20px;
+                    z-index: 1;
+                }
+
+                .collapse-card-button {
+                    position: absolute;
+                    top: var(--landscape-cards-offset);
+                    right: var(--landscape-cards-offset);
+                    z-index: 6;
+                    transition: opacity 0.5s;
+                }
+
+                
+                &.left {
+                    left: var(--landscape-cards-offset);
+                    transform: translateX(-30%) translateY(0%);
+                }
+
+                &.right {
+                    right: var(--landscape-cards-offset);
+                    transform: translateX(30%) translateY(0%);
+                }
+            }
+
+            :host([is-portrait]) {
+                .hotspot-cards-container {
+                    &.carousel {
+                        width: 100%;
+                        height: 100%;
+                        gap: 0px;
+                        top: unset;
+                        bottom: 0px;
+                        transition: transform 0.5s, opacity 0.5s, max-height 0.5s;
+                        box-sizing: border-box;
+                        align-self: end;
+                        transform: translateX(0%) translateY(30%);
+    
+                        &.show {
+                            opacity: 1;
+                            display: flex;
+                            transition: transform 0.5s, opacity 0.5s, max-height 0.5s;
+                            transform: translateX(0%) translateY(0%);
+                        }
+
+                        .close-button {
+                            position: unset;
+                        }
+    
+                        .expand-overlay {
+                            width: 100%;
+                            height: 100%;
+                            display: flex;
+                            flex-direction: column;
+                            padding-bottom: 15px;
+                            transition: padding 0.5s;
+                        }
+    
+                        .cards-carousel-top-panel {
+                            display: flex;
+                            justify-content: space-between;
+                            align-items: center;
+                            z-index: 3;
+                            position: unset;
+                            padding-left: 40px;
+                            padding-right: 40px;
+                            transition: height 0.5s, opacity 0.5s;
+                            z-index: 2;
+                        }
+    
+                        .cards-carousel-top-panel .page-indicator {
+                            display: flex;
+                            position: relative;
+                            font-style: normal;
+                            font-weight: 400;
+                            justify-content: center;
+                            align-items: center;
+                            padding: 12px 16px;
+                            box-sizing: border-box;
+                            background-color: rgba(248, 248, 248, 0.8000);
+                            border-radius: 12px;
+                            pointer-events: none;
+                        }
+    
+                        &.collapsed {
+                            gap: 10px;
+                            max-height: 500px;
+    
+                            ::part(epg-card-expand-button-span) {
+                                opacity: 1;
+                            }
+    
+                            .collapse-card-button {
+                                opacity: 0;
+                                pointer-events: none;
+                            }
+                        }
+        
+                        &.expanded {
+                            max-height: 100%;
+                            background-color: rgba(255, 255, 255, 1);
+    
+                            ::part(epg-card-expand-button-span) {
+                                opacity: 0;
+                                pointer-events: none;
+                                height: 0px;
+                            }
+    
+                            .cards-carousel-top-panel {
+                                opacity: 0;
+                                height: 0px;
+                                pointer-events: none;
+                            }
+    
+                            .expand-overlay {
+                                pointer-events: none;
+                                padding-bottom: 0px;
+                                z-index: 4;
+                            }
+    
+                            ::part(swiper-slide) {
+                                transform: scaleX(0.9) scaleY(0.98);
+                            }
+                        }
+                    }
+                }
+            }
+
+            .hotspot-cards-container.show {
+                opacity: 1;
+                display: flex;
+
+                &.carousel {
+                    transform: translateX(0%) translateY(0%);
+                }
+
+                &.left {
+                    transform: translateX(0%) translateY(0%);
+                }
+
+                &.right {
+                    transform: translateX(0%) translateY(0%);
+                }
+            }
+
+            @starting-style {
+                .hotspot-cards-container.show {
+                    opacity: 0;
+
+                    &.carousel {
+                        transform: translateX(0%) translateY(30%);
+                    }
+    
+                    &.left {
+                        transform: translateX(-30%) translateY(0%);
+                    }
+    
+                    &.right {
+                        transform: translateX(30%) translateY(0%);
+                    }
+                }
+                
+            }
+        `
+    ];
+  }
+  /**
+   * Since we do not want to define these web component at all times, 
+   * this method needs to be explicitly called before usage.
+   */
+  static setupWebComponent() {
+    window.customElements.get(k.webComponentName) || window.customElements.define(k.webComponentName, k);
+  }
+  firstUpdated() {
+    this._setupEventListeners();
+  }
+  createHotspots(t) {
+    for (const o of t) {
+      const n = new T({ config: o, appWcRef: this.appWcRef, hotspotManagerRef: this });
+      this.hotspots.set(n.hotspotID, n);
+    }
+    this.updateHotspotsOrder(Array.from(this.hotspots.keys()));
+  }
+  stepHotspots(t) {
+    const o = this.activeHotspotIndex;
+    if (o === null)
+      return;
+    const n = this.hotspotsOrder.length;
+    let e = o;
+    t === "next" ? (e = o + 1, e >= n && (e = 0)) : t === "prev" && (e = o - 1, e < 0 && (e = n - 1));
+    const l = this.hotspotsOrder[e];
+    this.setActiveHotspot({ hotspotId: l });
+  }
+  nextHotspot() {
+    return this.stepHotspots("next"), this.appWcRef.appEvents.hotspotNextEvent.fire({ hotspot: this.activeHotspot }), this.activeHotspot;
+  }
+  previousHotspot() {
+    return this.stepHotspots("prev"), this.appWcRef.appEvents.hotspotPreviousEvent.fire({ hotspot: this.activeHotspot }), this.activeHotspot;
+  }
+  updateHotspots(t) {
+    for (const o of t) {
+      const n = this.hotspots.get(o.hotspotID);
+      n && n.updateHotspotConfig(o);
+    }
+    this._resolveHotspotCardContents();
+  }
+  updateHotspotsOrder(t) {
+    this.hotspotsOrder = t;
+  }
+  removeHotspots(t) {
+    this.activeHotspot && this.closeActiveHotspot();
+    for (const o of t)
+      this.hotspots.delete(o);
+    this.updateHotspotsOrder(Array.from(this.hotspots.keys()));
+  }
+  removeAllHotspots() {
+    this.removeHotspots(Array.from(this.hotspots.keys()));
+  }
+  setActiveHotspotByIndex(t) {
+    const o = this.hotspotsOrder[t];
+    this.setActiveHotspot({ hotspotId: o, state: this._cardsState });
+  }
+  setActiveHotspot({
+    hotspotId: t,
+    state: o = this._cardsState
+  }) {
+    if (this.activeHotspot?.hotspotID === t)
+      return;
+    if (t === null) {
+      this.activeHotspot = void 0, this.updateActiveHotspotIndex(), this.appWcRef.cameraManager.resetCurrentCameraTransformsToLastSavedState();
+      return;
+    }
+    this.enabled === !1 && (this.enabled = !0);
+    const n = !this.activeHotspot;
+    if (this.activeHotspot = this.hotspots.get(t), this.updateActiveHotspotIndex(), this.setActiveHotspotState(o), this._resolveHotspotCardContents(), this.appWcRef.appEvents.cameraMoveToTransform.fire({ cameraTransforms: this.activeHotspot?.camera, saveFirst: n }), this.appWcRef.isPortraitOrientation) {
+      let e = 0;
+      this.activeHotspot?.desktopPlacement === v.LEFT ? e = 0.2 : this.activeHotspot?.desktopPlacement === v.RIGHT && (e = -0.2), this.appWcRef.cameraManager.mainCameraControls.setFocalOffset(e, 0.2, 0, !0);
+    }
+  }
+  _resolveHotspotCardContents() {
+    this._allCards = [];
+    for (const t of this.hotspots.values()) {
+      const o = p`
+                <swiper-slide part="swiper-slide">
+                    <style>
+                        .expand-button {
+                            position: absolute;
+                            width: 100%;
+                            height: 100%;
+                            border-radius: 25px;
+                            transition: opacity 0.8s, height 0.5s;
+                            background-color: #f9f9f9;
+                            z-index: 3;
+                            font-family: "Helvetica Neue";
+                            font-weight: 400;
+                            display: flex;
+                            flex-direction: column;
+                        }
+
+                        .expand-button span {
+                            height: 60px;
+                            width: 100%;
+                            display: flex;
+                            align-items: center;
+                            justify-content: center;
+                            transition: opacity 0.5s, height 0.5s;
+                            transition-delay: 0.25s;
+                        }
+
+                        epg-card {
+                            box-shadow: unset;
+                        }
+
+                        swiper-slide {
+                            box-shadow: 0px 0px 3px 3px rgba(12, 12, 13, 0.20);
+                            height: calc(100% - 15px) !important;
+                            align-self: center;
+                            transition: transform 0.5s;
+                        }
+                    </style>
+
+                    <div class="expand-button" part="epg-card-expand-button">
+                        ${t.renderCardTemplate()}
+                        <span part="epg-card-expand-button-span">EXPAND</span>
+                    </div>
+                </swiper-slide>
+            `;
+      this._allCards.push(o);
+    }
+    this.activeHotspot?.desktopPlacement === v.LEFT ? this._leftCardContents = this.activeHotspot.renderCardTemplate() : this.activeHotspot?.desktopPlacement === v.RIGHT && (this._rightCardContents = this.activeHotspot.renderCardTemplate());
+  }
+  expandCards() {
+    this._cardsState = d.expanded;
+  }
+  collapseCards() {
+    this._cardsState = d.collapsed;
+  }
+  setActiveHotspotState(t = d.collapsed) {
+    if (this.activeHotspot)
+      switch (t) {
+        case d.collapsed:
+          this.collapseCards();
+          break;
+        case d.expanded:
+          this.expandCards();
+          break;
+      }
+  }
+  openHotspot({ hotspotId: t, state: o }) {
+    this.setActiveHotspot({ hotspotId: t, state: o }), this.appWcRef.appEvents.hotspotOpenEvent.fire({ hotspot: this.activeHotspot });
+  }
+  closeActiveHotspot() {
+    const t = this.activeHotspot?.hotspotID;
+    this.setActiveHotspot({ hotspotId: null }), this.appWcRef.appEvents.hotspotClosedEvent.fire({ hotspotId: t });
+  }
+  recalculateHotspotPositions() {
+    this.requestUpdate();
+  }
+  _renderHotspotIndicatorTemplates() {
+    return Array.from(this.hotspots.values()).map(
+      (t) => t.renderAnnotationTemplate(
+        this.activeHotspot?.hotspotID
+      )
+    );
+  }
+  _onCardsCarouselSlideChange(t) {
+    this.setActiveHotspotByIndex(t.detail.newSlideIndex);
+  }
+  _onExpandButtonClicked(t) {
+    t.stopPropagation(), t.preventDefault(), this.setActiveHotspotState(d.expanded);
+  }
+  _renderMobileHotspotCardTemplates() {
+    const t = this._cardsState === d.expanded ? d.expanded : d.collapsed;
+    return p`
+            <div 
+                id="mobileHotspotCardsContainer" 
+                class="hotspot-cards-container carousel ${this.activeHotspot ? "show" : ""} ${t}"
+            >
+                <div class="expand-overlay" @click=${this._onExpandButtonClicked}>
+                    <epg-carousel 
+                        nested 
+                        hide-pagination 
+                        ?swipe-only-interaction=${this._cardsState === d.collapsed}
+                        .data=${this._allCards} 
+                        current-index=${this.activeHotspotIndex} 
+                        @slide-changed=${this._onCardsCarouselSlideChange}
+                        slides-per-view=${this._cardsState === d.collapsed ? 1.2 : 1}
+                        space-between=${this._cardsState === d.collapsed ? 20 : 0}
+                        centered-slides
+                        disable-interactions=${this._cardsState === d.expanded ? "true" : "false"}
+                        auto-height="false"
+                    ></epg-carousel>
+                </div>
+
+                <div class="cards-carousel-top-panel">
+                    <div class="page-indicator">${this.activeHotspotIndex + 1} / ${this._allCards.length}</div>
+                    <epg-button-icon
+                        id="closeButton"
+                        aria-label="Close Card"
+                        class="close-button"
+                        left-icon="cancel"
+                        @epgonclick=${this.closeActiveHotspot}
+                    ></epg-button-icon>
+                </div>
+
+                <epg-button-icon
+                    id="collapseCardButton"
+                    aria-label="Collapse Card Card"
+                    class="collapse-card-button"
+                    left-icon="cancel"
+                    @epgonclick=${this.collapseCards}
+                    part="collapse-card-button"
+                ></epg-button-icon>
+            </div>
+        `;
+  }
+  _renderDesktopHotspotCardTemplates() {
+    const t = `hotspot-cards-container left ${this.activeHotspot?.desktopPlacement === v.LEFT ? "show" : ""}`, o = `hotspot-cards-container right ${this.activeHotspot?.desktopPlacement === v.RIGHT ? "show" : ""}`;
+    return p`
+            <div id="leftHotspotCardsContainer" class=${t}>
+                <div class="cards-carousel-top-panel">
+                    <epg-button-icon
+                        id="closeButton"
+                        aria-label="Close Card"
+                        class="close-button"
+                        left-icon="cancel"
+                        @epgonclick=${this.closeActiveHotspot}
+                    ></epg-button-icon>
+                </div>
+                ${this._leftCardContents}
+            </div>
+            <div id="rightHotspotCardsContainer" class=${o}>
+                <div class="cards-carousel-top-panel">
+                    <epg-button-icon
+                        id="closeButton"
+                        aria-label="Close Card"
+                        class="close-button"
+                        left-icon="cancel"
+                        @epgonclick=${this.closeActiveHotspot}
+                    ></epg-button-icon>
+                </div>
+                ${this._rightCardContents}
+            </div>
+        `;
+  }
+  _setupEventListeners() {
+    this.appWcRef.addEventListener(
+      this.appWcRef.appEvents.hotspotClickedEvent.name,
+      (t) => {
+        this.openHotspot({ hotspotId: t.detail.hotspot.hotspotID });
+      }
+    );
+  }
+  render() {
+    return this.enabled ? (this.isPortrait = this.appWcRef.isPortraitOrientation, p`
+            ${this._renderHotspotIndicatorTemplates()}
+
+            ${this.appWcRef.isPortraitOrientation ? this._renderMobileHotspotCardTemplates() : this._renderDesktopHotspotCardTemplates()}
+        `) : b;
+  }
+};
+g([
+  r({ attribute: !1 })
+], f.prototype, "hotspots");
+g([
+  r({ attribute: !1 })
+], f.prototype, "hotspotsOrder");
+g([
+  r({ attribute: !1 })
+], f.prototype, "activeHotspot");
+g([
+  r({ attribute: !1 })
+], f.prototype, "activeHotspotIndex");
+g([
+  r({ type: Boolean, attribute: "is-portrait", reflect: !0 })
+], f.prototype, "isPortrait");
+g([
+  H()
+], f.prototype, "_cardsState");
+g([
+  H()
+], f.prototype, "_leftCardContents");
+g([
+  H()
+], f.prototype, "_rightCardContents");
+g([
+  H()
+], f.prototype, "_allCards");
+g([
+  S("#leftHotspotCardsContainer")
+], f.prototype, "leftHotspotCardsContainerElem");
+g([
+  S("#rightHotspotCardsContainer")
+], f.prototype, "rightHotspotCardsContainerElem");
+let et = f;
+export {
+  u as E,
+  et as H,
+  M,
+  c as U
+};