@biggive/components 202311211133.0.0 → 202311211301.0.0

package/dist/cjs/biggive-accordion_42.cjs.entry.js

@@ -293,89 +293,33 @@ const BiggiveCampaignCardFilterGrid = class {
     this.locationsPlaceHolderText = 'Select location';
     this.fundingPlaceHolderText = 'Select funding';
     this.categoryFilterSelectionChanged = (value) => {
-      this.selectedFilterCategory = value;
+      this.newSelectedFilterCategory = value;
     };
     this.beneficiarySelectionChanged = (value) => {
-      this.selectedFilterBeneficiary = value;
+      this.newSelectedFilterBeneficiary = value;
     };
     this.locationSelectionChanged = (value) => {
-      this.selectedFilterLocation = value;
+      this.newSelectedFilterLocation = value;
     };
     this.fundingSelectionChanged = (value) => {
-      this.selectedFilterFunding = value;
+      this.newSelectedFilterFunding = value;
     };
     this.sortBySelectionChanged = (value) => {
       this.selectedSortByOption = value;
       this.doSearchAndFilterUpdate.emit(this.getSearchAndFilterObject());
     };
     this.handleApplyFilterButtonClick = () => {
-      var _a, _b;
+      var _a, _b, _c, _d, _e;
+      this.selectedFilterCategory = (_a = this.newSelectedFilterCategory) !== null && _a !== void 0 ? _a : this.selectedFilterCategory;
+      this.selectedFilterBeneficiary = (_b = this.newSelectedFilterBeneficiary) !== null && _b !== void 0 ? _b : this.selectedFilterBeneficiary;
+      this.selectedFilterLocation = (_c = this.newSelectedFilterLocation) !== null && _c !== void 0 ? _c : this.selectedFilterLocation;
+      this.selectedFilterFunding = (_d = this.newSelectedFilterFunding) !== null && _d !== void 0 ? _d : this.selectedFilterFunding;
       const searchAndFilterObj = this.getSearchAndFilterObject();
       this.doSearchAndFilterUpdate.emit(searchAndFilterObj);
-      const filterPopup = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('filter-popup');
+      const filterPopup = (_e = this.el.shadowRoot) === null || _e === void 0 ? void 0 : _e.getElementById('filter-popup');
       if (filterPopup) {
         filterPopup.closeFromOutside();
       }
-      const selectedFilters = (_b = this.el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.selected-filters');
-      if (selectedFilters) {
-        selectedFilters.querySelectorAll('.button').forEach(button => {
-          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' ||
@@ -463,6 +407,35 @@ const BiggiveCampaignCardFilterGrid = class {
       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;
@@ -470,10 +443,18 @@ const BiggiveCampaignCardFilterGrid = class {
   }
   render() {
     var _a;
-    return (index.h("div", { class: 'container space-below-' + this.spaceBelow }, index.h("div", { class: "sleeve" }, index.h("div", { class: "search-wrap" }, index.h("h4", null, this.intro), index.h("div", { class: "field-wrap" }, index.h("div", { class: "input-wrap" }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", class: "icon", viewBox: "0 0 512 512" }, index.h("path", { d: fontawesomeIcons.faMagnifyingGlass.icon[4].toString() })), index.h("input", { type: "text", value: (_a = this.searchText) !== null && _a !== void 0 ? _a : '', class: "input-text", placeholder: this.placeholderText, onInput: this.handleSearchTextChanged, onKeyDown: this.handleEnterPressed })), index.h("biggive-button", { onClick: this.handleSearchButtonPressed, label: this.buttonText }))), index.h("div", { class: "sort-filter-wrap" }, index.h("div", { class: "filter-wrap" }, index.h("biggive-button", { class: "filter", colourScheme: "primary", onClick: this.handleFilterButtonClick, label: "Filter", fullWidth: true, "space-below": "0" }), index.h("biggive-popup", { id: "filter-popup" }, index.h("h4", { class: "space-above-0 space-below-3 text-colour-primary" }, "Filters"), index.h("div", { class: "select-wrapper-1" }, index.h("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" })), index.h("div", { class: "select-wrapper-2" }, index.h("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" })), index.h("div", { class: "select-wrapper-3" }, index.h("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" })), index.h("div", { class: "select-wrapper-4" }, index.h("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" })), index.h("div", { class: "align-right" }, index.h("biggive-button", { label: "Apply filters", onClick: this.handleApplyFilterButtonClick })))), index.h("div", { class: "sort-wrap" }, index.h("biggive-form-field-select", { options: [
+    return (index.h("div", { class: 'container space-below-' + this.spaceBelow }, index.h("div", { class: "sleeve" }, index.h("div", { class: "search-wrap" }, index.h("h4", null, this.intro), index.h("div", { class: "field-wrap" }, index.h("div", { class: "input-wrap" }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", class: "icon", viewBox: "0 0 512 512" }, index.h("path", { d: fontawesomeIcons.faMagnifyingGlass.icon[4].toString() })), index.h("input", { type: "text", value: (_a = this.searchText) !== null && _a !== void 0 ? _a : '', class: "input-text", placeholder: this.placeholderText, onInput: this.handleSearchTextChanged, onKeyDown: this.handleEnterPressed })), index.h("biggive-button", { onClick: this.handleSearchButtonPressed, label: this.buttonText }))), index.h("div", { class: "sort-filter-wrap" }, index.h("div", { class: "filter-wrap" }, index.h("biggive-button", { class: "filter", colourScheme: "primary", onClick: this.handleFilterButtonClick, label: "Filter", fullWidth: true, "space-below": "0" }), index.h("biggive-popup", { id: "filter-popup" }, index.h("h4", { class: "space-above-0 space-below-3 text-colour-primary" }, "Filters"), index.h("div", { class: "select-wrapper-1" }, index.h("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" })), index.h("div", { class: "select-wrapper-2" }, index.h("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" })), index.h("div", { class: "select-wrapper-3" }, index.h("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" })), index.h("div", { class: "select-wrapper-4" }, index.h("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" })), index.h("div", { class: "align-right" }, index.h("biggive-button", { label: "Apply filters", onClick: this.handleApplyFilterButtonClick })))), index.h("div", { class: "sort-wrap" }, index.h("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" }, index.h("biggive-form-field-select-option", { value: "amountRaised", label: "Most raised" }), index.h("biggive-form-field-select-option", { value: "matchFundsRemaining", label: "Match funds remaining" }), (this.searchText || '').length > 0 ? index.h("biggive-form-field-select-option", { value: "Relevance", label: "Relevance" }) : null))), index.h("div", { class: "selected-filter-wrap" }, index.h("div", { class: "selected-filters" }), index.h("div", { class: "clear-all" }, index.h("a", { onClick: this.handleClearAll }, "Clear all"))), index.h("div", { class: "campaign-grid" }, index.h("slot", { name: "campaign-grid" })))));
+      ], prompt: null, "select-style": "underlined", placeholder: this.sortByPlaceholderText, selectedLabel: this.selectedSortByOption, selectionChanged: this.sortBySelectionChanged, id: "sort-by" }, index.h("biggive-form-field-select-option", { value: "amountRaised", label: "Most raised" }), index.h("biggive-form-field-select-option", { value: "matchFundsRemaining", label: "Match funds remaining" }), (this.searchText || '').length > 0 ? index.h("biggive-form-field-select-option", { value: "Relevance", label: "Relevance" }) : null))), index.h("div", { class: "selected-filter-wrap" }, index.h("div", { class: "selected-filters" }, this.selectedFilterCategory && (index.h("span", { class: "button", onClick: () => {
+        this.removeFilter('categories');
+      } }, this.selectedFilterCategory)), this.selectedFilterBeneficiary && (index.h("span", { class: "button", onClick: () => {
+        this.removeFilter('beneficiaries');
+      } }, this.selectedFilterBeneficiary)), this.selectedFilterLocation && (index.h("span", { class: "button", onClick: () => {
+        this.removeFilter('locations');
+      } }, this.selectedFilterLocation)), this.selectedFilterFunding && (index.h("span", { class: "button", onClick: () => {
+        this.removeFilter('funding');
+      } }, this.selectedFilterFunding))), index.h("div", { class: "clear-all" }, index.h("a", { onClick: this.handleClearAll }, "Clear all"))), index.h("div", { class: "campaign-grid" }, index.h("slot", { name: "campaign-grid" })))));
   }
   optionsToArray(options) {
     if (typeof options === 'string') {

package/dist/collection/components/biggive-campaign-card-filter-grid/biggive-campaign-card-filter-grid.js

@@ -8,89 +8,33 @@ export class BiggiveCampaignCardFilterGrid {
     this.locationsPlaceHolderText = 'Select location';
     this.fundingPlaceHolderText = 'Select funding';
     this.categoryFilterSelectionChanged = (value) => {
-      this.selectedFilterCategory = value;
+      this.newSelectedFilterCategory = value;
     };
     this.beneficiarySelectionChanged = (value) => {
-      this.selectedFilterBeneficiary = value;
+      this.newSelectedFilterBeneficiary = value;
     };
     this.locationSelectionChanged = (value) => {
-      this.selectedFilterLocation = value;
+      this.newSelectedFilterLocation = value;
     };
     this.fundingSelectionChanged = (value) => {
-      this.selectedFilterFunding = value;
+      this.newSelectedFilterFunding = value;
     };
     this.sortBySelectionChanged = (value) => {
       this.selectedSortByOption = value;
       this.doSearchAndFilterUpdate.emit(this.getSearchAndFilterObject());
     };
     this.handleApplyFilterButtonClick = () => {
-      var _a, _b;
+      var _a, _b, _c, _d, _e;
+      this.selectedFilterCategory = (_a = this.newSelectedFilterCategory) !== null && _a !== void 0 ? _a : this.selectedFilterCategory;
+      this.selectedFilterBeneficiary = (_b = this.newSelectedFilterBeneficiary) !== null && _b !== void 0 ? _b : this.selectedFilterBeneficiary;
+      this.selectedFilterLocation = (_c = this.newSelectedFilterLocation) !== null && _c !== void 0 ? _c : this.selectedFilterLocation;
+      this.selectedFilterFunding = (_d = this.newSelectedFilterFunding) !== null && _d !== void 0 ? _d : this.selectedFilterFunding;
       const searchAndFilterObj = this.getSearchAndFilterObject();
       this.doSearchAndFilterUpdate.emit(searchAndFilterObj);
-      const filterPopup = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('filter-popup');
+      const filterPopup = (_e = this.el.shadowRoot) === null || _e === void 0 ? void 0 : _e.getElementById('filter-popup');
       if (filterPopup) {
         filterPopup.closeFromOutside();
       }
-      const selectedFilters = (_b = this.el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.selected-filters');
-      if (selectedFilters) {
-        selectedFilters.querySelectorAll('.button').forEach(button => {
-          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' ||
@@ -178,6 +122,35 @@ export 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;
@@ -185,10 +158,18 @@ export class BiggiveCampaignCardFilterGrid {
   }
   render() {
     var _a;
-    return (h("div", { class: 'container space-below-' + this.spaceBelow }, h("div", { class: "sleeve" }, h("div", { class: "search-wrap" }, h("h4", null, this.intro), h("div", { class: "field-wrap" }, h("div", { class: "input-wrap" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", class: "icon", viewBox: "0 0 512 512" }, h("path", { d: faMagnifyingGlass.icon[4].toString() })), h("input", { type: "text", value: (_a = this.searchText) !== null && _a !== void 0 ? _a : '', class: "input-text", placeholder: this.placeholderText, onInput: this.handleSearchTextChanged, onKeyDown: this.handleEnterPressed })), h("biggive-button", { onClick: this.handleSearchButtonPressed, label: this.buttonText }))), h("div", { class: "sort-filter-wrap" }, h("div", { class: "filter-wrap" }, h("biggive-button", { class: "filter", colourScheme: "primary", onClick: this.handleFilterButtonClick, label: "Filter", fullWidth: true, "space-below": "0" }), h("biggive-popup", { id: "filter-popup" }, h("h4", { class: "space-above-0 space-below-3 text-colour-primary" }, "Filters"), h("div", { class: "select-wrapper-1" }, h("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" })), h("div", { class: "select-wrapper-2" }, h("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" })), h("div", { class: "select-wrapper-3" }, h("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" })), h("div", { class: "select-wrapper-4" }, h("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" })), h("div", { class: "align-right" }, h("biggive-button", { label: "Apply filters", onClick: this.handleApplyFilterButtonClick })))), h("div", { class: "sort-wrap" }, h("biggive-form-field-select", { options: [
+    return (h("div", { class: 'container space-below-' + this.spaceBelow }, h("div", { class: "sleeve" }, h("div", { class: "search-wrap" }, h("h4", null, this.intro), h("div", { class: "field-wrap" }, h("div", { class: "input-wrap" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", class: "icon", viewBox: "0 0 512 512" }, h("path", { d: faMagnifyingGlass.icon[4].toString() })), h("input", { type: "text", value: (_a = this.searchText) !== null && _a !== void 0 ? _a : '', class: "input-text", placeholder: this.placeholderText, onInput: this.handleSearchTextChanged, onKeyDown: this.handleEnterPressed })), h("biggive-button", { onClick: this.handleSearchButtonPressed, label: this.buttonText }))), h("div", { class: "sort-filter-wrap" }, h("div", { class: "filter-wrap" }, h("biggive-button", { class: "filter", colourScheme: "primary", onClick: this.handleFilterButtonClick, label: "Filter", fullWidth: true, "space-below": "0" }), h("biggive-popup", { id: "filter-popup" }, h("h4", { class: "space-above-0 space-below-3 text-colour-primary" }, "Filters"), h("div", { class: "select-wrapper-1" }, h("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" })), h("div", { class: "select-wrapper-2" }, h("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" })), h("div", { class: "select-wrapper-3" }, h("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" })), h("div", { class: "select-wrapper-4" }, h("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" })), h("div", { class: "align-right" }, h("biggive-button", { label: "Apply filters", onClick: this.handleApplyFilterButtonClick })))), h("div", { class: "sort-wrap" }, h("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" }, h("biggive-form-field-select-option", { value: "amountRaised", label: "Most raised" }), h("biggive-form-field-select-option", { value: "matchFundsRemaining", label: "Match funds remaining" }), (this.searchText || '').length > 0 ? h("biggive-form-field-select-option", { value: "Relevance", label: "Relevance" }) : null))), h("div", { class: "selected-filter-wrap" }, h("div", { class: "selected-filters" }), h("div", { class: "clear-all" }, h("a", { onClick: this.handleClearAll }, "Clear all"))), h("div", { class: "campaign-grid" }, h("slot", { name: "campaign-grid" })))));
+      ], prompt: null, "select-style": "underlined", placeholder: this.sortByPlaceholderText, selectedLabel: this.selectedSortByOption, selectionChanged: this.sortBySelectionChanged, id: "sort-by" }, h("biggive-form-field-select-option", { value: "amountRaised", label: "Most raised" }), h("biggive-form-field-select-option", { value: "matchFundsRemaining", label: "Match funds remaining" }), (this.searchText || '').length > 0 ? h("biggive-form-field-select-option", { value: "Relevance", label: "Relevance" }) : null))), h("div", { class: "selected-filter-wrap" }, h("div", { class: "selected-filters" }, this.selectedFilterCategory && (h("span", { class: "button", onClick: () => {
+        this.removeFilter('categories');
+      } }, this.selectedFilterCategory)), this.selectedFilterBeneficiary && (h("span", { class: "button", onClick: () => {
+        this.removeFilter('beneficiaries');
+      } }, this.selectedFilterBeneficiary)), this.selectedFilterLocation && (h("span", { class: "button", onClick: () => {
+        this.removeFilter('locations');
+      } }, this.selectedFilterLocation)), this.selectedFilterFunding && (h("span", { class: "button", onClick: () => {
+        this.removeFilter('funding');
+      } }, this.selectedFilterFunding))), h("div", { class: "clear-all" }, h("a", { onClick: this.handleClearAll }, "Clear all"))), h("div", { class: "campaign-grid" }, h("slot", { name: "campaign-grid" })))));
   }
   optionsToArray(options) {
     if (typeof options === 'string') {

package/dist/components/biggive-campaign-card-filter-grid.js

@@ -18,89 +18,33 @@ const BiggiveCampaignCardFilterGrid$1 = /*@__PURE__*/ proxyCustomElement(class e
     this.locationsPlaceHolderText = 'Select location';
     this.fundingPlaceHolderText = 'Select funding';
     this.categoryFilterSelectionChanged = (value) => {
-      this.selectedFilterCategory = value;
+      this.newSelectedFilterCategory = value;
     };
     this.beneficiarySelectionChanged = (value) => {
-      this.selectedFilterBeneficiary = value;
+      this.newSelectedFilterBeneficiary = value;
     };
     this.locationSelectionChanged = (value) => {
-      this.selectedFilterLocation = value;
+      this.newSelectedFilterLocation = value;
     };
     this.fundingSelectionChanged = (value) => {
-      this.selectedFilterFunding = value;
+      this.newSelectedFilterFunding = value;
     };
     this.sortBySelectionChanged = (value) => {
       this.selectedSortByOption = value;
       this.doSearchAndFilterUpdate.emit(this.getSearchAndFilterObject());
     };
     this.handleApplyFilterButtonClick = () => {
-      var _a, _b;
+      var _a, _b, _c, _d, _e;
+      this.selectedFilterCategory = (_a = this.newSelectedFilterCategory) !== null && _a !== void 0 ? _a : this.selectedFilterCategory;
+      this.selectedFilterBeneficiary = (_b = this.newSelectedFilterBeneficiary) !== null && _b !== void 0 ? _b : this.selectedFilterBeneficiary;
+      this.selectedFilterLocation = (_c = this.newSelectedFilterLocation) !== null && _c !== void 0 ? _c : this.selectedFilterLocation;
+      this.selectedFilterFunding = (_d = this.newSelectedFilterFunding) !== null && _d !== void 0 ? _d : this.selectedFilterFunding;
       const searchAndFilterObj = this.getSearchAndFilterObject();
       this.doSearchAndFilterUpdate.emit(searchAndFilterObj);
-      const filterPopup = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('filter-popup');
+      const filterPopup = (_e = this.el.shadowRoot) === null || _e === void 0 ? void 0 : _e.getElementById('filter-popup');
       if (filterPopup) {
         filterPopup.closeFromOutside();
       }
-      const selectedFilters = (_b = this.el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.selected-filters');
-      if (selectedFilters) {
-        selectedFilters.querySelectorAll('.button').forEach(button => {
-          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' ||
@@ -188,6 +132,35 @@ const BiggiveCampaignCardFilterGrid$1 = /*@__PURE__*/ proxyCustomElement(class e
       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;
@@ -195,10 +168,18 @@ const BiggiveCampaignCardFilterGrid$1 = /*@__PURE__*/ proxyCustomElement(class e
   }
   render() {
     var _a;
-    return (h("div", { class: 'container space-below-' + this.spaceBelow }, h("div", { class: "sleeve" }, h("div", { class: "search-wrap" }, h("h4", null, this.intro), h("div", { class: "field-wrap" }, h("div", { class: "input-wrap" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", class: "icon", viewBox: "0 0 512 512" }, h("path", { d: faMagnifyingGlass.icon[4].toString() })), h("input", { type: "text", value: (_a = this.searchText) !== null && _a !== void 0 ? _a : '', class: "input-text", placeholder: this.placeholderText, onInput: this.handleSearchTextChanged, onKeyDown: this.handleEnterPressed })), h("biggive-button", { onClick: this.handleSearchButtonPressed, label: this.buttonText }))), h("div", { class: "sort-filter-wrap" }, h("div", { class: "filter-wrap" }, h("biggive-button", { class: "filter", colourScheme: "primary", onClick: this.handleFilterButtonClick, label: "Filter", fullWidth: true, "space-below": "0" }), h("biggive-popup", { id: "filter-popup" }, h("h4", { class: "space-above-0 space-below-3 text-colour-primary" }, "Filters"), h("div", { class: "select-wrapper-1" }, h("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" })), h("div", { class: "select-wrapper-2" }, h("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" })), h("div", { class: "select-wrapper-3" }, h("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" })), h("div", { class: "select-wrapper-4" }, h("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" })), h("div", { class: "align-right" }, h("biggive-button", { label: "Apply filters", onClick: this.handleApplyFilterButtonClick })))), h("div", { class: "sort-wrap" }, h("biggive-form-field-select", { options: [
+    return (h("div", { class: 'container space-below-' + this.spaceBelow }, h("div", { class: "sleeve" }, h("div", { class: "search-wrap" }, h("h4", null, this.intro), h("div", { class: "field-wrap" }, h("div", { class: "input-wrap" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", class: "icon", viewBox: "0 0 512 512" }, h("path", { d: faMagnifyingGlass.icon[4].toString() })), h("input", { type: "text", value: (_a = this.searchText) !== null && _a !== void 0 ? _a : '', class: "input-text", placeholder: this.placeholderText, onInput: this.handleSearchTextChanged, onKeyDown: this.handleEnterPressed })), h("biggive-button", { onClick: this.handleSearchButtonPressed, label: this.buttonText }))), h("div", { class: "sort-filter-wrap" }, h("div", { class: "filter-wrap" }, h("biggive-button", { class: "filter", colourScheme: "primary", onClick: this.handleFilterButtonClick, label: "Filter", fullWidth: true, "space-below": "0" }), h("biggive-popup", { id: "filter-popup" }, h("h4", { class: "space-above-0 space-below-3 text-colour-primary" }, "Filters"), h("div", { class: "select-wrapper-1" }, h("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" })), h("div", { class: "select-wrapper-2" }, h("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" })), h("div", { class: "select-wrapper-3" }, h("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" })), h("div", { class: "select-wrapper-4" }, h("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" })), h("div", { class: "align-right" }, h("biggive-button", { label: "Apply filters", onClick: this.handleApplyFilterButtonClick })))), h("div", { class: "sort-wrap" }, h("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" }, h("biggive-form-field-select-option", { value: "amountRaised", label: "Most raised" }), h("biggive-form-field-select-option", { value: "matchFundsRemaining", label: "Match funds remaining" }), (this.searchText || '').length > 0 ? h("biggive-form-field-select-option", { value: "Relevance", label: "Relevance" }) : null))), h("div", { class: "selected-filter-wrap" }, h("div", { class: "selected-filters" }), h("div", { class: "clear-all" }, h("a", { onClick: this.handleClearAll }, "Clear all"))), h("div", { class: "campaign-grid" }, h("slot", { name: "campaign-grid" })))));
+      ], prompt: null, "select-style": "underlined", placeholder: this.sortByPlaceholderText, selectedLabel: this.selectedSortByOption, selectionChanged: this.sortBySelectionChanged, id: "sort-by" }, h("biggive-form-field-select-option", { value: "amountRaised", label: "Most raised" }), h("biggive-form-field-select-option", { value: "matchFundsRemaining", label: "Match funds remaining" }), (this.searchText || '').length > 0 ? h("biggive-form-field-select-option", { value: "Relevance", label: "Relevance" }) : null))), h("div", { class: "selected-filter-wrap" }, h("div", { class: "selected-filters" }, this.selectedFilterCategory && (h("span", { class: "button", onClick: () => {
+        this.removeFilter('categories');
+      } }, this.selectedFilterCategory)), this.selectedFilterBeneficiary && (h("span", { class: "button", onClick: () => {
+        this.removeFilter('beneficiaries');
+      } }, this.selectedFilterBeneficiary)), this.selectedFilterLocation && (h("span", { class: "button", onClick: () => {
+        this.removeFilter('locations');
+      } }, this.selectedFilterLocation)), this.selectedFilterFunding && (h("span", { class: "button", onClick: () => {
+        this.removeFilter('funding');
+      } }, this.selectedFilterFunding))), h("div", { class: "clear-all" }, h("a", { onClick: this.handleClearAll }, "Clear all"))), h("div", { class: "campaign-grid" }, h("slot", { name: "campaign-grid" })))));
   }
   optionsToArray(options) {
     if (typeof options === 'string') {