<widget-label>

A lightweight Lit web component that displays a single configurable text label.

Usage

Installation & Import

npm i @record-evolution/widget-label

<script type="module">
    import '@record-evolution/widget-label'
</script>

<widget-label-1.0.0 inputData="default-data"></widget-label-1.0.0>

Expected Data Format

The widget accepts an inputData object with the following structure:

{
    "text": "Hello, IronFlock",
    "fontSize": 32,
    "fontColor": "#291f42",
    "fontWeight": "bold",
    "fontStyle": "normal",
    "textAlign": "center",
    "verticalAlign": "center",
    "backgroundColor": ""
}

Properties

• text (textarea): The text to display. Line breaks are preserved.
• fontSize (number): Font size in pixels. Defaults to 16.
• fontColor (color): CSS color for the text. Falls back to the platform theme color when empty.
• fontWeight (enum): One of normal, bold, lighter, bolder, or numeric weights 100–900.
• fontStyle (enum): One of normal, italic, oblique.
• textAlign (enum): Horizontal alignment — left, center, right, justify.
• verticalAlign (enum): Vertical alignment within the tile — top, center, bottom.
• backgroundColor (color): CSS background color for the tile. Falls back to the platform theme background when empty.

Development

Keep the widget tag name in sync with the version in package.json. The demo derives the tag from package.json automatically.

To develop the widget locally:

npm run start

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

Releasing a New Version

1. Commit all changes.
2. Regenerate types from the schema (if modified):

   npm run types

3. Release:

   npm run release

This builds the widget, bumps the patch version, creates a git tag, and pushes. GitHub Actions then publishes the release to npm.

Platform Registration

After publishing, register the new version in IronFlock:

select swarm.f_update_widget_master('{"package_name": "widget-label", "version": "1.0.0"}'::jsonb);