@kelvininc/ui-components
Version:
Kelvin UI Components
42 lines (37 loc) • 6.18 kB
JavaScript
import { p as proxyCustomElement, H, h, e as Host } from './p-D6GMjtmE.js';
import { E as EBadgeState } from './p-BQDwJ0uF.js';
const badgeLightCss = "@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}:host{--badge-min-width:16px;--badge-max-width:fit-content;--badge-height:16px;--badge-width:unset}.badge{font-family:var(--kv-primary-font, \"proxima-nova\", sans-serif, \"Arial\");font-size:10px;font-weight:400;font-stretch:normal;font-style:normal;line-height:15px;letter-spacing:normal;text-transform:none;display:flex;align-items:center;justify-content:center;min-width:var(--badge-min-width);max-width:var(--badge-max-width);height:var(--badge-height);width:var(--badge-width);padding:0 var(--kv-spacing, 4px);line-height:var(--badge-height);border-radius:8px}.badge--state-none{color:var(--badge-text-color-none);background-color:var(--badge-background-color-none)}.badge--state-info{color:var(--badge-text-color-info);background-color:var(--badge-background-color-info)}.badge--state-warning{color:var(--badge-text-color-warning);background-color:var(--badge-background-color-warning)}.badge--state-error{color:var(--badge-text-color-error);background-color:var(--badge-background-color-error)}.badge--state-success{color:var(--badge-text-color-success);background-color:var(--badge-background-color-success)}@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}:host{--badge-min-width:16px;--badge-max-width:fit-content;--badge-height:16px;--badge-width:unset}.badge{font-family:var(--kv-primary-font, \"proxima-nova\", sans-serif, \"Arial\");font-size:10px;font-weight:400;font-stretch:normal;font-style:normal;line-height:15px;letter-spacing:normal;text-transform:none;display:flex;align-items:center;justify-content:center;min-width:var(--badge-min-width);max-width:var(--badge-max-width);height:var(--badge-height);width:var(--badge-width);padding:0 var(--kv-spacing, 4px);line-height:var(--badge-height);border-radius:8px}.badge--state-none{color:var(--badge-text-color-none);background-color:var(--badge-background-color-none)}.badge--state-info{color:var(--badge-text-color-info);background-color:var(--badge-background-color-info)}.badge--state-warning{color:var(--badge-text-color-warning);background-color:var(--badge-background-color-warning)}.badge--state-error{color:var(--badge-text-color-error);background-color:var(--badge-background-color-error)}.badge--state-success{color:var(--badge-text-color-success);background-color:var(--badge-background-color-success)}:host{--badge-background-color-none:var(--kv-neutral-6, #3f3f3f);--badge-text-color-none:var(--kv-neutral-2, #e5e5e5);--badge-background-color-info:var(--kv-secondary-5, #8358fe);--badge-text-color-info:var(--kv-neutral-2, #e5e5e5);--badge-background-color-warning:var(--kv-warning, #ffc043);--badge-text-color-warning:var(--kv-neutral-0, #fff);--badge-background-color-error:var(--kv-error, #e11900);--badge-text-color-error:var(--kv-neutral-0, #fff);--badge-background-color-success:var(--kv-success, #05a357);--badge-text-color-success:var(--kv-neutral-0, #fff)}";
const badgeNightCss = "@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}:host{--badge-min-width:16px;--badge-max-width:fit-content;--badge-height:16px;--badge-width:unset}.badge{font-family:var(--kv-primary-font, \"proxima-nova\", sans-serif, \"Arial\");font-size:10px;font-weight:400;font-stretch:normal;font-style:normal;line-height:15px;letter-spacing:normal;text-transform:none;display:flex;align-items:center;justify-content:center;min-width:var(--badge-min-width);max-width:var(--badge-max-width);height:var(--badge-height);width:var(--badge-width);padding:0 var(--kv-spacing, 4px);line-height:var(--badge-height);border-radius:8px}.badge--state-none{color:var(--badge-text-color-none);background-color:var(--badge-background-color-none)}.badge--state-info{color:var(--badge-text-color-info);background-color:var(--badge-background-color-info)}.badge--state-warning{color:var(--badge-text-color-warning);background-color:var(--badge-background-color-warning)}.badge--state-error{color:var(--badge-text-color-error);background-color:var(--badge-background-color-error)}.badge--state-success{color:var(--badge-text-color-success);background-color:var(--badge-background-color-success)}:host{--badge-background-color-none:var(--kv-neutral-6, #3f3f3f);--badge-text-color-none:var(--kv-neutral-2, #e5e5e5);--badge-background-color-info:var(--kv-secondary-5, #8358fe);--badge-text-color-info:var(--kv-neutral-2, #e5e5e5);--badge-background-color-warning:var(--kv-warning, #ffc043);--badge-text-color-warning:var(--kv-neutral-0, #fff);--badge-background-color-error:var(--kv-error, #e11900);--badge-text-color-error:var(--kv-neutral-0, #fff);--badge-background-color-success:var(--kv-success, #05a357);--badge-text-color-success:var(--kv-neutral-0, #fff)}";
const KvBadge = /*@__PURE__*/ proxyCustomElement(class KvBadge extends H {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
/** (optional) Defines the badge state.*/
this.state = EBadgeState.None;
}
render() {
return (h(Host, { key: 'de71abce325ae677cf19e0d4155386eacbbc4a59' }, h("span", { key: '3da24a667078bb7358a5fcf0c55c564c955e1dc2', class: `badge badge--state-${this.state}`, part: "badge" }, h("slot", { key: '2fecfb13d5d4a2b88d41dc4b9c97f4b4b45f0baf' }))));
}
static get style() { return {
light: badgeLightCss,
night: badgeNightCss
}; }
}, [33, "kv-badge", {
"state": [513]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["kv-badge"];
components.forEach(tagName => { switch (tagName) {
case "kv-badge":
if (!customElements.get(tagName)) {
customElements.define(tagName, KvBadge);
}
break;
} });
}
defineCustomElement();
export { KvBadge as K, defineCustomElement as d };