@ppg_pl/tinting 0.0.1 → 0.0.2

package/dist/cjs/modal-header_9.cjs.entry.js

@@ -6503,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;
@@ -6593,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) => {
@@ -6617,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');
@@ -6645,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: [],
@@ -6660,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);
     });
@@ -6673,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 {
@@ -6926,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) {