{"version":3,"file":"index42.cjs","sources":["../src/components/input/textfield/steppers/index.tsx"],"sourcesContent":["import { FunctionComponent, ReactNode, useEffect, useState } from \"react\";\nimport TextFieldAtom from \"../../../../atoms/textfield\";\nimport IconButton from \"../../../buttons/icon\";\nimport {\n  LabelPairedMinusSmBoldIcon,\n  LabelPairedPlusSmBoldIcon,\n} from \"@deriv/quill-icons\";\n\nexport type TextFieldStepperType = {\n  id?: string;\n  name?: string;\n  className?: string;\n  label?: string;\n  labelRight?: string;\n  message?: string;\n  placeholder?: string;\n\n  /** Variant props */\n  indicator?: \"neutral\" | \"fail\" | \"success\";\n  state?: \"default\" | \"disabled\";\n  type?: \"outline\" | \"fill\";\n  textAlignment?: \"left\" | \"center\";\n  size?: \"lg\" | \"md\" | \"sm\";\n\n  /** Custom props */\n  iconLeft?: ReactNode;\n  iconRight?: ReactNode;\n  iconStatus?: ReactNode;\n  labelLeft?: string;\n  isRequired?: boolean;\n  optionalText?: string;\n  maxLength?: number;\n  messages?: {\n    text: string;\n    type: \"neutral\" | \"fail\" | \"success\";\n    icon?: ReactNode;\n  }[];\n  onChange?: (value: string | number) => void;\n  variant?: \"labelled\" | \"labelless\";\n  value?: string | number;\n  decimalPlaces?: number;\n  maxValue?: number;\n  minValue?: number;\n  increment?: string | number;\n  split?: boolean;\n};\n\nexport const TextFieldStepper: FunctionComponent<TextFieldStepperType> = ({\n  maxValue = 1000,\n  minValue = 0,\n  decimalPlaces = 0,\n  value: initialValue,\n  variant = \"labelled\",\n  state,\n  onChange,\n  increment = 1,\n  split = false,\n  ...props\n}) => {\n  const [value, setValue] = useState(initialValue ?? 0);\n\n  const handleChange = (value: string | number) => {\n    const formattedValue = formatFloats(value);\n    setValue(formattedValue);\n    onChange?.(formattedValue);\n  };\n\n  const formatFloats = (value: string | number): number => {\n    // Handle empty/invalid input\n    if (value === null || value === \"\" || isNaN(Number(value))) {\n      return 0;\n    }\n\n    let numValue = Number(value);\n\n    // If number is too large or in scientific notation, cap it at maxValue\n    if (!Number.isFinite(numValue) || numValue > maxValue) {\n      return maxValue;\n    }\n\n    // If number is too small, cap it at minValue\n    if (numValue < minValue) {\n      return minValue;\n    }\n\n    // Format to specified decimal places\n    return Number(numValue.toFixed(decimalPlaces));\n  };\n\n  const validateInput = (nextChar: string | number) => {\n    const disallowedKeys = [\"e\", \"E\"];\n\n    // Check if the key is allowed\n    if (disallowedKeys.includes(nextChar.toString())) return false;\n\n    return true;\n  };\n\n  useEffect(() => {\n    if (value !== undefined) {\n      const formattedValue = parseFloat(value.toString()).toFixed(\n        decimalPlaces\n      );\n      setValue(formattedValue);\n    }\n  }, [value, maxValue, decimalPlaces]);\n\n  const minusButton = (\n    <IconButton\n      style=\"tertiary\"\n      size=\"sm\"\n      state={state === \"disabled\" ? \"disabled\" : \"default\"}\n      icon={<LabelPairedMinusSmBoldIcon />}\n      onClick={() => handleChange(Number(value || 0) - Number(increment))}\n      color=\"black\"\n    />\n  );\n\n  const plusButton = (\n    <IconButton\n      style=\"tertiary\"\n      size=\"sm\"\n      state={state === \"disabled\" ? \"disabled\" : \"default\"}\n      icon={<LabelPairedPlusSmBoldIcon />}\n      onClick={() => handleChange(Number(value || 0) + Number(increment))}\n      color=\"black\"\n    />\n  );\n\n  let iconExtra,\n    iconLeft,\n    iconRight,\n    textAlignment: \"left\" | \"center\" = \"left\";\n  iconRight = plusButton;\n\n  if (split) {\n    iconLeft = minusButton;\n    textAlignment = \"center\";\n  } else {\n    iconExtra = minusButton;\n  }\n\n  return (\n    <TextFieldAtom\n      {...props}\n      inputType=\"number\"\n      onChange={handleChange}\n      value={value}\n      state={state}\n      variant={variant}\n      iconExtra={iconExtra}\n      iconLeft={iconLeft}\n      iconRight={iconRight}\n      textAlignment={textAlignment}\n      onBeforeChange={(nextChar: string | number) => validateInput(nextChar)}\n    />\n  );\n};\n\nTextFieldStepper.displayName = \"TextFieldStepper\";\n\nexport default TextFieldStepper;\n"],"names":["useState","value","useEffect","jsx","IconButton","LabelPairedMinusSmBoldIcon","LabelPairedPlusSmBoldIcon","TextFieldAtom"],"mappings":";;;;;;;AA+CO,MAAM,mBAA4D,CAAC;AAAA,EACxE,WAAW;AAAA,EACX,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB,OAAO;AAAA,EACP,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,GAAG;AACL,MAAM;AACJ,QAAM,CAAC,OAAO,QAAQ,IAAIA,MAAAA,SAAS,gBAAgB,CAAC;AAE9C,QAAA,eAAe,CAACC,WAA2B;AACzC,UAAA,iBAAiB,aAAaA,MAAK;AACzC,aAAS,cAAc;AACvB,yCAAW;AAAA,EACb;AAEM,QAAA,eAAe,CAACA,WAAmC;AAEnDA,QAAAA,WAAU,QAAQA,WAAU,MAAM,MAAM,OAAOA,MAAK,CAAC,GAAG;AACnD,aAAA;AAAA,IAAA;AAGL,QAAA,WAAW,OAAOA,MAAK;AAG3B,QAAI,CAAC,OAAO,SAAS,QAAQ,KAAK,WAAW,UAAU;AAC9C,aAAA;AAAA,IAAA;AAIT,QAAI,WAAW,UAAU;AAChB,aAAA;AAAA,IAAA;AAIT,WAAO,OAAO,SAAS,QAAQ,aAAa,CAAC;AAAA,EAC/C;AAEM,QAAA,gBAAgB,CAAC,aAA8B;AAC7C,UAAA,iBAAiB,CAAC,KAAK,GAAG;AAGhC,QAAI,eAAe,SAAS,SAAS,SAAU,CAAA,EAAU,QAAA;AAElD,WAAA;AAAA,EACT;AAEAC,QAAAA,UAAU,MAAM;AACd,QAAI,UAAU,QAAW;AACvB,YAAM,iBAAiB,WAAW,MAAM,SAAA,CAAU,EAAE;AAAA,QAClD;AAAA,MACF;AACA,eAAS,cAAc;AAAA,IAAA;AAAA,EAExB,GAAA,CAAC,OAAO,UAAU,aAAa,CAAC;AAEnC,QAAM,cACJC,2BAAA;AAAA,IAACC,QAAA;AAAA,IAAA;AAAA,MACC,OAAM;AAAA,MACN,MAAK;AAAA,MACL,OAAO,UAAU,aAAa,aAAa;AAAA,MAC3C,qCAAOC,WAA2B,4BAAA,EAAA;AAAA,MAClC,SAAS,MAAM,aAAa,OAAO,SAAS,CAAC,IAAI,OAAO,SAAS,CAAC;AAAA,MAClE,OAAM;AAAA,IAAA;AAAA,EACR;AAGF,QAAM,aACJF,2BAAA;AAAA,IAACC,QAAA;AAAA,IAAA;AAAA,MACC,OAAM;AAAA,MACN,MAAK;AAAA,MACL,OAAO,UAAU,aAAa,aAAa;AAAA,MAC3C,qCAAOE,WAA0B,2BAAA,EAAA;AAAA,MACjC,SAAS,MAAM,aAAa,OAAO,SAAS,CAAC,IAAI,OAAO,SAAS,CAAC;AAAA,MAClE,OAAM;AAAA,IAAA;AAAA,EACR;AAGE,MAAA,WACF,UACA,WACA,gBAAmC;AACzB,cAAA;AAEZ,MAAI,OAAO;AACE,eAAA;AACK,oBAAA;AAAA,EAAA,OACX;AACO,gBAAA;AAAA,EAAA;AAIZ,SAAAH,2BAAA;AAAA,IAACI;AAAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAU;AAAA,MACV,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,gBAAgB,CAAC,aAA8B,cAAc,QAAQ;AAAA,IAAA;AAAA,EACvE;AAEJ;AAEA,iBAAiB,cAAc;;;"}