/*! Copyright (c) Safe As Milk. All rights reserved. */import{formatMoney,handle}from"utils";class ProductCardMini extends HTMLElement{#boundOnQuickShopTriggerClick;constructor(){super(),this.#boundOnQuickShopTriggerClick=this.#onQuickShopTriggerClick.bind(this)}connectedCallback(){if(this.image=this.querySelector("img.js-product-card-image"),this.imageContainerRatio=this.getAttribute("image-container-ratio").trim(),this.imageFit=this.hasAttribute("image-fit"),this.quickShopTriggerType=this.getAttribute("quick-shop-trigger"),this.quickShopTriggerHover=this.hasAttribute("quick-shop-trigger-hover"),this.isRendered=this.hasAttribute("rendered"),this.isRendered){if(this.quickShop=this.querySelector("quick-shop"),(this.hasAttribute("move-quick-shop")||this.closest(".modal"))&&this.quickShop){const movedModalElements=document.getElementById("moved-modal-elements");movedModalElements&&movedModalElements.appendChild(this.quickShop)}this.closest("items-scroll")&&this.quickShop&&this.closest("items-scroll").addEventListener("on:items-scroll:change-state",({detail:{scrollable}})=>{if(scrollable){const movedModalElements=document.getElementById("moved-modal-elements");movedModalElements&&movedModalElements.appendChild(this.quickShop)}else this.querySelector("quick-shop")||this.appendChild(this.quickShop)}),this.quickShop&&(this.quickShopTrigger=this.querySelector("[data-trigger-quick-shop]"),this.quickShopTrigger.addEventListener("click",this.#boundOnQuickShopTriggerClick))}}disconnectedCallback(){this.quickShop&&(this.quickShopTrigger.removeEventListener("click",this.#boundOnQuickShopTriggerClick),this.quickShop&&!this.querySelector("quick-shop")&&this.appendChild(this.quickShop))}set product(productData){this.productData=productData,this.isRendered||this.render()}get product(){return this.productData}set id(id){if(this.setAttribute("id",id),this.quickShop){const quickShopId=`${id}--quickshop`;this.quickShop.setAttribute("id",quickShopId)}}get id(){return this.getAttribute("id")}async#onQuickShopTriggerClick(event){event.preventDefault();const modalParent=this.closest("modal-dialog");modalParent&&await modalParent.close(),this.quickShop.open(modalParent)}render(){if(this.setAttribute("product-id",this.product.id),this.querySelectorAll("a[product-card-link]").forEach(link=>{link.setAttribute("href",this.product.url);const visuallyHiddenElement=link.querySelector(".visually-hidden");visuallyHiddenElement&&(visuallyHiddenElement.innerHTML=this.product.title)}),this.product.available?this.product.compare_at_price>this.product.price&&this.classList.add("product-card--sale"):this.classList.add("product-card--sold-out"),this.imageContainerRatio==="natural"){const previewImage=this.querySelector("img.js-product-card-image");previewImage.closest(".o-ratio").style.paddingBottom="100%"}if(this.product.media&&this.product.media.length>0){const mainImageSource=this.product.media[0].preview_image;this.updateImage(mainImageSource.src,mainImageSource.width,mainImageSource.height,mainImageSource.alt);const secondaryImagePlaceholder=this.querySelector("product-card-secondary-image-placeholder");if(secondaryImagePlaceholder&&this.product.media[1]){const secondaryImageSource=this.product.media[1].preview_image,secondaryImage=this.renderImage(secondaryImageSource.src,secondaryImageSource.width,secondaryImageSource.height,secondaryImagePlaceholder.getAttribute("class"),secondaryImageSource.alt,this.image.getAttribute("sizes"));secondaryImage.setAttribute("product-card-secondary-image",""),this.image.parentElement.classList.add("product-card__media--hover-image"),secondaryImagePlaceholder.replaceWith(secondaryImage)}this.getAttribute("image-hover")==="zoom"&&this.image.parentElement.classList.add("product-card__media--hover-zoom"),this.imageContainerRatio==="natural"?this.image.closest(".o-ratio").style.paddingBottom=`${1/mainImageSource.aspect_ratio*100}%`:this.image.closest(".o-ratio").style.paddingBottom=null,this.updateSkeleton()}const vendor=this.querySelector("product-card-vendor");vendor&&(vendor.textContent=this.product.vendor),this.querySelector("product-card-title").textContent=this.product.title;const price=this.querySelector("product-card-price");if(price){const variantPrice=`
        <span class="u-hidden-visually">${window.theme.localize("REGULAR_PRICE")}</span>
        <span class="price__number ${this.product.compare_at_price>this.product.price?"price__number--sale":""}">
          <span class="money">
          ${this.product.price_varies?window.theme.localize("FROM_PRICE"):""}
          ${formatMoney(this.product.price,window.theme.money_product_price_format)}
          </span>
        </span>
        ${this.product.compare_at_price>this.product.price?`
              <span class="u-hidden-visually">${window.theme.localize("SALE_PRICE")}</span>
              <span class="price__compare">
                <span class="money">${formatMoney(this.product.compare_at_price,window.theme.money_format)}
                </span>
              </span>
            `:""}
      `;price.innerHTML=variantPrice}const priceNotes=this.querySelector("product-card-price-notes"),currentVariant=this.product.variants.find(variant=>variant.available);if(priceNotes&&currentVariant&&currentVariant.unit_price_measurement){const priceNote=document.createElement("span");priceNote.classList.add("price__note","price__note--unit");const unitPriceTemplate=document.getElementById("template-unit-price").content;priceNote.appendChild(unitPriceTemplate.cloneNode(!0)),priceNotes.appendChild(priceNote);const baseUnit=`${currentVariant.unit_price_measurement.reference_value!==1?currentVariant.unit_price_measurement.reference_value:""}${currentVariant.unit_price_measurement.reference_unit}`;priceNotes.querySelector("unit-price").innerHTML=window.formatMoney(currentVariant.unit_price,window.window.theme.money_format),priceNotes.querySelector("base-unit").innerHTML=baseUnit}if(this.quickShopTriggerType==="button"){const productCardButton=this.querySelector("product-card-button");if(this.product.available)if(this.product.variants&&this.product.variants.length>1){const quickShopButton=document.getElementById(`${this.sectionId?`${this.sectionId}--`:""}template-quick-shop-button`).content.cloneNode(!0),link=quickShopButton.querySelector("a");link&&(link.href=this.product.url),productCardButton.appendChild(quickShopButton)}else{const addToCartForm=document.getElementById(`${this.sectionId?`${this.sectionId}--`:""}template-add-to-cart-form`).content.cloneNode(!0);addToCartForm.querySelector('input[name="id"]').value=this.product.variants[0].id;const quickShopContainer2=this.querySelector("product-card-quick-shop");quickShopContainer2&&quickShopContainer2.remove(),productCardButton.appendChild(addToCartForm)}else{const soldOutButtonTemplate=document.getElementById(`${this.sectionId?`${this.sectionId}--`:""}template-sold-out-button`).content,quickShopContainer2=this.querySelector("product-card-quick-shop");quickShopContainer2&&quickShopContainer2.remove(),productCardButton.appendChild(soldOutButtonTemplate.cloneNode(!0))}}const quickShopContainer=this.querySelector("product-card-quick-shop");if(quickShopContainer&&!(this.quickShopTriggerType==="button"&&(!this.product.available||this.product.variants.length===1))){const quickShopTemplate=document.getElementById(`${this.sectionId?`${this.sectionId}--`:""}template-quick-shop`).content;if(this.quickShop=quickShopTemplate.cloneNode(!0).querySelector("quick-shop"),this.quickShop.hasAttribute("placeholder")&&this.quickShop.setAttribute("data-product-url",this.product.url),this.quickShopTrigger=this.querySelector("[data-trigger-quick-shop]"),this.quickShopTrigger.addEventListener("click",this.#boundOnQuickShopTriggerClick),this.closest(".modal")||this.closest("items-scroll")){const movedModalElements=document.getElementById("moved-modal-elements");movedModalElements&&movedModalElements.appendChild(this.quickShop)}else quickShopContainer.replaceWith(this.quickShop)}this.setAttribute("rendered",""),this.isRendered=!0}renderImage(url,width,height,classes="",alt="",sizes="100vw",srcsetWidths=[180,360,540,720,900,1080,1296,1512]){if(!url||!width||!height)return null;const image=document.createElement("img"),imageContainerRatio=this.imageContainerRatio!=="natural"?this.imageContainerRatio.split(":").reduce((ratio,value)=>ratio!==0?value/ratio:value,0):null,aspectRatio=width/height,uncroppedImage=this.imageContainerRatio==="natural"||imageContainerRatio&&this.imageFit;let masterWidth=width,masterHeight=height;uncroppedImage||(masterHeight=Math.round(masterWidth*imageContainerRatio),masterHeight>height&&(masterHeight=height,masterWidth=Math.round(masterHeight/imageContainerRatio)));const srcset=srcsetWidths.reduce((srcSet,srcWidth)=>{const srcHeight=Math.round(uncroppedImage?srcWidth/aspectRatio:srcWidth*imageContainerRatio);return srcWidth>masterWidth||srcHeight>masterHeight?srcSet:`${srcSet}${url}${url.includes("?")?"&":"?"}width=${srcWidth}${uncroppedImage?"":`&height=${srcHeight}&crop=center`} ${srcWidth}w ${srcHeight}h, `},""),masterSrc=uncroppedImage?url:`${url}${url.includes("?")?"&":"?"}width=${masterWidth}&height=${masterHeight}&crop=center`;return image.setAttribute("src",masterSrc),image.setAttribute("srcset",srcset),image.setAttribute("width",masterWidth),image.setAttribute("height",masterHeight),image.setAttribute("class",classes),image.setAttribute("alt",alt),image.setAttribute("sizes",sizes),image}updateImage(url,width,height,alt="",srcsetWidths=[180,360,540,720,900,1080,1296,1512]){if(!this.image||!url||!width||!height)return;const imageContainerRatio=this.imageContainerRatio!=="natural"?this.imageContainerRatio.split(":").reduce((ratio,value)=>ratio!==0?value/ratio:value,0):null,aspectRatio=width/height,uncroppedImage=this.imageContainerRatio==="natural"||imageContainerRatio&&this.imageFit;let masterWidth=width,masterHeight=height;uncroppedImage||(masterHeight=Math.round(masterWidth*imageContainerRatio),masterHeight>height&&(masterHeight=height,masterWidth=Math.round(masterHeight/imageContainerRatio)));const srcset=srcsetWidths.reduce((srcSet,srcWidth)=>{const srcHeight=Math.round(uncroppedImage?srcWidth/aspectRatio:srcWidth*imageContainerRatio);return srcWidth>masterWidth||srcHeight>masterHeight?srcSet:`${srcSet}${url}${url.includes("?")?"&":"?"}width=${srcWidth}${uncroppedImage?"":`&height=${srcHeight}&crop=center`} ${srcWidth}w ${srcHeight}h, `},""),masterSrc=uncroppedImage?url:`${url}${url.includes("?")?"&":"?"}width=${masterWidth}&height=${masterHeight}&crop=center`;this.image.setAttribute("src",masterSrc),this.image.setAttribute("srcset",srcset),this.image.setAttribute("width",masterWidth),this.image.setAttribute("height",masterHeight),this.image.setAttribute("alt",alt)}updateSkeleton(){if(!this.image)return;const skeleton=this.image.previousElementSibling&&this.image.previousElementSibling.tagName.toLowerCase()==="image-skeleton"?this.image.previousElementSibling:null;if(skeleton){const svg=skeleton.querySelector("svg"),rect=svg.querySelector("rect"),width=this.image.getAttribute("width"),height=this.image.getAttribute("height");skeleton.setAttribute("aria-label",`Loading image for ${this.product.title}`),svg.setAttribute("width",width),svg.setAttribute("height",height),svg.setAttribute("viewBox",`0 0 ${width} ${height}`),rect.setAttribute("width",width),rect.setAttribute("height",height)}}}customElements.define("product-card-mini",ProductCardMini);class ProductCard extends ProductCardMini{#boundSetVariant;#currentVariantUrl;#swatchTriggers;constructor(){super(),this.#boundSetVariant=this.setVariant.bind(this)}connectedCallback(){super.connectedCallback(),this.#swatchTriggers=[],this.product&&!this.isRendered&&(this.#currentVariantUrl=this.product.url,this.render()),this.#swatchTriggers.length===0&&(this.#swatchTriggers=Array.from(this.querySelectorAll("li[variant-id]"))),this.product||this.#setProductData(),this.#setUpSwatchesListeners()}disconnectedCallback(){super.disconnectedCallback(),this.#removeSwatchesListeners()}set product(productData){super.productData=productData,this.isRendered||(this.#currentVariantUrl=this.product.url,this.#setUpSwatchesListeners())}get product(){return this.productData}async render(){super.render();const swatches=this.querySelector("product-card-variant-swatches");if(swatches){const Swatches=await import("swatch-colors"),swatchOption=this.product.options.find(option=>Swatches.triggers.includes(option.name.toLowerCase()));if(swatchOption){const templateId=this.sectionId?`${this.sectionId}--template-swatch`:"template-swatch",swatchTemplate=document.getElementById(templateId).content;swatches.innerHTML=`
          <div class="swatch-wrapper">
            <div class="product-card__swatch">
              <ul class="product-card__swatch__items o-list-inline">
              </ul>
              ${swatchOption.values.length>5?`
                    <div class="product-card__overflow">
                      <a product-card-link href="${this.product.url}" class="product-card__overflow__item" title="${this.product.title}">
                        <span class="">+${swatchOption.values.length-5}</span>
                      </a>
                    </div>
                  `:""}
            </div>
          </div>
        `;const swatchList=swatches.querySelector("ul");swatchOption.values.slice(0,5).forEach(value=>{const variant=this.product.variants.find(v=>v[`option${swatchOption.position}`]===value);if(variant){const variantId=variant.id,swatchFragment=swatchTemplate.cloneNode(!0),variantNameHandle=handle(value),variantSwatch=swatchFragment.querySelector("variant-swatch");variantSwatch.setAttribute("swatch-id",variantNameHandle),variantSwatch.style.setProperty("--background-graphic",variantNameHandle.replaceAll("-","")),variantSwatch.setAttribute("aria-label",value.replaceAll('"',""));const variantTrigger=swatchFragment.querySelector("li");variantTrigger.setAttribute("variant-id",variantId),this.#swatchTriggers.push(variantTrigger),swatchList.appendChild(swatchFragment)}})}}}#setProductData(){const productData=this.querySelector("[id^=ProductJson]");productData&&(this.product=JSON.parse(productData.textContent))}setVariant(e){if(!e.target.hasAttribute("variant-id"))return;const variantId=e.target.getAttribute("variant-id"),variant=this.product.variants.find(v=>v.id.toString()===variantId);if(variant){this.querySelectorAll("li.is-active").forEach(li=>li.classList.remove("is-active")),e.target.classList.add("is-active"),this.#currentVariantUrl=`${this.product.url}${this.product.url.includes("?")?"&":"?"}variant=${variantId}`;const variantImage=variant.featured_media?variant.featured_media.preview_image:this.product.media&&this.product.media.length>0?this.product.media[0].preview_image:null;this.querySelectorAll("a[product-card-link]").forEach(link=>link.setAttribute("href",this.#currentVariantUrl)),variantImage&&this.updateImage(variantImage.src,variantImage.width,variantImage.height,variantImage.alt);const quickShop=this.querySelector("quick-shop");quickShop&&(quickShop.variantId=variantId)}}#setUpSwatchesListeners(){this.#swatchTriggers.forEach(trigger=>{trigger.addEventListener("click",this.#boundSetVariant)})}#removeSwatchesListeners(){this.#swatchTriggers.forEach(trigger=>{trigger.removeEventListener("click",this.#boundSetVariant)})}}customElements.define("product-card",ProductCard);
//# sourceMappingURL=/cdn/shop/t/100/assets/product-cards.js.map?v=172837119377394520861751575324