@singularsystems/neo-react 0.10.32 → 0.10.35

package/dist/Modules/NeoReactModule.js

@@ -22,4 +22,3 @@ var neoReactModule = new AppServices.Module("neo-react", function (container) {
     runReactSetup(container);
 });
 export default neoReactModule;
-//# sourceMappingURL=NeoReactModule.js.map

package/dist/Modules/ReactSetup.js

@@ -26,4 +26,3 @@ export function runReactSetup(container) {
         container.get(AppServices.NeoTypes.Routing.PageLeaveHandler).onWindowUnload(ViewBase.currentView, e);
     });
 }
-//# sourceMappingURL=ReactSetup.js.map

package/dist/Modules/Types.js

@@ -10,4 +10,3 @@ var NeoReactTypes = __assign(__assign({}, AppServices.NeoTypes), { Components: {
         DisposeHelper: new AppServices.ServiceIdentifier("NeoReact.DisposeHelper")
     } });
 export { NeoReactTypes };
-//# sourceMappingURL=Types.js.map

package/dist/React/AutoRunner.js

@@ -74,4 +74,3 @@ var AutoRunner = /** @class */ (function () {
     };
     return AutoRunner;
 }());
-//# sourceMappingURL=AutoRunner.js.map

package/dist/React/DataView.js

@@ -11,4 +11,3 @@ var DataViewContextParams = /** @class */ (function () {
 }());
 export { DataViewContextParams };
 export var DataViewContext = React.createContext(new DataViewContextParams());
-//# sourceMappingURL=DataView.js.map

package/dist/React/Decorators.js

@@ -13,4 +13,3 @@ export function observableList(type, propertyKey) {
         }
     };
 }
-//# sourceMappingURL=Decorators.js.map

package/dist/React/ReactModelCreator.js

@@ -89,7 +89,6 @@ var ReactModelCreator = /** @class */ (function (_super) {
                         if (typeof onChange.newValue === "string") {
                             throw "Error: tried to assign a string to a date property.";
                         }
-                        propertyInstance.sortValue = onChange.newValue ? onChange.newValue.getTime() : 0;
                     }
                 }
                 observable.previousValue = observable.value;
@@ -122,4 +121,3 @@ var ReactModelCreator = /** @class */ (function (_super) {
     return ReactModelCreator;
 }(ModelCreatorBase));
 export { ReactModelCreator };
-//# sourceMappingURL=ReactModelCreator.js.map

package/dist/React/Utils.js

@@ -13,4 +13,3 @@ export function createObservableList(target, propertyKey, list) {
         throw "observableList can only be defined on arrays.";
     }
 }
-//# sourceMappingURL=Utils.js.map

package/dist/ReactComponents/Button.js

@@ -122,4 +122,3 @@ var Button = /** @class */ (function (_super) {
     return Button;
 }(ComponentBase));
 export default Button;
-//# sourceMappingURL=Button.js.map

package/dist/ReactComponents/Card.js

@@ -52,4 +52,3 @@ var Card = /** @class */ (function (_super) {
     return Card;
 }(React.Component));
 export default Card;
-//# sourceMappingURL=Card.js.map

package/dist/ReactComponents/Collapsable.js

@@ -36,4 +36,3 @@ var Collapsable = /** @class */ (function (_super) {
     return Collapsable;
 }(ComponentBase));
 export default Collapsable;
-//# sourceMappingURL=Collapsable.js.map

package/dist/ReactComponents/CollapsableBase.js

@@ -40,4 +40,3 @@ var CollapsableBase = /** @class */ (function (_super) {
     return CollapsableBase;
 }(ComponentBase));
 export default CollapsableBase;
-//# sourceMappingURL=CollapsableBase.js.map

package/dist/ReactComponents/ColorPicker.js

@@ -65,4 +65,3 @@ var ColorPicker = /** @class */ (function (_super) {
     return ColorPicker;
 }(React.Component));
 export default ColorPicker;
-//# sourceMappingURL=ColorPicker.js.map

package/dist/ReactComponents/ComponentBase.js

@@ -31,4 +31,3 @@ var ComponentBase = /** @class */ (function (_super) {
     return ComponentBase;
 }(React.Component));
 export default ComponentBase;
-//# sourceMappingURL=ComponentBase.js.map

package/dist/ReactComponents/ContextMenu/ContextMenu.js

@@ -86,4 +86,3 @@ var ContextMenu = /** @class */ (function (_super) {
     return ContextMenu;
 }(ComponentBase));
 export default ContextMenu;
-//# sourceMappingURL=ContextMenu.js.map

package/dist/ReactComponents/ContextMenu/ContextMenuContainer.js

@@ -46,4 +46,3 @@ var ContextMenuContainer = /** @class */ (function (_super) {
     return ContextMenuContainer;
 }(React.Component));
 export default ContextMenuContainer;
-//# sourceMappingURL=ContextMenuContainer.js.map

package/dist/ReactComponents/ContextMenu/ContextMenuState.js

@@ -21,4 +21,3 @@ var ContextMenuState = /** @class */ (function () {
     return ContextMenuState;
 }());
 export { ContextMenuState };
-//# sourceMappingURL=ContextMenuState.js.map

package/dist/ReactComponents/DatePicker.js

@@ -51,4 +51,3 @@ var DatePicker = /** @class */ (function (_super) {
     return DatePicker;
 }(ComponentBase));
 export default DatePicker;
-//# sourceMappingURL=DatePicker.js.map

package/dist/ReactComponents/DropDown/AutoCompleteDropDown.js

@@ -173,4 +173,3 @@ var AutoCompleteDropDown = /** @class */ (function (_super) {
     return AutoCompleteDropDown;
 }(DropDownBase));
 export default AutoCompleteDropDown;
-//# sourceMappingURL=AutoCompleteDropDown.js.map

package/dist/ReactComponents/DropDown/DropDown.js

@@ -131,4 +131,3 @@ var DropDown = /** @class */ (function (_super) {
     return DropDown;
 }(DropDownBase));
 export default DropDown;
-//# sourceMappingURL=DropDown.js.map

package/dist/ReactComponents/DropDown/DropDownBase.js

@@ -102,4 +102,3 @@ var DropDownBase = /** @class */ (function (_super) {
     return DropDownBase;
 }(ComponentBase));
 export { DropDownBase };
-//# sourceMappingURL=DropDownBase.js.map

package/dist/ReactComponents/ErrorHandler.js

@@ -89,4 +89,3 @@ var ErrorHandler = /** @class */ (function (_super) {
     return ErrorHandler;
 }(Components.ErrorHandler));
 export { ErrorHandler };
-//# sourceMappingURL=ErrorHandler.js.map

package/dist/ReactComponents/FileManager/FileBasicInput.js

@@ -47,4 +47,3 @@ var FileBasicInput = /** @class */ (function (_super) {
     return FileBasicInput;
 }(React.Component));
 export default FileBasicInput;
-//# sourceMappingURL=FileBasicInput.js.map

package/dist/ReactComponents/FileManager/FileContext.js

@@ -22,4 +22,3 @@ var FileContextProvider = /** @class */ (function (_super) {
     return FileContextProvider;
 }(React.Component));
 export default FileContextProvider;
-//# sourceMappingURL=FileContext.js.map

package/dist/ReactComponents/FileManager/FileDropArea.js

@@ -62,4 +62,3 @@ var FileDropArea = /** @class */ (function (_super) {
     return FileDropArea;
 }(React.Component));
 export default FileDropArea;
-//# sourceMappingURL=FileDropArea.js.map

package/dist/ReactComponents/FileManager/FileInput.js

@@ -187,4 +187,3 @@ var FileInput = /** @class */ (function (_super) {
     return FileInput;
 }(ComponentBase));
 export default FileInput;
-//# sourceMappingURL=FileInput.js.map

package/dist/ReactComponents/FileManager/FileUploadButton.js

@@ -44,4 +44,3 @@ var FileUploadButton = /** @class */ (function (_super) {
     return FileUploadButton;
 }(React.Component));
 export default FileUploadButton;
-//# sourceMappingURL=FileUploadButton.js.map

package/dist/ReactComponents/FileManager/FileUploadProgress.js

@@ -33,4 +33,3 @@ var FileUploadProgress = /** @class */ (function (_super) {
     return FileUploadProgress;
 }(React.Component));
 export default FileUploadProgress;
-//# sourceMappingURL=FileUploadProgress.js.map

package/dist/ReactComponents/Form.js

@@ -88,4 +88,3 @@ var Form = /** @class */ (function (_super) {
     return Form;
 }(React.Component));
 export default Form;
-//# sourceMappingURL=Form.js.map

package/dist/ReactComponents/FormContext.js

@@ -38,4 +38,3 @@ var FormContextProvider = /** @class */ (function (_super) {
     return FormContextProvider;
 }(React.Component));
 export { FormContextProvider };
-//# sourceMappingURL=FormContext.js.map

package/dist/ReactComponents/FormGroup/FormGroup.js

@@ -82,4 +82,3 @@ var FormGroup = /** @class */ (function (_super) {
     return FormGroup;
 }(FormGroupBase));
 export default FormGroup;
-//# sourceMappingURL=FormGroup.js.map

package/dist/ReactComponents/FormGroup/FormGroupFloating.js

@@ -95,4 +95,3 @@ var FloatingFormGroup = /** @class */ (function (_super) {
     return FloatingFormGroup;
 }(ComponentBase));
 export default FloatingFormGroup;
-//# sourceMappingURL=FormGroupFloating.js.map

package/dist/ReactComponents/FormGroup/FormGroupInline.js

@@ -41,4 +41,3 @@ var FormGroupInline = /** @class */ (function (_super) {
     return FormGroupInline;
 }(FormGroupBase));
 export default FormGroupInline;
-//# sourceMappingURL=FormGroupInline.js.map

package/dist/ReactComponents/Grid/ButtonColumn.js

@@ -59,4 +59,3 @@ var ButtonColumn = /** @class */ (function (_super) {
     return ButtonColumn;
 }(ComponentBase));
 export { ButtonColumn };
-//# sourceMappingURL=ButtonColumn.js.map

package/dist/ReactComponents/Grid/Column.js

@@ -204,4 +204,3 @@ var Column = /** @class */ (function (_super) {
     return Column;
 }(ComponentBase));
 export default Column;
-//# sourceMappingURL=Column.js.map

package/dist/ReactComponents/Grid/ColumnHelper.js

@@ -17,4 +17,3 @@ var ColumnHelper = /** @class */ (function () {
     return ColumnHelper;
 }());
 export { ColumnHelper };
-//# sourceMappingURL=ColumnHelper.js.map

package/dist/ReactComponents/Grid/Grid.d.ts

@@ -65,6 +65,8 @@ export interface IGridProps<T> extends React.HTMLProps<HTMLTableElement> {
     showHover?: boolean;
     /** When specified, the table size will be reduced (by reducing the padding sizes in each cell by half). */
     isSmallTable?: boolean;
+    /** Additional footer row(s) to display below the main footer row. */
+    footerContent?: (data: T[]) => React.ReactNode;
 }
 export default class Grid<T> extends React.Component<IGridProps<T>> {
     static contextType: React.Context<import("../../React/DataView").DataViewContextParams<unknown>>;

package/dist/ReactComponents/Grid/Grid.js

@@ -32,7 +32,7 @@ var Grid = /** @class */ (function (_super) {
     }
     Grid.prototype.render = function () {
         var _this = this;
-        var _a = this.props, items = _a.items, showAddButton = _a.showAddButton, addButton = _a.addButton, filterPredicate = _a.filterPredicate, keyProperty = _a.keyProperty, allowSort = _a.allowSort, expandAll = _a.expandAll, collapseAll = _a.collapseAll, initialSort = _a.initialSort, initialSortAscending = _a.initialSortAscending, isBordered = _a.isBordered, isStriped = _a.isStriped, isBorderless = _a.isBorderless, showHover = _a.showHover, isSmallTable = _a.isSmallTable, domProps = __rest(_a, ["items", "showAddButton", "addButton", "filterPredicate", "keyProperty", "allowSort", "expandAll", "collapseAll", "initialSort", "initialSortAscending", "isBordered", "isStriped", "isBorderless", "showHover", "isSmallTable"]);
+        var _a = this.props, items = _a.items, showAddButton = _a.showAddButton, addButton = _a.addButton, filterPredicate = _a.filterPredicate, keyProperty = _a.keyProperty, allowSort = _a.allowSort, expandAll = _a.expandAll, collapseAll = _a.collapseAll, initialSort = _a.initialSort, initialSortAscending = _a.initialSortAscending, isBordered = _a.isBordered, isStriped = _a.isStriped, isBorderless = _a.isBorderless, showHover = _a.showHover, isSmallTable = _a.isSmallTable, footerContent = _a.footerContent, domProps = __rest(_a, ["items", "showAddButton", "addButton", "filterPredicate", "keyProperty", "allowSort", "expandAll", "collapseAll", "initialSort", "initialSortAscending", "isBordered", "isStriped", "isBorderless", "showHover", "isSmallTable", "footerContent"]);
         if (expandAll === true) {
             this.gridContext.expandAll = true;
         }
@@ -90,9 +90,10 @@ var Grid = /** @class */ (function (_super) {
             React.createElement(GridContext.Provider, { value: this.gridContext },
                 React.createElement(TableSection, { type: "header" }, this.headerItem && this.props.children(this.headerItem, this.headerItem.meta)),
                 React.createElement(TableSection, { type: "body" }, this.gridContext.dataView.getItems().map(function (item) { return (React.createElement(ItemGroup, { item: item, key: keyProperty ? item[keyProperty] : item.entityIdentifier, template: _this.props.children })); })),
-                React.createElement(Observer, null, function () { return (showAddButton || addButton || _this.gridContext.hasSummaries) &&
+                React.createElement(Observer, null, function () { return (showAddButton || addButton || _this.gridContext.hasSummaries || footerContent) &&
                     React.createElement(TableSection, { type: "footer" },
                         _this.gridContext.hasSummaries && _this.headerItem && _this.props.children(_this.headerItem, _this.headerItem.meta),
+                        footerContent && footerContent(_this.gridContext.dataView.getItems()),
                         (showAddButton || addButton) && React.createElement(AddButtonRow, { addButton: addButton })); }))));
     };
     Grid.prototype.setInitialSort = function (initialSort, initialSortAscending) {
@@ -196,4 +197,3 @@ var ItemGroup = /** @class */ (function (_super) {
     ], ItemGroup);
     return ItemGroup;
 }(React.Component));
-//# sourceMappingURL=Grid.js.map

package/dist/ReactComponents/Grid/Row.js

@@ -199,4 +199,3 @@ var RowGroup = /** @class */ (function (_super) {
     return RowGroup;
 }(React.Component));
 export { RowGroup };
-//# sourceMappingURL=Row.js.map

package/dist/ReactComponents/Grid/_Exports.js

@@ -3,4 +3,3 @@ import Column from './Column';
 import Row, { RowGroup, ChildRow } from './Row';
 import { ButtonColumn } from './ButtonColumn';
 export { Grid, Column, RowGroup, Row, ChildRow, ButtonColumn };
-//# sourceMappingURL=_Exports.js.map

package/dist/ReactComponents/GridLayout.js

@@ -36,4 +36,3 @@ var GridLayout = /** @class */ (function (_super) {
     return GridLayout;
 }(React.Component));
 export default GridLayout;
-//# sourceMappingURL=GridLayout.js.map

package/dist/ReactComponents/Input.js

@@ -150,4 +150,3 @@ var Checkbox = /** @class */ (function (_super) {
     return Checkbox;
 }(Input));
 export { Checkbox };
-//# sourceMappingURL=Input.js.map

package/dist/ReactComponents/InputHelpers.js

@@ -31,4 +31,3 @@ var InputHelpers = /** @class */ (function () {
     return InputHelpers;
 }());
 export { InputHelpers };
-//# sourceMappingURL=InputHelpers.js.map

package/dist/ReactComponents/Link.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+interface ILinkProps extends React.HTMLProps<HTMLAnchorElement> {
+}
+/**
+ * Renders an anchor tag with an href of '/' unless otherwise specified.
+ * The onClick event will call preventDefault() so that the anchor acts like a button instead of a link to a url.
+ */
+export default class Link extends React.Component<ILinkProps> {
+    constructor(props: ILinkProps);
+    private onClick;
+    render(): JSX.Element;
+}
+export {};

package/dist/ReactComponents/Link.js

@@ -0,0 +1,28 @@
+import { __assign, __extends } from "tslib";
+import React from 'react';
+/**
+ * Renders an anchor tag with an href of '/' unless otherwise specified.
+ * The onClick event will call preventDefault() so that the anchor acts like a button instead of a link to a url.
+ */
+var Link = /** @class */ (function (_super) {
+    __extends(Link, _super);
+    function Link(props) {
+        var _this = _super.call(this, props) || this;
+        _this.onClick = _this.onClick.bind(_this);
+        return _this;
+    }
+    Link.prototype.onClick = function (e) {
+        e.preventDefault();
+        if (this.props.onClick) {
+            this.props.onClick(e);
+        }
+    };
+    Link.prototype.render = function () {
+        var _a;
+        var props = this.props;
+        var href = (_a = props.href, (_a !== null && _a !== void 0 ? _a : "/"));
+        return React.createElement("a", __assign({}, props, { href: href, onClick: this.onClick }), this.props.children);
+    };
+    return Link;
+}(React.Component));
+export default Link;

package/dist/ReactComponents/Loader.js

@@ -55,4 +55,3 @@ var Loader = /** @class */ (function (_super) {
     return Loader;
 }(ComponentBase));
 export default Loader;
-//# sourceMappingURL=Loader.js.map

package/dist/ReactComponents/Modal/Modal.js

@@ -121,4 +121,3 @@ var Modal = /** @class */ (function (_super) {
     return Modal;
 }(React.Component));
 export default Modal;
-//# sourceMappingURL=Modal.js.map

package/dist/ReactComponents/Modal/ModalContainer.js

@@ -35,4 +35,3 @@ var ModalContainer = /** @class */ (function (_super) {
     return ModalContainer;
 }(React.Component));
 export default ModalContainer;
-//# sourceMappingURL=ModalContainer.js.map

package/dist/ReactComponents/Modal/ModalPortal.js

@@ -25,4 +25,3 @@ var ModalPortal = /** @class */ (function (_super) {
     return ModalPortal;
 }(React.Component));
 export default ModalPortal;
-//# sourceMappingURL=ModalPortal.js.map

package/dist/ReactComponents/Notifications/Alert.js

@@ -33,4 +33,3 @@ var Alert = /** @class */ (function (_super) {
     return Alert;
 }(CollapsableBase));
 export default Alert;
-//# sourceMappingURL=Alert.js.map

package/dist/ReactComponents/Notifications/Toast.js

@@ -43,4 +43,3 @@ var Toast = /** @class */ (function (_super) {
     return Toast;
 }(CollapsableBase));
 export default Toast;
-//# sourceMappingURL=Toast.js.map

package/dist/ReactComponents/Notifications/ToastContainer.js

@@ -16,4 +16,3 @@ var ToastContainer = /** @class */ (function (_super) {
     return ToastContainer;
 }(React.Component));
 export default ToastContainer;
-//# sourceMappingURL=ToastContainer.js.map

package/dist/ReactComponents/NumberInput.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { IBindableEditorProps } from './PropTypes';
 import { FormContext } from './FormContext';
 import { Misc } from '@singularsystems/neo-core';
+import Decimal from 'decimal.js-light';
 import ComponentBase from './ComponentBase';
 export interface INumberInputSpecificProps {
     /** Format string of number */
@@ -25,7 +26,7 @@ export declare class FormatState {
     zeroText?: string | undefined;
     constructor(isPercent: boolean, hasExternalPercentSymbol: boolean, formatString: string, zeroText?: string | undefined);
     static create(numericType: Misc.DataType, numProps?: INumberInputSpecificProps, appendText?: string): FormatState;
-    getFormattedValue(value?: number): string;
+    getFormattedValue(value?: number | Decimal | null): string;
 }
 export default class NumberInput extends ComponentBase<INumberInputProps> {
     static contextType: React.Context<import("./FormContext").FormContextParams>;
@@ -39,6 +40,7 @@ export default class NumberInput extends ComponentBase<INumberInputProps> {
     constructor(props: INumberInputProps);
     private onChanged;
     private onFocus;
+    private getBindValueAsNumber;
     private setFocusedText;
     private onBlur;
     private onKeyDown;

package/dist/ReactComponents/NumberInput.js

@@ -3,6 +3,7 @@ import * as React from 'react';
 import { BindPropsHelper } from './PropTypes';
 import { FormContext } from './FormContext';
 import { Misc, NumberUtils, Utils } from '@singularsystems/neo-core';
+import Decimal from 'decimal.js-light';
 import { InputHelpers } from './InputHelpers';
 import { observer } from 'mobx-react';
 import memoize from 'memoize-one';
@@ -24,9 +25,10 @@ var FormatState = /** @class */ (function () {
                 formatString = NumberUtils.getFormatString(numProps.format, numProps.currencySymbol);
             }
             else {
+                var hasDecimals = numericType === Misc.DataType.Float || numericType === Misc.DataType.Decimal;
                 var format = ((_a = numProps) === null || _a === void 0 ? void 0 : _a.currencySymbol) ?
-                    (numericType === Misc.DataType.Float ? Misc.NumberFormat.CurrencyDecimals : Misc.NumberFormat.CurrencyNoDecimals) :
-                    (numericType === Misc.DataType.Float ? Misc.NumberFormat.Decimals : Misc.NumberFormat.NoDecimals);
+                    (hasDecimals ? Misc.NumberFormat.CurrencyDecimals : Misc.NumberFormat.CurrencyNoDecimals) :
+                    (hasDecimals ? Misc.NumberFormat.Decimals : Misc.NumberFormat.NoDecimals);
                 formatString = NumberUtils.getFormatString(format, (_b = numProps) === null || _b === void 0 ? void 0 : _b.currencySymbol);
             }
         }
@@ -43,6 +45,9 @@ var FormatState = /** @class */ (function () {
             return this.zeroText;
         }
         if (value !== undefined && value !== null) {
+            if (value instanceof Decimal) {
+                value = value.toNumber();
+            }
             if (typeof value === "number") {
                 if (this.hasExternalPercentSymbol) {
                     value *= 100;
@@ -77,23 +82,35 @@ var NumberInput = /** @class */ (function (_super) {
     }
     NumberInput.prototype.onChanged = function (e) {
         var newValue;
+        if (e.target.value !== "" && isNaN(parseFloat(e.target.value))) {
+            return;
+        }
         if (e.target.value == "") {
-            newValue = this.props.bind.propertyInfo.allowNulls ? null : 0;
+            newValue = this.props.bind.propertyInfo.allowNulls ? null : new Decimal(0);
         }
         else if (this.formatState.isPercent && NumberUtils.transformPercent) {
-            newValue = parseFloat(e.target.value) / 100;
+            newValue = new Decimal(e.target.value).dividedBy(100);
         }
-        else if (this.numericType == Misc.DataType.Float) {
-            newValue = parseFloat(e.target.value);
+        else if (this.numericType === Misc.DataType.Float || this.numericType === Misc.DataType.Decimal) {
+            newValue = new Decimal(e.target.value);
         }
         else {
-            newValue = parseInt(e.target.value);
+            // Rounds to zero.
+            newValue = new Decimal(e.target.value).toDecimalPlaces(0, Decimal.ROUND_DOWN);
+        }
+        if (newValue === null) {
+            this.props.bind.value = newValue;
         }
-        if (newValue === null || !isNaN(newValue)) {
-            if (newValue && (!this.props.numProps || this.props.numProps.autoRound !== false)) {
+        else {
+            if (!this.props.numProps || this.props.numProps.autoRound !== false) {
                 newValue = NumberUtils.roundUsingFormat(newValue, this.formatState.formatString, this.formatState.hasExternalPercentSymbol);
             }
-            this.props.bind.value = newValue;
+            if (this.numericType === Misc.DataType.Decimal) {
+                this.props.bind.value = newValue;
+            }
+            else {
+                this.props.bind.value = newValue.toNumber();
+            }
         }
     };
     NumberInput.prototype.onFocus = function () {
@@ -103,12 +120,21 @@ var NumberInput = /** @class */ (function (_super) {
             element.select();
         }
     };
+    NumberInput.prototype.getBindValueAsNumber = function () {
+        var propertyValue = this.props.bind.value;
+        if (propertyValue instanceof Decimal) {
+            return propertyValue.toNumber();
+        }
+        else {
+            return propertyValue;
+        }
+    };
     NumberInput.prototype.setFocusedText = function (element) {
         this.hasFocus = true;
-        var propertyValue = this.props.bind.value;
+        var numberValue = this.getBindValueAsNumber();
         var stringValue;
-        if (!propertyValue) {
-            if ((this.props.bind.propertyInfo.allowNulls || element.readOnly) && propertyValue === 0) {
+        if (!numberValue) {
+            if ((this.props.bind.propertyInfo.allowNulls || element.readOnly) && numberValue === 0) {
                 stringValue = "0";
             }
             else {
@@ -117,13 +143,13 @@ var NumberInput = /** @class */ (function (_super) {
         }
         else {
             if (element.readOnly || !this.props.numProps || this.props.numProps.autoRound !== false) {
-                stringValue = NumberUtils.formatRaw(propertyValue, this.formatState.formatString, this.formatState.hasExternalPercentSymbol);
+                stringValue = NumberUtils.formatRaw(numberValue, this.formatState.formatString, this.formatState.hasExternalPercentSymbol);
             }
             else {
                 if (this.formatState.isPercent && NumberUtils.transformPercent) {
-                    propertyValue *= 100;
+                    numberValue *= 100;
                 }
-                stringValue = propertyValue.toString();
+                stringValue = numberValue.toString();
             }
         }
         element.value = stringValue;
@@ -137,31 +163,40 @@ var NumberInput = /** @class */ (function (_super) {
     NumberInput.prototype.onKeyDown = function (e) {
         var element = this.inputElement.current;
         if (!this.isReadOnly && element && (e.keyCode === 38 || e.keyCode === 40)) {
-            var selectionIndex = element.selectionEnd;
-            var deltaValue = 1;
-            var decimalIndex = element.value.indexOf(".");
-            if (decimalIndex < 0) {
-                decimalIndex = element.value.indexOf(",");
-            }
-            if (decimalIndex > 0 && selectionIndex && selectionIndex > decimalIndex) {
-                deltaValue = 0.01;
-            }
-            if (this.formatState.isPercent && NumberUtils.transformPercent) {
-                deltaValue /= 100;
-            }
-            if (e.keyCode === 38) {
-                // Up
-                this.props.bind.value += deltaValue;
-            }
-            else if (e.keyCode === 40) {
-                // Down
-                this.props.bind.value -= deltaValue;
-            }
-            this.setFocusedText(element);
-            if (selectionIndex !== null) {
-                element.selectionStart = element.selectionEnd = selectionIndex;
+            var value = this.getBindValueAsNumber();
+            if (value !== null) {
+                var selectionIndex = element.selectionEnd;
+                var deltaValue = 1;
+                var decimalIndex = element.value.indexOf(".");
+                if (decimalIndex < 0) {
+                    decimalIndex = element.value.indexOf(",");
+                }
+                if (decimalIndex > 0 && selectionIndex && selectionIndex > decimalIndex) {
+                    deltaValue = 0.01;
+                }
+                if (this.formatState.isPercent && NumberUtils.transformPercent) {
+                    deltaValue /= 100;
+                }
+                if (e.keyCode === 38) {
+                    // Up
+                    value += deltaValue;
+                }
+                else if (e.keyCode === 40) {
+                    // Down
+                    value -= deltaValue;
+                }
+                if (this.numericType === Misc.DataType.Decimal) {
+                    this.props.bind.value = new Decimal(value);
+                }
+                else {
+                    this.props.bind.value = value;
+                }
+                this.setFocusedText(element);
+                if (selectionIndex !== null) {
+                    element.selectionStart = element.selectionEnd = selectionIndex;
+                }
+                e.preventDefault();
             }
-            e.preventDefault();
         }
     };
     NumberInput.prototype.componentDidMount = function () {
@@ -202,4 +237,3 @@ var NumberInput = /** @class */ (function (_super) {
     return NumberInput;
 }(ComponentBase));
 export default NumberInput;
-//# sourceMappingURL=NumberInput.js.map

package/dist/ReactComponents/Paging/BasicPagerControls.js

@@ -53,4 +53,3 @@ var SimplePagerControls = /** @class */ (function (_super) {
     return SimplePagerControls;
 }(React.Component));
 export default SimplePagerControls;
-//# sourceMappingURL=BasicPagerControls.js.map

package/dist/ReactComponents/Paging/PageSizeControl.js

@@ -19,4 +19,3 @@ var PageSizeControl = /** @class */ (function (_super) {
     return PageSizeControl;
 }(React.Component));
 export default PageSizeControl;
-//# sourceMappingURL=PageSizeControl.js.map

package/dist/ReactComponents/Paging/Pager.js

@@ -39,4 +39,3 @@ var Pager = /** @class */ (function (_super) {
     return Pager;
 }(React.Component));
 export default Pager;
-//# sourceMappingURL=Pager.js.map

package/dist/ReactComponents/ProgressBar.js

@@ -50,4 +50,3 @@ var ProgressBar = /** @class */ (function (_super) {
     return ProgressBar;
 }(React.Component));
 export default ProgressBar;
-//# sourceMappingURL=ProgressBar.js.map