@kelvininc/ui-components/components/kv-state-indicator.js

Kelvin UI Components

import { H as proxyCustomElement, I as H, K as h, L as Host } from './p-BP5CxQcH.js';

const stateIndicatorCss = "@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}kv-dropdown-base:not(.hydrated)>[slot=list]{display:none}.state-indicator{display:flex;align-items:baseline}.state-indicator .color{width:8px;height:8px;border-radius:50%;margin-right:var(--spacing-md)}.state-indicator .text{font-family:Proxima Nova;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0;color:var(--text-surface-neutral-primary)}";

const KvStateIndicator$1 = /*@__PURE__*/ proxyCustomElement(class KvStateIndicator extends H {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
    }
    render() {
        return (h(Host, { key: '7fa721186ab4ecfa61cd03db24abcf2e72c3c1f2' }, h("div", { key: '694af29565fd11fe930dfcc7da57e4cac1548d47', class: "state-indicator" }, this.color && h("div", { key: '89bd5b8d6aaf6181205a5de21c3bedd627f18ccf', class: "color", style: { background: this.color } }), h("div", { key: '94e71cf7b18a4272038ce9ad2b3f0c3482051602', class: "text" }, this.text))));
    }
    static get style() { return stateIndicatorCss; }
}, [257, "kv-state-indicator", {
        "color": [513],
        "text": [513]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["kv-state-indicator"];
    components.forEach(tagName => { switch (tagName) {
        case "kv-state-indicator":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, KvStateIndicator$1);
            }
            break;
    } });
}
defineCustomElement$1();

const KvStateIndicator = KvStateIndicator$1;
const defineCustomElement = defineCustomElement$1;

export { KvStateIndicator, defineCustomElement };