@biggive/components 202401021355.0.0 → 202401021511.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.
- package/dist/biggive/biggive.esm.js +1 -1
- package/dist/biggive/{p-dbb99ab7.entry.js → p-7f021540.entry.js} +2 -2
- package/dist/biggive/p-7f021540.entry.js.map +1 -0
- package/dist/cjs/biggive-accordion_42.cjs.entry.js +8 -4
- package/dist/cjs/biggive-accordion_42.cjs.entry.js.map +1 -1
- package/dist/collection/components/biggive-totalizer/biggive-totalizer.css +1 -1
- package/dist/collection/components/biggive-totalizer/biggive-totalizer.js +7 -3
- package/dist/collection/components/biggive-totalizer/biggive-totalizer.js.map +1 -1
- package/dist/components/biggive-totalizer.js +8 -4
- package/dist/components/biggive-totalizer.js.map +1 -1
- package/dist/esm/biggive-accordion_42.entry.js +8 -4
- package/dist/esm/biggive-accordion_42.entry.js.map +1 -1
- package/hydrate/index.js +8 -4
- package/package.json +1 -1
- package/dist/biggive/p-dbb99ab7.entry.js.map +0 -1
|
@@ -35,9 +35,13 @@ export class BiggiveTotalizer {
|
|
|
35
35
|
// We've seen the initial calculation exclude the ~30px per set of values end padding before,
|
|
36
36
|
// and it's safe to err on the side of more copies to reduce the chance of abrupt early loop
|
|
37
37
|
// ends, so we add a buffer of 40px to the calculation when deciding how many copies to use.
|
|
38
|
-
const sleeveCount = Math.max(1, Math.min(4, Math.ceil((2 * (40 + itemsWidth)) / containerWidth)));
|
|
39
|
-
|
|
40
|
-
|
|
38
|
+
// const sleeveCount = Math.max(1, Math.min(4, Math.ceil((2 * (40 + itemsWidth)) / containerWidth)));
|
|
39
|
+
// TODO Ultimately we'd like to get multiple copies working, or simplify. This
|
|
40
|
+
// has proven very hard to iterate on pending a fix for DON-867 because
|
|
41
|
+
// there is Angular-specific behaviour breaking the contents of copies.
|
|
42
|
+
const sleeveCount = 1;
|
|
43
|
+
this.host.style.setProperty('--ticker-end-left', `-${(sleeveCount + 1) * 100}%`);
|
|
44
|
+
const duration = Math.round((itemsWidth / 50) * sleeveCount);
|
|
41
45
|
for (let ii = 1; ii <= sleeveCount; ii++) {
|
|
42
46
|
const sleeve = sleeves[ii - 1];
|
|
43
47
|
if (sleeve) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"biggive-totalizer.js","sourceRoot":"","sources":["../../../src/components/biggive-totalizer/biggive-totalizer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAO5D,MAAM,OAAO,gBAAgB;;QACnB,qBAAgB,GAAW,CAAC,CAAC;0BAMR,CAAC;6BAIE,SAAS;iCAKL,OAAO;+BAKT,WAAW;mCAKP,OAAO;;;IAOrC,QAAQ,CAAC,UAAkB,EAAE,cAAsB;;QACzD,OAAO,CAAC,GAAG,CAAC,oCAAoC,GAAG,UAAU,GAAG,mBAAmB,GAAG,cAAc,CAAC,CAAC;QAEtG,IAAI,cAAc,KAAK,IAAI,CAAC,gBAAgB,EAAE;YAC5C,sGAAsG;YACtG,oBAAoB;YACpB,OAAO;SACR;QAED,IAAI,OAAO,GAAqB,EAAE,CAAC;QACnC,KAAK,MAAM,EAAE,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE;YAC7B,MAAM,MAAM,GAAG,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAC,uBAAuB,GAAG,EAAE,CAA0B,CAAC;YAC1G,IAAI,MAAM,EAAE;gBACV,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;gBACrB,+EAA+E;gBAC/E,+CAA+C;gBAC/C,MAAM,CAAC,KAAK,CAAC,aAAa,GAAG,MAAM,CAAC;aACrC;SACF;QAED,IAAI,CAAC,gBAAgB,GAAG,cAAc,CAAC;QAEvC,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE;YACxB,OAAO,CAAC,GAAG,CAAC,sCAAsC,CAAC,CAAC;YACpD,OAAO;SACR;QAED,6FAA6F;QAC7F,4FAA4F;QAC5F,4FAA4F;QAC5F,
|
|
1
|
+
{"version":3,"file":"biggive-totalizer.js","sourceRoot":"","sources":["../../../src/components/biggive-totalizer/biggive-totalizer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'biggive-totalizer',\n styleUrl: 'biggive-totalizer.scss',\n shadow: true,\n})\nexport class BiggiveTotalizer {\n private lastWrapperWidth: number = 0;\n\n @Element() host: HTMLBiggiveTotalizerElement;\n /**\n * Space below component\n */\n @Prop() spaceBelow: number = 0;\n /**\n * Primary banner colour\n */\n @Prop() primaryColour: string = 'primary';\n\n /**\n * Primary text colour\n */\n @Prop() primaryTextColour: string = 'white';\n\n /**\n * Secondary banner colour\n */\n @Prop() secondaryColour: string = 'secondary';\n\n /**\n * Secondary text colour\n */\n @Prop() secondaryTextColour: string = 'black';\n\n /**\n * Primary message\n */\n @Prop() mainMessage: string;\n\n private setSpeed(itemsWidth: number, containerWidth: number) {\n console.log('setSpeed() called with itemsWidth=' + itemsWidth + ', containerWidth=' + containerWidth);\n\n if (containerWidth === this.lastWrapperWidth) {\n // Some browsers fire 'resize' overzealously on scroll; we don't want to cause extra paints if nothing\n // relevant changed.\n return;\n }\n\n let sleeves: HTMLDivElement[] = [];\n for (const ii in [1, 2, 3, 4]) {\n const sleeve = this.host.shadowRoot?.querySelector('.ticker-wrap #sleeve_' + ii) as HTMLDivElement | null;\n if (sleeve) {\n sleeves.push(sleeve);\n // Restart the animation(s) on window resize to reduce the chance of jankiness.\n // https://stackoverflow.com/a/45036752/2803757\n sleeve.style.animationName = 'none';\n }\n }\n\n this.lastWrapperWidth = containerWidth;\n\n if (sleeves.length === 0) {\n console.log('sleeves missing, skipping setSpeed()');\n return;\n }\n\n // We've seen the initial calculation exclude the ~30px per set of values end padding before,\n // and it's safe to err on the side of more copies to reduce the chance of abrupt early loop\n // ends, so we add a buffer of 40px to the calculation when deciding how many copies to use.\n // const sleeveCount = Math.max(1, Math.min(4, Math.ceil((2 * (40 + itemsWidth)) / containerWidth)));\n // TODO Ultimately we'd like to get multiple copies working, or simplify. This\n // has proven very hard to iterate on pending a fix for DON-867 because\n // there is Angular-specific behaviour breaking the contents of copies.\n const sleeveCount = 1;\n this.host.style.setProperty('--ticker-end-left', `-${(sleeveCount + 1) * 100}%`);\n\n const duration = Math.round((itemsWidth / 50) * sleeveCount);\n\n for (let ii = 1; ii <= sleeveCount; ii++) {\n const sleeve = sleeves[ii - 1];\n if (sleeve) {\n sleeve.style.animationDuration = duration + 's';\n // https://stackoverflow.com/a/45847760\n sleeve.style.animationDelay = (duration / (sleeveCount - 1)) * (ii - 1) + 's';\n sleeve.style.display = 'inline-flex';\n sleeve.style.animationName = 'ticker';\n }\n }\n }\n\n componentDidLoad() {\n const wrapper = this.host.shadowRoot?.querySelector('.ticker-wrap') as HTMLDivElement;\n\n const tickerItemsInternalWrapper: HTMLDivElement | null = this.host.querySelector(`[slot=\"ticker-items\"]`);\n const sleeve1: HTMLDivElement | null | undefined = this.host.shadowRoot?.querySelector('.ticker-wrap #sleeve_1');\n const sleeve2: HTMLDivElement | null | undefined = this.host.shadowRoot?.querySelector('.ticker-wrap #sleeve_2');\n const sleeve3: HTMLDivElement | null | undefined = this.host.shadowRoot?.querySelector('.ticker-wrap #sleeve_3');\n const sleeve4: HTMLDivElement | null | undefined = this.host.shadowRoot?.querySelector('.ticker-wrap #sleeve_4');\n\n if (!tickerItemsInternalWrapper || !sleeve1) {\n console.log('tickerItemsInternalWrapper or sleeve1 is missing, skipping totalizer animation setup');\n return;\n }\n\n // Deep clone [all children of] the ticker items internal wrapper and append them, so the ticker can show items without\n // a blank break. Sleeve 2 and up will animate on delays per https://stackoverflow.com/a/45847760.\n setTimeout(() => {\n sleeve2 && sleeve2.appendChild(tickerItemsInternalWrapper.cloneNode(true));\n sleeve3 && sleeve3.appendChild(tickerItemsInternalWrapper.cloneNode(true));\n sleeve4 && sleeve4.appendChild(tickerItemsInternalWrapper.cloneNode(true));\n }, 800);\n\n setTimeout(() => {\n // In Angular contexts, it seems like we need to leave a little time before the calculations work.\n // Not totally clear why yet.\n this.setSpeed(tickerItemsInternalWrapper.clientWidth, wrapper.clientWidth);\n }, 300);\n\n window.addEventListener('resize', () => {\n this.setSpeed(tickerItemsInternalWrapper.clientWidth, wrapper.clientWidth);\n });\n }\n\n render() {\n return (\n <div class={'container space-below-' + this.spaceBelow}>\n <div>\n <div class=\"banner\">\n <div class={'main-message-wrap background-colour-' + this.secondaryColour + ' text-colour-' + this.secondaryTextColour}>{this.mainMessage}</div>\n <div class={'ticker-wrap background-colour-' + this.primaryColour + ' text-colour-' + this.primaryTextColour}>\n <div id=\"sleeve_1\" class=\"sleeve\">\n <slot name=\"ticker-items\"></slot>\n </div>\n <div id=\"sleeve_2\" class=\"sleeve sleeve-delayed-copy\">\n {/* Contents for these 3 are copied in TS and copies shown or hidden based on available space */}\n </div>\n <div id=\"sleeve_3\" class=\"sleeve sleeve-delayed-copy\"></div>\n <div id=\"sleeve_4\" class=\"sleeve sleeve-delayed-copy\"></div>\n </div>\n </div>\n </div>\n </div>\n );\n }\n}\n"]}
|
|
@@ -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-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:-
|
|
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-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:-200%}@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;display:inline-flex;position:absolute;top:4px;height:24px;min-width:100%;left:100%;white-space:nowrap;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-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}}";
|
|
4
4
|
|
|
5
5
|
const BiggiveTotalizer$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveTotalizer extends HTMLElement {
|
|
6
6
|
constructor() {
|
|
@@ -41,9 +41,13 @@ const BiggiveTotalizer$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveTotaliz
|
|
|
41
41
|
// We've seen the initial calculation exclude the ~30px per set of values end padding before,
|
|
42
42
|
// and it's safe to err on the side of more copies to reduce the chance of abrupt early loop
|
|
43
43
|
// ends, so we add a buffer of 40px to the calculation when deciding how many copies to use.
|
|
44
|
-
const sleeveCount = Math.max(1, Math.min(4, Math.ceil((2 * (40 + itemsWidth)) / containerWidth)));
|
|
45
|
-
|
|
46
|
-
|
|
44
|
+
// const sleeveCount = Math.max(1, Math.min(4, Math.ceil((2 * (40 + itemsWidth)) / containerWidth)));
|
|
45
|
+
// TODO Ultimately we'd like to get multiple copies working, or simplify. This
|
|
46
|
+
// has proven very hard to iterate on pending a fix for DON-867 because
|
|
47
|
+
// there is Angular-specific behaviour breaking the contents of copies.
|
|
48
|
+
const sleeveCount = 1;
|
|
49
|
+
this.host.style.setProperty('--ticker-end-left', `-${(sleeveCount + 1) * 100}%`);
|
|
50
|
+
const duration = Math.round((itemsWidth / 50) * sleeveCount);
|
|
47
51
|
for (let ii = 1; ii <= sleeveCount; ii++) {
|
|
48
52
|
const sleeve = sleeves[ii - 1];
|
|
49
53
|
if (sleeve) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"biggive-totalizer.js","mappings":"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","names":["BiggiveTotalizer"],"sources":["src/components/biggive-totalizer/biggive-totalizer.scss?tag=biggive-totalizer&encapsulation=shadow","src/components/biggive-totalizer/biggive-totalizer.tsx"],"sourcesContent":["@include backgrounds();\n@include spacers();\n@include text-colours();\n\n:host {\n display: contents;\n @include standard-font();\n\n --ticker-end-left: -100%;\n}\n\n@keyframes ticker {\n 0% {\n transform: translate3d(0, 0, 0);\n }\n\n 100% {\n transform: translate3d(var(--ticker-end-left), 0, 0);\n }\n}\n\n.container {\n position: absolute;\n left: 0;\n right: 0;\n z-index: 1;\n\n .main-message-wrap {\n position: absolute;\n z-index: 1;\n padding: $spacer-2 $spacer-4;\n left: 0;\n top: 0;\n @include font-size-large();\n font-weight: 600;\n max-width: 33.3%;\n }\n\n .ticker-wrap {\n @include font-size-medium();\n padding: calc($spacer-2 - 4px) $spacer-4 $spacer-2 0;\n min-height: 17px;\n overflow: hidden;\n position: relative;\n\n .sleeve {\n will-change: transform; // https://web.dev/stick-to-compositor-only-properties-and-manage-layer-count/\n display: inline-flex;\n position: absolute;\n top: 4px;\n height: 24px;\n min-width: 100%;\n left: 100%;\n white-space: nowrap;\n\n animation-iteration-count: infinite;\n animation-timing-function: linear;\n animation-name: ticker;\n // TS overrides the specific timings once the width of ticker elements is known.\n animation-duration: 10s;\n\n @media (prefers-reduced-motion) {\n animation-name: none !important; // Turn off movement when needed for a11y.\n }\n }\n\n .sleeve-delayed-copy {\n // We set between 0 and 3 copies to `display: inline-flex` in TS, depending on the size\n // of the items and container.\n display: none;\n white-space: nowrap;\n max-height: 24px;\n }\n }\n}\n\n@media screen and (max-width: $screen-tablet-max) {\n .container {\n .main-message-wrap {\n @include font-size-medium();\n padding: $spacer-2;\n }\n }\n}\n","import { Component, Element, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'biggive-totalizer',\n styleUrl: 'biggive-totalizer.scss',\n shadow: true,\n})\nexport class BiggiveTotalizer {\n private lastWrapperWidth: number = 0;\n\n @Element() host: HTMLBiggiveTotalizerElement;\n /**\n * Space below component\n */\n @Prop() spaceBelow: number = 0;\n /**\n * Primary banner colour\n */\n @Prop() primaryColour: string = 'primary';\n\n /**\n * Primary text colour\n */\n @Prop() primaryTextColour: string = 'white';\n\n /**\n * Secondary banner colour\n */\n @Prop() secondaryColour: string = 'secondary';\n\n /**\n * Secondary text colour\n */\n @Prop() secondaryTextColour: string = 'black';\n\n /**\n * Primary message\n */\n @Prop() mainMessage: string;\n\n private setSpeed(itemsWidth: number, containerWidth: number) {\n console.log('setSpeed() called with itemsWidth=' + itemsWidth + ', containerWidth=' + containerWidth);\n\n if (containerWidth === this.lastWrapperWidth) {\n // Some browsers fire 'resize' overzealously on scroll; we don't want to cause extra paints if nothing\n // relevant changed.\n return;\n }\n\n let sleeves: HTMLDivElement[] = [];\n for (const ii in [1, 2, 3, 4]) {\n const sleeve = this.host.shadowRoot?.querySelector('.ticker-wrap #sleeve_' + ii) as HTMLDivElement | null;\n if (sleeve) {\n sleeves.push(sleeve);\n // Restart the animation(s) on window resize to reduce the chance of jankiness.\n // https://stackoverflow.com/a/45036752/2803757\n sleeve.style.animationName = 'none';\n }\n }\n\n this.lastWrapperWidth = containerWidth;\n\n if (sleeves.length === 0) {\n console.log('sleeves missing, skipping setSpeed()');\n return;\n }\n\n // We've seen the initial calculation exclude the ~30px per set of values end padding before,\n // and it's safe to err on the side of more copies to reduce the chance of abrupt early loop\n // ends, so we add a buffer of 40px to the calculation when deciding how many copies to use.\n const sleeveCount = Math.max(1, Math.min(4, Math.ceil((2 * (40 + itemsWidth)) / containerWidth)));\n this.host.style.setProperty('--ticker-end-left', `-${sleeveCount * 100}%`);\n\n const duration = Math.round((itemsWidth / 100) * sleeveCount);\n\n for (let ii = 1; ii <= sleeveCount; ii++) {\n const sleeve = sleeves[ii - 1];\n if (sleeve) {\n sleeve.style.animationDuration = duration + 's';\n // https://stackoverflow.com/a/45847760\n sleeve.style.animationDelay = (duration / (sleeveCount - 1)) * (ii - 1) + 's';\n sleeve.style.display = 'inline-flex';\n sleeve.style.animationName = 'ticker';\n }\n }\n }\n\n componentDidLoad() {\n const wrapper = this.host.shadowRoot?.querySelector('.ticker-wrap') as HTMLDivElement;\n\n const tickerItemsInternalWrapper: HTMLDivElement | null = this.host.querySelector(`[slot=\"ticker-items\"]`);\n const sleeve1: HTMLDivElement | null | undefined = this.host.shadowRoot?.querySelector('.ticker-wrap #sleeve_1');\n const sleeve2: HTMLDivElement | null | undefined = this.host.shadowRoot?.querySelector('.ticker-wrap #sleeve_2');\n const sleeve3: HTMLDivElement | null | undefined = this.host.shadowRoot?.querySelector('.ticker-wrap #sleeve_3');\n const sleeve4: HTMLDivElement | null | undefined = this.host.shadowRoot?.querySelector('.ticker-wrap #sleeve_4');\n\n if (!tickerItemsInternalWrapper || !sleeve1) {\n console.log('tickerItemsInternalWrapper or sleeve1 is missing, skipping totalizer animation setup');\n return;\n }\n\n // Deep clone [all children of] the ticker items internal wrapper and append them, so the ticker can show items without\n // a blank break. Sleeve 2 and up will animate on delays per https://stackoverflow.com/a/45847760.\n setTimeout(() => {\n sleeve2 && sleeve2.appendChild(tickerItemsInternalWrapper.cloneNode(true));\n sleeve3 && sleeve3.appendChild(tickerItemsInternalWrapper.cloneNode(true));\n sleeve4 && sleeve4.appendChild(tickerItemsInternalWrapper.cloneNode(true));\n }, 800);\n\n setTimeout(() => {\n // In Angular contexts, it seems like we need to leave a little time before the calculations work.\n // Not totally clear why yet.\n this.setSpeed(tickerItemsInternalWrapper.clientWidth, wrapper.clientWidth);\n }, 300);\n\n window.addEventListener('resize', () => {\n this.setSpeed(tickerItemsInternalWrapper.clientWidth, wrapper.clientWidth);\n });\n }\n\n render() {\n return (\n <div class={'container space-below-' + this.spaceBelow}>\n <div>\n <div class=\"banner\">\n <div class={'main-message-wrap background-colour-' + this.secondaryColour + ' text-colour-' + this.secondaryTextColour}>{this.mainMessage}</div>\n <div class={'ticker-wrap background-colour-' + this.primaryColour + ' text-colour-' + this.primaryTextColour}>\n <div id=\"sleeve_1\" class=\"sleeve\">\n <slot name=\"ticker-items\"></slot>\n </div>\n <div id=\"sleeve_2\" class=\"sleeve sleeve-delayed-copy\">\n {/* Contents for these 3 are copied in TS and copies shown or hidden based on available space */}\n </div>\n <div id=\"sleeve_3\" class=\"sleeve sleeve-delayed-copy\"></div>\n <div id=\"sleeve_4\" class=\"sleeve sleeve-delayed-copy\"></div>\n </div>\n </div>\n </div>\n </div>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"biggive-totalizer.js","mappings":"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","names":["BiggiveTotalizer"],"sources":["src/components/biggive-totalizer/biggive-totalizer.scss?tag=biggive-totalizer&encapsulation=shadow","src/components/biggive-totalizer/biggive-totalizer.tsx"],"sourcesContent":["@include backgrounds();\n@include spacers();\n@include text-colours();\n\n:host {\n display: contents;\n @include standard-font();\n\n --ticker-end-left: -200%;\n}\n\n@keyframes ticker {\n 0% {\n transform: translate3d(0, 0, 0);\n }\n\n 100% {\n transform: translate3d(var(--ticker-end-left), 0, 0);\n }\n}\n\n.container {\n position: absolute;\n left: 0;\n right: 0;\n z-index: 1;\n\n .main-message-wrap {\n position: absolute;\n z-index: 1;\n padding: $spacer-2 $spacer-4;\n left: 0;\n top: 0;\n @include font-size-large();\n font-weight: 600;\n max-width: 33.3%;\n }\n\n .ticker-wrap {\n @include font-size-medium();\n padding: calc($spacer-2 - 4px) $spacer-4 $spacer-2 0;\n min-height: 17px;\n overflow: hidden;\n position: relative;\n\n .sleeve {\n will-change: transform; // https://web.dev/stick-to-compositor-only-properties-and-manage-layer-count/\n display: inline-flex;\n position: absolute;\n top: 4px;\n height: 24px;\n min-width: 100%;\n left: 100%;\n white-space: nowrap;\n\n animation-iteration-count: infinite;\n animation-timing-function: linear;\n animation-name: ticker;\n // TS overrides the specific timings once the width of ticker elements is known.\n animation-duration: 10s;\n\n @media (prefers-reduced-motion) {\n animation-name: none !important; // Turn off movement when needed for a11y.\n }\n }\n\n .sleeve-delayed-copy {\n // We set between 0 and 3 copies to `display: inline-flex` in TS, depending on the size\n // of the items and container.\n display: none;\n white-space: nowrap;\n max-height: 24px;\n }\n }\n}\n\n@media screen and (max-width: $screen-tablet-max) {\n .container {\n .main-message-wrap {\n @include font-size-medium();\n padding: $spacer-2;\n }\n }\n}\n","import { Component, Element, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'biggive-totalizer',\n styleUrl: 'biggive-totalizer.scss',\n shadow: true,\n})\nexport class BiggiveTotalizer {\n private lastWrapperWidth: number = 0;\n\n @Element() host: HTMLBiggiveTotalizerElement;\n /**\n * Space below component\n */\n @Prop() spaceBelow: number = 0;\n /**\n * Primary banner colour\n */\n @Prop() primaryColour: string = 'primary';\n\n /**\n * Primary text colour\n */\n @Prop() primaryTextColour: string = 'white';\n\n /**\n * Secondary banner colour\n */\n @Prop() secondaryColour: string = 'secondary';\n\n /**\n * Secondary text colour\n */\n @Prop() secondaryTextColour: string = 'black';\n\n /**\n * Primary message\n */\n @Prop() mainMessage: string;\n\n private setSpeed(itemsWidth: number, containerWidth: number) {\n console.log('setSpeed() called with itemsWidth=' + itemsWidth + ', containerWidth=' + containerWidth);\n\n if (containerWidth === this.lastWrapperWidth) {\n // Some browsers fire 'resize' overzealously on scroll; we don't want to cause extra paints if nothing\n // relevant changed.\n return;\n }\n\n let sleeves: HTMLDivElement[] = [];\n for (const ii in [1, 2, 3, 4]) {\n const sleeve = this.host.shadowRoot?.querySelector('.ticker-wrap #sleeve_' + ii) as HTMLDivElement | null;\n if (sleeve) {\n sleeves.push(sleeve);\n // Restart the animation(s) on window resize to reduce the chance of jankiness.\n // https://stackoverflow.com/a/45036752/2803757\n sleeve.style.animationName = 'none';\n }\n }\n\n this.lastWrapperWidth = containerWidth;\n\n if (sleeves.length === 0) {\n console.log('sleeves missing, skipping setSpeed()');\n return;\n }\n\n // We've seen the initial calculation exclude the ~30px per set of values end padding before,\n // and it's safe to err on the side of more copies to reduce the chance of abrupt early loop\n // ends, so we add a buffer of 40px to the calculation when deciding how many copies to use.\n // const sleeveCount = Math.max(1, Math.min(4, Math.ceil((2 * (40 + itemsWidth)) / containerWidth)));\n // TODO Ultimately we'd like to get multiple copies working, or simplify. This\n // has proven very hard to iterate on pending a fix for DON-867 because\n // there is Angular-specific behaviour breaking the contents of copies.\n const sleeveCount = 1;\n this.host.style.setProperty('--ticker-end-left', `-${(sleeveCount + 1) * 100}%`);\n\n const duration = Math.round((itemsWidth / 50) * sleeveCount);\n\n for (let ii = 1; ii <= sleeveCount; ii++) {\n const sleeve = sleeves[ii - 1];\n if (sleeve) {\n sleeve.style.animationDuration = duration + 's';\n // https://stackoverflow.com/a/45847760\n sleeve.style.animationDelay = (duration / (sleeveCount - 1)) * (ii - 1) + 's';\n sleeve.style.display = 'inline-flex';\n sleeve.style.animationName = 'ticker';\n }\n }\n }\n\n componentDidLoad() {\n const wrapper = this.host.shadowRoot?.querySelector('.ticker-wrap') as HTMLDivElement;\n\n const tickerItemsInternalWrapper: HTMLDivElement | null = this.host.querySelector(`[slot=\"ticker-items\"]`);\n const sleeve1: HTMLDivElement | null | undefined = this.host.shadowRoot?.querySelector('.ticker-wrap #sleeve_1');\n const sleeve2: HTMLDivElement | null | undefined = this.host.shadowRoot?.querySelector('.ticker-wrap #sleeve_2');\n const sleeve3: HTMLDivElement | null | undefined = this.host.shadowRoot?.querySelector('.ticker-wrap #sleeve_3');\n const sleeve4: HTMLDivElement | null | undefined = this.host.shadowRoot?.querySelector('.ticker-wrap #sleeve_4');\n\n if (!tickerItemsInternalWrapper || !sleeve1) {\n console.log('tickerItemsInternalWrapper or sleeve1 is missing, skipping totalizer animation setup');\n return;\n }\n\n // Deep clone [all children of] the ticker items internal wrapper and append them, so the ticker can show items without\n // a blank break. Sleeve 2 and up will animate on delays per https://stackoverflow.com/a/45847760.\n setTimeout(() => {\n sleeve2 && sleeve2.appendChild(tickerItemsInternalWrapper.cloneNode(true));\n sleeve3 && sleeve3.appendChild(tickerItemsInternalWrapper.cloneNode(true));\n sleeve4 && sleeve4.appendChild(tickerItemsInternalWrapper.cloneNode(true));\n }, 800);\n\n setTimeout(() => {\n // In Angular contexts, it seems like we need to leave a little time before the calculations work.\n // Not totally clear why yet.\n this.setSpeed(tickerItemsInternalWrapper.clientWidth, wrapper.clientWidth);\n }, 300);\n\n window.addEventListener('resize', () => {\n this.setSpeed(tickerItemsInternalWrapper.clientWidth, wrapper.clientWidth);\n });\n }\n\n render() {\n return (\n <div class={'container space-below-' + this.spaceBelow}>\n <div>\n <div class=\"banner\">\n <div class={'main-message-wrap background-colour-' + this.secondaryColour + ' text-colour-' + this.secondaryTextColour}>{this.mainMessage}</div>\n <div class={'ticker-wrap background-colour-' + this.primaryColour + ' text-colour-' + this.primaryTextColour}>\n <div id=\"sleeve_1\" class=\"sleeve\">\n <slot name=\"ticker-items\"></slot>\n </div>\n <div id=\"sleeve_2\" class=\"sleeve sleeve-delayed-copy\">\n {/* Contents for these 3 are copied in TS and copies shown or hidden based on available space */}\n </div>\n <div id=\"sleeve_3\" class=\"sleeve sleeve-delayed-copy\"></div>\n <div id=\"sleeve_4\" class=\"sleeve sleeve-delayed-copy\"></div>\n </div>\n </div>\n </div>\n </div>\n );\n }\n}\n"],"version":3}
|
|
@@ -1630,7 +1630,7 @@ const BiggiveTimelineEntry = class {
|
|
|
1630
1630
|
};
|
|
1631
1631
|
BiggiveTimelineEntry.style = biggiveTimelineEntryCss;
|
|
1632
1632
|
|
|
1633
|
-
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:-
|
|
1633
|
+
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:-200%}@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;display:inline-flex;position:absolute;top:4px;height:24px;min-width:100%;left:100%;white-space:nowrap;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-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}}";
|
|
1634
1634
|
|
|
1635
1635
|
const BiggiveTotalizer = class {
|
|
1636
1636
|
constructor(hostRef) {
|
|
@@ -1669,9 +1669,13 @@ const BiggiveTotalizer = class {
|
|
|
1669
1669
|
// We've seen the initial calculation exclude the ~30px per set of values end padding before,
|
|
1670
1670
|
// and it's safe to err on the side of more copies to reduce the chance of abrupt early loop
|
|
1671
1671
|
// ends, so we add a buffer of 40px to the calculation when deciding how many copies to use.
|
|
1672
|
-
const sleeveCount = Math.max(1, Math.min(4, Math.ceil((2 * (40 + itemsWidth)) / containerWidth)));
|
|
1673
|
-
|
|
1674
|
-
|
|
1672
|
+
// const sleeveCount = Math.max(1, Math.min(4, Math.ceil((2 * (40 + itemsWidth)) / containerWidth)));
|
|
1673
|
+
// TODO Ultimately we'd like to get multiple copies working, or simplify. This
|
|
1674
|
+
// has proven very hard to iterate on pending a fix for DON-867 because
|
|
1675
|
+
// there is Angular-specific behaviour breaking the contents of copies.
|
|
1676
|
+
const sleeveCount = 1;
|
|
1677
|
+
this.host.style.setProperty('--ticker-end-left', `-${(sleeveCount + 1) * 100}%`);
|
|
1678
|
+
const duration = Math.round((itemsWidth / 50) * sleeveCount);
|
|
1675
1679
|
for (let ii = 1; ii <= sleeveCount; ii++) {
|
|
1676
1680
|
const sleeve = sleeves[ii - 1];
|
|
1677
1681
|
if (sleeve) {
|