@kelvininc/ui-components
Version:
Kelvin UI Components
1 lines • 6.06 kB
JavaScript
import{r as t,c as a,h as o,H as e}from"./p-WTwLUJcM.js";import{o as i,y as r,j as n,c as s}from"./p-COrzvkrr.js";import{i as c}from"./p-GpUjqmUL.js";import"./p-Dkd2PDJ-.js";const l={[r.Info]:{icon:i.Info},[r.Warning]:{icon:i.Warning},[r.Error]:{icon:i.Error},[r.Success]:{icon:i.Success}},d=class{constructor(o){t(this,o),this.clickCloseButton=a(this,"clickCloseButton",7),this.ttlExpired=a(this,"ttlExpired",7),this.afterOpen=a(this,"afterOpen",7),this.afterClose=a(this,"afterClose",7),this.closable=!0,this.fadeInActive=!1,this.fadeOutActive=!1,this.iconType=l[this.type],this.clearTTL=()=>{window.clearTimeout(this.timeoutID)},this.emitAfterClose=()=>{this.fadeInActive=!1,this.fadeOutActive=!0,window.setTimeout(this.afterClose.emit.bind(this),500)},this.emitAfterOpen=()=>{this.fadeOutActive=!1,this.fadeInActive=!0,window.setTimeout(this.afterOpen.emit.bind(this),500)},this.createTTL=()=>{this.ttl>0&&(this.timeoutID=window.setTimeout((()=>{this.ttlExpired.emit(),this.closeToaster()}),this.ttl))},this.closeToaster=()=>{this.clearTTL(),this.emitAfterClose()},this.onCloseClick=t=>{this.closeToaster(),this.clickCloseButton.emit(t)}}updateIconType(t){this.iconType=l[t]}handleTimeout(){this.clearTTL(),this.createTTL()}componentWillLoad(){this.createTTL(),this.emitAfterOpen()}disconnectedCallback(){this.clearTTL()}render(){return o(e,{key:"cd9ff6736c553e28a70700964051e30d4d1b22c5"},o("div",{key:"cf0c9b49869e64b549923a52c45b469deb2da4bd",class:{"toaster-container":!0,"animate-fade-in":this.fadeInActive,"animate-fade-out":this.fadeOutActive,"toaster-container--large":!c(this.description),[`toaster-type--${this.type}`]:!0}},o("div",{key:"78b69adbf78aa6f19183c740df29f5e3b701224d",class:"toaster-icon"},o("kv-icon",{key:"cfd60da0d019bc9683526e5dc9e325787ce3187b",name:this.iconType.icon})),o("div",{key:"928e6c2faf53b6b5cd06dbba77d0266a12c1e290",class:"message-content"},o("span",{key:"f277cba1b27a2f72456af1bf0aea79c47c6af11a",class:"main-message"},this.header),!c(this.description)&&o("span",{key:"9f3d1974028c8cfc214eae8f93e64eb8da072e93",class:"secondary-message"},this.description)),o("slot",{key:"8f7fc72a8d91426f4ac0aa349c853d1a19882809"}),this.closable&&o("kv-action-button-text",{key:"18a6d42850abe4c901f96c3029abee8ca2f30877",text:"",size:s.Small,type:n.Text,icon:i.Close,onClick:this.onCloseClick})))}static get watchers(){return{type:["updateIconType"],ttl:["handleTimeout"]}}};d.style='@property --rotation{syntax:"<angle>";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}kv-dropdown-base:not(.hydrated)>[slot=list]{display:none}:host{--toaster-large-height:76px;--toaster-small-height:56px;--toaster-width:360px;--toaster-top-space:var(--spacing-2xl);--background-color-default:var(--toast-background-default);--toaster-icon-width:var(--toast-icon-size-large);--toaster-icon-height:var(--toast-icon-size-large)}.toaster-container{position:absolute;top:var(--toaster-top-space);left:0;right:0;margin:0 auto;width:var(--toaster-width);min-height:var(--toaster-small-height);display:flex;align-items:center;justify-content:space-between;gap:var(--toast-gap-vertical);z-index:1000;padding:var(--toast-padding-y-default) var(--toast-padding-x-default);border-left:solid var(--toast-border-thickness-default) var(--background-color-default);background-color:var(--background-color-default);box-sizing:border-box;overflow:hidden}.toaster-container .toaster-icon kv-icon{--icon-width:var(--toaster-icon-width);--icon-height:var(--toaster-icon-height)}.toaster-container.toaster-type--info{border-color:var(--toast-border-color-info)}.toaster-container.toaster-type--info .toaster-icon kv-icon{--icon-color:var(--toast-icon-color-info);--icon-background-color:var(--icon-container-neutral-inverse)}.toaster-container.toaster-type--warning{border-color:var(--toast-border-color-warning)}.toaster-container.toaster-type--warning .toaster-icon kv-icon{--icon-color:var(--toast-icon-color-warning)}.toaster-container.toaster-type--error{border-color:var(--toast-border-color-error)}.toaster-container.toaster-type--error .toaster-icon kv-icon{--icon-color:var(--toast-icon-color-error);--icon-background-color:var(--icon-container-neutral-inverse)}.toaster-container.toaster-type--success{border-color:var(--toast-border-color-success)}.toaster-container.toaster-type--success .toaster-icon kv-icon{--icon-color:var(--toast-icon-color-success);--icon-background-color:var(--icon-container-neutral-inverse)}.toaster-container.animate-fade-in{animation-duration:0.5s;animation-name:animate-fade-in-small;animation-fill-mode:backwards}.toaster-container.animate-fade-out{animation-duration:0.5s;animation-name:animate-fade-out-small;animation-fill-mode:forwards}.toaster-container.toaster-container--large{min-height:var(--toaster-large-height)}.toaster-container.toaster-container--large.animate-fade-in{animation-name:animate-fade-in-large}.toaster-container.toaster-container--large.animate-fade-out{animation-name:animate-fade-out-large}.toaster-container .toaster-icon{display:flex;align-items:center}.toaster-container .message-content{flex-grow:1;display:flex;flex-direction:column;gap:var(--toast-gap-horizontal)}.toaster-container .message-content .main-message{font-family:Proxima Nova;font-weight:600;font-size:14px;line-height:20px;letter-spacing:0;color:var(--toast-main-message-default)}.toaster-container .message-content .secondary-message{font-family:Proxima Nova;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0;color:var(--toast-secondary-message-default)}@keyframes animate-fade-in-large{from{opacity:0;margin-top:calc(-1 * var(--toaster-large-height))}to{opacity:1;margin-top:0}}@keyframes animate-fade-out-large{from{opacity:1;margin-top:0}to{opacity:0;margin-top:calc(-1 * var(--toaster-large-height))}}@keyframes animate-fade-in-small{from{opacity:0;margin-top:calc(-1 * var(--toaster-small-height))}to{opacity:1;margin-top:0}}@keyframes animate-fade-out-small{from{opacity:1;margin-top:0}to{opacity:0;margin-top:calc(-1 * var(--toaster-small-height))}}';export{d as kv_toaster}