@biggive/components 202304251558.0.0 → 202304281233.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/biggive/biggive.esm.js +1 -1
  2. package/dist/biggive/{p-6b33763e.entry.js → p-35625fdd.entry.js} +1 -1
  3. package/dist/cjs/biggive-accordion_43.cjs.entry.js +45 -9
  4. package/dist/collection/components/biggive-totalizer/biggive-totalizer.css +10 -2
  5. package/dist/collection/components/biggive-totalizer/biggive-totalizer.js +45 -8
  6. package/dist/components/biggive-totalizer.js +45 -9
  7. package/dist/esm/biggive-accordion_43.entry.js +45 -9
  8. package/dist/types/components/biggive-totalizer/biggive-totalizer.d.ts +1 -0
  9. package/hydrate/index.js +45 -9
  10. package/package.json +1 -1
package/dist/cjs/biggive-accordion_43.cjs.entry.js CHANGED
@@ -1684,7 +1684,7 @@ const BiggiveTippingSlider = class {
1684
1684
  };
1685
1685
  BiggiveTippingSlider.style = biggiveTippingSliderCss;
1686
1686
 
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}}";
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(-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
1688
 
1689
1689
  const BiggiveTotalizer = class {
1690
1690
  constructor(hostRef) {
@@ -1696,22 +1696,58 @@ const BiggiveTotalizer = class {
1696
1696
  this.secondaryTextColour = 'black';
1697
1697
  this.mainMessage = undefined;
1698
1698
  }
1699
+ setSpeed(itemsWidth) {
1700
+ var _a, _b;
1701
+ const sleeve1 = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.ticker-wrap #sleeve_1');
1702
+ const sleeve2 = (_b = this.host.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.ticker-wrap #sleeve_2');
1703
+ if (!sleeve1 || !sleeve2) {
1704
+ console.log('sleeve1 or sleeve2 is missing, skipping setSpeed()');
1705
+ return;
1706
+ }
1707
+ // Restart the animation(s) on window resize to reduce the chance of jankiness.
1708
+ // https://stackoverflow.com/a/45036752/2803757
1709
+ sleeve1.style.animationName = 'none';
1710
+ sleeve2.style.animationName = 'none';
1711
+ const duration = sleeve1.clientWidth / 50;
1712
+ sleeve1.style.animationDuration = Math.round(duration) + 's';
1713
+ sleeve1.style.animationName = 'ticker';
1714
+ // For now, only show the 2nd copy if there's space for it to not overlap. This means
1715
+ // a bumpier loop on mobile, but we'd need a tweaked approach to wrap around cleanly
1716
+ // where the item lists doesn't fit on the screen twice. The 1.5 ratio is a trial and
1717
+ // error number which seems OK for now. It leaves a bit of a gap before items cycle
1718
+ // back in at tablet sizes but is an improvement on what we had before at all breakpoints
1719
+ // tested.
1720
+ if (itemsWidth * 1.5 < sleeve1.clientWidth) {
1721
+ sleeve2.style.animationDuration = Math.round(duration) + 's';
1722
+ sleeve2.style.animationDelay = Math.round(duration / 2) + 's';
1723
+ sleeve2.style.animationName = 'ticker';
1724
+ }
1725
+ }
1699
1726
  componentDidRender() {
1700
- // @ts-ignore
1727
+ var _a, _b;
1701
1728
  const tickerItemsInternalWrapper = this.host.querySelector(`[slot="ticker-items"]`);
1729
+ const sleeve1 = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.ticker-wrap #sleeve_1');
1730
+ const sleeve2 = (_b = this.host.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.ticker-wrap #sleeve_2');
1731
+ if (!tickerItemsInternalWrapper || !sleeve1 || !sleeve2) {
1732
+ console.log('tickerItemsInternalWrapper, sleeve1 or sleeve2 is missing, skipping totalizer animation setup');
1733
+ return;
1734
+ }
1735
+ // Clone all children of the ticker items internal wrapper and append them, so the ticker can show items without
1736
+ // a blank break. Sleeve 2 will animate on a delay per https://stackoverflow.com/a/45847760.
1737
+ tickerItemsInternalWrapper.childNodes.forEach((child) => {
1738
+ sleeve2.appendChild(child.cloneNode(true)); // Deep clone all items.
1739
+ });
1702
1740
  if (tickerItemsInternalWrapper !== null && tickerItemsInternalWrapper !== undefined) {
1703
1741
  tickerItemsInternalWrapper.style.display = 'inline-flex';
1704
1742
  tickerItemsInternalWrapper.style.flex = 'none';
1705
1743
  }
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';
1744
+ this.setSpeed(tickerItemsInternalWrapper.clientWidth);
1745
+ window.addEventListener('resize', () => {
1746
+ this.setSpeed(tickerItemsInternalWrapper.clientWidth);
1747
+ });
1712
1748
  }
1713
1749
  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" })))))));
1750
+ 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
1751
  }
1716
1752
  get host() { return index.getElement(this); }
1717
1753
  };
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-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
@@ -1680,7 +1680,7 @@ const BiggiveTippingSlider = class {
1680
1680
  };
1681
1681
  BiggiveTippingSlider.style = biggiveTippingSliderCss;
1682
1682
 
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}}";
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(-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
1684
 
1685
1685
  const BiggiveTotalizer = class {
1686
1686
  constructor(hostRef) {
@@ -1692,22 +1692,58 @@ const BiggiveTotalizer = class {
1692
1692
  this.secondaryTextColour = 'black';
1693
1693
  this.mainMessage = undefined;
1694
1694
  }
1695
+ setSpeed(itemsWidth) {
1696
+ var _a, _b;
1697
+ const sleeve1 = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.ticker-wrap #sleeve_1');
1698
+ const sleeve2 = (_b = this.host.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.ticker-wrap #sleeve_2');
1699
+ if (!sleeve1 || !sleeve2) {
1700
+ console.log('sleeve1 or sleeve2 is missing, skipping setSpeed()');
1701
+ return;
1702
+ }
1703
+ // Restart the animation(s) on window resize to reduce the chance of jankiness.
1704
+ // https://stackoverflow.com/a/45036752/2803757
1705
+ sleeve1.style.animationName = 'none';
1706
+ sleeve2.style.animationName = 'none';
1707
+ const duration = sleeve1.clientWidth / 50;
1708
+ sleeve1.style.animationDuration = Math.round(duration) + 's';
1709
+ sleeve1.style.animationName = 'ticker';
1710
+ // For now, only show the 2nd copy if there's space for it to not overlap. This means
1711
+ // a bumpier loop on mobile, but we'd need a tweaked approach to wrap around cleanly
1712
+ // where the item lists doesn't fit on the screen twice. The 1.5 ratio is a trial and
1713
+ // error number which seems OK for now. It leaves a bit of a gap before items cycle
1714
+ // back in at tablet sizes but is an improvement on what we had before at all breakpoints
1715
+ // tested.
1716
+ if (itemsWidth * 1.5 < sleeve1.clientWidth) {
1717
+ sleeve2.style.animationDuration = Math.round(duration) + 's';
1718
+ sleeve2.style.animationDelay = Math.round(duration / 2) + 's';
1719
+ sleeve2.style.animationName = 'ticker';
1720
+ }
1721
+ }
1695
1722
  componentDidRender() {
1696
- // @ts-ignore
1723
+ var _a, _b;
1697
1724
  const tickerItemsInternalWrapper = this.host.querySelector(`[slot="ticker-items"]`);
1725
+ const sleeve1 = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.ticker-wrap #sleeve_1');
1726
+ const sleeve2 = (_b = this.host.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.ticker-wrap #sleeve_2');
1727
+ if (!tickerItemsInternalWrapper || !sleeve1 || !sleeve2) {
1728
+ console.log('tickerItemsInternalWrapper, sleeve1 or sleeve2 is missing, skipping totalizer animation setup');
1729
+ return;
1730
+ }
1731
+ // Clone all children of the ticker items internal wrapper and append them, so the ticker can show items without
1732
+ // a blank break. Sleeve 2 will animate on a delay per https://stackoverflow.com/a/45847760.
1733
+ tickerItemsInternalWrapper.childNodes.forEach((child) => {
1734
+ sleeve2.appendChild(child.cloneNode(true)); // Deep clone all items.
1735
+ });
1698
1736
  if (tickerItemsInternalWrapper !== null && tickerItemsInternalWrapper !== undefined) {
1699
1737
  tickerItemsInternalWrapper.style.display = 'inline-flex';
1700
1738
  tickerItemsInternalWrapper.style.flex = 'none';
1701
1739
  }
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';
1740
+ this.setSpeed(tickerItemsInternalWrapper.clientWidth);
1741
+ window.addEventListener('resize', () => {
1742
+ this.setSpeed(tickerItemsInternalWrapper.clientWidth);
1743
+ });
1708
1744
  }
1709
1745
  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" })))))));
1746
+ 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
1747
  }
1712
1748
  get host() { return getElement(this); }
1713
1749
  };
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/hydrate/index.js CHANGED
@@ -8861,7 +8861,7 @@ class BiggiveTippingSlider {
8861
8861
  }; }
8862
8862
  }
8863
8863
 
8864
- 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}}";
8864
+ 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}}";
8865
8865
 
8866
8866
  class BiggiveTotalizer {
8867
8867
  constructor(hostRef) {
@@ -8873,22 +8873,58 @@ class BiggiveTotalizer {
8873
8873
  this.secondaryTextColour = 'black';
8874
8874
  this.mainMessage = undefined;
8875
8875
  }
8876
+ setSpeed(itemsWidth) {
8877
+ var _a, _b;
8878
+ const sleeve1 = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.ticker-wrap #sleeve_1');
8879
+ const sleeve2 = (_b = this.host.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.ticker-wrap #sleeve_2');
8880
+ if (!sleeve1 || !sleeve2) {
8881
+ console.log('sleeve1 or sleeve2 is missing, skipping setSpeed()');
8882
+ return;
8883
+ }
8884
+ // Restart the animation(s) on window resize to reduce the chance of jankiness.
8885
+ // https://stackoverflow.com/a/45036752/2803757
8886
+ sleeve1.style.animationName = 'none';
8887
+ sleeve2.style.animationName = 'none';
8888
+ const duration = sleeve1.clientWidth / 50;
8889
+ sleeve1.style.animationDuration = Math.round(duration) + 's';
8890
+ sleeve1.style.animationName = 'ticker';
8891
+ // For now, only show the 2nd copy if there's space for it to not overlap. This means
8892
+ // a bumpier loop on mobile, but we'd need a tweaked approach to wrap around cleanly
8893
+ // where the item lists doesn't fit on the screen twice. The 1.5 ratio is a trial and
8894
+ // error number which seems OK for now. It leaves a bit of a gap before items cycle
8895
+ // back in at tablet sizes but is an improvement on what we had before at all breakpoints
8896
+ // tested.
8897
+ if (itemsWidth * 1.5 < sleeve1.clientWidth) {
8898
+ sleeve2.style.animationDuration = Math.round(duration) + 's';
8899
+ sleeve2.style.animationDelay = Math.round(duration / 2) + 's';
8900
+ sleeve2.style.animationName = 'ticker';
8901
+ }
8902
+ }
8876
8903
  componentDidRender() {
8877
- // @ts-ignore
8904
+ var _a, _b;
8878
8905
  const tickerItemsInternalWrapper = this.host.querySelector(`[slot="ticker-items"]`);
8906
+ const sleeve1 = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.ticker-wrap #sleeve_1');
8907
+ const sleeve2 = (_b = this.host.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.ticker-wrap #sleeve_2');
8908
+ if (!tickerItemsInternalWrapper || !sleeve1 || !sleeve2) {
8909
+ console.log('tickerItemsInternalWrapper, sleeve1 or sleeve2 is missing, skipping totalizer animation setup');
8910
+ return;
8911
+ }
8912
+ // Clone all children of the ticker items internal wrapper and append them, so the ticker can show items without
8913
+ // a blank break. Sleeve 2 will animate on a delay per https://stackoverflow.com/a/45847760.
8914
+ tickerItemsInternalWrapper.childNodes.forEach((child) => {
8915
+ sleeve2.appendChild(child.cloneNode(true)); // Deep clone all items.
8916
+ });
8879
8917
  if (tickerItemsInternalWrapper !== null && tickerItemsInternalWrapper !== undefined) {
8880
8918
  tickerItemsInternalWrapper.style.display = 'inline-flex';
8881
8919
  tickerItemsInternalWrapper.style.flex = 'none';
8882
8920
  }
8883
- // @ts-ignore
8884
- const tickerWidth = this.host.shadowRoot.querySelector('.ticker-wrap .sleeve').clientWidth;
8885
- const duration = tickerWidth / 50;
8886
- // @ts-ignore
8887
- const sleeve = this.host.shadowRoot.querySelector('.ticker-wrap .sleeve');
8888
- sleeve.style.animationDuration = Math.round(duration) + 's';
8921
+ this.setSpeed(tickerItemsInternalWrapper.clientWidth);
8922
+ window.addEventListener('resize', () => {
8923
+ this.setSpeed(tickerItemsInternalWrapper.clientWidth);
8924
+ });
8889
8925
  }
8890
8926
  render() {
8891
- 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" })))))));
8927
+ 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" }))))));
8892
8928
  }
8893
8929
  get host() { return getElement(this); }
8894
8930
  static get style() { return biggiveTotalizerCss; }
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": "202304251558.0.0",
4
+ "version": "202304281233.0.0",
5
5
  "description": "Big Give Components",
6
6
  "main": "dist/index.cjs.js",
7
7
  "module": "dist/index.js",