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

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

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{query as n}from"../../../node_modules/@lit/reactive-element/decorators/query.js";import"../../../node_modules/lit/decorators.js";import{html as r,nothing as i}from"../../../node_modules/lit-html/lit-html.js";import"../../../node_modules/lit/index.js";import{classMap as a}from"../../../node_modules/lit-html/directives/class-map.js";import"../../../node_modules/lit/directives/class-map.js";import o from"../../../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorate.js";import{DialogAction as s}from"./dialog-action.js";
/**
* @license
* Copyright 2025 Kai-Orion & Sandlada
* SPDX-License-Identifier: MIT
*/
var c=class extends s{constructor(...e){super(...e),this.quick=!1,this.returnValue=``,this.type=``,this.noFocusTrap=!1,this.hasHeadline=!1,this.hasActions=!1,this.hasIcon=!1}render(){return r`${this.renderScrim()} ${this.renderDialog()}`}renderScrim(){return r`<span aria-hidden="true" class="scrim"></span>`}getDialogClasses(){let e=this.open&&!(this.isAtScrollTop&&this.isAtScrollBottom);return{"has-headline":this.hasHeadline,"has-actions":this.hasActions,"has-icon":this.hasIcon,scrollable:e,"show-top-divider":e&&!this.isAtScrollTop,"show-bottom-divider":e&&!this.isAtScrollBottom}}renderDialog(){let{ariaLabel:e}=this;return r`<dialog class="${a(this.getDialogClasses())}" aria-label="${e||i}" role="${this.type===`alert`?`alertdialog`:i}" .returnValue="${this.returnValue}" @cancel="${this.handleCancel}" @click="${this.handleDialogClick}" @close="${this.handleClose}" @keydown="${this.handleKeydown}">${this.noFocusTrap?i:r`<div class="first-focus-trap" tabindex="0" @focus="${this.handleFirstFocusTrapFocus}"></div>`}<div class="container" @click="${this.handleContentClick}"><div class="headline">${this.renderHeadlineIcon()} ${this.renderHeadlineLabel()}<mdc-divider></mdc-divider></div>${this.renderContent()} ${this.renderActions()}</div>${this.noFocusTrap?i:r`<div class="last-focus-trap" tabindex="0" @focus="${this.handleLastFocusTrapFocus}"></div>`}</dialog>`}renderHeadlineLabel(){return r`<h2 id="headline" .aria-hidden="${!this.hasHeadline||i}"><slot name="headline" @slotchange="${this.handleHeadlineChange}"></slot></h2>`}renderHeadlineIcon(){return r`<div class="icon" aria-hidden="true"><slot name="icon" @slotchange="${this.handleIconChange}"></slot></div>`}renderActions(){return r`<div class="actions"><mdc-divider></mdc-divider><slot name="actions" @slotchange="${this.handleActionsChange}"></slot></div>`}renderContent(){return r`<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){let t=e.target;this.hasHeadline=t.assignedElements().length>0}handleActionsChange(e){let t=e.target;this.hasActions=t.assignedElements().length>0}handleIconChange(e){let t=e.target;this.hasIcon=t.assignedElements().length>0}handleFirstFocusTrapFocus(){let e=this.getFocusableElements();e.length>0&&e[e.length-1].focus()}handleLastFocusTrapFocus(){let e=this.getFocusableElements();e.length>0&&e[0].focus()}getFocusableElements(){if(!this.dialog)return[];let e=this.dialog.querySelectorAll(`a[href], button, textarea, input, select, [tabindex]:not([tabindex="-1"])`);return Array.from(e).filter(e=>!e.hasAttribute(`disabled`)&&!e.getAttribute(`aria-hidden`)&&!e.classList.contains(`first-focus-trap`)&&!e.classList.contains(`last-focus-trap`))}};o([e({type:Boolean})],c.prototype,`quick`,void 0),o([e({type:String,attribute:`return-value`})],c.prototype,`returnValue`,void 0),o([e({type:String})],c.prototype,`type`,void 0),o([e({type:Boolean,attribute:`no-focus-trap`,reflect:!0})],c.prototype,`noFocusTrap`,void 0),o([n(`dialog`)],c.prototype,`dialog`,void 0),o([n(`.scrim`)],c.prototype,`scrim`,void 0),o([n(`.container`)],c.prototype,`container`,void 0),o([n(`.headline`)],c.prototype,`headline`,void 0),o([n(`.content`)],c.prototype,`content`,void 0),o([n(`.actions`)],c.prototype,`actions`,void 0),o([n(`.scroller`)],c.prototype,`scroller`,void 0),o([n(`.top.anchor`)],c.prototype,`topAnchor`,void 0),o([n(`.bottom.anchor`)],c.prototype,`bottomAnchor`,void 0),o([n(`.first-focus-trap`)],c.prototype,`firstFocusTrap`,void 0),o([n(`.last-focus-trap`)],c.prototype,`lastFocusTrap`,void 0),o([t()],c.prototype,`hasHeadline`,void 0),o([t()],c.prototype,`hasActions`,void 0),o([t()],c.prototype,`hasIcon`,void 0);export{c as BaseDialog};
//# sourceMappingURL=base-dialog.js.map