npm package: @incidite/status-widget
Description: Status widget for an Incidite statuspage
Author: Incidite
Latest version: 0.4.0

# Status Widget Web Component

A lightweight and customizable status widget web component that displays system status information. This component can be easily integrated into any web application to show real-time status updates, health checks, or service availability indicators. Built with modern web standards, it provides a seamless way to keep users informed about system states and operational conditions.

Operational             |  Maintenance
:-------------------------:|:-------------------------:
![Operational](https://storage.googleapis.com/incidite-public/status-widget/operational.png)  |  ![Maintenance](https://storage.googleapis.com/incidite-public/status-widget/maintenance.png)

## Installation

```bash
npm i @incidite/status-widget
```

## Usage

```html
<script type="module">
  import '@incidite/status-widget/incidite-status.js';
</script>

<incidite-status statuspageSlug="abc123"></incidite-status>
```

## Available Attributes

| Attribute | Default | Description |
|-----------|---------|-------------|
| statuspageSlug | `""` | The unique identifier for your status page |
| refreshInterval | `30_000` | Time in seconds between status updates |
| api_endpoint | `https://api.incidite.com/query` | The base URL endpoint for the Incidite API service |

## Changing Language

The status widget supports multiple languages through the `@lit/localize` package. You can change the language at runtime using the `setLocale` function:

```javascript
import { setLocale } from '@incidite/status-widget';

// Change to German
setLocale('de');

// Change back to default language (English)
setLocale('en');
```

You can also check the current locale using the `getLocale` function:

```javascript
import { getLocale } from '@incidite/status-widget';

const currentLocale = getLocale(); // Returns the current language code
```

### Available Locales

The following locales are currently supported:
- English (en) - Default
- German (de)


## Theming

The status widget component can be customized using CSS custom properties (variables). You can override these variables to match your application's design system.

| CSS Variable | Default Value | Description |
|--------------|---------------|-------------|
| `--incidite-status-text-color` | `#2c3e50` | Color of the text in the status widget |
| `--incidite-status-popover-bg-color` | `#fff` | Background color of the popover dialog |
| `--incidite-status-bg-color` | `#f5f5f5` | Background color of the status button |

### Example Usage

```css
/* Apply custom theme */
incidite-status {
  --incidite-status-text-color: #333333;
  --incidite-status-popover-bg-color: #ffffff;
  --incidite-status-bg-color: #f0f0f0;
}
```

## Linting and formatting

To scan the project for linting and formatting errors, run

```bash
npm run lint
```

To automatically fix linting and formatting errors, run

```bash
npm run format
```

## Testing with Web Test Runner

To execute a single test run:

```bash
npm run test
```

To run the tests in interactive watch mode run:

```bash
npm run test:watch
```

## Tooling configs

For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.

## Local Demo with `web-dev-server`

```bash
npm start
```

To run a local development server that serves the basic demo located in `demo/index.html`