import{AnimateController as t,animate as s}from"@lit-labs/motion";import{LitElement as o,html as e,css as i}from"lit";import{classMap as r}from"lit/directives/class-map.js";import{ifDefined as c}from"lit/directives/if-defined.js";import{iconRemixSpam_2Line as n,iconRemixAlertLine as a,iconRemixCheckboxCircleLine as l,iconRemixInformationLine as d,iconRemixCloseLine as g}from"./assets/cc-remix.icons.js";import{dispatchCustomEvent as u}from"./lib/events.js";import{i18n as h}from"./translation.js";import"./cc-icon.js";class m extends o{static get properties(){return{closeable:{type:Boolean},heading:{type:String},intent:{type:String,reflect:!0},message:{type:String},showProgress:{type:Boolean,attribute:"show-progress"},timeout:{type:Number}}}constructor(){super(),this.closeable=!1,this.heading=null,this.intent="info",this.message=null,this.showProgress=!1,this.timeout=5e3,this._progressAnimateCtrl=new t(this,{defaultOptions:{keyframeOptions:{easing:"linear"},in:[{width:"100%"}]},onComplete:()=>this._dismiss()})}_dismiss(){u(this,"dismiss")}_getIcon(){switch(this.intent){case"info":return d;case"success":return l;case"warning":return a;case"danger":return n}}_getIconAlt(){switch(this.intent){case"info":return h("cc-toast.icon-alt.info");case"success":return h("cc-toast.icon-alt.success");case"warning":return h("cc-toast.icon-alt.warning");case"danger":return h("cc-toast.icon-alt.danger")}}_onCloseButtonClick(){this._dismiss()}_pause(){this._progressAnimateCtrl.isAnimating&&this._progressAnimateCtrl.pause()}_resume(){this._progressAnimateCtrl.isAnimating&&this._progressAnimateCtrl.play()}render(){const t=this.timeout>0?"0":void 0;return e`<div class=toast @mouseenter=${this._pause} @mouseleave=${this._resume} @focus=${this._pause} @blur=${this._resume} tabindex=${c(t)}><div class=icon-wrapper><cc-icon class=icon .icon=${this._getIcon()} a11y-name=${this._getIconAlt()}></cc-icon></div><div class=right><div class=content>${this.heading?e`<div class=heading>${this.heading}</div>`:""} ${this.message?e`<div>${this.message}</div>`:""}</div>${this.closeable?e`<button class=close-button @click=${this._onCloseButtonClick} @focus=${this._pause} @blur=${this._resume} title=${h("cc-toast.close")}><cc-icon .icon=${g} a11y-name=${h("cc-toast.close")}></cc-icon></button>`:""} ${this.timeout>0?e`<div class="${r({invisible:!this.showProgress})} progress-bar"><div class=progress-bar-track ${s({keyframeOptions:{duration:this.timeout}})}></div></div>`:""}</div></div>`}static get styles(){return[i`:host{--padding:0.8em;display:block}.toast{align-items:stretch;background-color:var(--toast-color);border:1px solid var(--toast-color);border-radius:.3em;box-shadow:0 2px 4px rgb(38 38 38 / 25%),0 5px 15px rgb(38 38 38 / 25%);display:flex;overflow:hidden;pointer-events:all}:host([intent=info]){--toast-color:var(--cc-color-bg-primary)}:host([intent=success]){--toast-color:var(--cc-color-bg-success)}:host([intent=warning]){--toast-color:var(--cc-color-bg-warning)}:host([intent=danger]){--toast-color:var(--cc-color-bg-danger)}.icon-wrapper{align-items:center;background-color:var(--toast-color);border-right:1px solid var(--toast-color);display:flex;padding:var(--padding)}.icon{--cc-icon-color:var(--cc-toast-icon-color, #e7e7e7);--cc-icon-size:1.8em}.right{background-color:var(--cc-color-bg-default);display:flex;flex:1 1 auto;justify-content:stretch;position:relative}.content{align-self:center;color:var(--toast-color);display:flex;flex:1 1 auto;flex-direction:column;gap:.5em;justify-content:center;padding:var(--padding)}.content p{margin-block:.5em}.heading{font-weight:700}.close-button{--cc-icon-color:var(--cc-color-text-weak);--cc-icon-size:1.5em;align-self:start;background-color:transparent;border:none;border-radius:var(--cc-border-radius-small,.15em);cursor:pointer;height:auto;margin:.25em;padding:.2em;width:auto}.close-button img{display:block;height:1em;width:1em}.close-button:hover{background-color:var(--cc-color-bg-neutral-hovered)}.close-button:enabled:focus{outline:var(--cc-focus-outline,#000 solid 2px);outline-offset:var(--cc-focus-outline-offset,2px)}.progress-bar{bottom:0;height:.3em;position:absolute;width:100%}.progress-bar-track{background-color:var(--toast-color);height:100%;width:0}.progress-bar.invisible{height:0}`]}}window.customElements.define("cc-toast",m);export{m as CcToast};
//# sourceMappingURL=cc-toast.js.map
