Numeric Keypad

angular/app.component.html

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

        <section id="overview">
            <h2>Smart.NumericKeypad is an on-screen keypad for entering a numeric value on a touch panel. It validates the entry against the limits, keeps the current value in view and has keys sized for gloved use.</h2>
            <p>
                A value outside the limits is not accepted, not clamped and not sent. The entry stays on the screen with the reason next to it. Accepting an entry raises the <code>change</code> event; the application writes the value and the reading on the screen follows the value reported by the plant.
            </p>
        </section>

        <section>
            <h2>Inline keypad with limits and precision</h2>
            <p>
                The keypad opens with the current value, which is replaced by the first key press. The precision is one decimal place, so a key that would add a second decimal is ignored. Try entering 130 and pressing Enter to see the range check. A physical keyboard can also type into the keypad while it has focus; Enter accepts and Escape cancels.
            </p>
            <div class="two-up">
                <smart-numeric-keypad id="flow" label="FIC-101 setpoint" unit="m³/h" [min]="0" [max]="120" [precisionDigits]="1" [allowNegative]="false"></smart-numeric-keypad>
                <div class="demo-panel">
                    <h3>Values received by the application</h3>
                    <div class="readout"><span class="readout-label">Setpoint in force</span><span id="setpoint" class="readout-value">78.0 m³/h</span></div>
                    <ol id="log" class="log"></ol>
                    <div class="demo-actions">
                        <label><input type="checkbox" id="touch" /> Touch density</label>
                        <label><input type="checkbox" id="stepsOn" checked /> Step keys</label>
                    </div>
                </div>
            </div>
        </section>

        <section>
            <h2>Popup keypad</h2>
            <p>
                On a panel the keypad appears when a value is pressed and closes when the entry is accepted or cancelled. Press the temperature value to open it.
            </p>
            <button type="button" class="value-button" id="tempButton">
                <span class="value-button-label">TIC-204 setpoint</span>
                <span class="value-button-value" id="tempValue">65.0 °C</span>
            </button>
            <div id="popup" class="popup" hidden>
                <smart-numeric-keypad id="temp" label="TIC-204 setpoint" unit="°C" [min]="20" [max]="95" [precisionDigits]="1" layout="phone"></smart-numeric-keypad>
            </div>
        </section>

    </div>
</div>

angular/app.component.ts

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

import { NumericKeypadModule } from 'smart-industrial/angular/numerickeypad';

import { runDemo } from './demo';

/**
 * Smart.UI Industrial - NumericKeypad 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: [NumericKeypadModule],
    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. */

/* The page plays the host: it takes the accepted value and writes it where it goes, and
   it shows the refusals. Replace the log with a session write and nothing changes. */

export function runDemo(): void {
    /* ── Inline ─────────────────────────────────────────────────────────── */
    const flow = document.getElementById('flow'),
        setpoint = document.getElementById('setpoint'),
        log = document.getElementById('log'),
        touch = document.getElementById('touch'),
        stepsOn = document.getElementById('stepsOn');

    function note(text) {
        const item = document.createElement('li');

        item.textContent = new Date().toLocaleTimeString('en-GB', { hour12: false }) + '  ' + text;
        log.insertBefore(item, log.firstChild);

        while (log.children.length > 6) {
            log.removeChild(log.lastChild);
        }
    }

    flow.steps = [-10, -1, 1, 10];
    flow.open(78);

    flow.addEventListener('change', function (event) {
        setpoint.textContent = event.detail.value.toFixed(1) + ' m³/h';
        note('change → ' + event.detail.value.toFixed(1) + ' (was ' +
            (event.detail.previousValue === null ? '—' : event.detail.previousValue.toFixed(1)) + ') - written to FIC-101.SP');
    });

    flow.addEventListener('invalid', function (event) {
        note('refused "' + event.detail.text + '": ' + event.detail.reason + ' - nothing written');
    });

    flow.addEventListener('cancel', function () {
        note('cancelled');
    });

    touch.addEventListener('change', function () {
        flow.density = touch.checked ? 'touch' : 'normal';
    });

    stepsOn.addEventListener('change', function () {
        flow.steps = stepsOn.checked ? [-10, -1, 1, 10] : [];
    });

    /* ── Popup ──────────────────────────────────────────────────────────── */
    const tempButton = document.getElementById('tempButton'),
        tempValue = document.getElementById('tempValue'),
        popup = document.getElementById('popup'),
        temp = document.getElementById('temp');

    let temperature = 65;

    tempButton.addEventListener('click', function () {
        popup.hidden = false;
        temp.open(temperature);
    });

    temp.addEventListener('change', function (event) {
        temperature = event.detail.value;
        tempValue.textContent = temperature.toFixed(1) + ' °C';
        popup.hidden = true;
        tempButton.focus();
    });

    temp.addEventListener('cancel', function () {
        popup.hidden = true;
        tempButton.focus();
    });
}

angular/app.component.css

.two-up {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 24px;
}

.demo-panel {
    flex: 1 1 280px;
    min-width: 0;
}

.demo-panel h3 {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.readout {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 8px 10px;
    border: 1px solid var(--smart-border);
    border-radius: 3px;
    font-size: 13px;
}

.readout-value {
    font-size: 20px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.log {
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    opacity: 0.8;
}

.log li {
    padding: 2px 0;
}

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

.demo-actions label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
}

.value-button {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 200px;
    padding: 8px 12px;
    font: inherit;
    text-align: left;
    color: var(--smart-text-color);
    background: var(--smart-surface);
    border: 1px solid var(--smart-border);
    border-radius: 4px;
    cursor: pointer;
}

.value-button-label {
    font-size: 11px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    opacity: 0.75;
}

.value-button-value {
    font-size: 22px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.popup {
    margin-top: 12px;
}

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


/* The demo logic is the HTML demo's: it feeds the elements the way a plant's data would. */
/* The page plays the host: it takes the accepted value and writes it where it goes, and
   it shows the refusals. Replace the log with a session write and nothing changes. */

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

            /* ── Inline ─────────────────────────────────────────────────────────── */
            const flow = document.getElementById('flow'),
                setpoint = document.getElementById('setpoint'),
                log = document.getElementById('log'),
                touch = document.getElementById('touch'),
                stepsOn = document.getElementById('stepsOn');

            function note(text) {
                const item = document.createElement('li');

                item.textContent = new Date().toLocaleTimeString('en-GB', { hour12: false }) + '  ' + text;
                log.insertBefore(item, log.firstChild);

                while (log.children.length > 6) {
                    log.removeChild(log.lastChild);
                }
            }

            flow.steps = [-10, -1, 1, 10];
            flow.open(78);

            flow.addEventListener('change', function (event) {
                setpoint.textContent = event.detail.value.toFixed(1) + ' m³/h';
                note('change → ' + event.detail.value.toFixed(1) + ' (was ' +
                    (event.detail.previousValue === null ? '—' : event.detail.previousValue.toFixed(1)) + ') - written to FIC-101.SP');
            });

            flow.addEventListener('invalid', function (event) {
                note('refused "' + event.detail.text + '": ' + event.detail.reason + ' - nothing written');
            });

            flow.addEventListener('cancel', function () {
                note('cancelled');
            });

            touch.addEventListener('change', function () {
                flow.density = touch.checked ? 'touch' : 'normal';
            });

            stepsOn.addEventListener('change', function () {
                flow.steps = stepsOn.checked ? [-10, -1, 1, 10] : [];
            });

            /* ── Popup ──────────────────────────────────────────────────────────── */
            const tempButton = document.getElementById('tempButton'),
                tempValue = document.getElementById('tempValue'),
                popup = document.getElementById('popup'),
                temp = document.getElementById('temp');

            let temperature = 65;

            tempButton.addEventListener('click', function () {
                popup.hidden = false;
                temp.open(temperature);
            });

            temp.addEventListener('change', function (event) {
                temperature = event.detail.value;
                tempValue.textContent = temperature.toFixed(1) + ' °C';
                popup.hidden = true;
                tempButton.focus();
            });

            temp.addEventListener('cancel', function () {
                popup.hidden = true;
                tempButton.focus();
            });
        });

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

    return (
        <div className="react-root" ref={root} theme="industrial">
            <div className="smart-demo-container">
                <section id="overview">
                    <h2>Smart.NumericKeypad is an on-screen keypad for entering a numeric value on a touch panel. It validates the entry against the limits, keeps the current value in view and has keys sized for gloved use.</h2>
                    <p>A value outside the limits is not accepted, not clamped and not sent. The entry stays on the screen with the reason next to it. Accepting an entry raises the <code>change</code> event; the application writes the value and the reading on the screen follows the value reported by the plant.</p>
                </section>
                <section>
                    <h2>Inline keypad with limits and precision</h2>
                    <p>The keypad opens with the current value, which is replaced by the first key press. The precision is one decimal place, so a key that would add a second decimal is ignored. Try entering 130 and pressing Enter to see the range check. A physical keyboard can also type into the keypad while it has focus; Enter accepts and Escape cancels.</p>
                    <div className="two-up">
                        <NumericKeypad id="flow" label="FIC-101 setpoint" unit="m³/h" min={0} max={120} precisionDigits={1} allowNegative={false}></NumericKeypad>
                        <div className="demo-panel">
                            <h3>Values received by the application</h3>
                            <div className="readout"><span className="readout-label">Setpoint in force</span><span id="setpoint" className="readout-value">78.0 m³/h</span></div>
                            <ol id="log" className="log"></ol>
                            <div className="demo-actions">
                                <label><input type="checkbox" id="touch" /> Touch density</label>
                                <label><input type="checkbox" id="stepsOn" defaultChecked /> Step keys</label>
                            </div>
                        </div>
                    </div>
                </section>
                <section>
                    <h2>Popup keypad</h2>
                    <p>On a panel the keypad appears when a value is pressed and closes when the entry is accepted or cancelled. Press the temperature value to open it.</p>
                    <button type="button" className="value-button" id="tempButton"><span className="value-button-label">TIC-204 setpoint</span> <span className="value-button-value" id="tempValue">65.0 °C</span></button>
                    <div id="popup" className="popup" hidden>
                        <NumericKeypad id="temp" label="TIC-204 setpoint" unit="°C" min={20} max={95} precisionDigits={1} layout="phone"></NumericKeypad>
                    </div>
                </section>
            </div>
        </div>
    );
};

export default App;

react/App.css

.two-up {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 24px;
}

.demo-panel {
    flex: 1 1 280px;
    min-width: 0;
}

.demo-panel h3 {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.readout {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 8px 10px;
    border: 1px solid var(--smart-border);
    border-radius: 3px;
    font-size: 13px;
}

.readout-value {
    font-size: 20px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.log {
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    opacity: 0.8;
}

.log li {
    padding: 2px 0;
}

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

.demo-actions label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
}

.value-button {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 200px;
    padding: 8px 12px;
    font: inherit;
    text-align: left;
    color: var(--smart-text-color);
    background: var(--smart-surface);
    border: 1px solid var(--smart-border);
    border-radius: 4px;
    cursor: pointer;
}

.value-button-label {
    font-size: 11px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    opacity: 0.75;
}

.value-button-value {
    font-size: 22px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.popup {
    margin-top: 12px;
}

/* ── 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.NumericKeypad is an on-screen keypad for entering a numeric value on a touch panel. It validates the entry against the limits, keeps the current value in view and has keys sized for gloved use.</h2>
            <p>
                A value outside the limits is not accepted, not clamped and not sent. The entry stays on the screen with the reason next to it. Accepting an entry raises the <code>change</code> event; the application writes the value and the reading on the screen follows the value reported by the plant.
            </p>
        </section>

        <section>
            <h2>Inline keypad with limits and precision</h2>
            <p>
                The keypad opens with the current value, which is replaced by the first key press. The precision is one decimal place, so a key that would add a second decimal is ignored. Try entering 130 and pressing Enter to see the range check. A physical keyboard can also type into the keypad while it has focus; Enter accepts and Escape cancels.
            </p>
            <div class="two-up">
                <smart-numeric-keypad id="flow" label="FIC-101 setpoint" unit="m³/h" min="0" max="120" precision-digits="1" allow-negative="false"></smart-numeric-keypad>
                <div class="demo-panel">
                    <h3>Values received by the application</h3>
                    <div class="readout"><span class="readout-label">Setpoint in force</span><span id="setpoint" class="readout-value">78.0 m³/h</span></div>
                    <ol id="log" class="log"></ol>
                    <div class="demo-actions">
                        <label><input type="checkbox" id="touch" /> Touch density</label>
                        <label><input type="checkbox" id="stepsOn" checked /> Step keys</label>
                    </div>
                </div>
            </div>
        </section>

        <section>
            <h2>Popup keypad</h2>
            <p>
                On a panel the keypad appears when a value is pressed and closes when the entry is accepted or cancelled. Press the temperature value to open it.
            </p>
            <button type="button" class="value-button" id="tempButton">
                <span class="value-button-label">TIC-204 setpoint</span>
                <span class="value-button-value" id="tempValue">65.0 °C</span>
            </button>
            <div id="popup" class="popup" hidden>
                <smart-numeric-keypad id="temp" label="TIC-204 setpoint" unit="°C" min="20" max="95" precision-digits="1" layout="phone"></smart-numeric-keypad>
            </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.numerickeypad.js";


/* The page plays the host: it takes the accepted value and writes it where it goes, and
   it shows the refusals. Replace the log with a session write and nothing changes. */

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(() => {
        /* ── Inline ─────────────────────────────────────────────────────────── */
        const flow = document.getElementById('flow'),
            setpoint = document.getElementById('setpoint'),
            log = document.getElementById('log'),
            touch = document.getElementById('touch'),
            stepsOn = document.getElementById('stepsOn');

        function note(text) {
            const item = document.createElement('li');

            item.textContent = new Date().toLocaleTimeString('en-GB', { hour12: false }) + '  ' + text;
            log.insertBefore(item, log.firstChild);

            while (log.children.length > 6) {
                log.removeChild(log.lastChild);
            }
        }

        flow.steps = [-10, -1, 1, 10];
        flow.open(78);

        flow.addEventListener('change', function (event) {
            setpoint.textContent = event.detail.value.toFixed(1) + ' m³/h';
            note('change → ' + event.detail.value.toFixed(1) + ' (was ' +
                (event.detail.previousValue === null ? '—' : event.detail.previousValue.toFixed(1)) + ') - written to FIC-101.SP');
        });

        flow.addEventListener('invalid', function (event) {
            note('refused "' + event.detail.text + '": ' + event.detail.reason + ' - nothing written');
        });

        flow.addEventListener('cancel', function () {
            note('cancelled');
        });

        touch.addEventListener('change', function () {
            flow.density = touch.checked ? 'touch' : 'normal';
        });

        stepsOn.addEventListener('change', function () {
            flow.steps = stepsOn.checked ? [-10, -1, 1, 10] : [];
        });

        /* ── Popup ──────────────────────────────────────────────────────────── */
        const tempButton = document.getElementById('tempButton'),
            tempValue = document.getElementById('tempValue'),
            popup = document.getElementById('popup'),
            temp = document.getElementById('temp');

        let temperature = 65;

        tempButton.addEventListener('click', function () {
            popup.hidden = false;
            temp.open(temperature);
        });

        temp.addEventListener('change', function (event) {
            temperature = event.detail.value;
            tempValue.textContent = temperature.toFixed(1) + ' °C';
            popup.hidden = true;
            tempButton.focus();
        });

        temp.addEventListener('cancel', function () {
            popup.hidden = true;
            tempButton.focus();
        });
      });
    });
  }
};
</script>

<style>
.two-up {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 24px;
}

.demo-panel {
    flex: 1 1 280px;
    min-width: 0;
}

.demo-panel h3 {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.readout {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 8px 10px;
    border: 1px solid var(--smart-border);
    border-radius: 3px;
    font-size: 13px;
}

.readout-value {
    font-size: 20px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.log {
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    opacity: 0.8;
}

.log li {
    padding: 2px 0;
}

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

.demo-actions label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
}

.value-button {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 200px;
    padding: 8px 12px;
    font: inherit;
    text-align: left;
    color: var(--smart-text-color);
    background: var(--smart-surface);
    border: 1px solid var(--smart-border);
    border-radius: 4px;
    cursor: pointer;
}

.value-button-label {
    font-size: 11px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    opacity: 0.75;
}

.value-button-value {
    font-size: 22px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.popup {
    margin-top: 12px;
}

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