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

Kelvin UI Components

import { H as proxyCustomElement, I as H, K as h, L as Host } from './p-BP5CxQcH.js';
import { d as defineCustomElement$1 } from './p-DQ7v6WT-.js';
import { i as isEmpty } from './p-BZNGlO8m.js';

const tagStatusCss = "@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-status-label-color:var(--text-surface-neutral-secondary );--tag-status-icon-size:var(--size-md);--tag-status-icon-success-color:var(--icon-surface-status-success-default);--tag-status-icon-success-background-color:var(--background-surface-neutral-inverse);--tag-status-icon-error-color:var(--icon-surface-status-danger-default);--tag-status-icon-error-background-color:var(--background-surface-neutral-inverse);--tag-status-icon-unknown-color:var(--icon-surface-status-inactive-default);--tag-status-icon-unknown-background-color:transparent;--tag-status-icon-warning-color:var(--icon-surface-status-warning-default);--tag-status-icon-warning-background-color:transparent;--tag-status-icon-info-color:var(--icon-surface-status-info-default);--tag-status-icon-info-background-color:var(--background-surface-neutral-inverse);--tag-status-gap:var(--spacing-md)}.tag-status{display:flex;align-items:center;gap:var(--tag-status-gap)}.tag-status .label{font-family:Proxima Nova;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0;color:var(--tag-status-label-color)}.tag-status .icon kv-icon{--icon-width:var(--tag-status-icon-size);--icon-height:var(--tag-status-icon-size)}.tag-status .icon--state-success kv-icon{--icon-color:var(--tag-status-icon-success-color);--icon-background-color:var(--tag-status-icon-success-background-color)}.tag-status .icon--state-error kv-icon{--icon-color:var(--tag-status-icon-error-color);--icon-background-color:var(--tag-status-icon-error-background-color)}.tag-status .icon--state-unknown kv-icon{--icon-color:var(--tag-status-icon-unknown-color);--icon-background-color:var(--tag-status-icon-unknown-background-color)}.tag-status .icon--state-warning kv-icon{--icon-color:var(--tag-status-icon-warning-color);--icon-background-color:var(--tag-status-icon-warning-background-color)}.tag-status .icon--state-info kv-icon{--icon-color:var(--tag-status-icon-info-color);--icon-background-color:var(--tag-status-icon-info-background-color)}";

const KvTagStatus = /*@__PURE__*/ proxyCustomElement(class KvTagStatus extends H {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
    }
    render() {
        return (h(Host, { key: '7bae64f67b6da6b2964aa1e0b6f21e77d99f2499' }, h("div", { key: '60c08c5b865f04e3235979b20cb866ec3d66b956', class: "tag-status" }, h("div", { key: '436a030d498c89fc1eef85584398b2dbf5a0ba90', class: {
                icon: true,
                [`icon--state-${this.state}`]: true
            } }, h("kv-icon", { key: '0c581ced88ff24c71469c0dcb4f5c133a9b76cb1', name: this.icon, exportparts: "icon" })), !isEmpty(this.label) && (h("div", { key: '7c73bfe2a3ec90b0fc8700696167f9015dcb9adc', class: "label", part: "label" }, this.label)))));
    }
    static get style() { return tagStatusCss; }
}, [257, "kv-tag-status", {
        "state": [513],
        "icon": [513],
        "label": [513]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["kv-tag-status", "kv-icon"];
    components.forEach(tagName => { switch (tagName) {
        case "kv-tag-status":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, KvTagStatus);
            }
            break;
        case "kv-icon":
            if (!customElements.get(tagName)) {
                defineCustomElement$1();
            }
            break;
    } });
}
defineCustomElement();

export { KvTagStatus as K, defineCustomElement as d };