@ppg_pl/pallete 2.0.26 → 2.0.27

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 = "@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}";
+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}@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}.search{position:relative;width:400px}@media (max-width: 768px){.search{width:100%}}.search input{font-size:16px;padding:19px;border-radius:27.35px;border:1px solid #dfdfdf;width:100%;color:#4c4c4c}.search button{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;
@@ -18,6 +18,7 @@ const MySearch = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
+    this.__attachShadow();
     this.searchColors = createEvent(this, "searchColors", 7);
     this.fetchColorsByName = (text) => {
       this.searchColors.emit(text);
@@ -61,7 +62,7 @@ const MySearch = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "searchText": ["fetchColorsByNameHandle"]
   }; }
   static get style() { return mySearchCss; }
-}, [2, "my-search", {
+}, [1, "my-search", {
     "productname": [1],
     "shopname": [1],
     "isMobile": [4, "is-mobile"],

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

@@ -1 +1 @@
-{"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}
+{"file":"my-search2.js","mappings":";;;AAAA,MAAM,WAAW,GAAG,8iGAA8iG;;ACGlkG,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=shadow","./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  shadow: 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({ bubbles: true, composed: true }) 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-45a30349.js → index-bfca3bb0.js}

@@ -9,6 +9,7 @@ const NAMESPACE = 'pallete';
  * Modified for Stencil's renderer and slot projection
  */
 let scopeId;
+let hostTagName;
 let isSvgMode = false;
 let queuePending = false;
 const getAssetPath = (path) => {
@@ -358,7 +359,7 @@ const attachStyles = (hostRef) => {
     const elm = hostRef.$hostElement$;
     const flags = cmpMeta.$flags$;
     const endAttachStyles = createTime('attachStyles', cmpMeta.$tagName$);
-    const scopeId = addStyle(elm.getRootNode(), cmpMeta);
+    const scopeId = addStyle(elm.shadowRoot ? elm.shadowRoot : elm.getRootNode(), cmpMeta);
     // TODO(STENCIL-662): Remove code related to deprecated shadowDomShim field
     if (flags & 10 /* CMP_FLAGS.needsScopedEncapsulation */) {
         // only required when we're NOT using native shadow dom (slot)
@@ -370,9 +371,6 @@ const attachStyles = (hostRef) => {
         // DOM WRITE!!
         elm['s-sc'] = scopeId;
         elm.classList.add(scopeId + '-h');
-        if (flags & 2 /* CMP_FLAGS.scopedCssEncapsulation */) {
-            elm.classList.add(scopeId + '-s');
-        }
     }
     endAttachStyles();
 };
@@ -604,6 +602,9 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
 const addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) => {
     let containerElm = (parentElm);
     let childNode;
+    if (containerElm.shadowRoot && containerElm.tagName === hostTagName) {
+        containerElm = containerElm.shadowRoot;
+    }
     for (; startIdx <= endIdx; ++startIdx) {
         if (vnodes[startIdx]) {
             childNode = createElm(null, parentVNode, startIdx);
@@ -945,10 +946,11 @@ const renderVdom = (hostRef, renderFnResults) => {
     const hostElm = hostRef.$hostElement$;
     const oldVNode = hostRef.$vnode$ || newVNode(null, null);
     const rootVnode = isHost(renderFnResults) ? renderFnResults : h(null, null, renderFnResults);
+    hostTagName = hostElm.tagName;
     rootVnode.$tag$ = null;
     rootVnode.$flags$ |= 4 /* VNODE_FLAGS.isHost */;
     hostRef.$vnode$ = rootVnode;
-    rootVnode.$elm$ = oldVNode.$elm$ = (hostElm);
+    rootVnode.$elm$ = oldVNode.$elm$ = (hostElm.shadowRoot || hostElm );
     {
         scopeId = hostElm['s-sc'];
     }
@@ -1456,6 +1458,17 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
                     super(self);
                     self = this;
                     registerHost(self, cmpMeta);
+                    if (cmpMeta.$flags$ & 1 /* CMP_FLAGS.shadowDomEncapsulation */) {
+                        // this component is using shadow dom
+                        // and this browser supports shadow dom
+                        // add the read-only property "shadowRoot" to the host element
+                        // adding the shadow root build conditionals to minimize runtime
+                        {
+                            {
+                                self.attachShadow({ mode: 'open' });
+                            }
+                        }
+                    }
                 }
                 connectedCallback() {
                     if (appLoadFallback) {
@@ -1662,4 +1675,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-45a30349.js.map
+//# sourceMappingURL=index-bfca3bb0.js.map