@ppg_pl/tinting 0.0.0

package/dist/cjs/tinting.cjs.js

@@ -0,0 +1,28 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-0a139db0.js');
+
+/*
+ Stencil Client Patch Browser v3.1.0 | MIT Licensed | https://stenciljs.com
+ */
+const patchBrowser = () => {
+    const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('tinting.cjs.js', document.baseURI).href));
+    const opts = {};
+    // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.
+    if (importMeta !== '') {
+        opts.resourcesUrl = new URL('.', importMeta).href;
+        // TODO(STENCIL-661): Remove code related to the dynamic import shim
+        // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.
+    }
+    return index.promiseResolve(opts);
+};
+
+patchBrowser().then(options => {
+  return index.bootstrapLazy([["modal-header_10.cjs",[[2,"my-component",{"shop":[1],"product":[1],"baselink":[1],"colorname":[1],"show":[32],"readyToClose":[32],"open":[64],"close":[64]},[[0,"readyToCLose","setReadyToCloseHandler"],[0,"close","closeModalHandler"],[0,"onSelectedColorEmit","handleSelectedColor"]]],[0,"my-modal",{"shop":[1],"product":[1],"baselink":[1],"selectedcolor":[1],"arrowDown":[1,"arrow-down"],"chunksNum":[32],"data":[32],"preloader":[32],"loading":[32],"currentColor":[32],"currentIndex":[32],"infoBoxWidth":[32],"boxWidth":[32],"padding":[32],"isMobile":[32],"showRange":[32],"colorCategories":[32],"selectedCategory":[32],"page":[32],"colorIsSelected":[32],"colorsList":[32],"hasMore":[32],"filters":[32],"open":[64]},[[0,"closeInfoBox","closeInfoBoxHandler"],[0,"onCurrentColor","handleEmitColor"],[9,"resize","handleResize"],[0,"colorFamilySelected","handleColorFamilySelected"],[0,"searchColors","searchColorsHandler"]]],[0,"my-backdrop"],[0,"modal-header",{"modalName":[1,"modal-name"],"modalLogo":[1,"modal-logo"],"modalDescription":[1,"modal-description"],"selectedColorFamily":[1,"selected-color-family"],"shop":[1],"productName":[1,"product-name"],"isMobile":[4,"is-mobile"],"closeImage":[1,"close-image"],"productSamples":[16],"colorFamilies":[32]}],[0,"my-colorinfo",{"currentColor":[16],"shop":[1],"product":[1],"baselink":[1],"data":[16],"isMobile":[4,"is-mobile"],"infoBoxWidth":[2,"info-box-width"],"closeImage":[1,"close-image"]}],[0,"my-colorbox",{"color":[1],"name":[1],"shop":[1],"product":[1],"isActive":[4,"is-active"],"isCategoryActive":[4,"is-category-active"],"isImageInsteadHex":[16]}],[2,"my-loader"],[2,"my-search",{"productname":[1],"shopname":[1],"isMobile":[4,"is-mobile"],"searchIcon":[1,"search-icon"],"searchText":[32]},[[4,"clearSearchText","clearSearchTextHandler"]]],[2,"my-select",{"options":[16],"placeholder":[1],"isMobile":[4,"is-mobile"],"searchIcon":[1,"search-icon"],"searchText":[32],"filteredOptions":[32],"showDropdown":[32],"selectedValue":[32]},[[4,"clearSearchText","clearSearchTextHandler"]]],[0,"my-slider",{"slides":[16],"shop":[1],"product":[1],"color":[1]}]]]], options);
+});
+
+exports.setNonce = index.setNonce;
+
+//# sourceMappingURL=tinting.cjs.js.map

package/dist/cjs/tinting.cjs.js.map

@@ -0,0 +1 @@
+{"file":"tinting.cjs.js","mappings":";;;;;;AAAA;AACA;AACA;AAiBA,MAAM,YAAY,GAAG,MAAM;AAkC3B,IAAI,MAAM,UAAU,GAAG,yMAAe,CAAC;AACvC,IAAI,MAAM,IAAI,GAAiE,EAAE,CAAC;AAgBlF;AACA,IAAI,IAAuB,UAAU,KAAK,EAAE,EAAE;AAC9C,QAAQ,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,IAAI,CAAC;AAC1D;AACA;AACA,KAaK;AACL,IAAI,OAAOA,oBAAc,CAAC,IAAI,CAAC,CAAC;AAChC,CAAC;;ACtFD,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,IAAI;AAE/B,EAAE,OAAOC,mBAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC,CAAC;AAC9D,CAAC,CAAC;;;;","names":["promiseResolve","bootstrapLazy"],"sources":["./node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v3.1.0 | MIT Licensed | https://stenciljs.com\n */\nimport { BUILD, NAMESPACE } from '@stencil/core/internal/app-data';\nimport { consoleDevInfo, plt, win, doc, promiseResolve, H } from '@stencil/core';\n/**\n * Helper method for querying a `meta` tag that contains a nonce value\n * out of a DOM's head.\n *\n * @param doc The DOM containing the `head` to query against\n * @returns The content of the meta tag representing the nonce value, or `undefined` if no tag\n * exists or the tag has no content.\n */\nfunction queryNonceMetaTagContent(doc) {\n    var _a, _b, _c;\n    return (_c = (_b = (_a = doc.head) === null || _a === void 0 ? void 0 : _a.querySelector('meta[name=\"csp-nonce\"]')) === null || _b === void 0 ? void 0 : _b.getAttribute('content')) !== null && _c !== void 0 ? _c : undefined;\n}\n// TODO(STENCIL-661): Remove code related to the dynamic import shim\nconst getDynamicImportFunction = (namespace) => `__sc_import_${namespace.replace(/\\s|-/g, '_')}`;\nconst patchBrowser = () => {\n    // NOTE!! This fn cannot use async/await!\n    if (BUILD.isDev && !BUILD.isTesting) {\n        consoleDevInfo('Running in development mode.');\n    }\n    // TODO(STENCIL-659): Remove code implementing the CSS variable shim\n    if (BUILD.cssVarShim) {\n        // shim css vars\n        // TODO(STENCIL-659): Remove code implementing the CSS variable shim\n        plt.$cssShim$ = win.__cssshim;\n    }\n    if (BUILD.cloneNodeFix) {\n        // opted-in to polyfill cloneNode() for slot polyfilled components\n        patchCloneNodeFix(H.prototype);\n    }\n    if (BUILD.profile && !performance.mark) {\n        // not all browsers support performance.mark/measure (Safari 10)\n        // because the mark/measure APIs are designed to write entries to a buffer in the browser that does not exist,\n        // simply stub the implementations out.\n        // TODO(STENCIL-323): Remove this patch when support for older browsers is removed (breaking)\n        // @ts-ignore\n        performance.mark = performance.measure = () => {\n            /*noop*/\n        };\n        performance.getEntriesByName = () => [];\n    }\n    // @ts-ignore\n    const scriptElm = \n    // TODO(STENCIL-661): Remove code related to the dynamic import shim\n    // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    BUILD.scriptDataOpts || BUILD.safari10 || BUILD.dynamicImportShim\n        ? Array.from(doc.querySelectorAll('script')).find((s) => new RegExp(`\\/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) ||\n            s.getAttribute('data-stencil-namespace') === NAMESPACE)\n        : null;\n    const importMeta = import.meta.url;\n    const opts = BUILD.scriptDataOpts ? (scriptElm || {})['data-opts'] || {} : {};\n    // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    if (BUILD.safari10 && 'onbeforeload' in scriptElm && !history.scrollRestoration /* IS_ESM_BUILD */) {\n        // Safari < v11 support: This IF is true if it's Safari below v11.\n        // This fn cannot use async/await since Safari didn't support it until v11,\n        // however, Safari 10 did support modules. Safari 10 also didn't support \"nomodule\",\n        // so both the ESM file and nomodule file would get downloaded. Only Safari\n        // has 'onbeforeload' in the script, and \"history.scrollRestoration\" was added\n        // to Safari in v11. Return a noop then() so the async/await ESM code doesn't continue.\n        // IS_ESM_BUILD is replaced at build time so this check doesn't happen in systemjs builds.\n        return {\n            then() {\n                /* promise noop */\n            },\n        };\n    }\n    // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    if (!BUILD.safari10 && importMeta !== '') {\n        opts.resourcesUrl = new URL('.', importMeta).href;\n        // TODO(STENCIL-661): Remove code related to the dynamic import shim\n        // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    }\n    else if (BUILD.dynamicImportShim || BUILD.safari10) {\n        opts.resourcesUrl = new URL('.', new URL(scriptElm.getAttribute('data-resources-url') || scriptElm.src, win.location.href)).href;\n        // TODO(STENCIL-661): Remove code related to the dynamic import shim\n        if (BUILD.dynamicImportShim) {\n            patchDynamicImport(opts.resourcesUrl, scriptElm);\n        }\n        // TODO(STENCIL-661): Remove code related to the dynamic import shim\n        if (BUILD.dynamicImportShim && !win.customElements) {\n            // module support, but no custom elements support (Old Edge)\n            // @ts-ignore\n            return import(/* webpackChunkName: \"polyfills-dom\" */ './dom.js').then(() => opts);\n        }\n    }\n    return promiseResolve(opts);\n};\n// TODO(STENCIL-661): Remove code related to the dynamic import shim\nconst patchDynamicImport = (base, orgScriptElm) => {\n    const importFunctionName = getDynamicImportFunction(NAMESPACE);\n    try {\n        // test if this browser supports dynamic imports\n        // There is a caching issue in V8, that breaks using import() in Function\n        // By generating a random string, we can workaround it\n        // Check https://bugs.chromium.org/p/chromium/issues/detail?id=990810 for more info\n        win[importFunctionName] = new Function('w', `return import(w);//${Math.random()}`);\n    }\n    catch (e) {\n        // this shim is specifically for browsers that do support \"esm\" imports\n        // however, they do NOT support \"dynamic\" imports\n        // basically this code is for old Edge, v18 and below\n        const moduleMap = new Map();\n        win[importFunctionName] = (src) => {\n            var _a;\n            const url = new URL(src, base).href;\n            let mod = moduleMap.get(url);\n            if (!mod) {\n                const script = doc.createElement('script');\n                script.type = 'module';\n                script.crossOrigin = orgScriptElm.crossOrigin;\n                script.src = URL.createObjectURL(new Blob([`import * as m from '${url}'; window.${importFunctionName}.m = m;`], {\n                    type: 'application/javascript',\n                }));\n                // Apply CSP nonce to the script tag if it exists\n                const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);\n                if (nonce != null) {\n                    script.setAttribute('nonce', nonce);\n                }\n                mod = new Promise((resolve) => {\n                    script.onload = () => {\n                        resolve(win[importFunctionName].m);\n                        script.remove();\n                    };\n                });\n                moduleMap.set(url, mod);\n                doc.head.appendChild(script);\n            }\n            return mod;\n        };\n    }\n};\nconst patchCloneNodeFix = (HTMLElementPrototype) => {\n    const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n    HTMLElementPrototype.cloneNode = function (deep) {\n        if (this.nodeName === 'TEMPLATE') {\n            return nativeCloneNodeFn.call(this, deep);\n        }\n        const clonedNode = nativeCloneNodeFn.call(this, false);\n        const srcChildNodes = this.childNodes;\n        if (deep) {\n            for (let i = 0; i < srcChildNodes.length; i++) {\n                // Node.ATTRIBUTE_NODE === 2, and checking because IE11\n                if (srcChildNodes[i].nodeType !== 2) {\n                    clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n                }\n            }\n        }\n        return clonedNode;\n    };\n};\nexport { patchBrowser };\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(options => {\n  globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"version":3}

package/dist/collection/collection-manifest.json

@@ -0,0 +1,21 @@
+{
+  "entries": [
+    "./components/backdrop/index.js",
+    "./components/colorbox/index.js",
+    "./components/colorinfo/index.js",
+    "./components/component/index.js",
+    "./components/header/index.js",
+    "./components/loader/index.js",
+    "./components/modal/index.js",
+    "./components/search/index.js",
+    "./components/select/index.js",
+    "./components/slider/index.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "3.1.0",
+    "typescriptVersion": "4.9.5"
+  },
+  "collections": [],
+  "bundles": []
+}

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

@@ -0,0 +1,23 @@
+export const APIURL = 'https://color-selector.pl/tinting'; // 'https://color-selector.pl/tinting'; // 'http://localhost:8056'; //'https://pallete-colors-backend.herokuapp.com';
+export 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);
+    }
+  }
+}
+export const ApiService = new API();
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/api/index.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,MAAM,GAAG,mCAAmC,CAAC,CAAC,qHAAqH;AAChL,MAAM,CAAC,MAAM,WAAW,GAAG,kCAAkC,CAAC,CAAC,4EAA4E;AAC3I,MAAM,GAAG;EACP,KAAK,CAAC,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;QACD,mBAAmB;OACpB,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;EACH,CAAC;CACF;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,IAAI,GAAG,EAAE,CAAC","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"]}

package/dist/collection/components/api/services.js

@@ -0,0 +1,96 @@
+var __rest = (this && this.__rest) || function (s, e) {
+  var t = {};
+  for (var p in s)
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+      t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+        t[p[i]] = s[p[i]];
+    }
+  return t;
+};
+import qs from 'qs';
+import { ApiService } from '.';
+export const limit = 200;
+export const fetchColorsQuery = (filters) => {
+  const { sortByHex } = filters, restFilters = __rest(filters, ["sortByHex"]);
+  return qs.stringify({
+    fields: ['*', 'Products.*', 'Samples.*'].join(','),
+    filter: {
+      _and: [
+        ...(restFilters.id ? [{ Products: { Product_id: { _eq: restFilters.id } } }] : []),
+        ...(restFilters.sampleId ? [{ Samples: { Sample_id: { _eq: restFilters.sampleId } } }] : []),
+        ...(restFilters.colorNumber ? [{ number: { _contains: restFilters.colorNumber } }] : []),
+        ...(restFilters.colorName ? [{ name: { _icontains: restFilters.colorName } }] : []),
+        ...(restFilters.colorFamily ? [{ colorFamily: { _eq: restFilters.colorFamily } }] : []),
+      ],
+    },
+    sort: sortByHex === 'desc' ? '-hex' : sortByHex === 'asc' ? 'hex' : undefined,
+    meta: '*',
+    page: restFilters.page !== undefined ? restFilters.page : 1,
+    limit: restFilters.colorName ? 200 : limit,
+  }, { encodeValuesOnly: true });
+};
+export const fetchColors = async (filters) => {
+  try {
+    const query = fetchColorsQuery(Object.assign(Object.assign({}, filters), { sortByHex: 'desc' }));
+    const response = await ApiService.getData(`items/Color?${query}`);
+    return (response === null || response === void 0 ? void 0 : response.data) || [];
+  }
+  catch (error) {
+    console.error('Error fetching colors:', error);
+    return [];
+  }
+};
+export const fetchSamplesColors = async (filters) => {
+  try {
+    const response = await ApiService.getData(`items/Sample?${fetchColorsQuery(Object.assign({}, filters))}`);
+    return (response === null || response === void 0 ? void 0 : response.data) || [];
+  }
+  catch (error) {
+    console.error('Error fetching samples colors:', error);
+    return [];
+  }
+};
+export const fetchProductData = async (filters) => {
+  var _a, _b;
+  try {
+    // Fetch shop details
+    const shopResponse = await ApiService.getData(`items/Shop?filter[name][_eq]=${filters.shopName}`);
+    const shop = (_a = shopResponse === null || shopResponse === void 0 ? void 0 : shopResponse.data) === null || _a === void 0 ? void 0 : _a[0];
+    if (!(shop === null || shop === void 0 ? void 0 : shop.id)) {
+      console.error('Shop not found');
+      return null;
+    }
+    // Fetch product details
+    const response = await ApiService.getData(`items/Product?filter[name][_eq]=${filters.productName}&fields=*,images.*,Shop.*,Category.*.*.*.*`);
+    const product = (_b = response === null || response === void 0 ? void 0 : response.data) === null || _b === void 0 ? void 0 : _b[0];
+    // fetch product samples
+    const productSamples = await fetchSamplesColors({ id: product.id, page: 0 });
+    if (product && product.Shop.some((s) => s.Shop_id === shop.id)) {
+      return Object.assign(Object.assign({}, product), { id: product.id, productSamples });
+    }
+    console.error('Product not found or does not belong to the shop');
+    return null;
+  }
+  catch (error) {
+    console.error('Error fetching product data:', error);
+    return null;
+  }
+};
+export const fetchColorFamilies = async () => {
+  var _a, _b, _c;
+  try {
+    const response = await ApiService.getData(`fields/Color/colorFamily`);
+    return ((_c = (_b = (_a = response === null || response === void 0 ? void 0 : response.data) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.options) === null || _c === void 0 ? void 0 : _c.choices) || [];
+  }
+  catch (error) {
+    console.error('Error fetching color families:', error);
+    return [];
+  }
+};
+export const updateFilters = (filters, newFilter) => {
+  return Object.assign(Object.assign({}, filters), newFilter);
+};
+//# sourceMappingURL=services.js.map

package/dist/collection/components/api/services.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"services.js","sourceRoot":"","sources":["../../../src/components/api/services.ts"],"names":[],"mappings":"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","sourcesContent":["import qs from 'qs';\nimport { ApiService } from '.';\nimport { ProductShopRelation } from '../../types';\n\nexport const limit = 200;\n\nexport const fetchColorsQuery = (filters: Record<string, any>) => {\n  const { sortByHex, ...restFilters } = filters;\n\n  return qs.stringify(\n    {\n      fields: ['*', 'Products.*', 'Samples.*'].join(','),\n      filter: {\n        _and: [\n          ...(restFilters.id ? [{ Products: { Product_id: { _eq: restFilters.id } } }] : []),\n          ...(restFilters.sampleId ? [{ Samples: { Sample_id: { _eq: restFilters.sampleId } } }] : []),\n          ...(restFilters.colorNumber ? [{ number: { _contains: restFilters.colorNumber } }] : []),\n          ...(restFilters.colorName ? [{ name: { _icontains: restFilters.colorName } }] : []),\n          ...(restFilters.colorFamily ? [{ colorFamily: { _eq: restFilters.colorFamily } }] : []),\n        ],\n      },\n      sort: sortByHex === 'desc' ? '-hex' : sortByHex === 'asc' ? 'hex' : undefined,\n      meta: '*',\n      page: restFilters.page !== undefined ? restFilters.page : 1,\n      limit: restFilters.colorName ? 200 : limit,\n    },\n    { encodeValuesOnly: true },\n  );\n};\n\nexport const fetchColors = async (filters: Record<string, any>) => {\n  try {\n    const query = fetchColorsQuery({ ...filters, sortByHex: 'desc' });\n    const response = await ApiService.getData(`items/Color?${query}`);\n    return response?.data || [];\n  } catch (error) {\n    console.error('Error fetching colors:', error);\n    return [];\n  }\n};\n\nexport const fetchSamplesColors = async (filters: Record<string, any>) => {\n  try {\n    const response = await ApiService.getData(`items/Sample?${fetchColorsQuery({ ...filters })}`);\n    return response?.data || [];\n  } catch (error) {\n    console.error('Error fetching samples colors:', error);\n    return [];\n  }\n};\n\nexport const fetchProductData = async (filters: Record<string, any>) => {\n  try {\n    // Fetch shop details\n    const shopResponse = await ApiService.getData(`items/Shop?filter[name][_eq]=${filters.shopName}`);\n    const shop = shopResponse?.data?.[0];\n\n    if (!shop?.id) {\n      console.error('Shop not found');\n      return null;\n    }\n\n    // Fetch product details\n    const response = await ApiService.getData(`items/Product?filter[name][_eq]=${filters.productName}&fields=*,images.*,Shop.*,Category.*.*.*.*`);\n    const product = response?.data?.[0];\n\n    // fetch product samples\n    const productSamples = await fetchSamplesColors({ id: product.id, page: 0 });\n\n    if (product && product.Shop.some((s: ProductShopRelation) => s.Shop_id === shop.id)) {\n      return { ...product, id: product.id, productSamples };\n    }\n\n    console.error('Product not found or does not belong to the shop');\n    return null;\n  } catch (error) {\n    console.error('Error fetching product data:', error);\n    return null;\n  }\n};\n\nexport const fetchColorFamilies = async () => {\n  try {\n    const response = await ApiService.getData(`fields/Color/colorFamily`);\n\n    return response?.data?.meta?.options?.choices || [];\n  } catch (error) {\n    console.error('Error fetching color families:', error);\n    return [];\n  }\n};\n\nexport const updateFilters = (filters: Record<string, any>, newFilter: Record<string, any>) => {\n  return { ...filters, ...newFilter };\n};\n"]}

package/dist/collection/components/backdrop/index.css

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

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

@@ -0,0 +1,17 @@
+export class MyBackdrop {
+  render() {
+    return null;
+  }
+  static get is() { return "my-backdrop"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["index.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["index.css"]
+    };
+  }
+}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/backdrop/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAM1C,MAAM,OAAO,UAAU;EACrB,MAAM;IACJ,OAAO,IAAI,CAAC;EACd,CAAC;;;;;;;;CACF","sourcesContent":["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"]}

package/dist/collection/components/colorbox/index.css

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

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

@@ -0,0 +1,182 @@
+import { h } from '@stencil/core';
+import { setDataLayer } from '../../gtmUtils';
+import { APIURL, accessToken } from '../api';
+export class MyColorBox {
+  constructor() {
+    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 is() { return "my-colorbox"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["index.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["index.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "color": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "color",
+        "reflect": false
+      },
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "name",
+        "reflect": false
+      },
+      "shop": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "shop",
+        "reflect": false
+      },
+      "product": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "product",
+        "reflect": false
+      },
+      "isActive": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-active",
+        "reflect": false
+      },
+      "isCategoryActive": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-category-active",
+        "reflect": false
+      },
+      "isImageInsteadHex": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "ColorBoxyIsImageInsteadHex",
+          "resolved": "undefined | { isImageInsteadHex: boolean; bigImage: string; }",
+          "references": {
+            "ColorBoxyIsImageInsteadHex": {
+              "location": "import",
+              "path": "../../types"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      }
+    };
+  }
+}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/colorbox/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAM7C,MAAM,OAAO,UAAU;;IAWrB,eAAU,GAAG,GAAG,EAAE;MAChB,IAAI,CAAC,YAAY,GAAG,UAAU,CAAC,GAAG,EAAE;QAClC,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;MACL,CAAC,EAAE,IAAI,CAAC,CAAC;IACX,CAAC,CAAC;IAEF,iBAAY,GAAG,GAAG,EAAE;MAClB,IAAI,IAAI,CAAC,YAAY;QAAE,YAAY,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;MACvD,IAAI,CAAC,YAAY,GAAG,SAAS,CAAC;IAChC,CAAC,CAAC;IAEF,gBAAW,GAAG,CAAC,KAAa,EAAE,EAAE;MAC9B,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;IACxC,CAAC,CAAC;;;;;;;;;EAEF,MAAM;;IACJ,OAAO,CACL,WACE,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,EACrC,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE,EACvC,KAAK,EAAE,gBAAgB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,IAAI,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,EAAE,EACvG,KAAK,EAAE;QACL,cAAc,EAAE,CAAA,MAAA,IAAI,CAAC,iBAAiB,0CAAE,iBAAiB,EAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;QACxE,eAAe,EAAE,CAAA,MAAA,IAAI,CAAC,iBAAiB,0CAAE,iBAAiB,EAAC,CAAC,CAAC,OAAO,MAAM,WAAW,IAAI,CAAC,iBAAiB,CAAC,QAAQ,iBAAiB,WAAW,GAAG,CAAC,CAAC,CAAC,EAAE;QACxJ,UAAU,EAAE,CAAA,MAAA,IAAI,CAAC,iBAAiB,0CAAE,iBAAiB,EAAC,CAAC,CAAC,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK;QACpG,MAAM,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,aAAa,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE;OACjF;MAED,WAAK,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,IAAI,CAAO,CACrC,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}