@ppg_pl/pallete 2.0.11 → 2.0.13

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],"baselink":[1],"show":[32],"readyToClose":[32],"open":[64]},[[0,"readyToCLose","setReadyToCloseHandler"],[0,"close","closeModalHandler"]]],[0,"my-modal",{"shop":[1],"product":[1],"baselink":[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],"baselink":[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);
+  return index.bootstrapLazy([["my-backdrop_8.cjs",[[2,"my-component",{"shop":[1],"product":[1],"baselink":[1],"show":[32],"readyToClose":[32],"open":[64],"close":[64]},[[0,"readyToCLose","setReadyToCloseHandler"],[0,"close","closeModalHandler"]]],[0,"my-modal",{"shop":[1],"product":[1],"baselink":[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],"baselink":[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

@@ -46,7 +46,7 @@ class API {
 }
 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 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:65px;height:65px}}.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) {
@@ -96,10 +96,8 @@ const MyColorInfo = class {
   constructor(hostRef) {
     index$1.registerInstance(this, hostRef);
     this.closeInfoBox = index$1.createEvent(this, "closeInfoBox", 7);
-    this.close = index$1.createEvent(this, "close", 7);
-    this.goToProduct = (e) => {
+    this.goToProduct = () => {
       var _a;
-      e.preventDefault();
       this.currentColor &&
         setDataLayer({
           event: 'GoToProduct',
@@ -107,8 +105,7 @@ const MyColorInfo = class {
           product: this.product,
           color: (_a = this.currentColor) === null || _a === void 0 ? void 0 : _a.name,
         });
-      this.getHref();
-      this.closeModalHandler();
+      this.closeInfoBox.emit();
     };
     this.onCloseButtonClick = () => {
       this.closeInfoBox.emit();
@@ -124,12 +121,12 @@ const MyColorInfo = class {
     };
     this.getHref = () => {
       var _a, _b, _c, _d;
-      let link;
       if (this.baselink) {
-        link = `${this.baselink}/${(_b = (_a = this === null || this === void 0 ? void 0 : this.currentColor.links) === null || _a === void 0 ? void 0 : _a.find((link) => (link === null || link === void 0 ? void 0 : link.shop) === this.shop)) === null || _b === void 0 ? void 0 : _b.path}`;
+        return `${this.baselink}/${(_b = (_a = this === null || this === void 0 ? void 0 : this.currentColor.links) === null || _a === void 0 ? void 0 : _a.find((link) => (link === null || link === void 0 ? void 0 : link.shop) === this.shop)) === null || _b === void 0 ? void 0 : _b.path}`;
+      }
+      else {
+        return (_d = (_c = this === null || this === void 0 ? void 0 : this.currentColor.links) === null || _c === void 0 ? void 0 : _c.find((link) => (link === null || link === void 0 ? void 0 : link.shop) === this.shop)) === null || _d === void 0 ? void 0 : _d.path;
       }
-      link = (_d = (_c = this === null || this === void 0 ? void 0 : this.currentColor.links) === null || _c === void 0 ? void 0 : _c.find((link) => (link === null || link === void 0 ? void 0 : link.shop) === this.shop)) === null || _d === void 0 ? void 0 : _d.path;
-      window.open(link, '_self');
     };
     this.capitalizeFirstLetter = (string) => {
       return string.charAt(0).toUpperCase() + string.slice(1).toLocaleLowerCase();
@@ -143,9 +140,6 @@ const MyColorInfo = class {
     this.infoBoxWidth = undefined;
     this.closeImage = 'close.png';
   }
-  closeModalHandler() {
-    this.close.emit();
-  }
   render() {
     var _a;
     return (index$1.h("div", { class: `boxes__box-content ${this.currentColor.textWhite ? 'boxes__box-content__white' : ''}`, style: {
@@ -153,7 +147,7 @@ const MyColorInfo = class {
         maxWidth: `${this.infoBoxWidth && this.infoBoxWidth - 4}px`,
       } }, this.isMobile && index$1.h("img", { class: 'closebtn', onClick: this.onCloseButtonClick, src: index$1.getAssetPath(`./assets/${this.closeImage}`), alt: "closebtn" }), index$1.h("div", { class: "boxes__box-content__info", style: {
         maxWidth: this.isMobile ? `${this.infoBoxWidth && this.infoBoxWidth - 35}px` : ``,
-      } }, !this.isMobile && index$1.h("img", { class: 'closebtn', onClick: this.onCloseButtonClick, src: index$1.getAssetPath(`./assets/${this.closeImage}`), alt: "closebtn" }), !this.isMobile && index$1.h("h2", null, this.capitalizeFirstLetter(this.currentColor.name)), !this.isMobile && index$1.h("h4", null, this.currentColor.number), index$1.h("div", { class: "boxes__box-content__info__value" }, index$1.h("div", { class: "boxes__box-content__info__value-product" }, this.isMobile && index$1.h("div", { class: 'divider' }), this.currentColor && ((_a = this.currentColor.links) === null || _a === void 0 ? void 0 : _a.find((link) => (link === null || link === void 0 ? void 0 : link.shop) === this.shop)) && (index$1.h("button", { onClick: this.goToProduct, class: `button ${this.currentColor.imageInsteadHex ? 'brown' : this.currentColor.buttonInverse ? 'inverse' : ''}` }, "wybierz kolor"))))), index$1.h("div", { class: "boxes__box-content__slider" }, this.renderSliderOrImage())));
+      } }, !this.isMobile && index$1.h("img", { class: 'closebtn', onClick: this.onCloseButtonClick, src: index$1.getAssetPath(`./assets/${this.closeImage}`), alt: "closebtn" }), !this.isMobile && index$1.h("h2", null, this.capitalizeFirstLetter(this.currentColor.name)), !this.isMobile && index$1.h("h4", null, this.currentColor.number), index$1.h("div", { class: "boxes__box-content__info__value" }, index$1.h("div", { class: "boxes__box-content__info__value-product" }, this.isMobile && index$1.h("div", { class: 'divider' }), this.currentColor && ((_a = this.currentColor.links) === null || _a === void 0 ? void 0 : _a.find((link) => (link === null || link === void 0 ? void 0 : link.shop) === this.shop)) && (index$1.h("a", { onClick: this.goToProduct, href: this.getHref(), class: `button ${this.currentColor.imageInsteadHex ? 'brown' : this.currentColor.buttonInverse ? 'inverse' : ''}` }, "wybierz kolor"))))), index$1.h("div", { class: "boxes__box-content__slider" }, this.renderSliderOrImage())));
   }
 };
 
@@ -287,6 +281,9 @@ const MyModalBundle = class {
   async open() {
     this.show = true;
   }
+  async close() {
+    this.show = false;
+  }
   setReadyToCloseHandler(value) {
     this.readyToClose = value.detail.observable;
   }
@@ -2695,7 +2692,7 @@ const MyModal = class {
     this.close = index$1.createEvent(this, "close", 7);
     this.readyToCLose = index$1.createEvent(this, "readyToCLose", 7);
     this.boxDesktopWidth = 130;
-    this.boxMobileWidth = 85;
+    this.boxMobileWidth = 70;
     this.desktopPadding = 75;
     this.mobilePadding = 35;
     this.mediumBreakpoint = 1024;
@@ -8287,7 +8284,7 @@ const JcSwiper = class {
   render() {
     return (index$1.h("div", { class: "slider-wrapper" }, index$1.h("div", { class: "swiper mySwiper2" }, index$1.h("div", { class: "swiper-wrapper" }, this.slides &&
       this.slides.length > 0 &&
-      this.slides.map((slide) => (index$1.h("div", { key: slide.id, class: "swiper-slide" }, index$1.h("img", { src: `${APIURL}/assets/${slide.directus_files_id}?access_token=${accessToken}`, alt: "room_image" }))))), index$1.h("div", { onClick: this.colorInteraction, class: "swiper-button-next" }), index$1.h("div", { onClick: this.colorInteraction, class: "swiper-button-prev" })), index$1.h("div", { class: "swiper mySwiper" }, index$1.h("div", { class: "swiper-wrapper" }, this.slides &&
+      this.slides.map((slide) => (index$1.h("div", { key: slide.id, class: "swiper-slide" }, index$1.h("img", { src: `${APIURL}/assets/${slide.directus_files_id}?access_token=${accessToken}`, alt: "room_image" }))))), this.slides && this.slides.length >= 2 && (index$1.h("div", null, index$1.h("div", { onClick: this.colorInteraction, class: "swiper-button-next" }), index$1.h("div", { onClick: this.colorInteraction, class: "swiper-button-prev" })))), index$1.h("div", { class: "swiper mySwiper" }, index$1.h("div", { class: "swiper-wrapper" }, this.slides &&
       this.slides.length > 0 &&
       this.slides.map((slide) => (index$1.h("div", { key: slide.id, class: "swiper-slide" }, index$1.h("img", { src: `${APIURL}/assets/${slide.directus_files_id}?access_token=${accessToken}`, alt: "room_image" }))))))));
   }