@kelvininc/ui-components
Version:
Kelvin UI Components
1 lines • 6.49 kB
JavaScript
import{r as t,c as a,h as e,H as o}from"./p-D-JVwta2.js";import{E as i,C as r}from"./p-Do0EyoO8.js";import{E as n}from"./p-SVedE_O8.js";import{i as s}from"./p-BA_npyc9.js";import"./p-CiDQ1Z66.js";import"./p-DfPM2t43.js";import"./p-Dkd2PDJ-.js";const c={[i.Info]:{icon:n.Info},[i.Warning]:{icon:n.Warning},[i.Error]:{icon:n.Error},[i.Success]:{icon:n.Success}},l=class{constructor(e){t(this,e),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=c[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=c[t]}handleTimeout(){this.clearTTL(),this.createTTL()}componentWillLoad(){this.createTTL(),this.emitAfterOpen()}disconnectedCallback(){this.clearTTL()}render(){return e(o,{key:"84256fbd5bdf7cc78dbd5a9a1438fcb80c77a924"},e("div",{key:"c526b7cbcbc13e80d52328dc89bf3d560656e1d7",class:{"toaster-container":!0,"animate-fade-in":this.fadeInActive,"animate-fade-out":this.fadeOutActive,"toaster-container--large":!s(this.description),[`toaster-type--${this.type}`]:!0}},e("div",{key:"3327e4ad8cc1540f8614dcc6288b5967230b8abb",class:"toaster-icon"},e("kv-icon",{key:"e2d7a4c8b4f3911af5abff5db73f90d4c93e7a09",name:this.iconType.icon})),e("div",{key:"3f5289ce8d6cbcf08571fcea705e52f48d7df151",class:"message-content"},e("span",{key:"fed4812db3b95f428ac9250cc66c6f946bdf78cd",class:"main-message"},this.header),!s(this.description)&&e("span",{key:"d459148dfab8aa03d11009e195b33a255169d740",class:"secondary-message"},this.description)),e("slot",{key:"717927dc32a767eca2c510139a557239bfc1cd4a"}),this.closable&&e("div",{key:"9e8b93d411e9d1a395208579e42b43bef2cd05be",class:"toaster-close-icon"},e("kv-icon",{key:"605f8c2812fa897adc2862bf21bbe4a59b05acce",name:r.icon,customClass:"icon-16",onClick:this.onCloseClick}))))}static get watchers(){return{type:["updateIconType"],ttl:["handleTimeout"]}}};l.style='@property --rotation{syntax:"<angle>";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}:host{--toaster-large-height:74px;--toaster-small-height:56px;--toaster-width:500px;--toaster-top-space:var(--kv-spacing-4x, 16px);--background-color-default:var(--kv-neutral-6, #3f3f3f);--close-button-focused:var(--kv-neutral-2, #e5e5e5);--toaster-icons-width:24px;--toaster-icons-height:24px}kv-icon{--icon-width:var(--toaster-icons-width);--icon-height:var(--toaster-icons-height);margin-right:var(--kv-spacing-4x, 16px);object-fit:contain}.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;z-index:1000;padding:var(--kv-spacing-4x, 16px);border-left:solid 2px var(--kv-neutral-6, #3f3f3f);background-color:var(--background-color-default);box-sizing:border-box;overflow:hidden}.toaster-container.toaster-type--info{border-color:var(--kv-info, #276ef1)}.toaster-container.toaster-type--info .toaster-icon kv-icon{--icon-color:var(--kv-info, #276ef1);--icon-background-color:var(--kv-neutral-0, #fff)}.toaster-container.toaster-type--warning{border-color:var(--kv-warning, #ffc043)}.toaster-container.toaster-type--warning .toaster-icon kv-icon{--icon-color:var(--kv-warning, #ffc043)}.toaster-container.toaster-type--error{border-color:var(--kv-error, #e11900)}.toaster-container.toaster-type--error .toaster-icon kv-icon{--icon-color:var(--kv-error, #e11900);--icon-background-color:var(--kv-neutral-0, #fff)}.toaster-container.toaster-type--success{border-color:var(--kv-success, #05a357)}.toaster-container.toaster-type--success .toaster-icon kv-icon{--icon-color:var(--kv-success, #05a357);--icon-background-color:var(--kv-neutral-0, #fff)}.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}.toaster-container .message-content .main-message{font-family:var(--kv-primary-font, "proxima-nova", sans-serif, "Arial");font-size:14px;font-weight:600;font-stretch:normal;font-style:normal;line-height:21px;letter-spacing:normal;text-transform:none;color:var(--kv-neutral-2, #e5e5e5)}.toaster-container .message-content .secondary-message{font-family:var(--kv-primary-font, "proxima-nova", sans-serif, "Arial");font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;line-height:21px;letter-spacing:normal;text-transform:none;margin-top:var(--kv-spacing, 4px);color:var(--kv-neutral-4, #bebebe)}.toaster-container .toaster-close-icon{display:flex;align-items:center;margin-left:var(--kv-spacing-4x, 16px)}.toaster-container .toaster-close-icon kv-icon{margin:0;user-select:none;cursor:pointer}.toaster-container .toaster-close-icon kv-icon:hover{--icon-color:var(--close-button-focused)}@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{l as kv_toaster}