@ppg_pl/pallete 0.0.4 → 0.0.6

package/dist/cjs/pallete.cjs.js

@@ -0,0 +1,28 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-160fcb6c.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('pallete.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([["my-backdrop_8.cjs",[[2,"my-component",{"shop":[1],"product":[1],"show":[32],"readyToClose":[32],"open":[64]},[[0,"readyToCLose","setReadyToCloseHandler"],[0,"close","closeModalHandler"]]],[0,"my-modal",{"shop":[1],"product":[1],"closeImage":[1,"close-image"],"arrowDown":[1,"arrow-down"],"chunksNum":[32],"data":[32],"preloader":[32],"loading":[32],"colors":[32],"currentColor":[32],"currentIndex":[32],"infoBoxWidth":[32],"boxWidth":[32],"padding":[32],"isMobile":[32],"showRange":[32],"colorCategories":[32],"selectedCategory":[32],"page":[32],"open":[64]},[[0,"closeInfoBox","closeInfoBoxHandler"],[9,"resize","handleResize"],[0,"searchColors","searchColorsHandler"]]],[0,"my-backdrop"],[0,"my-colorinfo",{"currentColor":[16],"shop":[1],"product":[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"]}],[2,"my-loader"],[2,"my-search",{"productId":[2,"product-id"],"isMobile":[4,"is-mobile"],"searchIcon":[1,"search-icon"],"searchText":[32]}],[0,"my-slider",{"slides":[16],"shop":[1],"product":[1],"color":[1]}]]]], options);
+});
+
+exports.setNonce = index.setNonce;
+
+//# sourceMappingURL=pallete.cjs.js.map

package/dist/cjs/pallete.cjs.js.map

@@ -0,0 +1 @@
+{"file":"pallete.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,19 @@
+{
+  "entries": [
+    "./components/my-backdrop/my-backdrop.js",
+    "./components/my-colorbox/my-colorbox.js",
+    "./components/my-colorinfo/my-colorinfo.js",
+    "./components/my-component/my-component.js",
+    "./components/my-loader/my-loader.js",
+    "./components/my-modal/my-modal.js",
+    "./components/my-search/my-search.js",
+    "./components/my-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,20 @@
+export const APIURL = 'https://pallete-colors-backend.herokuapp.com';
+class API {
+  async getData(ep) {
+    try {
+      const request = await fetch(`${APIURL}/api/${ep}`, {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      });
+      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,8CAA8C,CAAC;AAErE,MAAM,GAAG;EACP,KAAK,CAAC,OAAO,CAAC,EAAU;IACtB,IAAI;MACF,MAAM,OAAO,GAAG,MAAM,KAAK,CAAC,GAAG,MAAM,QAAQ,EAAE,EAAE,EAAE;QACjD,MAAM,EAAE,KAAK;QAEb,OAAO,EAAE;UACP,cAAc,EAAE,kBAAkB;SACnC;OACF,CAAC,CAAC;MACH,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://pallete-colors-backend.herokuapp.com';\n\nclass API {\n  async getData(ep: string) {\n    try {\n      const request = await fetch(`${APIURL}/api/${ep}`, {\n        method: 'GET',\n\n        headers: {\n          'Content-Type': 'application/json',\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,82 @@
+import qs from 'qs';
+export const fetchProductColorsQuery = (id, page) => qs.stringify({
+  filters: {
+    products: {
+      id: {
+        $eq: id,
+      },
+    },
+  },
+  sort: ['position:asc'],
+  populate: ['image', 'category', 'links', 'links.shop'],
+  pagination: {
+    page: page || 1,
+    pageSize: 100,
+  },
+}, {
+  encodeValuesOnly: true, // prettify url
+});
+export const fetchCategoryColorsQuery = (color) => qs.stringify({
+  filters: {
+    category: {
+      id: {
+        $eq: color.id,
+      },
+    },
+  },
+  sort: ['position:asc'],
+  populate: ['image', 'category', 'links', 'links.shop'],
+  pagination: {
+    page: 1,
+    pageSize: 100,
+  },
+}, {
+  encodeValuesOnly: true, // prettify url
+});
+export const fetchColorByNumber = (productId, colorNumber) => qs.stringify({
+  filters: {
+    $or: [
+      {
+        $and: [
+          {
+            number: {
+              $contains: colorNumber,
+            },
+          },
+          {
+            products: {
+              id: {
+                $eq: productId,
+              },
+            },
+          },
+        ],
+      },
+      {
+        $and: [
+          {
+            name: {
+              $contains: colorNumber,
+            },
+          },
+          {
+            products: {
+              id: {
+                $eq: productId,
+              },
+            },
+          },
+        ],
+      },
+    ],
+  },
+  sort: ['position:asc'],
+  populate: ['image', 'category', 'product', 'links', 'links.shop'],
+  pagination: {
+    page: 1,
+    pageSize: 100,
+  },
+}, {
+  encodeValuesOnly: true, // prettify url
+});
+//# 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":"AAAA,OAAO,EAAE,MAAM,IAAI,CAAC;AAGpB,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,EAAU,EAAE,IAAa,EAAE,EAAE,CACnE,EAAE,CAAC,SAAS,CACV;EACE,OAAO,EAAE;IACP,QAAQ,EAAE;MACR,EAAE,EAAE;QACF,GAAG,EAAE,EAAE;OACR;KACF;GACF;EACD,IAAI,EAAE,CAAC,cAAc,CAAC;EACtB,QAAQ,EAAE,CAAC,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,YAAY,CAAC;EACtD,UAAU,EAAE;IACV,IAAI,EAAE,IAAI,IAAI,CAAC;IACf,QAAQ,EAAE,GAAG;GACd;CACF,EACD;EACE,gBAAgB,EAAE,IAAI,EAAE,eAAe;CACxC,CACF,CAAC;AAEJ,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,KAAY,EAAE,EAAE,CACvD,EAAE,CAAC,SAAS,CACV;EACE,OAAO,EAAE;IACP,QAAQ,EAAE;MACR,EAAE,EAAE;QACF,GAAG,EAAE,KAAK,CAAC,EAAE;OACd;KACF;GACF;EACD,IAAI,EAAE,CAAC,cAAc,CAAC;EACtB,QAAQ,EAAE,CAAC,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,YAAY,CAAC;EACtD,UAAU,EAAE;IACV,IAAI,EAAE,CAAC;IACP,QAAQ,EAAE,GAAG;GACd;CACF,EACD;EACE,gBAAgB,EAAE,IAAI,EAAE,eAAe;CACxC,CACF,CAAC;AAEJ,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,SAAiB,EAAE,WAAmB,EAAE,EAAE,CAC3E,EAAE,CAAC,SAAS,CACV;EACE,OAAO,EAAE;IACP,GAAG,EAAE;MACH;QACE,IAAI,EAAE;UACJ;YACE,MAAM,EAAE;cACN,SAAS,EAAE,WAAW;aACvB;WACF;UACD;YACE,QAAQ,EAAE;cACR,EAAE,EAAE;gBACF,GAAG,EAAE,SAAS;eACf;aACF;WACF;SACF;OACF;MACD;QACE,IAAI,EAAE;UACJ;YACE,IAAI,EAAE;cACJ,SAAS,EAAE,WAAW;aACvB;WACF;UACD;YACE,QAAQ,EAAE;cACR,EAAE,EAAE;gBACF,GAAG,EAAE,SAAS;eACf;aACF;WACF;SACF;OACF;KACF;GACF;EACD,IAAI,EAAE,CAAC,cAAc,CAAC;EACtB,QAAQ,EAAE,CAAC,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,YAAY,CAAC;EACjE,UAAU,EAAE;IACV,IAAI,EAAE,CAAC;IACP,QAAQ,EAAE,GAAG;GACd;CACF,EACD;EACE,gBAAgB,EAAE,IAAI,EAAE,eAAe;CACxC,CACF,CAAC","sourcesContent":["import qs from 'qs';\nimport { Color } from '../../types';\n\nexport const fetchProductColorsQuery = (id: string, page?: number) =>\n  qs.stringify(\n    {\n      filters: {\n        products: {\n          id: {\n            $eq: id,\n          },\n        },\n      },\n      sort: ['position:asc'],\n      populate: ['image', 'category', 'links', 'links.shop'],\n      pagination: {\n        page: page || 1,\n        pageSize: 100,\n      },\n    },\n    {\n      encodeValuesOnly: true, // prettify url\n    },\n  );\n\nexport const fetchCategoryColorsQuery = (color: Color) =>\n  qs.stringify(\n    {\n      filters: {\n        category: {\n          id: {\n            $eq: color.id,\n          },\n        },\n      },\n      sort: ['position:asc'],\n      populate: ['image', 'category', 'links', 'links.shop'],\n      pagination: {\n        page: 1,\n        pageSize: 100,\n      },\n    },\n    {\n      encodeValuesOnly: true, // prettify url\n    },\n  );\n\nexport const fetchColorByNumber = (productId: number, colorNumber: string) =>\n  qs.stringify(\n    {\n      filters: {\n        $or: [\n          {\n            $and: [\n              {\n                number: {\n                  $contains: colorNumber,\n                },\n              },\n              {\n                products: {\n                  id: {\n                    $eq: productId,\n                  },\n                },\n              },\n            ],\n          },\n          {\n            $and: [\n              {\n                name: {\n                  $contains: colorNumber,\n                },\n              },\n              {\n                products: {\n                  id: {\n                    $eq: productId,\n                  },\n                },\n              },\n            ],\n          },\n        ],\n      },\n      sort: ['position:asc'],\n      populate: ['image', 'category', 'product', 'links', 'links.shop'],\n      pagination: {\n        page: 1,\n        pageSize: 100,\n      },\n    },\n    {\n      encodeValuesOnly: true, // prettify url\n    },\n  );\n"]}

package/dist/collection/components/my-backdrop/my-backdrop.css

@@ -0,0 +1,13 @@
+.pallete-wrapper * {
+  font-family: "Galatea", 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/my-backdrop/my-backdrop.js

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

package/dist/collection/components/my-backdrop/my-backdrop.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"my-backdrop.js","sourceRoot":"","sources":["../../../src/components/my-backdrop/my-backdrop.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: 'my-backdrop.scss',\n})\nexport class MyBackdrop {\n  render() {\n    return null;\n  }\n}\n"]}

package/dist/collection/components/my-colorbox/my-colorbox.css

@@ -0,0 +1,52 @@
+.pallete-wrapper * {
+  font-family: "Galatea", 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: 80px;
+    height: 80px;
+  }
+}
+.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/my-colorbox/my-colorbox.js

@@ -0,0 +1,157 @@
+import { h } from '@stencil/core';
+import { setDataLayer } from '../../gtmUtils';
+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;
+  }
+  render() {
+    return (h("div", { onMouseEnter: () => this.colorCheck(), onMouseLeave: () => this.colorUnCheck(), class: `my-color-box ${this.isActive ? 'active' : ''} ${this.isCategoryActive ? 'categoryactive' : ''}`, style: {
+        background: 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 {
+      "$": ["my-colorbox.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["my-colorbox.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
+      }
+    };
+  }
+}
+//# sourceMappingURL=my-colorbox.js.map

package/dist/collection/components/my-colorbox/my-colorbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"my-colorbox.js","sourceRoot":"","sources":["../../../src/components/my-colorbox/my-colorbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAM9C,MAAM,OAAO,UAAU;;IAUrB,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,UAAU,EAAE,IAAI,CAAC,KAAK;QACtB,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';\n\n@Component({\n  tag: 'my-colorbox',\n  styleUrl: 'my-colorbox.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\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          background: 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"]}

package/dist/collection/components/my-colorinfo/my-colorinfo.js

@@ -0,0 +1,187 @@
+import { h, getAssetPath } from '@stencil/core';
+import { setDataLayer } from '../../gtmUtils';
+export class MyColorInfo {
+  constructor() {
+    this.goToProduct = () => {
+      var _a;
+      this.currentColor &&
+        setDataLayer({
+          event: 'GoToProduct',
+          shop: this.shop,
+          product: this.product,
+          color: (_a = this.currentColor) === null || _a === void 0 ? void 0 : _a.name,
+        });
+    };
+    this.onCloseButtonClick = () => {
+      this.closeInfoBox.emit();
+    };
+    this.currentColor = undefined;
+    this.shop = undefined;
+    this.product = undefined;
+    this.data = null;
+    this.isMobile = false;
+    this.infoBoxWidth = undefined;
+    this.closeImage = 'close.png';
+  }
+  render() {
+    var _a, _b, _c, _d, _e, _f, _g;
+    return (h("div", { class: `boxes__box-content ${this.currentColor.textWhite ? 'boxes__box-content__white' : ''}`, style: {
+        background: 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" }), !this.isMobile && h("h2", null, this.currentColor.name), !this.isMobile && h("h4", null, this.currentColor.number), !this.isMobile && h("div", { class: "divider" }), h("div", { class: "boxes__box-content__info__value" }, h("div", { class: "boxes__box-content__info__value-image" }, ((_a = this.currentColor) === null || _a === void 0 ? void 0 : _a.image.data) && h("img", { src: `${(_e = (_d = (_c = (_b = this.currentColor) === null || _b === void 0 ? void 0 : _b.image) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d.attributes) === null || _e === void 0 ? void 0 : _e.formats.thumbnail.url}`, alt: "color-image" })), h("div", { class: "boxes__box-content__info__value-product" }, h("div", null, !this.isMobile && h("p", null, "Produkt:"), this.isMobile && h("h2", null, this.currentColor.name), " ", h("p", null, this.product)), this.isMobile && h("div", { class: 'divider' }), this.currentColor && this.currentColor.links.find((link) => { var _a, _b, _c; return ((_c = (_b = (_a = link === null || link === void 0 ? void 0 : link.shop) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.attributes) === null || _c === void 0 ? void 0 : _c.name) === this.shop; }) && (h("a", { onClick: this.goToProduct, class: `${this.currentColor.buttonInverse ? 'inverse' : ''}`, target: "_blank", href: (_f = this === null || this === void 0 ? void 0 : this.currentColor.links.find((link) => { var _a, _b, _c; return ((_c = (_b = (_a = link === null || link === void 0 ? void 0 : link.shop) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.attributes) === null || _c === void 0 ? void 0 : _c.name) === this.shop; })) === null || _f === void 0 ? void 0 : _f.path }, "przejd\u017A do produktu"))))), h("div", { class: "boxes__box-content__slider" }, h("my-slider", { color: this.currentColor.name, shop: this.shop, product: this.product, slides: (_g = this.data) === null || _g === void 0 ? void 0 : _g.images.data }), ' ')));
+  }
+  static get is() { return "my-colorinfo"; }
+  static get properties() {
+    return {
+      "currentColor": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Color",
+          "resolved": "{ hex: string; image: Record<string, Data<Image>>; links: Link[]; name: string; position: number; buttonInverse: boolean; textWhite: boolean; id?: number | undefined; category?: Data<Partial<Color>> | undefined; number?: string | undefined; }",
+          "references": {
+            "Color": {
+              "location": "import",
+              "path": "../../types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      },
+      "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
+      },
+      "data": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Product | null",
+          "resolved": "null | { colors?: Color[] | undefined; modalDescription: string; modalLogo: Record<string, Data<Image>>; modalName: string; name: string; createdAt: string; locale: string; publishedAt: string; shops: Data<Shop>[]; images: Record<string, Data<Image>[]>; id?: string | undefined; categories?: any; }",
+          "references": {
+            "Product": {
+              "location": "import",
+              "path": "../../types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "defaultValue": "null"
+      },
+      "isMobile": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-mobile",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "infoBoxWidth": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number | null",
+          "resolved": "null | number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "info-box-width",
+        "reflect": false
+      },
+      "closeImage": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "close-image",
+        "reflect": false,
+        "defaultValue": "'close.png'"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "closeInfoBox",
+        "name": "closeInfoBox",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+}
+//# sourceMappingURL=my-colorinfo.js.map

package/dist/collection/components/my-colorinfo/my-colorinfo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"my-colorinfo.js","sourceRoot":"","sources":["../../../src/components/my-colorinfo/my-colorinfo.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, getAssetPath, Event, EventEmitter } from '@stencil/core';\nimport { setDataLayer } from '../../gtmUtils';\nimport { Color, Link, Product } from '../../types';\n@Component({\n  tag: 'my-colorinfo',\n})\nexport class MyColorInfo {\n  @Prop() currentColor: Color;\n  @Prop() shop: string;\n  @Prop() product: string;\n  @Prop() data: Product | null = null;\n  @Prop() isMobile: boolean = false;\n  @Prop() infoBoxWidth: number | null;\n  @Prop() closeImage = 'close.png';\n\n  @Event() closeInfoBox: EventEmitter;\n\n  goToProduct = () => {\n    this.currentColor &&\n      setDataLayer({\n        event: 'GoToProduct',\n        shop: this.shop,\n        product: this.product,\n        color: this.currentColor?.name,\n      });\n  };\n\n  onCloseButtonClick = () => {\n    this.closeInfoBox.emit();\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.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          {!this.isMobile && <h2>{this.currentColor.name}</h2>}\n          {!this.isMobile && <h4>{this.currentColor.number}</h4>}\n          {!this.isMobile && <div class=\"divider\"></div>}\n          <div class=\"boxes__box-content__info__value\">\n            <div class=\"boxes__box-content__info__value-image\">\n              {this.currentColor?.image.data! && <img src={`${this.currentColor?.image?.data?.attributes?.formats.thumbnail.url}`} 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 && this.currentColor.links.find((link: Link) => link?.shop?.data?.attributes?.name === this.shop) && (\n                <a\n                  onClick={this.goToProduct}\n                  class={`${this.currentColor.buttonInverse ? 'inverse' : ''}`}\n                  target=\"_blank\"\n                  href={this?.currentColor.links.find((link: Link) => link?.shop?.data?.attributes?.name === this.shop)?.path}\n                >\n                  przejdź do produktu\n                </a>\n              )}\n            </div>\n          </div>\n        </div>\n        <div class=\"boxes__box-content__slider\">\n          <my-slider color={this.currentColor.name} shop={this.shop} product={this.product} slides={this.data?.images.data}></my-slider>{' '}\n        </div>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/my-component/my-component.css

@@ -0,0 +1,6 @@
+.pallete-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}