finpro/dist/chunk-YBHRNKVU.js

Design System

import{a as p}from"./chunk-23UFIOHV.js";import{a as v}from"./chunk-JA3VZI2D.js";import{a as h,b as r,g as f,h as d,j as l}from"./chunk-GBPY57YZ.js";import{a as o}from"./chunk-NZ3RGSR6.js";var m=h`.container{display:flex;flex-direction:column;background:var(--fp-color-primary-background);max-width:calc(100vw - var(--fp-size-4xl));max-height:calc(100vh - var(--fp-size-4xl));min-width:424px;padding:0;border:0;border-radius:var(--fp-border-radius-l)}.dialog,.dialog-polyfill .container{padding:0;border:0;border-radius:var(--fp-border-radius-l)}.dialog-polyfill .container{position:fixed;z-index:999}.dialog::backdrop{background:#273142;opacity:.7}.dialog-polyfill{display:none;position:fixed;left:0;top:0;width:100vw;height:100vh;align-items:center;justify-content:center;background:#273142b3;z-index:999}:host([open]) .dialog-polyfill{display:flex}header{display:flex;justify-content:space-between;align-items:center;gap:var(--fp-size-2xs);padding:var(--fp-size-xl) var(--fp-size-xl) 0 var(--fp-size-xl)}header fp-button{margin-left:auto}header h2{font:var(--fp-font-title-1-medium);color:var(--fp-color-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;padding:0}.content{padding:var(--fp-size-xl) var(--fp-size-xl) var(--fp-size-m) var(--fp-size-xl);overflow:auto}footer{padding:var(--fp-size-xl);display:flex;flex-flow:row-reverse wrap;gap:var(--fp-size-m)}footer.shadow{box-shadow:0 -4px 15px #27314226}@media only screen and (max-width:471px){.container{max-width:calc(100vw - var(--fp-size-2xl));max-height:calc(100vh - var(--fp-size-2xl));min-width:auto;min-height:auto}footer{flex-flow:column wrap}}`,g=m;var t=class extends v{constructor(){super(...arguments);this.open=!1;this.clickOutsideHandler=e=>{e.composedPath().includes(this.container)||this.closeDialog()};this.onKeydown=e=>{e.code==="Escape"&&this.open&&this.closeDialog()}}static get styles(){return[g]}updated(e){e.has("open")&&this.toggleDialogHandler()}get hasHtmlDialogSupport(){return!!window.HTMLDialogElement}get _hasFooter(){return[...this.childNodes].some(e=>e.nodeName==="FP-BUTTON")}toggleDialogHandler(){var e,a,i,n;this.open?((a=(e=this.dialog)==null?void 0:e.showModal)==null||a.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())):((n=(i=this.dialog)==null?void 0:i.close)==null||n.call(i),this.onClose({isOpen:!1}),document.body.style.overflow="auto",window==null||window.removeEventListener("keydown",this.onKeydown),window==null||window.removeEventListener("resize",this.toggleFooterShadow))}closeDialog(){this.open=!1}toggleFooterShadow(){var e,a,i,n,s,c;((e=this.content)==null?void 0:e.scrollHeight)>((a=this.content)==null?void 0:a.offsetHeight)?(n=(i=this.footer)==null?void 0:i.classList)==null||n.add("shadow"):(c=(s=this.footer)==null?void 0:s.classList)==null||c.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>`:"";return r` <div class="container">
      <header>
        ${e}
        <fp-button
          @click="${this.closeDialog}"
          icon="x"
          variant="tertiary"
          kind="neutral"
        ></fp-button>
      </header>
      <section class="content"><slot /></section>
      ${this.renderFooter()}
    </div>`}render(){return this.hasHtmlDialogSupport?r`
          <dialog class="dialog" aria-labelledby="dialog-caption" @click=${this.clickOutsideHandler}>${this.renderContainer()}</dialog>
        `:r`<div class="dialog-polyfill" role="dialog" aria-labelledby="dialog-caption" @click=${this.clickOutsideHandler}>
          ${this.renderContainer()}
        </div>`}};o([d({type:Boolean,reflect:!0})],t.prototype,"open",2),o([d({type:String})],t.prototype,"caption",2),o([l(".dialog")],t.prototype,"dialog",2),o([l("footer")],t.prototype,"footer",2),o([l(".container")],t.prototype,"container",2),o([l(".content")],t.prototype,"content",2),o([p("fp-dialog-open")],t.prototype,"onOpen",2),o([p("fp-dialog-close")],t.prototype,"onClose",2),t=o([f("fp-dialog")],t);export{t as a};
//# sourceMappingURL=chunk-YBHRNKVU.js.map