@ppg_pl/tinting 0.0.5 → 0.0.8

package/dist/cjs/tinting.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0a139db0.js');
+const index = require('./index-b6962659.js');
 
 /*
  Stencil Client Patch Browser v3.1.0 | MIT Licensed | https://stenciljs.com
@@ -20,7 +20,7 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["modal-header_9.cjs",[[2,"my-component",{"shop":[1],"product":[1],"baselink":[1],"colorname":[1],"show":[32],"readyToClose":[32],"open":[64],"close":[64]},[[0,"readyToCLose","setReadyToCloseHandler"],[0,"close","closeModalHandler"],[0,"onSelectedColorEmit","handleSelectedColor"]]],[0,"my-modal",{"shop":[1],"product":[1],"baselink":[1],"selectedcolor":[1],"arrowDown":[1,"arrow-down"],"chunksNum":[32],"data":[32],"preloader":[32],"loading":[32],"currentColor":[32],"currentIndex":[32],"infoBoxWidth":[32],"boxWidth":[32],"padding":[32],"isMobile":[32],"showRange":[32],"colorCategories":[32],"selectedCategory":[32],"page":[32],"colorIsSelected":[32],"colorsList":[32],"hasMore":[32],"filters":[32],"open":[64]},[[0,"closeInfoBox","closeInfoBoxHandler"],[0,"onCurrentColor","handleEmitColor"],[9,"resize","handleResize"],[0,"colorFamilySelected","handleColorFamilySelected"],[0,"searchColors","searchColorsHandler"]]],[0,"my-backdrop"],[0,"modal-header",{"modalName":[1,"modal-name"],"modalLogo":[1,"modal-logo"],"modalDescription":[1,"modal-description"],"selectedColorFamily":[1,"selected-color-family"],"shop":[1],"productName":[1,"product-name"],"isMobile":[4,"is-mobile"],"closeImage":[1,"close-image"],"productSamples":[16],"colorFamilies":[32]}],[0,"my-colorinfo",{"currentColor":[16],"shop":[1],"product":[1],"baselink":[1],"data":[16],"isMobile":[4,"is-mobile"],"infoBoxWidth":[2,"info-box-width"],"closeImage":[1,"close-image"]}],[0,"my-colorbox",{"color":[1],"name":[1],"shop":[1],"product":[1],"isActive":[4,"is-active"],"isCategoryActive":[4,"is-category-active"],"isImageInsteadHex":[16]}],[2,"my-search",{"productname":[1],"shopname":[1],"isMobile":[4,"is-mobile"],"searchIcon":[1,"search-icon"],"searchText":[32]},[[4,"clearSearchText","clearSearchTextHandler"]]],[2,"my-select",{"options":[16],"placeholder":[1],"isMobile":[4,"is-mobile"],"searchIcon":[1,"search-icon"],"searchText":[32],"filteredOptions":[32],"showDropdown":[32],"selectedValue":[32]},[[4,"clearSearchText","clearSearchTextHandler"]]],[0,"my-slider",{"slides":[16],"shop":[1],"product":[1],"color":[1]}]]]], options);
+  return index.bootstrapLazy([["modal-header_9.cjs",[[2,"my-component",{"shop":[1],"product":[1],"baselink":[1],"colorname":[1],"available_testers":[1],"price":[2],"show":[32],"readyToClose":[32],"open":[64],"close":[64]},[[0,"readyToCLose","setReadyToCloseHandler"],[0,"close","closeModalHandler"],[0,"onSelectedColorEmit","handleSelectedColor"],[0,"addToBasket","addToBasketHandler"]]],[0,"my-modal",{"shop":[1],"product":[1],"baselink":[1],"available_testers":[16],"price":[2],"selectedcolor":[1],"arrowDown":[1,"arrow-down"],"chunksNum":[32],"data":[32],"preloader":[32],"loading":[32],"currentColor":[32],"currentIndex":[32],"infoBoxWidth":[32],"boxWidth":[32],"padding":[32],"isMobile":[32],"showRange":[32],"colorCategories":[32],"selectedCategory":[32],"page":[32],"colorIsSelected":[32],"colorsList":[32],"hasMore":[32],"filters":[32],"open":[64]},[[0,"closeInfoBox","closeInfoBoxHandler"],[0,"onCurrentColor","handleEmitColor"],[0,"addToBasket","addToBasketHandler"],[9,"resize","handleResize"],[0,"colorFamilySelected","handleColorFamilySelected"],[0,"searchColors","searchColorsHandler"]]],[0,"my-backdrop"],[0,"modal-header",{"modalName":[1,"modal-name"],"modalLogo":[1,"modal-logo"],"modalDescription":[1,"modal-description"],"selectedColorFamily":[1,"selected-color-family"],"shop":[1],"productName":[1,"product-name"],"isMobile":[4,"is-mobile"],"closeImage":[1,"close-image"],"productSamples":[16],"colorFamilies":[32]}],[0,"my-colorinfo",{"currentColor":[16],"shop":[1],"product":[1],"baselink":[1],"availableTesters":[16],"price":[2],"data":[16],"isMobile":[4,"is-mobile"],"infoBoxWidth":[2,"info-box-width"],"closeImage":[1,"close-image"],"basketStatus":[32]}],[0,"my-colorbox",{"color":[1],"name":[1],"shop":[1],"product":[1],"isActive":[4,"is-active"],"isCategoryActive":[4,"is-category-active"],"isImageInsteadHex":[16]}],[2,"my-search",{"productname":[1],"shopname":[1],"isMobile":[4,"is-mobile"],"searchIcon":[1,"search-icon"],"searchText":[32]},[[4,"clearSearchText","clearSearchTextHandler"]]],[2,"my-select",{"options":[16],"placeholder":[1],"isMobile":[4,"is-mobile"],"searchIcon":[1,"search-icon"],"searchText":[32],"filteredOptions":[32],"showDropdown":[32],"selectedValue":[32]},[[4,"clearSearchText","clearSearchTextHandler"]]],[1,"my-slider",{"slides":[16],"shop":[1],"product":[1],"color":[1]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/collection/components/colorbox/index.js

@@ -1,5 +1,6 @@
 import { h } from '@stencil/core';
 import { setDataLayer } from '../../gtmUtils';
+import { isVeryLightColor } from '../../utils';
 import { APIURL, accessToken } from '../api';
 export class MyColorBox {
   constructor() {
@@ -24,6 +25,21 @@ export class MyColorBox {
       const blue = parseInt(color[5] + color[6], 16) - 20;
       return `rgb(${red},${green},${blue})`;
     };
+    this.isLightSwatch = () => { var _a; return !((_a = this.isImageInsteadHex) === null || _a === void 0 ? void 0 : _a.isImageInsteadHex) && isVeryLightColor(this.color); };
+    // Active category keeps its 5px solid border (all active swatches share it, so
+    // alignment is consistent). In the normal grid we use an inset box-shadow
+    // instead of a border so light swatches gain a visible edge without changing
+    // their box size and skewing the grid.
+    this.getBorder = () => {
+      if (!this.isCategoryActive)
+        return '';
+      return `5px solid ${this.isLightSwatch() ? '#d9d9d9' : this.darkenColor(this.color)}`;
+    };
+    this.getBoxShadow = () => {
+      if (this.isCategoryActive)
+        return '';
+      return this.isLightSwatch() ? 'inset 0 0 0 1px #d9d9d9' : '';
+    };
     this.color = undefined;
     this.name = undefined;
     this.shop = undefined;
@@ -38,7 +54,8 @@ export class MyColorBox {
         backgroundSize: ((_a = this.isImageInsteadHex) === null || _a === void 0 ? void 0 : _a.isImageInsteadHex) ? 'cover' : '',
         backgroundImage: ((_b = this.isImageInsteadHex) === null || _b === void 0 ? void 0 : _b.isImageInsteadHex) ? `url(${APIURL}/assets/${this.isImageInsteadHex.bigImage}?access_token=${accessToken})` : '',
         background: ((_c = this.isImageInsteadHex) === null || _c === void 0 ? void 0 : _c.isImageInsteadHex) ? this.isImageInsteadHex.bigImage : this.color,
-        border: this.isCategoryActive ? `5px solid ${this.darkenColor(this.color)}` : '',
+        border: this.getBorder(),
+        boxShadow: this.getBoxShadow(),
       } }, h("div", { class: "color-name" }, this.name)));
   }
   static get is() { return "my-colorbox"; }

package/dist/collection/components/colorbox/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/colorbox/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h } from '@stencil/core';\nimport { setDataLayer } from '../../gtmUtils';\nimport { ColorBoxyIsImageInsteadHex } from '../../types';\nimport { APIURL, accessToken } from '../api';\n\n@Component({\n  tag: 'my-colorbox',\n  styleUrl: 'index.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":"index.js","sourceRoot":"","sources":["../../../src/components/colorbox/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h } from '@stencil/core';\nimport { setDataLayer } from '../../gtmUtils';\nimport { ColorBoxyIsImageInsteadHex } from '../../types';\nimport { isVeryLightColor } from '../../utils';\nimport { APIURL, accessToken } from '../api';\n\n@Component({\n  tag: 'my-colorbox',\n  styleUrl: 'index.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  private isLightSwatch = () => !this.isImageInsteadHex?.isImageInsteadHex && isVeryLightColor(this.color);\n\n  // Active category keeps its 5px solid border (all active swatches share it, so\n  // alignment is consistent). In the normal grid we use an inset box-shadow\n  // instead of a border so light swatches gain a visible edge without changing\n  // their box size and skewing the grid.\n  private getBorder = () => {\n    if (!this.isCategoryActive) return '';\n    return `5px solid ${this.isLightSwatch() ? '#d9d9d9' : this.darkenColor(this.color)}`;\n  };\n\n  private getBoxShadow = () => {\n    if (this.isCategoryActive) return '';\n    return this.isLightSwatch() ? 'inset 0 0 0 1px #d9d9d9' : '';\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.getBorder(),\n          boxShadow: this.getBoxShadow(),\n        }}\n      >\n        <div class=\"color-name\">{this.name}</div>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/colorinfo/index.js

@@ -1,8 +1,11 @@
 import { h, getAssetPath } from '@stencil/core';
 import { setDataLayer } from '../../gtmUtils';
+import { isVeryLightColor } from '../../utils';
 import { APIURL, accessToken } from '../api';
 export class MyColorInfo {
   constructor() {
+    this.loadingTimeout = null;
+    this.successTimeout = null;
     this.goToProduct = () => {
       var _a;
       this.onCurrentColor.emit(this.currentColor);
@@ -18,6 +21,13 @@ export class MyColorInfo {
     this.onCloseButtonClick = () => {
       this.closeInfoBox.emit();
     };
+    this.getHref = () => {
+      var _a, _b, _c, _d;
+      if (this.baselink) {
+        return `${this.baselink}/${(_b = (_a = this === null || this === void 0 ? void 0 : this.currentColor.links) === null || _a === void 0 ? void 0 : _a.find((link) => (link === null || link === void 0 ? void 0 : link.shop) === this.shop)) === null || _b === void 0 ? void 0 : _b.path}`;
+      }
+      return (_d = (_c = this === null || this === void 0 ? void 0 : this.currentColor.links) === null || _c === void 0 ? void 0 : _c.find((link) => (link === null || link === void 0 ? void 0 : link.shop) === this.shop)) === null || _d === void 0 ? void 0 : _d.path;
+    };
     this.renderSliderOrImage = () => {
       var _a;
       if (this.currentColor.imageInsteadHex) {
@@ -30,22 +40,76 @@ export class MyColorInfo {
     this.capitalizeFirstLetter = (string) => {
       return string.charAt(0).toUpperCase() + string.slice(1).toLocaleLowerCase();
     };
+    this.isVeryLightBackground = () => {
+      if (this.currentColor.imageInsteadHex)
+        return true;
+      return isVeryLightColor(this.currentColor.hex);
+    };
+    this.getButtonClass = () => {
+      if (this.currentColor.imageInsteadHex)
+        return 'brown';
+      return this.isVeryLightBackground() ? 'inverse' : '';
+    };
+    this.handleAddToBasket = () => {
+      var _a;
+      if (!((_a = this.availableTesters) === null || _a === void 0 ? void 0 : _a.id_product_attribute))
+        return;
+      if (this.basketStatus !== 'idle')
+        return;
+      this.clearBasketTimeouts();
+      this.basketStatus = 'loading';
+      this.addToBasket.emit({
+        id: this.availableTesters.id_product_attribute,
+      });
+      this.loadingTimeout = setTimeout(() => {
+        this.basketStatus = 'success';
+        this.successTimeout = setTimeout(() => {
+          this.basketStatus = 'idle';
+        }, 2500);
+      }, 900);
+    };
     this.currentColor = undefined;
     this.shop = undefined;
     this.product = undefined;
     this.baselink = undefined;
+    this.availableTesters = undefined;
+    this.price = undefined;
     this.data = null;
     this.isMobile = false;
     this.infoBoxWidth = undefined;
     this.closeImage = 'close.png';
+    this.basketStatus = 'idle';
+  }
+  onColorChange(newColor, oldColor) {
+    if ((newColor === null || newColor === void 0 ? void 0 : newColor.name) === (oldColor === null || oldColor === void 0 ? void 0 : oldColor.name))
+      return;
+    this.resetBasketStatus();
+  }
+  disconnectedCallback() {
+    this.clearBasketTimeouts();
+  }
+  clearBasketTimeouts() {
+    if (this.loadingTimeout) {
+      clearTimeout(this.loadingTimeout);
+      this.loadingTimeout = null;
+    }
+    if (this.successTimeout) {
+      clearTimeout(this.successTimeout);
+      this.successTimeout = null;
+    }
+  }
+  resetBasketStatus() {
+    this.clearBasketTimeouts();
+    this.basketStatus = 'idle';
   }
   render() {
+    var _a;
     return (h("div", { class: `boxes__box-content ${this.currentColor.textWhite ? 'boxes__box-content__white' : ''}`, style: {
         background: this.currentColor.imageInsteadHex ? 'white' : this.currentColor.hex,
         maxWidth: `${this.infoBoxWidth && this.infoBoxWidth - 4}px`,
       } }, this.isMobile && h("img", { class: 'closebtn', onClick: this.onCloseButtonClick, src: getAssetPath(`./assets/${this.closeImage}`), alt: "closebtn" }), h("div", { class: "boxes__box-content__info", style: {
         maxWidth: this.isMobile ? `${this.infoBoxWidth && this.infoBoxWidth - 35}px` : ``,
-      } }, !this.isMobile && h("img", { class: 'closebtn', onClick: this.onCloseButtonClick, src: getAssetPath(`./assets/${this.closeImage}`), alt: "closebtn" }), h("h2", null, this.currentColor.name), !this.isMobile && h("h4", null, this.currentColor.number), h("div", { class: "boxes__box-content__info__value" }, h("div", { class: "boxes__box-content__info__value-product" }, this.isMobile && h("div", { class: 'divider' }), this.currentColor && (h("button", { onClick: this.goToProduct, class: `button ${this.currentColor.imageInsteadHex ? 'brown' : this.currentColor.buttonInverse ? 'inverse' : ''}` }, "wybierz kolor"))))), h("div", { class: "boxes__box-content__slider" }, this.renderSliderOrImage())));
+      } }, !this.isMobile && h("img", { class: 'closebtn', onClick: this.onCloseButtonClick, src: getAssetPath(`./assets/${this.closeImage}`), alt: "closebtn" }), h("h2", null, this.currentColor.name), !this.isMobile && h("h4", null, this.currentColor.number), h("div", { class: "boxes__box-content__info__value" }, h("div", { class: "divider" }), h("div", { class: "boxes__box-content__info__tester" }, h("div", { class: "divider" }), h("div", { class: "tester-text" }, h("h2", null, "Zamow tester"), h("p", null, "Sprawdz go na swojej scianie.")), h("div", { class: "tester-buy" }, h("div", { class: "price" }, this.price ? `${this.price} zl` : ''), this.isMobile && h("div", { class: 'divider' }), this.basketStatus !== 'success' && (h("button", { class: `button fit ${this.getButtonClass()} ${!this.availableTesters ? 'disabled' : ''} ${this.basketStatus === 'loading' ? 'is-loading' : ''}`, onClick: this.handleAddToBasket, disabled: !this.availableTesters || this.basketStatus === 'loading' }, h("span", { class: "button-content" }, h("span", { class: "shape-icon", "aria-hidden": "true" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "15", height: "16", viewBox: "0 0 15 16" }, h("path", { class: "shape-icon__path", transform: "translate(0.0867462 0)", d: "M13.246571 12.763281L11.931726 4.961875C11.801879 4.1936703 11.13567 3.6319427 10.35657 3.63375L9.7429771 3.63375L9.7429771 3.1025C9.7429771 1.3890365 8.35394 0 6.6404767 0C4.9270134 0 3.537977 1.3890365 3.537977 3.1025L3.537977 3.63375L2.9217269 3.63375C2.1426277 3.6319427 1.4764187 4.1936703 1.3465706 4.961875L0.034383144 12.763281C-0.086738147 13.483807 0.11555123 14.221112 0.58740741 14.778946C1.0592636 15.336781 1.7528107 15.658594 2.4834456 15.658594L10.797508 15.658594C11.528143 15.658594 12.22169 15.336781 12.693546 14.778946C13.165402 14.221112 13.367692 13.483807 13.246571 12.763281L13.246571 12.763281ZM4.3348517 3.0892186C4.3348517 1.8158572 5.3671155 0.78359371 6.6404767 0.78359371C7.9138384 0.78359371 8.9461021 1.8158572 8.9461021 3.0892186L8.9461021 3.6204686L4.3348517 3.6204686L4.3348517 3.0892186ZM12.08579 14.264063C11.765244 14.643165 11.293964 14.86172 10.797508 14.86172L2.4834456 14.86172C1.9871488 14.862442 1.5158025 14.644215 1.195269 14.265309C0.87473541 13.886404 0.73765546 13.385406 0.82063317 12.896093L2.1248519 5.092031C2.1891608 4.703371 2.5278175 4.4200282 2.9217269 4.4252396L3.5353208 4.4252396L3.5353208 5.5834374C3.5353208 5.8034883 3.7137072 5.9818749 3.9337583 5.9818749C4.1538091 5.9818749 4.3321958 5.8034883 4.3321958 5.5834374L4.3321958 4.4252396L8.9461021 4.4252396L8.9461021 5.5834374C8.9461021 5.8034883 9.1244888 5.9818749 9.3445396 5.9818749C9.5645905 5.9818749 9.7429771 5.8034883 9.7429771 5.5834374L9.7429771 4.4252396L10.359227 4.4252396C10.753137 4.4200282 11.091793 4.703371 11.156102 5.092031L12.46032 12.896093C12.542204 13.384947 12.40527 13.885097 12.08579 14.264063L12.08579 14.264063Z" }))), !this.availableTesters ? 'Tester obecnie niedostepny' : 'Dodaj do koszyka'), this.basketStatus === 'loading' && (h("span", { class: "spinner", "aria-hidden": "true" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24" }, h("path", { d: "M12 2 A10 10 0 1 1 2 12", fill: "none", stroke: "currentColor", "stroke-width": "2.5", "stroke-linecap": "round" })))))), this.basketStatus === 'success' && (h("div", { class: `basket-status basket-status--success ${this.getButtonClass()}`, role: "status", "aria-live": "polite" }, h("span", { class: "check-icon", "aria-hidden": "true" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24" }, h("path", { d: "M5 12.5l4.5 4.5L19 7.5", fill: "none", stroke: "currentColor", "stroke-width": "2.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("span", null, h("strong", null, "Dodano"), " do koszyka"))))), h("div", { class: "boxes__box-content__info__value-product" }, this.currentColor && ((_a = this.currentColor.links) === null || _a === void 0 ? void 0 : _a.find((link) => (link === null || link === void 0 ? void 0 : link.shop) === this.shop)) && (h("a", { onClick: this.goToProduct, href: this.getHref(), class: `button ${this.getButtonClass()}` }, "wybierz kolor"))))), h("div", { class: "boxes__box-content__slider" }, this.renderSliderOrImage())));
   }
   static get is() { return "my-colorinfo"; }
   static get properties() {
@@ -121,6 +185,43 @@ export class MyColorInfo {
         "attribute": "baselink",
         "reflect": false
       },
+      "availableTesters": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "AvailableTester | null",
+          "resolved": "null | { id_product_attribute: number; color_name: string; }",
+          "references": {
+            "AvailableTester": {
+              "location": "import",
+              "path": "../../types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      },
+      "price": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number | null",
+          "resolved": "null | number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "price",
+        "reflect": false
+      },
       "data": {
         "type": "unknown",
         "mutable": false,
@@ -197,6 +298,11 @@ export class MyColorInfo {
       }
     };
   }
+  static get states() {
+    return {
+      "basketStatus": {}
+    };
+  }
   static get events() {
     return [{
         "method": "onCurrentColor",
@@ -218,6 +324,21 @@ export class MyColorInfo {
             }
           }
         }
+      }, {
+        "method": "addToBasket",
+        "name": "addToBasket",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "{ id: number }",
+          "resolved": "{ id: number; }",
+          "references": {}
+        }
       }, {
         "method": "closeInfoBox",
         "name": "closeInfoBox",
@@ -235,5 +356,11 @@ export class MyColorInfo {
         }
       }];
   }
+  static get watchers() {
+    return [{
+        "propName": "currentColor",
+        "methodName": "onColorChange"
+      }];
+  }
 }
 //# sourceMappingURL=index.js.map

package/dist/collection/components/colorinfo/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/colorinfo/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, getAssetPath, Event, EventEmitter } from '@stencil/core';\nimport { setDataLayer } from '../../gtmUtils';\nimport { Color, Product } from '../../types';\nimport { APIURL, accessToken } from '../api';\n\n@Component({\n  tag: 'my-colorinfo',\n})\nexport class MyColorInfo {\n  @Prop() currentColor: Color;\n  @Prop() shop: string;\n  @Prop() product: string;\n  @Prop() baselink: string;\n  @Prop() data: Product | null = null;\n  @Prop() isMobile: boolean = false;\n  @Prop() infoBoxWidth: number | null;\n  @Prop() closeImage = 'close.png';\n  @Event({ bubbles: true, composed: true }) onCurrentColor: EventEmitter<Color>;\n\n  @Event() closeInfoBox: EventEmitter;\n\n  goToProduct = () => {\n    this.onCurrentColor.emit(this.currentColor);\n    this.currentColor &&\n      setDataLayer({\n        event: 'GoToProduct',\n        shop: this.shop,\n        product: this.product,\n        color: this.currentColor?.name,\n      });\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  capitalizeFirstLetter = (string: string) => {\n    return string.charAt(0).toUpperCase() + string.slice(1).toLocaleLowerCase();\n  };\n\n  render() {\n    return (\n      <div\n        class={`boxes__box-content ${this.currentColor.textWhite ? 'boxes__box-content__white' : ''}`}\n        style={{\n          background: this.currentColor.imageInsteadHex ? 'white' : this.currentColor.hex,\n          maxWidth: `${this.infoBoxWidth && this.infoBoxWidth - 4}px`,\n        }}\n      >\n        {this.isMobile && <img class={'closebtn'} onClick={this.onCloseButtonClick} src={getAssetPath(`./assets/${this.closeImage}`)} alt=\"closebtn\" />}\n        <div\n          class=\"boxes__box-content__info\"\n          style={{\n            maxWidth: this.isMobile ? `${this.infoBoxWidth && this.infoBoxWidth - 35}px` : ``,\n          }}\n        >\n          {!this.isMobile && <img class={'closebtn'} onClick={this.onCloseButtonClick} src={getAssetPath(`./assets/${this.closeImage}`)} alt=\"closebtn\" />}\n          <h2>{this.currentColor.name}</h2>\n          {!this.isMobile && <h4>{this.currentColor.number}</h4>}\n\n          <div class=\"boxes__box-content__info__value\">\n            {/* <div class=\"boxes__box-content__info__value-image\">\n              {this.currentColor?.image! && <img src={`${APIURL}/assets/${this.currentColor.image}?access_token=${accessToken}`} alt=\"color-image\" />}\n            </div> */}\n            <div class=\"boxes__box-content__info__value-product\">\n              {/* <div>\n                {!this.isMobile && <p>Produkt:</p>}\n                {this.isMobile && <h2>{this.currentColor?.name}</h2>} <p>{this.product}</p>\n              </div> */}\n\n              {this.isMobile && <div class={'divider'}></div>}\n              {this.currentColor && (\n                <button onClick={this.goToProduct} class={`button ${this.currentColor.imageInsteadHex ? 'brown' : this.currentColor.buttonInverse ? 'inverse' : ''}`}>\n                  wybierz kolor\n                </button>\n              )}\n            </div>\n          </div>\n        </div>\n        <div class=\"boxes__box-content__slider\">{this.renderSliderOrImage()}</div>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/colorinfo/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, State, Watch, h, getAssetPath, Event, EventEmitter } from '@stencil/core';\nimport { setDataLayer } from '../../gtmUtils';\nimport { AvailableTester, Color, Link, Product } from '../../types';\nimport { isVeryLightColor } from '../../utils';\nimport { APIURL, accessToken } from '../api';\n\n@Component({\n  tag: 'my-colorinfo',\n})\nexport class MyColorInfo {\n  @Prop() currentColor: Color;\n  @Prop() shop: string;\n  @Prop() product: string;\n  @Prop() baselink: string;\n  @Prop() 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  @State() basketStatus: 'idle' | 'loading' | 'success' = 'idle';\n  private loadingTimeout: ReturnType<typeof setTimeout> | null = null;\n  private successTimeout: ReturnType<typeof setTimeout> | null = null;\n  @Event({ bubbles: true, composed: true }) onCurrentColor: EventEmitter<Color>;\n  @Event({ bubbles: true, composed: true }) addToBasket: EventEmitter<{ id: number }>;\n\n  @Event() closeInfoBox: EventEmitter;\n\n  @Watch('currentColor')\n  onColorChange(newColor: Color, oldColor: Color) {\n    if (newColor?.name === oldColor?.name) return;\n    this.resetBasketStatus();\n  }\n\n  disconnectedCallback() {\n    this.clearBasketTimeouts();\n  }\n\n  private clearBasketTimeouts() {\n    if (this.loadingTimeout) {\n      clearTimeout(this.loadingTimeout);\n      this.loadingTimeout = null;\n    }\n\n    if (this.successTimeout) {\n      clearTimeout(this.successTimeout);\n      this.successTimeout = null;\n    }\n  }\n\n  private resetBasketStatus() {\n    this.clearBasketTimeouts();\n    this.basketStatus = 'idle';\n  }\n\n  goToProduct = () => {\n    this.onCurrentColor.emit(this.currentColor);\n    this.currentColor &&\n      setDataLayer({\n        event: 'GoToProduct',\n        shop: this.shop,\n        product: this.product,\n        color: this.currentColor?.name,\n      });\n\n    this.closeInfoBox.emit();\n  };\n\n  onCloseButtonClick = () => {\n    this.closeInfoBox.emit();\n  };\n\n  getHref = () => {\n    if (this.baselink) {\n      return `${this.baselink}/${this?.currentColor.links?.find((link: Link) => link?.shop === this.shop)?.path}`;\n    }\n    return this?.currentColor.links?.find((link: Link) => link?.shop === this.shop)?.path;\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  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    return isVeryLightColor(this.currentColor.hex);\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    if (this.basketStatus !== 'idle') return;\n\n    this.clearBasketTimeouts();\n    this.basketStatus = 'loading';\n    this.addToBasket.emit({\n      id: this.availableTesters.id_product_attribute,\n    });\n\n    this.loadingTimeout = setTimeout(() => {\n      this.basketStatus = 'success';\n      this.successTimeout = setTimeout(() => {\n        this.basketStatus = 'idle';\n      }, 2500);\n    }, 900);\n  };\n\n  render() {\n    return (\n      <div\n        class={`boxes__box-content ${this.currentColor.textWhite ? 'boxes__box-content__white' : ''}`}\n        style={{\n          background: this.currentColor.imageInsteadHex ? 'white' : this.currentColor.hex,\n          maxWidth: `${this.infoBoxWidth && this.infoBoxWidth - 4}px`,\n        }}\n      >\n        {this.isMobile && <img class={'closebtn'} onClick={this.onCloseButtonClick} src={getAssetPath(`./assets/${this.closeImage}`)} alt=\"closebtn\" />}\n        <div\n          class=\"boxes__box-content__info\"\n          style={{\n            maxWidth: this.isMobile ? `${this.infoBoxWidth && this.infoBoxWidth - 35}px` : ``,\n          }}\n        >\n          {!this.isMobile && <img class={'closebtn'} onClick={this.onCloseButtonClick} src={getAssetPath(`./assets/${this.closeImage}`)} alt=\"closebtn\" />}\n          <h2>{this.currentColor.name}</h2>\n          {!this.isMobile && <h4>{this.currentColor.number}</h4>}\n\n          <div class=\"boxes__box-content__info__value\">\n            <div class=\"divider\"></div>\n            <div class=\"boxes__box-content__info__tester\">\n              <div class=\"divider\"></div>\n              <div class=\"tester-text\">\n                <h2>Zamow tester</h2>\n                <p>Sprawdz go na swojej scianie.</p>\n              </div>\n              <div class=\"tester-buy\">\n                <div class=\"price\">{this.price ? `${this.price} zl` : ''}</div>\n                {this.isMobile && <div class={'divider'}></div>}\n                {this.basketStatus !== 'success' && (\n                  <button\n                    class={`button fit ${this.getButtonClass()} ${!this.availableTesters ? 'disabled' : ''} ${\n                      this.basketStatus === 'loading' ? 'is-loading' : ''\n                    }`}\n                    onClick={this.handleAddToBasket}\n                    disabled={!this.availableTesters || this.basketStatus === 'loading'}\n                  >\n                    <span class=\"button-content\">\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                      {!this.availableTesters ? 'Tester obecnie niedostepny' : 'Dodaj do koszyka'}\n                    </span>\n                    {this.basketStatus === 'loading' && (\n                      <span class=\"spinner\" aria-hidden=\"true\">\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\">\n                          <path d=\"M12 2 A10 10 0 1 1 2 12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" />\n                        </svg>\n                      </span>\n                    )}\n                  </button>\n                )}\n                {this.basketStatus === 'success' && (\n                  <div class={`basket-status basket-status--success ${this.getButtonClass()}`} role=\"status\" aria-live=\"polite\">\n                    <span class=\"check-icon\" aria-hidden=\"true\">\n                      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\n                        <path d=\"M5 12.5l4.5 4.5L19 7.5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                      </svg>\n                    </span>\n                    <span>\n                      <strong>Dodano</strong> do koszyka\n                    </span>\n                  </div>\n                )}\n              </div>\n            </div>\n            <div class=\"boxes__box-content__info__value-product\">\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>\n        </div>\n        <div class=\"boxes__box-content__slider\">{this.renderSliderOrImage()}</div>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/component/index.js

@@ -6,6 +6,8 @@ export class MyModalBundle {
     this.product = undefined;
     this.baselink = undefined;
     this.colorname = undefined;
+    this.available_testers = undefined;
+    this.price = undefined;
     this.show = false;
     this.readyToClose = false;
   }
@@ -25,10 +27,16 @@ export class MyModalBundle {
   handleSelectedColor(event) {
     this.onSelectedColor.emit(event.detail);
   }
+  addToBasketHandler(event) {
+    this.addToBasket.emit(event.detail);
+  }
   render() {
     let content = null;
     if (this.show) {
-      content = [h("my-backdrop", null), h("my-modal", { shop: this.shop, product: this.product, baselink: this.baselink, selectedcolor: this.colorname })];
+      content = [
+        h("my-backdrop", null),
+        h("my-modal", { shop: this.shop, product: this.product, baselink: this.baselink, selectedcolor: this.colorname, available_testers: this.available_testers ? JSON.parse(this.available_testers) : null, price: this.price }),
+      ];
     }
     return (h("div", { onClick: () => {
         if (this.readyToClose) {
@@ -126,6 +134,40 @@ export class MyModalBundle {
         },
         "attribute": "colorname",
         "reflect": false
+      },
+      "available_testers": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | null",
+          "resolved": "null | string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "available_testers",
+        "reflect": false
+      },
+      "price": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number | null",
+          "resolved": "null | number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "price",
+        "reflect": false
       }
     };
   }
@@ -156,6 +198,21 @@ export class MyModalBundle {
             }
           }
         }
+      }, {
+        "method": "addToBasket",
+        "name": "addToBasket",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "{ id: number }",
+          "resolved": "{ id: number; }",
+          "references": {}
+        }
       }];
   }
   static get methods() {
@@ -214,6 +271,12 @@ export class MyModalBundle {
         "target": undefined,
         "capture": false,
         "passive": false
+      }, {
+        "name": "addToBasket",
+        "method": "addToBasketHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
       }];
   }
 }

package/dist/collection/components/component/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/component/index.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAQxG,MAAM,OAAO,aAAa;;;;;;gBAQR,KAAK;wBACG,KAAK;;EAG7B,KAAK,CAAC,IAAI;IACR,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;EACnB,CAAC;EAGD,KAAK,CAAC,KAAK;IACT,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;EACpB,CAAC;EAGD,sBAAsB,CAAC,KAAkB;IACvC,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC;EAC9C,CAAC;EAGD,iBAAiB;IACf,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IAClB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;EAC5B,CAAC;EAGD,mBAAmB,CAAC,KAAyB;IAC3C,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;EAC1C,CAAC;EAED,MAAM;IACJ,IAAI,OAAO,GAAG,IAAI,CAAC;IACnB,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,OAAO,GAAG,CAAC,sBAA2B,EAAE,gBAAU,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,aAAa,EAAE,IAAI,CAAC,SAAS,GAAa,CAAC,CAAC;KAChK;IACD,OAAO,CACL,WACE,OAAO,EAAE,GAAG,EAAE;QACZ,IAAI,IAAI,CAAC,YAAY,EAAE;UACrB,IAAI,CAAC,iBAAiB,EAAE,CAAC;SAC1B;MACH,CAAC;MAED,EAAC,MAAM;QACL,kBACG;;;;;;;;;mEASsD,CAChD,CACF;MACT,WAAK,KAAK,EAAC,iBAAiB,IAAE,OAAO,CAAO;MAC5C;QACE,cAAQ,GAAG,EAAC,0DAA0D,EAAC,MAAM,EAAC,GAAG,EAAC,KAAK,EAAC,GAAG,EAAC,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAW,CAC9I,CACP,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import Helmet from '@stencil/helmet';\nimport { Component, Prop, Method, Element, State, Listen, h, Event, EventEmitter } from '@stencil/core';\nimport { Color } from '../../types';\n\n@Component({\n  tag: 'my-component',\n  styleUrl: 'index.scss',\n  scoped: true,\n})\nexport class MyModalBundle {\n  @Element() modalEl: HTMLElement;\n  @Event({ bubbles: true, composed: true }) onSelectedColor: EventEmitter<Color>;\n  @Prop() shop: string;\n  @Prop() product: string;\n  @Prop() baselink: string;\n  @Prop() colorname: string | null;\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('onSelectedColorEmit')\n  handleSelectedColor(event: CustomEvent<Color>) {\n    this.onSelectedColor.emit(event.detail);\n  }\n\n  render() {\n    let content = null;\n    if (this.show) {\n      content = [<my-backdrop></my-backdrop>, <my-modal shop={this.shop} product={this.product} baselink={this.baselink} selectedcolor={this.colorname}></my-modal>];\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-537BV9VT');`}\n          </script>\n        </Helmet>\n        <div class=\"tinting-wrapper\">{content}</div>\n        <noscript>\n          <iframe src=\"https://www.googletagmanager.com/ns.html?id=GTM-537BV9VT\" height=\"0\" width=\"0\" style={{ display: 'none', visibility: 'hidden' }}></iframe>\n        </noscript>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/component/index.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAQxG,MAAM,OAAO,aAAa;;;;;;;;gBAWR,KAAK;wBACG,KAAK;;EAG7B,KAAK,CAAC,IAAI;IACR,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;EACnB,CAAC;EAGD,KAAK,CAAC,KAAK;IACT,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;EACpB,CAAC;EAGD,sBAAsB,CAAC,KAAkB;IACvC,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC;EAC9C,CAAC;EAGD,iBAAiB;IACf,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IAClB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;EAC5B,CAAC;EAGD,mBAAmB,CAAC,KAAyB;IAC3C,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;EAC1C,CAAC;EAGD,kBAAkB,CAAC,KAAkC;IACnD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;EACtC,CAAC;EAED,MAAM;IACJ,IAAI,OAAO,GAAG,IAAI,CAAC;IACnB,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,OAAO,GAAG;QACR,sBAA2B;QAC3B,gBACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,aAAa,EAAE,IAAI,CAAC,SAAS,EAC7B,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,IAAI,EACrF,KAAK,EAAE,IAAI,CAAC,KAAK,GACP;OACb,CAAC;KACH;IACD,OAAO,CACL,WACE,OAAO,EAAE,GAAG,EAAE;QACZ,IAAI,IAAI,CAAC,YAAY,EAAE;UACrB,IAAI,CAAC,iBAAiB,EAAE,CAAC;SAC1B;MACH,CAAC;MAED,EAAC,MAAM;QACL,kBACG;;;;;;;;;mEASsD,CAChD,CACF;MACT,WAAK,KAAK,EAAC,iBAAiB,IAAE,OAAO,CAAO;MAC5C;QACE,cAAQ,GAAG,EAAC,0DAA0D,EAAC,MAAM,EAAC,GAAG,EAAC,KAAK,EAAC,GAAG,EAAC,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAW,CAC9I,CACP,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import Helmet from '@stencil/helmet';\nimport { Component, Prop, Method, Element, State, Listen, h, Event, EventEmitter } from '@stencil/core';\nimport { Color } from '../../types';\n\n@Component({\n  tag: 'my-component',\n  styleUrl: 'index.scss',\n  scoped: true,\n})\nexport class MyModalBundle {\n  @Element() modalEl: HTMLElement;\n  @Event({ bubbles: true, composed: true }) onSelectedColor: EventEmitter<Color>;\n  @Event({ bubbles: true, composed: true }) addToBasket: EventEmitter<{ id: number }>;\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\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('onSelectedColorEmit')\n  handleSelectedColor(event: CustomEvent<Color>) {\n    this.onSelectedColor.emit(event.detail);\n  }\n\n  @Listen('addToBasket')\n  addToBasketHandler(event: CustomEvent<{ id: number }>) {\n    this.addToBasket.emit(event.detail);\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-537BV9VT');`}\n          </script>\n        </Helmet>\n        <div class=\"tinting-wrapper\">{content}</div>\n        <noscript>\n          <iframe src=\"https://www.googletagmanager.com/ns.html?id=GTM-537BV9VT\" height=\"0\" width=\"0\" style={{ display: 'none', visibility: 'hidden' }}></iframe>\n        </noscript>\n      </div>\n    );\n  }\n}\n"]}