@ppg_pl/pallete 2.0.4 → 2.0.5

package/dist/cjs/loader.cjs.js

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["my-backdrop_8.cjs",[[2,"my-component",{"shop":[1],"product":[1],"show":[32],"readyToClose":[32],"open":[64]},[[0,"readyToCLose","setReadyToCloseHandler"],[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"]}],[2,"my-loader"],[2,"my-search",{"productId":[2,"product-id"],"isMobile":[4,"is-mobile"],"searchIcon":[1,"search-icon"],"searchText":[32]},[[4,"clearSearchText","clearSearchTextHandler"]]],[0,"my-slider",{"slides":[16],"shop":[1],"product":[1],"color":[1]}]]]], options);
+  return index.bootstrapLazy([["my-backdrop_8.cjs",[[2,"my-component",{"shop":[1],"product":[1],"show":[32],"readyToClose":[32],"open":[64]},[[0,"readyToCLose","setReadyToCloseHandler"],[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"],"isImageInsteadHex":[16]}],[2,"my-loader"],[2,"my-search",{"productId":[2,"product-id"],"isMobile":[4,"is-mobile"],"searchIcon":[1,"search-icon"],"searchText":[32]},[[4,"clearSearchText","clearSearchTextHandler"]]],[0,"my-slider",{"slides":[16],"shop":[1],"product":[1],"color":[1]}]]]], options);
   });
 };
 

package/dist/cjs/my-backdrop_8.cjs.entry.js

@@ -20,6 +20,32 @@ const setDataLayer = (obj) => {
   return window.dataLayer.push(obj);
 };
 
+// DEV/
+// export const APIURL = 'http://57.128.200.45:8055';
+// export const accessToken = '_baZ127gfvFIFmZ5umrrTBUUm6D7ve6p';
+// PROD
+const APIURL = 'http://147.135.211.144:8055'; //'https://pallete-colors-backend.herokuapp.com';
+const accessToken = 'uBKzhiNM4rkdZSe_PQvKJp9pE-DSTmtu';
+class API {
+  async getData(ep) {
+    try {
+      const request = await fetch(`${APIURL}/${ep}`, {
+        method: 'GET',
+        headers: {
+          'Authorization': `Bearer ${accessToken}`,
+          'Content-Type': 'application/json',
+        },
+      });
+      const response = await request.json();
+      return response;
+    }
+    catch (error) {
+      console.error(error);
+    }
+  }
+}
+const ApiService = new API();
+
 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 {
@@ -52,42 +78,21 @@ const MyColorBox = class {
     this.product = undefined;
     this.isActive = undefined;
     this.isCategoryActive = undefined;
+    this.isImageInsteadHex = undefined;
   }
   render() {
+    var _a, _b, _c;
+    console.log(this.color);
     return (index$1.h("div", { onMouseEnter: () => this.colorCheck(), onMouseLeave: () => this.colorUnCheck(), class: `my-color-box ${this.isActive ? 'active' : ''} ${this.isCategoryActive ? 'categoryactive' : ''}`, style: {
-        background: this.color,
+        backgroundSize: ((_a = this.isImageInsteadHex) === null || _a === void 0 ? void 0 : _a.isImageInsteadHex) ? 'cover' : '',
+        backgroundImage: ((_b = this.isImageInsteadHex) === null || _b === void 0 ? void 0 : _b.isImageInsteadHex) ? `url(${APIURL}/assets/${this.isImageInsteadHex.bigImage}?access_token=${accessToken})` : '',
+        background: ((_c = this.isImageInsteadHex) === null || _c === void 0 ? void 0 : _c.isImageInsteadHex) ? this.isImageInsteadHex.bigImage : this.color,
         border: this.isCategoryActive ? `5px solid ${this.darkenColor(this.color)}` : '',
       } }, index$1.h("div", { class: "color-name" }, this.name)));
   }
 };
 MyColorBox.style = myColorboxCss;
 
-// DEV/
-// export const APIURL = 'http://57.128.200.45:8055';
-// export const accessToken = '_baZ127gfvFIFmZ5umrrTBUUm6D7ve6p';
-// PROD
-const APIURL = 'http://147.135.211.144:8055'; //'https://pallete-colors-backend.herokuapp.com';
-const accessToken = 'uBKzhiNM4rkdZSe_PQvKJp9pE-DSTmtu';
-class API {
-  async getData(ep) {
-    try {
-      const request = await fetch(`${APIURL}/${ep}`, {
-        method: 'GET',
-        headers: {
-          'Authorization': `Bearer ${accessToken}`,
-          'Content-Type': 'application/json',
-        },
-      });
-      const response = await request.json();
-      return response;
-    }
-    catch (error) {
-      console.error(error);
-    }
-  }
-}
-const ApiService = new API();
-
 const MyColorInfo = class {
   constructor(hostRef) {
     index$1.registerInstance(this, hostRef);
@@ -2898,7 +2903,10 @@ const MyModal = class {
   }
   render() {
     var _a, _b, _c, _d;
-    return (index$1.h("div", { class: `my-modal`, onMouseEnter: () => this.handleReadyToClose(false), onMouseLeave: () => this.handleReadyToClose(true) }, this.preloader && (index$1.h("div", { class: 'loader' }, index$1.h("my-loader", null))), !this.preloader && (index$1.h("button", { class: "my-modal__close", onClick: () => this.closeModalHandler() }, index$1.h("img", { src: index$1.getAssetPath(`./assets/${this.closeImage}`), alt: "closebtn" }))), !this.preloader && this.data && this.data.modalLogo && index$1.h("img", { src: `${APIURL}/assets/${(_a = this.data) === null || _a === void 0 ? void 0 : _a.modalLogo}?access_token=${accessToken}`, alt: "modal-logo" }), !this.preloader && this.data && (index$1.h("p", { class: "my-modal__see-more" }, (_b = this.data) === null || _b === void 0 ? void 0 : _b.modalDescription)), this.showRange && (index$1.h("div", { class: 'categories' }, this.data && index$1.h("my-search", { productId: Number((_c = this.data) === null || _c === void 0 ? void 0 : _c.id), isMobile: this.isMobile }), index$1.h("div", { class: 'categories__container', style: { maxWidth: `${this.infoBoxWidth}px` } }, (_d = this.data) === null || _d === void 0 ? void 0 : _d.Category.map((c) => (index$1.h("my-colorbox", { key: c.id, onClick: () => this.handleCategoryClick(c.Category_id.id), color: c.Category_id.hex, name: c.Category_id.category_name, shop: this.shop, product: this.product, isCategoryActive: this.selectedCategory === c.Category_id.id })))), this.isMobile && (index$1.h("div", { class: 'categories__slide-information', style: { width: `${this.infoBoxWidth}px` } }, index$1.h("span", null, "Przewi\u0144 w lewo"), index$1.h("span", null, "Przewi\u0144 w prawo"))))), index$1.h("div", { class: 'my-modal__wrapper' }, this.loading && index$1.h("my-loader", null), !this.loading && this.colors && (index$1.h("div", { class: 'container_boxes' }, this.colors.list.length > 0 ? (this.chunks(this.colors.list).map((color, index) => {
+    return (index$1.h("div", { class: `my-modal`, onMouseEnter: () => this.handleReadyToClose(false), onMouseLeave: () => this.handleReadyToClose(true) }, this.preloader && (index$1.h("div", { class: 'loader' }, index$1.h("my-loader", null))), !this.preloader && (index$1.h("button", { class: "my-modal__close", onClick: () => this.closeModalHandler() }, index$1.h("img", { src: index$1.getAssetPath(`./assets/${this.closeImage}`), alt: "closebtn" }))), !this.preloader && this.data && this.data.modalLogo && index$1.h("img", { src: `${APIURL}/assets/${(_a = this.data) === null || _a === void 0 ? void 0 : _a.modalLogo}?access_token=${accessToken}`, alt: "modal-logo" }), !this.preloader && this.data && (index$1.h("p", { class: "my-modal__see-more" }, (_b = this.data) === null || _b === void 0 ? void 0 : _b.modalDescription)), this.showRange && (index$1.h("div", { class: 'categories' }, this.data && index$1.h("my-search", { productId: Number((_c = this.data) === null || _c === void 0 ? void 0 : _c.id), isMobile: this.isMobile }), index$1.h("div", { class: 'categories__container', style: { maxWidth: `${this.infoBoxWidth}px` } }, (_d = this.data) === null || _d === void 0 ? void 0 : _d.Category.map((c) => (index$1.h("my-colorbox", { key: c.id, onClick: () => this.handleCategoryClick(c.Category_id.id), color: c.Category_id.hex, name: c.Category_id.category_name, shop: this.shop, product: this.product, isCategoryActive: this.selectedCategory === c.Category_id.id, isImageInsteadHex: {
+        isImageInsteadHex: (c === null || c === void 0 ? void 0 : c.imageInsteadHex) || false,
+        bigImage: (c === null || c === void 0 ? void 0 : c.bigImage) || '',
+      } })))), this.isMobile && (index$1.h("div", { class: 'categories__slide-information', style: { width: `${this.infoBoxWidth}px` } }, index$1.h("span", null, "Przewi\u0144 w lewo"), index$1.h("span", null, "Przewi\u0144 w prawo"))))), index$1.h("div", { class: 'my-modal__wrapper' }, this.loading && index$1.h("my-loader", null), !this.loading && this.colors && (index$1.h("div", { class: 'container_boxes' }, this.colors.list.length > 0 ? (this.chunks(this.colors.list).map((color, index) => {
       var _a;
       return (index$1.h("div", { key: index, class: "boxes" }, index$1.h("div", { class: "boxes__list" }, color.map((c) => {
         var _a;
@@ -2915,7 +2923,10 @@ const MyModal = class {
               }),
               ((_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 }));
+          }, 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, isImageInsteadHex: {
+            isImageInsteadHex: c.imageInsteadHex,
+            bigImage: c.bigImage,
+          } }));
       })), ((_a = this.currentColor) === null || _a === void 0 ? void 0 : _a.id) && index === this.currentIndex && (index$1.h("my-colorinfo", { currentColor: this.currentColor, shop: this.shop, product: this.product, data: this.data, isMobile: this.isMobile, infoBoxWidth: this.infoBoxWidth }))));
     })) : (index$1.h("p", null, "Brak wynik\u00F3w")), this.colors.pagination.filter_count > limit && (index$1.h("div", { class: 'pagination' }, Array.from({ length: Math.ceil(this.colors.pagination.filter_count / limit) }).map((_, i) => (index$1.h("span", { class: i + 1 === this.page ? 'current' : '', onClick: e => {
         e.preventDefault();