@kelvininc/ui-components/components/p-BjJhwPoi.js

Kelvin UI Components

import { p as proxyCustomElement, H, h, e as Host } from './p-D6GMjtmE.js';
import { a as isValidLabel } from './p-BVsEG3aJ.js';
import { a as EComponentSize } from './p-BRgmvbuh.js';
import './p-DBphUUgi.js';
import './p-BcMhjKoS.js';
import './p-BQDwJ0uF.js';

const tagCss = "@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}:host{--tag-background-color:var(--kv-neutral-6, #3f3f3f);--tag-border-color:var(--kv-neutral-6, #3f3f3f);--tag-label-color:var(--kv-neutral-2, #e5e5e5);--tag-content-gap:var(--kv-spacing, 4px);--tag-content-padding:2px var(--kv-spacing, 4px)}.tag-container{display:flex;flex-direction:row;align-items:center;gap:var(--tag-content-gap);width:fit-content;max-height:24px;border-radius:4px;padding:var(--tag-content-padding);border:1px solid var(--tag-border-color);background-color:var(--tag-background-color)}.tag-container .tag-label{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;letter-spacing:1.5px;text-transform:uppercase;color:var(--tag-label-color)}.tag-container--size-small{max-height:20px}.tag-container--size-small .tag-label{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:1.5px;text-transform:uppercase}";

const KvTag = /*@__PURE__*/ proxyCustomElement(class KvTag extends H {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        /** (optional) Sets the size of tag */
        this.size = EComponentSize.Large;
    }
    render() {
        return (h(Host, { key: 'e84d6c0289f96d95c7ca6f7545ad140ebb4edcda' }, h("div", { key: '15bace72e865977719b45bb6c360800f601fa7b8', class: { 'tag-container': true, [`tag-container--size-${this.size}`]: true } }, h("slot", { key: '92e076f6a3a178bb699f74884ea36ea6a4490c4b', name: "left-slot" }), isValidLabel(this.label) && h("div", { key: '949a9623220f293292ebb0f33e33996b02829269', class: "tag-label" }, this.label))));
    }
    static get style() { return tagCss; }
}, [1, "kv-tag", {
        "label": [513],
        "size": [513]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["kv-tag"];
    components.forEach(tagName => { switch (tagName) {
        case "kv-tag":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, KvTag);
            }
            break;
    } });
}
defineCustomElement();

export { KvTag as K, defineCustomElement as d };