dibk-design 3.4.0 → 3.6.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 +14 -23
- package/dist/components/Button.js +15 -20
- package/dist/components/CheckBoxIcon.js +8 -11
- package/dist/components/CheckBoxInput.js +4 -4
- package/dist/components/CheckBoxList.js +7 -7
- package/dist/components/CheckBoxListItem.js +4 -4
- package/dist/components/Container.js +1 -1
- package/dist/components/ContentBox.js +7 -7
- package/dist/components/Dialog.js +8 -9
- package/dist/components/DragAndDropFileInput.js +21 -33
- package/dist/components/ErrorBox.js +2 -2
- package/dist/components/ErrorMessage.js +3 -3
- package/dist/components/Footer.js +1 -1
- package/dist/components/Header.js +13 -10
- package/dist/components/InputField.js +31 -27
- package/dist/components/Label.js +10 -13
- package/dist/components/List.js +9 -11
- package/dist/components/ListItem.js +2 -2
- package/dist/components/LoadingAnimation.js +1 -1
- package/dist/components/NavigationBar.js +27 -39
- package/dist/components/NavigationBarListItem.js +4 -5
- package/dist/components/Paper.js +1 -1
- package/dist/components/ProgressBar.js +5 -7
- package/dist/components/RadioButtonIcon.js +8 -11
- package/dist/components/RadioButtonInput.js +4 -4
- package/dist/components/RadioButtonList.js +7 -7
- package/dist/components/RadioButtonListItem.js +4 -4
- package/dist/components/Select.js +61 -64
- package/dist/components/Table.js +7 -7
- package/dist/components/Textarea.js +28 -23
- package/dist/components/Theme.js +15 -15
- package/dist/components/WizardNavigation/Step.js +12 -11
- package/dist/components/WizardNavigation.js +8 -8
- package/dist/functions/generators.js +7 -6
- package/dist/functions/helpers.js +24 -25
- package/dist/functions/theme.js +21 -11
- package/dist/index.js +32 -32
- package/package.json +1 -1
|
@@ -16,36 +16,21 @@ var _helpers = require("../functions/helpers");
|
|
|
16
16
|
var _asterisk = _interopRequireDefault(require("../assets/svg/asterisk.svg?url"));
|
|
17
17
|
var _SelectModule = _interopRequireDefault(require("./Select.module.scss"));
|
|
18
18
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
19
|
-
function _getRequireWildcardCache(
|
|
20
|
-
function _interopRequireWildcard(
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
26
|
-
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
27
|
-
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
28
|
-
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
29
|
-
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
30
|
-
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
31
|
-
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
32
|
-
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
33
|
-
var Select = function Select(props) {
|
|
34
|
-
var _useState = (0, _react.useState)(false),
|
|
35
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
36
|
-
showDropdownList = _useState2[0],
|
|
37
|
-
setShowDropdownList = _useState2[1];
|
|
38
|
-
var dropdownRef = (0, _react.useRef)();
|
|
39
|
-
var wrapperRef = (0, _react.useCallback)(function (element) {
|
|
19
|
+
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); }
|
|
20
|
+
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 && Object.prototype.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; }
|
|
21
|
+
const Select = props => {
|
|
22
|
+
const [showDropdownList, setShowDropdownList] = (0, _react.useState)(false);
|
|
23
|
+
const dropdownRef = (0, _react.useRef)();
|
|
24
|
+
const wrapperRef = (0, _react.useCallback)(element => {
|
|
40
25
|
if (!!element) {
|
|
41
26
|
(0, _helpers.addFocusTrapInsideElement)(element);
|
|
42
27
|
}
|
|
43
28
|
}, []);
|
|
44
|
-
|
|
29
|
+
const hideDropdownList = () => {
|
|
45
30
|
setShowDropdownList(false);
|
|
46
31
|
};
|
|
47
|
-
(0, _react.useEffect)(
|
|
48
|
-
|
|
32
|
+
(0, _react.useEffect)(() => {
|
|
33
|
+
const keyDownFunction = event => {
|
|
49
34
|
switch (event.keyCode) {
|
|
50
35
|
case 27:
|
|
51
36
|
hideDropdownList();
|
|
@@ -54,7 +39,7 @@ var Select = function Select(props) {
|
|
|
54
39
|
return null;
|
|
55
40
|
}
|
|
56
41
|
};
|
|
57
|
-
|
|
42
|
+
const handleClickOutside = event => {
|
|
58
43
|
if (dropdownRef !== null && dropdownRef !== void 0 && dropdownRef.current && !dropdownRef.current.contains(event.target)) {
|
|
59
44
|
hideDropdownList();
|
|
60
45
|
}
|
|
@@ -62,20 +47,20 @@ var Select = function Select(props) {
|
|
|
62
47
|
document.addEventListener("mousedown", handleClickOutside);
|
|
63
48
|
document.addEventListener("keydown", keyDownFunction, false);
|
|
64
49
|
}, [props, wrapperRef]);
|
|
65
|
-
|
|
50
|
+
const getThemeErrorInputStyle = theme => {
|
|
66
51
|
return {
|
|
67
52
|
boxShadow: "0 0 3px ".concat((0, _theme.getThemePaletteBackgroundColor)(theme, "warning")),
|
|
68
53
|
borderColor: (0, _theme.getThemePaletteBackgroundColor)(theme, "warning")
|
|
69
54
|
};
|
|
70
55
|
};
|
|
71
|
-
|
|
56
|
+
const getThemeArrowStyle = theme => {
|
|
72
57
|
return {
|
|
73
58
|
borderTopColor: (0, _theme.getThemePaletteBackgroundColor)(theme, "primary")
|
|
74
59
|
};
|
|
75
60
|
};
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
if (
|
|
61
|
+
const getKeyByValue = (value, options) => {
|
|
62
|
+
const selectedOption = options && options.length ? options.find(option => {
|
|
63
|
+
if (typeof option === "object") {
|
|
79
64
|
return option.value === value;
|
|
80
65
|
} else {
|
|
81
66
|
return option === value;
|
|
@@ -89,8 +74,8 @@ var Select = function Select(props) {
|
|
|
89
74
|
return selectedOption;
|
|
90
75
|
}
|
|
91
76
|
};
|
|
92
|
-
|
|
93
|
-
if (
|
|
77
|
+
const createOptionObject = option => {
|
|
78
|
+
if (typeof option === "object") {
|
|
94
79
|
return {
|
|
95
80
|
key: option.key ? option.key : "",
|
|
96
81
|
value: option.value ? option.value : ""
|
|
@@ -102,68 +87,78 @@ var Select = function Select(props) {
|
|
|
102
87
|
};
|
|
103
88
|
}
|
|
104
89
|
};
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
return selectedValues !== null && selectedValues !== void 0 && selectedValues.length ? selectedValues.map(
|
|
108
|
-
|
|
90
|
+
const renderSelectedValues = (options, selectElementProps) => {
|
|
91
|
+
const selectedValues = selectElementProps.defaultValue || selectElementProps.value;
|
|
92
|
+
return selectedValues !== null && selectedValues !== void 0 && selectedValues.length ? selectedValues.map(value => {
|
|
93
|
+
const keyForValue = getKeyByValue(value, options);
|
|
109
94
|
return keyForValue;
|
|
110
95
|
}).join(", ") : null;
|
|
111
96
|
};
|
|
112
|
-
|
|
113
|
-
return options.map(
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
97
|
+
const renderCheckBoxElements = (options, selectElementProps) => {
|
|
98
|
+
return options.map((option, index) => {
|
|
99
|
+
let optionObject = createOptionObject(option);
|
|
100
|
+
const selectedValues = selectElementProps.defaultValue || selectElementProps.value;
|
|
101
|
+
const isSelected = selectedValues && selectedValues.length && selectedValues.includes(optionObject.value);
|
|
117
102
|
return _react.default.createElement(_CheckBoxListItem.default, {
|
|
118
103
|
key: index,
|
|
119
104
|
id: "".concat(props.id, "-").concat(index),
|
|
120
105
|
value: optionObject.value,
|
|
121
106
|
checked: isSelected,
|
|
122
|
-
onChange:
|
|
123
|
-
return selectElementProps.onChange(optionObject.value);
|
|
124
|
-
},
|
|
107
|
+
onChange: () => selectElementProps.onChange(optionObject.value),
|
|
125
108
|
theme: props.theme
|
|
126
109
|
}, optionObject.key);
|
|
127
110
|
});
|
|
128
111
|
};
|
|
129
|
-
|
|
130
|
-
return options.map(
|
|
131
|
-
|
|
112
|
+
const renderOptionElements = options => {
|
|
113
|
+
return options.map((option, key) => {
|
|
114
|
+
let optionObject = createOptionObject(option);
|
|
132
115
|
return _react.default.createElement("option", {
|
|
133
116
|
value: optionObject.value,
|
|
134
117
|
key: key
|
|
135
118
|
}, optionObject.key);
|
|
136
119
|
});
|
|
137
120
|
};
|
|
138
|
-
|
|
121
|
+
const renderPlaceholderOption = (placeholder, placeholderValue) => {
|
|
139
122
|
return placeholder ? _react.default.createElement("option", {
|
|
140
123
|
value: placeholderValue || "",
|
|
141
124
|
disabled: true
|
|
142
125
|
}, placeholder) : "";
|
|
143
126
|
};
|
|
144
|
-
|
|
127
|
+
const getErrorElementId = () => {
|
|
145
128
|
return "".concat(props.id, "-errorMessage");
|
|
146
129
|
};
|
|
147
130
|
if (props.contentOnly) {
|
|
148
|
-
|
|
131
|
+
const value = props.defaultValue ? props.defaultValue : props.value || null;
|
|
149
132
|
return _react.default.createElement("div", {
|
|
150
133
|
className: _SelectModule.default.select
|
|
151
134
|
}, _react.default.createElement(_Label.default, {
|
|
152
135
|
htmlFor: props.id
|
|
153
136
|
}, props.label), _react.default.createElement("span", null, value ? props.keyAsContent ? getKeyByValue(value, props.options) : value : props.defaultContent));
|
|
154
137
|
} else {
|
|
155
|
-
var _props$width, _props$errorMessage, _props$ariaDescribed,
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
138
|
+
var _props$width, _props$errorMessage, _props$ariaDescribed, _props$width2;
|
|
139
|
+
const defaultValue = !props.value && props.defaultValue ? props.defaultValue : false;
|
|
140
|
+
const styleRules = {
|
|
141
|
+
...(props.hasErrors ? getThemeErrorInputStyle(props.theme) : null),
|
|
142
|
+
...(((_props$width = props.width) === null || _props$width === void 0 ? void 0 : _props$width.length) && {
|
|
143
|
+
maxWidth: props.width
|
|
144
|
+
})
|
|
145
|
+
};
|
|
146
|
+
const className = (0, _helpers.classNameArrayToClassNameString)([props.hasErrors && _SelectModule.default.hasErrors, props.multiple && _SelectModule.default.multiple]);
|
|
147
|
+
const selectElementProps = {
|
|
162
148
|
name: props.name,
|
|
163
149
|
multiple: props.multiple,
|
|
164
150
|
required: props.required,
|
|
165
|
-
disabled: props.disabled
|
|
166
|
-
|
|
151
|
+
disabled: props.disabled,
|
|
152
|
+
[defaultValue ? "defaultValue" : "value"]: defaultValue || props.value || "",
|
|
153
|
+
onChange: props.onChange,
|
|
154
|
+
id: props.id,
|
|
155
|
+
role: props.role,
|
|
156
|
+
key: "".concat(props.id, "-").concat((0, _generators.generateRandomString)(6)),
|
|
157
|
+
className,
|
|
158
|
+
"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,
|
|
159
|
+
"aria-invalid": props.hasErrors ? "true" : null,
|
|
160
|
+
style: styleRules
|
|
161
|
+
};
|
|
167
162
|
return _react.default.createElement("div", {
|
|
168
163
|
className: _SelectModule.default.select
|
|
169
164
|
}, _react.default.createElement(_Label.default, {
|
|
@@ -174,16 +169,18 @@ var Select = function Select(props) {
|
|
|
174
169
|
className: _SelectModule.default.requiredSymbol
|
|
175
170
|
})), _react.default.createElement("div", {
|
|
176
171
|
className: _SelectModule.default.selectContainer,
|
|
177
|
-
style:
|
|
178
|
-
|
|
179
|
-
|
|
172
|
+
style: {
|
|
173
|
+
...(((_props$width2 = props.width) === null || _props$width2 === void 0 ? void 0 : _props$width2.length) && {
|
|
174
|
+
maxWidth: props.width
|
|
175
|
+
})
|
|
176
|
+
}
|
|
180
177
|
}, _react.default.createElement("span", {
|
|
181
178
|
className: _SelectModule.default.selectListArrow,
|
|
182
179
|
style: getThemeArrowStyle(props.theme)
|
|
183
180
|
}), props.multiple ? _react.default.createElement("div", {
|
|
184
181
|
ref: dropdownRef
|
|
185
182
|
}, _react.default.createElement("div", {
|
|
186
|
-
onClick:
|
|
183
|
+
onClick: () => {
|
|
187
184
|
setShowDropdownList(!showDropdownList);
|
|
188
185
|
},
|
|
189
186
|
className: _SelectModule.default.multipleSelectElement
|
|
@@ -224,7 +221,7 @@ Select.propTypes = {
|
|
|
224
221
|
theme: _propTypes.default.object
|
|
225
222
|
};
|
|
226
223
|
Select.defaultProps = {
|
|
227
|
-
onChange:
|
|
224
|
+
onChange: () => {
|
|
228
225
|
return false;
|
|
229
226
|
},
|
|
230
227
|
name: "",
|
package/dist/components/Table.js
CHANGED
|
@@ -9,17 +9,17 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
|
9
9
|
var _helpers = require("../functions/helpers");
|
|
10
10
|
var _TableModule = _interopRequireDefault(require("./Table.module.scss"));
|
|
11
11
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
12
|
+
const getCaptionAlignClass = captionAlign => {
|
|
13
|
+
const defaultValue = "left";
|
|
14
|
+
const availableValues = ["left", "center", "right"];
|
|
15
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
|
-
|
|
18
|
-
|
|
19
|
-
|
|
17
|
+
const getCaptionSideClass = captionSide => {
|
|
18
|
+
const defaultValue = "top";
|
|
19
|
+
const availableValues = ["top", "bottom"];
|
|
20
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", {
|
|
24
24
|
className: (0, _helpers.classNameArrayToClassNameString)([_TableModule.default.table, getCaptionAlignClass(props.captionAlign), getCaptionSideClass(props.captionSide)])
|
|
25
25
|
}, props.children);
|
|
@@ -13,35 +13,33 @@ var _generators = require("../functions/generators");
|
|
|
13
13
|
var _asterisk = _interopRequireDefault(require("../assets/svg/asterisk.svg?url"));
|
|
14
14
|
var _TextareaModule = _interopRequireDefault(require("./Textarea.module.scss"));
|
|
15
15
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
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; }
|
|
19
|
-
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
20
|
-
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
|
21
|
-
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
22
|
-
var Textarea = function Textarea(props) {
|
|
23
|
-
var getThemeErrorInputStyle = function getThemeErrorInputStyle(theme) {
|
|
16
|
+
const Textarea = props => {
|
|
17
|
+
const getThemeErrorInputStyle = theme => {
|
|
24
18
|
return {
|
|
25
19
|
boxShadow: "0 0 3px ".concat((0, _theme.getThemePaletteBackgroundColor)(theme, "warning")),
|
|
26
20
|
borderColor: (0, _theme.getThemePaletteBackgroundColor)(theme, "warning")
|
|
27
21
|
};
|
|
28
22
|
};
|
|
29
|
-
|
|
23
|
+
const renderValueAsText = (value, defaultContent) => {
|
|
30
24
|
return value ? value : defaultContent;
|
|
31
25
|
};
|
|
32
|
-
|
|
26
|
+
const getErrorElementId = () => {
|
|
33
27
|
return "".concat(props.id, "-errorMessage");
|
|
34
28
|
};
|
|
35
|
-
|
|
36
|
-
var _props$value, _props$defaultValue, _props$width, _props$resize, _props$errorMessage, _props$ariaDescribed
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
29
|
+
const renderInputField = () => {
|
|
30
|
+
var _props$value, _props$defaultValue, _props$width, _props$resize, _props$errorMessage, _props$ariaDescribed;
|
|
31
|
+
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;
|
|
32
|
+
const defaultKey = props.elementKey || null;
|
|
33
|
+
const styleRules = {
|
|
34
|
+
...(props.hasErrors ? getThemeErrorInputStyle(props.theme) : null),
|
|
35
|
+
...(((_props$width = props.width) === null || _props$width === void 0 ? void 0 : _props$width.length) && {
|
|
36
|
+
maxWidth: props.width
|
|
37
|
+
}),
|
|
38
|
+
...(((_props$resize = props.resize) === null || _props$resize === void 0 ? void 0 : _props$resize.length) && {
|
|
39
|
+
resize: props.resize
|
|
40
|
+
})
|
|
41
|
+
};
|
|
42
|
+
const textareaElementProps = {
|
|
45
43
|
name: props.name,
|
|
46
44
|
readOnly: props.readOnly,
|
|
47
45
|
disabled: props.disabled,
|
|
@@ -50,8 +48,15 @@ var Textarea = function Textarea(props) {
|
|
|
50
48
|
id: props.id,
|
|
51
49
|
key: defaultKey || "".concat(props.id, "-").concat((0, _generators.generateRandomString)(6)),
|
|
52
50
|
onChange: props.onChange,
|
|
53
|
-
onBlur: props.onBlur
|
|
54
|
-
|
|
51
|
+
onBlur: props.onBlur,
|
|
52
|
+
[defaultValue ? "defaultValue" : "value"]: defaultValue || props.value,
|
|
53
|
+
placeholder: props.placeholder,
|
|
54
|
+
rows: props.rows,
|
|
55
|
+
className: props.hasErrors ? _TextareaModule.default.hasErrors : "",
|
|
56
|
+
"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,
|
|
57
|
+
"aria-invalid": props.hasErrors ? "true" : null,
|
|
58
|
+
style: styleRules
|
|
59
|
+
};
|
|
55
60
|
return _react.default.createElement("textarea", textareaElementProps);
|
|
56
61
|
};
|
|
57
62
|
return _react.default.createElement("div", {
|
|
@@ -91,7 +96,7 @@ Textarea.propTypes = {
|
|
|
91
96
|
theme: _propTypes.default.object
|
|
92
97
|
};
|
|
93
98
|
Textarea.defaultProps = {
|
|
94
|
-
onChange:
|
|
99
|
+
onChange: () => {
|
|
95
100
|
return false;
|
|
96
101
|
},
|
|
97
102
|
name: "",
|
package/dist/components/Theme.js
CHANGED
|
@@ -10,28 +10,28 @@ var _theme = require("../functions/theme");
|
|
|
10
10
|
var _dibkLogoMobile = _interopRequireDefault(require("../assets/svg/dibk-logo-mobile.svg?url"));
|
|
11
11
|
var _ThemeModule = _interopRequireDefault(require("./Theme.module.scss"));
|
|
12
12
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
|
-
|
|
14
|
-
|
|
13
|
+
const Theme = props => {
|
|
14
|
+
const getThemeColorPaletteStyle = (theme, color) => {
|
|
15
15
|
return {
|
|
16
16
|
backgroundColor: (0, _theme.getThemePaletteBackgroundColor)(theme, color),
|
|
17
17
|
color: (0, _theme.getThemePaletteTextColor)(theme, color)
|
|
18
18
|
};
|
|
19
19
|
};
|
|
20
|
-
|
|
20
|
+
const getThemeTextStyle = theme => {
|
|
21
21
|
return {
|
|
22
22
|
color: (0, _theme.getThemeTextColor)(theme)
|
|
23
23
|
};
|
|
24
24
|
};
|
|
25
|
-
|
|
25
|
+
const getThemeLinkStyle = theme => {
|
|
26
26
|
return {
|
|
27
27
|
color: (0, _theme.getThemeLinkColor)(theme)
|
|
28
28
|
};
|
|
29
29
|
};
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
return colors.map(
|
|
33
|
-
|
|
34
|
-
|
|
30
|
+
const renderColors = theme => {
|
|
31
|
+
const colors = ["default", "primary", "success", "warning", "info", "lightCyan", "orange", "lightOrange", "lime", "lightLime"];
|
|
32
|
+
return colors.map(color => {
|
|
33
|
+
const colorClassName = _ThemeModule.default[color];
|
|
34
|
+
const colorPaletteStyle = props.theme ? getThemeColorPaletteStyle(props.theme, color) : null;
|
|
35
35
|
return _react.default.createElement("div", {
|
|
36
36
|
key: color,
|
|
37
37
|
className: "".concat(_ThemeModule.default.color, " ").concat(colorClassName),
|
|
@@ -39,10 +39,10 @@ var Theme = function Theme(props) {
|
|
|
39
39
|
}, color);
|
|
40
40
|
});
|
|
41
41
|
};
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
42
|
+
const renderLogo = logoLink => {
|
|
43
|
+
const themeLogo = (0, _theme.getThemeLogo)(props.theme);
|
|
44
|
+
const themeAppName = (0, _theme.getThemeAppName)(props.theme);
|
|
45
|
+
const logoElement = themeLogo && themeAppName ? _react.default.createElement("img", {
|
|
46
46
|
alt: "".concat(themeAppName, " logo"),
|
|
47
47
|
src: themeLogo
|
|
48
48
|
}) : _react.default.createElement("img", {
|
|
@@ -53,8 +53,8 @@ var Theme = function Theme(props) {
|
|
|
53
53
|
href: logoLink
|
|
54
54
|
}, logoElement) : logoElement;
|
|
55
55
|
};
|
|
56
|
-
|
|
57
|
-
|
|
56
|
+
const themeTextStyle = props.theme ? getThemeTextStyle(props.theme) : null;
|
|
57
|
+
const themeLinkStyle = props.theme ? getThemeLinkStyle(props.theme) : null;
|
|
58
58
|
return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("div", {
|
|
59
59
|
className: _ThemeModule.default.colorPalette
|
|
60
60
|
}, renderColors(props.theme)), _react.default.createElement("p", {
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
4
3
|
Object.defineProperty(exports, "__esModule", {
|
|
5
4
|
value: true
|
|
6
5
|
});
|
|
@@ -11,28 +10,30 @@ var _reactRouterDom = require("react-router-dom");
|
|
|
11
10
|
var _helpers = require("../../functions/helpers");
|
|
12
11
|
var _StepModule = _interopRequireDefault(require("./Step.module.scss"));
|
|
13
12
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
14
|
-
function _getRequireWildcardCache(
|
|
15
|
-
function _interopRequireWildcard(
|
|
16
|
-
|
|
17
|
-
|
|
13
|
+
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); }
|
|
14
|
+
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 && Object.prototype.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; }
|
|
15
|
+
const Step = props => {
|
|
16
|
+
const getActiveClass = step => {
|
|
18
17
|
return props.activeStepId === step.id ? _StepModule.default.active : "";
|
|
19
18
|
};
|
|
20
|
-
|
|
19
|
+
const getFinishedClass = step => {
|
|
21
20
|
return step.finished ? _StepModule.default.finished : "";
|
|
22
21
|
};
|
|
23
|
-
|
|
22
|
+
const getErrorClass = step => {
|
|
24
23
|
return step.hasErrors ? _StepModule.default.hasErrors : "";
|
|
25
24
|
};
|
|
26
|
-
|
|
25
|
+
const renderStepContent = (step, index) => {
|
|
27
26
|
return _react.default.createElement(_react.Fragment, null, _react.default.createElement("span", {
|
|
28
27
|
className: _StepModule.default.stepNumber
|
|
29
28
|
}, index + 1), _react.default.createElement("span", {
|
|
30
29
|
className: _StepModule.default.stepName
|
|
31
30
|
}, step.name));
|
|
32
31
|
};
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
32
|
+
const {
|
|
33
|
+
step,
|
|
34
|
+
index,
|
|
35
|
+
activeStepId
|
|
36
|
+
} = props;
|
|
36
37
|
return _react.default.createElement("li", {
|
|
37
38
|
className: (0, _helpers.classNameArrayToClassNameString)([_StepModule.default.wizardTopnavItem, getActiveClass(step), getFinishedClass(step), getErrorClass(step)])
|
|
38
39
|
}, step.link && Object.keys(step.link).length ? _react.default.createElement(_reactRouterDom.Link, {
|
|
@@ -9,12 +9,12 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
|
9
9
|
var _Step = _interopRequireDefault(require("./WizardNavigation/Step"));
|
|
10
10
|
var _WizardNavigationModule = _interopRequireDefault(require("./WizardNavigation.module.scss"));
|
|
11
11
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
12
|
-
|
|
12
|
+
const WizardNavigation = props => {
|
|
13
13
|
var _Object$keys, _props$ariaLabel;
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
return hasSteps ? Object.keys(steps).map(
|
|
17
|
-
|
|
14
|
+
const renderSteps = (steps, activeStepId) => {
|
|
15
|
+
const hasSteps = steps && Object.keys(steps).length;
|
|
16
|
+
return hasSteps ? Object.keys(steps).map((stepKey, stepIndex) => {
|
|
17
|
+
const step = steps[stepKey];
|
|
18
18
|
return _react.default.createElement(_Step.default, {
|
|
19
19
|
step: step,
|
|
20
20
|
activeStepId: activeStepId,
|
|
@@ -23,9 +23,9 @@ var WizardNavigation = function WizardNavigation(props) {
|
|
|
23
23
|
});
|
|
24
24
|
}) : null;
|
|
25
25
|
};
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
26
|
+
const amountOfSteps = props.steps && (_Object$keys = Object.keys(props.steps)) !== null && _Object$keys !== void 0 && _Object$keys.length ? Object.keys(props.steps).length : 0;
|
|
27
|
+
const defaultAriaLabel = "I dette skjemaet er det totalt ".concat(amountOfSteps, " steg som du skal g\xE5 igjennom");
|
|
28
|
+
const ariaLabel = (_props$ariaLabel = props["aria-label"]) !== null && _props$ariaLabel !== void 0 && _props$ariaLabel.length ? props["aria-label"] : defaultAriaLabel;
|
|
29
29
|
return _react.default.createElement("nav", {
|
|
30
30
|
"aria-label": ariaLabel
|
|
31
31
|
}, _react.default.createElement("ol", {
|
|
@@ -4,12 +4,13 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.generateRandomString = void 0;
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
for (
|
|
7
|
+
const generateRandomString = length => {
|
|
8
|
+
let result = '';
|
|
9
|
+
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
|
|
10
|
+
const charactersLength = characters.length;
|
|
11
|
+
for (let i = 0; i < length; i++) {
|
|
12
12
|
result += characters.charAt(Math.floor(Math.random() * charactersLength));
|
|
13
13
|
}
|
|
14
14
|
return result;
|
|
15
|
-
};
|
|
15
|
+
};
|
|
16
|
+
exports.generateRandomString = generateRandomString;
|
|
@@ -5,61 +5,60 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.setFocusToElement = exports.getFocusableElementsInsideElement = exports.cloneThroughFragments = exports.classNameArrayToClassNameString = exports.addFocusTrapInsideElement = void 0;
|
|
7
7
|
var _react = require("react");
|
|
8
|
-
|
|
9
|
-
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; }
|
|
10
|
-
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; }
|
|
11
|
-
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
12
|
-
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
|
13
|
-
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
14
|
-
var classNameArrayToClassNameString = exports.classNameArrayToClassNameString = function classNameArrayToClassNameString(classNameArray) {
|
|
8
|
+
const classNameArrayToClassNameString = classNameArray => {
|
|
15
9
|
var _classNameArray$filte;
|
|
16
|
-
return (classNameArray === null || classNameArray === void 0 || (_classNameArray$filte = classNameArray.filter(
|
|
17
|
-
return className;
|
|
18
|
-
})) === null || _classNameArray$filte === void 0 ? void 0 : _classNameArray$filte.join(" ")) || "";
|
|
10
|
+
return (classNameArray === null || classNameArray === void 0 || (_classNameArray$filte = classNameArray.filter(className => className)) === null || _classNameArray$filte === void 0 ? void 0 : _classNameArray$filte.join(" ")) || "";
|
|
19
11
|
};
|
|
20
|
-
|
|
21
|
-
|
|
12
|
+
exports.classNameArrayToClassNameString = classNameArrayToClassNameString;
|
|
13
|
+
const cloneThroughFragments = children => {
|
|
14
|
+
return _react.Children.map(children, c => {
|
|
22
15
|
if ((0, _react.isValidElement)(c)) {
|
|
23
16
|
if (c.type === _react.Fragment) {
|
|
24
17
|
return cloneThroughFragments(c.props.children);
|
|
25
18
|
}
|
|
26
|
-
return (0, _react.cloneElement)(c,
|
|
19
|
+
return (0, _react.cloneElement)(c, {
|
|
20
|
+
...c.props
|
|
21
|
+
});
|
|
27
22
|
}
|
|
28
23
|
return c;
|
|
29
24
|
});
|
|
30
25
|
};
|
|
31
|
-
|
|
32
|
-
|
|
26
|
+
exports.cloneThroughFragments = cloneThroughFragments;
|
|
27
|
+
const setFocusToElement = element => {
|
|
28
|
+
const autoFocusElement = document.createElement("button");
|
|
33
29
|
element.prepend(autoFocusElement);
|
|
34
30
|
autoFocusElement.focus();
|
|
35
31
|
autoFocusElement.remove();
|
|
36
32
|
};
|
|
37
|
-
|
|
38
|
-
|
|
33
|
+
exports.setFocusToElement = setFocusToElement;
|
|
34
|
+
const getFocusableElementsInsideElement = element => {
|
|
35
|
+
return Array.from(element.querySelectorAll('button, [href], input, [tabindex="0"]')).filter(resultElement => {
|
|
39
36
|
return resultElement;
|
|
40
37
|
});
|
|
41
38
|
};
|
|
42
|
-
|
|
39
|
+
exports.getFocusableElementsInsideElement = getFocusableElementsInsideElement;
|
|
40
|
+
const addFocusTrapInsideElement = element => {
|
|
43
41
|
setFocusToElement(element);
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
42
|
+
const focusableElements = getFocusableElementsInsideElement(element);
|
|
43
|
+
const firstFocusableElement = focusableElements !== null && focusableElements !== void 0 && focusableElements.length ? focusableElements[0] : null;
|
|
44
|
+
const lastFocusableElement = (focusableElements === null || focusableElements === void 0 ? void 0 : focusableElements.length) > 1 ? focusableElements[focusableElements.length - 1] : firstFocusableElement;
|
|
47
45
|
if (firstFocusableElement) {
|
|
48
|
-
firstFocusableElement.onkeydown =
|
|
46
|
+
firstFocusableElement.onkeydown = event => {
|
|
49
47
|
if (event.keyCode === 9 && event.shiftKey) {
|
|
50
48
|
lastFocusableElement.focus();
|
|
51
49
|
}
|
|
52
50
|
};
|
|
53
51
|
}
|
|
54
52
|
if (lastFocusableElement) {
|
|
55
|
-
lastFocusableElement.onclick =
|
|
53
|
+
lastFocusableElement.onclick = () => {
|
|
56
54
|
firstFocusableElement.focus();
|
|
57
55
|
};
|
|
58
|
-
lastFocusableElement.onkeydown =
|
|
56
|
+
lastFocusableElement.onkeydown = event => {
|
|
59
57
|
if (event.keyCode === 9 && !event.shiftKey) {
|
|
60
58
|
event.preventDefault();
|
|
61
59
|
firstFocusableElement.focus();
|
|
62
60
|
}
|
|
63
61
|
};
|
|
64
62
|
}
|
|
65
|
-
};
|
|
63
|
+
};
|
|
64
|
+
exports.addFocusTrapInsideElement = addFocusTrapInsideElement;
|