@covet-pics/covet-pics-widget 0.116.0 → 0.116.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (27) hide show
  1. package/dist/cjs/covet-pics-direct-buy_6.cjs.entry.js +20 -67
  2. package/dist/cjs/covet-pics-gallery-header_3.cjs.entry.js +16 -34
  3. package/dist/cjs/funcComponents-42dd7de7.js +210 -0
  4. package/dist/collection/components/covet-pics-gallery-header/covet-pics-gallery-header.js +7 -4
  5. package/dist/collection/components/covet-pics-popup/covet-pics-popup-review.js +3 -6
  6. package/dist/collection/components/covet-pics-popup/covet-pics-popup.js +19 -61
  7. package/dist/collection/utils/funcComponents.js +82 -0
  8. package/dist/covet-pics-widget/covet-pics-widget.esm.js +1 -1
  9. package/dist/covet-pics-widget/{p-ee9f78c1.system.entry.js → p-146f5c89.system.entry.js} +4 -4
  10. package/dist/covet-pics-widget/p-1e68fa4d.js +4 -0
  11. package/dist/covet-pics-widget/{p-839f3392.entry.js → p-2e70f8e3.entry.js} +3 -3
  12. package/dist/covet-pics-widget/p-7fa1e519.entry.js +4 -0
  13. package/dist/covet-pics-widget/p-901db319.system.js +1 -1
  14. package/dist/covet-pics-widget/p-9a92d766.system.js +4 -0
  15. package/dist/covet-pics-widget/p-ecd44a01.system.entry.js +4 -0
  16. package/dist/esm/covet-pics-direct-buy_6.entry.js +20 -67
  17. package/dist/esm/covet-pics-gallery-header_3.entry.js +11 -29
  18. package/dist/esm/funcComponents-94702333.js +180 -0
  19. package/dist/esm-es5/covet-pics-direct-buy_6.entry.js +4 -4
  20. package/dist/esm-es5/covet-pics-gallery-header_3.entry.js +1 -1
  21. package/dist/esm-es5/funcComponents-94702333.js +4 -0
  22. package/dist/types/components/covet-pics-popup/covet-pics-popup-review.d.ts +0 -1
  23. package/dist/types/components/covet-pics-popup/covet-pics-popup.d.ts +0 -2
  24. package/dist/types/utils/funcComponents.d.ts +34 -0
  25. package/package.json +1 -1
  26. package/dist/covet-pics-widget/p-72c82bd4.system.entry.js +0 -4
  27. package/dist/covet-pics-widget/p-77353bfb.entry.js +0 -4
@@ -13,6 +13,7 @@ const fragment = require('./fragment-29c21ac8.js');
13
13
  const storeUtils = require('./storeUtils-6e9b9011.js');
14
14
  const getters = require('./getters-c3c47af0.js');
15
15
  const modals = require('./modals-6099dcb8.js');
16
+ const funcComponents = require('./funcComponents-42dd7de7.js');
16
17
  const _commonjsHelpers = require('./_commonjsHelpers-b66a770d.js');
17
18
  require('./redux-toolkit.esm-ed0a74c1.js');
18
19
 
@@ -4138,7 +4139,7 @@ const CovetPicsPopup = class {
4138
4139
  if (this.item.carousel_media && this.item.carousel_media.length > 0) {
4139
4140
  return (index.h("div", { id: "covet-popup-content-image-carousel", class: "carousel-media swiper" }, index.h("section", { class: "swiper-wrapper" }, this.item.carousel_media.map((media_item, idx) => index.h("div", { class: "carousel-cell swiper-slide" }, media_item.type === "image" &&
4140
4141
  index.h("img", { src: media_item.standard_resolution, alt: this.imgAltTag(this.item.caption, idx, this.item.carousel_media.length, this.item.created_time) }), media_item.type === "video" &&
4141
- index.h("div", { class: "post-video-element" }, index.h("video", { playsinline: true, loop: true, poster: (idx === 0) ? this.item.cover_images.high_resolution : null, key: media_item.standard_resolution }, index.h("source", { src: media_item.standard_resolution, type: "video/mp4" })), index.h("button", { type: "button", class: "post-video-play", "aria-label": "Play video", onClick: this.playPauseVideoClickHandler }), index.h("button", { type: "button", class: "post-video-pause", "aria-label": "Pause video", onClick: this.playPauseVideoClickHandler }))))), index.h("div", { class: "swiper-pagination swiper-pagination-white" }), index.h("button", { class: "swiper-button-next", type: "button" }, index.h("svg", { viewBox: "0 0 100 100", role: "img" }, index.h("title", null, "arrow next"), index.h("path", { d: "M35.5992906,51.1028539 L41.7768136,57.2847304 L41.7768136,61.570226 L30,49.785113 L41.7768136,38 L41.7768136,42.2854956 L35.9938338,48.0725509 L69.1769366,48.0725509 L69.1769366,51.1028539 L35.5992906,51.1028539 Z", class: "arrow", transform: "translate(100, 100) rotate(180) " }))), index.h("button", { class: "swiper-button-prev", type: "button" }, index.h("svg", { viewBox: "0 0 100 100", role: "img" }, index.h("title", null, "arrow previous"), index.h("path", { d: "M35.5992906,51.1028539 L41.7768136,57.2847304 L41.7768136,61.570226 L30,49.785113 L41.7768136,38 L41.7768136,42.2854956 L35.9938338,48.0725509 L69.1769366,48.0725509 L69.1769366,51.1028539 L35.5992906,51.1028539 Z", class: "arrow", transform: "translate(100, 100) rotate(180) " })))));
4142
+ index.h("div", { class: "post-video-element" }, index.h("video", { playsinline: true, loop: true, poster: (idx === 0) ? this.item.cover_images.high_resolution : null, key: media_item.standard_resolution }, index.h("source", { src: media_item.standard_resolution, type: "video/mp4" })), index.h("button", { type: "button", class: "post-video-play", "aria-label": "Play video", onClick: this.playPauseVideoClickHandler }), index.h("button", { type: "button", class: "post-video-pause", "aria-label": "Pause video", onClick: this.playPauseVideoClickHandler }))))), index.h("div", { class: "swiper-pagination swiper-pagination-white" }), index.h("button", { class: "swiper-button-next", type: "button" }, index.h(funcComponents.IconArrowPrev, null)), index.h("button", { class: "swiper-button-prev", type: "button" }, index.h(funcComponents.IconArrowNext, null))));
4142
4143
  }
4143
4144
  else {
4144
4145
  if (this.item.data_type === "image" || this.item.data_type === "carousel")
@@ -4158,16 +4159,10 @@ const CovetPicsPopup = class {
4158
4159
  renderShareIcons() {
4159
4160
  if (this.hideSocialShareIcons === false) {
4160
4161
  return (index.h("div", { class: "share links-built" }, index.h("hr", null), this.showShareLink &&
4161
- index.h("div", { class: "direct-link-wrapper" }, index.h("input", { class: "direct-link-input", type: "text", value: this.postLink, "aria-label": "Share link" }), index.h("button", { onClick: this.copyLinkClickHandler, class: "btn btn-light", title: !this.copyLinkCopied ? "Copy share link" : "Link has been copied", disabled: this.copyLinkCopied, type: "button" }, !this.copyLinkCopied &&
4162
- index.h("svg", { width: "16", height: "20", viewBox: "0 0 1792 1792", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, index.h("path", { d: "M768 1664h896v-640h-416q-40 0-68-28t-28-68v-416h-384v1152zm256-1440v-64q0-13-9.5-22.5t-22.5-9.5h-704q-13 0-22.5 9.5t-9.5 22.5v64q0 13 9.5 22.5t22.5 9.5h704q13 0 22.5-9.5t9.5-22.5zm256 672h299l-299-299v299zm512 128v672q0 40-28 68t-68 28h-960q-40 0-68-28t-28-68v-160h-544q-40 0-68-28t-28-68v-1344q0-40 28-68t68-28h1088q40 0 68 28t28 68v328q21 13 36 28l408 408q28 28 48 76t20 88z" })), this.copyLinkCopied &&
4163
- index.h("svg", { width: "16", height: "20", viewBox: "0 0 1792 1792", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, index.h("path", { d: "M1671 566q0 40-28 68l-724 724-136 136q-28 28-68 28t-68-28l-136-136-362-362q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 295 656-657q28-28 68-28t68 28l136 136q28 28 28 68z" })))), index.h("ul", null, index.h("li", { class: "fb" }, index.h("a", { href: `http://www.facebook.com/sharer/sharer.php?picture=${encodeURIComponent(this.imageForSocialShare)}&u=${encodeURIComponent(this.postLink)}`, target: "_blank", title: "Share on Facebook" }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", "aria-hidden": "true" }, index.h("g", { fill: "none", "fill-rule": "evenodd" }, index.h("path", { fill: "#000", "fill-rule": "nonzero", d: "M15.455 9.336H13.35V7.955c0-.519.344-.64.586-.64h1.486v-2.28l-2.047-.009c-2.272 0-2.79 1.701-2.79 2.79v1.52H9.272v2.35h1.314v6.65h2.764v-6.65h1.865l.241-2.35z" }))))), index.h("li", { class: "tw" }, index.h("a", { href: `http://www.twitter.com/share?text=${this.item.caption}&url=${encodeURIComponent(this.postLink)}`, target: "_blank", title: "Share on Twitter" }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", "aria-hidden": "true" }, index.h("g", { fill: "none", "fill-rule": "evenodd" }, index.h("path", { fill: "#000", "fill-rule": "nonzero", d: "M19 8.302a5.869 5.869 0 0 1-1.65.437 2.8 2.8 0 0 0 1.263-1.536 5.87 5.87 0 0 1-1.824.674A2.915 2.915 0 0 0 14.693 7c-1.586 0-2.872 1.243-2.872 2.777 0 .217.025.43.074.633a8.251 8.251 0 0 1-5.92-2.902c-.247.41-.389.887-.389 1.397 0 .963.507 1.813 1.278 2.311a2.94 2.94 0 0 1-1.301-.348v.036c0 1.345.99 2.467 2.304 2.723a2.98 2.98 0 0 1-1.298.047c.366 1.103 1.427 1.906 2.683 1.928a5.889 5.889 0 0 1-3.567 1.19c-.231 0-.46-.014-.685-.04A8.332 8.332 0 0 0 9.403 18c5.283 0 8.172-4.231 8.172-7.901 0-.12-.002-.24-.008-.36A5.714 5.714 0 0 0 19 8.302z" }))))), index.h("li", { class: "pin" }, index.h("a", { href: `http://www.pinterest.com/pin/create/button/?media=${encodeURIComponent(this.imageForSocialShare)}&description=${this.item.caption}&url=${encodeURIComponent(this.postLink)}`, target: "_blank", title: "Share on Pinterest" }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", "aria-hidden": "true" }, index.h("g", { fill: "none", "fill-rule": "evenodd" }, index.h("path", { fill: "#000", "fill-rule": "nonzero", d: "M12.303 6C8.778 6 7 8.543 7 10.665c0 1.284.483 2.427 1.52 2.852.17.07.322.003.37-.187.035-.13.116-.46.152-.599.05-.187.03-.253-.107-.416-.298-.355-.49-.814-.49-1.464 0-1.887 1.404-3.577 3.654-3.577 1.992 0 3.087 1.226 3.087 2.862 0 2.153-.947 3.97-2.352 3.97-.776 0-1.357-.646-1.171-1.438.223-.946.655-1.967.655-2.65 0-.611-.327-1.121-1.001-1.121-.793 0-1.431.826-1.431 1.933 0 .704.237 1.181.237 1.181l-.955 4.07c-.283 1.207-.042 2.687-.022 2.836.012.09.125.11.177.044.073-.097 1.018-1.27 1.34-2.444.09-.332.52-2.052.52-2.052.259.495 1.012.93 1.814.93 2.385 0 4.003-2.188 4.003-5.117C17 8.063 15.136 6 12.303 6z" }))))), index.h("li", { class: "eml" }, index.h("a", { href: `mailto:?subject=Check%20this%20out&body=${encodeURIComponent(this.postLink)}`, target: "_blank", title: "Share via E-mail" }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", "aria-hidden": "true" }, index.h("g", { fill: "none", "fill-rule": "evenodd" }, index.h("path", { fill: "#000", "fill-rule": "nonzero", d: "M6 8v8.5h12V8H6zM5 7h14v10.5H5V7zm13 1l-.916.004L12 11.636 6.915 8.004 6 8l.004.582 5.705 4.075a.5.5 0 0 0 .582 0l3.062-2.188 2.654-1.895L18 8z" }))))), index.h("li", { class: "lnk" }, index.h("button", { title: "Share Link", onClick: this.showShareLinkHandler, type: "button" }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", "aria-hidden": "true" }, index.h("g", { fill: "none", "fill-rule": "evenodd" }, index.h("path", { fill: "#000", "fill-rule": "nonzero", d: "M13 7.042V14h-1V6.912l-2.04 2.04H8.546l3.889-3.89 3.889 3.89H14.91L13 7.042zM18.5 17.5V11h1v7.5h-14V11h1v6.5h12z" }))))))));
4162
+ index.h("div", { class: "direct-link-wrapper" }, index.h("input", { class: "direct-link-input", type: "text", value: this.postLink, "aria-label": "Share link" }), index.h("button", { onClick: this.copyLinkClickHandler, class: "btn btn-light", title: !this.copyLinkCopied ? "Copy share link" : "Link has been copied", disabled: this.copyLinkCopied, type: "button" }, this.copyLinkCopied ? index.h(funcComponents.IconChecked, null) : index.h(funcComponents.IconCopy, null))), index.h("ul", null, index.h("li", { class: "fb" }, index.h("a", { href: `http://www.facebook.com/sharer/sharer.php?picture=${encodeURIComponent(this.imageForSocialShare)}&u=${encodeURIComponent(this.postLink)}`, target: "_blank", title: "Share on Facebook" }, index.h(funcComponents.IconFB, null))), index.h("li", { class: "tw" }, index.h("a", { href: `http://www.twitter.com/share?text=${this.item.caption}&url=${encodeURIComponent(this.postLink)}`, target: "_blank", title: "Share on Twitter" }, index.h(funcComponents.IconTwitter, null))), index.h("li", { class: "pin" }, index.h("a", { href: `http://www.pinterest.com/pin/create/button/?media=${encodeURIComponent(this.imageForSocialShare)}&description=${this.item.caption}&url=${encodeURIComponent(this.postLink)}`, target: "_blank", title: "Share on Pinterest" }, index.h(funcComponents.IconPinterest, null))), index.h("li", { class: "eml" }, index.h("a", { href: `mailto:?subject=Check%20this%20out&body=${encodeURIComponent(this.postLink)}`, target: "_blank", title: "Share via E-mail" }, index.h(funcComponents.IconEmail, null))), index.h("li", { class: "lnk" }, index.h("button", { title: "Share Link", onClick: this.showShareLinkHandler, type: "button" }, index.h(funcComponents.IconShareLink, null))))));
4164
4163
  }
4165
4164
  }
4166
- renderVerifiedIcon() {
4167
- return (index.h("svg", { class: "icon-verified", width: "11", height: "11", viewBox: "0 0 11 11", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M5.5 0L6.52916 0.658169L7.73705 0.4755L8.40954 1.49537L9.5873 1.81978L9.78683 3.025L10.7308 3.80041L10.4229 4.98258L10.9699 6.07491L10.2077 7.02963L10.2631 8.25L9.17857 8.8122L8.73282 9.94959L7.51335 10.022L6.64351 10.8798L5.5 10.45L4.35649 10.8798L3.48665 10.022L2.26718 9.94959L1.82143 8.8122L0.73686 8.25L0.79227 7.02963L0.0301294 6.07491L0.577117 4.98258L0.269189 3.80041L1.21317 3.025L1.4127 1.81978L2.59046 1.49537L3.26295 0.4755L4.47084 0.658169L5.5 0Z", fill: "#157F3F" }), index.h("path", { d: "M7.66344 4.09961L4.66344 7.09961L3.2998 5.73597", stroke: "white", "stroke-width": "1.3", "stroke-linecap": "round", "stroke-linejoin": "round" })));
4168
- }
4169
4165
  renderSidebar() {
4170
- const starsArray = [1, 2, 3, 4, 5];
4171
4166
  const starOnly = this.item.caption === null && this.item.data_type === "text";
4172
4167
  const greyBorderClass = this.item.caption !== null && this.item.rating !== null && this.item.data_type !== "text" ? "grey-border" : "";
4173
4168
  if (!this.item.caption && !this.item.rating && this.item.links.length === 0)
@@ -4177,50 +4172,20 @@ const CovetPicsPopup = class {
4177
4172
  index.h("div", { class: `desktop-arrows arrows-size-${this.arrowsDesktopSizeType} arrows-color-theme-${this.arrowsDesktopColorTheme}` }, this.renderArrows(this.arrowsDesktopType)), index.h("div", { class: "popup-body-content-scroll" }, this.showLinksTitle && (this.item.links.length > 0) &&
4178
4173
  index.h("h3", { class: "shop-this-look" }, this.linksTitle), this.item.links.length > 0 &&
4179
4174
  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") &&
4180
- 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") &&
4175
+ index.h(funcComponents.StarRating, { rating: this.item.rating, ratingClass: "star-rating" }), this.item.caption && !(this.item.data_type === "text") &&
4181
4176
  index.h(fragment.Fragment, null, index.h("div", { class: "caption", innerHTML: this.item.caption }), !(this.item.source === "instagram") &&
4182
- index.h("p", { class: "source" }, this.item.verified && this.renderVerifiedIcon(), this.item.username)), this.item.source === "instagram" &&
4177
+ index.h("p", { class: "source" }, this.item.verified && index.h(funcComponents.VerificationIcon, null), this.item.username)), this.item.source === "instagram" &&
4183
4178
  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 &&
4184
- index.h("p", { class: "source" }, this.item.verified && this.renderVerifiedIcon(), this.item.username)), this.arrowsDesktopType === "arrows-type-5" && this.arrowsDesktopPosition === "bottom" &&
4179
+ index.h("p", { class: "source" }, this.item.verified && index.h(funcComponents.VerificationIcon, null), this.item.username)), this.arrowsDesktopType === "arrows-type-5" && this.arrowsDesktopPosition === "bottom" &&
4185
4180
  index.h("div", { class: `desktop-arrows arrows-size-${this.arrowsDesktopSizeType} arrows-color-theme-${this.arrowsDesktopColorTheme}` }, this.renderArrows(this.arrowsDesktopType)), this.renderShareIcons()), this.products.map(product => index.h("covet-pics-direct-buy", { "button-add-to-cart-label": this.loader.data.settings.add_to_cart_button_caption, "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-style": this.loader.data.settings.popup_buy_button_style.replace("buy_btn_", "").replace("_", "-"), "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, "money-format": this.moneyFormat, "preview-mode": this.loader.previewMode, "price-label": this.loader.data.settings.price_label_caption, product: product, "select-label": this.loader.data.settings.select_label_caption }))));
4186
4181
  }
4187
4182
  renderArrowsIcon(arrowsType, arrowDirection) {
4188
4183
  switch (arrowsType) {
4189
- case "arrows-type-1":
4190
- if (arrowDirection === "left") {
4191
- return (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 48 48", "aria-hidden": "true" }, index.h("g", { fill: "none", "fill-rule": "evenodd" }, index.h("path", { d: "M48 0H0v48h48z" }), index.h("path", { class: "symbol", "fill-rule": "nonzero", d: "M16.731 23.659l12.445 12.445v1.131L15.6 23.66l13.576-13.577v1.132z" }))));
4192
- }
4193
- else {
4194
- return (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 48 48", "aria-hidden": "true" }, index.h("g", { fill: "none", "fill-rule": "evenodd" }, index.h("path", { d: "M48 0H0v48h48z" }), index.h("path", { class: "symbol", "fill-rule": "nonzero", d: "M31.198 23.659L18.753 36.104v1.131L32.329 23.66 18.753 10.082v1.132z" }))));
4195
- }
4196
- case "arrows-type-2":
4197
- if (arrowDirection === "left") {
4198
- return (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 48 48", "aria-hidden": "true" }, index.h("g", { fill: "none", "fill-rule": "evenodd" }, index.h("path", { d: "M0 48V0h48v48z" }), index.h("path", { class: "symbol", d: "M14 32v-1h20v1H14zm-2-10.098V14.03h2.424c1.74 0 2.904.588 2.904 2.316 0 1.656-1.188 2.436-2.904 2.436h-1.416v3.12H12zm1.008-3.936h1.284c1.38 0 2.04-.504 2.04-1.62 0-1.14-.684-1.512-2.04-1.512h-1.284v3.132zm11.304 3.936h-1.14l-1.896-3.324H19.86v3.324h-1.008V14.03h2.472c1.596 0 2.748.576 2.748 2.208 0 1.224-.696 1.956-1.764 2.232l2.004 3.432zm-4.452-7.068v2.928h1.32c1.224 0 1.896-.504 1.896-1.524 0-1.032-.672-1.404-1.896-1.404h-1.32zm5.904 7.068V14.03H30.3v.84h-3.528v2.472h2.976v.852h-2.976v2.856h3.648v.852h-4.656zm7.704 0L30.96 14.03h1.056l1.272 4.248c.276.936.468 1.68.756 2.604h.048c.288-.924.492-1.668.756-2.604l1.26-4.248h1.02l-2.496 7.872h-1.164z" }))));
4199
- }
4200
- else {
4201
- return (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "48", height: "48.0", viewBox: "0 0 48 48", "aria-hidden": "true" }, index.h("g", { fill: "none", "fill-rule": "evenodd" }, index.h("path", { d: "M0 48V0h48v48z" }), index.h("path", { class: "symbol", d: "M14 32v-1h20v1H14zm-1.862-9.936v-7.872h1.032l2.856 4.944.852 1.632h.048c-.048-.792-.132-1.68-.132-2.508v-4.068h.948v7.872H16.71l-2.844-4.956-.852-1.62h-.048c.048.792.12 1.632.12 2.46v4.116h-.948zm7.704 0v-7.872h4.536v.84H20.85v2.472h2.976v.852H20.85v2.856h3.648v.852h-4.656zm5.376 0l2.292-4.068-2.148-3.804h1.104l1.08 2.016c.192.36.36.684.612 1.14h.048c.216-.456.36-.78.552-1.14l1.044-2.016h1.056l-2.136 3.852 2.292 4.02H29.91l-1.164-2.124c-.204-.384-.42-.78-.672-1.26h-.048c-.228.48-.42.876-.624 1.26l-1.14 2.124h-1.044zm8.388 0v-7.032h-2.388v-.84h5.772v.84h-2.388v7.032h-.996z" }))));
4202
- }
4203
- case "arrows-type-3":
4204
- if (arrowDirection === "left") {
4205
- return (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 48 48", "aria-hidden": "true" }, index.h("g", { fill: "none", "fill-rule": "evenodd" }, index.h("path", { d: "M0 48V0h48v48z" }), index.h("path", { class: "symbol", "fill-rule": "nonzero", d: "M14.85 16.324l2.04 2.04v1.414L13 15.89 16.89 12v1.414l-1.91 1.91h18.957v1H14.85zm.434 17.148l.024 1.02v1.968h-.984v-8.292h.816l.084.672h.036c.528-.444 1.176-.816 1.86-.816 1.5 0 2.304 1.164 2.304 2.976 0 1.98-1.188 3.144-2.52 3.144-.54 0-1.08-.252-1.62-.672zm.024-.768c.528.444 1.044.612 1.428.612.96 0 1.668-.876 1.668-2.316 0-1.284-.432-2.148-1.536-2.148-.492 0-.984.276-1.56.792v3.06zM20.984 34v-5.832h.816l.084 1.056h.036c.396-.732.996-1.2 1.656-1.2.252 0 .432.036.624.12l-.192.864a1.632 1.632 0 0 0-.564-.096c-.492 0-1.08.36-1.476 1.344V34h-.984zm3.612-2.904c0-1.908 1.284-3.072 2.616-3.072 1.488 0 2.328 1.068 2.328 2.736 0 .204-.012.396-.036.54h-3.936c.072 1.26.828 2.052 1.944 2.052.552 0 1.02-.18 1.452-.456l.348.648c-.504.324-1.128.6-1.92.6-1.56 0-2.796-1.14-2.796-3.048zm.96-.444h3.12c0-1.188-.528-1.848-1.44-1.848-.816 0-1.56.672-1.68 1.848zM32.3 34l-2.1-5.832h1.02l1.104 3.312c.168.576.36 1.164.54 1.716h.048c.168-.552.36-1.14.528-1.716l1.104-3.312h.972L33.452 34H32.3z" }))));
4206
- }
4207
- else {
4208
- return (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 48 48", "aria-hidden": "true" }, index.h("g", { fill: "none", "fill-rule": "evenodd" }, index.h("path", { d: "M0 0h48v48H0z" }), index.h("path", { class: "symbol", "fill-rule": "nonzero", d: "M31.958 16.454H13v-1h19.088l-2.04-2.04V12l3.89 3.89-3.89 3.888v-1.414l1.91-1.91zM14.064 34v-5.832h.816l.084.84H15c.552-.552 1.152-.984 1.956-.984 1.224 0 1.776.792 1.776 2.28V34h-.984v-3.564c0-1.092-.336-1.56-1.104-1.56-.6 0-1.008.312-1.596.9V34h-.984zm6.132-2.904c0-1.908 1.284-3.072 2.616-3.072 1.488 0 2.328 1.068 2.328 2.736 0 .204-.012.396-.036.54h-3.936c.072 1.26.828 2.052 1.944 2.052.552 0 1.02-.18 1.452-.456l.348.648c-.504.324-1.128.6-1.92.6-1.56 0-2.796-1.14-2.796-3.048zm.96-.444h3.12c0-1.188-.528-1.848-1.44-1.848-.816 0-1.56.672-1.68 1.848zM25.68 34l1.908-3.048-1.764-2.784h1.068l.78 1.284c.18.312.372.648.576.972h.048c.168-.324.348-.66.528-.972l.708-1.284h1.032L28.8 31.06 30.696 34h-1.068l-.852-1.356a30.21 30.21 0 0 0-.636-1.044h-.048c-.204.336-.396.684-.588 1.044L26.712 34H25.68zm6.336-1.8v-3.228h-.864v-.744l.912-.06.12-1.632h.828v1.632h1.572v.804h-1.572v3.24c0 .72.228 1.128.9 1.128.204 0 .468-.084.66-.156l.192.744c-.324.108-.72.216-1.08.216-1.248 0-1.668-.792-1.668-1.944z" }))));
4209
- }
4210
- case "arrows-type-4":
4211
- if (arrowDirection === "left") {
4212
- return (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 40 40", "aria-hidden": "true" }, index.h("g", { class: "background", "fill-rule": "evenodd" }, index.h("path", { d: "M40 0H0v40h40z" }), index.h("path", { class: "symbol", "fill-rule": "nonzero", d: "M15.912 20l2.04-2.04v-1.414l-3.89 3.889 3.89 3.889V22.91L16.042 21H27v-1H15.912z" }))));
4213
- }
4214
- else {
4215
- return (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 40 40", "aria-hidden": "true" }, index.h("g", { class: "background", "fill-rule": "evenodd" }, index.h("path", { d: "M0 0h40v40H0z" }), index.h("path", { class: "symbol", "fill-rule": "nonzero", d: "M24.088 20l-2.04-2.04v-1.414l3.89 3.889-3.89 3.889V22.91l1.91-1.91H13v-1h11.088z" }))));
4216
- }
4217
- case "arrows-type-5":
4218
- if (arrowDirection === "left") {
4219
- return (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 80 40", "aria-hidden": "true" }, index.h("g", { class: "background", "fill-rule": "evenodd" }, index.h("path", { d: "M80 0H0v40h80z" }), index.h("path", { class: "symbol", d: "M16.042 21l1.91 1.91v1.414l-3.89-3.89 3.89-3.888v1.414L15.912 20H35v1H16.042zm27.064 2.428l.026 1.105v2.132h-1.066v-8.983h.884l.091.728h.039c.572-.481 1.274-.884 2.015-.884 1.625 0 2.496 1.261 2.496 3.224 0 2.145-1.287 3.406-2.73 3.406-.585 0-1.17-.273-1.755-.728zm.026-.832c.572.481 1.131.663 1.547.663 1.04 0 1.807-.949 1.807-2.509 0-1.391-.468-2.327-1.664-2.327-.533 0-1.066.299-1.69.858v3.315zM49.081 24v-6.318h.884l.091 1.144h.039c.429-.793 1.079-1.3 1.794-1.3.273 0 .468.039.676.13l-.208.936a1.768 1.768 0 0 0-.611-.104c-.533 0-1.17.39-1.599 1.456V24h-1.066zm3.713-3.146c0-2.067 1.391-3.328 2.834-3.328 1.612 0 2.522 1.157 2.522 2.964 0 .221-.013.429-.039.585h-4.264c.078 1.365.897 2.223 2.106 2.223.598 0 1.105-.195 1.573-.494l.377.702c-.546.351-1.222.65-2.08.65-1.69 0-3.029-1.235-3.029-3.302zm1.04-.481h3.38c0-1.287-.572-2.002-1.56-2.002-.884 0-1.69.728-1.82 2.002zM60.875 24L58.6 17.682h1.105l1.196 3.588c.182.624.39 1.261.585 1.859h.052c.182-.598.39-1.235.572-1.859l1.196-3.588h1.053L62.123 24h-1.248z" }))));
4220
- }
4221
- else {
4222
- return (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 80 40", "aria-hidden": "true" }, index.h("g", { class: "background", "fill-rule": "evenodd" }, index.h("path", { d: "M0 0h80v40H0z" }), index.h("path", { class: "symbol", "fill-rule": "nonzero", d: "M62.088 20l-2.04-2.04v-1.414l3.89 3.889-3.89 3.889V22.91l1.91-1.91H43v-1h19.088zm-49.022 4v-6.318h.884l.091.91h.039c.598-.598 1.248-1.066 2.119-1.066 1.326 0 1.924.858 1.924 2.47V24h-1.066v-3.861c0-1.183-.364-1.69-1.196-1.69-.65 0-1.092.338-1.729.975V24h-1.066zm6.443-3.146c0-2.067 1.391-3.328 2.834-3.328 1.612 0 2.522 1.157 2.522 2.964 0 .221-.013.429-.039.585h-4.264c.078 1.365.897 2.223 2.106 2.223.598 0 1.105-.195 1.573-.494l.377.702c-.546.351-1.222.65-2.08.65-1.69 0-3.029-1.235-3.029-3.302zm1.04-.481h3.38c0-1.287-.572-2.002-1.56-2.002-.884 0-1.69.728-1.82 2.002zM25.25 24l2.067-3.302-1.911-3.016h1.157l.845 1.391c.195.338.403.702.624 1.053h.052c.182-.351.377-.715.572-1.053l.767-1.391h1.118l-1.911 3.133L30.684 24h-1.157l-.923-1.469a32.727 32.727 0 0 0-.689-1.131h-.052a23.32 23.32 0 0 0-.637 1.131L26.368 24H25.25zm6.664-1.95v-3.497h-.936v-.806l.988-.065.13-1.768h.897v1.768h1.703v.871h-1.703v3.51c0 .78.247 1.222.975 1.222.221 0 .507-.091.715-.169l.208.806c-.351.117-.78.234-1.17.234-1.352 0-1.807-.858-1.807-2.106z" }))));
4223
- }
4184
+ case "arrows-type-1": return arrowDirection === "left" ? index.h(funcComponents.IconArrow1Left, null) : index.h(funcComponents.IconArrow1Right, null);
4185
+ case "arrows-type-2": return arrowDirection === "left" ? index.h(funcComponents.IconArrow2Left, null) : index.h(funcComponents.IconArrow2Right, null);
4186
+ case "arrows-type-3": return arrowDirection === "left" ? index.h(funcComponents.IconArrow3Left, null) : index.h(funcComponents.IconArrow3Right, null);
4187
+ case "arrows-type-4": return arrowDirection === "left" ? index.h(funcComponents.IconArrow4Left, null) : index.h(funcComponents.IconArrow4Right, null);
4188
+ case "arrows-type-5": return arrowDirection === "left" ? index.h(funcComponents.IconArrow5Left, null) : index.h(funcComponents.IconArrow5Right, null);
4224
4189
  }
4225
4190
  }
4226
4191
  renderArrows(arrowsType) {
@@ -4230,28 +4195,20 @@ const CovetPicsPopup = class {
4230
4195
  ];
4231
4196
  }
4232
4197
  renderMobileArrows() {
4233
- return (index.h("div", { class: `mobile-navigation arrows-mobile-position-${this.arrowsMobilePosition} arrows-color-theme-${this.arrowsMobileColorTheme}` }, index.h("div", { class: "mobile-arrows" }, this.renderArrows(this.arrowsMobileType)), index.h("div", { class: "mobile-buttons" }, index.h("a", { class: "btn btn-checkout", href: "/cart", "aria-label": "View cart" }, index.h("span", { class: "counter" }), this.renderCheckoutIcon()), index.h("button", { class: "btn btn-close btn-type-3", "data-dismiss": "popup", "aria-label": "Close", onClick: this.hidePopupClickHandler, type: "button" }, this.renderCloseButtonIcon("btn-type-3")))));
4198
+ return (index.h("div", { class: `mobile-navigation arrows-mobile-position-${this.arrowsMobilePosition} arrows-color-theme-${this.arrowsMobileColorTheme}` }, index.h("div", { class: "mobile-arrows" }, this.renderArrows(this.arrowsMobileType)), index.h("div", { class: "mobile-buttons" }, index.h("a", { class: "btn btn-checkout", href: "/cart", "aria-label": "View cart" }, index.h("span", { class: "counter" }), index.h(funcComponents.IconCheckout, null)), index.h("button", { class: "btn btn-close btn-type-3", "data-dismiss": "popup", "aria-label": "Close", onClick: this.hidePopupClickHandler, type: "button" }, this.renderCloseButtonIcon("btn-type-3")))));
4234
4199
  }
4235
4200
  renderCloseButtonIcon(closeButtonType) {
4236
4201
  switch (closeButtonType) {
4237
- case "btn-type-1":
4238
- return (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 40 40", "aria-hidden": "true" }, index.h("g", { fill: "none", "fill-rule": "evenodd" }, index.h("path", { class: "background", d: "M0 0h40v40H0z", opacity: ".3" }), index.h("path", { class: "symbol", d: "M20.127 19.36l5.173-5.11.7.691-5.174 5.11 5.069 5.008-.7.69-5.068-5.006L14.805 26l-.7-.691 5.322-5.257L14 14.692l.7-.692 5.427 5.36z" }))));
4239
- case "btn-type-2":
4240
- return (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", "aria-hidden": "true" }, index.h("g", { fill: "none", "fill-rule": "evenodd" }, index.h("circle", { class: "background", cx: "16", cy: "16", r: "15" }), index.h("path", { class: "symbol", d: "M16.082 15.748l4.563-4.583.355.355-4.564 4.584 4.357 4.376-.354.355-4.357-4.376L11.562 21l-.355-.355 4.521-4.541L11 11.354l.355-.354 4.727 4.748z" }))));
4241
- case "btn-type-3":
4242
- return (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 40 40", "aria-hidden": "true" }, index.h("g", { fill: "none", "fill-rule": "evenodd" }, index.h("path", { d: "M0 0h40v40H0z" }), index.h("g", { class: "symbol" }, index.h("path", { d: "M5.858 5.358l28.284 28.284M5.858 33.642L34.142 5.358" })))));
4243
- case "btn-type-4":
4244
- return (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 40 24", "aria-hidden": "true" }, index.h("g", { fill: "none", "fill-rule": "evenodd" }, index.h("path", { d: "M0 0h40v24H0z" }), index.h("path", { class: "symbol", d: "M.686 10.408c0-2.954 1.75-4.76 4.102-4.76 1.092 0 1.96.532 2.506 1.134l-.658.742c-.49-.518-1.078-.854-1.834-.854-1.75 0-2.912 1.428-2.912 3.71 0 2.31 1.106 3.766 2.856 3.766.868 0 1.512-.364 2.1-1.022l.658.714c-.714.84-1.624 1.33-2.786 1.33-2.31 0-4.032-1.764-4.032-4.76zM9.142 15V5.816h1.176v8.19h4.004V15h-5.18zm10.136.168c-2.31 0-3.934-1.848-3.934-4.802 0-2.94 1.624-4.718 3.934-4.718 2.296 0 3.92 1.792 3.92 4.718 0 2.954-1.624 4.802-3.92 4.802zm0-1.022c1.638 0 2.716-1.484 2.716-3.78 0-2.282-1.078-3.696-2.716-3.696-1.652 0-2.73 1.414-2.73 3.696 0 2.296 1.078 3.78 2.73 3.78zm5.166-.336l.7-.812c.658.686 1.568 1.148 2.534 1.148 1.204 0 1.918-.602 1.918-1.498 0-.938-.672-1.232-1.54-1.624l-1.316-.574c-.854-.364-1.862-1.022-1.862-2.366 0-1.4 1.232-2.436 2.898-2.436 1.092 0 2.058.462 2.702 1.134l-.616.756c-.56-.532-1.246-.868-2.086-.868-1.036 0-1.722.518-1.722 1.344 0 .882.812 1.218 1.526 1.526l1.316.56c1.064.462 1.89 1.092 1.89 2.45 0 1.456-1.204 2.618-3.136 2.618a4.421 4.421 0 0 1-3.206-1.358zM32.508 15V5.816H37.8v.98h-4.116V9.68h3.472v.994h-3.472v3.332h4.256V15h-5.432zM0 20h39v1H0v-1z" }))));
4245
- case "btn-type-5":
4246
- return (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 28 32", "aria-hidden": "true" }, index.h("g", { fill: "none", "fill-rule": "evenodd" }, index.h("path", { d: "M0 0h28v32H0z" }), index.h("path", { class: "symbol", d: "M14.115 7.648l6.389-6.417.496.497-6.39 6.417 6.1 6.127-.496.497-6.099-6.126L7.785 15l-.496-.497 6.33-6.358L7 1.497 7.496 1l6.62 6.648zM1 26.608c0-2.532 1.5-4.08 3.516-4.08.936 0 1.68.456 2.148.972l-.564.636c-.42-.444-.924-.732-1.572-.732-1.5 0-2.496 1.224-2.496 3.18 0 1.98.948 3.228 2.448 3.228.744 0 1.296-.312 1.8-.876l.564.612c-.612.72-1.392 1.14-2.388 1.14-1.98 0-3.456-1.512-3.456-4.08zm7.188 2.76V22h.984v7.44c0 .312.132.432.276.432.06 0 .108 0 .216-.024l.132.744c-.132.06-.3.096-.564.096-.744 0-1.044-.468-1.044-1.32zm2.628-1.728c0-1.956 1.272-3.072 2.7-3.072 1.428 0 2.7 1.116 2.7 3.072 0 1.932-1.272 3.048-2.7 3.048-1.428 0-2.7-1.116-2.7-3.048zm1.02 0c0 1.332.684 2.232 1.68 2.232 1.008 0 1.68-.9 1.68-2.232 0-1.344-.672-2.256-1.68-2.256-.996 0-1.68.912-1.68 2.256zm5.268 2.244l.492-.66c.504.408 1.02.696 1.716.696.768 0 1.152-.408 1.152-.912 0-.6-.696-.864-1.332-1.104-.828-.3-1.74-.696-1.74-1.68 0-.936.744-1.656 2.004-1.656.732 0 1.368.3 1.812.66l-.468.624c-.396-.3-.816-.516-1.332-.516-.732 0-1.068.396-1.068.84 0 .54.636.756 1.296 1.008.84.312 1.776.66 1.776 1.764 0 .948-.756 1.74-2.136 1.74-.828 0-1.62-.348-2.172-.804zm5.244-2.244c0-1.908 1.284-3.072 2.616-3.072 1.488 0 2.328 1.068 2.328 2.736 0 .204-.012.396-.036.54H23.32c.072 1.26.828 2.052 1.944 2.052.552 0 1.02-.18 1.452-.456l.348.648c-.504.324-1.128.6-1.92.6-1.56 0-2.796-1.14-2.796-3.048zm.96-.444h3.12c0-1.188-.528-1.848-1.44-1.848-.816 0-1.56.672-1.68 1.848z" }))));
4202
+ case "btn-type-1": return index.h(funcComponents.IconClose1, null);
4203
+ case "btn-type-2": return index.h(funcComponents.IconClose2, null);
4204
+ case "btn-type-3": return index.h(funcComponents.IconClose3, null);
4205
+ case "btn-type-4": return index.h(funcComponents.IconClose4, null);
4206
+ case "btn-type-5": return index.h(funcComponents.IconClose5, null);
4247
4207
  }
4248
4208
  }
4249
4209
  renderCloseButton(closeButtonType) {
4250
4210
  return (index.h("button", { class: `btn-popup-close ${closeButtonType} ${this.closeButtonSize} ${this.closeButtonPosition} close-button-color-theme-${this.closeButtonColorTheme}`, "data-dismiss": "popup", "aria-label": "Close", onClick: this.hidePopupClickHandler, type: "button" }, this.renderCloseButtonIcon(closeButtonType)));
4251
4211
  }
4252
- renderCheckoutIcon() {
4253
- return (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32", viewBox: "0 0 32 32", "aria-hidden": "true" }, index.h("g", { fill: "none", "fill-rule": "evenodd" }, index.h("path", { class: "symbol", "stroke-linecap": "round", d: "M7.52 10.839L5.614 27.387h20.032L23.737 10.84z" }), index.h("path", { class: "symbol", "stroke-linecap": "round", d: "M20.42 12.58V8.893c0-2.292-2.174-4.15-4.855-4.15-2.682 0-4.855 1.858-4.855 4.15v3.689" }))));
4254
- }
4255
4212
  renderDirectBuyCart() {
4256
4213
  const checkoutButtons = Array.from(this.el.shadowRoot.querySelectorAll(".btn-checkout"));
4257
4214
  checkoutButtons.forEach(checkoutButton => {
@@ -4374,7 +4331,7 @@ const CovetPicsPopup = class {
4374
4331
  this.renderMobileArrows(), index.h("div", { class: "popup-dialog" }, typeof this.itemId !== "undefined" &&
4375
4332
  index.h("div", { id: "covet-popup-content-carousel", class: "popup-content" }, this.renderImage(), this.renderSidebar()), ["arrows-type-1", "arrows-type-2", "arrows-type-3"].includes(this.arrowsDesktopType) &&
4376
4333
  index.h("div", { class: `desktop-arrows arrows-size-${this.arrowsDesktopSizeType} arrows-color-theme-${this.arrowsDesktopColorTheme}` }, this.renderArrows(this.arrowsDesktopType)), this.closeButtonPosition === "side" &&
4377
- this.renderCloseButton(this.closeButtonType), index.h("a", { href: "/cart", target: "_top", class: `btn-checkout desktop ${this.closeButtonPosition} ${this.closeButtonSize} close-button-color-theme-${this.closeButtonColorTheme}`, "aria-label": "View cart" }, index.h("span", { class: "counter" }), this.renderCheckoutIcon())), index.h("div", { class: "backdrop", "data-dismiss": "popup", onClick: this.hidePopupClickHandler }))));
4334
+ this.renderCloseButton(this.closeButtonType), index.h("a", { href: "/cart", target: "_top", class: `btn-checkout desktop ${this.closeButtonPosition} ${this.closeButtonSize} close-button-color-theme-${this.closeButtonColorTheme}`, "aria-label": "View cart" }, index.h("span", { class: "counter" }), index.h(funcComponents.IconCheckout, null))), index.h("div", { class: "backdrop", "data-dismiss": "popup", onClick: this.hidePopupClickHandler }))));
4378
4335
  }
4379
4336
  get el() { return index.getElement(this); }
4380
4337
  static get watchers() { return {
@@ -4519,17 +4476,13 @@ const CovetPicsPopupReviewElement = class {
4519
4476
  };
4520
4477
  }
4521
4478
  renderVerified() {
4522
- return (index.h("div", { class: "badge" }, this.renderVerifiedIcon("badge-icon"), index.h("p", { class: "badge-text" }, "Verified review")));
4523
- }
4524
- renderVerifiedIcon(badgeClass = "") {
4525
- return (index.h("svg", { class: `icon-verified ${badgeClass}`, width: "11", height: "11", viewBox: "0 0 11 11", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M5.5 0L6.52916 0.658169L7.73705 0.4755L8.40954 1.49537L9.5873 1.81978L9.78683 3.025L10.7308 3.80041L10.4229 4.98258L10.9699 6.07491L10.2077 7.02963L10.2631 8.25L9.17857 8.8122L8.73282 9.94959L7.51335 10.022L6.64351 10.8798L5.5 10.45L4.35649 10.8798L3.48665 10.022L2.26718 9.94959L1.82143 8.8122L0.73686 8.25L0.79227 7.02963L0.0301294 6.07491L0.577117 4.98258L0.269189 3.80041L1.21317 3.025L1.4127 1.81978L2.59046 1.49537L3.26295 0.4755L4.47084 0.658169L5.5 0Z", fill: "#157F3F" }), index.h("path", { d: "M7.66344 4.09961L4.66344 7.09961L3.2998 5.73597", stroke: "white", "stroke-width": "1.3", "stroke-linecap": "round", "stroke-linejoin": "round" })));
4479
+ return (index.h("div", { class: "badge" }, index.h(funcComponents.VerificationIcon, { iconClass: "badge-icon" }), index.h("p", { class: "badge-text" }, "Verified review")));
4526
4480
  }
4527
4481
  render() {
4528
- const starsArray = [1, 2, 3, 4, 5];
4529
4482
  const starOnlyClass = this.caption === null ? "star-only" : "";
4530
4483
  const starOnly = this.caption === null && this.itemType === "text";
4531
4484
  const verifiedClass = this.verified ? "verified" : "";
4532
- 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())));
4485
+ return (index.h(index.Host, { class: `popup-review ${starOnlyClass}`, style: this.reviewCSS }, index.h(funcComponents.StarRatingPopupRewiw, { rating: this.rating, starOnlyClass: starOnlyClass }), 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())));
4533
4486
  }
4534
4487
  get el() { return index.getElement(this); }
4535
4488
  static get watchers() { return {
@@ -7,34 +7,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
7
7
 
8
8
  const index = require('./index-45313b48.js');
9
9
  const sort = require('./sort-7b3e4dd5.js');
10
+ const funcComponents = require('./funcComponents-42dd7de7.js');
10
11
  const utils = require('./utils-85481438.js');
11
12
  const fragment = require('./fragment-29c21ac8.js');
12
13
  const getters = require('./getters-c3c47af0.js');
13
14
  const slider = require('./slider-dbefa25c.js');
14
15
  require('./redux-toolkit.esm-ed0a74c1.js');
15
16
 
16
- const StarRating = ({ rating, hideRating, ratingClass, starClass, label }) => {
17
- const starsArray = [1, 2, 3, 4, 5];
18
- const starRatingClass = ratingClass !== undefined ? ratingClass : "";
19
- const iconClass = starClass !== undefined ? starClass : "";
20
- return (index.h("div", { class: `${starRatingClass}`, role: "radiogroup", "aria-label": "star rating" },
21
- !hideRating && starsArray.map((el) => index.h("span", { class: `icon-star ${iconClass} ${el <= rating ? "active" : ""}`, role: "radio", "aria-checked": `${el <= rating}`, "aria-label": `star ${el}/${starsArray.length}` },
22
- index.h("svg", { class: "svg-star", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", role: "img" },
23
- index.h("title", null, "star rating"),
24
- 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" })))),
25
- label && index.h("span", { class: "rating-data" }, label)));
26
- };
27
- const ProgressRating = ({ rating, percentage, count }) => {
28
- return (index.h(index.Fragment, null,
29
- index.h("p", { class: "star-score" },
30
- rating,
31
- " ",
32
- rating > 1 ? "stars" : "star"),
33
- index.h("div", { class: "progressbar", role: "progressbar", "aria-valuenow": percentage, "aria-valuemin": "0", "aria-valuemax": "100", tabindex: "0" },
34
- index.h("span", { class: "progressbar-value", style: { "width": `${percentage}%` } })),
35
- index.h("p", { class: "percent-count", "aria-label": `voted ${count}, ${rating} ${rating > 1 ? "stars" : "star"}` }, count)));
36
- };
37
-
38
17
  const covetPicsGalleryHeaderCss = ".header.header1{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;padding:25px 20px 25px 20px}.header.header2{padding:25px 63px 0px 63px}@media only screen and (max-width: 799.98px){.header.header2{padding:25px 30px 0px 30px}}.header.header3{padding:25px 63px 25px 63px}@media only screen and (max-width: 799.98px){.header.header3{padding:25px 25px 25px 25px}}.header.header4{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;padding:0px 63px 35px 63px}@media only screen and (max-width: 799.98px){.header.header4{padding:0px 25px 35px 25px}}.rated-wrap{position:relative;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:justify;justify-content:space-between}@media only screen and (max-width: 799.98px){.rated-wrap.header2{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center}.rated-wrap.header2:after{display:none}}.rated-wrap.header2.show-separation:after{content:\"\";position:absolute;top:0;left:50%;width:1px;height:100%;background-color:#ECECEC;-webkit-transform:translateX(-50%);transform:translateX(-50%)}@media only screen and (max-width: 799.98px){.rated-wrap.header2.show-separation:after:after{display:none}}.rated-wrap.header4{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.rating-wrap.header1{position:relative}.rating-wrap.header2{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.rating-wrap.header3{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.rating-btn{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;border:none;background-color:transparent;cursor:pointer;position:relative;padding:0}.rating-text{font-size:14px;font-weight:400;color:#919EAB}.top-title{text-transform:uppercase;font-size:11px;font-weight:700;letter-spacing:2px;color:#919EAB;margin-bottom:25px}.star-title{width:9px;height:9px;margin-right:9px}.rating-title{margin:0}.rating-title.header4{font-size:18px;font-weight:500;color:#000000}.rated{margin-left:20px;font-size:14px;font-weight:700;color:#919EAB}.rating-breakdown.header1{position:absolute;display:block;top:0;left:0;color:#919EAB;font-size:14px;background-color:white;-webkit-transform:translateY(40px);transform:translateY(40px);max-height:0;overflow:hidden;opacity:0;padding:0;margin:0;-webkit-transition:opacity 0.3s ease;transition:opacity 0.3s ease;border-radius:4px;border:1px solid transparent;-ms-flex:none;flex:none}.rating-breakdown.header1.show-breakdown{-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;min-width:326px;padding-bottom:23px}.rating-breakdown.header2{padding-left:0;list-style:none;margin-top:0;margin-bottom:0}.rating-breakdown-title{font-size:14px;font-weight:700;margin-left:30px;color:#1F273D}.rating-breakdown-score{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin:7px 30px 7px 30px}.rating-breakdown-text{margin:0px 0px 0px 20px;font-size:12px}.score.header1{margin-left:auto}.score.header2{margin-top:auto;font-size:14px;color:#1F273D;margin-bottom:0}@media only screen and (max-width: 799.98px){.score.header2{margin-bottom:20px}}.score.header3{color:#000000;padding-top:17px;margin:0}.score.header4{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;font-size:14px;font-weight:400;color:#919EAB;margin:19px 0px 0px 0px}.score-number.header2{font-size:62px;line-height:62px}.score-number.header3{font-size:18px;font-weight:600;color:#000000}.score-number.header4{font-size:14px;font-weight:700;color:#919EAB;margin-left:17px}.score-slash{position:relative;width:1px;height:14px;display:block;background-color:#C7C7C7;margin-left:12px;margin-right:12px}.score-total.header2{color:#919EAB;font-size:14px;margin-left:13px;padding-left:10px;position:relative}.score-total.header2:after{content:\"\";position:absolute;top:50%;left:0;width:1px;height:14px;background-color:#C7C7C7;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.score-total.header3{color:#919EAB;font-size:14px;padding-top:12px;margin:0}.score-total.header4{color:#919EAB;font-size:14px;font-weight:700;margin:0;position:relative}.score-total.header4.space-left{margin-left:17px}.sort-wrap.header2{display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end;margin-top:15px;margin-bottom:15px}@media only screen and (max-width: 799.98px){.sort-wrap.header2{-ms-flex-pack:center;justify-content:center}}.sort-wrap.header3{margin-top:30px}.sort-wrap.header4{margin-top:auto}.sorting{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;position:relative;-ms-flex:none;flex:none}.sorting.header4{border-radius:4px;margin-top:auto}.sort-title{font-size:14px;font-weight:700;color:#919EAB}.sort-title.header2{font-size:12px;font-weight:700;color:#000000}.sort-title.header3{font-size:12px;font-weight:700;color:#000000}.sort-title.header4{font-size:14px;font-weight:700;color:#007ACE}.sort-btn{background-color:transparent;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;cursor:pointer}.sort-btn.header2{color:#000000}.sort-btn.header3{border:1px solid #ECECEC;border-radius:4px;padding:8px 14px 8px 14px;margin-left:10px}.sort-btn.header4{color:#007ACE}.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;-ms-flex:none;flex:none}@media only screen and (max-width: 799.98px){.sort-select.header2{right:50%;-webkit-transform:translate(50%, 30px);transform:translate(50%, 30px)}}.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;min-width:186px}.sort-select.header3{left:0;right:auto;-webkit-transform:translateY(40px);transform:translateY(40px)}.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}@media only screen and (max-width: 799.98px){.sort-arrow.header1{margin-left:0}}.sort-arrow.header2{width:8px;height:6px;margin-left:15px}.sort-arrow.header4{width:10px;height:6px;margin-left:15px}@media only screen and (max-width: 799.98px){.sort-arrow.header4{margin-left:0}}.sort-arrow-down{-webkit-transform:rotateX(180deg);transform:rotateX(180deg)}.rating-row{display:-ms-flexbox;display:flex;margin-bottom:12.2px}.star-score{width:57px;margin-bottom:0;margin-top:0;color:#C7C7C7;font-size:12px;line-height:1.4}.progressbar{width:180px;height:15px;border-radius:4px;background-color:#F7F8FC;margin:0px 10px 0 10px;position:relative}.progressbar-value{top:0;left:0;height:15px;width:10%;display:block;border-radius:4px;background-color:#5C6AC4}.percent-count{color:#5C6AC4;font-size:10px;margin-top:0;margin-bottom:0;line-height:1.4}.review-btn{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;border:none;background-color:#5C6AC4;border-radius:4px;cursor:pointer;padding:10px 14px;color:#FFFFFF;font-size:14px}.icon-pen{width:12px;height:12px;margin-right:10px}@media only screen and (max-width: 799.98px){.icon-pen{margin-right:0}}";
39
18
 
40
19
  const CovetPicsGalleryHeader = class {
@@ -75,6 +54,9 @@ const CovetPicsGalleryHeader = class {
75
54
  return false;
76
55
  this.appStore.dispatch(sort.sortUpdated(event.target.getAttribute("aria-selected")));
77
56
  this.sortUpdated.emit(event.target.getAttribute("aria-selected")); //TODO remove this (call this in component use sibscribe)
57
+ // a11y focus
58
+ const sortBtn = this.el.querySelector(".sort-btn");
59
+ sortBtn.focus();
78
60
  };
79
61
  this.headerType = "header1";
80
62
  this.rating = 0;
@@ -122,25 +104,25 @@ const CovetPicsGalleryHeader = class {
122
104
  return newBreakdown;
123
105
  }
124
106
  renderBreakdown() {
125
- return (index.h("div", { class: `rating-breakdown ${this.headerType} ${this.showBreakdownDropdown ? "show-breakdown" : ""}` }, index.h("h3", { class: "rating-breakdown-title" }, "Review ratings breakdown"), this.getBreakdown().map(el => index.h("div", { class: "rating-breakdown-score" }, index.h("covet-pics-star-rating", { rating: el.rating, showLabel: false, starSize: 10, spaceStars: 8, emptyStarColor: "transpotent", starBorderColor: "#fec500", starBorderWidth: 10 }), index.h("p", { class: "rating-breakdown-text" }, el.starLabel, " ", el.starLabel !== "one" ? "stars" : "star"), index.h("span", { class: `score ${this.headerType}` }, el.count)))));
107
+ return (index.h("div", { class: `rating-breakdown ${this.headerType} ${this.showBreakdownDropdown ? "show-breakdown" : ""}`, role: "listbox", "aria-labelledby": "dropdown-label", "aria-activedescendant": "selected-option", tabindex: "-1" }, index.h("h3", { class: "rating-breakdown-title" }, "Review ratings breakdown"), this.getBreakdown().map(el => index.h("div", { class: "rating-breakdown-score", role: "option" }, index.h("covet-pics-star-rating", { rating: el.rating, showLabel: false, starSize: 10, spaceStars: 8, emptyStarColor: "transpotent", starBorderColor: "#fec500", starBorderWidth: 10 }), index.h("p", { class: "rating-breakdown-text" }, el.starLabel, " ", el.starLabel !== "one" ? "stars" : "star"), index.h("span", { class: `score ${this.headerType}` }, el.count)))));
126
108
  }
127
109
  renderSort() {
128
110
  var _a;
129
111
  const mobileSort = !this.isDesktopScreen && (this.headerType === "header1" || this.headerType === "header4");
130
112
  const iconActiveClass = this.showSortDropdown ? "sort-arrow-down" : "";
131
113
  const mobileSortSelected = mobileSort ? "" : (_a = this.appState.sort.options.find(el => el.value === this.appState.sort.selected)) === null || _a === void 0 ? void 0 : _a.name;
132
- return (index.h("div", { class: `sorting ${this.headerType}` }, index.h("span", { class: `sort-title ${this.headerType}` }, "Sort ", mobileSort ? "" : "by", " :"), index.h("button", { class: `sort-btn ${this.headerType}`, onClick: () => this.showSortDropdown = !this.showSortDropdown }, index.h("span", { class: "sort-btn-text" }, mobileSortSelected), this.headerType === "header2" &&
114
+ return (index.h("div", { class: `sorting ${this.headerType}` }, index.h("span", { class: `sort-title ${this.headerType}` }, "Sort ", mobileSort ? "" : "by", " :"), index.h("button", { class: `sort-btn ${this.headerType}`, onClick: () => this.showSortDropdown = !this.showSortDropdown, "aria-haspopup": "listbox", "aria-expanded": "false", "aria-labelledby": "dropdown-label dropdown-button", "aria-controls": "dropdown-menu" }, index.h("span", { class: "sort-btn-text" }, mobileSortSelected), this.headerType === "header2" &&
133
115
  index.h("svg", { class: `sort-arrow ${this.headerType} ${iconActiveClass}`, viewBox: "0 0 8 6", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M4.5791 5.50671C4.37892 5.75887 3.99608 5.75887 3.79589 5.50671L0.663473 1.56088C0.403343 1.2332 0.636699 0.75 1.05508 0.75L7.31992 0.75C7.7383 0.75 7.97166 1.2332 7.71153 1.56088L4.5791 5.50671Z", fill: "#1F273D" })), (this.headerType === "header1" || this.headerType === "header3") &&
134
116
  index.h("svg", { class: `sort-arrow ${this.headerType} ${iconActiveClass}`, 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" })), this.headerType === "header4" &&
135
- index.h("svg", { class: `sort-arrow ${this.headerType} ${iconActiveClass}`, viewBox: "0 0 10 6", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M1 1L5 5L9 1", stroke: "#007ACE", "stroke-linecap": "round", "stroke-linejoin": "round" }))), index.h("ul", { class: `sort-select ${this.headerType} ${this.showSortDropdown ? "show-sort" : ""}` }, this.appState.sort.options.map(el => index.h("li", { class: `sort__dropdown-item ${el.value === this.appState.sort.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)))));
117
+ index.h("svg", { class: `sort-arrow ${this.headerType} ${iconActiveClass}`, viewBox: "0 0 10 6", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M1 1L5 5L9 1", stroke: "#007ACE", "stroke-linecap": "round", "stroke-linejoin": "round" }))), index.h("ul", { class: `sort-select ${this.headerType} ${this.showSortDropdown ? "show-sort" : ""}`, role: "listbox", "aria-hidden": `${!this.showSortDropdown}`, "aria-labelledby": "dropdown-label", "aria-activedescendant": "selected-option", tabindex: "-1" }, this.appState.sort.options.map(el => index.h("li", { class: `sort__dropdown-item ${el.value === this.appState.sort.selected ? "active" : ""}`, "aria-selected": el.value, onClick: this.onSelectUpdate, role: "option" }, 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)))));
136
118
  }
137
119
  renderHeaderOne() {
138
120
  const mobileRating = !this.isDesktopScreen && (this.headerType === "header1" || this.headerType === "header4");
139
- return (index.h("div", { class: `header ${this.headerType}` }, index.h("div", { class: `rated-wrap ${this.headerType}` }, index.h("button", { class: "rating-btn", onClick: this.onClickRatingHendler, onMouseEnter: this.mouseEnterRatingHandler, onMouseLeave: this.mouseLeaveRatingHandler }, index.h("covet-pics-star-rating", { rating: this.rating, showLabel: false, starSize: 15, spaceStars: 11, emptyStarColor: "transpotent", starBorderColor: "#fec500", starBorderWidth: 10 }), this.showAverageStarRating && index.h("p", { class: "rating-text" }, index.h("span", { class: "rated" }, "Rated ", this.rating, "/5 "), mobileRating ? `(${this.ratingCount})` : `based on ${this.ratingCount} customer reviews.`)), this.showAverageStarRating && this.renderBreakdown()), this.showSort && this.renderSort()));
121
+ return (index.h("div", { class: `header ${this.headerType}` }, index.h("div", { class: `rated-wrap ${this.headerType}` }, index.h("button", { class: "rating-btn", onClick: this.onClickRatingHendler, onMouseEnter: this.mouseEnterRatingHandler, onMouseLeave: this.mouseLeaveRatingHandler, "aria-haspopup": "listbox", "aria-expanded": "false", "aria-labelledby": "dropdown-label dropdown-button", "aria-controls": "dropdown-menu" }, index.h("covet-pics-star-rating", { rating: this.rating, showLabel: false, starSize: 15, spaceStars: 11, emptyStarColor: "transpotent", starBorderColor: "#fec500", starBorderWidth: 10 }), this.showAverageStarRating && index.h("p", { class: "rating-text" }, index.h("span", { class: "rated" }, "Rated ", this.rating, "/5 "), mobileRating ? `(${this.ratingCount})` : `based on ${this.ratingCount} customer reviews.`)), this.showAverageStarRating && this.renderBreakdown()), this.showSort && this.renderSort()));
140
122
  }
141
123
  renderHeaderTwo() {
142
124
  return (index.h("div", { class: `header ${this.headerType}` }, this.showAverageStarRating &&
143
- index.h("div", { class: `rated-wrap ${this.headerType} ${this.showBreakdown ? "show-separation" : ""}` }, index.h("div", { class: `rating-wrap ${this.headerType}` }, this.isDesktopScreen && index.h("h3", { class: "rating-title" }, "Customers rated this:"), index.h("p", { class: `score ${this.headerType}` }, index.h("span", { class: `score-number ${this.headerType}` }, this.rating), " out of 5", index.h("span", { class: `score-total ${this.headerType}` }, " from ", this.ratingCount, " ratings"))), index.h("ul", { class: `rating-breakdown ${this.headerType}`, "aria-label": "gallery stars review rating" }, this.getBreakdown().map(el => index.h("li", { class: "rating-row" }, index.h(ProgressRating, { rating: el.rating, percentage: el.rating_percentage, count: el.count }))))), index.h("div", { class: `sort-wrap ${this.headerType}` }, this.showSort && this.renderSort())));
125
+ index.h("div", { class: `rated-wrap ${this.headerType} ${this.showBreakdown ? "show-separation" : ""}` }, index.h("div", { class: `rating-wrap ${this.headerType}` }, this.isDesktopScreen && index.h("h3", { class: "rating-title" }, "Customers rated this:"), index.h("p", { class: `score ${this.headerType}` }, index.h("span", { class: `score-number ${this.headerType}` }, this.rating), " out of 5", index.h("span", { class: `score-total ${this.headerType}` }, " from ", this.ratingCount, " ratings"))), index.h("ul", { class: `rating-breakdown ${this.headerType}`, "aria-label": "gallery stars review rating" }, this.getBreakdown().map(el => index.h("li", { class: "rating-row" }, index.h(funcComponents.ProgressRating, { rating: el.rating, percentage: el.rating_percentage, count: el.count }))))), index.h("div", { class: `sort-wrap ${this.headerType}` }, this.showSort && this.renderSort())));
144
126
  }
145
127
  renderHeaderThree() {
146
128
  return (index.h("div", { class: `header ${this.headerType}` }, index.h("div", { class: `rated-wrap ${this.headerType}` }, index.h("div", { class: "rating-wrap" }, index.h("covet-pics-star-rating", { rating: 4, showLabel: false, starSize: 18, spaceStars: 11, emptyStarColor: "transpotent", starBorderColor: "#fec500", starBorderWidth: 10 }), this.showAverageStarRating && index.h("p", { class: `score ${this.headerType}` }, index.h("span", { class: `score-number ${this.headerType}` }, this.rating), " out of 5 stars"), index.h("p", { class: `score-total ${this.headerType}` }, this.ratingCount, " reviews")), index.h("div", { class: "review-wrap" }, index.h("button", { class: "review-btn", onClick: this.onClickAddReviewHendler }, index.h("svg", { class: "icon-pen", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M5.94629 10.4102H10.8928", stroke: "white", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("path", { d: "M8.4197 1.34148C8.63834 1.12283 8.93489 1 9.24411 1C9.39721 1 9.54882 1.03016 9.69027 1.08875C9.83173 1.14734 9.96025 1.23322 10.0685 1.34148C10.1768 1.44975 10.2627 1.57827 10.3213 1.71972C10.3798 1.86118 10.41 2.01279 10.41 2.16589C10.41 2.319 10.3798 2.47061 10.3213 2.61206C10.2627 2.75351 10.1768 2.88204 10.0685 2.9903L3.19843 9.86039L1 10.41L1.54961 8.21157L8.4197 1.34148Z", stroke: "white", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" })), this.isDesktopScreen && "Write a review", " "))), index.h("div", { class: `sort-wrap ${this.headerType}` }, this.showSort && this.renderSort())));
@@ -334,7 +316,7 @@ const CovetPicsGalleryItem = class {
334
316
  return (index.h(index.Host, { class: { [`${this.hoverAnimationStyle} hover-animation`]: this.hoverEnabled, "hover-preview": this.hoverPreview, "no-animation": this.animationDisabled, "highlighted": this.highlighted }, style: this.getItemCSSVariables(), "is-loading": true, onClick: this.itemClickHandler, onfocus: this.itemOnFocusHandler, onKeyDown: this.itemClickHandler, tabindex: this.tabIndex, "aria-hidden": `${this.tabIndex === -1}` }, this.renderInstagramIcon(["hover-animation-2", "hover-animation-4"]), this.imageUrl && this.imageHighResolutionUrl && this.lazyLoad &&
335
317
  index.h("img", { class: "bg", onLoad: this.imageLoadedHandler, onError: this.imageLoadedHandler, "data-srcset": `${this.imageUrl} 640w, ${this.imageHighResolutionUrl} 1080w`, "data-sizes": this.imageResponsiveSizes, alt: this.altTag }), this.imageUrl && this.imageHighResolutionUrl && !this.lazyLoad &&
336
318
  index.h("img", { class: "bg", onLoad: this.imageLoadedHandler, onError: this.imageLoadedHandler, srcset: `${this.imageUrl} 640w, ${this.imageHighResolutionUrl} 1080w`, sizes: this.imageResponsiveSizes, alt: this.altTag, loading: "lazy" }), (this.hoverAnimationStyle === "hover-animation-1" || this.hoverAnimationStyle === "hover-animation-2") && this.rating > 0 && this.renderRating(), index.h("span", { class: "overlay-effect" }), this.hoverAnimationStyle === "hover-animation-5" && this.rating > 0 &&
337
- index.h(StarRating, { rating: this.rating, ratingClass: "rating", label: `${this.rating / 5}`, hideRating: itemSize === "size-xs" && !this.highlighted }), index.h("span", { class: `info hover ${itemSize}` }, this.renderInstagramIcon(["hover-animation-1", "hover-animation-5"]), index.h("span", { class: `btn source-${this.itemSource} ${this.showHoverIcon && "show"} ${starRatingClass}` }, this.renderInstagramIcon(["hover-animation-3"]), this.hoverAnimationStyle === "hover-animation-2" &&
319
+ index.h(funcComponents.StarRating, { rating: this.rating, ratingClass: "rating", label: `${this.rating / 5}`, hideRating: itemSize === "size-xs" && !this.highlighted }), index.h("span", { class: `info hover ${itemSize}` }, this.renderInstagramIcon(["hover-animation-1", "hover-animation-5"]), index.h("span", { class: `btn source-${this.itemSource} ${this.showHoverIcon && "show"} ${starRatingClass}` }, this.renderInstagramIcon(["hover-animation-3"]), this.hoverAnimationStyle === "hover-animation-2" &&
338
320
  index.h("svg", { width: "20", height: "20", xmlns: "http://www.w3.org/2000/svg", class: "icon-arrow", "aria-hidden": "true" }, index.h("path", { class: "dynamic-fill", d: "M13.3535534,4 L19.7071068,10.3535534 L13.3535534,16.7071068 L12.6464466,16 L17.792,10.853 L1,10.8535534 L1,9.85355339 L17.792,9.853 L12.6464466,4.70710678 L13.3535534,4 Z", id: "Combined-Shape", fill: "#ffffff", "fill-rule": "nonzero" })), this.getLabelCaption(), this.hoverAnimationStyle === "hover-animation-4" && this.rating === 0 &&
339
321
  index.h("svg", { width: "20px", height: "20px", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, index.h("polygon", { fill: "#fff", class: "dynamic-fill", id: "Combined-Shape", points: "6 4.70710678 6.70710678 4 13.0606602 10.3535534 6.70710678 16.7071068 6 16 11.6464466 10.3535534" })), (this.hoverAnimationStyle === "hover-animation-3" || this.hoverAnimationStyle === "hover-animation-4") && this.rating > 0 && this.renderRating("info-rating"))), (this.hoverAnimationStyle === "hover-animation-1" || this.hoverAnimationStyle === "hover-animation-2") && this.rating > 0 && itemSize !== "size-xs" && this.renderUserAndDate()));
340
322
  }
@@ -344,7 +326,7 @@ const CovetPicsGalleryItem = class {
344
326
  const starRatingClass = this.rating > 0 ? "star-rating" : "";
345
327
  const starOnly = this.caption === null && this.itemType === "text";
346
328
  return (index.h(index.Host, { class: { [`${this.hoverAnimationStyle} hover-animation text-review`]: this.hoverEnabled, "hover-preview": this.hoverPreview, "no-animation": this.animationDisabled, "highlighted": this.highlighted }, style: this.getItemCSSVariables(), "is-loading": true, onClick: this.itemClickHandler, onfocus: this.itemOnFocusHandler, onKeyDown: this.itemClickHandler, tabindex: this.tabIndex, "aria-hidden": `${this.tabIndex === -1}` }, this.hoverAnimationStyle === "hover-animation-5" && this.rating > 0 &&
347
- index.h(StarRating, { rating: this.rating, ratingClass: "rating", label: `${this.rating}/5`, hideRating: itemSize === "size-xs" && !this.highlighted }), index.h("div", { class: `description text-review ${itemSize}` }, this.rating > 0 && this.renderRating("text-review"), !hideCaption && this.itemType === "text" &&
329
+ index.h(funcComponents.StarRating, { rating: this.rating, ratingClass: "rating", label: `${this.rating}/5`, hideRating: itemSize === "size-xs" && !this.highlighted }), index.h("div", { class: `description text-review ${itemSize}` }, this.rating > 0 && this.renderRating("text-review"), !hideCaption && this.itemType === "text" &&
348
330
  index.h("covet-pics-gallery-item-caption", { class: `${this.hoverAnimationStyle} ${itemSize}`, "caption-class": `caption text-review ${this.layout} ${this.hoverAnimationStyle} ${itemSize}`, caption: this.caption, "item-style": this.hoverAnimationStyle, "layout-type": this.layout }), starOnly &&
349
331
  index.h("div", { class: "star-wrap" }, index.h("covet-pics-star-rating", { rating: this.rating, showLabel: false })), index.h("span", { class: `info hover ${itemSize}` }, this.renderInstagramIcon(["hover-animation-1", "hover-animation-5"]), index.h("span", { class: `btn source-${this.itemSource} ${this.showHoverIcon && "show"} ${starRatingClass}` }, this.renderInstagramIcon(["hover-animation-3"]), this.hoverAnimationStyle === "hover-animation-2" &&
350
332
  index.h("svg", { width: "20", height: "20", xmlns: "http://www.w3.org/2000/svg", class: "icon-arrow", "aria-hidden": "true" }, index.h("path", { class: "dynamic-fill", d: "M13.3535534,4 L19.7071068,10.3535534 L13.3535534,16.7071068 L12.6464466,16 L17.792,10.853 L1,10.8535534 L1,9.85355339 L17.792,9.853 L12.6464466,4.70710678 L13.3535534,4 Z", id: "Combined-Shape", fill: "#ffffff", "fill-rule": "nonzero" })), this.getLabelCaption(), this.hoverAnimationStyle === "hover-animation-4" && this.rating === 0 &&
@@ -594,10 +576,10 @@ const CovetPicsGalleryItemDetail = class {
594
576
  return (index.h(index.Host, { class: `${this.itemStyle} ${this.reviewClass} ${this.starOnlyClass}`, "is-loading": this.itemType !== "text", onClick: this.itemClickHandler, onKeyDown: this.itemClickHandler, onfocus: this.itemOnFocusHandler, style: this.getItemCSSVariables(), tabindex: this.tabIndex, "aria-hidden": `${this.tabIndex === -1}` }, index.h("div", { class: `img-wrap ${this.itemStyle} ${this.layout} ${this.starOnlyClass}` }, this.itemType !== "text" &&
595
577
  index.h("img", { class: `img ${this.layout} ${imgLazy}`, onLoad: this.imageLoadedHandler, onError: this.imageLoadedHandler, srcset: !this.lazyLoad ? srcset : null, sizes: !this.lazyLoad ? this.imageResponsiveSizes : null, "data-srcset": this.lazyLoad ? srcset : null, "data-sizes": this.lazyLoad ? this.imageResponsiveSizes : null, loading: !this.lazyLoad ? "lazy" : null, alt: this.altTag }), !hideCaption && this.itemType === "text" &&
596
578
  index.h("covet-pics-gallery-item-caption", { class: `${this.itemStyle} ${itemSize}`, "caption-class": `caption text-review ${this.layout} ${this.itemStyle} ${itemSize}`, caption: this.caption, "item-style": this.itemStyle, "layout-type": this.layout }), starOnly &&
597
- index.h("div", { class: `caption star-only ${this.itemStyle} ${itemSize}` }, index.h(StarRating, { rating: this.rating, ratingClass: `star-rating ${this.itemStyle} ${itemSize} ${this.reviewClass}`, starClass: `${itemSize} ${this.itemStyle} ${this.reviewClass} ${this.starOnlyClass} ${this.highlightedClass}` }), index.h("p", { class: `star-label ${this.itemStyle} ${itemSize}` }, "(Rated ", this.rating, " stars)")), this.verified && this.renderVerified()), index.h("div", { class: `description ${this.itemStyle} ${this.layout} ${this.highlightedClass} ${itemSize} ${this.reviewClass} ${this.starOnlyClass}` }, showTopRating &&
579
+ index.h("div", { class: `caption star-only ${this.itemStyle} ${itemSize}` }, index.h(funcComponents.StarRating, { rating: this.rating, ratingClass: `star-rating ${this.itemStyle} ${itemSize} ${this.reviewClass}`, starClass: `${itemSize} ${this.itemStyle} ${this.reviewClass} ${this.starOnlyClass} ${this.highlightedClass}` }), index.h("p", { class: `star-label ${this.itemStyle} ${itemSize}` }, "(Rated ", this.rating, " stars)")), this.verified && this.renderVerified()), index.h("div", { class: `description ${this.itemStyle} ${this.layout} ${this.highlightedClass} ${itemSize} ${this.reviewClass} ${this.starOnlyClass}` }, showTopRating &&
598
580
  index.h("div", { class: `top ${this.itemStyle} ${itemSize}` }, this.itemStyle === "basic-1" && this.userName && index.h("span", { class: `avatar ${itemSize}` }, this.userName[0]), this.itemStyle === "basic-1" &&
599
581
  index.h("div", { class: "top-wrap" }, index.h("h3", { class: `username basic-1 ${itemSize}` }, this.userName), index.h("span", { class: `created-time basic-1 ${itemSize}` }, fragment.format(this.createdTime))), this.renderRating(`${itemSize}`)), showRowStarRating && this.rating > 0 &&
600
- index.h("div", { class: `top ${this.itemStyle} ${itemSize} ${this.reviewClass} ${this.starOnlyClass}` }, index.h(StarRating, { rating: this.rating, ratingClass: `star-rating ${this.itemStyle} ${itemSize} ${this.reviewClass}`, starClass: `${itemSize} ${this.itemStyle}` })), !hideCaption && this.itemType !== "text" &&
582
+ index.h("div", { class: `top ${this.itemStyle} ${itemSize} ${this.reviewClass} ${this.starOnlyClass}` }, index.h(funcComponents.StarRating, { rating: this.rating, ratingClass: `star-rating ${this.itemStyle} ${itemSize} ${this.reviewClass}`, starClass: `${itemSize} ${this.itemStyle}` })), !hideCaption && this.itemType !== "text" &&
601
583
  index.h("p", { class: `caption ${this.layout} ${this.itemStyle} ${itemSize} ${jsTextCut}`, style: this.captionCSS, innerHTML: this.caption }), this.itemType === "text" &&
602
584
  index.h("div", { class: `bottom-review ${this.itemStyle} ${this.layout} ${this.highlightedClass} ${itemSize}` }, index.h("span", { class: `link-label ${this.itemStyle} ${itemSize}` }, "Review For"), index.h("a", { href: this.tabIndex !== -1 ? this.links[0].link : null, class: `link-review ${this.itemStyle} ${itemSize}` }, this.links[0].title)), this.itemStyle !== "basic-1" &&
603
585
  index.h("div", { class: `bottom ${this.itemStyle} ${this.layout} ${this.highlightedClass} ${itemSize} ${this.reviewClass} ${this.starOnlyClass}` }, this.renderUserAndDate(itemSize)))));
@@ -615,7 +597,7 @@ const CovetPicsGalleryItemDetail = class {
615
597
  ? `${this.imageUrl} 640w, ${this.imageHighResolutionUrl} 1080w`
616
598
  : null;
617
599
  return (index.h(index.Host, { class: `${this.itemStyle}`, "is-loading": this.itemType !== "text", onClick: this.itemClickHandler, onKeyDown: this.itemClickHandler, onfocus: this.itemOnFocusHandler, style: this.getItemCSSVariables(), tabindex: this.tabIndex, "aria-hidden": `${this.tabIndex === -1}` }, index.h("div", { class: `img-wrap ${this.itemStyle}` }, index.h("img", { class: `img ${this.layout} ${imgLazy}`, onLoad: this.imageLoadedHandler, onError: this.imageLoadedHandler, srcset: !this.lazyLoad ? srcset : null, sizes: !this.lazyLoad ? this.imageResponsiveSizes : null, "data-srcset": this.lazyLoad ? srcset : null, "data-sizes": this.lazyLoad ? this.imageResponsiveSizes : null, loading: !this.lazyLoad ? "lazy" : null, alt: this.altTag }), this.verified && this.itemStyle === "modern-3" && this.renderVerified()), index.h("div", { class: `description ${this.itemStyle} ${this.layout} ${this.highlightedClass} ${itemSize}` }, this.verified && this.itemStyle === "modern-2" && this.renderVerified(), index.h("div", { class: `top ${this.itemStyle} ${itemSize}` }, showTopRating && this.renderRating(`${itemSize}`), this.verified && this.itemStyle === "modern-1" && this.renderVerified(), showRowStarRating && this.rating > 0 &&
618
- index.h(StarRating, { rating: this.rating, ratingClass: `star-rating ${this.itemStyle} ${itemSize} ${this.reviewClass}`, starClass: `${itemSize} ${this.itemStyle}` })), !hideCaption &&
600
+ index.h(funcComponents.StarRating, { rating: this.rating, ratingClass: `star-rating ${this.itemStyle} ${itemSize} ${this.reviewClass}`, starClass: `${itemSize} ${this.itemStyle}` })), !hideCaption &&
619
601
  index.h("p", { class: `caption ${this.layout} ${this.itemStyle} ${itemSize} ${jsTextCut}`, style: this.captionCSS, innerHTML: this.caption }), index.h("div", { class: `bottom ${this.itemStyle} ${this.layout} ${this.highlightedClass} ${itemSize}` }, this.verified && ["modern-4", "modern-5", "modern-6"].includes(this.itemStyle) && this.renderVerifiedIcon(), this.renderUserAndDate(itemSize)))));
620
602
  }
621
603
  renderReviewModernItem() {
@@ -629,8 +611,8 @@ const CovetPicsGalleryItemDetail = class {
629
611
  || (starOnly && ["modern-1", "modern-2", "modern-3", "modern-4", "modern-5"].includes(this.itemStyle));
630
612
  const showStarRating = textReview && ["modern-2", "modern-3", "modern-5"].includes(this.itemStyle);
631
613
  return (index.h(index.Host, { class: `${this.itemStyle} ${this.reviewClass} ${this.starOnlyClass}`, "is-loading": this.itemType !== "text", onClick: this.itemClickHandler, onKeyDown: this.itemClickHandler, onfocus: this.itemOnFocusHandler, style: this.getItemCSSVariables(), tabindex: this.tabIndex, "aria-hidden": `${this.tabIndex === -1}` }, index.h("div", { class: `img-wrap ${this.itemStyle} ${this.reviewClass} ${this.starOnlyClass}` }), index.h("div", { class: `description ${this.itemStyle} ${this.reviewClass} ${this.starOnlyClass} ${this.layout} ${this.highlightedClass} ${itemSize}` }, index.h("div", { class: `top ${this.itemStyle} ${itemSize} ${this.highlightedClass} ${this.reviewClass} ${this.starOnlyClass}` }, showRating && this.renderRating(`${itemSize}`), this.verified && this.itemStyle === "modern-1" && this.renderVerifiedIcon(), showUserAndData && this.renderUserAndDate(itemSize), showStarRating &&
632
- index.h(StarRating, { rating: this.rating, ratingClass: `star-rating ${this.itemStyle} ${itemSize} ${this.reviewClass}`, starClass: `${itemSize} ${this.itemStyle}` })), starOnly &&
633
- index.h("div", { class: `caption star-only ${this.itemStyle} ${itemSize}` }, index.h(StarRating, { rating: this.rating, ratingClass: `star-rating text-review ${this.itemStyle} ${itemSize} ${this.starOnlyClass}`, starClass: `star-only ${itemSize} ${this.itemStyle}` }), index.h("p", { class: `star-label ${this.itemStyle} ${itemSize}` }, "(Rated ", this.rating, " stars)")), !hideCaption &&
614
+ index.h(funcComponents.StarRating, { rating: this.rating, ratingClass: `star-rating ${this.itemStyle} ${itemSize} ${this.reviewClass}`, starClass: `${itemSize} ${this.itemStyle}` })), starOnly &&
615
+ index.h("div", { class: `caption star-only ${this.itemStyle} ${itemSize}` }, index.h(funcComponents.StarRating, { rating: this.rating, ratingClass: `star-rating text-review ${this.itemStyle} ${itemSize} ${this.starOnlyClass}`, starClass: `star-only ${itemSize} ${this.itemStyle}` }), index.h("p", { class: `star-label ${this.itemStyle} ${itemSize}` }, "(Rated ", this.rating, " stars)")), !hideCaption &&
634
616
  index.h("covet-pics-gallery-item-caption", { "caption-class": `caption text-review ${this.layout} ${this.itemStyle} ${itemSize}`, caption: this.caption, "item-style": this.itemStyle, "layout-type": this.layout }), this.links && this.links.length > 0 &&
635
617
  index.h("div", { class: `bottom-review ${this.itemStyle} ${this.layout} ${this.highlightedClass} ${itemSize}` }, this.verified && this.itemStyle !== "modern-1" && this.renderVerifiedIcon(), index.h("span", { class: `link-label ${this.itemStyle} ${itemSize}` }, "Review For"), index.h("a", { href: this.tabIndex !== -1 ? this.links[0].link : null, class: `link-review ${this.itemStyle} ${itemSize}` }, this.links[0].title)))));
636
618
  }