@sandlada/mdc/build/components/popup-controller/popup-controller.js

@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.

import{customElement as e}from"../../node_modules/@lit/reactive-element/decorators/custom-element.js";import{property as t}from"../../node_modules/@lit/reactive-element/decorators/property.js";import{queryAssignedElements as n}from"../../node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";import"../../node_modules/lit/decorators.js";import{html as r}from"../../node_modules/lit-html/lit-html.js";import{LitElement as i}from"../../node_modules/lit-element/lit-element.js";import"../../node_modules/lit/index.js";import a from"../../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorate.js";import{autoUpdate as o,computePosition as s,flip as c,offset as l,shift as u}from"../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js";let d=class extends i{constructor(){super(),this.open=!1,this.quick=!1,this.placement=`bottom-start`,this.disableFlip=!1,this.getDefaultAnimation=(e,t)=>{let n=this.getDirectionFromPlacement(t),r;switch(n){case`top`:r=`translateY(10px)`;break;case`bottom`:r=`translateY(-10px)`;break;case`left`:r=`translateX(10px)`;break;case`right`:r=`translateX(-10px)`;break;default:r=`translateY(-10px)`}return{keyframes:e===`open`?[{opacity:0,transform:r},{opacity:1,transform:`none`}]:[{opacity:1,transform:`none`},{opacity:0,transform:r}],options:{duration:150,easing:`ease-out`}}},this.surfaceAnimation=null,this.handleTriggerClick=e=>{let t=e.composedPath();this.triggerElement&&t.includes(this.triggerElement)&&(this.open=!this.open)},this.handleDocumentClick=e=>{e.composedPath().includes(this)||(this.open=!1)},this.handleDocumentKeyDown=e=>{e.key===`Escape`&&(this.open=!1)}}getDirectionFromPlacement(e){return e.split(`-`)[0]}async animateSurface(e){if(this.quick||!this.surfaceElement)return;this.surfaceAnimation?.cancel();let t=this.customAnimations?.[e]??this.getDefaultAnimation(e,this.placement);typeof t==`function`&&(t=t(this.placement)),this.surfaceAnimation=this.surfaceElement.animate(t.keyframes,t.options);try{await this.surfaceAnimation.finished}catch{}finally{this.surfaceAnimation=null}}get triggerElement(){return this.triggerElements[0]}get surfaceElement(){return this.surfaceElements[0]}render(){return r`${this.renderTriggerSlot()} ${this.renderSurfaceSlot()}`}renderSurfaceSlot(){return r`<slot name="surface" @slotchange="${this.handleSlotChange}"></slot>`}renderTriggerSlot(){return r`<slot name="trigger" @slotchange="${this.handleSlotChange}"></slot>`}handleSlotChange(){this.requestUpdate()}async handleOpenChange(e){this.open!==e&&(this.open?await this.show():await this.hide())}async show(){!this.surfaceElement||!this.triggerElement||(this.surfaceAnimation?.cancel(),this.surfaceElement.style.display=`block`,this.cleanup=o(this.triggerElement,this.surfaceElement,async()=>{let e=[l(6),!this.disableFlip&&c(),u({padding:8})].filter(Boolean),{x:t,y:n}=await s(this.triggerElement,this.surfaceElement,{placement:this.placement,middleware:e});Object.assign(this.surfaceElement.style,{left:`${t}px`,top:`${n}px`})}),document.addEventListener(`click`,this.handleDocumentClick,!0),document.addEventListener(`keydown`,this.handleDocumentKeyDown,!0),await this.animateSurface(`open`),this.dispatchEvent(new CustomEvent(`mdc-popup-opened`)))}async hide(){this.surfaceElement&&(this.surfaceAnimation?.cancel(),await this.animateSurface(`close`),this.cleanup?.(),document.removeEventListener(`click`,this.handleDocumentClick,!0),document.removeEventListener(`keydown`,this.handleDocumentKeyDown,!0),this.surfaceElement.style.display=`none`,this.dispatchEvent(new CustomEvent(`mdc-popup-closed`)))}connectedCallback(){super.connectedCallback(),this.handleOpenChange(!1)}disconnectedCallback(){super.disconnectedCallback(),this.cleanup?.()}firstUpdated(e){super.firstUpdated(e),this.surfaceElement&&(this.surfaceElement.style.display=`none`,this.surfaceElement.style.position=`fixed`,this.addEventListener(`click`,this.handleTriggerClick))}updated(e){e.has(`open`)&&this.handleOpenChange(e.get(`open`))}};a([t({type:Boolean,reflect:!0})],d.prototype,`open`,void 0),a([t({type:Boolean,reflect:!0})],d.prototype,`quick`,void 0),a([t({type:String,reflect:!0})],d.prototype,`placement`,void 0),a([t({type:Boolean,attribute:`disable-flip`,reflect:!0})],d.prototype,`disableFlip`,void 0),a([t({type:Object,attribute:`custom-animations`})],d.prototype,`customAnimations`,void 0),a([n({slot:`surface`,flatten:!0})],d.prototype,`surfaceElements`,void 0),a([n({slot:`trigger`,flatten:!0})],d.prototype,`triggerElements`,void 0),d=a([e(`mdc-popup-controller`)],d);export{d as MDCPopupController};
//# sourceMappingURL=popup-controller.js.map