@ppg_pl/pallete 2.0.26 → 2.0.27

package/dist/cjs/pallete.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d74cbc0d.js');
+const index = require('./index-e6121396.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],"baselink":[1],"colorname":[1],"available_testers":[1],"price":[2],"show":[32],"readyToClose":[32],"open":[64],"close":[64]},[[0,"readyToCLose","setReadyToCloseHandler"],[0,"close","closeModalHandler"],[0,"addToBasket","addToBasketHandler"]]],[2,"my-modal",{"shop":[1],"product":[1],"baselink":[1],"available_testers":[16],"price":[2],"selectedcolor":[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],"colorIsSelected":[32],"open":[64]},[[0,"closeInfoBox","closeInfoBoxHandler"],[9,"resize","handleResize"],[0,"searchColors","searchColorsHandler"]]],[0,"my-backdrop"],[2,"my-colorinfo",{"currentColor":[16],"shop":[1],"product":[1],"baselink":[1],"availableTesters":[16],"price":[2],"data":[16],"isMobile":[4,"is-mobile"],"infoBoxWidth":[2,"info-box-width"],"closeImage":[1,"close-image"],"shapeImage":[1,"shape-image"],"buttonBlocked":[4,"button-blocked"]}],[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",{"productname":[1],"shopname":[1],"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",[[1,"my-component",{"shop":[1],"product":[1],"baselink":[1],"colorname":[1],"available_testers":[1],"price":[2],"show":[32],"readyToClose":[32],"open":[64],"close":[64]},[[0,"readyToCLose","setReadyToCloseHandler"],[0,"close","closeModalHandler"],[0,"addToBasket","addToBasketHandler"]]],[1,"my-modal",{"shop":[1],"product":[1],"baselink":[1],"available_testers":[16],"price":[2],"selectedcolor":[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],"colorIsSelected":[32],"open":[64]},[[0,"closeInfoBox","closeInfoBoxHandler"],[9,"resize","handleResize"],[0,"searchColors","searchColorsHandler"]]],[1,"my-backdrop"],[1,"my-colorinfo",{"currentColor":[16],"shop":[1],"product":[1],"baselink":[1],"availableTesters":[16],"price":[2],"data":[16],"isMobile":[4,"is-mobile"],"infoBoxWidth":[2,"info-box-width"],"closeImage":[1,"close-image"],"shapeImage":[1,"shape-image"],"buttonBlocked":[4,"button-blocked"]}],[1,"my-colorbox",{"color":[1],"name":[1],"shop":[1],"product":[1],"isActive":[4,"is-active"],"isCategoryActive":[4,"is-category-active"],"isImageInsteadHex":[16]}],[1,"my-loader"],[1,"my-search",{"productname":[1],"shopname":[1],"isMobile":[4,"is-mobile"],"searchIcon":[1,"search-icon"],"searchText":[32]},[[4,"clearSearchText","clearSearchTextHandler"]]],[1,"my-slider",{"slides":[16],"shop":[1],"product":[1],"color":[1]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

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

@@ -5,11 +5,23 @@
   font-style: normal;
   font-display: swap;
 }
+@font-face {
+  font-family: swiper-icons;
+  src: url("data:application/font-woff;charset=utf-8;base64, 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");
+  font-weight: 400;
+  font-style: normal;
+}
 .pallete-wrapper * {
   font-family: "Galatea", sans-serif;
 }
 
-my-backdrop {
+:host,
+:host * {
+  font-family: "Galatea", sans-serif;
+}
+
+:host {
+  display: block;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.7);

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

@@ -3,6 +3,7 @@ export class MyBackdrop {
     return null;
   }
   static get is() { return "my-backdrop"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["my-backdrop.scss"]

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

@@ -1 +1 @@
-{"version":3,"file":"my-backdrop.js","sourceRoot":"","sources":["../../../src/components/my-backdrop/my-backdrop.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAM1C,MAAM,OAAO,UAAU;EACrB,MAAM;IACJ,OAAO,IAAI,CAAC;EACd,CAAC;;;;;;;;CACF","sourcesContent":["import { Component } from '@stencil/core';\n\n@Component({\n  tag: 'my-backdrop',\n  styleUrl: 'my-backdrop.scss',\n})\nexport class MyBackdrop {\n  render() {\n    return null;\n  }\n}\n"]}
+{"version":3,"file":"my-backdrop.js","sourceRoot":"","sources":["../../../src/components/my-backdrop/my-backdrop.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAO1C,MAAM,OAAO,UAAU;EACrB,MAAM;IACJ,OAAO,IAAI,CAAC;EACd,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component } from '@stencil/core';\n\n@Component({\n  tag: 'my-backdrop',\n  styleUrl: 'my-backdrop.scss',\n  shadow: true,\n})\nexport class MyBackdrop {\n  render() {\n    return null;\n  }\n}\n"]}

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

@@ -5,10 +5,21 @@
   font-style: normal;
   font-display: swap;
 }
+@font-face {
+  font-family: swiper-icons;
+  src: url("data:application/font-woff;charset=utf-8;base64, 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");
+  font-weight: 400;
+  font-style: normal;
+}
 .pallete-wrapper * {
   font-family: "Galatea", sans-serif;
 }
 
+:host,
+:host * {
+  font-family: "Galatea", sans-serif;
+}
+
 .my-color-box {
   width: 125px;
   height: 125px;

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

@@ -42,6 +42,7 @@ export class MyColorBox {
       } }, h("div", { class: "color-name" }, this.name)));
   }
   static get is() { return "my-colorbox"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["my-colorbox.scss"]

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":"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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    return (\n      <div\n        onMouseEnter={() => this.colorCheck()}\n        onMouseLeave={() => this.colorUnCheck()}\n        class={`my-color-box ${this.isActive ? 'active' : ''} ${this.isCategoryActive ? 'categoryactive' : ''}`}\n        style={{\n          backgroundSize: this.isImageInsteadHex?.isImageInsteadHex ? 'cover' : '',\n          backgroundImage: this.isImageInsteadHex?.isImageInsteadHex ? `url(${APIURL}/assets/${this.isImageInsteadHex.bigImage}?access_token=${accessToken})` : '',\n          background: this.isImageInsteadHex?.isImageInsteadHex ? this.isImageInsteadHex.bigImage : this.color,\n          border: this.isCategoryActive ? `5px solid ${this.darkenColor(this.color)}` : '',\n        }}\n      >\n        <div class=\"color-name\">{this.name}</div>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"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  shadow: true,\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    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.css

@@ -5,10 +5,21 @@
   font-style: normal;
   font-display: swap;
 }
+@font-face {
+  font-family: swiper-icons;
+  src: url("data:application/font-woff;charset=utf-8;base64, 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");
+  font-weight: 400;
+  font-style: normal;
+}
 .pallete-wrapper * {
   font-family: "Galatea", sans-serif;
 }
 
+:host,
+:host * {
+  font-family: "Galatea", sans-serif;
+}
+
 .boxes__box-content {
   width: 100%;
   margin-bottom: 5px;

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

@@ -91,7 +91,7 @@ export class MyColorInfo {
       } }, h("div", { class: "boxes__box-content__info__header" }, !this.isMobile && h("img", { class: 'closebtn', onClick: this.onCloseButtonClick, src: getAssetPath(`./assets/${this.closeImage}`), alt: "closebtn" }), h("h2", null, this.capitalizeFirstLetter(this.currentColor.name)), !this.isMobile && h("h4", null, this.currentColor.number), this.currentColor && ((_a = this.currentColor.links) === null || _a === void 0 ? void 0 : _a.find((link) => (link === null || link === void 0 ? void 0 : link.shop) === this.shop)) && (h("a", { onClick: this.goToProduct, href: this.getHref(), class: `button ${this.getButtonClass()}` }, "wybierz kolor"))), h("div", { class: "boxes__box-content__info__value" }, h("div", { class: "divider" }), h("div", { class: "boxes__box-content__info__tester" }, ' ', h("div", { class: "divider" }), h("div", { class: "tester-text" }, h("h2", null, "Zam\u00F3w tester"), h("p", null, "Sprawd\u017A go na swojej \u015Bcianie.")), h("div", { class: "tester-buy" }, h("div", { class: "price" }, this.price ? `${this.price} zł` : ''), h("button", { class: `button fit ${this.getButtonClass()} ${!this.availableTesters ? 'disabled' : ''}`, onClick: this.handleAddToBasket, disabled: !this.availableTesters || this.buttonBlocked }, h("span", { class: "shape-icon", "aria-hidden": "true" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "15", height: "16", viewBox: "0 0 15 16" }, h("path", { class: "shape-icon__path", transform: "translate(0.0867462 0)", d: "M13.246571 12.763281L11.931726 4.961875C11.801879 4.1936703 11.13567 3.6319427 10.35657 3.63375L9.7429771 3.63375L9.7429771 3.1025C9.7429771 1.3890365 8.35394 0 6.6404767 0C4.9270134 0 3.537977 1.3890365 3.537977 3.1025L3.537977 3.63375L2.9217269 3.63375C2.1426277 3.6319427 1.4764187 4.1936703 1.3465706 4.961875L0.034383144 12.763281C-0.086738147 13.483807 0.11555123 14.221112 0.58740741 14.778946C1.0592636 15.336781 1.7528107 15.658594 2.4834456 15.658594L10.797508 15.658594C11.528143 15.658594 12.22169 15.336781 12.693546 14.778946C13.165402 14.221112 13.367692 13.483807 13.246571 12.763281L13.246571 12.763281ZM4.3348517 3.0892186C4.3348517 1.8158572 5.3671155 0.78359371 6.6404767 0.78359371C7.9138384 0.78359371 8.9461021 1.8158572 8.9461021 3.0892186L8.9461021 3.6204686L4.3348517 3.6204686L4.3348517 3.0892186ZM12.08579 14.264063C11.765244 14.643165 11.293964 14.86172 10.797508 14.86172L2.4834456 14.86172C1.9871488 14.862442 1.5158025 14.644215 1.195269 14.265309C0.87473541 13.886404 0.73765546 13.385406 0.82063317 12.896093L2.1248519 5.092031C2.1891608 4.703371 2.5278175 4.4200282 2.9217269 4.4252396L3.5353208 4.4252396L3.5353208 5.5834374C3.5353208 5.8034883 3.7137072 5.9818749 3.9337583 5.9818749C4.1538091 5.9818749 4.3321958 5.8034883 4.3321958 5.5834374L4.3321958 4.4252396L8.9461021 4.4252396L8.9461021 5.5834374C8.9461021 5.8034883 9.1244888 5.9818749 9.3445396 5.9818749C9.5645905 5.9818749 9.7429771 5.8034883 9.7429771 5.5834374L9.7429771 4.4252396L10.359227 4.4252396C10.753137 4.4200282 11.091793 4.703371 11.156102 5.092031L12.46032 12.896093C12.542204 13.384947 12.40527 13.885097 12.08579 14.264063L12.08579 14.264063Z" }))), this.buttonBlocked ? 'Dodano do koszyka…' : !this.availableTesters ? 'Tester obecnie niedostępny' : 'Dodaj do koszyka'))))), h("div", { class: "boxes__box-content__slider" }, this.renderSliderOrImage())));
   }
   static get is() { return "my-colorinfo"; }
-  static get encapsulation() { return "scoped"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["my-colorinfo.scss"]

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 { AvailableTester, Color, Link, Product } from '../../types';\nimport { APIURL, accessToken } from '../api';\n\n@Component({\n  tag: 'my-colorinfo',\n  styleUrl: 'my-colorinfo.scss',\n  assetsDirs: ['assets'],\n  scoped: true,\n})\nexport class MyColorInfo {\n  @Prop() currentColor: Color;\n  @Prop() shop: string;\n  @Prop() product: string;\n  @Prop() baselink: string;\n  @Prop() availableTesters: AvailableTester | null;\n  @Prop() price: number | null;\n  @Prop() data: Product | null = null;\n  @Prop() isMobile: boolean = false;\n  @Prop() infoBoxWidth: number | null;\n  @Prop() closeImage = 'close.png';\n  @Prop() shapeImage = 'Shape.svg';\n  @Prop() buttonBlocked = false;\n\n  @Event() closeInfoBox: EventEmitter;\n  @Event({ bubbles: true, composed: true }) addToBasket: EventEmitter<{ id: number }>;\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    this.closeInfoBox.emit();\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  getHref = () => {\n    if (this.baselink) {\n      return `${this.baselink}/${this?.currentColor.links?.find((link: Link) => link?.shop === this.shop)?.path}`;\n    } else {\n      return this?.currentColor.links?.find((link: Link) => link?.shop === this.shop)?.path;\n    }\n  };\n\n  capitalizeFirstLetter = (string: string) => {\n    return string.charAt(0).toUpperCase() + string.slice(1).toLocaleLowerCase();\n  };\n\n  isVeryLightBackground = (): boolean => {\n    if (this.currentColor.imageInsteadHex) return true;\n    const hex = this.currentColor.hex?.replace('#', '') ?? '';\n    if (hex.length !== 6 && hex.length !== 3) return false;\n    const r = parseInt(hex.length === 3 ? hex[0] + hex[0] : hex.slice(0, 2), 16) / 255;\n    const g = parseInt(hex.length === 3 ? hex[1] + hex[1] : hex.slice(2, 4), 16) / 255;\n    const b = parseInt(hex.length === 3 ? hex[2] + hex[2] : hex.slice(4, 6), 16) / 255;\n    const luminance = 0.299 * r + 0.587 * g + 0.114 * b;\n    return luminance > 0.96; // only near-white: dark button; rest: white button\n  };\n\n  getButtonClass = () => {\n    if (this.currentColor.imageInsteadHex) return 'brown';\n    return this.isVeryLightBackground() ? 'inverse' : '';\n  };\n\n  handleAddToBasket = () => {\n    if (!this.availableTesters?.id_product_attribute) return;\n    this.buttonBlocked = true;\n    this.addToBasket.emit({\n      id: this.availableTesters.id_product_attribute,\n    });\n\n    setTimeout(() => {\n      this.buttonBlocked = false;\n    }, 10000);\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          <div class=\"boxes__box-content__info__header\">\n            {!this.isMobile && <img class={'closebtn'} onClick={this.onCloseButtonClick} src={getAssetPath(`./assets/${this.closeImage}`)} alt=\"closebtn\" />}\n            <h2>{this.capitalizeFirstLetter(this.currentColor.name)}</h2>\n            {!this.isMobile && <h4>{this.currentColor.number}</h4>}\n            {this.currentColor && this.currentColor.links?.find((link: Link) => link?.shop === this.shop) && (\n              <a onClick={this.goToProduct} href={this.getHref()} class={`button ${this.getButtonClass()}`}>\n                wybierz kolor\n              </a>\n            )}\n          </div>\n          <div class=\"boxes__box-content__info__value\">\n            <div class=\"divider\"></div>\n\n            <div class=\"boxes__box-content__info__tester\">\n              {' '}\n              <div class=\"divider\"></div>\n              <div class=\"tester-text\">\n                <h2>Zamów tester</h2>\n                <p>Sprawdź go na swojej ścianie.</p>\n              </div>\n              <div class=\"tester-buy\">\n                <div class=\"price\">{this.price ? `${this.price} zł` : ''}</div>\n\n                <button\n                  class={`button fit ${this.getButtonClass()} ${!this.availableTesters ? 'disabled' : ''}`}\n                  onClick={this.handleAddToBasket}\n                  disabled={!this.availableTesters || this.buttonBlocked}\n                >\n                  <span class=\"shape-icon\" aria-hidden=\"true\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"15\" height=\"16\" viewBox=\"0 0 15 16\">\n                      <path\n                        class=\"shape-icon__path\"\n                        transform=\"translate(0.0867462 0)\"\n                        d=\"M13.246571 12.763281L11.931726 4.961875C11.801879 4.1936703 11.13567 3.6319427 10.35657 3.63375L9.7429771 3.63375L9.7429771 3.1025C9.7429771 1.3890365 8.35394 0 6.6404767 0C4.9270134 0 3.537977 1.3890365 3.537977 3.1025L3.537977 3.63375L2.9217269 3.63375C2.1426277 3.6319427 1.4764187 4.1936703 1.3465706 4.961875L0.034383144 12.763281C-0.086738147 13.483807 0.11555123 14.221112 0.58740741 14.778946C1.0592636 15.336781 1.7528107 15.658594 2.4834456 15.658594L10.797508 15.658594C11.528143 15.658594 12.22169 15.336781 12.693546 14.778946C13.165402 14.221112 13.367692 13.483807 13.246571 12.763281L13.246571 12.763281ZM4.3348517 3.0892186C4.3348517 1.8158572 5.3671155 0.78359371 6.6404767 0.78359371C7.9138384 0.78359371 8.9461021 1.8158572 8.9461021 3.0892186L8.9461021 3.6204686L4.3348517 3.6204686L4.3348517 3.0892186ZM12.08579 14.264063C11.765244 14.643165 11.293964 14.86172 10.797508 14.86172L2.4834456 14.86172C1.9871488 14.862442 1.5158025 14.644215 1.195269 14.265309C0.87473541 13.886404 0.73765546 13.385406 0.82063317 12.896093L2.1248519 5.092031C2.1891608 4.703371 2.5278175 4.4200282 2.9217269 4.4252396L3.5353208 4.4252396L3.5353208 5.5834374C3.5353208 5.8034883 3.7137072 5.9818749 3.9337583 5.9818749C4.1538091 5.9818749 4.3321958 5.8034883 4.3321958 5.5834374L4.3321958 4.4252396L8.9461021 4.4252396L8.9461021 5.5834374C8.9461021 5.8034883 9.1244888 5.9818749 9.3445396 5.9818749C9.5645905 5.9818749 9.7429771 5.8034883 9.7429771 5.5834374L9.7429771 4.4252396L10.359227 4.4252396C10.753137 4.4200282 11.091793 4.703371 11.156102 5.092031L12.46032 12.896093C12.542204 13.384947 12.40527 13.885097 12.08579 14.264063L12.08579 14.264063Z\"\n                      />\n                    </svg>\n                  </span>\n                  \n\n                  {this.buttonBlocked ? 'Dodano do koszyka…' : !this.availableTesters ? 'Tester obecnie niedostępny' : 'Dodaj do koszyka'}\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div class=\"boxes__box-content__slider\">{this.renderSliderOrImage()}</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 { AvailableTester, Color, Link, Product } from '../../types';\nimport { APIURL, accessToken } from '../api';\n\n@Component({\n  tag: 'my-colorinfo',\n  styleUrl: 'my-colorinfo.scss',\n  assetsDirs: ['assets'],\n  shadow: true,\n})\nexport class MyColorInfo {\n  @Prop() currentColor: Color;\n  @Prop() shop: string;\n  @Prop() product: string;\n  @Prop() baselink: string;\n  @Prop() availableTesters: AvailableTester | null;\n  @Prop() price: number | null;\n  @Prop() data: Product | null = null;\n  @Prop() isMobile: boolean = false;\n  @Prop() infoBoxWidth: number | null;\n  @Prop() closeImage = 'close.png';\n  @Prop() shapeImage = 'Shape.svg';\n  @Prop() buttonBlocked = false;\n\n  @Event({ bubbles: true, composed: true }) closeInfoBox: EventEmitter;\n  @Event({ bubbles: true, composed: true }) addToBasket: EventEmitter<{ id: number }>;\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    this.closeInfoBox.emit();\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  getHref = () => {\n    if (this.baselink) {\n      return `${this.baselink}/${this?.currentColor.links?.find((link: Link) => link?.shop === this.shop)?.path}`;\n    } else {\n      return this?.currentColor.links?.find((link: Link) => link?.shop === this.shop)?.path;\n    }\n  };\n\n  capitalizeFirstLetter = (string: string) => {\n    return string.charAt(0).toUpperCase() + string.slice(1).toLocaleLowerCase();\n  };\n\n  isVeryLightBackground = (): boolean => {\n    if (this.currentColor.imageInsteadHex) return true;\n    const hex = this.currentColor.hex?.replace('#', '') ?? '';\n    if (hex.length !== 6 && hex.length !== 3) return false;\n    const r = parseInt(hex.length === 3 ? hex[0] + hex[0] : hex.slice(0, 2), 16) / 255;\n    const g = parseInt(hex.length === 3 ? hex[1] + hex[1] : hex.slice(2, 4), 16) / 255;\n    const b = parseInt(hex.length === 3 ? hex[2] + hex[2] : hex.slice(4, 6), 16) / 255;\n    const luminance = 0.299 * r + 0.587 * g + 0.114 * b;\n    return luminance > 0.96; // only near-white: dark button; rest: white button\n  };\n\n  getButtonClass = () => {\n    if (this.currentColor.imageInsteadHex) return 'brown';\n    return this.isVeryLightBackground() ? 'inverse' : '';\n  };\n\n  handleAddToBasket = () => {\n    if (!this.availableTesters?.id_product_attribute) return;\n    this.buttonBlocked = true;\n    this.addToBasket.emit({\n      id: this.availableTesters.id_product_attribute,\n    });\n\n    setTimeout(() => {\n      this.buttonBlocked = false;\n    }, 10000);\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          <div class=\"boxes__box-content__info__header\">\n            {!this.isMobile && <img class={'closebtn'} onClick={this.onCloseButtonClick} src={getAssetPath(`./assets/${this.closeImage}`)} alt=\"closebtn\" />}\n            <h2>{this.capitalizeFirstLetter(this.currentColor.name)}</h2>\n            {!this.isMobile && <h4>{this.currentColor.number}</h4>}\n            {this.currentColor && this.currentColor.links?.find((link: Link) => link?.shop === this.shop) && (\n              <a onClick={this.goToProduct} href={this.getHref()} class={`button ${this.getButtonClass()}`}>\n                wybierz kolor\n              </a>\n            )}\n          </div>\n          <div class=\"boxes__box-content__info__value\">\n            <div class=\"divider\"></div>\n\n            <div class=\"boxes__box-content__info__tester\">\n              {' '}\n              <div class=\"divider\"></div>\n              <div class=\"tester-text\">\n                <h2>Zamów tester</h2>\n                <p>Sprawdź go na swojej ścianie.</p>\n              </div>\n              <div class=\"tester-buy\">\n                <div class=\"price\">{this.price ? `${this.price} zł` : ''}</div>\n\n                <button\n                  class={`button fit ${this.getButtonClass()} ${!this.availableTesters ? 'disabled' : ''}`}\n                  onClick={this.handleAddToBasket}\n                  disabled={!this.availableTesters || this.buttonBlocked}\n                >\n                  <span class=\"shape-icon\" aria-hidden=\"true\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"15\" height=\"16\" viewBox=\"0 0 15 16\">\n                      <path\n                        class=\"shape-icon__path\"\n                        transform=\"translate(0.0867462 0)\"\n                        d=\"M13.246571 12.763281L11.931726 4.961875C11.801879 4.1936703 11.13567 3.6319427 10.35657 3.63375L9.7429771 3.63375L9.7429771 3.1025C9.7429771 1.3890365 8.35394 0 6.6404767 0C4.9270134 0 3.537977 1.3890365 3.537977 3.1025L3.537977 3.63375L2.9217269 3.63375C2.1426277 3.6319427 1.4764187 4.1936703 1.3465706 4.961875L0.034383144 12.763281C-0.086738147 13.483807 0.11555123 14.221112 0.58740741 14.778946C1.0592636 15.336781 1.7528107 15.658594 2.4834456 15.658594L10.797508 15.658594C11.528143 15.658594 12.22169 15.336781 12.693546 14.778946C13.165402 14.221112 13.367692 13.483807 13.246571 12.763281L13.246571 12.763281ZM4.3348517 3.0892186C4.3348517 1.8158572 5.3671155 0.78359371 6.6404767 0.78359371C7.9138384 0.78359371 8.9461021 1.8158572 8.9461021 3.0892186L8.9461021 3.6204686L4.3348517 3.6204686L4.3348517 3.0892186ZM12.08579 14.264063C11.765244 14.643165 11.293964 14.86172 10.797508 14.86172L2.4834456 14.86172C1.9871488 14.862442 1.5158025 14.644215 1.195269 14.265309C0.87473541 13.886404 0.73765546 13.385406 0.82063317 12.896093L2.1248519 5.092031C2.1891608 4.703371 2.5278175 4.4200282 2.9217269 4.4252396L3.5353208 4.4252396L3.5353208 5.5834374C3.5353208 5.8034883 3.7137072 5.9818749 3.9337583 5.9818749C4.1538091 5.9818749 4.3321958 5.8034883 4.3321958 5.5834374L4.3321958 4.4252396L8.9461021 4.4252396L8.9461021 5.5834374C8.9461021 5.8034883 9.1244888 5.9818749 9.3445396 5.9818749C9.5645905 5.9818749 9.7429771 5.8034883 9.7429771 5.5834374L9.7429771 4.4252396L10.359227 4.4252396C10.753137 4.4200282 11.091793 4.703371 11.156102 5.092031L12.46032 12.896093C12.542204 13.384947 12.40527 13.885097 12.08579 14.264063L12.08579 14.264063Z\"\n                      />\n                    </svg>\n                  </span>\n                  \n\n                  {this.buttonBlocked ? 'Dodano do koszyka…' : !this.availableTesters ? 'Tester obecnie niedostępny' : 'Dodaj do koszyka'}\n                </button>\n              </div>\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-component/my-component.js

@@ -52,7 +52,7 @@ export class MyModalBundle {
       })(window, document, 'script', 'dataLayer', 'GTM-PMTKHDX');`)), h("div", { class: "pallete-wrapper" }, content), h("noscript", null, h("iframe", { src: "https://www.googletagmanager.com/ns.html?id=GTM-PMTKHDX", height: "0", width: "0", style: { display: 'none', visibility: 'hidden' } }))));
   }
   static get is() { return "my-component"; }
-  static get encapsulation() { return "scoped"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["my-component.scss"]

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

@@ -1 +1 @@
-{"version":3,"file":"my-component.js","sourceRoot":"","sources":["../../../src/components/my-component/my-component.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAgB,CAAC,EAAE,MAAM,eAAe,CAAC;AAOxG,MAAM,OAAO,aAAa;;;;;;;;gBAWR,KAAK;wBACG,KAAK;;EAG7B,KAAK,CAAC,IAAI;IACR,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;EACnB,CAAC;EAGD,KAAK,CAAC,KAAK;IACT,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;EACpB,CAAC;EAGD,sBAAsB,CAAC,KAAkB;IACvC,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC;EAC9C,CAAC;EAGD,iBAAiB;IACf,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IAClB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;EAC5B,CAAC;EAGD,kBAAkB,CAAC,KAAkC;IACnD,MAAM,EAAE,EAAE,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;IAE5B,OAAO,EAAE,CAAC;EACZ,CAAC;EAED,MAAM;IACJ,IAAI,OAAO,GAAG,IAAI,CAAC;IACnB,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,OAAO,GAAG;QACR,sBAA2B;QAC3B,gBACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,aAAa,EAAE,IAAI,CAAC,SAAS,EAC7B,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,IAAI,EACrF,KAAK,EAAE,IAAI,CAAC,KAAK,GACP;OACb,CAAC;KACH;IACD,OAAO,CACL,WACE,OAAO,EAAE,GAAG,EAAE;QACZ,IAAI,IAAI,CAAC,YAAY,EAAE;UACrB,IAAI,CAAC,iBAAiB,EAAE,CAAC;SAC1B;MACH,CAAC;MAED,EAAC,MAAM;QACL,kBACG;;;;;;;;;kEASqD,CAC/C,CACF;MACT,WAAK,KAAK,EAAC,iBAAiB,IAAE,OAAO,CAAO;MAC5C;QACE,cAAQ,GAAG,EAAC,yDAAyD,EAAC,MAAM,EAAC,GAAG,EAAC,KAAK,EAAC,GAAG,EAAC,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAW,CAC7I,CACP,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import Helmet from '@stencil/helmet';\nimport { Component, Prop, Method, Element, State, Listen, Event, EventEmitter, h } from '@stencil/core';\n\n@Component({\n  tag: 'my-component',\n  styleUrl: 'my-component.scss',\n  scoped: true,\n})\nexport class MyModalBundle {\n  @Element() modalEl: HTMLElement;\n\n  @Prop() shop: string;\n  @Prop() product: string;\n  @Prop() baselink: string;\n  @Prop() colorname: string | null;\n  @Prop() available_testers: string | null;\n  @Prop() price: number | null;\n  @Event({ bubbles: true, composed: true }) addToBasket: EventEmitter<{ id: number }>;\n\n  @State() show = false;\n  @State() readyToClose = false;\n\n  @Method()\n  async open() {\n    this.show = true;\n  }\n\n  @Method()\n  async close() {\n    this.show = false;\n  }\n\n  @Listen('readyToCLose')\n  setReadyToCloseHandler(value: CustomEvent) {\n    this.readyToClose = value.detail.observable;\n  }\n\n  @Listen('close')\n  closeModalHandler() {\n    this.show = false;\n    this.readyToClose = false;\n  }\n\n  @Listen('addToBasket')\n  addToBasketHandler(event: CustomEvent<{ id: number }>) {\n    const { id } = event.detail;\n\n    return id;\n  }\n\n  render() {\n    let content = null;\n    if (this.show) {\n      content = [\n        <my-backdrop></my-backdrop>,\n        <my-modal\n          shop={this.shop}\n          product={this.product}\n          baselink={this.baselink}\n          selectedcolor={this.colorname}\n          available_testers={this.available_testers ? JSON.parse(this.available_testers) : null}\n          price={this.price}\n        ></my-modal>,\n      ];\n    }\n    return (\n      <div\n        onClick={() => {\n          if (this.readyToClose) {\n            this.closeModalHandler();\n          }\n        }}\n      >\n        <Helmet>\n          <script>\n            {`(function (w, d, s, l, i) {\n        w[l] = w[l] || [];\n        w[l].push({ 'gtm.start': new Date().getTime(), 'event': 'gtm.js' });\n        var f = d.getElementsByTagName(s)[0],\n          j = d.createElement(s),\n          dl = l != 'dataLayer' ? '&l=' + l : '';\n        j.async = true;\n        j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;\n        f.parentNode.insertBefore(j, f);\n      })(window, document, 'script', 'dataLayer', 'GTM-PMTKHDX');`}\n          </script>\n        </Helmet>\n        <div class=\"pallete-wrapper\">{content}</div>\n        <noscript>\n          <iframe src=\"https://www.googletagmanager.com/ns.html?id=GTM-PMTKHDX\" height=\"0\" width=\"0\" style={{ display: 'none', visibility: 'hidden' }}></iframe>\n        </noscript>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"my-component.js","sourceRoot":"","sources":["../../../src/components/my-component/my-component.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAgB,CAAC,EAAE,MAAM,eAAe,CAAC;AAOxG,MAAM,OAAO,aAAa;;;;;;;;gBAWR,KAAK;wBACG,KAAK;;EAG7B,KAAK,CAAC,IAAI;IACR,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;EACnB,CAAC;EAGD,KAAK,CAAC,KAAK;IACT,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;EACpB,CAAC;EAGD,sBAAsB,CAAC,KAAkB;IACvC,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC;EAC9C,CAAC;EAGD,iBAAiB;IACf,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IAClB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;EAC5B,CAAC;EAGD,kBAAkB,CAAC,KAAkC;IACnD,MAAM,EAAE,EAAE,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;IAE5B,OAAO,EAAE,CAAC;EACZ,CAAC;EAED,MAAM;IACJ,IAAI,OAAO,GAAG,IAAI,CAAC;IACnB,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,OAAO,GAAG;QACR,sBAA2B;QAC3B,gBACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,aAAa,EAAE,IAAI,CAAC,SAAS,EAC7B,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,IAAI,EACrF,KAAK,EAAE,IAAI,CAAC,KAAK,GACP;OACb,CAAC;KACH;IACD,OAAO,CACL,WACE,OAAO,EAAE,GAAG,EAAE;QACZ,IAAI,IAAI,CAAC,YAAY,EAAE;UACrB,IAAI,CAAC,iBAAiB,EAAE,CAAC;SAC1B;MACH,CAAC;MAED,EAAC,MAAM;QACL,kBACG;;;;;;;;;kEASqD,CAC/C,CACF;MACT,WAAK,KAAK,EAAC,iBAAiB,IAAE,OAAO,CAAO;MAC5C;QACE,cAAQ,GAAG,EAAC,yDAAyD,EAAC,MAAM,EAAC,GAAG,EAAC,KAAK,EAAC,GAAG,EAAC,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAW,CAC7I,CACP,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import Helmet from '@stencil/helmet';\nimport { Component, Prop, Method, Element, State, Listen, Event, EventEmitter, h } from '@stencil/core';\n\n@Component({\n  tag: 'my-component',\n  styleUrl: 'my-component.scss',\n  shadow: true,\n})\nexport class MyModalBundle {\n  @Element() modalEl: HTMLElement;\n\n  @Prop() shop: string;\n  @Prop() product: string;\n  @Prop() baselink: string;\n  @Prop() colorname: string | null;\n  @Prop() available_testers: string | null;\n  @Prop() price: number | null;\n  @Event({ bubbles: true, composed: true }) addToBasket: EventEmitter<{ id: number }>;\n\n  @State() show = false;\n  @State() readyToClose = false;\n\n  @Method()\n  async open() {\n    this.show = true;\n  }\n\n  @Method()\n  async close() {\n    this.show = false;\n  }\n\n  @Listen('readyToCLose')\n  setReadyToCloseHandler(value: CustomEvent) {\n    this.readyToClose = value.detail.observable;\n  }\n\n  @Listen('close')\n  closeModalHandler() {\n    this.show = false;\n    this.readyToClose = false;\n  }\n\n  @Listen('addToBasket')\n  addToBasketHandler(event: CustomEvent<{ id: number }>) {\n    const { id } = event.detail;\n\n    return id;\n  }\n\n  render() {\n    let content = null;\n    if (this.show) {\n      content = [\n        <my-backdrop></my-backdrop>,\n        <my-modal\n          shop={this.shop}\n          product={this.product}\n          baselink={this.baselink}\n          selectedcolor={this.colorname}\n          available_testers={this.available_testers ? JSON.parse(this.available_testers) : null}\n          price={this.price}\n        ></my-modal>,\n      ];\n    }\n    return (\n      <div\n        onClick={() => {\n          if (this.readyToClose) {\n            this.closeModalHandler();\n          }\n        }}\n      >\n        <Helmet>\n          <script>\n            {`(function (w, d, s, l, i) {\n        w[l] = w[l] || [];\n        w[l].push({ 'gtm.start': new Date().getTime(), 'event': 'gtm.js' });\n        var f = d.getElementsByTagName(s)[0],\n          j = d.createElement(s),\n          dl = l != 'dataLayer' ? '&l=' + l : '';\n        j.async = true;\n        j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;\n        f.parentNode.insertBefore(j, f);\n      })(window, document, 'script', 'dataLayer', 'GTM-PMTKHDX');`}\n          </script>\n        </Helmet>\n        <div class=\"pallete-wrapper\">{content}</div>\n        <noscript>\n          <iframe src=\"https://www.googletagmanager.com/ns.html?id=GTM-PMTKHDX\" height=\"0\" width=\"0\" style={{ display: 'none', visibility: 'hidden' }}></iframe>\n        </noscript>\n      </div>\n    );\n  }\n}\n"]}

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

@@ -4,7 +4,7 @@ export class MyLoader {
     return (h("div", { class: "container" }, h("div", { class: "item" }), h("div", { class: "item" }), h("div", { class: "item" }), h("div", { class: "item" }), h("div", { class: "item" })));
   }
   static get is() { return "my-loader"; }
-  static get encapsulation() { return "scoped"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["my-loader.scss"]

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

@@ -1 +1 @@
-{"version":3,"file":"my-loader.js","sourceRoot":"","sources":["../../../src/components/my-loader/my-loader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAO7C,MAAM,OAAO,QAAQ;EACnB,MAAM;IACJ,OAAO,CACL,WAAK,KAAK,EAAC,WAAW;MACpB,WAAK,KAAK,EAAC,MAAM,GAAO;MACxB,WAAK,KAAK,EAAC,MAAM,GAAO;MACxB,WAAK,KAAK,EAAC,MAAM,GAAO;MACxB,WAAK,KAAK,EAAC,MAAM,GAAO;MACxB,WAAK,KAAK,EAAC,MAAM,GAAO,CACpB,CACP,CAAC;EACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'my-loader',\n  styleUrl: 'my-loader.scss',\n  scoped: true,\n})\nexport class MyLoader {\n  render() {\n    return (\n      <div class=\"container\">\n        <div class=\"item\"></div>\n        <div class=\"item\"></div>\n        <div class=\"item\"></div>\n        <div class=\"item\"></div>\n        <div class=\"item\"></div>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"my-loader.js","sourceRoot":"","sources":["../../../src/components/my-loader/my-loader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAO7C,MAAM,OAAO,QAAQ;EACnB,MAAM;IACJ,OAAO,CACL,WAAK,KAAK,EAAC,WAAW;MACpB,WAAK,KAAK,EAAC,MAAM,GAAO;MACxB,WAAK,KAAK,EAAC,MAAM,GAAO;MACxB,WAAK,KAAK,EAAC,MAAM,GAAO;MACxB,WAAK,KAAK,EAAC,MAAM,GAAO;MACxB,WAAK,KAAK,EAAC,MAAM,GAAO,CACpB,CACP,CAAC;EACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'my-loader',\n  styleUrl: 'my-loader.scss',\n  shadow: true,\n})\nexport class MyLoader {\n  render() {\n    return (\n      <div class=\"container\">\n        <div class=\"item\"></div>\n        <div class=\"item\"></div>\n        <div class=\"item\"></div>\n        <div class=\"item\"></div>\n        <div class=\"item\"></div>\n      </div>\n    );\n  }\n}\n"]}

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

@@ -5,10 +5,21 @@
   font-style: normal;
   font-display: swap;
 }
+@font-face {
+  font-family: swiper-icons;
+  src: url("data:application/font-woff;charset=utf-8;base64, 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");
+  font-weight: 400;
+  font-style: normal;
+}
 .pallete-wrapper * {
   font-family: "Galatea", sans-serif;
 }
 
+:host,
+:host * {
+  font-family: "Galatea", sans-serif;
+}
+
 .my-modal {
   box-shadow: 1px 1px 1px #ccc;
   background-color: #fff;
@@ -83,7 +94,7 @@
   }
 }
 @media (max-width: 1024px) {
-  .my-modal__header .search-wrapper .sc-my-search-h {
+  .my-modal__header .search-wrapper my-search {
     width: 100%;
     margin: 0 auto;
   }

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

@@ -37,12 +37,15 @@ export class MyModal {
     };
     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 container = (_a = this.modalEl.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.my-modal');
+      if (!container)
+        return;
+      const modalWidth = container.clientWidth - this.padding;
       const boxWidth = this.boxWidth;
       const calc = Math.floor(modalWidth / boxWidth);
       const boxesCount = calc;
       if (!this.preloader)
-        this.chunksNum = boxesCount;
+        this.chunksNum = Math.max(boxesCount, 1);
     };
     this.displayForMobile = () => {
       if (window.innerWidth < this.mediumBreakpoint) {
@@ -324,7 +327,7 @@ export class MyModal {
       }, 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 encapsulation() { return "scoped"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["my-modal.scss"]

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 { AvailableTester, Color, PaginationData, Product, ProductShopRelation } from '../../types';\nimport { fetchCategoryColorsQuery, fetchColorByName, fetchProductColorsQuery, limit } from '../api/services';\nimport { debounce } from '../../utils';\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  scoped: true,\n})\nexport class MyModal {\n  private boxDesktopWidth = 130;\n  private boxMobileWidth = 70;\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() baselink: string;\n  @Prop() available_testers: AvailableTester[] | null;\n  @Prop() price: number | null;\n  @Prop() selectedcolor: string | null;\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  @State() colorIsSelected = false;\n  debouncedSearchColorsHandler: (event: CustomEvent) => void;\n\n  constructor() {\n    this.debouncedSearchColorsHandler = debounce(this.searchColor.bind(this), 300);\n  }\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  async searchColor(event: CustomEvent) {\n    if (event.detail === '') {\n      this.fetchProductData();\n      this.loading = true;\n    } else {\n      if (!this.data?.id) {\n        return;\n      }\n      try {\n        const response = await ApiService.getData(`items/Color?${fetchColorByName(this.data?.id, event.detail)}`);\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\n  @Listen('searchColors')\n  searchColorsHandler(event: CustomEvent) {\n    this.loading = true;\n    this.currentColor = null;\n    this.debouncedSearchColorsHandler(event);\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  // async searchColorsHandler(event: CustomEvent) {\n  //   this.loading = true;\n  //   this.currentColor = null;\n\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  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  private openSeletedColor() {\n    if (!this.colors?.list || !this.selectedcolor) return;\n\n    if (!this.colorIsSelected) {\n      const result = this.chunks(this.colors.list)\n        .map((innerArray, arrayIndex) => {\n          const foundColor = innerArray.find(color => color.name.trim()?.toUpperCase() === this.selectedcolor?.trim()?.toUpperCase());\n\n          return foundColor ? { color: foundColor, index: arrayIndex } : null;\n        })\n        .filter(item => item !== null);\n\n      this.currentColor = result[0]?.color as any;\n      this.currentIndex = result[0]?.index as any;\n      this.colorIsSelected = true;\n    }\n  }\n\n  componentWillLoad() {\n    this.preloader = true;\n    this.fetchProductData();\n    setDataLayer({\n      shop: this.shop,\n      product: this.product,\n    });\n  }\n\n  componentWillRender() {\n    this.displayForMobile();\n    this.calculateBoxCount();\n    this.colorTimer();\n    this.openSeletedColor();\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 && this.data && (\n          <div class={`my-modal__header`}>\n            <div class=\"image-wrapper\">\n              <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            </div>\n            <div class=\"search-wrapper\">\n              {!this.preloader && <my-search shopname={this.shop} productname={this.data.name} isMobile={this.isMobile}></my-search>}\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            </div>\n          </div>\n        )}\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                          baselink={this.baselink}\n                          availableTesters={this.available_testers?.find((t: any) => t.color_name?.trim().toLowerCase() === this.currentColor?.name?.trim().toLowerCase())}\n                          price={this.price}\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 { AvailableTester, Color, PaginationData, Product, ProductShopRelation } from '../../types';\nimport { fetchCategoryColorsQuery, fetchColorByName, fetchProductColorsQuery, limit } from '../api/services';\nimport { debounce } from '../../utils';\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  shadow: true,\n})\nexport class MyModal {\n  private boxDesktopWidth = 130;\n  private boxMobileWidth = 70;\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() baselink: string;\n  @Prop() available_testers: AvailableTester[] | null;\n  @Prop() price: number | null;\n  @Prop() selectedcolor: string | null;\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  @State() colorIsSelected = false;\n  debouncedSearchColorsHandler: (event: CustomEvent) => void;\n\n  constructor() {\n    this.debouncedSearchColorsHandler = debounce(this.searchColor.bind(this), 300);\n  }\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({ bubbles: true, composed: true }) close: EventEmitter;\n  closeModalHandler() {\n    this.close.emit();\n  }\n\n  @Event({ bubbles: true, composed: true }) 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 container = this.modalEl.shadowRoot?.querySelector('.my-modal');\n    if (!container) return;\n    const modalWidth = container.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 = Math.max(boxesCount, 1);\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  async searchColor(event: CustomEvent) {\n    if (event.detail === '') {\n      this.fetchProductData();\n      this.loading = true;\n    } else {\n      if (!this.data?.id) {\n        return;\n      }\n      try {\n        const response = await ApiService.getData(`items/Color?${fetchColorByName(this.data?.id, event.detail)}`);\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\n  @Listen('searchColors')\n  searchColorsHandler(event: CustomEvent) {\n    this.loading = true;\n    this.currentColor = null;\n    this.debouncedSearchColorsHandler(event);\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  // async searchColorsHandler(event: CustomEvent) {\n  //   this.loading = true;\n  //   this.currentColor = null;\n\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  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  private openSeletedColor() {\n    if (!this.colors?.list || !this.selectedcolor) return;\n\n    if (!this.colorIsSelected) {\n      const result = this.chunks(this.colors.list)\n        .map((innerArray, arrayIndex) => {\n          const foundColor = innerArray.find(color => color.name.trim()?.toUpperCase() === this.selectedcolor?.trim()?.toUpperCase());\n\n          return foundColor ? { color: foundColor, index: arrayIndex } : null;\n        })\n        .filter(item => item !== null);\n\n      this.currentColor = result[0]?.color as any;\n      this.currentIndex = result[0]?.index as any;\n      this.colorIsSelected = true;\n    }\n  }\n\n  componentWillLoad() {\n    this.preloader = true;\n    this.fetchProductData();\n    setDataLayer({\n      shop: this.shop,\n      product: this.product,\n    });\n  }\n\n  componentWillRender() {\n    this.displayForMobile();\n    this.calculateBoxCount();\n    this.colorTimer();\n    this.openSeletedColor();\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 && this.data && (\n          <div class={`my-modal__header`}>\n            <div class=\"image-wrapper\">\n              <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            </div>\n            <div class=\"search-wrapper\">\n              {!this.preloader && <my-search shopname={this.shop} productname={this.data.name} isMobile={this.isMobile}></my-search>}\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            </div>\n          </div>\n        )}\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                          baselink={this.baselink}\n                          availableTesters={this.available_testers?.find((t: any) => t.color_name?.trim().toLowerCase() === this.currentColor?.name?.trim().toLowerCase())}\n                          price={this.price}\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/components/my-search/my-search.css

@@ -5,10 +5,21 @@
   font-style: normal;
   font-display: swap;
 }
+@font-face {
+  font-family: swiper-icons;
+  src: url("data:application/font-woff;charset=utf-8;base64, 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");
+  font-weight: 400;
+  font-style: normal;
+}
 .pallete-wrapper * {
   font-family: "Galatea", sans-serif;
 }
 
+:host,
+:host * {
+  font-family: "Galatea", sans-serif;
+}
+
 .search {
   position: relative;
   width: 400px;

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

@@ -51,7 +51,7 @@ export class MySearch {
       } }, h("img", { src: getAssetPath(`./assets/${this.searchIcon}`), alt: "arrow_down" }))));
   }
   static get is() { return "my-search"; }
-  static get encapsulation() { return "scoped"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["my-search.scss"]

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

@@ -1 +1 @@
-{"version":3,"file":"my-search.js","sourceRoot":"","sources":["../../../src/components/my-search/my-search.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,YAAY,EAAgB,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC5G,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,SAAS,QAAQ,CAAC,IAAc,EAAE,IAAY;EAC5C,IAAI,OAAsC,CAAC;EAC3C,OAAO,SAAS,gBAAgB,CAAC,GAAG,IAAW;IAC7C,MAAM,KAAK,GAAG,GAAG,EAAE;MACjB,YAAY,CAAC,OAAO,CAAC,CAAC;MACtB,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC;IAChB,CAAC,CAAC;IACF,YAAY,CAAC,OAAO,CAAC,CAAC;IACtB,OAAO,GAAG,UAAU,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;EACpC,CAAC,CAAC;AACJ,CAAC;AAQD,MAAM,OAAO,QAAQ;;IAQnB,sBAAiB,GAAG,CAAC,IAAY,EAAE,EAAE;MACnC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/B,CAAC,CAAC;IAEM,8BAAyB,GAAG,QAAQ,CAAC,CAAC,KAAa,EAAE,EAAE;MAC7D,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;MAC9B,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;IAC1B,CAAC,EAAE,GAAG,CAAC,CAAC;;;;sBAXa,YAAY;sBACI,IAAI;;EAYjC,kBAAkB,CAAC,KAAY;IACrC,MAAM,KAAK,GAAI,KAAK,CAAC,MAA2B,CAAC,KAAK,CAAC;IACvD,IAAI,CAAC,yBAAyB,CAAC,KAAK,CAAC,CAAC;EACxC,CAAC;EAGD,uBAAuB,CAAC,QAAgB;IACtC,IAAI,QAAQ,CAAC,MAAM,IAAI,CAAC,EAAE;MACxB,YAAY,CAAC;QACX,KAAK,EAAE,aAAa;QACpB,IAAI,EAAE,IAAI,CAAC,QAAQ;QACnB,OAAO,EAAE,IAAI,CAAC,WAAW;QACzB,WAAW,EAAE,QAAQ;OACtB,CAAC,CAAC;KACJ;IAED,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAC;EACnC,CAAC;EAGD,sBAAsB;IACpB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;EACzB,CAAC;EAED,MAAM;IACJ,OAAO,CACL,WAAK,KAAK,EAAE,QAAQ;MAClB,aAAO,WAAW,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,0BAA0B,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,IAAI,EAAE,EAAE,IAAI,EAAC,MAAM,EAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,GAAI;MAE5K,cACE,OAAO,EAAE,GAAG,EAAE;UACZ,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;UAE3D,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC;QACvB,CAAC;QAED,WAAK,GAAG,EAAE,YAAY,CAAC,YAAY,IAAI,CAAC,UAAU,EAAE,CAAC,EAAE,GAAG,EAAC,YAAY,GAAG,CACnE,CACL,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, State, Listen, getAssetPath, EventEmitter, Event, Watch } from '@stencil/core';\nimport { setDataLayer } from '../../gtmUtils';\n\nfunction debounce(func: Function, wait: number) {\n  let timeout: ReturnType<typeof setTimeout>;\n  return function executedFunction(...args: any[]) {\n    const later = () => {\n      clearTimeout(timeout);\n      func(...args);\n    };\n    clearTimeout(timeout);\n    timeout = setTimeout(later, wait);\n  };\n}\n\n@Component({\n  tag: 'my-search',\n  styleUrl: 'my-search.scss',\n  assetsDirs: ['assets'],\n  scoped: true,\n})\nexport class MySearch {\n  @Prop() productname: string;\n  @Prop() shopname: string;\n  @Prop() isMobile: boolean;\n  @Prop() searchIcon = 'search.svg';\n  @State() searchText: string | null = null;\n  @Event() searchColors: EventEmitter;\n\n  fetchColorsByName = (text: string) => {\n    this.searchColors.emit(text);\n  };\n\n  private debouncedInputChangeValue = debounce((value: string) => {\n    this.fetchColorsByName(value);\n    this.searchText = value;\n  }, 500);\n\n  private onInputChangeValue(event: Event) {\n    const value = (event.target as HTMLInputElement).value;\n    this.debouncedInputChangeValue(value);\n  }\n\n  @Watch('searchText')\n  fetchColorsByNameHandle(newValue: string) {\n    if (newValue.length >= 3) {\n      setDataLayer({\n        event: 'ColorSearch',\n        shop: this.shopname,\n        product: this.productname,\n        search_term: newValue,\n      });\n    }\n\n    this.fetchColorsByName(newValue);\n  }\n\n  @Listen('clearSearchText', { target: 'document' })\n  clearSearchTextHandler() {\n    this.searchText = null;\n  }\n\n  render() {\n    return (\n      <div class={'search'}>\n        <input placeholder={this.isMobile ? 'Wyszukaj kolor' : 'Wyszukaj kolor po nazwie'} value={this.searchText || ''} type=\"text\" onInput={this.onInputChangeValue.bind(this)} />\n\n        <button\n          onClick={() => {\n            this.searchText && this.fetchColorsByName(this.searchText);\n\n            this.searchText = '';\n          }}\n        >\n          <img src={getAssetPath(`./assets/${this.searchIcon}`)} alt=\"arrow_down\" />\n        </button>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"my-search.js","sourceRoot":"","sources":["../../../src/components/my-search/my-search.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,YAAY,EAAgB,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC5G,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,SAAS,QAAQ,CAAC,IAAc,EAAE,IAAY;EAC5C,IAAI,OAAsC,CAAC;EAC3C,OAAO,SAAS,gBAAgB,CAAC,GAAG,IAAW;IAC7C,MAAM,KAAK,GAAG,GAAG,EAAE;MACjB,YAAY,CAAC,OAAO,CAAC,CAAC;MACtB,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC;IAChB,CAAC,CAAC;IACF,YAAY,CAAC,OAAO,CAAC,CAAC;IACtB,OAAO,GAAG,UAAU,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;EACpC,CAAC,CAAC;AACJ,CAAC;AAQD,MAAM,OAAO,QAAQ;;IAQnB,sBAAiB,GAAG,CAAC,IAAY,EAAE,EAAE;MACnC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/B,CAAC,CAAC;IAEM,8BAAyB,GAAG,QAAQ,CAAC,CAAC,KAAa,EAAE,EAAE;MAC7D,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;MAC9B,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;IAC1B,CAAC,EAAE,GAAG,CAAC,CAAC;;;;sBAXa,YAAY;sBACI,IAAI;;EAYjC,kBAAkB,CAAC,KAAY;IACrC,MAAM,KAAK,GAAI,KAAK,CAAC,MAA2B,CAAC,KAAK,CAAC;IACvD,IAAI,CAAC,yBAAyB,CAAC,KAAK,CAAC,CAAC;EACxC,CAAC;EAGD,uBAAuB,CAAC,QAAgB;IACtC,IAAI,QAAQ,CAAC,MAAM,IAAI,CAAC,EAAE;MACxB,YAAY,CAAC;QACX,KAAK,EAAE,aAAa;QACpB,IAAI,EAAE,IAAI,CAAC,QAAQ;QACnB,OAAO,EAAE,IAAI,CAAC,WAAW;QACzB,WAAW,EAAE,QAAQ;OACtB,CAAC,CAAC;KACJ;IAED,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAC;EACnC,CAAC;EAGD,sBAAsB;IACpB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;EACzB,CAAC;EAED,MAAM;IACJ,OAAO,CACL,WAAK,KAAK,EAAE,QAAQ;MAClB,aAAO,WAAW,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,0BAA0B,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,IAAI,EAAE,EAAE,IAAI,EAAC,MAAM,EAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,GAAI;MAE5K,cACE,OAAO,EAAE,GAAG,EAAE;UACZ,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;UAE3D,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC;QACvB,CAAC;QAED,WAAK,GAAG,EAAE,YAAY,CAAC,YAAY,IAAI,CAAC,UAAU,EAAE,CAAC,EAAE,GAAG,EAAC,YAAY,GAAG,CACnE,CACL,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, State, Listen, getAssetPath, EventEmitter, Event, Watch } from '@stencil/core';\nimport { setDataLayer } from '../../gtmUtils';\n\nfunction debounce(func: Function, wait: number) {\n  let timeout: ReturnType<typeof setTimeout>;\n  return function executedFunction(...args: any[]) {\n    const later = () => {\n      clearTimeout(timeout);\n      func(...args);\n    };\n    clearTimeout(timeout);\n    timeout = setTimeout(later, wait);\n  };\n}\n\n@Component({\n  tag: 'my-search',\n  styleUrl: 'my-search.scss',\n  assetsDirs: ['assets'],\n  shadow: true,\n})\nexport class MySearch {\n  @Prop() productname: string;\n  @Prop() shopname: string;\n  @Prop() isMobile: boolean;\n  @Prop() searchIcon = 'search.svg';\n  @State() searchText: string | null = null;\n  @Event({ bubbles: true, composed: true }) searchColors: EventEmitter;\n\n  fetchColorsByName = (text: string) => {\n    this.searchColors.emit(text);\n  };\n\n  private debouncedInputChangeValue = debounce((value: string) => {\n    this.fetchColorsByName(value);\n    this.searchText = value;\n  }, 500);\n\n  private onInputChangeValue(event: Event) {\n    const value = (event.target as HTMLInputElement).value;\n    this.debouncedInputChangeValue(value);\n  }\n\n  @Watch('searchText')\n  fetchColorsByNameHandle(newValue: string) {\n    if (newValue.length >= 3) {\n      setDataLayer({\n        event: 'ColorSearch',\n        shop: this.shopname,\n        product: this.productname,\n        search_term: newValue,\n      });\n    }\n\n    this.fetchColorsByName(newValue);\n  }\n\n  @Listen('clearSearchText', { target: 'document' })\n  clearSearchTextHandler() {\n    this.searchText = null;\n  }\n\n  render() {\n    return (\n      <div class={'search'}>\n        <input placeholder={this.isMobile ? 'Wyszukaj kolor' : 'Wyszukaj kolor po nazwie'} value={this.searchText || ''} type=\"text\" onInput={this.onInputChangeValue.bind(this)} />\n\n        <button\n          onClick={() => {\n            this.searchText && this.fetchColorsByName(this.searchText);\n\n            this.searchText = '';\n          }}\n        >\n          <img src={getAssetPath(`./assets/${this.searchIcon}`)} alt=\"arrow_down\" />\n        </button>\n      </div>\n    );\n  }\n}\n"]}