@adcops/autocore-react 3.0.33 → 3.0.34

package/dist/components/Osk.js

@@ -1 +1,125 @@
-import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{useState,useEffect,useRef}from"react";import{InputText}from"primereact/inputtext";import Keyboard from"react-simple-keyboard";import"./osk.css";import{RegExMaskPatterns}from"../core/MaskPatterns";const numpadLayout={numbers:["1 2 3","4 5 6","7 8 9","- 0 .","{symbols} {backspace}"],default:["! / #","$ % ^","& * (","= ) +","{numbers} {backspace}"]},englishLayout={default:["q w e r t y u i o p","a s d f g h j k l","{shift} z x c v b n m {backspace}","{numbers} {space} {ent}"],shift:["Q W E R T Y U I O P","A S D F G H J K L","{shift} Z X C V B N M {backspace}","{numbers} {space} {ent}"],numbers:["1 2 3","4 5 6","7 8 9","{abc} 0 {backspace}"]},keyboardDisplay={"{numbers}":"123","{ent}":"return","{escape}":"esc ⎋","{tab}":"tab ⇥","{backspace}":"⌫","{capslock}":"caps lock ⇪","{shift}":"⇧","{controlleft}":"ctrl ⌃","{controlright}":"ctrl ⌃","{altleft}":"alt ⌥","{altright}":"alt ⌥","{metaleft}":"cmd ⌘","{metaright}":"cmd ⌘","{abc}":"ABC","{space}":"space","{symbols}":"#+="};export const Osk=({onAccept:e,onChange:t,isNumPad:s=!1,input:a="",label:r="",inputPattern:n,checkValue:i,description:o})=>{const[u,c]=useState({isVisible:!1,layoutName:s?"numbers":"default",minWidth:500,maxWidth:800,input:a,label:r,isNumPad:s,inputPattern:n||RegExMaskPatterns.IntegerPositive,checkValue:i,description:o,firstKeyPressed:!1,onAccept:e||void 0,onChange:t||void 0}),l=useRef(null);useEffect((()=>()=>{l.current&&l.current.destroy()}),[]);const p=()=>{let e="default"===u.layoutName?"shift":"default";c((t=>({...t,layoutName:e})))},m=()=>{let e="numbers"!==u.layoutName?"numbers":"default";c((t=>({...t,layoutName:e})))};return _jsxs("div",{children:[_jsx(InputText,{value:u.input,readOnly:!0,tooltip:u.description}),_jsx("br",{}),_jsx(Keyboard,{keyboardRef:e=>l.current=e,name:"keyboard",layoutName:u.layoutName,layout:(()=>{if(u.isNumPad)return u.isNumPad?(void 0!==u.inputPattern&&null!==u.inputPattern||c((e=>({...e,inputPattern:RegExMaskPatterns.IntegerPositive}))),numpadLayout):englishLayout})(),display:keyboardDisplay,physicalKeyboardHighlight:!0,physicalKeyboardHighlightPress:!0,onChange:e=>(e=>{let t=e;u.firstKeyPressed||(t=u.input+e,l.current.setInput(t)),u.onChange&&u.onChange(t),c((e=>({...e,input:t,firstKeyPressed:!0})))})(e),onKeyPress:e=>(e=>{"{shift}"!==e&&"{lock}"!==e&&"{symbols}"!=e||p(),"{numbers}"!==e&&"{abc}"!==e||m(),"{backspace}"===e&&(u.firstKeyPressed||c((e=>({...e,input:"",firstKeyPressed:!0}))))})(e)})]})};export default Osk;
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from 'react';
+import { InputText } from 'primereact/inputtext';
+import Keyboard from "react-simple-keyboard";
+import "./osk.css";
+import { RegExMaskPatterns } from "../core/MaskPatterns";
+const numpadLayout = {
+    numbers: ["1 2 3", "4 5 6", "7 8 9", "- 0 .", "{symbols} {backspace}"],
+    default: ["! / #", "$ % ^", "& * (", "= ) +", "{numbers} {backspace}"]
+};
+const englishLayout = {
+    default: [
+        "q w e r t y u i o p",
+        "a s d f g h j k l",
+        "{shift} z x c v b n m {backspace}",
+        "{numbers} {space} {ent}"
+    ],
+    shift: [
+        "Q W E R T Y U I O P",
+        "A S D F G H J K L",
+        "{shift} Z X C V B N M {backspace}",
+        "{numbers} {space} {ent}"
+    ],
+    numbers: ["1 2 3", "4 5 6", "7 8 9", "{abc} 0 {backspace}"]
+};
+const keyboardDisplay = {
+    "{numbers}": "123",
+    "{ent}": "return",
+    "{escape}": "esc ⎋",
+    "{tab}": "tab ⇥",
+    "{backspace}": "⌫",
+    "{capslock}": "caps lock ⇪",
+    "{shift}": "⇧",
+    "{controlleft}": "ctrl ⌃",
+    "{controlright}": "ctrl ⌃",
+    "{altleft}": "alt ⌥",
+    "{altright}": "alt ⌥",
+    "{metaleft}": "cmd ⌘",
+    "{metaright}": "cmd ⌘",
+    "{abc}": "ABC",
+    "{space}": "space",
+    "{symbols}": "#+="
+};
+export const Osk = ({ onAccept, onChange, isNumPad = false, input = "", label = "", inputPattern, checkValue, description, }) => {
+    const [state, setState] = useState({
+        isVisible: false,
+        layoutName: isNumPad ? "numbers" : "default",
+        minWidth: 500,
+        maxWidth: 800,
+        input,
+        label,
+        isNumPad,
+        inputPattern: inputPattern || RegExMaskPatterns.IntegerPositive,
+        checkValue,
+        description,
+        firstKeyPressed: false,
+        onAccept: onAccept || undefined,
+        onChange: onChange || undefined
+    });
+    const keyboardRef = useRef(null);
+    useEffect(() => {
+        return () => {
+            if (keyboardRef.current) {
+                keyboardRef.current.destroy();
+            }
+        };
+    }, []);
+    // const setProperty = (key: keyof typeof state, val: any) => {
+    //     setState((prev) => ({ ...prev, [key]: val }));
+    // };
+    const onChanged = (val) => {
+        let newInput = val;
+        if (!state.firstKeyPressed) {
+            newInput = state.input + val;
+            keyboardRef.current.setInput(newInput);
+        }
+        if (state.onChange) {
+            state.onChange(newInput);
+        }
+        setState(prevState => ({ ...prevState, input: newInput, firstKeyPressed: true }));
+    };
+    const getLayout = () => {
+        if (state.isNumPad) {
+            if (state.isNumPad) {
+                if (state.inputPattern === undefined || state.inputPattern === null) {
+                    setState(prevState => ({ ...prevState, inputPattern: RegExMaskPatterns.IntegerPositive }));
+                }
+                return numpadLayout;
+            }
+            else {
+                return englishLayout;
+            }
+        }
+    };
+    const onKeyPress = (button) => {
+        if (button === "{shift}" || button === "{lock}" || button == "{symbols}")
+            handleShift();
+        if (button === "{numbers}" || button === "{abc}")
+            handleNumbers();
+        if (button === "{backspace}") {
+            // Backspace was pressed
+            if (!state.firstKeyPressed) {
+                setState(prevState => ({ ...prevState, input: "", firstKeyPressed: true }));
+            }
+        }
+    };
+    /**
+     * Toggle between the shifted and default display when the shift key is pressed.
+     */
+    const handleShift = () => {
+        let currentLayout = state.layoutName;
+        let shiftToggle = currentLayout === "default" ? "shift" : "default";
+        setState(prevState => ({ ...prevState, layoutName: shiftToggle }));
+    };
+    /**
+     * Toggle between the number and alpha-numeric display when the numbers key is pressed.
+     */
+    const handleNumbers = () => {
+        let currentLayout = state.layoutName;
+        let numbersToggle = currentLayout !== "numbers" ? "numbers" : "default";
+        setState(prevState => ({ ...prevState, layoutName: numbersToggle }));
+    };
+    return (_jsxs("div", { children: [_jsx(InputText, { value: state.input, readOnly: true, tooltip: state.description }), _jsx("br", {}), _jsx(Keyboard, { keyboardRef: (r) => (keyboardRef.current = r), name: 'keyboard', layoutName: state.layoutName, layout: getLayout(), display: keyboardDisplay, physicalKeyboardHighlight: true, physicalKeyboardHighlightPress: true, onChange: (val) => onChanged(val), onKeyPress: (button) => onKeyPress(button) })] }));
+};
+export default Osk;

package/dist/components/OskDialog.js

@@ -1 +1,128 @@
-import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import React from"react";import ReactDOM from"react-dom";import{Dialog}from"primereact/dialog";import{Button}from"primereact/button";import{Osk}from"./Osk";export class OskDialog extends React.Component{constructor(e){super(e),Object.defineProperty(this,"container",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"checkValue",{enumerable:!0,configurable:!0,writable:!0,value:e=>{var t=!0;if(null!=e&&e.length>0)if(void 0!==this.props.inputPattern)t=this.props.inputPattern.test(e);else if(this.props.textMode)void 0!==this.props.minLength&&e.length<this.props.minLength&&(t=!1);else{e.length<0&&(t=!1),isNaN(parseFloat(e))&&(t=!1);var i=parseFloat(e);void 0!==this.props.minValue&&null!==this.props.minValue&&i<this.props.minValue&&(t=!1),void 0!==this.props.maxValue&&null!==this.props.maxValue&&i>this.props.maxValue&&(t=!1)}else t=!1;return t?"":"Invalid value."}}),Object.defineProperty(this,"onAccepted",{enumerable:!0,configurable:!0,writable:!0,value:()=>{const e=this.checkValue(this.state.input);e?this.setState({errorMessage:e}):(this.props.onAccept?.(this.state.input),this.closeDialog())}}),Object.defineProperty(this,"onChanged",{enumerable:!0,configurable:!0,writable:!0,value:e=>{this.setState({input:e,errorMessage:""}),this.props.onChange&&this.props.onChange(e)}}),Object.defineProperty(this,"closeDialog",{enumerable:!0,configurable:!0,writable:!0,value:()=>{this.container&&(ReactDOM.unmountComponentAtNode(this.container),this.container=null),this.props.onReject?.()}}),Object.defineProperty(this,"show",{enumerable:!0,configurable:!0,writable:!0,value:()=>{this.container||(this.container=document.createElement("div"),document.body.appendChild(this.container));const e=_jsxs("div",{children:[_jsx(Button,{label:"Cancel",icon:"pi pi-times",onClick:()=>this.closeDialog(),className:"p-button-text"}),_jsx(Button,{label:"Accept",icon:"pi pi-check",onClick:()=>this.onAccepted(),autoFocus:!0})]});ReactDOM.render(_jsxs(Dialog,{visible:this.props.isVisible,onHide:this.closeDialog,header:this.props.label,style:{width:this.props.maxWidth||"50vw"},footer:e,children:[_jsx(Osk,{onChange:this.onChanged,isNumPad:this.props.isNumPad,inputPattern:this.props.inputPattern,input:this.state.input}),this.state.errorMessage&&_jsx("div",{className:"error-message",children:this.state.errorMessage})]}),this.container)}}),this.state={input:e.input||"",errorMessage:""}}componentWillUnmount(){this.container&&document.body.removeChild(this.container)}render(){return null}}export default OskDialog;
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Dialog } from 'primereact/dialog';
+import { Button } from "primereact/button";
+import { Osk } from './Osk';
+export class OskDialog extends React.Component {
+    constructor(props) {
+        super(props);
+        Object.defineProperty(this, "container", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "checkValue", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (value) => {
+                // Checks the value against settings and returns an error message
+                // if invalid. If the value is valid and should be accepted,
+                // a blank error message is returned.
+                var ok = true;
+                if (value !== undefined && value !== null && value.length > 0) {
+                    if (this.props.inputPattern !== undefined) {
+                        ok = this.props.inputPattern.test(value);
+                    }
+                    else if (!this.props.textMode) {
+                        if (value.length < 0)
+                            ok = false;
+                        if (isNaN(parseFloat(value)))
+                            ok = false;
+                        var checkValue = parseFloat(value);
+                        if (this.props.minValue !== undefined && this.props.minValue !== null) {
+                            if (checkValue < this.props.minValue)
+                                ok = false;
+                        }
+                        if (this.props.maxValue !== undefined && this.props.maxValue !== null) {
+                            if (checkValue > this.props.maxValue)
+                                ok = false;
+                        }
+                    }
+                    else {
+                        if (this.props.minLength !== undefined
+                            && value.length < this.props.minLength) {
+                            ok = false;
+                        }
+                    }
+                }
+                else {
+                    ok = false;
+                }
+                if (ok) {
+                    return "";
+                }
+                else {
+                    return "Invalid value.";
+                }
+            }
+        });
+        Object.defineProperty(this, "onAccepted", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                const error = this.checkValue(this.state.input);
+                if (!error) {
+                    this.props.onAccept?.(this.state.input);
+                    this.closeDialog();
+                }
+                else {
+                    this.setState({ errorMessage: error });
+                }
+            }
+        });
+        Object.defineProperty(this, "onChanged", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (val) => {
+                this.setState({ input: val, errorMessage: "" });
+                if (this.props.onChange) {
+                    this.props.onChange(val);
+                }
+            }
+        });
+        Object.defineProperty(this, "closeDialog", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                if (this.container) {
+                    ReactDOM.unmountComponentAtNode(this.container);
+                    this.container = null;
+                }
+                this.props.onReject?.();
+            }
+        });
+        Object.defineProperty(this, "show", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                if (!this.container) {
+                    this.container = document.createElement('div');
+                    document.body.appendChild(this.container);
+                }
+                const footerContent = (_jsxs("div", { children: [_jsx(Button, { label: "Cancel", icon: "pi pi-times", onClick: () => this.closeDialog(), className: "p-button-text" }), _jsx(Button, { label: "Accept", icon: "pi pi-check", onClick: () => this.onAccepted(), autoFocus: true })] }));
+                ReactDOM.render(_jsxs(Dialog, { visible: this.props.isVisible, onHide: this.closeDialog, header: this.props.label, style: { width: this.props.maxWidth || '50vw' }, footer: footerContent, children: [_jsx(Osk, { onChange: this.onChanged, isNumPad: this.props.isNumPad, inputPattern: this.props.inputPattern, input: this.state.input }), this.state.errorMessage && _jsx("div", { className: "error-message", children: this.state.errorMessage })] }), this.container);
+            }
+        });
+        this.state = {
+            input: props.input || "",
+            errorMessage: ""
+        };
+    }
+    componentWillUnmount() {
+        if (this.container) {
+            document.body.removeChild(this.container);
+        }
+    }
+    render() {
+        // The actual rendering is handled by the show method.
+        return null;
+    }
+}
+export default OskDialog;

package/dist/components/ProgressBarWithValue.js

@@ -1 +1,18 @@
-import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{ProgressBar}from"primereact/progressbar";import"./ProgressBarWithValue.css";export const ProgressBarWithValue=({value:r,max:e,label:s})=>{let a=r,t=!1;return void 0!==e&&(e>0?a=r/e*100:(a=0,t=!0)),_jsxs("div",{className:"custom-progress-bar",children:[_jsx(ProgressBar,{showValue:!1,value:a,mode:t?"indeterminate":"determinate"}),_jsxs("div",{className:"centered-value",children:[s?`${s} `:""," ",r," ",e?`of ${e}`:""]})]})};export default ProgressBarWithValue;
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ProgressBar } from 'primereact/progressbar';
+import './ProgressBarWithValue.css'; // Import your custom CSS
+export const ProgressBarWithValue = ({ value, max, label }) => {
+    let progressValue = value;
+    let indeterminate = false;
+    if (max !== undefined) {
+        if (max > 0) {
+            progressValue = (value / max) * 100; // Calculate percentage
+        }
+        else { // max === 0
+            progressValue = 0;
+            indeterminate = true;
+        }
+    }
+    return (_jsxs("div", { className: "custom-progress-bar", children: [_jsx(ProgressBar, { showValue: false, value: progressValue, mode: indeterminate ? 'indeterminate' : 'determinate' }), _jsxs("div", { className: "centered-value", children: [label ? `${label} ` : '', " ", value, " ", max ? `of ${max}` : ''] })] }));
+};
+export default ProgressBarWithValue;

package/dist/components/TextInput.js

@@ -1 +1,139 @@
-import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import React from"react";import{InputText}from"primereact/inputtext";import{Button}from"primereact/button";import{EventEmitterContext}from"../core/EventEmitterContext.js";export class TextInput extends React.Component{constructor(t){super(t),Object.defineProperty(this,"validateValue",{enumerable:!0,configurable:!0,writable:!0,value:t=>void 0===this.props.validator||null===this.props.validator||this.props.validator.test(t)}),this.state={entryValue:t.value,isValid:void 0!==t.value&&this.validateValue(t.value),editing:!1}}componentDidMount(){}componentDidUpdate(t){t.value!==this.props.value&&this.setState({entryValue:this.props.value,editing:!1})}onAcceptValue(){void 0!==this.state.entryValue&&this.validateValue(this.state.entryValue)?(this.setState({isValid:!0,editing:!1}),this.props.onValueChanged&&this.props.onValueChanged(this.state.entryValue),void 0!==this.props.dispatchTopic&&this.context.dispatch({topic:this.props.dispatchTopic,payload:this.state.entryValue})):this.setState({isValid:!1})}onResetValue(){this.setState({entryValue:this.props.value,isValid:void 0!==this.props.value&&this.validateValue(this.props.value),editing:!1})}render(){const{prefix:t,...e}=this.props;return _jsxs("div",{children:[_jsxs("div",{className:"p-inputgroup flex-1",children:[_jsx("span",{className:"p-inputgroup-addon",children:this.props.label}),void 0!==this.props.prefix&&_jsx("span",{className:"p-inputgroup-addon",children:this.props.prefix}),_jsx(InputText,{...e,keyfilter:this.props.keyFilter,placeholder:this.props.placeholder,value:this.state.entryValue,onChange:t=>{this.setState({entryValue:t.target.value,editing:!0})},className:this.state.isValid?"":"p-invalid",onKeyDown:t=>{"Enter"===t.key?this.onAcceptValue():"Escape"===t.key&&this.onResetValue()},disabled:this.props.disabled}),void 0!==this.props.suffix&&_jsx("span",{className:"p-inputgroup-addon",children:this.props.suffix}),_jsx(Button,{icon:"pi pi-check",disabled:this.props.disabled||!this.state.editing,className:"p-button-success",onClick:()=>this.onAcceptValue(),visible:this.state.editing}),_jsx(Button,{icon:"pi pi-times",disabled:this.props.disabled||!this.state.editing,className:"p-button-danger",onClickCapture:()=>this.onResetValue(),visible:this.state.editing})]}),void 0!==this.props.description&&_jsx("small",{children:this.props.description})]})}}Object.defineProperty(TextInput,"contextType",{enumerable:!0,configurable:!0,writable:!0,value:EventEmitterContext}),Object.defineProperty(TextInput,"defaultProps",{enumerable:!0,configurable:!0,writable:!0,value:{label:"",value:void 0,keyFilter:void 0,writeTopic:void 0,onValueChanged:void 0,description:void 0,prefix:void 0,suffix:void 0,disabled:!1,dispatchTopic:void 0,placeholder:void 0,validator:void 0}});
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
+ * Created Date: 2024-03-20 13:05:42
+ * -----
+ * Last Modified: 2024-05-17 10:04:53
+ * -----
+ *
+ */
+import React from "react";
+import { InputText } from 'primereact/inputtext';
+import { Button } from "primereact/button";
+import { EventEmitterContext } from "../core/EventEmitterContext.js";
+/**
+ * A convenient field with all the usual features of inputing values.
+ * Wraps the common features of use of a InputText, p-inputgroup, some icon buttons,
+ * accepting and rejecting values and keyboard management.
+ */
+export class TextInput extends React.Component {
+    /**
+     *
+     * @param {FooterViewProps} props
+     */
+    constructor(props) {
+        super(props);
+        /**
+         * Check the new value against the validator RegEx, if one was specified.
+         * @param val The new value.
+         * @returns True if no validator specified or the value is valid, false if not valid.
+         */
+        Object.defineProperty(this, "validateValue", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (val) => {
+                if (this.props.validator !== undefined && this.props.validator !== null) {
+                    return this.props.validator.test(val);
+                }
+                else {
+                    return true;
+                }
+            }
+        });
+        this.state = {
+            entryValue: props.value,
+            isValid: props.value !== undefined ? this.validateValue(props.value) : false,
+            editing: false
+        };
+    }
+    /**
+     * The component has been loaded into the DOM.
+     */
+    componentDidMount() {
+    }
+    componentDidUpdate(prevProps) {
+        // Check if the value prop has changed
+        if (prevProps.value !== this.props.value) {
+            this.setState({
+                entryValue: this.props.value,
+                editing: false
+            });
+        }
+    }
+    /**
+     * The user has elected to accept the input value. Validate and store, if valid.
+     */
+    onAcceptValue() {
+        if (this.state.entryValue !== undefined) {
+            if (this.validateValue(this.state.entryValue)) {
+                this.setState({ isValid: true, editing: false });
+                if (this.props.onValueChanged)
+                    this.props.onValueChanged(this.state.entryValue);
+                if (this.props.dispatchTopic !== undefined) {
+                    this.context.dispatch({ topic: this.props.dispatchTopic, payload: this.state.entryValue });
+                }
+            }
+            else {
+                this.setState({ isValid: false });
+            }
+        }
+        else {
+            this.setState({ isValid: false });
+        }
+    }
+    /**
+     * The user wishes to reset/cancel the previous value.
+     */
+    onResetValue() {
+        this.setState({
+            entryValue: this.props.value,
+            isValid: this.props.value !== undefined ? this.validateValue(this.props.value) : false,
+            editing: false
+        });
+    }
+    render() {
+        const { prefix, ...restProps } = this.props;
+        return (_jsxs("div", { children: [_jsxs("div", { className: "p-inputgroup flex-1", children: [_jsx("span", { className: "p-inputgroup-addon", children: this.props.label }), this.props.prefix !== undefined &&
+                            _jsx("span", { className: "p-inputgroup-addon", children: this.props.prefix }), _jsx(InputText, { ...restProps, keyfilter: this.props.keyFilter, placeholder: this.props.placeholder, value: this.state.entryValue, onChange: (e) => { this.setState({ entryValue: e.target.value, editing: true }); }, className: this.state.isValid ? '' : 'p-invalid', onKeyDown: (e) => {
+                                if (e.key === 'Enter') {
+                                    this.onAcceptValue();
+                                }
+                                else if (e.key === 'Escape') {
+                                    this.onResetValue();
+                                }
+                            }, disabled: this.props.disabled }), this.props.suffix !== undefined &&
+                            _jsx("span", { className: "p-inputgroup-addon", children: this.props.suffix }), _jsx(Button, { icon: "pi pi-check", disabled: this.props.disabled || !this.state.editing, className: "p-button-success", onClick: () => this.onAcceptValue(), visible: this.state.editing }), _jsx(Button, { icon: "pi pi-times", disabled: this.props.disabled || !this.state.editing, className: "p-button-danger", onClickCapture: () => this.onResetValue(), visible: this.state.editing })] }), this.props.description !== undefined &&
+                    _jsx("small", { children: this.props.description })] }));
+    }
+}
+// Here's an example of using the Application-wide EventEmitter con
+// Define the contextType for the class to access the context
+Object.defineProperty(TextInput, "contextType", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: EventEmitterContext
+});
+/**
+ * Default properties for the component.
+ */
+Object.defineProperty(TextInput, "defaultProps", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: {
+        label: '',
+        value: undefined,
+        keyFilter: undefined,
+        writeTopic: undefined,
+        onValueChanged: undefined,
+        description: undefined,
+        prefix: undefined,
+        suffix: undefined,
+        disabled: false,
+        dispatchTopic: undefined,
+        placeholder: undefined,
+        validator: undefined
+    }
+});

package/dist/components/ToggleGroup.js

@@ -1 +1,204 @@
-import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{useState,useEffect,useContext}from"react";import{SelectButton}from"primereact/selectbutton";import{EventEmitterContext}from"../core/EventEmitterContext";import{IndicatorColor}from"../core/IndicatorColor";export{IndicatorColor};import{ActionMode}from"../core/ActionMode";export{ActionMode};import clsx from"clsx";export const ToggleGroup=({label:o,topic:t,onColor:e,offColor:n,command:r,commandTopic:i,commandArgs:l,disableTopic:s,invisibleTopic:a,actionMode:c,invert:d,onValueChanged:u,...p})=>{const[m]=useState((()=>`toggleGroup-${Math.random().toString(36).substr(2,9)}`)),[f,g]=useState(void 0),[v,h]=useState(!1),[b,x]=useState(!1),[C,I]=useState(!1),y=useContext(EventEmitterContext);useEffect((()=>(t&&y.subscribe(t,A),s&&y.subscribe(s,j),a&&y.subscribe(a,M),()=>{})),[t,s,a]);const A=o=>{g(o)},j=o=>{h(o)},M=o=>{x(o)},E=()=>{C||(I(!0),c!==ActionMode.Tap&&c!==ActionMode.Pressed||T(!0))},S=()=>{C&&(I(!1),c===ActionMode.Tap?T(!1):c===ActionMode.Released&&T(!0))},T=o=>{if(r&&r.length>0){const t={topic:i,value:o,...l};y.dispatch({topic:r,payload:t})}};let $=f;void 0!==p.value&&($=p.value);let _=((o,t,e)=>{if(!t||0===t.length)return IndicatorColor.IndicatorInvalid;let n=Array.isArray(e)?e:void 0!==e?[e]:[IndicatorColor.IndicatorInvalid],r=typeof o;if("boolean"===r)return o?n[0]:n.length>1?n[1]:n[0];if("number"===r&&t.length>o){if(n.length>o){return n[o]}return n[0]}if("string"===r){let e=t.indexOf(o);return-1!==e&&e<n.length?n[e]:n[0]}return null!=e?Array.isArray(e)?e[0]:e:IndicatorColor.IndicatorInvalid})($,p.options,e);void 0===$&&(_=IndicatorColor.IndicatorInvalid);const N=void 0!==p.options&&null!==p.options&&void 0!==p.options.length&&p.options.length>2,G=`${m}-togglegroup-selectbutton-container`;return _jsxs("div",{className:"flex",children:[_jsx("style",{children:`\n                ${void 0!==n?`\n                    .${G} .p-selectbutton .p-button {\n                        background-color: ${n};\n                    }\n                `:""}\n                .${G} .p-selectbutton .p-button.p-highlight {\n                    background-color: ${_} !important;\n                    border-color: ${_} !important;\n                }\n            `}),_jsx("div",{className:G,children:_jsxs("div",{className:"p-inputgroup",children:[_jsx("span",{className:"p-inputgroup-addon",style:{flexGrow:1},children:o}),_jsx(SelectButton,{...p,options:p.options,disabled:v||p.disabled,multiple:N,className:clsx(m,p.className,{"p-invalid":void 0===p.value}),style:b?{display:"none"}:{},value:((o,t)=>{if(null==t||0===t.length)return;let e=typeof o;if("boolean"==e){return o&&t.length>1?t[1]:t[0]}if("number"==e){let e=o;if(void 0!==e&&e<t.length)return t[e]}else if("string"==e)return o})($,p.options),allowEmpty:!1,onMouseDown:E,onTouchStart:E,onMouseUp:S,onTouchEnd:S,onChange:o=>(o=>{if(null!=u)if(void 0===p.options||null===p.options||0===p.options.length)u(!!N&&0);else{let t=0;for(let e=0;e<p.options.length;++e)if(o===p.options[e]){t=e;break}u(N?t:t>0)}})(o.value)})]})})]})};export default ToggleGroup;
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
+ * Created Date: 2024-03-12 10:14:48
+ * -----
+ * Last Modified: 2024-04-29 10:43:49
+ * -----
+ *
+ */
+import { useState, useEffect, useContext } from 'react';
+import { SelectButton } from 'primereact/selectbutton';
+import { EventEmitterContext } from '../core/EventEmitterContext';
+import { IndicatorColor } from "../core/IndicatorColor";
+export { IndicatorColor };
+import { ActionMode } from '../core/ActionMode';
+export { ActionMode };
+import clsx from 'clsx';
+export const ToggleGroup = ({ label, topic, onColor, offColor, command, commandTopic, commandArgs, disableTopic, invisibleTopic, actionMode, invert, onValueChanged: onValueChange, ...restProps }) => {
+    const [uniqueId] = useState(() => `toggleGroup-${Math.random().toString(36).substr(2, 9)}`);
+    const [currentValue, setCurrentValue] = useState(undefined);
+    const [isDisabled, setIsDisabled] = useState(false);
+    const [isInvisible, setIsInvisible] = useState(false);
+    const [isPressed, setIsPressed] = useState(false);
+    const context = useContext(EventEmitterContext);
+    useEffect(() => {
+        const setupSubscriptions = () => {
+            if (topic) {
+                context.subscribe(topic, handleTopicUpdate);
+            }
+            if (disableTopic) {
+                context.subscribe(disableTopic, handleDisableTopicUpdate);
+            }
+            if (invisibleTopic) {
+                context.subscribe(invisibleTopic, handleInvisibleTopicUpdate);
+            }
+        };
+        setupSubscriptions();
+        return () => {
+            // Unsubscribe logic here
+        };
+    }, [topic, disableTopic, invisibleTopic]);
+    const handleTopicUpdate = (value) => {
+        setCurrentValue(value);
+    };
+    const handleDisableTopicUpdate = (value) => {
+        setIsDisabled(value);
+    };
+    const handleInvisibleTopicUpdate = (value) => {
+        setIsInvisible(value);
+    };
+    const handleOnPressed = () => {
+        if (!isPressed) {
+            setIsPressed(true);
+            if (actionMode === ActionMode.Tap || actionMode === ActionMode.Pressed) {
+                dispatchCommand(true);
+            }
+        }
+    };
+    const handleOnReleased = () => {
+        if (isPressed) {
+            setIsPressed(false);
+            if (actionMode === ActionMode.Tap) {
+                dispatchCommand(false);
+            }
+            else if (actionMode === ActionMode.Released) {
+                dispatchCommand(true);
+            }
+        }
+    };
+    const dispatchCommand = (value) => {
+        if (command && command.length > 0) {
+            const payload = {
+                topic: commandTopic,
+                value: value,
+                ...commandArgs
+            };
+            context.dispatch({
+                topic: command,
+                payload: payload
+            });
+        }
+    };
+    let displayValue = currentValue;
+    if (restProps.value !== undefined) {
+        displayValue = restProps.value;
+    }
+    /**
+     *
+     * @param currentValue
+     * @param options
+     * @returns
+     */
+    const selectOnColor = (currentValue, options, onColorProp) => {
+        if (!options || options.length === 0)
+            return IndicatorColor.IndicatorInvalid;
+        let colorArray = Array.isArray(onColorProp) ? onColorProp :
+            onColorProp !== undefined ? [onColorProp] : [IndicatorColor.IndicatorInvalid];
+        let t = typeof (currentValue);
+        if (t === "boolean") {
+            return currentValue ? colorArray[0] : colorArray.length > 1 ? colorArray[1] : colorArray[0];
+        }
+        else if (t === "number" && options.length > currentValue) {
+            if (colorArray.length > currentValue) {
+                let index = currentValue;
+                return colorArray[index];
+            }
+            else {
+                return colorArray[0];
+            }
+        }
+        else if (t === "string") {
+            let index = options.indexOf(currentValue);
+            if (index !== -1 && index < colorArray.length)
+                return colorArray[index];
+            else
+                return colorArray[0];
+        }
+        if (onColorProp !== undefined && onColorProp !== null) {
+            return Array.isArray(onColorProp) ? onColorProp[0] : onColorProp;
+        }
+        else {
+            return IndicatorColor.IndicatorInvalid;
+        }
+    };
+    /**
+     *
+     * @param currentValue
+     * @param options
+     * @returns
+     */
+    const matchCurrentValue = (currentValue, options) => {
+        if (options === undefined || options === null || options.length === 0)
+            return undefined;
+        let t = typeof (currentValue);
+        if (t == "boolean") {
+            let b = currentValue;
+            if (b) {
+                if (options.length > 1)
+                    return options[1];
+                else
+                    return options[0];
+            }
+            else {
+                return options[0];
+            }
+        }
+        else if (t == "number") {
+            let n = currentValue;
+            if (n !== undefined && n < options.length) {
+                return options[n];
+            }
+        }
+        else if (t == "string") {
+            // The SelectButton should match to this value automatically, if it's in the
+            // options array. No reason to search twice.
+            return currentValue;
+        }
+        return undefined;
+    };
+    let color = selectOnColor(displayValue, restProps.options, onColor);
+    if (displayValue === undefined) {
+        color = IndicatorColor.IndicatorInvalid;
+    }
+    const isMultiple = restProps.options !== undefined
+        && restProps.options !== null
+        && restProps.options.length !== undefined
+        && restProps.options.length > 2;
+    const toggleGroupName = `${uniqueId}-togglegroup-selectbutton-container`;
+    const handleValueChange = (label) => {
+        if (onValueChange !== undefined && onValueChange !== null) {
+            if (restProps.options === undefined || restProps.options === null || restProps.options.length === 0) {
+                if (isMultiple)
+                    onValueChange(0);
+                else
+                    onValueChange(false);
+            }
+            else {
+                let index = 0;
+                for (let i = 0; i < restProps.options.length; ++i) {
+                    if (label === restProps.options[i]) {
+                        index = i;
+                        break;
+                    }
+                }
+                if (isMultiple)
+                    onValueChange(index);
+                else
+                    onValueChange(index > 0);
+            }
+        }
+    };
+    return (_jsxs("div", { className: "flex", children: [_jsx("style", { children: `
+                ${offColor !== undefined ? `
+                    .${toggleGroupName} .p-selectbutton .p-button {
+                        background-color: ${offColor};
+                    }
+                ` : ''}
+                .${toggleGroupName} .p-selectbutton .p-button.p-highlight {
+                    background-color: ${color} !important;
+                    border-color: ${color} !important;
+                }
+            ` }), _jsx("div", { className: toggleGroupName, children: _jsxs("div", { className: "p-inputgroup", children: [_jsx("span", { className: "p-inputgroup-addon", style: { flexGrow: 1 }, children: label }), _jsx(SelectButton, { ...restProps, options: restProps.options, disabled: isDisabled || restProps.disabled, multiple: isMultiple, className: clsx(uniqueId, restProps.className, { 'p-invalid': restProps.value === undefined }), style: isInvisible ? { display: 'none' } : {}, value: matchCurrentValue(displayValue, restProps.options), allowEmpty: false, onMouseDown: handleOnPressed, onTouchStart: handleOnPressed, onMouseUp: handleOnReleased, onTouchEnd: handleOnReleased, onChange: (e) => handleValueChange(e.value) })] }) })] }));
+};
+export default ToggleGroup;