{"_id":"@commercetools-demo/web-components-assets","_rev":"4-a2aef02c3f39b4b5c26fa1a501923f1d","name":"@commercetools-demo/web-components-assets","dist-tags":{"latest":"1.1.1"},"versions":{"1.0.0":{"name":"@commercetools-demo/web-components-assets","version":"1.0.0","_id":"@commercetools-demo/web-components-assets@1.0.0","maintainers":[{"name":"lgiavedoni","email":"lgiavedoni@gmail.com"},{"name":"behnam777","email":"behnam777@gmail.com"}],"homepage":"https://github.com/commercetools-demo/web-component-collection","dist":{"shasum":"88248cc5127fa41da2c75534938e7054f7d962f0","tarball":"https://registry.npmjs.org/@commercetools-demo/web-components-assets/-/web-components-assets-1.0.0.tgz","fileCount":49,"integrity":"sha512-5VPU4s2Dqe3b8d7iuxKVLqwdF8eqp8W4WJzMKUoUelgxFrAFYiCYpJZEdwoS7DQm+yT+ZyJg+kXV0SG9JPU1jw==","signatures":[{"sig":"MEUCIF5lo3Oax5tQujRbErFpH68W0dUF8iJ2jGU1vZOuDRDyAiEA+U8zZaEXw4BiWr5NCAJG3HhOE3+vFsmxc6HaLJI7Crc=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":2082405},"main":"./public/main.js","type":"module","module":"./public/main.js","exports":{".":{"types":"./public/main.d.ts","import":"./public/main.js","require":"./public/main.js"}},"private":false,"scripts":{"dev":"vite","test":"echo 'test'","build":"vite build && tsc && yarn build:types","preview":"vite preview","build:types":"dts-bundle-generator --out-file public/main.d.ts public/main.ts"},"_npmUser":{"name":"behnam777","email":"behnam777@gmail.com"},"description":"A collection of reusable web components built with TypeScript.","directories":{},"dependencies":{"lit":"^3.2.1","dotenv":"^16.0.3","@commercetools/platform-sdk":"^4.0.0","@commercetools/sdk-client-v2":"^2.0.0"},"_hasShrinkwrap":false,"packageManager":"yarn@1.22.22","devDependencies":{"vite":"^6.2.0","typescript":"^5.2.2","@types/google.maps":"^3.58.1","dts-bundle-generator":"^9.5.1"},"_npmOperationalInternal":{"tmp":"tmp/web-components-assets_1.0.0_1747749847196_0.8584048688620929","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@commercetools-demo/web-components-assets","version":"1.0.1","_id":"@commercetools-demo/web-components-assets@1.0.1","maintainers":[{"name":"lgiavedoni","email":"lgiavedoni@gmail.com"},{"name":"behnam777","email":"behnam777@gmail.com"}],"homepage":"https://github.com/commercetools-demo/web-component-collection","dist":{"shasum":"0e331f6a406996515282ad4d6e988ec2932da8ac","tarball":"https://registry.npmjs.org/@commercetools-demo/web-components-assets/-/web-components-assets-1.0.1.tgz","fileCount":49,"integrity":"sha512-VcSXGkota1SqRxhEm1SIw2yJ17CEM+ncyL3pIxyA41H8s/NG/adFh/uJ+CuR9i+inVkBG4No3yb3EqdOfr3XOA==","signatures":[{"sig":"MEQCIBbUrBk9hNweOm0MHbH7ROeZEEUtwNvsyhr1038bXhCaAiB/R2Rx+r+zj4+SYWcX/0Yw/PgvGgE9UjiURBb0lypMcw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":2081544},"main":"./public/main.js","type":"module","module":"./public/main.js","exports":{".":{"types":"./public/main.d.ts","import":"./public/main.js","require":"./public/main.js"}},"private":false,"scripts":{"dev":"vite","test":"echo 'test'","build":"vite build && tsc && yarn build:types","preview":"vite preview","build:types":"dts-bundle-generator --out-file public/main.d.ts public/main.ts"},"_npmUser":{"name":"behnam777","email":"behnam777@gmail.com"},"description":"A collection of reusable web components built with TypeScript.","directories":{},"dependencies":{"lit":"^3.2.1","dotenv":"^16.0.3","@commercetools/platform-sdk":"^4.0.0","@commercetools/sdk-client-v2":"^2.0.0"},"_hasShrinkwrap":false,"packageManager":"yarn@1.22.22","devDependencies":{"vite":"^6.2.0","typescript":"^5.2.2","@types/google.maps":"^3.58.1","dts-bundle-generator":"^9.5.1"},"_npmOperationalInternal":{"tmp":"tmp/web-components-assets_1.0.1_1747769813421_0.05086024698967617","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"@commercetools-demo/web-components-assets","version":"1.1.0","license":"MIT*","_id":"@commercetools-demo/web-components-assets@1.1.0","maintainers":[{"name":"lgiavedoni","email":"lgiavedoni@gmail.com"},{"name":"behnam777","email":"behnam777@gmail.com"}],"homepage":"https://github.com/commercetools-demo/web-component-collection","dist":{"shasum":"fac1f1dbf033e3834527892eb5a6e8c713594ac1","tarball":"https://registry.npmjs.org/@commercetools-demo/web-components-assets/-/web-components-assets-1.1.0.tgz","fileCount":79,"integrity":"sha512-lxsflNRUnYT+bDwGl2AOAWvvyeL6KHULuEXUmapKdv14ZM5BHzh+Hiq1V+Z8oJvg1xs+rH+RO5JybrzSHTCvSg==","signatures":[{"sig":"MEYCIQCGZNs1x+miIQbo7xYmGHyjtjH7Z0fvbiZdnHcdLtEfngIhAOu7G0cWvv3rL1IbLvyxn1zuuGmdNV06Ff4JdIHdaIXk","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":2004612},"main":"./public/main.js","type":"module","module":"./public/main.js","exports":{".":{"types":"./public/types/main.d.ts","import":"./public/main.js","require":"./public/main.js"},"./split-item":{"types":"./public/types/split-item.d.ts","import":"./public/split-item.js"},"./stores-map":{"types":"./public/types/stores-map.d.ts","import":"./public/stores-map.js"},"./address-form":{"types":"./public/types/address-form.d.ts","import":"./public/address-form.js"},"./product-prices":{"types":"./public/types/product-prices.d.ts","import":"./public/product-prices.js"},"./split-shipping":{"types":"./public/types/split-shipping.d.ts","import":"./public/split-shipping.js"},"./address-preview":{"types":"./public/types/address-preview.d.ts","import":"./public/address-preview.js"},"./delivery-method":{"types":"./public/types/delivery-method.d.ts","import":"./public/delivery-method.js"},"./step-variant-selector":{"types":"./public/types/step-variant-selector.d.ts","import":"./public/step-variant-selector.js"},"./split-shipping-checkout":{"types":"./public/types/split-shipping-checkout.d.ts","import":"./public/split-shipping-checkout.js"}},"private":false,"scripts":{"dev":"vite","test":"echo 'test'","build":"vite build","preview":"vite preview"},"_npmUser":{"name":"behnam777","email":"behnam777@gmail.com"},"description":"This package provides reusable web components for Commercetools projects.","directories":{},"dependencies":{"lit":"^3.2.1","dotenv":"^16.0.3","@commercetools/platform-sdk":"^4.0.0","@commercetools/sdk-client-v2":"^2.0.0"},"_hasShrinkwrap":false,"packageManager":"yarn@1.22.22","devDependencies":{"vite":"^6.2.0","typescript":"^5.2.2","vite-plugin-dts":"^4.5.4","@types/google.maps":"^3.58.1","dts-bundle-generator":"^9.5.1"},"_npmOperationalInternal":{"tmp":"tmp/web-components-assets_1.1.0_1747776749671_0.27374010812436356","host":"s3://npm-registry-packages-npm-production"}},"1.1.1":{"name":"@commercetools-demo/web-components-assets","private":false,"version":"1.1.1","type":"module","homepage":"https://github.com/commercetools-demo/web-component-collection","exports":{".":{"types":"./public/main.d.ts","require":"./public/main.js","import":"./public/main.js"}},"main":"./public/main.js","module":"./public/main.js","scripts":{"dev":"vite","build":"vite build && tsc && yarn build:types","test":"echo 'test'","build:types":"dts-bundle-generator --out-file public/main.d.ts public/main.ts","preview":"vite preview"},"devDependencies":{"@types/google.maps":"^3.58.1","dts-bundle-generator":"^9.5.1","typescript":"^5.2.2","vite":"^6.2.0","vite-plugin-dts":"^4.5.4"},"dependencies":{"@commercetools/platform-sdk":"^4.0.0","@commercetools/sdk-client-v2":"^2.0.0","dotenv":"^16.0.3","lit":"^3.2.1"},"packageManager":"yarn@1.22.22","description":"A collection of reusable web components built with TypeScript.","_id":"@commercetools-demo/web-components-assets@1.1.1","dist":{"shasum":"d1939b50a33aaefc955754093d8ea41b8855c323","integrity":"sha512-ZzbdpoX1K5WVMoU9+ebm6VEJ64c0uouHlR9HtGT6vaAnMKnQvg0eH2mlUvqubv/r6mv7QesLrB9OwjpXfzx7kg==","tarball":"https://registry.npmjs.org/@commercetools-demo/web-components-assets/-/web-components-assets-1.1.1.tgz","fileCount":49,"unpackedSize":2087419,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIGCHU4zepRmVS4IzbGJJ1tJmwyGMyNM+vSSdNtm5TSCQAiAlw3lp4wDNa2bk2gLGUWwZ0pirohwshg/TmMiO8xmVIg=="}]},"_npmUser":{"name":"behnam777","email":"behnam777@gmail.com"},"directories":{},"maintainers":[{"name":"lgiavedoni","email":"lgiavedoni@gmail.com"},{"name":"behnam777","email":"behnam777@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/web-components-assets_1.1.1_1747777648356_0.678753647417532"},"_hasShrinkwrap":false}},"time":{"created":"2025-05-20T14:04:07.081Z","modified":"2025-05-20T21:47:28.936Z","1.0.0":"2025-05-20T14:04:07.476Z","1.0.1":"2025-05-20T19:36:53.726Z","1.1.0":"2025-05-20T21:32:29.924Z","1.1.1":"2025-05-20T21:47:28.662Z"},"homepage":"https://github.com/commercetools-demo/web-component-collection","description":"A collection of reusable web components built with TypeScript.","maintainers":[{"name":"lgiavedoni","email":"lgiavedoni@gmail.com"},{"name":"behnam777","email":"behnam777@gmail.com"}],"readme":"# Frontend Web Components\n\nA collection of reusable web components built with TypeScript.\n\n## Components\n\n### [StoresMap](./src/components/stores-map/README.md)\nA store locator component with Google Maps integration that allows users to find and select stores from a list or map view.\n\n### [ProductPrices](./src/components/product-prices/README.md)\nA component that displays a list of available prices for a product SKU, showing channel-specific pricing from commercetools.\n\n### [StepVariantSelector](./src/components/step-variant-selector/README.md)\nA component that allows users to select a variant of a product by selecting values for a set of attributes.\n\n### [SplitShipping](./src/components/split-shipping/README.md)\nA component that allows users to split shipping between multiple addresses.\n\n\n## Use in React\nAdd the following script to your HTML file or use the script tag in your React component:\n\n```html\n/components.js\"\n type=\"module\"\n>\n```\nCreate a new component to wrap the component for example `StepVariantSelector.tsx`:\n\n```jsx\nimport React, { useRef, useEffect } from 'react';\n\ninterface Props {\n baseurl?: string;\n sku?: string;\n selectors?: string;\n locale?: string;\n onChangeSku?: (sku: string) => void; // optional callback to handle events\n}\n\nconst StepVariantSelector: React.FC = ({ onChangeSku, ...props }) => {\n const ref = useRef(null);\n\n const eventListener = (event: any) => { // event listener for custom events\n onChangeSku?.(event.detail.sku);\n };\n\n useEffect(() => {\n if (ref.current) {\n const element = document.createElement('step-variant-selector');\n element.addEventListener('sku-selected', eventListener); // add event listener for custom events\n\n Object.entries(props).forEach(([key, value]) => {\n if (typeof value === 'string') {\n element.setAttribute(key, value);\n }\n });\n\n ref.current.innerHTML = '';\n ref.current.appendChild(element);\n }\n }, []);\n\n return (\n \n );\n};\n\nexport default StepVariantSelector;\n```\n\n\n","readmeFilename":"README.md"}