import{LitElement,html,ifDefined}from"@lit";export class DNAImage extends LitElement{static get properties(){return{alt:{type:String},aspectRatio:{type:String,attribute:"aspect-ratio"},crop:{type:String},data:{type:Object},decoding:{type:String},fit:{type:String},height:{type:String},loader:{type:Object,attribute:!1},loading:{type:String},fetchPriority:{type:String,attribute:"fetch-priority"},sizes:{type:String},src:{type:String},srcSetOptions:{type:Object},width:{type:String},additionalStyles:{type:String,attribute:"additional-styles"}}}constructor(){super(),this.alt="",this.aspectRatio=void 0,this.crop=!1,this.data=void 0,this.decoding="async",this.fit="",this.height="auto",this.loader=shopifyLoader,this.loading="lazy",this.fetchPriority="low",this.sizes=void 0,this.src=void 0,this.srcSetOptions={intervals:7,startingWidth:200,incrementSize:300,placeholderWidth:100},this.width="100%"}render(){const normalizedProps=this._getNormalizedProps(),{intervals,startingWidth,incrementSize,placeholderWidth}=this.srcSetOptions,imageWidths=generateImageWidths(this.width,intervals,startingWidth,incrementSize),fixedWidth=isFixedWidth(normalizedProps.width);return!this.sizes&&!fixedWidth&&console.warn(["No sizes prop provided to Image component,","you may be loading unnecessarily large images.",`Image used is ${this.src||this.data?.url||"unknown"}`].join(" ")),fixedWidth?html`
        <dna-fixed-width-image
          aspectRatio=${this.aspectRatio}
          crop=${this.crop}
          decoding=${this.decoding}
          height=${this.height}
          .imageWidths=${imageWidths}
          .loader=${this.loader}
          loading=${this.loading}
          fetch-priority=${this.fetchPriority}
          .normalizedProps=${normalizedProps}
          width=${this.width}
          part="base"
          additional-styles=${this.additionalStyles}
        ></dna-fixed-width-image>
      `:html`
        <dna-fluid-image
          aspectRatio=${this.aspectRatio}
          crop=${this.crop}
          decoding=${this.decoding}
          fit=${this.fit}
          height=${this.height}
          .imageWidths=${imageWidths}
          .loader=${this.loader}
          loading=${this.loading}
          fetch-priority=${this.fetchPriority}
          .normalizedProps=${normalizedProps}
          placeholderWidth=${placeholderWidth}
          sizes=${this.sizes}
          part="base"
          additional-styles=${this.additionalStyles}
        ></dna-fluid-image>
      `}_getNormalizedData(){const dataWidth=this.data?.width&&this.data?.height?this.data?.width:void 0,dataHeight=this.data?.width&&this.data?.height?this.data?.height:void 0;return{...this.data,width:dataWidth,height:dataHeight,unitsMatch:!!unitsMatch(dataWidth,dataHeight)}}_getNormalizedProps(){const normalizedData=this._getNormalizedData(),nWidthProp=this.width||"100%",widthParts=getUnitValueParts(nWidthProp.toString()),nWidth=`${widthParts.number}${widthParts.unit}`,autoHeight=this.height===void 0||this.height===null||this.height==="auto",heightParts=autoHeight?null:getUnitValueParts(this.height.toString()),fixedHeight=heightParts?`${heightParts.number}${heightParts.unit}`:"",nHeight=autoHeight?"auto":fixedHeight,nSrc=this.src||normalizedData?.url;nSrc||console.warn("No src or data.url provided to Image component.");const nAlt=normalizedData?.altText&&!this.alt?normalizedData?.altText:this.alt||"",nAspectRatio=this.aspectRatio?this.aspectRatio:this._getNormalizedData().unitsMatch?[getNormalizedFixedUnit(this._getNormalizedData().width),getNormalizedFixedUnit(this._getNormalizedData().height)].join("/"):void 0;return{width:nWidth,height:nHeight,src:nSrc,alt:nAlt,aspectRatio:nAspectRatio}}}window.customElements.define("dna-image",DNAImage);export class DNAFixedWidthImage extends LitElement{static get properties(){return{aspectRatio:{type:String},crop:{type:String},decoding:{type:String},height:{type:String},imageWidths:{type:Array},loader:{type:Object,attribute:!1},loading:{type:String},fetchPriority:{type:String,attribute:"fetch-priority"},normalizedProps:{type:Object},width:{type:String},additionalStyles:{type:String}}}constructor(){super(),this.aspectRatio=void 0,this.crop=!1,this.decoding="async",this.height="auto",this.imageWidths=[],this.loader=void 0,this.loading="lazy",this.fetchPriority="low",this.normalizedProps={},this.width="100%",this.additionalStyles=""}render(){const{aspectRatio,crop,decoding,height,imageWidths,loader,loading,fetchPriority,normalizedProps,width,additionalStyles}=this,intWidth=getNormalizedFixedUnit(width),intHeight=getNormalizedFixedUnit(height),fixedAspectRatio=aspectRatio||(unitsMatch(normalizedProps.width,normalizedProps.height)?[intWidth,intHeight].join("/"):normalizedProps.aspectRatio?normalizedProps.aspectRatio:void 0),sizesArray=imageWidths===void 0?void 0:generateSizes(imageWidths,fixedAspectRatio,crop),parsedAspectRatio=parseAspectRatio(fixedAspectRatio),fixedHeight=intHeight||(fixedAspectRatio&&intWidth&&!Number.isNaN(parsedAspectRatio)?intWidth*(parsedAspectRatio??1):void 0),srcSet=generateSrcSet(normalizedProps.src,sizesArray,loader),src=loader({src:normalizedProps.src,width:intWidth,height:fixedHeight,crop:normalizedProps.height==="auto"?void 0:crop});return html`
      <img
        alt=${normalizedProps.alt}
        decoding=${decoding}
        height=${ifDefined(fixedHeight)}
        loading=${loading}
        fetchpriority=${fetchPriority}
        src=${src}
        srcset=${srcSet}
        width=${intWidth}
        style="aspect-ratio: ${fixedAspectRatio};${additionalStyles?` ${additionalStyles};`:""}"
      />
    `}}window.customElements.define("dna-fixed-width-image",DNAFixedWidthImage);export class DNAFluidImage extends LitElement{static get properties(){return{aspectRatio:{type:String},crop:{type:String},decoding:{type:String},height:{type:String},fit:{type:String},imageWidths:{type:Array},loader:{type:Object,attribute:!1},loading:{type:String},fetchPriority:{type:String,attribute:"fetch-priority"},normalizedProps:{type:Object},placeholderWidth:{type:Number},sizes:{type:String},additionalStyles:{type:String,attribute:"additional-styles"}}}constructor(){super(),this.aspectRatio=void 0,this.crop=!1,this.decoding="async",this.height="auto",this.fit="",this.imageWidths=[],this.loader=void 0,this.loading="lazy",this.fetchPriority="low",this.normalizedProps={},this.placeholderWidth=100,this.sizes=void 0,this.additionalStyles=""}render(){const{aspectRatio,crop,decoding,height,fit,imageWidths,loader,loading,fetchPriority,normalizedProps,placeholderWidth,sizes,additionalStyles}=this,sizesArray=imageWidths===void 0?void 0:generateSizes(imageWidths,aspectRatio,crop),parsedAspectRatio=parseAspectRatio(aspectRatio),placeholderHeight=aspectRatio&&placeholderWidth&&!Number.isNaN(parsedAspectRatio)?placeholderWidth*(parsedAspectRatio??1):void 0,srcSet=generateSrcSet(normalizedProps.src,sizesArray,loader),src=loader({src:normalizedProps.src,width:placeholderWidth,height:placeholderHeight,crop});return html`
      <img
        alt=${normalizedProps.alt}
        decoding=${decoding}
        height=${ifDefined(placeholderHeight)}
        loading=${loading}
        fetchpriority=${fetchPriority}
        sizes=${sizes}
        srcset=${srcSet}
        src=${src}
        width=${placeholderWidth}
        style="width: ${normalizedProps.width};${height?` height: ${height};`:""}${fit?` object-fit: ${fit};`:""}${aspectRatio?` aspect-ratio: ${aspectRatio};`:""}${additionalStyles?` ${additionalStyles};`:""}"
      />
    `}}window.customElements.define("dna-fluid-image",DNAFluidImage);export function generateImageWidths(width,intervals,startingWidth,incrementSize){if(startingWidth==null)return;const imageWidths=[];let currentWidth=startingWidth;for(let i=0;i<intervals;i++)imageWidths.push(currentWidth),currentWidth+=incrementSize;return imageWidths}export function generateSizes(widths,aspectRatio,crop){if(widths)return widths.map(width=>{const height=aspectRatio?Math.floor(width/parseAspectRatio(aspectRatio)):void 0;return`${width}x${height||""}${crop?`_crop_${crop}`:""}`})}export function generateSrcSet(src,sizes,loader){if(!(!src||!sizes||!loader))return sizes.map(size=>{const[width,height]=size.split("x");return`${loader({src,width:Number.parseInt(width,10),height:Number.parseInt(height,10)})} ${width}w`}).join(", ")}export function parseAspectRatio(aspectRatio){if(!aspectRatio)return;const[width,height]=aspectRatio.split("/");return Number.parseInt(width,10)/Number.parseInt(height,10)}export function unitsMatch(a,b){if(!a||!b)return!1;const unitsRegex=/[a-z]+$/i,aUnit=a.toString().match(unitsRegex),bUnit=b.toString().match(unitsRegex);return aUnit&&bUnit&&aUnit[0].toLowerCase()===bUnit[0].toLowerCase()}export function isFixedWidth(width){return width?/^\d+(?:px)?$/i.test(width.toString()):!1}export function getUnitValueParts(value){const valueString=value.toString(),number=Number.parseFloat(valueString),unit=valueString.replace(String(number),"");return{number,unit}}export function getNormalizedFixedUnit(value){if(typeof value=="number")return value;const parts=getUnitValueParts(value);return parts.unit==="px"?parts.number:void 0}export function shopifyLoader({src,width,height,crop}){if(!src)return"";const hasProtocol=/^https?:\/\//i.test(src),isProtoRelative=/^\/\//i.test(src),urlWithProtocol=hasProtocol?src:isProtoRelative?`https:${src}`:`https://${window.location.host}/${src.replace(/^\/+/g,"")}`,url=new URL(urlWithProtocol);return width&&url.searchParams.append("width",Math.round(width).toString()),height&&url.searchParams.append("height",Math.round(height).toString()),crop&&url.searchParams.append("crop",crop),hasProtocol?url.href:url.href.replace(/^https:/,"")}
//# sourceMappingURL=/cdn/shop/t/1163/assets/component-image.js.map?v=137741909547148499921760566295