1import{d as e}from"./defineElement-Bh-rOTph.js";import{S as t}from"./GlobalStylesStore--z5tmrDj.js";import{T as i}from"./TemplateElement-u6hNeGmQ.js";import{c as s,a as r}from"./directives-geaH8KPO.js";import a from"./tessa-image.map-DvYUU_MZ.js";import{h as n}from"./html-BmWsKWcd.js";import"./StyledElement-Dmi2NcTH.js";const h=new class extends t{constructor(){super();const e=()=>{this.width=window.innerWidth,this.height=window.innerHeight};e(),window.addEventListener("resize",(()=>e))}properties(){return{width:void 0,height:void 0}}},o=Object.freeze({PENDING:"pending",LOADING:"loading",LOADED:"loaded",ERROR:"error"}),l=e=>{let{url:t,width:i,height:s}=e,r=a.find((e=>{let[t,r]=e;return t>i||r>s}))||a[a.length-1];return t.replace("{{width}}x{{height}}",r.join("x"))};class c extends i{resizeObserver;properties(){return{url:"",alt:"",lazy:!0,imageState:o.PENDING,imgCssClass:"",width:void 0,height:void 0,observeSize:!1,src:"",cover:!1,contain:!1,scaleDown:!0}}connected(){this.updateImageSrc(),this.imageState=this.src?o.LOADING:o.ERROR,this.observeSize?(this.resizeObserver=new ResizeObserver((()=>{this.updateImageSrc()})),this.resizeObserver.observe(this)):h.subscribe(this)}disconnected(){this.resizeObserver?.unobserve(this)}events(){return{"[ref=productImage]":{load:()=>{this.imageState=o.LOADED},error:e=>{const t=e.currentTarget.currentSrc||e.currentTarget.src;console.error("Failed to load image:",t),this.imageState=o.ERROR}}}}watch(){return{url:async()=>{this.imageState=o.PENDING,this.updateImageSrc(),await this.requestUpdate(),this.imageState=this.src?o.LOADING:o.ERROR},windowStore:()=>this.updateImageSrc()}}get imageStyles(){return s({"object-cover":this.cover,"object-contain":this.contain,"object-scale-down":this.scaleDown})}get fallBackImage(){return window.siteConfig().fallBackImage}renderFallbackImage(){return n` 2 <img 3 data-fallback="true" 4 class="absolute inset-0 h-full w-full ${this.imageStyles}" 5 alt="tessa-image-fallback" 6 src="${this.fallBackImage}" 7 /> 8 `}updateImageSrc(){if(!this.url)return void(this.src="");const e=this.width?this.width:this.offsetWidth,t=this.height?this.height:this.offsetHeight;this.src=l({url:this.url,width:e,height:t})}renderLoadingSpinner(){return n`<loading-spinner class="absolute inset-0 items-center justify-center"></loading-spinner>`}renderImage(){return n` 9 <img 10 ref="productImage" 11 loading="${this.lazy?"lazy":"eager"}" 12 class="${this.imageStyles} ${this.imgCssClass}" 13 src="${this.src}" 14 alt="${this.alt}" 15 /> 16 ${this.imageState===o.LOADING?this.renderLoadingSpinner():""} 17 `}template(){const e=this.url?this.imageState:o.ERROR,t=this.renderImage(),i=this.renderFallbackImage(),s=this.renderLoadingSpinner();return n`${r(e,{[o.PENDING]:s,[o.LOADING]:t,[o.LOADED]:t,[o.ERROR]:i},i)}`}}e("tessa-image",c);export{c as default,l as getSrcByDimension}; 18//# sourceMappingURL=tessa-image-WLXP7nJ1.js.map
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.