@biggive/components 202311241148.0.0 → 202312041141.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-7b0248b8.entry.js → p-67d14ff9.entry.js} +1 -1
  3. package/dist/cjs/biggive-accordion_42.cjs.entry.js +66 -40
  4. package/dist/collection/components/biggive-main-menu/biggive-main-menu.js +7 -0
  5. package/dist/collection/components/biggive-totalizer/biggive-totalizer.css +14 -10
  6. package/dist/collection/components/biggive-totalizer/biggive-totalizer.js +57 -39
  7. package/dist/collection/components/biggive-totalizer-ticker-item/biggive-totalizer-ticker-item.css +1 -1
  8. package/dist/components/biggive-main-menu.js +7 -0
  9. package/dist/components/biggive-totalizer-ticker-item.js +1 -1
  10. package/dist/components/biggive-totalizer.js +58 -39
  11. package/dist/esm/biggive-accordion_42.entry.js +66 -40
  12. package/dist/types/components/biggive-main-menu/biggive-main-menu.d.ts +1 -0
  13. package/dist/types/components/biggive-totalizer/biggive-totalizer.d.ts +2 -1
  14. package/hydrate/index.js +66 -40
  15. package/package.json +1 -1
package/dist/esm/biggive-accordion_42.entry.js CHANGED
@@ -1037,6 +1037,7 @@ const biggiveMainMenuCss = "a{color:inherit;text-decoration:underline}a:hover{te
1037
1037
  const BiggiveMainMenu = class {
1038
1038
  constructor(hostRef) {
1039
1039
  registerInstance(this, hostRef);
1040
+ this.lastOffsetHeight = 0;
1040
1041
  this.openMobileMenu = () => {
1041
1042
  const mobileMenu = this.host.shadowRoot.querySelector('.nav-links');
1042
1043
  mobileMenu.style.left = '0';
@@ -1058,6 +1059,12 @@ const BiggiveMainMenu = class {
1058
1059
  event.preventDefault();
1059
1060
  }
1060
1061
  setHeaderSize() {
1062
+ if (this.host.offsetHeight === this.lastOffsetHeight) {
1063
+ // Some browsers fire 'resize' overzealously on scroll; we don't want to cause extra paints if nothing
1064
+ // relevant changed.
1065
+ return;
1066
+ }
1067
+ this.lastOffsetHeight = this.host.offsetHeight;
1061
1068
  // Some resize edge cases lead Firefox, and maybe others, to go haywire and get a host offset
1062
1069
  // height of millions of pixels, presumably due to a layout logic loop. So for as long as we use
1063
1070
  // this body padding workaround, we need a safe maximum value, currently 130px, beyond which
@@ -1622,11 +1629,12 @@ const BiggiveTimelineEntry = class {
1622
1629
  };
1623
1630
  BiggiveTimelineEntry.style = biggiveTimelineEntryCss;
1624
1631
 
1625
- 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-cc-red:hover,.background-colour-brand-cc-red{background-color:#B30510}.background-colour-hover-brand-wgmf-purple:hover,.background-colour-brand-wgmf-purple{background-color:#6E0887}.background-colour-hover-brand-gmf-green:hover,.background-colour-brand-gmf-green{background-color:#50B400}.background-colour-hover-brand-emf-yellow:hover,.background-colour-brand-emf-yellow{background-color:#FFE500}.background-colour-hover-brand-c4c-orange:hover,.background-colour-brand-c4c-orange{background-color:#F07D00}.background-colour-hover-brand-afa-pink:hover,.background-colour-brand-afa-pink{background-color:#BF387D}.background-colour-hover-brand-mhf-turquoise:hover,.background-colour-brand-mhf-turquoise{background-color:#62CFC9}.background-colour-hover-brand-grey:hover,.background-colour-brand-grey{background-color:#CBC8C8}.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-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}.background-colour-hover-brand-6:hover,.background-colour-brand-6{background-color:#62CFC9}.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-cc-red:hover,.text-colour-brand-cc-red{color:#B30510}.text-colour-hover-brand-wgmf-purple:hover,.text-colour-brand-wgmf-purple{color:#6E0887}.text-colour-hover-brand-gmf-green:hover,.text-colour-brand-gmf-green{color:#50B400}.text-colour-hover-brand-emf-yellow:hover,.text-colour-brand-emf-yellow{color:#FFE500}.text-colour-hover-brand-c4c-orange:hover,.text-colour-brand-c4c-orange{color:#F07D00}.text-colour-hover-brand-afa-pink:hover,.text-colour-brand-afa-pink{color:#BF387D}.text-colour-hover-brand-mhf-turquoise:hover,.text-colour-brand-mhf-turquoise{color:#62CFC9}.text-colour-hover-brand-grey:hover,.text-colour-brand-grey{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}.text-colour-hover-brand-6:hover,.text-colour-brand-6{color:#CBC8C8}: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}}";
1632
+ 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-cc-red:hover,.background-colour-brand-cc-red{background-color:#B30510}.background-colour-hover-brand-wgmf-purple:hover,.background-colour-brand-wgmf-purple{background-color:#6E0887}.background-colour-hover-brand-gmf-green:hover,.background-colour-brand-gmf-green{background-color:#50B400}.background-colour-hover-brand-emf-yellow:hover,.background-colour-brand-emf-yellow{background-color:#FFE500}.background-colour-hover-brand-c4c-orange:hover,.background-colour-brand-c4c-orange{background-color:#F07D00}.background-colour-hover-brand-afa-pink:hover,.background-colour-brand-afa-pink{background-color:#BF387D}.background-colour-hover-brand-mhf-turquoise:hover,.background-colour-brand-mhf-turquoise{background-color:#62CFC9}.background-colour-hover-brand-grey:hover,.background-colour-brand-grey{background-color:#CBC8C8}.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-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}.background-colour-hover-brand-6:hover,.background-colour-brand-6{background-color:#62CFC9}.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-cc-red:hover,.text-colour-brand-cc-red{color:#B30510}.text-colour-hover-brand-wgmf-purple:hover,.text-colour-brand-wgmf-purple{color:#6E0887}.text-colour-hover-brand-gmf-green:hover,.text-colour-brand-gmf-green{color:#50B400}.text-colour-hover-brand-emf-yellow:hover,.text-colour-brand-emf-yellow{color:#FFE500}.text-colour-hover-brand-c4c-orange:hover,.text-colour-brand-c4c-orange{color:#F07D00}.text-colour-hover-brand-afa-pink:hover,.text-colour-brand-afa-pink{color:#BF387D}.text-colour-hover-brand-mhf-turquoise:hover,.text-colour-brand-mhf-turquoise{color:#62CFC9}.text-colour-hover-brand-grey:hover,.text-colour-brand-grey{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}.text-colour-hover-brand-6:hover,.text-colour-brand-6{color:#CBC8C8}:host{display:contents;font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;--ticker-end-left:-100%}@keyframes ticker{0%{transform:translate3d(0, 0, 0)}100%{transform:translate3d(var(--ticker-end-left), 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{font-size:17px;line-height:24px;padding:6px 30px 10px 0;min-height:17px;overflow:hidden;position:relative}.container .ticker-wrap .sleeve{will-change:transform;position:absolute;display:flex;min-width:100%;left:100%;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 !important}}.container .ticker-wrap .sleeve ::slotted([slot=ticker-items]){display:inline-flex;white-space:nowrap;max-height:24px}.container .ticker-wrap .sleeve-delayed-copy{display:none;white-space:nowrap;max-height:24px}@media screen and (max-width: 768px){.container .main-message-wrap{font-size:17px;line-height:24px;padding:10px}}";
1626
1633
 
1627
1634
  const BiggiveTotalizer = class {
1628
1635
  constructor(hostRef) {
1629
1636
  registerInstance(this, hostRef);
1637
+ this.lastWrapperWidth = 0;
1630
1638
  this.spaceBelow = 0;
1631
1639
  this.primaryColour = 'primary';
1632
1640
  this.primaryTextColour = 'white';
@@ -1634,64 +1642,82 @@ const BiggiveTotalizer = class {
1634
1642
  this.secondaryTextColour = 'black';
1635
1643
  this.mainMessage = undefined;
1636
1644
  }
1637
- setSpeed(itemsWidth) {
1638
- var _a, _b;
1639
- const sleeve1 = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.ticker-wrap #sleeve_1');
1640
- const sleeve2 = (_b = this.host.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.ticker-wrap #sleeve_2');
1641
- if (!sleeve1 || !sleeve2) {
1642
- console.log('sleeve1 or sleeve2 is missing, skipping setSpeed()');
1645
+ setSpeed(itemsWidth, containerWidth) {
1646
+ var _a;
1647
+ console.log('setSpeed() called with itemsWidth=' + itemsWidth + ', containerWidth=' + containerWidth);
1648
+ if (containerWidth === this.lastWrapperWidth) {
1649
+ // Some browsers fire 'resize' overzealously on scroll; we don't want to cause extra paints if nothing
1650
+ // relevant changed.
1643
1651
  return;
1644
1652
  }
1645
- // Restart the animation(s) on window resize to reduce the chance of jankiness.
1646
- // https://stackoverflow.com/a/45036752/2803757
1647
- sleeve1.style.animationName = 'none';
1648
- sleeve2.style.animationName = 'none';
1649
- const duration = sleeve1.clientWidth / 50;
1650
- sleeve1.style.animationDuration = Math.round(duration) + 's';
1651
- sleeve1.style.animationName = 'ticker';
1652
- // For now, only show the 2nd copy if there's space for it to not overlap. This means
1653
- // a bumpier loop on mobile, but we'd need a tweaked approach to wrap around cleanly
1654
- // where the item lists doesn't fit on the screen twice. The 1.5 ratio is a trial and
1655
- // error number which seems OK for now. It leaves a bit of a gap before items cycle
1656
- // back in at tablet sizes but is an improvement on what we had before at all breakpoints
1657
- // tested.
1658
- if (itemsWidth * 1.5 < sleeve1.clientWidth) {
1659
- sleeve2.style.animationDuration = Math.round(duration) + 's';
1660
- sleeve2.style.animationDelay = Math.round(duration / 2) + 's';
1661
- sleeve2.style.animationName = 'ticker';
1653
+ let sleeves = [];
1654
+ for (const ii in [1, 2, 3, 4]) {
1655
+ const sleeve = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.ticker-wrap #sleeve_' + ii);
1656
+ if (sleeve) {
1657
+ sleeves.push(sleeve);
1658
+ // Restart the animation(s) on window resize to reduce the chance of jankiness.
1659
+ // https://stackoverflow.com/a/45036752/2803757
1660
+ sleeve.style.animationName = 'none';
1661
+ }
1662
+ }
1663
+ this.lastWrapperWidth = containerWidth;
1664
+ if (sleeves.length === 0) {
1665
+ console.log('sleeves missing, skipping setSpeed()');
1666
+ return;
1667
+ }
1668
+ // We've seen the initial calculation exclude the ~30px per set of values end padding before,
1669
+ // and it's safe to err on the side of more copies to reduce the chance of abrupt early loop
1670
+ // ends, so we add a buffer of 40px to the calculation when deciding how many copies to use.
1671
+ const sleeveCount = Math.max(1, Math.min(4, Math.ceil((2 * (40 + itemsWidth)) / containerWidth)));
1672
+ this.host.style.setProperty('--ticker-end-left', `-${sleeveCount * 100}%`);
1673
+ const duration = Math.round((itemsWidth / 100) * sleeveCount);
1674
+ for (let ii = 1; ii <= sleeveCount; ii++) {
1675
+ const sleeve = sleeves[ii - 1];
1676
+ if (sleeve) {
1677
+ sleeve.style.animationDuration = duration + 's';
1678
+ // https://stackoverflow.com/a/45847760
1679
+ sleeve.style.animationDelay = (duration * (ii - 1)) / sleeveCount + 's';
1680
+ sleeve.style.display = 'inline-flex';
1681
+ sleeve.style.animationName = 'ticker';
1682
+ }
1662
1683
  }
1663
1684
  }
1664
- componentDidRender() {
1665
- var _a, _b;
1685
+ componentDidLoad() {
1686
+ var _a, _b, _c, _d, _e;
1687
+ const wrapper = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.ticker-wrap');
1666
1688
  const tickerItemsInternalWrapper = this.host.querySelector(`[slot="ticker-items"]`);
1667
- const sleeve1 = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.ticker-wrap #sleeve_1');
1668
- const sleeve2 = (_b = this.host.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.ticker-wrap #sleeve_2');
1669
- if (!tickerItemsInternalWrapper || !sleeve1 || !sleeve2) {
1670
- console.log('tickerItemsInternalWrapper, sleeve1 or sleeve2 is missing, skipping totalizer animation setup');
1689
+ const sleeve1 = (_b = this.host.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.ticker-wrap #sleeve_1');
1690
+ const sleeve2 = (_c = this.host.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('.ticker-wrap #sleeve_2');
1691
+ const sleeve3 = (_d = this.host.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('.ticker-wrap #sleeve_3');
1692
+ const sleeve4 = (_e = this.host.shadowRoot) === null || _e === void 0 ? void 0 : _e.querySelector('.ticker-wrap #sleeve_4');
1693
+ if (!tickerItemsInternalWrapper || !sleeve1) {
1694
+ console.log('tickerItemsInternalWrapper or sleeve1 is missing, skipping totalizer animation setup');
1671
1695
  return;
1672
1696
  }
1673
1697
  // Clone all children of the ticker items internal wrapper and append them, so the ticker can show items without
1674
- // a blank break. Sleeve 2 will animate on a delay per https://stackoverflow.com/a/45847760.
1698
+ // a blank break. Sleeve 2 and up will animate on delays per https://stackoverflow.com/a/45847760.
1675
1699
  tickerItemsInternalWrapper.childNodes.forEach((child) => {
1676
- sleeve2.appendChild(child.cloneNode(true)); // Deep clone all items.
1700
+ sleeve2 && sleeve2.appendChild(child.cloneNode(true)); // Deep clone all items.
1701
+ sleeve3 && sleeve3.appendChild(child.cloneNode(true));
1702
+ sleeve4 && sleeve4.appendChild(child.cloneNode(true));
1677
1703
  });
1678
- if (tickerItemsInternalWrapper !== null && tickerItemsInternalWrapper !== undefined) {
1679
- tickerItemsInternalWrapper.style.display = 'inline-flex';
1680
- tickerItemsInternalWrapper.style.flex = 'none';
1681
- }
1682
- this.setSpeed(tickerItemsInternalWrapper.clientWidth);
1704
+ setTimeout(() => {
1705
+ // In Angular contexts, it seems like we need to leave little time before the calculations work.
1706
+ // Not totally clear why yet.
1707
+ this.setSpeed(tickerItemsInternalWrapper.clientWidth, wrapper.clientWidth);
1708
+ }, 300);
1683
1709
  window.addEventListener('resize', () => {
1684
- this.setSpeed(tickerItemsInternalWrapper.clientWidth);
1710
+ this.setSpeed(tickerItemsInternalWrapper.clientWidth, wrapper.clientWidth);
1685
1711
  });
1686
1712
  }
1687
1713
  render() {
1688
- 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" }))))));
1714
+ 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" }), h("div", { id: "sleeve_3", class: "sleeve sleeve-delayed-copy" }), h("div", { id: "sleeve_4", class: "sleeve sleeve-delayed-copy" }))))));
1689
1715
  }
1690
1716
  get host() { return getElement(this); }
1691
1717
  };
1692
1718
  BiggiveTotalizer.style = biggiveTotalizerCss;
1693
1719
 
1694
- const biggiveTotalizerTickerItemCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}:host{display:contents}.ticker-item{margin-right:20px}";
1720
+ const biggiveTotalizerTickerItemCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}:host{display:contents}.ticker-item{margin-right:30px}";
1695
1721
 
1696
1722
  const BiggiveTotalizerTickerItem = class {
1697
1723
  constructor(hostRef) {
package/dist/types/components/biggive-main-menu/biggive-main-menu.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  export declare class BiggiveMainMenu {
2
+ private lastOffsetHeight;
2
3
  host: HTMLBiggiveMainMenuElement;
3
4
  blogUrlPrefix: string;
4
5
  /**
package/dist/types/components/biggive-totalizer/biggive-totalizer.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  export declare class BiggiveTotalizer {
2
+ private lastWrapperWidth;
2
3
  host: HTMLBiggiveTotalizerElement;
3
4
  /**
4
5
  * Space below component
@@ -25,6 +26,6 @@ export declare class BiggiveTotalizer {
25
26
  */
26
27
  mainMessage: string;
27
28
  private setSpeed;
28
- componentDidRender(): void;
29
+ componentDidLoad(): void;
29
30
  render(): any;
30
31
  }
package/hydrate/index.js CHANGED
@@ -8005,6 +8005,7 @@ const biggiveMainMenuCss = "/*!@a*/a.sc-biggive-main-menu{color:inherit;text-dec
8005
8005
  class BiggiveMainMenu {
8006
8006
  constructor(hostRef) {
8007
8007
  registerInstance(this, hostRef);
8008
+ this.lastOffsetHeight = 0;
8008
8009
  this.openMobileMenu = () => {
8009
8010
  const mobileMenu = this.host.shadowRoot.querySelector('.nav-links');
8010
8011
  mobileMenu.style.left = '0';
@@ -8026,6 +8027,12 @@ class BiggiveMainMenu {
8026
8027
  event.preventDefault();
8027
8028
  }
8028
8029
  setHeaderSize() {
8030
+ if (this.host.offsetHeight === this.lastOffsetHeight) {
8031
+ // Some browsers fire 'resize' overzealously on scroll; we don't want to cause extra paints if nothing
8032
+ // relevant changed.
8033
+ return;
8034
+ }
8035
+ this.lastOffsetHeight = this.host.offsetHeight;
8029
8036
  // Some resize edge cases lead Firefox, and maybe others, to go haywire and get a host offset
8030
8037
  // height of millions of pixels, presumably due to a layout logic loop. So for as long as we use
8031
8038
  // this body padding workaround, we need a safe maximum value, currently 130px, beyond which
@@ -8884,11 +8891,12 @@ class BiggiveTimelineEntry {
8884
8891
  }; }
8885
8892
  }
8886
8893
 
8887
- 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-cc-red:hover,\n.background-colour-brand-cc-red*/.background-colour-hover-brand-cc-red.sc-biggive-totalizer:hover,.background-colour-brand-cc-red.sc-biggive-totalizer{background-color:#B30510}/*!@.background-colour-hover-brand-wgmf-purple:hover,\n.background-colour-brand-wgmf-purple*/.background-colour-hover-brand-wgmf-purple.sc-biggive-totalizer:hover,.background-colour-brand-wgmf-purple.sc-biggive-totalizer{background-color:#6E0887}/*!@.background-colour-hover-brand-gmf-green:hover,\n.background-colour-brand-gmf-green*/.background-colour-hover-brand-gmf-green.sc-biggive-totalizer:hover,.background-colour-brand-gmf-green.sc-biggive-totalizer{background-color:#50B400}/*!@.background-colour-hover-brand-emf-yellow:hover,\n.background-colour-brand-emf-yellow*/.background-colour-hover-brand-emf-yellow.sc-biggive-totalizer:hover,.background-colour-brand-emf-yellow.sc-biggive-totalizer{background-color:#FFE500}/*!@.background-colour-hover-brand-c4c-orange:hover,\n.background-colour-brand-c4c-orange*/.background-colour-hover-brand-c4c-orange.sc-biggive-totalizer:hover,.background-colour-brand-c4c-orange.sc-biggive-totalizer{background-color:#F07D00}/*!@.background-colour-hover-brand-afa-pink:hover,\n.background-colour-brand-afa-pink*/.background-colour-hover-brand-afa-pink.sc-biggive-totalizer:hover,.background-colour-brand-afa-pink.sc-biggive-totalizer{background-color:#BF387D}/*!@.background-colour-hover-brand-mhf-turquoise:hover,\n.background-colour-brand-mhf-turquoise*/.background-colour-hover-brand-mhf-turquoise.sc-biggive-totalizer:hover,.background-colour-brand-mhf-turquoise.sc-biggive-totalizer{background-color:#62CFC9}/*!@.background-colour-hover-brand-grey:hover,\n.background-colour-brand-grey*/.background-colour-hover-brand-grey.sc-biggive-totalizer:hover,.background-colour-brand-grey.sc-biggive-totalizer{background-color:#CBC8C8}/*!@.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-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}/*!@.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}/*!@.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-cc-red:hover,\n.text-colour-brand-cc-red*/.text-colour-hover-brand-cc-red.sc-biggive-totalizer:hover,.text-colour-brand-cc-red.sc-biggive-totalizer{color:#B30510}/*!@.text-colour-hover-brand-wgmf-purple:hover,\n.text-colour-brand-wgmf-purple*/.text-colour-hover-brand-wgmf-purple.sc-biggive-totalizer:hover,.text-colour-brand-wgmf-purple.sc-biggive-totalizer{color:#6E0887}/*!@.text-colour-hover-brand-gmf-green:hover,\n.text-colour-brand-gmf-green*/.text-colour-hover-brand-gmf-green.sc-biggive-totalizer:hover,.text-colour-brand-gmf-green.sc-biggive-totalizer{color:#50B400}/*!@.text-colour-hover-brand-emf-yellow:hover,\n.text-colour-brand-emf-yellow*/.text-colour-hover-brand-emf-yellow.sc-biggive-totalizer:hover,.text-colour-brand-emf-yellow.sc-biggive-totalizer{color:#FFE500}/*!@.text-colour-hover-brand-c4c-orange:hover,\n.text-colour-brand-c4c-orange*/.text-colour-hover-brand-c4c-orange.sc-biggive-totalizer:hover,.text-colour-brand-c4c-orange.sc-biggive-totalizer{color:#F07D00}/*!@.text-colour-hover-brand-afa-pink:hover,\n.text-colour-brand-afa-pink*/.text-colour-hover-brand-afa-pink.sc-biggive-totalizer:hover,.text-colour-brand-afa-pink.sc-biggive-totalizer{color:#BF387D}/*!@.text-colour-hover-brand-mhf-turquoise:hover,\n.text-colour-brand-mhf-turquoise*/.text-colour-hover-brand-mhf-turquoise.sc-biggive-totalizer:hover,.text-colour-brand-mhf-turquoise.sc-biggive-totalizer{color:#62CFC9}/*!@.text-colour-hover-brand-grey:hover,\n.text-colour-brand-grey*/.text-colour-hover-brand-grey.sc-biggive-totalizer:hover,.text-colour-brand-grey.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}/*!@.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}/*!@: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}}";
8894
+ 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-cc-red:hover,\n.background-colour-brand-cc-red*/.background-colour-hover-brand-cc-red.sc-biggive-totalizer:hover,.background-colour-brand-cc-red.sc-biggive-totalizer{background-color:#B30510}/*!@.background-colour-hover-brand-wgmf-purple:hover,\n.background-colour-brand-wgmf-purple*/.background-colour-hover-brand-wgmf-purple.sc-biggive-totalizer:hover,.background-colour-brand-wgmf-purple.sc-biggive-totalizer{background-color:#6E0887}/*!@.background-colour-hover-brand-gmf-green:hover,\n.background-colour-brand-gmf-green*/.background-colour-hover-brand-gmf-green.sc-biggive-totalizer:hover,.background-colour-brand-gmf-green.sc-biggive-totalizer{background-color:#50B400}/*!@.background-colour-hover-brand-emf-yellow:hover,\n.background-colour-brand-emf-yellow*/.background-colour-hover-brand-emf-yellow.sc-biggive-totalizer:hover,.background-colour-brand-emf-yellow.sc-biggive-totalizer{background-color:#FFE500}/*!@.background-colour-hover-brand-c4c-orange:hover,\n.background-colour-brand-c4c-orange*/.background-colour-hover-brand-c4c-orange.sc-biggive-totalizer:hover,.background-colour-brand-c4c-orange.sc-biggive-totalizer{background-color:#F07D00}/*!@.background-colour-hover-brand-afa-pink:hover,\n.background-colour-brand-afa-pink*/.background-colour-hover-brand-afa-pink.sc-biggive-totalizer:hover,.background-colour-brand-afa-pink.sc-biggive-totalizer{background-color:#BF387D}/*!@.background-colour-hover-brand-mhf-turquoise:hover,\n.background-colour-brand-mhf-turquoise*/.background-colour-hover-brand-mhf-turquoise.sc-biggive-totalizer:hover,.background-colour-brand-mhf-turquoise.sc-biggive-totalizer{background-color:#62CFC9}/*!@.background-colour-hover-brand-grey:hover,\n.background-colour-brand-grey*/.background-colour-hover-brand-grey.sc-biggive-totalizer:hover,.background-colour-brand-grey.sc-biggive-totalizer{background-color:#CBC8C8}/*!@.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-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}/*!@.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}/*!@.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-cc-red:hover,\n.text-colour-brand-cc-red*/.text-colour-hover-brand-cc-red.sc-biggive-totalizer:hover,.text-colour-brand-cc-red.sc-biggive-totalizer{color:#B30510}/*!@.text-colour-hover-brand-wgmf-purple:hover,\n.text-colour-brand-wgmf-purple*/.text-colour-hover-brand-wgmf-purple.sc-biggive-totalizer:hover,.text-colour-brand-wgmf-purple.sc-biggive-totalizer{color:#6E0887}/*!@.text-colour-hover-brand-gmf-green:hover,\n.text-colour-brand-gmf-green*/.text-colour-hover-brand-gmf-green.sc-biggive-totalizer:hover,.text-colour-brand-gmf-green.sc-biggive-totalizer{color:#50B400}/*!@.text-colour-hover-brand-emf-yellow:hover,\n.text-colour-brand-emf-yellow*/.text-colour-hover-brand-emf-yellow.sc-biggive-totalizer:hover,.text-colour-brand-emf-yellow.sc-biggive-totalizer{color:#FFE500}/*!@.text-colour-hover-brand-c4c-orange:hover,\n.text-colour-brand-c4c-orange*/.text-colour-hover-brand-c4c-orange.sc-biggive-totalizer:hover,.text-colour-brand-c4c-orange.sc-biggive-totalizer{color:#F07D00}/*!@.text-colour-hover-brand-afa-pink:hover,\n.text-colour-brand-afa-pink*/.text-colour-hover-brand-afa-pink.sc-biggive-totalizer:hover,.text-colour-brand-afa-pink.sc-biggive-totalizer{color:#BF387D}/*!@.text-colour-hover-brand-mhf-turquoise:hover,\n.text-colour-brand-mhf-turquoise*/.text-colour-hover-brand-mhf-turquoise.sc-biggive-totalizer:hover,.text-colour-brand-mhf-turquoise.sc-biggive-totalizer{color:#62CFC9}/*!@.text-colour-hover-brand-grey:hover,\n.text-colour-brand-grey*/.text-colour-hover-brand-grey.sc-biggive-totalizer:hover,.text-colour-brand-grey.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}/*!@.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}/*!@:host*/.sc-biggive-totalizer-h{display:contents;font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;--ticker-end-left:-100%}@keyframes ticker{0%{transform:translate3d(0, 0, 0)}100%{transform:translate3d(var(--ticker-end-left), 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{font-size:17px;line-height:24px;padding:6px 30px 10px 0;min-height:17px;overflow:hidden;position:relative}/*!@.container .ticker-wrap .sleeve*/.container.sc-biggive-totalizer .ticker-wrap.sc-biggive-totalizer .sleeve.sc-biggive-totalizer{will-change:transform;position:absolute;display:flex;min-width:100%;left:100%;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 !important}}/*!@.container .ticker-wrap .sleeve ::slotted([slot=ticker-items])*/.container .ticker-wrap .sleeve .sc-biggive-totalizer-s>[slot=ticker-items]{display:inline-flex;white-space:nowrap;max-height:24px}/*!@.container .ticker-wrap .sleeve-delayed-copy*/.container.sc-biggive-totalizer .ticker-wrap.sc-biggive-totalizer .sleeve-delayed-copy.sc-biggive-totalizer{display:none;white-space:nowrap;max-height:24px}@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}}";
8888
8895
 
8889
8896
  class BiggiveTotalizer {
8890
8897
  constructor(hostRef) {
8891
8898
  registerInstance(this, hostRef);
8899
+ this.lastWrapperWidth = 0;
8892
8900
  this.spaceBelow = 0;
8893
8901
  this.primaryColour = 'primary';
8894
8902
  this.primaryTextColour = 'white';
@@ -8896,58 +8904,76 @@ class BiggiveTotalizer {
8896
8904
  this.secondaryTextColour = 'black';
8897
8905
  this.mainMessage = undefined;
8898
8906
  }
8899
- setSpeed(itemsWidth) {
8900
- var _a, _b;
8901
- const sleeve1 = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.ticker-wrap #sleeve_1');
8902
- const sleeve2 = (_b = this.host.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.ticker-wrap #sleeve_2');
8903
- if (!sleeve1 || !sleeve2) {
8904
- console.log('sleeve1 or sleeve2 is missing, skipping setSpeed()');
8907
+ setSpeed(itemsWidth, containerWidth) {
8908
+ var _a;
8909
+ console.log('setSpeed() called with itemsWidth=' + itemsWidth + ', containerWidth=' + containerWidth);
8910
+ if (containerWidth === this.lastWrapperWidth) {
8911
+ // Some browsers fire 'resize' overzealously on scroll; we don't want to cause extra paints if nothing
8912
+ // relevant changed.
8905
8913
  return;
8906
8914
  }
8907
- // Restart the animation(s) on window resize to reduce the chance of jankiness.
8908
- // https://stackoverflow.com/a/45036752/2803757
8909
- sleeve1.style.animationName = 'none';
8910
- sleeve2.style.animationName = 'none';
8911
- const duration = sleeve1.clientWidth / 50;
8912
- sleeve1.style.animationDuration = Math.round(duration) + 's';
8913
- sleeve1.style.animationName = 'ticker';
8914
- // For now, only show the 2nd copy if there's space for it to not overlap. This means
8915
- // a bumpier loop on mobile, but we'd need a tweaked approach to wrap around cleanly
8916
- // where the item lists doesn't fit on the screen twice. The 1.5 ratio is a trial and
8917
- // error number which seems OK for now. It leaves a bit of a gap before items cycle
8918
- // back in at tablet sizes but is an improvement on what we had before at all breakpoints
8919
- // tested.
8920
- if (itemsWidth * 1.5 < sleeve1.clientWidth) {
8921
- sleeve2.style.animationDuration = Math.round(duration) + 's';
8922
- sleeve2.style.animationDelay = Math.round(duration / 2) + 's';
8923
- sleeve2.style.animationName = 'ticker';
8915
+ let sleeves = [];
8916
+ for (const ii in [1, 2, 3, 4]) {
8917
+ const sleeve = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.ticker-wrap #sleeve_' + ii);
8918
+ if (sleeve) {
8919
+ sleeves.push(sleeve);
8920
+ // Restart the animation(s) on window resize to reduce the chance of jankiness.
8921
+ // https://stackoverflow.com/a/45036752/2803757
8922
+ sleeve.style.animationName = 'none';
8923
+ }
8924
+ }
8925
+ this.lastWrapperWidth = containerWidth;
8926
+ if (sleeves.length === 0) {
8927
+ console.log('sleeves missing, skipping setSpeed()');
8928
+ return;
8929
+ }
8930
+ // We've seen the initial calculation exclude the ~30px per set of values end padding before,
8931
+ // and it's safe to err on the side of more copies to reduce the chance of abrupt early loop
8932
+ // ends, so we add a buffer of 40px to the calculation when deciding how many copies to use.
8933
+ const sleeveCount = Math.max(1, Math.min(4, Math.ceil((2 * (40 + itemsWidth)) / containerWidth)));
8934
+ this.host.style.setProperty('--ticker-end-left', `-${sleeveCount * 100}%`);
8935
+ const duration = Math.round((itemsWidth / 100) * sleeveCount);
8936
+ for (let ii = 1; ii <= sleeveCount; ii++) {
8937
+ const sleeve = sleeves[ii - 1];
8938
+ if (sleeve) {
8939
+ sleeve.style.animationDuration = duration + 's';
8940
+ // https://stackoverflow.com/a/45847760
8941
+ sleeve.style.animationDelay = (duration * (ii - 1)) / sleeveCount + 's';
8942
+ sleeve.style.display = 'inline-flex';
8943
+ sleeve.style.animationName = 'ticker';
8944
+ }
8924
8945
  }
8925
8946
  }
8926
- componentDidRender() {
8927
- var _a, _b;
8947
+ componentDidLoad() {
8948
+ var _a, _b, _c, _d, _e;
8949
+ const wrapper = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.ticker-wrap');
8928
8950
  const tickerItemsInternalWrapper = this.host.querySelector(`[slot="ticker-items"]`);
8929
- const sleeve1 = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.ticker-wrap #sleeve_1');
8930
- const sleeve2 = (_b = this.host.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.ticker-wrap #sleeve_2');
8931
- if (!tickerItemsInternalWrapper || !sleeve1 || !sleeve2) {
8932
- console.log('tickerItemsInternalWrapper, sleeve1 or sleeve2 is missing, skipping totalizer animation setup');
8951
+ const sleeve1 = (_b = this.host.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.ticker-wrap #sleeve_1');
8952
+ const sleeve2 = (_c = this.host.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('.ticker-wrap #sleeve_2');
8953
+ const sleeve3 = (_d = this.host.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('.ticker-wrap #sleeve_3');
8954
+ const sleeve4 = (_e = this.host.shadowRoot) === null || _e === void 0 ? void 0 : _e.querySelector('.ticker-wrap #sleeve_4');
8955
+ if (!tickerItemsInternalWrapper || !sleeve1) {
8956
+ console.log('tickerItemsInternalWrapper or sleeve1 is missing, skipping totalizer animation setup');
8933
8957
  return;
8934
8958
  }
8935
8959
  // Clone all children of the ticker items internal wrapper and append them, so the ticker can show items without
8936
- // a blank break. Sleeve 2 will animate on a delay per https://stackoverflow.com/a/45847760.
8960
+ // a blank break. Sleeve 2 and up will animate on delays per https://stackoverflow.com/a/45847760.
8937
8961
  tickerItemsInternalWrapper.childNodes.forEach((child) => {
8938
- sleeve2.appendChild(child.cloneNode(true)); // Deep clone all items.
8962
+ sleeve2 && sleeve2.appendChild(child.cloneNode(true)); // Deep clone all items.
8963
+ sleeve3 && sleeve3.appendChild(child.cloneNode(true));
8964
+ sleeve4 && sleeve4.appendChild(child.cloneNode(true));
8939
8965
  });
8940
- if (tickerItemsInternalWrapper !== null && tickerItemsInternalWrapper !== undefined) {
8941
- tickerItemsInternalWrapper.style.display = 'inline-flex';
8942
- tickerItemsInternalWrapper.style.flex = 'none';
8943
- }
8944
- this.setSpeed(tickerItemsInternalWrapper.clientWidth);
8966
+ setTimeout(() => {
8967
+ // In Angular contexts, it seems like we need to leave little time before the calculations work.
8968
+ // Not totally clear why yet.
8969
+ this.setSpeed(tickerItemsInternalWrapper.clientWidth, wrapper.clientWidth);
8970
+ }, 300);
8945
8971
  window.addEventListener('resize', () => {
8946
- this.setSpeed(tickerItemsInternalWrapper.clientWidth);
8972
+ this.setSpeed(tickerItemsInternalWrapper.clientWidth, wrapper.clientWidth);
8947
8973
  });
8948
8974
  }
8949
8975
  render() {
8950
- 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" }))))));
8976
+ 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" }), hAsync("div", { id: "sleeve_3", class: "sleeve sleeve-delayed-copy" }), hAsync("div", { id: "sleeve_4", class: "sleeve sleeve-delayed-copy" }))))));
8951
8977
  }
8952
8978
  get host() { return getElement(this); }
8953
8979
  static get style() { return biggiveTotalizerCss; }
@@ -8968,7 +8994,7 @@ class BiggiveTotalizer {
8968
8994
  }; }
8969
8995
  }
8970
8996
 
8971
- const biggiveTotalizerTickerItemCss = "/*!@a*/a.sc-biggive-totalizer-ticker-item{color:inherit;text-decoration:underline}/*!@a:hover*/a.sc-biggive-totalizer-ticker-item:hover{text-decoration:none}/*!@:host*/.sc-biggive-totalizer-ticker-item-h{display:contents}/*!@.ticker-item*/.ticker-item.sc-biggive-totalizer-ticker-item{margin-right:20px}";
8997
+ const biggiveTotalizerTickerItemCss = "/*!@a*/a.sc-biggive-totalizer-ticker-item{color:inherit;text-decoration:underline}/*!@a:hover*/a.sc-biggive-totalizer-ticker-item:hover{text-decoration:none}/*!@:host*/.sc-biggive-totalizer-ticker-item-h{display:contents}/*!@.ticker-item*/.ticker-item.sc-biggive-totalizer-ticker-item{margin-right:30px}";
8972
8998
 
8973
8999
  class BiggiveTotalizerTickerItem {
8974
9000
  constructor(hostRef) {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@biggive/components",
3
3
  "_comment": "Version number below is automatically replaced during CircleCI build.",
4
- "version": "202311241148.0.0",
4
+ "version": "202312041141.0.0",
5
5
  "description": "Big Give Components",
6
6
  "main": "dist/index.cjs.js",
7
7
  "module": "dist/index.js",