@ppg_pl/pallete 0.0.1

package/dist/cjs/pallete.cjs.js

@@ -0,0 +1,19 @@
+'use strict';
+
+const index = require('./index-f418fc60.js');
+
+/*
+ Stencil Client Patch Browser v2.17.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 = {};
+    if (importMeta !== '') {
+        opts.resourcesUrl = new URL('.', importMeta).href;
+    }
+    return index.promiseResolve(opts);
+};
+
+patchBrowser().then(options => {
+  return index.bootstrapLazy([["my-backdrop_8.cjs",[[0,"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"],[0,"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);
+});

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": "2.17.0",
+    "typescriptVersion": "4.5.4"
+  },
+  "collections": [],
+  "bundles": []
+}

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

@@ -0,0 +1,19 @@
+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();

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

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

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

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

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

@@ -0,0 +1,13 @@
+import { Component } from '@stencil/core';
+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"]
+  }; }
+}

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

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

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

@@ -0,0 +1,145 @@
+import { Component, Prop, 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})`;
+    };
+  }
+  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
+    }
+  }; }
+}

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

@@ -0,0 +1,197 @@
+import { Component, Prop, h, getAssetPath, Event } from '@stencil/core';
+import { setDataLayer } from '../../gtmUtils';
+export class MyColorInfo {
+  constructor() {
+    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 }),
+        ' ')));
+  }
+  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": {}
+      }
+    }]; }
+}

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

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