@trendyol/baklava/dist/chunk-4CK6AU4F.js

Trendyol Baklava Design System

import{a}from"./chunk-GRL4DWKG.js";import{a as l,b as n,c as d}from"./chunk-IRDH7CN2.js";import{a as o,b as i,f as s}from"./chunk-4OT5AMS5.js";import{c as t}from"./chunk-VO7C5OZC.js";var h=o`.drawer{box-sizing:border-box;position:fixed;display:flex;top:0;right:-100%;bottom:0;width:424px;padding:var(--bl-size-xl);padding-top:max(env(safe-area-inset-top), var(--bl-size-xl));padding-right:max(env(safe-area-inset-right), var(--bl-size-xl));padding-bottom:max(env(safe-area-inset-bottom), var(--bl-size-xl));background:var(--bl-color-neutral-full);box-shadow:var(--bl-size-xs) 0 var(--bl-size-2xl) rgba(0 0 0 / 50%);transition:right var(--bl-drawer-animation-duration, 0.25s);z-index:var(--bl-index-sticky)}:host([open]) .drawer{right:0}iframe{height:100%;width:100%;border:none}.container{display:flex;flex-direction:column;gap:var(--bl-size-xl);flex:1;width:100%}header{display:flex;justify-content:space-between;align-items:baseline;gap:var(--bl-size-2xs);background-color:white}header .header-buttons{display:flex;gap:var(--bl-size-xl);margin-left:auto}header h2{font:var(--bl-font-title-1-medium);color:var(--bl-color-neutral-darker);overflow:hidden;margin:0;padding:0}.content{flex:1;overflow-y:scroll}.iframe-content{flex:1}@media only screen and (max-width: 424px){:host([open]) .drawer{width:calc(100vw - 24px)}}`,c=h;var e=class extends s{constructor(){super(...arguments);this.open=!1;this.domExistence=!1}static get styles(){return[c]}connectedCallback(){super.connectedCallback(),window==null||window.addEventListener("bl-drawer-open",r=>{r.target!==this&&this.closeDrawer()})}updated(r){r.has("open")&&this.toggleDialogHandler()}toggleDialogHandler(){this.open?(this.domExistenceSchedule&&clearTimeout(this.domExistenceSchedule),this.domExistence=!0,this.onOpen("")):(this.domExistenceSchedule=window.setTimeout(()=>{this.domExistence=!1},1e3),this.onClose(""))}closeDrawer(){this.open=!1}renderContent(){let r=this.embedUrl?i`<iframe src=${this.embedUrl}></iframe>`:i`<slot></slot>`;return i`<section class=${this.embedUrl?"iframe-content":"content"}>
      ${r}
    </section>`}renderContainer(){let r=this.caption?i`<h2 id="drawer-caption">${this.caption}</h2>`:"",p=this.externalLink?i`<bl-button
          icon="external_link"
          variant="tertiary"
          kind="neutral"
          size="small"
          href="${this.externalLink}"
          target="_blank"
        ></bl-button>`:"";return i`<div class="container">
      <header>
        ${r}
        <div class="header-buttons">
          ${p}
          <bl-button
            @click="${this.closeDrawer}"
            icon="close"
            size="small"
            variant="tertiary"
            kind="neutral"
          ></bl-button>
        </div>
      </header>
      ${this.renderContent()}
    </div>`}render(){return this.domExistence?i`<div class="drawer">${this.renderContainer()}</div>`:i``}};t([n({type:Boolean,reflect:!0})],e.prototype,"open",2),t([n({type:String})],e.prototype,"caption",2),t([n({type:String,attribute:"embed-url"})],e.prototype,"embedUrl",2),t([n({type:String,attribute:"external-link"})],e.prototype,"externalLink",2),t([a("bl-drawer-open")],e.prototype,"onOpen",2),t([a("bl-drawer-close")],e.prototype,"onClose",2),t([d()],e.prototype,"domExistence",2),e=t([l("bl-drawer")],e);export{e as a};
//# sourceMappingURL=chunk-4CK6AU4F.js.map