UNPKG

@sandlada/mdc

Version:

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

10 lines 4.83 kB
import{property as e}from"../../../node_modules/@lit/reactive-element/decorators/property.js";import{state as t}from"../../../node_modules/@lit/reactive-element/decorators/state.js";import"../../../node_modules/lit/decorators.js";import{LitElement as n}from"../../../node_modules/lit-element/lit-element.js";import"../../../node_modules/lit/index.js";import{composeMixin as r}from"../../../utils/compose-mixin/compose-mixin.js";import i from"../../../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorate.js";import{mixinDelegatesAria as a}from"../../../utils/aria/delegate.js";import{redispatchEvent as o}from"../../../utils/event/redispatch-event.js";import{DialogDefaultCloseAnimation as s,DialogDefaultOpenAnimation as c}from"./dialog-animations.js"; /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 * * [Modified by Kai-Orion & Sandlada] */ var l=class extends r(a)(n){get open(){return this.isOpen}set open(e){e!==this.isOpen&&(this.isOpen=e,e?(this.setAttribute(`open`,``),this.show?.()):(this.removeAttribute(`open`),this.close?.()))}getIsConnectedPromise(){return new Promise(e=>{this.isConnectedPromiseResolve=e})}get getCloseAnimation(){return s}get getOpenAnimation(){return c}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))}disconnectedCallback(){super.disconnectedCallback(),this.disconnectIntersectionObserver()}async show(){this.isOpening=!0,await this.isConnectedPromise,await this.updateComplete;let e=this.dialog;if(e.open||!this.isOpening){this.isOpening=!1;return}if(!this.dispatchEvent(new Event(`open`,{cancelable:!0}))){this.open=!1,this.isOpening=!1;return}e.showModal(),this.open=!0,this.scroller&&(this.scroller.scrollTop=0),this.isAtScrollTop=!0,this.isAtScrollBottom=!this.scroller||this.scroller.scrollHeight<=this.scroller.clientHeight,this.connectIntersectionObserver(),this.querySelector(`[autofocus]`)?.focus(),await this.animateDialog(this.getOpenAnimation),this.dispatchEvent(new Event(`opened`)),this.isOpening=!1}async close(e=this.returnValue){if(this.isOpening=!1,!this.isConnected){this.open=!1;return}await this.updateComplete;let t=this.dialog;if(!t.open||this.isOpening){this.open=!1;return}let n=this.returnValue;if(this.returnValue=e,!this.dispatchEvent(new Event(`close`,{cancelable:!0}))){this.returnValue=n;return}await this.animateDialog(this.getCloseAnimation),t.close(e),this.disconnectIntersectionObserver(),this.open=!1,this.dispatchEvent(new Event(`closed`))}async animateDialog(e){if(this.cancelAnimations?.abort(),this.cancelAnimations=new AbortController,this.quick)return;let{dialog:t,scrim:n,container:r,headline:i,content:a,actions:o}=this;if(!t||!n||!r||!i||!a||!o)return;let{container:s,dialog:c,scrim:l,headline:u,content:d,actions:f}=e,p=[[t,c??[]],[n,l??[]],[r,s??[]],[i,u??[]],[a,d??[]],[o,f??[]]],m=[];for(let[e,t]of p)for(let n of t){let t=e.animate(...n);this.cancelAnimations.signal.addEventListener(`abort`,()=>{t.cancel()}),m.push(t)}await Promise.all(m.map(e=>e.finished.catch(()=>{})))}handleDialogClick(){if(this.nextClickIsFromContent){this.nextClickIsFromContent=!1;return}this.dispatchEvent(new Event(`cancel`,{cancelable:!0}))&&this.close()}handleContentClick(){this.nextClickIsFromContent=!0}handleSubmit(e){let t=e.target,{submitter:n}=e;t.getAttribute(`method`)!==`dialog`||!n||this.close(n.getAttribute(`value`)??this.returnValue)}handleCancel(e){if(e.target!==this.dialog)return;this.escapePressedWithoutCancel=!1;let t=o(this,e);e.preventDefault(),!t&&this.close()}handleClose(){this.escapePressedWithoutCancel&&(this.escapePressedWithoutCancel=!1,this.dialog?.dispatchEvent(new Event(`cancel`,{cancelable:!0})))}handleKeydown(e){e.key===`Escape`&&(this.escapePressedWithoutCancel=!0,setTimeout(()=>{this.escapePressedWithoutCancel=!1}))}connectIntersectionObserver(){this.disconnectIntersectionObserver(),!(!this.scroller||!this.topAnchor||!this.bottomAnchor)&&(this.intersectionObserver=new IntersectionObserver(e=>{for(let t of e)this.handleAnchorIntersection(t)},{root:this.scroller}),this.intersectionObserver.observe(this.topAnchor),this.intersectionObserver.observe(this.bottomAnchor))}disconnectIntersectionObserver(){this.intersectionObserver?.disconnect(),this.intersectionObserver=void 0}handleAnchorIntersection(e){let{target:t,isIntersecting:n}=e;t===this.topAnchor&&(this.isAtScrollTop=n),t===this.bottomAnchor&&(this.isAtScrollBottom=n)}};i([e({type:Boolean,noAccessor:!0})],l.prototype,`open`,null),i([t()],l.prototype,`isAtScrollTop`,void 0),i([t()],l.prototype,`isAtScrollBottom`,void 0);export{l as DialogAction}; //# sourceMappingURL=dialog-action.js.map