@singularsystems/neo-react 0.10.57 → 0.10.61

package/dist/ReactComponents/DropDown/AutoCompleteDropDown.d.ts

@@ -67,7 +67,12 @@ export interface IAutoCompleteMultiSelectProps<T> extends IAutoCompleteCommonPro
     /**
      * Optional list of ids. This will be kept in sync with the bindItems prop.
      */
-    bindIds?: (string | number)[];
+    bindIds?: (string | number)[] | Model.IPropertyInstance<number[]>;
+    /**
+     * The max no of items to record in the field info if bound to a field info class. (Defaults to 5)
+     * If the selected items exceeds this limit, the field info will be recorded as "x items selected".
+     */
+    fieldInfoLimit?: number;
 }
 export default class AutoCompleteDropDown<T> extends DropDownBase<T, IAutoCompleteProps<T> | IAutoCompleteMultiSelectProps<T>> {
     static contextType: React.Context<import("../FormContext").FormContextParams>;
@@ -75,6 +80,9 @@ export default class AutoCompleteDropDown<T> extends DropDownBase<T, IAutoComple
     private asyncSelectImplementation;
     private selectImplementation;
     constructor(props: IAutoCompleteProps<T> | IAutoCompleteMultiSelectProps<T>);
+    private bindProperty;
+    private bindIdsList?;
+    private bindIdsProperty?;
     static getBindProp<T>(props: IAutoCompleteProps<T> | IAutoCompleteMultiSelectProps<T>): any;
     private onKeyPress;
     private mapTArrayToOptions;

package/dist/ReactComponents/DropDown/AutoCompleteDropDown.js

@@ -1,6 +1,6 @@
 import { __assign, __decorate, __extends, __metadata, __rest } from "tslib";
 import React from 'react';
-import { EnumHelper, Misc, Utils } from '@singularsystems/neo-core';
+import { EnumHelper, Misc, Model, Utils } from '@singularsystems/neo-core';
 import { observer } from 'mobx-react';
 import { DropDownBase } from './DropDownBase';
 import { BindPropsHelper } from '../PropTypes';
@@ -11,11 +11,27 @@ import { NeoReactTypes } from '../../Modules/Types';
 var AutoCompleteDropDown = /** @class */ (function (_super) {
     __extends(AutoCompleteDropDown, _super);
     function AutoCompleteDropDown(props) {
+        var _a;
         var _this = _super.call(this, props) || this;
         _this.asyncSelectImplementation = Misc.Globals.appService.get(NeoReactTypes.Components.AsyncSelect);
         _this.selectImplementation = Misc.Globals.appService.get(NeoReactTypes.Components.ReactSelect);
         _this.onKeyPress = _this.onKeyPress.bind(_this);
         _this.onItemSelected = _this.onItemSelected.bind(_this);
+        _this.bindProperty = (_a = _this.props.bind, (_a !== null && _a !== void 0 ? _a : _this.props.bindItems));
+        _this.fieldInfoContainer = Model.ModelFieldInfo.asModelFieldInfoContainer(_this.bindProperty.attachedTo);
+        if (_this.props.bindIds) {
+            if (_this.props.bindIds.propertyInfo) {
+                _this.bindIdsProperty = _this.props.bindIds;
+                _this.bindIdsList = _this.props.bindIds.value;
+            }
+            else {
+                _this.bindIdsList = _this.props.bindIds;
+                if (_this.fieldInfoContainer) {
+                    console.error("Warning: Pass a property instance as 'bindIds', otherwise the display values will not be captured.");
+                    _this.fieldInfoContainer = null;
+                }
+            }
+        }
         return _this;
     }
     AutoCompleteDropDown.getBindProp = function (props) {
@@ -58,11 +74,10 @@ var AutoCompleteDropDown = /** @class */ (function (_super) {
             var itemsProperty = this.props.bindItems;
             // Multi select
             var itemList = itemsProperty.value;
-            var bindIdsList = this.props.bindIds;
             if (action.action === "select-option") {
                 itemList.push({ id: action.option.value, display: action.option.label });
-                if (bindIdsList) {
-                    bindIdsList.push(action.option.value);
+                if (this.bindIdsList) {
+                    this.bindIdsList.push(action.option.value);
                 }
                 if (onItemSelected) {
                     onItemSelected((_a = action.option) === null || _a === void 0 ? void 0 : _a.item);
@@ -72,8 +87,8 @@ var AutoCompleteDropDown = /** @class */ (function (_super) {
                 var removeItem = itemList.find(function (c) { return c.id === action.removedValue.value; });
                 if (removeItem) {
                     itemList.remove(removeItem);
-                    if (bindIdsList) {
-                        bindIdsList.remove(removeItem.id);
+                    if (this.bindIdsList) {
+                        this.bindIdsList.remove(removeItem.id);
                     }
                 }
                 if (onItemSelected) {
@@ -82,8 +97,8 @@ var AutoCompleteDropDown = /** @class */ (function (_super) {
             }
             else if (action.action === "clear") {
                 itemList.length = 0;
-                if (bindIdsList) {
-                    bindIdsList.length = 0;
+                if (this.bindIdsList) {
+                    this.bindIdsList.length = 0;
                 }
                 if (onItemSelected) {
                     onItemSelected(undefined);
@@ -105,15 +120,14 @@ var AutoCompleteDropDown = /** @class */ (function (_super) {
     AutoCompleteDropDown.prototype.render = function () {
         var _this = this;
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-        var _m = this.props, bind = _m.bind, bindDisplay = _m.bindDisplay, bindItems = _m.bindItems, bindIds = _m.bindIds, itemSource = _m.itemSource, items = _m.items, displayMember = _m.displayMember, valueMember = _m.valueMember, descriptionMember = _m.descriptionMember, option = _m.option, noRecordsPrompt = _m.noRecordsPrompt, typeToSearchPrompt = _m.typeToSearchPrompt, delayMs = _m.delayMs, minCharacters = _m.minCharacters, onItemSelected = _m.onItemSelected, otherProps = __rest(_m, ["bind", "bindDisplay", "bindItems", "bindIds", "itemSource", "items", "displayMember", "valueMember", "descriptionMember", "option", "noRecordsPrompt", "typeToSearchPrompt", "delayMs", "minCharacters", "onItemSelected"]);
+        var _m = this.props, bind = _m.bind, bindDisplay = _m.bindDisplay, bindItems = _m.bindItems, bindIds = _m.bindIds, itemSource = _m.itemSource, items = _m.items, displayMember = _m.displayMember, valueMember = _m.valueMember, descriptionMember = _m.descriptionMember, option = _m.option, noRecordsPrompt = _m.noRecordsPrompt, typeToSearchPrompt = _m.typeToSearchPrompt, delayMs = _m.delayMs, minCharacters = _m.minCharacters, onItemSelected = _m.onItemSelected, fieldInfoLimit = _m.fieldInfoLimit, otherProps = __rest(_m, ["bind", "bindDisplay", "bindItems", "bindIds", "itemSource", "items", "displayMember", "valueMember", "descriptionMember", "option", "noRecordsPrompt", "typeToSearchPrompt", "delayMs", "minCharacters", "onItemSelected", "fieldInfoLimit"]);
         var splitProps = BindPropsHelper.splitCommonEditorProps(otherProps);
         var nativeProps = splitProps.rest;
         var bindItemsProperty = bindItems;
         var itemList = (_a = bindItemsProperty) === null || _a === void 0 ? void 0 : _a.value;
         var bindValue = bind;
         var bindDisplayProperty = bindDisplay;
-        var bindProperty = (bindItemsProperty !== null && bindItemsProperty !== void 0 ? bindItemsProperty : bindValue);
-        var displayInfo = bindProperty.validator.getDisplayState(this.context.validationDisplayMode);
+        var displayInfo = this.bindProperty.validator.getDisplayState(this.context.validationDisplayMode);
         displayInfo.applyToDom(nativeProps, this.context.parentType !== EditorParentType.FormGroup);
         this.displayMember = (_b = this.props.displayMember, (_b !== null && _b !== void 0 ? _b : ""));
         this.valueMember = (_c = this.props.valueMember, (_c !== null && _c !== void 0 ? _c : ""));
@@ -130,6 +144,16 @@ var AutoCompleteDropDown = /** @class */ (function (_super) {
         var value = null;
         if (bindItems) {
             value = itemList.map(function (c) { return ({ value: c.id, label: c.display }); });
+            if (this.fieldInfoContainer && this.bindIdsProperty) {
+                var itemListString = "";
+                if (value.length > ((fieldInfoLimit !== null && fieldInfoLimit !== void 0 ? fieldInfoLimit : 5))) {
+                    itemListString = value.length + " items selected";
+                }
+                else if (value.length > 0) {
+                    itemListString = value.map(function (c) { return c.label; }).join(", ");
+                }
+                this.setFieldInfo(this.bindIdsProperty, itemListString, bindItemsProperty.propertyInfo.readableName);
+            }
         }
         else {
             if (bindValue.value !== null) {
@@ -170,7 +194,7 @@ var AutoCompleteDropDown = /** @class */ (function (_super) {
         }
         var userOnBlur = nativeProps.onBlur;
         nativeProps.onBlur = function (e) {
-            bindProperty.validator.hasBlurred = true;
+            _this.bindProperty.validator.hasBlurred = true;
             if (userOnBlur !== undefined) {
                 userOnBlur(e);
             }

package/dist/ReactComponents/DropDown/DropDown.js

@@ -1,7 +1,7 @@
 import { __assign, __decorate, __extends, __metadata } from "tslib";
 import * as React from 'react';
 import { BindPropsHelper } from '../PropTypes';
-import { Utils } from '@singularsystems/neo-core';
+import { Model, Utils } from '@singularsystems/neo-core';
 import { observer } from 'mobx-react';
 import { InputHelpers } from '../InputHelpers';
 import { DropDownBase } from './DropDownBase';
@@ -12,6 +12,7 @@ var DropDown = /** @class */ (function (_super) {
         var _this = _super.call(this, props) || this;
         _this.listIndexSymbol = Symbol("ValueIndex");
         _this.onItemSelected = _this.onItemSelected.bind(_this);
+        _this.fieldInfoContainer = Model.ModelFieldInfo.asModelFieldInfoContainer(_this.props.bind.attachedTo);
         return _this;
     }
     Object.defineProperty(DropDown.prototype, "items", {
@@ -117,9 +118,12 @@ var DropDown = /** @class */ (function (_super) {
             }
             var valueIsBlank = value === undefined || value === null;
             var nullText = (valueIsBlank || ((_d = splitProps.select) === null || _d === void 0 ? void 0 : _d.deSelectText) === undefined) ? (_e = splitProps.select) === null || _e === void 0 ? void 0 : _e.nullText : (_f = splitProps.select) === null || _f === void 0 ? void 0 : _f.deSelectText;
+            if (valueIsBlank) {
+                domProps.className = Utils.joinWithSpaces(domProps.className, "select-no-value");
+            }
             control =
                 React.createElement("select", __assign({ value: valueIsBlank ? "" : value, onChange: this.onItemSelected, ref: splitProps.editor.inputElement }, domProps),
-                    addBlankItem && React.createElement("option", null, nullText),
+                    addBlankItem && React.createElement("option", { className: "option-default" }, nullText),
                     items.map(function (item) { return (React.createElement("option", { value: item[_this.valueMember], key: item[_this.valueMember] }, item[_this.displayMember])); }));
         }
         return (InputHelpers.surroundWithInputGroup(control, splitProps.editor));

package/dist/ReactComponents/DropDown/DropDownBase.d.ts

@@ -8,8 +8,9 @@ export declare abstract class DropDownBase<T, TProps> extends ComponentBase<TPro
     protected isLoading: boolean;
     protected dataSource: Data.IAsyncDataSource<T[]> | null;
     protected cachedDataSource: Data.IDataCacheEntry | null;
+    protected fieldInfoContainer: Model.IModelFieldInfoContainer | null;
     protected getItems(itemSource: ItemSource<T>): T[];
     afterRender(): Promise<void>;
     private fieldDisplayInfo;
-    protected setFieldInfo(bindProperty: Model.IPropertyInstance, displayValue: string): void;
+    protected setFieldInfo(bindProperty: Model.IPropertyInstance, displayValue: string, readableName?: string): void;
 }

package/dist/ReactComponents/DropDown/DropDownBase.js

@@ -1,5 +1,5 @@
 import { __awaiter, __extends, __generator } from "tslib";
-import { Data, Model } from '@singularsystems/neo-core';
+import { Data } from '@singularsystems/neo-core';
 import ComponentBase from '../ComponentBase';
 import LookupHelper from './LookupHelper';
 var DropDownBase = /** @class */ (function (_super) {
@@ -9,6 +9,7 @@ var DropDownBase = /** @class */ (function (_super) {
         _this.isLoading = false;
         _this.dataSource = null;
         _this.cachedDataSource = null;
+        _this.fieldInfoContainer = null;
         _this.fieldDisplayInfo = null;
         return _this;
     }
@@ -53,7 +54,7 @@ var DropDownBase = /** @class */ (function (_super) {
     };
     DropDownBase.prototype.afterRender = function () {
         return __awaiter(this, void 0, void 0, function () {
-            var _a, bindProperty, displayValue, fieldInfo;
+            var _a, bindProperty, displayValue, readableName, fieldInfo;
             return __generator(this, function (_b) {
                 if (this.cachedDataSource) {
                     this.dataSource = this.cachedDataSource.get();
@@ -62,16 +63,12 @@ var DropDownBase = /** @class */ (function (_super) {
                     this.dataSource.fetchInitial();
                 }
                 if (this.fieldDisplayInfo) {
-                    _a = this.fieldDisplayInfo, bindProperty = _a.bindProperty, displayValue = _a.displayValue;
+                    _a = this.fieldDisplayInfo, bindProperty = _a.bindProperty, displayValue = _a.displayValue, readableName = _a.readableName;
                     this.fieldDisplayInfo = null;
-                    if (bindProperty.attachedTo instanceof Model.CriteriaBase) {
-                        fieldInfo = bindProperty.attachedTo.fieldInfo[bindProperty.propertyInfo.propertyName];
-                        if (!fieldInfo) {
-                            fieldInfo = new Model.ModelFieldInfo(bindProperty.propertyInfo.readableName, displayValue);
-                            bindProperty.attachedTo.fieldInfo[bindProperty.propertyInfo.propertyName] = fieldInfo;
-                        }
-                        else {
-                            fieldInfo.valueString = displayValue;
+                    if (this.fieldInfoContainer) {
+                        fieldInfo = this.fieldInfoContainer.setModelFieldInfo(bindProperty.propertyInfo, displayValue);
+                        if (readableName) {
+                            fieldInfo.displayName = readableName;
                         }
                     }
                 }
@@ -79,8 +76,10 @@ var DropDownBase = /** @class */ (function (_super) {
             });
         });
     };
-    DropDownBase.prototype.setFieldInfo = function (bindProperty, displayValue) {
-        this.fieldDisplayInfo = { bindProperty: bindProperty, displayValue: displayValue };
+    DropDownBase.prototype.setFieldInfo = function (bindProperty, displayValue, readableName) {
+        if (this.fieldInfoContainer) {
+            this.fieldDisplayInfo = { bindProperty: bindProperty, displayValue: displayValue, readableName: readableName };
+        }
     };
     return DropDownBase;
 }(ComponentBase));

package/dist/ReactComponents/Form.js

@@ -40,7 +40,7 @@ var Form = /** @class */ (function (_super) {
                     var onClose = this.disposeReaction.bind(this);
                     var codeModal_1 = ModalUtils.showModal(this.props.invalidSummaryTitle || "Invalid data", React.createElement(Observer, null, function () {
                         return React.createElement("div", null,
-                            _this.props.invalidSummaryText || "Cannot continue due to the following errors:",
+                            _this.props.invalidSummaryText || "Cannot continue due to the following issues:",
                             React.createElement(ValidationSummary, { graph: Validation.getValidationSummary(model), hideTopLevelTitle: !(model instanceof Array) }));
                     }), { onClose: onClose, closeButton: { text: "Ok", onClick: onClose } });
                     // Listen for when isValid changes to true, in case there is an async rule running.

package/dist/ReactComponents/Grid/Column.js

@@ -143,7 +143,7 @@ var Column = /** @class */ (function (_super) {
         if (sortProperty && !this.suppressSort) {
             var sortInfo = this.context.dataView.sortInfo.find(function (c) { return c.column === sortProperty.propertyInfo; });
             if (sortInfo) {
-                sortIcon = sortInfo.sortAscending ? "sort-alpha-down" : "sort-alpha-up";
+                sortIcon = sortInfo.sortAscending ? Misc.Settings.icons.sortAsc : Misc.Settings.icons.sortDesc;
                 domProps.className = Utils.joinWithSpaces(domProps.className, "column-is-sorted");
             }
             domProps.className = Utils.joinWithSpaces(domProps.className, "column-sortable");
@@ -163,7 +163,7 @@ var Column = /** @class */ (function (_super) {
             if (editorProps.isReadOnly && !editorProps.requiresGroup) {
                 var rawValue = editorProps.bind.value;
                 if (this.controlType == ControlType.Number) {
-                    displayValue = this.numFormatState(editorProps.bind.propertyInfo.propertyType, props.numProps).getFormattedValue(rawValue);
+                    displayValue = this.numFormatState(editorProps.bind.propertyInfo, editorProps.bind.propertyInfo.propertyType, props.numProps).getFormattedValue(rawValue);
                 }
                 else if (this.controlType == ControlType.Date) {
                     displayValue = DateUtils.format(rawValue, props.dateProps ? props.dateProps.formatString : undefined);
@@ -197,7 +197,7 @@ var Column = /** @class */ (function (_super) {
         var hasSummary = (colProps.sum && !!props.bind) || colProps.footerContent;
         return (React.createElement("th", __assign({}, domProps), hasSummary &&
             React.createElement(Observer, null, function () { return colProps.footerContent ? colProps.footerContent(_this.context.dataView.filteredItems) :
-                _this.numFormatState(props.bind.propertyInfo.propertyType, props.numProps).getFormattedValue(_this.context.dataView.filteredItems.sum(props.bind.propertyInfo)); })));
+                _this.numFormatState(props.bind.propertyInfo, props.bind.propertyInfo.propertyType, props.numProps).getFormattedValue(_this.context.dataView.filteredItems.sum(props.bind.propertyInfo)); })));
     };
     Column.isColumnComponent = true;
     Column.contextType = GridContext;

package/dist/ReactComponents/NumberInput.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { IBindableEditorProps } from './PropTypes';
 import { FormContext } from './FormContext';
-import { Misc } from '@singularsystems/neo-core';
+import { Misc, Model } from '@singularsystems/neo-core';
 import Decimal from 'decimal.js-light';
 import ComponentBase from './ComponentBase';
 export interface INumberInputSpecificProps {
@@ -25,10 +25,14 @@ export declare class FormatState {
     isPercent: boolean;
     hasExternalPercentSymbol: boolean;
     formatString: string;
+    /** How many decimals the value is allowed. */
+    allowedDecimals: number;
     zeroText?: string | undefined;
     useNative?: boolean | undefined;
-    constructor(isPercent: boolean, hasExternalPercentSymbol: boolean, formatString: string, zeroText?: string | undefined, useNative?: boolean | undefined);
-    static create(numericType: Misc.DataType, numProps?: INumberInputSpecificProps, appendText?: string): FormatState;
+    constructor(isPercent: boolean, hasExternalPercentSymbol: boolean, formatString: string, 
+    /** How many decimals the value is allowed. */
+    allowedDecimals: number, zeroText?: string | undefined, useNative?: boolean | undefined);
+    static create(propertyInfo: Model.PropertyInfo, numericType: Misc.DataType, numProps?: INumberInputSpecificProps, appendText?: string): FormatState;
     getFormattedValue(value?: number | Decimal | null): string;
 }
 export default class NumberInput extends ComponentBase<INumberInputProps> {

package/dist/ReactComponents/NumberInput.js

@@ -9,37 +9,49 @@ import { observer } from 'mobx-react';
 import memoize from 'memoize-one';
 import ComponentBase from './ComponentBase';
 var FormatState = /** @class */ (function () {
-    function FormatState(isPercent, hasExternalPercentSymbol, formatString, zeroText, useNative) {
+    function FormatState(isPercent, hasExternalPercentSymbol, formatString, 
+    /** How many decimals the value is allowed. */
+    allowedDecimals, zeroText, useNative) {
         this.isPercent = isPercent;
         this.hasExternalPercentSymbol = hasExternalPercentSymbol;
         this.formatString = formatString;
+        this.allowedDecimals = allowedDecimals;
         this.zeroText = zeroText;
         this.useNative = useNative;
     }
-    FormatState.create = function (numericType, numProps, appendText) {
-        var _a, _b, _c, _d;
+    FormatState.create = function (propertyInfo, numericType, numProps, appendText) {
+        var _a, _b, _c, _d, _e, _f, _g;
         var isPercent = false;
         var hasExternalPercentSymbol = false;
         var formatString = numProps ? numProps.formatString : "";
+        var displayDecimals = 2;
+        if ((formatString && formatString.indexOf("%") >= 0)
+            || appendText === "%"
+            || ((_a = numProps) === null || _a === void 0 ? void 0 : _a.format) === Misc.NumberFormat.PercentDecimals || ((_b = numProps) === null || _b === void 0 ? void 0 : _b.format) === Misc.NumberFormat.PercentNoDecimals) {
+            isPercent = true;
+        }
+        if (propertyInfo.allowedDecimals !== undefined) {
+            displayDecimals = propertyInfo.allowedDecimals - (isPercent ? 2 : 0);
+        }
+        else if ((_c = numProps) === null || _c === void 0 ? void 0 : _c.formatString) {
+            displayDecimals = NumberUtils.getDecimalPlaces(numProps.formatString);
+        }
         if (!formatString) {
             if (numProps && numProps.format) {
-                formatString = NumberUtils.getFormatString(numProps.format, numProps.currencySymbol);
+                formatString = NumberUtils.getFormatString(numProps.format, numProps.currencySymbol, displayDecimals);
             }
             else {
                 var hasDecimals = numericType === Misc.DataType.Float || numericType === Misc.DataType.Decimal;
-                var format = ((_a = numProps) === null || _a === void 0 ? void 0 : _a.currencySymbol) ?
+                var format = ((_d = numProps) === null || _d === void 0 ? void 0 : _d.currencySymbol) ?
                     (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);
+                formatString = NumberUtils.getFormatString(format, (_e = numProps) === null || _e === void 0 ? void 0 : _e.currencySymbol, displayDecimals);
             }
         }
         if (formatString.indexOf("%") < 0 && appendText === "%") {
             hasExternalPercentSymbol = true;
         }
-        if (formatString.indexOf("%") >= 0 || appendText === "%") {
-            isPercent = true;
-        }
-        return new FormatState(isPercent, hasExternalPercentSymbol, formatString, (_c = numProps) === null || _c === void 0 ? void 0 : _c.zeroText, (_d = numProps) === null || _d === void 0 ? void 0 : _d.native);
+        return new FormatState(isPercent, hasExternalPercentSymbol, formatString, displayDecimals + (isPercent ? 2 : 0), (_f = numProps) === null || _f === void 0 ? void 0 : _f.zeroText, (_g = numProps) === null || _g === void 0 ? void 0 : _g.native);
     };
     FormatState.prototype.getFormattedValue = function (value) {
         if (!value && this.zeroText !== undefined) {
@@ -112,7 +124,7 @@ var NumberInput = /** @class */ (function (_super) {
         }
         else {
             if (!this.props.numProps || this.props.numProps.autoRound !== false) {
-                newValue = NumberUtils.roundUsingFormat(newValue, this.formatState.formatString, this.formatState.hasExternalPercentSymbol);
+                newValue = NumberUtils.round(newValue, this.formatState.allowedDecimals);
             }
             if (this.numericType === Misc.DataType.Decimal) {
                 this.props.bind.value = newValue;
@@ -147,7 +159,7 @@ var NumberInput = /** @class */ (function (_super) {
         }
         else {
             if (element.readOnly || !this.props.numProps || this.props.numProps.autoRound !== false) {
-                stringValue = NumberUtils.formatRaw(numberValue, this.formatState.formatString, this.formatState.hasExternalPercentSymbol);
+                stringValue = NumberUtils.formatRaw(numberValue, this.formatState.formatString, this.formatState.hasExternalPercentSymbol, this.formatState.allowedDecimals);
             }
             else {
                 if (this.formatState.isPercent && NumberUtils.transformPercent) {
@@ -222,7 +234,7 @@ var NumberInput = /** @class */ (function (_super) {
         var useNative = (_a = splitProps.numProps) === null || _a === void 0 ? void 0 : _a.native;
         var displayInfo = this.props.bind.validator.getDisplayState(this.context.validationDisplayMode);
         displayInfo.applyToDom(domProps, !splitProps.inGroup);
-        this.formatState = this.recalcFormatState(this.numericType, splitProps.numProps, editorProps.appendText);
+        this.formatState = this.recalcFormatState(this.props.bind.propertyInfo, this.numericType, splitProps.numProps, editorProps.appendText);
         this.isReadOnly = domProps.readOnly === true;
         if (editorProps.inputElement) {
             this.inputElement = editorProps.inputElement;

package/dist/Routing/ViewParameter.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { IRouteParameter } from './IRouteParameter';
 import { IViewParameterListInternal } from './ViewParameterList';
 import { Model } from '@singularsystems/neo-core';
@@ -16,6 +17,12 @@ export interface IViewParameter {
      * Used by the breadcrumb.
      */
     description: string;
+    /**
+     * Sets the description, and an optional list of prefixes.
+     * @param description Description of the current value.
+     * @param prefixes Function that returns prefixes for this breadcrumb item. The previous prefixes are passed into the function.
+     */
+    setDescription(description: string, getPrefixes?: (currentPrefixes: IViewParameterPrefix[]) => IViewParameterPrefix[]): void;
     /**
      * Returns value as a nullable int.
      */
@@ -41,6 +48,7 @@ export declare class ViewParameter implements IViewParameter {
     private hasPendingValue;
     private pendingValue;
     private _value;
+    prefixes: IViewParameterPrefix[];
     constructor(parent: IViewParameterListInternal, name: string, routeParameter: IRouteParameter);
     bindTo(propertyOrCallback: Model.IPropertyInstance | (() => (string | number | null | undefined))): void;
     get value(): number | string | null;
@@ -49,6 +57,7 @@ export declare class ViewParameter implements IViewParameter {
     _description: string;
     get description(): string;
     set description(value: string);
+    setDescription(description: string, getPrefixes?: (currentPrefixes: IViewParameterPrefix[]) => IViewParameterPrefix[]): void;
     asNullableInt(): number | null;
     asString(): string;
     /** Updates the current value, and returns true if the value changed. */
@@ -58,3 +67,14 @@ export declare class ViewParameter implements IViewParameter {
     }): string;
     get latestValue(): string | null;
 }
+interface IViewParameterPrefix {
+    /** Label to show on breadcrumb. */
+    label: string;
+    /** Value to use in the breadcrumb link. Clicking on the link will set the view parameter to this value. */
+    value?: number | string | null;
+    /** Custom link to use in the breadcrumb. */
+    link?: string;
+    /** Click event for the breadcrumb. */
+    onClick?: (e: React.MouseEvent) => void;
+}
+export {};

package/dist/Routing/ViewParameter.js

@@ -8,6 +8,7 @@ var ViewParameter = /** @class */ (function () {
         this.hasPendingValue = false;
         this.pendingValue = null;
         this._value = null;
+        this.prefixes = [];
         this._description = "";
     }
     ViewParameter.prototype.bindTo = function (propertyOrCallback) {
@@ -28,7 +29,6 @@ var ViewParameter = /** @class */ (function () {
             if (stringValue !== this._value) {
                 this.hasPendingValue = true;
                 this.pendingValue = stringValue;
-                this._description = "";
                 this.parent.setUrl(this);
             }
         },
@@ -55,6 +55,10 @@ var ViewParameter = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    ViewParameter.prototype.setDescription = function (description, getPrefixes) {
+        this.prefixes = getPrefixes ? getPrefixes(this.prefixes) : [];
+        this.description = description;
+    };
     ViewParameter.prototype.asNullableInt = function () {
         if (this._value) {
             return parseInt(this._value, 10);
@@ -66,13 +70,17 @@ var ViewParameter = /** @class */ (function () {
     };
     /** Updates the current value, and returns true if the value changed. */
     ViewParameter.prototype.update = function (value) {
-        if (value)
+        if (value) {
             value = decodeURIComponent(value);
+        }
         if (value != this._value) {
             this.hasPendingValue = false;
             this.pendingValue = value;
-            this._description = "";
             this._value = value;
+            if (!value) {
+                this._description = "";
+                this.prefixes = [];
+            }
             return true;
         }
         return false;

package/dist/Routing/ViewParameterList.js

@@ -28,6 +28,22 @@ var ViewParameterList = /** @class */ (function () {
         for (var _i = 0, _b = this.params; _i < _b.length; _i++) {
             var viewParam = _b[_i];
             if (!viewParam.routeParameter.isQuery) {
+                if (!upTo) {
+                    for (var _c = 0, _d = viewParam.prefixes; _c < _d.length; _c++) {
+                        var prefix = _d[_c];
+                        var breadcrumbItem = new BreadCrumbItem(prefix.label);
+                        if (prefix.onClick) {
+                            breadcrumbItem.onClick = prefix.onClick;
+                        }
+                        else if (prefix.link) {
+                            breadcrumbItem.link = prefix.link;
+                        }
+                        else if (prefix.value) {
+                            breadcrumbItem.link = paramPath + "/" + prefix.value;
+                        }
+                        breadCrumbs.push(breadcrumbItem);
+                    }
+                }
                 paramPath += viewParam.getParamString(state);
                 if ((_a = viewParam.routeParameter.selection, (_a !== null && _a !== void 0 ? _a : BreadCrumbSelectMode.Default)) === BreadCrumbSelectMode.Default) {
                     selectablePath = paramPath;

package/dist/Views/ViewBase.d.ts

@@ -46,7 +46,7 @@ export default abstract class ViewBase<TViewModel extends IViewModel = EmptyView
     /**
      * viewParamsUpdated() is called when the component is mounted, and whenever a route parameter or query parameter gets a changed value.
      */
-    protected viewParamsUpdated(): void;
+    protected viewParamsUpdated(): void | Promise<void>;
     /** Gets the parent breadcrumbs, and the breadcrumb for this view. */
     protected getBreadCrumbStart(): BreadCrumbItem[];
     /**

package/dist/Views/ViewBase.js

@@ -1,6 +1,6 @@
-import { __decorate, __extends, __metadata } from "tslib";
+import { __awaiter, __decorate, __extends, __generator, __metadata } from "tslib";
 import React from 'react';
-import { observable } from 'mobx';
+import { observable, runInAction } from 'mobx';
 import { Misc } from '@singularsystems/neo-core';
 import { ViewParameterList } from '../Routing/ViewParameterList';
 import { ViewState } from './ViewState';
@@ -79,9 +79,20 @@ var ViewBase = /** @class */ (function (_super) {
         this.disposeViewModel();
     };
     ViewBase.prototype.updateViewParams = function (match) {
-        if (this.viewState.viewParams.update(match)) {
-            this.viewParamsUpdated();
-        }
+        var _this = this;
+        runInAction(function () { return __awaiter(_this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (!this.viewState.viewParams.update(match)) return [3 /*break*/, 2];
+                        return [4 /*yield*/, Promise.resolve(this.viewParamsUpdated())];
+                    case 1:
+                        _a.sent();
+                        _a.label = 2;
+                    case 2: return [2 /*return*/];
+                }
+            });
+        }); });
     };
     /**
      * viewParamsUpdated() is called when the component is mounted, and whenever a route parameter or query parameter gets a changed value.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@singularsystems/neo-react",
-  "version": "0.10.57",
+  "version": "0.10.61",
   "description": "React application logic and components for the Neo client library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -33,7 +33,7 @@
     "@types/rc-slider": "^8.6.5",
     "@types/react-color": "^3.0.1",
     "@types/react-select": "3.1.0",
-    "@singularsystems/neo-core": "^0.10.62",
+    "@singularsystems/neo-core": "^0.10.63",
     "axios": "^0.21.1",
     "decimal.js-light": "2.5.1",
     "history": "4.10.1",
@@ -47,7 +47,7 @@
     "react-router-dom": "5.1.0"
   },
   "peerDependencies": {
-    "@singularsystems/neo-core": ">=0.10.62",
+    "@singularsystems/neo-core": ">=0.10.69",
     "axios": ">=0.21.1",
     "inversify": ">=5.0.1",
     "react": ">=16.13.1",

package/styles/DatePicker.scss

@@ -124,7 +124,7 @@
         margin: 8px 5px;
     
         td {
-          padding: 13px 12px;
+          padding: 13px 0px;
         }
       }
     
@@ -132,7 +132,7 @@
         margin: 5px 8px;
     
         td {
-          padding: 8px 10px;
+          padding: 8px 0px;
         }
       }
     }

package/styles/Forms.scss

@@ -131,6 +131,11 @@ div.neo-form-group-floating {
     }
 }
 
+.react-select-bs {
+    .react-select-bs__menu {
+        z-index: 2; /* Without this, checkboxes appear in front of the drop down menu. */
+    }
+}
 .react-select-row {
     padding: 0.15rem 1rem 0.25rem 1rem;
     display: flex;