@ppg_pl/pallete 0.0.1

package/dist/components/my-backdrop.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface MyBackdrop extends Components.MyBackdrop, HTMLElement {}
+export const MyBackdrop: {
+  prototype: MyBackdrop;
+  new (): MyBackdrop;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/my-backdrop.js

@@ -0,0 +1,6 @@
+import { M as MyBackdrop$1, d as defineCustomElement$1 } from './my-backdrop2.js';
+
+const MyBackdrop = MyBackdrop$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { MyBackdrop, defineCustomElement };

package/dist/components/my-backdrop2.js

@@ -0,0 +1,29 @@
+import { proxyCustomElement, HTMLElement } from '@stencil/core/internal/client';
+
+const myBackdropCss = "html{font-size:62.5%}body{font-size:1.5rem}*{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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+  }
+  render() {
+    return null;
+  }
+  static get style() { return myBackdropCss; }
+}, [0, "my-backdrop"]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["my-backdrop"];
+  components.forEach(tagName => { switch (tagName) {
+    case "my-backdrop":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, MyBackdrop);
+      }
+      break;
+  } });
+}
+
+export { MyBackdrop as M, defineCustomElement as d };

package/dist/components/my-colorbox.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface MyColorbox extends Components.MyColorbox, HTMLElement {}
+export const MyColorbox: {
+  prototype: MyColorbox;
+  new (): MyColorbox;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/my-colorbox.js

@@ -0,0 +1,6 @@
+import { M as MyColorBox, d as defineCustomElement$1 } from './my-colorbox2.js';
+
+const MyColorbox = MyColorBox;
+const defineCustomElement = defineCustomElement$1;
+
+export { MyColorbox, defineCustomElement };

package/dist/components/my-colorbox2.js

@@ -0,0 +1,61 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { s as setDataLayer } from './gtmUtils.js';
+
+const myColorboxCss = "html{font-size:62.5%}body{font-size:1.5rem}*{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:1rem;color:#232323;text-transform:lowercase}.my-color-box.active .color-name{opacity:1}.my-color-box.categoryactive{width:120px;height:115px}.my-color-box.categoryactive .color-name{opacity:1}@media (max-width: 1024px){.my-color-box.categoryactive{width:72px;height:72px}}.my-color-box:hover .color-name{opacity:1}";
+
+const MyColorBox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.colorCheck = () => {
+      this.checkTimeout = setTimeout(() => {
+        setDataLayer({
+          event: 'ColorCheck',
+          shop: this.shop,
+          product: this.product,
+          color: this.name,
+        });
+      }, 2000);
+    };
+    this.colorUnCheck = () => {
+      if (this.checkTimeout)
+        clearTimeout(this.checkTimeout);
+      this.checkTimeout = undefined;
+    };
+    this.darkenColor = (color) => {
+      const red = parseInt(color[1] + color[2], 16) - 20;
+      const green = parseInt(color[3] + color[4], 16) - 20;
+      const blue = parseInt(color[5] + color[6], 16) - 20;
+      return `rgb(${red},${green},${blue})`;
+    };
+  }
+  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 style() { return myColorboxCss; }
+}, [0, "my-colorbox", {
+    "color": [1],
+    "name": [1],
+    "shop": [1],
+    "product": [1],
+    "isActive": [4, "is-active"],
+    "isCategoryActive": [4, "is-category-active"]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["my-colorbox"];
+  components.forEach(tagName => { switch (tagName) {
+    case "my-colorbox":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, MyColorBox);
+      }
+      break;
+  } });
+}
+
+export { MyColorBox as M, defineCustomElement as d };

package/dist/components/my-colorinfo.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface MyColorinfo extends Components.MyColorinfo, HTMLElement {}
+export const MyColorinfo: {
+  prototype: MyColorinfo;
+  new (): MyColorinfo;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/my-colorinfo.js

@@ -0,0 +1,6 @@
+import { M as MyColorInfo, d as defineCustomElement$1 } from './my-colorinfo2.js';
+
+const MyColorinfo = MyColorInfo;
+const defineCustomElement = defineCustomElement$1;
+
+export { MyColorinfo, defineCustomElement };

package/dist/components/my-colorinfo2.js

@@ -0,0 +1,64 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, getAssetPath } from '@stencil/core/internal/client';
+import { s as setDataLayer } from './gtmUtils.js';
+import { d as defineCustomElement$1 } from './index2.js';
+
+const MyColorInfo = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.closeInfoBox = createEvent(this, "closeInfoBox", 7);
+    this.data = null;
+    this.isMobile = false;
+    this.closeImage = 'close.png';
+    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();
+    };
+  }
+  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 }), ' ')));
+  }
+}, [0, "my-colorinfo", {
+    "currentColor": [16],
+    "shop": [1],
+    "product": [1],
+    "data": [16],
+    "isMobile": [4, "is-mobile"],
+    "infoBoxWidth": [2, "info-box-width"],
+    "closeImage": [1, "close-image"]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["my-colorinfo", "my-slider"];
+  components.forEach(tagName => { switch (tagName) {
+    case "my-colorinfo":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, MyColorInfo);
+      }
+      break;
+    case "my-slider":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { MyColorInfo as M, defineCustomElement as d };

package/dist/components/my-component.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface MyComponent extends Components.MyComponent, HTMLElement {}
+export const MyComponent: {
+  prototype: MyComponent;
+  new (): MyComponent;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/my-component.js

@@ -0,0 +1,216 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$8 } from './my-backdrop2.js';
+import { d as defineCustomElement$7 } from './my-colorbox2.js';
+import { d as defineCustomElement$6 } from './my-colorinfo2.js';
+import { d as defineCustomElement$5 } from './my-loader2.js';
+import { d as defineCustomElement$4 } from './my-modal2.js';
+import { d as defineCustomElement$3 } from './my-search2.js';
+import { d as defineCustomElement$2 } from './index2.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 = [];
+    utils.forEach(children, (n) => {
+        if (isValidNode(n)) {
+            rendered.push(renderNode(n, utils));
+        }
+    });
+    // Build an HTMLElement for each provided virtual child
+    rendered
+        .filter(shouldApplyToHead)
+        .forEach(applyToHead);
+    return null;
+};
+
+const myComponentCss = "html{font-size:62.5%}body{font-size:1.5rem}*{font-family:\"Galatea\", sans-serif}.pallete-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:center}";
+
+const MyModalBundle = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.show = false;
+  }
+  async open() {
+    this.show = true;
+  }
+  closeModalHandler() {
+    this.show = false;
+  }
+  render() {
+    let content = null;
+    if (this.show) {
+      content = [h("my-backdrop", null), h("my-modal", { shop: this.shop, product: this.product })];
+    }
+    return (h("div", null, h(Helmet, null, 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');`)), h("div", { class: "pallete-wrapper" }, content), h("noscript", null, h("iframe", { src: "https://www.googletagmanager.com/ns.html?id=GTM-PMTKHDX", height: "0", width: "0", style: { display: 'none', visibility: 'hidden' } }))));
+  }
+  get modalEl() { return this; }
+  static get style() { return myComponentCss; }
+}, [0, "my-component", {
+    "shop": [1],
+    "product": [1],
+    "show": [32],
+    "open": [64]
+  }, [[0, "close", "closeModalHandler"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["my-component", "my-backdrop", "my-colorbox", "my-colorinfo", "my-loader", "my-modal", "my-search", "my-slider"];
+  components.forEach(tagName => { switch (tagName) {
+    case "my-component":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, MyModalBundle);
+      }
+      break;
+    case "my-backdrop":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$8();
+      }
+      break;
+    case "my-colorbox":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "my-colorinfo":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "my-loader":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "my-modal":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "my-search":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "my-slider":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const MyComponent = MyModalBundle;
+const defineCustomElement = defineCustomElement$1;
+
+export { MyComponent, defineCustomElement };

package/dist/components/my-loader.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface MyLoader extends Components.MyLoader, HTMLElement {}
+export const MyLoader: {
+  prototype: MyLoader;
+  new (): MyLoader;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/my-loader.js

@@ -0,0 +1,6 @@
+import { M as MyLoader$1, d as defineCustomElement$1 } from './my-loader2.js';
+
+const MyLoader = MyLoader$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { MyLoader, defineCustomElement };

package/dist/components/my-loader2.js

@@ -0,0 +1,29 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const myLoaderCss = ".container{display:flex;justify-content:center;align-items:center;height:100px;overflow:hidden}.item{width:20px;height:20px;margin:3px;list-style-type:none;transition:0.5s all ease}.item: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: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: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: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: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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+  }
+  render() {
+    return (h("div", { class: "container" }, h("div", { class: "item" }), h("div", { class: "item" }), h("div", { class: "item" }), h("div", { class: "item" }), h("div", { class: "item" })));
+  }
+  static get style() { return myLoaderCss; }
+}, [0, "my-loader"]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["my-loader"];
+  components.forEach(tagName => { switch (tagName) {
+    case "my-loader":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, MyLoader);
+      }
+      break;
+  } });
+}
+
+export { MyLoader as M, defineCustomElement as d };

package/dist/components/my-modal.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface MyModal extends Components.MyModal, HTMLElement {}
+export const MyModal: {
+  prototype: MyModal;
+  new (): MyModal;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/my-modal.js

@@ -0,0 +1,6 @@
+import { M as MyModal$1, d as defineCustomElement$1 } from './my-modal2.js';
+
+const MyModal = MyModal$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { MyModal, defineCustomElement };