@adcops/autocore-react 3.0.1 → 3.0.4

package/dist/assets/svg/speed.svg

@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   height="24"
+   viewBox="0 -960 960 960"
+   width="24"
+   fill="white"
+   version="1.1"
+   id="svg1"
+   sodipodi:docname="speed.svg"
+   inkscape:version="1.3.2 (091e20e, 2023-11-25, custom)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#505050"
+     bordercolor="#eeeeee"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#505050"
+     inkscape:zoom="33.875"
+     inkscape:cx="12"
+     inkscape:cy="12"
+     inkscape:window-width="1920"
+     inkscape:window-height="1009"
+     inkscape:window-x="1912"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg1" />
+  <path
+     d="m 406.33774,-313.68 q 28.512,28.512 73.656,27.918 45.144,-0.594 66.528,-32.67 l 200.772,-300.564 q 10.692,-16.632 -2.97,-30.294 -13.662,-13.662 -30.294,-2.97 l -300.564,200.772 q -32.076,21.384 -33.858,65.34 -1.782,43.956 26.73,72.468 z m 73.656,-546.48 q 42.768,0 84.348,7.128 41.58,7.128 80.784,22.572 19.008,7.128 40.392,26.73 21.384,19.602 11.88,37.422 -9.504,17.82 -42.768,23.76 -33.264,5.94 -53.46,-1.188 -29.7,-10.692 -59.994,-16.038 -30.294,-5.346 -61.182,-5.346 -158.004,0 -269.082,111.078 -111.078003,111.078 -111.078003,269.082 0,49.896 13.662003,98.604 13.662,48.708 38.61,91.476 h 655.776 q 27.324,-45.144 39.798,-93.852 12.474,-48.708 12.474,-100.98 0,-30.888 -5.346,-60.588 -5.346,-29.7 -16.038,-58.212 -7.128,-20.196 -2.376,-39.204 4.752,-19.008 21.384,-32.076 15.444,-11.88 33.858,-7.128 18.414,4.752 25.542,21.384 17.82,41.58 27.324,84.942 9.504,43.362 10.692,88.506 1.188,67.716 -15.444,129.492 -16.632,61.776 -48.708,117.612 -13.068,21.384 -35.64,33.264 -22.572,11.88 -47.52,11.88 h -655.776 q -24.948,0 -47.52,-11.88 -22.572003,-11.88 -35.640006,-33.264 -30.888,-53.46 -47.52,-113.454 -16.6320005,-59.994 -16.6320005,-126.522 0,-98.604 37.4220005,-184.734 37.422003,-86.13 102.168006,-150.876 64.746,-64.746 151.47,-102.168 86.724,-37.422 184.14,-37.422 z m 8.316,371.844 z"
+     id="path1"
+     style="stroke-width:1.188" />
+</svg>

package/dist/assets/svg/speed_fast.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" fill="white"><path d="M177-80q-18 0-29.5-12T136-120q0-8 3-15t9-13l664-664q6-6 13-9t15-3q16 0 28 11.5t12 29.5v643q0 25-17.5 42.5T820-80H177Z"/></svg>

package/dist/assets/svg/speed_medium.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" fill="white"><path d="M177-80q-18 0-29.5-12T136-120q0-8 3-15t9-13l664-664q6-6 13-9t15-3q16 0 28 11.5t12 29.5v643q0 25-17.5 42.5T820-80H177Zm423-80h200v-526L600-486v326Z"/></svg>

package/dist/assets/svg/speed_none.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" fill="white"><path d="M177-80q-27 0-37.5-24.5T148-148l664-664q19-19 43.5-8.5T880-783v643q0 25-17.5 42.5T820-80H177Zm96-80h527v-526L273-160Z"/></svg>

package/dist/assets/svg/speed_slow.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" fill="white"><path d="M177-80q-18 0-29.5-12T136-120q0-8 3-15t9-13l664-664q6-6 13-9t15-3q16 0 28 11.5t12 29.5v643q0 25-17.5 42.5T820-80H177Zm223-80h400v-526L400-286v126Z"/></svg>

package/dist/assets/svg/walk.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" fill="white"><path d="M436-364 371-72q-3 14-14.5 23T330-40q-20 0-32-15t-8-34l102-515-72 28v96q0 17-11.5 28.5T280-440q-17 0-28.5-11.5T240-480v-122q0-12 6.5-21.5T264-638l178-76q14-6 29.5-7t29.5 4q14 5 26.5 14t20.5 23l40 64q13 20 30.5 38t39.5 31q14 8 31 14.5t34 9.5q16 3 26.5 14.5T760-480q0 17-12 28t-29 9q-56-8-100.5-35T541-543l-25 123 72 68q6 6 9 13.5t3 15.5v243q0 17-11.5 28.5T560-40q-17 0-28.5-11.5T520-80v-220l-84-64Zm104-376q-33 0-56.5-23.5T460-820q0-33 23.5-56.5T540-900q33 0 56.5 23.5T620-820q0 33-23.5 56.5T540-740Z"/></svg>

package/dist/components/BlocklyEditor.css

@@ -0,0 +1,25 @@
+/*
+ * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
+ * Created Date: 2024-03-15 14:22:54
+ * -----
+ * Last Modified: 2024-03-18 08:23:33
+ * -----
+ * 
+ */
+
+ .editor-toggle-group {
+    margin-bottom: 2mm;
+ }
+
+
+ .fill-height {
+    height: 100%;
+    width: 100%;
+    background-color: green;
+  }
+
+  /* In your CSS file */
+.icon-scale {
+    height: 24px;
+    width: auto;
+  }

package/dist/components/BlocklyEditor.d.ts

@@ -0,0 +1,120 @@
+import Blockly from "blockly";
+import React from 'react';
+import "./BlocklyEditor.css";
+/**
+ * Properties for the Blockly Editor.
+ */
+interface BlocklyEditorProps {
+    /**
+     * The initial XML representation of the Blockly workspace. Can be undefined
+     * if the workspace should start empty.
+     */
+    initialXml: string | undefined;
+    /**
+     * The configuration definition for the Blockly Toolbox.
+     */
+    toolbox: Blockly.utils.toolbox.ToolboxDefinition;
+    /**
+     * Allows the parent component to add/subtract from the calculated
+     * width of the BlocklyEditor to account for other components (like a menu, toolbar, switch)
+     * in the view.
+     */
+    widthAdjustment: number;
+    /**
+     * Allows the parent component to add/subtract from the calculated
+     * height of the BlocklyEditor to account for other components (like a menu, toolbar, switch)
+     * in the view.
+     */
+    heightAdjustment: number;
+    /**
+     * Callback fired when the Blockly workspace content changes.
+     * Note: This does not directly reflect changes to the XML or the code.
+     */
+    onWorkspaceChanged?: () => void;
+    /**
+     * Callback fired when the XML representation of the workspace changes.
+     * @param xml The updated XML representation of the workspace.
+     */
+    onXmlChanged?: (xml: string) => void;
+    /**
+     * Callback fired when the generated code (e.g., Python) changes.
+     * @param code The updated generated code.
+     */
+    onCodeChanged?: (code: string) => void;
+}
+/**
+ * State of the BlocklyEditor
+ */
+interface BlocklyEditorState {
+    /**
+     * A name for the Blockly editor, potentially used for identification.
+     */
+    name: string;
+    /**
+     * The current XML representation of the workspace.
+     */
+    xml: string;
+    /**
+     * The current generated code (e.g., Python).
+     */
+    code: string;
+    /**
+     * The height of the first parent container with
+     * classname "blockly-container". It is important to set
+     * a parent container with this class name for auto-sizing to work!
+     */
+    parentHeight: number;
+    /**
+     * The width of the first parent container with
+     * classname "blockly-container". It is important to set
+     * a parent container with this class name for auto-sizing to work!
+     */
+    parentWidth: number;
+}
+/**
+ * A view that contains the blockly editor, wrapping the react-blockly BlocklyWorkspace
+ * component. The added value of this BlocklyEditor component is that it will automatically
+ * size to the container, which can be a bit tricky when using blockly.
+ *
+ * The auto-sizing requires a parent component to have the className "blockly-container". This
+ * should be a component that has a known size roughly the size that you want the BlocklyEditor
+ * to appear. Otherwise, the BlocklyEditor will use the dimentions of the entire window, which usually is
+ * more than you want.
+ *
+ * Right now, the editor only supports generating python code, but a feature to specify the
+ * generator for different languages is planned.
+ */
+export declare class BlocklyEditor extends React.Component<BlocklyEditorProps, BlocklyEditorState> {
+    static defaultProps: {
+        initialXml: undefined;
+        widthAdjustment: number;
+        heightAdjustment: number;
+        onWorkspaceChanged: undefined;
+        onXmlChanged: undefined;
+        onCodeChanged: undefined;
+    };
+    private ref;
+    /**
+     * Constructor
+     */
+    constructor(props: BlocklyEditorProps);
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: BlocklyEditorProps): void;
+    componentWillUnmount(): void;
+    updateParentSize: () => void;
+    private onWorkspaceChanged;
+    private setXml;
+    private onInject;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export default BlocklyEditor;
+/**
+ * Creates a custom Blockly toolbox XML string by inserting additional XML before and after
+ * the standard Blockly toolbox.
+ *
+ * @param {string | undefined} xmlBefore - The XML content to be inserted before the built-in Blockly blocks.
+ * @param {string | undefined} xmlAfter - The XML content to be inserted after the built-in Blockly blocks.
+ * @returns {string} The customized toolbox XML string.
+ */
+export declare const createCustomToolbox: (xmlBefore: string | undefined, xmlAfter: string | undefined) => string;
+export declare const StandardToolbox = "\n    <xml id=\"toolbox\" style=\"display: none\">\n    <!-- BEGIN: Built-in Blockly Blocks //-->\n    <category name=\"Logic\" categorystyle=\"logic_category\">\n        <block type=\"controls_if\"></block>\n        <block type=\"logic_compare\"></block>\n        <block type=\"logic_operation\"></block>\n        <block type=\"logic_negate\"></block>\n        <block type=\"logic_boolean\"></block>\n        <block type=\"logic_null\" disabled=\"true\"></block>\n        <block type=\"logic_ternary\"></block>\n    </category>\n    <category name=\"Loops\" categorystyle=\"loop_category\">\n        <block type=\"controls_repeat_ext\">\n            <value name=\"TIMES\">\n                <shadow type=\"math_number\">\n                    <field name=\"NUM\">10</field>\n                </shadow>\n            </value>\n        </block>\n        <block type=\"controls_repeat\" disabled=\"true\"></block>\n        <block type=\"controls_whileUntil\"></block>\n        <block type=\"controls_for\">\n            <value name=\"FROM\">\n                <shadow type=\"math_number\">\n                    <field name=\"NUM\">1</field>\n                </shadow>\n            </value>\n            <value name=\"TO\">\n                <shadow type=\"math_number\">\n                    <field name=\"NUM\">10</field>\n                </shadow>\n            </value>\n            <value name=\"BY\">\n                <shadow type=\"math_number\">\n                    <field name=\"NUM\">1</field>\n                </shadow>\n            </value>\n        </block>\n        <block type=\"controls_forEach\"></block>\n        <block type=\"controls_flow_statements\"></block>\n    </category>\n    <category name=\"Math\" categorystyle=\"math_category\">\n        <block type=\"math_number\" gap=\"32\">\n            <field name=\"NUM\">123</field>\n        </block>\n        <block type=\"math_arithmetic\">\n            <value name=\"A\">\n                <shadow type=\"math_number\">\n                    <field name=\"NUM\">1</field>\n                </shadow>\n            </value>\n            <value name=\"B\">\n                <shadow type=\"math_number\">\n                    <field name=\"NUM\">1</field>\n                </shadow>\n            </value>\n        </block>\n        <block type=\"math_single\">\n            <value name=\"NUM\">\n                <shadow type=\"math_number\">\n                    <field name=\"NUM\">9</field>\n                </shadow>\n            </value>\n        </block>\n        <block type=\"math_trig\">\n            <value name=\"NUM\">\n                <shadow type=\"math_number\">\n                    <field name=\"NUM\">45</field>\n                </shadow>\n            </value>\n        </block>\n        <block type=\"math_constant\"></block>\n        <block type=\"math_number_property\">\n            <value name=\"NUMBER_TO_CHECK\">\n                <shadow type=\"math_number\">\n                    <field name=\"NUM\">0</field>\n                </shadow>\n            </value>\n        </block>\n        <block type=\"math_round\">\n            <value name=\"NUM\">\n                <shadow type=\"math_number\">\n                    <field name=\"NUM\">3.1</field>\n                </shadow>\n            </value>\n        </block>\n        <block type=\"math_on_list\"></block>\n        <block type=\"math_modulo\">\n            <value name=\"DIVIDEND\">\n                <shadow type=\"math_number\">\n                    <field name=\"NUM\">64</field>\n                </shadow>\n            </value>\n            <value name=\"DIVISOR\">\n                <shadow type=\"math_number\">\n                    <field name=\"NUM\">10</field>\n                </shadow>\n            </value>\n        </block>\n        <block type=\"math_constrain\">\n            <value name=\"VALUE\">\n                <shadow type=\"math_number\">\n                    <field name=\"NUM\">50</field>\n                </shadow>\n            </value>\n            <value name=\"LOW\">\n                <shadow type=\"math_number\">\n                    <field name=\"NUM\">1</field>\n                </shadow>\n            </value>\n            <value name=\"HIGH\">\n                <shadow type=\"math_number\">\n                    <field name=\"NUM\">100</field>\n                </shadow>\n            </value>\n        </block>\n        <block type=\"math_random_int\">\n            <value name=\"FROM\">\n                <shadow type=\"math_number\">\n                    <field name=\"NUM\">1</field>\n                </shadow>\n            </value>\n            <value name=\"TO\">\n                <shadow type=\"math_number\">\n                    <field name=\"NUM\">100</field>\n                </shadow>\n            </value>\n        </block>\n        <block type=\"math_random_float\"></block>\n        <block type=\"math_atan2\">\n            <value name=\"X\">\n                <shadow type=\"math_number\">\n                    <field name=\"NUM\">1</field>\n                </shadow>\n            </value>\n            <value name=\"Y\">\n                <shadow type=\"math_number\">\n                    <field name=\"NUM\">1</field>\n                </shadow>\n            </value>\n        </block>\n    </category>\n    <category name=\"Text\" categorystyle=\"text_category\">\n        <block type=\"text\"></block>\n        <block type=\"text_multiline\"></block>\n        <block type=\"text_join\"></block>\n        <block type=\"text_append\">\n            <value name=\"TEXT\">\n                <shadow type=\"text\"></shadow>\n            </value>\n        </block>\n        <block type=\"text_length\">\n            <value name=\"VALUE\">\n                <shadow type=\"text\">\n                    <field name=\"TEXT\">abc</field>\n                </shadow>\n            </value>\n        </block>\n        <block type=\"text_isEmpty\">\n            <value name=\"VALUE\">\n                <shadow type=\"text\">\n                    <field name=\"TEXT\"></field>\n                </shadow>\n            </value>\n        </block>\n        <block type=\"text_indexOf\">\n            <value name=\"VALUE\">\n                <block type=\"variables_get\">\n                    <field name=\"VAR\">text</field>\n                </block>\n            </value>\n            <value name=\"FIND\">\n                <shadow type=\"text\">\n                    <field name=\"TEXT\">abc</field>\n                </shadow>\n            </value>\n        </block>\n        <block type=\"text_charAt\">\n            <value name=\"VALUE\">\n                <block type=\"variables_get\">\n                    <field name=\"VAR\">text</field>\n                </block>\n            </value>\n        </block>\n        <block type=\"text_getSubstring\">\n            <value name=\"STRING\">\n                <block type=\"variables_get\">\n                    <field name=\"VAR\">text</field>\n                </block>\n            </value>\n        </block>\n        <block type=\"text_changeCase\">\n            <value name=\"TEXT\">\n                <shadow type=\"text\">\n                    <field name=\"TEXT\">abc</field>\n                </shadow>\n            </value>\n        </block>\n        <block type=\"text_trim\">\n            <value name=\"TEXT\">\n                <shadow type=\"text\">\n                    <field name=\"TEXT\">abc</field>\n                </shadow>\n            </value>\n        </block>\n        <block type=\"text_count\">\n            <value name=\"SUB\">\n                <shadow type=\"text\"></shadow>\n            </value>\n            <value name=\"TEXT\">\n                <shadow type=\"text\"></shadow>\n            </value>\n        </block>\n        <block type=\"text_replace\">\n            <value name=\"FROM\">\n                <shadow type=\"text\"></shadow>\n            </value>\n            <value name=\"TO\">\n                <shadow type=\"text\"></shadow>\n            </value>\n            <value name=\"TEXT\">\n                <shadow type=\"text\"></shadow>\n            </value>\n        </block>\n        <block type=\"text_reverse\">\n            <value name=\"TEXT\">\n                <shadow type=\"text\"></shadow>\n            </value>\n        </block>\n        <label text=\"Input/Output:\" web-class=\"ioLabel\"></label>\n        <block type=\"text_print\">\n            <value name=\"TEXT\">\n                <shadow type=\"text\">\n                    <field name=\"TEXT\">abc</field>\n                </shadow>\n            </value>\n        </block>\n        <block type=\"text_prompt_ext\">\n            <value name=\"TEXT\">\n                <shadow type=\"text\">\n                    <field name=\"TEXT\">abc</field>\n                </shadow>\n            </value>\n        </block>\n    </category>\n    <category name=\"Lists\" categorystyle=\"list_category\">\n        <block type=\"lists_create_with\">\n            <mutation items=\"0\"></mutation>\n        </block>\n        <block type=\"lists_create_with\"></block>\n        <block type=\"lists_repeat\">\n            <value name=\"NUM\">\n                <shadow type=\"math_number\">\n                    <field name=\"NUM\">5</field>\n                </shadow>\n            </value>\n        </block>\n        <block type=\"lists_length\"></block>\n        <block type=\"lists_isEmpty\"></block>\n        <block type=\"lists_indexOf\">\n            <value name=\"VALUE\">\n                <block type=\"variables_get\">\n                    <field name=\"VAR\">list</field>\n                </block>\n            </value>\n        </block>\n        <block type=\"lists_getIndex\">\n            <value name=\"VALUE\">\n                <block type=\"variables_get\">\n                    <field name=\"VAR\">list</field>\n                </block>\n            </value>\n        </block>\n        <block type=\"lists_setIndex\">\n            <value name=\"LIST\">\n                <block type=\"variables_get\">\n                    <field name=\"VAR\">list</field>\n                </block>\n            </value>\n        </block>\n        <block type=\"lists_getSublist\">\n            <value name=\"LIST\">\n                <block type=\"variables_get\">\n                    <field name=\"VAR\">list</field>\n                </block>\n            </value>\n        </block>\n        <block type=\"lists_split\">\n            <value name=\"DELIM\">\n                <shadow type=\"text\">\n                    <field name=\"TEXT\">,</field>\n                </shadow>\n            </value>\n        </block>\n        <block type=\"lists_sort\"></block>\n        <block type=\"lists_reverse\"></block>\n    </category>\n    <category name=\"Variables\" categorystyle=\"variable_category\" custom=\"VARIABLE\"></category>\n    <category name=\"Functions\" categorystyle=\"procedure_category\" custom=\"PROCEDURE\"></category>\n\n    <!-- END: Built-in Blockly Blocks //-->\n\n    </xml>\n";

package/dist/components/BlocklyEditor.js

@@ -0,0 +1 @@
+import{jsx as _jsx,Fragment as _Fragment}from"react/jsx-runtime";import{pythonGenerator}from"blockly/python";import{BlocklyWorkspace}from"react-blockly";import React from"react";import"./BlocklyEditor.css";export class BlocklyEditor extends React.Component{constructor(e){super(e),Object.defineProperty(this,"ref",{enumerable:!0,configurable:!0,writable:!0,value:React.createRef()}),Object.defineProperty(this,"updateParentSize",{enumerable:!0,configurable:!0,writable:!0,value:()=>{if(this.ref.current){let e=0,n=0,t=this.ref.current.parentElement;for(;null!=t&&(e=t.offsetWidth,n=t.offsetHeight,!(t.className.indexOf("blockly-container")>=0));)t=t.parentElement;e<300&&(e=300),n<300&&(n=300),this.setState({parentWidth:.9*e+this.props.widthAdjustment,parentHeight:.9*n+this.props.heightAdjustment})}}}),Object.defineProperty(this,"onWorkspaceChanged",{enumerable:!0,configurable:!0,writable:!0,value:e=>{const n=pythonGenerator.workspaceToCode(e);this.setState({code:n}),void 0!==this.props.onWorkspaceChanged&&null!==this.props.onWorkspaceChanged&&this.props.onWorkspaceChanged(),void 0!==this.props.onCodeChanged&&null!==this.props.onCodeChanged&&this.props.onCodeChanged(n)}}),Object.defineProperty(this,"setXml",{enumerable:!0,configurable:!0,writable:!0,value:e=>{this.setState({xml:e}),void 0!==this.props.onXmlChanged&&null!==this.props.onXmlChanged&&this.props.onXmlChanged(e)}}),Object.defineProperty(this,"onInject",{enumerable:!0,configurable:!0,writable:!0,value:e=>{}}),this.state={name:"",xml:"",code:"",parentWidth:0,parentHeight:0}}componentDidMount(){this.updateParentSize(),window.addEventListener("resize",this.updateParentSize)}componentDidUpdate(e){}componentWillUnmount(){window.removeEventListener("resize",this.updateParentSize)}render(){return _jsx(_Fragment,{children:_jsx(BlocklyWorkspace,{className:"fill-height",toolboxConfiguration:this.props.toolbox,initialXml:this.props.initialXml,onWorkspaceChange:this.onWorkspaceChanged,onXmlChange:this.setXml,onInject:this.onInject,workspaceConfiguration:{grid:{spacing:20,length:3,colour:"#ccc",snap:!0}}})})}}Object.defineProperty(BlocklyEditor,"defaultProps",{enumerable:!0,configurable:!0,writable:!0,value:{initialXml:void 0,widthAdjustment:0,heightAdjustment:0,onWorkspaceChanged:void 0,onXmlChanged:void 0,onCodeChanged:void 0}});export default BlocklyEditor;export const createCustomToolbox=(e,n)=>{const t="\x3c!-- END: Built-in Blockly Blocks //--\x3e",a=StandardToolbox.indexOf("\x3c!-- BEGIN: Built-in Blockly Blocks //--\x3e"),l=StandardToolbox.indexOf(t);if(-1===a||-1===l)throw new Error("Could not find markers in standard toolbox");return StandardToolbox.slice(0,a)+(e||"")+StandardToolbox.slice(a,l+39)+(n||"")+StandardToolbox.slice(l+39+1)};export const StandardToolbox='\n    <xml id="toolbox" style="display: none">\n    \x3c!-- BEGIN: Built-in Blockly Blocks //--\x3e\n    <category name="Logic" categorystyle="logic_category">\n        <block type="controls_if"></block>\n        <block type="logic_compare"></block>\n        <block type="logic_operation"></block>\n        <block type="logic_negate"></block>\n        <block type="logic_boolean"></block>\n        <block type="logic_null" disabled="true"></block>\n        <block type="logic_ternary"></block>\n    </category>\n    <category name="Loops" categorystyle="loop_category">\n        <block type="controls_repeat_ext">\n            <value name="TIMES">\n                <shadow type="math_number">\n                    <field name="NUM">10</field>\n                </shadow>\n            </value>\n        </block>\n        <block type="controls_repeat" disabled="true"></block>\n        <block type="controls_whileUntil"></block>\n        <block type="controls_for">\n            <value name="FROM">\n                <shadow type="math_number">\n                    <field name="NUM">1</field>\n                </shadow>\n            </value>\n            <value name="TO">\n                <shadow type="math_number">\n                    <field name="NUM">10</field>\n                </shadow>\n            </value>\n            <value name="BY">\n                <shadow type="math_number">\n                    <field name="NUM">1</field>\n                </shadow>\n            </value>\n        </block>\n        <block type="controls_forEach"></block>\n        <block type="controls_flow_statements"></block>\n    </category>\n    <category name="Math" categorystyle="math_category">\n        <block type="math_number" gap="32">\n            <field name="NUM">123</field>\n        </block>\n        <block type="math_arithmetic">\n            <value name="A">\n                <shadow type="math_number">\n                    <field name="NUM">1</field>\n                </shadow>\n            </value>\n            <value name="B">\n                <shadow type="math_number">\n                    <field name="NUM">1</field>\n                </shadow>\n            </value>\n        </block>\n        <block type="math_single">\n            <value name="NUM">\n                <shadow type="math_number">\n                    <field name="NUM">9</field>\n                </shadow>\n            </value>\n        </block>\n        <block type="math_trig">\n            <value name="NUM">\n                <shadow type="math_number">\n                    <field name="NUM">45</field>\n                </shadow>\n            </value>\n        </block>\n        <block type="math_constant"></block>\n        <block type="math_number_property">\n            <value name="NUMBER_TO_CHECK">\n                <shadow type="math_number">\n                    <field name="NUM">0</field>\n                </shadow>\n            </value>\n        </block>\n        <block type="math_round">\n            <value name="NUM">\n                <shadow type="math_number">\n                    <field name="NUM">3.1</field>\n                </shadow>\n            </value>\n        </block>\n        <block type="math_on_list"></block>\n        <block type="math_modulo">\n            <value name="DIVIDEND">\n                <shadow type="math_number">\n                    <field name="NUM">64</field>\n                </shadow>\n            </value>\n            <value name="DIVISOR">\n                <shadow type="math_number">\n                    <field name="NUM">10</field>\n                </shadow>\n            </value>\n        </block>\n        <block type="math_constrain">\n            <value name="VALUE">\n                <shadow type="math_number">\n                    <field name="NUM">50</field>\n                </shadow>\n            </value>\n            <value name="LOW">\n                <shadow type="math_number">\n                    <field name="NUM">1</field>\n                </shadow>\n            </value>\n            <value name="HIGH">\n                <shadow type="math_number">\n                    <field name="NUM">100</field>\n                </shadow>\n            </value>\n        </block>\n        <block type="math_random_int">\n            <value name="FROM">\n                <shadow type="math_number">\n                    <field name="NUM">1</field>\n                </shadow>\n            </value>\n            <value name="TO">\n                <shadow type="math_number">\n                    <field name="NUM">100</field>\n                </shadow>\n            </value>\n        </block>\n        <block type="math_random_float"></block>\n        <block type="math_atan2">\n            <value name="X">\n                <shadow type="math_number">\n                    <field name="NUM">1</field>\n                </shadow>\n            </value>\n            <value name="Y">\n                <shadow type="math_number">\n                    <field name="NUM">1</field>\n                </shadow>\n            </value>\n        </block>\n    </category>\n    <category name="Text" categorystyle="text_category">\n        <block type="text"></block>\n        <block type="text_multiline"></block>\n        <block type="text_join"></block>\n        <block type="text_append">\n            <value name="TEXT">\n                <shadow type="text"></shadow>\n            </value>\n        </block>\n        <block type="text_length">\n            <value name="VALUE">\n                <shadow type="text">\n                    <field name="TEXT">abc</field>\n                </shadow>\n            </value>\n        </block>\n        <block type="text_isEmpty">\n            <value name="VALUE">\n                <shadow type="text">\n                    <field name="TEXT"></field>\n                </shadow>\n            </value>\n        </block>\n        <block type="text_indexOf">\n            <value name="VALUE">\n                <block type="variables_get">\n                    <field name="VAR">text</field>\n                </block>\n            </value>\n            <value name="FIND">\n                <shadow type="text">\n                    <field name="TEXT">abc</field>\n                </shadow>\n            </value>\n        </block>\n        <block type="text_charAt">\n            <value name="VALUE">\n                <block type="variables_get">\n                    <field name="VAR">text</field>\n                </block>\n            </value>\n        </block>\n        <block type="text_getSubstring">\n            <value name="STRING">\n                <block type="variables_get">\n                    <field name="VAR">text</field>\n                </block>\n            </value>\n        </block>\n        <block type="text_changeCase">\n            <value name="TEXT">\n                <shadow type="text">\n                    <field name="TEXT">abc</field>\n                </shadow>\n            </value>\n        </block>\n        <block type="text_trim">\n            <value name="TEXT">\n                <shadow type="text">\n                    <field name="TEXT">abc</field>\n                </shadow>\n            </value>\n        </block>\n        <block type="text_count">\n            <value name="SUB">\n                <shadow type="text"></shadow>\n            </value>\n            <value name="TEXT">\n                <shadow type="text"></shadow>\n            </value>\n        </block>\n        <block type="text_replace">\n            <value name="FROM">\n                <shadow type="text"></shadow>\n            </value>\n            <value name="TO">\n                <shadow type="text"></shadow>\n            </value>\n            <value name="TEXT">\n                <shadow type="text"></shadow>\n            </value>\n        </block>\n        <block type="text_reverse">\n            <value name="TEXT">\n                <shadow type="text"></shadow>\n            </value>\n        </block>\n        <label text="Input/Output:" web-class="ioLabel"></label>\n        <block type="text_print">\n            <value name="TEXT">\n                <shadow type="text">\n                    <field name="TEXT">abc</field>\n                </shadow>\n            </value>\n        </block>\n        <block type="text_prompt_ext">\n            <value name="TEXT">\n                <shadow type="text">\n                    <field name="TEXT">abc</field>\n                </shadow>\n            </value>\n        </block>\n    </category>\n    <category name="Lists" categorystyle="list_category">\n        <block type="lists_create_with">\n            <mutation items="0"></mutation>\n        </block>\n        <block type="lists_create_with"></block>\n        <block type="lists_repeat">\n            <value name="NUM">\n                <shadow type="math_number">\n                    <field name="NUM">5</field>\n                </shadow>\n            </value>\n        </block>\n        <block type="lists_length"></block>\n        <block type="lists_isEmpty"></block>\n        <block type="lists_indexOf">\n            <value name="VALUE">\n                <block type="variables_get">\n                    <field name="VAR">list</field>\n                </block>\n            </value>\n        </block>\n        <block type="lists_getIndex">\n            <value name="VALUE">\n                <block type="variables_get">\n                    <field name="VAR">list</field>\n                </block>\n            </value>\n        </block>\n        <block type="lists_setIndex">\n            <value name="LIST">\n                <block type="variables_get">\n                    <field name="VAR">list</field>\n                </block>\n            </value>\n        </block>\n        <block type="lists_getSublist">\n            <value name="LIST">\n                <block type="variables_get">\n                    <field name="VAR">list</field>\n                </block>\n            </value>\n        </block>\n        <block type="lists_split">\n            <value name="DELIM">\n                <shadow type="text">\n                    <field name="TEXT">,</field>\n                </shadow>\n            </value>\n        </block>\n        <block type="lists_sort"></block>\n        <block type="lists_reverse"></block>\n    </category>\n    <category name="Variables" categorystyle="variable_category" custom="VARIABLE"></category>\n    <category name="Functions" categorystyle="procedure_category" custom="PROCEDURE"></category>\n\n    \x3c!-- END: Built-in Blockly Blocks //--\x3e\n\n    </xml>\n';

package/dist/components/CodeEditor.d.ts

@@ -0,0 +1,76 @@
+import * as React from 'react';
+import { editor } from 'monaco-editor';
+import { Monaco } from '@monaco-editor/react';
+interface CodeEditorProps {
+    /**
+     * Code content of the editor
+     */
+    code: string | undefined;
+    /**
+     * Programming language type for syntax highlighting
+     * @default 'python'
+     */
+    language: string;
+    /**
+     * Visual theme of the editor. vs-dark is generally preferred.
+     * @default 'vs-dark'
+     */
+    theme: 'vs-dark' | 'vs-light';
+    /**
+     * Whether the editor is read only
+     * @default false
+     */
+    readOnly: boolean;
+    /**
+     * Style of the cursor in the editor.
+     * @default 'line'
+     */
+    cursorStyle: "line" | "block" | "underline" | "line-thin" | "block-outline" | "underline-thin" | undefined;
+    /** Callback when the user types chances into the editor. */
+    onCodeChanged?(code: string | undefined): void;
+}
+/**
+ * Wrapper for the Microsoft Monaco editor, configured for our most common defaults.
+ */
+export declare class CodeEditor extends React.Component<CodeEditorProps> {
+    /**
+     * Default properties for this component.
+     */
+    static defaultProps: {
+        code: undefined;
+        language: string;
+        theme: string;
+        readOnly: boolean;
+        cursorStyle: string;
+        onCodeChanged: undefined;
+    };
+    /**
+     * Constructor
+     * @param props PythonEditorProps
+     */
+    constructor(props: CodeEditorProps);
+    /**
+     * The editor is initialized and displayed in the view.
+     * @param editor
+     * @param monaco
+     */
+    editorDidMount: (editor: editor.IStandaloneCodeEditor, monaco: Monaco) => void;
+    /**
+     * The editor is about to mount into the view.
+     * @param monaco Instance of the editor.
+     */
+    handleEditorWillMount: (monaco: Monaco) => void;
+    /**
+     * Handle changes to the editor's contents.
+     * @param newValue New value of editor content.
+     * @param e
+     */
+    onChange: (newValue: string | undefined, e: any) => void;
+    handleEditorValidation: (markers: editor.IMarker[]) => void;
+    /**
+     * Render the component into the view.
+     * @returns
+     */
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export default CodeEditor;

package/dist/components/CodeEditor.js

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import*as React from"react";import Editor from"@monaco-editor/react";export class CodeEditor extends React.Component{constructor(e){super(e),Object.defineProperty(this,"editorDidMount",{enumerable:!0,configurable:!0,writable:!0,value:(e,o)=>{e.focus()}}),Object.defineProperty(this,"handleEditorWillMount",{enumerable:!0,configurable:!0,writable:!0,value:e=>{}}),Object.defineProperty(this,"onChange",{enumerable:!0,configurable:!0,writable:!0,value:(e,o)=>{void 0!==this.props.onCodeChanged&&null!==this.props.onCodeChanged&&this.props.onCodeChanged(e)}}),Object.defineProperty(this,"handleEditorValidation",{enumerable:!0,configurable:!0,writable:!0,value:e=>{e.forEach((e=>{}))}})}render(){const e={selectOnLineNumbers:!0,roundedSelection:!1,readOnly:this.props.readOnly,cursorStyle:this.props.cursorStyle,automaticLayout:!0,theme:this.props.theme,language:this.props.language,folding:!1};return _jsx(Editor,{value:this.props.code,height:"100%",width:"100%",defaultLanguage:"python",defaultValue:"",onChange:this.onChange,onMount:this.editorDidMount,beforeMount:this.handleEditorWillMount,onValidate:this.handleEditorValidation,theme:"vs-dark",options:e})}}Object.defineProperty(CodeEditor,"defaultProps",{enumerable:!0,configurable:!0,writable:!0,value:{code:void 0,language:"python",theme:"vs-dark",readOnly:!1,cursorStyle:"line",onCodeChanged:void 0}});export default CodeEditor;

package/dist/components/Indicator.d.ts

@@ -1,8 +1,19 @@
 import React, { Component } from 'react';
 import { EventEmitterContextType } from '../core/EventEmitterContext';
-import { IndicatorColor } from "./IndicatorColor";
+import { IndicatorColor } from "../core/IndicatorColor";
 export { IndicatorColor };
 interface IndicatorProps {
+    /**
+     * Label of the group/row. Can be any element.
+     *
+     * ## Examples
+     * ```
+     * <Indicator label="Simple Text" />
+     * <Indicator label={<span><i className="pi pi-check"></i> Icon and Text</span>} />
+     * <Indicator label={<YourCustomIconComponent />} />
+     * ```
+     */
+    label?: React.ReactNode;
     /**
      * State to be displayed<br/>
      *
@@ -13,23 +24,6 @@ interface IndicatorProps {
      * * `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
      */
@@ -46,12 +40,6 @@ interface IndicatorProps {
      * 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.
      */
@@ -65,12 +53,9 @@ export declare class Indicator extends Component<IndicatorProps, IndicatorState>
     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: IndicatorProps);
     componentDidMount(): void;

package/dist/components/Indicator.js

@@ -1 +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"./IndicatorColor";export{IndicatorColor};export class Indicator 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:d}=this.context,{subscribedValue:b}=this.state;let p=o||10;p<10&&(p=10);let h=i||10;h<10&&(h=10);let f,m=a||1;switch(0===m&&(m=1),b){case!0:f=r;break;case!1:f=n;break;default:f=l}const x={position:c?"absolute":"relative",display:c?"":"inline-block",verticalAlign:"middle",top:c&&t?`${d+m*t}px`:void 0,left:c&&e?`${u+m*e}px`:void 0,width:p?p*m+"px":void 0,height:h?h*m+"px":void 0,lineHeight:h?h*m+"px":void 0,backgroundColor:f,borderRadius:"20px"};return _jsx("div",{className:clsx(s),style:x})}}Object.defineProperty(Indicator,"contextType",{enumerable:!0,configurable:!0,writable:!0,value:EventEmitterContext}),Object.defineProperty(Indicator,"defaultProps",{enumerable:!0,configurable:!0,writable:!0,value:{width:22,height:22,onColor:"green",offColor:"gray",invalidColor:"yellow",useAbsolutePositioning:!1}});export default Indicator;
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{Component}from"react";import{EventEmitterContext}from"../core/EventEmitterContext";import{IndicatorColor}from"../core/IndicatorColor";export{IndicatorColor};export class Indicator 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{label:e,value:t,onColor:o,offColor:r,invalidColor:s}=this.props,{subscribedValue:i}=this.state;let n,a=i;switch(void 0!==t&&(a=t),a){case!0:n=o;break;case!1:n=r;break;default:n=s}return _jsxs("div",{className:"p-inputgroup flex-1",style:{alignItems:"center !important"},children:[_jsx("span",{className:"p-inputgroup-addon",style:{backgroundColor:n,width:"22px"},children:" "}),_jsx("span",{className:"p-inputgroup-addon",children:e})]})}}Object.defineProperty(Indicator,"contextType",{enumerable:!0,configurable:!0,writable:!0,value:EventEmitterContext}),Object.defineProperty(Indicator,"defaultProps",{enumerable:!0,configurable:!0,writable:!0,value:{onColor:"green",offColor:"gray",invalidColor:"black"}});export default Indicator;

package/dist/components/IndicatorButton.d.ts

@@ -1,28 +1,51 @@
 import { Component } from 'react';
 import { ButtonProps } from 'primereact/button';
 import { EventEmitterContextType } from '../core/EventEmitterContext';
-import { IndicatorColor } from "./IndicatorColor";
+import { IndicatorColor } from "../core/IndicatorColor";
 export { IndicatorColor };
+import { ActionMode } from '../core/ActionMode';
+export { ActionMode };
+import { IndicatorButtonState } from '../core/IndicatorButtonState';
+export declare type IndicatorButtonOptionsType = string[] | undefined[] | undefined;
 /**
- * Enum for different input modes of the IndicatorButton.
- */
-export declare enum ActionMode {
-    Tap = "Tap",
-    Toggle = "Toggle",
-    Pressed = "Pressed",
-    Released = "Released"
-}
-/**
- * Properties for the IndicatorButton.
+ * Common properties for an indicating button, toggle or similar component.
+ * These types of components both indicate a state and execute commands/signals.
+ * This type of component is very common in industrial HMIs.
+ *
+ * These properties support displaying values of boolean, number and string states.
+ *
+ * Available boolean states: **on**, **off** and **not available**:
+ *
+ * * `true` is treated as **on**
+ * * `false` is treated as **off**
+ * * `undefined` is treated as **not available**
+ *
+ * Numeric values can be used. When there is only 2 or less possible states,
+ * 0 will be considered false (OFF), anything else will be considered true (ON).
+ * Undefined will be treated as "not available.""
+ *
+ * When the indicator contains more than 2 states, then the number will be matched
+ * to the available state, in order. More than two states requires usage of the
+ * options field, and declaring more than two states there.
+ *
+ * If a string state is used, it will be matched exactly to the matching
+ * label in the `options` field.
+ *
  *
  * For more information on the AutoCore Button API Specification, see
  * [Additional Documentation](../additional-docs/ButtonApiSpecs.md).
  */
-export interface IndicatorButtonProps extends ButtonProps {
+export interface IndicatorButtonProps extends Omit<ButtonProps, 'value'> {
     /**
      * Topic name to monitor for state indication.
+     * If `value` field is not undefined, then that value is used instead.
      */
     topic?: string;
+    /**
+     * State to be displayed.
+     *
+     */
+    value?: boolean | number | string;
     /**
      * Color for the button when the state is TRUE.
      */
@@ -32,13 +55,30 @@ export interface IndicatorButtonProps extends ButtonProps {
      */
     offColor?: IndicatorColor;
     /**
-     * Text displayed when the state is TRUE. Falls back to `label` if undefined.
+     * An array of string labels to display as the available options.
+     *
+     * For items with 2 states or less:
+     * Index 0 is the label when value is OFF.
+     * Index 1 is the label when value is ON.
+     *
+     * If only only value is given (Index 0), then that value is used for all states.
+     * For many controls, this is the same as setting the `label` field and leaving this
+     * field undefined.
+     */
+    options?: IndicatorButtonOptionsType;
+    /**
+     * Icon to be displayed on the button. Overrideen by onIcon or offIcon if those
+     * are not undefined.
      */
-    onLabel?: string;
+    icon?: string;
     /**
-     * Text displayed when the state is FALSE. Falls back to `label` if undefined.
+     * Icon displayed when the state is TRUE. Falls back to `icon` if undefined.
      */
-    offLabel?: string;
+    onIcon?: string;
+    /**
+     * Icon displayed when the state is FALSE. Falls back to `icon` if undefined.
+     */
+    offIcon?: string;
     /**
      * Name of the command to invoke on button events.
      * If command is "*", then the commandTopic will be dispatched
@@ -72,27 +112,6 @@ export interface IndicatorButtonProps extends ButtonProps {
      */
     invert?: boolean;
 }
-/**
- * State for the IndicatorButton.
- */
-export interface IndicatorButtonState {
-    /**
-     * Current value/state of the button based on the subscribed topic.
-     */
-    currentValue?: boolean;
-    /**
-     * 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;
-}
 export declare class IndicatorButton extends Component<IndicatorButtonProps, IndicatorButtonState> {
     static contextType: import("react").Context<EventEmitterContextType>;
     static defaultProps: {

package/dist/components/IndicatorButton.js

@@ -1 +1 @@
-import{jsx as _jsx}from"react/jsx-runtime";import{Component}from"react";import{Button}from"primereact/button";import{EventEmitterContext}from"../core/EventEmitterContext";import{IndicatorColor}from"./IndicatorColor";export{IndicatorColor};export var ActionMode;!function(e){e.Tap="Tap",e.Toggle="Toggle",e.Pressed="Pressed",e.Released="Released"}(ActionMode||(ActionMode={}));export class IndicatorButton 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:i}=this.context;e&&i(e,this.handleTopicUpdate),t&&i(t,this.handleDisableTopicUpdate),o&&i(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:i}=this.props,{dispatch:s}=this.context;if(null!=t&&t.length>0){s({topic:t,payload:{topic:o,value:e,...i}})}}render(){const{currentValue:e,isDisabled:t,isInvisible:o}=this.state,{className:i,severity:s,label:n,raised:a,onColor:r,offColor:d,onLabel:l,offLabel:c,topic:p,command:h,commandArgs:u,disableTopic:b,invisibleTopic:m,inputMode:f,invert:v,...T}=this.props;let C=e?l:c;null!=C&&0!==C.length||(C=n);let I=e?r:d;return void 0===e&&(I=IndicatorColor.IndicatorInvalid),_jsx(Button,{...T,label:C,className:i,style:{color:"white",backgroundColor:I,display:o?"none":"block"},disabled:t,onMouseDown:()=>this.handleOnPressed(),onTouchStart:()=>this.handleOnPressed(),onMouseUp:()=>this.handleOnReleased(),onTouchEnd:()=>this.handleOnReleased(),raised:!0})}}Object.defineProperty(IndicatorButton,"contextType",{enumerable:!0,configurable:!0,writable:!0,value:EventEmitterContext}),Object.defineProperty(IndicatorButton,"defaultProps",{enumerable:!0,configurable:!0,writable:!0,value:{onColor:IndicatorColor.IndicatorGreen,offColor:"gray"}});export default IndicatorButton;
+import{jsx as _jsx}from"react/jsx-runtime";import{Component}from"react";import{Button}from"primereact/button";import{EventEmitterContext}from"../core/EventEmitterContext";import{IndicatorColor}from"../core/IndicatorColor";export{IndicatorColor};import{ActionMode}from"../core/ActionMode";export{ActionMode};export class IndicatorButton 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:i}=this.context;e&&i(e,this.handleTopicUpdate),t&&i(t,this.handleDisableTopicUpdate),o&&i(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:i}=this.props,{dispatch:n}=this.context;if(null!=t&&t.length>0){n({topic:t,payload:{topic:o,value:e,...i}})}}render(){const{currentValue:e,isDisabled:t,isInvisible:o}=this.state,{className:i,severity:n,label:s,raised:a,value:r,onColor:l,offColor:d,options:c,topic:p,command:u,commandArgs:h,disableTopic:m,invisibleTopic:b,inputMode:f,invert:v,onIcon:C,offIcon:I,icon:T,...x}=this.props;let P,M=e;void 0!==r&&(M=r),null!=c?(P=M?c[1]:c[0],null!=P&&0!==P.length||(P=s)):P=s;let g=M?C:I;null!=g&&0!==g.length||(g=T);let y=M?l:d;return void 0===M&&(y=IndicatorColor.IndicatorInvalid),_jsx(Button,{...x,label:P,icon:`pi ${g}`,className:i,style:{color:"white",backgroundColor:y,display:o?"none":"block"},disabled:t,onMouseDown:()=>this.handleOnPressed(),onTouchStart:()=>this.handleOnPressed(),onMouseUp:()=>this.handleOnReleased(),onTouchEnd:()=>this.handleOnReleased(),value:m,raised:!0})}}Object.defineProperty(IndicatorButton,"contextType",{enumerable:!0,configurable:!0,writable:!0,value:EventEmitterContext}),Object.defineProperty(IndicatorButton,"defaultProps",{enumerable:!0,configurable:!0,writable:!0,value:{onColor:IndicatorColor.IndicatorGreen,offColor:"gray"}});export default IndicatorButton;

package/dist/components/JogPanel.css

@@ -0,0 +1,41 @@
+/*
+ * Copyright (C) 2024 Automated Design Corp. All Rights Reserved.
+ * Created Date: 2024-01-16 13:17:33
+ * -----
+ * Last Modified: 2024-03-19 10:37:26
+ * -----
+ * 
+ */
+
+ .jogpanel-container {
+    margin: 2mm;
+    display: flex; 
+    flex-direction: column; /* Stack children vertically */
+    align-items: center; /* Center children horizontally within the container */    
+ }
+
+.grid-container {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;  /* Adjust the gap between rows */
+    
+}
+
+.grid-row {
+    display: flex;
+    justify-content: space-between;
+    gap: 10px;  /* Adjust the gap between buttons */    
+}
+
+.button-item {
+    flex: 1; /* Make buttons expand to fill the row */    
+}
+
+.distance-selector {
+    margin-top: 2mm; /* Gap between buttons and distance selector */
+    margin-left: auto;
+    margin-right: auto;    
+    width: -moz-fit-content;
+    width: fit-content;
+}
+