@biggive/components 202311211130.0.0 → 202311211133.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -322,6 +322,60 @@ const BiggiveCampaignCardFilterGrid = class {
322
322
  button.remove();
323
323
  });
324
324
  }
325
+ let filters = {
326
+ beneficiaries: searchAndFilterObj.filterBeneficiary,
327
+ categories: searchAndFilterObj.filterCategory,
328
+ funding: searchAndFilterObj.filterFunding,
329
+ locations: searchAndFilterObj.filterLocation,
330
+ };
331
+ const keys = Object.keys(filters);
332
+ for (const filterKey of keys) {
333
+ // https://stackoverflow.com/a/69757191/2803757
334
+ const filterValue = filters[filterKey];
335
+ if (filterValue === null || filterValue.length === 0) {
336
+ continue;
337
+ }
338
+ let button = document.createElement('span');
339
+ button.classList.add('button');
340
+ button.dataset.id = filterKey;
341
+ button.innerText = filterValue;
342
+ if (selectedFilters) {
343
+ selectedFilters.appendChild(button);
344
+ }
345
+ button.addEventListener('click', () => {
346
+ var _a;
347
+ switch (filterKey) {
348
+ case 'beneficiaries':
349
+ this.selectedFilterBeneficiary = null;
350
+ break;
351
+ case 'categories':
352
+ this.selectedFilterCategory = null;
353
+ break;
354
+ case 'funding':
355
+ this.selectedFilterFunding = null;
356
+ break;
357
+ case 'locations':
358
+ this.selectedFilterLocation = null;
359
+ break;
360
+ default:
361
+ // This asks the compiler to check that we are in dead code, i.e. we covered all the possible filter keys
362
+ // above. If we missed one we would get a compile error trying to assign a string to a never.
363
+ const exhaustiveSwitch = filterKey;
364
+ console.error(exhaustiveSwitch);
365
+ }
366
+ button.remove();
367
+ this.doSearchAndFilterUpdate.emit(this.getSearchAndFilterObject());
368
+ if (button.dataset.id === undefined) {
369
+ return;
370
+ }
371
+ const selectEl = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById(button.dataset.id);
372
+ if (!selectEl) {
373
+ return;
374
+ }
375
+ selectEl.selectedLabel = null;
376
+ selectEl.selectedValue = null;
377
+ });
378
+ }
325
379
  this.filtersApplied =
326
380
  typeof searchAndFilterObj.filterBeneficiary === 'string' ||
327
381
  typeof searchAndFilterObj.filterCategory === 'string' ||
@@ -409,35 +463,6 @@ const BiggiveCampaignCardFilterGrid = class {
409
463
  filterLocation: this.selectedFilterLocation,
410
464
  };
411
465
  }
412
- removeFilter(filterKey) {
413
- var _a;
414
- switch (filterKey) {
415
- case 'beneficiaries':
416
- this.selectedFilterBeneficiary = null;
417
- break;
418
- case 'categories':
419
- this.selectedFilterCategory = null;
420
- break;
421
- case 'funding':
422
- this.selectedFilterFunding = null;
423
- break;
424
- case 'locations':
425
- this.selectedFilterLocation = null;
426
- break;
427
- default:
428
- // This asks the compiler to check that we are in dead code, i.e. we covered all the possible filter keys
429
- // above. If we missed one we would get a compile error trying to assign a string to a never.
430
- const exhaustiveSwitch = filterKey;
431
- console.error(exhaustiveSwitch);
432
- }
433
- const selectEl = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById(filterKey);
434
- if (!selectEl) {
435
- return;
436
- }
437
- selectEl.selectedLabel = null;
438
- selectEl.selectedValue = null;
439
- this.doSearchAndFilterUpdate.emit(this.getSearchAndFilterObject());
440
- }
441
466
  componentWillRender() {
442
467
  this.filtersApplied =
443
468
  this.selectedFilterCategory !== null || this.selectedFilterBeneficiary !== null || this.selectedFilterFunding !== null || this.selectedFilterLocation !== null;
@@ -445,18 +470,10 @@ const BiggiveCampaignCardFilterGrid = class {
445
470
  }
446
471
  render() {
447
472
  var _a;
448
- 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, selectedValue: 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, selectedValue: 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, selectedValue: 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, selectedValue: 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: [
473
+ 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: [
449
474
  { value: 'amountRaised', label: 'Most raised' },
450
475
  { value: 'matchFundsRemaining', label: 'Match funds remaining' },
451
- ], 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" }, this.selectedFilterCategory && (index.h("span", { class: "button", onClick: () => {
452
- this.removeFilter('categories');
453
- } }, this.selectedFilterCategory)), this.selectedFilterBeneficiary && (index.h("span", { class: "button", onClick: () => {
454
- this.removeFilter('beneficiaries');
455
- } }, this.selectedFilterBeneficiary)), this.selectedFilterLocation && (index.h("span", { class: "button", onClick: () => {
456
- this.removeFilter('locations');
457
- } }, this.selectedFilterLocation)), this.selectedFilterFunding && (index.h("span", { class: "button", onClick: () => {
458
- this.removeFilter('funding');
459
- } }, this.selectedFilterFunding))), 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" })))));
476
+ ], 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" })))));
460
477
  }
461
478
  optionsToArray(options) {
462
479
  if (typeof options === 'string') {
@@ -37,6 +37,60 @@ export class BiggiveCampaignCardFilterGrid {
37
37
  button.remove();
38
38
  });
39
39
  }
40
+ let filters = {
41
+ beneficiaries: searchAndFilterObj.filterBeneficiary,
42
+ categories: searchAndFilterObj.filterCategory,
43
+ funding: searchAndFilterObj.filterFunding,
44
+ locations: searchAndFilterObj.filterLocation,
45
+ };
46
+ const keys = Object.keys(filters);
47
+ for (const filterKey of keys) {
48
+ // https://stackoverflow.com/a/69757191/2803757
49
+ const filterValue = filters[filterKey];
50
+ if (filterValue === null || filterValue.length === 0) {
51
+ continue;
52
+ }
53
+ let button = document.createElement('span');
54
+ button.classList.add('button');
55
+ button.dataset.id = filterKey;
56
+ button.innerText = filterValue;
57
+ if (selectedFilters) {
58
+ selectedFilters.appendChild(button);
59
+ }
60
+ button.addEventListener('click', () => {
61
+ var _a;
62
+ switch (filterKey) {
63
+ case 'beneficiaries':
64
+ this.selectedFilterBeneficiary = null;
65
+ break;
66
+ case 'categories':
67
+ this.selectedFilterCategory = null;
68
+ break;
69
+ case 'funding':
70
+ this.selectedFilterFunding = null;
71
+ break;
72
+ case 'locations':
73
+ this.selectedFilterLocation = null;
74
+ break;
75
+ default:
76
+ // This asks the compiler to check that we are in dead code, i.e. we covered all the possible filter keys
77
+ // above. If we missed one we would get a compile error trying to assign a string to a never.
78
+ const exhaustiveSwitch = filterKey;
79
+ console.error(exhaustiveSwitch);
80
+ }
81
+ button.remove();
82
+ this.doSearchAndFilterUpdate.emit(this.getSearchAndFilterObject());
83
+ if (button.dataset.id === undefined) {
84
+ return;
85
+ }
86
+ const selectEl = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById(button.dataset.id);
87
+ if (!selectEl) {
88
+ return;
89
+ }
90
+ selectEl.selectedLabel = null;
91
+ selectEl.selectedValue = null;
92
+ });
93
+ }
40
94
  this.filtersApplied =
41
95
  typeof searchAndFilterObj.filterBeneficiary === 'string' ||
42
96
  typeof searchAndFilterObj.filterCategory === 'string' ||
@@ -124,35 +178,6 @@ export class BiggiveCampaignCardFilterGrid {
124
178
  filterLocation: this.selectedFilterLocation,
125
179
  };
126
180
  }
127
- removeFilter(filterKey) {
128
- var _a;
129
- switch (filterKey) {
130
- case 'beneficiaries':
131
- this.selectedFilterBeneficiary = null;
132
- break;
133
- case 'categories':
134
- this.selectedFilterCategory = null;
135
- break;
136
- case 'funding':
137
- this.selectedFilterFunding = null;
138
- break;
139
- case 'locations':
140
- this.selectedFilterLocation = null;
141
- break;
142
- default:
143
- // This asks the compiler to check that we are in dead code, i.e. we covered all the possible filter keys
144
- // above. If we missed one we would get a compile error trying to assign a string to a never.
145
- const exhaustiveSwitch = filterKey;
146
- console.error(exhaustiveSwitch);
147
- }
148
- const selectEl = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById(filterKey);
149
- if (!selectEl) {
150
- return;
151
- }
152
- selectEl.selectedLabel = null;
153
- selectEl.selectedValue = null;
154
- this.doSearchAndFilterUpdate.emit(this.getSearchAndFilterObject());
155
- }
156
181
  componentWillRender() {
157
182
  this.filtersApplied =
158
183
  this.selectedFilterCategory !== null || this.selectedFilterBeneficiary !== null || this.selectedFilterFunding !== null || this.selectedFilterLocation !== null;
@@ -160,18 +185,10 @@ export class BiggiveCampaignCardFilterGrid {
160
185
  }
161
186
  render() {
162
187
  var _a;
163
- 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, selectedValue: 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, selectedValue: 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, selectedValue: 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, selectedValue: 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: [
188
+ 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: [
164
189
  { value: 'amountRaised', label: 'Most raised' },
165
190
  { value: 'matchFundsRemaining', label: 'Match funds remaining' },
166
- ], 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" }, this.selectedFilterCategory && (h("span", { class: "button", onClick: () => {
167
- this.removeFilter('categories');
168
- } }, this.selectedFilterCategory)), this.selectedFilterBeneficiary && (h("span", { class: "button", onClick: () => {
169
- this.removeFilter('beneficiaries');
170
- } }, this.selectedFilterBeneficiary)), this.selectedFilterLocation && (h("span", { class: "button", onClick: () => {
171
- this.removeFilter('locations');
172
- } }, this.selectedFilterLocation)), this.selectedFilterFunding && (h("span", { class: "button", onClick: () => {
173
- this.removeFilter('funding');
174
- } }, this.selectedFilterFunding))), h("div", { class: "clear-all" }, h("a", { onClick: this.handleClearAll }, "Clear all"))), h("div", { class: "campaign-grid" }, h("slot", { name: "campaign-grid" })))));
191
+ ], 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" })))));
175
192
  }
176
193
  optionsToArray(options) {
177
194
  if (typeof options === 'string') {
@@ -47,6 +47,60 @@ const BiggiveCampaignCardFilterGrid$1 = /*@__PURE__*/ proxyCustomElement(class e
47
47
  button.remove();
48
48
  });
49
49
  }
50
+ let filters = {
51
+ beneficiaries: searchAndFilterObj.filterBeneficiary,
52
+ categories: searchAndFilterObj.filterCategory,
53
+ funding: searchAndFilterObj.filterFunding,
54
+ locations: searchAndFilterObj.filterLocation,
55
+ };
56
+ const keys = Object.keys(filters);
57
+ for (const filterKey of keys) {
58
+ // https://stackoverflow.com/a/69757191/2803757
59
+ const filterValue = filters[filterKey];
60
+ if (filterValue === null || filterValue.length === 0) {
61
+ continue;
62
+ }
63
+ let button = document.createElement('span');
64
+ button.classList.add('button');
65
+ button.dataset.id = filterKey;
66
+ button.innerText = filterValue;
67
+ if (selectedFilters) {
68
+ selectedFilters.appendChild(button);
69
+ }
70
+ button.addEventListener('click', () => {
71
+ var _a;
72
+ switch (filterKey) {
73
+ case 'beneficiaries':
74
+ this.selectedFilterBeneficiary = null;
75
+ break;
76
+ case 'categories':
77
+ this.selectedFilterCategory = null;
78
+ break;
79
+ case 'funding':
80
+ this.selectedFilterFunding = null;
81
+ break;
82
+ case 'locations':
83
+ this.selectedFilterLocation = null;
84
+ break;
85
+ default:
86
+ // This asks the compiler to check that we are in dead code, i.e. we covered all the possible filter keys
87
+ // above. If we missed one we would get a compile error trying to assign a string to a never.
88
+ const exhaustiveSwitch = filterKey;
89
+ console.error(exhaustiveSwitch);
90
+ }
91
+ button.remove();
92
+ this.doSearchAndFilterUpdate.emit(this.getSearchAndFilterObject());
93
+ if (button.dataset.id === undefined) {
94
+ return;
95
+ }
96
+ const selectEl = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById(button.dataset.id);
97
+ if (!selectEl) {
98
+ return;
99
+ }
100
+ selectEl.selectedLabel = null;
101
+ selectEl.selectedValue = null;
102
+ });
103
+ }
50
104
  this.filtersApplied =
51
105
  typeof searchAndFilterObj.filterBeneficiary === 'string' ||
52
106
  typeof searchAndFilterObj.filterCategory === 'string' ||
@@ -134,35 +188,6 @@ const BiggiveCampaignCardFilterGrid$1 = /*@__PURE__*/ proxyCustomElement(class e
134
188
  filterLocation: this.selectedFilterLocation,
135
189
  };
136
190
  }
137
- removeFilter(filterKey) {
138
- var _a;
139
- switch (filterKey) {
140
- case 'beneficiaries':
141
- this.selectedFilterBeneficiary = null;
142
- break;
143
- case 'categories':
144
- this.selectedFilterCategory = null;
145
- break;
146
- case 'funding':
147
- this.selectedFilterFunding = null;
148
- break;
149
- case 'locations':
150
- this.selectedFilterLocation = null;
151
- break;
152
- default:
153
- // This asks the compiler to check that we are in dead code, i.e. we covered all the possible filter keys
154
- // above. If we missed one we would get a compile error trying to assign a string to a never.
155
- const exhaustiveSwitch = filterKey;
156
- console.error(exhaustiveSwitch);
157
- }
158
- const selectEl = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById(filterKey);
159
- if (!selectEl) {
160
- return;
161
- }
162
- selectEl.selectedLabel = null;
163
- selectEl.selectedValue = null;
164
- this.doSearchAndFilterUpdate.emit(this.getSearchAndFilterObject());
165
- }
166
191
  componentWillRender() {
167
192
  this.filtersApplied =
168
193
  this.selectedFilterCategory !== null || this.selectedFilterBeneficiary !== null || this.selectedFilterFunding !== null || this.selectedFilterLocation !== null;
@@ -170,18 +195,10 @@ const BiggiveCampaignCardFilterGrid$1 = /*@__PURE__*/ proxyCustomElement(class e
170
195
  }
171
196
  render() {
172
197
  var _a;
173
- 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, selectedValue: 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, selectedValue: 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, selectedValue: 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, selectedValue: 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: [
198
+ 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: [
174
199
  { value: 'amountRaised', label: 'Most raised' },
175
200
  { value: 'matchFundsRemaining', label: 'Match funds remaining' },
176
- ], 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" }, this.selectedFilterCategory && (h("span", { class: "button", onClick: () => {
177
- this.removeFilter('categories');
178
- } }, this.selectedFilterCategory)), this.selectedFilterBeneficiary && (h("span", { class: "button", onClick: () => {
179
- this.removeFilter('beneficiaries');
180
- } }, this.selectedFilterBeneficiary)), this.selectedFilterLocation && (h("span", { class: "button", onClick: () => {
181
- this.removeFilter('locations');
182
- } }, this.selectedFilterLocation)), this.selectedFilterFunding && (h("span", { class: "button", onClick: () => {
183
- this.removeFilter('funding');
184
- } }, this.selectedFilterFunding))), h("div", { class: "clear-all" }, h("a", { onClick: this.handleClearAll }, "Clear all"))), h("div", { class: "campaign-grid" }, h("slot", { name: "campaign-grid" })))));
201
+ ], 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" })))));
185
202
  }
186
203
  optionsToArray(options) {
187
204
  if (typeof options === 'string') {
@@ -318,6 +318,60 @@ const BiggiveCampaignCardFilterGrid = class {
318
318
  button.remove();
319
319
  });
320
320
  }
321
+ let filters = {
322
+ beneficiaries: searchAndFilterObj.filterBeneficiary,
323
+ categories: searchAndFilterObj.filterCategory,
324
+ funding: searchAndFilterObj.filterFunding,
325
+ locations: searchAndFilterObj.filterLocation,
326
+ };
327
+ const keys = Object.keys(filters);
328
+ for (const filterKey of keys) {
329
+ // https://stackoverflow.com/a/69757191/2803757
330
+ const filterValue = filters[filterKey];
331
+ if (filterValue === null || filterValue.length === 0) {
332
+ continue;
333
+ }
334
+ let button = document.createElement('span');
335
+ button.classList.add('button');
336
+ button.dataset.id = filterKey;
337
+ button.innerText = filterValue;
338
+ if (selectedFilters) {
339
+ selectedFilters.appendChild(button);
340
+ }
341
+ button.addEventListener('click', () => {
342
+ var _a;
343
+ switch (filterKey) {
344
+ case 'beneficiaries':
345
+ this.selectedFilterBeneficiary = null;
346
+ break;
347
+ case 'categories':
348
+ this.selectedFilterCategory = null;
349
+ break;
350
+ case 'funding':
351
+ this.selectedFilterFunding = null;
352
+ break;
353
+ case 'locations':
354
+ this.selectedFilterLocation = null;
355
+ break;
356
+ default:
357
+ // This asks the compiler to check that we are in dead code, i.e. we covered all the possible filter keys
358
+ // above. If we missed one we would get a compile error trying to assign a string to a never.
359
+ const exhaustiveSwitch = filterKey;
360
+ console.error(exhaustiveSwitch);
361
+ }
362
+ button.remove();
363
+ this.doSearchAndFilterUpdate.emit(this.getSearchAndFilterObject());
364
+ if (button.dataset.id === undefined) {
365
+ return;
366
+ }
367
+ const selectEl = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById(button.dataset.id);
368
+ if (!selectEl) {
369
+ return;
370
+ }
371
+ selectEl.selectedLabel = null;
372
+ selectEl.selectedValue = null;
373
+ });
374
+ }
321
375
  this.filtersApplied =
322
376
  typeof searchAndFilterObj.filterBeneficiary === 'string' ||
323
377
  typeof searchAndFilterObj.filterCategory === 'string' ||
@@ -405,35 +459,6 @@ const BiggiveCampaignCardFilterGrid = class {
405
459
  filterLocation: this.selectedFilterLocation,
406
460
  };
407
461
  }
408
- removeFilter(filterKey) {
409
- var _a;
410
- switch (filterKey) {
411
- case 'beneficiaries':
412
- this.selectedFilterBeneficiary = null;
413
- break;
414
- case 'categories':
415
- this.selectedFilterCategory = null;
416
- break;
417
- case 'funding':
418
- this.selectedFilterFunding = null;
419
- break;
420
- case 'locations':
421
- this.selectedFilterLocation = null;
422
- break;
423
- default:
424
- // This asks the compiler to check that we are in dead code, i.e. we covered all the possible filter keys
425
- // above. If we missed one we would get a compile error trying to assign a string to a never.
426
- const exhaustiveSwitch = filterKey;
427
- console.error(exhaustiveSwitch);
428
- }
429
- const selectEl = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById(filterKey);
430
- if (!selectEl) {
431
- return;
432
- }
433
- selectEl.selectedLabel = null;
434
- selectEl.selectedValue = null;
435
- this.doSearchAndFilterUpdate.emit(this.getSearchAndFilterObject());
436
- }
437
462
  componentWillRender() {
438
463
  this.filtersApplied =
439
464
  this.selectedFilterCategory !== null || this.selectedFilterBeneficiary !== null || this.selectedFilterFunding !== null || this.selectedFilterLocation !== null;
@@ -441,18 +466,10 @@ const BiggiveCampaignCardFilterGrid = class {
441
466
  }
442
467
  render() {
443
468
  var _a;
444
- 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, selectedValue: 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, selectedValue: 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, selectedValue: 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, selectedValue: 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: [
469
+ 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: [
445
470
  { value: 'amountRaised', label: 'Most raised' },
446
471
  { value: 'matchFundsRemaining', label: 'Match funds remaining' },
447
- ], 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" }, this.selectedFilterCategory && (h("span", { class: "button", onClick: () => {
448
- this.removeFilter('categories');
449
- } }, this.selectedFilterCategory)), this.selectedFilterBeneficiary && (h("span", { class: "button", onClick: () => {
450
- this.removeFilter('beneficiaries');
451
- } }, this.selectedFilterBeneficiary)), this.selectedFilterLocation && (h("span", { class: "button", onClick: () => {
452
- this.removeFilter('locations');
453
- } }, this.selectedFilterLocation)), this.selectedFilterFunding && (h("span", { class: "button", onClick: () => {
454
- this.removeFilter('funding');
455
- } }, this.selectedFilterFunding))), h("div", { class: "clear-all" }, h("a", { onClick: this.handleClearAll }, "Clear all"))), h("div", { class: "campaign-grid" }, h("slot", { name: "campaign-grid" })))));
472
+ ], 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" })))));
456
473
  }
457
474
  optionsToArray(options) {
458
475
  if (typeof options === 'string') {
@@ -96,7 +96,6 @@ export declare class BiggiveCampaignCardFilterGrid {
96
96
  private sortBySelectionChanged;
97
97
  private getSearchAndFilterObject;
98
98
  private handleApplyFilterButtonClick;
99
- private removeFilter;
100
99
  private handleSearchButtonPressed;
101
100
  private handleSearchTextChanged;
102
101
  private handleEnterPressed;