@ppg_pl/tinting 0.0.4 → 0.0.5

package/dist/collection/components/modal/index.js

@@ -136,10 +136,20 @@ export class Modal {
       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
@@ -148,36 +158,65 @@ export class Modal {
     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';
+    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';
     }
-    // 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';
   }
   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: [],
@@ -191,7 +230,7 @@ export class Modal {
       white: [],
       other: [],
     };
-    colors.forEach(color => {
+    validColors.forEach(color => {
       const group = this.getColorHueGroup(color.hex);
       colorGroups[group].push(color);
     });
@@ -203,7 +242,7 @@ export class Modal {
         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 } = {}) {

package/dist/collection/components/modal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/modal/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Method, Element, Prop, Event, EventEmitter, h, State, Listen, Watch } from '@stencil/core';\nimport { APIURL, accessToken } from '../api';\nimport { setDataLayer } from '../../gtmUtils';\nimport { Color, Product } from '../../types';\nimport { fetchColors, fetchProductData, limit, updateFilters } from '../api/services';\nimport { debounce } from '../../utils';\nimport chroma from 'chroma-js';\n\ndeclare global {\n  interface Window {\n    dataLayer: Record<string, any>[];\n  }\n}\n\n@Component({\n  tag: 'my-modal',\n  styleUrl: 'index.scss',\n  assetsDirs: ['assets'],\n})\nexport class Modal {\n  private boxDesktopWidth = 130;\n  private boxMobileWidth = 70;\n  private desktopPadding = 75;\n  private mobilePadding = 35;\n  private mediumBreakpoint = 1024;\n  private colorTimerInterval: ReturnType<typeof setInterval> | undefined;\n\n  @Event({ bubbles: true, composed: true }) onSelectedColorEmit: EventEmitter<Color>;\n\n  @Event({ bubbles: true, composed: true }) clearSearchText: EventEmitter;\n  @Element() modalEl: HTMLElement;\n\n  @Prop() shop: string;\n  @Prop() product: string;\n  @Prop() baselink: string;\n  @Prop() selectedcolor: string | null;\n  @Prop() arrowDown = 'arrow_down.png';\n\n  @State() chunksNum = 12;\n  @State() data: Product | null = null;\n  @State() preloader = false;\n  @State() loading = false;\n  @State() currentColor: Color | null = null;\n  @State() currentIndex: number | null = null;\n  @State() infoBoxWidth: number | null = null;\n  @State() boxWidth: number = this.boxDesktopWidth; // box width with gap\n  @State() padding: number = this.desktopPadding;\n  @State() isMobile: boolean = false;\n  @State() showRange: boolean = false;\n  @State() colorCategories: string[] | null = null;\n  @State() selectedCategory: any = null;\n  @State() page = 1;\n  @State() colorIsSelected = false;\n  @State() colorsList: Color[] = [];\n  @State() hasMore = true;\n  @State() filters: any = {\n    type: 'product' as 'product' | 'sample' | 'number' | 'name' | 'sampleInProduct',\n    id: '',\n    productId: '',\n    page: 1,\n    colorNumber: '',\n    colorName: '',\n  };\n\n  debouncedSearchColorsHandler: (event: CustomEvent) => void;\n\n  constructor() {\n    this.debouncedSearchColorsHandler = debounce(this.searchColor.bind(this), 300);\n  }\n\n  @Watch('chunksNum')\n  setInfoBoxWidth(newValue: number) {\n    this.infoBoxWidth = newValue * this.boxWidth;\n  }\n\n  @Watch('data')\n  watchPropHandler(newValue: Product) {\n    if (newValue) {\n      this.filters = updateFilters(this.filters, { id: newValue.id, type: 'product' });\n      this.fetchColorsData();\n    }\n  }\n\n  private clearInterval = () => {\n    this.colorTimerInterval && clearInterval(this.colorTimerInterval);\n    this.colorTimerInterval = undefined;\n  };\n\n  private colorTimer = () => {\n    if (this.currentColor && this.currentColor.id) {\n      this.colorTimerInterval = setInterval(() => {\n        this.currentColor?.name &&\n          setDataLayer({\n            event: 'ColorTimer',\n            shop: this.shop,\n            product: this.product,\n            color: this.currentColor?.name,\n            timer: '10',\n          });\n      }, 10000);\n    } else {\n      this.clearInterval();\n    }\n  };\n\n  @Method()\n  async open() {\n    this.modalEl.style.display = 'block';\n  }\n  @Event() close: EventEmitter;\n  closeModalHandler() {\n    this.close.emit();\n  }\n\n  @Event() readyToCLose: EventEmitter;\n  handleReadyToClose(value: boolean) {\n    this.readyToCLose.emit({ observable: value });\n  }\n\n  @Listen('closeInfoBox')\n  closeInfoBoxHandler() {\n    this.currentColor = null;\n    this.currentIndex = null;\n  }\n\n  @Listen('onCurrentColor')\n  handleEmitColor(event: CustomEvent<Color>) {\n    this.onSelectedColorEmit.emit(event.detail);\n  }\n\n  private chunks = (xs: Color[], y: Color[][] = []): Color[][] => {\n    return xs?.length === 0 ? y : this.chunks(xs?.slice(this.chunksNum), y.concat([xs?.slice(0, this.chunksNum)]));\n  };\n\n  private calculateBoxCount = () => {\n    const modalWidth = this.modalEl.children && this.modalEl.children[0] && this.modalEl.children[0]?.clientWidth - this.padding;\n    const boxWidth = this.boxWidth;\n\n    const calc = Math.floor(modalWidth / boxWidth);\n\n    const boxesCount = calc;\n\n    if (!this.preloader) this.chunksNum = boxesCount;\n  };\n\n  private displayForMobile = () => {\n    if (window.innerWidth < this.mediumBreakpoint) {\n      this.boxWidth = this.boxMobileWidth;\n      this.padding = this.mobilePadding;\n      this.isMobile = true;\n    } else {\n      this.isMobile = false;\n      this.boxWidth = this.boxDesktopWidth;\n      this.padding = this.desktopPadding;\n    }\n  };\n\n  @Listen('resize', { target: 'window' })\n  handleResize() {\n    this.calculateBoxCount();\n    this.displayForMobile();\n  }\n\n  private sortColorsBySimilarity(colors: Color[]): Color[] {\n    if (colors?.length <= 1) return colors;\n\n    const sortedColors: Color[] = [];\n    const remainingColors = [...colors];\n\n    // Start with the first color\n    sortedColors.push(remainingColors.shift()!);\n\n    while (remainingColors?.length > 0) {\n      // Find the most similar color to the last color in sortedColors\n      const lastColor = sortedColors[sortedColors?.length - 1];\n      let mostSimilarIndex = 0;\n      let minDistance = Infinity;\n\n      remainingColors.forEach((color, index) => {\n        const distance = chroma.distance(lastColor.hex, color.hex, 'lab');\n        if (distance < minDistance) {\n          minDistance = distance;\n          mostSimilarIndex = index;\n        }\n      });\n\n      // Move the most similar color to sortedColors\n      sortedColors.push(remainingColors.splice(mostSimilarIndex, 1)[0]);\n    }\n\n    return sortedColors;\n  }\n\n  private getColorHueGroup(hex: string): string {\n    const color = chroma(hex);\n    const hue = color.get('hsl.h');\n    const saturation = color.get('hsl.s');\n    const lightness = color.get('hsl.l');\n\n    // Handle grayscale colors\n    if (saturation < 0.1) {\n      if (lightness < 0.2) return 'black';\n      if (lightness > 0.8) return 'white';\n      return 'gray';\n    }\n\n    // Group colors by hue ranges\n    if (hue >= 330 || hue < 30) return 'red';\n    if (hue >= 30 && hue < 90) return 'yellow';\n    if (hue >= 90 && hue < 150) return 'green';\n    if (hue >= 150 && hue < 210) return 'cyan';\n    if (hue >= 210 && hue < 270) return 'blue';\n    if (hue >= 270 && hue < 330) return 'magenta';\n\n    return 'other';\n  }\n\n  private sortColorsByHueAndSimilarity(colors: Color[]): Color[] {\n    if (colors?.length <= 1) return colors;\n\n    // Group valid colors by their hue family\n    const colorGroups: Record<string, Color[]> = {\n      red: [],\n      yellow: [],\n      green: [],\n      cyan: [],\n      blue: [],\n      magenta: [],\n      gray: [],\n      black: [],\n      white: [],\n      other: [],\n    };\n\n    colors.forEach(color => {\n      const group = this.getColorHueGroup(color.hex);\n      colorGroups[group].push(color);\n    });\n\n    // Sort each group by similarity\n    const sortedGroups: Color[][] = [];\n    const groupOrder = ['red', 'magenta', 'blue', 'cyan', 'green', 'yellow', 'gray', 'black', 'white', 'other'];\n\n    groupOrder.forEach(groupName => {\n      if (colorGroups[groupName].length > 0) {\n        sortedGroups.push(this.sortColorsBySimilarity(colorGroups[groupName]));\n      }\n    });\n\n    // Combine all sorted groups, then append invalid colors at the end\n    return sortedGroups.flat();\n  }\n\n  private async fetchColorsData({ reset = false } = {}) {\n    if (this.loading && !reset) return;\n    this.loading = true;\n\n    try {\n      const colors = await fetchColors(this.filters);\n\n      if (reset) {\n        // For new searches, sort all colors by hue and similarity\n        this.colorsList = this.sortColorsByHueAndSimilarity(colors);\n      } else {\n        // For pagination, combine and sort all colors\n        this.colorsList = this.sortColorsByHueAndSimilarity([...this.colorsList, ...colors]);\n      }\n\n      this.hasMore = colors.length >= limit;\n    } catch (error) {\n      console.error('Error fetching colors:', error);\n    } finally {\n      this.loading = false;\n    }\n  }\n\n  private async loadProductData() {\n    this.preloader = true;\n\n    const product = await fetchProductData({ shopName: this.shop, productName: this.product });\n\n    if (product) {\n      this.data = product;\n      this.filters = updateFilters(this.filters, { type: 'product', id: product.id });\n\n      // Fetch initial colors\n      await this.fetchColorsData();\n    }\n\n    this.preloader = false;\n  }\n\n  private async loadMoreColors() {\n    if (this.loading || !this.hasMore) return; // Prevent spam loading\n\n    this.filters = { ...this.filters, page: this.filters.page + 1 }; // Increase page for lazy loading\n\n    await this.fetchColorsData({ reset: false }); // Append results\n  }\n\n  private updateFilterAndFetch(newFilters: Partial<typeof this.filters>) {\n    if (!this.data?.id) return;\n\n    this.loading = true;\n\n    this.filters = updateFilters(this.filters, {\n      id: this.data.id,\n      sampleId: this.filters.sampleId,\n      colorName: this.filters.colorName,\n      ...newFilters,\n      page: 1,\n    });\n\n    this.fetchColorsData({ reset: true }).finally(() => {\n      this.loading = false;\n    });\n  }\n\n  async searchColor(event: CustomEvent) {\n    const query = event.detail?.trim();\n\n    this.updateFilterAndFetch({ colorName: query });\n  }\n\n  @Listen('colorFamilySelected')\n  handleColorFamilySelected(event: CustomEvent) {\n    this.currentColor = null;\n    if (event.detail === this.filters.colorFamily) {\n      this.filters = updateFilters(this.filters, { colorFamily: '' });\n      this.updateFilterAndFetch({ colorFamily: '' });\n    } else {\n      this.filters = updateFilters(this.filters, { colorFamily: event.detail });\n      this.updateFilterAndFetch({ colorFamily: event.detail });\n    }\n  }\n\n  @Listen('searchColors')\n  searchColorsHandler(event: CustomEvent) {\n    this.loading = true;\n    this.currentColor = null;\n    this.debouncedSearchColorsHandler(event);\n  }\n\n  private handleSampleSelect = (selectedSample?: any) => {\n    this.currentColor = null;\n    this.selectedCategory = selectedSample.value;\n\n    this.updateFilterAndFetch({ sampleId: selectedSample.value, colorFamily: '' });\n  };\n\n  handleScroll(_event: Event, modalContent: HTMLElement) {\n    if (this.loading || !this.hasMore) return;\n\n    const scrollTop = modalContent.scrollTop;\n    const scrollHeight = modalContent.scrollHeight;\n    const clientHeight = modalContent.clientHeight;\n\n    // Check if user scrolled to the bottom of the modal\n    if (scrollTop + clientHeight >= scrollHeight - 50) {\n      this.loadMoreColors();\n    }\n  }\n\n  private openSeletedColor() {\n    if (!this.colorsList || !this.selectedcolor) return;\n\n    if (!this.colorIsSelected) {\n      const result = this.chunks(this.colorsList)\n        .map((innerArray, arrayIndex) => {\n          const foundColor = innerArray.find(color => color.name.trim()?.toUpperCase() === this.selectedcolor?.trim()?.toUpperCase());\n\n          return foundColor ? { color: foundColor, index: arrayIndex } : null;\n        })\n        .filter(item => item !== null);\n\n      this.currentColor = result[0]?.color as any;\n      this.currentIndex = result[0]?.index as any;\n      this.colorIsSelected = true;\n    }\n  }\n\n  componentWillLoad() {\n    this.preloader = true;\n    setDataLayer({\n      shop: this.shop,\n      product: this.product,\n    });\n\n    this.loadProductData();\n  }\n\n  componentWillRender() {\n    this.displayForMobile();\n    this.calculateBoxCount();\n    this.colorTimer();\n    this.openSeletedColor();\n\n    const modalContent = this.modalEl.querySelector('.my-modal') as HTMLElement;\n    if (modalContent) {\n      modalContent.addEventListener('scroll', event => this.handleScroll(event, modalContent));\n    }\n  }\n\n  private resetColors() {\n    this.currentColor = null;\n    this.currentIndex = null;\n    this.colorIsSelected = false;\n  }\n\n  private resetAllFilters() {\n    // Reset current color selection\n    this.resetColors();\n\n    // Reset filters to initial state\n    this.filters = {\n      type: 'product',\n      id: this.data?.id || '',\n      productId: '',\n      page: 1,\n      colorNumber: '',\n      colorName: '',\n      colorFamily: '',\n      sampleId: '',\n    };\n\n    // Reset selected category\n    this.selectedCategory = null;\n\n    // Clear search text\n    this.clearSearchText.emit();\n\n    // Fetch colors with reset filters\n    this.fetchColorsData({ reset: true });\n  }\n\n  private resetSelectedCategory() {\n    this.resetColors();\n    this.colorIsSelected = false;\n    this.selectedCategory = null;\n    this.filters = updateFilters(this.filters, { sampleId: '' });\n    this.fetchColorsData({ reset: true });\n  }\n\n  render() {\n    return (\n      <div class={`my-modal`} onMouseEnter={() => this.handleReadyToClose(false)} onMouseLeave={() => this.handleReadyToClose(true)}>\n        {this.preloader && (\n          <div class={'loader'}>\n            <my-loader></my-loader>\n          </div>\n        )}\n        {!this.preloader && this.data && (\n          <modal-header\n            modalName={this.data.modalName}\n            modalLogo={this.data.modalLogo ? `${APIURL}/assets/${this.data.modalLogo}?access_token=${accessToken}` : null}\n            modalDescription={this.data.modalDescription}\n            shop={this.shop}\n            productName={this.data.name}\n            productSamples={this.data.productSamples}\n            selectedColorFamily={this.filters.colorFamily}\n            isMobile={this.isMobile}\n            onCloseModal={() => this.closeModalHandler()}\n            onSampleSelected={event => this.handleSampleSelect(event.detail)}\n            onOnLogoClick={() => this.resetAllFilters()}\n            onOnResetCategory={() => this.resetSelectedCategory()}\n          ></modal-header>\n        )}\n\n        <div class={'my-modal__wrapper'}>\n          {!this.preloader && (\n            <div class={'container_boxes'}>\n              {!this.loading && this.colorsList.length === 0 && (\n                <div class=\"not-found\">\n                  <p>Nie zaleziono wyników wyszukiwania pod danym hasłem.</p>\n                  <p> Wpisz inną nazwę bądź numer koloru lub skorzystaj z kolekcji kolorystycznych.</p>\n                </div>\n              )}\n              {this.colorsList?.length > 0 &&\n                this.chunks(this.colorsList).map((color: Color[], index: number) => {\n                  return (\n                    <div key={index} class=\"boxes\">\n                      <div class=\"boxes__list\">\n                        {color.map((c: Color) => (\n                          <my-colorbox\n                            key={c.id}\n                            onClick={() => {\n                              if (this.currentColor?.id === c.id) {\n                                this.currentColor = null;\n                              } else {\n                                this.currentColor = c;\n                              }\n                              this.currentIndex = index;\n                              setDataLayer({\n                                event: 'ColorClick',\n                                shop: this.shop,\n                                product: this.product,\n                                color: c.name,\n                              });\n                              this.clearInterval();\n                            }}\n                            color={c.hex}\n                            name={c.name}\n                            isActive={this.currentColor?.id === c.id}\n                            shop={this.shop}\n                            product={this.product}\n                            isImageInsteadHex={{\n                              isImageInsteadHex: c.imageInsteadHex,\n                              bigImage: c.bigImage,\n                            }}\n                          ></my-colorbox>\n                        ))}\n                      </div>\n\n                      {this.currentColor?.id && index === this.currentIndex && (\n                        <my-colorinfo\n                          currentColor={this.currentColor}\n                          shop={this.shop}\n                          product={this.product}\n                          data={this.data}\n                          isMobile={this.isMobile}\n                          infoBoxWidth={this.infoBoxWidth}\n                          baselink={this.baselink}\n                        ></my-colorinfo>\n                      )}\n                    </div>\n                  );\n                })}\n            </div>\n          )}\n          {this.loading && <my-loader></my-loader>}\n        </div>\n        {!this.preloader && this.isMobile && (\n          <button class=\"button\" onClick={() => this.closeModalHandler()}>\n            Zamknij\n          </button>\n        )}\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/modal/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Method, Element, Prop, Event, EventEmitter, h, State, Listen, Watch } from '@stencil/core';\nimport { APIURL, accessToken } from '../api';\nimport { setDataLayer } from '../../gtmUtils';\nimport { Color, Product } from '../../types';\nimport { fetchColors, fetchProductData, limit, updateFilters } from '../api/services';\nimport { debounce } from '../../utils';\nimport chroma from 'chroma-js';\n\ndeclare global {\n  interface Window {\n    dataLayer: Record<string, any>[];\n  }\n}\n\n@Component({\n  tag: 'my-modal',\n  styleUrl: 'index.scss',\n  assetsDirs: ['assets'],\n})\nexport class Modal {\n  private boxDesktopWidth = 130;\n  private boxMobileWidth = 70;\n  private desktopPadding = 75;\n  private mobilePadding = 35;\n  private mediumBreakpoint = 1024;\n  private colorTimerInterval: ReturnType<typeof setInterval> | undefined;\n\n  @Event({ bubbles: true, composed: true }) onSelectedColorEmit: EventEmitter<Color>;\n\n  @Event({ bubbles: true, composed: true }) clearSearchText: EventEmitter;\n  @Element() modalEl: HTMLElement;\n\n  @Prop() shop: string;\n  @Prop() product: string;\n  @Prop() baselink: string;\n  @Prop() selectedcolor: string | null;\n  @Prop() arrowDown = 'arrow_down.png';\n\n  @State() chunksNum = 12;\n  @State() data: Product | null = null;\n  @State() preloader = false;\n  @State() loading = false;\n  @State() currentColor: Color | null = null;\n  @State() currentIndex: number | null = null;\n  @State() infoBoxWidth: number | null = null;\n  @State() boxWidth: number = this.boxDesktopWidth; // box width with gap\n  @State() padding: number = this.desktopPadding;\n  @State() isMobile: boolean = false;\n  @State() showRange: boolean = false;\n  @State() colorCategories: string[] | null = null;\n  @State() selectedCategory: any = null;\n  @State() page = 1;\n  @State() colorIsSelected = false;\n  @State() colorsList: Color[] = [];\n  @State() hasMore = true;\n  @State() filters: any = {\n    type: 'product' as 'product' | 'sample' | 'number' | 'name' | 'sampleInProduct',\n    id: '',\n    productId: '',\n    page: 1,\n    colorNumber: '',\n    colorName: '',\n  };\n\n  debouncedSearchColorsHandler: (event: CustomEvent) => void;\n\n  constructor() {\n    this.debouncedSearchColorsHandler = debounce(this.searchColor.bind(this), 300);\n  }\n\n  @Watch('chunksNum')\n  setInfoBoxWidth(newValue: number) {\n    this.infoBoxWidth = newValue * this.boxWidth;\n  }\n\n  @Watch('data')\n  watchPropHandler(newValue: Product) {\n    if (newValue) {\n      this.filters = updateFilters(this.filters, { id: newValue.id, type: 'product' });\n      this.fetchColorsData();\n    }\n  }\n\n  private clearInterval = () => {\n    this.colorTimerInterval && clearInterval(this.colorTimerInterval);\n    this.colorTimerInterval = undefined;\n  };\n\n  private colorTimer = () => {\n    if (this.currentColor && this.currentColor.id) {\n      this.colorTimerInterval = setInterval(() => {\n        this.currentColor?.name &&\n          setDataLayer({\n            event: 'ColorTimer',\n            shop: this.shop,\n            product: this.product,\n            color: this.currentColor?.name,\n            timer: '10',\n          });\n      }, 10000);\n    } else {\n      this.clearInterval();\n    }\n  };\n\n  @Method()\n  async open() {\n    this.modalEl.style.display = 'block';\n  }\n  @Event() close: EventEmitter;\n  closeModalHandler() {\n    this.close.emit();\n  }\n\n  @Event() readyToCLose: EventEmitter;\n  handleReadyToClose(value: boolean) {\n    this.readyToCLose.emit({ observable: value });\n  }\n\n  @Listen('closeInfoBox')\n  closeInfoBoxHandler() {\n    this.currentColor = null;\n    this.currentIndex = null;\n  }\n\n  @Listen('onCurrentColor')\n  handleEmitColor(event: CustomEvent<Color>) {\n    this.onSelectedColorEmit.emit(event.detail);\n  }\n\n  private chunks = (xs: Color[], y: Color[][] = []): Color[][] => {\n    return xs?.length === 0 ? y : this.chunks(xs?.slice(this.chunksNum), y.concat([xs?.slice(0, this.chunksNum)]));\n  };\n\n  private calculateBoxCount = () => {\n    const modalWidth = this.modalEl.children && this.modalEl.children[0] && this.modalEl.children[0]?.clientWidth - this.padding;\n    const boxWidth = this.boxWidth;\n\n    const calc = Math.floor(modalWidth / boxWidth);\n\n    const boxesCount = calc;\n\n    if (!this.preloader) this.chunksNum = boxesCount;\n  };\n\n  private displayForMobile = () => {\n    if (window.innerWidth < this.mediumBreakpoint) {\n      this.boxWidth = this.boxMobileWidth;\n      this.padding = this.mobilePadding;\n      this.isMobile = true;\n    } else {\n      this.isMobile = false;\n      this.boxWidth = this.boxDesktopWidth;\n      this.padding = this.desktopPadding;\n    }\n  };\n\n  @Listen('resize', { target: 'window' })\n  handleResize() {\n    this.calculateBoxCount();\n    this.displayForMobile();\n  }\n\n  private sortColorsBySimilarity(colors: Color[]): Color[] {\n    if (colors?.length <= 1) return colors;\n\n    const sortedColors: Color[] = [];\n    const remainingColors = [...colors];\n\n    // Start with the first color\n    sortedColors.push(remainingColors.shift()!);\n\n    while (remainingColors?.length > 0) {\n      // Find the most similar color to the last color in sortedColors\n      const lastColor = sortedColors[sortedColors?.length - 1];\n      let mostSimilarIndex = 0;\n      let minDistance = Infinity;\n\n      remainingColors.forEach((color, index) => {\n        try {\n          // Validate hex colors before calculating distance\n          if (!color.hex || !lastColor.hex) {\n            return;\n          }\n\n          const distance = chroma.distance(lastColor.hex, color.hex, 'lab');\n          if (distance < minDistance) {\n            minDistance = distance;\n            mostSimilarIndex = index;\n          }\n        } catch (error) {\n          console.warn(`Error calculating color distance for ${color.hex}:`, error);\n          // Skip this color if it causes an error\n        }\n      });\n\n      // Move the most similar color to sortedColors\n      sortedColors.push(remainingColors.splice(mostSimilarIndex, 1)[0]);\n    }\n\n    return sortedColors;\n  }\n\n  private getColorHueGroup(hex: string): string {\n    try {\n      // Validate hex format and handle invalid colors\n      if (!hex || typeof hex !== 'string') {\n        return 'other';\n      }\n\n      // Basic hex validation\n      const cleanHex = hex.startsWith('#') ? hex : `#${hex}`;\n      if (!/^#[0-9A-Fa-f]{6}$/.test(cleanHex)) {\n        console.warn(`Invalid hex color format: ${hex}`);\n        return 'other';\n      }\n\n      const color = chroma(cleanHex);\n      const hue = color.get('hsl.h');\n      const saturation = color.get('hsl.s');\n      const lightness = color.get('hsl.l');\n\n      // Handle grayscale colors\n      if (saturation < 0.1) {\n        if (lightness < 0.2) return 'black';\n        if (lightness > 0.8) return 'white';\n        return 'gray';\n      }\n\n      // Group colors by hue ranges\n      if (hue >= 330 || hue < 30) return 'red';\n      if (hue >= 30 && hue < 90) return 'yellow';\n      if (hue >= 90 && hue < 150) return 'green';\n      if (hue >= 150 && hue < 210) return 'cyan';\n      if (hue >= 210 && hue < 270) return 'blue';\n      if (hue >= 270 && hue < 330) return 'magenta';\n\n      return 'other';\n    } catch (error) {\n      console.warn(`Error parsing color \"${hex}\":`, error);\n      return 'other';\n    }\n  }\n\n  private sortColorsByHueAndSimilarity(colors: Color[]): Color[] {\n    if (colors?.length <= 1) return colors;\n\n    // Filter out colors with invalid hex values\n    const validColors = colors.filter(color => {\n      if (!color.hex || typeof color.hex !== 'string') {\n        console.warn(`Color missing hex value:`, color);\n        return false;\n      }\n\n      const cleanHex = color.hex.startsWith('#') ? color.hex : `#${color.hex}`;\n      const isValid = /^#[0-9A-Fa-f]{6}$/.test(cleanHex);\n\n      if (!isValid) {\n        console.warn(`Invalid hex color format: ${color.hex} for color:`, color);\n      }\n\n      return isValid;\n    });\n\n    // Group valid colors by their hue family\n    const colorGroups: Record<string, Color[]> = {\n      red: [],\n      yellow: [],\n      green: [],\n      cyan: [],\n      blue: [],\n      magenta: [],\n      gray: [],\n      black: [],\n      white: [],\n      other: [],\n    };\n\n    validColors.forEach(color => {\n      const group = this.getColorHueGroup(color.hex);\n      colorGroups[group].push(color);\n    });\n\n    // Sort each group by similarity\n    const sortedGroups: Color[][] = [];\n    const groupOrder = ['red', 'magenta', 'blue', 'cyan', 'green', 'yellow', 'gray', 'black', 'white', 'other'];\n\n    groupOrder.forEach(groupName => {\n      if (colorGroups[groupName].length > 0) {\n        sortedGroups.push(this.sortColorsBySimilarity(colorGroups[groupName]));\n      }\n    });\n\n    // Combine all sorted groups\n    return sortedGroups.flat();\n  }\n\n  private async fetchColorsData({ reset = false } = {}) {\n    if (this.loading && !reset) return;\n    this.loading = true;\n\n    try {\n      const colors = await fetchColors(this.filters);\n\n      if (reset) {\n        // For new searches, sort all colors by hue and similarity\n        this.colorsList = this.sortColorsByHueAndSimilarity(colors);\n      } else {\n        // For pagination, combine and sort all colors\n        this.colorsList = this.sortColorsByHueAndSimilarity([...this.colorsList, ...colors]);\n      }\n\n      this.hasMore = colors.length >= limit;\n    } catch (error) {\n      console.error('Error fetching colors:', error);\n    } finally {\n      this.loading = false;\n    }\n  }\n\n  private async loadProductData() {\n    this.preloader = true;\n\n    const product = await fetchProductData({ shopName: this.shop, productName: this.product });\n\n    if (product) {\n      this.data = product;\n      this.filters = updateFilters(this.filters, { type: 'product', id: product.id });\n\n      // Fetch initial colors\n      await this.fetchColorsData();\n    }\n\n    this.preloader = false;\n  }\n\n  private async loadMoreColors() {\n    if (this.loading || !this.hasMore) return; // Prevent spam loading\n\n    this.filters = { ...this.filters, page: this.filters.page + 1 }; // Increase page for lazy loading\n\n    await this.fetchColorsData({ reset: false }); // Append results\n  }\n\n  private updateFilterAndFetch(newFilters: Partial<typeof this.filters>) {\n    if (!this.data?.id) return;\n\n    this.loading = true;\n\n    this.filters = updateFilters(this.filters, {\n      id: this.data.id,\n      sampleId: this.filters.sampleId,\n      colorName: this.filters.colorName,\n      ...newFilters,\n      page: 1,\n    });\n\n    this.fetchColorsData({ reset: true }).finally(() => {\n      this.loading = false;\n    });\n  }\n\n  async searchColor(event: CustomEvent) {\n    const query = event.detail?.trim();\n\n    this.updateFilterAndFetch({ colorName: query });\n  }\n\n  @Listen('colorFamilySelected')\n  handleColorFamilySelected(event: CustomEvent) {\n    this.currentColor = null;\n    if (event.detail === this.filters.colorFamily) {\n      this.filters = updateFilters(this.filters, { colorFamily: '' });\n      this.updateFilterAndFetch({ colorFamily: '' });\n    } else {\n      this.filters = updateFilters(this.filters, { colorFamily: event.detail });\n      this.updateFilterAndFetch({ colorFamily: event.detail });\n    }\n  }\n\n  @Listen('searchColors')\n  searchColorsHandler(event: CustomEvent) {\n    this.loading = true;\n    this.currentColor = null;\n    this.debouncedSearchColorsHandler(event);\n  }\n\n  private handleSampleSelect = (selectedSample?: any) => {\n    this.currentColor = null;\n    this.selectedCategory = selectedSample.value;\n\n    this.updateFilterAndFetch({ sampleId: selectedSample.value, colorFamily: '' });\n  };\n\n  handleScroll(_event: Event, modalContent: HTMLElement) {\n    if (this.loading || !this.hasMore) return;\n\n    const scrollTop = modalContent.scrollTop;\n    const scrollHeight = modalContent.scrollHeight;\n    const clientHeight = modalContent.clientHeight;\n\n    // Check if user scrolled to the bottom of the modal\n    if (scrollTop + clientHeight >= scrollHeight - 50) {\n      this.loadMoreColors();\n    }\n  }\n\n  private openSeletedColor() {\n    if (!this.colorsList || !this.selectedcolor) return;\n\n    if (!this.colorIsSelected) {\n      const result = this.chunks(this.colorsList)\n        .map((innerArray, arrayIndex) => {\n          const foundColor = innerArray.find(color => color.name.trim()?.toUpperCase() === this.selectedcolor?.trim()?.toUpperCase());\n\n          return foundColor ? { color: foundColor, index: arrayIndex } : null;\n        })\n        .filter(item => item !== null);\n\n      this.currentColor = result[0]?.color as any;\n      this.currentIndex = result[0]?.index as any;\n      this.colorIsSelected = true;\n    }\n  }\n\n  componentWillLoad() {\n    this.preloader = true;\n    setDataLayer({\n      shop: this.shop,\n      product: this.product,\n    });\n\n    this.loadProductData();\n  }\n\n  componentWillRender() {\n    this.displayForMobile();\n    this.calculateBoxCount();\n    this.colorTimer();\n    this.openSeletedColor();\n\n    const modalContent = this.modalEl.querySelector('.my-modal') as HTMLElement;\n    if (modalContent) {\n      modalContent.addEventListener('scroll', event => this.handleScroll(event, modalContent));\n    }\n  }\n\n  private resetColors() {\n    this.currentColor = null;\n    this.currentIndex = null;\n    this.colorIsSelected = false;\n  }\n\n  private resetAllFilters() {\n    // Reset current color selection\n    this.resetColors();\n\n    // Reset filters to initial state\n    this.filters = {\n      type: 'product',\n      id: this.data?.id || '',\n      productId: '',\n      page: 1,\n      colorNumber: '',\n      colorName: '',\n      colorFamily: '',\n      sampleId: '',\n    };\n\n    // Reset selected category\n    this.selectedCategory = null;\n\n    // Clear search text\n    this.clearSearchText.emit();\n\n    // Fetch colors with reset filters\n    this.fetchColorsData({ reset: true });\n  }\n\n  private resetSelectedCategory() {\n    this.resetColors();\n    this.colorIsSelected = false;\n    this.selectedCategory = null;\n    this.filters = updateFilters(this.filters, { sampleId: '' });\n    this.fetchColorsData({ reset: true });\n  }\n\n  render() {\n    return (\n      <div class={`my-modal`} onMouseEnter={() => this.handleReadyToClose(false)} onMouseLeave={() => this.handleReadyToClose(true)}>\n        {this.preloader && (\n          <div class={'loader'}>\n            <my-loader></my-loader>\n          </div>\n        )}\n        {!this.preloader && this.data && (\n          <modal-header\n            modalName={this.data.modalName}\n            modalLogo={this.data.modalLogo ? `${APIURL}/assets/${this.data.modalLogo}?access_token=${accessToken}` : null}\n            modalDescription={this.data.modalDescription}\n            shop={this.shop}\n            productName={this.data.name}\n            productSamples={this.data.productSamples}\n            selectedColorFamily={this.filters.colorFamily}\n            isMobile={this.isMobile}\n            onCloseModal={() => this.closeModalHandler()}\n            onSampleSelected={event => this.handleSampleSelect(event.detail)}\n            onOnLogoClick={() => this.resetAllFilters()}\n            onOnResetCategory={() => this.resetSelectedCategory()}\n          ></modal-header>\n        )}\n\n        <div class={'my-modal__wrapper'}>\n          {!this.preloader && (\n            <div class={'container_boxes'}>\n              {!this.loading && this.colorsList.length === 0 && (\n                <div class=\"not-found\">\n                  <p>Nie zaleziono wyników wyszukiwania pod danym hasłem.</p>\n                  <p> Wpisz inną nazwę bądź numer koloru lub skorzystaj z kolekcji kolorystycznych.</p>\n                </div>\n              )}\n              {this.colorsList?.length > 0 &&\n                this.chunks(this.colorsList).map((color: Color[], index: number) => {\n                  return (\n                    <div key={index} class=\"boxes\">\n                      <div class=\"boxes__list\">\n                        {color.map((c: Color) => (\n                          <my-colorbox\n                            key={c.id}\n                            onClick={() => {\n                              if (this.currentColor?.id === c.id) {\n                                this.currentColor = null;\n                              } else {\n                                this.currentColor = c;\n                              }\n                              this.currentIndex = index;\n                              setDataLayer({\n                                event: 'ColorClick',\n                                shop: this.shop,\n                                product: this.product,\n                                color: c.name,\n                              });\n                              this.clearInterval();\n                            }}\n                            color={c.hex}\n                            name={c.name}\n                            isActive={this.currentColor?.id === c.id}\n                            shop={this.shop}\n                            product={this.product}\n                            isImageInsteadHex={{\n                              isImageInsteadHex: c.imageInsteadHex,\n                              bigImage: c.bigImage,\n                            }}\n                          ></my-colorbox>\n                        ))}\n                      </div>\n\n                      {this.currentColor?.id && index === this.currentIndex && (\n                        <my-colorinfo\n                          currentColor={this.currentColor}\n                          shop={this.shop}\n                          product={this.product}\n                          data={this.data}\n                          isMobile={this.isMobile}\n                          infoBoxWidth={this.infoBoxWidth}\n                          baselink={this.baselink}\n                        ></my-colorinfo>\n                      )}\n                    </div>\n                  );\n                })}\n            </div>\n          )}\n          {this.loading && <my-loader></my-loader>}\n        </div>\n        {!this.preloader && this.isMobile && (\n          <button class=\"button\" onClick={() => this.closeModalHandler()}>\n            Zamknij\n          </button>\n        )}\n      </div>\n    );\n  }\n}\n"]}

package/dist/components/index10.js

@@ -3610,10 +3610,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 +3632,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 +3704,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 +3716,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 } = {}) {