@ppg_pl/tinting 0.0.1 → 0.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (20) hide show
  1. package/dist/cjs/modal-header_9.cjs.entry.js +16 -12
  2. package/dist/cjs/modal-header_9.cjs.entry.js.map +1 -1
  3. package/dist/collection/components/modal/index.js +15 -11
  4. package/dist/collection/components/modal/index.js.map +1 -1
  5. package/dist/collection/components/select/index.css +5 -0
  6. package/dist/components/index10.js +15 -11
  7. package/dist/components/index10.js.map +1 -1
  8. package/dist/components/index4.js +1 -1
  9. package/dist/components/index4.js.map +1 -1
  10. package/dist/esm/modal-header_9.entry.js +16 -12
  11. package/dist/esm/modal-header_9.entry.js.map +1 -1
  12. package/dist/tinting/{p-fa35b3ef.entry.js → p-cd431d43.entry.js} +2 -2
  13. package/dist/tinting/p-cd431d43.entry.js.map +1 -0
  14. package/dist/tinting/tinting.esm.js +1 -1
  15. package/package.json +1 -1
  16. package/www/build/{p-fa35b3ef.entry.js → p-cd431d43.entry.js} +2 -2
  17. package/www/build/p-cd431d43.entry.js.map +1 -0
  18. package/www/build/tinting.esm.js +1 -1
  19. package/dist/tinting/p-fa35b3ef.entry.js.map +0 -1
  20. package/www/build/p-fa35b3ef.entry.js.map +0 -1
package/dist/collection/components/modal/index.js CHANGED
@@ -34,7 +34,7 @@ export class Modal {
34
34
  }
35
35
  };
36
36
  this.chunks = (xs, y = []) => {
37
- return xs.length === 0 ? y : this.chunks(xs.slice(this.chunksNum), y.concat([xs.slice(0, this.chunksNum)]));
37
+ 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)]));
38
38
  };
39
39
  this.calculateBoxCount = () => {
40
40
  var _a;
@@ -124,15 +124,15 @@ export class Modal {
124
124
  this.displayForMobile();
125
125
  }
126
126
  sortColorsBySimilarity(colors) {
127
- if (colors.length <= 1)
127
+ if ((colors === null || colors === void 0 ? void 0 : colors.length) <= 1)
128
128
  return colors;
129
129
  const sortedColors = [];
130
130
  const remainingColors = [...colors];
131
131
  // Start with the first color
132
132
  sortedColors.push(remainingColors.shift());
133
- while (remainingColors.length > 0) {
133
+ while ((remainingColors === null || remainingColors === void 0 ? void 0 : remainingColors.length) > 0) {
134
134
  // Find the most similar color to the last color in sortedColors
135
- const lastColor = sortedColors[sortedColors.length - 1];
135
+ const lastColor = sortedColors[(sortedColors === null || sortedColors === void 0 ? void 0 : sortedColors.length) - 1];
136
136
  let mostSimilarIndex = 0;
137
137
  let minDistance = Infinity;
138
138
  remainingColors.forEach((color, index) => {
@@ -148,6 +148,8 @@ export class Modal {
148
148
  return sortedColors;
149
149
  }
150
150
  getColorHueGroup(hex) {
151
+ if (!hex || !chroma.valid(hex))
152
+ return 'other';
151
153
  const color = chroma(hex);
152
154
  const hue = color.get('hsl.h');
153
155
  const saturation = color.get('hsl.s');
@@ -176,9 +178,12 @@ export class Modal {
176
178
  return 'other';
177
179
  }
178
180
  sortColorsByHueAndSimilarity(colors) {
179
- if (colors.length <= 1)
181
+ if ((colors === null || colors === void 0 ? void 0 : colors.length) <= 1)
180
182
  return colors;
181
- // Group colors by their hue family
183
+ // Separate valid and invalid hex colors
184
+ const validColors = colors.filter(c => typeof c.hex === 'string' && c.hex && chroma.valid(c.hex));
185
+ const invalidColors = colors.filter(c => !c.hex || !chroma.valid(c.hex));
186
+ // Group valid colors by their hue family
182
187
  const colorGroups = {
183
188
  red: [],
184
189
  yellow: [],
@@ -191,8 +196,7 @@ export class Modal {
191
196
  white: [],
192
197
  other: [],
193
198
  };
194
- // Sort colors into groups
195
- colors.forEach(color => {
199
+ validColors.forEach(color => {
196
200
  const group = this.getColorHueGroup(color.hex);
197
201
  colorGroups[group].push(color);
198
202
  });
@@ -204,11 +208,11 @@ export class Modal {
204
208
  sortedGroups.push(this.sortColorsBySimilarity(colorGroups[groupName]));
205
209
  }
206
210
  });
207
- // Combine all sorted groups
208
- return sortedGroups.flat();
211
+ // Combine all sorted groups, then append invalid colors at the end
212
+ return [...sortedGroups.flat(), ...invalidColors];
209
213
  }
210
214
  async fetchColorsData({ reset = false } = {}) {
211
- if (this.loading && !reset)
215
+ if (this.loading)
212
216
  return;
213
217
  this.loading = true;
214
218
  try {
package/dist/collection/components/modal/index.js.map CHANGED
@@ -1 +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 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 // Sort colors into groups\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\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"]}
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 if (!hex || !chroma.valid(hex)) return 'other';\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 // Separate valid and invalid hex colors\n const validColors = colors.filter(c => typeof c.hex === 'string' && c.hex && chroma.valid(c.hex));\n const invalidColors = colors.filter(c => !c.hex || !chroma.valid(c.hex));\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, then append invalid colors at the end\n return [...sortedGroups.flat(), ...invalidColors];\n }\n\n private async fetchColorsData({ reset = false } = {}) {\n if (this.loading) 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/collection/components/select/index.css CHANGED
@@ -74,4 +74,9 @@
74
74
  padding: 10px;
75
75
  text-align: center;
76
76
  color: #999;
77
+ }
78
+ @media (max-width: 768px) {
79
+ .select .dropdown {
80
+ position: relative;
81
+ }
77
82
  }
package/dist/components/index10.js CHANGED
@@ -3508,7 +3508,7 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
3508
3508
  }
3509
3509
  };
3510
3510
  this.chunks = (xs, y = []) => {
3511
- return xs.length === 0 ? y : this.chunks(xs.slice(this.chunksNum), y.concat([xs.slice(0, this.chunksNum)]));
3511
+ 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)]));
3512
3512
  };
3513
3513
  this.calculateBoxCount = () => {
3514
3514
  var _a;
@@ -3598,15 +3598,15 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
3598
3598
  this.displayForMobile();
3599
3599
  }
3600
3600
  sortColorsBySimilarity(colors) {
3601
- if (colors.length <= 1)
3601
+ if ((colors === null || colors === void 0 ? void 0 : colors.length) <= 1)
3602
3602
  return colors;
3603
3603
  const sortedColors = [];
3604
3604
  const remainingColors = [...colors];
3605
3605
  // Start with the first color
3606
3606
  sortedColors.push(remainingColors.shift());
3607
- while (remainingColors.length > 0) {
3607
+ while ((remainingColors === null || remainingColors === void 0 ? void 0 : remainingColors.length) > 0) {
3608
3608
  // Find the most similar color to the last color in sortedColors
3609
- const lastColor = sortedColors[sortedColors.length - 1];
3609
+ const lastColor = sortedColors[(sortedColors === null || sortedColors === void 0 ? void 0 : sortedColors.length) - 1];
3610
3610
  let mostSimilarIndex = 0;
3611
3611
  let minDistance = Infinity;
3612
3612
  remainingColors.forEach((color, index) => {
@@ -3622,6 +3622,8 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
3622
3622
  return sortedColors;
3623
3623
  }
3624
3624
  getColorHueGroup(hex) {
3625
+ if (!hex || !chroma.valid(hex))
3626
+ return 'other';
3625
3627
  const color = chroma(hex);
3626
3628
  const hue = color.get('hsl.h');
3627
3629
  const saturation = color.get('hsl.s');
@@ -3650,9 +3652,12 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
3650
3652
  return 'other';
3651
3653
  }
3652
3654
  sortColorsByHueAndSimilarity(colors) {
3653
- if (colors.length <= 1)
3655
+ if ((colors === null || colors === void 0 ? void 0 : colors.length) <= 1)
3654
3656
  return colors;
3655
- // Group colors by their hue family
3657
+ // Separate valid and invalid hex colors
3658
+ const validColors = colors.filter(c => typeof c.hex === 'string' && c.hex && chroma.valid(c.hex));
3659
+ const invalidColors = colors.filter(c => !c.hex || !chroma.valid(c.hex));
3660
+ // Group valid colors by their hue family
3656
3661
  const colorGroups = {
3657
3662
  red: [],
3658
3663
  yellow: [],
@@ -3665,8 +3670,7 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
3665
3670
  white: [],
3666
3671
  other: [],
3667
3672
  };
3668
- // Sort colors into groups
3669
- colors.forEach(color => {
3673
+ validColors.forEach(color => {
3670
3674
  const group = this.getColorHueGroup(color.hex);
3671
3675
  colorGroups[group].push(color);
3672
3676
  });
@@ -3678,11 +3682,11 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
3678
3682
  sortedGroups.push(this.sortColorsBySimilarity(colorGroups[groupName]));
3679
3683
  }
3680
3684
  });
3681
- // Combine all sorted groups
3682
- return sortedGroups.flat();
3685
+ // Combine all sorted groups, then append invalid colors at the end
3686
+ return [...sortedGroups.flat(), ...invalidColors];
3683
3687
  }
3684
3688
  async fetchColorsData({ reset = false } = {}) {
3685
- if (this.loading && !reset)
3689
+ if (this.loading)
3686
3690
  return;
3687
3691
  this.loading = true;
3688
3692
  try {