@kelvininc/ui-components/components/kv-tag-letter.js

Kelvin UI Components

import { p as proxyCustomElement, H, h, e as Host } from './p-D6GMjtmE.js';

const tagLetterCss = "@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}.tag-letter-container{height:22px;border:solid 1px var(--kv-primary, #005cc7);border-radius:2px;display:inline-flex}.letter-avatar{font-family:var(--kv-primary-font, \"proxima-nova\", sans-serif, \"Arial\");font-size:16px;font-weight:600;font-stretch:normal;font-style:normal;line-height:24px;letter-spacing:normal;text-transform:none;height:100%;width:24px;display:flex;justify-content:center;background-color:var(--kv-primary, #005cc7);color:var(--kv-neutral-0, #fff)}.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;text-transform:none;padding:0 var(--kv-spacing, 4px);align-self:center;color:var(--kv-neutral-9, #121212)}.tag-letter-container{background-color:var(--kv-neutral-0, #fff)}";

const KvTagLetter$1 = /*@__PURE__*/ proxyCustomElement(class KvTagLetter extends H {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
    }
    render() {
        return (h(Host, { key: '7b5912af6c3d01bb28003ae49971175ed4e229a0' }, h("div", { key: '1ebdc79fd2e3715939631fae85945da98c83e618', class: "tag-letter-container", style: { borderColor: this.color } }, h("div", { key: 'fef0e10fd8a1fc36bfebec57c29199a71bdccf79', class: "letter-avatar", style: { backgroundColor: this.color } }, h("div", { key: '81912895ba5361bc050c99b984003c70cec8882a', class: "avatar" }, this.tagLetter)), h("div", { key: '4bde95afe9f06f32f1fe0fbd72ae92d26199d607', class: "label" }, this.label))));
    }
    static get style() { return tagLetterCss; }
}, [1, "kv-tag-letter", {
        "color": [513],
        "label": [513],
        "tagLetter": [513, "tag-letter"]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["kv-tag-letter"];
    components.forEach(tagName => { switch (tagName) {
        case "kv-tag-letter":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, KvTagLetter$1);
            }
            break;
    } });
}
defineCustomElement$1();

const KvTagLetter = KvTagLetter$1;
const defineCustomElement = defineCustomElement$1;

export { KvTagLetter, defineCustomElement };