@ppg_pl/pallete 0.0.3 → 0.0.4

package/dist/pallete/index.esm.js

@@ -0,0 +1 @@
+

package/dist/pallete/my-backdrop.entry.js

@@ -0,0 +1,15 @@
+import { r as registerInstance } from './index-1ac7471e.js';
+
+const myBackdropCss = ".pallete-wrapper *{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}";
+
+const MyBackdrop = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return null;
+  }
+};
+MyBackdrop.style = myBackdropCss;
+
+export { MyBackdrop as my_backdrop };

package/dist/pallete/my-colorbox.entry.js

@@ -0,0 +1,40 @@
+import { r as registerInstance, h } from './index-1ac7471e.js';
+import { s as setDataLayer } from './gtmUtils-dcdac4ce.js';
+
+const myColorboxCss = ".pallete-wrapper *{font-family:\"Galatea\", sans-serif}.my-color-box{width:125px;height:125px;display:block;margin-bottom:5px;cursor:pointer;display:flex;flex-direction:column;justify-content:flex-end;position:relative}@media (max-width: 1024px){.my-color-box{width:80px;height:80px}}.my-color-box .color-name{width:100%;background-color:#fff;padding:15px 0px 10px;border-top-left-radius:15px;border-top-right-radius:15px;opacity:0;transition:0.3s opacity ease-in-out;font-size:10px;color:#232323;text-transform:lowercase}.my-color-box.active .color-name{opacity:1}.my-color-box.categoryactive{width:120px;height:115px}.my-color-box.categoryactive .color-name{opacity:1}@media (max-width: 1024px){.my-color-box.categoryactive{width:72px;height:72px}}.my-color-box:hover .color-name{opacity:1}";
+
+const MyColorBox = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.colorCheck = () => {
+      this.checkTimeout = setTimeout(() => {
+        setDataLayer({
+          event: 'ColorCheck',
+          shop: this.shop,
+          product: this.product,
+          color: this.name,
+        });
+      }, 2000);
+    };
+    this.colorUnCheck = () => {
+      if (this.checkTimeout)
+        clearTimeout(this.checkTimeout);
+      this.checkTimeout = undefined;
+    };
+    this.darkenColor = (color) => {
+      const red = parseInt(color[1] + color[2], 16) - 20;
+      const green = parseInt(color[3] + color[4], 16) - 20;
+      const blue = parseInt(color[5] + color[6], 16) - 20;
+      return `rgb(${red},${green},${blue})`;
+    };
+  }
+  render() {
+    return (h("div", { onMouseEnter: () => this.colorCheck(), onMouseLeave: () => this.colorUnCheck(), class: `my-color-box ${this.isActive ? 'active' : ''} ${this.isCategoryActive ? 'categoryactive' : ''}`, style: {
+        background: this.color,
+        border: this.isCategoryActive ? `5px solid ${this.darkenColor(this.color)}` : '',
+      } }, h("div", { class: "color-name" }, this.name)));
+  }
+};
+MyColorBox.style = myColorboxCss;
+
+export { MyColorBox as my_colorbox };

package/dist/{components/my-colorinfo2.js → pallete/my-colorinfo.entry.js}

@@ -1,11 +1,9 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, getAssetPath } from '@stencil/core/internal/client';
-import { s as setDataLayer } from './gtmUtils.js';
-import { d as defineCustomElement$1 } from './index2.js';
+import { r as registerInstance, e as createEvent, h, f as getAssetPath } from './index-1ac7471e.js';
+import { s as setDataLayer } from './gtmUtils-dcdac4ce.js';
 
-const MyColorInfo = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
+const MyColorInfo = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
     this.closeInfoBox = createEvent(this, "closeInfoBox", 7);
     this.data = null;
     this.isMobile = false;
@@ -33,32 +31,6 @@ const MyColorInfo = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         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" }), !this.isMobile && h("h2", null, this.currentColor.name), !this.isMobile && h("h4", null, this.currentColor.number), !this.isMobile && h("div", { class: "divider" }), h("div", { class: "boxes__box-content__info__value" }, h("div", { class: "boxes__box-content__info__value-image" }, ((_a = this.currentColor) === null || _a === void 0 ? void 0 : _a.image.data) && h("img", { src: `${(_e = (_d = (_c = (_b = this.currentColor) === null || _b === void 0 ? void 0 : _b.image) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d.attributes) === null || _e === void 0 ? void 0 : _e.formats.thumbnail.url}`, alt: "color-image" })), h("div", { class: "boxes__box-content__info__value-product" }, h("div", null, !this.isMobile && h("p", null, "Produkt:"), this.isMobile && h("h2", null, this.currentColor.name), " ", h("p", null, this.product)), this.isMobile && h("div", { class: 'divider' }), this.currentColor && this.currentColor.links.find((link) => { var _a, _b, _c; return ((_c = (_b = (_a = link === null || link === void 0 ? void 0 : link.shop) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.attributes) === null || _c === void 0 ? void 0 : _c.name) === this.shop; }) && (h("a", { onClick: this.goToProduct, class: `${this.currentColor.buttonInverse ? 'inverse' : ''}`, target: "_blank", href: (_f = this === null || this === void 0 ? void 0 : this.currentColor.links.find((link) => { var _a, _b, _c; return ((_c = (_b = (_a = link === null || link === void 0 ? void 0 : link.shop) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.attributes) === null || _c === void 0 ? void 0 : _c.name) === this.shop; })) === null || _f === void 0 ? void 0 : _f.path }, "przejd\u017A do produktu"))))), h("div", { class: "boxes__box-content__slider" }, h("my-slider", { color: this.currentColor.name, shop: this.shop, product: this.product, slides: (_g = this.data) === null || _g === void 0 ? void 0 : _g.images.data }), ' ')));
   }
-}, [0, "my-colorinfo", {
-    "currentColor": [16],
-    "shop": [1],
-    "product": [1],
-    "data": [16],
-    "isMobile": [4, "is-mobile"],
-    "infoBoxWidth": [2, "info-box-width"],
-    "closeImage": [1, "close-image"]
-  }]);
-function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["my-colorinfo", "my-slider"];
-  components.forEach(tagName => { switch (tagName) {
-    case "my-colorinfo":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, MyColorInfo);
-      }
-      break;
-    case "my-slider":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$1();
-      }
-      break;
-  } });
-}
+};
 
-export { MyColorInfo as M, defineCustomElement as d };
+export { MyColorInfo as my_colorinfo };

package/dist/{components/my-component.js → pallete/my-component.entry.js}

@@ -1,11 +1,4 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { d as defineCustomElement$8 } from './my-backdrop2.js';
-import { d as defineCustomElement$7 } from './my-colorbox2.js';
-import { d as defineCustomElement$6 } from './my-colorinfo2.js';
-import { d as defineCustomElement$5 } from './my-loader2.js';
-import { d as defineCustomElement$4 } from './my-modal2.js';
-import { d as defineCustomElement$3 } from './my-search2.js';
-import { d as defineCustomElement$2 } from './index2.js';
+import { r as registerInstance, h, g as getElement } from './index-1ac7471e.js';
 
 const isObject = (val) => !Array.isArray(val) && val !== null && typeof val === 'object';
 const hasAttributes = ({ vattrs }, requiredAttrs = []) => isObject(vattrs) && requiredAttrs.every(vattrs.hasOwnProperty.bind(vattrs));
@@ -111,8 +104,10 @@ const Helmet = (_props, children, utils) => {
         return null;
     }
     const rendered = [];
+    const validChildren = [];
     utils.forEach(children, (n) => {
         if (isValidNode(n)) {
+            validChildren.push(n);
             rendered.push(renderNode(n, utils));
         }
     });
@@ -125,10 +120,9 @@ const Helmet = (_props, children, utils) => {
 
 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() {
-    super();
-    this.__registerHost();
+const MyModalBundle = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
     this.show = false;
   }
   async open() {
@@ -153,64 +147,8 @@ const MyModalBundle = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         f.parentNode.insertBefore(j, f);
       })(window, document, 'script', 'dataLayer', 'GTM-PMTKHDX');`)), h("div", { class: "pallete-wrapper" }, content), h("noscript", null, h("iframe", { src: "https://www.googletagmanager.com/ns.html?id=GTM-PMTKHDX", height: "0", width: "0", style: { display: 'none', visibility: 'hidden' } }))));
   }
-  get modalEl() { return this; }
-  static get style() { return myComponentCss; }
-}, [2, "my-component", {
-    "shop": [1],
-    "product": [1],
-    "show": [32],
-    "open": [64]
-  }, [[0, "close", "closeModalHandler"]]]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["my-component", "my-backdrop", "my-colorbox", "my-colorinfo", "my-loader", "my-modal", "my-search", "my-slider"];
-  components.forEach(tagName => { switch (tagName) {
-    case "my-component":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, MyModalBundle);
-      }
-      break;
-    case "my-backdrop":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$8();
-      }
-      break;
-    case "my-colorbox":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$7();
-      }
-      break;
-    case "my-colorinfo":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$6();
-      }
-      break;
-    case "my-loader":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$5();
-      }
-      break;
-    case "my-modal":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "my-search":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "my-slider":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
-
-const MyComponent = MyModalBundle;
-const defineCustomElement = defineCustomElement$1;
+  get modalEl() { return getElement(this); }
+};
+MyModalBundle.style = myComponentCss;
 
-export { MyComponent, defineCustomElement };
+export { MyModalBundle as my_component };

package/dist/pallete/my-loader.entry.js

@@ -0,0 +1,15 @@
+import { r as registerInstance, h } from './index-1ac7471e.js';
+
+const myLoaderCss = ".container.sc-my-loader{display:flex;justify-content:center;align-items:center;height:100px;overflow:hidden}.item.sc-my-loader{width:20px;height:20px;margin:3px;list-style-type:none;transition:0.5s all ease}.item.sc-my-loader:nth-child(1){animation:right-1 1s infinite alternate;background-color:#b8cf40;animation-delay:20ms}@keyframes right-1{0%{transform:translateY(-18px)}100%{transform:translateY(18px)}}.item.sc-my-loader:nth-child(2){animation:right-2 1s infinite alternate;background-color:#ee4b5e;animation-delay:40ms}@keyframes right-2{0%{transform:translateY(-21px)}100%{transform:translateY(21px)}}.item.sc-my-loader:nth-child(3){animation:right-3 1s infinite alternate;background-color:#ea0f47;animation-delay:60ms}@keyframes right-3{0%{transform:translateY(-24px)}100%{transform:translateY(24px)}}.item.sc-my-loader:nth-child(4){animation:right-4 1s infinite alternate;background-color:#d42840;animation-delay:80ms}@keyframes right-4{0%{transform:translateY(-27px)}100%{transform:translateY(27px)}}.item.sc-my-loader:nth-child(5){animation:right-5 1s infinite alternate;background-color:#8b2850;animation-delay:100ms}@keyframes right-5{0%{transform:translateY(-30px)}100%{transform:translateY(30px)}}";
+
+const MyLoader = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return (h("div", { class: "container" }, h("div", { class: "item" }), h("div", { class: "item" }), h("div", { class: "item" }), h("div", { class: "item" }), h("div", { class: "item" })));
+  }
+};
+MyLoader.style = myLoaderCss;
+
+export { MyLoader as my_loader };

package/dist/{components/my-modal2.js → pallete/my-modal.entry.js}

@@ -1,10 +1,5 @@
-import { proxyCustomElement, HTMLElement as HTMLElement$1, createEvent, h, getAssetPath } from '@stencil/core/internal/client';
-import { s as setDataLayer } from './gtmUtils.js';
-import { d as defineCustomElement$5 } from './my-colorbox2.js';
-import { d as defineCustomElement$4 } from './my-colorinfo2.js';
-import { d as defineCustomElement$3 } from './my-loader2.js';
-import { d as defineCustomElement$2 } from './my-search2.js';
-import { d as defineCustomElement$1 } from './index2.js';
+import { r as registerInstance, e as createEvent, h, f as getAssetPath, g as getElement } from './index-1ac7471e.js';
+import { s as setDataLayer } from './gtmUtils-dcdac4ce.js';
 
 const APIURL = 'https://pallete-colors-backend.herokuapp.com';
 class API {
@@ -26,6 +21,8 @@ class API {
 }
 const ApiService = new API();
 
+'use strict';
+
 /* eslint complexity: [2, 18], max-statements: [2, 33] */
 var shams = function hasSymbols() {
 	if (typeof Symbol !== 'function' || typeof Object.getOwnPropertySymbols !== 'function') { return false; }
@@ -67,6 +64,8 @@ var shams = function hasSymbols() {
 	return true;
 };
 
+'use strict';
+
 var origSymbol = typeof Symbol !== 'undefined' && Symbol;
 
 
@@ -79,6 +78,8 @@ var hasSymbols$1 = function hasNativeSymbols() {
 	return shams();
 };
 
+'use strict';
+
 /* eslint no-invalid-this: 1 */
 
 var ERROR_MESSAGE = 'Function.prototype.bind called on incompatible ';
@@ -130,10 +131,20 @@ var implementation = function bind(that) {
     return bound;
 };
 
+'use strict';
+
+
+
 var functionBind = Function.prototype.bind || implementation;
 
+'use strict';
+
+
+
 var src = functionBind.call(Function.call, Object.prototype.hasOwnProperty);
 
+'use strict';
+
 var undefined$1;
 
 var $SyntaxError = SyntaxError;
@@ -148,6 +159,13 @@ var getEvalledConstructor = function (expressionSyntax) {
 };
 
 var $gOPD = Object.getOwnPropertyDescriptor;
+if ($gOPD) {
+	try {
+		$gOPD({}, '');
+	} catch (e) {
+		$gOPD = null; // this is IE 8, which has a broken gOPD
+	}
+}
 
 var throwTypeError = function () {
 	throw new $TypeError$1();
@@ -155,6 +173,8 @@ var throwTypeError = function () {
 var ThrowTypeError = $gOPD
 	? (function () {
 		try {
+			// eslint-disable-next-line no-unused-expressions, no-caller, no-restricted-properties
+			arguments.callee; // IE 8 does not throw here
 			return throwTypeError;
 		} catch (calleeThrows) {
 			try {
@@ -458,16 +478,30 @@ var getIntrinsic = function GetIntrinsic(name, allowMissing) {
 	return value;
 };
 
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
 function createCommonjsModule(fn, basedir, module) {
 	return module = {
 		path: basedir,
 		exports: {},
 		require: function (path, base) {
-			return commonjsRequire();
+			return commonjsRequire(path, (base === undefined || base === null) ? module.path : base);
 		}
 	}, fn(module, module.exports), module.exports;
 }
 
+function getDefaultExportFromNamespaceIfPresent (n) {
+	return n && Object.prototype.hasOwnProperty.call(n, 'default') ? n['default'] : n;
+}
+
+function getDefaultExportFromNamespaceIfNotNamed (n) {
+	return n && Object.prototype.hasOwnProperty.call(n, 'default') && Object.keys(n).length === 1 ? n['default'] : n;
+}
+
 function getAugmentedNamespace(n) {
 	if (n.__esModule) return n;
 	var a = Object.defineProperty({}, '__esModule', {value: true});
@@ -488,6 +522,7 @@ function commonjsRequire () {
 }
 
 var callBind = createCommonjsModule(function (module) {
+'use strict';
 
 
 
@@ -536,6 +571,12 @@ if ($defineProperty) {
 }
 });
 
+'use strict';
+
+
+
+
+
 var $indexOf = callBind(getIntrinsic('String.prototype.indexOf'));
 
 var callBound = function callBoundIntrinsic(name, allowMissing) {
@@ -1068,6 +1109,12 @@ function arrObjKeys(obj, inspect) {
     return xs;
 }
 
+'use strict';
+
+
+
+
+
 var $TypeError = getIntrinsic('%TypeError%');
 var $WeakMap = getIntrinsic('%WeakMap%', true);
 var $Map = getIntrinsic('%Map%', true);
@@ -1187,6 +1234,8 @@ var sideChannel = function getSideChannel() {
 	return channel;
 };
 
+'use strict';
+
 var replace = String.prototype.replace;
 var percentTwenties = /%20/g;
 
@@ -1209,6 +1258,10 @@ var formats = {
     RFC3986: Format.RFC3986
 };
 
+'use strict';
+
+
+
 var has$2 = Object.prototype.hasOwnProperty;
 var isArray$2 = Array.isArray;
 
@@ -1458,6 +1511,11 @@ var utils = {
     merge: merge
 };
 
+'use strict';
+
+
+
+
 var has$1 = Object.prototype.hasOwnProperty;
 
 var arrayPrefixGenerators = {
@@ -1780,6 +1838,10 @@ var stringify_1 = function (object, opts) {
     return joined.length > 0 ? prefix + joined : '';
 };
 
+'use strict';
+
+
+
 var has = Object.prototype.hasOwnProperty;
 var isArray = Array.isArray;
 
@@ -2040,6 +2102,12 @@ var parse = function (str, opts) {
     return utils.compact(obj);
 };
 
+'use strict';
+
+
+
+
+
 var lib = {
     formats: formats,
     parse: parse,
@@ -2127,12 +2195,11 @@ const fetchColorByNumber = (productId, colorNumber) => lib.stringify({
   encodeValuesOnly: true, // prettify url
 });
 
-const myModalCss = "*{font-family:\"Galatea\", sans-serif}.my-modal{box-shadow:1px 1px 1px #ccc;background-color:#fff;position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);max-width:1555px;width:90%;z-index:1000;text-align:center;padding:35px 40px;max-height:calc(100vh - 100px);overflow-y:auto}@media (max-width: 1024px){.my-modal{padding:80px 20px 20px}}.my-modal::-webkit-scrollbar{display:none}.my-modal .loader{display:flex;flex-direction:column;align-items:center;justify-content:center;height:300px}.my-modal>img{width:300px;object-fit:cover}@media (max-width: 768px){.my-modal>img{width:200px}}.my-modal__close{position:absolute;right:20px;top:20px;background:transparent;border:none}.my-modal__close>img{width:45px;height:45px;object-fit:cover;cursor:pointer}@media (max-width: 1024px){.my-modal__close{top:65px}}.my-modal__see-more{font-size:22px;margin-bottom:27px;display:flex;justify-content:center;align-items:center}@media (max-width: 1024px){.my-modal__see-more{font-size:18px}}.my-modal__see-more img{width:45px;height:45px}@media (max-width: 1024px){.my-modal__see-more img{display:none}}.my-modal__wrapper{display:flex;flex-direction:column;position:relative}.my-modal__wrapper .boxes{display:flex;flex-direction:column;flex-wrap:wrap}.my-modal__wrapper .boxes__list{display:flex;flex-wrap:wrap;gap:5px 5px}.my-modal__wrapper .boxes__box-content{width:100%;margin-bottom:5px;height:500px;text-align:left;display:flex;flex-direction:row;justify-content:space-between;position:relative}.my-modal__wrapper .boxes__box-content .closebtn{position:absolute;right:10px;top:10px;width:53px;height:53px;cursor:pointer;object-fit:cover;z-index:9999}@media (max-width: 1024px){.my-modal__wrapper .boxes__box-content{flex-direction:column-reverse;height:350px}}.my-modal__wrapper .boxes__box-content__info{width:40%;padding:50px 40px;position:relative}@media (max-width: 1024px){.my-modal__wrapper .boxes__box-content__info{width:100%;padding:15px;min-height:100px}}.my-modal__wrapper .boxes__box-content__info h2{font-size:35px;font-weight:normal;text-transform:capitalize;margin-bottom:7px;color:#232323}.my-modal__wrapper .boxes__box-content__info h4{margin-top:0px;margin-bottom:15px;font-size:16px;color:#4c4c4c}.my-modal__wrapper .boxes__box-content__info .divider{border:1px solid #4c4c4c;opacity:0.2;margin-bottom:20px}.my-modal__wrapper .boxes__box-content__info__value{display:flex;flex-direction:row;justify-content:flex-start}@media (max-width: 1024px){.my-modal__wrapper .boxes__box-content__info__value{justify-content:flex-start}}.my-modal__wrapper .boxes__box-content__info__value-image img{width:114px;object-fit:cover}@media (max-width: 1024px){.my-modal__wrapper .boxes__box-content__info__value-image img{width:75px}}.my-modal__wrapper .boxes__box-content__info__value-product{color:#232323;margin-left:10px}@media (max-width: 1024px){.my-modal__wrapper .boxes__box-content__info__value-product h2{font-size:26px;margin:0;margin-right:10px}}@media (max-width: 768px){.my-modal__wrapper .boxes__box-content__info__value-product h2{font-size:16px}}.my-modal__wrapper .boxes__box-content__info__value-product p{font-size:20px;margin-top:0px;margin-bottom:0px}.my-modal__wrapper .boxes__box-content__info__value-product p:last-of-type{margin-bottom:20px}@media (max-width: 1024px){.my-modal__wrapper .boxes__box-content__info__value-product p:last-of-type{margin-bottom:0}}@media (max-width: 768px){.my-modal__wrapper .boxes__box-content__info__value-product p{font-size:10px}}.my-modal__wrapper .boxes__box-content__info__value-product a{background-color:#fff;font-size:16px;box-shadow:0 10px 20px 0 rgba(0, 0, 0, 0.1);border-radius:22.5px;padding:15px 30px;color:#232323;text-decoration:none;display:block;text-align:center;transition:all 0.7s ease-in-out}@media (max-width: 1024px){.my-modal__wrapper .boxes__box-content__info__value-product a{max-width:150px;font-size:13px;padding:12px 25px}}.my-modal__wrapper .boxes__box-content__info__value-product a:hover{color:#fff;background-color:#232323}.my-modal__wrapper .boxes__box-content__info__value-product a.inverse{background-color:#232323;color:#fff}.my-modal__wrapper .boxes__box-content__info__value-product a.inverse:hover{color:#232323;background-color:#fff}@media (max-width: 1024px){.my-modal__wrapper .boxes__box-content__info__value-product>div{display:flex;justify-content:flex-start;align-items:center}}.my-modal__wrapper .boxes__box-content__slider{width:60%;position:relative}@media (max-width: 1024px){.my-modal__wrapper .boxes__box-content__slider{width:100%;display:block}}.my-modal__wrapper .boxes__box-content__white *{color:#fff}.my-modal__wrapper .boxes__box-content__white h2{color:#fff}.my-modal__wrapper .pagination{margin:10px 0px;font-size:16px;display:flex;flex-direction:row;align-items:center;justify-content:center}.my-modal__wrapper .pagination>span{margin:0 3px;cursor:pointer;min-width:20px;padding:5px;box-shadow:1px 1px 1px #ccc}.my-modal__wrapper .pagination .current{background-color:wheat}.my-modal .categories{padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid #dfdfdf;display:flex;flex-direction:column;align-items:flex-start}.my-modal .categories__container{display:flex;flex-wrap:nowrap;gap:5px 5px;overflow-x:auto;width:100%}@media (max-width: 1024px){.my-modal .categories__container{padding-bottom:5px}}.my-modal .categories__slide-information{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.my-modal .categories__slide-information span{color:#4c4c4c;font-size:16px;font-weight:normal}.my-modal .categories__slide-information span:first-of-type{margin-left:7px}.my-modal .categories__slide-information span:last-of-type{margin-right:7px}";
+const myModalCss = ".pallete-wrapper *{font-family:\"Galatea\", sans-serif}.my-modal{box-shadow:1px 1px 1px #ccc;background-color:#fff;position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);max-width:1555px;width:90%;z-index:1000;text-align:center;padding:35px 40px;max-height:calc(100vh - 100px);overflow-y:auto}@media (max-width: 1024px){.my-modal{padding:80px 20px 20px}}.my-modal::-webkit-scrollbar{display:none}.my-modal .loader{display:flex;flex-direction:column;align-items:center;justify-content:center;height:300px}.my-modal>img{width:300px;object-fit:cover}@media (max-width: 768px){.my-modal>img{width:200px}}.my-modal__close{position:absolute;right:20px;top:20px;background:transparent;border:none}.my-modal__close>img{width:45px;height:45px;object-fit:cover;cursor:pointer}@media (max-width: 1024px){.my-modal__close{top:65px}}.my-modal__see-more{font-size:22px;margin-bottom:27px;display:flex;justify-content:center;align-items:center}@media (max-width: 1024px){.my-modal__see-more{font-size:18px}}.my-modal__see-more img{width:45px;height:45px}@media (max-width: 1024px){.my-modal__see-more img{display:none}}.my-modal__wrapper{display:flex;flex-direction:column;position:relative}.my-modal__wrapper .boxes{display:flex;flex-direction:column;flex-wrap:wrap}.my-modal__wrapper .boxes__list{display:flex;flex-wrap:wrap;gap:5px 5px}.my-modal__wrapper .boxes__box-content{width:100%;margin-bottom:5px;height:500px;text-align:left;display:flex;flex-direction:row;justify-content:space-between;position:relative}.my-modal__wrapper .boxes__box-content .closebtn{position:absolute;right:10px;top:10px;width:53px;height:53px;cursor:pointer;object-fit:cover;z-index:9999}@media (max-width: 1024px){.my-modal__wrapper .boxes__box-content{flex-direction:column-reverse;height:350px}}.my-modal__wrapper .boxes__box-content__info{width:40%;padding:50px 40px;position:relative}@media (max-width: 1024px){.my-modal__wrapper .boxes__box-content__info{width:100%;padding:15px;min-height:100px}}.my-modal__wrapper .boxes__box-content__info h2{font-size:35px;font-weight:normal;text-transform:capitalize;margin-bottom:7px;color:#232323}.my-modal__wrapper .boxes__box-content__info h4{margin-top:0px;margin-bottom:15px;font-size:16px;color:#4c4c4c}.my-modal__wrapper .boxes__box-content__info .divider{border:1px solid #4c4c4c;opacity:0.2;margin-bottom:20px}.my-modal__wrapper .boxes__box-content__info__value{display:flex;flex-direction:row;justify-content:flex-start}@media (max-width: 1024px){.my-modal__wrapper .boxes__box-content__info__value{justify-content:flex-start}}.my-modal__wrapper .boxes__box-content__info__value-image img{width:114px;object-fit:cover}@media (max-width: 1024px){.my-modal__wrapper .boxes__box-content__info__value-image img{width:75px}}.my-modal__wrapper .boxes__box-content__info__value-product{color:#232323;margin-left:10px}@media (max-width: 1024px){.my-modal__wrapper .boxes__box-content__info__value-product h2{font-size:26px;margin:0;margin-right:10px}}@media (max-width: 768px){.my-modal__wrapper .boxes__box-content__info__value-product h2{font-size:16px}}.my-modal__wrapper .boxes__box-content__info__value-product p{font-size:20px;margin-top:0px;margin-bottom:0px}.my-modal__wrapper .boxes__box-content__info__value-product p:last-of-type{margin-bottom:20px}@media (max-width: 1024px){.my-modal__wrapper .boxes__box-content__info__value-product p:last-of-type{margin-bottom:0}}@media (max-width: 768px){.my-modal__wrapper .boxes__box-content__info__value-product p{font-size:10px}}.my-modal__wrapper .boxes__box-content__info__value-product a{background-color:#fff;font-size:16px;box-shadow:0 10px 20px 0 rgba(0, 0, 0, 0.1);border-radius:22.5px;padding:15px 30px;color:#232323;text-decoration:none;display:block;text-align:center;transition:all 0.7s ease-in-out}@media (max-width: 1024px){.my-modal__wrapper .boxes__box-content__info__value-product a{max-width:150px;font-size:13px;padding:12px 25px}}.my-modal__wrapper .boxes__box-content__info__value-product a:hover{color:#fff;background-color:#232323}.my-modal__wrapper .boxes__box-content__info__value-product a.inverse{background-color:#232323;color:#fff}.my-modal__wrapper .boxes__box-content__info__value-product a.inverse:hover{color:#232323;background-color:#fff}@media (max-width: 1024px){.my-modal__wrapper .boxes__box-content__info__value-product>div{display:flex;justify-content:flex-start;align-items:center}}.my-modal__wrapper .boxes__box-content__slider{width:60%;position:relative}@media (max-width: 1024px){.my-modal__wrapper .boxes__box-content__slider{width:100%;display:block}}.my-modal__wrapper .boxes__box-content__white *{color:#fff}.my-modal__wrapper .boxes__box-content__white h2{color:#fff}.my-modal__wrapper .pagination{margin:10px 0px;font-size:16px;display:flex;flex-direction:row;align-items:center;justify-content:center}.my-modal__wrapper .pagination>span{margin:0 3px;cursor:pointer;min-width:20px;padding:5px;box-shadow:1px 1px 1px #ccc}.my-modal__wrapper .pagination .current{background-color:wheat}.my-modal .categories{padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid #dfdfdf;display:flex;flex-direction:column;align-items:flex-start}.my-modal .categories__container{display:flex;flex-wrap:nowrap;gap:5px 5px;overflow-x:auto;width:100%}@media (max-width: 1024px){.my-modal .categories__container{padding-bottom:5px}}.my-modal .categories__slide-information{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.my-modal .categories__slide-information span{color:#4c4c4c;font-size:16px;font-weight:normal}.my-modal .categories__slide-information span:first-of-type{margin-left:7px}.my-modal .categories__slide-information span:last-of-type{margin-right:7px}";
 
-const MyModal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
-  constructor() {
-    super();
-    this.__registerHost();
+const MyModal = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
     this.close = createEvent(this, "close", 7);
     this.boxDesktopWidth = 130;
     this.boxMobileWidth = 85;
@@ -2381,71 +2448,12 @@ const MyModal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
       }, key: `#${i + 1 + page}` }, i + 1))))))))));
   }
   static get assetsDirs() { return ["assets"]; }
-  get modalEl() { return this; }
+  get modalEl() { return getElement(this); }
   static get watchers() { return {
     "chunksNum": ["setInfoBoxWidth"],
     "data": ["watchPropHandler"]
   }; }
-  static get style() { return myModalCss; }
-}, [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"]]]);
-function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["my-modal", "my-colorbox", "my-colorinfo", "my-loader", "my-search", "my-slider"];
-  components.forEach(tagName => { switch (tagName) {
-    case "my-modal":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, MyModal);
-      }
-      break;
-    case "my-colorbox":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$5();
-      }
-      break;
-    case "my-colorinfo":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "my-loader":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "my-search":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-    case "my-slider":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$1();
-      }
-      break;
-  } });
-}
+};
+MyModal.style = myModalCss;
 
-export { MyModal as M, defineCustomElement as d };
+export { MyModal as my_modal };

package/dist/pallete/my-search.entry.js

@@ -0,0 +1,36 @@
+import { r as registerInstance, e as createEvent, h, f as getAssetPath } from './index-1ac7471e.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{margin-bottom:12px;font-size:16px;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) {
+    registerInstance(this, hostRef);
+    this.searchColors = createEvent(this, "searchColors", 7);
+    this.searchIcon = 'search.svg';
+    this.searchText = null;
+    this.fetchColorsByName = (text) => {
+      this.searchColors.emit(text);
+    };
+  }
+  onInputChangeValue(event) {
+    const value = event.target.value;
+    this.searchColors.emit(value);
+    this.searchText = value;
+  }
+  fetchColorsByNameHandle(newValue) {
+    this.fetchColorsByName(newValue);
+  }
+  render() {
+    return (h("div", { class: 'search' }, h("input", { placeholder: this.isMobile ? 'Wyszukaj kolor' : 'Wyszukaj kolor po nazwie bądź numerze', value: this.searchText || '', type: "text", onInput: this.onInputChangeValue.bind(this) }), h("button", { onClick: () => {
+        this.searchText && this.fetchColorsByName(this.searchText);
+        this.searchText = '';
+      } }, h("img", { src: getAssetPath(`./assets/${this.searchIcon}`), alt: "arrow_down" }))));
+  }
+  static get assetsDirs() { return ["assets"]; }
+  static get watchers() { return {
+    "searchText": ["fetchColorsByNameHandle"]
+  }; }
+};
+MySearch.style = mySearchCss;
+
+export { MySearch as my_search };