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

package/components/input/currency/index.js

@@ -0,0 +1,265 @@
+"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.WmCurrency = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _withBaseWrapper = require("@wavemaker-ai/react-runtime/higherOrder/withBaseWrapper");
+var _constants = require("@wavemaker-ai/react-runtime/components/constants");
+var _material = require("@mui/material");
+var _input = require("@base-ui-components/react/input");
+var _formatUtil = require("@wavemaker-ai/react-runtime/utils/format-util");
+var lodash = _interopRequireWildcard(require("lodash-es"));
+var _withFormController = _interopRequireDefault(require("@wavemaker-ai/react-runtime/components/data/form/form-controller/withFormController"));
+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" != _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 WmCurrency = function WmCurrency(props) {
+  var _props$currency = props.currency,
+    currency = _props$currency === void 0 ? "USD" : _props$currency,
+    _props$datavalue = props.datavalue,
+    initialDataValue = _props$datavalue === void 0 ? null : _props$datavalue,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
+    _props$readonly = props.readonly,
+    readonly = _props$readonly === void 0 ? false : _props$readonly,
+    _props$required = props.required,
+    required = _props$required === void 0 ? false : _props$required,
+    _props$placeholder = props.placeholder,
+    placeholder = _props$placeholder === void 0 ? "Enter value" : _props$placeholder,
+    _props$arialabel = props.arialabel,
+    arialabel = _props$arialabel === void 0 ? currency : _props$arialabel,
+    name = props.name,
+    _props$tabindex = props.tabindex,
+    tabindex = _props$tabindex === void 0 ? 0 : _props$tabindex,
+    shortcutkey = props.shortcutkey,
+    maxvalue = props.maxvalue,
+    minvalue = props.minvalue,
+    _props$step = props.step,
+    step = _props$step === void 0 ? 1 : _props$step,
+    textAlign = props.textAlign,
+    hint = props.hint,
+    _props$trailingzero = props.trailingzero,
+    trailingzero = _props$trailingzero === void 0 ? false : _props$trailingzero,
+    _props$inputmode = props.inputmode,
+    inputmode = _props$inputmode === void 0 ? "natural" : _props$inputmode,
+    _props$decimalplaces = props.decimalplaces,
+    decimalplaces = _props$decimalplaces === void 0 ? 0 : _props$decimalplaces,
+    _props$updateon = props.updateon,
+    updateon = _props$updateon === void 0 ? "blur" : _props$updateon,
+    _props$updatedelay = props.updatedelay,
+    updatedelay = _props$updatedelay === void 0 ? "0" : _props$updatedelay,
+    onChange = props.onChange,
+    onBlur = props.onBlur,
+    onFocus = props.onFocus,
+    onClick = props.onClick,
+    onMouseEnter = props.onMouseEnter,
+    onMouseLeave = props.onMouseLeave,
+    onKeyDown = props.onKeyDown,
+    onEnter = props.onEnter,
+    className = props.className,
+    listener = props.listener,
+    styles = props.styles;
+  var _useState = (0, _react.useState)(initialDataValue),
+    datavalue = _useState[0],
+    setDatavalue = _useState[1];
+  var _useState2 = (0, _react.useState)(initialDataValue),
+    prevDatavalue = _useState2[0],
+    setPrevDatavalue = _useState2[1];
+  var _useState3 = (0, _react.useState)(initialDataValue !== null ? initialDataValue.toString() : ""),
+    internalValue = _useState3[0],
+    setInternalValue = _useState3[1];
+  // Add state to preserve the original string input when trailingzero is true
+  var _useState4 = (0, _react.useState)(initialDataValue !== null ? initialDataValue.toString() : ""),
+    rawInputValue = _useState4[0],
+    setRawInputValue = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
+    isTouched = _useState5[0],
+    setIsTouched = _useState5[1];
+  var inputEl = (0, _react.useRef)(null);
+  var _useState6 = (0, _react.useState)(false),
+    showError = _useState6[0],
+    setShowError = _useState6[1];
+  var _useState7 = (0, _react.useState)(false),
+    isDirty = _useState7[0],
+    setIsDirty = _useState7[1];
+  var currencyCode = currency || _constants.currencyConstants.appDefaultCurrency;
+  var currencySymbol = (0, _react.useMemo)(function () {
+    var _currencyConstants$CU;
+    return ((_currencyConstants$CU = _constants.currencyConstants.CURRENCY_INFO[currencyCode]) === null || _currencyConstants$CU === void 0 ? void 0 : _currencyConstants$CU.symbol) || "$";
+  }, [currencyCode]);
+  var effectiveDecimalPlaces = (0, _react.useMemo)(function () {
+    if (decimalplaces > 0) return decimalplaces;
+    if (inputmode === "financial" && step && step < 1) {
+      var stepStr = step.toString();
+      if (stepStr.includes(".")) {
+        return stepStr.split(".")[1].length;
+      }
+    }
+    return decimalplaces;
+  }, [decimalplaces, inputmode, step]);
+  var htmlInputMode = effectiveDecimalPlaces > 0 ? "decimal" : "numeric";
+  var validateValue = (0, _react.useCallback)(function (value) {
+    return (0, _formatUtil.validateNumericValue)(value, required, minvalue, maxvalue);
+  }, [required, minvalue, maxvalue]);
+  var debouncedUpdateValue = (0, _react.useCallback)(lodash.debounce(function (value) {
+    var validation = validateValue(value);
+    setShowError(!validation.isValid);
+    if (onChange || listener !== null && listener !== void 0 && listener.onChange) {
+      (0, _formatUtil.handleValidatedValueUpdate)(value, props.fieldName || name, inputEl.current, onChange, listener, prevDatavalue, setPrevDatavalue, props);
+    }
+  }, parseInt(updatedelay || "10"), {
+    leading: parseInt(updatedelay) === 0
+  }), [validateValue, setShowError, onChange, listener, name, inputEl, prevDatavalue, setPrevDatavalue, updatedelay, props]);
+  var handleMouseEnter = (0, _react.useCallback)(function (event) {
+    onMouseEnter === null || onMouseEnter === void 0 || onMouseEnter(event, props);
+  }, [onMouseEnter]);
+  var handleMouseLeave = (0, _react.useCallback)(function (event) {
+    onMouseLeave === null || onMouseLeave === void 0 || onMouseLeave(event, props);
+  }, [onMouseLeave]);
+  var handleClick = (0, _react.useCallback)(function (event) {
+    onClick === null || onClick === void 0 || onClick(event, props);
+  }, [onClick]);
+  var handleFocus = (0, _react.useCallback)(function (e) {
+    onFocus === null || onFocus === void 0 || onFocus(e);
+  }, [onFocus]);
+  var handleArrowPress = (0, _react.useCallback)(function (event, direction) {
+    event.preventDefault();
+    if (readonly || disabled || !step || step === 0) {
+      return;
+    }
+    var targetVal = event.target.value.replace(/,/g, "");
+    var currentValue = targetVal && !isNaN(Number.parseFloat(targetVal)) ? Number.parseFloat(targetVal) : datavalue;
+    var newValue = (0, _formatUtil.handleStepValue)(currentValue, direction, step, effectiveDecimalPlaces, minvalue, maxvalue);
+    var cleanValue = newValue.toString();
+    setInternalValue(cleanValue);
+    setDatavalue(newValue);
+    setRawInputValue(cleanValue);
+    var validation = validateValue(newValue);
+    setShowError(!validation.isValid);
+    if (updateon === "keypress") {
+      debouncedUpdateValue(newValue);
+    }
+  }, [readonly, disabled, step, datavalue, minvalue, maxvalue, effectiveDecimalPlaces, validateValue, onChange, name, props, prevDatavalue, debouncedUpdateValue]);
+  var handleKeyDown = (0, _react.useCallback)(function (event) {
+    if (step && step !== 0) {
+      if (event.key === "ArrowUp") {
+        handleArrowPress(event, "UP");
+        return;
+      } else if (event.key === "ArrowDown") {
+        handleArrowPress(event, "DOWN");
+        return;
+      }
+    }
+    if (event.key === "Enter" && onEnter) {
+      onEnter(event);
+    }
+    if (onKeyDown) {
+      onKeyDown(event);
+    }
+  }, [handleArrowPress, onEnter, onKeyDown, step]);
+  var handleInputChange = function handleInputChange(event) {
+    var result = (0, _formatUtil.handleNumericInputChange)(event.target.value, inputmode, effectiveDecimalPlaces, setRawInputValue);
+    if (result.newVal === null && event.target.value !== "") {
+      return; // Invalid input, don't update
+    }
+    setInternalValue(result.inputValue);
+    setDatavalue(result.newVal);
+    var validation = validateValue(result.newVal);
+    setShowError(!validation.isValid);
+    if (updateon === "keypress") {
+      debouncedUpdateValue(result.newVal);
+    }
+  };
+  var handleBlur = function handleBlur(e) {
+    var _listener$Widgets;
+    // Ensure proper formatting on blur
+    var formattedValue = (0, _formatUtil.formatOnBlur)(datavalue, rawInputValue, trailingzero, effectiveDecimalPlaces);
+    if (formattedValue) {
+      setInternalValue(formattedValue);
+    }
+    if (updateon === "blur") {
+      debouncedUpdateValue(datavalue);
+    }
+    onBlur === null || onBlur === void 0 || onBlur(e, listener === null || listener === void 0 || (_listener$Widgets = listener.Widgets) === null || _listener$Widgets === void 0 ? void 0 : _listener$Widgets[name]);
+    if (updateon === "blur") {
+      debouncedUpdateValue(datavalue);
+    }
+    var validation = validateValue(datavalue);
+    setIsTouched(true);
+    setIsDirty(!validation.isValid);
+    setShowError(!validation.isValid);
+  };
+  (0, _react.useEffect)(function () {
+    if (initialDataValue != datavalue) {
+      setDatavalue(initialDataValue);
+      var cleanValue = initialDataValue !== null ? initialDataValue.toString() : "";
+      setInternalValue(cleanValue);
+      setRawInputValue(cleanValue);
+      setPrevDatavalue(datavalue);
+    }
+  }, [initialDataValue]);
+  var events = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, onClick ? {
+    onClick: handleClick
+  } : {}), onMouseEnter ? {
+    onMouseEnter: handleMouseEnter
+  } : {}), onMouseLeave ? {
+    onMouseLeave: handleMouseLeave
+  } : {}), onFocus ? {
+    onFocus: handleFocus
+  } : {}), {
+    onBlur: handleBlur
+  }), {
+    onChange: handleInputChange
+  }), {
+    onKeyDown: handleKeyDown
+  });
+  return __jsx(_material.Box, {
+    component: "div",
+    hidden: props.hidden,
+    className: "".concat(_constants.currencyConstants.DEFAULT_CLS, " ").concat(className || "", " ").concat(isTouched ? "ng-touched" : "ng-untouched", "  ").concat(isDirty ? "ng-invalid" : ""),
+    inputMode: htmlInputMode
+  }, __jsx(_material.Box, {
+    component: "span",
+    className: "input-group-addon"
+  }, currencySymbol), __jsx(_input.Input, (0, _extends2["default"])({
+    className: "form-control app-textbox app-currency-input app-input-wrapper ".concat(isTouched ? "ng-touched" : "ng-untouched", " ").concat(isDirty ? "ng-invalid" : ""),
+    value: internalValue,
+    name: name,
+    inputMode: htmlInputMode,
+    title: hint,
+    type: "text"
+  }, events, {
+    step: step,
+    min: minvalue,
+    max: maxvalue,
+    disabled: disabled,
+    readOnly: readonly,
+    required: required,
+    placeholder: placeholder,
+    "aria-label": arialabel,
+    tabIndex: tabindex,
+    accessKey: shortcutkey,
+    style: styles,
+    ref: inputEl
+  })));
+};
+var WithFormController = (0, _withFormController["default"])(WmCurrency);
+var WmCurrencyStandalone = exports.WmCurrency = (0, _withStandalone["default"])(WithFormController);
+/**
+ * The WmCurrency component provides a currency input with symbol, formatting, and step controls.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/input-currency--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/input-currency--docs)
+ *
+ * @param props - {@link WmCurrencyProps}
+ */
+var _default = exports["default"] = (0, _withBaseWrapper.withBaseWrapper)(WithFormController);

package/components/input/currency/props.d.ts

@@ -0,0 +1,154 @@
+import { BaseProps, Prettify } from "@wavemaker-ai/react-runtime/higherOrder/props";
+/**
+ * Props specific to the WmCurrency component.
+ */
+export interface CurrencyProps {
+    /**
+     * ISO 4217 currency code.
+     * @default "USD"
+     * @example "USD", "INR", "EUR"
+     */
+    currency?: string;
+    /**
+     * The symbol to display for the currency.
+     * @example "$", "₹", "€"
+     */
+    currencySymbol?: string;
+    /**
+     * Position of the currency symbol relative to the input.
+     * @default "left"
+     */
+    currencySymbolPosition?: "left" | "right";
+    /**
+     * Width of the currency symbol area.
+     */
+    currencySymbolWidth?: string;
+    /**
+     * Whether the input is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The unique name of the currency widget (required).
+     */
+    name: string;
+    /**
+     * Keyboard shortcut key to focus the input.
+     */
+    shortcutkey?: string;
+    /**
+     * Whether the input should be focused on mount.
+     */
+    autofocus?: boolean;
+    /**
+     * Props passed to the inner number input element.
+     */
+    inputProps?: Record<string, unknown>;
+    /**
+     * Formatted display value for the currency.
+     */
+    displayValue?: string;
+    /**
+     * CSS class name override.
+     */
+    class?: string;
+    /**
+     * Whether the currency input is read-only.
+     */
+    readonly?: boolean;
+    /**
+     * Whether a value is required.
+     */
+    required?: boolean;
+    /**
+     * Placeholder text shown when the input is empty.
+     * @default "Enter value"
+     */
+    placeholder?: string;
+    /**
+     * Maximum value allowed.
+     */
+    maxvalue?: number;
+    /**
+     * Minimum value allowed.
+     */
+    minvalue?: number;
+    /**
+     * Step increment for arrow key changes.
+     * @default 1
+     */
+    step?: number;
+    /**
+     * Text alignment within the input.
+     */
+    textAlign?: string;
+    /**
+     * Whether to display trailing zeros.
+     */
+    trailingzero?: boolean;
+    /**
+     * Input mode for the currency widget.
+     * - `"natural"`: Standard number input.
+     * - `"financial"`: Financial format.
+     * @default "natural"
+     */
+    inputmode?: "natural" | "financial";
+    /**
+     * Number of decimal places to display.
+     * @default 0
+     */
+    decimalplaces?: number;
+    /**
+     * When the data value should be updated.
+     * @default "blur"
+     */
+    updateon?: "blur" | "keypress";
+    /**
+     * Delay in milliseconds before updating the data value.
+     * @default "0"
+     */
+    updatedelay?: string;
+    /**
+     * The bound data value of the currency input.
+     */
+    datavalue?: number | null;
+    /**
+     * Callback invoked when the currency value changes.
+     */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>, widget: Record<string, unknown>, newVal: number | string | null, oldVal: number | string | null) => void;
+    /**
+     * Callback invoked when the input loses focus.
+     */
+    onBlur?: (event: React.FocusEvent<HTMLInputElement>, widget?: Record<string, unknown>) => void;
+    /**
+     * Callback invoked when the input receives focus.
+     */
+    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    /**
+     * Callback invoked when the input is clicked.
+     */
+    onClick?: (event: React.MouseEvent<HTMLInputElement>, widget?: Record<string, unknown>) => void;
+    /**
+     * Callback invoked when the mouse enters the input.
+     */
+    onMouseEnter?: (event: React.MouseEvent<HTMLInputElement>, widget?: Record<string, unknown>) => void;
+    /**
+     * Callback invoked when the mouse leaves the input.
+     */
+    onMouseLeave?: (event: React.MouseEvent<HTMLInputElement>, widget?: Record<string, unknown>) => void;
+    /**
+     * Callback invoked on key down.
+     */
+    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    /**
+     * Callback invoked when the Enter key is pressed.
+     */
+    onEnter?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    /**
+     * Field name used by the form controller.
+     */
+    fieldName?: string;
+}
+/**
+ * Combined props for the WmCurrency component, including base WaveMaker props.
+ */
+export type WmCurrencyProps = Prettify<CurrencyProps & BaseProps>;

package/components/input/currency/props.js

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

package/components/input/default/checkbox/index.d.ts

@@ -0,0 +1,150 @@
+import React from "react";
+declare const WmCheckboxStandalone: React.ComponentType<import("../../../data/form/form-controller/props").WithFormControllerProps & {
+    caption?: string;
+    checkedvalue?: string | boolean | number;
+    uncheckedvalue?: string | boolean | number;
+    datavalue?: any;
+    disabled?: boolean;
+    name: string;
+    readonly?: boolean;
+    required?: boolean;
+    shortcutkey?: string;
+    type?: string;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement> | undefined, widget: Record<string, unknown>, newVal: string | number | boolean, oldVal: string | number | boolean) => void;
+    onClick?: ((event?: React.MouseEvent<HTMLElement> | React.ChangeEvent<HTMLInputElement>, widget?: Record<string, unknown>, newVal?: string | number | boolean | null, oldVal?: string | number | boolean | null) => void) & ((event?: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void);
+    onFocus?: ((event: React.FocusEvent<HTMLElement> | React.ChangeEvent<HTMLInputElement>, widget?: Record<string, unknown>, newVal?: string | number | boolean | null, oldVal?: string | number | boolean | null) => void) & ((event: React.FocusEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void);
+    displayValue?: string;
+    selectedicon?: string;
+    unselectedicon?: string;
+    fieldName?: string;
+    standalone?: boolean;
+    ref?: React.RefObject<HTMLElement> | React.RefObject<null>;
+    animation?: string;
+    show?: boolean | string;
+    padding?: string;
+    margin?: string;
+    width?: number | string;
+    height?: number | string;
+    className?: string;
+    conditionalstyle?: React.CSSProperties;
+    conditionalclass?: string;
+    showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];
+    onDoubleClick?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseEnter?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseLeave?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseOver?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseOut?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onBlur?: (event: React.FocusEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onKeydown?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onKeyup?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onKeypress?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    eventCallback?: (eventName: string, data: any) => void;
+    forwardedRef?: React.ForwardedRef<any>;
+    viewParent?: any;
+    destroy?: ((names: string[]) => void) | ((formName?: string) => void);
+    hint?: string;
+    arialabel?: string;
+    tabindex?: number;
+    styles?: React.CSSProperties;
+    children?: React.ReactNode;
+    hidden?: boolean;
+    id?: string;
+    listener?: Record<string, any>;
+    "data-widget-id"?: string;
+    iswidget?: boolean | string;
+    deferload?: boolean | string;
+    "item-id"?: string;
+    prefab?: boolean;
+    inbound?: Record<string, any>;
+    outbound?: Record<string, any>;
+    key?: string;
+    formfield?: boolean;
+    updateon?: string;
+    dataset?: any;
+    prefabName?: string;
+} & import("@wavemaker-ai/react-runtime/higherOrder/withStandalone").WithStandaloneProps>;
+export { WmCheckboxStandalone as WmCheckbox };
+/**
+ * The WmCheckbox component provides a single checkbox input with customizable checked/unchecked values.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/input-checkbox--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/input-checkbox--docs)
+ *
+ * @param props - {@link WmCheckboxProps}
+ */
+declare const _default: React.ComponentType<{
+    [x: string]: any;
+    standalone?: boolean;
+    formRef?: any;
+    formKey?: string;
+    name: string;
+    datavalue?: any;
+    defaultvalue?: any;
+    validators?: import("../../../data/form/form-controller/props").ValidatorConfig[];
+    asyncValidators?: import("../../../data/form/form-controller/props").ValidatorConfig[];
+    required?: boolean;
+    maxchars?: number;
+    regexp?: string | RegExp;
+    validationmessage?: string;
+    hint?: string;
+    type?: string;
+    observe?: string[];
+    onBlur?: ((e: any) => void) & ((event: React.FocusEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void);
+    caption?: string;
+    checkedvalue?: string | boolean | number;
+    uncheckedvalue?: string | boolean | number;
+    disabled?: boolean;
+    readonly?: boolean;
+    shortcutkey?: string;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement> | undefined, widget: Record<string, unknown>, newVal: string | number | boolean, oldVal: string | number | boolean) => void;
+    onClick?: ((event?: React.MouseEvent<HTMLElement> | React.ChangeEvent<HTMLInputElement>, widget?: Record<string, unknown>, newVal?: string | number | boolean | null, oldVal?: string | number | boolean | null) => void) & ((event?: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void);
+    onFocus?: ((event: React.FocusEvent<HTMLElement> | React.ChangeEvent<HTMLInputElement>, widget?: Record<string, unknown>, newVal?: string | number | boolean | null, oldVal?: string | number | boolean | null) => void) & ((event: React.FocusEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void);
+    displayValue?: string;
+    selectedicon?: string;
+    unselectedicon?: string;
+    fieldName?: string;
+    ref?: React.RefObject<HTMLElement> | React.RefObject<null>;
+    animation?: string;
+    show?: boolean | string;
+    padding?: string;
+    margin?: string;
+    width?: number | string;
+    height?: number | string;
+    className?: string;
+    conditionalstyle?: React.CSSProperties;
+    conditionalclass?: string;
+    showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];
+    onDoubleClick?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseEnter?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseLeave?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseOver?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseOut?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onKeydown?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onKeyup?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onKeypress?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    eventCallback?: (eventName: string, data: any) => void;
+    forwardedRef?: React.ForwardedRef<any>;
+    viewParent?: any;
+    destroy?: ((names: string[]) => void) | ((formName?: string) => void);
+    arialabel?: string;
+    tabindex?: number;
+    styles?: React.CSSProperties;
+    children?: React.ReactNode;
+    hidden?: boolean;
+    id?: string;
+    listener?: Record<string, any>;
+    "data-widget-id"?: string;
+    iswidget?: boolean | string;
+    deferload?: boolean | string;
+    "item-id"?: string;
+    prefab?: boolean;
+    inbound?: Record<string, any>;
+    outbound?: Record<string, any>;
+    key?: string;
+    formfield?: boolean;
+    updateon?: string;
+    dataset?: any;
+    prefabName?: string;
+}>;
+export default _default;