Multi-State Indicator

angular/app.component.html

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

        <section id="overview">
            <h2>Smart.MultiStateIndicator is a lamp that shows one of several named equipment states.</h2>
            <p>
                An LED shows on or off. Equipment often has more states than that: a pump can be running, stopped, in manual, faulted or unknown, and the operator has to tell them apart at a glance. The states are declared once and the component resolves its <code>value</code> against them.
            </p>
        </section>

        <section>
            <h2>Equipment states</h2>
            <ul class="demo-list" id="equipmentList"></ul>
        </section>

        <section>
            <h2>Shapes</h2>
            <div class="shape-row">
                <span><smart-multi-state-indicator id="shapeRound" shape="round" [showLabel]="true"></smart-multi-state-indicator></span>
                <span><smart-multi-state-indicator id="shapeSquare" shape="square" [showLabel]="true"></smart-multi-state-indicator></span>
                <span><smart-multi-state-indicator id="shapeBar" shape="bar" [showLabel]="true"></smart-multi-state-indicator></span>
            </div>
        </section>

        <section>
            <h2>Severities</h2>
            <p>
                The severity of a state selects a colour from the active theme, so the same markup works with an ISA-101 industrial theme and with the standard themes. A state can also blink, which ISA-18.2 uses for an alarm that is waiting for acknowledgement.
            </p>
            <div class="severity-row" id="severityRow"></div>
        </section>

        <section>
            <h2>Driven by a value</h2>
            <p>This example cycles a single indicator through its declared states.</p>
            <div class="live-row">
                <smart-multi-state-indicator id="liveIndicator" [showLabel]="true"></smart-multi-state-indicator>
                <code id="liveCode">value = &mdash;</code>
            </div>
        </section>

    </div>
</div>

angular/app.component.ts

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

import { MultiStateIndicatorModule } from 'smart-industrial/angular/multistateindicator';

import { runDemo } from './demo';

/**
 * Smart.UI Industrial - MultiStateIndicator 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: [MultiStateIndicatorModule],
    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 EQUIPMENT_STATES = [
    { value: 'running', label: 'Running', severity: 'ok' },
    { value: 'stopped', label: 'Stopped', severity: 'off' },
    { value: 'manual', label: 'Manual', severity: 'manual' },
    { value: 'maintenance', label: 'Maintenance', severity: 'maintenance' },
    { value: 'fault', label: 'Fault', severity: 'critical', blink: true }
];

const SEVERITIES = ['ok', 'advisory', 'warning', 'critical', 'manual', 'maintenance', 'off', 'unknown'];

const EQUIPMENT = [
    { tag: 'P-2101A', name: 'Feed pump A', state: 'running' },
    { tag: 'P-2101B', name: 'Feed pump B', state: 'stopped' },
    { tag: 'CV-2140', name: 'Discharge valve', state: 'manual' },
    { tag: 'CP-2150', name: 'Air compressor', state: 'maintenance' },
    { tag: 'AG-2112', name: 'Main agitator', state: 'fault' }
];

export function runDemo(): void {
    /* ── Equipment list ──────────────────────────────────────────────── */
    const equipmentList = document.getElementById('equipmentList');

    EQUIPMENT.forEach(function (item) {
        const row = document.createElement('li'),
            indicator = document.createElement('smart-multi-state-indicator');

        row.className = 'demo-row';
        indicator.states = EQUIPMENT_STATES;
        indicator.value = item.state;
        indicator.showLabel = true;

        const tag = document.createElement('span');

        tag.className = 'demo-tag';
        tag.textContent = item.tag;

        const name = document.createElement('span');

        name.className = 'demo-name';
        name.textContent = item.name;

        row.appendChild(indicator);
        row.appendChild(tag);
        row.appendChild(name);
        equipmentList.appendChild(row);
    });

    /* ── Shapes ──────────────────────────────────────────────────────── */
    ['shapeRound', 'shapeSquare', 'shapeBar'].forEach(function (id) {
        const element = document.getElementById(id);

        element.states = [{ value: 1, label: element.shape, severity: 'ok' }];
        element.value = 1;
    });

    /* ── Severities ──────────────────────────────────────────────────── */
    const severityRow = document.getElementById('severityRow');

    SEVERITIES.forEach(function (severity) {
        const cell = document.createElement('span'),
            indicator = document.createElement('smart-multi-state-indicator');

        cell.className = 'severity-cell';
        indicator.states = [{ value: 1, label: severity, severity: severity, blink: severity === 'critical' }];
        indicator.value = 1;
        indicator.showLabel = true;

        cell.appendChild(indicator);
        severityRow.appendChild(cell);
    });

    /* ── Value-driven ────────────────────────────────────────────────── */
    const live = document.getElementById('liveIndicator'),
        liveCode = document.getElementById('liveCode');

    live.states = EQUIPMENT_STATES;

    let index = 0;

    function step() {
        const state = EQUIPMENT_STATES[index % EQUIPMENT_STATES.length];

        live.value = state.value;
        liveCode.textContent = "value = '" + state.value + "'";
        index++;
    }

    step();
    setInterval(step, 1600);
}

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: 70ch;
}

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

/* ── Equipment list ──────────────────────────────────────────────────── */
.demo-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 460px;
}

.demo-row {
    display: grid;
    grid-template-columns: 130px 90px 1fr;
    align-items: center;
    gap: 12px;
    padding: 9px 4px;
    border-bottom: 1px solid var(--smart-border);
}

.demo-row:last-child {
    border-bottom: none;
}

.demo-tag {
    color: var(--smart-text-secondary-color);
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
}

/* ── Shapes & severities ─────────────────────────────────────────────── */
.shape-row,
.severity-row {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    align-items: center;
}

.severity-cell {
    display: inline-flex;
    align-items: center;
    min-width: 130px;
}

/* ── Live ────────────────────────────────────────────────────────────── */
.live-row {
    display: flex;
    align-items: center;
    gap: 18px;
}

/* ── 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 { MultiStateIndicator } from 'smart-industrial/react/multistateindicator';


/* The demo logic is the HTML demo's: it feeds the elements the way a plant's data would. */
const EQUIPMENT_STATES = [
    { value: 'running', label: 'Running', severity: 'ok' },
    { value: 'stopped', label: 'Stopped', severity: 'off' },
    { value: 'manual', label: 'Manual', severity: 'manual' },
    { value: 'maintenance', label: 'Maintenance', severity: 'maintenance' },
    { value: 'fault', label: 'Fault', severity: 'critical', blink: true }
];

const SEVERITIES = ['ok', 'advisory', 'warning', 'critical', 'manual', 'maintenance', 'off', 'unknown'];

const EQUIPMENT = [
    { tag: 'P-2101A', name: 'Feed pump A', state: 'running' },
    { tag: 'P-2101B', name: 'Feed pump B', state: 'stopped' },
    { tag: 'CV-2140', name: 'Discharge valve', state: 'manual' },
    { tag: 'CP-2150', name: 'Air compressor', state: 'maintenance' },
    { tag: 'AG-2112', name: 'Main agitator', state: 'fault' }
];

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;
            }

            /* ── Equipment list ──────────────────────────────────────────────── */
            const equipmentList = document.getElementById('equipmentList');

            EQUIPMENT.forEach(function (item) {
                const row = document.createElement('li'),
                    indicator = document.createElement('smart-multi-state-indicator');

                row.className = 'demo-row';
                indicator.states = EQUIPMENT_STATES;
                indicator.value = item.state;
                indicator.showLabel = true;

                const tag = document.createElement('span');

                tag.className = 'demo-tag';
                tag.textContent = item.tag;

                const name = document.createElement('span');

                name.className = 'demo-name';
                name.textContent = item.name;

                row.appendChild(indicator);
                row.appendChild(tag);
                row.appendChild(name);
                equipmentList.appendChild(row);
            });

            /* ── Shapes ──────────────────────────────────────────────────────── */
            ['shapeRound', 'shapeSquare', 'shapeBar'].forEach(function (id) {
                const element = document.getElementById(id);

                element.states = [{ value: 1, label: element.shape, severity: 'ok' }];
                element.value = 1;
            });

            /* ── Severities ──────────────────────────────────────────────────── */
            const severityRow = document.getElementById('severityRow');

            SEVERITIES.forEach(function (severity) {
                const cell = document.createElement('span'),
                    indicator = document.createElement('smart-multi-state-indicator');

                cell.className = 'severity-cell';
                indicator.states = [{ value: 1, label: severity, severity: severity, blink: severity === 'critical' }];
                indicator.value = 1;
                indicator.showLabel = true;

                cell.appendChild(indicator);
                severityRow.appendChild(cell);
            });

            /* ── Value-driven ────────────────────────────────────────────────── */
            const live = document.getElementById('liveIndicator'),
                liveCode = document.getElementById('liveCode');

            live.states = EQUIPMENT_STATES;

            let index = 0;

            function step() {
                const state = EQUIPMENT_STATES[index % EQUIPMENT_STATES.length];

                live.value = state.value;
                liveCode.textContent = "value = '" + state.value + "'";
                index++;
            }

            step();
            setInterval(step, 1600);
        });

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

    return (
        <div className="react-root" ref={root} theme="industrial">
            <div className="smart-demo-container">
                <section id="overview">
                    <h2>Smart.MultiStateIndicator is a lamp that shows one of several named equipment states.</h2>
                    <p>An LED shows on or off. Equipment often has more states than that: a pump can be running, stopped, in manual, faulted or unknown, and the operator has to tell them apart at a glance. The states are declared once and the component resolves its <code>value</code> against them.</p>
                </section>
                <section>
                    <h2>Equipment states</h2>
                    <ul className="demo-list" id="equipmentList"></ul>
                </section>
                <section>
                    <h2>Shapes</h2>
                    <div className="shape-row"><span> <MultiStateIndicator id="shapeRound" shape="round" showLabel></MultiStateIndicator> </span> <span> <MultiStateIndicator id="shapeSquare" shape="square" showLabel></MultiStateIndicator> </span> <span> <MultiStateIndicator id="shapeBar" shape="bar" showLabel></MultiStateIndicator> </span></div>
                </section>
                <section>
                    <h2>Severities</h2>
                    <p>The severity of a state selects a colour from the active theme, so the same markup works with an ISA-101 industrial theme and with the standard themes. A state can also blink, which ISA-18.2 uses for an alarm that is waiting for acknowledgement.</p>
                    <div className="severity-row" id="severityRow"></div>
                </section>
                <section>
                    <h2>Driven by a value</h2>
                    <p>This example cycles a single indicator through its declared states.</p>
                    <div className="live-row">
                        <MultiStateIndicator id="liveIndicator" showLabel></MultiStateIndicator>
                        <code id="liveCode">value = —</code>
                    </div>
                </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: 70ch;
}

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

/* ── Equipment list ──────────────────────────────────────────────────── */
.demo-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 460px;
}

.demo-row {
    display: grid;
    grid-template-columns: 130px 90px 1fr;
    align-items: center;
    gap: 12px;
    padding: 9px 4px;
    border-bottom: 1px solid var(--smart-border);
}

.demo-row:last-child {
    border-bottom: none;
}

.demo-tag {
    color: var(--smart-text-secondary-color);
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
}

/* ── Shapes & severities ─────────────────────────────────────────────── */
.shape-row,
.severity-row {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    align-items: center;
}

.severity-cell {
    display: inline-flex;
    align-items: center;
    min-width: 130px;
}

/* ── Live ────────────────────────────────────────────────────────────── */
.live-row {
    display: flex;
    align-items: center;
    gap: 18px;
}

/* ── 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.MultiStateIndicator is a lamp that shows one of several named equipment states.</h2>
            <p>
                An LED shows on or off. Equipment often has more states than that: a pump can be running, stopped, in manual, faulted or unknown, and the operator has to tell them apart at a glance. The states are declared once and the component resolves its <code>value</code> against them.
            </p>
        </section>

        <section>
            <h2>Equipment states</h2>
            <ul class="demo-list" id="equipmentList"></ul>
        </section>

        <section>
            <h2>Shapes</h2>
            <div class="shape-row">
                <span><smart-multi-state-indicator id="shapeRound" shape="round" show-label></smart-multi-state-indicator></span>
                <span><smart-multi-state-indicator id="shapeSquare" shape="square" show-label></smart-multi-state-indicator></span>
                <span><smart-multi-state-indicator id="shapeBar" shape="bar" show-label></smart-multi-state-indicator></span>
            </div>
        </section>

        <section>
            <h2>Severities</h2>
            <p>
                The severity of a state selects a colour from the active theme, so the same markup works with an ISA-101 industrial theme and with the standard themes. A state can also blink, which ISA-18.2 uses for an alarm that is waiting for acknowledgement.
            </p>
            <div class="severity-row" id="severityRow"></div>
        </section>

        <section>
            <h2>Driven by a value</h2>
            <p>This example cycles a single indicator through its declared states.</p>
            <div class="live-row">
                <smart-multi-state-indicator id="liveIndicator" show-label></smart-multi-state-indicator>
                <code id="liveCode">value = &mdash;</code>
            </div>
        </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.multistateindicator.js";


const EQUIPMENT_STATES = [
    { value: 'running', label: 'Running', severity: 'ok' },
    { value: 'stopped', label: 'Stopped', severity: 'off' },
    { value: 'manual', label: 'Manual', severity: 'manual' },
    { value: 'maintenance', label: 'Maintenance', severity: 'maintenance' },
    { value: 'fault', label: 'Fault', severity: 'critical', blink: true }
];

const SEVERITIES = ['ok', 'advisory', 'warning', 'critical', 'manual', 'maintenance', 'off', 'unknown'];

const EQUIPMENT = [
    { tag: 'P-2101A', name: 'Feed pump A', state: 'running' },
    { tag: 'P-2101B', name: 'Feed pump B', state: 'stopped' },
    { tag: 'CV-2140', name: 'Discharge valve', state: 'manual' },
    { tag: 'CP-2150', name: 'Air compressor', state: 'maintenance' },
    { tag: 'AG-2112', name: 'Main agitator', state: 'fault' }
];

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(() => {
        /* ── Equipment list ──────────────────────────────────────────────── */
        const equipmentList = document.getElementById('equipmentList');

        EQUIPMENT.forEach(function (item) {
            const row = document.createElement('li'),
                indicator = document.createElement('smart-multi-state-indicator');

            row.className = 'demo-row';
            indicator.states = EQUIPMENT_STATES;
            indicator.value = item.state;
            indicator.showLabel = true;

            const tag = document.createElement('span');

            tag.className = 'demo-tag';
            tag.textContent = item.tag;

            const name = document.createElement('span');

            name.className = 'demo-name';
            name.textContent = item.name;

            row.appendChild(indicator);
            row.appendChild(tag);
            row.appendChild(name);
            equipmentList.appendChild(row);
        });

        /* ── Shapes ──────────────────────────────────────────────────────── */
        ['shapeRound', 'shapeSquare', 'shapeBar'].forEach(function (id) {
            const element = document.getElementById(id);

            element.states = [{ value: 1, label: element.shape, severity: 'ok' }];
            element.value = 1;
        });

        /* ── Severities ──────────────────────────────────────────────────── */
        const severityRow = document.getElementById('severityRow');

        SEVERITIES.forEach(function (severity) {
            const cell = document.createElement('span'),
                indicator = document.createElement('smart-multi-state-indicator');

            cell.className = 'severity-cell';
            indicator.states = [{ value: 1, label: severity, severity: severity, blink: severity === 'critical' }];
            indicator.value = 1;
            indicator.showLabel = true;

            cell.appendChild(indicator);
            severityRow.appendChild(cell);
        });

        /* ── Value-driven ────────────────────────────────────────────────── */
        const live = document.getElementById('liveIndicator'),
            liveCode = document.getElementById('liveCode');

        live.states = EQUIPMENT_STATES;

        let index = 0;

        function step() {
            const state = EQUIPMENT_STATES[index % EQUIPMENT_STATES.length];

            live.value = state.value;
            liveCode.textContent = "value = '" + state.value + "'";
            index++;
        }

        step();
        setInterval(step, 1600);
      });
    });
  }
};
</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: 70ch;
}

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

/* ── Equipment list ──────────────────────────────────────────────────── */
.demo-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 460px;
}

.demo-row {
    display: grid;
    grid-template-columns: 130px 90px 1fr;
    align-items: center;
    gap: 12px;
    padding: 9px 4px;
    border-bottom: 1px solid var(--smart-border);
}

.demo-row:last-child {
    border-bottom: none;
}

.demo-tag {
    color: var(--smart-text-secondary-color);
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
}

/* ── Shapes & severities ─────────────────────────────────────────────── */
.shape-row,
.severity-row {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    align-items: center;
}

.severity-cell {
    display: inline-flex;
    align-items: center;
    min-width: 130px;
}

/* ── Live ────────────────────────────────────────────────────────────── */
.live-row {
    display: flex;
    align-items: center;
    gap: 18px;
}

/* ── 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>