@covet-pics/covet-pics-widget 0.134.7 → 0.134.8

package/dist/cjs/covet-pics-gallery-grid_3.cjs.entry.js

@@ -3340,7 +3340,7 @@ const CovetPicsGalleryGrid = class {
       event.preventDefault();
       event.stopPropagation();
       const filter = event.target.dataset.filter;
-      if (!this.filtersMultiselect) {
+      if (!this.settings.multiple_filter_enabled) {
         this.resetFilters();
       }
       this.filters[filter] = !this.filters[filter];
@@ -3364,48 +3364,18 @@ const CovetPicsGalleryGrid = class {
         this.nextPage.emit(event);
       }
     };
-    this.desktopPhotosPerRow = 4;
-    this.desktopItemPadding = 1;
-    this.mobilePhotosPerRow = 2;
-    this.mobileItemPadding = 0;
     this.imagesToShow = 9;
-    this.layout = "grid";
-    this.highlightEnabled = false;
-    this.highlightEvery = 0;
-    this.highlightStartsFrom = 0;
     this.items = [];
     this.breakdown = [];
     this.productTitle = "";
     this.rating = 0;
-    this.ratingCount = 0;
-    this.loadMoreBorder = 4;
-    this.loadMoreColor = "#000000";
-    this.loadMoreFontSize = 14;
-    this.loadMoreFontStyle = "bold";
-    this.loadMoreLabel = "MORE";
-    this.loadMorePadding = 6;
-    this.loadMoreStyle = "btn_style_1";
-    this.loadMoreMode = "button";
-    this.showHeader = false;
-    this.headerType = "header-1";
-    this.headerShowAverageRating = true;
-    this.headerShowBreakdown = true;
-    this.headerShowSort = true;
     this.filtersEnabled = false;
-    this.filtersMultiselect = false;
     this.filters = {};
-    this.filtersResetLabel = undefined;
-    this.filtersPadding = undefined;
-    this.filtersColor = undefined;
-    this.filtersFontSize = undefined;
-    this.filtersFontWeight = undefined;
-    this.itemStyle = "standard";
     this.loader = undefined;
     this.appStore = undefined;
     this.sharedItemId = undefined;
     this.isLoading = false;
     this.showSort = false;
-    this.showBreakdown = false;
     this.isGridDisabled = false;
     this.isDesktopScreen = undefined;
   }
@@ -3464,7 +3434,7 @@ const CovetPicsGalleryGrid = class {
     this.emitGalleryReadyEvent();
     this.bindCustomUploadWidgetButtons();
     this.checkAndOpenPopup();
-    if (this.loadMoreMode === "infinite_scroll") {
+    if (this.settings.pagination === "infinite_scroll") {
       window.addEventListener("scroll", this.scrollHandler, { passive: true });
     }
   }
@@ -3479,9 +3449,13 @@ const CovetPicsGalleryGrid = class {
   }
   initStore() {
     this.appState = this.appStore.getState();
+    this.settings = this.appState.settings;
+    this.layout = this.appState.settings.display_type;
     this.isDesktopScreen = this.appState.size.isDesktopScreen;
     this.unsubscribe = this.appStore.subscribe(() => {
       this.appState = this.appStore.getState();
+      this.settings = this.appState.settings;
+      this.layout = this.appState.settings.display_type;
       this.isDesktopScreen = this.appState.size.isDesktopScreen;
       this.isGridDisabled = getters.isWidgetDisabled(this.appState);
     });
@@ -3492,15 +3466,15 @@ const CovetPicsGalleryGrid = class {
   isHighlighted(index) {
     if (this.layout === "collage")
       return false;
-    if (!this.highlightEnabled)
+    if (!this.settings.gallery_highlight)
       return false;
-    if (this.highlightEvery === 0)
+    if (this.settings.gallery_highlight_every === 0)
       return false;
     let position = (index + 1) % this.imagesToShow;
     if (position === 0)
       position = this.imagesToShow;
-    const start = this.highlightStartsFrom + 1;
-    const every = this.highlightEvery;
+    const start = this.settings.gallery_highlight_every_start + 1;
+    const every = this.settings.gallery_highlight_every;
     if (every < 0)
       return false;
     if (position < start)
@@ -3509,7 +3483,7 @@ const CovetPicsGalleryGrid = class {
     return (highlightOffset % every) === 0;
   }
   bindCustomUploadWidgetButtons() {
-    const selector = this.appState.settings.customer_photo_upload_button_selector;
+    const selector = this.settings.customer_photo_upload_button_selector;
     if (selector !== "") {
       const nodes = document.querySelectorAll(selector);
       nodes.forEach(node => {
@@ -3530,14 +3504,14 @@ const CovetPicsGalleryGrid = class {
     if (this.appState.preview.mode) {
       document.querySelectorAll("covet-pics-upload").forEach(uploadWidget => uploadWidget.remove());
     }
-    if (this.appState.settings.customer_photo_item_position !== null || this.appState.settings.customer_photo_upload_button_selector !== "" || this.showHeader) {
+    if (this.settings.customer_photo_item_position !== null || this.settings.customer_photo_upload_button_selector !== "" || this.settings.show_header) {
       this.upload = document.createElement("covet-pics-upload");
       this.upload.appStore = this.appStore;
       document.body.appendChild(this.upload);
     }
   }
   preloadNextPage(event) {
-    if (this.lastItemIndex === this.selectedItemIndex && this.loadMoreMode !== "none") {
+    if (this.lastItemIndex === this.selectedItemIndex && this.settings.pagination !== "none") {
       this.nextPage.emit(event);
     }
   }
@@ -3570,15 +3544,15 @@ const CovetPicsGalleryGrid = class {
   }
   setLoadMoreButtonVariables() {
     return {
-      "--covet-pics-load-more-border": this.loadMoreBorder.toString() + "px",
-      "--covet-pics-load-more-color": this.loadMoreColor,
-      "--covet-pics-load-more-font-size": this.loadMoreFontSize.toString() + "px",
-      "--covet-pics-load-more-font-style": this.loadMoreFontStyle,
-      "--covet-pics-load-more-padding": this.loadMorePadding.toString() + "px"
+      "--covet-pics-load-more-border": this.settings.load_more_border_width.toString() + "px",
+      "--covet-pics-load-more-color": this.settings.load_more_button_color,
+      "--covet-pics-load-more-font-size": this.settings.load_more_font_size.toString() + "px",
+      "--covet-pics-load-more-font-style": this.settings.load_more_font_style,
+      "--covet-pics-load-more-padding": this.settings.load_more_padding.toString() + "px"
     };
   }
   renderLoadMoreIcon() {
-    switch (this.loadMoreStyle) {
+    switch (this.settings.load_more_button_style) {
       case "btn_style_3":
         return (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 14 14" }, index.h("g", { fill: "none", "fill-rule": "evenodd" }, index.h("path", { d: "M-3-3h20v20H-3z" }), index.h("path", { class: "dynamic-stroke", stroke: "#919EAB", d: "M11.125 5.542L7 9.666 2.875 5.542" }))));
       case "btn_style_4":
@@ -3588,11 +3562,11 @@ const CovetPicsGalleryGrid = class {
     }
   }
   rederLoadMoreButton() {
-    if (this.loadMoreMode === "button" &&
+    if (this.settings.pagination === "button" &&
       !this.isLoading &&
       this.loader.totalPages > this.loader.page &&
       this.items.length > 0) {
-      return (index.h("div", { class: 'load-more', style: this.setLoadMoreButtonVariables(), onClick: this.loadMoreClickedHandler }, index.h("button", { class: "btn-load-more " + this.loadMoreStyle, "aria-label": "load more items", disabled: this.isGridDisabled, "aria-hidden": `${this.isGridDisabled}`, type: "button" }, index.h("span", { class: "text" }, this.loadMoreLabel), index.h("span", { class: "icon", "aria-hidden": "true" }, this.renderLoadMoreIcon()))));
+      return (index.h("div", { class: 'load-more', style: this.setLoadMoreButtonVariables(), onClick: this.loadMoreClickedHandler }, index.h("button", { class: "btn-load-more " + this.settings.load_more_button_style, "aria-label": "load more items", disabled: this.isGridDisabled, "aria-hidden": `${this.isGridDisabled}`, type: "button" }, index.h("span", { class: "text" }, this.settings.load_more_text), index.h("span", { class: "icon", "aria-hidden": "true" }, this.renderLoadMoreIcon()))));
     }
   }
   renderLoadingAnimation() {
@@ -3625,14 +3599,14 @@ const CovetPicsGalleryGrid = class {
   }
   getFilterCSSVariables() {
     return {
-      "--covet-pics-filter-font-weight": this.filtersFontWeight.toLowerCase(),
-      "--covet-pics-filter-font-size": `${this.filtersFontSize}px`,
-      "--covet-pics-filter-font-color": this.filtersColor,
-      "--covet-pics-filter-padding": `${this.filtersPadding}%`,
+      "--covet-pics-filter-font-weight": this.settings.tags_font_weight.toLowerCase(),
+      "--covet-pics-filter-font-size": `${this.settings.tags_font_size}px`,
+      "--covet-pics-filter-font-color": this.settings.tags_color,
+      "--covet-pics-filter-padding": `${this.settings.tags_padding}%`,
     };
   }
   renderFilters() {
-    return (index.h("div", { class: "filters", style: this.getFilterCSSVariables(), "aria-hidden": `${this.isGridDisabled}` }, index.h("button", { tabindex: "0", class: "btn-filter", "data-reset-filters": "true", onClick: this.filterResetHandler, "aria-label": "reset filters", disabled: this.isGridDisabled, type: "reset" }, this.filtersResetLabel), Object.keys(this.filters).map((filter) => index.h("button", { tabindex: "0", "data-filter": filter, class: `btn-filter ${this.filters[filter] ? "selected" : ""}`, onClick: this.filterChangedHandler, "aria-label": `filter ${filter}`, disabled: this.isGridDisabled, type: "button" }, filter))));
+    return (index.h("div", { class: "filters", style: this.getFilterCSSVariables(), "aria-hidden": `${this.isGridDisabled}` }, index.h("button", { tabindex: "0", class: "btn-filter", "data-reset-filters": "true", onClick: this.filterResetHandler, "aria-label": "reset filters", disabled: this.isGridDisabled, type: "reset" }, this.settings.tags_reset_button_text), Object.keys(this.filters).map((filter) => index.h("button", { tabindex: "0", "data-filter": filter, class: `btn-filter ${this.filters[filter] ? "selected" : ""}`, onClick: this.filterChangedHandler, "aria-label": `filter ${filter}`, disabled: this.isGridDisabled, type: "button" }, filter))));
   }
   itemImgAltTag(caption, idx, itemsLength, createdTime, layout) {
     return caption && caption.length > 0
@@ -3641,9 +3615,9 @@ const CovetPicsGalleryGrid = class {
   }
   renderStandardItem(item, idx, itemsLength) {
     const itemWidth = this.isDesktopScreen
-      ? (100 - (this.desktopItemPadding * (this.desktopPhotosPerRow - 1))) / this.desktopPhotosPerRow
-      : (100 - (this.mobileItemPadding * (this.mobilePhotosPerRow - 1))) / this.mobilePhotosPerRow;
-    return (index.h("covet-pics-gallery-item", { class: { "grid-item": this.layout === "grid", "collage-item": this.layout === "collage" }, highlighted: this.isHighlighted(idx), "image-url": utils$1.getCoverImage(item.cover_images.medium_resolution, item.images.medium_resolution), "image-high-resolution-url": utils$1.getCoverImage(item.cover_images.high_resolution, item.images.high_resolution), "image-responsive-sizes": utils$1.getSizesForResponsiveImage(this.desktopPhotosPerRow, this.mobilePhotosPerRow, this.isHighlighted(idx)), "item-id": item.id, "item-source": item.source, "item-index": idx, caption: item.caption, "item-type": item.data_type, links: item.links, layout: this.layout, url: item.url, rating: item.rating !== null ? item.rating : 0, "user-name": item.username, "item-width": itemWidth, "created-time": item.created_time, role: "listitem", "aria-label": `${this.layout}-item ${idx + 1}/${itemsLength}, post created ${utils$1.getDateFromTimestamp(item.created_time)}`, "alt-tag": this.itemImgAltTag(item.caption, idx, itemsLength, item.created_time, this.layout), appStore: this.appStore }));
+      ? (100 - (this.settings.item_padding * (this.settings.gallery_photos_per_row - 1))) / this.settings.gallery_photos_per_row
+      : (100 - (this.settings.item_mobile_padding * (this.settings.gallery_mobile_photos_per_row - 1))) / this.settings.gallery_mobile_photos_per_row;
+    return (index.h("covet-pics-gallery-item", { class: { "grid-item": this.layout === "grid", "collage-item": this.layout === "collage" }, highlighted: this.isHighlighted(idx), "image-url": utils$1.getCoverImage(item.cover_images.medium_resolution, item.images.medium_resolution), "image-high-resolution-url": utils$1.getCoverImage(item.cover_images.high_resolution, item.images.high_resolution), "image-responsive-sizes": utils$1.getSizesForResponsiveImage(this.settings.gallery_photos_per_row, this.settings.gallery_mobile_photos_per_row, this.isHighlighted(idx)), "item-id": item.id, "item-source": item.source, "item-index": idx, caption: item.caption, "item-type": item.data_type, links: item.links, layout: this.layout, url: item.url, rating: item.rating !== null ? item.rating : 0, "user-name": item.username, "item-width": itemWidth, "created-time": item.created_time, role: "listitem", "aria-label": `${this.layout}-item ${idx + 1}/${itemsLength}, post created ${utils$1.getDateFromTimestamp(item.created_time)}`, "alt-tag": this.itemImgAltTag(item.caption, idx, itemsLength, item.created_time, this.layout), appStore: this.appStore }));
   }
   renderStandardUploadItem(item, idx, itemsLength) {
     return index.h("covet-pics-gallery-item", { class: { "grid-item": this.layout === "grid", "collage-item": this.layout === "collage" }, "image-url": item.imageUrl, "item-source": item.source, "item-index": idx, appStore: this.appStore, "aria-label": `click on for upload image in gallery, ${this.layout}-item ${idx + 1}/${itemsLength},`, role: "listitem" });
@@ -3653,18 +3627,20 @@ const CovetPicsGalleryGrid = class {
   }
   renderDetailItem(item, idx, itemsLength) {
     const itemWidth = this.isDesktopScreen
-      ? (100 - (this.desktopItemPadding * (this.desktopPhotosPerRow - 1))) / this.desktopPhotosPerRow
-      : (100 - (this.mobileItemPadding * (this.mobilePhotosPerRow - 1))) / this.mobilePhotosPerRow;
-    return index.h("covet-pics-gallery-item-detail", { class: { "grid-item": this.layout === "grid", "collage-item": this.layout === "collage", "highlighted": this.isHighlighted(idx) }, highlighted: this.isHighlighted(idx), "image-url": utils$1.getCoverImage(item.cover_images.medium_resolution, item.images.medium_resolution), "image-high-resolution-url": utils$1.getCoverImage(item.cover_images.high_resolution, item.images.high_resolution), "image-responsive-sizes": utils$1.getSizesForResponsiveImage(this.desktopPhotosPerRow, this.mobilePhotosPerRow), "item-id": item.id, "item-index": idx, "item-source": item.source, "item-type": item.data_type, "item-width": itemWidth, links: item.links, url: item.url, layout: this.layout, "user-name": item.username, caption: item.caption, "created-time": item.created_time, verified: item.verified, rating: item.rating !== null ? item.rating : 0, role: "listitem", "aria-label": `${this.layout}-item ${idx + 1}/${itemsLength}, post created ${utils$1.getDateFromTimestamp(item.created_time)}`, "alt-tag": this.itemImgAltTag(item.caption, idx, itemsLength, item.created_time, this.layout), appStore: this.appStore });
+      ? (100 - (this.settings.item_padding * (this.settings.gallery_photos_per_row - 1))) / this.settings.gallery_photos_per_row
+      : (100 - (this.settings.item_mobile_padding * (this.settings.gallery_mobile_photos_per_row - 1))) / this.settings.gallery_mobile_photos_per_row;
+    return index.h("covet-pics-gallery-item-detail", { class: { "grid-item": this.layout === "grid", "collage-item": this.layout === "collage", "highlighted": this.isHighlighted(idx) }, highlighted: this.isHighlighted(idx), "image-url": utils$1.getCoverImage(item.cover_images.medium_resolution, item.images.medium_resolution), "image-high-resolution-url": utils$1.getCoverImage(item.cover_images.high_resolution, item.images.high_resolution), "image-responsive-sizes": utils$1.getSizesForResponsiveImage(this.settings.gallery_photos_per_row, this.settings.gallery_mobile_photos_per_row), "item-id": item.id, "item-index": idx, "item-source": item.source, "item-type": item.data_type, "item-width": itemWidth, links: item.links, url: item.url, layout: this.layout, "user-name": item.username, caption: item.caption, "created-time": item.created_time, verified: item.verified, rating: item.rating !== null ? item.rating : 0, role: "listitem", "aria-label": `${this.layout}-item ${idx + 1}/${itemsLength}, post created ${utils$1.getDateFromTimestamp(item.created_time)}`, "alt-tag": this.itemImgAltTag(item.caption, idx, itemsLength, item.created_time, this.layout), appStore: this.appStore });
   }
   renderHeader() {
-    return (index.h("covet-pics-gallery-header", { "product-title": this.productTitle, rating: this.rating, "rating-count": this.ratingCount, breakdown: this.breakdown, "header-type": this.headerType, "show-sort": this.headerShowSort.toString(), "show-average-star-rating": this.headerShowAverageRating.toString(), "show-breakdown": this.showBreakdown.toString(), appStore: this.appStore, "aria-hidden": `${this.isGridDisabled}` }));
+    return (index.h("covet-pics-gallery-header", { "product-title": this.productTitle, rating: this.rating, "rating-count": this.settings.gallery_photos_count, breakdown: this.breakdown, "header-type": this.settings.header_type, "show-sort": this.settings.header_show_sort, "show-average-star-rating": this.settings.header_show_average_rating, "show-breakdown": this.settings.header_show_breakdown,
+      // TODO remove props drilling END
+      appStore: this.appStore, "aria-hidden": `${this.isGridDisabled}` }));
   }
   render() {
     if (typeof this.items !== "undefined" && typeof this.loader !== "undefined") {
-      return (index.h(index.Host, { role: "region" }, this.showHeader && this.renderHeader(), this.filtersEnabled && this.renderFilters(), index.h("div", { class: `gallery ${this.layout}`, style: utils$1.setCovetItemSizeVariables(this.desktopPhotosPerRow, this.desktopItemPadding, this.mobilePhotosPerRow, this.mobileItemPadding), role: "list", "aria-label": `gallery of ${this.items.length} items` }, this.layout === "collage" && index.h("div", { class: "grid-sizer" }), this.layout === "collage" && index.h("div", { class: "gutter-sizer" }), this.itemStyle === "standard" && this.items.map((item, idx) => item.source === "upload_widget"
+      return (index.h(index.Host, { role: "region" }, this.settings.show_header && this.renderHeader(), this.filtersEnabled && this.renderFilters(), index.h("div", { class: `gallery ${this.layout}`, style: utils$1.setCovetItemSizeVariables(this.settings.gallery_photos_per_row, this.settings.item_padding, this.settings.gallery_mobile_photos_per_row, this.settings.item_mobile_padding), role: "list", "aria-label": `gallery of ${this.items.length} items` }, this.layout === "collage" && index.h("div", { class: "grid-sizer" }), this.layout === "collage" && index.h("div", { class: "gutter-sizer" }), this.settings.item_style === "standard" && this.items.map((item, idx) => item.source === "upload_widget"
         ? this.renderStandardUploadItem(item, idx, this.items.length)
-        : this.renderStandardItem(item, idx, this.items.length)), this.itemStyle !== "standard" && this.items.map((item, idx) => item.source === "upload_widget"
+        : this.renderStandardItem(item, idx, this.items.length)), this.settings.item_style !== "standard" && this.items.map((item, idx) => item.source === "upload_widget"
         ? this.renderDetailUploadItem(item, idx, this.items.length)
         : this.renderDetailItem(item, idx, this.items.length))), this.renderLoadingAnimation(), this.rederLoadMoreButton()));
     }