import{E as o}from"./events.js";import{e as l}from"./emitEvent.js";const d=(n="#5C5F62")=>`
  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
    <rect width="20" height="20" fill="transparent"/>
    <path d="M11.4138 9.99985L17.7069 3.70685C17.8944 3.51934 17.9997 3.26503 17.9997 2.99985C17.9997 2.73467 17.8944 2.48036 17.7069 2.29285C17.5193 2.10534 17.265 2 16.9998 2C16.7347 2 16.4804 2.10534 16.2928 2.29285L9.99985 8.58585L3.70685 2.29285C3.614 2.2 3.50378 2.12636 3.38247 2.07611C3.26117 2.02586 3.13115 2 2.99985 2C2.86855 2 2.73853 2.02586 2.61722 2.07611C2.49592 2.12636 2.38569 2.2 2.29285 2.29285C2.10534 2.48036 2 2.73467 2 2.99985C2 3.26503 2.10534 3.51934 2.29285 3.70685L8.58585 9.99985L2.29285 16.2928C2.10534 16.4804 2 16.7347 2 16.9998C2 17.265 2.10534 17.5193 2.29285 17.7069C2.48036 17.8944 2.73467 17.9997 2.99985 17.9997C3.26503 17.9997 3.51934 17.8944 3.70685 17.7069L9.99985 11.4138L16.2928 17.7069C16.3855 17.8 16.4957 17.874 16.617 17.9244C16.7383 17.9749 16.8684 18.0009 16.9998 18.0009C17.1313 18.0009 17.2614 17.9749 17.3827 17.9244C17.504 17.874 17.6142 17.8 17.7069 17.7069C17.7998 17.6141 17.8735 17.5039 17.9238 17.3825C17.9742 17.2612 18 17.1312 18 16.9998C18 16.8685 17.9742 16.7385 17.9238 16.6172C17.8735 16.4958 17.7998 16.3856 17.7069 16.2928L11.4138 9.99985Z" fill="${n}"/>
  </svg>
`;class s extends HTMLElement{constructor(){super(),this.onKeyDown=t=>{if(t.code==="Enter"||t.code==="NumpadEnter"||t.code==="Space")t.preventDefault(),t.target.dispatchEvent(new Event("click"));else if(t.code==="Escape")t.preventDefault(),this.close();else if(t.code==="Tab"){const e=this.querySelector('[data-bb-selector="modal-close-x"'),i=this.querySelector('[data-bb-selector="done"]');t.shiftKey?document.activeElement===e&&(i.focus(),t.preventDefault()):document.activeElement===i&&(e.focus(),t.preventDefault())}},this.oldFocus=void 0,this.bbVersion=this.dataset.version,this.accordion=this.dataset.accordion,this.displayAsAccordion=this.accordion==="true",this.modalTitle=window.eight.bundleBuilder.storefront.cartEngine.getTranslation("Your bundle summary",this.dataset.title),this.totalTranslation=window.eight.bundleBuilder.storefront.cartEngine.getTranslation("Total: {{ total }}"),this.doneLabel=window.eight.bundleBuilder.storefront.cartEngine.getTranslation("Done"),this.bundleItems=window.eight.bundleBuilder.storefront.cartEngine.bundles,this.totalPrice=window.eight.bundleBuilder.storefront.cartEngine.bundlesTotalPrice}connectedCallback(){document.addEventListener(o["OPEN:MODAL"],()=>this.open()),document.addEventListener(o["CLOSE:MODAL"],()=>this.close()),document.addEventListener(o["UPDATE:MODAL"],t=>this.updateModal(t))}renderLineItems(){let t="";return this.bundleItems.forEach(e=>{t=`
                ${t}
                <bundle-builder-line-card
                    data-configured-bundle-id="${e.configuredBundleId}"
                    data-frequency="${e.frequency??""}"
                    data-variant-id="${e.lineItem.variant_id}"
                    data-version="${this.bbVersion}"
                    data-accordion="${this.accordion}"
                    role="listitem"
                ></bundle-builder-line-card>
            `}),t}updateModal(t){const e="withAnimation"in(t.detail||{})?t.detail.withAnimation:!0;this.bbVersion=this.dataset.version,this.accordion=this.dataset.accordion,this.displayAsAccordion=this.accordion==="true",this.bundleItems=window.eight.bundleBuilder.storefront.cartEngine.bundles,this.totalPrice=window.eight.bundleBuilder.storefront.cartEngine.bundlesTotalPrice,this.getAttribute("data-bb-animate")==="open"&&this.renderCriticalContent(e)}totalLabel(){return this.totalTranslation.replace(/{{\s*total\s*}}/,this.compileCost())}renderCriticalContent(t=!0){const e=this.querySelector('[data-bb-selector="modal-content"]');e.style.minHeight=`${e.offsetHeight}px`,e.style.opacity=t?"0":"1";const i=()=>{e.innerHTML=`${this.renderLineItems()}`;const a=this.querySelector('[data-bb-selector="modal-total"]');a.innerHTML=this.totalLabel(),t&&setTimeout(()=>{e.style.opacity="1"},350)};setTimeout(()=>i(),200)}open(){this.bundleItems||(this.bundleItems=window.eight.bundleBuilder.storefront.cartEngine.bundles),this.totalPrice||(this.totalPrice=window.eight.bundleBuilder.storefront.cartEngine.bundlesTotalPrice),this.setAttribute("data-bb-animate","open"),this.innerHTML=`
            <div data-bb-selector="modal-container" role="dialog" aria-labelledby="bb-modal-title">
                <div data-bb-selector="underlay" data-bb-close-modal></div>
                <div data-bb-selector="modal-inner">
                    <bundle-builder-loading-bar></bundle-builder-loading-bar>
                    <div data-bb-selector="modal-header">
                        <h2 data-bb-selector="modal-title" id="bb-modal-title" aria-label="title: ${this.modalTitle}">${this.modalTitle}</h2>
                        <div data-bb-close-modal data-bb-selector="modal-close-x" aria-label="Close modal" role="button" tabindex="0">
                            ${d()}
                        </div>
                    </div>
                    <div data-bb-selector="modal-content" role="list">
                        ${this.renderLineItems()}
                    </div>
                    <div data-bb-selector="modal-footer">
                        <div data-bb-selector="modal-total">${this.totalLabel()}</div>
                        <div data-bb-close-modal data-bb-selector="done" class="btn" role="button" tabindex="0" aria-label="Close modal">${this.doneLabel}</div>
                    </div>
                </div>
            </div>
        `;const t=this.querySelector('[data-bb-selector="done"]');t&&(this.oldFocus=document.activeElement,t.focus());const e=this.querySelectorAll("[data-bb-close-modal]");e.length>0&&e.forEach(i=>{i.addEventListener("click",()=>{l(o["CLOSE:MODAL"])})}),this.addEventListener("keydown",this.onKeyDown)}close(){var t;this.removeEventListener("keydown",this.onKeyDown),this.setAttribute("data-bb-animate","close"),this.oldFocus&&((t=this.oldFocus)==null||t.focus()),setTimeout(()=>{this.innerHTML=""},600)}compileCost(){return window.eight.bundleBuilder.storefront.cartEngine.formatMoney(this.totalPrice)}}window.customElements.define("bundle-builder-item-modal",s);