@kelvininc/ui-components
Version:
Kelvin UI Components
18 lines (13 loc) • 1.26 kB
JavaScript
'use strict';
var index = require('./index-DpuMIXDY.js');
const stateIndicatorCss = "@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}.state-indicator{display:flex;align-items:baseline}.state-indicator .color{width:8px;height:8px;border-radius:50%;margin-right:var(--kv-spacing-2x, 8px)}.state-indicator .text{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;color:var(--kv-text, #fff)}";
const KvStateIndicator = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
}
render() {
return (index.h(index.Host, { key: 'a84d4e18ecf8605091329e89461cea33fd36c1a1' }, index.h("div", { key: '3482e9e5dae2321aed7f09d672e2f2f05069bed1', class: "state-indicator" }, this.color && index.h("div", { key: 'a04a4aa6bb8f4b4fd1d86703220c0d7475681969', class: "color", style: { background: this.color } }), index.h("div", { key: '653794833d49a3d41242d3c711f70477d65d03b9', class: "text" }, this.text))));
}
};
KvStateIndicator.style = stateIndicatorCss;
exports.kv_state_indicator = KvStateIndicator;