@biggive/components 202311201334.0.0 → 202311211120.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.
Files changed (10) hide show
  1. package/dist/biggive/biggive.esm.js +1 -1
  2. package/dist/biggive/p-ea6a4073.entry.js +1 -0
  3. package/dist/cjs/biggive-accordion_42.cjs.entry.js +39 -56
  4. package/dist/collection/components/biggive-campaign-card-filter-grid/biggive-campaign-card-filter-grid.js +39 -56
  5. package/dist/components/biggive-campaign-card-filter-grid.js +39 -56
  6. package/dist/esm/biggive-accordion_42.entry.js +39 -56
  7. package/dist/types/components/biggive-campaign-card-filter-grid/biggive-campaign-card-filter-grid.d.ts +1 -0
  8. package/hydrate/index.js +39 -56
  9. package/package.json +1 -1
  10. package/dist/biggive/p-82cb5fc4.entry.js +0 -1
package/dist/cjs/biggive-accordion_42.cjs.entry.js CHANGED
@@ -322,60 +322,6 @@ 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
- }
379
325
  this.filtersApplied =
380
326
  typeof searchAndFilterObj.filterBeneficiary === 'string' ||
381
327
  typeof searchAndFilterObj.filterCategory === 'string' ||
@@ -463,6 +409,35 @@ const BiggiveCampaignCardFilterGrid = class {
463
409
  filterLocation: this.selectedFilterLocation,
464
410
  };
465
411
  }
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
+ }
466
441
  componentWillRender() {
467
442
  this.filtersApplied =
468
443
  this.selectedFilterCategory !== null || this.selectedFilterBeneficiary !== null || this.selectedFilterFunding !== null || this.selectedFilterLocation !== null;
@@ -470,10 +445,18 @@ const BiggiveCampaignCardFilterGrid = class {
470
445
  }
471
446
  render() {
472
447
  var _a;
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: [
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: [
474
449
  { value: 'amountRaised', label: 'Most raised' },
475
450
  { value: 'matchFundsRemaining', label: 'Match funds remaining' },
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" })))));
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" })))));
477
460
  }
478
461
  optionsToArray(options) {
479
462
  if (typeof options === 'string') {
package/dist/collection/components/biggive-campaign-card-filter-grid/biggive-campaign-card-filter-grid.js CHANGED
@@ -37,60 +37,6 @@ 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
- }
94
40
  this.filtersApplied =
95
41
  typeof searchAndFilterObj.filterBeneficiary === 'string' ||
96
42
  typeof searchAndFilterObj.filterCategory === 'string' ||
@@ -178,6 +124,35 @@ export class BiggiveCampaignCardFilterGrid {
178
124
  filterLocation: this.selectedFilterLocation,
179
125
  };
180
126
  }
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
+ }
181
156
  componentWillRender() {
182
157
  this.filtersApplied =
183
158
  this.selectedFilterCategory !== null || this.selectedFilterBeneficiary !== null || this.selectedFilterFunding !== null || this.selectedFilterLocation !== null;
@@ -185,10 +160,18 @@ export class BiggiveCampaignCardFilterGrid {
185
160
  }
186
161
  render() {
187
162
  var _a;
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: [
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: [
189
164
  { value: 'amountRaised', label: 'Most raised' },
190
165
  { value: 'matchFundsRemaining', label: 'Match funds remaining' },
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" })))));
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" })))));
192
175
  }
193
176
  optionsToArray(options) {
194
177
  if (typeof options === 'string') {
package/dist/components/biggive-campaign-card-filter-grid.js CHANGED
@@ -47,60 +47,6 @@ 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
- }
104
50
  this.filtersApplied =
105
51
  typeof searchAndFilterObj.filterBeneficiary === 'string' ||
106
52
  typeof searchAndFilterObj.filterCategory === 'string' ||
@@ -188,6 +134,35 @@ const BiggiveCampaignCardFilterGrid$1 = /*@__PURE__*/ proxyCustomElement(class e
188
134
  filterLocation: this.selectedFilterLocation,
189
135
  };
190
136
  }
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
+ }
191
166
  componentWillRender() {
192
167
  this.filtersApplied =
193
168
  this.selectedFilterCategory !== null || this.selectedFilterBeneficiary !== null || this.selectedFilterFunding !== null || this.selectedFilterLocation !== null;
@@ -195,10 +170,18 @@ const BiggiveCampaignCardFilterGrid$1 = /*@__PURE__*/ proxyCustomElement(class e
195
170
  }
196
171
  render() {
197
172
  var _a;
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: [
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: [
199
174
  { value: 'amountRaised', label: 'Most raised' },
200
175
  { value: 'matchFundsRemaining', label: 'Match funds remaining' },
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" })))));
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" })))));
202
185
  }
203
186
  optionsToArray(options) {
204
187
  if (typeof options === 'string') {
package/dist/esm/biggive-accordion_42.entry.js CHANGED
@@ -318,60 +318,6 @@ 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
- }
375
321
  this.filtersApplied =
376
322
  typeof searchAndFilterObj.filterBeneficiary === 'string' ||
377
323
  typeof searchAndFilterObj.filterCategory === 'string' ||
@@ -459,6 +405,35 @@ const BiggiveCampaignCardFilterGrid = class {
459
405
  filterLocation: this.selectedFilterLocation,
460
406
  };
461
407
  }
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
+ }
462
437
  componentWillRender() {
463
438
  this.filtersApplied =
464
439
  this.selectedFilterCategory !== null || this.selectedFilterBeneficiary !== null || this.selectedFilterFunding !== null || this.selectedFilterLocation !== null;
@@ -466,10 +441,18 @@ const BiggiveCampaignCardFilterGrid = class {
466
441
  }
467
442
  render() {
468
443
  var _a;
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: [
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: [
470
445
  { value: 'amountRaised', label: 'Most raised' },
471
446
  { value: 'matchFundsRemaining', label: 'Match funds remaining' },
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" })))));
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" })))));
473
456
  }
474
457
  optionsToArray(options) {
475
458
  if (typeof options === 'string') {
package/dist/types/components/biggive-campaign-card-filter-grid/biggive-campaign-card-filter-grid.d.ts CHANGED
@@ -96,6 +96,7 @@ export declare class BiggiveCampaignCardFilterGrid {
96
96
  private sortBySelectionChanged;
97
97
  private getSearchAndFilterObject;
98
98
  private handleApplyFilterButtonClick;
99
+ private removeFilter;
99
100
  private handleSearchButtonPressed;
100
101
  private handleSearchTextChanged;
101
102
  private handleEnterPressed;