@ppg_pl/pallete 0.0.2 → 0.0.4

package/dist/cjs/pallete.cjs.js

@@ -1,19 +0,0 @@
-'use strict';
-
-const index = require('./index-029079e0.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",[[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);
-});

package/dist/collection/collection-manifest.json

@@ -1,19 +0,0 @@
-{
-  "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

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

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

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

@@ -1,13 +0,0 @@
-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

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

@@ -1,145 +0,0 @@
-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

@@ -1,197 +0,0 @@
-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

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