@biggive/components 1.0.175 → 1.0.176

package/hydrate/index.js

@@ -6614,6 +6614,10 @@ class BiggiveCampaignCardFilterGrid {
     registerInstance(this, hostRef);
     this.doSearchAndFilterUpdate = createEvent(this, "doSearchAndFilterUpdate", 7);
     this.sortByPlaceholderText = 'Sort by';
+    this.beneficiariesPlaceHolderText = 'Beneficiary';
+    this.categoriesPlaceHolderText = 'Category';
+    this.locationsPlaceHolderText = 'Location';
+    this.fundingPlaceHolderText = 'Funding';
     this.handleApplyFilterButtonClick = () => {
       const searchAndFilterObj = this.getSearchAndFilterObject();
       this.doSearchAndFilterUpdate.emit(searchAndFilterObj);
@@ -6648,6 +6652,11 @@ class BiggiveCampaignCardFilterGrid {
       this.selectedFilterCategory = null;
       this.selectedFilterFunding = null;
       this.selectedFilterLocation = null;
+      // Clear <biggive-form-field-select> components' internal selectedValue and selectedLabel. DON-654.
+      ['sort-by', 'categories', 'beneficiaries', 'locations', 'funding'].forEach(id => {
+        this.el.shadowRoot.getElementById(id).selectedValue = null;
+        this.el.shadowRoot.getElementById(id).selectedLabel = null;
+      });
       // Emit the doSearchAndFilterUpdate event with null values. DON-654
       this.doSearchAndFilterUpdate.emit({
         searchText: null,
@@ -6667,12 +6676,12 @@ class BiggiveCampaignCardFilterGrid {
     this.beneficiaryOptions = [];
     this.locationOptions = [];
     this.fundingOptions = [];
-    this.filtersApplied = undefined;
     this.selectedSortByOption = null;
     this.selectedFilterCategory = null;
     this.selectedFilterBeneficiary = null;
     this.selectedFilterLocation = null;
     this.selectedFilterFunding = null;
+    this.filtersApplied = undefined;
   }
   getSearchAndFilterObject() {
     const event = {
@@ -6686,11 +6695,7 @@ class BiggiveCampaignCardFilterGrid {
     return event;
   }
   doOptionSelectCompletedHandler(event) {
-    this.selectedSortByOption = this.el.shadowRoot.getElementById('sort-by').selectedValue;
-    this.selectedFilterCategory = this.el.shadowRoot.getElementById('categories').selectedValue;
-    this.selectedFilterBeneficiary = this.el.shadowRoot.getElementById('beneficiaries').selectedValue;
-    this.selectedFilterLocation = this.el.shadowRoot.getElementById('locations').selectedValue;
-    this.selectedFilterFunding = this.el.shadowRoot.getElementById('funding').selectedValue;
+    const nameOfUpdatedDropdown = event.detail.placeholder;
     // If this method was trigerred by the selection of a 'Sort by' dropdown option, then
     // emit an event to search, but do NOT emit an event for example when filter options
     // are selected, until the 'Apply filters' button is pressed which is handled separately
@@ -6699,10 +6704,23 @@ class BiggiveCampaignCardFilterGrid {
     // `<biggive-form-field-select placeholder="Sort by" id="sort-by" onDoSelectChange={this.someHandleMethod}>`
     // but the problem with that is that `someHandleMethod` gets called first and then this
     // method gets called, leading to two calls and more risk for error. DON-570.
-    if (event.detail.placeholder === this.sortByPlaceholderText) {
-      console.log('emitting event:');
-      console.log(this.getSearchAndFilterObject());
-      this.doSearchAndFilterUpdate.emit(this.getSearchAndFilterObject());
+    switch (nameOfUpdatedDropdown) {
+      case this.sortByPlaceholderText:
+        this.selectedSortByOption = event.detail.value;
+        this.doSearchAndFilterUpdate.emit(this.getSearchAndFilterObject());
+        break;
+      case this.beneficiariesPlaceHolderText:
+        this.selectedFilterBeneficiary = event.detail.value;
+        break;
+      case this.categoriesPlaceHolderText:
+        this.selectedFilterCategory = event.detail.value;
+        break;
+      case this.fundingPlaceHolderText:
+        this.selectedFilterFunding = event.detail.value;
+        break;
+      case this.locationsPlaceHolderText:
+        this.selectedFilterLocation = event.detail.value;
+        break;
     }
   }
   componentWillRender() {
@@ -6710,15 +6728,15 @@ class BiggiveCampaignCardFilterGrid {
       this.selectedFilterCategory !== null || this.selectedFilterBeneficiary !== null || this.selectedFilterFunding !== null || this.selectedFilterLocation !== null;
   }
   render() {
-    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: this.searchText, 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: "clear-all" }, hAsync("svg", { xmlns: "http://www.w3.org/2000/svg", class: "icon icon-clear-all", viewBox: "0 0 512 512" }, hAsync("path", { d: faFilterSlash.icon[4].toString() })), hAsync("a", { onClick: this.handleClearAll }, "Clear all")), hAsync("div", { class: "sort-wrap" }, hAsync("biggive-form-field-select", { placeholder: "Sort by", selectedLabel: this.selectedSortByOption, 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" }), hAsync("biggive-form-field-select-option", { value: "Relevance", label: "Relevance" }))), hAsync("div", { class: "filter-wrap" }, hAsync("biggive-button", { class: "filter", colourScheme: this.filtersApplied ? 'secondary' : 'primary', onClick: this.handleFilterButtonClick, label: "Filters", fullWidth: true, "space-below": "0" }), hAsync("biggive-popup", { id: "filter-popup" }, hAsync("h4", { class: "space-above-0 space-below-3 colour-primary" }, "Filters"), hAsync("biggive-form-field-select", { placeholder: "Category", selectedLabel: this.selectedFilterCategory, id: "categories", "space-below": "2" }, this.categoryOptions.length === 0
+    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: this.searchText, 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: "clear-all" }, hAsync("svg", { xmlns: "http://www.w3.org/2000/svg", class: "icon icon-clear-all", viewBox: "0 0 512 512" }, hAsync("path", { d: faFilterSlash.icon[4].toString() })), hAsync("a", { onClick: this.handleClearAll }, "Clear all")), hAsync("div", { class: "sort-wrap" }, hAsync("biggive-form-field-select", { placeholder: this.sortByPlaceholderText, selectedLabel: this.selectedSortByOption, 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" }), hAsync("biggive-form-field-select-option", { value: "Relevance", label: "Relevance" }))), hAsync("div", { class: "filter-wrap" }, hAsync("biggive-button", { class: "filter", colourScheme: this.filtersApplied ? 'secondary' : 'primary', onClick: this.handleFilterButtonClick, label: "Filters", fullWidth: true, "space-below": "0" }), hAsync("biggive-popup", { id: "filter-popup" }, hAsync("h4", { class: "space-above-0 space-below-3 colour-primary" }, "Filters"), hAsync("biggive-form-field-select", { placeholder: this.categoriesPlaceHolderText, selectedLabel: this.selectedFilterCategory, id: "categories", "space-below": "2" }, this.categoryOptions.length === 0
       ? undefined
-      : this.categoryOptions.map(option => hAsync("biggive-form-field-select-option", { value: option, label: option }))), hAsync("biggive-form-field-select", { placeholder: "Beneficiary", selectedLabel: this.selectedFilterBeneficiary, id: "beneficiaries", "space-below": "2" }, this.beneficiaryOptions.length === 0
+      : (Array.isArray(this.categoryOptions) ? this.categoryOptions : JSON.parse(this.categoryOptions)).map(option => (hAsync("biggive-form-field-select-option", { value: option, label: option })))), hAsync("biggive-form-field-select", { placeholder: this.beneficiariesPlaceHolderText, selectedLabel: this.selectedFilterBeneficiary, id: "beneficiaries", "space-below": "2" }, this.beneficiaryOptions.length === 0
       ? undefined
-      : this.beneficiaryOptions.map(option => hAsync("biggive-form-field-select-option", { value: option, label: option }))), hAsync("biggive-form-field-select", { placeholder: "Location", selectedLabel: this.selectedFilterLocation, id: "locations", "space-below": "2" }, this.locationOptions.length === 0
+      : (Array.isArray(this.beneficiaryOptions) ? this.beneficiaryOptions : JSON.parse(this.beneficiaryOptions)).map(option => (hAsync("biggive-form-field-select-option", { value: option, label: option })))), hAsync("biggive-form-field-select", { placeholder: this.locationsPlaceHolderText, selectedLabel: this.selectedFilterLocation, id: "locations", "space-below": "2" }, this.locationOptions.length === 0
       ? undefined
-      : this.locationOptions.map(option => hAsync("biggive-form-field-select-option", { value: option, label: option }))), hAsync("biggive-form-field-select", { placeholder: "Funding", selectedLabel: this.selectedFilterFunding, id: "funding", "space-below": "2" }, this.fundingOptions.length === 0
+      : (Array.isArray(this.locationOptions) ? this.locationOptions : JSON.parse(this.locationOptions)).map(option => (hAsync("biggive-form-field-select-option", { value: option, label: option })))), hAsync("biggive-form-field-select", { placeholder: this.fundingPlaceHolderText, selectedLabel: this.selectedFilterFunding, id: "funding", "space-below": "2" }, this.fundingOptions.length === 0
       ? undefined
-      : this.fundingOptions.map(option => hAsync("biggive-form-field-select-option", { value: option, label: option }))), hAsync("div", { class: "align-right" }, hAsync("biggive-button", { label: "Apply filters", onClick: this.handleApplyFilterButtonClick }))))), hAsync("div", { class: "campaign-grid" }, hAsync("slot", { name: "campaign-grid" })))));
+      : (Array.isArray(this.fundingOptions) ? this.fundingOptions : JSON.parse(this.fundingOptions)).map(option => (hAsync("biggive-form-field-select-option", { value: option, label: option })))), hAsync("div", { class: "align-right" }, hAsync("biggive-button", { label: "Apply filters", onClick: this.handleApplyFilterButtonClick }))))), hAsync("div", { class: "campaign-grid" }, hAsync("slot", { name: "campaign-grid" })))));
   }
   get el() { return getElement(this); }
   static get style() { return biggiveCampaignCardFilterGridCss; }
@@ -6731,16 +6749,16 @@ class BiggiveCampaignCardFilterGrid {
       "searchText": [1, "search-text"],
       "placeholderText": [1, "placeholder-text"],
       "buttonText": [1, "button-text"],
-      "categoryOptions": [16],
-      "beneficiaryOptions": [16],
-      "locationOptions": [16],
-      "fundingOptions": [16],
-      "filtersApplied": [4, "filters-applied"],
+      "categoryOptions": [1, "category-options"],
+      "beneficiaryOptions": [1, "beneficiary-options"],
+      "locationOptions": [1, "location-options"],
+      "fundingOptions": [1, "funding-options"],
       "selectedSortByOption": [1, "selected-sort-by-option"],
       "selectedFilterCategory": [1, "selected-filter-category"],
       "selectedFilterBeneficiary": [1, "selected-filter-beneficiary"],
       "selectedFilterLocation": [1, "selected-filter-location"],
-      "selectedFilterFunding": [1, "selected-filter-funding"]
+      "selectedFilterFunding": [1, "selected-filter-funding"],
+      "filtersApplied": [32]
     },
     "$listeners$": [[0, "doSelectChange", "doOptionSelectCompletedHandler"]],
     "$lazyBundleId$": "-",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@biggive/components",
-  "version": "1.0.175",
+  "version": "1.0.176",
   "description": "Big Give Components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",