1import{LitElement,css,html,classMap,styleMap,ref,createRef,enableBodyScroll,disableBodyScroll}from"@hh/global.js";class HHDetailsModal extends LitElement{static properties={breakpoint:{type:String},label:{type:String},selector:{type:String},open:{type:Boolean,attribute:"is-open",reflect:!0},forcedOpen:{attribute:"open"},lockHeight:{type:Boolean,attribute:"lock-height"},heightOffset:{type:Number,attribute:"height-offset"},_height:{state:!0}};$container=createRef();$details=createRef();constructor(){super(),this.open=!1,this.lockHeight=!1,this.heightOffset=3,this.breakpoint="(min-width: 750px)",this.bodyListener=this.bodyListener.bind(this)}connectedCallback(){super.connectedCallback(),document.body.addEventListener("closeModal",this.close.bind(this))}requestUpdate(name,value){return name==="forcedOpen"&&this.toggle(!1,!this.forcedOpen),super.requestUpdate(name,value)}interceptEvent(e){e._intercepted=!0}toggle(e=!1,value=void 0){if(e.type==="keyup"&&e.code.toUpperCase()!=="ENTER")return!0;e&&e.preventDefault(),this.open=typeof value>"u"?!this.open:value,this[`${this.open?"add":"remove"}BodyListener`](),this.open&&this.lockHeight&&this.setHeight(),this.open&&this.broadcast()}closeFromDetails(e){e.composedPath().some(element=>element.matches&&element.matches("[data-close]"))&&this.toggle()}closeWithEscape(e){e.code.toUpperCase()==="ESCAPE"&&this.toggle()}close(){this.open&&this.toggle()}isMobile(){return!window.matchMedia(this.breakpoint).matches}addBodyListener(){this.isMobile()&&disableBodyScroll(this.$container?.value),document.body.addEventListener("click",this.bodyListener)}removeBodyListener(){enableBodyScroll(this.$container?.value),document.body.removeEventListener("click",this.bodyListener)}bodyListener(e){!e._intercepted&&this.toggle()}setHeight(){const{top:parentTop=0}=this.parentNode.getBoundingClientRect()||{},{top:detailsTop=0}=this.$details?.value.getBoundingClientRect()||{};this._height=this.isMobile()?`calc(100vh - ${Math.floor(parentTop+detailsTop-this.heightOffset)}px)`:""}broadcast(){this.dispatchEvent(new CustomEvent("modalOpened",{bubbles:!0,composed:!0,detail:{value:this}}))}render(){return html` <!-- @ts-ignore no-incompatible-type-binding --> 2 <details 3 ?open="${this.open}" 4 @click="${this.interceptEvent}" 5 ${ref(this.$container)} 6 > 7 <summary 8 @keyup="${this.toggle}" 9 aria-expanded="${this.open}" 10 aria-haspopup="dialog" 11 role="button" 12 ${ref(this.$container)} 13 > 14 <slot 15 @click="${this.toggle}" 16 class="${classMap({"is-open":this.open})}" 17 name="summary" 18 tabindex="-1" 19 ></slot> 20 </summary> 21 <div 22 class="content" 23 role="dialog" 24 aria-modal="true" 25 aria-label="${this.label}" 26 style="${styleMap({height:this._height})}" 27 ${ref(this.$details)} 28 > 29 <hh-focus-trap active="${this.open}"> 30 <slot 31 name="details" 32 @keyup="${this.closeWithEscape}" 33 @click="${this.closeFromDetails}" 34 ></slot> 35 </hh-focus-trap> 36 </div> 37 </details>`}static styles=css` 38 summary { 39 list-style-type: none; 40 } 41 42 summary:focus { 43 outline: 0.2rem solid var(--hh-color-focus); 44 outline-offset: var(--hh-focus-outline-offset); 45 } 46 47 summary::-webkit-details-marker { 48 display: none; 49 } 50 51 .content { 52 position: var(--hh-position, absolute); 53 top: var(--hh-top); 54 left: 0; 55 right: 0; 56 bottom: 0; 57 background: var(--hh-modal-background); 58 height: var(--hh-modal-height); 59 z-index: var(--hh-z-index-inner, 1); 60 } 61 62 ::slotted([slot='details']) { 63 width: 100%; 64 display: flex; 65 } 66 67 :host { 68 z-index: var(--hh-z-index, 100); 69 } 70 `}customElements.define("hh-details-modal",HHDetailsModal); 71//# sourceMappingURL=/cdn/shop/t/539/assets/component-details-modal.js.map?v=164301471854271809181789503192
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.