@bento-core/facet-filter 1.0.1-ccdihub.35 → 1.0.1-ccdihub.37

package/dist/FacetFilterController.js

@@ -29,7 +29,8 @@ const FacetFilterController = props => {
     activeFilters,
     data,
     facetsConfig,
-    facetSectionConfig
+    facetSectionConfig,
+    unknownAgesState
   } = props;
   const filterState = {};
   // console.log(activeFilters);
@@ -152,8 +153,10 @@ const FacetFilterController = props => {
           if (facet.type === _Types.InputTypes.SLIDER) {
             const lowerBound = data[apiForFiltering][ApiLowerBoundName];
             const upperBound = data[apiForFiltering][ApiUpperBoundName];
+            const unknownAges = (unknownAgesState === null || unknownAgesState === void 0 ? void 0 : unknownAgesState[facet.datafield]) || 'include';
             updateFacet.minLowerBound = lowerBound;
             updateFacet.maxUpperBound = upperBound;
+            updateFacet.unknownAges = unknownAges;
             updateFacet.facetValues = [lowerBound, upperBound];
             updateFacet.style = facet.style;
           }

package/dist/NewFacetFilterController.js

@@ -30,7 +30,8 @@ const NewFacetFilterController = props => {
     data,
     facetsConfig,
     facetSectionConfig,
-    selectedSection
+    selectedSection,
+    unknownAgesState
   } = props;
   const filterState = {};
   // console.log(activeFilters);
@@ -153,8 +154,10 @@ const NewFacetFilterController = props => {
           if (facet.type === _Types.InputTypes.SLIDER) {
             const lowerBound = data[apiForFiltering][ApiLowerBoundName];
             const upperBound = data[apiForFiltering][ApiUpperBoundName];
+            const unknownAges = (unknownAgesState === null || unknownAgesState === void 0 ? void 0 : unknownAgesState[facet.datafield]) || 'include';
             updateFacet.minLowerBound = lowerBound;
             updateFacet.maxUpperBound = upperBound;
+            updateFacet.unknownAges = unknownAges;
             updateFacet.facetValues = [lowerBound, upperBound];
             updateFacet.style = facet.style;
           }
@@ -179,5 +182,11 @@ const NewFacetFilterController = props => {
     facetSection: facetSection
   })));
 };
-var _default = (0, _reactRedux.connect)(null, null)(NewFacetFilterController);
+const mapStateToProps = state => {
+  var _state$statusReducer;
+  return {
+    unknownAgesState: (state === null || state === void 0 ? void 0 : (_state$statusReducer = state.statusReducer) === null || _state$statusReducer === void 0 ? void 0 : _state$statusReducer.unknownAgesState) || {}
+  };
+};
+var _default = (0, _reactRedux.connect)(mapStateToProps, null)(NewFacetFilterController);
 exports.default = _default;

package/dist/components/facet/FacetView.js

@@ -29,8 +29,10 @@ const FacetView = _ref => {
     facet,
     onClearFacetSection,
     onClearSliderSection,
+    onUnknownAgesChange,
     CustomView,
-    queryParams
+    queryParams,
+    unknownAgesState
   } = _ref;
   const [expand, setExpand] = (0, _react.useState)(facet.expanded !== undefined && typeof facet.expanded === 'boolean' ? facet.expanded : false);
   const onExpandFacet = () => setExpand(!expand);
@@ -55,11 +57,22 @@ const FacetView = _ref => {
     const field = facet.datafield;
     const paramValue = {};
     paramValue[field] = '';
+
+    // Also clear the corresponding unknownAges parameter if it exists
+    const unknownAgesField = "".concat(field, "_unknownAges");
+    if (queryParams.includes(unknownAgesField)) {
+      paramValue[unknownAgesField] = '';
+    }
     const queryStr = (0, _util.generateQueryStr)(query, queryParams, paramValue);
     navigate("/explore".concat(queryStr), {
       replace: true
     });
     setSortBy(null);
+
+    // Reset the corresponding unknownAges parameter in Redux state
+    if (queryParams.includes(unknownAgesField) && onUnknownAgesChange) {
+      onUnknownAgesChange(field, 'include');
+    }
     if (facet.type === _Types.InputTypes.SLIDER) {
       onClearSliderSection(facet);
     } else {
@@ -76,7 +89,12 @@ const FacetView = _ref => {
   const selectedItems = facetValues && facetValues.filter(item => item.isChecked);
   const displayFacet = _objectSpread({}, facet);
   displayFacet.facetValues = selectedItems;
-  const isActiveFacet = [...selectedItems].length > 0;
+
+  // Check if facet is active based on selected items or unknown ages selection
+  const hasSelectedItems = [...selectedItems].length > 0;
+  const unknownAges = (unknownAgesState === null || unknownAgesState === void 0 ? void 0 : unknownAgesState[facet.datafield]) || 'include';
+  const hasUnknownAgesSelection = unknownAges !== 'include';
+  const isActiveFacet = hasSelectedItems || type === _Types.InputTypes.SLIDER && hasUnknownAgesSelection;
   const limitCheckBoxCount = (facet === null || facet === void 0 ? void 0 : facet.showCheckboxCount) || 5;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.Accordion, {
     square: true,

package/dist/components/facet/NewFacetStyle.js

@@ -33,7 +33,9 @@ var _default = () => ({
     marginBottom: '5px',
     textAlign: 'left',
     marginLeft: '-5px',
-    borderTop: 'none'
+    borderTop: 'none',
+    display: 'flex',
+    alignItems: 'center'
   },
   sortGroupIcon: {
     cursor: 'pointer',
@@ -123,6 +125,86 @@ var _default = () => ({
     position: 'absolute',
     right: '14px',
     top: '14px'
+  },
+  timeUnitToggle: {
+    marginLeft: '8px',
+    marginRight: '20px',
+    height: '32px',
+    '& .MuiToggleButtonGroup-grouped': {
+      borderRadius: '8px',
+      '&:not(:first-child)': {
+        marginLeft: '0px',
+        borderLeft: '1px solid #D3D3D3',
+        borderTopLeftRadius: '0px',
+        borderBottomLeftRadius: '0px'
+      },
+      '&:not(:last-child)': {
+        borderTopRightRadius: '0px',
+        borderBottomRightRadius: '0px'
+      }
+    }
+  },
+  toggleButton: props => {
+    const primaryColor = props.facet && props.facet.style && props.facet.style.colorPrimary ? props.facet.style.colorPrimary.color : '#3f51b5';
+    return {
+      fontFamily: 'Poppins !important',
+      fontSize: '11px !important',
+      fontWeight: '400 !important',
+      fontStyle: 'normal !important',
+      lineHeight: '100% !important',
+      letterSpacing: '0.02em !important',
+      padding: '6px 24px',
+      textTransform: 'uppercase !important',
+      border: '1px solid #D3D3D3',
+      borderRadius: '8px',
+      backgroundColor: '#EDEDED',
+      color: '#000000',
+      '& .MuiToggleButton-label': {
+        fontFamily: 'Poppins !important',
+        fontSize: '11px !important',
+        fontWeight: '400 !important',
+        lineHeight: '100% !important',
+        letterSpacing: '0.02em !important',
+        textTransform: 'uppercase !important'
+      },
+      '&:hover': {
+        backgroundColor: '#E0E0E0'
+      },
+      '&.Mui-disabled': {
+        backgroundColor: '#F5F5F5',
+        color: '#BDBDBD',
+        border: '1px solid #E0E0E0',
+        cursor: 'not-allowed',
+        '& .MuiToggleButton-label': {
+          color: '#BDBDBD'
+        }
+      },
+      '&.Mui-selected': {
+        backgroundColor: primaryColor,
+        color: '#FFFFFF',
+        '& .MuiToggleButton-label': {
+          fontFamily: 'Poppins !important',
+          fontSize: '11px !important',
+          fontWeight: '400 !important',
+          lineHeight: '100% !important',
+          letterSpacing: '0.02em !important',
+          textTransform: 'uppercase !important'
+        },
+        '&:hover': {
+          backgroundColor: primaryColor
+        }
+      }
+    };
+  },
+  toggleButtonSelected: props => {
+    const primaryColor = props.facet && props.facet.style && props.facet.style.colorPrimary ? props.facet.style.colorPrimary.color : '#3f51b5';
+    return {
+      backgroundColor: primaryColor,
+      color: '#FFFFFF !important',
+      '&:hover': {
+        backgroundColor: primaryColor
+      }
+    };
   }
 });
 exports.default = _default;

package/dist/components/facet/NewFacetView.js

@@ -8,6 +8,8 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactRouterDom = require("react-router-dom");
 var _util = require("@bento-core/util");
 var _core = require("@material-ui/core");
+var _ToggleButton = _interopRequireDefault(require("@material-ui/lab/ToggleButton"));
+var _ToggleButtonGroup = _interopRequireDefault(require("@material-ui/lab/ToggleButtonGroup"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _AccordionSummaryView = _interopRequireDefault(require("../summary/AccordionSummaryView"));
 var _Types = require("../inputs/Types");
@@ -29,8 +31,12 @@ const NewFacetView = _ref => {
     facet,
     onClearFacetSection,
     onClearSliderSection,
+    onUnknownAgesChange,
     CustomView,
-    queryParams
+    queryParams,
+    timeUnitState,
+    onTimeUnitChange,
+    unknownAgesState
   } = _ref;
   const [expand, setExpand] = (0, _react.useState)(facet.expanded !== undefined && typeof facet.expanded === 'boolean' ? facet.expanded : false);
   const onExpandFacet = () => setExpand(!expand);
@@ -48,18 +54,37 @@ const NewFacetView = _ref => {
   // }, [autoComplete, upload]);
 
   const [sortBy, setSortBy] = (0, _react.useState)(null);
+  const timeUnit = timeUnitState[facet.datafield] || 'days';
+  const unknownAges = (unknownAgesState === null || unknownAgesState === void 0 ? void 0 : unknownAgesState[facet.datafield]) || 'include';
+  const isOnlyUnknownAges = unknownAges === 'only';
   const onSortFacet = type => {
     setSortBy(type);
   };
+  const handleTimeUnitChange = (event, newUnit) => {
+    if (newUnit !== null) {
+      onTimeUnitChange(facet.datafield, newUnit);
+    }
+  };
   const onClearSection = () => {
     const field = facet.datafield;
     const paramValue = {};
     paramValue[field] = '';
+
+    // Also clear the corresponding unknownAges parameter if it exists
+    const unknownAgesField = "".concat(field, "_unknownAges");
+    if (queryParams.includes(unknownAgesField)) {
+      paramValue[unknownAgesField] = '';
+    }
     const queryStr = (0, _util.generateQueryStr)(query, queryParams, paramValue);
     navigate("/explore".concat(queryStr), {
       replace: true
     });
     setSortBy(null);
+
+    // Reset the corresponding unknownAges parameter in Redux state
+    if (queryParams.includes(unknownAgesField) && onUnknownAgesChange) {
+      onUnknownAgesChange(field, 'include');
+    }
     if (facet.type === _Types.InputTypes.SLIDER) {
       onClearSliderSection(facet);
     } else {
@@ -76,7 +101,11 @@ const NewFacetView = _ref => {
   const selectedItems = facetValues && facetValues.filter(item => item.isChecked);
   const displayFacet = _objectSpread({}, facet);
   displayFacet.facetValues = selectedItems;
-  const isActiveFacet = [...selectedItems].length > 0;
+
+  // Check if facet is active based on selected items or unknown ages selection
+  const hasSelectedItems = [...selectedItems].length > 0;
+  const hasUnknownAgesSelection = unknownAges !== 'include';
+  const isActiveFacet = hasSelectedItems || type === _Types.InputTypes.SLIDER && hasUnknownAgesSelection;
   const limitCheckBoxCount = (facet === null || facet === void 0 ? void 0 : facet.showCheckboxCount) || 5;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.Accordion, {
     square: true,
@@ -112,7 +141,30 @@ const NewFacetView = _ref => {
     height: 12,
     width: 12,
     alt: "clear-icon"
-  }))), facet.type === _Types.InputTypes.CHECKBOX && facetValues.length > 0 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
+  }))), facet.type === _Types.InputTypes.SLIDER && /*#__PURE__*/_react.default.createElement(_ToggleButtonGroup.default, {
+    value: timeUnit,
+    exclusive: true,
+    disabled: isOnlyUnknownAges,
+    onChange: handleTimeUnitChange,
+    "aria-label": "time unit",
+    className: classes.timeUnitToggle
+  }, /*#__PURE__*/_react.default.createElement(_ToggleButton.default, {
+    value: "days",
+    "aria-label": "days",
+    disabled: isOnlyUnknownAges,
+    classes: {
+      root: classes.toggleButton,
+      selected: classes.toggleButtonSelected
+    }
+  }, "DAYS"), /*#__PURE__*/_react.default.createElement(_ToggleButton.default, {
+    value: "years",
+    "aria-label": "years",
+    disabled: isOnlyUnknownAges,
+    classes: {
+      root: classes.toggleButton,
+      selected: classes.toggleButtonSelected
+    }
+  }, "YEARS")), facet.type === _Types.InputTypes.CHECKBOX && facetValues.length > 0 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
     className: (0, _clsx.default)(classes.sortGroupItem, {
       [classes.highlight]: sortBy === _Sort.sortType.ALPHABET
     }),
@@ -129,7 +181,8 @@ const NewFacetView = _ref => {
   }, "Sort by count"))), /*#__PURE__*/_react.default.createElement(_FilterItems.default, {
     facet: facet,
     queryParams: queryParams,
-    sortBy: sortBy
+    sortBy: sortBy,
+    timeUnit: timeUnit
   })), !expand && type === _Types.InputTypes.CHECKBOX && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.List, {
     id: "filter_Items"
   }, /*#__PURE__*/_react.default.createElement(_FilterItems.default, {

package/dist/components/facet/NewSearchFacetView.js

@@ -53,10 +53,12 @@ const SearchFacetView = _ref => {
     searchText,
     sortBy,
     onClearFacetSection,
+    onUnknownAgesChange,
     onSearchTextChange,
     onSortChange,
     CustomView,
-    queryParams
+    queryParams,
+    unknownAgesState
   } = _ref;
   const [expand, setExpand] = (0, _react.useState)(facet.expanded !== undefined && typeof facet.expanded === 'boolean' ? facet.expanded : false);
   const [open, setOpen] = (0, _react.useState)(false);
@@ -67,11 +69,22 @@ const SearchFacetView = _ref => {
     const field = facet.datafield;
     const paramValue = {};
     paramValue[field] = '';
+
+    // Also clear the corresponding unknownAges parameter if it exists
+    const unknownAgesField = "".concat(field, "_unknownAges");
+    if (queryParams.includes(unknownAgesField)) {
+      paramValue[unknownAgesField] = '';
+    }
     const queryStr = (0, _util.generateQueryStr)(query, queryParams, paramValue);
     navigate("/explore".concat(queryStr), {
       replace: true
     });
     onSortChange(facet.datafield, null);
+
+    // Reset the corresponding unknownAges parameter in Redux state
+    if (queryParams.includes(unknownAgesField) && onUnknownAgesChange) {
+      onUnknownAgesChange(field, 'include');
+    }
     onClearFacetSection(facet);
   };
 
@@ -87,7 +100,12 @@ const SearchFacetView = _ref => {
   const selectedItems = facetValues && facetValues.filter(item => item.isChecked);
   const displayFacet = _objectSpread({}, facet);
   displayFacet.facetValues = selectedItems;
-  const isActiveFacet = [...selectedItems].length > 0;
+
+  // Check if facet is active based on selected items or unknown ages selection
+  const hasSelectedItems = [...selectedItems].length > 0;
+  const unknownAges = (unknownAgesState === null || unknownAgesState === void 0 ? void 0 : unknownAgesState[facet.datafield]) || 'include';
+  const hasUnknownAgesSelection = unknownAges !== 'include';
+  const isActiveFacet = hasSelectedItems || type === _Types.InputTypes.SLIDER && hasUnknownAgesSelection;
   const limitCheckBoxCount = (facet === null || facet === void 0 ? void 0 : facet.showCheckboxCount) || 5;
   const sortFilters = (0, _Sort.sortBySection)(_objectSpread(_objectSpread({}, facet), {}, {
     sortBy

package/dist/components/facet/ReduxFacetView.js

@@ -10,19 +10,22 @@ var _Actions = require("../../store/actions/Actions");
 var _FacetView = _interopRequireDefault(require("./FacetView"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const ReduxFacetView = props => /*#__PURE__*/_react.default.createElement(_FacetView.default, props);
-
-// const mapStateToProps = (state) => ({
-//   autoComplete: state?.localFind?.autocomplete || [],
-//   upload: state?.localFind?.upload || [],
-// });
-
+const mapStateToProps = state => {
+  var _state$statusReducer;
+  return {
+    unknownAgesState: (state === null || state === void 0 ? void 0 : (_state$statusReducer = state.statusReducer) === null || _state$statusReducer === void 0 ? void 0 : _state$statusReducer.unknownAgesState) || {}
+  };
+};
 const mapDispatchToProps = dispatch => ({
   onClearFacetSection: facet => {
     dispatch((0, _Actions.clearFacetSection)(facet));
   },
   onClearSliderSection: facet => {
     dispatch((0, _Actions.clearSliderSection)(facet));
+  },
+  onUnknownAgesChange: (datafield, unknownAges) => {
+    dispatch((0, _Actions.unknownAgesChange)(datafield, unknownAges));
   }
 });
-var _default = (0, _reactRedux.connect)(null, mapDispatchToProps)(ReduxFacetView);
+var _default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(ReduxFacetView);
 exports.default = _default;

package/dist/components/facet/ReduxNewFacetView.js

@@ -10,19 +10,26 @@ var _Actions = require("../../store/actions/Actions");
 var _NewFacetView = _interopRequireDefault(require("./NewFacetView"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const ReduxNewFacetView = props => /*#__PURE__*/_react.default.createElement(_NewFacetView.default, props);
-
-// const mapStateToProps = (state) => ({
-//   autoComplete: state?.localFind?.autocomplete || [],
-//   upload: state?.localFind?.upload || [],
-// });
-
+const mapStateToProps = state => {
+  var _state$statusReducer, _state$statusReducer2;
+  return {
+    timeUnitState: (state === null || state === void 0 ? void 0 : (_state$statusReducer = state.statusReducer) === null || _state$statusReducer === void 0 ? void 0 : _state$statusReducer.timeUnitState) || {},
+    unknownAgesState: (state === null || state === void 0 ? void 0 : (_state$statusReducer2 = state.statusReducer) === null || _state$statusReducer2 === void 0 ? void 0 : _state$statusReducer2.unknownAgesState) || {}
+  };
+};
 const mapDispatchToProps = dispatch => ({
   onClearFacetSection: facet => {
     dispatch((0, _Actions.clearFacetSection)(facet));
   },
   onClearSliderSection: facet => {
     dispatch((0, _Actions.clearSliderSection)(facet));
+  },
+  onTimeUnitChange: (datafield, timeUnit) => {
+    dispatch((0, _Actions.timeUnitChange)(datafield, timeUnit));
+  },
+  onUnknownAgesChange: (datafield, unknownAges) => {
+    dispatch((0, _Actions.unknownAgesChange)(datafield, unknownAges));
   }
 });
-var _default = (0, _reactRedux.connect)(null, mapDispatchToProps)(ReduxNewFacetView);
+var _default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(ReduxNewFacetView);
 exports.default = _default;

package/dist/components/facet/ReduxNewSearchFacetView.js

@@ -13,10 +13,11 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 const ReduxNewSearchFacetView = props => /*#__PURE__*/_react.default.createElement(_NewSearchFacetView.default, props);
 const mapStateToProps = (state, ownProps) => {
-  var _state$statusReducer;
+  var _state$statusReducer, _state$statusReducer2;
   return {
     searchText: ((_state$statusReducer = state.statusReducer) === null || _state$statusReducer === void 0 ? void 0 : _state$statusReducer.searchState[ownProps.facet.datafield]) || '',
-    sortBy: state.statusReducer.sortState[ownProps.facet.datafield] || null
+    sortBy: state.statusReducer.sortState[ownProps.facet.datafield] || null,
+    unknownAgesState: (state === null || state === void 0 ? void 0 : (_state$statusReducer2 = state.statusReducer) === null || _state$statusReducer2 === void 0 ? void 0 : _state$statusReducer2.unknownAgesState) || {}
   };
 };
 const mapDispatchToProps = dispatch => ({
@@ -31,6 +32,9 @@ const mapDispatchToProps = dispatch => ({
   },
   onSortChange: (datafield, sortBy) => {
     dispatch((0, _Actions.sortChange)(datafield, sortBy));
+  },
+  onUnknownAgesChange: (datafield, unknownAges) => {
+    dispatch((0, _Actions.unknownAgesChange)(datafield, unknownAges));
   }
 });
 var _default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(ReduxNewSearchFacetView);

package/dist/components/facet/ReduxSearchFacetView.js

@@ -13,10 +13,11 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 const ReduxSearchFacetView = props => /*#__PURE__*/_react.default.createElement(_SearchFacetView.default, props);
 const mapStateToProps = (state, ownProps) => {
-  var _state$statusReducer;
+  var _state$statusReducer, _state$statusReducer2;
   return {
     searchText: ((_state$statusReducer = state.statusReducer) === null || _state$statusReducer === void 0 ? void 0 : _state$statusReducer.searchState[ownProps.facet.datafield]) || '',
-    sortBy: state.statusReducer.sortState[ownProps.facet.datafield] || null
+    sortBy: state.statusReducer.sortState[ownProps.facet.datafield] || null,
+    unknownAgesState: (state === null || state === void 0 ? void 0 : (_state$statusReducer2 = state.statusReducer) === null || _state$statusReducer2 === void 0 ? void 0 : _state$statusReducer2.unknownAgesState) || {}
   };
 };
 const mapDispatchToProps = dispatch => ({
@@ -31,6 +32,9 @@ const mapDispatchToProps = dispatch => ({
   },
   onSortChange: (datafield, sortBy) => {
     dispatch((0, _Actions.sortChange)(datafield, sortBy));
+  },
+  onUnknownAgesChange: (datafield, unknownAges) => {
+    dispatch((0, _Actions.unknownAgesChange)(datafield, unknownAges));
   }
 });
 var _default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(ReduxSearchFacetView);

package/dist/components/facet/SearchFacetView.js

@@ -53,10 +53,12 @@ const SearchFacetView = _ref => {
     searchText,
     sortBy,
     onClearFacetSection,
+    onUnknownAgesChange,
     onSearchTextChange,
     onSortChange,
     CustomView,
-    queryParams
+    queryParams,
+    unknownAgesState
   } = _ref;
   const [expand, setExpand] = (0, _react.useState)(facet.expanded !== undefined && typeof facet.expanded === 'boolean' ? facet.expanded : false);
   const [open, setOpen] = (0, _react.useState)(false);
@@ -67,11 +69,22 @@ const SearchFacetView = _ref => {
     const field = facet.datafield;
     const paramValue = {};
     paramValue[field] = '';
+
+    // Also clear the corresponding unknownAges parameter if it exists
+    const unknownAgesField = "".concat(field, "_unknownAges");
+    if (queryParams.includes(unknownAgesField)) {
+      paramValue[unknownAgesField] = '';
+    }
     const queryStr = (0, _util.generateQueryStr)(query, queryParams, paramValue);
     navigate("/explore".concat(queryStr), {
       replace: true
     });
     onSortChange(facet.datafield, null);
+
+    // Reset the corresponding unknownAges parameter in Redux state
+    if (queryParams.includes(unknownAgesField) && onUnknownAgesChange) {
+      onUnknownAgesChange(field, 'include');
+    }
     onClearFacetSection(facet);
   };
 
@@ -87,7 +100,12 @@ const SearchFacetView = _ref => {
   const selectedItems = facetValues && facetValues.filter(item => item.isChecked);
   const displayFacet = _objectSpread({}, facet);
   displayFacet.facetValues = selectedItems;
-  const isActiveFacet = [...selectedItems].length > 0;
+
+  // Check if facet is active based on selected items or unknown ages selection
+  const hasSelectedItems = [...selectedItems].length > 0;
+  const unknownAges = (unknownAgesState === null || unknownAgesState === void 0 ? void 0 : unknownAgesState[facet.datafield]) || 'include';
+  const hasUnknownAgesSelection = unknownAges !== 'include';
+  const isActiveFacet = hasSelectedItems || type === _Types.InputTypes.SLIDER && hasUnknownAgesSelection;
   const limitCheckBoxCount = (facet === null || facet === void 0 ? void 0 : facet.showCheckboxCount) || 5;
   const sortFilters = (0, _Sort.sortBySection)(_objectSpread(_objectSpread({}, facet), {}, {
     sortBy

package/dist/components/inputs/FilterItems.js

@@ -19,7 +19,8 @@ const FilterItems = _ref => {
   let {
     facet,
     queryParams,
-    sortBy
+    sortBy,
+    timeUnit
   } = _ref;
   const {
     type,
@@ -44,7 +45,8 @@ const FilterItems = _ref => {
       case _Types.InputTypes.SLIDER:
         return /*#__PURE__*/_react.default.createElement(_ReduxSlider.default, {
           facet: facet,
-          queryParams: queryParams
+          queryParams: queryParams,
+          timeUnit: timeUnit
         });
       default:
         return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);

package/dist/components/inputs/slider/InputMinMaxStyle.js

@@ -13,6 +13,14 @@ var _default = () => ({
     background: '#F0F0F0',
     '& input': {
       width: '70px'
+    },
+    '&.Mui-disabled': {
+      color: '#BDBDBD',
+      background: '#F5F5F5',
+      '& input': {
+        color: '#BDBDBD',
+        cursor: 'not-allowed'
+      }
     }
   },
   slider_INPUT_MAX: {
@@ -23,6 +31,14 @@ var _default = () => ({
     background: '#F0F0F0',
     '& input': {
       width: '70px'
+    },
+    '&.Mui-disabled': {
+      color: '#BDBDBD',
+      background: '#F5F5F5',
+      '& input': {
+        color: '#BDBDBD',
+        cursor: 'not-allowed'
+      }
     }
   }
 });

package/dist/components/inputs/slider/InputMinMaxView.js

@@ -18,7 +18,8 @@ function InputMinMaxView(_ref) {
     minLowerBound,
     maxUpperBound,
     onInputChange,
-    type
+    type,
+    disabled = false
   } = _ref;
   const handleInputChange = e => {
     const minMaxRange = [lowerBoundVal, upperBoundVal];
@@ -34,6 +35,7 @@ function InputMinMaxView(_ref) {
     value: vlaue,
     id: "slider_".concat(type),
     className: classes["slider_".concat(type)],
+    disabled: disabled,
     onChange: event => handleInputChange(event),
     inputProps: {
       step: 1,

package/dist/components/inputs/slider/ReduxSlider.js

@@ -10,11 +10,16 @@ var _Actions = require("../../../store/actions/Actions");
 var _SliderView = _interopRequireDefault(require("./SliderView"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const ReduxSlider = props => /*#__PURE__*/_react.default.createElement(_SliderView.default, props);
-const mapStateToProps = state => ({
-  filterState: state.statusReducer.filterState
-});
+const mapStateToProps = state => {
+  var _state$statusReducer;
+  return {
+    filterState: state.statusReducer.filterState,
+    unknownAgesState: (state === null || state === void 0 ? void 0 : (_state$statusReducer = state.statusReducer) === null || _state$statusReducer === void 0 ? void 0 : _state$statusReducer.unknownAgesState) || {}
+  };
+};
 const mapDispatchToProps = dispatch => ({
-  onSliderToggle: slider => dispatch((0, _Actions.toggleSilder)(slider))
+  onSliderToggle: slider => dispatch((0, _Actions.toggleSilder)(slider)),
+  onUnknownAgesChange: (datafield, unknownAges) => dispatch((0, _Actions.unknownAgesChange)(datafield, unknownAges))
 });
 var _default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(ReduxSlider);
 exports.default = _default;

package/dist/components/inputs/slider/SliderStyle.js

@@ -11,6 +11,10 @@ var _default = () => ({
     marginRight: 'Auto',
     paddingRight: '20px'
   },
+  disabledSliderRoot: {
+    opacity: 0.5,
+    pointerEvents: 'none'
+  },
   minValue: {
     fontFamily: 'Nunito',
     fontSize: '15px',
@@ -69,6 +73,25 @@ var _default = () => ({
       background: '#142D64'
     }
   },
+  disabledRail: {
+    borderRadius: 4,
+    height: 6,
+    background: '#E8E8E8'
+  },
+  disabledThumb: {
+    height: 16,
+    width: 16,
+    cursor: 'not-allowed',
+    opacity: 0.4
+  },
+  disabledTrack: {
+    borderRadius: 4,
+    height: 6,
+    opacity: 0.4,
+    '&~&': {
+      background: '#E8E8E8'
+    }
+  },
   upperBound: {
     fontFamily: 'Nunito',
     fontSize: '10px',