@ppg_pl/pallete 2.0.19 → 2.0.21

package/dist/components/my-colorbox2.js

@@ -1,5 +1,6 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { s as setDataLayer, A as APIURL, a as accessToken } from './index2.js';
+import { s as setDataLayer } from './gtmUtils.js';
+import { A as APIURL, a as accessToken } from './index2.js';
 
 const myColorboxCss = ".pallete-wrapper *{font-family:\"Galatea\", sans-serif}.my-color-box{width:125px;height:125px;display:block;margin-bottom:5px;cursor:pointer;display:flex;flex-direction:column;justify-content:flex-end;position:relative}@media (max-width: 1024px){.my-color-box{width:65px;height:65px}}.my-color-box .color-name{width:100%;background-color:#fff;padding:15px 0px 10px;border-top-left-radius:15px;border-top-right-radius:15px;opacity:0;transition:0.3s opacity ease-in-out;font-size:10px;color:#232323;text-transform:lowercase}.my-color-box.active .color-name{opacity:1}.my-color-box.categoryactive{width:120px;height:115px}.my-color-box.categoryactive .color-name{opacity:1}@media (max-width: 1024px){.my-color-box.categoryactive{width:72px;height:72px}}.my-color-box:hover .color-name{opacity:1}";
 

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

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

package/dist/components/my-colorinfo2.js

@@ -1,5 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, getAssetPath } from '@stencil/core/internal/client';
-import { s as setDataLayer, A as APIURL, a as accessToken } from './index2.js';
+import { s as setDataLayer } from './gtmUtils.js';
+import { A as APIURL, a as accessToken } from './index2.js';
 import { d as defineCustomElement$1 } from './index3.js';
 
 const MyColorInfo = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {

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

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

package/dist/components/my-modal2.js

@@ -1,5 +1,6 @@
 import { proxyCustomElement, HTMLElement as HTMLElement$1, createEvent, h, getAssetPath } from '@stencil/core/internal/client';
-import { s as setDataLayer, b as ApiService, A as APIURL, a as accessToken } from './index2.js';
+import { b as ApiService, A as APIURL, a as accessToken } from './index2.js';
+import { s as setDataLayer } from './gtmUtils.js';
 import { d as defineCustomElement$5 } from './my-colorbox2.js';
 import { d as defineCustomElement$4 } from './my-colorinfo2.js';
 import { d as defineCustomElement$3 } from './my-loader2.js';
@@ -2668,8 +2669,8 @@ const MyModal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
     this.openSeletedColor();
   }
   render() {
-    var _a, _b, _c;
-    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 && this.data && (h("div", { class: `my-modal__header` }, h("div", { class: "image-wrapper" }, h("img", { src: `${APIURL}/assets/${(_a = this.data) === null || _a === void 0 ? void 0 : _a.modalLogo}?access_token=${accessToken}`, alt: "modal-logo" }), !this.preloader && this.data && (h("p", { class: "my-modal__see-more" }, (_b = this.data) === null || _b === void 0 ? void 0 : _b.modalDescription))), h("div", { class: "search-wrapper" }, !this.preloader && h("my-search", { productId: Number((_c = this.data) === null || _c === void 0 ? void 0 : _c.id), isMobile: this.isMobile }), !this.preloader && (h("button", { class: "my-modal__close", onClick: () => this.closeModalHandler() }, h("img", { src: getAssetPath(`./assets/${this.closeImage}`), alt: "closebtn" })))))), h("div", { class: 'my-modal__wrapper' }, this.loading && h("my-loader", null), !this.loading && this.colors && (h("div", { class: 'container_boxes' }, this.colors.list.length > 0 ? (this.chunks(this.colors.list).map((color, index) => {
+    var _a, _b;
+    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 && this.data && (h("div", { class: `my-modal__header` }, h("div", { class: "image-wrapper" }, h("img", { src: `${APIURL}/assets/${(_a = this.data) === null || _a === void 0 ? void 0 : _a.modalLogo}?access_token=${accessToken}`, alt: "modal-logo" }), !this.preloader && this.data && (h("p", { class: "my-modal__see-more" }, (_b = this.data) === null || _b === void 0 ? void 0 : _b.modalDescription))), h("div", { class: "search-wrapper" }, !this.preloader && h("my-search", { shopname: this.shop, productname: this.data.name, isMobile: this.isMobile }), !this.preloader && (h("button", { class: "my-modal__close", onClick: () => this.closeModalHandler() }, h("img", { src: getAssetPath(`./assets/${this.closeImage}`), alt: "closebtn" })))))), 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;