@ppg_pl/pallete 2.0.3 → 2.0.5

package/dist/cjs/pallete.cjs.js

@@ -20,7 +20,7 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["my-backdrop_8.cjs",[[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 index.bootstrapLazy([["my-backdrop_8.cjs",[[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);
 });
 
 exports.setNonce = index.setNonce;

package/dist/collection/components/api/index.js

@@ -1,3 +1,7 @@
+// DEV/
+// export const APIURL = 'http://57.128.200.45:8055';
+// export const accessToken = '_baZ127gfvFIFmZ5umrrTBUUm6D7ve6p';
+// PROD
 export const APIURL = 'http://147.135.211.144:8055'; //'https://pallete-colors-backend.herokuapp.com';
 export const accessToken = 'uBKzhiNM4rkdZSe_PQvKJp9pE-DSTmtu';
 class API {

package/dist/collection/components/api/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/api/index.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,MAAM,GAAG,6BAA6B,CAAC,CAAC,iDAAiD;AACtG,MAAM,CAAC,MAAM,WAAW,GAAG,kCAAkC,CAAC;AAE9D,MAAM,GAAG;EACP,KAAK,CAAC,OAAO,CAAC,EAAU;IACtB,IAAI;MACF,MAAM,OAAO,GAAG,MAAM,KAAK,CAAC,GAAG,MAAM,IAAI,EAAE,EAAE,EAAE;QAC7C,MAAM,EAAE,KAAK;QAEb,OAAO,EAAE;UACP,eAAe,EAAE,UAAU,WAAW,EAAE;UACxC,cAAc,EAAE,kBAAkB;SACnC;OACF,CAAC,CAAC;MACH,MAAM,QAAQ,GAAG,MAAM,OAAO,CAAC,IAAI,EAAE,CAAC;MAEtC,OAAO,QAAQ,CAAC;KACjB;IAAC,OAAO,KAAK,EAAE;MACd,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;KACtB;EACH,CAAC;CACF;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,IAAI,GAAG,EAAE,CAAC","sourcesContent":["export const APIURL = 'http://147.135.211.144:8055'; //'https://pallete-colors-backend.herokuapp.com';\nexport const accessToken = 'uBKzhiNM4rkdZSe_PQvKJp9pE-DSTmtu';\n\nclass API {\n  async getData(ep: string) {\n    try {\n      const request = await fetch(`${APIURL}/${ep}`, {\n        method: 'GET',\n\n        headers: {\n          'Authorization': `Bearer ${accessToken}`,\n          'Content-Type': 'application/json',\n        },\n      });\n      const response = await request.json();\n\n      return response;\n    } catch (error) {\n      console.error(error);\n    }\n  }\n}\n\nexport const ApiService = new API();\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/api/index.ts"],"names":[],"mappings":"AAAA,OAAO;AACP,qDAAqD;AACrD,iEAAiE;AAEjE,OAAO;AAEP,MAAM,CAAC,MAAM,MAAM,GAAG,6BAA6B,CAAC,CAAC,iDAAiD;AACtG,MAAM,CAAC,MAAM,WAAW,GAAG,kCAAkC,CAAC;AAE9D,MAAM,GAAG;EACP,KAAK,CAAC,OAAO,CAAC,EAAU;IACtB,IAAI;MACF,MAAM,OAAO,GAAG,MAAM,KAAK,CAAC,GAAG,MAAM,IAAI,EAAE,EAAE,EAAE;QAC7C,MAAM,EAAE,KAAK;QAEb,OAAO,EAAE;UACP,eAAe,EAAE,UAAU,WAAW,EAAE;UACxC,cAAc,EAAE,kBAAkB;SACnC;OACF,CAAC,CAAC;MACH,MAAM,QAAQ,GAAG,MAAM,OAAO,CAAC,IAAI,EAAE,CAAC;MAEtC,OAAO,QAAQ,CAAC;KACjB;IAAC,OAAO,KAAK,EAAE;MACd,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;KACtB;EACH,CAAC;CACF;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,IAAI,GAAG,EAAE,CAAC","sourcesContent":["// DEV/\n// export const APIURL = 'http://57.128.200.45:8055';\n// export const accessToken = '_baZ127gfvFIFmZ5umrrTBUUm6D7ve6p';\n\n// PROD\n\nexport const APIURL = 'http://147.135.211.144:8055'; //'https://pallete-colors-backend.herokuapp.com';\nexport const accessToken = 'uBKzhiNM4rkdZSe_PQvKJp9pE-DSTmtu';\n\nclass API {\n  async getData(ep: string) {\n    try {\n      const request = await fetch(`${APIURL}/${ep}`, {\n        method: 'GET',\n\n        headers: {\n          'Authorization': `Bearer ${accessToken}`,\n          'Content-Type': 'application/json',\n        },\n      });\n      const response = await request.json();\n\n      return response;\n    } catch (error) {\n      console.error(error);\n    }\n  }\n}\n\nexport const ApiService = new API();\n"]}

package/dist/collection/components/my-colorbox/my-colorbox.js

@@ -1,5 +1,6 @@
 import { h } from '@stencil/core';
 import { setDataLayer } from '../../gtmUtils';
+import { APIURL, accessToken } from '../api';
 export class MyColorBox {
   constructor() {
     this.colorCheck = () => {
@@ -29,10 +30,15 @@ export class MyColorBox {
     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)));
   }
@@ -150,6 +156,26 @@ export class MyColorBox {
         },
         "attribute": "is-category-active",
         "reflect": false
+      },
+      "isImageInsteadHex": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "ColorBoxyIsImageInsteadHex",
+          "resolved": "undefined | { isImageInsteadHex: boolean; bigImage: string; }",
+          "references": {
+            "ColorBoxyIsImageInsteadHex": {
+              "location": "import",
+              "path": "../../types"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
       }
     };
   }

package/dist/collection/components/my-colorbox/my-colorbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"my-colorbox.js","sourceRoot":"","sources":["../../../src/components/my-colorbox/my-colorbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAM9C,MAAM,OAAO,UAAU;;IAUrB,eAAU,GAAG,GAAG,EAAE;MAChB,IAAI,CAAC,YAAY,GAAG,UAAU,CAAC,GAAG,EAAE;QAClC,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;MACL,CAAC,EAAE,IAAI,CAAC,CAAC;IACX,CAAC,CAAC;IAEF,iBAAY,GAAG,GAAG,EAAE;MAClB,IAAI,IAAI,CAAC,YAAY;QAAE,YAAY,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;MACvD,IAAI,CAAC,YAAY,GAAG,SAAS,CAAC;IAChC,CAAC,CAAC;IAEF,gBAAW,GAAG,CAAC,KAAa,EAAE,EAAE;MAC9B,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;IACxC,CAAC,CAAC;;;;;;;;EAEF,MAAM;IACJ,OAAO,CACL,WACE,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,EACrC,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE,EACvC,KAAK,EAAE,gBAAgB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,IAAI,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,EAAE,EACvG,KAAK,EAAE;QACL,UAAU,EAAE,IAAI,CAAC,KAAK;QACtB,MAAM,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,aAAa,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE;OACjF;MAED,WAAK,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,IAAI,CAAO,CACrC,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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-colorbox.js","sourceRoot":"","sources":["../../../src/components/my-colorbox/my-colorbox.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

package/dist/collection/components/my-colorinfo/my-colorinfo.js

@@ -16,6 +16,15 @@ export class MyColorInfo {
     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;
@@ -25,14 +34,13 @@ export class MyColorInfo {
     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())));
   }
   static get is() { return "my-colorinfo"; }
   static get properties() {
@@ -42,7 +50,7 @@ export class MyColorInfo {
         "mutable": false,
         "complexType": {
           "original": "Color",
-          "resolved": "{ hex: string; image: Record<string, Image>; links: Link[]; name: string; position: number; buttonInverse: boolean; textWhite: boolean; id?: number | undefined; category?: Partial<Color> | undefined; number?: string | undefined; Category_id: Color; }",
+          "resolved": "{ hex: string; image: Record<string, Image>; links: Link[]; name: string; position: number; buttonInverse: boolean; textWhite: boolean; id?: number | undefined; category?: Partial<Color> | undefined; number?: string | undefined; Category_id: Color; imageInsteadHex: boolean; bigImage: string; }",
           "references": {
             "Color": {
               "location": "import",

package/dist/collection/components/my-colorinfo/my-colorinfo.js.map

@@ -1 +1 @@
-{"version":3,"file":"my-colorinfo.js","sourceRoot":"","sources":["../../../src/components/my-colorinfo/my-colorinfo.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,YAAY,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AACtF,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAI7C,MAAM,OAAO,WAAW;;IAWtB,gBAAW,GAAG,GAAG,EAAE;;MACjB,IAAI,CAAC,YAAY;QACf,YAAY,CAAC;UACX,KAAK,EAAE,aAAa;UACpB,IAAI,EAAE,IAAI,CAAC,IAAI;UACf,OAAO,EAAE,IAAI,CAAC,OAAO;UACrB,KAAK,EAAE,MAAA,IAAI,CAAC,YAAY,0CAAE,IAAI;SAC/B,CAAC,CAAC;IACP,CAAC,CAAC;IAEF,uBAAkB,GAAG,GAAG,EAAE;MACxB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;IAC3B,CAAC,CAAC;;;;gBAnB6B,IAAI;oBACP,KAAK;;sBAEZ,WAAW;;EAkBhC,MAAM;;IACJ,OAAO,CAAC,GAAG,CAAC,SAAS,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;IAC1C,OAAO,CACL,WACE,KAAK,EAAE,sBAAsB,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC,EAAE,EAAE,EAC7F,KAAK,EAAE;QACL,UAAU,EAAE,IAAI,CAAC,YAAY,CAAC,GAAG;QACjC,QAAQ,EAAE,GAAG,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI;OAC5D;MAEA,IAAI,CAAC,QAAQ,IAAI,WAAK,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,IAAI,CAAC,kBAAkB,EAAE,GAAG,EAAE,YAAY,CAAC,YAAY,IAAI,CAAC,UAAU,EAAE,CAAC,EAAE,GAAG,EAAC,UAAU,GAAG;MAC/I,WACE,KAAK,EAAC,0BAA0B,EAChC,KAAK,EAAE;UACL,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,YAAY,GAAG,EAAE,IAAI,CAAC,CAAC,CAAC,EAAE;SAClF;QAEA,CAAC,IAAI,CAAC,QAAQ,IAAI,WAAK,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,IAAI,CAAC,kBAAkB,EAAE,GAAG,EAAE,YAAY,CAAC,YAAY,IAAI,CAAC,UAAU,EAAE,CAAC,EAAE,GAAG,EAAC,UAAU,GAAG;QAC/I,CAAC,IAAI,CAAC,QAAQ,IAAI,cAAK,IAAI,CAAC,YAAY,CAAC,IAAI,CAAM;QACnD,CAAC,IAAI,CAAC,QAAQ,IAAI,cAAK,IAAI,CAAC,YAAY,CAAC,MAAM,CAAM;QACrD,CAAC,IAAI,CAAC,QAAQ,IAAI,WAAK,KAAK,EAAC,SAAS,GAAO;QAC9C,WAAK,KAAK,EAAC,iCAAiC;UAC1C,WAAK,KAAK,EAAC,uCAAuC,IAC/C,CAAA,MAAA,IAAI,CAAC,YAAY,0CAAE,KAAM,KAAI,WAAK,GAAG,EAAE,GAAG,MAAM,WAAW,IAAI,CAAC,YAAY,CAAC,KAAK,iBAAiB,WAAW,EAAE,EAAE,GAAG,EAAC,aAAa,GAAG,CACnI;UACN,WAAK,KAAK,EAAC,yCAAyC;YAClD;cACG,CAAC,IAAI,CAAC,QAAQ,IAAI,wBAAe;cACjC,IAAI,CAAC,QAAQ,IAAI,cAAK,MAAA,IAAI,CAAC,YAAY,0CAAE,IAAI,CAAM;;cAAE,aAAI,IAAI,CAAC,OAAO,CAAK,CACvE;YAEL,IAAI,CAAC,QAAQ,IAAI,WAAK,KAAK,EAAE,SAAS,GAAQ;YAC9C,IAAI,CAAC,YAAY,KAAI,MAAA,IAAI,CAAC,YAAY,CAAC,KAAK,0CAAE,IAAI,CAAC,CAAC,IAAU,EAAE,EAAE,CAAC,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,MAAK,IAAI,CAAC,IAAI,CAAC,CAAA,IAAI,CAC/F,SACE,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,KAAK,EAAE,GAAG,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,EAC5D,MAAM,EAAC,QAAQ,EACf,IAAI,EAAE,MAAA,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,YAAY,CAAC,KAAK,0CAAE,IAAI,CAAC,CAAC,IAAU,EAAE,EAAE,CAAC,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,MAAK,IAAI,CAAC,IAAI,CAAC,0CAAE,IAAI,+BAGlF,CACL,CACG,CACF,CACF;MACN,WAAK,KAAK,EAAC,4BAA4B;QACrC,iBAAW,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,MAAA,IAAI,CAAC,IAAI,0CAAE,MAAM,GAAc;QAAC,GAAG,CACzH,CACF,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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-colorinfo.js","sourceRoot":"","sources":["../../../src/components/my-colorinfo/my-colorinfo.tsx"],"names":[],"mappings":"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","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"]}

package/dist/collection/components/my-modal/my-modal.css

@@ -249,6 +249,8 @@
 }
 .my-modal__wrapper .boxes__box-content__slider {
   width: 60%;
+  min-width: 60%;
+  max-width: 60%;
   position: relative;
 }
 @media (max-width: 1024px) {
@@ -257,6 +259,16 @@
     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;
 }
@@ -324,7 +336,7 @@
   font-size: 16px;
   box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.1);
   border-radius: 22.5px;
-  padding: 15px 30px;
+  padding: 12px 30px;
   color: #232323;
   text-decoration: none;
   display: block;
@@ -338,6 +350,16 @@
   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;

package/dist/collection/components/my-modal/my-modal.js

@@ -233,8 +233,10 @@ export class MyModal {
   }
   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;
@@ -251,7 +253,10 @@ export class MyModal {
               }),
               ((_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();

package/dist/collection/components/my-modal/my-modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"my-modal.js","sourceRoot":"","sources":["../../../src/components/my-modal/my-modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Method, Element, Prop, Event, EventEmitter, h, State, getAssetPath, Listen, Watch } from '@stencil/core';\nimport { APIURL, ApiService, accessToken } from '../api';\nimport { setDataLayer } from '../../gtmUtils';\nimport { Color, PaginationData, Product, ProductCategoryRelation, ProductShopRelation } from '../../types';\nimport { fetchCategoryColorsQuery, fetchColorByNumber, fetchProductColorsQuery, limit } from '../api/services';\n\ndeclare global {\n  interface Window {\n    dataLayer: Record<string, any>[];\n  }\n}\n\n@Component({\n  tag: 'my-modal',\n  styleUrl: 'my-modal.scss',\n  assetsDirs: ['assets'],\n})\nexport class MyModal {\n  private boxDesktopWidth = 130;\n  private boxMobileWidth = 85;\n  private desktopPadding = 75;\n  private mobilePadding = 35;\n  private mediumBreakpoint = 1024;\n  private colorTimerInterval: ReturnType<typeof setInterval> | undefined;\n\n  @Event({ bubbles: true, composed: true }) clearSearchText: EventEmitter;\n  @Element() modalEl: HTMLElement;\n\n  @Prop() shop: string;\n  @Prop() product: string;\n  @Prop() closeImage = 'close.png';\n  @Prop() arrowDown = 'arrow_down.png';\n\n  @State() chunksNum = 12;\n  @State() data: Product | null = null;\n  @State() preloader = false;\n  @State() loading = false;\n  @State() colors: PaginationData<Color> | null = null;\n  @State() currentColor: Color | null = null;\n  @State() currentIndex: number | null = null;\n  @State() infoBoxWidth: number | null = null;\n  @State() boxWidth: number = this.boxDesktopWidth; // box width with gap\n  @State() padding: number = this.desktopPadding;\n  @State() isMobile: boolean = false;\n  @State() showRange: boolean = false;\n  @State() colorCategories: string[] | null = null;\n  @State() selectedCategory: any = null;\n  @State() page = 1;\n\n  @Watch('chunksNum')\n  setInfoBoxWidth(newValue: number) {\n    this.infoBoxWidth = newValue * this.boxWidth;\n  }\n\n  @Watch('data')\n  watchPropHandler(newValue: Product) {\n    if (newValue.Category.length > 0) {\n      this.showRange = true;\n      this.handleCategoryClick(newValue.Category[0].Category_id.id);\n    } else {\n      this.fetchProductColors(String(newValue.id));\n    }\n  }\n\n  private clearInterval = () => {\n    this.colorTimerInterval && clearInterval(this.colorTimerInterval);\n    this.colorTimerInterval = undefined;\n  };\n\n  private colorTimer = () => {\n    if (this.currentColor && this.currentColor.id) {\n      this.colorTimerInterval = setInterval(() => {\n        this.currentColor?.name &&\n          setDataLayer({\n            event: 'ColorTimer',\n            shop: this.shop,\n            product: this.product,\n            color: this.currentColor?.name,\n            timer: '10',\n          });\n      }, 10000);\n    } else {\n      this.clearInterval();\n    }\n  };\n\n  @Method()\n  async open() {\n    this.modalEl.style.display = 'block';\n  }\n  @Event() close: EventEmitter;\n  closeModalHandler() {\n    this.close.emit();\n  }\n\n  @Event() readyToCLose: EventEmitter;\n  handleReadyToClose(value: boolean) {\n    this.readyToCLose.emit({ observable: value });\n  }\n\n  @Listen('closeInfoBox')\n  closeInfoBoxHandler() {\n    this.currentColor = null;\n    this.currentIndex = null;\n  }\n\n  private chunks = (xs: Color[], y: Color[][] = []): Color[][] => {\n    return xs.length === 0 ? y : this.chunks(xs.slice(this.chunksNum), y.concat([xs.slice(0, this.chunksNum)]));\n  };\n\n  private calculateBoxCount = () => {\n    const modalWidth = this.modalEl.children && this.modalEl.children[0] && this.modalEl.children[0]?.clientWidth - this.padding;\n    const boxWidth = this.boxWidth;\n\n    const calc = Math.floor(modalWidth / boxWidth);\n\n    const boxesCount = calc;\n\n    if (!this.preloader) this.chunksNum = boxesCount;\n  };\n\n  private displayForMobile = () => {\n    if (window.innerWidth < this.mediumBreakpoint) {\n      this.boxWidth = this.boxMobileWidth;\n      this.padding = this.mobilePadding;\n      this.isMobile = true;\n    } else {\n      this.isMobile = false;\n      this.boxWidth = this.boxDesktopWidth;\n      this.padding = this.desktopPadding;\n    }\n  };\n\n  @Listen('resize', { target: 'window' })\n  handleResize() {\n    this.calculateBoxCount();\n    this.displayForMobile();\n  }\n\n  private fetchProductData = async () => {\n    try {\n      const shopResponse = await ApiService.getData(`items/Shop?filter[name][_eq]=${this.shop}`);\n      const shop = shopResponse?.data[0];\n      if (shop.id) {\n        const response = await ApiService.getData(`items/Product?filter[name][_eq]=${this.product}&fields=*,images.*,Shop.*,Category.*.*.*.*`);\n        const product = response?.data[0];\n\n        if (product) {\n          if (product.Shop.find((s: ProductShopRelation) => s.Shop_id === shop.id)) {\n            this.data = {\n              ...response.data[0],\n              id: response.data[0].id,\n            };\n          } else {\n            return null;\n          }\n        }\n      }\n    } catch (error) {\n      console.error(error);\n    } finally {\n      this.preloader = false;\n    }\n  };\n\n  private fetchProductColors = async (id: string, page?: number) => {\n    this.loading = true;\n\n    try {\n      const response = await ApiService.getData(`items/Color?${fetchProductColorsQuery(id, page)}`);\n\n      if (response) {\n        this.colors = {\n          list:\n            response &&\n            response.data &&\n            response.data.map((item: Color) => ({\n              ...item,\n            })),\n          pagination: response.meta,\n        };\n      }\n    } catch (error) {\n      console.error(error);\n    } finally {\n      this.loading = false;\n    }\n  };\n\n  private fetchCategoryColors = async (id: number, page?: number) => {\n    this.loading = true;\n\n    try {\n      const response = await ApiService.getData(`items/Color?${fetchCategoryColorsQuery(id, page)}`);\n\n      if (response) {\n        this.colors = {\n          list:\n            response &&\n            response.data &&\n            response.data.map((item: Color) => ({\n              ...item,\n            })),\n          pagination: response.meta,\n        };\n      }\n    } catch (error) {\n      console.error(error);\n    } finally {\n      this.loading = false;\n    }\n  };\n\n  @Listen('searchColors')\n  async searchColorsHandler(event: CustomEvent) {\n    this.loading = true;\n    this.currentColor = null;\n    // if search is empty set to first category to not showing whole product colors\n    if (event.detail === '') {\n      this.handleCategoryClick(this.selectedCategory);\n      this.loading = true;\n    }\n\n    try {\n      if (this.data && this.data.id && event.detail !== '') {\n        const response = await ApiService.getData(`items/Color?${fetchColorByNumber(Number(this.selectedCategory), event.detail)}`);\n        if (response) {\n          this.colors = {\n            list:\n              (response &&\n                response.data &&\n                response.data.map((item: Color) => ({\n                  ...item,\n                }))) ||\n              [],\n            pagination: response.meta,\n          };\n        }\n      }\n    } catch (error) {\n      console.error(error);\n    } finally {\n      this.loading = false;\n    }\n  }\n\n  private onPage = (page: number) => {\n    if (this.data) {\n      if (this.selectedCategory) {\n        this.fetchCategoryColors(this.selectedCategory, page);\n      } else {\n        this.fetchProductColors(String(this.data.id), page);\n      }\n    }\n\n    this.page = page;\n    this.currentColor = null;\n    this.currentIndex = null;\n  };\n\n  componentWillLoad() {\n    this.preloader = true;\n    this.fetchProductData();\n  }\n\n  componentWillRender() {\n    this.displayForMobile();\n    this.calculateBoxCount();\n    this.colorTimer();\n  }\n\n  private handleCategoryClick = (color?: number) => {\n    if (this.selectedCategory && color && this.selectedCategory === color && !this.showRange) {\n      this.data && this.fetchProductColors(String(this.data.id));\n      this.selectedCategory = null;\n    } else {\n      color && this.fetchCategoryColors(color);\n      this.selectedCategory = color;\n    }\n    this.currentColor = null;\n    this.clearSearchText.emit();\n  };\n\n  render() {\n    console.log(this.colors);\n    return (\n      <div class={`my-modal`} onMouseEnter={() => this.handleReadyToClose(false)} onMouseLeave={() => this.handleReadyToClose(true)}>\n        {this.preloader && (\n          <div class={'loader'}>\n            <my-loader></my-loader>\n          </div>\n        )}\n        {!this.preloader && (\n          <button class=\"my-modal__close\" onClick={() => this.closeModalHandler()}>\n            <img src={getAssetPath(`./assets/${this.closeImage}`)} alt=\"closebtn\" />\n          </button>\n        )}\n        {!this.preloader && this.data && this.data.modalLogo && <img src={`${APIURL}/assets/${this.data?.modalLogo}?access_token=${accessToken}`} alt=\"modal-logo\" />}\n        {!this.preloader && this.data && (\n          <p class=\"my-modal__see-more\">\n            {this.data?.modalDescription}\n            {/* <img src={getAssetPath(`./assets/${this.arrowDown}`)} alt=\"arrow_down\" /> */}\n          </p>\n        )}\n        {this.showRange && (\n          <div class={'categories'}>\n            {this.data && <my-search productId={Number(this.data?.id)} isMobile={this.isMobile}></my-search>}\n\n            <div class={'categories__container'} style={{ maxWidth: `${this.infoBoxWidth}px` }}>\n              {this.data?.Category.map((c: ProductCategoryRelation) => (\n                <my-colorbox\n                  key={c.id}\n                  onClick={() => this.handleCategoryClick(c.Category_id.id)}\n                  color={c.Category_id.hex}\n                  name={c.Category_id.category_name}\n                  shop={this.shop}\n                  product={this.product}\n                  isCategoryActive={this.selectedCategory === c.Category_id.id}\n                ></my-colorbox>\n              ))}\n            </div>\n            {this.isMobile && (\n              <div class={'categories__slide-information'} style={{ width: `${this.infoBoxWidth}px` }}>\n                <span>Przewiń w lewo</span>\n                <span>Przewiń w prawo</span>\n              </div>\n            )}\n          </div>\n        )}\n        <div class={'my-modal__wrapper'}>\n          {this.loading && <my-loader></my-loader>}\n          {!this.loading && this.colors && (\n            <div class={'container_boxes'}>\n              {this.colors.list.length > 0 ? (\n                this.chunks(this.colors.list).map((color: Color[], index: number) => {\n                  return (\n                    <div key={index} class=\"boxes\">\n                      <div class=\"boxes__list\">\n                        {color.map((c: Color) => (\n                          <my-colorbox\n                            key={c.id}\n                            onClick={() => [\n                              this.currentColor?.id ? (this.currentColor?.id === c.id ? (this.currentColor = null) : (this.currentColor = c)) : (this.currentColor = c),\n                              (this.currentIndex = index),\n                              setDataLayer({\n                                event: 'ColorClick',\n                                shop: this.shop,\n                                product: this.product,\n                                color: c.name,\n                              }),\n                              this.currentColor?.id && this.clearInterval(),\n                            ]}\n                            color={c.hex}\n                            name={c.name}\n                            isActive={this.currentColor?.id === c.id}\n                            shop={this.shop}\n                            product={this.product}\n                          ></my-colorbox>\n                        ))}\n                      </div>\n\n                      {this.currentColor?.id && index === this.currentIndex && (\n                        <my-colorinfo\n                          currentColor={this.currentColor}\n                          shop={this.shop}\n                          product={this.product}\n                          data={this.data}\n                          isMobile={this.isMobile}\n                          infoBoxWidth={this.infoBoxWidth}\n                        ></my-colorinfo>\n                      )}\n                    </div>\n                  );\n                })\n              ) : (\n                <p>Brak wyników</p>\n              )}\n              {this.colors.pagination.filter_count > limit && (\n                <div class={'pagination'}>\n                  {Array.from({ length: Math.ceil(this.colors.pagination.filter_count / limit) }).map((_, i) => (\n                    <span\n                      class={i + 1 === this.page ? 'current' : ''}\n                      onClick={e => {\n                        e.preventDefault();\n                        this.onPage(i + 1);\n                      }}\n                      key={`#${i + 1}`}\n                    >\n                      {i + 1}\n                    </span>\n                  ))}\n                </div>\n              )}\n            </div>\n          )}\n        </div>\n        {!this.preloader && this.isMobile && (\n          <button class=\"button\" onClick={() => this.closeModalHandler()}>\n            Zamknij\n          </button>\n        )}\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"my-modal.js","sourceRoot":"","sources":["../../../src/components/my-modal/my-modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Method, Element, Prop, Event, EventEmitter, h, State, getAssetPath, Listen, Watch } from '@stencil/core';\nimport { APIURL, ApiService, accessToken } from '../api';\nimport { setDataLayer } from '../../gtmUtils';\nimport { Color, PaginationData, Product, ProductCategoryRelation, ProductShopRelation } from '../../types';\nimport { fetchCategoryColorsQuery, fetchColorByNumber, fetchProductColorsQuery, limit } from '../api/services';\n\ndeclare global {\n  interface Window {\n    dataLayer: Record<string, any>[];\n  }\n}\n\n@Component({\n  tag: 'my-modal',\n  styleUrl: 'my-modal.scss',\n  assetsDirs: ['assets'],\n})\nexport class MyModal {\n  private boxDesktopWidth = 130;\n  private boxMobileWidth = 85;\n  private desktopPadding = 75;\n  private mobilePadding = 35;\n  private mediumBreakpoint = 1024;\n  private colorTimerInterval: ReturnType<typeof setInterval> | undefined;\n\n  @Event({ bubbles: true, composed: true }) clearSearchText: EventEmitter;\n  @Element() modalEl: HTMLElement;\n\n  @Prop() shop: string;\n  @Prop() product: string;\n  @Prop() closeImage = 'close.png';\n  @Prop() arrowDown = 'arrow_down.png';\n\n  @State() chunksNum = 12;\n  @State() data: Product | null = null;\n  @State() preloader = false;\n  @State() loading = false;\n  @State() colors: PaginationData<Color> | null = null;\n  @State() currentColor: Color | null = null;\n  @State() currentIndex: number | null = null;\n  @State() infoBoxWidth: number | null = null;\n  @State() boxWidth: number = this.boxDesktopWidth; // box width with gap\n  @State() padding: number = this.desktopPadding;\n  @State() isMobile: boolean = false;\n  @State() showRange: boolean = false;\n  @State() colorCategories: string[] | null = null;\n  @State() selectedCategory: any = null;\n  @State() page = 1;\n\n  @Watch('chunksNum')\n  setInfoBoxWidth(newValue: number) {\n    this.infoBoxWidth = newValue * this.boxWidth;\n  }\n\n  @Watch('data')\n  watchPropHandler(newValue: Product) {\n    if (newValue.Category.length > 0) {\n      this.showRange = true;\n      this.handleCategoryClick(newValue.Category[0].Category_id.id);\n    } else {\n      this.fetchProductColors(String(newValue.id));\n    }\n  }\n\n  private clearInterval = () => {\n    this.colorTimerInterval && clearInterval(this.colorTimerInterval);\n    this.colorTimerInterval = undefined;\n  };\n\n  private colorTimer = () => {\n    if (this.currentColor && this.currentColor.id) {\n      this.colorTimerInterval = setInterval(() => {\n        this.currentColor?.name &&\n          setDataLayer({\n            event: 'ColorTimer',\n            shop: this.shop,\n            product: this.product,\n            color: this.currentColor?.name,\n            timer: '10',\n          });\n      }, 10000);\n    } else {\n      this.clearInterval();\n    }\n  };\n\n  @Method()\n  async open() {\n    this.modalEl.style.display = 'block';\n  }\n  @Event() close: EventEmitter;\n  closeModalHandler() {\n    this.close.emit();\n  }\n\n  @Event() readyToCLose: EventEmitter;\n  handleReadyToClose(value: boolean) {\n    this.readyToCLose.emit({ observable: value });\n  }\n\n  @Listen('closeInfoBox')\n  closeInfoBoxHandler() {\n    this.currentColor = null;\n    this.currentIndex = null;\n  }\n\n  private chunks = (xs: Color[], y: Color[][] = []): Color[][] => {\n    return xs.length === 0 ? y : this.chunks(xs.slice(this.chunksNum), y.concat([xs.slice(0, this.chunksNum)]));\n  };\n\n  private calculateBoxCount = () => {\n    const modalWidth = this.modalEl.children && this.modalEl.children[0] && this.modalEl.children[0]?.clientWidth - this.padding;\n    const boxWidth = this.boxWidth;\n\n    const calc = Math.floor(modalWidth / boxWidth);\n\n    const boxesCount = calc;\n\n    if (!this.preloader) this.chunksNum = boxesCount;\n  };\n\n  private displayForMobile = () => {\n    if (window.innerWidth < this.mediumBreakpoint) {\n      this.boxWidth = this.boxMobileWidth;\n      this.padding = this.mobilePadding;\n      this.isMobile = true;\n    } else {\n      this.isMobile = false;\n      this.boxWidth = this.boxDesktopWidth;\n      this.padding = this.desktopPadding;\n    }\n  };\n\n  @Listen('resize', { target: 'window' })\n  handleResize() {\n    this.calculateBoxCount();\n    this.displayForMobile();\n  }\n\n  private fetchProductData = async () => {\n    try {\n      const shopResponse = await ApiService.getData(`items/Shop?filter[name][_eq]=${this.shop}`);\n      const shop = shopResponse?.data[0];\n      if (shop.id) {\n        const response = await ApiService.getData(`items/Product?filter[name][_eq]=${this.product}&fields=*,images.*,Shop.*,Category.*.*.*.*`);\n        const product = response?.data[0];\n\n        if (product) {\n          if (product.Shop.find((s: ProductShopRelation) => s.Shop_id === shop.id)) {\n            this.data = {\n              ...response.data[0],\n              id: response.data[0].id,\n            };\n          } else {\n            return null;\n          }\n        }\n      }\n    } catch (error) {\n      console.error(error);\n    } finally {\n      this.preloader = false;\n    }\n  };\n\n  private fetchProductColors = async (id: string, page?: number) => {\n    this.loading = true;\n\n    try {\n      const response = await ApiService.getData(`items/Color?${fetchProductColorsQuery(id, page)}`);\n\n      if (response) {\n        this.colors = {\n          list:\n            response &&\n            response.data &&\n            response.data.map((item: Color) => ({\n              ...item,\n            })),\n          pagination: response.meta,\n        };\n      }\n    } catch (error) {\n      console.error(error);\n    } finally {\n      this.loading = false;\n    }\n  };\n\n  private fetchCategoryColors = async (id: number, page?: number) => {\n    this.loading = true;\n\n    try {\n      const response = await ApiService.getData(`items/Color?${fetchCategoryColorsQuery(id, page)}`);\n\n      if (response) {\n        this.colors = {\n          list:\n            response &&\n            response.data &&\n            response.data.map((item: Color) => ({\n              ...item,\n            })),\n          pagination: response.meta,\n        };\n      }\n    } catch (error) {\n      console.error(error);\n    } finally {\n      this.loading = false;\n    }\n  };\n\n  @Listen('searchColors')\n  async searchColorsHandler(event: CustomEvent) {\n    this.loading = true;\n    this.currentColor = null;\n    // if search is empty set to first category to not showing whole product colors\n    if (event.detail === '') {\n      this.handleCategoryClick(this.selectedCategory);\n      this.loading = true;\n    }\n\n    try {\n      if (this.data && this.data.id && event.detail !== '') {\n        const response = await ApiService.getData(`items/Color?${fetchColorByNumber(Number(this.selectedCategory), event.detail)}`);\n        if (response) {\n          this.colors = {\n            list:\n              (response &&\n                response.data &&\n                response.data.map((item: Color) => ({\n                  ...item,\n                }))) ||\n              [],\n            pagination: response.meta,\n          };\n        }\n      }\n    } catch (error) {\n      console.error(error);\n    } finally {\n      this.loading = false;\n    }\n  }\n\n  private onPage = (page: number) => {\n    if (this.data) {\n      if (this.selectedCategory) {\n        this.fetchCategoryColors(this.selectedCategory, page);\n      } else {\n        this.fetchProductColors(String(this.data.id), page);\n      }\n    }\n\n    this.page = page;\n    this.currentColor = null;\n    this.currentIndex = null;\n  };\n\n  componentWillLoad() {\n    this.preloader = true;\n    this.fetchProductData();\n  }\n\n  componentWillRender() {\n    this.displayForMobile();\n    this.calculateBoxCount();\n    this.colorTimer();\n  }\n\n  private handleCategoryClick = (color?: number) => {\n    if (this.selectedCategory && color && this.selectedCategory === color && !this.showRange) {\n      this.data && this.fetchProductColors(String(this.data.id));\n      this.selectedCategory = null;\n    } else {\n      color && this.fetchCategoryColors(color);\n      this.selectedCategory = color;\n    }\n    this.currentColor = null;\n    this.clearSearchText.emit();\n  };\n\n  render() {\n    return (\n      <div class={`my-modal`} onMouseEnter={() => this.handleReadyToClose(false)} onMouseLeave={() => this.handleReadyToClose(true)}>\n        {this.preloader && (\n          <div class={'loader'}>\n            <my-loader></my-loader>\n          </div>\n        )}\n        {!this.preloader && (\n          <button class=\"my-modal__close\" onClick={() => this.closeModalHandler()}>\n            <img src={getAssetPath(`./assets/${this.closeImage}`)} alt=\"closebtn\" />\n          </button>\n        )}\n        {!this.preloader && this.data && this.data.modalLogo && <img src={`${APIURL}/assets/${this.data?.modalLogo}?access_token=${accessToken}`} alt=\"modal-logo\" />}\n        {!this.preloader && this.data && (\n          <p class=\"my-modal__see-more\">\n            {this.data?.modalDescription}\n            {/* <img src={getAssetPath(`./assets/${this.arrowDown}`)} alt=\"arrow_down\" /> */}\n          </p>\n        )}\n        {this.showRange && (\n          <div class={'categories'}>\n            {this.data && <my-search productId={Number(this.data?.id)} isMobile={this.isMobile}></my-search>}\n\n            <div class={'categories__container'} style={{ maxWidth: `${this.infoBoxWidth}px` }}>\n              {this.data?.Category.map((c: ProductCategoryRelation) => (\n                <my-colorbox\n                  key={c.id}\n                  onClick={() => this.handleCategoryClick(c.Category_id.id)}\n                  color={c.Category_id.hex}\n                  name={c.Category_id.category_name}\n                  shop={this.shop}\n                  product={this.product}\n                  isCategoryActive={this.selectedCategory === c.Category_id.id}\n                  isImageInsteadHex={{\n                    isImageInsteadHex: c?.imageInsteadHex || false,\n                    bigImage: c?.bigImage || '',\n                  }}\n                ></my-colorbox>\n              ))}\n            </div>\n            {this.isMobile && (\n              <div class={'categories__slide-information'} style={{ width: `${this.infoBoxWidth}px` }}>\n                <span>Przewiń w lewo</span>\n                <span>Przewiń w prawo</span>\n              </div>\n            )}\n          </div>\n        )}\n        <div class={'my-modal__wrapper'}>\n          {this.loading && <my-loader></my-loader>}\n          {!this.loading && this.colors && (\n            <div class={'container_boxes'}>\n              {this.colors.list.length > 0 ? (\n                this.chunks(this.colors.list).map((color: Color[], index: number) => {\n                  return (\n                    <div key={index} class=\"boxes\">\n                      <div class=\"boxes__list\">\n                        {color.map((c: Color) => (\n                          <my-colorbox\n                            key={c.id}\n                            onClick={() => [\n                              this.currentColor?.id ? (this.currentColor?.id === c.id ? (this.currentColor = null) : (this.currentColor = c)) : (this.currentColor = c),\n                              (this.currentIndex = index),\n                              setDataLayer({\n                                event: 'ColorClick',\n                                shop: this.shop,\n                                product: this.product,\n                                color: c.name,\n                              }),\n                              this.currentColor?.id && this.clearInterval(),\n                            ]}\n                            color={c.hex}\n                            name={c.name}\n                            isActive={this.currentColor?.id === c.id}\n                            shop={this.shop}\n                            product={this.product}\n                            isImageInsteadHex={{\n                              isImageInsteadHex: c.imageInsteadHex,\n                              bigImage: c.bigImage,\n                            }}\n                          ></my-colorbox>\n                        ))}\n                      </div>\n\n                      {this.currentColor?.id && index === this.currentIndex && (\n                        <my-colorinfo\n                          currentColor={this.currentColor}\n                          shop={this.shop}\n                          product={this.product}\n                          data={this.data}\n                          isMobile={this.isMobile}\n                          infoBoxWidth={this.infoBoxWidth}\n                        ></my-colorinfo>\n                      )}\n                    </div>\n                  );\n                })\n              ) : (\n                <p>Brak wyników</p>\n              )}\n              {this.colors.pagination.filter_count > limit && (\n                <div class={'pagination'}>\n                  {Array.from({ length: Math.ceil(this.colors.pagination.filter_count / limit) }).map((_, i) => (\n                    <span\n                      class={i + 1 === this.page ? 'current' : ''}\n                      onClick={e => {\n                        e.preventDefault();\n                        this.onPage(i + 1);\n                      }}\n                      key={`#${i + 1}`}\n                    >\n                      {i + 1}\n                    </span>\n                  ))}\n                </div>\n              )}\n            </div>\n          )}\n        </div>\n        {!this.preloader && this.isMobile && (\n          <button class=\"button\" onClick={() => this.closeModalHandler()}>\n            Zamknij\n          </button>\n        )}\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"","sourcesContent":["export type Shop = {\n  name: string;\n  date_created: string;\n  date_updated: string;\n  id: number;\n  products: number[];\n  sort: null;\n  status: string;\n};\n\nexport type ProductShopRelation = {\n  Product_id: number;\n  Shop_id: number;\n  id: number;\n};\n\nexport type ProductCategoryRelation = {\n  Category_id: Category;\n  Product_id: Product;\n  id: number;\n};\n\nexport type Color = {\n  hex: string;\n  image: Record<string, Image>;\n  links: Link[];\n  name: string;\n  position: number;\n  buttonInverse: boolean;\n  textWhite: boolean;\n  id?: number;\n  category?: Partial<Color>;\n  number?: string;\n  Category_id: Color;\n};\n\nexport type Category = {\n  category_name: string;\n  hex: string;\n  id: number;\n  name: string;\n};\n\nexport type Product = {\n  colors?: Color[];\n  modalDescription: string;\n  modalLogo: string;\n  modalName: string;\n  name: string;\n  Shop: ProductShopRelation[];\n  useColorImage: boolean;\n  images: any;\n  id?: string;\n  Category: ProductCategoryRelation[];\n};\n\nexport type Image = {\n  id: number;\n  directus_files_id: string;\n};\n\nexport type Link = {\n  id: number;\n  path: string;\n  shop: string;\n};\n\nexport type PaginationData<Model> = {\n  list: Model[];\n  pagination: Pagination;\n};\n\nexport type Pagination = {\n  total_count: number;\n  filter_count: number;\n};\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"","sourcesContent":["export type Shop = {\n  name: string;\n  date_created: string;\n  date_updated: string;\n  id: number;\n  products: number[];\n  sort: null;\n  status: string;\n};\n\nexport type ProductShopRelation = {\n  Product_id: number;\n  Shop_id: number;\n  id: number;\n};\n\nexport type ProductCategoryRelation = {\n  Category_id: Category;\n  Product_id: Product;\n  id: number;\n  imageInsteadHex?: boolean;\n  bigImage?: string;\n};\n\nexport type Color = {\n  hex: string;\n  image: Record<string, Image>;\n  links: Link[];\n  name: string;\n  position: number;\n  buttonInverse: boolean;\n  textWhite: boolean;\n  id?: number;\n  category?: Partial<Color>;\n  number?: string;\n  Category_id: Color;\n  imageInsteadHex: boolean;\n  bigImage: string;\n};\n\nexport type Category = {\n  category_name: string;\n  hex: string;\n  id: number;\n  name: string;\n};\n\nexport type Product = {\n  colors?: Color[];\n  modalDescription: string;\n  modalLogo: string;\n  modalName: string;\n  name: string;\n  Shop: ProductShopRelation[];\n  useColorImage: boolean;\n  images: any;\n  id?: string;\n  Category: ProductCategoryRelation[];\n};\n\nexport type Image = {\n  id: number;\n  directus_files_id: string;\n};\n\nexport type Link = {\n  id: number;\n  path: string;\n  shop: string;\n};\n\nexport type PaginationData<Model> = {\n  list: Model[];\n  pagination: Pagination;\n};\n\nexport type Pagination = {\n  total_count: number;\n  filter_count: number;\n};\n\nexport type ColorBoxyIsImageInsteadHex = {\n  isImageInsteadHex: boolean;\n  bigImage: string;\n};\n"]}