finpro/dist/chunk-FO75KONI.js

Design System

import{a as m}from"./chunk-ZO5WDGDN.js";import{a as f}from"./chunk-23UFIOHV.js";import{a as u}from"./chunk-JA3VZI2D.js";import{a as p,b as n,g as d,h as e}from"./chunk-GBPY57YZ.js";import{a as o}from"./chunk-NZ3RGSR6.js";var x=p`:host{display:block}.alert{--padding:var(--fp-size-m);--main-color:var(--fp-color-primary);--main-bg-color:var(--fp-color-accent-primary-background);position:relative;display:flex;align-items:flex-start;justify-content:space-between;background-color:var(--main-bg-color);color:var(--fp-color-content-primary);box-shadow:inset 0 0 0 1px var(--main-color);border-radius:var(--fp-border-radius-s);padding:calc(var(--padding) / 2) var(--padding);padding-right:calc(var(--padding) / 2)}.description{font:var(--fp-font-body-text-2)}.wrapper{display:flex;flex-flow:column;flex-wrap:wrap;justify-content:space-between;flex:auto}.content{display:flex;margin-right:var(--fp-size-2xs);flex:20 1 70%;padding:calc(var(--padding) / 2) 0}.icon{padding:calc(var(--padding) / 2) 0;margin-right:var(--fp-size-2xs);color:var(--main-color)}.text-content{display:flex;flex-direction:column}.caption{color:var(--fp-color-content-primary);font:var(--fp-font-title-3-medium)}.actions{display:none;flex-wrap:wrap;gap:var(--fp-size-m);padding:calc(var(--padding) / 2) 0}.close{--fp-color-neutral-lightest:transparent}.caption+.description{margin-top:var(--fp-size-2xs)}:host([closed]){display:none}:host([variant='success']) .alert{--main-color:var(--fp-color-success);--main-bg-color:var(--fp-color-success-background)}:host([variant='warning']) .alert{--main-color:var(--fp-color-warning);--main-bg-color:var(--fp-color-warning-background)}:host([variant='danger']) .alert{--main-color:var(--fp-color-danger);--main-bg-color:var(--fp-color-danger-background)}`,g=x;var v=()=>({fromAttribute:a=>!a||a==="true"?!0:a==="false"?!1:a});var t=class extends u{constructor(){super(...arguments);this.variant="info";this.closable=!1;this.closed=!1}static get styles(){return[g]}open(){this.closed=!1}close(){this.closed=!0}get _hasAlertCaptionSlot(){return this.querySelector(':scope > [slot="caption"]')!==null}_closeHandler(){this.closed=!0,this.onClose(!0)}_predefinedIcons(){switch(this.variant){case"success":return"check-circle";case"danger":return"x-circle";default:return this.variant}}_getIcon(){if(this.icon)return this.icon===!0?this._predefinedIcons():this.icon}_initAlertActionSlot(s){let i=s.target;i.assignedElements().forEach(r=>{var l;if(r.tagName!=="FP-BUTTON"){(l=r.parentNode)==null||l.removeChild(r);return}i.parentElement.style.display="flex";let h=r.slot==="action-pro"?"secondary":"primary",b={info:"default",warning:"neutral",success:"success",danger:"danger"};r.setAttribute("variant",h),r.setAttribute("kind",b[this.variant]),r.setAttribute("size","medium"),r.removeAttribute("icon")})}render(){let s=this.caption||this._hasAlertCaptionSlot?n`<span class="caption">
            <slot name="caption"> ${this.caption} </slot>
          </span>`:null,i=this._getIcon()?n`<fp-icon class="icon" name=${m(this._getIcon())}></fp-icon>`:null,c=this.closable?n`<fp-button
          class="close"
          label="close"
          variant="tertiary"
          kind="neutral"
          icon="x"
          variant="secondary"
          @click=${this._closeHandler}
        ></fp-button>`:null,r=n`<span class="description">
      <slot> ${this.description} </slot>
    </span>`;return n`
      <div class="alert">
        ${i}
        <div class="wrapper">
          <div class="content">
            <div class="text-content">${s} ${r}</div>
          </div>
          <div class="actions">
            <slot class="action-fin" name="action-fin" @slotchange=${this._initAlertActionSlot}></slot>
            <slot
              class="action-pro"
              name="action-pro"
              @slotchange=${this._initAlertActionSlot}
            ></slot>
          </div>
        </div>
        ${c}
      </div>
    `}};o([e({reflect:!0})],t.prototype,"variant",2),o([e()],t.prototype,"description",2),o([e({converter:v()})],t.prototype,"icon",2),o([e({type:Boolean,reflect:!0})],t.prototype,"closable",2),o([e()],t.prototype,"caption",2),o([e({type:Boolean,reflect:!0})],t.prototype,"closed",2),o([f("fp-close")],t.prototype,"onClose",2),t=o([d("fp-alert")],t);export{t as a};
//# sourceMappingURL=chunk-FO75KONI.js.map