1class ModalDrawer extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.innerHTML=` 2 <style> 3 :host { 4 position: fixed; 5 top: 0; 6 left: 0; 7 width: 100%; 8 height: 100%; 9 display: none; 10 z-index: 1000; 11 } 12 13 :host([open]) { 14 display: block; 15 } 16 17 .modal-drawer-overlay { 18 position: fixed; 19 top: 0; 20 left: 0; 21 width: 100%; 22 height: 100%; 23 background: rgba(0, 0, 0, 0.3); 24 backdrop-filter: blur(1px); 25 opacity: 0; 26 transition: opacity var(--duration-medium, 0.3s) ease; 27 pointer-events: none; 28 } 29 30 :host([open]) .modal-drawer-overlay { 31 opacity: 1; 32 pointer-events: auto; 33 } 34 35 .modal-drawer__content { 36 position: fixed; 37 bottom: 0; 38 left: 0; 39 width: 100%; 40 background: rgb(var(--color-drawer-background)); 41 transform: translateY(100%); 42 transition: transform var(--duration-medium, 0.3s) ease; 43 z-index: 1001; 44 padding: 30px; 45 box-sizing: border-box; 46 } 47 48 :host([open]) .modal-drawer__content { 49 transform: translateY(0); 50 } 51 52 @media (max-width: 768px) {
53 .modal-drawer__content { 54 padding: 20px 20px 30px 20px; 55 } 56 } 57 </style> 58 <div class="modal-drawer-overlay"></div> 59 <div class="modal-drawer__content"> 60 <slot></slot> 61 </div> 62 `,this.handleKeyDown=this.handleKeyDown.bind(this),this.focusableElements=[],this.firstFocusableElement=null,this.lastFocusableElement=null,this.restoreFocusTo=null}connectedCallback(){this.overlay=this.shadowRoot.querySelector(".modal-drawer-overlay"),this.content=this.shadowRoot.querySelector(".modal-drawer__content"),this.closeButtons=this.querySelectorAll(".close-modal-drawer"),this.setAttribute("role","dialog"),this.setAttribute("aria-modal","true"),this.overlay.addEventListener("click",()=>this.close()),this.closeButtons.forEach(button=>button.addEventListener("click",()=>this.close())),this.shadowRoot.querySelector("slot").addEventListener("slotchange",()=>{this.hasAttribute("open")&&(this.updateFocusableElements(),this.trapFocus())}),this.hasAttribute("open")?this.open():this.close()}getFocusableElements(){const selector='a[href], button:not(:disabled), input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [tabindex]:not([tabindex="-1"])',lightDomFocusables=Array.from(this.querySelectorAll(selector)),allFocusables=[...Array.from(this.shadowRoot.querySelectorAll(selector)),...lightDomFocusables].filter(el=>el.offsetWidth>0||el.offsetHeight>0||el===document.activeElement);return allFocusables.sort((a,b)=>{const tabindexA=a.tabIndex>=0?a.tabIndex:a.getAttribute("tabindex")===null?0:parseInt(a.getAttribute("tabindex")),tabindexB=b.tabIndex>=0?b.tabIndex:b.getAttribute("tabindex")===null?0:parseInt(b.getAttribute("tabindex"));return tabindexA===tabindexB?0:tabindexA===0?1:tabindexB===0?-1:tabindexA-tabindexB}),allFocusables}updateFocusableElements(){this.focusableElements=this.getFocusableElements(),this.firstFocusableElement=this.focusableElements[0],this.lastFocusableElement=this.focusableElements[this.focusableElements.length-1],this.focusableElements.length===0?(this.content.setAttribute("tabindex","-1"),this.firstFocusableElement=this.content,this.lastFocusableElement=this.content):this.content.removeAttribute("tabindex")}trapFocus(event){if(event.key==="Tab"){const isFirstElement=document.activeElement===this.firstFocusableElement,isLastElement=document.activeElement===this.lastFocusableElement;event.shiftKey?(isFirstElement||!this.contains(document.activeElement))&&(this.lastFocusableElement.focus(),event.preventDefault()):(isLastElement||!this.contains(document.activeElement))&&(this.firstFocusableElement.focus(),event.preventDefault())}}open(){this.restoreFocusTo=document.activeElement,this.style.display="block",requestAnimationFrame(()=>{setTimeout(()=>{this.setAttribute("open",""),this.updateFocusableElements(),this.firstFocusableElement?this.firstFocusableElement.focus():this.focus(),document.addEventListener("keydown",this.handleKeyDown)},10)})}close(){this.hasAttribute("open")&&(this.removeAttribute("open"),document.removeEventListener("keydown",this.handleKeyDown),this.restoreFocusTo&&typeof this.restoreFocusTo.focus=="function"&&(this.restoreFocusTo.focus(),this.restoreFocusTo=null),setTimeout(()=>{this.style.display="none"},300))}handleKeyDown(event){event.key==="Escape"&&this.hasAttribute("open")&&this.close(),this.hasAttribute("open")&&this.trapFocus(event)}static get observedAttributes(){return["open"]}}customElements.define("modal-drawer",ModalDrawer);class ModalTrigger extends DrawerButton{constructor(){super()}handleClick(){this.targetDrawer&&this.targetDrawer instanceof ModalDrawer&&this.targetDrawer.open()}}customElements.define("modal-trigger",ModalTrigger); 63//# sourceMappingURL=/cdn/shop/t/65/assets/modal-drawer.js.map?v=128290900402504623781788214101
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.