@sandlada/mdc/build/components/dialog/base-dialog.js

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

import{_ as e}from"../../tslib.es6-CmLYFWVC.js";import{x as t,E as i}from"../../lit-element-Ho-VPzO1.js";import{n as o}from"../../property-Ck1wIidx.js";import{r as s}from"../../state--U2hSgGK.js";import{e as n}from"../../query-DifSdHBD.js";import{e as r}from"../../class-map-DlMb2KKL.js";import{DialogAction as a}from"./dialog-action.js";import"../../utils/aria/delegate.js";import"../../utils/aria/aria.js";import"../../utils/event/redispatch-event.js";import"./dialog-animations.js";import"../../easing-5hHInU7b.js";class l extends a{constructor(){super(),this.quick=!1,this.returnValue="",this.type="",this.hasHeadline=!1,this.hasActions=!1,this.hasIcon=!1,this.treewalker=document.createTreeWalker(this,NodeFilter.SHOW_ELEMENT)}render(){return t`${this.renderScrim()} ${this.renderDialog()}`}renderScrim(){return t`<span aria-hidden="true" class="scrim"></span>`}renderDialog(){const{ariaLabel:e}=this,o=this.open&&!(this.isAtScrollTop&&this.isAtScrollBottom),s=r({"has-headline":this.hasHeadline,"has-actions":this.hasActions,"has-icon":this.hasIcon,scrollable:o,"show-top-divider":o&&!this.isAtScrollTop,"show-bottom-divider":o&&!this.isAtScrollBottom});return t`<dialog class="${s}" aria-label="${e||i}" role="${"alert"===this.type?"alertdialog":i}" .returnValue="${this.returnValue}" @cancel="${this.handleCancel}" @click="${this.handleDialogClick}" @close="${this.handleClose}" @keydown="${this.handleKeydown}"><div class="container" @click="${this.handleContentClick}"><div class="headline">${this.renderHeadlineIcon()} ${this.renderHeadlineLabel()}<mdc-divider></mdc-divider></div>${this.renderContent()} ${this.renderActions()}</div></dialog>`}renderHeadlineLabel(){return t`<h2 id="headline" .aria-hidden="${!this.hasHeadline||i}"><slot name="headline" @slotchange="${this.handleHeadlineChange}"></slot></h2>`}renderHeadlineIcon(){return t`<div class="icon" aria-hidden="true"><slot name="icon" @slotchange="${this.handleIconChange}"></slot></div>`}renderActions(){return t`<div class="actions"><mdc-divider></mdc-divider><slot name="actions" @slotchange="${this.handleActionsChange}"></slot></div>`}renderContent(){return t`<div class="scroller"><div class="content"><div class="top anchor"></div><slot name="content"></slot><div class="bottom anchor"></div></div></div>`}connectedCallback(){super.connectedCallback(),this.isConnectedPromiseResolve()}disconnectedCallback(){super.disconnectedCallback(),this.isConnectedPromise=this.getIsConnectedPromise()}handleHeadlineChange(e){const t=e.target;this.hasHeadline=t.assignedElements().length>0}handleActionsChange(e){const t=e.target;this.hasActions=t.assignedElements().length>0}handleIconChange(e){const t=e.target;this.hasIcon=t.assignedElements().length>0}}e([o({type:Boolean})],l.prototype,"quick",void 0),e([o({type:String,attribute:!1})],l.prototype,"returnValue",void 0),e([o({type:String,attribute:!1})],l.prototype,"type",void 0),e([n("dialog")],l.prototype,"dialog",void 0),e([n(".scrim")],l.prototype,"scrim",void 0),e([n(".container")],l.prototype,"container",void 0),e([n(".headline")],l.prototype,"headline",void 0),e([n(".content")],l.prototype,"content",void 0),e([n(".actions")],l.prototype,"actions",void 0),e([n(".scroller")],l.prototype,"scroller",void 0),e([n(".top.anchor")],l.prototype,"topAnchor",void 0),e([n(".bottom.anchor")],l.prototype,"bottomAnchor",void 0),e([n(".focus-trap")],l.prototype,"firstFocusTrap",void 0),e([s()],l.prototype,"hasHeadline",void 0),e([s()],l.prototype,"hasActions",void 0),e([s()],l.prototype,"hasIcon",void 0);export{l as BaseDialog};