@adcops/autocore-react 3.0.4 → 3.0.6

package/dist/components/FitText.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+interface FitTextProps {
+    /** The children prop expects any valid React node. */
+    children: React.ReactNode;
+}
+/**
+ * FitText dynamically adjusts the font size of its children to fit the parent container.
+ *
+ * @param {FitTextProps} props The props for the FitText component.
+ * @returns A div element that resizes its child text to fit.
+ */
+export declare const FitText: React.FC<FitTextProps>;
+export default FitText;

package/dist/components/FitText.js

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import useFitText from"use-fit-text";export const FitText=({children:t})=>{const{fontSize:e,ref:i}=useFitText();return _jsx("div",{ref:i,style:{width:"100%",height:"100%",display:"flex",justifyContent:"center",alignItems:"center"},children:_jsx("p",{style:{fontSize:e},children:t})})};export default FitText;

package/dist/components/TextInput.d.ts

@@ -0,0 +1,109 @@
+import React from "react";
+import { EventEmitterContext } from "../core/EventEmitterContext.js";
+import { KeyFilterType } from "primereact/keyfilter";
+/**
+ * Properties of the component.
+ */
+interface TextInputProps {
+    /**
+     * The label for the field.
+     */
+    label: React.ReactNode | undefined;
+    /**
+     * The value for the field.
+     */
+    value: string | undefined;
+    /**
+     * Optional filter for key entry. Not a validator, but won't accept keystrokes outside the filter.
+     * @type {RegExp | "pint" | "int" | "pnum" | "money" | "num" | "hex" | "email" | "alpha" | "alphanum"}
+     */
+    keyFilter: KeyFilterType | undefined;
+    /**
+     * An optional prefix before the data entry field.
+     */
+    prefix: React.ReactNode | undefined;
+    /**
+     * An optional suffix after the data entry field.
+     */
+    suffix: React.ReactNode | undefined;
+    /**
+     * A small, advisory text below the field.
+     */
+    description: React.ReactNode | undefined;
+    /**
+     * If true, all functions of the field will be disabled.
+     */
+    disabled: boolean | undefined;
+    /** Topic on which the value will be dispatched through the user interfave on successful data entry. */
+    dispatchTopic: string | undefined;
+    /**
+     * Placeholder string to display if the value is empty.
+     */
+    placeholder: string | undefined;
+    /**
+     * The user has accepted a new value.
+     * @param newValue New value accepted by the user.
+     */
+    onValueChanged?(newValue: string): void;
+    /** Regular expression used to validate the value before it is broadcast */
+    validator: RegExp;
+}
+/**
+ * State variables of the component.
+ */
+interface TextInputState {
+    entryValue: string | undefined;
+    isValid: boolean;
+    editing: boolean;
+}
+/**
+ * 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 declare class TextInput extends React.Component<TextInputProps, TextInputState> {
+    static contextType: React.Context<import("../core/EventEmitterContext.js").EventEmitterContextType>;
+    context: React.ContextType<typeof EventEmitterContext>;
+    /**
+     * Default properties for the component.
+     */
+    static defaultProps: {
+        label: string;
+        value: undefined;
+        keyFilter: undefined;
+        writeTopic: undefined;
+        onValueChanged: undefined;
+        description: undefined;
+        prefix: undefined;
+        suffix: undefined;
+        disabled: boolean;
+        dispatchTopic: undefined;
+        placeholder: undefined;
+        validator: undefined;
+    };
+    /**
+     *
+     * @param {FooterViewProps} props
+     */
+    constructor(props: TextInputProps);
+    /**
+     * The component has been loaded into the DOM.
+     */
+    componentDidMount(): void;
+    /**
+     * 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.
+     */
+    private validateValue;
+    /**
+     * The user has elected to accept the input value. Validate and store, if valid.
+     */
+    private onAcceptValue;
+    /**
+     * The user wishes to reset/cancel the previous value.
+     */
+    private onResetValue;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export {};

package/dist/components/TextInput.js

@@ -0,0 +1 @@
+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(){}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(){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,{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/ValueIndicator.d.ts

@@ -0,0 +1,61 @@
+import React, { Component } from 'react';
+import type { NumerableFormatOptions } from '../core/NumerableTypes';
+/**
+ * Properties of the ValueDisplay component.
+ */
+interface ValueIndicatorProps {
+    /**
+     * Label for the indicator.
+     */
+    label?: React.ReactNode | undefined;
+    /**
+     * Value to be displayed
+     */
+    value?: string | number | null | undefined;
+    /**
+     * Tooltip to display on hover
+     */
+    tooltip?: string | undefined;
+    /**
+     * Format for `value`<br/>
+     * See [numerable formats](https://github.com/gastonmesseri/numerable#1234-formatting-numbers)
+     */
+    format?: string | null | undefined;
+    /**
+     * Format options for `value`<br/>
+     * See [numerable format options](https://github.com/gastonmesseri/numerable#format)
+     */
+    formatOptions?: NumerableFormatOptions;
+    /**
+     * Custom class name to be attached
+     */
+    className?: string;
+    /**
+     * The topic to monitor to display. Optional.
+     */
+    topic?: string;
+}
+/**
+ * State of the ValueDisplay component.
+ */
+interface ValueIndicatorState {
+}
+/**
+ * `ValueIndicator` wraps `ValueDisplay` in a frame and label, giving it a widget appearance.
+ * Care is taken to adapt to the selected theme of the application.
+ *
+ */
+export declare class ValueIndicator extends Component<ValueIndicatorProps, ValueIndicatorState> {
+    /**
+     * The constructor initializes the component state and binds the initial value.
+     * @param {ValueIndicatorProps} props The properties passed to the component, including initial value and other display options.
+     */
+    constructor(props: ValueIndicatorProps);
+    /**
+     * Renders the component into the DOM.
+     * @returns A styled `div` element displaying the indicator.
+     */
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export default ValueIndicator;
+export { NumerableFormatOptions };

package/dist/components/ValueIndicator.js

@@ -0,0 +1 @@
+import{jsxs as _jsxs,jsx as _jsx,Fragment as _Fragment}from"react/jsx-runtime";import{Component}from"react";import{Tooltip}from"primereact/tooltip";import{ValueDisplay}from"./ValueDisplay";export class ValueIndicator extends Component{constructor(r){super(r),this.state={}}render(){return _jsxs(_Fragment,{children:[_jsxs("style",{children:["\n                        .value-indicator-container {\n\n                            background-color: var(--surface-ground);\n                            border-color: var(--surface-border);\n                            border-radius: var(--border-radius);\n                            border-width: 1px;\n                            border-style: solid;\n                            display: flex;\n                            flex-direction: column;\n                            justify-content: center;\n                            align-items: center;\n                            padding: 2mm;\n                        }\n\n                        .value-indicator-label {\n                            padding-bottom: 1mm;\n                        }            \n                    ","'"]}),_jsx(Tooltip,{target:".value-indicator-tooltip"}),_jsx("span",{className:"value-indicator-tooltip",children:_jsxs("div",{className:"value-indicator-container",children:[void 0!==this.props.label&&_jsx("div",{className:"value-indicator-label",children:this.props.label}),_jsx(ValueDisplay,{className:this.props.className,value:this.props.value,format:this.props.format,formatOptions:this.props.formatOptions,topic:this.props.topic,"data-pr-tooltip":this.props.tooltip,"data-pr-position":"down","data-pr-mousetrack":!0,"data-pr-showDelay":2e3})]})})]})}}export default ValueIndicator;

package/dist/components/ValueInput.d.ts

@@ -1,8 +1,7 @@
 import React from "react";
 import { EventEmitterContext } from "../core/EventEmitterContext.js";
-import { KeyFilterType } from "primereact/keyfilter";
 /**
- * Properties of the Configuration View
+ * Properties of the ValueInput component.
  */
 interface ValueInputProps {
     /**
@@ -12,20 +11,75 @@ interface ValueInputProps {
     /**
      * The value for the field.
      */
-    value: string | undefined;
+    value: number | null;
     /**
-     * Optional filter for key entry. Not a validator, but won't accept keystrokes outside the filter.
-     * @type {RegExp | "pint" | "int" | "pnum" | "money" | "num" | "hex" | "email" | "alpha" | "alphanum"}
+     * Minimum value for the field.
      */
-    keyFilter: KeyFilterType | undefined;
+    min: number | undefined;
     /**
-     * An optional prefix before the data entry field.
+     * Minimum value for the field.
      */
-    prefix: React.ReactNode | undefined;
+    max: number | undefined;
     /**
-     * An optional prefix before the data entry field.
+     * Minimum number of decimal points. The user will not
+     * be required to type the decimal values, but this minimum
+     * precision will always be displayed.
+     * Must be less than or equal to maxPrecision, or
+     * the component will throw an error.
+     * @default 0
      */
-    suffix: React.ReactNode | undefined;
+    minPrecision: number | undefined;
+    /**
+     * Maximum number of decimal points.
+     * Set to 0 for integer-only. Must be greater or equal to than minPrecision, or
+     * the component will throw an error.
+     * @default 3
+     */
+    maxPrecision: number | undefined;
+    /**
+     * Defines the behavior of the component.
+     * If set to "currency", then you need to specify the
+     * currency type using the currency property.
+     * @default "decimal"
+     */
+    mode: "currency" | "decimal" | undefined;
+    /**
+     * The currency to use in currency formatting. Possible values are the
+     * [ISO 4217 currency codes](https://www.six-group.com/en/products-services/financial-information/data-standards.html#scrollTo=maintenance-agency),
+     * such as "USD" for the US dollar, "EUR" for the euro, or "CNY" for the Chinese RMB.
+     * If the mode is "currency", the currency property must be provided.
+     *
+     * @default "USD"
+     */
+    currency: string;
+    /**
+     * An optional prefix before the value of the field.
+     * Unlike the TextInput control, this prefix is internal to the field.
+     */
+    prefix: string | undefined;
+    /**
+     * An optional suffix after the value of the field.
+     * Unlike the TextInput control, this prefix is internal to the field.
+     */
+    suffix: string | undefined;
+    /**
+     * Set true to display buttons to increment/decrement the value.
+     * Use the step property to adjust the amount that the value will change.
+     *
+     * @default false
+     */
+    showButtons: boolean;
+    /**
+     * The amount clicking an increment/decrement buttion will change the value.
+     */
+    step: number | undefined;
+    /**
+     * Locale to be used in formatting. Changes how the numbers/separators are displayed
+     * for international users. The typical locale codes are used.
+     *
+     * @default "en-US"
+     */
+    locale: string | undefined;
     /**
      * A small, advisory text below the field.
      */
@@ -44,21 +98,18 @@ interface ValueInputProps {
      * The user has accepted a new value.
      * @param newValue New value accepted by the user.
      */
-    onValueChanged?(newValue: string): void;
-    /** Regular expression used to validate the value before it is broadcast */
-    validator: RegExp;
+    onValueChanged?(newValue: number): void;
 }
 /**
- * State variables of the Configuration View
+ * State variables of the ValueInput component.
  */
 interface ValueInputState {
-    entryValue: string | undefined;
-    isValid: boolean;
+    entryValue: number | null;
     editing: boolean;
 }
 /**
- * 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,
+ * A convenient field with all the usual features of inputing numbers.
+ * Wraps the common features of use of a InputNumber, p-inputgroup, some icon buttons,
  * accepting and rejecting values and keyboard management.
  */
 export declare class ValueInput extends React.Component<ValueInputProps, ValueInputState> {
@@ -80,6 +131,15 @@ export declare class ValueInput extends React.Component<ValueInputProps, ValueIn
         dispatchTopic: undefined;
         placeholder: undefined;
         validator: undefined;
+        min: undefined;
+        max: undefined;
+        minPrecision: number;
+        maxPrecision: number;
+        mode: string;
+        showButtons: boolean;
+        step: number;
+        locale: string;
+        currency: string;
     };
     /**
      *
@@ -90,12 +150,6 @@ export declare class ValueInput extends React.Component<ValueInputProps, ValueIn
      * The component has been loaded into the DOM.
      */
     componentDidMount(): void;
-    /**
-     * 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.
-     */
-    private validateValue;
     /**
      * The user has elected to accept the input value. Validate and store, if valid.
      */

package/dist/components/ValueInput.js

@@ -1 +1 @@
-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 ValueInput extends React.Component{constructor(e){super(e),Object.defineProperty(this,"validateValue",{enumerable:!0,configurable:!0,writable:!0,value:e=>void 0===this.props.validator||null===this.props.validator||this.props.validator.test(e)}),this.state={entryValue:e.value,isValid:void 0!==e.value&&this.validateValue(e.value),editing:!1}}componentDidMount(){}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(){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,{keyfilter:this.props.keyFilter,placeholder:this.props.placeholder,value:this.state.entryValue,onChange:e=>{this.setState({entryValue:e.target.value,editing:!0})},className:this.state.isValid?"":"p-invalid",onKeyDown:e=>{"Enter"===e.key?this.onAcceptValue():"Escape"===e.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()}),_jsx(Button,{icon:"pi pi-times",disabled:this.props.disabled||!this.state.editing,className:"p-button-danger",onClickCapture:()=>this.onResetValue()})]}),void 0!==this.props.description&&_jsx("small",{children:this.props.description})]})}}Object.defineProperty(ValueInput,"contextType",{enumerable:!0,configurable:!0,writable:!0,value:EventEmitterContext}),Object.defineProperty(ValueInput,"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";import React from"react";import{InputNumber}from"primereact/inputnumber";import{Button}from"primereact/button";import{EventEmitterContext}from"../core/EventEmitterContext.js";export class ValueInput extends React.Component{constructor(e){super(e),this.state={entryValue:e.value,editing:!1}}componentDidMount(){}onAcceptValue(){null!==this.state.entryValue&&(this.setState({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}))}onResetValue(){this.setState({entryValue:this.props.value,editing:!1})}render(){return _jsxs("div",{children:[_jsxs("div",{className:"p-inputgroup flex-1",children:[_jsx("span",{className:"p-inputgroup-addon",children:this.props.label}),_jsx(InputNumber,{min:this.props.min,max:this.props.max,minFractionDigits:this.props.minPrecision,maxFractionDigits:this.props.maxPrecision,mode:this.props.mode,prefix:this.props.prefix,suffix:this.props.suffix,showButtons:this.props.showButtons,step:this.props.step,placeholder:this.props.placeholder,value:this.state.entryValue,onChange:e=>{this.setState({entryValue:e.value,editing:!0})},buttonLayout:"horizontal",decrementButtonClassName:"p-button-danger",incrementButtonClassName:"p-button-success",incrementButtonIcon:"pi pi-plus",decrementButtonIcon:"pi pi-minus",locale:"en-US",currency:this.props.currency,onKeyDown:e=>{"Enter"===e.key?this.onAcceptValue():"Escape"===e.key&&this.onResetValue()},disabled:this.props.disabled}),_jsx(Button,{icon:"pi pi-check",disabled:this.props.disabled||!this.state.editing,className:"p-button-success",onClick:()=>this.onAcceptValue(),visible:this.state.editing,size:"small"}),_jsx(Button,{icon:"pi pi-times",disabled:this.props.disabled||!this.state.editing,className:"p-button-danger",onClickCapture:()=>this.onResetValue(),visible:this.state.editing,size:"small"})]}),void 0!==this.props.description&&_jsx("small",{children:this.props.description})]})}}Object.defineProperty(ValueInput,"contextType",{enumerable:!0,configurable:!0,writable:!0,value:EventEmitterContext}),Object.defineProperty(ValueInput,"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,min:void 0,max:void 0,minPrecision:0,maxPrecision:3,mode:"decimal",showButtons:!1,step:1,locale:"en-US",currency:"USD"}});

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@adcops/autocore-react",
-    "version": "3.0.4",
+    "version": "3.0.6",
     "description": "A React component library for industrial user interfaces.",
     "private": false,
     "type": "module",

package/src/components/FitText.tsx

@@ -0,0 +1,36 @@
+/*
+ * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
+ * Created Date: 2024-03-21 13:03:38
+ * -----
+ * Last Modified: 2024-03-21 13:36:25
+ * -----
+ * 
+ */
+
+
+import React from 'react';
+import useFitText from 'use-fit-text';
+
+interface FitTextProps {
+  /** The children prop expects any valid React node. */
+  children: React.ReactNode;
+}
+
+/**
+ * FitText dynamically adjusts the font size of its children to fit the parent container.
+ * 
+ * @param {FitTextProps} props The props for the FitText component.
+ * @returns A div element that resizes its child text to fit.
+ */
+export const FitText: React.FC<FitTextProps> = ({ children }) => {
+  const { fontSize, ref } = useFitText();
+
+  return (
+    <div ref={ref} style={{ width: '100%', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+      <p style={{ fontSize }}>{children}</p>
+    </div>
+  );
+};
+
+
+export default FitText;

package/src/components/TextInput.tsx

@@ -0,0 +1,263 @@
+/*
+ * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
+ * Created Date: 2024-03-20 13:05:42
+ * -----
+ * Last Modified: 2024-03-21 08:35:18
+ * -----
+ * 
+ */
+
+
+import React from "react";
+
+import { InputText } from 'primereact/inputtext';
+import { Button } from "primereact/button";
+
+import { EventEmitterContext } from "../core/EventEmitterContext.js";
+import { KeyFilterType } from "primereact/keyfilter";
+
+/**
+ * Properties of the component.
+ */
+interface TextInputProps {
+
+    /**
+     * The label for the field.
+     */
+    label : React.ReactNode | undefined;
+
+
+    /**
+     * The value for the field.
+     */
+    value : string | undefined;
+
+
+    /** 
+     * Optional filter for key entry. Not a validator, but won't accept keystrokes outside the filter. 
+     * @type {RegExp | "pint" | "int" | "pnum" | "money" | "num" | "hex" | "email" | "alpha" | "alphanum"}
+     */
+    keyFilter : KeyFilterType | undefined;
+    
+    
+    /**
+     * An optional prefix before the data entry field.
+     */
+    prefix : React.ReactNode | undefined;
+
+    /**
+     * An optional suffix after the data entry field.
+     */
+    suffix : React.ReactNode | undefined;
+
+    /**
+     * A small, advisory text below the field.
+     */
+    description : React.ReactNode | undefined;
+
+    /**
+     * If true, all functions of the field will be disabled.
+     */
+    disabled : boolean | undefined;
+    
+    /** Topic on which the value will be dispatched through the user interfave on successful data entry. */
+    dispatchTopic : string | undefined;
+
+    /**
+     * Placeholder string to display if the value is empty.
+     */
+    placeholder : string | undefined;
+
+    /**
+     * The user has accepted a new value.
+     * @param newValue New value accepted by the user.
+     */ 
+    onValueChanged?(newValue: string) : void;
+    /** Regular expression used to validate the value before it is broadcast */
+    validator : RegExp;
+}
+
+/**
+ * State variables of the component.
+ */
+interface TextInputState {
+    
+    entryValue : string | undefined;
+    isValid : boolean;
+    editing : boolean;
+}
+
+
+/**
+ * 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<TextInputProps, TextInputState> {
+
+    // Here's an example of using the Application-wide EventEmitter con
+    // Define the contextType for the class to access the context
+    static contextType = EventEmitterContext;
+    // After specifying contextType, you can declare the context's type for the TypeScript compiler.
+    // Basically, we're telling TypeScript the type of the context; this line doesn't
+    // actually do any linking linking to the EventEmitterContext.    
+    declare context: React.ContextType<typeof EventEmitterContext>;
+
+
+    
+
+    /**
+     * Default properties for the component.
+     */
+    static defaultProps = {
+        label : '',        
+        value : undefined,
+        keyFilter : undefined,
+        writeTopic : undefined,
+        onValueChanged : undefined,
+        description: undefined,
+        prefix: undefined,
+        suffix : undefined,
+        disabled : false,
+        dispatchTopic : undefined,
+        placeholder : undefined,
+        validator : undefined
+    };
+
+    /**
+     * 
+     * @param {FooterViewProps} props 
+     */
+    constructor(props : TextInputProps) {
+        super(props);
+        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() {        
+    }    
+
+    
+
+    /**
+     * 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.
+     */
+    private validateValue = (val : string) => {
+
+        if (this.props.validator !== undefined && this.props.validator !== null) {
+            return this.props.validator.test(val);
+        }
+        else {
+            return true;
+        }
+        
+    };    
+
+
+    /**
+     * The user has elected to accept the input value. Validate and store, if valid.
+     */
+    private 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.
+     */
+    private onResetValue() {
+        this.setState({
+            entryValue: this.props.value, 
+            isValid: this.props.value !== undefined ? this.validateValue(this.props.value) : false,
+            editing : false
+        });
+    }
+
+
+    render() {
+
+        return(
+            <div>
+                <div className="p-inputgroup flex-1" >
+                    <span className="p-inputgroup-addon">
+                        {this.props.label}
+                    </span>
+                    { this.props.prefix !== undefined && 
+                        <span className="p-inputgroup-addon">
+                            {this.props.prefix}
+                        </span>
+                    }                    
+                    <InputText 
+                        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 && 
+                        <span className="p-inputgroup-addon">
+                            {this.props.suffix}
+                        </span>
+                    }                    
+                    <Button 
+                        icon="pi pi-check" 
+                        disabled={this.props.disabled || !this.state.editing}
+                        className="p-button-success" 
+                        onClick={() => this.onAcceptValue()} 
+                        visible={this.state.editing}
+                    />
+
+                    <Button 
+                        icon="pi pi-times" 
+                        disabled={this.props.disabled || !this.state.editing}
+                        className="p-button-danger" 
+                        onClickCapture={()=>this.onResetValue()} 
+                        visible={this.state.editing}
+                    />
+                </div>
+                
+                {this.props.description !== undefined &&
+                    <small>{this.props.description}</small>
+                }
+                
+
+            </div>
+
+        );
+    }
+
+}

package/src/components/ValueIndicator.tsx

@@ -0,0 +1,152 @@
+/*
+ * Copyright (C) 2024 Automated Design Corp. All Rights Reserved.
+ * Created Date: 2024-01-16 14:17:02
+ * -----
+ * Last Modified: 2024-03-21 15:24:54
+ * Modified By: ADC
+ * -----
+ * 
+ */
+
+
+
+import React, { Component } from 'react';
+
+import { Tooltip } from "primereact/tooltip";
+
+import { ValueDisplay } from './ValueDisplay';
+import type { NumerableFormatOptions } from '../core/NumerableTypes';
+
+
+
+
+/**
+ * Properties of the ValueDisplay component.
+ */
+interface ValueIndicatorProps {
+
+    /**
+     * Label for the indicator.
+     */
+    label?: React.ReactNode | undefined;
+
+    /**
+     * Value to be displayed
+     */
+    value?: string | number | null | undefined;
+
+
+    /**
+     * Tooltip to display on hover
+     */
+    tooltip?: string | undefined;
+
+    /**
+     * Format for `value`<br/>
+     * See [numerable formats](https://github.com/gastonmesseri/numerable#1234-formatting-numbers)
+     */
+    format?: string | null | undefined;
+
+    /**
+     * Format options for `value`<br/>
+     * See [numerable format options](https://github.com/gastonmesseri/numerable#format)
+     */
+    formatOptions?: NumerableFormatOptions;
+
+    /**
+     * Custom class name to be attached
+     */
+    className?: string;
+
+    /**
+     * The topic to monitor to display. Optional. 
+     */
+    topic?: string;
+}
+
+/**
+ * State of the ValueDisplay component.
+ */
+interface ValueIndicatorState {
+}
+
+
+
+/**
+ * `ValueIndicator` wraps `ValueDisplay` in a frame and label, giving it a widget appearance.
+ * Care is taken to adapt to the selected theme of the application.
+ * 
+ */
+export class ValueIndicator extends Component<ValueIndicatorProps, ValueIndicatorState> {
+
+
+    /**
+     * The constructor initializes the component state and binds the initial value.
+     * @param {ValueIndicatorProps} props The properties passed to the component, including initial value and other display options.
+     */
+    constructor(props: ValueIndicatorProps) {
+        super(props);
+        this.state = {
+        };
+    }
+
+    /**
+     * Renders the component into the DOM.
+     * @returns A styled `div` element displaying the indicator.
+     */
+    render() {
+
+
+        return (
+            <>
+                <style>
+                    {`
+                        .value-indicator-container {
+
+                            background-color: var(--surface-ground);
+                            border-color: var(--surface-border);
+                            border-radius: var(--border-radius);
+                            border-width: 1px;
+                            border-style: solid;
+                            display: flex;
+                            flex-direction: column;
+                            justify-content: center;
+                            align-items: center;
+                            padding: 2mm;
+                        }
+
+                        .value-indicator-label {
+                            padding-bottom: 1mm;
+                        }            
+                    `}'
+                </style>
+                <Tooltip target=".value-indicator-tooltip" />
+                <span className="value-indicator-tooltip" >
+                    <div className='value-indicator-container'>
+
+                        {this.props.label !== undefined &&
+                            <div className="value-indicator-label">
+                                {this.props.label}
+                            </div>
+                        }
+
+                        <ValueDisplay
+                            className={this.props.className}
+                            value={this.props.value}
+                            format={this.props.format}
+                            formatOptions={this.props.formatOptions}
+                            topic={this.props.topic}
+                            data-pr-tooltip={this.props.tooltip}
+                            data-pr-position="down"
+                            data-pr-mousetrack={true}
+                            data-pr-showDelay={2000}
+                        />
+                    </div>
+                </span>
+            </>
+        );
+    }
+}
+
+export default ValueIndicator;
+export { NumerableFormatOptions };

package/src/components/ValueInput.tsx

@@ -2,7 +2,7 @@
  * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
  * Created Date: 2024-03-20 13:05:42
  * -----
- * Last Modified: 2024-03-20 16:22:06
+ * Last Modified: 2024-03-21 09:37:17
  * -----
  * 
  */
@@ -10,14 +10,13 @@
 
 import React from "react";
 
-import { InputText } from 'primereact/inputtext';
+import { InputNumber} from 'primereact/inputnumber';
 import { Button } from "primereact/button";
 
 import { EventEmitterContext } from "../core/EventEmitterContext.js";
-import { KeyFilterType } from "primereact/keyfilter";
 
 /**
- * Properties of the Configuration View
+ * Properties of the ValueInput component.
  */
 interface ValueInputProps {
 
@@ -30,25 +29,90 @@ interface ValueInputProps {
     /**
      * The value for the field.
      */
-    value : string | undefined;
+    value : number | null;
 
+    /**
+     * Minimum value for the field.
+     */
+    min : number | undefined;
 
-    /** 
-     * Optional filter for key entry. Not a validator, but won't accept keystrokes outside the filter. 
-     * @type {RegExp | "pint" | "int" | "pnum" | "money" | "num" | "hex" | "email" | "alpha" | "alphanum"}
+    /**
+     * Minimum value for the field.
      */
-    keyFilter : KeyFilterType | undefined;
-    
+    max : number | undefined;
+
+    /**
+     * Minimum number of decimal points. The user will not
+     * be required to type the decimal values, but this minimum
+     * precision will always be displayed.
+     * Must be less than or equal to maxPrecision, or
+     * the component will throw an error.
+     * @default 0
+     */
+    minPrecision : number | undefined;
+
+
+    /**
+     * Maximum number of decimal points.
+     * Set to 0 for integer-only. Must be greater or equal to than minPrecision, or
+     * the component will throw an error.
+     * @default 3
+     */
+    maxPrecision : number | undefined;
+
+
+    /**
+     * Defines the behavior of the component. 
+     * If set to "currency", then you need to specify the
+     * currency type using the currency property.
+     * @default "decimal"
+     */
+    mode : "currency" | "decimal" | undefined;
+
+
+    /**
+     * The currency to use in currency formatting. Possible values are the 
+     * [ISO 4217 currency codes](https://www.six-group.com/en/products-services/financial-information/data-standards.html#scrollTo=maintenance-agency), 
+     * such as "USD" for the US dollar, "EUR" for the euro, or "CNY" for the Chinese RMB.
+     * If the mode is "currency", the currency property must be provided.
+     * 
+     * @default "USD"
+     */
+    currency : string;
     
     /**
-     * An optional prefix before the data entry field.
+     * An optional prefix before the value of the field.
+     * Unlike the TextInput control, this prefix is internal to the field.
+     */
+    prefix : string | undefined;
+
+    /**
+     * An optional suffix after the value of the field.
+     * Unlike the TextInput control, this prefix is internal to the field.
      */
-    prefix : React.ReactNode | undefined;
+    suffix : string | undefined;
 
     /**
-     * An optional prefix before the data entry field.
+     * Set true to display buttons to increment/decrement the value.
+     * Use the step property to adjust the amount that the value will change.
+     * 
+     * @default false
      */
-    suffix : React.ReactNode | undefined;
+    showButtons : boolean;
+
+    /**
+     * The amount clicking an increment/decrement buttion will change the value.
+     */
+    step : number | undefined;
+
+
+    /**
+     * Locale to be used in formatting. Changes how the numbers/separators are displayed
+     * for international users. The typical locale codes are used.
+     * 
+     * @default "en-US"
+     */
+    locale : string | undefined;
 
     /**
      * A small, advisory text below the field.
@@ -72,25 +136,22 @@ interface ValueInputProps {
      * The user has accepted a new value.
      * @param newValue New value accepted by the user.
      */ 
-    onValueChanged?(newValue: string) : void;
-    /** Regular expression used to validate the value before it is broadcast */
-    validator : RegExp;
+    onValueChanged?(newValue: number) : void;
 }
 
 /**
- * State variables of the Configuration View
+ * State variables of the ValueInput component.
  */
 interface ValueInputState {
     
-    entryValue : string | undefined;
-    isValid : boolean;
+    entryValue : number | null;
     editing : boolean;
 }
 
 
 /**
- * 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,
+ * A convenient field with all the usual features of inputing numbers. 
+ * Wraps the common features of use of a InputNumber, p-inputgroup, some icon buttons,
  * accepting and rejecting values and keyboard management.
  */
 export class ValueInput extends React.Component<ValueInputProps, ValueInputState> {
@@ -121,7 +182,16 @@ export class ValueInput extends React.Component<ValueInputProps, ValueInputState
         disabled : false,
         dispatchTopic : undefined,
         placeholder : undefined,
-        validator : undefined
+        validator : undefined,
+        min : undefined,
+        max : undefined,
+        minPrecision : 0,
+        maxPrecision : 3,
+        mode : "decimal",
+        showButtons : false,
+        step : 1,
+        locale : "en-US",
+        currency : "USD"
     };
 
     /**
@@ -132,7 +202,6 @@ export class ValueInput extends React.Component<ValueInputProps, ValueInputState
         super(props);
         this.state = {
             entryValue : props.value,
-            isValid : props.value !== undefined ? this.validateValue(props.value) : false,
             editing : false
         };
     }
@@ -145,45 +214,20 @@ export class ValueInput extends React.Component<ValueInputProps, ValueInputState
 
     
 
-    /**
-     * 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.
-     */
-    private validateValue = (val : string) => {
-
-        if (this.props.validator !== undefined && this.props.validator !== null) {
-            return this.props.validator.test(val);
-        }
-        else {
-            return true;
-        }
-        
-    };    
-
-
     /**
      * The user has elected to accept the input value. Validate and store, if valid.
      */
     private 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});
-                }
-
+        if (this.state.entryValue !== null ) {
+            this.setState({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});            
+
         }
     }
 
@@ -193,7 +237,6 @@ export class ValueInput extends React.Component<ValueInputProps, ValueInputState
     private onResetValue() {
         this.setState({
             entryValue: this.props.value, 
-            isValid: this.props.value !== undefined ? this.validateValue(this.props.value) : false,
             editing : false
         });
     }
@@ -206,18 +249,30 @@ export class ValueInput extends React.Component<ValueInputProps, ValueInputState
                 <div className="p-inputgroup flex-1" >
                     <span className="p-inputgroup-addon">
                         {this.props.label}
-                    </span>
-                    { this.props.prefix !== undefined && 
-                        <span className="p-inputgroup-addon">
-                            {this.props.prefix}
-                        </span>
-                    }                    
-                    <InputText 
-                        keyfilter={this.props.keyFilter}                         
+                    </span>                  
+                    <InputNumber                         
+                        min={this.props.min}
+                        max={this.props.max}
+                        minFractionDigits={this.props.minPrecision}
+                        maxFractionDigits={this.props.maxPrecision}
+                        mode={this.props.mode}
+                        prefix={this.props.prefix}
+                        suffix={this.props.suffix}
+                        showButtons={this.props.showButtons}
+                        step={this.props.step}
                         placeholder={this.props.placeholder} 
                         value={this.state.entryValue}
-                        onChange={(e) => {this.setState({entryValue: e.target.value, editing : true})} }
-                        className={this.state.isValid ? '' : 'p-invalid'}
+                        onChange={(e) => {this.setState({entryValue: e.value, editing : true})} }
+
+                        buttonLayout="horizontal"
+                        decrementButtonClassName="p-button-danger" 
+                        incrementButtonClassName="p-button-success" 
+                        incrementButtonIcon="pi pi-plus" 
+                        decrementButtonIcon="pi pi-minus"
+
+                        locale="en-US"
+                        currency={this.props.currency}
+
                         onKeyDown={(e) => {
                             if (e.key === 'Enter') {
                                 this.onAcceptValue();
@@ -226,18 +281,15 @@ export class ValueInput extends React.Component<ValueInputProps, ValueInputState
                                 this.onResetValue();
                             }
                         }}     
-                        disabled={this.props.disabled}                   
-                    />
-                    { this.props.suffix !== undefined && 
-                        <span className="p-inputgroup-addon">
-                            {this.props.suffix}
-                        </span>
-                    }                    
+                        disabled={this.props.disabled}                                           
+                    />                  
                     <Button 
                         icon="pi pi-check" 
                         disabled={this.props.disabled || !this.state.editing}
                         className="p-button-success" 
                         onClick={() => this.onAcceptValue()} 
+                        visible={this.state.editing}
+                        size="small"
                     />
 
                     <Button 
@@ -245,6 +297,8 @@ export class ValueInput extends React.Component<ValueInputProps, ValueInputState
                         disabled={this.props.disabled || !this.state.editing}
                         className="p-button-danger" 
                         onClickCapture={()=>this.onResetValue()} 
+                        visible={this.state.editing}
+                        size="small"
                     />
                 </div>