1import{isBase64}from"@hh/helper-functions";class AdaptiveImage extends HTMLElement{constructor(){super(),this.srcsetWidths=[493,600,713,823,1100,1206,1346,1426,1646,1946];const imageData=isBase64(this.dataset.image)?atob(this.dataset.image):this.dataset.image;try{this.image=JSON.parse(imageData)}catch{this.image=imageData}this.omitAlt=this.dataset.omitAlt==="true"||!1,this.width=this.image.width||1946,this.src=this.image?.src||this.image,this.alt=this.dataset.alt||this.image?.alt||" ",this.alt=this.omitAlt?" ":this.alt,this.sizes=this.dataset.sizes||"100vw",this.loading=this.dataset.loading||"lazy",this.objectFit=this.dataset.objectFit||"cover",this.aspectRatio=this.image?.aspect_ratio||parseFloat(this.dataset.aspectRatio)||1,this.attachShadow({mode:"open"}),this.render()}static get observedAttributes(){return["data-image"]}attributeChangedCallback(name,oldValue,newValue){if(name==="data-image"&&newValue){const imageData=isBase64(this.dataset.image)?atob(this.dataset.image):this.dataset.image;try{this.image=JSON.parse(imageData)}catch{this.image=imageData}this.src=this.image?.src||this.image,this.render()}}updateImage(data){Object.assign(this,data),this.render()}generateStyles(){return` 2 <style> 3 :host { 4 display: block; 5 aspect-ratio: ${this.aspectRatio}; 6 position: relative; 7 } 8 @supports not (aspect-ratio: ${this.aspectRatio}) { 9 :host::before { 10 float: left; 11 padding-top: calc(100% / ${this.aspectRatio}); 12 content: ''; 13 } 14 15 :host::after { 16 display: block; 17 clear: both; 18 content: ''; 19 } 20 } 21 #image-element { 22 position: absolute; 23 top: 0; 24 left: 0; 25 right: 0; 26 bottom: 0; 27 width: 100%; 28 height: 100%; 29 object-fit: ${this.objectFit}; 30 -webkit-transform: translate3d(0,0,0); 31 } 32 </style> 33 `}generateSrcset(){let srcset="";for(const width of this.srcsetWidths)this.width>=width&&(srcset+=`${this.src}&width=${width} ${width}w,`);return srcset+=`${this.src} ${this.width}w`,srcset}generateImageMarkup(){const isYTposter=this.src.includes("img.youtube.com/vi"),srcset=isYTposter?this.srcset.replace(/&width=\d+/gi,""):this.srcset,srcsetWidths=isYTposter?"":"&width="+this.srcsetWidths[0];return` 34 <picture> 35 <source srcset="${srcset}" sizes="${this.sizes}"> 36 <img id="image-element" src="${this.src+srcsetWidths}" alt="${this.alt}" loading="${this.loading}"> 37 </picture> 38 `}show(){this.style.display="block"}hide(){this.style.display="none"}render(){this.srcset=this.generateSrcset(),this.shadowRoot.innerHTML=` 39 ${this.generateStyles()} 40 ${this.generateImageMarkup()} 41 `,this.closest(".js-product-card-link")?.querySelector(".js-icon-virtual-tryon")?.classList.remove("hidden")}}window.customElements.define("adaptive-image",AdaptiveImage); 42//# sourceMappingURL=/cdn/shop/t/1716/assets/component-adaptive-image.js.map?v=34242200579782820261790177265
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.