@plattar/plattar-ar-adapter 1.155.3 → 1.155.4-b2

package/build/es2015/plattar-ar-adapter.js

@@ -1432,23 +1432,110 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
             return onAttributesUpdated;
           }()
         }, {
-          key: "startViewerQRCode",
+          key: "startARQRCode",
           value: function () {
-            var _startViewerQRCode = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee6(options) {
-              var _this15 = this;
-              var sceneID, opt, viewer, width, height, dst, configState, showAR, showUI;
+            var _startARQRCode = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee6(options) {
+              var dState, product, controller;
               return _regeneratorRuntime().wrap(function _callee6$(_context6) {
                 while (1) switch (_context6.prev = _context6.next) {
+                  case 0:
+                    _context6.prev = 0;
+                    _context6.next = 3;
+                    return this.getConfiguratorState();
+                  case 3:
+                    dState = _context6.sent;
+                    // if this is declared, we have a furniture scene that we need to re-create the embed
+                    // with new attributes
+                    product = dState.state.firstOfType("product");
+                    if (!product) {
+                      _context6.next = 14;
+                      break;
+                    }
+                    this.parent.lockObserver();
+                    this.parent.destroy();
+                    this.setAttribute("product-id", product.scene_product_id);
+                    this.parent.unlockObserver();
+                    controller = this.parent.create();
+                    if (!controller) {
+                      _context6.next = 13;
+                      break;
+                    }
+                    return _context6.abrupt("return", controller.startARQRCode(options));
+                  case 13:
+                    return _context6.abrupt("return", Promise.reject(new Error("ConfiguratorController.startARQRCode() - legacy product transition failed")));
+                  case 14:
+                    _context6.next = 18;
+                    break;
+                  case 16:
+                    _context6.prev = 16;
+                    _context6.t0 = _context6["catch"](0);
+                  case 18:
+                    return _context6.abrupt("return", _get(_getPrototypeOf(ConfiguratorController.prototype), "startARQRCode", this).call(this, options));
+                  case 19:
+                  case "end":
+                    return _context6.stop();
+                }
+              }, _callee6, this, [[0, 16]]);
+            }));
+            function startARQRCode(_x3) {
+              return _startARQRCode.apply(this, arguments);
+            }
+            return startARQRCode;
+          }()
+        }, {
+          key: "startViewerQRCode",
+          value: function () {
+            var _startViewerQRCode = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee7(options) {
+              var _this15 = this;
+              var sceneID, configState, dState, product, controller, opt, viewer, width, height, dst, showAR, showUI;
+              return _regeneratorRuntime().wrap(function _callee7$(_context7) {
+                while (1) switch (_context7.prev = _context7.next) {
                   case 0:
                     // remove the old renderer instance if any
                     this.removeRenderer();
                     sceneID = this.getAttribute("scene-id");
                     if (sceneID) {
-                      _context6.next = 4;
+                      _context7.next = 4;
                       break;
                     }
-                    throw new Error("ConfiguratorController.startQRCode() - minimum required attributes not set, use scene-id as a minimum");
+                    throw new Error("ConfiguratorController.startViewerQRCode() - minimum required attributes not set, use scene-id as a minimum");
                   case 4:
+                    // optional attributes
+                    configState = null;
+                    _context7.prev = 5;
+                    _context7.next = 8;
+                    return this.getConfiguratorState();
+                  case 8:
+                    dState = _context7.sent;
+                    // if this is declared, we have a furniture scene that we need to re-create the embed
+                    // with new attributes
+                    product = dState.state.firstOfType("product");
+                    if (!product) {
+                      _context7.next = 19;
+                      break;
+                    }
+                    this.parent.lockObserver();
+                    this.parent.destroy();
+                    this.setAttribute("product-id", product.scene_product_id);
+                    this.parent.unlockObserver();
+                    controller = this.parent.create();
+                    if (!controller) {
+                      _context7.next = 18;
+                      break;
+                    }
+                    return _context7.abrupt("return", controller.startViewerQRCode(options));
+                  case 18:
+                    return _context7.abrupt("return", Promise.reject(new Error("ConfiguratorController.startViewerQRCode() - legacy product transition failed")));
+                  case 19:
+                    configState = dState.state.encode();
+                    _context7.next = 25;
+                    break;
+                  case 22:
+                    _context7.prev = 22;
+                    _context7.t0 = _context7["catch"](5);
+                    // config state is not available
+                    configState = null;
+                  case 25:
                     opt = options || this._GetDefaultQROptions();
                     viewer = document.createElement("plattar-qrcode");
                     this._element = viewer;
@@ -1467,23 +1554,9 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
                       viewer.setAttribute("qr-type", opt.qrType);
                     }
                     viewer.setAttribute("shorten", opt.shorten && (opt.shorten === true || opt.shorten === "true") ? "true" : "false");
-                    dst = plattar_api_1.Server.location().base + "renderer/configurator.html?scene_id=" + sceneID; // optional attributes
-                    configState = null;
+                    dst = plattar_api_1.Server.location().base + "renderer/configurator.html?scene_id=" + sceneID;
                     showAR = this.getAttribute("show-ar");
                     showUI = this.getAttribute("show-ui");
-                    _context6.prev = 19;
-                    _context6.next = 22;
-                    return this.getConfiguratorState();
-                  case 22:
-                    configState = _context6.sent.state.encode();
-                    _context6.next = 28;
-                    break;
-                  case 25:
-                    _context6.prev = 25;
-                    _context6.t0 = _context6["catch"](19);
-                    // config state is not available
-                    configState = null;
-                  case 28:
                     if (showUI && showUI === "true") {
                       dst = plattar_api_1.Server.location().base + "configurator/dist/index.html?scene_id=" + sceneID;
                     }
@@ -1496,19 +1569,19 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
                     viewer.setAttribute("url", opt.url || dst);
                     this._state = plattar_controller_1.ControllerState.QRCode;
                     this._prevQROpt = opt;
-                    return _context6.abrupt("return", new Promise(function (accept, reject) {
+                    return _context7.abrupt("return", new Promise(function (accept, reject) {
                       viewer.onload = function () {
                         return accept(viewer);
                       };
                       _this15.append(viewer);
                     }));
-                  case 35:
+                  case 46:
                   case "end":
-                    return _context6.stop();
+                    return _context7.stop();
                 }
-              }, _callee6, this, [[19, 25]]);
+              }, _callee7, this, [[5, 22]]);
             }));
-            function startViewerQRCode(_x3) {
+            function startViewerQRCode(_x4) {
               return _startViewerQRCode.apply(this, arguments);
             }
             return startViewerQRCode;
@@ -1516,21 +1589,57 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
         }, {
           key: "startRenderer",
           value: function () {
-            var _startRenderer = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee7() {
+            var _startRenderer = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee8() {
               var _this16 = this;
-              var sceneID, width, height, server, viewer, configState, showAR, showUI;
-              return _regeneratorRuntime().wrap(function _callee7$(_context7) {
-                while (1) switch (_context7.prev = _context7.next) {
+              var sceneID, configState, dState, product, controller, width, height, server, viewer, showAR, showUI;
+              return _regeneratorRuntime().wrap(function _callee8$(_context8) {
+                while (1) switch (_context8.prev = _context8.next) {
                   case 0:
                     // remove the old renderer instance if any
                     this.removeRenderer();
                     sceneID = this.getAttribute("scene-id");
                     if (sceneID) {
-                      _context7.next = 4;
+                      _context8.next = 4;
                       break;
                     }
                     throw new Error("ConfiguratorController.startRenderer() - minimum required attributes not set, use scene-id as a minimum");
                   case 4:
+                    // optional attributes
+                    configState = null;
+                    _context8.prev = 5;
+                    _context8.next = 8;
+                    return this.getConfiguratorState();
+                  case 8:
+                    dState = _context8.sent;
+                    // if this is declared, we have a furniture scene that we need to re-create the embed
+                    // with new attributes
+                    product = dState.state.firstOfType("product");
+                    if (!product) {
+                      _context8.next = 19;
+                      break;
+                    }
+                    this.parent.lockObserver();
+                    this.parent.destroy();
+                    this.setAttribute("product-id", product.scene_product_id);
+                    this.parent.unlockObserver();
+                    controller = this.parent.create();
+                    if (!controller) {
+                      _context8.next = 18;
+                      break;
+                    }
+                    return _context8.abrupt("return", controller.startRenderer());
+                  case 18:
+                    return _context8.abrupt("return", Promise.reject(new Error("ConfiguratorController.startRenderer() - legacy product transition failed")));
+                  case 19:
+                    configState = dState;
+                    _context8.next = 25;
+                    break;
+                  case 22:
+                    _context8.prev = 22;
+                    _context8.t0 = _context8["catch"](5);
+                    // config state is not available
+                    configState = null;
+                  case 25:
                     // required attributes with defaults for plattar-configurator node
                     width = this.getAttribute("width") || "500px";
                     height = this.getAttribute("height") || "500px";
@@ -1541,21 +1650,6 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
                     viewer.setAttribute("height", height);
                     viewer.setAttribute("server", server);
                     viewer.setAttribute("scene-id", sceneID);
-                    // optional attributes
-                    configState = null;
-                    _context7.prev = 14;
-                    _context7.next = 17;
-                    return this.getConfiguratorState();
-                  case 17:
-                    configState = _context7.sent;
-                    _context7.next = 23;
-                    break;
-                  case 20:
-                    _context7.prev = 20;
-                    _context7.t0 = _context7["catch"](14);
-                    // config state is not available
-                    configState = null;
-                  case 23:
                     showAR = this.getAttribute("show-ar");
                     showUI = this.getAttribute("show-ui");
                     if (configState) {
@@ -1568,18 +1662,18 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
                       viewer.setAttribute("show-ui", showUI);
                     }
                     this._state = plattar_controller_1.ControllerState.Renderer;
-                    return _context7.abrupt("return", new Promise(function (accept, reject) {
+                    return _context8.abrupt("return", new Promise(function (accept, reject) {
                       _this16.append(viewer);
                       if (configState) {
                         _this16.setupMessengerObservers(viewer, configState);
                       }
                       return accept(viewer);
                     }));
-                  case 30:
+                  case 41:
                   case "end":
-                    return _context7.stop();
+                    return _context8.stop();
                 }
-              }, _callee7, this, [[14, 20]]);
+              }, _callee8, this, [[5, 22]]);
             }));
             function startRenderer() {
               return _startRenderer.apply(this, arguments);
@@ -1589,30 +1683,61 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
         }, {
           key: "initAR",
           value: function () {
-            var _initAR = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee8() {
-              var arMode;
-              return _regeneratorRuntime().wrap(function _callee8$(_context8) {
-                while (1) switch (_context8.prev = _context8.next) {
+            var _initAR = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee9() {
+              var dState, product, controller, arMode;
+              return _regeneratorRuntime().wrap(function _callee9$(_context9) {
+                while (1) switch (_context9.prev = _context9.next) {
                   case 0:
                     if (util_1.Util.canAugment()) {
-                      _context8.next = 2;
+                      _context9.next = 2;
                       break;
                     }
                     throw new Error("ConfiguratorController.initAR() - cannot proceed as AR not available in context");
                   case 2:
+                    _context9.prev = 2;
+                    _context9.next = 5;
+                    return this.getConfiguratorState();
+                  case 5:
+                    dState = _context9.sent;
+                    // if this is declared, we have a furniture scene that we need to re-create the embed
+                    // with new attributes
+                    product = dState.state.firstOfType("product");
+                    if (!product) {
+                      _context9.next = 16;
+                      break;
+                    }
+                    this.parent.lockObserver();
+                    this.parent.destroy();
+                    this.setAttribute("product-id", product.scene_product_id);
+                    this.parent.unlockObserver();
+                    controller = this.parent.create();
+                    if (!controller) {
+                      _context9.next = 15;
+                      break;
+                    }
+                    return _context9.abrupt("return", controller.initAR());
+                  case 15:
+                    return _context9.abrupt("return", Promise.reject(new Error("ConfiguratorController.initAR() - legacy product transition failed")));
+                  case 16:
+                    _context9.next = 20;
+                    break;
+                  case 18:
+                    _context9.prev = 18;
+                    _context9.t0 = _context9["catch"](2);
+                  case 20:
                     arMode = this.getAttribute("ar-mode") || "generated";
-                    _context8.t0 = arMode.toLowerCase();
-                    _context8.next = _context8.t0 === "inherited" ? 6 : _context8.t0 === "generated" ? 7 : 7;
+                    _context9.t1 = arMode.toLowerCase();
+                    _context9.next = _context9.t1 === "inherited" ? 24 : _context9.t1 === "generated" ? 25 : 25;
                     break;
-                  case 6:
-                    return _context8.abrupt("return", this._InitARInherited());
-                  case 7:
-                    return _context8.abrupt("return", this._InitARGenerated());
-                  case 8:
+                  case 24:
+                    return _context9.abrupt("return", this._InitARInherited());
+                  case 25:
+                    return _context9.abrupt("return", this._InitARGenerated());
+                  case 26:
                   case "end":
-                    return _context8.stop();
+                    return _context9.stop();
                 }
-              }, _callee8, this);
+              }, _callee9, this, [[2, 18]]);
             }));
             function initAR() {
               return _initAR.apply(this, arguments);
@@ -1625,36 +1750,36 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
         }, {
           key: "_InitARInherited",
           value: function () {
-            var _InitARInherited2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee9() {
+            var _InitARInherited2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee10() {
               var sceneID, state, first, sceneProductAR;
-              return _regeneratorRuntime().wrap(function _callee9$(_context9) {
-                while (1) switch (_context9.prev = _context9.next) {
+              return _regeneratorRuntime().wrap(function _callee10$(_context10) {
+                while (1) switch (_context10.prev = _context10.next) {
                   case 0:
                     sceneID = this.getAttribute("scene-id");
                     if (sceneID) {
-                      _context9.next = 3;
+                      _context10.next = 3;
                       break;
                     }
                     throw new Error("ConfiguratorController.initAR() - inherited AR minimum required attributes not set, use scene-id as a minimum");
                   case 3:
-                    _context9.next = 5;
+                    _context10.next = 5;
                     return this.getConfiguratorState();
                   case 5:
-                    state = _context9.sent.state;
+                    state = _context10.sent.state;
                     first = state.first();
                     if (!first) {
-                      _context9.next = 10;
+                      _context10.next = 10;
                       break;
                     }
                     sceneProductAR = new scene_product_ar_1.SceneProductAR(first.scene_product_id, first.product_variation_id);
-                    return _context9.abrupt("return", sceneProductAR.init());
+                    return _context10.abrupt("return", sceneProductAR.init());
                   case 10:
                     throw new Error("ConfiguratorController.initAR() - invalid decoded config-state does not have any product states");
                   case 11:
                   case "end":
-                    return _context9.stop();
+                    return _context10.stop();
                 }
-              }, _callee9, this);
+              }, _callee10, this);
             }));
             function _InitARInherited() {
               return _InitARInherited2.apply(this, arguments);
@@ -1667,30 +1792,30 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
         }, {
           key: "_InitARGenerated",
           value: function () {
-            var _InitARGenerated2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee10() {
+            var _InitARGenerated2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee11() {
               var sceneID, configAR;
-              return _regeneratorRuntime().wrap(function _callee10$(_context10) {
-                while (1) switch (_context10.prev = _context10.next) {
+              return _regeneratorRuntime().wrap(function _callee11$(_context11) {
+                while (1) switch (_context11.prev = _context11.next) {
                   case 0:
                     sceneID = this.getAttribute("scene-id");
                     if (sceneID) {
-                      _context10.next = 3;
+                      _context11.next = 3;
                       break;
                     }
                     throw new Error("VTOController.initAR() - generated AR minimum required attributes not set, use scene-id as a minimum");
                   case 3:
-                    _context10.t0 = configurator_ar_1.ConfiguratorAR;
-                    _context10.next = 6;
+                    _context11.t0 = configurator_ar_1.ConfiguratorAR;
+                    _context11.next = 6;
                     return this.getConfiguratorState();
                   case 6:
-                    _context10.t1 = _context10.sent;
-                    configAR = new _context10.t0(_context10.t1);
-                    return _context10.abrupt("return", configAR.init());
+                    _context11.t1 = _context11.sent;
+                    configAR = new _context11.t0(_context11.t1);
+                    return _context11.abrupt("return", configAR.init());
                   case 9:
                   case "end":
-                    return _context10.stop();
+                    return _context11.stop();
                 }
-              }, _callee10, this);
+              }, _callee11, this);
             }));
             function _InitARGenerated() {
               return _InitARGenerated2.apply(this, arguments);
@@ -1772,15 +1897,15 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
         }, {
           key: "createConfiguratorState",
           value: function () {
-            var _createConfiguratorState = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee11() {
+            var _createConfiguratorState = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee12() {
               var sceneID, configState, variationIDs, variationSKUs, decodedState, variationIDList, variationSKUList;
-              return _regeneratorRuntime().wrap(function _callee11$(_context11) {
-                while (1) switch (_context11.prev = _context11.next) {
+              return _regeneratorRuntime().wrap(function _callee12$(_context12) {
+                while (1) switch (_context12.prev = _context12.next) {
                   case 0:
                     // get our Scene ID
                     sceneID = this.getAttribute("scene-id");
                     if (sceneID) {
-                      _context11.next = 3;
+                      _context12.next = 3;
                       break;
                     }
                     throw new Error("PlattarController.createConfiguratorState() - cannot create as required attribute scene-id is not defined");
@@ -1789,22 +1914,22 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
                     variationIDs = this.getAttribute("variation-id"); // get a list of variation SKU's to use for initialising
                     variationSKUs = this.getAttribute("variation-sku"); // generate the decoded configurator state
                     if (!configState) {
-                      _context11.next = 12;
+                      _context12.next = 12;
                       break;
                     }
-                    _context11.next = 9;
+                    _context12.next = 9;
                     return configurator_state_1.ConfiguratorState.decodeState(sceneID, configState);
                   case 9:
-                    _context11.t0 = _context11.sent;
-                    _context11.next = 15;
+                    _context12.t0 = _context12.sent;
+                    _context12.next = 15;
                     break;
                   case 12:
-                    _context11.next = 14;
+                    _context12.next = 14;
                     return configurator_state_1.ConfiguratorState.decodeScene(sceneID);
                   case 14:
-                    _context11.t0 = _context11.sent;
+                    _context12.t0 = _context12.sent;
                   case 15:
-                    decodedState = _context11.t0;
+                    decodedState = _context12.t0;
                     // change the ID's and SKU's (if any) of the default configuration state
                     variationIDList = variationIDs ? variationIDs.split(",") : [];
                     variationSKUList = variationSKUs ? variationSKUs.split(",") : [];
@@ -1815,12 +1940,12 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
                       decodedState.state.setVariationSKU(variationSKU);
                     });
                     // return fully modified configuration state
-                    return _context11.abrupt("return", decodedState);
+                    return _context12.abrupt("return", decodedState);
                   case 21:
                   case "end":
-                    return _context11.stop();
+                    return _context12.stop();
                 }
-              }, _callee11, this);
+              }, _callee12, this);
             }));
             function createConfiguratorState() {
               return _createConfiguratorState.apply(this, arguments);
@@ -1874,21 +1999,21 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
         }, {
           key: "startAR",
           value: function () {
-            var _startAR = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee12() {
+            var _startAR = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee13() {
               var launcher;
-              return _regeneratorRuntime().wrap(function _callee12$(_context12) {
-                while (1) switch (_context12.prev = _context12.next) {
+              return _regeneratorRuntime().wrap(function _callee13$(_context13) {
+                while (1) switch (_context13.prev = _context13.next) {
                   case 0:
-                    _context12.next = 2;
+                    _context13.next = 2;
                     return this.initAR();
                   case 2:
-                    launcher = _context12.sent;
-                    return _context12.abrupt("return", launcher.start());
+                    launcher = _context13.sent;
+                    return _context13.abrupt("return", launcher.start());
                   case 4:
                   case "end":
-                    return _context12.stop();
+                    return _context13.stop();
                 }
-              }, _callee12, this);
+              }, _callee13, this);
             }));
             function startAR() {
               return _startAR.apply(this, arguments);
@@ -1903,26 +2028,26 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
         }, {
           key: "startQRCode",
           value: function () {
-            var _startQRCode = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee13(options) {
+            var _startQRCode = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee14(options) {
               var qrType;
-              return _regeneratorRuntime().wrap(function _callee13$(_context13) {
-                while (1) switch (_context13.prev = _context13.next) {
+              return _regeneratorRuntime().wrap(function _callee14$(_context14) {
+                while (1) switch (_context14.prev = _context14.next) {
                   case 0:
                     qrType = this.getAttribute("qr-type") || "viewer";
-                    _context13.t0 = qrType.toLowerCase();
-                    _context13.next = _context13.t0 === "ar" ? 4 : _context13.t0 === "viewer" ? 5 : 5;
+                    _context14.t0 = qrType.toLowerCase();
+                    _context14.next = _context14.t0 === "ar" ? 4 : _context14.t0 === "viewer" ? 5 : 5;
                     break;
                   case 4:
-                    return _context13.abrupt("return", this.startARQRCode(options));
+                    return _context14.abrupt("return", this.startARQRCode(options));
                   case 5:
-                    return _context13.abrupt("return", this.startViewerQRCode(options));
+                    return _context14.abrupt("return", this.startViewerQRCode(options));
                   case 6:
                   case "end":
-                    return _context13.stop();
+                    return _context14.stop();
                 }
-              }, _callee13, this);
+              }, _callee14, this);
             }));
-            function startQRCode(_x4) {
+            function startQRCode(_x5) {
               return _startQRCode.apply(this, arguments);
             }
             return startQRCode;
@@ -1935,11 +2060,11 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
         }, {
           key: "startARQRCode",
           value: function () {
-            var _startARQRCode = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee14(options) {
+            var _startARQRCode2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee15(options) {
               var _this17 = this;
               var opt, viewer, width, height, qrOptions, dst, configState, sceneID, embedType, productID, sceneProductID, variationID, variationSKU, arMode;
-              return _regeneratorRuntime().wrap(function _callee14$(_context14) {
-                while (1) switch (_context14.prev = _context14.next) {
+              return _regeneratorRuntime().wrap(function _callee15$(_context15) {
+                while (1) switch (_context15.prev = _context15.next) {
                   case 0:
                     // remove the old renderer instance if any
                     this.removeRenderer();
@@ -1971,16 +2096,16 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
                     variationID = this.getAttribute("variation-id");
                     variationSKU = this.getAttribute("variation-sku");
                     arMode = this.getAttribute("ar-mode");
-                    _context14.prev = 22;
-                    _context14.next = 25;
+                    _context15.prev = 22;
+                    _context15.next = 25;
                     return this.getConfiguratorState();
                   case 25:
-                    configState = _context14.sent.state.encode();
-                    _context14.next = 31;
+                    configState = _context15.sent.state.encode();
+                    _context15.next = 31;
                     break;
                   case 28:
-                    _context14.prev = 28;
-                    _context14.t0 = _context14["catch"](22);
+                    _context15.prev = 28;
+                    _context15.t0 = _context15["catch"](22);
                     // config state not available for some reason
                     configState = null;
                   case 31:
@@ -2011,7 +2136,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
                     viewer.setAttribute("url", opt.url || dst);
                     this._state = ControllerState.QRCode;
                     this._prevQROpt = opt;
-                    return _context14.abrupt("return", new Promise(function (accept, reject) {
+                    return _context15.abrupt("return", new Promise(function (accept, reject) {
                       _this17.append(viewer);
                       viewer.onload = function () {
                         return accept(viewer);
@@ -2019,12 +2144,12 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
                     }));
                   case 43:
                   case "end":
-                    return _context14.stop();
+                    return _context15.stop();
                 }
-              }, _callee14, this, [[22, 28]]);
+              }, _callee15, this, [[22, 28]]);
             }));
-            function startARQRCode(_x5) {
-              return _startARQRCode.apply(this, arguments);
+            function startARQRCode(_x6) {
+              return _startARQRCode2.apply(this, arguments);
             }
             return startARQRCode;
           }()
@@ -2038,7 +2163,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
           }
           /**
            * Returns the specified attribute from the parent
-           * @param attribute - The name of thhe attribute
+           * @param attribute - The name of the attribute
            * @returns - The attribute value or null
            */
         }, {
@@ -2046,6 +2171,19 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
           value: function getAttribute(attribute) {
             return this.parent ? this.parent.hasAttribute(attribute) ? this.parent.getAttribute(attribute) : null : null;
           }
+          /**
+           * Sets a particular attribute into the HTML DOM
+           *
+           * @param attribute - The name of the attribute
+           * @param value - The value of the attribute
+           */
+        }, {
+          key: "setAttribute",
+          value: function setAttribute(attribute, value) {
+            if (this.parent) {
+              this.parent.setAttribute(attribute, value);
+            }
+          }
           /**
            * Appends the provided element into the shadow-root of the parent element
            * @param element - The element to append
@@ -2086,25 +2224,23 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
       var ProductController = /*#__PURE__*/function (_plattar_controller_2) {
         _inherits(ProductController, _plattar_controller_2);
         var _super8 = _createSuper(ProductController);
-        function ProductController(parent) {
+        function ProductController() {
           _classCallCheck(this, ProductController);
-          // this is a hack against DecodedConfiguratorState that's now stored in PlattarController
-          // this is not used in legacy mode
-          return _super8.call(this, parent);
+          return _super8.apply(this, arguments);
         }
         _createClass(ProductController, [{
           key: "getConfiguratorState",
           value: function () {
-            var _getConfiguratorState2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee15() {
-              return _regeneratorRuntime().wrap(function _callee15$(_context15) {
-                while (1) switch (_context15.prev = _context15.next) {
+            var _getConfiguratorState2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee16() {
+              return _regeneratorRuntime().wrap(function _callee16$(_context16) {
+                while (1) switch (_context16.prev = _context16.next) {
                   case 0:
                     throw new Error("ProductController.getConfiguratorState() - legacy embeds do not support configurator states");
                   case 1:
                   case "end":
-                    return _context15.stop();
+                    return _context16.stop();
                 }
-              }, _callee15);
+              }, _callee16);
             }));
             function getConfiguratorState() {
               return _getConfiguratorState2.apply(this, arguments);
@@ -2114,18 +2250,18 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
         }, {
           key: "onAttributesUpdated",
           value: function () {
-            var _onAttributesUpdated2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee16(attributeName) {
+            var _onAttributesUpdated2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee17(attributeName) {
               var state, viewer, variationID;
-              return _regeneratorRuntime().wrap(function _callee16$(_context16) {
-                while (1) switch (_context16.prev = _context16.next) {
+              return _regeneratorRuntime().wrap(function _callee17$(_context17) {
+                while (1) switch (_context17.prev = _context17.next) {
                   case 0:
                     state = this._state; // re-render the QR Code when attributes have changed
                     if (!(state === plattar_controller_1.ControllerState.QRCode)) {
-                      _context16.next = 4;
+                      _context17.next = 4;
                       break;
                     }
                     this.startQRCode(this._prevQROpt);
-                    return _context16.abrupt("return");
+                    return _context17.abrupt("return");
                   case 4:
                     // use the messenger function to change variation when attributes have changed
                     if (state === plattar_controller_1.ControllerState.Renderer) {
@@ -2139,11 +2275,11 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
                     }
                   case 5:
                   case "end":
-                    return _context16.stop();
+                    return _context17.stop();
                 }
-              }, _callee16, this);
+              }, _callee17, this);
             }));
-            function onAttributesUpdated(_x6) {
+            function onAttributesUpdated(_x7) {
               return _onAttributesUpdated2.apply(this, arguments);
             }
             return onAttributesUpdated;
@@ -2387,23 +2523,23 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
         _createClass(VTOController, [{
           key: "getConfiguratorState",
           value: function () {
-            var _getConfiguratorState3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee17() {
-              return _regeneratorRuntime().wrap(function _callee17$(_context17) {
-                while (1) switch (_context17.prev = _context17.next) {
+            var _getConfiguratorState3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee18() {
+              return _regeneratorRuntime().wrap(function _callee18$(_context18) {
+                while (1) switch (_context18.prev = _context18.next) {
                   case 0:
                     if (!this._cachedConfigState) {
-                      _context17.next = 2;
+                      _context18.next = 2;
                       break;
                     }
-                    return _context17.abrupt("return", this._cachedConfigState);
+                    return _context18.abrupt("return", this._cachedConfigState);
                   case 2:
                     this._cachedConfigState = this.createConfiguratorState();
-                    return _context17.abrupt("return", this._cachedConfigState);
+                    return _context18.abrupt("return", this._cachedConfigState);
                   case 4:
                   case "end":
-                    return _context17.stop();
+                    return _context18.stop();
                 }
-              }, _callee17, this);
+              }, _callee18, this);
             }));
             function getConfiguratorState() {
               return _getConfiguratorState3.apply(this, arguments);
@@ -2413,61 +2549,61 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
         }, {
           key: "onAttributesUpdated",
           value: function () {
-            var _onAttributesUpdated3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee18(attributeName) {
+            var _onAttributesUpdated3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee19(attributeName) {
               var state, viewer, variationIDs, variationIDsList, variationSKUs, variationSKUList, configState, _variationIDs2, _variationIDsList2, _configState2, _variationSKUs2, _variationSKUList2;
-              return _regeneratorRuntime().wrap(function _callee18$(_context18) {
-                while (1) switch (_context18.prev = _context18.next) {
+              return _regeneratorRuntime().wrap(function _callee19$(_context19) {
+                while (1) switch (_context19.prev = _context19.next) {
                   case 0:
                     state = this._state;
                     if (!(state === plattar_controller_1.ControllerState.Renderer)) {
-                      _context18.next = 17;
+                      _context19.next = 17;
                       break;
                     }
                     viewer = this.element;
                     if (!viewer) {
-                      _context18.next = 16;
+                      _context19.next = 16;
                       break;
                     }
                     if (!(attributeName === "variation-id")) {
-                      _context18.next = 10;
+                      _context19.next = 10;
                       break;
                     }
                     variationIDs = this.getAttribute("variation-id");
                     variationIDsList = variationIDs ? variationIDs.split(",") : [];
                     if (!(variationIDsList.length > 0)) {
-                      _context18.next = 10;
+                      _context19.next = 10;
                       break;
                     }
-                    _context18.next = 10;
+                    _context19.next = 10;
                     return viewer.messenger.selectVariationID(variationIDsList);
                   case 10:
                     if (!(attributeName === "variation-sku")) {
-                      _context18.next = 16;
+                      _context19.next = 16;
                       break;
                     }
                     variationSKUs = this.getAttribute("variation-sku");
                     variationSKUList = variationSKUs ? variationSKUs.split(",") : [];
                     if (!(variationSKUList.length > 0)) {
-                      _context18.next = 16;
+                      _context19.next = 16;
                       break;
                     }
-                    _context18.next = 16;
+                    _context19.next = 16;
                     return viewer.messenger.selectVariationSKU(variationSKUList);
                   case 16:
-                    return _context18.abrupt("return");
+                    return _context19.abrupt("return");
                   case 17:
                     if (!(state === plattar_controller_1.ControllerState.QRCode)) {
-                      _context18.next = 34;
+                      _context19.next = 34;
                       break;
                     }
                     if (!(attributeName === "variation-id")) {
-                      _context18.next = 25;
+                      _context19.next = 25;
                       break;
                     }
-                    _context18.next = 21;
+                    _context19.next = 21;
                     return this.getConfiguratorState();
                   case 21:
-                    configState = _context18.sent;
+                    configState = _context19.sent;
                     _variationIDs2 = this.getAttribute("variation-id");
                     _variationIDsList2 = _variationIDs2 ? _variationIDs2.split(",") : [];
                     _variationIDsList2.forEach(function (variationID) {
@@ -2475,13 +2611,13 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
                     });
                   case 25:
                     if (!(attributeName === "variation-sku")) {
-                      _context18.next = 32;
+                      _context19.next = 32;
                       break;
                     }
-                    _context18.next = 28;
+                    _context19.next = 28;
                     return this.getConfiguratorState();
                   case 28:
-                    _configState2 = _context18.sent;
+                    _configState2 = _context19.sent;
                     _variationSKUs2 = this.getAttribute("variation-sku");
                     _variationSKUList2 = _variationSKUs2 ? _variationSKUs2.split(",") : [];
                     _variationSKUList2.forEach(function (variationSKU) {
@@ -2489,14 +2625,14 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
                     });
                   case 32:
                     this.startQRCode(this._prevQROpt);
-                    return _context18.abrupt("return");
+                    return _context19.abrupt("return");
                   case 34:
                   case "end":
-                    return _context18.stop();
+                    return _context19.stop();
                 }
-              }, _callee18, this);
+              }, _callee19, this);
             }));
-            function onAttributesUpdated(_x7) {
+            function onAttributesUpdated(_x8) {
               return _onAttributesUpdated3.apply(this, arguments);
             }
             return onAttributesUpdated;
@@ -2504,17 +2640,17 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
         }, {
           key: "startViewerQRCode",
           value: function () {
-            var _startViewerQRCode2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee19(options) {
+            var _startViewerQRCode2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee20(options) {
               var _this23 = this;
               var sceneID, opt, viewer, width, height, dst, configState, showAR, productID, sceneProductID, variationID;
-              return _regeneratorRuntime().wrap(function _callee19$(_context19) {
-                while (1) switch (_context19.prev = _context19.next) {
+              return _regeneratorRuntime().wrap(function _callee20$(_context20) {
+                while (1) switch (_context20.prev = _context20.next) {
                   case 0:
                     // remove the old renderer instance if any
                     this.removeRenderer();
                     sceneID = this.getAttribute("scene-id");
                     if (sceneID) {
-                      _context19.next = 4;
+                      _context20.next = 4;
                       break;
                     }
                     throw new Error("VTOController.startQRCode() - minimum required attributes not set, use scene-id as a minimum");
@@ -2539,16 +2675,16 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
                     viewer.setAttribute("shorten", opt.shorten && (opt.shorten === true || opt.shorten === "true") ? "true" : "false");
                     dst = plattar_api_1.Server.location().base + "renderer/facear.html?scene_id=" + sceneID; // optional attributes
                     configState = null;
-                    _context19.prev = 17;
-                    _context19.next = 20;
+                    _context20.prev = 17;
+                    _context20.next = 20;
                     return this.getConfiguratorState();
                   case 20:
-                    configState = _context19.sent;
-                    _context19.next = 26;
+                    configState = _context20.sent;
+                    _context20.next = 26;
                     break;
                   case 23:
-                    _context19.prev = 23;
-                    _context19.t0 = _context19["catch"](17);
+                    _context20.prev = 23;
+                    _context20.t0 = _context20["catch"](17);
                     // config state is not available
                     configState = null;
                   case 26:
@@ -2574,7 +2710,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
                     viewer.setAttribute("url", opt.url || dst);
                     this._state = plattar_controller_1.ControllerState.QRCode;
                     this._prevQROpt = opt;
-                    return _context19.abrupt("return", new Promise(function (accept, reject) {
+                    return _context20.abrupt("return", new Promise(function (accept, reject) {
                       viewer.onload = function () {
                         return accept(viewer);
                       };
@@ -2582,11 +2718,11 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
                     }));
                   case 39:
                   case "end":
-                    return _context19.stop();
+                    return _context20.stop();
                 }
-              }, _callee19, this, [[17, 23]]);
+              }, _callee20, this, [[17, 23]]);
             }));
-            function startViewerQRCode(_x8) {
+            function startViewerQRCode(_x9) {
               return _startViewerQRCode2.apply(this, arguments);
             }
             return startViewerQRCode;
@@ -2594,17 +2730,17 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
         }, {
           key: "startRenderer",
           value: function () {
-            var _startRenderer2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee20() {
+            var _startRenderer2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee21() {
               var _this24 = this;
               var sceneID, width, height, server, viewer, configState, showAR, productID, sceneProductID, variationID;
-              return _regeneratorRuntime().wrap(function _callee20$(_context20) {
-                while (1) switch (_context20.prev = _context20.next) {
+              return _regeneratorRuntime().wrap(function _callee21$(_context21) {
+                while (1) switch (_context21.prev = _context21.next) {
                   case 0:
                     // remove the old renderer instance if any
                     this.removeRenderer();
                     sceneID = this.getAttribute("scene-id");
                     if (sceneID) {
-                      _context20.next = 4;
+                      _context21.next = 4;
                       break;
                     }
                     throw new Error("VTOController.startRenderer() - minimum required attributes not set, use scene-id as a minimum");
@@ -2621,16 +2757,16 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
                     viewer.setAttribute("scene-id", sceneID);
                     // optional attributes
                     configState = null;
-                    _context20.prev = 14;
-                    _context20.next = 17;
+                    _context21.prev = 14;
+                    _context21.next = 17;
                     return this.getConfiguratorState();
                   case 17:
-                    configState = _context20.sent;
-                    _context20.next = 23;
+                    configState = _context21.sent;
+                    _context21.next = 23;
                     break;
                   case 20:
-                    _context20.prev = 20;
-                    _context20.t0 = _context20["catch"](14);
+                    _context21.prev = 20;
+                    _context21.t0 = _context21["catch"](14);
                     // config state not available
                     configState = null;
                   case 23:
@@ -2654,7 +2790,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
                       viewer.setAttribute("variation-id", variationID);
                     }
                     this._state = plattar_controller_1.ControllerState.Renderer;
-                    return _context20.abrupt("return", new Promise(function (accept, reject) {
+                    return _context21.abrupt("return", new Promise(function (accept, reject) {
                       _this24.append(viewer);
                       if (configState) {
                         _this24.setupMessengerObservers(viewer, configState);
@@ -2663,9 +2799,9 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
                     }));
                   case 34:
                   case "end":
-                    return _context20.stop();
+                    return _context21.stop();
                 }
-              }, _callee20, this, [[14, 20]]);
+              }, _callee21, this, [[14, 20]]);
             }));
             function startRenderer() {
               return _startRenderer2.apply(this, arguments);
@@ -2675,36 +2811,36 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
         }, {
           key: "initAR",
           value: function () {
-            var _initAR2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee21() {
+            var _initAR2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee22() {
               var arMode;
-              return _regeneratorRuntime().wrap(function _callee21$(_context21) {
-                while (1) switch (_context21.prev = _context21.next) {
+              return _regeneratorRuntime().wrap(function _callee22$(_context22) {
+                while (1) switch (_context22.prev = _context22.next) {
                   case 0:
                     if (util_1.Util.canAugment()) {
-                      _context21.next = 2;
+                      _context22.next = 2;
                       break;
                     }
                     throw new Error("VTOController.initAR() - cannot proceed as VTO AR not available in context");
                   case 2:
                     if (util_1.Util.isSafari() || util_1.Util.isChromeOnIOS()) {
-                      _context21.next = 4;
+                      _context22.next = 4;
                       break;
                     }
                     throw new Error("VTOController.initAR() - cannot proceed as VTO AR only available on IOS Mobile devices");
                   case 4:
                     arMode = this.getAttribute("ar-mode") || "generated";
-                    _context21.t0 = arMode.toLowerCase();
-                    _context21.next = _context21.t0 === "inherited" ? 8 : _context21.t0 === "generated" ? 9 : 9;
+                    _context22.t0 = arMode.toLowerCase();
+                    _context22.next = _context22.t0 === "inherited" ? 8 : _context22.t0 === "generated" ? 9 : 9;
                     break;
                   case 8:
-                    return _context21.abrupt("return", this._InitARInherited());
+                    return _context22.abrupt("return", this._InitARInherited());
                   case 9:
-                    return _context21.abrupt("return", this._InitARGenerated());
+                    return _context22.abrupt("return", this._InitARGenerated());
                   case 10:
                   case "end":
-                    return _context21.stop();
+                    return _context22.stop();
                 }
-              }, _callee21, this);
+              }, _callee22, this);
             }));
             function initAR() {
               return _initAR2.apply(this, arguments);
@@ -2717,36 +2853,36 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
         }, {
           key: "_InitARInherited",
           value: function () {
-            var _InitARInherited3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee22() {
+            var _InitARInherited3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee23() {
               var sceneID, state, first, sceneProductAR;
-              return _regeneratorRuntime().wrap(function _callee22$(_context22) {
-                while (1) switch (_context22.prev = _context22.next) {
+              return _regeneratorRuntime().wrap(function _callee23$(_context23) {
+                while (1) switch (_context23.prev = _context23.next) {
                   case 0:
                     sceneID = this.getAttribute("scene-id");
                     if (sceneID) {
-                      _context22.next = 3;
+                      _context23.next = 3;
                       break;
                     }
                     throw new Error("VTOController.initAR() - inherited AR minimum required attributes not set, use scene-id as a minimum");
                   case 3:
-                    _context22.next = 5;
+                    _context23.next = 5;
                     return this.getConfiguratorState();
                   case 5:
-                    state = _context22.sent.state;
+                    state = _context23.sent.state;
                     first = state.first();
                     if (!first) {
-                      _context22.next = 10;
+                      _context23.next = 10;
                       break;
                     }
                     sceneProductAR = new __1.SceneProductAR(first.scene_product_id, first.product_variation_id);
-                    return _context22.abrupt("return", sceneProductAR.init());
+                    return _context23.abrupt("return", sceneProductAR.init());
                   case 10:
                     throw new Error("VTOController.initAR() - invalid decoded config-state does not have any product states");
                   case 11:
                   case "end":
-                    return _context22.stop();
+                    return _context23.stop();
                 }
-              }, _callee22, this);
+              }, _callee23, this);
             }));
             function _InitARInherited() {
               return _InitARInherited3.apply(this, arguments);
@@ -2759,30 +2895,30 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
         }, {
           key: "_InitARGenerated",
           value: function () {
-            var _InitARGenerated3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee23() {
+            var _InitARGenerated3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee24() {
               var sceneID, configAR;
-              return _regeneratorRuntime().wrap(function _callee23$(_context23) {
-                while (1) switch (_context23.prev = _context23.next) {
+              return _regeneratorRuntime().wrap(function _callee24$(_context24) {
+                while (1) switch (_context24.prev = _context24.next) {
                   case 0:
                     sceneID = this.getAttribute("scene-id");
                     if (sceneID) {
-                      _context23.next = 3;
+                      _context24.next = 3;
                       break;
                     }
                     throw new Error("VTOController.initAR() - generated AR minimum required attributes not set, use scene-id as a minimum");
                   case 3:
-                    _context23.t0 = configurator_ar_1.ConfiguratorAR;
-                    _context23.next = 6;
+                    _context24.t0 = configurator_ar_1.ConfiguratorAR;
+                    _context24.next = 6;
                     return this.getConfiguratorState();
                   case 6:
-                    _context23.t1 = _context23.sent;
-                    configAR = new _context23.t0(_context23.t1);
-                    return _context23.abrupt("return", configAR.init());
+                    _context24.t1 = _context24.sent;
+                    configAR = new _context24.t0(_context24.t1);
+                    return _context24.abrupt("return", configAR.init());
                   case 9:
                   case "end":
-                    return _context23.stop();
+                    return _context24.stop();
                 }
-              }, _callee23, this);
+              }, _callee24, this);
             }));
             function _InitARGenerated() {
               return _InitARGenerated3.apply(this, arguments);
@@ -2836,6 +2972,14 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
         EmbedType[EmbedType["VTO"] = 2] = "VTO";
         EmbedType[EmbedType["None"] = 3] = "None";
       })(EmbedType || (EmbedType = {}));
+      /**
+       * Controls the state of the observer
+       */
+      var ObserverState;
+      (function (ObserverState) {
+        ObserverState[ObserverState["Locked"] = 0] = "Locked";
+        ObserverState[ObserverState["Unlocked"] = 1] = "Unlocked";
+      })(ObserverState || (ObserverState = {}));
       /**
        * This is the primary <plattar-embed /> node that allows easy embedding
        * of Plattar related content
@@ -2849,6 +2993,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
           _this25 = _super10.call(this);
           // this is the current embed type, viewer by default
           _this25._currentType = EmbedType.None;
+          _this25._observerState = ObserverState.Unlocked;
           _this25._controller = null;
           _this25._currentSceneID = null;
           _this25._observer = null;
@@ -2879,16 +3024,18 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
             plattar_api_1.Server.create(plattar_api_1.Server.match(server || "production"));
             if (!this._observer) {
               this._observer = new MutationObserver(function (mutations) {
-                mutations.forEach(function (mutation) {
-                  if (mutation.type === "attributes") {
-                    var attributeName = mutation.attributeName ? mutation.attributeName : "none";
-                    if (_this26._currentType !== EmbedType.Legacy) {
-                      _this26._CreateEmbed(attributeName);
-                    } else {
-                      _this26._OnAttributesUpdated(attributeName);
+                if (_this26._observerState === ObserverState.Unlocked) {
+                  mutations.forEach(function (mutation) {
+                    if (mutation.type === "attributes") {
+                      var attributeName = mutation.attributeName ? mutation.attributeName : "none";
+                      if (_this26._currentType !== EmbedType.Legacy) {
+                        _this26._CreateEmbed(attributeName);
+                      } else {
+                        _this26._OnAttributesUpdated(attributeName);
+                      }
                     }
-                  }
-                });
+                  });
+                }
               });
               this._observer.observe(this, {
                 attributes: true
@@ -2898,9 +3045,26 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
             if (productID) {
               this._currentType = EmbedType.Legacy;
               this._CreateLegacyEmbed();
-              return;
+              return this._controller;
             }
             this._CreateEmbed("none");
+            return this._controller;
+          }
+          /**
+           * Locks the observer so attribute changes do not trigger anything
+           */
+        }, {
+          key: "lockObserver",
+          value: function lockObserver() {
+            this._observerState = ObserverState.Locked;
+          }
+          /**
+           * Unlocks the observer so attribute changes will start to re-trigger properly
+           */
+        }, {
+          key: "unlockObserver",
+          value: function unlockObserver() {
+            this._observerState = ObserverState.Unlocked;
           }
           /**
            * Destroys the active instance of this embed and resets internal state to default
@@ -2996,22 +3160,22 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
         }, {
           key: "initAR",
           value: function () {
-            var _initAR3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee24() {
-              return _regeneratorRuntime().wrap(function _callee24$(_context24) {
-                while (1) switch (_context24.prev = _context24.next) {
+            var _initAR3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee25() {
+              return _regeneratorRuntime().wrap(function _callee25$(_context25) {
+                while (1) switch (_context25.prev = _context25.next) {
                   case 0:
                     if (this._controller) {
-                      _context24.next = 2;
+                      _context25.next = 2;
                       break;
                     }
                     throw new Error("PlattarEmbed.initAR() - cannot execute as controller has not loaded yet");
                   case 2:
-                    return _context24.abrupt("return", this._controller.initAR());
+                    return _context25.abrupt("return", this._controller.initAR());
                   case 3:
                   case "end":
-                    return _context24.stop();
+                    return _context25.stop();
                 }
-              }, _callee24, this);
+              }, _callee25, this);
             }));
             function initAR() {
               return _initAR3.apply(this, arguments);
@@ -3021,22 +3185,22 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
         }, {
           key: "startAR",
           value: function () {
-            var _startAR2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee25() {
-              return _regeneratorRuntime().wrap(function _callee25$(_context25) {
-                while (1) switch (_context25.prev = _context25.next) {
+            var _startAR2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee26() {
+              return _regeneratorRuntime().wrap(function _callee26$(_context26) {
+                while (1) switch (_context26.prev = _context26.next) {
                   case 0:
                     if (this._controller) {
-                      _context25.next = 2;
+                      _context26.next = 2;
                       break;
                     }
                     throw new Error("PlattarEmbed.startAR() - cannot execute as controller has not loaded yet");
                   case 2:
-                    return _context25.abrupt("return", this._controller.startAR());
+                    return _context26.abrupt("return", this._controller.startAR());
                   case 3:
                   case "end":
-                    return _context25.stop();
+                    return _context26.stop();
                 }
-              }, _callee25, this);
+              }, _callee26, this);
             }));
             function startAR() {
               return _startAR2.apply(this, arguments);
@@ -3046,22 +3210,22 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
         }, {
           key: "startViewer",
           value: function () {
-            var _startViewer = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee26() {
-              return _regeneratorRuntime().wrap(function _callee26$(_context26) {
-                while (1) switch (_context26.prev = _context26.next) {
+            var _startViewer = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee27() {
+              return _regeneratorRuntime().wrap(function _callee27$(_context27) {
+                while (1) switch (_context27.prev = _context27.next) {
                   case 0:
                     if (this._controller) {
-                      _context26.next = 2;
+                      _context27.next = 2;
                       break;
                     }
                     throw new Error("PlattarEmbed.startViewer() - cannot execute as controller has not loaded yet");
                   case 2:
-                    return _context26.abrupt("return", this._controller.startRenderer());
+                    return _context27.abrupt("return", this._controller.startRenderer());
                   case 3:
                   case "end":
-                    return _context26.stop();
+                    return _context27.stop();
                 }
-              }, _callee26, this);
+              }, _callee27, this);
             }));
             function startViewer() {
               return _startViewer.apply(this, arguments);
@@ -3071,25 +3235,25 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
         }, {
           key: "startQRCode",
           value: function () {
-            var _startQRCode2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee27() {
+            var _startQRCode2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee28() {
               var options,
-                _args27 = arguments;
-              return _regeneratorRuntime().wrap(function _callee27$(_context27) {
-                while (1) switch (_context27.prev = _context27.next) {
+                _args28 = arguments;
+              return _regeneratorRuntime().wrap(function _callee28$(_context28) {
+                while (1) switch (_context28.prev = _context28.next) {
                   case 0:
-                    options = _args27.length > 0 && _args27[0] !== undefined ? _args27[0] : null;
+                    options = _args28.length > 0 && _args28[0] !== undefined ? _args28[0] : null;
                     if (this._controller) {
-                      _context27.next = 3;
+                      _context28.next = 3;
                       break;
                     }
                     throw new Error("PlattarEmbed.startQRCode() - cannot execute as controller has not loaded yet");
                   case 3:
-                    return _context27.abrupt("return", this._controller.startQRCode(options));
+                    return _context28.abrupt("return", this._controller.startQRCode(options));
                   case 4:
                   case "end":
-                    return _context27.stop();
+                    return _context28.stop();
                 }
-              }, _callee27, this);
+              }, _callee28, this);
             }));
             function startQRCode() {
               return _startQRCode2.apply(this, arguments);
@@ -3276,6 +3440,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
             meta: {
               scene_product_index: 0,
               scene_model_index: 0,
+              product_index: 0,
               product_variation_index: 1,
               meta_index: 2
             },
@@ -3289,6 +3454,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
               if (parsedState.meta) {
                 defaultState.meta.scene_product_index = parsedState.meta.scene_product_index || 0;
                 defaultState.meta.scene_model_index = parsedState.meta.scene_model_index || 0;
+                defaultState.meta.product_index = parsedState.meta.product_index || 0;
                 defaultState.meta.product_variation_index = parsedState.meta.product_variation_index || 1;
                 defaultState.meta.meta_index = parsedState.meta.meta_index || 2;
               }
@@ -3377,6 +3543,38 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
               newData[meta.meta_index] = metaData;
             }
           }
+          /**
+           * Adds a new Product with meta-data into the Configurator State
+           *
+           * @param productID - The Product ID to add
+           * @param metaData - Arbitrary meta-data that can be used against certain operaions
+           */
+        }, {
+          key: "setProduct",
+          value: function setProduct(productID, productVariationID) {
+            var metaData = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+            if (productID && productVariationID) {
+              metaData = metaData || {
+                augment: true,
+                type: "product"
+              };
+              metaData.type = "product";
+              var states = this._state.states;
+              var meta = this._state.meta;
+              var newData = null;
+              var existingData = this.findSceneProductIndex(productID);
+              if (existingData) {
+                newData = existingData;
+              } else {
+                newData = [];
+                // push the new data into the stack
+                states.push(newData);
+              }
+              newData[meta.product_index] = productID;
+              newData[meta.product_variation_index] = productVariationID;
+              newData[meta.meta_index] = metaData;
+            }
+          }
           /**
            * Adds a new Scene Product/Variation combo with meta-data into the Configurator State
            *
@@ -3534,6 +3732,37 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
             }
             return null;
           }
+          /**
+           * @returns Returns the first reference of data in the stack that matches a type, otherwise returns null
+           */
+        }, {
+          key: "firstOfType",
+          value: function firstOfType(type) {
+            var states = this._state.states;
+            if (states.length > 0) {
+              var meta = this._state.meta;
+              var found = states.find(function (productState) {
+                var check = productState[meta.scene_product_index];
+                if (check !== null && check !== undefined) {
+                  return productState.length === 3 && productState[meta.meta_index].type === type;
+                }
+                return false;
+              });
+              if (!found) {
+                return null;
+              }
+              var data = {
+                scene_product_id: found[meta.scene_product_index],
+                product_variation_id: found[meta.product_variation_index],
+                meta_data: {
+                  augment: found[meta.meta_index].augment || true,
+                  type: found[meta.meta_index].type || type
+                }
+              };
+              return data;
+            }
+            return null;
+          }
         }, {
           key: "length",
           get: function get() {
@@ -3569,20 +3798,20 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
         }, {
           key: "decodeState",
           value: function () {
-            var _decodeState = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee28() {
+            var _decodeState = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee29() {
               var sceneID,
                 state,
                 configState,
                 fscene,
                 scene,
-                _args28 = arguments;
-              return _regeneratorRuntime().wrap(function _callee28$(_context28) {
-                while (1) switch (_context28.prev = _context28.next) {
+                _args29 = arguments;
+              return _regeneratorRuntime().wrap(function _callee29$(_context29) {
+                while (1) switch (_context29.prev = _context29.next) {
                   case 0:
-                    sceneID = _args28.length > 0 && _args28[0] !== undefined ? _args28[0] : null;
-                    state = _args28.length > 1 && _args28[1] !== undefined ? _args28[1] : null;
+                    sceneID = _args29.length > 0 && _args29[0] !== undefined ? _args29[0] : null;
+                    state = _args29.length > 1 && _args29[1] !== undefined ? _args29[1] : null;
                     if (!(!sceneID || !state)) {
-                      _context28.next = 4;
+                      _context29.next = 4;
                       break;
                     }
                     throw new Error("ConfiguratorState.decodeState(sceneID, state) - sceneID and state must be defined");
@@ -3590,22 +3819,23 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
                     configState = new ConfiguratorState(state);
                     fscene = new plattar_api_1.Scene(sceneID);
                     fscene.include(plattar_api_1.Project);
+                    fscene.include(plattar_api_1.Product);
                     fscene.include(plattar_api_1.SceneProduct);
                     fscene.include(plattar_api_1.SceneModel);
                     fscene.include(plattar_api_1.SceneProduct.include(plattar_api_1.Product.include(plattar_api_1.ProductVariation)));
-                    _context28.next = 12;
+                    _context29.next = 13;
                     return fscene.get();
-                  case 12:
-                    scene = _context28.sent;
-                    return _context28.abrupt("return", {
+                  case 13:
+                    scene = _context29.sent;
+                    return _context29.abrupt("return", {
                       scene: scene,
                       state: configState
                     });
-                  case 14:
+                  case 15:
                   case "end":
-                    return _context28.stop();
+                    return _context29.stop();
                 }
-              }, _callee28);
+              }, _callee29);
             }));
             function decodeState() {
               return _decodeState.apply(this, arguments);
@@ -3621,20 +3851,21 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
         }, {
           key: "decodeScene",
           value: function () {
-            var _decodeScene = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee29() {
+            var _decodeScene = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee30() {
               var sceneID,
                 configState,
                 fscene,
                 scene,
                 sceneProducts,
                 sceneModels,
-                _args29 = arguments;
-              return _regeneratorRuntime().wrap(function _callee29$(_context29) {
-                while (1) switch (_context29.prev = _context29.next) {
+                products,
+                _args30 = arguments;
+              return _regeneratorRuntime().wrap(function _callee30$(_context30) {
+                while (1) switch (_context30.prev = _context30.next) {
                   case 0:
-                    sceneID = _args29.length > 0 && _args29[0] !== undefined ? _args29[0] : null;
+                    sceneID = _args30.length > 0 && _args30[0] !== undefined ? _args30[0] : null;
                     if (sceneID) {
-                      _context29.next = 3;
+                      _context30.next = 3;
                       break;
                     }
                     throw new Error("ConfiguratorState.decodeScene(sceneID) - sceneID must be defined");
@@ -3644,20 +3875,31 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
                     fscene.include(plattar_api_1.Project);
                     fscene.include(plattar_api_1.SceneProduct);
                     fscene.include(plattar_api_1.SceneModel);
+                    fscene.include(plattar_api_1.Product);
                     fscene.include(plattar_api_1.SceneProduct.include(plattar_api_1.Product.include(plattar_api_1.ProductVariation)));
-                    _context29.next = 11;
+                    _context30.next = 12;
                     return fscene.get();
-                  case 11:
-                    scene = _context29.sent;
+                  case 12:
+                    scene = _context30.sent;
                     sceneProducts = scene.relationships.filter(plattar_api_1.SceneProduct);
-                    sceneModels = scene.relationships.filter(plattar_api_1.SceneModel); // add out scene models
+                    sceneModels = scene.relationships.filter(plattar_api_1.SceneModel);
+                    products = scene.relationships.filter(plattar_api_1.Product); // add our scene models
                     sceneModels.forEach(function (sceneModel) {
                       configState.setSceneModel(sceneModel.id, {
                         augment: sceneModel.attributes.include_in_augment,
                         type: "scenemodel"
                       });
                     });
-                    // add out scene products
+                    // add our products - this is used when scene == furniture
+                    products.forEach(function (product) {
+                      if (product.attributes.product_variation_id) {
+                        configState.setProduct(product.id, product.attributes.product_variation_id, {
+                          augment: true,
+                          type: "product"
+                        });
+                      }
+                    });
+                    // add our scene products
                     sceneProducts.forEach(function (sceneProduct) {
                       var product = sceneProduct.relationships.find(plattar_api_1.Product);
                       if (product) {
@@ -3682,15 +3924,15 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
                         });
                       }
                     });
-                    return _context29.abrupt("return", {
+                    return _context30.abrupt("return", {
                       scene: scene,
                       state: configState
                     });
-                  case 17:
+                  case 20:
                   case "end":
-                    return _context29.stop();
+                    return _context30.stop();
                 }
-              }, _callee29);
+              }, _callee30);
             }));
             function decodeScene() {
               return _decodeScene.apply(this, arguments);
@@ -3818,7 +4060,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
       Object.defineProperty(exports, "__esModule", {
         value: true
       });
-      exports["default"] = "1.155.3";
+      exports["default"] = "1.155.4-b2";
     }, {}],
     17: [function (require, module, exports) {
       "use strict";