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.
Files changed (34) hide show
  1. package/dist/components/Accordion.js +2 -2
  2. package/dist/components/Button.js +19 -12
  3. package/dist/components/CheckBoxIcon.js +1 -1
  4. package/dist/components/CheckBoxInput.js +1 -1
  5. package/dist/components/CheckBoxList.js +4 -3
  6. package/dist/components/Container.js +2 -1
  7. package/dist/components/ContentBox.js +2 -1
  8. package/dist/components/DescriptionList.js +1 -1
  9. package/dist/components/Dialog.js +4 -3
  10. package/dist/components/DragAndDropFileInput.js +5 -4
  11. package/dist/components/ErrorMessage.js +4 -2
  12. package/dist/components/Header.js +6 -5
  13. package/dist/components/InputField.js +16 -11
  14. package/dist/components/Label.js +11 -8
  15. package/dist/components/List.js +2 -2
  16. package/dist/components/NavigationBar.js +8 -7
  17. package/dist/components/PDF.scss +122 -1
  18. package/dist/components/Paper.js +1 -1
  19. package/dist/components/ProgressBar.js +1 -1
  20. package/dist/components/RadioButtonIcon.js +1 -1
  21. package/dist/components/RadioButtonInput.js +1 -1
  22. package/dist/components/RadioButtonList.js +4 -3
  23. package/dist/components/Select.js +18 -16
  24. package/dist/components/Table.js +2 -2
  25. package/dist/components/Textarea.js +15 -12
  26. package/dist/components/Theme.js +1 -1
  27. package/dist/components/ThemeProvider.js +1 -1
  28. package/dist/components/ToggleNavigationButton.js +7 -3
  29. package/dist/components/WizardNavigation.js +4 -3
  30. package/dist/functions/helpers.js +22 -18
  31. package/dist/functions/theme.js +3 -3
  32. package/dist/style/pdf.css +115 -1
  33. package/dist/style/pdf.css.map +1 -1
  34. package/package.json +1 -1
@@ -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 {
@@ -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: `${_PaperModule.default.paper} ${props.noMargin ? _PaperModule.default.noMargin : ""} ${props.noPadding ? _PaperModule.default.noPadding : ""}`
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: `${_ProgressBarModule.default.progressBar} ${props.hasErrors ? _ProgressBarModule.default.hasErrors : ""}`,
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: `${_RadioButtonIconModule.default.radioButtonIcon} ${props.checked ? _RadioButtonIconModule.default.checked : ""} ${props.disabled ? _RadioButtonIconModule.default.disabled : ""} ${props.hasErrors ? _RadioButtonIconModule.default.hasErrors : ""}`,
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: `${_RadioButtonInputModule.default.radioButtonInput} ${props.checked ? _RadioButtonInputModule.default.checked : ""} ${props.disabled ? _RadioButtonInputModule.default.disabled : ""} ${props.hasErrors ? _RadioButtonInputModule.default.hasErrors : ""}`,
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
- const isRadioButtonListItem = childElement?.props?.type === "RadioButtonListItem";
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: `radioButtonListItem-${index}`
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?.length ? _react.default.createElement("legend", null, legendSize ? _react.default.createElement(_Header.default, {
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?.current && !dropdownRef.current.contains(event.target)) {
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?.length ? selectedValues.map(value => {
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: `${props.id}-${index}`,
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 `${props.id}-errorMessage`;
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
- ...(props.width?.length && {
128
- maxWidth: props.width
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: `${props.id}-${(0, _generators.generateRandomString)(6)}`,
145
+ key: "".concat(props.id, "-").concat((0, _generators.generateRandomString)(6)),
142
146
  className,
143
- "aria-describedby": props.hasErrors && !!props.errorMessage?.length ? getErrorElementId() : !!props["aria-describedby"]?.length ? props["aria-describedby"] : null,
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
- ...(props.width?.length && {
159
- maxWidth: props.width
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", {
@@ -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?.length && availableValues.includes(captionAlign) ? _TableModule.default[`captionAlign-${captionAlign}`] : _TableModule.default[`captionAlign-${defaultValue}`];
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?.length && availableValues.includes(captionSide) ? _TableModule.default[`captionSide-${captionSide}`] : _TableModule.default[`captionSide-${defaultValue}`];
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 `${props.id}-errorMessage`;
25
+ return "".concat(props.id, "-errorMessage");
21
26
  };
22
27
  const renderInputField = () => {
23
- const defaultValue = !props.value?.length && props.defaultValue?.length ? props.defaultValue : false;
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
- ...(props.width?.length && {
27
- maxWidth: props.width
28
- }),
29
- ...(props.resize?.length && {
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 || `${props.id}-${(0, _generators.generateRandomString)(6)}`,
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?.length ? getErrorElementId() : !!props["aria-describedby"]?.length ? props["aria-describedby"] : null,
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
  };
@@ -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: `${_ThemeModule.default.color} ${colorClassName}`
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", `:root {${cssColorVariablesString}} ${_ThemeProviderModule.default}`);
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)?.length ? Object.keys(props.steps).length : 0;
28
- const defaultAriaLabel = `I dette skjemaet er det totalt ${amountOfSteps} steg som du skal igjennom`;
29
- const ariaLabel = props["aria-label"]?.length ? props["aria-label"] : defaultAriaLabel;
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
- return classNameArray?.filter(className => className)?.join(" ") || "";
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
- return !!theme?.colors && !!Object.entries(theme?.colors)?.length && Object.entries(theme?.colors).reduce((acc, _ref) => {
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?.length && value?.length) {
20
- acc[`--color-${camelCaseToKebabCase(key)}`] = value;
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
- return !!theme?.sizes && !!Object.entries(theme?.sizes)?.length && Object.entries(theme?.sizes).reduce((acc, _ref2) => {
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?.length && value?.length) {
30
- acc[`--size-${camelCaseToKebabCase(key)}`] = value;
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)?.remove();
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 `${css}${key}: ${colorVariables[key]};`;
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?.length ? focusableElements[0] : null;
88
- const lastFocusableElement = focusableElements?.length > 1 ? focusableElements[focusableElements.length - 1] : firstFocusableElement;
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) {
@@ -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?.logo || null;
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?.logoPadding || null;
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?.appName || null;
16
+ return (theme === null || theme === void 0 ? void 0 : theme.appName) || null;
17
17
  };
18
18
  exports.getThemeAppName = getThemeAppName;