@ppg_pl/tinting 0.0.7 → 0.0.8

package/dist/components/index4.js

@@ -1,16 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, getAssetPath } from '@stencil/core/internal/client';
-
-function debounce(func, wait) {
-  let timeout;
-  return function executedFunction(...args) {
-    const later = () => {
-      clearTimeout(timeout);
-      func(...args);
-    };
-    clearTimeout(timeout);
-    timeout = setTimeout(later, wait);
-  };
-}
+import { d as debounce } from './index6.js';
 
 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}}";
 
@@ -116,6 +105,6 @@ function defineCustomElement() {
   } });
 }
 
-export { MySelect as M, debounce as a, defineCustomElement as d };
+export { MySelect as M, defineCustomElement as d };
 
 //# sourceMappingURL=index4.js.map

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    @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}
+{"file":"index4.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,wrEAAwrE;;MCU5rE,QAAQ;;;;;;;IAgBX,kBAAa,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC,WAAW,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC;IAErD,oBAAe,GAAG,QAAQ,CAAC,CAAC,KAAa;MAC/C,MAAM,kBAAkB,GAAG,CAAC,IAAI,CAAC,aAAa,EAAE,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC;MACjE,IAAI,CAAC,eAAe,GAAG,kBAAkB,CAAC,MAAM,CAAC,MAAM,IAAI,MAAM,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC;MACpH,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KACnC,EAAE,GAAG,CAAC,CAAC;IAkBA,uBAAkB,GAAG,CAAC,KAAiB;MAC7C,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EAAE;QAC3C,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;OAC3B;KACF,CAAC;mBAzCuB,EAAE;uBACG,kBAAkB;oBACpB,KAAK;sBACJ,aAAa;sBAEZ,EAAE;2BACE,EAAE;wBACH,KAAK;yBACE,IAAI;;EAapC,KAAK;IACX,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;GACrB;EAED,iBAAiB;IACf,IAAI,CAAC,eAAe,GAAG,CAAC,IAAI,CAAC,aAAa,EAAE,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC;GAC9D;EAED,gBAAgB;IACd,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;GAC7D;EAED,oBAAoB;IAClB,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;GAChE;EAQO,WAAW,CAAC,KAAY;IAC9B,MAAM,KAAK,GAAI,KAAK,CAAC,MAA2B,CAAC,KAAK,CAAC;IACvD,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;IACxB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;IACzB,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;GAC7B;EAEO,YAAY,CAAC,MAA6C;IAChE,IAAI,MAAM,CAAC,KAAK,KAAK,IAAI,EAAE;MACzB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;MAC1B,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC;MACrB,IAAI,CAAC,KAAK,EAAE,CAAC;KACd;SAAM;MACL,IAAI,CAAC,aAAa,GAAG,MAAM,CAAC,GAAG,CAAC;MAChC,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC,GAAG,CAAC;MAC7B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KAC/B;IACD,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;GAC3B;EAEO,cAAc;IACpB,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC;GACxC;EAGD,aAAa,CAAC,UAAiB;IAC7B,IAAI,CAAC,eAAe,GAAG,CAAC,IAAI,CAAC,aAAa,EAAE,GAAG,UAAU,CAAC,CAAC;GAC5D;EAGD,sBAAsB;IACpB,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC;IACrB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;IAC1B,IAAI,CAAC,KAAK,EAAE,CAAC;GACd;EAED,MAAM;IACJ,QACE,WAAK,KAAK,EAAC,QAAQ,IACjB,WAAK,KAAK,EAAC,eAAe,IACxB,aAAO,IAAI,EAAC,MAAM,EAAC,WAAW,EAAE,IAAI,CAAC,WAAW,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,OAAO,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,GAAI,EAC7J,cAAQ,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,EAAE,IAC1C,WAAK,GAAG,EAAE,YAAY,CAAC,YAAY,IAAI,CAAC,UAAU,EAAE,CAAC,EAAE,GAAG,EAAC,eAAe,EAAC,KAAK,EAAE,IAAI,CAAC,YAAY,GAAG,SAAS,GAAG,EAAE,GAAI,CACjH,CACL,EAEL,IAAI,CAAC,YAAY,KAChB,UAAI,KAAK,EAAC,UAAU,IACjB,IAAI,CAAC,eAAe,CAAC,MAAM,GAAG,CAAC,IAC9B,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,MAAM,KAC7B,UAAI,KAAK,EAAE,MAAM,CAAC,EAAE,KAAK,IAAI,GAAG,gBAAgB,GAAG,EAAE,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,CAAC,EAAE,GAAG,EAAE,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,MAAM,CAAC,EAAE,EAAE,CAAC,IAC5H,MAAM,CAAC,IAAI,CACT,CACN,CAAC,KAEF,UAAI,KAAK,EAAC,YAAY,uBAAsB,CAC7C,CACE,CACN,CACG,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/select/index.scss?tag=my-select&encapsulation=scoped","./src/components/select/index.tsx"],"sourcesContent":["@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/index6.js

@@ -1,31 +1,32 @@
-import { proxyCustomElement, HTMLElement } from '@stencil/core/internal/client';
-
-const indexCss = "@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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-  }
-  render() {
-    return null;
-  }
-  static get style() { return indexCss; }
-}, [0, "my-backdrop"]);
-function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["my-backdrop"];
-  components.forEach(tagName => { switch (tagName) {
-    case "my-backdrop":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, MyBackdrop);
-      }
-      break;
-  } });
+/**
+ * Returns true when a hex color is so light it is hard to distinguish from a
+ * white background (e.g. NCS S 0300-N ≈ #fafaf8). Uses perceived luminance.
+ * Accepts values with or without a leading '#', in 3- or 6-digit form.
+ */
+function isVeryLightColor(hex) {
+  var _a;
+  const cleaned = (_a = hex === null || hex === void 0 ? void 0 : hex.replace('#', '')) !== null && _a !== void 0 ? _a : '';
+  if (cleaned.length !== 6 && cleaned.length !== 3)
+    return false;
+  const short = cleaned.length === 3;
+  const r = parseInt(short ? cleaned[0] + cleaned[0] : cleaned.slice(0, 2), 16) / 255;
+  const g = parseInt(short ? cleaned[1] + cleaned[1] : cleaned.slice(2, 4), 16) / 255;
+  const b = parseInt(short ? cleaned[2] + cleaned[2] : cleaned.slice(4, 6), 16) / 255;
+  const luminance = 0.299 * r + 0.587 * g + 0.114 * b;
+  return luminance > 0.96;
+}
+function debounce(func, wait) {
+  let timeout;
+  return function executedFunction(...args) {
+    const later = () => {
+      clearTimeout(timeout);
+      func(...args);
+    };
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+  };
 }
 
-export { MyBackdrop as M, defineCustomElement as d };
+export { debounce as d, isVeryLightColor as i };
 
 //# sourceMappingURL=index6.js.map

package/dist/components/index6.js.map

@@ -1 +1 @@
-{"file":"index6.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,6ZAA6Z;;MCMja,UAAU;;;;;EACrB,MAAM;IACJ,OAAO,IAAI,CAAC;GACb;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/backdrop/index.scss?tag=my-backdrop","./src/components/backdrop/index.tsx"],"sourcesContent":["@import '../../global/app.scss';\n\nmy-backdrop {\n  width: 100%;\n  height: 100%;\n  background-color: $backdrop_black;\n  position: fixed;\n  z-index: 100;\n  left: 0;\n  top: 0;\n}\n","import { Component } from '@stencil/core';\n\n@Component({\n  tag: 'my-backdrop',\n  styleUrl: 'index.scss',\n})\nexport class MyBackdrop {\n  render() {\n    return null;\n  }\n}\n"],"version":3}
+{"file":"index6.js","mappings":"AAAA;;;;;SAKgB,gBAAgB,CAAC,GAA8B;;EAC7D,MAAM,OAAO,GAAG,MAAA,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,mCAAI,EAAE,CAAC;EAC5C,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC;IAAE,OAAO,KAAK,CAAC;EAC/D,MAAM,KAAK,GAAG,OAAO,CAAC,MAAM,KAAK,CAAC,CAAC;EACnC,MAAM,CAAC,GAAG,QAAQ,CAAC,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,GAAG,CAAC;EACpF,MAAM,CAAC,GAAG,QAAQ,CAAC,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,GAAG,CAAC;EACpF,MAAM,CAAC,GAAG,QAAQ,CAAC,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,GAAG,CAAC;EACpF,MAAM,SAAS,GAAG,KAAK,GAAG,CAAC,GAAG,KAAK,GAAG,CAAC,GAAG,KAAK,GAAG,CAAC,CAAC;EACpD,OAAO,SAAS,GAAG,IAAI,CAAC;AAC1B,CAAC;SAEe,QAAQ,CAAC,IAA8B,EAAE,IAAY;EACnE,IAAI,OAAsC,CAAC;EAE3C,OAAO,SAAS,gBAAgB,CAAC,GAAG,IAAW;IAC7C,MAAM,KAAK,GAAG;MACZ,YAAY,CAAC,OAAO,CAAC,CAAC;MACtB,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC;KACf,CAAC;IAEF,YAAY,CAAC,OAAO,CAAC,CAAC;IACtB,OAAO,GAAG,UAAU,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;GACnC,CAAC;AACJ;;;;","names":[],"sources":["./src/utils/index.ts"],"sourcesContent":["/**\n * Returns true when a hex color is so light it is hard to distinguish from a\n * white background (e.g. NCS S 0300-N ≈ #fafaf8). Uses perceived luminance.\n * Accepts values with or without a leading '#', in 3- or 6-digit form.\n */\nexport function isVeryLightColor(hex: string | null | undefined): boolean {\n  const cleaned = hex?.replace('#', '') ?? '';\n  if (cleaned.length !== 6 && cleaned.length !== 3) return false;\n  const short = cleaned.length === 3;\n  const r = parseInt(short ? cleaned[0] + cleaned[0] : cleaned.slice(0, 2), 16) / 255;\n  const g = parseInt(short ? cleaned[1] + cleaned[1] : cleaned.slice(2, 4), 16) / 255;\n  const b = parseInt(short ? cleaned[2] + cleaned[2] : cleaned.slice(4, 6), 16) / 255;\n  const luminance = 0.299 * r + 0.587 * g + 0.114 * b;\n  return luminance > 0.96;\n}\n\nexport 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"],"version":3}

package/dist/components/index7.js

@@ -1,75 +1,31 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { s as setDataLayer } from './gtmUtils.js';
-import { a as APIURL, b as accessToken } from './index5.js';
+import { proxyCustomElement, HTMLElement } from '@stencil/core/internal/client';
 
-const indexCss = "@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 = "@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 MyColorBox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const MyBackdrop = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    this.colorCheck = () => {
-      this.checkTimeout = setTimeout(() => {
-        setDataLayer({
-          event: 'ColorCheck',
-          shop: this.shop,
-          product: this.product,
-          color: this.name,
-        });
-      }, 2000);
-    };
-    this.colorUnCheck = () => {
-      if (this.checkTimeout)
-        clearTimeout(this.checkTimeout);
-      this.checkTimeout = undefined;
-    };
-    this.darkenColor = (color) => {
-      const red = parseInt(color[1] + color[2], 16) - 20;
-      const green = parseInt(color[3] + color[4], 16) - 20;
-      const blue = parseInt(color[5] + color[6], 16) - 20;
-      return `rgb(${red},${green},${blue})`;
-    };
-    this.color = undefined;
-    this.name = undefined;
-    this.shop = undefined;
-    this.product = undefined;
-    this.isActive = undefined;
-    this.isCategoryActive = undefined;
-    this.isImageInsteadHex = undefined;
   }
   render() {
-    var _a, _b, _c;
-    return (h("div", { onMouseEnter: () => this.colorCheck(), onMouseLeave: () => this.colorUnCheck(), class: `my-color-box ${this.isActive ? 'active' : ''} ${this.isCategoryActive ? 'categoryactive' : ''}`, style: {
-        backgroundSize: ((_a = this.isImageInsteadHex) === null || _a === void 0 ? void 0 : _a.isImageInsteadHex) ? 'cover' : '',
-        backgroundImage: ((_b = this.isImageInsteadHex) === null || _b === void 0 ? void 0 : _b.isImageInsteadHex) ? `url(${APIURL}/assets/${this.isImageInsteadHex.bigImage}?access_token=${accessToken})` : '',
-        background: ((_c = this.isImageInsteadHex) === null || _c === void 0 ? void 0 : _c.isImageInsteadHex) ? this.isImageInsteadHex.bigImage : this.color,
-        border: this.isCategoryActive ? `5px solid ${this.darkenColor(this.color)}` : '',
-      } }, h("div", { class: "color-name" }, this.name)));
+    return null;
   }
   static get style() { return indexCss; }
-}, [0, "my-colorbox", {
-    "color": [1],
-    "name": [1],
-    "shop": [1],
-    "product": [1],
-    "isActive": [4, "is-active"],
-    "isCategoryActive": [4, "is-category-active"],
-    "isImageInsteadHex": [16]
-  }]);
+}, [0, "my-backdrop"]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["my-colorbox"];
+  const components = ["my-backdrop"];
   components.forEach(tagName => { switch (tagName) {
-    case "my-colorbox":
+    case "my-backdrop":
       if (!customElements.get(tagName)) {
-        customElements.define(tagName, MyColorBox);
+        customElements.define(tagName, MyBackdrop);
       }
       break;
   } });
 }
 
-export { MyColorBox as M, defineCustomElement as d };
+export { MyBackdrop as M, defineCustomElement as d };
 
 //# sourceMappingURL=index7.js.map

package/dist/components/index7.js.map

@@ -1 +1 @@
-{"file":"index7.js","mappings":";;;;AAAA,MAAM,QAAQ,GAAG,+gCAA+gC;;MCSnhC,UAAU;;;;IAWrB,eAAU,GAAG;MACX,IAAI,CAAC,YAAY,GAAG,UAAU,CAAC;QAC7B,YAAY,CAAC;UACX,KAAK,EAAE,YAAY;UACnB,IAAI,EAAE,IAAI,CAAC,IAAI;UACf,OAAO,EAAE,IAAI,CAAC,OAAO;UACrB,KAAK,EAAE,IAAI,CAAC,IAAI;SACjB,CAAC,CAAC;OACJ,EAAE,IAAI,CAAC,CAAC;KACV,CAAC;IAEF,iBAAY,GAAG;MACb,IAAI,IAAI,CAAC,YAAY;QAAE,YAAY,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;MACvD,IAAI,CAAC,YAAY,GAAG,SAAS,CAAC;KAC/B,CAAC;IAEF,gBAAW,GAAG,CAAC,KAAa;MAC1B,MAAM,GAAG,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,EAAE,CAAC;MACnD,MAAM,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,EAAE,CAAC;MACrD,MAAM,IAAI,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,EAAE,CAAC;MACpD,OAAO,OAAO,GAAG,IAAI,KAAK,IAAI,IAAI,GAAG,CAAC;KACvC,CAAC;;;;;;;;;EAEF,MAAM;;IACJ,QACE,WACE,YAAY,EAAE,MAAM,IAAI,CAAC,UAAU,EAAE,EACrC,YAAY,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,EACvC,KAAK,EAAE,gBAAgB,IAAI,CAAC,QAAQ,GAAG,QAAQ,GAAG,EAAE,IAAI,IAAI,CAAC,gBAAgB,GAAG,gBAAgB,GAAG,EAAE,EAAE,EACvG,KAAK,EAAE;QACL,cAAc,EAAE,CAAA,MAAA,IAAI,CAAC,iBAAiB,0CAAE,iBAAiB,IAAG,OAAO,GAAG,EAAE;QACxE,eAAe,EAAE,CAAA,MAAA,IAAI,CAAC,iBAAiB,0CAAE,iBAAiB,IAAG,OAAO,MAAM,WAAW,IAAI,CAAC,iBAAiB,CAAC,QAAQ,iBAAiB,WAAW,GAAG,GAAG,EAAE;QACxJ,UAAU,EAAE,CAAA,MAAA,IAAI,CAAC,iBAAiB,0CAAE,iBAAiB,IAAG,IAAI,CAAC,iBAAiB,CAAC,QAAQ,GAAG,IAAI,CAAC,KAAK;QACpG,MAAM,EAAE,IAAI,CAAC,gBAAgB,GAAG,aAAa,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,GAAG,EAAE;OACjF,IAED,WAAK,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,IAAI,CAAO,CACrC,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/colorbox/index.scss?tag=my-colorbox","./src/components/colorbox/index.tsx"],"sourcesContent":["@import '../../global/app.scss';\n\n.my-color-box {\n  width: 125px;\n  height: 125px;\n  display: block;\n  margin-bottom: 5px;\n  cursor: pointer;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  position: relative;\n\n  @media (max-width: $medium) {\n    width: 65px;\n    height: 65px;\n  }\n  .color-name {\n    width: 100%;\n    background-color: $white;\n    padding: 15px 0px 10px;\n    border-top-left-radius: 15px;\n    border-top-right-radius: 15px;\n    opacity: 0;\n    transition: 0.3s opacity ease-in-out;\n    font-size: 10px;\n    color: $black;\n    text-transform: lowercase;\n  }\n  &.active {\n    .color-name {\n      opacity: 1;\n    }\n  }\n\n  &.categoryactive {\n    width: 120px;\n    height: 115px;\n    .color-name {\n      opacity: 1;\n    }\n\n    @media (max-width: $medium) {\n      width: 72px;\n      height: 72px;\n    }\n  }\n  &:hover {\n    .color-name {\n      opacity: 1;\n    }\n  }\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { setDataLayer } from '../../gtmUtils';\nimport { ColorBoxyIsImageInsteadHex } from '../../types';\nimport { APIURL, accessToken } from '../api';\n\n@Component({\n  tag: 'my-colorbox',\n  styleUrl: 'index.scss',\n})\nexport class MyColorBox {\n  private checkTimeout: ReturnType<typeof setTimeout> | undefined;\n\n  @Prop() color: string;\n  @Prop() name: string;\n  @Prop() shop: string;\n  @Prop() product: string;\n  @Prop() isActive?: boolean;\n  @Prop() isCategoryActive?: boolean;\n  @Prop() isImageInsteadHex?: ColorBoxyIsImageInsteadHex;\n\n  colorCheck = () => {\n    this.checkTimeout = setTimeout(() => {\n      setDataLayer({\n        event: 'ColorCheck',\n        shop: this.shop,\n        product: this.product,\n        color: this.name,\n      });\n    }, 2000);\n  };\n\n  colorUnCheck = () => {\n    if (this.checkTimeout) clearTimeout(this.checkTimeout);\n    this.checkTimeout = undefined;\n  };\n\n  darkenColor = (color: string) => {\n    const red = parseInt(color[1] + color[2], 16) - 20;\n    const green = parseInt(color[3] + color[4], 16) - 20;\n    const blue = parseInt(color[5] + color[6], 16) - 20;\n    return `rgb(${red},${green},${blue})`;\n  };\n\n  render() {\n    return (\n      <div\n        onMouseEnter={() => this.colorCheck()}\n        onMouseLeave={() => this.colorUnCheck()}\n        class={`my-color-box ${this.isActive ? 'active' : ''} ${this.isCategoryActive ? 'categoryactive' : ''}`}\n        style={{\n          backgroundSize: this.isImageInsteadHex?.isImageInsteadHex ? 'cover' : '',\n          backgroundImage: this.isImageInsteadHex?.isImageInsteadHex ? `url(${APIURL}/assets/${this.isImageInsteadHex.bigImage}?access_token=${accessToken})` : '',\n          background: this.isImageInsteadHex?.isImageInsteadHex ? this.isImageInsteadHex.bigImage : this.color,\n          border: this.isCategoryActive ? `5px solid ${this.darkenColor(this.color)}` : '',\n        }}\n      >\n        <div class=\"color-name\">{this.name}</div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"index7.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,6ZAA6Z;;MCMja,UAAU;;;;;EACrB,MAAM;IACJ,OAAO,IAAI,CAAC;GACb;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/backdrop/index.scss?tag=my-backdrop","./src/components/backdrop/index.tsx"],"sourcesContent":["@import '../../global/app.scss';\n\nmy-backdrop {\n  width: 100%;\n  height: 100%;\n  background-color: $backdrop_black;\n  position: fixed;\n  z-index: 100;\n  left: 0;\n  top: 0;\n}\n","import { Component } from '@stencil/core';\n\n@Component({\n  tag: 'my-backdrop',\n  styleUrl: 'index.scss',\n})\nexport class MyBackdrop {\n  render() {\n    return null;\n  }\n}\n"],"version":3}

package/dist/components/index8.js

@@ -1,165 +1,92 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, getAssetPath } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { s as setDataLayer } from './gtmUtils.js';
+import { i as isVeryLightColor } from './index6.js';
 import { a as APIURL, b as accessToken } from './index5.js';
-import { d as defineCustomElement$1 } from './index9.js';
 
-const MyColorInfo = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const indexCss = "@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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    this.onCurrentColor = createEvent(this, "onCurrentColor", 7);
-    this.addToBasket = createEvent(this, "addToBasket", 7);
-    this.closeInfoBox = createEvent(this, "closeInfoBox", 7);
-    this.loadingTimeout = null;
-    this.successTimeout = null;
-    this.goToProduct = () => {
-      var _a;
-      this.onCurrentColor.emit(this.currentColor);
-      this.currentColor &&
+    this.colorCheck = () => {
+      this.checkTimeout = setTimeout(() => {
         setDataLayer({
-          event: 'GoToProduct',
+          event: 'ColorCheck',
           shop: this.shop,
           product: this.product,
-          color: (_a = this.currentColor) === null || _a === void 0 ? void 0 : _a.name,
+          color: this.name,
         });
-      this.closeInfoBox.emit();
-    };
-    this.onCloseButtonClick = () => {
-      this.closeInfoBox.emit();
-    };
-    this.getHref = () => {
-      var _a, _b, _c, _d;
-      if (this.baselink) {
-        return `${this.baselink}/${(_b = (_a = this === null || this === void 0 ? void 0 : this.currentColor.links) === null || _a === void 0 ? void 0 : _a.find((link) => (link === null || link === void 0 ? void 0 : link.shop) === this.shop)) === null || _b === void 0 ? void 0 : _b.path}`;
-      }
-      return (_d = (_c = this === null || this === void 0 ? void 0 : this.currentColor.links) === null || _c === void 0 ? void 0 : _c.find((link) => (link === null || link === void 0 ? void 0 : link.shop) === this.shop)) === null || _d === void 0 ? void 0 : _d.path;
-    };
-    this.renderSliderOrImage = () => {
-      var _a;
-      if (this.currentColor.imageInsteadHex) {
-        return h("img", { class: 'color-big-image', src: `${APIURL}/assets/${this.currentColor.bigImage}?access_token=${accessToken}`, alt: "color-image" });
-      }
-      else {
-        return h("my-slider", { color: this.currentColor.name, shop: this.shop, product: this.product, slides: (_a = this.data) === null || _a === void 0 ? void 0 : _a.images });
-      }
+      }, 2000);
     };
-    this.capitalizeFirstLetter = (string) => {
-      return string.charAt(0).toUpperCase() + string.slice(1).toLocaleLowerCase();
+    this.colorUnCheck = () => {
+      if (this.checkTimeout)
+        clearTimeout(this.checkTimeout);
+      this.checkTimeout = undefined;
     };
-    this.isVeryLightBackground = () => {
-      var _a, _b;
-      if (this.currentColor.imageInsteadHex)
-        return true;
-      const hex = (_b = (_a = this.currentColor.hex) === null || _a === void 0 ? void 0 : _a.replace('#', '')) !== null && _b !== void 0 ? _b : '';
-      if (hex.length !== 6 && hex.length !== 3)
-        return false;
-      const r = parseInt(hex.length === 3 ? hex[0] + hex[0] : hex.slice(0, 2), 16) / 255;
-      const g = parseInt(hex.length === 3 ? hex[1] + hex[1] : hex.slice(2, 4), 16) / 255;
-      const b = parseInt(hex.length === 3 ? hex[2] + hex[2] : hex.slice(4, 6), 16) / 255;
-      const luminance = 0.299 * r + 0.587 * g + 0.114 * b;
-      return luminance > 0.96;
+    this.darkenColor = (color) => {
+      const red = parseInt(color[1] + color[2], 16) - 20;
+      const green = parseInt(color[3] + color[4], 16) - 20;
+      const blue = parseInt(color[5] + color[6], 16) - 20;
+      return `rgb(${red},${green},${blue})`;
     };
-    this.getButtonClass = () => {
-      if (this.currentColor.imageInsteadHex)
-        return 'brown';
-      return this.isVeryLightBackground() ? 'inverse' : '';
+    this.isLightSwatch = () => { var _a; return !((_a = this.isImageInsteadHex) === null || _a === void 0 ? void 0 : _a.isImageInsteadHex) && isVeryLightColor(this.color); };
+    // Active category keeps its 5px solid border (all active swatches share it, so
+    // alignment is consistent). In the normal grid we use an inset box-shadow
+    // instead of a border so light swatches gain a visible edge without changing
+    // their box size and skewing the grid.
+    this.getBorder = () => {
+      if (!this.isCategoryActive)
+        return '';
+      return `5px solid ${this.isLightSwatch() ? '#d9d9d9' : this.darkenColor(this.color)}`;
     };
-    this.handleAddToBasket = () => {
-      var _a;
-      if (!((_a = this.availableTesters) === null || _a === void 0 ? void 0 : _a.id_product_attribute))
-        return;
-      if (this.basketStatus !== 'idle')
-        return;
-      this.clearBasketTimeouts();
-      this.basketStatus = 'loading';
-      this.addToBasket.emit({
-        id: this.availableTesters.id_product_attribute,
-      });
-      this.loadingTimeout = setTimeout(() => {
-        this.basketStatus = 'success';
-        this.successTimeout = setTimeout(() => {
-          this.basketStatus = 'idle';
-        }, 2500);
-      }, 900);
+    this.getBoxShadow = () => {
+      if (this.isCategoryActive)
+        return '';
+      return this.isLightSwatch() ? 'inset 0 0 0 1px #d9d9d9' : '';
     };
-    this.currentColor = undefined;
+    this.color = undefined;
+    this.name = undefined;
     this.shop = undefined;
     this.product = undefined;
-    this.baselink = undefined;
-    this.availableTesters = undefined;
-    this.price = undefined;
-    this.data = null;
-    this.isMobile = false;
-    this.infoBoxWidth = undefined;
-    this.closeImage = 'close.png';
-    this.basketStatus = 'idle';
-  }
-  onColorChange(newColor, oldColor) {
-    if ((newColor === null || newColor === void 0 ? void 0 : newColor.name) === (oldColor === null || oldColor === void 0 ? void 0 : oldColor.name))
-      return;
-    this.resetBasketStatus();
-  }
-  disconnectedCallback() {
-    this.clearBasketTimeouts();
-  }
-  clearBasketTimeouts() {
-    if (this.loadingTimeout) {
-      clearTimeout(this.loadingTimeout);
-      this.loadingTimeout = null;
-    }
-    if (this.successTimeout) {
-      clearTimeout(this.successTimeout);
-      this.successTimeout = null;
-    }
-  }
-  resetBasketStatus() {
-    this.clearBasketTimeouts();
-    this.basketStatus = 'idle';
+    this.isActive = undefined;
+    this.isCategoryActive = undefined;
+    this.isImageInsteadHex = undefined;
   }
   render() {
-    var _a;
-    return (h("div", { class: `boxes__box-content ${this.currentColor.textWhite ? 'boxes__box-content__white' : ''}`, style: {
-        background: this.currentColor.imageInsteadHex ? 'white' : this.currentColor.hex,
-        maxWidth: `${this.infoBoxWidth && this.infoBoxWidth - 4}px`,
-      } }, this.isMobile && h("img", { class: 'closebtn', onClick: this.onCloseButtonClick, src: getAssetPath(`./assets/${this.closeImage}`), alt: "closebtn" }), h("div", { class: "boxes__box-content__info", style: {
-        maxWidth: this.isMobile ? `${this.infoBoxWidth && this.infoBoxWidth - 35}px` : ``,
-      } }, !this.isMobile && h("img", { class: 'closebtn', onClick: this.onCloseButtonClick, src: getAssetPath(`./assets/${this.closeImage}`), alt: "closebtn" }), h("h2", null, this.currentColor.name), !this.isMobile && h("h4", null, this.currentColor.number), h("div", { class: "boxes__box-content__info__value" }, h("div", { class: "divider" }), h("div", { class: "boxes__box-content__info__tester" }, h("div", { class: "divider" }), h("div", { class: "tester-text" }, h("h2", null, "Zamow tester"), h("p", null, "Sprawdz go na swojej scianie.")), h("div", { class: "tester-buy" }, h("div", { class: "price" }, this.price ? `${this.price} zl` : ''), this.isMobile && h("div", { class: 'divider' }), this.basketStatus !== 'success' && (h("button", { class: `button fit ${this.getButtonClass()} ${!this.availableTesters ? 'disabled' : ''} ${this.basketStatus === 'loading' ? 'is-loading' : ''}`, onClick: this.handleAddToBasket, disabled: !this.availableTesters || this.basketStatus === 'loading' }, h("span", { class: "button-content" }, h("span", { class: "shape-icon", "aria-hidden": "true" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "15", height: "16", viewBox: "0 0 15 16" }, h("path", { class: "shape-icon__path", transform: "translate(0.0867462 0)", d: "M13.246571 12.763281L11.931726 4.961875C11.801879 4.1936703 11.13567 3.6319427 10.35657 3.63375L9.7429771 3.63375L9.7429771 3.1025C9.7429771 1.3890365 8.35394 0 6.6404767 0C4.9270134 0 3.537977 1.3890365 3.537977 3.1025L3.537977 3.63375L2.9217269 3.63375C2.1426277 3.6319427 1.4764187 4.1936703 1.3465706 4.961875L0.034383144 12.763281C-0.086738147 13.483807 0.11555123 14.221112 0.58740741 14.778946C1.0592636 15.336781 1.7528107 15.658594 2.4834456 15.658594L10.797508 15.658594C11.528143 15.658594 12.22169 15.336781 12.693546 14.778946C13.165402 14.221112 13.367692 13.483807 13.246571 12.763281L13.246571 12.763281ZM4.3348517 3.0892186C4.3348517 1.8158572 5.3671155 0.78359371 6.6404767 0.78359371C7.9138384 0.78359371 8.9461021 1.8158572 8.9461021 3.0892186L8.9461021 3.6204686L4.3348517 3.6204686L4.3348517 3.0892186ZM12.08579 14.264063C11.765244 14.643165 11.293964 14.86172 10.797508 14.86172L2.4834456 14.86172C1.9871488 14.862442 1.5158025 14.644215 1.195269 14.265309C0.87473541 13.886404 0.73765546 13.385406 0.82063317 12.896093L2.1248519 5.092031C2.1891608 4.703371 2.5278175 4.4200282 2.9217269 4.4252396L3.5353208 4.4252396L3.5353208 5.5834374C3.5353208 5.8034883 3.7137072 5.9818749 3.9337583 5.9818749C4.1538091 5.9818749 4.3321958 5.8034883 4.3321958 5.5834374L4.3321958 4.4252396L8.9461021 4.4252396L8.9461021 5.5834374C8.9461021 5.8034883 9.1244888 5.9818749 9.3445396 5.9818749C9.5645905 5.9818749 9.7429771 5.8034883 9.7429771 5.5834374L9.7429771 4.4252396L10.359227 4.4252396C10.753137 4.4200282 11.091793 4.703371 11.156102 5.092031L12.46032 12.896093C12.542204 13.384947 12.40527 13.885097 12.08579 14.264063L12.08579 14.264063Z" }))), !this.availableTesters ? 'Tester obecnie niedostepny' : 'Dodaj do koszyka'), this.basketStatus === 'loading' && (h("span", { class: "spinner", "aria-hidden": "true" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24" }, h("path", { d: "M12 2 A10 10 0 1 1 2 12", fill: "none", stroke: "currentColor", "stroke-width": "2.5", "stroke-linecap": "round" })))))), this.basketStatus === 'success' && (h("div", { class: `basket-status basket-status--success ${this.getButtonClass()}`, role: "status", "aria-live": "polite" }, h("span", { class: "check-icon", "aria-hidden": "true" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24" }, h("path", { d: "M5 12.5l4.5 4.5L19 7.5", fill: "none", stroke: "currentColor", "stroke-width": "2.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("span", null, h("strong", null, "Dodano"), " do koszyka"))))), h("div", { class: "boxes__box-content__info__value-product" }, this.currentColor && ((_a = this.currentColor.links) === null || _a === void 0 ? void 0 : _a.find((link) => (link === null || link === void 0 ? void 0 : link.shop) === this.shop)) && (h("a", { onClick: this.goToProduct, href: this.getHref(), class: `button ${this.getButtonClass()}` }, "wybierz kolor"))))), h("div", { class: "boxes__box-content__slider" }, this.renderSliderOrImage())));
+    var _a, _b, _c;
+    return (h("div", { onMouseEnter: () => this.colorCheck(), onMouseLeave: () => this.colorUnCheck(), class: `my-color-box ${this.isActive ? 'active' : ''} ${this.isCategoryActive ? 'categoryactive' : ''}`, style: {
+        backgroundSize: ((_a = this.isImageInsteadHex) === null || _a === void 0 ? void 0 : _a.isImageInsteadHex) ? 'cover' : '',
+        backgroundImage: ((_b = this.isImageInsteadHex) === null || _b === void 0 ? void 0 : _b.isImageInsteadHex) ? `url(${APIURL}/assets/${this.isImageInsteadHex.bigImage}?access_token=${accessToken})` : '',
+        background: ((_c = this.isImageInsteadHex) === null || _c === void 0 ? void 0 : _c.isImageInsteadHex) ? this.isImageInsteadHex.bigImage : this.color,
+        border: this.getBorder(),
+        boxShadow: this.getBoxShadow(),
+      } }, h("div", { class: "color-name" }, this.name)));
   }
-  static get watchers() { return {
-    "currentColor": ["onColorChange"]
-  }; }
-}, [0, "my-colorinfo", {
-    "currentColor": [16],
+  static get style() { return indexCss; }
+}, [0, "my-colorbox", {
+    "color": [1],
+    "name": [1],
     "shop": [1],
     "product": [1],
-    "baselink": [1],
-    "availableTesters": [16],
-    "price": [2],
-    "data": [16],
-    "isMobile": [4, "is-mobile"],
-    "infoBoxWidth": [2, "info-box-width"],
-    "closeImage": [1, "close-image"],
-    "basketStatus": [32]
+    "isActive": [4, "is-active"],
+    "isCategoryActive": [4, "is-category-active"],
+    "isImageInsteadHex": [16]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["my-colorinfo", "my-slider"];
+  const components = ["my-colorbox"];
   components.forEach(tagName => { switch (tagName) {
-    case "my-colorinfo":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, MyColorInfo);
-      }
-      break;
-    case "my-slider":
+    case "my-colorbox":
       if (!customElements.get(tagName)) {
-        defineCustomElement$1();
+        customElements.define(tagName, MyColorBox);
       }
       break;
   } });
 }
 
-export { MyColorInfo as M, defineCustomElement as d };
+export { MyColorBox as M, defineCustomElement as d };
 
 //# sourceMappingURL=index8.js.map

package/dist/components/index8.js.map

@@ -1 +1 @@
-{"file":"index8.js","mappings":"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","names":[],"sources":["./src/components/colorinfo/index.tsx"],"sourcesContent":["import { Component, Prop, State, Watch, h, getAssetPath, Event, EventEmitter } from '@stencil/core';\nimport { setDataLayer } from '../../gtmUtils';\nimport { AvailableTester, Color, Link, Product } from '../../types';\nimport { APIURL, accessToken } from '../api';\n\n@Component({\n  tag: 'my-colorinfo',\n})\nexport class MyColorInfo {\n  @Prop() currentColor: Color;\n  @Prop() shop: string;\n  @Prop() product: string;\n  @Prop() baselink: string;\n  @Prop() availableTesters: AvailableTester | null;\n  @Prop() price: number | null;\n  @Prop() data: Product | null = null;\n  @Prop() isMobile: boolean = false;\n  @Prop() infoBoxWidth: number | null;\n  @Prop() closeImage = 'close.png';\n  @State() basketStatus: 'idle' | 'loading' | 'success' = 'idle';\n  private loadingTimeout: ReturnType<typeof setTimeout> | null = null;\n  private successTimeout: ReturnType<typeof setTimeout> | null = null;\n  @Event({ bubbles: true, composed: true }) onCurrentColor: EventEmitter<Color>;\n  @Event({ bubbles: true, composed: true }) addToBasket: EventEmitter<{ id: number }>;\n\n  @Event() closeInfoBox: EventEmitter;\n\n  @Watch('currentColor')\n  onColorChange(newColor: Color, oldColor: Color) {\n    if (newColor?.name === oldColor?.name) return;\n    this.resetBasketStatus();\n  }\n\n  disconnectedCallback() {\n    this.clearBasketTimeouts();\n  }\n\n  private clearBasketTimeouts() {\n    if (this.loadingTimeout) {\n      clearTimeout(this.loadingTimeout);\n      this.loadingTimeout = null;\n    }\n\n    if (this.successTimeout) {\n      clearTimeout(this.successTimeout);\n      this.successTimeout = null;\n    }\n  }\n\n  private resetBasketStatus() {\n    this.clearBasketTimeouts();\n    this.basketStatus = 'idle';\n  }\n\n  goToProduct = () => {\n    this.onCurrentColor.emit(this.currentColor);\n    this.currentColor &&\n      setDataLayer({\n        event: 'GoToProduct',\n        shop: this.shop,\n        product: this.product,\n        color: this.currentColor?.name,\n      });\n\n    this.closeInfoBox.emit();\n  };\n\n  onCloseButtonClick = () => {\n    this.closeInfoBox.emit();\n  };\n\n  getHref = () => {\n    if (this.baselink) {\n      return `${this.baselink}/${this?.currentColor.links?.find((link: Link) => link?.shop === this.shop)?.path}`;\n    }\n    return this?.currentColor.links?.find((link: Link) => link?.shop === this.shop)?.path;\n  };\n\n  renderSliderOrImage = () => {\n    if (this.currentColor.imageInsteadHex) {\n      return <img class={'color-big-image'} src={`${APIURL}/assets/${this.currentColor.bigImage}?access_token=${accessToken}`} alt=\"color-image\" />;\n    } else {\n      return <my-slider color={this.currentColor.name} shop={this.shop} product={this.product} slides={this.data?.images}></my-slider>;\n    }\n  };\n\n  capitalizeFirstLetter = (string: string) => {\n    return string.charAt(0).toUpperCase() + string.slice(1).toLocaleLowerCase();\n  };\n\n  isVeryLightBackground = (): boolean => {\n    if (this.currentColor.imageInsteadHex) return true;\n    const hex = this.currentColor.hex?.replace('#', '') ?? '';\n    if (hex.length !== 6 && hex.length !== 3) return false;\n    const r = parseInt(hex.length === 3 ? hex[0] + hex[0] : hex.slice(0, 2), 16) / 255;\n    const g = parseInt(hex.length === 3 ? hex[1] + hex[1] : hex.slice(2, 4), 16) / 255;\n    const b = parseInt(hex.length === 3 ? hex[2] + hex[2] : hex.slice(4, 6), 16) / 255;\n    const luminance = 0.299 * r + 0.587 * g + 0.114 * b;\n    return luminance > 0.96;\n  };\n\n  getButtonClass = () => {\n    if (this.currentColor.imageInsteadHex) return 'brown';\n    return this.isVeryLightBackground() ? 'inverse' : '';\n  };\n\n  handleAddToBasket = () => {\n    if (!this.availableTesters?.id_product_attribute) return;\n    if (this.basketStatus !== 'idle') return;\n\n    this.clearBasketTimeouts();\n    this.basketStatus = 'loading';\n    this.addToBasket.emit({\n      id: this.availableTesters.id_product_attribute,\n    });\n\n    this.loadingTimeout = setTimeout(() => {\n      this.basketStatus = 'success';\n      this.successTimeout = setTimeout(() => {\n        this.basketStatus = 'idle';\n      }, 2500);\n    }, 900);\n  };\n\n  render() {\n    return (\n      <div\n        class={`boxes__box-content ${this.currentColor.textWhite ? 'boxes__box-content__white' : ''}`}\n        style={{\n          background: this.currentColor.imageInsteadHex ? 'white' : this.currentColor.hex,\n          maxWidth: `${this.infoBoxWidth && this.infoBoxWidth - 4}px`,\n        }}\n      >\n        {this.isMobile && <img class={'closebtn'} onClick={this.onCloseButtonClick} src={getAssetPath(`./assets/${this.closeImage}`)} alt=\"closebtn\" />}\n        <div\n          class=\"boxes__box-content__info\"\n          style={{\n            maxWidth: this.isMobile ? `${this.infoBoxWidth && this.infoBoxWidth - 35}px` : ``,\n          }}\n        >\n          {!this.isMobile && <img class={'closebtn'} onClick={this.onCloseButtonClick} src={getAssetPath(`./assets/${this.closeImage}`)} alt=\"closebtn\" />}\n          <h2>{this.currentColor.name}</h2>\n          {!this.isMobile && <h4>{this.currentColor.number}</h4>}\n\n          <div class=\"boxes__box-content__info__value\">\n            <div class=\"divider\"></div>\n            <div class=\"boxes__box-content__info__tester\">\n              <div class=\"divider\"></div>\n              <div class=\"tester-text\">\n                <h2>Zamow tester</h2>\n                <p>Sprawdz go na swojej scianie.</p>\n              </div>\n              <div class=\"tester-buy\">\n                <div class=\"price\">{this.price ? `${this.price} zl` : ''}</div>\n                {this.isMobile && <div class={'divider'}></div>}\n                {this.basketStatus !== 'success' && (\n                  <button\n                    class={`button fit ${this.getButtonClass()} ${!this.availableTesters ? 'disabled' : ''} ${\n                      this.basketStatus === 'loading' ? 'is-loading' : ''\n                    }`}\n                    onClick={this.handleAddToBasket}\n                    disabled={!this.availableTesters || this.basketStatus === 'loading'}\n                  >\n                    <span class=\"button-content\">\n                      <span class=\"shape-icon\" aria-hidden=\"true\">\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"15\" height=\"16\" viewBox=\"0 0 15 16\">\n                          <path\n                            class=\"shape-icon__path\"\n                            transform=\"translate(0.0867462 0)\"\n                            d=\"M13.246571 12.763281L11.931726 4.961875C11.801879 4.1936703 11.13567 3.6319427 10.35657 3.63375L9.7429771 3.63375L9.7429771 3.1025C9.7429771 1.3890365 8.35394 0 6.6404767 0C4.9270134 0 3.537977 1.3890365 3.537977 3.1025L3.537977 3.63375L2.9217269 3.63375C2.1426277 3.6319427 1.4764187 4.1936703 1.3465706 4.961875L0.034383144 12.763281C-0.086738147 13.483807 0.11555123 14.221112 0.58740741 14.778946C1.0592636 15.336781 1.7528107 15.658594 2.4834456 15.658594L10.797508 15.658594C11.528143 15.658594 12.22169 15.336781 12.693546 14.778946C13.165402 14.221112 13.367692 13.483807 13.246571 12.763281L13.246571 12.763281ZM4.3348517 3.0892186C4.3348517 1.8158572 5.3671155 0.78359371 6.6404767 0.78359371C7.9138384 0.78359371 8.9461021 1.8158572 8.9461021 3.0892186L8.9461021 3.6204686L4.3348517 3.6204686L4.3348517 3.0892186ZM12.08579 14.264063C11.765244 14.643165 11.293964 14.86172 10.797508 14.86172L2.4834456 14.86172C1.9871488 14.862442 1.5158025 14.644215 1.195269 14.265309C0.87473541 13.886404 0.73765546 13.385406 0.82063317 12.896093L2.1248519 5.092031C2.1891608 4.703371 2.5278175 4.4200282 2.9217269 4.4252396L3.5353208 4.4252396L3.5353208 5.5834374C3.5353208 5.8034883 3.7137072 5.9818749 3.9337583 5.9818749C4.1538091 5.9818749 4.3321958 5.8034883 4.3321958 5.5834374L4.3321958 4.4252396L8.9461021 4.4252396L8.9461021 5.5834374C8.9461021 5.8034883 9.1244888 5.9818749 9.3445396 5.9818749C9.5645905 5.9818749 9.7429771 5.8034883 9.7429771 5.5834374L9.7429771 4.4252396L10.359227 4.4252396C10.753137 4.4200282 11.091793 4.703371 11.156102 5.092031L12.46032 12.896093C12.542204 13.384947 12.40527 13.885097 12.08579 14.264063L12.08579 14.264063Z\"\n                          />\n                        </svg>\n                      </span>\n                      {!this.availableTesters ? 'Tester obecnie niedostepny' : 'Dodaj do koszyka'}\n                    </span>\n                    {this.basketStatus === 'loading' && (\n                      <span class=\"spinner\" aria-hidden=\"true\">\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\">\n                          <path d=\"M12 2 A10 10 0 1 1 2 12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" />\n                        </svg>\n                      </span>\n                    )}\n                  </button>\n                )}\n                {this.basketStatus === 'success' && (\n                  <div class={`basket-status basket-status--success ${this.getButtonClass()}`} role=\"status\" aria-live=\"polite\">\n                    <span class=\"check-icon\" aria-hidden=\"true\">\n                      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\n                        <path d=\"M5 12.5l4.5 4.5L19 7.5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                      </svg>\n                    </span>\n                    <span>\n                      <strong>Dodano</strong> do koszyka\n                    </span>\n                  </div>\n                )}\n              </div>\n            </div>\n            <div class=\"boxes__box-content__info__value-product\">\n              {this.currentColor && this.currentColor.links?.find((link: Link) => link?.shop === this.shop) && (\n                <a onClick={this.goToProduct} href={this.getHref()} class={`button ${this.getButtonClass()}`}>\n                  wybierz kolor\n                </a>\n              )}\n            </div>\n          </div>\n        </div>\n        <div class=\"boxes__box-content__slider\">{this.renderSliderOrImage()}</div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"index8.js","mappings":";;;;;AAAA,MAAM,QAAQ,GAAG,+gCAA+gC;;MCUnhC,UAAU;;;;IAWrB,eAAU,GAAG;MACX,IAAI,CAAC,YAAY,GAAG,UAAU,CAAC;QAC7B,YAAY,CAAC;UACX,KAAK,EAAE,YAAY;UACnB,IAAI,EAAE,IAAI,CAAC,IAAI;UACf,OAAO,EAAE,IAAI,CAAC,OAAO;UACrB,KAAK,EAAE,IAAI,CAAC,IAAI;SACjB,CAAC,CAAC;OACJ,EAAE,IAAI,CAAC,CAAC;KACV,CAAC;IAEF,iBAAY,GAAG;MACb,IAAI,IAAI,CAAC,YAAY;QAAE,YAAY,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;MACvD,IAAI,CAAC,YAAY,GAAG,SAAS,CAAC;KAC/B,CAAC;IAEF,gBAAW,GAAG,CAAC,KAAa;MAC1B,MAAM,GAAG,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,EAAE,CAAC;MACnD,MAAM,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,EAAE,CAAC;MACrD,MAAM,IAAI,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,EAAE,CAAC;MACpD,OAAO,OAAO,GAAG,IAAI,KAAK,IAAI,IAAI,GAAG,CAAC;KACvC,CAAC;IAEM,kBAAa,GAAG,gBAAM,OAAA,EAAC,MAAA,IAAI,CAAC,iBAAiB,0CAAE,iBAAiB,CAAA,IAAI,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA,EAAA,CAAC;;;;;IAMjG,cAAS,GAAG;MAClB,IAAI,CAAC,IAAI,CAAC,gBAAgB;QAAE,OAAO,EAAE,CAAC;MACtC,OAAO,aAAa,IAAI,CAAC,aAAa,EAAE,GAAG,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;KACvF,CAAC;IAEM,iBAAY,GAAG;MACrB,IAAI,IAAI,CAAC,gBAAgB;QAAE,OAAO,EAAE,CAAC;MACrC,OAAO,IAAI,CAAC,aAAa,EAAE,GAAG,yBAAyB,GAAG,EAAE,CAAC;KAC9D,CAAC;;;;;;;;;EAEF,MAAM;;IACJ,QACE,WACE,YAAY,EAAE,MAAM,IAAI,CAAC,UAAU,EAAE,EACrC,YAAY,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,EACvC,KAAK,EAAE,gBAAgB,IAAI,CAAC,QAAQ,GAAG,QAAQ,GAAG,EAAE,IAAI,IAAI,CAAC,gBAAgB,GAAG,gBAAgB,GAAG,EAAE,EAAE,EACvG,KAAK,EAAE;QACL,cAAc,EAAE,CAAA,MAAA,IAAI,CAAC,iBAAiB,0CAAE,iBAAiB,IAAG,OAAO,GAAG,EAAE;QACxE,eAAe,EAAE,CAAA,MAAA,IAAI,CAAC,iBAAiB,0CAAE,iBAAiB,IAAG,OAAO,MAAM,WAAW,IAAI,CAAC,iBAAiB,CAAC,QAAQ,iBAAiB,WAAW,GAAG,GAAG,EAAE;QACxJ,UAAU,EAAE,CAAA,MAAA,IAAI,CAAC,iBAAiB,0CAAE,iBAAiB,IAAG,IAAI,CAAC,iBAAiB,CAAC,QAAQ,GAAG,IAAI,CAAC,KAAK;QACpG,MAAM,EAAE,IAAI,CAAC,SAAS,EAAE;QACxB,SAAS,EAAE,IAAI,CAAC,YAAY,EAAE;OAC/B,IAED,WAAK,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,IAAI,CAAO,CACrC,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/colorbox/index.scss?tag=my-colorbox","./src/components/colorbox/index.tsx"],"sourcesContent":["@import '../../global/app.scss';\n\n.my-color-box {\n  width: 125px;\n  height: 125px;\n  display: block;\n  margin-bottom: 5px;\n  cursor: pointer;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  position: relative;\n\n  @media (max-width: $medium) {\n    width: 65px;\n    height: 65px;\n  }\n  .color-name {\n    width: 100%;\n    background-color: $white;\n    padding: 15px 0px 10px;\n    border-top-left-radius: 15px;\n    border-top-right-radius: 15px;\n    opacity: 0;\n    transition: 0.3s opacity ease-in-out;\n    font-size: 10px;\n    color: $black;\n    text-transform: lowercase;\n  }\n  &.active {\n    .color-name {\n      opacity: 1;\n    }\n  }\n\n  &.categoryactive {\n    width: 120px;\n    height: 115px;\n    .color-name {\n      opacity: 1;\n    }\n\n    @media (max-width: $medium) {\n      width: 72px;\n      height: 72px;\n    }\n  }\n  &:hover {\n    .color-name {\n      opacity: 1;\n    }\n  }\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { setDataLayer } from '../../gtmUtils';\nimport { ColorBoxyIsImageInsteadHex } from '../../types';\nimport { isVeryLightColor } from '../../utils';\nimport { APIURL, accessToken } from '../api';\n\n@Component({\n  tag: 'my-colorbox',\n  styleUrl: 'index.scss',\n})\nexport class MyColorBox {\n  private checkTimeout: ReturnType<typeof setTimeout> | undefined;\n\n  @Prop() color: string;\n  @Prop() name: string;\n  @Prop() shop: string;\n  @Prop() product: string;\n  @Prop() isActive?: boolean;\n  @Prop() isCategoryActive?: boolean;\n  @Prop() isImageInsteadHex?: ColorBoxyIsImageInsteadHex;\n\n  colorCheck = () => {\n    this.checkTimeout = setTimeout(() => {\n      setDataLayer({\n        event: 'ColorCheck',\n        shop: this.shop,\n        product: this.product,\n        color: this.name,\n      });\n    }, 2000);\n  };\n\n  colorUnCheck = () => {\n    if (this.checkTimeout) clearTimeout(this.checkTimeout);\n    this.checkTimeout = undefined;\n  };\n\n  darkenColor = (color: string) => {\n    const red = parseInt(color[1] + color[2], 16) - 20;\n    const green = parseInt(color[3] + color[4], 16) - 20;\n    const blue = parseInt(color[5] + color[6], 16) - 20;\n    return `rgb(${red},${green},${blue})`;\n  };\n\n  private isLightSwatch = () => !this.isImageInsteadHex?.isImageInsteadHex && isVeryLightColor(this.color);\n\n  // Active category keeps its 5px solid border (all active swatches share it, so\n  // alignment is consistent). In the normal grid we use an inset box-shadow\n  // instead of a border so light swatches gain a visible edge without changing\n  // their box size and skewing the grid.\n  private getBorder = () => {\n    if (!this.isCategoryActive) return '';\n    return `5px solid ${this.isLightSwatch() ? '#d9d9d9' : this.darkenColor(this.color)}`;\n  };\n\n  private getBoxShadow = () => {\n    if (this.isCategoryActive) return '';\n    return this.isLightSwatch() ? 'inset 0 0 0 1px #d9d9d9' : '';\n  };\n\n  render() {\n    return (\n      <div\n        onMouseEnter={() => this.colorCheck()}\n        onMouseLeave={() => this.colorUnCheck()}\n        class={`my-color-box ${this.isActive ? 'active' : ''} ${this.isCategoryActive ? 'categoryactive' : ''}`}\n        style={{\n          backgroundSize: this.isImageInsteadHex?.isImageInsteadHex ? 'cover' : '',\n          backgroundImage: this.isImageInsteadHex?.isImageInsteadHex ? `url(${APIURL}/assets/${this.isImageInsteadHex.bigImage}?access_token=${accessToken})` : '',\n          background: this.isImageInsteadHex?.isImageInsteadHex ? this.isImageInsteadHex.bigImage : this.color,\n          border: this.getBorder(),\n          boxShadow: this.getBoxShadow(),\n        }}\n      >\n        <div class=\"color-name\">{this.name}</div>\n      </div>\n    );\n  }\n}\n"],"version":3}