@kelvininc/ui-components
Version:
Kelvin UI Components
97 lines (92 loc) • 8.23 kB
JavaScript
import { r as registerInstance, c as createEvent, h, H as Host } from './index-D-JVwta2.js';
import { E as EToasterType, C as CLOSE_ICON } from './toaster.types-vhHhaF4Q.js';
import { E as EIconName } from './icon.types-SVedE_O8.js';
import { i as isEmpty } from './isEmpty-BAGi1PqI.js';
import './_Set-B7Zkvu4X.js';
import './_Map-B6Xd0L4K.js';
import './isObject-Dkd2PDJ-.js';
const TYPE_ICONS = {
[EToasterType.Info]: { icon: EIconName.Info },
[EToasterType.Warning]: { icon: EIconName.Warning },
[EToasterType.Error]: { icon: EIconName.Error },
[EToasterType.Success]: { icon: EIconName.Success }
};
const TOASTER_ANIMATION_DURATION = 500;
const toasterCss = "@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))}}";
const KvToaster = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.clickCloseButton = createEvent(this, "clickCloseButton", 7);
this.ttlExpired = createEvent(this, "ttlExpired", 7);
this.afterOpen = createEvent(this, "afterOpen", 7);
this.afterClose = createEvent(this, "afterClose", 7);
/** @inheritdoc */
this.closable = true;
/** Fade in animation state */
this.fadeInActive = false;
/** Fade out animation state */
this.fadeOutActive = false;
/** Icon of the toaster */
this.iconType = TYPE_ICONS[this.type];
this.clearTTL = () => {
window.clearTimeout(this.timeoutID);
};
this.emitAfterClose = () => {
this.fadeInActive = false;
this.fadeOutActive = true;
window.setTimeout(this.afterClose.emit.bind(this), TOASTER_ANIMATION_DURATION);
};
this.emitAfterOpen = () => {
this.fadeOutActive = false;
this.fadeInActive = true;
window.setTimeout(this.afterOpen.emit.bind(this), TOASTER_ANIMATION_DURATION);
};
this.createTTL = () => {
if (this.ttl > 0) {
this.timeoutID = window.setTimeout(() => {
this.ttlExpired.emit();
this.closeToaster();
}, this.ttl);
}
};
this.closeToaster = () => {
this.clearTTL();
this.emitAfterClose();
};
this.onCloseClick = (event) => {
this.closeToaster();
this.clickCloseButton.emit(event);
};
}
/** Case the type changes, the toaster updates the icon displayed */
updateIconType(value) {
this.iconType = TYPE_ICONS[value];
}
/** Case the ttl changes, the toaster should clear the current setTimeout */
handleTimeout() {
this.clearTTL();
this.createTTL();
}
componentWillLoad() {
this.createTTL();
this.emitAfterOpen();
}
disconnectedCallback() {
this.clearTTL();
}
render() {
return (h(Host, { key: '84256fbd5bdf7cc78dbd5a9a1438fcb80c77a924' }, h("div", { key: 'c526b7cbcbc13e80d52328dc89bf3d560656e1d7', class: {
'toaster-container': true,
'animate-fade-in': this.fadeInActive,
'animate-fade-out': this.fadeOutActive,
[`toaster-container--large`]: !isEmpty(this.description),
[`toaster-type--${this.type}`]: true
} }, h("div", { key: '3327e4ad8cc1540f8614dcc6288b5967230b8abb', class: "toaster-icon" }, h("kv-icon", { key: 'e2d7a4c8b4f3911af5abff5db73f90d4c93e7a09', name: this.iconType.icon })), h("div", { key: '3f5289ce8d6cbcf08571fcea705e52f48d7df151', class: "message-content" }, h("span", { key: 'fed4812db3b95f428ac9250cc66c6f946bdf78cd', class: "main-message" }, this.header), !isEmpty(this.description) && h("span", { key: 'd459148dfab8aa03d11009e195b33a255169d740', class: "secondary-message" }, this.description)), h("slot", { key: '717927dc32a767eca2c510139a557239bfc1cd4a' }), this.closable && (h("div", { key: '9e8b93d411e9d1a395208579e42b43bef2cd05be', class: "toaster-close-icon" }, h("kv-icon", { key: '605f8c2812fa897adc2862bf21bbe4a59b05acce', name: CLOSE_ICON.icon, customClass: "icon-16", onClick: this.onCloseClick }))))));
}
static get watchers() { return {
"type": ["updateIconType"],
"ttl": ["handleTimeout"]
}; }
};
KvToaster.style = toasterCss;
export { KvToaster as kv_toaster };