@biggive/components 202401021422.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-18cbbb58.entry.js → p-7f021540.entry.js} +2 -2
- package/dist/biggive/{p-18cbbb58.entry.js.map → p-7f021540.entry.js.map} +1 -1
- package/dist/cjs/biggive-accordion_42.cjs.entry.js +3 -3
- 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 +2 -2
- package/dist/collection/components/biggive-totalizer/biggive-totalizer.js.map +1 -1
- package/dist/components/biggive-totalizer.js +3 -3
- package/dist/components/biggive-totalizer.js.map +1 -1
- package/dist/esm/biggive-accordion_42.entry.js +3 -3
- package/dist/esm/biggive-accordion_42.entry.js.map +1 -1
- package/hydrate/index.js +3 -3
- package/package.json +1 -1
|
@@ -40,8 +40,8 @@ export class BiggiveTotalizer {
|
|
|
40
40
|
// has proven very hard to iterate on pending a fix for DON-867 because
|
|
41
41
|
// there is Angular-specific behaviour breaking the contents of copies.
|
|
42
42
|
const sleeveCount = 1;
|
|
43
|
-
this.host.style.setProperty('--ticker-end-left', `-${sleeveCount * 100}%`);
|
|
44
|
-
const duration = Math.round((itemsWidth /
|
|
43
|
+
this.host.style.setProperty('--ticker-end-left', `-${(sleeveCount + 1) * 100}%`);
|
|
44
|
+
const duration = Math.round((itemsWidth / 50) * sleeveCount);
|
|
45
45
|
for (let ii = 1; ii <= sleeveCount; ii++) {
|
|
46
46
|
const sleeve = sleeves[ii - 1];
|
|
47
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,qGAAqG;QACrG,8EAA8E;QAC9E,uEAAuE;QACvE,uEAAuE;QACvE,MAAM,WAAW,GAAG,CAAC,CAAC;QACtB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,mBAAmB,EAAE,IAAI,WAAW,GAAG,GAAG,GAAG,CAAC,CAAC;
|
|
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,qGAAqG;QACrG,8EAA8E;QAC9E,uEAAuE;QACvE,uEAAuE;QACvE,MAAM,WAAW,GAAG,CAAC,CAAC;QACtB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,mBAAmB,EAAE,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC;QAEjF,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,UAAU,GAAG,EAAE,CAAC,GAAG,WAAW,CAAC,CAAC;QAE7D,KAAK,IAAI,EAAE,GAAG,CAAC,EAAE,EAAE,IAAI,WAAW,EAAE,EAAE,EAAE,EAAE;YACxC,MAAM,MAAM,GAAG,OAAO,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC;YAC/B,IAAI,MAAM,EAAE;gBACV,MAAM,CAAC,KAAK,CAAC,iBAAiB,GAAG,QAAQ,GAAG,GAAG,CAAC;gBAChD,uCAAuC;gBACvC,MAAM,CAAC,KAAK,CAAC,cAAc,GAAG,CAAC,QAAQ,GAAG,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC;gBAC9E,MAAM,CAAC,KAAK,CAAC,OAAO,GAAG,aAAa,CAAC;gBACrC,MAAM,CAAC,KAAK,CAAC,aAAa,GAAG,QAAQ,CAAC;aACvC;SACF;IACH,CAAC;IAED,gBAAgB;;QACd,MAAM,OAAO,GAAG,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAC,cAAc,CAAmB,CAAC;QAEtF,MAAM,0BAA0B,GAA0B,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;QAC3G,MAAM,OAAO,GAAsC,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAC,wBAAwB,CAAC,CAAC;QACjH,MAAM,OAAO,GAAsC,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAC,wBAAwB,CAAC,CAAC;QACjH,MAAM,OAAO,GAAsC,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAC,wBAAwB,CAAC,CAAC;QACjH,MAAM,OAAO,GAAsC,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAC,wBAAwB,CAAC,CAAC;QAEjH,IAAI,CAAC,0BAA0B,IAAI,CAAC,OAAO,EAAE;YAC3C,OAAO,CAAC,GAAG,CAAC,sFAAsF,CAAC,CAAC;YACpG,OAAO;SACR;QAED,uHAAuH;QACvH,kGAAkG;QAClG,UAAU,CAAC,GAAG,EAAE;YACd,OAAO,IAAI,OAAO,CAAC,WAAW,CAAC,0BAA0B,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC;YAC3E,OAAO,IAAI,OAAO,CAAC,WAAW,CAAC,0BAA0B,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC;YAC3E,OAAO,IAAI,OAAO,CAAC,WAAW,CAAC,0BAA0B,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC;QAC7E,CAAC,EAAE,GAAG,CAAC,CAAC;QAER,UAAU,CAAC,GAAG,EAAE;YACd,kGAAkG;YAClG,6BAA6B;YAC7B,IAAI,CAAC,QAAQ,CAAC,0BAA0B,CAAC,WAAW,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;QAC7E,CAAC,EAAE,GAAG,CAAC,CAAC;QAER,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE;YACrC,IAAI,CAAC,QAAQ,CAAC,0BAA0B,CAAC,WAAW,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;QAC7E,CAAC,CAAC,CAAC;IACL,CAAC;IAED,MAAM;QACJ,OAAO,CACL,WAAK,KAAK,EAAE,wBAAwB,GAAG,IAAI,CAAC,UAAU;YACpD;gBACE,WAAK,KAAK,EAAC,QAAQ;oBACjB,WAAK,KAAK,EAAE,sCAAsC,GAAG,IAAI,CAAC,eAAe,GAAG,eAAe,GAAG,IAAI,CAAC,mBAAmB,IAAG,IAAI,CAAC,WAAW,CAAO;oBAChJ,WAAK,KAAK,EAAE,gCAAgC,GAAG,IAAI,CAAC,aAAa,GAAG,eAAe,GAAG,IAAI,CAAC,iBAAiB;wBAC1G,WAAK,EAAE,EAAC,UAAU,EAAC,KAAK,EAAC,QAAQ;4BAC/B,YAAM,IAAI,EAAC,cAAc,GAAQ,CAC7B;wBACN,WAAK,EAAE,EAAC,UAAU,EAAC,KAAK,EAAC,4BAA4B,GAE/C;wBACN,WAAK,EAAE,EAAC,UAAU,EAAC,KAAK,EAAC,4BAA4B,GAAO;wBAC5D,WAAK,EAAE,EAAC,UAAU,EAAC,KAAK,EAAC,4BAA4B,GAAO,CACxD,CACF,CACF,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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() {
|
|
@@ -46,8 +46,8 @@ const BiggiveTotalizer$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveTotaliz
|
|
|
46
46
|
// has proven very hard to iterate on pending a fix for DON-867 because
|
|
47
47
|
// there is Angular-specific behaviour breaking the contents of copies.
|
|
48
48
|
const sleeveCount = 1;
|
|
49
|
-
this.host.style.setProperty('--ticker-end-left', `-${sleeveCount * 100}%`);
|
|
50
|
-
const duration = Math.round((itemsWidth /
|
|
49
|
+
this.host.style.setProperty('--ticker-end-left', `-${(sleeveCount + 1) * 100}%`);
|
|
50
|
+
const duration = Math.round((itemsWidth / 50) * sleeveCount);
|
|
51
51
|
for (let ii = 1; ii <= sleeveCount; ii++) {
|
|
52
52
|
const sleeve = sleeves[ii - 1];
|
|
53
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 // 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 * 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) {
|
|
@@ -1674,8 +1674,8 @@ const BiggiveTotalizer = class {
|
|
|
1674
1674
|
// has proven very hard to iterate on pending a fix for DON-867 because
|
|
1675
1675
|
// there is Angular-specific behaviour breaking the contents of copies.
|
|
1676
1676
|
const sleeveCount = 1;
|
|
1677
|
-
this.host.style.setProperty('--ticker-end-left', `-${sleeveCount * 100}%`);
|
|
1678
|
-
const duration = Math.round((itemsWidth /
|
|
1677
|
+
this.host.style.setProperty('--ticker-end-left', `-${(sleeveCount + 1) * 100}%`);
|
|
1678
|
+
const duration = Math.round((itemsWidth / 50) * sleeveCount);
|
|
1679
1679
|
for (let ii = 1; ii <= sleeveCount; ii++) {
|
|
1680
1680
|
const sleeve = sleeves[ii - 1];
|
|
1681
1681
|
if (sleeve) {
|