@covet-pics/covet-pics-widget 0.105.0 → 0.105.2

package/dist/cjs/covet-pics-direct-buy_6.cjs.entry.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-d4e21dc3.js');
 const utils = require('./utils-d86c6d1c.js');
 const lazy = require('./lazy-68db6903.js');
-const index$1 = require('./index-f1a3a5de.js');
+const fragment = require('./fragment-29c21ac8.js');
 const _commonjsHelpers = require('./_commonjsHelpers-b66a770d.js');
 const store = require('./store-90bc6cce.js');
 
@@ -4253,7 +4253,7 @@ const CovetPicsPopup = class {
       index.h("h3", { class: "shop-this-look" }, this.linksTitle), this.item.links.length > 0 &&
       index.h("covet-pics-popup-links", { links: this.item.links, "item-created-time": this.item.created_time, "direct-buy-enabled": this.directBuyEnabled.toString(), "link-style": this.loader.data.settings.popup_products_view_type.replace("_view", ""), "button-style": this.loader.data.settings.popup_buy_button_style.replace("buy_btn_", "").replace("_", "-"), "button-color": this.loader.data.settings.popup_buy_button_background_color, "button-hover-color": this.loader.data.settings.popup_buy_button_background_hover_color, "button-text-color": this.loader.data.settings.popup_buy_button_text_color, "button-text-hover-color": this.loader.data.settings.popup_buy_button_text_hover_color, "button-buy-now-label": this.loader.data.settings.popup_products_button_caption, "button-visit-label": this.loader.data.settings.popup_custom_link_label, "price-label": this.loader.data.settings.price_label_caption, "select-label": this.loader.data.settings.select_label_caption, "show-price": this.loader.data.settings.show_price_in_popup, "show-out-of-stock-products": this.loader.data.settings.popup_show_out_of_stock, "grey-border-class": greyBorderClass }), this.item.rating && !starOnly && !(this.item.data_type === "text") &&
       index.h("div", { class: "star-rating" }, starsArray.map((el) => index.h("span", { class: `icon-star ${el <= this.item.rating ? "active" : ""}` }))), this.item.caption && !(this.item.data_type === "text") &&
-      index.h(index$1.Fragment, null, index.h("div", { class: "caption", innerHTML: this.item.caption }), !(this.item.source === "instagram") &&
+      index.h(fragment.Fragment, null, index.h("div", { class: "caption", innerHTML: this.item.caption }), !(this.item.source === "instagram") &&
         index.h("p", { class: "source" }, this.item.verified && this.renderVerifiedIcon(), this.item.username)), this.item.source === "instagram" &&
       index.h("p", { class: "source" }, index.h("a", { target: "_blank", href: this.item.url, "aria-label": "Instagram link" }, "@", this.item.username)), this.item.source === "file" && this.item.username !== null &&
       index.h("p", { class: "source" }, this.item.verified && this.renderVerifiedIcon(), this.item.username)), this.arrowsDesktopType === "arrows-type-5" && this.arrowsDesktopPosition === "bottom" &&
@@ -4635,7 +4635,7 @@ const CovetPicsPopupReviewElement = class {
     const starOnlyClass = this.caption === null ? "star-only" : "";
     const starOnly = this.caption === null && this.itemType === "text";
     const verifiedClass = this.verified ? "verified" : "";
-    return (index.h(index.Host, { class: `popup-review ${starOnlyClass}`, style: this.reviewCSS }, index.h("div", { class: `review-top ${starOnlyClass}` }, starsArray.map((el) => index.h("span", { class: `review-star ${el <= this.rating ? "active" : ""}` }, index.h("svg", { class: "svg-star", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", role: "img" }, index.h("title", null, "star rating"), index.h("path", { d: "M4.10511 3.85963C4.10511 3.85963 1.83465 4.12327 0.320057 4.29953C0.183543 4.31685 0.0628347 4.41251 0.0175692 4.55789C-0.0276963 4.70327 0.0175691 4.85467 0.118159 4.95033C1.24333 6.02672 2.93396 7.63867 2.93396 7.63867C2.93252 7.63867 2.46981 9.98349 2.16229 11.548C2.13642 11.6896 2.18529 11.8395 2.30312 11.9291C2.42023 12.0188 2.57112 12.0203 2.68967 11.9503C4.01458 11.1609 5.99907 9.97371 5.99907 9.97371C5.99907 9.97371 7.98429 11.1609 9.30703 11.951C9.42772 12.0203 9.57866 12.0188 9.69574 11.9291C9.8136 11.8395 9.86246 11.6896 9.83589 11.5488C9.52834 9.98349 9.06634 7.63867 9.06634 7.63867C9.06634 7.63867 10.757 6.02672 11.8821 4.95259C11.9828 4.85391 12.0273 4.70252 11.9828 4.55789C11.9382 4.41327 11.8175 4.31761 11.681 4.30103C10.1664 4.12327 7.8952 3.85963 7.8952 3.85963C7.8952 3.85963 6.95397 1.67673 6.32671 0.221454C6.2678 0.0911426 6.14422 0 5.99907 0C5.85394 0 5.72964 0.091896 5.67359 0.221454C5.04563 1.67673 4.10511 3.85963 4.10511 3.85963Z" }))))), index.h("p", { class: `review-caption  ${starOnlyClass} ${verifiedClass}`, innerHTML: this.caption }, this.verified && starOnly && this.renderVerified()), index.h("div", { class: `review-bottom  ${starOnlyClass}` }, index.h("p", { class: "username" }, this.username), this.createdTime && index.h("span", { class: "slash" }, "/"), index.h("span", { class: "created-time" }, index$1.format(this.createdTime)), this.verified && !starOnly && this.renderVerified())));
+    return (index.h(index.Host, { class: `popup-review ${starOnlyClass}`, style: this.reviewCSS }, index.h("div", { class: `review-top ${starOnlyClass}` }, starsArray.map((el) => index.h("span", { class: `review-star ${el <= this.rating ? "active" : ""}` }, index.h("svg", { class: "svg-star", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", role: "img" }, index.h("title", null, "star rating"), index.h("path", { d: "M4.10511 3.85963C4.10511 3.85963 1.83465 4.12327 0.320057 4.29953C0.183543 4.31685 0.0628347 4.41251 0.0175692 4.55789C-0.0276963 4.70327 0.0175691 4.85467 0.118159 4.95033C1.24333 6.02672 2.93396 7.63867 2.93396 7.63867C2.93252 7.63867 2.46981 9.98349 2.16229 11.548C2.13642 11.6896 2.18529 11.8395 2.30312 11.9291C2.42023 12.0188 2.57112 12.0203 2.68967 11.9503C4.01458 11.1609 5.99907 9.97371 5.99907 9.97371C5.99907 9.97371 7.98429 11.1609 9.30703 11.951C9.42772 12.0203 9.57866 12.0188 9.69574 11.9291C9.8136 11.8395 9.86246 11.6896 9.83589 11.5488C9.52834 9.98349 9.06634 7.63867 9.06634 7.63867C9.06634 7.63867 10.757 6.02672 11.8821 4.95259C11.9828 4.85391 12.0273 4.70252 11.9828 4.55789C11.9382 4.41327 11.8175 4.31761 11.681 4.30103C10.1664 4.12327 7.8952 3.85963 7.8952 3.85963C7.8952 3.85963 6.95397 1.67673 6.32671 0.221454C6.2678 0.0911426 6.14422 0 5.99907 0C5.85394 0 5.72964 0.091896 5.67359 0.221454C5.04563 1.67673 4.10511 3.85963 4.10511 3.85963Z" }))))), index.h("p", { class: `review-caption  ${starOnlyClass} ${verifiedClass}`, innerHTML: this.caption }, this.verified && starOnly && this.renderVerified()), index.h("div", { class: `review-bottom  ${starOnlyClass}` }, index.h("p", { class: "username" }, this.username), this.createdTime && index.h("span", { class: "slash" }, "/"), index.h("span", { class: "created-time" }, fragment.format(this.createdTime)), this.verified && !starOnly && this.renderVerified())));
   }
   get el() { return index.getElement(this); }
   static get watchers() { return {

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

@@ -3326,7 +3326,7 @@ var trim = String.prototype.trim ?
 }));
 });
 
-const covetPicsGalleryGridCss = ".gallery{--covet-pics-desktop-item-width:calc((100 - (var(--covet-pics-desktop-photos-per-row) - 1) * var(--covet-pics-desktop-item-padding)) / var(--covet-pics-desktop-photos-per-row));--covet-pics-mobile-item-width:calc((100 - (var(--covet-pics-mobile-photos-per-row) - 1) * var(--covet-pics-mobile-item-padding)) / var(--covet-pics-mobile-photos-per-row));--covet-pics-desktop-highlighted-width:calc(var(--covet-pics-desktop-item-width) * 2 + var(--covet-pics-desktop-item-padding));--covet-pics-mobile-highlighted-width:calc(var(--covet-pics-mobile-item-width) * 2 + var(--covet-pics-mobile-item-padding));--covet-pics-desktop-grid-space:calc(100 * 100 / var(--covet-pics-desktop-item-width) * var(--covet-pics-desktop-item-padding) / 100);--covet-pics-mobile-grid-space:calc(100 * 100 / var(--covet-pics-mobile-item-width) * var(--covet-pics-mobile-item-padding) / 100);margin:0;padding:0;list-style:none;display:block}.gallery.grid{display:grid;grid-template-columns:repeat(var(--covet-pics-mobile-photos-per-row), calc(var(--covet-pics-mobile-item-width) * 1%));-moz-column-gap:calc(var(--covet-pics-mobile-item-padding) * 1%);-webkit-column-gap:calc(var(--covet-pics-mobile-item-padding) * 1%);column-gap:calc(var(--covet-pics-mobile-item-padding) * 1%);grid-auto-flow:dense}.grid-sizer{width:calc(var(--covet-pics-mobile-item-width) * 1%)}.gutter-sizer{width:calc(var(--covet-pics-mobile-item-padding) * 1%)}@media only screen and (min-width: 800px){.gallery.grid{grid-template-columns:repeat(var(--covet-pics-desktop-photos-per-row), calc(var(--covet-pics-desktop-item-width) * 1%));-moz-column-gap:calc(var(--covet-pics-desktop-item-padding) * 1%);-webkit-column-gap:calc(var(--covet-pics-desktop-item-padding) * 1%);column-gap:calc(var(--covet-pics-desktop-item-padding) * 1%)}.grid-sizer{width:calc(var(--covet-pics-desktop-item-width) * 1%)}.gutter-sizer{width:calc(var(--covet-pics-desktop-item-padding) * 1%)}}.loading-animation{display:none;-ms-flex-pack:center;justify-content:center}.loading-animation svg{width:50px;height:50px}.loading-animation svg circle{fill:var(--covet-pics-load-more-color)}.loading-animation svg .dot-2,.loading-animation svg .dot-3{opacity:0.4}.loading-animation.show{display:-ms-flexbox;display:flex}.load-more{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.btn-load-more{font-size:var(--covet-pics-load-more-font-size);font-weight:var(--covet-pics-load-more-font-style);font-family:inherit;color:var(--covet-pics-load-more-color);background:none;border:0px solid;margin:20px 0;display:inline-block;outline:none;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;cursor:pointer}.btn-load-more:hover,.btn-load-more:active,.btn-load-more:focus{opacity:0.7}.btn-load-more .icon{display:-ms-flexbox;display:flex;margin-left:8px}.btn-load-more .icon svg{width:100%;height:100%}.btn-load-more.btn_style_1{padding:0 0 var(--covet-pics-load-more-padding) 0;border-bottom:var(--covet-pics-load-more-border) solid var(--covet-pics-load-more-color)}.btn-load-more.btn_style_1 .icon{display:none}.btn-load-more.btn_style_2{padding:var(--covet-pics-load-more-padding) calc(var(--covet-pics-load-more-padding) * 2);border:var(--covet-pics-load-more-border) solid var(--covet-pics-load-more-color)}.btn-load-more.btn_style_2 .icon{display:none}.btn-load-more.btn_style_3{padding:var(--covet-pics-load-more-padding) calc(var(--covet-pics-load-more-padding) * 2);border:var(--covet-pics-load-more-border) solid var(--covet-pics-load-more-color)}.btn-load-more.btn_style_3 .icon{width:var(--covet-pics-load-more-font-size);height:var(--covet-pics-load-more-font-size);display:-ms-flexbox;display:flex;margin-left:8px}.btn-load-more.btn_style_3 .icon svg .dynamic-stroke{stroke:var(--covet-pics-load-more-color)}.btn-load-more.btn_style_4 .text{display:none}.btn-load-more.btn_style_4 .icon{width:32px;height:32px;margin:0}.btn-load-more.btn_style_4 .icon svg path{fill:var(--covet-pics-load-more-color)}.btn-load-more.btn_style_5 .text{display:none}.btn-load-more.btn_style_5 .icon{width:42px;height:42px;margin:0}.btn-load-more.btn_style_5 .icon svg path{fill:var(--covet-pics-load-more-color)}.filters .btn-filter{padding-left:var(--covet-pics-filter-padding);padding-right:var(--covet-pics-filter-padding);margin-top:var(--covet-pics-filter-padding);margin-bottom:var(--covet-pics-filter-padding);text-decoration:none;display:inline-block;text-align:center;white-space:nowrap;cursor:pointer;opacity:0.8;text-transform:uppercase;letter-spacing:1px;font-size:var(--covet-pics-filter-font-size);font-family:var(--covet-pics-font-family);font-weight:var(--covet-pics-filter-font-weight);color:var(--covet-pics-filter-font-color);border:none;background-color:transparent;outline:none !important}.filters .btn-filter:hover,.filters .btn-filter:active,.filters .btn-filter:focus,.filters .btn-filter.selected{opacity:1}.filters .btn-filter+.btn-filter{border-left:1px solid var(--covet-pics-filter-font-color);line-height:var(--covet-pics-filter-font-size)}.sorting{display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end;-ms-flex-align:center;align-items:center;margin-bottom:26px;margin-top:26px;margin-right:20px;position:relative}.sort-title{font-size:14px;font-weight:700;color:#919EAB}.sort-btn{background-color:white;border:none;color:#919EAB;font-size:14px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-webkit-transition:all 0.3s ease-out;transition:all 0.3s ease-out}.sort-select{position:absolute;display:block;top:0;right:0;color:#919EAB;font-size:14px;background-color:white;-webkit-transform:translateY(30px);transform:translateY(30px);max-height:0;overflow:hidden;cursor:pointer;opacity:0;padding:0;margin:0;-webkit-transition:opacity 0.3s ease;transition:opacity 0.3s ease;border-radius:4px;border:1px solid transparent}.sort-select.show-sort{-webkit-box-shadow:0px 4px 4px 0px rgba(0, 0, 0, 0.25);box-shadow:0px 4px 4px 0px rgba(0, 0, 0, 0.25);border:1px solid #ECECEC;opacity:1;z-index:1000;max-height:1000px}.sort-check{width:12px;height:9px;margin-right:12px}.sort-check path{-webkit-transition:all 0.3s ease-in;transition:all 0.3s ease-in;stroke:transparent}.sort__dropdown-item{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;list-style:none;padding:12px 35px 0px 23px;-webkit-transition:all 0.3s ease-out;transition:all 0.3s ease-out}.sort__dropdown-item:first-of-type{padding-top:23px}.sort__dropdown-item:last-of-type{padding-bottom:23px}.sort__dropdown-item.active{color:#626C75}.sort__dropdown-item.active .sort-check{-webkit-transition:all 0.4s ease-out;transition:all 0.4s ease-out}.sort__dropdown-item.active .sort-check path{stroke:#919EAB}.sort__dropdown-item:hover,.sort__dropdown-item:active,.sort__dropdown-item:focus{color:#626C75}.sort-arrow{margin-left:7px;width:9px;height:6px}.sort-arrow-down{-webkit-transform:rotateX(180deg);transform:rotateX(180deg)}";
+const covetPicsGalleryGridCss = ".gallery{--covet-pics-desktop-item-width:calc((100 - (var(--covet-pics-desktop-photos-per-row) - 1) * var(--covet-pics-desktop-item-padding)) / var(--covet-pics-desktop-photos-per-row));--covet-pics-mobile-item-width:calc((100 - (var(--covet-pics-mobile-photos-per-row) - 1) * var(--covet-pics-mobile-item-padding)) / var(--covet-pics-mobile-photos-per-row));--covet-pics-desktop-highlighted-width:calc(var(--covet-pics-desktop-item-width) * 2 + var(--covet-pics-desktop-item-padding));--covet-pics-mobile-highlighted-width:calc(var(--covet-pics-mobile-item-width) * 2 + var(--covet-pics-mobile-item-padding));--covet-pics-desktop-grid-space:calc(100 * 100 / var(--covet-pics-desktop-item-width) * var(--covet-pics-desktop-item-padding) / 100);--covet-pics-mobile-grid-space:calc(100 * 100 / var(--covet-pics-mobile-item-width) * var(--covet-pics-mobile-item-padding) / 100);margin:0;padding:0;list-style:none;display:block}.gallery.grid{display:grid;grid-template-columns:repeat(var(--covet-pics-mobile-photos-per-row), calc(var(--covet-pics-mobile-item-width) * 1%));-moz-column-gap:calc(var(--covet-pics-mobile-item-padding) * 1%);-webkit-column-gap:calc(var(--covet-pics-mobile-item-padding) * 1%);column-gap:calc(var(--covet-pics-mobile-item-padding) * 1%);grid-auto-flow:dense}.grid-sizer{width:calc(var(--covet-pics-mobile-item-width) * 1%)}.gutter-sizer{width:calc(var(--covet-pics-mobile-item-padding) * 1%)}@media only screen and (min-width: 800px){.gallery.grid{grid-template-columns:repeat(var(--covet-pics-desktop-photos-per-row), calc(var(--covet-pics-desktop-item-width) * 1%));-moz-column-gap:calc(var(--covet-pics-desktop-item-padding) * 1%);-webkit-column-gap:calc(var(--covet-pics-desktop-item-padding) * 1%);column-gap:calc(var(--covet-pics-desktop-item-padding) * 1%)}.grid-sizer{width:calc(var(--covet-pics-desktop-item-width) * 1%)}.gutter-sizer{width:calc(var(--covet-pics-desktop-item-padding) * 1%)}}.loading-animation{display:none;-ms-flex-pack:center;justify-content:center}.loading-animation svg{width:50px;height:50px}.loading-animation svg circle{fill:var(--covet-pics-load-more-color)}.loading-animation svg .dot-2,.loading-animation svg .dot-3{opacity:0.4}.loading-animation.show{display:-ms-flexbox;display:flex}.load-more{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.btn-load-more{font-size:var(--covet-pics-load-more-font-size);font-weight:var(--covet-pics-load-more-font-style);font-family:inherit;color:var(--covet-pics-load-more-color);background:none;border:0px solid;margin:20px 0;display:inline-block;outline:none;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;cursor:pointer}.btn-load-more:hover,.btn-load-more:active,.btn-load-more:focus{opacity:0.7}.btn-load-more .icon{display:-ms-flexbox;display:flex;margin-left:8px}.btn-load-more .icon svg{width:100%;height:100%}.btn-load-more.btn_style_1{padding:0 0 var(--covet-pics-load-more-padding) 0;border-bottom:var(--covet-pics-load-more-border) solid var(--covet-pics-load-more-color)}.btn-load-more.btn_style_1 .icon{display:none}.btn-load-more.btn_style_2{padding:var(--covet-pics-load-more-padding) calc(var(--covet-pics-load-more-padding) * 2);border:var(--covet-pics-load-more-border) solid var(--covet-pics-load-more-color)}.btn-load-more.btn_style_2 .icon{display:none}.btn-load-more.btn_style_3{padding:var(--covet-pics-load-more-padding) calc(var(--covet-pics-load-more-padding) * 2);border:var(--covet-pics-load-more-border) solid var(--covet-pics-load-more-color)}.btn-load-more.btn_style_3 .icon{width:var(--covet-pics-load-more-font-size);height:var(--covet-pics-load-more-font-size);display:-ms-flexbox;display:flex;margin-left:8px}.btn-load-more.btn_style_3 .icon svg .dynamic-stroke{stroke:var(--covet-pics-load-more-color)}.btn-load-more.btn_style_4 .text{display:none}.btn-load-more.btn_style_4 .icon{width:32px;height:32px;margin:0}.btn-load-more.btn_style_4 .icon svg path{fill:var(--covet-pics-load-more-color)}.btn-load-more.btn_style_5 .text{display:none}.btn-load-more.btn_style_5 .icon{width:42px;height:42px;margin:0}.btn-load-more.btn_style_5 .icon svg path{fill:var(--covet-pics-load-more-color)}.filters .btn-filter{padding-left:var(--covet-pics-filter-padding);padding-right:var(--covet-pics-filter-padding);margin-top:var(--covet-pics-filter-padding);margin-bottom:var(--covet-pics-filter-padding);text-decoration:none;display:inline-block;text-align:center;white-space:nowrap;cursor:pointer;opacity:0.8;text-transform:uppercase;letter-spacing:1px;font-size:var(--covet-pics-filter-font-size);font-family:var(--covet-pics-font-family);font-weight:var(--covet-pics-filter-font-weight);color:var(--covet-pics-filter-font-color);border:none;background-color:transparent;outline:none !important}.filters .btn-filter:hover,.filters .btn-filter:active,.filters .btn-filter:focus,.filters .btn-filter.selected{opacity:1}.filters .btn-filter+.btn-filter{border-left:1px solid var(--covet-pics-filter-font-color);line-height:var(--covet-pics-filter-font-size)}";
 
 const CovetPicsGalleryGrid = class {
   constructor(hostRef) {
@@ -3375,6 +3375,22 @@ const CovetPicsGalleryGrid = class {
      * array of items to be showed in grid
      */
     this.items = [];
+    /**
+     * array of breakdown for header
+     */
+    this.breakdown = [];
+    /**
+     * product-title in header
+     */
+    this.productTitle = "";
+    /**
+     * rating
+     */
+    this.rating = 0;
+    /**
+     *  Rating count
+     */
+    this.ratingCount = 0;
     /**
      * Load More button border width
      */
@@ -3407,22 +3423,39 @@ const CovetPicsGalleryGrid = class {
      * Load More mode (`button`, `infinite_scroll`, `none`)
      */
     this.loadMoreMode = "button";
+    /**
+     * show header
+     */
+    this.showHeader = false;
+    /**
+     * header type (`header-1`, `header-2`,`header-3`, `header-4`)
+     */
+    this.headerType = "header-1";
+    /**
+     * header - show average rating
+     */
+    this.headerShowAverageRating = true;
+    /**
+     * header - show rating breakdown
+     */
+    this.headerShowBreakdown = true;
+    /**
+     * header - show sort / filter
+     */
+    this.headerShowSort = true;
     /*
     * Gallery filters
     */
     this.filtersEnabled = false;
     this.filtersMultiselect = false;
     this.filters = {};
-    /*
-      * Gallery sorting
-    */
-    this.showHeaders = false;
     /*
     * item layout (standard or basic-1 - basic-5 for review)
     */
     this.itemStyle = "standard";
     this.isLoading = false;
     this.showSort = false;
+    this.showBreakdown = false;
     this.selectedItemIndex = null;
     this.isGridDisabled = false;
     this.filterChangedHandler = (event) => {
@@ -3453,13 +3486,6 @@ const CovetPicsGalleryGrid = class {
         this.nextPage.emit(event);
       }
     };
-    this.onSelectUpdate = (event) => {
-      event.preventDefault();
-      event.stopPropagation();
-      this.showSort = !this.showSort;
-      store.state.sortType.selected = event.target.ariaSelected;
-      this.sortUpdated.emit(event.target.ariaSelected);
-    };
   }
   /**
    * after CovetGalleryItem image is loaded, refresh layout
@@ -3547,7 +3573,7 @@ const CovetPicsGalleryGrid = class {
     if (this.loader.previewMode) {
       document.querySelectorAll("covet-pics-upload").forEach(uploadWidget => uploadWidget.remove());
     }
-    if (this.loader.data.settings["customer_photo_item_position"] || this.loader.data.settings["customer_photo_upload_button_selector"]) {
+    if (this.loader.data.settings["customer_photo_item_position"] || this.loader.data.settings["customer_photo_upload_button_selector"] || this.showHeader) {
       this.upload = utils$1.createUploadPopup(this.loader);
       document.body.appendChild(this.upload);
     }
@@ -3679,9 +3705,6 @@ const CovetPicsGalleryGrid = class {
   renderFilters() {
     return (index.h("div", { class: "filters", style: this.getFilterCSSVariables() }, 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))));
   }
-  renderSort() {
-    return (index.h("div", { class: "sorting" }, index.h("span", { class: "sort-title" }, "Sorted by :"), index.h("button", { class: "sort-btn", onClick: () => this.showSort = !this.showSort }, store.state.sortType.options.find(el => el.value === store.state.sortType.selected).name, index.h("svg", { class: `sort-arrow ${this.showSort ? "sort-arrow-down" : ""}`, viewBox: "0 0 9 6", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M4.8916 5.50671C4.69142 5.75887 4.30858 5.75887 4.10839 5.50671L0.380581 0.810878C0.120451 0.483199 0.353806 0 0.772186 0L8.22781 0C8.64619 0 8.87955 0.483199 8.61942 0.810878L4.8916 5.50671Z", fill: "#919EAB" }))), index.h("ul", { class: `sort-select ${this.showSort ? "show-sort" : ""}` }, store.state.sortType.options.map(el => index.h("li", { class: `sort__dropdown-item ${el.value === store.state.sortType.selected ? "active" : ""}`, "aria-selected": el.value, onClick: this.onSelectUpdate }, index.h("svg", { class: "sort-check", viewBox: "0 0 12 9", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M10.7273 1.5L4.72727 7.5L2 4.77273", stroke: "#919EAB", "stroke-width": "2.5", "stroke-linecap": "round", "stroke-linejoin": "round" })), el.name)))));
-  }
   itemImgAltTag(caption, idx, itemsLength, createdTime, layout) {
     return caption && caption.length > 0
       ? `${caption}, ${layout}-item ${idx + 1}/${itemsLength}, post created ${utils$1.getDateFromTimestamp(createdTime)}`
@@ -3709,9 +3732,12 @@ const CovetPicsGalleryGrid = class {
       : (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) }, tabindex: 0, 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-source": item.source, "item-style": this.itemStyle, "item-type": item.data_type, "item-width": itemWidth, links: item.links, "popup-disabled": this.loader.data.settings.popup_disable_modal, "popup-redirect-mode": this.loader.data.settings.item_open_link, url: item.url, "background-color": this.loader.data.settings.background_color, "primary-color": this.loader.data.settings.primary_color, "star-color": this.loader.data.settings.star_color, 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, "alt-tag": this.itemImgAltTag(item.caption, idx, itemsLength, item.created_time, this.layout) });
   }
+  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() }));
+  }
   render() {
     if (typeof this.items !== "undefined" && typeof this.loader !== "undefined") {
-      return (index.h(index.Host, null, this.filtersEnabled && this.renderFilters(), this.showHeaders && this.renderSort(), index.h("div", { class: `gallery ${this.layout}`, style: utils$1.setCovetItemSizeVariables(this.desktopPhotosPerRow, this.desktopItemPadding, this.mobilePhotosPerRow, this.mobileItemPadding), role: "grid" }, 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, null, 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: "grid" }, 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"
         ? this.renderStandardUploadItem(item)
         : this.renderStandardItem(item, idx, this.items.length)), this.itemStyle !== "standard" && this.items.map((item, idx) => item.source === "upload_widget"
         ? this.renderDetailUploadItem(item)