@ppg_pl/pallete 0.0.3 → 0.0.5

package/dist/cjs/index.cjs.js

@@ -1,2 +1,4 @@
 'use strict';
 
+
+//# sourceMappingURL=index.cjs.js.map

package/dist/cjs/index.cjs.js.map

@@ -0,0 +1 @@
+{"file":"index.cjs.js","mappings":";;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/cjs/loader.cjs.js

@@ -2,20 +2,41 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-029079e0.js');
+const index = require('./index-a230bf6e.js');
+const appGlobals = require('./app-globals-3a1e7e63.js');
 
 /*
- Stencil Client Patch Esm v2.17.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Esm v3.2.0 | MIT Licensed | https://stenciljs.com
  */
 const patchEsm = () => {
+    // NOTE!! This fn cannot use async/await!
+    // TODO(STENCIL-659): Remove code implementing the CSS variable shim
+    // @ts-ignore
+    if (index.BUILD.cssVarShim && !(index.CSS && index.CSS.supports && index.CSS.supports('color', 'var(--c)'))) {
+        // @ts-ignore
+        return Promise.resolve().then(function () { return require(/* webpackChunkName: "polyfills-css-shim" */ './css-shim-5d56550a.js'); }).then(() => {
+            if ((index.plt.$cssShim$ = index.win.__cssshim)) {
+                // TODO(STENCIL-659): Remove code implementing the CSS variable shim
+                return index.plt.$cssShim$.i();
+            }
+            else {
+                // for better minification
+                return 0;
+            }
+        });
+    }
     return index.promiseResolve();
 };
 
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["my-backdrop_8.cjs",[[2,"my-component",{"shop":[1],"product":[1],"show":[32],"open":[64]},[[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"]}],[0,"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);
+  appGlobals.globalScripts();
+  return index.bootstrapLazy([["my-colorinfo.cjs",[[0,"my-colorinfo",{"currentColor":[16],"shop":[1],"product":[1],"data":[16],"isMobile":[4,"is-mobile"],"infoBoxWidth":[2,"info-box-width"],"closeImage":[1,"close-image"]}]]],["my-colorbox.cjs",[[0,"my-colorbox",{"color":[1],"name":[1],"shop":[1],"product":[1],"isActive":[4,"is-active"],"isCategoryActive":[4,"is-category-active"]}]]],["my-loader.cjs",[[2,"my-loader"]]],["my-search.cjs",[[2,"my-search",{"productId":[2,"product-id"],"isMobile":[4,"is-mobile"],"searchIcon":[1,"search-icon"],"searchText":[32]}]]],["my-modal.cjs",[[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"]]]]],["my-backdrop.cjs",[[0,"my-backdrop"]]],["my-slider.cjs",[[0,"my-slider",{"slides":[16],"shop":[1],"product":[1],"color":[1]}]]],["my-component.cjs",[[2,"my-component",{"shop":[1],"product":[1],"show":[32],"readyToClose":[32],"open":[64]},[[0,"readyToCLose","setReadyToCloseHandler"],[0,"close","closeModalHandler"]]]]]], options);
   });
 };
 
+exports.setNonce = index.setNonce;
 exports.defineCustomElements = defineCustomElements;
+
+//# sourceMappingURL=loader.cjs.js.map

package/dist/cjs/loader.cjs.js.map

@@ -0,0 +1 @@
+{"file":"loader.cjs.js","mappings":";;;;;;;AAAA;AACA;AACA;AAGA,MAAM,QAAQ,GAAG,MAAM;AACvB;AACA;AACA;AACA,IAAI,IAAIA,WAAK,CAAC,UAAU,IAAI,EAAEC,SAAG,IAAIA,SAAG,CAAC,QAAQ,IAAIA,SAAG,CAAC,QAAQ,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC,EAAE;AACzF;AACA,QAAQ,OAAO,oDAAO,6CAA6C,wBAAe,KAAC,CAAC,IAAI,CAAC,MAAM;AAC/F,YAAY,KAAKC,SAAG,CAAC,SAAS,GAAGC,SAAG,CAAC,SAAS,GAAG;AACjD;AACA,gBAAgB,OAAOD,SAAG,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC;AACzC,aAAa;AACb,iBAAiB;AACjB;AACA,gBAAgB,OAAO,CAAC,CAAC;AACzB,aAAa;AACb,SAAS,CAAC,CAAC;AACX,KAAK;AACL,IAAI,OAAOE,oBAAc,EAAE,CAAC;AAC5B,CAAC;;ACnBW,MAAC,oBAAoB,GAAG,CAAC,GAAG,EAAE,OAAO,KAAK;AACtD,EAAE,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,OAAO,OAAO,CAAC,OAAO,EAAE,CAAC;AAC9D,EAAE,OAAO,QAAQ,EAAE,CAAC,IAAI,CAAC,MAAM;AAC/B,EAAEC,wBAAa,EAAE,CAAC;AAClB,EAAE,OAAOC,mBAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC,CAAC;AAC9D,GAAG,CAAC,CAAC;AACL;;;;;","names":["BUILD","CSS","plt","win","promiseResolve","globalScripts","bootstrapLazy"],"sources":["./node_modules/@stencil/core/internal/client/patch-esm.js","@lazy-external-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Esm v3.2.0 | MIT Licensed | https://stenciljs.com\n */\nimport { BUILD } from '@stencil/core/internal/app-data';\nimport { CSS, plt, win, promiseResolve } from '@stencil/core';\nconst patchEsm = () => {\n    // NOTE!! This fn cannot use async/await!\n    // TODO(STENCIL-659): Remove code implementing the CSS variable shim\n    // @ts-ignore\n    if (BUILD.cssVarShim && !(CSS && CSS.supports && CSS.supports('color', 'var(--c)'))) {\n        // @ts-ignore\n        return import(/* webpackChunkName: \"polyfills-css-shim\" */ './css-shim.js').then(() => {\n            if ((plt.$cssShim$ = win.__cssshim)) {\n                // TODO(STENCIL-659): Remove code implementing the CSS variable shim\n                return plt.$cssShim$.i();\n            }\n            else {\n                // for better minification\n                return 0;\n            }\n        });\n    }\n    return promiseResolve();\n};\nexport { patchEsm };\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchEsm } from '@stencil/core/internal/client/patch-esm';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\nexport const defineCustomElements = (win, options) => {\n  if (typeof window === 'undefined') return Promise.resolve();\n  return patchEsm().then(() => {\n  globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n  });\n};\n"],"version":3}

package/dist/cjs/my-backdrop.cjs.entry.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-a230bf6e.js');
+
+const myBackdropCss = ".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}";
+
+const MyBackdrop = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return null;
+  }
+};
+MyBackdrop.style = myBackdropCss;
+
+exports.my_backdrop = MyBackdrop;
+
+//# sourceMappingURL=my-backdrop.cjs.entry.js.map

package/dist/cjs/my-backdrop.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"my-backdrop.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,wKAAwK;;MCMjL,UAAU;;;;EACrB,MAAM;IACJ,OAAO,IAAI,CAAC;GACb;;;;;;","names":[],"sources":["./src/components/my-backdrop/my-backdrop.scss?tag=my-backdrop","./src/components/my-backdrop/my-backdrop.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: 'my-backdrop.scss',\n})\nexport class MyBackdrop {\n  render() {\n    return null;\n  }\n}\n"],"version":3}

package/dist/cjs/my-colorbox.cjs.entry.js

@@ -0,0 +1,52 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-a230bf6e.js');
+const gtmUtils = require('./gtmUtils-11a00b2b.js');
+
+const myColorboxCss = ".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}";
+
+const MyColorBox = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.colorCheck = () => {
+      this.checkTimeout = setTimeout(() => {
+        gtmUtils.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 (index.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)}` : '',
+      } }, index.h("div", { class: "color-name" }, this.name)));
+  }
+};
+MyColorBox.style = myColorboxCss;
+
+exports.my_colorbox = MyColorBox;
+
+//# sourceMappingURL=my-colorbox.cjs.entry.js.map

package/dist/cjs/my-colorbox.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"my-colorbox.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,aAAa,GAAG,0xBAA0xB;;MCOnyB,UAAU;;;IAUrB,eAAU,GAAG;MACX,IAAI,CAAC,YAAY,GAAG,UAAU,CAAC;QAC7BA,qBAAY,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,QACEC,iBACE,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,UAAU,EAAE,IAAI,CAAC,KAAK;QACtB,MAAM,EAAE,IAAI,CAAC,gBAAgB,GAAG,aAAa,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,GAAG,EAAE;OACjF,IAEDA,iBAAK,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,IAAI,CAAO,CACrC,EACN;GACH;;;;;;","names":["setDataLayer","h"],"sources":["./src/components/my-colorbox/my-colorbox.scss?tag=my-colorbox","./src/components/my-colorbox/my-colorbox.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: 80px;\n    height: 80px;\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';\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"],"version":3}

package/dist/cjs/my-colorinfo.cjs.entry.js

@@ -0,0 +1,46 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-a230bf6e.js');
+const gtmUtils = require('./gtmUtils-11a00b2b.js');
+
+const MyColorInfo = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.closeInfoBox = index.createEvent(this, "closeInfoBox", 7);
+    this.goToProduct = () => {
+      var _a;
+      this.currentColor &&
+        gtmUtils.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 (index.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 && index.h("img", { class: 'closebtn', onClick: this.onCloseButtonClick, src: index.getAssetPath(`./assets/${this.closeImage}`), alt: "closebtn" }), index.h("div", { class: "boxes__box-content__info", style: {
+        maxWidth: this.isMobile ? `${this.infoBoxWidth && this.infoBoxWidth - 35}px` : ``,
+      } }, !this.isMobile && index.h("img", { class: 'closebtn', onClick: this.onCloseButtonClick, src: index.getAssetPath(`./assets/${this.closeImage}`), alt: "closebtn" }), !this.isMobile && index.h("h2", null, this.currentColor.name), !this.isMobile && index.h("h4", null, this.currentColor.number), !this.isMobile && index.h("div", { class: "divider" }), index.h("div", { class: "boxes__box-content__info__value" }, index.h("div", { class: "boxes__box-content__info__value-image" }, ((_a = this.currentColor) === null || _a === void 0 ? void 0 : _a.image.data) && index.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" })), index.h("div", { class: "boxes__box-content__info__value-product" }, index.h("div", null, !this.isMobile && index.h("p", null, "Produkt:"), this.isMobile && index.h("h2", null, this.currentColor.name), " ", index.h("p", null, this.product)), this.isMobile && index.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; }) && (index.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"))))), index.h("div", { class: "boxes__box-content__slider" }, index.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 }), ' ')));
+  }
+};
+
+exports.my_colorinfo = MyColorInfo;
+
+//# sourceMappingURL=my-colorinfo.cjs.entry.js.map

package/dist/cjs/my-colorinfo.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"my-colorinfo.entry.cjs.js","mappings":"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","names":["setDataLayer","h","getAssetPath"],"sources":["./src/components/my-colorinfo/my-colorinfo.tsx"],"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"],"version":3}

package/dist/cjs/my-component.cjs.entry.js

@@ -0,0 +1,171 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-a230bf6e.js');
+
+const isObject = (val) => !Array.isArray(val) && val !== null && typeof val === 'object';
+const hasAttributes = ({ vattrs }, requiredAttrs = []) => isObject(vattrs) && requiredAttrs.every(vattrs.hasOwnProperty.bind(vattrs));
+const isTextNode = ({ vtext }) => typeof vtext === 'string';
+// Can't use instanceof HTMLElement because MockHTMLElement during pre-rendering isn't
+const isElement = (val) => typeof val === 'object' && val.nodeType === 1 && typeof val.ownerDocument === 'object';
+const isElementArray = (val) => Array.isArray(val) && val.every(isElement);
+
+const createElement = ({ vtag, vattrs, vchildren, vtext }, utils) => {
+    if (vtext != null) {
+        return document.createTextNode(vtext);
+    }
+    const element = document.createElement(vtag);
+    if (vattrs != null) {
+        for (const key in vattrs) {
+            element.setAttribute(key, vattrs[key]);
+        }
+    }
+    if (vchildren != null) {
+        utils.forEach(vchildren, (child) => {
+            element.appendChild(createElement(child, utils));
+        });
+    }
+    return element;
+};
+const shouldApplyToHead = (val) => isElement(val) || (isElementArray(val) && val.length === 2);
+const applyToHead = (element) => {
+    if (Array.isArray(element)) {
+        return document.head.replaceChild(element[0], element[1]);
+    }
+    return document.head.appendChild(element);
+};
+
+const hasChildren = (node) => Array.isArray(node.vchildren);
+const getFirstChild = (vchildren, utils) => {
+    let firstChild = null;
+    utils.forEach(vchildren || [], (c, i) => {
+        if (i === 0) {
+            firstChild = c;
+            return;
+        }
+    });
+    return firstChild;
+};
+function title(node, head, utils) {
+    const firstChild = getFirstChild(node.vchildren || [], utils);
+    if (firstChild && isTextNode(firstChild)) {
+        return [createElement(node, utils), head.querySelector('title')];
+    }
+}
+function meta(node, head, utils) {
+    var _a, _b, _c;
+    const namePropKey = ((_a = node.vattrs) === null || _a === void 0 ? void 0 : _a.property) ? 'property' : 'name';
+    const namePropValue = ((_b = node.vattrs) === null || _b === void 0 ? void 0 : _b.property) || ((_c = node.vattrs) === null || _c === void 0 ? void 0 : _c.name);
+    const existingElement = head.querySelector(`meta[${namePropKey}="${namePropValue}"]`);
+    if (existingElement !== null) {
+        return [createElement(node, utils), existingElement];
+    }
+    else {
+        return createElement(node, utils);
+    }
+}
+function link(node, _head, utils) {
+    if (!hasChildren(node)) {
+        return createElement(node, utils);
+    }
+}
+function style(node, _head, utils) {
+    const firstChild = getFirstChild(node.vchildren || [], utils);
+    if (firstChild && isTextNode(firstChild)) {
+        return createElement(node, utils);
+    }
+}
+function script(node, _head, utils) {
+    if (hasChildren(node) || hasAttributes(node)) {
+        return createElement(node, utils);
+    }
+}
+function base(node, _head, utils) {
+    if (!hasChildren(node) && hasAttributes(node)) {
+        return createElement(node, utils);
+    }
+}
+const template = createElement;
+const noscript = createElement; // SSR only
+const types = {
+    title,
+    meta,
+    link,
+    style,
+    script,
+    base,
+    template,
+    noscript,
+};
+
+const headExists = document && document.head;
+const validTagNames = Object.keys(types);
+const isValidNode = (node) => validTagNames.indexOf(node.vtag) > -1;
+const renderNode = (node, utils) => types[node.vtag](node, document.head, utils);
+const Helmet = (_props, children, utils) => {
+    if (!headExists) {
+        return null;
+    }
+    const rendered = [];
+    const validChildren = [];
+    utils.forEach(children, (n) => {
+        if (isValidNode(n)) {
+            validChildren.push(n);
+            rendered.push(renderNode(n, utils));
+        }
+    });
+    // Build an HTMLElement for each provided virtual child
+    rendered
+        .filter(shouldApplyToHead)
+        .forEach(applyToHead);
+    return null;
+};
+
+const myComponentCss = ".pallete-wrapper.sc-my-component{display:flex;flex-direction:column;align-items:center;justify-content:center}";
+
+const MyModalBundle = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.shop = undefined;
+    this.product = undefined;
+    this.show = false;
+    this.readyToClose = false;
+  }
+  async open() {
+    this.show = true;
+  }
+  setReadyToCloseHandler(value) {
+    this.readyToClose = value.detail.observable;
+  }
+  closeModalHandler() {
+    this.show = false;
+    this.readyToClose = false;
+  }
+  render() {
+    let content = null;
+    if (this.show) {
+      content = [index.h("my-backdrop", null), index.h("my-modal", { shop: this.shop, product: this.product })];
+    }
+    return (index.h("div", { onClick: () => {
+        if (this.readyToClose) {
+          this.closeModalHandler();
+        }
+      } }, index.h(Helmet, null, index.h("script", null, `(function (w, d, s, l, i) {
+        w[l] = w[l] || [];
+        w[l].push({ 'gtm.start': new Date().getTime(), 'event': 'gtm.js' });
+        var f = d.getElementsByTagName(s)[0],
+          j = d.createElement(s),
+          dl = l != 'dataLayer' ? '&l=' + l : '';
+        j.async = true;
+        j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
+        f.parentNode.insertBefore(j, f);
+      })(window, document, 'script', 'dataLayer', 'GTM-PMTKHDX');`)), index.h("div", { class: "pallete-wrapper" }, content), index.h("noscript", null, index.h("iframe", { src: "https://www.googletagmanager.com/ns.html?id=GTM-PMTKHDX", height: "0", width: "0", style: { display: 'none', visibility: 'hidden' } }))));
+  }
+  get modalEl() { return index.getElement(this); }
+};
+MyModalBundle.style = myComponentCss;
+
+exports.my_component = MyModalBundle;
+
+//# sourceMappingURL=my-component.cjs.entry.js.map

package/dist/cjs/my-component.cjs.entry.js.map

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

package/dist/cjs/my-loader.cjs.entry.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-a230bf6e.js');
+
+const myLoaderCss = ".container.sc-my-loader{display:flex;justify-content:center;align-items:center;height:100px;overflow:hidden}.item.sc-my-loader{width:20px;height:20px;margin:3px;list-style-type:none;transition:0.5s all ease}.item.sc-my-loader:nth-child(1){animation:right-1 1s infinite alternate;background-color:#b8cf40;animation-delay:20ms}@keyframes right-1{0%{transform:translateY(-18px)}100%{transform:translateY(18px)}}.item.sc-my-loader:nth-child(2){animation:right-2 1s infinite alternate;background-color:#ee4b5e;animation-delay:40ms}@keyframes right-2{0%{transform:translateY(-21px)}100%{transform:translateY(21px)}}.item.sc-my-loader:nth-child(3){animation:right-3 1s infinite alternate;background-color:#ea0f47;animation-delay:60ms}@keyframes right-3{0%{transform:translateY(-24px)}100%{transform:translateY(24px)}}.item.sc-my-loader:nth-child(4){animation:right-4 1s infinite alternate;background-color:#d42840;animation-delay:80ms}@keyframes right-4{0%{transform:translateY(-27px)}100%{transform:translateY(27px)}}.item.sc-my-loader:nth-child(5){animation:right-5 1s infinite alternate;background-color:#8b2850;animation-delay:100ms}@keyframes right-5{0%{transform:translateY(-30px)}100%{transform:translateY(30px)}}";
+
+const MyLoader = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h("div", { class: "container" }, index.h("div", { class: "item" }), index.h("div", { class: "item" }), index.h("div", { class: "item" }), index.h("div", { class: "item" }), index.h("div", { class: "item" })));
+  }
+};
+MyLoader.style = myLoaderCss;
+
+exports.my_loader = MyLoader;
+
+//# sourceMappingURL=my-loader.cjs.entry.js.map

package/dist/cjs/my-loader.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"my-loader.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,WAAW,GAAG,+rCAA+rC;;MCOtsC,QAAQ;;;;EACnB,MAAM;IACJ,QACEA,iBAAK,KAAK,EAAC,WAAW,IACpBA,iBAAK,KAAK,EAAC,MAAM,GAAO,EACxBA,iBAAK,KAAK,EAAC,MAAM,GAAO,EACxBA,iBAAK,KAAK,EAAC,MAAM,GAAO,EACxBA,iBAAK,KAAK,EAAC,MAAM,GAAO,EACxBA,iBAAK,KAAK,EAAC,MAAM,GAAO,CACpB,EACN;GACH;;;;;;","names":["h"],"sources":["./src/components/my-loader/my-loader.scss?tag=my-loader&encapsulation=scoped","./src/components/my-loader/my-loader.tsx"],"sourcesContent":["$color: #b8cf40, #ee4b5e, #ea0f47, #d42840, #8b2850;\n\n@mixin anim($i) {\n  $y: ($i + 5) * 3;\n\n  @keyframes right-#{$i} {\n    0% {\n      transform: translateY(#{-$y}px);\n    }\n    100% {\n      transform: translateY(#{$y}px);\n    }\n  }\n}\n\n.container {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100px;\n  overflow: hidden;\n}\n\n.item {\n  width: 20px;\n  height: 20px;\n  margin: 3px;\n  list-style-type: none;\n  transition: 0.5s all ease;\n}\n\n@for $i from 1 through 5 {\n  .item:nth-child(#{$i}) {\n    @include anim($i);\n    animation: right-#{$i} 1s infinite alternate;\n    background-color: nth($color, $i);\n    animation-delay: 20ms * $i;\n  }\n}\n","import { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'my-loader',\n  styleUrl: 'my-loader.scss',\n  scoped: true,\n})\nexport class MyLoader {\n  render() {\n    return (\n      <div class=\"container\">\n        <div class=\"item\"></div>\n        <div class=\"item\"></div>\n        <div class=\"item\"></div>\n        <div class=\"item\"></div>\n        <div class=\"item\"></div>\n      </div>\n    );\n  }\n}\n"],"version":3}