@sandlada/mdc/build/components/side-sheet/internal/base-side-sheet.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{LitElement as a}from"../../../node_modules/lit-element/lit-element.js";import"../../../node_modules/lit/index.js";import{classMap as o}from"../../../node_modules/lit-html/directives/class-map.js";import"../../../node_modules/lit/directives/class-map.js";import{composeMixin as s}from"../../../utils/compose-mixin/compose-mixin.js";import c from"../../../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorate.js";import{mixinElevationOptions as l}from"../../elevation/elevation-options.mixin.js";import{mixinDelegatesAria as u}from"../../../utils/aria/delegate.js";import{styleMap as d}from"../../../node_modules/lit-html/directives/style-map.js";import"../../../node_modules/lit/directives/style-map.js";import{sideSheetStyles as f}from"../side-sheet.style.js";import{SIDE_SHEET_ACTION_EVENT as p,SIDE_SHEET_CANCEL_EVENT as m,SIDE_SHEET_CLOSED_EVENT as h,SIDE_SHEET_CLOSING_EVENT as g,SIDE_SHEET_DRAG_END_EVENT as _,SIDE_SHEET_OPENED_EVENT as v,SIDE_SHEET_OPENING_EVENT as y}from"../side-sheet.interface.js";import{SideSheetDragController as b}from"./side-sheet-drag-controller.js";import{SideSheetDefaultCloseAnimation as x,SideSheetDefaultOpenAnimation as S,SideSheetDragCommitCloseAnimation as C,SideSheetDragSnapBackAnimation as w}from"../side-sheet.animation.js"
/**
* @license
* Copyright 2026 Kai-Orion & Sandlada
* SPDX-License-Identifier: MIT
*/
;var T=class extends s(u,l)(a){static{this.styles=f}constructor(){super(),this.variant=`standard`,this.open=!1,this.sheetEdge=`end`,this.maxWidth=0,this.quick=!1,this.cancelable=!0,this.noFocusTrap=!1,this.returnValue=``,this.showBackButton=!1,this.draggable=!0,this.hasHeadline=!1,this.hasContent=!1,this.hasActions=!1,this.hasCloseIcon=!1,this.hasBackIcon=!1,this.lastCloseReason=`programmatic`,this.previouslyFocused=null,this.dragController=new b(this),this.addEventListener(_,this.handleDragEnd)}containerRef(){return this.containerEl}headlineRef(){return this.headlineEl}scrimRef(){return this.scrimEl}enabled(){return this.open&&this.draggable&&!this.quick}getVariant(){return this.variant}getSheetEdge(){return this.sheetEdge}getRenderClasses(){return{standard:this.variant===`standard`,modal:this.variant===`modal`,[`edge-${this.sheetEdge}`]:!0,"has-headline":this.hasHeadline,"has-content":this.hasContent,"has-actions":this.hasActions,"has-close-icon":this.hasCloseIcon,"has-back-icon":this.hasBackIcon,"no-focus-trap":this.noFocusTrap,"show-back-button":this.showBackButton,quick:this.quick}}render(){return r`<dialog class="host ${o(this.getRenderClasses())}" part="host" style="${d(this.maxWidth>0?{"--_container-max-width":`${this.maxWidth}px`}:{})}" .returnValue="${this.returnValue}" aria-label="${this.ariaLabel||i}" role="dialog" @cancel="${this.handleNativeCancel}" @click="${this.handleHostClick}" @keydown="${this.handleKeydown}">${this.noFocusTrap?i:this.renderFocusTrap(`first`)} <span class="scrim" aria-hidden="true"></span><div class="container" part="container" @pointerdown="${this.handleContainerPointerDown}">${this.renderElevation()}<header class="headline" part="headline" @pointerdown="${this.handleHeadlinePointerDown}">${this.renderHeadlineBackIcon()}<h2 class="headline-label"><slot name="headline" @slotchange="${this.handleHeadlineSlotChange}"></slot></h2><button class="close-icon" type="button" aria-label="Close" @click="${this.handleCloseIconClick}"><slot name="close-icon" @slotchange="${this.handleCloseIconSlotChange}"><svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor" aria-hidden="true"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41                                        10.59 12 5 17.59 6.41 19 12 13.41 17.59 19                                        19 17.59 13.41 12z"/></svg></slot></button></header><mdc-divider></mdc-divider><div class="content"><slot @slotchange="${this.handleContentSlotChange}"></slot></div><footer class="actions" ?hidden="${!this.hasActions}"><mdc-divider></mdc-divider><div class="actions-row"><slot name="actions" @slotchange="${this.handleActionsSlotChange}"></slot></div></footer></div>${this.noFocusTrap?i:this.renderFocusTrap(`last`)}</dialog>`}renderHeadlineBackIcon(){return this.variant!==`modal`||!this.showBackButton?i:r`<button class="headline-icon" type="button" aria-label="Back" @click="${this.handleBackIconClick}"><slot name="headline-icon" @slotchange="${this.handleBackIconSlotChange}"></slot></button>`}renderFocusTrap(e){return r`<div class="focus-trap focus-trap-${e}" tabindex="0" @focus="${e===`first`?this.handleFirstFocusTrapFocus:this.handleLastFocusTrapFocus}"></div>`}async show(){if(this.open)return;this.open=!0,await this.updateComplete;let e=this.dialogEl;e&&(e.open||(this.variant===`modal`?e.showModal():e.show()),await this.animateSideSheet(S(this.sheetEdge)),this.dispatchEvent(new Event(v,{bubbles:!0,composed:!0})),requestAnimationFrame(()=>{this.noFocusTrap||this.focusFirstInside()}))}async hide(){this.open&&(this.dragController.cancel(),this.open=!1,await this.updateComplete,await this.animateSideSheet(x(this.sheetEdge)),this.closeDialog(),this.dispatchEvent(new CustomEvent(h,{bubbles:!0,composed:!0,detail:{returnValue:this.returnValue,reason:this.lastCloseReason}})),this.noFocusTrap||this.restoreFocus())}async close(e){this.returnValue=e??``,await this.hide()}async dragCommittedClose(e){if(!this.open)return;let t=this.scrimEl?parseFloat(getComputedStyle(this.scrimEl).opacity):0,n=e??(this.containerEl?this.readTranslateX(this.containerEl):0);this.containerEl&&(this.containerEl.style.removeProperty(`transform`),this.containerEl.style.removeProperty(`cursor`)),this.scrimEl&&this.scrimEl.style.removeProperty(`opacity`),this.removeAttribute(`touch-action`),await this.animateSideSheet(C(this.sheetEdge,n,t)),this.lastCloseReason=`drag`,this.open=!1,await this.updateComplete,this.closeDialog(),this.dispatchEvent(new CustomEvent(h,{bubbles:!0,composed:!0,detail:{returnValue:this.returnValue,reason:`drag`}})),this.noFocusTrap||this.restoreFocus()}async dragSnapBack(e){let t=this.scrimEl?parseFloat(getComputedStyle(this.scrimEl).opacity):.32,n=e??(this.containerEl?this.readTranslateX(this.containerEl):0);this.containerEl&&(this.containerEl.style.removeProperty(`transform`),this.containerEl.style.removeProperty(`cursor`)),this.scrimEl&&this.scrimEl.style.removeProperty(`opacity`),this.removeAttribute(`touch-action`),await this.animateSideSheet(w(this.sheetEdge,n,t))}readTranslateX(e){let t=getComputedStyle(e).transform;if(!t||t===`none`)return 0;let n=t.match(/matrix\([^)]*\)/);if(!n)return 0;let r=n[0].slice(7,-1).split(`,`).map(e=>parseFloat(e.trim()));return r.length>=5?r[4]:0}handleDragEnd(e){let t=e.detail;t.target===`closed`||t.committed?this.dragCommittedClose(t.dx):t.reason!==`cancel`&&this.dragSnapBack(t.dx)}handleHeadlinePointerDown(e){this.dragController.handlePointerDown(e)}handleContainerPointerDown(e){this.dragController.handlePointerDown(e)}closeDialog(){let e=this.dialogEl;e?.open&&e.close(this.returnValue)}willUpdate(e){e.has(`open`)&&(this.open?(this.lastCloseReason=`programmatic`,this.previouslyFocused=this.ownerDocument?.activeElement??null,this.dispatchEvent(new Event(y,{bubbles:!0,composed:!0}))):this.dispatchEvent(new Event(g,{bubbles:!0,composed:!0})))}disconnectedCallback(){super.disconnectedCallback(),this.cancelAnimations?.abort()}async animateSideSheet(e){if(this.cancelAnimations?.abort(),this.cancelAnimations=new AbortController,this.quick)return;let t=this.containerEl,n=this.scrimEl,r=this.variant===`modal`;if(!t||r&&!n)return;let{scrim:i,container:a}=e,o=[[t,a??[]]];r&&n&&o.push([n,i??[]]);let s=[];for(let[e,t]of o)for(let n of t){let t=e.animate(...n);this.cancelAnimations.signal.addEventListener(`abort`,()=>{t.cancel()}),s.push(t)}await Promise.all(s.map(e=>e.finished.catch(()=>{})))}focusFirstInside(){(this.getFocusableElements()[0]??this.closeIconEl)?.focus()}restoreFocus(){let e=this.previouslyFocused;e&&`focus`in e&&e instanceof HTMLElement&&e.focus(),this.previouslyFocused=null}getFocusableElements(){let e=this.containerEl;if(!e)return[];let t=e.querySelectorAll(`a[href], button, textarea, input, select, [tabindex]:not([tabindex="-1"])`);return Array.from(t).filter(e=>!e.hasAttribute(`disabled`)&&e.getAttribute(`aria-hidden`)!==`true`&&!e.classList.contains(`focus-trap`))}handleHeadlineSlotChange(e){let t=e.target;this.hasHeadline=t.assignedElements({flatten:!0}).length>0}handleContentSlotChange(e){let t=e.target;this.hasContent=t.assignedElements({flatten:!0}).length>0}handleActionsSlotChange(e){let t=e.target;this.hasActions=t.assignedElements({flatten:!0}).length>0}handleCloseIconSlotChange(e){let t=e.target;this.hasCloseIcon=t.assignedElements({flatten:!0}).length>0}handleBackIconSlotChange(e){let t=e.target;this.hasBackIcon=t.assignedElements({flatten:!0}).length>0}handleNativeCancel(e){e.preventDefault(),!(this.variant!==`modal`||!this.cancelable||!this.open)&&(this.lastCloseReason=`escape`,this.dispatchEvent(new CustomEvent(m,{bubbles:!0,composed:!0,detail:{reason:`escape`}})),this.hide())}handleHostClick(e){this.variant!==`modal`||!this.cancelable||!this.open||e.composedPath().some(e=>e.classList?.contains?.(`scrim`))&&(this.lastCloseReason=`scrim`,this.dispatchEvent(new CustomEvent(m,{bubbles:!0,composed:!0,detail:{reason:`scrim`}})),this.hide())}handleKeydown(e){}handleCloseIconClick(e){this.dispatchEvent(new CustomEvent(p,{bubbles:!0,composed:!0,detail:{source:`close`}})),this.lastCloseReason=`close-button`,this.hide()}handleBackIconClick(e){this.dispatchEvent(new CustomEvent(p,{bubbles:!0,composed:!0,detail:{source:`back`}})),this.lastCloseReason=`back-button`,this.hide()}handleFirstFocusTrapFocus(){let e=this.getFocusableElements();e.length>0&&e[e.length-1].focus()}handleLastFocusTrapFocus(){let e=this.getFocusableElements();e.length>0&&e[0].focus()}};c([e({type:String})],T.prototype,`variant`,void 0),c([e({type:Boolean,reflect:!0})],T.prototype,`open`,void 0),c([e({type:String,attribute:`sheet-edge`})],T.prototype,`sheetEdge`,void 0),c([e({type:Number,attribute:`max-width`})],T.prototype,`maxWidth`,void 0),c([e({type:Boolean})],T.prototype,`quick`,void 0),c([e({attribute:`cancelable`,converter:{fromAttribute:e=>e!==null&&e!==`false`,toAttribute:e=>e?``:`false`}})],T.prototype,`cancelable`,void 0),c([e({type:Boolean,attribute:`no-focus-trap`})],T.prototype,`noFocusTrap`,void 0),c([e({type:String,attribute:`return-value`})],T.prototype,`returnValue`,void 0),c([e({type:Boolean,attribute:`show-back-button`})],T.prototype,`showBackButton`,void 0),c([e({attribute:`draggable`,converter:{fromAttribute:e=>e!==null&&e!==`false`,toAttribute:e=>e?``:`false`}})],T.prototype,`draggable`,void 0),c([t()],T.prototype,`hasHeadline`,void 0),c([t()],T.prototype,`hasContent`,void 0),c([t()],T.prototype,`hasActions`,void 0),c([t()],T.prototype,`hasCloseIcon`,void 0),c([t()],T.prototype,`hasBackIcon`,void 0),c([n(`dialog`)],T.prototype,`dialogEl`,void 0),c([n(`.container`)],T.prototype,`containerEl`,void 0),c([n(`.scrim`)],T.prototype,`scrimEl`,void 0),c([n(`.headline`)],T.prototype,`headlineEl`,void 0),c([n(`.close-icon`)],T.prototype,`closeIconEl`,void 0);export{T as BaseSideSheet};
//# sourceMappingURL=base-side-sheet.js.map