@biggive/components 202311240945.0.0 → 202312031231.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-0d0d051b.entry.js +1 -0
- package/dist/cjs/biggive-accordion_42.cjs.entry.js +63 -42
- package/dist/collection/components/biggive-back-to-top/biggive-back-to-top.js +1 -1
- package/dist/collection/components/biggive-footer/biggive-footer.js +2 -2
- package/dist/collection/components/biggive-main-menu/biggive-main-menu.js +7 -0
- package/dist/collection/components/biggive-totalizer/biggive-totalizer.css +14 -10
- package/dist/collection/components/biggive-totalizer/biggive-totalizer.js +51 -38
- package/dist/collection/components/biggive-totalizer-ticker-item/biggive-totalizer-ticker-item.css +1 -1
- package/dist/components/biggive-back-to-top.js +1 -1
- package/dist/components/biggive-footer.js +2 -2
- package/dist/components/biggive-main-menu.js +7 -0
- package/dist/components/biggive-totalizer-ticker-item.js +1 -1
- package/dist/components/biggive-totalizer.js +52 -38
- package/dist/esm/biggive-accordion_42.entry.js +63 -42
- package/dist/types/components/biggive-main-menu/biggive-main-menu.d.ts +1 -0
- package/dist/types/components/biggive-totalizer/biggive-totalizer.d.ts +1 -0
- package/hydrate/index.js +63 -42
- package/package.json +1 -1
- package/readme.md +1 -1
- package/dist/biggive/p-5ba75d1d.entry.js +0 -1
package/hydrate/index.js
CHANGED
|
@@ -5885,7 +5885,7 @@ class BiggiveBackToTop {
|
|
|
5885
5885
|
registerInstance(this, hostRef);
|
|
5886
5886
|
}
|
|
5887
5887
|
render() {
|
|
5888
|
-
return (hAsync("div", { class: "container" }, hAsync("a", { href: "#" }, hAsync("img", { src: getAssetPath('
|
|
5888
|
+
return (hAsync("div", { class: "container" }, hAsync("a", { href: "#" }, hAsync("img", { src: getAssetPath('assets/images/triangles-combined.svg') }), hAsync("span", { class: "text" }, "Back to top"))));
|
|
5889
5889
|
}
|
|
5890
5890
|
static get style() { return biggiveBackToTopCss; }
|
|
5891
5891
|
static get cmpMeta() { return {
|
|
@@ -7358,10 +7358,10 @@ class BiggiveFooter {
|
|
|
7358
7358
|
render() {
|
|
7359
7359
|
const HeadingTag = `h${this.headingLevel}`;
|
|
7360
7360
|
const slotBasedFooter = () => {
|
|
7361
|
-
return (hAsync("footer", { class: "footer" }, hAsync("div", { class: "row row-top" }, hAsync("nav", { class: "nav nav-primary", "aria-labelledby": "footer-primary-heading" }, hAsync(HeadingTag, { class: "heading", id: "footer-primary-heading" }, hAsync("slot", { name: "nav-primary-title" }))), hAsync("nav", { class: "nav nav-secondary", "aria-labelledby": "footer-secondary-heading-heading" }, hAsync(HeadingTag, { class: "heading", id: "footer-secondary-heading" }, hAsync("slot", { name: "nav-secondary-title" }))), hAsync("nav", { class: "nav nav-tertiary", "aria-labelledby": "footer-tertiary-heading" }, hAsync(HeadingTag, { class: "heading", id: "footer-tertiary-heading" }, hAsync("slot", { name: "nav-tertiary-title" }))), hAsync("div", { class: "button-wrap" }, hAsync("biggive-button", { "colour-scheme": "white", url: "https://blog.thebiggive.org.uk/charities", label: "For charities" }), hAsync("biggive-button", { "colour-scheme": "white", url: "https://blog.thebiggive.org.uk/funders", label: "For funders" }))), hAsync("div", { class: "row row-bottom" }, hAsync("div", { class: "postscript-wrap" }, hAsync("img", { class: "fr-logo", src: getAssetPath('
|
|
7361
|
+
return (hAsync("footer", { class: "footer" }, hAsync("div", { class: "row row-top" }, hAsync("nav", { class: "nav nav-primary", "aria-labelledby": "footer-primary-heading" }, hAsync(HeadingTag, { class: "heading", id: "footer-primary-heading" }, hAsync("slot", { name: "nav-primary-title" }))), hAsync("nav", { class: "nav nav-secondary", "aria-labelledby": "footer-secondary-heading-heading" }, hAsync(HeadingTag, { class: "heading", id: "footer-secondary-heading" }, hAsync("slot", { name: "nav-secondary-title" }))), hAsync("nav", { class: "nav nav-tertiary", "aria-labelledby": "footer-tertiary-heading" }, hAsync(HeadingTag, { class: "heading", id: "footer-tertiary-heading" }, hAsync("slot", { name: "nav-tertiary-title" }))), hAsync("div", { class: "button-wrap" }, hAsync("biggive-button", { "colour-scheme": "white", url: "https://blog.thebiggive.org.uk/charities", label: "For charities" }), hAsync("biggive-button", { "colour-scheme": "white", url: "https://blog.thebiggive.org.uk/funders", label: "For funders" }))), hAsync("div", { class: "row row-bottom" }, hAsync("div", { class: "postscript-wrap" }, hAsync("img", { class: "fr-logo", src: getAssetPath('assets/images/fundraising-regulator.png'), alt: "Registered with FUNDRAISING REGULATOR" }), hAsync("nav", { class: "nav nav-postscript", "aria-label": "Legal" })), hAsync("div", { class: "social-icon-wrap" }, hAsync("slot", { name: "social-icons" })), hAsync("p", null, "\u00A9 2007 \u2013 2023 The Big Give Trust (1136547) | Company number 07273065 | Dragon Court, 27-29 Macklin Street, London WC2B 5LX, United Kingdom"))));
|
|
7362
7362
|
};
|
|
7363
7363
|
const presetFooter = () => {
|
|
7364
|
-
return (hAsync("footer", { class: "footer" }, hAsync("div", { class: "row row-top" }, hAsync("nav", { class: "nav nav-primary", "aria-labelledby": "footer-primary-heading" }, hAsync(HeadingTag, { class: "heading", id: "footer-primary-heading" }, hAsync("div", { slot: "nav-primary-title" }, "Match Funding Opportunities")), hAsync("ul", { slot: "nav-primary" }, hAsync("li", null, hAsync("a", { href: makeURL('Blog', this.blogUrlPrefix, 'christmas-challenge'), class: "icon-christmas" }, "Christmas Challenge")), hAsync("li", null, hAsync("a", { href: makeURL('Blog', this.blogUrlPrefix, 'green-match-fund'), class: "icon-green" }, "Green Match Fund")), hAsync("li", null, hAsync("a", { href: makeURL('Blog', this.blogUrlPrefix, 'champions-for-children'), class: "icon-children" }, "Champions for Children")), hAsync("li", null, hAsync("a", { href: makeURL('Blog', this.blogUrlPrefix, 'women-girls-match-fund'), class: "icon-women-girls" }, "Women and Girls Match Fund")), hAsync("li", null, hAsync("a", { href: makeURL('Blog', this.blogUrlPrefix, 'kind2mind/'), class: "icon-mental-health" }, "Kind\u00B2Mind")), hAsync("li", null, hAsync("a", { href: makeURL('Blog', this.blogUrlPrefix, 'artsforimpact'), class: "icon-arts" }, "Arts for Impact")), hAsync("li", null, hAsync("a", { href: makeURL('Blog', this.blogUrlPrefix, 'emergency-campaigns/'), class: "icon-emergency" }, "Emergency Match Fund")), hAsync("li", null, hAsync("a", { href: makeURL('Blog', this.blogUrlPrefix, 'run-your-own-campaign/)') }, "Run your own campaign")))), hAsync("nav", { class: "nav nav-secondary", "aria-labelledby": "footer-secondary-heading-heading" }, hAsync(HeadingTag, { class: "heading", id: "footer-secondary-heading" }, hAsync("div", { slot: "nav-secondary-title" }, "Resources")), hAsync("ul", { slot: "nav-secondary" }, hAsync("li", null, hAsync("a", { href: makeURL('Blog', this.blogUrlPrefix, 'case-studies') }, "Case Studies")), hAsync("li", null, hAsync("a", { href: makeURL('Blog', this.blogUrlPrefix, 'blog') }, "Blog")), hAsync("li", null, hAsync("a", { href: makeURL('Blog', this.blogUrlPrefix, 'reports-insights') }, "Reports & Insights")), hAsync("li", null, hAsync("a", { href: makeURL('Blog', this.blogUrlPrefix, 'press') }, "Press")))), hAsync("nav", { class: "nav nav-tertiary", "aria-labelledby": "footer-tertiary-heading" }, hAsync(HeadingTag, { class: "heading", id: "footer-tertiary-heading" }, hAsync("div", { slot: "nav-tertiary-title" }, "About")), hAsync("ul", { slot: "nav-tertiary" }, hAsync("li", null, hAsync("a", { href: makeURL('Experience', this.experienceUrlPrefix, 's/contact-us') }, "Contact us")), hAsync("li", null, hAsync("a", { href: makeURL('Blog', this.blogUrlPrefix, 'our-story') }, "Our Story")), hAsync("li", null, hAsync("a", { href: makeURL('Blog', this.blogUrlPrefix, 'our-people') }, "Our People")), hAsync("li", null, hAsync("a", { href: makeURL('Blog', this.blogUrlPrefix, 'donation-funds') }, "Donate by Bank Transfer")), hAsync("li", null, hAsync("a", { href: makeURL('Blog', this.blogUrlPrefix, 'our-fees') }, "Our Fees")), hAsync("li", null, hAsync("a", { href: makeURL('Blog', this.blogUrlPrefix, 'careers') }, "Careers")), hAsync("li", null, hAsync("a", { href: makeURL('Blog', this.blogUrlPrefix, 'faqs') }, "FAQs")))), hAsync("div", { class: "button-wrap" }, hAsync("biggive-button", { "colour-scheme": "white", url: makeURL('Blog', this.blogUrlPrefix, 'charities'), label: "For charities" }), hAsync("biggive-button", { "colour-scheme": "white", url: makeURL('Blog', this.blogUrlPrefix, 'funders'), label: "For funders" }))), hAsync("div", { class: "row row-bottom" }, hAsync("div", { class: "postscript-wrap" }, hAsync("img", { class: "fr-logo", src: getAssetPath('
|
|
7364
|
+
return (hAsync("footer", { class: "footer" }, hAsync("div", { class: "row row-top" }, hAsync("nav", { class: "nav nav-primary", "aria-labelledby": "footer-primary-heading" }, hAsync(HeadingTag, { class: "heading", id: "footer-primary-heading" }, hAsync("div", { slot: "nav-primary-title" }, "Match Funding Opportunities")), hAsync("ul", { slot: "nav-primary" }, hAsync("li", null, hAsync("a", { href: makeURL('Blog', this.blogUrlPrefix, 'christmas-challenge'), class: "icon-christmas" }, "Christmas Challenge")), hAsync("li", null, hAsync("a", { href: makeURL('Blog', this.blogUrlPrefix, 'green-match-fund'), class: "icon-green" }, "Green Match Fund")), hAsync("li", null, hAsync("a", { href: makeURL('Blog', this.blogUrlPrefix, 'champions-for-children'), class: "icon-children" }, "Champions for Children")), hAsync("li", null, hAsync("a", { href: makeURL('Blog', this.blogUrlPrefix, 'women-girls-match-fund'), class: "icon-women-girls" }, "Women and Girls Match Fund")), hAsync("li", null, hAsync("a", { href: makeURL('Blog', this.blogUrlPrefix, 'kind2mind/'), class: "icon-mental-health" }, "Kind\u00B2Mind")), hAsync("li", null, hAsync("a", { href: makeURL('Blog', this.blogUrlPrefix, 'artsforimpact'), class: "icon-arts" }, "Arts for Impact")), hAsync("li", null, hAsync("a", { href: makeURL('Blog', this.blogUrlPrefix, 'emergency-campaigns/'), class: "icon-emergency" }, "Emergency Match Fund")), hAsync("li", null, hAsync("a", { href: makeURL('Blog', this.blogUrlPrefix, 'run-your-own-campaign/)') }, "Run your own campaign")))), hAsync("nav", { class: "nav nav-secondary", "aria-labelledby": "footer-secondary-heading-heading" }, hAsync(HeadingTag, { class: "heading", id: "footer-secondary-heading" }, hAsync("div", { slot: "nav-secondary-title" }, "Resources")), hAsync("ul", { slot: "nav-secondary" }, hAsync("li", null, hAsync("a", { href: makeURL('Blog', this.blogUrlPrefix, 'case-studies') }, "Case Studies")), hAsync("li", null, hAsync("a", { href: makeURL('Blog', this.blogUrlPrefix, 'blog') }, "Blog")), hAsync("li", null, hAsync("a", { href: makeURL('Blog', this.blogUrlPrefix, 'reports-insights') }, "Reports & Insights")), hAsync("li", null, hAsync("a", { href: makeURL('Blog', this.blogUrlPrefix, 'press') }, "Press")))), hAsync("nav", { class: "nav nav-tertiary", "aria-labelledby": "footer-tertiary-heading" }, hAsync(HeadingTag, { class: "heading", id: "footer-tertiary-heading" }, hAsync("div", { slot: "nav-tertiary-title" }, "About")), hAsync("ul", { slot: "nav-tertiary" }, hAsync("li", null, hAsync("a", { href: makeURL('Experience', this.experienceUrlPrefix, 's/contact-us') }, "Contact us")), hAsync("li", null, hAsync("a", { href: makeURL('Blog', this.blogUrlPrefix, 'our-story') }, "Our Story")), hAsync("li", null, hAsync("a", { href: makeURL('Blog', this.blogUrlPrefix, 'our-people') }, "Our People")), hAsync("li", null, hAsync("a", { href: makeURL('Blog', this.blogUrlPrefix, 'donation-funds') }, "Donate by Bank Transfer")), hAsync("li", null, hAsync("a", { href: makeURL('Blog', this.blogUrlPrefix, 'our-fees') }, "Our Fees")), hAsync("li", null, hAsync("a", { href: makeURL('Blog', this.blogUrlPrefix, 'careers') }, "Careers")), hAsync("li", null, hAsync("a", { href: makeURL('Blog', this.blogUrlPrefix, 'faqs') }, "FAQs")))), hAsync("div", { class: "button-wrap" }, hAsync("biggive-button", { "colour-scheme": "white", url: makeURL('Blog', this.blogUrlPrefix, 'charities'), label: "For charities" }), hAsync("biggive-button", { "colour-scheme": "white", url: makeURL('Blog', this.blogUrlPrefix, 'funders'), label: "For funders" }))), hAsync("div", { class: "row row-bottom" }, hAsync("div", { class: "postscript-wrap" }, hAsync("img", { class: "fr-logo", src: getAssetPath('assets/images/fundraising-regulator.png'), alt: "Registered with FUNDRAISING REGULATOR" }), hAsync("nav", { class: "nav nav-postscript", "aria-label": "Legal" }, hAsync("ul", { slot: "nav-postscript" }, hAsync("li", null, hAsync("a", { href: makeURL('Blog', this.blogUrlPrefix, 'terms-and-conditions') }, "Terms and Conditions")), hAsync("li", null, hAsync("a", { href: makeURL('Blog', this.blogUrlPrefix, 'privacy') }, "Privacy Policy"))))), hAsync("div", { class: "social-icon-wrap" }, hAsync("div", { slot: "social-icons" }, hAsync("biggive-social-icon", { service: "Facebook", url: "https://www.facebook.com/BigGive.org", "background-colour": "tertiary", "icon-colour": "black", wide: true }), hAsync("biggive-social-icon", { service: "Twitter", url: "https://twitter.com/BigGive", "background-colour": "tertiary", "icon-colour": "black", wide: true }), hAsync("biggive-social-icon", { service: "LinkedIn", url: "https://uk.linkedin.com/company/big-give", "background-colour": "tertiary", "icon-colour": "black", wide: true }), hAsync("biggive-social-icon", { service: "YouTube", url: "https://www.youtube.com/channel/UC9_wH1aaTuZurJ-F9R8GDcA", "background-colour": "tertiary", "icon-colour": "black", wide: true }), hAsync("biggive-social-icon", { service: "Instagram", url: "https://www.instagram.com/biggiveorg", "background-colour": "tertiary", "icon-colour": "black" }))), hAsync("p", null, "\u00A9 2007 \u2013 2023 The Big Give Trust (1136547) | Company number 07273065 | Dragon Court, 27-29 Macklin Street, London WC2B 5LX, United Kingdom"))));
|
|
7365
7365
|
};
|
|
7366
7366
|
return this.usePresetFooter ? presetFooter() : slotBasedFooter();
|
|
7367
7367
|
}
|
|
@@ -8005,6 +8005,7 @@ const biggiveMainMenuCss = "/*!@a*/a.sc-biggive-main-menu{color:inherit;text-dec
|
|
|
8005
8005
|
class BiggiveMainMenu {
|
|
8006
8006
|
constructor(hostRef) {
|
|
8007
8007
|
registerInstance(this, hostRef);
|
|
8008
|
+
this.lastOffsetHeight = 0;
|
|
8008
8009
|
this.openMobileMenu = () => {
|
|
8009
8010
|
const mobileMenu = this.host.shadowRoot.querySelector('.nav-links');
|
|
8010
8011
|
mobileMenu.style.left = '0';
|
|
@@ -8026,6 +8027,12 @@ class BiggiveMainMenu {
|
|
|
8026
8027
|
event.preventDefault();
|
|
8027
8028
|
}
|
|
8028
8029
|
setHeaderSize() {
|
|
8030
|
+
if (this.host.offsetHeight === this.lastOffsetHeight) {
|
|
8031
|
+
// Some browsers fire 'resize' overzealously on scroll; we don't want to cause extra paints if nothing
|
|
8032
|
+
// relevant changed.
|
|
8033
|
+
return;
|
|
8034
|
+
}
|
|
8035
|
+
this.lastOffsetHeight = this.host.offsetHeight;
|
|
8029
8036
|
// Some resize edge cases lead Firefox, and maybe others, to go haywire and get a host offset
|
|
8030
8037
|
// height of millions of pixels, presumably due to a layout logic loop. So for as long as we use
|
|
8031
8038
|
// this body padding workaround, we need a safe maximum value, currently 130px, beyond which
|
|
@@ -8884,11 +8891,12 @@ class BiggiveTimelineEntry {
|
|
|
8884
8891
|
}; }
|
|
8885
8892
|
}
|
|
8886
8893
|
|
|
8887
|
-
const biggiveTotalizerCss = "/*!@a*/a.sc-biggive-totalizer{color:inherit;text-decoration:underline}/*!@a:hover*/a.sc-biggive-totalizer:hover{text-decoration:none}/*!@.background-colour-hover-primary:hover,\n.background-colour-primary*/.background-colour-hover-primary.sc-biggive-totalizer:hover,.background-colour-primary.sc-biggive-totalizer{background-color:#2C089B}/*!@.background-colour-hover-secondary:hover,\n.background-colour-secondary*/.background-colour-hover-secondary.sc-biggive-totalizer:hover,.background-colour-secondary.sc-biggive-totalizer{background-color:#2AF135}/*!@.background-colour-hover-tertiary:hover,\n.background-colour-tertiary*/.background-colour-hover-tertiary.sc-biggive-totalizer:hover,.background-colour-tertiary.sc-biggive-totalizer{background-color:#FF7272}/*!@.background-colour-hover-brand-1:hover,\n.background-colour-brand-1*/.background-colour-hover-brand-1.sc-biggive-totalizer:hover,.background-colour-brand-1.sc-biggive-totalizer{background-color:#B30510}/*!@.background-colour-hover-brand-2:hover,\n.background-colour-brand-2*/.background-colour-hover-brand-2.sc-biggive-totalizer:hover,.background-colour-brand-2.sc-biggive-totalizer{background-color:#6E0887}/*!@.background-colour-hover-brand-3:hover,\n.background-colour-brand-3*/.background-colour-hover-brand-3.sc-biggive-totalizer:hover,.background-colour-brand-3.sc-biggive-totalizer{background-color:#50B400}/*!@.background-colour-hover-brand-4:hover,\n.background-colour-brand-4*/.background-colour-hover-brand-4.sc-biggive-totalizer:hover,.background-colour-brand-4.sc-biggive-totalizer{background-color:#FFE500}/*!@.background-colour-hover-brand-5:hover,\n.background-colour-brand-5*/.background-colour-hover-brand-5.sc-biggive-totalizer:hover,.background-colour-brand-5.sc-biggive-totalizer{background-color:#F07D00}/*!@.background-colour-hover-brand-cc-red:hover,\n.background-colour-brand-cc-red*/.background-colour-hover-brand-cc-red.sc-biggive-totalizer:hover,.background-colour-brand-cc-red.sc-biggive-totalizer{background-color:#B30510}/*!@.background-colour-hover-brand-wgmf-purple:hover,\n.background-colour-brand-wgmf-purple*/.background-colour-hover-brand-wgmf-purple.sc-biggive-totalizer:hover,.background-colour-brand-wgmf-purple.sc-biggive-totalizer{background-color:#6E0887}/*!@.background-colour-hover-brand-gmf-green:hover,\n.background-colour-brand-gmf-green*/.background-colour-hover-brand-gmf-green.sc-biggive-totalizer:hover,.background-colour-brand-gmf-green.sc-biggive-totalizer{background-color:#50B400}/*!@.background-colour-hover-brand-emf-yellow:hover,\n.background-colour-brand-emf-yellow*/.background-colour-hover-brand-emf-yellow.sc-biggive-totalizer:hover,.background-colour-brand-emf-yellow.sc-biggive-totalizer{background-color:#FFE500}/*!@.background-colour-hover-brand-c4c-orange:hover,\n.background-colour-brand-c4c-orange*/.background-colour-hover-brand-c4c-orange.sc-biggive-totalizer:hover,.background-colour-brand-c4c-orange.sc-biggive-totalizer{background-color:#F07D00}/*!@.background-colour-hover-brand-afa-pink:hover,\n.background-colour-brand-afa-pink*/.background-colour-hover-brand-afa-pink.sc-biggive-totalizer:hover,.background-colour-brand-afa-pink.sc-biggive-totalizer{background-color:#BF387D}/*!@.background-colour-hover-brand-mhf-turquoise:hover,\n.background-colour-brand-mhf-turquoise*/.background-colour-hover-brand-mhf-turquoise.sc-biggive-totalizer:hover,.background-colour-brand-mhf-turquoise.sc-biggive-totalizer{background-color:#62CFC9}/*!@.background-colour-hover-brand-grey:hover,\n.background-colour-brand-grey*/.background-colour-hover-brand-grey.sc-biggive-totalizer:hover,.background-colour-brand-grey.sc-biggive-totalizer{background-color:#CBC8C8}/*!@.background-colour-hover-white:hover,\n.background-colour-white*/.background-colour-hover-white.sc-biggive-totalizer:hover,.background-colour-white.sc-biggive-totalizer{background-color:#FFFFFF}/*!@.background-colour-hover-black:hover,\n.background-colour-black*/.background-colour-hover-black.sc-biggive-totalizer:hover,.background-colour-black.sc-biggive-totalizer{background-color:#000000}/*!@.background-colour-hover-grey-extra-light:hover,\n.background-colour-grey-extra-light*/.background-colour-hover-grey-extra-light.sc-biggive-totalizer:hover,.background-colour-grey-extra-light.sc-biggive-totalizer{background-color:#D7D7D7}/*!@.background-colour-hover-grey-light:hover,\n.background-colour-grey-light*/.background-colour-hover-grey-light.sc-biggive-totalizer:hover,.background-colour-grey-light.sc-biggive-totalizer{background-color:#E8E8E8}/*!@.background-colour-hover-grey-medium:hover,\n.background-colour-grey-medium*/.background-colour-hover-grey-medium.sc-biggive-totalizer:hover,.background-colour-grey-medium.sc-biggive-totalizer{background-color:#8A8A8A}/*!@.background-colour-hover-grey-dark:hover,\n.background-colour-grey-dark*/.background-colour-hover-grey-dark.sc-biggive-totalizer:hover,.background-colour-grey-dark.sc-biggive-totalizer{background-color:#4A4A4A}/*!@.background-colour-hover-brand-6:hover,\n.background-colour-brand-6*/.background-colour-hover-brand-6.sc-biggive-totalizer:hover,.background-colour-brand-6.sc-biggive-totalizer{background-color:#62CFC9}/*!@.space-above-0*/.space-above-0.sc-biggive-totalizer{margin-top:0}/*!@.space-above-1*/.space-above-1.sc-biggive-totalizer{margin-top:5px}/*!@.space-above-2*/.space-above-2.sc-biggive-totalizer{margin-top:10px}/*!@.space-above-3*/.space-above-3.sc-biggive-totalizer{margin-top:15px}/*!@.space-above-4*/.space-above-4.sc-biggive-totalizer{margin-top:30px}/*!@.space-above-5*/.space-above-5.sc-biggive-totalizer{margin-top:45px}/*!@.space-above-6*/.space-above-6.sc-biggive-totalizer{margin-top:60px}/*!@.space-below-0*/.space-below-0.sc-biggive-totalizer{margin-bottom:0}/*!@.space-below-1*/.space-below-1.sc-biggive-totalizer{margin-bottom:5px}/*!@.space-below-2*/.space-below-2.sc-biggive-totalizer{margin-bottom:10px}/*!@.space-below-3*/.space-below-3.sc-biggive-totalizer{margin-bottom:15px}/*!@.space-below-4*/.space-below-4.sc-biggive-totalizer{margin-bottom:30px}/*!@.space-below-5*/.space-below-5.sc-biggive-totalizer{margin-bottom:45px}/*!@.space-below-6*/.space-below-6.sc-biggive-totalizer{margin-bottom:60px}/*!@.text-colour-hover-primary:hover,\n.text-colour-primary*/.text-colour-hover-primary.sc-biggive-totalizer:hover,.text-colour-primary.sc-biggive-totalizer{color:#2C089B}/*!@.text-colour-hover-secondary:hover,\n.text-colour-secondary*/.text-colour-hover-secondary.sc-biggive-totalizer:hover,.text-colour-secondary.sc-biggive-totalizer{color:#2AF135}/*!@.text-colour-hover-tertiary:hover,\n.text-colour-tertiary*/.text-colour-hover-tertiary.sc-biggive-totalizer:hover,.text-colour-tertiary.sc-biggive-totalizer{color:#FF7272}/*!@.text-colour-hover-brand-1:hover,\n.text-colour-brand-1*/.text-colour-hover-brand-1.sc-biggive-totalizer:hover,.text-colour-brand-1.sc-biggive-totalizer{color:#B30510}/*!@.text-colour-hover-brand-2:hover,\n.text-colour-brand-2*/.text-colour-hover-brand-2.sc-biggive-totalizer:hover,.text-colour-brand-2.sc-biggive-totalizer{color:#6E0887}/*!@.text-colour-hover-brand-3:hover,\n.text-colour-brand-3*/.text-colour-hover-brand-3.sc-biggive-totalizer:hover,.text-colour-brand-3.sc-biggive-totalizer{color:#50B400}/*!@.text-colour-hover-brand-4:hover,\n.text-colour-brand-4*/.text-colour-hover-brand-4.sc-biggive-totalizer:hover,.text-colour-brand-4.sc-biggive-totalizer{color:#FFE500}/*!@.text-colour-hover-brand-5:hover,\n.text-colour-brand-5*/.text-colour-hover-brand-5.sc-biggive-totalizer:hover,.text-colour-brand-5.sc-biggive-totalizer{color:#F07D00}/*!@.text-colour-hover-brand-cc-red:hover,\n.text-colour-brand-cc-red*/.text-colour-hover-brand-cc-red.sc-biggive-totalizer:hover,.text-colour-brand-cc-red.sc-biggive-totalizer{color:#B30510}/*!@.text-colour-hover-brand-wgmf-purple:hover,\n.text-colour-brand-wgmf-purple*/.text-colour-hover-brand-wgmf-purple.sc-biggive-totalizer:hover,.text-colour-brand-wgmf-purple.sc-biggive-totalizer{color:#6E0887}/*!@.text-colour-hover-brand-gmf-green:hover,\n.text-colour-brand-gmf-green*/.text-colour-hover-brand-gmf-green.sc-biggive-totalizer:hover,.text-colour-brand-gmf-green.sc-biggive-totalizer{color:#50B400}/*!@.text-colour-hover-brand-emf-yellow:hover,\n.text-colour-brand-emf-yellow*/.text-colour-hover-brand-emf-yellow.sc-biggive-totalizer:hover,.text-colour-brand-emf-yellow.sc-biggive-totalizer{color:#FFE500}/*!@.text-colour-hover-brand-c4c-orange:hover,\n.text-colour-brand-c4c-orange*/.text-colour-hover-brand-c4c-orange.sc-biggive-totalizer:hover,.text-colour-brand-c4c-orange.sc-biggive-totalizer{color:#F07D00}/*!@.text-colour-hover-brand-afa-pink:hover,\n.text-colour-brand-afa-pink*/.text-colour-hover-brand-afa-pink.sc-biggive-totalizer:hover,.text-colour-brand-afa-pink.sc-biggive-totalizer{color:#BF387D}/*!@.text-colour-hover-brand-mhf-turquoise:hover,\n.text-colour-brand-mhf-turquoise*/.text-colour-hover-brand-mhf-turquoise.sc-biggive-totalizer:hover,.text-colour-brand-mhf-turquoise.sc-biggive-totalizer{color:#62CFC9}/*!@.text-colour-hover-brand-grey:hover,\n.text-colour-brand-grey*/.text-colour-hover-brand-grey.sc-biggive-totalizer:hover,.text-colour-brand-grey.sc-biggive-totalizer{color:#CBC8C8}/*!@.text-colour-hover-white:hover,\n.text-colour-white*/.text-colour-hover-white.sc-biggive-totalizer:hover,.text-colour-white.sc-biggive-totalizer{color:#FFFFFF}/*!@.text-colour-hover-black:hover,\n.text-colour-black*/.text-colour-hover-black.sc-biggive-totalizer:hover,.text-colour-black.sc-biggive-totalizer{color:#000000}/*!@.text-colour-hover-grey-extra-light:hover,\n.text-colour-grey-extra-light*/.text-colour-hover-grey-extra-light.sc-biggive-totalizer:hover,.text-colour-grey-extra-light.sc-biggive-totalizer{color:#D7D7D7}/*!@.text-colour-hover-grey-light:hover,\n.text-colour-grey-light*/.text-colour-hover-grey-light.sc-biggive-totalizer:hover,.text-colour-grey-light.sc-biggive-totalizer{color:#E8E8E8}/*!@.text-colour-hover-grey-medium:hover,\n.text-colour-grey-medium*/.text-colour-hover-grey-medium.sc-biggive-totalizer:hover,.text-colour-grey-medium.sc-biggive-totalizer{color:#8A8A8A}/*!@.text-colour-hover-grey-dark:hover,\n.text-colour-grey-dark*/.text-colour-hover-grey-dark.sc-biggive-totalizer:hover,.text-colour-grey-dark.sc-biggive-totalizer{color:#4A4A4A}/*!@.text-colour-hover-brand-6:hover,\n.text-colour-brand-6*/.text-colour-hover-brand-6.sc-biggive-totalizer:hover,.text-colour-brand-6.sc-biggive-totalizer{color:#CBC8C8}/*!@:host*/.sc-biggive-totalizer-h{display:contents;font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px}@keyframes ticker{0%{transform:translate3d(0, 0, 0)}100%{transform:translate3d(-200%, 0, 0)}}/*!@.container*/.container.sc-biggive-totalizer{position:absolute;left:0;right:0;z-index:1}/*!@.container .main-message-wrap*/.container.sc-biggive-totalizer .main-message-wrap.sc-biggive-totalizer{position:absolute;z-index:1;padding:10px 30px;left:0;top:0;font-size:24px;line-height:30px;font-weight:600;max-width:33.3%}/*!@.container .ticker-wrap*/.container.sc-biggive-totalizer .ticker-wrap.sc-biggive-totalizer{padding:10px 0 10px 0;min-height:17px;font-size:17px;line-height:24px;overflow:hidden;position:relative}/*!@.container .ticker-wrap .sleeve*/.container.sc-biggive-totalizer .ticker-wrap.sc-biggive-totalizer .sleeve.sc-biggive-totalizer{will-change:transform;width:100%;position:absolute;left:100%;display:flex;animation-iteration-count:infinite;animation-timing-function:linear;animation-name:ticker;animation-duration:10s}@media (prefers-reduced-motion){/*!@.container .ticker-wrap .sleeve*/.container.sc-biggive-totalizer .ticker-wrap.sc-biggive-totalizer .sleeve.sc-biggive-totalizer{animation-name:none}}/*!@.container .ticker-wrap .sleeve .ticker-item*/.container.sc-biggive-totalizer .ticker-wrap.sc-biggive-totalizer .sleeve.sc-biggive-totalizer .ticker-item.sc-biggive-totalizer{white-space:nowrap;padding:0 15px}/*!@.container .ticker-wrap .sleeve.sleeve-delayed-copy*/.container.sc-biggive-totalizer .ticker-wrap.sc-biggive-totalizer .sleeve.sleeve-delayed-copy.sc-biggive-totalizer{animation-delay:5s}@media screen and (max-width: 768px){/*!@.container .main-message-wrap*/.container.sc-biggive-totalizer .main-message-wrap.sc-biggive-totalizer{font-size:17px;line-height:24px;padding:10px}}";
|
|
8894
|
+
const biggiveTotalizerCss = "/*!@a*/a.sc-biggive-totalizer{color:inherit;text-decoration:underline}/*!@a:hover*/a.sc-biggive-totalizer:hover{text-decoration:none}/*!@.background-colour-hover-primary:hover,\n.background-colour-primary*/.background-colour-hover-primary.sc-biggive-totalizer:hover,.background-colour-primary.sc-biggive-totalizer{background-color:#2C089B}/*!@.background-colour-hover-secondary:hover,\n.background-colour-secondary*/.background-colour-hover-secondary.sc-biggive-totalizer:hover,.background-colour-secondary.sc-biggive-totalizer{background-color:#2AF135}/*!@.background-colour-hover-tertiary:hover,\n.background-colour-tertiary*/.background-colour-hover-tertiary.sc-biggive-totalizer:hover,.background-colour-tertiary.sc-biggive-totalizer{background-color:#FF7272}/*!@.background-colour-hover-brand-1:hover,\n.background-colour-brand-1*/.background-colour-hover-brand-1.sc-biggive-totalizer:hover,.background-colour-brand-1.sc-biggive-totalizer{background-color:#B30510}/*!@.background-colour-hover-brand-2:hover,\n.background-colour-brand-2*/.background-colour-hover-brand-2.sc-biggive-totalizer:hover,.background-colour-brand-2.sc-biggive-totalizer{background-color:#6E0887}/*!@.background-colour-hover-brand-3:hover,\n.background-colour-brand-3*/.background-colour-hover-brand-3.sc-biggive-totalizer:hover,.background-colour-brand-3.sc-biggive-totalizer{background-color:#50B400}/*!@.background-colour-hover-brand-4:hover,\n.background-colour-brand-4*/.background-colour-hover-brand-4.sc-biggive-totalizer:hover,.background-colour-brand-4.sc-biggive-totalizer{background-color:#FFE500}/*!@.background-colour-hover-brand-5:hover,\n.background-colour-brand-5*/.background-colour-hover-brand-5.sc-biggive-totalizer:hover,.background-colour-brand-5.sc-biggive-totalizer{background-color:#F07D00}/*!@.background-colour-hover-brand-cc-red:hover,\n.background-colour-brand-cc-red*/.background-colour-hover-brand-cc-red.sc-biggive-totalizer:hover,.background-colour-brand-cc-red.sc-biggive-totalizer{background-color:#B30510}/*!@.background-colour-hover-brand-wgmf-purple:hover,\n.background-colour-brand-wgmf-purple*/.background-colour-hover-brand-wgmf-purple.sc-biggive-totalizer:hover,.background-colour-brand-wgmf-purple.sc-biggive-totalizer{background-color:#6E0887}/*!@.background-colour-hover-brand-gmf-green:hover,\n.background-colour-brand-gmf-green*/.background-colour-hover-brand-gmf-green.sc-biggive-totalizer:hover,.background-colour-brand-gmf-green.sc-biggive-totalizer{background-color:#50B400}/*!@.background-colour-hover-brand-emf-yellow:hover,\n.background-colour-brand-emf-yellow*/.background-colour-hover-brand-emf-yellow.sc-biggive-totalizer:hover,.background-colour-brand-emf-yellow.sc-biggive-totalizer{background-color:#FFE500}/*!@.background-colour-hover-brand-c4c-orange:hover,\n.background-colour-brand-c4c-orange*/.background-colour-hover-brand-c4c-orange.sc-biggive-totalizer:hover,.background-colour-brand-c4c-orange.sc-biggive-totalizer{background-color:#F07D00}/*!@.background-colour-hover-brand-afa-pink:hover,\n.background-colour-brand-afa-pink*/.background-colour-hover-brand-afa-pink.sc-biggive-totalizer:hover,.background-colour-brand-afa-pink.sc-biggive-totalizer{background-color:#BF387D}/*!@.background-colour-hover-brand-mhf-turquoise:hover,\n.background-colour-brand-mhf-turquoise*/.background-colour-hover-brand-mhf-turquoise.sc-biggive-totalizer:hover,.background-colour-brand-mhf-turquoise.sc-biggive-totalizer{background-color:#62CFC9}/*!@.background-colour-hover-brand-grey:hover,\n.background-colour-brand-grey*/.background-colour-hover-brand-grey.sc-biggive-totalizer:hover,.background-colour-brand-grey.sc-biggive-totalizer{background-color:#CBC8C8}/*!@.background-colour-hover-white:hover,\n.background-colour-white*/.background-colour-hover-white.sc-biggive-totalizer:hover,.background-colour-white.sc-biggive-totalizer{background-color:#FFFFFF}/*!@.background-colour-hover-black:hover,\n.background-colour-black*/.background-colour-hover-black.sc-biggive-totalizer:hover,.background-colour-black.sc-biggive-totalizer{background-color:#000000}/*!@.background-colour-hover-grey-extra-light:hover,\n.background-colour-grey-extra-light*/.background-colour-hover-grey-extra-light.sc-biggive-totalizer:hover,.background-colour-grey-extra-light.sc-biggive-totalizer{background-color:#D7D7D7}/*!@.background-colour-hover-grey-light:hover,\n.background-colour-grey-light*/.background-colour-hover-grey-light.sc-biggive-totalizer:hover,.background-colour-grey-light.sc-biggive-totalizer{background-color:#E8E8E8}/*!@.background-colour-hover-grey-medium:hover,\n.background-colour-grey-medium*/.background-colour-hover-grey-medium.sc-biggive-totalizer:hover,.background-colour-grey-medium.sc-biggive-totalizer{background-color:#8A8A8A}/*!@.background-colour-hover-grey-dark:hover,\n.background-colour-grey-dark*/.background-colour-hover-grey-dark.sc-biggive-totalizer:hover,.background-colour-grey-dark.sc-biggive-totalizer{background-color:#4A4A4A}/*!@.background-colour-hover-brand-6:hover,\n.background-colour-brand-6*/.background-colour-hover-brand-6.sc-biggive-totalizer:hover,.background-colour-brand-6.sc-biggive-totalizer{background-color:#62CFC9}/*!@.space-above-0*/.space-above-0.sc-biggive-totalizer{margin-top:0}/*!@.space-above-1*/.space-above-1.sc-biggive-totalizer{margin-top:5px}/*!@.space-above-2*/.space-above-2.sc-biggive-totalizer{margin-top:10px}/*!@.space-above-3*/.space-above-3.sc-biggive-totalizer{margin-top:15px}/*!@.space-above-4*/.space-above-4.sc-biggive-totalizer{margin-top:30px}/*!@.space-above-5*/.space-above-5.sc-biggive-totalizer{margin-top:45px}/*!@.space-above-6*/.space-above-6.sc-biggive-totalizer{margin-top:60px}/*!@.space-below-0*/.space-below-0.sc-biggive-totalizer{margin-bottom:0}/*!@.space-below-1*/.space-below-1.sc-biggive-totalizer{margin-bottom:5px}/*!@.space-below-2*/.space-below-2.sc-biggive-totalizer{margin-bottom:10px}/*!@.space-below-3*/.space-below-3.sc-biggive-totalizer{margin-bottom:15px}/*!@.space-below-4*/.space-below-4.sc-biggive-totalizer{margin-bottom:30px}/*!@.space-below-5*/.space-below-5.sc-biggive-totalizer{margin-bottom:45px}/*!@.space-below-6*/.space-below-6.sc-biggive-totalizer{margin-bottom:60px}/*!@.text-colour-hover-primary:hover,\n.text-colour-primary*/.text-colour-hover-primary.sc-biggive-totalizer:hover,.text-colour-primary.sc-biggive-totalizer{color:#2C089B}/*!@.text-colour-hover-secondary:hover,\n.text-colour-secondary*/.text-colour-hover-secondary.sc-biggive-totalizer:hover,.text-colour-secondary.sc-biggive-totalizer{color:#2AF135}/*!@.text-colour-hover-tertiary:hover,\n.text-colour-tertiary*/.text-colour-hover-tertiary.sc-biggive-totalizer:hover,.text-colour-tertiary.sc-biggive-totalizer{color:#FF7272}/*!@.text-colour-hover-brand-1:hover,\n.text-colour-brand-1*/.text-colour-hover-brand-1.sc-biggive-totalizer:hover,.text-colour-brand-1.sc-biggive-totalizer{color:#B30510}/*!@.text-colour-hover-brand-2:hover,\n.text-colour-brand-2*/.text-colour-hover-brand-2.sc-biggive-totalizer:hover,.text-colour-brand-2.sc-biggive-totalizer{color:#6E0887}/*!@.text-colour-hover-brand-3:hover,\n.text-colour-brand-3*/.text-colour-hover-brand-3.sc-biggive-totalizer:hover,.text-colour-brand-3.sc-biggive-totalizer{color:#50B400}/*!@.text-colour-hover-brand-4:hover,\n.text-colour-brand-4*/.text-colour-hover-brand-4.sc-biggive-totalizer:hover,.text-colour-brand-4.sc-biggive-totalizer{color:#FFE500}/*!@.text-colour-hover-brand-5:hover,\n.text-colour-brand-5*/.text-colour-hover-brand-5.sc-biggive-totalizer:hover,.text-colour-brand-5.sc-biggive-totalizer{color:#F07D00}/*!@.text-colour-hover-brand-cc-red:hover,\n.text-colour-brand-cc-red*/.text-colour-hover-brand-cc-red.sc-biggive-totalizer:hover,.text-colour-brand-cc-red.sc-biggive-totalizer{color:#B30510}/*!@.text-colour-hover-brand-wgmf-purple:hover,\n.text-colour-brand-wgmf-purple*/.text-colour-hover-brand-wgmf-purple.sc-biggive-totalizer:hover,.text-colour-brand-wgmf-purple.sc-biggive-totalizer{color:#6E0887}/*!@.text-colour-hover-brand-gmf-green:hover,\n.text-colour-brand-gmf-green*/.text-colour-hover-brand-gmf-green.sc-biggive-totalizer:hover,.text-colour-brand-gmf-green.sc-biggive-totalizer{color:#50B400}/*!@.text-colour-hover-brand-emf-yellow:hover,\n.text-colour-brand-emf-yellow*/.text-colour-hover-brand-emf-yellow.sc-biggive-totalizer:hover,.text-colour-brand-emf-yellow.sc-biggive-totalizer{color:#FFE500}/*!@.text-colour-hover-brand-c4c-orange:hover,\n.text-colour-brand-c4c-orange*/.text-colour-hover-brand-c4c-orange.sc-biggive-totalizer:hover,.text-colour-brand-c4c-orange.sc-biggive-totalizer{color:#F07D00}/*!@.text-colour-hover-brand-afa-pink:hover,\n.text-colour-brand-afa-pink*/.text-colour-hover-brand-afa-pink.sc-biggive-totalizer:hover,.text-colour-brand-afa-pink.sc-biggive-totalizer{color:#BF387D}/*!@.text-colour-hover-brand-mhf-turquoise:hover,\n.text-colour-brand-mhf-turquoise*/.text-colour-hover-brand-mhf-turquoise.sc-biggive-totalizer:hover,.text-colour-brand-mhf-turquoise.sc-biggive-totalizer{color:#62CFC9}/*!@.text-colour-hover-brand-grey:hover,\n.text-colour-brand-grey*/.text-colour-hover-brand-grey.sc-biggive-totalizer:hover,.text-colour-brand-grey.sc-biggive-totalizer{color:#CBC8C8}/*!@.text-colour-hover-white:hover,\n.text-colour-white*/.text-colour-hover-white.sc-biggive-totalizer:hover,.text-colour-white.sc-biggive-totalizer{color:#FFFFFF}/*!@.text-colour-hover-black:hover,\n.text-colour-black*/.text-colour-hover-black.sc-biggive-totalizer:hover,.text-colour-black.sc-biggive-totalizer{color:#000000}/*!@.text-colour-hover-grey-extra-light:hover,\n.text-colour-grey-extra-light*/.text-colour-hover-grey-extra-light.sc-biggive-totalizer:hover,.text-colour-grey-extra-light.sc-biggive-totalizer{color:#D7D7D7}/*!@.text-colour-hover-grey-light:hover,\n.text-colour-grey-light*/.text-colour-hover-grey-light.sc-biggive-totalizer:hover,.text-colour-grey-light.sc-biggive-totalizer{color:#E8E8E8}/*!@.text-colour-hover-grey-medium:hover,\n.text-colour-grey-medium*/.text-colour-hover-grey-medium.sc-biggive-totalizer:hover,.text-colour-grey-medium.sc-biggive-totalizer{color:#8A8A8A}/*!@.text-colour-hover-grey-dark:hover,\n.text-colour-grey-dark*/.text-colour-hover-grey-dark.sc-biggive-totalizer:hover,.text-colour-grey-dark.sc-biggive-totalizer{color:#4A4A4A}/*!@.text-colour-hover-brand-6:hover,\n.text-colour-brand-6*/.text-colour-hover-brand-6.sc-biggive-totalizer:hover,.text-colour-brand-6.sc-biggive-totalizer{color:#CBC8C8}/*!@:host*/.sc-biggive-totalizer-h{display:contents;font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;--ticker-end-left:-100%}@keyframes ticker{0%{transform:translate3d(0, 0, 0)}100%{transform:translate3d(var(--ticker-end-left), 0, 0)}}/*!@.container*/.container.sc-biggive-totalizer{position:absolute;left:0;right:0;z-index:1}/*!@.container .main-message-wrap*/.container.sc-biggive-totalizer .main-message-wrap.sc-biggive-totalizer{position:absolute;z-index:1;padding:10px 30px;left:0;top:0;font-size:24px;line-height:30px;font-weight:600;max-width:33.3%}/*!@.container .ticker-wrap*/.container.sc-biggive-totalizer .ticker-wrap.sc-biggive-totalizer{font-size:17px;line-height:24px;padding:6px 30px 10px 0;min-height:17px;overflow:hidden;position:relative}/*!@.container .ticker-wrap .sleeve*/.container.sc-biggive-totalizer .ticker-wrap.sc-biggive-totalizer .sleeve.sc-biggive-totalizer{will-change:transform;position:absolute;display:flex;min-width:100%;left:100%;animation-iteration-count:infinite;animation-timing-function:linear;animation-name:ticker;animation-duration:10s}@media (prefers-reduced-motion){/*!@.container .ticker-wrap .sleeve*/.container.sc-biggive-totalizer .ticker-wrap.sc-biggive-totalizer .sleeve.sc-biggive-totalizer{animation-name:none !important}}/*!@.container .ticker-wrap .sleeve ::slotted([slot=ticker-items])*/.container .ticker-wrap .sleeve .sc-biggive-totalizer-s>[slot=ticker-items]{display:inline-flex;white-space:nowrap;max-height:24px}/*!@.container .ticker-wrap .sleeve-delayed-copy*/.container.sc-biggive-totalizer .ticker-wrap.sc-biggive-totalizer .sleeve-delayed-copy.sc-biggive-totalizer{display:none;white-space:nowrap;max-height:24px}@media screen and (max-width: 768px){/*!@.container .main-message-wrap*/.container.sc-biggive-totalizer .main-message-wrap.sc-biggive-totalizer{font-size:17px;line-height:24px;padding:10px}}";
|
|
8888
8895
|
|
|
8889
8896
|
class BiggiveTotalizer {
|
|
8890
8897
|
constructor(hostRef) {
|
|
8891
8898
|
registerInstance(this, hostRef);
|
|
8899
|
+
this.lastWrapperWidth = 0;
|
|
8892
8900
|
this.spaceBelow = 0;
|
|
8893
8901
|
this.primaryColour = 'primary';
|
|
8894
8902
|
this.primaryTextColour = 'white';
|
|
@@ -8896,58 +8904,71 @@ class BiggiveTotalizer {
|
|
|
8896
8904
|
this.secondaryTextColour = 'black';
|
|
8897
8905
|
this.mainMessage = undefined;
|
|
8898
8906
|
}
|
|
8899
|
-
setSpeed(itemsWidth) {
|
|
8900
|
-
var _a
|
|
8901
|
-
|
|
8902
|
-
|
|
8903
|
-
|
|
8904
|
-
console.log('sleeve1 or sleeve2 is missing, skipping setSpeed()');
|
|
8907
|
+
setSpeed(itemsWidth, containerWidth) {
|
|
8908
|
+
var _a;
|
|
8909
|
+
if (containerWidth === this.lastWrapperWidth) {
|
|
8910
|
+
// Some browsers fire 'resize' overzealously on scroll; we don't want to cause extra paints if nothing
|
|
8911
|
+
// relevant changed.
|
|
8905
8912
|
return;
|
|
8906
8913
|
}
|
|
8907
|
-
|
|
8908
|
-
|
|
8909
|
-
|
|
8910
|
-
|
|
8911
|
-
|
|
8912
|
-
|
|
8913
|
-
|
|
8914
|
-
|
|
8915
|
-
|
|
8916
|
-
|
|
8917
|
-
|
|
8918
|
-
|
|
8919
|
-
|
|
8920
|
-
|
|
8921
|
-
|
|
8922
|
-
|
|
8923
|
-
|
|
8914
|
+
let sleeves = [];
|
|
8915
|
+
for (const ii in [1, 2, 3, 4]) {
|
|
8916
|
+
const sleeve = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.ticker-wrap #sleeve_' + ii);
|
|
8917
|
+
if (sleeve) {
|
|
8918
|
+
sleeves.push(sleeve);
|
|
8919
|
+
// Restart the animation(s) on window resize to reduce the chance of jankiness.
|
|
8920
|
+
// https://stackoverflow.com/a/45036752/2803757
|
|
8921
|
+
sleeve.style.animationName = 'none';
|
|
8922
|
+
}
|
|
8923
|
+
}
|
|
8924
|
+
this.lastWrapperWidth = containerWidth;
|
|
8925
|
+
if (sleeves.length === 0) {
|
|
8926
|
+
console.log('sleeves missing, skipping setSpeed()');
|
|
8927
|
+
return;
|
|
8928
|
+
}
|
|
8929
|
+
// We've seen the initial calculation exclude the ~30px per set of values end padding before,
|
|
8930
|
+
// and it's safe to err on the side of more copies to reduce the chance of abrupt early loop
|
|
8931
|
+
// ends, so we add a buffer of 40px to the calculation when deciding how many copies to use.
|
|
8932
|
+
const sleeveCount = Math.max(1, Math.min(4, Math.ceil((2 * (40 + itemsWidth)) / containerWidth)));
|
|
8933
|
+
this.host.style.setProperty('--ticker-end-left', `-${sleeveCount * 100}%`);
|
|
8934
|
+
const duration = Math.round((itemsWidth / 100) * sleeveCount);
|
|
8935
|
+
for (let ii = 1; ii <= sleeveCount; ii++) {
|
|
8936
|
+
const sleeve = sleeves[ii - 1];
|
|
8937
|
+
if (sleeve) {
|
|
8938
|
+
sleeve.style.animationDuration = duration + 's';
|
|
8939
|
+
// https://stackoverflow.com/a/45847760
|
|
8940
|
+
sleeve.style.animationDelay = (duration * (ii - 1)) / sleeveCount + 's';
|
|
8941
|
+
sleeve.style.display = 'inline-flex';
|
|
8942
|
+
sleeve.style.animationName = 'ticker';
|
|
8943
|
+
}
|
|
8924
8944
|
}
|
|
8925
8945
|
}
|
|
8926
8946
|
componentDidRender() {
|
|
8927
|
-
var _a, _b;
|
|
8947
|
+
var _a, _b, _c, _d, _e;
|
|
8948
|
+
const wrapper = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.ticker-wrap');
|
|
8928
8949
|
const tickerItemsInternalWrapper = this.host.querySelector(`[slot="ticker-items"]`);
|
|
8929
|
-
const sleeve1 = (
|
|
8930
|
-
const sleeve2 = (
|
|
8931
|
-
|
|
8932
|
-
|
|
8950
|
+
const sleeve1 = (_b = this.host.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.ticker-wrap #sleeve_1');
|
|
8951
|
+
const sleeve2 = (_c = this.host.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('.ticker-wrap #sleeve_2');
|
|
8952
|
+
const sleeve3 = (_d = this.host.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('.ticker-wrap #sleeve_3');
|
|
8953
|
+
const sleeve4 = (_e = this.host.shadowRoot) === null || _e === void 0 ? void 0 : _e.querySelector('.ticker-wrap #sleeve_4');
|
|
8954
|
+
if (!tickerItemsInternalWrapper || !sleeve1) {
|
|
8955
|
+
console.log('tickerItemsInternalWrapper or sleeve1 is missing, skipping totalizer animation setup');
|
|
8933
8956
|
return;
|
|
8934
8957
|
}
|
|
8935
8958
|
// Clone all children of the ticker items internal wrapper and append them, so the ticker can show items without
|
|
8936
|
-
// a blank break. Sleeve 2 will animate on
|
|
8959
|
+
// a blank break. Sleeve 2 and up will animate on delays per https://stackoverflow.com/a/45847760.
|
|
8937
8960
|
tickerItemsInternalWrapper.childNodes.forEach((child) => {
|
|
8938
|
-
sleeve2.appendChild(child.cloneNode(true)); // Deep clone all items.
|
|
8961
|
+
sleeve2 && sleeve2.appendChild(child.cloneNode(true)); // Deep clone all items.
|
|
8962
|
+
sleeve3 && sleeve3.appendChild(child.cloneNode(true));
|
|
8963
|
+
sleeve4 && sleeve4.appendChild(child.cloneNode(true));
|
|
8939
8964
|
});
|
|
8940
|
-
|
|
8941
|
-
tickerItemsInternalWrapper.style.display = 'inline-flex';
|
|
8942
|
-
tickerItemsInternalWrapper.style.flex = 'none';
|
|
8943
|
-
}
|
|
8944
|
-
this.setSpeed(tickerItemsInternalWrapper.clientWidth);
|
|
8965
|
+
this.setSpeed(tickerItemsInternalWrapper.clientWidth, wrapper.clientWidth);
|
|
8945
8966
|
window.addEventListener('resize', () => {
|
|
8946
|
-
this.setSpeed(tickerItemsInternalWrapper.clientWidth);
|
|
8967
|
+
this.setSpeed(tickerItemsInternalWrapper.clientWidth, wrapper.clientWidth);
|
|
8947
8968
|
});
|
|
8948
8969
|
}
|
|
8949
8970
|
render() {
|
|
8950
|
-
return (hAsync("div", { class: 'container space-below-' + this.spaceBelow }, hAsync("div", null, hAsync("div", { class: "banner" }, hAsync("div", { class: 'main-message-wrap background-colour-' + this.secondaryColour + ' text-colour-' + this.secondaryTextColour }, this.mainMessage), hAsync("div", { class: 'ticker-wrap background-colour-' + this.primaryColour + ' text-colour-' + this.primaryTextColour }, hAsync("div", { id: "sleeve_1", class: "sleeve" }, hAsync("slot", { name: "ticker-items" })), hAsync("div", { id: "sleeve_2", class: "sleeve sleeve-delayed-copy" }))))));
|
|
8971
|
+
return (hAsync("div", { class: 'container space-below-' + this.spaceBelow }, hAsync("div", null, hAsync("div", { class: "banner" }, hAsync("div", { class: 'main-message-wrap background-colour-' + this.secondaryColour + ' text-colour-' + this.secondaryTextColour }, this.mainMessage), hAsync("div", { class: 'ticker-wrap background-colour-' + this.primaryColour + ' text-colour-' + this.primaryTextColour }, hAsync("div", { id: "sleeve_1", class: "sleeve" }, hAsync("slot", { name: "ticker-items" })), hAsync("div", { id: "sleeve_2", class: "sleeve sleeve-delayed-copy" }), hAsync("div", { id: "sleeve_3", class: "sleeve sleeve-delayed-copy" }), hAsync("div", { id: "sleeve_4", class: "sleeve sleeve-delayed-copy" }))))));
|
|
8951
8972
|
}
|
|
8952
8973
|
get host() { return getElement(this); }
|
|
8953
8974
|
static get style() { return biggiveTotalizerCss; }
|
|
@@ -8968,7 +8989,7 @@ class BiggiveTotalizer {
|
|
|
8968
8989
|
}; }
|
|
8969
8990
|
}
|
|
8970
8991
|
|
|
8971
|
-
const biggiveTotalizerTickerItemCss = "/*!@a*/a.sc-biggive-totalizer-ticker-item{color:inherit;text-decoration:underline}/*!@a:hover*/a.sc-biggive-totalizer-ticker-item:hover{text-decoration:none}/*!@:host*/.sc-biggive-totalizer-ticker-item-h{display:contents}/*!@.ticker-item*/.ticker-item.sc-biggive-totalizer-ticker-item{margin-right:
|
|
8992
|
+
const biggiveTotalizerTickerItemCss = "/*!@a*/a.sc-biggive-totalizer-ticker-item{color:inherit;text-decoration:underline}/*!@a:hover*/a.sc-biggive-totalizer-ticker-item:hover{text-decoration:none}/*!@:host*/.sc-biggive-totalizer-ticker-item-h{display:contents}/*!@.ticker-item*/.ticker-item.sc-biggive-totalizer-ticker-item{margin-right:30px}";
|
|
8972
8993
|
|
|
8973
8994
|
class BiggiveTotalizerTickerItem {
|
|
8974
8995
|
constructor(hostRef) {
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@biggive/components",
|
|
3
3
|
"_comment": "Version number below is automatically replaced during CircleCI build.",
|
|
4
|
-
"version": "
|
|
4
|
+
"version": "202312031231.0.0",
|
|
5
5
|
"description": "Big Give Components",
|
|
6
6
|
"main": "dist/index.cjs.js",
|
|
7
7
|
"module": "dist/index.js",
|
package/readme.md
CHANGED
|
@@ -106,7 +106,7 @@ For now:
|
|
|
106
106
|
addition to an `angular.json` `"styles"` key:
|
|
107
107
|
`"node_modules/@biggive/components/dist/biggive/assets/fonts/EuclidTriangle/stylesheet.css"`
|
|
108
108
|
* Images are also copied with a Stencil `copy` task, and fixed references use getAssetPath() plus
|
|
109
|
-
|
|
109
|
+
a path, e.g. `getAssetPath('assets/images/banner.png')`. See the
|
|
110
110
|
[Stencil asset docs](https://stenciljs.com/docs/assets) for more on this. Angular seems to be
|
|
111
111
|
able to use this without `setAssetPath()` if we config its `"assets"` key to put files in the same
|
|
112
112
|
folder as the app's own images. This is the approach taken on [this proof of concept branch](https://github.com/thebiggive/donate-frontend/tree/COM-5-proof-of-concept).
|