@singularsystems/neo-react 1.0.0-beta.0 → 1.0.0-beta.2

package/dist/ReactComponents/Icons/MaterialSymbolsFontFactory.js

@@ -0,0 +1,114 @@
+import { __extends } from "tslib";
+import { Utils } from "@singularsystems/neo-core";
+import React from "react";
+import { IconFactory } from ".";
+/**
+ * Font factory that renders google material symbols icons.
+ */
+var MaterialSymbolsFontFactory = /** @class */ (function (_super) {
+    __extends(MaterialSymbolsFontFactory, _super);
+    function MaterialSymbolsFontFactory(options) {
+        var _this = this;
+        var _a;
+        _this = _super.call(this) || this;
+        _this.filledByDefault = (_a = options === null || options === void 0 ? void 0 : options.fillDefault) !== null && _a !== void 0 ? _a : false;
+        if ((options === null || options === void 0 ? void 0 : options.fontAwesomeMappings) && (options === null || options === void 0 ? void 0 : options.replaceNeoMappings)) {
+            _this.fontAwesomeMap = new Map(options.fontAwesomeMappings);
+        }
+        else {
+            _this.fontAwesomeMap = new Map(neoFontAwesomeMappings);
+            if (options === null || options === void 0 ? void 0 : options.fontAwesomeMappings) {
+                for (var _i = 0, _b = options.fontAwesomeMappings; _i < _b.length; _i++) {
+                    var mapping = _b[_i];
+                    _this.fontAwesomeMap.set(mapping[0], mapping[1]);
+                }
+            }
+        }
+        return _this;
+    }
+    MaterialSymbolsFontFactory.prototype.mapStringToIcon = function (iconName, style) {
+        var _a;
+        var className = "material-symbols-outlined";
+        var isFilled = (_a = style === null || style === void 0 ? void 0 : style.solid) !== null && _a !== void 0 ? _a : this.filledByDefault;
+        // TODO: copy spin animation from font-awesome
+        if (style === null || style === void 0 ? void 0 : style.spin) {
+            className += " fa fa-spin";
+        }
+        // remove and extract convention styling
+        iconName = iconName.replace("fa-fw", "");
+        var faProps = Utils.getFontAwesomeIconProps(iconName);
+        iconName = faProps.name.trim();
+        if (faProps.isSolid !== undefined) {
+            isFilled = faProps.isSolid;
+        }
+        var mappedName = this.mapFontAwesomeToMaterial(iconName);
+        if (mappedName === undefined) {
+            // replace common differences.
+            mappedName = iconName.replace(/-/g, "_")
+                .replace("plus", "add")
+                .replace("square", "box");
+        }
+        if (mappedName === "") {
+            mappedName = '\u00A0';
+        }
+        var cssStyle;
+        if (isFilled || (style === null || style === void 0 ? void 0 : style.weight)) {
+            var styleText = "";
+            if (isFilled) {
+                styleText += "'FILL' 1";
+            }
+            if (style === null || style === void 0 ? void 0 : style.weight) {
+                styleText += " 'wght' " + style.weight;
+            }
+            cssStyle = { fontVariationSettings: styleText.trim() };
+        }
+        return React.createElement("span", { className: className, style: cssStyle }, mappedName);
+    };
+    MaterialSymbolsFontFactory.prototype.mapFontAwesomeToMaterial = function (faName) {
+        return this.fontAwesomeMap.get(faName.trim());
+    };
+    return MaterialSymbolsFontFactory;
+}(IconFactory));
+export { MaterialSymbolsFontFactory };
+var neoFontAwesomeMappings = [
+    ["plus", "add"],
+    ["plus-square", "add_box"],
+    ["minus", "remove"],
+    ["minus-square", "indeterminate_check_box"],
+    ["arrow-left", "arrow_back"],
+    ["angle-left", "chevron_left"],
+    ["caret-left", "arrow_left"],
+    ["trash", "delete"],
+    ["user", "person"],
+    ["users", "groups"],
+    ["user-shield", "admin_panel_settings"],
+    ["user-plus", "person_add"],
+    ["user-times", "person_remove"],
+    ["user-lock", "manage_accounts"],
+    ["unlock", "lock_open"],
+    ["cogs", "settings"],
+    ["file-excel", "text_snippet"],
+    ["file-code", "code_blocks"],
+    ["feather-alt", "filter_alt"],
+    ["filter", "filter_alt"],
+    ["eye", "visibility"],
+    ["envelope", "mail"],
+    ["address-book", "contact_mail"],
+    ["at", "alternate_email"],
+    ["bell", "notifications"],
+    ["times", "close"],
+    ["eraser", "ink_eraser"],
+    ["align-left", "format_align_left"],
+    ["align-center", "format_align_center"],
+    ["align-right", "format_align_right"],
+    ["equals", "equal"],
+    ["not-equal", "block"],
+    ["copy", "content_copy"],
+    ["chart-bar", "bar_chart"],
+    ["less-than", ""],
+    ["less-than-equal", ""],
+    ["greater-than", ""],
+    ["greater-than-equal", ""],
+    ["stamp", "approval"],
+    ["circle-notch", "progress_activity"]
+];

package/dist/ReactComponents/Icons/index.d.ts

@@ -1,3 +1,4 @@
-export { IIconFactory, IconStyle } from './IIconFactory';
+export type { IIconFactory, IconStyle } from './IIconFactory';
 export { IconFactory } from './IconFactory';
 export { FontAwesomeIconFactory } from './FontAwesomeIconFactory';
+export { MaterialSymbolsFontFactory } from './MaterialSymbolsFontFactory';

package/dist/ReactComponents/Icons/index.js

@@ -1,2 +1,3 @@
 export { IconFactory } from './IconFactory';
 export { FontAwesomeIconFactory } from './FontAwesomeIconFactory';
+export { MaterialSymbolsFontFactory } from './MaterialSymbolsFontFactory';

package/dist/ReactComponents/Input.js

@@ -107,7 +107,7 @@ var Input = /** @class */ (function (_super) {
             splitProps.editor.append = this.props.bind.value ?
                 React.createElement(Button, __assign({ size: "sm" }, buttonOptions, { icon: !this.showPassword ? "far-eye fa-fw" : "far-eye-slash fa-fw", onClick: function () { return _this.showPassword = !_this.showPassword; } })) : null;
         }
-        return (InputHelpers.surroundWithInputGroup(inputElement, splitProps.editor));
+        return (InputHelpers.surroundWithInputGroup(inputElement, splitProps.editor, this.domRef));
     };
     Input.contextType = FormContext;
     __decorate([

package/dist/ReactComponents/InputHelpers.d.ts

@@ -2,5 +2,5 @@ import * as React from 'react';
 import { ICommonEditorProps } from './PropTypes';
 export declare class InputHelpers {
     private static iconFactory?;
-    static surroundWithInputGroup<T extends React.ReactNode>(element: T, props: ICommonEditorProps): JSX.Element | T;
+    static surroundWithInputGroup<T extends React.ReactNode>(element: T, props: ICommonEditorProps, inputRef?: React.RefObject<HTMLElement>): JSX.Element | T;
 }

package/dist/ReactComponents/InputHelpers.js

@@ -4,7 +4,7 @@ import { NeoReactTypes } from '../Modules/Types';
 var InputHelpers = /** @class */ (function () {
     function InputHelpers() {
     }
-    InputHelpers.surroundWithInputGroup = function (element, props) {
+    InputHelpers.surroundWithInputGroup = function (element, props, inputRef) {
         if (!this.iconFactory) {
             this.iconFactory = Misc.Globals.appService.get(NeoReactTypes.Components.IconFactory);
         }
@@ -13,12 +13,12 @@ var InputHelpers = /** @class */ (function () {
                 (props.prependText || props.prepend) &&
                     React.createElement("div", { className: "input-group-prepend" },
                         props.prepend && (props.prepend instanceof Function ? props.prepend() : props.prepend),
-                        props.prependText && React.createElement("span", { className: "input-group-text" }, this.iconFactory.textOrIcon(props.prependText))),
+                        props.prependText && React.createElement("span", { className: "input-group-text", onClick: function () { var _a; return (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); } }, this.iconFactory.textOrIcon(props.prependText))),
                 element,
                 (props.appendText || props.append) &&
                     React.createElement("div", { className: "input-group-append" },
                         props.append && (props.append instanceof Function ? props.append() : props.append),
-                        props.appendText && React.createElement("span", { className: "input-group-text" }, this.iconFactory.textOrIcon(props.appendText)))));
+                        props.appendText && React.createElement("span", { className: "input-group-text", onClick: function () { var _a; return (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); } }, this.iconFactory.textOrIcon(props.appendText)))));
         }
         else {
             return element;

package/dist/ReactComponents/Modal/Modal.js

@@ -70,6 +70,10 @@ var Modal = /** @class */ (function (_super) {
                             _this.visible = false;
                             _this.forceUpdate();
                         }
+                        if (_this.props.afterClose) {
+                            _this.props.afterClose();
+                        }
+                        ;
                         _this.closeTimer = null;
                     }, Misc.Settings.modalAnimationTimeMs);
                 }

package/dist/ReactComponents/NumberInput.js

@@ -96,8 +96,15 @@ var NumberInput = /** @class */ (function (_super) {
     }
     NumberInput.prototype.onChanged = function (e) {
         var newValue;
-        if (e.target.value !== "") {
-            var testValue = e.target.value;
+        var stringValue = e.target.value;
+        if (stringValue !== "") {
+            if (NumberUtils.allowAsDecimalSeparator) {
+                var firstIndex = stringValue.indexOf(NumberUtils.allowAsDecimalSeparator), lastIndex = stringValue.lastIndexOf(NumberUtils.allowAsDecimalSeparator);
+                if (firstIndex >= 0 && firstIndex === lastIndex) {
+                    stringValue = stringValue.replace(NumberUtils.allowAsDecimalSeparator, ".");
+                }
+            }
+            var testValue = stringValue;
             if (testValue[0] === "-") {
                 testValue = testValue.substring(1);
             }
@@ -105,18 +112,18 @@ var NumberInput = /** @class */ (function (_super) {
                 return;
             }
         }
-        if (e.target.value == "") {
+        if (stringValue == "") {
             newValue = this.props.bind.propertyInfo.allowNulls ? null : new Decimal(0);
         }
         else if (this.formatState.isPercent && NumberUtils.transformPercent) {
-            newValue = new Decimal(e.target.value).dividedBy(100);
+            newValue = new Decimal(stringValue).dividedBy(100);
         }
         else if (this.numericType === Misc.DataType.Float || this.numericType === Misc.DataType.Decimal) {
-            newValue = new Decimal(e.target.value);
+            newValue = new Decimal(stringValue);
         }
         else {
             // Rounds to zero.
-            newValue = new Decimal(e.target.value).toDecimalPlaces(0, Decimal.ROUND_DOWN);
+            newValue = new Decimal(stringValue).toDecimalPlaces(0, Decimal.ROUND_DOWN);
         }
         if (newValue === null) {
             this.props.bind.value = newValue;
@@ -248,7 +255,7 @@ var NumberInput = /** @class */ (function (_super) {
             var decimals = NumberUtils.getDecimalPlaces(this.formatState.formatString);
             domProps.step = decimals === 0 ? "1" : "0.".concat("0".repeat(decimals - 1), "1");
         }
-        return (InputHelpers.surroundWithInputGroup(React.createElement("input", __assign({}, domProps, { defaultValue: this.formatState.getFormattedValue(editorProps.bind.value), type: useNative ? "number" : "text", onChange: this.onChanged, ref: this.inputElement })), editorProps));
+        return (InputHelpers.surroundWithInputGroup(React.createElement("input", __assign({}, domProps, { defaultValue: this.formatState.getFormattedValue(editorProps.bind.value), type: useNative ? "number" : "text", onChange: this.onChanged, ref: this.inputElement })), editorProps, this.inputElement));
     };
     NumberInput.contextType = FormContext;
     NumberInput = __decorate([

package/dist/ReactComponents/Paging/Pager.d.ts

@@ -20,5 +20,6 @@ export default class Pager<TCriteria extends ValueObject, TModel extends Model.I
     dataViewContext: DataViewContextParams<TModel>;
     constructor(props: IPagerBaseProps<TCriteria, TModel>);
     componentDidMount(): void;
+    componentDidUpdate(): void;
     render(): JSX.Element | null;
 }

package/dist/ReactComponents/Paging/Pager.js

@@ -16,6 +16,9 @@ var Pager = /** @class */ (function (_super) {
     Pager.prototype.componentDidMount = function () {
         this.props.pageManager.initialise();
     };
+    Pager.prototype.componentDidUpdate = function () {
+        this.props.pageManager.afterRender();
+    };
     Pager.prototype.render = function () {
         var _a = this.props, pageManager = _a.pageManager, pageControls = _a.pageControls, pageControlProps = _a.pageControlProps, suppressLoader = _a.suppressLoader, hideBeforeLoad = _a.hideBeforeLoad, domProps = __rest(_a, ["pageManager", "pageControls", "pageControlProps", "suppressLoader", "hideBeforeLoad"]);
         if (!pageManager.hasFetched && !pageManager.taskRunner.isBusy && hideBeforeLoad !== false) {

package/dist/ReactComponents/PropTypes.d.ts

@@ -135,22 +135,15 @@ export declare class BindPropsHelper {
      */
     static getBindProperty<T>(allProps: IEditorContainerProps<T, any>): Model.IPropertyInstance;
     static splitCommonEditorProps<T extends ICommonEditorProps>(props: T): {
-        editor: {
-            isReadOnly: boolean | undefined;
-            isDisabled: boolean | undefined;
-            prependText: string | undefined;
-            prepend: JSX.Element | (() => JSX.Element) | null | undefined;
-            appendText: string | undefined;
-            append: JSX.Element | (() => JSX.Element) | null | undefined;
-            inputElement: React.RefObject<HTMLElement> | undefined;
-            requiresGroup: boolean;
-        };
+        editor: ICommonEditorProps;
         rest: Omit<T, "disabled" | "readOnly" | "isReadOnly" | "isDisabled" | "prependText" | "appendText" | "prepend" | "append" | "inputElement">;
     };
     static normaliseContainerProps<T, TContainerDom = React.HTMLProps<T>, TData = any>(component: IComponentBase, props: IEditorContainerProps<T, TData>, inGroup: boolean, isBootstrap?: boolean): IEditorContainerNormalisedProps<TContainerDom, TData>;
     static normaliseEditorProps<T, TDom = React.HTMLProps<T>>(component: IComponentBase, props: (IEditorAndSelectorProps<T, any> & TDom) | IEditorNormalisedProps<TDom, any>): IEditorNormalisedProps<TDom, any>;
     static getPlaceholderText(placeholder: string | boolean | undefined, property: PropertyInfo): string | undefined;
     static autoSetDomProperties<TDom extends React.HTMLProps<HTMLElement>>(props: IEditorNormalisedProps<TDom, any>, formContext: FormContextParams, componentBlurFn?: (e: React.FocusEvent<HTMLElement>) => void, componentFocusFn?: (e: React.FocusEvent<HTMLElement>) => void): TDom;
+    static isReadOnly(editorProps: ICommonEditorProps, formContext: FormContextParams): boolean;
+    static isDisabled(editorProps: ICommonEditorProps, formContext: FormContextParams): boolean;
     /**
      * Intercept the user specified blur event, and run the validation onBlur logic first.
      * @param props Props specified on component.

package/dist/ReactComponents/PropTypes.js

@@ -209,12 +209,12 @@ export var BindPropsHelper = /** @class */ (function () {
         if (this.config.isTestOrDevelopment) {
             domProps[BindPropsHelper.DataFieldName] = props.bind.propertyInfo.propertyName;
         }
-        if (props.editor.isReadOnly || (formContext.allReadOnly && props.editor.isReadOnly === undefined)) {
+        if (this.isReadOnly(props.editor, formContext)) {
             domProps.readOnly = true;
             if (!domProps.tabIndex)
                 domProps.tabIndex = -1;
         }
-        if (props.editor.isDisabled || (formContext.allDisabled && props.editor.isDisabled === undefined)) {
+        if (this.isDisabled(props.editor, formContext)) {
             domProps.disabled = true;
         }
         if (props.editor.placeholder) {
@@ -231,6 +231,16 @@ export var BindPropsHelper = /** @class */ (function () {
         domProps.onBlur = BindPropsHelper.blurIntercept(props.editor, domProps.onBlur, componentBlurFn);
         return domProps;
     };
+    BindPropsHelper.isReadOnly = function (editorProps, formContext) {
+        var _a;
+        var propsReadOnly = (_a = editorProps.isReadOnly) !== null && _a !== void 0 ? _a : editorProps.readOnly;
+        return propsReadOnly || (formContext.allReadOnly && propsReadOnly === undefined);
+    };
+    BindPropsHelper.isDisabled = function (editorProps, formContext) {
+        var _a;
+        var propsDisabled = (_a = editorProps.isDisabled) !== null && _a !== void 0 ? _a : editorProps.disabled;
+        return propsDisabled || (formContext.allDisabled && propsDisabled === undefined);
+    };
     /**
      * Intercept the user specified blur event, and run the validation onBlur logic first.
      * @param props Props specified on component.

package/dist/ReactComponents/TooltipProvider.js

@@ -57,9 +57,10 @@ var TooltipProvider = /** @class */ (function (_super) {
         var anchor = element;
         var toolTip = anchor.dataset["tip"];
         var tryCount = 0;
-        while (!toolTip && tryCount < 3 && anchor) {
+        while (!toolTip && tryCount < 8 && anchor) {
             anchor = anchor.parentElement;
             toolTip = anchor && anchor.dataset["tip"];
+            tryCount++;
         }
         if (toolTip && anchor) {
             if (!this.currentInfo || this.currentInfo.anchor !== anchor || this.currentInfo.text !== toolTip) {

package/dist/ReactComponents/_Exports.d.ts

@@ -7,6 +7,7 @@ import ColorPicker from './ColorPicker';
 import ContextMenuContainer from './ContextMenu/ContextMenuContainer';
 import DatePicker from './DatePicker';
 import DropDown from './DropDown/DropDown';
+import Icon from './Icons/Icon';
 import Input, { Textbox, Passwordbox, Checkbox } from './Input';
 import FileBasicInput from './FileManager/FileBasicInput';
 import FileContext from './FileManager/FileContext';
@@ -38,4 +39,4 @@ import ToastContainer from './Notifications/ToastContainer';
 import Tooltip from './Tooltip';
 import TooltipProvider from './TooltipProvider';
 import ValidationSummary from './ValidationSummary';
-export { Alert, AutoCompleteDropDown, Button, Card, Checkbox, Collapsable, ColorPicker, ContextMenuContainer, DatePicker, DropDown, FileBasicInput, FileContext, FileDropArea, FileInput, FileUploadButton, FileUploadProgress, Form, FormContext, FormGroup, FormGroupFloating, FormGroupInline, GridLayout, Input, Link, Loader, Modal, ModalContainer, NumberInput, Pager, PagerControlsBasic, PageSizeControl, Passwordbox, ProgressBar, RadioList, Slider, TabContainer, Tab, Textbox, Toast, ToastContainer, Tooltip, TooltipProvider, ValidationSummary };
+export { Alert, AutoCompleteDropDown, Button, Card, Checkbox, Collapsable, ColorPicker, ContextMenuContainer, DatePicker, DropDown, FileBasicInput, FileContext, FileDropArea, FileInput, FileUploadButton, FileUploadProgress, Form, FormContext, FormGroup, FormGroupFloating, FormGroupInline, GridLayout, Icon, Input, Link, Loader, Modal, ModalContainer, NumberInput, Pager, PagerControlsBasic, PageSizeControl, Passwordbox, ProgressBar, RadioList, Slider, TabContainer, Tab, Textbox, Toast, ToastContainer, Tooltip, TooltipProvider, ValidationSummary };

package/dist/ReactComponents/_Exports.js

@@ -7,6 +7,7 @@ import ColorPicker from './ColorPicker';
 import ContextMenuContainer from './ContextMenu/ContextMenuContainer';
 import DatePicker from './DatePicker';
 import DropDown from './DropDown/DropDown';
+import Icon from './Icons/Icon';
 import Input, { Textbox, Passwordbox, Checkbox } from './Input';
 import FileBasicInput from './FileManager/FileBasicInput';
 import FileContext from './FileManager/FileContext';
@@ -38,4 +39,4 @@ import ToastContainer from './Notifications/ToastContainer';
 import Tooltip from './Tooltip';
 import TooltipProvider from './TooltipProvider';
 import ValidationSummary from './ValidationSummary';
-export { Alert, AutoCompleteDropDown, Button, Card, Checkbox, Collapsable, ColorPicker, ContextMenuContainer, DatePicker, DropDown, FileBasicInput, FileContext, FileDropArea, FileInput, FileUploadButton, FileUploadProgress, Form, FormContext, FormGroup, FormGroupFloating, FormGroupInline, GridLayout, Input, Link, Loader, Modal, ModalContainer, NumberInput, Pager, PagerControlsBasic, PageSizeControl, Passwordbox, ProgressBar, RadioList, Slider, TabContainer, Tab, Textbox, Toast, ToastContainer, Tooltip, TooltipProvider, ValidationSummary };
+export { Alert, AutoCompleteDropDown, Button, Card, Checkbox, Collapsable, ColorPicker, ContextMenuContainer, DatePicker, DropDown, FileBasicInput, FileContext, FileDropArea, FileInput, FileUploadButton, FileUploadProgress, Form, FormContext, FormGroup, FormGroupFloating, FormGroupInline, GridLayout, Icon, Input, Link, Loader, Modal, ModalContainer, NumberInput, Pager, PagerControlsBasic, PageSizeControl, Passwordbox, ProgressBar, RadioList, Slider, TabContainer, Tab, Textbox, Toast, ToastContainer, Tooltip, TooltipProvider, ValidationSummary };

package/dist/Routing/RoutingState.d.ts

@@ -11,6 +11,8 @@ export declare class RoutingState {
     leavePromise?: Promise<boolean> | Promise<Misc.ModalResult> | Promise<void>;
     observableRoute: IProcessedRoute | null;
     currentView: IViewBase | null;
+    get currentViewFullScreen(): boolean;
+    get taskRunner(): import("@singularsystems/neo-core").ITaskRunner | undefined;
     constructor();
     setCurrentRoute(routeProps: RouteComponentProps, route: IProcessedRoute): void;
     private previousRoute?;

package/dist/Routing/RoutingState.js

@@ -1,12 +1,28 @@
 import { __decorate, __metadata } from "tslib";
 import { injectable } from 'inversify';
-import { makeObservable, observable } from 'mobx';
+import { computed, makeObservable, observable } from 'mobx';
 export var RoutingState = /** @class */ (function () {
     function RoutingState() {
         this.observableRoute = null;
         this.currentView = null;
         makeObservable(this);
     }
+    Object.defineProperty(RoutingState.prototype, "currentViewFullScreen", {
+        get: function () {
+            var _a;
+            return ((_a = this.currentView) === null || _a === void 0 ? void 0 : _a.fullScreen) === true;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(RoutingState.prototype, "taskRunner", {
+        get: function () {
+            var _a;
+            return (_a = this.currentView) === null || _a === void 0 ? void 0 : _a.taskRunner;
+        },
+        enumerable: false,
+        configurable: true
+    });
     RoutingState.prototype.setCurrentRoute = function (routeProps, route) {
         this.currentRouteProps = routeProps;
         this.currentRoute = route;
@@ -37,6 +53,16 @@ export var RoutingState = /** @class */ (function () {
         observable.ref,
         __metadata("design:type", Object)
     ], RoutingState.prototype, "currentView", void 0);
+    __decorate([
+        computed,
+        __metadata("design:type", Object),
+        __metadata("design:paramtypes", [])
+    ], RoutingState.prototype, "currentViewFullScreen", null);
+    __decorate([
+        computed,
+        __metadata("design:type", Object),
+        __metadata("design:paramtypes", [])
+    ], RoutingState.prototype, "taskRunner", null);
     RoutingState = __decorate([
         injectable(),
         __metadata("design:paramtypes", [])

package/dist/Routing/ViewParameterList.d.ts

@@ -6,6 +6,12 @@ import { IViewBase } from '../Views/ViewBase';
 export type TransformParamsType<T> = {
     [P in keyof T]: IViewParameter;
 };
+interface ISetValuesOptions {
+    /** True if the url should be set even if none of the values have changed. */
+    force?: boolean;
+    /** True if the url should be replaced instead of added to the history. This prevents the back button returning the params to the current state. */
+    replace?: boolean;
+}
 export interface IViewParameterList {
     /**
      * Returns the breadcrumb items for all url parameters which have a value.
@@ -16,11 +22,10 @@ export interface IViewParameterListOfT<TParams extends RouteParameterObject<TPar
     /**
      * Set the view params for each of the provided values. Only 1 navigation event will occur.
      * @param values New values.
-     * @param force True if the url should be set even if none of the values have changed.
      */
     setValues(values: {
         [P in keyof TParams]?: number | string | null;
-    }, force?: boolean): void;
+    }, options?: ISetValuesOptions | boolean): void;
 }
 export interface IViewParameterListInternal extends IViewParameterList {
     update(match: match): boolean;
@@ -38,7 +43,7 @@ export declare class ViewParameterList<TParams extends RouteParameterObject<TPar
     private getQueryString;
     setValues(values: {
         [P in keyof TParams]?: number | string | null;
-    }, force?: boolean): void;
+    }, options?: ISetValuesOptions | boolean): void;
     setUrl(viewParameter: ViewParameter | null, replace?: boolean): void;
     /**
      * Updates the parameter values from the values in the url. Returns true if any of the values have changed.
@@ -51,3 +56,4 @@ export declare class ViewParameterList<TParams extends RouteParameterObject<TPar
      */
     static getPathForValues<TParams extends RouteParameterObject<TParams>>(basePath: string, params: TParams, values: {}): string;
 }
+export {};

package/dist/Routing/ViewParameterList.js

@@ -69,17 +69,20 @@ var ViewParameterList = /** @class */ (function () {
         }
         return queryPath;
     };
-    ViewParameterList.prototype.setValues = function (values, force) {
+    ViewParameterList.prototype.setValues = function (values, options) {
         var _a;
-        if (force === void 0) { force = false; }
         this.suppressNavigation = true;
         this.hasSuppressedNavigation = false;
+        options !== null && options !== void 0 ? options : (options = {});
+        if (typeof options === "boolean") {
+            options = { force: true }; // parameter used to be named 'force'- backwards compatibility.
+        }
         for (var paramName in values) {
             this[paramName].value = (_a = values[paramName]) !== null && _a !== void 0 ? _a : null;
         }
         this.suppressNavigation = false;
-        if (this.hasSuppressedNavigation || force) {
-            this.setUrl(this.params[this.params.length - 1]);
+        if (this.hasSuppressedNavigation || options.force) {
+            this.setUrl(this.params[this.params.length - 1], options.replace);
         }
     };
     ViewParameterList.prototype.setUrl = function (viewParameter, replace) {

package/dist/Views/ViewBase.d.ts

@@ -10,6 +10,7 @@ import EmptyViewModel from './EmptyViewModel';
 import { IRouteChangedProps } from '../Routing/IRouteChangedProps';
 import { valueOrLazy } from './ViewModelBase';
 export interface IViewBase extends Views.IViewBase {
+    readonly fullScreen: boolean;
     viewParams: IViewParameterList;
     updateViewParams(match: match): void;
     getBreadCrumbList(): BreadCrumbItem[];
@@ -22,6 +23,8 @@ export interface IViewBaseConstructor {
 }
 export default abstract class ViewBase<TViewModel extends IViewModel = EmptyViewModel, TParams extends RouteParameterObject<TParams> = {}> extends React.Component implements IViewBase {
     viewName: string;
+    /** Indicates that the view requests to be displayed full screen. Up to the main layout to accommodate this. */
+    fullScreen: boolean;
     static get currentView(): IViewBase | null;
     private routingState;
     navigation: import("../Routing").INavigationHelper;

package/dist/Views/ViewBase.js

@@ -1,6 +1,6 @@
 import { __awaiter, __decorate, __extends, __generator, __metadata } from "tslib";
 import React from 'react';
-import { observable, runInAction } from 'mobx';
+import { makeObservable, observable, runInAction } from 'mobx';
 import { Misc } from '@singularsystems/neo-core';
 import { ViewParameterList } from '../Routing/ViewParameterList';
 import { ViewState } from './ViewState';
@@ -18,6 +18,8 @@ var ViewBase = /** @class */ (function (_super) {
     function ViewBase(viewName, viewModel, props) {
         var _this = _super.call(this, props) || this;
         _this.viewName = "";
+        /** Indicates that the view requests to be displayed full screen. Up to the main layout to accommodate this. */
+        _this.fullScreen = false;
         _this.routingState = Misc.Globals.appService.get(NeoReactTypes.Routing.GlobalRoutingState);
         _this.navigation = Misc.Globals.appService.get(NeoReactTypes.Routing.NavigationHelper);
         if (typeof viewName !== "string") {
@@ -26,6 +28,7 @@ var ViewBase = /** @class */ (function (_super) {
         _this.viewName = viewName;
         _this.viewState = _this.getStoredViewState(viewModel);
         _this.routingState.currentView = _this;
+        makeObservable(_this);
         return _this;
     }
     Object.defineProperty(ViewBase, "currentView", {
@@ -161,6 +164,10 @@ var ViewBase = /** @class */ (function (_super) {
         observable.ref,
         __metadata("design:type", String)
     ], ViewBase.prototype, "viewName", void 0);
+    __decorate([
+        observable.ref,
+        __metadata("design:type", Boolean)
+    ], ViewBase.prototype, "fullScreen", void 0);
     return ViewBase;
 }(React.Component));
 export default ViewBase;

package/dist/Views/ViewModelBase.d.ts

@@ -1,9 +1,9 @@
 import { ModelBase, Misc, Model, ITaskRunner } from '@singularsystems/neo-core';
 import { IViewModel } from './IViewModel';
 import { IReactionDisposer } from 'mobx';
-import { BindableBase } from '@singularsystems/neo-core/dist/Model/BindableBase';
 import { AxiosPromise } from 'axios';
 import { WaitForTaskRunnerOptions } from '@singularsystems/neo-core/dist/Components/TaskRunner/TaskRunner';
+import { BindableBase } from '@singularsystems/neo-core/dist/Model/BindableBase';
 export type valueOrLazy<T> = T | (() => T) | (new () => T);
 export default abstract class ViewModelBase extends ModelBase implements IViewModel {
     taskRunner: ITaskRunner;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@singularsystems/neo-react",
-  "version": "1.0.0-beta.0",
+  "version": "1.0.0-beta.2",
   "description": "React application logic and components for the Neo client library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -29,7 +29,7 @@
     "typescript": "5.0.4"
   },
   "dependencies": {
-    "@singularsystems/neo-core": "^1.0.0-alpha.4",
+    "@singularsystems/neo-core": "1.0.0-beta.3",
     "@types/rc-slider": "^8.6.5",
     "@types/react-color": "^3.0.1",
     "axios": "1.4.0",
@@ -48,7 +48,7 @@
     "tslib": "2.5.0"
   },
   "peerDependencies": {
-    "@singularsystems/neo-core": ">=1.0.0",
+    "@singularsystems/neo-core": ">=1.0.0-beta.3",
     "axios": "1.4.0",
     "inversify": ">=5.0.1",
     "mobx": ">=6.9.0",

package/styles/Card.scss

@@ -14,11 +14,18 @@
             margin: -10px 0;
 
             .card-expand-indicator {
-                cursor: pointer;
                 margin-left: 0.5rem;
                 padding-top: 0.5rem;
                 padding-bottom: 0.5rem;
             }
         }
     }
+
+    &.card-collapsible {
+        .card-header {
+            &:hover {       
+                cursor: pointer;
+            }
+        }
+    }
 }

package/styles/DatePicker.scss

@@ -3,6 +3,17 @@
     position: relative;
     width: 100%;
     color: initial;
+
+    &.neo-datepicker-always-show {
+      width: max-content;
+
+      input {
+        text-align: center;
+        padding: 0.125rem 0;
+        height: auto;
+        margin-bottom: 0.25rem;
+      }
+    }
   }
   
   .neo-datepicker-popup {

package/styles/Grid.scss

@@ -1,4 +1,9 @@
 table.neo-grid {
+    .neo-grid-fixed-header {
+        position: fixed;
+        z-index: 3;
+    }
+
     th {
         position: relative;
 

package/dist/Declarations.d.ts

@@ -1,3 +0,0 @@
-declare namespace React {
-    type StatelessComponent<P> = React.FunctionComponent<P>;
-}

package/dist/Modules/NeoReactModule.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"NeoReactModule.js","sourceRoot":"","sources":["../../src/Modules/NeoReactModule.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AACxC,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAC/D,OAAO,mBAAmB,CAAC;AAC3B,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,OAAO,gBAAgB,MAAM,6BAA6B,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,iDAAiD,CAAC;AACnF,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE1D,IAAM,cAAc,GAAG,IAAI,WAAW,CAAC,MAAM,CAAC,WAAW,EAAE,UAAA,SAAS;IAEhE,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC,EAAE,CAAC,iBAAiB,CAAC,CAAC,gBAAgB,EAAE,CAAC;IACrG,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC,iBAAiB,CAAC,CAAC,gBAAgB,EAAE,CAAC;IAChG,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,gBAAgB,EAAE,CAAC;IACzF,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,EAAE,CAAC,sBAAsB,CAAC,CAAC,eAAe,CAAC,IAAI,gBAAgB,EAAE,CAAC,CAAC;IACvG,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC,gBAAgB,EAAE,CAAC;IAEtG,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,gBAAgB,EAAE,CAAC;IAC7F,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC,gBAAgB,EAAE,CAAC;IAE/F,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,gBAAgB,EAAE,CAAC;IAE1F,aAAa,CAAC,SAAS,CAAC,CAAC;AAE7B,CAAC,CAAC,CAAC;AAEH,eAAe,cAAc,CAAC"}