@adcops/autocore-react 3.0.1 → 3.0.4

package/dist/components/JogPanel.d.ts

@@ -0,0 +1,118 @@
+import React from 'react';
+import './JogPanel.css';
+/**
+ * Enumerates the source button or action when an event occurs.
+ */
+export declare enum JogPanelAction {
+    /** Invalid - Ignore this button */
+    Invalid = 0,
+    xPositive = 1,
+    xNegative = 2,
+    yPositive = 3,
+    yNegative = 4,
+    zPositive = 5,
+    zNegative = 6,
+    aPositive = 7,
+    aNegative = 8,
+    bPositive = 9,
+    bNegative = 16,
+    cPositive = 17,
+    cNegative = 18,
+    /** Stop, clear or reset */
+    Stop = 255
+}
+/**
+ * Enumerates the selected jog distance.
+ */
+export declare enum JogDistanceAction {
+    Short = 0,
+    Medium = 16,
+    Long = 32
+}
+/**
+ * Enumerates the selected jog distance.
+ */
+export declare enum JogSpeedAction {
+    Slow = 0,
+    Medium = 16,
+    Fast = 32
+}
+/**
+ * Jog button definition type for defining the button in the JogPanel.
+ */
+export interface JogPanelButtonDefinition {
+    icon: string;
+    alt: string;
+    action: JogPanelAction;
+}
+/**
+ * Component properties of the directional pad.
+ */
+interface JogPanelProps {
+    onClicked?: (action: JogPanelAction) => void;
+    onJogDistanceChanged?: (action: JogDistanceAction) => void;
+    onJogSpeedChanged?: (action: JogSpeedAction) => void;
+    buttonDefinitions: (JogPanelButtonDefinition | undefined)[][] | undefined;
+    defaultJogDistance: JogDistanceAction;
+    defaultJogSpeed: JogSpeedAction;
+    showDistanceControl: boolean;
+    showSpeedControl: boolean;
+}
+interface JogPanelState {
+    jogDistance: JogDistanceAction;
+    jogSpeed: JogSpeedAction;
+}
+/**
+ * A default jog button configuration for linear 3D motion.
+ */
+export declare const DefaultLinearJogButtons: (JogPanelButtonDefinition | undefined)[][];
+/**
+ * A default jog button configuration for rotational 3D motion.
+ */
+export declare const DefaultRotationJogButtons: (JogPanelButtonDefinition | undefined)[][];
+/**
+ * Jogging panel that supports 3D motion. In 3D:
+ * - Z is Up and Down,
+ * - Y is towards and away
+ * - X is left and right
+ *
+ * This Jog Panel is based upon a standard CNC mill and industrial standards.
+ *
+ * ## Parameters
+ * @param onClicked Callback any time a button is clicked. Includes argument for direction.
+ * @param buttonDefinitions A 3x3 matrix of (JogPanelButtonDefinition | undefined) that defines the button. If a button is undefined, it is disabled.
+ *
+ * ## Button definitions
+ *
+ * Example:
+ * ```
+ * export const kDefaultButtonDefinitions : (JogPanelButtonDefinition | undefined)[][] = [
+ *    [{ icon: "pi pi-arrow-up-left", action: JogPanelAction.yPositive, alt: "Y Positive" }, { icon: "pi pi-arrow-up", action: JogPanelAction.zPositive, alt: "Z Positive" }, undefined],
+ *    [{ icon: "pi pi-arrow-left", action: JogPanelAction.xNegative, alt: "X Negative" }, undefined, { icon: "pi pi-arrow-right", action: JogPanelAction.xPositive, alt: "X Positive" }],
+ *    [undefined, { icon: "pi pi-arrow-down", action: JogPanelAction.zNegative, alt: "Z Negative" }, { icon: "pi pi-arrow-down-right", action: JogPanelAction.yNegative, alt: "Y Negative" }],
+ * ];
+ * ```
+ *
+ */
+export declare class JogPanel extends React.Component<JogPanelProps, JogPanelState> {
+    static defaultProps: JogPanelProps;
+    private jogDistanceItems;
+    private jogSpeedItems;
+    constructor(props: JogPanelProps);
+    /**
+     * Handle a user action on the DirectionalPad
+     * @param action DirectionalPadAction
+     */
+    private handleClicked;
+    /**
+     * The user has selected a different jog distance.
+     * @param {JogDistanceAction} action  The newly-selected distance.
+     */
+    private handleDistanceChanged;
+    private handleSpeedChanged;
+    emptyRow(): import("react/jsx-runtime").JSX.Element;
+    private actionToIcon;
+    standardButton(row: number, col: number): import("react/jsx-runtime").JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export default JogPanel;

package/dist/components/JogPanel.js

@@ -0,0 +1 @@
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import React from"react";import{Button}from"primereact/button";import{SelectButton}from"primereact/selectbutton";import{Tooltip}from"primereact/tooltip";import"./JogPanel.css";import{Distance,JogShort,JogMedium,JogLong}from"../assets";import{Speed,SpeedSlow,SpeedMedium,SpeedFast}from"../assets";import{RotationCcwA,RotationCcwB,RotationCcwC}from"../assets";import{RotationCwA,RotationCwB,RotationCwC}from"../assets";export var JogPanelAction;!function(t){t[t.Invalid=0]="Invalid",t[t.xPositive=1]="xPositive",t[t.xNegative=2]="xNegative",t[t.yPositive=3]="yPositive",t[t.yNegative=4]="yNegative",t[t.zPositive=5]="zPositive",t[t.zNegative=6]="zNegative",t[t.aPositive=7]="aPositive",t[t.aNegative=8]="aNegative",t[t.bPositive=9]="bPositive",t[t.bNegative=16]="bNegative",t[t.cPositive=17]="cPositive",t[t.cNegative=18]="cNegative",t[t.Stop=255]="Stop"}(JogPanelAction||(JogPanelAction={}));export var JogDistanceAction;!function(t){t[t.Short=0]="Short",t[t.Medium=16]="Medium",t[t.Long=32]="Long"}(JogDistanceAction||(JogDistanceAction={}));export var JogSpeedAction;!function(t){t[t.Slow=0]="Slow",t[t.Medium=16]="Medium",t[t.Fast=32]="Fast"}(JogSpeedAction||(JogSpeedAction={}));export const DefaultLinearJogButtons=[[{icon:"pi pi-arrow-up-left",action:JogPanelAction.yPositive,alt:"Y Positive"},{icon:"pi pi-arrow-up",action:JogPanelAction.zPositive,alt:"Z Positive"},void 0],[{icon:"pi pi-arrow-left",action:JogPanelAction.xNegative,alt:"X Negative"},void 0,{icon:"pi pi-arrow-right",action:JogPanelAction.xPositive,alt:"X Positive"}],[void 0,{icon:"pi pi-arrow-down",action:JogPanelAction.zNegative,alt:"Z Negative"},{icon:"pi pi-arrow-down-right",action:JogPanelAction.yNegative,alt:"Y Negative"}]];export const DefaultRotationJogButtons=[[{icon:"pi",action:JogPanelAction.bPositive,alt:"Rot B Positive"},{icon:"pi",action:JogPanelAction.cPositive,alt:"Rot C Positive"},void 0],[{icon:"pi",action:JogPanelAction.aNegative,alt:"Rot A Negative"},void 0,{icon:"pi",action:JogPanelAction.aPositive,alt:"Rot A Positive"}],[void 0,{icon:"pi",action:JogPanelAction.cNegative,alt:"Rot C Negative"},{icon:"pi ",action:JogPanelAction.bNegative,alt:"Rot B Negative"}]];export class JogPanel extends React.Component{constructor(t){super(t),Object.defineProperty(this,"jogDistanceItems",{enumerable:!0,configurable:!0,writable:!0,value:[{name:"S",value:JogDistanceAction.Short},{name:"M",value:JogDistanceAction.Medium},{name:"L",value:JogDistanceAction.Long}]}),Object.defineProperty(this,"jogSpeedItems",{enumerable:!0,configurable:!0,writable:!0,value:[{name:"S",value:JogSpeedAction.Slow},{name:"M",value:JogSpeedAction.Medium},{name:"F",value:JogSpeedAction.Fast}]}),this.state={jogDistance:t.defaultJogDistance,jogSpeed:t.defaultJogSpeed}}handleClicked(t){null!=t&&this.props.onClicked&&this.props.onClicked(t)}handleDistanceChanged(t){this.setState({jogDistance:t}),this.props.onJogDistanceChanged&&this.props.onJogDistanceChanged(t)}handleSpeedChanged(t){this.setState({jogSpeed:t}),this.props.onJogSpeedChanged&&this.props.onJogSpeedChanged(t)}emptyRow(){return _jsxs("div",{className:"grid-row",children:[_jsx("div",{className:"button-item empty-slot"}),_jsx("div",{className:"button-item empty-slot"}),_jsx("div",{className:"button-item empty-slot"})]})}actionToIcon(t){return t==JogPanelAction.Invalid||t==JogPanelAction.Stop?_jsx("i",{}):t==JogPanelAction.xNegative?_jsx("i",{className:"pi pi-arrow-left"}):t==JogPanelAction.xPositive?_jsx("i",{className:"pi pi-arrow-right"}):t==JogPanelAction.yNegative?_jsx("i",{className:"pi pi-arrow-up-left"}):t==JogPanelAction.yPositive?_jsx("i",{className:"pi pi-arrow-down-right"}):t==JogPanelAction.zNegative?_jsx("i",{className:"pi pi-up"}):t==JogPanelAction.zPositive?_jsx("i",{className:"pi pi-down"}):t==JogPanelAction.aNegative?_jsx(RotationCcwA,{}):t==JogPanelAction.aPositive?_jsx(RotationCwA,{}):t==JogPanelAction.bNegative?_jsx(RotationCcwB,{}):t==JogPanelAction.bPositive?_jsx(RotationCwB,{}):t==JogPanelAction.cNegative?_jsx(RotationCcwC,{}):t==JogPanelAction.cPositive?_jsx(RotationCwC,{}):_jsx("i",{})}standardButton(t,i){if(void 0!==this.props.buttonDefinitions&&void 0!==this.props.buttonDefinitions[t]&&void 0!==this.props.buttonDefinitions[t][i]&&void 0!==this.props.buttonDefinitions[t][i]?.action){const o=this.props.buttonDefinitions[t][i]?.action;return void 0!==o&&o<JogPanelAction.aPositive?_jsx(Button,{icon:this.props.buttonDefinitions[t][i]?.icon,tooltip:this.props.buttonDefinitions[t][i]?.alt,onClick:()=>this.handleClicked(o),className:"button-item"},`${t}-${i}`):_jsx(Button,{tooltip:this.props.buttonDefinitions[t][i]?.alt,onClick:()=>this.handleClicked(o),className:"button-item",icon:()=>this.actionToIcon(o)},`${t}-${i}`)}return _jsx(Button,{icon:"pi",disabled:!0,className:"button-item empty-slot"},`${t}-${i}`)}render(){return _jsxs("div",{className:"jogpanel-container",children:[_jsx(Tooltip,{target:".distance-selector-button"}),_jsxs("div",{className:"grid-container",children:[_jsxs("div",{className:"grid-row",children:[this.standardButton(0,0),this.standardButton(0,1),this.standardButton(0,2)]},"0"),_jsxs("div",{className:"grid-row",children:[this.standardButton(1,0),this.standardButton(1,1),this.standardButton(1,2)]},"1"),_jsxs("div",{className:"grid-row",children:[this.standardButton(2,0),this.standardButton(2,1),this.standardButton(2,2)]},"2")]}),this.props.showDistanceControl&&_jsxs("div",{className:"distance-selector p-inputgroup flex-1",children:[_jsx("span",{className:"p-inputgroup-addon",children:_jsx(Distance,{width:16,height:16,fill:"white"})}),_jsx(SelectButton,{value:this.state.jogDistance,onChange:t=>this.handleDistanceChanged(t.value),optionLabel:"name",options:this.jogDistanceItems,allowEmpty:!1,itemTemplate:t=>t.value==JogDistanceAction.Short?_jsx(JogShort,{className:"distance-selector-button",width:16,height:16,"data-pr-tooltip":"Short Distance","data-pr-position":"bottom",fill:"white"}):t.value==JogDistanceAction.Medium?_jsx(JogMedium,{className:"distance-selector-button",width:16,height:16,"data-pr-tooltip":"Medium Distance","data-pr-position":"bottom",fill:"white"}):_jsx(JogLong,{className:"distance-selector-button",width:16,height:16,"data-pr-tooltip":"Long Distance","data-pr-position":"bottom",fill:"white"})})]}),this.props.showSpeedControl&&_jsxs("div",{className:"distance-selector p-inputgroup flex-1",children:[_jsx("span",{className:"p-inputgroup-addon",children:_jsx(Speed,{width:16,height:16,fill:"white"})}),_jsx(SelectButton,{value:this.state.jogSpeed,onChange:t=>this.handleSpeedChanged(t.value),optionLabel:"name",options:this.jogSpeedItems,allowEmpty:!1,itemTemplate:t=>t.value==JogSpeedAction.Slow?_jsx(SpeedSlow,{className:"distance-selector-button",width:16,height:16,"data-pr-tooltip":"Slow Speed","data-pr-position":"bottom",fill:"white"}):t.value==JogSpeedAction.Medium?_jsx(SpeedMedium,{className:"distance-selector-button",width:16,height:16,"data-pr-tooltip":"Medium Speed","data-pr-position":"bottom",fill:"white"}):_jsx(SpeedFast,{className:"distance-selector-button",width:16,height:16,"data-pr-tooltip":"Fast Speed","data-pr-position":"bottom",fill:"white"})})]})]})}}Object.defineProperty(JogPanel,"defaultProps",{enumerable:!0,configurable:!0,writable:!0,value:{onClicked:void 0,onJogDistanceChanged:void 0,buttonDefinitions:DefaultLinearJogButtons,defaultJogDistance:JogDistanceAction.Short,defaultJogSpeed:JogSpeedAction.Medium,showDistanceControl:!0,showSpeedControl:!0}});export default JogPanel;

package/dist/components/Lamp.d.ts

@@ -0,0 +1,81 @@
+import React, { Component } from 'react';
+import { EventEmitterContextType } from '../core/EventEmitterContext';
+import { IndicatorColor } from "../core/IndicatorColor";
+export { IndicatorColor };
+interface LampProps {
+    /**
+     * State to be displayed<br/>
+     *
+     * Available states: **on**, **off** and **not available**:
+     *
+     * * `true` is treated as **on**
+     * * `false` is treated as **off**
+     * * `undefined` is treated as **not available**
+     */
+    value?: boolean | undefined;
+    /**
+     * X position (in pixels)
+     */
+    x?: number;
+    /**
+     * Y position (in pixels)
+     */
+    y?: number;
+    /**
+     * Width (in pixels)
+     */
+    width?: number;
+    /**
+     * Height (in pixels)<br/>
+     * @default width
+     */
+    height?: number;
+    /**
+     * CSS color for **enabled** state
+     */
+    onColor?: string;
+    /**
+     * CSS color for **disabled** state
+     */
+    offColor?: string;
+    /**
+     * CSS color for **not available** state
+     */
+    invalidColor?: string;
+    /**
+     * Custom class name to be attached
+     */
+    className?: string;
+    /**
+     * Enable absolute positioning for the component, allowing it to be
+     * placed on a specific position of its parent. This is useful when
+     * laying components over an image or wireframe.
+     */
+    useAbsolutePositioning?: boolean;
+    /**
+     * The topic to monitor to display. Optional.
+     */
+    topic?: string;
+}
+interface LampState {
+    subscribedValue?: boolean | null;
+    fontSize?: string;
+}
+export declare class Lamp extends Component<LampProps, LampState> {
+    static contextType: React.Context<EventEmitterContextType>;
+    protected unsubscribeTopicId: number | null;
+    static defaultProps: {
+        width: number;
+        height: number;
+        onColor: string;
+        offColor: string;
+        invalidColor: string;
+        useAbsolutePositioning: boolean;
+    };
+    constructor(props: LampProps);
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: LampProps): void;
+    componentWillUnmount(): void;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export default Lamp;

package/dist/components/Lamp.js

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import{Component}from"react";import clsx from"clsx";import{EventEmitterContext}from"../core/EventEmitterContext";import{IndicatorColor}from"../core/IndicatorColor";export{IndicatorColor};export class Lamp extends Component{constructor(e){super(e),Object.defineProperty(this,"unsubscribeTopicId",{enumerable:!0,configurable:!0,writable:!0,value:null}),this.state={subscribedValue:e.value,fontSize:"100%"}}componentDidMount(){const{topic:e}=this.props;if(e&&null===this.unsubscribeTopicId){const{subscribe:t}=this.context;this.unsubscribeTopicId=t(e,(e=>{this.setState({subscribedValue:e})}))}}componentDidUpdate(e){e.value!==this.props.value&&this.setState({subscribedValue:this.props.value})}componentWillUnmount(){if(null!==this.unsubscribeTopicId){const{unsubscribe:e}=this.context;e(this.unsubscribeTopicId),this.unsubscribeTopicId=null}}render(){const{x:e,y:t,width:o,height:i,className:s,onColor:r,offColor:n,invalidColor:l,useAbsolutePositioning:c}=this.props,{scale:a,xOffset:u,yOffset:p}=this.context,{subscribedValue:b}=this.state;let d=o||10;d<10&&(d=10);let m=i||10;m<10&&(m=10);let h,f=a||1;switch(0===f&&(f=1),b){case!0:h=r;break;case!1:h=n;break;default:h=l}const x={position:c?"absolute":"relative",display:c?"":"inline-block",verticalAlign:"middle",top:c&&t?`${p+f*t}px`:void 0,left:c&&e?`${u+f*e}px`:void 0,width:d?d*f+"px":void 0,height:m?m*f+"px":void 0,lineHeight:m?m*f+"px":void 0,backgroundColor:h,borderRadius:"20px"};return _jsx("div",{className:clsx(s),style:x})}}Object.defineProperty(Lamp,"contextType",{enumerable:!0,configurable:!0,writable:!0,value:EventEmitterContext}),Object.defineProperty(Lamp,"defaultProps",{enumerable:!0,configurable:!0,writable:!0,value:{width:22,height:22,onColor:"green",offColor:"gray",invalidColor:"black",useAbsolutePositioning:!1}});export default Lamp;

package/dist/components/ToggleGroup.d.ts

@@ -0,0 +1,103 @@
+import { Component } from 'react';
+import { SelectButtonProps } from 'primereact/selectbutton';
+import { EventEmitterContextType } from '../core/EventEmitterContext';
+import { IndicatorColor } from "../core/IndicatorColor";
+export { IndicatorColor };
+import { ActionMode } from '../core/ActionMode';
+export { ActionMode };
+import { IndicatorButtonState } from '../core/IndicatorButtonState';
+export interface ToggleGroupProps extends SelectButtonProps {
+    /**
+     * Label of the group/row. Can be any element.
+     *
+     * ## Examples
+     * ```
+     * <ToggleGroup label="Simple Text" />
+     * <ToggleGroup label={<span><i className="pi pi-check"></i> Icon and Text</span>} />
+     * <ToggleGroup label={<YourCustomIconComponent />} />
+     * ```
+     */
+    label?: React.ReactNode;
+    /**
+     * Topic name to monitor for state indication.
+     * If `value` field is not undefined, then that value is used instead.
+     */
+    topic?: string;
+    /**
+     * Color for the button when the state is TRUE.
+     */
+    onColor?: IndicatorColor | IndicatorColor[];
+    /**
+     * Color for the button when the state is FALSE.
+     */
+    offColor?: IndicatorColor;
+    /**
+     * Name of the command to invoke on button events.
+     * If command is "*", then the commandTopic will be dispatched
+     * internally.
+     */
+    command?: string;
+    /**
+     * Optional topic parameter to send along with the command.
+     * If set, will automatically be included with commandArgs as
+     * the value of field 'topic.'
+     */
+    commandTopic?: string;
+    /**
+     * Optional arguments sent with the command.
+     */
+    commandArgs?: any;
+    /**
+     * Topic to disable button interaction.
+     */
+    disableTopic?: string;
+    /**
+     * Topic to control the visibility of the button.
+     */
+    invisibleTopic?: string;
+    /**
+     * Mode of input for the button (e.g., TAP, TOGGLE).
+     */
+    actionMode?: ActionMode;
+    /**
+     * Inverts the signal values for TAP, PRESSED, and RELEASED modes.
+     */
+    invert?: boolean;
+}
+export declare class ToggleGroup extends Component<ToggleGroupProps, IndicatorButtonState> {
+    static contextType: import("react").Context<EventEmitterContextType>;
+    constructor(props: ToggleGroupProps);
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: ToggleGroupProps): void;
+    componentWillUnmount(): void;
+    /**
+     * Sets up subscriptions based on provided topics.
+     */
+    private setupSubscriptions;
+    /**
+     * Handles updates for the main topic.
+     */
+    private handleTopicUpdate;
+    /**
+     * Handles updates for the disable topic.
+     */
+    private handleDisableTopicUpdate;
+    /**
+     * Handles updates for the invisible topic.
+     */
+    private handleInvisibleTopicUpdate;
+    /**
+     * Handle the button being pressed down. Used for TAP and PRESSED action modes.
+     */
+    protected handleOnPressed(): void;
+    /**
+     * Handle the button being released. Used for TAP and RELEASED action modes.
+     */
+    protected handleOnReleased(): void;
+    /**
+     * Dispatch a value to any listeners.
+     * @param value The value to dispatch as part of the payload.
+     */
+    protected dispatchCommand(value: any): void;
+    render(): import("react/jsx-runtime").JSX.Element;
+}

package/dist/components/ToggleGroup.js

@@ -0,0 +1 @@
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{Component}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};function matchCurrentValue(e,t){if(null==t||0===t.length)return;let o=typeof e;if("boolean"==o){return e&&t.length>1?t[1]:t[0]}if("number"==o){let o=e;if(void 0!==o&&o<t.length)return t[o]}else if("string"==o)return e}function selectOnColor(e,t,o){if(!t||0===t.length)return IndicatorColor.IndicatorInvalid;let n=Array.isArray(o)?o:void 0!==o?[o]:[IndicatorColor.IndicatorInvalid],i=typeof e;if("boolean"===i)return e?n[0]:n.length>1?n[1]:n[0];if("number"===i&&t.length>e){if(n.length>e){return n[e]}return n[0]}if("string"===i){let o=t.indexOf(e);return-1!==o&&o<n.length?n[o]:n[0]}return null!=o?Array.isArray(o)?o[0]:o:IndicatorColor.IndicatorInvalid}export class ToggleGroup extends Component{constructor(e){super(e),Object.defineProperty(this,"handleTopicUpdate",{enumerable:!0,configurable:!0,writable:!0,value:e=>{this.setState({currentValue:e})}}),Object.defineProperty(this,"handleDisableTopicUpdate",{enumerable:!0,configurable:!0,writable:!0,value:e=>{this.setState({isDisabled:e})}}),Object.defineProperty(this,"handleInvisibleTopicUpdate",{enumerable:!0,configurable:!0,writable:!0,value:e=>{this.setState({isInvisible:e})}}),this.state={currentValue:void 0,isDisabled:!1,isInvisible:!1,isPressed:!1}}componentDidMount(){this.setupSubscriptions()}componentDidUpdate(e){}componentWillUnmount(){}setupSubscriptions(){const{topic:e,disableTopic:t,invisibleTopic:o}=this.props,{subscribe:n}=this.context;e&&n(e,this.handleTopicUpdate),t&&n(t,this.handleDisableTopicUpdate),o&&n(o,this.handleInvisibleTopicUpdate)}handleOnPressed(){const{isPressed:e}=this.state,{actionMode:t}=this.props;e||(this.setState({isPressed:!0}),t!==ActionMode.Tap&&t!==ActionMode.Pressed||this.dispatchCommand(!0))}handleOnReleased(){const{isPressed:e}=this.state,{actionMode:t}=this.props;e&&(this.setState({isPressed:!1}),t===ActionMode.Tap?this.dispatchCommand(!1):t===ActionMode.Released&&this.dispatchCommand(!0))}dispatchCommand(e){const{command:t,commandTopic:o,commandArgs:n}=this.props,{dispatch:i}=this.context;if(null!=t&&t.length>0){i({topic:t,payload:{topic:o,value:e,...n}})}}render(){const{currentValue:e,isDisabled:t,isInvisible:o}=this.state,{label:n,value:i,disabled:r,className:s,onColor:l,offColor:a,options:c,...d}=this.props;let p=e;void 0!==i&&(p=i);let u=selectOnColor(p,c,l);void 0===p&&(u=IndicatorColor.IndicatorInvalid);const h=null!=c&&c.length>2;return _jsxs("div",{className:"flex",children:[_jsx("style",{children:`                \n                    ${void 0!==a?`\n                        .togglegroup-selectbutton-container .p-selectbutton .p-button {\n                            background-color: ${a};\n                        }\n                    `:""}\n                    .togglegroup-selectbutton-container .p-selectbutton .p-button.p-highlight {\n                        background-color: ${u} !important;\n                        border-color: ${u} !important;\n                    }\n                    .togglegroup-selectbutton-container .p-selectbutton .p-highlight {\n                        background-color: ${u} !important;\n                        border-color: ${u} !important;\n                    }\n                `}),_jsxs("div",{className:"p-inputgroup togglegroup-selectbutton-container",children:[_jsx("span",{className:"p-inputgroup-addon",style:{flexGrow:1},children:n}),_jsx(SelectButton,{...d,options:c,disabled:t||r,multiple:h,className:`${s||""} ${void 0===p?"p-invalid":""}`.trim(),...o&&{style:{display:"none"}},value:matchCurrentValue(p,c),allowEmpty:!1,onMouseDown:()=>this.handleOnPressed(),onTouchStart:()=>this.handleOnPressed(),onMouseUp:()=>this.handleOnReleased(),onTouchEnd:()=>this.handleOnReleased()})]})]})}}Object.defineProperty(ToggleGroup,"contextType",{enumerable:!0,configurable:!0,writable:!0,value:EventEmitterContext});

package/dist/components/ValueInput.d.ts

@@ -0,0 +1,109 @@
+import React from "react";
+import { EventEmitterContext } from "../core/EventEmitterContext.js";
+import { KeyFilterType } from "primereact/keyfilter";
+/**
+ * Properties of the Configuration View
+ */
+interface ValueInputProps {
+    /**
+     * The label for the ValueInput 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 prefix before 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 Configuration View
+ */
+interface ValueInputState {
+    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 ValueInput extends React.Component<ValueInputProps, ValueInputState> {
+    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: ValueInputProps);
+    /**
+     * 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/ValueInput.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 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}});

package/dist/core/ActionMode.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Enum for different input modes of the IndicatorButton.
+ */
+export declare enum ActionMode {
+    Tap = "Tap",
+    Toggle = "Toggle",
+    Pressed = "Pressed",
+    Released = "Released"
+}

package/dist/core/ActionMode.js

@@ -0,0 +1 @@
+export var ActionMode;!function(e){e.Tap="Tap",e.Toggle="Toggle",e.Pressed="Pressed",e.Released="Released"}(ActionMode||(ActionMode={}));

package/dist/core/IndicatorButtonState.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Common state for the indicator buttons, toggles or similar components.
+ */
+export interface IndicatorButtonState {
+    /**
+     * Current value/state of the button based on the subscribed topic.
+     */
+    currentValue?: boolean | number | string;
+    /**
+     * Indicates whether the button is disabled.
+     */
+    isDisabled?: boolean;
+    /**
+     * Indicates whether the button is invisible.
+     */
+    isInvisible?: boolean;
+    /**
+     * The button is in the "down" state.
+     */
+    isPressed: boolean;
+}

package/dist/core/IndicatorButtonState.js

@@ -0,0 +1 @@
+export{};

package/dist/core/MaskPatterns.d.ts

@@ -39,6 +39,10 @@ export declare const RegExMaskPatterns: {
      * Examples of valid inputs: "123"
      */
     readonly IntegerPositive: RegExp;
+    /**
+     * Regular expression for matching IPV4 address.
+     */
+    readonly Ipv4: RegExp;
 };
 /**
  * Patterns for use with PrimeReact.InputMask components

package/dist/core/MaskPatterns.js

@@ -1 +1 @@
-export const RegExMaskPatterns={RealNumber:/^-?\d*(\.)?(\d+)?$/,RealNumberPositive:/^\d*(\.)?(\d+)?$/,Integer:/^-?\d*$/,IntegerPositive:/^\d+$/};export const PrimeReactMaskPatterns={SocialSecurityNumber:"999-99-9999",PhoneNumberUS:"(999) 999-9999? x99999",PhoneNumberInternational:"+999 999 999 9999? x99999",PhoneNumberJapan:"+81 9999 999 9999? x99999",PhoneNumberChina:"+86 999 999 9999? x99999",PhoneNumberVietnam:"+84 999 999 9999? x99999",PhoneNumberSouthKorea:"+82 99 9999 9999 x99999",PhoneNumberCanada:"+1 (999) 999-9999 x99999",PhoneNumberMexico:"+52 999 999 9999 x99999",PhoneNumberScotland:"+44 9999 999999 x99999",PhoneNumberEngland:"+44 9999 999999 x99999",PhoneNumberIreland:"+353 99 999 9999 x99999"};
+export const RegExMaskPatterns={RealNumber:/^-?\d*(\.)?(\d+)?$/,RealNumberPositive:/^\d*(\.)?(\d+)?$/,Integer:/^-?\d*$/,IntegerPositive:/^\d+$/,Ipv4:/^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/};export const PrimeReactMaskPatterns={SocialSecurityNumber:"999-99-9999",PhoneNumberUS:"(999) 999-9999? x99999",PhoneNumberInternational:"+999 999 999 9999? x99999",PhoneNumberJapan:"+81 9999 999 9999? x99999",PhoneNumberChina:"+86 999 999 9999? x99999",PhoneNumberVietnam:"+84 999 999 9999? x99999",PhoneNumberSouthKorea:"+82 99 9999 9999 x99999",PhoneNumberCanada:"+1 (999) 999-9999 x99999",PhoneNumberMexico:"+52 999 999 9999 x99999",PhoneNumberScotland:"+44 9999 999999 x99999",PhoneNumberEngland:"+44 9999 999999 x99999",PhoneNumberIreland:"+353 99 999 9999 x99999"};

package/docs/assets/highlight.css

@@ -3,26 +3,28 @@
     --dark-hl-0: #9CDCFE;
     --light-hl-1: #000000;
     --dark-hl-1: #D4D4D4;
-    --light-hl-2: #008000;
-    --dark-hl-2: #6A9955;
-    --light-hl-3: #0000FF;
-    --dark-hl-3: #569CD6;
-    --light-hl-4: #000000;
-    --dark-hl-4: #C8C8C8;
-    --light-hl-5: #098658;
-    --dark-hl-5: #B5CEA8;
-    --light-hl-6: #267F99;
-    --dark-hl-6: #4EC9B0;
-    --light-hl-7: #0070C1;
-    --dark-hl-7: #4FC1FF;
-    --light-hl-8: #795E26;
-    --dark-hl-8: #DCDCAA;
-    --light-hl-9: #AF00DB;
-    --dark-hl-9: #C586C0;
-    --light-hl-10: #A31515;
-    --dark-hl-10: #CE9178;
+    --light-hl-2: #AF00DB;
+    --dark-hl-2: #C586C0;
+    --light-hl-3: #A31515;
+    --dark-hl-3: #CE9178;
+    --light-hl-4: #098658;
+    --dark-hl-4: #B5CEA8;
+    --light-hl-5: #008000;
+    --dark-hl-5: #6A9955;
+    --light-hl-6: #0000FF;
+    --dark-hl-6: #569CD6;
+    --light-hl-7: #000000;
+    --dark-hl-7: #C8C8C8;
+    --light-hl-8: #267F99;
+    --dark-hl-8: #4EC9B0;
+    --light-hl-9: #0070C1;
+    --dark-hl-9: #4FC1FF;
+    --light-hl-10: #795E26;
+    --dark-hl-10: #DCDCAA;
     --light-hl-11: #CD3131;
     --dark-hl-11: #F44747;
+    --light-hl-12: #811F3F;
+    --dark-hl-12: #D16969;
     --light-code-background: #FFFFFF;
     --dark-code-background: #1E1E1E;
 }
@@ -40,6 +42,7 @@
     --hl-9: var(--light-hl-9);
     --hl-10: var(--light-hl-10);
     --hl-11: var(--light-hl-11);
+    --hl-12: var(--light-hl-12);
     --code-background: var(--light-code-background);
 } }
 
@@ -56,6 +59,7 @@
     --hl-9: var(--dark-hl-9);
     --hl-10: var(--dark-hl-10);
     --hl-11: var(--dark-hl-11);
+    --hl-12: var(--dark-hl-12);
     --code-background: var(--dark-code-background);
 } }
 
@@ -72,6 +76,7 @@
     --hl-9: var(--light-hl-9);
     --hl-10: var(--light-hl-10);
     --hl-11: var(--light-hl-11);
+    --hl-12: var(--light-hl-12);
     --code-background: var(--light-code-background);
 }
 
@@ -88,6 +93,7 @@
     --hl-9: var(--dark-hl-9);
     --hl-10: var(--dark-hl-10);
     --hl-11: var(--dark-hl-11);
+    --hl-12: var(--dark-hl-12);
     --code-background: var(--dark-code-background);
 }
 
@@ -103,4 +109,5 @@
 .hl-9 { color: var(--hl-9); }
 .hl-10 { color: var(--hl-10); }
 .hl-11 { color: var(--hl-11); }
+.hl-12 { color: var(--hl-12); }
 pre, code { background: var(--code-background); }

package/docs/assets/navigation.js

@@ -1 +1 @@
-window.navigationData = "data:application/octet-stream;base64,H4sIAAAAAAAACrWY207jMBCG3yW9RbscCgu9AwqiK7GtON0gFLmOIVaTOOs4iGrFu6+SNIljexyHltt25puZ3zNjt8//PEE+hDfxMItTlpBEZN6eh0MaBZwk3uS5MZguUODteSkSoTfxYhbkEcl+tm5+YfAjFHHk7XkrmgTe5NBMCsgryiPhBhu11hV0fHA2Ptoff+41vCf8m60XKDjHgrKkxZIkj3Vo17qb8KmBepELwZJZ4Mqt7W3krpaveVLmYmLqop6MP18k2CwJKEaCcaucjZXTATXWlywaBB5pntCZufSAwu5vBIMWOEJZBmEBVQ4OT80SV0frlnNl+21yS/hvEl2O0C99NU23LCCWOVHZrRM8LKD4tpPd8K2HUZwyGGbBWZq1sWgiCH9FeFC4kqE0wPEJHPNeIEG2jFky9JjGbh7QbaXpVr0M90LFtoXqTuM8W1mTnmernd1CNcthADppGTd6AdOSU7b5PFtNKYrYW19aldUuC5WIbuWqiRoGssUCKaur9glFOZnSLI3Q2pqwbOikwp88JhwtI3LNeIzEPC3PZ1iMEQgBnybGegxKdWLBxVV6yYphxgnwYrt6J4m4iqkQhF+ypPzUUC8nvsHSSdSbfDmQOKpc7NcIsAQBrOkh1120Bq+HdQrtWiAMALHFtW10IAqwwCVmvswwp+lwnWRPq1qVW9F/SODwerPL2mBinVqFMvsrIffPfh0cH+phN1kuyVfjagDHwI9Jtm1oA6I3uG1G3xGnxbYZ1pXdkEdQtAVn7zQg3HxrOYSrAdYL7RZlqwUqzM3LlhNfNnHaOgtOY3JHEBZmuiJbh2/2tUh2R96uPobH0dy0ELJKzb1SbBRIp67RTi49qa0VutnT3M1yJQuW0cLUft8oVts+YwCiyy9GMF91o6oBVE/bRp3SmCRZIWDfiKtQzdPaRo8J/ZuTmfFvGk78+msnuXWWsh4amhmr7IHySXNP4zyC/qvgxO8a7aArDECX/5OAXNtnm462pa4+ckOGgXxDht3eXQyfB4F8oSs/WKXBLpiAfd/lFGpuYDeUmWvmhpboCGF6Pob58utvz9q555l5ky83Z0XsDMnKxmJ4RcSM9bBaKwvrAeWc2kG1CUTBnCBBOvq0p1WAGgPtfDqpXKDMLI+/+XK7CVVBDpOpJVWPpMwyJqfOYF8H+JLBTsrswNxK1RNUym2YYLKmsm3N6ksGuylbhjmWrSWoll0zwWQNZcNz5dffuq4dBaVkV6HMzPrn+8t/QOSaZXgZAAA="
+window.navigationData = "data:application/octet-stream;base64,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"