@freshworks/crayons
Version:
Crayons Web Components library
1 lines • 3.17 kB
JavaScript
import{r as e,c as s,h as t,e as i,i as a}from"./p-c5706edf.js";const o={error:"alert",warning:"info",info:"info",success:"success"},r={error:"#e43538",warning:"#c7502f",info:"#264966",success:"#00795b"};let l=class{constructor(t){e(this,t),this.fwShow=s(this,"fwShow",7),this.fwHide=s(this,"fwHide",7),this.closable=!0,this.type="info",this.duration=1/0,this.open=!0}startAutoHide(){clearTimeout(this.autoHideTimeout),this.open&&this.duration<1/0&&(this.autoHideTimeout=setTimeout((()=>this.hide()),this.duration))}handleOpen(){this.open?(this.host.style.display="flex",this.fwShow.emit(),this.duration<1/0&&this.startAutoHide()):(clearTimeout(this.autoHideTimeout),this.host.style.display="none",this.fwHide.emit())}handleDurationChange(){this.startAutoHide()}async show(){this.open||(this.open=!0)}async hide(){this.open&&(this.open=!1)}connectedCallback(){this.host.style.display=this.open?"flex":"none"}disconnectedCallback(){clearTimeout(this.autoHideTimeout)}handleKeyUp(e){"Enter"===e.code&&(e.preventDefault(),this.hide())}handleClose(){this.hide()}render(){return t(i,{role:"alert","aria-hidden":this.open?"false":"true"},t("div",{class:"alert alert--"+this.type},t("span",{class:"alert__icon"},t("fw-icon",{name:o[this.type],color:r[this.type]})),t("span",{class:"alert__message"},t("slot",null)),this.closable&&t("span",{class:"alert__close",role:"button",tabindex:"0",onKeyUp:e=>this.handleKeyUp(e),onClick:()=>this.handleClose()},t("fw-icon",{name:"cross",color:"#12344d",size:8,library:"system"}))))}get host(){return a(this)}static get watchers(){return{open:["handleOpen"],duration:["handleDurationChange"]}}};l.style=':host{font-family:var(--fw-font-family, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-box-sizing:border-box;box-sizing:border-box}:host{margin:0}.alert{position:relative;display:-ms-flexbox;display:flex;width:100%;border-radius:4px;-webkit-box-sizing:border-box;box-sizing:border-box;margin:inherit;padding:8px 6px;background-color:transparent}.alert--success{background:#e0f5f1;border:1px solid #b4e5da}.alert--success .alert__message{border-left:1px solid #b4e5da}.alert--warning{background:#fef1e1;border:1px solid #fedcb3}.alert--warning .alert__message{border-left:1px solid #fedcb3}.alert--info{background:#e5f2fd;border:1px solid #bbdcfe}.alert--info .alert__message{border-left:1px solid #bbdcfe}.alert--error{border:1px solid #ffd0d6;background:#ffecf0}.alert--error .alert__message{border-left:1px solid #ffd0d6}.alert__icon{-ms-flex:0 0 auto;flex:0 0 auto;display:-ms-flexbox;display:flex;-ms-flex-item-align:start;align-self:flex-start;margin-right:8px}.alert__message{padding-left:12px;-ms-flex:1 1 auto;flex:1 1 auto;color:#12344d;font-size:14px;font-weight:400;line-height:20px}.alert__message ::slotted(a){font-weight:500;color:#365dbe;text-decoration:none}.alert__close{-ms-flex:0 0 auto;flex:0 0 auto;display:-ms-flexbox;display:flex;-ms-flex-item-align:start;align-self:flex-start;padding-right:6px;padding-left:12px;cursor:pointer}';export{l as fw_inline_message}