@ppg_pl/pallete 2.0.23 → 2.0.26

package/dist/components/my-search2.js

@@ -1,7 +1,7 @@
 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}";
+const mySearchCss = "@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-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}";
 
 function debounce(func, wait) {
   let timeout;

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

@@ -1 +1 @@
-{"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}
+{"file":"my-search2.js","mappings":";;;AAAA,MAAM,WAAW,GAAG,i1BAAi1B;;ACGr2B,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/{index-b0145abf.js → index-45a30349.js}

@@ -38,6 +38,11 @@ const HYDRATED_CSS = '{visibility:hidden}.hydrated{visibility:inherit}';
  * Don't add values to these!!
  */
 const EMPTY_OBJ = {};
+/**
+ * Namespaces
+ */
+const SVG_NS = 'http://www.w3.org/2000/svg';
+const HTML_NS = 'http://www.w3.org/1999/xhtml';
 const isDef = (v) => v != null;
 /**
  * Check whether a value is a 'complex type', defined here as an object or a
@@ -539,8 +544,15 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
         elm = newVNode.$elm$ = doc.createTextNode(newVNode.$text$);
     }
     else {
+        if (!isSvgMode) {
+            isSvgMode = newVNode.$tag$ === 'svg';
+        }
         // create element
-        elm = newVNode.$elm$ = (doc.createElement(newVNode.$tag$));
+        elm = newVNode.$elm$ = (doc.createElementNS(isSvgMode ? SVG_NS : HTML_NS, newVNode.$tag$)
+            );
+        if (isSvgMode && newVNode.$tag$ === 'foreignObject') {
+            isSvgMode = false;
+        }
         // add css classes, attrs, props, listeners, etc.
         {
             updateElement(null, newVNode, isSvgMode);
@@ -561,6 +573,16 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
                 }
             }
         }
+        {
+            if (newVNode.$tag$ === 'svg') {
+                // Only reset the SVG context when we're exiting <svg> element
+                isSvgMode = false;
+            }
+            else if (elm.tagName === 'foreignObject') {
+                // Reenter SVG context when we're exiting <foreignObject> element
+                isSvgMode = true;
+            }
+        }
     }
     return elm;
 };
@@ -863,8 +885,14 @@ const patch = (oldVNode, newVNode) => {
     const elm = (newVNode.$elm$ = oldVNode.$elm$);
     const oldChildren = oldVNode.$children$;
     const newChildren = newVNode.$children$;
+    const tag = newVNode.$tag$;
     const text = newVNode.$text$;
     if (text === null) {
+        {
+            // test if we're rendering an svg element, or still rendering nodes inside of one
+            // only add this to the when the compiler sees we're using an svg somewhere
+            isSvgMode = tag === 'svg' ? true : tag === 'foreignObject' ? false : isSvgMode;
+        }
         {
             {
                 // either this is the first render of an element OR it's an update
@@ -891,6 +919,9 @@ const patch = (oldVNode, newVNode) => {
             // no new child vnodes, but there are old child vnodes to remove
             removeVnodes(oldChildren, 0, oldChildren.length - 1);
         }
+        if (isSvgMode && tag === 'svg') {
+            isSvgMode = false;
+        }
     }
     else if (oldVNode.$text$ !== text) {
         // update the text content for the text only vnode
@@ -1631,4 +1662,4 @@ const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
 
 export { getElement as a, bootstrapLazy as b, createEvent as c, getAssetPath as g, h, promiseResolve as p, registerInstance as r, setNonce as s };
 
-//# sourceMappingURL=index-b0145abf.js.map
+//# sourceMappingURL=index-45a30349.js.map