@ppg_pl/pallete 0.0.2 → 0.0.4

package/www/build/index.esm.js

@@ -0,0 +1 @@
+

package/www/build/my-backdrop.entry.js

@@ -0,0 +1,15 @@
+import { r as registerInstance } from './index-1ac7471e.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) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return null;
+  }
+};
+MyBackdrop.style = myBackdropCss;
+
+export { MyBackdrop as my_backdrop };

package/www/build/my-colorbox.entry.js

@@ -0,0 +1,40 @@
+import { r as registerInstance, h } from './index-1ac7471e.js';
+import { s as setDataLayer } from './gtmUtils-dcdac4ce.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) {
+    registerInstance(this, hostRef);
+    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)));
+  }
+};
+MyColorBox.style = myColorboxCss;
+
+export { MyColorBox as my_colorbox };

package/www/build/my-colorinfo.entry.js

@@ -0,0 +1,36 @@
+import { r as registerInstance, e as createEvent, h, f as getAssetPath } from './index-1ac7471e.js';
+import { s as setDataLayer } from './gtmUtils-dcdac4ce.js';
+
+const MyColorInfo = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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 }), ' ')));
+  }
+};
+
+export { MyColorInfo as my_colorinfo };

package/www/build/my-component.entry.js

@@ -0,0 +1,154 @@
+import { r as registerInstance, h, g as getElement } from './index-1ac7471e.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) {
+    registerInstance(this, hostRef);
+    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 getElement(this); }
+};
+MyModalBundle.style = myComponentCss;
+
+export { MyModalBundle as my_component };

package/www/build/my-loader.entry.js

@@ -0,0 +1,15 @@
+import { r as registerInstance, h } from './index-1ac7471e.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) {
+    registerInstance(this, hostRef);
+  }
+  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" })));
+  }
+};
+MyLoader.style = myLoaderCss;
+
+export { MyLoader as my_loader };