@kelvininc/ui-components
Version:
Kelvin UI Components
42 lines (38 loc) • 2.83 kB
JavaScript
import { p as proxyCustomElement, H, h } from './p-D6GMjtmE.js';
import { d as defineCustomElement$1 } from './p-BMp30lyC.js';
const illustrationMessageCss = "@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}:host{--image-width:60px;--image-height:auto;--header-color:var(--kv-neutral-2, #e5e5e5);--description-color:var(--kv-neutral-4, #bebebe)}.illustration-message{display:flex;flex-direction:column;justify-content:center;align-items:center}.image{margin-bottom:var(--kv-spacing-3x, 12px);--illustration-width:var(--image-width);--illustration-height:var(--image-height)}.header{color:var(--header-color);text-align:center;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}.description{color:var(--description-color);text-align:center;font-family:var(--kv-primary-font, \"proxima-nova\", sans-serif, \"Arial\");font-size:12px;font-weight:400;font-stretch:normal;font-style:normal;line-height:18px;letter-spacing:normal;text-transform:none;white-space:break-spaces;margin-top:var(--kv-spacing, 4px)}";
const KvIllustrationMessage = /*@__PURE__*/ proxyCustomElement(class KvIllustrationMessage extends H {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
}
render() {
return (h("div", { key: '2769430393c3c0f35ca876a563282059278fa8e6', class: "illustration-message" }, h("kv-illustration", { key: '3dd0de941aae90af94c32c7c3df806a54e69b6bc', name: this.illustration, class: "image", part: "illustration" }), h("div", { key: '87fec4adca889bf9c2056b039fb214a21f55bbde', class: "header", part: "header" }, this.header), this.description && (h("div", { key: 'd9c7958fb1ef327597062ef7e79b1359599a4449', class: "description", part: "description" }, this.description))));
}
static get style() { return illustrationMessageCss; }
}, [1, "kv-illustration-message", {
"illustration": [513],
"header": [513],
"description": [513]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["kv-illustration-message", "kv-illustration"];
components.forEach(tagName => { switch (tagName) {
case "kv-illustration-message":
if (!customElements.get(tagName)) {
customElements.define(tagName, KvIllustrationMessage);
}
break;
case "kv-illustration":
if (!customElements.get(tagName)) {
defineCustomElement$1();
}
break;
} });
}
defineCustomElement();
export { KvIllustrationMessage as K, defineCustomElement as d };