@bento-core/facet-filter 1.0.1-ccdihub.1 → 1.0.1-ccdihub.11

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 (19) hide show
  1. package/dist/FacetFilterController.js +1 -0
  2. package/dist/components/facet/FacetStyle.js +1 -1
  3. package/dist/components/facet/FacetView.js +1 -1
  4. package/dist/components/inputs/FilterItemStyle.js +1 -1
  5. package/dist/components/inputs/checkbox/CheckboxStyle.js +4 -3
  6. package/dist/components/inputs/checkbox/CheckboxView.js +16 -6
  7. package/dist/components/inputs/checkbox/assets/checkedbox.svg +4 -0
  8. package/dist/components/inputs/checkbox/assets/emptycheckbox.svg +5 -0
  9. package/dist/components/inputs/slider/SliderView.js +138 -2
  10. package/package.json +1 -1
  11. package/src/FacetFilterController.js +1 -0
  12. package/src/components/facet/FacetStyle.js +1 -1
  13. package/src/components/facet/FacetView.js +1 -1
  14. package/src/components/inputs/FilterItemStyle.js +1 -1
  15. package/src/components/inputs/checkbox/CheckboxStyle.js +4 -3
  16. package/src/components/inputs/checkbox/CheckboxView.js +24 -4
  17. package/src/components/inputs/checkbox/assets/checkedbox.svg +4 -0
  18. package/src/components/inputs/checkbox/assets/emptycheckbox.svg +5 -0
  19. package/src/components/inputs/slider/SliderView.js +180 -4
package/dist/FacetFilterController.js CHANGED
@@ -128,6 +128,7 @@ const FacetFilterController = props => {
128
128
  updateFacet.minLowerBound = lowerBound;
129
129
  updateFacet.maxUpperBound = upperBound;
130
130
  updateFacet.facetValues = [lowerBound, upperBound];
131
+ updateFacet.style = facet.style;
131
132
  }
132
133
  }
133
134
  updateFacets.push(updateFacet);
package/dist/components/facet/FacetStyle.js CHANGED
@@ -41,7 +41,7 @@ var _default = () => ({
41
41
  fontFamily: 'Nunito',
42
42
  fontSize: '10px',
43
43
  marginRight: '12px',
44
- marginLeft: '16px'
44
+ marginLeft: '24px'
45
45
  },
46
46
  sortGroupItem: {
47
47
  cursor: 'pointer',
package/dist/components/facet/FacetView.js CHANGED
@@ -82,7 +82,7 @@ const FacetView = _ref => {
82
82
  className: (0, _clsx.default)(classes.subSectionSummaryText, {
83
83
  ["activeFacet".concat(facet.section)]: isActiveFacet
84
84
  })
85
- }, facet.label)), (facet.type === _Types.InputTypes.SLIDER || facetValues.length === 0) && /*#__PURE__*/_react.default.createElement("div", {
85
+ }, facet.label)), facetValues.length === 0 && /*#__PURE__*/_react.default.createElement("div", {
86
86
  className: classes.NonSortGroup
87
87
  }, /*#__PURE__*/_react.default.createElement("span", {
88
88
  className: classes.NonSortGroupItem
package/dist/components/inputs/FilterItemStyle.js CHANGED
@@ -17,7 +17,7 @@ var _default = () => ({
17
17
  fontFamily: 'Nunito',
18
18
  fontSize: '10px',
19
19
  marginRight: '12px',
20
- marginLeft: '16px'
20
+ marginLeft: '24px'
21
21
  },
22
22
  sortGroupItem: {
23
23
  cursor: 'pointer',
package/dist/components/inputs/checkbox/CheckboxStyle.js CHANGED
@@ -6,10 +6,10 @@ Object.defineProperty(exports, "__esModule", {
6
6
  exports.default = void 0;
7
7
  var _default = () => ({
8
8
  listItemGutters: {
9
- padding: '10px 20px 10px 0px'
9
+ padding: '10px 10px 10px 0px'
10
10
  },
11
11
  checkboxRoot: {
12
- marginLeft: '5px',
12
+ marginLeft: '8px',
13
13
  height: 12
14
14
  },
15
15
  panelDetailText: {
@@ -30,7 +30,8 @@ var _default = () => ({
30
30
  checkboxName: {
31
31
  margin: '0',
32
32
  color: '#000000',
33
- fontSize: '14px',
33
+ fontSize: '16px',
34
+ fontWeight: 300,
34
35
  marginTop: '1.5px',
35
36
  fontFamily: 'Nunito',
36
37
  lineHeight: '120%'
package/dist/components/inputs/checkbox/CheckboxView.js CHANGED
@@ -9,6 +9,8 @@ var _styles = require("@material-ui/core/styles");
9
9
  var _core = require("@material-ui/core");
10
10
  var _clsx = _interopRequireDefault(require("clsx"));
11
11
  var _icons = require("@material-ui/icons");
12
+ var _emptycheckbox = _interopRequireDefault(require("./assets/emptycheckbox.svg"));
13
+ var _checkedbox = _interopRequireDefault(require("./assets/checkedbox.svg"));
12
14
  var _CheckboxStyle = _interopRequireDefault(require("./CheckboxStyle"));
13
15
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
14
16
  /* eslint-disable no-unused-vars */
@@ -71,19 +73,27 @@ const CheckBoxView = _ref => {
71
73
  })
72
74
  }, /*#__PURE__*/_react.default.createElement(_core.Checkbox, {
73
75
  id: "checkbox_".concat(facet.label, "_").concat(name),
74
- icon: /*#__PURE__*/_react.default.createElement(_icons.CheckBoxOutlineBlank, {
76
+ icon: /*#__PURE__*/_react.default.createElement(_core.Icon, {
75
77
  style: {
76
- fontSize: 18
78
+ fontSize: '18px',
79
+ lineHeight: '22px'
77
80
  }
78
- }),
81
+ }, /*#__PURE__*/_react.default.createElement("img", {
82
+ src: _emptycheckbox.default,
83
+ alt: "checkbox-icon"
84
+ })),
79
85
  onClick: handleToggle,
80
86
  checked: isChecked,
81
- checkedIcon: /*#__PURE__*/_react.default.createElement(_icons.CheckBox, {
87
+ checkedIcon: /*#__PURE__*/_react.default.createElement(_core.Icon, {
82
88
  style: {
83
- fontSize: 18
89
+ fontSize: '18px',
90
+ lineHeight: '22px'
84
91
  },
85
92
  className: "".concat(checkedSection, "CheckedIcon")
86
- }),
93
+ }, /*#__PURE__*/_react.default.createElement("img", {
94
+ src: _checkedbox.default,
95
+ alt: "checkedBox-icon"
96
+ })),
87
97
  disableRipple: true,
88
98
  color: "secondary",
89
99
  classes: {
package/dist/components/inputs/checkbox/assets/checkedbox.svg ADDED
@@ -0,0 +1,4 @@
1
+ <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <rect width="14" height="14" fill="#6D5F5B"/>
3
+ <path d="M3 6.52174L4.95652 10L12 2" stroke="white" stroke-width="2"/>
4
+ </svg>
package/dist/components/inputs/checkbox/assets/emptycheckbox.svg ADDED
@@ -0,0 +1,5 @@
1
+ <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <rect width="14" height="14" fill="#6D5F5B"/>
3
+ <rect width="14" height="14" fill="#6D5F5B"/>
4
+ <rect x="0.5" y="0.5" width="13" height="13" fill="white" stroke="#6D5F5B"/>
5
+ </svg>
package/dist/components/inputs/slider/SliderView.js CHANGED
@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
6
6
  exports.default = void 0;
7
7
  var _react = _interopRequireWildcard(require("react"));
8
8
  var _core = require("@material-ui/core");
9
- var _SliderStyle = _interopRequireDefault(require("./SliderStyle"));
10
9
  var _Types = require("../Types");
11
10
  var _InputMinMaxView = _interopRequireDefault(require("./InputMinMaxView"));
12
11
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -69,6 +68,7 @@ const SliderView = _ref => {
69
68
  }, /*#__PURE__*/_react.default.createElement(_core.Typography, {
70
69
  className: classes.minInputLabel
71
70
  }, "Min:"), /*#__PURE__*/_react.default.createElement(_InputMinMaxView.default, {
71
+ className: classes.minInputValue,
72
72
  lowerBoundVal: sliderValue[0],
73
73
  upperBoundVal: sliderValue[1],
74
74
  minLowerBound: minLowerBound,
@@ -80,6 +80,7 @@ const SliderView = _ref => {
80
80
  }, /*#__PURE__*/_react.default.createElement(_core.Typography, {
81
81
  className: classes.maxInputLabel
82
82
  }, "Max:"), /*#__PURE__*/_react.default.createElement(_InputMinMaxView.default, {
83
+ className: classes.maxInputValue,
83
84
  lowerBoundVal: sliderValue[0],
84
85
  upperBoundVal: sliderValue[1],
85
86
  minLowerBound: minLowerBound,
@@ -98,6 +99,7 @@ const SliderView = _ref => {
98
99
  min: minLowerBound,
99
100
  max: maxUpperBound,
100
101
  classes: {
102
+ colorPrimary: classes.colorPrimary,
101
103
  rail: classes.rail,
102
104
  thumb: isValid() ? classes.thumb : classes.invalidThumb,
103
105
  track: isValid() ? classes.track : classes.invalidTrack
@@ -112,5 +114,139 @@ const SliderView = _ref => {
112
114
  className: isValid() ? classes.sliderText : classes.invalidSliderText
113
115
  }, sliderValue[0], ' - ', sliderValue[1], "\xA0", quantifier));
114
116
  };
115
- var _default = (0, _core.withStyles)(_SliderStyle.default)(SliderView);
117
+ const styles = () => ({
118
+ colorPrimary: props => props.facet.style && props.facet.style.colorPrimary ? props.facet.style.colorPrimary : {
119
+ color: '#3f51b5'
120
+ },
121
+ sliderRoot: props => props.facet.style && props.facet.style.sliderRoot ? props.facet.style.sliderRoot : {
122
+ marginTop: '10px',
123
+ marginLeft: '20px',
124
+ marginRight: 'Auto',
125
+ paddingRight: '20px'
126
+ },
127
+ minValue: props => props.facet.style && props.facet.style.minValue ? props.facet.style.minValue : {
128
+ fontFamily: 'Nunito',
129
+ fontSize: '15px',
130
+ color: '#000000',
131
+ marginBottom: '0px',
132
+ float: 'left',
133
+ width: '75px',
134
+ display: 'flex'
135
+ },
136
+ maxValue: props => props.facet.style && props.facet.style.maxValue ? props.facet.style.maxValue : {
137
+ fontFamily: 'Nunito',
138
+ fontSize: '15px',
139
+ color: '#000000',
140
+ float: 'right',
141
+ marginBottom: '0px',
142
+ display: 'flex'
143
+ },
144
+ rail: props => props.facet.style && props.facet.style.rail ? props.facet.style.rail : {
145
+ borderRadius: 4,
146
+ height: 6,
147
+ background: '#142D64'
148
+ },
149
+ minInputLabel: props => props.facet.style && props.facet.style.minInputLabel ? props.facet.style.minInputLabel : {
150
+ float: 'left',
151
+ lineHeight: '34px',
152
+ marginRight: '5px'
153
+ },
154
+ maxInputLabel: props => props.facet.style && props.facet.style.maxInputLabel ? props.facet.style.maxInputLabel : {
155
+ float: 'left',
156
+ lineHeight: '34px',
157
+ marginRight: '5px'
158
+ },
159
+ minInputValue: props => props.facet.style && props.facet.style.minInputValue ? props.facet.style.minInputValue : {
160
+ fontFamily: 'Montserrat',
161
+ fontSize: '13px',
162
+ color: '#717171',
163
+ background: '#F0F0F0',
164
+ textAlign: 'center'
165
+ },
166
+ maxInputValue: props => props.facet.style && props.facet.style.maxInputValue ? props.facet.style.maxInputValue : {
167
+ fontFamily: 'Montserrat',
168
+ fontSize: '13px',
169
+ color: '#717171',
170
+ background: '#F0F0F0',
171
+ textAlign: 'center'
172
+ },
173
+ thumb: props => props.facet.style && props.facet.style.thumb ? props.facet.style.thumb : {
174
+ height: 16,
175
+ width: 16,
176
+ background: '#10A075'
177
+ },
178
+ invalidThumb: props => props.facet.style && props.facet.style.invalidThumb ? props.facet.style.invalidThumb : {
179
+ height: 16,
180
+ width: 16,
181
+ background: '#F44336'
182
+ },
183
+ track: props => props.facet.style && props.facet.style.track ? props.facet.style.track : {
184
+ borderRadius: 4,
185
+ height: 6,
186
+ background: '#10A075',
187
+ '&~&': {
188
+ background: '#142D64'
189
+ }
190
+ },
191
+ invalidTrack: props => props.facet.style && props.facet.style.invalidTrack ? props.facet.style.invalidTrack : {
192
+ borderRadius: 4,
193
+ height: 6,
194
+ background: '#F44336',
195
+ '&~&': {
196
+ background: '#142D64'
197
+ }
198
+ },
199
+ upperBound: props => props.facet.style && props.facet.style.upperBound ? props.facet.style.upperBound : {
200
+ fontFamily: 'Nunito',
201
+ fontSize: '10px',
202
+ color: '#000000',
203
+ float: 'right',
204
+ marginLeft: 'Auto',
205
+ marginRight: 'Auto',
206
+ marginBottom: '15px'
207
+ },
208
+ lowerBound: props => props.facet.style && props.facet.style.lowerBound ? props.facet.style.lowerBound : {
209
+ fontFamily: 'Nunito',
210
+ fontSize: '10px',
211
+ color: '#000000',
212
+ float: 'left',
213
+ marginLeft: 'Auto',
214
+ marginRight: 'Auto',
215
+ marginBottom: '15px'
216
+ },
217
+ sliderText: props => props.facet.style && props.facet.style.sliderText ? props.facet.style.sliderText : {
218
+ color: '#10a075',
219
+ lineHeight: '120%',
220
+ fontFamily: 'Nunito',
221
+ fontSize: '14px',
222
+ padding: '5px 15px 5px 0px',
223
+ width: '100%',
224
+ textAlign: 'right',
225
+ background: '#f5fdee',
226
+ marginTop: '10px'
227
+ },
228
+ invalidSliderText: props => props.facet.style && props.facet.style.invalidSliderText ? props.facet.style.invalidSliderText : {
229
+ color: '#D32F2F',
230
+ lineHeight: '120%',
231
+ fontFamily: 'Nunito',
232
+ fontSize: '14px',
233
+ padding: '5px 15px 5px 0px',
234
+ width: '100%',
235
+ textAlign: 'right',
236
+ background: '#E57373',
237
+ marginTop: '10px'
238
+ },
239
+ sliderListItem: props => props.facet.style && props.facet.style.sliderListItem ? props.facet.style.sliderListItem : {
240
+ height: '15px'
241
+ },
242
+ listItemGutters: props => props.facet.style && props.facet.style.listItemGutters ? props.facet.style.listItemGutters : {
243
+ display: 'flex',
244
+ justifyContent: 'space-between',
245
+ padding: '2px 5px 2px 8px'
246
+ },
247
+ lowerUpperBound: props => props.facet.style && props.facet.style.lowerUpperBound ? props.facet.style.lowerUpperBound : {
248
+ height: '15px'
249
+ }
250
+ });
251
+ var _default = (0, _core.withStyles)(styles)(SliderView);
116
252
  exports.default = _default;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bento-core/facet-filter",
3
- "version": "1.0.1-ccdihub.1",
3
+ "version": "1.0.1-ccdihub.11",
4
4
  "description": "### Bento core sidebar design:",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {
package/src/FacetFilterController.js CHANGED
@@ -113,6 +113,7 @@ const FacetFilterController = (props) => {
113
113
  updateFacet.minLowerBound = lowerBound;
114
114
  updateFacet.maxUpperBound = upperBound;
115
115
  updateFacet.facetValues = [lowerBound, upperBound];
116
+ updateFacet.style = facet.style;
116
117
  }
117
118
  }
118
119
  updateFacets.push(updateFacet);
package/src/components/facet/FacetStyle.js CHANGED
@@ -35,7 +35,7 @@ export default () => ({
35
35
  fontFamily: 'Nunito',
36
36
  fontSize: '10px',
37
37
  marginRight: '12px',
38
- marginLeft: '16px',
38
+ marginLeft: '24px',
39
39
  },
40
40
  sortGroupItem: {
41
41
  cursor: 'pointer',
package/src/components/facet/FacetView.js CHANGED
@@ -92,7 +92,7 @@ const FacetView = ({
92
92
  </CustomAccordionSummary>
93
93
  )}
94
94
  {
95
- (facet.type === InputTypes.SLIDER || facetValues.length === 0)
95
+ (facetValues.length === 0)
96
96
  && (
97
97
  <div className={classes.NonSortGroup}>
98
98
  <span
package/src/components/inputs/FilterItemStyle.js CHANGED
@@ -11,7 +11,7 @@ export default () => ({
11
11
  fontFamily: 'Nunito',
12
12
  fontSize: '10px',
13
13
  marginRight: '12px',
14
- marginLeft: '16px',
14
+ marginLeft: '24px',
15
15
  },
16
16
  sortGroupItem: {
17
17
  cursor: 'pointer',
package/src/components/inputs/checkbox/CheckboxStyle.js CHANGED
@@ -1,9 +1,9 @@
1
1
  export default () => ({
2
2
  listItemGutters: {
3
- padding: '10px 20px 10px 0px',
3
+ padding: '10px 10px 10px 0px',
4
4
  },
5
5
  checkboxRoot: {
6
- marginLeft: '5px',
6
+ marginLeft: '8px',
7
7
  height: 12,
8
8
  },
9
9
  panelDetailText: {
@@ -24,7 +24,8 @@ export default () => ({
24
24
  checkboxName: {
25
25
  margin: '0',
26
26
  color: '#000000',
27
- fontSize: '14px',
27
+ fontSize: '16px',
28
+ fontWeight: 300,
28
29
  marginTop: '1.5px',
29
30
  fontFamily: 'Nunito',
30
31
  lineHeight: '120%',
package/src/components/inputs/checkbox/CheckboxView.js CHANGED
@@ -15,11 +15,14 @@ import {
15
15
  Tooltip,
16
16
  Box,
17
17
  Typography,
18
+ Icon,
18
19
  } from '@material-ui/core';
19
20
  import clsx from 'clsx';
20
21
  import {
21
22
  CheckBox as CheckBoxIcon, CheckBoxOutlineBlank as CheckBoxBlankIcon,
22
23
  } from '@material-ui/icons';
24
+ import emptyCheckBox from './assets/emptycheckbox.svg';
25
+ import checkedBox from './assets/checkedbox.svg';
23
26
  import styles from './CheckboxStyle';
24
27
 
25
28
  const alignment = 'flex-start';
@@ -78,16 +81,33 @@ const CheckBoxView = ({
78
81
  >
79
82
  <Checkbox
80
83
  id={`checkbox_${facet.label}_${name}`}
81
- icon={<CheckBoxBlankIcon style={{ fontSize: 18 }} />}
84
+ icon={
85
+ <Icon style={{
86
+ fontSize: '18px',
87
+ lineHeight: '22px',
88
+ }}
89
+ >
90
+ <img
91
+ src={emptyCheckBox}
92
+ alt="checkbox-icon"
93
+ />
94
+ </Icon>
95
+ }
82
96
  onClick={handleToggle}
83
97
  checked={isChecked}
84
98
  checkedIcon={(
85
- <CheckBoxIcon
99
+ <Icon
86
100
  style={{
87
- fontSize: 18,
101
+ fontSize: '18px',
102
+ lineHeight: '22px',
88
103
  }}
89
104
  className={`${checkedSection}CheckedIcon`}
90
- />
105
+ >
106
+ <img
107
+ src={checkedBox}
108
+ alt="checkedBox-icon"
109
+ />
110
+ </Icon>
91
111
  )}
92
112
  disableRipple
93
113
  color="secondary"
package/src/components/inputs/checkbox/assets/checkedbox.svg ADDED
@@ -0,0 +1,4 @@
1
+ <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <rect width="14" height="14" fill="#6D5F5B"/>
3
+ <path d="M3 6.52174L4.95652 10L12 2" stroke="white" stroke-width="2"/>
4
+ </svg>
package/src/components/inputs/checkbox/assets/emptycheckbox.svg ADDED
@@ -0,0 +1,5 @@
1
+ <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <rect width="14" height="14" fill="#6D5F5B"/>
3
+ <rect width="14" height="14" fill="#6D5F5B"/>
4
+ <rect x="0.5" y="0.5" width="13" height="13" fill="white" stroke="#6D5F5B"/>
5
+ </svg>
package/src/components/inputs/slider/SliderView.js CHANGED
@@ -4,7 +4,7 @@
4
4
  /* eslint-disable object-curly-newline */
5
5
  import React, { useEffect, useState } from 'react';
6
6
  import { withStyles, Slider, Typography, Box } from '@material-ui/core';
7
- import styles from './SliderStyle';
7
+ // import styles from './SliderStyle';
8
8
  import { silderTypes } from '../Types';
9
9
  import InputMinMaxView from './InputMinMaxView';
10
10
 
@@ -59,6 +59,7 @@ const SliderView = ({
59
59
  Min:
60
60
  </Typography>
61
61
  <InputMinMaxView
62
+ className={classes.minInputValue}
62
63
  lowerBoundVal={sliderValue[0]}
63
64
  upperBoundVal={sliderValue[1]}
64
65
  minLowerBound={minLowerBound}
@@ -72,6 +73,7 @@ const SliderView = ({
72
73
  Max:
73
74
  </Typography>
74
75
  <InputMinMaxView
76
+ className={classes.maxInputValue}
75
77
  lowerBoundVal={sliderValue[0]}
76
78
  upperBoundVal={sliderValue[1]}
77
79
  minLowerBound={minLowerBound}
@@ -93,6 +95,7 @@ const SliderView = ({
93
95
  min={minLowerBound}
94
96
  max={maxUpperBound}
95
97
  classes={{
98
+ colorPrimary: classes.colorPrimary,
96
99
  rail: classes.rail,
97
100
  thumb: isValid() ? classes.thumb : classes.invalidThumb,
98
101
  track: isValid() ? classes.track : classes.invalidTrack,
@@ -113,9 +116,7 @@ const SliderView = ({
113
116
  (sliderValue[0] > minLowerBound || sliderValue[1] < maxUpperBound)
114
117
  && (
115
118
  <Typography
116
- className={isValid()
117
- ? classes.sliderText
118
- : classes.invalidSliderText}
119
+ className={isValid() ? classes.sliderText : classes.invalidSliderText}
119
120
  >
120
121
  {sliderValue[0]}
121
122
  {' - '}
@@ -129,4 +130,179 @@ const SliderView = ({
129
130
  );
130
131
  };
131
132
 
133
+ const styles = () => ({
134
+ colorPrimary: (props) => (props.facet.style && props.facet.style.colorPrimary
135
+ ? props.facet.style.colorPrimary
136
+ : {
137
+ color: '#3f51b5',
138
+ }),
139
+ sliderRoot: (props) => (props.facet.style && props.facet.style.sliderRoot
140
+ ? props.facet.style.sliderRoot
141
+ : {
142
+ marginTop: '10px',
143
+ marginLeft: '20px',
144
+ marginRight: 'Auto',
145
+ paddingRight: '20px',
146
+ }),
147
+ minValue: (props) => (props.facet.style && props.facet.style.minValue
148
+ ? props.facet.style.minValue
149
+ : {
150
+ fontFamily: 'Nunito',
151
+ fontSize: '15px',
152
+ color: '#000000',
153
+ marginBottom: '0px',
154
+ float: 'left',
155
+ width: '75px',
156
+ display: 'flex',
157
+ }),
158
+ maxValue: (props) => (props.facet.style && props.facet.style.maxValue
159
+ ? props.facet.style.maxValue
160
+ : {
161
+ fontFamily: 'Nunito',
162
+ fontSize: '15px',
163
+ color: '#000000',
164
+ float: 'right',
165
+ marginBottom: '0px',
166
+ display: 'flex',
167
+ }),
168
+ rail: (props) => (props.facet.style && props.facet.style.rail
169
+ ? props.facet.style.rail
170
+ : {
171
+ borderRadius: 4,
172
+ height: 6,
173
+ background: '#142D64',
174
+ }),
175
+ minInputLabel: (props) => (props.facet.style && props.facet.style.minInputLabel
176
+ ? props.facet.style.minInputLabel
177
+ : {
178
+ float: 'left',
179
+ lineHeight: '34px',
180
+ marginRight: '5px',
181
+ }),
182
+ maxInputLabel: (props) => (props.facet.style && props.facet.style.maxInputLabel
183
+ ? props.facet.style.maxInputLabel
184
+ : {
185
+ float: 'left',
186
+ lineHeight: '34px',
187
+ marginRight: '5px',
188
+ }),
189
+ minInputValue: (props) => (props.facet.style && props.facet.style.minInputValue
190
+ ? props.facet.style.minInputValue
191
+ : {
192
+ fontFamily: 'Montserrat',
193
+ fontSize: '13px',
194
+ color: '#717171',
195
+ background: '#F0F0F0',
196
+ textAlign: 'center',
197
+ }),
198
+ maxInputValue: (props) => (props.facet.style && props.facet.style.maxInputValue
199
+ ? props.facet.style.maxInputValue
200
+ : {
201
+ fontFamily: 'Montserrat',
202
+ fontSize: '13px',
203
+ color: '#717171',
204
+ background: '#F0F0F0',
205
+ textAlign: 'center',
206
+ }),
207
+ thumb: (props) => (props.facet.style && props.facet.style.thumb
208
+ ? props.facet.style.thumb
209
+ : {
210
+ height: 16,
211
+ width: 16,
212
+ background: '#10A075',
213
+ }),
214
+ invalidThumb: (props) => (props.facet.style && props.facet.style.invalidThumb
215
+ ? props.facet.style.invalidThumb
216
+ : {
217
+ height: 16,
218
+ width: 16,
219
+ background: '#F44336',
220
+ }),
221
+ track: (props) => (props.facet.style && props.facet.style.track
222
+ ? props.facet.style.track
223
+ : {
224
+ borderRadius: 4,
225
+ height: 6,
226
+ background: '#10A075',
227
+ '&~&': {
228
+ background: '#142D64',
229
+ },
230
+ }),
231
+ invalidTrack: (props) => (props.facet.style && props.facet.style.invalidTrack
232
+ ? props.facet.style.invalidTrack
233
+ : {
234
+ borderRadius: 4,
235
+ height: 6,
236
+ background: '#F44336',
237
+ '&~&': {
238
+ background: '#142D64',
239
+ },
240
+ }),
241
+ upperBound: (props) => (props.facet.style && props.facet.style.upperBound
242
+ ? props.facet.style.upperBound
243
+ : {
244
+ fontFamily: 'Nunito',
245
+ fontSize: '10px',
246
+ color: '#000000',
247
+ float: 'right',
248
+ marginLeft: 'Auto',
249
+ marginRight: 'Auto',
250
+ marginBottom: '15px',
251
+ }),
252
+ lowerBound: (props) => (props.facet.style && props.facet.style.lowerBound
253
+ ? props.facet.style.lowerBound
254
+ : {
255
+ fontFamily: 'Nunito',
256
+ fontSize: '10px',
257
+ color: '#000000',
258
+ float: 'left',
259
+ marginLeft: 'Auto',
260
+ marginRight: 'Auto',
261
+ marginBottom: '15px',
262
+ }),
263
+ sliderText: (props) => (props.facet.style && props.facet.style.sliderText
264
+ ? props.facet.style.sliderText
265
+ : {
266
+ color: '#10a075',
267
+ lineHeight: '120%',
268
+ fontFamily: 'Nunito',
269
+ fontSize: '14px',
270
+ padding: '5px 15px 5px 0px',
271
+ width: '100%',
272
+ textAlign: 'right',
273
+ background: '#f5fdee',
274
+ marginTop: '10px',
275
+ }),
276
+ invalidSliderText: (props) => (props.facet.style && props.facet.style.invalidSliderText
277
+ ? props.facet.style.invalidSliderText
278
+ : {
279
+ color: '#D32F2F',
280
+ lineHeight: '120%',
281
+ fontFamily: 'Nunito',
282
+ fontSize: '14px',
283
+ padding: '5px 15px 5px 0px',
284
+ width: '100%',
285
+ textAlign: 'right',
286
+ background: '#E57373',
287
+ marginTop: '10px',
288
+ }),
289
+ sliderListItem: (props) => (props.facet.style && props.facet.style.sliderListItem
290
+ ? props.facet.style.sliderListItem
291
+ : {
292
+ height: '15px',
293
+ }),
294
+ listItemGutters: (props) => (props.facet.style && props.facet.style.listItemGutters
295
+ ? props.facet.style.listItemGutters
296
+ : {
297
+ display: 'flex',
298
+ justifyContent: 'space-between',
299
+ padding: '2px 5px 2px 8px',
300
+ }),
301
+ lowerUpperBound: (props) => (props.facet.style && props.facet.style.lowerUpperBound
302
+ ? props.facet.style.lowerUpperBound
303
+ : {
304
+ height: '15px',
305
+ }),
306
+ });
307
+
132
308
  export default withStyles(styles)(SliderView);