https://teaforte.com/cdn/shop/t/1481/assets/component-adaptive-image.js?v=25630452084034276661790874852

1export const isBase64=string=>/^([0-9a-zA-Z+/]{4})*(([0-9a-zA-Z+/]{2}==)|([0-9a-zA-Z+/]{3}=))?$/.test(string);import{LitElement,html,css,unsafeCSS}from"@hh/global.js";class AdaptiveImage extends LitElement{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}const mobileImageData=isBase64(this.dataset.mobileImage)?atob(this.dataset.mobileImage):this.dataset.mobileImage;try{this.mobileImage=JSON.parse(mobileImageData)}catch{this.mobileImage=mobileImageData}this.width=this.image.width||1946,this.mobileWidth=this.mobileImage.width||750,this.src=this.image?.src||this.image,this.mobileSrc=this.mobileImage?.src||this.mobileImage,this.alt=this.dataset.alt||this.image?.alt||"",this.sizes=this.dataset.sizes||"100vw",this.loading=this.dataset.loading||"lazy",this.objectFit=this.dataset.objectFit||"cover",this.aspectRatio=parseFloat(this.dataset.aspectRatio)||1,this.mobileAspectRatio=parseFloat(this.dataset.mobileAspectRatio)||this.aspectRatio||1,this.style.setProperty("--hh-object-fit",this.objectFit),this.style.setProperty("--hh-aspect-ratio",this.aspectRatio),this.style.setProperty("--hh-mobile-aspect-ratio",this.mobileAspectRatio),this.attachShadow({mode:"open"}),this.render()}connectedCallback(){super.connectedCallback()}updateImage(data){Object.assign(this,data),this.render()}generateSrcset(src,imgWidth){let srcset="";for(const width of this.srcsetWidths)imgWidth>=width&&(srcset+=`${src}&width=${width} ${width}w,`);return srcset+=`${src} ${imgWidth}w`,srcset}render(){return html`
2      <picture>
3        ${this.mobileImage?html`<source
4                media="(min-width: 750px)"
5                srcset="${this.generateSrcset(this.src,this.width)}"
6                sizes="${this.sizes}"
7              />
8              <source
9                media="(max-width: 749px)"
10                srcset="
11                  ${this.generateSrcset(this.mobileSrc,this.mobileWidth)}
12                "
13                sizes="${this.sizes}"
14              />`:html`<source srcset="${this.generateSrcset(this.src,this.width)}" sizes="${this.sizes}"></source>`}
15
16        <img
17          id="image-element"
18          src="${this.src}&width=${this.srcsetWidths[0]}"
19          alt="${this.alt}"
20          loading="${this.loading}"
21        />
22      </picture>
23    `}static styles=css`
24    :host {
25      display: block;
26      height: auto;
27      position: relative;
28      width: 100%;
29      aspect-ratio: var(--hh-mobile-aspect-ratio);
30    }
31    @media screen and (min-width: 750px) {
32      :host {
33        aspect-ratio: var(--hh-aspect-ratio);
34      }
35    }
36    @supports not (aspect-ratio: ${unsafeCSS("var(--hh-aspect-ratio)")}) {
37      :host::before {
38        float: left;
39        padding-top: calc(100% / ${unsafeCSS("var(--hh-aspect-ratio)")});
40        content: '';
41      }
42      :host::after {
43        display: block;
44        clear: both;
45        content: '';
46      }
47    }
48    #image-element {
49      position: absolute;
50      top: 0;
51      left: 0;
52      right: 0;
53      bottom: 0;
54      width: 100%;
55      height: 100%;
56      object-fit: var(--hh-object-fit);
57      -webkit-transform: translate3d(0, 0, 0);
58    }
59  `}customElements.define("adaptive-image",AdaptiveImage);
60//# sourceMappingURL=/cdn/shop/t/1481/assets/component-adaptive-image.js.map?v=25630452084034276661790874852