import { jsx as _jsx } from "react/jsx-runtime";
import { cn } from '../../../utils/cn.js';
import { DataFormFieldLayout } from '../shared/data_form_field_layout.js';
export function NumberField(props) {
    const { field, mode, value, config, on_change, on_blur } = props;
    const num_value = value != null ? String(value) : '';
    const field_style = config.style_resolver.has_style(mode === 'view' ? 'field_view' : 'field')
        ? config.style_resolver.to_style(mode === 'view' ? 'field_view' : 'field')
        : undefined;
    return (_jsx(DataFormFieldLayout, { ...props, children: mode === 'edit' ? (_jsx("input", { type: "number", className: cn('cls_data_form_number_input', 'w-full text-right'), style: field_style, value: num_value, placeholder: field.placeholder, disabled: field.disabled, min: field.min, max: field.max, step: field.decimal_places != null ? Math.pow(10, -field.decimal_places) : undefined, onChange: (e) => {
                const parsed = e.target.value === '' ? '' : parseFloat(e.target.value);
                on_change(parsed === '' ? '' : isNaN(parsed) ? '' : parsed);
            }, onBlur: on_blur })) : (_jsx("div", { className: "cls_data_form_number_view text-right", style: field_style, children: num_value || '\u00A0' })) }));
}
//# sourceMappingURL=number_field.js.map