@biggive/components 202401191800.0.0 → 202401231203.0.0

package/dist/components/biggive-category-icon.js

@@ -2,6 +2,7 @@ import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/clien
 import { F as FontAwesomeIconsService } from './fontawesome-icons.js';
 
 const biggiveCategoryIconCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.background-colour-hover-primary:hover,.background-colour-primary{background-color:#2C089B}.background-colour-hover-secondary:hover,.background-colour-secondary{background-color:#2AF135}.background-colour-hover-tertiary:hover,.background-colour-tertiary{background-color:#FF7272}.background-colour-hover-brand-1:hover,.background-colour-brand-1{background-color:#B30510}.background-colour-hover-brand-2:hover,.background-colour-brand-2{background-color:#6E0887}.background-colour-hover-brand-3:hover,.background-colour-brand-3{background-color:#50B400}.background-colour-hover-brand-4:hover,.background-colour-brand-4{background-color:#FFE500}.background-colour-hover-brand-5:hover,.background-colour-brand-5{background-color:#F07D00}.background-colour-hover-brand-cc-red:hover,.background-colour-brand-cc-red{background-color:#B30510}.background-colour-hover-brand-wgmf-purple:hover,.background-colour-brand-wgmf-purple{background-color:#6E0887}.background-colour-hover-brand-gmf-green:hover,.background-colour-brand-gmf-green{background-color:#50B400}.background-colour-hover-brand-emf-yellow:hover,.background-colour-brand-emf-yellow{background-color:#FFE500}.background-colour-hover-brand-c4c-orange:hover,.background-colour-brand-c4c-orange{background-color:#F07D00}.background-colour-hover-brand-afa-pink:hover,.background-colour-brand-afa-pink{background-color:#BF387D}.background-colour-hover-brand-mhf-turquoise:hover,.background-colour-brand-mhf-turquoise{background-color:#62CFC9}.background-colour-hover-brand-grey:hover,.background-colour-brand-grey{background-color:#CBC8C8}.background-colour-hover-white:hover,.background-colour-white{background-color:#FFFFFF}.background-colour-hover-black:hover,.background-colour-black{background-color:#000000}.background-colour-hover-grey-extra-light:hover,.background-colour-grey-extra-light{background-color:#D7D7D7}.background-colour-hover-grey-light:hover,.background-colour-grey-light{background-color:#E8E8E8}.background-colour-hover-grey-medium:hover,.background-colour-grey-medium{background-color:#8A8A8A}.background-colour-hover-grey-dark:hover,.background-colour-grey-dark{background-color:#4A4A4A}.background-colour-hover-brand-6:hover,.background-colour-brand-6{background-color:#62CFC9}.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-cc-red{fill:#B30510}.fill-brand-wgmf-purple{fill:#6E0887}.fill-brand-gmf-green{fill:#50B400}.fill-brand-emf-yellow{fill:#FFE500}.fill-brand-c4c-orange{fill:#F07D00}.fill-brand-afa-pink{fill:#BF387D}.fill-brand-mhf-turquoise{fill:#62CFC9}.fill-brand-grey{fill:#CBC8C8}.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-brand-6{fill:#CBC8C8}:host{display:contents}.container{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;display:flex;justify-content:flex-start}.container .label{padding-left:15px;font-size:11px;line-height:14px;width:60px;margin-top:auto;margin-bottom:auto}.category-icon-item{width:40px;height:40px;border-radius:50%;text-align:center;transition:all ease-in-out 0.5s;display:inline-block;margin-right:10px;width:30px;height:30px}.category-icon-item.colour-scheme-primary{background-color:#2C089B}.category-icon-item.colour-scheme-primary svg{fill:#FFFFFF}.category-icon-item.colour-scheme-secondary{background-color:#2AF135}.category-icon-item.colour-scheme-secondary svg{fill:#000000}.category-icon-item.colour-scheme-tertiary{background-color:#FF7272}.category-icon-item.colour-scheme-tertiary svg{fill:#000000}.category-icon-item.colour-scheme-brand-1{background-color:#B30510}.category-icon-item.colour-scheme-brand-1 svg{fill:#000000}.category-icon-item.colour-scheme-brand-2{background-color:#6E0887}.category-icon-item.colour-scheme-brand-2 svg{fill:#000000}.category-icon-item.colour-scheme-brand-3{background-color:#50B400}.category-icon-item.colour-scheme-brand-3 svg{fill:#000000}.category-icon-item.colour-scheme-brand-4{background-color:#FFE500}.category-icon-item.colour-scheme-brand-4 svg{fill:#000000}.category-icon-item.colour-scheme-brand-5{background-color:#F07D00}.category-icon-item.colour-scheme-brand-5 svg{fill:#000000}.category-icon-item.colour-scheme-mhf-turquoise{background-color:#62CFC9}.category-icon-item.colour-scheme-mhf-turquoise svg{fill:#000000}.category-icon-item.colour-scheme-brand-grey{background-color:#CBC8C8}.category-icon-item.colour-scheme-brand-grey svg{fill:#000000}.category-icon-item.colour-scheme-brand-6{background-color:#CBC8C8}.category-icon-item.colour-scheme-brand-6 svg{fill:#000000}.category-icon-item.colour-scheme-brand-afa-pink{background-color:#BF387D}.category-icon-item.colour-scheme-brand-afa-pink svg{fill:#000000}.category-icon-item.colour-scheme-white{background-color:#FFFFFF}.category-icon-item.colour-scheme-white svg{fill:#000000}.category-icon-item.colour-scheme-black{background-color:#000000}.category-icon-item.colour-scheme-black svg{fill:#FFFFFF}.category-icon-item.colour-scheme-black{background-color:#D7D7D7}.category-icon-item.colour-scheme-black svg{fill:#D7D7D7}.category-icon-item.colour-scheme-black{background-color:#E8E8E8}.category-icon-item.colour-scheme-black svg{fill:#E8E8E8}.category-icon-item.colour-scheme-black{background-color:#8A8A8A}.category-icon-item.colour-scheme-black svg{fill:#8A8A8A}.category-icon-item.colour-scheme-black{background-color:#4A4A4A}.category-icon-item.colour-scheme-black svg{fill:#4A4A4A}.category-icon-item:hover{background-color:#FFFFFF}.category-icon-item:hover svg{fill:#000000}.category-icon-item a{display:grid;position:relative;padding:10px;box-sizing:border-box;height:100%}.category-icon-item a svg{width:100%;height:100%}.category-icon-item a{padding:6px}";
+const BiggiveCategoryIconStyle0 = biggiveCategoryIconCss;
 
 const BiggiveCategoryIcon$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveCategoryIcon extends HTMLElement {
     constructor() {
@@ -20,7 +21,7 @@ const BiggiveCategoryIcon$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveCate
     render() {
         return (h("div", { class: "container" }, h("div", { class: 'category-icon-item background-colour-' + this.backgroundColour }, h("a", { href: this.url }, h("svg", { width: this.getCategoryIcon().icon[0], height: this.getCategoryIcon().icon[1], xmlns: "http://www.w3.org/2000/svg", class: 'fill-' + this.iconColour, viewBox: '0 0 ' + this.getCategoryIcon().icon[0] + ' ' + this.getCategoryIcon().icon[1] }, h("path", { d: this.getCategoryIcon().icon[4].toString() })))), h("div", { class: "label" }, this.label)));
     }
-    static get style() { return biggiveCategoryIconCss; }
+    static get style() { return BiggiveCategoryIconStyle0; }
 }, [0, "biggive-category-icon", {
         "backgroundColour": [1, "background-colour"],
         "iconColour": [1, "icon-colour"],

package/dist/components/biggive-category-icon.js.map

@@ -1 +1 @@
-{"file":"biggive-category-icon.js","mappings":";;;AAAA,MAAM,sBAAsB,GAAG,u4LAAu4L;;MCSz5LA,qBAAmB;;;;gCAIK,SAAS;0BAKf,OAAO;;;mBAcd,GAAG;;IAEjB,eAAe;QACrB,IAAI,IAAI,GAAG,uBAAuB,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC9D,OAAO,IAAI,CAAC;KACb;IAED,MAAM;QACJ,QACE,WAAK,KAAK,EAAC,WAAW,IACpB,WAAK,KAAK,EAAE,uCAAuC,GAAG,IAAI,CAAC,gBAAgB,IACzE,SAAG,IAAI,EAAE,IAAI,CAAC,GAAG,IACf,WACE,KAAK,EAAE,IAAI,CAAC,eAAe,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,EACrC,MAAM,EAAE,IAAI,CAAC,eAAe,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,EACtC,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC,UAAU,EAChC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,GAAG,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,IAEvF,YAAM,CAAC,EAAE,IAAI,CAAC,eAAe,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,GAAI,CAClD,CACJ,CACA,EACN,WAAK,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAO,CACjC,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveCategoryIcon"],"sources":["src/components/biggive-category-icon/biggive-category-icon.scss?tag=biggive-category-icon","src/components/biggive-category-icon/biggive-category-icon.tsx"],"sourcesContent":["@include backgrounds();\n@include fills();\n\n:host {\n  display: contents;\n}\n\n.container {\n  @include standard-font();\n  display: flex;\n  justify-content: flex-start;\n  .label {\n    padding-left: $spacer-3;\n    @include font-size-x-small();\n    width: 60px;\n    margin-top: auto;\n    margin-bottom: auto;\n  }\n}\n\n.category-icon-item {\n  @include icon-medium();\n}","import { IconDefinition } from '@fortawesome/fontawesome-svg-core';\nimport { Component, Prop, h } from '@stencil/core';\nimport { FontAwesomeIconsService } from '../../util/fontawesome-icons';\n\n@Component({\n  tag: 'biggive-category-icon',\n  styleUrl: 'biggive-category-icon.scss',\n  shadow: false,\n})\nexport class BiggiveCategoryIcon {\n  /**\n   * Background colour\n   */\n  @Prop() backgroundColour: string = 'primary';\n\n  /**\n   * Background colour\n   */\n  @Prop() iconColour: string = 'white';\n  /**\n   * Icon\n   */\n  @Prop() icon: string;\n\n  /**\n   * Label\n   */\n  @Prop() label: string;\n\n  /**\n   * Url\n   */\n  @Prop() url: string = '#';\n\n  private getCategoryIcon(): IconDefinition {\n    var icon = FontAwesomeIconsService.getCategoryIcon(this.icon);\n    return icon;\n  }\n\n  render() {\n    return (\n      <div class=\"container\">\n        <div class={'category-icon-item background-colour-' + this.backgroundColour}>\n          <a href={this.url}>\n            <svg\n              width={this.getCategoryIcon().icon[0]}\n              height={this.getCategoryIcon().icon[1]}\n              xmlns=\"http://www.w3.org/2000/svg\"\n              class={'fill-' + this.iconColour}\n              viewBox={'0 0 ' + this.getCategoryIcon().icon[0] + ' ' + this.getCategoryIcon().icon[1]}\n            >\n              <path d={this.getCategoryIcon().icon[4].toString()} />\n            </svg>\n          </a>\n        </div>\n        <div class=\"label\">{this.label}</div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"biggive-category-icon.js","mappings":";;;AAAA,MAAM,sBAAsB,GAAG,u4LAAu4L,CAAC;AACv6L,kCAAe,sBAAsB;;MCQxBA,qBAAmB;;;;gCAIK,SAAS;0BAKf,OAAO;;;mBAcd,GAAG;;IAEjB,eAAe;QACrB,IAAI,IAAI,GAAG,uBAAuB,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC9D,OAAO,IAAI,CAAC;KACb;IAED,MAAM;QACJ,QACE,WAAK,KAAK,EAAC,WAAW,IACpB,WAAK,KAAK,EAAE,uCAAuC,GAAG,IAAI,CAAC,gBAAgB,IACzE,SAAG,IAAI,EAAE,IAAI,CAAC,GAAG,IACf,WACE,KAAK,EAAE,IAAI,CAAC,eAAe,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,EACrC,MAAM,EAAE,IAAI,CAAC,eAAe,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,EACtC,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC,UAAU,EAChC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,GAAG,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,IAEvF,YAAM,CAAC,EAAE,IAAI,CAAC,eAAe,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,GAAI,CAClD,CACJ,CACA,EACN,WAAK,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAO,CACjC,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveCategoryIcon"],"sources":["src/components/biggive-category-icon/biggive-category-icon.scss?tag=biggive-category-icon","src/components/biggive-category-icon/biggive-category-icon.tsx"],"sourcesContent":["@include backgrounds();\n@include fills();\n\n:host {\n  display: contents;\n}\n\n.container {\n  @include standard-font();\n  display: flex;\n  justify-content: flex-start;\n  .label {\n    padding-left: $spacer-3;\n    @include font-size-x-small();\n    width: 60px;\n    margin-top: auto;\n    margin-bottom: auto;\n  }\n}\n\n.category-icon-item {\n  @include icon-medium();\n}","import { IconDefinition } from '@fortawesome/fontawesome-svg-core';\nimport { Component, Prop, h } from '@stencil/core';\nimport { FontAwesomeIconsService } from '../../util/fontawesome-icons';\n\n@Component({\n  tag: 'biggive-category-icon',\n  styleUrl: 'biggive-category-icon.scss',\n  shadow: false,\n})\nexport class BiggiveCategoryIcon {\n  /**\n   * Background colour\n   */\n  @Prop() backgroundColour: string = 'primary';\n\n  /**\n   * Background colour\n   */\n  @Prop() iconColour: string = 'white';\n  /**\n   * Icon\n   */\n  @Prop() icon: string;\n\n  /**\n   * Label\n   */\n  @Prop() label: string;\n\n  /**\n   * Url\n   */\n  @Prop() url: string = '#';\n\n  private getCategoryIcon(): IconDefinition {\n    var icon = FontAwesomeIconsService.getCategoryIcon(this.icon);\n    return icon;\n  }\n\n  render() {\n    return (\n      <div class=\"container\">\n        <div class={'category-icon-item background-colour-' + this.backgroundColour}>\n          <a href={this.url}>\n            <svg\n              width={this.getCategoryIcon().icon[0]}\n              height={this.getCategoryIcon().icon[1]}\n              xmlns=\"http://www.w3.org/2000/svg\"\n              class={'fill-' + this.iconColour}\n              viewBox={'0 0 ' + this.getCategoryIcon().icon[0] + ' ' + this.getCategoryIcon().icon[1]}\n            >\n              <path d={this.getCategoryIcon().icon[4].toString()} />\n            </svg>\n          </a>\n        </div>\n        <div class=\"label\">{this.label}</div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/biggive-cookie-banner.js

@@ -3,6 +3,7 @@ import { d as defineCustomElement$3 } from './biggive-button2.js';
 import { d as defineCustomElement$2 } from './biggive-popup2.js';
 
 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-cc-red:hover,.background-colour-brand-cc-red{background-color:#B30510}.background-colour-hover-brand-wgmf-purple:hover,.background-colour-brand-wgmf-purple{background-color:#6E0887}.background-colour-hover-brand-gmf-green:hover,.background-colour-brand-gmf-green{background-color:#50B400}.background-colour-hover-brand-emf-yellow:hover,.background-colour-brand-emf-yellow{background-color:#FFE500}.background-colour-hover-brand-c4c-orange:hover,.background-colour-brand-c4c-orange{background-color:#F07D00}.background-colour-hover-brand-afa-pink:hover,.background-colour-brand-afa-pink{background-color:#BF387D}.background-colour-hover-brand-mhf-turquoise:hover,.background-colour-brand-mhf-turquoise{background-color:#62CFC9}.background-colour-hover-brand-grey:hover,.background-colour-brand-grey{background-color:#CBC8C8}.background-colour-hover-white:hover,.background-colour-white{background-color:#FFFFFF}.background-colour-hover-black:hover,.background-colour-black{background-color:#000000}.background-colour-hover-grey-extra-light:hover,.background-colour-grey-extra-light{background-color:#D7D7D7}.background-colour-hover-grey-light:hover,.background-colour-grey-light{background-color:#E8E8E8}.background-colour-hover-grey-medium:hover,.background-colour-grey-medium{background-color:#8A8A8A}.background-colour-hover-grey-dark:hover,.background-colour-grey-dark{background-color:#4A4A4A}.background-colour-hover-brand-6:hover,.background-colour-brand-6{background-color:#62CFC9}.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-cc-red{fill:#B30510}.fill-brand-wgmf-purple{fill:#6E0887}.fill-brand-gmf-green{fill:#50B400}.fill-brand-emf-yellow{fill:#FFE500}.fill-brand-c4c-orange{fill:#F07D00}.fill-brand-afa-pink{fill:#BF387D}.fill-brand-mhf-turquoise{fill:#62CFC9}.fill-brand-grey{fill:#CBC8C8}.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-brand-6{fill:#CBC8C8}.space-above-0{margin-top:0}.space-above-1{margin-top:5px}.space-above-2{margin-top:10px}.space-above-3{margin-top:15px}.space-above-4{margin-top:30px}.space-above-5{margin-top:45px}.space-above-6{margin-top:60px}.space-below-0{margin-bottom:0}.space-below-1{margin-bottom:5px}.space-below-2{margin-bottom:10px}.space-below-3{margin-bottom:15px}.space-below-4{margin-bottom:30px}.space-below-5{margin-bottom:45px}.space-below-6{margin-bottom:60px}.text-colour-hover-primary:hover,.text-colour-primary{color:#2C089B}.text-colour-hover-secondary:hover,.text-colour-secondary{color:#2AF135}.text-colour-hover-tertiary:hover,.text-colour-tertiary{color:#FF7272}.text-colour-hover-brand-1:hover,.text-colour-brand-1{color:#B30510}.text-colour-hover-brand-2:hover,.text-colour-brand-2{color:#6E0887}.text-colour-hover-brand-3:hover,.text-colour-brand-3{color:#50B400}.text-colour-hover-brand-4:hover,.text-colour-brand-4{color:#FFE500}.text-colour-hover-brand-5:hover,.text-colour-brand-5{color:#F07D00}.text-colour-hover-brand-cc-red:hover,.text-colour-brand-cc-red{color:#B30510}.text-colour-hover-brand-wgmf-purple:hover,.text-colour-brand-wgmf-purple{color:#6E0887}.text-colour-hover-brand-gmf-green:hover,.text-colour-brand-gmf-green{color:#50B400}.text-colour-hover-brand-emf-yellow:hover,.text-colour-brand-emf-yellow{color:#FFE500}.text-colour-hover-brand-c4c-orange:hover,.text-colour-brand-c4c-orange{color:#F07D00}.text-colour-hover-brand-afa-pink:hover,.text-colour-brand-afa-pink{color:#BF387D}.text-colour-hover-brand-mhf-turquoise:hover,.text-colour-brand-mhf-turquoise{color:#62CFC9}.text-colour-hover-brand-grey:hover,.text-colour-brand-grey{color:#CBC8C8}.text-colour-hover-white:hover,.text-colour-white{color:#FFFFFF}.text-colour-hover-black:hover,.text-colour-black{color:#000000}.text-colour-hover-grey-extra-light:hover,.text-colour-grey-extra-light{color:#D7D7D7}.text-colour-hover-grey-light:hover,.text-colour-grey-light{color:#E8E8E8}.text-colour-hover-grey-medium:hover,.text-colour-grey-medium{color:#8A8A8A}.text-colour-hover-grey-dark:hover,.text-colour-grey-dark{color:#4A4A4A}.text-colour-hover-brand-6:hover,.text-colour-brand-6{color:#CBC8C8}:host{display:contents}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{max-height:95vh;overflow:auto}biggive-popup div.content h5{border-bottom:2px solid black;max-width:25em;margin-bottom:5px}biggive-popup div.content p{margin-top:5px;margin-bottom:8px}biggive-popup div.content div.radio-group{margin-bottom:30px}";
+const BiggiveCookieBannerStyle0 = biggiveCookieBannerCss;
 
 const BiggiveCookieBanner$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveCookieBanner extends HTMLElement {
     constructor() {
@@ -36,7 +37,7 @@ const BiggiveCookieBanner$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveCook
         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 Cookies"), h("p", null, "These cookies are necessary to ensure our website functions correctly and include required cookies from third parties."), 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, "Analytics & Testing Cookies"), h("p", null, "We use analytics cookies to track activity on our website. For example, the pages you\u2019ve visited, the content you\u2019ve engaged with and the search terms you\u2019ve used. This allows us to personalise and improve our content."), h("p", null, "We use testing cookies to collect data on how you interact with website features. These insights allow us to update our website and build features that enhance your user experience."), h("input", { type: "radio", name: "a-and-t", id: "a-and-t-off", checked: true }), h("label", { htmlFor: "a-and-t-off" }, "Off"), h("input", { type: "radio", name: "a-and-t", id: "a-and-t-on" }), h("label", { htmlFor: "a-and-t-on" }, "On")), h("div", { class: "radio-group" }, h("h5", null, "Third-party Cookies "), h("p", null, "These cookies are used to track activity, which can help to provide a better experience and improve functionality across various applications. For example, our donation experience survey."), h("input", { type: "radio", name: "third-party", id: "third-party-off", checked: true }), h("label", { htmlFor: "third-party-off" }, "Off"), h("input", { type: "radio", name: "third-party", id: "third-party-on" }), h("label", { htmlFor: "third-party-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" }))));
     }
     get el() { return this; }
-    static get style() { return biggiveCookieBannerCss; }
+    static get style() { return BiggiveCookieBannerStyle0; }
 }, [1, "biggive-cookie-banner", {
         "blogUriPrefix": [1, "blog-uri-prefix"]
     }]);

package/dist/components/biggive-cookie-banner.js.map

@@ -1 +1 @@
-{"file":"biggive-cookie-banner.js","mappings":"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","names":["BiggiveCookieBanner"],"sources":["src/components/biggive-cookie-banner/biggive-cookie-banner.scss?tag=biggive-cookie-banner&encapsulation=shadow","src/components/biggive-cookie-banner/biggive-cookie-banner.tsx"],"sourcesContent":["@include backgrounds();\n@include fills();\n@include spacers();\n@include text-colours();\n\n:host {\n  display: contents;\n}\n\nh2:first-child {\n  // padding of the container is enough, a top margin would make the banner unsymmetrical.\n  margin-top: 0;\n}\n\ndiv.cooke-consent-container {\n  @include standard-font();\n  @include font-size-small();\n  border-radius: 10px;\n  background: white;\n  border: 1px solid black;\n  max-width: 500px;\n  padding: 1em;\n}\n\ndiv.button-group {\n  margin-top: 1em;\n  display: flex;\n  justify-content: space-evenly;\n  width: 100%;\n  flex-direction: column;\n  gap: 1em;\n\n  @media screen and (min-width: $screen-mobile-medium) {\n    flex-direction: row-reverse;\n  }\n}\n\nbiggive-popup {\n  @include font-size-medium();\n  div.content {\n    max-height: 95vh;\n    overflow: auto;\n    h5 {\n      border-bottom: 2px solid black;\n      max-width: 25em;\n      margin-bottom: 5px;\n    }\n\n    p {\n      margin-top: 5px;\n      margin-bottom: 8px;\n    }\n\n    div.radio-group {\n      margin-bottom: 30px;\n    }\n  }\n}\n","import { Component, Element, Prop, h, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-cookie-banner',\n  styleUrl: 'biggive-cookie-banner.scss',\n  shadow: true,\n})\nexport class BiggiveCookieBanner {\n  @Prop() blogUriPrefix!: string;\n  @Element() el: HTMLBiggiveCookieBannerElement;\n\n  /**\n   * Indicates that the user accepts cookies for any purpose, without discrimination.\n   */\n  @Event({\n    eventName: 'cookieBannerAcceptAllSelected',\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  cookieBannerAcceptAllSelected: EventEmitter<void>;\n\n  /**\n   * Indicates that the user has made a selection of cookies purpose to accept.\n   *\n   * Event data is an object with boolean properties to say whether the user accepts or refuses each category of optional cookie.\n   */\n  @Event({\n    eventName: 'cookieBannerSavePreferencesSelected',\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  cookieBannerSavePreferencesSelected: EventEmitter<{ analyticsAndTesting: Boolean; thirdParty: boolean }>;\n\n  private handleChoosePrefencesClick = () => {\n    const elementById = this.el.shadowRoot?.getElementById('cookie-preferences-popup') as HTMLBiggivePopupElement;\n    elementById.openFromOutside();\n  };\n\n  private handleAcceptSelectedCookies = () => {\n    const elementById = this.el.shadowRoot?.getElementById('cookie-preferences-popup') as HTMLBiggivePopupElement;\n    elementById.closeFromOutside();\n\n    const analyticsAndTestingRadio = this.el.shadowRoot?.getElementById('a-and-t-on') as HTMLInputElement;\n    const thirdPartyRadio = this.el.shadowRoot?.getElementById('third-party-on') as HTMLInputElement;\n\n    this.cookieBannerSavePreferencesSelected.emit({ analyticsAndTesting: analyticsAndTestingRadio.checked, thirdParty: thirdPartyRadio.checked });\n\n    elementById.closeFromOutside();\n  };\n\n  private handleAcceptAllClick = () => {\n    // We just emit the event - it will be up to the application, e.g. wp or frontend to listen for the event, record the acceptence, and make\n    // and make this component disappear.\n\n    this.cookieBannerAcceptAllSelected.emit();\n  };\n\n  render() {\n    return (\n      <div class=\"cooke-consent-container\">\n        <biggive-popup id=\"cookie-preferences-popup\">\n          <div class=\"content\">\n            <h4 class=\"space-above-0 space-below-3 text-colour-primary\">Manage your cookie preferences</h4>\n            <form>\n              <div class=\"radio-group\">\n                <h5>Essential Cookies</h5>\n                <p>These cookies are necessary to ensure our website functions correctly and include required cookies from third parties.</p>\n                <input type=\"radio\" name=\"necassary\" id=\"necassary-off\" disabled={true} />\n                <label htmlFor=\"necassary-on\">Off</label>\n\n                <input type=\"radio\" name=\"necassary\" id=\"necassary-on\" disabled={true} checked={true} />\n                <label htmlFor=\"necassary-on\">On</label>\n              </div>\n\n              <div class=\"radio-group\">\n                <h5>Analytics & Testing Cookies</h5>\n                <p>\n                  We use analytics cookies to track activity on our website. For example, the pages you’ve visited, the content you’ve engaged with and the search terms you’ve\n                  used. This allows us to personalise and improve our content.\n                </p>\n\n                <p>\n                  We use testing cookies to collect data on how you interact with website features. These insights allow us to update our website and build features that enhance\n                  your user experience.\n                </p>\n                <input type=\"radio\" name=\"a-and-t\" id=\"a-and-t-off\" checked={true} />\n                <label htmlFor=\"a-and-t-off\">Off</label>\n\n                <input type=\"radio\" name=\"a-and-t\" id=\"a-and-t-on\" />\n                <label htmlFor=\"a-and-t-on\">On</label>\n              </div>\n\n              <div class=\"radio-group\">\n                <h5>Third-party Cookies </h5>\n                <p>\n                  These cookies are used to track activity, which can help to provide a better experience and improve functionality across various applications. For example, our\n                  donation experience survey.\n                </p>\n                <input type=\"radio\" name=\"third-party\" id=\"third-party-off\" checked={true} />\n                <label htmlFor=\"third-party-off\">Off</label>\n\n                <input type=\"radio\" name=\"third-party\" id=\"third-party-on\" />\n                <label htmlFor=\"third-party-on\">On</label>\n              </div>\n\n              <biggive-button\n                space-below=\"0\"\n                space-above=\"2\"\n                colour-scheme=\"secondary\"\n                is-past-campaign=\"false\"\n                is-future-campaign=\"false\"\n                label=\"Accept Selected Cookies\"\n                open-in-new-tab=\"false\"\n                full-width=\"false\"\n                size=\"small\"\n                rounded={false}\n                centered={false}\n                button-id=\"accept-selected-button\"\n                onClick={this.handleAcceptSelectedCookies}\n              ></biggive-button>\n            </form>\n          </div>\n        </biggive-popup>\n\n        <h2>Our website uses cookies</h2>\n\n        <p>\n          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\n          website and make improvements.\n        </p>\n\n        <p>\n          <a href={this.blogUriPrefix + '/privacy'}>Find out more in our Privacy Policy</a>\n        </p>\n\n        <div class=\"button-group\">\n          <biggive-button\n            onClick={this.handleAcceptAllClick}\n            space-below=\"0\"\n            colour-scheme=\"secondary\"\n            is-past-campaign=\"false\"\n            is-future-campaign=\"false\"\n            label=\"Accept All\"\n            open-in-new-tab=\"false\"\n            full-width=\"true\"\n            size=\"medium\"\n            rounded={false}\n            centered={false}\n            button-id=\"accept-all-button\"\n          ></biggive-button>\n\n          <biggive-button\n            onClick={this.handleChoosePrefencesClick}\n            space-below=\"0\"\n            colour-scheme=\"grey-light\"\n            is-past-campaign=\"false\"\n            is-future-campaign=\"false\"\n            label=\"Choose Preferences\"\n            open-in-new-tab=\"false\"\n            full-width=\"true\"\n            size=\"medium\"\n            rounded={false}\n            centered={false}\n            button-id=\"choose-preferences-button\"\n          ></biggive-button>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"biggive-cookie-banner.js","mappings":"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","names":["BiggiveCookieBanner"],"sources":["src/components/biggive-cookie-banner/biggive-cookie-banner.scss?tag=biggive-cookie-banner&encapsulation=shadow","src/components/biggive-cookie-banner/biggive-cookie-banner.tsx"],"sourcesContent":["@include backgrounds();\n@include fills();\n@include spacers();\n@include text-colours();\n\n:host {\n  display: contents;\n}\n\nh2:first-child {\n  // padding of the container is enough, a top margin would make the banner unsymmetrical.\n  margin-top: 0;\n}\n\ndiv.cooke-consent-container {\n  @include standard-font();\n  @include font-size-small();\n  border-radius: 10px;\n  background: white;\n  border: 1px solid black;\n  max-width: 500px;\n  padding: 1em;\n}\n\ndiv.button-group {\n  margin-top: 1em;\n  display: flex;\n  justify-content: space-evenly;\n  width: 100%;\n  flex-direction: column;\n  gap: 1em;\n\n  @media screen and (min-width: $screen-mobile-medium) {\n    flex-direction: row-reverse;\n  }\n}\n\nbiggive-popup {\n  @include font-size-medium();\n  div.content {\n    max-height: 95vh;\n    overflow: auto;\n    h5 {\n      border-bottom: 2px solid black;\n      max-width: 25em;\n      margin-bottom: 5px;\n    }\n\n    p {\n      margin-top: 5px;\n      margin-bottom: 8px;\n    }\n\n    div.radio-group {\n      margin-bottom: 30px;\n    }\n  }\n}\n","import { Component, Element, Prop, h, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-cookie-banner',\n  styleUrl: 'biggive-cookie-banner.scss',\n  shadow: true,\n})\nexport class BiggiveCookieBanner {\n  @Prop() blogUriPrefix!: string;\n  @Element() el: HTMLBiggiveCookieBannerElement;\n\n  /**\n   * Indicates that the user accepts cookies for any purpose, without discrimination.\n   */\n  @Event({\n    eventName: 'cookieBannerAcceptAllSelected',\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  cookieBannerAcceptAllSelected: EventEmitter<void>;\n\n  /**\n   * Indicates that the user has made a selection of cookies purpose to accept.\n   *\n   * Event data is an object with boolean properties to say whether the user accepts or refuses each category of optional cookie.\n   */\n  @Event({\n    eventName: 'cookieBannerSavePreferencesSelected',\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  cookieBannerSavePreferencesSelected: EventEmitter<{ analyticsAndTesting: Boolean; thirdParty: boolean }>;\n\n  private handleChoosePrefencesClick = () => {\n    const elementById = this.el.shadowRoot?.getElementById('cookie-preferences-popup') as HTMLBiggivePopupElement;\n    elementById.openFromOutside();\n  };\n\n  private handleAcceptSelectedCookies = () => {\n    const elementById = this.el.shadowRoot?.getElementById('cookie-preferences-popup') as HTMLBiggivePopupElement;\n    elementById.closeFromOutside();\n\n    const analyticsAndTestingRadio = this.el.shadowRoot?.getElementById('a-and-t-on') as HTMLInputElement;\n    const thirdPartyRadio = this.el.shadowRoot?.getElementById('third-party-on') as HTMLInputElement;\n\n    this.cookieBannerSavePreferencesSelected.emit({ analyticsAndTesting: analyticsAndTestingRadio.checked, thirdParty: thirdPartyRadio.checked });\n\n    elementById.closeFromOutside();\n  };\n\n  private handleAcceptAllClick = () => {\n    // We just emit the event - it will be up to the application, e.g. wp or frontend to listen for the event, record the acceptence, and make\n    // and make this component disappear.\n\n    this.cookieBannerAcceptAllSelected.emit();\n  };\n\n  render() {\n    return (\n      <div class=\"cooke-consent-container\">\n        <biggive-popup id=\"cookie-preferences-popup\">\n          <div class=\"content\">\n            <h4 class=\"space-above-0 space-below-3 text-colour-primary\">Manage your cookie preferences</h4>\n            <form>\n              <div class=\"radio-group\">\n                <h5>Essential Cookies</h5>\n                <p>These cookies are necessary to ensure our website functions correctly and include required cookies from third parties.</p>\n                <input type=\"radio\" name=\"necassary\" id=\"necassary-off\" disabled={true} />\n                <label htmlFor=\"necassary-on\">Off</label>\n\n                <input type=\"radio\" name=\"necassary\" id=\"necassary-on\" disabled={true} checked={true} />\n                <label htmlFor=\"necassary-on\">On</label>\n              </div>\n\n              <div class=\"radio-group\">\n                <h5>Analytics & Testing Cookies</h5>\n                <p>\n                  We use analytics cookies to track activity on our website. For example, the pages you’ve visited, the content you’ve engaged with and the search terms you’ve\n                  used. This allows us to personalise and improve our content.\n                </p>\n\n                <p>\n                  We use testing cookies to collect data on how you interact with website features. These insights allow us to update our website and build features that enhance\n                  your user experience.\n                </p>\n                <input type=\"radio\" name=\"a-and-t\" id=\"a-and-t-off\" checked={true} />\n                <label htmlFor=\"a-and-t-off\">Off</label>\n\n                <input type=\"radio\" name=\"a-and-t\" id=\"a-and-t-on\" />\n                <label htmlFor=\"a-and-t-on\">On</label>\n              </div>\n\n              <div class=\"radio-group\">\n                <h5>Third-party Cookies </h5>\n                <p>\n                  These cookies are used to track activity, which can help to provide a better experience and improve functionality across various applications. For example, our\n                  donation experience survey.\n                </p>\n                <input type=\"radio\" name=\"third-party\" id=\"third-party-off\" checked={true} />\n                <label htmlFor=\"third-party-off\">Off</label>\n\n                <input type=\"radio\" name=\"third-party\" id=\"third-party-on\" />\n                <label htmlFor=\"third-party-on\">On</label>\n              </div>\n\n              <biggive-button\n                space-below=\"0\"\n                space-above=\"2\"\n                colour-scheme=\"secondary\"\n                is-past-campaign=\"false\"\n                is-future-campaign=\"false\"\n                label=\"Accept Selected Cookies\"\n                open-in-new-tab=\"false\"\n                full-width=\"false\"\n                size=\"small\"\n                rounded={false}\n                centered={false}\n                button-id=\"accept-selected-button\"\n                onClick={this.handleAcceptSelectedCookies}\n              ></biggive-button>\n            </form>\n          </div>\n        </biggive-popup>\n\n        <h2>Our website uses cookies</h2>\n\n        <p>\n          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\n          website and make improvements.\n        </p>\n\n        <p>\n          <a href={this.blogUriPrefix + '/privacy'}>Find out more in our Privacy Policy</a>\n        </p>\n\n        <div class=\"button-group\">\n          <biggive-button\n            onClick={this.handleAcceptAllClick}\n            space-below=\"0\"\n            colour-scheme=\"secondary\"\n            is-past-campaign=\"false\"\n            is-future-campaign=\"false\"\n            label=\"Accept All\"\n            open-in-new-tab=\"false\"\n            full-width=\"true\"\n            size=\"medium\"\n            rounded={false}\n            centered={false}\n            button-id=\"accept-all-button\"\n          ></biggive-button>\n\n          <biggive-button\n            onClick={this.handleChoosePrefencesClick}\n            space-below=\"0\"\n            colour-scheme=\"grey-light\"\n            is-past-campaign=\"false\"\n            is-future-campaign=\"false\"\n            label=\"Choose Preferences\"\n            open-in-new-tab=\"false\"\n            full-width=\"true\"\n            size=\"medium\"\n            rounded={false}\n            centered={false}\n            button-id=\"choose-preferences-button\"\n          ></biggive-button>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/biggive-filtered-carousel.js

@@ -2,6 +2,7 @@ import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/clien
 import { d as defineCustomElement$2 } from './biggive-carousel2.js';
 
 const biggiveFilteredCarouselCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}:host{display:block}.filters{margin-bottom:15px}.filters .button{cursor:pointer;border-radius:20px;padding:5px 20px;margin-right:15px;font-size:13px;line-height:17px;background-color:#FF7272;color:#000000;border-color:#FF7272}.filters .button.active{background-color:#000000;border-color:#000000;color:#FFFFFF}.filters .clear{padding:5px;height:26px;width:26px;text-align:center}.filters .clear svg{top:3px;left:0.5px;position:relative;height:16px;width:16px;transform:rotate(45deg)}";
+const BiggiveFilteredCarouselStyle0 = biggiveFilteredCarouselCss;
 
 const BiggiveFilteredCarousel$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveFilteredCarousel extends HTMLElement {
     constructor() {
@@ -88,7 +89,7 @@ const BiggiveFilteredCarousel$1 = /*@__PURE__*/ proxyCustomElement(class Biggive
         return (h("div", { class: 'container space-below-' + this.spaceBelow }, h("div", { class: "filters" }), h("biggive-carousel", { "space-below": "1", "column-count": this.columnCount, "button-background-colour": this.buttonBackgroundColour, "button-icon-colour": this.buttonIconColour })));
     }
     get host() { return this; }
-    static get style() { return biggiveFilteredCarouselCss; }
+    static get style() { return BiggiveFilteredCarouselStyle0; }
 }, [1, "biggive-filtered-carousel", {
         "spaceBelow": [2, "space-below"],
         "columnCount": [2, "column-count"],

package/dist/components/biggive-filtered-carousel.js.map

@@ -1 +1 @@
-{"file":"biggive-filtered-carousel.js","mappings":"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","names":["BiggiveFilteredCarousel"],"sources":["src/components/biggive-filtered-carousel/biggive-filtered-carousel.scss?tag=biggive-filtered-carousel&encapsulation=shadow","src/components/biggive-filtered-carousel/biggive-filtered-carousel.tsx"],"sourcesContent":["\n\n\n:host {\n  display: block;\n}\n\n\n.filters {\n  margin-bottom: $spacer-3;\n  .button {\n    cursor: pointer;\n    border-radius: 20px;\n    padding: 5px 20px;\n    margin-right: 15px;\n    @include font-size-small();\n    background-color: $colour-tertiary-coral;\n    color: $colour-black;\n    border-color: $colour-tertiary-coral;\n    &.active {\n      background-color: $colour-black;\n      border-color: $colour-black;\n      color: $colour-white;\n    }\n  }\n  .clear {\n    padding: 5px;\n    height: 26px;\n    width: 26px;\n    text-align: center;\n    svg {\n      top: 3px;\n      left: 0.5px;\n      position: relative;\n      height: 16px;\n      width: 16px;\n      transform: rotate(45deg);\n    }\n  }\n}","import { Component, Prop, Element, h } from '@stencil/core';\nimport { brandColour } from '../../globals/brand-colour';\nimport { spacingOption } from '../../globals/spacing-option';\n\n@Component({\n  tag: 'biggive-filtered-carousel',\n  styleUrl: 'biggive-filtered-carousel.scss',\n  shadow: true,\n})\nexport class BiggiveFilteredCarousel {\n  @Element() host: HTMLBiggiveFilteredCarouselElement;\n\n  @Prop() spaceBelow: spacingOption = 4;\n\n  @Prop() columnCount: 1 | 2 | 3 | 4 | 5 = 3;\n\n  @Prop() buttonBackgroundColour: brandColour = 'white';\n\n  @Prop() buttonIconColour: brandColour = 'primary';\n\n  private children: Array<HTMLElement>;\n\n  componentDidLoad() {\n    const carousel: HTMLBiggiveCarouselElement = this.host.shadowRoot?.querySelector('biggive-carousel')!;\n    const filterWrap = this.host.shadowRoot?.querySelector('.filters')!;\n\n    this.children = new Array<HTMLElement>();\n\n    Array.from(this.host.children).forEach(item => {\n      this.children.push(item as HTMLElement);\n    });\n\n    let filters: string[] = [];\n\n    this.children.forEach(item => {\n      carousel.appendChild(item);\n\n      let itemFilters: string[] = [];\n\n      if (item.getAttribute('filters') != null) {\n        itemFilters = item.getAttribute('filters')?.split('|') ?? [];\n        filters.push(...itemFilters);\n      }\n\n      item.dataset['filters'] = JSON.stringify(itemFilters);\n    });\n\n    filters = [...new Set(filters)];\n\n    filters.forEach(filter => {\n      var button = document.createElement('span');\n      button.innerHTML = filter;\n      button.classList.add('button');\n      button.classList.add('apply');\n      button.setAttribute('data-filter', filter);\n      button.addEventListener('click', e => {\n        const button = e.target as HTMLElement;\n\n        button.classList.toggle('active');\n\n        let appliedFilters: string[] = [];\n        let buttons = this.host.shadowRoot?.querySelectorAll('.filters span.button.active');\n        buttons?.forEach(button => {\n          appliedFilters.push(button.getAttribute('data-filter')!);\n        });\n\n        this.children.forEach(item => {\n          let itemFilters: string[] = JSON.parse(item.dataset['filters']!);\n\n          if (appliedFilters.length == 0 || appliedFilters.filter(x => itemFilters.includes(x)).length > 0) {\n            item.classList.remove('hidden');\n          } else {\n            item.classList.add('hidden');\n          }\n        });\n\n        carousel.resizeToFitContent();\n      });\n\n      filterWrap.appendChild(button);\n    });\n\n    var clear = document.createElement('span');\n    clear.innerHTML =\n      '<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path stroke-color=\"1\" stroke=\"#000000\" d=\"M11 11v-11h1v11h11v1h-11v11h-1v-11h-11v-1h11z\" /></svg>';\n    clear.classList.add('button');\n    clear.classList.add('clear');\n    clear.addEventListener('click', () => {\n      filterWrap.querySelectorAll('.apply').forEach(button => {\n        button.classList.remove('active');\n      });\n\n      this.children.forEach(item => {\n        item.classList.remove('hidden');\n      });\n\n      carousel.resizeToFitContent();\n    });\n\n    filterWrap.appendChild(clear);\n\n    /*\n    Check added to confirm that carousel variable is set with a valid carousel. Ommiting this check fails the npm test - although works fine at runtime in browser.\n    @todo Pass a null fn in the test so it passes without this workaround?\n    */\n    if (typeof carousel.resizeToFitContent === 'function') {\n      carousel.resizeToFitContent();\n    }\n  }\n\n  render() {\n    return (\n      <div class={'container space-below-' + this.spaceBelow}>\n        <div class=\"filters\"></div>\n        <biggive-carousel\n          space-below=\"1\"\n          column-count={this.columnCount}\n          button-background-colour={this.buttonBackgroundColour}\n          button-icon-colour={this.buttonIconColour}\n        ></biggive-carousel>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"biggive-filtered-carousel.js","mappings":"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","names":["BiggiveFilteredCarousel"],"sources":["src/components/biggive-filtered-carousel/biggive-filtered-carousel.scss?tag=biggive-filtered-carousel&encapsulation=shadow","src/components/biggive-filtered-carousel/biggive-filtered-carousel.tsx"],"sourcesContent":["\n\n\n:host {\n  display: block;\n}\n\n\n.filters {\n  margin-bottom: $spacer-3;\n  .button {\n    cursor: pointer;\n    border-radius: 20px;\n    padding: 5px 20px;\n    margin-right: 15px;\n    @include font-size-small();\n    background-color: $colour-tertiary-coral;\n    color: $colour-black;\n    border-color: $colour-tertiary-coral;\n    &.active {\n      background-color: $colour-black;\n      border-color: $colour-black;\n      color: $colour-white;\n    }\n  }\n  .clear {\n    padding: 5px;\n    height: 26px;\n    width: 26px;\n    text-align: center;\n    svg {\n      top: 3px;\n      left: 0.5px;\n      position: relative;\n      height: 16px;\n      width: 16px;\n      transform: rotate(45deg);\n    }\n  }\n}","import { Component, Prop, Element, h } from '@stencil/core';\nimport { brandColour } from '../../globals/brand-colour';\nimport { spacingOption } from '../../globals/spacing-option';\n\n@Component({\n  tag: 'biggive-filtered-carousel',\n  styleUrl: 'biggive-filtered-carousel.scss',\n  shadow: true,\n})\nexport class BiggiveFilteredCarousel {\n  @Element() host: HTMLBiggiveFilteredCarouselElement;\n\n  @Prop() spaceBelow: spacingOption = 4;\n\n  @Prop() columnCount: 1 | 2 | 3 | 4 | 5 = 3;\n\n  @Prop() buttonBackgroundColour: brandColour = 'white';\n\n  @Prop() buttonIconColour: brandColour = 'primary';\n\n  private children: Array<HTMLElement>;\n\n  componentDidLoad() {\n    const carousel: HTMLBiggiveCarouselElement = this.host.shadowRoot?.querySelector('biggive-carousel')!;\n    const filterWrap = this.host.shadowRoot?.querySelector('.filters')!;\n\n    this.children = new Array<HTMLElement>();\n\n    Array.from(this.host.children).forEach(item => {\n      this.children.push(item as HTMLElement);\n    });\n\n    let filters: string[] = [];\n\n    this.children.forEach(item => {\n      carousel.appendChild(item);\n\n      let itemFilters: string[] = [];\n\n      if (item.getAttribute('filters') != null) {\n        itemFilters = item.getAttribute('filters')?.split('|') ?? [];\n        filters.push(...itemFilters);\n      }\n\n      item.dataset['filters'] = JSON.stringify(itemFilters);\n    });\n\n    filters = [...new Set(filters)];\n\n    filters.forEach(filter => {\n      var button = document.createElement('span');\n      button.innerHTML = filter;\n      button.classList.add('button');\n      button.classList.add('apply');\n      button.setAttribute('data-filter', filter);\n      button.addEventListener('click', e => {\n        const button = e.target as HTMLElement;\n\n        button.classList.toggle('active');\n\n        let appliedFilters: string[] = [];\n        let buttons = this.host.shadowRoot?.querySelectorAll('.filters span.button.active');\n        buttons?.forEach(button => {\n          appliedFilters.push(button.getAttribute('data-filter')!);\n        });\n\n        this.children.forEach(item => {\n          let itemFilters: string[] = JSON.parse(item.dataset['filters']!);\n\n          if (appliedFilters.length == 0 || appliedFilters.filter(x => itemFilters.includes(x)).length > 0) {\n            item.classList.remove('hidden');\n          } else {\n            item.classList.add('hidden');\n          }\n        });\n\n        carousel.resizeToFitContent();\n      });\n\n      filterWrap.appendChild(button);\n    });\n\n    var clear = document.createElement('span');\n    clear.innerHTML =\n      '<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path stroke-color=\"1\" stroke=\"#000000\" d=\"M11 11v-11h1v11h11v1h-11v11h-1v-11h-11v-1h11z\" /></svg>';\n    clear.classList.add('button');\n    clear.classList.add('clear');\n    clear.addEventListener('click', () => {\n      filterWrap.querySelectorAll('.apply').forEach(button => {\n        button.classList.remove('active');\n      });\n\n      this.children.forEach(item => {\n        item.classList.remove('hidden');\n      });\n\n      carousel.resizeToFitContent();\n    });\n\n    filterWrap.appendChild(clear);\n\n    /*\n    Check added to confirm that carousel variable is set with a valid carousel. Ommiting this check fails the npm test - although works fine at runtime in browser.\n    @todo Pass a null fn in the test so it passes without this workaround?\n    */\n    if (typeof carousel.resizeToFitContent === 'function') {\n      carousel.resizeToFitContent();\n    }\n  }\n\n  render() {\n    return (\n      <div class={'container space-below-' + this.spaceBelow}>\n        <div class=\"filters\"></div>\n        <biggive-carousel\n          space-below=\"1\"\n          column-count={this.columnCount}\n          button-background-colour={this.buttonBackgroundColour}\n          button-icon-colour={this.buttonIconColour}\n        ></biggive-carousel>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/biggive-footer.js

@@ -4,6 +4,7 @@ import { d as defineCustomElement$3 } from './biggive-button2.js';
 import { d as defineCustomElement$2 } from './biggive-social-icon2.js';
 
 const biggiveFooterCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}:host{display:contents}.footer{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;color:#FFFFFF}nav{width:calc(33.3% - 20px);margin:0;padding:0}nav .heading{font-size:17px;line-height:24px;font-weight:bold;border-bottom:1px solid #FFFFFF;padding-bottom:10px;margin-bottom:10px}nav ul{margin:0;padding:0}nav ul li{margin:0;padding:0;list-style-type:none;margin-top:15px}nav ul li a{color:#FFFFFF;text-decoration:none}nav ul li a[class^=icon-],nav ul li a[class*=icon-]{padding-left:20px;background-repeat:no-repeat;background-size:auto 10px;background-position:left center}nav ul li a.icon-green{background-image:url(/assets/images/triangles-combined-green-match-white.svg)}nav ul li a.icon-children{background-image:url(/assets/images/triangles-combined-children-white.svg)}nav ul li a.icon-christmas{background-image:url(/assets/images/triangles-combined-christmas-challenge-white.svg)}nav ul li a.icon-green-match{background-image:url(/assets/images/triangles-combined-green-match-white.svg)}nav ul li a.icon-women-girls{background-image:url(/assets/images/triangles-combined-women-girls-white.svg)}nav ul li a.icon-mental-health{background-image:url(/assets/images/triangles-combined-mental-health-white.svg)}nav ul li a.icon-anchor-match{background-image:url(/assets/images/triangles-combined-anchor-white.svg)}nav ul li a.icon-emergency{background-image:url(/assets/images/triangles-combined-emergency-white.svg)}nav ul li a.icon-arts{background-image:url(/assets/images/triangles-combined-arts-white.svg)}.row-top{background-image:url(/assets/images/biggive-triangle-green.svg);background-repeat:no-repeat;background-size:auto 75px;background-position:60px 30px;background-color:#2C089B;padding:100px 60px 60px 60px;display:flex;flex-wrap:wrap;justify-content:space-between}.row-top .button-wrap{margin-top:60px;width:100%;display:flex;flex-wrap:wrap;justify-content:space-between}footer .row-bottom{background-color:#000000;padding:60px 60px 15px 60px;border-top:1px solid #FFFFFF}footer .row-bottom .fr-logo{width:135px}footer .row-bottom .postscript-wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between}@media screen and (max-width: 768px){footer .row-bottom .postscript-wrap{flex-direction:column}}footer .row-bottom .nav.nav-postscript{text-align:right;flex-grow:1}@media screen and (max-width: 768px){footer .row-bottom .nav.nav-postscript{text-align:center}}footer .row-bottom .nav-postscript li{display:inline-block;margin-left:1rem}footer .row-bottom .nav-postscript li:first-child{margin-left:0}@media screen and (max-width: 768px){footer .row-bottom .nav-postscript li{display:block;width:100%;margin-left:0}}footer .row-bottom .social-icon-wrap{border-top:1px solid #FFFFFF;padding-top:30px;margin-top:30px;display:flex;align-items:center;justify-content:center;margin-bottom:30px}footer .row-bottom .social-icon-wrap .social-icon-item{margin:0 15px}footer .row-bottom p{text-align:center}@media screen and (max-width: 768px){.row-top{padding:15px}}@media screen and (max-width: 768px){nav{width:100%;margin-right:0;margin-bottom:30px}.row-top{background-size:auto 50px;padding-top:80px;padding-left:15px;background-position:15px 30px}.row-top .button-wrap *{width:100% !important}}";
+const BiggiveFooterStyle0 = biggiveFooterCss;
 
 const BiggiveFooter$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveFooter extends HTMLElement {
     constructor() {
@@ -40,7 +41,7 @@ const BiggiveFooter$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveFooter ext
         return this.usePresetFooter ? presetFooter() : slotBasedFooter();
     }
     get host() { return this; }
-    static get style() { return biggiveFooterCss; }
+    static get style() { return BiggiveFooterStyle0; }
 }, [1, "biggive-footer", {
         "headingLevel": [2, "heading-level"],
         "blogUrlPrefix": [1, "blog-url-prefix"],

package/dist/components/biggive-footer.js.map

@@ -1 +1 @@
-{"file":"biggive-footer.js","mappings":"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","names":["BiggiveFooter"],"sources":["src/components/biggive-footer/biggive-footer.scss?tag=biggive-footer&encapsulation=shadow","src/components/biggive-footer/biggive-footer.tsx"],"sourcesContent":[":host {\n  display: contents;\n}\n\n.footer {\n  @include standard-font();\n  color: $colour-white;\n}\n\nnav {\n  width: calc(33.3% - 20px);\n  margin: 0;\n  padding: 0;\n  .heading {\n    @include heading-5();\n    border-bottom: 1px solid $colour-white;\n    padding-bottom: $spacer-2;\n    margin-bottom: $spacer-2;\n  }\n  ul {\n    margin: 0;\n    padding: 0;\n    li {\n      margin: 0;\n      padding: 0;\n      list-style-type: none;\n      margin-top: 15px;\n    }\n  }\n}\n\nnav ul li a {\n  color: $colour-white;\n  text-decoration: none;\n  // target all classes prefixed with 'icon-' so we don't repeat code\n  &[class^='icon-'],\n  &[class*='icon-'] {\n    padding-left: 20px;\n    background-repeat: no-repeat;\n    background-size: auto 10px;\n    background-position: left center;\n  }\n\n  &.icon-green {\n    background-image: url(/assets/images/triangles-combined-green-match-white.svg);\n  }\n\n  &.icon-children {\n    background-image: url(/assets/images/triangles-combined-children-white.svg);\n  }\n\n  &.icon-christmas {\n    background-image: url(/assets/images/triangles-combined-christmas-challenge-white.svg);\n  }\n\n  &.icon-green-match {\n    background-image: url(/assets/images/triangles-combined-green-match-white.svg);\n  }\n\n  &.icon-women-girls {\n    background-image: url(/assets/images/triangles-combined-women-girls-white.svg);\n  }\n\n  &.icon-mental-health {\n    background-image: url(/assets/images/triangles-combined-mental-health-white.svg);\n  }\n\n  &.icon-anchor-match {\n    background-image: url(/assets/images/triangles-combined-anchor-white.svg);\n  }\n\n  &.icon-emergency {\n    background-image: url(/assets/images/triangles-combined-emergency-white.svg);\n  }\n\n  &.icon-arts {\n    background-image: url(/assets/images/triangles-combined-arts-white.svg);\n  }\n}\n\n.row-top {\n  background-image: url(/assets/images/biggive-triangle-green.svg);\n  background-repeat: no-repeat;\n  background-size: auto 75px;\n  background-position: $spacer-6 30px;\n  background-color: $colour-primary-blue;\n  padding: 100px $spacer-6 $spacer-6 $spacer-6;\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: space-between;\n\n  .button-wrap {\n    margin-top: $spacer-6;\n    width: 100%;\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: space-between;\n  }\n}\n\nfooter .row-bottom {\n  background-color: $colour-black;\n  padding: $spacer-6 $spacer-6 $spacer-3 $spacer-6;\n  border-top: 1px solid $colour-white;\n\n  .fr-logo {\n    width: 135px;\n  }\n\n  .postscript-wrap {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: space-between;\n\n    @media screen and (max-width: $screen-tablet-max) {\n      flex-direction: column;\n    }\n  }\n\n  .nav.nav-postscript {\n    text-align: right;\n    flex-grow: 1;\n\n    @media screen and (max-width: $screen-tablet-max) {\n      text-align: center;\n    }\n  }\n\n  .nav-postscript li {\n    display: inline-block;\n    margin-left: 1rem;\n\n    &:first-child {\n      margin-left: 0;\n    }\n\n    @media screen and (max-width: $screen-tablet-max) {\n      display: block;\n      width: 100%;\n      margin-left: 0;\n    }\n  }\n\n  .social-icon-wrap {\n    border-top: 1px solid $colour-white;\n    padding-top: $spacer-4;\n    margin-top: $spacer-4;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-bottom: $spacer-4;\n\n    .social-icon-item {\n      margin: 0 $spacer-3;\n    }\n  }\n\n  p {\n    text-align: center;\n  }\n}\n\n@media screen and (max-width: $screen-tablet-max) {\n  .row-top {\n    padding: $spacer-3;\n  }\n}\n\n@media screen and (max-width: $screen-tablet-max) {\n  nav {\n    width: 100%;\n    margin-right: 0;\n    margin-bottom: $spacer-4;\n  }\n\n  .row-top {\n    background-size: auto 50px;\n    padding-top: 80px;\n    padding-left: 15px;\n    background-position: 15px 30px;\n\n    .button-wrap * {\n      width: 100% !important;\n    }\n  }\n}\n","import { Component, Element, getAssetPath, h, Prop } from '@stencil/core';\nimport { makeURL } from '../../util/helper-methods';\n\n@Component({\n  tag: 'biggive-footer',\n  styleUrl: 'biggive-footer.scss',\n  shadow: true,\n})\nexport class BiggiveFooter {\n  @Element() host: HTMLBiggiveFooterElement;\n\n  @Prop() headingLevel: 1 | 2 | 3 | 4 | 5 | 6 = 5;\n\n  /**\n   * URL prefixes vary by environment, and components library is not best placed to know what they are, so we\n   * take them as props\n   */\n  @Prop() blogUrlPrefix: string | undefined;\n  @Prop() experienceUrlPrefix: string | undefined;\n\n  /**\n   * Conditionally render footer menu:\n   * hard-coded (preset) when set to true, dynamic (slot-based) when set to false\n   */\n  @Prop() usePresetFooter = false;\n\n  private appendMenu(menuName: string) {\n    var node = this.host.querySelector(`[slot=\"${menuName}\"]`);\n    if (node !== null) {\n      this.host!.shadowRoot!.querySelector(`.${menuName}`)!.appendChild(node);\n    }\n  }\n\n  componentDidRender() {\n    if (!this.usePresetFooter) {\n      this.appendMenu('nav-primary');\n      this.appendMenu('nav-secondary');\n      this.appendMenu('nav-tertiary');\n      this.appendMenu('nav-postscript');\n    }\n  }\n\n  render() {\n    const HeadingTag = `h${this.headingLevel}`;\n    const slotBasedFooter = () => {\n      return (\n        <footer class=\"footer\">\n          <div class=\"row row-top\">\n            <nav class=\"nav nav-primary\" aria-labelledby=\"footer-primary-heading\">\n              <HeadingTag class=\"heading\" id=\"footer-primary-heading\">\n                <slot name=\"nav-primary-title\"></slot>\n              </HeadingTag>\n            </nav>\n\n            <nav class=\"nav nav-secondary\" aria-labelledby=\"footer-secondary-heading-heading\">\n              <HeadingTag class=\"heading\" id=\"footer-secondary-heading\">\n                <slot name=\"nav-secondary-title\"></slot>\n              </HeadingTag>\n            </nav>\n\n            <nav class=\"nav nav-tertiary\" aria-labelledby=\"footer-tertiary-heading\">\n              <HeadingTag class=\"heading\" id=\"footer-tertiary-heading\">\n                <slot name=\"nav-tertiary-title\"></slot>\n              </HeadingTag>\n            </nav>\n\n            <div class=\"button-wrap\">\n              <biggive-button colour-scheme=\"white\" url=\"https://biggive.org/charities\" label=\"For charities\"></biggive-button>\n              <biggive-button colour-scheme=\"white\" url=\"https://biggive.org/funders\" label=\"For funders\"></biggive-button>\n            </div>\n          </div>\n\n          <div class=\"row row-bottom\">\n            <div class=\"postscript-wrap\">\n              <img class=\"fr-logo\" src={getAssetPath('assets/images/fundraising-regulator.png')} alt=\"Registered with FUNDRAISING REGULATOR\" />\n\n              <nav class=\"nav nav-postscript\" aria-label=\"Legal\"></nav>\n            </div>\n\n            <div class=\"social-icon-wrap\">\n              <slot name=\"social-icons\"></slot>\n            </div>\n            <p>&copy; 2007 – 2023 The Big Give Trust (1136547) | Company number 07273065 | Dragon Court, 27-29 Macklin Street, London WC2B 5LX, United Kingdom</p>\n          </div>\n        </footer>\n      );\n    };\n\n    const presetFooter = () => {\n      return (\n        <footer class=\"footer\">\n          <div class=\"row row-top\">\n            <nav class=\"nav nav-primary\" aria-labelledby=\"footer-primary-heading\">\n              <HeadingTag class=\"heading\" id=\"footer-primary-heading\">\n                <div slot=\"nav-primary-title\">Match Funding Opportunities</div>\n              </HeadingTag>\n              <ul slot=\"nav-primary\">\n                <li>\n                  <a href={makeURL('Blog', this.blogUrlPrefix, 'christmas-challenge')} class=\"icon-christmas\">\n                    Christmas Challenge\n                  </a>\n                </li>\n                <li>\n                  <a href={makeURL('Blog', this.blogUrlPrefix, 'green-match-fund')} class=\"icon-green\">\n                    Green Match Fund\n                  </a>\n                </li>\n                <li>\n                  <a href={makeURL('Blog', this.blogUrlPrefix, 'champions-for-children')} class=\"icon-children\">\n                    Champions for Children\n                  </a>\n                </li>\n                <li>\n                  <a href={makeURL('Blog', this.blogUrlPrefix, 'women-girls-match-fund')} class=\"icon-women-girls\">\n                    Women and Girls Match Fund\n                  </a>\n                </li>\n                <li>\n                  <a href={makeURL('Blog', this.blogUrlPrefix, 'kind2mind/')} class=\"icon-mental-health\">\n                    Kind²Mind\n                  </a>\n                </li>\n                <li>\n                  <a href={makeURL('Blog', this.blogUrlPrefix, 'artsforimpact')} class=\"icon-arts\">\n                    Arts for Impact\n                  </a>\n                </li>\n                <li>\n                  <a href={makeURL('Blog', this.blogUrlPrefix, 'emergency-campaigns/')} class=\"icon-emergency\">\n                    Emergency Match Fund\n                  </a>\n                </li>\n                <li>\n                  <a href={makeURL('Blog', this.blogUrlPrefix, 'run-your-own-campaign/)')}>Run your own campaign</a>\n                </li>\n              </ul>\n            </nav>\n\n            <nav class=\"nav nav-secondary\" aria-labelledby=\"footer-secondary-heading-heading\">\n              <HeadingTag class=\"heading\" id=\"footer-secondary-heading\">\n                <div slot=\"nav-secondary-title\">Resources</div>\n              </HeadingTag>\n              <ul slot=\"nav-secondary\">\n                <li>\n                  <a href={makeURL('Blog', this.blogUrlPrefix, 'case-studies')}>Case Studies</a>\n                </li>\n                <li>\n                  <a href={makeURL('Blog', this.blogUrlPrefix, 'blog')}>Blog</a>\n                </li>\n                <li>\n                  <a href={makeURL('Blog', this.blogUrlPrefix, 'reports-insights')}>Reports &amp; Insights</a>\n                </li>\n                <li>\n                  <a href={makeURL('Blog', this.blogUrlPrefix, 'press')}>Press</a>\n                </li>\n              </ul>\n            </nav>\n\n            <nav class=\"nav nav-tertiary\" aria-labelledby=\"footer-tertiary-heading\">\n              <HeadingTag class=\"heading\" id=\"footer-tertiary-heading\">\n                <div slot=\"nav-tertiary-title\">About</div>\n              </HeadingTag>\n              <ul slot=\"nav-tertiary\">\n                <li>\n                  <a href={makeURL('Experience', this.experienceUrlPrefix, 's/contact-us')}>Contact us</a>\n                </li>\n                <li>\n                  <a href={makeURL('Blog', this.blogUrlPrefix, 'our-story')}>Our Story</a>\n                </li>\n                <li>\n                  <a href={makeURL('Blog', this.blogUrlPrefix, 'our-people')}>Our People</a>\n                </li>\n                <li>\n                  <a href={makeURL('Blog', this.blogUrlPrefix, 'donation-funds')}>Donate by Bank Transfer</a>\n                </li>\n                <li>\n                  <a href={makeURL('Blog', this.blogUrlPrefix, 'our-fees')}>Our Fees</a>\n                </li>\n                <li>\n                  <a href={makeURL('Blog', this.blogUrlPrefix, 'careers')}>Careers</a>\n                </li>\n                <li>\n                  <a href={makeURL('Blog', this.blogUrlPrefix, 'faqs')}>FAQs</a>\n                </li>\n              </ul>\n            </nav>\n\n            <div class=\"button-wrap\">\n              <biggive-button colour-scheme=\"white\" url={makeURL('Blog', this.blogUrlPrefix, 'charities')} label=\"For charities\"></biggive-button>\n              <biggive-button colour-scheme=\"white\" url={makeURL('Blog', this.blogUrlPrefix, 'funders')} label=\"For funders\"></biggive-button>\n            </div>\n          </div>\n\n          <div class=\"row row-bottom\">\n            <div class=\"postscript-wrap\">\n              <img class=\"fr-logo\" src={getAssetPath('assets/images/fundraising-regulator.png')} alt=\"Registered with FUNDRAISING REGULATOR\" />\n\n              <nav class=\"nav nav-postscript\" aria-label=\"Legal\">\n                <ul slot=\"nav-postscript\">\n                  <li>\n                    <a href={makeURL('Blog', this.blogUrlPrefix, 'terms-and-conditions')}>Terms and Conditions</a>\n                  </li>\n                  <li>\n                    <a href={makeURL('Blog', this.blogUrlPrefix, 'privacy')}>Privacy Policy</a>\n                  </li>\n                </ul>\n              </nav>\n            </div>\n\n            <div class=\"social-icon-wrap\">\n              <div slot=\"social-icons\">\n                <biggive-social-icon\n                  service=\"Facebook\"\n                  url=\"https://www.facebook.com/BigGive.org\"\n                  background-colour=\"tertiary\"\n                  icon-colour=\"black\"\n                  wide={true}\n                ></biggive-social-icon>\n                <biggive-social-icon service=\"Twitter\" url=\"https://twitter.com/BigGive\" background-colour=\"tertiary\" icon-colour=\"black\" wide={true}></biggive-social-icon>\n                <biggive-social-icon\n                  service=\"LinkedIn\"\n                  url=\"https://uk.linkedin.com/company/big-give\"\n                  background-colour=\"tertiary\"\n                  icon-colour=\"black\"\n                  wide={true}\n                ></biggive-social-icon>\n                <biggive-social-icon\n                  service=\"YouTube\"\n                  url=\"https://www.youtube.com/channel/UC9_wH1aaTuZurJ-F9R8GDcA\"\n                  background-colour=\"tertiary\"\n                  icon-colour=\"black\"\n                  wide={true}\n                ></biggive-social-icon>\n                <biggive-social-icon service=\"Instagram\" url=\"https://www.instagram.com/biggiveorg\" background-colour=\"tertiary\" icon-colour=\"black\"></biggive-social-icon>\n              </div>\n            </div>\n            <p>&copy; 2007 – 2023 The Big Give Trust (1136547) | Company number 07273065 | Dragon Court, 27-29 Macklin Street, London WC2B 5LX, United Kingdom</p>\n          </div>\n        </footer>\n      );\n    };\n\n    return this.usePresetFooter ? presetFooter() : slotBasedFooter();\n  }\n}\n"],"version":3}
+{"file":"biggive-footer.js","mappings":"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","names":["BiggiveFooter"],"sources":["src/components/biggive-footer/biggive-footer.scss?tag=biggive-footer&encapsulation=shadow","src/components/biggive-footer/biggive-footer.tsx"],"sourcesContent":[":host {\n  display: contents;\n}\n\n.footer {\n  @include standard-font();\n  color: $colour-white;\n}\n\nnav {\n  width: calc(33.3% - 20px);\n  margin: 0;\n  padding: 0;\n  .heading {\n    @include heading-5();\n    border-bottom: 1px solid $colour-white;\n    padding-bottom: $spacer-2;\n    margin-bottom: $spacer-2;\n  }\n  ul {\n    margin: 0;\n    padding: 0;\n    li {\n      margin: 0;\n      padding: 0;\n      list-style-type: none;\n      margin-top: 15px;\n    }\n  }\n}\n\nnav ul li a {\n  color: $colour-white;\n  text-decoration: none;\n  // target all classes prefixed with 'icon-' so we don't repeat code\n  &[class^='icon-'],\n  &[class*='icon-'] {\n    padding-left: 20px;\n    background-repeat: no-repeat;\n    background-size: auto 10px;\n    background-position: left center;\n  }\n\n  &.icon-green {\n    background-image: url(/assets/images/triangles-combined-green-match-white.svg);\n  }\n\n  &.icon-children {\n    background-image: url(/assets/images/triangles-combined-children-white.svg);\n  }\n\n  &.icon-christmas {\n    background-image: url(/assets/images/triangles-combined-christmas-challenge-white.svg);\n  }\n\n  &.icon-green-match {\n    background-image: url(/assets/images/triangles-combined-green-match-white.svg);\n  }\n\n  &.icon-women-girls {\n    background-image: url(/assets/images/triangles-combined-women-girls-white.svg);\n  }\n\n  &.icon-mental-health {\n    background-image: url(/assets/images/triangles-combined-mental-health-white.svg);\n  }\n\n  &.icon-anchor-match {\n    background-image: url(/assets/images/triangles-combined-anchor-white.svg);\n  }\n\n  &.icon-emergency {\n    background-image: url(/assets/images/triangles-combined-emergency-white.svg);\n  }\n\n  &.icon-arts {\n    background-image: url(/assets/images/triangles-combined-arts-white.svg);\n  }\n}\n\n.row-top {\n  background-image: url(/assets/images/biggive-triangle-green.svg);\n  background-repeat: no-repeat;\n  background-size: auto 75px;\n  background-position: $spacer-6 30px;\n  background-color: $colour-primary-blue;\n  padding: 100px $spacer-6 $spacer-6 $spacer-6;\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: space-between;\n\n  .button-wrap {\n    margin-top: $spacer-6;\n    width: 100%;\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: space-between;\n  }\n}\n\nfooter .row-bottom {\n  background-color: $colour-black;\n  padding: $spacer-6 $spacer-6 $spacer-3 $spacer-6;\n  border-top: 1px solid $colour-white;\n\n  .fr-logo {\n    width: 135px;\n  }\n\n  .postscript-wrap {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: space-between;\n\n    @media screen and (max-width: $screen-tablet-max) {\n      flex-direction: column;\n    }\n  }\n\n  .nav.nav-postscript {\n    text-align: right;\n    flex-grow: 1;\n\n    @media screen and (max-width: $screen-tablet-max) {\n      text-align: center;\n    }\n  }\n\n  .nav-postscript li {\n    display: inline-block;\n    margin-left: 1rem;\n\n    &:first-child {\n      margin-left: 0;\n    }\n\n    @media screen and (max-width: $screen-tablet-max) {\n      display: block;\n      width: 100%;\n      margin-left: 0;\n    }\n  }\n\n  .social-icon-wrap {\n    border-top: 1px solid $colour-white;\n    padding-top: $spacer-4;\n    margin-top: $spacer-4;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-bottom: $spacer-4;\n\n    .social-icon-item {\n      margin: 0 $spacer-3;\n    }\n  }\n\n  p {\n    text-align: center;\n  }\n}\n\n@media screen and (max-width: $screen-tablet-max) {\n  .row-top {\n    padding: $spacer-3;\n  }\n}\n\n@media screen and (max-width: $screen-tablet-max) {\n  nav {\n    width: 100%;\n    margin-right: 0;\n    margin-bottom: $spacer-4;\n  }\n\n  .row-top {\n    background-size: auto 50px;\n    padding-top: 80px;\n    padding-left: 15px;\n    background-position: 15px 30px;\n\n    .button-wrap * {\n      width: 100% !important;\n    }\n  }\n}\n","import { Component, Element, getAssetPath, h, Prop } from '@stencil/core';\nimport { makeURL } from '../../util/helper-methods';\n\n@Component({\n  tag: 'biggive-footer',\n  styleUrl: 'biggive-footer.scss',\n  shadow: true,\n})\nexport class BiggiveFooter {\n  @Element() host: HTMLBiggiveFooterElement;\n\n  @Prop() headingLevel: 1 | 2 | 3 | 4 | 5 | 6 = 5;\n\n  /**\n   * URL prefixes vary by environment, and components library is not best placed to know what they are, so we\n   * take them as props\n   */\n  @Prop() blogUrlPrefix: string | undefined;\n  @Prop() experienceUrlPrefix: string | undefined;\n\n  /**\n   * Conditionally render footer menu:\n   * hard-coded (preset) when set to true, dynamic (slot-based) when set to false\n   */\n  @Prop() usePresetFooter = false;\n\n  private appendMenu(menuName: string) {\n    var node = this.host.querySelector(`[slot=\"${menuName}\"]`);\n    if (node !== null) {\n      this.host!.shadowRoot!.querySelector(`.${menuName}`)!.appendChild(node);\n    }\n  }\n\n  componentDidRender() {\n    if (!this.usePresetFooter) {\n      this.appendMenu('nav-primary');\n      this.appendMenu('nav-secondary');\n      this.appendMenu('nav-tertiary');\n      this.appendMenu('nav-postscript');\n    }\n  }\n\n  render() {\n    const HeadingTag = `h${this.headingLevel}`;\n    const slotBasedFooter = () => {\n      return (\n        <footer class=\"footer\">\n          <div class=\"row row-top\">\n            <nav class=\"nav nav-primary\" aria-labelledby=\"footer-primary-heading\">\n              <HeadingTag class=\"heading\" id=\"footer-primary-heading\">\n                <slot name=\"nav-primary-title\"></slot>\n              </HeadingTag>\n            </nav>\n\n            <nav class=\"nav nav-secondary\" aria-labelledby=\"footer-secondary-heading-heading\">\n              <HeadingTag class=\"heading\" id=\"footer-secondary-heading\">\n                <slot name=\"nav-secondary-title\"></slot>\n              </HeadingTag>\n            </nav>\n\n            <nav class=\"nav nav-tertiary\" aria-labelledby=\"footer-tertiary-heading\">\n              <HeadingTag class=\"heading\" id=\"footer-tertiary-heading\">\n                <slot name=\"nav-tertiary-title\"></slot>\n              </HeadingTag>\n            </nav>\n\n            <div class=\"button-wrap\">\n              <biggive-button colour-scheme=\"white\" url=\"https://biggive.org/charities\" label=\"For charities\"></biggive-button>\n              <biggive-button colour-scheme=\"white\" url=\"https://biggive.org/funders\" label=\"For funders\"></biggive-button>\n            </div>\n          </div>\n\n          <div class=\"row row-bottom\">\n            <div class=\"postscript-wrap\">\n              <img class=\"fr-logo\" src={getAssetPath('assets/images/fundraising-regulator.png')} alt=\"Registered with FUNDRAISING REGULATOR\" />\n\n              <nav class=\"nav nav-postscript\" aria-label=\"Legal\"></nav>\n            </div>\n\n            <div class=\"social-icon-wrap\">\n              <slot name=\"social-icons\"></slot>\n            </div>\n            <p>&copy; 2007 – 2023 The Big Give Trust (1136547) | Company number 07273065 | Dragon Court, 27-29 Macklin Street, London WC2B 5LX, United Kingdom</p>\n          </div>\n        </footer>\n      );\n    };\n\n    const presetFooter = () => {\n      return (\n        <footer class=\"footer\">\n          <div class=\"row row-top\">\n            <nav class=\"nav nav-primary\" aria-labelledby=\"footer-primary-heading\">\n              <HeadingTag class=\"heading\" id=\"footer-primary-heading\">\n                <div slot=\"nav-primary-title\">Match Funding Opportunities</div>\n              </HeadingTag>\n              <ul slot=\"nav-primary\">\n                <li>\n                  <a href={makeURL('Blog', this.blogUrlPrefix, 'christmas-challenge')} class=\"icon-christmas\">\n                    Christmas Challenge\n                  </a>\n                </li>\n                <li>\n                  <a href={makeURL('Blog', this.blogUrlPrefix, 'green-match-fund')} class=\"icon-green\">\n                    Green Match Fund\n                  </a>\n                </li>\n                <li>\n                  <a href={makeURL('Blog', this.blogUrlPrefix, 'champions-for-children')} class=\"icon-children\">\n                    Champions for Children\n                  </a>\n                </li>\n                <li>\n                  <a href={makeURL('Blog', this.blogUrlPrefix, 'women-girls-match-fund')} class=\"icon-women-girls\">\n                    Women and Girls Match Fund\n                  </a>\n                </li>\n                <li>\n                  <a href={makeURL('Blog', this.blogUrlPrefix, 'kind2mind/')} class=\"icon-mental-health\">\n                    Kind²Mind\n                  </a>\n                </li>\n                <li>\n                  <a href={makeURL('Blog', this.blogUrlPrefix, 'artsforimpact')} class=\"icon-arts\">\n                    Arts for Impact\n                  </a>\n                </li>\n                <li>\n                  <a href={makeURL('Blog', this.blogUrlPrefix, 'emergency-campaigns/')} class=\"icon-emergency\">\n                    Emergency Match Fund\n                  </a>\n                </li>\n                <li>\n                  <a href={makeURL('Blog', this.blogUrlPrefix, 'run-your-own-campaign/)')}>Run your own campaign</a>\n                </li>\n              </ul>\n            </nav>\n\n            <nav class=\"nav nav-secondary\" aria-labelledby=\"footer-secondary-heading-heading\">\n              <HeadingTag class=\"heading\" id=\"footer-secondary-heading\">\n                <div slot=\"nav-secondary-title\">Resources</div>\n              </HeadingTag>\n              <ul slot=\"nav-secondary\">\n                <li>\n                  <a href={makeURL('Blog', this.blogUrlPrefix, 'case-studies')}>Case Studies</a>\n                </li>\n                <li>\n                  <a href={makeURL('Blog', this.blogUrlPrefix, 'blog')}>Blog</a>\n                </li>\n                <li>\n                  <a href={makeURL('Blog', this.blogUrlPrefix, 'reports-insights')}>Reports &amp; Insights</a>\n                </li>\n                <li>\n                  <a href={makeURL('Blog', this.blogUrlPrefix, 'press')}>Press</a>\n                </li>\n              </ul>\n            </nav>\n\n            <nav class=\"nav nav-tertiary\" aria-labelledby=\"footer-tertiary-heading\">\n              <HeadingTag class=\"heading\" id=\"footer-tertiary-heading\">\n                <div slot=\"nav-tertiary-title\">About</div>\n              </HeadingTag>\n              <ul slot=\"nav-tertiary\">\n                <li>\n                  <a href={makeURL('Experience', this.experienceUrlPrefix, 's/contact-us')}>Contact us</a>\n                </li>\n                <li>\n                  <a href={makeURL('Blog', this.blogUrlPrefix, 'our-story')}>Our Story</a>\n                </li>\n                <li>\n                  <a href={makeURL('Blog', this.blogUrlPrefix, 'our-people')}>Our People</a>\n                </li>\n                <li>\n                  <a href={makeURL('Blog', this.blogUrlPrefix, 'donation-funds')}>Donate by Bank Transfer</a>\n                </li>\n                <li>\n                  <a href={makeURL('Blog', this.blogUrlPrefix, 'our-fees')}>Our Fees</a>\n                </li>\n                <li>\n                  <a href={makeURL('Blog', this.blogUrlPrefix, 'careers')}>Careers</a>\n                </li>\n                <li>\n                  <a href={makeURL('Blog', this.blogUrlPrefix, 'faqs')}>FAQs</a>\n                </li>\n              </ul>\n            </nav>\n\n            <div class=\"button-wrap\">\n              <biggive-button colour-scheme=\"white\" url={makeURL('Blog', this.blogUrlPrefix, 'charities')} label=\"For charities\"></biggive-button>\n              <biggive-button colour-scheme=\"white\" url={makeURL('Blog', this.blogUrlPrefix, 'funders')} label=\"For funders\"></biggive-button>\n            </div>\n          </div>\n\n          <div class=\"row row-bottom\">\n            <div class=\"postscript-wrap\">\n              <img class=\"fr-logo\" src={getAssetPath('assets/images/fundraising-regulator.png')} alt=\"Registered with FUNDRAISING REGULATOR\" />\n\n              <nav class=\"nav nav-postscript\" aria-label=\"Legal\">\n                <ul slot=\"nav-postscript\">\n                  <li>\n                    <a href={makeURL('Blog', this.blogUrlPrefix, 'terms-and-conditions')}>Terms and Conditions</a>\n                  </li>\n                  <li>\n                    <a href={makeURL('Blog', this.blogUrlPrefix, 'privacy')}>Privacy Policy</a>\n                  </li>\n                </ul>\n              </nav>\n            </div>\n\n            <div class=\"social-icon-wrap\">\n              <div slot=\"social-icons\">\n                <biggive-social-icon\n                  service=\"Facebook\"\n                  url=\"https://www.facebook.com/BigGive.org\"\n                  background-colour=\"tertiary\"\n                  icon-colour=\"black\"\n                  wide={true}\n                ></biggive-social-icon>\n                <biggive-social-icon service=\"Twitter\" url=\"https://twitter.com/BigGive\" background-colour=\"tertiary\" icon-colour=\"black\" wide={true}></biggive-social-icon>\n                <biggive-social-icon\n                  service=\"LinkedIn\"\n                  url=\"https://uk.linkedin.com/company/big-give\"\n                  background-colour=\"tertiary\"\n                  icon-colour=\"black\"\n                  wide={true}\n                ></biggive-social-icon>\n                <biggive-social-icon\n                  service=\"YouTube\"\n                  url=\"https://www.youtube.com/channel/UC9_wH1aaTuZurJ-F9R8GDcA\"\n                  background-colour=\"tertiary\"\n                  icon-colour=\"black\"\n                  wide={true}\n                ></biggive-social-icon>\n                <biggive-social-icon service=\"Instagram\" url=\"https://www.instagram.com/biggiveorg\" background-colour=\"tertiary\" icon-colour=\"black\"></biggive-social-icon>\n              </div>\n            </div>\n            <p>&copy; 2007 – 2023 The Big Give Trust (1136547) | Company number 07273065 | Dragon Court, 27-29 Macklin Street, London WC2B 5LX, United Kingdom</p>\n          </div>\n        </footer>\n      );\n    };\n\n    return this.usePresetFooter ? presetFooter() : slotBasedFooter();\n  }\n}\n"],"version":3}

package/dist/components/biggive-form-field-select2.js

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
 const biggiveFormFieldSelectCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.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}:host{display:contents}*,*::before,*::after{box-sizing:border-box}select{appearance:none;border:none;padding:0 1em 0 0;margin:0;width:100%;font-family:inherit;font-size:inherit;cursor:inherit;line-height:inherit;outline:none;display:grid;background-color:#FFFFFF;align-items:center}select.grey{background-color:#F4F4F4}.selectWrapper{position:relative}.prompt{position:absolute;z-index:2;font-size:small;top:-1em;background-color:#FFFFFF;left:4em;padding-left:1em;padding-right:1em;color:#2C089B}.prompt.grey{background-color:#F4F4F4}.dropdown{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;position:relative;text-align:left}.dropdown.select-style-bordered .sleeve{font-size:17px;line-height:24px;padding:2px;position:relative;background-color:#2C089B;clip-path:polygon(0% 0%, 0% 0%, calc(100% - 15px) 0%, 100% 15px, 100% 100%, 100% 100%, 0 100%, 0 100%)}.dropdown.select-style-bordered .sleeve select{color:#2C089B;display:block;position:relative;padding:10px 80px 10px 10px;clip-path:polygon(0% 0%, 0% 0%, calc(100% - 14px) 0%, 100% 14px, 100% 100%, 100% 100%, 0 100%, 0 100%)}.dropdown.select-style-bordered .sleeve select span.placeholder.grey{background-color:#F4F4F4}.dropdown.select-style-bordered .sleeve div.arrow{position:absolute;right:20px;top:18px;width:10px;height:10px;background-image:url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI3IiB2aWV3Qm94PSIwIDAgOSA3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNS4yMzcxNiA2LjYyNDkzQzQuOTAzMjMgNy4xMjUwMiA0LjA5NyA3LjEyNTAyIDMuNzYzMDggNi42MjQ5M0wwLjEyMzg2OCAxLjE3MDYzQy0wLjIxOTk0IDAuNjU1NDU5IDAuMTkyNjMgMS44MzcxZS0wNyAwLjg2MDkwOCAyLjQyMTMyZS0wN0w4LjEzOTMzIDguNzg0MzJlLTA3QzguODA3MTggOS4zNjgxN2UtMDcgOS4yMTk3NSAwLjY1NTQ1OSA4Ljg3NjM3IDEuMTcwNjNMNS4yMzcxNiA2LjYyNDkzWiIgZmlsbD0iIzJDMDg5QiIvPgo8L3N2Zz4K\");background-size:contain;background-repeat:no-repeat;background-position:center center;z-index:1;pointer-events:none}.dropdown.select-style-underlined .sleeve{font-size:17px;line-height:24px;padding:1px;position:relative;border-bottom:1px solid #2C089B}.dropdown.select-style-underlined .sleeve select{color:#2C089B;display:block;position:relative;padding:10px 80px 10px 10px}.dropdown.select-style-underlined .sleeve div.arrow{position:absolute;right:20px;top:18px;width:10px;height:10px;background-image:url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI3IiB2aWV3Qm94PSIwIDAgOSA3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNS4yMzcxNiA2LjYyNDkzQzQuOTAzMjMgNy4xMjUwMiA0LjA5NyA3LjEyNTAyIDMuNzYzMDggNi42MjQ5M0wwLjEyMzg2OCAxLjE3MDYzQy0wLjIxOTk0IDAuNjU1NDU5IDAuMTkyNjMgMS44MzcxZS0wNyAwLjg2MDkwOCAyLjQyMTMyZS0wN0w4LjEzOTMzIDguNzg0MzJlLTA3QzguODA3MTggOS4zNjgxN2UtMDcgOS4yMTk3NSAwLjY1NTQ1OSA4Ljg3NjM3IDEuMTcwNjNMNS4yMzcxNiA2LjYyNDkzWiIgZmlsbD0iIzJDMDg5QiIvPgo8L3N2Zz4K\");background-size:contain;background-repeat:no-repeat;background-position:center center;z-index:1;pointer-events:none}.dropdown.inherit-colour select{color:inherit !important}.dropdown select{max-height:200px;overflow-x:hidden;overflow-y:scroll;width:100%;z-index:1;left:0;right:0}.dropdown.active .options{display:block}.dropdown.noprompt{margin-top:0}.options.grey{background-color:#F4F4F4}";
+const BiggiveFormFieldSelectStyle0 = biggiveFormFieldSelectCss;
 
 const BiggiveFormFieldSelect = /*@__PURE__*/ proxyCustomElement(class BiggiveFormFieldSelect extends HTMLElement {
     constructor() {
@@ -52,7 +53,7 @@ const BiggiveFormFieldSelect = /*@__PURE__*/ proxyCustomElement(class BiggiveFor
                 (this.selectedOptionColour === 'inherit' ? ' inherit-colour' : '') }, h("div", { class: "sleeve" }, h("select", { class: greyIfRequired, onChange: this.doOptionSelectCompletedHandler }, options.map(option => (h("option", { selected: this.selectedValue === option.value, value: option.value }, option.label)))), h("div", { class: "arrow" }))))));
     }
     get el() { return this; }
-    static get style() { return biggiveFormFieldSelectCss; }
+    static get style() { return BiggiveFormFieldSelectStyle0; }
 }, [1, "biggive-form-field-select", {
         "selectionChanged": [16],
         "prompt": [1],

package/dist/components/biggive-form-field-select2.js.map

@@ -1 +1 @@
-{"file":"biggive-form-field-select2.js","mappings":";;AAAA,MAAM,yBAAyB,GAAG,irHAAirH;;MCOtsH,sBAAsB;;;;;QA0BzB,mCAA8B,GAAG,CAAC,KAAU;YAClD,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;YACjC,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;YAC3B,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;YACxC,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;SAC9B,CAAC;;;;;;2BAd+C,UAAU;;oCAOR,MAAM;0BAY5B,CAAC;;;IAM9B,MAAM;QACJ,MAAM,cAAc,GAAG,IAAI,CAAC,gBAAgB,KAAK,MAAM,GAAG,OAAO,GAAG,EAAE,CAAC;QAEvE,IAAI,OAAgD,CAAC;QACrD,IAAI,OAAO,IAAI,CAAC,OAAO,KAAK,QAAQ,EAAE;YACpC,IAAI,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAY,CAAC;YACjD,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE;gBAC1B,MAAM,IAAI,KAAK,CAAC,8DAA8D,CAAC,CAAC;aACjF;YACD,OAAO,GAAG,MAAM,CAAC;SAClB;aAAM;YACL,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;SACxB;QAED,IAAI,OAAO,IAAI,CAAC,WAAW,KAAK,QAAQ,IAAI,OAAO,IAAI,CAAC,aAAa,KAAK,QAAQ,EAAE;YAClF,OAAO,GAAG,CAAC,EAAE,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,EAAE,GAAG,OAAO,CAAC,CAAC;SAC/E;QAED,IAAI,OAAO,OAAO,KAAK,WAAW,EAAE;YAClC,OAAO,CAAC,KAAK,CAAC,mBAAmB,CAAC,CAAC;YACnC,OAAO,GAAG,EAAE,CAAC;SACd;QAED,QACE,WAAK,KAAK,EAAC,eAAe,IACxB,aAAO,KAAK,EAAE,cAAc,IAC1B,WAAK,KAAK,EAAE,QAAQ,GAAG,cAAc,IAAG,IAAI,CAAC,MAAM,CAAO,EAC1D,WACE,KAAK,EACH,uBAAuB;gBACvB,IAAI,CAAC,UAAU;gBACf,gBAAgB;gBAChB,IAAI,CAAC,WAAW;iBACf,IAAI,CAAC,MAAM,KAAK,IAAI,GAAG,YAAY,GAAG,EAAE,CAAC;iBACzC,IAAI,CAAC,oBAAoB,KAAK,SAAS,GAAG,iBAAiB,GAAG,EAAE,CAAC,IAGpE,WAAK,KAAK,EAAC,QAAQ,IACjB,cAAQ,KAAK,EAAE,cAAc,EAAE,QAAQ,EAAE,IAAI,CAAC,8BAA8B,IACzE,OAAO,CAAC,GAAG,CAAC,MAAM,KACjB,cAAQ,QAAQ,EAAE,IAAI,CAAC,aAAa,KAAK,MAAM,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,IACvE,MAAM,CAAC,KAAK,CACN,CACV,CAAC,CACK,EACT,WAAK,KAAK,EAAC,OAAO,GAAO,CACrB,CACF,CACA,CACJ,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/biggive-form-field-select/biggive-form-field-select.scss?tag=biggive-form-field-select&encapsulation=shadow","src/components/biggive-form-field-select/biggive-form-field-select.tsx"],"sourcesContent":["@include spacers();\n\n// Includes CSS taken from https://moderncss.dev/custom-select-styles-with-pure-css/\n\n:host {\n  display: contents;\n}\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\nselect {\n  appearance: none;\n  border: none;\n  padding: 0 1em 0 0;\n  margin: 0;\n  width: 100%;\n  font-family: inherit;\n  font-size: inherit;\n  cursor: inherit;\n  line-height: inherit;\n  outline: none;\n  display: grid;\n  background-color: $colour-white;\n  align-items: center;\n}\nselect.grey {\n  background-color: $colour-grey-background;\n}\n.selectWrapper {\n  position: relative;\n}\n.prompt {\n  position: absolute;\n  z-index: 2;\n  font-size: small;\n  top: -1em;\n  background-color: $colour-white;\n  left: 4em;\n  padding-left: 1em;\n  padding-right: 1em;\n  color: $colour-primary-blue;\n}\n.prompt.grey {\n  background-color: $colour-grey-background;\n}\n\n.dropdown {\n  @include standard-font();\n  position: relative;\n  text-align: left;\n  &.select-style-bordered {\n    .sleeve {\n      @include dropdown();\n    }\n  }\n  &.select-style-underlined {\n    .sleeve {\n      @include dropdown-underlined();\n    }\n  }\n  &.inherit-colour select{\n   color: inherit !important;\n  }\n\n  select {\n    max-height: 200px;\n    overflow-x: hidden;\n    overflow-y: scroll;\n    width: 100%;\n    z-index: 1;\n    left: 0;\n    right: 0;\n  }\n  &.active .options {\n      display: block;\n  }\n}\n.dropdown.noprompt {\n  margin-top: 0;\n}\n.options.grey {\n  background-color: $colour-grey-background;\n}\n","import { Component, Prop, h, Element } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-form-field-select',\n  styleUrl: 'biggive-form-field-select.scss',\n  shadow: true,\n})\nexport class BiggiveFormFieldSelect {\n  @Element() el: HTMLBiggiveFormFieldSelectElement;\n\n  @Prop() selectionChanged: (value: string) => void;\n\n  /**\n   * Displayed as 'eyebrow' label over the top border of the box.\n   */\n  @Prop() prompt!: string | null;\n\n  @Prop({ mutable: true }) selectedValue: string | null;\n  @Prop({ mutable: true }) selectedLabel: string | null;\n\n  /**\n   * JSON array of category key/values, or takes a stringified equiavalent (for Storybook)\n   */\n  @Prop() options!: string | Array<{ label: string; value: string }>;\n  @Prop() selectStyle: 'bordered' | 'underlined' = 'bordered';\n\n  /**\n   * Must match background of containing element, or unintended shape will appear.\n   */\n  @Prop() backgroundColour: 'white' | 'grey';\n\n  @Prop() selectedOptionColour: 'inherit' | 'blue' = 'blue';\n\n  private doOptionSelectCompletedHandler = (event: any) => {\n    const value = event.target.value;\n    this.selectedValue = value;\n    this.selectedLabel = event.target.label;\n    this.selectionChanged(value);\n  };\n\n  /**\n   * Space below component\n   */\n  @Prop() spaceBelow: number = 0;\n  /**\n   * Placeholder\n   */\n  @Prop() placeholder: string | undefined;\n\n  render() {\n    const greyIfRequired = this.backgroundColour === 'grey' ? ' grey' : '';\n\n    let options: Array<{ label: string; value: string }>;\n    if (typeof this.options === 'string') {\n      let parsed = JSON.parse(this.options) as unknown;\n      if (!Array.isArray(parsed)) {\n        throw new Error('Options should be an Array<{ label: string; value: string }>');\n      }\n      options = parsed;\n    } else {\n      options = this.options;\n    }\n\n    if (typeof this.placeholder === 'string' && typeof this.selectedValue !== 'string') {\n      options = [{ value: '__placeholder__', label: this.placeholder }, ...options];\n    }\n\n    if (typeof options === 'undefined') {\n      console.error('options undefined');\n      options = [];\n    }\n\n    return (\n      <div class=\"selectWrapper\">\n        <label class={greyIfRequired}>\n          <div class={'prompt' + greyIfRequired}>{this.prompt}</div>\n          <div\n            class={\n              'dropdown space-below-' +\n              this.spaceBelow +\n              ' select-style-' +\n              this.selectStyle +\n              (this.prompt === null ? '  noprompt' : '') +\n              (this.selectedOptionColour === 'inherit' ? ' inherit-colour' : '')\n            }\n          >\n            <div class=\"sleeve\">\n              <select class={greyIfRequired} onChange={this.doOptionSelectCompletedHandler}>\n                {options.map(option => (\n                  <option selected={this.selectedValue === option.value} value={option.value}>\n                    {option.label}\n                  </option>\n                ))}\n              </select>\n              <div class=\"arrow\"></div>\n            </div>\n          </div>\n        </label>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"biggive-form-field-select2.js","mappings":";;AAAA,MAAM,yBAAyB,GAAG,irHAAirH,CAAC;AACptH,qCAAe,yBAAyB;;MCM3B,sBAAsB;;;;;QA0BzB,mCAA8B,GAAG,CAAC,KAAU;YAClD,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;YACjC,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;YAC3B,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;YACxC,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;SAC9B,CAAC;;;;;;2BAd+C,UAAU;;oCAOR,MAAM;0BAY5B,CAAC;;;IAM9B,MAAM;QACJ,MAAM,cAAc,GAAG,IAAI,CAAC,gBAAgB,KAAK,MAAM,GAAG,OAAO,GAAG,EAAE,CAAC;QAEvE,IAAI,OAAgD,CAAC;QACrD,IAAI,OAAO,IAAI,CAAC,OAAO,KAAK,QAAQ,EAAE;YACpC,IAAI,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAY,CAAC;YACjD,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE;gBAC1B,MAAM,IAAI,KAAK,CAAC,8DAA8D,CAAC,CAAC;aACjF;YACD,OAAO,GAAG,MAAM,CAAC;SAClB;aAAM;YACL,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;SACxB;QAED,IAAI,OAAO,IAAI,CAAC,WAAW,KAAK,QAAQ,IAAI,OAAO,IAAI,CAAC,aAAa,KAAK,QAAQ,EAAE;YAClF,OAAO,GAAG,CAAC,EAAE,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,EAAE,GAAG,OAAO,CAAC,CAAC;SAC/E;QAED,IAAI,OAAO,OAAO,KAAK,WAAW,EAAE;YAClC,OAAO,CAAC,KAAK,CAAC,mBAAmB,CAAC,CAAC;YACnC,OAAO,GAAG,EAAE,CAAC;SACd;QAED,QACE,WAAK,KAAK,EAAC,eAAe,IACxB,aAAO,KAAK,EAAE,cAAc,IAC1B,WAAK,KAAK,EAAE,QAAQ,GAAG,cAAc,IAAG,IAAI,CAAC,MAAM,CAAO,EAC1D,WACE,KAAK,EACH,uBAAuB;gBACvB,IAAI,CAAC,UAAU;gBACf,gBAAgB;gBAChB,IAAI,CAAC,WAAW;iBACf,IAAI,CAAC,MAAM,KAAK,IAAI,GAAG,YAAY,GAAG,EAAE,CAAC;iBACzC,IAAI,CAAC,oBAAoB,KAAK,SAAS,GAAG,iBAAiB,GAAG,EAAE,CAAC,IAGpE,WAAK,KAAK,EAAC,QAAQ,IACjB,cAAQ,KAAK,EAAE,cAAc,EAAE,QAAQ,EAAE,IAAI,CAAC,8BAA8B,IACzE,OAAO,CAAC,GAAG,CAAC,MAAM,KACjB,cAAQ,QAAQ,EAAE,IAAI,CAAC,aAAa,KAAK,MAAM,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,IACvE,MAAM,CAAC,KAAK,CACN,CACV,CAAC,CACK,EACT,WAAK,KAAK,EAAC,OAAO,GAAO,CACrB,CACF,CACA,CACJ,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/biggive-form-field-select/biggive-form-field-select.scss?tag=biggive-form-field-select&encapsulation=shadow","src/components/biggive-form-field-select/biggive-form-field-select.tsx"],"sourcesContent":["@include spacers();\n\n// Includes CSS taken from https://moderncss.dev/custom-select-styles-with-pure-css/\n\n:host {\n  display: contents;\n}\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\nselect {\n  appearance: none;\n  border: none;\n  padding: 0 1em 0 0;\n  margin: 0;\n  width: 100%;\n  font-family: inherit;\n  font-size: inherit;\n  cursor: inherit;\n  line-height: inherit;\n  outline: none;\n  display: grid;\n  background-color: $colour-white;\n  align-items: center;\n}\nselect.grey {\n  background-color: $colour-grey-background;\n}\n.selectWrapper {\n  position: relative;\n}\n.prompt {\n  position: absolute;\n  z-index: 2;\n  font-size: small;\n  top: -1em;\n  background-color: $colour-white;\n  left: 4em;\n  padding-left: 1em;\n  padding-right: 1em;\n  color: $colour-primary-blue;\n}\n.prompt.grey {\n  background-color: $colour-grey-background;\n}\n\n.dropdown {\n  @include standard-font();\n  position: relative;\n  text-align: left;\n  &.select-style-bordered {\n    .sleeve {\n      @include dropdown();\n    }\n  }\n  &.select-style-underlined {\n    .sleeve {\n      @include dropdown-underlined();\n    }\n  }\n  &.inherit-colour select{\n   color: inherit !important;\n  }\n\n  select {\n    max-height: 200px;\n    overflow-x: hidden;\n    overflow-y: scroll;\n    width: 100%;\n    z-index: 1;\n    left: 0;\n    right: 0;\n  }\n  &.active .options {\n      display: block;\n  }\n}\n.dropdown.noprompt {\n  margin-top: 0;\n}\n.options.grey {\n  background-color: $colour-grey-background;\n}\n","import { Component, Prop, h, Element } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-form-field-select',\n  styleUrl: 'biggive-form-field-select.scss',\n  shadow: true,\n})\nexport class BiggiveFormFieldSelect {\n  @Element() el: HTMLBiggiveFormFieldSelectElement;\n\n  @Prop() selectionChanged: (value: string) => void;\n\n  /**\n   * Displayed as 'eyebrow' label over the top border of the box.\n   */\n  @Prop() prompt!: string | null;\n\n  @Prop({ mutable: true }) selectedValue: string | null;\n  @Prop({ mutable: true }) selectedLabel: string | null;\n\n  /**\n   * JSON array of category key/values, or takes a stringified equiavalent (for Storybook)\n   */\n  @Prop() options!: string | Array<{ label: string; value: string }>;\n  @Prop() selectStyle: 'bordered' | 'underlined' = 'bordered';\n\n  /**\n   * Must match background of containing element, or unintended shape will appear.\n   */\n  @Prop() backgroundColour: 'white' | 'grey';\n\n  @Prop() selectedOptionColour: 'inherit' | 'blue' = 'blue';\n\n  private doOptionSelectCompletedHandler = (event: any) => {\n    const value = event.target.value;\n    this.selectedValue = value;\n    this.selectedLabel = event.target.label;\n    this.selectionChanged(value);\n  };\n\n  /**\n   * Space below component\n   */\n  @Prop() spaceBelow: number = 0;\n  /**\n   * Placeholder\n   */\n  @Prop() placeholder: string | undefined;\n\n  render() {\n    const greyIfRequired = this.backgroundColour === 'grey' ? ' grey' : '';\n\n    let options: Array<{ label: string; value: string }>;\n    if (typeof this.options === 'string') {\n      let parsed = JSON.parse(this.options) as unknown;\n      if (!Array.isArray(parsed)) {\n        throw new Error('Options should be an Array<{ label: string; value: string }>');\n      }\n      options = parsed;\n    } else {\n      options = this.options;\n    }\n\n    if (typeof this.placeholder === 'string' && typeof this.selectedValue !== 'string') {\n      options = [{ value: '__placeholder__', label: this.placeholder }, ...options];\n    }\n\n    if (typeof options === 'undefined') {\n      console.error('options undefined');\n      options = [];\n    }\n\n    return (\n      <div class=\"selectWrapper\">\n        <label class={greyIfRequired}>\n          <div class={'prompt' + greyIfRequired}>{this.prompt}</div>\n          <div\n            class={\n              'dropdown space-below-' +\n              this.spaceBelow +\n              ' select-style-' +\n              this.selectStyle +\n              (this.prompt === null ? '  noprompt' : '') +\n              (this.selectedOptionColour === 'inherit' ? ' inherit-colour' : '')\n            }\n          >\n            <div class=\"sleeve\">\n              <select class={greyIfRequired} onChange={this.doOptionSelectCompletedHandler}>\n                {options.map(option => (\n                  <option selected={this.selectedValue === option.value} value={option.value}>\n                    {option.label}\n                  </option>\n                ))}\n              </select>\n              <div class=\"arrow\"></div>\n            </div>\n          </div>\n        </label>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/biggive-form.js

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
 const biggiveFormCss = ":host{display:block}";
+const BiggiveFormStyle0 = biggiveFormCss;
 
 const BiggiveForm$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveForm extends HTMLElement {
     constructor() {
@@ -11,7 +12,7 @@ const BiggiveForm$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveForm extends
     render() {
         return (h(Host, null, h("slot", null)));
     }
-    static get style() { return biggiveFormCss; }
+    static get style() { return BiggiveFormStyle0; }
 }, [1, "biggive-form"]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/dist/components/biggive-form.js.map

@@ -1 +1 @@
-{"file":"biggive-form.js","mappings":";;AAAA,MAAM,cAAc,GAAG,sBAAsB;;MCOhCA,aAAW;;;;;;IACtB,MAAM;QACJ,QACE,EAAC,IAAI,QACH,eAAa,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveForm"],"sources":["src/components/biggive-form/biggive-form.css?tag=biggive-form&encapsulation=shadow","src/components/biggive-form/biggive-form.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n","import { Component, Host, h } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-form',\n  styleUrl: 'biggive-form.css',\n  shadow: true,\n})\nexport class BiggiveForm {\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"biggive-form.js","mappings":";;AAAA,MAAM,cAAc,GAAG,sBAAsB,CAAC;AAC9C,0BAAe,cAAc;;MCMhBA,aAAW;;;;;;IACtB,MAAM;QACJ,QACE,EAAC,IAAI,QACH,eAAa,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveForm"],"sources":["src/components/biggive-form/biggive-form.css?tag=biggive-form&encapsulation=shadow","src/components/biggive-form/biggive-form.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n","import { Component, Host, h } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-form',\n  styleUrl: 'biggive-form.css',\n  shadow: true,\n})\nexport class BiggiveForm {\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/biggive-formatted-text.js

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
 const biggiveFormattedTextCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.space-above-0{margin-top:0}.space-above-1{margin-top:5px}.space-above-2{margin-top:10px}.space-above-3{margin-top:15px}.space-above-4{margin-top:30px}.space-above-5{margin-top:45px}.space-above-6{margin-top:60px}.space-below-0{margin-bottom:0}.space-below-1{margin-bottom:5px}.space-below-2{margin-bottom:10px}.space-below-3{margin-bottom:15px}.space-below-4{margin-bottom:30px}.space-below-5{margin-bottom:45px}.space-below-6{margin-bottom:60px}.text-colour-hover-primary:hover,.text-colour-primary{color:#2C089B}.text-colour-hover-secondary:hover,.text-colour-secondary{color:#2AF135}.text-colour-hover-tertiary:hover,.text-colour-tertiary{color:#FF7272}.text-colour-hover-brand-1:hover,.text-colour-brand-1{color:#B30510}.text-colour-hover-brand-2:hover,.text-colour-brand-2{color:#6E0887}.text-colour-hover-brand-3:hover,.text-colour-brand-3{color:#50B400}.text-colour-hover-brand-4:hover,.text-colour-brand-4{color:#FFE500}.text-colour-hover-brand-5:hover,.text-colour-brand-5{color:#F07D00}.text-colour-hover-brand-cc-red:hover,.text-colour-brand-cc-red{color:#B30510}.text-colour-hover-brand-wgmf-purple:hover,.text-colour-brand-wgmf-purple{color:#6E0887}.text-colour-hover-brand-gmf-green:hover,.text-colour-brand-gmf-green{color:#50B400}.text-colour-hover-brand-emf-yellow:hover,.text-colour-brand-emf-yellow{color:#FFE500}.text-colour-hover-brand-c4c-orange:hover,.text-colour-brand-c4c-orange{color:#F07D00}.text-colour-hover-brand-afa-pink:hover,.text-colour-brand-afa-pink{color:#BF387D}.text-colour-hover-brand-mhf-turquoise:hover,.text-colour-brand-mhf-turquoise{color:#62CFC9}.text-colour-hover-brand-grey:hover,.text-colour-brand-grey{color:#CBC8C8}.text-colour-hover-white:hover,.text-colour-white{color:#FFFFFF}.text-colour-hover-black:hover,.text-colour-black{color:#000000}.text-colour-hover-grey-extra-light:hover,.text-colour-grey-extra-light{color:#D7D7D7}.text-colour-hover-grey-light:hover,.text-colour-grey-light{color:#E8E8E8}.text-colour-hover-grey-medium:hover,.text-colour-grey-medium{color:#8A8A8A}.text-colour-hover-grey-dark:hover,.text-colour-grey-dark{color:#4A4A4A}.text-colour-hover-brand-6:hover,.text-colour-brand-6{color:#CBC8C8}:host{display:block}.container{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px}.container img{width:100%;height:auto}.container a{color:inherit;text-decoration:underline}.container.max-width-10 .sleeve{max-width:10%;margin-left:auto;margin-right:auto}.container.max-width-15 .sleeve{max-width:15%;margin-left:auto;margin-right:auto}.container.max-width-20 .sleeve{max-width:20%;margin-left:auto;margin-right:auto}.container.max-width-25 .sleeve{max-width:25%;margin-left:auto;margin-right:auto}.container.max-width-30 .sleeve{max-width:30%;margin-left:auto;margin-right:auto}.container.max-width-35 .sleeve{max-width:35%;margin-left:auto;margin-right:auto}.container.max-width-40 .sleeve{max-width:40%;margin-left:auto;margin-right:auto}.container.max-width-45 .sleeve{max-width:45%;margin-left:auto;margin-right:auto}.container.max-width-50 .sleeve{max-width:50%;margin-left:auto;margin-right:auto}.container.max-width-55 .sleeve{max-width:55%;margin-left:auto;margin-right:auto}.container.max-width-60 .sleeve{max-width:60%;margin-left:auto;margin-right:auto}.container.max-width-65 .sleeve{max-width:65%;margin-left:auto;margin-right:auto}.container.max-width-70 .sleeve{max-width:70%;margin-left:auto;margin-right:auto}.container.max-width-75 .sleeve{max-width:75%;margin-left:auto;margin-right:auto}.container.max-width-80 .sleeve{max-width:80%;margin-left:auto;margin-right:auto}.container.max-width-85 .sleeve{max-width:85%;margin-left:auto;margin-right:auto}.container.max-width-90 .sleeve{max-width:90%;margin-left:auto;margin-right:auto}.container.max-width-95 .sleeve{max-width:95%;margin-left:auto;margin-right:auto}";
+const BiggiveFormattedTextStyle0 = biggiveFormattedTextCss;
 
 const BiggiveFormattedText$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveFormattedText extends HTMLElement {
     constructor() {
@@ -14,7 +15,7 @@ const BiggiveFormattedText$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveFor
     render() {
         return (h("div", { class: 'container max-width-' + this.maxWidth + ' text-colour-' + this.defaultTextColour + ' space-below-' + this.spaceBelow }, h("slot", null)));
     }
-    static get style() { return biggiveFormattedTextCss; }
+    static get style() { return BiggiveFormattedTextStyle0; }
 }, [1, "biggive-formatted-text", {
         "spaceBelow": [2, "space-below"],
         "defaultTextColour": [1, "default-text-colour"],

package/dist/components/biggive-formatted-text.js.map

@@ -1 +1 @@
-{"file":"biggive-formatted-text.js","mappings":";;AAAA,MAAM,uBAAuB,GAAG,4zHAA4zH;;MCO/0HA,sBAAoB;;;;;0BAIF,CAAC;iCAIM,SAAS;wBAKlB,GAAG;;IAE9B,MAAM;QACJ,QACE,WAAK,KAAK,EAAE,sBAAsB,GAAG,IAAI,CAAC,QAAQ,GAAG,eAAe,GAAG,IAAI,CAAC,iBAAiB,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,IAC/H,eAAa,CACT,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveFormattedText"],"sources":["src/components/biggive-formatted-text/biggive-formatted-text.scss?tag=biggive-formatted-text&encapsulation=shadow","src/components/biggive-formatted-text/biggive-formatted-text.tsx"],"sourcesContent":["@include spacers();\n@include text-colours();\n\n:host {\n  display: block;\n}\n\n.container {\n  @include standard-font();\n  img {\n    width: 100%;\n    height: auto;\n  }\n  a {\n    color: inherit;\n    text-decoration: underline;\n  }\n  &.max-width-10 .sleeve { @include max-width-10(); }\n  &.max-width-15 .sleeve { @include max-width-15(); }\n  &.max-width-20 .sleeve { @include max-width-20(); }\n  &.max-width-25 .sleeve { @include max-width-25(); }\n  &.max-width-30 .sleeve { @include max-width-30(); }\n  &.max-width-35 .sleeve { @include max-width-35(); }\n  &.max-width-40 .sleeve { @include max-width-40(); }\n  &.max-width-45 .sleeve { @include max-width-45(); }\n  &.max-width-50 .sleeve { @include max-width-50(); }\n  &.max-width-55 .sleeve { @include max-width-55(); }\n  &.max-width-60 .sleeve { @include max-width-60(); }\n  &.max-width-65 .sleeve { @include max-width-65(); }\n  &.max-width-70 .sleeve { @include max-width-70(); }\n  &.max-width-75 .sleeve { @include max-width-75(); }\n  &.max-width-80 .sleeve { @include max-width-80(); }\n  &.max-width-85 .sleeve { @include max-width-85(); }\n  &.max-width-90 .sleeve { @include max-width-90(); }\n  &.max-width-95 .sleeve { @include max-width-95(); }\n}\n\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-formatted-text',\n  styleUrl: 'biggive-formatted-text.scss',\n  shadow: true,\n})\nexport class BiggiveFormattedText {\n  /**\n   * Space below component\n   */\n  @Prop() spaceBelow: number = 0;\n  /**\n   * Default text colour\n   */\n  @Prop() defaultTextColour: string = 'primary';\n\n  /**\n   * Width\n   */\n  @Prop() maxWidth: number = 100;\n\n  render() {\n    return (\n      <div class={'container max-width-' + this.maxWidth + ' text-colour-' + this.defaultTextColour + ' space-below-' + this.spaceBelow}>\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"biggive-formatted-text.js","mappings":";;AAAA,MAAM,uBAAuB,GAAG,4zHAA4zH,CAAC;AAC71H,mCAAe,uBAAuB;;MCMzBA,sBAAoB;;;;;0BAIF,CAAC;iCAIM,SAAS;wBAKlB,GAAG;;IAE9B,MAAM;QACJ,QACE,WAAK,KAAK,EAAE,sBAAsB,GAAG,IAAI,CAAC,QAAQ,GAAG,eAAe,GAAG,IAAI,CAAC,iBAAiB,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,IAC/H,eAAa,CACT,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveFormattedText"],"sources":["src/components/biggive-formatted-text/biggive-formatted-text.scss?tag=biggive-formatted-text&encapsulation=shadow","src/components/biggive-formatted-text/biggive-formatted-text.tsx"],"sourcesContent":["@include spacers();\n@include text-colours();\n\n:host {\n  display: block;\n}\n\n.container {\n  @include standard-font();\n  img {\n    width: 100%;\n    height: auto;\n  }\n  a {\n    color: inherit;\n    text-decoration: underline;\n  }\n  &.max-width-10 .sleeve { @include max-width-10(); }\n  &.max-width-15 .sleeve { @include max-width-15(); }\n  &.max-width-20 .sleeve { @include max-width-20(); }\n  &.max-width-25 .sleeve { @include max-width-25(); }\n  &.max-width-30 .sleeve { @include max-width-30(); }\n  &.max-width-35 .sleeve { @include max-width-35(); }\n  &.max-width-40 .sleeve { @include max-width-40(); }\n  &.max-width-45 .sleeve { @include max-width-45(); }\n  &.max-width-50 .sleeve { @include max-width-50(); }\n  &.max-width-55 .sleeve { @include max-width-55(); }\n  &.max-width-60 .sleeve { @include max-width-60(); }\n  &.max-width-65 .sleeve { @include max-width-65(); }\n  &.max-width-70 .sleeve { @include max-width-70(); }\n  &.max-width-75 .sleeve { @include max-width-75(); }\n  &.max-width-80 .sleeve { @include max-width-80(); }\n  &.max-width-85 .sleeve { @include max-width-85(); }\n  &.max-width-90 .sleeve { @include max-width-90(); }\n  &.max-width-95 .sleeve { @include max-width-95(); }\n}\n\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-formatted-text',\n  styleUrl: 'biggive-formatted-text.scss',\n  shadow: true,\n})\nexport class BiggiveFormattedText {\n  /**\n   * Space below component\n   */\n  @Prop() spaceBelow: number = 0;\n  /**\n   * Default text colour\n   */\n  @Prop() defaultTextColour: string = 'primary';\n\n  /**\n   * Width\n   */\n  @Prop() maxWidth: number = 100;\n\n  render() {\n    return (\n      <div class={'container max-width-' + this.maxWidth + ' text-colour-' + this.defaultTextColour + ' space-below-' + this.spaceBelow}>\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/biggive-generic-icon2.js

@@ -2,6 +2,7 @@ import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/clien
 import { F as FontAwesomeIconsService } from './fontawesome-icons.js';
 
 const biggiveGenericIconCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.background-colour-hover-primary:hover,.background-colour-primary{background-color:#2C089B}.background-colour-hover-secondary:hover,.background-colour-secondary{background-color:#2AF135}.background-colour-hover-tertiary:hover,.background-colour-tertiary{background-color:#FF7272}.background-colour-hover-brand-1:hover,.background-colour-brand-1{background-color:#B30510}.background-colour-hover-brand-2:hover,.background-colour-brand-2{background-color:#6E0887}.background-colour-hover-brand-3:hover,.background-colour-brand-3{background-color:#50B400}.background-colour-hover-brand-4:hover,.background-colour-brand-4{background-color:#FFE500}.background-colour-hover-brand-5:hover,.background-colour-brand-5{background-color:#F07D00}.background-colour-hover-brand-cc-red:hover,.background-colour-brand-cc-red{background-color:#B30510}.background-colour-hover-brand-wgmf-purple:hover,.background-colour-brand-wgmf-purple{background-color:#6E0887}.background-colour-hover-brand-gmf-green:hover,.background-colour-brand-gmf-green{background-color:#50B400}.background-colour-hover-brand-emf-yellow:hover,.background-colour-brand-emf-yellow{background-color:#FFE500}.background-colour-hover-brand-c4c-orange:hover,.background-colour-brand-c4c-orange{background-color:#F07D00}.background-colour-hover-brand-afa-pink:hover,.background-colour-brand-afa-pink{background-color:#BF387D}.background-colour-hover-brand-mhf-turquoise:hover,.background-colour-brand-mhf-turquoise{background-color:#62CFC9}.background-colour-hover-brand-grey:hover,.background-colour-brand-grey{background-color:#CBC8C8}.background-colour-hover-white:hover,.background-colour-white{background-color:#FFFFFF}.background-colour-hover-black:hover,.background-colour-black{background-color:#000000}.background-colour-hover-grey-extra-light:hover,.background-colour-grey-extra-light{background-color:#D7D7D7}.background-colour-hover-grey-light:hover,.background-colour-grey-light{background-color:#E8E8E8}.background-colour-hover-grey-medium:hover,.background-colour-grey-medium{background-color:#8A8A8A}.background-colour-hover-grey-dark:hover,.background-colour-grey-dark{background-color:#4A4A4A}.background-colour-hover-brand-6:hover,.background-colour-brand-6{background-color:#62CFC9}.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-cc-red{fill:#B30510}.fill-brand-wgmf-purple{fill:#6E0887}.fill-brand-gmf-green{fill:#50B400}.fill-brand-emf-yellow{fill:#FFE500}.fill-brand-c4c-orange{fill:#F07D00}.fill-brand-afa-pink{fill:#BF387D}.fill-brand-mhf-turquoise{fill:#62CFC9}.fill-brand-grey{fill:#CBC8C8}.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-brand-6{fill:#CBC8C8}:host{display:contents}.generic-icon-item{width:40px;height:40px;border-radius:50%;text-align:center;transition:all ease-in-out 0.5s;display:inline-block;margin-right:10px}.generic-icon-item.colour-scheme-primary{background-color:#2C089B}.generic-icon-item.colour-scheme-primary svg{fill:#FFFFFF}.generic-icon-item.colour-scheme-secondary{background-color:#2AF135}.generic-icon-item.colour-scheme-secondary svg{fill:#000000}.generic-icon-item.colour-scheme-tertiary{background-color:#FF7272}.generic-icon-item.colour-scheme-tertiary svg{fill:#000000}.generic-icon-item.colour-scheme-brand-1{background-color:#B30510}.generic-icon-item.colour-scheme-brand-1 svg{fill:#000000}.generic-icon-item.colour-scheme-brand-2{background-color:#6E0887}.generic-icon-item.colour-scheme-brand-2 svg{fill:#000000}.generic-icon-item.colour-scheme-brand-3{background-color:#50B400}.generic-icon-item.colour-scheme-brand-3 svg{fill:#000000}.generic-icon-item.colour-scheme-brand-4{background-color:#FFE500}.generic-icon-item.colour-scheme-brand-4 svg{fill:#000000}.generic-icon-item.colour-scheme-brand-5{background-color:#F07D00}.generic-icon-item.colour-scheme-brand-5 svg{fill:#000000}.generic-icon-item.colour-scheme-mhf-turquoise{background-color:#62CFC9}.generic-icon-item.colour-scheme-mhf-turquoise svg{fill:#000000}.generic-icon-item.colour-scheme-brand-grey{background-color:#CBC8C8}.generic-icon-item.colour-scheme-brand-grey svg{fill:#000000}.generic-icon-item.colour-scheme-brand-6{background-color:#CBC8C8}.generic-icon-item.colour-scheme-brand-6 svg{fill:#000000}.generic-icon-item.colour-scheme-brand-afa-pink{background-color:#BF387D}.generic-icon-item.colour-scheme-brand-afa-pink svg{fill:#000000}.generic-icon-item.colour-scheme-white{background-color:#FFFFFF}.generic-icon-item.colour-scheme-white svg{fill:#000000}.generic-icon-item.colour-scheme-black{background-color:#000000}.generic-icon-item.colour-scheme-black svg{fill:#FFFFFF}.generic-icon-item.colour-scheme-black{background-color:#D7D7D7}.generic-icon-item.colour-scheme-black svg{fill:#D7D7D7}.generic-icon-item.colour-scheme-black{background-color:#E8E8E8}.generic-icon-item.colour-scheme-black svg{fill:#E8E8E8}.generic-icon-item.colour-scheme-black{background-color:#8A8A8A}.generic-icon-item.colour-scheme-black svg{fill:#8A8A8A}.generic-icon-item.colour-scheme-black{background-color:#4A4A4A}.generic-icon-item.colour-scheme-black svg{fill:#4A4A4A}.generic-icon-item:hover{background-color:#FFFFFF}.generic-icon-item:hover svg{fill:#000000}.generic-icon-item a{display:grid;position:relative;padding:10px;box-sizing:border-box;height:100%}.generic-icon-item a svg{width:100%;height:100%}@media screen and (max-width: 576px){.generic-icon-item{width:40px;height:40px;border-radius:50%;text-align:center;transition:all ease-in-out 0.5s;display:inline-block;margin-right:10px;width:30px;height:30px;margin:auto}.generic-icon-item.colour-scheme-primary{background-color:#2C089B}.generic-icon-item.colour-scheme-primary svg{fill:#FFFFFF}.generic-icon-item.colour-scheme-secondary{background-color:#2AF135}.generic-icon-item.colour-scheme-secondary svg{fill:#000000}.generic-icon-item.colour-scheme-tertiary{background-color:#FF7272}.generic-icon-item.colour-scheme-tertiary svg{fill:#000000}.generic-icon-item.colour-scheme-brand-1{background-color:#B30510}.generic-icon-item.colour-scheme-brand-1 svg{fill:#000000}.generic-icon-item.colour-scheme-brand-2{background-color:#6E0887}.generic-icon-item.colour-scheme-brand-2 svg{fill:#000000}.generic-icon-item.colour-scheme-brand-3{background-color:#50B400}.generic-icon-item.colour-scheme-brand-3 svg{fill:#000000}.generic-icon-item.colour-scheme-brand-4{background-color:#FFE500}.generic-icon-item.colour-scheme-brand-4 svg{fill:#000000}.generic-icon-item.colour-scheme-brand-5{background-color:#F07D00}.generic-icon-item.colour-scheme-brand-5 svg{fill:#000000}.generic-icon-item.colour-scheme-mhf-turquoise{background-color:#62CFC9}.generic-icon-item.colour-scheme-mhf-turquoise svg{fill:#000000}.generic-icon-item.colour-scheme-brand-grey{background-color:#CBC8C8}.generic-icon-item.colour-scheme-brand-grey svg{fill:#000000}.generic-icon-item.colour-scheme-brand-6{background-color:#CBC8C8}.generic-icon-item.colour-scheme-brand-6 svg{fill:#000000}.generic-icon-item.colour-scheme-brand-afa-pink{background-color:#BF387D}.generic-icon-item.colour-scheme-brand-afa-pink svg{fill:#000000}.generic-icon-item.colour-scheme-white{background-color:#FFFFFF}.generic-icon-item.colour-scheme-white svg{fill:#000000}.generic-icon-item.colour-scheme-black{background-color:#000000}.generic-icon-item.colour-scheme-black svg{fill:#FFFFFF}.generic-icon-item.colour-scheme-black{background-color:#D7D7D7}.generic-icon-item.colour-scheme-black svg{fill:#D7D7D7}.generic-icon-item.colour-scheme-black{background-color:#E8E8E8}.generic-icon-item.colour-scheme-black svg{fill:#E8E8E8}.generic-icon-item.colour-scheme-black{background-color:#8A8A8A}.generic-icon-item.colour-scheme-black svg{fill:#8A8A8A}.generic-icon-item.colour-scheme-black{background-color:#4A4A4A}.generic-icon-item.colour-scheme-black svg{fill:#4A4A4A}.generic-icon-item:hover{background-color:#FFFFFF}.generic-icon-item:hover svg{fill:#000000}.generic-icon-item a{display:grid;position:relative;padding:10px;box-sizing:border-box;height:100%}.generic-icon-item a svg{width:100%;height:100%}.generic-icon-item a{padding:6px}.generic-icon-item a{margin:auto}}.CaretRight{height:10px;width:10px;margin-right:0px}.CaretRight a{padding:0px}.MenuClose a svg{height:12px;width:12px}";
+const BiggiveGenericIconStyle0 = biggiveGenericIconCss;
 
 const BiggiveGenericIcon = /*@__PURE__*/ proxyCustomElement(class BiggiveGenericIcon extends HTMLElement {
     constructor() {
@@ -35,7 +36,7 @@ const BiggiveGenericIcon = /*@__PURE__*/ proxyCustomElement(class BiggiveGeneric
         // Note: the icon name prop is set as a css class too for any styling specific to certain icons
         h("div", { class: 'generic-icon-item background-colour-' + this.backgroundColour + ' ' + this.icon }, h("a", { href: this.url }, iconDefinition ? (h("svg", { width: iconDefinition.icon[0], height: iconDefinition.icon[1], xmlns: "http://www.w3.org/2000/svg", class: 'fill-' + this.iconColour, viewBox: '0 0 ' + iconDefinition.icon[0] + ' ' + iconDefinition.icon[1] }, h("path", { d: iconDefinition.icon[4].toString() }))) : null)));
     }
-    static get style() { return biggiveGenericIconCss; }
+    static get style() { return BiggiveGenericIconStyle0; }
 }, [0, "biggive-generic-icon", {
         "backgroundColour": [1, "background-colour"],
         "iconColour": [1, "icon-colour"],

package/dist/components/biggive-generic-icon2.js.map

@@ -1 +1 @@
-{"file":"biggive-generic-icon2.js","mappings":";;;AAAA,MAAM,qBAAqB,GAAG,+3QAA+3Q;;MCUh5Q,kBAAkB;;;;gCACW,SAAS;0BAEf,OAAO;;;;;IAQjC,iBAAiB;QACvB,IAAI,cAAc,CAAC;QACnB,IAAI,IAAI,CAAC,SAAS,IAAI,aAAa,EAAE;YACnC,cAAc,GAAG,uBAAuB,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SACxE;aAAM,IAAI,IAAI,CAAC,SAAS,IAAI,MAAM,EAAE;YACnC,cAAc,GAAG,uBAAuB,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SACjE;aAAM,IAAI,IAAI,CAAC,SAAS,IAAI,QAAQ,EAAE;YACrC,cAAc,GAAG,uBAAuB,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SACnE;aAAM,IAAI,IAAI,CAAC,SAAS,IAAI,UAAU,EAAE;YACvC,cAAc,GAAG,uBAAuB,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SACrE;QACD,OAAO,cAAc,CAAC;KACvB;IAED,MAAM;QACJ,MAAM,cAAc,GAAG,IAAI,CAAC,iBAAiB,EAAE,CAAC;QAEhD;;QAEE,WAAK,KAAK,EAAE,sCAAsC,GAAG,IAAI,CAAC,gBAAgB,GAAG,GAAG,GAAG,IAAI,CAAC,IAAI,IAC1F,SAAG,IAAI,EAAE,IAAI,CAAC,GAAG,IACd,cAAc,IACb,WACE,KAAK,EAAE,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC,EAC7B,MAAM,EAAE,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC,EAC9B,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC,UAAU,EAChC,OAAO,EAAE,MAAM,GAAG,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,GAAG,GAAG,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC,IAEvE,YAAM,CAAC,EAAE,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,GAAI,CAC1C,IACJ,IAAI,CACN,CACA,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/biggive-generic-icon/biggive-generic-icon.scss?tag=biggive-generic-icon","src/components/biggive-generic-icon/biggive-generic-icon.tsx"],"sourcesContent":["@include backgrounds();\n@include fills();\n\n:host {\n  display: contents;\n}\n\n.generic-icon-item {\n  @include icon-large();\n\n  @media screen and (max-width: $screen-mobile-max) {\n    @include icon-medium();\n    margin: auto;\n\n    a {\n      margin: auto;\n    }\n  }\n}\n\n.CaretRight {\n  height: 10px;\n  width: 10px;\n  margin-right: 0px;\n  a {\n    padding: 0px;\n  }\n}\n\n.MenuClose {\n  a {\n    svg {\n      height: 12px;\n      width: 12px;\n    }\n  }\n}\n","import { IconDefinition } from '@fortawesome/fontawesome-svg-core';\nimport { Component, Prop, h } from '@stencil/core';\nimport { FontAwesomeIconsService } from '../../util/fontawesome-icons';\nimport { brandColour } from '../../globals/brand-colour';\n\n@Component({\n  tag: 'biggive-generic-icon',\n  styleUrl: 'biggive-generic-icon.scss',\n  shadow: false,\n})\nexport class BiggiveGenericIcon {\n  @Prop() backgroundColour: brandColour = 'primary';\n\n  @Prop() iconColour: brandColour = 'white';\n\n  @Prop() iconGroup: 'beneficiary' | 'misc' | 'social' | 'category';\n\n  @Prop() icon: string;\n\n  @Prop() url: string;\n\n  private getIconDefinition(): IconDefinition | undefined {\n    let iconDefinition;\n    if (this.iconGroup == 'beneficiary') {\n      iconDefinition = FontAwesomeIconsService.getBeneficiaryIcon(this.icon);\n    } else if (this.iconGroup == 'misc') {\n      iconDefinition = FontAwesomeIconsService.getMiscIcon(this.icon);\n    } else if (this.iconGroup == 'social') {\n      iconDefinition = FontAwesomeIconsService.getSocialIcon(this.icon);\n    } else if (this.iconGroup == 'category') {\n      iconDefinition = FontAwesomeIconsService.getCategoryIcon(this.icon);\n    }\n    return iconDefinition;\n  }\n\n  render() {\n    const iconDefinition = this.getIconDefinition();\n\n    return (\n      // Note: the icon name prop is set as a css class too for any styling specific to certain icons\n      <div class={'generic-icon-item background-colour-' + this.backgroundColour + ' ' + this.icon}>\n        <a href={this.url}>\n          {iconDefinition ? (\n            <svg\n              width={iconDefinition.icon[0]}\n              height={iconDefinition.icon[1]}\n              xmlns=\"http://www.w3.org/2000/svg\"\n              class={'fill-' + this.iconColour}\n              viewBox={'0 0 ' + iconDefinition.icon[0] + ' ' + iconDefinition.icon[1]}\n            >\n              <path d={iconDefinition.icon[4].toString()} />\n            </svg>\n          ) : null}\n        </a>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"biggive-generic-icon2.js","mappings":";;;AAAA,MAAM,qBAAqB,GAAG,+3QAA+3Q,CAAC;AAC95Q,iCAAe,qBAAqB;;MCSvB,kBAAkB;;;;gCACW,SAAS;0BAEf,OAAO;;;;;IAQjC,iBAAiB;QACvB,IAAI,cAAc,CAAC;QACnB,IAAI,IAAI,CAAC,SAAS,IAAI,aAAa,EAAE;YACnC,cAAc,GAAG,uBAAuB,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SACxE;aAAM,IAAI,IAAI,CAAC,SAAS,IAAI,MAAM,EAAE;YACnC,cAAc,GAAG,uBAAuB,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SACjE;aAAM,IAAI,IAAI,CAAC,SAAS,IAAI,QAAQ,EAAE;YACrC,cAAc,GAAG,uBAAuB,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SACnE;aAAM,IAAI,IAAI,CAAC,SAAS,IAAI,UAAU,EAAE;YACvC,cAAc,GAAG,uBAAuB,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SACrE;QACD,OAAO,cAAc,CAAC;KACvB;IAED,MAAM;QACJ,MAAM,cAAc,GAAG,IAAI,CAAC,iBAAiB,EAAE,CAAC;QAEhD;;QAEE,WAAK,KAAK,EAAE,sCAAsC,GAAG,IAAI,CAAC,gBAAgB,GAAG,GAAG,GAAG,IAAI,CAAC,IAAI,IAC1F,SAAG,IAAI,EAAE,IAAI,CAAC,GAAG,IACd,cAAc,IACb,WACE,KAAK,EAAE,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC,EAC7B,MAAM,EAAE,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC,EAC9B,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC,UAAU,EAChC,OAAO,EAAE,MAAM,GAAG,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,GAAG,GAAG,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC,IAEvE,YAAM,CAAC,EAAE,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,GAAI,CAC1C,IACJ,IAAI,CACN,CACA,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/biggive-generic-icon/biggive-generic-icon.scss?tag=biggive-generic-icon","src/components/biggive-generic-icon/biggive-generic-icon.tsx"],"sourcesContent":["@include backgrounds();\n@include fills();\n\n:host {\n  display: contents;\n}\n\n.generic-icon-item {\n  @include icon-large();\n\n  @media screen and (max-width: $screen-mobile-max) {\n    @include icon-medium();\n    margin: auto;\n\n    a {\n      margin: auto;\n    }\n  }\n}\n\n.CaretRight {\n  height: 10px;\n  width: 10px;\n  margin-right: 0px;\n  a {\n    padding: 0px;\n  }\n}\n\n.MenuClose {\n  a {\n    svg {\n      height: 12px;\n      width: 12px;\n    }\n  }\n}\n","import { IconDefinition } from '@fortawesome/fontawesome-svg-core';\nimport { Component, Prop, h } from '@stencil/core';\nimport { FontAwesomeIconsService } from '../../util/fontawesome-icons';\nimport { brandColour } from '../../globals/brand-colour';\n\n@Component({\n  tag: 'biggive-generic-icon',\n  styleUrl: 'biggive-generic-icon.scss',\n  shadow: false,\n})\nexport class BiggiveGenericIcon {\n  @Prop() backgroundColour: brandColour = 'primary';\n\n  @Prop() iconColour: brandColour = 'white';\n\n  @Prop() iconGroup: 'beneficiary' | 'misc' | 'social' | 'category';\n\n  @Prop() icon: string;\n\n  @Prop() url: string;\n\n  private getIconDefinition(): IconDefinition | undefined {\n    let iconDefinition;\n    if (this.iconGroup == 'beneficiary') {\n      iconDefinition = FontAwesomeIconsService.getBeneficiaryIcon(this.icon);\n    } else if (this.iconGroup == 'misc') {\n      iconDefinition = FontAwesomeIconsService.getMiscIcon(this.icon);\n    } else if (this.iconGroup == 'social') {\n      iconDefinition = FontAwesomeIconsService.getSocialIcon(this.icon);\n    } else if (this.iconGroup == 'category') {\n      iconDefinition = FontAwesomeIconsService.getCategoryIcon(this.icon);\n    }\n    return iconDefinition;\n  }\n\n  render() {\n    const iconDefinition = this.getIconDefinition();\n\n    return (\n      // Note: the icon name prop is set as a css class too for any styling specific to certain icons\n      <div class={'generic-icon-item background-colour-' + this.backgroundColour + ' ' + this.icon}>\n        <a href={this.url}>\n          {iconDefinition ? (\n            <svg\n              width={iconDefinition.icon[0]}\n              height={iconDefinition.icon[1]}\n              xmlns=\"http://www.w3.org/2000/svg\"\n              class={'fill-' + this.iconColour}\n              viewBox={'0 0 ' + iconDefinition.icon[0] + ' ' + iconDefinition.icon[1]}\n            >\n              <path d={iconDefinition.icon[4].toString()} />\n            </svg>\n          ) : null}\n        </a>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/biggive-grid.js

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
 const biggiveGridCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.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}:host{display:contents}.grid{margin-bottom:15px;display:flex;flex-flow:row wrap}.space-between{justify-content:space-between}.grid ::slotted([slot=grid-item]){display:block}.column-count-2 ::slotted(*){width:50%;display:flex;flex-direction:column}.column-count-3 ::slotted(*){width:33.3333333333%;display:flex;flex-direction:column}.column-count-4 ::slotted(*){width:25%;display:flex;flex-direction:column}.column-count-5 ::slotted(*){width:20%;display:flex;flex-direction:column}.column-count-6 ::slotted(*){width:16.6666666667%;display:flex;flex-direction:column}.column-gap-1{justify-content:space-between}.column-gap-2{justify-content:space-between}.column-gap-3{justify-content:space-between}.column-gap-4{justify-content:space-between}.column-gap-5{justify-content:space-between}.column-gap-6{justify-content:space-between}.column-count-2.column-gap-1 ::slotted(*){width:calc(50% - 2.5px)}.column-count-2.column-gap-2 ::slotted(*){width:calc(50% - 5px)}.column-count-2.column-gap-3 ::slotted(*){width:calc(50% - 7.5px)}.column-count-2.column-gap-4 ::slotted(*){width:calc(50% - 15px)}.column-count-2.column-gap-5 ::slotted(*){width:calc(50% - 22.5px)}.column-count-2.column-gap-6 ::slotted(*){width:calc(50% - 30px)}.column-count-3.column-gap-1 ::slotted(*){width:calc(33.3333333333% - 3.3333333333px)}.column-count-3.column-gap-2 ::slotted(*){width:calc(33.3333333333% - 6.6666666667px)}.column-count-3.column-gap-3 ::slotted(*){width:calc(33.3333333333% - 10px)}.column-count-3.column-gap-4 ::slotted(*){width:calc(33.3333333333% - 20px)}.column-count-3.column-gap-5 ::slotted(*){width:calc(33.3333333333% - 30px)}.column-count-3.column-gap-6 ::slotted(*){width:calc(33.3333333333% - 40px)}.column-count-4.column-gap-1 ::slotted(*){width:calc(25% - 3.75px)}.column-count-4.column-gap-2 ::slotted(*){width:calc(25% - 7.5px)}.column-count-4.column-gap-3 ::slotted(*){width:calc(25% - 11.25px)}.column-count-4.column-gap-4 ::slotted(*){width:calc(25% - 22.5px)}.column-count-4.column-gap-5 ::slotted(*){width:calc(25% - 33.75px)}.column-count-4.column-gap-6 ::slotted(*){width:calc(25% - 45px)}.column-count-5.column-gap-1 ::slotted(*){width:calc(20% - 4px)}.column-count-5.column-gap-2 ::slotted(*){width:calc(20% - 8px)}.column-count-5.column-gap-3 ::slotted(*){width:calc(20% - 12px)}.column-count-5.column-gap-4 ::slotted(*){width:calc(20% - 24px)}.column-count-5.column-gap-5 ::slotted(*){width:calc(20% - 36px)}.column-count-5.column-gap-6 ::slotted(*){width:calc(20% - 48px)}.column-count-6.column-gap-1 ::slotted(*){width:calc(16.6666666667% - 4.1666666667px)}.column-count-6.column-gap-2 ::slotted(*){width:calc(16.6666666667% - 8.3333333333px)}.column-count-6.column-gap-3 ::slotted(*){width:calc(16.6666666667% - 12.5px)}.column-count-6.column-gap-4 ::slotted(*){width:calc(16.6666666667% - 25px)}.column-count-6.column-gap-5 ::slotted(*){width:calc(16.6666666667% - 37.5px)}.column-count-6.column-gap-6 ::slotted(*){width:calc(16.6666666667% - 50px)}.column-count-3.column-gap-1:after{content:\"\";display:flex;flex-direction:column;width:calc(33.3333333333% - 3.3333333333px)}.column-count-3.column-gap-2:after{content:\"\";display:flex;flex-direction:column;width:calc(33.3333333333% - 6.6666666667px)}.column-count-3.column-gap-3:after{content:\"\";display:flex;flex-direction:column;width:calc(33.3333333333% - 10px)}.column-count-3.column-gap-4:after{content:\"\";display:flex;flex-direction:column;width:calc(33.3333333333% - 20px)}.column-count-3.column-gap-5:after{content:\"\";display:flex;flex-direction:column;width:calc(33.3333333333% - 30px)}.column-count-3.column-gap-6:after{content:\"\";display:flex;flex-direction:column;width:calc(33.3333333333% - 40px)}@media screen and (max-width: 768px){.column-count-1 ::slotted(*){width:calc(51% - 15px)}.column-count-1.column-gap-1 ::slotted(*){width:calc(50% - 15px)}.column-count-1.column-gap-2 ::slotted(*){width:calc(50% - 15px)}.column-count-1.column-gap-3 ::slotted(*){width:calc(50% - 15px)}.column-count-1.column-gap-4 ::slotted(*){width:calc(50% - 15px)}.column-count-1.column-gap-5 ::slotted(*){width:calc(50% - 15px)}.column-count-1.column-gap-6 ::slotted(*){width:calc(50% - 15px)}.column-count-2 ::slotted(*){width:calc(51% - 15px)}.column-count-2.column-gap-1 ::slotted(*){width:calc(50% - 15px)}.column-count-2.column-gap-2 ::slotted(*){width:calc(50% - 15px)}.column-count-2.column-gap-3 ::slotted(*){width:calc(50% - 15px)}.column-count-2.column-gap-4 ::slotted(*){width:calc(50% - 15px)}.column-count-2.column-gap-5 ::slotted(*){width:calc(50% - 15px)}.column-count-2.column-gap-6 ::slotted(*){width:calc(50% - 15px)}.column-count-3 ::slotted(*){width:calc(51% - 15px)}.column-count-3.column-gap-1 ::slotted(*){width:calc(50% - 15px)}.column-count-3.column-gap-2 ::slotted(*){width:calc(50% - 15px)}.column-count-3.column-gap-3 ::slotted(*){width:calc(50% - 15px)}.column-count-3.column-gap-4 ::slotted(*){width:calc(50% - 15px)}.column-count-3.column-gap-5 ::slotted(*){width:calc(50% - 15px)}.column-count-3.column-gap-6 ::slotted(*){width:calc(50% - 15px)}.column-count-4 ::slotted(*){width:calc(51% - 15px)}.column-count-4.column-gap-1 ::slotted(*){width:calc(50% - 15px)}.column-count-4.column-gap-2 ::slotted(*){width:calc(50% - 15px)}.column-count-4.column-gap-3 ::slotted(*){width:calc(50% - 15px)}.column-count-4.column-gap-4 ::slotted(*){width:calc(50% - 15px)}.column-count-4.column-gap-5 ::slotted(*){width:calc(50% - 15px)}.column-count-4.column-gap-6 ::slotted(*){width:calc(50% - 15px)}.column-count-5 ::slotted(*){width:calc(51% - 15px)}.column-count-5.column-gap-1 ::slotted(*){width:calc(50% - 15px)}.column-count-5.column-gap-2 ::slotted(*){width:calc(50% - 15px)}.column-count-5.column-gap-3 ::slotted(*){width:calc(50% - 15px)}.column-count-5.column-gap-4 ::slotted(*){width:calc(50% - 15px)}.column-count-5.column-gap-5 ::slotted(*){width:calc(50% - 15px)}.column-count-5.column-gap-6 ::slotted(*){width:calc(50% - 15px)}.column-count-6 ::slotted(*){width:calc(51% - 15px)}.column-count-6.column-gap-1 ::slotted(*){width:calc(50% - 15px)}.column-count-6.column-gap-2 ::slotted(*){width:calc(50% - 15px)}.column-count-6.column-gap-3 ::slotted(*){width:calc(50% - 15px)}.column-count-6.column-gap-4 ::slotted(*){width:calc(50% - 15px)}.column-count-6.column-gap-5 ::slotted(*){width:calc(50% - 15px)}.column-count-6.column-gap-6 ::slotted(*){width:calc(50% - 15px)}}@media screen and (max-width: 576px){.column-count-1 ::slotted(*){width:100%}.column-count-1.column-gap-1 ::slotted(*){width:100%}.column-count-1.column-gap-2 ::slotted(*){width:100%}.column-count-1.column-gap-3 ::slotted(*){width:100%}.column-count-1.column-gap-4 ::slotted(*){width:100%}.column-count-1.column-gap-5 ::slotted(*){width:100%}.column-count-1.column-gap-6 ::slotted(*){width:100%}.column-count-2 ::slotted(*){width:100%}.column-count-2.column-gap-1 ::slotted(*){width:100%}.column-count-2.column-gap-2 ::slotted(*){width:100%}.column-count-2.column-gap-3 ::slotted(*){width:100%}.column-count-2.column-gap-4 ::slotted(*){width:100%}.column-count-2.column-gap-5 ::slotted(*){width:100%}.column-count-2.column-gap-6 ::slotted(*){width:100%}.column-count-3 ::slotted(*){width:100%}.column-count-3.column-gap-1 ::slotted(*){width:100%}.column-count-3.column-gap-2 ::slotted(*){width:100%}.column-count-3.column-gap-3 ::slotted(*){width:100%}.column-count-3.column-gap-4 ::slotted(*){width:100%}.column-count-3.column-gap-5 ::slotted(*){width:100%}.column-count-3.column-gap-6 ::slotted(*){width:100%}.column-count-4 ::slotted(*){width:100%}.column-count-4.column-gap-1 ::slotted(*){width:100%}.column-count-4.column-gap-2 ::slotted(*){width:100%}.column-count-4.column-gap-3 ::slotted(*){width:100%}.column-count-4.column-gap-4 ::slotted(*){width:100%}.column-count-4.column-gap-5 ::slotted(*){width:100%}.column-count-4.column-gap-6 ::slotted(*){width:100%}.column-count-5 ::slotted(*){width:100%}.column-count-5.column-gap-1 ::slotted(*){width:100%}.column-count-5.column-gap-2 ::slotted(*){width:100%}.column-count-5.column-gap-3 ::slotted(*){width:100%}.column-count-5.column-gap-4 ::slotted(*){width:100%}.column-count-5.column-gap-5 ::slotted(*){width:100%}.column-count-5.column-gap-6 ::slotted(*){width:100%}.column-count-6 ::slotted(*){width:100%}.column-count-6.column-gap-1 ::slotted(*){width:100%}.column-count-6.column-gap-2 ::slotted(*){width:100%}.column-count-6.column-gap-3 ::slotted(*){width:100%}.column-count-6.column-gap-4 ::slotted(*){width:100%}.column-count-6.column-gap-5 ::slotted(*){width:100%}.column-count-6.column-gap-6 ::slotted(*){width:100%}}";
+const BiggiveGridStyle0 = biggiveGridCss;
 
 const BiggiveGrid$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveGrid extends HTMLElement {
     constructor() {
@@ -15,7 +16,7 @@ const BiggiveGrid$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveGrid extends
     render() {
         return (h("div", { class: 'grid column-count-' + this.columnCount + ' space-below-' + this.spaceBelow + ' column-gap-' + this.columnGap + (this.spaceBetween ? ' space-between' : '') }, h("slot", null)));
     }
-    static get style() { return biggiveGridCss; }
+    static get style() { return BiggiveGridStyle0; }
 }, [1, "biggive-grid", {
         "spaceBelow": [2, "space-below"],
         "columnCount": [2, "column-count"],