Permissive

angular/app.component.html

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

        <section id="overview">
            <h2>Smart.Permissive displays the conditions a device needs before it can start, with whether each condition is met, so the operator can see which condition is preventing the start.</h2>
            <p>
                ISA-101 recommends a permissive list next to every device that can be started, so that a start button that does nothing is not left unexplained. Colour is used only for the conditions that block: a met condition is shown in a neutral colour, so the one condition that is not met stands out in a list of twelve.
            </p>
        </section>

        <section>
            <h2>Start permissives for a feed pump</h2>
            <p>
                Toggle the conditions to see the verdict change. The advisory condition is listed but never blocks the start. Enable bypass and press a condition: the component raises the <code>bypassRequest</code> event and does not change anything itself. In this demo the page acts as the application and applies the bypass with the user name.
            </p>
            <div class="two-up">
                <smart-permissive id="start" label="P-2101A start permissives" [allowBypass]="true"></smart-permissive>
                <div class="demo-panel">
                    <h3>Field simulation</h3>
                    <div id="switches" class="switches"></div>
                    <label class="operator">Operator <input type="text" id="operator" value="J. Moreau" /></label>
                    <p class="hint" id="log">&mdash;</p>
                </div>
            </div>
        </section>

        <section>
            <h2>Interlocks on a running compressor and first-out</h2>
            <p>
                An interlock trips a running device. When it does, the condition that went unhealthy first is the one that matters; the others followed as a consequence. The first-out condition is determined from the timestamps supplied by the application. Press <em>Trip</em>: the high discharge temperature is stamped 400 ms before the vibration and the motor overload that followed it, and it is the one marked as first-out.
            </p>
            <smart-permissive id="interlocks" mode="interlock" label="CP-2150 interlocks"></smart-permissive>
            <div class="demo-actions">
                <button type="button" id="trip">Trip</button>
                <button type="button" id="resetTrip" disabled>Reset</button>
                <label><input type="checkbox" id="onlyBlocking" /> Show only what blocks</label>
                <span id="interlockState" class="stats"></span>
            </div>
        </section>

    </div>
</div>

angular/app.component.ts

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

import { PermissiveModule } from 'smart-industrial/angular/permissive';

import { runDemo } from './demo';

/**
 * Smart.UI Industrial - Permissive 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: [PermissiveModule],
    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 owns the condition list, applies bypasses when asked to,
   and hands the element a fresh array each time. Replace the switches with a tag
   subscription and the bypass handler with a write to the safety PLC's bypass register,
   and the element does not change. */

export function runDemo(): void {
    /* ── Start permissives ──────────────────────────────────────────────── */
    const start = document.getElementById('start'),
        switches = document.getElementById('switches'),
        operator = document.getElementById('operator'),
        log = document.getElementById('log');

    const now = Date.now();

    let conditions = [
        { id: 'estop', label: 'Emergency stop healthy', tag: 'ES-2100', satisfied: true, timestamp: now - 86400000 * 3 },
        { id: 'suction', label: 'Suction valve open', tag: 'XV-2101', satisfied: true, timestamp: now - 3600000 * 2 },
        { id: 'level', label: 'Feed tank level above 20 %', tag: 'LT-2201', value: '14.2 %', satisfied: false, timestamp: now - 240000 },
        { id: 'discharge', label: 'Discharge valve open', tag: 'XV-2102', satisfied: false, timestamp: now - 90000 },
        { id: 'seal', label: 'Seal flush flow present', tag: 'FS-2103', satisfied: true, timestamp: now - 3600000 * 5 },
        { id: 'remote', label: 'Local selector in REMOTE', tag: 'HS-2101', satisfied: true, timestamp: now - 3600000 * 5 },
        { id: 'standby', label: 'Standby pump P-2101B stopped', tag: 'P-2101B', satisfied: true, timestamp: now - 3600000 * 9 },
        { id: 'warm', label: 'Bearing temperature within 5 K of ambient', tag: 'TT-2109', value: '3.1 K',
            satisfied: true, required: false, description: 'Cold-start check, advisory', timestamp: now - 600000 }
    ];

    function publish() {
        /* A new array every time: the framework compares property values, and the array
           the element already holds is deep-equal to itself however much it was mutated. */
        start.conditions = conditions.map(function (condition) {
            return Object.assign({}, condition);
        });
    }

    function renderSwitches() {
        switches.innerHTML = conditions.map(function (condition) {
            return '<label><input type="checkbox" data-id="' + condition.id + '"' +
                (condition.satisfied ? ' checked' : '') + ' /> ' + condition.label + '</label>';
        }).join('');
    }

    switches.addEventListener('change', function (event) {
        const box = event.target.closest('input[data-id]');

        if (!box) {
            return;
        }

        conditions.forEach(function (condition) {
            if (condition.id === box.getAttribute('data-id')) {
                condition.satisfied = box.checked;
                condition.timestamp = Date.now();
                /* A condition that comes back clears its bypass - the reason for it is gone. */
                if (box.checked) {
                    condition.bypassed = false;
                    condition.bypassedBy = undefined;
                }
            }
        });

        publish();
    });

    /* The bypass round trip. The element asked; the host decides and answers with data. */
    start.addEventListener('bypassRequest', function (event) {
        const name = operator.value.trim() || 'operator';

        conditions.forEach(function (condition) {
            if (condition.id === event.detail.id) {
                condition.bypassed = event.detail.bypass;
                condition.bypassedBy = event.detail.bypass ? name : undefined;
            }
        });

        log.textContent = (event.detail.bypass ? 'Bypass applied to ' : 'Bypass removed from ') +
            event.detail.condition.label + ' by ' + name + ' at ' +
            new Date().toLocaleTimeString('en-GB', { hour12: false }) + ' - written to the audit trail by the host, not the element.';

        publish();
    });

    start.addEventListener('readyChange', function (event) {
        log.textContent = event.detail.ready ?
            'P-2101A may now be started.' :
            'Start blocked by ' + event.detail.blocking.join(', ') + '.';
    });

    renderSwitches();
    publish();

    /* ── Interlocks ─────────────────────────────────────────────────────── */
    const interlocks = document.getElementById('interlocks'),
        trip = document.getElementById('trip'),
        resetTrip = document.getElementById('resetTrip'),
        onlyBlocking = document.getElementById('onlyBlocking'),
        interlockState = document.getElementById('interlockState');

    function healthy() {
        const at = Date.now() - 3600000 * 6;

        return [
            { id: 'temp', label: 'Discharge temperature below 108 °C', tag: 'TT-2151', value: '96.4 °C', satisfied: true, timestamp: at },
            { id: 'vib', label: 'Vibration below 11.2 mm/s', tag: 'VT-2150', value: '3.9 mm/s', satisfied: true, timestamp: at },
            { id: 'overload', label: 'Motor overload relay healthy', tag: 'M-2150', satisfied: true, timestamp: at },
            { id: 'oil', label: 'Lube oil pressure above 1.2 bar', tag: 'PT-2152', value: '2.1 bar', satisfied: true, timestamp: at },
            { id: 'estop', label: 'Emergency stop healthy', tag: 'ES-2150', satisfied: true, timestamp: at }
        ];
    }

    interlocks.conditions = healthy();

    function paintInterlockState() {
        const summary = interlocks.summary();

        interlockState.textContent = summary.ready ?
            'running' : 'tripped - first out: ' + (summary.firstOut || 'not determinable');
    }

    trip.addEventListener('click', function () {
        const at = Date.now(),
            list = healthy();

        /* The temperature went first; the vibration and the overload followed as the
           machine laboured. 400 ms apart, which is nothing on a screen and everything in
           a trip record. */
        list[0] = Object.assign(list[0], { satisfied: false, value: '112.7 °C', timestamp: at - 400 });
        list[1] = Object.assign(list[1], { satisfied: false, value: '14.8 mm/s', timestamp: at - 150 });
        list[2] = Object.assign(list[2], { satisfied: false, timestamp: at });

        interlocks.conditions = list;
        trip.disabled = true;
        resetTrip.disabled = false;
        paintInterlockState();
    });

    resetTrip.addEventListener('click', function () {
        interlocks.conditions = healthy();
        trip.disabled = false;
        resetTrip.disabled = true;
        paintInterlockState();
    });

    onlyBlocking.addEventListener('change', function () {
        interlocks.showSatisfied = !onlyBlocking.checked;
    });

    paintInterlockState();
}

angular/app.component.css

smart-permissive {
    width: 100%;
}

.two-up {
    display: grid;
    grid-template-columns: minmax(320px, 3fr) minmax(240px, 2fr);
    gap: 20px;
    align-items: start;
}

@media (max-width: 760px) {
    .two-up {
        grid-template-columns: 1fr;
    }
}

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

.switches {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
}

.switches label {
    display: flex;
    align-items: center;
    gap: 6px;
}

.operator {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    font-size: 13px;
}

.operator input {
    font: inherit;
    padding: 2px 6px;
}

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

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

.stats {
    font-size: 12px;
    opacity: 0.75;
}

.hint {
    margin-top: 8px;
    font-size: 12px;
    opacity: 0.75;
}

smart-permissive {
    display: block;
    padding: 12px 16px 10px;
    border: 1px solid var(--smart-border);
    border-radius: var(--smart-border-radius);
    background: var(--smart-industrial-panel-background, var(--smart-surface));
}

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


/* 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 owns the condition list, applies bypasses when asked to,
   and hands the element a fresh array each time. Replace the switches with a tag
   subscription and the bypass handler with a write to the safety PLC's bypass register,
   and the element does not change. */

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

            /* ── Start permissives ──────────────────────────────────────────────── */
            const start = document.getElementById('start'),
                switches = document.getElementById('switches'),
                operator = document.getElementById('operator'),
                log = document.getElementById('log');

            const now = Date.now();

            let conditions = [
                { id: 'estop', label: 'Emergency stop healthy', tag: 'ES-2100', satisfied: true, timestamp: now - 86400000 * 3 },
                { id: 'suction', label: 'Suction valve open', tag: 'XV-2101', satisfied: true, timestamp: now - 3600000 * 2 },
                { id: 'level', label: 'Feed tank level above 20 %', tag: 'LT-2201', value: '14.2 %', satisfied: false, timestamp: now - 240000 },
                { id: 'discharge', label: 'Discharge valve open', tag: 'XV-2102', satisfied: false, timestamp: now - 90000 },
                { id: 'seal', label: 'Seal flush flow present', tag: 'FS-2103', satisfied: true, timestamp: now - 3600000 * 5 },
                { id: 'remote', label: 'Local selector in REMOTE', tag: 'HS-2101', satisfied: true, timestamp: now - 3600000 * 5 },
                { id: 'standby', label: 'Standby pump P-2101B stopped', tag: 'P-2101B', satisfied: true, timestamp: now - 3600000 * 9 },
                { id: 'warm', label: 'Bearing temperature within 5 K of ambient', tag: 'TT-2109', value: '3.1 K',
                    satisfied: true, required: false, description: 'Cold-start check, advisory', timestamp: now - 600000 }
            ];

            function publish() {
                /* A new array every time: the framework compares property values, and the array
                   the element already holds is deep-equal to itself however much it was mutated. */
                start.conditions = conditions.map(function (condition) {
                    return Object.assign({}, condition);
                });
            }

            function renderSwitches() {
                switches.innerHTML = conditions.map(function (condition) {
                    return '<label><input type="checkbox" data-id="' + condition.id + '"' +
                        (condition.satisfied ? ' checked' : '') + ' /> ' + condition.label + '</label>';
                }).join('');
            }

            switches.addEventListener('change', function (event) {
                const box = event.target.closest('input[data-id]');

                if (!box) {
                    return;
                }

                conditions.forEach(function (condition) {
                    if (condition.id === box.getAttribute('data-id')) {
                        condition.satisfied = box.checked;
                        condition.timestamp = Date.now();
                        /* A condition that comes back clears its bypass - the reason for it is gone. */
                        if (box.checked) {
                            condition.bypassed = false;
                            condition.bypassedBy = undefined;
                        }
                    }
                });

                publish();
            });

            /* The bypass round trip. The element asked; the host decides and answers with data. */
            start.addEventListener('bypassRequest', function (event) {
                const name = operator.value.trim() || 'operator';

                conditions.forEach(function (condition) {
                    if (condition.id === event.detail.id) {
                        condition.bypassed = event.detail.bypass;
                        condition.bypassedBy = event.detail.bypass ? name : undefined;
                    }
                });

                log.textContent = (event.detail.bypass ? 'Bypass applied to ' : 'Bypass removed from ') +
                    event.detail.condition.label + ' by ' + name + ' at ' +
                    new Date().toLocaleTimeString('en-GB', { hour12: false }) + ' - written to the audit trail by the host, not the element.';

                publish();
            });

            start.addEventListener('readyChange', function (event) {
                log.textContent = event.detail.ready ?
                    'P-2101A may now be started.' :
                    'Start blocked by ' + event.detail.blocking.join(', ') + '.';
            });

            renderSwitches();
            publish();

            /* ── Interlocks ─────────────────────────────────────────────────────── */
            const interlocks = document.getElementById('interlocks'),
                trip = document.getElementById('trip'),
                resetTrip = document.getElementById('resetTrip'),
                onlyBlocking = document.getElementById('onlyBlocking'),
                interlockState = document.getElementById('interlockState');

            function healthy() {
                const at = Date.now() - 3600000 * 6;

                return [
                    { id: 'temp', label: 'Discharge temperature below 108 °C', tag: 'TT-2151', value: '96.4 °C', satisfied: true, timestamp: at },
                    { id: 'vib', label: 'Vibration below 11.2 mm/s', tag: 'VT-2150', value: '3.9 mm/s', satisfied: true, timestamp: at },
                    { id: 'overload', label: 'Motor overload relay healthy', tag: 'M-2150', satisfied: true, timestamp: at },
                    { id: 'oil', label: 'Lube oil pressure above 1.2 bar', tag: 'PT-2152', value: '2.1 bar', satisfied: true, timestamp: at },
                    { id: 'estop', label: 'Emergency stop healthy', tag: 'ES-2150', satisfied: true, timestamp: at }
                ];
            }

            interlocks.conditions = healthy();

            function paintInterlockState() {
                const summary = interlocks.summary();

                interlockState.textContent = summary.ready ?
                    'running' : 'tripped - first out: ' + (summary.firstOut || 'not determinable');
            }

            trip.addEventListener('click', function () {
                const at = Date.now(),
                    list = healthy();

                /* The temperature went first; the vibration and the overload followed as the
                   machine laboured. 400 ms apart, which is nothing on a screen and everything in
                   a trip record. */
                list[0] = Object.assign(list[0], { satisfied: false, value: '112.7 °C', timestamp: at - 400 });
                list[1] = Object.assign(list[1], { satisfied: false, value: '14.8 mm/s', timestamp: at - 150 });
                list[2] = Object.assign(list[2], { satisfied: false, timestamp: at });

                interlocks.conditions = list;
                trip.disabled = true;
                resetTrip.disabled = false;
                paintInterlockState();
            });

            resetTrip.addEventListener('click', function () {
                interlocks.conditions = healthy();
                trip.disabled = false;
                resetTrip.disabled = true;
                paintInterlockState();
            });

            onlyBlocking.addEventListener('change', function () {
                interlocks.showSatisfied = !onlyBlocking.checked;
            });

            paintInterlockState();
        });

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

    return (
        <div className="react-root" ref={root} theme="industrial">
            <div className="smart-demo-container">
                <section id="overview">
                    <h2>Smart.Permissive displays the conditions a device needs before it can start, with whether each condition is met, so the operator can see which condition is preventing the start.</h2>
                    <p>ISA-101 recommends a permissive list next to every device that can be started, so that a start button that does nothing is not left unexplained. Colour is used only for the conditions that block: a met condition is shown in a neutral colour, so the one condition that is not met stands out in a list of twelve.</p>
                </section>
                <section>
                    <h2>Start permissives for a feed pump</h2>
                    <p>Toggle the conditions to see the verdict change. The advisory condition is listed but never blocks the start. Enable bypass and press a condition: the component raises the <code>bypassRequest</code> event and does not change anything itself. In this demo the page acts as the application and applies the bypass with the user name.</p>
                    <div className="two-up">
                        <Permissive id="start" label="P-2101A start permissives" allowBypass></Permissive>
                        <div className="demo-panel">
                            <h3>Field simulation</h3>
                            <div id="switches" className="switches"></div>
                            <label className="operator">Operator <input type="text" id="operator" defaultValue="J. Moreau" /></label>
                            <p className="hint" id="log">—</p>
                        </div>
                    </div>
                </section>
                <section>
                    <h2>Interlocks on a running compressor and first-out</h2>
                    <p>An interlock trips a running device. When it does, the condition that went unhealthy first is the one that matters; the others followed as a consequence. The first-out condition is determined from the timestamps supplied by the application. Press <em>Trip</em>: the high discharge temperature is stamped 400 ms before the vibration and the motor overload that followed it, and it is the one marked as first-out.</p>
                    <Permissive id="interlocks" mode="interlock" label="CP-2150 interlocks"></Permissive>
                    <div className="demo-actions">
                        <button type="button" id="trip">Trip</button>
                        <button type="button" id="resetTrip" disabled>Reset</button>
                        <label><input type="checkbox" id="onlyBlocking" /> Show only what blocks</label>
                        <span id="interlockState" className="stats"></span>
                    </div>
                </section>
            </div>
        </div>
    );
};

export default App;

react/App.css

smart-permissive {
    width: 100%;
}

.two-up {
    display: grid;
    grid-template-columns: minmax(320px, 3fr) minmax(240px, 2fr);
    gap: 20px;
    align-items: start;
}

@media (max-width: 760px) {
    .two-up {
        grid-template-columns: 1fr;
    }
}

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

.switches {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
}

.switches label {
    display: flex;
    align-items: center;
    gap: 6px;
}

.operator {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    font-size: 13px;
}

.operator input {
    font: inherit;
    padding: 2px 6px;
}

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

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

.stats {
    font-size: 12px;
    opacity: 0.75;
}

.hint {
    margin-top: 8px;
    font-size: 12px;
    opacity: 0.75;
}

smart-permissive {
    display: block;
    padding: 12px 16px 10px;
    border: 1px solid var(--smart-border);
    border-radius: var(--smart-border-radius);
    background: var(--smart-industrial-panel-background, var(--smart-surface));
}

/* ── 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.Permissive displays the conditions a device needs before it can start, with whether each condition is met, so the operator can see which condition is preventing the start.</h2>
            <p>
                ISA-101 recommends a permissive list next to every device that can be started, so that a start button that does nothing is not left unexplained. Colour is used only for the conditions that block: a met condition is shown in a neutral colour, so the one condition that is not met stands out in a list of twelve.
            </p>
        </section>

        <section>
            <h2>Start permissives for a feed pump</h2>
            <p>
                Toggle the conditions to see the verdict change. The advisory condition is listed but never blocks the start. Enable bypass and press a condition: the component raises the <code>bypassRequest</code> event and does not change anything itself. In this demo the page acts as the application and applies the bypass with the user name.
            </p>
            <div class="two-up">
                <smart-permissive id="start" label="P-2101A start permissives" allow-bypass></smart-permissive>
                <div class="demo-panel">
                    <h3>Field simulation</h3>
                    <div id="switches" class="switches"></div>
                    <label class="operator">Operator <input type="text" id="operator" value="J. Moreau" /></label>
                    <p class="hint" id="log">&mdash;</p>
                </div>
            </div>
        </section>

        <section>
            <h2>Interlocks on a running compressor and first-out</h2>
            <p>
                An interlock trips a running device. When it does, the condition that went unhealthy first is the one that matters; the others followed as a consequence. The first-out condition is determined from the timestamps supplied by the application. Press <em>Trip</em>: the high discharge temperature is stamped 400 ms before the vibration and the motor overload that followed it, and it is the one marked as first-out.
            </p>
            <smart-permissive id="interlocks" mode="interlock" label="CP-2150 interlocks"></smart-permissive>
            <div class="demo-actions">
                <button type="button" id="trip">Trip</button>
                <button type="button" id="resetTrip" disabled>Reset</button>
                <label><input type="checkbox" id="onlyBlocking" /> Show only what blocks</label>
                <span id="interlockState" class="stats"></span>
            </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.permissive.js";


/* The page plays the host: it owns the condition list, applies bypasses when asked to,
   and hands the element a fresh array each time. Replace the switches with a tag
   subscription and the bypass handler with a write to the safety PLC's bypass register,
   and the element does not change. */

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(() => {
        /* ── Start permissives ──────────────────────────────────────────────── */
        const start = document.getElementById('start'),
            switches = document.getElementById('switches'),
            operator = document.getElementById('operator'),
            log = document.getElementById('log');

        const now = Date.now();

        let conditions = [
            { id: 'estop', label: 'Emergency stop healthy', tag: 'ES-2100', satisfied: true, timestamp: now - 86400000 * 3 },
            { id: 'suction', label: 'Suction valve open', tag: 'XV-2101', satisfied: true, timestamp: now - 3600000 * 2 },
            { id: 'level', label: 'Feed tank level above 20 %', tag: 'LT-2201', value: '14.2 %', satisfied: false, timestamp: now - 240000 },
            { id: 'discharge', label: 'Discharge valve open', tag: 'XV-2102', satisfied: false, timestamp: now - 90000 },
            { id: 'seal', label: 'Seal flush flow present', tag: 'FS-2103', satisfied: true, timestamp: now - 3600000 * 5 },
            { id: 'remote', label: 'Local selector in REMOTE', tag: 'HS-2101', satisfied: true, timestamp: now - 3600000 * 5 },
            { id: 'standby', label: 'Standby pump P-2101B stopped', tag: 'P-2101B', satisfied: true, timestamp: now - 3600000 * 9 },
            { id: 'warm', label: 'Bearing temperature within 5 K of ambient', tag: 'TT-2109', value: '3.1 K',
                satisfied: true, required: false, description: 'Cold-start check, advisory', timestamp: now - 600000 }
        ];

        function publish() {
            /* A new array every time: the framework compares property values, and the array
               the element already holds is deep-equal to itself however much it was mutated. */
            start.conditions = conditions.map(function (condition) {
                return Object.assign({}, condition);
            });
        }

        function renderSwitches() {
            switches.innerHTML = conditions.map(function (condition) {
                return '<label><input type="checkbox" data-id="' + condition.id + '"' +
                    (condition.satisfied ? ' checked' : '') + ' /> ' + condition.label + '</label>';
            }).join('');
        }

        switches.addEventListener('change', function (event) {
            const box = event.target.closest('input[data-id]');

            if (!box) {
                return;
            }

            conditions.forEach(function (condition) {
                if (condition.id === box.getAttribute('data-id')) {
                    condition.satisfied = box.checked;
                    condition.timestamp = Date.now();
                    /* A condition that comes back clears its bypass - the reason for it is gone. */
                    if (box.checked) {
                        condition.bypassed = false;
                        condition.bypassedBy = undefined;
                    }
                }
            });

            publish();
        });

        /* The bypass round trip. The element asked; the host decides and answers with data. */
        start.addEventListener('bypassRequest', function (event) {
            const name = operator.value.trim() || 'operator';

            conditions.forEach(function (condition) {
                if (condition.id === event.detail.id) {
                    condition.bypassed = event.detail.bypass;
                    condition.bypassedBy = event.detail.bypass ? name : undefined;
                }
            });

            log.textContent = (event.detail.bypass ? 'Bypass applied to ' : 'Bypass removed from ') +
                event.detail.condition.label + ' by ' + name + ' at ' +
                new Date().toLocaleTimeString('en-GB', { hour12: false }) + ' - written to the audit trail by the host, not the element.';

            publish();
        });

        start.addEventListener('readyChange', function (event) {
            log.textContent = event.detail.ready ?
                'P-2101A may now be started.' :
                'Start blocked by ' + event.detail.blocking.join(', ') + '.';
        });

        renderSwitches();
        publish();

        /* ── Interlocks ─────────────────────────────────────────────────────── */
        const interlocks = document.getElementById('interlocks'),
            trip = document.getElementById('trip'),
            resetTrip = document.getElementById('resetTrip'),
            onlyBlocking = document.getElementById('onlyBlocking'),
            interlockState = document.getElementById('interlockState');

        function healthy() {
            const at = Date.now() - 3600000 * 6;

            return [
                { id: 'temp', label: 'Discharge temperature below 108 °C', tag: 'TT-2151', value: '96.4 °C', satisfied: true, timestamp: at },
                { id: 'vib', label: 'Vibration below 11.2 mm/s', tag: 'VT-2150', value: '3.9 mm/s', satisfied: true, timestamp: at },
                { id: 'overload', label: 'Motor overload relay healthy', tag: 'M-2150', satisfied: true, timestamp: at },
                { id: 'oil', label: 'Lube oil pressure above 1.2 bar', tag: 'PT-2152', value: '2.1 bar', satisfied: true, timestamp: at },
                { id: 'estop', label: 'Emergency stop healthy', tag: 'ES-2150', satisfied: true, timestamp: at }
            ];
        }

        interlocks.conditions = healthy();

        function paintInterlockState() {
            const summary = interlocks.summary();

            interlockState.textContent = summary.ready ?
                'running' : 'tripped - first out: ' + (summary.firstOut || 'not determinable');
        }

        trip.addEventListener('click', function () {
            const at = Date.now(),
                list = healthy();

            /* The temperature went first; the vibration and the overload followed as the
               machine laboured. 400 ms apart, which is nothing on a screen and everything in
               a trip record. */
            list[0] = Object.assign(list[0], { satisfied: false, value: '112.7 °C', timestamp: at - 400 });
            list[1] = Object.assign(list[1], { satisfied: false, value: '14.8 mm/s', timestamp: at - 150 });
            list[2] = Object.assign(list[2], { satisfied: false, timestamp: at });

            interlocks.conditions = list;
            trip.disabled = true;
            resetTrip.disabled = false;
            paintInterlockState();
        });

        resetTrip.addEventListener('click', function () {
            interlocks.conditions = healthy();
            trip.disabled = false;
            resetTrip.disabled = true;
            paintInterlockState();
        });

        onlyBlocking.addEventListener('change', function () {
            interlocks.showSatisfied = !onlyBlocking.checked;
        });

        paintInterlockState();
      });
    });
  }
};
</script>

<style>
smart-permissive {
    width: 100%;
}

.two-up {
    display: grid;
    grid-template-columns: minmax(320px, 3fr) minmax(240px, 2fr);
    gap: 20px;
    align-items: start;
}

@media (max-width: 760px) {
    .two-up {
        grid-template-columns: 1fr;
    }
}

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

.switches {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
}

.switches label {
    display: flex;
    align-items: center;
    gap: 6px;
}

.operator {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    font-size: 13px;
}

.operator input {
    font: inherit;
    padding: 2px 6px;
}

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

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

.stats {
    font-size: 12px;
    opacity: 0.75;
}

.hint {
    margin-top: 8px;
    font-size: 12px;
    opacity: 0.75;
}

smart-permissive {
    display: block;
    padding: 12px 16px 10px;
    border: 1px solid var(--smart-border);
    border-radius: var(--smart-border-radius);
    background: var(--smart-industrial-panel-background, var(--smart-surface));
}

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