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

package/components/input/slider/index.js

@@ -1,337 +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"] = exports.WmSlider = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-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"));
-var _Box = _interopRequireDefault(require("@mui/material/Box"));
-var _input = require("@base-ui-components/react/input");
-var _withBaseWrapper = require("@wavemaker-ai/react-runtime/higherOrder/withBaseWrapper");
-var _withFormController = _interopRequireDefault(require("@wavemaker-ai/react-runtime/components/data/form/form-controller/withFormController"));
-var _transformedDatasetUtils = require("@wavemaker-ai/react-runtime/utils/transformedDataset-utils");
-var _withStandalone = _interopRequireDefault(require("@wavemaker-ai/react-runtime/higherOrder/withStandalone"));
-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.className,
-    _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,
-    datavalue = 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,
-    arialabel = props.arialabel,
-    _props$showmarkers = props.showmarkers,
-    showmarkers = _props$showmarkers === void 0 ? false : _props$showmarkers,
-    markerlabeltext = props.markerlabeltext,
-    _props$showicons = props.showicons,
-    showicons = _props$showicons === void 0 ? false : _props$showicons,
-    _props$starticon = props.starticon,
-    starticon = _props$starticon === void 0 ? "wi wi-minus" : _props$starticon,
-    _props$endicon = props.endicon,
-    endicon = _props$endicon === void 0 ? "wi wi-plus" : _props$endicon,
-    _props$rangelabelposi = props.rangelabelposition,
-    rangelabelposition = _props$rangelabelposi === void 0 ? "bottom" : _props$rangelabelposi;
-
-  // 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)(initialValue);
-  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];
-  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(newValue);
-      prevDatavalueRef.current = newValue;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
     }
-  }, [datavalue, listener, minvalue, maxvalue]);
-  (0, _react.useEffect)(function () {
-    if (props.datavalue !== undefined && props.datavalue !== value) {
-      setValue(props.datavalue);
-    }
-  }, [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, name]);
-  var sliderControlStyle = (0, _react.useMemo)(function () {
-    var min = Number(minvalue || 0);
-    var max = Number(maxvalue || 100);
-    var current = Number(value) || 0;
-    var denominator = max - min;
-    var sliderValue = denominator === 0 ? 100 : 100 - (current - min) / denominator * 100;
-    var safePercent = Math.min(100, Math.max(0, sliderValue));
-    return {
-      "--wm-slider-end": "".concat(safePercent, "%")
-    };
-  }, [value, minvalue, maxvalue]);
-  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();
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { memo, useRef, useEffect, useState, useCallback, useMemo } from "react";
+import clsx from "clsx";
+import Box from "@mui/material/Box";
+import { Input } from "@base-ui-components/react/input";
+import { withBaseWrapper } from "../../../higherOrder/withBaseWrapper";
+import withFormController from "../../data/form/form-controller/withFormController";
+import { convertDataToObject } from "../../../utils/transformedDataset-utils";
+import withStandalone from "../../../higherOrder/withStandalone";
+const DEFAULT_CLASS = "app-slider slider";
+const WmSlider = memo(
+  (props) => {
+    const {
+      className,
+      disabled = false,
+      hint,
+      name,
+      shortcutkey,
+      readonly = false,
+      tabindex = 0,
+      datavalue,
+      minvalue = 0,
+      maxvalue = 100,
+      step = 1,
+      onChange,
+      styles,
+      listener,
+      arialabel,
+      showmarkers = false,
+      markerlabeltext,
+      showicons = false,
+      starticon = "wi wi-minus",
+      endicon = "wi wi-plus",
+      rangelabelposition = "bottom"
+    } = props;
+    const initialValue = datavalue !== void 0 ? datavalue : (minvalue + maxvalue) / 2;
+    const [value, setValue] = useState(initialValue);
+    const prevDatavalueRef = useRef(initialValue);
+    const sliderRef = useRef(null);
+    const [isTouched, setIsTouched] = useState(false);
+    const [isDirty, setIsDirty] = useState(false);
+    const [markerItems, setMarkerItems] = useState([]);
+    useEffect(() => {
+      const newValue = datavalue !== void 0 ? datavalue : (minvalue + maxvalue) / 2;
+      if (datavalue !== prevDatavalueRef.current) {
+        setValue(newValue);
+        prevDatavalueRef.current = newValue;
+      }
+    }, [datavalue, listener, minvalue, maxvalue]);
+    useEffect(() => {
+      if (props.datavalue !== void 0 && props.datavalue !== value) {
+        setValue(props.datavalue);
+      }
+    }, [props.datavalue]);
+    const handleKeyDown = useCallback(
+      (event) => {
+        var _a;
+        if (event.altKey && shortcutkey && event.key.toLowerCase() === shortcutkey.toLowerCase()) {
+          event.preventDefault();
+          (_a = sliderRef.current) == null ? void 0 : _a.focus();
         }
+      },
+      [shortcutkey]
+    );
+    const handleInputChange = useCallback(
+      (event) => {
+        const newVal = Number(event.target.value);
+        setValue(newVal);
+        if (listener == null ? void 0 : listener.Widgets[name]) {
+          listener.Widgets[name].displayValue = newVal;
+        }
+        if (onChange) {
+          onChange(
+            event,
+            listener == null ? void 0 : listener.Widgets[name],
+            newVal,
+            prevDatavalueRef.current
+          );
+        }
+        if (listener == null ? void 0 : listener.onChange) {
+          listener.onChange(name, __spreadProps(__spreadValues({}, props), {
+            datavalue: newVal
+          }));
+        }
+        prevDatavalueRef.current = newVal;
+      },
+      [onChange, name]
+    );
+    const sliderControlStyle = useMemo(() => {
+      const min = Number(minvalue || 0);
+      const max = Number(maxvalue || 100);
+      const current = Number(value) || 0;
+      const denominator = max - min;
+      const sliderValue = denominator === 0 ? 100 : 100 - (current - min) / denominator * 100;
+      const safePercent = Math.min(100, Math.max(0, sliderValue));
+      return {
+        "--wm-slider-end": `${safePercent}%`
       };
-      closestParent.addEventListener("keydown", handleParentKeyDown);
-      return function () {
-        return closestParent.removeEventListener("keydown", handleParentKeyDown);
-      };
-    }
-  }, [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]);
-  var applyValue = (0, _react.useCallback)(function (newVal) {
-    var oldVal = prevDatavalueRef.current;
-    setValue(newVal);
-    prevDatavalueRef.current = newVal;
-    if (listener !== null && listener !== void 0 && listener.Widgets[name]) {
-      listener.Widgets[name].displayValue = newVal;
-    }
-    if (onChange) {
-      onChange({}, listener === null || listener === void 0 ? void 0 : listener.Widgets[name], newVal, oldVal);
-    }
-    if (listener !== null && listener !== void 0 && listener.onChange) {
-      listener.onChange(name, _objectSpread(_objectSpread({}, props), {}, {
-        datavalue: newVal
-      }));
-    }
-  }, [onChange, name]);
-  var decrementButtonClick = (0, _react.useCallback)(function (event) {
-    var _Number, _Number2;
-    event.preventDefault();
-    event.stopPropagation();
-    if (disabled || readonly) return;
-    var stepNum = Number(step) || 1;
-    var min = (_Number = Number(minvalue)) !== null && _Number !== void 0 ? _Number : 0;
-    var max = (_Number2 = Number(maxvalue)) !== null && _Number2 !== void 0 ? _Number2 : 100;
-    var current = Number(value !== null && value !== void 0 ? value : (min + max) / 2);
-    var newVal = Math.max(min, current - stepNum);
-    applyValue(newVal);
-  }, [disabled, readonly, step, minvalue, maxvalue, value, applyValue]);
-  var incrementButtonClick = (0, _react.useCallback)(function (event) {
-    var _Number3, _Number4;
-    event.preventDefault();
-    event.stopPropagation();
-    if (disabled || readonly) return;
-    var stepNum = Number(step) || 1;
-    var min = (_Number3 = Number(minvalue)) !== null && _Number3 !== void 0 ? _Number3 : 0;
-    var max = (_Number4 = Number(maxvalue)) !== null && _Number4 !== void 0 ? _Number4 : 100;
-    var current = Number(value !== null && value !== void 0 ? value : (min + max) / 2);
-    var newVal = Math.min(max, current + stepNum);
-    applyValue(newVal);
-  }, [disabled, readonly, step, minvalue, maxvalue, value, applyValue]);
-  var RANGE_LABEL_POSITION = {
-    top: "range-label-top",
-    side: "range-label-side",
-    bottom: "range-label-bottom"
-  };
-  var rangeLabelClass = rangelabelposition ? RANGE_LABEL_POSITION[rangelabelposition] : undefined;
-  return __jsx(_Box["default"], (0, _extends2["default"])({
-    hidden: props.hidden
-  }, disabled && {
-    disabled: "true"
-  }, {
-    className: (0, _clsx["default"])(DEFAULT_CLASS, className, isTouched ? "ng-touched" : "ng-untouched", isDirty ? "ng-invalid" : "ng-valid", rangeLabelClass),
-    style: styles
-  }), __jsx(_Box["default"], {
-    className: "slider-container"
-  }, showicons && __jsx(_Box["default"], {
-    component: "button",
-    className: "btn-icon",
-    type: "button",
-    name: "decrementButton",
-    onClick: decrementButtonClick,
-    disabled: disabled
-  }, __jsx(_Box["default"], {
-    component: "i",
-    "aria-hidden": "true",
-    className: starticon
-  })), __jsx(_Box["default"], {
-    className: "slider-control wm-slider-control",
-    style: sliderControlStyle
-  }, !showmarkers && (minvalue || maxvalue) && __jsx(_react["default"].Fragment, null, __jsx(_Box["default"], {
-    component: "span",
-    className: "app-slider-value pull-left"
-  }, minvalue !== undefined ? minvalue : null), __jsx(_Box["default"], {
-    component: "span",
-    className: "app-slider-value pull-right"
-  }, maxvalue !== undefined ? 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 || readonly,
-    "aria-label": arialabel,
-    "aria-orientation": "horizontal",
-    role: "slider",
-    "aria-valuenow": value,
-    "aria-valuemin": minvalue,
-    "aria-valuemax": maxvalue,
-    tabIndex: tabindex,
-    title: props.datavalue !== undefined ? String(value) : "undefined",
-    onBlur: handleBlur,
-    accessKey: shortcutkey,
-    name: name
-  }), __jsx(_Box["default"], {
-    component: "p",
-    className: "active-slider"
-  })), showicons && __jsx(_Box["default"], {
-    component: "button",
-    className: "btn-icon",
-    type: "button",
-    name: "incrementButton",
-    onClick: incrementButtonClick,
-    disabled: disabled
-  }, __jsx(_Box["default"], {
-    component: "i",
-    "aria-hidden": "true",
-    className: endicon
-  }))), 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 wm-slider-marker-wrapper",
-      style: {
-        "--wm-slider-marker-left": "".concat(marker.left, "px")
+    }, [value, minvalue, maxvalue]);
+    const handleBlur = useCallback(
+      (e) => {
+        setIsTouched(true);
       },
-      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", "className", "styles", "hidden", "showmarkers", "markerlabeltext", "showicons", "starticon", "endicon", "rangelabelposition"];
-  return keys.every(function (key) {
-    return prev[key] === current[key];
-  });
-});
+      [listener, name, props, value]
+    );
+    useEffect(() => {
+      if (!disabled && !readonly) {
+        window.addEventListener("keydown", handleKeyDown);
+        return () => window.removeEventListener("keydown", handleKeyDown);
+      }
+    }, [disabled, readonly, handleKeyDown]);
+    useEffect(() => {
+      if (disabled || readonly) return;
+      const element = sliderRef.current;
+      if (!element) return;
+      const closestParent = element.closest("[wmList]");
+      if (closestParent) {
+        const handleParentKeyDown = (event) => {
+          const keyEvent = event;
+          if ([37, 38, 39, 40].includes(keyEvent.keyCode)) {
+            keyEvent.stopPropagation();
+          }
+        };
+        closestParent.addEventListener("keydown", handleParentKeyDown);
+        return () => closestParent.removeEventListener("keydown", handleParentKeyDown);
+      }
+    }, [sliderRef, disabled, readonly]);
+    const getMarkersItems = useCallback(() => {
+      var _a, _b, _c, _d;
+      const sliderTrack = sliderRef.current;
+      if (!sliderTrack) return;
+      const trackWidth = sliderTrack.offsetWidth - 9 || 0;
+      let tickCount = 0;
+      if (props.minvalue !== void 0 && props.maxvalue !== void 0) {
+        tickCount = step > 0 ? Math.floor((props.maxvalue - props.minvalue) / step) + 1 : 0;
+      } else {
+        tickCount = step > 0 ? Math.floor(100 / step) + 1 : 0;
+      }
+      const labels = convertDataToObject(markerlabeltext);
+      const newMarkerItems = [];
+      for (let i = 0; i < tickCount; i++) {
+        const left = trackWidth / (tickCount - 1) * i;
+        const label = (_c = (_a = labels == null ? void 0 : labels[i]) == null ? void 0 : _a.dataValue) != null ? _c : Array.isArray(labels) ? typeof labels[i] === "object" && ((_b = labels[i]) == null ? void 0 : _b.title) ? labels[i].title : labels[i] : `${i}`;
+        const position = Array.isArray(labels) && typeof labels[i] === "object" && ((_d = labels[i]) == null ? void 0 : _d.position) ? labels[i].position : "up";
+        newMarkerItems.push({ label, position, left });
+      }
+      setMarkerItems(newMarkerItems);
+    }, [props.minvalue, props.maxvalue, step, markerlabeltext]);
+    useEffect(() => {
+      if (showmarkers) {
+        getMarkersItems();
+      }
+    }, [props.minvalue, props.maxvalue, step, markerlabeltext, showmarkers]);
+    const applyValue = useCallback(
+      (newVal) => {
+        const oldVal = prevDatavalueRef.current;
+        setValue(newVal);
+        prevDatavalueRef.current = newVal;
+        if (listener == null ? void 0 : listener.Widgets[name]) {
+          listener.Widgets[name].displayValue = newVal;
+        }
+        if (onChange) {
+          onChange({}, listener == null ? void 0 : listener.Widgets[name], newVal, oldVal);
+        }
+        if (listener == null ? void 0 : listener.onChange) {
+          listener.onChange(name, __spreadProps(__spreadValues({}, props), { datavalue: newVal }));
+        }
+      },
+      [onChange, name]
+    );
+    const decrementButtonClick = useCallback(
+      (event) => {
+        var _a, _b;
+        event.preventDefault();
+        event.stopPropagation();
+        if (disabled || readonly) return;
+        const stepNum = Number(step) || 1;
+        const min = (_a = Number(minvalue)) != null ? _a : 0;
+        const max = (_b = Number(maxvalue)) != null ? _b : 100;
+        const current = Number(value != null ? value : (min + max) / 2);
+        const newVal = Math.max(min, current - stepNum);
+        applyValue(newVal);
+      },
+      [disabled, readonly, step, minvalue, maxvalue, value, applyValue]
+    );
+    const incrementButtonClick = useCallback(
+      (event) => {
+        var _a, _b;
+        event.preventDefault();
+        event.stopPropagation();
+        if (disabled || readonly) return;
+        const stepNum = Number(step) || 1;
+        const min = (_a = Number(minvalue)) != null ? _a : 0;
+        const max = (_b = Number(maxvalue)) != null ? _b : 100;
+        const current = Number(value != null ? value : (min + max) / 2);
+        const newVal = Math.min(max, current + stepNum);
+        applyValue(newVal);
+      },
+      [disabled, readonly, step, minvalue, maxvalue, value, applyValue]
+    );
+    const RANGE_LABEL_POSITION = {
+      top: "range-label-top",
+      side: "range-label-side",
+      bottom: "range-label-bottom"
+    };
+    const rangeLabelClass = rangelabelposition ? RANGE_LABEL_POSITION[rangelabelposition] : void 0;
+    return /* @__PURE__ */ jsxs(
+      Box,
+      __spreadProps(__spreadValues({
+        hidden: props.hidden
+      }, disabled && { disabled: "true" }), {
+        className: clsx(
+          DEFAULT_CLASS,
+          className,
+          isTouched ? "ng-touched" : "ng-untouched",
+          isDirty ? "ng-invalid" : "ng-valid",
+          rangeLabelClass
+        ),
+        style: styles,
+        children: [
+          /* @__PURE__ */ jsxs(Box, { className: "slider-container", children: [
+            showicons && /* @__PURE__ */ jsx(
+              Box,
+              {
+                component: "button",
+                className: "btn-icon",
+                type: "button",
+                name: "decrementButton",
+                onClick: decrementButtonClick,
+                disabled,
+                children: /* @__PURE__ */ jsx(Box, { component: "i", "aria-hidden": "true", className: starticon })
+              }
+            ),
+            /* @__PURE__ */ jsxs(Box, { className: "slider-control wm-slider-control", style: sliderControlStyle, children: [
+              !showmarkers && (minvalue || maxvalue) && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(Box, { component: "span", className: "app-slider-value pull-left", children: minvalue !== void 0 ? minvalue : null }),
+                /* @__PURE__ */ jsx(Box, { component: "span", className: "app-slider-value pull-right", children: maxvalue !== void 0 ? maxvalue : null })
+              ] }),
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  type: "range",
+                  ref: sliderRef,
+                  className: `range-input ng-dirty ${isTouched ? "ng-touched" : "ng-untouched"} ${isDirty ? "ng-invalid" : "ng-valid"}`,
+                  step,
+                  value,
+                  onChange: handleInputChange,
+                  min: minvalue,
+                  max: maxvalue,
+                  disabled: disabled || readonly,
+                  "aria-label": arialabel,
+                  "aria-orientation": "horizontal",
+                  role: "slider",
+                  "aria-valuenow": value,
+                  "aria-valuemin": minvalue,
+                  "aria-valuemax": maxvalue,
+                  tabIndex: tabindex,
+                  title: props.datavalue !== void 0 ? String(value) : "undefined",
+                  onBlur: handleBlur,
+                  accessKey: shortcutkey,
+                  name
+                }
+              ),
+              /* @__PURE__ */ jsx(Box, { component: "p", className: "active-slider" })
+            ] }),
+            showicons && /* @__PURE__ */ jsx(
+              Box,
+              {
+                component: "button",
+                className: "btn-icon",
+                type: "button",
+                name: "incrementButton",
+                onClick: incrementButtonClick,
+                disabled,
+                children: /* @__PURE__ */ jsx(Box, { component: "i", "aria-hidden": "true", className: endicon })
+              }
+            )
+          ] }),
+          readonly && /* @__PURE__ */ jsx(Box, { className: "readonly-wrapper", "aria-readonly": "true" }),
+          showmarkers && /* @__PURE__ */ jsx(Box, { className: "marker-container", children: markerItems.map((marker, index) => /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: "marker-wrapper wm-slider-marker-wrapper",
+              style: { "--wm-slider-marker-left": `${marker.left}px` },
+              title: marker.label,
+              children: [
+                /* @__PURE__ */ jsx("span", { className: `marker-label ${marker.position}`, title: marker.label, children: marker.label }),
+                /* @__PURE__ */ jsx("span", { className: "marker-dot", title: marker.label })
+              ]
+            },
+            index
+          )) })
+        ]
+      })
+    );
+  },
+  (prev, current) => {
+    const keys = [
+      "datavalue",
+      "disabled",
+      "readonly",
+      "minvalue",
+      "maxvalue",
+      "step",
+      "className",
+      "styles",
+      "hidden",
+      "showmarkers",
+      "markerlabeltext",
+      "showicons",
+      "starticon",
+      "endicon",
+      "rangelabelposition"
+    ];
+    return keys.every((key) => prev[key] === current[key]);
+  }
+);
 WmSlider.displayName = "WmSlider";
-var WithForm = (0, _withFormController["default"])(WmSlider);
-var WmSliderStandalone = exports.WmSlider = (0, _withStandalone["default"])(WithForm);
-/**
- * The WmSlider component provides a range slider input with markers and icon support.
- *
- * - [Playground](https://react-components.wavemaker.ai/?path=/story/input-slider--showcase)
- *
- * - [Docs](https://react-components.wavemaker.ai/?path=/story/input-slider--docs)
- *
- * @param props - {@link WmSliderProps}
- */
-var _default = exports["default"] = (0, _withBaseWrapper.withBaseWrapper)(WithForm);
+const WithForm = withFormController(WmSlider);
+const WmSliderStandalone = withStandalone(WithForm);
+var slider_default = withBaseWrapper(WithForm);
+export {
+  WmSliderStandalone as WmSlider,
+  slider_default as default
+};