UNPKG

@sandlada/mdc

Version:

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

2 lines (1 loc) 3.93 kB
import{_ as t}from"../../tslib.es6-CmLYFWVC.js";import{i as e}from"../../lit-element-Ho-VPzO1.js";import{n as i}from"../../property-Ck1wIidx.js";import{r as s}from"../../state--U2hSgGK.js";import{mixinDelegatesAria as n}from"../../utils/aria/delegate.js";import{redispatchEvent as o}from"../../utils/event/redispatch-event.js";import{DialogDefaultCloseAnimation as r,DialogDefaultOpenAnimation as a}from"./dialog-animations.js";import"../../utils/aria/aria.js";import"../../easing-5hHInU7b.js";class h extends(n(e)){get open(){return this.isOpen}set open(t){t!==this.isOpen&&(this.isOpen=t,t?(this.setAttribute("open",""),this.show?.()):(this.removeAttribute("open"),this.close?.()))}getIsConnectedPromise(){return new Promise(t=>{this.isConnectedPromiseResolve=t})}get getCloseAnimation(){return r}get getOpenAnimation(){return a}constructor(){super(),this.isAtScrollTop=!1,this.isAtScrollBottom=!1,this.isOpen=!1,this.isOpening=!1,this.isConnectedPromise=this.getIsConnectedPromise(),this.nextClickIsFromContent=!1,this.escapePressedWithoutCancel=!1,this.addEventListener("submit",this.handleSubmit.bind(this))}firstUpdated(){this.intersectionObserver=new IntersectionObserver(t=>{for(const e of t)this.handleAnchorIntersection(e)},{root:this.scroller}),this.intersectionObserver.observe(this.topAnchor),this.intersectionObserver.observe(this.bottomAnchor)}async show(){this.isOpening=!0,await this.isConnectedPromise,await this.updateComplete;const t=this.dialog;if(t.open||!this.isOpening)return void(this.isOpening=!1);if(!this.dispatchEvent(new Event("open",{cancelable:!0})))return this.open=!1,void(this.isOpening=!1);t.showModal(),this.open=!0,this.scroller&&(this.scroller.scrollTop=0),this.querySelector("[autofocus]")?.focus(),await this.animateDialog(this.getOpenAnimation),this.dispatchEvent(new Event("opened")),this.isOpening=!1}async close(t=this.returnValue){if(this.isOpening=!1,!this.isConnected)return void(this.open=!1);await this.updateComplete;const e=this.dialog;if(!e.open||this.isOpening)return void(this.open=!1);const i=this.returnValue;this.returnValue=t;this.dispatchEvent(new Event("close",{cancelable:!0}))?(await this.animateDialog(this.getCloseAnimation),e.close(t),this.open=!1,this.dispatchEvent(new Event("closed"))):this.returnValue=i}async animateDialog(t){if(this.cancelAnimations?.abort(),this.cancelAnimations=new AbortController,this.quick)return;const{dialog:e,scrim:i,container:s,headline:n,content:o,actions:r}=this;if(!(e&&i&&s&&n&&o&&r))return;const{container:a,dialog:h,scrim:c,headline:l,content:p,actions:d}=t,m=[[e,h??[]],[i,c??[]],[s,a??[]],[n,l??[]],[o,p??[]],[r,d??[]]],u=[];for(const[t,e]of m)for(const i of e){const e=t.animate(...i);this.cancelAnimations.signal.addEventListener("abort",()=>{e.cancel()}),u.push(e)}await Promise.all(u.map(t=>t.finished.catch(()=>{})))}handleDialogClick(){if(this.nextClickIsFromContent)return void(this.nextClickIsFromContent=!1);!this.dispatchEvent(new Event("cancel",{cancelable:!0}))||this.close()}handleContentClick(){this.nextClickIsFromContent=!0}handleSubmit(t){const e=t.target,{submitter:i}=t;"dialog"===e.getAttribute("method")&&i&&this.close(i.getAttribute("value")??this.returnValue)}handleCancel(t){if(t.target!==this.dialog)return;this.escapePressedWithoutCancel=!1;const e=o(this,t);t.preventDefault(),e||this.close()}handleClose(){this.escapePressedWithoutCancel&&(this.escapePressedWithoutCancel=!1,this.dialog?.dispatchEvent(new Event("cancel",{cancelable:!0})))}handleKeydown(t){"Escape"===t.key&&(this.escapePressedWithoutCancel=!0,setTimeout(()=>{this.escapePressedWithoutCancel=!1}))}handleAnchorIntersection(t){const{target:e,isIntersecting:i}=t;e===this.topAnchor&&(this.isAtScrollTop=i),e===this.bottomAnchor&&(this.isAtScrollBottom=i)}}t([i({type:Boolean,noAccessor:!0})],h.prototype,"open",null),t([s()],h.prototype,"isAtScrollTop",void 0),t([s()],h.prototype,"isAtScrollBottom",void 0);export{h as DialogAction};