@ppg_pl/tinting 0.0.0

package/dist/components/index4.js

@@ -0,0 +1,121 @@
+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);
+  };
+}
+
+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 MySelect = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.onReset = createEvent(this, "onReset", 7);
+    this.selectValue = createEvent(this, "selectValue", 7);
+    this.inputValueChange = createEvent(this, "inputValueChange", 7);
+    this.defaultOption = { name: this.placeholder, id: null };
+    this.debouncedSearch = debounce((value) => {
+      const optionsWithDefault = [this.defaultOption, ...this.options];
+      this.filteredOptions = optionsWithDefault.filter(option => option.name.toLowerCase().includes(value.toLowerCase()));
+      this.inputValueChange.emit(value);
+    }, 300);
+    this.handleClickOutside = (event) => {
+      if (!this.el.contains(event.target)) {
+        this.showDropdown = false;
+      }
+    };
+    this.options = [];
+    this.placeholder = 'Select an option';
+    this.isMobile = false;
+    this.searchIcon = 'chevron.png';
+    this.searchText = '';
+    this.filteredOptions = [];
+    this.showDropdown = false;
+    this.selectedValue = null;
+  }
+  reset() {
+    this.onReset.emit();
+  }
+  componentWillLoad() {
+    this.filteredOptions = [this.defaultOption, ...this.options];
+  }
+  componentDidLoad() {
+    document.addEventListener('click', this.handleClickOutside);
+  }
+  disconnectedCallback() {
+    document.removeEventListener('click', this.handleClickOutside);
+  }
+  handleInput(event) {
+    const value = event.target.value;
+    this.searchText = value;
+    this.showDropdown = true;
+    this.debouncedSearch(value);
+  }
+  selectOption(option) {
+    if (option.value === null) {
+      this.selectedValue = null;
+      this.searchText = '';
+      this.reset();
+    }
+    else {
+      this.selectedValue = option.key;
+      this.searchText = option.key;
+      this.selectValue.emit(option);
+    }
+    this.showDropdown = false;
+  }
+  toggleDropdown() {
+    this.showDropdown = !this.showDropdown;
+  }
+  updateOptions(newOptions) {
+    this.filteredOptions = [this.defaultOption, ...newOptions];
+  }
+  clearSearchTextHandler() {
+    this.searchText = '';
+    this.selectedValue = null;
+    this.reset();
+  }
+  render() {
+    return (h("div", { class: "select" }, h("div", { class: "input-wrapper" }, h("input", { type: "text", placeholder: this.placeholder, value: this.searchText, onInput: this.handleInput.bind(this), onFocus: () => (this.showDropdown = true) }), h("button", { onClick: () => this.toggleDropdown() }, h("img", { src: getAssetPath(`./assets/${this.searchIcon}`), alt: "dropdown icon", class: this.showDropdown ? 'rotated' : '' }))), this.showDropdown && (h("ul", { class: "dropdown" }, this.filteredOptions.length > 0 ? (this.filteredOptions.map(option => (h("li", { class: option.id === null ? 'default-option' : '', onClick: () => this.selectOption({ key: option.name, value: option.id }) }, option.name)))) : (h("li", { class: "no-results" }, "No results found"))))));
+  }
+  static get assetsDirs() { return ["assets"]; }
+  get el() { return this; }
+  static get watchers() { return {
+    "options": ["updateOptions"]
+  }; }
+  static get style() { return indexCss; }
+}, [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"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["my-select"];
+  components.forEach(tagName => { switch (tagName) {
+    case "my-select":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, MySelect);
+      }
+      break;
+  } });
+}
+
+export { MySelect as M, debounce as a, defineCustomElement as d };
+
+//# sourceMappingURL=index4.js.map

package/dist/components/index4.js.map

@@ -0,0 +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}

package/dist/components/index5.js

@@ -0,0 +1,26 @@
+const APIURL = 'https://color-selector.pl/tinting'; // 'https://color-selector.pl/tinting'; // 'http://localhost:8056'; //'https://pallete-colors-backend.herokuapp.com';
+const accessToken = 'f3_Pwse3EwxFKucDNtPBq-6iBB30L6Gv'; //'jVle5YFcJQmyVhYPVBg_V7gg1qS920Pu'; // 'f3_Pwse3EwxFKucDNtPBq-6iBB30L6Gv';
+class API {
+  async getData(ep) {
+    try {
+      const request = await fetch(`${APIURL}/${ep}`, {
+        method: 'GET',
+        headers: {
+          'Authorization': `Bearer ${accessToken}`,
+          'Content-Type': 'application/json',
+        },
+        // mode: 'no-cors',
+      });
+      const response = await request.json();
+      return response;
+    }
+    catch (error) {
+      console.error(error);
+    }
+  }
+}
+const ApiService = new API();
+
+export { ApiService as A, APIURL as a, accessToken as b };
+
+//# sourceMappingURL=index5.js.map

package/dist/components/index5.js.map

@@ -0,0 +1 @@
+{"file":"index5.js","mappings":"MAAa,MAAM,GAAG,oCAAoC;MAC7C,WAAW,GAAG,mCAAmC;AAC9D,MAAM,GAAG;EACP,MAAM,OAAO,CAAC,EAAU;IACtB,IAAI;MACF,MAAM,OAAO,GAAG,MAAM,KAAK,CAAC,GAAG,MAAM,IAAI,EAAE,EAAE,EAAE;QAC7C,MAAM,EAAE,KAAK;QAEb,OAAO,EAAE;UACP,eAAe,EAAE,UAAU,WAAW,EAAE;UACxC,cAAc,EAAE,kBAAkB;SACnC;;OAEF,CAAC,CAAC;MAEH,MAAM,QAAQ,GAAG,MAAM,OAAO,CAAC,IAAI,EAAE,CAAC;MAEtC,OAAO,QAAQ,CAAC;KACjB;IAAC,OAAO,KAAK,EAAE;MACd,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;KACtB;GACF;CACF;MAEY,UAAU,GAAG,IAAI,GAAG;;;;","names":[],"sources":["./src/components/api/index.ts"],"sourcesContent":["export const APIURL = 'https://color-selector.pl/tinting'; // 'https://color-selector.pl/tinting'; // 'http://localhost:8056'; //'https://pallete-colors-backend.herokuapp.com';\nexport const accessToken = 'f3_Pwse3EwxFKucDNtPBq-6iBB30L6Gv'; //'jVle5YFcJQmyVhYPVBg_V7gg1qS920Pu'; // 'f3_Pwse3EwxFKucDNtPBq-6iBB30L6Gv';\nclass API {\n  async getData(ep: string) {\n    try {\n      const request = await fetch(`${APIURL}/${ep}`, {\n        method: 'GET',\n\n        headers: {\n          'Authorization': `Bearer ${accessToken}`,\n          'Content-Type': 'application/json',\n        },\n        // mode: 'no-cors',\n      });\n\n      const response = await request.json();\n\n      return response;\n    } catch (error) {\n      console.error(error);\n    }\n  }\n}\n\nexport const ApiService = new API();\n"],"version":3}

package/dist/components/index6.js

@@ -0,0 +1,31 @@
+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;
+  } });
+}
+
+export { MyBackdrop as M, defineCustomElement as d };
+
+//# sourceMappingURL=index6.js.map

package/dist/components/index6.js.map

@@ -0,0 +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}

package/dist/components/index7.js

@@ -0,0 +1,75 @@
+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';
+
+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.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)));
+  }
+  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]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["my-colorbox"];
+  components.forEach(tagName => { switch (tagName) {
+    case "my-colorbox":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, MyColorBox);
+      }
+      break;
+  } });
+}
+
+export { MyColorBox as M, defineCustomElement as d };
+
+//# sourceMappingURL=index7.js.map

package/dist/components/index7.js.map

@@ -0,0 +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}

package/dist/components/index8.js

@@ -0,0 +1,87 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, getAssetPath } from '@stencil/core/internal/client';
+import { s as setDataLayer } from './gtmUtils.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 {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.onCurrentColor = createEvent(this, "onCurrentColor", 7);
+    this.closeInfoBox = createEvent(this, "closeInfoBox", 7);
+    this.goToProduct = () => {
+      var _a;
+      this.onCurrentColor.emit(this.currentColor);
+      this.currentColor &&
+        setDataLayer({
+          event: 'GoToProduct',
+          shop: this.shop,
+          product: this.product,
+          color: (_a = this.currentColor) === null || _a === void 0 ? void 0 : _a.name,
+        });
+      this.closeInfoBox.emit();
+    };
+    this.onCloseButtonClick = () => {
+      this.closeInfoBox.emit();
+    };
+    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 });
+      }
+    };
+    this.capitalizeFirstLetter = (string) => {
+      return string.charAt(0).toUpperCase() + string.slice(1).toLocaleLowerCase();
+    };
+    this.currentColor = undefined;
+    this.shop = undefined;
+    this.product = undefined;
+    this.baselink = undefined;
+    this.data = null;
+    this.isMobile = false;
+    this.infoBoxWidth = undefined;
+    this.closeImage = 'close.png';
+  }
+  render() {
+    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: "boxes__box-content__info__value-product" }, this.isMobile && h("div", { class: 'divider' }), this.currentColor && (h("button", { onClick: this.goToProduct, class: `button ${this.currentColor.imageInsteadHex ? 'brown' : this.currentColor.buttonInverse ? 'inverse' : ''}` }, "wybierz kolor"))))), h("div", { class: "boxes__box-content__slider" }, this.renderSliderOrImage())));
+  }
+}, [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"]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["my-colorinfo", "my-slider"];
+  components.forEach(tagName => { switch (tagName) {
+    case "my-colorinfo":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, MyColorInfo);
+      }
+      break;
+    case "my-slider":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { MyColorInfo as M, defineCustomElement as d };
+
+//# sourceMappingURL=index8.js.map

package/dist/components/index8.js.map

@@ -0,0 +1 @@
+{"file":"index8.js","mappings":";;;;;MAQa,WAAW;;;;;;IAatB,gBAAW,GAAG;;MACZ,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;MAC5C,IAAI,CAAC,YAAY;QACf,YAAY,CAAC;UACX,KAAK,EAAE,aAAa;UACpB,IAAI,EAAE,IAAI,CAAC,IAAI;UACf,OAAO,EAAE,IAAI,CAAC,OAAO;UACrB,KAAK,EAAE,MAAA,IAAI,CAAC,YAAY,0CAAE,IAAI;SAC/B,CAAC,CAAC;MAEL,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;KAC1B,CAAC;IAEF,uBAAkB,GAAG;MACnB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;KAC1B,CAAC;IAEF,wBAAmB,GAAG;;MACpB,IAAI,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE;QACrC,OAAO,WAAK,KAAK,EAAE,iBAAiB,EAAE,GAAG,EAAE,GAAG,MAAM,WAAW,IAAI,CAAC,YAAY,CAAC,QAAQ,iBAAiB,WAAW,EAAE,EAAE,GAAG,EAAC,aAAa,GAAG,CAAC;OAC/I;WAAM;QACL,OAAO,iBAAW,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,MAAA,IAAI,CAAC,IAAI,0CAAE,MAAM,GAAc,CAAC;OAClI;KACF,CAAC;IAEF,0BAAqB,GAAG,CAAC,MAAc;MACrC,OAAO,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;KAC7E,CAAC;;;;;gBAnC6B,IAAI;oBACP,KAAK;;sBAEZ,WAAW;;EAkChC,MAAM;IACJ,QACE,WACE,KAAK,EAAE,sBAAsB,IAAI,CAAC,YAAY,CAAC,SAAS,GAAG,2BAA2B,GAAG,EAAE,EAAE,EAC7F,KAAK,EAAE;QACL,UAAU,EAAE,IAAI,CAAC,YAAY,CAAC,eAAe,GAAG,OAAO,GAAG,IAAI,CAAC,YAAY,CAAC,GAAG;QAC/E,QAAQ,EAAE,GAAG,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI;OAC5D,IAEA,IAAI,CAAC,QAAQ,IAAI,WAAK,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,IAAI,CAAC,kBAAkB,EAAE,GAAG,EAAE,YAAY,CAAC,YAAY,IAAI,CAAC,UAAU,EAAE,CAAC,EAAE,GAAG,EAAC,UAAU,GAAG,EAC/I,WACE,KAAK,EAAC,0BAA0B,EAChC,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,GAAG,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,YAAY,GAAG,EAAE,IAAI,GAAG,EAAE;OAClF,IAEA,CAAC,IAAI,CAAC,QAAQ,IAAI,WAAK,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,IAAI,CAAC,kBAAkB,EAAE,GAAG,EAAE,YAAY,CAAC,YAAY,IAAI,CAAC,UAAU,EAAE,CAAC,EAAE,GAAG,EAAC,UAAU,GAAG,EAChJ,cAAK,IAAI,CAAC,YAAY,CAAC,IAAI,CAAM,EAChC,CAAC,IAAI,CAAC,QAAQ,IAAI,cAAK,IAAI,CAAC,YAAY,CAAC,MAAM,CAAM,EAEtD,WAAK,KAAK,EAAC,iCAAiC,IAI1C,WAAK,KAAK,EAAC,yCAAyC,IAMjD,IAAI,CAAC,QAAQ,IAAI,WAAK,KAAK,EAAE,SAAS,GAAQ,EAC9C,IAAI,CAAC,YAAY,KAChB,cAAQ,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,KAAK,EAAE,UAAU,IAAI,CAAC,YAAY,CAAC,eAAe,GAAG,OAAO,GAAG,IAAI,CAAC,YAAY,CAAC,aAAa,GAAG,SAAS,GAAG,EAAE,EAAE,oBAE3I,CACV,CACG,CACF,CACF,EACN,WAAK,KAAK,EAAC,4BAA4B,IAAE,IAAI,CAAC,mBAAmB,EAAE,CAAO,CACtE,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/colorinfo/index.tsx"],"sourcesContent":["import { Component, Prop, h, getAssetPath, Event, EventEmitter } from '@stencil/core';\nimport { setDataLayer } from '../../gtmUtils';\nimport { Color, 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() data: Product | null = null;\n  @Prop() isMobile: boolean = false;\n  @Prop() infoBoxWidth: number | null;\n  @Prop() closeImage = 'close.png';\n  @Event({ bubbles: true, composed: true }) onCurrentColor: EventEmitter<Color>;\n\n  @Event() closeInfoBox: EventEmitter;\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  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  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=\"boxes__box-content__info__value-image\">\n              {this.currentColor?.image! && <img src={`${APIURL}/assets/${this.currentColor.image}?access_token=${accessToken}`} alt=\"color-image\" />}\n            </div> */}\n            <div class=\"boxes__box-content__info__value-product\">\n              {/* <div>\n                {!this.isMobile && <p>Produkt:</p>}\n                {this.isMobile && <h2>{this.currentColor?.name}</h2>} <p>{this.product}</p>\n              </div> */}\n\n              {this.isMobile && <div class={'divider'}></div>}\n              {this.currentColor && (\n                <button onClick={this.goToProduct} class={`button ${this.currentColor.imageInsteadHex ? 'brown' : this.currentColor.buttonInverse ? 'inverse' : ''}`}>\n                  wybierz kolor\n                </button>\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}