@epigraph/solutions 0.0.5-alpha → 0.2.0

package/dist/HotspotsManager-mmFi8qV9.js

@@ -1,1426 +0,0 @@
-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
-};