@epigraph/solutions 0.0.1-alpha → 0.0.4-alpha

package/dist/dimensions-manager.js

@@ -0,0 +1,439 @@
+import { i as x, E as w, x as u, n as c, B as D, as as B, v as n, V as i, bv as I } from "./three.module-CYfxkCtM.js";
+import { B as z, r as _ } from "./baseUiComponent-_PPHqnvV.js";
+import { e as m, A as S, m as b } from "./AppHelpers-DdbyrHJf.js";
+const y = "epg-dimension-label", g = {
+  label: {
+    name: "label",
+    defaultValue: "6.5"
+  },
+  unitSymbol: {
+    name: "unit-symbol",
+    defaultValue: "”"
+  }
+};
+var v = Object.defineProperty, f = (l, e, s, h) => {
+  for (var t = void 0, r = l.length - 1, o; r >= 0; r--)
+    (o = l[r]) && (t = o(e, s, t) || t);
+  return t && v(e, s, t), t;
+};
+class P extends z {
+  constructor() {
+    super(...arguments), this.label = g.label.defaultValue.toString(), this.unitSymbol = g.unitSymbol.defaultValue.toString();
+  }
+  static {
+    this.styles = [
+      super.styles,
+      x`
+            :host {
+                display: flex;
+                font-size: 16px;
+                font-style: normal;
+                font-weight: 400;
+                border-radius: 6px;
+                user-select: none;
+                pointer-events: none;
+                width: fit-content;
+                transition: opacity 0.4s ease-in-out;
+                padding: 8px;
+                box-sizing: content-box;
+            }
+
+            :host([disabled]) {
+                opacity: 0;
+                display: flex;
+            }
+
+            :host([size="small"]) {
+                font-size: 16px;
+            }
+
+            :host([size="medium"]) {
+                font-size: 20px;
+            }
+
+            :host([size="large"]) {
+                font-size: 26px;
+            }
+
+            :host([theme="light"]) {
+                color: #333;
+                background: rgba(255, 255, 255, 0.5);
+                box-shadow: 0px 1px 4px 0px rgba(12, 12, 13, 0.1);
+            }
+
+            :host([theme="dark"]) {
+                background: rgba(12, 12, 13, 0.8);
+                box-shadow: 0px 1px 4px 0px rgba(12, 12, 13, 0.1);
+                color: #fff;
+            }
+        `
+    ];
+  }
+  render() {
+    return u`
+            <slot name="replace-all">
+                ${this.label ? u`<span class="label">${this.label}</span>` : w}
+                ${this.unitSymbol ? u`<span class="unit-symbol">${this.unitSymbol}</span>` : w}
+            </slot>
+
+        `;
+  }
+}
+f([
+  c({ attribute: g.label.name })
+], P.prototype, "label");
+f([
+  c({ attribute: g.unitSymbol.name })
+], P.prototype, "unitSymbol");
+window.customElements.get(y) || window.customElements.define(y, P);
+var $ = Object.defineProperty, d = (l, e, s, h) => {
+  for (var t = void 0, r = l.length - 1, o; r >= 0; r--)
+    (o = l[r]) && (t = o(e, s, t) || t);
+  return t && $(e, s, t), t;
+};
+const a = class p extends D {
+  constructor() {
+    super(), this.enabled = !1, this.visualizeBounds = !1, this.dimensionsUnit = m.inch, this.dimensionsUnitSymbol = "", this._boundsVisualizer = void 0, this._currentSceneBounds = new B(), this._dimensionsIndicatorBoundsPadding = 0.08, this._cameraDirection = new n(), this._dimensionsInDisplayUnit = {
+      length: 0,
+      depth: 0,
+      height: 0
+    }, this._currentDimensionsState = {
+      length: {
+        begin: {
+          worldPos: new n(),
+          screenPos: new i()
+        },
+        end: {
+          worldPos: new n(),
+          screenPos: new i()
+        },
+        midPoint: {
+          worldPos: new n(),
+          screenPos: new i()
+        },
+        distance: 0
+      },
+      depth: {
+        begin: {
+          worldPos: new n(),
+          screenPos: new i()
+        },
+        end: {
+          worldPos: new n(),
+          screenPos: new i()
+        },
+        midPoint: {
+          worldPos: new n(),
+          screenPos: new i()
+        },
+        distance: 0
+      },
+      height: {
+        begin: {
+          worldPos: new n(),
+          screenPos: new i()
+        },
+        end: {
+          worldPos: new n(),
+          screenPos: new i()
+        },
+        midPoint: {
+          worldPos: new n(),
+          screenPos: new i()
+        },
+        distance: 0
+      }
+    }, this._currentDimensionsIndicatorState = {
+      length: {
+        begin: {
+          worldPos: new n(),
+          screenPos: new i()
+        },
+        end: {
+          worldPos: new n(),
+          screenPos: new i()
+        },
+        midPoint: {
+          worldPos: new n(),
+          screenPos: new i()
+        },
+        distance: 0
+      },
+      depth: {
+        begin: {
+          worldPos: new n(),
+          screenPos: new i()
+        },
+        end: {
+          worldPos: new n(),
+          screenPos: new i()
+        },
+        midPoint: {
+          worldPos: new n(),
+          screenPos: new i()
+        },
+        distance: 0
+      },
+      height: {
+        begin: {
+          worldPos: new n(),
+          screenPos: new i()
+        },
+        end: {
+          worldPos: new n(),
+          screenPos: new i()
+        },
+        midPoint: {
+          worldPos: new n(),
+          screenPos: new i()
+        },
+        distance: 0
+      }
+    }, this._dimensionIndicatorNormals = {
+      length: new n(),
+      depth: new n(),
+      height: new n()
+    };
+  }
+  static {
+    this.webComponentName = "dimensions-manager";
+  }
+  static {
+    this.styles = x`
+        :host {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+        }
+
+        .dimensions-label {
+            position: absolute;
+            transform: translateY(-50%);
+        }
+
+        .dimensions-label.occluded {
+            opacity: 0.5;
+        }
+    `;
+  }
+  /**
+  * Sets up a visualizer gizmo that shows the active bounds for all proxies within scene.
+  * This could be useful to debug the calculated values.
+  */
+  _setupBoundsVisualizer() {
+    this._boundsVisualizer = new I(this._renderEngine.sceneHierarchy.proxyGeoGrp, 16711680), this._renderEngine.scene.add(this._boundsVisualizer);
+  }
+  get _renderEngine() {
+    return this.appWcRef.renderEngine;
+  }
+  /**
+   * 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(p.webComponentName) || window.customElements.define(p.webComponentName, p);
+  }
+  getCurrentSceneBounds() {
+    return this._currentSceneBounds;
+  }
+  getCurrentDimensionsState() {
+    return this._currentDimensionsState;
+  }
+  getCurrentDimensionsIndicatorState() {
+    return this._currentDimensionsIndicatorState;
+  }
+  firstUpdated() {
+    this.visualizeBounds && this._setupBoundsVisualizer();
+  }
+  updated(e) {
+    e.get("enabled") && (this.enabled ? (window.epigraph.logger.info({ title: "Showing Dimensions" }), this.recalculateBoundsAndDimensions(), this.appWcRef.appEvents.dimensionsVisibilityChanged.fire({ visible: this.enabled })) : (window.epigraph.logger.info({ title: "Hiding Dimensions" }), this.appWcRef.appEvents.dimensionsVisibilityChanged.fire({ visible: this.enabled })));
+  }
+  _updateDimensionsIndicator({ currentBoundSide: e, currentIndicatorSide: s }) {
+    e.distance = e.begin.worldPos.distanceTo(e.end.worldPos), e.midPoint.worldPos = S.getPointInBetweenByPercentage(
+      e.begin.worldPos,
+      e.end.worldPos,
+      0.5
+    );
+    const h = this.appWcRef.getScreenPositionFromWorld(
+      e.midPoint.worldPos
+    );
+    e.midPoint.screenPos = h, s.midPoint.worldPos = S.getPointInBetweenByPercentage(
+      s.begin.worldPos,
+      s.end.worldPos,
+      0.5
+    );
+    const t = this.appWcRef.getScreenPositionFromWorld(s.midPoint.worldPos);
+    s.midPoint.screenPos = t;
+  }
+  /**
+   * Recalculates and updates the length component of dimensions.
+   */
+  _recalculateLength() {
+    this._currentDimensionsState.length.begin.worldPos.set(
+      this._currentSceneBounds.min.x,
+      this._currentSceneBounds.min.y,
+      this._currentSceneBounds.max.z
+    ), this._currentDimensionsState.length.end.worldPos.set(
+      this._currentSceneBounds.max.x,
+      this._currentSceneBounds.min.y,
+      this._currentSceneBounds.max.z
+    ), this._updateDimensionsIndicator({
+      currentBoundSide: this._currentDimensionsState.length,
+      currentIndicatorSide: this._currentDimensionsIndicatorState.length
+    });
+  }
+  /**
+   * Recalculates and updates the depth component of dimensions.
+   */
+  _recalculateDepth() {
+    this._currentDimensionsState.depth.begin.worldPos.set(
+      this._currentSceneBounds.min.x,
+      this._currentSceneBounds.min.y,
+      this._currentSceneBounds.min.z
+    ), this._currentDimensionsState.depth.end.worldPos.set(
+      this._currentSceneBounds.min.x,
+      this._currentSceneBounds.min.y,
+      this._currentSceneBounds.max.z
+    ), this._updateDimensionsIndicator({
+      currentBoundSide: this._currentDimensionsState.depth,
+      currentIndicatorSide: this._currentDimensionsIndicatorState.depth
+    });
+  }
+  /**
+   * Recalculates and updates the height component of dimensions.
+   */
+  _recalculateHeight() {
+    this._currentDimensionsState.height.begin.worldPos.set(
+      this._currentSceneBounds.min.x,
+      this._currentSceneBounds.min.y,
+      this._currentSceneBounds.max.z
+    ), this._currentDimensionsState.height.end.worldPos.set(
+      this._currentSceneBounds.min.x,
+      this._currentSceneBounds.max.y,
+      this._currentSceneBounds.max.z
+    ), this._updateDimensionsIndicator({
+      currentBoundSide: this._currentDimensionsState.height,
+      currentIndicatorSide: this._currentDimensionsIndicatorState.height
+    });
+  }
+  /**
+   * Recalculates dimensions within the scene and makes necessary updates.
+   */
+  recalculateBoundsAndDimensions() {
+    if (this._currentSceneBounds.setFromPoints([new n()]), this._renderEngine.sceneHierarchy.proxyGeoGrp.children.length > 0)
+      for (const e of this._renderEngine.sceneHierarchy.proxyGeoGrp.children)
+        this._currentSceneBounds.expandByObject(e);
+    this._boundsVisualizer && this._boundsVisualizer.update(), this.appWcRef.appEvents.dimensionsValueChanged.fire();
+  }
+  /**
+   * Updates world and screen positions of the dimensions lines based on the current camera pose.
+   * This method assumes that the bounds calculations would have been performed already.
+   * Note: Screen position calculations are only estimates and must be used only for rough updates. 
+   */
+  repopulateDimensionIndicators() {
+    const e = this._currentSceneBounds.clone();
+    e.expandByScalar(this._dimensionsIndicatorBoundsPadding), this._recalculateLength(), this._recalculateDepth(), this._recalculateHeight();
+    const { length: s, depth: h, height: t } = this._currentDimensionsState, r = {
+      length: b.convert(s.distance, m.meter, this.dimensionsUnit).value,
+      depth: b.convert(h.distance, m.meter, this.dimensionsUnit).value,
+      height: b.convert(t.distance, m.meter, this.dimensionsUnit).value
+    };
+    this._dimensionsInDisplayUnit = JSON.parse(JSON.stringify(r)), this._currentDimensionsIndicatorState.length.begin.worldPos.set(
+      e.min.x,
+      0,
+      // Clamps at the ground
+      e.max.z
+    ), this._currentDimensionsIndicatorState.length.end.worldPos.set(
+      e.max.x,
+      0,
+      e.max.z
+    ), this._currentDimensionsIndicatorState.depth.begin.worldPos.set(
+      e.min.x,
+      0,
+      e.min.z
+    ), this._currentDimensionsIndicatorState.depth.end.worldPos.set(
+      e.min.x,
+      0,
+      e.max.z
+    ), this._currentDimensionsIndicatorState.height.begin.worldPos.set(
+      e.min.x,
+      0,
+      e.max.z
+    ), this._currentDimensionsIndicatorState.height.end.worldPos.set(
+      e.min.x,
+      e.max.y,
+      e.max.z
+    );
+    const o = new n();
+    this.appWcRef.dimensionsManager.getCurrentSceneBounds().getCenter(o), this._dimensionIndicatorNormals.length.subVectors(this._currentDimensionsIndicatorState.length.midPoint.worldPos, o), this._dimensionIndicatorNormals.depth.subVectors(this._currentDimensionsIndicatorState.depth.midPoint.worldPos, o), this._dimensionIndicatorNormals.height.subVectors(this._currentDimensionsIndicatorState.height.midPoint.worldPos, o), this.appWcRef.appEvents.dimensionsPositionChanged.fire();
+  }
+  _isFacingCamera(e) {
+    return this.appWcRef.cameraManager.cameras.main.getWorldDirection(this._cameraDirection), e.angleTo(this._cameraDirection) > Math.PI / 2.2;
+  }
+  render() {
+    return this.enabled ? u`
+            <div id="dimensionIndicators">
+                <epg-dimension-label 
+                    id="dimensionsLabelLength" 
+                    label=${this._dimensionsInDisplayUnit.length.toFixed(2)} 
+                    unit-symbol=${this.dimensionsUnitSymbol} 
+                    class="dimensions-label ${this._isFacingCamera(this._dimensionIndicatorNormals.length) ? "" : "occluded"}" 
+                    theme="dark" 
+                    size="medium"
+                    ?disabled=${!this.enabled}
+                    style="left: ${this._currentDimensionsIndicatorState.length.midPoint.screenPos.x}px; top: ${this._currentDimensionsIndicatorState.length.midPoint.screenPos.y}px"
+                ></epg-dimension-label>
+
+                <epg-dimension-label 
+                    id="dimensionsLabelDepth" 
+                    label=${this._dimensionsInDisplayUnit.depth.toFixed(2)} 
+                    unit-symbol=${this.dimensionsUnitSymbol} 
+                    class="dimensions-label ${this._isFacingCamera(this._dimensionIndicatorNormals.depth) ? "" : "occluded"}" 
+                    theme="dark" 
+                    size="medium"
+                    ?disabled=${!this.enabled}
+                    style="left: ${this._currentDimensionsIndicatorState.depth.midPoint.screenPos.x}px; top: ${this._currentDimensionsIndicatorState.depth.midPoint.screenPos.y}px;"
+                ></epg-dimension-label>
+                
+                <epg-dimension-label 
+                    id="dimensionsLabelHeight" 
+                    label=${this._dimensionsInDisplayUnit.height.toFixed(2)} 
+                    unit-symbol=${this.dimensionsUnitSymbol} 
+                    class="dimensions-label ${this._isFacingCamera(this._dimensionIndicatorNormals.height) ? "" : "occluded"}" 
+                    theme="dark" 
+                    size="medium"
+                    ?disabled=${!this.enabled}
+                    style="left: ${this._currentDimensionsIndicatorState.height.midPoint.screenPos.x}px; top: ${this._currentDimensionsIndicatorState.height.midPoint.screenPos.y}px;"
+                ></epg-dimension-label>
+            </div>
+        ` : w;
+  }
+};
+d([
+  c({ type: Boolean, attribute: "enabled" })
+], a.prototype, "enabled");
+d([
+  c({ type: Boolean, attribute: "visualize-bounds" })
+], a.prototype, "visualizeBounds");
+d([
+  c({ type: String, attribute: "dimensions-unit" })
+], a.prototype, "dimensionsUnit");
+d([
+  c({ type: String, attribute: "dimensions-unit-symbol" })
+], a.prototype, "dimensionsUnitSymbol");
+d([
+  _()
+], a.prototype, "_dimensionsInDisplayUnit");
+d([
+  _()
+], a.prototype, "_currentDimensionsState");
+d([
+  _()
+], a.prototype, "_currentDimensionsIndicatorState");
+let E = a;
+export {
+  E as DimensionsManager
+};

package/dist/epg-button-view-in-your-space-29ehH_AX.js

@@ -0,0 +1,72 @@
+import { r as $, i as g, n as c } from "./three.module-CYfxkCtM.js";
+import { g as e, D as r } from "./baseUiComponent-_PPHqnvV.js";
+import { E as m } from "./HotspotsManager-mmFi8qV9.js";
+const s = "epg-button-view-in-your-space", l = {
+  label: {
+    name: "label",
+    defaultValue: "View In Your Space"
+  },
+  rightIcon: {
+    name: "right-icon",
+    defaultValue: ""
+  }
+};
+var S = Object.defineProperty, b = (t, u, n, v) => {
+  for (var o = void 0, a = t.length - 1, d; a >= 0; a--)
+    (d = t[a]) && (o = d(u, n, o) || o);
+  return o && S(u, n, o), o;
+};
+const p = $(
+  `${e(r.Space.Padding.Medium.$value)} ${e(r.Space.Padding.Regular.$value)}`
+);
+class i extends m {
+  constructor() {
+    super(...arguments), this.label = l.label.defaultValue.toString(), this.rightIcon = l.rightIcon.defaultValue.toString();
+  }
+  static {
+    this.styles = [
+      super.styles,
+      g`
+            :host {
+                border: ${e(r.Size.Stroke.Regular.$value)} solid;
+                border-radius: ${e(r.Size.Radius.Full.$value)};
+                border-color: ${e(
+        r.Color.Border.SubtlePrimary.$value
+      )};
+                background-color: ${e(
+        r.Color.Fill.SubtleSecondary.$value
+      )};
+                color: ${e(r.Color.Text.NeutralPrimary.$value)};
+                padding: ${p};
+            }
+
+            :host(:hover) {
+                border: ${e(r.Size.Stroke.Thick.$value)} solid;
+                border-color: ${e(
+        r.Color.Border.SubtlePrimary.$value
+      )};
+                background-color: ${e(
+        r.Color.Fill.SubtlePrimary.$value
+      )};
+            }
+
+            :host(:active) {
+                border: ${e(r.Size.Stroke.Thick.$value)} solid;
+                border-color: ${e(
+        r.Color.Border.SubtlePrimary.$value
+      )};
+                background-color: ${e(
+        r.Color.Fill.NeutralTertiary.$value
+      )};
+            }
+        `
+    ];
+  }
+}
+b([
+  c({ attribute: l.label.name })
+], i.prototype, "label");
+b([
+  c({ attribute: l.rightIcon.name })
+], i.prototype, "rightIcon");
+window.customElements.get(s) || window.customElements.define(s, i);

package/dist/epigraph-button.js

@@ -0,0 +1,191 @@
+import { i as h, x as d, n as s } from "./three.module-CYfxkCtM.js";
+import { E as g, a as c } from "./epigraph-threed-core-oXi9QFHJ.js";
+import "./epg-button-view-in-your-space-29ehH_AX.js";
+import { P as f, A as _ } from "./AppHelpers-DdbyrHJf.js";
+class m {
+  constructor({ nexusApiResultPayload: e }) {
+    window.epigraph.logger.info({ title: "nexusApiPayload", details: e }), this._data = e;
+  }
+  getData() {
+    return this._data;
+  }
+  getExperienceDataSettings() {
+    return {};
+  }
+  getArGlbUrl() {
+    return this._data.product_variant.assets.ar_assets.glb.url;
+  }
+  getArUsdzUrl() {
+    return this._data.product_variant.assets.ar_assets.usdz.url;
+  }
+  getProductVariantIdentifier() {
+    return this._data.product_variant.variant_identifier;
+  }
+}
+const i = {
+  label: {
+    name: "label",
+    defaultValue: "View In Your Space"
+  },
+  sku: {
+    name: "sku",
+    defaultValue: "sku-epigraph-logo-default"
+  },
+  shopifyVariantId: {
+    name: "shopify-variant-id",
+    defaultValue: ""
+  },
+  upc: {
+    name: "upc",
+    defaultValue: ""
+  },
+  asin: {
+    name: "asin",
+    defaultValue: ""
+  }
+};
+var w = Object.defineProperty, o = (p, e, t, y) => {
+  for (var a = void 0, u = p.length - 1, l; u >= 0; u--)
+    (l = p[u]) && (a = l(e, t, a) || a);
+  return a && w(e, t, a), a;
+};
+const n = class r extends g {
+  constructor() {
+    super(), this._loggerContext = "EPIGRAPH BUTTON", this.featuresToEnable = {
+      viewer: !1,
+      hotspots: !1,
+      dimensions: !1,
+      viewInYourSpace: !0,
+      help: !1
+    }, this.epigraphWebsiteRedirectUrls = {
+      icon: "https://www.epigraph.us/?utm_source=web&utm_medium=experience&utm_campaign=+button&utm_id=powered-by&utm_content=icon",
+      modal: "https://www.epigraph.us/?utm_source=web&utm_medium=experience&utm_campaign=+button&utm_id=powered-by&utm_content=modal"
+    }, this.label = i.label.defaultValue.toString(), this.sku = i.sku.defaultValue.toString(), this.shopify_variant_id = i.shopifyVariantId.defaultValue.toString(), this.upc = i.upc.defaultValue.toString(), this.asin = i.asin.defaultValue.toString(), this._identifier = "", this._identifierType = "", window.epigraph.logger.info({
+      title: `Initializing ${r.webComponentName}...`,
+      contextOverride: this._loggerContext
+    });
+  }
+  static {
+    this.webComponentName = "epigraph-button";
+  }
+  static {
+    this.styles = [
+      super.styles,
+      h`
+            :host {
+                --ar-button-display: none;
+            }
+
+            model-viewer {
+                width: 0;
+                height: 0;
+            }
+        `
+    ];
+  }
+  static setupWebComponent() {
+    window.customElements.get(r.webComponentName) || window.customElements.define(r.webComponentName, r);
+  }
+  get identifier() {
+    return this._identifier;
+  }
+  get identifierType() {
+    return this._identifierType;
+  }
+  getExperienceData() {
+    return this._experienceData.getData();
+  }
+  getExperienceDataSettings() {
+    return this._experienceData.getExperienceDataSettings();
+  }
+  async _fetchDataFromNexus() {
+    const e = new f(
+      _.resolveNexusEndpoint(this.apiMode),
+      window.location.href,
+      window.epigraph.epigraphSessionId,
+      this.solutionVersion,
+      this.xPath
+    );
+    let t = null;
+    switch (this._identifierType) {
+      case "sku":
+        t = await e.getButtonBySku(this._identifier);
+        break;
+      case "shopify_variant_id":
+        t = await e.getButtonByShopifyVariantId(this._identifier);
+        break;
+      case "upc":
+        t = await e.getButtonByUpc(this._identifier);
+        break;
+      case "asin":
+        t = await e.getButtonByAsin(this._identifier);
+        break;
+      default:
+        return window.epigraph.logger.error({
+          title: `Identifier type: '${this._identifierType}' not supported!`,
+          contextOverride: this._loggerContext
+        }), Promise.reject();
+    }
+    return t;
+  }
+  async _onIdentifierOrTypeChange() {
+    if (this.isLoading = !0, await this.resolveIdentifierAndType(), window.epigraph.logger.info({ title: "IDENTIFIER CHANGED", details: `${this._identifier} -- ${this._identifierType}` }), !this._identifier || !this._identifierType)
+      return;
+    const e = await this._fetchDataFromNexus();
+    if (!e.success)
+      return await this.onAuthenticationFailed(e.message), Promise.reject();
+    this._experienceData = new m({ nexusApiResultPayload: e.payload });
+    const t = this._experienceData.getArGlbUrl();
+    t !== void 0 && (this.viewInYourSpaceManager.glbSrc = t, this.viewInYourSpaceManager.variantName = this._experienceData.getProductVariantIdentifier()), this.isLoading = !1;
+  }
+  /**
+   * The following properties can change the identifier and it's type on this web component.
+   */
+  async resolveIdentifierAndType() {
+    this.sku ? (this._identifierType = "sku", this._identifier = this.sku) : this.shopify_variant_id ? (this._identifierType = "shopify_variant_id", this._identifier = this.shopify_variant_id) : this.upc ? (this._identifierType = "upc", this._identifier = this.upc) : this.asin && (this._identifierType = "asin", this._identifier = this.asin);
+  }
+  /**
+   * What happens when any of the HTML attributes are changed.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  updated(e) {
+    (e.has("sku") || e.has("shopify_variant_id") || e.has("upc") || e.has("asin")) && this._onIdentifierOrTypeChange();
+  }
+  renderAppUiElemChildren() {
+    return d`
+            <epg-button-view-in-your-space 
+                id="viewInYourSpaceButton" 
+                @epgonclick=${this.launchAR} 
+                ?is-loading=${this.isLoading}
+                label=${this.label}
+            ></epg-button-view-in-your-space>
+
+            ${this._renderViewInYourSpaceManager()}
+        `;
+  }
+  async setup() {
+    window.epigraph.logger.table({ title: "Setting up...", contextOverride: this._loggerContext }), this._appEvents = new c(this), window.epigraph.logger.info({
+      title: "All Initializations Complete",
+      contextOverride: this._loggerContext
+    });
+  }
+};
+o([
+  s({ type: String, attribute: i.label.name })
+], n.prototype, "label");
+o([
+  s({ type: String, attribute: i.sku.name })
+], n.prototype, "sku");
+o([
+  s({ type: String, attribute: i.shopifyVariantId.name })
+], n.prototype, "shopify_variant_id");
+o([
+  s({ type: String, attribute: i.upc.name })
+], n.prototype, "upc");
+o([
+  s({ type: String, attribute: i.asin.name })
+], n.prototype, "asin");
+let S = n;
+export {
+  S as EpigraphButton
+};