@perceptimagery/dita-configurator-staging 0.1.7201 → 0.1.7301

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/dist/index.js +612 -109
  2. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -4,7 +4,7 @@
4
4
  try {
5
5
  if (typeof document != "undefined") {
6
6
  var elementStyle = document.createElement("style");
7
- elementStyle.appendChild(document.createTextNode("@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@200;300;400;500;600;700;800&display=swap');\n\n#Sprie-config-html,\n#Sprie-config-body {\n width: 100%;\n height: 100%;\n margin: 0;\n padding: 0;\n font-family: 'Work Sans', sans-serif;\n box-sizing: border-box;\n}\n\n#Sprie-config-body * {\n box-sizing: border-box;\n}\n\n.sprie-config-loadingBox {\n position: fixed;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n font-size: 24px;\n font-weight: 500;\n z-index: 1000;\n background: #f2f2f2;\n}\n#Sprie-config-Main-Container {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column-reverse;\n background: #ffffff;\n}\n\n#Sprie-config-Viewer-Container {\n width: 100%;\n position: relative;\n height: 100%;\n}\n\n#Sprie-config-Viewer-Container .sprie-config-webgl {\n width: 100%;\n height: 100%;\n}\n\n#Sprie-config-Checkout-Container {\n width: 100%;\n padding: 0.75rem;\n height: min(70%, 45rem);\n}\n\n#Sprie-config-Checkout-box {\n width: 100%;\n background: #efefef;\n padding: 1rem;\n min-height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n}\n\n#Sprie-config-Checkout-header {\n right: 0;\n display: flex;\n flex-direction: column;\n width: 100%;\n justify-content: center;\n align-items: center;\n gap: 1rem;\n padding-bottom: 0.9rem;\n border-bottom: 1px solid #ccc;\n margin-bottom: 2.5rem;\n}\n\n#Sprie-config-Checkout-header #Sprie-config-frameName {\n color: #222;\n font-size: 1.375rem;\n font-weight: 400;\n line-height: 1.5275rem; /* 111.091% */\n letter-spacing: -0.05rem;\n text-transform: uppercase;\n}\n\n#Sprie-config-Checkout-header #Sprie-config-lensPrice {\n color: #222;\n font-size: 1.3125rem;\n font-weight: 400;\n line-height: 2.275rem; /* 173.333% */\n}\n\n#Sprie-config-Checkout-body {\n display: flex;\n flex-direction: column;\n}\n\n#Sprie-config-Dropdown-Container {\n flex-direction: column;\n gap: 1.5rem;\n}\n\n#Sprie-config-Checkout-button {\n display: flex;\n padding: 0rem 1.25rem;\n align-items: center;\n justify-content: center;\n width: 100%;\n background: #222;\n color: #fff;\n text-align: center;\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 3.5rem; /* 400% */\n letter-spacing: 0.125rem;\n text-transform: uppercase;\n cursor: pointer;\n margin-top: 6rem;\n}\n\n.sprie-config-loadingFrame {\n position: absolute;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n fontsize: 24px;\n font-weight: 500;\n z-index: 1000;\n background: #f2f2f2;\n opacity: 0.8;\n}\n\n.sprie-config-loader {\n border: 8px solid #f3f3f3; /* Light grey */\n border-top: 8px solid #222222; /* Blue */\n border-radius: 50%;\n width: 60px;\n height: 60px;\n animation: spin 1.5s linear infinite;\n}\n\n@keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n\n/* Breakpoints */\n\n@media (min-width: 800px) {\n #Sprie-config-Main-Container {\n flex-direction: row-reverse;\n }\n\n #Sprie-config-Checkout-Container {\n width: auto;\n padding: 2.5rem;\n height: 100%;\n }\n\n #Sprie-config-Checkout-box {\n width: 350px;\n padding: 1.5rem;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n\n #Sprie-config-Dropdown-Container {\n gap: 2.5rem;\n }\n\n #Sprie-config-Viewer-Container .sprie-config-webgl {\n height: 99%;\n }\n}\n\n@media (min-width: 992px) {\n #Sprie-config-Checkout-box {\n width: 450px;\n padding: 2.5rem;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n}\n/* Dropdown.css */\n\n.sprie-config-label {\n color: rgba(34, 34, 34, 0.7);\n font-size: 0.75rem;\n font-weight: 400;\n letter-spacing: 0.02813rem;\n margin-bottom: 0.5rem;\n display: flex;\n align-items: center;\n margin-left: 0.1rem;\n}\n\n.sprie-config-dropdown-wrapper {\n position: relative;\n width: 100%;\n}\n\n.sprie-config-select-box {\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 10px;\n /* border: 1px solid #ccc; */\n border-radius: 5px;\n position: relative;\n user-select: none;\n width: 100%;\n box-sizing: border-box;\n transition: border-radius 0.3s ease;\n padding: 1rem 1.25rem;\n background-color: #ffffff;\n max-height: 17rem; /* Set the fixed height for the dropdown */\n overflow-y: auto;\n}\n\n.sprie-config-select-box.sprie-config-open {\n border-bottom-right-radius: 0;\n border-bottom-left-radius: 0;\n}\n\n.sprie-config-selected-option {\n flex: 1;\n}\n\n.sprie-config-arrow {\n margin-left: 10px;\n transition: transform 0.3s ease;\n}\n\n.sprie-config-arrow.sprie-config-up {\n transform: rotate(180deg);\n}\n\n.sprie-config-dropdown-options {\n list-style: none;\n margin: 0;\n padding: 0;\n position: absolute;\n top: 100%;\n left: 0;\n width: 100%;\n z-index: 1;\n background-color: #fff;\n border-top: 1px solid #ccc;\n border-radius: 0 0 5px 5px;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n opacity: 0;\n visibility: hidden;\n overflow: hidden;\n transition: height 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;\n max-height: 17rem; /* Set the fixed height for the dropdown */\n overflow-y: auto;\n}\n\n.sprie-config-dropdown-options.sprie-config-open {\n opacity: 1;\n visibility: visible;\n height: auto;\n z-index: 1000;\n}\n\n.sprie-config-dropdown-options li {\n padding: 0.75rem 1rem;\n cursor: pointer;\n transition: background-color 0.3s ease;\n}\n\n.sprie-config-dropdown-options li:hover {\n background-color: #f0f0f0;\n}\n\n.sprie-config-dropdown-options li.sprie-config-selected {\n background-color: #f2f2f2; /* Highlight color for selected option */\n}\n\n.sprie-config-selected-option {\n width: 90%;\n}\n\n.sprie-config-frame-details-wrapper {\n display: flex;\n gap: 1rem;\n height: auto;\n overflow: hidden;\n}\n\n.sprie-config-variantImgBox {\n width: 3.4rem;\n height: 100%;\n display: flex;\n align-items: center; /* Center vertically */\n justify-content: center; /* Center horizontally */\n background: #fff;\n}\n\n.sprie-config-details {\n display: flex;\n flex-direction: column;\n gap: 2px;\n overflow: hidden;\n}\n\n.sprie-config-details .sprie-config-frameName {\n color: #4d4d4d;\n font-size: 1rem;\n font-weight: 400;\n line-height: 1.5rem; /* 150% */\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n margin : 0\n}\n\n.sprie-config-details .sprie-config-skuName {\n color: rgba(34, 34, 34, 0.7);\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 0.96125rem; /* 109.857% */\n letter-spacing: 0.02813rem;\n text-transform: uppercase;\n margin : 0\n}\n/* LensDropdown.css */\n\n.sprie-config-label {\n color: rgba(34, 34, 34, 0.7);\n font-size: 0.75rem;\n font-weight: 400;\n letter-spacing: 0.02813rem;\n margin-bottom: 0.5rem;\n display: flex;\n align-items: center;\n margin-left: 0.1rem;\n}\n\n.sprie-config-dropdown-wrapper {\n position: relative;\n width: 100%;\n}\n\n.sprie-config-select-box {\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-radius: 0.125rem;\n position: relative;\n user-select: none;\n width: 100%;\n box-sizing: border-box;\n transition: border-radius 0.3s ease;\n background-color: #ffffff;\n}\n\n.sprie-config-select-box.sprie-config-open {\n border-bottom-right-radius: 0;\n border-bottom-left-radius: 0;\n}\n\n.sprie-config-selected-lens {\n flex: 1;\n display: flex;\n gap: 1rem;\n height: auto;\n}\n\n.sprie-config-selected-lens .sprie-config-lens-details {\n display: flex;\n flex-direction: column;\n justify-content: center;\n height: auto;\n padding-bottom: 0.2rem;\n}\n\n.sprie-config-colorBox {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.sprie-config-lensName {\n color: #4d4d4d;\n font-size: 1rem;\n font-weight: 400;\n line-height: 1.5rem; /* 150% */\n margin: 0;\n}\n\n.sprie-config-lensColor {\n color: rgba(34, 34, 34, 0.7);\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 0.96125rem; /* 109.857% */\n letter-spacing: 0.02813rem;\n text-transform: uppercase;\n margin: 0;\n}\n\n.sprie-config-arrow {\n margin-left: 10px;\n transition: transform 0.3s ease;\n}\n\n.sprie-config-arrow.sprie-config-up {\n transform: rotate(180deg);\n}\n\n.sprie-config-lens-dropdown-options {\n list-style: none;\n margin: 0;\n padding: 0;\n position: absolute;\n top: 100%;\n left: 0;\n width: 100%;\n z-index: 100; /* Adjust z-index to ensure dropdown options are above other elements */\n background-color: transparent;\n border-radius: 0 0 0.125rem 0.125rem;\n border: 0;\n box-shadow: none;\n opacity: 0;\n visibility: hidden;\n transition: opacity 0.3s ease, visibility 0.3s ease;\n max-height: 4rem; /* Set the fixed height for the dropdown */\n overflow-x: auto;\n overflow-y: hidden;\n display: flex;\n flex-direction: row;\n flex-wrap: no-wrap;\n padding: 0;\n}\n\n.sprie-config-lens-dropdown-options.sprie-config-open {\n opacity: 1;\n visibility: visible;\n}\n\n.sprie-config-lens-dropdown-options li {\n padding: 1rem 1.25rem;\n cursor: pointer;\n transition: background-color 0.3s ease;\n padding: 0.25rem;\n}\n\n.sprie-config-lens-dropdown-options li .sprie-config-li-element {\n width: 100%;\n height: 100%;\n z-index: 10;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.sprie-config-lens-dropdown-options li .sprie-config-tooltip {\n display: none;\n}\n\n@media (min-width: 768px) {\n .sprie-config-lens-dropdown-options {\n max-height: 9.2rem;\n overflow-x: hidden;\n overflow-y: auto;\n display: grid;\n grid-template-columns: repeat(5, auto);\n padding: 0.5rem;\n border-top: 1px solid #ccc;\n background-color: #fff;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n }\n\n .sprie-config-lens-dropdown-options li {\n min-width: auto;\n }\n\n .sprie-config-lens-dropdown-options li .sprie-config-tooltip {\n position: absolute;\n width: auto;\n height: 2rem;\n flex-shrink: 0;\n border-radius: 0.125rem;\n background: #fff;\n box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.25);\n text-align: center;\n line-height: 2rem;\n transition: opacity 0.3s ease, visibility 0.3s ease;\n display: block;\n\n /* Font style properties */\n color: rgba(34, 34, 34, 0.7);\n font-size: 0.875rem;\n font-weight: 400;\n letter-spacing: 0.02813rem;\n text-transform: uppercase;\n white-space: nowrap; /* Ensure text is in one line */\n z-index: 200;\n }\n\n .sprie-config-tooltip.sprie-config-top {\n bottom: 12%;\n }\n\n .sprie-config-tooltip.sprie-config-right {\n right: 2%;\n }\n}"));
7
+ elementStyle.appendChild(document.createTextNode("@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@200;300;400;500;600;700;800&display=swap');\n\n#Sprie-config-html,\n#Sprie-config-body {\n width: 100%;\n height: 100%;\n margin: 0;\n padding: 0;\n font-family: 'Work Sans', sans-serif;\n box-sizing: border-box;\n}\n\n#Sprie-config-body * {\n box-sizing: border-box;\n}\n\n.sprie-config-loadingBox {\n position: fixed;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n font-size: 24px;\n font-weight: 500;\n z-index: 1000;\n background: #f2f2f2;\n}\n.my-btn {\n border: 1px solid gray;\n border-radius: 5px;\n padding: 5px 10px;\n cursor: pointer;\n transition: all 300ms ease-in;\n}\n\n.my-btn:hover {\n box-shadow: 0 0 2px 3px gray;\n}\n.my-panel {\n border: 1px solid gray;\n padding: 10px 20px;\n border-radius: 10px;\n margin: 10px auto;\n}\n\n.my-panel h3 {\n font-family: sans-serif;\n}\n#Sprie-config-Main-Container {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column-reverse;\n background: #ffffff;\n}\n\n#Sprie-config-Viewer-Container {\n width: 100%;\n position: relative;\n height: 100%;\n}\n\n#Sprie-config-Viewer-Container .sprie-config-webgl {\n width: 100%;\n height: 100%;\n}\n\n#Sprie-config-Checkout-Container {\n width: 100%;\n padding: 0.75rem;\n height: min(70%, 45rem);\n}\n\n#Sprie-config-Checkout-box {\n width: 100%;\n background: #efefef;\n padding: 1rem;\n min-height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n}\n\n#Sprie-config-Checkout-header {\n right: 0;\n display: flex;\n flex-direction: column;\n width: 100%;\n justify-content: center;\n align-items: center;\n gap: 1rem;\n padding-bottom: 0.9rem;\n border-bottom: 1px solid #ccc;\n margin-bottom: 2.5rem;\n}\n\n#Sprie-config-Checkout-header #Sprie-config-frameName {\n color: #222;\n font-size: 1.375rem;\n font-weight: 400;\n line-height: 1.5275rem; /* 111.091% */\n letter-spacing: -0.05rem;\n text-transform: uppercase;\n}\n\n#Sprie-config-Checkout-header #Sprie-config-lensPrice {\n color: #222;\n font-size: 1.3125rem;\n font-weight: 400;\n line-height: 2.275rem; /* 173.333% */\n}\n\n#Sprie-config-Checkout-body {\n display: flex;\n flex-direction: column;\n}\n\n#Sprie-config-Dropdown-Container {\n flex-direction: column;\n gap: 1.5rem;\n}\n\n#Sprie-config-Checkout-button {\n display: flex;\n padding: 0rem 1.25rem;\n align-items: center;\n justify-content: center;\n width: 100%;\n background: #222;\n color: #fff;\n text-align: center;\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 3.5rem; /* 400% */\n letter-spacing: 0.125rem;\n text-transform: uppercase;\n cursor: pointer;\n margin-top: 6rem;\n}\n\n.sprie-config-loadingFrame {\n position: absolute;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n fontsize: 24px;\n font-weight: 500;\n z-index: 1000;\n background: #f2f2f2;\n opacity: 0.8;\n}\n\n.sprie-config-loader {\n border: 8px solid #f3f3f3; /* Light grey */\n border-top: 8px solid #222222; /* Blue */\n border-radius: 50%;\n width: 60px;\n height: 60px;\n animation: spin 1.5s linear infinite;\n}\n\n@keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n\n/* Breakpoints */\n\n@media (min-width: 800px) {\n #Sprie-config-Main-Container {\n flex-direction: row-reverse;\n }\n\n #Sprie-config-Checkout-Container {\n width: auto;\n padding: 2.5rem;\n height: 100%;\n }\n\n #Sprie-config-Checkout-box {\n width: 350px;\n padding: 1.5rem;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n\n #Sprie-config-Dropdown-Container {\n gap: 2.5rem;\n }\n\n #Sprie-config-Viewer-Container .sprie-config-webgl {\n height: 99%;\n }\n}\n\n@media (min-width: 992px) {\n #Sprie-config-Checkout-box {\n width: 450px;\n padding: 2.5rem;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n}\n/* Dropdown.css */\n\n.sprie-config-label {\n color: rgba(34, 34, 34, 0.7);\n font-size: 0.75rem;\n font-weight: 400;\n letter-spacing: 0.02813rem;\n margin-bottom: 0.5rem;\n display: flex;\n align-items: center;\n margin-left: 0.1rem;\n}\n\n.sprie-config-dropdown-wrapper {\n position: relative;\n width: 100%;\n}\n\n.sprie-config-select-box {\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 10px;\n /* border: 1px solid #ccc; */\n border-radius: 5px;\n position: relative;\n user-select: none;\n width: 100%;\n box-sizing: border-box;\n transition: border-radius 0.3s ease;\n padding: 1rem 1.25rem;\n background-color: #ffffff;\n max-height: 17rem; /* Set the fixed height for the dropdown */\n overflow-y: auto;\n}\n\n.sprie-config-select-box.sprie-config-open {\n border-bottom-right-radius: 0;\n border-bottom-left-radius: 0;\n}\n\n.sprie-config-selected-option {\n flex: 1;\n}\n\n.sprie-config-arrow {\n margin-left: 10px;\n transition: transform 0.3s ease;\n}\n\n.sprie-config-arrow.sprie-config-up {\n transform: rotate(180deg);\n}\n\n.sprie-config-dropdown-options {\n list-style: none;\n margin: 0;\n padding: 0;\n position: absolute;\n top: 100%;\n left: 0;\n width: 100%;\n z-index: 1;\n background-color: #fff;\n border-top: 1px solid #ccc;\n border-radius: 0 0 5px 5px;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n opacity: 0;\n visibility: hidden;\n overflow: hidden;\n transition: height 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;\n max-height: 17rem; /* Set the fixed height for the dropdown */\n overflow-y: auto;\n}\n\n.sprie-config-dropdown-options.sprie-config-open {\n opacity: 1;\n visibility: visible;\n height: auto;\n z-index: 1000;\n}\n\n.sprie-config-dropdown-options li {\n padding: 0.75rem 1rem;\n cursor: pointer;\n transition: background-color 0.3s ease;\n}\n\n.sprie-config-dropdown-options li:hover {\n background-color: #f0f0f0;\n}\n\n.sprie-config-dropdown-options li.sprie-config-selected {\n background-color: #f2f2f2; /* Highlight color for selected option */\n}\n\n.sprie-config-selected-option {\n width: 90%;\n}\n\n.sprie-config-frame-details-wrapper {\n display: flex;\n gap: 1rem;\n height: auto;\n overflow: hidden;\n}\n\n.sprie-config-variantImgBox {\n width: 3.4rem;\n height: 100%;\n display: flex;\n align-items: center; /* Center vertically */\n justify-content: center; /* Center horizontally */\n background: #fff;\n}\n\n.sprie-config-details {\n display: flex;\n flex-direction: column;\n gap: 2px;\n overflow: hidden;\n}\n\n.sprie-config-details .sprie-config-frameName {\n color: #4d4d4d;\n font-size: 1rem;\n font-weight: 400;\n line-height: 1.5rem; /* 150% */\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n margin : 0\n}\n\n.sprie-config-details .sprie-config-skuName {\n color: rgba(34, 34, 34, 0.7);\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 0.96125rem; /* 109.857% */\n letter-spacing: 0.02813rem;\n text-transform: uppercase;\n margin : 0\n}\n/* LensDropdown.css */\n\n.sprie-config-label {\n color: rgba(34, 34, 34, 0.7);\n font-size: 0.75rem;\n font-weight: 400;\n letter-spacing: 0.02813rem;\n margin-bottom: 0.5rem;\n display: flex;\n align-items: center;\n margin-left: 0.1rem;\n}\n\n.sprie-config-dropdown-wrapper {\n position: relative;\n width: 100%;\n}\n\n.sprie-config-select-box {\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-radius: 0.125rem;\n position: relative;\n user-select: none;\n width: 100%;\n box-sizing: border-box;\n transition: border-radius 0.3s ease;\n background-color: #ffffff;\n}\n\n.sprie-config-select-box.sprie-config-open {\n border-bottom-right-radius: 0;\n border-bottom-left-radius: 0;\n}\n\n.sprie-config-selected-lens {\n flex: 1;\n display: flex;\n gap: 1rem;\n height: auto;\n}\n\n.sprie-config-selected-lens .sprie-config-lens-details {\n display: flex;\n flex-direction: column;\n justify-content: center;\n height: auto;\n padding-bottom: 0.2rem;\n}\n\n.sprie-config-colorBox {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.sprie-config-lensName {\n color: #4d4d4d;\n font-size: 1rem;\n font-weight: 400;\n line-height: 1.5rem; /* 150% */\n margin: 0;\n}\n\n.sprie-config-lensColor {\n color: rgba(34, 34, 34, 0.7);\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 0.96125rem; /* 109.857% */\n letter-spacing: 0.02813rem;\n text-transform: uppercase;\n margin: 0;\n}\n\n.sprie-config-arrow {\n margin-left: 10px;\n transition: transform 0.3s ease;\n}\n\n.sprie-config-arrow.sprie-config-up {\n transform: rotate(180deg);\n}\n\n.sprie-config-lens-dropdown-options {\n list-style: none;\n margin: 0;\n padding: 0;\n position: absolute;\n top: 100%;\n left: 0;\n width: 100%;\n z-index: 100; /* Adjust z-index to ensure dropdown options are above other elements */\n background-color: transparent;\n border-radius: 0 0 0.125rem 0.125rem;\n border: 0;\n box-shadow: none;\n opacity: 0;\n visibility: hidden;\n transition: opacity 0.3s ease, visibility 0.3s ease;\n max-height: 4rem; /* Set the fixed height for the dropdown */\n overflow-x: auto;\n overflow-y: hidden;\n display: flex;\n flex-direction: row;\n flex-wrap: no-wrap;\n padding: 0;\n}\n\n.sprie-config-lens-dropdown-options.sprie-config-open {\n opacity: 1;\n visibility: visible;\n}\n\n.sprie-config-lens-dropdown-options li {\n padding: 1rem 1.25rem;\n cursor: pointer;\n transition: background-color 0.3s ease;\n padding: 0.25rem;\n}\n\n.sprie-config-lens-dropdown-options li .sprie-config-li-element {\n width: 100%;\n height: 100%;\n z-index: 10;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.sprie-config-lens-dropdown-options li .sprie-config-tooltip {\n display: none;\n}\n\n@media (min-width: 768px) {\n .sprie-config-lens-dropdown-options {\n max-height: 9.2rem;\n overflow-x: hidden;\n overflow-y: auto;\n display: grid;\n grid-template-columns: repeat(5, auto);\n padding: 0.5rem;\n border-top: 1px solid #ccc;\n background-color: #fff;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n }\n\n .sprie-config-lens-dropdown-options li {\n min-width: auto;\n }\n\n .sprie-config-lens-dropdown-options li .sprie-config-tooltip {\n position: absolute;\n width: auto;\n height: 2rem;\n flex-shrink: 0;\n border-radius: 0.125rem;\n background: #fff;\n box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.25);\n text-align: center;\n line-height: 2rem;\n transition: opacity 0.3s ease, visibility 0.3s ease;\n display: block;\n\n /* Font style properties */\n color: rgba(34, 34, 34, 0.7);\n font-size: 0.875rem;\n font-weight: 400;\n letter-spacing: 0.02813rem;\n text-transform: uppercase;\n white-space: nowrap; /* Ensure text is in one line */\n z-index: 200;\n }\n\n .sprie-config-tooltip.sprie-config-top {\n bottom: 12%;\n }\n\n .sprie-config-tooltip.sprie-config-right {\n right: 2%;\n }\n}"));
8
8
  document.head.appendChild(elementStyle);
9
9
  }
10
10
  } catch (e) {
@@ -111,7 +111,7 @@ var __publicField = (obj, key, value) => {
111
111
  host: "https://api.sprie.io"
112
112
  };
113
113
  const config = Object.freeze(Config$1);
114
- const version$1 = "0.1.7201";
114
+ const version$1 = "0.1.7301";
115
115
  function modifyLensArr(arr, element) {
116
116
  const index = arr.findIndex((e) => e["sku"] === element["sku"]);
117
117
  if (index !== -1) {
@@ -198,17 +198,17 @@ var __publicField = (obj, key, value) => {
198
198
  throw new Error("Failed to download model asset.");
199
199
  }
200
200
  }
201
- // async HandleAssetUsage(asset: string) {
202
- // if (!this.fetcher.IsConfigExpired() && asset) {
203
- // const bodyData = {
204
- // org: this.fetcher.config.ORGID,
205
- // asset,
206
- // timestamp: new Date().toISOString(),
207
- // };
208
- // const url = '/v1/analytics/trigger';
209
- // await this.fetcher.Post(url, bodyData);
210
- // }
211
- // }
201
+ async HandleAssetUsage(asset) {
202
+ if (!this.fetcher.IsConfigExpired() && asset) {
203
+ const bodyData = {
204
+ org: this.fetcher.config.ORGID,
205
+ asset,
206
+ timestamp: (/* @__PURE__ */ new Date()).toISOString()
207
+ };
208
+ const url = "/v1/analytics/trigger";
209
+ await this.fetcher.Post(url, bodyData);
210
+ }
211
+ }
212
212
  }
213
213
  const Prefix = "SprieEmbedEvent";
214
214
  function EventWrapper(eventName, argValue) {
@@ -223,6 +223,15 @@ var __publicField = (obj, key, value) => {
223
223
  FetchingData: () => EventWrapper("FetchingData"),
224
224
  EmbedLoaded: () => EventWrapper("EmbedLoaded")
225
225
  };
226
+ var ESDKStatus = /* @__PURE__ */ ((ESDKStatus2) => {
227
+ ESDKStatus2["Init"] = "init";
228
+ ESDKStatus2["Preparing"] = "preparing";
229
+ ESDKStatus2["Authenticating"] = "authenticating";
230
+ ESDKStatus2["Fetching"] = "fetching";
231
+ ESDKStatus2["Loading"] = "loading";
232
+ ESDKStatus2["Done"] = "done";
233
+ return ESDKStatus2;
234
+ })(ESDKStatus || {});
226
235
  var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
227
236
  function getDefaultExportFromCjs(x2) {
228
237
  return x2 && x2.__esModule && Object.prototype.hasOwnProperty.call(x2, "default") ? x2["default"] : x2;
@@ -41434,31 +41443,27 @@ bool bvhIntersectFirstHit(
41434
41443
  positions: { value: positions },
41435
41444
  opacities: { value: opacities }
41436
41445
  };
41437
- const rgbeLoader = new RGBELoader();
41438
41446
  document.getElementById("gui-container");
41439
- const gemstoneMaterial = new MeshRefractionMaterial();
41447
+ const diamondMaterial = new MeshRefractionMaterial();
41440
41448
  const BLOOM_SCENE = 1;
41441
41449
  const bloomLayer = new Layers();
41442
41450
  bloomLayer.set(BLOOM_SCENE);
41443
41451
  new MeshBasicMaterial({ color: "black" });
41444
41452
  class CustomRenderer {
41453
+ // lensMaterial:THREE.MeshPhysicalMaterial| any
41445
41454
  constructor(apiService) {
41446
41455
  __publicField(this, "scene");
41447
41456
  __publicField(this, "camera");
41448
41457
  __publicField(this, "renderer");
41449
41458
  __publicField(this, "canvas");
41450
41459
  __publicField(this, "apiService");
41451
- __publicField(this, "canvasSize");
41452
- __publicField(this, "isInitialised");
41453
41460
  this.apiService = apiService;
41454
41461
  this.scene = new Scene();
41455
- this.canvasSize = new Vector2();
41456
- this.isInitialised = false;
41457
41462
  }
41458
41463
  async intialize() {
41464
+ var _a;
41459
41465
  const newWidth = document.querySelector("canvas.sprie-config-webgl").clientWidth;
41460
41466
  const newHeight = document.querySelector("canvas.sprie-config-webgl").clientHeight;
41461
- this.canvasSize.set(newWidth, newHeight);
41462
41467
  this.camera = new PerspectiveCamera(
41463
41468
  12,
41464
41469
  newWidth / newHeight,
@@ -41474,6 +41479,7 @@ bool bvhIntersectFirstHit(
41474
41479
  });
41475
41480
  this.renderer.setSize(newWidth, newHeight);
41476
41481
  this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
41482
+ const rgbeLoader = new RGBELoader();
41477
41483
  rgbeLoader.load(
41478
41484
  "https://sprie-jarvis-public.s3.eu-west-2.amazonaws.com/environment_desaturated.hdr",
41479
41485
  (environmentMap) => {
@@ -41481,22 +41487,18 @@ bool bvhIntersectFirstHit(
41481
41487
  this.scene.environment = environmentMap;
41482
41488
  }
41483
41489
  );
41484
- this.isInitialised = true;
41485
- }
41486
- initGemstoneDependencies() {
41487
- var _a;
41488
41490
  rgbeLoader.load(
41489
41491
  "https://sprie-jarvis-public.s3.eu-west-2.amazonaws.com/environment_gemstones.hdr",
41490
41492
  (reflectionMap) => {
41491
41493
  reflectionMap.mapping = EquirectangularReflectionMapping;
41492
- gemstoneMaterial.uniforms.envMap.value = reflectionMap;
41494
+ diamondMaterial.uniforms.envMap.value = reflectionMap;
41493
41495
  envMap = reflectionMap;
41494
41496
  }
41495
41497
  );
41496
41498
  const aberrationStrength = 0.01;
41497
41499
  const isCubeTexture = (def) => def && def.isCubeTexture;
41498
- gemstoneMaterial.uniforms.aberrationStrength.value = aberrationStrength;
41499
- gemstoneMaterial.uniforms.resolution.value = this.canvasSize;
41500
+ diamondMaterial.uniforms.aberrationStrength.value = aberrationStrength;
41501
+ diamondMaterial.uniforms.resolution.value = new Vector2(newWidth, newHeight);
41500
41502
  const temp5 = {};
41501
41503
  const isCubeMap = isCubeTexture(envMap);
41502
41504
  const w2 = (isCubeMap ? (_a = envMap == null ? void 0 : envMap.image[0]) == null ? void 0 : _a.width : envMap == null ? void 0 : envMap.image.width) ?? 1024;
@@ -41512,7 +41514,7 @@ bool bvhIntersectFirstHit(
41512
41514
  temp5.CUBEUV_MAX_MIP = `${_lodMax}.0`;
41513
41515
  temp5.CHROMATIC_ABERRATIONS = "";
41514
41516
  temp5.FAST_CHROMA = "";
41515
- gemstoneMaterial.defines = temp5;
41517
+ diamondMaterial.defines = temp5;
41516
41518
  }
41517
41519
  cleanUp() {
41518
41520
  if (this.renderer) {
@@ -41530,45 +41532,6 @@ bool bvhIntersectFirstHit(
41530
41532
  });
41531
41533
  });
41532
41534
  }
41533
- async downloadModel(orgId, assetId) {
41534
- return await this.apiService.DownloadMA({
41535
- orgId,
41536
- assetsId: assetId
41537
- });
41538
- }
41539
- async loadFirstFrame(orgId, frame) {
41540
- if (frame && orgId) {
41541
- const apiRes = await this.downloadModel(orgId, frame._id);
41542
- const specialLens = frame.customisation.length == 0;
41543
- const includedLens = specialLens ? null : frame.customisation.find((x2) => x2.type == "Lens");
41544
- await this.renderModel(apiRes.asset.cloudfrontUrl, specialLens, apiRes.decryptionKey).then(() => {
41545
- if (includedLens) {
41546
- this.setupLensMaterial(
41547
- includedLens
41548
- );
41549
- }
41550
- });
41551
- } else {
41552
- return;
41553
- }
41554
- }
41555
- async changeFrame(orgId, frame, selectedLens) {
41556
- if (frame && orgId) {
41557
- const apiRes = await this.downloadModel(orgId, frame._id);
41558
- const specialLens = frame.customisation.length == 0;
41559
- const customLensMaterial = specialLens ? null : frame.customisation.find((x2) => x2.type == "Lens");
41560
- const renderAsIs = specialLens && selectedLens.sku == "lens-default";
41561
- await this.renderModel(apiRes.asset.cloudfrontUrl, renderAsIs, apiRes.decryptionKey).then(async () => {
41562
- if (selectedLens.sku == "lens-default") {
41563
- if (customLensMaterial) {
41564
- this.setupLensMaterial(customLensMaterial);
41565
- }
41566
- } else {
41567
- this.setupLensMaterial(selectedLens);
41568
- }
41569
- });
41570
- }
41571
- }
41572
41535
  async renderModel(modelContent, renderAsIs, decryptionKey) {
41573
41536
  const loader = new GLTFLoader();
41574
41537
  if (modelContent) {
@@ -41716,12 +41679,11 @@ bool bvhIntersectFirstHit(
41716
41679
  }
41717
41680
  }
41718
41681
  if (node.material && node.name === "Diamonds") {
41719
- this.initGemstoneDependencies();
41720
- gemstoneMaterial.uniforms.bvh.value = new MeshBVHUniformStruct();
41721
- gemstoneMaterial.uniforms.bvh.value.updateFrom(
41682
+ diamondMaterial.uniforms.bvh.value = new MeshBVHUniformStruct();
41683
+ diamondMaterial.uniforms.bvh.value.updateFrom(
41722
41684
  new MeshBVH(node.geometry.clone().toNonIndexed(), { strategy: SAH })
41723
41685
  );
41724
- node.material = gemstoneMaterial;
41686
+ node.material = diamondMaterial;
41725
41687
  }
41726
41688
  }
41727
41689
  });
@@ -41757,6 +41719,206 @@ bool bvhIntersectFirstHit(
41757
41719
  }
41758
41720
  return result == null ? void 0 : result.scene;
41759
41721
  }
41722
+ async setupDropdownAndListeners(response) {
41723
+ const selectDropdown = document.getElementById("Framedropdown");
41724
+ const button = document.getElementById("FramedropdownBtn");
41725
+ const frameContainer = document.getElementById("FrameContainer");
41726
+ const frameElement = document.getElementById("frameName");
41727
+ frameElement.textContent = response.group.name;
41728
+ if (Array.isArray(response.variants)) {
41729
+ response.variants.forEach((frame) => {
41730
+ const option = document.createElement("li");
41731
+ const optionContent = document.createElement("div");
41732
+ optionContent.id = "FrameDetailsContainer";
41733
+ optionContent.classList.add("FramedropdownStyle");
41734
+ optionContent.setAttribute("data-id", frame._id);
41735
+ const wrapper = document.createElement("div");
41736
+ wrapper.classList.add("detalisWrapper");
41737
+ const imageElement = document.createElement("img");
41738
+ imageElement.id = "FramedropdownImg";
41739
+ imageElement.src = frame.variantImage;
41740
+ imageElement.alt = frame.name;
41741
+ const nameElement = document.createElement("div");
41742
+ nameElement.id = "FramedropdownName";
41743
+ nameElement.textContent = frame.name;
41744
+ const skuElement = document.createElement("div");
41745
+ skuElement.id = "FramedropdownDesc";
41746
+ skuElement.textContent = frame.sku;
41747
+ optionContent.appendChild(imageElement);
41748
+ optionContent.appendChild(wrapper);
41749
+ wrapper.appendChild(nameElement);
41750
+ wrapper.appendChild(skuElement);
41751
+ option.appendChild(optionContent);
41752
+ selectDropdown == null ? void 0 : selectDropdown.appendChild(option);
41753
+ });
41754
+ } else {
41755
+ console.error(
41756
+ 'The "variants" property is not an array in the JSON data.'
41757
+ );
41758
+ }
41759
+ if (selectDropdown) {
41760
+ selectDropdown.addEventListener("mousedown", async (event) => {
41761
+ if (event.target.matches("div")) {
41762
+ const selectedOption = event.target;
41763
+ selectedOption.style.background = "#f2f2f2";
41764
+ const modelId = selectedOption.getAttribute("data-id");
41765
+ if (modelId) {
41766
+ const modelAsset = await this.apiService.DownloadMA({
41767
+ orgId: this.apiService.fetcher.config.ORGID,
41768
+ assetsId: selectedOption.getAttribute("data-id")
41769
+ });
41770
+ this.renderModel(
41771
+ modelAsset.asset.cloudfrontUrl,
41772
+ true,
41773
+ modelAsset.decryptionKey
41774
+ );
41775
+ frameContainer.innerHTML = selectedOption.innerHTML;
41776
+ }
41777
+ }
41778
+ selectDropdown.style.display = "none";
41779
+ });
41780
+ }
41781
+ button.addEventListener("mousedown", () => {
41782
+ if (selectDropdown.style.display === "block") {
41783
+ selectDropdown.style.display = "none";
41784
+ } else {
41785
+ selectDropdown.style.display = "block";
41786
+ }
41787
+ });
41788
+ }
41789
+ async setupLensDropdownAndListeners(response) {
41790
+ const selectDropdown = document.getElementById("Lensdropdown");
41791
+ const button = document.getElementById("LensdropdownBtn");
41792
+ if (Array.isArray(response.data)) {
41793
+ response.data.forEach((lens) => {
41794
+ if (lens.name != "CLEAR") {
41795
+ const option = document.createElement("li");
41796
+ const optionContent = document.createElement("div");
41797
+ optionContent.id = "LensdetailsContainer";
41798
+ if (lens.direction == "u") {
41799
+ optionContent.setAttribute("data-color", lens.color);
41800
+ } else {
41801
+ optionContent.setAttribute(
41802
+ "data-color",
41803
+ JSON.stringify(lens.gradientColors)
41804
+ );
41805
+ }
41806
+ optionContent.setAttribute("data-direction", lens.direction);
41807
+ optionContent.setAttribute("data-opacity", `${lens.opacity}`);
41808
+ optionContent.setAttribute("data-metalness", `${lens.metalness}`);
41809
+ optionContent.setAttribute("data-finish", lens.finish);
41810
+ optionContent.setAttribute("data-roughness", `${lens.roughness}`);
41811
+ optionContent.setAttribute("data-name", lens.name);
41812
+ optionContent.setAttribute("data-desc", lens.metadata[0].value);
41813
+ optionContent.setAttribute("data-price", `${lens.price}`);
41814
+ optionContent.classList.add("LensdropdownStyle");
41815
+ const wrapper = document.createElement("div");
41816
+ wrapper.classList.add("LensdetalisWrapper");
41817
+ const imageElement = document.createElement("img");
41818
+ imageElement.id = "LensdropdownImg";
41819
+ imageElement.style.background = lens.color;
41820
+ const nameElement = document.createElement("div");
41821
+ nameElement.textContent = lens.name;
41822
+ const skuElement = document.createElement("div");
41823
+ skuElement.textContent = lens.metadata[0].value;
41824
+ optionContent.appendChild(imageElement);
41825
+ optionContent.appendChild(wrapper);
41826
+ wrapper.appendChild(nameElement);
41827
+ wrapper.appendChild(skuElement);
41828
+ option.appendChild(optionContent);
41829
+ selectDropdown == null ? void 0 : selectDropdown.appendChild(option);
41830
+ }
41831
+ });
41832
+ } else {
41833
+ console.error(
41834
+ 'The "variants" property is not an array in the JSON data.'
41835
+ );
41836
+ }
41837
+ if (selectDropdown) {
41838
+ selectDropdown.addEventListener("mousedown", async (event) => {
41839
+ if (event.target.matches("div")) {
41840
+ console.log(event.target, event);
41841
+ const selectedOption = event.target;
41842
+ selectedOption.style.background = "#f2f2f2";
41843
+ if (lensMaterial) {
41844
+ if (selectedOption.getAttribute("data-direction") == "u") {
41845
+ lensMaterial.color = new Color(
41846
+ selectedOption.getAttribute("data-color")
41847
+ );
41848
+ lensMaterial.opacity = selectedOption.getAttribute(
41849
+ "data-opacity"
41850
+ );
41851
+ gu.uAlpha.value = false;
41852
+ const image = document.getElementById("LensdropdownImgD");
41853
+ image.style.background = selectedOption.getAttribute("data-color");
41854
+ } else if (selectedOption.getAttribute("data-direction") == "tb") {
41855
+ const gradientColors = JSON.parse(
41856
+ selectedOption.getAttribute("data-color")
41857
+ );
41858
+ gu.uAlpha.value = true;
41859
+ let index = 0;
41860
+ gradientColors.forEach(() => {
41861
+ gu.colors.value[index] = new Color(
41862
+ gradientColors[index].color
41863
+ );
41864
+ gu.positions.value[index] = gradientColors[index].position;
41865
+ gu.opacities.value[index] = gradientColors[index].alpha;
41866
+ index++;
41867
+ });
41868
+ }
41869
+ if (selectedOption.getAttribute("data-finish") == "MIRBLKHMC") {
41870
+ lensMaterial.clearcoat = 1;
41871
+ lensMaterial.clearcoatRoughness = 0;
41872
+ } else if (selectedOption.getAttribute("data-finish") == "HMCCR") {
41873
+ lensMaterial.clearcoat = 0;
41874
+ lensMaterial.clearcoatRoughness = 1;
41875
+ } else if (selectedOption.getAttribute("data-finish") == "MIRSILHMC") {
41876
+ lensMaterial.clearcoat = 1;
41877
+ lensMaterial.clearcoatRoughness = 0;
41878
+ }
41879
+ lensMaterial.roughness = selectedOption.getAttribute(
41880
+ "data-roughness"
41881
+ );
41882
+ lensMaterial.metalness = selectedOption.getAttribute(
41883
+ "data-metalness"
41884
+ );
41885
+ const name = document.getElementById("LensdropdownNameD");
41886
+ name.textContent = selectedOption.getAttribute("data-name");
41887
+ const desc = document.getElementById("LensdropdownSkuD");
41888
+ desc.textContent = selectedOption.getAttribute("data-desc");
41889
+ const priceElement = document.getElementById("lensPrice");
41890
+ priceElement.textContent = "+ $" + selectedOption.getAttribute("data-price") + ".00 USD";
41891
+ }
41892
+ }
41893
+ selectDropdown.style.display = "none";
41894
+ });
41895
+ }
41896
+ button.addEventListener("mousedown", () => {
41897
+ if (selectDropdown.style.display === "block") {
41898
+ selectDropdown.style.display = "none";
41899
+ } else {
41900
+ selectDropdown.style.display = "block";
41901
+ }
41902
+ });
41903
+ }
41904
+ async setupLensDefault(response) {
41905
+ if (lensMaterial) {
41906
+ lensMaterial.color = new Color(response.customisation[0].color);
41907
+ lensMaterial.opacity = response.customisation[0].opacity;
41908
+ lensMaterial.metalness = response.customisation[0].metalness;
41909
+ lensMaterial.roughness = response.customisation[0].roughness;
41910
+ if (response.customisation[0].finish == "MIRBLKHMC") {
41911
+ lensMaterial.clearcoat = 1;
41912
+ lensMaterial.clearcoatRoughness = 0;
41913
+ } else if (response.customisation[0].finish == "HMCCR") {
41914
+ lensMaterial.clearcoat = 0;
41915
+ lensMaterial.clearcoatRoughness = 1;
41916
+ } else if (response.customisation[0].finish == "MIRSILHMC") {
41917
+ lensMaterial.clearcoat = 1;
41918
+ lensMaterial.clearcoatRoughness = 0;
41919
+ }
41920
+ }
41921
+ }
41760
41922
  setupLensMaterial(selectedLens) {
41761
41923
  if (lensMaterial) {
41762
41924
  if (selectedLens.direction == "u") {
@@ -41931,8 +42093,8 @@ bool bvhIntersectFirstHit(
41931
42093
  this.renderer.setRenderTarget(null);
41932
42094
  this.renderer.setClearAlpha(initialClearAlpha);
41933
42095
  this.scene.background = initialBackground;
41934
- gemstoneMaterial.uniforms.viewMatrixInverse.value = this.camera.matrixWorld;
41935
- gemstoneMaterial.uniforms.projectionMatrixInverse.value = this.camera.projectionMatrixInverse;
42096
+ diamondMaterial.uniforms.viewMatrixInverse.value = this.camera.matrixWorld;
42097
+ diamondMaterial.uniforms.projectionMatrixInverse.value = this.camera.projectionMatrixInverse;
41936
42098
  requestAnimationFrame(animate);
41937
42099
  composer.render();
41938
42100
  };
@@ -41950,32 +42112,54 @@ bool bvhIntersectFirstHit(
41950
42112
  });
41951
42113
  }
41952
42114
  });
41953
- this.scene.add(model);
42115
+ const Modelscene = model;
42116
+ this.scene.add(Modelscene);
41954
42117
  }
41955
42118
  }
42119
+ const { warn } = console;
41956
42120
  class SDKServiceFactory {
41957
42121
  constructor({
41958
42122
  log: log2,
41959
42123
  logErr: logErr2,
41960
42124
  apiService,
41961
- metaData
42125
+ metaData,
42126
+ config: config2
41962
42127
  }) {
41963
42128
  __publicField(this, "log");
41964
42129
  __publicField(this, "logErr");
41965
42130
  __publicField(this, "metaData");
42131
+ __publicField(this, "loaderName");
41966
42132
  __publicField(this, "apiKey");
41967
42133
  __publicField(this, "scriptStreamEncoderId");
42134
+ __publicField(this, "rawNodeList");
42135
+ __publicField(this, "targetNodeList");
42136
+ __publicField(this, "status");
41968
42137
  __publicField(this, "isLoaded");
42138
+ __publicField(this, "loadCount");
42139
+ __publicField(this, "mutationObserver");
42140
+ __publicField(this, "config");
41969
42141
  __publicField(this, "apiService");
41970
- __publicField(this, "customRenderer");
42142
+ this.config = config2;
41971
42143
  this.apiService = apiService;
41972
42144
  this.metaData = metaData;
41973
42145
  this.apiKey = null;
41974
42146
  this.scriptStreamEncoderId = `sprie-embed🔴${Date.now().toString()}`;
42147
+ this.rawNodeList = document.getElementsByClassName(
42148
+ this.metaData.targetClassName
42149
+ );
42150
+ this.targetNodeList = [];
42151
+ this.status = ESDKStatus.Init;
41975
42152
  this.isLoaded = false;
42153
+ this.loadCount = 0;
42154
+ this.loaderName = "sprie-embed-loader";
41976
42155
  this.log = log2.bind(this);
41977
42156
  this.logErr = logErr2.bind(this);
41978
- this.customRenderer = new CustomRenderer(apiService);
42157
+ this.mutationObserver = null;
42158
+ }
42159
+ loadMesage() {
42160
+ this.log(
42161
+ `🚀 Loaded SprieEmbed @${this.metaData.appVersion} (${this.config.host.replace(/^https?:\/\//, "").replace(/\/$/, "").replace(".sprie.io", "@sprie")})`
42162
+ );
41979
42163
  }
41980
42164
  /**
41981
42165
  * Scans the current script tag for api key and sets it to this.apiKey
@@ -41997,11 +42181,63 @@ bool bvhIntersectFirstHit(
41997
42181
  }
41998
42182
  }
41999
42183
  /**
42000
- * Authenticates with Sprie Server with apikey.
42184
+ * Prepares the target node list object (this.targetNodeList) from sprie embed class elements
42185
+ */
42186
+ prepareTargetNodeList() {
42187
+ this.status = ESDKStatus.Preparing;
42188
+ if (!this.apiService.isAuthenticated || !this.apiKey || this.apiService.fetcher.IsConfigExpired()) {
42189
+ throw new Error("Sprie not authenticated");
42190
+ }
42191
+ for (let i = 0; i < this.rawNodeList.length; i += 1) {
42192
+ const targetRawElement = this.rawNodeList[i];
42193
+ const sku = targetRawElement.getAttribute("data-sprie-sku") || targetRawElement.getAttribute("data-sku");
42194
+ const barcode = targetRawElement.getAttribute("data-sprie-barcode");
42195
+ const customClass = targetRawElement.getAttribute("data-class") || "";
42196
+ const styleElement = targetRawElement;
42197
+ styleElement.style.position = "relative";
42198
+ styleElement.style.height = "max-content";
42199
+ const nodeElement = {
42200
+ id: `sprie-embed-${this.apiService.fetcher.config.ORGID}-${barcode || sku}-${Math.ceil(
42201
+ Math.random() * 1e5
42202
+ )}`,
42203
+ htmlNode: targetRawElement,
42204
+ sku,
42205
+ barcode,
42206
+ status: "loading",
42207
+ customClass,
42208
+ customOptions: targetRawElement.getAttribute("data-model-options") || ""
42209
+ };
42210
+ this.targetNodeList.push(nodeElement);
42211
+ }
42212
+ }
42213
+ async loadBySku(sku, classSelector) {
42214
+ if (!sku) {
42215
+ throw new Error("SKU is required");
42216
+ }
42217
+ const loadBySkuSelector = classSelector ? `.${classSelector}` : `.${this.metaData.targetClassName}`;
42218
+ const targetElement = document.querySelector(loadBySkuSelector);
42219
+ if (!targetElement) {
42220
+ throw new Error("Target element not found");
42221
+ }
42222
+ targetElement.setAttribute("data-sprie-sku", sku);
42223
+ await this.fetchData({
42224
+ id: `sprie-embed-${this.apiService.fetcher.config.ORGID}-${sku}-${Math.ceil(
42225
+ Math.random() * 1e5
42226
+ )}`,
42227
+ htmlNode: targetElement,
42228
+ status: "loading",
42229
+ barcode: null,
42230
+ customClass: "",
42231
+ sku
42232
+ });
42233
+ }
42234
+ /**
42235
+ * Authenticates with Spire Server with apikey.
42001
42236
  * @returns {void}
42002
42237
  */
42003
42238
  async authenticate() {
42004
42239
  EventService.AuthLoading({ isLoading: true });
42240
+ this.status = ESDKStatus.Authenticating;
42005
42241
  if (this.apiService.isAuthenticated)
42006
42242
  return;
42007
42243
  if (!this.apiKey) {
@@ -42020,6 +42256,240 @@ bool bvhIntersectFirstHit(
42020
42256
  EventService.AuthLoading({ isLoading: false });
42021
42257
  EventService.AuthDone();
42022
42258
  }
42259
+ async fetchData(elemen) {
42260
+ const newElement = { ...elemen };
42261
+ if (!elemen.barcode && !elemen.sku) {
42262
+ warn(`Pass either "data-sprie-barcode" or "data-spri-sku". Received neither for ${elemen.htmlNode.tagName}`);
42263
+ return null;
42264
+ }
42265
+ try {
42266
+ const assetResult = await this.apiService.FetchAssetBySKUOrBarcode({
42267
+ barcode: elemen.barcode,
42268
+ sku: elemen.sku
42269
+ });
42270
+ if (assetResult && this.apiService.fetcher.config.ORGID) {
42271
+ newElement.status = "loaded";
42272
+ newElement.title = assetResult.name;
42273
+ const modelAsset = await this.apiService.DownloadMA({
42274
+ orgId: this.apiService.fetcher.config.ORGID,
42275
+ assetsId: assetResult._id
42276
+ });
42277
+ const customRenderer2 = new CustomRenderer(this.apiService);
42278
+ if (modelAsset) {
42279
+ customRenderer2.renderModel(modelAsset.asset.cloudfrontUrl, false, modelAsset.decryptionKey);
42280
+ customRenderer2.setupDropdownAndListeners(assetResult);
42281
+ customRenderer2.setupLensDefault(assetResult);
42282
+ const list = await this.apiService.FetchCustomisationList();
42283
+ customRenderer2.setupLensDropdownAndListeners(list);
42284
+ }
42285
+ }
42286
+ if (assetResult == null ? void 0 : assetResult._id) {
42287
+ this.apiService.HandleAssetUsage(assetResult._id);
42288
+ }
42289
+ } catch (err2) {
42290
+ warn("Error fetching or downloading asset:", err2);
42291
+ }
42292
+ return newElement;
42293
+ }
42294
+ /**
42295
+ * Fetches all asset data from targetNodeList and updates it.
42296
+ */
42297
+ async fetchAllData() {
42298
+ this.status = ESDKStatus.Fetching;
42299
+ EventService.FetchingData();
42300
+ this.targetNodeList = await Promise.all(this.targetNodeList.map((x2) => x2 ? this.fetchData(x2) : null));
42301
+ }
42302
+ /**
42303
+ * Add event listener for all the data nodes data-sku change event.
42304
+ */
42305
+ addTargetNodeChangeListener() {
42306
+ var _a;
42307
+ if (!this.apiService.isAuthenticated || !this.apiKey || this.apiService.fetcher.IsConfigExpired()) {
42308
+ throw new Error("Sprie not authenticated");
42309
+ }
42310
+ const org = this.apiService.fetcher.config.ORGID;
42311
+ const callback = async (mutationList) => {
42312
+ mutationList.forEach(async (mutationRecord) => {
42313
+ if (mutationRecord.type === "attributes" && (mutationRecord.attributeName === "data-sku" || mutationRecord.attributeName === "data-sprie-sku" || mutationRecord.attributeName === "data-sprie-barcode")) {
42314
+ const changedNodeItem = this.targetNodeList.find((item) => (item == null ? void 0 : item.htmlNode) === mutationRecord.target);
42315
+ const htmlTargetDataset = mutationRecord.target.dataset;
42316
+ const changedSku = htmlTargetDataset.sprieSku || htmlTargetDataset.sprieBarcode || htmlTargetDataset.sku;
42317
+ if (changedNodeItem) {
42318
+ changedNodeItem.id = `sprie-embed-${org}-${changedSku}-${Math.ceil(
42319
+ Math.random() * 1e5
42320
+ )}`;
42321
+ if (htmlTargetDataset.sprieSku || htmlTargetDataset.sku) {
42322
+ changedNodeItem.sku = changedSku || "";
42323
+ }
42324
+ if (htmlTargetDataset.sprieBarcode) {
42325
+ changedNodeItem.barcode = changedSku || "";
42326
+ }
42327
+ const changedSKUData = await this.fetchData(changedNodeItem);
42328
+ const iframeElement = changedNodeItem.htmlNode.querySelector("iframe");
42329
+ if (iframeElement && changedSKUData) {
42330
+ const url = changedSKUData.content + this.metaData.previewUrlPrams + changedSKUData.customOptions || "";
42331
+ iframeElement.setAttribute("src", url);
42332
+ }
42333
+ }
42334
+ }
42335
+ });
42336
+ };
42337
+ this.mutationObserver = new MutationObserver(callback);
42338
+ for (let i = 0; i < this.targetNodeList.length; i += 1) {
42339
+ const targetNode = (_a = this.targetNodeList[i]) == null ? void 0 : _a.htmlNode;
42340
+ if (targetNode) {
42341
+ this.mutationObserver.observe(targetNode, {
42342
+ attributes: true,
42343
+ attributeOldValue: true
42344
+ // presever old value.
42345
+ });
42346
+ }
42347
+ }
42348
+ }
42349
+ /**
42350
+ * Mounts new iframe with targetElementNode data
42351
+ */
42352
+ // mountElement() {
42353
+ // this.status = ESDKStatus.Loading;
42354
+ // this.targetNodeList.map(async (elemen) => {
42355
+ // if (!elemen?.content) {
42356
+ // return;
42357
+ // }
42358
+ // const nodeElement: IEmbedTargetNode = elemen;
42359
+ // const targetContainer: Element = document.createElement('iframe');
42360
+ // targetContainer.id = nodeElement.id;
42361
+ // const targetContent = nodeElement.content
42362
+ // + this.metaData.previewUrlPrams
42363
+ // + nodeElement.customOptions || '';
42364
+ // targetContainer.setAttribute('title', nodeElement.title || '');
42365
+ // targetContainer.setAttribute('frameborder', '0');
42366
+ // targetContainer.setAttribute('marginheight', '0');
42367
+ // targetContainer.setAttribute('marginwidth', '0');
42368
+ // targetContainer.setAttribute('marginheight', '0');
42369
+ // if (nodeElement.customClass) {
42370
+ // targetContainer.classList.add(nodeElement.customClass);
42371
+ // }
42372
+ // targetContainer.setAttribute('src', targetContent);
42373
+ // nodeElement.htmlNode.appendChild(targetContainer);
42374
+ // this.loadCount += 1;
42375
+ // });
42376
+ // EventService.EmbedLoaded();
42377
+ // }
42378
+ mountElement() {
42379
+ this.status = ESDKStatus.Loading;
42380
+ this.targetNodeList.map(async (elemen) => {
42381
+ if (!(elemen == null ? void 0 : elemen.content)) {
42382
+ return;
42383
+ }
42384
+ const nodeElement = elemen;
42385
+ const targetContainer = document.createElement("iframe");
42386
+ targetContainer.id = nodeElement.id;
42387
+ const targetContent = nodeElement.content + this.metaData.previewUrlPrams + nodeElement.customOptions || "";
42388
+ targetContainer.setAttribute("title", nodeElement.title || "");
42389
+ targetContainer.setAttribute("frameborder", "0");
42390
+ targetContainer.setAttribute("marginheight", "0");
42391
+ targetContainer.setAttribute("marginwidth", "0");
42392
+ targetContainer.setAttribute("marginheight", "0");
42393
+ if (nodeElement.customClass) {
42394
+ targetContainer.classList.add(nodeElement.customClass);
42395
+ }
42396
+ targetContainer.setAttribute("src", targetContent);
42397
+ nodeElement.htmlNode.appendChild(targetContainer);
42398
+ this.loadCount += 1;
42399
+ });
42400
+ EventService.EmbedLoaded();
42401
+ }
42402
+ Unmount() {
42403
+ if (this.targetNodeList.length === 0) {
42404
+ this.logErr("No targetNode found! Nothing to Unmount.");
42405
+ }
42406
+ this.targetNodeList.forEach((elem) => {
42407
+ if (elem && elem.htmlNode) {
42408
+ const eh = elem.htmlNode;
42409
+ eh.textContent = "";
42410
+ }
42411
+ });
42412
+ this.isLoaded = false;
42413
+ this.targetNodeList = [];
42414
+ if (this.mutationObserver) {
42415
+ this.mutationObserver.disconnect();
42416
+ }
42417
+ }
42418
+ showLoader() {
42419
+ this.targetNodeList.map(async (elemen) => {
42420
+ if (!(elemen == null ? void 0 : elemen.content)) {
42421
+ return;
42422
+ }
42423
+ const nodeElement = elemen;
42424
+ const divContainer = document.createElement("div");
42425
+ divContainer.setAttribute("class", this.loaderName);
42426
+ divContainer.style.position = "absolute";
42427
+ divContainer.style.boxSizing = "border-box";
42428
+ divContainer.style.width = "100%";
42429
+ divContainer.style.display = "flex";
42430
+ divContainer.style.height = "100%";
42431
+ divContainer.style.backgroundColor = "#00000032";
42432
+ divContainer.style.zIndex = "9998";
42433
+ divContainer.style.justifyContent = "center";
42434
+ divContainer.style.accentColor = "center";
42435
+ divContainer.style.left = "0";
42436
+ divContainer.style.top = "0";
42437
+ divContainer.style.backdropFilter = "blur(6px)";
42438
+ const div = document.createElement("div");
42439
+ div.style.position = "relative";
42440
+ div.style.left = "-9999px";
42441
+ div.style.top = "45%";
42442
+ div.style.zIndex = "9999";
42443
+ div.style.height = "15px";
42444
+ div.style.width = "15px";
42445
+ div.style.color = "white";
42446
+ div.style.boxShadow = "9974px 0 0 0 #303045, 9999px 0 0 0 #303045, 10024px 0 0 0 #303045";
42447
+ div.style.borderRadius = "8px";
42448
+ div.style.animation = " dotTyping 1s infinite linear";
42449
+ div.animate(
42450
+ [
42451
+ {
42452
+ boxShadow: "9974px 0 0 0 #303045, 9999px 0 0 0 #303045, 10024px 0 0 0 #303045"
42453
+ },
42454
+ {
42455
+ boxShadow: "9974px -10px 0 0 #303045, 9999px 0 0 0 #303045, 10024px 0 0 0 #303045"
42456
+ },
42457
+ {
42458
+ boxShadow: "9974px 0 0 0 #303045, 9999px 0 0 0 #303045, 10024px 0 0 0 #303045"
42459
+ },
42460
+ {
42461
+ boxShadow: "9974px 0 0 0 #303045, 9999px -10px 0 0 #303045, 10024px 0 0 0 #303045"
42462
+ },
42463
+ {
42464
+ boxShadow: "9974px 0 0 0 #303045, 9999px 0 0 0 #303045, 10024px 0 0 0 #303045"
42465
+ },
42466
+ {
42467
+ boxShadow: "9974px 0 0 0 #303045, 9999px 0 0 0 #303045, 10024px -10px 0 0 #303045"
42468
+ },
42469
+ {
42470
+ boxShadow: "9974px 0 0 0 #303045, 9999px 0 0 0 #303045, 10024px 0 0 0 #303045"
42471
+ }
42472
+ ],
42473
+ {
42474
+ duration: 1e3,
42475
+ iterations: Infinity
42476
+ }
42477
+ );
42478
+ divContainer.appendChild(div);
42479
+ nodeElement == null ? void 0 : nodeElement.htmlNode.appendChild(divContainer);
42480
+ });
42481
+ }
42482
+ hideLoader() {
42483
+ const elms = document.querySelectorAll(`[class='${this.loaderName}']`);
42484
+ let counter = 0;
42485
+ while (counter <= elms.length) {
42486
+ const elem = elms[counter];
42487
+ if (elem) {
42488
+ elms[counter].style.display = "none";
42489
+ }
42490
+ counter += 1;
42491
+ }
42492
+ }
42023
42493
  /**
42024
42494
  * Main entry point for SprieEmbed
42025
42495
  * @returns {boolean} true if success, false if error
@@ -42028,7 +42498,18 @@ bool bvhIntersectFirstHit(
42028
42498
  try {
42029
42499
  this.scanApiKeyFromCurrentScriptTag();
42030
42500
  await this.authenticate();
42501
+ this.prepareTargetNodeList();
42502
+ this.addTargetNodeChangeListener();
42503
+ await this.fetchAllData();
42504
+ this.showLoader();
42505
+ await this.mountElement();
42506
+ this.status = ESDKStatus.Done;
42031
42507
  this.isLoaded = true;
42508
+ if (this.isLoaded) {
42509
+ setTimeout(() => {
42510
+ this.hideLoader();
42511
+ }, 1800);
42512
+ }
42032
42513
  return true;
42033
42514
  } catch (e) {
42034
42515
  this.log("SprieEmbed Loading failed.");
@@ -42372,6 +42853,8 @@ bool bvhIntersectFirstHit(
42372
42853
  }
42373
42854
  var jsxRuntimeExports = jsxRuntime.exports;
42374
42855
  const App$1 = "";
42856
+ const Button = "";
42857
+ const Panel = "";
42375
42858
  const MainContainer$1 = "";
42376
42859
  const FrameDropdown$1 = "";
42377
42860
  const dropdownIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE5IDlMMTIuNzgwOSAxNC4zMzA2QzEyLjMzMTYgMTQuNzE1OCAxMS42Njg0IDE0LjcxNTggMTEuMjE5MSAxNC4zMzA2TDUgOSIgc3Ryb2tlPSIjNEQ0RDREIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+Cjwvc3ZnPgo=";
@@ -42594,29 +43077,34 @@ bool bvhIntersectFirstHit(
42594
43077
  async function changeCustomRenderer({
42595
43078
  orgId,
42596
43079
  apiService,
42597
- sdkService,
42598
43080
  frameList,
42599
43081
  setLoading
42600
43082
  }) {
42601
- customRenderer = sdkService.customRenderer;
42602
- if (!customRenderer.isInitialised) {
42603
- customRenderer.intialize();
42604
- customRenderer.setupAndRenderScene();
42605
- }
43083
+ customRenderer = new CustomRenderer(apiService);
43084
+ customRenderer.intialize();
43085
+ customRenderer.setupAndRenderScene();
42606
43086
  setLoading(true);
42607
43087
  const frame = frameList[0];
42608
- customRenderer.loadFirstFrame(orgId, frame).then(
42609
- () => {
42610
- currentFrame = frame;
42611
- setLoading(false);
43088
+ const apiRes = await apiService.DownloadMA({
43089
+ orgId,
43090
+ assetsId: frame._id
43091
+ });
43092
+ hasSpecialDefaultLens = frame.customisation.length == 0;
43093
+ const includedLens = hasSpecialDefaultLens ? null : frame.customisation.find((x2) => x2.type == "Lens");
43094
+ customRenderer.renderModel(apiRes.asset.cloudfrontUrl, hasSpecialDefaultLens, apiRes.decryptionKey).then(() => {
43095
+ if (includedLens) {
43096
+ customRenderer.setupLensMaterial(
43097
+ includedLens
43098
+ );
42612
43099
  }
42613
- );
43100
+ currentFrame = frame;
43101
+ setLoading(false);
43102
+ });
42614
43103
  }
42615
43104
  function MainContainer({
42616
- frameName,
43105
+ orgName,
42617
43106
  customEvent,
42618
43107
  apiService,
42619
- sdkService,
42620
43108
  frameList,
42621
43109
  lensList,
42622
43110
  viewerOnly
@@ -42633,7 +43121,25 @@ bool bvhIntersectFirstHit(
42633
43121
  (async () => {
42634
43122
  if (selectedLens) {
42635
43123
  setModelLoading(true);
42636
- await customRenderer.changeFrame(orgId, frame, selectedLens).then(() => {
43124
+ const apiRes = await apiService.DownloadMA({
43125
+ orgId,
43126
+ assetsId: frame._id
43127
+ });
43128
+ hasSpecialDefaultLens = frame.customisation.length == 0;
43129
+ const includedLens = hasSpecialDefaultLens ? null : frame.customisation.find((x2) => x2.type == "Lens");
43130
+ const renderAsIs = hasSpecialDefaultLens && selectedLens.sku == "lens-default";
43131
+ customRenderer.renderModel(apiRes.asset.cloudfrontUrl, renderAsIs, apiRes.decryptionKey).then(async () => {
43132
+ if (selectedLens.sku == "lens-default") {
43133
+ if (includedLens) {
43134
+ customRenderer.setupLensMaterial(
43135
+ includedLens
43136
+ );
43137
+ }
43138
+ } else {
43139
+ customRenderer.setupLensMaterial(
43140
+ selectedLens
43141
+ );
43142
+ }
42637
43143
  currentFrame = frame;
42638
43144
  setModelLoading(false);
42639
43145
  });
@@ -42689,7 +43195,6 @@ bool bvhIntersectFirstHit(
42689
43195
  if (apiService && frameList && orgId) {
42690
43196
  changeCustomRenderer({
42691
43197
  apiService,
42692
- sdkService,
42693
43198
  frameList,
42694
43199
  orgId,
42695
43200
  setLoading: setModelLoading
@@ -42703,7 +43208,7 @@ bool bvhIntersectFirstHit(
42703
43208
  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { id: "Sprie-config-Main-Container", children: [
42704
43209
  !viewerOnly && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: "Sprie-config-Checkout-Container", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { id: "Sprie-config-Checkout-box", children: [
42705
43210
  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { id: "Sprie-config-Checkout-header", children: [
42706
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: "Sprie-config-frameName", children: frameName }),
43211
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: "Sprie-config-frameName", children: orgName }),
42707
43212
  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: "Sprie-config-lensPrice", children: `${(selectedLens == null ? void 0 : selectedLens.price) ? `+ $${selectedLens == null ? void 0 : selectedLens.price}.00 USD` : ""}` })
42708
43213
  ] }),
42709
43214
  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { id: "Sprie-config-Checkout-body", children: [
@@ -42796,11 +43301,11 @@ bool bvhIntersectFirstHit(
42796
43301
  ] })
42797
43302
  ] });
42798
43303
  }
42799
- function App({ apiService, sdkService, sku, events: events2, viewerOnly = false }) {
43304
+ function App({ apiService, sku, events: events2, viewerOnly = false }) {
42800
43305
  const [settings, setSettings] = reactExports.useState(null);
42801
43306
  const frameList = (settings == null ? void 0 : settings.frameList) || null;
42802
43307
  const lensList = (settings == null ? void 0 : settings.lensList) || null;
42803
- const frameName = (settings == null ? void 0 : settings.frameName) || "";
43308
+ const orgName = (settings == null ? void 0 : settings.orgName) || "";
42804
43309
  reactExports.useEffect(() => {
42805
43310
  (async () => {
42806
43311
  const apiRes = await apiService.FetchAssetBySKUOrBarcode({
@@ -42811,7 +43316,7 @@ bool bvhIntersectFirstHit(
42811
43316
  setSettings({
42812
43317
  frameList: apiRes == null ? void 0 : apiRes.variants,
42813
43318
  lensList: lensApiRes == null ? void 0 : lensApiRes.data,
42814
- frameName: apiRes == null ? void 0 : apiRes.group.name
43319
+ orgName: apiRes == null ? void 0 : apiRes.group.name
42815
43320
  });
42816
43321
  })();
42817
43322
  }, [apiService, sku]);
@@ -42821,9 +43326,8 @@ bool bvhIntersectFirstHit(
42821
43326
  MainContainer,
42822
43327
  {
42823
43328
  customEvent: events2,
42824
- frameName,
43329
+ orgName,
42825
43330
  apiService,
42826
- sdkService,
42827
43331
  frameList,
42828
43332
  lensList,
42829
43333
  viewerOnly
@@ -50077,16 +50581,13 @@ bool bvhIntersectFirstHit(
50077
50581
  class UIService {
50078
50582
  constructor({
50079
50583
  apiService,
50080
- sdkService,
50081
50584
  events: events2
50082
50585
  }) {
50083
50586
  __publicField(this, "targetElement");
50084
50587
  __publicField(this, "apiService");
50085
- __publicField(this, "sdkService");
50086
50588
  __publicField(this, "events");
50087
50589
  __publicField(this, "htmlTarget");
50088
50590
  this.apiService = apiService;
50089
- this.sdkService = sdkService;
50090
50591
  this.events = events2;
50091
50592
  }
50092
50593
  mount(sku, options) {
@@ -50102,7 +50603,6 @@ bool bvhIntersectFirstHit(
50102
50603
  }
50103
50604
  this.targetElement.render(React.createElement(App, {
50104
50605
  apiService: this.apiService,
50105
- sdkService: this.sdkService,
50106
50606
  events: this.events,
50107
50607
  sku,
50108
50608
  viewerOnly: options.viewerOnly
@@ -50502,6 +51002,7 @@ bool bvhIntersectFirstHit(
50502
51002
  const logErr = (...data) => {
50503
51003
  error("❌ Sprie Error:", ...data);
50504
51004
  };
51005
+ const previewUrlPrams = "&ui_animations=0&ui_infos=0&ui_stop=0&ui_inspector=0&ui_watermark_link=0&ui_watermark=0&ui_ar=0&ui_help=0&ui_settings=0&ui_vr=0&ui_fullscreen=0&ui_annotations=0&ui_start=0&";
50505
51006
  const fetcherConfig = {
50506
51007
  HOST: config.host,
50507
51008
  STORE_PREFIX: config.storePrefix
@@ -50514,21 +51015,23 @@ bool bvhIntersectFirstHit(
50514
51015
  __publicField(this, "events");
50515
51016
  this.events = new CustomEventEmitter();
50516
51017
  this.apiService = new APIServiceFactory(new FetcherServiceFactory(fetcherConfig));
51018
+ this.uiService = new UIService({
51019
+ apiService: this.apiService,
51020
+ events: this.events
51021
+ });
50517
51022
  const sdkProps = {
50518
51023
  apiService: this.apiService,
51024
+ config,
50519
51025
  log,
50520
51026
  logErr,
50521
51027
  metaData: {
50522
- appVersion: version$1
51028
+ appVersion: version$1,
51029
+ previewUrlPrams,
51030
+ targetClassName: "sprie-embed-element"
50523
51031
  }
50524
51032
  };
50525
51033
  this.sdkService = new SDKServiceFactory(sdkProps);
50526
51034
  this.sdkService.Init();
50527
- this.uiService = new UIService({
50528
- apiService: this.apiService,
50529
- sdkService: this.sdkService,
50530
- events: this.events
50531
- });
50532
51035
  }
50533
51036
  load(sku, customId) {
50534
51037
  this.uiService.unmount();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@perceptimagery/dita-configurator-staging",
3
- "version": "0.1.7201",
3
+ "version": "0.1.7301",
4
4
  "author": "Rohan Satpute <rohan@perceptimagery.com>",
5
5
  "license": "UNLICENSED",
6
6
  "main": "dist/index.js",