@npm_leadtech/legal-lib-components 7.22.12 → 7.23.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/css/styles.css +0 -3
- package/dist/src/components/atoms/DialogMenuIcon/DialogMenuIcon.styled.js +1 -1
- package/dist/src/components/atoms/DialogMenuIcon/DialogMenuIcon.styled.ts +1 -1
- package/dist/src/components/molecules/TextInput/Input.d.ts +0 -1
- package/dist/src/components/molecules/TextInput/Input.js +5 -4
- package/dist/src/components/molecules/TextInput/Input.tsx +7 -8
- package/dist/src/components/molecules/TextInput/TextInput.js +2 -2
- package/dist/src/components/molecules/TextInput/TextInput.scss +0 -4
- package/dist/src/components/molecules/TextInput/TextInput.tsx +1 -3
- package/dist/src/components/molecules/TextInput/TextInputProps.types.d.ts +0 -1
- package/dist/src/components/molecules/TextInput/TextInputProps.types.ts +0 -1
- package/package.json +1 -1
package/dist/css/styles.css
CHANGED
|
@@ -14,7 +14,6 @@ interface InputProps {
|
|
|
14
14
|
onKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;
|
|
15
15
|
onKeyUp: (e: React.KeyboardEvent<HTMLInputElement>) => void;
|
|
16
16
|
country: string;
|
|
17
|
-
currrencySymbol?: string;
|
|
18
17
|
}
|
|
19
18
|
export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
|
|
20
19
|
export {};
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import React, { useState } from 'react';
|
|
3
|
+
import currencyEuro from '../../../../images/svg/currencyDE.svg';
|
|
4
|
+
import currencyOthers from '../../../../images/svg/currencyUS.svg';
|
|
3
5
|
import eyeCloseIcon from '../../../../images/svg/eye-close.svg';
|
|
4
6
|
import eyeIcon from '../../../../images/svg/eye-24-px.svg';
|
|
5
7
|
import percent from '../../../../images/svg/percent.svg';
|
|
6
|
-
export const Input = React.forwardRef(({ value, name, placeholder, className, onChange, onClick, onBlur, onKeyDown, onKeyUp, disabled, type = 'text', maxLength, country, prefix
|
|
8
|
+
export const Input = React.forwardRef(({ value, name, placeholder, className, onChange, onClick, onBlur, onKeyDown, onKeyUp, disabled, type = 'text', maxLength, country, prefix }, ref) => {
|
|
7
9
|
const [hidden, setHidden] = useState(true);
|
|
8
10
|
const showPassword = () => {
|
|
9
11
|
if (value !== null)
|
|
@@ -23,13 +25,12 @@ export const Input = React.forwardRef(({ value, name, placeholder, className, on
|
|
|
23
25
|
else if (isPercent) {
|
|
24
26
|
finalClassName += ' has-percent-suffix';
|
|
25
27
|
}
|
|
26
|
-
return (_jsxs(_Fragment, { children: [isCurrency && !!prefix && otherCurrency &&
|
|
28
|
+
return (_jsxs(_Fragment, { children: [isCurrency && !!prefix && otherCurrency && (_jsx("div", { className: 'input-icon-currency-prefix', children: _jsx("img", { src: currencyOthers, alt: 'currency' }) })), _jsx("input", { type: !hidden && type === 'password' ? 'text' : type, name: name, id: name, className: finalClassName, maxLength: maxLength, placeholder: placeholder, onChange: onChange, onClick: onClick, onKeyDown: onKeyDown, onKeyUp: onKeyUp, onBlur: onBlur, value: value, "data-qa": name, disabled: disabled, ref: ref }), type === 'password' && (_jsx("button", { type: 'button', className: 'input-icon-password-button', onClick: showPassword, onKeyDown: (e) => {
|
|
27
29
|
if (e.key === 'Enter')
|
|
28
30
|
showPassword();
|
|
29
31
|
}, children: _jsx("img", { src: hidden ? eyeIcon : eyeCloseIcon, alt: '' }) })), isCurrency
|
|
30
32
|
? !!prefix &&
|
|
31
|
-
euro &&
|
|
32
|
-
currrencySymbol && (_jsx("div", { className: 'input-icon-currency-suffix', children: _jsx("span", { children: currrencySymbol }) }))
|
|
33
|
+
euro && (_jsx("div", { className: 'input-icon-currency-suffix', children: _jsx("img", { src: currencyEuro, alt: 'currency' }) }))
|
|
33
34
|
: isPercent && (_jsx("div", { className: 'input-icon-percent-suffix', children: _jsx("img", { src: percent, alt: 'percent' }) }))] }));
|
|
34
35
|
});
|
|
35
36
|
Input.displayName = 'Input';
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import React, { useState } from 'react'
|
|
2
2
|
|
|
3
|
+
import currencyEuro from '../../../../images/svg/currencyDE.svg'
|
|
4
|
+
import currencyOthers from '../../../../images/svg/currencyUS.svg'
|
|
3
5
|
import eyeCloseIcon from '../../../../images/svg/eye-close.svg'
|
|
4
6
|
import eyeIcon from '../../../../images/svg/eye-24-px.svg'
|
|
5
7
|
import percent from '../../../../images/svg/percent.svg'
|
|
@@ -19,7 +21,6 @@ interface InputProps {
|
|
|
19
21
|
onKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void
|
|
20
22
|
onKeyUp: (e: React.KeyboardEvent<HTMLInputElement>) => void
|
|
21
23
|
country: string
|
|
22
|
-
currrencySymbol?: string
|
|
23
24
|
}
|
|
24
25
|
|
|
25
26
|
export const Input = React.forwardRef<HTMLInputElement, InputProps>(
|
|
@@ -38,8 +39,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
|
|
|
38
39
|
type = 'text',
|
|
39
40
|
maxLength,
|
|
40
41
|
country,
|
|
41
|
-
prefix
|
|
42
|
-
currrencySymbol
|
|
42
|
+
prefix
|
|
43
43
|
}: InputProps,
|
|
44
44
|
ref
|
|
45
45
|
) => {
|
|
@@ -66,9 +66,9 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
|
|
|
66
66
|
|
|
67
67
|
return (
|
|
68
68
|
<>
|
|
69
|
-
{isCurrency && !!prefix && otherCurrency &&
|
|
69
|
+
{isCurrency && !!prefix && otherCurrency && (
|
|
70
70
|
<div className='input-icon-currency-prefix'>
|
|
71
|
-
<
|
|
71
|
+
<img src={currencyOthers} alt='currency' />
|
|
72
72
|
</div>
|
|
73
73
|
)}
|
|
74
74
|
<input
|
|
@@ -102,10 +102,9 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
|
|
|
102
102
|
)}
|
|
103
103
|
{isCurrency
|
|
104
104
|
? !!prefix &&
|
|
105
|
-
euro &&
|
|
106
|
-
currrencySymbol && (
|
|
105
|
+
euro && (
|
|
107
106
|
<div className='input-icon-currency-suffix'>
|
|
108
|
-
<
|
|
107
|
+
<img src={currencyEuro} alt='currency' />
|
|
109
108
|
</div>
|
|
110
109
|
)
|
|
111
110
|
: isPercent && (
|
|
@@ -6,7 +6,7 @@ import { Input } from './Input';
|
|
|
6
6
|
import { TextInputLabel } from './TextInputLabel';
|
|
7
7
|
import { TextInputMessage } from './TextInputMessage';
|
|
8
8
|
import { TextInputTooltip } from './TextInputTooltip';
|
|
9
|
-
const TextInput = React.forwardRef(({ label, value, validate = true, isValidGroup = true, format = undefined, name, placeholder, onChange, onClick, onBlur, onKeyDown, onKeyUp, prefix = '', disabled, type = 'text', maxLength, errorMessage = '', notes, dialogMenuTip, tooltip = '', givenClass = '', children, country
|
|
9
|
+
const TextInput = React.forwardRef(({ label, value, validate = true, isValidGroup = true, format = undefined, name, placeholder, onChange, onClick, onBlur, onKeyDown, onKeyUp, prefix = '', disabled, type = 'text', maxLength, errorMessage = '', notes, dialogMenuTip, tooltip = '', givenClass = '', children, country }, ref) => {
|
|
10
10
|
const classnames = classNames('e-text', {
|
|
11
11
|
[givenClass]: givenClass,
|
|
12
12
|
'e-text--is-invalid': !validate,
|
|
@@ -26,7 +26,7 @@ const TextInput = React.forwardRef(({ label, value, validate = true, isValidGrou
|
|
|
26
26
|
if (Boolean(format) && type !== 'number' && type !== 'tel') {
|
|
27
27
|
return (_jsx(NumericFormat, { name: name, id: name, placeholder: placeholder, className: 'e-text-input', onChange: onChange, onClick: onClick, value: value, "data-qa": name, disabled: disabled, maxLength: maxLength, onBlur: onBlur }));
|
|
28
28
|
}
|
|
29
|
-
return (_jsx(Input, { name: name ?? '', type: type, prefix: prefix, placeholder: placeholder ?? '', className: 'e-text-input', onChange: handleChange, onClick: onClick ?? (() => { }), value: value, "data-qa": name, disabled: disabled ?? false, maxLength: maxLength, onBlur: onBlur ?? (() => { }), ref: ref, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, country: country
|
|
29
|
+
return (_jsx(Input, { name: name ?? '', type: type, prefix: prefix, placeholder: placeholder ?? '', className: 'e-text-input', onChange: handleChange, onClick: onClick ?? (() => { }), value: value, "data-qa": name, disabled: disabled ?? false, maxLength: maxLength, onBlur: onBlur ?? (() => { }), ref: ref, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, country: country }));
|
|
30
30
|
};
|
|
31
31
|
return (_jsxs("div", { className: classnames, children: [Boolean(children) && _jsx("div", { className: 'e-text__children', children: children }), _jsx(TextInputTooltip, { tooltip: tooltip }), _jsx(TextInputMessage, { errorMessage: errorMessage, validate: validate }), renderInput(), _jsx(TextInputLabel, { label: label, htmlFor: name, notes: notes, dialogMenuTip: dialogMenuTip })] }));
|
|
32
32
|
});
|
|
@@ -33,8 +33,7 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
|
|
|
33
33
|
tooltip = '',
|
|
34
34
|
givenClass = '',
|
|
35
35
|
children,
|
|
36
|
-
country
|
|
37
|
-
currrencySymbol
|
|
36
|
+
country
|
|
38
37
|
}: TextInputProps,
|
|
39
38
|
ref
|
|
40
39
|
) => {
|
|
@@ -94,7 +93,6 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
|
|
|
94
93
|
onKeyDown={handleKeyDown}
|
|
95
94
|
onKeyUp={handleKeyUp}
|
|
96
95
|
country={country}
|
|
97
|
-
currrencySymbol={currrencySymbol}
|
|
98
96
|
/>
|
|
99
97
|
)
|
|
100
98
|
}
|