@ppg_pl/pallete 0.0.4 → 0.0.6

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

@@ -1,5 +1,10 @@
-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';
+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';
 
 const APIURL = 'https://pallete-colors-backend.herokuapp.com';
 class API {
@@ -21,8 +26,6 @@ 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; }
@@ -64,8 +67,6 @@ var shams = function hasSymbols() {
 	return true;
 };
 
-'use strict';
-
 var origSymbol = typeof Symbol !== 'undefined' && Symbol;
 
 
@@ -78,8 +79,6 @@ var hasSymbols$1 = function hasNativeSymbols() {
 	return shams();
 };
 
-'use strict';
-
 /* eslint no-invalid-this: 1 */
 
 var ERROR_MESSAGE = 'Function.prototype.bind called on incompatible ';
@@ -131,20 +130,10 @@ 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;
@@ -159,13 +148,6 @@ 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();
@@ -173,8 +155,6 @@ 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 {
@@ -207,6 +187,8 @@ var INTRINSICS = {
 	'%AsyncIteratorPrototype%': needsEval,
 	'%Atomics%': typeof Atomics === 'undefined' ? undefined$1 : Atomics,
 	'%BigInt%': typeof BigInt === 'undefined' ? undefined$1 : BigInt,
+	'%BigInt64Array%': typeof BigInt64Array === 'undefined' ? undefined$1 : BigInt64Array,
+	'%BigUint64Array%': typeof BigUint64Array === 'undefined' ? undefined$1 : BigUint64Array,
 	'%Boolean%': Boolean,
 	'%DataView%': typeof DataView === 'undefined' ? undefined$1 : DataView,
 	'%Date%': Date,
@@ -403,7 +385,7 @@ var getIntrinsic = function GetIntrinsic(name, allowMissing) {
 		throw new $TypeError$1('"allowMissing" argument must be a boolean');
 	}
 
-	if ($exec(/^%?[^%]*%?$/g, name) === null) {
+	if ($exec(/^%?[^%]*%?$/, name) === null) {
 		throw new $SyntaxError('`%` may not be present anywhere but at the beginning and end of the intrinsic name');
 	}
 	var parts = stringToPath(name);
@@ -478,30 +460,16 @@ 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(path, (base === undefined || base === null) ? module.path : base);
+			return commonjsRequire();
 		}
 	}, 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});
@@ -522,7 +490,6 @@ function commonjsRequire () {
 }
 
 var callBind = createCommonjsModule(function (module) {
-'use strict';
 
 
 
@@ -571,12 +538,6 @@ if ($defineProperty) {
 }
 });
 
-'use strict';
-
-
-
-
-
 var $indexOf = callBind(getIntrinsic('String.prototype.indexOf'));
 
 var callBound = function callBoundIntrinsic(name, allowMissing) {
@@ -800,16 +761,20 @@ var objectInspect = function inspect_(obj, options, depth, seen) {
     }
     if (isMap(obj)) {
         var mapParts = [];
-        mapForEach.call(obj, function (value, key) {
-            mapParts.push(inspect(key, obj, true) + ' => ' + inspect(value, obj));
-        });
+        if (mapForEach) {
+            mapForEach.call(obj, function (value, key) {
+                mapParts.push(inspect(key, obj, true) + ' => ' + inspect(value, obj));
+            });
+        }
         return collectionOf('Map', mapSize.call(obj), mapParts, indent);
     }
     if (isSet(obj)) {
         var setParts = [];
-        setForEach.call(obj, function (value) {
-            setParts.push(inspect(value, obj));
-        });
+        if (setForEach) {
+            setForEach.call(obj, function (value) {
+                setParts.push(inspect(value, obj));
+            });
+        }
         return collectionOf('Set', setSize.call(obj), setParts, indent);
     }
     if (isWeakMap(obj)) {
@@ -1109,12 +1074,6 @@ function arrObjKeys(obj, inspect) {
     return xs;
 }
 
-'use strict';
-
-
-
-
-
 var $TypeError = getIntrinsic('%TypeError%');
 var $WeakMap = getIntrinsic('%WeakMap%', true);
 var $Map = getIntrinsic('%Map%', true);
@@ -1234,8 +1193,6 @@ var sideChannel = function getSideChannel() {
 	return channel;
 };
 
-'use strict';
-
 var replace = String.prototype.replace;
 var percentTwenties = /%20/g;
 
@@ -1258,10 +1215,6 @@ var formats = {
     RFC3986: Format.RFC3986
 };
 
-'use strict';
-
-
-
 var has$2 = Object.prototype.hasOwnProperty;
 var isArray$2 = Array.isArray;
 
@@ -1511,11 +1464,6 @@ var utils = {
     merge: merge
 };
 
-'use strict';
-
-
-
-
 var has$1 = Object.prototype.hasOwnProperty;
 
 var arrayPrefixGenerators = {
@@ -1532,7 +1480,6 @@ var arrayPrefixGenerators = {
 };
 
 var isArray$1 = Array.isArray;
-var split = String.prototype.split;
 var push = Array.prototype.push;
 var pushToArray = function (arr, valueOrArray) {
     push.apply(arr, isArray$1(valueOrArray) ? valueOrArray : [valueOrArray]);
@@ -1634,14 +1581,6 @@ var stringify = function stringify(
     if (isNonNullishPrimitive(obj) || utils.isBuffer(obj)) {
         if (encoder) {
             var keyValue = encodeValuesOnly ? prefix : encoder(prefix, defaults$1.encoder, charset, 'key', format);
-            if (generateArrayPrefix === 'comma' && encodeValuesOnly) {
-                var valuesArray = split.call(String(obj), ',');
-                var valuesJoined = '';
-                for (var i = 0; i < valuesArray.length; ++i) {
-                    valuesJoined += (i === 0 ? '' : ',') + formatter(encoder(valuesArray[i], defaults$1.encoder, charset, 'value', format));
-                }
-                return [formatter(keyValue) + (commaRoundTrip && isArray$1(obj) && valuesArray.length === 1 ? '[]' : '') + '=' + valuesJoined];
-            }
             return [formatter(keyValue) + '=' + formatter(encoder(obj, defaults$1.encoder, charset, 'value', format))];
         }
         return [formatter(prefix) + '=' + formatter(String(obj))];
@@ -1656,6 +1595,9 @@ var stringify = function stringify(
     var objKeys;
     if (generateArrayPrefix === 'comma' && isArray$1(obj)) {
         // we need to join elements in
+        if (encodeValuesOnly && encoder) {
+            obj = utils.maybeMap(obj, encoder);
+        }
         objKeys = [{ value: obj.length > 0 ? obj.join(',') || null : void undefined }];
     } else if (isArray$1(filter)) {
         objKeys = filter;
@@ -1688,7 +1630,7 @@ var stringify = function stringify(
             commaRoundTrip,
             strictNullHandling,
             skipNulls,
-            encoder,
+            generateArrayPrefix === 'comma' && encodeValuesOnly && isArray$1(obj) ? null : encoder,
             filter,
             sort,
             allowDots,
@@ -1838,10 +1780,6 @@ var stringify_1 = function (object, opts) {
     return joined.length > 0 ? prefix + joined : '';
 };
 
-'use strict';
-
-
-
 var has = Object.prototype.hasOwnProperty;
 var isArray = Array.isArray;
 
@@ -2102,12 +2040,6 @@ var parse = function (str, opts) {
     return utils.compact(obj);
 };
 
-'use strict';
-
-
-
-
-
 var lib = {
     formats: formats,
     parse: parse,
@@ -2195,34 +2127,19 @@ const fetchColorByNumber = (productId, colorNumber) => lib.stringify({
   encodeValuesOnly: true, // prettify url
 });
 
-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 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}@media (max-width: 1024px){.my-modal__wrapper .boxes__list{justify-content:center}}.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:auto}}@media (max-width: 768px){.my-modal__wrapper .boxes__box-content{margin:0 auto}}.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}}@media (max-width: 768px){.my-modal__wrapper .boxes__box-content__info{min-height:auto}}.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}@media (max-width: 768px){.my-modal__wrapper .boxes__box-content__info .divider{margin:10px 0px}}.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}}@media (max-width: 768px){.my-modal__wrapper .boxes__box-content__info__value{flex-direction:column}}@media (max-width: 768px){.my-modal__wrapper .boxes__box-content__info__value-image{margin:0 auto;margin-bottom:10px}}.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}}@media (max-width: 1024px){.my-modal__wrapper .boxes__box-content__info__value-product>div{display:flex;justify-content:flex-start;align-items:center}}@media (max-width: 768px){.my-modal__wrapper .boxes__box-content__info__value-product>div{flex-direction:column}}.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}.my-modal .button,.my-modal 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;border:none;cursor:pointer}.my-modal .button:hover,.my-modal a:hover{color:#fff;background-color:#232323}.my-modal .button.inverse,.my-modal a.inverse{background-color:#232323;color:#fff}.my-modal .button.inverse:hover,.my-modal a.inverse:hover{color:#232323;background-color:#fff}@media (max-width: 1024px){.my-modal .button,.my-modal a{max-width:150px;font-size:13px;padding:12px 25px}}@media (max-width: 768px){.my-modal .button,.my-modal a{margin:0 auto}}.my-modal>.button{margin:10px auto}";
 
-const MyModal = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
+const MyModal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
+  constructor() {
+    super();
+    this.__registerHost();
     this.close = createEvent(this, "close", 7);
+    this.readyToCLose = createEvent(this, "readyToCLose", 7);
     this.boxDesktopWidth = 130;
     this.boxMobileWidth = 85;
     this.desktopPadding = 75;
     this.mobilePadding = 35;
     this.mediumBreakpoint = 1024;
-    this.closeImage = 'close.png';
-    this.arrowDown = 'arrow_down.png';
-    this.chunksNum = 12;
-    this.data = null;
-    this.preloader = false;
-    this.loading = false;
-    this.colors = null;
-    this.currentColor = null;
-    this.currentIndex = null;
-    this.infoBoxWidth = null;
-    this.boxWidth = this.boxDesktopWidth; // box width with gap
-    this.padding = this.desktopPadding;
-    this.isMobile = false;
-    this.showRange = false;
-    this.colorCategories = null;
-    this.selectedCategory = null;
-    this.page = 1;
     this.clearInterval = () => {
       this.colorTimerInterval && clearInterval(this.colorTimerInterval);
       this.colorTimerInterval = undefined;
@@ -2358,6 +2275,25 @@ const MyModal = class {
       }
       this.currentColor = null;
     };
+    this.shop = undefined;
+    this.product = undefined;
+    this.closeImage = 'close.png';
+    this.arrowDown = 'arrow_down.png';
+    this.chunksNum = 12;
+    this.data = null;
+    this.preloader = false;
+    this.loading = false;
+    this.colors = null;
+    this.currentColor = null;
+    this.currentIndex = null;
+    this.infoBoxWidth = null;
+    this.boxWidth = this.boxDesktopWidth;
+    this.padding = this.desktopPadding;
+    this.isMobile = false;
+    this.showRange = false;
+    this.colorCategories = null;
+    this.selectedCategory = null;
+    this.page = 1;
   }
   setInfoBoxWidth(newValue) {
     this.infoBoxWidth = newValue * this.boxWidth;
@@ -2377,6 +2313,9 @@ const MyModal = class {
   closeModalHandler() {
     this.close.emit();
   }
+  handleReadyToClose(value) {
+    this.readyToCLose.emit({ observable: value });
+  }
   closeInfoBoxHandler() {
     this.currentColor = null;
     this.currentIndex = null;
@@ -2420,7 +2359,7 @@ const MyModal = class {
   }
   render() {
     var _a, _b, _c, _d, _e, _f, _g;
-    return (h("div", { class: `my-modal` }, this.preloader && (h("div", { class: 'loader' }, h("my-loader", null))), !this.preloader && (h("button", { class: "my-modal__close", onClick: () => this.closeModalHandler() }, h("img", { src: getAssetPath(`./assets/${this.closeImage}`), alt: "closebtn" }))), !this.preloader && this.data && this.data.modalLogo && h("img", { src: `${(_d = (_c = (_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.modalLogo) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.attributes) === null || _d === void 0 ? void 0 : _d.url}`, alt: "modal-logo" }), !this.preloader && (h("p", { class: "my-modal__see-more" }, (_e = this.data) === null || _e === void 0 ? void 0 : _e.modalDescription)), this.showRange && (h("div", { class: 'categories' }, this.data && h("my-search", { productId: Number((_f = this.data) === null || _f === void 0 ? void 0 : _f.id), isMobile: this.isMobile }), h("div", { class: 'categories__container', style: { maxWidth: `${this.infoBoxWidth}px` } }, (_g = this.data) === null || _g === void 0 ? void 0 : _g.categories.data.map((c) => {
+    return (h("div", { class: `my-modal`, onMouseEnter: () => this.handleReadyToClose(false), onMouseLeave: () => this.handleReadyToClose(true) }, this.preloader && (h("div", { class: 'loader' }, h("my-loader", null))), !this.preloader && (h("button", { class: "my-modal__close", onClick: () => this.closeModalHandler() }, h("img", { src: getAssetPath(`./assets/${this.closeImage}`), alt: "closebtn" }))), !this.preloader && this.data && this.data.modalLogo && h("img", { src: `${(_d = (_c = (_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.modalLogo) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.attributes) === null || _d === void 0 ? void 0 : _d.url}`, alt: "modal-logo" }), !this.preloader && (h("p", { class: "my-modal__see-more" }, (_e = this.data) === null || _e === void 0 ? void 0 : _e.modalDescription)), this.showRange && (h("div", { class: 'categories' }, this.data && h("my-search", { productId: Number((_f = this.data) === null || _f === void 0 ? void 0 : _f.id), isMobile: this.isMobile }), h("div", { class: 'categories__container', style: { maxWidth: `${this.infoBoxWidth}px` } }, (_g = this.data) === null || _g === void 0 ? void 0 : _g.categories.data.map((c) => {
       var _a;
       return (h("my-colorbox", { key: c.id, onClick: () => this.handleCategoryClick(c), color: c.attributes.hex, name: c.attributes.name, shop: this.shop, product: this.product, isCategoryActive: ((_a = this.selectedCategory) === null || _a === void 0 ? void 0 : _a.id) === c.id }));
     })), this.isMobile && (h("div", { class: 'categories__slide-information', style: { width: `${this.infoBoxWidth}px` } }, h("span", null, "Przewi\u0144 w lewo"), h("span", null, "Przewi\u0144 w prawo"))))), h("div", { class: 'my-modal__wrapper' }, this.loading && h("my-loader", null), !this.loading && this.colors && (h("div", { class: 'container_boxes' }, this.colors.list.length > 0 ? (this.chunks(this.colors.list).map((color, index) => {
@@ -2445,15 +2384,76 @@ const MyModal = class {
     })) : (h("p", null, "Brak wynik\u00F3w")), this.colors.pagination.pageCount > 1 && (h("div", { class: 'pagination' }, Array.from({ length: this.colors.pagination.pageCount }).map((page, i) => (h("span", { class: i + 1 === this.page ? 'current' : '', onClick: e => {
         e.preventDefault();
         this.onPage(i + 1);
-      }, key: `#${i + 1 + page}` }, i + 1))))))))));
+      }, key: `#${i + 1 + page}` }, i + 1)))))))), ' ', !this.preloader && this.isMobile && (h("button", { class: "button", onClick: () => this.closeModalHandler() }, "Zamknij"))));
   }
   static get assetsDirs() { return ["assets"]; }
-  get modalEl() { return getElement(this); }
+  get modalEl() { return this; }
   static get watchers() { return {
     "chunksNum": ["setInfoBoxWidth"],
     "data": ["watchPropHandler"]
   }; }
-};
-MyModal.style = myModalCss;
+  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;
+  } });
+}
+
+export { MyModal as M, defineCustomElement as d };
 
-export { MyModal as my_modal };
+//# sourceMappingURL=my-modal2.js.map