@biggive/components 202304251558.0.0 → 202305040926.0.0

package/hydrate/index.js

@@ -6814,7 +6814,7 @@ class BiggiveCampaignCardFilterGrid {
       this.filtersApplied = false;
       // Clear all
       this.searchText = null;
-      this.selectedSortByOption = null;
+      this.selectedSortByOption = this.initialSortByOption;
       this.selectedFilterBeneficiary = null;
       this.selectedFilterCategory = null;
       this.selectedFilterFunding = null;
@@ -6847,7 +6847,7 @@ class BiggiveCampaignCardFilterGrid {
     this.beneficiaryOptions = [];
     this.locationOptions = [];
     this.fundingOptions = [];
-    this.selectedSortByOption = null;
+    this.selectedSortByOption = undefined;
     this.selectedFilterCategory = null;
     this.selectedFilterBeneficiary = null;
     this.selectedFilterLocation = null;
@@ -6898,6 +6898,7 @@ class BiggiveCampaignCardFilterGrid {
   componentWillRender() {
     this.filtersApplied =
       this.selectedFilterCategory !== null || this.selectedFilterBeneficiary !== null || this.selectedFilterFunding !== null || this.selectedFilterLocation !== null;
+    this.initialSortByOption = this.selectedSortByOption;
   }
   render() {
     var _a;
@@ -6909,7 +6910,7 @@ class BiggiveCampaignCardFilterGrid {
       ? undefined
       : (Array.isArray(this.locationOptions) ? this.locationOptions : JSON.parse(this.locationOptions)).map(option => (hAsync("biggive-form-field-select-option", { value: option, label: option })))), hAsync("biggive-form-field-select", { placeholder: this.fundingPlaceHolderText, selectedLabel: this.selectedFilterFunding, id: "funding", "space-below": "2" }, this.fundingOptions.length === 0
       ? undefined
-      : (Array.isArray(this.fundingOptions) ? this.fundingOptions : JSON.parse(this.fundingOptions)).map(option => (hAsync("biggive-form-field-select-option", { value: option, label: option })))), hAsync("div", { class: "align-right" }, hAsync("biggive-button", { label: "Apply filters", onClick: this.handleApplyFilterButtonClick })))), hAsync("div", { class: "sort-wrap" }, hAsync("biggive-form-field-select", { "select-style": "underlined", placeholder: this.sortByPlaceholderText, selectedLabel: this.selectedSortByOption, id: "sort-by" }, hAsync("biggive-form-field-select-option", { value: "amountRaised", label: "Most raised" }), hAsync("biggive-form-field-select-option", { value: "matchFundsRemaining", label: "Match funds remaining" }), hAsync("biggive-form-field-select-option", { value: "Relevance", label: "Relevance" })))), hAsync("div", { class: "selected-filter-wrap" }, hAsync("div", { class: "selected-filters" }), hAsync("div", { class: "clear-all" }, hAsync("a", { onClick: this.handleClearAll }, "Clear all"))), hAsync("div", { class: "campaign-grid" }, hAsync("slot", { name: "campaign-grid" })))));
+      : (Array.isArray(this.fundingOptions) ? this.fundingOptions : JSON.parse(this.fundingOptions)).map(option => (hAsync("biggive-form-field-select-option", { value: option, label: option })))), hAsync("div", { class: "align-right" }, hAsync("biggive-button", { label: "Apply filters", onClick: this.handleApplyFilterButtonClick })))), hAsync("div", { class: "sort-wrap" }, hAsync("biggive-form-field-select", { "select-style": "underlined", placeholder: this.sortByPlaceholderText, selectedLabel: this.selectedSortByOption, id: "sort-by" }, hAsync("biggive-form-field-select-option", { value: "amountRaised", label: "Most raised" }), hAsync("biggive-form-field-select-option", { value: "matchFundsRemaining", label: "Match funds remaining" }), (this.searchText || '').length > 0 ? hAsync("biggive-form-field-select-option", { value: "Relevance", label: "Relevance" }) : null))), hAsync("div", { class: "selected-filter-wrap" }, hAsync("div", { class: "selected-filters" }), hAsync("div", { class: "clear-all" }, hAsync("a", { onClick: this.handleClearAll }, "Clear all"))), hAsync("div", { class: "campaign-grid" }, hAsync("slot", { name: "campaign-grid" })))));
   }
   get el() { return getElement(this); }
   static get style() { return biggiveCampaignCardFilterGridCss; }
@@ -8861,7 +8862,7 @@ class BiggiveTippingSlider {
   }; }
 }
 
-const biggiveTotalizerCss = "/*!@a*/a.sc-biggive-totalizer{color:inherit;text-decoration:underline}/*!@a:hover*/a.sc-biggive-totalizer:hover{text-decoration:none}/*!@.background-colour-hover-primary:hover,\n.background-colour-primary*/.background-colour-hover-primary.sc-biggive-totalizer:hover,.background-colour-primary.sc-biggive-totalizer{background-color:#2C089B}/*!@.background-colour-hover-secondary:hover,\n.background-colour-secondary*/.background-colour-hover-secondary.sc-biggive-totalizer:hover,.background-colour-secondary.sc-biggive-totalizer{background-color:#2AF135}/*!@.background-colour-hover-tertiary:hover,\n.background-colour-tertiary*/.background-colour-hover-tertiary.sc-biggive-totalizer:hover,.background-colour-tertiary.sc-biggive-totalizer{background-color:#FF7272}/*!@.background-colour-hover-brand-1:hover,\n.background-colour-brand-1*/.background-colour-hover-brand-1.sc-biggive-totalizer:hover,.background-colour-brand-1.sc-biggive-totalizer{background-color:#B30510}/*!@.background-colour-hover-brand-2:hover,\n.background-colour-brand-2*/.background-colour-hover-brand-2.sc-biggive-totalizer:hover,.background-colour-brand-2.sc-biggive-totalizer{background-color:#6E0887}/*!@.background-colour-hover-brand-3:hover,\n.background-colour-brand-3*/.background-colour-hover-brand-3.sc-biggive-totalizer:hover,.background-colour-brand-3.sc-biggive-totalizer{background-color:#50B400}/*!@.background-colour-hover-brand-4:hover,\n.background-colour-brand-4*/.background-colour-hover-brand-4.sc-biggive-totalizer:hover,.background-colour-brand-4.sc-biggive-totalizer{background-color:#FFE500}/*!@.background-colour-hover-brand-5:hover,\n.background-colour-brand-5*/.background-colour-hover-brand-5.sc-biggive-totalizer:hover,.background-colour-brand-5.sc-biggive-totalizer{background-color:#F07D00}/*!@.background-colour-hover-brand-6:hover,\n.background-colour-brand-6*/.background-colour-hover-brand-6.sc-biggive-totalizer:hover,.background-colour-brand-6.sc-biggive-totalizer{background-color:#62CFC9}/*!@.background-colour-hover-white:hover,\n.background-colour-white*/.background-colour-hover-white.sc-biggive-totalizer:hover,.background-colour-white.sc-biggive-totalizer{background-color:#FFFFFF}/*!@.background-colour-hover-black:hover,\n.background-colour-black*/.background-colour-hover-black.sc-biggive-totalizer:hover,.background-colour-black.sc-biggive-totalizer{background-color:#000000}/*!@.background-colour-hover-white:hover,\n.background-colour-white*/.background-colour-hover-white.sc-biggive-totalizer:hover,.background-colour-white.sc-biggive-totalizer{background-color:#FFFFFF}/*!@.background-colour-hover-grey-extra-light:hover,\n.background-colour-grey-extra-light*/.background-colour-hover-grey-extra-light.sc-biggive-totalizer:hover,.background-colour-grey-extra-light.sc-biggive-totalizer{background-color:#D7D7D7}/*!@.background-colour-hover-grey-light:hover,\n.background-colour-grey-light*/.background-colour-hover-grey-light.sc-biggive-totalizer:hover,.background-colour-grey-light.sc-biggive-totalizer{background-color:#E8E8E8}/*!@.background-colour-hover-grey-medium:hover,\n.background-colour-grey-medium*/.background-colour-hover-grey-medium.sc-biggive-totalizer:hover,.background-colour-grey-medium.sc-biggive-totalizer{background-color:#8A8A8A}/*!@.background-colour-hover-grey-dark:hover,\n.background-colour-grey-dark*/.background-colour-hover-grey-dark.sc-biggive-totalizer:hover,.background-colour-grey-dark.sc-biggive-totalizer{background-color:#4A4A4A}/*!@.space-above-0*/.space-above-0.sc-biggive-totalizer{margin-top:0}/*!@.space-above-1*/.space-above-1.sc-biggive-totalizer{margin-top:5px}/*!@.space-above-2*/.space-above-2.sc-biggive-totalizer{margin-top:10px}/*!@.space-above-3*/.space-above-3.sc-biggive-totalizer{margin-top:15px}/*!@.space-above-4*/.space-above-4.sc-biggive-totalizer{margin-top:30px}/*!@.space-above-5*/.space-above-5.sc-biggive-totalizer{margin-top:45px}/*!@.space-above-6*/.space-above-6.sc-biggive-totalizer{margin-top:60px}/*!@.space-below-0*/.space-below-0.sc-biggive-totalizer{margin-bottom:0}/*!@.space-below-1*/.space-below-1.sc-biggive-totalizer{margin-bottom:5px}/*!@.space-below-2*/.space-below-2.sc-biggive-totalizer{margin-bottom:10px}/*!@.space-below-3*/.space-below-3.sc-biggive-totalizer{margin-bottom:15px}/*!@.space-below-4*/.space-below-4.sc-biggive-totalizer{margin-bottom:30px}/*!@.space-below-5*/.space-below-5.sc-biggive-totalizer{margin-bottom:45px}/*!@.space-below-6*/.space-below-6.sc-biggive-totalizer{margin-bottom:60px}/*!@.text-colour-hover-primary:hover,\n.text-colour-primary*/.text-colour-hover-primary.sc-biggive-totalizer:hover,.text-colour-primary.sc-biggive-totalizer{color:#2C089B}/*!@.text-colour-hover-secondary:hover,\n.text-colour-secondary*/.text-colour-hover-secondary.sc-biggive-totalizer:hover,.text-colour-secondary.sc-biggive-totalizer{color:#2AF135}/*!@.text-colour-hover-tertiary:hover,\n.text-colour-tertiary*/.text-colour-hover-tertiary.sc-biggive-totalizer:hover,.text-colour-tertiary.sc-biggive-totalizer{color:#FF7272}/*!@.text-colour-hover-brand-1:hover,\n.text-colour-brand-1*/.text-colour-hover-brand-1.sc-biggive-totalizer:hover,.text-colour-brand-1.sc-biggive-totalizer{color:#B30510}/*!@.text-colour-hover-brand-2:hover,\n.text-colour-brand-2*/.text-colour-hover-brand-2.sc-biggive-totalizer:hover,.text-colour-brand-2.sc-biggive-totalizer{color:#6E0887}/*!@.text-colour-hover-brand-3:hover,\n.text-colour-brand-3*/.text-colour-hover-brand-3.sc-biggive-totalizer:hover,.text-colour-brand-3.sc-biggive-totalizer{color:#50B400}/*!@.text-colour-hover-brand-4:hover,\n.text-colour-brand-4*/.text-colour-hover-brand-4.sc-biggive-totalizer:hover,.text-colour-brand-4.sc-biggive-totalizer{color:#FFE500}/*!@.text-colour-hover-brand-5:hover,\n.text-colour-brand-5*/.text-colour-hover-brand-5.sc-biggive-totalizer:hover,.text-colour-brand-5.sc-biggive-totalizer{color:#F07D00}/*!@.text-colour-hover-brand-6:hover,\n.text-colour-brand-6*/.text-colour-hover-brand-6.sc-biggive-totalizer:hover,.text-colour-brand-6.sc-biggive-totalizer{color:#CBC8C8}/*!@.text-colour-hover-white:hover,\n.text-colour-white*/.text-colour-hover-white.sc-biggive-totalizer:hover,.text-colour-white.sc-biggive-totalizer{color:#FFFFFF}/*!@.text-colour-hover-black:hover,\n.text-colour-black*/.text-colour-hover-black.sc-biggive-totalizer:hover,.text-colour-black.sc-biggive-totalizer{color:#000000}/*!@.text-colour-hover-grey-extra-light:hover,\n.text-colour-grey-extra-light*/.text-colour-hover-grey-extra-light.sc-biggive-totalizer:hover,.text-colour-grey-extra-light.sc-biggive-totalizer{color:#D7D7D7}/*!@.text-colour-hover-grey-light:hover,\n.text-colour-grey-light*/.text-colour-hover-grey-light.sc-biggive-totalizer:hover,.text-colour-grey-light.sc-biggive-totalizer{color:#E8E8E8}/*!@.text-colour-hover-grey-medium:hover,\n.text-colour-grey-medium*/.text-colour-hover-grey-medium.sc-biggive-totalizer:hover,.text-colour-grey-medium.sc-biggive-totalizer{color:#8A8A8A}/*!@.text-colour-hover-grey-dark:hover,\n.text-colour-grey-dark*/.text-colour-hover-grey-dark.sc-biggive-totalizer:hover,.text-colour-grey-dark.sc-biggive-totalizer{color:#4A4A4A}/*!@:host*/.sc-biggive-totalizer-h{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*/.container.sc-biggive-totalizer{position:absolute;left:0;right:0;z-index:1}/*!@.container .main-message-wrap*/.container.sc-biggive-totalizer .main-message-wrap.sc-biggive-totalizer{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*/.container.sc-biggive-totalizer .ticker-wrap.sc-biggive-totalizer{padding:10px 0 10px 0;min-height:17px;font-size:17px;line-height:24px;overflow:hidden;position:relative}/*!@.container .ticker-wrap .sleeve*/.container.sc-biggive-totalizer .ticker-wrap.sc-biggive-totalizer .sleeve.sc-biggive-totalizer{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*/.container.sc-biggive-totalizer .ticker-wrap.sc-biggive-totalizer .sleeve.sc-biggive-totalizer .ticker-item.sc-biggive-totalizer{white-space:nowrap;padding:0 15px}@media screen and (max-width: 768px){/*!@.container .main-message-wrap*/.container.sc-biggive-totalizer .main-message-wrap.sc-biggive-totalizer{font-size:17px;line-height:24px;padding:10px}}";
+const biggiveTotalizerCss = "/*!@a*/a.sc-biggive-totalizer{color:inherit;text-decoration:underline}/*!@a:hover*/a.sc-biggive-totalizer:hover{text-decoration:none}/*!@.background-colour-hover-primary:hover,\n.background-colour-primary*/.background-colour-hover-primary.sc-biggive-totalizer:hover,.background-colour-primary.sc-biggive-totalizer{background-color:#2C089B}/*!@.background-colour-hover-secondary:hover,\n.background-colour-secondary*/.background-colour-hover-secondary.sc-biggive-totalizer:hover,.background-colour-secondary.sc-biggive-totalizer{background-color:#2AF135}/*!@.background-colour-hover-tertiary:hover,\n.background-colour-tertiary*/.background-colour-hover-tertiary.sc-biggive-totalizer:hover,.background-colour-tertiary.sc-biggive-totalizer{background-color:#FF7272}/*!@.background-colour-hover-brand-1:hover,\n.background-colour-brand-1*/.background-colour-hover-brand-1.sc-biggive-totalizer:hover,.background-colour-brand-1.sc-biggive-totalizer{background-color:#B30510}/*!@.background-colour-hover-brand-2:hover,\n.background-colour-brand-2*/.background-colour-hover-brand-2.sc-biggive-totalizer:hover,.background-colour-brand-2.sc-biggive-totalizer{background-color:#6E0887}/*!@.background-colour-hover-brand-3:hover,\n.background-colour-brand-3*/.background-colour-hover-brand-3.sc-biggive-totalizer:hover,.background-colour-brand-3.sc-biggive-totalizer{background-color:#50B400}/*!@.background-colour-hover-brand-4:hover,\n.background-colour-brand-4*/.background-colour-hover-brand-4.sc-biggive-totalizer:hover,.background-colour-brand-4.sc-biggive-totalizer{background-color:#FFE500}/*!@.background-colour-hover-brand-5:hover,\n.background-colour-brand-5*/.background-colour-hover-brand-5.sc-biggive-totalizer:hover,.background-colour-brand-5.sc-biggive-totalizer{background-color:#F07D00}/*!@.background-colour-hover-brand-6:hover,\n.background-colour-brand-6*/.background-colour-hover-brand-6.sc-biggive-totalizer:hover,.background-colour-brand-6.sc-biggive-totalizer{background-color:#62CFC9}/*!@.background-colour-hover-white:hover,\n.background-colour-white*/.background-colour-hover-white.sc-biggive-totalizer:hover,.background-colour-white.sc-biggive-totalizer{background-color:#FFFFFF}/*!@.background-colour-hover-black:hover,\n.background-colour-black*/.background-colour-hover-black.sc-biggive-totalizer:hover,.background-colour-black.sc-biggive-totalizer{background-color:#000000}/*!@.background-colour-hover-white:hover,\n.background-colour-white*/.background-colour-hover-white.sc-biggive-totalizer:hover,.background-colour-white.sc-biggive-totalizer{background-color:#FFFFFF}/*!@.background-colour-hover-grey-extra-light:hover,\n.background-colour-grey-extra-light*/.background-colour-hover-grey-extra-light.sc-biggive-totalizer:hover,.background-colour-grey-extra-light.sc-biggive-totalizer{background-color:#D7D7D7}/*!@.background-colour-hover-grey-light:hover,\n.background-colour-grey-light*/.background-colour-hover-grey-light.sc-biggive-totalizer:hover,.background-colour-grey-light.sc-biggive-totalizer{background-color:#E8E8E8}/*!@.background-colour-hover-grey-medium:hover,\n.background-colour-grey-medium*/.background-colour-hover-grey-medium.sc-biggive-totalizer:hover,.background-colour-grey-medium.sc-biggive-totalizer{background-color:#8A8A8A}/*!@.background-colour-hover-grey-dark:hover,\n.background-colour-grey-dark*/.background-colour-hover-grey-dark.sc-biggive-totalizer:hover,.background-colour-grey-dark.sc-biggive-totalizer{background-color:#4A4A4A}/*!@.space-above-0*/.space-above-0.sc-biggive-totalizer{margin-top:0}/*!@.space-above-1*/.space-above-1.sc-biggive-totalizer{margin-top:5px}/*!@.space-above-2*/.space-above-2.sc-biggive-totalizer{margin-top:10px}/*!@.space-above-3*/.space-above-3.sc-biggive-totalizer{margin-top:15px}/*!@.space-above-4*/.space-above-4.sc-biggive-totalizer{margin-top:30px}/*!@.space-above-5*/.space-above-5.sc-biggive-totalizer{margin-top:45px}/*!@.space-above-6*/.space-above-6.sc-biggive-totalizer{margin-top:60px}/*!@.space-below-0*/.space-below-0.sc-biggive-totalizer{margin-bottom:0}/*!@.space-below-1*/.space-below-1.sc-biggive-totalizer{margin-bottom:5px}/*!@.space-below-2*/.space-below-2.sc-biggive-totalizer{margin-bottom:10px}/*!@.space-below-3*/.space-below-3.sc-biggive-totalizer{margin-bottom:15px}/*!@.space-below-4*/.space-below-4.sc-biggive-totalizer{margin-bottom:30px}/*!@.space-below-5*/.space-below-5.sc-biggive-totalizer{margin-bottom:45px}/*!@.space-below-6*/.space-below-6.sc-biggive-totalizer{margin-bottom:60px}/*!@.text-colour-hover-primary:hover,\n.text-colour-primary*/.text-colour-hover-primary.sc-biggive-totalizer:hover,.text-colour-primary.sc-biggive-totalizer{color:#2C089B}/*!@.text-colour-hover-secondary:hover,\n.text-colour-secondary*/.text-colour-hover-secondary.sc-biggive-totalizer:hover,.text-colour-secondary.sc-biggive-totalizer{color:#2AF135}/*!@.text-colour-hover-tertiary:hover,\n.text-colour-tertiary*/.text-colour-hover-tertiary.sc-biggive-totalizer:hover,.text-colour-tertiary.sc-biggive-totalizer{color:#FF7272}/*!@.text-colour-hover-brand-1:hover,\n.text-colour-brand-1*/.text-colour-hover-brand-1.sc-biggive-totalizer:hover,.text-colour-brand-1.sc-biggive-totalizer{color:#B30510}/*!@.text-colour-hover-brand-2:hover,\n.text-colour-brand-2*/.text-colour-hover-brand-2.sc-biggive-totalizer:hover,.text-colour-brand-2.sc-biggive-totalizer{color:#6E0887}/*!@.text-colour-hover-brand-3:hover,\n.text-colour-brand-3*/.text-colour-hover-brand-3.sc-biggive-totalizer:hover,.text-colour-brand-3.sc-biggive-totalizer{color:#50B400}/*!@.text-colour-hover-brand-4:hover,\n.text-colour-brand-4*/.text-colour-hover-brand-4.sc-biggive-totalizer:hover,.text-colour-brand-4.sc-biggive-totalizer{color:#FFE500}/*!@.text-colour-hover-brand-5:hover,\n.text-colour-brand-5*/.text-colour-hover-brand-5.sc-biggive-totalizer:hover,.text-colour-brand-5.sc-biggive-totalizer{color:#F07D00}/*!@.text-colour-hover-brand-6:hover,\n.text-colour-brand-6*/.text-colour-hover-brand-6.sc-biggive-totalizer:hover,.text-colour-brand-6.sc-biggive-totalizer{color:#CBC8C8}/*!@.text-colour-hover-white:hover,\n.text-colour-white*/.text-colour-hover-white.sc-biggive-totalizer:hover,.text-colour-white.sc-biggive-totalizer{color:#FFFFFF}/*!@.text-colour-hover-black:hover,\n.text-colour-black*/.text-colour-hover-black.sc-biggive-totalizer:hover,.text-colour-black.sc-biggive-totalizer{color:#000000}/*!@.text-colour-hover-grey-extra-light:hover,\n.text-colour-grey-extra-light*/.text-colour-hover-grey-extra-light.sc-biggive-totalizer:hover,.text-colour-grey-extra-light.sc-biggive-totalizer{color:#D7D7D7}/*!@.text-colour-hover-grey-light:hover,\n.text-colour-grey-light*/.text-colour-hover-grey-light.sc-biggive-totalizer:hover,.text-colour-grey-light.sc-biggive-totalizer{color:#E8E8E8}/*!@.text-colour-hover-grey-medium:hover,\n.text-colour-grey-medium*/.text-colour-hover-grey-medium.sc-biggive-totalizer:hover,.text-colour-grey-medium.sc-biggive-totalizer{color:#8A8A8A}/*!@.text-colour-hover-grey-dark:hover,\n.text-colour-grey-dark*/.text-colour-hover-grey-dark.sc-biggive-totalizer:hover,.text-colour-grey-dark.sc-biggive-totalizer{color:#4A4A4A}/*!@:host*/.sc-biggive-totalizer-h{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*/.container.sc-biggive-totalizer{position:absolute;left:0;right:0;z-index:1}/*!@.container .main-message-wrap*/.container.sc-biggive-totalizer .main-message-wrap.sc-biggive-totalizer{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*/.container.sc-biggive-totalizer .ticker-wrap.sc-biggive-totalizer{padding:10px 0 10px 0;min-height:17px;font-size:17px;line-height:24px;overflow:hidden;position:relative}/*!@.container .ticker-wrap .sleeve*/.container.sc-biggive-totalizer .ticker-wrap.sc-biggive-totalizer .sleeve.sc-biggive-totalizer{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*/.container.sc-biggive-totalizer .ticker-wrap.sc-biggive-totalizer .sleeve.sc-biggive-totalizer{animation-name:none}}/*!@.container .ticker-wrap .sleeve .ticker-item*/.container.sc-biggive-totalizer .ticker-wrap.sc-biggive-totalizer .sleeve.sc-biggive-totalizer .ticker-item.sc-biggive-totalizer{white-space:nowrap;padding:0 15px}/*!@.container .ticker-wrap .sleeve.sleeve-delayed-copy*/.container.sc-biggive-totalizer .ticker-wrap.sc-biggive-totalizer .sleeve.sleeve-delayed-copy.sc-biggive-totalizer{animation-delay:5s}@media screen and (max-width: 768px){/*!@.container .main-message-wrap*/.container.sc-biggive-totalizer .main-message-wrap.sc-biggive-totalizer{font-size:17px;line-height:24px;padding:10px}}";
 
 class BiggiveTotalizer {
   constructor(hostRef) {
@@ -8873,22 +8874,58 @@ class BiggiveTotalizer {
     this.secondaryTextColour = 'black';
     this.mainMessage = undefined;
   }
+  setSpeed(itemsWidth) {
+    var _a, _b;
+    const sleeve1 = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.ticker-wrap #sleeve_1');
+    const sleeve2 = (_b = this.host.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.ticker-wrap #sleeve_2');
+    if (!sleeve1 || !sleeve2) {
+      console.log('sleeve1 or sleeve2 is missing, skipping setSpeed()');
+      return;
+    }
+    // Restart the animation(s) on window resize to reduce the chance of jankiness.
+    // https://stackoverflow.com/a/45036752/2803757
+    sleeve1.style.animationName = 'none';
+    sleeve2.style.animationName = 'none';
+    const duration = sleeve1.clientWidth / 50;
+    sleeve1.style.animationDuration = Math.round(duration) + 's';
+    sleeve1.style.animationName = 'ticker';
+    // For now, only show the 2nd copy if there's space for it to not overlap. This means
+    // a bumpier loop on mobile, but we'd need a tweaked approach to wrap around cleanly
+    // where the item lists doesn't fit on the screen twice. The 1.5 ratio is a trial and
+    // error number which seems OK for now. It leaves a bit of a gap before items cycle
+    // back in at tablet sizes but is an improvement on what we had before at all breakpoints
+    // tested.
+    if (itemsWidth * 1.5 < sleeve1.clientWidth) {
+      sleeve2.style.animationDuration = Math.round(duration) + 's';
+      sleeve2.style.animationDelay = Math.round(duration / 2) + 's';
+      sleeve2.style.animationName = 'ticker';
+    }
+  }
   componentDidRender() {
-    // @ts-ignore
+    var _a, _b;
     const tickerItemsInternalWrapper = this.host.querySelector(`[slot="ticker-items"]`);
+    const sleeve1 = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.ticker-wrap #sleeve_1');
+    const sleeve2 = (_b = this.host.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.ticker-wrap #sleeve_2');
+    if (!tickerItemsInternalWrapper || !sleeve1 || !sleeve2) {
+      console.log('tickerItemsInternalWrapper, sleeve1 or sleeve2 is missing, skipping totalizer animation setup');
+      return;
+    }
+    // Clone all children of the ticker items internal wrapper and append them, so the ticker can show items without
+    // a blank break. Sleeve 2 will animate on a delay per https://stackoverflow.com/a/45847760.
+    tickerItemsInternalWrapper.childNodes.forEach((child) => {
+      sleeve2.appendChild(child.cloneNode(true)); // Deep clone all items.
+    });
     if (tickerItemsInternalWrapper !== null && tickerItemsInternalWrapper !== undefined) {
       tickerItemsInternalWrapper.style.display = 'inline-flex';
       tickerItemsInternalWrapper.style.flex = 'none';
     }
-    // @ts-ignore
-    const tickerWidth = this.host.shadowRoot.querySelector('.ticker-wrap .sleeve').clientWidth;
-    const duration = tickerWidth / 50;
-    // @ts-ignore
-    const sleeve = this.host.shadowRoot.querySelector('.ticker-wrap .sleeve');
-    sleeve.style.animationDuration = Math.round(duration) + 's';
+    this.setSpeed(tickerItemsInternalWrapper.clientWidth);
+    window.addEventListener('resize', () => {
+      this.setSpeed(tickerItemsInternalWrapper.clientWidth);
+    });
   }
   render() {
-    return (hAsync("div", { class: 'container space-below-' + this.spaceBelow }, hAsync("div", { class: "sleeve" }, hAsync("div", { class: "banner" }, hAsync("div", { class: 'main-message-wrap background-colour-' + this.secondaryColour + ' text-colour-' + this.secondaryTextColour }, this.mainMessage), hAsync("div", { class: 'ticker-wrap background-colour-' + this.primaryColour + ' text-colour-' + this.primaryTextColour }, hAsync("div", { class: "sleeve" }, hAsync("slot", { name: "ticker-items" })))))));
+    return (hAsync("div", { class: 'container space-below-' + this.spaceBelow }, hAsync("div", null, hAsync("div", { class: "banner" }, hAsync("div", { class: 'main-message-wrap background-colour-' + this.secondaryColour + ' text-colour-' + this.secondaryTextColour }, this.mainMessage), hAsync("div", { class: 'ticker-wrap background-colour-' + this.primaryColour + ' text-colour-' + this.primaryTextColour }, hAsync("div", { id: "sleeve_1", class: "sleeve" }, hAsync("slot", { name: "ticker-items" })), hAsync("div", { id: "sleeve_2", class: "sleeve sleeve-delayed-copy" }))))));
   }
   get host() { return getElement(this); }
   static get style() { return biggiveTotalizerCss; }

package/package.json

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