@ppg_pl/pallete 2.0.26 → 2.0.27

package/dist/components/my-backdrop2.js

@@ -1,17 +1,18 @@
 import { proxyCustomElement, HTMLElement } from '@stencil/core/internal/client';
 
-const myBackdropCss = "@font-face{font-family:\"Galatea\";src:url(\"/assets/fonts/Galatea-Regular.woff2\") format(\"woff2\"), url(\"/assets/fonts/Galatea-Regular.woff\") format(\"woff\"), url(\"/assets/fonts/Galatea-Regular.ttf\") format(\"truetype\");font-weight:normal;font-style:normal;font-display:swap}.pallete-wrapper *{font-family:\"Galatea\", sans-serif}my-backdrop{width:100%;height:100%;background-color:rgba(0, 0, 0, 0.7);position:fixed;z-index:100;left:0;top:0}";
+const myBackdropCss = "@font-face{font-family:\"Galatea\";src:url(\"/assets/fonts/Galatea-Regular.woff2\") format(\"woff2\"), url(\"/assets/fonts/Galatea-Regular.woff\") format(\"woff\"), url(\"/assets/fonts/Galatea-Regular.ttf\") format(\"truetype\");font-weight:normal;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}:host{display:block;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.7);position:fixed;z-index:100;left:0;top:0}";
 
 const MyBackdrop = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
+    this.__attachShadow();
   }
   render() {
     return null;
   }
   static get style() { return myBackdropCss; }
-}, [0, "my-backdrop"]);
+}, [1, "my-backdrop"]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;

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

@@ -1 +1 @@
-{"file":"my-backdrop2.js","mappings":";;AAAA,MAAM,aAAa,GAAG,ocAAoc;;MCM7c,UAAU;;;;;EACrB,MAAM;IACJ,OAAO,IAAI,CAAC;GACb;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/my-backdrop/my-backdrop.scss?tag=my-backdrop","./src/components/my-backdrop/my-backdrop.tsx"],"sourcesContent":["@import '../../global/app.scss';\n\nmy-backdrop {\n  width: 100%;\n  height: 100%;\n  background-color: $backdrop_black;\n  position: fixed;\n  z-index: 100;\n  left: 0;\n  top: 0;\n}\n","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-backdrop2.js","mappings":";;AAAA,MAAM,aAAa,GAAG,ixFAAixF;;MCO1xF,UAAU;;;;;;EACrB,MAAM;IACJ,OAAO,IAAI,CAAC;GACb;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/my-backdrop/my-backdrop.scss?tag=my-backdrop&encapsulation=shadow","./src/components/my-backdrop/my-backdrop.tsx"],"sourcesContent":["@import '../../global/app.scss';\n\n:host {\n  display: block;\n  width: 100%;\n  height: 100%;\n  background-color: $backdrop_black;\n  position: fixed;\n  z-index: 100;\n  left: 0;\n  top: 0;\n}\n","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"],"version":3}

package/dist/components/my-colorbox2.js

@@ -2,12 +2,13 @@ import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/clien
 import { s as setDataLayer } from './gtmUtils.js';
 import { A as APIURL, a as accessToken } from './index2.js';
 
-const myColorboxCss = "@font-face{font-family:\"Galatea\";src:url(\"/assets/fonts/Galatea-Regular.woff2\") format(\"woff2\"), url(\"/assets/fonts/Galatea-Regular.woff\") format(\"woff\"), url(\"/assets/fonts/Galatea-Regular.ttf\") format(\"truetype\");font-weight:normal;font-style:normal;font-display:swap}.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}";
+const myColorboxCss = "@font-face{font-family:\"Galatea\";src:url(\"/assets/fonts/Galatea-Regular.woff2\") format(\"woff2\"), url(\"/assets/fonts/Galatea-Regular.woff\") format(\"woff\"), url(\"/assets/fonts/Galatea-Regular.ttf\") format(\"truetype\");font-weight:normal;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;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}";
 
 const MyColorBox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
+    this.__attachShadow();
     this.colorCheck = () => {
       this.checkTimeout = setTimeout(() => {
         setDataLayer({
@@ -47,7 +48,7 @@ const MyColorBox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       } }, h("div", { class: "color-name" }, this.name)));
   }
   static get style() { return myColorboxCss; }
-}, [0, "my-colorbox", {
+}, [1, "my-colorbox", {
     "color": [1],
     "name": [1],
     "shop": [1],

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

@@ -1 +1 @@
-{"file":"my-colorbox2.js","mappings":";;;;AAAA,MAAM,aAAa,GAAG,sjCAAsjC;;MCS/jC,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,23GAA23G;;MCUp4G,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&encapsulation=shadow","./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  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"],"version":3}

package/dist/components/my-colorinfo2.js

@@ -3,12 +3,13 @@ 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 myColorinfoCss = "@font-face{font-family:\"Galatea\";src:url(\"/assets/fonts/Galatea-Regular.woff2\") format(\"woff2\"), url(\"/assets/fonts/Galatea-Regular.woff\") format(\"woff\"), url(\"/assets/fonts/Galatea-Regular.ttf\") format(\"truetype\");font-weight:normal;font-style:normal;font-display:swap}.pallete-wrapper.sc-my-colorinfo *.sc-my-colorinfo{font-family:\"Galatea\", sans-serif}.boxes__box-content.sc-my-colorinfo{width:100%;margin-bottom:5px;height:500px;text-align:left;display:flex;flex-direction:row;justify-content:space-between;position:relative}.boxes__box-content.sc-my-colorinfo .closebtn.sc-my-colorinfo{position:absolute;right:10px;top:10px;width:53px;height:53px;cursor:pointer;object-fit:cover;z-index:9999}@media (max-width: 1024px){.boxes__box-content.sc-my-colorinfo{flex-direction:column-reverse;height:auto}}@media (max-width: 768px){.boxes__box-content.sc-my-colorinfo{margin:0 auto}}.boxes__box-content__info.sc-my-colorinfo{width:40%;padding:50px 40px;position:relative;display:flex;flex-direction:column;justify-content:space-between}@media (max-width: 1024px){.boxes__box-content__info.sc-my-colorinfo{width:100%;padding:15px;min-height:100px}}@media (max-width: 768px){.boxes__box-content__info.sc-my-colorinfo{min-height:auto}}.boxes__box-content__info__header.sc-my-colorinfo{display:flex;flex-direction:column;align-items:flex-start}.boxes__box-content__info.sc-my-colorinfo h2.sc-my-colorinfo{font-size:35px;font-weight:normal;margin-bottom:30px;color:#232323}@media (max-width: 768px){.boxes__box-content__info.sc-my-colorinfo h2.sc-my-colorinfo{font-size:16px;text-align:center;margin-bottom:15px;margin-top:5px}}.boxes__box-content__info.sc-my-colorinfo h4.sc-my-colorinfo{margin-top:0px;margin-bottom:15px;font-size:16px;color:#4c4c4c}.boxes__box-content__info__value.sc-my-colorinfo{display:flex;flex-direction:column;align-items:flex-start;gap:20px}@media (max-width: 1024px){.boxes__box-content__info__value.sc-my-colorinfo{justify-content:flex-start;margin-top:30px}}@media (max-width: 768px){.boxes__box-content__info__value.sc-my-colorinfo{flex-direction:column}}@media (max-width: 768px){.boxes__box-content__info__value-image.sc-my-colorinfo{margin:0 auto;margin-bottom:10px}}.boxes__box-content__info__value-image.sc-my-colorinfo img.sc-my-colorinfo{width:114px;object-fit:cover}@media (max-width: 1024px){.boxes__box-content__info__value-image.sc-my-colorinfo img.sc-my-colorinfo{width:75px}}.boxes__box-content__info__value-product.sc-my-colorinfo{color:#232323;margin-left:10px}@media (max-width: 1024px){.boxes__box-content__info__value-product.sc-my-colorinfo h2.sc-my-colorinfo{font-size:26px;margin:0;margin-right:10px}}@media (max-width: 768px){.boxes__box-content__info__value-product.sc-my-colorinfo h2.sc-my-colorinfo{font-size:16px}}.boxes__box-content__info__value-product.sc-my-colorinfo p.sc-my-colorinfo{font-size:20px;margin-top:0px;margin-bottom:0px}.boxes__box-content__info__value-product.sc-my-colorinfo p.sc-my-colorinfo:last-of-type{margin-bottom:20px}@media (max-width: 1024px){.boxes__box-content__info__value-product.sc-my-colorinfo p.sc-my-colorinfo:last-of-type{margin-bottom:0}}@media (max-width: 768px){.boxes__box-content__info__value-product.sc-my-colorinfo p.sc-my-colorinfo{font-size:10px}}@media (max-width: 1024px){.boxes__box-content__info__value-product.sc-my-colorinfo>div.sc-my-colorinfo{display:flex;justify-content:flex-start;align-items:center}}@media (max-width: 768px){.boxes__box-content__info__value-product.sc-my-colorinfo>div.sc-my-colorinfo{flex-direction:column}}.boxes__box-content__info__tester.sc-my-colorinfo{display:flex;flex-direction:column;gap:15px;width:100%}@media (max-width: 1024px){.boxes__box-content__info__tester.sc-my-colorinfo{text-align:center}}.boxes__box-content__info__tester.sc-my-colorinfo .tester-text.sc-my-colorinfo h2.sc-my-colorinfo{margin:0 0 10px;font-size:18px;font-weight:700}.boxes__box-content__info__tester.sc-my-colorinfo .tester-text.sc-my-colorinfo p.sc-my-colorinfo{margin:0;font-size:14px}.boxes__box-content__info__tester.sc-my-colorinfo .tester-buy.sc-my-colorinfo{display:flex;align-items:center;gap:15px}@media (max-width: 1024px){.boxes__box-content__info__tester.sc-my-colorinfo .tester-buy.sc-my-colorinfo{flex-direction:column}.boxes__box-content__info__tester.sc-my-colorinfo .tester-buy.sc-my-colorinfo button.sc-my-colorinfo{margin:0;max-width:100%}}.boxes__box-content__info__tester.sc-my-colorinfo .price.sc-my-colorinfo{font-size:20px;font-weight:600}.boxes__box-content__slider.sc-my-colorinfo{width:60%;min-width:60%;max-width:60%;position:relative}@media (max-width: 1024px){.boxes__box-content__slider.sc-my-colorinfo{width:100%;display:block;min-width:100%;max-width:100%}}.boxes__box-content__slider.sc-my-colorinfo .color-big-image.sc-my-colorinfo{width:100%;height:100%;object-fit:cover}@media (max-width: 1024px){.boxes__box-content__slider.sc-my-colorinfo .color-big-image.sc-my-colorinfo{height:300px}}.boxes__box-content__white.sc-my-colorinfo .tester-text.sc-my-colorinfo,.boxes__box-content__white.sc-my-colorinfo .tester-buy.sc-my-colorinfo{color:#fff}.boxes__box-content__white.sc-my-colorinfo h2.sc-my-colorinfo{color:#fff}.button.sc-my-colorinfo,a.button.sc-my-colorinfo{background-color:#fff;font-size:16px;box-shadow:0px 10px 20px rgba(0, 0, 0, 0.1);border-radius:22px;padding:10px 35px;color:#232323;text-decoration:none;text-align:center;transition:all 0.7s ease-in-out;border:none;cursor:pointer;display:flex;align-items:center;gap:5px}.button.sc-my-colorinfo .shape-icon.sc-my-colorinfo,a.button.sc-my-colorinfo .shape-icon.sc-my-colorinfo{display:inline-flex}.button.sc-my-colorinfo .shape-icon.sc-my-colorinfo svg.sc-my-colorinfo,a.button.sc-my-colorinfo .shape-icon.sc-my-colorinfo svg.sc-my-colorinfo{display:block}.button.sc-my-colorinfo .shape-icon.sc-my-colorinfo path.sc-my-colorinfo,.button.sc-my-colorinfo .shape-icon.sc-my-colorinfo .shape-icon__path.sc-my-colorinfo,a.button.sc-my-colorinfo .shape-icon.sc-my-colorinfo path.sc-my-colorinfo,a.button.sc-my-colorinfo .shape-icon.sc-my-colorinfo .shape-icon__path.sc-my-colorinfo{fill:currentColor;transition:fill 0.7s ease-in-out}.button.fit.sc-my-colorinfo,a.button.fit.sc-my-colorinfo{padding:10px 15px}.button.sc-my-colorinfo:hover,a.button.sc-my-colorinfo:hover{color:#fff;background-color:#232323}.button.brown.sc-my-colorinfo,a.button.brown.sc-my-colorinfo{background-color:#3c2114;color:#fff}.button.brown.sc-my-colorinfo:hover,a.button.brown.sc-my-colorinfo:hover{color:#fff;background-color:#232323}.button.inverse.sc-my-colorinfo,a.button.inverse.sc-my-colorinfo{background-color:#232323;color:#fff}.button.inverse.sc-my-colorinfo:hover,a.button.inverse.sc-my-colorinfo:hover{color:#232323;background-color:#fff}.button.inverse.sc-my-colorinfo svg.sc-my-colorinfo path.sc-my-colorinfo,a.button.inverse.sc-my-colorinfo svg.sc-my-colorinfo path.sc-my-colorinfo{fill:#fff}.button.sc-my-colorinfo:disabled,a.button.sc-my-colorinfo:disabled{cursor:not-allowed;background-color:white;opacity:0.5}.button.sc-my-colorinfo:disabled.brown,a.button.sc-my-colorinfo:disabled.brown{background-color:black;color:white;opacity:0.5}.button.sc-my-colorinfo:disabled.inverse,a.button.sc-my-colorinfo:disabled.inverse{background-color:black;color:white;opacity:0.5}.button.sc-my-colorinfo:disabled:hover,a.button.sc-my-colorinfo:disabled:hover{background-color:inherit;color:inherit;opacity:0.5}@media (max-width: 1024px){.button.sc-my-colorinfo,a.button.sc-my-colorinfo{max-width:150px;font-size:13px;padding:12px 25px}}@media (max-width: 768px){.button.sc-my-colorinfo,a.button.sc-my-colorinfo{margin:0 auto}}.divider.sc-my-colorinfo{border:1px solid #4c4c4c;opacity:0.2;margin-bottom:20px}@media (max-width: 768px){.divider.sc-my-colorinfo{margin:10px 0px;display:none}}";
+const myColorinfoCss = "@font-face{font-family:\"Galatea\";src:url(\"/assets/fonts/Galatea-Regular.woff2\") format(\"woff2\"), url(\"/assets/fonts/Galatea-Regular.woff\") format(\"woff\"), url(\"/assets/fonts/Galatea-Regular.ttf\") format(\"truetype\");font-weight:normal;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;height:500px;text-align:left;display:flex;flex-direction:row;justify-content:space-between;position:relative}.boxes__box-content .closebtn{position:absolute;right:10px;top:10px;width:53px;height:53px;cursor:pointer;object-fit:cover;z-index:9999}@media (max-width: 1024px){.boxes__box-content{flex-direction:column-reverse;height:auto}}@media (max-width: 768px){.boxes__box-content{margin:0 auto}}.boxes__box-content__info{width:40%;padding:50px 40px;position:relative;display:flex;flex-direction:column;justify-content:space-between}@media (max-width: 1024px){.boxes__box-content__info{width:100%;padding:15px;min-height:100px}}@media (max-width: 768px){.boxes__box-content__info{min-height:auto}}.boxes__box-content__info__header{display:flex;flex-direction:column;align-items:flex-start}.boxes__box-content__info h2{font-size:35px;font-weight:normal;margin-bottom:30px;color:#232323}@media (max-width: 768px){.boxes__box-content__info h2{font-size:16px;text-align:center;margin-bottom:15px;margin-top:5px}}.boxes__box-content__info h4{margin-top:0px;margin-bottom:15px;font-size:16px;color:#4c4c4c}.boxes__box-content__info__value{display:flex;flex-direction:column;align-items:flex-start;gap:20px}@media (max-width: 1024px){.boxes__box-content__info__value{justify-content:flex-start;margin-top:30px}}@media (max-width: 768px){.boxes__box-content__info__value{flex-direction:column}}@media (max-width: 768px){.boxes__box-content__info__value-image{margin:0 auto;margin-bottom:10px}}.boxes__box-content__info__value-image img{width:114px;object-fit:cover}@media (max-width: 1024px){.boxes__box-content__info__value-image img{width:75px}}.boxes__box-content__info__value-product{color:#232323;margin-left:10px}@media (max-width: 1024px){.boxes__box-content__info__value-product h2{font-size:26px;margin:0;margin-right:10px}}@media (max-width: 768px){.boxes__box-content__info__value-product h2{font-size:16px}}.boxes__box-content__info__value-product p{font-size:20px;margin-top:0px;margin-bottom:0px}.boxes__box-content__info__value-product p:last-of-type{margin-bottom:20px}@media (max-width: 1024px){.boxes__box-content__info__value-product p:last-of-type{margin-bottom:0}}@media (max-width: 768px){.boxes__box-content__info__value-product p{font-size:10px}}@media (max-width: 1024px){.boxes__box-content__info__value-product>div{display:flex;justify-content:flex-start;align-items:center}}@media (max-width: 768px){.boxes__box-content__info__value-product>div{flex-direction:column}}.boxes__box-content__info__tester{display:flex;flex-direction:column;gap:15px;width:100%}@media (max-width: 1024px){.boxes__box-content__info__tester{text-align:center}}.boxes__box-content__info__tester .tester-text h2{margin:0 0 10px;font-size:18px;font-weight:700}.boxes__box-content__info__tester .tester-text p{margin:0;font-size:14px}.boxes__box-content__info__tester .tester-buy{display:flex;align-items:center;gap:15px}@media (max-width: 1024px){.boxes__box-content__info__tester .tester-buy{flex-direction:column}.boxes__box-content__info__tester .tester-buy button{margin:0;max-width:100%}}.boxes__box-content__info__tester .price{font-size:20px;font-weight:600}.boxes__box-content__slider{width:60%;min-width:60%;max-width:60%;position:relative}@media (max-width: 1024px){.boxes__box-content__slider{width:100%;display:block;min-width:100%;max-width:100%}}.boxes__box-content__slider .color-big-image{width:100%;height:100%;object-fit:cover}@media (max-width: 1024px){.boxes__box-content__slider .color-big-image{height:300px}}.boxes__box-content__white .tester-text,.boxes__box-content__white .tester-buy{color:#fff}.boxes__box-content__white h2{color:#fff}.button,a.button{background-color:#fff;font-size:16px;box-shadow:0px 10px 20px rgba(0, 0, 0, 0.1);border-radius:22px;padding:10px 35px;color:#232323;text-decoration:none;text-align:center;transition:all 0.7s ease-in-out;border:none;cursor:pointer;display:flex;align-items:center;gap:5px}.button .shape-icon,a.button .shape-icon{display:inline-flex}.button .shape-icon svg,a.button .shape-icon svg{display:block}.button .shape-icon path,.button .shape-icon .shape-icon__path,a.button .shape-icon path,a.button .shape-icon .shape-icon__path{fill:currentColor;transition:fill 0.7s ease-in-out}.button.fit,a.button.fit{padding:10px 15px}.button:hover,a.button:hover{color:#fff;background-color:#232323}.button.brown,a.button.brown{background-color:#3c2114;color:#fff}.button.brown:hover,a.button.brown:hover{color:#fff;background-color:#232323}.button.inverse,a.button.inverse{background-color:#232323;color:#fff}.button.inverse:hover,a.button.inverse:hover{color:#232323;background-color:#fff}.button.inverse svg path,a.button.inverse svg path{fill:#fff}.button:disabled,a.button:disabled{cursor:not-allowed;background-color:white;opacity:0.5}.button:disabled.brown,a.button:disabled.brown{background-color:black;color:white;opacity:0.5}.button:disabled.inverse,a.button:disabled.inverse{background-color:black;color:white;opacity:0.5}.button:disabled:hover,a.button:disabled:hover{background-color:inherit;color:inherit;opacity:0.5}@media (max-width: 1024px){.button,a.button{max-width:150px;font-size:13px;padding:12px 25px}}@media (max-width: 768px){.button,a.button{margin:0 auto}}.divider{border:1px solid #4c4c4c;opacity:0.2;margin-bottom:20px}@media (max-width: 768px){.divider{margin:10px 0px;display:none}}";
 
 const MyColorInfo = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
+    this.__attachShadow();
     this.closeInfoBox = createEvent(this, "closeInfoBox", 7);
     this.addToBasket = createEvent(this, "addToBasket", 7);
     this.goToProduct = () => {
@@ -100,7 +101,7 @@ const MyColorInfo = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   static get assetsDirs() { return ["assets"]; }
   static get style() { return myColorinfoCss; }
-}, [2, "my-colorinfo", {
+}, [1, "my-colorinfo", {
     "currentColor": [16],
     "shop": [1],
     "product": [1],

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

@@ -1 +1 @@
-{"file":"my-colorinfo2.js","mappings":";;;;;AAAA,MAAM,cAAc,GAAG,8mPAA8mP;;MCWxnP,WAAW;;;;;;IAiBtB,gBAAW,GAAG;;MACZ,IAAI,CAAC,YAAY;QACf,YAAY,CAAC;UACX,KAAK,EAAE,aAAa;UACpB,IAAI,EAAE,IAAI,CAAC,IAAI;UACf,OAAO,EAAE,IAAI,CAAC,OAAO;UACrB,KAAK,EAAE,MAAA,IAAI,CAAC,YAAY,0CAAE,IAAI;SAC/B,CAAC,CAAC;MACL,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;KAC1B,CAAC;IAEF,uBAAkB,GAAG;MACnB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;KAC1B,CAAC;IAEF,wBAAmB,GAAG;;MACpB,IAAI,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE;QACrC,OAAO,WAAK,KAAK,EAAE,iBAAiB,EAAE,GAAG,EAAE,GAAG,MAAM,WAAW,IAAI,CAAC,YAAY,CAAC,QAAQ,iBAAiB,WAAW,EAAE,EAAE,GAAG,EAAC,aAAa,GAAG,CAAC;OAC/I;WAAM;QACL,OAAO,iBAAW,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,MAAA,IAAI,CAAC,IAAI,0CAAE,MAAM,GAAc,CAAC;OAClI;KACF,CAAC;IAEF,YAAO,GAAG;;MACR,IAAI,IAAI,CAAC,QAAQ,EAAE;QACjB,OAAO,GAAG,IAAI,CAAC,QAAQ,IAAI,MAAA,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,YAAY,CAAC,KAAK,0CAAE,IAAI,CAAC,CAAC,IAAU,KAAK,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,MAAK,IAAI,CAAC,IAAI,CAAC,0CAAE,IAAI,EAAE,CAAC;OAC7G;WAAM;QACL,OAAO,MAAA,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,YAAY,CAAC,KAAK,0CAAE,IAAI,CAAC,CAAC,IAAU,KAAK,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,MAAK,IAAI,CAAC,IAAI,CAAC,0CAAE,IAAI,CAAC;OACvF;KACF,CAAC;IAEF,0BAAqB,GAAG,CAAC,MAAc;MACrC,OAAO,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;KAC7E,CAAC;IAEF,0BAAqB,GAAG;;MACtB,IAAI,IAAI,CAAC,YAAY,CAAC,eAAe;QAAE,OAAO,IAAI,CAAC;MACnD,MAAM,GAAG,GAAG,MAAA,MAAA,IAAI,CAAC,YAAY,CAAC,GAAG,0CAAE,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,mCAAI,EAAE,CAAC;MAC1D,IAAI,GAAG,CAAC,MAAM,KAAK,CAAC,IAAI,GAAG,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,KAAK,CAAC;MACvD,MAAM,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,MAAM,KAAK,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,GAAG,CAAC;MACnF,MAAM,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,MAAM,KAAK,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,GAAG,CAAC;MACnF,MAAM,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,MAAM,KAAK,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,GAAG,CAAC;MACnF,MAAM,SAAS,GAAG,KAAK,GAAG,CAAC,GAAG,KAAK,GAAG,CAAC,GAAG,KAAK,GAAG,CAAC,CAAC;MACpD,OAAO,SAAS,GAAG,IAAI,CAAC;KACzB,CAAC;IAEF,mBAAc,GAAG;MACf,IAAI,IAAI,CAAC,YAAY,CAAC,eAAe;QAAE,OAAO,OAAO,CAAC;MACtD,OAAO,IAAI,CAAC,qBAAqB,EAAE,GAAG,SAAS,GAAG,EAAE,CAAC;KACtD,CAAC;IAEF,sBAAiB,GAAG;;MAClB,IAAI,EAAC,MAAA,IAAI,CAAC,gBAAgB,0CAAE,oBAAoB,CAAA;QAAE,OAAO;MACzD,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;MAC1B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;QACpB,EAAE,EAAE,IAAI,CAAC,gBAAgB,CAAC,oBAAoB;OAC/C,CAAC,CAAC;MAEH,UAAU,CAAC;QACT,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;OAC5B,EAAE,KAAK,CAAC,CAAC;KACX,CAAC;;;;;;;gBAvE6B,IAAI;oBACP,KAAK;;sBAEZ,WAAW;sBACX,WAAW;yBACR,KAAK;;EAoE7B,MAAM;;IACJ,QACE,WACE,KAAK,EAAE,sBAAsB,IAAI,CAAC,YAAY,CAAC,SAAS,GAAG,2BAA2B,GAAG,EAAE,EAAE,EAC7F,KAAK,EAAE;QACL,UAAU,EAAE,IAAI,CAAC,YAAY,CAAC,eAAe,GAAG,OAAO,GAAG,IAAI,CAAC,YAAY,CAAC,GAAG;QAC/E,QAAQ,EAAE,GAAG,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI;OAC5D,IAEA,IAAI,CAAC,QAAQ,IAAI,WAAK,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,IAAI,CAAC,kBAAkB,EAAE,GAAG,EAAE,YAAY,CAAC,YAAY,IAAI,CAAC,UAAU,EAAE,CAAC,EAAE,GAAG,EAAC,UAAU,GAAG,EAC/I,WACE,KAAK,EAAC,0BAA0B,EAChC,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,GAAG,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,YAAY,GAAG,EAAE,IAAI,GAAG,EAAE;OAClF,IAED,WAAK,KAAK,EAAC,kCAAkC,IAC1C,CAAC,IAAI,CAAC,QAAQ,IAAI,WAAK,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,IAAI,CAAC,kBAAkB,EAAE,GAAG,EAAE,YAAY,CAAC,YAAY,IAAI,CAAC,UAAU,EAAE,CAAC,EAAE,GAAG,EAAC,UAAU,GAAG,EAChJ,cAAK,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAM,EAC5D,CAAC,IAAI,CAAC,QAAQ,IAAI,cAAK,IAAI,CAAC,YAAY,CAAC,MAAM,CAAM,EACrD,IAAI,CAAC,YAAY,KAAI,MAAA,IAAI,CAAC,YAAY,CAAC,KAAK,0CAAE,IAAI,CAAC,CAAC,IAAU,KAAK,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,MAAK,IAAI,CAAC,IAAI,CAAC,CAAA,KAC3F,SAAG,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,EAAE,KAAK,EAAE,UAAU,IAAI,CAAC,cAAc,EAAE,EAAE,oBAExF,CACL,CACG,EACN,WAAK,KAAK,EAAC,iCAAiC,IAC1C,WAAK,KAAK,EAAC,SAAS,GAAO,EAE3B,WAAK,KAAK,EAAC,kCAAkC,IAC1C,GAAG,EACJ,WAAK,KAAK,EAAC,SAAS,GAAO,EAC3B,WAAK,KAAK,EAAC,aAAa,IACtB,kCAAqB,EACrB,uDAAoC,CAChC,EACN,WAAK,KAAK,EAAC,YAAY,IACrB,WAAK,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,KAAK,KAAK,GAAG,EAAE,CAAO,EAE/D,cACE,KAAK,EAAE,cAAc,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,IAAI,CAAC,gBAAgB,GAAG,UAAU,GAAG,EAAE,EAAE,EACxF,OAAO,EAAE,IAAI,CAAC,iBAAiB,EAC/B,QAAQ,EAAE,CAAC,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,aAAa,IAEtD,YAAM,KAAK,EAAC,YAAY,iBAAa,MAAM,IACzC,WAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,IAChF,YACE,KAAK,EAAC,kBAAkB,EACxB,SAAS,EAAC,wBAAwB,EAClC,CAAC,EAAC,ynDAAynD,GAC3nD,CACE,CACD,EAGN,IAAI,CAAC,aAAa,GAAG,oBAAoB,GAAG,CAAC,IAAI,CAAC,gBAAgB,GAAG,4BAA4B,GAAG,kBAAkB,CAChH,CACL,CACF,CACF,CACF,EACN,WAAK,KAAK,EAAC,4BAA4B,IAAE,IAAI,CAAC,mBAAmB,EAAE,CAAO,CACtE,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/my-colorinfo/my-colorinfo.scss?tag=my-colorinfo&encapsulation=scoped","./src/components/my-colorinfo/my-colorinfo.tsx"],"sourcesContent":["@import '../../global/app.scss';\n\n.boxes__box-content {\n  width: 100%;\n  margin-bottom: 5px;\n  height: 500px;\n  text-align: left;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  position: relative;\n\n  .closebtn {\n    position: absolute;\n    right: 10px;\n    top: 10px;\n    width: 53px;\n    height: 53px;\n    cursor: pointer;\n    object-fit: cover;\n    z-index: 9999;\n  }\n\n  @media (max-width: $medium) {\n    flex-direction: column-reverse;\n    height: auto;\n  }\n\n  @media (max-width: $small) {\n    margin: 0 auto;\n  }\n\n  &__info {\n    width: 40%;\n    padding: 50px 40px;\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n\n    @media (max-width: $medium) {\n      width: 100%;\n      padding: 15px;\n      min-height: 100px;\n    }\n\n    @media (max-width: $small) {\n      min-height: auto;\n    }\n\n    &__header {\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n    }\n\n    h2 {\n      font-size: 35px;\n      font-weight: normal;\n      margin-bottom: 30px;\n      color: $black;\n\n      @media (max-width: $small) {\n        font-size: 16px;\n        text-align: center;\n        margin-bottom: 15px;\n        margin-top: 5px;\n      }\n    }\n\n    h4 {\n      margin-top: 0px;\n      margin-bottom: 15px;\n      font-size: 16px;\n      color: $grey;\n    }\n\n    &__value {\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n      gap: 20px;\n\n      @media (max-width: $medium) {\n        justify-content: flex-start;\n        margin-top: 30px;\n      }\n\n      @media (max-width: $small) {\n        flex-direction: column;\n      }\n\n      &-image {\n        @media (max-width: $small) {\n          margin: 0 auto;\n          margin-bottom: 10px;\n        }\n\n        img {\n          width: 114px;\n          object-fit: cover;\n\n          @media (max-width: $medium) {\n            width: 75px;\n          }\n        }\n      }\n\n      &-product {\n        color: $black;\n        margin-left: 10px;\n\n        h2 {\n          @media (max-width: $medium) {\n            font-size: 26px;\n            margin: 0;\n            margin-right: 10px;\n          }\n\n          @media (max-width: $small) {\n            font-size: 16px;\n          }\n        }\n\n        p {\n          font-size: 20px;\n          margin-top: 0px;\n          margin-bottom: 0px;\n\n          &:last-of-type {\n            margin-bottom: 20px;\n\n            @media (max-width: $medium) {\n              margin-bottom: 0;\n            }\n          }\n\n          @media (max-width: $small) {\n            font-size: 10px;\n          }\n        }\n\n        > div {\n          @media (max-width: $medium) {\n            display: flex;\n            justify-content: flex-start;\n            align-items: center;\n          }\n\n          @media (max-width: $small) {\n            flex-direction: column;\n          }\n        }\n      }\n    }\n\n    &__tester {\n      display: flex;\n      flex-direction: column;\n      gap: 15px;\n      width: 100%;\n\n      @media (max-width: $medium) {\n        text-align: center;\n      }\n\n      .tester-text {\n        h2 {\n          margin: 0 0 10px;\n          font-size: 18px;\n          font-weight: 700;\n        }\n\n        p {\n          margin: 0;\n          font-size: 14px;\n        }\n      }\n\n      .tester-buy {\n        display: flex;\n        align-items: center;\n        gap: 15px;\n\n        @media (max-width: $medium) {\n          flex-direction: column;\n\n          button {\n            margin: 0;\n            max-width: 100%;\n          }\n        }\n      }\n\n      .price {\n        font-size: 20px;\n        font-weight: 600;\n      }\n    }\n  }\n\n  &__slider {\n    width: 60%;\n    min-width: 60%;\n    max-width: 60%;\n    position: relative;\n\n    @media (max-width: $medium) {\n      width: 100%;\n      display: block;\n      min-width: 100%;\n      max-width: 100%;\n    }\n\n    .color-big-image {\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n\n      @media (max-width: $medium) {\n        height: 300px;\n      }\n    }\n  }\n\n  &__white {\n    .tester-text,\n    .tester-buy {\n      color: $white;\n    }\n\n    h2 {\n      color: $white;\n    }\n  }\n}\n\n.button,\na.button {\n  background-color: $white;\n  font-size: 16px;\n  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);\n  border-radius: 22px;\n  padding: 10px 35px;\n  color: $black;\n  text-decoration: none;\n  text-align: center;\n  transition: all 0.7s ease-in-out;\n  border: none;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  gap: 5px;\n\n  .shape-icon {\n    display: inline-flex;\n\n    svg {\n      display: block;\n    }\n\n    path,\n    .shape-icon__path {\n      fill: currentColor;\n      transition: fill 0.7s ease-in-out;\n    }\n  }\n\n  &.fit {\n    padding: 10px 15px;\n  }\n\n  &:hover {\n    color: $white;\n    background-color: $black;\n  }\n\n  &.brown {\n    background-color: $brown;\n    color: $white;\n\n    &:hover {\n      color: $white;\n      background-color: $black;\n    }\n  }\n\n  &.inverse {\n    background-color: $black;\n    color: $white;\n\n    &:hover {\n      color: $black;\n      background-color: $white;\n    }\n\n    svg {\n      path {\n        fill: $white;\n      }\n    }\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    background-color: lighten($white_shadow, 20%);\n    opacity: 0.5;\n\n    &.brown {\n      background-color: darken($brown, 20%);\n      color: lighten($white, 20%);\n      opacity: 0.5;\n    }\n\n    &.inverse {\n      background-color: darken($black, 20%);\n      color: lighten($white, 20%);\n      opacity: 0.5;\n    }\n\n    &:hover {\n      background-color: inherit;\n      color: inherit;\n      opacity: 0.5;\n    }\n  }\n\n  @media (max-width: $medium) {\n    max-width: 150px;\n    font-size: 13px;\n    padding: 12px 25px;\n  }\n\n  @media (max-width: $small) {\n    margin: 0 auto;\n  }\n}\n\n.divider {\n  border: 1px solid $grey;\n  opacity: 0.2;\n  margin-bottom: 20px;\n\n  @media (max-width: $small) {\n    margin: 10px 0px;\n    display: none;\n  }\n}\n\n","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-colorinfo2.js","mappings":"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","names":[],"sources":["./src/components/my-colorinfo/my-colorinfo.scss?tag=my-colorinfo&encapsulation=shadow","./src/components/my-colorinfo/my-colorinfo.tsx"],"sourcesContent":["@import '../../global/app.scss';\n\n.boxes__box-content {\n  width: 100%;\n  margin-bottom: 5px;\n  height: 500px;\n  text-align: left;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  position: relative;\n\n  .closebtn {\n    position: absolute;\n    right: 10px;\n    top: 10px;\n    width: 53px;\n    height: 53px;\n    cursor: pointer;\n    object-fit: cover;\n    z-index: 9999;\n  }\n\n  @media (max-width: $medium) {\n    flex-direction: column-reverse;\n    height: auto;\n  }\n\n  @media (max-width: $small) {\n    margin: 0 auto;\n  }\n\n  &__info {\n    width: 40%;\n    padding: 50px 40px;\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n\n    @media (max-width: $medium) {\n      width: 100%;\n      padding: 15px;\n      min-height: 100px;\n    }\n\n    @media (max-width: $small) {\n      min-height: auto;\n    }\n\n    &__header {\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n    }\n\n    h2 {\n      font-size: 35px;\n      font-weight: normal;\n      margin-bottom: 30px;\n      color: $black;\n\n      @media (max-width: $small) {\n        font-size: 16px;\n        text-align: center;\n        margin-bottom: 15px;\n        margin-top: 5px;\n      }\n    }\n\n    h4 {\n      margin-top: 0px;\n      margin-bottom: 15px;\n      font-size: 16px;\n      color: $grey;\n    }\n\n    &__value {\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n      gap: 20px;\n\n      @media (max-width: $medium) {\n        justify-content: flex-start;\n        margin-top: 30px;\n      }\n\n      @media (max-width: $small) {\n        flex-direction: column;\n      }\n\n      &-image {\n        @media (max-width: $small) {\n          margin: 0 auto;\n          margin-bottom: 10px;\n        }\n\n        img {\n          width: 114px;\n          object-fit: cover;\n\n          @media (max-width: $medium) {\n            width: 75px;\n          }\n        }\n      }\n\n      &-product {\n        color: $black;\n        margin-left: 10px;\n\n        h2 {\n          @media (max-width: $medium) {\n            font-size: 26px;\n            margin: 0;\n            margin-right: 10px;\n          }\n\n          @media (max-width: $small) {\n            font-size: 16px;\n          }\n        }\n\n        p {\n          font-size: 20px;\n          margin-top: 0px;\n          margin-bottom: 0px;\n\n          &:last-of-type {\n            margin-bottom: 20px;\n\n            @media (max-width: $medium) {\n              margin-bottom: 0;\n            }\n          }\n\n          @media (max-width: $small) {\n            font-size: 10px;\n          }\n        }\n\n        > div {\n          @media (max-width: $medium) {\n            display: flex;\n            justify-content: flex-start;\n            align-items: center;\n          }\n\n          @media (max-width: $small) {\n            flex-direction: column;\n          }\n        }\n      }\n    }\n\n    &__tester {\n      display: flex;\n      flex-direction: column;\n      gap: 15px;\n      width: 100%;\n\n      @media (max-width: $medium) {\n        text-align: center;\n      }\n\n      .tester-text {\n        h2 {\n          margin: 0 0 10px;\n          font-size: 18px;\n          font-weight: 700;\n        }\n\n        p {\n          margin: 0;\n          font-size: 14px;\n        }\n      }\n\n      .tester-buy {\n        display: flex;\n        align-items: center;\n        gap: 15px;\n\n        @media (max-width: $medium) {\n          flex-direction: column;\n\n          button {\n            margin: 0;\n            max-width: 100%;\n          }\n        }\n      }\n\n      .price {\n        font-size: 20px;\n        font-weight: 600;\n      }\n    }\n  }\n\n  &__slider {\n    width: 60%;\n    min-width: 60%;\n    max-width: 60%;\n    position: relative;\n\n    @media (max-width: $medium) {\n      width: 100%;\n      display: block;\n      min-width: 100%;\n      max-width: 100%;\n    }\n\n    .color-big-image {\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n\n      @media (max-width: $medium) {\n        height: 300px;\n      }\n    }\n  }\n\n  &__white {\n    .tester-text,\n    .tester-buy {\n      color: $white;\n    }\n\n    h2 {\n      color: $white;\n    }\n  }\n}\n\n.button,\na.button {\n  background-color: $white;\n  font-size: 16px;\n  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);\n  border-radius: 22px;\n  padding: 10px 35px;\n  color: $black;\n  text-decoration: none;\n  text-align: center;\n  transition: all 0.7s ease-in-out;\n  border: none;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  gap: 5px;\n\n  .shape-icon {\n    display: inline-flex;\n\n    svg {\n      display: block;\n    }\n\n    path,\n    .shape-icon__path {\n      fill: currentColor;\n      transition: fill 0.7s ease-in-out;\n    }\n  }\n\n  &.fit {\n    padding: 10px 15px;\n  }\n\n  &:hover {\n    color: $white;\n    background-color: $black;\n  }\n\n  &.brown {\n    background-color: $brown;\n    color: $white;\n\n    &:hover {\n      color: $white;\n      background-color: $black;\n    }\n  }\n\n  &.inverse {\n    background-color: $black;\n    color: $white;\n\n    &:hover {\n      color: $black;\n      background-color: $white;\n    }\n\n    svg {\n      path {\n        fill: $white;\n      }\n    }\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    background-color: lighten($white_shadow, 20%);\n    opacity: 0.5;\n\n    &.brown {\n      background-color: darken($brown, 20%);\n      color: lighten($white, 20%);\n      opacity: 0.5;\n    }\n\n    &.inverse {\n      background-color: darken($black, 20%);\n      color: lighten($white, 20%);\n      opacity: 0.5;\n    }\n\n    &:hover {\n      background-color: inherit;\n      color: inherit;\n      opacity: 0.5;\n    }\n  }\n\n  @media (max-width: $medium) {\n    max-width: 150px;\n    font-size: 13px;\n    padding: 12px 25px;\n  }\n\n  @media (max-width: $small) {\n    margin: 0 auto;\n  }\n}\n\n.divider {\n  border: 1px solid $grey;\n  opacity: 0.2;\n  margin-bottom: 20px;\n\n  @media (max-width: $small) {\n    margin: 10px 0px;\n    display: none;\n  }\n}\n\n","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"],"version":3}

package/dist/components/my-component.js

@@ -123,12 +123,13 @@ const Helmet = (_props, children, utils) => {
     return null;
 };
 
-const myComponentCss = ".pallete-wrapper.sc-my-component{display:flex;flex-direction:column;align-items:center;justify-content:center}";
+const myComponentCss = ".pallete-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:center}";
 
 const MyModalBundle = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
+    this.__attachShadow();
     this.addToBasket = createEvent(this, "addToBasket", 7);
     this.shop = undefined;
     this.product = undefined;
@@ -181,7 +182,7 @@ const MyModalBundle = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   }
   get modalEl() { return this; }
   static get style() { return myComponentCss; }
-}, [2, "my-component", {
+}, [1, "my-component", {
     "shop": [1],
     "product": [1],
     "baselink": [1],

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

@@ -1 +1 @@
-{"file":"my-component.js","mappings":"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","names":["RenderTypes"],"sources":["./node_modules/.pnpm/@stencil+helmet@0.3.3/node_modules/@stencil/helmet/dist/util.js","./node_modules/.pnpm/@stencil+helmet@0.3.3/node_modules/@stencil/helmet/dist/dom.js","./node_modules/.pnpm/@stencil+helmet@0.3.3/node_modules/@stencil/helmet/dist/render.js","./node_modules/.pnpm/@stencil+helmet@0.3.3/node_modules/@stencil/helmet/dist/stencil-helmet.js","./src/components/my-component/my-component.scss?tag=my-component&encapsulation=scoped","./src/components/my-component/my-component.tsx"],"sourcesContent":["const isObject = (val) => !Array.isArray(val) && val !== null && typeof val === 'object';\nexport const hasAttributes = ({ vattrs }, requiredAttrs = []) => isObject(vattrs) && requiredAttrs.every(vattrs.hasOwnProperty.bind(vattrs));\nexport const isTextNode = ({ vtext }) => typeof vtext === 'string';\n// Can't use instanceof HTMLElement because MockHTMLElement during pre-rendering isn't\nexport const isElement = (val) => typeof val === 'object' && val.nodeType === 1 && typeof val.ownerDocument === 'object';\nexport const isElementArray = (val) => Array.isArray(val) && val.every(isElement);\n","import { isElement, isElementArray } from './util';\nexport const createElement = ({ vtag, vattrs, vchildren, vtext }, utils) => {\n    if (vtext != null) {\n        return document.createTextNode(vtext);\n    }\n    const element = document.createElement(vtag);\n    if (vattrs != null) {\n        for (const key in vattrs) {\n            element.setAttribute(key, vattrs[key]);\n        }\n    }\n    if (vchildren != null) {\n        utils.forEach(vchildren, (child) => {\n            element.appendChild(createElement(child, utils));\n        });\n    }\n    return element;\n};\nexport const shouldApplyToHead = (val) => isElement(val) || (isElementArray(val) && val.length === 2);\nexport const applyToHead = (element) => {\n    if (Array.isArray(element)) {\n        return document.head.replaceChild(element[0], element[1]);\n    }\n    return document.head.appendChild(element);\n};\n","import { hasAttributes, isTextNode } from './util';\nimport { createElement } from './dom';\nconst hasChildren = (node) => Array.isArray(node.vchildren);\nconst getFirstChild = (vchildren, utils) => {\n    let firstChild = null;\n    utils.forEach(vchildren || [], (c, i) => {\n        if (i === 0) {\n            firstChild = c;\n            return;\n        }\n    });\n    return firstChild;\n};\nfunction title(node, head, utils) {\n    const firstChild = getFirstChild(node.vchildren || [], utils);\n    if (firstChild && isTextNode(firstChild)) {\n        return [createElement(node, utils), head.querySelector('title')];\n    }\n}\nfunction meta(node, head, utils) {\n    var _a, _b, _c;\n    const namePropKey = ((_a = node.vattrs) === null || _a === void 0 ? void 0 : _a.property) ? 'property' : 'name';\n    const namePropValue = ((_b = node.vattrs) === null || _b === void 0 ? void 0 : _b.property) || ((_c = node.vattrs) === null || _c === void 0 ? void 0 : _c.name);\n    const existingElement = head.querySelector(`meta[${namePropKey}=\"${namePropValue}\"]`);\n    if (existingElement !== null) {\n        return [createElement(node, utils), existingElement];\n    }\n    else {\n        return createElement(node, utils);\n    }\n}\nfunction link(node, _head, utils) {\n    if (!hasChildren(node)) {\n        return createElement(node, utils);\n    }\n}\nfunction style(node, _head, utils) {\n    const firstChild = getFirstChild(node.vchildren || [], utils);\n    if (firstChild && isTextNode(firstChild)) {\n        return createElement(node, utils);\n    }\n}\nfunction script(node, _head, utils) {\n    if (hasChildren(node) || hasAttributes(node)) {\n        return createElement(node, utils);\n    }\n}\nfunction base(node, _head, utils) {\n    if (!hasChildren(node) && hasAttributes(node)) {\n        return createElement(node, utils);\n    }\n}\nconst template = createElement;\nconst noscript = createElement; // SSR only\nconst types = {\n    title,\n    meta,\n    link,\n    style,\n    script,\n    base,\n    template,\n    noscript,\n};\nexport default types;\n","import RenderTypes from './render';\nimport { shouldApplyToHead, applyToHead } from './dom';\nconst headExists = document && document.head;\nconst validTagNames = Object.keys(RenderTypes);\nconst isValidNode = (node) => validTagNames.indexOf(node.vtag) > -1;\nconst renderNode = (node, utils) => RenderTypes[node.vtag](node, document.head, utils);\nexport const Helmet = (_props, children, utils) => {\n    if (!headExists) {\n        return null;\n    }\n    const rendered = [];\n    const validChildren = [];\n    utils.forEach(children, (n) => {\n        if (isValidNode(n)) {\n            validChildren.push(n);\n            rendered.push(renderNode(n, utils));\n        }\n    });\n    // Build an HTMLElement for each provided virtual child\n    rendered\n        .filter(shouldApplyToHead)\n        .forEach(applyToHead);\n    return null;\n};\nexport default Helmet;\n",".pallete-wrapper {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n","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","mappings":";;;;;;;;;AAAA,MAAM,QAAQ,GAAG,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,GAAG,KAAK,IAAI,IAAI,OAAO,GAAG,KAAK,QAAQ,CAAC;AAClF,MAAM,aAAa,GAAG,CAAC,EAAE,MAAM,EAAE,EAAE,aAAa,GAAG,EAAE,KAAK,QAAQ,CAAC,MAAM,CAAC,IAAI,aAAa,CAAC,KAAK,CAAC,MAAM,CAAC,cAAc,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;AACtI,MAAM,UAAU,GAAG,CAAC,EAAE,KAAK,EAAE,KAAK,OAAO,KAAK,KAAK,QAAQ,CAAC;AACnE;AACO,MAAM,SAAS,GAAG,CAAC,GAAG,KAAK,OAAO,GAAG,KAAK,QAAQ,IAAI,GAAG,CAAC,QAAQ,KAAK,CAAC,IAAI,OAAO,GAAG,CAAC,aAAa,KAAK,QAAQ,CAAC;AAClH,MAAM,cAAc,GAAG,CAAC,GAAG,KAAK,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,GAAG,CAAC,KAAK,CAAC,SAAS,CAAC;;ACJ1E,MAAM,aAAa,GAAG,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,KAAK,KAAK;AAC5E,IAAI,IAAI,KAAK,IAAI,IAAI,EAAE;AACvB,QAAQ,OAAO,QAAQ,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAC9C,KAAK;AACL,IAAI,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;AACjD,IAAI,IAAI,MAAM,IAAI,IAAI,EAAE;AACxB,QAAQ,KAAK,MAAM,GAAG,IAAI,MAAM,EAAE;AAClC,YAAY,OAAO,CAAC,YAAY,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC;AACnD,SAAS;AACT,KAAK;AACL,IAAI,IAAI,SAAS,IAAI,IAAI,EAAE;AAC3B,QAAQ,KAAK,CAAC,OAAO,CAAC,SAAS,EAAE,CAAC,KAAK,KAAK;AAC5C,YAAY,OAAO,CAAC,WAAW,CAAC,aAAa,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC;AAC7D,SAAS,CAAC,CAAC;AACX,KAAK;AACL,IAAI,OAAO,OAAO,CAAC;AACnB,CAAC,CAAC;AACK,MAAM,iBAAiB,GAAG,CAAC,GAAG,KAAK,SAAS,CAAC,GAAG,CAAC,KAAK,cAAc,CAAC,GAAG,CAAC,IAAI,GAAG,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC;AAC/F,MAAM,WAAW,GAAG,CAAC,OAAO,KAAK;AACxC,IAAI,IAAI,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;AAChC,QAAQ,OAAO,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;AAClE,KAAK;AACL,IAAI,OAAO,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;AAC9C,CAAC;;ACtBD,MAAM,WAAW,GAAG,CAAC,IAAI,KAAK,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;AAC5D,MAAM,aAAa,GAAG,CAAC,SAAS,EAAE,KAAK,KAAK;AAC5C,IAAI,IAAI,UAAU,GAAG,IAAI,CAAC;AAC1B,IAAI,KAAK,CAAC,OAAO,CAAC,SAAS,IAAI,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK;AAC7C,QAAQ,IAAI,CAAC,KAAK,CAAC,EAAE;AACrB,YAAY,UAAU,GAAG,CAAC,CAAC;AAC3B,YAAY,OAAO;AACnB,SAAS;AACT,KAAK,CAAC,CAAC;AACP,IAAI,OAAO,UAAU,CAAC;AACtB,CAAC,CAAC;AACF,SAAS,KAAK,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE;AAClC,IAAI,MAAM,UAAU,GAAG,aAAa,CAAC,IAAI,CAAC,SAAS,IAAI,EAAE,EAAE,KAAK,CAAC,CAAC;AAClE,IAAI,IAAI,UAAU,IAAI,UAAU,CAAC,UAAU,CAAC,EAAE;AAC9C,QAAQ,OAAO,CAAC,aAAa,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC;AACzE,KAAK;AACL,CAAC;AACD,SAAS,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE;AACjC,IAAI,IAAI,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;AACnB,IAAI,MAAM,WAAW,GAAG,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,MAAM,MAAM,IAAI,IAAI,EAAE,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,QAAQ,IAAI,UAAU,GAAG,MAAM,CAAC;AACpH,IAAI,MAAM,aAAa,GAAG,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,MAAM,MAAM,IAAI,IAAI,EAAE,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,QAAQ,MAAM,CAAC,EAAE,GAAG,IAAI,CAAC,MAAM,MAAM,IAAI,IAAI,EAAE,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,CAAC;AACrK,IAAI,MAAM,eAAe,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC,KAAK,EAAE,WAAW,CAAC,EAAE,EAAE,aAAa,CAAC,EAAE,CAAC,CAAC,CAAC;AAC1F,IAAI,IAAI,eAAe,KAAK,IAAI,EAAE;AAClC,QAAQ,OAAO,CAAC,aAAa,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,eAAe,CAAC,CAAC;AAC7D,KAAK;AACL,SAAS;AACT,QAAQ,OAAO,aAAa,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;AAC1C,KAAK;AACL,CAAC;AACD,SAAS,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE;AAClC,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE;AAC5B,QAAQ,OAAO,aAAa,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;AAC1C,KAAK;AACL,CAAC;AACD,SAAS,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE;AACnC,IAAI,MAAM,UAAU,GAAG,aAAa,CAAC,IAAI,CAAC,SAAS,IAAI,EAAE,EAAE,KAAK,CAAC,CAAC;AAClE,IAAI,IAAI,UAAU,IAAI,UAAU,CAAC,UAAU,CAAC,EAAE;AAC9C,QAAQ,OAAO,aAAa,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;AAC1C,KAAK;AACL,CAAC;AACD,SAAS,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE;AACpC,IAAI,IAAI,WAAW,CAAC,IAAI,CAAC,IAAI,aAAa,CAAC,IAAI,CAAC,EAAE;AAClD,QAAQ,OAAO,aAAa,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;AAC1C,KAAK;AACL,CAAC;AACD,SAAS,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE;AAClC,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,aAAa,CAAC,IAAI,CAAC,EAAE;AACnD,QAAQ,OAAO,aAAa,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;AAC1C,KAAK;AACL,CAAC;AACD,MAAM,QAAQ,GAAG,aAAa,CAAC;AAC/B,MAAM,QAAQ,GAAG,aAAa,CAAC;AAC/B,MAAM,KAAK,GAAG;AACd,IAAI,KAAK;AACT,IAAI,IAAI;AACR,IAAI,IAAI;AACR,IAAI,KAAK;AACT,IAAI,MAAM;AACV,IAAI,IAAI;AACR,IAAI,QAAQ;AACZ,IAAI,QAAQ;AACZ,CAAC;;AC7DD,MAAM,UAAU,GAAG,QAAQ,IAAI,QAAQ,CAAC,IAAI,CAAC;AAC7C,MAAM,aAAa,GAAG,MAAM,CAAC,IAAI,CAACA,KAAW,CAAC,CAAC;AAC/C,MAAM,WAAW,GAAG,CAAC,IAAI,KAAK,aAAa,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;AACpE,MAAM,UAAU,GAAG,CAAC,IAAI,EAAE,KAAK,KAAKA,KAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,QAAQ,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;AAChF,MAAM,MAAM,GAAG,CAAC,MAAM,EAAE,QAAQ,EAAE,KAAK,KAAK;AACnD,IAAI,IAAI,CAAC,UAAU,EAAE;AACrB,QAAQ,OAAO,IAAI,CAAC;AACpB,KAAK;AACL,IAAI,MAAM,QAAQ,GAAG,EAAE,CAAC;AAExB,IAAI,KAAK,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,CAAC,KAAK;AACnC,QAAQ,IAAI,WAAW,CAAC,CAAC,CAAC,EAAE;AAE5B,YAAY,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC;AAChD,SAAS;AACT,KAAK,CAAC,CAAC;AACP;AACA,IAAI,QAAQ;AACZ,SAAS,MAAM,CAAC,iBAAiB,CAAC;AAClC,SAAS,OAAO,CAAC,WAAW,CAAC,CAAC;AAC9B,IAAI,OAAO,IAAI,CAAC;AAChB,CAAC;;ACvBD,MAAM,cAAc,GAAG,gGAAgG;;MCQ1G,aAAa;;;;;;;;;;;;gBAWR,KAAK;wBACG,KAAK;;EAG7B,MAAM,IAAI;IACR,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;GAClB;EAGD,MAAM,KAAK;IACT,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;GACnB;EAGD,sBAAsB,CAAC,KAAkB;IACvC,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC;GAC7C;EAGD,iBAAiB;IACf,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IAClB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;GAC3B;EAGD,kBAAkB,CAAC,KAAkC;IACnD,MAAM,EAAE,EAAE,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;IAE5B,OAAO,EAAE,CAAC;GACX;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,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,iBAAiB,CAAC,GAAG,IAAI,EACrF,KAAK,EAAE,IAAI,CAAC,KAAK,GACP;OACb,CAAC;KACH;IACD,QACE,WACE,OAAO,EAAE;QACP,IAAI,IAAI,CAAC,YAAY,EAAE;UACrB,IAAI,CAAC,iBAAiB,EAAE,CAAC;SAC1B;OACF,IAED,EAAC,MAAM,QACL,kBACG;;;;;;;;;kEASqD,CAC/C,CACF,EACT,WAAK,KAAK,EAAC,iBAAiB,IAAE,OAAO,CAAO,EAC5C,oBACE,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,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["RenderTypes"],"sources":["./node_modules/.pnpm/@stencil+helmet@0.3.3/node_modules/@stencil/helmet/dist/util.js","./node_modules/.pnpm/@stencil+helmet@0.3.3/node_modules/@stencil/helmet/dist/dom.js","./node_modules/.pnpm/@stencil+helmet@0.3.3/node_modules/@stencil/helmet/dist/render.js","./node_modules/.pnpm/@stencil+helmet@0.3.3/node_modules/@stencil/helmet/dist/stencil-helmet.js","./src/components/my-component/my-component.scss?tag=my-component&encapsulation=shadow","./src/components/my-component/my-component.tsx"],"sourcesContent":["const isObject = (val) => !Array.isArray(val) && val !== null && typeof val === 'object';\nexport const hasAttributes = ({ vattrs }, requiredAttrs = []) => isObject(vattrs) && requiredAttrs.every(vattrs.hasOwnProperty.bind(vattrs));\nexport const isTextNode = ({ vtext }) => typeof vtext === 'string';\n// Can't use instanceof HTMLElement because MockHTMLElement during pre-rendering isn't\nexport const isElement = (val) => typeof val === 'object' && val.nodeType === 1 && typeof val.ownerDocument === 'object';\nexport const isElementArray = (val) => Array.isArray(val) && val.every(isElement);\n","import { isElement, isElementArray } from './util';\nexport const createElement = ({ vtag, vattrs, vchildren, vtext }, utils) => {\n    if (vtext != null) {\n        return document.createTextNode(vtext);\n    }\n    const element = document.createElement(vtag);\n    if (vattrs != null) {\n        for (const key in vattrs) {\n            element.setAttribute(key, vattrs[key]);\n        }\n    }\n    if (vchildren != null) {\n        utils.forEach(vchildren, (child) => {\n            element.appendChild(createElement(child, utils));\n        });\n    }\n    return element;\n};\nexport const shouldApplyToHead = (val) => isElement(val) || (isElementArray(val) && val.length === 2);\nexport const applyToHead = (element) => {\n    if (Array.isArray(element)) {\n        return document.head.replaceChild(element[0], element[1]);\n    }\n    return document.head.appendChild(element);\n};\n","import { hasAttributes, isTextNode } from './util';\nimport { createElement } from './dom';\nconst hasChildren = (node) => Array.isArray(node.vchildren);\nconst getFirstChild = (vchildren, utils) => {\n    let firstChild = null;\n    utils.forEach(vchildren || [], (c, i) => {\n        if (i === 0) {\n            firstChild = c;\n            return;\n        }\n    });\n    return firstChild;\n};\nfunction title(node, head, utils) {\n    const firstChild = getFirstChild(node.vchildren || [], utils);\n    if (firstChild && isTextNode(firstChild)) {\n        return [createElement(node, utils), head.querySelector('title')];\n    }\n}\nfunction meta(node, head, utils) {\n    var _a, _b, _c;\n    const namePropKey = ((_a = node.vattrs) === null || _a === void 0 ? void 0 : _a.property) ? 'property' : 'name';\n    const namePropValue = ((_b = node.vattrs) === null || _b === void 0 ? void 0 : _b.property) || ((_c = node.vattrs) === null || _c === void 0 ? void 0 : _c.name);\n    const existingElement = head.querySelector(`meta[${namePropKey}=\"${namePropValue}\"]`);\n    if (existingElement !== null) {\n        return [createElement(node, utils), existingElement];\n    }\n    else {\n        return createElement(node, utils);\n    }\n}\nfunction link(node, _head, utils) {\n    if (!hasChildren(node)) {\n        return createElement(node, utils);\n    }\n}\nfunction style(node, _head, utils) {\n    const firstChild = getFirstChild(node.vchildren || [], utils);\n    if (firstChild && isTextNode(firstChild)) {\n        return createElement(node, utils);\n    }\n}\nfunction script(node, _head, utils) {\n    if (hasChildren(node) || hasAttributes(node)) {\n        return createElement(node, utils);\n    }\n}\nfunction base(node, _head, utils) {\n    if (!hasChildren(node) && hasAttributes(node)) {\n        return createElement(node, utils);\n    }\n}\nconst template = createElement;\nconst noscript = createElement; // SSR only\nconst types = {\n    title,\n    meta,\n    link,\n    style,\n    script,\n    base,\n    template,\n    noscript,\n};\nexport default types;\n","import RenderTypes from './render';\nimport { shouldApplyToHead, applyToHead } from './dom';\nconst headExists = document && document.head;\nconst validTagNames = Object.keys(RenderTypes);\nconst isValidNode = (node) => validTagNames.indexOf(node.vtag) > -1;\nconst renderNode = (node, utils) => RenderTypes[node.vtag](node, document.head, utils);\nexport const Helmet = (_props, children, utils) => {\n    if (!headExists) {\n        return null;\n    }\n    const rendered = [];\n    const validChildren = [];\n    utils.forEach(children, (n) => {\n        if (isValidNode(n)) {\n            validChildren.push(n);\n            rendered.push(renderNode(n, utils));\n        }\n    });\n    // Build an HTMLElement for each provided virtual child\n    rendered\n        .filter(shouldApplyToHead)\n        .forEach(applyToHead);\n    return null;\n};\nexport default Helmet;\n",".pallete-wrapper {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n","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"],"version":3}

package/dist/components/my-loader2.js

@@ -1,17 +1,18 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
-const myLoaderCss = ".container.sc-my-loader{display:flex;justify-content:center;align-items:center;height:190px;overflow:hidden}.item.sc-my-loader{width:20px;height:20px;margin:3px;list-style-type:none;transition:0.5s all ease}.item.sc-my-loader:nth-child(1){animation:right-1 1s infinite alternate;background-color:#b8cf40;animation-delay:20ms}@keyframes right-1{0%{transform:translateY(-18px)}100%{transform:translateY(18px)}}.item.sc-my-loader:nth-child(2){animation:right-2 1s infinite alternate;background-color:#ee4b5e;animation-delay:40ms}@keyframes right-2{0%{transform:translateY(-21px)}100%{transform:translateY(21px)}}.item.sc-my-loader:nth-child(3){animation:right-3 1s infinite alternate;background-color:#ea0f47;animation-delay:60ms}@keyframes right-3{0%{transform:translateY(-24px)}100%{transform:translateY(24px)}}.item.sc-my-loader:nth-child(4){animation:right-4 1s infinite alternate;background-color:#d42840;animation-delay:80ms}@keyframes right-4{0%{transform:translateY(-27px)}100%{transform:translateY(27px)}}.item.sc-my-loader:nth-child(5){animation:right-5 1s infinite alternate;background-color:#8b2850;animation-delay:100ms}@keyframes right-5{0%{transform:translateY(-30px)}100%{transform:translateY(30px)}}";
+const myLoaderCss = ".container{display:flex;justify-content:center;align-items:center;height:190px;overflow:hidden}.item{width:20px;height:20px;margin:3px;list-style-type:none;transition:0.5s all ease}.item:nth-child(1){animation:right-1 1s infinite alternate;background-color:#b8cf40;animation-delay:20ms}@keyframes right-1{0%{transform:translateY(-18px)}100%{transform:translateY(18px)}}.item:nth-child(2){animation:right-2 1s infinite alternate;background-color:#ee4b5e;animation-delay:40ms}@keyframes right-2{0%{transform:translateY(-21px)}100%{transform:translateY(21px)}}.item:nth-child(3){animation:right-3 1s infinite alternate;background-color:#ea0f47;animation-delay:60ms}@keyframes right-3{0%{transform:translateY(-24px)}100%{transform:translateY(24px)}}.item:nth-child(4){animation:right-4 1s infinite alternate;background-color:#d42840;animation-delay:80ms}@keyframes right-4{0%{transform:translateY(-27px)}100%{transform:translateY(27px)}}.item:nth-child(5){animation:right-5 1s infinite alternate;background-color:#8b2850;animation-delay:100ms}@keyframes right-5{0%{transform:translateY(-30px)}100%{transform:translateY(30px)}}";
 
 const MyLoader = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
+    this.__attachShadow();
   }
   render() {
     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 style() { return myLoaderCss; }
-}, [2, "my-loader"]);
+}, [1, "my-loader"]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;

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

@@ -1 +1 @@
-{"file":"my-loader2.js","mappings":";;AAAA,MAAM,WAAW,GAAG,+rCAA+rC;;MCOtsC,QAAQ;;;;;EACnB,MAAM;IACJ,QACE,WAAK,KAAK,EAAC,WAAW,IACpB,WAAK,KAAK,EAAC,MAAM,GAAO,EACxB,WAAK,KAAK,EAAC,MAAM,GAAO,EACxB,WAAK,KAAK,EAAC,MAAM,GAAO,EACxB,WAAK,KAAK,EAAC,MAAM,GAAO,EACxB,WAAK,KAAK,EAAC,MAAM,GAAO,CACpB,EACN;GACH;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/my-loader/my-loader.scss?tag=my-loader&encapsulation=scoped","./src/components/my-loader/my-loader.tsx"],"sourcesContent":["$color: #b8cf40, #ee4b5e, #ea0f47, #d42840, #8b2850;\n\n@mixin anim($i) {\n  $y: ($i + 5) * 3;\n\n  @keyframes right-#{$i} {\n    0% {\n      transform: translateY(#{-$y}px);\n    }\n    100% {\n      transform: translateY(#{$y}px);\n    }\n  }\n}\n\n.container {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 190px;\n  overflow: hidden;\n}\n\n.item {\n  width: 20px;\n  height: 20px;\n  margin: 3px;\n  list-style-type: none;\n  transition: 0.5s all ease;\n}\n\n@for $i from 1 through 5 {\n  .item:nth-child(#{$i}) {\n    @include anim($i);\n    animation: right-#{$i} 1s infinite alternate;\n    background-color: nth($color, $i);\n    animation-delay: 20ms * $i;\n  }\n}\n","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-loader2.js","mappings":";;AAAA,MAAM,WAAW,GAAG,omCAAomC;;MCO3mC,QAAQ;;;;;;EACnB,MAAM;IACJ,QACE,WAAK,KAAK,EAAC,WAAW,IACpB,WAAK,KAAK,EAAC,MAAM,GAAO,EACxB,WAAK,KAAK,EAAC,MAAM,GAAO,EACxB,WAAK,KAAK,EAAC,MAAM,GAAO,EACxB,WAAK,KAAK,EAAC,MAAM,GAAO,EACxB,WAAK,KAAK,EAAC,MAAM,GAAO,CACpB,EACN;GACH;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/my-loader/my-loader.scss?tag=my-loader&encapsulation=shadow","./src/components/my-loader/my-loader.tsx"],"sourcesContent":["$color: #b8cf40, #ee4b5e, #ea0f47, #d42840, #8b2850;\n\n@mixin anim($i) {\n  $y: ($i + 5) * 3;\n\n  @keyframes right-#{$i} {\n    0% {\n      transform: translateY(#{-$y}px);\n    }\n    100% {\n      transform: translateY(#{$y}px);\n    }\n  }\n}\n\n.container {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 190px;\n  overflow: hidden;\n}\n\n.item {\n  width: 20px;\n  height: 20px;\n  margin: 3px;\n  list-style-type: none;\n  transition: 0.5s all ease;\n}\n\n@for $i from 1 through 5 {\n  .item:nth-child(#{$i}) {\n    @include anim($i);\n    animation: right-#{$i} 1s infinite alternate;\n    background-color: nth($color, $i);\n    animation-delay: 20ms * $i;\n  }\n}\n","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"],"version":3}

package/dist/components/my-modal2.js

@@ -2687,12 +2687,13 @@ function debounce(func, wait) {
   };
 }
 
-const myModalCss = "@font-face{font-family:\"Galatea\";src:url(\"/assets/fonts/Galatea-Regular.woff2\") format(\"woff2\"), url(\"/assets/fonts/Galatea-Regular.woff\") format(\"woff\"), url(\"/assets/fonts/Galatea-Regular.ttf\") format(\"truetype\");font-weight:normal;font-style:normal;font-display:swap}.pallete-wrapper.sc-my-modal *.sc-my-modal{font-family:\"Galatea\", sans-serif}.my-modal.sc-my-modal{box-shadow:1px 1px 1px #ccc;background-color:#fff;position:fixed;top:20px;left:50%;transform:translateX(-50%);max-width:1555px;width:90%;z-index:1000;text-align:center;padding:35px 40px;max-height:calc(100vh - 100px);overflow-y:auto;min-height:50vh}@media (max-width: 1024px){.my-modal.sc-my-modal{padding:40px 20px 20px}}.my-modal.sc-my-modal::-webkit-scrollbar{display:none}.my-modal.sc-my-modal .loader.sc-my-modal{display:flex;flex-direction:column;align-items:center;justify-content:center;height:300px}.my-modal__header.sc-my-modal{display:flex;align-items:center;justify-content:space-between;align-items:flex-end;margin-bottom:16px}@media (max-width: 1024px){.my-modal__header.sc-my-modal{flex-direction:column;margin-bottom:12px;align-items:center;display:block}}@media (max-width: 768px){.my-modal__header.sc-my-modal .image-wrapper.sc-my-modal{margin-bottom:12px}}.my-modal__header.sc-my-modal .image-wrapper.sc-my-modal>img.sc-my-modal{max-width:300px;object-fit:cover}@media (max-width: 768px){.my-modal__header.sc-my-modal .image-wrapper.sc-my-modal>img.sc-my-modal{max-width:200px}}.my-modal__header.sc-my-modal .search-wrapper.sc-my-modal{display:flex;gap:55px;align-items:flex-start}@media (max-width: 1024px){.my-modal__header.sc-my-modal .search-wrapper.sc-my-modal{justify-content:center;width:92%}}@media (max-width: 1024px){.my-modal__header.sc-my-modal .search-wrapper.sc-my-modal .sc-my-search-h.sc-my-modal{width:100%;margin:0 auto}}.my-modal__header.sc-my-modal .search-wrapper.sc-my-modal .my-modal__close.sc-my-modal{background:transparent;border:none;margin-top:-20px}.my-modal__header.sc-my-modal .search-wrapper.sc-my-modal .my-modal__close.sc-my-modal>img.sc-my-modal{width:45px;height:45px;object-fit:cover;cursor:pointer}@media (max-width: 1024px){.my-modal__header.sc-my-modal .search-wrapper.sc-my-modal .my-modal__close.sc-my-modal{margin-top:0px;position:absolute;right:10px;top:10px}}.my-modal__see-more.sc-my-modal{font-size:16px;display:flex;justify-content:center;align-items:center;font-weight:300;color:#575757;margin-top:12px;margin-bottom:0px}@media (max-width: 1024px){.my-modal__see-more.sc-my-modal{font-size:18px}}.my-modal__see-more.sc-my-modal img.sc-my-modal{width:45px;height:45px}@media (max-width: 1024px){.my-modal__see-more.sc-my-modal img.sc-my-modal{display:none}}.my-modal__wrapper.sc-my-modal{display:flex;flex-direction:column;position:relative}.my-modal__wrapper.sc-my-modal .boxes.sc-my-modal{display:flex;flex-direction:column;flex-wrap:wrap}.my-modal__wrapper.sc-my-modal .boxes__list.sc-my-modal{display:flex;flex-wrap:wrap;gap:5px 5px}@media (max-width: 1024px){.my-modal__wrapper.sc-my-modal .boxes__list.sc-my-modal{justify-content:center}}.my-modal__wrapper.sc-my-modal .pagination.sc-my-modal{margin:10px 0px;font-size:16px;display:flex;flex-direction:row;align-items:center;justify-content:center}.my-modal__wrapper.sc-my-modal .pagination.sc-my-modal>span.sc-my-modal{margin:0 3px;cursor:pointer;min-width:20px;padding:5px;box-shadow:1px 1px 1px #ccc}.my-modal__wrapper.sc-my-modal .pagination.sc-my-modal .current.sc-my-modal{background-color:wheat}.my-modal.sc-my-modal .categories.sc-my-modal{padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid #dfdfdf;display:flex;flex-direction:column;align-items:flex-start}.my-modal.sc-my-modal .categories__container.sc-my-modal{display:flex;flex-wrap:nowrap;gap:5px 5px;overflow-x:auto;width:100%}@media (max-width: 1024px){.my-modal.sc-my-modal .categories__container.sc-my-modal{padding-bottom:5px}}.my-modal.sc-my-modal .categories__slide-information.sc-my-modal{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.my-modal.sc-my-modal .categories__slide-information.sc-my-modal span.sc-my-modal{color:#4c4c4c;font-size:16px;font-weight:normal}.my-modal.sc-my-modal .categories__slide-information.sc-my-modal span.sc-my-modal:first-of-type{margin-left:7px}.my-modal.sc-my-modal .categories__slide-information.sc-my-modal span.sc-my-modal:last-of-type{margin-right:7px}.my-modal.sc-my-modal>.button.sc-my-modal{margin:10px auto}";
+const myModalCss = "@font-face{font-family:\"Galatea\";src:url(\"/assets/fonts/Galatea-Regular.woff2\") format(\"woff2\"), url(\"/assets/fonts/Galatea-Regular.woff\") format(\"woff\"), url(\"/assets/fonts/Galatea-Regular.ttf\") format(\"truetype\");font-weight:normal;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;position:fixed;top:20px;left:50%;transform:translateX(-50%);max-width:1555px;width:90%;z-index:1000;text-align:center;padding:35px 40px;max-height:calc(100vh - 100px);overflow-y:auto;min-height:50vh}@media (max-width: 1024px){.my-modal{padding:40px 20px 20px}}.my-modal::-webkit-scrollbar{display:none}.my-modal .loader{display:flex;flex-direction:column;align-items:center;justify-content:center;height:300px}.my-modal__header{display:flex;align-items:center;justify-content:space-between;align-items:flex-end;margin-bottom:16px}@media (max-width: 1024px){.my-modal__header{flex-direction:column;margin-bottom:12px;align-items:center;display:block}}@media (max-width: 768px){.my-modal__header .image-wrapper{margin-bottom:12px}}.my-modal__header .image-wrapper>img{max-width:300px;object-fit:cover}@media (max-width: 768px){.my-modal__header .image-wrapper>img{max-width:200px}}.my-modal__header .search-wrapper{display:flex;gap:55px;align-items:flex-start}@media (max-width: 1024px){.my-modal__header .search-wrapper{justify-content:center;width:92%}}@media (max-width: 1024px){.my-modal__header .search-wrapper my-search{width:100%;margin:0 auto}}.my-modal__header .search-wrapper .my-modal__close{background:transparent;border:none;margin-top:-20px}.my-modal__header .search-wrapper .my-modal__close>img{width:45px;height:45px;object-fit:cover;cursor:pointer}@media (max-width: 1024px){.my-modal__header .search-wrapper .my-modal__close{margin-top:0px;position:absolute;right:10px;top:10px}}.my-modal__see-more{font-size:16px;display:flex;justify-content:center;align-items:center;font-weight:300;color:#575757;margin-top:12px;margin-bottom:0px}@media (max-width: 1024px){.my-modal__see-more{font-size:18px}}.my-modal__see-more img{width:45px;height:45px}@media (max-width: 1024px){.my-modal__see-more img{display:none}}.my-modal__wrapper{display:flex;flex-direction:column;position:relative}.my-modal__wrapper .boxes{display:flex;flex-direction:column;flex-wrap:wrap}.my-modal__wrapper .boxes__list{display:flex;flex-wrap:wrap;gap:5px 5px}@media (max-width: 1024px){.my-modal__wrapper .boxes__list{justify-content:center}}.my-modal__wrapper .pagination{margin:10px 0px;font-size:16px;display:flex;flex-direction:row;align-items:center;justify-content:center}.my-modal__wrapper .pagination>span{margin:0 3px;cursor:pointer;min-width:20px;padding:5px;box-shadow:1px 1px 1px #ccc}.my-modal__wrapper .pagination .current{background-color:wheat}.my-modal .categories{padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid #dfdfdf;display:flex;flex-direction:column;align-items:flex-start}.my-modal .categories__container{display:flex;flex-wrap:nowrap;gap:5px 5px;overflow-x:auto;width:100%}@media (max-width: 1024px){.my-modal .categories__container{padding-bottom:5px}}.my-modal .categories__slide-information{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.my-modal .categories__slide-information span{color:#4c4c4c;font-size:16px;font-weight:normal}.my-modal .categories__slide-information span:first-of-type{margin-left:7px}.my-modal .categories__slide-information span:last-of-type{margin-right:7px}.my-modal>.button{margin:10px auto}";
 
 const MyModal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
   constructor() {
     super();
     this.__registerHost();
+    this.__attachShadow();
     this.clearSearchText = createEvent(this, "clearSearchText", 7);
     this.close = createEvent(this, "close", 7);
     this.readyToCLose = createEvent(this, "readyToCLose", 7);
@@ -2728,12 +2729,15 @@ const MyModal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
     };
     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) {
@@ -3021,7 +3025,7 @@ const MyModal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
     "data": ["watchPropHandler"]
   }; }
   static get style() { return myModalCss; }
-}, [2, "my-modal", {
+}, [1, "my-modal", {
     "shop": [1],
     "product": [1],
     "baselink": [1],