@adcops/autocore-react 3.0.0

package/dist/components/IndicatorButton.d.ts

@@ -0,0 +1,137 @@
+import { Component } from 'react';
+import { ButtonProps } from 'primereact/button';
+import { EventEmitterContextType } from '../core/EventEmitterContext';
+import { IndicatorColor } from "./IndicatorColor";
+export { IndicatorColor };
+/**
+ * Enum for different input modes of the IndicatorButton.
+ */
+export declare enum ActionMode {
+    Tap = "Tap",
+    Toggle = "Toggle",
+    Pressed = "Pressed",
+    Released = "Released"
+}
+/**
+ * Properties for the IndicatorButton.
+ *
+ * For more information on the AutoCore Button API Specification, see
+ * [Additional Documentation](../additional-docs/ButtonApiSpecs.md).
+ */
+export interface IndicatorButtonProps extends ButtonProps {
+    /**
+     * Topic name to monitor for state indication.
+     */
+    topic?: string;
+    /**
+     * Color for the button when the state is TRUE.
+     */
+    onColor?: IndicatorColor;
+    /**
+     * Color for the button when the state is FALSE.
+     */
+    offColor?: IndicatorColor;
+    /**
+     * Text displayed when the state is TRUE. Falls back to `label` if undefined.
+     */
+    onLabel?: string;
+    /**
+     * Text displayed when the state is FALSE. Falls back to `label` if undefined.
+     */
+    offLabel?: string;
+    /**
+     * 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;
+}
+/**
+ * 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: {
+        onColor: IndicatorColor;
+        offColor: string;
+    };
+    constructor(props: IndicatorButtonProps);
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: IndicatorButtonProps): 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;
+}
+export default IndicatorButton;

package/dist/components/IndicatorButton.js

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

package/dist/components/IndicatorColor.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Standardized indicator colors and their meanings. It's probably
+ * best to use their meaning and not the actual color name.
+ */
+export declare enum IndicatorColor {
+    /** Green: On, Ok, Ready, Home, General Use */
+    IndicatorGreen = "green",
+    /** Alias for the ON condition to make meaning clear. Preferred for ON case. */
+    IndicatorOn = "green",
+    /** Off. ONLY USE THIS FOR OFF. */
+    IndicatorOff = "gray",
+    /** Red: Error, Fault, Stop, Stopped. Use sparingly. */
+    IndicatorRed = "red",
+    /** Orange: Warning, Out of position, moving, out of range. */
+    IndicatorOrange = "orange",
+    /** Alias for Red to make meaning clear. Preferred. */
+    IndicatorError = "red",
+    /** Alias for Orange to make meaning clear. Preferred. */
+    IndicatorWarning = "orange",
+    /** Invalid. If an indicator is black, the interface does not know the current value. */
+    IndicatorInvalid = "black",
+    /** Use for navigation buttons. No other meaning allowed. */
+    IndicatorNavigation = "cyan",
+    /** Use for informational buttons. No other meaning allowed. */
+    IndicatorInfo = "blue"
+}

package/dist/components/IndicatorColor.js

@@ -0,0 +1 @@
+export var IndicatorColor;!function(r){r.IndicatorGreen="green",r.IndicatorOn="green",r.IndicatorOff="gray",r.IndicatorRed="red",r.IndicatorOrange="orange",r.IndicatorError="red",r.IndicatorWarning="orange",r.IndicatorInvalid="black",r.IndicatorNavigation="cyan",r.IndicatorInfo="blue"}(IndicatorColor||(IndicatorColor={}));

package/dist/components/Osk.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import "./osk.css";
+interface OskProps {
+    onAccept?: () => void;
+    onChange?: (value: string) => void;
+    isNumPad?: boolean;
+    input?: string;
+    label?: string;
+    inputPattern?: RegExp;
+    checkValue?: (value: string) => string;
+    description?: string;
+}
+export declare const Osk: React.FC<OskProps>;
+export default Osk;

package/dist/components/Osk.js

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

package/dist/components/OskDialog.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+interface OskDialogProps {
+    isVisible: boolean;
+    onAccept?: (value: string) => void;
+    onReject?: () => void;
+    onChange?: (value: string) => void;
+    isNumPad?: boolean;
+    maxWidth?: number;
+    input?: string;
+    label?: string;
+    description?: string;
+    inputPattern?: RegExp;
+    textMode?: boolean;
+    minValue?: number;
+    maxValue?: number;
+    minLength?: number;
+}
+interface OskDialogState {
+    input: string;
+    errorMessage: string;
+}
+export declare class OskDialog extends React.Component<OskDialogProps, OskDialogState> {
+    private container;
+    constructor(props: OskDialogProps);
+    componentWillUnmount(): void;
+    checkValue: (value: string) => string;
+    onAccepted: () => void;
+    onChanged: (val: string) => void;
+    closeDialog: () => void;
+    show: () => void;
+    render(): null;
+}
+export default OskDialog;

package/dist/components/OskDialog.js

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

package/dist/components/ValueDisplay.d.ts

@@ -0,0 +1,99 @@
+import { Component } from 'react';
+import { EventEmitterContextType } from '../core/EventEmitterContext';
+import type { NumerableFormatOptions } from '../core/NumerableTypes';
+/**
+ * Properties of the ValueDisplay component.
+ */
+interface Props {
+    /**
+     * Value to be displayed
+     */
+    value?: string | number | null | 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;
+    /**
+     * 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;
+    /**
+     * 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;
+}
+/**
+ * State of the ValueDisplay component.
+ */
+interface State {
+    subscribedValue?: string | number | null;
+    fontSize?: string;
+}
+/**
+ * `ValueDisplay` is a React component that subscribes to a value from an `EventEmitterContext` and renders it.
+ * This component adjusts its display based on the provided properties, including positioning and styling adjustments
+ * based on its context. It is designed to work within a system that provides dynamic updates to values via an event emitter.
+ */
+declare class ValueDisplay extends Component<Props, State> {
+    /** Defines the context type to subscribe to changes using EventEmitter. */
+    static contextType: import("react").Context<EventEmitterContextType>;
+    /** ID for the subscription to the topic, used to unsubscribe on component unmount. */
+    protected unsubscribeTopicId: number | null;
+    /**
+     * The constructor initializes the component state and binds the initial value.
+     * @param props The properties passed to the component, including initial value and other display options.
+     */
+    constructor(props: Props);
+    /**
+     * Upon mounting, the component subscribes to updates on the specified topic if it exists,
+     * updating its state with the new value when the topic publishes updates.
+     */
+    componentDidMount(): void;
+    /**
+     * If the value prop changes, the component updates its state with the new value.
+     * This ensures that the component remains in sync with its props.
+     * @param prevProps The previous properties for comparison to detect changes.
+     */
+    componentDidUpdate(prevProps: Props): void;
+    /**
+     * Before the component is unmounted, it unsubscribes from the topic to prevent memory leaks
+     * and unnecessary updates from occurring.
+     */
+    componentWillUnmount(): void;
+    /**
+     * Renders the component with styling and formatting based on the provided properties and state.
+     * Supports absolute or relative positioning and scales the display based on the context's dimensions.
+     * @returns A styled `div` element displaying the formatted value.
+     */
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export { ValueDisplay, NumerableFormatOptions };

package/dist/components/ValueDisplay.js

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import{Component}from"react";import{format as numerableFormat}from"numerable";import clsx from"clsx";import{EventEmitterContext}from"../core/EventEmitterContext";class ValueDisplay 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){const{subscribe:t}=this.context;this.unsubscribeTopicId=t(e,(e=>{this.setState({subscribedValue:e})}))}}componentDidUpdate(e){this.props.value!==e.value&&this.setState({subscribedValue:this.props.value})}componentWillUnmount(){if(this.unsubscribeTopicId){const{unsubscribe:e}=this.context;e(this.unsubscribeTopicId)}}render(){const{x:e,y:t,width:i,height:s,format:o,formatOptions:r,className:n,useAbsolutePositioning:a}=this.props,{subscribedValue:l,fontSize:c}=this.state,{scale:u,xOffset:p,yOffset:b}=this.context,m={position:a?"absolute":"relative",display:a?"":"inline-block",verticalAlign:"middle",fontSize:c&&u>1?100*u+"%":c,top:a&&t?`${b+u*t}px`:void 0,left:a&&e?`${p+u*e}px`:void 0,width:i?i*u+"px":void 0,height:s?s*u+"px":void 0,lineHeight:s?s*u+"px":void 0,whiteSpace:"nowrap"};return _jsx("div",{className:clsx(n),style:m,children:numerableFormat(l,o,r)})}}Object.defineProperty(ValueDisplay,"contextType",{enumerable:!0,configurable:!0,writable:!0,value:EventEmitterContext});export{ValueDisplay};

package/dist/components/osk.css

@@ -0,0 +1,123 @@
+/*
+ * Customized by Thomas C. Bitsky Jr. Automated Design Corporation.
+ *
+ * Original file:
+ *
+ *   simple-keyboard v2.32.100
+ *   https://github.com/hodgef/simple-keyboard
+ * 
+ *   Copyright (c) Francisco Hodge (https://github.com/hodgef)
+ */
+
+.hg-theme-default {
+    width: 100%;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    box-sizing: border-box;
+    overflow: hidden;
+    touch-action: manipulation
+}
+
+.hg-theme-default .hg-button span {
+    pointer-events: none
+}
+
+.hg-theme-default button.hg-button {
+    border-width: 0;
+    outline: 0;
+    font-size: inherit
+}
+
+.hg-theme-default {
+    background-color: #ececec;
+    padding: 5px;
+    border-radius: 5px
+}
+
+.hg-theme-default .hg-button {
+    display: inline-block;
+    flex-grow: 1
+}
+
+.hg-theme-default .hg-row {
+    display: flex
+}
+
+.hg-theme-default .hg-row:not(:last-child) {
+    margin-bottom: 5px
+}
+
+.hg-theme-default .hg-row .hg-button-container,
+.hg-theme-default .hg-row .hg-button:not(:last-child) {
+    margin-right: 5px
+}
+
+.hg-theme-default .hg-row>div:last-child {
+    margin-right: 0
+}
+
+.hg-theme-default .hg-row .hg-button-container {
+    display: flex
+}
+
+.hg-theme-default .hg-button {
+    /* box-shadow: 0 0 3px -1px rgba(0, 0, 0, .3); */  /* use the shadow for an ios look */
+    font-weight: 600;
+    font-size: large;
+    height: 40px;
+    border-radius: 3px;  /* set to 5 for ios look, 3 for microsoft look */
+    box-sizing: border-box;
+    padding: 5px;
+    color: white; /* color of the button text */
+    background: #444444;    /* background of the button text */
+    border: 1px solid black;
+    cursor:pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
+}
+
+.hg-theme-default .hg-button.hg-activeButton {
+background: #efefef
+}
+
+.hg-theme-default.hg-layout-numeric .hg-button {
+width: 33.3%;
+height: 60px;
+align-items: center;
+display: flex;
+justify-content: center
+}
+
+.hg-theme-default .hg-button.hg-button-numpadadd,
+.hg-theme-default .hg-button.hg-button-numpadenter {
+height: 85px
+}
+
+.hg-theme-default .hg-button.hg-button-numpad0 {
+width: 105px
+}
+
+.hg-theme-default .hg-button.hg-button-com {
+max-width: 85px
+}
+
+.hg-theme-default .hg-button.hg-standardBtn.hg-button-at {
+max-width: 45px
+}
+
+.hg-theme-default .hg-button.hg-selectedButton {
+background: rgba(5, 25, 70, .53);
+color: #fff
+}
+
+.hg-theme-default .hg-button.hg-standardBtn[data-skbtn=".com"] {
+max-width: 82px
+}
+
+.hg-theme-default .hg-button.hg-standardBtn[data-skbtn="@"] {
+max-width: 60px
+}