dibk-design 0.4.5 → 0.4.6
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.
|
@@ -33,6 +33,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
|
33
33
|
|
|
34
34
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
35
35
|
|
|
36
|
+
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
37
|
+
|
|
36
38
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
37
39
|
|
|
38
40
|
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
|
|
@@ -98,41 +100,48 @@ var InputField = /*#__PURE__*/function (_React$Component) {
|
|
|
98
100
|
value: function renderInputField() {
|
|
99
101
|
var _this = this;
|
|
100
102
|
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
103
|
+
if (this.props.type === 'date') {
|
|
104
|
+
var value = this.props.defaultValue ? this.props.defaultValue : this.props.value || null;
|
|
105
|
+
var props = {
|
|
106
|
+
name: this.props.name,
|
|
107
|
+
readOnly: this.props.readOnly,
|
|
108
|
+
disabled: this.props.disabled,
|
|
109
|
+
id: this.props.id,
|
|
110
|
+
dateFormat: this.props.dateFormat,
|
|
111
|
+
locale: 'nb',
|
|
112
|
+
selectsStart: this.props.selectsStart,
|
|
113
|
+
selectsEnd: this.props.selectsEnd,
|
|
114
|
+
startDate: this.props.startDate ? new Date(this.props.startDate) : null,
|
|
115
|
+
endDate: this.props.endDate ? new Date(this.props.endDate) : null,
|
|
116
|
+
onChange: this.props.onChange ? function (date) {
|
|
117
|
+
return _this.props.onChange(date);
|
|
118
|
+
} : console.log("Missing onChange handler for date picker with id: ".concat(this.props.id)),
|
|
119
|
+
onBlur: this.props.onBlur ? function (date) {
|
|
120
|
+
return _this.props.onBlur(date);
|
|
121
|
+
} : null,
|
|
122
|
+
selected: value ? new Date(value) : null,
|
|
123
|
+
placeholderText: this.props.placeholder,
|
|
124
|
+
className: this.props.hasErrors ? _InputFieldModule.default.hasErrors : '',
|
|
125
|
+
style: this.props.hasErrors ? this.getThemeErrorInputStyle(this.props.theme) : null
|
|
126
|
+
};
|
|
127
|
+
return /*#__PURE__*/_react.default.createElement(_reactDatepicker.default, props);
|
|
128
|
+
} else {
|
|
129
|
+
var _props2;
|
|
130
|
+
|
|
131
|
+
var defaultValue = !this.props.value && this.props.defaultValue ? this.props.defaultValue : false;
|
|
132
|
+
|
|
133
|
+
var _props = (_props2 = {
|
|
134
|
+
name: this.props.name,
|
|
135
|
+
readOnly: this.props.readOnly,
|
|
136
|
+
disabled: this.props.disabled,
|
|
137
|
+
type: this.props.type,
|
|
138
|
+
id: this.props.id,
|
|
139
|
+
onChange: this.props.onChange,
|
|
140
|
+
onBlur: this.props.onBlur
|
|
141
|
+
}, _defineProperty(_props2, defaultValue ? 'defaultValue' : 'value', defaultValue || this.props.value), _defineProperty(_props2, "placeholder", this.props.placeholder), _defineProperty(_props2, "className", this.props.hasErrors ? _InputFieldModule.default.hasErrors : ''), _defineProperty(_props2, 'aria-required', this.props.mandatory), _defineProperty(_props2, "style", this.props.hasErrors ? this.getThemeErrorInputStyle(this.props.theme) : null), _props2);
|
|
142
|
+
|
|
143
|
+
return /*#__PURE__*/_react.default.createElement("input", _props);
|
|
144
|
+
}
|
|
136
145
|
}
|
|
137
146
|
}, {
|
|
138
147
|
key: "render",
|
|
@@ -172,6 +181,7 @@ InputField.propTypes = {
|
|
|
172
181
|
name: _propTypes.default.string,
|
|
173
182
|
type: _propTypes.default.string,
|
|
174
183
|
value: _propTypes.default.any,
|
|
184
|
+
defaultValue: _propTypes.default.any,
|
|
175
185
|
label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]))]),
|
|
176
186
|
contentOnly: _propTypes.default.bool,
|
|
177
187
|
buttonColor: _propTypes.default.string,
|
|
@@ -3,15 +3,16 @@ Input field example:
|
|
|
3
3
|
```js
|
|
4
4
|
<InputField id="textInput1" onChange={()=>{console.log('onchange')}} mandatory={true} />
|
|
5
5
|
<InputField id="textInput2" onChange={()=>{console.log('onchange')}} value="InputField with value" />
|
|
6
|
-
<InputField id="textInput3" onChange={()=>{console.log('onchange')}}
|
|
7
|
-
<InputField id="textInput4" onChange={()=>{console.log('onchange')}} value="InputField with
|
|
8
|
-
<InputField id="textInput5" onChange={()=>{console.log('onchange')}} value="InputField with
|
|
6
|
+
<InputField id="textInput3" onChange={()=>{console.log('onchange')}} defaultValue="InputField with defaultValue" />
|
|
7
|
+
<InputField id="textInput4" onChange={()=>{console.log('onchange')}} value="InputField with label and value" label="InputField with label and value" />
|
|
8
|
+
<InputField id="textInput5" onChange={()=>{console.log('onchange')}} value="InputField with link in label" label={['InputField with ', <a key="labelLink" href="#">link</a>, ' in label']} />
|
|
9
|
+
<InputField id="textInput6" onChange={()=>{console.log('onchange')}} value="InputField with label, value, errors and error message" label="InputField with label, value, errors and error message" hasErrors={true} errorMessage="Wrong value" />
|
|
9
10
|
|
|
10
|
-
<InputField id="
|
|
11
|
-
<InputField id="
|
|
11
|
+
<InputField id="textInput7" onChange={()=>{console.log('onchange')}} readOnly value="Read only InputField with label and value" label="Read only InputField with label and value" />
|
|
12
|
+
<InputField id="textInput8" onChange={()=>{console.log('onchange')}} disabled value="Disabled InputField with label and value" label="Disabled InputField with label and value" />
|
|
12
13
|
<InputField id="numberInput1" onChange={()=>{console.log('onchange')}} value="3" label="Number InputField with label and value" type="number" />
|
|
13
|
-
<InputField id="
|
|
14
|
-
<InputField id="
|
|
14
|
+
<InputField id="textInput9" onChange={()=>{console.log('onchange')}} value="Value for inputField" label="InputField with label, value and contentOnly set to true" contentOnly={true} />
|
|
15
|
+
<InputField id="textInput10" onChange={() => {console.log('onChange')}} label="InputField without value, contentOnly set to true and defaultContent" contentOnly={true} defaultContent="Please insert a value" />
|
|
15
16
|
<InputField id="fileInput1" onChange={()=>{console.log('onchange')}} type="file" label="InputField with label, value and type set to file" />
|
|
16
17
|
<InputField id="fileInput1" onChange={()=>{console.log('onchange')}} type="file" label="InputField with label, value, fileName, buttonContent and type set to file" selectedFileName="file.txt" buttonContent="Legg til fil" />
|
|
17
18
|
<InputField id="dateInput1" onChange={(date) => console.log("date", date)} type="date" label="Datepicker without value" value="" />
|
|
@@ -17,6 +17,8 @@ var _SelectModule = _interopRequireDefault(require("./Select.module.scss"));
|
|
|
17
17
|
|
|
18
18
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
19
19
|
|
|
20
|
+
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
21
|
+
|
|
20
22
|
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
|
|
21
23
|
|
|
22
24
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
@@ -126,28 +128,35 @@ var Select = /*#__PURE__*/function (_React$Component) {
|
|
|
126
128
|
}, {
|
|
127
129
|
key: "render",
|
|
128
130
|
value: function render() {
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
131
|
+
if (this.props.contentOnly) {
|
|
132
|
+
var value = this.props.defaultValue ? this.props.defaultValue : this.props.value || null;
|
|
133
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
134
|
+
className: _SelectModule.default.select
|
|
135
|
+
}, /*#__PURE__*/_react.default.createElement(_Label.default, {
|
|
136
|
+
htmlFor: this.props.id
|
|
137
|
+
}, this.props.label), /*#__PURE__*/_react.default.createElement("span", null, value ? this.props.keyAsContent ? this.getKeyByValue(value, this.props.options) : value : this.props.defaultContent));
|
|
138
|
+
} else {
|
|
139
|
+
var _props;
|
|
140
|
+
|
|
141
|
+
var defaultValue = !this.props.value && this.props.defaultValue ? this.props.defaultValue : false;
|
|
142
|
+
var props = (_props = {
|
|
143
|
+
name: this.props.name,
|
|
144
|
+
multiple: this.props.multiple
|
|
145
|
+
}, _defineProperty(_props, defaultValue ? 'defaultValue' : 'value', defaultValue || this.props.value), _defineProperty(_props, "onChange", this.props.onChange), _defineProperty(_props, "id", this.props.id), _defineProperty(_props, "className", this.props.hasErrors ? _SelectModule.default.hasErrors : ''), _defineProperty(_props, "style", this.props.hasErrors ? this.getThemeErrorInputStyle(this.props.theme) : null), _props);
|
|
146
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
147
|
+
className: _SelectModule.default.select
|
|
148
|
+
}, /*#__PURE__*/_react.default.createElement(_Label.default, {
|
|
149
|
+
htmlFor: this.props.id
|
|
150
|
+
}, this.props.label), /*#__PURE__*/_react.default.createElement("div", {
|
|
151
|
+
className: _SelectModule.default.selectContainer
|
|
152
|
+
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
153
|
+
className: _SelectModule.default.selectListArrow,
|
|
154
|
+
style: this.getThemeArrowStyle(this.props.theme)
|
|
155
|
+
}), /*#__PURE__*/_react.default.createElement("select", props, this.renderPlaceholderOption(this.props.placeholder, this.props.placeholderValue), this.renderOptionElements(this.props.options))), /*#__PURE__*/_react.default.createElement("span", {
|
|
156
|
+
className: _SelectModule.default.errorMessage,
|
|
157
|
+
style: this.getThemeErrorMessageStyle(this.props.theme)
|
|
158
|
+
}, this.props.errorMessage ? this.props.errorMessage : ''));
|
|
159
|
+
}
|
|
151
160
|
}
|
|
152
161
|
}]);
|
|
153
162
|
|
|
@@ -164,6 +173,7 @@ Select.propTypes = {
|
|
|
164
173
|
value: _propTypes.default.string
|
|
165
174
|
})])),
|
|
166
175
|
value: _propTypes.default.any,
|
|
176
|
+
defaultValue: _propTypes.default.any,
|
|
167
177
|
label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]))]),
|
|
168
178
|
contentOnly: _propTypes.default.bool,
|
|
169
179
|
keyAsContent: _propTypes.default.bool,
|
|
@@ -4,14 +4,15 @@ Select example:
|
|
|
4
4
|
<Select id="select1" onChange={()=>{console.log('onchange')}} options={['option 1', 'option 2', {key: 'option 3', value: 'value 3'}]} />
|
|
5
5
|
<Select id="select2" onChange={()=>{console.log('onchange')}} label="Select with label" options={['option 1', 'option 2', {key: 'option 3', value: 'value 3'}]} />
|
|
6
6
|
<Select id="select3" onChange={()=>{console.log('onchange')}} label="Select with label and selected value" value="value 3" options={['option 1', 'option 2', {key: 'option 3', value: 'value 3'}]} />
|
|
7
|
-
<Select id="select4" onChange={()=>{console.log('onchange')}} label="Select with label
|
|
8
|
-
<Select id="select5" onChange={()=>{console.log('onchange')}} label=
|
|
9
|
-
<Select id="select6" onChange={()=>{console.log('onchange')}} label=
|
|
10
|
-
<Select id="select7" onChange={()=>{console.log('onchange')}} label="Select with label
|
|
11
|
-
<Select id="select8" onChange={()=>{console.log('onchange')}} label="Select with label,
|
|
12
|
-
<Select id="select9" onChange={()=>{console.log('onchange')}} label="Select with label, selected value
|
|
13
|
-
<Select id="select10" onChange={()=>{console.log('onchange')}} label="Select with label, selected value
|
|
14
|
-
<Select id="select11" onChange={()=>{console.log('onchange')}} label="Select with label, contentOnly set to true
|
|
7
|
+
<Select id="select4" onChange={()=>{console.log('onchange')}} label="Select with label and defaultValue" defaultValue="value 3" options={['option 1', 'option 2', {key: 'option 3', value: 'value 3'}]} />
|
|
8
|
+
<Select id="select5" onChange={()=>{console.log('onchange')}} label="Select with label, selected value, errors and error message" value="value 3" options={['option 1', 'option 2', {key: 'option 3', value: 'value 3'}]} hasErrors={true} errorMessage="Wrong value selected" />
|
|
9
|
+
<Select id="select6" onChange={()=>{console.log('onchange')}} label={['Select with ', <a key="labelLink" href="#">link</a>, ' in label']} value="value 3" options={['option 1', 'option 2', {key: 'option 3', value: 'value 3'}]} />
|
|
10
|
+
<Select id="select7" onChange={()=>{console.log('onchange')}} label="Select with label and placeholder" placeholder="Select from list" options={['option 1', 'option 2', {key: 'option 3', value: 'value 3'}]} />
|
|
11
|
+
<Select id="select8" onChange={()=>{console.log('onchange')}} label="Select with label, placeholder and placeholderValue" placeholder="Select from list" placeholderValue="notSelected" value="notSelected" options={['option 1', 'option 2', {key: 'option 3', value: 'value 3'}]} />
|
|
12
|
+
<Select id="select9" onChange={()=>{console.log('onchange')}} label="Select with label, selected value and contentOnly set to true" value="value 3" options={['option 1', 'option 2', {key: 'option 3', value: 'value 3'}]} contentOnly={true} />
|
|
13
|
+
<Select id="select10" onChange={()=>{console.log('onchange')}} label="Select with label, selected value, contentOnly set to true and keyAsContent set to true" value="value 3" options={['option 1', 'option 2', {key: 'option 3', value: 'value 3'}]} contentOnly={true} keyAsContent={true} />
|
|
14
|
+
<Select id="select11" onChange={()=>{console.log('onchange')}} label="Select with label, selected value is string, contentOnly set to true and keyAsContent set to true" value="option 2" options={['option 1', 'option 2', {key: 'option 3', value: 'value 3'}]} contentOnly={true} keyAsContent={true} />
|
|
15
|
+
<Select id="select12" onChange={()=>{console.log('onchange')}} label="Select with label, contentOnly set to true, no value and defaultContent" contentOnly={true} defaultContent="No value selected" options={['option 1', 'option 2', {key: 'option 3', value: 'value 3'}]} />
|
|
15
16
|
```
|
|
16
17
|
|
|
17
18
|
Themed select example:
|
|
@@ -19,6 +19,8 @@ var _TextareaModule = _interopRequireDefault(require("./Textarea.module.scss"));
|
|
|
19
19
|
|
|
20
20
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
21
21
|
|
|
22
|
+
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
23
|
+
|
|
22
24
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
23
25
|
|
|
24
26
|
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
|
|
@@ -73,21 +75,19 @@ var Textarea = /*#__PURE__*/function (_React$Component) {
|
|
|
73
75
|
}, {
|
|
74
76
|
key: "renderInputField",
|
|
75
77
|
value: function renderInputField() {
|
|
76
|
-
|
|
78
|
+
var _props;
|
|
79
|
+
|
|
80
|
+
var defaultValue = !this.props.value && this.props.defaultValue ? this.props.defaultValue : false;
|
|
81
|
+
var props = (_props = {
|
|
77
82
|
name: this.props.name,
|
|
78
83
|
readOnly: this.props.readOnly,
|
|
79
84
|
disabled: this.props.disabled,
|
|
80
85
|
type: this.props.type,
|
|
81
86
|
id: this.props.id,
|
|
82
87
|
onChange: this.props.onChange,
|
|
83
|
-
onBlur: this.props.onBlur
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
rows: this.props.rows,
|
|
87
|
-
className: this.props.hasErrors ? _TextareaModule.default.hasErrors : '',
|
|
88
|
-
"aria-required": this.props.mandatory,
|
|
89
|
-
style: this.props.hasErrors ? this.getThemeErrorInputStyle(this.props.theme) : null
|
|
90
|
-
});
|
|
88
|
+
onBlur: this.props.onBlur
|
|
89
|
+
}, _defineProperty(_props, defaultValue ? 'defaultValue' : 'value', defaultValue || this.props.value), _defineProperty(_props, "placeholder", this.props.placeholder), _defineProperty(_props, "rows", this.props.rows), _defineProperty(_props, "className", this.props.hasErrors ? _TextareaModule.default.hasErrors : ''), _defineProperty(_props, 'aria-required', this.props.mandatory), _defineProperty(_props, "style", this.props.hasErrors ? this.getThemeErrorInputStyle(this.props.theme) : null), _props);
|
|
90
|
+
return /*#__PURE__*/_react.default.createElement("textarea", props);
|
|
91
91
|
}
|
|
92
92
|
}, {
|
|
93
93
|
key: "render",
|
|
@@ -114,6 +114,7 @@ Textarea.propTypes = {
|
|
|
114
114
|
name: _propTypes.default.string,
|
|
115
115
|
type: _propTypes.default.string,
|
|
116
116
|
value: _propTypes.default.string,
|
|
117
|
+
defaultValue: _propTypes.default.string,
|
|
117
118
|
rows: _propTypes.default.string,
|
|
118
119
|
label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]))]),
|
|
119
120
|
contentOnly: _propTypes.default.bool,
|
|
@@ -3,13 +3,14 @@ Input field example:
|
|
|
3
3
|
```js
|
|
4
4
|
<Textarea id="textInput1" onChange={()=>{console.log('onchange')}} mandatory={true} />
|
|
5
5
|
<Textarea id="textInput2" onChange={()=>{console.log('onchange')}} value="Textarea with value" />
|
|
6
|
-
<Textarea id="textInput3" onChange={()=>{console.log('onchange')}}
|
|
7
|
-
<Textarea id="textInput4" onChange={()=>{console.log('onchange')}} value="Textarea with
|
|
8
|
-
<Textarea id="textInput5" onChange={()=>{console.log('onchange')}} value="Textarea with
|
|
9
|
-
<Textarea id="textInput6" onChange={()=>{console.log('onchange')}}
|
|
10
|
-
<Textarea id="textInput7" onChange={()=>{console.log('onchange')}}
|
|
11
|
-
<Textarea id="
|
|
12
|
-
<Textarea id="
|
|
6
|
+
<Textarea id="textInput3" onChange={()=>{console.log('onchange')}} defaultValue="Textarea with defaultValue" />
|
|
7
|
+
<Textarea id="textInput4" onChange={()=>{console.log('onchange')}} value="Textarea with label and value" label="Textarea with label and value" />
|
|
8
|
+
<Textarea id="textInput5" onChange={()=>{console.log('onchange')}} value="Textarea with link in label" label={['Textarea with ', <a key="labelLink" href="#">link</a>, ' in label']} />
|
|
9
|
+
<Textarea id="textInput6" onChange={()=>{console.log('onchange')}} value="Textarea with label, value, errors and error message" label="Textarea with label, value, errors and error message" hasErrors={true} errorMessage="Wrong value" />
|
|
10
|
+
<Textarea id="textInput7" onChange={()=>{console.log('onchange')}} readOnly value="Read only Textarea with label and value" label="Read only Textarea with label and value" />
|
|
11
|
+
<Textarea id="textInput8" onChange={()=>{console.log('onchange')}} disabled value="Disabled Textarea with label and value" label="Disabled Textarea with label and value" />
|
|
12
|
+
<Textarea id="textInput9" onChange={()=>{console.log('onchange')}} value="Value for Textarea" label="Textarea with label, value and contentOnly set to true" contentOnly={true} />
|
|
13
|
+
<Textarea id="textInput10" onChange={() => {console.log('onChange')}} label="Textarea without value, contentOnly set to true and defaultContent" contentOnly={true} defaultContent="Please insert a value" />
|
|
13
14
|
```
|
|
14
15
|
|
|
15
16
|
Themed Input field example:
|