@biggive/components 202309211700.0.0 → 202309271411.0.0

package/hydrate/index.js

@@ -5936,7 +5936,7 @@ class BiggiveBasicCard {
         ' clip-top-right-corner-' +
         this.clipTopRightCorner +
         ' add-animation-' +
-        this.addAnimation, style: { 'background-image': "url('" + this.backgroundImageUrl + "')" } }, hAsync("a", { href: this.buttonUrl }, hAsync("div", { class: 'sleeve background-colour-' + this.cardColour + ' text-colour-' + this.textColour }, hAsync("div", { class: "content-wrap" }, this.icon == true ? (hAsync("div", { class: "icon" }, hAsync("svg", { width: "53", height: "39", viewBox: "0 0 53 39", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, hAsync("path", { d: "M38.7009 13.6572L52.3535 38.6959H25.0386L38.7009 13.6572Z", class: "fill-black" }), hAsync("path", { d: "M20.4789 36.4199L6.36785e-06 5.89713e-05L40.9724 6.61352e-05L20.4789 36.4199Z", class: 'fill-' + this.iconColour })))) : null, this.mainImageUrl != '' ? (hAsync("div", { class: "main-image-container" }, hAsync("div", { class: "image-wrap" }, hAsync("img", { src: this.mainImageUrl, alt: this.mainImageAltText, title: this.mainImageAltText })))) : null, hAsync(HeadingTag, { class: "title" }, this.mainTitle), hAsync("div", { class: "subtitle" }, this.subtitle), hAsync("div", { class: "teaser" }, this.teaser), this.buttonLabel != null && this.buttonUrl != null && this.buttonUrl != '' ? (hAsync("div", { class: 'button-wrap align-' + this.buttonAlign }, hAsync("biggive-button", { "colour-scheme": this.buttonColourScheme, label: this.buttonLabel }))) : null)))));
+        this.addAnimation, style: { 'background-image': "url('" + this.backgroundImageUrl + "')" } }, hAsync("a", { href: this.buttonUrl }, hAsync("div", { class: 'sleeve background-colour-' + this.cardColour + ' text-colour-' + this.textColour }, hAsync("div", { class: "content-wrap" }, this.icon == true ? (hAsync("div", { class: "icon" }, hAsync("svg", { width: "53", height: "39", viewBox: "0 0 53 39", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, hAsync("path", { d: "M38.7009 13.6572L52.3535 38.6959H25.0386L38.7009 13.6572Z", class: "fill-black" }), hAsync("path", { d: "M20.4789 36.4199L6.36785e-06 5.89713e-05L40.9724 6.61352e-05L20.4789 36.4199Z", class: 'fill-' + this.iconColour })))) : null, this.mainImageUrl != '' ? (hAsync("div", { class: "main-image-container" }, hAsync("div", { class: "image-wrap" }, hAsync("img", { src: this.mainImageUrl, alt: this.mainImageAltText, title: this.mainImageAltText })))) : null, hAsync(HeadingTag, { class: "title" }, this.mainTitle), hAsync("div", { class: "subtitle" }, this.subtitle), hAsync("div", { class: "teaser" }, this.teaser), this.buttonLabel != null && this.buttonUrl != null && this.buttonUrl != '' ? (hAsync("div", { class: 'button-wrap align-' + this.buttonAlign }, hAsync("biggive-button", { "colour-scheme": this.buttonColourScheme, url: this.buttonUrl, label: this.buttonLabel }))) : null)))));
   }
   static get style() { return biggiveBasicCardCss; }
   static get cmpMeta() { return {
@@ -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": "202309211700.0.0",
+  "version": "202309271411.0.0",
   "description": "Big Give Components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",