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

Kelvin UI Components

'use strict';

var index = require('./index-DpuMIXDY.js');
var string_helper = require('./string.helper-B1KQeZk_.js');
var components = require('./components-D2lyDQ_a.js');
require('./lib-config-QLtHwxiM.js');
require('./action-button.types-BYOe6st0.js');
require('./absolute-time-picker-dropdown.types-mPwO9zQk.js');
require('./icon.types-B8lvUrX_.js');
require('./summary-card.types-W26sTdH1.js');
require('./toaster.types-DlSCye8T.js');
require('./tree-item.types-C2yRoORC.js');
require('./tag-alarm.types-BeZw-7PT.js');
require('./wizard.types-DTbE-B6d.js');
require('./isEmpty-C_HQvGy-.js');
require('./_Set-BIUoGFN6.js');
require('./_Map-DiT24PAz.js');
require('./isObject-COPdF2vE.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) {
        index.registerInstance(this, hostRef);
        /** (optional) Sets the size of tag */
        this.size = components.EComponentSize.Large;
    }
    render() {
        return (index.h(index.Host, { key: 'e84d6c0289f96d95c7ca6f7545ad140ebb4edcda' }, index.h("div", { key: '15bace72e865977719b45bb6c360800f601fa7b8', class: { 'tag-container': true, [`tag-container--size-${this.size}`]: true } }, index.h("slot", { key: '92e076f6a3a178bb699f74884ea36ea6a4490c4b', name: "left-slot" }), string_helper.isValidLabel(this.label) && index.h("div", { key: '949a9623220f293292ebb0f33e33996b02829269', class: "tag-label" }, this.label))));
    }
};
KvTag.style = tagCss;

exports.kv_tag = KvTag;