@kelvininc/ui-components
Version:
Kelvin UI Components
66 lines (60 loc) • 4.58 kB
JavaScript
import { p as proxyCustomElement, H, h, e as Host } from './p-D6GMjtmE.js';
import { b as EIconName, k as EAlertType } from './p-DBphUUgi.js';
import { a as EComponentSize } from './p-BRgmvbuh.js';
import './p-BcMhjKoS.js';
import './p-BQDwJ0uF.js';
import { d as defineCustomElement$2 } from './p-B41PGLQm.js';
const ALERT_ICON_NAMES = {
[EAlertType.Info]: EIconName.Error,
[EAlertType.Error]: EIconName.Error,
[EAlertType.Success]: EIconName.Success,
[EAlertType.Warning]: EIconName.Warning
};
const alertCss = "@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}.alert-container{background-color:#fff}.alert{display:flex;padding:var(--kv-spacing-4x, 16px);justify-content:space-between;align-items:center}.alert--type-info{background-color:rgba(var(--kv-info-light-rgb, 198, 218, 255), 0.4)}.alert--type-info kv-icon{--icon-color:var(--kv-info, #276ef1)}.alert--type-error{background-color:rgba(var(--kv-error-light-rgb, 249, 209, 204), 0.4)}.alert--type-error kv-icon{--icon-color:var(--kv-error, #e11900)}.alert--type-success{background-color:rgba(var(--kv-success-light-rgb, 223, 247, 230), 0.4)}.alert--type-success kv-icon{--icon-color:var(--kv-success, #05a357)}.alert--type-warning{background-color:rgba(var(--kv-warning-light-rgb, 255, 227, 172), 0.4)}.alert--type-warning kv-icon{--icon-color:var(--kv-warning, #ffc043)}.alert .information{display:flex;align-items:center}.alert .information kv-icon{--icon-height:24px;--icon-width:24px}.alert .information .icon{margin-right:var(--kv-spacing-3x, 12px)}.alert .information .title{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-9, #121212)}.alert .information .description{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;color:var(--kv-neutral-6, #3f3f3f);margin-top:var(--kv-spacing, 4px)}.alert--size-small{flex-direction:column;align-items:flex-start}";
const KvAlert$1 = /*@__PURE__*/ proxyCustomElement(class KvAlert extends H {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
/** @inheritdoc */
this.size = EComponentSize.Large;
/** @inheritdoc */
this.showIcon = true;
}
render() {
return (h(Host, { key: '9beb6ad2e18eb3461e82a69172a32161c8e59ce3' }, h("div", { key: 'da22f882860cc7b7d48cd52b4ac2e594f7cd7228', class: "alert-container" }, h("div", { key: '32cff6ba6efe2dd4f5d6904ad744498dfec3f853', part: "container", class: {
'alert': true,
[`alert--type-${this.type}`]: true,
'alert--size-small': this.size === EComponentSize.Small
} }, h("div", { key: 'dfd7833877925992bde1851262a6dffa7c8476c6', class: "information" }, this.showIcon && h("kv-icon", { key: '8cf4eaed3b04962519bcfe9e8663efde7ad67402', name: ALERT_ICON_NAMES[this.type], class: "icon" }), h("div", { key: '23aaea7b6a924cb81635a9c914b4c169bce877a5', class: "text-container" }, h("div", { key: '7c7afb49cb49cb44f0ee00149d2c2089da423f4e', class: "title" }, this.label), h("slot", { key: '72d42bec31a02f6c24a096ef68d4001d5780d5cd', name: "description" }, this.description && h("div", { key: '34980a019ffbb65a8ac07ce02b331c72c0353050', class: "description" }, this.description)))), h("slot", { key: '31d7343a44dd75dfed32f9b57f846e5f16109b99', name: "actions" })))));
}
static get style() { return alertCss; }
}, [1, "kv-alert", {
"type": [513],
"size": [513],
"showIcon": [516, "show-icon"],
"label": [513],
"description": [513]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["kv-alert", "kv-icon"];
components.forEach(tagName => { switch (tagName) {
case "kv-alert":
if (!customElements.get(tagName)) {
customElements.define(tagName, KvAlert$1);
}
break;
case "kv-icon":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
} });
}
defineCustomElement$1();
const KvAlert = KvAlert$1;
const defineCustomElement = defineCustomElement$1;
export { KvAlert, defineCustomElement };