@biggive/components 1.0.136 → 1.0.138

package/dist/cjs/biggive-back-to-top_26.cjs.entry.js

@@ -128,10 +128,7 @@ const BiggiveCampaignCardFilterGrid = class {
     this.filterBeneficiary = null;
     this.filterLocation = null;
     this.filterFunding = null;
-    this.handleSortByChanged = (event) => {
-      this.sortBy = event.target.value;
-      this.doSearchAndFilterUpdate.emit(this.getSearchAndFilterObject());
-    };
+    this.sortByPlaceholderText = 'Sort by';
     this.handleApplyFilterButtonClick = () => {
       this.doSearchAndFilterUpdate.emit(this.getSearchAndFilterObject());
     };
@@ -169,15 +166,28 @@ const BiggiveCampaignCardFilterGrid = class {
     };
     return event;
   }
-  doOptionSelectCompletedHandler() {
+  doOptionSelectCompletedHandler(event) {
     this.sortBy = this.el.shadowRoot.getElementById('sort-by').selectedValue;
     this.filterCategory = this.el.shadowRoot.getElementById('categories').selectedValue;
     this.filterBeneficiary = this.el.shadowRoot.getElementById('beneficiaries').selectedValue;
     this.filterLocation = this.el.shadowRoot.getElementById('locations').selectedValue;
     this.filterFunding = this.el.shadowRoot.getElementById('funding').selectedValue;
+    // 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
+    // by `handleApplyFilterButtonClick()`.
+    // Additional note -> we could, instead, do this:
+    // `<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());
+    }
   }
   render() {
-    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: index$1.faMagnifyingGlass.icon[4].toString() })), index.h("input", { type: "text", value: this.searchText, 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: "sort-wrap" }, index.h("biggive-form-field-select", { placeholder: "Sort by", id: "sort-by", onDoSelectChange: this.handleSortByChanged }, 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" }))), index.h("div", { class: "filter-wrap" }, index.h("biggive-button", { class: "filter", onClick: this.handleFilterButtonClick, label: "Filters" }), index.h("biggive-popup", { id: "filter-popup" }, index.h("h4", { class: "space-above-0 space-below-3 colour-primary" }, "Filters"), index.h("biggive-form-field-select", { placeholder: "Category", id: "categories", "space-below": "2" }, this.categoryOptions.length === 0
+    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: index$1.faMagnifyingGlass.icon[4].toString() })), index.h("input", { type: "text", value: this.searchText, 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: "sort-wrap" }, index.h("biggive-form-field-select", { placeholder: "Sort by", 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" }))), index.h("div", { class: "filter-wrap" }, index.h("biggive-button", { class: "filter", onClick: this.handleFilterButtonClick, label: "Filters" }), index.h("biggive-popup", { id: "filter-popup" }, index.h("h4", { class: "space-above-0 space-below-3 colour-primary" }, "Filters"), index.h("biggive-form-field-select", { placeholder: "Category", id: "categories", "space-below": "2" }, this.categoryOptions.length === 0
       ? undefined
       : this.categoryOptions.map(option => index.h("biggive-form-field-select-option", { value: option, label: option }))), index.h("biggive-form-field-select", { placeholder: "Beneficiary", id: "beneficiaries", "space-below": "2" }, this.beneficiaryOptions.length === 0
       ? undefined
@@ -254,17 +264,25 @@ const BiggiveFormFieldSelect = class {
   doOptionSelectCompletedHandler(event) {
     this.selectedValue = event.detail.value;
     this.selectedLabel = event.detail.label;
-    this.doSelectChange.emit({ value: this.selectedValue, label: this.selectedLabel });
-    const dropdown = this.el.shadowRoot.querySelector('.dropdown');
-    dropdown.classList.remove('active');
+    this.doSelectChange.emit({ value: this.selectedValue, label: this.selectedLabel, placeholder: this.placeholder });
+    if (this.el.shadowRoot !== null && this.el.shadowRoot !== undefined) {
+      const dropdown = this.el.shadowRoot.querySelector('.dropdown');
+      if (dropdown !== null && dropdown !== undefined) {
+        dropdown.classList.remove('active');
+      }
+    }
   }
   toggleFocus(event) {
-    const dropdown = event.target.parentElement.parentElement;
-    if (dropdown.classList.contains('active')) {
-      dropdown.classList.remove('active');
-    }
-    else {
-      dropdown.classList.add('active');
+    if (event.target) {
+      const dropdown = event.target.parentElement.parentElement;
+      if (dropdown !== null && dropdown !== undefined) {
+        if (dropdown.classList.contains('active')) {
+          dropdown.classList.remove('active');
+        }
+        else {
+          dropdown.classList.add('active');
+        }
+      }
     }
   }
   render() {

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

@@ -8,10 +8,7 @@ export class BiggiveCampaignCardFilterGrid {
     this.filterBeneficiary = null;
     this.filterLocation = null;
     this.filterFunding = null;
-    this.handleSortByChanged = (event) => {
-      this.sortBy = event.target.value;
-      this.doSearchAndFilterUpdate.emit(this.getSearchAndFilterObject());
-    };
+    this.sortByPlaceholderText = 'Sort by';
     this.handleApplyFilterButtonClick = () => {
       this.doSearchAndFilterUpdate.emit(this.getSearchAndFilterObject());
     };
@@ -49,15 +46,28 @@ export class BiggiveCampaignCardFilterGrid {
     };
     return event;
   }
-  doOptionSelectCompletedHandler() {
+  doOptionSelectCompletedHandler(event) {
     this.sortBy = this.el.shadowRoot.getElementById('sort-by').selectedValue;
     this.filterCategory = this.el.shadowRoot.getElementById('categories').selectedValue;
     this.filterBeneficiary = this.el.shadowRoot.getElementById('beneficiaries').selectedValue;
     this.filterLocation = this.el.shadowRoot.getElementById('locations').selectedValue;
     this.filterFunding = this.el.shadowRoot.getElementById('funding').selectedValue;
+    // 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
+    // by `handleApplyFilterButtonClick()`.
+    // Additional note -> we could, instead, do this:
+    // `<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());
+    }
   }
   render() {
-    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: this.searchText, 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: "sort-wrap" }, h("biggive-form-field-select", { placeholder: "Sort by", id: "sort-by", onDoSelectChange: this.handleSortByChanged }, h("biggive-form-field-select-option", { value: "amountRaised", label: "Most raised" }), h("biggive-form-field-select-option", { value: "matchFundsRemaining", label: "Match funds remaining" }))), h("div", { class: "filter-wrap" }, h("biggive-button", { class: "filter", onClick: this.handleFilterButtonClick, label: "Filters" }), h("biggive-popup", { id: "filter-popup" }, h("h4", { class: "space-above-0 space-below-3 colour-primary" }, "Filters"), h("biggive-form-field-select", { placeholder: "Category", id: "categories", "space-below": "2" }, this.categoryOptions.length === 0
+    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: this.searchText, 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: "sort-wrap" }, h("biggive-form-field-select", { placeholder: "Sort by", 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" }))), h("div", { class: "filter-wrap" }, h("biggive-button", { class: "filter", onClick: this.handleFilterButtonClick, label: "Filters" }), h("biggive-popup", { id: "filter-popup" }, h("h4", { class: "space-above-0 space-below-3 colour-primary" }, "Filters"), h("biggive-form-field-select", { placeholder: "Category", id: "categories", "space-below": "2" }, this.categoryOptions.length === 0
       ? undefined
       : this.categoryOptions.map(option => h("biggive-form-field-select-option", { value: option, label: option }))), h("biggive-form-field-select", { placeholder: "Beneficiary", id: "beneficiaries", "space-below": "2" }, this.beneficiaryOptions.length === 0
       ? undefined

package/dist/collection/components/biggive-form-field-select/biggive-form-field-select.js

@@ -9,17 +9,25 @@ export class BiggiveFormFieldSelect {
   doOptionSelectCompletedHandler(event) {
     this.selectedValue = event.detail.value;
     this.selectedLabel = event.detail.label;
-    this.doSelectChange.emit({ value: this.selectedValue, label: this.selectedLabel });
-    const dropdown = this.el.shadowRoot.querySelector('.dropdown');
-    dropdown.classList.remove('active');
+    this.doSelectChange.emit({ value: this.selectedValue, label: this.selectedLabel, placeholder: this.placeholder });
+    if (this.el.shadowRoot !== null && this.el.shadowRoot !== undefined) {
+      const dropdown = this.el.shadowRoot.querySelector('.dropdown');
+      if (dropdown !== null && dropdown !== undefined) {
+        dropdown.classList.remove('active');
+      }
+    }
   }
   toggleFocus(event) {
-    const dropdown = event.target.parentElement.parentElement;
-    if (dropdown.classList.contains('active')) {
-      dropdown.classList.remove('active');
-    }
-    else {
-      dropdown.classList.add('active');
+    if (event.target) {
+      const dropdown = event.target.parentElement.parentElement;
+      if (dropdown !== null && dropdown !== undefined) {
+        if (dropdown.classList.contains('active')) {
+          dropdown.classList.remove('active');
+        }
+        else {
+          dropdown.classList.add('active');
+        }
+      }
     }
   }
   render() {

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

@@ -19,10 +19,7 @@ const BiggiveCampaignCardFilterGrid$1 = /*@__PURE__*/ proxyCustomElement(class e
     this.filterBeneficiary = null;
     this.filterLocation = null;
     this.filterFunding = null;
-    this.handleSortByChanged = (event) => {
-      this.sortBy = event.target.value;
-      this.doSearchAndFilterUpdate.emit(this.getSearchAndFilterObject());
-    };
+    this.sortByPlaceholderText = 'Sort by';
     this.handleApplyFilterButtonClick = () => {
       this.doSearchAndFilterUpdate.emit(this.getSearchAndFilterObject());
     };
@@ -60,15 +57,28 @@ const BiggiveCampaignCardFilterGrid$1 = /*@__PURE__*/ proxyCustomElement(class e
     };
     return event;
   }
-  doOptionSelectCompletedHandler() {
+  doOptionSelectCompletedHandler(event) {
     this.sortBy = this.el.shadowRoot.getElementById('sort-by').selectedValue;
     this.filterCategory = this.el.shadowRoot.getElementById('categories').selectedValue;
     this.filterBeneficiary = this.el.shadowRoot.getElementById('beneficiaries').selectedValue;
     this.filterLocation = this.el.shadowRoot.getElementById('locations').selectedValue;
     this.filterFunding = this.el.shadowRoot.getElementById('funding').selectedValue;
+    // 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
+    // by `handleApplyFilterButtonClick()`.
+    // Additional note -> we could, instead, do this:
+    // `<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());
+    }
   }
   render() {
-    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: this.searchText, 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: "sort-wrap" }, h("biggive-form-field-select", { placeholder: "Sort by", id: "sort-by", onDoSelectChange: this.handleSortByChanged }, h("biggive-form-field-select-option", { value: "amountRaised", label: "Most raised" }), h("biggive-form-field-select-option", { value: "matchFundsRemaining", label: "Match funds remaining" }))), h("div", { class: "filter-wrap" }, h("biggive-button", { class: "filter", onClick: this.handleFilterButtonClick, label: "Filters" }), h("biggive-popup", { id: "filter-popup" }, h("h4", { class: "space-above-0 space-below-3 colour-primary" }, "Filters"), h("biggive-form-field-select", { placeholder: "Category", id: "categories", "space-below": "2" }, this.categoryOptions.length === 0
+    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: this.searchText, 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: "sort-wrap" }, h("biggive-form-field-select", { placeholder: "Sort by", 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" }))), h("div", { class: "filter-wrap" }, h("biggive-button", { class: "filter", onClick: this.handleFilterButtonClick, label: "Filters" }), h("biggive-popup", { id: "filter-popup" }, h("h4", { class: "space-above-0 space-below-3 colour-primary" }, "Filters"), h("biggive-form-field-select", { placeholder: "Category", id: "categories", "space-below": "2" }, this.categoryOptions.length === 0
       ? undefined
       : this.categoryOptions.map(option => h("biggive-form-field-select-option", { value: option, label: option }))), h("biggive-form-field-select", { placeholder: "Beneficiary", id: "beneficiaries", "space-below": "2" }, this.beneficiaryOptions.length === 0
       ? undefined

package/dist/components/biggive-form-field-select2.js

@@ -16,17 +16,25 @@ const BiggiveFormFieldSelect = /*@__PURE__*/ proxyCustomElement(class extends HT
   doOptionSelectCompletedHandler(event) {
     this.selectedValue = event.detail.value;
     this.selectedLabel = event.detail.label;
-    this.doSelectChange.emit({ value: this.selectedValue, label: this.selectedLabel });
-    const dropdown = this.el.shadowRoot.querySelector('.dropdown');
-    dropdown.classList.remove('active');
+    this.doSelectChange.emit({ value: this.selectedValue, label: this.selectedLabel, placeholder: this.placeholder });
+    if (this.el.shadowRoot !== null && this.el.shadowRoot !== undefined) {
+      const dropdown = this.el.shadowRoot.querySelector('.dropdown');
+      if (dropdown !== null && dropdown !== undefined) {
+        dropdown.classList.remove('active');
+      }
+    }
   }
   toggleFocus(event) {
-    const dropdown = event.target.parentElement.parentElement;
-    if (dropdown.classList.contains('active')) {
-      dropdown.classList.remove('active');
-    }
-    else {
-      dropdown.classList.add('active');
+    if (event.target) {
+      const dropdown = event.target.parentElement.parentElement;
+      if (dropdown !== null && dropdown !== undefined) {
+        if (dropdown.classList.contains('active')) {
+          dropdown.classList.remove('active');
+        }
+        else {
+          dropdown.classList.add('active');
+        }
+      }
     }
   }
   render() {

package/dist/esm/biggive-back-to-top_26.entry.js

@@ -124,10 +124,7 @@ const BiggiveCampaignCardFilterGrid = class {
     this.filterBeneficiary = null;
     this.filterLocation = null;
     this.filterFunding = null;
-    this.handleSortByChanged = (event) => {
-      this.sortBy = event.target.value;
-      this.doSearchAndFilterUpdate.emit(this.getSearchAndFilterObject());
-    };
+    this.sortByPlaceholderText = 'Sort by';
     this.handleApplyFilterButtonClick = () => {
       this.doSearchAndFilterUpdate.emit(this.getSearchAndFilterObject());
     };
@@ -165,15 +162,28 @@ const BiggiveCampaignCardFilterGrid = class {
     };
     return event;
   }
-  doOptionSelectCompletedHandler() {
+  doOptionSelectCompletedHandler(event) {
     this.sortBy = this.el.shadowRoot.getElementById('sort-by').selectedValue;
     this.filterCategory = this.el.shadowRoot.getElementById('categories').selectedValue;
     this.filterBeneficiary = this.el.shadowRoot.getElementById('beneficiaries').selectedValue;
     this.filterLocation = this.el.shadowRoot.getElementById('locations').selectedValue;
     this.filterFunding = this.el.shadowRoot.getElementById('funding').selectedValue;
+    // 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
+    // by `handleApplyFilterButtonClick()`.
+    // Additional note -> we could, instead, do this:
+    // `<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());
+    }
   }
   render() {
-    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: this.searchText, 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: "sort-wrap" }, h("biggive-form-field-select", { placeholder: "Sort by", id: "sort-by", onDoSelectChange: this.handleSortByChanged }, h("biggive-form-field-select-option", { value: "amountRaised", label: "Most raised" }), h("biggive-form-field-select-option", { value: "matchFundsRemaining", label: "Match funds remaining" }))), h("div", { class: "filter-wrap" }, h("biggive-button", { class: "filter", onClick: this.handleFilterButtonClick, label: "Filters" }), h("biggive-popup", { id: "filter-popup" }, h("h4", { class: "space-above-0 space-below-3 colour-primary" }, "Filters"), h("biggive-form-field-select", { placeholder: "Category", id: "categories", "space-below": "2" }, this.categoryOptions.length === 0
+    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: this.searchText, 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: "sort-wrap" }, h("biggive-form-field-select", { placeholder: "Sort by", 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" }))), h("div", { class: "filter-wrap" }, h("biggive-button", { class: "filter", onClick: this.handleFilterButtonClick, label: "Filters" }), h("biggive-popup", { id: "filter-popup" }, h("h4", { class: "space-above-0 space-below-3 colour-primary" }, "Filters"), h("biggive-form-field-select", { placeholder: "Category", id: "categories", "space-below": "2" }, this.categoryOptions.length === 0
       ? undefined
       : this.categoryOptions.map(option => h("biggive-form-field-select-option", { value: option, label: option }))), h("biggive-form-field-select", { placeholder: "Beneficiary", id: "beneficiaries", "space-below": "2" }, this.beneficiaryOptions.length === 0
       ? undefined
@@ -250,17 +260,25 @@ const BiggiveFormFieldSelect = class {
   doOptionSelectCompletedHandler(event) {
     this.selectedValue = event.detail.value;
     this.selectedLabel = event.detail.label;
-    this.doSelectChange.emit({ value: this.selectedValue, label: this.selectedLabel });
-    const dropdown = this.el.shadowRoot.querySelector('.dropdown');
-    dropdown.classList.remove('active');
+    this.doSelectChange.emit({ value: this.selectedValue, label: this.selectedLabel, placeholder: this.placeholder });
+    if (this.el.shadowRoot !== null && this.el.shadowRoot !== undefined) {
+      const dropdown = this.el.shadowRoot.querySelector('.dropdown');
+      if (dropdown !== null && dropdown !== undefined) {
+        dropdown.classList.remove('active');
+      }
+    }
   }
   toggleFocus(event) {
-    const dropdown = event.target.parentElement.parentElement;
-    if (dropdown.classList.contains('active')) {
-      dropdown.classList.remove('active');
-    }
-    else {
-      dropdown.classList.add('active');
+    if (event.target) {
+      const dropdown = event.target.parentElement.parentElement;
+      if (dropdown !== null && dropdown !== undefined) {
+        if (dropdown.classList.contains('active')) {
+          dropdown.classList.remove('active');
+        }
+        else {
+          dropdown.classList.add('active');
+        }
+      }
     }
   }
   render() {

package/dist/types/components/biggive-campaign-card-filter-grid/biggive-campaign-card-filter-grid.d.ts

@@ -19,6 +19,7 @@ export declare class BiggiveCampaignCardFilterGrid {
   filterBeneficiary: string;
   filterLocation: string;
   filterFunding: string;
+  sortByPlaceholderText: string;
   /**
    * Space below component
    */
@@ -53,8 +54,7 @@ export declare class BiggiveCampaignCardFilterGrid {
    */
   fundingOptions: string[];
   private getSearchAndFilterObject;
-  doOptionSelectCompletedHandler(): void;
-  private handleSortByChanged;
+  doOptionSelectCompletedHandler(event: any): void;
   private handleApplyFilterButtonClick;
   private handleSearchButtonPressed;
   private handleSearchTextChanged;

package/dist/types/components/biggive-form-field-select/biggive-form-field-select.d.ts

@@ -1,6 +1,6 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 export declare class BiggiveFormFieldSelect {
-  el: HTMLBiggiveFormFieldSelectElement;
+  el: HTMLDivElement;
   /**
    * This event `doChange` event is emitted and propogates to the parent
    * component which handles it

package/hydrate/index.js

@@ -6536,10 +6536,7 @@ class BiggiveCampaignCardFilterGrid {
     this.filterBeneficiary = null;
     this.filterLocation = null;
     this.filterFunding = null;
-    this.handleSortByChanged = (event) => {
-      this.sortBy = event.target.value;
-      this.doSearchAndFilterUpdate.emit(this.getSearchAndFilterObject());
-    };
+    this.sortByPlaceholderText = 'Sort by';
     this.handleApplyFilterButtonClick = () => {
       this.doSearchAndFilterUpdate.emit(this.getSearchAndFilterObject());
     };
@@ -6577,15 +6574,28 @@ class BiggiveCampaignCardFilterGrid {
     };
     return event;
   }
-  doOptionSelectCompletedHandler() {
+  doOptionSelectCompletedHandler(event) {
     this.sortBy = this.el.shadowRoot.getElementById('sort-by').selectedValue;
     this.filterCategory = this.el.shadowRoot.getElementById('categories').selectedValue;
     this.filterBeneficiary = this.el.shadowRoot.getElementById('beneficiaries').selectedValue;
     this.filterLocation = this.el.shadowRoot.getElementById('locations').selectedValue;
     this.filterFunding = this.el.shadowRoot.getElementById('funding').selectedValue;
+    // 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
+    // by `handleApplyFilterButtonClick()`.
+    // Additional note -> we could, instead, do this:
+    // `<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());
+    }
   }
   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: "sort-wrap" }, hAsync("biggive-form-field-select", { placeholder: "Sort by", id: "sort-by", onDoSelectChange: this.handleSortByChanged }, hAsync("biggive-form-field-select-option", { value: "amountRaised", label: "Most raised" }), hAsync("biggive-form-field-select-option", { value: "matchFundsRemaining", label: "Match funds remaining" }))), hAsync("div", { class: "filter-wrap" }, hAsync("biggive-button", { class: "filter", onClick: this.handleFilterButtonClick, label: "Filters" }), 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", 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: "sort-wrap" }, hAsync("biggive-form-field-select", { placeholder: "Sort by", 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("div", { class: "filter-wrap" }, hAsync("biggive-button", { class: "filter", onClick: this.handleFilterButtonClick, label: "Filters" }), 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", 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", id: "beneficiaries", "space-below": "2" }, this.beneficiaryOptions.length === 0
       ? undefined
@@ -6763,17 +6773,25 @@ class BiggiveFormFieldSelect {
   doOptionSelectCompletedHandler(event) {
     this.selectedValue = event.detail.value;
     this.selectedLabel = event.detail.label;
-    this.doSelectChange.emit({ value: this.selectedValue, label: this.selectedLabel });
-    const dropdown = this.el.shadowRoot.querySelector('.dropdown');
-    dropdown.classList.remove('active');
+    this.doSelectChange.emit({ value: this.selectedValue, label: this.selectedLabel, placeholder: this.placeholder });
+    if (this.el.shadowRoot !== null && this.el.shadowRoot !== undefined) {
+      const dropdown = this.el.shadowRoot.querySelector('.dropdown');
+      if (dropdown !== null && dropdown !== undefined) {
+        dropdown.classList.remove('active');
+      }
+    }
   }
   toggleFocus(event) {
-    const dropdown = event.target.parentElement.parentElement;
-    if (dropdown.classList.contains('active')) {
-      dropdown.classList.remove('active');
-    }
-    else {
-      dropdown.classList.add('active');
+    if (event.target) {
+      const dropdown = event.target.parentElement.parentElement;
+      if (dropdown !== null && dropdown !== undefined) {
+        if (dropdown.classList.contains('active')) {
+          dropdown.classList.remove('active');
+        }
+        else {
+          dropdown.classList.add('active');
+        }
+      }
     }
   }
   render() {

package/package.json

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