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

Trendyol Baklava Design System

import{a as v}from"./chunk-GRL4DWKG.js";import{a as u,b as e}from"./chunk-IRDH7CN2.js";import{a as m}from"./chunk-DINNT5P2.js";import{a as p,b as a,f as d}from"./chunk-4OT5AMS5.js";import{c as r}from"./chunk-VO7C5OZC.js";var b=()=>({fromAttribute:n=>!n||n==="true"?!0:n==="false"?!1:n});var y=p`:host{display:block}.alert{--padding:var(--bl-size-m);--main-color:var(--bl-color-primary);--main-bg-color:var(--bl-color-primary-contrast);position:relative;display:flex;align-items:flex-start;justify-content:space-between;background-color:var(--main-bg-color);color:var(--bl-color-neutral-darker);box-shadow:inset 0 0 0 1px var(--main-color);border-radius:var(--bl-border-radius-s);padding:calc(var(--padding) / 2) var(--padding);padding-right:calc(var(--padding) / 2)}.description{font:var(--bl-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(--bl-size-2xs);flex:20 1 70%;padding:calc(var(--padding) / 2) 0}.icon{padding:calc(var(--padding) / 2) 0;margin-right:var(--bl-size-2xs);color:var(--main-color)}.text-content{display:flex;flex-direction:column}.caption{color:var(--bl-color-neutral-darker);font:var(--bl-font-title-3-medium)}.actions{display:none;flex-wrap:wrap;gap:var(--bl-size-m);padding:calc(var(--padding) / 2) 0}.close{--bl-color-neutral-lightest:transparent}.caption + .description{margin-top:var(--bl-size-2xs)}:host([closed]){display:none}:host([variant="success"]) .alert{--main-color:var(--bl-color-success);--main-bg-color:var(--bl-color-success-contrast)}:host([variant="warning"]) .alert{--main-color:var(--bl-color-warning);--main-bg-color:var(--bl-color-warning-contrast)}:host([variant="danger"]) .alert{--main-color:var(--bl-color-danger);--main-bg-color:var(--bl-color-danger-contrast)}`,f=y;var t=class extends d{constructor(){super(...arguments);this.variant="info";this.closable=!1;this.closed=!1}static get styles(){return[f]}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_fill";case"danger":return"close_fill";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(o=>{var c;if(o.tagName!=="BL-BUTTON"){(c=o.parentNode)==null||c.removeChild(o);return}i.parentElement.style.display="flex";let g=o.slot==="action-secondary"?"secondary":"primary",h={info:"default",warning:"neutral",success:"success",danger:"danger"};o.setAttribute("variant",g),o.setAttribute("kind",h[this.variant]),o.setAttribute("size","medium"),o.removeAttribute("icon")})}render(){let s=this.caption||this._hasAlertCaptionSlot?a`<span class="caption">
            <slot name="caption"> ${this.caption} </slot>
          </span>`:null,i=this._getIcon()?a`<bl-icon class="icon" name=${m(this._getIcon())}></bl-icon>`:null,l=this.closable?a`<bl-button
          class="close"
          label="close"
          kind="neutral"
          icon="close"
          variant="tertiary"
          @click=${this._closeHandler}
        ></bl-button>`:null,o=a`<span class="description">
      <slot> ${this.description} </slot>
    </span>`;return a`
      <div class="alert">
        ${i}
        <div class="wrapper">
          <div class="content">
            <div class="text-content">${s} ${o}</div>
          </div>
          <div class="actions">
            <slot class="action" name="action" @slotchange=${this._initAlertActionSlot}></slot>
            <slot
              class="action-secondary"
              name="action-secondary"
              @slotchange=${this._initAlertActionSlot}
            ></slot>
          </div>
        </div>
        ${l}
      </div>
    `}};r([e({reflect:!0})],t.prototype,"variant",2),r([e()],t.prototype,"description",2),r([e({converter:b()})],t.prototype,"icon",2),r([e({type:Boolean,reflect:!0})],t.prototype,"closable",2),r([e()],t.prototype,"caption",2),r([e({type:Boolean,reflect:!0})],t.prototype,"closed",2),r([v("bl-close")],t.prototype,"onClose",2),t=r([u("bl-alert")],t);export{t as a};
//# sourceMappingURL=chunk-FJQ4VEP3.js.map