finpro/dist/chunk-N4H3PV6K.js

Design System

import{a}from"./chunk-23UFIOHV.js";import{a as d}from"./chunk-JA3VZI2D.js";import{a as o,b as r,g as s,h as n,i as l}from"./chunk-GBPY57YZ.js";import{a as t}from"./chunk-NZ3RGSR6.js";var f=o`@keyframes slide-from-right{0%{transform:translateX(100%)}100%{transform:translateX(0)}}.drawer{box-sizing:border-box;position:fixed;display:flex;top:0;right:0;bottom:0;width:424px;padding:var(--fp-size-xl);padding-top:max(env(safe-area-inset-top),var(--fp-size-xl));padding-right:max(env(safe-area-inset-right),var(--fp-size-xl));padding-bottom:max(env(safe-area-inset-bottom),var(--fp-size-xl));background:var(--fp-color-primary-background);box-shadow:var(--fp-size-xs) 0 var(--fp-size-2xl) rgba(0 0 0 / 50%);transform:translateX(100%);transition:transform var(--fp-drawer-animation-duration,.25s);z-index:999}:host([open]) .drawer{transform:translateX(0);animation:slide-from-right var(--fp-drawer-animation-duration,.25s)}iframe{height:100%;width:100%;border:0}.container{display:flex;flex-direction:column;gap:var(--fp-size-xl);flex:1}header{display:flex;justify-content:space-between;align-items:baseline;gap:var(--fp-size-2xs);background-color:white}header .header-buttons{display:flex;gap:24px;margin-left:auto}header h2{font:var(--fp-font-title-1-medium);color:var(--fp-color-secondary);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)}}`,p=f;var e=class extends d{constructor(){super(...arguments);this.open=!1;this.domExistence=!1}static get styles(){return[p]}connectedCallback(){super.connectedCallback(),window==null||window.addEventListener("fp-drawer-open",i=>{i.target!==this&&this.closeDrawer()})}updated(i){i.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 i=this.embedUrl?r`<iframe src=${this.embedUrl}></iframe>`:r`<slot></slot>`;return r`<section class=${this.embedUrl?"iframe-content":"content"}>
      ${i}
    </section>`}renderContainer(){let i=this.caption?r`<h2 id="drawer-caption">${this.caption}</h2>`:"",c=this.externalLink?r`<fp-button
          icon="external_link"
          variant="tertiary"
          kind="neutral"
          size="small"
          href="${this.externalLink}"
          target="_blank"
        ></fp-button>`:"";return r`<div class="container">
      <header>
        ${i}
        <div class="header-buttons">
          ${c}
          <fp-button
            @click="${this.closeDrawer}"
            icon="x"
            size="small"
            variant="tertiary"
            kind="neutral"
          ></fp-button>
        </div>
      </header>
      ${this.renderContent()}
    </div>`}render(){return this.domExistence?r`<div class="drawer">${this.renderContainer()}</div>`:r``}};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("fp-drawer-open")],e.prototype,"onOpen",2),t([a("fp-drawer-close")],e.prototype,"onClose",2),t([l()],e.prototype,"domExistence",2),e=t([s("fp-drawer")],e);export{e as a};
//# sourceMappingURL=chunk-N4H3PV6K.js.map