@biggive/components 202311211130.0.0 → 202311211133.0.0

package/hydrate/index.js

@@ -6821,6 +6821,60 @@ class BiggiveCampaignCardFilterGrid {
           button.remove();
         });
       }
+      let filters = {
+        beneficiaries: searchAndFilterObj.filterBeneficiary,
+        categories: searchAndFilterObj.filterCategory,
+        funding: searchAndFilterObj.filterFunding,
+        locations: searchAndFilterObj.filterLocation,
+      };
+      const keys = Object.keys(filters);
+      for (const filterKey of keys) {
+        // https://stackoverflow.com/a/69757191/2803757
+        const filterValue = filters[filterKey];
+        if (filterValue === null || filterValue.length === 0) {
+          continue;
+        }
+        let button = document.createElement('span');
+        button.classList.add('button');
+        button.dataset.id = filterKey;
+        button.innerText = filterValue;
+        if (selectedFilters) {
+          selectedFilters.appendChild(button);
+        }
+        button.addEventListener('click', () => {
+          var _a;
+          switch (filterKey) {
+            case 'beneficiaries':
+              this.selectedFilterBeneficiary = null;
+              break;
+            case 'categories':
+              this.selectedFilterCategory = null;
+              break;
+            case 'funding':
+              this.selectedFilterFunding = null;
+              break;
+            case 'locations':
+              this.selectedFilterLocation = null;
+              break;
+            default:
+              // This asks the compiler to check that we are in dead code, i.e. we covered all the possible filter keys
+              // above. If we missed one we would get a compile error trying to assign a string to a never.
+              const exhaustiveSwitch = filterKey;
+              console.error(exhaustiveSwitch);
+          }
+          button.remove();
+          this.doSearchAndFilterUpdate.emit(this.getSearchAndFilterObject());
+          if (button.dataset.id === undefined) {
+            return;
+          }
+          const selectEl = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById(button.dataset.id);
+          if (!selectEl) {
+            return;
+          }
+          selectEl.selectedLabel = null;
+          selectEl.selectedValue = null;
+        });
+      }
       this.filtersApplied =
         typeof searchAndFilterObj.filterBeneficiary === 'string' ||
           typeof searchAndFilterObj.filterCategory === 'string' ||
@@ -6908,35 +6962,6 @@ class BiggiveCampaignCardFilterGrid {
       filterLocation: this.selectedFilterLocation,
     };
   }
-  removeFilter(filterKey) {
-    var _a;
-    switch (filterKey) {
-      case 'beneficiaries':
-        this.selectedFilterBeneficiary = null;
-        break;
-      case 'categories':
-        this.selectedFilterCategory = null;
-        break;
-      case 'funding':
-        this.selectedFilterFunding = null;
-        break;
-      case 'locations':
-        this.selectedFilterLocation = null;
-        break;
-      default:
-        // This asks the compiler to check that we are in dead code, i.e. we covered all the possible filter keys
-        // above. If we missed one we would get a compile error trying to assign a string to a never.
-        const exhaustiveSwitch = filterKey;
-        console.error(exhaustiveSwitch);
-    }
-    const selectEl = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById(filterKey);
-    if (!selectEl) {
-      return;
-    }
-    selectEl.selectedLabel = null;
-    selectEl.selectedValue = null;
-    this.doSearchAndFilterUpdate.emit(this.getSearchAndFilterObject());
-  }
   componentWillRender() {
     this.filtersApplied =
       this.selectedFilterCategory !== null || this.selectedFilterBeneficiary !== null || this.selectedFilterFunding !== null || this.selectedFilterLocation !== null;
@@ -6944,18 +6969,10 @@ class BiggiveCampaignCardFilterGrid {
   }
   render() {
     var _a;
-    return (hAsync("div", { class: 'container space-below-' + this.spaceBelow }, hAsync("div", { class: "sleeve" }, hAsync("div", { class: "search-wrap" }, hAsync("h4", null, this.intro), hAsync("div", { class: "field-wrap" }, hAsync("div", { class: "input-wrap" }, hAsync("svg", { xmlns: "http://www.w3.org/2000/svg", class: "icon", viewBox: "0 0 512 512" }, hAsync("path", { d: faMagnifyingGlass.icon[4].toString() })), hAsync("input", { type: "text", value: (_a = this.searchText) !== null && _a !== void 0 ? _a : '', class: "input-text", placeholder: this.placeholderText, onInput: this.handleSearchTextChanged, onKeyDown: this.handleEnterPressed })), hAsync("biggive-button", { onClick: this.handleSearchButtonPressed, label: this.buttonText }))), hAsync("div", { class: "sort-filter-wrap" }, hAsync("div", { class: "filter-wrap" }, hAsync("biggive-button", { class: "filter", colourScheme: "primary", onClick: this.handleFilterButtonClick, label: "Filter", fullWidth: true, "space-below": "0" }), hAsync("biggive-popup", { id: "filter-popup" }, hAsync("h4", { class: "space-above-0 space-below-3 text-colour-primary" }, "Filters"), hAsync("div", { class: "select-wrapper-1" }, hAsync("biggive-form-field-select", { backgroundColour: "white", prompt: "Category", placeholder: this.categoriesPlaceHolderText, selectedLabel: this.selectedFilterCategory, selectedValue: this.selectedFilterCategory, options: this.optionsToArray(this.categoryOptions || []), selectionChanged: this.categoryFilterSelectionChanged, id: "categories", "space-below": "2" })), hAsync("div", { class: "select-wrapper-2" }, hAsync("biggive-form-field-select", { backgroundColour: "white", prompt: "Beneficiary", placeholder: this.beneficiariesPlaceHolderText, selectedLabel: this.selectedFilterBeneficiary, selectedValue: this.selectedFilterBeneficiary, options: this.optionsToArray(this.beneficiaryOptions || []), selectionChanged: this.beneficiarySelectionChanged, id: "beneficiaries", "space-below": "2" })), hAsync("div", { class: "select-wrapper-3" }, hAsync("biggive-form-field-select", { backgroundColour: "white", prompt: "Location", placeholder: this.locationsPlaceHolderText, selectedLabel: this.selectedFilterLocation, selectedValue: this.selectedFilterLocation, options: this.optionsToArray(this.locationOptions || []), selectionChanged: this.locationSelectionChanged, id: "locations", "space-below": "2" })), hAsync("div", { class: "select-wrapper-4" }, hAsync("biggive-form-field-select", { backgroundColour: "white", prompt: "Funding", placeholder: this.fundingPlaceHolderText, selectedLabel: this.selectedFilterFunding, selectedValue: this.selectedFilterFunding, options: this.optionsToArray(this.fundingOptions || []), selectionChanged: this.fundingSelectionChanged, id: "funding", "space-below": "2" })), hAsync("div", { class: "align-right" }, hAsync("biggive-button", { label: "Apply filters", onClick: this.handleApplyFilterButtonClick })))), hAsync("div", { class: "sort-wrap" }, hAsync("biggive-form-field-select", { options: [
+    return (hAsync("div", { class: 'container space-below-' + this.spaceBelow }, hAsync("div", { class: "sleeve" }, hAsync("div", { class: "search-wrap" }, hAsync("h4", null, this.intro), hAsync("div", { class: "field-wrap" }, hAsync("div", { class: "input-wrap" }, hAsync("svg", { xmlns: "http://www.w3.org/2000/svg", class: "icon", viewBox: "0 0 512 512" }, hAsync("path", { d: faMagnifyingGlass.icon[4].toString() })), hAsync("input", { type: "text", value: (_a = this.searchText) !== null && _a !== void 0 ? _a : '', class: "input-text", placeholder: this.placeholderText, onInput: this.handleSearchTextChanged, onKeyDown: this.handleEnterPressed })), hAsync("biggive-button", { onClick: this.handleSearchButtonPressed, label: this.buttonText }))), hAsync("div", { class: "sort-filter-wrap" }, hAsync("div", { class: "filter-wrap" }, hAsync("biggive-button", { class: "filter", colourScheme: "primary", onClick: this.handleFilterButtonClick, label: "Filter", fullWidth: true, "space-below": "0" }), hAsync("biggive-popup", { id: "filter-popup" }, hAsync("h4", { class: "space-above-0 space-below-3 text-colour-primary" }, "Filters"), hAsync("div", { class: "select-wrapper-1" }, hAsync("biggive-form-field-select", { backgroundColour: "white", prompt: "Category", placeholder: this.categoriesPlaceHolderText, selectedLabel: this.selectedFilterCategory, options: this.optionsToArray(this.categoryOptions || []), selectionChanged: this.categoryFilterSelectionChanged, id: "categories", "space-below": "2" })), hAsync("div", { class: "select-wrapper-2" }, hAsync("biggive-form-field-select", { backgroundColour: "white", prompt: "Beneficiary", placeholder: this.beneficiariesPlaceHolderText, selectedLabel: this.selectedFilterBeneficiary, options: this.optionsToArray(this.beneficiaryOptions || []), selectionChanged: this.beneficiarySelectionChanged, id: "beneficiaries", "space-below": "2" })), hAsync("div", { class: "select-wrapper-3" }, hAsync("biggive-form-field-select", { backgroundColour: "white", prompt: "Location", placeholder: this.locationsPlaceHolderText, selectedLabel: this.selectedFilterLocation, options: this.optionsToArray(this.locationOptions || []), selectionChanged: this.locationSelectionChanged, id: "locations", "space-below": "2" })), hAsync("div", { class: "select-wrapper-4" }, hAsync("biggive-form-field-select", { backgroundColour: "white", prompt: "Funding", placeholder: this.fundingPlaceHolderText, selectedLabel: this.selectedFilterFunding, options: this.optionsToArray(this.fundingOptions || []), selectionChanged: this.fundingSelectionChanged, id: "funding", "space-below": "2" })), hAsync("div", { class: "align-right" }, hAsync("biggive-button", { label: "Apply filters", onClick: this.handleApplyFilterButtonClick })))), hAsync("div", { class: "sort-wrap" }, hAsync("biggive-form-field-select", { options: [
         { value: 'amountRaised', label: 'Most raised' },
         { value: 'matchFundsRemaining', label: 'Match funds remaining' },
-      ], prompt: null, "select-style": "underlined", placeholder: this.sortByPlaceholderText, selectedLabel: this.selectedSortByOption, selectionChanged: this.sortBySelectionChanged, id: "sort-by" }, hAsync("biggive-form-field-select-option", { value: "amountRaised", label: "Most raised" }), hAsync("biggive-form-field-select-option", { value: "matchFundsRemaining", label: "Match funds remaining" }), (this.searchText || '').length > 0 ? hAsync("biggive-form-field-select-option", { value: "Relevance", label: "Relevance" }) : null))), hAsync("div", { class: "selected-filter-wrap" }, hAsync("div", { class: "selected-filters" }, this.selectedFilterCategory && (hAsync("span", { class: "button", onClick: () => {
-        this.removeFilter('categories');
-      } }, this.selectedFilterCategory)), this.selectedFilterBeneficiary && (hAsync("span", { class: "button", onClick: () => {
-        this.removeFilter('beneficiaries');
-      } }, this.selectedFilterBeneficiary)), this.selectedFilterLocation && (hAsync("span", { class: "button", onClick: () => {
-        this.removeFilter('locations');
-      } }, this.selectedFilterLocation)), this.selectedFilterFunding && (hAsync("span", { class: "button", onClick: () => {
-        this.removeFilter('funding');
-      } }, this.selectedFilterFunding))), hAsync("div", { class: "clear-all" }, hAsync("a", { onClick: this.handleClearAll }, "Clear all"))), hAsync("div", { class: "campaign-grid" }, hAsync("slot", { name: "campaign-grid" })))));
+      ], prompt: null, "select-style": "underlined", placeholder: this.sortByPlaceholderText, selectedLabel: this.selectedSortByOption, selectionChanged: this.sortBySelectionChanged, id: "sort-by" }, hAsync("biggive-form-field-select-option", { value: "amountRaised", label: "Most raised" }), hAsync("biggive-form-field-select-option", { value: "matchFundsRemaining", label: "Match funds remaining" }), (this.searchText || '').length > 0 ? hAsync("biggive-form-field-select-option", { value: "Relevance", label: "Relevance" }) : null))), hAsync("div", { class: "selected-filter-wrap" }, hAsync("div", { class: "selected-filters" }), hAsync("div", { class: "clear-all" }, hAsync("a", { onClick: this.handleClearAll }, "Clear all"))), hAsync("div", { class: "campaign-grid" }, hAsync("slot", { name: "campaign-grid" })))));
   }
   optionsToArray(options) {
     if (typeof options === 'string') {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@biggive/components",
   "_comment": "Version number below is automatically replaced during CircleCI build.",
-  "version": "202311211130.0.0",
+  "version": "202311211133.0.0",
   "description": "Big Give Components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",