@kelvininc/ui-components/dist/esm/kv-tag.entry.js

Kelvin UI Components

import { r as registerInstance, h, H as Host } from './index-D-JVwta2.js';
import { a as isValidLabel } from './string.helper-BMAMF_sW.js';
import { a as EComponentSize } from './components-DzZLIMy0.js';
import './lib-config-DwRzddFC.js';
import './action-button.types-DVds6a5Z.js';
import './absolute-time-picker-dropdown.types-CojoW2Y2.js';
import './icon.types-SVedE_O8.js';
import './summary-card.types-BcMhjKoS.js';
import './toaster.types-vhHhaF4Q.js';
import './tree-item.types-CBuzk8fR.js';
import './tag-alarm.types-DHk26cGe.js';
import './wizard.types-7ioMFMb5.js';
import './isEmpty-BAGi1PqI.js';
import './_Set-B7Zkvu4X.js';
import './_Map-B6Xd0L4K.js';
import './isObject-Dkd2PDJ-.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 = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        /** (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))));
    }
};
KvTag.style = tagCss;

export { KvTag as kv_tag };