@biggive/components 202304251558.0.0 → 202305040926.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 (15) hide show
  1. package/dist/biggive/biggive.esm.js +1 -1
  2. package/dist/biggive/p-39db9751.entry.js +1 -0
  3. package/dist/cjs/biggive-accordion_43.cjs.entry.js +49 -12
  4. package/dist/collection/components/biggive-campaign-card-filter-grid/biggive-campaign-card-filter-grid.js +8 -8
  5. package/dist/collection/components/biggive-totalizer/biggive-totalizer.css +10 -2
  6. package/dist/collection/components/biggive-totalizer/biggive-totalizer.js +45 -8
  7. package/dist/components/biggive-campaign-card-filter-grid.js +4 -3
  8. package/dist/components/biggive-totalizer.js +45 -9
  9. package/dist/esm/biggive-accordion_43.entry.js +49 -12
  10. package/dist/types/components/biggive-campaign-card-filter-grid/biggive-campaign-card-filter-grid.d.ts +3 -2
  11. package/dist/types/components/biggive-totalizer/biggive-totalizer.d.ts +1 -0
  12. package/dist/types/components.d.ts +4 -4
  13. package/hydrate/index.js +49 -12
  14. package/package.json +1 -1
  15. package/dist/biggive/p-6b33763e.entry.js +0 -1
package/dist/cjs/biggive-accordion_43.cjs.entry.js CHANGED
@@ -333,7 +333,7 @@ const BiggiveCampaignCardFilterGrid = class {
333
333
  this.filtersApplied = false;
334
334
  // Clear all
335
335
  this.searchText = null;
336
- this.selectedSortByOption = null;
336
+ this.selectedSortByOption = this.initialSortByOption;
337
337
  this.selectedFilterBeneficiary = null;
338
338
  this.selectedFilterCategory = null;
339
339
  this.selectedFilterFunding = null;
@@ -366,7 +366,7 @@ const BiggiveCampaignCardFilterGrid = class {
366
366
  this.beneficiaryOptions = [];
367
367
  this.locationOptions = [];
368
368
  this.fundingOptions = [];
369
- this.selectedSortByOption = null;
369
+ this.selectedSortByOption = undefined;
370
370
  this.selectedFilterCategory = null;
371
371
  this.selectedFilterBeneficiary = null;
372
372
  this.selectedFilterLocation = null;
@@ -417,6 +417,7 @@ const BiggiveCampaignCardFilterGrid = class {
417
417
  componentWillRender() {
418
418
  this.filtersApplied =
419
419
  this.selectedFilterCategory !== null || this.selectedFilterBeneficiary !== null || this.selectedFilterFunding !== null || this.selectedFilterLocation !== null;
420
+ this.initialSortByOption = this.selectedSortByOption;
420
421
  }
421
422
  render() {
422
423
  var _a;
@@ -428,7 +429,7 @@ const BiggiveCampaignCardFilterGrid = class {
428
429
  ? undefined
429
430
  : (Array.isArray(this.locationOptions) ? this.locationOptions : JSON.parse(this.locationOptions)).map(option => (index.h("biggive-form-field-select-option", { value: option, label: option })))), index.h("biggive-form-field-select", { placeholder: this.fundingPlaceHolderText, selectedLabel: this.selectedFilterFunding, id: "funding", "space-below": "2" }, this.fundingOptions.length === 0
430
431
  ? undefined
431
- : (Array.isArray(this.fundingOptions) ? this.fundingOptions : JSON.parse(this.fundingOptions)).map(option => (index.h("biggive-form-field-select-option", { value: option, label: option })))), 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", { "select-style": "underlined", placeholder: this.sortByPlaceholderText, selectedLabel: this.selectedSortByOption, id: "sort-by" }, index.h("biggive-form-field-select-option", { value: "amountRaised", label: "Most raised" }), index.h("biggive-form-field-select-option", { value: "matchFundsRemaining", label: "Match funds remaining" }), index.h("biggive-form-field-select-option", { value: "Relevance", label: "Relevance" })))), 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" })))));
432
+ : (Array.isArray(this.fundingOptions) ? this.fundingOptions : JSON.parse(this.fundingOptions)).map(option => (index.h("biggive-form-field-select-option", { value: option, label: option })))), 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", { "select-style": "underlined", placeholder: this.sortByPlaceholderText, selectedLabel: this.selectedSortByOption, 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" })))));
432
433
  }
433
434
  get el() { return index.getElement(this); }
434
435
  };
@@ -1684,7 +1685,7 @@ const BiggiveTippingSlider = class {
1684
1685
  };
1685
1686
  BiggiveTippingSlider.style = biggiveTippingSliderCss;
1686
1687
 
1687
- const biggiveTotalizerCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.background-colour-hover-primary:hover,.background-colour-primary{background-color:#2C089B}.background-colour-hover-secondary:hover,.background-colour-secondary{background-color:#2AF135}.background-colour-hover-tertiary:hover,.background-colour-tertiary{background-color:#FF7272}.background-colour-hover-brand-1:hover,.background-colour-brand-1{background-color:#B30510}.background-colour-hover-brand-2:hover,.background-colour-brand-2{background-color:#6E0887}.background-colour-hover-brand-3:hover,.background-colour-brand-3{background-color:#50B400}.background-colour-hover-brand-4:hover,.background-colour-brand-4{background-color:#FFE500}.background-colour-hover-brand-5:hover,.background-colour-brand-5{background-color:#F07D00}.background-colour-hover-brand-6:hover,.background-colour-brand-6{background-color:#62CFC9}.background-colour-hover-white:hover,.background-colour-white{background-color:#FFFFFF}.background-colour-hover-black:hover,.background-colour-black{background-color:#000000}.background-colour-hover-white:hover,.background-colour-white{background-color:#FFFFFF}.background-colour-hover-grey-extra-light:hover,.background-colour-grey-extra-light{background-color:#D7D7D7}.background-colour-hover-grey-light:hover,.background-colour-grey-light{background-color:#E8E8E8}.background-colour-hover-grey-medium:hover,.background-colour-grey-medium{background-color:#8A8A8A}.background-colour-hover-grey-dark:hover,.background-colour-grey-dark{background-color:#4A4A4A}.space-above-0{margin-top:0}.space-above-1{margin-top:5px}.space-above-2{margin-top:10px}.space-above-3{margin-top:15px}.space-above-4{margin-top:30px}.space-above-5{margin-top:45px}.space-above-6{margin-top:60px}.space-below-0{margin-bottom:0}.space-below-1{margin-bottom:5px}.space-below-2{margin-bottom:10px}.space-below-3{margin-bottom:15px}.space-below-4{margin-bottom:30px}.space-below-5{margin-bottom:45px}.space-below-6{margin-bottom:60px}.text-colour-hover-primary:hover,.text-colour-primary{color:#2C089B}.text-colour-hover-secondary:hover,.text-colour-secondary{color:#2AF135}.text-colour-hover-tertiary:hover,.text-colour-tertiary{color:#FF7272}.text-colour-hover-brand-1:hover,.text-colour-brand-1{color:#B30510}.text-colour-hover-brand-2:hover,.text-colour-brand-2{color:#6E0887}.text-colour-hover-brand-3:hover,.text-colour-brand-3{color:#50B400}.text-colour-hover-brand-4:hover,.text-colour-brand-4{color:#FFE500}.text-colour-hover-brand-5:hover,.text-colour-brand-5{color:#F07D00}.text-colour-hover-brand-6:hover,.text-colour-brand-6{color:#CBC8C8}.text-colour-hover-white:hover,.text-colour-white{color:#FFFFFF}.text-colour-hover-black:hover,.text-colour-black{color:#000000}.text-colour-hover-grey-extra-light:hover,.text-colour-grey-extra-light{color:#D7D7D7}.text-colour-hover-grey-light:hover,.text-colour-grey-light{color:#E8E8E8}.text-colour-hover-grey-medium:hover,.text-colour-grey-medium{color:#8A8A8A}.text-colour-hover-grey-dark:hover,.text-colour-grey-dark{color:#4A4A4A}:host{display:contents;font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px}@keyframes ticker{0%{transform:translate3d(0, 0, 0)}100%{transform:translate3d(-100%, 0, 0)}}.container{position:absolute;left:0;right:0;z-index:1}.container .main-message-wrap{position:absolute;z-index:1;padding:10px 30px;left:0;top:0;font-size:24px;line-height:30px;font-weight:600;max-width:33.3%}.container .ticker-wrap{padding:10px 0 10px 0;min-height:17px;font-size:17px;line-height:24px;overflow:hidden;position:relative}.container .ticker-wrap .sleeve{will-change:transform;width:100%;position:absolute;left:100%;display:flex;animation-iteration-count:infinite;animation-timing-function:linear;animation-name:ticker;animation-duration:20s}.container .ticker-wrap .sleeve .ticker-item{white-space:nowrap;padding:0 15px}@media screen and (max-width: 768px){.container .main-message-wrap{font-size:17px;line-height:24px;padding:10px}}";
1688
+ const biggiveTotalizerCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.background-colour-hover-primary:hover,.background-colour-primary{background-color:#2C089B}.background-colour-hover-secondary:hover,.background-colour-secondary{background-color:#2AF135}.background-colour-hover-tertiary:hover,.background-colour-tertiary{background-color:#FF7272}.background-colour-hover-brand-1:hover,.background-colour-brand-1{background-color:#B30510}.background-colour-hover-brand-2:hover,.background-colour-brand-2{background-color:#6E0887}.background-colour-hover-brand-3:hover,.background-colour-brand-3{background-color:#50B400}.background-colour-hover-brand-4:hover,.background-colour-brand-4{background-color:#FFE500}.background-colour-hover-brand-5:hover,.background-colour-brand-5{background-color:#F07D00}.background-colour-hover-brand-6:hover,.background-colour-brand-6{background-color:#62CFC9}.background-colour-hover-white:hover,.background-colour-white{background-color:#FFFFFF}.background-colour-hover-black:hover,.background-colour-black{background-color:#000000}.background-colour-hover-white:hover,.background-colour-white{background-color:#FFFFFF}.background-colour-hover-grey-extra-light:hover,.background-colour-grey-extra-light{background-color:#D7D7D7}.background-colour-hover-grey-light:hover,.background-colour-grey-light{background-color:#E8E8E8}.background-colour-hover-grey-medium:hover,.background-colour-grey-medium{background-color:#8A8A8A}.background-colour-hover-grey-dark:hover,.background-colour-grey-dark{background-color:#4A4A4A}.space-above-0{margin-top:0}.space-above-1{margin-top:5px}.space-above-2{margin-top:10px}.space-above-3{margin-top:15px}.space-above-4{margin-top:30px}.space-above-5{margin-top:45px}.space-above-6{margin-top:60px}.space-below-0{margin-bottom:0}.space-below-1{margin-bottom:5px}.space-below-2{margin-bottom:10px}.space-below-3{margin-bottom:15px}.space-below-4{margin-bottom:30px}.space-below-5{margin-bottom:45px}.space-below-6{margin-bottom:60px}.text-colour-hover-primary:hover,.text-colour-primary{color:#2C089B}.text-colour-hover-secondary:hover,.text-colour-secondary{color:#2AF135}.text-colour-hover-tertiary:hover,.text-colour-tertiary{color:#FF7272}.text-colour-hover-brand-1:hover,.text-colour-brand-1{color:#B30510}.text-colour-hover-brand-2:hover,.text-colour-brand-2{color:#6E0887}.text-colour-hover-brand-3:hover,.text-colour-brand-3{color:#50B400}.text-colour-hover-brand-4:hover,.text-colour-brand-4{color:#FFE500}.text-colour-hover-brand-5:hover,.text-colour-brand-5{color:#F07D00}.text-colour-hover-brand-6:hover,.text-colour-brand-6{color:#CBC8C8}.text-colour-hover-white:hover,.text-colour-white{color:#FFFFFF}.text-colour-hover-black:hover,.text-colour-black{color:#000000}.text-colour-hover-grey-extra-light:hover,.text-colour-grey-extra-light{color:#D7D7D7}.text-colour-hover-grey-light:hover,.text-colour-grey-light{color:#E8E8E8}.text-colour-hover-grey-medium:hover,.text-colour-grey-medium{color:#8A8A8A}.text-colour-hover-grey-dark:hover,.text-colour-grey-dark{color:#4A4A4A}:host{display:contents;font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px}@keyframes ticker{0%{transform:translate3d(0, 0, 0)}100%{transform:translate3d(-200%, 0, 0)}}.container{position:absolute;left:0;right:0;z-index:1}.container .main-message-wrap{position:absolute;z-index:1;padding:10px 30px;left:0;top:0;font-size:24px;line-height:30px;font-weight:600;max-width:33.3%}.container .ticker-wrap{padding:10px 0 10px 0;min-height:17px;font-size:17px;line-height:24px;overflow:hidden;position:relative}.container .ticker-wrap .sleeve{will-change:transform;width:100%;position:absolute;left:100%;display:flex;animation-iteration-count:infinite;animation-timing-function:linear;animation-name:ticker;animation-duration:10s}@media (prefers-reduced-motion){.container .ticker-wrap .sleeve{animation-name:none}}.container .ticker-wrap .sleeve .ticker-item{white-space:nowrap;padding:0 15px}.container .ticker-wrap .sleeve.sleeve-delayed-copy{animation-delay:5s}@media screen and (max-width: 768px){.container .main-message-wrap{font-size:17px;line-height:24px;padding:10px}}";
1688
1689
 
1689
1690
  const BiggiveTotalizer = class {
1690
1691
  constructor(hostRef) {
@@ -1696,22 +1697,58 @@ const BiggiveTotalizer = class {
1696
1697
  this.secondaryTextColour = 'black';
1697
1698
  this.mainMessage = undefined;
1698
1699
  }
1700
+ setSpeed(itemsWidth) {
1701
+ var _a, _b;
1702
+ const sleeve1 = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.ticker-wrap #sleeve_1');
1703
+ const sleeve2 = (_b = this.host.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.ticker-wrap #sleeve_2');
1704
+ if (!sleeve1 || !sleeve2) {
1705
+ console.log('sleeve1 or sleeve2 is missing, skipping setSpeed()');
1706
+ return;
1707
+ }
1708
+ // Restart the animation(s) on window resize to reduce the chance of jankiness.
1709
+ // https://stackoverflow.com/a/45036752/2803757
1710
+ sleeve1.style.animationName = 'none';
1711
+ sleeve2.style.animationName = 'none';
1712
+ const duration = sleeve1.clientWidth / 50;
1713
+ sleeve1.style.animationDuration = Math.round(duration) + 's';
1714
+ sleeve1.style.animationName = 'ticker';
1715
+ // For now, only show the 2nd copy if there's space for it to not overlap. This means
1716
+ // a bumpier loop on mobile, but we'd need a tweaked approach to wrap around cleanly
1717
+ // where the item lists doesn't fit on the screen twice. The 1.5 ratio is a trial and
1718
+ // error number which seems OK for now. It leaves a bit of a gap before items cycle
1719
+ // back in at tablet sizes but is an improvement on what we had before at all breakpoints
1720
+ // tested.
1721
+ if (itemsWidth * 1.5 < sleeve1.clientWidth) {
1722
+ sleeve2.style.animationDuration = Math.round(duration) + 's';
1723
+ sleeve2.style.animationDelay = Math.round(duration / 2) + 's';
1724
+ sleeve2.style.animationName = 'ticker';
1725
+ }
1726
+ }
1699
1727
  componentDidRender() {
1700
- // @ts-ignore
1728
+ var _a, _b;
1701
1729
  const tickerItemsInternalWrapper = this.host.querySelector(`[slot="ticker-items"]`);
1730
+ const sleeve1 = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.ticker-wrap #sleeve_1');
1731
+ const sleeve2 = (_b = this.host.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.ticker-wrap #sleeve_2');
1732
+ if (!tickerItemsInternalWrapper || !sleeve1 || !sleeve2) {
1733
+ console.log('tickerItemsInternalWrapper, sleeve1 or sleeve2 is missing, skipping totalizer animation setup');
1734
+ return;
1735
+ }
1736
+ // Clone all children of the ticker items internal wrapper and append them, so the ticker can show items without
1737
+ // a blank break. Sleeve 2 will animate on a delay per https://stackoverflow.com/a/45847760.
1738
+ tickerItemsInternalWrapper.childNodes.forEach((child) => {
1739
+ sleeve2.appendChild(child.cloneNode(true)); // Deep clone all items.
1740
+ });
1702
1741
  if (tickerItemsInternalWrapper !== null && tickerItemsInternalWrapper !== undefined) {
1703
1742
  tickerItemsInternalWrapper.style.display = 'inline-flex';
1704
1743
  tickerItemsInternalWrapper.style.flex = 'none';
1705
1744
  }
1706
- // @ts-ignore
1707
- const tickerWidth = this.host.shadowRoot.querySelector('.ticker-wrap .sleeve').clientWidth;
1708
- const duration = tickerWidth / 50;
1709
- // @ts-ignore
1710
- const sleeve = this.host.shadowRoot.querySelector('.ticker-wrap .sleeve');
1711
- sleeve.style.animationDuration = Math.round(duration) + 's';
1745
+ this.setSpeed(tickerItemsInternalWrapper.clientWidth);
1746
+ window.addEventListener('resize', () => {
1747
+ this.setSpeed(tickerItemsInternalWrapper.clientWidth);
1748
+ });
1712
1749
  }
1713
1750
  render() {
1714
- return (index.h("div", { class: 'container space-below-' + this.spaceBelow }, index.h("div", { class: "sleeve" }, index.h("div", { class: "banner" }, index.h("div", { class: 'main-message-wrap background-colour-' + this.secondaryColour + ' text-colour-' + this.secondaryTextColour }, this.mainMessage), index.h("div", { class: 'ticker-wrap background-colour-' + this.primaryColour + ' text-colour-' + this.primaryTextColour }, index.h("div", { class: "sleeve" }, index.h("slot", { name: "ticker-items" })))))));
1751
+ return (index.h("div", { class: 'container space-below-' + this.spaceBelow }, index.h("div", null, index.h("div", { class: "banner" }, index.h("div", { class: 'main-message-wrap background-colour-' + this.secondaryColour + ' text-colour-' + this.secondaryTextColour }, this.mainMessage), index.h("div", { class: 'ticker-wrap background-colour-' + this.primaryColour + ' text-colour-' + this.primaryTextColour }, index.h("div", { id: "sleeve_1", class: "sleeve" }, index.h("slot", { name: "ticker-items" })), index.h("div", { id: "sleeve_2", class: "sleeve sleeve-delayed-copy" }))))));
1715
1752
  }
1716
1753
  get host() { return index.getElement(this); }
1717
1754
  };
package/dist/collection/components/biggive-campaign-card-filter-grid/biggive-campaign-card-filter-grid.js CHANGED
@@ -60,7 +60,7 @@ export class BiggiveCampaignCardFilterGrid {
60
60
  this.filtersApplied = false;
61
61
  // Clear all
62
62
  this.searchText = null;
63
- this.selectedSortByOption = null;
63
+ this.selectedSortByOption = this.initialSortByOption;
64
64
  this.selectedFilterBeneficiary = null;
65
65
  this.selectedFilterCategory = null;
66
66
  this.selectedFilterFunding = null;
@@ -93,7 +93,7 @@ export class BiggiveCampaignCardFilterGrid {
93
93
  this.beneficiaryOptions = [];
94
94
  this.locationOptions = [];
95
95
  this.fundingOptions = [];
96
- this.selectedSortByOption = null;
96
+ this.selectedSortByOption = undefined;
97
97
  this.selectedFilterCategory = null;
98
98
  this.selectedFilterBeneficiary = null;
99
99
  this.selectedFilterLocation = null;
@@ -144,6 +144,7 @@ export class BiggiveCampaignCardFilterGrid {
144
144
  componentWillRender() {
145
145
  this.filtersApplied =
146
146
  this.selectedFilterCategory !== null || this.selectedFilterBeneficiary !== null || this.selectedFilterFunding !== null || this.selectedFilterLocation !== null;
147
+ this.initialSortByOption = this.selectedSortByOption;
147
148
  }
148
149
  render() {
149
150
  var _a;
@@ -155,7 +156,7 @@ export class BiggiveCampaignCardFilterGrid {
155
156
  ? undefined
156
157
  : (Array.isArray(this.locationOptions) ? this.locationOptions : JSON.parse(this.locationOptions)).map(option => (h("biggive-form-field-select-option", { value: option, label: option })))), h("biggive-form-field-select", { placeholder: this.fundingPlaceHolderText, selectedLabel: this.selectedFilterFunding, id: "funding", "space-below": "2" }, this.fundingOptions.length === 0
157
158
  ? undefined
158
- : (Array.isArray(this.fundingOptions) ? this.fundingOptions : JSON.parse(this.fundingOptions)).map(option => (h("biggive-form-field-select-option", { value: option, label: option })))), h("div", { class: "align-right" }, h("biggive-button", { label: "Apply filters", onClick: this.handleApplyFilterButtonClick })))), h("div", { class: "sort-wrap" }, h("biggive-form-field-select", { "select-style": "underlined", placeholder: this.sortByPlaceholderText, selectedLabel: this.selectedSortByOption, id: "sort-by" }, h("biggive-form-field-select-option", { value: "amountRaised", label: "Most raised" }), h("biggive-form-field-select-option", { value: "matchFundsRemaining", label: "Match funds remaining" }), h("biggive-form-field-select-option", { value: "Relevance", label: "Relevance" })))), 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" })))));
159
+ : (Array.isArray(this.fundingOptions) ? this.fundingOptions : JSON.parse(this.fundingOptions)).map(option => (h("biggive-form-field-select-option", { value: option, label: option })))), h("div", { class: "align-right" }, h("biggive-button", { label: "Apply filters", onClick: this.handleApplyFilterButtonClick })))), h("div", { class: "sort-wrap" }, h("biggive-form-field-select", { "select-style": "underlined", placeholder: this.sortByPlaceholderText, selectedLabel: this.selectedSortByOption, 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" })))));
159
160
  }
160
161
  static get is() { return "biggive-campaign-card-filter-grid"; }
161
162
  static get encapsulation() { return "shadow"; }
@@ -337,19 +338,18 @@ export class BiggiveCampaignCardFilterGrid {
337
338
  "type": "string",
338
339
  "mutable": false,
339
340
  "complexType": {
340
- "original": "'Most raised' | 'Match funds remaining' | 'Relevance' | null",
341
- "resolved": "\"Match funds remaining\" | \"Most raised\" | \"Relevance\" | null",
341
+ "original": "'Most raised' | 'Match funds remaining' | 'Relevance'",
342
+ "resolved": "\"Match funds remaining\" | \"Most raised\" | \"Relevance\"",
342
343
  "references": {}
343
344
  },
344
345
  "required": false,
345
346
  "optional": false,
346
347
  "docs": {
347
348
  "tags": [],
348
- "text": "This helps us inject a pre-selected dropdown value from outside of this component.\nThis is especially helpful for the Meta campaign and Explore pages, where searching\nby text whipes out previous sort options and re-uses Relevance, or where one of those\ntwo pages is loaded directly with URL parameters - in such a scenario the dropdown\nshows that it's pre-selected. DON-558."
349
+ "text": "This helps us inject a pre-selected dropdown value from outside of this component.\nThis is especially helpful for the Meta campaign and Explore pages, where searching\nby text wipes out previous sort options and re-uses Relevance, or where one of those\ntwo pages is loaded directly with URL parameters - in such a scenario the dropdown\nshows that it's pre-selected. DON-558."
349
350
  },
350
351
  "attribute": "selected-sort-by-option",
351
- "reflect": false,
352
- "defaultValue": "null"
352
+ "reflect": false
353
353
  },
354
354
  "selectedFilterCategory": {
355
355
  "type": "string",
package/dist/collection/components/biggive-totalizer/biggive-totalizer.css CHANGED
@@ -232,7 +232,7 @@ a:hover {
232
232
  transform: translate3d(0, 0, 0);
233
233
  }
234
234
  100% {
235
- transform: translate3d(-100%, 0, 0);
235
+ transform: translate3d(-200%, 0, 0);
236
236
  }
237
237
  }
238
238
  .container {
@@ -269,12 +269,20 @@ a:hover {
269
269
  animation-iteration-count: infinite;
270
270
  animation-timing-function: linear;
271
271
  animation-name: ticker;
272
- animation-duration: 20s;
272
+ animation-duration: 10s;
273
+ }
274
+ @media (prefers-reduced-motion) {
275
+ .container .ticker-wrap .sleeve {
276
+ animation-name: none;
277
+ }
273
278
  }
274
279
  .container .ticker-wrap .sleeve .ticker-item {
275
280
  white-space: nowrap;
276
281
  padding: 0 15px;
277
282
  }
283
+ .container .ticker-wrap .sleeve.sleeve-delayed-copy {
284
+ animation-delay: 5s;
285
+ }
278
286
 
279
287
  @media screen and (max-width: 768px) {
280
288
  .container .main-message-wrap {
package/dist/collection/components/biggive-totalizer/biggive-totalizer.js CHANGED
@@ -8,22 +8,59 @@ export class BiggiveTotalizer {
8
8
  this.secondaryTextColour = 'black';
9
9
  this.mainMessage = undefined;
10
10
  }
11
+ setSpeed(itemsWidth) {
12
+ var _a, _b;
13
+ const sleeve1 = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.ticker-wrap #sleeve_1');
14
+ const sleeve2 = (_b = this.host.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.ticker-wrap #sleeve_2');
15
+ if (!sleeve1 || !sleeve2) {
16
+ console.log('sleeve1 or sleeve2 is missing, skipping setSpeed()');
17
+ return;
18
+ }
19
+ // Restart the animation(s) on window resize to reduce the chance of jankiness.
20
+ // https://stackoverflow.com/a/45036752/2803757
21
+ sleeve1.style.animationName = 'none';
22
+ sleeve2.style.animationName = 'none';
23
+ sleeve1.offsetHeight;
24
+ const duration = sleeve1.clientWidth / 50;
25
+ sleeve1.style.animationDuration = Math.round(duration) + 's';
26
+ sleeve1.style.animationName = 'ticker';
27
+ // For now, only show the 2nd copy if there's space for it to not overlap. This means
28
+ // a bumpier loop on mobile, but we'd need a tweaked approach to wrap around cleanly
29
+ // where the item lists doesn't fit on the screen twice. The 1.5 ratio is a trial and
30
+ // error number which seems OK for now. It leaves a bit of a gap before items cycle
31
+ // back in at tablet sizes but is an improvement on what we had before at all breakpoints
32
+ // tested.
33
+ if (itemsWidth * 1.5 < sleeve1.clientWidth) {
34
+ sleeve2.style.animationDuration = Math.round(duration) + 's';
35
+ sleeve2.style.animationDelay = Math.round(duration / 2) + 's';
36
+ sleeve2.style.animationName = 'ticker';
37
+ }
38
+ }
11
39
  componentDidRender() {
12
- // @ts-ignore
40
+ var _a, _b;
13
41
  const tickerItemsInternalWrapper = this.host.querySelector(`[slot="ticker-items"]`);
42
+ const sleeve1 = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.ticker-wrap #sleeve_1');
43
+ const sleeve2 = (_b = this.host.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.ticker-wrap #sleeve_2');
44
+ if (!tickerItemsInternalWrapper || !sleeve1 || !sleeve2) {
45
+ console.log('tickerItemsInternalWrapper, sleeve1 or sleeve2 is missing, skipping totalizer animation setup');
46
+ return;
47
+ }
48
+ // Clone all children of the ticker items internal wrapper and append them, so the ticker can show items without
49
+ // a blank break. Sleeve 2 will animate on a delay per https://stackoverflow.com/a/45847760.
50
+ tickerItemsInternalWrapper.childNodes.forEach((child) => {
51
+ sleeve2.appendChild(child.cloneNode(true)); // Deep clone all items.
52
+ });
14
53
  if (tickerItemsInternalWrapper !== null && tickerItemsInternalWrapper !== undefined) {
15
54
  tickerItemsInternalWrapper.style.display = 'inline-flex';
16
55
  tickerItemsInternalWrapper.style.flex = 'none';
17
56
  }
18
- // @ts-ignore
19
- const tickerWidth = this.host.shadowRoot.querySelector('.ticker-wrap .sleeve').clientWidth;
20
- const duration = tickerWidth / 50;
21
- // @ts-ignore
22
- const sleeve = this.host.shadowRoot.querySelector('.ticker-wrap .sleeve');
23
- sleeve.style.animationDuration = Math.round(duration) + 's';
57
+ this.setSpeed(tickerItemsInternalWrapper.clientWidth);
58
+ window.addEventListener('resize', () => {
59
+ this.setSpeed(tickerItemsInternalWrapper.clientWidth);
60
+ });
24
61
  }
25
62
  render() {
26
- return (h("div", { class: 'container space-below-' + this.spaceBelow }, h("div", { class: "sleeve" }, h("div", { class: "banner" }, h("div", { class: 'main-message-wrap background-colour-' + this.secondaryColour + ' text-colour-' + this.secondaryTextColour }, this.mainMessage), h("div", { class: 'ticker-wrap background-colour-' + this.primaryColour + ' text-colour-' + this.primaryTextColour }, h("div", { class: "sleeve" }, h("slot", { name: "ticker-items" })))))));
63
+ return (h("div", { class: 'container space-below-' + this.spaceBelow }, h("div", null, h("div", { class: "banner" }, h("div", { class: 'main-message-wrap background-colour-' + this.secondaryColour + ' text-colour-' + this.secondaryTextColour }, this.mainMessage), h("div", { class: 'ticker-wrap background-colour-' + this.primaryColour + ' text-colour-' + this.primaryTextColour }, h("div", { id: "sleeve_1", class: "sleeve" }, h("slot", { name: "ticker-items" })), h("div", { id: "sleeve_2", class: "sleeve sleeve-delayed-copy" }))))));
27
64
  }
28
65
  static get is() { return "biggive-totalizer"; }
29
66
  static get encapsulation() { return "shadow"; }
package/dist/components/biggive-campaign-card-filter-grid.js CHANGED
@@ -71,7 +71,7 @@ const BiggiveCampaignCardFilterGrid$1 = /*@__PURE__*/ proxyCustomElement(class e
71
71
  this.filtersApplied = false;
72
72
  // Clear all
73
73
  this.searchText = null;
74
- this.selectedSortByOption = null;
74
+ this.selectedSortByOption = this.initialSortByOption;
75
75
  this.selectedFilterBeneficiary = null;
76
76
  this.selectedFilterCategory = null;
77
77
  this.selectedFilterFunding = null;
@@ -104,7 +104,7 @@ const BiggiveCampaignCardFilterGrid$1 = /*@__PURE__*/ proxyCustomElement(class e
104
104
  this.beneficiaryOptions = [];
105
105
  this.locationOptions = [];
106
106
  this.fundingOptions = [];
107
- this.selectedSortByOption = null;
107
+ this.selectedSortByOption = undefined;
108
108
  this.selectedFilterCategory = null;
109
109
  this.selectedFilterBeneficiary = null;
110
110
  this.selectedFilterLocation = null;
@@ -155,6 +155,7 @@ const BiggiveCampaignCardFilterGrid$1 = /*@__PURE__*/ proxyCustomElement(class e
155
155
  componentWillRender() {
156
156
  this.filtersApplied =
157
157
  this.selectedFilterCategory !== null || this.selectedFilterBeneficiary !== null || this.selectedFilterFunding !== null || this.selectedFilterLocation !== null;
158
+ this.initialSortByOption = this.selectedSortByOption;
158
159
  }
159
160
  render() {
160
161
  var _a;
@@ -166,7 +167,7 @@ const BiggiveCampaignCardFilterGrid$1 = /*@__PURE__*/ proxyCustomElement(class e
166
167
  ? undefined
167
168
  : (Array.isArray(this.locationOptions) ? this.locationOptions : JSON.parse(this.locationOptions)).map(option => (h("biggive-form-field-select-option", { value: option, label: option })))), h("biggive-form-field-select", { placeholder: this.fundingPlaceHolderText, selectedLabel: this.selectedFilterFunding, id: "funding", "space-below": "2" }, this.fundingOptions.length === 0
168
169
  ? undefined
169
- : (Array.isArray(this.fundingOptions) ? this.fundingOptions : JSON.parse(this.fundingOptions)).map(option => (h("biggive-form-field-select-option", { value: option, label: option })))), h("div", { class: "align-right" }, h("biggive-button", { label: "Apply filters", onClick: this.handleApplyFilterButtonClick })))), h("div", { class: "sort-wrap" }, h("biggive-form-field-select", { "select-style": "underlined", placeholder: this.sortByPlaceholderText, selectedLabel: this.selectedSortByOption, id: "sort-by" }, h("biggive-form-field-select-option", { value: "amountRaised", label: "Most raised" }), h("biggive-form-field-select-option", { value: "matchFundsRemaining", label: "Match funds remaining" }), h("biggive-form-field-select-option", { value: "Relevance", label: "Relevance" })))), 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" })))));
170
+ : (Array.isArray(this.fundingOptions) ? this.fundingOptions : JSON.parse(this.fundingOptions)).map(option => (h("biggive-form-field-select-option", { value: option, label: option })))), h("div", { class: "align-right" }, h("biggive-button", { label: "Apply filters", onClick: this.handleApplyFilterButtonClick })))), h("div", { class: "sort-wrap" }, h("biggive-form-field-select", { "select-style": "underlined", placeholder: this.sortByPlaceholderText, selectedLabel: this.selectedSortByOption, 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" })))));
170
171
  }
171
172
  get el() { return this; }
172
173
  static get style() { return biggiveCampaignCardFilterGridCss; }
package/dist/components/biggive-totalizer.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
2
2
 
3
- const biggiveTotalizerCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.background-colour-hover-primary:hover,.background-colour-primary{background-color:#2C089B}.background-colour-hover-secondary:hover,.background-colour-secondary{background-color:#2AF135}.background-colour-hover-tertiary:hover,.background-colour-tertiary{background-color:#FF7272}.background-colour-hover-brand-1:hover,.background-colour-brand-1{background-color:#B30510}.background-colour-hover-brand-2:hover,.background-colour-brand-2{background-color:#6E0887}.background-colour-hover-brand-3:hover,.background-colour-brand-3{background-color:#50B400}.background-colour-hover-brand-4:hover,.background-colour-brand-4{background-color:#FFE500}.background-colour-hover-brand-5:hover,.background-colour-brand-5{background-color:#F07D00}.background-colour-hover-brand-6:hover,.background-colour-brand-6{background-color:#62CFC9}.background-colour-hover-white:hover,.background-colour-white{background-color:#FFFFFF}.background-colour-hover-black:hover,.background-colour-black{background-color:#000000}.background-colour-hover-white:hover,.background-colour-white{background-color:#FFFFFF}.background-colour-hover-grey-extra-light:hover,.background-colour-grey-extra-light{background-color:#D7D7D7}.background-colour-hover-grey-light:hover,.background-colour-grey-light{background-color:#E8E8E8}.background-colour-hover-grey-medium:hover,.background-colour-grey-medium{background-color:#8A8A8A}.background-colour-hover-grey-dark:hover,.background-colour-grey-dark{background-color:#4A4A4A}.space-above-0{margin-top:0}.space-above-1{margin-top:5px}.space-above-2{margin-top:10px}.space-above-3{margin-top:15px}.space-above-4{margin-top:30px}.space-above-5{margin-top:45px}.space-above-6{margin-top:60px}.space-below-0{margin-bottom:0}.space-below-1{margin-bottom:5px}.space-below-2{margin-bottom:10px}.space-below-3{margin-bottom:15px}.space-below-4{margin-bottom:30px}.space-below-5{margin-bottom:45px}.space-below-6{margin-bottom:60px}.text-colour-hover-primary:hover,.text-colour-primary{color:#2C089B}.text-colour-hover-secondary:hover,.text-colour-secondary{color:#2AF135}.text-colour-hover-tertiary:hover,.text-colour-tertiary{color:#FF7272}.text-colour-hover-brand-1:hover,.text-colour-brand-1{color:#B30510}.text-colour-hover-brand-2:hover,.text-colour-brand-2{color:#6E0887}.text-colour-hover-brand-3:hover,.text-colour-brand-3{color:#50B400}.text-colour-hover-brand-4:hover,.text-colour-brand-4{color:#FFE500}.text-colour-hover-brand-5:hover,.text-colour-brand-5{color:#F07D00}.text-colour-hover-brand-6:hover,.text-colour-brand-6{color:#CBC8C8}.text-colour-hover-white:hover,.text-colour-white{color:#FFFFFF}.text-colour-hover-black:hover,.text-colour-black{color:#000000}.text-colour-hover-grey-extra-light:hover,.text-colour-grey-extra-light{color:#D7D7D7}.text-colour-hover-grey-light:hover,.text-colour-grey-light{color:#E8E8E8}.text-colour-hover-grey-medium:hover,.text-colour-grey-medium{color:#8A8A8A}.text-colour-hover-grey-dark:hover,.text-colour-grey-dark{color:#4A4A4A}:host{display:contents;font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px}@keyframes ticker{0%{transform:translate3d(0, 0, 0)}100%{transform:translate3d(-100%, 0, 0)}}.container{position:absolute;left:0;right:0;z-index:1}.container .main-message-wrap{position:absolute;z-index:1;padding:10px 30px;left:0;top:0;font-size:24px;line-height:30px;font-weight:600;max-width:33.3%}.container .ticker-wrap{padding:10px 0 10px 0;min-height:17px;font-size:17px;line-height:24px;overflow:hidden;position:relative}.container .ticker-wrap .sleeve{will-change:transform;width:100%;position:absolute;left:100%;display:flex;animation-iteration-count:infinite;animation-timing-function:linear;animation-name:ticker;animation-duration:20s}.container .ticker-wrap .sleeve .ticker-item{white-space:nowrap;padding:0 15px}@media screen and (max-width: 768px){.container .main-message-wrap{font-size:17px;line-height:24px;padding:10px}}";
3
+ const biggiveTotalizerCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.background-colour-hover-primary:hover,.background-colour-primary{background-color:#2C089B}.background-colour-hover-secondary:hover,.background-colour-secondary{background-color:#2AF135}.background-colour-hover-tertiary:hover,.background-colour-tertiary{background-color:#FF7272}.background-colour-hover-brand-1:hover,.background-colour-brand-1{background-color:#B30510}.background-colour-hover-brand-2:hover,.background-colour-brand-2{background-color:#6E0887}.background-colour-hover-brand-3:hover,.background-colour-brand-3{background-color:#50B400}.background-colour-hover-brand-4:hover,.background-colour-brand-4{background-color:#FFE500}.background-colour-hover-brand-5:hover,.background-colour-brand-5{background-color:#F07D00}.background-colour-hover-brand-6:hover,.background-colour-brand-6{background-color:#62CFC9}.background-colour-hover-white:hover,.background-colour-white{background-color:#FFFFFF}.background-colour-hover-black:hover,.background-colour-black{background-color:#000000}.background-colour-hover-white:hover,.background-colour-white{background-color:#FFFFFF}.background-colour-hover-grey-extra-light:hover,.background-colour-grey-extra-light{background-color:#D7D7D7}.background-colour-hover-grey-light:hover,.background-colour-grey-light{background-color:#E8E8E8}.background-colour-hover-grey-medium:hover,.background-colour-grey-medium{background-color:#8A8A8A}.background-colour-hover-grey-dark:hover,.background-colour-grey-dark{background-color:#4A4A4A}.space-above-0{margin-top:0}.space-above-1{margin-top:5px}.space-above-2{margin-top:10px}.space-above-3{margin-top:15px}.space-above-4{margin-top:30px}.space-above-5{margin-top:45px}.space-above-6{margin-top:60px}.space-below-0{margin-bottom:0}.space-below-1{margin-bottom:5px}.space-below-2{margin-bottom:10px}.space-below-3{margin-bottom:15px}.space-below-4{margin-bottom:30px}.space-below-5{margin-bottom:45px}.space-below-6{margin-bottom:60px}.text-colour-hover-primary:hover,.text-colour-primary{color:#2C089B}.text-colour-hover-secondary:hover,.text-colour-secondary{color:#2AF135}.text-colour-hover-tertiary:hover,.text-colour-tertiary{color:#FF7272}.text-colour-hover-brand-1:hover,.text-colour-brand-1{color:#B30510}.text-colour-hover-brand-2:hover,.text-colour-brand-2{color:#6E0887}.text-colour-hover-brand-3:hover,.text-colour-brand-3{color:#50B400}.text-colour-hover-brand-4:hover,.text-colour-brand-4{color:#FFE500}.text-colour-hover-brand-5:hover,.text-colour-brand-5{color:#F07D00}.text-colour-hover-brand-6:hover,.text-colour-brand-6{color:#CBC8C8}.text-colour-hover-white:hover,.text-colour-white{color:#FFFFFF}.text-colour-hover-black:hover,.text-colour-black{color:#000000}.text-colour-hover-grey-extra-light:hover,.text-colour-grey-extra-light{color:#D7D7D7}.text-colour-hover-grey-light:hover,.text-colour-grey-light{color:#E8E8E8}.text-colour-hover-grey-medium:hover,.text-colour-grey-medium{color:#8A8A8A}.text-colour-hover-grey-dark:hover,.text-colour-grey-dark{color:#4A4A4A}:host{display:contents;font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px}@keyframes ticker{0%{transform:translate3d(0, 0, 0)}100%{transform:translate3d(-200%, 0, 0)}}.container{position:absolute;left:0;right:0;z-index:1}.container .main-message-wrap{position:absolute;z-index:1;padding:10px 30px;left:0;top:0;font-size:24px;line-height:30px;font-weight:600;max-width:33.3%}.container .ticker-wrap{padding:10px 0 10px 0;min-height:17px;font-size:17px;line-height:24px;overflow:hidden;position:relative}.container .ticker-wrap .sleeve{will-change:transform;width:100%;position:absolute;left:100%;display:flex;animation-iteration-count:infinite;animation-timing-function:linear;animation-name:ticker;animation-duration:10s}@media (prefers-reduced-motion){.container .ticker-wrap .sleeve{animation-name:none}}.container .ticker-wrap .sleeve .ticker-item{white-space:nowrap;padding:0 15px}.container .ticker-wrap .sleeve.sleeve-delayed-copy{animation-delay:5s}@media screen and (max-width: 768px){.container .main-message-wrap{font-size:17px;line-height:24px;padding:10px}}";
4
4
 
5
5
  const BiggiveTotalizer$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
6
6
  constructor() {
@@ -14,22 +14,58 @@ const BiggiveTotalizer$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
14
14
  this.secondaryTextColour = 'black';
15
15
  this.mainMessage = undefined;
16
16
  }
17
+ setSpeed(itemsWidth) {
18
+ var _a, _b;
19
+ const sleeve1 = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.ticker-wrap #sleeve_1');
20
+ const sleeve2 = (_b = this.host.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.ticker-wrap #sleeve_2');
21
+ if (!sleeve1 || !sleeve2) {
22
+ console.log('sleeve1 or sleeve2 is missing, skipping setSpeed()');
23
+ return;
24
+ }
25
+ // Restart the animation(s) on window resize to reduce the chance of jankiness.
26
+ // https://stackoverflow.com/a/45036752/2803757
27
+ sleeve1.style.animationName = 'none';
28
+ sleeve2.style.animationName = 'none';
29
+ const duration = sleeve1.clientWidth / 50;
30
+ sleeve1.style.animationDuration = Math.round(duration) + 's';
31
+ sleeve1.style.animationName = 'ticker';
32
+ // For now, only show the 2nd copy if there's space for it to not overlap. This means
33
+ // a bumpier loop on mobile, but we'd need a tweaked approach to wrap around cleanly
34
+ // where the item lists doesn't fit on the screen twice. The 1.5 ratio is a trial and
35
+ // error number which seems OK for now. It leaves a bit of a gap before items cycle
36
+ // back in at tablet sizes but is an improvement on what we had before at all breakpoints
37
+ // tested.
38
+ if (itemsWidth * 1.5 < sleeve1.clientWidth) {
39
+ sleeve2.style.animationDuration = Math.round(duration) + 's';
40
+ sleeve2.style.animationDelay = Math.round(duration / 2) + 's';
41
+ sleeve2.style.animationName = 'ticker';
42
+ }
43
+ }
17
44
  componentDidRender() {
18
- // @ts-ignore
45
+ var _a, _b;
19
46
  const tickerItemsInternalWrapper = this.host.querySelector(`[slot="ticker-items"]`);
47
+ const sleeve1 = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.ticker-wrap #sleeve_1');
48
+ const sleeve2 = (_b = this.host.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.ticker-wrap #sleeve_2');
49
+ if (!tickerItemsInternalWrapper || !sleeve1 || !sleeve2) {
50
+ console.log('tickerItemsInternalWrapper, sleeve1 or sleeve2 is missing, skipping totalizer animation setup');
51
+ return;
52
+ }
53
+ // Clone all children of the ticker items internal wrapper and append them, so the ticker can show items without
54
+ // a blank break. Sleeve 2 will animate on a delay per https://stackoverflow.com/a/45847760.
55
+ tickerItemsInternalWrapper.childNodes.forEach((child) => {
56
+ sleeve2.appendChild(child.cloneNode(true)); // Deep clone all items.
57
+ });
20
58
  if (tickerItemsInternalWrapper !== null && tickerItemsInternalWrapper !== undefined) {
21
59
  tickerItemsInternalWrapper.style.display = 'inline-flex';
22
60
  tickerItemsInternalWrapper.style.flex = 'none';
23
61
  }
24
- // @ts-ignore
25
- const tickerWidth = this.host.shadowRoot.querySelector('.ticker-wrap .sleeve').clientWidth;
26
- const duration = tickerWidth / 50;
27
- // @ts-ignore
28
- const sleeve = this.host.shadowRoot.querySelector('.ticker-wrap .sleeve');
29
- sleeve.style.animationDuration = Math.round(duration) + 's';
62
+ this.setSpeed(tickerItemsInternalWrapper.clientWidth);
63
+ window.addEventListener('resize', () => {
64
+ this.setSpeed(tickerItemsInternalWrapper.clientWidth);
65
+ });
30
66
  }
31
67
  render() {
32
- return (h("div", { class: 'container space-below-' + this.spaceBelow }, h("div", { class: "sleeve" }, h("div", { class: "banner" }, h("div", { class: 'main-message-wrap background-colour-' + this.secondaryColour + ' text-colour-' + this.secondaryTextColour }, this.mainMessage), h("div", { class: 'ticker-wrap background-colour-' + this.primaryColour + ' text-colour-' + this.primaryTextColour }, h("div", { class: "sleeve" }, h("slot", { name: "ticker-items" })))))));
68
+ return (h("div", { class: 'container space-below-' + this.spaceBelow }, h("div", null, h("div", { class: "banner" }, h("div", { class: 'main-message-wrap background-colour-' + this.secondaryColour + ' text-colour-' + this.secondaryTextColour }, this.mainMessage), h("div", { class: 'ticker-wrap background-colour-' + this.primaryColour + ' text-colour-' + this.primaryTextColour }, h("div", { id: "sleeve_1", class: "sleeve" }, h("slot", { name: "ticker-items" })), h("div", { id: "sleeve_2", class: "sleeve sleeve-delayed-copy" }))))));
33
69
  }
34
70
  get host() { return this; }
35
71
  static get style() { return biggiveTotalizerCss; }
package/dist/esm/biggive-accordion_43.entry.js CHANGED
@@ -329,7 +329,7 @@ const BiggiveCampaignCardFilterGrid = class {
329
329
  this.filtersApplied = false;
330
330
  // Clear all
331
331
  this.searchText = null;
332
- this.selectedSortByOption = null;
332
+ this.selectedSortByOption = this.initialSortByOption;
333
333
  this.selectedFilterBeneficiary = null;
334
334
  this.selectedFilterCategory = null;
335
335
  this.selectedFilterFunding = null;
@@ -362,7 +362,7 @@ const BiggiveCampaignCardFilterGrid = class {
362
362
  this.beneficiaryOptions = [];
363
363
  this.locationOptions = [];
364
364
  this.fundingOptions = [];
365
- this.selectedSortByOption = null;
365
+ this.selectedSortByOption = undefined;
366
366
  this.selectedFilterCategory = null;
367
367
  this.selectedFilterBeneficiary = null;
368
368
  this.selectedFilterLocation = null;
@@ -413,6 +413,7 @@ const BiggiveCampaignCardFilterGrid = class {
413
413
  componentWillRender() {
414
414
  this.filtersApplied =
415
415
  this.selectedFilterCategory !== null || this.selectedFilterBeneficiary !== null || this.selectedFilterFunding !== null || this.selectedFilterLocation !== null;
416
+ this.initialSortByOption = this.selectedSortByOption;
416
417
  }
417
418
  render() {
418
419
  var _a;
@@ -424,7 +425,7 @@ const BiggiveCampaignCardFilterGrid = class {
424
425
  ? undefined
425
426
  : (Array.isArray(this.locationOptions) ? this.locationOptions : JSON.parse(this.locationOptions)).map(option => (h("biggive-form-field-select-option", { value: option, label: option })))), h("biggive-form-field-select", { placeholder: this.fundingPlaceHolderText, selectedLabel: this.selectedFilterFunding, id: "funding", "space-below": "2" }, this.fundingOptions.length === 0
426
427
  ? undefined
427
- : (Array.isArray(this.fundingOptions) ? this.fundingOptions : JSON.parse(this.fundingOptions)).map(option => (h("biggive-form-field-select-option", { value: option, label: option })))), h("div", { class: "align-right" }, h("biggive-button", { label: "Apply filters", onClick: this.handleApplyFilterButtonClick })))), h("div", { class: "sort-wrap" }, h("biggive-form-field-select", { "select-style": "underlined", placeholder: this.sortByPlaceholderText, selectedLabel: this.selectedSortByOption, id: "sort-by" }, h("biggive-form-field-select-option", { value: "amountRaised", label: "Most raised" }), h("biggive-form-field-select-option", { value: "matchFundsRemaining", label: "Match funds remaining" }), h("biggive-form-field-select-option", { value: "Relevance", label: "Relevance" })))), 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" })))));
428
+ : (Array.isArray(this.fundingOptions) ? this.fundingOptions : JSON.parse(this.fundingOptions)).map(option => (h("biggive-form-field-select-option", { value: option, label: option })))), h("div", { class: "align-right" }, h("biggive-button", { label: "Apply filters", onClick: this.handleApplyFilterButtonClick })))), h("div", { class: "sort-wrap" }, h("biggive-form-field-select", { "select-style": "underlined", placeholder: this.sortByPlaceholderText, selectedLabel: this.selectedSortByOption, 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" })))));
428
429
  }
429
430
  get el() { return getElement(this); }
430
431
  };
@@ -1680,7 +1681,7 @@ const BiggiveTippingSlider = class {
1680
1681
  };
1681
1682
  BiggiveTippingSlider.style = biggiveTippingSliderCss;
1682
1683
 
1683
- const biggiveTotalizerCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.background-colour-hover-primary:hover,.background-colour-primary{background-color:#2C089B}.background-colour-hover-secondary:hover,.background-colour-secondary{background-color:#2AF135}.background-colour-hover-tertiary:hover,.background-colour-tertiary{background-color:#FF7272}.background-colour-hover-brand-1:hover,.background-colour-brand-1{background-color:#B30510}.background-colour-hover-brand-2:hover,.background-colour-brand-2{background-color:#6E0887}.background-colour-hover-brand-3:hover,.background-colour-brand-3{background-color:#50B400}.background-colour-hover-brand-4:hover,.background-colour-brand-4{background-color:#FFE500}.background-colour-hover-brand-5:hover,.background-colour-brand-5{background-color:#F07D00}.background-colour-hover-brand-6:hover,.background-colour-brand-6{background-color:#62CFC9}.background-colour-hover-white:hover,.background-colour-white{background-color:#FFFFFF}.background-colour-hover-black:hover,.background-colour-black{background-color:#000000}.background-colour-hover-white:hover,.background-colour-white{background-color:#FFFFFF}.background-colour-hover-grey-extra-light:hover,.background-colour-grey-extra-light{background-color:#D7D7D7}.background-colour-hover-grey-light:hover,.background-colour-grey-light{background-color:#E8E8E8}.background-colour-hover-grey-medium:hover,.background-colour-grey-medium{background-color:#8A8A8A}.background-colour-hover-grey-dark:hover,.background-colour-grey-dark{background-color:#4A4A4A}.space-above-0{margin-top:0}.space-above-1{margin-top:5px}.space-above-2{margin-top:10px}.space-above-3{margin-top:15px}.space-above-4{margin-top:30px}.space-above-5{margin-top:45px}.space-above-6{margin-top:60px}.space-below-0{margin-bottom:0}.space-below-1{margin-bottom:5px}.space-below-2{margin-bottom:10px}.space-below-3{margin-bottom:15px}.space-below-4{margin-bottom:30px}.space-below-5{margin-bottom:45px}.space-below-6{margin-bottom:60px}.text-colour-hover-primary:hover,.text-colour-primary{color:#2C089B}.text-colour-hover-secondary:hover,.text-colour-secondary{color:#2AF135}.text-colour-hover-tertiary:hover,.text-colour-tertiary{color:#FF7272}.text-colour-hover-brand-1:hover,.text-colour-brand-1{color:#B30510}.text-colour-hover-brand-2:hover,.text-colour-brand-2{color:#6E0887}.text-colour-hover-brand-3:hover,.text-colour-brand-3{color:#50B400}.text-colour-hover-brand-4:hover,.text-colour-brand-4{color:#FFE500}.text-colour-hover-brand-5:hover,.text-colour-brand-5{color:#F07D00}.text-colour-hover-brand-6:hover,.text-colour-brand-6{color:#CBC8C8}.text-colour-hover-white:hover,.text-colour-white{color:#FFFFFF}.text-colour-hover-black:hover,.text-colour-black{color:#000000}.text-colour-hover-grey-extra-light:hover,.text-colour-grey-extra-light{color:#D7D7D7}.text-colour-hover-grey-light:hover,.text-colour-grey-light{color:#E8E8E8}.text-colour-hover-grey-medium:hover,.text-colour-grey-medium{color:#8A8A8A}.text-colour-hover-grey-dark:hover,.text-colour-grey-dark{color:#4A4A4A}:host{display:contents;font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px}@keyframes ticker{0%{transform:translate3d(0, 0, 0)}100%{transform:translate3d(-100%, 0, 0)}}.container{position:absolute;left:0;right:0;z-index:1}.container .main-message-wrap{position:absolute;z-index:1;padding:10px 30px;left:0;top:0;font-size:24px;line-height:30px;font-weight:600;max-width:33.3%}.container .ticker-wrap{padding:10px 0 10px 0;min-height:17px;font-size:17px;line-height:24px;overflow:hidden;position:relative}.container .ticker-wrap .sleeve{will-change:transform;width:100%;position:absolute;left:100%;display:flex;animation-iteration-count:infinite;animation-timing-function:linear;animation-name:ticker;animation-duration:20s}.container .ticker-wrap .sleeve .ticker-item{white-space:nowrap;padding:0 15px}@media screen and (max-width: 768px){.container .main-message-wrap{font-size:17px;line-height:24px;padding:10px}}";
1684
+ const biggiveTotalizerCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.background-colour-hover-primary:hover,.background-colour-primary{background-color:#2C089B}.background-colour-hover-secondary:hover,.background-colour-secondary{background-color:#2AF135}.background-colour-hover-tertiary:hover,.background-colour-tertiary{background-color:#FF7272}.background-colour-hover-brand-1:hover,.background-colour-brand-1{background-color:#B30510}.background-colour-hover-brand-2:hover,.background-colour-brand-2{background-color:#6E0887}.background-colour-hover-brand-3:hover,.background-colour-brand-3{background-color:#50B400}.background-colour-hover-brand-4:hover,.background-colour-brand-4{background-color:#FFE500}.background-colour-hover-brand-5:hover,.background-colour-brand-5{background-color:#F07D00}.background-colour-hover-brand-6:hover,.background-colour-brand-6{background-color:#62CFC9}.background-colour-hover-white:hover,.background-colour-white{background-color:#FFFFFF}.background-colour-hover-black:hover,.background-colour-black{background-color:#000000}.background-colour-hover-white:hover,.background-colour-white{background-color:#FFFFFF}.background-colour-hover-grey-extra-light:hover,.background-colour-grey-extra-light{background-color:#D7D7D7}.background-colour-hover-grey-light:hover,.background-colour-grey-light{background-color:#E8E8E8}.background-colour-hover-grey-medium:hover,.background-colour-grey-medium{background-color:#8A8A8A}.background-colour-hover-grey-dark:hover,.background-colour-grey-dark{background-color:#4A4A4A}.space-above-0{margin-top:0}.space-above-1{margin-top:5px}.space-above-2{margin-top:10px}.space-above-3{margin-top:15px}.space-above-4{margin-top:30px}.space-above-5{margin-top:45px}.space-above-6{margin-top:60px}.space-below-0{margin-bottom:0}.space-below-1{margin-bottom:5px}.space-below-2{margin-bottom:10px}.space-below-3{margin-bottom:15px}.space-below-4{margin-bottom:30px}.space-below-5{margin-bottom:45px}.space-below-6{margin-bottom:60px}.text-colour-hover-primary:hover,.text-colour-primary{color:#2C089B}.text-colour-hover-secondary:hover,.text-colour-secondary{color:#2AF135}.text-colour-hover-tertiary:hover,.text-colour-tertiary{color:#FF7272}.text-colour-hover-brand-1:hover,.text-colour-brand-1{color:#B30510}.text-colour-hover-brand-2:hover,.text-colour-brand-2{color:#6E0887}.text-colour-hover-brand-3:hover,.text-colour-brand-3{color:#50B400}.text-colour-hover-brand-4:hover,.text-colour-brand-4{color:#FFE500}.text-colour-hover-brand-5:hover,.text-colour-brand-5{color:#F07D00}.text-colour-hover-brand-6:hover,.text-colour-brand-6{color:#CBC8C8}.text-colour-hover-white:hover,.text-colour-white{color:#FFFFFF}.text-colour-hover-black:hover,.text-colour-black{color:#000000}.text-colour-hover-grey-extra-light:hover,.text-colour-grey-extra-light{color:#D7D7D7}.text-colour-hover-grey-light:hover,.text-colour-grey-light{color:#E8E8E8}.text-colour-hover-grey-medium:hover,.text-colour-grey-medium{color:#8A8A8A}.text-colour-hover-grey-dark:hover,.text-colour-grey-dark{color:#4A4A4A}:host{display:contents;font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px}@keyframes ticker{0%{transform:translate3d(0, 0, 0)}100%{transform:translate3d(-200%, 0, 0)}}.container{position:absolute;left:0;right:0;z-index:1}.container .main-message-wrap{position:absolute;z-index:1;padding:10px 30px;left:0;top:0;font-size:24px;line-height:30px;font-weight:600;max-width:33.3%}.container .ticker-wrap{padding:10px 0 10px 0;min-height:17px;font-size:17px;line-height:24px;overflow:hidden;position:relative}.container .ticker-wrap .sleeve{will-change:transform;width:100%;position:absolute;left:100%;display:flex;animation-iteration-count:infinite;animation-timing-function:linear;animation-name:ticker;animation-duration:10s}@media (prefers-reduced-motion){.container .ticker-wrap .sleeve{animation-name:none}}.container .ticker-wrap .sleeve .ticker-item{white-space:nowrap;padding:0 15px}.container .ticker-wrap .sleeve.sleeve-delayed-copy{animation-delay:5s}@media screen and (max-width: 768px){.container .main-message-wrap{font-size:17px;line-height:24px;padding:10px}}";
1684
1685
 
1685
1686
  const BiggiveTotalizer = class {
1686
1687
  constructor(hostRef) {
@@ -1692,22 +1693,58 @@ const BiggiveTotalizer = class {
1692
1693
  this.secondaryTextColour = 'black';
1693
1694
  this.mainMessage = undefined;
1694
1695
  }
1696
+ setSpeed(itemsWidth) {
1697
+ var _a, _b;
1698
+ const sleeve1 = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.ticker-wrap #sleeve_1');
1699
+ const sleeve2 = (_b = this.host.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.ticker-wrap #sleeve_2');
1700
+ if (!sleeve1 || !sleeve2) {
1701
+ console.log('sleeve1 or sleeve2 is missing, skipping setSpeed()');
1702
+ return;
1703
+ }
1704
+ // Restart the animation(s) on window resize to reduce the chance of jankiness.
1705
+ // https://stackoverflow.com/a/45036752/2803757
1706
+ sleeve1.style.animationName = 'none';
1707
+ sleeve2.style.animationName = 'none';
1708
+ const duration = sleeve1.clientWidth / 50;
1709
+ sleeve1.style.animationDuration = Math.round(duration) + 's';
1710
+ sleeve1.style.animationName = 'ticker';
1711
+ // For now, only show the 2nd copy if there's space for it to not overlap. This means
1712
+ // a bumpier loop on mobile, but we'd need a tweaked approach to wrap around cleanly
1713
+ // where the item lists doesn't fit on the screen twice. The 1.5 ratio is a trial and
1714
+ // error number which seems OK for now. It leaves a bit of a gap before items cycle
1715
+ // back in at tablet sizes but is an improvement on what we had before at all breakpoints
1716
+ // tested.
1717
+ if (itemsWidth * 1.5 < sleeve1.clientWidth) {
1718
+ sleeve2.style.animationDuration = Math.round(duration) + 's';
1719
+ sleeve2.style.animationDelay = Math.round(duration / 2) + 's';
1720
+ sleeve2.style.animationName = 'ticker';
1721
+ }
1722
+ }
1695
1723
  componentDidRender() {
1696
- // @ts-ignore
1724
+ var _a, _b;
1697
1725
  const tickerItemsInternalWrapper = this.host.querySelector(`[slot="ticker-items"]`);
1726
+ const sleeve1 = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.ticker-wrap #sleeve_1');
1727
+ const sleeve2 = (_b = this.host.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.ticker-wrap #sleeve_2');
1728
+ if (!tickerItemsInternalWrapper || !sleeve1 || !sleeve2) {
1729
+ console.log('tickerItemsInternalWrapper, sleeve1 or sleeve2 is missing, skipping totalizer animation setup');
1730
+ return;
1731
+ }
1732
+ // Clone all children of the ticker items internal wrapper and append them, so the ticker can show items without
1733
+ // a blank break. Sleeve 2 will animate on a delay per https://stackoverflow.com/a/45847760.
1734
+ tickerItemsInternalWrapper.childNodes.forEach((child) => {
1735
+ sleeve2.appendChild(child.cloneNode(true)); // Deep clone all items.
1736
+ });
1698
1737
  if (tickerItemsInternalWrapper !== null && tickerItemsInternalWrapper !== undefined) {
1699
1738
  tickerItemsInternalWrapper.style.display = 'inline-flex';
1700
1739
  tickerItemsInternalWrapper.style.flex = 'none';
1701
1740
  }
1702
- // @ts-ignore
1703
- const tickerWidth = this.host.shadowRoot.querySelector('.ticker-wrap .sleeve').clientWidth;
1704
- const duration = tickerWidth / 50;
1705
- // @ts-ignore
1706
- const sleeve = this.host.shadowRoot.querySelector('.ticker-wrap .sleeve');
1707
- sleeve.style.animationDuration = Math.round(duration) + 's';
1741
+ this.setSpeed(tickerItemsInternalWrapper.clientWidth);
1742
+ window.addEventListener('resize', () => {
1743
+ this.setSpeed(tickerItemsInternalWrapper.clientWidth);
1744
+ });
1708
1745
  }
1709
1746
  render() {
1710
- return (h("div", { class: 'container space-below-' + this.spaceBelow }, h("div", { class: "sleeve" }, h("div", { class: "banner" }, h("div", { class: 'main-message-wrap background-colour-' + this.secondaryColour + ' text-colour-' + this.secondaryTextColour }, this.mainMessage), h("div", { class: 'ticker-wrap background-colour-' + this.primaryColour + ' text-colour-' + this.primaryTextColour }, h("div", { class: "sleeve" }, h("slot", { name: "ticker-items" })))))));
1747
+ return (h("div", { class: 'container space-below-' + this.spaceBelow }, h("div", null, h("div", { class: "banner" }, h("div", { class: 'main-message-wrap background-colour-' + this.secondaryColour + ' text-colour-' + this.secondaryTextColour }, this.mainMessage), h("div", { class: 'ticker-wrap background-colour-' + this.primaryColour + ' text-colour-' + this.primaryTextColour }, h("div", { id: "sleeve_1", class: "sleeve" }, h("slot", { name: "ticker-items" })), h("div", { id: "sleeve_2", class: "sleeve sleeve-delayed-copy" }))))));
1711
1748
  }
1712
1749
  get host() { return getElement(this); }
1713
1750
  };
package/dist/types/components/biggive-campaign-card-filter-grid/biggive-campaign-card-filter-grid.d.ts CHANGED
@@ -63,11 +63,11 @@ export declare class BiggiveCampaignCardFilterGrid {
63
63
  /**
64
64
  * This helps us inject a pre-selected dropdown value from outside of this component.
65
65
  * This is especially helpful for the Meta campaign and Explore pages, where searching
66
- * by text whipes out previous sort options and re-uses Relevance, or where one of those
66
+ * by text wipes out previous sort options and re-uses Relevance, or where one of those
67
67
  * two pages is loaded directly with URL parameters - in such a scenario the dropdown
68
68
  * shows that it's pre-selected. DON-558.
69
69
  */
70
- selectedSortByOption: 'Most raised' | 'Match funds remaining' | 'Relevance' | null;
70
+ selectedSortByOption: 'Most raised' | 'Match funds remaining' | 'Relevance';
71
71
  /**
72
72
  * For injecting the chosen category to filter by, as per the comment above for `selectedSortByOption`.
73
73
  */
@@ -88,6 +88,7 @@ export declare class BiggiveCampaignCardFilterGrid {
88
88
  * State variable - causes re-render on change
89
89
  */
90
90
  filtersApplied: boolean;
91
+ private initialSortByOption;
91
92
  private getSearchAndFilterObject;
92
93
  doOptionSelectCompletedHandler(event: any): void;
93
94
  private handleApplyFilterButtonClick;
package/dist/types/components/biggive-totalizer/biggive-totalizer.d.ts CHANGED
@@ -24,6 +24,7 @@ export declare class BiggiveTotalizer {
24
24
  * Primary message
25
25
  */
26
26
  mainMessage: string;
27
+ setSpeed(itemsWidth: number): void;
27
28
  componentDidRender(): void;
28
29
  render(): any;
29
30
  }
package/dist/types/components.d.ts CHANGED
@@ -399,9 +399,9 @@ export namespace Components {
399
399
  */
400
400
  "selectedFilterLocation": string | null;
401
401
  /**
402
- * This helps us inject a pre-selected dropdown value from outside of this component. This is especially helpful for the Meta campaign and Explore pages, where searching by text whipes out previous sort options and re-uses Relevance, or where one of those two pages is loaded directly with URL parameters - in such a scenario the dropdown shows that it's pre-selected. DON-558.
402
+ * This helps us inject a pre-selected dropdown value from outside of this component. This is especially helpful for the Meta campaign and Explore pages, where searching by text wipes out previous sort options and re-uses Relevance, or where one of those two pages is loaded directly with URL parameters - in such a scenario the dropdown shows that it's pre-selected. DON-558.
403
403
  */
404
- "selectedSortByOption": 'Most raised' | 'Match funds remaining' | 'Relevance' | null;
404
+ "selectedSortByOption": 'Most raised' | 'Match funds remaining' | 'Relevance';
405
405
  /**
406
406
  * Space below component
407
407
  */
@@ -1905,9 +1905,9 @@ declare namespace LocalJSX {
1905
1905
  */
1906
1906
  "selectedFilterLocation"?: string | null;
1907
1907
  /**
1908
- * This helps us inject a pre-selected dropdown value from outside of this component. This is especially helpful for the Meta campaign and Explore pages, where searching by text whipes out previous sort options and re-uses Relevance, or where one of those two pages is loaded directly with URL parameters - in such a scenario the dropdown shows that it's pre-selected. DON-558.
1908
+ * This helps us inject a pre-selected dropdown value from outside of this component. This is especially helpful for the Meta campaign and Explore pages, where searching by text wipes out previous sort options and re-uses Relevance, or where one of those two pages is loaded directly with URL parameters - in such a scenario the dropdown shows that it's pre-selected. DON-558.
1909
1909
  */
1910
- "selectedSortByOption"?: 'Most raised' | 'Match funds remaining' | 'Relevance' | null;
1910
+ "selectedSortByOption"?: 'Most raised' | 'Match funds remaining' | 'Relevance';
1911
1911
  /**
1912
1912
  * Space below component
1913
1913
  */