@ppg_pl/pallete 2.0.3 → 2.0.5

package/dist/components/my-slider.js

@@ -1,4 +1,4 @@
-import { J as JcSwiper, d as defineCustomElement$1 } from './index2.js';
+import { J as JcSwiper, d as defineCustomElement$1 } from './index3.js';
 
 const MySlider = JcSwiper;
 const defineCustomElement = defineCustomElement$1;

package/dist/esm/loader.js

@@ -11,7 +11,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return bootstrapLazy([["my-backdrop_8",[[2,"my-component",{"shop":[1],"product":[1],"show":[32],"readyToClose":[32],"open":[64]},[[0,"readyToCLose","setReadyToCloseHandler"],[0,"close","closeModalHandler"]]],[0,"my-modal",{"shop":[1],"product":[1],"closeImage":[1,"close-image"],"arrowDown":[1,"arrow-down"],"chunksNum":[32],"data":[32],"preloader":[32],"loading":[32],"colors":[32],"currentColor":[32],"currentIndex":[32],"infoBoxWidth":[32],"boxWidth":[32],"padding":[32],"isMobile":[32],"showRange":[32],"colorCategories":[32],"selectedCategory":[32],"page":[32],"open":[64]},[[0,"closeInfoBox","closeInfoBoxHandler"],[9,"resize","handleResize"],[0,"searchColors","searchColorsHandler"]]],[0,"my-backdrop"],[0,"my-colorinfo",{"currentColor":[16],"shop":[1],"product":[1],"data":[16],"isMobile":[4,"is-mobile"],"infoBoxWidth":[2,"info-box-width"],"closeImage":[1,"close-image"]}],[0,"my-colorbox",{"color":[1],"name":[1],"shop":[1],"product":[1],"isActive":[4,"is-active"],"isCategoryActive":[4,"is-category-active"]}],[2,"my-loader"],[2,"my-search",{"productId":[2,"product-id"],"isMobile":[4,"is-mobile"],"searchIcon":[1,"search-icon"],"searchText":[32]},[[4,"clearSearchText","clearSearchTextHandler"]]],[0,"my-slider",{"slides":[16],"shop":[1],"product":[1],"color":[1]}]]]], options);
+  return bootstrapLazy([["my-backdrop_8",[[2,"my-component",{"shop":[1],"product":[1],"show":[32],"readyToClose":[32],"open":[64]},[[0,"readyToCLose","setReadyToCloseHandler"],[0,"close","closeModalHandler"]]],[0,"my-modal",{"shop":[1],"product":[1],"closeImage":[1,"close-image"],"arrowDown":[1,"arrow-down"],"chunksNum":[32],"data":[32],"preloader":[32],"loading":[32],"colors":[32],"currentColor":[32],"currentIndex":[32],"infoBoxWidth":[32],"boxWidth":[32],"padding":[32],"isMobile":[32],"showRange":[32],"colorCategories":[32],"selectedCategory":[32],"page":[32],"open":[64]},[[0,"closeInfoBox","closeInfoBoxHandler"],[9,"resize","handleResize"],[0,"searchColors","searchColorsHandler"]]],[0,"my-backdrop"],[0,"my-colorinfo",{"currentColor":[16],"shop":[1],"product":[1],"data":[16],"isMobile":[4,"is-mobile"],"infoBoxWidth":[2,"info-box-width"],"closeImage":[1,"close-image"]}],[0,"my-colorbox",{"color":[1],"name":[1],"shop":[1],"product":[1],"isActive":[4,"is-active"],"isCategoryActive":[4,"is-category-active"],"isImageInsteadHex":[16]}],[2,"my-loader"],[2,"my-search",{"productId":[2,"product-id"],"isMobile":[4,"is-mobile"],"searchIcon":[1,"search-icon"],"searchText":[32]},[[4,"clearSearchText","clearSearchTextHandler"]]],[0,"my-slider",{"slides":[16],"shop":[1],"product":[1],"color":[1]}]]]], options);
   });
 };
 

package/dist/esm/my-backdrop_8.entry.js

@@ -16,6 +16,32 @@ const setDataLayer = (obj) => {
   return window.dataLayer.push(obj);
 };
 
+// DEV/
+// export const APIURL = 'http://57.128.200.45:8055';
+// export const accessToken = '_baZ127gfvFIFmZ5umrrTBUUm6D7ve6p';
+// PROD
+const APIURL = 'http://147.135.211.144:8055'; //'https://pallete-colors-backend.herokuapp.com';
+const accessToken = 'uBKzhiNM4rkdZSe_PQvKJp9pE-DSTmtu';
+class API {
+  async getData(ep) {
+    try {
+      const request = await fetch(`${APIURL}/${ep}`, {
+        method: 'GET',
+        headers: {
+          'Authorization': `Bearer ${accessToken}`,
+          'Content-Type': 'application/json',
+        },
+      });
+      const response = await request.json();
+      return response;
+    }
+    catch (error) {
+      console.error(error);
+    }
+  }
+}
+const ApiService = new API();
+
 const myColorboxCss = ".pallete-wrapper *{font-family:\"Galatea\", sans-serif}.my-color-box{width:125px;height:125px;display:block;margin-bottom:5px;cursor:pointer;display:flex;flex-direction:column;justify-content:flex-end;position:relative}@media (max-width: 1024px){.my-color-box{width:80px;height:80px}}.my-color-box .color-name{width:100%;background-color:#fff;padding:15px 0px 10px;border-top-left-radius:15px;border-top-right-radius:15px;opacity:0;transition:0.3s opacity ease-in-out;font-size:10px;color:#232323;text-transform:lowercase}.my-color-box.active .color-name{opacity:1}.my-color-box.categoryactive{width:120px;height:115px}.my-color-box.categoryactive .color-name{opacity:1}@media (max-width: 1024px){.my-color-box.categoryactive{width:72px;height:72px}}.my-color-box:hover .color-name{opacity:1}";
 
 const MyColorBox = class {
@@ -48,38 +74,21 @@ const MyColorBox = class {
     this.product = undefined;
     this.isActive = undefined;
     this.isCategoryActive = undefined;
+    this.isImageInsteadHex = undefined;
   }
   render() {
+    var _a, _b, _c;
+    console.log(this.color);
     return (h("div", { onMouseEnter: () => this.colorCheck(), onMouseLeave: () => this.colorUnCheck(), class: `my-color-box ${this.isActive ? 'active' : ''} ${this.isCategoryActive ? 'categoryactive' : ''}`, style: {
-        background: this.color,
+        backgroundSize: ((_a = this.isImageInsteadHex) === null || _a === void 0 ? void 0 : _a.isImageInsteadHex) ? 'cover' : '',
+        backgroundImage: ((_b = this.isImageInsteadHex) === null || _b === void 0 ? void 0 : _b.isImageInsteadHex) ? `url(${APIURL}/assets/${this.isImageInsteadHex.bigImage}?access_token=${accessToken})` : '',
+        background: ((_c = this.isImageInsteadHex) === null || _c === void 0 ? void 0 : _c.isImageInsteadHex) ? this.isImageInsteadHex.bigImage : this.color,
         border: this.isCategoryActive ? `5px solid ${this.darkenColor(this.color)}` : '',
       } }, h("div", { class: "color-name" }, this.name)));
   }
 };
 MyColorBox.style = myColorboxCss;
 
-const APIURL = 'http://147.135.211.144:8055'; //'https://pallete-colors-backend.herokuapp.com';
-const accessToken = 'uBKzhiNM4rkdZSe_PQvKJp9pE-DSTmtu';
-class API {
-  async getData(ep) {
-    try {
-      const request = await fetch(`${APIURL}/${ep}`, {
-        method: 'GET',
-        headers: {
-          'Authorization': `Bearer ${accessToken}`,
-          'Content-Type': 'application/json',
-        },
-      });
-      const response = await request.json();
-      return response;
-    }
-    catch (error) {
-      console.error(error);
-    }
-  }
-}
-const ApiService = new API();
-
 const MyColorInfo = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -97,6 +106,15 @@ const MyColorInfo = class {
     this.onCloseButtonClick = () => {
       this.closeInfoBox.emit();
     };
+    this.renderSliderOrImage = () => {
+      var _a;
+      if (this.currentColor.imageInsteadHex) {
+        return h("img", { class: 'color-big-image', src: `${APIURL}/assets/${this.currentColor.bigImage}?access_token=${accessToken}`, alt: "color-image" });
+      }
+      else {
+        return h("my-slider", { color: this.currentColor.name, shop: this.shop, product: this.product, slides: (_a = this.data) === null || _a === void 0 ? void 0 : _a.images });
+      }
+    };
     this.currentColor = undefined;
     this.shop = undefined;
     this.product = undefined;
@@ -106,14 +124,13 @@ const MyColorInfo = class {
     this.closeImage = 'close.png';
   }
   render() {
-    var _a, _b, _c, _d, _e, _f;
-    console.log('current', this.currentColor);
+    var _a, _b, _c, _d, _e;
     return (h("div", { class: `boxes__box-content ${this.currentColor.textWhite ? 'boxes__box-content__white' : ''}`, style: {
-        background: this.currentColor.hex,
+        background: this.currentColor.imageInsteadHex ? 'white' : this.currentColor.hex,
         maxWidth: `${this.infoBoxWidth && this.infoBoxWidth - 4}px`,
       } }, this.isMobile && h("img", { class: 'closebtn', onClick: this.onCloseButtonClick, src: getAssetPath(`./assets/${this.closeImage}`), alt: "closebtn" }), h("div", { class: "boxes__box-content__info", style: {
         maxWidth: this.isMobile ? `${this.infoBoxWidth && this.infoBoxWidth - 35}px` : ``,
-      } }, !this.isMobile && h("img", { class: 'closebtn', onClick: this.onCloseButtonClick, src: getAssetPath(`./assets/${this.closeImage}`), alt: "closebtn" }), !this.isMobile && h("h2", null, this.currentColor.name), !this.isMobile && h("h4", null, this.currentColor.number), !this.isMobile && h("div", { class: "divider" }), h("div", { class: "boxes__box-content__info__value" }, h("div", { class: "boxes__box-content__info__value-image" }, ((_a = this.currentColor) === null || _a === void 0 ? void 0 : _a.image) && h("img", { src: `${APIURL}/assets/${this.currentColor.image}?access_token=${accessToken}`, alt: "color-image" })), h("div", { class: "boxes__box-content__info__value-product" }, h("div", null, !this.isMobile && h("p", null, "Produkt:"), this.isMobile && h("h2", null, (_b = this.currentColor) === null || _b === void 0 ? void 0 : _b.name), " ", h("p", null, this.product)), this.isMobile && h("div", { class: 'divider' }), this.currentColor && ((_c = this.currentColor.links) === null || _c === void 0 ? void 0 : _c.find((link) => (link === null || link === void 0 ? void 0 : link.shop) === this.shop)) && (h("a", { onClick: this.goToProduct, class: `${this.currentColor.buttonInverse ? 'inverse' : ''}`, target: "_blank", href: (_e = (_d = this === null || this === void 0 ? void 0 : this.currentColor.links) === null || _d === void 0 ? void 0 : _d.find((link) => (link === null || link === void 0 ? void 0 : link.shop) === this.shop)) === null || _e === void 0 ? void 0 : _e.path }, "przejd\u017A do produktu"))))), h("div", { class: "boxes__box-content__slider" }, h("my-slider", { color: this.currentColor.name, shop: this.shop, product: this.product, slides: (_f = this.data) === null || _f === void 0 ? void 0 : _f.images }), ' ')));
+      } }, !this.isMobile && h("img", { class: 'closebtn', onClick: this.onCloseButtonClick, src: getAssetPath(`./assets/${this.closeImage}`), alt: "closebtn" }), !this.isMobile && h("h2", null, this.currentColor.name), !this.isMobile && h("h4", null, this.currentColor.number), !this.isMobile && h("div", { class: "divider" }), h("div", { class: "boxes__box-content__info__value" }, h("div", { class: "boxes__box-content__info__value-image" }, ((_a = this.currentColor) === null || _a === void 0 ? void 0 : _a.image) && h("img", { src: `${APIURL}/assets/${this.currentColor.image}?access_token=${accessToken}`, alt: "color-image" })), h("div", { class: "boxes__box-content__info__value-product" }, h("div", null, !this.isMobile && h("p", null, "Produkt:"), this.isMobile && h("h2", null, (_b = this.currentColor) === null || _b === void 0 ? void 0 : _b.name), " ", h("p", null, this.product)), this.isMobile && h("div", { class: 'divider' }), this.currentColor && ((_c = this.currentColor.links) === null || _c === void 0 ? void 0 : _c.find((link) => (link === null || link === void 0 ? void 0 : link.shop) === this.shop)) && (h("a", { onClick: this.goToProduct, class: `${this.currentColor.imageInsteadHex ? 'brown' : this.currentColor.buttonInverse ? 'inverse' : ''}`, target: "_blank", href: (_e = (_d = this === null || this === void 0 ? void 0 : this.currentColor.links) === null || _d === void 0 ? void 0 : _d.find((link) => (link === null || link === void 0 ? void 0 : link.shop) === this.shop)) === null || _e === void 0 ? void 0 : _e.path }, "przejd\u017A do produktu"))))), h("div", { class: "boxes__box-content__slider" }, this.renderSliderOrImage())));
   }
 };
 
@@ -1817,6 +1834,10 @@ var decode = function (str, decoder, charset) {
     }
 };
 
+var limit$1 = 1024;
+
+/* eslint operator-linebreak: [2, "before"] */
+
 var encode = function encode(str, defaultEncoder, charset, kind, format) {
     // This code was originally written by Brian White (mscdex) for the io.js core querystring library.
     // It has been adapted here for stricter adherence to RFC 3986
@@ -1838,45 +1859,54 @@ var encode = function encode(str, defaultEncoder, charset, kind, format) {
     }
 
     var out = '';
-    for (var i = 0; i < string.length; ++i) {
-        var c = string.charCodeAt(i);
-
-        if (
-            c === 0x2D // -
-            || c === 0x2E // .
-            || c === 0x5F // _
-            || c === 0x7E // ~
-            || (c >= 0x30 && c <= 0x39) // 0-9
-            || (c >= 0x41 && c <= 0x5A) // a-z
-            || (c >= 0x61 && c <= 0x7A) // A-Z
-            || (format === formats.RFC1738 && (c === 0x28 || c === 0x29)) // ( )
-        ) {
-            out += string.charAt(i);
-            continue;
-        }
+    for (var j = 0; j < string.length; j += limit$1) {
+        var segment = string.length >= limit$1 ? string.slice(j, j + limit$1) : string;
+        var arr = [];
+
+        for (var i = 0; i < segment.length; ++i) {
+            var c = segment.charCodeAt(i);
+            if (
+                c === 0x2D // -
+                || c === 0x2E // .
+                || c === 0x5F // _
+                || c === 0x7E // ~
+                || (c >= 0x30 && c <= 0x39) // 0-9
+                || (c >= 0x41 && c <= 0x5A) // a-z
+                || (c >= 0x61 && c <= 0x7A) // A-Z
+                || (format === formats.RFC1738 && (c === 0x28 || c === 0x29)) // ( )
+            ) {
+                arr[arr.length] = segment.charAt(i);
+                continue;
+            }
 
-        if (c < 0x80) {
-            out = out + hexTable[c];
-            continue;
-        }
+            if (c < 0x80) {
+                arr[arr.length] = hexTable[c];
+                continue;
+            }
 
-        if (c < 0x800) {
-            out = out + (hexTable[0xC0 | (c >> 6)] + hexTable[0x80 | (c & 0x3F)]);
-            continue;
-        }
+            if (c < 0x800) {
+                arr[arr.length] = hexTable[0xC0 | (c >> 6)]
+                    + hexTable[0x80 | (c & 0x3F)];
+                continue;
+            }
 
-        if (c < 0xD800 || c >= 0xE000) {
-            out = out + (hexTable[0xE0 | (c >> 12)] + hexTable[0x80 | ((c >> 6) & 0x3F)] + hexTable[0x80 | (c & 0x3F)]);
-            continue;
+            if (c < 0xD800 || c >= 0xE000) {
+                arr[arr.length] = hexTable[0xE0 | (c >> 12)]
+                    + hexTable[0x80 | ((c >> 6) & 0x3F)]
+                    + hexTable[0x80 | (c & 0x3F)];
+                continue;
+            }
+
+            i += 1;
+            c = 0x10000 + (((c & 0x3FF) << 10) | (segment.charCodeAt(i) & 0x3FF));
+
+            arr[arr.length] = hexTable[0xF0 | (c >> 18)]
+                + hexTable[0x80 | ((c >> 12) & 0x3F)]
+                + hexTable[0x80 | ((c >> 6) & 0x3F)]
+                + hexTable[0x80 | (c & 0x3F)];
         }
 
-        i += 1;
-        c = 0x10000 + (((c & 0x3FF) << 10) | (string.charCodeAt(i) & 0x3FF));
-        /* eslint operator-linebreak: [2, "before"] */
-        out += hexTable[0xF0 | (c >> 18)]
-            + hexTable[0x80 | ((c >> 12) & 0x3F)]
-            + hexTable[0x80 | ((c >> 6) & 0x3F)]
-            + hexTable[0x80 | (c & 0x3F)];
+        out += arr.join('');
     }
 
     return out;
@@ -2305,7 +2335,7 @@ var defaults$1 = {
     charset: 'utf-8',
     charsetSentinel: false,
     comma: false,
-    decodeDotInKeys: true,
+    decodeDotInKeys: false,
     decoder: utils.decode,
     delimiter: '&',
     depth: 5,
@@ -2632,7 +2662,7 @@ const fetchColorByNumber = (id, colorNumber) => lib.stringify({
   encodeValuesOnly: true,
 });
 
-const myModalCss = ".pallete-wrapper *{font-family:\"Galatea\", sans-serif}.my-modal{box-shadow:1px 1px 1px #ccc;background-color:#fff;position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);max-width:1555px;width:90%;z-index:1000;text-align:center;padding:35px 40px;max-height:calc(100vh - 100px);overflow-y:auto}@media (max-width: 1024px){.my-modal{padding:80px 20px 20px}}.my-modal::-webkit-scrollbar{display:none}.my-modal .loader{display:flex;flex-direction:column;align-items:center;justify-content:center;height:300px}.my-modal>img{width:300px;object-fit:cover}@media (max-width: 768px){.my-modal>img{width:200px}}.my-modal__close{position:absolute;right:20px;top:20px;background:transparent;border:none}.my-modal__close>img{width:45px;height:45px;object-fit:cover;cursor:pointer}@media (max-width: 1024px){.my-modal__close{top:65px}}.my-modal__see-more{font-size:22px;margin-bottom:27px;display:flex;justify-content:center;align-items:center}@media (max-width: 1024px){.my-modal__see-more{font-size:18px}}.my-modal__see-more img{width:45px;height:45px}@media (max-width: 1024px){.my-modal__see-more img{display:none}}.my-modal__wrapper{display:flex;flex-direction:column;position:relative}.my-modal__wrapper .boxes{display:flex;flex-direction:column;flex-wrap:wrap}.my-modal__wrapper .boxes__list{display:flex;flex-wrap:wrap;gap:5px 5px}@media (max-width: 1024px){.my-modal__wrapper .boxes__list{justify-content:center}}.my-modal__wrapper .boxes__box-content{width:100%;margin-bottom:5px;height:500px;text-align:left;display:flex;flex-direction:row;justify-content:space-between;position:relative}.my-modal__wrapper .boxes__box-content .closebtn{position:absolute;right:10px;top:10px;width:53px;height:53px;cursor:pointer;object-fit:cover;z-index:9999}@media (max-width: 1024px){.my-modal__wrapper .boxes__box-content{flex-direction:column-reverse;height:auto}}@media (max-width: 768px){.my-modal__wrapper .boxes__box-content{margin:0 auto}}.my-modal__wrapper .boxes__box-content__info{width:40%;padding:50px 40px;position:relative}@media (max-width: 1024px){.my-modal__wrapper .boxes__box-content__info{width:100%;padding:15px;min-height:100px}}@media (max-width: 768px){.my-modal__wrapper .boxes__box-content__info{min-height:auto}}.my-modal__wrapper .boxes__box-content__info h2{font-size:35px;font-weight:normal;text-transform:capitalize;margin-bottom:7px;color:#232323}.my-modal__wrapper .boxes__box-content__info h4{margin-top:0px;margin-bottom:15px;font-size:16px;color:#4c4c4c}.my-modal__wrapper .boxes__box-content__info .divider{border:1px solid #4c4c4c;opacity:0.2;margin-bottom:20px}@media (max-width: 768px){.my-modal__wrapper .boxes__box-content__info .divider{margin:10px 0px}}.my-modal__wrapper .boxes__box-content__info__value{display:flex;flex-direction:row;justify-content:flex-start}@media (max-width: 1024px){.my-modal__wrapper .boxes__box-content__info__value{justify-content:flex-start}}@media (max-width: 768px){.my-modal__wrapper .boxes__box-content__info__value{flex-direction:column}}@media (max-width: 768px){.my-modal__wrapper .boxes__box-content__info__value-image{margin:0 auto;margin-bottom:10px}}.my-modal__wrapper .boxes__box-content__info__value-image img{width:114px;object-fit:cover}@media (max-width: 1024px){.my-modal__wrapper .boxes__box-content__info__value-image img{width:75px}}.my-modal__wrapper .boxes__box-content__info__value-product{color:#232323;margin-left:10px}@media (max-width: 1024px){.my-modal__wrapper .boxes__box-content__info__value-product h2{font-size:26px;margin:0;margin-right:10px}}@media (max-width: 768px){.my-modal__wrapper .boxes__box-content__info__value-product h2{font-size:16px}}.my-modal__wrapper .boxes__box-content__info__value-product p{font-size:20px;margin-top:0px;margin-bottom:0px}.my-modal__wrapper .boxes__box-content__info__value-product p:last-of-type{margin-bottom:20px}@media (max-width: 1024px){.my-modal__wrapper .boxes__box-content__info__value-product p:last-of-type{margin-bottom:0}}@media (max-width: 768px){.my-modal__wrapper .boxes__box-content__info__value-product p{font-size:10px}}@media (max-width: 1024px){.my-modal__wrapper .boxes__box-content__info__value-product>div{display:flex;justify-content:flex-start;align-items:center}}@media (max-width: 768px){.my-modal__wrapper .boxes__box-content__info__value-product>div{flex-direction:column}}.my-modal__wrapper .boxes__box-content__slider{width:60%;position:relative}@media (max-width: 1024px){.my-modal__wrapper .boxes__box-content__slider{width:100%;display:block}}.my-modal__wrapper .boxes__box-content__white *{color:#fff}.my-modal__wrapper .boxes__box-content__white h2{color:#fff}.my-modal__wrapper .pagination{margin:10px 0px;font-size:16px;display:flex;flex-direction:row;align-items:center;justify-content:center}.my-modal__wrapper .pagination>span{margin:0 3px;cursor:pointer;min-width:20px;padding:5px;box-shadow:1px 1px 1px #ccc}.my-modal__wrapper .pagination .current{background-color:wheat}.my-modal .categories{padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid #dfdfdf;display:flex;flex-direction:column;align-items:flex-start}.my-modal .categories__container{display:flex;flex-wrap:nowrap;gap:5px 5px;overflow-x:auto;width:100%}@media (max-width: 1024px){.my-modal .categories__container{padding-bottom:5px}}.my-modal .categories__slide-information{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.my-modal .categories__slide-information span{color:#4c4c4c;font-size:16px;font-weight:normal}.my-modal .categories__slide-information span:first-of-type{margin-left:7px}.my-modal .categories__slide-information span:last-of-type{margin-right:7px}.my-modal .button,.my-modal a{background-color:#fff;font-size:16px;box-shadow:0 10px 20px 0 rgba(0, 0, 0, 0.1);border-radius:22.5px;padding:15px 30px;color:#232323;text-decoration:none;display:block;text-align:center;transition:all 0.7s ease-in-out;border:none;cursor:pointer}.my-modal .button:hover,.my-modal a:hover{color:#fff;background-color:#232323}.my-modal .button.inverse,.my-modal a.inverse{background-color:#232323;color:#fff}.my-modal .button.inverse:hover,.my-modal a.inverse:hover{color:#232323;background-color:#fff}@media (max-width: 1024px){.my-modal .button,.my-modal a{max-width:150px;font-size:13px;padding:12px 25px}}@media (max-width: 768px){.my-modal .button,.my-modal a{margin:0 auto}}.my-modal>.button{margin:10px auto}";
+const myModalCss = ".pallete-wrapper *{font-family:\"Galatea\", sans-serif}.my-modal{box-shadow:1px 1px 1px #ccc;background-color:#fff;position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);max-width:1555px;width:90%;z-index:1000;text-align:center;padding:35px 40px;max-height:calc(100vh - 100px);overflow-y:auto}@media (max-width: 1024px){.my-modal{padding:80px 20px 20px}}.my-modal::-webkit-scrollbar{display:none}.my-modal .loader{display:flex;flex-direction:column;align-items:center;justify-content:center;height:300px}.my-modal>img{width:300px;object-fit:cover}@media (max-width: 768px){.my-modal>img{width:200px}}.my-modal__close{position:absolute;right:20px;top:20px;background:transparent;border:none}.my-modal__close>img{width:45px;height:45px;object-fit:cover;cursor:pointer}@media (max-width: 1024px){.my-modal__close{top:65px}}.my-modal__see-more{font-size:22px;margin-bottom:27px;display:flex;justify-content:center;align-items:center}@media (max-width: 1024px){.my-modal__see-more{font-size:18px}}.my-modal__see-more img{width:45px;height:45px}@media (max-width: 1024px){.my-modal__see-more img{display:none}}.my-modal__wrapper{display:flex;flex-direction:column;position:relative}.my-modal__wrapper .boxes{display:flex;flex-direction:column;flex-wrap:wrap}.my-modal__wrapper .boxes__list{display:flex;flex-wrap:wrap;gap:5px 5px}@media (max-width: 1024px){.my-modal__wrapper .boxes__list{justify-content:center}}.my-modal__wrapper .boxes__box-content{width:100%;margin-bottom:5px;height:500px;text-align:left;display:flex;flex-direction:row;justify-content:space-between;position:relative}.my-modal__wrapper .boxes__box-content .closebtn{position:absolute;right:10px;top:10px;width:53px;height:53px;cursor:pointer;object-fit:cover;z-index:9999}@media (max-width: 1024px){.my-modal__wrapper .boxes__box-content{flex-direction:column-reverse;height:auto}}@media (max-width: 768px){.my-modal__wrapper .boxes__box-content{margin:0 auto}}.my-modal__wrapper .boxes__box-content__info{width:40%;padding:50px 40px;position:relative}@media (max-width: 1024px){.my-modal__wrapper .boxes__box-content__info{width:100%;padding:15px;min-height:100px}}@media (max-width: 768px){.my-modal__wrapper .boxes__box-content__info{min-height:auto}}.my-modal__wrapper .boxes__box-content__info h2{font-size:35px;font-weight:normal;text-transform:capitalize;margin-bottom:7px;color:#232323}.my-modal__wrapper .boxes__box-content__info h4{margin-top:0px;margin-bottom:15px;font-size:16px;color:#4c4c4c}.my-modal__wrapper .boxes__box-content__info .divider{border:1px solid #4c4c4c;opacity:0.2;margin-bottom:20px}@media (max-width: 768px){.my-modal__wrapper .boxes__box-content__info .divider{margin:10px 0px}}.my-modal__wrapper .boxes__box-content__info__value{display:flex;flex-direction:row;justify-content:flex-start}@media (max-width: 1024px){.my-modal__wrapper .boxes__box-content__info__value{justify-content:flex-start}}@media (max-width: 768px){.my-modal__wrapper .boxes__box-content__info__value{flex-direction:column}}@media (max-width: 768px){.my-modal__wrapper .boxes__box-content__info__value-image{margin:0 auto;margin-bottom:10px}}.my-modal__wrapper .boxes__box-content__info__value-image img{width:114px;object-fit:cover}@media (max-width: 1024px){.my-modal__wrapper .boxes__box-content__info__value-image img{width:75px}}.my-modal__wrapper .boxes__box-content__info__value-product{color:#232323;margin-left:10px}@media (max-width: 1024px){.my-modal__wrapper .boxes__box-content__info__value-product h2{font-size:26px;margin:0;margin-right:10px}}@media (max-width: 768px){.my-modal__wrapper .boxes__box-content__info__value-product h2{font-size:16px}}.my-modal__wrapper .boxes__box-content__info__value-product p{font-size:20px;margin-top:0px;margin-bottom:0px}.my-modal__wrapper .boxes__box-content__info__value-product p:last-of-type{margin-bottom:20px}@media (max-width: 1024px){.my-modal__wrapper .boxes__box-content__info__value-product p:last-of-type{margin-bottom:0}}@media (max-width: 768px){.my-modal__wrapper .boxes__box-content__info__value-product p{font-size:10px}}@media (max-width: 1024px){.my-modal__wrapper .boxes__box-content__info__value-product>div{display:flex;justify-content:flex-start;align-items:center}}@media (max-width: 768px){.my-modal__wrapper .boxes__box-content__info__value-product>div{flex-direction:column}}.my-modal__wrapper .boxes__box-content__slider{width:60%;min-width:60%;max-width:60%;position:relative}@media (max-width: 1024px){.my-modal__wrapper .boxes__box-content__slider{width:100%;display:block}}.my-modal__wrapper .boxes__box-content__slider .color-big-image{width:100%;height:100%;object-fit:cover}@media (max-width: 1024px){.my-modal__wrapper .boxes__box-content__slider .color-big-image{height:300px}}.my-modal__wrapper .boxes__box-content__white *{color:#fff}.my-modal__wrapper .boxes__box-content__white h2{color:#fff}.my-modal__wrapper .pagination{margin:10px 0px;font-size:16px;display:flex;flex-direction:row;align-items:center;justify-content:center}.my-modal__wrapper .pagination>span{margin:0 3px;cursor:pointer;min-width:20px;padding:5px;box-shadow:1px 1px 1px #ccc}.my-modal__wrapper .pagination .current{background-color:wheat}.my-modal .categories{padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid #dfdfdf;display:flex;flex-direction:column;align-items:flex-start}.my-modal .categories__container{display:flex;flex-wrap:nowrap;gap:5px 5px;overflow-x:auto;width:100%}@media (max-width: 1024px){.my-modal .categories__container{padding-bottom:5px}}.my-modal .categories__slide-information{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.my-modal .categories__slide-information span{color:#4c4c4c;font-size:16px;font-weight:normal}.my-modal .categories__slide-information span:first-of-type{margin-left:7px}.my-modal .categories__slide-information span:last-of-type{margin-right:7px}.my-modal .button,.my-modal a{background-color:#fff;font-size:16px;box-shadow:0 10px 20px 0 rgba(0, 0, 0, 0.1);border-radius:22.5px;padding:12px 30px;color:#232323;text-decoration:none;display:block;text-align:center;transition:all 0.7s ease-in-out;border:none;cursor:pointer}.my-modal .button:hover,.my-modal a:hover{color:#fff;background-color:#232323}.my-modal .button.brown,.my-modal a.brown{background-color:#3c2114;color:#fff}.my-modal .button.brown:hover,.my-modal a.brown:hover{color:#fff;background-color:#232323}.my-modal .button.inverse,.my-modal a.inverse{background-color:#232323;color:#fff}.my-modal .button.inverse:hover,.my-modal a.inverse:hover{color:#232323;background-color:#fff}@media (max-width: 1024px){.my-modal .button,.my-modal a{max-width:150px;font-size:13px;padding:12px 25px}}@media (max-width: 768px){.my-modal .button,.my-modal a{margin:0 auto}}.my-modal>.button{margin:10px auto}";
 
 const MyModal = class {
   constructor(hostRef) {
@@ -2869,8 +2899,10 @@ const MyModal = class {
   }
   render() {
     var _a, _b, _c, _d;
-    console.log(this.colors);
-    return (h("div", { class: `my-modal`, onMouseEnter: () => this.handleReadyToClose(false), onMouseLeave: () => this.handleReadyToClose(true) }, this.preloader && (h("div", { class: 'loader' }, h("my-loader", null))), !this.preloader && (h("button", { class: "my-modal__close", onClick: () => this.closeModalHandler() }, h("img", { src: getAssetPath(`./assets/${this.closeImage}`), alt: "closebtn" }))), !this.preloader && this.data && this.data.modalLogo && h("img", { src: `${APIURL}/assets/${(_a = this.data) === null || _a === void 0 ? void 0 : _a.modalLogo}?access_token=${accessToken}`, alt: "modal-logo" }), !this.preloader && this.data && (h("p", { class: "my-modal__see-more" }, (_b = this.data) === null || _b === void 0 ? void 0 : _b.modalDescription)), this.showRange && (h("div", { class: 'categories' }, this.data && h("my-search", { productId: Number((_c = this.data) === null || _c === void 0 ? void 0 : _c.id), isMobile: this.isMobile }), h("div", { class: 'categories__container', style: { maxWidth: `${this.infoBoxWidth}px` } }, (_d = this.data) === null || _d === void 0 ? void 0 : _d.Category.map((c) => (h("my-colorbox", { key: c.id, onClick: () => this.handleCategoryClick(c.Category_id.id), color: c.Category_id.hex, name: c.Category_id.category_name, shop: this.shop, product: this.product, isCategoryActive: this.selectedCategory === c.Category_id.id })))), this.isMobile && (h("div", { class: 'categories__slide-information', style: { width: `${this.infoBoxWidth}px` } }, h("span", null, "Przewi\u0144 w lewo"), h("span", null, "Przewi\u0144 w prawo"))))), h("div", { class: 'my-modal__wrapper' }, this.loading && h("my-loader", null), !this.loading && this.colors && (h("div", { class: 'container_boxes' }, this.colors.list.length > 0 ? (this.chunks(this.colors.list).map((color, index) => {
+    return (h("div", { class: `my-modal`, onMouseEnter: () => this.handleReadyToClose(false), onMouseLeave: () => this.handleReadyToClose(true) }, this.preloader && (h("div", { class: 'loader' }, h("my-loader", null))), !this.preloader && (h("button", { class: "my-modal__close", onClick: () => this.closeModalHandler() }, h("img", { src: getAssetPath(`./assets/${this.closeImage}`), alt: "closebtn" }))), !this.preloader && this.data && this.data.modalLogo && h("img", { src: `${APIURL}/assets/${(_a = this.data) === null || _a === void 0 ? void 0 : _a.modalLogo}?access_token=${accessToken}`, alt: "modal-logo" }), !this.preloader && this.data && (h("p", { class: "my-modal__see-more" }, (_b = this.data) === null || _b === void 0 ? void 0 : _b.modalDescription)), this.showRange && (h("div", { class: 'categories' }, this.data && h("my-search", { productId: Number((_c = this.data) === null || _c === void 0 ? void 0 : _c.id), isMobile: this.isMobile }), h("div", { class: 'categories__container', style: { maxWidth: `${this.infoBoxWidth}px` } }, (_d = this.data) === null || _d === void 0 ? void 0 : _d.Category.map((c) => (h("my-colorbox", { key: c.id, onClick: () => this.handleCategoryClick(c.Category_id.id), color: c.Category_id.hex, name: c.Category_id.category_name, shop: this.shop, product: this.product, isCategoryActive: this.selectedCategory === c.Category_id.id, isImageInsteadHex: {
+        isImageInsteadHex: (c === null || c === void 0 ? void 0 : c.imageInsteadHex) || false,
+        bigImage: (c === null || c === void 0 ? void 0 : c.bigImage) || '',
+      } })))), this.isMobile && (h("div", { class: 'categories__slide-information', style: { width: `${this.infoBoxWidth}px` } }, h("span", null, "Przewi\u0144 w lewo"), h("span", null, "Przewi\u0144 w prawo"))))), h("div", { class: 'my-modal__wrapper' }, this.loading && h("my-loader", null), !this.loading && this.colors && (h("div", { class: 'container_boxes' }, this.colors.list.length > 0 ? (this.chunks(this.colors.list).map((color, index) => {
       var _a;
       return (h("div", { key: index, class: "boxes" }, h("div", { class: "boxes__list" }, color.map((c) => {
         var _a;
@@ -2887,7 +2919,10 @@ const MyModal = class {
               }),
               ((_c = this.currentColor) === null || _c === void 0 ? void 0 : _c.id) && this.clearInterval(),
             ];
-          }, color: c.hex, name: c.name, isActive: ((_a = this.currentColor) === null || _a === void 0 ? void 0 : _a.id) === c.id, shop: this.shop, product: this.product }));
+          }, color: c.hex, name: c.name, isActive: ((_a = this.currentColor) === null || _a === void 0 ? void 0 : _a.id) === c.id, shop: this.shop, product: this.product, isImageInsteadHex: {
+            isImageInsteadHex: c.imageInsteadHex,
+            bigImage: c.bigImage,
+          } }));
       })), ((_a = this.currentColor) === null || _a === void 0 ? void 0 : _a.id) && index === this.currentIndex && (h("my-colorinfo", { currentColor: this.currentColor, shop: this.shop, product: this.product, data: this.data, isMobile: this.isMobile, infoBoxWidth: this.infoBoxWidth }))));
     })) : (h("p", null, "Brak wynik\u00F3w")), this.colors.pagination.filter_count > limit && (h("div", { class: 'pagination' }, Array.from({ length: Math.ceil(this.colors.pagination.filter_count / limit) }).map((_, i) => (h("span", { class: i + 1 === this.page ? 'current' : '', onClick: e => {
         e.preventDefault();