dibk-design 7.2.1 → 7.3.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/components/Accordion.js +2 -2
- package/dist/components/Button.js +19 -12
- package/dist/components/CheckBoxIcon.js +1 -1
- package/dist/components/CheckBoxInput.js +1 -1
- package/dist/components/CheckBoxList.js +4 -3
- package/dist/components/Container.js +2 -1
- package/dist/components/ContentBox.js +2 -1
- package/dist/components/DescriptionList.js +1 -1
- package/dist/components/Dialog.js +4 -3
- package/dist/components/DragAndDropFileInput.js +5 -4
- package/dist/components/ErrorMessage.js +4 -2
- package/dist/components/Header.js +6 -5
- package/dist/components/InputField.js +16 -11
- package/dist/components/Label.js +11 -8
- package/dist/components/List.js +2 -2
- package/dist/components/NavigationBar.js +8 -7
- package/dist/components/PDF.scss +122 -1
- package/dist/components/Paper.js +1 -1
- package/dist/components/ProgressBar.js +1 -1
- package/dist/components/RadioButtonIcon.js +1 -1
- package/dist/components/RadioButtonInput.js +1 -1
- package/dist/components/RadioButtonList.js +4 -3
- package/dist/components/Select.js +18 -16
- package/dist/components/Table.js +2 -2
- package/dist/components/Textarea.js +15 -12
- package/dist/components/Theme.js +1 -1
- package/dist/components/ThemeProvider.js +1 -1
- package/dist/components/ToggleNavigationButton.js +7 -3
- package/dist/components/WizardNavigation.js +4 -3
- package/dist/functions/helpers.js +22 -18
- package/dist/functions/theme.js +3 -3
- package/dist/style/pdf.css +115 -1
- package/dist/style/pdf.css.map +1 -1
- package/package.json +1 -1
package/dist/components/PDF.scss
CHANGED
|
@@ -24,6 +24,10 @@ $width-checkbox: 22px;
|
|
|
24
24
|
$heading-logo-width: 100px;
|
|
25
25
|
$heading-logo-margin-left: 15px;
|
|
26
26
|
|
|
27
|
+
$margin-sm: 12px;
|
|
28
|
+
$margin-md: 24px;
|
|
29
|
+
$margin-lg: 36px;
|
|
30
|
+
|
|
27
31
|
$margin-top-h1: 5px;
|
|
28
32
|
$margin-top-h2: 22px;
|
|
29
33
|
$margin-bottom-h2: 2px;
|
|
@@ -290,6 +294,7 @@ body {
|
|
|
290
294
|
th {
|
|
291
295
|
text-align: left;
|
|
292
296
|
font-size: $font-size-table-header;
|
|
297
|
+
word-break: break-word;
|
|
293
298
|
padding: $padding-vertical-table-header $padding-horizontal-table-header;
|
|
294
299
|
&[style*="--width"] {
|
|
295
300
|
width: var(--width);
|
|
@@ -301,8 +306,9 @@ body {
|
|
|
301
306
|
tr {
|
|
302
307
|
border: 1px solid #000;
|
|
303
308
|
td {
|
|
304
|
-
padding: $padding-vertical-table-data $padding-horizontal-table-data;
|
|
305
309
|
font-size: $font-size-table-data;
|
|
310
|
+
word-break: break-word;
|
|
311
|
+
padding: $padding-vertical-table-data $padding-horizontal-table-data;
|
|
306
312
|
&[style*="--width"] {
|
|
307
313
|
width: var(--width);
|
|
308
314
|
}
|
|
@@ -440,6 +446,72 @@ body {
|
|
|
440
446
|
line-height: 1.2em;
|
|
441
447
|
flex: none;
|
|
442
448
|
}
|
|
449
|
+
|
|
450
|
+
//Margins
|
|
451
|
+
*[style*="--mt:none"],
|
|
452
|
+
*[style*="--mt: none"] {
|
|
453
|
+
margin-top: 0;
|
|
454
|
+
}
|
|
455
|
+
*[style*="--mb:none"],
|
|
456
|
+
*[style*="--mb: none"] {
|
|
457
|
+
margin-bottom: 0;
|
|
458
|
+
}
|
|
459
|
+
*[style*="--ml:none"],
|
|
460
|
+
*[style*="--ml: none"] {
|
|
461
|
+
margin-left: 0;
|
|
462
|
+
}
|
|
463
|
+
*[style*="--mr:none"],
|
|
464
|
+
*[style*="--mr: none"] {
|
|
465
|
+
margin-right: 0;
|
|
466
|
+
}
|
|
467
|
+
*[style*="--mt:sm"],
|
|
468
|
+
*[style*="--mt: sm"] {
|
|
469
|
+
margin-top: $margin-sm;
|
|
470
|
+
}
|
|
471
|
+
*[style*="--mb:sm"],
|
|
472
|
+
*[style*="--mb: sm"] {
|
|
473
|
+
margin-bottom: $margin-sm;
|
|
474
|
+
}
|
|
475
|
+
*[style*="--ml:sm"],
|
|
476
|
+
*[style*="--ml: sm"] {
|
|
477
|
+
margin-left: $margin-sm;
|
|
478
|
+
}
|
|
479
|
+
*[style*="--mr:sm"],
|
|
480
|
+
*[style*="--mr: sm"] {
|
|
481
|
+
margin-right: $margin-sm;
|
|
482
|
+
}
|
|
483
|
+
*[style*="--mt:md"],
|
|
484
|
+
*[style*="--mt: md"] {
|
|
485
|
+
margin-top: $margin-md;
|
|
486
|
+
}
|
|
487
|
+
*[style*="--mb:md"],
|
|
488
|
+
*[style*="--mb: md"] {
|
|
489
|
+
margin-bottom: $margin-md;
|
|
490
|
+
}
|
|
491
|
+
*[style*="--ml:md"],
|
|
492
|
+
*[style*="--ml: md"] {
|
|
493
|
+
margin-left: $margin-md;
|
|
494
|
+
}
|
|
495
|
+
*[style*="--mr:md"],
|
|
496
|
+
*[style*="--mr: md"] {
|
|
497
|
+
margin-right: $margin-md;
|
|
498
|
+
}
|
|
499
|
+
*[style*="--mt:lg"],
|
|
500
|
+
*[style*="--mt: lg"] {
|
|
501
|
+
margin-top: $margin-lg;
|
|
502
|
+
}
|
|
503
|
+
*[style*="--mb:lg"],
|
|
504
|
+
*[style*="--mb: lg"] {
|
|
505
|
+
margin-bottom: $margin-lg;
|
|
506
|
+
}
|
|
507
|
+
*[style*="--ml:lg"],
|
|
508
|
+
*[style*="--ml: lg"] {
|
|
509
|
+
margin-left: $margin-lg;
|
|
510
|
+
}
|
|
511
|
+
*[style*="--mr:lg"],
|
|
512
|
+
*[style*="--mr: lg"] {
|
|
513
|
+
margin-right: $margin-lg;
|
|
514
|
+
}
|
|
443
515
|
}
|
|
444
516
|
|
|
445
517
|
// For signed documents
|
|
@@ -603,6 +675,55 @@ body {
|
|
|
603
675
|
}
|
|
604
676
|
}
|
|
605
677
|
}
|
|
678
|
+
//Margins
|
|
679
|
+
*[style*="--mt:sm"],
|
|
680
|
+
*[style*="--mt: sm"] {
|
|
681
|
+
margin-top: calc($margin-sm * $scaling-for-signed-documents);
|
|
682
|
+
}
|
|
683
|
+
*[style*="--mb:sm"],
|
|
684
|
+
*[style*="--mb: sm"] {
|
|
685
|
+
margin-bottom: calc($margin-sm * $scaling-for-signed-documents);
|
|
686
|
+
}
|
|
687
|
+
*[style*="--ml:sm"],
|
|
688
|
+
*[style*="--ml: sm"] {
|
|
689
|
+
margin-left: calc($margin-sm * $scaling-for-signed-documents);
|
|
690
|
+
}
|
|
691
|
+
*[style*="--mr:sm"],
|
|
692
|
+
*[style*="--mr: sm"] {
|
|
693
|
+
margin-right: calc($margin-sm * $scaling-for-signed-documents);
|
|
694
|
+
}
|
|
695
|
+
*[style*="--mt:md"],
|
|
696
|
+
*[style*="--mt: md"] {
|
|
697
|
+
margin-top: calc($margin-md * $scaling-for-signed-documents);
|
|
698
|
+
}
|
|
699
|
+
*[style*="--mb:md"],
|
|
700
|
+
*[style*="--mb: md"] {
|
|
701
|
+
margin-bottom: calc($margin-md * $scaling-for-signed-documents);
|
|
702
|
+
}
|
|
703
|
+
*[style*="--ml:md"],
|
|
704
|
+
*[style*="--ml: md"] {
|
|
705
|
+
margin-left: calc($margin-md * $scaling-for-signed-documents);
|
|
706
|
+
}
|
|
707
|
+
*[style*="--mr:md"],
|
|
708
|
+
*[style*="--mr: md"] {
|
|
709
|
+
margin-right: calc($margin-md * $scaling-for-signed-documents);
|
|
710
|
+
}
|
|
711
|
+
*[style*="--mt:lg"],
|
|
712
|
+
*[style*="--mt: lg"] {
|
|
713
|
+
margin-top: calc($margin-lg * $scaling-for-signed-documents);
|
|
714
|
+
}
|
|
715
|
+
*[style*="--mb:lg"],
|
|
716
|
+
*[style*="--mb: lg"] {
|
|
717
|
+
margin-bottom: calc($margin-lg * $scaling-for-signed-documents);
|
|
718
|
+
}
|
|
719
|
+
*[style*="--ml:lg"],
|
|
720
|
+
*[style*="--ml: lg"] {
|
|
721
|
+
margin-left: calc($margin-lg * $scaling-for-signed-documents);
|
|
722
|
+
}
|
|
723
|
+
*[style*="--mr:lg"],
|
|
724
|
+
*[style*="--mr: lg"] {
|
|
725
|
+
margin-right: calc($margin-lg * $scaling-for-signed-documents);
|
|
726
|
+
}
|
|
606
727
|
}
|
|
607
728
|
@media print {
|
|
608
729
|
.page.signed-document {
|
package/dist/components/Paper.js
CHANGED
|
@@ -10,7 +10,7 @@ var _PaperModule = _interopRequireDefault(require("./Paper.module.scss"));
|
|
|
10
10
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
11
11
|
const Paper = props => {
|
|
12
12
|
return _react.default.createElement("div", {
|
|
13
|
-
className:
|
|
13
|
+
className: "".concat(_PaperModule.default.paper, " ").concat(props.noMargin ? _PaperModule.default.noMargin : "", " ").concat(props.noPadding ? _PaperModule.default.noPadding : "")
|
|
14
14
|
}, props.children);
|
|
15
15
|
};
|
|
16
16
|
Paper.propTypes = {
|
|
@@ -11,7 +11,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
|
|
|
11
11
|
const ProgressBar = props => {
|
|
12
12
|
const scssValueProperty = "--value";
|
|
13
13
|
return _react.default.createElement("div", {
|
|
14
|
-
className:
|
|
14
|
+
className: "".concat(_ProgressBarModule.default.progressBar, " ").concat(props.hasErrors ? _ProgressBarModule.default.hasErrors : ""),
|
|
15
15
|
role: "progressbar",
|
|
16
16
|
"aria-valuenow": props.progress || 0,
|
|
17
17
|
"aria-valuemin": "0",
|
|
@@ -14,7 +14,7 @@ const RadioButtonIcon = props => {
|
|
|
14
14
|
width: props.size
|
|
15
15
|
};
|
|
16
16
|
const radioButtonIconProps = {
|
|
17
|
-
className:
|
|
17
|
+
className: "".concat(_RadioButtonIconModule.default.radioButtonIcon, " ").concat(props.checked ? _RadioButtonIconModule.default.checked : "", " ").concat(props.disabled ? _RadioButtonIconModule.default.disabled : "", " ").concat(props.hasErrors ? _RadioButtonIconModule.default.hasErrors : ""),
|
|
18
18
|
style: inlineStyle
|
|
19
19
|
};
|
|
20
20
|
return _react.default.createElement("span", radioButtonIconProps);
|
|
@@ -12,7 +12,7 @@ var _RadioButtonInputModule = _interopRequireDefault(require("./RadioButtonInput
|
|
|
12
12
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
13
13
|
const RadioButtonInput = props => {
|
|
14
14
|
const labelProps = {
|
|
15
|
-
className:
|
|
15
|
+
className: "".concat(_RadioButtonInputModule.default.radioButtonInput, " ").concat(props.checked ? _RadioButtonInputModule.default.checked : "", " ").concat(props.disabled ? _RadioButtonInputModule.default.disabled : "", " ").concat(props.hasErrors ? _RadioButtonInputModule.default.hasErrors : ""),
|
|
16
16
|
htmlFor: props.id
|
|
17
17
|
};
|
|
18
18
|
const iconProps = {
|
|
@@ -22,12 +22,13 @@ const RadioButtonList = _ref => {
|
|
|
22
22
|
const renderChildElements = childElements => {
|
|
23
23
|
const childElementsthroughFragments = (0, _helpers.cloneThroughFragments)(childElements);
|
|
24
24
|
return childElementsthroughFragments.map((childElement, index) => {
|
|
25
|
-
|
|
25
|
+
var _childElement$props;
|
|
26
|
+
const isRadioButtonListItem = (childElement === null || childElement === void 0 || (_childElement$props = childElement.props) === null || _childElement$props === void 0 ? void 0 : _childElement$props.type) === "RadioButtonListItem";
|
|
26
27
|
if (isRadioButtonListItem) {
|
|
27
28
|
const childElementCopy = _react.default.cloneElement(childElement, {
|
|
28
29
|
requiredGroup: required,
|
|
29
30
|
compact: compact,
|
|
30
|
-
key:
|
|
31
|
+
key: "radioButtonListItem-".concat(index)
|
|
31
32
|
});
|
|
32
33
|
return childElementCopy;
|
|
33
34
|
} else {
|
|
@@ -37,7 +38,7 @@ const RadioButtonList = _ref => {
|
|
|
37
38
|
};
|
|
38
39
|
return _react.default.createElement("fieldset", {
|
|
39
40
|
className: _RadioButtonListModule.default.radioButtonList
|
|
40
|
-
}, !!legend
|
|
41
|
+
}, !!(legend !== null && legend !== void 0 && legend.length) ? _react.default.createElement("legend", null, legendSize ? _react.default.createElement(_Header.default, {
|
|
41
42
|
size: legendSize
|
|
42
43
|
}, legend) : legend, required && _react.default.createElement("img", {
|
|
43
44
|
src: _asterisk.default,
|
|
@@ -17,6 +17,11 @@ var _SelectModule = _interopRequireDefault(require("./Select.module.scss"));
|
|
|
17
17
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
18
18
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
19
19
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
20
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
21
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
22
|
+
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
23
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
|
|
24
|
+
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
20
25
|
const Select = props => {
|
|
21
26
|
const [showDropdownList, setShowDropdownList] = (0, _react.useState)(false);
|
|
22
27
|
const dropdownRef = (0, _react.useRef)();
|
|
@@ -39,7 +44,7 @@ const Select = props => {
|
|
|
39
44
|
}
|
|
40
45
|
};
|
|
41
46
|
const handleClickOutside = event => {
|
|
42
|
-
if (dropdownRef
|
|
47
|
+
if (dropdownRef !== null && dropdownRef !== void 0 && dropdownRef.current && !dropdownRef.current.contains(event.target)) {
|
|
43
48
|
hideDropdownList();
|
|
44
49
|
}
|
|
45
50
|
};
|
|
@@ -77,7 +82,7 @@ const Select = props => {
|
|
|
77
82
|
};
|
|
78
83
|
const renderSelectedValues = (options, selectElementProps) => {
|
|
79
84
|
const selectedValues = selectElementProps.defaultValue || selectElementProps.value;
|
|
80
|
-
return selectedValues
|
|
85
|
+
return selectedValues !== null && selectedValues !== void 0 && selectedValues.length ? selectedValues.map(value => {
|
|
81
86
|
const keyForValue = getKeyByValue(value, options);
|
|
82
87
|
return keyForValue;
|
|
83
88
|
}).join(", ") : null;
|
|
@@ -89,7 +94,7 @@ const Select = props => {
|
|
|
89
94
|
const isSelected = selectedValues && selectedValues.length && selectedValues.includes(optionObject.value);
|
|
90
95
|
return _react.default.createElement(_CheckBoxListItem.default, {
|
|
91
96
|
key: index,
|
|
92
|
-
id:
|
|
97
|
+
id: "".concat(props.id, "-").concat(index),
|
|
93
98
|
value: optionObject.value,
|
|
94
99
|
checked: isSelected,
|
|
95
100
|
onChange: () => selectElementProps.onChange(optionObject.value)
|
|
@@ -112,7 +117,7 @@ const Select = props => {
|
|
|
112
117
|
}, placeholder) : "";
|
|
113
118
|
};
|
|
114
119
|
const getErrorElementId = () => {
|
|
115
|
-
return
|
|
120
|
+
return "".concat(props.id, "-errorMessage");
|
|
116
121
|
};
|
|
117
122
|
if (props.contentOnly) {
|
|
118
123
|
const value = props.defaultValue ? props.defaultValue : props.value || null;
|
|
@@ -122,12 +127,11 @@ const Select = props => {
|
|
|
122
127
|
htmlFor: props.id
|
|
123
128
|
}, props.label), _react.default.createElement("span", null, value ? props.keyAsContent ? getKeyByValue(value, props.options) : value : props.defaultContent));
|
|
124
129
|
} else {
|
|
130
|
+
var _props$width, _props$errorMessage, _props$ariaDescribed, _props$width2;
|
|
125
131
|
const defaultValue = !props.value && props.defaultValue ? props.defaultValue : false;
|
|
126
|
-
const styleRules = {
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
})
|
|
130
|
-
};
|
|
132
|
+
const styleRules = _objectSpread({}, ((_props$width = props.width) === null || _props$width === void 0 ? void 0 : _props$width.length) && {
|
|
133
|
+
maxWidth: props.width
|
|
134
|
+
});
|
|
131
135
|
const className = (0, _helpers.classNameArrayToClassNameString)([props.hasErrors && _SelectModule.default.hasErrors, props.multiple && _SelectModule.default.multiple]);
|
|
132
136
|
const selectElementProps = {
|
|
133
137
|
name: props.name,
|
|
@@ -138,9 +142,9 @@ const Select = props => {
|
|
|
138
142
|
onChange: props.onChange,
|
|
139
143
|
id: props.id,
|
|
140
144
|
role: props.role,
|
|
141
|
-
key:
|
|
145
|
+
key: "".concat(props.id, "-").concat((0, _generators.generateRandomString)(6)),
|
|
142
146
|
className,
|
|
143
|
-
"aria-describedby": props.hasErrors && !!props.errorMessage
|
|
147
|
+
"aria-describedby": props.hasErrors && !!((_props$errorMessage = props.errorMessage) !== null && _props$errorMessage !== void 0 && _props$errorMessage.length) ? getErrorElementId() : !!((_props$ariaDescribed = props["aria-describedby"]) !== null && _props$ariaDescribed !== void 0 && _props$ariaDescribed.length) ? props["aria-describedby"] : null,
|
|
144
148
|
"aria-invalid": props.hasErrors ? "true" : null,
|
|
145
149
|
style: styleRules
|
|
146
150
|
};
|
|
@@ -154,11 +158,9 @@ const Select = props => {
|
|
|
154
158
|
className: _SelectModule.default.requiredSymbol
|
|
155
159
|
})), _react.default.createElement("div", {
|
|
156
160
|
className: _SelectModule.default.selectContainer,
|
|
157
|
-
style: {
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
})
|
|
161
|
-
}
|
|
161
|
+
style: _objectSpread({}, ((_props$width2 = props.width) === null || _props$width2 === void 0 ? void 0 : _props$width2.length) && {
|
|
162
|
+
maxWidth: props.width
|
|
163
|
+
})
|
|
162
164
|
}, _react.default.createElement("span", {
|
|
163
165
|
className: _SelectModule.default.selectListArrow
|
|
164
166
|
}), props.multiple ? _react.default.createElement("div", {
|
package/dist/components/Table.js
CHANGED
|
@@ -12,12 +12,12 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
|
|
|
12
12
|
const getCaptionAlignClass = captionAlign => {
|
|
13
13
|
const defaultValue = "left";
|
|
14
14
|
const availableValues = ["left", "center", "right"];
|
|
15
|
-
return captionAlign
|
|
15
|
+
return captionAlign !== null && captionAlign !== void 0 && captionAlign.length && availableValues.includes(captionAlign) ? _TableModule.default["captionAlign-".concat(captionAlign)] : _TableModule.default["captionAlign-".concat(defaultValue)];
|
|
16
16
|
};
|
|
17
17
|
const getCaptionSideClass = captionSide => {
|
|
18
18
|
const defaultValue = "top";
|
|
19
19
|
const availableValues = ["top", "bottom"];
|
|
20
|
-
return captionSide
|
|
20
|
+
return captionSide !== null && captionSide !== void 0 && captionSide.length && availableValues.includes(captionSide) ? _TableModule.default["captionSide-".concat(captionSide)] : _TableModule.default["captionSide-".concat(defaultValue)];
|
|
21
21
|
};
|
|
22
22
|
const Table = props => {
|
|
23
23
|
return _react.default.createElement("table", {
|
|
@@ -12,24 +12,27 @@ var _generators = require("../functions/generators");
|
|
|
12
12
|
var _asterisk = _interopRequireDefault(require("../assets/svg/asterisk.svg?url"));
|
|
13
13
|
var _TextareaModule = _interopRequireDefault(require("./Textarea.module.scss"));
|
|
14
14
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
15
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
16
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
17
|
+
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
18
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
|
|
19
|
+
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
15
20
|
const Textarea = props => {
|
|
16
21
|
const renderValueAsText = (value, defaultContent) => {
|
|
17
22
|
return value ? value : defaultContent;
|
|
18
23
|
};
|
|
19
24
|
const getErrorElementId = () => {
|
|
20
|
-
return
|
|
25
|
+
return "".concat(props.id, "-errorMessage");
|
|
21
26
|
};
|
|
22
27
|
const renderInputField = () => {
|
|
23
|
-
|
|
28
|
+
var _props$value, _props$defaultValue, _props$width, _props$resize, _props$errorMessage, _props$ariaDescribed;
|
|
29
|
+
const defaultValue = !((_props$value = props.value) !== null && _props$value !== void 0 && _props$value.length) && (_props$defaultValue = props.defaultValue) !== null && _props$defaultValue !== void 0 && _props$defaultValue.length ? props.defaultValue : false;
|
|
24
30
|
const defaultKey = props.elementKey || null;
|
|
25
|
-
const styleRules = {
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
resize: props.resize
|
|
31
|
-
})
|
|
32
|
-
};
|
|
31
|
+
const styleRules = _objectSpread(_objectSpread({}, ((_props$width = props.width) === null || _props$width === void 0 ? void 0 : _props$width.length) && {
|
|
32
|
+
maxWidth: props.width
|
|
33
|
+
}), ((_props$resize = props.resize) === null || _props$resize === void 0 ? void 0 : _props$resize.length) && {
|
|
34
|
+
resize: props.resize
|
|
35
|
+
});
|
|
33
36
|
const textareaElementProps = {
|
|
34
37
|
name: props.name,
|
|
35
38
|
readOnly: props.readOnly,
|
|
@@ -37,14 +40,14 @@ const Textarea = props => {
|
|
|
37
40
|
required: props.required,
|
|
38
41
|
type: props.type,
|
|
39
42
|
id: props.id,
|
|
40
|
-
key: defaultKey ||
|
|
43
|
+
key: defaultKey || "".concat(props.id, "-").concat((0, _generators.generateRandomString)(6)),
|
|
41
44
|
onChange: props.onChange,
|
|
42
45
|
onBlur: props.onBlur,
|
|
43
46
|
[defaultValue ? "defaultValue" : "value"]: defaultValue || props.value,
|
|
44
47
|
placeholder: props.placeholder,
|
|
45
48
|
rows: props.rows,
|
|
46
49
|
className: props.hasErrors ? _TextareaModule.default.hasErrors : "",
|
|
47
|
-
"aria-describedby": props.hasErrors && !!props.errorMessage
|
|
50
|
+
"aria-describedby": props.hasErrors && !!((_props$errorMessage = props.errorMessage) !== null && _props$errorMessage !== void 0 && _props$errorMessage.length) ? getErrorElementId() : !!((_props$ariaDescribed = props["aria-describedby"]) !== null && _props$ariaDescribed !== void 0 && _props$ariaDescribed.length) ? props["aria-describedby"] : null,
|
|
48
51
|
"aria-invalid": props.hasErrors ? "true" : null,
|
|
49
52
|
style: styleRules
|
|
50
53
|
};
|
package/dist/components/Theme.js
CHANGED
|
@@ -35,7 +35,7 @@ const Theme = _ref => {
|
|
|
35
35
|
return _react.default.createElement(_react.Fragment, {
|
|
36
36
|
key: color
|
|
37
37
|
}, _react.default.createElement("div", null, color), _react.default.createElement("div", {
|
|
38
|
-
className:
|
|
38
|
+
className: "".concat(_ThemeModule.default.color, " ").concat(colorClassName)
|
|
39
39
|
}));
|
|
40
40
|
});
|
|
41
41
|
};
|
|
@@ -15,7 +15,7 @@ const ThemeProvider = _ref => {
|
|
|
15
15
|
} = _ref;
|
|
16
16
|
const cssVariablesFromTheme = (0, _helpers.getCssVariablesFromTheme)(theme);
|
|
17
17
|
const cssColorVariablesString = (0, _helpers.stringifyCssColorVariables)(cssVariablesFromTheme);
|
|
18
|
-
(0, _helpers.addGlobalStylesheet)("theme-provider",
|
|
18
|
+
(0, _helpers.addGlobalStylesheet)("theme-provider", ":root {".concat(cssColorVariablesString, "} ").concat(_ThemeProviderModule.default));
|
|
19
19
|
return children;
|
|
20
20
|
};
|
|
21
21
|
ThemeProvider.propTypes = {
|
|
@@ -8,6 +8,11 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
8
8
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
9
|
var _ToggleNavigationButtonModule = _interopRequireDefault(require("./ToggleNavigationButton.module.scss"));
|
|
10
10
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
11
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
12
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
13
|
+
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
14
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
|
|
15
|
+
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
11
16
|
const ToggleNavigationButton = _ref => {
|
|
12
17
|
let {
|
|
13
18
|
id,
|
|
@@ -18,11 +23,10 @@ const ToggleNavigationButton = _ref => {
|
|
|
18
23
|
isOpen
|
|
19
24
|
} = _ref;
|
|
20
25
|
const elementClass = _ToggleNavigationButtonModule.default.toggleNavigationButton;
|
|
21
|
-
let element = _react.default.createElement(htmlTag, {
|
|
22
|
-
...buttonProps,
|
|
26
|
+
let element = _react.default.createElement(htmlTag, _objectSpread(_objectSpread({}, buttonProps), {}, {
|
|
23
27
|
className: elementClass,
|
|
24
28
|
id: id || null
|
|
25
|
-
}, isOpen ? hideText : showText);
|
|
29
|
+
}), isOpen ? hideText : showText);
|
|
26
30
|
return element;
|
|
27
31
|
};
|
|
28
32
|
ToggleNavigationButton.propTypes = {
|
|
@@ -11,6 +11,7 @@ var _helpers = require("../functions/helpers");
|
|
|
11
11
|
var _WizardNavigationModule = _interopRequireDefault(require("./WizardNavigation.module.scss"));
|
|
12
12
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
13
13
|
const WizardNavigation = props => {
|
|
14
|
+
var _Object$keys, _props$ariaLabel;
|
|
14
15
|
const renderSteps = (steps, activeStepId) => {
|
|
15
16
|
const hasSteps = steps && Object.keys(steps).length;
|
|
16
17
|
return hasSteps ? Object.keys(steps).map((stepKey, stepIndex) => {
|
|
@@ -24,9 +25,9 @@ const WizardNavigation = props => {
|
|
|
24
25
|
});
|
|
25
26
|
}) : null;
|
|
26
27
|
};
|
|
27
|
-
const amountOfSteps = props.steps && Object.keys(props.steps)
|
|
28
|
-
const defaultAriaLabel =
|
|
29
|
-
const ariaLabel = props["aria-label"]
|
|
28
|
+
const amountOfSteps = props.steps && (_Object$keys = Object.keys(props.steps)) !== null && _Object$keys !== void 0 && _Object$keys.length ? Object.keys(props.steps).length : 0;
|
|
29
|
+
const defaultAriaLabel = "I dette skjemaet er det totalt ".concat(amountOfSteps, " steg som du skal g\xE5 igjennom");
|
|
30
|
+
const ariaLabel = (_props$ariaLabel = props["aria-label"]) !== null && _props$ariaLabel !== void 0 && _props$ariaLabel.length ? props["aria-label"] : defaultAriaLabel;
|
|
30
31
|
return _react.default.createElement("nav", {
|
|
31
32
|
"aria-label": ariaLabel,
|
|
32
33
|
className: (0, _helpers.classNameArrayToClassNameString)([_WizardNavigationModule.default.wizardTopnavContainer, _WizardNavigationModule.default[props.direction]])
|
|
@@ -5,8 +5,14 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.stringifyCssColorVariables = exports.setFocusToElement = exports.getFocusableElementsInsideElement = exports.getCssVariablesFromTheme = exports.getCssSizeVariablesFromTheme = exports.getCssColorVariablesFromTheme = exports.cloneThroughFragments = exports.classNameArrayToClassNameString = exports.camelCaseToKebabCase = exports.addGlobalStylesheet = exports.addFocusTrapInsideElement = void 0;
|
|
7
7
|
var _react = require("react");
|
|
8
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
9
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
10
|
+
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
11
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
|
|
12
|
+
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
8
13
|
const classNameArrayToClassNameString = classNameArray => {
|
|
9
|
-
|
|
14
|
+
var _classNameArray$filte;
|
|
15
|
+
return (classNameArray === null || classNameArray === void 0 || (_classNameArray$filte = classNameArray.filter(className => className)) === null || _classNameArray$filte === void 0 ? void 0 : _classNameArray$filte.join(" ")) || "";
|
|
10
16
|
};
|
|
11
17
|
exports.classNameArrayToClassNameString = classNameArrayToClassNameString;
|
|
12
18
|
const camelCaseToKebabCase = string => {
|
|
@@ -14,43 +20,43 @@ const camelCaseToKebabCase = string => {
|
|
|
14
20
|
};
|
|
15
21
|
exports.camelCaseToKebabCase = camelCaseToKebabCase;
|
|
16
22
|
const getCssColorVariablesFromTheme = theme => {
|
|
17
|
-
|
|
23
|
+
var _Object$entries;
|
|
24
|
+
return !!(theme !== null && theme !== void 0 && theme.colors) && !!((_Object$entries = Object.entries(theme === null || theme === void 0 ? void 0 : theme.colors)) !== null && _Object$entries !== void 0 && _Object$entries.length) && Object.entries(theme === null || theme === void 0 ? void 0 : theme.colors).reduce((acc, _ref) => {
|
|
18
25
|
let [key, value] = _ref;
|
|
19
|
-
if (key
|
|
20
|
-
acc[
|
|
26
|
+
if (key !== null && key !== void 0 && key.length && value !== null && value !== void 0 && value.length) {
|
|
27
|
+
acc["--color-".concat(camelCaseToKebabCase(key))] = value;
|
|
21
28
|
}
|
|
22
29
|
return acc;
|
|
23
30
|
}, {});
|
|
24
31
|
};
|
|
25
32
|
exports.getCssColorVariablesFromTheme = getCssColorVariablesFromTheme;
|
|
26
33
|
const getCssSizeVariablesFromTheme = theme => {
|
|
27
|
-
|
|
34
|
+
var _Object$entries2;
|
|
35
|
+
return !!(theme !== null && theme !== void 0 && theme.sizes) && !!((_Object$entries2 = Object.entries(theme === null || theme === void 0 ? void 0 : theme.sizes)) !== null && _Object$entries2 !== void 0 && _Object$entries2.length) && Object.entries(theme === null || theme === void 0 ? void 0 : theme.sizes).reduce((acc, _ref2) => {
|
|
28
36
|
let [key, value] = _ref2;
|
|
29
|
-
if (key
|
|
30
|
-
acc[
|
|
37
|
+
if (key !== null && key !== void 0 && key.length && value !== null && value !== void 0 && value.length) {
|
|
38
|
+
acc["--size-".concat(camelCaseToKebabCase(key))] = value;
|
|
31
39
|
}
|
|
32
40
|
return acc;
|
|
33
41
|
}, {});
|
|
34
42
|
};
|
|
35
43
|
exports.getCssSizeVariablesFromTheme = getCssSizeVariablesFromTheme;
|
|
36
44
|
const getCssVariablesFromTheme = theme => {
|
|
37
|
-
return {
|
|
38
|
-
...getCssColorVariablesFromTheme(theme),
|
|
39
|
-
...getCssSizeVariablesFromTheme(theme)
|
|
40
|
-
};
|
|
45
|
+
return _objectSpread(_objectSpread({}, getCssColorVariablesFromTheme(theme)), getCssSizeVariablesFromTheme(theme));
|
|
41
46
|
};
|
|
42
47
|
exports.getCssVariablesFromTheme = getCssVariablesFromTheme;
|
|
43
48
|
const addGlobalStylesheet = (styleElementId, styles) => {
|
|
49
|
+
var _document$getElementB;
|
|
44
50
|
const style = document.createElement("style");
|
|
45
51
|
style.setAttribute("id", styleElementId);
|
|
46
52
|
style.textContent = styles;
|
|
47
|
-
document.getElementById(styleElementId)
|
|
53
|
+
(_document$getElementB = document.getElementById(styleElementId)) === null || _document$getElementB === void 0 || _document$getElementB.remove();
|
|
48
54
|
document.head.appendChild(style);
|
|
49
55
|
};
|
|
50
56
|
exports.addGlobalStylesheet = addGlobalStylesheet;
|
|
51
57
|
const stringifyCssColorVariables = colorVariables => {
|
|
52
58
|
return Object.keys(colorVariables).reduce((css, key) => {
|
|
53
|
-
return
|
|
59
|
+
return "".concat(css).concat(key, ": ").concat(colorVariables[key], ";");
|
|
54
60
|
}, "");
|
|
55
61
|
};
|
|
56
62
|
exports.stringifyCssColorVariables = stringifyCssColorVariables;
|
|
@@ -60,9 +66,7 @@ const cloneThroughFragments = children => {
|
|
|
60
66
|
if (c.type === _react.Fragment) {
|
|
61
67
|
return cloneThroughFragments(c.props.children);
|
|
62
68
|
}
|
|
63
|
-
return (0, _react.cloneElement)(c, {
|
|
64
|
-
...c.props
|
|
65
|
-
});
|
|
69
|
+
return (0, _react.cloneElement)(c, _objectSpread({}, c.props));
|
|
66
70
|
}
|
|
67
71
|
return c;
|
|
68
72
|
});
|
|
@@ -84,8 +88,8 @@ exports.getFocusableElementsInsideElement = getFocusableElementsInsideElement;
|
|
|
84
88
|
const addFocusTrapInsideElement = element => {
|
|
85
89
|
setFocusToElement(element);
|
|
86
90
|
const focusableElements = getFocusableElementsInsideElement(element);
|
|
87
|
-
const firstFocusableElement = focusableElements
|
|
88
|
-
const lastFocusableElement = focusableElements
|
|
91
|
+
const firstFocusableElement = focusableElements !== null && focusableElements !== void 0 && focusableElements.length ? focusableElements[0] : null;
|
|
92
|
+
const lastFocusableElement = (focusableElements === null || focusableElements === void 0 ? void 0 : focusableElements.length) > 1 ? focusableElements[focusableElements.length - 1] : firstFocusableElement;
|
|
89
93
|
if (firstFocusableElement) {
|
|
90
94
|
firstFocusableElement.onkeydown = event => {
|
|
91
95
|
if (event.keyCode === 9 && event.shiftKey) {
|
package/dist/functions/theme.js
CHANGED
|
@@ -5,14 +5,14 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.getThemeLogoPadding = exports.getThemeLogo = exports.getThemeAppName = void 0;
|
|
7
7
|
const getThemeLogo = theme => {
|
|
8
|
-
return theme
|
|
8
|
+
return (theme === null || theme === void 0 ? void 0 : theme.logo) || null;
|
|
9
9
|
};
|
|
10
10
|
exports.getThemeLogo = getThemeLogo;
|
|
11
11
|
const getThemeLogoPadding = theme => {
|
|
12
|
-
return theme
|
|
12
|
+
return (theme === null || theme === void 0 ? void 0 : theme.logoPadding) || null;
|
|
13
13
|
};
|
|
14
14
|
exports.getThemeLogoPadding = getThemeLogoPadding;
|
|
15
15
|
const getThemeAppName = theme => {
|
|
16
|
-
return theme
|
|
16
|
+
return (theme === null || theme === void 0 ? void 0 : theme.appName) || null;
|
|
17
17
|
};
|
|
18
18
|
exports.getThemeAppName = getThemeAppName;
|