@adcops/autocore-react 3.0.34 → 3.0.36

package/dist/components/Osk.js

@@ -1,125 +1 @@
-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;
+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;

package/dist/components/OskDialog.js

@@ -1,128 +1 @@
-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;
+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;

package/dist/components/ProgressBarWithValue.js

@@ -1,18 +1 @@
-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;
+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;

package/dist/components/TextInput.js

@@ -1,139 +1 @@
-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
-    }
-});
+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}});

package/dist/components/ToggleGroup.js

@@ -1,204 +1 @@
-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;
+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;