@sb1/ffe-form-react 100.12.4 → 101.0.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/es/BaseRadioButton.js +7 -30
- package/es/Checkbox.js +6 -29
- package/es/Input.js +2 -25
- package/es/InputGroup.js +17 -40
- package/es/InputTextLike.js +2 -25
- package/es/Label.js +3 -28
- package/es/PhoneNumber.js +20 -32
- package/es/RadioBlock.js +7 -30
- package/es/RadioButton.js +3 -26
- package/es/RadioButtonInputGroup.js +7 -30
- package/es/RadioSwitch.js +6 -29
- package/es/TextArea.js +2 -25
- package/es/TextField.js +2 -25
- package/es/ToggleSwitch.js +5 -28
- package/es/Tooltip.js +9 -21
- package/es/documentation/RadioButton-example.js +12 -23
- package/es/documentation/RadioSwitch-example.js +4 -15
- package/es/i18n/i18n.js +3 -3
- package/es/message/BaseFieldMessage.js +7 -29
- package/es/message/ErrorFieldMessage.js +2 -25
- package/es/message/InfoFieldMessage.js +2 -25
- package/es/message/SuccessFieldMessage.js +2 -25
- package/lib/BaseRadioButton.js +10 -33
- package/lib/Checkbox.js +8 -31
- package/lib/Input.js +4 -27
- package/lib/InputGroup.js +22 -45
- package/lib/InputTextLike.js +4 -27
- package/lib/Label.js +5 -30
- package/lib/PhoneNumber.js +24 -36
- package/lib/RadioBlock.js +9 -32
- package/lib/RadioButton.js +6 -29
- package/lib/RadioButtonInputGroup.js +11 -34
- package/lib/RadioSwitch.js +9 -32
- package/lib/TextArea.js +4 -27
- package/lib/TextField.js +4 -27
- package/lib/ToggleSwitch.js +8 -31
- package/lib/Tooltip.js +13 -25
- package/lib/documentation/RadioButton-example.js +15 -26
- package/lib/documentation/RadioSwitch-example.js +7 -18
- package/lib/i18n/i18n.js +3 -3
- package/lib/message/BaseFieldMessage.js +10 -32
- package/lib/message/ErrorFieldMessage.js +4 -27
- package/lib/message/InfoFieldMessage.js +4 -27
- package/lib/message/SuccessFieldMessage.js +4 -27
- package/package.json +8 -8
package/es/BaseRadioButton.js
CHANGED
|
@@ -1,36 +1,13 @@
|
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
|
2
|
-
__assign = Object.assign || function(t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
-
var t = {};
|
|
14
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
-
t[p] = s[p];
|
|
16
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
-
t[p[i]] = s[p[i]];
|
|
20
|
-
}
|
|
21
|
-
return t;
|
|
22
|
-
};
|
|
23
1
|
import React, { useId } from 'react';
|
|
24
2
|
import classNames from 'classnames';
|
|
25
3
|
import { Tooltip } from './Tooltip';
|
|
26
|
-
export
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
var isSelected = selectedValue === undefined ? checked : selectedValue === value;
|
|
4
|
+
export const BaseRadioButton = React.forwardRef(({ children, checked, className, labelProps, selectedValue, tooltip, tooltipProps = {}, value, onChange = () => { }, ...inputProps }, ref) => {
|
|
5
|
+
const id = useId();
|
|
6
|
+
const labelClasses = classNames({ 'ffe-radio-button--with-tooltip': tooltip }, className);
|
|
7
|
+
const isSelected = selectedValue === undefined ? checked : selectedValue === value;
|
|
31
8
|
return (React.createElement(React.Fragment, null,
|
|
32
|
-
React.createElement("input",
|
|
33
|
-
React.createElement("label",
|
|
9
|
+
React.createElement("input", { className: "ffe-radio-input", id: id, ref: ref, type: "radio", checked: isSelected, value: `${value}`, onChange: onChange, ...inputProps }),
|
|
10
|
+
React.createElement("label", { htmlFor: id, ...labelProps, className: labelClasses },
|
|
34
11
|
React.createElement("span", { className: "ffe-radio-input__content" }, children)),
|
|
35
|
-
tooltip && React.createElement(Tooltip,
|
|
12
|
+
tooltip && React.createElement(Tooltip, { ...tooltipProps }, tooltip)));
|
|
36
13
|
});
|
package/es/Checkbox.js
CHANGED
|
@@ -1,32 +1,9 @@
|
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
|
2
|
-
__assign = Object.assign || function(t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
-
var t = {};
|
|
14
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
-
t[p] = s[p];
|
|
16
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
-
t[p[i]] = s[p[i]];
|
|
20
|
-
}
|
|
21
|
-
return t;
|
|
22
|
-
};
|
|
23
1
|
import React, { useId } from 'react';
|
|
24
2
|
import classNames from 'classnames';
|
|
25
|
-
export
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
var labelProps = {
|
|
3
|
+
export const Checkbox = React.forwardRef(({ children, hiddenLabel, inline = true, noMargins, id, checked, onChange, disabled, ...rest }, ref) => {
|
|
4
|
+
const generatedId = useId();
|
|
5
|
+
const inputId = id !== null && id !== void 0 ? id : generatedId;
|
|
6
|
+
const labelProps = {
|
|
30
7
|
className: classNames({
|
|
31
8
|
'ffe-checkbox': true,
|
|
32
9
|
'ffe-checkbox--inline': inline,
|
|
@@ -36,10 +13,10 @@ export var Checkbox = React.forwardRef(function (_a, ref) {
|
|
|
36
13
|
htmlFor: inputId,
|
|
37
14
|
};
|
|
38
15
|
return (React.createElement(React.Fragment, null,
|
|
39
|
-
React.createElement("input",
|
|
16
|
+
React.createElement("input", { ref: ref, className: "ffe-hidden-checkbox", id: inputId, type: "checkbox", checked: checked, disabled: disabled, onChange: !disabled ? onChange : undefined, ...rest }),
|
|
40
17
|
typeof children === 'function' ? (children(labelProps)) : (
|
|
41
18
|
// eslint-disable-next-line jsx-a11y/label-has-for
|
|
42
|
-
React.createElement("label",
|
|
19
|
+
React.createElement("label", { ...labelProps },
|
|
43
20
|
React.createElement("span", { className: classNames('ffe-checkbox__content', {
|
|
44
21
|
'ffe-screenreader-only': hiddenLabel,
|
|
45
22
|
}) }, children)))));
|
package/es/Input.js
CHANGED
|
@@ -1,28 +1,5 @@
|
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
|
2
|
-
__assign = Object.assign || function(t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
-
var t = {};
|
|
14
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
-
t[p] = s[p];
|
|
16
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
-
t[p[i]] = s[p[i]];
|
|
20
|
-
}
|
|
21
|
-
return t;
|
|
22
|
-
};
|
|
23
1
|
import React from 'react';
|
|
24
2
|
import classNames from 'classnames';
|
|
25
|
-
export
|
|
26
|
-
|
|
27
|
-
return (React.createElement("input", __assign({ className: classNames('ffe-input-field', 'ffe-default-mode', { 'ffe-input-field--inline': inline }, { 'ffe-input-field--text-right-align': textRightAlign }, className), ref: ref }, rest)));
|
|
3
|
+
export const Input = React.forwardRef(({ className, inline, textRightAlign, ...rest }, ref) => {
|
|
4
|
+
return (React.createElement("input", { className: classNames('ffe-input-field', 'ffe-default-mode', { 'ffe-input-field--inline': inline }, { 'ffe-input-field--text-right-align': textRightAlign }, className), ref: ref, ...rest }));
|
|
28
5
|
});
|
package/es/InputGroup.js
CHANGED
|
@@ -1,31 +1,9 @@
|
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
|
2
|
-
__assign = Object.assign || function(t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
-
var t = {};
|
|
14
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
-
t[p] = s[p];
|
|
16
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
-
t[p[i]] = s[p[i]];
|
|
20
|
-
}
|
|
21
|
-
return t;
|
|
22
|
-
};
|
|
23
1
|
import classNames from 'classnames';
|
|
24
2
|
import React, { useId } from 'react';
|
|
25
3
|
import { Label } from './Label';
|
|
26
4
|
import { ErrorFieldMessage } from './message';
|
|
27
5
|
import { Tooltip } from './Tooltip';
|
|
28
|
-
|
|
6
|
+
const getChildrenWithExtraProps = (children, extraProps) => {
|
|
29
7
|
if (typeof children === 'function') {
|
|
30
8
|
return children(extraProps);
|
|
31
9
|
}
|
|
@@ -34,26 +12,25 @@ var getChildrenWithExtraProps = function (children, extraProps) {
|
|
|
34
12
|
}
|
|
35
13
|
return children;
|
|
36
14
|
};
|
|
37
|
-
export
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
var descriptionId = description ? "".concat(id, "-description") : undefined;
|
|
15
|
+
export const InputGroup = ({ inputId, children, className, extraMargin = true, description, label, fieldMessage, tooltip, onTooltipToggle, labelId, ...rest }) => {
|
|
16
|
+
const generatedInputId = useId();
|
|
17
|
+
const id = inputId !== null && inputId !== void 0 ? inputId : generatedInputId;
|
|
18
|
+
const descriptionId = description ? `${id}-description` : undefined;
|
|
42
19
|
if (React.Children.count(children) > 1) {
|
|
43
20
|
throw new Error('This element does not support more than one child. If you need more than one element inside your ' +
|
|
44
21
|
'InputGroup, please use the function-as-a-child pattern outlined in the documentation.');
|
|
45
22
|
}
|
|
46
|
-
|
|
23
|
+
const getFieldMessageId = () => {
|
|
47
24
|
var _a;
|
|
48
25
|
if (typeof fieldMessage === 'string') {
|
|
49
|
-
return
|
|
26
|
+
return `${id}-fieldmessage`;
|
|
50
27
|
}
|
|
51
28
|
else if ((_a = fieldMessage === null || fieldMessage === void 0 ? void 0 : fieldMessage.props) === null || _a === void 0 ? void 0 : _a.id) {
|
|
52
29
|
return fieldMessage.props.id;
|
|
53
30
|
}
|
|
54
|
-
return fieldMessage ?
|
|
31
|
+
return fieldMessage ? `${id}-fieldmessage` : undefined;
|
|
55
32
|
};
|
|
56
|
-
|
|
33
|
+
const fieldMessageId = getFieldMessageId();
|
|
57
34
|
if (onTooltipToggle &&
|
|
58
35
|
typeof tooltip !== 'boolean' &&
|
|
59
36
|
typeof tooltip !== 'string') {
|
|
@@ -63,23 +40,23 @@ export var InputGroup = function (_a) {
|
|
|
63
40
|
if (tooltip && description) {
|
|
64
41
|
throw new Error('Don\'t use both "tooltip" and "description" on an <InputGroup />, pick one of them');
|
|
65
42
|
}
|
|
66
|
-
|
|
43
|
+
const isInvalid = !!fieldMessage &&
|
|
67
44
|
(typeof fieldMessage === 'string' ||
|
|
68
45
|
fieldMessage.type === ErrorFieldMessage);
|
|
69
|
-
|
|
70
|
-
|
|
46
|
+
const hasMessage = !!fieldMessage;
|
|
47
|
+
const ariaDescribedBy = fieldMessageId || descriptionId
|
|
71
48
|
? [fieldMessageId, descriptionId].filter(Boolean).join(' ')
|
|
72
49
|
: undefined;
|
|
73
|
-
|
|
74
|
-
id
|
|
50
|
+
const extraProps = {
|
|
51
|
+
id,
|
|
75
52
|
'aria-invalid': isInvalid ? 'true' : 'false',
|
|
76
53
|
'aria-describedby': ariaDescribedBy,
|
|
77
54
|
};
|
|
78
|
-
|
|
79
|
-
return (React.createElement("div",
|
|
55
|
+
const modifiedChildren = getChildrenWithExtraProps(children, extraProps);
|
|
56
|
+
return (React.createElement("div", { className: classNames('ffe-input-group', {
|
|
80
57
|
'ffe-input-group--no-extra-margin': !extraMargin,
|
|
81
58
|
'ffe-input-group--message': hasMessage,
|
|
82
|
-
}, className)
|
|
59
|
+
}, className), ...rest },
|
|
83
60
|
React.createElement("div", { className: "ffe-input-group__header" },
|
|
84
61
|
typeof label === 'string' ? (React.createElement(Label, { htmlFor: id, id: labelId }, label)) : (React.isValidElement(label) &&
|
|
85
62
|
React.cloneElement(label, {
|
package/es/InputTextLike.js
CHANGED
|
@@ -1,28 +1,5 @@
|
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
|
2
|
-
__assign = Object.assign || function(t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
-
var t = {};
|
|
14
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
-
t[p] = s[p];
|
|
16
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
-
t[p[i]] = s[p[i]];
|
|
20
|
-
}
|
|
21
|
-
return t;
|
|
22
|
-
};
|
|
23
1
|
import React from 'react';
|
|
24
2
|
import classNames from 'classnames';
|
|
25
|
-
export
|
|
26
|
-
|
|
27
|
-
return (React.createElement("input", __assign({ className: classNames('ffe-input-field', 'ffe-input-field--text-like', className), "aria-label": ariaLabel, ref: ref }, rest)));
|
|
3
|
+
export const InputTextLike = React.forwardRef(({ className, ariaLabel, ...rest }, ref) => {
|
|
4
|
+
return (React.createElement("input", { className: classNames('ffe-input-field', 'ffe-input-field--text-like', className), "aria-label": ariaLabel, ref: ref, ...rest }));
|
|
28
5
|
});
|
package/es/Label.js
CHANGED
|
@@ -1,30 +1,5 @@
|
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
|
2
|
-
__assign = Object.assign || function(t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
-
var t = {};
|
|
14
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
-
t[p] = s[p];
|
|
16
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
-
t[p[i]] = s[p[i]];
|
|
20
|
-
}
|
|
21
|
-
return t;
|
|
22
|
-
};
|
|
23
1
|
import React from 'react';
|
|
24
2
|
import classNames from 'classnames';
|
|
25
|
-
export
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
'ffe-form-label--block': block,
|
|
29
|
-
}), htmlFor: htmlFor }, rest), children));
|
|
30
|
-
};
|
|
3
|
+
export const Label = ({ as: Comp = 'label', block, children, className, htmlFor, ...rest }) => (React.createElement(Comp, { className: classNames('ffe-form-label', className, {
|
|
4
|
+
'ffe-form-label--block': block,
|
|
5
|
+
}), htmlFor: htmlFor, ...rest }, children));
|
package/es/PhoneNumber.js
CHANGED
|
@@ -1,20 +1,9 @@
|
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
|
2
|
-
__assign = Object.assign || function(t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
1
|
import React, { useRef, useImperativeHandle, useId } from 'react';
|
|
13
2
|
import classNames from 'classnames';
|
|
14
3
|
import i18n from './i18n/i18n';
|
|
15
4
|
import { ErrorFieldMessage } from './message';
|
|
16
|
-
|
|
17
|
-
|
|
5
|
+
const getFieldMessage = (countryCodeAndNumberFieldMessage, countryCodeFieldMessage, numberFieldMessage) => {
|
|
6
|
+
let fieldMessage;
|
|
18
7
|
if (countryCodeAndNumberFieldMessage) {
|
|
19
8
|
fieldMessage = countryCodeAndNumberFieldMessage;
|
|
20
9
|
}
|
|
@@ -29,48 +18,47 @@ var getFieldMessage = function (countryCodeAndNumberFieldMessage, countryCodeFie
|
|
|
29
18
|
}
|
|
30
19
|
return fieldMessage;
|
|
31
20
|
};
|
|
32
|
-
export
|
|
33
|
-
var
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
useImperativeHandle(ref, function () { return ({
|
|
21
|
+
export const PhoneNumber = React.forwardRef(({ numberInputProps, countryCodeInputProps, countryCodeFieldMessage, numberFieldMessage, countryCodeAndNumberFieldMessage, className, extraMargin, isMobileNumber, locale = 'nb', }, ref) => {
|
|
22
|
+
var _a, _b;
|
|
23
|
+
const countryRef = useRef(null);
|
|
24
|
+
const numberRef = useRef(null);
|
|
25
|
+
useImperativeHandle(ref, () => ({
|
|
38
26
|
get country() {
|
|
39
27
|
return countryRef.current;
|
|
40
28
|
},
|
|
41
29
|
get number() {
|
|
42
30
|
return numberRef.current;
|
|
43
31
|
},
|
|
44
|
-
})
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
? (
|
|
32
|
+
}));
|
|
33
|
+
const fieldMessage = getFieldMessage(countryCodeAndNumberFieldMessage, countryCodeFieldMessage, numberFieldMessage);
|
|
34
|
+
const numberId = useId();
|
|
35
|
+
const countryCodeId = useId();
|
|
36
|
+
const generatedFieldMessageId = useId();
|
|
37
|
+
const fieldMessageId = React.isValidElement(fieldMessage)
|
|
38
|
+
? (_a = fieldMessage === null || fieldMessage === void 0 ? void 0 : fieldMessage.props) === null || _a === void 0 ? void 0 : _a.id
|
|
51
39
|
: generatedFieldMessageId;
|
|
52
|
-
|
|
53
|
-
|
|
40
|
+
const supportedLocales = ['nb', 'nn', 'en'];
|
|
41
|
+
const text = i18n[supportedLocales.indexOf(locale) !== -1 ? locale : 'nb'];
|
|
54
42
|
return (React.createElement("div", { className: classNames('ffe-phone-number', 'ffe-input-group', { 'ffe-input-group--message': fieldMessage }, { 'ffe-input-group--no-extra-margin': !extraMargin }, className) },
|
|
55
43
|
React.createElement("div", { className: "ffe-phone-number__input-group" },
|
|
56
44
|
React.createElement("div", { className: "ffe-phone-number__country-code" },
|
|
57
45
|
React.createElement("label", { className: "ffe-form-label", htmlFor: countryCodeId }, text.COUNTRY_CODE),
|
|
58
46
|
React.createElement("div", { className: "ffe-phone-number__input-group" },
|
|
59
47
|
React.createElement("span", { className: classNames('ffe-phone-number__plus', 'ffe-default-mode') }, "+"),
|
|
60
|
-
React.createElement("input",
|
|
48
|
+
React.createElement("input", { ref: countryRef, id: countryCodeId, value: (_b = countryCodeInputProps === null || countryCodeInputProps === void 0 ? void 0 : countryCodeInputProps.value) !== null && _b !== void 0 ? _b : '47', className: classNames('ffe-input-field', 'ffe-phone-number__country-code-input', 'ffe-default-mode'), type: "tel", "aria-invalid": !!(countryCodeFieldMessage ||
|
|
61
49
|
countryCodeAndNumberFieldMessage), "aria-describedby": !!(countryCodeFieldMessage ||
|
|
62
50
|
countryCodeAndNumberFieldMessage)
|
|
63
51
|
? fieldMessageId
|
|
64
|
-
: undefined
|
|
52
|
+
: undefined, ...countryCodeInputProps }))),
|
|
65
53
|
React.createElement("div", { className: "ffe-phone-number__number" },
|
|
66
54
|
React.createElement("label", { className: "ffe-form-label", htmlFor: numberId }, isMobileNumber
|
|
67
55
|
? text.MOBILE_NUMBER
|
|
68
56
|
: text.PHONE_NUMBER),
|
|
69
|
-
React.createElement("input",
|
|
57
|
+
React.createElement("input", { ref: numberRef, id: numberId, type: "tel", className: classNames('ffe-input-field', 'ffe-phone-number__phone-input', 'ffe-default-mode'), "aria-invalid": !!(numberFieldMessage ||
|
|
70
58
|
countryCodeAndNumberFieldMessage), "aria-describedby": !!(numberFieldMessage ||
|
|
71
59
|
countryCodeAndNumberFieldMessage)
|
|
72
60
|
? fieldMessageId
|
|
73
|
-
: undefined
|
|
61
|
+
: undefined, ...numberInputProps }))),
|
|
74
62
|
typeof fieldMessage === 'string' && (React.createElement(ErrorFieldMessage, { as: "p", id: fieldMessageId }, fieldMessage)),
|
|
75
63
|
React.isValidElement(fieldMessage) &&
|
|
76
64
|
React.cloneElement(fieldMessage, {
|
package/es/RadioBlock.js
CHANGED
|
@@ -1,36 +1,13 @@
|
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
|
2
|
-
__assign = Object.assign || function(t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
-
var t = {};
|
|
14
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
-
t[p] = s[p];
|
|
16
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
-
t[p[i]] = s[p[i]];
|
|
20
|
-
}
|
|
21
|
-
return t;
|
|
22
|
-
};
|
|
23
1
|
import React, { useId } from 'react';
|
|
24
2
|
import classNames from 'classnames';
|
|
25
|
-
export
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
var isSelected = checked || selectedValue === value;
|
|
3
|
+
export const RadioBlock = React.forwardRef(({ checked, children, className, label, labelClass, name, selectedValue, showChildren, value, ...inputProps }, ref) => {
|
|
4
|
+
const id = useId();
|
|
5
|
+
const isSelected = checked || selectedValue === value;
|
|
29
6
|
return (React.createElement("div", { className: classNames('ffe-radio-block', 'ffe-default-mode', className) },
|
|
30
|
-
React.createElement("input",
|
|
31
|
-
?
|
|
32
|
-
: undefined
|
|
7
|
+
React.createElement("input", { checked: isSelected, className: "ffe-radio-input", id: id, ref: ref, type: "radio", name: name, value: value, "aria-describedby": (children && showChildren) || (children && isSelected)
|
|
8
|
+
? `${id}-described`
|
|
9
|
+
: undefined, ...inputProps }),
|
|
33
10
|
React.createElement("div", { className: "ffe-radio-block__content" },
|
|
34
11
|
React.createElement("label", { className: classNames('ffe-radio-block__header', labelClass), htmlFor: id }, label),
|
|
35
|
-
(isSelected || showChildren) && children && (React.createElement("div", { className: classNames('ffe-radio-block__wrapper'), id:
|
|
12
|
+
(isSelected || showChildren) && children && (React.createElement("div", { className: classNames('ffe-radio-block__wrapper'), id: `${id}-described` }, children)))));
|
|
36
13
|
});
|
package/es/RadioButton.js
CHANGED
|
@@ -1,31 +1,8 @@
|
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
|
2
|
-
__assign = Object.assign || function(t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
-
var t = {};
|
|
14
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
-
t[p] = s[p];
|
|
16
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
-
t[p[i]] = s[p[i]];
|
|
20
|
-
}
|
|
21
|
-
return t;
|
|
22
|
-
};
|
|
23
1
|
import React from 'react';
|
|
24
2
|
import classNames from 'classnames';
|
|
25
3
|
import { BaseRadioButton } from './BaseRadioButton';
|
|
26
|
-
export
|
|
27
|
-
|
|
28
|
-
return (React.createElement(BaseRadioButton, __assign({ className: classNames('ffe-radio-button', {
|
|
4
|
+
export const RadioButton = ({ className, inline, ...rest }) => {
|
|
5
|
+
return (React.createElement(BaseRadioButton, { className: classNames('ffe-radio-button', {
|
|
29
6
|
'ffe-radio-button--inline': inline,
|
|
30
|
-
}, className)
|
|
7
|
+
}, className), ...rest }));
|
|
31
8
|
};
|
|
@@ -1,48 +1,25 @@
|
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
|
2
|
-
__assign = Object.assign || function(t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
-
var t = {};
|
|
14
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
-
t[p] = s[p];
|
|
16
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
-
t[p[i]] = s[p[i]];
|
|
20
|
-
}
|
|
21
|
-
return t;
|
|
22
|
-
};
|
|
23
1
|
import React, { useId } from 'react';
|
|
24
2
|
import classNames from 'classnames';
|
|
25
3
|
import { ErrorFieldMessage } from './message';
|
|
26
4
|
import { Tooltip } from './Tooltip';
|
|
27
|
-
export
|
|
28
|
-
var children = _a.children, className = _a.className, _b = _a.extraMargin, extraMargin = _b === void 0 ? true : _b, description = _a.description, fieldMessage = _a.fieldMessage, inline = _a.inline, label = _a.label, name = _a.name, selectedValue = _a.selectedValue, tooltip = _a.tooltip, onChange = _a.onChange, rest = __rest(_a, ["children", "className", "extraMargin", "description", "fieldMessage", "inline", "label", "name", "selectedValue", "tooltip", "onChange"]);
|
|
5
|
+
export const RadioButtonInputGroup = ({ children, className, extraMargin = true, description, fieldMessage, inline, label, name, selectedValue, tooltip, onChange, ...rest }) => {
|
|
29
6
|
if (tooltip && description) {
|
|
30
7
|
throw new Error('Don\'t use both "tooltip" and "description" on an <RadioButtonInputGroup />, pick one of them');
|
|
31
8
|
}
|
|
32
|
-
|
|
33
|
-
return (React.createElement("fieldset",
|
|
9
|
+
const id = useId();
|
|
10
|
+
return (React.createElement("fieldset", { "aria-labelledby": id, className: classNames('ffe-input-group', { 'ffe-input-group--no-extra-margin': !extraMargin }, { 'ffe-input-group--message': !!fieldMessage }, className), ...rest },
|
|
34
11
|
label && (React.createElement("legend", { id: id, className: classNames('ffe-form-label', 'ffe-form-label--block') },
|
|
35
12
|
label,
|
|
36
13
|
typeof tooltip === 'string' && (React.createElement(Tooltip, null, tooltip)),
|
|
37
14
|
React.isValidElement(tooltip) && tooltip)),
|
|
38
15
|
description && (React.createElement("div", { className: "ffe-input-group__description ffe-small-text" }, description)),
|
|
39
16
|
children({
|
|
40
|
-
inline
|
|
41
|
-
name
|
|
42
|
-
onChange:
|
|
17
|
+
inline,
|
|
18
|
+
name,
|
|
19
|
+
onChange: (e) => {
|
|
43
20
|
onChange === null || onChange === void 0 ? void 0 : onChange(e);
|
|
44
21
|
},
|
|
45
|
-
selectedValue
|
|
22
|
+
selectedValue,
|
|
46
23
|
}),
|
|
47
24
|
typeof fieldMessage === 'string' ? (React.createElement(ErrorFieldMessage, { as: "p" }, fieldMessage)) : (fieldMessage)));
|
|
48
25
|
};
|
package/es/RadioSwitch.js
CHANGED
|
@@ -1,40 +1,17 @@
|
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
|
2
|
-
__assign = Object.assign || function(t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
-
var t = {};
|
|
14
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
-
t[p] = s[p];
|
|
16
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
-
t[p[i]] = s[p[i]];
|
|
20
|
-
}
|
|
21
|
-
return t;
|
|
22
|
-
};
|
|
23
1
|
import React from 'react';
|
|
24
2
|
import classNames from 'classnames';
|
|
25
3
|
import { BaseRadioButton } from './BaseRadioButton';
|
|
26
|
-
export
|
|
27
|
-
|
|
28
|
-
var noneSelected = selectedValue === null ||
|
|
4
|
+
export const RadioSwitch = ({ className, leftLabel, leftValue, leftInnerRef, rightLabel, rightValue, rightInnerRef, condensed, 'aria-invalid': ariaInvalid, selectedValue, ...rest }) => {
|
|
5
|
+
const noneSelected = selectedValue === null ||
|
|
29
6
|
selectedValue === undefined ||
|
|
30
7
|
selectedValue === '';
|
|
31
8
|
return (React.createElement(React.Fragment, null,
|
|
32
|
-
React.createElement(BaseRadioButton,
|
|
9
|
+
React.createElement(BaseRadioButton, { className: classNames('ffe-radio-switch', 'ffe-default-mode', className, {
|
|
33
10
|
'ffe-radio-switch--condensed': condensed,
|
|
34
11
|
}), value: leftValue, ref: leftInnerRef, "aria-invalid": ariaInvalid === 'true' &&
|
|
35
|
-
(selectedValue === leftValue || noneSelected), selectedValue: selectedValue
|
|
36
|
-
React.createElement(BaseRadioButton,
|
|
12
|
+
(selectedValue === leftValue || noneSelected), selectedValue: selectedValue, ...rest }, leftLabel),
|
|
13
|
+
React.createElement(BaseRadioButton, { className: classNames('ffe-radio-switch', 'ffe-default-mode', className, {
|
|
37
14
|
'ffe-radio-switch--condensed': condensed,
|
|
38
15
|
}), value: rightValue, ref: rightInnerRef, "aria-invalid": ariaInvalid === 'true' &&
|
|
39
|
-
(selectedValue === rightValue || noneSelected), selectedValue: selectedValue
|
|
16
|
+
(selectedValue === rightValue || noneSelected), selectedValue: selectedValue, ...rest }, rightLabel)));
|
|
40
17
|
};
|
package/es/TextArea.js
CHANGED
|
@@ -1,28 +1,5 @@
|
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
|
2
|
-
__assign = Object.assign || function(t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
-
var t = {};
|
|
14
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
-
t[p] = s[p];
|
|
16
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
-
t[p[i]] = s[p[i]];
|
|
20
|
-
}
|
|
21
|
-
return t;
|
|
22
|
-
};
|
|
23
1
|
import React from 'react';
|
|
24
2
|
import classNames from 'classnames';
|
|
25
|
-
export
|
|
26
|
-
|
|
27
|
-
return (React.createElement("textarea", __assign({ className: classNames('ffe-textarea', 'ffe-default-mode', className), ref: ref }, rest)));
|
|
3
|
+
export const TextArea = React.forwardRef(({ className, ...rest }, ref) => {
|
|
4
|
+
return (React.createElement("textarea", { className: classNames('ffe-textarea', 'ffe-default-mode', className), ref: ref, ...rest }));
|
|
28
5
|
});
|