1import{B as t}from"./BaseElement.wji90fuE.min.js";import{w as e}from"./flattenedCardStorage.BXdkJ4Pk.min.js";import{f as r}from"./match-flattened-child.2zO3xFEF.min.js";import{i,p as a,c as s,P as l,a as n,b as o,r as d}from"./productCardCache.DhJXPt5W.min.js";import{r as c}from"./revive.CLV8-SeV.min.js";import{W as h,I as u,a as p}from"./WithApiClient.B8AOHZZP.min.js";import{f as m}from"./format-money.CPSsGZ60.min.js";import{n as g,a as f,t as v,h as y,x,T as w,o as b}from"./vendor-lit.2u3dzq2T.min.js";import"./fetchWithCache.BJ12kVQ7.min.js";import"./vendor.D2HIaoTS.min.js";var $=Object.defineProperty,k=Object.getOwnPropertyDescriptor,_=(t,e,r,i)=>{for(var a,s=i>1?void 0:i?k(e,r):e,l=t.length-1;l>=0;l--)(a=t[l])&&(s=(i?a(e,r,s):a(s))||s);return i&&s&&$(e,r,s),s};const S=`#graphql\n query getProductVariantsFromNode($id: ID!, ${u}) ${p} {\n node(id: $id) {\n id\n ... on ProductVariant {\n product {\n handle\n }\n }\n }\n }\n`,I={},P=[1e3,3e3],A=t=>new Promise(e=>setTimeout(e,t)),C="group/card group/product-card relative flex size-full flex-col overflow-hidden bg-product-card-background [.product-grid-card_&]:contents",E="group/card flex flex-row items-start gap-xs py-sm lg:h-full lg:flex-col lg:items-stretch lg:bg-product-card-background lg:p-0",q=/([?&])width=\d+/,j=/^https?:\/\/cdn\.shopify\.com\/s\/files\/[\d/]+\/(files|products)\/([^?]+)/,T=[300,500,750,1e3],F=[150,300,600],M=t=>(t instanceof DOMException||t instanceof Error)&&"AbortError"===t.name;class U extends Error{constructor(t){super(`Product no longer resolves: ${t}`)}}let z=class extends(h(t)){constructor(){super(...arguments),this.title="",this.template="product-card",this.urlPostfix="",this.forceEagerImage=!1,this.applyUniqueId=!1,this.imageAspect="aspect-square",this.vatCallout="",this.contentAlignment="center",this.placeholderMode="full",this.titleTag="h3",this.unknownLabel="",this.uniqueId=Math.random().toString(36).substring(2,9),this.ssrMarkup=[],this.reportedUnavailable=!1,this.checkIfResponseHasLayout=t=>i(t),this._loadVariantByIdTask=new y(this,{task:async([t])=>{var e,r,i,a,s,l;if(!t)throw new Error("No variantId provided");if(this.handle)return this.handle;if(I[t])return I[t];const n=await this.$api.client.storefront({body:{query:S,variables:{id:`gid://shopify/ProductVariant/${t}`}}});if(!(null==(i=null==(r=null==(e=n.data)?void 0:e.node)?void 0:r.product)?void 0:i.handle))throw new Error("No product handle found");return I[t]=null==(l=null==(s=null==(a=n.data)?void 0:a.node)?void 0:s.product)?void 0:l.handle,I[t]},args:()=>[this.variantId]}),this.loadProductHandleView=new y(this,{task:async([t])=>{if(!t)throw new Error("No handle provided");if(a[this.cacheKey])return a[this.cacheKey];let e;for(let i=0;i<=2;i+=1){i>0&&await A(P[i-1]);try{const e=await this.fetchCardHtml(t);return a[this.cacheKey]=e,e}catch(r){if(M(r)){if(!this.isConnected)throw r;e=r;continue}if(r instanceof U)throw r;e=r}}throw e},args:()=>[this.handle||this._loadVariantByIdTask.value,this.variantId]})}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.hasUpdated||(this.ssrMarkup=Array.from(this.childNodes).filter(t=>{var e;return t.nodeType!==Node.TEXT_NODE||(null==(e=t.textContent)?void 0:e.trim())}))}get isInert(){return!this.handle&&!this.variantId&&!!this.dataset.handle&&this.ssrMarkup.length>0}get cacheKey(){return s(this.handle,this.variantId,this.template)}async fetchCardHtml(t){const e=await this.$api.client.shopify(`products/${t}`,{method:"GET",headers:{"Content-Type":"text/html"}},{params:n(this.variantId,this.template),persistCache:!0,persistCacheExpiryMs:l});if(this.checkIfResponseHasLayout(e))throw new Error("Invalid response");if(!e)throw new Error("No product found");if(o(e))throw new U(t);return e}_renderPostfix(){if(window.__VENDORS__&&!window.__VENDORS__.nosto.enabled)return;if(!this.urlPostfix)return;const t=Array.from(this.productUrls);if(0!==t.length)for(const e of t){const t=e;if(t&&(t.href||t.getAttribute("product-url"))){const e=new URL(t.href||t.getAttribute("product-url")),r=this.urlPostfix.split("=");2===r.length&&e.searchParams.append(r[0],r[1]),t.href?t.href=e.toString():t.setAttribute("product-url",e.toString())}}}async updated(){var t,e;if(!this.isInert){if(this.ssrMarkup.length>0&&(this.ssrMarkup.forEach(t=>t.remove()),this.ssrMarkup=[]),this.loadProductHandleView.error instanceof U){const r=this.closest("[data-carousel-slide]"),i=Array.from((null==(t=null==r?void 0:r.parentElement)?void 0:t.children)??[]).filter(t=>t.hasAttribute("data-carousel-slide")).length>1,a="true"===(null==(e=null==r?void 0:r.closest("core-carousel, elc-carousel"))?void 0:e.dataset.loop);return r&&i&&!a?void r.remove():((r??this.closest(".product-grid-card")??this).style.setProperty("display","none","important"),void this.reportUnavailable("gone"))}this.querySelector('[data-variant-available="false"]')&&this.reportUnavailable("unavailable"),this._renderPostfix(),c(this),this.applyMatchedSuggestShade()}}reportUnavailable(t){this.reportedUnavailable||(this.reportedUnavailable=!0,queueMicrotask(()=>this.$emit("dynamic-product-card::unavailable",{handle:this.handle,variantId:this.variantId,reason:t})))}applyMatchedSuggestShade(){var t,e;if("product-card-search"!==this.template)return;if(!this.loadProductHandleView.value)return;if(!this.matchedQuery)return;const i=this.readShadeMatchOptions(),a=r(i,{sku:this.matchedSku,query:this.matchedQuery});if(!a)return void this.syncSuggestFlattenedSelection(null);this.syncSuggestFlattenedSelection(a);const s=(null==(t=a.image)?void 0:t.trim())?this.resizeFeedImage(a.image,600):null;if(!s)return;const l=this.querySelector("a.relative")??this.querySelector("a[href]"),n=(null==l?void 0:l.querySelector("img.z-1"))??this.querySelector("a.relative img.z-1")??this.querySelector("a[href] img.z-1");if(!n)return;this.applyImageSrc(n,s);const o=(null==(e=a.hoverImage)?void 0:e.trim())?this.resizeFeedImage(a.hoverImage,600):null,d=(null==l?void 0:l.querySelector("img.z-2"))??this.querySelector("a.relative img.z-2")??this.querySelector("a[href] img.z-2");if(o){if(d)this.applyImageSrc(d,o);else if(l){const t=document.createElement("img");t.className="pointer-events-none absolute inset-0 z-2 h-full w-full bg-product-card-background object-cover object-center opacity-0 transition-opacity duration-300 ease-in-out lg:group-hover/card:opacity-100",t.alt="",t.setAttribute("aria-hidden","true"),t.loading="lazy",this.applyImageSrc(t,o),l.appendChild(t)}}else d&&d.remove()}syncSuggestFlattenedSelection(t){var r,i;const a=this.querySelector("[data-flattened-parent-id]"),s=null==(r=null==a?void 0:a.dataset.flattenedParentId)?void 0:r.trim();if(!s)return;const l=(null==(i=null==a?void 0:a.dataset.defaultChildHandle)?void 0:i.trim())??"";t?e(s,t.handle,Boolean(l)&&t.handle===l):e(s,l,!0)}applyImageSrc(t,e){t.src=e,t.removeAttribute("srcset"),t.removeAttribute("sizes")}readShadeMatchOptions(){var t;const e=null==(t=this.querySelector('script[type="application/json"][data-shade-match-options]'))?void 0:t.textContent;if(!(null==e?void 0:e.trim()))return[];try{const t=JSON.parse(e);return Array.isArray(t)?t.filter(t=>!!t&&"object"==typeof t&&"string"==typeof t.handle):[]}catch{return[]}}resizeFeedImage(t,e){return q.test(t)?t.replace(q,`$1width=${e}`):`${t}${t.includes("?")?"&":"?"}width=${e}`}renderUnknown(){return this.unknownLabel?x` 2 <div class="flex size-full flex-col bg-product-card-background"> 3 <div 4 class="${this.imageAspect} flex w-full items-center justify-center bg-product-card-image-background" 5 >
6 <span class="text-sm text-gray-600">${this.unknownLabel}</span> 7 </div> 8 </div> 9 `:x``}renderTileImage(t,e=!1){const r=this.image??"",i=j.exec(r);let a,s=w,l=w;if(i){const t=new URL(r).searchParams.get("v"),n=`${window.location.origin}/cdn/shop/${i[1]}/${i[2]}`,o=r=>`?${e?"":"format=webp&"}${t?`v=${t}&`:""}width=${r}`;s=(e?F:T).map(t=>`${n}${o(t)} ${t}w`).join(", "),l=e?"(min-width: 1024px) 25vw, 66px":"(min-width: 1024px) 33vw, 50vw",a=`${n}${o(e?600:800)}`}else{const t=e?400:800;a=q.test(r)?r.replace(q,`$1width=${t}`):`${r}${r.includes("?")?"&":"?"}width=${t}`}return x`<img 10 class="h-full w-full object-cover object-center" 11 data-placeholder-image 12 src="${a}" 13 srcset="${s}" 14 sizes="${l}" 15 alt="${this.title}" 16 loading="${t?"eager":"lazy"}" 17 fetchpriority="${t?"high":"auto"}" 18 @error="${()=>{this.image=void 0}}" 19 />`}formatFeedAmount(t){var e;const r=Number.parseFloat(t);return Number.isFinite(r)?m(Math.round(100*r),(null==(e=window.__CART__)?void 0:e.currency)||"USD"):null}renderPlaceholderPrice(t){if(!this.price)return null;const e=this.formatFeedAmount(this.price);if(!e)return null;const r=this.compareAtPrice&&Number.parseFloat(this.compareAtPrice)>Number.parseFloat(this.price)?this.formatFeedAmount(this.compareAtPrice):null;return x` 20 <div 21 class="group/price body-xs${r?" on-sale":""} inline-flex items-center justify-start gap-x-xs" 22 > 23 <div class="${t?"flex flex-col items-start lg:items-center gap-3xs":"flex items-center flex-col gap-x-3xs lg:flex-row lg:gap-x-xs"}"> 24 ${r?x`<div 25 class="flex flex-wrap items-center justify-center gap-x-2xs gap-y-3xs" 26 > 27 <span class="body-xs">${e}</span> 28 <span><s class="strike body-xs">${r}</s></span> 29 </div>`:x`<div><span class="body-xs">${e}</span></div>`} 30 </div> 31 </div> 32 `}compactAlignClass(){return"items-start text-left "+("left"===this.contentAlignment?"lg:items-start lg:text-left":"right"===this.contentAlignment?"lg:items-end lg:text-right":"lg:items-center lg:text-center")}renderCompactVat(){return this.vatCallout?x`<span class="whitespace-nowrap">${this.vatCallout}</span>`:w}renderFullPriceRow(){const t=this.renderPlaceholderPrice(!1);return t?x` 33 <div 34 class="flex flex-wrap items-center justify-center gap-x-xs gap-y-3xs" 35 > 36 ${t} 37 ${this.vatCallout?x`<div class="body-xs">${this.vatCallout}</div>`:w} 38 </div> 39 `:null}renderIdlePlaceholder(){return"compact"===this.placeholderMode?this.renderCompactPlaceholder():this.renderPlaceholder()}renderFullTitle(){return"h2"===this.titleTag?x`<h2 class="product-card__label m-0 h6"> 40 <span class="block body-lg font-normal">${this.title}</span> 41 </h2>`:x`<h3 class="product-card__label m-0 h6"> 42 <span class="block body-lg font-normal">${this.title}</span> 43 </h3>`}renderPlaceholder(){return x` 44 <div class="${C}"> 45 <div 46 class="product-card__track product-card__track--media w-full min-w-0 shrink-0 bg-product-card-background" 47 > 48 <div 49 class="${this.imageAspect} relative w-full overflow-hidden rounded-productcard-radius bg-product-card-image-background" 50 > 51 ${this.image?this.renderTileImage(this.forceEagerImage):x`<div 52 class="h-full w-full animate-pulse bg-gray-200" 53 ></div>`} 54 </div> 55 </div> 56 57 <div 58 class="product-card__track product-card__track--rail w-full px-sm" 59 ></div> 60 61 <div 62 class="product-card__track product-card__track--title flex w-full flex-col items-center gap-y-2xs px-sm pt-xs text-center" 63 > 64 ${this.renderFullTitle()} 65 </div> 66 67 <div 68 class="product-card__track product-card__track--reviews w-full px-sm" 69 ></div> 70 71 <div 72 class="product-card__track product-card__track--price flex w-full flex-col items-center px-sm pt-xs text-center" 73 > 74 ${this.renderFullPriceRow()??x`<span class="block h-4 w-16 animate-pulse bg-gray-200"></span>`} 75 </div> 76 77 <div 78 class="product-card__track product-card__track--spacer min-h-0 w-full flex-1 [.product-grid-card_&]:hidden" 79 aria-hidden="true" 80 ></div> 81 82 <div 83 class="product-card__track product-card__track--cta grid w-full grid-cols-1 items-end px-sm pt-xs pb-sm" 84 >
85 <span 86 class="block h-[var(--button-height,40px)] w-full animate-pulse bg-gray-200" 87 ></span> 88 </div> 89 </div> 90 `}renderCompactPlaceholder(){const t=this.renderPlaceholderPrice(!0);return x` 91 <div class="${E}"> 92 <div 93 class="${this.imageAspect} relative w-[100px] shrink-0 overflow-hidden rounded-productcard-radius bg-product-card-image-background lg:w-full" 94 > 95 ${this.image?this.renderTileImage(!1,!0):x`<div class="h-full w-full animate-pulse bg-gray-200"></div>`} 96 </div> 97 <div 98 class="${this.compactAlignClass()} flex min-w-0 flex-1 flex-col gap-sm pe-sm lg:grid lg:h-full lg:min-h-0 lg:w-full lg:grid-rows-[auto_minmax(0,1fr)_auto] lg:gap-y-xs lg:px-sm lg:pb-sm" 99 > 100 <h3 class="shrink-0 product-card-title">${this.title}</h3> 101 ${t?x`<div 102 class="flex min-h-0 min-w-0 flex-col gap-3xs lg:gap-y-xs" 103 aria-hidden="true" 104 ></div> 105 <div 106 class="flex shrink-0 flex-col items-start gap-3xs body-xs font-normal lg:items-center" 107 > 108 ${t} ${this.renderCompactVat()} 109 </div>`:w} 110 </div> 111 </div> 112 `}renderError(){var t,e;if(!this.image&&!this.title)return this.renderUnknown();const r=(null==(e=null==(t=window.Shopify)?void 0:t.routes)?void 0:e.root)??"/",i=this.handle?`${r}products/${this.handle}`:"",a="compact"===this.placeholderMode,s=a?E:C,l=a?this.renderPlaceholderPrice(!0):null,n=a?x` 113 <div 114 class="${this.imageAspect} relative w-[100px] shrink-0 overflow-hidden rounded-productcard-radius bg-product-card-image-background lg:w-full" 115 > 116 ${this.image?this.renderTileImage(!1,!0):w} 117 </div> 118 <div 119 class="${this.compactAlignClass()} flex min-w-0 flex-1 flex-col gap-sm pe-sm lg:grid lg:h-full lg:min-h-0 lg:w-full lg:grid-rows-[auto_minmax(0,1fr)_auto] lg:gap-y-xs lg:px-sm lg:pb-sm" 120 > 121 <h3 class="shrink-0 product-card-title">${this.title}</h3> 122 ${l?x`<div 123 class="flex min-h-0 min-w-0 flex-col gap-3xs lg:gap-y-xs" 124 aria-hidden="true" 125 ></div> 126 <div 127 class="flex shrink-0 flex-col items-start gap-3xs body-xs font-normal lg:items-center" 128 > 129 ${l} ${this.renderCompactVat()} 130 </div>`:w} 131 </div> 132 `:x` 133 <div class="block w-full"> 134 <div 135 class="${this.imageAspect} relative w-full overflow-hidden rounded-productcard-radius bg-product-card-image-background" 136 > 137 ${this.image?this.renderTileImage(!1):w} 138 </div> 139 </div> 140 141 <div 142 class="flex w-full min-w-0 flex-1 flex-col items-center gap-y-xs px-sm pt-xs pb-sm text-center" 143 > 144 ${this.renderFullTitle()} ${this.renderFullPriceRow()??w} 145 </div> 146 `;return i?x`<a class="${s}" href="${i}">${n}</a>`:x`<div class="${s}">${n}</div>`}render(){if(this.isInert)return x``;if(!this.handle&&!this.variantId)return this.title||this.image?this.renderIdlePlaceholder():this.renderUnknown();const t=()=>{const t=d(this.handle,this.variantId,this.template);return t?this.renderCardHtml(t):this.title||this.image?this.renderIdlePlaceholder():w};return x` 147 ${this.loadProductHandleView.render({initial:t,pending:t,complete:t=>t?this.renderCardHtml(t):void 0,error:t=>t instanceof U?w:this.renderError()})} 148 `}renderCardHtml(t){return this.applyUniqueId&&(t=t.replace(/###uid###/g,this.uniqueId)),this.forceEagerImage&&(t=t.replace(/<img\b(?:[^>"']|"[^"]*"|'[^']*')*>/,t=>t.replace('loading="lazy"','loading="eager"').replace('fetchpriority="auto"','fetchpriority="high"'))),x`${b(t)}`}};_([g({type:String,attribute:"variant-id"})],z.prototype,"variantId",2),_([g({type:String,attribute:"matched-sku"})],z.prototype,"matchedSku",2),_([g({type:String,attribute:"matched-query"})],z.prototype,"matchedQuery",2),_([g({type:String})],z.prototype,"handle",2),_([g({type:String,attribute:"image"})],z.prototype,"image",2),_([g({type:String,attribute:"title"})],z.prototype,"title",2),_([g({type:String})],z.prototype,"template",2),_([g({type:String,attribute:"url-postfix"})],z.prototype,"urlPostfix",2),_([g({type:Boolean,attribute:"force-eager-image",converter:t=>"true"===t})],z.prototype,"forceEagerImage",2),_([g({type:Boolean,attribute:"apply-unique-id",converter:t=>"true"===t})],z.prototype,"applyUniqueId",2),_([g({type:String,attribute:"image-aspect"})],z.prototype,"imageAspect",2),_([g({type:String,attribute:"price"})],z.prototype,"price",2),_([g({type:String,attribute:"compare-at-price"})],z.prototype,"compareAtPrice",2),_([g({type:String,attribute:"vat-callout"})],z.prototype,"vatCallout",2),_([g({type:String,attribute:"content-alignment"})],z.prototype,"contentAlignment",2),_([g({type:String,attribute:"placeholder-mode"})],z.prototype,"placeholderMode",2),_([g({type:String,attribute:"title-tag"})],z.prototype,"titleTag",2),_([g({type:String,attribute:"unknown-label"})],z.prototype,"unknownLabel",2),_([f("[data-product-url]")],z.prototype,"productUrls",2),z=_([v("dynamic-product-card")],z);export{z as ElcDynamicProductCard};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.