const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./layers-widget-Cx0UmG7s.js","./layers-widget-CouLIq29.js","./layers-widget-EsaJEcap.js","./layers-widget-CglxezVK.js","./layers-widget-98ks9uNH.js","./layers-widget.js","./layers-widget-DeqaJRh1.js","./layers-widget-BRgAlcSu.js"])))=>i.map(i=>d[i]);
import{a as d,u as n,b as l,_ as c}from"./layers-widget.js";import{S as g}from"./layers-widget-BRgAlcSu.js";import{R as i}from"./layers-widget-98ks9uNH.js";import{g as m,a as p}from"./layers-widget-CglxezVK.js";const y=':host{--layers-widget-color-primary: var(--layers-widget-color-primary, #ff4500);--layers-widget-color-primary-hover: var(--layers-widget-color-primary-hover, #ff6347);--layers-widget-color-primary-light: var(--layers-widget-color-primary-light, rgba(255, 69, 0, .05));--layers-widget-color-primary-transparent: var(--layers-widget-color-primary-transparent, rgba(255, 69, 0, .2));--layers-widget-color-text: var(--layers-widget-color-text, #333333);--layers-widget-color-text-secondary: var(--layers-widget-color-text-secondary, #666666);--layers-widget-color-text-light: var(--layers-widget-color-text-light, #ffffff);--layers-widget-color-background: var(--layers-widget-color-background, #ffffff);--layers-widget-color-border: var(--layers-widget-color-border, #e0e0e0);--layers-widget-color-shadow: var(--layers-widget-color-shadow, rgba(0, 0, 0, .1));--layers-widget-color-hover-bg: var(--layers-widget-color-hover-bg, rgba(0, 0, 0, .05));--layers-widget-color-overlay-bg: var(--layers-widget-color-overlay-bg, rgba(0, 0, 0, .5));--layers-widget-color-price: var(--layers-widget-color-price, #333333);--layers-widget-color-compare-price: var(--layers-widget-color-compare-price, #999999);--layers-widget-product-image-bg: var(--layers-widget-product-image-bg, #f8f8f8);--layers-widget-font-family: var( --layers-widget-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif );--layers-widget-font-size-sm: var(--layers-widget-font-size-sm, .9rem);--layers-widget-font-size-md: var(--layers-widget-font-size-md, 1rem);--layers-widget-font-size-lg: var(--layers-widget-font-size-lg, 1.2rem);--layers-widget-font-size-xl: var(--layers-widget-font-size-xl, 1.5rem);--layers-widget-font-weight-normal: var(--layers-widget-font-weight-normal, 400);--layers-widget-font-weight-medium: var(--layers-widget-font-weight-medium, 500);--layers-widget-font-weight-bold: var(--layers-widget-font-weight-bold, 600);--layers-widget-spacing-xs: var(--layers-widget-spacing-xs, .25rem);--layers-widget-spacing-sm: var(--layers-widget-spacing-sm, .5rem);--layers-widget-spacing-md: var(--layers-widget-spacing-md, .75rem);--layers-widget-spacing-lg: var(--layers-widget-spacing-lg, 1rem);--layers-widget-spacing-xl: var(--layers-widget-spacing-xl, 1.25rem);--layers-widget-spacing-xxl: var(--layers-widget-spacing-xxl, 1.5rem);--layers-widget-spacing-xxxl: var(--layers-widget-spacing-xxxl, 2.5rem);--layers-widget-border-radius-sm: var(--layers-widget-border-radius-sm, .25rem);--layers-widget-border-radius-md: var(--layers-widget-border-radius-md, .5rem);--layers-widget-border-width: var(--layers-widget-border-width, .0625rem);--layers-widget-border-width-dashed: var(--layers-widget-border-width-dashed, .125rem);--layers-widget-icon-size-sm: var(--layers-widget-icon-size-sm, 1rem);--layers-widget-icon-size-md: var(--layers-widget-icon-size-md, 1.5rem);--layers-widget-icon-size-lg: var(--layers-widget-icon-size-lg, 2rem);--layers-widget-icon-size-xl: var(--layers-widget-icon-size-xl, 3rem);--layers-widget-transition-duration: var(--layers-widget-transition-duration, .2s);--layers-widget-transition-timing: var(--layers-widget-transition-timing, ease);--layers-widget-transition-properties: background-color, border-color, color, transform, box-shadow;--layers-widget-dialog-max-width: var(--layers-widget-dialog-max-width, 28.125rem);--layers-widget-dialog-width: var(--layers-widget-dialog-width, 28.125rem);--layers-widget-dialog-max-height: var(--layers-widget-dialog-max-height, 100vh);--layers-widget-dialog-shadow: var( --layers-widget-dialog-shadow, -.3125rem 0 1.25rem var(--layers-widget-color-shadow) );--layers-widget-dialog-border-radius: var( --layers-widget-dialog-border-radius, var(--layers-widget-border-radius-md) );--layers-widget-results-image-max-width: var(--layers-widget-results-image-max-width, 12.5rem);--layers-widget-product-grid-columns: var(--layers-widget-product-grid-columns, 2);--layers-widget-product-grid-columns-desktop: var(--layers-widget-product-grid-columns-desktop, 3);--layers-widget-product-grid-columns-mobile: var(--layers-widget-product-grid-columns-mobile, 2);--layers-widget-product-grid-columns-desktop-mobile: var(--layers-widget-product-grid-columns-desktop-mobile, 2);--layers-widget-product-grid-gap: var(--layers-widget-product-grid-gap, 1rem);--layers-widget-product-image-aspect-ratio: var(--layers-widget-product-image-aspect-ratio, 1 / 1)}@media (max-width: 767px){:host{--layers-widget-dialog-shadow: var( --layers-widget-dialog-shadow-mobile, 0 -.3125rem 1.25rem var(--layers-widget-color-shadow) );--layers-widget-product-grid-columns: var(--layers-widget-product-grid-columns-mobile, 1);--layers-widget-product-grid-columns-desktop: var(--layers-widget-product-grid-columns-desktop-mobile, 2)}}.layers-preview-container{margin:var(--layers-widget-spacing-lg, 1rem) 0;font-family:var(--layers-widget-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif)}.layers-preview-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--layers-widget-spacing-md, .75rem)}.layers-preview-title{font-size:var(--layers-widget-font-size-lg, 1.2rem);font-weight:var(--layers-widget-font-weight-medium, 500);color:var(--layers-widget-color-text, #333333);margin:0}.layers-preview-view-all{font-size:var(--layers-widget-font-size-md, 1rem);color:var(--layers-widget-color-primary, #ff4500);background:none;border:none;cursor:pointer;padding:var(--layers-widget-spacing-xs, .25rem) var(--layers-widget-spacing-md, .75rem);display:flex;align-items:center;gap:var(--layers-widget-spacing-xs, .25rem);transition:color var(--layers-widget-transition-duration, .2s)}.layers-preview-view-all:hover{color:var(--layers-widget-color-primary-hover, #ff6347)}.layers-product-grid{display:grid;grid-template-columns:repeat(var(--layers-widget-product-grid-columns, 2),1fr);gap:var(--layers-widget-spacing-sm, .5rem);margin-bottom:var(--layers-widget-spacing-md, .75rem)}.layers-product-card{cursor:pointer;transition:opacity .2s ease;border:none;background:none;padding:0;text-align:left}.layers-product-card:hover{opacity:.9}.layers-product-image-container{position:relative;width:100%;overflow:hidden;background-color:var(--layers-widget-product-image-bg, #f8f8f8);aspect-ratio:var(--layers-widget-product-image-aspect-ratio, 1 / 1);display:flex}.layers-product-image{content-visibility:auto;width:100%;object-fit:contain;aspect-ratio:var(--layers-widget-product-image-aspect-ratio, 1 / 1)}.layers-product-details{padding:var(--layers-widget-spacing-xs, .25rem) 0}.layers-product-title{font-size:var(--layers-widget-font-size-sm, .9rem);font-weight:var(--layers-widget-font-weight-medium, 500);color:var(--layers-widget-color-text, #333);margin:0;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.layers-product-price-container{display:flex;align-items:center;gap:var(--layers-widget-spacing-xs, .25rem);margin-top:var(--layers-widget-spacing-xs, .25rem)}.layers-product-price{font-size:var(--layers-widget-font-size-sm, .9rem);font-weight:var(--layers-widget-font-weight-bold, 600);color:var(--layers-widget-color-price, #333)}.layers-product-compare-price{font-size:var(--layers-widget-font-size-sm, .9rem);color:var(--layers-widget-color-compare-price, #999);text-decoration:line-through}.layers-similar-preview-cta{display:flex;justify-content:space-between;align-items:center;margin-top:var(--layers-widget-spacing-md, .75rem)}.layers-similar-preview-text{font-size:var(--layers-widget-font-size-md, 1rem);font-weight:var(--layers-widget-font-weight-bold, 600);color:var(--layers-widget-color-text, #333);margin:0;text-transform:uppercase}.layers-similar-preview-button{background-color:var(--layers-widget-color-primary);color:var(--layers-widget-color-background);border:none;border-radius:50px;padding:.75rem 1.5rem;font-size:var(--layers-widget-font-size-md, 1rem);font-weight:var(--layers-widget-font-weight-medium, 500);cursor:pointer;transition:background-color .2s ease}.layers-similar-preview-button:hover{background-color:var(--layers-widget-color-primary-hover)}.layers-skeleton{position:relative;overflow:hidden;background-color:var(--layers-widget-product-image-bg, #f8f8f8)}.layers-skeleton:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;transform:translate(-100%);background-image:linear-gradient(90deg,#fff0 0,#fff3 20%,#ffffff80 60%,#fff0);animation:shimmer 2s infinite}@keyframes shimmer{to{transform:translate(100%)}}.layers-empty-container,.layers-error-container{text-align:center;padding:var(--layers-widget-spacing-lg, 1rem);color:var(--layers-widget-color-text-secondary, #666);grid-column:1 / -1}@media (max-width: 767px){.layers-product-grid{grid-template-columns:repeat(var(--layers-widget-product-grid-columns-mobile, 2),1fr)}}';class u extends HTMLElement{productId=null;resultsState=i.LOADING;searchResults=[];searchError=null;isLoaded=!1;limit=4;totalResults=0;lazyLoad=!0;filterGroups=void 0;modal=null;observer=null;contentContainer=null;productGrid=null;ctaSection=null;searchApi;themeManager;translationManager;themeUnsubscribe=null;translationUnsubscribe=null;constructor(){super(),this.searchApi=new g,this.attachShadow({mode:"open"}),this.themeManager=d(),this.translationManager=n()}connectedCallback(){this.initializeDOM(),this.style.display="block",this.style.width="100%",this.style.height="fit-content",this.themeUnsubscribe=this.themeManager.subscribe(()=>{this.shadowRoot&&this.themeManager.applyThemeToShadowRoot(this.shadowRoot)}),this.translationUnsubscribe=this.translationManager.subscribe("similar-products",()=>{this.updateText()}),this.productId=this.getAttribute("product-id"),this.lazyLoad=this.getAttribute("lazy-load")!=="false",this.getAttribute("limit")&&(this.limit=Number.parseInt(this.getAttribute("limit")||"4",10));const e=this.querySelector('script[type="layers/filter-groups"]');if(e?.textContent)try{this.filterGroups=JSON.parse(e.textContent.trim())}catch(t){console.error("Failed to parse filter groups JSON:",t)}this.lazyLoad?this.setupIntersectionObserver():this.loadData()}disconnectedCallback(){this.observer&&(this.observer.disconnect(),this.observer=null),this.themeUnsubscribe&&(this.themeUnsubscribe(),this.themeUnsubscribe=null),this.translationUnsubscribe&&(this.translationUnsubscribe(),this.translationUnsubscribe=null),this.searchApi&&this.searchApi.cancelRequest()}setupIntersectionObserver(){this.observer=new IntersectionObserver(e=>{e[0].isIntersecting&&!this.isLoaded&&(this.loadData(),this.observer.disconnect(),this.observer=null)},{rootMargin:"200px"}),this.observer.observe(this)}initializeDOM(){this.themeManager.applyThemeToShadowRoot(this.shadowRoot);const e=document.createElement("style");e.textContent=y,this.shadowRoot.appendChild(e),this.contentContainer=document.createElement("div"),this.contentContainer.className="layers-preview-container",this.contentContainer.setAttribute("role","application"),this.shadowRoot.appendChild(this.contentContainer),this.productGrid=document.createElement("div"),this.productGrid.className="layers-product-grid",this.productGrid.setAttribute("role","list"),this.contentContainer.appendChild(this.productGrid),this.ctaSection=document.createElement("div"),this.ctaSection.className="layers-similar-preview-cta",this.contentContainer.appendChild(this.ctaSection),this.renderSkeletons()}renderSkeletons(){if(this.productGrid){this.productGrid.style.gridTemplateColumns=`repeat(${this.limit}, 1fr)`,this.productGrid.innerHTML="";for(let e=0;e<this.limit;e++){const t=document.createElement("div");t.className="layers-product-card",t.innerHTML='<div class="layers-product-image-container"><div class="layers-product-image layers-skeleton" style="aspect-ratio:var(--layers-widget-product-image-aspect-ratio,1 / 1)"></div></div>',this.productGrid.appendChild(t)}this.updateText()}}updateText(){if(!this.ctaSection)return;const e=this.translationManager.getTranslations("similar-products");let t=e.preview.title;this.totalResults>0&&(t=this.translationManager.formatTranslation(e.preview.titleWithCount,{count:this.totalResults.toString()}));const a=e.preview.ctaButton;this.ctaSection.innerHTML=`
      <p class="layers-similar-preview-text">${t}</p>
      <button type="button" class="layers-similar-preview-button">${a}</button>
    `;const s=this.ctaSection.querySelector(".layers-similar-preview-button");s&&s.addEventListener("click",this.openModal)}async loadData(){if(!this.productId){this.resultsState=i.ERROR,this.searchError={code:"NO_PRODUCT_ID",message:"No product ID provided."},this.style.display="none";return}this.isLoaded=!0,this.resultsState=i.LOADING;try{const e=await this.searchApi.getSimilarProducts(this.productId,{limit:20,attributes:["title","handle","id","featured_media"],filterGroup:this.filterGroups||void 0});e.results.length>0?(this.searchResults=e.results,this.resultsState=i.SUCCESS,this.totalResults=e.metadata?.totalResults||e.results.length,this.renderProducts()):(this.resultsState=i.EMPTY,this.totalResults=0,this.style.display="none")}catch(e){this.resultsState=i.ERROR,this.searchError=e,this.style.display="none"}this.updateText()}renderProducts(){this.productGrid&&(this.productGrid.innerHTML="",this.searchResults.slice(0,this.limit).forEach((e,t)=>{const a=m({src:e.imageUrl,maxWidth:720,srcSetSizes:[180,360,540,720]}),s=p({src:e.imageUrl,size:360}),r=document.createElement("div");r.className="layers-product-card",r.setAttribute("data-product-id",e.id),r.setAttribute("data-position",(t+1).toString()),r.setAttribute("role","listitem"),r.setAttribute("aria-label",e.title),r.setAttribute("tabindex","0"),r.addEventListener("click",this.openModal),r.addEventListener("keydown",o=>{(o.key==="Enter"||o.key===" ")&&(o.preventDefault(),this.openModal())}),r.innerHTML=`<div class="layers-product-image-container"><img src="${s}" ${a?`srcset="${a}"`:""} sizes="(max-width: 640px) 50vw, 25vw" alt="${e.title}" class="layers-product-image" loading="lazy"></div>`,this.productGrid.appendChild(r)}),l.emit("shop-similar-impression",{productId:this.productId,totalResults:this.totalResults,displayedProducts:Math.min(this.limit,this.searchResults.length)}))}openModal=async()=>{try{this.modal?(this.modal.reset(),this.modal.open(),l.emit("similar-opened",{productId:this.productId,source:"preview-widget"})):(await c(()=>import("./layers-widget-Cx0UmG7s.js"),__vite__mapDeps([0,1,2,3,4,5,6,7]),import.meta.url),this.modal=document.createElement("layers-similar-products-modal"),this.productId&&this.modal.setAttribute("product-id",this.productId),this.filterGroups&&this.modal.setAttribute("filter-groups",JSON.stringify(this.filterGroups)),document.body.appendChild(this.modal),l.emit("similar-opened",{productId:this.productId,source:"preview-widget"}))}catch(e){console.error("Failed to initialize similar products modal:",e)}}}customElements.get("layers-similar-products-preview")||customElements.define("layers-similar-products-preview",u);export{u as LayersSimilarProductsPreview};