@trendyol/baklava/dist/chunk-M4N2NT5C.js

Trendyol Baklava Design System

import{a as g}from"./chunk-6LT7O7T2.js";import{a as c}from"./chunk-GRL4DWKG.js";import{a as b,b as d,d as n}from"./chunk-IRDH7CN2.js";import{a as f,b as r,f as u}from"./chunk-4OT5AMS5.js";import{c as t}from"./chunk-VO7C5OZC.js";var y=f`:host{display:contents}.container{--background-color:var(--bl-color-neutral-full);display:flex;flex-direction:column;background:var(--background-color);max-width:calc(100vw - var(--bl-size-4xl));max-height:calc(100vh - var(--bl-size-4xl));min-width:424px;padding:0;border:0;border-radius:var(--bl-border-radius-l)}.dialog,.dialog-polyfill .container{padding:0;border:0;border-radius:var(--bl-border-radius-l)}.dialog-polyfill .container{position:fixed;z-index:var(--bl-index-dialog)}.dialog::backdrop{background-color:#273142b3}.dialog-polyfill{display:none;position:fixed;left:0;top:0;width:100vw;height:100vh;align-items:center;justify-content:center;z-index:var(--bl-index-dialog);background-color:#273142b3}:host([open]) .dialog-polyfill{display:flex}header{display:flex;justify-content:space-between;align-items:center;gap:var(--bl-size-2xs);padding:var(--bl-size-xl) var(--bl-size-xl) 0 var(--bl-size-xl)}header bl-button{margin-left:auto}header h2{font:var(--bl-font-title-1-medium);color:var(--bl-color-neutral-darker);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;padding:0}.content{padding:var(--bl-size-xl);overflow:auto}.container.has-footer .content{padding-bottom:0}footer{padding:var(--bl-size-xl);display:flex;flex-flow:row-reverse wrap;gap:var(--bl-size-m)}footer.shadow{/* FIXME: Use variables for sizes */box-shadow:0 -4px 15px #27314226}@media only screen and (max-width: 471px){.container{max-width:calc(100vw - var(--bl-size-2xl));max-height:calc(100vh - var(--bl-size-2xl));min-width:auto;min-height:auto}footer{flex-flow:column wrap}}`,m=y;var o=class extends u{constructor(){super(...arguments);this.open=!1;this.polyfilled=!window.HTMLDialogElement;this.clickOutsideHandler=e=>{e.composedPath().includes(this.container)||this.closeDialog("backdrop")};this.onKeydown=e=>{e.code==="Escape"&&this.open&&(e.preventDefault(),this.closeDialog("keyboard"))}}static get styles(){return[m]}updated(e){(e.has("open")||e.has("polyfilled"))&&this.toggleDialogHandler()}get _hasFooter(){return[...this.childNodes].some(e=>e.nodeName==="BL-BUTTON")}toggleDialogHandler(){var e,i,a,l;this.open?((i=(e=this.dialog)==null?void 0:e.showModal)==null||i.call(e),this.onOpen({isOpen:!0}),document.body.style.overflow="hidden",this.toggleFooterShadow(),window==null||window.addEventListener("keydown",s=>this.onKeydown(s)),window==null||window.addEventListener("resize",()=>this.toggleFooterShadow())):((l=(a=this.dialog)==null?void 0:a.close)==null||l.call(a),this.onClose({isOpen:!1}),document.body.style.overflow="auto",window==null||window.removeEventListener("keydown",this.onKeydown),window==null||window.removeEventListener("resize",this.toggleFooterShadow))}closeDialog(e){this.onRequestClose({source:e},{cancelable:!0}).defaultPrevented||(this.open=!1)}toggleFooterShadow(){var e,i,a,l,s,v;((e=this.content)==null?void 0:e.scrollHeight)>((i=this.content)==null?void 0:i.offsetHeight)?(l=(a=this.footer)==null?void 0:a.classList)==null||l.add("shadow"):(v=(s=this.footer)==null?void 0:s.classList)==null||v.remove("shadow")}renderFooter(){return this._hasFooter?r`<footer>
          <slot name="primary-action"></slot>
          <slot name="secondary-action"></slot>
          <slot name="tertiary-action"></slot>
        </footer>`:""}renderContainer(){let e=this.caption?r`<h2 id="dialog-caption">${this.caption}</h2>`:"",i={container:!0,"has-footer":this._hasFooter};return r` <div class="${g(i)}">
      <header>
        ${e}
        <bl-button
          @click="${()=>this.closeDialog("close-button")}"
          icon="close"
          variant="tertiary"
          kind="neutral"
        ></bl-button>
      </header>
      <section class="content"><slot></slot></section>
      ${this.renderFooter()}
    </div>`}render(){return this.polyfilled?r`<div
          class="dialog-polyfill"
          role="dialog"
          aria-labelledby="dialog-caption"
          @click=${this.clickOutsideHandler}
        >
          ${this.renderContainer()}
        </div>`:r`
          <dialog
            class="dialog"
            aria-labelledby="dialog-caption"
            @click=${this.clickOutsideHandler}
          >
            ${this.renderContainer()}
          </dialog>
        `}};t([d({type:Boolean,reflect:!0,hasChanged(p,h){return p===!1&&h===void 0?!1:p!==h}})],o.prototype,"open",2),t([d({type:String})],o.prototype,"caption",2),t([d({type:Boolean,reflect:!0})],o.prototype,"polyfilled",2),t([n(".dialog")],o.prototype,"dialog",2),t([n("footer")],o.prototype,"footer",2),t([n(".container")],o.prototype,"container",2),t([n(".content")],o.prototype,"content",2),t([c("bl-dialog-open")],o.prototype,"onOpen",2),t([c("bl-dialog-request-close")],o.prototype,"onRequestClose",2),t([c("bl-dialog-close")],o.prototype,"onClose",2),o=t([b("bl-dialog")],o);export{o as a};
//# sourceMappingURL=chunk-M4N2NT5C.js.map