@kelvininc/ui-components
Version:
Kelvin UI Components
39 lines (35 loc) • 2.69 kB
JavaScript
import { H as proxyCustomElement, I as H, o as EBadgeType, K as h, L as Host } from './p-BP5CxQcH.js';
const badgeCss = "@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{--badge-min-width:unset;--badge-max-width:fit-content;--badge-height:var(--size-md);--badge-width:unset;--badge-background-color-primary:var(--background-container-accent-purple-default);--badge-text-color-primary:var(--text-container-accent-purple-default);--badge-background-color-secondary:var(--background-interactive-counter-default);--badge-text-color-secondary:var(--text-interactive-counter-default)}.badge{font-family:Proxima Nova;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0;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(--spacing-xs);line-height:unset;border-radius:var(--radius-full)}.badge--type-primary{color:var(--badge-text-color-primary);background-color:var(--badge-background-color-primary)}.badge--type-secondary{color:var(--badge-text-color-secondary);background-color:var(--badge-background-color-secondary)}.badge.disabled{color:var(--text-interactive-counter-disabled);background-color:var(--background-interactive-counter-disabled)}";
const KvBadge = /*@__PURE__*/ proxyCustomElement(class KvBadge extends H {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
/** (optional) Defines the badge type.*/
this.type = EBadgeType.Primary;
/** (optional) If `true` the badge is in disabled state. */
this.disabled = false;
}
render() {
return (h(Host, { key: '328a5d250cedc4b7e3203350524c619178929f73' }, h("span", { key: 'b8bebd22e6e57faf92db60bba1af4a0e20f4fe9d', class: { badge: true, [`badge--type-${this.type}`]: true, disabled: this.disabled }, part: "badge" }, h("slot", { key: 'b294395e58d978304c6a6964589fceccdd9bfa39' }))));
}
static get style() { return badgeCss; }
}, [257, "kv-badge", {
"type": [513],
"disabled": [516]
}]);
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 };