@covet-pics/covet-pics-widget 0.170.3 → 0.170.5

package/dist/cjs/{covet-pics-direct-buy_6.cjs.entry.js → covet-pics-checkbox_9.cjs.entry.js}

@@ -3,60 +3,100 @@
  */
 'use strict';
 
-var index = require('./index-eIVTphqi.js');
-var utils = require('./utils-0FQ28Vfg.js');
-var a11y = require('./a11y-DFTngZna.js');
-var slider = require('./slider-Yd_vzJhP.js');
-var popup = require('./popup-D7H4OHzy.js');
+var index = require('./index-C5a8iHmi.js');
+var utils = require('./utils-DVZVIghB.js');
+var popup = require('./popup-BgupOeY7.js');
+var shopcart = require('./shopcart-CwdWTijN.js');
+var getters = require('./getters-geTaYis0.js');
+var storeUtils = require('./storeUtils-sFXfLcFp.js');
+var shopcartIdByProduct = require('./shopcartIdByProduct-C7kk78KT.js');
+var funcComponents = require('./funcComponents-CKK6ULzk.js');
 var index$1 = require('./index-BMdsVEom.js');
-var funcComponents = require('./funcComponents-CfVw6fo-.js');
-var popupFuncComponents = require('./popupFuncComponents-BMXR6oUT.js');
+var popupFuncComponents = require('./popupFuncComponents-Bt--NSom.js');
+var slider = require('./slider-Yd_vzJhP.js');
+var a11y = require('./a11y-DFTngZna.js');
 var navigation = require('./navigation-XeIeQQXp.js');
 
-const covetPicsDirectBuyCss = "@font-face{font-family:\"swiper-icons\";src:url(\"data:application/font-woff;charset=utf-8;base64, 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\") format(\"woff\");font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff;}:host{position:relative;display:block;margin-left:auto;margin-right:auto;z-index:1}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1;display:block}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function, initial);box-sizing:content-box}.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{transform:translate3d(0px, 0, 0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;display:block}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform, height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);backface-visibility:hidden}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px}.swiper-3d .swiper-slide,.swiper-3d .swiper-cube-shadow{transform-style:preserve-3d}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none;}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-css-mode.swiper-horizontal>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-css-mode.swiper-vertical>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-css-mode.swiper-free-mode>.swiper-wrapper{scroll-snap-type:none}.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}.swiper-css-mode.swiper-centered>.swiper-wrapper::before{content:\"\";flex-shrink:0;order:9999}.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top,.swiper-3d .swiper-slide-shadow-bottom{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:rgba(0, 0, 0, 0.15)}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color, var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}:host{z-index:1;--covet-direct-buy-btn-size:40px;--covet-direct-buy-padding-size:40px;--covet-direct-buy-dropdown-height:48px;--covet-direct-buy-font-color:#101010;--covet-direct-buy-bg-color:#fcfbfc;--covet-direct-buy-btn-color:var(--covet-internal-direct-buy-btn-color);--covet-direct-buy-btn-bg-color:var(--covet-internal-direct-buy-btn-bg-color);--covet-direct-buy-btn-active-color:var(--covet-internal-direct-buy-btn-active-color);--covet-direct-buy-btn-active-bg-color:var(--covet-internal-direct-buy-btn-active-bg-color)}:host{position:fixed;bottom:0;overflow:scroll;width:100%;max-height:100%;box-shadow:0 -8px 16px 0 rgba(0, 0, 0, 0.05);transition:max-height 0.35s ease-in-out;min-width:auto;background-color:#ffffff}.main{margin:0 var(--covet-direct-buy-padding-size);padding-bottom:150px;position:relative}.close{background:none;border:none;position:absolute;top:0;right:0;padding:0;margin:0;cursor:pointer;transform:rotate(270deg);outline:none !important}.close:hover svg .icon-arrow-path,.close:active svg .icon-arrow-path,.close:focus svg .icon-arrow-path{stroke:#000000}.close svg{width:var(--covet-direct-buy-btn-size);height:var(--covet-direct-buy-btn-size)}.close svg .icon-arrow-path{transition:all 0.25s ease}.title{font-size:14px;font-weight:400;line-height:var(--covet-direct-buy-btn-size);width:calc(100% - var(--covet-direct-buy-btn-size));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;box-sizing:border-box;margin:10px 0 0 0}.title a{text-decoration:none;color:var(--covet-direct-buy-font-color)}.price-wrap{display:flex;height:32px;background:var(--covet-direct-buy-bg-color);justify-content:space-between;align-items:center;text-transform:uppercase}.price-wrap label{color:var(--covet-direct-buy-font-color);font-weight:300;max-width:80px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.price-wrap .price{font-weight:600}.btn-buy{border:none;background-color:var(--covet-direct-buy-btn-bg-color);color:var(--covet-direct-buy-btn-color);font-family:inherit;display:flex;align-items:center;justify-content:center;width:100%;text-transform:uppercase;text-align:center;cursor:pointer;font-size:14px;line-height:1;padding:17px 17px max(17px, env(safe-area-inset-bottom, 25px)) 17px;margin-bottom:0}.btn-buy:hover,.btn-buy:active,.btn-buy:focus{background-color:var(--covet-direct-buy-btn-active-bg-color)}.btn-buy.style-1:hover,.btn-buy.style-1:active,.btn-buy.style-1:focus{background-color:var(--covet-direct-buy-btn-active-color)}.btn-buy.style-2:hover,.btn-buy.style-2:active,.btn-buy.style-2:focus{background-color:var(--covet-direct-buy-btn-bg-color);color:var(--covet-direct-buy-btn-active-color)}.btn-buy:disabled{background:#EEEEEE;color:#808080;pointer-events:none}.options{display:flex;justify-content:space-between;align-items:center;border:1px solid transparent;border-bottom-color:#EEE;height:var(--covet-direct-buy-dropdown-height);padding:0 8px 0 12px;-moz-text-align-last:right;text-align-last:right;font-weight:300;color:var(--covet-direct-buy-font-color);position:relative;cursor:pointer;outline:none !important;transition:border 0.25s ease}.options.opened{border-left:1px solid #EEE;border-right:1px solid #EEE}.options.opened .options-container{display:block}.options:hover,.options:active,.options:focus,.options:focus-within{border-bottom-color:#000000}.options label{width:100%;height:100%;display:flex;justify-content:space-between;outline:none !important}.options label .option-name{margin:auto 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}.options label .selected-option{margin:auto 0;border:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'%3E%3C/path%3E%3Cpath stroke='%23A0A0A0' d='M16.95 10.25L12 15.2l-4.95-4.95'%3E%3C/path%3E%3C/g%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right 50%;background-size:24px;padding-right:26px;text-transform:uppercase;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:50%;font-family:inherit;cursor:pointer;font-weight:bold}.options label .selected-option.empty{height:16px;line-height:1rem;width:20%}.options .options-container{display:none;position:absolute;top:var(--covet-direct-buy-dropdown-height);left:-1px;background:#FFF;z-index:2;width:100%;border:1px solid #eee;border-top:0;max-height:114px;overflow:auto;cursor:pointer}.options .options-container .option-value{min-height:32px;font-size:12px;color:#101010;display:flex;align-items:center;outline:none !important}.options .options-container .option-value.selected .selected-indic{height:24px;border-left:2px solid #101010}.options .options-container .option-value .value-text{margin-left:4px;margin-right:4px;padding:0 10px;display:flex;align-items:center;width:100%;font-size:12px;min-height:32px}.options .options-container .option-value:hover .value-text,.options .options-container .option-value:active .value-text,.options .options-container .option-value:focus .value-text{background:#F7F7F7}.main-gallery{overflow:hidden;width:100%}.main-gallery .swiper-slide{width:200px;height:200px;align-items:center;display:flex;justify-content:center}.main-gallery .swiper-slide img{max-width:100%;max-height:100%}.main-gallery .swiper-wrapper{max-height:200px}.footer{background-color:var(--covet-direct-buy-bg-color);position:absolute;width:100%;bottom:0;z-index:1}.footer .price-wrap{padding:0 var(--covet-direct-buy-padding-size);width:calc(100% - var(--covet-direct-buy-padding-size) * 2)}.swiper-pagination-bullets{padding:10px 0;border-bottom:1px solid var(--covet-direct-buy-font-color);display:flex;justify-content:center}.swiper-pagination-bullet{width:8px;height:8px;display:inline-block;flex:none;border-radius:100%;background:var(--covet-direct-buy-font-color);opacity:0.2;margin:0 4px;padding:0;transition:all 0.3}.swiper-pagination-bullet:hover,.swiper-pagination-bullet:active,.swiper-pagination-bullet:focus{opacity:0.4;cursor:pointer}.swiper-pagination-bullet.swiper-pagination-bullet-active{opacity:1;background:var(--covet-direct-buy-font-color)}@media only screen and (min-width: 800px){:host{display:block;height:100%;z-index:1;position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden}.title{width:100%;padding-left:10px}.close{left:calc(var(--covet-direct-buy-btn-size) / -2);right:unset;transform:unset}.wrap{height:100%;overflow:auto}.footer{position:absolute}}";
+const covetPicsCheckboxCss = ":host{display:block;border:1px solid #000000;padding:8px;font-weight:700;background-color:#FFFFFF;color:#000000;margin-top:4px;cursor:pointer;transition:color 0.25s ease, background-color 0.25s ease;box-sizing:border-box;overflow:hidden;max-width:calc(100% - 8px);min-width:0}:host .input{position:absolute;width:0;height:0;top:0;left:0;opacity:0}:host .label{display:block;font-size:16px;cursor:pointer;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([aria-checked=true]){color:#FFFFFF;background-color:#000000}";
 
-const CovetPicsDirectBuy = class {
+const CovetPicsCheckbox = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.checkboxChange = index.createEvent(this, "checkboxChange", 7);
         /**
-         *  money format template
-         */
-        this.moneyFormat = "{{amount}}";
+          attr checked
+        */
+        this.checked = false;
         /**
-         *  User selected options
-         */
-        this.selectedOptions = { option1: null, option2: null, option3: null };
-        this.hostClickHandler = () => {
-            this.el.shadowRoot.querySelectorAll(".options.opened").forEach(option => option.classList.remove("opened"));
-        };
-        this.optionLabelClickHandler = (event) => {
-            if (event.type === "keydown" && event.keyCode !== 13 && event.keyCode !== 32)
-                return false;
-            const clickedOption = event.target.closest(".options");
-            if (clickedOption.classList.contains("opened")) {
+          attr disabled
+        */
+        this.disabled = false;
+        /**
+          attr inputId
+        */
+        this.inputId = null;
+        this.onClickHandler = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            if (this.checked)
                 return;
-            }
-            setTimeout(() => { clickedOption.classList.add("opened"); }, 50);
+            this.checked = true;
+            this.checkboxChange.emit(this.checked);
         };
-        this.selectVariantHandler = (event) => {
-            if (event.type === "keydown" && event.keyCode !== 13 && event.keyCode !== 32)
-                return false;
-            const option = event.target.closest(".options");
-            const selectedOptionValue = event.target.closest(".option-value");
-            this.updateSelectedOptions(option.id, selectedOptionValue.dataset.value);
-            option.querySelector("label .selected-option").innerHTML = selectedOptionValue.dataset.value;
-            // graphically select the option
-            option.querySelectorAll(".option-value.selected").forEach(value => value.classList.remove("selected"));
-            selectedOptionValue.classList.add("selected");
-            if (event.type === "keydown" && (event.keyCode === 13 || event.keyCode === 32))
-                this.hostClickHandler();
-            this.selectFeaturedImage();
+        this.onChange = (event) => {
+            if (this.disabled)
+                return;
+            const target = event.target;
+            this.checked = target.checked;
+            this.checkboxChange.emit(this.checked);
         };
+    }
+    render() {
+        return (index.h(index.Host, { key: '98c375e11a839049c02e3affe7ab7ec3b564e615', role: "checkbox", "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', disabled: this.disabled, onClick: this.onClickHandler }, index.h("input", { key: 'c43cb52b90423649b6a49e64ee68ae1039f1d4c1', id: this.inputId, class: "input", type: "checkbox", checked: this.checked, disabled: this.disabled, "aria-checked": this.checked ? 'true' : 'false', onChange: this.onChange, value: this.value }), index.h("label", { key: '951b2eb9e8351d6835832e8218d1b29025ffa80e', class: "label", htmlFor: this.inputId, innerHTML: this.label })));
+    }
+    get el() { return index.getElement(this); }
+};
+CovetPicsCheckbox.style = covetPicsCheckboxCss;
+
+const covetPicsDirectBuyCss = "@font-face{font-family:\"swiper-icons\";src:url(\"data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA\") format(\"woff\");font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff;}:host{position:relative;display:block;margin-left:auto;margin-right:auto;z-index:1}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1;display:block}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function, initial);box-sizing:content-box}.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{transform:translate3d(0px, 0, 0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;display:block}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform, height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);backface-visibility:hidden}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px}.swiper-3d .swiper-slide,.swiper-3d .swiper-cube-shadow{transform-style:preserve-3d}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none;}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-css-mode.swiper-horizontal>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-css-mode.swiper-vertical>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-css-mode.swiper-free-mode>.swiper-wrapper{scroll-snap-type:none}.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}.swiper-css-mode.swiper-centered>.swiper-wrapper::before{content:\"\";flex-shrink:0;order:9999}.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top,.swiper-3d .swiper-slide-shadow-bottom{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:rgba(0, 0, 0, 0.15)}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color, var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}covet-pics-direct-buy{z-index:1;--covet-direct-buy-btn-size:40px;--covet-direct-buy-padding-size:40px;--covet-direct-buy-dropdown-height:48px;--covet-direct-buy-font-color:#101010;--covet-direct-buy-bg-color:#fcfbfc;--covet-direct-buy-btn-color:var(--covet-internal-direct-buy-btn-color);--covet-direct-buy-btn-bg-color:var(--covet-internal-direct-buy-btn-bg-color);--covet-direct-buy-btn-active-color:var(--covet-internal-direct-buy-btn-active-color);--covet-direct-buy-btn-active-bg-color:var(--covet-internal-direct-buy-btn-active-bg-color);--covet-direct-buy-close-color:#A0A0A0;bottom:0;top:0;width:100%;box-shadow:0 -8px 16px 0 rgba(0, 0, 0, 0.05);transition:max-height 0.35s ease-in-out;min-width:auto;background-color:#ffffff;position:absolute;flex:1 1 auto;min-height:0;display:flex;box-sizing:border-box;overflow:hidden;z-index:1}@media only screen and (max-width: 799.98px){covet-pics-direct-buy{z-index:0;position:fixed;left:0;right:0}}covet-pics-direct-buy .wrap{position:absolute;left:0;top:0;right:0;bottom:0;padding-bottom:80px;overflow:hidden;box-sizing:border-box}covet-pics-direct-buy .main{overflow-y:auto;min-height:0;height:100%;padding-left:var(--covet-direct-buy-padding-size);padding-right:var(--covet-direct-buy-padding-size)}covet-pics-direct-buy .close{background:none;border:none;position:absolute;top:0;left:0;right:auto;transform:auto;padding:0;margin:0;cursor:pointer;outline:none !important;z-index:1}@media only screen and (max-width: 799.98px){covet-pics-direct-buy .close{transform:rotate(270deg);right:0;left:auto;top:50px}}covet-pics-direct-buy .close:hover svg .icon-arrow-path,covet-pics-direct-buy .close:active svg .icon-arrow-path,covet-pics-direct-buy .close:focus svg .icon-arrow-path{stroke:#000000}covet-pics-direct-buy .close .icon-close{width:var(--covet-direct-buy-btn-size);height:var(--covet-direct-buy-btn-size)}covet-pics-direct-buy .close .icon-close .icon-arrow-path{transition:all 0.25s ease}covet-pics-direct-buy .title{font-size:14px;font-weight:400;line-height:var(--covet-direct-buy-btn-size);width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;box-sizing:border-box;margin:10px 0 0 0;padding-left:10px}@media only screen and (max-width: 799.98px){covet-pics-direct-buy .title{width:calc(100% - var(--covet-direct-buy-btn-size));padding-left:0;z-index:0}}covet-pics-direct-buy .link-title{text-decoration:none;color:var(--covet-direct-buy-font-color)}covet-pics-direct-buy .product-slider{display:block;overflow:hidden;padding:var(--covet-internal-direct-buy-slide-margin);margin-bottom:var(--covet-internal-direct-buy-slide-margin);border-bottom:1px solid var(--covet-direct-buy-font-color)}covet-pics-direct-buy .product-slider-wrap{display:flex;position:relative;left:0;transition:transform var(--covet-internal-direct-buy-slider-speed) ease;gap:var(--covet-internal-direct-buy-slide-margin)}covet-pics-direct-buy .gallery-slide{box-sizing:border-box;width:var(--covet-internal-direct-buy-slide-width);height:var(--covet-internal-direct-buy-slide-width);flex:none;overflow:hidden;cursor:pointer}covet-pics-direct-buy .image{-o-object-fit:cover;object-fit:cover;width:100%}covet-pics-direct-buy .product-preview{display:block;width:200px;height:200px;position:relative;margin-left:auto;margin-right:auto;overflow:hidden;margin-bottom:20px}@media only screen and (max-width: 799.98px){covet-pics-direct-buy .product-preview{width:150px;height:150px}}covet-pics-direct-buy .preview-slide{width:100%;height:100%;position:absolute;opacity:0;transform-origin:center center;transform:scale(0.95);transition:all 0.25s ease}covet-pics-direct-buy .preview-slide.active{opacity:1;transform:scale(1)}covet-pics-direct-buy .checkbox-group{display:flex;flex-wrap:wrap;padding:0;border:none;margin-bottom:10px;overflow:hidden;max-width:100%;max-width:100%;min-width:0;min-inline-size:0;box-sizing:border-box;gap:8px}covet-pics-direct-buy .footer{background-color:var(--covet-direct-buy-bg-color);position:absolute;width:100%;bottom:0;left:0;right:0;z-index:1}covet-pics-direct-buy .price-wrap{display:flex;height:32px;background:var(--covet-direct-buy-bg-color);justify-content:space-between;align-items:center;text-transform:uppercase;padding:0 var(--covet-direct-buy-padding-size);width:calc(100% - var(--covet-direct-buy-padding-size) * 2)}covet-pics-direct-buy .price-label{color:var(--covet-direct-buy-font-color);font-weight:300;max-width:80px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}covet-pics-direct-buy .price-text{font-weight:600}covet-pics-direct-buy .btn-buy{border:none;background-color:var(--covet-direct-buy-btn-bg-color);color:var(--covet-direct-buy-btn-color);font-family:inherit;display:flex;align-items:center;justify-content:center;width:100%;text-transform:uppercase;text-align:center;cursor:pointer;font-size:14px;line-height:1;padding:17px 17px max(17px, env(safe-area-inset-bottom, 25px)) 17px;margin-bottom:0}covet-pics-direct-buy .btn-buy:hover,covet-pics-direct-buy .btn-buy:active,covet-pics-direct-buy .btn-buy:focus{background-color:var(--covet-direct-buy-btn-active-bg-color)}covet-pics-direct-buy .btn-buy.style-1:hover,covet-pics-direct-buy .btn-buy.style-1:active,covet-pics-direct-buy .btn-buy.style-1:focus{background-color:var(--covet-direct-buy-btn-active-color)}covet-pics-direct-buy .btn-buy.style-2:hover,covet-pics-direct-buy .btn-buy.style-2:active,covet-pics-direct-buy .btn-buy.style-2:focus{background-color:var(--covet-direct-buy-btn-bg-color);color:var(--covet-direct-buy-btn-active-color)}covet-pics-direct-buy .btn-buy:disabled{background:#eeeeee;color:#808080;pointer-events:none}covet-pics-direct-buy .btn-buy.btn-now{margin-top:10px}.popup-product-animation{top:0;left:0;width:var(--covet-pics-popup-product-clone-begin-width);height:var(--covet-pics-popup-product-clone-begin-height);transform:translate(var(--covet-pics-popup-product-clone-begin-x), var(--covet-pics-popup-product-clone-begin-y));display:flex;justify-content:center;align-items:center;z-index:10;position:fixed;background-color:#ffffff;overflow:hidden;will-change:transform;transform:translate(var(--covet-pics-popup-product-clone-begin-x), var(--covet-pics-popup-product-clone-begin-y))}.popup-product-animation img{max-width:100%;max-height:100%}.popup-product-animation.animate{animation:parabolic-move 1s ease forwards}@keyframes parabolic-move{0%{transform:translate(var(--covet-pics-popup-product-clone-begin-x), var(--covet-pics-popup-product-clone-begin-y))}10%{border-radius:50%}50%{opacity:0.9;width:var(--covet-pics-popup-product-clone-end-width);height:var(--covet-pics-popup-product-clone-end-height)}80%{opacity:0.9}90%{opacity:0.5}100%{opacity:0;transform:translate(var(--covet-pics-popup-product-clone-end-x), var(--covet-pics-popup-product-clone-end-y));width:var(--covet-pics-popup-product-clone-end-width);height:var(--covet-pics-popup-product-clone-end-height);border-radius:50%}}";
+
+const CovetPicsDirectBuy = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.sliderSpaceBetween = 10;
+        this.sliderSpeed = 0.3;
+        this.directBuySlideWidth = 50;
+        this.selectedVariant = null;
+        this.product = null;
+        this.options = [];
+        this.selectedOptions = [];
+        this.isAvailableForSale = true;
+        this.addToCartChain = utils.getChain(this, this.addToCart);
+        this.getDataChain = utils.getChain(this, this.getData);
         this.closeClickHandler = (event) => {
             event.preventDefault();
             event.stopPropagation();
             this.appStore.dispatch(popup.setPopupProductId(-1));
         };
+        this.onCheckboxChange = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            const el = event.target;
+            const { name, value } = el.dataset;
+            this.selectedOptions = [...this.selectedOptions.filter(opt => opt.name !== name), { name, value }];
+            this.checkIsAvailableForSale();
+            this.getDataChain();
+        };
+        this.onSelectChange = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            const el = event.target;
+            const name = el.dataset.name;
+            const value = event.detail;
+            this.selectedOptions = [...this.selectedOptions.filter(opt => opt.name !== name), { name, value }];
+            this.checkIsAvailableForSale();
+            this.getDataChain();
+        };
         this.addToCartClickHandler = (event) => {
             event.preventDefault();
             event.stopPropagation();
@@ -64,149 +104,226 @@ const CovetPicsDirectBuy = class {
                 alert("Adding to cart is disabled in preview mode"); // eslint-disable-line no-alert
                 return false;
             }
-            const cartData = {
-                items: [
-                    {
-                        quantity: 1,
-                        id: this.selectedVariant.id,
-                    }
-                ]
-            };
-            fetch("/cart/add", {
-                method: "POST",
-                credentials: "same-origin",
-                headers: {
-                    "Content-Type": "application/json",
-                    "Accept": "application/json"
-                },
-                body: JSON.stringify(cartData)
-            }).then(data => {
-                if (data.status >= 200 && data.status < 400) {
-                    // TODO add this logic need await response fetch
-                    this.appStore.dispatch(popup.setPopupProductId(-1));
-                    this.emitAddToCartEvent();
-                }
-            });
+            this.shopCartAnimation();
+        };
+        this.gallerySlideClickHandler = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            const slide = event.currentTarget;
+            const productPreviewImage = this.el.querySelector(".product-preview .preview-slide .image");
+            const clickedImageData = this.product.images.nodes.find(el => el.id === slide.dataset.id);
+            productPreviewImage.setAttribute("src", clickedImageData.url);
+            productPreviewImage.setAttribute("alt", clickedImageData.altText);
+            this.sliderAnimation(parseInt(slide.dataset.idx));
         };
     }
     componentWillLoad() {
         this.initStore();
-        this.setSingleSelectedValues();
-    }
-    componentDidLoad() {
-        this.initSwiper();
-        const closeBtn = this.el.shadowRoot.querySelector(".close");
-        closeBtn.focus();
-    }
-    componentDidUpdate() {
-        // TODO check do we need this update in componentDidUpdate
-        if (this.mainGallery) {
-            this.mainGallery.update();
-        }
-    }
-    disconnectedCallback() {
-        this.unsubscribe();
+        this.setupShopifySettings();
+        this.getData();
+        this.initCovetShopCart();
+        this.checkShopCart();
     }
     initStore() {
         this.appState = this.appStore.getState();
         this.settings = this.appState.settings;
+        this.shopCartState = this.appState.shopcart;
+        if (this.shopCartState.error !== null) {
+            this.isAvailableForSale = false;
+        }
         this.unsubscribe = this.appStore.subscribe(() => {
             this.appState = this.appStore.getState();
             this.settings = this.appState.settings;
+            this.shopCartState = this.appState.shopcart;
+            if (this.shopCartState.error !== null) {
+                this.isAvailableForSale = false;
+            }
         });
     }
-    setSingleSelectedValues() {
-        if (this.product.options && this.product.options.length > 0) {
-            this.product.options.forEach((option, index) => this.updateSelectedOptions(`option${index + 1}`, option.values[0]));
+    disconnectedCallback() {
+        this.unsubscribe();
+        this.appStore.dispatch(shopcart.setId(null));
+        this.shopCart.remove();
+    }
+    async getData() {
+        var _a;
+        const variables = {
+            handle: this.covetProduct.handle,
+            country: this.shopCartState.locale.country.toUpperCase(),
+            language: this.shopCartState.locale.language.toUpperCase(),
+            selectedOptions: this.selectedOptions
+        };
+        const [err, result] = await shopcart.shopifyGraphqlFetch(this.shopCartState.config.apiUrl, shopcart.queryProductForVariantSelector, variables);
+        if (err) {
+            return this.appStore.dispatch(shopcart.showNotification({ message: err.message, type: "error" }));
         }
-    }
-    get productId() {
-        if (typeof this.product !== "undefined") {
-            return this.product.id.toString();
+        this.product = shopcart.normalizeProduct((_a = result === null || result === void 0 ? void 0 : result.data) === null || _a === void 0 ? void 0 : _a.product);
+        if (!this.product)
+            return (this.appStore.dispatch(shopcart.showNotification({ message: `Product not found, ${this.covetProduct.handle}`, type: "error" })));
+        this.selectedVariant = this.product.selectedOrFirstAvailableVariant;
+        this.options = shopcart.getOptions(this.product);
+        if (this.selectedOptions.length === 0 && this.selectedVariant && this.selectedVariant.selectedOptions.length > 0) {
+            this.selectedOptions = [...this.selectedVariant.selectedOptions];
         }
     }
-    get selectedVariant() {
-        return this.product.variants.find(variant => {
-            return Object.keys(this.selectedOptions).every(key => this.selectedOptions[key] === variant[key]);
-        });
+    initCovetShopCart() {
+        this.shopCart = document.createElement("covet-pics-shop-cart");
+        this.shopCart.appStore = this.appStore;
+        document.body.appendChild(this.shopCart);
+    }
+    setupShopifySettings() {
+        const shopify = window.Shopify;
+        if (typeof shopify !== "undefined") {
+            this.appStore.dispatch(shopcart.setLocale({
+                country: shopify.country,
+                language: shopify.locale
+            }));
+            this.appStore.dispatch(shopcart.setStoreDomain(utils.getShopUrlFromProductLink(shopify.shop)));
+        }
+        else {
+            const shopUrl = utils.getShopUrlFromProductLink(this.covetProduct.link);
+            this.appStore.dispatch(shopcart.setStoreDomain(shopUrl));
+        }
     }
-    get price() {
-        if (typeof this.selectedVariant !== "undefined") {
-            return utils.formatMoney(this.selectedVariant.price, this.moneyFormat, false);
+    async checkShopCart() {
+        let shopCartId = this.appState.shopcartIdByProduct[this.covetProduct.id];
+        if (shopCartId === undefined) {
+            await this.appStore.dispatch(shopcart.getCartId());
+            shopCartId = this.appState.shopcart.id;
+            if (!shopCartId)
+                return;
+            this.appStore.dispatch(shopcartIdByProduct.setCartIdByProduct({ productId: this.covetProduct.id, shopcartId: shopCartId }));
         }
         else {
-            return utils.formatMoney(this.product.price, this.moneyFormat, false);
+            this.appStore.dispatch(shopcart.setId(shopCartId));
+        }
+        await this.appStore.dispatch(shopcart.loadCart());
+        return this.appStore.dispatch(shopcart.updateBuyerIdentity());
+    }
+    checkIsAvailableForSale() {
+        if (this.shopCartState.error !== null)
+            return;
+        const isArrayFiltersEqual = (a, b) => a.length === b.length && a.map(o => o.name + "\0" + o.value).sort().join() === b.map(o => o.name + "\0" + o.value).sort().join();
+        const selectedVariant = this.product.variants.find(el => isArrayFiltersEqual(el.selectedOptions, this.selectedOptions));
+        this.isAvailableForSale = selectedVariant !== undefined && selectedVariant.availableForSale;
+    }
+    shopCartAnimation() {
+        const popup = this.el.closest(".popup");
+        const popupDialog = this.el.closest(".popup-dialog");
+        // covet-pics-direct-buy is rendered inside .popup and .popup-dialog
+        const previewSlideActive = this.el.querySelector(".preview-slide.active");
+        if (previewSlideActive === null) {
+            return this.addToCartChain();
+        }
+        const previewSlideImg = previewSlideActive.querySelector(".image");
+        const previewSlideCloneImg = previewSlideImg.cloneNode(true);
+        const main = this.el.querySelector(".main");
+        const btnCheckout = this.appState.size.isDesktopScreen
+            ? popupDialog.querySelector(".btn-checkout.desktop")
+            : popup.querySelector(".btn-checkout:not(.desktop)");
+        btnCheckout === null || btnCheckout === void 0 ? void 0 : btnCheckout.classList.add("show");
+        this.addToCartChain();
+        const startPosition = previewSlideActive.getBoundingClientRect();
+        const mainPosition = main.getBoundingClientRect(); // fallback in case 'btn-checkout' change layout structure
+        const endPosition = btnCheckout !== null
+            ? btnCheckout.getBoundingClientRect()
+            : { width: 20, height: 20, left: mainPosition.right - 20, top: mainPosition.top };
+        const animationClone = document.createElement("div");
+        animationClone.className = previewSlideActive.className;
+        animationClone.classList.add("popup-product-animation");
+        animationClone.appendChild(previewSlideCloneImg);
+        animationClone.style.setProperty("--covet-pics-popup-product-clone-begin-x", `${startPosition.left}px`);
+        animationClone.style.setProperty("--covet-pics-popup-product-clone-begin-y", `${startPosition.top}px`);
+        animationClone.style.setProperty("--covet-pics-popup-product-clone-begin-width", `${startPosition.width}px`);
+        animationClone.style.setProperty("--covet-pics-popup-product-clone-begin-height", `${startPosition.height}px`);
+        animationClone.style.setProperty("--covet-pics-popup-product-clone-end-x", `${endPosition.left}px`);
+        animationClone.style.setProperty("--covet-pics-popup-product-clone-end-y", `${endPosition.top}px`);
+        animationClone.style.setProperty("--covet-pics-popup-product-clone-end-width", `${endPosition.width}px`);
+        animationClone.style.setProperty("--covet-pics-popup-product-clone-end-height", `${endPosition.height}px`);
+        popupDialog.after(animationClone);
+        const animateHandler = () => {
+            animationClone.removeEventListener("animationend", animateHandler);
+            animationClone.remove();
+        };
+        animationClone.addEventListener("animationend", animateHandler);
+        animationClone.classList.add("animate");
+    }
+    sliderAnimation(idx) {
+        const slider = this.el.querySelector(".product-slider");
+        const sliderWrap = this.el.querySelector(".product-slider-wrap");
+        const slides = Array.from(sliderWrap.querySelectorAll(".gallery-slide"));
+        slides.forEach(slide => slide.classList.remove("active"));
+        slides[idx].classList.add("active");
+        let deltaX = (idx - 1) * this.directBuySlideWidth + ((idx - 1) * this.sliderSpaceBetween);
+        const sliderWidth = slider.getBoundingClientRect().width;
+        const sliderWrapWidth = sliderWrap.scrollWidth;
+        if (deltaX > sliderWrapWidth - sliderWidth) {
+            deltaX = sliderWrapWidth - sliderWidth + this.sliderSpaceBetween;
+        }
+        if (deltaX < 0) {
+            deltaX = 0;
+        }
+        sliderWrap.style.transform = `translateX(-${deltaX}px)`;
+    }
+    async addToCart() {
+        const shopcartTotalQuantity = this.appState.shopcart.totalQuantity;
+        const result = await this.appStore.dispatch(shopcart.addToCart(this.selectedVariant.id));
+        if (result.type === "shopcart/addToCart/fulfilled") {
+            // Use the API result to prevent race conditions caused by multiple clicks.
+            if (result.payload.totalQuantity === shopcartTotalQuantity) {
+                this.appStore.dispatch(shopcart.showNotification({ message: "this product is out of stock", type: "info" }));
+                this.isAvailableForSale = false;
+            }
+            if (getters.getUseAnalytics(this.appState)) {
+                const category = "Covet.pics Popup";
+                const action = "Covet.pics Add-to-Cart Click";
+                const label = "Covet.pics Add-to-Cart Click - " + this.product.id;
+                utils.sendToGoogleAnalytics(action, category, label);
+            }
+            const beaconData = {
+                gallery_item_id: this.itemId,
+                product_id: this.product.id,
+            };
+            storeUtils.sendBeacon(this.appState, "direct_buy", beaconData);
         }
     }
+    renderProductSlider() {
+        if (this.product.images.nodes.length < 2)
+            return null;
+        return (index.h("div", { class: "product-slider" }, index.h("div", { class: "product-slider-wrap" }, this.product.images.nodes.map((image, idx) => (index.h("div", { class: "gallery-slide", onClick: this.gallerySlideClickHandler, "data-id": image.id, "data-idx": idx }, index.h("img", { src: image.url, alt: image.altText, class: "image" })))))));
+    }
+    renderCheckbox(option) {
+        return (index.h("fieldset", { class: "checkbox-group" }, index.h("legend", null, option.name), option.optionValues.map((value) => (index.h("covet-pics-checkbox", { inputId: `option-${value.name}-${option.name}`, label: value.name, "data-name": option.name, "data-value": value.name, checked: this.selectedOptions.some((el) => el.name === option.name && el.value === value.name), disabled: value.disabled, value: value.name, onCheckboxChange: this.onCheckboxChange })))));
+    }
+    renderSelect(option) {
+        const selectedOption = this.selectedOptions.find((item) => item.name === option.name);
+        if (!selectedOption)
+            return null;
+        return (index.h("covet-pics-select", { onSelectChange: this.onSelectChange, "data-name": option.name, selectId: `select-${option.name}`, optionData: option, "selected-value": selectedOption.value, label: selectedOption.value }));
+    }
     get itemCSSVariables() {
         return {
             "--covet-internal-direct-buy-btn-color": this.settings.popup_buy_button_text_color,
             "--covet-internal-direct-buy-btn-bg-color": this.settings.popup_buy_button_background_color,
             "--covet-internal-direct-buy-btn-active-color": this.settings.popup_buy_button_text_hover_color,
-            "--covet-internal-direct-buy-btn-active-bg-color": this.settings.popup_buy_button_background_hover_color
+            "--covet-internal-direct-buy-btn-active-bg-color": this.settings.popup_buy_button_background_hover_color,
+            "--covet-internal-direct-buy-slide-margin": `${this.sliderSpaceBetween}px`,
+            "--covet-internal-direct-buy-slider-speed": `${this.sliderSpeed}s`,
+            "--covet-internal-direct-buy-slide-width": `${this.directBuySlideWidth}px`,
         };
     }
-    initSwiper() {
-        // TODO add exception for slides length == 1
-        const galleryMainEl = this.el.shadowRoot.querySelector(".main-gallery");
-        const paginationEl = this.el.shadowRoot.querySelector(".swiper-pagination");
-        return this.mainGallery = new a11y.Swiper(galleryMainEl, {
-            modules: [a11y.Pagination, a11y.A11y],
-            on: {
-                init: (e) => slider.swiperUpdateTabIndex(e),
-                update: (e) => slider.swiperUpdateTabIndex(e),
-                realIndexChange: (e) => slider.swiperUpdateTabIndex(e)
-            },
-            pagination: {
-                el: paginationEl,
-                modifierClass: "swiper-pagination-",
-                clickable: true,
-            },
-            a11y: {
-                enabled: true,
-                containerMessage: "Product images slider",
-                containerRoleDescriptionMessage: "Product images slider inside popup",
-                paginationBulletMessage: "Go to product image #{{index}}",
-                slideRole: "group",
-                slideLabelMessage: "Product image {{index}}/{{slidesLength}}"
-            },
-        });
-    }
-    renderOptions(optionData, optionNumber) {
-        if (optionData && optionData.values.length > 1) {
-            return (
-            // TODO switch to native html select
-            index.h("div", { class: "options", id: `option${optionNumber}` }, index.h("label", { onClick: this.optionLabelClickHandler, onKeyDown: this.optionLabelClickHandler, tabindex: "0" }, index.h("span", { class: "option-name", title: optionData["name"] }, optionData["name"]), index.h("span", { class: { "selected-option": true, "empty": this.settings.select_label_caption === "" } }, this.settings.select_label_caption)), index.h("div", { class: "options-container" }, optionData.values.map((option) => index.h("div", { class: "option-value", "data-value": option, onClick: this.selectVariantHandler, onKeyDown: this.selectVariantHandler, tabindex: "0" }, index.h("div", { class: "selected-indic" }), index.h("div", { class: "value-text", innerHTML: option, title: option }))))));
-        }
-    }
-    updateSelectedOptions(key, value) {
-        const updated = {};
-        updated[key] = value;
-        this.selectedOptions = Object.assign(Object.assign({}, this.selectedOptions), updated);
-    }
-    emitAddToCartEvent() {
-        const customEvent = utils.buildEvent("addToCart:covetPics", {
-            productId: this.productId,
-            variantId: this.selectedVariant.id,
-        });
-        document.dispatchEvent(customEvent);
-    }
-    selectFeaturedImage() {
-        if (this.selectedVariant && this.selectedVariant.featured_image) {
-            this.mainGallery.slides.forEach((slide, index) => {
-                if (slide.querySelector("img").src === this.selectedVariant.featured_image.src) {
-                    this.mainGallery.slideTo(index);
-                }
-            });
-        }
-    }
-    imgAltTag(caption, idx, itemsLength) {
-        return caption && caption.length > 0
-            ? `${caption} product slide ${idx} of ${itemsLength}`
-            : `product slide ${idx} of ${itemsLength}`;
-    }
     render() {
-        return (index.h(index.Host, { key: '6b33e0dec718aa1dbb3c6010fc22a3fb087652f7', style: this.itemCSSVariables, onclick: this.hostClickHandler }, index.h("div", { key: '412712c58c8c77f6c682dae61172ba0772494539', class: "wrap" }, index.h("div", { key: '1998deebd1753f4f419438e863085ed0b235b092', class: "main" }, index.h("button", { key: 'c9943dc6fd7d696ccbcf6f4d4ae2bbec314374b1', class: "close", onClick: this.closeClickHandler, tabindex: "0", "aria-label": "Direct buy close", type: "button" }, index.h("svg", { key: '90175fe5a08caa2b132bf981d41eeaf93ce5585c', viewBox: "0 0 40 40", role: "img" }, index.h("title", { key: '1e305ade3ae5fc1775c20ed91c3fb3cab4dff8cf' }, "close"), index.h("g", { key: '5a92c18f3939d672863d245496bdf3ebef3e3528', fill: "none", "fill-rule": "evenodd" }, index.h("path", { key: 'a1b312838c2aa0060ff6a85cc1b7aad2d87aafb6', d: "M40 0v40H0V0z" }), index.h("path", { key: 'df9635fbe02f7bd3cf38f6307cd0d1e40bbab5a4', class: "icon-arrow-path", stroke: "#A0A0A0", d: "M22.917 28.25L14.667 20l8.25-8.25" })))), index.h("h2", { key: 'd81b0ab2a866b662989594b2596044f16163748f', class: "title" }, index.h("a", { key: 'd14bfe794a15bc7ca5b3be1952715bc37070c3e8', href: this.product.link, target: "_blank", "aria-label": `Link to '${this.product.title}'` }, this.product.title)), index.h("section", { key: '5a775761231b5eb4cf5d21adac096bd76b1ae730', class: "main-gallery", role: "region", "aria-label": "direct buy slider" }, index.h("div", { key: 'fd0848f8046b3814c8c6fe7f30d1a9da97b64e45', class: "swiper-wrapper" }, this.product.media && this.product.media.map(image => index.h("div", { class: "swiper-slide" }, index.h("img", { alt: this.imgAltTag(image.alt, image.position, this.product.media.length), src: image.src })))), index.h("div", { key: '9ab214004c24581206b0f5ada8fcfec1afd36f1c', class: "swiper-pagination" })), this.renderOptions(this.product.options[0], 1), this.renderOptions(this.product.options[1], 2), this.renderOptions(this.product.options[2], 3)), index.h("div", { key: '75cafcaa0dc6b84c9fb845600a36b789b93a0475', class: "footer" }, index.h("div", { key: 'bb8f6eaa1b876865f975155ce02d1cf66d19f452', class: "price-wrap" }, index.h("label", { key: '3e92159f71ca1c4eabe5bb67af14fad0b1417f7b' }, this.settings.price_label_caption), index.h("span", { key: 'ef763c15b4461631578d93fa134e0355336e6cdd', class: "price", innerHTML: this.price })), index.h("button", { key: 'ead2e3eb0b7db019649af0856b218254e4bac984', class: `btn-buy ${this.settings._buyButtonStyle}`, disabled: typeof this.selectedVariant === "undefined" || this.selectedVariant["available"] === false, onClick: this.addToCartClickHandler, innerHTML: this.settings.add_to_cart_button_caption, "aria-label": "Add to cart", type: "button" })))));
+        var _a, _b, _c;
+        return (index.h(index.Host, { key: 'cf9bed7e1c4def4d9411455c711cbf7456483c00', style: this.itemCSSVariables }, index.h("button", { key: '2e06833672ea416d87143eed25cfa4aecd1d3759', class: "close", onClick: this.closeClickHandler, tabindex: "0", "aria-label": "Direct buy close", type: "button" }, index.h(funcComponents.IconDirectBuyClose, { key: '43036f4c34a5ff8c7eed98de79b92545fab277ca', iconClass: "icon-close" })), index.h("div", { key: '57bb96530dd1ff518de1b20862c7e77d47e0ec13', class: "wrap" }, this.product && (index.h("div", { key: '950451ac4844107eb2d3d8126b30f77b00953a9b', class: "main" }, index.h("h2", { key: 'c67e69ffb58d096f0c0de91d6c8d7faedc2834c8', class: "title" }, index.h("a", { key: 'ed1167ea11ff78c6b49f6b350a3d1de6343303dc', class: "link-title", href: this.product.onlineStoreUrl, target: "_blank", "aria-label": `Link to '${this.product.title}'` }, this.product.title)), index.h("div", { key: 'cb347eb85306e576a95e1d864447dcb1281f99b2', class: "product-preview" }, index.h("div", { key: 'eaaadc97e96682c7d865a3996602ce49a45699e5', class: "preview-slide active" }, ((_a = this.selectedVariant) === null || _a === void 0 ? void 0 : _a.image)
+            ? index.h("img", { src: this.selectedVariant.image.url, alt: this.selectedVariant.image.altText, class: "image" })
+            : index.h("img", { src: (_b = this.product.images.nodes[0]) === null || _b === void 0 ? void 0 : _b.url, alt: (_c = this.product.images.nodes[0]) === null || _c === void 0 ? void 0 : _c.altText, class: "image" }))), this.renderProductSlider(), this.selectedVariant &&
+            index.h("div", { key: '705417c6d75ae0d7d3f4ae1bed71c960042f672c', class: "options" }, this.options.map((option) => {
+                if (option.optionValues.length < 2)
+                    return null;
+                return option.optionValues.length < 4 ? this.renderCheckbox(option) : this.renderSelect(option);
+            })))), this.product &&
+            index.h("div", { key: '85b1fd60a0670a598cf096fb5e6ba8431b88c800', class: "footer" }, this.selectedVariant &&
+                index.h("div", { key: '7783df659974c913d2ec4be5869c54a92f8ea7f0', class: "price-wrap" }, index.h("label", { key: 'b861550faa7adab0bbc65344493107bc6018e567', class: "price-label" }, this.settings.price_label_caption), index.h("p", { key: '2db07b4b93e4c89369951e59e4d423783aae4a87', class: "price-text" }, utils.formatMoneyNew(this.selectedVariant.price, `${this.shopCartState.locale.language}-${this.shopCartState.locale.country}`))), index.h("button", { key: 'c13a2ef19adef7c3b9655ceb6015ff4414b53695', onClick: this.addToCartClickHandler, class: `btn-buy btn-add-to-cart ${this.settings._buyButtonStyle}`, "aria-label": "Add to cart", innerHTML: this.selectedVariant ? this.settings.add_to_cart_button_caption : "out of stock", disabled: !this.isAvailableForSale || !this.selectedVariant, type: "button" })))));
     }
     get el() { return index.getElement(this); }
 };
@@ -3570,7 +3687,7 @@ const CovetPicsHotspots = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: '2f7190d2d2e634d1865a813e9571745921f92714', class: { "show-hotspot-numbers": this.showNumbers }, style: this.getItemCSSVariables() }, this.links.map(link => index.h("a", { class: "hotspot", tabindex: "0", href: link.link, target: "_top", style: this.getPositionForLink(link), "data-link-id": link.id, "data-tippy-content": `<span class="product-title">${link.title}</span><span class="price">${link.prices ? link.prices.price_label : ""} &gt;</span>`, "aria-label": `Hotspot link to '${link.title}'` }, index.h("span", { class: "pulse" })))));
+        return (index.h(index.Host, { key: 'd148e6374868f82300a42619a07cdc2dc1e33e3e', class: { "show-hotspot-numbers": this.showNumbers }, style: this.getItemCSSVariables() }, this.links.map(link => index.h("a", { class: "hotspot", tabindex: "0", href: link.link, target: "_top", style: this.getPositionForLink(link), "data-link-id": link.id, "data-tippy-content": `<span class="product-title">${link.title}</span><span class="price">${link.prices ? link.prices.price_label : ""} &gt;</span>`, "aria-label": `Hotspot link to '${link.title}'` }, index.h("span", { class: "pulse" })))));
     }
     get el() { return index.getElement(this); }
 };
@@ -3666,7 +3783,7 @@ const CovetPicsPopupLinks = class {
         // TODO: check buttonStyle this old todo (style-3 -> not implanted yet)
         const buttonStyle = this.settings.popup_buy_button_style.replace("buy_btn_", "").replace("_", "-");
         const linkStyle = this.settings.popup_products_view_type.replace("_view", "");
-        return (index.h("ul", { key: '0c91e920355fb01e50ba7d62f97fc614cd1bc873', class: `links ${linkStyle} ${this.greyBorderClass} links-${this.links.length.toString()}`, style: this.getItemCSSVariables(), role: "list" }, this.links.map((link, idx) => index.h("li", { class: "product", "data-link-id": link.id, onMouseEnter: this.mouseEnterHandler, onMouseLeave: this.mouseLeaveHandler, role: "listitem" }, index.h("a", { class: "product-link", target: link.new_tab ? "_blank" : "_top", "data-ga-campaign": link.title, href: link.link, "aria-label": this.getProductLinkLabel(link), role: "link" }, index.h("div", { class: "img-wrap" }, this.renderLinkImage(link, idx, this.links.length)), index.h("div", { class: "product-details" }, index.h("span", { class: "product-title" }, link.title), this.settings.show_price_in_popup && link.prices &&
+        return (index.h("ul", { key: '8ec3b481345f340bddf72996b9508d7235db6226', class: `links ${linkStyle} ${this.greyBorderClass} links-${this.links.length.toString()}`, style: this.getItemCSSVariables(), role: "list" }, this.links.map((link, idx) => index.h("li", { class: "product", "data-link-id": link.id, onMouseEnter: this.mouseEnterHandler, onMouseLeave: this.mouseLeaveHandler, role: "listitem" }, index.h("a", { class: "product-link", target: link.new_tab ? "_blank" : "_top", "data-ga-campaign": link.title, href: link.link, "aria-label": this.getProductLinkLabel(link), role: "link" }, index.h("div", { class: "img-wrap" }, this.renderLinkImage(link, idx, this.links.length)), index.h("div", { class: "product-details" }, index.h("span", { class: "product-title" }, link.title), this.settings.show_price_in_popup && link.prices &&
             index.h("span", { class: "product-price", innerHTML: link.prices.price_label }), this.settings.show_price_in_popup && link.prices && link.prices.is_on_sale &&
             index.h("span", { class: "product-price product-sale", innerHTML: link.prices.sale_price }))), index.h("a", { class: `btn-buy ${buttonStyle}`, href: link.link, target: link.new_tab ? "_blank" : "_top", "data-ga-campaign": link.title, onClick: this.buyButtonClickHandler, "data-product-id": link.shopify_product_id, "aria-label": "Link to direct buy", role: "link" }, buttonStyle === "style-5" &&
             index.h("svg", { class: "icon-buy", viewBox: "0 0 14 14", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, index.h("g", { fill: "none", "fill-rule": "evenodd" }, index.h("path", { d: "M0 0h14v14H0z" }), index.h("path", { class: "dynamic-fill", d: "M6.855 1.575c1.323 0 2.405 1.03 2.405 2.315v.352h1.57l.95 8.24H1.896l.95-8.24H4.45V3.89c0-1.23.994-2.229 2.241-2.31zM9.94 5.242h-.68l.001.262a.5.5 0 01-.41.492l-.09.008a.5.5 0 01-.5-.5v-.262H5.45v.262a.5.5 0 01-.41.492l-.09.008a.5.5 0 01-.5-.5v-.262h-.714l-.72 6.24h7.643l-.72-6.24zM6.855 2.575c-.781 0-1.405.594-1.405 1.315v.352h2.81V3.89c0-.679-.552-1.245-1.269-1.31z", fill: "#FFF", "fill-rule": "nonzero" }))), index.h("span", { class: "btn-title" }, this.getLinkLabel(link)))))));
@@ -3921,9 +4038,148 @@ const CovetPicsPopupSlider = class {
     get el() { return index.getElement(this); }
 };
 
+const covetPicsSelectCss = ":host{display:flex;justify-content:space-between;align-items:center;border:1px solid transparent;border-bottom:1px solid #EEEEEE;height:var(--covet-direct-buy-dropdown-height);padding:0 8px 0 6px;-moz-text-align-last:right;text-align-last:right;font-weight:300;color:var(--covet-direct-buy-font-color);position:relative;cursor:pointer;outline:none !important;margin-bottom:10px}:host label{width:100%;height:100%;display:flex;justify-content:space-between;outline:none !important}:host label .option-name{margin:auto 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}:host label .selected-option{margin:auto 0;border:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'%3E%3C/path%3E%3Cpath stroke='%23A0A0A0' d='M16.95 10.25L12 15.2l-4.95-4.95'%3E%3C/path%3E%3C/g%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right 50%;background-size:24px;padding-right:26px;text-transform:uppercase;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:50%;font-family:inherit;cursor:pointer;font-weight:bold}:host label .selected-option.empty{height:16px;line-height:1rem;width:20%}:host .options-container{display:none;position:absolute;top:var(--covet-direct-buy-dropdown-height);left:-1px;background:#FFF;z-index:2;width:100%;border:1px solid #eee;border-top:0;max-height:114px;overflow:auto;cursor:pointer}:host .options-container .option-value{min-height:32px;font-size:12px;color:#101010;display:flex;align-items:center;outline:none !important}:host .options-container .option-value.selected .selected-indic{height:24px;border-left:2px solid #101010}:host .options-container .option-value .value-text{margin-left:4px;margin-right:4px;padding:0 10px;display:flex;align-items:center;width:100%;font-size:12px;min-height:32px}:host .options-container .option-value:hover .value-text,:host .options-container .option-value:active .value-text,:host .options-container .option-value:focus .value-text{background:#F7F7F7}:host(.opened){border-left:1px solid #EEE;border-right:1px solid #EEE}:host(.opened) .options-container{display:block}:host(.hover-enable){transition:border 0.25s ease}:host(:hover),:host(:active),:host(:focus),:host(:focus-within){border-bottom-color:#000000}";
+
+const CovetPicsSelect = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.selectChange = index.createEvent(this, "selectChange", 7);
+        this.labelClickHandler = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            if (event.type === "keydown" && event.keyCode !== 13 && event.keyCode !== 32)
+                return false;
+            if (this.el.classList.contains("opened")) {
+                return;
+            }
+            setTimeout(() => { this.el.classList.add("opened"); }, 50);
+        };
+        this.selectVariantHandler = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            const el = event.currentTarget;
+            if (el.dataset.disabled === "true")
+                return;
+            this.selectChange.emit(el.dataset.value);
+            this.el.classList.remove("opened");
+        };
+    }
+    handleClickOutside(event) {
+        if (!this.el.classList.contains("opened"))
+            return;
+        const isClickOutside = !event.composedPath().includes(this.el);
+        if (isClickOutside)
+            return this.el.classList.remove("opened");
+    }
+    componentDidLoad() {
+        requestAnimationFrame(() => this.el.classList.add("hover-enable")); // prevent border flickering on first render
+    }
+    render() {
+        return (index.h(index.Host, { key: '37dfcde178268d65b8494813787f8cf3eabc0692', class: "options", id: this.selectId }, index.h("label", { key: '3d90deaa72cb721b97a486b465529a293a6716f3', onClick: this.labelClickHandler, onKeyDown: this.labelClickHandler, tabindex: "0" }, index.h("span", { key: 'e7c8652a6251e21a055732dd0f3fd6d1f1ab3d07', class: "option-name", title: this.optionData["name"] }, this.optionData["name"]), index.h("span", { key: '3c16db1087ea36e05f1458c55c896e3ba054a0e4', class: { "selected-option": true, "empty": this.label === "" } }, this.label)), index.h("div", { key: 'fe3f24370121f36790e777dc8db21834741e3efd', class: "options-container" }, this.optionData.optionValues.map((option) => index.h("div", { class: { "option-value": true, "selected": option.name === this.selectedValue, "disabled": option.disabled }, "data-value": option.name, "data-disabled": `${option.disabled}`, onClick: this.selectVariantHandler, onKeyDown: this.selectVariantHandler, tabindex: "0" }, index.h("div", { class: "selected-indic" }), index.h("div", { class: "value-text", innerHTML: option.name, title: option.name }))))));
+    }
+    get el() { return index.getElement(this); }
+};
+CovetPicsSelect.style = covetPicsSelectCss;
+
+const covetPicsShopCartCss = "*,*::before,*::after{box-sizing:border-box}:host{--covet-font-family:var(--covet-custom-font-family, var(--covet-internal-font-family)), sans-serif;position:fixed;left:0;top:0;right:0;bottom:0;width:0;height:0;visibility:hidden;background-color:transparent;z-index:-1;font-family:var(--covet-font-family);color:#000;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:host(.show){z-index:9999999999999;width:100%;height:100%;visibility:visible}h1,h2,h3,h4,h5,h6,p{margin-top:0}.cart-body{max-height:calc(100vh - 40px);display:flex;flex-direction:column;width:480px;background-color:#fff;color:#000;top:32px;right:0;z-index:10;position:absolute;padding:20px;border-radius:0;opacity:0;transform:translateX(100%);box-sizing:border-box;overflow:hidden;box-shadow:0 20px 20px -8px rgba(26, 26, 26, 0.2784313725), 0 1px 0 0 rgba(204, 204, 204, 0.5019607843) inset, 0 -1px 0 0 rgba(0, 0, 0, 0.168627451) inset, -1px 0 0 0 rgba(0, 0, 0, 0.168627451) inset, 1px 0 0 0 rgba(0, 0, 0, 0.1294117647) inset}.cart-body.show{opacity:1;transform:translateX(-32px);transition:all 0.25s ease}@media only screen and (max-width: 799.98px){.cart-body.show{transform:translateX(0)}}@media only screen and (max-width: 799.98px){.cart-body{width:100%;top:0;right:0;max-height:none;height:100%}}.cart-top{flex-shrink:0}.btn-close{display:flex;justify-content:center;align-items:center;width:32px;height:32px;overflow:hidden;cursor:pointer;position:absolute;top:0%;right:0%;transform:translate(-16px, 16px);border:none;background-color:transparent;padding:0}.btn-close:after,.btn-close:before{content:\"\";position:absolute;width:23px;height:2px;left:50%;top:50%;background-color:#000000;transform-origin:center center;transition:background-color 0.3s ease}.btn-close:after{transform:translate(-50%, -50%) rotate(45deg)}.btn-close:before{transform:translate(-50%, -50%) rotate(-45deg)}.btn-close:disabled{cursor:auto}.btn-close:hover:after,.btn-close:hover:before,.btn-close:focus:after,.btn-close:focus:before,.btn-close:active:after,.btn-close:active:before,.btn-close.active:after,.btn-close.active:before{background-color:rgba(0, 0, 0, 0.5)}.cart-title{margin-top:0}.product-list{overflow-y:auto;padding-right:6px;flex-grow:1}.product{display:flex;padding-top:10px;padding-bottom:10px;border-bottom:1px solid rgba(0, 0, 0, 0.5)}.product:first-child{border-top:1px solid rgba(0, 0, 0, 0.5)}@media only screen and (max-width: 799.98px){.product{align-items:center}}.img-wrap{flex:none;display:flex;width:100px;height:100px;overflow:hidden;margin-right:20px}@media only screen and (max-width: 799.98px){.img-wrap{width:70px;height:70px}}@media only screen and (max-width: 479.98px){.img-wrap{width:50px;height:50px}}.img-wrap.is-loading{background-image:linear-gradient(120deg, #DFE3E8, #F9FAFB);animation:pulsate 2s ease-in-out infinite}.img-wrap.is-loading .img{opacity:0}.img{margin:auto;-o-object-fit:cover;object-fit:cover;width:100%;height:100%}.description{flex:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.top{display:flex;width:100%;margin-bottom:10px}.title{margin-bottom:0;font-size:18px;font-weight:700;color:#000;flex:1;min-width:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}@media only screen and (max-width: 799.98px){.title{font-size:16px}}.price{margin-left:10px;margin-bottom:0;font-size:16px;font-weight:700;color:#000}@media only screen and (max-width: 799.98px){.price{font-size:14px}}.text{margin-top:0;margin-bottom:10px;font-size:16px;font-weight:400;color:rgba(0, 0, 0, 0.6);min-width:0;width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}@media only screen and (max-width: 799.98px){.text{font-size:14px}}.change-count{display:flex;margin-right:auto}.count{border-top:1px solid black;border-bottom:1px solid black;display:flex;justify-content:center;align-items:center;font-family:var(--covet-font-family);font-size:14px;width:30px;height:30px}@media only screen and (max-width: 799.98px){.count{width:20px;height:20px}}.btn-update{border:1px solid black;background-color:transparent;font-family:var(--covet-font-family);font-size:16px;color:black;width:30px;height:30px;border-radius:0;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:opacity 0.25s ease}.btn-update:hover,.btn-update:focus,.btn-update:active{opacity:0.7}.btn-update:disabled{opacity:0.5;pointer-events:none}@media only screen and (max-width: 799.98px){.btn-update{width:20px;height:20px}}.bottom{display:flex;margin-top:auto;width:100%}.btn-delete{display:flex;justify-content:center;align-items:center;border:none;background-color:transparent;width:30px;height:30px;padding:0;border-radius:0;cursor:pointer;transition:opacity 0.25s ease}@media only screen and (max-width: 799.98px){.btn-delete{width:20px;height:20px}}.btn-delete:hover,.btn-delete:focus,.btn-delete:active{opacity:0.7}.icon-basket{width:14px;height:16px}.cost{margin-top:20px}.cost-price{display:flex;justify-content:space-between;margin-bottom:8px;font-size:14px;font-weight:400;color:#000000}.cost-price.total{font-weight:700}.cost-price.discount{font-size:12px}.btn-checkout{display:flex;justify-content:center;align-items:center;border:1px solid #FFFFFF;background-color:#000000;color:#FFFFFF;width:100%;padding:8px;border-radius:0;font-weight:700;transition:opacity 0.25s ease;cursor:pointer;font-size:16px;font-family:var(--covet-font-family);margin-top:20px;text-decoration:none;position:relative}.btn-checkout:hover,.btn-checkout:focus,.btn-checkout:active{opacity:0.7}.btn-checkout.disabled{opacity:0.5;pointer-events:none}@keyframes pulsate{0%{opacity:1}50%{opacity:0.3}100%{opacity:1}}";
+
+const CovetPicsShopCart = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.isCartVisible = false;
+        this.totalQuantity = 0;
+        this.closeShopCart = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            this.appStore.dispatch(shopcart.setShopCartVisible(false));
+        };
+        this.onRemoveLine = async (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            const btn = event.currentTarget;
+            const lineId = btn.dataset.lineId;
+            this.appStore.dispatch(shopcart.removeLine({
+                lineId: lineId
+            }));
+        };
+        this.onUpdateLine = async (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            const btn = event.currentTarget;
+            const totalQuantityBeforeUpdate = this.appState.shopcart.totalQuantity;
+            const lineQuantity = parseInt(btn.dataset.lineQuantity);
+            const lineId = btn.dataset.lineId;
+            await this.appStore.dispatch(shopcart.updateLine({
+                lineId: lineId,
+                lineQuantity: lineQuantity
+            }));
+            if (btn.dataset.action === "add" && totalQuantityBeforeUpdate === this.appState.shopcart.totalQuantity) {
+                btn.setAttribute("disabled", "true");
+            }
+            else {
+                const btnAdd = btn.closest('.change-count').querySelector('.btn-update[data-action="add"]');
+                btnAdd.removeAttribute("disabled");
+            }
+        };
+        this.imageLoadedHandler = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            if (event.type === "load") {
+                const img = event.currentTarget;
+                const imgWrap = img.closest(".img-wrap");
+                imgWrap.classList.remove("is-loading");
+            }
+        };
+    }
+    componentWillLoad() {
+        this.initStore();
+    }
+    disconnectedCallback() {
+        this.unsubscribe();
+    }
+    initStore() {
+        this.appState = this.appStore.getState();
+        this.products = [...this.appState.shopcart.lines];
+        this.totalAmount = getters.getFormatedTotalPrice(this.appState);
+        this.discount = getters.getFormatedDiscount(this.appState);
+        this.totalQuantity = this.appState.shopcart.totalQuantity;
+        this.isCartVisible = this.appState.shopcart.isShopCartVisible;
+        this.checkoutUrl = this.appState.shopcart.checkoutUrl;
+        this.unsubscribe = this.appStore.subscribe(() => {
+            this.appState = this.appStore.getState();
+            this.products = [...this.appState.shopcart.lines];
+            this.totalAmount = getters.getFormatedTotalPrice(this.appState);
+            this.discount = getters.getFormatedDiscount(this.appState);
+            this.totalQuantity = this.appState.shopcart.totalQuantity;
+            this.isCartVisible = this.appState.shopcart.isShopCartVisible;
+            this.checkoutUrl = this.appState.shopcart.checkoutUrl;
+        });
+    }
+    setWidgetCSSVariables() {
+        let cssVariables = {
+            "--covet-internal-font-family": `${this.appState.settings.font_family}`
+        };
+        return cssVariables;
+    }
+    renderProduct(product) {
+        var _a, _b;
+        const { merchandise, cost } = product;
+        return (index.h("article", { class: "product", key: product.id }, index.h("div", { class: "img-wrap is-loading" }, index.h("img", { class: "img", src: (_a = merchandise.image) === null || _a === void 0 ? void 0 : _a.url, alt: ((_b = merchandise.image) === null || _b === void 0 ? void 0 : _b.altText) || "product image", onLoad: this.imageLoadedHandler, onError: this.imageLoadedHandler })), index.h("div", { class: "description" }, index.h("div", { class: "top" }, index.h("h3", { class: "title" }, merchandise.product.title), index.h("p", { class: "price" }, utils.formatCurrency(cost.totalAmount.amount, cost.totalAmount.currencyCode, `${this.appState.shopcart.locale.language}-${this.appState.shopcart.locale.country}`))), index.h("h4", { class: "text" }, merchandise.title), index.h("div", { class: "bottom" }, index.h("div", { class: "change-count" }, index.h("button", { class: "btn-update", onClick: this.onUpdateLine, "data-line-id": product.id, "data-line-quantity": product.quantity - 1 }, "-"), index.h("span", { class: "count" }, product.quantity), index.h("button", { class: "btn-update", onClick: this.onUpdateLine, "data-line-id": product.id, "data-line-quantity": product.quantity + 1, "data-action": "add" }, "+")), index.h("button", { class: "btn-delete", onClick: this.onRemoveLine, "data-line-id": product.id }, index.h("svg", { class: "icon-basket" }, index.h("path", { d: "M6.31 7.18c0-.51-.4-.92-.9-.92s-.9.41-.9.92v4.63c0 .51.4.93.9.93s.9-.42.9-.93V7.18z", style: { transform: "translateX(3px)" } }), index.h("path", { d: "M6.31 7.18c0-.51-.4-.92-.9-.92s-.9.41-.9.92v4.63c0 .51.4.93.9.93s.9-.42.9-.93V7.18z" }), index.h("path", { d: "m7 0c-1.634 0-2.965 1.33-3.021 2.993H.902C.404 2.993 0 3.407 0 3.918c0 .511.404.926.902.926h.689v5.828c0 .91 0 1.599.044 2.148.043.551.132.971.314 1.338.315.635.818 1.151 1.437 1.474.358.187.766.278 1.303.323.535.045 1.207.045 2.094.045h.434c.887 0 1.558 0 2.093-.045.537-.045.946-.136 1.304-.323a3.3 3.3 0 0 0 1.437-1.474c.182-.367.27-.787.314-1.338.044-.55.044-1.239.044-2.148V4.844h.69c.497 0 .901-.415.901-.926 0-.511-.404-.925-.901-.925h-3.078C9.965 1.33 8.634 0 7 0zm-1.326 3.102h2.652a1.54 1.54 0 0 0-.387-.961c.215.222.357.521.383.852.002.036.004.073.004.109H5.674zM7 1.85c.638 0 1.161.503 1.215 1.143H5.785C5.839 2.353 6.362 1.85 7 1.85zM3.394 4.844h7.212v5.823c0 .943-.001 1.545-.038 2.003-.035.436-.093.585-.124.648a2.42 2.42 0 0 1-.649.666c-.061.032-.206.091-.632.127-.445.037-1.032.039-1.951.039h-.424c-.919 0-1.506-.002-1.952-.039-.426-.036-.57-.095-.631-.127a2.42 2.42 0 0 1-.649-.666c-.031-.063-.09-.212-.124-.648-.037-.458-.038-1.06-.038-2.003V4.844z" })))))));
+    }
+    render() {
+        return (index.h(index.Host, { key: '1859171f70f032e271f50e406dcd76783edabc3a', style: this.setWidgetCSSVariables(), class: { "show": this.isCartVisible }, role: "dialog" }, index.h("div", { key: 'b881885f70ff80d2b558ddd41a6537e370565b26', class: { "cart-body": true, "show": this.isCartVisible } }, index.h("div", { key: 'c844dc933ca9ef0fa55eab86a7bd7c3c9fe9969f', class: "cart-top" }, index.h("h2", { key: '4f1f1ce72e3be1697c8300b15e0d46475c2d16fe', class: "cart-title" }, "Basket"), index.h("button", { key: 'd119b13ceab6f7022f067f3e57cb4a4a991b2bd9', onClick: this.closeShopCart, class: "btn-close" })), index.h("div", { key: '5c69846ab7350c1bd3f0d1364c8ee7b7a0e3d65c', class: "product-list" }, this.products.map((product) => this.renderProduct(product))), index.h("div", { key: '9e707a2fea91eec71024d50d07b281a1a419bb87', class: "cost" }, this.discount !== '0' &&
+            index.h("p", { key: '184491722c32f5176de6229068817cb779973fdf', class: "cost-price discount" }, index.h("span", { key: '11c3b1ecb77fadb451c33ff13263d9c225ebfdd5' }, "Discount"), index.h("span", { key: 'a78dc3d242e5e3b77debdef5f16c4d7417fd1ef2' }, "- ", this.discount)), index.h("p", { key: '66f33aa4f1b62a6acab17594ac32cf7a6b77b1b2', class: "cost-price total" }, index.h("span", { key: '152a952a740eceebc0c09d264798385ce11e28e4' }, "Total"), index.h("span", { key: '5ab04c9dc8c78169c48431665ac145ca4d1eab0c' }, this.totalAmount))), index.h("a", { key: 'e4b4aa4f67464db177bbd112e1053fa51b217269', class: { "btn-checkout": true, "disabled": this.products.length === 0 }, href: this.checkoutUrl, target: "_top" }, "Proceed to checkout"))));
+    }
+    get el() { return index.getElement(this); }
+};
+CovetPicsShopCart.style = covetPicsShopCartCss;
+
+exports.covet_pics_checkbox = CovetPicsCheckbox;
 exports.covet_pics_direct_buy = CovetPicsDirectBuy;
 exports.covet_pics_hotspots = CovetPicsHotspots;
 exports.covet_pics_popup_links = CovetPicsPopupLinks;
 exports.covet_pics_popup_review = CovetPicsPopupReviewElement;
 exports.covet_pics_popup_shared_links = CovetPicsPopupSharedLinks;
 exports.covet_pics_popup_slider = CovetPicsPopupSlider;
+exports.covet_pics_select = CovetPicsSelect;
+exports.covet_pics_shop_cart = CovetPicsShopCart;