@biggive/components 1.0.137 → 1.0.138

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

@@ -42,7 +42,6 @@ const biggiveButtonCss = "body{background-color:#D7D7D7}h1,h3,h4,h5,h6{margin-bo
 const BiggiveButton = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this.doButtonClick = index.createEvent(this, "doButtonClick", 7);
     this.spaceBelow = 1;
     this.colourScheme = 'primary';
     this.label = 'Click me';
@@ -51,11 +50,8 @@ const BiggiveButton = class {
     this.size = 'medium';
     this.rounded = false;
   }
-  handleButtonClick() {
-    this.doButtonClick.emit(this.url);
-  }
   render() {
-    return (index.h("div", { class: 'container space-below-' + this.spaceBelow }, index.h("a", { href: this.url, class: 'button button-' + this.colourScheme + ' full-width-' + this.fullWidth.toString() + ' size-' + this.size + ' rounded-' + this.rounded.toString() }, index.h("span", { onClick: this.handleButtonClick }, this.label))));
+    return (index.h("div", { class: 'container space-below-' + this.spaceBelow }, index.h("a", { href: this.url, class: 'button button-' + this.colourScheme + ' full-width-' + this.fullWidth.toString() + ' size-' + this.size + ' rounded-' + this.rounded.toString() }, this.label)));
   }
 };
 BiggiveButton.style = biggiveButtonCss;
@@ -132,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());
     };
@@ -173,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
@@ -258,8 +264,7 @@ const BiggiveFormFieldSelect = class {
   doOptionSelectCompletedHandler(event) {
     this.selectedValue = event.detail.value;
     this.selectedLabel = event.detail.label;
-    this.doSelectChange.emit({ value: this.selectedValue, label: this.selectedLabel });
-    console.log({ value: this.selectedValue, label: this.selectedLabel });
+    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) {

package/dist/collection/components/biggive-button/biggive-button.js

@@ -9,11 +9,8 @@ export class BiggiveButton {
     this.size = 'medium';
     this.rounded = false;
   }
-  handleButtonClick() {
-    this.doButtonClick.emit(this.url);
-  }
   render() {
-    return (h("div", { class: 'container space-below-' + this.spaceBelow }, h("a", { href: this.url, class: 'button button-' + this.colourScheme + ' full-width-' + this.fullWidth.toString() + ' size-' + this.size + ' rounded-' + this.rounded.toString() }, h("span", { onClick: this.handleButtonClick }, this.label))));
+    return (h("div", { class: 'container space-below-' + this.spaceBelow }, h("a", { href: this.url, class: 'button button-' + this.colourScheme + ' full-width-' + this.fullWidth.toString() + ' size-' + this.size + ' rounded-' + this.rounded.toString() }, this.label)));
   }
   static get is() { return "biggive-button"; }
   static get encapsulation() { return "shadow"; }
@@ -157,22 +154,4 @@ export class BiggiveButton {
       }
     };
   }
-  static get events() {
-    return [{
-        "method": "doButtonClick",
-        "name": "doButtonClick",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        }
-      }];
-  }
 }

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,8 +9,7 @@ export class BiggiveFormFieldSelect {
   doOptionSelectCompletedHandler(event) {
     this.selectedValue = event.detail.value;
     this.selectedLabel = event.detail.label;
-    this.doSelectChange.emit({ value: this.selectedValue, label: this.selectedLabel });
-    console.log({ value: this.selectedValue, label: this.selectedLabel });
+    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) {

package/dist/components/biggive-button2.js

@@ -1,4 +1,4 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
 const biggiveButtonCss = "body{background-color:#D7D7D7}h1,h3,h4,h5,h6{margin-bottom:0}h1,.heading-1{font-size:47px;line-height:60px;font-weight:bold}h2,.heading-2{font-size:38px;line-height:45px;font-weight:bold}h3,.heading-3{font-size:25px;line-height:32px;font-weight:bold}h4,.heading-4{font-size:20px;line-height:24px;font-weight:bold}h5,.heading-5{font-size:17px;line-height:24px;font-weight:bold}a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.colour-primary{color:#2C089B}.colour-secondary{color:#2AF135}.colour-tertiary{color:#FF7272}.colour-white{color:#FFFFFF}.colour-black{color:#000000}.text-colour-hover-primary:hover,.text-colour-primary{color:#2C089B}.text-colour-hover-secondary:hover,.text-colour-secondary{color:#2AF135}.text-colour-hover-tertiary:hover,.text-colour-tertiary{color:#FF7272}.text-colour-hover-white:hover,.text-colour-white{color:#FFFFFF}.text-colour-hover-black:hover,.text-colour-black{color:#000000}.fill-primary{fill:#2C089B}.fill-secondary{fill:#2AF135}.fill-tertiary{fill:#FF7272}.fill-white{fill:#FFFFFF}.fill-black{fill:#000000}.fill-red{fill:red}.background-colour-hover-primary:hover,.background-colour-primary{background-color:#2C089B}.background-colour-hover-secondary:hover,.background-colour-secondary{background-color:#2AF135}.background-colour-hover-tertiary:hover,.background-colour-tertiary{background-color:#FF7272}.background-colour-hover-white:hover,.background-colour-white{background-color:#FFFFFF}.background-colour-hover-black:hover,.background-colour-black{background-color:#000000}.input-wrap{display:flex;justify-content:space-between}.input-text{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;color:#000000;padding:5px 10px;box-sizing:border-box;width:100%}.input-text:focus{outline:0}.input-text:placeholder{color:#4A4A4A}.button{font-size:17px;line-height:24px;padding:10px 30px;border-radius:5px;border:1px solid #000000;background-color:#000000;filter:drop-shadow(0px 8px 20px rgba(0, 0, 0, 0.22));color:#FFFFFF;display:inline-block;text-decoration:none;text-align:center;transition:all ease-in-out 0.5s;cursor:pointer}.button:hover{background-color:#FFFFFF;color:#000000}.button.size-small{font-size:13px;line-height:17px;padding:5px 15px}.button.button.rounded-true{border-radius:27.5px}.button.button.rounded-true.size-small{border-radius:20px}.button-primary{color:#FFFFFF;background-color:#2C089B;border-color:#2C089B}.button-primary:hover{color:#2C089B;background-color:#FFFFFF}.button-secondary{color:#2C089B;background-color:#2AF135;border-color:#2AF135}.button-secondary:hover{background-color:#FFFFFF}.button-tertiary{color:#FFFFFF;background-color:#FF7272;border-color:#FF7272}.button-tertiary:hover{background-color:#FFFFFF}.button-white{color:#2C089B;background-color:#FFFFFF;border-color:#FFFFFF}.button-white:hover{color:#FFFFFF;background-color:#2C089B}.button-black{color:#FFFFFF;background-color:#000000;border-color:#000000}.button-black:hover{color:#000000;background-color:#FFFFFF}.button-clear-primary{color:#2C089B;background-color:transparent;text-decoration:underline;box-shadow:none;border:0;padding-left:0;padding-right:0}.button-clear-primary:hover{text-decoration:none;background-color:transparent}.button-clear-secondary{color:#2AF135;background-color:transparent;text-decoration:underline;box-shadow:none;border:0;padding-left:0;padding-right:0}.button-clear-secondary:hover{text-decoration:none;background-color:transparent}.button-clear-tertiary{color:#FF7272;background-color:transparent;text-decoration:underline;box-shadow:none;border:0;padding-left:0;padding-right:0}.button-clear-tertiary:hover{text-decoration:none;background-color:transparent}.button-clear-white{color:#FFFFFF;background-color:transparent;text-decoration:underline;box-shadow:none;border:0;padding-left:0;padding-right:0}.button-clear-white:hover{color:#FFFFFF;text-decoration:none;background-color:transparent}.button-rounded{border-radius:27.5px}.button-rounded.size-small{border-radius:20px}.progress-bar{display:flex}.progress-bar .slider{margin:auto 15px auto 0;position:relative;flex-grow:1}.progress-bar .slider:before{content:\"\";position:absolute;display:block;top:0;left:0;bottom:0;right:0;background-color:#E8E8E8;border-radius:4px}.progress-bar .slider .progress{position:relative;border-radius:4px;background-color:#000000;height:8px}.progress-bar .counter{font-weight:700;color:#000000;font-size:14px;line-height:18px}.progress-bar-primary .slider .progress{background-color:#2C089B}.progress-bar-primary .counter{color:#2C089B}.progress-bar-secondary .slider .progress{background-color:#2AF135}.progress-bar-secondary .counter{color:#2AF135}.video-wrap{position:relative;padding-bottom:56.25%}.video-wrap iframe,.video-wrap video{position:absolute;border:0;display:block;left:0;right:0;top:0;bottom:0;width:100%;height:100%}.image-wrap img{width:100%;height:auto}.align-left{text-align:left}.align-right{text-align:right}.align-center{text-align:center}.align-justify{text-align:justify}.space-below-0{margin-bottom:0}.space-below-1{margin-bottom:5px}.space-below-2{margin-bottom:10px}.space-below-3{margin-bottom:15px}.space-below-4{margin-bottom:30px}.space-below-5{margin-bottom:45px}.space-below-6{margin-bottom:60px}.space-above-0{margin-top:0}.space-above-1{margin-top:5px}.space-above-2{margin-top:10px}.space-above-3{margin-top:15px}.space-above-4{margin-top:30px}.space-above-5{margin-top:45px}.space-above-6{margin-top:60px}.horizontal-padding-1{padding-left:5px;padding-right:5px}.horizontal-padding-2{padding-left:10px;padding-right:10px}.horizontal-padding-3{padding-left:15px;padding-right:15px}.horizontal-padding-4{padding-left:30px;padding-right:30px}.horizontal-padding-5{padding-left:45px;padding-right:45px}.horizontal-padding-6{padding-left:60px;padding-right:60px}.vertical-padding-1{padding-top:5px;padding-bottom:5px}.vertical-padding-2{padding-top:10px;padding-bottom:10px}.vertical-padding-3{padding-top:15px;padding-bottom:15px}.vertical-padding-4{padding-top:30px;padding-bottom:30px}.vertical-padding-5{padding-top:45px;padding-bottom:45px}.vertical-padding-6{padding-top:60px;padding-bottom:60px}:host{display:contents}.container{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px}.container a{display:inline-block}.container a.full-width-true{display:block}";
 
@@ -7,7 +7,6 @@ const BiggiveButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.doButtonClick = createEvent(this, "doButtonClick", 7);
     this.spaceBelow = 1;
     this.colourScheme = 'primary';
     this.label = 'Click me';
@@ -16,11 +15,8 @@ const BiggiveButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.size = 'medium';
     this.rounded = false;
   }
-  handleButtonClick() {
-    this.doButtonClick.emit(this.url);
-  }
   render() {
-    return (h("div", { class: 'container space-below-' + this.spaceBelow }, h("a", { href: this.url, class: 'button button-' + this.colourScheme + ' full-width-' + this.fullWidth.toString() + ' size-' + this.size + ' rounded-' + this.rounded.toString() }, h("span", { onClick: this.handleButtonClick }, this.label))));
+    return (h("div", { class: 'container space-below-' + this.spaceBelow }, h("a", { href: this.url, class: 'button button-' + this.colourScheme + ' full-width-' + this.fullWidth.toString() + ' size-' + this.size + ' rounded-' + this.rounded.toString() }, this.label)));
   }
   static get style() { return biggiveButtonCss; }
 }, [1, "biggive-button", {

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,8 +16,7 @@ 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 });
-    console.log({ value: this.selectedValue, label: this.selectedLabel });
+    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) {

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

@@ -38,7 +38,6 @@ const biggiveButtonCss = "body{background-color:#D7D7D7}h1,h3,h4,h5,h6{margin-bo
 const BiggiveButton = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.doButtonClick = createEvent(this, "doButtonClick", 7);
     this.spaceBelow = 1;
     this.colourScheme = 'primary';
     this.label = 'Click me';
@@ -47,11 +46,8 @@ const BiggiveButton = class {
     this.size = 'medium';
     this.rounded = false;
   }
-  handleButtonClick() {
-    this.doButtonClick.emit(this.url);
-  }
   render() {
-    return (h("div", { class: 'container space-below-' + this.spaceBelow }, h("a", { href: this.url, class: 'button button-' + this.colourScheme + ' full-width-' + this.fullWidth.toString() + ' size-' + this.size + ' rounded-' + this.rounded.toString() }, h("span", { onClick: this.handleButtonClick }, this.label))));
+    return (h("div", { class: 'container space-below-' + this.spaceBelow }, h("a", { href: this.url, class: 'button button-' + this.colourScheme + ' full-width-' + this.fullWidth.toString() + ' size-' + this.size + ' rounded-' + this.rounded.toString() }, this.label)));
   }
 };
 BiggiveButton.style = biggiveButtonCss;
@@ -128,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());
     };
@@ -169,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
@@ -254,8 +260,7 @@ const BiggiveFormFieldSelect = class {
   doOptionSelectCompletedHandler(event) {
     this.selectedValue = event.detail.value;
     this.selectedLabel = event.detail.label;
-    this.doSelectChange.emit({ value: this.selectedValue, label: this.selectedLabel });
-    console.log({ value: this.selectedValue, label: this.selectedLabel });
+    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) {

package/dist/types/components/biggive-button/biggive-button.d.ts

@@ -1,6 +1,4 @@
-import { EventEmitter } from '../../stencil-public-runtime';
 export declare class BiggiveButton {
-  doButtonClick: EventEmitter<string>;
   /**
    * Space below component
    */
@@ -29,6 +27,5 @@ export declare class BiggiveButton {
    * Rounded corners
    */
   rounded: boolean;
-  handleButtonClick(): void;
   render(): any;
 }

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.d.ts

@@ -944,10 +944,6 @@ export namespace Components {
         "videoUrl": string;
     }
 }
-export interface BiggiveButtonCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLBiggiveButtonElement;
-}
 export interface BiggiveCampaignCardFilterGridCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLBiggiveCampaignCardFilterGridElement;
@@ -1447,7 +1443,6 @@ declare namespace LocalJSX {
           * Text
          */
         "label"?: string;
-        "onDoButtonClick"?: (event: BiggiveButtonCustomEvent<string>) => void;
         /**
           * Rounded corners
          */

package/hydrate/index.js

@@ -6380,7 +6380,6 @@ const biggiveButtonCss = "/*!@body*/body.sc-biggive-button{background-color:#D7D
 class BiggiveButton {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.doButtonClick = createEvent(this, "doButtonClick", 7);
     this.spaceBelow = 1;
     this.colourScheme = 'primary';
     this.label = 'Click me';
@@ -6389,11 +6388,8 @@ class BiggiveButton {
     this.size = 'medium';
     this.rounded = false;
   }
-  handleButtonClick() {
-    this.doButtonClick.emit(this.url);
-  }
   render() {
-    return (hAsync("div", { class: 'container space-below-' + this.spaceBelow }, hAsync("a", { href: this.url, class: 'button button-' + this.colourScheme + ' full-width-' + this.fullWidth.toString() + ' size-' + this.size + ' rounded-' + this.rounded.toString() }, hAsync("span", { onClick: this.handleButtonClick }, this.label))));
+    return (hAsync("div", { class: 'container space-below-' + this.spaceBelow }, hAsync("a", { href: this.url, class: 'button button-' + this.colourScheme + ' full-width-' + this.fullWidth.toString() + ' size-' + this.size + ' rounded-' + this.rounded.toString() }, this.label)));
   }
   static get style() { return biggiveButtonCss; }
   static get cmpMeta() { return {
@@ -6540,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());
     };
@@ -6581,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
@@ -6767,8 +6773,7 @@ class BiggiveFormFieldSelect {
   doOptionSelectCompletedHandler(event) {
     this.selectedValue = event.detail.value;
     this.selectedLabel = event.detail.label;
-    this.doSelectChange.emit({ value: this.selectedValue, label: this.selectedLabel });
-    console.log({ value: this.selectedValue, label: this.selectedLabel });
+    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) {

package/package.json

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