@ppg_pl/tinting 0.0.4 → 0.0.7

package/dist/components/index10.js

@@ -3470,7 +3470,7 @@ Object.assign(chroma, {
     valid
 });
 
-const indexCss = "@import url(\"https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap\"); .tinting-wrapper *{font-family:\"Poppins\", sans-serif}.my-modal{box-shadow:1px 1px 1px #ccc;background-color:#fff;position:fixed;top:20px;left:50%;transform:translateX(-50%);max-width:1555px;width:90%;z-index:1000;text-align:center;padding:60px 40px;max-height:calc(100vh - 100px);overflow-y:auto;min-height:50vh}@media (max-width: 1024px){.my-modal{padding:40px 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__see-more{font-size:16px;display:flex;justify-content:left;align-items:center;font-weight:300;color:#575757;margin-top:12px;margin-bottom:0px}@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__see-more.big{font-size:20px;margin-bottom:8px}.my-modal__wrapper{display:flex;flex-direction:column;position:relative}.my-modal__wrapper .not-found{padding:100px 0px}.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;margin-bottom:30px;color:#232323}@media (max-width: 768px){.my-modal__wrapper .boxes__box-content__info h2{font-size:16px;text-align:center;margin-bottom:15px;margin-top:5px}}.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;display:none}}.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%;min-width:60%;max-width:60%;position:relative}@media (max-width: 1024px){.my-modal__wrapper .boxes__box-content__slider{width:100%;display:block;min-width:100%;max-width:100%}}.my-modal__wrapper .boxes__box-content__slider .color-big-image{width:100%;height:100%;object-fit:cover}@media (max-width: 1024px){.my-modal__wrapper .boxes__box-content__slider .color-big-image{height:300px}}.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:0px 10px 20px rgba(0, 0, 0, 0.1);border-radius:22px;padding:10px 35px;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.brown,.my-modal a.brown{background-color:#3c2114;color:#fff}.my-modal .button.brown:hover,.my-modal a.brown: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 indexCss = "@import url(\"https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap\"); .tinting-wrapper *{font-family:\"Poppins\", sans-serif}.my-modal{box-shadow:1px 1px 1px #ccc;background-color:#fff;position:fixed;top:20px;left:50%;transform:translateX(-50%);max-width:1555px;width:90%;z-index:1000;text-align:center;padding:60px 40px;max-height:calc(100vh - 100px);overflow-y:auto;min-height:50vh}@media (max-width: 1024px){.my-modal{padding:40px 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__see-more{font-size:16px;display:flex;justify-content:left;align-items:center;font-weight:300;color:#575757;margin-top:12px;margin-bottom:0px}@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__see-more.big{font-size:20px;margin-bottom:8px}.my-modal__wrapper{display:flex;flex-direction:column;position:relative}.my-modal__wrapper .not-found{padding:100px 0px}.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;margin-bottom:30px;color:#232323}@media (max-width: 768px){.my-modal__wrapper .boxes__box-content__info h2{font-size:16px;text-align:center;margin-bottom:15px;margin-top:5px}}.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;display:none}}.my-modal__wrapper .boxes__box-content__info__value{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:20px}@media (max-width: 1024px){.my-modal__wrapper .boxes__box-content__info__value{justify-content:flex-start;margin-top:30px}}@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__info__tester{display:flex;flex-direction:column;gap:15px;width:100%}.my-modal__wrapper .boxes__box-content__info__tester .tester-text h2{margin:0 0 10px;font-size:18px;font-weight:700}.my-modal__wrapper .boxes__box-content__info__tester .tester-text p{margin:0;font-size:14px}.my-modal__wrapper .boxes__box-content__info__tester .tester-buy{display:flex;align-items:center;gap:15px;width:100%;flex-wrap:nowrap;min-width:0}@media (max-width: 1024px){.my-modal__wrapper .boxes__box-content__info__tester .tester-buy{flex-direction:column;align-items:flex-start}}.my-modal__wrapper .boxes__box-content__info .price{font-size:20px;font-weight:600}.my-modal__wrapper .boxes__box-content__slider{width:60%;min-width:60%;max-width:60%;position:relative}@media (max-width: 1024px){.my-modal__wrapper .boxes__box-content__slider{width:100%;display:block;min-width:100%;max-width:100%}}.my-modal__wrapper .boxes__box-content__slider .color-big-image{width:100%;height:100%;object-fit:cover}@media (max-width: 1024px){.my-modal__wrapper .boxes__box-content__slider .color-big-image{height:300px}}.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:0px 10px 20px rgba(0, 0, 0, 0.1);border-radius:22px;padding:10px 35px;color:#232323;text-decoration:none;display:block;text-align:center;transition:all 0.7s ease-in-out;border:none;cursor:pointer;display:flex;align-items:center;gap:5px}.my-modal .button .shape-icon,.my-modal a .shape-icon{display:inline-flex}.my-modal .button .shape-icon svg,.my-modal a .shape-icon svg{display:block}.my-modal .button .shape-icon path,.my-modal .button .shape-icon .shape-icon__path,.my-modal a .shape-icon path,.my-modal a .shape-icon .shape-icon__path{fill:currentColor;transition:fill 0.7s ease-in-out}.my-modal .button.fit,.my-modal a.fit{padding:10px 15px}.my-modal .button:hover,.my-modal a:hover{color:#fff;background-color:#232323}.my-modal .button.brown,.my-modal a.brown{background-color:#3c2114;color:#fff}.my-modal .button.brown:hover,.my-modal a.brown: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}.my-modal .button.inverse svg path,.my-modal a.inverse svg path{fill:#fff}.my-modal .button:disabled,.my-modal .button.disabled,.my-modal a:disabled,.my-modal a.disabled{cursor:not-allowed;opacity:0.5}.my-modal .button.is-loading,.my-modal a.is-loading{position:relative;cursor:wait}.my-modal .button.is-loading:hover,.my-modal a.is-loading:hover{background-color:inherit;color:inherit}.my-modal .button.is-loading .button-content,.my-modal a.is-loading .button-content{visibility:hidden}.my-modal .button.is-loading .spinner,.my-modal a.is-loading .spinner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;animation:basket-spin 0.9s linear infinite;color:currentColor}.my-modal .button.is-loading .spinner svg,.my-modal a.is-loading .spinner svg{display:block}.my-modal .button .button-content,.my-modal a .button-content{display:inline-flex;align-items:center;gap:5px}@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}.my-modal .basket-status{cursor:default;pointer-events:none;max-width:100%;min-width:0}.my-modal .basket-status--success{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;background-color:#fff;color:#232323;border-radius:28px 28px 28px 0;box-shadow:0px 10px 20px rgba(0, 0, 0, 0.1);font-size:14px;white-space:nowrap;animation:basket-success-in 0.25s ease-out;max-width:100%;min-width:0;flex:1 1 auto}.my-modal .basket-status--success>span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis}.my-modal .basket-status--success .check-icon{display:inline-flex;color:#2bb673}.my-modal .basket-status--success .check-icon svg{display:block;width:20px;height:20px}.my-modal .basket-status--success strong{font-weight:700}.my-modal .basket-status--success.inverse{background-color:#232323;color:#fff}.my-modal .basket-status--success.brown{background-color:#3c2114;color:#fff}@media (max-width: 1024px){.my-modal .basket-status--success{font-size:13px;padding:12px 22px;border-radius:22px 22px 22px 0;white-space:normal;width:100%;justify-content:center}}@keyframes basket-spin{to{transform:rotate(360deg)}}@keyframes basket-success-in{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:translateX(0)}}";
 
 const Modal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -3539,6 +3539,8 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.shop = undefined;
     this.product = undefined;
     this.baselink = undefined;
+    this.available_testers = undefined;
+    this.price = undefined;
     this.selectedcolor = undefined;
     this.arrowDown = 'arrow_down.png';
     this.chunksNum = 12;
@@ -3593,6 +3595,9 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   handleEmitColor(event) {
     this.onSelectedColorEmit.emit(event.detail);
   }
+  addToBasketHandler(event) {
+    return event.detail.id;
+  }
   handleResize() {
     this.calculateBoxCount();
     this.displayForMobile();
@@ -3610,10 +3615,20 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       let mostSimilarIndex = 0;
       let minDistance = Infinity;
       remainingColors.forEach((color, index) => {
-        const distance = chroma.distance(lastColor.hex, color.hex, 'lab');
-        if (distance < minDistance) {
-          minDistance = distance;
-          mostSimilarIndex = index;
+        try {
+          // Validate hex colors before calculating distance
+          if (!color.hex || !lastColor.hex) {
+            return;
+          }
+          const distance = chroma.distance(lastColor.hex, color.hex, 'lab');
+          if (distance < minDistance) {
+            minDistance = distance;
+            mostSimilarIndex = index;
+          }
+        }
+        catch (error) {
+          console.warn(`Error calculating color distance for ${color.hex}:`, error);
+          // Skip this color if it causes an error
         }
       });
       // Move the most similar color to sortedColors
@@ -3622,36 +3637,65 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     return sortedColors;
   }
   getColorHueGroup(hex) {
-    const color = chroma(hex);
-    const hue = color.get('hsl.h');
-    const saturation = color.get('hsl.s');
-    const lightness = color.get('hsl.l');
-    // Handle grayscale colors
-    if (saturation < 0.1) {
-      if (lightness < 0.2)
-        return 'black';
-      if (lightness > 0.8)
-        return 'white';
-      return 'gray';
-    }
-    // Group colors by hue ranges
-    if (hue >= 330 || hue < 30)
-      return 'red';
-    if (hue >= 30 && hue < 90)
-      return 'yellow';
-    if (hue >= 90 && hue < 150)
-      return 'green';
-    if (hue >= 150 && hue < 210)
-      return 'cyan';
-    if (hue >= 210 && hue < 270)
-      return 'blue';
-    if (hue >= 270 && hue < 330)
-      return 'magenta';
-    return 'other';
+    try {
+      // Validate hex format and handle invalid colors
+      if (!hex || typeof hex !== 'string') {
+        return 'other';
+      }
+      // Basic hex validation
+      const cleanHex = hex.startsWith('#') ? hex : `#${hex}`;
+      if (!/^#[0-9A-Fa-f]{6}$/.test(cleanHex)) {
+        console.warn(`Invalid hex color format: ${hex}`);
+        return 'other';
+      }
+      const color = chroma(cleanHex);
+      const hue = color.get('hsl.h');
+      const saturation = color.get('hsl.s');
+      const lightness = color.get('hsl.l');
+      // Handle grayscale colors
+      if (saturation < 0.1) {
+        if (lightness < 0.2)
+          return 'black';
+        if (lightness > 0.8)
+          return 'white';
+        return 'gray';
+      }
+      // Group colors by hue ranges
+      if (hue >= 330 || hue < 30)
+        return 'red';
+      if (hue >= 30 && hue < 90)
+        return 'yellow';
+      if (hue >= 90 && hue < 150)
+        return 'green';
+      if (hue >= 150 && hue < 210)
+        return 'cyan';
+      if (hue >= 210 && hue < 270)
+        return 'blue';
+      if (hue >= 270 && hue < 330)
+        return 'magenta';
+      return 'other';
+    }
+    catch (error) {
+      console.warn(`Error parsing color "${hex}":`, error);
+      return 'other';
+    }
   }
   sortColorsByHueAndSimilarity(colors) {
     if ((colors === null || colors === void 0 ? void 0 : colors.length) <= 1)
       return colors;
+    // Filter out colors with invalid hex values
+    const validColors = colors.filter(color => {
+      if (!color.hex || typeof color.hex !== 'string') {
+        console.warn(`Color missing hex value:`, color);
+        return false;
+      }
+      const cleanHex = color.hex.startsWith('#') ? color.hex : `#${color.hex}`;
+      const isValid = /^#[0-9A-Fa-f]{6}$/.test(cleanHex);
+      if (!isValid) {
+        console.warn(`Invalid hex color format: ${color.hex} for color:`, color);
+      }
+      return isValid;
+    });
     // Group valid colors by their hue family
     const colorGroups = {
       red: [],
@@ -3665,7 +3709,7 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       white: [],
       other: [],
     };
-    colors.forEach(color => {
+    validColors.forEach(color => {
       const group = this.getColorHueGroup(color.hex);
       colorGroups[group].push(color);
     });
@@ -3677,7 +3721,7 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         sortedGroups.push(this.sortColorsBySimilarity(colorGroups[groupName]));
       }
     });
-    // Combine all sorted groups, then append invalid colors at the end
+    // Combine all sorted groups
     return sortedGroups.flat();
   }
   async fetchColorsData({ reset = false } = {}) {
@@ -3834,7 +3878,7 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     var _a;
     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 && this.data && (h("modal-header", { modalName: this.data.modalName, modalLogo: this.data.modalLogo ? `${APIURL}/assets/${this.data.modalLogo}?access_token=${accessToken}` : null, modalDescription: this.data.modalDescription, shop: this.shop, productName: this.data.name, productSamples: this.data.productSamples, selectedColorFamily: this.filters.colorFamily, isMobile: this.isMobile, onCloseModal: () => this.closeModalHandler(), onSampleSelected: event => this.handleSampleSelect(event.detail), onOnLogoClick: () => this.resetAllFilters(), onOnResetCategory: () => this.resetSelectedCategory() })), h("div", { class: 'my-modal__wrapper' }, !this.preloader && (h("div", { class: 'container_boxes' }, !this.loading && this.colorsList.length === 0 && (h("div", { class: "not-found" }, h("p", null, "Nie zaleziono wynik\u00F3w wyszukiwania pod danym has\u0142em."), h("p", null, " Wpisz inn\u0105 nazw\u0119 b\u0105d\u017A numer koloru lub skorzystaj z kolekcji kolorystycznych."))), ((_a = this.colorsList) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
       this.chunks(this.colorsList).map((color, index) => {
-        var _a;
+        var _a, _b;
         return (h("div", { key: index, class: "boxes" }, h("div", { class: "boxes__list" }, color.map((c) => {
           var _a;
           return (h("my-colorbox", { key: c.id, onClick: () => {
@@ -3857,7 +3901,7 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
               isImageInsteadHex: c.imageInsteadHex,
               bigImage: c.bigImage,
             } }));
-        })), ((_a = this.currentColor) === null || _a === void 0 ? void 0 : _a.id) && index === this.currentIndex && (h("my-colorinfo", { currentColor: this.currentColor, shop: this.shop, product: this.product, data: this.data, isMobile: this.isMobile, infoBoxWidth: this.infoBoxWidth, baselink: this.baselink }))));
+        })), ((_a = this.currentColor) === null || _a === void 0 ? void 0 : _a.id) && index === this.currentIndex && (h("my-colorinfo", { currentColor: this.currentColor, shop: this.shop, product: this.product, data: this.data, isMobile: this.isMobile, infoBoxWidth: this.infoBoxWidth, baselink: this.baselink, availableTesters: (_b = this.available_testers) === null || _b === void 0 ? void 0 : _b.find((tester) => { var _a, _b, _c; return ((_a = tester.color_name) === null || _a === void 0 ? void 0 : _a.trim().toLowerCase()) === ((_c = (_b = this.currentColor) === null || _b === void 0 ? void 0 : _b.name) === null || _c === void 0 ? void 0 : _c.trim().toLowerCase()); }), price: this.price }))));
       }))), this.loading && h("my-loader", null)), !this.preloader && this.isMobile && (h("button", { class: "button", onClick: () => this.closeModalHandler() }, "Zamknij"))));
   }
   static get assetsDirs() { return ["assets"]; }
@@ -3871,6 +3915,8 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "shop": [1],
     "product": [1],
     "baselink": [1],
+    "available_testers": [16],
+    "price": [2],
     "selectedcolor": [1],
     "arrowDown": [1, "arrow-down"],
     "chunksNum": [32],
@@ -3892,7 +3938,7 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "hasMore": [32],
     "filters": [32],
     "open": [64]
-  }, [[0, "closeInfoBox", "closeInfoBoxHandler"], [0, "onCurrentColor", "handleEmitColor"], [9, "resize", "handleResize"], [0, "colorFamilySelected", "handleColorFamilySelected"], [0, "searchColors", "searchColorsHandler"]]]);
+  }, [[0, "closeInfoBox", "closeInfoBoxHandler"], [0, "onCurrentColor", "handleEmitColor"], [0, "addToBasket", "addToBasketHandler"], [9, "resize", "handleResize"], [0, "colorFamilySelected", "handleColorFamilySelected"], [0, "searchColors", "searchColorsHandler"]]]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;