@ppg_pl/pallete 0.0.4 → 0.0.6

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

@@ -0,0 +1,448 @@
+import { h, getAssetPath } from '@stencil/core';
+import { ApiService } from '../api';
+import { setDataLayer } from '../../gtmUtils';
+import { fetchCategoryColorsQuery, fetchColorByNumber, fetchProductColorsQuery } from '../api/services';
+export class MyModal {
+  constructor() {
+    this.boxDesktopWidth = 130;
+    this.boxMobileWidth = 85;
+    this.desktopPadding = 75;
+    this.mobilePadding = 35;
+    this.mediumBreakpoint = 1024;
+    this.clearInterval = () => {
+      this.colorTimerInterval && clearInterval(this.colorTimerInterval);
+      this.colorTimerInterval = undefined;
+    };
+    this.colorTimer = () => {
+      if (this.currentColor && this.currentColor.id) {
+        this.colorTimerInterval = setInterval(() => {
+          var _a, _b;
+          ((_a = this.currentColor) === null || _a === void 0 ? void 0 : _a.name) &&
+            setDataLayer({
+              event: 'ColorTimer',
+              shop: this.shop,
+              product: this.product,
+              color: (_b = this.currentColor) === null || _b === void 0 ? void 0 : _b.name,
+              timer: '10',
+            });
+        }, 10000);
+      }
+      else {
+        this.clearInterval();
+      }
+    };
+    this.chunks = (xs, y = []) => {
+      return xs.length === 0 ? y : this.chunks(xs.slice(this.chunksNum), y.concat([xs.slice(0, this.chunksNum)]));
+    };
+    this.calculateBoxCount = () => {
+      var _a;
+      const modalWidth = this.modalEl.children && this.modalEl.children[0] && ((_a = this.modalEl.children[0]) === null || _a === void 0 ? void 0 : _a.clientWidth) - this.padding;
+      const boxWidth = this.boxWidth;
+      const calc = Math.floor(modalWidth / boxWidth);
+      const boxesCount = calc;
+      if (!this.preloader)
+        this.chunksNum = boxesCount;
+    };
+    this.displayForMobile = () => {
+      if (window.innerWidth < this.mediumBreakpoint) {
+        this.boxWidth = this.boxMobileWidth;
+        this.padding = this.mobilePadding;
+        this.isMobile = true;
+      }
+      else {
+        this.isMobile = false;
+        this.boxWidth = this.boxDesktopWidth;
+        this.padding = this.desktopPadding;
+      }
+    };
+    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 });
+          }
+        }
+      }
+      catch (error) {
+        console.error(error);
+      }
+      finally {
+        this.preloader = false;
+      }
+    };
+    // TODO:
+    this.fetchProductColors = async (id, page) => {
+      this.loading = true;
+      try {
+        const response = await ApiService.getData(`colors?${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,
+          };
+        }
+      }
+      catch (error) {
+        console.error(error);
+      }
+      finally {
+        this.loading = false;
+      }
+    };
+    this.fetchCategoryColors = async (color) => {
+      this.loading = true;
+      try {
+        const response = await ApiService.getData(`colors?${fetchCategoryColorsQuery(color)}`);
+        if (response) {
+          this.colors = {
+            list: response &&
+              response.data &&
+              response.data.map((item) => (Object.assign({ id: item.id }, item.attributes))),
+            pagination: response.meta.pagination,
+          };
+        }
+      }
+      catch (error) {
+        console.error(error);
+      }
+      finally {
+        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);
+      this.page = page;
+      this.currentColor = null;
+      this.currentIndex = null;
+    };
+    this.handleCategoryClick = (color) => {
+      if (this.selectedCategory && color && this.selectedCategory.id === color.id && !this.showRange) {
+        this.data && this.fetchProductColors(String(this.data.id));
+        this.selectedCategory = null;
+      }
+      else {
+        color && this.fetchCategoryColors(color);
+        this.selectedCategory = color;
+      }
+      this.currentColor = null;
+    };
+    this.shop = undefined;
+    this.product = undefined;
+    this.closeImage = 'close.png';
+    this.arrowDown = 'arrow_down.png';
+    this.chunksNum = 12;
+    this.data = null;
+    this.preloader = false;
+    this.loading = false;
+    this.colors = null;
+    this.currentColor = null;
+    this.currentIndex = null;
+    this.infoBoxWidth = null;
+    this.boxWidth = this.boxDesktopWidth;
+    this.padding = this.desktopPadding;
+    this.isMobile = false;
+    this.showRange = false;
+    this.colorCategories = null;
+    this.selectedCategory = null;
+    this.page = 1;
+  }
+  setInfoBoxWidth(newValue) {
+    this.infoBoxWidth = newValue * this.boxWidth;
+  }
+  watchPropHandler(newValue) {
+    if (newValue.categories.data.length > 0) {
+      this.showRange = true;
+      this.handleCategoryClick(newValue.categories.data[0]);
+    }
+    else {
+      this.fetchProductColors(String(newValue.id));
+    }
+  }
+  async open() {
+    this.modalEl.style.display = 'block';
+  }
+  closeModalHandler() {
+    this.close.emit();
+  }
+  handleReadyToClose(value) {
+    this.readyToCLose.emit({ observable: value });
+  }
+  closeInfoBoxHandler() {
+    this.currentColor = null;
+    this.currentIndex = null;
+  }
+  handleResize() {
+    this.calculateBoxCount();
+    this.displayForMobile();
+  }
+  async searchColorsHandler(event) {
+    var _a;
+    // 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]);
+    }
+    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)}`);
+        if (response) {
+          this.colors = {
+            list: response &&
+              response.data &&
+              response.data.map((item) => (Object.assign({ id: item.id }, item.attributes))),
+            pagination: response.meta.pagination,
+          };
+        }
+      }
+    }
+    catch (error) {
+      console.error(error);
+    }
+  }
+  componentWillLoad() {
+    this.preloader = true;
+    this.fetchProductData();
+  }
+  componentWillRender() {
+    this.displayForMobile();
+    this.calculateBoxCount();
+    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;
+      return (h("div", { key: index, class: "boxes" }, h("div", { class: "boxes__list" }, color.map((c) => {
+        var _a;
+        return (h("my-colorbox", { key: c.id, onClick: () => {
+            var _a, _b, _c;
+            return [
+              ((_a = this.currentColor) === null || _a === void 0 ? void 0 : _a.id) ? (((_b = this.currentColor) === null || _b === void 0 ? void 0 : _b.id) === c.id ? (this.currentColor = null) : (this.currentColor = c)) : (this.currentColor = c),
+              (this.currentIndex = index),
+              setDataLayer({
+                event: 'ColorClick',
+                shop: this.shop,
+                product: this.product,
+                color: c.name,
+              }),
+              ((_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 }));
+      })), ((_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 => {
+        e.preventDefault();
+        this.onPage(i + 1);
+      }, key: `#${i + 1 + page}` }, i + 1)))))))), ' ', !this.preloader && this.isMobile && (h("button", { class: "button", onClick: () => this.closeModalHandler() }, "Zamknij"))));
+  }
+  static get is() { return "my-modal"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["my-modal.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["my-modal.css"]
+    };
+  }
+  static get assetsDirs() { return ["assets"]; }
+  static get properties() {
+    return {
+      "shop": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "shop",
+        "reflect": false
+      },
+      "product": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "product",
+        "reflect": false
+      },
+      "closeImage": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "close-image",
+        "reflect": false,
+        "defaultValue": "'close.png'"
+      },
+      "arrowDown": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "arrow-down",
+        "reflect": false,
+        "defaultValue": "'arrow_down.png'"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "chunksNum": {},
+      "data": {},
+      "preloader": {},
+      "loading": {},
+      "colors": {},
+      "currentColor": {},
+      "currentIndex": {},
+      "infoBoxWidth": {},
+      "boxWidth": {},
+      "padding": {},
+      "isMobile": {},
+      "showRange": {},
+      "colorCategories": {},
+      "selectedCategory": {},
+      "page": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "close",
+        "name": "close",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "readyToCLose",
+        "name": "readyToCLose",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "open": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "modalEl"; }
+  static get watchers() {
+    return [{
+        "propName": "chunksNum",
+        "methodName": "setInfoBoxWidth"
+      }, {
+        "propName": "data",
+        "methodName": "watchPropHandler"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "closeInfoBox",
+        "method": "closeInfoBoxHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "resize",
+        "method": "handleResize",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }, {
+        "name": "searchColors",
+        "method": "searchColorsHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}
+//# sourceMappingURL=my-modal.js.map

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

@@ -0,0 +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 { ApiService } from '../api';\nimport { setDataLayer } from '../../gtmUtils';\nimport { Color, Data, PaginationData, Product, Shop } from '../../types';\nimport { fetchCategoryColorsQuery, fetchColorByNumber, fetchProductColorsQuery } 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  // private observer: IntersectionObserver;\n\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.categories.data.length > 0) {\n      this.showRange = true;\n      this.handleCategoryClick(newValue.categories.data[0]);\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 response = await ApiService.getData(\n        `products?populate[0]=modalLogo&populate[1]=images&populate[2]=shops&populate[3]=categories&filters[name][$contains]=${this.product}`,\n      );\n\n      if (response) {\n        if (response.data[0].attributes.shops.data.find((shop: Data<Shop>) => shop.attributes.name === this.shop).id) {\n          this.data = {\n            ...response.data[0].attributes,\n            id: response.data[0].id,\n          };\n        }\n      }\n    } catch (error) {\n      console.error(error);\n    } finally {\n      this.preloader = false;\n    }\n  };\n\n  // TODO:\n\n  private fetchProductColors = async (id: string, page?: number) => {\n    this.loading = true;\n\n    try {\n      const response = await ApiService.getData(`colors?${fetchProductColorsQuery(id, page)}`);\n      if (response) {\n        this.colors = {\n          list:\n            response &&\n            response.data &&\n            response.data.map((item: Data<Color>) => ({\n              id: item.id,\n              ...item.attributes,\n            })),\n          pagination: response.meta.pagination,\n        };\n      }\n    } catch (error) {\n      console.error(error);\n    } finally {\n      this.loading = false;\n    }\n  };\n\n  private fetchCategoryColors = async (color: Color) => {\n    this.loading = true;\n\n    try {\n      const response = await ApiService.getData(`colors?${fetchCategoryColorsQuery(color)}`);\n      if (response) {\n        this.colors = {\n          list:\n            response &&\n            response.data &&\n            response.data.map((item: Data<Color>) => ({\n              id: item.id,\n              ...item.attributes,\n            })),\n          pagination: response.meta.pagination,\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    // if search is empty set to first category to not showing whole product colors\n    if (event.detail === '') {\n      this.handleCategoryClick(this.data?.categories.data[0]);\n    }\n\n    try {\n      if (this.data && this.data.id && event.detail !== '') {\n        this.selectedCategory = null;\n        const response = await ApiService.getData(`colors?${fetchColorByNumber(Number(this.data.id), event.detail)}`);\n        if (response) {\n          this.colors = {\n            list:\n              response &&\n              response.data &&\n              response.data.map((item: Data<Color>) => ({\n                id: item.id,\n                ...item.attributes,\n              })),\n            pagination: response.meta.pagination,\n          };\n        }\n      }\n    } catch (error) {\n      console.error(error);\n    }\n  }\n\n  // private onIntersection = async (entries: any) => {\n  //   console.log(entries[0]);\n  //   if (entries[0].intersectionRatio === 0) {\n  //     console.log('d');\n  //   }\n  // };\n\n  // private handleObserve = () => {\n  //   console.log(this.modalEl.shadowRoot);\n  //   const boxesList: any = (this.modalEl as any).querySelector('.my-modal__wrapper');\n  //   console.log(boxesList);\n  //   if (boxesList) {\n  //     this.observer = new IntersectionObserver(this.onIntersection);\n  //     this.observer.observe(boxesList);\n  //   }\n  // };\n\n  private onPage = (page: number) => {\n    this.data && this.fetchProductColors(String(this.data.id), page);\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?: Color) => {\n    if (this.selectedCategory && color && this.selectedCategory.id === color.id && !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  };\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={`${this.data?.modalLogo?.data?.attributes?.url}`} alt=\"modal-logo\" />}\n        {!this.preloader && (\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?.categories.data.map((c: Color & { attributes: Color }) => (\n                <my-colorbox\n                  key={c.id}\n                  onClick={() => this.handleCategoryClick(c)}\n                  color={c.attributes.hex}\n                  name={c.attributes.name}\n                  shop={this.shop}\n                  product={this.product}\n                  isCategoryActive={this.selectedCategory?.id === c.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.pageCount > 1 && (\n                <div class={'pagination'}>\n                  {Array.from({ length: this.colors.pagination.pageCount }).map((page: any, 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 + page}`}\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/components/my-search/assets/search.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="21px" height="21px" viewBox="0 0 21 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>search (1)</title>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="E_TT-Copy" transform="translate(-670.000000, -275.000000)" fill="#000000" fill-rule="nonzero">
+            <g id="Group-11" transform="translate(240.477268, 115.000000)">
+                <g id="Group-18" transform="translate(38.010142, 143.000000)">
+                    <g id="search-(1)" transform="translate(392.266523, 17.349138)">
+                        <path d="M8.04938507,16.0918365 C9.8370154,16.0918798 11.5735099,15.4954541 12.9838185,14.3969873 L18.3044575,19.7176263 C18.7019302,20.1014916 19.3352777,20.0904844 19.719143,19.6930117 C20.0936046,19.3052895 20.0936046,18.6906196 19.719143,18.3029407 L14.3985041,12.9823018 C17.12426,9.47351771 16.4895258,4.41943508 12.9807417,1.69367909 C9.47195764,-1.03207689 4.41791834,-0.397342671 1.69216235,3.11144142 C-1.03359363,6.62022552 -0.398859411,11.6743081 3.10992468,14.4000641 C4.5225301,15.4974475 6.26058468,16.0927465 8.04938507,16.0918365 Z M3.77430035,3.77274027 C6.13538859,1.4116087 9.96346822,1.41156536 12.3245998,3.7726536 C14.6857314,6.13374184 14.6857747,9.96182148 12.3246865,12.3229531 C9.96359823,14.6840846 6.1355186,14.684128 3.77438702,12.3230397 C3.77434368,12.3229964 3.77434368,12.3229964 3.77430035,12.3229531 C1.41321211,9.97906898 1.39930143,6.16494336 3.7431855,3.80385512 C3.75354267,3.79345461 3.76389984,3.78309744 3.77430035,3.77274027 Z" id="Shape"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

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

@@ -0,0 +1,35 @@
+.pallete-wrapper * {
+  font-family: "Galatea", sans-serif;
+}
+
+.search {
+  position: relative;
+  width: 400px;
+}
+@media (max-width: 768px) {
+  .search {
+    width: 100%;
+  }
+}
+.search input {
+  margin-bottom: 12px;
+  font-size: 16px;
+  padding: 19px;
+  border-radius: 27.35px;
+  border: 1px solid #dfdfdf;
+  width: 100%;
+}
+.search button {
+  position: absolute;
+  border: none;
+  background-color: transparent;
+  right: -20px;
+  top: 0;
+  width: 50px;
+  height: calc(100% - 12px);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}

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

@@ -0,0 +1,125 @@
+import { h, getAssetPath } from '@stencil/core';
+export class MySearch {
+  constructor() {
+    this.fetchColorsByName = (text) => {
+      this.searchColors.emit(text);
+    };
+    this.productId = undefined;
+    this.isMobile = undefined;
+    this.searchIcon = 'search.svg';
+    this.searchText = null;
+  }
+  onInputChangeValue(event) {
+    const value = event.target.value;
+    this.searchColors.emit(value);
+    this.searchText = value;
+  }
+  fetchColorsByNameHandle(newValue) {
+    this.fetchColorsByName(newValue);
+  }
+  render() {
+    return (h("div", { class: 'search' }, h("input", { placeholder: this.isMobile ? 'Wyszukaj kolor' : 'Wyszukaj kolor po nazwie bądź numerze', value: this.searchText || '', type: "text", onInput: this.onInputChangeValue.bind(this) }), h("button", { onClick: () => {
+        this.searchText && this.fetchColorsByName(this.searchText);
+        this.searchText = '';
+      } }, h("img", { src: getAssetPath(`./assets/${this.searchIcon}`), alt: "arrow_down" }))));
+  }
+  static get is() { return "my-search"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["my-search.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["my-search.css"]
+    };
+  }
+  static get assetsDirs() { return ["assets"]; }
+  static get properties() {
+    return {
+      "productId": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "product-id",
+        "reflect": false
+      },
+      "isMobile": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-mobile",
+        "reflect": false
+      },
+      "searchIcon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "search-icon",
+        "reflect": false,
+        "defaultValue": "'search.svg'"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "searchText": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "searchColors",
+        "name": "searchColors",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get watchers() {
+    return [{
+        "propName": "searchText",
+        "methodName": "fetchColorsByNameHandle"
+      }];
+  }
+}
+//# sourceMappingURL=my-search.js.map