@bento-core/query-bar 1.0.1-ccdihub.18 → 1.0.1-ccdihub.20

package/dist/components/SliderFilter.js

@@ -17,18 +17,49 @@ var _default = _ref => {
   } = _ref;
   const {
     items,
-    section
+    section,
+    unknownAges
   } = data;
+
+  // Determine the display logic based on unknownAges selection
+  const getDisplayContent = () => {
+    const baseLabel = data.label;
+    if (unknownAges === 'only') {
+      // Only: Show base label with unknown ages only, no range
+      return {
+        label: "".concat(baseLabel, " (Unknown Ages Only)"),
+        showRange: false,
+        rangeText: ''
+      };
+    }
+    if (unknownAges === 'exclude') {
+      // Exclude: Show base label with unknown ages excluded, with range only if items exist
+      const hasRange = items && items.length >= 2;
+      return {
+        label: "".concat(baseLabel, " (Unknown Ages Excluded)"),
+        showRange: hasRange,
+        rangeText: hasRange ? "".concat(items[0], " \u2013 ").concat(items[1]) : ''
+      };
+    }
+
+    // Include: Normal display (base label with range)
+    return {
+      label: baseLabel,
+      showRange: true,
+      rangeText: items && items.length >= 2 ? "".concat(items[0], " \u2013 ").concat(items[1]) : ''
+    };
+  };
+  const displayContent = getDisplayContent();
   return /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement("span", null, ' ', index !== 0 ? /*#__PURE__*/_react.default.createElement("span", {
     className: classes.operators
   }, " AND ") : '', /*#__PURE__*/_react.default.createElement("span", {
     className: (0, _clsx.default)(classes.filterName, classes["facetSection".concat(section, "Background")]),
     onClick: () => onSectionClick(data)
-  }, data.label), ' '), /*#__PURE__*/_react.default.createElement("span", null, ' ', /*#__PURE__*/_react.default.createElement("span", {
+  }, displayContent.label), ' '), displayContent.showRange && /*#__PURE__*/_react.default.createElement("span", null, ' ', /*#__PURE__*/_react.default.createElement("span", {
     className: classes.operators
   }, "IS BETWEEN", ' '), /*#__PURE__*/_react.default.createElement("span", {
     className: (0, _clsx.default)(classes.filterCheckboxes, classes["facetSection".concat(section)]),
     onClick: () => onItemClick(data, items[0])
-  }, "".concat(items[0], " \u2013 ").concat(items[1]))));
+  }, displayContent.rangeText)));
 };
 exports.default = _default;

package/dist/generators/QueryBarGenerator.js

@@ -81,7 +81,7 @@ const QueryBarGenerator = function QueryBarGenerator() {
         return _objectSpread(_objectSpread({}, facet), {}, {
           items: itemKeys
         });
-      }).filter(facet => facet.items.length > 0);
+      }).filter(facet => facet.items.length > 0 || facet.unknownAges && facet.unknownAges !== 'include');
       if (!hasImportFrom && (mappedInputs.length || autocomplete.length || upload.length) <= 0) {
         return null;
       }

package/dist/generators/styles.js

@@ -9,9 +9,8 @@ exports.default = void 0;
  */
 var _default = () => ({
   queryWrapper: {
-    height: '120px',
     backgroundColor: '#f1f1f1',
-    padding: '14px 14px 0px 35px',
+    padding: '5px 15px 15px 15px',
     overflowY: 'auto'
   },
   queryContainer: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bento-core/query-bar",
-  "version": "1.0.1-ccdihub.18",
+  "version": "1.0.1-ccdihub.20",
   "description": "This package provides the Query Bar component that displays the current Facet Search and Local Find filters on the Dashboard/Explore page. It also provides the direct ability to reset all or some of the filters with the click of a button. It is designed to be implemented directly with the:",
   "main": "dist/index.js",
   "scripts": {

package/src/components/SliderFilter.js

@@ -5,7 +5,40 @@ export default ({
   index, data, classes,
   onSectionClick, onItemClick,
 }) => {
-  const { items, section } = data;
+  const { items, section, unknownAges } = data;
+
+  // Determine the display logic based on unknownAges selection
+  const getDisplayContent = () => {
+    const baseLabel = data.label;
+
+    if (unknownAges === 'only') {
+      // Only: Show base label with unknown ages only, no range
+      return {
+        label: `${baseLabel} (Unknown Ages Only)`,
+        showRange: false,
+        rangeText: '',
+      };
+    }
+
+    if (unknownAges === 'exclude') {
+      // Exclude: Show base label with unknown ages excluded, with range only if items exist
+      const hasRange = items && items.length >= 2;
+      return {
+        label: `${baseLabel} (Unknown Ages Excluded)`,
+        showRange: hasRange,
+        rangeText: hasRange ? `${items[0]} – ${items[1]}` : '',
+      };
+    }
+
+    // Include: Normal display (base label with range)
+    return {
+      label: baseLabel,
+      showRange: true,
+      rangeText: items && items.length >= 2 ? `${items[0]} – ${items[1]}` : '',
+    };
+  };
+
+  const displayContent = getDisplayContent();
 
   return (
     <span>
@@ -16,23 +49,25 @@ export default ({
           className={clsx(classes.filterName, classes[`facetSection${section}Background`])}
           onClick={() => onSectionClick(data)}
         >
-          {data.label}
+          {displayContent.label}
         </span>
         {' '}
       </span>
-      <span>
-        {' '}
-        <span className={classes.operators}>
-          IS BETWEEN
+      {displayContent.showRange && (
+        <span>
           {' '}
+          <span className={classes.operators}>
+            IS BETWEEN
+            {' '}
+          </span>
+          <span
+            className={clsx(classes.filterCheckboxes, classes[`facetSection${section}`])}
+            onClick={() => onItemClick(data, items[0])}
+          >
+            {displayContent.rangeText}
+          </span>
         </span>
-        <span
-          className={clsx(classes.filterCheckboxes, classes[`facetSection${section}`])}
-          onClick={() => onItemClick(data, items[0])}
-        >
-          {`${items[0]} – ${items[1]}`}
-        </span>
-      </span>
+      )}
     </span>
   );
 };

package/src/generators/QueryBarGenerator.js

@@ -87,7 +87,7 @@ export const QueryBarGenerator = (uiConfig = DEFAULT_CONFIG) => {
 
           return { ...facet, items: itemKeys };
         })
-        .filter((facet) => facet.items.length > 0);
+        .filter((facet) => facet.items.length > 0 || (facet.unknownAges && facet.unknownAges !== 'include'));
 
       if (!hasImportFrom && (mappedInputs.length || autocomplete.length || upload.length) <= 0) {
         return null;

package/src/generators/styles.js

@@ -3,9 +3,8 @@
  */
 export default () => ({
   queryWrapper: {
-    height: '120px',
     backgroundColor: '#f1f1f1',
-    padding: '14px 14px 0px 35px',
+    padding: '5px 15px 15px 15px',
     overflowY: 'auto',
   },
   queryContainer: {