@ppg_pl/pallete 0.0.2 → 0.0.4

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

@@ -1,430 +0,0 @@
-import { Component, Method, Element, Prop, Event, h, State, getAssetPath, Listen, Watch } from '@stencil/core';
-import { ApiService } from '../api';
-import { setDataLayer } from '../../gtmUtils';
-import { fetchCategoryColorsQuery, fetchColorByNumber, fetchProductColorsQuery } from '../api/services';
-export class MyModal {
-  constructor() {
-    this.boxDesktopWidth = 130;
-    this.boxMobileWidth = 85;
-    this.desktopPadding = 75;
-    this.mobilePadding = 35;
-    this.mediumBreakpoint = 1024;
-    this.closeImage = 'close.png';
-    this.arrowDown = 'arrow_down.png';
-    this.chunksNum = 12;
-    this.data = null;
-    this.preloader = false;
-    this.loading = false;
-    this.colors = null;
-    this.currentColor = null;
-    this.currentIndex = null;
-    this.infoBoxWidth = null;
-    this.boxWidth = this.boxDesktopWidth; // box width with gap
-    this.padding = this.desktopPadding;
-    this.isMobile = false;
-    this.showRange = false;
-    this.colorCategories = null;
-    this.selectedCategory = null;
-    this.page = 1;
-    this.clearInterval = () => {
-      this.colorTimerInterval && clearInterval(this.colorTimerInterval);
-      this.colorTimerInterval = undefined;
-    };
-    this.colorTimer = () => {
-      if (this.currentColor && this.currentColor.id) {
-        this.colorTimerInterval = setInterval(() => {
-          var _a, _b;
-          ((_a = this.currentColor) === null || _a === void 0 ? void 0 : _a.name) &&
-            setDataLayer({
-              event: 'ColorTimer',
-              shop: this.shop,
-              product: this.product,
-              color: (_b = this.currentColor) === null || _b === void 0 ? void 0 : _b.name,
-              timer: '10',
-            });
-        }, 10000);
-      }
-      else {
-        this.clearInterval();
-      }
-    };
-    this.chunks = (xs, y = []) => {
-      return xs.length === 0 ? y : this.chunks(xs.slice(this.chunksNum), y.concat([xs.slice(0, this.chunksNum)]));
-    };
-    this.calculateBoxCount = () => {
-      var _a;
-      const modalWidth = this.modalEl.children && this.modalEl.children[0] && ((_a = this.modalEl.children[0]) === null || _a === void 0 ? void 0 : _a.clientWidth) - this.padding;
-      const boxWidth = this.boxWidth;
-      const calc = Math.floor(modalWidth / boxWidth);
-      const boxesCount = calc;
-      if (!this.preloader)
-        this.chunksNum = boxesCount;
-    };
-    this.displayForMobile = () => {
-      if (window.innerWidth < this.mediumBreakpoint) {
-        this.boxWidth = this.boxMobileWidth;
-        this.padding = this.mobilePadding;
-        this.isMobile = true;
-      }
-      else {
-        this.isMobile = false;
-        this.boxWidth = this.boxDesktopWidth;
-        this.padding = this.desktopPadding;
-      }
-    };
-    this.fetchProductData = async () => {
-      try {
-        const response = await ApiService.getData(`products?populate[0]=modalLogo&populate[1]=images&populate[2]=shops&populate[3]=categories&filters[name][$contains]=${this.product}`);
-        if (response) {
-          if (response.data[0].attributes.shops.data.find((shop) => shop.attributes.name === this.shop).id) {
-            this.data = Object.assign(Object.assign({}, response.data[0].attributes), { id: response.data[0].id });
-          }
-        }
-      }
-      catch (error) {
-        console.error(error);
-      }
-      finally {
-        this.preloader = false;
-      }
-    };
-    // TODO:
-    this.fetchProductColors = async (id, page) => {
-      this.loading = true;
-      try {
-        const response = await ApiService.getData(`colors?${fetchProductColorsQuery(id, page)}`);
-        if (response) {
-          this.colors = {
-            list: response &&
-              response.data &&
-              response.data.map((item) => (Object.assign({ id: item.id }, item.attributes))),
-            pagination: response.meta.pagination,
-          };
-        }
-      }
-      catch (error) {
-        console.error(error);
-      }
-      finally {
-        this.loading = false;
-      }
-    };
-    this.fetchCategoryColors = async (color) => {
-      this.loading = true;
-      try {
-        const response = await ApiService.getData(`colors?${fetchCategoryColorsQuery(color)}`);
-        if (response) {
-          this.colors = {
-            list: response &&
-              response.data &&
-              response.data.map((item) => (Object.assign({ id: item.id }, item.attributes))),
-            pagination: response.meta.pagination,
-          };
-        }
-      }
-      catch (error) {
-        console.error(error);
-      }
-      finally {
-        this.loading = false;
-      }
-    };
-    // private onIntersection = async (entries: any) => {
-    //   console.log(entries[0]);
-    //   if (entries[0].intersectionRatio === 0) {
-    //     console.log('d');
-    //   }
-    // };
-    // private handleObserve = () => {
-    //   console.log(this.modalEl.shadowRoot);
-    //   const boxesList: any = (this.modalEl as any).querySelector('.my-modal__wrapper');
-    //   console.log(boxesList);
-    //   if (boxesList) {
-    //     this.observer = new IntersectionObserver(this.onIntersection);
-    //     this.observer.observe(boxesList);
-    //   }
-    // };
-    this.onPage = (page) => {
-      this.data && this.fetchProductColors(String(this.data.id), page);
-      this.page = page;
-      this.currentColor = null;
-      this.currentIndex = null;
-    };
-    this.handleCategoryClick = (color) => {
-      if (this.selectedCategory && color && this.selectedCategory.id === color.id && !this.showRange) {
-        this.data && this.fetchProductColors(String(this.data.id));
-        this.selectedCategory = null;
-      }
-      else {
-        color && this.fetchCategoryColors(color);
-        this.selectedCategory = color;
-      }
-      this.currentColor = null;
-    };
-  }
-  setInfoBoxWidth(newValue) {
-    this.infoBoxWidth = newValue * this.boxWidth;
-  }
-  watchPropHandler(newValue) {
-    if (newValue.categories.data.length > 0) {
-      this.showRange = true;
-      this.handleCategoryClick(newValue.categories.data[0]);
-    }
-    else {
-      this.fetchProductColors(String(newValue.id));
-    }
-  }
-  async open() {
-    this.modalEl.style.display = 'block';
-  }
-  closeModalHandler() {
-    this.close.emit();
-  }
-  closeInfoBoxHandler() {
-    this.currentColor = null;
-    this.currentIndex = null;
-  }
-  handleResize() {
-    this.calculateBoxCount();
-    this.displayForMobile();
-  }
-  async searchColorsHandler(event) {
-    var _a;
-    // if search is empty set to first category to not showing whole product colors
-    if (event.detail === '') {
-      this.handleCategoryClick((_a = this.data) === null || _a === void 0 ? void 0 : _a.categories.data[0]);
-    }
-    try {
-      if (this.data && this.data.id && event.detail !== '') {
-        this.selectedCategory = null;
-        const response = await ApiService.getData(`colors?${fetchColorByNumber(Number(this.data.id), event.detail)}`);
-        if (response) {
-          this.colors = {
-            list: response &&
-              response.data &&
-              response.data.map((item) => (Object.assign({ id: item.id }, item.attributes))),
-            pagination: response.meta.pagination,
-          };
-        }
-      }
-    }
-    catch (error) {
-      console.error(error);
-    }
-  }
-  componentWillLoad() {
-    this.preloader = true;
-    this.fetchProductData();
-  }
-  componentWillRender() {
-    this.displayForMobile();
-    this.calculateBoxCount();
-    this.colorTimer();
-  }
-  render() {
-    var _a, _b, _c, _d, _e, _f, _g;
-    return (h("div", { class: `my-modal` },
-      this.preloader && (h("div", { class: 'loader' },
-        h("my-loader", null))),
-      !this.preloader && (h("button", { class: "my-modal__close", onClick: () => this.closeModalHandler() },
-        h("img", { src: getAssetPath(`./assets/${this.closeImage}`), alt: "closebtn" }))),
-      !this.preloader && this.data && this.data.modalLogo && h("img", { src: `${(_d = (_c = (_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.modalLogo) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.attributes) === null || _d === void 0 ? void 0 : _d.url}`, alt: "modal-logo" }),
-      !this.preloader && (h("p", { class: "my-modal__see-more" }, (_e = this.data) === null || _e === void 0 ? void 0 : _e.modalDescription)),
-      this.showRange && (h("div", { class: 'categories' },
-        this.data && h("my-search", { productId: Number((_f = this.data) === null || _f === void 0 ? void 0 : _f.id), isMobile: this.isMobile }),
-        h("div", { class: 'categories__container', style: { maxWidth: `${this.infoBoxWidth}px` } }, (_g = this.data) === null || _g === void 0 ? void 0 : _g.categories.data.map((c) => {
-          var _a;
-          return (h("my-colorbox", { key: c.id, onClick: () => this.handleCategoryClick(c), color: c.attributes.hex, name: c.attributes.name, shop: this.shop, product: this.product, isCategoryActive: ((_a = this.selectedCategory) === null || _a === void 0 ? void 0 : _a.id) === c.id }));
-        })),
-        this.isMobile && (h("div", { class: 'categories__slide-information', style: { width: `${this.infoBoxWidth}px` } },
-          h("span", null, "Przewi\u0144 w lewo"),
-          h("span", null, "Przewi\u0144 w prawo"))))),
-      h("div", { class: 'my-modal__wrapper' },
-        this.loading && h("my-loader", null),
-        !this.loading && this.colors && (h("div", { class: 'container_boxes' },
-          this.colors.list.length > 0 ? (this.chunks(this.colors.list).map((color, index) => {
-            var _a;
-            return (h("div", { key: index, class: "boxes" },
-              h("div", { class: "boxes__list" }, color.map((c) => {
-                var _a;
-                return (h("my-colorbox", { key: c.id, onClick: () => {
-                    var _a, _b, _c;
-                    return [
-                      ((_a = this.currentColor) === null || _a === void 0 ? void 0 : _a.id) ? (((_b = this.currentColor) === null || _b === void 0 ? void 0 : _b.id) === c.id ? (this.currentColor = null) : (this.currentColor = c)) : (this.currentColor = c),
-                      (this.currentIndex = index),
-                      setDataLayer({
-                        event: 'ColorClick',
-                        shop: this.shop,
-                        product: this.product,
-                        color: c.name,
-                      }),
-                      ((_c = this.currentColor) === null || _c === void 0 ? void 0 : _c.id) && this.clearInterval(),
-                    ];
-                  }, color: c.hex, name: c.name, isActive: ((_a = this.currentColor) === null || _a === void 0 ? void 0 : _a.id) === c.id, shop: this.shop, product: this.product }));
-              })),
-              ((_a = this.currentColor) === null || _a === void 0 ? void 0 : _a.id) && index === this.currentIndex && (h("my-colorinfo", { currentColor: this.currentColor, shop: this.shop, product: this.product, data: this.data, isMobile: this.isMobile, infoBoxWidth: this.infoBoxWidth }))));
-          })) : (h("p", null, "Brak wynik\u00F3w")),
-          this.colors.pagination.pageCount > 1 && (h("div", { class: 'pagination' }, Array.from({ length: this.colors.pagination.pageCount }).map((page, i) => (h("span", { class: i + 1 === this.page ? 'current' : '', onClick: e => {
-              e.preventDefault();
-              this.onPage(i + 1);
-            }, key: `#${i + 1 + page}` }, i + 1))))))))));
-  }
-  static get is() { return "my-modal"; }
-  static get originalStyleUrls() { return {
-    "$": ["my-modal.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["my-modal.css"]
-  }; }
-  static get assetsDirs() { return ["assets"]; }
-  static get properties() { return {
-    "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
-    },
-    "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'"
-    },
-    "arrowDown": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "arrow-down",
-      "reflect": false,
-      "defaultValue": "'arrow_down.png'"
-    }
-  }; }
-  static get states() { return {
-    "chunksNum": {},
-    "data": {},
-    "preloader": {},
-    "loading": {},
-    "colors": {},
-    "currentColor": {},
-    "currentIndex": {},
-    "infoBoxWidth": {},
-    "boxWidth": {},
-    "padding": {},
-    "isMobile": {},
-    "showRange": {},
-    "colorCategories": {},
-    "selectedCategory": {},
-    "page": {}
-  }; }
-  static get events() { return [{
-      "method": "close",
-      "name": "close",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }]; }
-  static get methods() { return {
-    "open": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    }
-  }; }
-  static get elementRef() { return "modalEl"; }
-  static get watchers() { return [{
-      "propName": "chunksNum",
-      "methodName": "setInfoBoxWidth"
-    }, {
-      "propName": "data",
-      "methodName": "watchPropHandler"
-    }]; }
-  static get listeners() { return [{
-      "name": "closeInfoBox",
-      "method": "closeInfoBoxHandler",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "resize",
-      "method": "handleResize",
-      "target": "window",
-      "capture": false,
-      "passive": true
-    }, {
-      "name": "searchColors",
-      "method": "searchColorsHandler",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }]; }
-}

package/dist/collection/components/my-search/assets/search.svg

@@ -1,15 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="21px" height="21px" viewBox="0 0 21 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>search (1)</title>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="E_TT-Copy" transform="translate(-670.000000, -275.000000)" fill="#000000" fill-rule="nonzero">
-            <g id="Group-11" transform="translate(240.477268, 115.000000)">
-                <g id="Group-18" transform="translate(38.010142, 143.000000)">
-                    <g id="search-(1)" transform="translate(392.266523, 17.349138)">
-                        <path d="M8.04938507,16.0918365 C9.8370154,16.0918798 11.5735099,15.4954541 12.9838185,14.3969873 L18.3044575,19.7176263 C18.7019302,20.1014916 19.3352777,20.0904844 19.719143,19.6930117 C20.0936046,19.3052895 20.0936046,18.6906196 19.719143,18.3029407 L14.3985041,12.9823018 C17.12426,9.47351771 16.4895258,4.41943508 12.9807417,1.69367909 C9.47195764,-1.03207689 4.41791834,-0.397342671 1.69216235,3.11144142 C-1.03359363,6.62022552 -0.398859411,11.6743081 3.10992468,14.4000641 C4.5225301,15.4974475 6.26058468,16.0927465 8.04938507,16.0918365 Z M3.77430035,3.77274027 C6.13538859,1.4116087 9.96346822,1.41156536 12.3245998,3.7726536 C14.6857314,6.13374184 14.6857747,9.96182148 12.3246865,12.3229531 C9.96359823,14.6840846 6.1355186,14.684128 3.77438702,12.3230397 C3.77434368,12.3229964 3.77434368,12.3229964 3.77430035,12.3229531 C1.41321211,9.97906898 1.39930143,6.16494336 3.7431855,3.80385512 C3.75354267,3.79345461 3.76389984,3.78309744 3.77430035,3.77274027 Z" id="Shape"></path>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>

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

@@ -1,43 +0,0 @@
-html {
-  font-size: 62.5%;
-}
-
-body {
-  font-size: 1.5rem;
-}
-
-* {
-  font-family: "Galatea", sans-serif;
-}
-
-.search {
-  position: relative;
-  width: 400px;
-}
-@media (max-width: 768px) {
-  .search {
-    width: 100%;
-  }
-}
-.search input {
-  margin-bottom: 12px;
-  font-size: 1.6rem;
-  padding: 19px;
-  border-radius: 27.35px;
-  border: 1px solid #dfdfdf;
-  width: 100%;
-}
-.search button {
-  position: absolute;
-  border: none;
-  background-color: transparent;
-  right: -20px;
-  top: 0;
-  width: 50px;
-  height: calc(100% - 12px);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-}

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

@@ -1,113 +0,0 @@
-import { Component, Prop, h, State, getAssetPath, Event, Watch } from '@stencil/core';
-export class MySearch {
-  constructor() {
-    this.searchIcon = 'search.svg';
-    this.searchText = null;
-    this.fetchColorsByName = (text) => {
-      this.searchColors.emit(text);
-    };
-  }
-  onInputChangeValue(event) {
-    const value = event.target.value;
-    this.searchColors.emit(value);
-    this.searchText = value;
-  }
-  fetchColorsByNameHandle(newValue) {
-    this.fetchColorsByName(newValue);
-  }
-  render() {
-    return (h("div", { class: 'search' },
-      h("input", { placeholder: this.isMobile ? 'Wyszukaj kolor' : 'Wyszukaj kolor po nazwie bądź numerze', value: this.searchText || '', type: "text", onInput: this.onInputChangeValue.bind(this) }),
-      h("button", { onClick: () => {
-          this.searchText && this.fetchColorsByName(this.searchText);
-          this.searchText = '';
-        } },
-        h("img", { src: getAssetPath(`./assets/${this.searchIcon}`), alt: "arrow_down" }))));
-  }
-  static get is() { return "my-search"; }
-  static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() { return {
-    "$": ["my-search.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["my-search.css"]
-  }; }
-  static get assetsDirs() { return ["assets"]; }
-  static get properties() { return {
-    "productId": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "product-id",
-      "reflect": false
-    },
-    "isMobile": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "is-mobile",
-      "reflect": false
-    },
-    "searchIcon": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "search-icon",
-      "reflect": false,
-      "defaultValue": "'search.svg'"
-    }
-  }; }
-  static get states() { return {
-    "searchText": {}
-  }; }
-  static get events() { return [{
-      "method": "searchColors",
-      "name": "searchColors",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }]; }
-  static get watchers() { return [{
-      "propName": "searchText",
-      "methodName": "fetchColorsByNameHandle"
-    }]; }
-}