@wavemaker/react-runtime 11.14.2-rc.6311 → 12.0.0-next.28533

package/components/input/select/index.js

@@ -6,9 +6,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _react = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _NativeSelect = _interopRequireDefault(require("@mui/material/NativeSelect"));
@@ -21,7 +23,7 @@ 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 WmSelect = /*#__PURE__*/_react["default"].memo(function (props) {
-  var _ref;
+  var _ref2, _isLocalDatavalueObje;
   var autofocus = props.autofocus,
     className = props.className,
     _props$datafield = props.datafield,
@@ -30,7 +32,7 @@ var WmSelect = /*#__PURE__*/_react["default"].memo(function (props) {
     datavalue = props.datavalue,
     _props$disabled = props.disabled,
     disabled = _props$disabled === void 0 ? false : _props$disabled,
-    displayexpression = props.displayexpression,
+    displayExpression = props.displayExpression,
     displaylabel = props.displaylabel,
     _props$displayfield = props.displayfield,
     displayfield = _props$displayfield === void 0 ? "value" : _props$displayfield,
@@ -52,6 +54,7 @@ var WmSelect = /*#__PURE__*/_react["default"].memo(function (props) {
     listener = props.listener,
     _props$tabindex = props.tabindex,
     tabindex = _props$tabindex === void 0 ? 0 : _props$tabindex,
+    match = props.match,
     onClick = props.onClick,
     onChange = props.onChange,
     onBlur = props.onBlur,
@@ -81,7 +84,9 @@ var WmSelect = /*#__PURE__*/_react["default"].memo(function (props) {
   var _useState6 = (0, _react.useState)(datavalue),
     prevDatavalue = _useState6[0],
     setPrevDatavalue = _useState6[1];
-  var transformedDataset = (0, _transformedDatasetUtils.transformDataset)(dataset, datafield, displayfield, displaylabel, displayexpression, orderby, groupby, dataPath);
+  // Check if dataset is a function and call it to get the actual dataset value
+  var resolvedDataset = typeof dataset === "function" ? dataset() : dataset;
+  var transformedDataset = (0, _transformedDatasetUtils.transformDataset)(resolvedDataset, datafield, displayfield, displaylabel, displayExpression, orderby, groupby, dataPath, "", match);
   var validateInput = (0, _react.useCallback)(function (value) {
     // Handle special case value
     if (value === "") {
@@ -103,71 +108,112 @@ var WmSelect = /*#__PURE__*/_react["default"].memo(function (props) {
   }, [required]);
 
   // Handle value change
-  var handleValueChange = function handleValueChange(event) {
-    var _listener$Widgets, _transformedDataset;
-    var newValue = multiple ? Array.from(event.target.selectedOptions, function (option) {
-      return option.value;
-    }) : event.target.selectedIndex;
-    if (multiple) {
-      // Filter out placeholder value from multiple selection
-      var filteredValues = newValue.filter(function (val) {
-        return val !== placeholder;
-      });
-      setLocalDatavalue(filteredValues);
-      var selectedTexts = Array.from(event.target.selectedOptions, function (option) {
-        return option.text;
-      }).filter(function (text) {
-        return text !== placeholder;
-      });
-      setDisplayValue(selectedTexts.join(", "));
-      if (listener !== null && listener !== void 0 && listener.onChange) {
-        if (filteredValues.length === 0) {
-          // If only placeholder is selected or no valid selections, return empty array
-          listener.onChange(props.fieldName || name, {
-            datavalue: [],
-            displayValue: []
-          });
-        } else {
-          var findItem = function findItem(val) {
-            return transformedDataset.find(function (item) {
-              return (0, _typeof2["default"])(item.value) === "object" ? String(item.key) === String(val) : String(item.value) === String(val);
+  var handleValueChange = /*#__PURE__*/function () {
+    var _ref = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(event) {
+      var _listener$Widgets, _transformedDataset;
+      var newValue, filteredValues, selectedTexts, findItem, selectedValues, selectedDisplayValues, _event$target$options;
+      return _regenerator["default"].wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (!(props.readonly || disabled)) {
+              _context.next = 2;
+              break;
+            }
+            return _context.abrupt("return");
+          case 2:
+            newValue = multiple ? Array.from(event.target.selectedOptions, function (option) {
+              return option.value;
+            }) : event.target.selectedIndex;
+            if (!multiple) {
+              _context.next = 20;
+              break;
+            }
+            // Filter out placeholder value from multiple selection
+            filteredValues = newValue.filter(function (val) {
+              return val !== placeholder;
             });
-          };
-          var selectedValues = filteredValues.map(function (val) {
-            var item = findItem(val);
-            return item ? item.value : val;
-          });
-          var selectedDisplayValues = filteredValues.map(function (val) {
-            var item = findItem(val);
-            return item ? item.label : val;
-          });
-          listener.onChange(props.fieldName || name, {
-            datavalue: selectedValues,
-            displayValue: selectedDisplayValues
-          });
-        }
-      }
-    } else {
-      var _event$target$options;
-      setLocalDatavalue(event.target.value);
-      setDisplayValue(((_event$target$options = event.target.options[event.target.selectedIndex]) === null || _event$target$options === void 0 ? void 0 : _event$target$options.text) || "");
-      if (listener !== null && listener !== void 0 && listener.onChange) {
-        if (newValue === 0 || event.target.value === placeholder) {
-          listener.onChange(props.fieldName || name, {
-            datavalue: "",
-            displayValue: ""
-          });
-        } else {
-          listener.onChange(props.fieldName || name, {
-            datavalue: transformedDataset[newValue - 1].value,
-            displayValue: transformedDataset[newValue - 1].label
-          });
+            setLocalDatavalue(filteredValues);
+            selectedTexts = Array.from(event.target.selectedOptions, function (option) {
+              return option.text;
+            }).filter(function (text) {
+              return text !== placeholder;
+            });
+            setDisplayValue(selectedTexts.join(", "));
+            if (!(listener !== null && listener !== void 0 && listener.onChange)) {
+              _context.next = 18;
+              break;
+            }
+            if (!(filteredValues.length === 0)) {
+              _context.next = 14;
+              break;
+            }
+            _context.next = 12;
+            return listener.onChange(props.fieldName || name, {
+              datavalue: [],
+              displayValue: []
+            });
+          case 12:
+            _context.next = 18;
+            break;
+          case 14:
+            findItem = function findItem(val) {
+              return transformedDataset.find(function (item) {
+                return (0, _typeof2["default"])(item.value) === "object" ? String(item.key) === String(val) : String(item.value) === String(val);
+              });
+            };
+            selectedValues = filteredValues.map(function (val) {
+              var item = findItem(val);
+              return item ? item.value : val;
+            });
+            selectedDisplayValues = filteredValues.map(function (val) {
+              var item = findItem(val);
+              return item ? item.label : val;
+            });
+            listener.onChange(props.fieldName || name, {
+              datavalue: selectedValues,
+              displayValue: selectedDisplayValues
+            });
+          case 18:
+            _context.next = 30;
+            break;
+          case 20:
+            setLocalDatavalue(event.target.value);
+            setDisplayValue(((_event$target$options = event.target.options[event.target.selectedIndex]) === null || _event$target$options === void 0 ? void 0 : _event$target$options.text) || "");
+            if (!(listener !== null && listener !== void 0 && listener.onChange)) {
+              _context.next = 30;
+              break;
+            }
+            if (!(newValue === 0 || event.target.value === placeholder)) {
+              _context.next = 28;
+              break;
+            }
+            _context.next = 26;
+            return listener.onChange(props.fieldName || name, {
+              datavalue: "",
+              displayValue: ""
+            });
+          case 26:
+            _context.next = 30;
+            break;
+          case 28:
+            _context.next = 30;
+            return listener.onChange(props.fieldName || name, {
+              datavalue: transformedDataset[newValue - 1].value,
+              displayValue: transformedDataset[newValue - 1].label
+            });
+          case 30:
+            if (onChange) onChange === null || onChange === void 0 || onChange(event, listener === null || listener === void 0 || (_listener$Widgets = listener.Widgets) === null || _listener$Widgets === void 0 ? void 0 : _listener$Widgets[name], (transformedDataset === null || transformedDataset === void 0 || (_transformedDataset = transformedDataset[newValue - 1]) === null || _transformedDataset === void 0 ? void 0 : _transformedDataset.value) || "en", prevDatavalue);
+            setPrevDatavalue(newValue);
+          case 32:
+          case "end":
+            return _context.stop();
         }
-      }
-    }
-    if (onChange) onChange === null || onChange === void 0 || onChange(event, listener === null || listener === void 0 || (_listener$Widgets = listener.Widgets) === null || _listener$Widgets === void 0 ? void 0 : _listener$Widgets[name], (transformedDataset === null || transformedDataset === void 0 || (_transformedDataset = transformedDataset[newValue - 1]) === null || _transformedDataset === void 0 ? void 0 : _transformedDataset.value) || "en", prevDatavalue);
-    setPrevDatavalue(newValue);
-  };
+      }, _callee);
+    }));
+    return function handleValueChange(_x) {
+      return _ref.apply(this, arguments);
+    };
+  }();
   var handleBlur = function handleBlur(e) {
     var newValue = e.target.value;
     var selectedItem = transformedDataset.find(function (item) {
@@ -241,7 +287,11 @@ var WmSelect = /*#__PURE__*/_react["default"].memo(function (props) {
       }
     } else {
       if (datavalue !== localDatavalue) {
+        var _listener$onChange;
         setLocalDatavalue(datavalue);
+        listener === null || listener === void 0 || (_listener$onChange = listener.onChange) === null || _listener$onChange === void 0 || _listener$onChange.call(listener, props.fieldName || name, {
+          datavalue: datavalue
+        });
       }
     }
   }, [datavalue, multiple]);
@@ -279,7 +329,33 @@ var WmSelect = /*#__PURE__*/_react["default"].memo(function (props) {
   } : {}), onMouseLeave ? {
     onMouseLeave: handleMouseLeave
   } : {});
+  var isLocalDatavalueObject = function isLocalDatavalueObject() {
+    var _transformedDataset$f;
+    if ((0, _typeof2["default"])(localDatavalue) === "object" && localDatavalue !== null) {
+      var matchingItem = transformedDataset.find(function (item) {
+        return item.value === localDatavalue || JSON.stringify(item.value) === JSON.stringify(localDatavalue);
+      });
+      if (matchingItem) {
+        var _listener$onChange2;
+        listener === null || listener === void 0 || (_listener$onChange2 = listener.onChange) === null || _listener$onChange2 === void 0 || _listener$onChange2.call(listener, props.fieldName || name, {
+          displayValue: matchingItem.label
+        });
+        return matchingItem.key;
+      }
+    }
+    var displayValue = transformedDataset.length > 0 && ((_transformedDataset$f = transformedDataset.find(function (item) {
+      return item.value == localDatavalue;
+    })) === null || _transformedDataset$f === void 0 ? void 0 : _transformedDataset$f.label) || "";
+    if (displayValue) {
+      var _listener$onChange3;
+      listener === null || listener === void 0 || (_listener$onChange3 = listener.onChange) === null || _listener$onChange3 === void 0 || _listener$onChange3.call(listener, props.fieldName || name, {
+        displayValue: displayValue
+      });
+    }
+    return localDatavalue;
+  };
   return __jsx(_material.Box, {
+    hidden: props.hidden,
     sx: {
       display: "inherit !important"
     },
@@ -289,7 +365,7 @@ var WmSelect = /*#__PURE__*/_react["default"].memo(function (props) {
     IconComponent: function IconComponent() {
       return null;
     },
-    value: multiple ? Array.isArray(localDatavalue) ? localDatavalue : [] : (_ref = localDatavalue !== null && localDatavalue !== void 0 ? localDatavalue : placeholder) !== null && _ref !== void 0 ? _ref : ""
+    value: multiple ? Array.isArray(localDatavalue) ? localDatavalue : [] : (_ref2 = (_isLocalDatavalueObje = isLocalDatavalueObject()) !== null && _isLocalDatavalueObje !== void 0 ? _isLocalDatavalueObje : placeholder) !== null && _ref2 !== void 0 ? _ref2 : ""
   }, events, {
     sx: {
       "& .MuiNativeSelect-select": _objectSpread(_objectSpread({}, styles), {}, {
@@ -304,12 +380,13 @@ var WmSelect = /*#__PURE__*/_react["default"].memo(function (props) {
       tabIndex: tabindex,
       "aria-label": arialabel,
       multiple: multiple,
-      disabled: disabled || readonly,
+      disabled: disabled,
       "aria-readonly": readonly,
       className: "app-select ".concat(className, " form-control ng-valid ng-touched ng-dirty wm-app "),
       accessKey: shortcutkey,
       title: hint
-    }
+    },
+    readOnly: readonly
   }), __jsx("option", {
     value: placeholder,
     id: "placeholderOption",
@@ -335,7 +412,7 @@ var WmSelect = /*#__PURE__*/_react["default"].memo(function (props) {
     }, item.label);
   })));
 }, function (prevProps, nextProps) {
-  var keys = ["dataset", "datafield", "displayfield", "displaylabel", "displayexpression", "orderby", "groupby", "dataPath", "arialabel", "multiple", "styles", "autofocus", "disabled", "readonly", "required", "datavalue"];
+  var keys = ["dataset", "datafield", "displayfield", "displaylabel", "displayExpression", "orderby", "groupby", "dataPath", "arialabel", "multiple", "styles", "autofocus", "disabled", "readonly", "required", "datavalue", "hidden", "className"];
   return keys.every(function (key) {
     return prevProps[key] === nextProps[key];
   });

package/components/input/slider/index.js

@@ -1,11 +1,12 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
+var _typeof3 = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
@@ -13,13 +14,14 @@ var _Box = _interopRequireDefault(require("@mui/material/Box"));
 var _input = require("@base-ui-components/react/input");
 var _withBaseWrapper = require("@wavemaker/react-runtime/higherOrder/withBaseWrapper");
 var _withFormController = _interopRequireDefault(require("@wavemaker/react-runtime/components/data/form/form-controller/withFormController"));
-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 _transformedDatasetUtils = require("@wavemaker/react-runtime/utils/transformedDataset-utils");
+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" != _typeof3(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 DEFAULT_CLASS = "app-slider slider";
 var WmSlider = /*#__PURE__*/(0, _react.memo)(function (props) {
-  var className = props["class"],
+  var className = props.className,
     _props$disabled = props.disabled,
     disabled = _props$disabled === void 0 ? false : _props$disabled,
     hint = props.hint,
@@ -29,8 +31,7 @@ var WmSlider = /*#__PURE__*/(0, _react.memo)(function (props) {
     readonly = _props$readonly === void 0 ? false : _props$readonly,
     _props$tabindex = props.tabindex,
     tabindex = _props$tabindex === void 0 ? 0 : _props$tabindex,
-    _props$datavalue = props.datavalue,
-    datavalue = _props$datavalue === void 0 ? 0 : _props$datavalue,
+    datavalue = props.datavalue,
     _props$minvalue = props.minvalue,
     minvalue = _props$minvalue === void 0 ? 0 : _props$minvalue,
     _props$maxvalue = props.maxvalue,
@@ -40,13 +41,17 @@ var WmSlider = /*#__PURE__*/(0, _react.memo)(function (props) {
     onChange = props.onChange,
     styles = props.styles,
     listener = props.listener,
-    height = props.height,
-    width = props.width,
-    arialabel = props.arialabel;
-  var _useState = (0, _react.useState)(datavalue),
+    arialabel = props.arialabel,
+    _props$showmarkers = props.showmarkers,
+    showmarkers = _props$showmarkers === void 0 ? false : _props$showmarkers,
+    markerlabeltext = props.markerlabeltext;
+
+  // Always provide a number value to keep the input controlled
+  var initialValue = datavalue !== undefined ? datavalue : (minvalue + maxvalue) / 2;
+  var _useState = (0, _react.useState)(initialValue),
     value = _useState[0],
     setValue = _useState[1];
-  var prevDatavalueRef = (0, _react.useRef)(datavalue);
+  var prevDatavalueRef = (0, _react.useRef)(initialValue);
   var sliderRef = (0, _react.useRef)(null);
   var _useState2 = (0, _react.useState)(false),
     isTouched = _useState2[0],
@@ -54,15 +59,19 @@ var WmSlider = /*#__PURE__*/(0, _react.memo)(function (props) {
   var _useState3 = (0, _react.useState)(false),
     isDirty = _useState3[0],
     setIsDirty = _useState3[1];
+  var _useState4 = (0, _react.useState)([]),
+    markerItems = _useState4[0],
+    setMarkerItems = _useState4[1];
   (0, _react.useEffect)(function () {
+    var newValue = datavalue !== undefined ? datavalue : (minvalue + maxvalue) / 2;
     if (datavalue !== prevDatavalueRef.current) {
-      setValue(datavalue);
-      prevDatavalueRef.current = datavalue;
+      setValue(newValue);
+      prevDatavalueRef.current = newValue;
     }
-  }, [datavalue, listener]);
+  }, [datavalue, listener, minvalue, maxvalue]);
   (0, _react.useEffect)(function () {
-    if (props.datavalue !== value) {
-      setValue(props.datavalue || 0);
+    if (props.datavalue !== undefined && props.datavalue !== value) {
+      setValue(props.datavalue);
     }
   }, [props.datavalue]);
 
@@ -120,18 +129,50 @@ var WmSlider = /*#__PURE__*/(0, _react.memo)(function (props) {
       };
     }
   }, [sliderRef, disabled, readonly]);
+  var getMarkersItems = (0, _react.useCallback)(function () {
+    var sliderTrack = sliderRef.current;
+    if (!sliderTrack) return;
+    var trackWidth = sliderTrack.offsetWidth - 9 || 0;
+
+    // Calculate tick count based on min/max/step values
+    var tickCount = 0;
+    if (props.minvalue !== undefined && props.maxvalue !== undefined) {
+      tickCount = step > 0 ? Math.floor((props.maxvalue - props.minvalue) / step) + 1 : 0;
+    } else {
+      tickCount = step > 0 ? Math.floor(100 / step) + 1 : 0;
+    }
+
+    // Convert marker label text to object format
+    var labels = (0, _transformedDatasetUtils.convertDataToObject)(markerlabeltext);
+    var newMarkerItems = [];
+    for (var i = 0; i < tickCount; i++) {
+      var _labels$i$dataValue, _labels$i, _labels$i2, _labels$i3;
+      var left = trackWidth / (tickCount - 1) * i;
+      var label = (_labels$i$dataValue = labels === null || labels === void 0 || (_labels$i = labels[i]) === null || _labels$i === void 0 ? void 0 : _labels$i.dataValue) !== null && _labels$i$dataValue !== void 0 ? _labels$i$dataValue : Array.isArray(labels) ? (0, _typeof2["default"])(labels[i]) === "object" && (_labels$i2 = labels[i]) !== null && _labels$i2 !== void 0 && _labels$i2.title ? labels[i].title : labels[i] : "".concat(i);
+      var position = Array.isArray(labels) && (0, _typeof2["default"])(labels[i]) === "object" && (_labels$i3 = labels[i]) !== null && _labels$i3 !== void 0 && _labels$i3.position ? labels[i].position : "up";
+      newMarkerItems.push({
+        label: label,
+        position: position,
+        left: left
+      });
+    }
+    setMarkerItems(newMarkerItems);
+  }, [props.minvalue, props.maxvalue, step, markerlabeltext]);
+  (0, _react.useEffect)(function () {
+    if (showmarkers) {
+      getMarkersItems();
+    }
+  }, [props.minvalue, props.maxvalue, step, markerlabeltext, showmarkers]);
   return __jsx(_Box["default"], {
+    hidden: props.hidden,
     className: (0, _clsx["default"])(DEFAULT_CLASS, className, isTouched ? "ng-touched" : "ng-untouched", isDirty ? "ng-invalid" : "ng-valid"),
-    sx: _objectSpread(_objectSpread({}, styles), {}, {
-      height: height,
-      width: width
-    })
-  }, (minvalue || maxvalue) && __jsx(_react["default"].Fragment, null, __jsx(_Box["default"], {
+    style: styles
+  }, !showmarkers && (minvalue || maxvalue) && __jsx(_react["default"].Fragment, null, __jsx(_Box["default"], {
     component: "span",
-    className: "app-slider-value pull-left"
+    className: "app-slider-value fa-pull-left"
   }, minvalue || minvalue == 0 ? minvalue : null), __jsx(_Box["default"], {
     component: "span",
-    className: "app-slider-value pull-right"
+    className: "app-slider-value fa-pull-right"
   }, maxvalue || maxvalue == 0 ? maxvalue : null)), __jsx(_input.Input, {
     type: "range",
     ref: sliderRef,
@@ -143,22 +184,39 @@ var WmSlider = /*#__PURE__*/(0, _react.memo)(function (props) {
     max: maxvalue,
     disabled: disabled // Only disabled when explicitly disabled, not when readonly
     ,
-    "aria-label": name || "slider",
+    "aria-label": arialabel,
     "aria-orientation": "horizontal",
     role: "slider",
     "aria-valuenow": value,
     "aria-valuemin": minvalue,
     "aria-valuemax": maxvalue,
     tabIndex: tabindex,
-    title: hint,
+    title: props.datavalue !== undefined ? String(value) : "undefined",
     onBlur: handleBlur
   }), readonly && __jsx(_Box["default"], {
     className: "readonly-wrapper",
     "aria-readonly": "true"
-  }));
+  }), showmarkers && __jsx(_Box["default"], {
+    className: "marker-container"
+  }, markerItems.map(function (marker, index) {
+    return __jsx("span", {
+      key: index,
+      className: "marker-wrapper",
+      style: {
+        left: marker.left + "px"
+      },
+      title: marker.label
+    }, __jsx("span", {
+      className: "marker-label ".concat(marker.position),
+      title: marker.label
+    }, marker.label), __jsx("span", {
+      className: "marker-dot",
+      title: marker.label
+    }));
+  })));
 }, function (prev, current) {
   // Enhanced memo comparison
-  var keys = ["datavalue", "disabled", "readonly", "minvalue", "maxvalue", "step", "class", "styles"];
+  var keys = ["datavalue", "disabled", "readonly", "minvalue", "maxvalue", "step", "className", "styles", "hidden", "showmarkers", "markerlabeltext"];
   return keys.every(function (key) {
     return prev[key] === current[key];
   });

package/components/input/text/index.js

@@ -17,6 +17,7 @@ var _withBaseWrapper = require("@wavemaker/react-runtime/higherOrder/withBaseWra
 var _withFormController = _interopRequireDefault(require("@wavemaker/react-runtime/components/data/form/form-controller/withFormController"));
 var _util = require("./util");
 var _delay = _interopRequireDefault(require("lodash/delay"));
+var _util2 = require("../util");
 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; }
@@ -52,7 +53,8 @@ var WmText = /*#__PURE__*/(0, _react.memo)(function (props) {
     regexp = props.regexp,
     _props$updateon = props.updateon,
     updateon = _props$updateon === void 0 ? "blur" : _props$updateon,
-    autocapitalize = props.autocapitalize,
+    _props$autocapitalize = props.autocapitalize,
+    autocapitalize = _props$autocapitalize === void 0 ? "none" : _props$autocapitalize,
     autotrim = props.autotrim,
     onChange = props.onChange,
     onBlur = props.onBlur,
@@ -245,55 +247,71 @@ var WmText = /*#__PURE__*/(0, _react.memo)(function (props) {
     isInternalChange.current = true;
     var inputEl = e.target;
     var newValue = inputEl.value;
+    var previousValue = rawValue;
     cursorPositionRef.current = inputEl.selectionStart || 0;
 
-    // Extract digits for validation if displayformat is present
-    var digitsOnly = displayformat ? newValue.replace(/\D/g, "") : newValue;
+    // Manual autocapitalize implementation
+    var capitalizeResult = (0, _util.applyAutoCapitalize)(newValue, previousValue, cursorPositionRef.current, autocapitalize);
+    newValue = capitalizeResult.value;
+
+    // Extract meaningful characters for validation if displayformat is present
+    var cleanValue = displayformat ? (0, _util.removeDisplayFormat)(newValue, displayformat) : newValue;
 
     // Enforce maxchars constraint BEFORE setting state
-    if (maxchars && digitsOnly.length > maxchars) {
+    if (maxchars && cleanValue.length > maxchars) {
       // Prevent input that exceeds maxchars
       return;
     }
 
-    // Enforce displayformat digit limit
+    // Enforce displayformat character limit using the generic format parser
     if (displayformat) {
-      var formatDigits = displayformat.replace(/[^9]/g, "");
-      var maxDigits = formatDigits.length;
-      if (digitsOnly.length > maxDigits) {
-        // Prevent input that exceeds format digit limit
+      var maxFormatLength = (0, _util.getFormatMaxLength)(displayformat);
+      if (cleanValue.length > maxFormatLength) {
+        // Prevent input that exceeds format character limit
         return;
       }
     }
 
     // Enforce min/max value constraints for number type
     if (props.type === "number") {
-      var numValue = (0, _toNumber["default"])(digitsOnly);
+      var numValue = (0, _toNumber["default"])(cleanValue);
       if (props.maxvalue !== undefined && numValue > props.maxvalue) {
         // Prevent input that exceeds maxvalue
         return;
       }
-      if (props.minvalue !== undefined && numValue < props.minvalue && digitsOnly.length >= String(props.minvalue).length) {
+      if (props.minvalue !== undefined && numValue < props.minvalue && cleanValue.length >= String(props.minvalue).length) {
         // Only prevent if the number length is complete and still below minvalue
         // This allows typing "1" when minvalue is 10
         var minLength = String(props.minvalue).length;
-        if (digitsOnly.length >= minLength) {
+        if (cleanValue.length >= minLength) {
           return;
         }
       }
     }
     setRawValue(newValue);
 
+    // Restore cursor position after capitalization
+    if (capitalizeResult.wasCapitalized) {
+      setTimeout(function () {
+        if (ref.current && cursorPositionRef.current !== null) {
+          ref.current.setSelectionRange(cursorPositionRef.current, cursorPositionRef.current);
+        }
+      }, 0);
+    }
+
     // Handle cursor position for formatted input
     if (displayformat && showdisplayformaton === "keypress") {
       setTimeout(function () {
         if (ref.current) {
           var formatted = (0, _util.formatInput)(newValue, displayformat);
-          var digitsBefore = newValue.substring(0, cursorPositionRef.current).replace(/\D/g, "").length;
+          // Count meaningful characters (not separators) before cursor
+          var charsBefore = (0, _util.removeDisplayFormat)(newValue.substring(0, cursorPositionRef.current), displayformat).length;
+
+          // Find position in formatted string where we have the same number of meaningful chars
           var newPos = formatted.split("").reduce(function (pos, _char, index) {
             if (pos !== -1) return pos;
-            var digitsSoFar = formatted.substring(0, index).replace(/\D/g, "").length;
-            return digitsSoFar >= digitsBefore ? index : -1;
+            var charsSoFar = (0, _util.removeDisplayFormat)(formatted.substring(0, index + 1), displayformat).length;
+            return charsSoFar >= charsBefore ? index + 1 : -1;
           }, -1);
           if (newPos !== -1) {
             ref.current.setSelectionRange(newPos, newPos);
@@ -382,6 +400,7 @@ var WmText = /*#__PURE__*/(0, _react.memo)(function (props) {
     onMouseLeave: props.onMouseLeave
   } : {});
   return __jsx(_TextField["default"], (0, _extends2["default"])({}, events, {
+    hidden: props.hidden,
     title: hint || "Text Input",
     name: name,
     id: id || name,
@@ -391,7 +410,7 @@ var WmText = /*#__PURE__*/(0, _react.memo)(function (props) {
     disabled: disabled,
     required: required,
     placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : "Enter text",
-    value: displayValue,
+    value: (0, _util2.sanitizeInputValue)(displayValue),
     type: type,
     inputRef: ref,
     error: displayError,
@@ -401,11 +420,12 @@ var WmText = /*#__PURE__*/(0, _react.memo)(function (props) {
       htmlInput: {
         tabIndex: tabindex,
         readOnly: readonly,
+        autoCapitalize: autocapitalize,
         className: (0, _clsx["default"])(DEFAULT_CLASS, className, isTouched ? "ng-touched" : "ng-untouched", displayError && "ng-invalid"),
         style: styles,
         "aria-label": arialabel,
         maxLength: maxchars,
-        pattern: new RegExp(regexp || ".*", "g"),
+        pattern: regexp,
         min: props.minvalue,
         max: props.maxvalue,
         step: props.step
@@ -425,7 +445,7 @@ var WmText = /*#__PURE__*/(0, _react.memo)(function (props) {
     }
   }));
 }, function (prev, current) {
-  var keys = ["datavalue", "disabled", "required", "readonly", "placeholder", "maxchars", "tabindex", "shortcutkey", "autofocus", "arialabel", "error", "className"];
+  var keys = ["datavalue", "disabled", "required", "readonly", "placeholder", "maxchars", "tabindex", "shortcutkey", "autofocus", "arialabel", "error", "className", "hidden"];
   return keys.every(function (key) {
     return prev[key] === current[key];
   });