@ppg_pl/pallete 0.0.1 → 0.0.2

package/dist/cjs/{index-f418fc60.js → index-029079e0.js}

@@ -22,6 +22,7 @@ function _interopNamespace(e) {
 
 const NAMESPACE = 'pallete';
 
+let scopeId;
 let isSvgMode = false;
 let queuePending = false;
 const win = typeof window !== 'undefined' ? window : {};
@@ -142,8 +143,23 @@ const addStyle = (styleContainerNode, cmpMeta, mode, hostElm) => {
 const attachStyles = (hostRef) => {
     const cmpMeta = hostRef.$cmpMeta$;
     const elm = hostRef.$hostElement$;
+    const flags = cmpMeta.$flags$;
     const endAttachStyles = createTime('attachStyles', cmpMeta.$tagName$);
-    addStyle(elm.getRootNode(), cmpMeta);
+    const scopeId = addStyle(elm.getRootNode(), cmpMeta);
+    if (flags & 10 /* needsScopedEncapsulation */) {
+        // only required when we're NOT using native shadow dom (slot)
+        // or this browser doesn't support native shadow dom
+        // and this host element was NOT created with SSR
+        // let's pick out the inner content for slot projection
+        // create a node to represent where the original
+        // content was first placed, which is useful later on
+        // DOM WRITE!!
+        elm['s-sc'] = scopeId;
+        elm.classList.add(scopeId + '-h');
+        if (flags & 2 /* scopedCssEncapsulation */) {
+            elm.classList.add(scopeId + '-s');
+        }
+    }
     endAttachStyles();
 };
 const getScopeId = (cmp, mode) => 'sc-' + (cmp.$tagName$);
@@ -155,6 +171,7 @@ const getScopeId = (cmp, mode) => 'sc-' + (cmp.$tagName$);
  * Don't add values to these!!
  */
 const EMPTY_OBJ = {};
+const isDef = (v) => v != null;
 const isComplexType = (o) => {
     // https://jsperf.com/typeof-fn-object/5
     o = typeof o;
@@ -442,6 +459,11 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
         {
             updateElement(null, newVNode, isSvgMode);
         }
+        if (isDef(scopeId) && elm['s-si'] !== scopeId) {
+            // if there is a scopeId and this is the initial render
+            // then let's add the scopeId as a css class
+            elm.classList.add((elm['s-si'] = scopeId));
+        }
         if (newVNode.$children$) {
             for (i = 0; i < newVNode.$children$.length; ++i) {
                 // create the node
@@ -626,6 +648,9 @@ const renderVdom = (hostRef, renderFnResults) => {
     rootVnode.$flags$ |= 4 /* isHost */;
     hostRef.$vnode$ = rootVnode;
     rootVnode.$elm$ = oldVNode.$elm$ = (hostElm);
+    {
+        scopeId = hostElm['s-sc'];
+    }
     // synchronous patch
     patch(oldVNode, rootVnode);
 };

package/dist/cjs/loader.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-f418fc60.js');
+const index = require('./index-029079e0.js');
 
 /*
  Stencil Client Patch Esm v2.17.0 | MIT Licensed | https://stenciljs.com
@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["my-backdrop_8.cjs",[[0,"my-component",{"shop":[1],"product":[1],"show":[32],"open":[64]},[[0,"close","closeModalHandler"]]],[0,"my-modal",{"shop":[1],"product":[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],"open":[64]},[[0,"closeInfoBox","closeInfoBoxHandler"],[9,"resize","handleResize"],[0,"searchColors","searchColorsHandler"]]],[0,"my-backdrop"],[0,"my-colorinfo",{"currentColor":[16],"shop":[1],"product":[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"]}],[0,"my-loader"],[0,"my-search",{"productId":[2,"product-id"],"isMobile":[4,"is-mobile"],"searchIcon":[1,"search-icon"],"searchText":[32]}],[0,"my-slider",{"slides":[16],"shop":[1],"product":[1],"color":[1]}]]]], options);
+  return index.bootstrapLazy([["my-backdrop_8.cjs",[[2,"my-component",{"shop":[1],"product":[1],"show":[32],"open":[64]},[[0,"close","closeModalHandler"]]],[0,"my-modal",{"shop":[1],"product":[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],"open":[64]},[[0,"closeInfoBox","closeInfoBoxHandler"],[9,"resize","handleResize"],[0,"searchColors","searchColorsHandler"]]],[0,"my-backdrop"],[0,"my-colorinfo",{"currentColor":[16],"shop":[1],"product":[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"]}],[0,"my-loader"],[2,"my-search",{"productId":[2,"product-id"],"isMobile":[4,"is-mobile"],"searchIcon":[1,"search-icon"],"searchText":[32]}],[0,"my-slider",{"slides":[16],"shop":[1],"product":[1],"color":[1]}]]]], options);
   });
 };
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index$1 = require('./index-f418fc60.js');
+const index$1 = require('./index-029079e0.js');
 
 const myBackdropCss = "html{font-size:62.5%}body{font-size:1.5rem}*{font-family:\"Galatea\", sans-serif}my-backdrop{width:100%;height:100%;background-color:rgba(0, 0, 0, 0.7);position:fixed;z-index:100;left:0;top:0}";
 
@@ -204,7 +204,7 @@ const Helmet = (_props, children, utils) => {
     return null;
 };
 
-const myComponentCss = "html{font-size:62.5%}body{font-size:1.5rem}*{font-family:\"Galatea\", sans-serif}.pallete-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:center}";
+const myComponentCss = ".pallete-wrapper.sc-my-component{display:flex;flex-direction:column;align-items:center;justify-content:center}";
 
 const MyModalBundle = class {
   constructor(hostRef) {
@@ -2631,7 +2631,7 @@ const MyModal = class {
 };
 MyModal.style = myModalCss;
 
-const mySearchCss = "html{font-size:62.5%}body{font-size:1.5rem}*{font-family:\"Galatea\", sans-serif}.search{position:relative;width:400px}@media (max-width: 768px){.search{width:100%}}.search input{margin-bottom:12px;font-size:1.6rem;padding:19px;border-radius:27.35px;border:1px solid #dfdfdf;width:100%}.search button{position:absolute;border:none;background-color:transparent;right:-20px;top:0;width:50px;height:calc(100% - 12px);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer}";
+const mySearchCss = "html.sc-my-search{font-size:62.5%}body.sc-my-search{font-size:1.5rem}*.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{margin-bottom:12px;font-size:1.6rem;padding:19px;border-radius:27.35px;border:1px solid #dfdfdf;width:100%}.search.sc-my-search button.sc-my-search{position:absolute;border:none;background-color:transparent;right:-20px;top:0;width:50px;height:calc(100% - 12px);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer}";
 
 const MySearch = class {
   constructor(hostRef) {

package/dist/cjs/pallete.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-f418fc60.js');
+const index = require('./index-029079e0.js');
 
 /*
  Stencil Client Patch Browser v2.17.0 | MIT Licensed | https://stenciljs.com
@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["my-backdrop_8.cjs",[[0,"my-component",{"shop":[1],"product":[1],"show":[32],"open":[64]},[[0,"close","closeModalHandler"]]],[0,"my-modal",{"shop":[1],"product":[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],"open":[64]},[[0,"closeInfoBox","closeInfoBoxHandler"],[9,"resize","handleResize"],[0,"searchColors","searchColorsHandler"]]],[0,"my-backdrop"],[0,"my-colorinfo",{"currentColor":[16],"shop":[1],"product":[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"]}],[0,"my-loader"],[0,"my-search",{"productId":[2,"product-id"],"isMobile":[4,"is-mobile"],"searchIcon":[1,"search-icon"],"searchText":[32]}],[0,"my-slider",{"slides":[16],"shop":[1],"product":[1],"color":[1]}]]]], options);
+  return index.bootstrapLazy([["my-backdrop_8.cjs",[[2,"my-component",{"shop":[1],"product":[1],"show":[32],"open":[64]},[[0,"close","closeModalHandler"]]],[0,"my-modal",{"shop":[1],"product":[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],"open":[64]},[[0,"closeInfoBox","closeInfoBoxHandler"],[9,"resize","handleResize"],[0,"searchColors","searchColorsHandler"]]],[0,"my-backdrop"],[0,"my-colorinfo",{"currentColor":[16],"shop":[1],"product":[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"]}],[0,"my-loader"],[2,"my-search",{"productId":[2,"product-id"],"isMobile":[4,"is-mobile"],"searchIcon":[1,"search-icon"],"searchText":[32]}],[0,"my-slider",{"slides":[16],"shop":[1],"product":[1],"color":[1]}]]]], options);
 });

package/dist/collection/components/my-component/my-component.css

@@ -1,15 +1,3 @@
-html {
-  font-size: 62.5%;
-}
-
-body {
-  font-size: 1.5rem;
-}
-
-* {
-  font-family: "Galatea", sans-serif;
-}
-
 .pallete-wrapper {
   display: flex;
   flex-direction: column;

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

@@ -32,6 +32,7 @@ export class MyModalBundle {
         h("iframe", { src: "https://www.googletagmanager.com/ns.html?id=GTM-PMTKHDX", height: "0", width: "0", style: { display: 'none', visibility: 'hidden' } }))));
   }
   static get is() { return "my-component"; }
+  static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() { return {
     "$": ["my-component.scss"]
   }; }

package/dist/collection/components/my-search/my-search.js

@@ -25,6 +25,7 @@ export class MySearch {
         h("img", { src: getAssetPath(`./assets/${this.searchIcon}`), alt: "arrow_down" }))));
   }
   static get is() { return "my-search"; }
+  static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() { return {
     "$": ["my-search.scss"]
   }; }

package/dist/components/my-component.js

@@ -123,7 +123,7 @@ const Helmet = (_props, children, utils) => {
     return null;
 };
 
-const myComponentCss = "html{font-size:62.5%}body{font-size:1.5rem}*{font-family:\"Galatea\", sans-serif}.pallete-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:center}";
+const myComponentCss = ".pallete-wrapper.sc-my-component{display:flex;flex-direction:column;align-items:center;justify-content:center}";
 
 const MyModalBundle = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -155,7 +155,7 @@ const MyModalBundle = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   }
   get modalEl() { return this; }
   static get style() { return myComponentCss; }
-}, [0, "my-component", {
+}, [2, "my-component", {
     "shop": [1],
     "product": [1],
     "show": [32],

package/dist/components/my-search2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, getAssetPath } from '@stencil/core/internal/client';
 
-const mySearchCss = "html{font-size:62.5%}body{font-size:1.5rem}*{font-family:\"Galatea\", sans-serif}.search{position:relative;width:400px}@media (max-width: 768px){.search{width:100%}}.search input{margin-bottom:12px;font-size:1.6rem;padding:19px;border-radius:27.35px;border:1px solid #dfdfdf;width:100%}.search button{position:absolute;border:none;background-color:transparent;right:-20px;top:0;width:50px;height:calc(100% - 12px);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer}";
+const mySearchCss = "html.sc-my-search{font-size:62.5%}body.sc-my-search{font-size:1.5rem}*.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{margin-bottom:12px;font-size:1.6rem;padding:19px;border-radius:27.35px;border:1px solid #dfdfdf;width:100%}.search.sc-my-search button.sc-my-search{position:absolute;border:none;background-color:transparent;right:-20px;top:0;width:50px;height:calc(100% - 12px);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer}";
 
 const MySearch = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -32,7 +32,7 @@ const MySearch = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "searchText": ["fetchColorsByNameHandle"]
   }; }
   static get style() { return mySearchCss; }
-}, [0, "my-search", {
+}, [2, "my-search", {
     "productId": [2, "product-id"],
     "isMobile": [4, "is-mobile"],
     "searchIcon": [1, "search-icon"],

package/dist/esm/{index-367ea408.js → index-faf4241e.js}

@@ -1,5 +1,6 @@
 const NAMESPACE = 'pallete';
 
+let scopeId;
 let isSvgMode = false;
 let queuePending = false;
 const win = typeof window !== 'undefined' ? window : {};
@@ -120,8 +121,23 @@ const addStyle = (styleContainerNode, cmpMeta, mode, hostElm) => {
 const attachStyles = (hostRef) => {
     const cmpMeta = hostRef.$cmpMeta$;
     const elm = hostRef.$hostElement$;
+    const flags = cmpMeta.$flags$;
     const endAttachStyles = createTime('attachStyles', cmpMeta.$tagName$);
-    addStyle(elm.getRootNode(), cmpMeta);
+    const scopeId = addStyle(elm.getRootNode(), cmpMeta);
+    if (flags & 10 /* needsScopedEncapsulation */) {
+        // only required when we're NOT using native shadow dom (slot)
+        // or this browser doesn't support native shadow dom
+        // and this host element was NOT created with SSR
+        // let's pick out the inner content for slot projection
+        // create a node to represent where the original
+        // content was first placed, which is useful later on
+        // DOM WRITE!!
+        elm['s-sc'] = scopeId;
+        elm.classList.add(scopeId + '-h');
+        if (flags & 2 /* scopedCssEncapsulation */) {
+            elm.classList.add(scopeId + '-s');
+        }
+    }
     endAttachStyles();
 };
 const getScopeId = (cmp, mode) => 'sc-' + (cmp.$tagName$);
@@ -133,6 +149,7 @@ const getScopeId = (cmp, mode) => 'sc-' + (cmp.$tagName$);
  * Don't add values to these!!
  */
 const EMPTY_OBJ = {};
+const isDef = (v) => v != null;
 const isComplexType = (o) => {
     // https://jsperf.com/typeof-fn-object/5
     o = typeof o;
@@ -420,6 +437,11 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
         {
             updateElement(null, newVNode, isSvgMode);
         }
+        if (isDef(scopeId) && elm['s-si'] !== scopeId) {
+            // if there is a scopeId and this is the initial render
+            // then let's add the scopeId as a css class
+            elm.classList.add((elm['s-si'] = scopeId));
+        }
         if (newVNode.$children$) {
             for (i = 0; i < newVNode.$children$.length; ++i) {
                 // create the node
@@ -604,6 +626,9 @@ const renderVdom = (hostRef, renderFnResults) => {
     rootVnode.$flags$ |= 4 /* isHost */;
     hostRef.$vnode$ = rootVnode;
     rootVnode.$elm$ = oldVNode.$elm$ = (hostElm);
+    {
+        scopeId = hostElm['s-sc'];
+    }
     // synchronous patch
     patch(oldVNode, rootVnode);
 };

package/dist/esm/loader.js

@@ -1,4 +1,4 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-367ea408.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-faf4241e.js';
 
 /*
  Stencil Client Patch Esm v2.17.0 | MIT Licensed | https://stenciljs.com
@@ -10,7 +10,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return bootstrapLazy([["my-backdrop_8",[[0,"my-component",{"shop":[1],"product":[1],"show":[32],"open":[64]},[[0,"close","closeModalHandler"]]],[0,"my-modal",{"shop":[1],"product":[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],"open":[64]},[[0,"closeInfoBox","closeInfoBoxHandler"],[9,"resize","handleResize"],[0,"searchColors","searchColorsHandler"]]],[0,"my-backdrop"],[0,"my-colorinfo",{"currentColor":[16],"shop":[1],"product":[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"]}],[0,"my-loader"],[0,"my-search",{"productId":[2,"product-id"],"isMobile":[4,"is-mobile"],"searchIcon":[1,"search-icon"],"searchText":[32]}],[0,"my-slider",{"slides":[16],"shop":[1],"product":[1],"color":[1]}]]]], options);
+  return bootstrapLazy([["my-backdrop_8",[[2,"my-component",{"shop":[1],"product":[1],"show":[32],"open":[64]},[[0,"close","closeModalHandler"]]],[0,"my-modal",{"shop":[1],"product":[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],"open":[64]},[[0,"closeInfoBox","closeInfoBoxHandler"],[9,"resize","handleResize"],[0,"searchColors","searchColorsHandler"]]],[0,"my-backdrop"],[0,"my-colorinfo",{"currentColor":[16],"shop":[1],"product":[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"]}],[0,"my-loader"],[2,"my-search",{"productId":[2,"product-id"],"isMobile":[4,"is-mobile"],"searchIcon":[1,"search-icon"],"searchText":[32]}],[0,"my-slider",{"slides":[16],"shop":[1],"product":[1],"color":[1]}]]]], options);
   });
 };
 

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, c as createEvent, g as getAssetPath, a as getElement } from './index-367ea408.js';
+import { r as registerInstance, h, c as createEvent, g as getAssetPath, a as getElement } from './index-faf4241e.js';
 
 const myBackdropCss = "html{font-size:62.5%}body{font-size:1.5rem}*{font-family:\"Galatea\", sans-serif}my-backdrop{width:100%;height:100%;background-color:rgba(0, 0, 0, 0.7);position:fixed;z-index:100;left:0;top:0}";
 
@@ -200,7 +200,7 @@ const Helmet = (_props, children, utils) => {
     return null;
 };
 
-const myComponentCss = "html{font-size:62.5%}body{font-size:1.5rem}*{font-family:\"Galatea\", sans-serif}.pallete-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:center}";
+const myComponentCss = ".pallete-wrapper.sc-my-component{display:flex;flex-direction:column;align-items:center;justify-content:center}";
 
 const MyModalBundle = class {
   constructor(hostRef) {
@@ -2627,7 +2627,7 @@ const MyModal = class {
 };
 MyModal.style = myModalCss;
 
-const mySearchCss = "html{font-size:62.5%}body{font-size:1.5rem}*{font-family:\"Galatea\", sans-serif}.search{position:relative;width:400px}@media (max-width: 768px){.search{width:100%}}.search input{margin-bottom:12px;font-size:1.6rem;padding:19px;border-radius:27.35px;border:1px solid #dfdfdf;width:100%}.search button{position:absolute;border:none;background-color:transparent;right:-20px;top:0;width:50px;height:calc(100% - 12px);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer}";
+const mySearchCss = "html.sc-my-search{font-size:62.5%}body.sc-my-search{font-size:1.5rem}*.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{margin-bottom:12px;font-size:1.6rem;padding:19px;border-radius:27.35px;border:1px solid #dfdfdf;width:100%}.search.sc-my-search button.sc-my-search{position:absolute;border:none;background-color:transparent;right:-20px;top:0;width:50px;height:calc(100% - 12px);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer}";
 
 const MySearch = class {
   constructor(hostRef) {

package/dist/esm/pallete.js

@@ -1,4 +1,4 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-367ea408.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-faf4241e.js';
 
 /*
  Stencil Client Patch Browser v2.17.0 | MIT Licensed | https://stenciljs.com
@@ -13,5 +13,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy([["my-backdrop_8",[[0,"my-component",{"shop":[1],"product":[1],"show":[32],"open":[64]},[[0,"close","closeModalHandler"]]],[0,"my-modal",{"shop":[1],"product":[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],"open":[64]},[[0,"closeInfoBox","closeInfoBoxHandler"],[9,"resize","handleResize"],[0,"searchColors","searchColorsHandler"]]],[0,"my-backdrop"],[0,"my-colorinfo",{"currentColor":[16],"shop":[1],"product":[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"]}],[0,"my-loader"],[0,"my-search",{"productId":[2,"product-id"],"isMobile":[4,"is-mobile"],"searchIcon":[1,"search-icon"],"searchText":[32]}],[0,"my-slider",{"slides":[16],"shop":[1],"product":[1],"color":[1]}]]]], options);
+  return bootstrapLazy([["my-backdrop_8",[[2,"my-component",{"shop":[1],"product":[1],"show":[32],"open":[64]},[[0,"close","closeModalHandler"]]],[0,"my-modal",{"shop":[1],"product":[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],"open":[64]},[[0,"closeInfoBox","closeInfoBoxHandler"],[9,"resize","handleResize"],[0,"searchColors","searchColorsHandler"]]],[0,"my-backdrop"],[0,"my-colorinfo",{"currentColor":[16],"shop":[1],"product":[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"]}],[0,"my-loader"],[2,"my-search",{"productId":[2,"product-id"],"isMobile":[4,"is-mobile"],"searchIcon":[1,"search-icon"],"searchText":[32]}],[0,"my-slider",{"slides":[16],"shop":[1],"product":[1],"color":[1]}]]]], options);
 });

package/dist/pallete/p-562ae52f.js

@@ -0,0 +1,2 @@
+let e,t=!1;const n="undefined"!=typeof window?window:{},l=n.document||{head:{}},s={t:0,l:"",jmp:e=>e(),raf:e=>requestAnimationFrame(e),ael:(e,t,n,l)=>e.addEventListener(t,n,l),rel:(e,t,n,l)=>e.removeEventListener(t,n,l),ce:(e,t)=>new CustomEvent(e,t)},o=e=>Promise.resolve(e),i=(()=>{try{return new CSSStyleSheet,"function"==typeof(new CSSStyleSheet).replace}catch(e){}return!1})(),r=(e,t,n)=>{n&&n.map((([n,l,o])=>{const i=u(e,n),r=c(t,o),f=a(n);s.ael(i,l,r,f),(t.o=t.o||[]).push((()=>s.rel(i,l,r,f)))}))},c=(e,t)=>n=>{try{256&e.t?e.i[t](n):(e.u=e.u||[]).push([t,n])}catch(e){X(e)}},u=(e,t)=>8&t?n:e,a=e=>0!=(2&e),f=new WeakMap,y=e=>"sc-"+e.h,h={},d=e=>"object"==(e=typeof e)||"function"===e,p=(e,t,...n)=>{let l=null,s=null,o=!1,i=!1;const r=[],c=t=>{for(let n=0;n<t.length;n++)l=t[n],Array.isArray(l)?c(l):null!=l&&"boolean"!=typeof l&&((o="function"!=typeof e&&!d(l))&&(l+=""),o&&i?r[r.length-1].p+=l:r.push(o?$(null,l):l),i=o)};if(c(n),t){t.key&&(s=t.key);{const e=t.className||t.class;e&&(t.class="object"!=typeof e?e:Object.keys(e).filter((t=>e[t])).join(" "))}}if("function"==typeof e)return e(null===t?{}:t,r,b);const u=$(e,null);return u.$=t,r.length>0&&(u.m=r),u.v=s,u},$=(e,t)=>({t:0,S:e,p:t,g:null,m:null,$:null,v:null}),m={},b={forEach:(e,t)=>e.map(w).forEach(t),map:(e,t)=>e.map(w).map(t).map(v)},w=e=>({vattrs:e.$,vchildren:e.m,vkey:e.v,vname:e.j,vtag:e.S,vtext:e.p}),v=e=>{if("function"==typeof e.vtag){const t=Object.assign({},e.vattrs);return e.vkey&&(t.key=e.vkey),e.vname&&(t.name=e.vname),p(e.vtag,t,...e.vchildren||[])}const t=$(e.vtag,e.vtext);return t.$=e.vattrs,t.m=e.vchildren,t.v=e.vkey,t.j=e.vname,t},S=(e,t,l,o,i,r)=>{if(l!==o){let c=Q(e,t),u=t.toLowerCase();if("class"===t){const t=e.classList,n=j(l),s=j(o);t.remove(...n.filter((e=>e&&!s.includes(e)))),t.add(...s.filter((e=>e&&!n.includes(e))))}else if("style"===t){for(const t in l)o&&null!=o[t]||(t.includes("-")?e.style.removeProperty(t):e.style[t]="");for(const t in o)l&&o[t]===l[t]||(t.includes("-")?e.style.setProperty(t,o[t]):e.style[t]=o[t])}else if("key"===t);else if(c||"o"!==t[0]||"n"!==t[1]){const n=d(o);if((c||n&&null!==o)&&!i)try{if(e.tagName.includes("-"))e[t]=o;else{const n=null==o?"":o;"list"===t?c=!1:null!=l&&e[t]==n||(e[t]=n)}}catch(e){}null==o||!1===o?!1===o&&""!==e.getAttribute(t)||e.removeAttribute(t):(!c||4&r||i)&&!n&&e.setAttribute(t,o=!0===o?"":o)}else t="-"===t[2]?t.slice(3):Q(n,u)?u.slice(2):u[2]+t.slice(3),l&&s.rel(e,t,l,!1),o&&s.ael(e,t,o,!1)}},g=/\s/,j=e=>e?e.split(g):[],k=(e,t,n,l)=>{const s=11===t.g.nodeType&&t.g.host?t.g.host:t.g,o=e&&e.$||h,i=t.$||h;for(l in o)l in i||S(s,l,o[l],void 0,n,t.t);for(l in i)S(s,l,o[l],i[l],n,t.t)},M=(t,n,s)=>{const o=n.m[s];let i,r,c=0;if(null!==o.p)i=o.g=l.createTextNode(o.p);else if(i=o.g=l.createElement(o.S),k(null,o,!1),null!=e&&i["s-si"]!==e&&i.classList.add(i["s-si"]=e),o.m)for(c=0;c<o.m.length;++c)r=M(t,o,c),r&&i.appendChild(r);return i},O=(e,t,n,l,s,o)=>{let i,r=e;for(;s<=o;++s)l[s]&&(i=M(null,n,s),i&&(l[s].g=i,r.insertBefore(i,t)))},C=(e,t,n,l)=>{for(;t<=n;++t)(l=e[t])&&l.g.remove()},L=(e,t)=>e.S===t.S&&e.v===t.v,P=(e,t)=>{const n=t.g=e.g,l=e.m,s=t.m,o=t.p;null===o?(k(e,t,!1),null!==l&&null!==s?((e,t,n,l)=>{let s,o,i=0,r=0,c=0,u=0,a=t.length-1,f=t[0],y=t[a],h=l.length-1,d=l[0],p=l[h];for(;i<=a&&r<=h;)if(null==f)f=t[++i];else if(null==y)y=t[--a];else if(null==d)d=l[++r];else if(null==p)p=l[--h];else if(L(f,d))P(f,d),f=t[++i],d=l[++r];else if(L(y,p))P(y,p),y=t[--a],p=l[--h];else if(L(f,p))P(f,p),e.insertBefore(f.g,y.g.nextSibling),f=t[++i],p=l[--h];else if(L(y,d))P(y,d),e.insertBefore(y.g,f.g),y=t[--a],d=l[++r];else{for(c=-1,u=i;u<=a;++u)if(t[u]&&null!==t[u].v&&t[u].v===d.v){c=u;break}c>=0?(o=t[c],o.S!==d.S?s=M(t&&t[r],n,c):(P(o,d),t[c]=void 0,s=o.g),d=l[++r]):(s=M(t&&t[r],n,r),d=l[++r]),s&&f.g.parentNode.insertBefore(s,f.g)}i>a?O(e,null==l[h+1]?null:l[h+1].g,n,l,r,h):r>h&&C(t,i,a)})(n,l,t,s):null!==s?(null!==e.p&&(n.textContent=""),O(n,null,t,s,0,s.length-1)):null!==l&&C(l,0,l.length-1)):e.p!==o&&(n.data=o)},x=e=>I(e).k,E=(e,t,n)=>{const l=x(e);return{emit:e=>R(l,t,{bubbles:!!(4&n),composed:!!(2&n),cancelable:!!(1&n),detail:e})}},R=(e,t,n)=>{const l=s.ce(t,n);return e.dispatchEvent(l),l},W=(e,t)=>{t&&!e.M&&t["s-p"]&&t["s-p"].push(new Promise((t=>e.M=t)))},N=(e,t)=>{if(e.t|=16,!(4&e.t))return W(e,e.O),re((()=>T(e,t)));e.t|=512},T=(e,t)=>{const n=e.i;let l;return t&&(e.t|=256,e.u&&(e.u.map((([e,t])=>D(n,e,t))),e.u=null),l=D(n,"componentWillLoad")),l=H(l,(()=>D(n,"componentWillRender"))),H(l,(()=>U(e,n,t)))},U=async(e,t,n)=>{const s=e.k,o=s["s-rc"];n&&(e=>{const t=e.C,n=e.k,s=t.t,o=((e,t)=>{let n=y(t);const s=ee.get(n);if(e=11===e.nodeType?e:l,s)if("string"==typeof s){let t,o=f.get(e=e.head||e);o||f.set(e,o=new Set),o.has(n)||(t=l.createElement("style"),t.innerHTML=s,e.insertBefore(t,e.querySelector("link")),o&&o.add(n))}else e.adoptedStyleSheets.includes(s)||(e.adoptedStyleSheets=[...e.adoptedStyleSheets,s]);return n})(n.getRootNode(),t);10&s&&(n["s-sc"]=o,n.classList.add(o+"-h"),2&s&&n.classList.add(o+"-s"))})(e);A(e,t),o&&(o.map((e=>e())),s["s-rc"]=void 0);{const t=s["s-p"],n=()=>F(e);0===t.length?n():(Promise.all(t).then(n),e.t|=4,t.length=0)}},A=(t,n)=>{try{n=n.render(),t.t&=-17,t.t|=2,((t,n)=>{const l=t.k,s=t.L||$(null,null),o=(e=>e&&e.S===m)(n)?n:p(null,null,n);o.S=null,o.t|=4,t.L=o,o.g=s.g=l,e=l["s-sc"],P(s,o)})(t,n)}catch(e){X(e,t.k)}return null},F=e=>{const t=e.k,n=e.i,l=e.O;64&e.t||(e.t|=64,V(t),D(n,"componentDidLoad"),e.P(t),l||q()),e.R(t),e.M&&(e.M(),e.M=void 0),512&e.t&&ie((()=>N(e,!1))),e.t&=-517},q=()=>{V(l.documentElement),ie((()=>R(n,"appload",{detail:{namespace:"pallete"}})))},D=(e,t,n)=>{if(e&&e[t])try{return e[t](n)}catch(e){X(e)}},H=(e,t)=>e&&e.then?e.then(t):t(),V=e=>e.classList.add("hydrated"),_=(e,t,n)=>{if(t.W){e.watchers&&(t.N=e.watchers);const l=Object.entries(t.W),o=e.prototype;if(l.map((([e,[l]])=>{31&l||2&n&&32&l?Object.defineProperty(o,e,{get(){return((e,t)=>I(this).T.get(t))(0,e)},set(n){((e,t,n,l)=>{const s=I(e),o=s.k,i=s.T.get(t),r=s.t,c=s.i;if(n=((e,t)=>null==e||d(e)?e:4&t?"false"!==e&&(""===e||!!e):2&t?parseFloat(e):1&t?e+"":e)(n,l.W[t][0]),(!(8&r)||void 0===i)&&n!==i&&(!Number.isNaN(i)||!Number.isNaN(n))&&(s.T.set(t,n),c)){if(l.N&&128&r){const e=l.N[t];e&&e.map((e=>{try{c[e](n,i,t)}catch(e){X(e,o)}}))}2==(18&r)&&N(s,!1)}})(this,e,n,t)},configurable:!0,enumerable:!0}):1&n&&64&l&&Object.defineProperty(o,e,{value(...t){const n=I(this);return n.U.then((()=>n.i[e](...t)))}})})),1&n){const t=new Map;o.attributeChangedCallback=function(e,n,l){s.jmp((()=>{const n=t.get(e);if(this.hasOwnProperty(n))l=this[n],delete this[n];else if(o.hasOwnProperty(n)&&"number"==typeof this[n]&&this[n]==l)return;this[n]=(null!==l||"boolean"!=typeof this[n])&&l}))},e.observedAttributes=l.filter((([e,t])=>15&t[0])).map((([e,n])=>{const l=n[1]||e;return t.set(l,e),l}))}}return e},z=(e,t={})=>{const o=[],c=t.exclude||[],u=n.customElements,a=l.head,f=a.querySelector("meta[charset]"),h=l.createElement("style"),d=[];let p,$=!0;Object.assign(s,t),s.l=new URL(t.resourcesUrl||"./",l.baseURI).href,e.map((e=>{e[1].map((t=>{const n={t:t[0],h:t[1],W:t[2],A:t[3]};n.W=t[2],n.A=t[3],n.N={};const l=n.h,a=class extends HTMLElement{constructor(e){super(e),K(e=this,n)}connectedCallback(){p&&(clearTimeout(p),p=null),$?d.push(this):s.jmp((()=>(e=>{if(0==(1&s.t)){const t=I(e),n=t.C,l=()=>{};if(1&t.t)r(e,t,n.A);else{t.t|=1;{let n=e;for(;n=n.parentNode||n.host;)if(n["s-p"]){W(t,t.O=n);break}}n.W&&Object.entries(n.W).map((([t,[n]])=>{if(31&n&&e.hasOwnProperty(t)){const n=e[t];delete e[t],e[t]=n}})),(async(e,t,n,l,s)=>{if(0==(32&t.t)){{if(t.t|=32,(s=Z(n)).then){const e=()=>{};s=await s,e()}s.isProxied||(n.N=s.watchers,_(s,n,2),s.isProxied=!0);const e=()=>{};t.t|=8;try{new s(t)}catch(e){X(e)}t.t&=-9,t.t|=128,e()}if(s.style){let e=s.style;const t=y(n);if(!ee.has(t)){const l=()=>{};((e,t,n)=>{let l=ee.get(e);i&&n?(l=l||new CSSStyleSheet,l.replace(t)):l=t,ee.set(e,l)})(t,e,!!(1&n.t)),l()}}}const o=t.O,r=()=>N(t,!0);o&&o["s-rc"]?o["s-rc"].push(r):r()})(0,t,n)}l()}})(this)))}disconnectedCallback(){s.jmp((()=>(()=>{if(0==(1&s.t)){const e=I(this);e.o&&(e.o.map((e=>e())),e.o=void 0)}})()))}componentOnReady(){return I(this).F}};n.q=e[0],c.includes(l)||u.get(l)||(o.push(l),u.define(l,_(a,n,1)))}))})),h.innerHTML=o+"{visibility:hidden}.hydrated{visibility:inherit}",h.setAttribute("data-styles",""),a.insertBefore(h,f?f.nextSibling:a.firstChild),$=!1,d.length?d.map((e=>e.connectedCallback())):s.jmp((()=>p=setTimeout(q,30)))},B=e=>{const t=new URL(e,s.l);return t.origin!==n.location.origin?t.href:t.pathname},G=new WeakMap,I=e=>G.get(e),J=(e,t)=>G.set(t.i=e,t),K=(e,t)=>{const n={t:0,k:e,C:t,T:new Map};return n.U=new Promise((e=>n.R=e)),n.F=new Promise((e=>n.P=e)),e["s-p"]=[],e["s-rc"]=[],r(e,n,t.A),G.set(e,n)},Q=(e,t)=>t in e,X=(e,t)=>(0,console.error)(e,t),Y=new Map,Z=e=>{const t=e.h.replace(/-/g,"_"),n=e.q,l=Y.get(n);return l?l[t]:import(`./${n}.entry.js`).then((e=>(Y.set(n,e),e[t])),X)
+/*!__STENCIL_STATIC_IMPORT_SWITCH__*/},ee=new Map,te=[],ne=[],le=(e,n)=>l=>{e.push(l),t||(t=!0,n&&4&s.t?ie(oe):s.raf(oe))},se=e=>{for(let t=0;t<e.length;t++)try{e[t](performance.now())}catch(e){X(e)}e.length=0},oe=()=>{se(te),se(ne),(t=te.length>0)&&s.raf(oe)},ie=e=>o().then(e),re=le(ne,!0);export{x as a,z as b,E as c,B as g,p as h,o as p,J as r}