@wavemaker/react-runtime 11.14.1-rc.236

package/components/input/select/index.js

@@ -0,0 +1,344 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof3 = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+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 _react = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _NativeSelect = _interopRequireDefault(require("@mui/material/NativeSelect"));
+var _transformedDatasetUtils = require("@wavemaker/react-runtime/utils/transformedDataset-utils");
+var _withBaseWrapper = require("@wavemaker/react-runtime/higherOrder/withBaseWrapper");
+var _material = require("@mui/material");
+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" != _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 WmSelect = /*#__PURE__*/_react["default"].memo(function (props) {
+  var _ref;
+  var autofocus = props.autofocus,
+    className = props.className,
+    _props$datafield = props.datafield,
+    datafield = _props$datafield === void 0 ? "key" : _props$datafield,
+    dataset = props.dataset,
+    datavalue = props.datavalue,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
+    displayexpression = props.displayexpression,
+    displaylabel = props.displaylabel,
+    _props$displayfield = props.displayfield,
+    displayfield = _props$displayfield === void 0 ? "value" : _props$displayfield,
+    groupby = props.groupby,
+    hint = props.hint,
+    dataPath = props.dataPath,
+    arialabel = props.arialabel,
+    _props$multiple = props.multiple,
+    multiple = _props$multiple === void 0 ? false : _props$multiple,
+    name = props.name,
+    styles = props.styles,
+    orderby = props.orderby,
+    placeholder = props.placeholder,
+    _props$readonly = props.readonly,
+    readonly = _props$readonly === void 0 ? false : _props$readonly,
+    _props$required = props.required,
+    required = _props$required === void 0 ? false : _props$required,
+    shortcutkey = props.shortcutkey,
+    listener = props.listener,
+    _props$tabindex = props.tabindex,
+    tabindex = _props$tabindex === void 0 ? 0 : _props$tabindex,
+    onClick = props.onClick,
+    onChange = props.onChange,
+    onBlur = props.onBlur,
+    onFocus = props.onFocus,
+    onKeyDown = props.onKeyDown,
+    onEnter = props.onEnter,
+    onMouseEnter = props.onMouseEnter,
+    onMouseLeave = props.onMouseLeave,
+    onKeyUp = props.onKeyUp;
+  var DEFAULT_CLASS = "app-select-wrapper ng-dirty";
+  var selectRef = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)(""),
+    displayValue = _useState[0],
+    setDisplayValue = _useState[1];
+  var _useState2 = (0, _react.useState)(multiple ? Array.isArray(datavalue) ? datavalue : datavalue ? [datavalue] : [] : datavalue),
+    localDatavalue = _useState2[0],
+    setLocalDatavalue = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    isTouched = _useState3[0],
+    setIsTouched = _useState3[1];
+  var _useState4 = (0, _react.useState)(false),
+    showError = _useState4[0],
+    setShowError = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
+    isDirty = _useState5[0],
+    setIsDirty = _useState5[1];
+  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);
+  var validateInput = (0, _react.useCallback)(function (value) {
+    // Handle special case value
+    if (value === "") {
+      return {
+        isValid: !required,
+        message: required ? "This field is required" : ""
+      };
+    }
+    if (!value || !value.toString().trim()) {
+      return {
+        isValid: !required,
+        message: required ? "This field is required" : ""
+      };
+    }
+    return {
+      isValid: true,
+      message: ""
+    };
+  }, [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 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
+          });
+        }
+      }
+    }
+    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);
+  };
+  var handleBlur = function handleBlur(e) {
+    var newValue = e.target.value;
+    var selectedItem = transformedDataset.find(function (item) {
+      return String(item.value) === newValue;
+    });
+    var validation = validateInput(selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value);
+    setIsTouched(true);
+    if (!validation.isValid) {
+      setIsDirty(true);
+    } else {
+      setIsDirty(false);
+    }
+    setShowError(!validation.isValid);
+    onBlur === null || onBlur === void 0 || onBlur(e, props);
+  };
+
+  // Handle floating label behavior
+  var handleFloatingLabel = (0, _react.useCallback)(function (event) {
+    var _selectRef$current, _selectRef$current2, _selectRef$current3;
+    var captionEl = (_selectRef$current = selectRef.current) === null || _selectRef$current === void 0 ? void 0 : _selectRef$current.closest(".app-composite-widget.caption-floating");
+    if (!captionEl) return;
+    var placeholderOption = (_selectRef$current2 = selectRef.current) === null || _selectRef$current2 === void 0 ? void 0 : _selectRef$current2.querySelector("#placeholderOption");
+    if (!placeholderOption) return;
+    if (event.type === "mousedown" && (!datavalue || datavalue && ((_selectRef$current3 = selectRef.current) === null || _selectRef$current3 === void 0 || (_selectRef$current3 = _selectRef$current3.querySelector("option:checked")) === null || _selectRef$current3 === void 0 ? void 0 : _selectRef$current3.textContent) === "")) {
+      if (placeholder) {
+        placeholderOption.textContent = placeholder;
+      }
+    } else if (!datavalue) {
+      if (placeholder) {
+        placeholderOption.textContent = "";
+      }
+      captionEl.classList.remove("float-active");
+    }
+  }, [datavalue, placeholder]);
+  var handleKeyDown = (0, _react.useCallback)(function (event) {
+    if (event.key === "Enter") {
+      onEnter === null || onEnter === void 0 || onEnter(event);
+    }
+    onKeyDown === null || onKeyDown === void 0 || onKeyDown(event);
+  }, [onEnter, onKeyDown]);
+  (0, _react.useEffect)(function () {
+    if (datavalue !== undefined) {
+      if (multiple) {
+        var normalizedValue = Array.isArray(datavalue) ? datavalue : datavalue ? [datavalue] : [];
+        var selectedOptions = normalizedValue.map(function (val) {
+          return transformedDataset.find(function (item) {
+            return String(item.value) === String(val);
+          });
+        });
+        var displayText = selectedOptions.map(function (option) {
+          return option === null || option === void 0 ? void 0 : option.label;
+        }).join(", ");
+        setDisplayValue(displayText);
+      } else {
+        var selectedOption = transformedDataset.find(function (item) {
+          return item.selected;
+        });
+        if (selectedOption) {
+          setDisplayValue(selectedOption.label);
+        }
+      }
+    }
+  }, [transformedDataset, datavalue, multiple]);
+
+  // Sync localDatavalue with incoming datavalue prop
+  (0, _react.useEffect)(function () {
+    if (multiple) {
+      var normalizedValue = Array.isArray(datavalue) ? datavalue : datavalue ? [datavalue] : [];
+      if (JSON.stringify(normalizedValue) !== JSON.stringify(localDatavalue)) {
+        setLocalDatavalue(normalizedValue);
+      }
+    } else {
+      if (datavalue !== localDatavalue) {
+        setLocalDatavalue(datavalue);
+      }
+    }
+  }, [datavalue, multiple]);
+  var handleClick = (0, _react.useCallback)(function (event) {
+    onClick === null || onClick === void 0 || onClick(event);
+  }, [onClick]);
+  var handleFocus = (0, _react.useCallback)(function (event) {
+    onFocus === null || onFocus === void 0 || onFocus(event);
+  }, [onFocus]);
+  var handleMouseEnter = (0, _react.useCallback)(function (event) {
+    onMouseEnter === null || onMouseEnter === void 0 || onMouseEnter(event);
+  }, [onMouseEnter]);
+  var handleMouseLeave = (0, _react.useCallback)(function (event) {
+    onMouseLeave === null || onMouseLeave === void 0 || onMouseLeave(event);
+  }, [onMouseLeave]);
+  var handleKeyUp = (0, _react.useCallback)(function (event) {
+    onKeyUp === null || onKeyUp === void 0 || onKeyUp(event);
+  }, [onKeyUp]);
+  var events = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
+    onChange: handleValueChange,
+    onBlur: function onBlur(e) {
+      handleFloatingLabel(e);
+      handleBlur(e);
+    }
+  }, onFocus ? {
+    onFocus: handleFocus
+  } : {}), onKeyDown ? {
+    onKeyDown: handleKeyDown
+  } : {}), onKeyUp ? {
+    onKeyUp: handleKeyUp
+  } : {}), onClick ? {
+    onClick: handleClick
+  } : {}), onMouseEnter ? {
+    onMouseEnter: handleMouseEnter
+  } : {}), onMouseLeave ? {
+    onMouseLeave: handleMouseLeave
+  } : {});
+  return __jsx(_material.Box, {
+    sx: {
+      display: "inherit !important"
+    },
+    className: (0, _clsx["default"])(DEFAULT_CLASS, isTouched ? "ng-touched" : "ng-untouched", isDirty ? "ng-invalid" : "ng-valid")
+  }, __jsx(_NativeSelect["default"], (0, _extends2["default"])({
+    key: name,
+    IconComponent: function IconComponent() {
+      return null;
+    },
+    value: multiple ? Array.isArray(localDatavalue) ? localDatavalue : [] : (_ref = localDatavalue !== null && localDatavalue !== void 0 ? localDatavalue : placeholder) !== null && _ref !== void 0 ? _ref : ""
+  }, events, {
+    sx: {
+      "& .MuiNativeSelect-select": _objectSpread(_objectSpread({}, styles), {}, {
+        WebkitAppearance: (styles === null || styles === void 0 ? void 0 : styles.WebkitAppearance) || "auto"
+      })
+    },
+    inputProps: {
+      id: name,
+      name: name,
+      required: required,
+      autoFocus: autofocus,
+      tabIndex: tabindex,
+      "aria-label": arialabel,
+      multiple: multiple,
+      disabled: disabled || readonly,
+      "aria-readonly": readonly,
+      className: "app-select ".concat(className, " form-control ng-valid ng-touched ng-dirty wm-app "),
+      accessKey: shortcutkey,
+      title: hint
+    }
+  }), __jsx("option", {
+    value: placeholder,
+    id: "placeholderOption",
+    key: "placeholder-text",
+    hidden: !placeholder
+  }, placeholder), groupby && transformedDataset ? transformedDataset.map(function (group) {
+    return __jsx("optgroup", {
+      key: group.key,
+      label: group.key,
+      style: {
+        backgroundColor: "rgba(0, 0, 0, .1)"
+      }
+    }, group.data.map(function (item) {
+      return __jsx("option", {
+        key: "".concat(group.key, "-").concat(item.key),
+        value: (0, _typeof2["default"])(item.value) === "object" ? item.key : item.value
+      }, item.label);
+    }));
+  }) : transformedDataset && transformedDataset.map(function (item) {
+    return __jsx("option", {
+      key: item.key,
+      value: (0, _typeof2["default"])(item.value) === "object" ? item.key : item.value
+    }, item.label);
+  })));
+}, function (prevProps, nextProps) {
+  var keys = ["dataset", "datafield", "displayfield", "displaylabel", "displayexpression", "orderby", "groupby", "dataPath", "arialabel", "multiple", "styles", "autofocus", "disabled", "readonly", "required", "datavalue"];
+  return keys.every(function (key) {
+    return prevProps[key] === nextProps[key];
+  });
+});
+WmSelect.displayName = "WmSelect";
+var _default = exports["default"] = (0, _withBaseWrapper.withBaseWrapper)((0, _withFormController["default"])(WmSelect));

package/components/input/select/props.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/components/input/slider/index.js

@@ -0,0 +1,167 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+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 __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"],
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
+    hint = props.hint,
+    name = props.name,
+    shortcutkey = props.shortcutkey,
+    _props$readonly = props.readonly,
+    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,
+    _props$minvalue = props.minvalue,
+    minvalue = _props$minvalue === void 0 ? 0 : _props$minvalue,
+    _props$maxvalue = props.maxvalue,
+    maxvalue = _props$maxvalue === void 0 ? 100 : _props$maxvalue,
+    _props$step = props.step,
+    step = _props$step === void 0 ? 1 : _props$step,
+    onChange = props.onChange,
+    styles = props.styles,
+    listener = props.listener,
+    height = props.height,
+    width = props.width,
+    arialabel = props.arialabel;
+  var _useState = (0, _react.useState)(datavalue),
+    value = _useState[0],
+    setValue = _useState[1];
+  var prevDatavalueRef = (0, _react.useRef)(datavalue);
+  var sliderRef = (0, _react.useRef)(null);
+  var _useState2 = (0, _react.useState)(false),
+    isTouched = _useState2[0],
+    setIsTouched = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    isDirty = _useState3[0],
+    setIsDirty = _useState3[1];
+  (0, _react.useEffect)(function () {
+    if (datavalue !== prevDatavalueRef.current) {
+      setValue(datavalue);
+      prevDatavalueRef.current = datavalue;
+    }
+  }, [datavalue, listener]);
+  (0, _react.useEffect)(function () {
+    if (props.datavalue !== value) {
+      setValue(props.datavalue || 0);
+    }
+  }, [props.datavalue]);
+
+  // Fix keyboard event handler type - use regular KeyboardEvent instead of React.KeyboardEvent
+  var handleKeyDown = (0, _react.useCallback)(function (event) {
+    if (event.altKey && shortcutkey && event.key.toLowerCase() === shortcutkey.toLowerCase()) {
+      var _sliderRef$current;
+      event.preventDefault();
+      (_sliderRef$current = sliderRef.current) === null || _sliderRef$current === void 0 || _sliderRef$current.focus();
+    }
+  }, [shortcutkey]);
+  var handleInputChange = (0, _react.useCallback)(function (event) {
+    var newVal = Number(event.target.value);
+    setValue(newVal);
+    if (listener !== null && listener !== void 0 && listener.Widgets[name]) {
+      listener.Widgets[name].displayValue = newVal;
+    }
+    if (onChange) {
+      onChange(event, listener === null || listener === void 0 ? void 0 : listener.Widgets[name], newVal, prevDatavalueRef.current);
+    }
+    if (listener !== null && listener !== void 0 && listener.onChange) {
+      listener.onChange(name, _objectSpread(_objectSpread({}, props), {}, {
+        datavalue: newVal
+      }));
+    }
+    prevDatavalueRef.current = newVal;
+  }, [onChange, listener, name]);
+  var handleBlur = (0, _react.useCallback)(function (e) {
+    setIsTouched(true);
+  }, [listener, name, props, value]);
+  (0, _react.useEffect)(function () {
+    // Only disable keyboard shortcuts when disabled OR readonly
+    if (!disabled && !readonly) {
+      window.addEventListener("keydown", handleKeyDown);
+      return function () {
+        return window.removeEventListener("keydown", handleKeyDown);
+      };
+    }
+  }, [disabled, readonly, handleKeyDown]);
+  (0, _react.useEffect)(function () {
+    if (disabled || readonly) return;
+    var element = sliderRef.current;
+    if (!element) return;
+    var closestParent = element.closest("[wmList]");
+    if (closestParent) {
+      var handleParentKeyDown = function handleParentKeyDown(event) {
+        var keyEvent = event;
+        if ([37, 38, 39, 40].includes(keyEvent.keyCode)) {
+          keyEvent.stopPropagation();
+        }
+      };
+      closestParent.addEventListener("keydown", handleParentKeyDown);
+      return function () {
+        return closestParent.removeEventListener("keydown", handleParentKeyDown);
+      };
+    }
+  }, [sliderRef, disabled, readonly]);
+  return __jsx(_Box["default"], {
+    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"], {
+    component: "span",
+    className: "app-slider-value pull-left"
+  }, minvalue || minvalue == 0 ? minvalue : null), __jsx(_Box["default"], {
+    component: "span",
+    className: "app-slider-value pull-right"
+  }, maxvalue || maxvalue == 0 ? maxvalue : null)), __jsx(_input.Input, {
+    type: "range",
+    ref: sliderRef,
+    className: "range-input ng-dirty ".concat(isTouched ? "ng-touched" : "ng-untouched", " ").concat(isDirty ? "ng-invalid" : "ng-valid"),
+    step: step,
+    value: value,
+    onChange: handleInputChange,
+    min: minvalue,
+    max: maxvalue,
+    disabled: disabled // Only disabled when explicitly disabled, not when readonly
+    ,
+    "aria-label": name || "slider",
+    "aria-orientation": "horizontal",
+    role: "slider",
+    "aria-valuenow": value,
+    "aria-valuemin": minvalue,
+    "aria-valuemax": maxvalue,
+    tabIndex: tabindex,
+    title: hint,
+    onBlur: handleBlur
+  }), readonly && __jsx(_Box["default"], {
+    className: "readonly-wrapper",
+    "aria-readonly": "true"
+  }));
+}, function (prev, current) {
+  // Enhanced memo comparison
+  var keys = ["datavalue", "disabled", "readonly", "minvalue", "maxvalue", "step", "class", "styles"];
+  return keys.every(function (key) {
+    return prev[key] === current[key];
+  });
+});
+WmSlider.displayName = "WmSlider";
+var _default = exports["default"] = (0, _withBaseWrapper.withBaseWrapper)((0, _withFormController["default"])(WmSlider));

package/components/input/slider/props.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});