@ppg_pl/pallete 2.0.20 → 2.0.22

package/dist/components/my-search2.js

@@ -1,4 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, getAssetPath } from '@stencil/core/internal/client';
+import { s as setDataLayer } from './gtmUtils.js';
 
 const mySearchCss = ".pallete-wrapper.sc-my-search *.sc-my-search{font-family:\"Galatea\", sans-serif}.search.sc-my-search{position:relative;width:400px}@media (max-width: 768px){.search.sc-my-search{width:100%}}.search.sc-my-search input.sc-my-search{font-size:16px;padding:19px;border-radius:27.35px;border:1px solid #dfdfdf;width:100%;color:#4c4c4c}.search.sc-my-search button.sc-my-search{position:absolute;border:none;background-color:transparent;right:10px;top:0;width:50px;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer}";
 
@@ -24,8 +25,9 @@ const MySearch = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.debouncedInputChangeValue = debounce((value) => {
       this.fetchColorsByName(value);
       this.searchText = value;
-    }, 300);
-    this.productId = undefined;
+    }, 500);
+    this.productname = undefined;
+    this.shopname = undefined;
     this.isMobile = undefined;
     this.searchIcon = 'search.svg';
     this.searchText = null;
@@ -35,6 +37,14 @@ const MySearch = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.debouncedInputChangeValue(value);
   }
   fetchColorsByNameHandle(newValue) {
+    if (newValue.length >= 3) {
+      setDataLayer({
+        event: 'ColorSearch',
+        shop: this.shopname,
+        product: this.productname,
+        search_term: newValue,
+      });
+    }
     this.fetchColorsByName(newValue);
   }
   clearSearchTextHandler() {
@@ -52,7 +62,8 @@ const MySearch = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }; }
   static get style() { return mySearchCss; }
 }, [2, "my-search", {
-    "productId": [2, "product-id"],
+    "productname": [1],
+    "shopname": [1],
     "isMobile": [4, "is-mobile"],
     "searchIcon": [1, "search-icon"],
     "searchText": [32]

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

@@ -1 +1 @@
-{"file":"my-search2.js","mappings":";;AAAA,MAAM,WAAW,GAAG,qjBAAqjB;;ACEzkB,SAAS,QAAQ,CAAC,IAAc,EAAE,IAAY;EAC5C,IAAI,OAAsC,CAAC;EAC3C,OAAO,SAAS,gBAAgB,CAAC,GAAG,IAAW;IAC7C,MAAM,KAAK,GAAG;MACZ,YAAY,CAAC,OAAO,CAAC,CAAC;MACtB,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC;KACf,CAAC;IACF,YAAY,CAAC,OAAO,CAAC,CAAC;IACtB,OAAO,GAAG,UAAU,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;GACnC,CAAC;AACJ,CAAC;MAQY,QAAQ;;;;;IAOnB,sBAAiB,GAAG,CAAC,IAAY;MAC/B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC9B,CAAC;IAEM,8BAAyB,GAAG,QAAQ,CAAC,CAAC,KAAa;MACzD,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;MAC9B,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;KACzB,EAAE,GAAG,CAAC,CAAC;;;sBAXa,YAAY;sBACI,IAAI;;EAYjC,kBAAkB,CAAC,KAAY;IACrC,MAAM,KAAK,GAAI,KAAK,CAAC,MAA2B,CAAC,KAAK,CAAC;IACvD,IAAI,CAAC,yBAAyB,CAAC,KAAK,CAAC,CAAC;GACvC;EAGD,uBAAuB,CAAC,QAAgB;IACtC,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAC;GAClC;EAGD,sBAAsB;IACpB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;GACxB;EAED,MAAM;IACJ,QACE,WAAK,KAAK,EAAE,QAAQ,IAClB,aAAO,WAAW,EAAE,IAAI,CAAC,QAAQ,GAAG,gBAAgB,GAAG,0BAA0B,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,IAAI,EAAE,EAAE,IAAI,EAAC,MAAM,EAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,GAAI,EAE5K,cACE,OAAO,EAAE;QACP,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QAE3D,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC;OACtB,IAED,WAAK,GAAG,EAAE,YAAY,CAAC,YAAY,IAAI,CAAC,UAAU,EAAE,CAAC,EAAE,GAAG,EAAC,YAAY,GAAG,CACnE,CACL,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/my-search/my-search.scss?tag=my-search&encapsulation=scoped","./src/components/my-search/my-search.tsx"],"sourcesContent":["@import '../../global/app.scss';\n\n.search {\n  position: relative;\n  width: 400px;\n  @media (max-width: $small) {\n    width: 100%;\n  }\n  input {\n    font-size: 16px;\n    padding: 19px;\n    border-radius: 27.35px;\n    border: 1px solid #dfdfdf;\n    width: 100%;\n    color: #4c4c4c;\n  }\n\n  button {\n    position: absolute;\n    border: none;\n    background-color: transparent;\n    right: 10px;\n    top: 0;\n    width: 50px;\n    height: calc(100%);\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n  }\n}\n","import { Component, Prop, h, State, Listen, getAssetPath, EventEmitter, Event, Watch } from '@stencil/core';\n\nfunction debounce(func: Function, wait: number) {\n  let timeout: ReturnType<typeof setTimeout>;\n  return function executedFunction(...args: any[]) {\n    const later = () => {\n      clearTimeout(timeout);\n      func(...args);\n    };\n    clearTimeout(timeout);\n    timeout = setTimeout(later, wait);\n  };\n}\n\n@Component({\n  tag: 'my-search',\n  styleUrl: 'my-search.scss',\n  assetsDirs: ['assets'],\n  scoped: true,\n})\nexport class MySearch {\n  @Prop() productId: number;\n  @Prop() isMobile: boolean;\n  @Prop() searchIcon = 'search.svg';\n  @State() searchText: string | null = null;\n  @Event() searchColors: EventEmitter;\n\n  fetchColorsByName = (text: string) => {\n    this.searchColors.emit(text);\n  };\n\n  private debouncedInputChangeValue = debounce((value: string) => {\n    this.fetchColorsByName(value);\n    this.searchText = value;\n  }, 300);\n\n  private onInputChangeValue(event: Event) {\n    const value = (event.target as HTMLInputElement).value;\n    this.debouncedInputChangeValue(value);\n  }\n\n  @Watch('searchText')\n  fetchColorsByNameHandle(newValue: string) {\n    this.fetchColorsByName(newValue);\n  }\n\n  @Listen('clearSearchText', { target: 'document' })\n  clearSearchTextHandler() {\n    this.searchText = null;\n  }\n\n  render() {\n    return (\n      <div class={'search'}>\n        <input placeholder={this.isMobile ? 'Wyszukaj kolor' : 'Wyszukaj kolor po nazwie'} value={this.searchText || ''} type=\"text\" onInput={this.onInputChangeValue.bind(this)} />\n\n        <button\n          onClick={() => {\n            this.searchText && this.fetchColorsByName(this.searchText);\n\n            this.searchText = '';\n          }}\n        >\n          <img src={getAssetPath(`./assets/${this.searchIcon}`)} alt=\"arrow_down\" />\n        </button>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"my-search2.js","mappings":";;;AAAA,MAAM,WAAW,GAAG,qjBAAqjB;;ACGzkB,SAAS,QAAQ,CAAC,IAAc,EAAE,IAAY;EAC5C,IAAI,OAAsC,CAAC;EAC3C,OAAO,SAAS,gBAAgB,CAAC,GAAG,IAAW;IAC7C,MAAM,KAAK,GAAG;MACZ,YAAY,CAAC,OAAO,CAAC,CAAC;MACtB,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC;KACf,CAAC;IACF,YAAY,CAAC,OAAO,CAAC,CAAC;IACtB,OAAO,GAAG,UAAU,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;GACnC,CAAC;AACJ,CAAC;MAQY,QAAQ;;;;;IAQnB,sBAAiB,GAAG,CAAC,IAAY;MAC/B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC9B,CAAC;IAEM,8BAAyB,GAAG,QAAQ,CAAC,CAAC,KAAa;MACzD,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;MAC9B,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;KACzB,EAAE,GAAG,CAAC,CAAC;;;;sBAXa,YAAY;sBACI,IAAI;;EAYjC,kBAAkB,CAAC,KAAY;IACrC,MAAM,KAAK,GAAI,KAAK,CAAC,MAA2B,CAAC,KAAK,CAAC;IACvD,IAAI,CAAC,yBAAyB,CAAC,KAAK,CAAC,CAAC;GACvC;EAGD,uBAAuB,CAAC,QAAgB;IACtC,IAAI,QAAQ,CAAC,MAAM,IAAI,CAAC,EAAE;MACxB,YAAY,CAAC;QACX,KAAK,EAAE,aAAa;QACpB,IAAI,EAAE,IAAI,CAAC,QAAQ;QACnB,OAAO,EAAE,IAAI,CAAC,WAAW;QACzB,WAAW,EAAE,QAAQ;OACtB,CAAC,CAAC;KACJ;IAED,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAC;GAClC;EAGD,sBAAsB;IACpB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;GACxB;EAED,MAAM;IACJ,QACE,WAAK,KAAK,EAAE,QAAQ,IAClB,aAAO,WAAW,EAAE,IAAI,CAAC,QAAQ,GAAG,gBAAgB,GAAG,0BAA0B,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,IAAI,EAAE,EAAE,IAAI,EAAC,MAAM,EAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,GAAI,EAE5K,cACE,OAAO,EAAE;QACP,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QAE3D,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC;OACtB,IAED,WAAK,GAAG,EAAE,YAAY,CAAC,YAAY,IAAI,CAAC,UAAU,EAAE,CAAC,EAAE,GAAG,EAAC,YAAY,GAAG,CACnE,CACL,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/my-search/my-search.scss?tag=my-search&encapsulation=scoped","./src/components/my-search/my-search.tsx"],"sourcesContent":["@import '../../global/app.scss';\n\n.search {\n  position: relative;\n  width: 400px;\n  @media (max-width: $small) {\n    width: 100%;\n  }\n  input {\n    font-size: 16px;\n    padding: 19px;\n    border-radius: 27.35px;\n    border: 1px solid #dfdfdf;\n    width: 100%;\n    color: #4c4c4c;\n  }\n\n  button {\n    position: absolute;\n    border: none;\n    background-color: transparent;\n    right: 10px;\n    top: 0;\n    width: 50px;\n    height: calc(100%);\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n  }\n}\n","import { Component, Prop, h, State, Listen, getAssetPath, EventEmitter, Event, Watch } from '@stencil/core';\nimport { setDataLayer } from '../../gtmUtils';\n\nfunction debounce(func: Function, wait: number) {\n  let timeout: ReturnType<typeof setTimeout>;\n  return function executedFunction(...args: any[]) {\n    const later = () => {\n      clearTimeout(timeout);\n      func(...args);\n    };\n    clearTimeout(timeout);\n    timeout = setTimeout(later, wait);\n  };\n}\n\n@Component({\n  tag: 'my-search',\n  styleUrl: 'my-search.scss',\n  assetsDirs: ['assets'],\n  scoped: true,\n})\nexport class MySearch {\n  @Prop() productname: string;\n  @Prop() shopname: string;\n  @Prop() isMobile: boolean;\n  @Prop() searchIcon = 'search.svg';\n  @State() searchText: string | null = null;\n  @Event() searchColors: EventEmitter;\n\n  fetchColorsByName = (text: string) => {\n    this.searchColors.emit(text);\n  };\n\n  private debouncedInputChangeValue = debounce((value: string) => {\n    this.fetchColorsByName(value);\n    this.searchText = value;\n  }, 500);\n\n  private onInputChangeValue(event: Event) {\n    const value = (event.target as HTMLInputElement).value;\n    this.debouncedInputChangeValue(value);\n  }\n\n  @Watch('searchText')\n  fetchColorsByNameHandle(newValue: string) {\n    if (newValue.length >= 3) {\n      setDataLayer({\n        event: 'ColorSearch',\n        shop: this.shopname,\n        product: this.productname,\n        search_term: newValue,\n      });\n    }\n\n    this.fetchColorsByName(newValue);\n  }\n\n  @Listen('clearSearchText', { target: 'document' })\n  clearSearchTextHandler() {\n    this.searchText = null;\n  }\n\n  render() {\n    return (\n      <div class={'search'}>\n        <input placeholder={this.isMobile ? 'Wyszukaj kolor' : 'Wyszukaj kolor po nazwie'} value={this.searchText || ''} type=\"text\" onInput={this.onInputChangeValue.bind(this)} />\n\n        <button\n          onClick={() => {\n            this.searchText && this.fetchColorsByName(this.searchText);\n\n            this.searchText = '';\n          }}\n        >\n          <img src={getAssetPath(`./assets/${this.searchIcon}`)} alt=\"arrow_down\" />\n        </button>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/loader.js

@@ -11,7 +11,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return bootstrapLazy([["my-backdrop_8",[[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,"my-modal",{"shop":[1],"product":[1],"baselink":[1],"selectedcolor":[1],"closeImage":[1,"close-image"],"arrowDown":[1,"arrow-down"],"chunksNum":[32],"data":[32],"preloader":[32],"loading":[32],"colors":[32],"currentColor":[32],"currentIndex":[32],"infoBoxWidth":[32],"boxWidth":[32],"padding":[32],"isMobile":[32],"showRange":[32],"colorCategories":[32],"selectedCategory":[32],"page":[32],"colorIsSelected":[32],"open":[64]},[[0,"closeInfoBox","closeInfoBoxHandler"],[9,"resize","handleResize"],[0,"searchColors","searchColorsHandler"]]],[0,"my-backdrop"],[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-loader"],[2,"my-search",{"productId":[2,"product-id"],"isMobile":[4,"is-mobile"],"searchIcon":[1,"search-icon"],"searchText":[32]},[[4,"clearSearchText","clearSearchTextHandler"]]],[0,"my-slider",{"slides":[16],"shop":[1],"product":[1],"color":[1]}]]]], options);
+  return bootstrapLazy([["my-backdrop_8",[[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,"my-modal",{"shop":[1],"product":[1],"baselink":[1],"selectedcolor":[1],"closeImage":[1,"close-image"],"arrowDown":[1,"arrow-down"],"chunksNum":[32],"data":[32],"preloader":[32],"loading":[32],"colors":[32],"currentColor":[32],"currentIndex":[32],"infoBoxWidth":[32],"boxWidth":[32],"padding":[32],"isMobile":[32],"showRange":[32],"colorCategories":[32],"selectedCategory":[32],"page":[32],"colorIsSelected":[32],"open":[64]},[[0,"closeInfoBox","closeInfoBoxHandler"],[9,"resize","handleResize"],[0,"searchColors","searchColorsHandler"]]],[0,"my-backdrop"],[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-loader"],[2,"my-search",{"productname":[1],"shopname":[1],"isMobile":[4,"is-mobile"],"searchIcon":[1,"search-icon"],"searchText":[32]},[[4,"clearSearchText","clearSearchTextHandler"]]],[0,"my-slider",{"slides":[16],"shop":[1],"product":[1],"color":[1]}]]]], options);
   });
 };
 

package/dist/esm/my-backdrop_8.entry.js

@@ -2978,6 +2978,10 @@ const MyModal = class {
   componentWillLoad() {
     this.preloader = true;
     this.fetchProductData();
+    setDataLayer({
+      shop: this.shop,
+      product: this.product,
+    });
   }
   componentWillRender() {
     this.displayForMobile();
@@ -2986,8 +2990,8 @@ const MyModal = class {
     this.openSeletedColor();
   }
   render() {
-    var _a, _b, _c;
-    return (h("div", { class: `my-modal`, onMouseEnter: () => this.handleReadyToClose(false), onMouseLeave: () => this.handleReadyToClose(true) }, this.preloader && (h("div", { class: 'loader' }, h("my-loader", null))), !this.preloader && this.data && (h("div", { class: `my-modal__header` }, h("div", { class: "image-wrapper" }, h("img", { src: `${APIURL}/assets/${(_a = this.data) === null || _a === void 0 ? void 0 : _a.modalLogo}?access_token=${accessToken}`, alt: "modal-logo" }), !this.preloader && this.data && (h("p", { class: "my-modal__see-more" }, (_b = this.data) === null || _b === void 0 ? void 0 : _b.modalDescription))), h("div", { class: "search-wrapper" }, !this.preloader && h("my-search", { productId: Number((_c = this.data) === null || _c === void 0 ? void 0 : _c.id), isMobile: this.isMobile }), !this.preloader && (h("button", { class: "my-modal__close", onClick: () => this.closeModalHandler() }, h("img", { src: getAssetPath(`./assets/${this.closeImage}`), alt: "closebtn" })))))), h("div", { class: 'my-modal__wrapper' }, this.loading && h("my-loader", null), !this.loading && this.colors && (h("div", { class: 'container_boxes' }, this.colors.list.length > 0 ? (this.chunks(this.colors.list).map((color, index) => {
+    var _a, _b;
+    return (h("div", { class: `my-modal`, onMouseEnter: () => this.handleReadyToClose(false), onMouseLeave: () => this.handleReadyToClose(true) }, this.preloader && (h("div", { class: 'loader' }, h("my-loader", null))), !this.preloader && this.data && (h("div", { class: `my-modal__header` }, h("div", { class: "image-wrapper" }, h("img", { src: `${APIURL}/assets/${(_a = this.data) === null || _a === void 0 ? void 0 : _a.modalLogo}?access_token=${accessToken}`, alt: "modal-logo" }), !this.preloader && this.data && (h("p", { class: "my-modal__see-more" }, (_b = this.data) === null || _b === void 0 ? void 0 : _b.modalDescription))), h("div", { class: "search-wrapper" }, !this.preloader && h("my-search", { shopname: this.shop, productname: this.data.name, isMobile: this.isMobile }), !this.preloader && (h("button", { class: "my-modal__close", onClick: () => this.closeModalHandler() }, h("img", { src: getAssetPath(`./assets/${this.closeImage}`), alt: "closebtn" })))))), h("div", { class: 'my-modal__wrapper' }, this.loading && h("my-loader", null), !this.loading && this.colors && (h("div", { class: 'container_boxes' }, this.colors.list.length > 0 ? (this.chunks(this.colors.list).map((color, index) => {
       var _a;
       return (h("div", { key: index, class: "boxes" }, h("div", { class: "boxes__list" }, color.map((c) => {
         var _a;
@@ -3046,8 +3050,9 @@ const MySearch = class {
     this.debouncedInputChangeValue = debounce((value) => {
       this.fetchColorsByName(value);
       this.searchText = value;
-    }, 300);
-    this.productId = undefined;
+    }, 500);
+    this.productname = undefined;
+    this.shopname = undefined;
     this.isMobile = undefined;
     this.searchIcon = 'search.svg';
     this.searchText = null;
@@ -3057,6 +3062,14 @@ const MySearch = class {
     this.debouncedInputChangeValue(value);
   }
   fetchColorsByNameHandle(newValue) {
+    if (newValue.length >= 3) {
+      setDataLayer({
+        event: 'ColorSearch',
+        shop: this.shopname,
+        product: this.productname,
+        search_term: newValue,
+      });
+    }
     this.fetchColorsByName(newValue);
   }
   clearSearchTextHandler() {