let showFitSliderMessage=!0;const generateSizeChart=e=>{const chart=JSON.parse(e.target.dataset.chart);window.focusReturn=e.target;const type=e.target.dataset.type,columns=chart[0].data.length+1,dataStartIndex=chart[0]?.data?.some((cell,i)=>i===0&&cell.trim().toLowerCase()==="numeric sizing")?1:0;let measurementToggle="",tabs="",fitSlider="";(type==="Bridesmaid Dress"||type==="Little White Dress"||type==="Apparel"||type==="Getting Ready")&&(measurementToggle=`
    <div class="flex items-center">
    <span class="text-sm md:text-base">IN</span>
    <label class="toggle-label pointer side-margins-05">
    <input id="measurements-toggle" type="checkbox" class="filter-option toggle hidden-checkbox"><span class="switch no-margin">
    <span class="toggler"></span>
    </span></label>
    <span class="text-sm md:text-base">CM</span>
    </div>
    `);let content=`<div id="size-chart-modal" class="p-4 md:p-12 mb-4 pt-0"><div class="top2 mb-4 lh14 grid gap-x-12 w-full grid-cols-autoFill">
<div role="tab" tabindex="0" data-item="size-chart" data-container="size-chart-modal" class="accessibility-ui display subheading pointer font-display"><span class="capitalize text-darkGrey">Size Chart</span></div>
</div>
<div class="flex justify-between mb-4">
<div class="text-darkGrey uppercase font-semibold text-base">Body Measurements</div>
${measurementToggle}
</div>
<div class="tab-item size-chart text-xs md:text-sm">
<div class="mb-4 w-full overflow-x-auto">
<div class="grid items-center measurements-grid gap-0.5" style="grid-template-columns:10% repeat(${columns-1}, minmax(0, 1fr))">`;type.indexOf("Groomsmen")!==-1&&(showFitSliderMessage=!1),showFitSliderMessage&&(fitSlider='<div class="fit-slider-message text-sm md:text-base my-4 md:my-8">Be sure to check the fit slider on each dress to see if it\u2019s running big or small. For the best fit, we recommend choosing a size based on your waist measurements, especially if your bust and hip measurements fall into different size ranges.</div>'),chart.forEach((item,index)=>{let classes="p-3 flex items-center justify-center text-center",theStyle="height:calc(100% - 1.5rem); padding-left: 0.25rem; padding-right: 0.25rem;";index%2!==0?theStyle+="background-color: var(--darkCream);":theStyle+="background-color: var(--liteCream);",index===0&&(content+=`<div class="${classes}" style="${theStyle}"></div>`,classes+=" font-semibold uppercase"),item.data.forEach((griditem,gridIdx)=>{let dataCm="";if(index>0&&gridIdx>dataStartIndex){let measurements=griditem.split("-");for(let i=0;i<measurements.length;i+=1)measurements[i]=Math.round(parseInt(measurements[i],10)*2.54);measurements.length>1?dataCm=`data-cm="${measurements[0]} - ${measurements[1]}"`:dataCm=`data-cm="${measurements[0]}"`}content+=`<div class="${classes}" style="${theStyle}" data-original="${griditem.replace("-"," - ")}" ${dataCm}>${griditem.replace("-"," - ")}</div>`})});const sizeChartHowToMeasure=document.querySelector("#size-chart__measure_details");if(type==="Bridesmaid Dress"||type==="Little White Dress"){const isJuniorDress=e.target.dataset.juniorDress==="true";tabs=`<div class="tab-container">
    <div tabindex="0" role="button" aria-expanded="false" class="font-semibold tab-heading flex pointer items-center justify-between">
      <div class="tab-heading-text text-base uppercase">How to Measure</div>
      <div class="tab-icon">+</div>
    </div>
    <div aria-hidden="true" class="tab-body">
      <div class="how-to-measure-tab space-y-2">
      ${sizeChartHowToMeasure.innerHTML}
      </div>
    </div>
</div>
<div class="tab-container">
    <div tabindex="0" role="button" aria-expanded="false" class="font-semibold tab-heading flex pointer items-center justify-between">
        <div class="tab-heading-text text-base uppercase">Watch Video</div>
        <div class="tab-icon">+</div>
    </div>
    <div aria-hidden="true" class="tab-body">
        <div class="page-content page-html auto" data-type="html">
            <div class="measurements-video">
                <iframe class="w-full h-full" src="https://player.vimeo.com/video/236874230?color=ACD5C0&amp;title=0&amp;byline=0&amp;portrait=0" allow="autoplay; fullscreen" allowfullscreen="" width="1920" height="1080" frameborder="0"></iframe>
            </div>
        </div>
    </div>
</div>
<div class="tab-container">
    <div tabindex="0" role="button" aria-expanded="false" class="font-semibold tab-heading flex pointer items-center justify-between">
        <div class="tab-heading-text text-base uppercase">Dress Length</div>
        <div class="tab-icon">+</div>
    </div>
    <div aria-hidden="true" class="tab-body">
        Please Note: We intentionally design our dresses to be extra-long so even your tallest bridesmaids can wear them! There\u2019s a chance you\u2019ll need to have the length altered.
    </div>
</div>
${isJuniorDress?"":`<div class="tab-container">
  <div tabindex="0" role="button" aria-expanded="false" class="font-semibold tab-heading flex pointer items-center justify-between">
    <div class="tab-heading-text text-base uppercase">Pregnant? Here's What We Recommend</div>
    <div class="tab-icon">+</div>
  </div>
  <div aria-hidden="true" class="tab-body maternity-sizing-tab">
    <p class="list-disc m-0">We recommend a dress with an empire waist or one without a defined waistline. Discover all of our bump-friendly styles <a href="https://www.birdygrey.com/collections/maternity-bridesmaid-dresses" title="Visit collection of maternity dresses">here.</a></p>
  </div>
</div>`}
`}content+=`</div></div>
${fitSlider}
${tabs}
</div>
</div>`,buildModal(content),document.querySelectorAll("#size-chart-modal .tab-heading").forEach(heading=>{heading.addEventListener("click",toggleTab),heading.addEventListener("keydown",enterEvent)});const measurementsToggle=document.querySelector("#measurements-toggle");measurementsToggle&&measurementsToggle.addEventListener("click",()=>{const values=document.querySelector(".measurements-grid").querySelectorAll("div");measurementsToggle.checked?values.forEach(value=>{if(value.dataset.cm){const cmValue=value.dataset.cm;value.innerText=cmValue}}):values.forEach(value=>{if(value.dataset.original){const originalValue=value.dataset.original;value.innerText=originalValue}})})};document.querySelectorAll(".view-size-chart").forEach(button=>{button.addEventListener("click",generateSizeChart),button.addEventListener("keydown",enterEvent)});
//# sourceMappingURL=/cdn/shop/t/2918/assets/product--size-chart-scripts.js.map