@perceptimagery/dita-configurator-staging 0.1.4001 → 0.1.4002

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 (3) hide show
  1. package/README.md +38 -18
  2. package/dist/index.js +52 -17
  3. package/package.json +1 -1
package/README.md CHANGED
@@ -1,27 +1,47 @@
1
- # React + TypeScript + Vite
1
+ # Dita-configurator -preview
2
2
 
3
- This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
3
+ | An embeddable package for `Previewing | and changing.` SKUs
4
4
 
5
- Currently, two official plugins are available:
5
+ ## Documentation
6
6
 
7
- - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8
- - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
7
+ <https://docs.sprie.io/docs/?/>
9
8
 
10
- ## Expanding the ESLint configuration
9
+ ## Usage
11
10
 
12
- If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
11
+ Prod: `https://cdn.jsdelivr.net/npm/@perceptimagery/dita-configurator@latest`
12
+ Dev : `https://cdn.jsdelivr.net/npm/@perceptimagery/dita-configurator-staging@latest`
13
13
 
14
- - Configure the top-level `parserOptions` property like this:
14
+ ```HTML
15
+ <!-- index.html -->
16
+
17
+
18
+ <!-- Declare element with id `‘dita-3dconfig-element’` . This will get transformed after authentication -->
19
+ <div
20
+ id="‘dita-3dconfig-element’"
21
+ ></div>
22
+
23
+
24
+
25
+
26
+ <!-- Inject `Dita configurator` from CDN -->
27
+ <script src="https://cdn.jsdelivr.net/npm/@perceptimagery/dita-configurator@latest?apikey={apikey}"></script>
28
+
29
+ <!-- call our sdk and load your sku and add event listener for `add-to-cart` event -->
30
+ <!-- Our SDK exposes the Dita -->
31
+ <script>
32
+ function run() {
33
+ const SKU = "YOUR-SKU-CODE";
34
+ window.ditaConfigurator.load(SKU);
35
+ window.ditaConfigurator.events.on("add-to-cart",(eventData)=>{
36
+ console.log(eventData);
37
+ })
38
+ }
39
+
40
+ // on document load execute our run function
41
+ window.onload = () => { run(); } // to make sure our sdk and DOM is successfully loaded.
42
+
43
+ </script>
15
44
 
16
- ```js
17
- parserOptions: {
18
- ecmaVersion: 'latest',
19
- sourceType: 'module',
20
- project: ['./tsconfig.json', './tsconfig.node.json'],
21
- tsconfigRootDir: __dirname,
22
- },
23
45
  ```
24
46
 
25
- - Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
26
- - Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
27
- - Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
47
+
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* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nhtml,\nbody,\n#dita-3dconfig-element {\n width: 100%;\n height: 100%;\n font-family: 'Work Sans', sans-serif;\n}\n\n.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 fontsize: 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#Main-Container {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column-reverse;\n background: #ffffff;\n}\n\n#Viewer-Container {\n width: 100%;\n /* height: 100%; */\n}\n\n#Viewer-Container .webgl {\n /* border: 1px solid #000; */\n width: 100%;\n height: 99%;\n}\n\n#Checkout-Container {\n width: 100%;\n padding: 0.75rem;\n height: min(65%, 35rem);\n}\n\n#Checkout-box {\n width: 100%;\n background: #efefef;\n padding: 1rem;\n height: 100%;\n display: flex;\n flex-direction: column;\n}\n\n#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#Checkout-header .name {\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#Checkout-header .price {\n color: #222;\n font-size: 1.3125rem;\n font-weight: 400;\n line-height: 2.275rem; /* 173.333% */\n}\n\n#Checkout-body {\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n flex: 1;\n}\n\n#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 : 7rem */\n}\n\n/* Breakpoints */\n\n@media (min-width: 800px) {\n #Main-Container {\n flex-direction: row-reverse;\n }\n\n #Checkout-Container {\n width: auto;\n padding: 2.5rem;\n height: 100%;\n }\n\n #Checkout-box {\n width: 350px;\n padding: 1.5rem;\n }\n}\n\n@media (min-width: 992px) {\n #Checkout-box {\n width: 450px;\n padding: 2.5rem;\n }\n}\n/* Dropdown.css */\n\n.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.dropdown-wrapper {\n position: relative;\n width: 100%;\n}\n\n.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.select-box.open {\n border-bottom-right-radius: 0;\n border-bottom-left-radius: 0;\n}\n\n.selected-option {\n flex: 1;\n}\n\n.arrow {\n margin-left: 10px;\n transition: transform 0.3s ease;\n}\n\n.arrow.up {\n transform: rotate(180deg);\n}\n\n.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.dropdown-options.open {\n opacity: 1;\n visibility: visible;\n height: auto;\n}\n\n.dropdown-options li {\n padding: 0.75rem 1rem;\n cursor: pointer;\n transition: background-color 0.3s ease;\n}\n\n.dropdown-options li:hover {\n background-color: #f0f0f0;\n}\n\n.dropdown-options li.selected {\n background-color: #f2f2f2; /* Highlight color for selected option */\n}\n\n.frame-details-wrapper {\n display: flex;\n gap: 1rem;\n height: auto;\n}\n\n.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.details {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.details .frameName {\n color: #4d4d4d;\n font-size: 1rem;\n font-weight: 400;\n line-height: 1.5rem; /* 150% */\n}\n\n.details .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}/* LensDropdown.css */\n\n.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.dropdown-wrapper {\n position: relative;\n width: 100%;\n}\n\n.select-box {\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: space-between;\n /* padding: 1rem 1.25rem; */\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.select-box.open {\n border-bottom-right-radius: 0;\n border-bottom-left-radius: 0;\n}\n\n.selected-lens {\n flex: 1;\n display: flex;\n gap: 1rem;\n height: auto;\n}\n\n.selected-lens .lens-details {\n display: flex;\n flex-direction: column;\n height: auto;\n}\n\n.colorBox {\n width: 3.4rem;\n height: 2.5rem;\n}\n\n.lensName {\n color: #4d4d4d;\n font-size: 1rem;\n font-weight: 400;\n line-height: 1.5rem; /* 150% */\n}\n\n.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}\n\n.arrow {\n margin-left: 10px;\n transition: transform 0.3s ease;\n}\n\n.arrow.up {\n transform: rotate(180deg);\n}\n\n.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: #fff;\n border-radius: 0 0 0.125rem 0.125rem;\n border: 0;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\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.5rem;\n}\n\n.lens-dropdown-options.open {\n opacity: 1;\n visibility: visible;\n}\n\n.lens-dropdown-options li {\n padding: 1rem 1.25rem;\n cursor: pointer;\n transition: background-color 0.3s ease;\n min-width: 3.5rem;\n height: 2.625rem;\n padding: 0.25rem;\n}\n\n.lens-dropdown-options li .li-element {\n width: 100%;\n height: 100%;\n z-index: 10;\n}\n\n.lens-dropdown-options li .tooltip {\n display: none;\n}\n\n@media (min-width: 768px) {\n .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 }\n\n .lens-dropdown-options li {\n min-width: auto;\n }\n\n .lens-dropdown-options li .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 .tooltip.top {\n bottom: 12%;\n }\n\n .tooltip.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* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nhtml,\nbody,\n#dita-3dconfig-element {\n width: 100%;\n height: 100%;\n font-family: 'Work Sans', sans-serif;\n}\n\n.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 fontsize: 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#Main-Container {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column-reverse;\n background: #ffffff;\n}\n\n#Viewer-Container {\n width: 100%;\n /* height: 100%; */\n}\n\n#Viewer-Container .webgl {\n /* border: 1px solid #000; */\n width: 100%;\n height: 99%;\n}\n\n#Checkout-Container {\n width: 100%;\n padding: 0.75rem;\n height: min(70%, 45rem);\n}\n\n#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#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#Checkout-header .name {\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#Checkout-header .price {\n color: #222;\n font-size: 1.3125rem;\n font-weight: 400;\n line-height: 2.275rem; /* 173.333% */\n}\n\n#Checkout-body {\n display: flex;\n flex-direction: column;\n}\n\n#Dropdown-Container{\n flex-direction: column;\n gap: 1.5rem;\n}\n\n#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/* Breakpoints */\n\n@media (min-width: 800px) {\n #Main-Container {\n flex-direction: row-reverse;\n }\n\n #Checkout-Container {\n width: auto;\n padding: 2.5rem;\n height: 100%;\n }\n\n #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 #Dropdown-Container{\n gap: 2.5rem;\n }\n}\n\n@media (min-width: 992px) {\n #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.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.dropdown-wrapper {\n position: relative;\n width: 100%;\n}\n\n.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.select-box.open {\n border-bottom-right-radius: 0;\n border-bottom-left-radius: 0;\n}\n\n.selected-option {\n flex: 1;\n}\n\n.arrow {\n margin-left: 10px;\n transition: transform 0.3s ease;\n}\n\n.arrow.up {\n transform: rotate(180deg);\n}\n\n.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.dropdown-options.open {\n opacity: 1;\n visibility: visible;\n height: auto;\n z-index : 1000;\n}\n\n.dropdown-options li {\n padding: 0.75rem 1rem;\n cursor: pointer;\n transition: background-color 0.3s ease;\n}\n\n.dropdown-options li:hover {\n background-color: #f0f0f0;\n}\n\n.dropdown-options li.selected {\n background-color: #f2f2f2; /* Highlight color for selected option */\n}\n\n.selected-option {\n width: 90%;\n}\n\n.frame-details-wrapper {\n display: flex;\n gap: 1rem;\n height: auto;\n overflow: hidden;\n}\n\n.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.details {\n display: flex;\n flex-direction: column;\n gap: 2px;\n overflow: hidden;\n}\n\n.details .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}\n\n.details .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}\n/* LensDropdown.css */\n\n.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.dropdown-wrapper {\n position: relative;\n width: 100%;\n}\n\n.select-box {\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: space-between;\n /* padding: 1rem 1.25rem; */\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.select-box.open {\n border-bottom-right-radius: 0;\n border-bottom-left-radius: 0;\n}\n\n.selected-lens {\n flex: 1;\n display: flex;\n gap: 1rem;\n height: auto;\n}\n\n.selected-lens .lens-details {\n display: flex;\n flex-direction: column;\n height: auto;\n}\n\n.colorBox {\n width: 3.4rem;\n height: 2.5rem;\n}\n\n.lensName {\n color: #4d4d4d;\n font-size: 1rem;\n font-weight: 400;\n line-height: 1.5rem; /* 150% */\n}\n\n.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}\n\n.arrow {\n margin-left: 10px;\n transition: transform 0.3s ease;\n}\n\n.arrow.up {\n transform: rotate(180deg);\n}\n\n.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.lens-dropdown-options.open {\n opacity: 1;\n visibility: visible;\n}\n\n.lens-dropdown-options li {\n padding: 1rem 1.25rem;\n cursor: pointer;\n transition: background-color 0.3s ease;\n min-width: 3.5rem;\n height: 2.625rem;\n padding: 0.25rem;\n}\n\n.lens-dropdown-options li .li-element {\n width: 100%;\n height: 100%;\n z-index: 10;\n}\n\n.lens-dropdown-options li .tooltip {\n display: none;\n}\n\n@media (min-width: 768px) {\n .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 .lens-dropdown-options li {\n min-width: auto;\n }\n\n .lens-dropdown-options li .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 .tooltip.top {\n bottom: 12%;\n }\n\n .tooltip.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 = "0.1.4001";
114
+ const version = "0.1.4002";
115
115
  class APIServiceFactory {
116
116
  constructor(fetcher) {
117
117
  __publicField(this, "isAuthenticated");
@@ -40631,7 +40631,12 @@ var __publicField = (obj, key, value) => {
40631
40631
  const MainContainer$1 = "";
40632
40632
  const FrameDropdown$1 = "";
40633
40633
  const dropdownIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE5IDlMMTIuNzgwOSAxNC4zMzA2QzEyLjMzMTYgMTQuNzE1OCAxMS42Njg0IDE0LjcxNTggMTEuMjE5MSAxNC4zMzA2TDUgOSIgc3Ryb2tlPSIjNEQ0RDREIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+Cjwvc3ZnPgo=";
40634
- function FrameDropdown({ label, options, selectedFrame, changeFrame }) {
40634
+ function FrameDropdown({
40635
+ label,
40636
+ options,
40637
+ selectedFrame,
40638
+ changeFrame
40639
+ }) {
40635
40640
  const [isOpen, setIsOpen] = reactExports.useState(false);
40636
40641
  const dropdownRef = reactExports.useRef(null);
40637
40642
  const handleToggleDropdown = () => {
@@ -40654,23 +40659,55 @@ var __publicField = (obj, key, value) => {
40654
40659
  }, []);
40655
40660
  return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "dropdown-wrapper", ref: dropdownRef, children: [
40656
40661
  /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "label", children: label }),
40657
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `select-box ${isOpen ? "open" : ""}`, onClick: handleToggleDropdown, children: [
40658
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "selected-option frame-details-wrapper", children: [
40659
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "variantImgBox", children: /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: selectedFrame && selectedFrame.variantImage, alt: "variant-img", className: "variantImg", width: 50, height: 42 }) }),
40660
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "details", children: [
40661
- /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "frameName", children: selectedFrame && selectedFrame.name }),
40662
- /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "skuName", children: selectedFrame && selectedFrame.sku })
40663
- ] })
40664
- ] }),
40665
- /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: dropdownIcon, alt: "dropdown-icon", className: `arrow ${isOpen ? "up" : ""}` })
40666
- ] }),
40662
+ /* @__PURE__ */ jsxRuntimeExports.jsxs(
40663
+ "div",
40664
+ {
40665
+ className: `select-box ${isOpen ? "open" : ""}`,
40666
+ onClick: handleToggleDropdown,
40667
+ children: [
40668
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "selected-option frame-details-wrapper", children: [
40669
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "variantImgBox", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
40670
+ "img",
40671
+ {
40672
+ src: selectedFrame && selectedFrame.variantImage,
40673
+ alt: "variant-img",
40674
+ className: "variantImg",
40675
+ width: 50,
40676
+ height: 42
40677
+ }
40678
+ ) }),
40679
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "details", children: [
40680
+ /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "frameName", children: selectedFrame && selectedFrame.name }),
40681
+ /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "skuName", children: selectedFrame && selectedFrame.sku })
40682
+ ] })
40683
+ ] }),
40684
+ /* @__PURE__ */ jsxRuntimeExports.jsx(
40685
+ "img",
40686
+ {
40687
+ src: dropdownIcon,
40688
+ alt: "dropdown-icon",
40689
+ className: `arrow ${isOpen ? "up" : ""}`
40690
+ }
40691
+ )
40692
+ ]
40693
+ }
40694
+ ),
40667
40695
  /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: `dropdown-options ${isOpen ? "open" : ""}`, children: options && options.map((option) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
40668
40696
  "li",
40669
40697
  {
40670
40698
  onClick: () => handleSelectOption(option),
40671
40699
  className: `frame-details-wrapper ${selectedFrame && selectedFrame.name === option.name ? "selected" : ""}`,
40672
40700
  children: [
40673
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "variantImgBox", children: /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: option.variantImage, alt: "variant-img", className: "variantImg", width: 50, height: 42 }) }),
40701
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "variantImgBox", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
40702
+ "img",
40703
+ {
40704
+ src: option.variantImage,
40705
+ alt: "variant-img",
40706
+ className: "variantImg",
40707
+ width: 50,
40708
+ height: 42
40709
+ }
40710
+ ) }),
40674
40711
  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "details", children: [
40675
40712
  /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "frameName", children: option.name }),
40676
40713
  /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "skuName", children: option.sku })
@@ -40873,7 +40910,7 @@ var __publicField = (obj, key, value) => {
40873
40910
  "div",
40874
40911
  {
40875
40912
  id: "Dropdown-Container",
40876
- style: { display: frameList && lensList ? "block" : "none" },
40913
+ style: { display: frameList && lensList ? "flex" : "none" },
40877
40914
  children: [
40878
40915
  /* @__PURE__ */ jsxRuntimeExports.jsx(
40879
40916
  FrameDropdown,
@@ -40884,8 +40921,6 @@ var __publicField = (obj, key, value) => {
40884
40921
  changeFrame
40885
40922
  }
40886
40923
  ),
40887
- /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
40888
- /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
40889
40924
  /* @__PURE__ */ jsxRuntimeExports.jsx(
40890
40925
  LensDropdown,
40891
40926
  {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@perceptimagery/dita-configurator-staging",
3
- "version": "0.1.4001",
3
+ "version": "0.1.4002",
4
4
  "author": "Abhishek Deb <abhishek@perceptimagery.com>",
5
5
  "license": "UNLICENSED",
6
6
  "main": "dist/index.js",