{"version":3,"file":"NumberInputStegComponent-D1M5jEJN.js","sources":["../../../Features/Shared/Scripts/Utilities/Validering.tsx","../../../Features/Shared/Scripts/Components/NumberInputStegComponent.tsx"],"sourcesContent":["import { EpiContext } from '../Store/EpiContext/Types';\r\nimport { ValideringsResultat } from '../Models/ValideringsResultat';\r\nimport contentResolver from './EpiContentResolver';\r\n\r\nexport interface NumberValidering<T> {\r\n    min: number;\r\n    max: number;\r\n    minFeil: keyof T;\r\n    maxFeil: keyof T;\r\n    variablesMap: Map<string, string>;\r\n}\r\n\r\nexport const validerMinMax = <T extends {}>(\r\n    epiContext: EpiContext<T>,\r\n    value: number,\r\n    validering: NumberValidering<T>,\r\n\r\n): ValideringsResultat => {\r\n    if (value > validering.max) {\r\n        return feil(epiContext, validering.maxFeil, validering.max, validering.variablesMap);\r\n    } else if (value < validering.min) {\r\n        return feil(epiContext, validering.minFeil, validering.min, validering.variablesMap);\r\n    } else {\r\n        return validResult;\r\n    }\r\n};\r\n\r\nconst validResult = {\r\n    isValid: true,\r\n    isWarning: false,\r\n    feilElement: null,\r\n};\r\n\r\nconst feil = <T extends {}>(ec: EpiContext<T>, epikey: keyof T, number: number, map: Map<string, string>): ValideringsResultat => {\r\n    return {\r\n        isValid: false,\r\n        isWarning: false,\r\n        feilElement: contentResolver(ec, epikey, undefined, map),\r\n    };\r\n};\r\n","import React from 'react';\r\nimport { NumberInputDisplay } from './ValgDisplayFunctions';\r\nimport VeilederStegComponent, { VeilederStegBaseProps } from './VeilederStegComponent';\r\nimport { EpiAppStateMedSteg } from '../Store/Types';\r\nimport { connect } from 'react-redux';\r\nimport { setCollapsed } from '../Store/StegVisning/Actions';\r\nimport contentResolver from '../Utilities/EpiContentResolver';\r\nimport { EpiContext } from '../Store/EpiContext/Types';\r\nimport { ValideringsResultat } from '../Models/ValideringsResultat';\r\nimport { NumberValidering, validerMinMax } from '../Utilities/Validering';\r\nimport LabelWithErrorComponent from './LabelWithErrorComponent';\r\n\r\nexport interface NumberFormatter {\r\n    // Konverterer tall til en streng formattert for visning\r\n    toFormattetString: (tall: number) => string;\r\n    // Konverterer en streng som er formattert for visning til en streng som kan parses til tall\r\n    toParsableAsNumber: (verdi: string) => string;\r\n}\r\n\r\ntype NumberInputOwnProps<T> = VeilederStegBaseProps & {\r\n    inputId: string;\r\n    sporsmal: keyof T;\r\n    placeholder: string;\r\n    value?: number;\r\n    postfix: string;\r\n    isSmall?: boolean;\r\n    decimals: number;\r\n    validering: NumberValidering<T>;\r\n    ctaText: keyof T;\r\n    preValidation?: ValideringsResultat;\r\n    validationChecksum?: number;\r\n    numberDisplayFormatter?: NumberFormatter;\r\n    onInputChange: (valg: number) => void;\r\n    onValidationChanged: (result: ValideringsResultat | undefined) => void;\r\n};\r\n\r\ntype NumberInputProps<T> = NumberInputOwnProps<T> & MapStateToProps<T> & MapDispatchToProps;\r\n\r\ninterface NumberInputState {\r\n    verdi: number | string;\r\n    parsedVerdi: number | null;\r\n    valideringsResultat?: ValideringsResultat;\r\n    harBekreftetVerdi: boolean;\r\n    validationChecksum?: number;\r\n    isInErrorState: boolean;\r\n}\r\n\r\nclass NumberInputStegComponent<T> extends React.PureComponent<NumberInputProps<T>, NumberInputState> {\r\n    constructor(props: NumberInputProps<T>) {\r\n        super(props);\r\n        const verdi =\r\n            props.numberDisplayFormatter && props.value\r\n                ? props.numberDisplayFormatter.toFormattetString(props.value)\r\n                : props.value\r\n                ? props.value\r\n                : 0;\r\n        this.state = {\r\n            verdi,\r\n            parsedVerdi: props.value || null,\r\n            valideringsResultat: props.preValidation,\r\n            harBekreftetVerdi: props.value !== undefined,\r\n            validationChecksum: props.validationChecksum,\r\n            isInErrorState: false,\r\n        };\r\n        this.onInputChange = this.onInputChange.bind(this);\r\n        this.confirmValue = this.confirmValue.bind(this);\r\n    }\r\n\r\n    onInputKeyUp(e: KeyboardEvent): void {\r\n        if (e.key === 'enter') {\r\n            this.confirmValue();\r\n        }\r\n    }\r\n\r\n    confirmValue(): void {\r\n        const {\r\n            onInputChange,\r\n            stegVisningSetCollapsed,\r\n            sporsmalId,\r\n            epiContext,\r\n            validering,\r\n            onValidationChanged,\r\n        } = this.props;\r\n        const { parsedVerdi, verdi } = this.state;\r\n        const resultat = this.valider(parsedVerdi, epiContext, validering);\r\n        onValidationChanged(resultat);\r\n        onInputChange(parsedVerdi !== null ? parsedVerdi : Number(verdi));\r\n        if (resultat && resultat.isValid) {\r\n            this.visErrorMessage(false);\r\n            stegVisningSetCollapsed({ id: sporsmalId, isCollapsed: true });\r\n            this.setState({\r\n                parsedVerdi: parsedVerdi !== null ? parsedVerdi : Number(verdi),\r\n                harBekreftetVerdi: true,\r\n                valideringsResultat: resultat,\r\n            });\r\n        } else {\r\n            this.visErrorMessage(true);\r\n            this.setState({\r\n                valideringsResultat: resultat,\r\n            });\r\n        }\r\n    }\r\n\r\n    parse(verdi: string, decimals: number): number {\r\n        if(!verdi) {\r\n            return 0;\r\n        }\r\n        const { numberDisplayFormatter } = this.props;\r\n        const onlyDigits = verdi.replace(/[^(\\d+)\\.\\,]/,''); // removes everything thats not a number, unless its . or ,\r\n        const parsableValue = numberDisplayFormatter\r\n        ? numberDisplayFormatter.toParsableAsNumber(onlyDigits)\r\n        : onlyDigits;\r\n        const parsedStringToFloat = parseFloat(parseFloat(parsableValue).toFixed(decimals));\r\n        return !isNaN(parsedStringToFloat) ? parsedStringToFloat : 0;\r\n    }\r\n\r\n    onInputChange(e: React.ChangeEvent<HTMLInputElement>): void {\r\n        const { decimals, numberDisplayFormatter, validering } = this.props;\r\n        const newValueRaw = this.parse(e.target.value, decimals);\r\n        const newValueFormatted =\r\n            numberDisplayFormatter && newValueRaw\r\n                ? numberDisplayFormatter.toFormattetString(newValueRaw)\r\n                : (newValueRaw == null ? '' : newValueRaw);\r\n        this.setState(prevState => ({\r\n            ...prevState,\r\n            verdi: newValueFormatted,\r\n            parsedVerdi: newValueRaw,\r\n            harBekreftetVerdi: false,\r\n            validationChecksum: validering.max,\r\n        }));\r\n    }\r\n\r\n    valider(\r\n        newValueRaw: number | null,\r\n        epiContext: EpiContext<T>,\r\n        validering: NumberValidering<T>,\r\n    ): ValideringsResultat | undefined {\r\n        return validerMinMax(epiContext, newValueRaw != null ? newValueRaw : 0, validering);\r\n    }\r\n\r\n    displayElement(\r\n        parsedVerdi: number | null,\r\n        sporsmalId: string,\r\n        numberDisplayFormatter: NumberFormatter | undefined,\r\n        postfix: string,\r\n    ): JSX.Element {\r\n        return parsedVerdi !== null ? (\r\n            NumberInputDisplay(sporsmalId, {\r\n                id: '',\r\n                displayValue: `${\r\n                    numberDisplayFormatter ? numberDisplayFormatter.toFormattetString(parsedVerdi) : parsedVerdi\r\n                } ${postfix}`,\r\n            })\r\n        ) : (\r\n            <div />\r\n        );\r\n    }\r\n\r\n    visErrorMessage(show: boolean) {\r\n        document.getElementById(this.props.inputId)?.focus();\r\n        this.setState(previousState => ({...previousState, isInErrorState: show}));\r\n    }\r\n\r\n    render(): JSX.Element {\r\n        const {\r\n            postfix,\r\n            inputId,\r\n            sporsmalId,\r\n            tittel,\r\n            forklaring,\r\n            sporsmal,\r\n            isSmall,\r\n            placeholder,\r\n            numberDisplayFormatter,\r\n            epiContext,\r\n            ctaText,\r\n        } = this.props;\r\n\r\n        const {\r\n            verdi,\r\n            parsedVerdi,\r\n            valideringsResultat: currentResultat,\r\n            harBekreftetVerdi,\r\n            isInErrorState\r\n        } = this.state;\r\n\r\n        return (\r\n            <VeilederStegComponent\r\n                sporsmalId={sporsmalId}\r\n                tittel={tittel}\r\n                forklaring={forklaring}\r\n                inputArea={\r\n                    <div>\r\n                        <div className={`c-veileder__inputomrade ${!isInErrorState ? '' : 'c-veileder__inputomrade--feil'}`}>\r\n                            <LabelWithErrorComponent \r\n                                inputId={inputId} \r\n                                showError={isInErrorState && !!currentResultat} \r\n                                errorElement={currentResultat?.feilElement} >\r\n                                    {contentResolver(epiContext, sporsmal)}\r\n                            </LabelWithErrorComponent>                              \r\n                            <div\r\n                                className={[\r\n                                    'c-number-input',\r\n                                    isSmall || false ? 'c-number-input--small' : 'c-number-input--big',\r\n                                    isInErrorState ? 'c-number-input--feil' : '',\r\n                                ].join(' ')}\r\n                            >\r\n                                <input\r\n                                    className=\"c-number-input__input\"\r\n                                    placeholder={placeholder}\r\n                                    type=\"text\"\r\n                                    id={inputId}\r\n                                    onKeyUp={(e: React.KeyboardEvent): void => {\r\n                                        if (e.key === 'Enter') {\r\n                                            this.confirmValue();\r\n                                        }\r\n                                    }}\r\n                                    onChange={this.onInputChange}\r\n                                    value={verdi}\r\n                                />\r\n                                <div className=\"c-number-input__postfix\">\r\n                                    <span>{postfix}</span>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <div className=\"c-veileder__cta\">\r\n                            <button\r\n                                onClick={this.confirmValue}\r\n                                className=\"c-knapp c-knapp--cta c-knapp--secondary\"\r\n                            >\r\n                                {contentResolver(epiContext, ctaText)}\r\n                            </button>\r\n                        </div>\r\n                    </div>                \r\n                }\r\n                displayElement={this.displayElement(parsedVerdi, sporsmalId, numberDisplayFormatter, postfix)}\r\n                canCollapse={harBekreftetVerdi && !isInErrorState}\r\n                neverCollapse={false}\r\n            />\r\n        );\r\n    }\r\n}\r\n\r\ninterface MapStateToProps<T> {\r\n    epiContext: EpiContext<T>;\r\n}\r\n\r\ninterface MapDispatchToProps {\r\n    stegVisningSetCollapsed: typeof setCollapsed;\r\n}\r\n\r\n// eslint-disable-next-line @typescript-eslint/explicit-function-return-type\r\nexport default function NumberInputStegContainer<T>() {\r\n    return connect(\r\n        (state: EpiAppStateMedSteg<T>): MapStateToProps<T> => {\r\n            return {\r\n                epiContext: state.epiContext,\r\n            };\r\n        },\r\n        { stegVisningSetCollapsed: setCollapsed },\r\n    )(NumberInputStegComponent as new (props: NumberInputProps<T>) => NumberInputStegComponent<T>);\r\n}\r\n"],"names":["contentResolver","jsx","jsxs"],"mappings":"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"}