@kelvininc/ui-components
Version:
Kelvin UI Components
55 lines (50 loc) • 6.21 kB
JavaScript
import { H as proxyCustomElement, I as H, y as ETagColor, K as h, o as EBadgeType, L as Host } from './p-BP5CxQcH.js';
import { i as isValidLabel } from './p-YzSFobpQ.js';
import { d as defineCustomElement$3 } from './p-CJTppmYq.js';
import { d as defineCustomElement$2 } from './p-DQ7v6WT-.js';
const tagCss = "@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{--tag-content-gap:var(--spacing-xs);--tag-content-padding-x:var(--spacing-md);--tag-content-padding-y:var(--spacing-none)}.tag-container{display:flex;flex-direction:row;align-items:center;gap:var(--tag-content-gap);width:fit-content;max-width:stretch;height:var(--size-xl);box-sizing:border-box;border-radius:var(--radius-md);padding:var(--tag-content-padding-y) var(--tag-content-padding-x);background-color:var(--tag-background-color, var(--_tag-bg));border:1px solid var(--tag-border-color, var(--_tag-border-color))}.tag-container kv-icon{--icon-color:var(--tag-icon-color, var(--_tag-icon));--icon-width:var(--size-md);--icon-height:var(--size-md)}.tag-container .tag-label{font-family:Proxima Nova;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--tag-label-color, var(--_tag-label))}.tag-container kv-badge{--badge-background-color-secondary:var(--tag-badge-background-color, var(--_tag-badge-bg));--badge-text-color-secondary:var(--tag-badge-color, var(--_tag-badge))}.tag-container--color-neutral{--_tag-bg:var(--background-container-tag-neutral-default);--_tag-border-color:var(--border-container-tag-neutral-subtle);--_tag-label:var(--text-container-tag-neutral-default);--_tag-badge:var(--text-container-tag-neutral-default);--_tag-badge-bg:var(--background-container-tag-neutral-subtle);--_tag-icon:var(--icon-container-tag-neutral-soft)}.tag-container--color-brand{--_tag-bg:var(--background-container-tag-brand-default);--_tag-border-color:var(--border-container-tag-brand-subtle);--_tag-label:var(--text-container-tag-brand-default);--_tag-badge:var(--text-container-tag-brand-default);--_tag-badge-bg:var(--background-container-tag-brand-subtle);--_tag-icon:var(--icon-container-tag-brand-soft)}.tag-container--color-purple{--_tag-bg:var(--background-container-tag-accent-default);--_tag-border-color:var(--border-container-tag-accent-subtle);--_tag-label:var(--text-container-tag-accent-default);--_tag-badge:var(--text-container-tag-accent-default);--_tag-badge-bg:var(--background-container-tag-accent-subtle);--_tag-icon:var(--icon-container-tag-accent-soft)}.tag-container--color-green{--_tag-bg:var(--background-container-tag-success-default);--_tag-border-color:var(--border-container-tag-success-default);--_tag-label:var(--text-container-tag-success-default);--_tag-badge:var(--text-container-tag-success-default);--_tag-badge-bg:var(--background-container-tag-success-subtle);--_tag-icon:var(--icon-container-tag-success-soft)}.tag-container--color-yellow{--_tag-bg:var(--background-container-tag-warning-default);--_tag-border-color:var(--border-container-tag-warning-default);--_tag-label:var(--text-container-tag-warning-default);--_tag-badge:var(--text-container-tag-warning-default);--_tag-badge-bg:var(--background-container-tag-warning-subtle);--_tag-icon:var(--icon-container-tag-warning-soft)}.tag-container--color-red{--_tag-bg:var(--background-container-tag-danger-default);--_tag-border-color:var(--border-container-tag-danger-default);--_tag-label:var(--text-container-tag-danger-default);--_tag-badge:var(--text-container-tag-danger-default);--_tag-badge-bg:var(--background-container-tag-danger-subtle);--_tag-icon:var(--icon-container-tag-danger-soft)}.tag-container--color-blue{--_tag-bg:var(--background-container-tag-info-default);--_tag-border-color:var(--border-container-tag-info-default);--_tag-label:var(--text-container-tag-info-default);--_tag-badge:var(--text-container-tag-info-default);--_tag-badge-bg:var(--background-container-tag-info-subtle);--_tag-icon:var(--icon-container-tag-info-soft)}";
const KvTag$1 = /*@__PURE__*/ proxyCustomElement(class KvTag extends H {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
/** (optional) Tag color variant */
this.color = ETagColor.Neutral;
}
render() {
return (h(Host, { key: 'ddefd367080e428867d44988889433b9cf154f88' }, h("div", { key: '8777459b8b1a44789dbd65a94cc49a00c0d8d98e', class: { 'tag-container': true, [`tag-container--color-${this.color}`]: true } }, h("slot", { key: '4e9d589f5a5000c461efdc4c07b245227c39e6dc', name: "left-slot" }, this.icon && h("kv-icon", { key: 'ba3ba8a05424dceb8668736b342196fceebe6ef8', name: this.icon, exportparts: "icon" })), isValidLabel(this.label) && h("div", { key: '34272a8a667f065b54e470e94d23ae5cd4a6f70e', class: "tag-label" }, this.label), h("slot", { key: '447e6616d069fb5fcb4df82fed48eff4e324c240', name: "right-slot" }, isValidLabel(this.badgeLabel) && h("kv-badge", { key: '3f3f43a8dea74f8d97bfb505e9a8251357d00755', type: EBadgeType.Secondary }, this.badgeLabel)))));
}
static get style() { return tagCss; }
}, [257, "kv-tag", {
"label": [513],
"color": [513],
"icon": [513],
"badgeLabel": [513, "badge-label"]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["kv-tag", "kv-badge", "kv-icon"];
components.forEach(tagName => { switch (tagName) {
case "kv-tag":
if (!customElements.get(tagName)) {
customElements.define(tagName, KvTag$1);
}
break;
case "kv-badge":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "kv-icon":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
} });
}
defineCustomElement$1();
const KvTag = KvTag$1;
const defineCustomElement = defineCustomElement$1;
export { KvTag, defineCustomElement };