{"version":3,"file":"defaultInput.gid9ojfn.js","sources":["../../../wwwdev/images/icons_input-success.svg","../../../wwwdev/images/icons_input-error.svg","../../../wwwdev/scripts/modules/react-input/inputToggle.tsx","../../../wwwdev/scripts/modules/react-input/defaultInput.tsx"],"sourcesContent":["export default \"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20500'%20style='fill:%20%230DC730;'%3e%3cpath%20d='M161.2%20386.9L44.7%20270.4%205%20309.8%20161.2%20466l335.3-335.3-39.4-39.4z'/%3e%3c/svg%3e\"","export default \"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20500'%3e%3cpath%20fill='%23FFF'%20d='M200%2068h96v344h-96z'/%3e%3cpath%20style='fill:%20%23e12a44;'%20d='M249.4%205.4C114.4%205.4%205.1%20114.8%205.1%20249.7S114.4%20494%20249.4%20494s244.3-109.4%20244.3-244.3S384.3%205.4%20249.4%205.4zM214%2078.3h70v230.8h-70V78.3zm66.2%20319.6c-8.6%207.2-18.9%2010.9-30.9%2010.9s-22.3-3.6-30.8-10.8c-8.5-7.2-12.7-15.8-12.7-26s4.2-18.9%2012.7-26%2018.7-10.7%2030.8-10.8c12%200%2022.3%203.6%2030.9%2010.8%208.6%207.2%2012.9%2015.8%2012.9%2026-.1%2010-4.4%2018.7-12.9%2025.9z'/%3e%3c/svg%3e\"","import React, { useState } from 'react';\r\nimport styled, { css } from 'styled-components';\r\nimport { SvgSprite } from 'modules/svgSprite';\r\n\r\n// #region Styles\r\n\r\nconst ClickArea = styled.span<{ validationState: boolean }>`\r\n    cursor: pointer;\r\n    position: absolute;\r\n    width: 30px;\r\n    height: 20px;\r\n    ${({ validationState }) =>\r\n        validationState\r\n            ? css`\r\n                  right: 10px;\r\n              `\r\n            : css`\r\n                  right: 33px;\r\n              `}\r\n    transform: translateY(-50%);\r\n    top: 50%;\r\n`;\r\n\r\nconst EyeIcon = styled(SvgSprite)`\r\n    width: 100%;\r\n    height: 100%;\r\n`;\r\n\r\n// #endregion Styles\r\n\r\ninterface IProps {\r\n    inputRef: React.MutableRefObject<any>;\r\n    validationState: boolean;\r\n}\r\n\r\nconst InputToggle = ({ inputRef, validationState = true }: IProps) => {\r\n    const [passwordShown, setPasswordShown] = useState<boolean>(false);\r\n\r\n    const togglePassword = () => {\r\n        setPasswordShown((oldState) => {\r\n            if (oldState === false) {\r\n                inputRef.current.type = 'text';\r\n                return true;\r\n            }\r\n            inputRef.current.type = 'password';\r\n            return false;\r\n        });\r\n    };\r\n\r\n    return (\r\n        <ClickArea onClick={togglePassword} validationState={validationState}>\r\n            <EyeIcon sprite={passwordShown ? 'EyeSlash' : 'Eye'} />\r\n        </ClickArea>\r\n    );\r\n};\r\n\r\nexport default InputToggle;\r\n","import type React from 'react';\r\nimport {\r\n    type InputHTMLAttributes,\r\n    useState,\r\n    useEffect,\r\n    useImperativeHandle,\r\n    forwardRef,\r\n    useRef,\r\n    type KeyboardEvent\r\n} from 'react';\r\nimport styled, { css, type RuleSet } from 'styled-components';\r\nimport { colors } from 'variables';\r\nimport { rem } from 'modules/helpers/style';\r\nimport { Typography } from 'components/generic/typography';\r\nimport successIcon from '../../../images/icons_input-success.svg';\r\nimport errorIcon from '../../../images/icons_input-error.svg';\r\nimport InputToggle from './inputToggle';\r\n\r\nexport interface IValidation {\r\n    message?: string;\r\n    state?: boolean;\r\n}\r\n\r\nexport const Input = styled.input<{ validationState?: boolean }>`\r\n    position: relative;\r\n    height: ${rem('40px')};\r\n    width: 100%;\r\n    padding: 0 40px 0 10px;\r\n    outline: none;\r\n    box-sizing: border-box;\r\n    background-repeat: no-repeat;\r\n    background-position: calc(100% - 10px) center;\r\n    background-size: 15px;\r\n    border: 1px solid ${colors.quinary};\r\n\r\n    margin-bottom: 0;\r\n\r\n    ${({ validationState }): RuleSet | null => {\r\n        switch (validationState) {\r\n            case true:\r\n                return css`\r\n                    border-color: ${colors.success};\r\n                    background-color: ${colors.successLight};\r\n                `;\r\n            case false:\r\n                return css`\r\n                    border-color: ${colors.error};\r\n                    background-color: ${colors.errorLight};\r\n                `;\r\n            default:\r\n                return null;\r\n        }\r\n    }}\r\n`;\r\n\r\nconst Wrapper = styled.div`\r\n    display: flex;\r\n    flex-direction: column;\r\n    width: 100%;\r\n`;\r\n\r\nconst InputContainer = styled.div<{ validationState?: boolean }>`\r\n    /* For validation icon */\r\n    position: relative;\r\n\r\n    &:after {\r\n        ${({ validationState }): RuleSet =>\r\n            typeof validationState === 'boolean' &&\r\n            css`\r\n                content: url(${validationState ? successIcon : errorIcon});\r\n                position: absolute;\r\n                height: ${rem(38)};\r\n                width: ${rem(38)};\r\n                padding: ${rem(10)};\r\n                right: 1px;\r\n                transform: translateY(-50%);\r\n                top: 50%;\r\n            `}\r\n    }\r\n`;\r\n\r\nexport const Title = styled(Typography.Body)<{ validationState?: boolean }>`\r\n    margin-bottom: 6px;\r\n    ${({ validationState }): string =>\r\n        typeof validationState === 'boolean' && `color: ${validationState ? colors.success : colors.error};`}\r\n`;\r\n\r\nconst Notification = styled.span`\r\n    font-style: italic;\r\n    font-size: 11px;\r\n    align-self: flex-end;\r\n    color: ${colors.positive};\r\n`;\r\n\r\nexport interface IDefaultInput extends InputHTMLAttributes<HTMLInputElement> {\r\n    label?: string;\r\n    placeholder?: string;\r\n    onValueChange?: (value: InputHTMLAttributes<HTMLInputElement>['value']) => void;\r\n    onEnter?: (value) => void;\r\n    validation?: IValidation;\r\n    notification?: string;\r\n    labelComponent?: () => JSX.Element;\r\n    isPassword?: boolean;\r\n}\r\n\r\nexport default forwardRef<HTMLInputElement, IDefaultInput>((props: IDefaultInput, ref): JSX.Element => {\r\n    const {\r\n        label,\r\n        placeholder,\r\n        notification,\r\n        value: initialValue = '',\r\n        onValueChange,\r\n        onChange: initialOnChange,\r\n        onEnter,\r\n        labelComponent,\r\n        isPassword = false,\r\n        validation = {},\r\n        ...rest\r\n    } = props;\r\n    const [value, setValue] = useState(initialValue || '');\r\n    const { state, message } = validation;\r\n\r\n    const inputRef = useRef(null);\r\n\r\n    const onChange = (e: React.ChangeEvent<HTMLInputElement>): void => {\r\n        setValue((e.target as HTMLInputElement).value);\r\n        if (initialOnChange) initialOnChange(e);\r\n    };\r\n\r\n    const onKeyup = (event: KeyboardEvent<HTMLInputElement>) => {\r\n        const { key } = event;\r\n\r\n        if (key === 'Enter' && onEnter) {\r\n            onEnter(event);\r\n        }\r\n    };\r\n\r\n    useEffect(() => {\r\n        setValue(initialValue);\r\n    }, [initialValue]);\r\n\r\n    useEffect((): void => {\r\n        if (onValueChange) onValueChange(value);\r\n    }, [onValueChange, value]);\r\n\r\n    const setInputValue = (val): void => {\r\n        if (typeof val === 'undefined' || val === null) {\r\n            return;\r\n        }\r\n        setValue(val);\r\n    };\r\n\r\n    useImperativeHandle(ref, (): any => ({ setInputValue }));\r\n\r\n    const GetTitle = (): JSX.Element | null => {\r\n        if (validation && message) {\r\n            return (\r\n                <Title size=\"M\" strong validationState={state} forwardedAs=\"span\">\r\n                    {message}\r\n                </Title>\r\n            );\r\n        }\r\n        if (labelComponent) {\r\n            return labelComponent();\r\n        }\r\n        if (label) {\r\n            return (\r\n                <Title size=\"M\" strong forwardedAs=\"span\">\r\n                    {label}\r\n                </Title>\r\n            );\r\n        }\r\n        return null;\r\n    };\r\n\r\n    return (\r\n        <Wrapper>\r\n            <GetTitle />\r\n            <InputContainer validationState={state}>\r\n                <Input\r\n                    value={value}\r\n                    onChange={onChange}\r\n                    onKeyUp={onKeyup}\r\n                    ref={inputRef}\r\n                    placeholder={placeholder}\r\n                    validationState={state}\r\n                    {...rest}\r\n                />\r\n                {isPassword && <InputToggle inputRef={inputRef} validationState={state} />}\r\n            </InputContainer>\r\n            {notification && <Notification>{notification}</Notification>}\r\n        </Wrapper>\r\n    );\r\n});\r\n"],"names":["successIcon","errorIcon","ClickArea","styled","span","withConfig","displayName","componentId","validationState","css","EyeIcon","SvgSprite","InputToggle","inputRef","passwordShown","setPasswordShown","useState","togglePassword","oldState","current","type","jsx","Input","input","rem","colors","quinary","success","successLight","error","errorLight","Wrapper","div","InputContainer","Title","Typography","Body","Notification","positive","Input$1","forwardRef","props","ref","label","placeholder","notification","value","initialValue","onValueChange","onChange","initialOnChange","onEnter","labelComponent","isPassword","validation","rest","setValue","state","message","useRef","e","target","onKeyup","event","key","useEffect","setInputValue","val","useImperativeHandle","GetTitle","jsxs"],"mappings":"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"}