UNPKG

@trendyol/baklava

Version:

Trendyol Baklava Design System

32 lines (31 loc) 4.3 kB
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