@ppg_pl/tinting 0.0.0 → 0.0.2

package/README.md

@@ -4,14 +4,6 @@ This documentation provides an overview of the project's architecture, technolog
 
 ## Backend
 
-### Version 1.0.1
-
-- **Framework**: The application backend is built using [Strapi](https://docs.strapi.io/developer-docs/latest/getting-started/introduction.html) version 4.
-- **Database**: The staging environment is configured with a PostgreSQL database.
-- **Collation Method**: Refer to the Strapi documentation for detailed information on collation.
-
-### Version 2.0.0
-
 - **Framework**: The application backend is built using [Directus](https://docs.directus.io/self-hosted/quickstart.html) version 10.10.4.
 - **Database**: The staging environment is configured with a PostgreSQL database.
 - **Collation Method**: Refer to the Directus documentation for detailed information on collation.

package/dist/cjs/loader.cjs.js

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["modal-header_10.cjs",[[2,"my-component",{"shop":[1],"product":[1],"baselink":[1],"colorname":[1],"show":[32],"readyToClose":[32],"open":[64],"close":[64]},[[0,"readyToCLose","setReadyToCloseHandler"],[0,"close","closeModalHandler"],[0,"onSelectedColorEmit","handleSelectedColor"]]],[0,"my-modal",{"shop":[1],"product":[1],"baselink":[1],"selectedcolor":[1],"arrowDown":[1,"arrow-down"],"chunksNum":[32],"data":[32],"preloader":[32],"loading":[32],"currentColor":[32],"currentIndex":[32],"infoBoxWidth":[32],"boxWidth":[32],"padding":[32],"isMobile":[32],"showRange":[32],"colorCategories":[32],"selectedCategory":[32],"page":[32],"colorIsSelected":[32],"colorsList":[32],"hasMore":[32],"filters":[32],"open":[64]},[[0,"closeInfoBox","closeInfoBoxHandler"],[0,"onCurrentColor","handleEmitColor"],[9,"resize","handleResize"],[0,"colorFamilySelected","handleColorFamilySelected"],[0,"searchColors","searchColorsHandler"]]],[0,"my-backdrop"],[0,"modal-header",{"modalName":[1,"modal-name"],"modalLogo":[1,"modal-logo"],"modalDescription":[1,"modal-description"],"selectedColorFamily":[1,"selected-color-family"],"shop":[1],"productName":[1,"product-name"],"isMobile":[4,"is-mobile"],"closeImage":[1,"close-image"],"productSamples":[16],"colorFamilies":[32]}],[0,"my-colorinfo",{"currentColor":[16],"shop":[1],"product":[1],"baselink":[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"],"isImageInsteadHex":[16]}],[2,"my-loader"],[2,"my-search",{"productname":[1],"shopname":[1],"isMobile":[4,"is-mobile"],"searchIcon":[1,"search-icon"],"searchText":[32]},[[4,"clearSearchText","clearSearchTextHandler"]]],[2,"my-select",{"options":[16],"placeholder":[1],"isMobile":[4,"is-mobile"],"searchIcon":[1,"search-icon"],"searchText":[32],"filteredOptions":[32],"showDropdown":[32],"selectedValue":[32]},[[4,"clearSearchText","clearSearchTextHandler"]]],[0,"my-slider",{"slides":[16],"shop":[1],"product":[1],"color":[1]}]]]], options);
+  return index.bootstrapLazy([["modal-header_9.cjs",[[2,"my-component",{"shop":[1],"product":[1],"baselink":[1],"colorname":[1],"show":[32],"readyToClose":[32],"open":[64],"close":[64]},[[0,"readyToCLose","setReadyToCloseHandler"],[0,"close","closeModalHandler"],[0,"onSelectedColorEmit","handleSelectedColor"]]],[0,"my-modal",{"shop":[1],"product":[1],"baselink":[1],"selectedcolor":[1],"arrowDown":[1,"arrow-down"],"chunksNum":[32],"data":[32],"preloader":[32],"loading":[32],"currentColor":[32],"currentIndex":[32],"infoBoxWidth":[32],"boxWidth":[32],"padding":[32],"isMobile":[32],"showRange":[32],"colorCategories":[32],"selectedCategory":[32],"page":[32],"colorIsSelected":[32],"colorsList":[32],"hasMore":[32],"filters":[32],"open":[64]},[[0,"closeInfoBox","closeInfoBoxHandler"],[0,"onCurrentColor","handleEmitColor"],[9,"resize","handleResize"],[0,"colorFamilySelected","handleColorFamilySelected"],[0,"searchColors","searchColorsHandler"]]],[0,"my-backdrop"],[0,"modal-header",{"modalName":[1,"modal-name"],"modalLogo":[1,"modal-logo"],"modalDescription":[1,"modal-description"],"selectedColorFamily":[1,"selected-color-family"],"shop":[1],"productName":[1,"product-name"],"isMobile":[4,"is-mobile"],"closeImage":[1,"close-image"],"productSamples":[16],"colorFamilies":[32]}],[0,"my-colorinfo",{"currentColor":[16],"shop":[1],"product":[1],"baselink":[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"],"isImageInsteadHex":[16]}],[2,"my-search",{"productname":[1],"shopname":[1],"isMobile":[4,"is-mobile"],"searchIcon":[1,"search-icon"],"searchText":[32]},[[4,"clearSearchText","clearSearchTextHandler"]]],[2,"my-select",{"options":[16],"placeholder":[1],"isMobile":[4,"is-mobile"],"searchIcon":[1,"search-icon"],"searchText":[32],"filteredOptions":[32],"showDropdown":[32],"selectedValue":[32]},[[4,"clearSearchText","clearSearchTextHandler"]]],[0,"my-slider",{"slides":[16],"shop":[1],"product":[1],"color":[1]}]]]], options);
   });
 };
 

package/dist/cjs/{modal-header_10.cjs.entry.js → modal-header_9.cjs.entry.js}

@@ -2620,7 +2620,7 @@ const updateFilters = (filters, newFilter) => {
   return Object.assign(Object.assign({}, filters), newFilter);
 };
 
-const indexCss$8 = "@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__header{display:flex;justify-content:flex-start;flex-direction:column;margin-bottom:16px}@media (max-width: 905px){.my-modal__header{overflow-x:auto}}@media (max-width: 1024px){.my-modal__header{flex-direction:column;margin-bottom:12px;align-items:center;display:block}}.my-modal__header .image-wrapper{display:flex;margin-bottom:17px}@media (max-width: 768px){.my-modal__header .image-wrapper{margin-bottom:12px}}.my-modal__header .image-wrapper .modal-header__logo{max-width:400px;position:relative;max-height:130px;cursor:pointer}.my-modal__header .image-wrapper .modal-header__logo img{width:100%;height:100%;object-fit:cover}@media (max-width: 768px){.my-modal__header .image-wrapper .modal-header__logo{max-width:200px}}.my-modal__header .my-modal__see-more{margin-bottom:16px;text-align:left}.my-modal__header .search-wrapper{display:flex;align-items:center;justify-content:space-between;align-items:flex-end;gap:55px;align-items:center}@media (max-width: 1024px){.my-modal__header .search-wrapper{justify-content:center;width:92%;margin:0 auto;gap:21px}}@media (max-width: 768px){.my-modal__header .search-wrapper{flex-wrap:wrap}}.my-modal__header .search-wrapper .color-families{display:flex;gap:5px;flex-wrap:wrap;max-width:100%;overflow-x:auto;padding-bottom:5px;scrollbar-width:thin;scrollbar-color:#aaa transparent;flex-wrap:wrap}.my-modal__header .search-wrapper .color-families::-webkit-scrollbar{height:6px}.my-modal__header .search-wrapper .color-families::-webkit-scrollbar-thumb{background-color:#aaa;border-radius:3px}@media (max-width: 1024px){.my-modal__header .search-wrapper .color-families{flex-wrap:nowrap}}.my-modal__header .search-wrapper .color-families .color-family{flex:0 0 auto;width:125px;height:125px;display:flex;align-items:center;justify-content:center;color:#fff;position:relative;cursor:pointer;transition:transform 0.2s ease, box-shadow 0.2s ease}.my-modal__header .search-wrapper .color-families .color-family:hover{transform:scale(0.93);box-shadow:0 8px 16px rgba(0, 0, 0, 0.15), 0 4px 8px rgba(0, 0, 0, 0.1)}.my-modal__header .search-wrapper .color-families .color-family.active{transform:scale(0.93);box-shadow:0 8px 16px rgba(0, 0, 0, 0.15), 0 4px 8px rgba(0, 0, 0, 0.1)}@media (max-width: 1024px){.my-modal__header .search-wrapper .color-families .color-family{width:90px;height:90px;font-size:12px}}.my-modal__header .search-wrapper .color-families .color-family div{width:100%;height:100%;cursor:pointer;font-size:15px;z-index:-1;opacity:65%;position:absolute}.my-modal__header .search-wrapper .search-container{display:flex;align-items:baseline}.my-modal__header .search-wrapper .search-container .filters{display:flex;flex-direction:column;gap:10px}@media (max-width: 1024px){.my-modal__header .search-wrapper .search-container .filters{width:100%}}@media (max-width: 1024px){.my-modal__header .search-wrapper .search-container{width:100%}}@media (max-width: 1024px){.my-modal__header .search-wrapper .sc-my-search-h{width:100%;margin:0 auto}}.my-modal__header .search-wrapper .my-modal__close{position:absolute;top:50px;right:20px;background:transparent;border:none;margin-top:-20px}.my-modal__header .search-wrapper .my-modal__close>img{width:45px;height:45px;object-fit:cover;cursor:pointer}@media (max-width: 1024px){.my-modal__header .search-wrapper .my-modal__close{margin-top:0px;position:absolute;right:10px;top:10px}}";
+const indexCss$7 = "@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__header{display:flex;justify-content:flex-start;flex-direction:column;margin-bottom:16px}@media (max-width: 905px){.my-modal__header{overflow-x:auto}}@media (max-width: 1024px){.my-modal__header{flex-direction:column;margin-bottom:12px;align-items:center;display:block}}.my-modal__header .image-wrapper{display:flex;margin-bottom:17px}@media (max-width: 768px){.my-modal__header .image-wrapper{margin-bottom:12px}}.my-modal__header .image-wrapper .modal-header__logo{max-width:400px;position:relative;max-height:130px;cursor:pointer}.my-modal__header .image-wrapper .modal-header__logo img{width:100%;height:100%;object-fit:cover}@media (max-width: 768px){.my-modal__header .image-wrapper .modal-header__logo{max-width:200px}}.my-modal__header .my-modal__see-more{margin-bottom:16px;text-align:left}.my-modal__header .search-wrapper{display:flex;align-items:center;justify-content:space-between;align-items:flex-end;gap:55px;align-items:center}@media (max-width: 1024px){.my-modal__header .search-wrapper{justify-content:center;width:92%;margin:0 auto;gap:21px}}@media (max-width: 768px){.my-modal__header .search-wrapper{flex-wrap:wrap}}.my-modal__header .search-wrapper .color-families{display:flex;gap:5px;flex-wrap:wrap;max-width:100%;overflow-x:auto;padding-bottom:5px;scrollbar-width:thin;scrollbar-color:#aaa transparent;flex-wrap:wrap}.my-modal__header .search-wrapper .color-families::-webkit-scrollbar{height:6px}.my-modal__header .search-wrapper .color-families::-webkit-scrollbar-thumb{background-color:#aaa;border-radius:3px}@media (max-width: 1024px){.my-modal__header .search-wrapper .color-families{flex-wrap:nowrap}}.my-modal__header .search-wrapper .color-families .color-family{flex:0 0 auto;width:125px;height:125px;display:flex;align-items:center;justify-content:center;color:#fff;position:relative;cursor:pointer;transition:transform 0.2s ease, box-shadow 0.2s ease}.my-modal__header .search-wrapper .color-families .color-family:hover{transform:scale(0.93);box-shadow:0 8px 16px rgba(0, 0, 0, 0.15), 0 4px 8px rgba(0, 0, 0, 0.1)}.my-modal__header .search-wrapper .color-families .color-family.active{transform:scale(0.93);box-shadow:0 8px 16px rgba(0, 0, 0, 0.15), 0 4px 8px rgba(0, 0, 0, 0.1)}@media (max-width: 1024px){.my-modal__header .search-wrapper .color-families .color-family{width:90px;height:90px;font-size:12px}}.my-modal__header .search-wrapper .color-families .color-family div{width:100%;height:100%;cursor:pointer;font-size:15px;z-index:-1;opacity:65%;position:absolute}.my-modal__header .search-wrapper .search-container{display:flex;align-items:baseline}.my-modal__header .search-wrapper .search-container .filters{display:flex;flex-direction:column;gap:10px}@media (max-width: 1024px){.my-modal__header .search-wrapper .search-container .filters{width:100%}}@media (max-width: 1024px){.my-modal__header .search-wrapper .search-container{width:100%}}@media (max-width: 1024px){.my-modal__header .search-wrapper .sc-my-search-h{width:100%;margin:0 auto}}.my-modal__header .search-wrapper .my-modal__close{position:absolute;top:50px;right:20px;background:transparent;border:none;margin-top:-20px}.my-modal__header .search-wrapper .my-modal__close>img{width:45px;height:45px;object-fit:cover;cursor:pointer}@media (max-width: 1024px){.my-modal__header .search-wrapper .my-modal__close{margin-top:0px;position:absolute;right:10px;top:10px}}";
 
 const ModalHeader = class {
   constructor(hostRef) {
@@ -2708,9 +2708,9 @@ const ModalHeader = class {
   }
   static get assetsDirs() { return ["assets"]; }
 };
-ModalHeader.style = indexCss$8;
+ModalHeader.style = indexCss$7;
 
-const indexCss$7 = "@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-backdrop{width:100%;height:100%;background-color:rgba(0, 0, 0, 0.7);position:fixed;z-index:100;left:0;top:0}";
+const indexCss$6 = "@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-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) {
@@ -2720,13 +2720,13 @@ const MyBackdrop = class {
     return null;
   }
 };
-MyBackdrop.style = indexCss$7;
+MyBackdrop.style = indexCss$6;
 
 const setDataLayer = (obj) => {
   return window.dataLayer.push(obj);
 };
 
-const indexCss$6 = "@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-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:65px;height:65px}}.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 indexCss$5 = "@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-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:65px;height:65px}}.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) {
@@ -2770,7 +2770,7 @@ const MyColorBox = class {
       } }, index$2.h("div", { class: "color-name" }, this.name)));
   }
 };
-MyColorBox.style = indexCss$6;
+MyColorBox.style = indexCss$5;
 
 const MyColorInfo = class {
   constructor(hostRef) {
@@ -2939,7 +2939,7 @@ const Helmet = (_props, children, utils) => {
     return null;
 };
 
-const indexCss$5 = ".tinting-wrapper.sc-my-component{display:flex;flex-direction:column;align-items:center;justify-content:center}";
+const indexCss$4 = ".tinting-wrapper.sc-my-component{display:flex;flex-direction:column;align-items:center;justify-content:center}";
 
 const MyModalBundle = class {
   constructor(hostRef) {
@@ -2990,19 +2990,7 @@ const MyModalBundle = class {
   }
   get modalEl() { return index$2.getElement(this); }
 };
-MyModalBundle.style = indexCss$5;
-
-const indexCss$4 = ".container.sc-my-loader{display:flex;justify-content:center;align-items:center;height:190px;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) {
-    index$2.registerInstance(this, hostRef);
-  }
-  render() {
-    return (index$2.h("div", { class: "container" }, index$2.h("div", { class: "item" }), index$2.h("div", { class: "item" }), index$2.h("div", { class: "item" }), index$2.h("div", { class: "item" }), index$2.h("div", { class: "item" })));
-  }
-};
-MyLoader.style = indexCss$4;
+MyModalBundle.style = indexCss$4;
 
 function debounce$1(func, wait) {
   let timeout;
@@ -6515,7 +6503,7 @@ const Modal = class {
       }
     };
     this.chunks = (xs, y = []) => {
-      return xs.length === 0 ? y : this.chunks(xs.slice(this.chunksNum), y.concat([xs.slice(0, this.chunksNum)]));
+      return (xs === null || xs === void 0 ? void 0 : xs.length) === 0 ? y : this.chunks(xs === null || xs === void 0 ? void 0 : xs.slice(this.chunksNum), y.concat([xs === null || xs === void 0 ? void 0 : xs.slice(0, this.chunksNum)]));
     };
     this.calculateBoxCount = () => {
       var _a;
@@ -6605,15 +6593,15 @@ const Modal = class {
     this.displayForMobile();
   }
   sortColorsBySimilarity(colors) {
-    if (colors.length <= 1)
+    if ((colors === null || colors === void 0 ? void 0 : colors.length) <= 1)
       return colors;
     const sortedColors = [];
     const remainingColors = [...colors];
     // Start with the first color
     sortedColors.push(remainingColors.shift());
-    while (remainingColors.length > 0) {
+    while ((remainingColors === null || remainingColors === void 0 ? void 0 : remainingColors.length) > 0) {
       // Find the most similar color to the last color in sortedColors
-      const lastColor = sortedColors[sortedColors.length - 1];
+      const lastColor = sortedColors[(sortedColors === null || sortedColors === void 0 ? void 0 : sortedColors.length) - 1];
       let mostSimilarIndex = 0;
       let minDistance = Infinity;
       remainingColors.forEach((color, index) => {
@@ -6629,6 +6617,8 @@ const Modal = class {
     return sortedColors;
   }
   getColorHueGroup(hex) {
+    if (!hex || !chroma.valid(hex))
+      return 'other';
     const color = chroma(hex);
     const hue = color.get('hsl.h');
     const saturation = color.get('hsl.s');
@@ -6657,9 +6647,12 @@ const Modal = class {
     return 'other';
   }
   sortColorsByHueAndSimilarity(colors) {
-    if (colors.length <= 1)
+    if ((colors === null || colors === void 0 ? void 0 : colors.length) <= 1)
       return colors;
-    // Group colors by their hue family
+    // Separate valid and invalid hex colors
+    const validColors = colors.filter(c => typeof c.hex === 'string' && c.hex && chroma.valid(c.hex));
+    const invalidColors = colors.filter(c => !c.hex || !chroma.valid(c.hex));
+    // Group valid colors by their hue family
     const colorGroups = {
       red: [],
       yellow: [],
@@ -6672,8 +6665,7 @@ const Modal = class {
       white: [],
       other: [],
     };
-    // Sort colors into groups
-    colors.forEach(color => {
+    validColors.forEach(color => {
       const group = this.getColorHueGroup(color.hex);
       colorGroups[group].push(color);
     });
@@ -6685,11 +6677,11 @@ const Modal = class {
         sortedGroups.push(this.sortColorsBySimilarity(colorGroups[groupName]));
       }
     });
-    // Combine all sorted groups
-    return sortedGroups.flat();
+    // Combine all sorted groups, then append invalid colors at the end
+    return [...sortedGroups.flat(), ...invalidColors];
   }
   async fetchColorsData({ reset = false } = {}) {
-    if (this.loading && !reset)
+    if (this.loading)
       return;
     this.loading = true;
     try {
@@ -6938,7 +6930,7 @@ const MySearch = class {
 };
 MySearch.style = indexCss$2;
 
-const indexCss$1 = "@import url(\"https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1.sc-my-select,300..900&family=Poppins.sc-my-select:ital,wght@0.sc-my-select,100.sc-my-select;0.sc-my-select,200.sc-my-select;0.sc-my-select,300.sc-my-select;0.sc-my-select,400.sc-my-select;0.sc-my-select,500.sc-my-select;0.sc-my-select,600.sc-my-select;0.sc-my-select,700.sc-my-select;0.sc-my-select,800.sc-my-select;0.sc-my-select,900.sc-my-select;1.sc-my-select,100.sc-my-select;1.sc-my-select,200.sc-my-select;1.sc-my-select,300.sc-my-select;1.sc-my-select,400.sc-my-select;1.sc-my-select,500.sc-my-select;1.sc-my-select,600.sc-my-select;1.sc-my-select,700.sc-my-select;1.sc-my-select,800.sc-my-select;1.sc-my-select,900&display=swap\").sc-my-select; .tinting-wrapper.sc-my-select *.sc-my-select{font-family:\"Poppins\", sans-serif}.select.sc-my-select{position:relative;width:300px}@media (max-width: 768px){.select.sc-my-select{width:100%}}.select.sc-my-select .input-wrapper.sc-my-select{position:relative;display:flex;align-items:flex-start}.select.sc-my-select input.sc-my-select{font-size:16px;padding:16px;border-radius:27.35px;border:1px solid #dfdfdf;width:100%;color:#4c4c4c;box-sizing:border-box;padding-right:50px}.select.sc-my-select button.sc-my-select{position:absolute;right:10px;background:transparent;border:none;cursor:pointer;width:40px;height:100%;display:flex;align-items:center;justify-content:center}.select.sc-my-select button.sc-my-select img.sc-my-select{transition:transform 0.3s ease}.select.sc-my-select button.sc-my-select img.rotated.sc-my-select{transform:rotate(180deg)}.select.sc-my-select .dropdown.sc-my-select{position:absolute;top:100%;left:0;width:100%;background:white;border:1px solid #dfdfdf;border-radius:5px;max-height:200px;overflow-y:auto;z-index:1000;padding:0;margin:0}.select.sc-my-select .dropdown.sc-my-select li.sc-my-select{padding:0;margin:0;padding:10px;cursor:pointer;list-style:none;text-align:left}.select.sc-my-select .dropdown.sc-my-select li.sc-my-select:hover{background:#f5f5f5}.select.sc-my-select .dropdown.sc-my-select .no-results.sc-my-select{padding:10px;text-align:center;color:#999}";
+const indexCss$1 = "@import url(\"https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1.sc-my-select,300..900&family=Poppins.sc-my-select:ital,wght@0.sc-my-select,100.sc-my-select;0.sc-my-select,200.sc-my-select;0.sc-my-select,300.sc-my-select;0.sc-my-select,400.sc-my-select;0.sc-my-select,500.sc-my-select;0.sc-my-select,600.sc-my-select;0.sc-my-select,700.sc-my-select;0.sc-my-select,800.sc-my-select;0.sc-my-select,900.sc-my-select;1.sc-my-select,100.sc-my-select;1.sc-my-select,200.sc-my-select;1.sc-my-select,300.sc-my-select;1.sc-my-select,400.sc-my-select;1.sc-my-select,500.sc-my-select;1.sc-my-select,600.sc-my-select;1.sc-my-select,700.sc-my-select;1.sc-my-select,800.sc-my-select;1.sc-my-select,900&display=swap\").sc-my-select; .tinting-wrapper.sc-my-select *.sc-my-select{font-family:\"Poppins\", sans-serif}.select.sc-my-select{position:relative;width:300px}@media (max-width: 768px){.select.sc-my-select{width:100%}}.select.sc-my-select .input-wrapper.sc-my-select{position:relative;display:flex;align-items:flex-start}.select.sc-my-select input.sc-my-select{font-size:16px;padding:16px;border-radius:27.35px;border:1px solid #dfdfdf;width:100%;color:#4c4c4c;box-sizing:border-box;padding-right:50px}.select.sc-my-select button.sc-my-select{position:absolute;right:10px;background:transparent;border:none;cursor:pointer;width:40px;height:100%;display:flex;align-items:center;justify-content:center}.select.sc-my-select button.sc-my-select img.sc-my-select{transition:transform 0.3s ease}.select.sc-my-select button.sc-my-select img.rotated.sc-my-select{transform:rotate(180deg)}.select.sc-my-select .dropdown.sc-my-select{position:absolute;top:100%;left:0;width:100%;background:white;border:1px solid #dfdfdf;border-radius:5px;max-height:200px;overflow-y:auto;z-index:1000;padding:0;margin:0}.select.sc-my-select .dropdown.sc-my-select li.sc-my-select{padding:0;margin:0;padding:10px;cursor:pointer;list-style:none;text-align:left}.select.sc-my-select .dropdown.sc-my-select li.sc-my-select:hover{background:#f5f5f5}.select.sc-my-select .dropdown.sc-my-select .no-results.sc-my-select{padding:10px;text-align:center;color:#999}@media (max-width: 768px){.select.sc-my-select .dropdown.sc-my-select{position:relative}}";
 
 const MySelect = class {
   constructor(hostRef) {
@@ -12304,10 +12296,9 @@ exports.my_backdrop = MyBackdrop;
 exports.my_colorbox = MyColorBox;
 exports.my_colorinfo = MyColorInfo;
 exports.my_component = MyModalBundle;
-exports.my_loader = MyLoader;
 exports.my_modal = Modal;
 exports.my_search = MySearch;
 exports.my_select = MySelect;
 exports.my_slider = JcSwiper;
 
-//# sourceMappingURL=modal-header_10.cjs.entry.js.map
+//# sourceMappingURL=modal-header_9.cjs.entry.js.map