@ppg_pl/pallete 0.0.6 → 2.0.0

package/dist/cjs/pallete.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-160fcb6c.js');
+const index = require('./index-53e78fc8.js');
 
 /*
  Stencil Client Patch Browser v3.1.0 | MIT Licensed | https://stenciljs.com
@@ -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]}],[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"]}],[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,10 +1,12 @@
-export const APIURL = 'https://pallete-colors-backend.herokuapp.com';
+export const APIURL = 'http://147.135.211.144:8055'; //'https://pallete-colors-backend.herokuapp.com';
+export const accessToken = 'uBKzhiNM4rkdZSe_PQvKJp9pE-DSTmtu';
 class API {
   async getData(ep) {
     try {
-      const request = await fetch(`${APIURL}/api/${ep}`, {
+      const request = await fetch(`${APIURL}/${ep}`, {
         method: 'GET',
         headers: {
+          'Authorization': `Bearer ${accessToken}`,
           'Content-Type': 'application/json',
         },
       });

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,8CAA8C,CAAC;AAErE,MAAM,GAAG;EACP,KAAK,CAAC,OAAO,CAAC,EAAU;IACtB,IAAI;MACF,MAAM,OAAO,GAAG,MAAM,KAAK,CAAC,GAAG,MAAM,QAAQ,EAAE,EAAE,EAAE;QACjD,MAAM,EAAE,KAAK;QAEb,OAAO,EAAE;UACP,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 = 'https://pallete-colors-backend.herokuapp.com';\n\nclass API {\n  async getData(ep: string) {\n    try {\n      const request = await fetch(`${APIURL}/api/${ep}`, {\n        method: 'GET',\n\n        headers: {\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,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"]}

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

@@ -1,82 +1,49 @@
 import qs from 'qs';
+export const limit = 100;
 export const fetchProductColorsQuery = (id, page) => qs.stringify({
-  filters: {
+  fields: ['*', 'products.*'].join(','),
+  filter: {
     products: {
-      id: {
-        $eq: id,
+      Product_id: {
+        _eq: id,
       },
     },
   },
-  sort: ['position:asc'],
-  populate: ['image', 'category', 'links', 'links.shop'],
-  pagination: {
-    page: page || 1,
-    pageSize: 100,
-  },
+  meta: '*',
+  page: page || 1,
+  limit,
 }, {
-  encodeValuesOnly: true, // prettify url
+  encodeValuesOnly: true,
 });
-export const fetchCategoryColorsQuery = (color) => qs.stringify({
-  filters: {
-    category: {
-      id: {
-        $eq: color.id,
+export const fetchCategoryColorsQuery = (id, page) => qs.stringify({
+  fields: ['*', 'Category.*', 'products.*'].join(','),
+  filter: {
+    Category: {
+      Category_id: {
+        _eq: id,
       },
     },
   },
-  sort: ['position:asc'],
-  populate: ['image', 'category', 'links', 'links.shop'],
-  pagination: {
-    page: 1,
-    pageSize: 100,
-  },
+  meta: '*',
+  page: page || 1,
+  limit,
 }, {
-  encodeValuesOnly: true, // prettify url
+  encodeValuesOnly: true,
 });
-export const fetchColorByNumber = (productId, colorNumber) => qs.stringify({
-  filters: {
-    $or: [
-      {
-        $and: [
-          {
-            number: {
-              $contains: colorNumber,
-            },
-          },
-          {
-            products: {
-              id: {
-                $eq: productId,
-              },
-            },
-          },
-        ],
-      },
-      {
-        $and: [
-          {
-            name: {
-              $contains: colorNumber,
-            },
-          },
-          {
-            products: {
-              id: {
-                $eq: productId,
-              },
-            },
-          },
-        ],
+export const fetchColorByNumber = (id, colorNumber) => qs.stringify({
+  fields: ['*', 'Category.*'].join(','),
+  filter: {
+    Category: {
+      Category_id: {
+        _eq: id,
       },
-    ],
-  },
-  sort: ['position:asc'],
-  populate: ['image', 'category', 'product', 'links', 'links.shop'],
-  pagination: {
-    page: 1,
-    pageSize: 100,
+    },
+    number: {
+      _contains: colorNumber,
+    },
   },
+  meta: '*',
 }, {
-  encodeValuesOnly: true, // prettify url
+  encodeValuesOnly: true,
 });
 //# sourceMappingURL=services.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"services.js","sourceRoot":"","sources":["../../../src/components/api/services.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,CAAC;AAGpB,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,EAAU,EAAE,IAAa,EAAE,EAAE,CACnE,EAAE,CAAC,SAAS,CACV;EACE,OAAO,EAAE;IACP,QAAQ,EAAE;MACR,EAAE,EAAE;QACF,GAAG,EAAE,EAAE;OACR;KACF;GACF;EACD,IAAI,EAAE,CAAC,cAAc,CAAC;EACtB,QAAQ,EAAE,CAAC,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,YAAY,CAAC;EACtD,UAAU,EAAE;IACV,IAAI,EAAE,IAAI,IAAI,CAAC;IACf,QAAQ,EAAE,GAAG;GACd;CACF,EACD;EACE,gBAAgB,EAAE,IAAI,EAAE,eAAe;CACxC,CACF,CAAC;AAEJ,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,KAAY,EAAE,EAAE,CACvD,EAAE,CAAC,SAAS,CACV;EACE,OAAO,EAAE;IACP,QAAQ,EAAE;MACR,EAAE,EAAE;QACF,GAAG,EAAE,KAAK,CAAC,EAAE;OACd;KACF;GACF;EACD,IAAI,EAAE,CAAC,cAAc,CAAC;EACtB,QAAQ,EAAE,CAAC,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,YAAY,CAAC;EACtD,UAAU,EAAE;IACV,IAAI,EAAE,CAAC;IACP,QAAQ,EAAE,GAAG;GACd;CACF,EACD;EACE,gBAAgB,EAAE,IAAI,EAAE,eAAe;CACxC,CACF,CAAC;AAEJ,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,SAAiB,EAAE,WAAmB,EAAE,EAAE,CAC3E,EAAE,CAAC,SAAS,CACV;EACE,OAAO,EAAE;IACP,GAAG,EAAE;MACH;QACE,IAAI,EAAE;UACJ;YACE,MAAM,EAAE;cACN,SAAS,EAAE,WAAW;aACvB;WACF;UACD;YACE,QAAQ,EAAE;cACR,EAAE,EAAE;gBACF,GAAG,EAAE,SAAS;eACf;aACF;WACF;SACF;OACF;MACD;QACE,IAAI,EAAE;UACJ;YACE,IAAI,EAAE;cACJ,SAAS,EAAE,WAAW;aACvB;WACF;UACD;YACE,QAAQ,EAAE;cACR,EAAE,EAAE;gBACF,GAAG,EAAE,SAAS;eACf;aACF;WACF;SACF;OACF;KACF;GACF;EACD,IAAI,EAAE,CAAC,cAAc,CAAC;EACtB,QAAQ,EAAE,CAAC,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,YAAY,CAAC;EACjE,UAAU,EAAE;IACV,IAAI,EAAE,CAAC;IACP,QAAQ,EAAE,GAAG;GACd;CACF,EACD;EACE,gBAAgB,EAAE,IAAI,EAAE,eAAe;CACxC,CACF,CAAC","sourcesContent":["import qs from 'qs';\nimport { Color } from '../../types';\n\nexport const fetchProductColorsQuery = (id: string, page?: number) =>\n  qs.stringify(\n    {\n      filters: {\n        products: {\n          id: {\n            $eq: id,\n          },\n        },\n      },\n      sort: ['position:asc'],\n      populate: ['image', 'category', 'links', 'links.shop'],\n      pagination: {\n        page: page || 1,\n        pageSize: 100,\n      },\n    },\n    {\n      encodeValuesOnly: true, // prettify url\n    },\n  );\n\nexport const fetchCategoryColorsQuery = (color: Color) =>\n  qs.stringify(\n    {\n      filters: {\n        category: {\n          id: {\n            $eq: color.id,\n          },\n        },\n      },\n      sort: ['position:asc'],\n      populate: ['image', 'category', 'links', 'links.shop'],\n      pagination: {\n        page: 1,\n        pageSize: 100,\n      },\n    },\n    {\n      encodeValuesOnly: true, // prettify url\n    },\n  );\n\nexport const fetchColorByNumber = (productId: number, colorNumber: string) =>\n  qs.stringify(\n    {\n      filters: {\n        $or: [\n          {\n            $and: [\n              {\n                number: {\n                  $contains: colorNumber,\n                },\n              },\n              {\n                products: {\n                  id: {\n                    $eq: productId,\n                  },\n                },\n              },\n            ],\n          },\n          {\n            $and: [\n              {\n                name: {\n                  $contains: colorNumber,\n                },\n              },\n              {\n                products: {\n                  id: {\n                    $eq: productId,\n                  },\n                },\n              },\n            ],\n          },\n        ],\n      },\n      sort: ['position:asc'],\n      populate: ['image', 'category', 'product', 'links', 'links.shop'],\n      pagination: {\n        page: 1,\n        pageSize: 100,\n      },\n    },\n    {\n      encodeValuesOnly: true, // prettify url\n    },\n  );\n"]}
+{"version":3,"file":"services.js","sourceRoot":"","sources":["../../../src/components/api/services.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,CAAC;AAEpB,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAC;AAEzB,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,EAAU,EAAE,IAAa,EAAE,EAAE,CACnE,EAAE,CAAC,SAAS,CACV;EACE,MAAM,EAAE,CAAC,GAAG,EAAE,YAAY,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;EACrC,MAAM,EAAE;IACN,QAAQ,EAAE;MACR,UAAU,EAAE;QACV,GAAG,EAAE,EAAE;OACR;KACF;GACF;EAED,IAAI,EAAE,GAAG;EACT,IAAI,EAAE,IAAI,IAAI,CAAC;EACf,KAAK;CACN,EACD;EACE,gBAAgB,EAAE,IAAI;CACvB,CACF,CAAC;AAEJ,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,EAAU,EAAE,IAAa,EAAE,EAAE,CACpE,EAAE,CAAC,SAAS,CACV;EACE,MAAM,EAAE,CAAC,GAAG,EAAE,YAAY,EAAE,YAAY,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;EACnD,MAAM,EAAE;IACN,QAAQ,EAAE;MACR,WAAW,EAAE;QACX,GAAG,EAAE,EAAE;OACR;KACF;GACF;EACD,IAAI,EAAE,GAAG;EACT,IAAI,EAAE,IAAI,IAAI,CAAC;EACf,KAAK;CACN,EACD;EACE,gBAAgB,EAAE,IAAI;CACvB,CACF,CAAC;AAEJ,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,EAAU,EAAE,WAAmB,EAAE,EAAE,CACpE,EAAE,CAAC,SAAS,CACV;EACE,MAAM,EAAE,CAAC,GAAG,EAAE,YAAY,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;EACrC,MAAM,EAAE;IACN,QAAQ,EAAE;MACR,WAAW,EAAE;QACX,GAAG,EAAE,EAAE;OACR;KACF;IACD,MAAM,EAAE;MACN,SAAS,EAAE,WAAW;KACvB;GACF;EACD,IAAI,EAAE,GAAG;CACV,EAED;EACE,gBAAgB,EAAE,IAAI;CACvB,CACF,CAAC","sourcesContent":["import qs from 'qs';\n\nexport const limit = 100;\n\nexport const fetchProductColorsQuery = (id: string, page?: number) =>\n  qs.stringify(\n    {\n      fields: ['*', 'products.*'].join(','),\n      filter: {\n        products: {\n          Product_id: {\n            _eq: id,\n          },\n        },\n      },\n\n      meta: '*',\n      page: page || 1,\n      limit,\n    },\n    {\n      encodeValuesOnly: true,\n    },\n  );\n\nexport const fetchCategoryColorsQuery = (id: number, page?: number) =>\n  qs.stringify(\n    {\n      fields: ['*', 'Category.*', 'products.*'].join(','),\n      filter: {\n        Category: {\n          Category_id: {\n            _eq: id,\n          },\n        },\n      },\n      meta: '*',\n      page: page || 1,\n      limit,\n    },\n    {\n      encodeValuesOnly: true,\n    },\n  );\n\nexport const fetchColorByNumber = (id: number, colorNumber: string) =>\n  qs.stringify(\n    {\n      fields: ['*', 'Category.*'].join(','),\n      filter: {\n        Category: {\n          Category_id: {\n            _eq: id,\n          },\n        },\n        number: {\n          _contains: colorNumber,\n        },\n      },\n      meta: '*',\n    },\n\n    {\n      encodeValuesOnly: true,\n    },\n  );\n"]}

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

@@ -1,5 +1,6 @@
 import { h, getAssetPath } from '@stencil/core';
 import { setDataLayer } from '../../gtmUtils';
+import { APIURL, accessToken } from '../api';
 export class MyColorInfo {
   constructor() {
     this.goToProduct = () => {
@@ -24,13 +25,14 @@ export class MyColorInfo {
     this.closeImage = 'close.png';
   }
   render() {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f;
+    console.log('current', this.currentColor);
     return (h("div", { class: `boxes__box-content ${this.currentColor.textWhite ? 'boxes__box-content__white' : ''}`, style: {
         background: 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.data) && h("img", { src: `${(_e = (_d = (_c = (_b = this.currentColor) === null || _b === void 0 ? void 0 : _b.image) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d.attributes) === null || _e === void 0 ? void 0 : _e.formats.thumbnail.url}`, 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, this.currentColor.name), " ", h("p", null, this.product)), this.isMobile && h("div", { class: 'divider' }), this.currentColor && this.currentColor.links.find((link) => { var _a, _b, _c; return ((_c = (_b = (_a = link === null || link === void 0 ? void 0 : link.shop) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.attributes) === null || _c === void 0 ? void 0 : _c.name) === this.shop; }) && (h("a", { onClick: this.goToProduct, class: `${this.currentColor.buttonInverse ? 'inverse' : ''}`, target: "_blank", href: (_f = this === null || this === void 0 ? void 0 : this.currentColor.links.find((link) => { var _a, _b, _c; return ((_c = (_b = (_a = link === null || link === void 0 ? void 0 : link.shop) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.attributes) === null || _c === void 0 ? void 0 : _c.name) === this.shop; })) === null || _f === void 0 ? void 0 : _f.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: (_g = this.data) === null || _g === void 0 ? void 0 : _g.images.data }), ' ')));
+      } }, !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 }), ' ')));
   }
   static get is() { return "my-colorinfo"; }
   static get properties() {
@@ -40,7 +42,7 @@ export class MyColorInfo {
         "mutable": false,
         "complexType": {
           "original": "Color",
-          "resolved": "{ hex: string; image: Record<string, Data<Image>>; links: Link[]; name: string; position: number; buttonInverse: boolean; textWhite: boolean; id?: number | undefined; category?: Data<Partial<Color>> | undefined; number?: string | undefined; }",
+          "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; }",
           "references": {
             "Color": {
               "location": "import",
@@ -94,7 +96,7 @@ export class MyColorInfo {
         "mutable": false,
         "complexType": {
           "original": "Product | null",
-          "resolved": "null | { colors?: Color[] | undefined; modalDescription: string; modalLogo: Record<string, Data<Image>>; modalName: string; name: string; createdAt: string; locale: string; publishedAt: string; shops: Data<Shop>[]; images: Record<string, Data<Image>[]>; id?: string | undefined; categories?: any; }",
+          "resolved": "null | { colors?: Color[] | undefined; modalDescription: string; modalLogo: string; modalName: string; name: string; Shop: ProductShopRelation[]; useColorImage: boolean; images: any; id?: string | undefined; Category: ProductCategoryRelation[]; }",
           "references": {
             "Product": {
               "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":"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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';\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    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.data! && <img src={`${this.currentColor?.image?.data?.attributes?.formats.thumbnail.url}`} 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?.data?.attributes?.name === 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?.data?.attributes?.name === 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.data}></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":"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"]}

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

@@ -2,7 +2,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  height: 100px;
+  height: 190px;
   overflow: hidden;
 }
 

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

@@ -1,7 +1,7 @@
 import { h, getAssetPath } from '@stencil/core';
-import { ApiService } from '../api';
+import { APIURL, ApiService, accessToken } from '../api';
 import { setDataLayer } from '../../gtmUtils';
-import { fetchCategoryColorsQuery, fetchColorByNumber, fetchProductColorsQuery } from '../api/services';
+import { fetchCategoryColorsQuery, fetchColorByNumber, fetchProductColorsQuery, limit } from '../api/services';
 export class MyModal {
   constructor() {
     this.boxDesktopWidth = 130;
@@ -57,10 +57,18 @@ export class MyModal {
     };
     this.fetchProductData = async () => {
       try {
-        const response = await ApiService.getData(`products?populate[0]=modalLogo&populate[1]=images&populate[2]=shops&populate[3]=categories&filters[name][$contains]=${this.product}`);
-        if (response) {
-          if (response.data[0].attributes.shops.data.find((shop) => shop.attributes.name === this.shop).id) {
-            this.data = Object.assign(Object.assign({}, response.data[0].attributes), { id: response.data[0].id });
+        const shopResponse = await ApiService.getData(`items/Shop?filter[name][_eq]=${this.shop}`);
+        const shop = shopResponse === null || shopResponse === void 0 ? void 0 : shopResponse.data[0];
+        if (shop.id) {
+          const response = await ApiService.getData(`items/Product?filter[name][_eq]=${this.product}&fields=*,images.*,Shop.*,Category.*.*.*.*`);
+          const product = response === null || response === void 0 ? void 0 : response.data[0];
+          if (product) {
+            if (product.Shop.find((s) => s.Shop_id === shop.id)) {
+              this.data = Object.assign(Object.assign({}, response.data[0]), { id: response.data[0].id });
+            }
+            else {
+              return null;
+            }
           }
         }
       }
@@ -71,17 +79,16 @@ export class MyModal {
         this.preloader = false;
       }
     };
-    // TODO:
     this.fetchProductColors = async (id, page) => {
       this.loading = true;
       try {
-        const response = await ApiService.getData(`colors?${fetchProductColorsQuery(id, page)}`);
+        const response = await ApiService.getData(`items/Color?${fetchProductColorsQuery(id, page)}`);
         if (response) {
           this.colors = {
             list: response &&
               response.data &&
-              response.data.map((item) => (Object.assign({ id: item.id }, item.attributes))),
-            pagination: response.meta.pagination,
+              response.data.map((item) => (Object.assign({}, item))),
+            pagination: response.meta,
           };
         }
       }
@@ -92,16 +99,16 @@ export class MyModal {
         this.loading = false;
       }
     };
-    this.fetchCategoryColors = async (color) => {
+    this.fetchCategoryColors = async (id, page) => {
       this.loading = true;
       try {
-        const response = await ApiService.getData(`colors?${fetchCategoryColorsQuery(color)}`);
+        const response = await ApiService.getData(`items/Color?${fetchCategoryColorsQuery(id, page)}`);
         if (response) {
           this.colors = {
             list: response &&
               response.data &&
-              response.data.map((item) => (Object.assign({ id: item.id }, item.attributes))),
-            pagination: response.meta.pagination,
+              response.data.map((item) => (Object.assign({}, item))),
+            pagination: response.meta,
           };
         }
       }
@@ -112,29 +119,21 @@ export class MyModal {
         this.loading = false;
       }
     };
-    // private onIntersection = async (entries: any) => {
-    //   console.log(entries[0]);
-    //   if (entries[0].intersectionRatio === 0) {
-    //     console.log('d');
-    //   }
-    // };
-    // private handleObserve = () => {
-    //   console.log(this.modalEl.shadowRoot);
-    //   const boxesList: any = (this.modalEl as any).querySelector('.my-modal__wrapper');
-    //   console.log(boxesList);
-    //   if (boxesList) {
-    //     this.observer = new IntersectionObserver(this.onIntersection);
-    //     this.observer.observe(boxesList);
-    //   }
-    // };
     this.onPage = (page) => {
-      this.data && this.fetchProductColors(String(this.data.id), page);
+      if (this.data) {
+        if (this.selectedCategory) {
+          this.fetchCategoryColors(this.selectedCategory, page);
+        }
+        else {
+          this.fetchProductColors(String(this.data.id), page);
+        }
+      }
       this.page = page;
       this.currentColor = null;
       this.currentIndex = null;
     };
     this.handleCategoryClick = (color) => {
-      if (this.selectedCategory && color && this.selectedCategory.id === color.id && !this.showRange) {
+      if (this.selectedCategory && color && this.selectedCategory === color && !this.showRange) {
         this.data && this.fetchProductColors(String(this.data.id));
         this.selectedCategory = null;
       }
@@ -143,6 +142,7 @@ export class MyModal {
         this.selectedCategory = color;
       }
       this.currentColor = null;
+      this.clearSearchText.emit();
     };
     this.shop = undefined;
     this.product = undefined;
@@ -168,9 +168,9 @@ export class MyModal {
     this.infoBoxWidth = newValue * this.boxWidth;
   }
   watchPropHandler(newValue) {
-    if (newValue.categories.data.length > 0) {
+    if (newValue.Category.length > 0) {
       this.showRange = true;
-      this.handleCategoryClick(newValue.categories.data[0]);
+      this.handleCategoryClick(newValue.Category[0].Category_id.id);
     }
     else {
       this.fetchProductColors(String(newValue.id));
@@ -194,21 +194,23 @@ export class MyModal {
     this.displayForMobile();
   }
   async searchColorsHandler(event) {
-    var _a;
+    this.loading = true;
+    this.currentColor = null;
     // if search is empty set to first category to not showing whole product colors
     if (event.detail === '') {
-      this.handleCategoryClick((_a = this.data) === null || _a === void 0 ? void 0 : _a.categories.data[0]);
+      this.handleCategoryClick(this.selectedCategory);
+      this.loading = true;
     }
     try {
       if (this.data && this.data.id && event.detail !== '') {
-        this.selectedCategory = null;
-        const response = await ApiService.getData(`colors?${fetchColorByNumber(Number(this.data.id), event.detail)}`);
+        const response = await ApiService.getData(`items/Color?${fetchColorByNumber(Number(this.selectedCategory), event.detail)}`);
         if (response) {
           this.colors = {
-            list: response &&
+            list: (response &&
               response.data &&
-              response.data.map((item) => (Object.assign({ id: item.id }, item.attributes))),
-            pagination: response.meta.pagination,
+              response.data.map((item) => (Object.assign({}, item)))) ||
+              [],
+            pagination: response.meta,
           };
         }
       }
@@ -216,6 +218,9 @@ export class MyModal {
     catch (error) {
       console.error(error);
     }
+    finally {
+      this.loading = false;
+    }
   }
   componentWillLoad() {
     this.preloader = true;
@@ -227,11 +232,9 @@ export class MyModal {
     this.colorTimer();
   }
   render() {
-    var _a, _b, _c, _d, _e, _f, _g;
-    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: `${(_d = (_c = (_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.modalLogo) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.attributes) === null || _d === void 0 ? void 0 : _d.url}`, alt: "modal-logo" }), !this.preloader && (h("p", { class: "my-modal__see-more" }, (_e = this.data) === null || _e === void 0 ? void 0 : _e.modalDescription)), this.showRange && (h("div", { class: 'categories' }, this.data && h("my-search", { productId: Number((_f = this.data) === null || _f === void 0 ? void 0 : _f.id), isMobile: this.isMobile }), h("div", { class: 'categories__container', style: { maxWidth: `${this.infoBoxWidth}px` } }, (_g = this.data) === null || _g === void 0 ? void 0 : _g.categories.data.map((c) => {
-      var _a;
-      return (h("my-colorbox", { key: c.id, onClick: () => this.handleCategoryClick(c), color: c.attributes.hex, name: c.attributes.name, shop: this.shop, product: this.product, isCategoryActive: ((_a = this.selectedCategory) === null || _a === void 0 ? void 0 : _a.id) === c.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) => {
+    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) => {
       var _a;
       return (h("div", { key: index, class: "boxes" }, h("div", { class: "boxes__list" }, color.map((c) => {
         var _a;
@@ -250,10 +253,10 @@ export class MyModal {
             ];
           }, 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 }));
       })), ((_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.pageCount > 1 && (h("div", { class: 'pagination' }, Array.from({ length: this.colors.pagination.pageCount }).map((page, i) => (h("span", { class: i + 1 === this.page ? 'current' : '', onClick: e => {
+    })) : (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();
         this.onPage(i + 1);
-      }, key: `#${i + 1 + page}` }, i + 1)))))))), ' ', !this.preloader && this.isMobile && (h("button", { class: "button", onClick: () => this.closeModalHandler() }, "Zamknij"))));
+      }, key: `#${i + 1}` }, i + 1)))))))), !this.preloader && this.isMobile && (h("button", { class: "button", onClick: () => this.closeModalHandler() }, "Zamknij"))));
   }
   static get is() { return "my-modal"; }
   static get originalStyleUrls() {
@@ -362,6 +365,21 @@ export class MyModal {
   }
   static get events() {
     return [{
+        "method": "clearSearchText",
+        "name": "clearSearchText",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
         "method": "close",
         "name": "close",
         "bubbles": true,