https://www.maccosmetics.com/cdn/shop/t/182/assets/extended-dialog.DMDMhrKI.min.js

1import{ModalDialog as e}from"./core-dialog.DrQEaKNs.min.js";import{t,T as a,x as o}from"./vendor-lit.2u3dzq2T.min.js";import"./BaseElement.wji90fuE.min.js";import"./WithModalDialog.CpI_Ubm9.min.js";import"./modal-context.CE7TbCWB.min.js";import"./WithApiClient.B8AOHZZP.min.js";import"./fetchWithCache.BJ12kVQ7.min.js";import"./vendor.D2HIaoTS.min.js";Object.getOwnPropertyDescriptor;let i=class extends e{async show(){if(await new Promise(e=>requestAnimationFrame(()=>e())),await new Promise(e=>requestAnimationFrame(()=>e())),this.isConnected&&this.modalIsOpen)return super.show()}_closeDialog(){this.closeModal(),this.hide(),this.open=!1}_handleBackdropClick(e){this.closeOnBackdropClick&&e.target instanceof HTMLElement&&"DIALOG"===e.target.tagName&&this._closeDialog()}_handleGenericClick(e){const t=e.target;(t.hasAttribute("close-modal")||t.closest("[close-modal]"))&&(e.preventDefault(),this._closeDialog())}updated(e){super.updated(e),this.modalIsOpen&&!this.open?this.show():!this.modalIsOpen&&this.open&&this.hide()}render(){return o`
2      <dialog
3        role="dialog"
4        part="modal-dialog"
5        aria-modal="true"
6        type="${this.type}"
7        aria-labelledby="${this.id}-dialogTitle"
8        @modal-close=${this._closeDialog}
9        @close=${this._closeDialog}
10        .inert=${!this.modalIsOpen}
11        class="dialog ${this.parentClass}"
12        @click=${this._handleBackdropClick}
13      >
14        <div
15          class="${this.type||"modal"} modal-main-container"
16          part="modal-main-container"
17          size=${this.size}
18          anchor=${"drawer"===this.type?this.anchor:a}
19        >
20          <div
21            part="modal-header-container"
22            class="modal-header-container ${this.headerClasses}"
23          >
24            <div
25              part="modal-header-wrapper"
26              class="modal-header-wrapper ${this.withoutTitle?"sr-only":""}"
27              id="${this.id}-dialogTitle"
28            >
29              <slot name="header"></slot>
30            </div>
31
32            <button @click=${this._closeDialog} class="modal-close-button">
33              <slot name="close-icon">
34                <!-- Brand icon token (as a var: adopted sheets can land late in shadow DOM) -->
35                <svg-icon
36                  src="icon-close"
37                  style="--icon-size: var(--spacing-icon-md)"
38                ></svg-icon>
39                <span class="sr-only">Close</span>
40              </slot>
41            </button>
42          </div>
43          <div part="modal-content-container">${this.dialogContentHTML}</div>
44
45          <!--
46            Overlay slot — an absolutely-positioned layer covering the whole
47            main container (header included). Empty by default, so it has zero
48            effect on dialogs that don't slot anything here. A slotted panel
49            (e.g. <cart-samples-panel slot="overlay-panel">) owns its own slide
50            transition + pointer-events; this layer just anchors it over the
51            drawer. z above the sticky header (z-50) so the panel covers it.
52          -->
53          <div part="modal-overlay-container" class="modal-overlay-container">
54            <slot name="overlay-panel"></slot>
55          </div>
56        </div>
57      </dialog>
58    `}};i=((e,t)=>{for(var a,o=t,i=e.length-1;i>=0;i--)(a=e[i])&&(o=a(o)||o);return o}

58)([t("extended-dialog")],i);export{i as ExtendedDialog};