https://ritual.com/cdn/shop/t/577/assets/ritual-magic-zoom.BArPS9hz.min.js

1import{a as t}from"./BaseElement.DAzHg0T6.min.js";import{R as e}from"./ritual-magic-zoom.const.B95y_d91.min.js";import{y as i,i as o,n as s,r as n,v as a,w as l,b as r,t as d}from"./vendor-lit.Cg17OMaX.min.js";var h=Object.defineProperty,c=Object.getOwnPropertyDescriptor,p=(t,e,i,o)=>{for(var s,n=o>1?void 0:o?c(e,i):e,a=t.length-1;a>=0;a--)(s=t[a])&&(n=(o?s(e,i,n):s(n))||n);return o&&n&&h(e,i,n),n};let m=class extends t{constructor(){super(...arguments),this.open=!1,this.closeIconName="icon-interface-close",this.closeIconSize="16",this.triggerElement=null,this.dialogState="closed",this.postEnterElements=[],this.closeButtonRef=a(),this.openModalEvent=t=>{if(t.detail.modalId!==this.modalId)return;this.triggerElement=t.detail.triggerElement;const{top:e,left:i,width:o,height:s}=this.triggerElement.getBoundingClientRect();this.style.setProperty("--initial-top",`${e}px`),this.style.setProperty("--initial-left",`${i}px`),this.style.setProperty("--initial-width",`${o}px`),this.style.setProperty("--initial-height",`${s}px`),this.openModal()},this.closeModalEvent=t=>{t.detail.modalId===this.modalId&&this.closeModal()},this.handleEscapeKeyEvent=t=>{"Escape"===t.key&&this.open&&this.closeModal()},this.openModal=async()=>{this.classList.remove("hidden"),document.body.style.overflow="hidden",this.open=!0,this.dialogState="closed",this.updatePostEnterElementsVisibility(),await this.updateComplete,requestAnimationFrame(()=>{this.dialogState="entering"}),setTimeout(()=>{this.dialogState="post-enter",this.updatePostEnterElementsVisibility(),this.focusOnFirstElement()},500)},this.closeModal=async()=>{this.dialogState="pre-exit",this.updatePostEnterElementsVisibility(),await this.updateComplete,requestAnimationFrame(()=>{this.dialogState="exiting"}),setTimeout(()=>{this.classList.add("hidden"),document.body.style.overflow="",this.open=!1,this.dialogState="closed",this.updatePostEnterElementsVisibility(),this.focusTriggerElement()},500)}}connectedCallback(){super.connectedCallback(),document.addEventListener(e.OPEN_MODAL,this.openModalEvent),document.addEventListener(e.CLOSE_MODAL,this.closeModalEvent),document.addEventListener("keydown",this.handleEscapeKeyEvent)}disconnectedCallback(){super.disconnectedCallback(),document.body.style.overflow="",document.removeEventListener(e.OPEN_MODAL,this.openModalEvent),document.removeEventListener(e.CLOSE_MODAL,this.closeModalEvent),document.removeEventListener("keydown",this.handleEscapeKeyEvent)}firstUpdated(t){super.firstUpdated(t),this.postEnterElements=Array.from(this.querySelectorAll("[data-post-enter-element]")).map(t=>{const e=window.getComputedStyle(t).display||"block";return t.style.display="none",{element:t,display:e}})}focusOnFirstElement(){const t=setTimeout(()=>{var e;null==(e=this.closeButtonRef.value)||e.focus(),clearTimeout(t)},300)}focusTriggerElement(){this.triggerElement&&this.triggerElement.focus()}updatePostEnterElementsVisibility(){const t="post-enter"===this.dialogState;this.postEnterElements.forEach(({element:e,display:i})=>{e.style.display=t?i:"none"})}render(){return r`<dialog
2      .open=${this.open}
3      .inert=${!this.open}
4      class="${this.dialogState}"
5    >
6      <button
7        ${l(this.closeButtonRef)}
8        type="button"
9        aria-label="Close zoom"
10        @click=${this.closeModal}
11        class="${"post-enter"===this.dialogState?"flex":"hidden"} fixed top-5 left-[calc(100dvw_-_68px)] z-10 size-12 items-center justify-center rounded-full bg-background"
12      >
13        <svg-icon
14          src="${this.closeIconName}"
15          style="--icon-size: ${this.closeIconSize}px"
16          class="text-foreground"
17        ></svg-icon>
18      </button>
19
20      <slot></slot>
21    </dialog>`}};m.styles=o`
22    :host {
23      --transition-duration: ${i(500)}ms;
24    }
25
26    dialog {
27      position: fixed;
28      inset: 0;
29      z-index: 60;
30      overflow-x: hidden;
31      overflow-y: auto;
32      background-color: var(--color-background);
33      top: var(--initial-top);
34      left: var(--initial-left);
35      width: var(--initial-width);
36      height: var(--initial-height);
37    }
38
39    dialog.entering {
40      transition:
41        top var(--transition-duration) ease-out,
42        left var(--transition-duration) ease-out,
43        width var(--transition-duration) ease-out,
44        height var(--transition-duration) ease-out;
45      top: 0;
46      left: 0;
47      width: 100dvw;
48      height: 100dvh;
49    }
50
51    dialog.post-enter {
52      transition: none;
53      top: 0;
54      left: 0;
55      width: 100dvw;
56      height: 100dvh;
57    }
58
59    dialog.pre-exit {
60      transition: none;
61      top: 0;
62      left: 0;
63      width: 100dvw;
64      height: 100dvh;
65    }
66
67    dialog.exiting {
68      transition:
69        top var(--transition-duration) ease-in,
70        left var(--transition-duration) ease-in,
71        width var(--transition-duration) ease-in,
72        height var(--transition-duration) ease-in;
73      top: var(--initial-top);
74      left: var(--initial-left);
75      width: var(--initial-width);
76      height: var(--initial-height);
77    }
78
79    dialog [data-post-enter-element] {
80      display: none;
81    }
82  `,p([s({type:String,attribute:"modal-id"})],m.prototype,"modalId",2),p([s({type:Boolean,reflect:!0})],m.prototype,"open",2),p([s({type:String,attribute:"close-icon-name"})],m.prototype,"closeIconName",2),p([s({type:String,attribute:"close-icon-size"})],m.prototype,"closeIconSize",2),p([n()],m.prototype,"triggerElement",2),p([n()],m.prototype,"dialogState",2),p([n()],m.prototype,"postEnterElements",2),m=p([d("ritual-magic-zoom")],m);