@singularsystems/neo-react 1.5.0 → 1.6.1

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 This file details all new features and changes to functionality. If you only need to see changes that require updates to your project, see the [breaking changes](./Breaking.md) readme.
 
+## Version 1.6.1 (23 June 2026)
+
+- Routing changes
+    - Routes parameters can now be defined in the route path. E.g. `/products/:id/sales`.
+    - Parameters not defined in the path will continue to be appended at the end of the path.
+    - Internal overhaul of routing system to allow better unit testing.
+
 ## Version 1.5.0 (28 May 2026)
 
 - Fixed routes with the same prefix, but different parameter counts not being registered.

package/dist/ReactComponents/Link.d.ts

@@ -16,5 +16,6 @@ export default class Link extends React.Component<ILinkProps> {
     constructor(props: ILinkProps);
     private onClick;
     render(): React.JSX.Element;
+    static isMatch(linkPath: string, currentPath: string, exact?: boolean): boolean;
 }
 export {};

package/dist/ReactComponents/Link.js

@@ -15,6 +15,7 @@ var Link = /** @class */ (function (_super) {
         _this.basePath = Misc.Globals.appService.get(NeoReactTypes.Routing.GlobalRoutingState).basePath;
         return _this;
     }
+    Link_1 = Link;
     Link.prototype.onClick = function (e) {
         if (this.props.onClick) {
             this.props.onClick(e);
@@ -37,22 +38,28 @@ var Link = /** @class */ (function (_super) {
             if (isNav) {
                 // Cause re-render if current route changes.
                 void Misc.Globals.appService.get(NeoReactTypes.Routing.GlobalRoutingState).currentRoute;
-                var path = window.location.pathname.toLowerCase();
-                var toLc = to.toLowerCase();
-                if (path.endsWith("/")) {
-                    path = path.substring(0, path.length - 1);
-                }
-                var isMatch = exact === true ?
-                    toLc === path :
-                    path.startsWith(toLc);
-                if (isMatch) {
+                if (Link_1.isMatch(to, window.location.pathname, exact)) {
                     rest.className = Utils.joinWithSpaces(rest.className, "active");
                 }
             }
         }
         return React.createElement("a", __assign({}, rest, { href: href, onClick: this.onClick }), this.props.children);
     };
-    Link = __decorate([
+    Link.isMatch = function (linkPath, currentPath, exact) {
+        linkPath = linkPath.toLowerCase();
+        currentPath = currentPath.toLowerCase();
+        if (!currentPath.endsWith("/")) {
+            currentPath += "/";
+        }
+        if (!linkPath.endsWith("/")) {
+            linkPath += "/";
+        }
+        return exact === true ?
+            linkPath === currentPath :
+            currentPath.startsWith(linkPath);
+    };
+    var Link_1;
+    Link = Link_1 = __decorate([
         observer,
         __metadata("design:paramtypes", [Object])
     ], Link);

package/dist/Routing/IRouteParameter.d.ts

@@ -20,3 +20,7 @@ export type RouteParameters = {
 export type RouteParameterObject<T> = {
     [P in keyof T]: IRouteParameter;
 };
+export type ValidParameterValue = number | string | string[] | null;
+export type ParamValues<TParams> = {
+    [P in keyof TParams]?: ValidParameterValue;
+};

package/dist/Routing/MenuRoute.d.ts

@@ -2,8 +2,16 @@ import ViewBase from '../Views/ViewBase';
 import { Routing } from '@singularsystems/neo-core';
 import { RouteParameterObject } from './IRouteParameter';
 export interface IMenuRoute extends Routing.IMenuRoute {
+    /** The base route. Can be used instead of specifying path */
+    baseRoute?: Routing.IRoute;
 }
 export declare class MenuRoute<TParams extends RouteParameterObject<TParams>> implements IMenuRoute {
+    baseRoute: {
+        path: string;
+        component: new (...args: any) => ViewBase<any, TParams>;
+    };
+    private viewParamValues?;
+    private _path?;
     /**
      * Creates a menu route with view parameters specified.
      * @param baseRoute Path and component
@@ -13,13 +21,10 @@ export declare class MenuRoute<TParams extends RouteParameterObject<TParams>> im
     constructor(baseRoute: {
         path: string;
         component: new (...args: any) => ViewBase<any, TParams>;
-    }, menuParams: Routing.IMenuRoute, viewParams?: {
-        [P in keyof TParams]?: number | string | null;
-    });
+    }, menuParams: Routing.IMenuRoute, viewParamValues?: { [P in keyof TParams]?: number | string | null; } | undefined);
     /** Path including view param values. */
-    path: string;
-    /** Path without parameter values or routing template. */
-    basePath: string;
+    get path(): string;
     /** Name to show in the menu item. */
     name: string;
+    clone(): IMenuRoute;
 }

package/dist/Routing/MenuRoute.js

@@ -1,4 +1,6 @@
-import { ViewParameterList } from './ViewParameterList';
+import { __assign } from "tslib";
+import { RouteHelper } from "./RouteHelper";
+import RouteProvider from "./RouteProvider";
 var MenuRoute = /** @class */ (function () {
     /**
      * Creates a menu route with view parameters specified.
@@ -6,21 +8,40 @@ var MenuRoute = /** @class */ (function () {
      * @param menuParams Other menu options.
      * @param viewParams View parameter values.
      */
-    function MenuRoute(baseRoute, menuParams, viewParams) {
+    function MenuRoute(baseRoute, menuParams, viewParamValues) {
         var _this = this;
+        this.baseRoute = baseRoute;
+        this.viewParamValues = viewParamValues;
         Object.getOwnPropertyNames(baseRoute).forEach(function (propertyName) {
-            // @ts-ignore 
-            _this[propertyName] = baseRoute[propertyName];
+            if (propertyName !== "path") {
+                // @ts-ignore 
+                _this[propertyName] = baseRoute[propertyName];
+            }
         });
         Object.getOwnPropertyNames(menuParams).forEach(function (propertyName) {
-            // @ts-ignore 
-            _this[propertyName] = menuParams[propertyName];
+            if (propertyName !== "path") {
+                // @ts-ignore 
+                _this[propertyName] = menuParams[propertyName];
+            }
         });
-        this.basePath = this.path;
-        if (viewParams) {
-            this.path = ViewParameterList.getPathForValues(this.basePath, baseRoute.component.params, viewParams);
-        }
     }
+    Object.defineProperty(MenuRoute.prototype, "path", {
+        /** Path including view param values. */
+        get: function () {
+            if (!this._path) {
+                var processedRoute = RouteProvider.getProcessedRoute(this.baseRoute);
+                this._path = RouteHelper.hydrateRoute(processedRoute, this.viewParamValues);
+            }
+            return this._path;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    MenuRoute.prototype.clone = function () {
+        var clone = __assign({}, this);
+        clone.path = this.path;
+        return clone;
+    };
     return MenuRoute;
 }());
 export { MenuRoute };

package/dist/Routing/NavigationHelper.d.ts

@@ -1,12 +1,9 @@
 import ViewBase from '../Views/ViewBase';
 import { RoutingState } from './RoutingState';
 import { INavigationHelper as INeoNavigationHelper } from '@singularsystems/neo-core/dist/Routing/INavigationHelper';
-import { RouteParameterObject } from './IRouteParameter';
+import { ParamValues, RouteParameterObject } from './IRouteParameter';
 import type { IPageLeaveHandler } from "./PageLeaveHandler";
 export type ViewConstructor<TParams extends RouteParameterObject<TParams>> = new (...args: any) => ViewBase<any, TParams>;
-export type ParamValues<TParams> = {
-    [P in keyof TParams]?: number | string | null;
-};
 export interface INavigationHelper extends INeoNavigationHelper {
     /**
      * Navigates to the view, if the view component is found in the routes definition.

package/dist/Routing/NavigationHelper.js

@@ -1,8 +1,8 @@
 import { __awaiter, __decorate, __generator, __metadata, __param } from "tslib";
-import { ViewParameterList } from './ViewParameterList';
 import { injectable, inject } from 'inversify';
 import { NeoReactTypes } from '../Modules/Types';
 import { RoutingState } from './RoutingState';
+import { RouteHelper } from "./RouteHelper";
 var NavigationHelper = /** @class */ (function () {
     function NavigationHelper(routingState, pageLeaveHandler) {
         this.routingState = routingState;
@@ -98,14 +98,9 @@ var NavigationHelper = /** @class */ (function () {
         return openerState;
     };
     NavigationHelper.prototype.getPathForView = function (view, paramValues) {
-        var basePath = this.routingState.appRouteProvider.getPathForComponent(view);
-        if (basePath !== undefined) {
-            if (paramValues) {
-                return ViewParameterList.getPathForValues(basePath, view.params, paramValues);
-            }
-            else {
-                return basePath;
-            }
+        var route = this.routingState.appRouteProvider.getRouteForComponent(view);
+        if (route !== undefined) {
+            return RouteHelper.hydrateRoute(route, paramValues);
         }
         else {
             throw Error("Cannot find route for component " + view.name);
@@ -113,7 +108,7 @@ var NavigationHelper = /** @class */ (function () {
     };
     NavigationHelper.prototype.getCurrentViewPath = function () {
         if (this.routingState.currentRoute) {
-            return this.routingState.currentRoute.route.path;
+            return this.routingState.currentRoute.route.defaultPath;
         }
         else {
             return "";

package/dist/Routing/RouteHelper.d.ts

@@ -0,0 +1,8 @@
+import { ParamValues, ValidParameterValue } from "./IRouteParameter";
+import { IProcessedRoute } from "./RouteProvider";
+export declare class RouteHelper {
+    /** Populates the route's path with the provided parameter values. */
+    static hydrateRoute<TParams>(route: IProcessedRoute, paramValues?: ParamValues<TParams>, includeQueryParams?: boolean): string;
+    static getQueryString<TParams>(route: IProcessedRoute, paramValues: ParamValues<TParams>): string;
+    static stringifyValue(value?: ValidParameterValue): string | null;
+}

package/dist/Routing/RouteHelper.js

@@ -0,0 +1,54 @@
+var RouteHelper = /** @class */ (function () {
+    function RouteHelper() {
+    }
+    /** Populates the route's path with the provided parameter values. */
+    RouteHelper.hydrateRoute = function (route, paramValues, includeQueryParams) {
+        var _a;
+        if (includeQueryParams === void 0) { includeQueryParams = true; }
+        paramValues !== null && paramValues !== void 0 ? paramValues : (paramValues = {});
+        var path = "";
+        var pending = "";
+        var index = 0;
+        for (var _i = 0, _b = route.segments; _i < _b.length; _i++) {
+            var segment = _b[_i];
+            if (segment.param) {
+                var rawValue = paramValues[segment.param.name];
+                var value = encodeURIComponent((_a = this.stringifyValue(rawValue)) !== null && _a !== void 0 ? _a : "");
+                pending += "/" + value;
+                if ((rawValue !== undefined && rawValue !== null) || index < route.requiredSegments) {
+                    path += pending;
+                    pending = "";
+                }
+            }
+            else {
+                path += "/" + segment.value;
+            }
+            index++;
+        }
+        var queryString = includeQueryParams ? this.getQueryString(route, paramValues) : "";
+        return path + queryString;
+    };
+    RouteHelper.getQueryString = function (route, paramValues) {
+        var _a;
+        var queryString = "";
+        for (var _i = 0, _b = route.queryParams; _i < _b.length; _i++) {
+            var queryParam = _b[_i];
+            var rawValue = paramValues[queryParam.name];
+            if (rawValue !== undefined && rawValue !== null) {
+                var value = encodeURIComponent((_a = this.stringifyValue(rawValue)) !== null && _a !== void 0 ? _a : "");
+                queryString += (queryString ? "&" : "?") + queryParam.name + "=" + value;
+            }
+        }
+        return queryString;
+    };
+    RouteHelper.stringifyValue = function (value) {
+        if (value instanceof Array) {
+            return value.join(",");
+        }
+        else {
+            return value !== null && value !== undefined ? value.toString() : null;
+        }
+    };
+    return RouteHelper;
+}());
+export { RouteHelper };

package/dist/Routing/RouteProvider.d.ts

@@ -5,15 +5,23 @@ interface INamedRouteParameter extends IRouteParameter {
     name: string;
 }
 export interface IProcessedRoute extends Routing.IRoute {
-    /** Lower case base path without trailing / */
-    path: string;
+    /** Path with all parameters replaced by their default values. */
+    defaultPath: string;
     /** Route params in order, excluding query parameters. */
-    params: INamedRouteParameter[];
-    order: number;
+    routeParams: INamedRouteParameter[];
+    queryParams: INamedRouteParameter[];
+    /** The path split into segments, including parameter segments. */
+    segments: RouteSegment[];
+    /** The number of required segments in the path for this route to match. */
+    requiredSegments: number;
 }
 type ParamsObject = {
     [index: string]: string | undefined;
 };
+type RouteSegment = {
+    value: string;
+    param?: INamedRouteParameter;
+};
 /**
  * A route which has matched, with its parameter values populated from the path.
  */
@@ -28,8 +36,7 @@ export default class RouteProvider {
     menuRoutes: Routing.IMenuRoute[];
     pureRoutes?: Routing.IRoute[] | undefined;
     notFoundComponent?: React.ComponentType | undefined;
-    private staticRoutes;
-    private parameterisedRoutes;
+    private basePaths;
     readonly allRoutes: IProcessedRoute[];
     /**
      * Creates a route provider which provides a list of flattened routes.
@@ -38,8 +45,10 @@ export default class RouteProvider {
      * @param notFoundComponent Component to render when the url doesn't match any of the above routes.
      */
     constructor(menuRoutes: Routing.IMenuRoute[], pureRoutes?: Routing.IRoute[] | undefined, notFoundComponent?: React.ComponentType | undefined);
-    /** Gets the path the component is bound to. If the component is bound to multiple paths, the first path is returned. */
+    /** Gets the raw route path the component is bound to. If the component is bound to multiple paths, the first path is returned. */
     getPathForComponent(component: any): string | undefined;
+    /** Gets the route the component is bound to. If the component is bound to multiple routes, the first route is returned. */
+    getRouteForComponent(component: any): IProcessedRoute | undefined;
     private flatten;
     /**
      * Create a copy of the route info, and process it.

package/dist/Routing/RouteProvider.js

@@ -1,4 +1,6 @@
 import { __assign, __spreadArray } from "tslib";
+import { RouteHelper } from "./RouteHelper";
+var processedRouteSymbol = Symbol("processedRoute");
 var RouteProvider = /** @class */ (function () {
     /**
      * Creates a route provider which provides a list of flattened routes.
@@ -10,91 +12,91 @@ var RouteProvider = /** @class */ (function () {
         this.menuRoutes = menuRoutes;
         this.pureRoutes = pureRoutes;
         this.notFoundComponent = notFoundComponent;
-        this.staticRoutes = [];
-        this.parameterisedRoutes = [];
+        this.basePaths = new Set();
         this.allRoutes = [];
-        this.flatten(menuRoutes);
         if (pureRoutes)
             this.flatten(pureRoutes);
-        this.staticRoutes = this.allRoutes.filter(function (c) { return c.params.length === 0; });
-        this.parameterisedRoutes = this.allRoutes
-            .filter(function (c) { return c.params.length > 0; })
-            .sortBy(function (c) { return c.order; }, "desc");
+        this.flatten(menuRoutes);
     }
-    /** Gets the path the component is bound to. If the component is bound to multiple paths, the first path is returned. */
+    /** Gets the raw route path the component is bound to. If the component is bound to multiple paths, the first path is returned. */
     RouteProvider.prototype.getPathForComponent = function (component) {
         var _a;
-        return (_a = this.allRoutes.find(function (c) { return c.component === component; })) === null || _a === void 0 ? void 0 : _a.path;
+        return (_a = this.getRouteForComponent(component)) === null || _a === void 0 ? void 0 : _a.defaultPath;
+    };
+    /** Gets the route the component is bound to. If the component is bound to multiple routes, the first route is returned. */
+    RouteProvider.prototype.getRouteForComponent = function (component) {
+        return this.allRoutes.find(function (c) { return c.component === component; });
     };
     /** @internal */
-    RouteProvider.prototype.getRouteForPath = function (path) {
-        return RouteProvider.getRouteForPath(this.staticRoutes, this.parameterisedRoutes, path);
+    RouteProvider.getProcessedRoute = function (route) {
+        var _a;
+        // @ts-ignore
+        var processed = route[processedRouteSymbol];
+        if (!processed) {
+            throw new Error("Route has not been processed: ".concat((_a = route.basePath) !== null && _a !== void 0 ? _a : route.path));
+        }
+        return processed;
     };
     /** @internal */
-    RouteProvider.getRouteForPath = function (staticRoutes, parameterisedRoutes, path) {
+    RouteProvider.prototype.getRouteForPath = function (path) {
+        var _a;
         var queryIndex = path.indexOf("?");
         if (queryIndex >= 0) {
             path = path.substring(0, queryIndex);
         }
-        var lcPath = path.toLowerCase();
-        var found = staticRoutes.find(function (route) { return route.path === lcPath; });
-        if (found) {
-            return { route: found, path: path };
-        }
-        if (path.endsWith("/")) {
-            // special case for where an extra "/" is added to the url by mistake.
-            var trimmedPath_1 = lcPath.substring(0, path.length - 1);
-            var found_1 = staticRoutes.find(function (route) { return route.path === trimmedPath_1; });
-            if (found_1) {
-                return { route: found_1, path: path };
-            }
-        }
-        var matches = parameterisedRoutes.filter(function (route) { return lcPath.startsWith(route.path); });
-        for (var _i = 0, matches_1 = matches; _i < matches_1.length; _i++) {
-            var match = matches_1[_i];
-            var paramString = path.substring(match.path.length);
-            // Special case for root path which has its leading "/" removed by the navigation helper.
-            if (match.path === "/") {
-                paramString = "/" + paramString;
-            }
-            var parts = paramString.split("/").slice(1);
-            var partCount = parts.length;
-            // Allow extra "/" 
-            if (partCount > 0 && parts[partCount - 1] === "") {
-                partCount -= 1;
-            }
-            if (match.params.length >= partCount) {
-                var paramValues = {};
-                var isValid = true;
-                for (var i = 0; i < match.params.length; i++) {
-                    var param = match.params[i];
-                    var value = parts[i];
-                    paramValues[param.name] = value;
-                    if (param.required && !value) {
-                        isValid = false;
-                        break;
+        var providedSegments = path.split("/").slice(1);
+        var currentRoutes = this.allRoutes.filter(function (r) { return providedSegments.length >= r.requiredSegments; });
+        var params = [];
+        for (var i = 0; i < providedSegments.length; i++) {
+            var segmentValue = providedSegments[i];
+            var matchedRoutes = [];
+            for (var _i = 0, currentRoutes_1 = currentRoutes; _i < currentRoutes_1.length; _i++) {
+                var route = currentRoutes_1[_i];
+                var routeSegment = route.segments.length > i ? route.segments[i] : undefined;
+                if (segmentValue.toLowerCase() === ((_a = routeSegment === null || routeSegment === void 0 ? void 0 : routeSegment.value) !== null && _a !== void 0 ? _a : "")) {
+                    matchedRoutes.push(route);
+                }
+                else if (routeSegment && routeSegment.param) {
+                    params.push({ param: routeSegment.param, value: segmentValue, index: i });
+                    if (!routeSegment.param.required || segmentValue) {
+                        matchedRoutes.push(route);
                     }
                 }
-                if (isValid) {
-                    return { route: match, path: path, params: paramValues };
+            }
+            currentRoutes = matchedRoutes;
+        }
+        if (currentRoutes.length > 0) {
+            var route = currentRoutes[0];
+            var paramValues = {};
+            var _loop_1 = function (i) {
+                var segment = route.segments[i];
+                if (segment.param) {
+                    var paramInfo = params.find(function (p) { return p.param == segment.param && p.index === i; });
+                    paramValues[segment.param.name] = paramInfo === null || paramInfo === void 0 ? void 0 : paramInfo.value;
                 }
+            };
+            for (var i = 0; i < route.segments.length; i++) {
+                _loop_1(i);
             }
+            return { route: route, path: path, params: paramValues };
         }
         return null;
     };
     RouteProvider.prototype.flatten = function (routes, parent) {
-        var _a, _b;
+        var _a, _b, _c;
         for (var _i = 0, routes_1 = routes; _i < routes_1.length; _i++) {
             var route = routes_1[_i];
-            var hasComponent = route.path !== undefined && route.component;
+            var baseRoute = (_a = route.baseRoute) !== null && _a !== void 0 ? _a : route;
+            var hasComponent = baseRoute.path !== undefined && baseRoute.component;
             if (hasComponent) {
                 if (parent && !route.breadCrumbParent) {
+                    baseRoute.breadCrumbParent = parent;
                     route.breadCrumbParent = parent;
                 }
-                this.processRoute(route);
+                this.processRoute(baseRoute);
             }
             var menuRoute = route;
-            var children = __spreadArray(__spreadArray([], ((_a = route.routeChildren) !== null && _a !== void 0 ? _a : []), true), ((_b = menuRoute.children) !== null && _b !== void 0 ? _b : []), true);
+            var children = __spreadArray(__spreadArray([], ((_b = route.routeChildren) !== null && _b !== void 0 ? _b : []), true), ((_c = menuRoute.children) !== null && _c !== void 0 ? _c : []), true);
             this.flatten(children, (hasComponent && menuRoute.showInBreadCrumb !== false) ? menuRoute : undefined);
         }
     };
@@ -104,25 +106,73 @@ var RouteProvider = /** @class */ (function () {
      */
     RouteProvider.prototype.processRoute = function (route) {
         var _a;
-        var processed = __assign(__assign({}, route), { path: route.path, params: [], order: 0 });
-        processed.path = (_a = route.basePath) !== null && _a !== void 0 ? _a : route.path;
-        processed.path = processed.path.toLowerCase();
-        if (processed.path.length > 1 && processed.path.endsWith("/")) {
-            processed.path = processed.path.substring(0, processed.path.length - 1);
+        // @ts-ignore
+        if (route[processedRouteSymbol]) {
+            return;
         }
-        if (processed.path.length > 1) {
-            processed.order = processed.path.split("/").length;
+        var processed = __assign(__assign({}, route), { defaultPath: ((_a = route.basePath) !== null && _a !== void 0 ? _a : route.path), routeParams: [], queryParams: [], segments: [], requiredSegments: 0 });
+        // @ts-ignore
+        route[processedRouteSymbol] = processed;
+        var normalizedPath = processed.defaultPath.toLowerCase();
+        var fullPath = normalizedPath;
+        var hasParamIdentifier = false;
+        if (normalizedPath.endsWith("/")) {
+            normalizedPath = normalizedPath.substring(0, normalizedPath.length - 1);
         }
         var viewBaseComponent = route.component;
         if (viewBaseComponent.params) {
             for (var param in viewBaseComponent.params) {
                 var routeParam = viewBaseComponent.params[param];
                 if (!routeParam.isQuery) {
-                    processed.params.push(__assign(__assign({}, routeParam), { name: param }));
+                    processed.routeParams.push(__assign(__assign({}, routeParam), { name: param }));
+                }
+                else {
+                    processed.queryParams.push(__assign(__assign({}, routeParam), { name: param }));
                 }
             }
         }
-        this.allRoutes.push(processed);
+        // Split the path into segments, and identify which segments are parameters.
+        var segmentValues = normalizedPath.split("/").slice(1);
+        var params = __spreadArray([], processed.routeParams, true);
+        var _loop_2 = function (segmentValue) {
+            var segment = { value: segmentValue };
+            processed.segments.push(segment);
+            if (segmentValue.startsWith(":")) {
+                hasParamIdentifier = true;
+                var paramName_1 = segmentValue.substring(1);
+                segment.param = processed.routeParams.find(function (p) { return p.name.toLowerCase() === paramName_1; });
+                if (segment.param) {
+                    params.remove(segment.param);
+                }
+                else {
+                    throw Error("Route parameter \"".concat(paramName_1, "\" in path \"").concat(processed.defaultPath, "\" does not have a corresponding view parameter definition."));
+                }
+            }
+            if (!segment.param || segment.param.required) {
+                processed.requiredSegments = processed.segments.length;
+            }
+        };
+        for (var _i = 0, segmentValues_1 = segmentValues; _i < segmentValues_1.length; _i++) {
+            var segmentValue = segmentValues_1[_i];
+            _loop_2(segmentValue);
+        }
+        // Params that aren't in the path are added as segments at the end of the path.
+        for (var _b = 0, params_1 = params; _b < params_1.length; _b++) {
+            var param = params_1[_b];
+            var segmentValue = ":".concat(param.name);
+            processed.segments.push({ value: segmentValue, param: param });
+            fullPath += "/".concat(segmentValue);
+            if (param.required) {
+                processed.requiredSegments = processed.segments.length;
+            }
+        }
+        if (hasParamIdentifier) {
+            processed.defaultPath = RouteHelper.hydrateRoute(processed, {});
+        }
+        if (!this.basePaths.has(fullPath)) {
+            this.basePaths.add(fullPath);
+            this.allRoutes.push(processed);
+        }
     };
     return RouteProvider;
 }());

package/dist/Routing/ViewParameter.d.ts

@@ -1,11 +1,11 @@
-import { IRouteParameter } from './IRouteParameter';
-import { IViewParameterListInternal } from './ViewParameterList';
+import { IRouteParameter, ValidParameterValue } from './IRouteParameter';
+import { IViewParameterList } from './ViewParameterList';
 import { Model } from '@singularsystems/neo-core';
 export interface IViewParameter {
     /**
      * Gets or sets the current parameter value.
      */
-    value: number | string | string[] | null;
+    value: ValidParameterValue;
     /**
      * Clears the value, replacing the url instead of adding to the history.
      * This prevents the back button returning the params to the current state.
@@ -42,7 +42,7 @@ export interface IViewParameter {
     /**
      * Allows this view parameter to automatically update when the value returned in the provided callback changes.
      */
-    bindTo(callback: () => (string | number | null | undefined)): void;
+    bindTo(callback: () => ValidParameterValue): void;
 }
 export declare class ViewParameter implements IViewParameter {
     private parent;
@@ -52,10 +52,10 @@ export declare class ViewParameter implements IViewParameter {
     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 | string[] | null;
-    set value(value: number | string | string[] | null);
+    constructor(parent: IViewParameterList, name: string, routeParameter: IRouteParameter);
+    bindTo(propertyOrCallback: Model.IPropertyInstance | (() => ValidParameterValue)): void;
+    get value(): ValidParameterValue;
+    set value(value: ValidParameterValue);
     reset(): void;
     _description: string;
     get description(): string;
@@ -66,17 +66,12 @@ export declare class ViewParameter implements IViewParameter {
     asStringList(): string[];
     /** Updates the current value, and returns true if the value changed. */
     update(value: string | null): boolean;
-    getParamString(state: {
-        hasQuery: boolean;
-    }): string;
-    get latestValue(): string | null;
-    private getStringValue;
 }
 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;
+    value?: ValidParameterValue;
     /** Custom link to use in the breadcrumb. */
     link?: string;
     /** Click event for the breadcrumb. */

package/dist/Routing/ViewParameter.js

@@ -1,5 +1,6 @@
 import { __decorate, __metadata } from "tslib";
 import { makeObservable, observable } from 'mobx';
+import { RouteHelper } from './RouteHelper';
 var ViewParameter = /** @class */ (function () {
     function ViewParameter(parent, name, routeParameter) {
         this.parent = parent;
@@ -15,22 +16,22 @@ var ViewParameter = /** @class */ (function () {
     ViewParameter.prototype.bindTo = function (propertyOrCallback) {
         var _this = this;
         if (propertyOrCallback.propertyInfo) {
-            this.parent.view.viewModel.registerReaction(function () { return propertyOrCallback.value; }, function (val) { return _this.value = val; });
+            this.parent._view.viewModel.registerReaction(function () { return propertyOrCallback.value; }, function (val) { return _this.value = val; });
         }
         else if (propertyOrCallback instanceof Function) {
-            this.parent.view.viewModel.registerReaction(propertyOrCallback, function (val) { return _this.value = val; });
+            this.parent._view.viewModel.registerReaction(propertyOrCallback, function (val) { return _this.value = val; });
         }
     };
     Object.defineProperty(ViewParameter.prototype, "value", {
         get: function () {
-            return this._value;
+            return this.hasPendingValue ? this.pendingValue : this._value;
         },
         set: function (value) {
-            var stringValue = this.getStringValue(value);
+            var stringValue = RouteHelper.stringifyValue(value);
             if (stringValue !== this._value) {
                 this.hasPendingValue = true;
                 this.pendingValue = stringValue;
-                this.parent.setUrl(this);
+                this.parent.setUrl(this, value);
             }
         },
         enumerable: false,
@@ -40,7 +41,7 @@ var ViewParameter = /** @class */ (function () {
         if (this._value) {
             this.hasPendingValue = true;
             this.pendingValue = null;
-            this.parent.setUrl(this, true);
+            this.parent.setUrl(this, null, true);
         }
     };
     Object.defineProperty(ViewParameter.prototype, "description", {
@@ -94,36 +95,6 @@ var ViewParameter = /** @class */ (function () {
         }
         return false;
     };
-    ViewParameter.prototype.getParamString = function (state) {
-        var value = this.latestValue;
-        if (value) {
-            value = encodeURIComponent(value);
-            if (this.routeParameter.isQuery) {
-                var hasQuery = state.hasQuery;
-                state.hasQuery = true;
-                return (!hasQuery ? "?" : "&") + this.name + "=" + value;
-            }
-            else {
-                return "/" + value;
-            }
-        }
-        return this.routeParameter.isQuery ? "" : "/";
-    };
-    Object.defineProperty(ViewParameter.prototype, "latestValue", {
-        get: function () {
-            return this.hasPendingValue ? this.pendingValue : this._value;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    ViewParameter.prototype.getStringValue = function (value) {
-        if (value instanceof Array) {
-            return value.join(",");
-        }
-        else {
-            return value ? value.toString() : null;
-        }
-    };
     __decorate([
         observable.ref,
         __metadata("design:type", String)

package/dist/Routing/ViewParameterList.d.ts

@@ -1,8 +1,9 @@
 import { ViewParameter, IViewParameter } from './ViewParameter';
-import { RouteParameterObject } from './IRouteParameter';
+import { RouteParameterObject, ParamValues, ValidParameterValue } from './IRouteParameter';
 import { BreadCrumbItem } from './BreadCrumbItem';
 import { IViewBase } from '../Views/ViewBase';
-import { ParamValues } from "./NavigationHelper";
+import { IProcessedRoute } from "./RouteProvider";
+import { INavigationHelper } from './NavigationHelper';
 export type TransformParamsType<T> = {
     [P in keyof T]: IViewParameter;
 };
@@ -16,39 +17,24 @@ export interface IViewParameterList {
     /**
      * Returns the breadcrumb items for all url parameters which have a value.
      */
-    getBreadCrumbList(upTo?: ViewParameter): BreadCrumbItem[];
+    getBreadCrumbList(): BreadCrumbItem[];
 }
 export interface IViewParameterListOfT<TParams extends RouteParameterObject<TParams>> extends IViewParameterList {
     /**
      * Set the view params for each of the provided values. Only 1 navigation event will occur.
      * @param values New values.
      */
-    setValues(values: {
-        [P in keyof TParams]?: number | string | string[] | null;
-    }, options?: ISetValuesOptions | boolean): void;
+    setValues(values: ParamValues<TParams>, options?: ISetValuesOptions | boolean): void;
 }
-export interface IViewParameterListInternal extends IViewParameterList {
-    setUrl(viewParameter: ViewParameter | null, replace?: boolean): void;
-    view?: IViewBase;
-}
-export declare class ViewParameterList<TParams extends RouteParameterObject<TParams>> implements IViewParameterListInternal, IViewParameterListOfT<TParams> {
-    readonly view?: IViewBase | undefined;
+export declare class ViewParameterList<TParams extends RouteParameterObject<TParams>> implements IViewParameterListOfT<TParams> {
+    private _processedRoute;
+    private _navigationHelper;
+    readonly _view?: IViewBase | undefined;
     readonly params: ViewParameter[];
-    private suppressNavigation;
-    private hasSuppressedNavigation;
-    constructor(routeParameterObject: TParams, view?: IViewBase | undefined);
-    getBreadCrumbList(upTo?: ViewParameter): BreadCrumbItem[];
-    private getQueryString;
-    setValues(values: {
-        [P in keyof TParams]?: number | string | string[] | null;
-    }, options?: ISetValuesOptions | boolean): void;
-    setUrl(viewParameter: ViewParameter | null, replace?: boolean): void;
-    getUrl(viewParameter: ViewParameter): string | undefined;
-    /**
-     * Gets a url for an object with view params specified.
-     * @param basePath Base path without parameters
-     * @param values Object of param names and values.
-     */
-    static getPathForValues<TParams extends RouteParameterObject<TParams>>(basePath: string, params: TParams, values: ParamValues<TParams>): string;
+    constructor(_processedRoute: IProcessedRoute, _navigationHelper: INavigationHelper, _view?: IViewBase | undefined);
+    getBreadCrumbList(): BreadCrumbItem[];
+    setValues(values: ParamValues<TParams>, options?: ISetValuesOptions | boolean): void;
+    setUrl(viewParameter: ViewParameter | null, newValue: ValidParameterValue, replace?: boolean): void;
+    private navigate;
 }
 export {};

package/dist/Routing/ViewParameterList.js

@@ -1,123 +1,112 @@
+import { __spreadArray } from "tslib";
 import { ViewParameter } from './ViewParameter';
 import { BreadCrumbSelectMode } from './IRouteParameter';
 import { BreadCrumbItem } from './BreadCrumbItem';
-import { Misc } from '@singularsystems/neo-core';
-import { NeoReactTypes } from '../Modules/Types';
+import { RouteHelper } from './RouteHelper';
 var ViewParameterList = /** @class */ (function () {
-    function ViewParameterList(routeParameterObject, view) {
-        this.view = view;
+    function ViewParameterList(_processedRoute, _navigationHelper, _view) {
+        this._processedRoute = _processedRoute;
+        this._navigationHelper = _navigationHelper;
+        this._view = _view;
         this.params = [];
-        this.suppressNavigation = false;
-        this.hasSuppressedNavigation = false;
-        if (routeParameterObject) {
-            for (var param in routeParameterObject) {
-                var viewParam = new ViewParameter(this, param, routeParameterObject[param]);
-                //@ts-ignore
-                this[param] = viewParam;
-                this.params.push(viewParam);
-            }
+        for (var _i = 0, _a = __spreadArray(__spreadArray([], _processedRoute.routeParams, true), _processedRoute.queryParams, true); _i < _a.length; _i++) {
+            var param = _a[_i];
+            var viewParam = new ViewParameter(this, param.name, param);
+            //@ts-ignore
+            this[param.name] = viewParam;
+            this.params.push(viewParam);
         }
     }
-    ViewParameterList.prototype.getBreadCrumbList = function (upTo) {
+    ViewParameterList.prototype.getBreadCrumbList = function () {
         var _a;
-        var basePath = Misc.Globals.appService.get(NeoReactTypes.Routing.NavigationHelper).getCurrentViewPath();
         var breadCrumbs = [];
-        var state = { hasQuery: false };
-        var queryPath = this.getQueryString(state);
-        var paramPath = basePath;
-        var selectablePath = basePath;
+        var values = {};
         for (var _i = 0, _b = this.params; _i < _b.length; _i++) {
-            var viewParam = _b[_i];
+            var param = _b[_i];
+            if (param.routeParameter.isQuery) {
+                values[param.name] = param.value;
+            }
+        }
+        var queryPath = RouteHelper.getQueryString(this._processedRoute, values);
+        var paramPath;
+        var selectablePath;
+        for (var _c = 0, _d = this.params; _c < _d.length; _c++) {
+            var viewParam = _d[_c];
             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);
+                for (var _e = 0, _f = viewParam.prefixes; _e < _f.length; _e++) {
+                    var prefix = _f[_e];
+                    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) {
+                        values[viewParam.name] = prefix.value;
+                        breadcrumbItem.link = RouteHelper.hydrateRoute(this._processedRoute, values, false);
+                    }
+                    breadCrumbs.push(breadcrumbItem);
                 }
-                paramPath += viewParam.getParamString(state);
+                values[viewParam.name] = viewParam.value;
+                paramPath = RouteHelper.hydrateRoute(this._processedRoute, values, false);
                 if (((_a = viewParam.routeParameter.selection) !== null && _a !== void 0 ? _a : BreadCrumbSelectMode.Default) === BreadCrumbSelectMode.Default) {
                     selectablePath = paramPath;
                 }
-                if (viewParam.description || (upTo && viewParam.latestValue !== null)) {
-                    breadCrumbs.push(new BreadCrumbItem(viewParam.description, (!upTo && viewParam.routeParameter.selection === BreadCrumbSelectMode.None) ? "" : (selectablePath + queryPath)));
+                if (viewParam.description || viewParam.value !== null) {
+                    breadCrumbs.push(new BreadCrumbItem(viewParam.description, (viewParam.routeParameter.selection === BreadCrumbSelectMode.None) ? "" : (selectablePath + queryPath)));
                 }
             }
-            if (upTo && upTo === viewParam) {
-                break;
-            }
-        }
-        if (breadCrumbs.length === 0 && state.hasQuery) {
-            breadCrumbs.push(new BreadCrumbItem("", basePath + queryPath));
         }
         return breadCrumbs;
     };
-    ViewParameterList.prototype.getQueryString = function (state) {
-        var queryPath = "";
-        for (var _i = 0, _a = this.params; _i < _a.length; _i++) {
-            var viewParam = _a[_i];
-            if (viewParam.routeParameter.isQuery) {
-                queryPath += viewParam.getParamString(state);
-            }
-        }
-        return queryPath;
-    };
     ViewParameterList.prototype.setValues = function (values, options) {
-        var _a;
-        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) {
-            //@ts-ignore
-            this[paramName].value = (_a = values[paramName]) !== null && _a !== void 0 ? _a : null;
+        var hasChange = false;
+        var newValues = {};
+        for (var _i = 0, _a = this.params; _i < _a.length; _i++) {
+            var param = _a[_i];
+            var hasNewValue = values[param.name] !== undefined;
+            var newValue = RouteHelper.stringifyValue(values[param.name]);
+            if (hasNewValue && newValue != param.value) {
+                hasChange = true;
+            }
+            newValues[param.name] = hasNewValue ? newValue : param.value;
         }
-        this.suppressNavigation = false;
-        if (this.hasSuppressedNavigation || options.force) {
-            this.setUrl(this.params[this.params.length - 1], options.replace);
+        if (hasChange || options.force) {
+            this.navigate(newValues, options.replace);
         }
     };
-    ViewParameterList.prototype.setUrl = function (viewParameter, replace) {
+    ViewParameterList.prototype.setUrl = function (viewParameter, newValue, replace) {
         if (replace === void 0) { replace = false; }
-        if (this.suppressNavigation) {
-            this.hasSuppressedNavigation = true;
-        }
-        else {
-            var navigationHelper = Misc.Globals.appService.get(NeoReactTypes.Routing.NavigationHelper);
-            if (viewParameter) {
-                var url = this.getUrl(viewParameter);
-                if (url) {
-                    navigationHelper.navigateInternal(url, replace);
-                    return;
+        var canAdd = true;
+        var newValues = {};
+        for (var _i = 0, _a = this.params; _i < _a.length; _i++) {
+            var param = _a[_i];
+            if (canAdd || param.routeParameter.isQuery) {
+                if (param === viewParameter) {
+                    newValues[param.name] = newValue;
+                    canAdd = false;
+                }
+                else {
+                    newValues[param.name] = param.value;
                 }
             }
-            navigationHelper.navigateInternal(navigationHelper.getCurrentViewPath(), replace);
         }
+        this.navigate(newValues, replace);
     };
-    ViewParameterList.prototype.getUrl = function (viewParameter) {
-        var allItems = this.getBreadCrumbList(viewParameter);
-        if (allItems.length > 0) {
-            return allItems[allItems.length - 1].link;
-        }
-        return undefined;
+    ViewParameterList.prototype.navigate = function (values, replace) {
+        var path = RouteHelper.hydrateRoute(this._processedRoute, values);
+        this._navigationHelper.navigateInternal(path, replace);
     };
     /**
      * @internal
      * Updates the parameter values from the values in the url. Returns true if any of the values have changed.
      */
-    ViewParameterList.prototype.update = function (match) {
+    ViewParameterList.prototype.update = function (match, queryString) {
         var hasChanged = false;
         //Get url params
         for (var param in match.params) {
@@ -130,7 +119,7 @@ var ViewParameterList = /** @class */ (function () {
             }
         }
         //Get query params
-        var queryParams = new URLSearchParams(location.search);
+        var queryParams = new URLSearchParams(queryString);
         for (var _i = 0, _a = this.params; _i < _a.length; _i++) {
             var viewParam = _a[_i];
             if (viewParam.routeParameter.isQuery) {
@@ -140,39 +129,6 @@ var ViewParameterList = /** @class */ (function () {
         }
         return hasChanged;
     };
-    /**
-     * Gets a url for an object with view params specified.
-     * @param basePath Base path without parameters
-     * @param values Object of param names and values.
-     */
-    ViewParameterList.getPathForValues = function (basePath, params, values) {
-        // TODO: This needs a rework.
-        var viewParameterList = new ViewParameterList(params);
-        for (var name_1 in values) {
-            //@ts-ignore
-            var viewParam = viewParameterList[name_1];
-            if (viewParam) {
-                var value = values[name_1];
-                if (value === undefined)
-                    value = null;
-                if (typeof value === "number") {
-                    value = value.toString();
-                }
-                viewParam.update(value);
-            }
-        }
-        var state = { hasQuery: false };
-        var paramPath = basePath;
-        for (var _i = 0, _a = viewParameterList.params.filter(function (c) { return !c.routeParameter.isQuery; }); _i < _a.length; _i++) {
-            var viewParam = _a[_i];
-            paramPath += viewParam.getParamString(state);
-        }
-        // trim trailing slashes
-        while (paramPath.endsWith("/")) {
-            paramPath = paramPath.substring(0, paramPath.length - 1);
-        }
-        return paramPath + viewParameterList.getQueryString(state);
-    };
     return ViewParameterList;
 }());
 export { ViewParameterList };

package/dist/Views/ViewBase.js

@@ -68,8 +68,7 @@ var ViewBase = /** @class */ (function (_super) {
         return this.createViewState(viewModel);
     };
     ViewBase.prototype.createViewState = function (viewModel) {
-        var params = this.constructor.params;
-        var paramsList = new ViewParameterList(params, this);
+        var paramsList = new ViewParameterList(this.routingState.currentRoute.route, this.navigation, this);
         var viewModelInstance = ViewModelBase.create(viewModel);
         return new ViewState(paramsList, viewModelInstance);
     };
@@ -79,7 +78,7 @@ var ViewBase = /** @class */ (function (_super) {
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
-                        paramsUpdated = this.routingState.currentRoute ? (this.viewState.viewParams).update(this.routingState.currentRoute) : false;
+                        paramsUpdated = this.routingState.currentRoute ? (this.viewState.viewParams).update(this.routingState.currentRoute, location.search) : false;
                         if (!!this.viewState.hasSetup) return [3 /*break*/, 2];
                         this.viewState.hasSetup = true;
                         return [4 /*yield*/, this.initialise()];
@@ -108,7 +107,7 @@ var ViewBase = /** @class */ (function (_super) {
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
-                        if (!(this.viewState.viewParams).update(match)) return [3 /*break*/, 2];
+                        if (!(this.viewState.viewParams).update(match, location.search)) return [3 /*break*/, 2];
                         return [4 /*yield*/, this.viewParamsUpdated()];
                     case 1:
                         _a.sent();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@singularsystems/neo-react",
-  "version": "1.5.0",
+  "version": "1.6.1",
   "description": "React application logic and components for the Neo client library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -27,7 +27,7 @@
     "typescript": "5.9.3"
   },
   "dependencies": {
-    "@singularsystems/neo-core": "1.4.1",
+    "@singularsystems/neo-core": "1.6.1",
     "@types/react-color": "3.0.13",
     "axios": "1.13.5",
     "inversify": "6.0.2",

package/styles/Forms.scss

@@ -65,7 +65,7 @@ div.neo-form-group-floating {
             transform: scale(1);
         }
         label.neo-floating-label {
-            color: color.adjust($input-focus-border-color, $lightness: -15%);
+            color: mix($input-focus-border-color, black, 85%);
         }
         .neo-forms-editor {
             border-bottom: 1px solid $input-focus-border-color;