Touch Keyboard

angular/app.component.html

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

        <section id="overview">
            <h2>Smart.TouchKeyboard is the keyboard for the panel PC that has none.</h2>
            <p>A number is typed on the numeric keypad; a batch comment, an operator's name or a recipe name is not,
               and a locked-down kiosk browser often has no system keyboard at all - or one that covers the very field it
               types into. The keyboard types where the caret is and raises the field's own <code>input</code> event, so
               whatever listens to the field hears it as typing.</p>
        </section>

        <section>
            <h2>Following focus</h2>
            <p>With <code>autoAttach</code> the keyboard types into whichever text field was last focused - here <code>target</code> names the form above it, so it follows that form's fields and no others. The line above
               the keys says which one, and what it holds. <b>Enter</b> in a one-line field raises <code>accept</code>; in
               a text area it starts a new line. Shift twice is caps lock; Backspace held repeats.</p>
            <div class="batch-form" id="batchForm">
                <label>Batch number <input id="batch" type="text" value="B-4471" maxlength="12" autocomplete="off" /></label>
                <label>Operator <input id="operator" type="text" value="" autocomplete="off" /></label>
                <label class="wide">Comment <textarea id="comment" rows="2"></textarea></label>
            </div>
            <div class="demo-row">
                <smart-touch-keyboard id="keyboard" target="#batchForm"></smart-touch-keyboard>
            </div>
            <p class="hint" id="note">Tap a field, then the keys.</p>
        </section>

        <section>
            <h2>Out of the way until a field is touched</h2>
            <p><code>mode="popup"</code> opens the keyboard beside the field touched - under it, or over it where the
               screen has no room - and <code>mode="docked"</code> across the bottom of the screen. Either goes away on
               <b>Done</b>, Escape, Enter in a one-line field, or a touch elsewhere. What it shows follows the field: a
               keypad for a number or a phone number, <b>&#64;</b> and <b>.com</b> for an email address. A number field's
               range is shown, and a half-typed number ("12.") is held until it is one.</p>
            <form class="setpoints" id="setpoints" autocomplete="off">
                <label>Batch <input id="spBatch" type="text" value="B-4471" /></label>
                <label>Quantity <input id="spQty" type="number" min="0" max="12000" value="8000" /></label>
                <label>Jacket temperature, °C <input id="spTemp" type="text" inputmode="decimal" value="72.5" /></label>
                <label>Duty phone <input id="spPhone" type="tel" value="" /></label>
                <label>Report to <input id="spMail" type="email" value="" /></label>
            </form>
            <smart-touch-keyboard id="floating" mode="popup" target="#setpoints"></smart-touch-keyboard>
            <div class="demo-actions">
                <label>Mode
                    <select id="floatingMode">
                        <option value="popup" selected>popup</option>
                        <option value="docked">docked</option>
                    </select>
                </label>
            </div>
            <p class="hint" id="floatingNote">Touch a field.</p>
        </section>

        <section>
            <h2>Layouts</h2>
            <p><code>layout</code> is <code>qwerty</code>, <code>qwertz</code> (with the German letters) or
               <code>azerty</code> (with the French ones). Without a field, the keyboard edits its own
               <code>value</code>.</p>
            <div class="demo-row">
                <smart-touch-keyboard id="german" layout="qwertz" value="Füllstand prüfen"></smart-touch-keyboard>
            </div>
            <div class="demo-actions">
                <label>Layout
                    <select id="layout">
                        <option value="qwerty">qwerty</option>
                        <option value="qwertz" selected>qwertz</option>
                        <option value="azerty">azerty</option>
                    </select>
                </label>
            </div>
        </section>

    </div>
</div>

angular/app.component.ts

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

import { TouchKeyboardModule } from 'smart-industrial/angular/touchkeyboard';

import { runDemo } from './demo';

/**
 * Smart.UI Industrial - TouchKeyboard 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: [TouchKeyboardModule],
    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 touch keyboard: it types into the field and raises the field's own events; the page
   listens to the fields, not to the keyboard, as it would for a real keyboard. */

export function runDemo(): void {
    const keyboard = document.getElementById('keyboard'),
        german = document.getElementById('german'),
        note = document.getElementById('note');

    document.querySelectorAll('.batch-form input, .batch-form textarea').forEach(function (field) {
        field.addEventListener('input', function () {
            note.textContent = field.labels[0].firstChild.textContent.trim() + ': "' + field.value + '"';
        });
    });

    keyboard.addEventListener('accept', function (event) {
        note.textContent = 'Accepted: "' + event.detail.value + '"';
    });

    keyboard.addEventListener('close', function () {
        note.textContent = 'The keyboard asked to be hidden; the page decides whether to hide it.';
    });

    /* the floating keyboard serves the whole form, and says what it did */
    const floating = document.getElementById('floating'),
        floatingNote = document.getElementById('floatingNote');

    document.querySelectorAll('#setpoints input').forEach(function (field) {
        field.addEventListener('input', function () {
            floatingNote.textContent = field.labels[0].firstChild.textContent.trim() + ': "' + field.value + '"';
        });
    });
    floating.addEventListener('accept', function (event) {
        floatingNote.textContent = 'Accepted "' + event.detail.value + '"; the keyboard went away.';
    });
    floating.addEventListener('close', function () {
        floatingNote.textContent = floatingNote.textContent.indexOf('Accepted') === 0 ? floatingNote.textContent : 'The keyboard went away.';
    });
    document.getElementById('floatingMode').addEventListener('change', function (event) {
        floating.mode = event.target.value;
    });

    document.getElementById('layout').addEventListener('change', function (event) {
        german.layout = event.target.value;
    });
}

angular/app.component.css

/* The keyboard spans a panel PC's width, as it would under an operator's form. */
.demo-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-start;
}

smart-touch-keyboard {
  width: 820px;
  max-width: 100%;
}

.batch-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  max-width: 820px;
  margin-bottom: 12px;
}

.batch-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--smart-text-secondary-color);
}

.batch-form label.wide {
  flex: 1 1 100%;
}

.batch-form input,
.batch-form textarea {
  min-height: 36px;
  padding: 4px 8px;
  border: 1px solid var(--smart-border);
  border-radius: 3px;
  background: var(--smart-background);
  color: var(--smart-text-color);
  font: inherit;
  font-size: 15px;
}

.batch-form textarea {
  resize: vertical;
}

.batch-form input:focus,
.batch-form textarea:focus {
  outline: 2px solid var(--smart-primary);
  outline-offset: 1px;
}

.setpoints {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px 16px;
  max-width: 820px;
  margin-bottom: 12px;
}

.setpoints label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--smart-text-secondary-color);
}

.setpoints input {
  min-height: 36px;
  padding: 4px 8px;
  border: 1px solid var(--smart-border);
  border-radius: 3px;
  background: var(--smart-background);
  color: var(--smart-text-color);
  font: inherit;
  font-size: 15px;
}

.setpoints input:focus {
  outline: 2px solid var(--smart-primary);
  outline-offset: 1px;
}

/* the floating keyboard is positioned by itself, not by the demo row */
smart-touch-keyboard#floating {
  max-width: none;
}

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


/* The demo logic is the HTML demo's: it feeds the elements the way a plant's data would. */
/* The touch keyboard: it types into the field and raises the field's own events; the page
   listens to the fields, not to the keyboard, as it would for a real keyboard. */

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 keyboard = document.getElementById('keyboard'),
                german = document.getElementById('german'),
                note = document.getElementById('note');

            document.querySelectorAll('.batch-form input, .batch-form textarea').forEach(function (field) {
                field.addEventListener('input', function () {
                    note.textContent = field.labels[0].firstChild.textContent.trim() + ': "' + field.value + '"';
                });
            });

            keyboard.addEventListener('accept', function (event) {
                note.textContent = 'Accepted: "' + event.detail.value + '"';
            });

            keyboard.addEventListener('close', function () {
                note.textContent = 'The keyboard asked to be hidden; the page decides whether to hide it.';
            });

            /* the floating keyboard serves the whole form, and says what it did */
            const floating = document.getElementById('floating'),
                floatingNote = document.getElementById('floatingNote');

            document.querySelectorAll('#setpoints input').forEach(function (field) {
                field.addEventListener('input', function () {
                    floatingNote.textContent = field.labels[0].firstChild.textContent.trim() + ': "' + field.value + '"';
                });
            });
            floating.addEventListener('accept', function (event) {
                floatingNote.textContent = 'Accepted "' + event.detail.value + '"; the keyboard went away.';
            });
            floating.addEventListener('close', function () {
                floatingNote.textContent = floatingNote.textContent.indexOf('Accepted') === 0 ? floatingNote.textContent : 'The keyboard went away.';
            });
            document.getElementById('floatingMode').addEventListener('change', function (event) {
                floating.mode = event.target.value;
            });

            document.getElementById('layout').addEventListener('change', function (event) {
                german.layout = event.target.value;
            });
        });

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

    return (
        <div className="react-root" ref={root} theme="industrial">
            <div className="smart-demo-container">
                <section id="overview">
                    <h2>Smart.TouchKeyboard is the keyboard for the panel PC that has none.</h2>
                    <p>A number is typed on the numeric keypad; a batch comment, an operator's name or a recipe name is not, and a locked-down kiosk browser often has no system keyboard at all - or one that covers the very field it types into. The keyboard types where the caret is and raises the field's own <code>input</code> event, so whatever listens to the field hears it as typing.</p>
                </section>
                <section>
                    <h2>Following focus</h2>
                    <p>With <code>autoAttach</code> the keyboard types into whichever text field was last focused - here <code>target</code> names the form above it, so it follows that form's fields and no others. The line above the keys says which one, and what it holds. <b>Enter</b> in a one-line field raises <code>accept</code>; in a text area it starts a new line. Shift twice is caps lock; Backspace held repeats.</p>
                    <div className="batch-form" id="batchForm">
                        <label>Batch number <input id="batch" type="text" defaultValue="B-4471" maxLength="12" autoComplete="off" /></label>
                        <label>Operator <input id="operator" type="text" defaultValue="" autoComplete="off" /></label>
                        <label className="wide">
                            Comment
                            <textarea id="comment" rows="2"></textarea>
                        </label>
                    </div>
                    <div className="demo-row">
                        <TouchKeyboard id="keyboard" target="#batchForm"></TouchKeyboard>
                    </div>
                    <p className="hint" id="note">Tap a field, then the keys.</p>
                </section>
                <section>
                    <h2>Out of the way until a field is touched</h2>
                    <p><code>mode="popup"</code> opens the keyboard beside the field touched - under it, or over it where the screen has no room - and <code>mode="docked"</code> across the bottom of the screen. Either goes away on <b>Done</b>, Escape, Enter in a one-line field, or a touch elsewhere. What it shows follows the field: a keypad for a number or a phone number, <b>@</b> and <b>.com</b> for an email address. A number field's range is shown, and a half-typed number ("12.") is held until it is one.</p>
                    <form className="setpoints" id="setpoints" autoComplete="off">
                        <label>Batch <input id="spBatch" type="text" defaultValue="B-4471" /></label>
                        <label>Quantity <input id="spQty" type="number" min="0" max="12000" defaultValue="8000" /></label>
                        <label>Jacket temperature, °C <input id="spTemp" type="text" inputMode="decimal" defaultValue="72.5" /></label>
                        <label>Duty phone <input id="spPhone" type="tel" defaultValue="" /></label>
                        <label>Report to <input id="spMail" type="email" defaultValue="" /></label>
                    </form>
                    <TouchKeyboard id="floating" mode="popup" target="#setpoints"></TouchKeyboard>
                    <div className="demo-actions">
                        <label>
                            Mode
                            <select id="floatingMode" defaultValue="popup"><option value="popup">popup</option> <option value="docked">docked</option></select>
                        </label>
                    </div>
                    <p className="hint" id="floatingNote">Touch a field.</p>
                </section>
                <section>
                    <h2>Layouts</h2>
                    <p><code>layout</code> is <code>qwerty</code>, <code>qwertz</code> (with the German letters) or <code>azerty</code> (with the French ones). Without a field, the keyboard edits its own <code>value</code>.</p>
                    <div className="demo-row">
                        <TouchKeyboard id="german" layout="qwertz" value="Füllstand prüfen"></TouchKeyboard>
                    </div>
                    <div className="demo-actions">
                        <label>
                            Layout
                            <select id="layout" defaultValue="qwertz"><option value="qwerty">qwerty</option> <option value="qwertz">qwertz</option> <option value="azerty">azerty</option></select>
                        </label>
                    </div>
                </section>
            </div>
        </div>
    );
};

export default App;

react/App.css

/* The keyboard spans a panel PC's width, as it would under an operator's form. */
.demo-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-start;
}

smart-touch-keyboard {
  width: 820px;
  max-width: 100%;
}

.batch-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  max-width: 820px;
  margin-bottom: 12px;
}

.batch-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--smart-text-secondary-color);
}

.batch-form label.wide {
  flex: 1 1 100%;
}

.batch-form input,
.batch-form textarea {
  min-height: 36px;
  padding: 4px 8px;
  border: 1px solid var(--smart-border);
  border-radius: 3px;
  background: var(--smart-background);
  color: var(--smart-text-color);
  font: inherit;
  font-size: 15px;
}

.batch-form textarea {
  resize: vertical;
}

.batch-form input:focus,
.batch-form textarea:focus {
  outline: 2px solid var(--smart-primary);
  outline-offset: 1px;
}

.setpoints {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px 16px;
  max-width: 820px;
  margin-bottom: 12px;
}

.setpoints label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--smart-text-secondary-color);
}

.setpoints input {
  min-height: 36px;
  padding: 4px 8px;
  border: 1px solid var(--smart-border);
  border-radius: 3px;
  background: var(--smart-background);
  color: var(--smart-text-color);
  font: inherit;
  font-size: 15px;
}

.setpoints input:focus {
  outline: 2px solid var(--smart-primary);
  outline-offset: 1px;
}

/* the floating keyboard is positioned by itself, not by the demo row */
smart-touch-keyboard#floating {
  max-width: none;
}

/* ── 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.TouchKeyboard is the keyboard for the panel PC that has none.</h2>
            <p>A number is typed on the numeric keypad; a batch comment, an operator's name or a recipe name is not,
               and a locked-down kiosk browser often has no system keyboard at all - or one that covers the very field it
               types into. The keyboard types where the caret is and raises the field's own <code>input</code> event, so
               whatever listens to the field hears it as typing.</p>
        </section>

        <section>
            <h2>Following focus</h2>
            <p>With <code>autoAttach</code> the keyboard types into whichever text field was last focused - here <code>target</code> names the form above it, so it follows that form's fields and no others. The line above
               the keys says which one, and what it holds. <b>Enter</b> in a one-line field raises <code>accept</code>; in
               a text area it starts a new line. Shift twice is caps lock; Backspace held repeats.</p>
            <div class="batch-form" id="batchForm">
                <label>Batch number <input id="batch" type="text" value="B-4471" maxlength="12" autocomplete="off" /></label>
                <label>Operator <input id="operator" type="text" value="" autocomplete="off" /></label>
                <label class="wide">Comment <textarea id="comment" rows="2"></textarea></label>
            </div>
            <div class="demo-row">
                <smart-touch-keyboard id="keyboard" target="#batchForm"></smart-touch-keyboard>
            </div>
            <p class="hint" id="note">Tap a field, then the keys.</p>
        </section>

        <section>
            <h2>Out of the way until a field is touched</h2>
            <p><code>mode="popup"</code> opens the keyboard beside the field touched - under it, or over it where the
               screen has no room - and <code>mode="docked"</code> across the bottom of the screen. Either goes away on
               <b>Done</b>, Escape, Enter in a one-line field, or a touch elsewhere. What it shows follows the field: a
               keypad for a number or a phone number, <b>@</b> and <b>.com</b> for an email address. A number field's
               range is shown, and a half-typed number ("12.") is held until it is one.</p>
            <form class="setpoints" id="setpoints" autocomplete="off">
                <label>Batch <input id="spBatch" type="text" value="B-4471" /></label>
                <label>Quantity <input id="spQty" type="number" min="0" max="12000" value="8000" /></label>
                <label>Jacket temperature, °C <input id="spTemp" type="text" inputmode="decimal" value="72.5" /></label>
                <label>Duty phone <input id="spPhone" type="tel" value="" /></label>
                <label>Report to <input id="spMail" type="email" value="" /></label>
            </form>
            <smart-touch-keyboard id="floating" mode="popup" target="#setpoints"></smart-touch-keyboard>
            <div class="demo-actions">
                <label>Mode
                    <select id="floatingMode">
                        <option value="popup" selected>popup</option>
                        <option value="docked">docked</option>
                    </select>
                </label>
            </div>
            <p class="hint" id="floatingNote">Touch a field.</p>
        </section>

        <section>
            <h2>Layouts</h2>
            <p><code>layout</code> is <code>qwerty</code>, <code>qwertz</code> (with the German letters) or
               <code>azerty</code> (with the French ones). Without a field, the keyboard edits its own
               <code>value</code>.</p>
            <div class="demo-row">
                <smart-touch-keyboard id="german" layout="qwertz" value="Füllstand prüfen"></smart-touch-keyboard>
            </div>
            <div class="demo-actions">
                <label>Layout
                    <select id="layout">
                        <option value="qwerty">qwerty</option>
                        <option value="qwertz" selected>qwertz</option>
                        <option value="azerty">azerty</option>
                    </select>
                </label>
            </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.touchkeyboard.js";


/* The touch keyboard: it types into the field and raises the field's own events; the page
   listens to the fields, not to the keyboard, as it would for a real keyboard. */

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 keyboard = document.getElementById('keyboard'),
            german = document.getElementById('german'),
            note = document.getElementById('note');

        document.querySelectorAll('.batch-form input, .batch-form textarea').forEach(function (field) {
            field.addEventListener('input', function () {
                note.textContent = field.labels[0].firstChild.textContent.trim() + ': "' + field.value + '"';
            });
        });

        keyboard.addEventListener('accept', function (event) {
            note.textContent = 'Accepted: "' + event.detail.value + '"';
        });

        keyboard.addEventListener('close', function () {
            note.textContent = 'The keyboard asked to be hidden; the page decides whether to hide it.';
        });

        /* the floating keyboard serves the whole form, and says what it did */
        const floating = document.getElementById('floating'),
            floatingNote = document.getElementById('floatingNote');

        document.querySelectorAll('#setpoints input').forEach(function (field) {
            field.addEventListener('input', function () {
                floatingNote.textContent = field.labels[0].firstChild.textContent.trim() + ': "' + field.value + '"';
            });
        });
        floating.addEventListener('accept', function (event) {
            floatingNote.textContent = 'Accepted "' + event.detail.value + '"; the keyboard went away.';
        });
        floating.addEventListener('close', function () {
            floatingNote.textContent = floatingNote.textContent.indexOf('Accepted') === 0 ? floatingNote.textContent : 'The keyboard went away.';
        });
        document.getElementById('floatingMode').addEventListener('change', function (event) {
            floating.mode = event.target.value;
        });

        document.getElementById('layout').addEventListener('change', function (event) {
            german.layout = event.target.value;
        });
      });
    });
  }
};
</script>

<style>
/* The keyboard spans a panel PC's width, as it would under an operator's form. */
.demo-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-start;
}

smart-touch-keyboard {
  width: 820px;
  max-width: 100%;
}

.batch-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  max-width: 820px;
  margin-bottom: 12px;
}

.batch-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--smart-text-secondary-color);
}

.batch-form label.wide {
  flex: 1 1 100%;
}

.batch-form input,
.batch-form textarea {
  min-height: 36px;
  padding: 4px 8px;
  border: 1px solid var(--smart-border);
  border-radius: 3px;
  background: var(--smart-background);
  color: var(--smart-text-color);
  font: inherit;
  font-size: 15px;
}

.batch-form textarea {
  resize: vertical;
}

.batch-form input:focus,
.batch-form textarea:focus {
  outline: 2px solid var(--smart-primary);
  outline-offset: 1px;
}

.setpoints {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px 16px;
  max-width: 820px;
  margin-bottom: 12px;
}

.setpoints label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--smart-text-secondary-color);
}

.setpoints input {
  min-height: 36px;
  padding: 4px 8px;
  border: 1px solid var(--smart-border);
  border-radius: 3px;
  background: var(--smart-background);
  color: var(--smart-text-color);
  font: inherit;
  font-size: 15px;
}

.setpoints input:focus {
  outline: 2px solid var(--smart-primary);
  outline-offset: 1px;
}

/* the floating keyboard is positioned by itself, not by the demo row */
smart-touch-keyboard#floating {
  max-width: none;
}

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