Annunciator

angular/app.component.html

<div class="angular-root" theme="industrial">
    <div class="smart-demo-container">

        <section id="overview">
            <h2>Smart.Annunciator displays a wall of alarm tiles, as found above a control desk.</h2>
            <p>
                Each tile represents one monitored condition and follows the ISA-18.1 alarm sequence: an unacknowledged alarm blinks fast, an acknowledged alarm is steady, and a condition that has cleared but has not been reset blinks slowly (ringback). Press a tile to acknowledge or reset it.
            </p>
        </section>

        <section>
            <h2>Live panel</h2>
            <smart-annunciator id="panel" [columns]="4"></smart-annunciator>
            <div class="demo-actions">
                <button type="button" id="raise">Raise a random alarm</button>
                <button type="button" id="clearOne">Clear a condition (to ringback)</button>
                <button type="button" id="ackAll">Acknowledge all</button>
                <button type="button" id="resetAll">Reset all</button>
            </div>
            <p class="demo-log" id="log">Press a tile or use the buttons.</p>
            <p class="demo-counts" id="counts"></p>
        </section>

        <section>
            <h2>The four states</h2>
            <smart-annunciator id="states" [columns]="4" [tileHeight]="72"></smart-annunciator>
        </section>

        <section>
            <h2>Layout</h2>
            <p>The <code>columns</code> and <code>tileHeight</code> properties define the layout of the wall.</p>
            <smart-annunciator id="wide" [columns]="6" [tileHeight]="48"></smart-annunciator>
        </section>

    </div>
</div>

angular/app.component.ts

import { Component, AfterViewInit, OnDestroy } from '@angular/core';

import { AnnunciatorModule } from 'smart-industrial/angular/annunciator';

import { runDemo } from './demo';

/**
 * Smart.UI Industrial - Annunciator in Angular.
 *
 * The template is the HTML demo's markup: the elements are the wrappers, so what is
 * written on them is checked against their inputs. demo.ts drives them the way the
 * plant's data would, once every element in the view has rendered.
 */
@Component({
    selector: 'app-root',
    standalone: true,
    imports: [AnnunciatorModule],
    templateUrl: './app.component.html',
    styleUrl: './app.component.css'
})
export class AppComponent implements AfterViewInit, OnDestroy {
    private unmounted = false;

    ngAfterViewInit(): void {
        const root = document.querySelector('.angular-root') as HTMLElement,
            pending: Promise<void>[] = [];

        root.querySelectorAll('*').forEach((element: any) => {
            if (typeof element.whenRendered === 'function' && !element.isRendered) {
                pending.push(element.whenRendered());
            }
        });

        Promise.all(pending).then(() => {
            if (!this.unmounted) {
                runDemo();
            }
        });
    }

    ngOnDestroy(): void {
        this.unmounted = true;
    }
}

angular/demo.ts

// @ts-nocheck
/* The HTML demo's script, as it was written: page code that feeds the elements, not a typed
   API. The types are on the wrappers in app.component.ts. */

const CONDITIONS = [
    { id: 'PT-2101', label: 'Header press high', detail: 'PT-2101' },
    { id: 'TT-2108', label: 'Reactor temp high', detail: 'TT-2108' },
    { id: 'LT-2202', label: 'TK-02 level low', detail: 'LT-2202' },
    { id: 'VT-2101', label: 'Pump A vibration', detail: 'VT-2101' },
    { id: 'FT-2104', label: 'Feed flow low', detail: 'FT-2104' },
    { id: 'CP-2150', label: 'Air comp temp', detail: 'CP-2150' },
    { id: 'PT-2140', label: 'Inst air low', detail: 'PT-2140' },
    { id: 'AI-2130', label: 'Product pH', detail: 'AI-2130' }
];

export function runDemo(): void {
    const panel = document.getElementById('panel'),
        log = document.getElementById('log'),
        counts = document.getElementById('counts');

    let tiles = CONDITIONS.map(function (condition, index) {
        return Object.assign({}, condition, { state: index === 0 ? 'alarm' : index === 1 ? 'ack' : 'normal' });
    });

    /* Treat the list as immutable: mutating the array the panel already holds
       makes the follow-up assignment look unchanged, so nothing redraws. */
    function setTiles(next) {
        tiles = next;
        panel.tiles = next;

        const c = panel.stateCounts();

        counts.textContent = 'normal ' + c.normal + ' · alarm ' + c.alarm +
            ' · ack ' + c.ack + ' · ringback ' + c.ringback + '   →   panel state: ' + panel.getAttribute('state');
    }

    function withState(id, state) {
        return tiles.map(function (tile) {
            return tile.id === id ? Object.assign({}, tile, { state: state }) : tile;
        });
    }

    function pick(state) {
        const candidates = tiles.filter((tile) => tile.state === state);

        return candidates.length ? candidates[Math.floor(Math.random() * candidates.length)] : null;
    }

    setTiles(tiles);

    /* The element reports the operator's intent; the host owns the state. */
    panel.addEventListener('acknowledge', function (event) {
        setTiles(withState(event.detail.tile.id, 'ack'));
        log.textContent = 'acknowledge → ' + event.detail.tile.id;
    });

    panel.addEventListener('reset', function (event) {
        setTiles(withState(event.detail.tile.id, 'normal'));
        log.textContent = 'reset → ' + event.detail.tile.id + ' (ringback cleared)';
    });

    document.getElementById('raise').addEventListener('click', function () {
        const tile = pick('normal');

        if (!tile) {
            log.textContent = 'every condition is already abnormal';
            return;
        }

        setTiles(withState(tile.id, 'alarm'));
        log.textContent = 'alarm raised → ' + tile.id;
    });

    document.getElementById('clearOne').addEventListener('click', function () {
        const tile = pick('ack') || pick('alarm');

        if (!tile) {
            log.textContent = 'no abnormal condition to clear';
            return;
        }

        setTiles(withState(tile.id, 'ringback'));
        log.textContent = 'condition cleared → ' + tile.id + ' is now ringback, awaiting reset';
    });

    document.getElementById('ackAll').addEventListener('click', function () {
        panel.acknowledgeAll();
        log.textContent = 'acknowledgeAll() raised one acknowledge event per alarm tile';
    });

    document.getElementById('resetAll').addEventListener('click', function () {
        setTiles(tiles.map(function (tile) {
            return tile.state === 'ringback' ? Object.assign({}, tile, { state: 'normal' }) : tile;
        }));
        log.textContent = 'all ringback tiles reset';
    });

    /* ── Static examples ─────────────────────────────────────────────── */
    document.getElementById('states').tiles = [
        { id: 'n', label: 'Normal', detail: 'condition healthy', state: 'normal' },
        { id: 'a', label: 'Alarm', detail: 'abnormal, unacknowledged', state: 'alarm' },
        { id: 'k', label: 'Acknowledged', detail: 'abnormal, operator aware', state: 'ack' },
        { id: 'r', label: 'Ringback', detail: 'cleared, awaiting reset', state: 'ringback' }
    ];

    document.getElementById('wide').tiles = CONDITIONS.concat([
        { id: 'HX-2108', label: 'HX approach', detail: 'HX-2108' },
        { id: 'CV-2140', label: 'Valve deviation', detail: 'CV-2140' },
        { id: 'ST-2112', label: 'Agitator speed', detail: 'ST-2112' },
        { id: 'FQ-2104', label: 'Totaliser drift', detail: 'FQ-2104' }
    ]).map(function (condition, index) {
        return Object.assign({}, condition, {
            state: index === 2 ? 'alarm' : index === 5 ? 'ack' : index === 9 ? 'ringback' : 'normal'
        });
    });
}

angular/app.component.css

.smart-demo-container {
    max-width: 900px;
}

section {
    margin-bottom: 34px;
}

section h2 {
    font-size: 16px;
    font-weight: 500;
    margin: 0 0 8px;
}

section p {
    color: var(--smart-text-secondary-color);
    margin: 0 0 14px;
    max-width: 74ch;
}

code {
    background: var(--smart-ui-state-hover);
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
    padding: 1px 5px;
}

.demo-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.demo-actions button {
    background: transparent;
    border: 1px solid var(--smart-border);
    border-radius: var(--smart-border-radius);
    color: var(--smart-text-secondary-color);
    cursor: pointer;
    font-family: inherit;
    font-size: 11px;
    letter-spacing: .06em;
    padding: 7px 14px;
    text-transform: uppercase;
}

.demo-actions button:hover {
    background: var(--smart-ui-state-hover);
    border-color: var(--smart-ui-state-border-hover);
    color: var(--smart-ui-state-color-hover);
}

.demo-log,
.demo-counts {
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
    margin: 12px 0 0;
    color: var(--smart-text-tertiary-color);
}

/* ── Demo chrome, shared by the Industrial demos ─────────────────────────
   Headings, prose, buttons and notes are the same on every demo page. This block
   is appended by scripts and comes last, so it wins over the rules above. */
.smart-demo-container {
    padding: 4px 0 32px;
}

.smart-demo-container section {
    margin-bottom: 36px;
}

.smart-demo-container section h2 {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--smart-text-color);
}

.smart-demo-container #overview h2 {
    margin-bottom: 10px;
    font-size: 20px;
    max-width: 78ch;
}

.smart-demo-container section > p {
    margin: 0 0 14px;
    max-width: 84ch;
    font-size: 14px;
    line-height: 1.55;
    color: var(--smart-text-secondary-color);
}

.smart-demo-container code {
    padding: 1px 5px;
    border-radius: 2px;
    background: var(--smart-ui-state-hover);
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
}

.smart-demo-container .demo-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin-top: 12px;
}

.smart-demo-container .demo-actions label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--smart-text-color);
}

.smart-demo-container .demo-actions button,
.smart-demo-container .demo-button {
    min-height: 30px;
    padding: 0 12px;
    border: 1px solid var(--smart-border);
    border-radius: 3px;
    background: var(--smart-industrial-panel-background, var(--smart-surface));
    color: var(--smart-text-color);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
}

.smart-demo-container .demo-actions button:hover,
.smart-demo-container .demo-button:hover {
    border-color: var(--smart-ui-state-border-hover);
    background: var(--smart-ui-state-hover);
    color: var(--smart-ui-state-color-hover);
}

.smart-demo-container .demo-actions button.demo-button-primary,
.smart-demo-container .demo-button-primary {
    border-color: var(--smart-primary);
    background: var(--smart-primary);
    color: var(--smart-primary-color, #fff);
}

.smart-demo-container .demo-actions button[disabled],
.smart-demo-container .demo-button[disabled] {
    opacity: 0.5;
    cursor: default;
}

.smart-demo-container .demo-actions select,
.smart-demo-container .demo-actions input[type="text"],
.smart-demo-container .demo-actions input[type="number"] {
    min-height: 30px;
    padding: 2px 6px;
    border: 1px solid var(--smart-border);
    border-radius: 3px;
    background: var(--smart-background);
    color: var(--smart-text-color);
    font: inherit;
    font-size: 13px;
}

.smart-demo-container .hint,
.smart-demo-container .demo-log,
.smart-demo-container .demo-counts {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--smart-text-secondary-color);
    opacity: 1;
}

.smart-demo-container .demo-log,
.smart-demo-container .demo-counts {
    font-family: Consolas, "Courier New", monospace;
}

.smart-demo-container .log {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--smart-text-secondary-color);
    opacity: 1;
}

.smart-demo-container .log li {
    padding: 2px 0;
}

react/App.jsx

import 'smart-industrial/source/styles/smart.default.css';
import 'smart-industrial/source/styles/smart.industrial-elements.css';
import 'smart-industrial/source/styles/smart.industrial.css';
import 'smart-industrial/source/styles/smart.industrial-dark.css';
import './App.css';
import React from 'react';
import { Annunciator } from 'smart-industrial/react/annunciator';


/* The demo logic is the HTML demo's: it feeds the elements the way a plant's data would. */
const CONDITIONS = [
    { id: 'PT-2101', label: 'Header press high', detail: 'PT-2101' },
    { id: 'TT-2108', label: 'Reactor temp high', detail: 'TT-2108' },
    { id: 'LT-2202', label: 'TK-02 level low', detail: 'LT-2202' },
    { id: 'VT-2101', label: 'Pump A vibration', detail: 'VT-2101' },
    { id: 'FT-2104', label: 'Feed flow low', detail: 'FT-2104' },
    { id: 'CP-2150', label: 'Air comp temp', detail: 'CP-2150' },
    { id: 'PT-2140', label: 'Inst air low', detail: 'PT-2140' },
    { id: 'AI-2130', label: 'Product pH', detail: 'AI-2130' }
];

const App = () => {
    const root = React.useRef(null);

    React.useEffect(() => {
        /* The elements render after React has mounted them, and the demo's logic - written
           for a page's load event - reads their parts, so it waits for every element in the
           tree to have rendered first. */
        const pending = Array.from(root.current.querySelectorAll('*'))
            .filter((element) => typeof element.whenRendered === 'function' && !element.isRendered)
            .map((element) => element.whenRendered());
        let unmounted = false;

        Promise.all(pending).then(() => {
            if (unmounted) {
                return;
            }

            const panel = document.getElementById('panel'),
                log = document.getElementById('log'),
                counts = document.getElementById('counts');

            let tiles = CONDITIONS.map(function (condition, index) {
                return Object.assign({}, condition, { state: index === 0 ? 'alarm' : index === 1 ? 'ack' : 'normal' });
            });

            /* Treat the list as immutable: mutating the array the panel already holds
               makes the follow-up assignment look unchanged, so nothing redraws. */
            function setTiles(next) {
                tiles = next;
                panel.tiles = next;

                const c = panel.stateCounts();

                counts.textContent = 'normal ' + c.normal + ' · alarm ' + c.alarm +
                    ' · ack ' + c.ack + ' · ringback ' + c.ringback + '   →   panel state: ' + panel.getAttribute('state');
            }

            function withState(id, state) {
                return tiles.map(function (tile) {
                    return tile.id === id ? Object.assign({}, tile, { state: state }) : tile;
                });
            }

            function pick(state) {
                const candidates = tiles.filter((tile) => tile.state === state);

                return candidates.length ? candidates[Math.floor(Math.random() * candidates.length)] : null;
            }

            setTiles(tiles);

            /* The element reports the operator's intent; the host owns the state. */
            panel.addEventListener('acknowledge', function (event) {
                setTiles(withState(event.detail.tile.id, 'ack'));
                log.textContent = 'acknowledge → ' + event.detail.tile.id;
            });

            panel.addEventListener('reset', function (event) {
                setTiles(withState(event.detail.tile.id, 'normal'));
                log.textContent = 'reset → ' + event.detail.tile.id + ' (ringback cleared)';
            });

            document.getElementById('raise').addEventListener('click', function () {
                const tile = pick('normal');

                if (!tile) {
                    log.textContent = 'every condition is already abnormal';
                    return;
                }

                setTiles(withState(tile.id, 'alarm'));
                log.textContent = 'alarm raised → ' + tile.id;
            });

            document.getElementById('clearOne').addEventListener('click', function () {
                const tile = pick('ack') || pick('alarm');

                if (!tile) {
                    log.textContent = 'no abnormal condition to clear';
                    return;
                }

                setTiles(withState(tile.id, 'ringback'));
                log.textContent = 'condition cleared → ' + tile.id + ' is now ringback, awaiting reset';
            });

            document.getElementById('ackAll').addEventListener('click', function () {
                panel.acknowledgeAll();
                log.textContent = 'acknowledgeAll() raised one acknowledge event per alarm tile';
            });

            document.getElementById('resetAll').addEventListener('click', function () {
                setTiles(tiles.map(function (tile) {
                    return tile.state === 'ringback' ? Object.assign({}, tile, { state: 'normal' }) : tile;
                }));
                log.textContent = 'all ringback tiles reset';
            });

            /* ── Static examples ─────────────────────────────────────────────── */
            document.getElementById('states').tiles = [
                { id: 'n', label: 'Normal', detail: 'condition healthy', state: 'normal' },
                { id: 'a', label: 'Alarm', detail: 'abnormal, unacknowledged', state: 'alarm' },
                { id: 'k', label: 'Acknowledged', detail: 'abnormal, operator aware', state: 'ack' },
                { id: 'r', label: 'Ringback', detail: 'cleared, awaiting reset', state: 'ringback' }
            ];

            document.getElementById('wide').tiles = CONDITIONS.concat([
                { id: 'HX-2108', label: 'HX approach', detail: 'HX-2108' },
                { id: 'CV-2140', label: 'Valve deviation', detail: 'CV-2140' },
                { id: 'ST-2112', label: 'Agitator speed', detail: 'ST-2112' },
                { id: 'FQ-2104', label: 'Totaliser drift', detail: 'FQ-2104' }
            ]).map(function (condition, index) {
                return Object.assign({}, condition, {
                    state: index === 2 ? 'alarm' : index === 5 ? 'ack' : index === 9 ? 'ringback' : 'normal'
                });
            });
        });

        return () => {
            unmounted = true;
        };
    }, []);

    return (
        <div className="react-root" ref={root} theme="industrial">
            <div className="smart-demo-container">
                <section id="overview">
                    <h2>Smart.Annunciator displays a wall of alarm tiles, as found above a control desk.</h2>
                    <p>Each tile represents one monitored condition and follows the ISA-18.1 alarm sequence: an unacknowledged alarm blinks fast, an acknowledged alarm is steady, and a condition that has cleared but has not been reset blinks slowly (ringback). Press a tile to acknowledge or reset it.</p>
                </section>
                <section>
                    <h2>Live panel</h2>
                    <Annunciator id="panel" columns={4}></Annunciator>
                    <div className="demo-actions">
                        <button type="button" id="raise">Raise a random alarm</button>
                        <button type="button" id="clearOne">Clear a condition (to ringback)</button>
                        <button type="button" id="ackAll">Acknowledge all</button>
                        <button type="button" id="resetAll">Reset all</button>
                    </div>
                    <p className="demo-log" id="log">Press a tile or use the buttons.</p>
                    <p className="demo-counts" id="counts"></p>
                </section>
                <section>
                    <h2>The four states</h2>
                    <Annunciator id="states" columns={4} tileHeight={72}></Annunciator>
                </section>
                <section>
                    <h2>Layout</h2>
                    <p>The <code>columns</code> and <code>tileHeight</code> properties define the layout of the wall.</p>
                    <Annunciator id="wide" columns={6} tileHeight={48}></Annunciator>
                </section>
            </div>
        </div>
    );
};

export default App;

react/App.css

.smart-demo-container {
    max-width: 900px;
}

section {
    margin-bottom: 34px;
}

section h2 {
    font-size: 16px;
    font-weight: 500;
    margin: 0 0 8px;
}

section p {
    color: var(--smart-text-secondary-color);
    margin: 0 0 14px;
    max-width: 74ch;
}

code {
    background: var(--smart-ui-state-hover);
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
    padding: 1px 5px;
}

.demo-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.demo-actions button {
    background: transparent;
    border: 1px solid var(--smart-border);
    border-radius: var(--smart-border-radius);
    color: var(--smart-text-secondary-color);
    cursor: pointer;
    font-family: inherit;
    font-size: 11px;
    letter-spacing: .06em;
    padding: 7px 14px;
    text-transform: uppercase;
}

.demo-actions button:hover {
    background: var(--smart-ui-state-hover);
    border-color: var(--smart-ui-state-border-hover);
    color: var(--smart-ui-state-color-hover);
}

.demo-log,
.demo-counts {
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
    margin: 12px 0 0;
    color: var(--smart-text-tertiary-color);
}

/* ── Demo chrome, shared by the Industrial demos ─────────────────────────
   Headings, prose, buttons and notes are the same on every demo page. This block
   is appended by scripts and comes last, so it wins over the rules above. */
.smart-demo-container {
    padding: 4px 0 32px;
}

.smart-demo-container section {
    margin-bottom: 36px;
}

.smart-demo-container section h2 {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--smart-text-color);
}

.smart-demo-container #overview h2 {
    margin-bottom: 10px;
    font-size: 20px;
    max-width: 78ch;
}

.smart-demo-container section > p {
    margin: 0 0 14px;
    max-width: 84ch;
    font-size: 14px;
    line-height: 1.55;
    color: var(--smart-text-secondary-color);
}

.smart-demo-container code {
    padding: 1px 5px;
    border-radius: 2px;
    background: var(--smart-ui-state-hover);
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
}

.smart-demo-container .demo-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin-top: 12px;
}

.smart-demo-container .demo-actions label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--smart-text-color);
}

.smart-demo-container .demo-actions button,
.smart-demo-container .demo-button {
    min-height: 30px;
    padding: 0 12px;
    border: 1px solid var(--smart-border);
    border-radius: 3px;
    background: var(--smart-industrial-panel-background, var(--smart-surface));
    color: var(--smart-text-color);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
}

.smart-demo-container .demo-actions button:hover,
.smart-demo-container .demo-button:hover {
    border-color: var(--smart-ui-state-border-hover);
    background: var(--smart-ui-state-hover);
    color: var(--smart-ui-state-color-hover);
}

.smart-demo-container .demo-actions button.demo-button-primary,
.smart-demo-container .demo-button-primary {
    border-color: var(--smart-primary);
    background: var(--smart-primary);
    color: var(--smart-primary-color, #fff);
}

.smart-demo-container .demo-actions button[disabled],
.smart-demo-container .demo-button[disabled] {
    opacity: 0.5;
    cursor: default;
}

.smart-demo-container .demo-actions select,
.smart-demo-container .demo-actions input[type="text"],
.smart-demo-container .demo-actions input[type="number"] {
    min-height: 30px;
    padding: 2px 6px;
    border: 1px solid var(--smart-border);
    border-radius: 3px;
    background: var(--smart-background);
    color: var(--smart-text-color);
    font: inherit;
    font-size: 13px;
}

.smart-demo-container .hint,
.smart-demo-container .demo-log,
.smart-demo-container .demo-counts {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--smart-text-secondary-color);
    opacity: 1;
}

.smart-demo-container .demo-log,
.smart-demo-container .demo-counts {
    font-family: Consolas, "Courier New", monospace;
}

.smart-demo-container .log {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--smart-text-secondary-color);
    opacity: 1;
}

.smart-demo-container .log li {
    padding: 2px 0;
}

vue/App.vue

<template>
  <div class="vue-root" theme="industrial" v-pre>
    <div class="smart-demo-container">

        <section id="overview">
            <h2>Smart.Annunciator displays a wall of alarm tiles, as found above a control desk.</h2>
            <p>
                Each tile represents one monitored condition and follows the ISA-18.1 alarm sequence: an unacknowledged alarm blinks fast, an acknowledged alarm is steady, and a condition that has cleared but has not been reset blinks slowly (ringback). Press a tile to acknowledge or reset it.
            </p>
        </section>

        <section>
            <h2>Live panel</h2>
            <smart-annunciator id="panel" columns="4"></smart-annunciator>
            <div class="demo-actions">
                <button type="button" id="raise">Raise a random alarm</button>
                <button type="button" id="clearOne">Clear a condition (to ringback)</button>
                <button type="button" id="ackAll">Acknowledge all</button>
                <button type="button" id="resetAll">Reset all</button>
            </div>
            <p class="demo-log" id="log">Press a tile or use the buttons.</p>
            <p class="demo-counts" id="counts"></p>
        </section>

        <section>
            <h2>The four states</h2>
            <smart-annunciator id="states" columns="4" tile-height="72"></smart-annunciator>
        </section>

        <section>
            <h2>Layout</h2>
            <p>The <code>columns</code> and <code>tileHeight</code> properties define the layout of the wall.</p>
            <smart-annunciator id="wide" columns="6" tile-height="48"></smart-annunciator>
        </section>

    </div>
  </div>
</template>

<script>
import { onMounted } from "vue";
import "smart-industrial/source/styles/smart.default.css";
import "smart-industrial/source/styles/smart.industrial-elements.css";
import "smart-industrial/source/styles/smart.industrial.css";
import "smart-industrial/source/styles/smart.industrial-dark.css";
import "smart-industrial/source/modules/smart.annunciator.js";


const CONDITIONS = [
    { id: 'PT-2101', label: 'Header press high', detail: 'PT-2101' },
    { id: 'TT-2108', label: 'Reactor temp high', detail: 'TT-2108' },
    { id: 'LT-2202', label: 'TK-02 level low', detail: 'LT-2202' },
    { id: 'VT-2101', label: 'Pump A vibration', detail: 'VT-2101' },
    { id: 'FT-2104', label: 'Feed flow low', detail: 'FT-2104' },
    { id: 'CP-2150', label: 'Air comp temp', detail: 'CP-2150' },
    { id: 'PT-2140', label: 'Inst air low', detail: 'PT-2140' },
    { id: 'AI-2130', label: 'Product pH', detail: 'AI-2130' }
];

export default {
  name: "app",
  setup() {
    onMounted(() => {
      /* The elements render after Vue has mounted them, and the demo's logic - written for
         a page's load event - reads their parts, so it waits for every element in the tree
         to have rendered first. */
      const pending = Array.from(document.querySelector(".vue-root").querySelectorAll("*"))
        .filter((element) => typeof element.whenRendered === "function" && !element.isRendered)
        .map((element) => element.whenRendered());

      Promise.all(pending).then(() => {
        const panel = document.getElementById('panel'),
            log = document.getElementById('log'),
            counts = document.getElementById('counts');

        let tiles = CONDITIONS.map(function (condition, index) {
            return Object.assign({}, condition, { state: index === 0 ? 'alarm' : index === 1 ? 'ack' : 'normal' });
        });

        /* Treat the list as immutable: mutating the array the panel already holds
           makes the follow-up assignment look unchanged, so nothing redraws. */
        function setTiles(next) {
            tiles = next;
            panel.tiles = next;

            const c = panel.stateCounts();

            counts.textContent = 'normal ' + c.normal + ' · alarm ' + c.alarm +
                ' · ack ' + c.ack + ' · ringback ' + c.ringback + '   →   panel state: ' + panel.getAttribute('state');
        }

        function withState(id, state) {
            return tiles.map(function (tile) {
                return tile.id === id ? Object.assign({}, tile, { state: state }) : tile;
            });
        }

        function pick(state) {
            const candidates = tiles.filter((tile) => tile.state === state);

            return candidates.length ? candidates[Math.floor(Math.random() * candidates.length)] : null;
        }

        setTiles(tiles);

        /* The element reports the operator's intent; the host owns the state. */
        panel.addEventListener('acknowledge', function (event) {
            setTiles(withState(event.detail.tile.id, 'ack'));
            log.textContent = 'acknowledge → ' + event.detail.tile.id;
        });

        panel.addEventListener('reset', function (event) {
            setTiles(withState(event.detail.tile.id, 'normal'));
            log.textContent = 'reset → ' + event.detail.tile.id + ' (ringback cleared)';
        });

        document.getElementById('raise').addEventListener('click', function () {
            const tile = pick('normal');

            if (!tile) {
                log.textContent = 'every condition is already abnormal';
                return;
            }

            setTiles(withState(tile.id, 'alarm'));
            log.textContent = 'alarm raised → ' + tile.id;
        });

        document.getElementById('clearOne').addEventListener('click', function () {
            const tile = pick('ack') || pick('alarm');

            if (!tile) {
                log.textContent = 'no abnormal condition to clear';
                return;
            }

            setTiles(withState(tile.id, 'ringback'));
            log.textContent = 'condition cleared → ' + tile.id + ' is now ringback, awaiting reset';
        });

        document.getElementById('ackAll').addEventListener('click', function () {
            panel.acknowledgeAll();
            log.textContent = 'acknowledgeAll() raised one acknowledge event per alarm tile';
        });

        document.getElementById('resetAll').addEventListener('click', function () {
            setTiles(tiles.map(function (tile) {
                return tile.state === 'ringback' ? Object.assign({}, tile, { state: 'normal' }) : tile;
            }));
            log.textContent = 'all ringback tiles reset';
        });

        /* ── Static examples ─────────────────────────────────────────────── */
        document.getElementById('states').tiles = [
            { id: 'n', label: 'Normal', detail: 'condition healthy', state: 'normal' },
            { id: 'a', label: 'Alarm', detail: 'abnormal, unacknowledged', state: 'alarm' },
            { id: 'k', label: 'Acknowledged', detail: 'abnormal, operator aware', state: 'ack' },
            { id: 'r', label: 'Ringback', detail: 'cleared, awaiting reset', state: 'ringback' }
        ];

        document.getElementById('wide').tiles = CONDITIONS.concat([
            { id: 'HX-2108', label: 'HX approach', detail: 'HX-2108' },
            { id: 'CV-2140', label: 'Valve deviation', detail: 'CV-2140' },
            { id: 'ST-2112', label: 'Agitator speed', detail: 'ST-2112' },
            { id: 'FQ-2104', label: 'Totaliser drift', detail: 'FQ-2104' }
        ]).map(function (condition, index) {
            return Object.assign({}, condition, {
                state: index === 2 ? 'alarm' : index === 5 ? 'ack' : index === 9 ? 'ringback' : 'normal'
            });
        });
      });
    });
  }
};
</script>

<style>
.smart-demo-container {
    max-width: 900px;
}

section {
    margin-bottom: 34px;
}

section h2 {
    font-size: 16px;
    font-weight: 500;
    margin: 0 0 8px;
}

section p {
    color: var(--smart-text-secondary-color);
    margin: 0 0 14px;
    max-width: 74ch;
}

code {
    background: var(--smart-ui-state-hover);
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
    padding: 1px 5px;
}

.demo-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.demo-actions button {
    background: transparent;
    border: 1px solid var(--smart-border);
    border-radius: var(--smart-border-radius);
    color: var(--smart-text-secondary-color);
    cursor: pointer;
    font-family: inherit;
    font-size: 11px;
    letter-spacing: .06em;
    padding: 7px 14px;
    text-transform: uppercase;
}

.demo-actions button:hover {
    background: var(--smart-ui-state-hover);
    border-color: var(--smart-ui-state-border-hover);
    color: var(--smart-ui-state-color-hover);
}

.demo-log,
.demo-counts {
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
    margin: 12px 0 0;
    color: var(--smart-text-tertiary-color);
}

/* ── Demo chrome, shared by the Industrial demos ─────────────────────────
   Headings, prose, buttons and notes are the same on every demo page. This block
   is appended by scripts and comes last, so it wins over the rules above. */
.smart-demo-container {
    padding: 4px 0 32px;
}

.smart-demo-container section {
    margin-bottom: 36px;
}

.smart-demo-container section h2 {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--smart-text-color);
}

.smart-demo-container #overview h2 {
    margin-bottom: 10px;
    font-size: 20px;
    max-width: 78ch;
}

.smart-demo-container section > p {
    margin: 0 0 14px;
    max-width: 84ch;
    font-size: 14px;
    line-height: 1.55;
    color: var(--smart-text-secondary-color);
}

.smart-demo-container code {
    padding: 1px 5px;
    border-radius: 2px;
    background: var(--smart-ui-state-hover);
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
}

.smart-demo-container .demo-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin-top: 12px;
}

.smart-demo-container .demo-actions label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--smart-text-color);
}

.smart-demo-container .demo-actions button,
.smart-demo-container .demo-button {
    min-height: 30px;
    padding: 0 12px;
    border: 1px solid var(--smart-border);
    border-radius: 3px;
    background: var(--smart-industrial-panel-background, var(--smart-surface));
    color: var(--smart-text-color);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
}

.smart-demo-container .demo-actions button:hover,
.smart-demo-container .demo-button:hover {
    border-color: var(--smart-ui-state-border-hover);
    background: var(--smart-ui-state-hover);
    color: var(--smart-ui-state-color-hover);
}

.smart-demo-container .demo-actions button.demo-button-primary,
.smart-demo-container .demo-button-primary {
    border-color: var(--smart-primary);
    background: var(--smart-primary);
    color: var(--smart-primary-color, #fff);
}

.smart-demo-container .demo-actions button[disabled],
.smart-demo-container .demo-button[disabled] {
    opacity: 0.5;
    cursor: default;
}

.smart-demo-container .demo-actions select,
.smart-demo-container .demo-actions input[type="text"],
.smart-demo-container .demo-actions input[type="number"] {
    min-height: 30px;
    padding: 2px 6px;
    border: 1px solid var(--smart-border);
    border-radius: 3px;
    background: var(--smart-background);
    color: var(--smart-text-color);
    font: inherit;
    font-size: 13px;
}

.smart-demo-container .hint,
.smart-demo-container .demo-log,
.smart-demo-container .demo-counts {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--smart-text-secondary-color);
    opacity: 1;
}

.smart-demo-container .demo-log,
.smart-demo-container .demo-counts {
    font-family: Consolas, "Courier New", monospace;
}

.smart-demo-container .log {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--smart-text-secondary-color);
    opacity: 1;
}

.smart-demo-container .log li {
    padding: 2px 0;
}
</style>