# \<widget-filter-calendar>

A filter dropdown widget using Material Design components for IronFlock dashboards.

![](thumbnail.png)

## Installation

```bash
npm i @record-evolution/widget-filter-calendar
```

## Usage

### Import Map Requirement

This widget uses Material Web components as external dependencies. You **must** provide an import map in your consuming application to resolve `@material/web` imports.

**Option 1: Load from CDN**

```html
<script type="importmap">
    {
        "imports": {
            "@material/web/": "https://cdn.jsdelivr.net/npm/@material/web@2.4.0/"
        }
    }
</script>
```

**Option 2: Load from local node_modules** (if you have `@material/web` installed)

```html
<script type="importmap">
    {
        "imports": {
            "@material/web/": "/node_modules/@material/web/"
        }
    }
</script>
```

**Important:** If your consuming application also uses Material Web components and bundles them with Vite, you must externalize `@material/web` in your Vite config:

```typescript
// vite.config.ts
export default defineConfig({
    build: {
        rollupOptions: {
            external: [/^@material\/web/]
        }
    }
})
```

### Loading the Widget

```html
<!-- Define import map first -->
<script type="importmap">
    {
        "imports": {
            "@material/web/": "https://cdn.jsdelivr.net/npm/@material/web@2.4.0/"
        }
    }
</script>

<!-- Then load the widget -->
<script type="module">
    import 'https://cdn.jsdelivr.net/npm/@record-evolution/widget-filter-calendar@1.0.0/dist/widget-filter-calendar.js'
</script>

<widget-filter-calendar-1.0.0></widget-filter-calendar-1.0.0>
```

## Expected Data Format

The widget accepts configuration matching the `definition-schema.json`:

```json
{
    "label": "Select Device Type",
    "parameterKey": "deviceType",
    "data": [
        {
            "label": "Temperature Sensor",
            "value": "temp_sensor"
        },
        {
            "label": "Humidity Sensor",
            "value": "humidity_sensor"
        }
    ]
}
```

### Properties

- **label** (string): Display label shown above the dropdown
- **parameterKey** (string): Key used to identify this filter parameter in events
- **data** (array): List of dropdown options
    - **label** (string): Display text for the option
    - **value** (string): Value sent in the filter-change event

### Events

The widget dispatches a `filter-change` event when a selection is made:

```javascript
{
    detail: {
        parameterKey: "deviceType",
        value: "temp_sensor"
    }
}
```

## Development

### Local Development

To develop the widget locally:

```bash
npm start
```

This starts a development server at `localhost:8000/demo/` serving `demo/index.html`.

### Building

```bash
npm run build
```

### Releasing

```bash
npm run release
```

This automatically bumps the patch version, builds, and pushes to GitHub. The GitHub Action will publish to npm.

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