@wavemaker-ai/react-runtime 1.0.0-rc.309

package/higherOrder/BasePartial.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { MockApp, ProxyTarget } from "@wavemaker-ai/react-runtime/types";
+export declare const BasePartial: <P extends object>(WrappedComponent: React.ComponentType<P>, addPageScript: (app: MockApp, pageProxy: ProxyTarget) => void, getVariables: (pageProxy: ProxyTarget) => {
+    Variables: Record<string, any>;
+    Actions: Record<string, any>;
+}, componentInfo?: any) => React.MemoExoticComponent<(props: any) => import("react/jsx-runtime").JSX.Element>;
+export default BasePartial;

package/higherOrder/BasePartial.js

@@ -0,0 +1,125 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.BasePartial = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _react = _interopRequireWildcard(require("react"));
+var _store = require("@wavemaker-ai/react-runtime/store");
+var _merge = _interopRequireDefault(require("lodash-es/merge"));
+var _BasePage = _interopRequireDefault(require("@wavemaker-ai/react-runtime/higherOrder/BasePage"));
+var _appstore = _interopRequireDefault(require("@wavemaker-ai/react-runtime/core/appstore"));
+var _appConfigSlice = require("@wavemaker-ai/react-runtime/store/slices/appConfigSlice");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
+var __jsx = _react["default"].createElement;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var BasePartial = exports.BasePartial = function BasePartial(WrappedComponent, addPageScript, getVariables, componentInfo) {
+  var BasePartialWrapper = function BasePartialWrapper(props) {
+    var _info$appConfig, _i18n$prefabMessages;
+    var prefabName = props.prefabName;
+    var dispatch = (0, _store.useAppDispatch)();
+    var info = (0, _store.useAppSelector)(function (state) {
+      return state.info;
+    });
+    var i18n = (0, _store.useAppSelector)(function (state) {
+      return state.i18n;
+    });
+
+    // Get prefab definitions from state if available
+    var prefabDefinitions = (0, _store.useAppSelector)(function (state) {
+      return state.info.prefabs[prefabName] ? state.info.prefabs[prefabName].serviceDefs : {};
+    });
+    var _useState = (0, _react.useState)(true),
+      loading = _useState[0],
+      setLoading = _useState[1];
+    var _useState2 = (0, _react.useState)(prefabDefinitions || {}),
+      serviceDefs = _useState2[0],
+      setServiceDefs = _useState2[1];
+    var baseUrl = info !== null && info !== void 0 && (_info$appConfig = info.appConfig) !== null && _info$appConfig !== void 0 && _info$appConfig.url ? "".concat(info.appConfig.url, "/services/prefabs/").concat(prefabName, "/servicedefs") : "";
+    var appLocale = (0, _merge["default"])({}, (i18n === null || i18n === void 0 ? void 0 : i18n.appLocale) || {}, (i18n === null || i18n === void 0 || (_i18n$prefabMessages = i18n.prefabMessages) === null || _i18n$prefabMessages === void 0 ? void 0 : _i18n$prefabMessages[prefabName]) || {});
+
+    // Fetch service definitions when component mounts only if not already in state
+    (0, _react.useEffect)(function () {
+      // Skip fetching if we already have the definitions in state
+      if (prefabDefinitions || !baseUrl) {
+        setLoading(false);
+        return;
+      }
+      var fetchServiceDefs = /*#__PURE__*/function () {
+        var _ref = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
+          var _componentInfo$partia, response;
+          return _regenerator["default"].wrap(function _callee$(_context) {
+            while (1) switch (_context.prev = _context.next) {
+              case 0:
+                if (baseUrl) {
+                  _context.next = 4;
+                  break;
+                }
+                console.warn("Base URL is not available");
+                setLoading(false);
+                return _context.abrupt("return");
+              case 4:
+                _context.prev = 4;
+                _context.next = 7;
+                return dispatch((0, _appConfigSlice.getPrefabDefinitions)({
+                  prefabName: prefabName,
+                  baseUrl: baseUrl,
+                  pages: (_componentInfo$partia = componentInfo === null || componentInfo === void 0 ? void 0 : componentInfo.partials) !== null && _componentInfo$partia !== void 0 ? _componentInfo$partia : []
+                })).unwrap();
+              case 7:
+                response = _context.sent;
+                setServiceDefs(response || {});
+                _appstore["default"].set("".concat(prefabName, "-partials"), {
+                  partials: componentInfo.partials
+                });
+                _context.next = 15;
+                break;
+              case 12:
+                _context.prev = 12;
+                _context.t0 = _context["catch"](4);
+                console.error("Failed to fetch service definitions:", _context.t0);
+              case 15:
+                _context.prev = 15;
+                setLoading(false);
+                return _context.finish(15);
+              case 18:
+              case "end":
+                return _context.stop();
+            }
+          }, _callee, null, [[4, 12, 15, 18]]);
+        }));
+        return function fetchServiceDefs() {
+          return _ref.apply(this, arguments);
+        };
+      }();
+      fetchServiceDefs();
+    }, [baseUrl, prefabDefinitions, prefabName]);
+    if (loading) {
+      return __jsx("div", null, "Loading....");
+    }
+    var FragmentConsumer = function FragmentConsumer(fragmentProps) {
+      var combinedProps = _objectSpread(_objectSpread({}, props), fragmentProps);
+      return __jsx(WrappedComponent, combinedProps);
+    };
+
+    // Apply BasePage HOC to our FragmentConsumer
+    var EnhancedComponent = (0, _BasePage["default"])(FragmentConsumer, addPageScript, getVariables, componentInfo, {
+      serviceDefs: serviceDefs,
+      appLocale: appLocale,
+      baseUrl: baseUrl || "",
+      Prefab: true,
+      prefabName: prefabName
+    });
+    return __jsx(EnhancedComponent, props);
+  };
+  return /*#__PURE__*/_react["default"].memo(BasePartialWrapper);
+};
+
+// Export the BasePrefab function as the default export
+var _default = exports["default"] = BasePartial;

package/higherOrder/BasePrefab.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import { MockApp, ProxyTarget } from "@wavemaker-ai/react-runtime/types";
+interface ComponentInfo {
+    type: "PARTIAL" | "PREFAB";
+    componentName: string;
+    partials: any[];
+    pages: any[];
+    prefabInfo: any;
+    componentType: "PREFAB" | "PAGE";
+}
+export declare const BasePrefab: <P extends object>(WrappedComponent: React.ComponentType<P>, addPageScript: (app: MockApp, pageProxy: ProxyTarget) => void, getVariables: (pageProxy: ProxyTarget) => {
+    Variables: Record<string, any>;
+    Actions: Record<string, any>;
+}, componentInfo?: ComponentInfo) => React.ComponentType<{
+    [x: string]: any;
+}>;
+export default BasePrefab;

package/higherOrder/BasePrefab.js

@@ -0,0 +1,234 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.BasePrefab = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _store = require("@wavemaker-ai/react-runtime/store");
+var _merge = _interopRequireDefault(require("lodash-es/merge"));
+var _BasePage = _interopRequireDefault(require("@wavemaker-ai/react-runtime/higherOrder/BasePage"));
+var _appstore = _interopRequireDefault(require("@wavemaker-ai/react-runtime/core/appstore"));
+var _appConfigSlice = require("@wavemaker-ai/react-runtime/store/slices/appConfigSlice");
+var _PrefabContext = _interopRequireDefault(require("@wavemaker-ai/react-runtime/context/PrefabContext"));
+var _spinner = require("../components/basic/spinner");
+var _withBaseWrapper = _interopRequireDefault(require("./withBaseWrapper"));
+var _metadata = require("@wavemaker-ai/react-runtime/variables/metadata.service");
+var _formContext = require("@wavemaker-ai/react-runtime/components/data/form/form-context");
+var _excluded = ["pages", "partials", "componentType"];
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
+var __jsx = _react["default"].createElement;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var BasePrefab = exports.BasePrefab = function BasePrefab(WrappedComponent, addPageScript, getVariables, componentInfo) {
+  // Create a wrapper component to handle data fetching
+  var BasePrefabWrapper = /*#__PURE__*/(0, _react.memo)(function (props) {
+    var _i18n$prefabMessages;
+    var prefabname = props.prefabname;
+    var _ref = componentInfo || {},
+      pages = _ref.pages,
+      partials = _ref.partials,
+      componentType = _ref.componentType,
+      rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+    /** When preview passes `prefabname=""` for app-context metadata, keep bundle identity from codegen. */
+    var bundleId = prefabname || (componentInfo === null || componentInfo === void 0 ? void 0 : componentInfo.componentName) || "";
+    var dispatch = (0, _store.useAppDispatch)();
+    var appConfig = (0, _store.useAppSelector)(function (state) {
+      return state.info.appConfig;
+    });
+    var i18n = (0, _store.useAppSelector)(function (state) {
+      return state.i18n;
+    });
+    var isServiceDefsLoading = (0, _react.useRef)(false);
+    // Cached payload from getPrefabDefinitions (stored under `info.prefabs[prefabName]`)
+    var prefabDefinitions = (0, _store.useAppSelector)(function (state) {
+      var _state$info, _prefabs$prefabname;
+      var prefabs = (_state$info = state.info) === null || _state$info === void 0 ? void 0 : _state$info.prefabs;
+      return (_prefabs$prefabname = prefabs === null || prefabs === void 0 ? void 0 : prefabs[prefabname]) !== null && _prefabs$prefabname !== void 0 ? _prefabs$prefabname : null;
+    });
+    var _useState = (0, _react.useState)(prefabDefinitions ? false : true),
+      loading = _useState[0],
+      setLoading = _useState[1];
+    var _useState2 = (0, _react.useState)(prefabDefinitions || {}),
+      serviceDefs = _useState2[0],
+      setServiceDefs = _useState2[1];
+    var baseUrl = (appConfig === null || appConfig === void 0 ? void 0 : appConfig.url) || "";
+    var fetchServiceDefs = /*#__PURE__*/function () {
+      var _ref2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
+        var response;
+        return _regenerator["default"].wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              if (baseUrl) {
+                _context.next = 4;
+                break;
+              }
+              console.warn("Base URL is not available");
+              setLoading(false);
+              return _context.abrupt("return");
+            case 4:
+              _context.prev = 4;
+              isServiceDefsLoading.current = true;
+              // Dispatch Redux action to store in state
+              _context.next = 8;
+              return dispatch((0, _appConfigSlice.getPrefabDefinitions)({
+                prefabName: prefabname,
+                baseUrl: baseUrl,
+                pages: pages || []
+              })).unwrap();
+            case 8:
+              response = _context.sent;
+              setServiceDefs(response || {});
+              _metadata.metadataService.setMetadata((response === null || response === void 0 ? void 0 : response.serviceDefs) || {}, prefabname);
+              _appstore["default"].set("".concat(bundleId, "-partials"), {
+                partials: partials || []
+              });
+              // Call metadata service's load method to set metadata with correct base URL
+              // This is equivalent to Angular's this.$metadata.load(prefabName)
+              _context.next = 14;
+              return _metadata.metadataService.load(prefabname, baseUrl);
+            case 14:
+              _context.next = 19;
+              break;
+            case 16:
+              _context.prev = 16;
+              _context.t0 = _context["catch"](4);
+              console.error("Failed to fetch service definitions:", _context.t0);
+            case 19:
+              _context.prev = 19;
+              setLoading(false);
+              return _context.finish(19);
+            case 22:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, null, [[4, 16, 19, 22]]);
+      }));
+      return function fetchServiceDefs() {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+    // Fetch service definitions when component mounts only if not already in state
+    (0, _react.useEffect)(function () {
+      // Skip fetching if we already have the definitions in state
+      if (prefabDefinitions || !baseUrl) {
+        _metadata.metadataService.setMetadata(prefabDefinitions || {}, prefabname);
+        setLoading(false);
+        return;
+      }
+      if (isServiceDefsLoading.current) {
+        return;
+      }
+      fetchServiceDefs();
+    }, [baseUrl, prefabname, dispatch, prefabDefinitions]);
+    if (prefabname == null) {
+      return null;
+    }
+    if (loading) {
+      return __jsx(_spinner.WmSpinner, {
+        show: true,
+        className: "baseprefab-spinner",
+        name: "baseprefab-spinner",
+        listener: {}
+      });
+    }
+    var appLocale = (0, _merge["default"])({}, (i18n === null || i18n === void 0 ? void 0 : i18n.appLocale) || {}, (i18n === null || i18n === void 0 || (_i18n$prefabMessages = i18n.prefabMessages) === null || _i18n$prefabMessages === void 0 ? void 0 : _i18n$prefabMessages[bundleId]) || {});
+    var FragmentConsumer = function FragmentConsumer(fragmentProps) {
+      var combinedProps = _objectSpread(_objectSpread({}, props), fragmentProps);
+      return __jsx(WrappedComponent, combinedProps);
+    };
+
+    // Apply BasePage HOC to our FragmentConsumer
+    var EnhancedComponent = (0, _BasePage["default"])(FragmentConsumer, addPageScript, getVariables, // @ts-expect-error
+    _objectSpread(_objectSpread({}, rest), {}, {
+      componentName: bundleId,
+      componentType: componentType
+    }), _objectSpread({
+      serviceDefs: (serviceDefs === null || serviceDefs === void 0 ? void 0 : serviceDefs.serviceDefs) || {},
+      appLocale: appLocale,
+      prefab: true,
+      prefabName: bundleId,
+      name: props.name
+    }, props.outbound));
+    return __jsx(_react["default"].Fragment, null, __jsx(EnhancedComponent, props));
+  }, function (next, prev) {
+    return next.prefabname === prev.prefabname;
+  });
+  BasePrefabWrapper.displayName = "BasePrefabWrapper";
+  var BasePrefabWithProvider = function BasePrefabWithProvider(props) {
+    var _props$formArrayIndex2;
+    // Capture parent's form context BEFORE new WidgetProvider (via BasePage) breaks it
+    // This allows forms inside prefabs to communicate with parent forms
+    var parentFormContext = (0, _formContext.useParentFormData)();
+
+    // Build prefab-specific context that:
+    // 1. Passes through callbacks from parent for upward data flow
+    // 2. Uses prefab's name as the data path for the form inside
+    // 3. Extracts child data from parent's formdata at prefab name
+    // Extract the specific data for this prefab from parent's formdata
+    // For prefabs inside a list, use parentListName with array index
+    var prefabData = (0, _react.useMemo)(function () {
+      if (!(parentFormContext !== null && parentFormContext !== void 0 && parentFormContext.formdata)) return undefined;
+      if (props.isParentList && props.parentListName) {
+        var listData = parentFormContext.formdata[props.parentListName];
+        if (Array.isArray(listData) && props.formArrayIndex !== undefined && props.formArrayIndex >= 0) {
+          return listData[props.formArrayIndex];
+        }
+        return undefined;
+      }
+
+      // For non-list prefabs, use the prefab name as key
+      return parentFormContext.formdata[props.name];
+    }, [parentFormContext === null || parentFormContext === void 0 ? void 0 : parentFormContext.formdata, props.isParentList, props.parentListName, props.formArrayIndex, props.name]);
+    var prefabFormContext = (0, _react.useMemo)(function () {
+      // Only create prefab context if there's a parent form relationship
+      if (!parentFormContext || !props.parentForm) return null;
+
+      // Build the correct data path for this prefab
+      // If prefab is inside a list, use parentListName with array index
+      var currentPath = props.name;
+      if (props.isParentList && props.parentListName) {
+        var _props$formArrayIndex;
+        var idx = (_props$formArrayIndex = props.formArrayIndex) !== null && _props$formArrayIndex !== void 0 ? _props$formArrayIndex : -1;
+        currentPath = idx >= 0 ? "".concat(props.parentListName, "[").concat(idx, "]") : props.parentListName;
+      }
+      var computedParentDataPath = parentFormContext.parentDataPath ? "".concat(parentFormContext.parentDataPath, ".").concat(currentPath) : currentPath;
+      return {
+        // Extract child data: parent.formdata.address -> prefab form's data
+        formdata: prefabData,
+        formName: props.name,
+        // Pass along the root parent form (or use the explicit parent if no root set)
+        rootParentForm: parentFormContext.rootParentForm || props.parentForm,
+        // Build data path with correct list handling
+        parentDataPath: computedParentDataPath,
+        // Pass through callbacks for child forms to send data UP to root
+        onChildDataChange: parentFormContext.onChildDataChange,
+        registerChildField: parentFormContext.registerChildField
+      };
+    }, [parentFormContext === null || parentFormContext === void 0 ? void 0 : parentFormContext.rootParentForm, parentFormContext === null || parentFormContext === void 0 ? void 0 : parentFormContext.parentDataPath, parentFormContext === null || parentFormContext === void 0 ? void 0 : parentFormContext.onChildDataChange, parentFormContext === null || parentFormContext === void 0 ? void 0 : parentFormContext.registerChildField, prefabData, props.parentForm, props.name, props.isParentList, props.parentListName, props.formArrayIndex]);
+    return __jsx(_react.Activity, {
+      mode: props.hidden ? "hidden" : "visible"
+    }, __jsx(_PrefabContext["default"], {
+      value: {
+        inbound: props.inbound || {},
+        outbound: props.outbound || {},
+        prefabName: props.name,
+        parentForm: props.parentForm,
+        isParentList: props.isParentList,
+        formArrayIndex: (_props$formArrayIndex2 = props.formArrayIndex) !== null && _props$formArrayIndex2 !== void 0 ? _props$formArrayIndex2 : -1,
+        parentListName: props.parentListName
+      }
+    }, __jsx(_formContext.ParentFormDataContext.Provider, {
+      value: prefabFormContext
+    }, __jsx(BasePrefabWrapper, props))));
+  };
+  BasePrefabWithProvider.displayName = "BasePrefabWithProvider";
+  return (0, _withBaseWrapper["default"])(BasePrefabWithProvider);
+};
+var _default = exports["default"] = BasePrefab;

package/higherOrder/DataNav.d.ts

@@ -0,0 +1,53 @@
+import React from "react";
+import { BaseProps } from "@wavemaker-ai/react-runtime/higherOrder/withBaseWrapper";
+interface NavigationProps extends BaseProps {
+    dataset?: any[];
+    itemicon?: string;
+    itemlabel?: string;
+    itemhint?: string;
+    itemlink?: string;
+    itemtarget?: string;
+    itembadge?: string;
+    itemchildren?: string;
+    itemaction?: string;
+    itemclass?: string;
+    itemid?: string;
+    isactive?: string;
+    userrole?: string;
+    orderby?: string;
+    datafield?: string;
+    displayfield?: string;
+    navNodes?: Array<NavNode>;
+    resetNavNodes?: () => void;
+    styles?: any;
+    className?: string;
+}
+type DatasetAwareNavProps = NavigationProps & BaseProps;
+interface NavNode {
+    label: string;
+    action?: any;
+    badge?: string;
+    children?: Array<NavNode>;
+    class?: string;
+    disabled?: boolean;
+    icon?: string;
+    id?: string;
+    link?: string;
+    hint?: string;
+    target?: string;
+    role?: string;
+    value?: any;
+    isactive?: boolean;
+    expanded?: boolean;
+}
+declare const handleNavigation: (item: NavNode, event: React.MouseEvent, options?: {
+    onBeforenavigate?: (event: {
+        $event: React.MouseEvent;
+        $item: any;
+    }) => boolean | void;
+    defaultTarget?: string;
+}) => void;
+declare const withDatasetAwareNavigation: <P extends DatasetAwareNavProps>(WrappedComponent: React.ComponentType<P>) => React.ComponentType<BaseProps>;
+export type { DatasetAwareNavProps, NavNode };
+export { handleNavigation };
+export default withDatasetAwareNavigation;