import{drawer_styles_default as e}from"./chunk.6D7NXPD5.js";import{Modal as t}from"./chunk.QVUQ4TNC.js";import{lockBodyScrolling as a,unlockBodyScrolling as r}from"./chunk.RK73WSZS.js";import{SlIconButton as s}from"./chunk.LOVM4XL6.js";import{getAnimation as i,setDefaultAnimation as o}from"./chunk.STXFIMXZ.js";import{waitForEvent as n}from"./chunk.B4BZKR24.js";import{animateTo as l,stopAnimations as d}from"./chunk.W5IOVX7A.js";import{LocalizeController as h}from"./chunk.2A3352EO.js";import{HasSlotController as c}from"./chunk.NYIIDP5N.js";import{watch as p}from"./chunk.C7FWPEOY.js";import{ShoelaceElement as m}from"./chunk.Z7XDKKOD.js";import{__decorateClass as y}from"./chunk.6M63UXML.js";import{classMap as f}from"../../../../lit/directives/class-map.js";import{html as u}from"../../../../lit/index.js";import{ifDefined as w}from"../../../../lit/directives/if-defined.js";import{property as v,query as b}from"../../../../lit/decorators.js";function uppercaseFirstLetter(e){return e.charAt(0).toUpperCase()+e.slice(1)}var k=class extends m{constructor(){super(...arguments),this.hasSlotController=new c(this,"footer"),this.localize=new h(this),this.modal=new t(this),this.open=!1,this.label="",this.placement="end",this.contained=!1,this.noHeader=!1,this.handleDocumentKeyDown=e=>{this.contained||"Escape"===e.key&&this.modal.isActive()&&this.open&&(e.stopImmediatePropagation(),this.requestClose("keyboard"))}}firstUpdated(){this.drawer.hidden=!this.open,this.open&&(this.addOpenListeners(),this.contained||(this.modal.activate(),a(this)))}disconnectedCallback(){super.disconnectedCallback(),r(this)}requestClose(e){if(this.emit("sl-request-close",{cancelable:!0,detail:{source:e}}).defaultPrevented){const e=i(this,"drawer.denyClose",{dir:this.localize.dir()});l(this.panel,e.keyframes,e.options)}else this.hide()}addOpenListeners(){document.addEventListener("keydown",this.handleDocumentKeyDown)}removeOpenListeners(){document.removeEventListener("keydown",this.handleDocumentKeyDown)}async handleOpenChange(){if(this.open){this.emit("sl-show"),this.addOpenListeners(),this.originalTrigger=document.activeElement,this.contained||(this.modal.activate(),a(this));const e=this.querySelector("[autofocus]");e&&e.removeAttribute("autofocus"),await Promise.all([d(this.drawer),d(this.overlay)]),this.drawer.hidden=!1,requestAnimationFrame((()=>{this.emit("sl-initial-focus",{cancelable:!0}).defaultPrevented||(e?e.focus({preventScroll:!0}):this.panel.focus({preventScroll:!0})),e&&e.setAttribute("autofocus","")}));const t=i(this,`drawer.show${uppercaseFirstLetter(this.placement)}`,{dir:this.localize.dir()}),r=i(this,"drawer.overlay.show",{dir:this.localize.dir()});await Promise.all([l(this.panel,t.keyframes,t.options),l(this.overlay,r.keyframes,r.options)]),this.emit("sl-after-show")}else{this.emit("sl-hide"),this.removeOpenListeners(),this.contained||(this.modal.deactivate(),r(this)),await Promise.all([d(this.drawer),d(this.overlay)]);const e=i(this,`drawer.hide${uppercaseFirstLetter(this.placement)}`,{dir:this.localize.dir()}),t=i(this,"drawer.overlay.hide",{dir:this.localize.dir()});await Promise.all([l(this.overlay,t.keyframes,t.options).then((()=>{this.overlay.hidden=!0})),l(this.panel,e.keyframes,e.options).then((()=>{this.panel.hidden=!0}))]),this.drawer.hidden=!0,this.overlay.hidden=!1,this.panel.hidden=!1;const a=this.originalTrigger;"function"==typeof(null==a?void 0:a.focus)&&setTimeout((()=>a.focus())),this.emit("sl-after-hide")}}handleNoModalChange(){this.open&&!this.contained&&(this.modal.activate(),a(this)),this.open&&this.contained&&(this.modal.deactivate(),r(this))}async show(){if(!this.open)return this.open=!0,n(this,"sl-after-show")}async hide(){if(this.open)return this.open=!1,n(this,"sl-after-hide")}render(){return u`
      <div
        part="base"
        class=${f({drawer:!0,"drawer--open":this.open,"drawer--top":"top"===this.placement,"drawer--end":"end"===this.placement,"drawer--bottom":"bottom"===this.placement,"drawer--start":"start"===this.placement,"drawer--contained":this.contained,"drawer--fixed":!this.contained,"drawer--rtl":"rtl"===this.localize.dir(),"drawer--has-footer":this.hasSlotController.test("footer")})}
      >
        <div part="overlay" class="drawer__overlay" @click=${()=>this.requestClose("overlay")} tabindex="-1"></div>

        <div
          part="panel"
          class="drawer__panel"
          role="dialog"
          aria-modal="true"
          aria-hidden=${this.open?"false":"true"}
          aria-label=${w(this.noHeader?this.label:void 0)}
          aria-labelledby=${w(this.noHeader?void 0:"title")}
          tabindex="0"
        >
          ${this.noHeader?"":u`
                <header part="header" class="drawer__header">
                  <h2 part="title" class="drawer__title" id="title">
                    <!-- If there's no label, use an invisible character to prevent the header from collapsing -->
                    <slot name="label"> ${this.label.length>0?this.label:String.fromCharCode(65279)} </slot>
                  </h2>
                  <div part="header-actions" class="drawer__header-actions">
                    <slot name="header-actions"></slot>
                    <sl-icon-button
                      part="close-button"
                      exportparts="base:close-button__base"
                      class="drawer__close"
                      name="x-lg"
                      label=${this.localize.term("close")}
                      library="system"
                      @click=${()=>this.requestClose("close-button")}
                    ></sl-icon-button>
                  </div>
                </header>
              `}

          <slot part="body" class="drawer__body"></slot>

          <footer part="footer" class="drawer__footer">
            <slot name="footer"></slot>
          </footer>
        </div>
      </div>
    `}};k.styles=e,k.dependencies={"sl-icon-button":s},y([b(".drawer")],k.prototype,"drawer",2),y([b(".drawer__panel")],k.prototype,"panel",2),y([b(".drawer__overlay")],k.prototype,"overlay",2),y([v({type:Boolean,reflect:!0})],k.prototype,"open",2),y([v({reflect:!0})],k.prototype,"label",2),y([v({reflect:!0})],k.prototype,"placement",2),y([v({type:Boolean,reflect:!0})],k.prototype,"contained",2),y([v({attribute:"no-header",type:Boolean,reflect:!0})],k.prototype,"noHeader",2),y([p("open",{waitUntilFirstUpdate:!0})],k.prototype,"handleOpenChange",1),y([p("contained",{waitUntilFirstUpdate:!0})],k.prototype,"handleNoModalChange",1),o("drawer.showTop",{keyframes:[{opacity:0,translate:"0 -100%"},{opacity:1,translate:"0 0"}],options:{duration:250,easing:"ease"}}),o("drawer.hideTop",{keyframes:[{opacity:1,translate:"0 0"},{opacity:0,translate:"0 -100%"}],options:{duration:250,easing:"ease"}}),o("drawer.showEnd",{keyframes:[{opacity:0,translate:"100%"},{opacity:1,translate:"0"}],rtlKeyframes:[{opacity:0,translate:"-100%"},{opacity:1,translate:"0"}],options:{duration:250,easing:"ease"}}),o("drawer.hideEnd",{keyframes:[{opacity:1,translate:"0"},{opacity:0,translate:"100%"}],rtlKeyframes:[{opacity:1,translate:"0"},{opacity:0,translate:"-100%"}],options:{duration:250,easing:"ease"}}),o("drawer.showBottom",{keyframes:[{opacity:0,translate:"0 100%"},{opacity:1,translate:"0 0"}],options:{duration:250,easing:"ease"}}),o("drawer.hideBottom",{keyframes:[{opacity:1,translate:"0 0"},{opacity:0,translate:"0 100%"}],options:{duration:250,easing:"ease"}}),o("drawer.showStart",{keyframes:[{opacity:0,translate:"-100%"},{opacity:1,translate:"0"}],rtlKeyframes:[{opacity:0,translate:"100%"},{opacity:1,translate:"0"}],options:{duration:250,easing:"ease"}}),o("drawer.hideStart",{keyframes:[{opacity:1,translate:"0"},{opacity:0,translate:"-100%"}],rtlKeyframes:[{opacity:1,translate:"0"},{opacity:0,translate:"100%"}],options:{duration:250,easing:"ease"}}),o("drawer.denyClose",{keyframes:[{scale:1},{scale:1.01},{scale:1}],options:{duration:250}}),o("drawer.overlay.show",{keyframes:[{opacity:0},{opacity:1}],options:{duration:250}}),o("drawer.overlay.hide",{keyframes:[{opacity:1},{opacity:0}],options:{duration:250}});export{k as SlDrawer};