@kelvininc/ui-components
Version:
Kelvin UI Components
142 lines (136 loc) • 9.41 kB
JavaScript
import { t as EIconName, F as EToasterType, H as proxyCustomElement, I as H, J as createEvent, K as h, m as EActionButtonType, e as EComponentSize, L as Host } from './p-BP5CxQcH.js';
import { d as defineCustomElement$4 } from './p-0XA6IHyr.js';
import { d as defineCustomElement$3 } from './p-DviRLduP.js';
import { d as defineCustomElement$2 } from './p-DQ7v6WT-.js';
import { i as isEmpty } from './p-BZNGlO8m.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}}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))}}";
const KvToaster$1 = /*@__PURE__*/ proxyCustomElement(class KvToaster extends H {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
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: 'cd9ff6736c553e28a70700964051e30d4d1b22c5' }, h("div", { key: 'cf0c9b49869e64b549923a52c45b469deb2da4bd', 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: '78b69adbf78aa6f19183c740df29f5e3b701224d', class: "toaster-icon" }, h("kv-icon", { key: 'cfd60da0d019bc9683526e5dc9e325787ce3187b', name: this.iconType.icon })), h("div", { key: '928e6c2faf53b6b5cd06dbba77d0266a12c1e290', class: "message-content" }, h("span", { key: 'f277cba1b27a2f72456af1bf0aea79c47c6af11a', class: "main-message" }, this.header), !isEmpty(this.description) && h("span", { key: '9f3d1974028c8cfc214eae8f93e64eb8da072e93', class: "secondary-message" }, this.description)), h("slot", { key: '8f7fc72a8d91426f4ac0aa349c853d1a19882809' }), this.closable && (h("kv-action-button-text", { key: '18a6d42850abe4c901f96c3029abee8ca2f30877', text: "", size: EComponentSize.Small, type: EActionButtonType.Text, icon: EIconName.Close, onClick: this.onCloseClick })))));
}
static get watchers() { return {
"type": ["updateIconType"],
"ttl": ["handleTimeout"]
}; }
static get style() { return toasterCss; }
}, [257, "kv-toaster", {
"header": [513],
"description": [513],
"type": [513],
"ttl": [514],
"closable": [516],
"timeoutID": [32],
"fadeInActive": [32],
"fadeOutActive": [32],
"iconType": [32]
}, undefined, {
"type": ["updateIconType"],
"ttl": ["handleTimeout"]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["kv-toaster", "kv-action-button", "kv-action-button-text", "kv-icon"];
components.forEach(tagName => { switch (tagName) {
case "kv-toaster":
if (!customElements.get(tagName)) {
customElements.define(tagName, KvToaster$1);
}
break;
case "kv-action-button":
if (!customElements.get(tagName)) {
defineCustomElement$4();
}
break;
case "kv-action-button-text":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "kv-icon":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
} });
}
defineCustomElement$1();
const KvToaster = KvToaster$1;
const defineCustomElement = defineCustomElement$1;
export { KvToaster, defineCustomElement };