<widget-filter-calendar>

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

Installation

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

<script type="importmap">
    {
        "imports": {
            "@material/web/": "https://cdn.jsdelivr.net/npm/@material/[email protected]/"
        }
    }
</script>

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

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

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

Loading the Widget

<!-- Define import map first -->
<script type="importmap">
    {
        "imports": {
            "@material/web/": "https://cdn.jsdelivr.net/npm/@material/[email protected]/"
        }
    }
</script>

<!-- Then load the widget -->
<script type="module">
    import 'https://cdn.jsdelivr.net/npm/@record-evolution/[email protected]/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:

{
    "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:

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

Development

Local Development

To develop the widget locally:

npm start

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

Building

npm run build

Releasing

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.