@biggive/components 202309260920.0.0 → 202309271411.0.0

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

@@ -470,7 +470,19 @@ const BiggiveCampaignCardFilterGrid = class {
   }
   render() {
     var _a;
-    return (index.h("div", { class: 'container space-below-' + this.spaceBelow }, index.h("div", { class: "sleeve" }, index.h("div", { class: "search-wrap" }, index.h("h4", null, this.intro), index.h("div", { class: "field-wrap" }, index.h("div", { class: "input-wrap" }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", class: "icon", viewBox: "0 0 512 512" }, index.h("path", { d: fontawesomeIcons.faMagnifyingGlass.icon[4].toString() })), index.h("input", { type: "text", value: (_a = this.searchText) !== null && _a !== void 0 ? _a : '', class: "input-text", placeholder: this.placeholderText, onInput: this.handleSearchTextChanged, onKeyDown: this.handleEnterPressed })), index.h("biggive-button", { onClick: this.handleSearchButtonPressed, label: this.buttonText }))), index.h("div", { class: "sort-filter-wrap" }, index.h("div", { class: "filter-wrap" }, index.h("biggive-button", { class: "filter", colourScheme: "primary", onClick: this.handleFilterButtonClick, label: "Filter", fullWidth: true, "space-below": "0" }), index.h("biggive-popup", { id: "filter-popup" }, index.h("h4", { class: "space-above-0 space-below-3 text-colour-primary" }, "Filters"), index.h("div", { class: "select-wrapper-1" }, index.h("biggive-form-field-select", { backgroundColour: "white", prompt: "Category", placeholder: this.categoriesPlaceHolderText, selectedLabel: this.selectedFilterCategory, options: this.categoryOptions, selectionChanged: this.categoryFilterSelectionChanged, id: "categories", "space-below": "2" })), index.h("div", { class: "select-wrapper-2" }, index.h("biggive-form-field-select", { backgroundColour: "white", prompt: "Beneficiary", placeholder: this.beneficiariesPlaceHolderText, selectedLabel: this.selectedFilterBeneficiary, options: this.beneficiaryOptions, selectionChanged: this.beneficiarySelectionChanged, id: "beneficiaries", "space-below": "2" })), index.h("div", { class: "select-wrapper-3" }, index.h("biggive-form-field-select", { backgroundColour: "white", prompt: "Location", placeholder: this.locationsPlaceHolderText, selectedLabel: this.selectedFilterLocation, options: this.locationOptions, selectionChanged: this.locationSelectionChanged, id: "locations", "space-below": "2" })), index.h("div", { class: "select-wrapper-4" }, index.h("biggive-form-field-select", { backgroundColour: "white", prompt: "Funding", placeholder: this.fundingPlaceHolderText, selectedLabel: this.selectedFilterFunding, options: this.fundingOptions, selectionChanged: this.fundingSelectionChanged, id: "funding", "space-below": "2" })), index.h("div", { class: "align-right" }, index.h("biggive-button", { label: "Apply filters", onClick: this.handleApplyFilterButtonClick })))), index.h("div", { class: "sort-wrap" }, index.h("biggive-form-field-select", { options: { amountRaised: 'Most raised', matchFundsRemaining: 'Match funds remaining' }, prompt: null, "select-style": "underlined", placeholder: this.sortByPlaceholderText, selectedLabel: this.selectedSortByOption, selectionChanged: this.sortBySelectionChanged, id: "sort-by" }, index.h("biggive-form-field-select-option", { value: "amountRaised", label: "Most raised" }), index.h("biggive-form-field-select-option", { value: "matchFundsRemaining", label: "Match funds remaining" }), (this.searchText || '').length > 0 ? index.h("biggive-form-field-select-option", { value: "Relevance", label: "Relevance" }) : null))), index.h("div", { class: "selected-filter-wrap" }, index.h("div", { class: "selected-filters" }), index.h("div", { class: "clear-all" }, index.h("a", { onClick: this.handleClearAll }, "Clear all"))), index.h("div", { class: "campaign-grid" }, index.h("slot", { name: "campaign-grid" })))));
+    return (index.h("div", { class: 'container space-below-' + this.spaceBelow }, index.h("div", { class: "sleeve" }, index.h("div", { class: "search-wrap" }, index.h("h4", null, this.intro), index.h("div", { class: "field-wrap" }, index.h("div", { class: "input-wrap" }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", class: "icon", viewBox: "0 0 512 512" }, index.h("path", { d: fontawesomeIcons.faMagnifyingGlass.icon[4].toString() })), index.h("input", { type: "text", value: (_a = this.searchText) !== null && _a !== void 0 ? _a : '', class: "input-text", placeholder: this.placeholderText, onInput: this.handleSearchTextChanged, onKeyDown: this.handleEnterPressed })), index.h("biggive-button", { onClick: this.handleSearchButtonPressed, label: this.buttonText }))), index.h("div", { class: "sort-filter-wrap" }, index.h("div", { class: "filter-wrap" }, index.h("biggive-button", { class: "filter", colourScheme: "primary", onClick: this.handleFilterButtonClick, label: "Filter", fullWidth: true, "space-below": "0" }), index.h("biggive-popup", { id: "filter-popup" }, index.h("h4", { class: "space-above-0 space-below-3 text-colour-primary" }, "Filters"), index.h("div", { class: "select-wrapper-1" }, index.h("biggive-form-field-select", { backgroundColour: "white", prompt: "Category", placeholder: this.categoriesPlaceHolderText, selectedLabel: this.selectedFilterCategory, options: this.optionsToArray(this.categoryOptions || []), selectionChanged: this.categoryFilterSelectionChanged, id: "categories", "space-below": "2" })), index.h("div", { class: "select-wrapper-2" }, index.h("biggive-form-field-select", { backgroundColour: "white", prompt: "Beneficiary", placeholder: this.beneficiariesPlaceHolderText, selectedLabel: this.selectedFilterBeneficiary, options: this.optionsToArray(this.beneficiaryOptions || []), selectionChanged: this.beneficiarySelectionChanged, id: "beneficiaries", "space-below": "2" })), index.h("div", { class: "select-wrapper-3" }, index.h("biggive-form-field-select", { backgroundColour: "white", prompt: "Location", placeholder: this.locationsPlaceHolderText, selectedLabel: this.selectedFilterLocation, options: this.optionsToArray(this.locationOptions || []), selectionChanged: this.locationSelectionChanged, id: "locations", "space-below": "2" })), index.h("div", { class: "select-wrapper-4" }, index.h("biggive-form-field-select", { backgroundColour: "white", prompt: "Funding", placeholder: this.fundingPlaceHolderText, selectedLabel: this.selectedFilterFunding, options: this.optionsToArray(this.fundingOptions || []), selectionChanged: this.fundingSelectionChanged, id: "funding", "space-below": "2" })), index.h("div", { class: "align-right" }, index.h("biggive-button", { label: "Apply filters", onClick: this.handleApplyFilterButtonClick })))), index.h("div", { class: "sort-wrap" }, index.h("biggive-form-field-select", { options: [
+        { value: 'amountRaised', label: 'Most raised' },
+        { value: 'matchFundsRemaining', label: 'Match funds remaining' },
+      ], prompt: null, "select-style": "underlined", placeholder: this.sortByPlaceholderText, selectedLabel: this.selectedSortByOption, selectionChanged: this.sortBySelectionChanged, id: "sort-by" }, index.h("biggive-form-field-select-option", { value: "amountRaised", label: "Most raised" }), index.h("biggive-form-field-select-option", { value: "matchFundsRemaining", label: "Match funds remaining" }), (this.searchText || '').length > 0 ? index.h("biggive-form-field-select-option", { value: "Relevance", label: "Relevance" }) : null))), index.h("div", { class: "selected-filter-wrap" }, index.h("div", { class: "selected-filters" }), index.h("div", { class: "clear-all" }, index.h("a", { onClick: this.handleClearAll }, "Clear all"))), index.h("div", { class: "campaign-grid" }, index.h("slot", { name: "campaign-grid" })))));
+  }
+  optionsToArray(options) {
+    if (typeof options === 'string') {
+      options = JSON.parse(options);
+    }
+    if (Array.isArray(options)) {
+      return options.map((option) => ({ value: option, label: option }));
+    }
+    return Object.entries(options).map(entry => ({ value: entry[0], label: entry[1] }));
   }
   get el() { return index.getElement(this); }
 };
@@ -737,23 +749,28 @@ const BiggiveFormFieldSelect = class {
     const greyIfRequired = this.backgroundColour === 'grey' ? ' grey' : '';
     let options;
     if (typeof this.options === 'string') {
-      options = JSON.parse(this.options);
+      let parsed = JSON.parse(this.options);
+      if (!Array.isArray(parsed)) {
+        throw new Error('Options should be an Array<{ label: string; value: string }>');
+      }
+      options = parsed;
     }
     else {
       options = this.options;
     }
-    if (Array.isArray(options)) {
-      options = Object.fromEntries(options.map((value) => [value, value]));
-    }
     if (typeof this.placeholder === 'string' && typeof this.selectedValue !== 'string') {
-      options = Object.assign({ __placeholder__: this.placeholder }, options);
+      options = [{ value: '__placeholder__', label: this.placeholder }, ...options];
+    }
+    if (typeof options === 'undefined') {
+      console.error('options undefined');
+      options = [];
     }
     return (index.h("div", { class: "selectWrapper" }, index.h("label", { class: greyIfRequired }, index.h("div", { class: 'prompt' + greyIfRequired }, this.prompt), index.h("div", { class: 'dropdown space-below-' +
         this.spaceBelow +
         ' select-style-' +
         this.selectStyle +
         (this.prompt === null ? '  noprompt' : '') +
-        (this.selectedOptionColour === 'inherit' ? ' inherit-colour' : '') }, index.h("div", { class: "sleeve" }, index.h("select", { class: greyIfRequired, onChange: this.doOptionSelectCompletedHandler }, Object.entries(options).map((value) => (index.h("option", { selected: this.selectedValue === value[0], value: value[0] }, value[1])))), index.h("div", { class: "arrow" }))))));
+        (this.selectedOptionColour === 'inherit' ? ' inherit-colour' : '') }, index.h("div", { class: "sleeve" }, index.h("select", { class: greyIfRequired, onChange: this.doOptionSelectCompletedHandler }, options.map(option => (index.h("option", { selected: this.selectedValue === option.value, value: option.value }, option.label)))), index.h("div", { class: "arrow" }))))));
   }
   get el() { return index.getElement(this); }
 };

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

@@ -185,7 +185,19 @@ export class BiggiveCampaignCardFilterGrid {
   }
   render() {
     var _a;
-    return (h("div", { class: 'container space-below-' + this.spaceBelow }, h("div", { class: "sleeve" }, h("div", { class: "search-wrap" }, h("h4", null, this.intro), h("div", { class: "field-wrap" }, h("div", { class: "input-wrap" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", class: "icon", viewBox: "0 0 512 512" }, h("path", { d: faMagnifyingGlass.icon[4].toString() })), h("input", { type: "text", value: (_a = this.searchText) !== null && _a !== void 0 ? _a : '', class: "input-text", placeholder: this.placeholderText, onInput: this.handleSearchTextChanged, onKeyDown: this.handleEnterPressed })), h("biggive-button", { onClick: this.handleSearchButtonPressed, label: this.buttonText }))), h("div", { class: "sort-filter-wrap" }, h("div", { class: "filter-wrap" }, h("biggive-button", { class: "filter", colourScheme: "primary", onClick: this.handleFilterButtonClick, label: "Filter", fullWidth: true, "space-below": "0" }), h("biggive-popup", { id: "filter-popup" }, h("h4", { class: "space-above-0 space-below-3 text-colour-primary" }, "Filters"), h("div", { class: "select-wrapper-1" }, h("biggive-form-field-select", { backgroundColour: "white", prompt: "Category", placeholder: this.categoriesPlaceHolderText, selectedLabel: this.selectedFilterCategory, options: this.categoryOptions, selectionChanged: this.categoryFilterSelectionChanged, id: "categories", "space-below": "2" })), h("div", { class: "select-wrapper-2" }, h("biggive-form-field-select", { backgroundColour: "white", prompt: "Beneficiary", placeholder: this.beneficiariesPlaceHolderText, selectedLabel: this.selectedFilterBeneficiary, options: this.beneficiaryOptions, selectionChanged: this.beneficiarySelectionChanged, id: "beneficiaries", "space-below": "2" })), h("div", { class: "select-wrapper-3" }, h("biggive-form-field-select", { backgroundColour: "white", prompt: "Location", placeholder: this.locationsPlaceHolderText, selectedLabel: this.selectedFilterLocation, options: this.locationOptions, selectionChanged: this.locationSelectionChanged, id: "locations", "space-below": "2" })), h("div", { class: "select-wrapper-4" }, h("biggive-form-field-select", { backgroundColour: "white", prompt: "Funding", placeholder: this.fundingPlaceHolderText, selectedLabel: this.selectedFilterFunding, options: this.fundingOptions, selectionChanged: this.fundingSelectionChanged, id: "funding", "space-below": "2" })), h("div", { class: "align-right" }, h("biggive-button", { label: "Apply filters", onClick: this.handleApplyFilterButtonClick })))), h("div", { class: "sort-wrap" }, h("biggive-form-field-select", { options: { amountRaised: 'Most raised', matchFundsRemaining: 'Match funds remaining' }, prompt: null, "select-style": "underlined", placeholder: this.sortByPlaceholderText, selectedLabel: this.selectedSortByOption, selectionChanged: this.sortBySelectionChanged, id: "sort-by" }, h("biggive-form-field-select-option", { value: "amountRaised", label: "Most raised" }), h("biggive-form-field-select-option", { value: "matchFundsRemaining", label: "Match funds remaining" }), (this.searchText || '').length > 0 ? h("biggive-form-field-select-option", { value: "Relevance", label: "Relevance" }) : null))), h("div", { class: "selected-filter-wrap" }, h("div", { class: "selected-filters" }), h("div", { class: "clear-all" }, h("a", { onClick: this.handleClearAll }, "Clear all"))), h("div", { class: "campaign-grid" }, h("slot", { name: "campaign-grid" })))));
+    return (h("div", { class: 'container space-below-' + this.spaceBelow }, h("div", { class: "sleeve" }, h("div", { class: "search-wrap" }, h("h4", null, this.intro), h("div", { class: "field-wrap" }, h("div", { class: "input-wrap" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", class: "icon", viewBox: "0 0 512 512" }, h("path", { d: faMagnifyingGlass.icon[4].toString() })), h("input", { type: "text", value: (_a = this.searchText) !== null && _a !== void 0 ? _a : '', class: "input-text", placeholder: this.placeholderText, onInput: this.handleSearchTextChanged, onKeyDown: this.handleEnterPressed })), h("biggive-button", { onClick: this.handleSearchButtonPressed, label: this.buttonText }))), h("div", { class: "sort-filter-wrap" }, h("div", { class: "filter-wrap" }, h("biggive-button", { class: "filter", colourScheme: "primary", onClick: this.handleFilterButtonClick, label: "Filter", fullWidth: true, "space-below": "0" }), h("biggive-popup", { id: "filter-popup" }, h("h4", { class: "space-above-0 space-below-3 text-colour-primary" }, "Filters"), h("div", { class: "select-wrapper-1" }, h("biggive-form-field-select", { backgroundColour: "white", prompt: "Category", placeholder: this.categoriesPlaceHolderText, selectedLabel: this.selectedFilterCategory, options: this.optionsToArray(this.categoryOptions || []), selectionChanged: this.categoryFilterSelectionChanged, id: "categories", "space-below": "2" })), h("div", { class: "select-wrapper-2" }, h("biggive-form-field-select", { backgroundColour: "white", prompt: "Beneficiary", placeholder: this.beneficiariesPlaceHolderText, selectedLabel: this.selectedFilterBeneficiary, options: this.optionsToArray(this.beneficiaryOptions || []), selectionChanged: this.beneficiarySelectionChanged, id: "beneficiaries", "space-below": "2" })), h("div", { class: "select-wrapper-3" }, h("biggive-form-field-select", { backgroundColour: "white", prompt: "Location", placeholder: this.locationsPlaceHolderText, selectedLabel: this.selectedFilterLocation, options: this.optionsToArray(this.locationOptions || []), selectionChanged: this.locationSelectionChanged, id: "locations", "space-below": "2" })), h("div", { class: "select-wrapper-4" }, h("biggive-form-field-select", { backgroundColour: "white", prompt: "Funding", placeholder: this.fundingPlaceHolderText, selectedLabel: this.selectedFilterFunding, options: this.optionsToArray(this.fundingOptions || []), selectionChanged: this.fundingSelectionChanged, id: "funding", "space-below": "2" })), h("div", { class: "align-right" }, h("biggive-button", { label: "Apply filters", onClick: this.handleApplyFilterButtonClick })))), h("div", { class: "sort-wrap" }, h("biggive-form-field-select", { options: [
+        { value: 'amountRaised', label: 'Most raised' },
+        { value: 'matchFundsRemaining', label: 'Match funds remaining' },
+      ], prompt: null, "select-style": "underlined", placeholder: this.sortByPlaceholderText, selectedLabel: this.selectedSortByOption, selectionChanged: this.sortBySelectionChanged, id: "sort-by" }, h("biggive-form-field-select-option", { value: "amountRaised", label: "Most raised" }), h("biggive-form-field-select-option", { value: "matchFundsRemaining", label: "Match funds remaining" }), (this.searchText || '').length > 0 ? h("biggive-form-field-select-option", { value: "Relevance", label: "Relevance" }) : null))), h("div", { class: "selected-filter-wrap" }, h("div", { class: "selected-filters" }), h("div", { class: "clear-all" }, h("a", { onClick: this.handleClearAll }, "Clear all"))), h("div", { class: "campaign-grid" }, h("slot", { name: "campaign-grid" })))));
+  }
+  optionsToArray(options) {
+    if (typeof options === 'string') {
+      options = JSON.parse(options);
+    }
+    if (Array.isArray(options)) {
+      return options.map((option) => ({ value: option, label: option }));
+    }
+    return Object.entries(options).map(entry => ({ value: entry[0], label: entry[1] }));
   }
   static get is() { return "biggive-campaign-card-filter-grid"; }
   static get encapsulation() { return "shadow"; }
@@ -295,8 +307,8 @@ export class BiggiveCampaignCardFilterGrid {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string | Record<string, string>",
-          "resolved": "string | { [x: string]: string; }",
+          "original": "string | Record<string, string> | string[]",
+          "resolved": "string | string[] | { [x: string]: string; }",
           "references": {
             "Record": {
               "location": "global"
@@ -316,8 +328,8 @@ export class BiggiveCampaignCardFilterGrid {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string | Record<string, string>",
-          "resolved": "string | { [x: string]: string; }",
+          "original": "string | Record<string, string> | string[]",
+          "resolved": "string | string[] | { [x: string]: string; }",
           "references": {
             "Record": {
               "location": "global"
@@ -337,8 +349,8 @@ export class BiggiveCampaignCardFilterGrid {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string | Record<string, string>",
-          "resolved": "string | { [x: string]: string; }",
+          "original": "string | Record<string, string> | string[]",
+          "resolved": "string | string[] | { [x: string]: string; }",
           "references": {
             "Record": {
               "location": "global"
@@ -358,8 +370,8 @@ export class BiggiveCampaignCardFilterGrid {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string | Record<string, string>",
-          "resolved": "string | { [x: string]: string; }",
+          "original": "string | Record<string, string> | string[]",
+          "resolved": "string | string[] | { [x: string]: string; }",
           "references": {
             "Record": {
               "location": "global"

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

@@ -22,23 +22,28 @@ export class BiggiveFormFieldSelect {
     const greyIfRequired = this.backgroundColour === 'grey' ? ' grey' : '';
     let options;
     if (typeof this.options === 'string') {
-      options = JSON.parse(this.options);
+      let parsed = JSON.parse(this.options);
+      if (!Array.isArray(parsed)) {
+        throw new Error('Options should be an Array<{ label: string; value: string }>');
+      }
+      options = parsed;
     }
     else {
       options = this.options;
     }
-    if (Array.isArray(options)) {
-      options = Object.fromEntries(options.map((value) => [value, value]));
-    }
     if (typeof this.placeholder === 'string' && typeof this.selectedValue !== 'string') {
-      options = Object.assign({ __placeholder__: this.placeholder }, options);
+      options = [{ value: '__placeholder__', label: this.placeholder }, ...options];
+    }
+    if (typeof options === 'undefined') {
+      console.error('options undefined');
+      options = [];
     }
     return (h("div", { class: "selectWrapper" }, h("label", { class: greyIfRequired }, h("div", { class: 'prompt' + greyIfRequired }, this.prompt), h("div", { class: 'dropdown space-below-' +
         this.spaceBelow +
         ' select-style-' +
         this.selectStyle +
         (this.prompt === null ? '  noprompt' : '') +
-        (this.selectedOptionColour === 'inherit' ? ' inherit-colour' : '') }, h("div", { class: "sleeve" }, h("select", { class: greyIfRequired, onChange: this.doOptionSelectCompletedHandler }, Object.entries(options).map((value) => (h("option", { selected: this.selectedValue === value[0], value: value[0] }, value[1])))), h("div", { class: "arrow" }))))));
+        (this.selectedOptionColour === 'inherit' ? ' inherit-colour' : '') }, h("div", { class: "sleeve" }, h("select", { class: greyIfRequired, onChange: this.doOptionSelectCompletedHandler }, options.map(option => (h("option", { selected: this.selectedValue === option.value, value: option.value }, option.label)))), h("div", { class: "arrow" }))))));
   }
   static get is() { return "biggive-form-field-select"; }
   static get encapsulation() { return "shadow"; }
@@ -124,10 +129,10 @@ export class BiggiveFormFieldSelect {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string | Record<string, string>",
-          "resolved": "string | { [x: string]: string; }",
+          "original": "string | Array<{ label: string; value: string }>",
+          "resolved": "string | { label: string; value: string; }[]",
           "references": {
-            "Record": {
+            "Array": {
               "location": "global"
             }
           }

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

@@ -195,7 +195,19 @@ const BiggiveCampaignCardFilterGrid$1 = /*@__PURE__*/ proxyCustomElement(class e
   }
   render() {
     var _a;
-    return (h("div", { class: 'container space-below-' + this.spaceBelow }, h("div", { class: "sleeve" }, h("div", { class: "search-wrap" }, h("h4", null, this.intro), h("div", { class: "field-wrap" }, h("div", { class: "input-wrap" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", class: "icon", viewBox: "0 0 512 512" }, h("path", { d: faMagnifyingGlass.icon[4].toString() })), h("input", { type: "text", value: (_a = this.searchText) !== null && _a !== void 0 ? _a : '', class: "input-text", placeholder: this.placeholderText, onInput: this.handleSearchTextChanged, onKeyDown: this.handleEnterPressed })), h("biggive-button", { onClick: this.handleSearchButtonPressed, label: this.buttonText }))), h("div", { class: "sort-filter-wrap" }, h("div", { class: "filter-wrap" }, h("biggive-button", { class: "filter", colourScheme: "primary", onClick: this.handleFilterButtonClick, label: "Filter", fullWidth: true, "space-below": "0" }), h("biggive-popup", { id: "filter-popup" }, h("h4", { class: "space-above-0 space-below-3 text-colour-primary" }, "Filters"), h("div", { class: "select-wrapper-1" }, h("biggive-form-field-select", { backgroundColour: "white", prompt: "Category", placeholder: this.categoriesPlaceHolderText, selectedLabel: this.selectedFilterCategory, options: this.categoryOptions, selectionChanged: this.categoryFilterSelectionChanged, id: "categories", "space-below": "2" })), h("div", { class: "select-wrapper-2" }, h("biggive-form-field-select", { backgroundColour: "white", prompt: "Beneficiary", placeholder: this.beneficiariesPlaceHolderText, selectedLabel: this.selectedFilterBeneficiary, options: this.beneficiaryOptions, selectionChanged: this.beneficiarySelectionChanged, id: "beneficiaries", "space-below": "2" })), h("div", { class: "select-wrapper-3" }, h("biggive-form-field-select", { backgroundColour: "white", prompt: "Location", placeholder: this.locationsPlaceHolderText, selectedLabel: this.selectedFilterLocation, options: this.locationOptions, selectionChanged: this.locationSelectionChanged, id: "locations", "space-below": "2" })), h("div", { class: "select-wrapper-4" }, h("biggive-form-field-select", { backgroundColour: "white", prompt: "Funding", placeholder: this.fundingPlaceHolderText, selectedLabel: this.selectedFilterFunding, options: this.fundingOptions, selectionChanged: this.fundingSelectionChanged, id: "funding", "space-below": "2" })), h("div", { class: "align-right" }, h("biggive-button", { label: "Apply filters", onClick: this.handleApplyFilterButtonClick })))), h("div", { class: "sort-wrap" }, h("biggive-form-field-select", { options: { amountRaised: 'Most raised', matchFundsRemaining: 'Match funds remaining' }, prompt: null, "select-style": "underlined", placeholder: this.sortByPlaceholderText, selectedLabel: this.selectedSortByOption, selectionChanged: this.sortBySelectionChanged, id: "sort-by" }, h("biggive-form-field-select-option", { value: "amountRaised", label: "Most raised" }), h("biggive-form-field-select-option", { value: "matchFundsRemaining", label: "Match funds remaining" }), (this.searchText || '').length > 0 ? h("biggive-form-field-select-option", { value: "Relevance", label: "Relevance" }) : null))), h("div", { class: "selected-filter-wrap" }, h("div", { class: "selected-filters" }), h("div", { class: "clear-all" }, h("a", { onClick: this.handleClearAll }, "Clear all"))), h("div", { class: "campaign-grid" }, h("slot", { name: "campaign-grid" })))));
+    return (h("div", { class: 'container space-below-' + this.spaceBelow }, h("div", { class: "sleeve" }, h("div", { class: "search-wrap" }, h("h4", null, this.intro), h("div", { class: "field-wrap" }, h("div", { class: "input-wrap" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", class: "icon", viewBox: "0 0 512 512" }, h("path", { d: faMagnifyingGlass.icon[4].toString() })), h("input", { type: "text", value: (_a = this.searchText) !== null && _a !== void 0 ? _a : '', class: "input-text", placeholder: this.placeholderText, onInput: this.handleSearchTextChanged, onKeyDown: this.handleEnterPressed })), h("biggive-button", { onClick: this.handleSearchButtonPressed, label: this.buttonText }))), h("div", { class: "sort-filter-wrap" }, h("div", { class: "filter-wrap" }, h("biggive-button", { class: "filter", colourScheme: "primary", onClick: this.handleFilterButtonClick, label: "Filter", fullWidth: true, "space-below": "0" }), h("biggive-popup", { id: "filter-popup" }, h("h4", { class: "space-above-0 space-below-3 text-colour-primary" }, "Filters"), h("div", { class: "select-wrapper-1" }, h("biggive-form-field-select", { backgroundColour: "white", prompt: "Category", placeholder: this.categoriesPlaceHolderText, selectedLabel: this.selectedFilterCategory, options: this.optionsToArray(this.categoryOptions || []), selectionChanged: this.categoryFilterSelectionChanged, id: "categories", "space-below": "2" })), h("div", { class: "select-wrapper-2" }, h("biggive-form-field-select", { backgroundColour: "white", prompt: "Beneficiary", placeholder: this.beneficiariesPlaceHolderText, selectedLabel: this.selectedFilterBeneficiary, options: this.optionsToArray(this.beneficiaryOptions || []), selectionChanged: this.beneficiarySelectionChanged, id: "beneficiaries", "space-below": "2" })), h("div", { class: "select-wrapper-3" }, h("biggive-form-field-select", { backgroundColour: "white", prompt: "Location", placeholder: this.locationsPlaceHolderText, selectedLabel: this.selectedFilterLocation, options: this.optionsToArray(this.locationOptions || []), selectionChanged: this.locationSelectionChanged, id: "locations", "space-below": "2" })), h("div", { class: "select-wrapper-4" }, h("biggive-form-field-select", { backgroundColour: "white", prompt: "Funding", placeholder: this.fundingPlaceHolderText, selectedLabel: this.selectedFilterFunding, options: this.optionsToArray(this.fundingOptions || []), selectionChanged: this.fundingSelectionChanged, id: "funding", "space-below": "2" })), h("div", { class: "align-right" }, h("biggive-button", { label: "Apply filters", onClick: this.handleApplyFilterButtonClick })))), h("div", { class: "sort-wrap" }, h("biggive-form-field-select", { options: [
+        { value: 'amountRaised', label: 'Most raised' },
+        { value: 'matchFundsRemaining', label: 'Match funds remaining' },
+      ], prompt: null, "select-style": "underlined", placeholder: this.sortByPlaceholderText, selectedLabel: this.selectedSortByOption, selectionChanged: this.sortBySelectionChanged, id: "sort-by" }, h("biggive-form-field-select-option", { value: "amountRaised", label: "Most raised" }), h("biggive-form-field-select-option", { value: "matchFundsRemaining", label: "Match funds remaining" }), (this.searchText || '').length > 0 ? h("biggive-form-field-select-option", { value: "Relevance", label: "Relevance" }) : null))), h("div", { class: "selected-filter-wrap" }, h("div", { class: "selected-filters" }), h("div", { class: "clear-all" }, h("a", { onClick: this.handleClearAll }, "Clear all"))), h("div", { class: "campaign-grid" }, h("slot", { name: "campaign-grid" })))));
+  }
+  optionsToArray(options) {
+    if (typeof options === 'string') {
+      options = JSON.parse(options);
+    }
+    if (Array.isArray(options)) {
+      return options.map((option) => ({ value: option, label: option }));
+    }
+    return Object.entries(options).map(entry => ({ value: entry[0], label: entry[1] }));
   }
   get el() { return this; }
   static get style() { return biggiveCampaignCardFilterGridCss; }

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

@@ -28,23 +28,28 @@ const BiggiveFormFieldSelect = /*@__PURE__*/ proxyCustomElement(class extends HT
     const greyIfRequired = this.backgroundColour === 'grey' ? ' grey' : '';
     let options;
     if (typeof this.options === 'string') {
-      options = JSON.parse(this.options);
+      let parsed = JSON.parse(this.options);
+      if (!Array.isArray(parsed)) {
+        throw new Error('Options should be an Array<{ label: string; value: string }>');
+      }
+      options = parsed;
     }
     else {
       options = this.options;
     }
-    if (Array.isArray(options)) {
-      options = Object.fromEntries(options.map((value) => [value, value]));
-    }
     if (typeof this.placeholder === 'string' && typeof this.selectedValue !== 'string') {
-      options = Object.assign({ __placeholder__: this.placeholder }, options);
+      options = [{ value: '__placeholder__', label: this.placeholder }, ...options];
+    }
+    if (typeof options === 'undefined') {
+      console.error('options undefined');
+      options = [];
     }
     return (h("div", { class: "selectWrapper" }, h("label", { class: greyIfRequired }, h("div", { class: 'prompt' + greyIfRequired }, this.prompt), h("div", { class: 'dropdown space-below-' +
         this.spaceBelow +
         ' select-style-' +
         this.selectStyle +
         (this.prompt === null ? '  noprompt' : '') +
-        (this.selectedOptionColour === 'inherit' ? ' inherit-colour' : '') }, h("div", { class: "sleeve" }, h("select", { class: greyIfRequired, onChange: this.doOptionSelectCompletedHandler }, Object.entries(options).map((value) => (h("option", { selected: this.selectedValue === value[0], value: value[0] }, value[1])))), h("div", { class: "arrow" }))))));
+        (this.selectedOptionColour === 'inherit' ? ' inherit-colour' : '') }, h("div", { class: "sleeve" }, h("select", { class: greyIfRequired, onChange: this.doOptionSelectCompletedHandler }, options.map(option => (h("option", { selected: this.selectedValue === option.value, value: option.value }, option.label)))), h("div", { class: "arrow" }))))));
   }
   get el() { return this; }
   static get style() { return biggiveFormFieldSelectCss; }

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

@@ -466,7 +466,19 @@ const BiggiveCampaignCardFilterGrid = class {
   }
   render() {
     var _a;
-    return (h("div", { class: 'container space-below-' + this.spaceBelow }, h("div", { class: "sleeve" }, h("div", { class: "search-wrap" }, h("h4", null, this.intro), h("div", { class: "field-wrap" }, h("div", { class: "input-wrap" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", class: "icon", viewBox: "0 0 512 512" }, h("path", { d: faMagnifyingGlass.icon[4].toString() })), h("input", { type: "text", value: (_a = this.searchText) !== null && _a !== void 0 ? _a : '', class: "input-text", placeholder: this.placeholderText, onInput: this.handleSearchTextChanged, onKeyDown: this.handleEnterPressed })), h("biggive-button", { onClick: this.handleSearchButtonPressed, label: this.buttonText }))), h("div", { class: "sort-filter-wrap" }, h("div", { class: "filter-wrap" }, h("biggive-button", { class: "filter", colourScheme: "primary", onClick: this.handleFilterButtonClick, label: "Filter", fullWidth: true, "space-below": "0" }), h("biggive-popup", { id: "filter-popup" }, h("h4", { class: "space-above-0 space-below-3 text-colour-primary" }, "Filters"), h("div", { class: "select-wrapper-1" }, h("biggive-form-field-select", { backgroundColour: "white", prompt: "Category", placeholder: this.categoriesPlaceHolderText, selectedLabel: this.selectedFilterCategory, options: this.categoryOptions, selectionChanged: this.categoryFilterSelectionChanged, id: "categories", "space-below": "2" })), h("div", { class: "select-wrapper-2" }, h("biggive-form-field-select", { backgroundColour: "white", prompt: "Beneficiary", placeholder: this.beneficiariesPlaceHolderText, selectedLabel: this.selectedFilterBeneficiary, options: this.beneficiaryOptions, selectionChanged: this.beneficiarySelectionChanged, id: "beneficiaries", "space-below": "2" })), h("div", { class: "select-wrapper-3" }, h("biggive-form-field-select", { backgroundColour: "white", prompt: "Location", placeholder: this.locationsPlaceHolderText, selectedLabel: this.selectedFilterLocation, options: this.locationOptions, selectionChanged: this.locationSelectionChanged, id: "locations", "space-below": "2" })), h("div", { class: "select-wrapper-4" }, h("biggive-form-field-select", { backgroundColour: "white", prompt: "Funding", placeholder: this.fundingPlaceHolderText, selectedLabel: this.selectedFilterFunding, options: this.fundingOptions, selectionChanged: this.fundingSelectionChanged, id: "funding", "space-below": "2" })), h("div", { class: "align-right" }, h("biggive-button", { label: "Apply filters", onClick: this.handleApplyFilterButtonClick })))), h("div", { class: "sort-wrap" }, h("biggive-form-field-select", { options: { amountRaised: 'Most raised', matchFundsRemaining: 'Match funds remaining' }, prompt: null, "select-style": "underlined", placeholder: this.sortByPlaceholderText, selectedLabel: this.selectedSortByOption, selectionChanged: this.sortBySelectionChanged, id: "sort-by" }, h("biggive-form-field-select-option", { value: "amountRaised", label: "Most raised" }), h("biggive-form-field-select-option", { value: "matchFundsRemaining", label: "Match funds remaining" }), (this.searchText || '').length > 0 ? h("biggive-form-field-select-option", { value: "Relevance", label: "Relevance" }) : null))), h("div", { class: "selected-filter-wrap" }, h("div", { class: "selected-filters" }), h("div", { class: "clear-all" }, h("a", { onClick: this.handleClearAll }, "Clear all"))), h("div", { class: "campaign-grid" }, h("slot", { name: "campaign-grid" })))));
+    return (h("div", { class: 'container space-below-' + this.spaceBelow }, h("div", { class: "sleeve" }, h("div", { class: "search-wrap" }, h("h4", null, this.intro), h("div", { class: "field-wrap" }, h("div", { class: "input-wrap" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", class: "icon", viewBox: "0 0 512 512" }, h("path", { d: faMagnifyingGlass.icon[4].toString() })), h("input", { type: "text", value: (_a = this.searchText) !== null && _a !== void 0 ? _a : '', class: "input-text", placeholder: this.placeholderText, onInput: this.handleSearchTextChanged, onKeyDown: this.handleEnterPressed })), h("biggive-button", { onClick: this.handleSearchButtonPressed, label: this.buttonText }))), h("div", { class: "sort-filter-wrap" }, h("div", { class: "filter-wrap" }, h("biggive-button", { class: "filter", colourScheme: "primary", onClick: this.handleFilterButtonClick, label: "Filter", fullWidth: true, "space-below": "0" }), h("biggive-popup", { id: "filter-popup" }, h("h4", { class: "space-above-0 space-below-3 text-colour-primary" }, "Filters"), h("div", { class: "select-wrapper-1" }, h("biggive-form-field-select", { backgroundColour: "white", prompt: "Category", placeholder: this.categoriesPlaceHolderText, selectedLabel: this.selectedFilterCategory, options: this.optionsToArray(this.categoryOptions || []), selectionChanged: this.categoryFilterSelectionChanged, id: "categories", "space-below": "2" })), h("div", { class: "select-wrapper-2" }, h("biggive-form-field-select", { backgroundColour: "white", prompt: "Beneficiary", placeholder: this.beneficiariesPlaceHolderText, selectedLabel: this.selectedFilterBeneficiary, options: this.optionsToArray(this.beneficiaryOptions || []), selectionChanged: this.beneficiarySelectionChanged, id: "beneficiaries", "space-below": "2" })), h("div", { class: "select-wrapper-3" }, h("biggive-form-field-select", { backgroundColour: "white", prompt: "Location", placeholder: this.locationsPlaceHolderText, selectedLabel: this.selectedFilterLocation, options: this.optionsToArray(this.locationOptions || []), selectionChanged: this.locationSelectionChanged, id: "locations", "space-below": "2" })), h("div", { class: "select-wrapper-4" }, h("biggive-form-field-select", { backgroundColour: "white", prompt: "Funding", placeholder: this.fundingPlaceHolderText, selectedLabel: this.selectedFilterFunding, options: this.optionsToArray(this.fundingOptions || []), selectionChanged: this.fundingSelectionChanged, id: "funding", "space-below": "2" })), h("div", { class: "align-right" }, h("biggive-button", { label: "Apply filters", onClick: this.handleApplyFilterButtonClick })))), h("div", { class: "sort-wrap" }, h("biggive-form-field-select", { options: [
+        { value: 'amountRaised', label: 'Most raised' },
+        { value: 'matchFundsRemaining', label: 'Match funds remaining' },
+      ], prompt: null, "select-style": "underlined", placeholder: this.sortByPlaceholderText, selectedLabel: this.selectedSortByOption, selectionChanged: this.sortBySelectionChanged, id: "sort-by" }, h("biggive-form-field-select-option", { value: "amountRaised", label: "Most raised" }), h("biggive-form-field-select-option", { value: "matchFundsRemaining", label: "Match funds remaining" }), (this.searchText || '').length > 0 ? h("biggive-form-field-select-option", { value: "Relevance", label: "Relevance" }) : null))), h("div", { class: "selected-filter-wrap" }, h("div", { class: "selected-filters" }), h("div", { class: "clear-all" }, h("a", { onClick: this.handleClearAll }, "Clear all"))), h("div", { class: "campaign-grid" }, h("slot", { name: "campaign-grid" })))));
+  }
+  optionsToArray(options) {
+    if (typeof options === 'string') {
+      options = JSON.parse(options);
+    }
+    if (Array.isArray(options)) {
+      return options.map((option) => ({ value: option, label: option }));
+    }
+    return Object.entries(options).map(entry => ({ value: entry[0], label: entry[1] }));
   }
   get el() { return getElement(this); }
 };
@@ -733,23 +745,28 @@ const BiggiveFormFieldSelect = class {
     const greyIfRequired = this.backgroundColour === 'grey' ? ' grey' : '';
     let options;
     if (typeof this.options === 'string') {
-      options = JSON.parse(this.options);
+      let parsed = JSON.parse(this.options);
+      if (!Array.isArray(parsed)) {
+        throw new Error('Options should be an Array<{ label: string; value: string }>');
+      }
+      options = parsed;
     }
     else {
       options = this.options;
     }
-    if (Array.isArray(options)) {
-      options = Object.fromEntries(options.map((value) => [value, value]));
-    }
     if (typeof this.placeholder === 'string' && typeof this.selectedValue !== 'string') {
-      options = Object.assign({ __placeholder__: this.placeholder }, options);
+      options = [{ value: '__placeholder__', label: this.placeholder }, ...options];
+    }
+    if (typeof options === 'undefined') {
+      console.error('options undefined');
+      options = [];
     }
     return (h("div", { class: "selectWrapper" }, h("label", { class: greyIfRequired }, h("div", { class: 'prompt' + greyIfRequired }, this.prompt), h("div", { class: 'dropdown space-below-' +
         this.spaceBelow +
         ' select-style-' +
         this.selectStyle +
         (this.prompt === null ? '  noprompt' : '') +
-        (this.selectedOptionColour === 'inherit' ? ' inherit-colour' : '') }, h("div", { class: "sleeve" }, h("select", { class: greyIfRequired, onChange: this.doOptionSelectCompletedHandler }, Object.entries(options).map((value) => (h("option", { selected: this.selectedValue === value[0], value: value[0] }, value[1])))), h("div", { class: "arrow" }))))));
+        (this.selectedOptionColour === 'inherit' ? ' inherit-colour' : '') }, h("div", { class: "sleeve" }, h("select", { class: greyIfRequired, onChange: this.doOptionSelectCompletedHandler }, options.map(option => (h("option", { selected: this.selectedValue === option.value, value: option.value }, option.label)))), h("div", { class: "arrow" }))))));
   }
   get el() { return getElement(this); }
 };

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

@@ -47,19 +47,19 @@ export declare class BiggiveCampaignCardFilterGrid {
   /**
    * JSON array of category key/values, or takes a stringified equiavalent (for Storybook)
    */
-  categoryOptions: string | Record<string, string>;
+  categoryOptions: string | Record<string, string> | string[];
   /**
    * JSON array of beneficiary key/values, or takes a stringified equiavalent (for Storybook)
    */
-  beneficiaryOptions: string | Record<string, string>;
+  beneficiaryOptions: string | Record<string, string> | string[];
   /**
    * JSON array of location key/values, or takes a stringified equiavalent (for Storybook)
    */
-  locationOptions: string | Record<string, string>;
+  locationOptions: string | Record<string, string> | string[];
   /**
    * JSON array of funding key/values, or takes a stringified equiavalent (for Storybook)
    */
-  fundingOptions: string | Record<string, string>;
+  fundingOptions: string | Record<string, string> | string[];
   /**
    * This helps us inject a pre-selected dropdown value from outside of this component.
    * This is especially helpful for the Meta campaign and Explore pages, where searching
@@ -103,4 +103,5 @@ export declare class BiggiveCampaignCardFilterGrid {
   private handleClearAll;
   componentWillRender(): void;
   render(): any;
+  private optionsToArray;
 }

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

@@ -10,7 +10,10 @@ export declare class BiggiveFormFieldSelect {
   /**
    * JSON array of category key/values, or takes a stringified equiavalent (for Storybook)
    */
-  options: string | Record<string, string>;
+  options: string | Array<{
+    label: string;
+    value: string;
+  }>;
   selectStyle: 'bordered' | 'underlined';
   /**
    * Must match background of containing element, or unintended shape will appear.

package/dist/types/components.d.ts

@@ -361,7 +361,7 @@ export namespace Components {
         /**
           * JSON array of beneficiary key/values, or takes a stringified equiavalent (for Storybook)
          */
-        "beneficiaryOptions": string | Record<string, string>;
+        "beneficiaryOptions": string | Record<string, string> | string[];
         /**
           * Defines the text on the search button
          */
@@ -369,11 +369,11 @@ export namespace Components {
         /**
           * JSON array of category key/values, or takes a stringified equiavalent (for Storybook)
          */
-        "categoryOptions": string | Record<string, string>;
+        "categoryOptions": string | Record<string, string> | string[];
         /**
           * JSON array of funding key/values, or takes a stringified equiavalent (for Storybook)
          */
-        "fundingOptions": string | Record<string, string>;
+        "fundingOptions": string | Record<string, string> | string[];
         /**
           * Intro
          */
@@ -381,7 +381,7 @@ export namespace Components {
         /**
           * JSON array of location key/values, or takes a stringified equiavalent (for Storybook)
          */
-        "locationOptions": string | Record<string, string>;
+        "locationOptions": string | Record<string, string> | string[];
         /**
           * Defines the text displayed as the placeholder in the input field before the user types anything
          */
@@ -533,7 +533,7 @@ export namespace Components {
         /**
           * JSON array of category key/values, or takes a stringified equiavalent (for Storybook)
          */
-        "options": string | Record<string, string>;
+        "options": string | Array<{ label: string; value: string }>;
         /**
           * Placeholder
          */
@@ -1891,7 +1891,7 @@ declare namespace LocalJSX {
         /**
           * JSON array of beneficiary key/values, or takes a stringified equiavalent (for Storybook)
          */
-        "beneficiaryOptions"?: string | Record<string, string>;
+        "beneficiaryOptions"?: string | Record<string, string> | string[];
         /**
           * Defines the text on the search button
          */
@@ -1899,11 +1899,11 @@ declare namespace LocalJSX {
         /**
           * JSON array of category key/values, or takes a stringified equiavalent (for Storybook)
          */
-        "categoryOptions"?: string | Record<string, string>;
+        "categoryOptions"?: string | Record<string, string> | string[];
         /**
           * JSON array of funding key/values, or takes a stringified equiavalent (for Storybook)
          */
-        "fundingOptions"?: string | Record<string, string>;
+        "fundingOptions"?: string | Record<string, string> | string[];
         /**
           * Intro
          */
@@ -1911,7 +1911,7 @@ declare namespace LocalJSX {
         /**
           * JSON array of location key/values, or takes a stringified equiavalent (for Storybook)
          */
-        "locationOptions"?: string | Record<string, string>;
+        "locationOptions"?: string | Record<string, string> | string[];
         /**
           * This event `doSearchAndFilterUpdate` event is emitted and propogates to the parent component which handles it
          */
@@ -2081,7 +2081,7 @@ declare namespace LocalJSX {
         /**
           * JSON array of category key/values, or takes a stringified equiavalent (for Storybook)
          */
-        "options": string | Record<string, string>;
+        "options": string | Array<{ label: string; value: string }>;
         /**
           * Placeholder
          */

package/hydrate/index.js

@@ -6969,7 +6969,19 @@ class BiggiveCampaignCardFilterGrid {
   }
   render() {
     var _a;
-    return (hAsync("div", { class: 'container space-below-' + this.spaceBelow }, hAsync("div", { class: "sleeve" }, hAsync("div", { class: "search-wrap" }, hAsync("h4", null, this.intro), hAsync("div", { class: "field-wrap" }, hAsync("div", { class: "input-wrap" }, hAsync("svg", { xmlns: "http://www.w3.org/2000/svg", class: "icon", viewBox: "0 0 512 512" }, hAsync("path", { d: faMagnifyingGlass.icon[4].toString() })), hAsync("input", { type: "text", value: (_a = this.searchText) !== null && _a !== void 0 ? _a : '', class: "input-text", placeholder: this.placeholderText, onInput: this.handleSearchTextChanged, onKeyDown: this.handleEnterPressed })), hAsync("biggive-button", { onClick: this.handleSearchButtonPressed, label: this.buttonText }))), hAsync("div", { class: "sort-filter-wrap" }, hAsync("div", { class: "filter-wrap" }, hAsync("biggive-button", { class: "filter", colourScheme: "primary", onClick: this.handleFilterButtonClick, label: "Filter", fullWidth: true, "space-below": "0" }), hAsync("biggive-popup", { id: "filter-popup" }, hAsync("h4", { class: "space-above-0 space-below-3 text-colour-primary" }, "Filters"), hAsync("div", { class: "select-wrapper-1" }, hAsync("biggive-form-field-select", { backgroundColour: "white", prompt: "Category", placeholder: this.categoriesPlaceHolderText, selectedLabel: this.selectedFilterCategory, options: this.categoryOptions, selectionChanged: this.categoryFilterSelectionChanged, id: "categories", "space-below": "2" })), hAsync("div", { class: "select-wrapper-2" }, hAsync("biggive-form-field-select", { backgroundColour: "white", prompt: "Beneficiary", placeholder: this.beneficiariesPlaceHolderText, selectedLabel: this.selectedFilterBeneficiary, options: this.beneficiaryOptions, selectionChanged: this.beneficiarySelectionChanged, id: "beneficiaries", "space-below": "2" })), hAsync("div", { class: "select-wrapper-3" }, hAsync("biggive-form-field-select", { backgroundColour: "white", prompt: "Location", placeholder: this.locationsPlaceHolderText, selectedLabel: this.selectedFilterLocation, options: this.locationOptions, selectionChanged: this.locationSelectionChanged, id: "locations", "space-below": "2" })), hAsync("div", { class: "select-wrapper-4" }, hAsync("biggive-form-field-select", { backgroundColour: "white", prompt: "Funding", placeholder: this.fundingPlaceHolderText, selectedLabel: this.selectedFilterFunding, options: this.fundingOptions, selectionChanged: this.fundingSelectionChanged, id: "funding", "space-below": "2" })), hAsync("div", { class: "align-right" }, hAsync("biggive-button", { label: "Apply filters", onClick: this.handleApplyFilterButtonClick })))), hAsync("div", { class: "sort-wrap" }, hAsync("biggive-form-field-select", { options: { amountRaised: 'Most raised', matchFundsRemaining: 'Match funds remaining' }, prompt: null, "select-style": "underlined", placeholder: this.sortByPlaceholderText, selectedLabel: this.selectedSortByOption, selectionChanged: this.sortBySelectionChanged, id: "sort-by" }, hAsync("biggive-form-field-select-option", { value: "amountRaised", label: "Most raised" }), hAsync("biggive-form-field-select-option", { value: "matchFundsRemaining", label: "Match funds remaining" }), (this.searchText || '').length > 0 ? hAsync("biggive-form-field-select-option", { value: "Relevance", label: "Relevance" }) : null))), hAsync("div", { class: "selected-filter-wrap" }, hAsync("div", { class: "selected-filters" }), hAsync("div", { class: "clear-all" }, hAsync("a", { onClick: this.handleClearAll }, "Clear all"))), hAsync("div", { class: "campaign-grid" }, hAsync("slot", { name: "campaign-grid" })))));
+    return (hAsync("div", { class: 'container space-below-' + this.spaceBelow }, hAsync("div", { class: "sleeve" }, hAsync("div", { class: "search-wrap" }, hAsync("h4", null, this.intro), hAsync("div", { class: "field-wrap" }, hAsync("div", { class: "input-wrap" }, hAsync("svg", { xmlns: "http://www.w3.org/2000/svg", class: "icon", viewBox: "0 0 512 512" }, hAsync("path", { d: faMagnifyingGlass.icon[4].toString() })), hAsync("input", { type: "text", value: (_a = this.searchText) !== null && _a !== void 0 ? _a : '', class: "input-text", placeholder: this.placeholderText, onInput: this.handleSearchTextChanged, onKeyDown: this.handleEnterPressed })), hAsync("biggive-button", { onClick: this.handleSearchButtonPressed, label: this.buttonText }))), hAsync("div", { class: "sort-filter-wrap" }, hAsync("div", { class: "filter-wrap" }, hAsync("biggive-button", { class: "filter", colourScheme: "primary", onClick: this.handleFilterButtonClick, label: "Filter", fullWidth: true, "space-below": "0" }), hAsync("biggive-popup", { id: "filter-popup" }, hAsync("h4", { class: "space-above-0 space-below-3 text-colour-primary" }, "Filters"), hAsync("div", { class: "select-wrapper-1" }, hAsync("biggive-form-field-select", { backgroundColour: "white", prompt: "Category", placeholder: this.categoriesPlaceHolderText, selectedLabel: this.selectedFilterCategory, options: this.optionsToArray(this.categoryOptions || []), selectionChanged: this.categoryFilterSelectionChanged, id: "categories", "space-below": "2" })), hAsync("div", { class: "select-wrapper-2" }, hAsync("biggive-form-field-select", { backgroundColour: "white", prompt: "Beneficiary", placeholder: this.beneficiariesPlaceHolderText, selectedLabel: this.selectedFilterBeneficiary, options: this.optionsToArray(this.beneficiaryOptions || []), selectionChanged: this.beneficiarySelectionChanged, id: "beneficiaries", "space-below": "2" })), hAsync("div", { class: "select-wrapper-3" }, hAsync("biggive-form-field-select", { backgroundColour: "white", prompt: "Location", placeholder: this.locationsPlaceHolderText, selectedLabel: this.selectedFilterLocation, options: this.optionsToArray(this.locationOptions || []), selectionChanged: this.locationSelectionChanged, id: "locations", "space-below": "2" })), hAsync("div", { class: "select-wrapper-4" }, hAsync("biggive-form-field-select", { backgroundColour: "white", prompt: "Funding", placeholder: this.fundingPlaceHolderText, selectedLabel: this.selectedFilterFunding, options: this.optionsToArray(this.fundingOptions || []), selectionChanged: this.fundingSelectionChanged, id: "funding", "space-below": "2" })), hAsync("div", { class: "align-right" }, hAsync("biggive-button", { label: "Apply filters", onClick: this.handleApplyFilterButtonClick })))), hAsync("div", { class: "sort-wrap" }, hAsync("biggive-form-field-select", { options: [
+        { value: 'amountRaised', label: 'Most raised' },
+        { value: 'matchFundsRemaining', label: 'Match funds remaining' },
+      ], prompt: null, "select-style": "underlined", placeholder: this.sortByPlaceholderText, selectedLabel: this.selectedSortByOption, selectionChanged: this.sortBySelectionChanged, id: "sort-by" }, hAsync("biggive-form-field-select-option", { value: "amountRaised", label: "Most raised" }), hAsync("biggive-form-field-select-option", { value: "matchFundsRemaining", label: "Match funds remaining" }), (this.searchText || '').length > 0 ? hAsync("biggive-form-field-select-option", { value: "Relevance", label: "Relevance" }) : null))), hAsync("div", { class: "selected-filter-wrap" }, hAsync("div", { class: "selected-filters" }), hAsync("div", { class: "clear-all" }, hAsync("a", { onClick: this.handleClearAll }, "Clear all"))), hAsync("div", { class: "campaign-grid" }, hAsync("slot", { name: "campaign-grid" })))));
+  }
+  optionsToArray(options) {
+    if (typeof options === 'string') {
+      options = JSON.parse(options);
+    }
+    if (Array.isArray(options)) {
+      return options.map((option) => ({ value: option, label: option }));
+    }
+    return Object.entries(options).map(entry => ({ value: entry[0], label: entry[1] }));
   }
   get el() { return getElement(this); }
   static get style() { return biggiveCampaignCardFilterGridCss; }
@@ -7424,23 +7436,28 @@ class BiggiveFormFieldSelect {
     const greyIfRequired = this.backgroundColour === 'grey' ? ' grey' : '';
     let options;
     if (typeof this.options === 'string') {
-      options = JSON.parse(this.options);
+      let parsed = JSON.parse(this.options);
+      if (!Array.isArray(parsed)) {
+        throw new Error('Options should be an Array<{ label: string; value: string }>');
+      }
+      options = parsed;
     }
     else {
       options = this.options;
     }
-    if (Array.isArray(options)) {
-      options = Object.fromEntries(options.map((value) => [value, value]));
-    }
     if (typeof this.placeholder === 'string' && typeof this.selectedValue !== 'string') {
-      options = Object.assign({ __placeholder__: this.placeholder }, options);
+      options = [{ value: '__placeholder__', label: this.placeholder }, ...options];
+    }
+    if (typeof options === 'undefined') {
+      console.error('options undefined');
+      options = [];
     }
     return (hAsync("div", { class: "selectWrapper" }, hAsync("label", { class: greyIfRequired }, hAsync("div", { class: 'prompt' + greyIfRequired }, this.prompt), hAsync("div", { class: 'dropdown space-below-' +
         this.spaceBelow +
         ' select-style-' +
         this.selectStyle +
         (this.prompt === null ? '  noprompt' : '') +
-        (this.selectedOptionColour === 'inherit' ? ' inherit-colour' : '') }, hAsync("div", { class: "sleeve" }, hAsync("select", { class: greyIfRequired, onChange: this.doOptionSelectCompletedHandler }, Object.entries(options).map((value) => (hAsync("option", { selected: this.selectedValue === value[0], value: value[0] }, value[1])))), hAsync("div", { class: "arrow" }))))));
+        (this.selectedOptionColour === 'inherit' ? ' inherit-colour' : '') }, hAsync("div", { class: "sleeve" }, hAsync("select", { class: greyIfRequired, onChange: this.doOptionSelectCompletedHandler }, options.map(option => (hAsync("option", { selected: this.selectedValue === option.value, value: option.value }, option.label)))), hAsync("div", { class: "arrow" }))))));
   }
   get el() { return getElement(this); }
   static get style() { return biggiveFormFieldSelectCss; }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@biggive/components",
   "_comment": "Version number below is automatically replaced during CircleCI build.",
-  "version": "202309260920.0.0",
+  "version": "202309271411.0.0",
   "description": "Big Give Components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",