19028.0d0fac47.iframe.bundle.js.map

{"version":3,"file":"19028.0d0fac47.iframe.bundle.js","mappings":";;;AA+CA;;AAEA;AACA;AACA;AA7CA;;;;;;AAoDA;;;AAGA;;;AAGA;AACA;;;;;AAKA;;;;;;;;AAQA;;;;ACvEA;AAGA;;;;;;;;;AANA;AAAA;AAAA;;ACIA;AACA;;AAEA;AACA;;AAIA;AAuBA;AACA;AACA;AAXA;AAaA;AACA;;;AAMA;;AAEA;AACA;;;;;;;;AAQA;AACA;;;;;AAKA;AACA;AACA;AACA;AACA;;;;AC7DA;;AAEA;AACA;AAGA;AAmBA;;ACzBA;AACA;AACA;AAGA;;AAkBA;;ACzBA;AACA;;AAEA;AACA;;AAIA;AAuBA;AACA;AACA;AAXA;AAaA;;;AAGA;;AAEA;AACA;;;;;;;;AAQA;AACA;;;;;AAKA;AACA;AACA;AACA;;;;;;;;ACtDA;;;;;;;;;;;;;ACQA;;;;;;;;ACpBA;;AD8BA;AACA;AAKA;;;;;;;;;;;;;;AEfA;;;;ADrBA;;AC6CA","sources":["webpack://@freenow/wave/./src/components/Input/BaseInput.ts","webpack://@freenow/wave/./src/components/Input/BaseInputLabel.tsx","webpack://@freenow/wave/./src/components/Input/BoxedInput.ts","webpack://@freenow/wave/./src/components/Input/BoxedInputLabel.ts","webpack://@freenow/wave/./src/components/Input/BottomLinedInputLabel.ts","webpack://@freenow/wave/./src/components/Input/BottomLinedInput.ts","webpack://@freenow/wave/./src/components/Input/InputWrapper.ts","webpack://@freenow/wave/./src/components/Password/ToggleButton.ts","webpack://@freenow/wave/./src/components/Password/constants.ts","webpack://@freenow/wave/./src/components/Password/Password.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { compose, variant, width } from 'styled-system';\nimport { get } from '../../utils/themeGet';\nimport { InputProps } from './InputProps';\nimport { getSemanticValue } from '../../utils/cssVariables';\n\nconst ANIMATION_DURATION = 100;\n\nconst sizeVariant = variant<Record<string, unknown>, 'small' | 'medium'>({\n    prop: 'size',\n    variants: {\n        small: {\n            fontSize: get('fontSizes.1')\n        },\n        medium: {\n            fontSize: get('fontSizes.2')\n        }\n    }\n});\n\nconst inputVariants = variant({\n    variants: {\n        boxed: {\n            borderRadius: get('radii.2'),\n            border: `0.0625rem solid ${getSemanticValue('border-neutral-default')}`,\n            '&:active, &:focus': {\n                borderColor: getSemanticValue('border-focus'),\n                boxShadow: `inset 0 0 0 0.0625rem ${getSemanticValue('border-focus')}`\n            }\n        },\n        'bottom-lined': {\n            border: 'none',\n            borderTopLeftRadius: get('radii.1'),\n            borderTopRightRadius: get('radii.1'),\n            borderBottom: `0.0625rem solid ${getSemanticValue('border-neutral-default')}`,\n\n            '&:active, &:focus': {\n                borderColor: getSemanticValue('border-focus'),\n                boxShadow: `inset 0 -0.0625rem 0 0 ${getSemanticValue('border-focus')}`\n            }\n        }\n    }\n});\n\nconst BaseInput = styled.input<InputProps>`\n    margin: 0;\n    box-sizing: border-box;\n    background: ${getSemanticValue('background-page-default')};\n    border-radius: 0;\n    color: ${getSemanticValue('foreground-primary')};\n    font-size: ${get('fontSizes.2')};\n    font-family: ${get('fonts.normal')};\n    transition: box-shadow ${ANIMATION_DURATION}ms, border ${ANIMATION_DURATION}ms;\n    outline: none;\n    appearance: none;\n    width: 100%;\n\n    &::placeholder {\n        color: ${getSemanticValue('foreground-neutral-default')};\n    }\n\n    ${compose(width, sizeVariant, inputVariants)};\n\n    &:disabled {\n        color: ${getSemanticValue('foreground-disabled')};\n        border-color: ${getSemanticValue('border-disabled')};\n        box-shadow: none;\n        cursor: not-allowed;\n\n        &::placeholder {\n            color: ${getSemanticValue('foreground-disabled')};\n        }\n    }\n\n    &:-webkit-autofill,\n    &:-webkit-autofill:hover,\n    &:-webkit-autofill:focus,\n    &:-webkit-autofill:active {\n        -webkit-text-fill-color: ${getSemanticValue('foreground-primary')};\n        transition: background-color 99999999ms ease 99999999ms;\n    }\n`;\n\nexport { BaseInput };\n","import styled, { css } from 'styled-components';\nimport { theme } from '../../essentials/theme';\nimport { get } from '../../utils/themeGet';\n\nconst ANIMATION_DURATION = 100;\n\nconst activePositionBaseStyles = css`\n    font-weight: ${get('fontWeights.semibold')};\n`;\n\nconst BaseInputLabel = styled.label.attrs({ theme })`\n    position: absolute;\n    pointer-events: none;\n    background-color: transparent;\n    line-height: 1.5;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    max-width: calc(100% - 2rem);\n    transition: top ${ANIMATION_DURATION}ms ease-out, left ${ANIMATION_DURATION}ms ease-out,\n        padding ${ANIMATION_DURATION}ms ease-out, font-size ${ANIMATION_DURATION}ms ease-out,\n        color ${ANIMATION_DURATION}ms ease-out, background ${ANIMATION_DURATION}ms ease-out;\n`;\n\nexport { BaseInputLabel, activePositionBaseStyles };\n","import styled, { css } from 'styled-components';\nimport { variant } from 'styled-system';\nimport { BaseInput } from './BaseInput';\nimport { activeBoxedPosition, BoxedInputLabel } from './BoxedInputLabel';\nimport { getSemanticValue } from '../../utils/cssVariables';\nimport { InternalInputProps } from './InputProps';\n\nconst errorStyles = css`\n    box-shadow: inset 0 0 0 0.0625rem ${getSemanticValue('border-danger-default')};\n    border-color: ${getSemanticValue('border-danger-default')};\n\n    & ~ ${BoxedInputLabel} {\n        color: ${getSemanticValue('foreground-danger-default')};\n    }\n`;\n\nconst sizeVariant = variant({\n    prop: 'waveSize',\n    variants: {\n        small: {\n            height: '2rem',\n            padding: '0 0.5rem'\n        },\n        medium: {\n            height: '3rem',\n            padding: '0 0.75rem'\n        }\n    }\n});\n\nconst getLabelColor = ({ hasValue }: InternalInputProps) => {\n    if (hasValue) {\n        return getSemanticValue('foreground-neutral-emphasized');\n    }\n\n    return getSemanticValue('foreground-neutral-default');\n};\n\nconst BoxedInput = styled(BaseInput)<InternalInputProps>`\n    ${sizeVariant}\n    & + ${BoxedInputLabel} {\n        ${p => (p.hasValue || p.placeholder ? activeBoxedPosition(p.waveSize) : undefined)};\n        color: ${getLabelColor};\n        background: ${getSemanticValue('background-page-default')};\n        background: ${p =>\n            `linear-gradient(0deg, \n            ${getSemanticValue('background-page-default')} \n            calc(50% + ${p.waveSize === 'small' ? '0.0825rem' : '0.0625rem'}), transparent 50%)`};\n    }\n\n    ${p => (p.error ? errorStyles : undefined)}\n    &:disabled {\n        & + ${BoxedInputLabel} {\n            color: ${getSemanticValue('foreground-disabled')};\n        }\n    }\n\n    &:-webkit-autofill,\n    &:-webkit-autofill:hover,\n    &:-webkit-autofill:focus,\n    &:-webkit-autofill:active {\n        & + ${BoxedInputLabel} {\n            ${p => activeBoxedPosition(p.waveSize)};\n        }\n    }\n\n    &:focus:not(:disabled) {\n        & + ${BoxedInputLabel} {\n            ${p => activeBoxedPosition(p.waveSize)};\n            color: ${getSemanticValue('foreground-focus')};\n            background: ${getSemanticValue('background-page-default')};\n            background: ${p =>\n                `linear-gradient(0deg, \n                ${getSemanticValue('background-page-default')} \n                calc(50% + ${p.waveSize === 'small' ? '0.0825rem' : '0.0625rem'}), transparent 50%)`};\n        }\n    }\n`;\n\nexport { BoxedInput };\n","import styled, { css, Interpolation, ThemeProps } from 'styled-components';\nimport { variant } from 'styled-system';\nimport { theme } from '../../essentials/theme';\nimport { get } from '../../utils/themeGet';\nimport { activePositionBaseStyles, BaseInputLabel } from './BaseInputLabel';\nimport { InternalInputProps } from './InputProps';\n\nconst activeBoxedPosition = (\n    size: InternalInputProps['waveSize']\n): ReadonlyArray<Interpolation<ThemeProps<unknown>>> => css`\n    ${activePositionBaseStyles};\n\n    top: ${size === 'small' ? '-0.375rem' : '-0.5rem'};\n    font-size: ${size === 'small' ? '0.625rem' : get('fontSizes.0')};\n`;\n\nconst sizeVariant = variant({\n    prop: 'waveSize',\n    variants: {\n        small: {\n            top: '0.5rem',\n            left: '0.375rem',\n            padding: '0 0.125rem',\n            fontSize: get('fontSizes.1')\n        },\n        medium: {\n            top: '0.75rem',\n            left: '0.5rem',\n            padding: '0 0.25rem',\n            fontSize: get('fontSizes.2')\n        }\n    }\n});\n\nconst BoxedInputLabel = styled(BaseInputLabel).attrs({ theme })<Pick<InternalInputProps, 'waveSize'>>`\n    ${sizeVariant};\n`;\n\nexport { activeBoxedPosition, BoxedInputLabel };\n","import styled, { css, Interpolation, ThemeProps } from 'styled-components';\nimport { variant } from 'styled-system';\nimport { theme } from '../../essentials/theme';\nimport { get } from '../../utils/themeGet';\nimport { activePositionBaseStyles, BaseInputLabel } from './BaseInputLabel';\nimport { InternalInputProps } from './InputProps';\n\nconst activeBottomLinedPosition = (\n    size?: InternalInputProps['waveSize']\n): ReadonlyArray<Interpolation<ThemeProps<unknown>>> => css`\n    ${activePositionBaseStyles};\n    top: ${size === 'small' ? '0' : '0.25rem'};\n    font-size: ${size === 'small' ? '0.625rem' : get('fontSizes.0')};\n`;\n\nconst sizeVariant = variant({\n    prop: 'waveSize',\n    variants: {\n        small: {\n            top: '0.875rem',\n            padding: '0 0.125rem',\n            fontSize: get('fontSizes.1')\n        },\n        medium: {\n            top: '1.375rem',\n            padding: '0 0.25rem',\n            fontSize: get('fontSizes.2')\n        }\n    }\n});\n\nconst BottomLinedInputLabel = styled(BaseInputLabel).attrs({ theme })<Pick<InternalInputProps, 'waveSize'>>`\n    left: 0;\n    ${sizeVariant}\n`;\n\nexport { activeBottomLinedPosition, BottomLinedInputLabel };\n","import styled, { css } from 'styled-components';\nimport { variant } from 'styled-system';\nimport { BaseInput } from './BaseInput';\nimport { activeBottomLinedPosition, BottomLinedInputLabel } from './BottomLinedInputLabel';\nimport { getSemanticValue } from '../../utils/cssVariables';\nimport { InternalInputProps } from './InputProps';\n\nconst errorStyles = css`\n    box-shadow: inset 0 -0.0625rem 0 0 ${getSemanticValue('border-danger-default')};\n    border-color: ${getSemanticValue('border-danger-default')};\n\n    & ~ ${BottomLinedInputLabel} {\n        color: ${getSemanticValue('foreground-danger-default')};\n    }\n`;\n\nconst sizeVariant = variant({\n    prop: 'waveSize',\n    variants: {\n        small: {\n            height: '2.5rem',\n            padding: '1rem 0.125rem 0.375rem'\n        },\n        medium: {\n            height: '3.5rem',\n            padding: '1.625rem 0.25rem 0.625rem'\n        }\n    }\n});\n\nconst getLabelColor = ({ hasValue }: InternalInputProps) => {\n    if (hasValue) {\n        return getSemanticValue('foreground-neutral-emphasized');\n    }\n\n    return getSemanticValue('foreground-neutral-default');\n};\n\nconst BottomLinedInput = styled(BaseInput)<InternalInputProps>`\n    ${sizeVariant}\n    & ~ ${BottomLinedInputLabel} {\n        ${p => (p.hasValue || p.placeholder ? activeBottomLinedPosition(p.waveSize) : '')};\n        color: ${getLabelColor};\n        background: ${getSemanticValue('background-page-default')};\n    }\n\n    ${p => (p.error ? errorStyles : undefined)}\n    &:disabled {\n        & ~ ${BottomLinedInputLabel} {\n            color: ${getSemanticValue('foreground-disabled')};\n        }\n    }\n\n    &:-webkit-autofill,\n    &:-webkit-autofill:hover,\n    &:-webkit-autofill:focus,\n    &:-webkit-autofill:active {\n        & + ${BottomLinedInputLabel} {\n            ${p => activeBottomLinedPosition(p.waveSize)};\n        }\n    }\n\n    &:focus:not(:disabled) {\n        & ~ ${BottomLinedInputLabel} {\n            ${p => activeBottomLinedPosition(p.waveSize)};\n            color: ${getSemanticValue('foreground-focus')};\n            background: ${getSemanticValue('background-page-default')};\n        }\n    }\n`;\n\nexport { BottomLinedInput };\n","import styled from 'styled-components';\nimport { compose, margin, MarginProps, width, WidthProps } from 'styled-system';\nimport { theme } from '../../essentials/theme';\nimport { ClassNameProps } from '../../utils/extractProps';\n\ntype InputWrapperProps = ClassNameProps & MarginProps & WidthProps;\n\nconst InputWrapper = styled.div.attrs<InputWrapperProps>({ theme })`\n    display: inline-block;\n    position: relative;\n    box-sizing: border-box;\n\n    ${compose(margin, width)}\n`;\n\nexport { InputWrapper, InputWrapperProps };\n","import { variant } from 'styled-system';\nimport styled from 'styled-components';\n\nimport { get } from '../../utils/themeGet';\nimport { InputProps } from '../Input/InputProps';\nimport { TOGGLE_MODE_BUTTON_WIDTH } from './constants';\n\nconst inputType = variant({\n    prop: 'variant',\n    variants: {\n        'bottom-lined': {\n            justifyContent: 'right'\n        }\n    }\n});\n\nconst ToggleButton = styled.button<Pick<InputProps, 'size' | 'variant'>>`\n    box-sizing: border-box;\n    position: absolute;\n    background: transparent;\n    border-radius: ${get('radii.2')};\n    border: none;\n    cursor: pointer;\n    display: inline-flex;\n    justify-content: center;\n    text-align: center;\n    text-decoration: none;\n    height: 100%;\n    width: ${TOGGLE_MODE_BUTTON_WIDTH};\n    right: 0;\n    align-items: ${p => (p.size === 'small' || p.variant === 'bottom-lined' ? 'flex-end' : 'center')};\n    padding-bottom: ${p => {\n        if (p.size === 'small') return '0.25rem';\n\n        return p.variant === 'bottom-lined' ? '0.5rem' : 0;\n    }};\n    ${inputType};\n\n    svg path {\n        fill: var(--wave-c-password-color);\n    }\n\n    &:hover svg path {\n        fill: var(--wave-c-password-color-hover);\n    }\n`;\n\nexport { ToggleButton };\n","export const TOGGLE_MODE_BUTTON_WIDTH = '2.5rem';\n","import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react';\nimport styled from 'styled-components';\n\nimport { compose, margin, MarginProps, width, WidthProps } from 'styled-system';\nimport { EyeClosedIcon, EyeIcon } from '../../icons';\nimport { InnerInput as Input } from '../Input/InnerInput';\nimport { InputProps } from '../Input/InputProps';\nimport { InputWrapperProps } from '../Input/InputWrapper';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport { useGeneratedId } from '../../utils/hooks/useGeneratedId';\nimport { getSemanticValue } from '../../utils/cssVariables';\nimport { ToggleButton } from './ToggleButton';\nimport { TOGGLE_MODE_BUTTON_WIDTH } from './constants';\nimport { extractWidthProps, extractWrapperMarginProps } from '../../utils/extractProps';\n\ntype WrapperProps = MarginProps & WidthProps;\nconst PasswordWrapper = styled.div<WrapperProps>`\n    display: inline-block;\n    position: relative;\n    box-sizing: border-box;\n\n    ${compose(margin, width)}\n\n    input {\n        /* avoid text under the toggle mode button */\n        padding-right: ${TOGGLE_MODE_BUTTON_WIDTH};\n    }\n`;\n\nexport interface PasswordProps extends InputWrapperProps, InputProps {\n    /**\n     * Sets the purpose of the password input element\n     */\n    purpose?: 'login' | 'new-password';\n    /**\n     * If you project supports multiple languages it is recommended to pass translated labels to these properties\n     */\n    ariaStrings?: {\n        showPasswordButton?: string;\n        hidePasswordButton?: string;\n        messagePasswordIsHidden?: string;\n        messagePasswordIsShown?: string;\n    };\n}\n\nconst defaultAriaStrings = {\n    showPasswordButton: 'Show password',\n    hidePasswordButton: 'Hide password',\n    messagePasswordIsHidden: 'Your password is hidden',\n    messagePasswordIsShown: 'Your password is shown'\n};\n\n// allow component level CSS variables to be passed via `style` prop\ndeclare module 'csstype' {\n    interface Properties {\n        '--wave-c-password-color'?: string;\n        '--wave-c-password-color-hover'?: string;\n    }\n}\n\nconst Password = forwardRef<HTMLInputElement, PasswordProps>(\n    (\n        {\n            purpose = 'login',\n            id,\n            disabled,\n            size = 'medium',\n            variant = 'boxed',\n            ariaStrings = {},\n            ...rest\n        }: PasswordProps,\n        ref\n    ) => {\n        const [isHidden, setIsHidden] = useState<boolean>(true);\n        const aria = {\n            ...defaultAriaStrings,\n            ...ariaStrings\n        };\n\n        const inputId = useGeneratedId(id);\n        const { marginProps, restProps: withoutMargin } = extractWrapperMarginProps(rest);\n        const { widthProps, restProps } = extractWidthProps(withoutMargin);\n\n        const inputRef = useRef<HTMLInputElement>();\n        useImperativeHandle(ref, () => inputRef.current, []);\n\n        return (\n            <PasswordWrapper {...widthProps} {...marginProps}>\n                <Input\n                    {...restProps}\n                    width=\"100%\"\n                    id={inputId}\n                    size={size}\n                    variant={variant}\n                    disabled={disabled}\n                    ref={inputRef}\n                    type={isHidden ? 'password' : 'text'}\n                    autoComplete={purpose === 'new-password' ? 'new-password' : 'off'}\n                />\n                {!disabled ? (\n                    <>\n                        <ToggleButton\n                            size={size}\n                            variant={variant}\n                            type=\"button\"\n                            onClick={() => {\n                                setIsHidden(prevValue => !prevValue);\n                                if (inputRef?.current) inputRef.current.focus();\n                            }}\n                            aria-controls={inputId}\n                            aria-label={isHidden ? aria.showPasswordButton : aria.hidePasswordButton}\n                            style={{\n                                '--wave-c-password-color': getSemanticValue('foreground-neutral-emphasized'),\n                                '--wave-c-password-color-hover': getSemanticValue('foreground-primary')\n                            }}\n                        >\n                            {isHidden ? <EyeIcon /> : <EyeClosedIcon />}\n                        </ToggleButton>\n                        <VisuallyHidden as=\"span\" aria-live=\"polite\">\n                            {isHidden ? aria.messagePasswordIsHidden : aria.messagePasswordIsShown}\n                        </VisuallyHidden>\n                    </>\n                ) : undefined}\n            </PasswordWrapper>\n        );\n    }\n);\n\nexport { Password };\n"],"names":[],"sourceRoot":""}