Webcomponent widget-signal following open-wc recommendations
npm install @record-evolution/widget-signalA Lit 3.x web component that displays signal indicators with configurable colors based on value conditions. Part of the IronFlock widget ecosystem.
- Responsive sizing — Signals automatically scale to fit the container
- Conditional coloring — Define color mappings with exact matches or numeric comparisons
- Layout options — Arrange signals horizontally or vertically
- Shape options — Display signals as circles or squares
- Theme support — Integrates with IronFlock dashboard theming
``bash`
npm i @record-evolution/widget-signal
`html
`
Note: The element tag includes the version number (e.g., widget-signal-1.2.0).
| Property | Type | Default | Description |
| ---------- | ------------------------------ | -------------- | -------------------------------------- |
| title | string | — | Optional title displayed above signals |subTitle
| | string | — | Optional subtitle |layout
| | "horizontal" \| "vertical" | "horizontal" | Arrangement direction of signals |shape
| | "circle" \| "square" | "circle" | Shape of signal indicators |signals
| | array | [] | Array of signal objects |
| Property | Type | Description |
| ---------- | ------ | ------------------------------- |
| value | string | The current value of the signal |colorMap
| | array | Array of color mapping rules |
Each color map entry has:
| Property | Type | Description |
| ----------- | ------ | ---------------------------------------- |
| color | string | CSS color to display (e.g., "#22c55e") |condition
| | string | Condition to match the value |
Supported conditions:
- Exact string match: "ONLINE", "OK", "ERROR"">5"
- Numeric comparisons: , "<10", ">=70", "<=100", "==50", "!=0"
`json`
{
"title": "Device Status",
"subTitle": "Current signal states",
"layout": "horizontal",
"shape": "circle",
"signals": [
{
"value": "ONLINE",
"colorMap": [
{ "color": "#22c55e", "condition": "ONLINE" },
{ "color": "#ef4444", "condition": "OFFLINE" }
]
},
{
"value": "55",
"colorMap": [
{ "color": "#22c55e", "condition": ">=70" },
{ "color": "#eab308", "condition": ">=40" },
{ "color": "#ef4444", "condition": "<40" }
]
}
]
}
`bash``
npm install
npm run start # Dev server at localhost:8000/demo/
npm run build # Production build to dist/
npm run types # Regenerate types from schema
MIT