@ppg_pl/tinting 0.0.0 → 0.0.2

package/dist/components/index4.js

@@ -12,7 +12,7 @@ function debounce(func, wait) {
   };
 }
 
-const indexCss = "@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 = "@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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/index4.js.map

@@ -1 +1 @@
-{"file":"index4.js","mappings":"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","names":[],"sources":["./src/utils/index.ts","./src/components/select/index.scss?tag=my-select&encapsulation=scoped","./src/components/select/index.tsx"],"sourcesContent":["export function debounce(func: (...args: any[]) => void, wait: number) {\n  let timeout: ReturnType<typeof setTimeout>;\n\n  return function executedFunction(...args: any[]) {\n    const later = () => {\n      clearTimeout(timeout);\n      func(...args);\n    };\n\n    clearTimeout(timeout);\n    timeout = setTimeout(later, wait);\n  };\n}\n","@import '../../global/app.scss';\n\n.select {\n  position: relative;\n  width: 300px;\n\n  @media (max-width: $small) {\n    width: 100%;\n  }\n\n  .input-wrapper {\n    position: relative;\n    display: flex;\n    align-items: flex-start;\n  }\n\n  input {\n    font-size: 16px;\n    padding: 16px;\n    border-radius: 27.35px;\n    border: 1px solid #dfdfdf;\n    width: 100%;\n    color: #4c4c4c;\n    box-sizing: border-box;\n    padding-right: 50px;\n  }\n\n  button {\n    position: absolute;\n    right: 10px;\n    background: transparent;\n    border: none;\n    cursor: pointer;\n    width: 40px;\n    height: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    img {\n      transition: transform 0.3s ease;\n\n      &.rotated {\n        transform: rotate(180deg);\n      }\n    }\n  }\n\n  .dropdown {\n    position: absolute;\n    top: 100%;\n    left: 0;\n    width: 100%;\n    background: white;\n    border: 1px solid #dfdfdf;\n    border-radius: 5px;\n    max-height: 200px;\n    overflow-y: auto;\n    z-index: 1000;\n    padding: 0;\n    margin: 0;\n\n    li {\n      padding: 0;\n      margin: 0;\n      padding: 10px;\n      cursor: pointer;\n      list-style: none;\n      text-align: left;\n      &:hover {\n        background: #f5f5f5;\n      }\n    }\n\n    .no-results {\n      padding: 10px;\n      text-align: center;\n      color: #999;\n    }\n  }\n}\n","import { Component, Prop, h, State, Event, EventEmitter, Listen, Watch, Element } from '@stencil/core';\nimport { getAssetPath } from '@stencil/core';\nimport { debounce } from '../../utils';\n\n@Component({\n  tag: 'my-select',\n  styleUrl: 'index.scss',\n  assetsDirs: ['assets'],\n  scoped: true,\n})\nexport class MySelect {\n  @Element() el: HTMLElement;\n\n  @Prop() options: any[] = []; // List of selectable options\n  @Prop() placeholder: string = 'Select an option'; // Placeholder text\n  @Prop() isMobile: boolean = false;\n  @Prop() searchIcon: string = 'chevron.png'; // Search icon asset\n\n  @State() searchText: string = '';\n  @State() filteredOptions: any[] = [];\n  @State() showDropdown: boolean = false;\n  @State() selectedValue: string | null = null;\n  @Event() onReset: EventEmitter<void>;\n  @Event() selectValue: EventEmitter<{ key: string; value: number | null }>; // Emits selected value\n  @Event() inputValueChange: EventEmitter<string>; // Emits input changes for filtering\n\n  private defaultOption = { name: this.placeholder, id: null };\n\n  private debouncedSearch = debounce((value: string) => {\n    const optionsWithDefault = [this.defaultOption, ...this.options];\n    this.filteredOptions = optionsWithDefault.filter(option => option.name.toLowerCase().includes(value.toLowerCase()));\n    this.inputValueChange.emit(value);\n  }, 300);\n\n  private reset() {\n    this.onReset.emit();\n  }\n\n  componentWillLoad() {\n    this.filteredOptions = [this.defaultOption, ...this.options];\n  }\n\n  componentDidLoad() {\n    document.addEventListener('click', this.handleClickOutside);\n  }\n\n  disconnectedCallback() {\n    document.removeEventListener('click', this.handleClickOutside);\n  }\n\n  private handleClickOutside = (event: MouseEvent) => {\n    if (!this.el.contains(event.target as Node)) {\n      this.showDropdown = false;\n    }\n  };\n\n  private handleInput(event: Event) {\n    const value = (event.target as HTMLInputElement).value;\n    this.searchText = value;\n    this.showDropdown = true;\n    this.debouncedSearch(value);\n  }\n\n  private selectOption(option: { key: string; value: number | null }) {\n    if (option.value === null) {\n      this.selectedValue = null;\n      this.searchText = '';\n      this.reset();\n    } else {\n      this.selectedValue = option.key;\n      this.searchText = option.key;\n      this.selectValue.emit(option);\n    }\n    this.showDropdown = false;\n  }\n\n  private toggleDropdown() {\n    this.showDropdown = !this.showDropdown;\n  }\n\n  @Watch('options')\n  updateOptions(newOptions: any[]) {\n    this.filteredOptions = [this.defaultOption, ...newOptions];\n  }\n\n  @Listen('clearSearchText', { target: 'document' })\n  clearSearchTextHandler() {\n    this.searchText = '';\n    this.selectedValue = null;\n    this.reset();\n  }\n\n  render() {\n    return (\n      <div class=\"select\">\n        <div class=\"input-wrapper\">\n          <input type=\"text\" placeholder={this.placeholder} value={this.searchText} onInput={this.handleInput.bind(this)} onFocus={() => (this.showDropdown = true)} />\n          <button onClick={() => this.toggleDropdown()}>\n            <img src={getAssetPath(`./assets/${this.searchIcon}`)} alt=\"dropdown icon\" class={this.showDropdown ? 'rotated' : ''} />\n          </button>\n        </div>\n\n        {this.showDropdown && (\n          <ul class=\"dropdown\">\n            {this.filteredOptions.length > 0 ? (\n              this.filteredOptions.map(option => (\n                <li class={option.id === null ? 'default-option' : ''} onClick={() => this.selectOption({ key: option.name, value: option.id })}>\n                  {option.name}\n                </li>\n              ))\n            ) : (\n              <li class=\"no-results\">No results found</li>\n            )}\n          </ul>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"index4.js","mappings":"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","names":[],"sources":["./src/utils/index.ts","./src/components/select/index.scss?tag=my-select&encapsulation=scoped","./src/components/select/index.tsx"],"sourcesContent":["export function debounce(func: (...args: any[]) => void, wait: number) {\n  let timeout: ReturnType<typeof setTimeout>;\n\n  return function executedFunction(...args: any[]) {\n    const later = () => {\n      clearTimeout(timeout);\n      func(...args);\n    };\n\n    clearTimeout(timeout);\n    timeout = setTimeout(later, wait);\n  };\n}\n","@import '../../global/app.scss';\n\n.select {\n  position: relative;\n  width: 300px;\n\n  @media (max-width: $small) {\n    width: 100%;\n  }\n\n  .input-wrapper {\n    position: relative;\n    display: flex;\n    align-items: flex-start;\n  }\n\n  input {\n    font-size: 16px;\n    padding: 16px;\n    border-radius: 27.35px;\n    border: 1px solid #dfdfdf;\n    width: 100%;\n    color: #4c4c4c;\n    box-sizing: border-box;\n    padding-right: 50px;\n  }\n\n  button {\n    position: absolute;\n    right: 10px;\n    background: transparent;\n    border: none;\n    cursor: pointer;\n    width: 40px;\n    height: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    img {\n      transition: transform 0.3s ease;\n\n      &.rotated {\n        transform: rotate(180deg);\n      }\n    }\n  }\n\n  .dropdown {\n    position: absolute;\n    top: 100%;\n    left: 0;\n    width: 100%;\n    background: white;\n    border: 1px solid #dfdfdf;\n    border-radius: 5px;\n    max-height: 200px;\n    overflow-y: auto;\n    z-index: 1000;\n    padding: 0;\n    margin: 0;\n\n    li {\n      padding: 0;\n      margin: 0;\n      padding: 10px;\n      cursor: pointer;\n      list-style: none;\n      text-align: left;\n      &:hover {\n        background: #f5f5f5;\n      }\n    }\n\n    .no-results {\n      padding: 10px;\n      text-align: center;\n      color: #999;\n    }\n    @media (max-width: $small) {\n      position: relative;\n    }\n  }\n}\n","import { Component, Prop, h, State, Event, EventEmitter, Listen, Watch, Element } from '@stencil/core';\nimport { getAssetPath } from '@stencil/core';\nimport { debounce } from '../../utils';\n\n@Component({\n  tag: 'my-select',\n  styleUrl: 'index.scss',\n  assetsDirs: ['assets'],\n  scoped: true,\n})\nexport class MySelect {\n  @Element() el: HTMLElement;\n\n  @Prop() options: any[] = []; // List of selectable options\n  @Prop() placeholder: string = 'Select an option'; // Placeholder text\n  @Prop() isMobile: boolean = false;\n  @Prop() searchIcon: string = 'chevron.png'; // Search icon asset\n\n  @State() searchText: string = '';\n  @State() filteredOptions: any[] = [];\n  @State() showDropdown: boolean = false;\n  @State() selectedValue: string | null = null;\n  @Event() onReset: EventEmitter<void>;\n  @Event() selectValue: EventEmitter<{ key: string; value: number | null }>; // Emits selected value\n  @Event() inputValueChange: EventEmitter<string>; // Emits input changes for filtering\n\n  private defaultOption = { name: this.placeholder, id: null };\n\n  private debouncedSearch = debounce((value: string) => {\n    const optionsWithDefault = [this.defaultOption, ...this.options];\n    this.filteredOptions = optionsWithDefault.filter(option => option.name.toLowerCase().includes(value.toLowerCase()));\n    this.inputValueChange.emit(value);\n  }, 300);\n\n  private reset() {\n    this.onReset.emit();\n  }\n\n  componentWillLoad() {\n    this.filteredOptions = [this.defaultOption, ...this.options];\n  }\n\n  componentDidLoad() {\n    document.addEventListener('click', this.handleClickOutside);\n  }\n\n  disconnectedCallback() {\n    document.removeEventListener('click', this.handleClickOutside);\n  }\n\n  private handleClickOutside = (event: MouseEvent) => {\n    if (!this.el.contains(event.target as Node)) {\n      this.showDropdown = false;\n    }\n  };\n\n  private handleInput(event: Event) {\n    const value = (event.target as HTMLInputElement).value;\n    this.searchText = value;\n    this.showDropdown = true;\n    this.debouncedSearch(value);\n  }\n\n  private selectOption(option: { key: string; value: number | null }) {\n    if (option.value === null) {\n      this.selectedValue = null;\n      this.searchText = '';\n      this.reset();\n    } else {\n      this.selectedValue = option.key;\n      this.searchText = option.key;\n      this.selectValue.emit(option);\n    }\n    this.showDropdown = false;\n  }\n\n  private toggleDropdown() {\n    this.showDropdown = !this.showDropdown;\n  }\n\n  @Watch('options')\n  updateOptions(newOptions: any[]) {\n    this.filteredOptions = [this.defaultOption, ...newOptions];\n  }\n\n  @Listen('clearSearchText', { target: 'document' })\n  clearSearchTextHandler() {\n    this.searchText = '';\n    this.selectedValue = null;\n    this.reset();\n  }\n\n  render() {\n    return (\n      <div class=\"select\">\n        <div class=\"input-wrapper\">\n          <input type=\"text\" placeholder={this.placeholder} value={this.searchText} onInput={this.handleInput.bind(this)} onFocus={() => (this.showDropdown = true)} />\n          <button onClick={() => this.toggleDropdown()}>\n            <img src={getAssetPath(`./assets/${this.searchIcon}`)} alt=\"dropdown icon\" class={this.showDropdown ? 'rotated' : ''} />\n          </button>\n        </div>\n\n        {this.showDropdown && (\n          <ul class=\"dropdown\">\n            {this.filteredOptions.length > 0 ? (\n              this.filteredOptions.map(option => (\n                <li class={option.id === null ? 'default-option' : ''} onClick={() => this.selectOption({ key: option.name, value: option.id })}>\n                  {option.name}\n                </li>\n              ))\n            ) : (\n              <li class=\"no-results\">No results found</li>\n            )}\n          </ul>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/my-component.js

@@ -1,10 +1,9 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { d as defineCustomElement$a } from './index2.js';
-import { d as defineCustomElement$9 } from './index6.js';
-import { d as defineCustomElement$8 } from './index7.js';
-import { d as defineCustomElement$7 } from './index8.js';
-import { d as defineCustomElement$6 } from './index10.js';
-import { d as defineCustomElement$5 } from './index11.js';
+import { d as defineCustomElement$9 } from './index2.js';
+import { d as defineCustomElement$8 } from './index6.js';
+import { d as defineCustomElement$7 } from './index7.js';
+import { d as defineCustomElement$6 } from './index8.js';
+import { d as defineCustomElement$5 } from './index10.js';
 import { d as defineCustomElement$4 } from './index3.js';
 import { d as defineCustomElement$3 } from './index4.js';
 import { d as defineCustomElement$2 } from './index9.js';
@@ -191,7 +190,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["my-component", "modal-header", "my-backdrop", "my-colorbox", "my-colorinfo", "my-loader", "my-modal", "my-search", "my-select", "my-slider"];
+  const components = ["my-component", "modal-header", "my-backdrop", "my-colorbox", "my-colorinfo", "my-modal", "my-search", "my-select", "my-slider"];
   components.forEach(tagName => { switch (tagName) {
     case "my-component":
       if (!customElements.get(tagName)) {
@@ -199,26 +198,21 @@ function defineCustomElement$1() {
       }
       break;
     case "modal-header":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$a();
-      }
-      break;
-    case "my-backdrop":
       if (!customElements.get(tagName)) {
         defineCustomElement$9();
       }
       break;
-    case "my-colorbox":
+    case "my-backdrop":
       if (!customElements.get(tagName)) {
         defineCustomElement$8();
       }
       break;
-    case "my-colorinfo":
+    case "my-colorbox":
       if (!customElements.get(tagName)) {
         defineCustomElement$7();
       }
       break;
-    case "my-loader":
+    case "my-colorinfo":
       if (!customElements.get(tagName)) {
         defineCustomElement$6();
       }

package/dist/components/my-component.js.map

@@ -1 +1 @@
-{"file":"my-component.js","mappings":"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","names":["RenderTypes"],"sources":["./node_modules/@stencil/helmet/dist/util.js","./node_modules/@stencil/helmet/dist/dom.js","./node_modules/@stencil/helmet/dist/render.js","./node_modules/@stencil/helmet/dist/stencil-helmet.js","./src/components/component/index.scss?tag=my-component&encapsulation=scoped","./src/components/component/index.tsx"],"sourcesContent":["const isObject = (val) => !Array.isArray(val) && val !== null && typeof val === 'object';\nexport const hasAttributes = ({ vattrs }, requiredAttrs = []) => isObject(vattrs) && requiredAttrs.every(vattrs.hasOwnProperty.bind(vattrs));\nexport const isTextNode = ({ vtext }) => typeof vtext === 'string';\n// Can't use instanceof HTMLElement because MockHTMLElement during pre-rendering isn't\nexport const isElement = (val) => typeof val === 'object' && val.nodeType === 1 && typeof val.ownerDocument === 'object';\nexport const isElementArray = (val) => Array.isArray(val) && val.every(isElement);\n","import { isElement, isElementArray } from './util';\nexport const createElement = ({ vtag, vattrs, vchildren, vtext }, utils) => {\n    if (vtext != null) {\n        return document.createTextNode(vtext);\n    }\n    const element = document.createElement(vtag);\n    if (vattrs != null) {\n        for (const key in vattrs) {\n            element.setAttribute(key, vattrs[key]);\n        }\n    }\n    if (vchildren != null) {\n        utils.forEach(vchildren, (child) => {\n            element.appendChild(createElement(child, utils));\n        });\n    }\n    return element;\n};\nexport const shouldApplyToHead = (val) => isElement(val) || (isElementArray(val) && val.length === 2);\nexport const applyToHead = (element) => {\n    if (Array.isArray(element)) {\n        return document.head.replaceChild(element[0], element[1]);\n    }\n    return document.head.appendChild(element);\n};\n","import { hasAttributes, isTextNode } from './util';\nimport { createElement } from './dom';\nconst hasChildren = (node) => Array.isArray(node.vchildren);\nconst getFirstChild = (vchildren, utils) => {\n    let firstChild = null;\n    utils.forEach(vchildren || [], (c, i) => {\n        if (i === 0) {\n            firstChild = c;\n            return;\n        }\n    });\n    return firstChild;\n};\nfunction title(node, head, utils) {\n    const firstChild = getFirstChild(node.vchildren || [], utils);\n    if (firstChild && isTextNode(firstChild)) {\n        return [createElement(node, utils), head.querySelector('title')];\n    }\n}\nfunction meta(node, head, utils) {\n    var _a, _b, _c;\n    const namePropKey = ((_a = node.vattrs) === null || _a === void 0 ? void 0 : _a.property) ? 'property' : 'name';\n    const namePropValue = ((_b = node.vattrs) === null || _b === void 0 ? void 0 : _b.property) || ((_c = node.vattrs) === null || _c === void 0 ? void 0 : _c.name);\n    const existingElement = head.querySelector(`meta[${namePropKey}=\"${namePropValue}\"]`);\n    if (existingElement !== null) {\n        return [createElement(node, utils), existingElement];\n    }\n    else {\n        return createElement(node, utils);\n    }\n}\nfunction link(node, _head, utils) {\n    if (!hasChildren(node)) {\n        return createElement(node, utils);\n    }\n}\nfunction style(node, _head, utils) {\n    const firstChild = getFirstChild(node.vchildren || [], utils);\n    if (firstChild && isTextNode(firstChild)) {\n        return createElement(node, utils);\n    }\n}\nfunction script(node, _head, utils) {\n    if (hasChildren(node) || hasAttributes(node)) {\n        return createElement(node, utils);\n    }\n}\nfunction base(node, _head, utils) {\n    if (!hasChildren(node) && hasAttributes(node)) {\n        return createElement(node, utils);\n    }\n}\nconst template = createElement;\nconst noscript = createElement; // SSR only\nconst types = {\n    title,\n    meta,\n    link,\n    style,\n    script,\n    base,\n    template,\n    noscript,\n};\nexport default types;\n","import RenderTypes from './render';\nimport { shouldApplyToHead, applyToHead } from './dom';\nconst headExists = document && document.head;\nconst validTagNames = Object.keys(RenderTypes);\nconst isValidNode = (node) => validTagNames.indexOf(node.vtag) > -1;\nconst renderNode = (node, utils) => RenderTypes[node.vtag](node, document.head, utils);\nexport const Helmet = (_props, children, utils) => {\n    if (!headExists) {\n        return null;\n    }\n    const rendered = [];\n    const validChildren = [];\n    utils.forEach(children, (n) => {\n        if (isValidNode(n)) {\n            validChildren.push(n);\n            rendered.push(renderNode(n, utils));\n        }\n    });\n    // Build an HTMLElement for each provided virtual child\n    rendered\n        .filter(shouldApplyToHead)\n        .forEach(applyToHead);\n    return null;\n};\nexport default Helmet;\n",".tinting-wrapper {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n","import Helmet from '@stencil/helmet';\nimport { Component, Prop, Method, Element, State, Listen, h, Event, EventEmitter } from '@stencil/core';\nimport { Color } from '../../types';\n\n@Component({\n  tag: 'my-component',\n  styleUrl: 'index.scss',\n  scoped: true,\n})\nexport class MyModalBundle {\n  @Element() modalEl: HTMLElement;\n  @Event({ bubbles: true, composed: true }) onSelectedColor: EventEmitter<Color>;\n  @Prop() shop: string;\n  @Prop() product: string;\n  @Prop() baselink: string;\n  @Prop() colorname: string | null;\n\n  @State() show = false;\n  @State() readyToClose = false;\n\n  @Method()\n  async open() {\n    this.show = true;\n  }\n\n  @Method()\n  async close() {\n    this.show = false;\n  }\n\n  @Listen('readyToCLose')\n  setReadyToCloseHandler(value: CustomEvent) {\n    this.readyToClose = value.detail.observable;\n  }\n\n  @Listen('close')\n  closeModalHandler() {\n    this.show = false;\n    this.readyToClose = false;\n  }\n\n  @Listen('onSelectedColorEmit')\n  handleSelectedColor(event: CustomEvent<Color>) {\n    this.onSelectedColor.emit(event.detail);\n  }\n\n  render() {\n    let content = null;\n    if (this.show) {\n      content = [<my-backdrop></my-backdrop>, <my-modal shop={this.shop} product={this.product} baselink={this.baselink} selectedcolor={this.colorname}></my-modal>];\n    }\n    return (\n      <div\n        onClick={() => {\n          if (this.readyToClose) {\n            this.closeModalHandler();\n          }\n        }}\n      >\n        <Helmet>\n          <script>\n            {`(function (w, d, s, l, i) {\n        w[l] = w[l] || [];\n        w[l].push({ 'gtm.start': new Date().getTime(), 'event': 'gtm.js' });\n        var f = d.getElementsByTagName(s)[0],\n          j = d.createElement(s),\n          dl = l != 'dataLayer' ? '&l=' + l : '';\n        j.async = true;\n        j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;\n        f.parentNode.insertBefore(j, f);\n      })(window, document, 'script', 'dataLayer', 'GTM-537BV9VT');`}\n          </script>\n        </Helmet>\n        <div class=\"tinting-wrapper\">{content}</div>\n        <noscript>\n          <iframe src=\"https://www.googletagmanager.com/ns.html?id=GTM-537BV9VT\" height=\"0\" width=\"0\" style={{ display: 'none', visibility: 'hidden' }}></iframe>\n        </noscript>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"my-component.js","mappings":"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","names":["RenderTypes"],"sources":["./node_modules/@stencil/helmet/dist/util.js","./node_modules/@stencil/helmet/dist/dom.js","./node_modules/@stencil/helmet/dist/render.js","./node_modules/@stencil/helmet/dist/stencil-helmet.js","./src/components/component/index.scss?tag=my-component&encapsulation=scoped","./src/components/component/index.tsx"],"sourcesContent":["const isObject = (val) => !Array.isArray(val) && val !== null && typeof val === 'object';\nexport const hasAttributes = ({ vattrs }, requiredAttrs = []) => isObject(vattrs) && requiredAttrs.every(vattrs.hasOwnProperty.bind(vattrs));\nexport const isTextNode = ({ vtext }) => typeof vtext === 'string';\n// Can't use instanceof HTMLElement because MockHTMLElement during pre-rendering isn't\nexport const isElement = (val) => typeof val === 'object' && val.nodeType === 1 && typeof val.ownerDocument === 'object';\nexport const isElementArray = (val) => Array.isArray(val) && val.every(isElement);\n","import { isElement, isElementArray } from './util';\nexport const createElement = ({ vtag, vattrs, vchildren, vtext }, utils) => {\n    if (vtext != null) {\n        return document.createTextNode(vtext);\n    }\n    const element = document.createElement(vtag);\n    if (vattrs != null) {\n        for (const key in vattrs) {\n            element.setAttribute(key, vattrs[key]);\n        }\n    }\n    if (vchildren != null) {\n        utils.forEach(vchildren, (child) => {\n            element.appendChild(createElement(child, utils));\n        });\n    }\n    return element;\n};\nexport const shouldApplyToHead = (val) => isElement(val) || (isElementArray(val) && val.length === 2);\nexport const applyToHead = (element) => {\n    if (Array.isArray(element)) {\n        return document.head.replaceChild(element[0], element[1]);\n    }\n    return document.head.appendChild(element);\n};\n","import { hasAttributes, isTextNode } from './util';\nimport { createElement } from './dom';\nconst hasChildren = (node) => Array.isArray(node.vchildren);\nconst getFirstChild = (vchildren, utils) => {\n    let firstChild = null;\n    utils.forEach(vchildren || [], (c, i) => {\n        if (i === 0) {\n            firstChild = c;\n            return;\n        }\n    });\n    return firstChild;\n};\nfunction title(node, head, utils) {\n    const firstChild = getFirstChild(node.vchildren || [], utils);\n    if (firstChild && isTextNode(firstChild)) {\n        return [createElement(node, utils), head.querySelector('title')];\n    }\n}\nfunction meta(node, head, utils) {\n    var _a, _b, _c;\n    const namePropKey = ((_a = node.vattrs) === null || _a === void 0 ? void 0 : _a.property) ? 'property' : 'name';\n    const namePropValue = ((_b = node.vattrs) === null || _b === void 0 ? void 0 : _b.property) || ((_c = node.vattrs) === null || _c === void 0 ? void 0 : _c.name);\n    const existingElement = head.querySelector(`meta[${namePropKey}=\"${namePropValue}\"]`);\n    if (existingElement !== null) {\n        return [createElement(node, utils), existingElement];\n    }\n    else {\n        return createElement(node, utils);\n    }\n}\nfunction link(node, _head, utils) {\n    if (!hasChildren(node)) {\n        return createElement(node, utils);\n    }\n}\nfunction style(node, _head, utils) {\n    const firstChild = getFirstChild(node.vchildren || [], utils);\n    if (firstChild && isTextNode(firstChild)) {\n        return createElement(node, utils);\n    }\n}\nfunction script(node, _head, utils) {\n    if (hasChildren(node) || hasAttributes(node)) {\n        return createElement(node, utils);\n    }\n}\nfunction base(node, _head, utils) {\n    if (!hasChildren(node) && hasAttributes(node)) {\n        return createElement(node, utils);\n    }\n}\nconst template = createElement;\nconst noscript = createElement; // SSR only\nconst types = {\n    title,\n    meta,\n    link,\n    style,\n    script,\n    base,\n    template,\n    noscript,\n};\nexport default types;\n","import RenderTypes from './render';\nimport { shouldApplyToHead, applyToHead } from './dom';\nconst headExists = document && document.head;\nconst validTagNames = Object.keys(RenderTypes);\nconst isValidNode = (node) => validTagNames.indexOf(node.vtag) > -1;\nconst renderNode = (node, utils) => RenderTypes[node.vtag](node, document.head, utils);\nexport const Helmet = (_props, children, utils) => {\n    if (!headExists) {\n        return null;\n    }\n    const rendered = [];\n    const validChildren = [];\n    utils.forEach(children, (n) => {\n        if (isValidNode(n)) {\n            validChildren.push(n);\n            rendered.push(renderNode(n, utils));\n        }\n    });\n    // Build an HTMLElement for each provided virtual child\n    rendered\n        .filter(shouldApplyToHead)\n        .forEach(applyToHead);\n    return null;\n};\nexport default Helmet;\n",".tinting-wrapper {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n","import Helmet from '@stencil/helmet';\nimport { Component, Prop, Method, Element, State, Listen, h, Event, EventEmitter } from '@stencil/core';\nimport { Color } from '../../types';\n\n@Component({\n  tag: 'my-component',\n  styleUrl: 'index.scss',\n  scoped: true,\n})\nexport class MyModalBundle {\n  @Element() modalEl: HTMLElement;\n  @Event({ bubbles: true, composed: true }) onSelectedColor: EventEmitter<Color>;\n  @Prop() shop: string;\n  @Prop() product: string;\n  @Prop() baselink: string;\n  @Prop() colorname: string | null;\n\n  @State() show = false;\n  @State() readyToClose = false;\n\n  @Method()\n  async open() {\n    this.show = true;\n  }\n\n  @Method()\n  async close() {\n    this.show = false;\n  }\n\n  @Listen('readyToCLose')\n  setReadyToCloseHandler(value: CustomEvent) {\n    this.readyToClose = value.detail.observable;\n  }\n\n  @Listen('close')\n  closeModalHandler() {\n    this.show = false;\n    this.readyToClose = false;\n  }\n\n  @Listen('onSelectedColorEmit')\n  handleSelectedColor(event: CustomEvent<Color>) {\n    this.onSelectedColor.emit(event.detail);\n  }\n\n  render() {\n    let content = null;\n    if (this.show) {\n      content = [<my-backdrop></my-backdrop>, <my-modal shop={this.shop} product={this.product} baselink={this.baselink} selectedcolor={this.colorname}></my-modal>];\n    }\n    return (\n      <div\n        onClick={() => {\n          if (this.readyToClose) {\n            this.closeModalHandler();\n          }\n        }}\n      >\n        <Helmet>\n          <script>\n            {`(function (w, d, s, l, i) {\n        w[l] = w[l] || [];\n        w[l].push({ 'gtm.start': new Date().getTime(), 'event': 'gtm.js' });\n        var f = d.getElementsByTagName(s)[0],\n          j = d.createElement(s),\n          dl = l != 'dataLayer' ? '&l=' + l : '';\n        j.async = true;\n        j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;\n        f.parentNode.insertBefore(j, f);\n      })(window, document, 'script', 'dataLayer', 'GTM-537BV9VT');`}\n          </script>\n        </Helmet>\n        <div class=\"tinting-wrapper\">{content}</div>\n        <noscript>\n          <iframe src=\"https://www.googletagmanager.com/ns.html?id=GTM-537BV9VT\" height=\"0\" width=\"0\" style={{ display: 'none', visibility: 'hidden' }}></iframe>\n        </noscript>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/my-modal.js

@@ -1,4 +1,4 @@
-import { M as Modal, d as defineCustomElement$1 } from './index11.js';
+import { M as Modal, d as defineCustomElement$1 } from './index10.js';
 
 const MyModal = Modal;
 const defineCustomElement = defineCustomElement$1;

package/dist/esm/loader.js

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

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

@@ -2616,7 +2616,7 @@ const updateFilters = (filters, newFilter) => {
   return Object.assign(Object.assign({}, filters), newFilter);
 };
 
-const indexCss$8 = "@import url(\"https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap\"); .tinting-wrapper *{font-family:\"Poppins\", sans-serif}.my-modal__header{display:flex;justify-content:flex-start;flex-direction:column;margin-bottom:16px}@media (max-width: 905px){.my-modal__header{overflow-x:auto}}@media (max-width: 1024px){.my-modal__header{flex-direction:column;margin-bottom:12px;align-items:center;display:block}}.my-modal__header .image-wrapper{display:flex;margin-bottom:17px}@media (max-width: 768px){.my-modal__header .image-wrapper{margin-bottom:12px}}.my-modal__header .image-wrapper .modal-header__logo{max-width:400px;position:relative;max-height:130px;cursor:pointer}.my-modal__header .image-wrapper .modal-header__logo img{width:100%;height:100%;object-fit:cover}@media (max-width: 768px){.my-modal__header .image-wrapper .modal-header__logo{max-width:200px}}.my-modal__header .my-modal__see-more{margin-bottom:16px;text-align:left}.my-modal__header .search-wrapper{display:flex;align-items:center;justify-content:space-between;align-items:flex-end;gap:55px;align-items:center}@media (max-width: 1024px){.my-modal__header .search-wrapper{justify-content:center;width:92%;margin:0 auto;gap:21px}}@media (max-width: 768px){.my-modal__header .search-wrapper{flex-wrap:wrap}}.my-modal__header .search-wrapper .color-families{display:flex;gap:5px;flex-wrap:wrap;max-width:100%;overflow-x:auto;padding-bottom:5px;scrollbar-width:thin;scrollbar-color:#aaa transparent;flex-wrap:wrap}.my-modal__header .search-wrapper .color-families::-webkit-scrollbar{height:6px}.my-modal__header .search-wrapper .color-families::-webkit-scrollbar-thumb{background-color:#aaa;border-radius:3px}@media (max-width: 1024px){.my-modal__header .search-wrapper .color-families{flex-wrap:nowrap}}.my-modal__header .search-wrapper .color-families .color-family{flex:0 0 auto;width:125px;height:125px;display:flex;align-items:center;justify-content:center;color:#fff;position:relative;cursor:pointer;transition:transform 0.2s ease, box-shadow 0.2s ease}.my-modal__header .search-wrapper .color-families .color-family:hover{transform:scale(0.93);box-shadow:0 8px 16px rgba(0, 0, 0, 0.15), 0 4px 8px rgba(0, 0, 0, 0.1)}.my-modal__header .search-wrapper .color-families .color-family.active{transform:scale(0.93);box-shadow:0 8px 16px rgba(0, 0, 0, 0.15), 0 4px 8px rgba(0, 0, 0, 0.1)}@media (max-width: 1024px){.my-modal__header .search-wrapper .color-families .color-family{width:90px;height:90px;font-size:12px}}.my-modal__header .search-wrapper .color-families .color-family div{width:100%;height:100%;cursor:pointer;font-size:15px;z-index:-1;opacity:65%;position:absolute}.my-modal__header .search-wrapper .search-container{display:flex;align-items:baseline}.my-modal__header .search-wrapper .search-container .filters{display:flex;flex-direction:column;gap:10px}@media (max-width: 1024px){.my-modal__header .search-wrapper .search-container .filters{width:100%}}@media (max-width: 1024px){.my-modal__header .search-wrapper .search-container{width:100%}}@media (max-width: 1024px){.my-modal__header .search-wrapper .sc-my-search-h{width:100%;margin:0 auto}}.my-modal__header .search-wrapper .my-modal__close{position:absolute;top:50px;right:20px;background:transparent;border:none;margin-top:-20px}.my-modal__header .search-wrapper .my-modal__close>img{width:45px;height:45px;object-fit:cover;cursor:pointer}@media (max-width: 1024px){.my-modal__header .search-wrapper .my-modal__close{margin-top:0px;position:absolute;right:10px;top:10px}}";
+const indexCss$7 = "@import url(\"https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap\"); .tinting-wrapper *{font-family:\"Poppins\", sans-serif}.my-modal__header{display:flex;justify-content:flex-start;flex-direction:column;margin-bottom:16px}@media (max-width: 905px){.my-modal__header{overflow-x:auto}}@media (max-width: 1024px){.my-modal__header{flex-direction:column;margin-bottom:12px;align-items:center;display:block}}.my-modal__header .image-wrapper{display:flex;margin-bottom:17px}@media (max-width: 768px){.my-modal__header .image-wrapper{margin-bottom:12px}}.my-modal__header .image-wrapper .modal-header__logo{max-width:400px;position:relative;max-height:130px;cursor:pointer}.my-modal__header .image-wrapper .modal-header__logo img{width:100%;height:100%;object-fit:cover}@media (max-width: 768px){.my-modal__header .image-wrapper .modal-header__logo{max-width:200px}}.my-modal__header .my-modal__see-more{margin-bottom:16px;text-align:left}.my-modal__header .search-wrapper{display:flex;align-items:center;justify-content:space-between;align-items:flex-end;gap:55px;align-items:center}@media (max-width: 1024px){.my-modal__header .search-wrapper{justify-content:center;width:92%;margin:0 auto;gap:21px}}@media (max-width: 768px){.my-modal__header .search-wrapper{flex-wrap:wrap}}.my-modal__header .search-wrapper .color-families{display:flex;gap:5px;flex-wrap:wrap;max-width:100%;overflow-x:auto;padding-bottom:5px;scrollbar-width:thin;scrollbar-color:#aaa transparent;flex-wrap:wrap}.my-modal__header .search-wrapper .color-families::-webkit-scrollbar{height:6px}.my-modal__header .search-wrapper .color-families::-webkit-scrollbar-thumb{background-color:#aaa;border-radius:3px}@media (max-width: 1024px){.my-modal__header .search-wrapper .color-families{flex-wrap:nowrap}}.my-modal__header .search-wrapper .color-families .color-family{flex:0 0 auto;width:125px;height:125px;display:flex;align-items:center;justify-content:center;color:#fff;position:relative;cursor:pointer;transition:transform 0.2s ease, box-shadow 0.2s ease}.my-modal__header .search-wrapper .color-families .color-family:hover{transform:scale(0.93);box-shadow:0 8px 16px rgba(0, 0, 0, 0.15), 0 4px 8px rgba(0, 0, 0, 0.1)}.my-modal__header .search-wrapper .color-families .color-family.active{transform:scale(0.93);box-shadow:0 8px 16px rgba(0, 0, 0, 0.15), 0 4px 8px rgba(0, 0, 0, 0.1)}@media (max-width: 1024px){.my-modal__header .search-wrapper .color-families .color-family{width:90px;height:90px;font-size:12px}}.my-modal__header .search-wrapper .color-families .color-family div{width:100%;height:100%;cursor:pointer;font-size:15px;z-index:-1;opacity:65%;position:absolute}.my-modal__header .search-wrapper .search-container{display:flex;align-items:baseline}.my-modal__header .search-wrapper .search-container .filters{display:flex;flex-direction:column;gap:10px}@media (max-width: 1024px){.my-modal__header .search-wrapper .search-container .filters{width:100%}}@media (max-width: 1024px){.my-modal__header .search-wrapper .search-container{width:100%}}@media (max-width: 1024px){.my-modal__header .search-wrapper .sc-my-search-h{width:100%;margin:0 auto}}.my-modal__header .search-wrapper .my-modal__close{position:absolute;top:50px;right:20px;background:transparent;border:none;margin-top:-20px}.my-modal__header .search-wrapper .my-modal__close>img{width:45px;height:45px;object-fit:cover;cursor:pointer}@media (max-width: 1024px){.my-modal__header .search-wrapper .my-modal__close{margin-top:0px;position:absolute;right:10px;top:10px}}";
 
 const ModalHeader = class {
   constructor(hostRef) {
@@ -2704,9 +2704,9 @@ const ModalHeader = class {
   }
   static get assetsDirs() { return ["assets"]; }
 };
-ModalHeader.style = indexCss$8;
+ModalHeader.style = indexCss$7;
 
-const indexCss$7 = "@import url(\"https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap\"); .tinting-wrapper *{font-family:\"Poppins\", sans-serif}my-backdrop{width:100%;height:100%;background-color:rgba(0, 0, 0, 0.7);position:fixed;z-index:100;left:0;top:0}";
+const indexCss$6 = "@import url(\"https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap\"); .tinting-wrapper *{font-family:\"Poppins\", sans-serif}my-backdrop{width:100%;height:100%;background-color:rgba(0, 0, 0, 0.7);position:fixed;z-index:100;left:0;top:0}";
 
 const MyBackdrop = class {
   constructor(hostRef) {
@@ -2716,13 +2716,13 @@ const MyBackdrop = class {
     return null;
   }
 };
-MyBackdrop.style = indexCss$7;
+MyBackdrop.style = indexCss$6;
 
 const setDataLayer = (obj) => {
   return window.dataLayer.push(obj);
 };
 
-const indexCss$6 = "@import url(\"https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap\"); .tinting-wrapper *{font-family:\"Poppins\", sans-serif}.my-color-box{width:125px;height:125px;display:block;margin-bottom:5px;cursor:pointer;display:flex;flex-direction:column;justify-content:flex-end;position:relative}@media (max-width: 1024px){.my-color-box{width:65px;height:65px}}.my-color-box .color-name{width:100%;background-color:#fff;padding:15px 0px 10px;border-top-left-radius:15px;border-top-right-radius:15px;opacity:0;transition:0.3s opacity ease-in-out;font-size:10px;color:#232323;text-transform:lowercase}.my-color-box.active .color-name{opacity:1}.my-color-box.categoryactive{width:120px;height:115px}.my-color-box.categoryactive .color-name{opacity:1}@media (max-width: 1024px){.my-color-box.categoryactive{width:72px;height:72px}}.my-color-box:hover .color-name{opacity:1}";
+const indexCss$5 = "@import url(\"https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap\"); .tinting-wrapper *{font-family:\"Poppins\", sans-serif}.my-color-box{width:125px;height:125px;display:block;margin-bottom:5px;cursor:pointer;display:flex;flex-direction:column;justify-content:flex-end;position:relative}@media (max-width: 1024px){.my-color-box{width:65px;height:65px}}.my-color-box .color-name{width:100%;background-color:#fff;padding:15px 0px 10px;border-top-left-radius:15px;border-top-right-radius:15px;opacity:0;transition:0.3s opacity ease-in-out;font-size:10px;color:#232323;text-transform:lowercase}.my-color-box.active .color-name{opacity:1}.my-color-box.categoryactive{width:120px;height:115px}.my-color-box.categoryactive .color-name{opacity:1}@media (max-width: 1024px){.my-color-box.categoryactive{width:72px;height:72px}}.my-color-box:hover .color-name{opacity:1}";
 
 const MyColorBox = class {
   constructor(hostRef) {
@@ -2766,7 +2766,7 @@ const MyColorBox = class {
       } }, h("div", { class: "color-name" }, this.name)));
   }
 };
-MyColorBox.style = indexCss$6;
+MyColorBox.style = indexCss$5;
 
 const MyColorInfo = class {
   constructor(hostRef) {
@@ -2935,7 +2935,7 @@ const Helmet = (_props, children, utils) => {
     return null;
 };
 
-const indexCss$5 = ".tinting-wrapper.sc-my-component{display:flex;flex-direction:column;align-items:center;justify-content:center}";
+const indexCss$4 = ".tinting-wrapper.sc-my-component{display:flex;flex-direction:column;align-items:center;justify-content:center}";
 
 const MyModalBundle = class {
   constructor(hostRef) {
@@ -2986,19 +2986,7 @@ const MyModalBundle = class {
   }
   get modalEl() { return getElement(this); }
 };
-MyModalBundle.style = indexCss$5;
-
-const indexCss$4 = ".container.sc-my-loader{display:flex;justify-content:center;align-items:center;height:190px;overflow:hidden}.item.sc-my-loader{width:20px;height:20px;margin:3px;list-style-type:none;transition:0.5s all ease}.item.sc-my-loader:nth-child(1){animation:right-1 1s infinite alternate;background-color:#b8cf40;animation-delay:20ms}@keyframes right-1{0%{transform:translateY(-18px)}100%{transform:translateY(18px)}}.item.sc-my-loader:nth-child(2){animation:right-2 1s infinite alternate;background-color:#ee4b5e;animation-delay:40ms}@keyframes right-2{0%{transform:translateY(-21px)}100%{transform:translateY(21px)}}.item.sc-my-loader:nth-child(3){animation:right-3 1s infinite alternate;background-color:#ea0f47;animation-delay:60ms}@keyframes right-3{0%{transform:translateY(-24px)}100%{transform:translateY(24px)}}.item.sc-my-loader:nth-child(4){animation:right-4 1s infinite alternate;background-color:#d42840;animation-delay:80ms}@keyframes right-4{0%{transform:translateY(-27px)}100%{transform:translateY(27px)}}.item.sc-my-loader:nth-child(5){animation:right-5 1s infinite alternate;background-color:#8b2850;animation-delay:100ms}@keyframes right-5{0%{transform:translateY(-30px)}100%{transform:translateY(30px)}}";
-
-const MyLoader = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-  }
-  render() {
-    return (h("div", { class: "container" }, h("div", { class: "item" }), h("div", { class: "item" }), h("div", { class: "item" }), h("div", { class: "item" }), h("div", { class: "item" })));
-  }
-};
-MyLoader.style = indexCss$4;
+MyModalBundle.style = indexCss$4;
 
 function debounce$1(func, wait) {
   let timeout;
@@ -6511,7 +6499,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;
@@ -6601,15 +6589,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) => {
@@ -6625,6 +6613,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');
@@ -6653,9 +6643,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: [],
@@ -6668,8 +6661,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);
     });
@@ -6681,11 +6673,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 {
@@ -6934,7 +6926,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) {
@@ -12295,6 +12287,6 @@ const JcSwiper = class {
 };
 JcSwiper.style = indexCss;
 
-export { ModalHeader as modal_header, MyBackdrop as my_backdrop, MyColorBox as my_colorbox, MyColorInfo as my_colorinfo, MyModalBundle as my_component, MyLoader as my_loader, Modal as my_modal, MySearch as my_search, MySelect as my_select, JcSwiper as my_slider };
+export { ModalHeader as modal_header, MyBackdrop as my_backdrop, MyColorBox as my_colorbox, MyColorInfo as my_colorinfo, MyModalBundle as my_component, Modal as my_modal, MySearch as my_search, MySelect as my_select, JcSwiper as my_slider };
 
-//# sourceMappingURL=modal-header_10.entry.js.map
+//# sourceMappingURL=modal-header_9.entry.js.map