@biggive/components 202311201334.0.0 → 202311211120.0.0

package/hydrate/index.js

@@ -6821,60 +6821,6 @@ 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' ||
@@ -6962,6 +6908,35 @@ 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;
@@ -6969,10 +6944,18 @@ 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, 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: [
+    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: [
         { 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" }), 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" }, 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" })))));
   }
   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": "202311201334.0.0",
+  "version": "202311211120.0.0",
   "description": "Big Give Components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",