npm package: @record-evolution/widget-signal
Description: Webcomponent widget-signal following open-wc recommendations
Author: widget-signal
Latest version: 1.0.5

# widget-signal

A Lit 3.x web component that displays signal indicators with configurable colors based on value conditions. Part of the IronFlock widget ecosystem.

![screenshot](thumbnail.png)

## Features

- **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

## Installation

```bash
npm i @record-evolution/widget-signal
```

## Usage

```html
<script type="module">
    import '@record-evolution/widget-signal'
</script>

<widget-signal-1.2.0></widget-signal-1.2.0>
```

Note: The element tag includes the version number (e.g., `widget-signal-1.2.0`).

## Configuration

| 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                |

### Signal Object

| Property   | Type   | Description                     |
| ---------- | ------ | ------------------------------- |
| `value`    | string | The current value of the signal |
| `colorMap` | array  | Array of color mapping rules    |

### Color Mapping

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"`
- Numeric comparisons: `">5"`, `"<10"`, `">=70"`, `"<=100"`, `"==50"`, `"!=0"`

## Example Data

```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" }
            ]
        }
    ]
}
```

## Development

```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
```

## License

MIT