@biggive/components 202308221410.0.0 → 202308250924.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.
@@ -202,7 +202,11 @@ const BiggiveButton = class {
202
202
  this.buttonId = undefined;
203
203
  }
204
204
  render() {
205
- return (index.h("div", { class: 'container space-below-' + this.spaceBelow + ' centered-' + this.centered }, index.h("a", { href: this.url, target: this.openInNewTab ? '_blank' : '_self', id: this.buttonId, class: 'button button-' + this.colourScheme + ' full-width-' + this.fullWidth.toString() + ' size-' + this.size + ' rounded-' + this.rounded.toString() }, index.h("span", { onClick: this.handleButtonClick }, this.label))));
205
+ // We always want to have a href so that browsers will see this as a link and allow clicking with keybard.
206
+ // If there's no or an empty href then it isn't possible to click by keyboard and we would have to handle keyboard
207
+ // interaction separately.
208
+ const href = this.url || 'javascript:void(0);';
209
+ return (index.h("div", { class: 'container space-below-' + this.spaceBelow + ' centered-' + this.centered }, index.h("a", { role: "button", href: href, target: this.openInNewTab ? '_blank' : '_self', id: this.buttonId, class: 'button button-' + this.colourScheme + ' full-width-' + this.fullWidth.toString() + ' size-' + this.size + ' rounded-' + this.rounded.toString() }, index.h("span", { onClick: this.handleButtonClick }, this.label))));
206
210
  }
207
211
  };
208
212
  BiggiveButton.style = biggiveButtonCss;
@@ -550,7 +554,7 @@ const BiggiveCarousel = class {
550
554
  };
551
555
  BiggiveCarousel.style = biggiveCarouselCss;
552
556
 
553
- const biggiveCookieBannerCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.background-colour-hover-primary:hover,.background-colour-primary{background-color:#2C089B}.background-colour-hover-secondary:hover,.background-colour-secondary{background-color:#2AF135}.background-colour-hover-tertiary:hover,.background-colour-tertiary{background-color:#FF7272}.background-colour-hover-brand-1:hover,.background-colour-brand-1{background-color:#B30510}.background-colour-hover-brand-2:hover,.background-colour-brand-2{background-color:#6E0887}.background-colour-hover-brand-3:hover,.background-colour-brand-3{background-color:#50B400}.background-colour-hover-brand-4:hover,.background-colour-brand-4{background-color:#FFE500}.background-colour-hover-brand-5:hover,.background-colour-brand-5{background-color:#F07D00}.background-colour-hover-brand-6:hover,.background-colour-brand-6{background-color:#62CFC9}.background-colour-hover-brand-afa-pink:hover,.background-colour-brand-afa-pink{background-color:#BF387D}.background-colour-hover-white:hover,.background-colour-white{background-color:#FFFFFF}.background-colour-hover-black:hover,.background-colour-black{background-color:#000000}.background-colour-hover-white:hover,.background-colour-white{background-color:#FFFFFF}.background-colour-hover-grey-extra-light:hover,.background-colour-grey-extra-light{background-color:#D7D7D7}.background-colour-hover-grey-light:hover,.background-colour-grey-light{background-color:#E8E8E8}.background-colour-hover-grey-medium:hover,.background-colour-grey-medium{background-color:#8A8A8A}.background-colour-hover-grey-dark:hover,.background-colour-grey-dark{background-color:#4A4A4A}.fill-primary{fill:#2C089B}.fill-secondary{fill:#2AF135}.fill-tertiary{fill:#FF7272}.fill-brand-1{fill:#B30510}.fill-brand-2{fill:#6E0887}.fill-brand-3{fill:#50B400}.fill-brand-4{fill:#FFE500}.fill-brand-5{fill:#F07D00}.fill-brand-6{fill:#CBC8C8}.fill-brand-afa-pink{fill:#BF387D}.fill-brand-mhf-turquoise{fill:#62CFC9}.fill-white{fill:#FFFFFF}.fill-black{fill:#000000}.fill-grey-extra-light{fill:#D7D7D7}.fill-grey-light{fill:#E8E8E8}.fill-grey-medium{fill:#8A8A8A}.fill-grey-dark{fill:#4A4A4A}.fill-red{fill:red}.space-above-0{margin-top:0}.space-above-1{margin-top:5px}.space-above-2{margin-top:10px}.space-above-3{margin-top:15px}.space-above-4{margin-top:30px}.space-above-5{margin-top:45px}.space-above-6{margin-top:60px}.space-below-0{margin-bottom:0}.space-below-1{margin-bottom:5px}.space-below-2{margin-bottom:10px}.space-below-3{margin-bottom:15px}.space-below-4{margin-bottom:30px}.space-below-5{margin-bottom:45px}.space-below-6{margin-bottom:60px}.text-colour-hover-primary:hover,.text-colour-primary{color:#2C089B}.text-colour-hover-secondary:hover,.text-colour-secondary{color:#2AF135}.text-colour-hover-tertiary:hover,.text-colour-tertiary{color:#FF7272}.text-colour-hover-brand-1:hover,.text-colour-brand-1{color:#B30510}.text-colour-hover-brand-2:hover,.text-colour-brand-2{color:#6E0887}.text-colour-hover-brand-3:hover,.text-colour-brand-3{color:#50B400}.text-colour-hover-brand-4:hover,.text-colour-brand-4{color:#FFE500}.text-colour-hover-brand-5:hover,.text-colour-brand-5{color:#F07D00}.text-colour-hover-brand-6:hover,.text-colour-brand-6{color:#CBC8C8}.text-colour-hover-brand-afa-pink:hover,.text-colour-brand-afa-pink{color:#BF387D}.text-colour-hover-white:hover,.text-colour-white{color:#FFFFFF}.text-colour-hover-black:hover,.text-colour-black{color:#000000}.text-colour-hover-grey-extra-light:hover,.text-colour-grey-extra-light{color:#D7D7D7}.text-colour-hover-grey-light:hover,.text-colour-grey-light{color:#E8E8E8}.text-colour-hover-grey-medium:hover,.text-colour-grey-medium{color:#8A8A8A}.text-colour-hover-grey-dark:hover,.text-colour-grey-dark{color:#4A4A4A}:host{display:contents}h2:first-child{margin-top:0}div.cooke-consent-container{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;font-size:13px;line-height:17px;border-radius:10px;background:white;border:1px solid black;max-width:500px;padding:1em}div.button-group{margin-top:1em;display:flex;justify-content:space-evenly;width:100%;flex-direction:column;gap:1em}@media screen and (min-width: 475px){div.button-group{flex-direction:row-reverse}}";
557
+ const biggiveCookieBannerCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.background-colour-hover-primary:hover,.background-colour-primary{background-color:#2C089B}.background-colour-hover-secondary:hover,.background-colour-secondary{background-color:#2AF135}.background-colour-hover-tertiary:hover,.background-colour-tertiary{background-color:#FF7272}.background-colour-hover-brand-1:hover,.background-colour-brand-1{background-color:#B30510}.background-colour-hover-brand-2:hover,.background-colour-brand-2{background-color:#6E0887}.background-colour-hover-brand-3:hover,.background-colour-brand-3{background-color:#50B400}.background-colour-hover-brand-4:hover,.background-colour-brand-4{background-color:#FFE500}.background-colour-hover-brand-5:hover,.background-colour-brand-5{background-color:#F07D00}.background-colour-hover-brand-6:hover,.background-colour-brand-6{background-color:#62CFC9}.background-colour-hover-brand-afa-pink:hover,.background-colour-brand-afa-pink{background-color:#BF387D}.background-colour-hover-white:hover,.background-colour-white{background-color:#FFFFFF}.background-colour-hover-black:hover,.background-colour-black{background-color:#000000}.background-colour-hover-white:hover,.background-colour-white{background-color:#FFFFFF}.background-colour-hover-grey-extra-light:hover,.background-colour-grey-extra-light{background-color:#D7D7D7}.background-colour-hover-grey-light:hover,.background-colour-grey-light{background-color:#E8E8E8}.background-colour-hover-grey-medium:hover,.background-colour-grey-medium{background-color:#8A8A8A}.background-colour-hover-grey-dark:hover,.background-colour-grey-dark{background-color:#4A4A4A}.fill-primary{fill:#2C089B}.fill-secondary{fill:#2AF135}.fill-tertiary{fill:#FF7272}.fill-brand-1{fill:#B30510}.fill-brand-2{fill:#6E0887}.fill-brand-3{fill:#50B400}.fill-brand-4{fill:#FFE500}.fill-brand-5{fill:#F07D00}.fill-brand-6{fill:#CBC8C8}.fill-brand-afa-pink{fill:#BF387D}.fill-brand-mhf-turquoise{fill:#62CFC9}.fill-white{fill:#FFFFFF}.fill-black{fill:#000000}.fill-grey-extra-light{fill:#D7D7D7}.fill-grey-light{fill:#E8E8E8}.fill-grey-medium{fill:#8A8A8A}.fill-grey-dark{fill:#4A4A4A}.fill-red{fill:red}.space-above-0{margin-top:0}.space-above-1{margin-top:5px}.space-above-2{margin-top:10px}.space-above-3{margin-top:15px}.space-above-4{margin-top:30px}.space-above-5{margin-top:45px}.space-above-6{margin-top:60px}.space-below-0{margin-bottom:0}.space-below-1{margin-bottom:5px}.space-below-2{margin-bottom:10px}.space-below-3{margin-bottom:15px}.space-below-4{margin-bottom:30px}.space-below-5{margin-bottom:45px}.space-below-6{margin-bottom:60px}.text-colour-hover-primary:hover,.text-colour-primary{color:#2C089B}.text-colour-hover-secondary:hover,.text-colour-secondary{color:#2AF135}.text-colour-hover-tertiary:hover,.text-colour-tertiary{color:#FF7272}.text-colour-hover-brand-1:hover,.text-colour-brand-1{color:#B30510}.text-colour-hover-brand-2:hover,.text-colour-brand-2{color:#6E0887}.text-colour-hover-brand-3:hover,.text-colour-brand-3{color:#50B400}.text-colour-hover-brand-4:hover,.text-colour-brand-4{color:#FFE500}.text-colour-hover-brand-5:hover,.text-colour-brand-5{color:#F07D00}.text-colour-hover-brand-6:hover,.text-colour-brand-6{color:#CBC8C8}.text-colour-hover-brand-afa-pink:hover,.text-colour-brand-afa-pink{color:#BF387D}.text-colour-hover-white:hover,.text-colour-white{color:#FFFFFF}.text-colour-hover-black:hover,.text-colour-black{color:#000000}.text-colour-hover-grey-extra-light:hover,.text-colour-grey-extra-light{color:#D7D7D7}.text-colour-hover-grey-light:hover,.text-colour-grey-light{color:#E8E8E8}.text-colour-hover-grey-medium:hover,.text-colour-grey-medium{color:#8A8A8A}.text-colour-hover-grey-dark:hover,.text-colour-grey-dark{color:#4A4A4A}:host{display:contents}h2:first-child{margin-top:0}div.cooke-consent-container{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;font-size:13px;line-height:17px;border-radius:10px;background:white;border:1px solid black;max-width:500px;padding:1em}div.button-group{margin-top:1em;display:flex;justify-content:space-evenly;width:100%;flex-direction:column;gap:1em}@media screen and (min-width: 475px){div.button-group{flex-direction:row-reverse}}biggive-popup{font-size:17px;line-height:24px}biggive-popup div.content h5{border-bottom:2px solid black;max-width:25em;margin-bottom:5px}biggive-popup div.content div.radio-group{margin-bottom:30px}";
554
558
 
555
559
  const BiggiveCookieBanner = class {
556
560
  constructor(hostRef) {
@@ -562,7 +566,7 @@ const BiggiveCookieBanner = class {
562
566
  const elementById = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('cookie-preferences-popup');
563
567
  elementById.openFromOutside();
564
568
  };
565
- this.handleSavePreferencesClick = () => {
569
+ this.handleAcceptSelectedCookies = () => {
566
570
  var _a, _b;
567
571
  const elementById = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('cookie-preferences-popup');
568
572
  elementById.closeFromOutside();
@@ -578,7 +582,7 @@ const BiggiveCookieBanner = class {
578
582
  this.blogUriPrefix = undefined;
579
583
  }
580
584
  render() {
581
- return (index.h("div", { class: "cooke-consent-container" }, index.h("biggive-popup", { id: "cookie-preferences-popup" }, index.h("h4", { class: "space-above-0 space-below-3 text-colour-primary" }, "Manage your cookie preferences"), index.h("form", null, index.h("h5", null, "Essential (always required)"), index.h("input", { type: "radio", name: "necassary", id: "necassary-off", disabled: true }), index.h("label", { htmlFor: "necassary-on" }, "Off"), index.h("input", { type: "radio", name: "necassary", id: "necassary-on", disabled: true, checked: true }), index.h("label", { htmlFor: "necassary-on" }, "On"), index.h("h5", null, "Marketing"), index.h("input", { type: "radio", name: "marketing", id: "marketing-off", checked: true }), index.h("label", { htmlFor: "marketing-off" }, "Off"), index.h("input", { type: "radio", name: "marketing", id: "marketing-on" }), index.h("label", { htmlFor: "marketing-on" }, "On"), index.h("hr", null), index.h("biggive-button", { "space-below": "0", "space-above": "2", "colour-scheme": "secondary", "is-past-campaign": "false", "is-future-campaign": "false", label: "Save preferences", "open-in-new-tab": "false", "full-width": "false", size: "small", rounded: false, centered: false, "button-id": "save-preferences-button", onClick: this.handleSavePreferencesClick }))), index.h("h2", null, "Our website uses cookies"), index.h("p", null, "We use some essential cookies to make our website work. We'd also like to share data with our analytics platform and use analytics cookies to understand how you use the website and make improvements."), index.h("p", null, index.h("a", { href: this.blogUriPrefix + '/privacy' }, "Find out more in our Privacy Policy")), index.h("div", { class: "button-group" }, index.h("biggive-button", { onClick: this.handleAcceptAllClick, "space-below": "0", "colour-scheme": "secondary", "is-past-campaign": "false", "is-future-campaign": "false", label: "Accept All", "open-in-new-tab": "false", "full-width": "true", size: "medium", rounded: false, centered: false, "button-id": "accept-all-button" }), index.h("biggive-button", { onClick: this.handleChoosePrefencesClick, "space-below": "0", "colour-scheme": "grey-light", "is-past-campaign": "false", "is-future-campaign": "false", label: "Choose Preferences", "open-in-new-tab": "false", "full-width": "true", size: "medium", rounded: false, centered: false, "button-id": "choose-preferences-button" }))));
585
+ return (index.h("div", { class: "cooke-consent-container" }, index.h("biggive-popup", { id: "cookie-preferences-popup" }, index.h("div", { class: "content" }, index.h("h4", { class: "space-above-0 space-below-3 text-colour-primary" }, "Manage your cookie preferences"), index.h("form", null, index.h("div", { class: "radio-group" }, index.h("h5", null, "Essential (always required)"), index.h("input", { type: "radio", name: "necassary", id: "necassary-off", disabled: true }), index.h("label", { htmlFor: "necassary-on" }, "Off"), index.h("input", { type: "radio", name: "necassary", id: "necassary-on", disabled: true, checked: true }), index.h("label", { htmlFor: "necassary-on" }, "On")), index.h("div", { class: "radio-group" }, index.h("h5", null, "Marketing"), index.h("input", { type: "radio", name: "marketing", id: "marketing-off", checked: true }), index.h("label", { htmlFor: "marketing-off" }, "Off"), index.h("input", { type: "radio", name: "marketing", id: "marketing-on" }), index.h("label", { htmlFor: "marketing-on" }, "On")), index.h("biggive-button", { "space-below": "0", "space-above": "2", "colour-scheme": "secondary", "is-past-campaign": "false", "is-future-campaign": "false", label: "Accept Selected Cookies", "open-in-new-tab": "false", "full-width": "false", size: "small", rounded: false, centered: false, "button-id": "accept-selected-button", onClick: this.handleAcceptSelectedCookies })))), index.h("h2", null, "Our website uses cookies"), index.h("p", null, "We use some essential cookies to make our website work. We'd also like to share data with our analytics platform and use analytics cookies to understand how you use the website and make improvements."), index.h("p", null, index.h("a", { href: this.blogUriPrefix + '/privacy' }, "Find out more in our Privacy Policy")), index.h("div", { class: "button-group" }, index.h("biggive-button", { onClick: this.handleAcceptAllClick, "space-below": "0", "colour-scheme": "secondary", "is-past-campaign": "false", "is-future-campaign": "false", label: "Accept All", "open-in-new-tab": "false", "full-width": "true", size: "medium", rounded: false, centered: false, "button-id": "accept-all-button" }), index.h("biggive-button", { onClick: this.handleChoosePrefencesClick, "space-below": "0", "colour-scheme": "grey-light", "is-past-campaign": "false", "is-future-campaign": "false", label: "Choose Preferences", "open-in-new-tab": "false", "full-width": "true", size: "medium", rounded: false, centered: false, "button-id": "choose-preferences-button" }))));
582
586
  }
583
587
  get el() { return index.getElement(this); }
584
588
  };
@@ -16,7 +16,11 @@ export class BiggiveButton {
16
16
  this.buttonId = undefined;
17
17
  }
18
18
  render() {
19
- return (h("div", { class: 'container space-below-' + this.spaceBelow + ' centered-' + this.centered }, h("a", { href: this.url, target: this.openInNewTab ? '_blank' : '_self', id: this.buttonId, class: 'button button-' + this.colourScheme + ' full-width-' + this.fullWidth.toString() + ' size-' + this.size + ' rounded-' + this.rounded.toString() }, h("span", { onClick: this.handleButtonClick }, this.label))));
19
+ // We always want to have a href so that browsers will see this as a link and allow clicking with keybard.
20
+ // If there's no or an empty href then it isn't possible to click by keyboard and we would have to handle keyboard
21
+ // interaction separately.
22
+ const href = this.url || 'javascript:void(0);';
23
+ return (h("div", { class: 'container space-below-' + this.spaceBelow + ' centered-' + this.centered }, h("a", { role: "button", href: href, target: this.openInNewTab ? '_blank' : '_self', id: this.buttonId, class: 'button button-' + this.colourScheme + ' full-width-' + this.fullWidth.toString() + ' size-' + this.size + ' rounded-' + this.rounded.toString() }, h("span", { onClick: this.handleButtonClick }, this.label))));
20
24
  }
21
25
  static get is() { return "biggive-button"; }
22
26
  static get encapsulation() { return "shadow"; }
@@ -90,8 +94,8 @@ export class BiggiveButton {
90
94
  "type": "string",
91
95
  "mutable": false,
92
96
  "complexType": {
93
- "original": "string",
94
- "resolved": "string",
97
+ "original": "string | undefined",
98
+ "resolved": "string | undefined",
95
99
  "references": {}
96
100
  },
97
101
  "required": false,
@@ -335,4 +335,17 @@ div.button-group {
335
335
  div.button-group {
336
336
  flex-direction: row-reverse;
337
337
  }
338
+ }
339
+
340
+ biggive-popup {
341
+ font-size: 17px;
342
+ line-height: 24px;
343
+ }
344
+ biggive-popup div.content h5 {
345
+ border-bottom: 2px solid black;
346
+ max-width: 25em;
347
+ margin-bottom: 5px;
348
+ }
349
+ biggive-popup div.content div.radio-group {
350
+ margin-bottom: 30px;
338
351
  }
@@ -6,7 +6,7 @@ export class BiggiveCookieBanner {
6
6
  const elementById = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('cookie-preferences-popup');
7
7
  elementById.openFromOutside();
8
8
  };
9
- this.handleSavePreferencesClick = () => {
9
+ this.handleAcceptSelectedCookies = () => {
10
10
  var _a, _b;
11
11
  const elementById = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('cookie-preferences-popup');
12
12
  elementById.closeFromOutside();
@@ -22,7 +22,7 @@ export class BiggiveCookieBanner {
22
22
  this.blogUriPrefix = undefined;
23
23
  }
24
24
  render() {
25
- return (h("div", { class: "cooke-consent-container" }, h("biggive-popup", { id: "cookie-preferences-popup" }, h("h4", { class: "space-above-0 space-below-3 text-colour-primary" }, "Manage your cookie preferences"), h("form", null, h("h5", null, "Essential (always required)"), h("input", { type: "radio", name: "necassary", id: "necassary-off", disabled: true }), h("label", { htmlFor: "necassary-on" }, "Off"), h("input", { type: "radio", name: "necassary", id: "necassary-on", disabled: true, checked: true }), h("label", { htmlFor: "necassary-on" }, "On"), h("h5", null, "Marketing"), h("input", { type: "radio", name: "marketing", id: "marketing-off", checked: true }), h("label", { htmlFor: "marketing-off" }, "Off"), h("input", { type: "radio", name: "marketing", id: "marketing-on" }), h("label", { htmlFor: "marketing-on" }, "On"), h("hr", null), h("biggive-button", { "space-below": "0", "space-above": "2", "colour-scheme": "secondary", "is-past-campaign": "false", "is-future-campaign": "false", label: "Save preferences", "open-in-new-tab": "false", "full-width": "false", size: "small", rounded: false, centered: false, "button-id": "save-preferences-button", onClick: this.handleSavePreferencesClick }))), h("h2", null, "Our website uses cookies"), h("p", null, "We use some essential cookies to make our website work. We'd also like to share data with our analytics platform and use analytics cookies to understand how you use the website and make improvements."), h("p", null, h("a", { href: this.blogUriPrefix + '/privacy' }, "Find out more in our Privacy Policy")), h("div", { class: "button-group" }, h("biggive-button", { onClick: this.handleAcceptAllClick, "space-below": "0", "colour-scheme": "secondary", "is-past-campaign": "false", "is-future-campaign": "false", label: "Accept All", "open-in-new-tab": "false", "full-width": "true", size: "medium", rounded: false, centered: false, "button-id": "accept-all-button" }), h("biggive-button", { onClick: this.handleChoosePrefencesClick, "space-below": "0", "colour-scheme": "grey-light", "is-past-campaign": "false", "is-future-campaign": "false", label: "Choose Preferences", "open-in-new-tab": "false", "full-width": "true", size: "medium", rounded: false, centered: false, "button-id": "choose-preferences-button" }))));
25
+ return (h("div", { class: "cooke-consent-container" }, h("biggive-popup", { id: "cookie-preferences-popup" }, h("div", { class: "content" }, h("h4", { class: "space-above-0 space-below-3 text-colour-primary" }, "Manage your cookie preferences"), h("form", null, h("div", { class: "radio-group" }, h("h5", null, "Essential (always required)"), h("input", { type: "radio", name: "necassary", id: "necassary-off", disabled: true }), h("label", { htmlFor: "necassary-on" }, "Off"), h("input", { type: "radio", name: "necassary", id: "necassary-on", disabled: true, checked: true }), h("label", { htmlFor: "necassary-on" }, "On")), h("div", { class: "radio-group" }, h("h5", null, "Marketing"), h("input", { type: "radio", name: "marketing", id: "marketing-off", checked: true }), h("label", { htmlFor: "marketing-off" }, "Off"), h("input", { type: "radio", name: "marketing", id: "marketing-on" }), h("label", { htmlFor: "marketing-on" }, "On")), h("biggive-button", { "space-below": "0", "space-above": "2", "colour-scheme": "secondary", "is-past-campaign": "false", "is-future-campaign": "false", label: "Accept Selected Cookies", "open-in-new-tab": "false", "full-width": "false", size: "small", rounded: false, centered: false, "button-id": "accept-selected-button", onClick: this.handleAcceptSelectedCookies })))), h("h2", null, "Our website uses cookies"), h("p", null, "We use some essential cookies to make our website work. We'd also like to share data with our analytics platform and use analytics cookies to understand how you use the website and make improvements."), h("p", null, h("a", { href: this.blogUriPrefix + '/privacy' }, "Find out more in our Privacy Policy")), h("div", { class: "button-group" }, h("biggive-button", { onClick: this.handleAcceptAllClick, "space-below": "0", "colour-scheme": "secondary", "is-past-campaign": "false", "is-future-campaign": "false", label: "Accept All", "open-in-new-tab": "false", "full-width": "true", size: "medium", rounded: false, centered: false, "button-id": "accept-all-button" }), h("biggive-button", { onClick: this.handleChoosePrefencesClick, "space-below": "0", "colour-scheme": "grey-light", "is-past-campaign": "false", "is-future-campaign": "false", label: "Choose Preferences", "open-in-new-tab": "false", "full-width": "true", size: "medium", rounded: false, centered: false, "button-id": "choose-preferences-button" }))));
26
26
  }
27
27
  static get is() { return "biggive-cookie-banner"; }
28
28
  static get encapsulation() { return "shadow"; }
@@ -23,7 +23,11 @@ const BiggiveButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
23
23
  this.buttonId = undefined;
24
24
  }
25
25
  render() {
26
- return (h("div", { class: 'container space-below-' + this.spaceBelow + ' centered-' + this.centered }, h("a", { href: this.url, target: this.openInNewTab ? '_blank' : '_self', id: this.buttonId, class: 'button button-' + this.colourScheme + ' full-width-' + this.fullWidth.toString() + ' size-' + this.size + ' rounded-' + this.rounded.toString() }, h("span", { onClick: this.handleButtonClick }, this.label))));
26
+ // We always want to have a href so that browsers will see this as a link and allow clicking with keybard.
27
+ // If there's no or an empty href then it isn't possible to click by keyboard and we would have to handle keyboard
28
+ // interaction separately.
29
+ const href = this.url || 'javascript:void(0);';
30
+ return (h("div", { class: 'container space-below-' + this.spaceBelow + ' centered-' + this.centered }, h("a", { role: "button", href: href, target: this.openInNewTab ? '_blank' : '_self', id: this.buttonId, class: 'button button-' + this.colourScheme + ' full-width-' + this.fullWidth.toString() + ' size-' + this.size + ' rounded-' + this.rounded.toString() }, h("span", { onClick: this.handleButtonClick }, this.label))));
27
31
  }
28
32
  static get style() { return biggiveButtonCss; }
29
33
  }, [1, "biggive-button", {
@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/i
2
2
  import { d as defineCustomElement$3 } from './biggive-button2.js';
3
3
  import { d as defineCustomElement$2 } from './biggive-popup2.js';
4
4
 
5
- const biggiveCookieBannerCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.background-colour-hover-primary:hover,.background-colour-primary{background-color:#2C089B}.background-colour-hover-secondary:hover,.background-colour-secondary{background-color:#2AF135}.background-colour-hover-tertiary:hover,.background-colour-tertiary{background-color:#FF7272}.background-colour-hover-brand-1:hover,.background-colour-brand-1{background-color:#B30510}.background-colour-hover-brand-2:hover,.background-colour-brand-2{background-color:#6E0887}.background-colour-hover-brand-3:hover,.background-colour-brand-3{background-color:#50B400}.background-colour-hover-brand-4:hover,.background-colour-brand-4{background-color:#FFE500}.background-colour-hover-brand-5:hover,.background-colour-brand-5{background-color:#F07D00}.background-colour-hover-brand-6:hover,.background-colour-brand-6{background-color:#62CFC9}.background-colour-hover-brand-afa-pink:hover,.background-colour-brand-afa-pink{background-color:#BF387D}.background-colour-hover-white:hover,.background-colour-white{background-color:#FFFFFF}.background-colour-hover-black:hover,.background-colour-black{background-color:#000000}.background-colour-hover-white:hover,.background-colour-white{background-color:#FFFFFF}.background-colour-hover-grey-extra-light:hover,.background-colour-grey-extra-light{background-color:#D7D7D7}.background-colour-hover-grey-light:hover,.background-colour-grey-light{background-color:#E8E8E8}.background-colour-hover-grey-medium:hover,.background-colour-grey-medium{background-color:#8A8A8A}.background-colour-hover-grey-dark:hover,.background-colour-grey-dark{background-color:#4A4A4A}.fill-primary{fill:#2C089B}.fill-secondary{fill:#2AF135}.fill-tertiary{fill:#FF7272}.fill-brand-1{fill:#B30510}.fill-brand-2{fill:#6E0887}.fill-brand-3{fill:#50B400}.fill-brand-4{fill:#FFE500}.fill-brand-5{fill:#F07D00}.fill-brand-6{fill:#CBC8C8}.fill-brand-afa-pink{fill:#BF387D}.fill-brand-mhf-turquoise{fill:#62CFC9}.fill-white{fill:#FFFFFF}.fill-black{fill:#000000}.fill-grey-extra-light{fill:#D7D7D7}.fill-grey-light{fill:#E8E8E8}.fill-grey-medium{fill:#8A8A8A}.fill-grey-dark{fill:#4A4A4A}.fill-red{fill:red}.space-above-0{margin-top:0}.space-above-1{margin-top:5px}.space-above-2{margin-top:10px}.space-above-3{margin-top:15px}.space-above-4{margin-top:30px}.space-above-5{margin-top:45px}.space-above-6{margin-top:60px}.space-below-0{margin-bottom:0}.space-below-1{margin-bottom:5px}.space-below-2{margin-bottom:10px}.space-below-3{margin-bottom:15px}.space-below-4{margin-bottom:30px}.space-below-5{margin-bottom:45px}.space-below-6{margin-bottom:60px}.text-colour-hover-primary:hover,.text-colour-primary{color:#2C089B}.text-colour-hover-secondary:hover,.text-colour-secondary{color:#2AF135}.text-colour-hover-tertiary:hover,.text-colour-tertiary{color:#FF7272}.text-colour-hover-brand-1:hover,.text-colour-brand-1{color:#B30510}.text-colour-hover-brand-2:hover,.text-colour-brand-2{color:#6E0887}.text-colour-hover-brand-3:hover,.text-colour-brand-3{color:#50B400}.text-colour-hover-brand-4:hover,.text-colour-brand-4{color:#FFE500}.text-colour-hover-brand-5:hover,.text-colour-brand-5{color:#F07D00}.text-colour-hover-brand-6:hover,.text-colour-brand-6{color:#CBC8C8}.text-colour-hover-brand-afa-pink:hover,.text-colour-brand-afa-pink{color:#BF387D}.text-colour-hover-white:hover,.text-colour-white{color:#FFFFFF}.text-colour-hover-black:hover,.text-colour-black{color:#000000}.text-colour-hover-grey-extra-light:hover,.text-colour-grey-extra-light{color:#D7D7D7}.text-colour-hover-grey-light:hover,.text-colour-grey-light{color:#E8E8E8}.text-colour-hover-grey-medium:hover,.text-colour-grey-medium{color:#8A8A8A}.text-colour-hover-grey-dark:hover,.text-colour-grey-dark{color:#4A4A4A}:host{display:contents}h2:first-child{margin-top:0}div.cooke-consent-container{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;font-size:13px;line-height:17px;border-radius:10px;background:white;border:1px solid black;max-width:500px;padding:1em}div.button-group{margin-top:1em;display:flex;justify-content:space-evenly;width:100%;flex-direction:column;gap:1em}@media screen and (min-width: 475px){div.button-group{flex-direction:row-reverse}}";
5
+ const biggiveCookieBannerCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.background-colour-hover-primary:hover,.background-colour-primary{background-color:#2C089B}.background-colour-hover-secondary:hover,.background-colour-secondary{background-color:#2AF135}.background-colour-hover-tertiary:hover,.background-colour-tertiary{background-color:#FF7272}.background-colour-hover-brand-1:hover,.background-colour-brand-1{background-color:#B30510}.background-colour-hover-brand-2:hover,.background-colour-brand-2{background-color:#6E0887}.background-colour-hover-brand-3:hover,.background-colour-brand-3{background-color:#50B400}.background-colour-hover-brand-4:hover,.background-colour-brand-4{background-color:#FFE500}.background-colour-hover-brand-5:hover,.background-colour-brand-5{background-color:#F07D00}.background-colour-hover-brand-6:hover,.background-colour-brand-6{background-color:#62CFC9}.background-colour-hover-brand-afa-pink:hover,.background-colour-brand-afa-pink{background-color:#BF387D}.background-colour-hover-white:hover,.background-colour-white{background-color:#FFFFFF}.background-colour-hover-black:hover,.background-colour-black{background-color:#000000}.background-colour-hover-white:hover,.background-colour-white{background-color:#FFFFFF}.background-colour-hover-grey-extra-light:hover,.background-colour-grey-extra-light{background-color:#D7D7D7}.background-colour-hover-grey-light:hover,.background-colour-grey-light{background-color:#E8E8E8}.background-colour-hover-grey-medium:hover,.background-colour-grey-medium{background-color:#8A8A8A}.background-colour-hover-grey-dark:hover,.background-colour-grey-dark{background-color:#4A4A4A}.fill-primary{fill:#2C089B}.fill-secondary{fill:#2AF135}.fill-tertiary{fill:#FF7272}.fill-brand-1{fill:#B30510}.fill-brand-2{fill:#6E0887}.fill-brand-3{fill:#50B400}.fill-brand-4{fill:#FFE500}.fill-brand-5{fill:#F07D00}.fill-brand-6{fill:#CBC8C8}.fill-brand-afa-pink{fill:#BF387D}.fill-brand-mhf-turquoise{fill:#62CFC9}.fill-white{fill:#FFFFFF}.fill-black{fill:#000000}.fill-grey-extra-light{fill:#D7D7D7}.fill-grey-light{fill:#E8E8E8}.fill-grey-medium{fill:#8A8A8A}.fill-grey-dark{fill:#4A4A4A}.fill-red{fill:red}.space-above-0{margin-top:0}.space-above-1{margin-top:5px}.space-above-2{margin-top:10px}.space-above-3{margin-top:15px}.space-above-4{margin-top:30px}.space-above-5{margin-top:45px}.space-above-6{margin-top:60px}.space-below-0{margin-bottom:0}.space-below-1{margin-bottom:5px}.space-below-2{margin-bottom:10px}.space-below-3{margin-bottom:15px}.space-below-4{margin-bottom:30px}.space-below-5{margin-bottom:45px}.space-below-6{margin-bottom:60px}.text-colour-hover-primary:hover,.text-colour-primary{color:#2C089B}.text-colour-hover-secondary:hover,.text-colour-secondary{color:#2AF135}.text-colour-hover-tertiary:hover,.text-colour-tertiary{color:#FF7272}.text-colour-hover-brand-1:hover,.text-colour-brand-1{color:#B30510}.text-colour-hover-brand-2:hover,.text-colour-brand-2{color:#6E0887}.text-colour-hover-brand-3:hover,.text-colour-brand-3{color:#50B400}.text-colour-hover-brand-4:hover,.text-colour-brand-4{color:#FFE500}.text-colour-hover-brand-5:hover,.text-colour-brand-5{color:#F07D00}.text-colour-hover-brand-6:hover,.text-colour-brand-6{color:#CBC8C8}.text-colour-hover-brand-afa-pink:hover,.text-colour-brand-afa-pink{color:#BF387D}.text-colour-hover-white:hover,.text-colour-white{color:#FFFFFF}.text-colour-hover-black:hover,.text-colour-black{color:#000000}.text-colour-hover-grey-extra-light:hover,.text-colour-grey-extra-light{color:#D7D7D7}.text-colour-hover-grey-light:hover,.text-colour-grey-light{color:#E8E8E8}.text-colour-hover-grey-medium:hover,.text-colour-grey-medium{color:#8A8A8A}.text-colour-hover-grey-dark:hover,.text-colour-grey-dark{color:#4A4A4A}:host{display:contents}h2:first-child{margin-top:0}div.cooke-consent-container{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;font-size:13px;line-height:17px;border-radius:10px;background:white;border:1px solid black;max-width:500px;padding:1em}div.button-group{margin-top:1em;display:flex;justify-content:space-evenly;width:100%;flex-direction:column;gap:1em}@media screen and (min-width: 475px){div.button-group{flex-direction:row-reverse}}biggive-popup{font-size:17px;line-height:24px}biggive-popup div.content h5{border-bottom:2px solid black;max-width:25em;margin-bottom:5px}biggive-popup div.content div.radio-group{margin-bottom:30px}";
6
6
 
7
7
  const BiggiveCookieBanner$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
8
8
  constructor() {
@@ -16,7 +16,7 @@ const BiggiveCookieBanner$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
16
16
  const elementById = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('cookie-preferences-popup');
17
17
  elementById.openFromOutside();
18
18
  };
19
- this.handleSavePreferencesClick = () => {
19
+ this.handleAcceptSelectedCookies = () => {
20
20
  var _a, _b;
21
21
  const elementById = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('cookie-preferences-popup');
22
22
  elementById.closeFromOutside();
@@ -32,7 +32,7 @@ const BiggiveCookieBanner$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
32
32
  this.blogUriPrefix = undefined;
33
33
  }
34
34
  render() {
35
- return (h("div", { class: "cooke-consent-container" }, h("biggive-popup", { id: "cookie-preferences-popup" }, h("h4", { class: "space-above-0 space-below-3 text-colour-primary" }, "Manage your cookie preferences"), h("form", null, h("h5", null, "Essential (always required)"), h("input", { type: "radio", name: "necassary", id: "necassary-off", disabled: true }), h("label", { htmlFor: "necassary-on" }, "Off"), h("input", { type: "radio", name: "necassary", id: "necassary-on", disabled: true, checked: true }), h("label", { htmlFor: "necassary-on" }, "On"), h("h5", null, "Marketing"), h("input", { type: "radio", name: "marketing", id: "marketing-off", checked: true }), h("label", { htmlFor: "marketing-off" }, "Off"), h("input", { type: "radio", name: "marketing", id: "marketing-on" }), h("label", { htmlFor: "marketing-on" }, "On"), h("hr", null), h("biggive-button", { "space-below": "0", "space-above": "2", "colour-scheme": "secondary", "is-past-campaign": "false", "is-future-campaign": "false", label: "Save preferences", "open-in-new-tab": "false", "full-width": "false", size: "small", rounded: false, centered: false, "button-id": "save-preferences-button", onClick: this.handleSavePreferencesClick }))), h("h2", null, "Our website uses cookies"), h("p", null, "We use some essential cookies to make our website work. We'd also like to share data with our analytics platform and use analytics cookies to understand how you use the website and make improvements."), h("p", null, h("a", { href: this.blogUriPrefix + '/privacy' }, "Find out more in our Privacy Policy")), h("div", { class: "button-group" }, h("biggive-button", { onClick: this.handleAcceptAllClick, "space-below": "0", "colour-scheme": "secondary", "is-past-campaign": "false", "is-future-campaign": "false", label: "Accept All", "open-in-new-tab": "false", "full-width": "true", size: "medium", rounded: false, centered: false, "button-id": "accept-all-button" }), h("biggive-button", { onClick: this.handleChoosePrefencesClick, "space-below": "0", "colour-scheme": "grey-light", "is-past-campaign": "false", "is-future-campaign": "false", label: "Choose Preferences", "open-in-new-tab": "false", "full-width": "true", size: "medium", rounded: false, centered: false, "button-id": "choose-preferences-button" }))));
35
+ return (h("div", { class: "cooke-consent-container" }, h("biggive-popup", { id: "cookie-preferences-popup" }, h("div", { class: "content" }, h("h4", { class: "space-above-0 space-below-3 text-colour-primary" }, "Manage your cookie preferences"), h("form", null, h("div", { class: "radio-group" }, h("h5", null, "Essential (always required)"), h("input", { type: "radio", name: "necassary", id: "necassary-off", disabled: true }), h("label", { htmlFor: "necassary-on" }, "Off"), h("input", { type: "radio", name: "necassary", id: "necassary-on", disabled: true, checked: true }), h("label", { htmlFor: "necassary-on" }, "On")), h("div", { class: "radio-group" }, h("h5", null, "Marketing"), h("input", { type: "radio", name: "marketing", id: "marketing-off", checked: true }), h("label", { htmlFor: "marketing-off" }, "Off"), h("input", { type: "radio", name: "marketing", id: "marketing-on" }), h("label", { htmlFor: "marketing-on" }, "On")), h("biggive-button", { "space-below": "0", "space-above": "2", "colour-scheme": "secondary", "is-past-campaign": "false", "is-future-campaign": "false", label: "Accept Selected Cookies", "open-in-new-tab": "false", "full-width": "false", size: "small", rounded: false, centered: false, "button-id": "accept-selected-button", onClick: this.handleAcceptSelectedCookies })))), h("h2", null, "Our website uses cookies"), h("p", null, "We use some essential cookies to make our website work. We'd also like to share data with our analytics platform and use analytics cookies to understand how you use the website and make improvements."), h("p", null, h("a", { href: this.blogUriPrefix + '/privacy' }, "Find out more in our Privacy Policy")), h("div", { class: "button-group" }, h("biggive-button", { onClick: this.handleAcceptAllClick, "space-below": "0", "colour-scheme": "secondary", "is-past-campaign": "false", "is-future-campaign": "false", label: "Accept All", "open-in-new-tab": "false", "full-width": "true", size: "medium", rounded: false, centered: false, "button-id": "accept-all-button" }), h("biggive-button", { onClick: this.handleChoosePrefencesClick, "space-below": "0", "colour-scheme": "grey-light", "is-past-campaign": "false", "is-future-campaign": "false", label: "Choose Preferences", "open-in-new-tab": "false", "full-width": "true", size: "medium", rounded: false, centered: false, "button-id": "choose-preferences-button" }))));
36
36
  }
37
37
  get el() { return this; }
38
38
  static get style() { return biggiveCookieBannerCss; }
@@ -198,7 +198,11 @@ const BiggiveButton = class {
198
198
  this.buttonId = undefined;
199
199
  }
200
200
  render() {
201
- return (h("div", { class: 'container space-below-' + this.spaceBelow + ' centered-' + this.centered }, h("a", { href: this.url, target: this.openInNewTab ? '_blank' : '_self', id: this.buttonId, class: 'button button-' + this.colourScheme + ' full-width-' + this.fullWidth.toString() + ' size-' + this.size + ' rounded-' + this.rounded.toString() }, h("span", { onClick: this.handleButtonClick }, this.label))));
201
+ // We always want to have a href so that browsers will see this as a link and allow clicking with keybard.
202
+ // If there's no or an empty href then it isn't possible to click by keyboard and we would have to handle keyboard
203
+ // interaction separately.
204
+ const href = this.url || 'javascript:void(0);';
205
+ return (h("div", { class: 'container space-below-' + this.spaceBelow + ' centered-' + this.centered }, h("a", { role: "button", href: href, target: this.openInNewTab ? '_blank' : '_self', id: this.buttonId, class: 'button button-' + this.colourScheme + ' full-width-' + this.fullWidth.toString() + ' size-' + this.size + ' rounded-' + this.rounded.toString() }, h("span", { onClick: this.handleButtonClick }, this.label))));
202
206
  }
203
207
  };
204
208
  BiggiveButton.style = biggiveButtonCss;
@@ -546,7 +550,7 @@ const BiggiveCarousel = class {
546
550
  };
547
551
  BiggiveCarousel.style = biggiveCarouselCss;
548
552
 
549
- const biggiveCookieBannerCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.background-colour-hover-primary:hover,.background-colour-primary{background-color:#2C089B}.background-colour-hover-secondary:hover,.background-colour-secondary{background-color:#2AF135}.background-colour-hover-tertiary:hover,.background-colour-tertiary{background-color:#FF7272}.background-colour-hover-brand-1:hover,.background-colour-brand-1{background-color:#B30510}.background-colour-hover-brand-2:hover,.background-colour-brand-2{background-color:#6E0887}.background-colour-hover-brand-3:hover,.background-colour-brand-3{background-color:#50B400}.background-colour-hover-brand-4:hover,.background-colour-brand-4{background-color:#FFE500}.background-colour-hover-brand-5:hover,.background-colour-brand-5{background-color:#F07D00}.background-colour-hover-brand-6:hover,.background-colour-brand-6{background-color:#62CFC9}.background-colour-hover-brand-afa-pink:hover,.background-colour-brand-afa-pink{background-color:#BF387D}.background-colour-hover-white:hover,.background-colour-white{background-color:#FFFFFF}.background-colour-hover-black:hover,.background-colour-black{background-color:#000000}.background-colour-hover-white:hover,.background-colour-white{background-color:#FFFFFF}.background-colour-hover-grey-extra-light:hover,.background-colour-grey-extra-light{background-color:#D7D7D7}.background-colour-hover-grey-light:hover,.background-colour-grey-light{background-color:#E8E8E8}.background-colour-hover-grey-medium:hover,.background-colour-grey-medium{background-color:#8A8A8A}.background-colour-hover-grey-dark:hover,.background-colour-grey-dark{background-color:#4A4A4A}.fill-primary{fill:#2C089B}.fill-secondary{fill:#2AF135}.fill-tertiary{fill:#FF7272}.fill-brand-1{fill:#B30510}.fill-brand-2{fill:#6E0887}.fill-brand-3{fill:#50B400}.fill-brand-4{fill:#FFE500}.fill-brand-5{fill:#F07D00}.fill-brand-6{fill:#CBC8C8}.fill-brand-afa-pink{fill:#BF387D}.fill-brand-mhf-turquoise{fill:#62CFC9}.fill-white{fill:#FFFFFF}.fill-black{fill:#000000}.fill-grey-extra-light{fill:#D7D7D7}.fill-grey-light{fill:#E8E8E8}.fill-grey-medium{fill:#8A8A8A}.fill-grey-dark{fill:#4A4A4A}.fill-red{fill:red}.space-above-0{margin-top:0}.space-above-1{margin-top:5px}.space-above-2{margin-top:10px}.space-above-3{margin-top:15px}.space-above-4{margin-top:30px}.space-above-5{margin-top:45px}.space-above-6{margin-top:60px}.space-below-0{margin-bottom:0}.space-below-1{margin-bottom:5px}.space-below-2{margin-bottom:10px}.space-below-3{margin-bottom:15px}.space-below-4{margin-bottom:30px}.space-below-5{margin-bottom:45px}.space-below-6{margin-bottom:60px}.text-colour-hover-primary:hover,.text-colour-primary{color:#2C089B}.text-colour-hover-secondary:hover,.text-colour-secondary{color:#2AF135}.text-colour-hover-tertiary:hover,.text-colour-tertiary{color:#FF7272}.text-colour-hover-brand-1:hover,.text-colour-brand-1{color:#B30510}.text-colour-hover-brand-2:hover,.text-colour-brand-2{color:#6E0887}.text-colour-hover-brand-3:hover,.text-colour-brand-3{color:#50B400}.text-colour-hover-brand-4:hover,.text-colour-brand-4{color:#FFE500}.text-colour-hover-brand-5:hover,.text-colour-brand-5{color:#F07D00}.text-colour-hover-brand-6:hover,.text-colour-brand-6{color:#CBC8C8}.text-colour-hover-brand-afa-pink:hover,.text-colour-brand-afa-pink{color:#BF387D}.text-colour-hover-white:hover,.text-colour-white{color:#FFFFFF}.text-colour-hover-black:hover,.text-colour-black{color:#000000}.text-colour-hover-grey-extra-light:hover,.text-colour-grey-extra-light{color:#D7D7D7}.text-colour-hover-grey-light:hover,.text-colour-grey-light{color:#E8E8E8}.text-colour-hover-grey-medium:hover,.text-colour-grey-medium{color:#8A8A8A}.text-colour-hover-grey-dark:hover,.text-colour-grey-dark{color:#4A4A4A}:host{display:contents}h2:first-child{margin-top:0}div.cooke-consent-container{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;font-size:13px;line-height:17px;border-radius:10px;background:white;border:1px solid black;max-width:500px;padding:1em}div.button-group{margin-top:1em;display:flex;justify-content:space-evenly;width:100%;flex-direction:column;gap:1em}@media screen and (min-width: 475px){div.button-group{flex-direction:row-reverse}}";
553
+ const biggiveCookieBannerCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.background-colour-hover-primary:hover,.background-colour-primary{background-color:#2C089B}.background-colour-hover-secondary:hover,.background-colour-secondary{background-color:#2AF135}.background-colour-hover-tertiary:hover,.background-colour-tertiary{background-color:#FF7272}.background-colour-hover-brand-1:hover,.background-colour-brand-1{background-color:#B30510}.background-colour-hover-brand-2:hover,.background-colour-brand-2{background-color:#6E0887}.background-colour-hover-brand-3:hover,.background-colour-brand-3{background-color:#50B400}.background-colour-hover-brand-4:hover,.background-colour-brand-4{background-color:#FFE500}.background-colour-hover-brand-5:hover,.background-colour-brand-5{background-color:#F07D00}.background-colour-hover-brand-6:hover,.background-colour-brand-6{background-color:#62CFC9}.background-colour-hover-brand-afa-pink:hover,.background-colour-brand-afa-pink{background-color:#BF387D}.background-colour-hover-white:hover,.background-colour-white{background-color:#FFFFFF}.background-colour-hover-black:hover,.background-colour-black{background-color:#000000}.background-colour-hover-white:hover,.background-colour-white{background-color:#FFFFFF}.background-colour-hover-grey-extra-light:hover,.background-colour-grey-extra-light{background-color:#D7D7D7}.background-colour-hover-grey-light:hover,.background-colour-grey-light{background-color:#E8E8E8}.background-colour-hover-grey-medium:hover,.background-colour-grey-medium{background-color:#8A8A8A}.background-colour-hover-grey-dark:hover,.background-colour-grey-dark{background-color:#4A4A4A}.fill-primary{fill:#2C089B}.fill-secondary{fill:#2AF135}.fill-tertiary{fill:#FF7272}.fill-brand-1{fill:#B30510}.fill-brand-2{fill:#6E0887}.fill-brand-3{fill:#50B400}.fill-brand-4{fill:#FFE500}.fill-brand-5{fill:#F07D00}.fill-brand-6{fill:#CBC8C8}.fill-brand-afa-pink{fill:#BF387D}.fill-brand-mhf-turquoise{fill:#62CFC9}.fill-white{fill:#FFFFFF}.fill-black{fill:#000000}.fill-grey-extra-light{fill:#D7D7D7}.fill-grey-light{fill:#E8E8E8}.fill-grey-medium{fill:#8A8A8A}.fill-grey-dark{fill:#4A4A4A}.fill-red{fill:red}.space-above-0{margin-top:0}.space-above-1{margin-top:5px}.space-above-2{margin-top:10px}.space-above-3{margin-top:15px}.space-above-4{margin-top:30px}.space-above-5{margin-top:45px}.space-above-6{margin-top:60px}.space-below-0{margin-bottom:0}.space-below-1{margin-bottom:5px}.space-below-2{margin-bottom:10px}.space-below-3{margin-bottom:15px}.space-below-4{margin-bottom:30px}.space-below-5{margin-bottom:45px}.space-below-6{margin-bottom:60px}.text-colour-hover-primary:hover,.text-colour-primary{color:#2C089B}.text-colour-hover-secondary:hover,.text-colour-secondary{color:#2AF135}.text-colour-hover-tertiary:hover,.text-colour-tertiary{color:#FF7272}.text-colour-hover-brand-1:hover,.text-colour-brand-1{color:#B30510}.text-colour-hover-brand-2:hover,.text-colour-brand-2{color:#6E0887}.text-colour-hover-brand-3:hover,.text-colour-brand-3{color:#50B400}.text-colour-hover-brand-4:hover,.text-colour-brand-4{color:#FFE500}.text-colour-hover-brand-5:hover,.text-colour-brand-5{color:#F07D00}.text-colour-hover-brand-6:hover,.text-colour-brand-6{color:#CBC8C8}.text-colour-hover-brand-afa-pink:hover,.text-colour-brand-afa-pink{color:#BF387D}.text-colour-hover-white:hover,.text-colour-white{color:#FFFFFF}.text-colour-hover-black:hover,.text-colour-black{color:#000000}.text-colour-hover-grey-extra-light:hover,.text-colour-grey-extra-light{color:#D7D7D7}.text-colour-hover-grey-light:hover,.text-colour-grey-light{color:#E8E8E8}.text-colour-hover-grey-medium:hover,.text-colour-grey-medium{color:#8A8A8A}.text-colour-hover-grey-dark:hover,.text-colour-grey-dark{color:#4A4A4A}:host{display:contents}h2:first-child{margin-top:0}div.cooke-consent-container{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;font-size:13px;line-height:17px;border-radius:10px;background:white;border:1px solid black;max-width:500px;padding:1em}div.button-group{margin-top:1em;display:flex;justify-content:space-evenly;width:100%;flex-direction:column;gap:1em}@media screen and (min-width: 475px){div.button-group{flex-direction:row-reverse}}biggive-popup{font-size:17px;line-height:24px}biggive-popup div.content h5{border-bottom:2px solid black;max-width:25em;margin-bottom:5px}biggive-popup div.content div.radio-group{margin-bottom:30px}";
550
554
 
551
555
  const BiggiveCookieBanner = class {
552
556
  constructor(hostRef) {
@@ -558,7 +562,7 @@ const BiggiveCookieBanner = class {
558
562
  const elementById = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('cookie-preferences-popup');
559
563
  elementById.openFromOutside();
560
564
  };
561
- this.handleSavePreferencesClick = () => {
565
+ this.handleAcceptSelectedCookies = () => {
562
566
  var _a, _b;
563
567
  const elementById = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('cookie-preferences-popup');
564
568
  elementById.closeFromOutside();
@@ -574,7 +578,7 @@ const BiggiveCookieBanner = class {
574
578
  this.blogUriPrefix = undefined;
575
579
  }
576
580
  render() {
577
- return (h("div", { class: "cooke-consent-container" }, h("biggive-popup", { id: "cookie-preferences-popup" }, h("h4", { class: "space-above-0 space-below-3 text-colour-primary" }, "Manage your cookie preferences"), h("form", null, h("h5", null, "Essential (always required)"), h("input", { type: "radio", name: "necassary", id: "necassary-off", disabled: true }), h("label", { htmlFor: "necassary-on" }, "Off"), h("input", { type: "radio", name: "necassary", id: "necassary-on", disabled: true, checked: true }), h("label", { htmlFor: "necassary-on" }, "On"), h("h5", null, "Marketing"), h("input", { type: "radio", name: "marketing", id: "marketing-off", checked: true }), h("label", { htmlFor: "marketing-off" }, "Off"), h("input", { type: "radio", name: "marketing", id: "marketing-on" }), h("label", { htmlFor: "marketing-on" }, "On"), h("hr", null), h("biggive-button", { "space-below": "0", "space-above": "2", "colour-scheme": "secondary", "is-past-campaign": "false", "is-future-campaign": "false", label: "Save preferences", "open-in-new-tab": "false", "full-width": "false", size: "small", rounded: false, centered: false, "button-id": "save-preferences-button", onClick: this.handleSavePreferencesClick }))), h("h2", null, "Our website uses cookies"), h("p", null, "We use some essential cookies to make our website work. We'd also like to share data with our analytics platform and use analytics cookies to understand how you use the website and make improvements."), h("p", null, h("a", { href: this.blogUriPrefix + '/privacy' }, "Find out more in our Privacy Policy")), h("div", { class: "button-group" }, h("biggive-button", { onClick: this.handleAcceptAllClick, "space-below": "0", "colour-scheme": "secondary", "is-past-campaign": "false", "is-future-campaign": "false", label: "Accept All", "open-in-new-tab": "false", "full-width": "true", size: "medium", rounded: false, centered: false, "button-id": "accept-all-button" }), h("biggive-button", { onClick: this.handleChoosePrefencesClick, "space-below": "0", "colour-scheme": "grey-light", "is-past-campaign": "false", "is-future-campaign": "false", label: "Choose Preferences", "open-in-new-tab": "false", "full-width": "true", size: "medium", rounded: false, centered: false, "button-id": "choose-preferences-button" }))));
581
+ return (h("div", { class: "cooke-consent-container" }, h("biggive-popup", { id: "cookie-preferences-popup" }, h("div", { class: "content" }, h("h4", { class: "space-above-0 space-below-3 text-colour-primary" }, "Manage your cookie preferences"), h("form", null, h("div", { class: "radio-group" }, h("h5", null, "Essential (always required)"), h("input", { type: "radio", name: "necassary", id: "necassary-off", disabled: true }), h("label", { htmlFor: "necassary-on" }, "Off"), h("input", { type: "radio", name: "necassary", id: "necassary-on", disabled: true, checked: true }), h("label", { htmlFor: "necassary-on" }, "On")), h("div", { class: "radio-group" }, h("h5", null, "Marketing"), h("input", { type: "radio", name: "marketing", id: "marketing-off", checked: true }), h("label", { htmlFor: "marketing-off" }, "Off"), h("input", { type: "radio", name: "marketing", id: "marketing-on" }), h("label", { htmlFor: "marketing-on" }, "On")), h("biggive-button", { "space-below": "0", "space-above": "2", "colour-scheme": "secondary", "is-past-campaign": "false", "is-future-campaign": "false", label: "Accept Selected Cookies", "open-in-new-tab": "false", "full-width": "false", size: "small", rounded: false, centered: false, "button-id": "accept-selected-button", onClick: this.handleAcceptSelectedCookies })))), h("h2", null, "Our website uses cookies"), h("p", null, "We use some essential cookies to make our website work. We'd also like to share data with our analytics platform and use analytics cookies to understand how you use the website and make improvements."), h("p", null, h("a", { href: this.blogUriPrefix + '/privacy' }, "Find out more in our Privacy Policy")), h("div", { class: "button-group" }, h("biggive-button", { onClick: this.handleAcceptAllClick, "space-below": "0", "colour-scheme": "secondary", "is-past-campaign": "false", "is-future-campaign": "false", label: "Accept All", "open-in-new-tab": "false", "full-width": "true", size: "medium", rounded: false, centered: false, "button-id": "accept-all-button" }), h("biggive-button", { onClick: this.handleChoosePrefencesClick, "space-below": "0", "colour-scheme": "grey-light", "is-past-campaign": "false", "is-future-campaign": "false", label: "Choose Preferences", "open-in-new-tab": "false", "full-width": "true", size: "medium", rounded: false, centered: false, "button-id": "choose-preferences-button" }))));
578
582
  }
579
583
  get el() { return getElement(this); }
580
584
  };
@@ -19,7 +19,7 @@ export declare class BiggiveButton {
19
19
  /**
20
20
  * URL
21
21
  */
22
- url: string;
22
+ url: string | undefined;
23
23
  /**
24
24
  * New Tab
25
25
  */
@@ -17,7 +17,7 @@ export declare class BiggiveCookieBanner {
17
17
  marketing: Boolean;
18
18
  }>;
19
19
  private handleChoosePrefencesClick;
20
- private handleSavePreferencesClick;
20
+ private handleAcceptSelectedCookies;
21
21
  private handleAcceptAllClick;
22
22
  render(): any;
23
23
  }
@@ -195,7 +195,7 @@ export namespace Components {
195
195
  /**
196
196
  * URL
197
197
  */
198
- "url": string;
198
+ "url": string | undefined;
199
199
  }
200
200
  interface BiggiveCallToAction {
201
201
  /**
@@ -1724,7 +1724,7 @@ declare namespace LocalJSX {
1724
1724
  /**
1725
1725
  * URL
1726
1726
  */
1727
- "url"?: string;
1727
+ "url"?: string | undefined;
1728
1728
  }
1729
1729
  interface BiggiveCallToAction {
1730
1730
  /**
package/hydrate/index.js CHANGED
@@ -6623,7 +6623,11 @@ class BiggiveButton {
6623
6623
  this.buttonId = undefined;
6624
6624
  }
6625
6625
  render() {
6626
- return (hAsync("div", { class: 'container space-below-' + this.spaceBelow + ' centered-' + this.centered }, hAsync("a", { href: this.url, target: this.openInNewTab ? '_blank' : '_self', id: this.buttonId, class: 'button button-' + this.colourScheme + ' full-width-' + this.fullWidth.toString() + ' size-' + this.size + ' rounded-' + this.rounded.toString() }, hAsync("span", { onClick: this.handleButtonClick }, this.label))));
6626
+ // We always want to have a href so that browsers will see this as a link and allow clicking with keybard.
6627
+ // If there's no or an empty href then it isn't possible to click by keyboard and we would have to handle keyboard
6628
+ // interaction separately.
6629
+ const href = this.url || 'javascript:void(0);';
6630
+ return (hAsync("div", { class: 'container space-below-' + this.spaceBelow + ' centered-' + this.centered }, hAsync("a", { role: "button", href: href, target: this.openInNewTab ? '_blank' : '_self', id: this.buttonId, class: 'button button-' + this.colourScheme + ' full-width-' + this.fullWidth.toString() + ' size-' + this.size + ' rounded-' + this.rounded.toString() }, hAsync("span", { onClick: this.handleButtonClick }, this.label))));
6627
6631
  }
6628
6632
  static get style() { return biggiveButtonCss; }
6629
6633
  static get cmpMeta() { return {
@@ -7144,7 +7148,7 @@ class BiggiveCategoryIcon {
7144
7148
  }; }
7145
7149
  }
7146
7150
 
7147
- const biggiveCookieBannerCss = "/*!@a*/a.sc-biggive-cookie-banner{color:inherit;text-decoration:underline}/*!@a:hover*/a.sc-biggive-cookie-banner:hover{text-decoration:none}/*!@.background-colour-hover-primary:hover,\n.background-colour-primary*/.background-colour-hover-primary.sc-biggive-cookie-banner:hover,.background-colour-primary.sc-biggive-cookie-banner{background-color:#2C089B}/*!@.background-colour-hover-secondary:hover,\n.background-colour-secondary*/.background-colour-hover-secondary.sc-biggive-cookie-banner:hover,.background-colour-secondary.sc-biggive-cookie-banner{background-color:#2AF135}/*!@.background-colour-hover-tertiary:hover,\n.background-colour-tertiary*/.background-colour-hover-tertiary.sc-biggive-cookie-banner:hover,.background-colour-tertiary.sc-biggive-cookie-banner{background-color:#FF7272}/*!@.background-colour-hover-brand-1:hover,\n.background-colour-brand-1*/.background-colour-hover-brand-1.sc-biggive-cookie-banner:hover,.background-colour-brand-1.sc-biggive-cookie-banner{background-color:#B30510}/*!@.background-colour-hover-brand-2:hover,\n.background-colour-brand-2*/.background-colour-hover-brand-2.sc-biggive-cookie-banner:hover,.background-colour-brand-2.sc-biggive-cookie-banner{background-color:#6E0887}/*!@.background-colour-hover-brand-3:hover,\n.background-colour-brand-3*/.background-colour-hover-brand-3.sc-biggive-cookie-banner:hover,.background-colour-brand-3.sc-biggive-cookie-banner{background-color:#50B400}/*!@.background-colour-hover-brand-4:hover,\n.background-colour-brand-4*/.background-colour-hover-brand-4.sc-biggive-cookie-banner:hover,.background-colour-brand-4.sc-biggive-cookie-banner{background-color:#FFE500}/*!@.background-colour-hover-brand-5:hover,\n.background-colour-brand-5*/.background-colour-hover-brand-5.sc-biggive-cookie-banner:hover,.background-colour-brand-5.sc-biggive-cookie-banner{background-color:#F07D00}/*!@.background-colour-hover-brand-6:hover,\n.background-colour-brand-6*/.background-colour-hover-brand-6.sc-biggive-cookie-banner:hover,.background-colour-brand-6.sc-biggive-cookie-banner{background-color:#62CFC9}/*!@.background-colour-hover-brand-afa-pink:hover,\n.background-colour-brand-afa-pink*/.background-colour-hover-brand-afa-pink.sc-biggive-cookie-banner:hover,.background-colour-brand-afa-pink.sc-biggive-cookie-banner{background-color:#BF387D}/*!@.background-colour-hover-white:hover,\n.background-colour-white*/.background-colour-hover-white.sc-biggive-cookie-banner:hover,.background-colour-white.sc-biggive-cookie-banner{background-color:#FFFFFF}/*!@.background-colour-hover-black:hover,\n.background-colour-black*/.background-colour-hover-black.sc-biggive-cookie-banner:hover,.background-colour-black.sc-biggive-cookie-banner{background-color:#000000}/*!@.background-colour-hover-white:hover,\n.background-colour-white*/.background-colour-hover-white.sc-biggive-cookie-banner:hover,.background-colour-white.sc-biggive-cookie-banner{background-color:#FFFFFF}/*!@.background-colour-hover-grey-extra-light:hover,\n.background-colour-grey-extra-light*/.background-colour-hover-grey-extra-light.sc-biggive-cookie-banner:hover,.background-colour-grey-extra-light.sc-biggive-cookie-banner{background-color:#D7D7D7}/*!@.background-colour-hover-grey-light:hover,\n.background-colour-grey-light*/.background-colour-hover-grey-light.sc-biggive-cookie-banner:hover,.background-colour-grey-light.sc-biggive-cookie-banner{background-color:#E8E8E8}/*!@.background-colour-hover-grey-medium:hover,\n.background-colour-grey-medium*/.background-colour-hover-grey-medium.sc-biggive-cookie-banner:hover,.background-colour-grey-medium.sc-biggive-cookie-banner{background-color:#8A8A8A}/*!@.background-colour-hover-grey-dark:hover,\n.background-colour-grey-dark*/.background-colour-hover-grey-dark.sc-biggive-cookie-banner:hover,.background-colour-grey-dark.sc-biggive-cookie-banner{background-color:#4A4A4A}/*!@.fill-primary*/.fill-primary.sc-biggive-cookie-banner{fill:#2C089B}/*!@.fill-secondary*/.fill-secondary.sc-biggive-cookie-banner{fill:#2AF135}/*!@.fill-tertiary*/.fill-tertiary.sc-biggive-cookie-banner{fill:#FF7272}/*!@.fill-brand-1*/.fill-brand-1.sc-biggive-cookie-banner{fill:#B30510}/*!@.fill-brand-2*/.fill-brand-2.sc-biggive-cookie-banner{fill:#6E0887}/*!@.fill-brand-3*/.fill-brand-3.sc-biggive-cookie-banner{fill:#50B400}/*!@.fill-brand-4*/.fill-brand-4.sc-biggive-cookie-banner{fill:#FFE500}/*!@.fill-brand-5*/.fill-brand-5.sc-biggive-cookie-banner{fill:#F07D00}/*!@.fill-brand-6*/.fill-brand-6.sc-biggive-cookie-banner{fill:#CBC8C8}/*!@.fill-brand-afa-pink*/.fill-brand-afa-pink.sc-biggive-cookie-banner{fill:#BF387D}/*!@.fill-brand-mhf-turquoise*/.fill-brand-mhf-turquoise.sc-biggive-cookie-banner{fill:#62CFC9}/*!@.fill-white*/.fill-white.sc-biggive-cookie-banner{fill:#FFFFFF}/*!@.fill-black*/.fill-black.sc-biggive-cookie-banner{fill:#000000}/*!@.fill-grey-extra-light*/.fill-grey-extra-light.sc-biggive-cookie-banner{fill:#D7D7D7}/*!@.fill-grey-light*/.fill-grey-light.sc-biggive-cookie-banner{fill:#E8E8E8}/*!@.fill-grey-medium*/.fill-grey-medium.sc-biggive-cookie-banner{fill:#8A8A8A}/*!@.fill-grey-dark*/.fill-grey-dark.sc-biggive-cookie-banner{fill:#4A4A4A}/*!@.fill-red*/.fill-red.sc-biggive-cookie-banner{fill:red}/*!@.space-above-0*/.space-above-0.sc-biggive-cookie-banner{margin-top:0}/*!@.space-above-1*/.space-above-1.sc-biggive-cookie-banner{margin-top:5px}/*!@.space-above-2*/.space-above-2.sc-biggive-cookie-banner{margin-top:10px}/*!@.space-above-3*/.space-above-3.sc-biggive-cookie-banner{margin-top:15px}/*!@.space-above-4*/.space-above-4.sc-biggive-cookie-banner{margin-top:30px}/*!@.space-above-5*/.space-above-5.sc-biggive-cookie-banner{margin-top:45px}/*!@.space-above-6*/.space-above-6.sc-biggive-cookie-banner{margin-top:60px}/*!@.space-below-0*/.space-below-0.sc-biggive-cookie-banner{margin-bottom:0}/*!@.space-below-1*/.space-below-1.sc-biggive-cookie-banner{margin-bottom:5px}/*!@.space-below-2*/.space-below-2.sc-biggive-cookie-banner{margin-bottom:10px}/*!@.space-below-3*/.space-below-3.sc-biggive-cookie-banner{margin-bottom:15px}/*!@.space-below-4*/.space-below-4.sc-biggive-cookie-banner{margin-bottom:30px}/*!@.space-below-5*/.space-below-5.sc-biggive-cookie-banner{margin-bottom:45px}/*!@.space-below-6*/.space-below-6.sc-biggive-cookie-banner{margin-bottom:60px}/*!@.text-colour-hover-primary:hover,\n.text-colour-primary*/.text-colour-hover-primary.sc-biggive-cookie-banner:hover,.text-colour-primary.sc-biggive-cookie-banner{color:#2C089B}/*!@.text-colour-hover-secondary:hover,\n.text-colour-secondary*/.text-colour-hover-secondary.sc-biggive-cookie-banner:hover,.text-colour-secondary.sc-biggive-cookie-banner{color:#2AF135}/*!@.text-colour-hover-tertiary:hover,\n.text-colour-tertiary*/.text-colour-hover-tertiary.sc-biggive-cookie-banner:hover,.text-colour-tertiary.sc-biggive-cookie-banner{color:#FF7272}/*!@.text-colour-hover-brand-1:hover,\n.text-colour-brand-1*/.text-colour-hover-brand-1.sc-biggive-cookie-banner:hover,.text-colour-brand-1.sc-biggive-cookie-banner{color:#B30510}/*!@.text-colour-hover-brand-2:hover,\n.text-colour-brand-2*/.text-colour-hover-brand-2.sc-biggive-cookie-banner:hover,.text-colour-brand-2.sc-biggive-cookie-banner{color:#6E0887}/*!@.text-colour-hover-brand-3:hover,\n.text-colour-brand-3*/.text-colour-hover-brand-3.sc-biggive-cookie-banner:hover,.text-colour-brand-3.sc-biggive-cookie-banner{color:#50B400}/*!@.text-colour-hover-brand-4:hover,\n.text-colour-brand-4*/.text-colour-hover-brand-4.sc-biggive-cookie-banner:hover,.text-colour-brand-4.sc-biggive-cookie-banner{color:#FFE500}/*!@.text-colour-hover-brand-5:hover,\n.text-colour-brand-5*/.text-colour-hover-brand-5.sc-biggive-cookie-banner:hover,.text-colour-brand-5.sc-biggive-cookie-banner{color:#F07D00}/*!@.text-colour-hover-brand-6:hover,\n.text-colour-brand-6*/.text-colour-hover-brand-6.sc-biggive-cookie-banner:hover,.text-colour-brand-6.sc-biggive-cookie-banner{color:#CBC8C8}/*!@.text-colour-hover-brand-afa-pink:hover,\n.text-colour-brand-afa-pink*/.text-colour-hover-brand-afa-pink.sc-biggive-cookie-banner:hover,.text-colour-brand-afa-pink.sc-biggive-cookie-banner{color:#BF387D}/*!@.text-colour-hover-white:hover,\n.text-colour-white*/.text-colour-hover-white.sc-biggive-cookie-banner:hover,.text-colour-white.sc-biggive-cookie-banner{color:#FFFFFF}/*!@.text-colour-hover-black:hover,\n.text-colour-black*/.text-colour-hover-black.sc-biggive-cookie-banner:hover,.text-colour-black.sc-biggive-cookie-banner{color:#000000}/*!@.text-colour-hover-grey-extra-light:hover,\n.text-colour-grey-extra-light*/.text-colour-hover-grey-extra-light.sc-biggive-cookie-banner:hover,.text-colour-grey-extra-light.sc-biggive-cookie-banner{color:#D7D7D7}/*!@.text-colour-hover-grey-light:hover,\n.text-colour-grey-light*/.text-colour-hover-grey-light.sc-biggive-cookie-banner:hover,.text-colour-grey-light.sc-biggive-cookie-banner{color:#E8E8E8}/*!@.text-colour-hover-grey-medium:hover,\n.text-colour-grey-medium*/.text-colour-hover-grey-medium.sc-biggive-cookie-banner:hover,.text-colour-grey-medium.sc-biggive-cookie-banner{color:#8A8A8A}/*!@.text-colour-hover-grey-dark:hover,\n.text-colour-grey-dark*/.text-colour-hover-grey-dark.sc-biggive-cookie-banner:hover,.text-colour-grey-dark.sc-biggive-cookie-banner{color:#4A4A4A}/*!@:host*/.sc-biggive-cookie-banner-h{display:contents}/*!@h2:first-child*/h2.sc-biggive-cookie-banner:first-child{margin-top:0}/*!@div.cooke-consent-container*/div.cooke-consent-container.sc-biggive-cookie-banner{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;font-size:13px;line-height:17px;border-radius:10px;background:white;border:1px solid black;max-width:500px;padding:1em}/*!@div.button-group*/div.button-group.sc-biggive-cookie-banner{margin-top:1em;display:flex;justify-content:space-evenly;width:100%;flex-direction:column;gap:1em}@media screen and (min-width: 475px){/*!@div.button-group*/div.button-group.sc-biggive-cookie-banner{flex-direction:row-reverse}}";
7151
+ const biggiveCookieBannerCss = "/*!@a*/a.sc-biggive-cookie-banner{color:inherit;text-decoration:underline}/*!@a:hover*/a.sc-biggive-cookie-banner:hover{text-decoration:none}/*!@.background-colour-hover-primary:hover,\n.background-colour-primary*/.background-colour-hover-primary.sc-biggive-cookie-banner:hover,.background-colour-primary.sc-biggive-cookie-banner{background-color:#2C089B}/*!@.background-colour-hover-secondary:hover,\n.background-colour-secondary*/.background-colour-hover-secondary.sc-biggive-cookie-banner:hover,.background-colour-secondary.sc-biggive-cookie-banner{background-color:#2AF135}/*!@.background-colour-hover-tertiary:hover,\n.background-colour-tertiary*/.background-colour-hover-tertiary.sc-biggive-cookie-banner:hover,.background-colour-tertiary.sc-biggive-cookie-banner{background-color:#FF7272}/*!@.background-colour-hover-brand-1:hover,\n.background-colour-brand-1*/.background-colour-hover-brand-1.sc-biggive-cookie-banner:hover,.background-colour-brand-1.sc-biggive-cookie-banner{background-color:#B30510}/*!@.background-colour-hover-brand-2:hover,\n.background-colour-brand-2*/.background-colour-hover-brand-2.sc-biggive-cookie-banner:hover,.background-colour-brand-2.sc-biggive-cookie-banner{background-color:#6E0887}/*!@.background-colour-hover-brand-3:hover,\n.background-colour-brand-3*/.background-colour-hover-brand-3.sc-biggive-cookie-banner:hover,.background-colour-brand-3.sc-biggive-cookie-banner{background-color:#50B400}/*!@.background-colour-hover-brand-4:hover,\n.background-colour-brand-4*/.background-colour-hover-brand-4.sc-biggive-cookie-banner:hover,.background-colour-brand-4.sc-biggive-cookie-banner{background-color:#FFE500}/*!@.background-colour-hover-brand-5:hover,\n.background-colour-brand-5*/.background-colour-hover-brand-5.sc-biggive-cookie-banner:hover,.background-colour-brand-5.sc-biggive-cookie-banner{background-color:#F07D00}/*!@.background-colour-hover-brand-6:hover,\n.background-colour-brand-6*/.background-colour-hover-brand-6.sc-biggive-cookie-banner:hover,.background-colour-brand-6.sc-biggive-cookie-banner{background-color:#62CFC9}/*!@.background-colour-hover-brand-afa-pink:hover,\n.background-colour-brand-afa-pink*/.background-colour-hover-brand-afa-pink.sc-biggive-cookie-banner:hover,.background-colour-brand-afa-pink.sc-biggive-cookie-banner{background-color:#BF387D}/*!@.background-colour-hover-white:hover,\n.background-colour-white*/.background-colour-hover-white.sc-biggive-cookie-banner:hover,.background-colour-white.sc-biggive-cookie-banner{background-color:#FFFFFF}/*!@.background-colour-hover-black:hover,\n.background-colour-black*/.background-colour-hover-black.sc-biggive-cookie-banner:hover,.background-colour-black.sc-biggive-cookie-banner{background-color:#000000}/*!@.background-colour-hover-white:hover,\n.background-colour-white*/.background-colour-hover-white.sc-biggive-cookie-banner:hover,.background-colour-white.sc-biggive-cookie-banner{background-color:#FFFFFF}/*!@.background-colour-hover-grey-extra-light:hover,\n.background-colour-grey-extra-light*/.background-colour-hover-grey-extra-light.sc-biggive-cookie-banner:hover,.background-colour-grey-extra-light.sc-biggive-cookie-banner{background-color:#D7D7D7}/*!@.background-colour-hover-grey-light:hover,\n.background-colour-grey-light*/.background-colour-hover-grey-light.sc-biggive-cookie-banner:hover,.background-colour-grey-light.sc-biggive-cookie-banner{background-color:#E8E8E8}/*!@.background-colour-hover-grey-medium:hover,\n.background-colour-grey-medium*/.background-colour-hover-grey-medium.sc-biggive-cookie-banner:hover,.background-colour-grey-medium.sc-biggive-cookie-banner{background-color:#8A8A8A}/*!@.background-colour-hover-grey-dark:hover,\n.background-colour-grey-dark*/.background-colour-hover-grey-dark.sc-biggive-cookie-banner:hover,.background-colour-grey-dark.sc-biggive-cookie-banner{background-color:#4A4A4A}/*!@.fill-primary*/.fill-primary.sc-biggive-cookie-banner{fill:#2C089B}/*!@.fill-secondary*/.fill-secondary.sc-biggive-cookie-banner{fill:#2AF135}/*!@.fill-tertiary*/.fill-tertiary.sc-biggive-cookie-banner{fill:#FF7272}/*!@.fill-brand-1*/.fill-brand-1.sc-biggive-cookie-banner{fill:#B30510}/*!@.fill-brand-2*/.fill-brand-2.sc-biggive-cookie-banner{fill:#6E0887}/*!@.fill-brand-3*/.fill-brand-3.sc-biggive-cookie-banner{fill:#50B400}/*!@.fill-brand-4*/.fill-brand-4.sc-biggive-cookie-banner{fill:#FFE500}/*!@.fill-brand-5*/.fill-brand-5.sc-biggive-cookie-banner{fill:#F07D00}/*!@.fill-brand-6*/.fill-brand-6.sc-biggive-cookie-banner{fill:#CBC8C8}/*!@.fill-brand-afa-pink*/.fill-brand-afa-pink.sc-biggive-cookie-banner{fill:#BF387D}/*!@.fill-brand-mhf-turquoise*/.fill-brand-mhf-turquoise.sc-biggive-cookie-banner{fill:#62CFC9}/*!@.fill-white*/.fill-white.sc-biggive-cookie-banner{fill:#FFFFFF}/*!@.fill-black*/.fill-black.sc-biggive-cookie-banner{fill:#000000}/*!@.fill-grey-extra-light*/.fill-grey-extra-light.sc-biggive-cookie-banner{fill:#D7D7D7}/*!@.fill-grey-light*/.fill-grey-light.sc-biggive-cookie-banner{fill:#E8E8E8}/*!@.fill-grey-medium*/.fill-grey-medium.sc-biggive-cookie-banner{fill:#8A8A8A}/*!@.fill-grey-dark*/.fill-grey-dark.sc-biggive-cookie-banner{fill:#4A4A4A}/*!@.fill-red*/.fill-red.sc-biggive-cookie-banner{fill:red}/*!@.space-above-0*/.space-above-0.sc-biggive-cookie-banner{margin-top:0}/*!@.space-above-1*/.space-above-1.sc-biggive-cookie-banner{margin-top:5px}/*!@.space-above-2*/.space-above-2.sc-biggive-cookie-banner{margin-top:10px}/*!@.space-above-3*/.space-above-3.sc-biggive-cookie-banner{margin-top:15px}/*!@.space-above-4*/.space-above-4.sc-biggive-cookie-banner{margin-top:30px}/*!@.space-above-5*/.space-above-5.sc-biggive-cookie-banner{margin-top:45px}/*!@.space-above-6*/.space-above-6.sc-biggive-cookie-banner{margin-top:60px}/*!@.space-below-0*/.space-below-0.sc-biggive-cookie-banner{margin-bottom:0}/*!@.space-below-1*/.space-below-1.sc-biggive-cookie-banner{margin-bottom:5px}/*!@.space-below-2*/.space-below-2.sc-biggive-cookie-banner{margin-bottom:10px}/*!@.space-below-3*/.space-below-3.sc-biggive-cookie-banner{margin-bottom:15px}/*!@.space-below-4*/.space-below-4.sc-biggive-cookie-banner{margin-bottom:30px}/*!@.space-below-5*/.space-below-5.sc-biggive-cookie-banner{margin-bottom:45px}/*!@.space-below-6*/.space-below-6.sc-biggive-cookie-banner{margin-bottom:60px}/*!@.text-colour-hover-primary:hover,\n.text-colour-primary*/.text-colour-hover-primary.sc-biggive-cookie-banner:hover,.text-colour-primary.sc-biggive-cookie-banner{color:#2C089B}/*!@.text-colour-hover-secondary:hover,\n.text-colour-secondary*/.text-colour-hover-secondary.sc-biggive-cookie-banner:hover,.text-colour-secondary.sc-biggive-cookie-banner{color:#2AF135}/*!@.text-colour-hover-tertiary:hover,\n.text-colour-tertiary*/.text-colour-hover-tertiary.sc-biggive-cookie-banner:hover,.text-colour-tertiary.sc-biggive-cookie-banner{color:#FF7272}/*!@.text-colour-hover-brand-1:hover,\n.text-colour-brand-1*/.text-colour-hover-brand-1.sc-biggive-cookie-banner:hover,.text-colour-brand-1.sc-biggive-cookie-banner{color:#B30510}/*!@.text-colour-hover-brand-2:hover,\n.text-colour-brand-2*/.text-colour-hover-brand-2.sc-biggive-cookie-banner:hover,.text-colour-brand-2.sc-biggive-cookie-banner{color:#6E0887}/*!@.text-colour-hover-brand-3:hover,\n.text-colour-brand-3*/.text-colour-hover-brand-3.sc-biggive-cookie-banner:hover,.text-colour-brand-3.sc-biggive-cookie-banner{color:#50B400}/*!@.text-colour-hover-brand-4:hover,\n.text-colour-brand-4*/.text-colour-hover-brand-4.sc-biggive-cookie-banner:hover,.text-colour-brand-4.sc-biggive-cookie-banner{color:#FFE500}/*!@.text-colour-hover-brand-5:hover,\n.text-colour-brand-5*/.text-colour-hover-brand-5.sc-biggive-cookie-banner:hover,.text-colour-brand-5.sc-biggive-cookie-banner{color:#F07D00}/*!@.text-colour-hover-brand-6:hover,\n.text-colour-brand-6*/.text-colour-hover-brand-6.sc-biggive-cookie-banner:hover,.text-colour-brand-6.sc-biggive-cookie-banner{color:#CBC8C8}/*!@.text-colour-hover-brand-afa-pink:hover,\n.text-colour-brand-afa-pink*/.text-colour-hover-brand-afa-pink.sc-biggive-cookie-banner:hover,.text-colour-brand-afa-pink.sc-biggive-cookie-banner{color:#BF387D}/*!@.text-colour-hover-white:hover,\n.text-colour-white*/.text-colour-hover-white.sc-biggive-cookie-banner:hover,.text-colour-white.sc-biggive-cookie-banner{color:#FFFFFF}/*!@.text-colour-hover-black:hover,\n.text-colour-black*/.text-colour-hover-black.sc-biggive-cookie-banner:hover,.text-colour-black.sc-biggive-cookie-banner{color:#000000}/*!@.text-colour-hover-grey-extra-light:hover,\n.text-colour-grey-extra-light*/.text-colour-hover-grey-extra-light.sc-biggive-cookie-banner:hover,.text-colour-grey-extra-light.sc-biggive-cookie-banner{color:#D7D7D7}/*!@.text-colour-hover-grey-light:hover,\n.text-colour-grey-light*/.text-colour-hover-grey-light.sc-biggive-cookie-banner:hover,.text-colour-grey-light.sc-biggive-cookie-banner{color:#E8E8E8}/*!@.text-colour-hover-grey-medium:hover,\n.text-colour-grey-medium*/.text-colour-hover-grey-medium.sc-biggive-cookie-banner:hover,.text-colour-grey-medium.sc-biggive-cookie-banner{color:#8A8A8A}/*!@.text-colour-hover-grey-dark:hover,\n.text-colour-grey-dark*/.text-colour-hover-grey-dark.sc-biggive-cookie-banner:hover,.text-colour-grey-dark.sc-biggive-cookie-banner{color:#4A4A4A}/*!@:host*/.sc-biggive-cookie-banner-h{display:contents}/*!@h2:first-child*/h2.sc-biggive-cookie-banner:first-child{margin-top:0}/*!@div.cooke-consent-container*/div.cooke-consent-container.sc-biggive-cookie-banner{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;font-size:13px;line-height:17px;border-radius:10px;background:white;border:1px solid black;max-width:500px;padding:1em}/*!@div.button-group*/div.button-group.sc-biggive-cookie-banner{margin-top:1em;display:flex;justify-content:space-evenly;width:100%;flex-direction:column;gap:1em}@media screen and (min-width: 475px){/*!@div.button-group*/div.button-group.sc-biggive-cookie-banner{flex-direction:row-reverse}}/*!@biggive-popup*/biggive-popup.sc-biggive-cookie-banner{font-size:17px;line-height:24px}/*!@biggive-popup div.content h5*/biggive-popup.sc-biggive-cookie-banner div.content.sc-biggive-cookie-banner h5.sc-biggive-cookie-banner{border-bottom:2px solid black;max-width:25em;margin-bottom:5px}/*!@biggive-popup div.content div.radio-group*/biggive-popup.sc-biggive-cookie-banner div.content.sc-biggive-cookie-banner div.radio-group.sc-biggive-cookie-banner{margin-bottom:30px}";
7148
7152
 
7149
7153
  class BiggiveCookieBanner {
7150
7154
  constructor(hostRef) {
@@ -7156,7 +7160,7 @@ class BiggiveCookieBanner {
7156
7160
  const elementById = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('cookie-preferences-popup');
7157
7161
  elementById.openFromOutside();
7158
7162
  };
7159
- this.handleSavePreferencesClick = () => {
7163
+ this.handleAcceptSelectedCookies = () => {
7160
7164
  var _a, _b;
7161
7165
  const elementById = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('cookie-preferences-popup');
7162
7166
  elementById.closeFromOutside();
@@ -7172,7 +7176,7 @@ class BiggiveCookieBanner {
7172
7176
  this.blogUriPrefix = undefined;
7173
7177
  }
7174
7178
  render() {
7175
- return (hAsync("div", { class: "cooke-consent-container" }, hAsync("biggive-popup", { id: "cookie-preferences-popup" }, hAsync("h4", { class: "space-above-0 space-below-3 text-colour-primary" }, "Manage your cookie preferences"), hAsync("form", null, hAsync("h5", null, "Essential (always required)"), hAsync("input", { type: "radio", name: "necassary", id: "necassary-off", disabled: true }), hAsync("label", { htmlFor: "necassary-on" }, "Off"), hAsync("input", { type: "radio", name: "necassary", id: "necassary-on", disabled: true, checked: true }), hAsync("label", { htmlFor: "necassary-on" }, "On"), hAsync("h5", null, "Marketing"), hAsync("input", { type: "radio", name: "marketing", id: "marketing-off", checked: true }), hAsync("label", { htmlFor: "marketing-off" }, "Off"), hAsync("input", { type: "radio", name: "marketing", id: "marketing-on" }), hAsync("label", { htmlFor: "marketing-on" }, "On"), hAsync("hr", null), hAsync("biggive-button", { "space-below": "0", "space-above": "2", "colour-scheme": "secondary", "is-past-campaign": "false", "is-future-campaign": "false", label: "Save preferences", "open-in-new-tab": "false", "full-width": "false", size: "small", rounded: false, centered: false, "button-id": "save-preferences-button", onClick: this.handleSavePreferencesClick }))), hAsync("h2", null, "Our website uses cookies"), hAsync("p", null, "We use some essential cookies to make our website work. We'd also like to share data with our analytics platform and use analytics cookies to understand how you use the website and make improvements."), hAsync("p", null, hAsync("a", { href: this.blogUriPrefix + '/privacy' }, "Find out more in our Privacy Policy")), hAsync("div", { class: "button-group" }, hAsync("biggive-button", { onClick: this.handleAcceptAllClick, "space-below": "0", "colour-scheme": "secondary", "is-past-campaign": "false", "is-future-campaign": "false", label: "Accept All", "open-in-new-tab": "false", "full-width": "true", size: "medium", rounded: false, centered: false, "button-id": "accept-all-button" }), hAsync("biggive-button", { onClick: this.handleChoosePrefencesClick, "space-below": "0", "colour-scheme": "grey-light", "is-past-campaign": "false", "is-future-campaign": "false", label: "Choose Preferences", "open-in-new-tab": "false", "full-width": "true", size: "medium", rounded: false, centered: false, "button-id": "choose-preferences-button" }))));
7179
+ return (hAsync("div", { class: "cooke-consent-container" }, hAsync("biggive-popup", { id: "cookie-preferences-popup" }, hAsync("div", { class: "content" }, hAsync("h4", { class: "space-above-0 space-below-3 text-colour-primary" }, "Manage your cookie preferences"), hAsync("form", null, hAsync("div", { class: "radio-group" }, hAsync("h5", null, "Essential (always required)"), hAsync("input", { type: "radio", name: "necassary", id: "necassary-off", disabled: true }), hAsync("label", { htmlFor: "necassary-on" }, "Off"), hAsync("input", { type: "radio", name: "necassary", id: "necassary-on", disabled: true, checked: true }), hAsync("label", { htmlFor: "necassary-on" }, "On")), hAsync("div", { class: "radio-group" }, hAsync("h5", null, "Marketing"), hAsync("input", { type: "radio", name: "marketing", id: "marketing-off", checked: true }), hAsync("label", { htmlFor: "marketing-off" }, "Off"), hAsync("input", { type: "radio", name: "marketing", id: "marketing-on" }), hAsync("label", { htmlFor: "marketing-on" }, "On")), hAsync("biggive-button", { "space-below": "0", "space-above": "2", "colour-scheme": "secondary", "is-past-campaign": "false", "is-future-campaign": "false", label: "Accept Selected Cookies", "open-in-new-tab": "false", "full-width": "false", size: "small", rounded: false, centered: false, "button-id": "accept-selected-button", onClick: this.handleAcceptSelectedCookies })))), hAsync("h2", null, "Our website uses cookies"), hAsync("p", null, "We use some essential cookies to make our website work. We'd also like to share data with our analytics platform and use analytics cookies to understand how you use the website and make improvements."), hAsync("p", null, hAsync("a", { href: this.blogUriPrefix + '/privacy' }, "Find out more in our Privacy Policy")), hAsync("div", { class: "button-group" }, hAsync("biggive-button", { onClick: this.handleAcceptAllClick, "space-below": "0", "colour-scheme": "secondary", "is-past-campaign": "false", "is-future-campaign": "false", label: "Accept All", "open-in-new-tab": "false", "full-width": "true", size: "medium", rounded: false, centered: false, "button-id": "accept-all-button" }), hAsync("biggive-button", { onClick: this.handleChoosePrefencesClick, "space-below": "0", "colour-scheme": "grey-light", "is-past-campaign": "false", "is-future-campaign": "false", label: "Choose Preferences", "open-in-new-tab": "false", "full-width": "true", size: "medium", rounded: false, centered: false, "button-id": "choose-preferences-button" }))));
7176
7180
  }
7177
7181
  get el() { return getElement(this); }
7178
7182
  static get style() { return biggiveCookieBannerCss; }
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": "202308221410.0.0",
4
+ "version": "202308250924.0.0",
5
5
  "description": "Big Give Components",
6
6
  "main": "dist/index.cjs.js",
7
7
  "module": "dist/index.js",