@ppg_pl/pallete 2.0.3 → 2.0.5

package/dist/components/my-colorbox2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { s as setDataLayer } from './gtmUtils.js';
+import { s as setDataLayer, A as APIURL, a as accessToken } from './index2.js';
 
 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}";
 
@@ -34,10 +34,15 @@ const MyColorBox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     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)));
   }
@@ -48,7 +53,8 @@ const MyColorBox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "shop": [1],
     "product": [1],
     "isActive": [4, "is-active"],
-    "isCategoryActive": [4, "is-category-active"]
+    "isCategoryActive": [4, "is-category-active"],
+    "isImageInsteadHex": [16]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {

package/dist/components/my-colorbox2.js.map

@@ -1 +1 @@
-{"file":"my-colorbox2.js","mappings":";;;AAAA,MAAM,aAAa,GAAG,0xBAA0xB;;MCOnyB,UAAU;;;;IAUrB,eAAU,GAAG;MACX,IAAI,CAAC,YAAY,GAAG,UAAU,CAAC;QAC7B,YAAY,CAAC;UACX,KAAK,EAAE,YAAY;UACnB,IAAI,EAAE,IAAI,CAAC,IAAI;UACf,OAAO,EAAE,IAAI,CAAC,OAAO;UACrB,KAAK,EAAE,IAAI,CAAC,IAAI;SACjB,CAAC,CAAC;OACJ,EAAE,IAAI,CAAC,CAAC;KACV,CAAC;IAEF,iBAAY,GAAG;MACb,IAAI,IAAI,CAAC,YAAY;QAAE,YAAY,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;MACvD,IAAI,CAAC,YAAY,GAAG,SAAS,CAAC;KAC/B,CAAC;IAEF,gBAAW,GAAG,CAAC,KAAa;MAC1B,MAAM,GAAG,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,EAAE,CAAC;MACnD,MAAM,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,EAAE,CAAC;MACrD,MAAM,IAAI,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,EAAE,CAAC;MACpD,OAAO,OAAO,GAAG,IAAI,KAAK,IAAI,IAAI,GAAG,CAAC;KACvC,CAAC;;;;;;;;EAEF,MAAM;IACJ,QACE,WACE,YAAY,EAAE,MAAM,IAAI,CAAC,UAAU,EAAE,EACrC,YAAY,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,EACvC,KAAK,EAAE,gBAAgB,IAAI,CAAC,QAAQ,GAAG,QAAQ,GAAG,EAAE,IAAI,IAAI,CAAC,gBAAgB,GAAG,gBAAgB,GAAG,EAAE,EAAE,EACvG,KAAK,EAAE;QACL,UAAU,EAAE,IAAI,CAAC,KAAK;QACtB,MAAM,EAAE,IAAI,CAAC,gBAAgB,GAAG,aAAa,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,GAAG,EAAE;OACjF,IAED,WAAK,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,IAAI,CAAO,CACrC,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/my-colorbox/my-colorbox.scss?tag=my-colorbox","./src/components/my-colorbox/my-colorbox.tsx"],"sourcesContent":["@import '../../global/app.scss';\n\n.my-color-box {\n  width: 125px;\n  height: 125px;\n  display: block;\n  margin-bottom: 5px;\n  cursor: pointer;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  position: relative;\n\n  @media (max-width: $medium) {\n    width: 80px;\n    height: 80px;\n  }\n  .color-name {\n    width: 100%;\n    background-color: $white;\n    padding: 15px 0px 10px;\n    border-top-left-radius: 15px;\n    border-top-right-radius: 15px;\n    opacity: 0;\n    transition: 0.3s opacity ease-in-out;\n    font-size: 10px;\n    color: $black;\n    text-transform: lowercase;\n  }\n  &.active {\n    .color-name {\n      opacity: 1;\n    }\n  }\n\n  &.categoryactive {\n    width: 120px;\n    height: 115px;\n    .color-name {\n      opacity: 1;\n    }\n\n    @media (max-width: $medium) {\n      width: 72px;\n      height: 72px;\n    }\n  }\n  &:hover {\n    .color-name {\n      opacity: 1;\n    }\n  }\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { setDataLayer } from '../../gtmUtils';\n\n@Component({\n  tag: 'my-colorbox',\n  styleUrl: 'my-colorbox.scss',\n})\nexport class MyColorBox {\n  private checkTimeout: ReturnType<typeof setTimeout> | undefined;\n\n  @Prop() color: string;\n  @Prop() name: string;\n  @Prop() shop: string;\n  @Prop() product: string;\n  @Prop() isActive?: boolean;\n  @Prop() isCategoryActive?: boolean;\n\n  colorCheck = () => {\n    this.checkTimeout = setTimeout(() => {\n      setDataLayer({\n        event: 'ColorCheck',\n        shop: this.shop,\n        product: this.product,\n        color: this.name,\n      });\n    }, 2000);\n  };\n\n  colorUnCheck = () => {\n    if (this.checkTimeout) clearTimeout(this.checkTimeout);\n    this.checkTimeout = undefined;\n  };\n\n  darkenColor = (color: string) => {\n    const red = parseInt(color[1] + color[2], 16) - 20;\n    const green = parseInt(color[3] + color[4], 16) - 20;\n    const blue = parseInt(color[5] + color[6], 16) - 20;\n    return `rgb(${red},${green},${blue})`;\n  };\n\n  render() {\n    return (\n      <div\n        onMouseEnter={() => this.colorCheck()}\n        onMouseLeave={() => this.colorUnCheck()}\n        class={`my-color-box ${this.isActive ? 'active' : ''} ${this.isCategoryActive ? 'categoryactive' : ''}`}\n        style={{\n          background: this.color,\n          border: this.isCategoryActive ? `5px solid ${this.darkenColor(this.color)}` : '',\n        }}\n      >\n        <div class=\"color-name\">{this.name}</div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"my-colorbox2.js","mappings":";;;AAAA,MAAM,aAAa,GAAG,0xBAA0xB;;MCSnyB,UAAU;;;;IAWrB,eAAU,GAAG;MACX,IAAI,CAAC,YAAY,GAAG,UAAU,CAAC;QAC7B,YAAY,CAAC;UACX,KAAK,EAAE,YAAY;UACnB,IAAI,EAAE,IAAI,CAAC,IAAI;UACf,OAAO,EAAE,IAAI,CAAC,OAAO;UACrB,KAAK,EAAE,IAAI,CAAC,IAAI;SACjB,CAAC,CAAC;OACJ,EAAE,IAAI,CAAC,CAAC;KACV,CAAC;IAEF,iBAAY,GAAG;MACb,IAAI,IAAI,CAAC,YAAY;QAAE,YAAY,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;MACvD,IAAI,CAAC,YAAY,GAAG,SAAS,CAAC;KAC/B,CAAC;IAEF,gBAAW,GAAG,CAAC,KAAa;MAC1B,MAAM,GAAG,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,EAAE,CAAC;MACnD,MAAM,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,EAAE,CAAC;MACrD,MAAM,IAAI,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,EAAE,CAAC;MACpD,OAAO,OAAO,GAAG,IAAI,KAAK,IAAI,IAAI,GAAG,CAAC;KACvC,CAAC;;;;;;;;;EAEF,MAAM;;IACJ,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACxB,QACE,WACE,YAAY,EAAE,MAAM,IAAI,CAAC,UAAU,EAAE,EACrC,YAAY,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,EACvC,KAAK,EAAE,gBAAgB,IAAI,CAAC,QAAQ,GAAG,QAAQ,GAAG,EAAE,IAAI,IAAI,CAAC,gBAAgB,GAAG,gBAAgB,GAAG,EAAE,EAAE,EACvG,KAAK,EAAE;QACL,cAAc,EAAE,CAAA,MAAA,IAAI,CAAC,iBAAiB,0CAAE,iBAAiB,IAAG,OAAO,GAAG,EAAE;QACxE,eAAe,EAAE,CAAA,MAAA,IAAI,CAAC,iBAAiB,0CAAE,iBAAiB,IAAG,OAAO,MAAM,WAAW,IAAI,CAAC,iBAAiB,CAAC,QAAQ,iBAAiB,WAAW,GAAG,GAAG,EAAE;QACxJ,UAAU,EAAE,CAAA,MAAA,IAAI,CAAC,iBAAiB,0CAAE,iBAAiB,IAAG,IAAI,CAAC,iBAAiB,CAAC,QAAQ,GAAG,IAAI,CAAC,KAAK;QACpG,MAAM,EAAE,IAAI,CAAC,gBAAgB,GAAG,aAAa,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,GAAG,EAAE;OACjF,IAED,WAAK,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,IAAI,CAAO,CACrC,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/my-colorbox/my-colorbox.scss?tag=my-colorbox","./src/components/my-colorbox/my-colorbox.tsx"],"sourcesContent":["@import '../../global/app.scss';\n\n.my-color-box {\n  width: 125px;\n  height: 125px;\n  display: block;\n  margin-bottom: 5px;\n  cursor: pointer;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  position: relative;\n\n  @media (max-width: $medium) {\n    width: 80px;\n    height: 80px;\n  }\n  .color-name {\n    width: 100%;\n    background-color: $white;\n    padding: 15px 0px 10px;\n    border-top-left-radius: 15px;\n    border-top-right-radius: 15px;\n    opacity: 0;\n    transition: 0.3s opacity ease-in-out;\n    font-size: 10px;\n    color: $black;\n    text-transform: lowercase;\n  }\n  &.active {\n    .color-name {\n      opacity: 1;\n    }\n  }\n\n  &.categoryactive {\n    width: 120px;\n    height: 115px;\n    .color-name {\n      opacity: 1;\n    }\n\n    @media (max-width: $medium) {\n      width: 72px;\n      height: 72px;\n    }\n  }\n  &:hover {\n    .color-name {\n      opacity: 1;\n    }\n  }\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { setDataLayer } from '../../gtmUtils';\nimport { ColorBoxyIsImageInsteadHex } from '../../types';\nimport { APIURL, accessToken } from '../api';\n\n@Component({\n  tag: 'my-colorbox',\n  styleUrl: 'my-colorbox.scss',\n})\nexport class MyColorBox {\n  private checkTimeout: ReturnType<typeof setTimeout> | undefined;\n\n  @Prop() color: string;\n  @Prop() name: string;\n  @Prop() shop: string;\n  @Prop() product: string;\n  @Prop() isActive?: boolean;\n  @Prop() isCategoryActive?: boolean;\n  @Prop() isImageInsteadHex?: ColorBoxyIsImageInsteadHex;\n\n  colorCheck = () => {\n    this.checkTimeout = setTimeout(() => {\n      setDataLayer({\n        event: 'ColorCheck',\n        shop: this.shop,\n        product: this.product,\n        color: this.name,\n      });\n    }, 2000);\n  };\n\n  colorUnCheck = () => {\n    if (this.checkTimeout) clearTimeout(this.checkTimeout);\n    this.checkTimeout = undefined;\n  };\n\n  darkenColor = (color: string) => {\n    const red = parseInt(color[1] + color[2], 16) - 20;\n    const green = parseInt(color[3] + color[4], 16) - 20;\n    const blue = parseInt(color[5] + color[6], 16) - 20;\n    return `rgb(${red},${green},${blue})`;\n  };\n\n  render() {\n    console.log(this.color);\n    return (\n      <div\n        onMouseEnter={() => this.colorCheck()}\n        onMouseLeave={() => this.colorUnCheck()}\n        class={`my-color-box ${this.isActive ? 'active' : ''} ${this.isCategoryActive ? 'categoryactive' : ''}`}\n        style={{\n          backgroundSize: this.isImageInsteadHex?.isImageInsteadHex ? 'cover' : '',\n          backgroundImage: this.isImageInsteadHex?.isImageInsteadHex ? `url(${APIURL}/assets/${this.isImageInsteadHex.bigImage}?access_token=${accessToken})` : '',\n          background: this.isImageInsteadHex?.isImageInsteadHex ? this.isImageInsteadHex.bigImage : this.color,\n          border: this.isCategoryActive ? `5px solid ${this.darkenColor(this.color)}` : '',\n        }}\n      >\n        <div class=\"color-name\">{this.name}</div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/my-colorinfo2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, getAssetPath } from '@stencil/core/internal/client';
-import { s as setDataLayer } from './gtmUtils.js';
-import { A as APIURL, a as accessToken, d as defineCustomElement$1 } from './index2.js';
+import { s as setDataLayer, A as APIURL, a as accessToken } from './index2.js';
+import { d as defineCustomElement$1 } from './index3.js';
 
 const MyColorInfo = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -20,6 +20,15 @@ const MyColorInfo = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     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;
@@ -29,14 +38,13 @@ const MyColorInfo = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     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())));
   }
 }, [0, "my-colorinfo", {
     "currentColor": [16],

package/dist/components/my-colorinfo2.js.map

@@ -1 +1 @@
-{"file":"my-colorinfo2.js","mappings":"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","names":[],"sources":["./src/components/my-colorinfo/my-colorinfo.tsx"],"sourcesContent":["import { Component, Prop, h, getAssetPath, Event, EventEmitter } from '@stencil/core';\nimport { setDataLayer } from '../../gtmUtils';\nimport { Color, Link, Product } from '../../types';\nimport { APIURL, accessToken } from '../api';\n@Component({\n  tag: 'my-colorinfo',\n})\nexport class MyColorInfo {\n  @Prop() currentColor: Color;\n  @Prop() shop: string;\n  @Prop() product: string;\n  @Prop() data: Product | null = null;\n  @Prop() isMobile: boolean = false;\n  @Prop() infoBoxWidth: number | null;\n  @Prop() closeImage = 'close.png';\n\n  @Event() closeInfoBox: EventEmitter;\n\n  goToProduct = () => {\n    this.currentColor &&\n      setDataLayer({\n        event: 'GoToProduct',\n        shop: this.shop,\n        product: this.product,\n        color: this.currentColor?.name,\n      });\n  };\n\n  onCloseButtonClick = () => {\n    this.closeInfoBox.emit();\n  };\n\n  render() {\n    console.log('current', this.currentColor);\n    return (\n      <div\n        class={`boxes__box-content ${this.currentColor.textWhite ? 'boxes__box-content__white' : ''}`}\n        style={{\n          background: this.currentColor.hex,\n          maxWidth: `${this.infoBoxWidth && this.infoBoxWidth - 4}px`,\n        }}\n      >\n        {this.isMobile && <img class={'closebtn'} onClick={this.onCloseButtonClick} src={getAssetPath(`./assets/${this.closeImage}`)} alt=\"closebtn\" />}\n        <div\n          class=\"boxes__box-content__info\"\n          style={{\n            maxWidth: this.isMobile ? `${this.infoBoxWidth && this.infoBoxWidth - 35}px` : ``,\n          }}\n        >\n          {!this.isMobile && <img class={'closebtn'} onClick={this.onCloseButtonClick} src={getAssetPath(`./assets/${this.closeImage}`)} alt=\"closebtn\" />}\n          {!this.isMobile && <h2>{this.currentColor.name}</h2>}\n          {!this.isMobile && <h4>{this.currentColor.number}</h4>}\n          {!this.isMobile && <div class=\"divider\"></div>}\n          <div class=\"boxes__box-content__info__value\">\n            <div class=\"boxes__box-content__info__value-image\">\n              {this.currentColor?.image! && <img src={`${APIURL}/assets/${this.currentColor.image}?access_token=${accessToken}`} alt=\"color-image\" />}\n            </div>\n            <div class=\"boxes__box-content__info__value-product\">\n              <div>\n                {!this.isMobile && <p>Produkt:</p>}\n                {this.isMobile && <h2>{this.currentColor?.name}</h2>} <p>{this.product}</p>\n              </div>\n\n              {this.isMobile && <div class={'divider'}></div>}\n              {this.currentColor && this.currentColor.links?.find((link: Link) => link?.shop === this.shop) && (\n                <a\n                  onClick={this.goToProduct}\n                  class={`${this.currentColor.buttonInverse ? 'inverse' : ''}`}\n                  target=\"_blank\"\n                  href={this?.currentColor.links?.find((link: Link) => link?.shop === this.shop)?.path}\n                >\n                  przejdź do produktu\n                </a>\n              )}\n            </div>\n          </div>\n        </div>\n        <div class=\"boxes__box-content__slider\">\n          <my-slider color={this.currentColor.name} shop={this.shop} product={this.product} slides={this.data?.images}></my-slider>{' '}\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"my-colorinfo2.js","mappings":"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","names":[],"sources":["./src/components/my-colorinfo/my-colorinfo.tsx"],"sourcesContent":["import { Component, Prop, h, getAssetPath, Event, EventEmitter } from '@stencil/core';\nimport { setDataLayer } from '../../gtmUtils';\nimport { Color, Link, Product } from '../../types';\nimport { APIURL, accessToken } from '../api';\n@Component({\n  tag: 'my-colorinfo',\n})\nexport class MyColorInfo {\n  @Prop() currentColor: Color;\n  @Prop() shop: string;\n  @Prop() product: string;\n  @Prop() data: Product | null = null;\n  @Prop() isMobile: boolean = false;\n  @Prop() infoBoxWidth: number | null;\n  @Prop() closeImage = 'close.png';\n\n  @Event() closeInfoBox: EventEmitter;\n\n  goToProduct = () => {\n    this.currentColor &&\n      setDataLayer({\n        event: 'GoToProduct',\n        shop: this.shop,\n        product: this.product,\n        color: this.currentColor?.name,\n      });\n  };\n\n  onCloseButtonClick = () => {\n    this.closeInfoBox.emit();\n  };\n\n  renderSliderOrImage = () => {\n    if (this.currentColor.imageInsteadHex) {\n      return <img class={'color-big-image'} src={`${APIURL}/assets/${this.currentColor.bigImage}?access_token=${accessToken}`} alt=\"color-image\" />;\n    } else {\n      return <my-slider color={this.currentColor.name} shop={this.shop} product={this.product} slides={this.data?.images}></my-slider>;\n    }\n  };\n\n  render() {\n    return (\n      <div\n        class={`boxes__box-content ${this.currentColor.textWhite ? 'boxes__box-content__white' : ''}`}\n        style={{\n          background: this.currentColor.imageInsteadHex ? 'white' : this.currentColor.hex,\n          maxWidth: `${this.infoBoxWidth && this.infoBoxWidth - 4}px`,\n        }}\n      >\n        {this.isMobile && <img class={'closebtn'} onClick={this.onCloseButtonClick} src={getAssetPath(`./assets/${this.closeImage}`)} alt=\"closebtn\" />}\n        <div\n          class=\"boxes__box-content__info\"\n          style={{\n            maxWidth: this.isMobile ? `${this.infoBoxWidth && this.infoBoxWidth - 35}px` : ``,\n          }}\n        >\n          {!this.isMobile && <img class={'closebtn'} onClick={this.onCloseButtonClick} src={getAssetPath(`./assets/${this.closeImage}`)} alt=\"closebtn\" />}\n          {!this.isMobile && <h2>{this.currentColor.name}</h2>}\n          {!this.isMobile && <h4>{this.currentColor.number}</h4>}\n          {!this.isMobile && <div class=\"divider\"></div>}\n          <div class=\"boxes__box-content__info__value\">\n            <div class=\"boxes__box-content__info__value-image\">\n              {this.currentColor?.image! && <img src={`${APIURL}/assets/${this.currentColor.image}?access_token=${accessToken}`} alt=\"color-image\" />}\n            </div>\n            <div class=\"boxes__box-content__info__value-product\">\n              <div>\n                {!this.isMobile && <p>Produkt:</p>}\n                {this.isMobile && <h2>{this.currentColor?.name}</h2>} <p>{this.product}</p>\n              </div>\n\n              {this.isMobile && <div class={'divider'}></div>}\n              {this.currentColor && this.currentColor.links?.find((link: Link) => link?.shop === this.shop) && (\n                <a\n                  onClick={this.goToProduct}\n                  class={`${this.currentColor.imageInsteadHex ? 'brown' : this.currentColor.buttonInverse ? 'inverse' : ''}`}\n                  target=\"_blank\"\n                  href={this?.currentColor.links?.find((link: Link) => link?.shop === this.shop)?.path}\n                >\n                  przejdź do produktu\n                </a>\n              )}\n            </div>\n          </div>\n        </div>\n        <div class=\"boxes__box-content__slider\">{this.renderSliderOrImage()}</div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/my-component.js

@@ -5,7 +5,7 @@ import { d as defineCustomElement$6 } from './my-colorinfo2.js';
 import { d as defineCustomElement$5 } from './my-loader2.js';
 import { d as defineCustomElement$4 } from './my-modal2.js';
 import { d as defineCustomElement$3 } from './my-search2.js';
-import { d as defineCustomElement$2 } from './index2.js';
+import { d as defineCustomElement$2 } from './index3.js';
 
 const isObject = (val) => !Array.isArray(val) && val !== null && typeof val === 'object';
 const hasAttributes = ({ vattrs }, requiredAttrs = []) => isObject(vattrs) && requiredAttrs.every(vattrs.hasOwnProperty.bind(vattrs));

package/dist/components/my-modal2.js

@@ -1,10 +1,10 @@
 import { proxyCustomElement, HTMLElement as HTMLElement$1, createEvent, h, getAssetPath } from '@stencil/core/internal/client';
-import { b as ApiService, A as APIURL, a as accessToken, d as defineCustomElement$1 } from './index2.js';
-import { s as setDataLayer } from './gtmUtils.js';
+import { s as setDataLayer, b as ApiService, A as APIURL, a as accessToken } from './index2.js';
 import { d as defineCustomElement$5 } from './my-colorbox2.js';
 import { d as defineCustomElement$4 } from './my-colorinfo2.js';
 import { d as defineCustomElement$3 } from './my-loader2.js';
 import { d as defineCustomElement$2 } from './my-search2.js';
+import { d as defineCustomElement$1 } from './index3.js';
 
 /** @type {import('.')} */
 var esErrors = Error;
@@ -1534,6 +1534,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
@@ -1555,45 +1559,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;
@@ -2022,7 +2035,7 @@ var defaults = {
     charset: 'utf-8',
     charsetSentinel: false,
     comma: false,
-    decodeDotInKeys: true,
+    decodeDotInKeys: false,
     decoder: utils.decode,
     delimiter: '&',
     depth: 5,
@@ -2349,7 +2362,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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
   constructor() {
@@ -2587,8 +2600,10 @@ const MyModal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
   }
   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;
@@ -2605,7 +2620,10 @@ const MyModal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
               }),
               ((_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();