@biggive/components 1.0.120 → 1.0.122

package/dist/collection/components/biggive-campaign-card-filter-grid/biggive-campaign-card-filter-grid.js

@@ -12,9 +12,9 @@ export class BiggiveCampaignCardFilterGrid {
       this.sortBy = event.target.value;
       this.doSearchAndFilterUpdate.emit(this.getSearchAndFilterObject());
     };
-    this.handleApplyFilterButtonClick = () => {
-      this.doSearchAndFilterUpdate.emit(this.getSearchAndFilterObject());
-    };
+    // private handleApplyFilterButtonClick = () => {
+    //   this.doSearchAndFilterUpdate.emit(this.getSearchAndFilterObject());
+    // };
     this.handleSearchButtonPressed = () => {
       this.doSearchAndFilterUpdate.emit(this.getSearchAndFilterObject());
     };
@@ -26,9 +26,6 @@ export class BiggiveCampaignCardFilterGrid {
         this.doSearchAndFilterUpdate.emit(this.getSearchAndFilterObject());
       }
     };
-    this.handleFilterButtonClick = () => {
-      this.el.shadowRoot.getElementById('filter-popup').open();
-    };
     this.spaceBelow = 0;
     this.intro = 'Find a charity or project';
     this.placeholderText = 'Search';
@@ -56,16 +53,11 @@ export class BiggiveCampaignCardFilterGrid {
     this.filterLocation = this.el.shadowRoot.getElementById('locations').selectedValue;
     this.filterFunding = this.el.shadowRoot.getElementById('funding').selectedValue;
   }
+  // private handleFilterButtonClick = () => {
+  //   this.el.shadowRoot.getElementById('filter-popup').open();
+  // };
   render() {
-    return (h("div", { class: 'container space-below-' + this.spaceBelow }, h("div", { class: "sleeve" }, h("div", { class: "search-wrap" }, h("h4", null, this.intro), h("div", { class: "field-wrap" }, h("div", { class: "input-wrap" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", class: "icon", viewBox: "0 0 512 512" }, h("path", { d: faMagnifyingGlass.icon[4].toString() })), h("input", { type: "text", value: this.searchText, class: "input-text", placeholder: this.placeholderText, onInput: this.handleSearchTextChanged, onKeyDown: this.handleEnterPressed })), h("biggive-button", { onClick: this.handleSearchButtonPressed, label: this.buttonText }))), h("div", { class: "sort-filter-wrap" }, h("div", { class: "sort-wrap" }, h("biggive-form-field-select", { placeholder: "Sort by", id: "sort-by", onDoSelectChange: this.handleSortByChanged }, h("biggive-form-field-select-option", { value: "amountRaised", label: "Most raised" }), h("biggive-form-field-select-option", { value: "matchFundsRemaining", label: "Match funds remaining" }))), h("div", { class: "filter-wrap" }, h("biggive-button", { class: "filter", onClick: this.handleFilterButtonClick, label: "Filters" }), h("biggive-popup", { id: "filter-popup" }, h("h4", { class: "space-above-0 space-below-3 colour-primary" }, "Filters"), h("biggive-form-field-select", { placeholder: "Category", id: "categories", "space-below": "2" }, this.categoryOptions.length === 0
-      ? undefined
-      : this.categoryOptions.map(option => h("biggive-form-field-select-option", { value: option, label: option }))), h("biggive-form-field-select", { placeholder: "Beneficiary", id: "beneficiaries", "space-below": "2" }, this.beneficiaryOptions.length === 0
-      ? undefined
-      : this.beneficiaryOptions.map(option => h("biggive-form-field-select-option", { value: option, label: option }))), h("biggive-form-field-select", { placeholder: "Location", id: "locations", "space-below": "2" }, this.locationOptions.length === 0
-      ? undefined
-      : this.locationOptions.map(option => h("biggive-form-field-select-option", { value: option, label: option }))), h("biggive-form-field-select", { placeholder: "Funding", id: "funding", "space-below": "2" }, this.fundingOptions.length === 0
-      ? undefined
-      : this.fundingOptions.map(option => h("biggive-form-field-select-option", { value: option, label: option }))), h("div", { class: "align-right" }, h("biggive-button", { label: "Apply filters", onClick: this.handleApplyFilterButtonClick }))))), h("div", { class: "campaign-grid" }, h("slot", { name: "campaign-grid" })))));
+    return (h("div", { class: 'container space-below-' + this.spaceBelow }, h("div", { class: "sleeve" }, h("div", { class: "search-wrap" }, h("h4", null, this.intro), h("div", { class: "field-wrap" }, h("div", { class: "input-wrap" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", class: "icon", viewBox: "0 0 512 512" }, h("path", { d: faMagnifyingGlass.icon[4].toString() })), h("input", { type: "text", value: this.searchText, class: "input-text", placeholder: this.placeholderText, onInput: this.handleSearchTextChanged, onKeyDown: this.handleEnterPressed })), h("biggive-button", { onClick: this.handleSearchButtonPressed, label: this.buttonText }))), h("div", { class: "sort-filter-wrap" }, h("div", { class: "sort-wrap" }, h("biggive-form-field-select", { placeholder: "Sort by", id: "sort-by", onDoSelectChange: this.handleSortByChanged }, h("biggive-form-field-select-option", { value: "amountRaised", label: "Most raised" }), h("biggive-form-field-select-option", { value: "matchFundsRemaining", label: "Match funds remaining" })))), h("div", { class: "campaign-grid" }, h("slot", { name: "campaign-grid" })))));
   }
   static get is() { return "biggive-campaign-card-filter-grid"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/biggive-campaign-highlights/biggive-campaign-highlights.js

@@ -4,7 +4,6 @@ export class BiggiveCampaignHighlights {
     this.spaceBelow = 0;
     this.banner = '';
     this.campaignTitle = null;
-    this.currencyCode = 'GBP';
     this.primaryFigureLabel = null;
     this.primaryFigureAmount = null;
     this.secondaryFigureLabel = null;
@@ -15,22 +14,8 @@ export class BiggiveCampaignHighlights {
     this.secondaryStatIcon = null;
     this.secondaryStatText = null;
   }
-  /**
-   * @returns Whole large currency units (e.g. pounds) formatted with symbol.
-   */
-  formatCurrency(currencyCode, amount) {
-    if (amount === null || isNaN(amount)) {
-      return '–';
-    }
-    return Intl.NumberFormat('en-GB', {
-      style: 'currency',
-      currency: currencyCode,
-      currencyDisplay: 'symbol',
-      maximumFractionDigits: 0,
-    }).format(amount);
-  }
   render() {
-    return (h("div", { class: 'container space-below-' + this.spaceBelow }, h("div", { class: "sleeve" }, this.campaignTitle != null ? (h("div", { class: "campaign-title" }, h("span", null, this.campaignTitle))) : null, this.banner.length > 0 ? (h("div", { class: "image-wrap banner", style: { 'background-image': 'url(' + this.banner + ')' } }, h("img", { src: this.banner, class: "banner" }))) : null, h("div", { class: "meta-wrap" }, h("div", { class: "meta-item" }, h("span", { class: "label" }, this.primaryFigureLabel), h("span", { class: "text" }, this.formatCurrency(this.currencyCode, this.primaryFigureAmount))), h("div", { class: "meta-item" }, h("span", { class: "label" }, this.secondaryFigureLabel), h("span", { class: "text" }, this.formatCurrency(this.currencyCode, this.secondaryFigureAmount)))), h("div", { class: "progress-bar-wrap" }, h("biggive-progress-bar", { counter: this.progressBarCounter, "colour-scheme": "primary" })), h("div", { class: "stat-wrap" }, this.primaryStatIcon != null ? (h("div", { class: "stat-item" }, h("biggive-misc-icon", { icon: this.primaryStatIcon, "background-colour": "white", "icon-colour": "tertiary" }), h("span", { class: "label" }, this.primaryStatText))) : null, this.secondaryStatIcon != null ? (h("div", { class: "stat-item" }, h("biggive-misc-icon", { icon: this.secondaryStatIcon, "background-colour": "white", "icon-colour": "tertiary" }), h("span", { class: "label" }, this.secondaryStatText))) : null))));
+    return (h("div", { class: 'container space-below-' + this.spaceBelow }, h("div", { class: "sleeve" }, this.campaignTitle != null ? (h("div", { class: "campaign-title" }, h("span", null, this.campaignTitle))) : null, this.banner.length > 0 ? (h("div", { class: "image-wrap banner", style: { 'background-image': 'url(' + this.banner + ')' } }, h("img", { src: this.banner, class: "banner" }))) : null, h("div", { class: "meta-wrap" }, h("div", { class: "meta-item" }, h("span", { class: "label" }, this.primaryFigureLabel), h("span", { class: "text" }, this.primaryFigureAmount)), h("div", { class: "meta-item" }, h("span", { class: "label" }, this.secondaryFigureLabel), h("span", { class: "text" }, this.secondaryFigureAmount))), h("div", { class: "progress-bar-wrap" }, h("biggive-progress-bar", { counter: this.progressBarCounter, "colour-scheme": "primary" })), h("div", { class: "stat-wrap" }, this.primaryStatIcon != null ? (h("div", { class: "stat-item" }, h("biggive-misc-icon", { icon: this.primaryStatIcon, "background-colour": "white", "icon-colour": "tertiary" }), h("span", { class: "label" }, this.primaryStatText))) : null, this.secondaryStatIcon != null ? (h("div", { class: "stat-item" }, h("biggive-misc-icon", { icon: this.secondaryStatIcon, "background-colour": "white", "icon-colour": "tertiary" }), h("span", { class: "label" }, this.secondaryStatText))) : null))));
   }
   static get is() { return "biggive-campaign-highlights"; }
   static get encapsulation() { return "shadow"; }
@@ -100,24 +85,6 @@ export class BiggiveCampaignHighlights {
         "reflect": false,
         "defaultValue": "null"
       },
-      "currencyCode": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "e.g. 'GBP'."
-        },
-        "attribute": "currency-code",
-        "reflect": false,
-        "defaultValue": "'GBP'"
-      },
       "primaryFigureLabel": {
         "type": "string",
         "mutable": false,
@@ -137,18 +104,18 @@ export class BiggiveCampaignHighlights {
         "defaultValue": "null"
       },
       "primaryFigureAmount": {
-        "type": "number",
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "number",
-          "resolved": "number",
+          "original": "string",
+          "resolved": "string",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Amount for the primary figure"
+          "text": "Amount for the primary figure, formatted with currency symbol"
         },
         "attribute": "primary-figure-amount",
         "reflect": false,
@@ -173,18 +140,18 @@ export class BiggiveCampaignHighlights {
         "defaultValue": "null"
       },
       "secondaryFigureAmount": {
-        "type": "number",
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "number",
-          "resolved": "number",
+          "original": "string",
+          "resolved": "string",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Amount for the secondary figure"
+          "text": "Amount for the secondary figure, formatted with currency symbol"
         },
         "attribute": "secondary-figure-amount",
         "reflect": false,

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

@@ -13,7 +13,7 @@ export class BiggiveFooter {
     this.appendMenu('nav-postscript');
   }
   render() {
-    return (h("footer", { class: "footer" }, h("div", { class: "row row-top" }, h("nav", { class: "nav nav-primary" }, h("h5", null, h("slot", { name: "nav-primary-title" }))), h("nav", { class: "nav nav-secondary" }, h("h5", null, h("slot", { name: "nav-secondary-title" }))), h("nav", { class: "nav nav-tertiary" }, h("h5", null, h("slot", { name: "nav-tertiary-title" }))), h("div", { class: "button-wrap" }, h("biggive-button", { "colour-scheme": "white", url: "https://www.thebiggive.org.uk/s/charities", label: "For charities" }), h("biggive-button", { "colour-scheme": "white", url: "https://www.thebiggive.org.uk/s/philanthropists", label: "For funders" }))), h("div", { class: "row row-bottom" }, h("div", { class: "postscript-wrap" }, h("img", { class: "fr-logo", src: getAssetPath('../assets/images/fundraising-regulator.png') }), h("nav", { class: "nav nav-postscript" })), h("div", { class: "social-icon-wrap" }, h("slot", { name: "social-icons" })), h("p", null, "\u00A9 2007 \u2013 2022 The Big Give Trust (1136547) | Company number 07273065 | Dragon Court, 27-29 Macklin Street, London WC2B 5LX, United Kingdom"))));
+    return (h("footer", { class: "footer" }, h("div", { class: "row row-top" }, h("nav", { class: "nav nav-primary" }, h("h5", null, h("slot", { name: "nav-primary-title" }))), h("nav", { class: "nav nav-secondary" }, h("h5", null, h("slot", { name: "nav-secondary-title" }))), h("nav", { class: "nav nav-tertiary" }, h("h5", null, h("slot", { name: "nav-tertiary-title" }))), h("div", { class: "button-wrap" }, h("biggive-button", { "colour-scheme": "white", url: "https://www.thebiggive.org.uk/s/charities", label: "For charities" }), h("biggive-button", { "colour-scheme": "white", url: "https://www.thebiggive.org.uk/s/philanthropists", label: "For funders" }))), h("div", { class: "row row-bottom" }, h("div", { class: "postscript-wrap" }, h("img", { class: "fr-logo", src: getAssetPath('../assets/images/fundraising-regulator.png'), alt: "Fundraising Regulator" }), h("nav", { class: "nav nav-postscript" })), h("div", { class: "social-icon-wrap" }, h("slot", { name: "social-icons" })), h("p", null, "\u00A9 2007 \u2013 2022 The Big Give Trust (1136547) | Company number 07273065 | Dragon Court, 27-29 Macklin Street, London WC2B 5LX, United Kingdom"))));
   }
   static get is() { return "biggive-footer"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/biggive-progress-bar/biggive-progress-bar.js

@@ -5,11 +5,8 @@ export class BiggiveProgressBar {
     this.colourScheme = 'primary';
     this.counter = 100;
   }
-  getPercentage() {
-    return Math.round(this.counter);
-  }
   render() {
-    return (h("div", { class: 'progress-bar progress-bar-' + this.colourScheme + ' space-below-' + this.spaceBelow }, h("div", { class: "slider" }, h("div", { class: "progress", style: { width: this.getPercentage() + '%' } })), h("div", { class: "counter" }, this.getPercentage(), "%")));
+    return (h("div", { class: 'progress-bar progress-bar-' + this.colourScheme + ' space-below-' + this.spaceBelow }, h("div", { class: "slider" }, h("div", { class: "progress", style: { width: `${this.counter}%` } })), h("div", { class: "counter" }, this.counter, "%")));
   }
   static get is() { return "biggive-progress-bar"; }
   static get encapsulation() { return "shadow"; }
@@ -73,7 +70,7 @@ export class BiggiveProgressBar {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Text"
+          "text": "Percentage to show + use for CSS width; round before input if desired"
         },
         "attribute": "counter",
         "reflect": false,

package/dist/collection/components/biggive-social-icon/biggive-social-icon.js

@@ -12,7 +12,7 @@ export class BiggiveSocialIcon {
     return icon;
   }
   render() {
-    return (h("div", { class: 'social-icon-item background-colour-' + this.backgroundColour }, h("a", { href: this.url, target: "_blank" }, h("svg", { width: this.getSocialIcon().icon[0], height: this.getSocialIcon().icon[1], xmlns: "http://www.w3.org/2000/svg", class: 'fill-' + this.iconColour, viewBox: '0 0 ' + this.getSocialIcon().icon[0] + ' ' + this.getSocialIcon().icon[1] }, h("path", { d: this.getSocialIcon().icon[4].toString() })))));
+    return (h("div", { class: 'social-icon-item background-colour-' + this.backgroundColour }, h("a", { href: this.url, "aria-label": `Big Give on ${this.service}`, target: "_blank" }, h("svg", { width: this.getSocialIcon().icon[0], height: this.getSocialIcon().icon[1], xmlns: "http://www.w3.org/2000/svg", class: 'fill-' + this.iconColour, viewBox: '0 0 ' + this.getSocialIcon().icon[0] + ' ' + this.getSocialIcon().icon[1] }, h("path", { d: this.getSocialIcon().icon[4].toString() })))));
   }
   static get is() { return "biggive-social-icon"; }
   static get originalStyleUrls() {
@@ -39,7 +39,7 @@ export class BiggiveSocialIcon {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "service"
+          "text": "Service name"
         },
         "attribute": "service",
         "reflect": false,
@@ -75,7 +75,7 @@ export class BiggiveSocialIcon {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Background colour"
+          "text": "Icon colour"
         },
         "attribute": "icon-colour",
         "reflect": false,

package/dist/components/biggive-campaign-card-filter-grid.js

@@ -1,9 +1,8 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { f as faMagnifyingGlass } from './index2.js';
-import { d as defineCustomElement$5 } from './biggive-button2.js';
-import { d as defineCustomElement$4 } from './biggive-form-field-select2.js';
-import { d as defineCustomElement$3 } from './biggive-form-field-select-option2.js';
-import { d as defineCustomElement$2 } from './biggive-popup2.js';
+import { d as defineCustomElement$4 } from './biggive-button2.js';
+import { d as defineCustomElement$3 } from './biggive-form-field-select2.js';
+import { d as defineCustomElement$2 } from './biggive-form-field-select-option2.js';
 
 const biggiveCampaignCardFilterGridCss = "body{background-color:#D7D7D7}h1,h3,h4,h5,h6{margin-bottom:0}h1,.heading-1{font-size:47px;line-height:60px;font-weight:bold}h2,.heading-2{font-size:38px;line-height:45px;font-weight:bold}h3,.heading-3{font-size:25px;line-height:32px;font-weight:bold}h4,.heading-4{font-size:20px;line-height:24px;font-weight:bold}h5,.heading-5{font-size:17px;line-height:24px;font-weight:bold}a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.colour-primary{color:#2C089B}.colour-secondary{color:#2AF135}.colour-tertiary{color:#FF7272}.colour-white{color:#FFFFFF}.colour-black{color:#000000}.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-white:hover,.text-colour-white{color:#FFFFFF}.text-colour-hover-black:hover,.text-colour-black{color:#000000}.fill-primary{fill:#2C089B}.fill-secondary{fill:#2AF135}.fill-tertiary{fill:#FF7272}.fill-white{fill:#FFFFFF}.fill-black{fill:#000000}.fill-red{fill:red}.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-white:hover,.background-colour-white{background-color:#FFFFFF}.background-colour-hover-black:hover,.background-colour-black{background-color:#000000}.input-wrap{display:flex;justify-content:space-between}.input-text{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;color:#000000;padding:5px 10px;box-sizing:border-box;width:100%}.input-text:focus{outline:0}.input-text:placeholder{color:#4A4A4A}.button{font-size:17px;line-height:24px;padding:10px 30px;border-radius:5px;border:1px solid #000000;background-color:#000000;filter:drop-shadow(0px 8px 20px rgba(0, 0, 0, 0.22));color:#FFFFFF;display:inline-block;text-decoration:none;text-align:center;transition:all ease-in-out 0.5s;cursor:pointer}.button:hover{background-color:#FFFFFF;color:#000000}.button.size-small{font-size:13px;line-height:17px;padding:5px 15px}.button.button.rounded-true{border-radius:27.5px}.button.button.rounded-true.size-small{border-radius:20px}.button-primary{color:#FFFFFF;background-color:#2C089B;border-color:#2C089B}.button-primary:hover{color:#2C089B;background-color:#FFFFFF}.button-secondary{color:#2C089B;background-color:#2AF135;border-color:#2AF135}.button-secondary:hover{background-color:#FFFFFF}.button-tertiary{color:#FFFFFF;background-color:#FF7272;border-color:#FF7272}.button-tertiary:hover{background-color:#FFFFFF}.button-white{color:#2C089B;background-color:#FFFFFF;border-color:#FFFFFF}.button-white:hover{color:#FFFFFF;background-color:#2C089B}.button-black{color:#FFFFFF;background-color:#000000;border-color:#000000}.button-black:hover{color:#000000;background-color:#FFFFFF}.button-clear-primary{color:#2C089B;background-color:transparent;text-decoration:underline;box-shadow:none;border:0;padding-left:0;padding-right:0}.button-clear-primary:hover{text-decoration:none;background-color:transparent}.button-clear-secondary{color:#2AF135;background-color:transparent;text-decoration:underline;box-shadow:none;border:0;padding-left:0;padding-right:0}.button-clear-secondary:hover{text-decoration:none;background-color:transparent}.button-clear-tertiary{color:#FF7272;background-color:transparent;text-decoration:underline;box-shadow:none;border:0;padding-left:0;padding-right:0}.button-clear-tertiary:hover{text-decoration:none;background-color:transparent}.button-clear-white{color:#FFFFFF;background-color:transparent;text-decoration:underline;box-shadow:none;border:0;padding-left:0;padding-right:0}.button-clear-white:hover{color:#FFFFFF;text-decoration:none;background-color:transparent}.button-rounded{border-radius:27.5px}.button-rounded.size-small{border-radius:20px}.progress-bar{display:flex}.progress-bar .slider{margin:auto 15px auto 0;position:relative;flex-grow:1}.progress-bar .slider:before{content:\"\";position:absolute;display:block;top:0;left:0;bottom:0;right:0;background-color:#E8E8E8;border-radius:4px}.progress-bar .slider .progress{position:relative;border-radius:4px;background-color:#000000;height:8px}.progress-bar .counter{font-weight:700;color:#000000;font-size:14px;line-height:18px}.progress-bar-primary .slider .progress{background-color:#2C089B}.progress-bar-primary .counter{color:#2C089B}.progress-bar-secondary .slider .progress{background-color:#2AF135}.progress-bar-secondary .counter{color:#2AF135}.video-wrap{position:relative;padding-bottom:56.25%}.video-wrap iframe,.video-wrap video{position:absolute;border:0;display:block;left:0;right:0;top:0;bottom:0;width:100%;height:100%}.image-wrap img{width:100%;height:auto}.align-left{text-align:left}.align-right{text-align:right}.align-center{text-align:center}.align-justify{text-align:justify}.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}.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}.horizontal-padding-1{padding-left:5px;padding-right:5px}.horizontal-padding-2{padding-left:10px;padding-right:10px}.horizontal-padding-3{padding-left:15px;padding-right:15px}.horizontal-padding-4{padding-left:30px;padding-right:30px}.horizontal-padding-5{padding-left:45px;padding-right:45px}.horizontal-padding-6{padding-left:60px;padding-right:60px}.vertical-padding-1{padding-top:5px;padding-bottom:5px}.vertical-padding-2{padding-top:10px;padding-bottom:10px}.vertical-padding-3{padding-top:15px;padding-bottom:15px}.vertical-padding-4{padding-top:30px;padding-bottom:30px}.vertical-padding-5{padding-top:45px;padding-bottom:45px}.vertical-padding-6{padding-top:60px;padding-bottom:60px}:host{display:content}.container{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;position:relative}.container .search-wrap{filter:drop-shadow(-1px 3px 12px rgba(0, 0, 0, 0.25));background-color:#FFFFFF;padding:15px 30px;margin-bottom:60px}.container .search-wrap h4{margin-bottom:15px}.container .search-wrap .field-wrap{display:flex;justify-content:space-between}.container .search-wrap .field-wrap .input-wrap{padding-bottom:5px;border-bottom:1px solid #000000;margin-right:30px;flex-grow:1}.container .search-wrap .field-wrap .input-wrap input{border:0}.container .search-wrap .field-wrap button{padding:5px 30px}.sort-filter-wrap{display:flex;align-items:flex-end;margin-bottom:30px;text-align:right}.sort-filter-wrap .sort-wrap{margin-left:auto}.sort-filter-wrap .filter-wrap{margin-left:15px}.sort-filter-wrap .filter-wrap .button.filter{padding-left:60px;padding-right:30px}.sort-filter-wrap .filter-wrap .button.filter .filter-icon{content:\"\";display:block;position:absolute;left:25px;top:17px;width:13px;height:13px}.sort-filter-wrap .filter-wrap .button.filter .filter-icon svg{width:100%;height:auto;vertical-align:top}.sort-filter-wrap .filter-wrap .button.filter .filter-icon svg:hover{fill:#2C089B}.icon{height:1rem;width:2rem;vertical-align:-0.125rem;margin:auto}.icon>path{fill:#2C089B}";
 
@@ -23,9 +22,9 @@ const BiggiveCampaignCardFilterGrid$1 = /*@__PURE__*/ proxyCustomElement(class e
       this.sortBy = event.target.value;
       this.doSearchAndFilterUpdate.emit(this.getSearchAndFilterObject());
     };
-    this.handleApplyFilterButtonClick = () => {
-      this.doSearchAndFilterUpdate.emit(this.getSearchAndFilterObject());
-    };
+    // private handleApplyFilterButtonClick = () => {
+    //   this.doSearchAndFilterUpdate.emit(this.getSearchAndFilterObject());
+    // };
     this.handleSearchButtonPressed = () => {
       this.doSearchAndFilterUpdate.emit(this.getSearchAndFilterObject());
     };
@@ -37,9 +36,6 @@ const BiggiveCampaignCardFilterGrid$1 = /*@__PURE__*/ proxyCustomElement(class e
         this.doSearchAndFilterUpdate.emit(this.getSearchAndFilterObject());
       }
     };
-    this.handleFilterButtonClick = () => {
-      this.el.shadowRoot.getElementById('filter-popup').open();
-    };
     this.spaceBelow = 0;
     this.intro = 'Find a charity or project';
     this.placeholderText = 'Search';
@@ -67,16 +63,11 @@ const BiggiveCampaignCardFilterGrid$1 = /*@__PURE__*/ proxyCustomElement(class e
     this.filterLocation = this.el.shadowRoot.getElementById('locations').selectedValue;
     this.filterFunding = this.el.shadowRoot.getElementById('funding').selectedValue;
   }
+  // private handleFilterButtonClick = () => {
+  //   this.el.shadowRoot.getElementById('filter-popup').open();
+  // };
   render() {
-    return (h("div", { class: 'container space-below-' + this.spaceBelow }, h("div", { class: "sleeve" }, h("div", { class: "search-wrap" }, h("h4", null, this.intro), h("div", { class: "field-wrap" }, h("div", { class: "input-wrap" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", class: "icon", viewBox: "0 0 512 512" }, h("path", { d: faMagnifyingGlass.icon[4].toString() })), h("input", { type: "text", value: this.searchText, class: "input-text", placeholder: this.placeholderText, onInput: this.handleSearchTextChanged, onKeyDown: this.handleEnterPressed })), h("biggive-button", { onClick: this.handleSearchButtonPressed, label: this.buttonText }))), h("div", { class: "sort-filter-wrap" }, h("div", { class: "sort-wrap" }, h("biggive-form-field-select", { placeholder: "Sort by", id: "sort-by", onDoSelectChange: this.handleSortByChanged }, h("biggive-form-field-select-option", { value: "amountRaised", label: "Most raised" }), h("biggive-form-field-select-option", { value: "matchFundsRemaining", label: "Match funds remaining" }))), h("div", { class: "filter-wrap" }, h("biggive-button", { class: "filter", onClick: this.handleFilterButtonClick, label: "Filters" }), h("biggive-popup", { id: "filter-popup" }, h("h4", { class: "space-above-0 space-below-3 colour-primary" }, "Filters"), h("biggive-form-field-select", { placeholder: "Category", id: "categories", "space-below": "2" }, this.categoryOptions.length === 0
-      ? undefined
-      : this.categoryOptions.map(option => h("biggive-form-field-select-option", { value: option, label: option }))), h("biggive-form-field-select", { placeholder: "Beneficiary", id: "beneficiaries", "space-below": "2" }, this.beneficiaryOptions.length === 0
-      ? undefined
-      : this.beneficiaryOptions.map(option => h("biggive-form-field-select-option", { value: option, label: option }))), h("biggive-form-field-select", { placeholder: "Location", id: "locations", "space-below": "2" }, this.locationOptions.length === 0
-      ? undefined
-      : this.locationOptions.map(option => h("biggive-form-field-select-option", { value: option, label: option }))), h("biggive-form-field-select", { placeholder: "Funding", id: "funding", "space-below": "2" }, this.fundingOptions.length === 0
-      ? undefined
-      : this.fundingOptions.map(option => h("biggive-form-field-select-option", { value: option, label: option }))), h("div", { class: "align-right" }, h("biggive-button", { label: "Apply filters", onClick: this.handleApplyFilterButtonClick }))))), h("div", { class: "campaign-grid" }, h("slot", { name: "campaign-grid" })))));
+    return (h("div", { class: 'container space-below-' + this.spaceBelow }, h("div", { class: "sleeve" }, h("div", { class: "search-wrap" }, h("h4", null, this.intro), h("div", { class: "field-wrap" }, h("div", { class: "input-wrap" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", class: "icon", viewBox: "0 0 512 512" }, h("path", { d: faMagnifyingGlass.icon[4].toString() })), h("input", { type: "text", value: this.searchText, class: "input-text", placeholder: this.placeholderText, onInput: this.handleSearchTextChanged, onKeyDown: this.handleEnterPressed })), h("biggive-button", { onClick: this.handleSearchButtonPressed, label: this.buttonText }))), h("div", { class: "sort-filter-wrap" }, h("div", { class: "sort-wrap" }, h("biggive-form-field-select", { placeholder: "Sort by", id: "sort-by", onDoSelectChange: this.handleSortByChanged }, h("biggive-form-field-select-option", { value: "amountRaised", label: "Most raised" }), h("biggive-form-field-select-option", { value: "matchFundsRemaining", label: "Match funds remaining" })))), h("div", { class: "campaign-grid" }, h("slot", { name: "campaign-grid" })))));
   }
   get el() { return this; }
   static get style() { return biggiveCampaignCardFilterGridCss; }
@@ -94,7 +85,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["biggive-campaign-card-filter-grid", "biggive-button", "biggive-form-field-select", "biggive-form-field-select-option", "biggive-popup"];
+  const components = ["biggive-campaign-card-filter-grid", "biggive-button", "biggive-form-field-select", "biggive-form-field-select-option"];
   components.forEach(tagName => { switch (tagName) {
     case "biggive-campaign-card-filter-grid":
       if (!customElements.get(tagName)) {
@@ -102,21 +93,16 @@ function defineCustomElement$1() {
       }
       break;
     case "biggive-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$5();
-      }
-      break;
-    case "biggive-form-field-select":
       if (!customElements.get(tagName)) {
         defineCustomElement$4();
       }
       break;
-    case "biggive-form-field-select-option":
+    case "biggive-form-field-select":
       if (!customElements.get(tagName)) {
         defineCustomElement$3();
       }
       break;
-    case "biggive-popup":
+    case "biggive-form-field-select-option":
       if (!customElements.get(tagName)) {
         defineCustomElement$2();
       }

package/dist/components/biggive-campaign-card.js

@@ -14,7 +14,6 @@ const BiggiveCampaignCard$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     this.banner = null;
     this.campaignTitle = null;
     this.organisationName = null;
-    this.currencyCode = undefined;
     this.primaryFigureLabel = null;
     this.primaryFigureAmount = null;
     this.secondaryFigureLabel = null;
@@ -27,23 +26,8 @@ const BiggiveCampaignCard$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     this.moreInfoButtonUrl = null;
     this.moreInfoButtonColourScheme = 'clear-primary';
   }
-  /**
-   * @returns Whole large currency units (e.g. pounds) formatted with symbol.
-   */
-  formatCurrency(currencyCode, amount) {
-    if (amount === null || isNaN(amount)) {
-      return '–';
-    }
-    return Intl.NumberFormat('en-GB', {
-      style: 'currency',
-      currency: currencyCode,
-      currencyDisplay: 'symbol',
-      minimumFractionDigits: 0,
-      maximumFractionDigits: 0,
-    }).format(amount);
-  }
   render() {
-    return (h("div", { class: 'container space-below-' + this.spaceBelow.toString() }, h("div", { class: "sleeve" }, this.campaignType !== null ? (h("div", { class: "campaign-type" }, h("span", null, this.campaignType))) : null, this.banner !== null ? (h("div", { class: "image-wrap banner", style: { 'background-image': 'url(' + this.banner + ')' } }, h("img", { src: this.banner, class: "banner" }))) : (h("div", { class: "image-wrap banner" })), h("div", { class: "title-wrap" }, h("h3", null, this.campaignTitle), h("div", { class: "organisation-name" }, "By ", this.organisationName)), h("div", { class: "meta-wrap" }, h("div", { class: "meta-item" }, h("span", { class: "label" }, this.primaryFigureLabel), h("span", { class: "text" }, this.formatCurrency(this.currencyCode, this.primaryFigureAmount))), h("div", { class: "meta-item" }, h("span", { class: "label" }, this.secondaryFigureLabel), h("span", { class: "text" }, this.formatCurrency(this.currencyCode, this.secondaryFigureAmount)))), h("div", { class: "progress-bar-wrap" }, h("biggive-progress-bar", { counter: this.progressBarCounter, "colour-scheme": "primary" })), h("div", { class: "button-wrap" }, h("biggive-button", { "full-width": "true", "colour-scheme": this.donateButtonColourScheme, url: this.donateButtonUrl, label: this.donateButtonLabel }), h("biggive-button", { "full-width": "true", "colour-scheme": this.moreInfoButtonColourScheme, url: this.moreInfoButtonUrl, label: this.moreInfoButtonLabel })))));
+    return (h("div", { class: 'container space-below-' + this.spaceBelow.toString() }, h("div", { class: "sleeve" }, this.campaignType !== null ? (h("div", { class: "campaign-type" }, h("span", null, this.campaignType))) : null, this.banner !== null ? (h("div", { class: "image-wrap banner", style: { 'background-image': 'url(' + this.banner + ')' } }, h("img", { src: this.banner, class: "banner" }))) : (h("div", { class: "image-wrap banner" })), h("div", { class: "title-wrap" }, h("h3", null, this.campaignTitle), h("div", { class: "organisation-name" }, "By ", this.organisationName)), h("div", { class: "meta-wrap" }, h("div", { class: "meta-item" }, h("span", { class: "label" }, this.primaryFigureLabel), h("span", { class: "text" }, this.primaryFigureAmount)), h("div", { class: "meta-item" }, h("span", { class: "label" }, this.secondaryFigureLabel), h("span", { class: "text" }, this.secondaryFigureAmount))), h("div", { class: "progress-bar-wrap" }, h("biggive-progress-bar", { counter: this.progressBarCounter, "colour-scheme": "primary" })), h("div", { class: "button-wrap" }, h("biggive-button", { "full-width": "true", "colour-scheme": this.donateButtonColourScheme, url: this.donateButtonUrl, label: this.donateButtonLabel }), h("biggive-button", { "full-width": "true", "colour-scheme": this.moreInfoButtonColourScheme, url: this.moreInfoButtonUrl, label: this.moreInfoButtonLabel })))));
   }
   static get style() { return biggiveCampaignCardCss; }
 }, [1, "biggive-campaign-card", {
@@ -52,11 +36,10 @@ const BiggiveCampaignCard$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     "banner": [1],
     "campaignTitle": [1, "campaign-title"],
     "organisationName": [1, "organisation-name"],
-    "currencyCode": [1, "currency-code"],
     "primaryFigureLabel": [1, "primary-figure-label"],
-    "primaryFigureAmount": [2, "primary-figure-amount"],
+    "primaryFigureAmount": [1, "primary-figure-amount"],
     "secondaryFigureLabel": [1, "secondary-figure-label"],
-    "secondaryFigureAmount": [2, "secondary-figure-amount"],
+    "secondaryFigureAmount": [1, "secondary-figure-amount"],
     "progressBarCounter": [2, "progress-bar-counter"],
     "donateButtonLabel": [1, "donate-button-label"],
     "donateButtonUrl": [1, "donate-button-url"],

package/dist/components/biggive-campaign-highlights.js

@@ -12,7 +12,6 @@ const BiggiveCampaignHighlights$1 = /*@__PURE__*/ proxyCustomElement(class exten
     this.spaceBelow = 0;
     this.banner = '';
     this.campaignTitle = null;
-    this.currencyCode = 'GBP';
     this.primaryFigureLabel = null;
     this.primaryFigureAmount = null;
     this.secondaryFigureLabel = null;
@@ -23,33 +22,18 @@ const BiggiveCampaignHighlights$1 = /*@__PURE__*/ proxyCustomElement(class exten
     this.secondaryStatIcon = null;
     this.secondaryStatText = null;
   }
-  /**
-   * @returns Whole large currency units (e.g. pounds) formatted with symbol.
-   */
-  formatCurrency(currencyCode, amount) {
-    if (amount === null || isNaN(amount)) {
-      return '–';
-    }
-    return Intl.NumberFormat('en-GB', {
-      style: 'currency',
-      currency: currencyCode,
-      currencyDisplay: 'symbol',
-      maximumFractionDigits: 0,
-    }).format(amount);
-  }
   render() {
-    return (h("div", { class: 'container space-below-' + this.spaceBelow }, h("div", { class: "sleeve" }, this.campaignTitle != null ? (h("div", { class: "campaign-title" }, h("span", null, this.campaignTitle))) : null, this.banner.length > 0 ? (h("div", { class: "image-wrap banner", style: { 'background-image': 'url(' + this.banner + ')' } }, h("img", { src: this.banner, class: "banner" }))) : null, h("div", { class: "meta-wrap" }, h("div", { class: "meta-item" }, h("span", { class: "label" }, this.primaryFigureLabel), h("span", { class: "text" }, this.formatCurrency(this.currencyCode, this.primaryFigureAmount))), h("div", { class: "meta-item" }, h("span", { class: "label" }, this.secondaryFigureLabel), h("span", { class: "text" }, this.formatCurrency(this.currencyCode, this.secondaryFigureAmount)))), h("div", { class: "progress-bar-wrap" }, h("biggive-progress-bar", { counter: this.progressBarCounter, "colour-scheme": "primary" })), h("div", { class: "stat-wrap" }, this.primaryStatIcon != null ? (h("div", { class: "stat-item" }, h("biggive-misc-icon", { icon: this.primaryStatIcon, "background-colour": "white", "icon-colour": "tertiary" }), h("span", { class: "label" }, this.primaryStatText))) : null, this.secondaryStatIcon != null ? (h("div", { class: "stat-item" }, h("biggive-misc-icon", { icon: this.secondaryStatIcon, "background-colour": "white", "icon-colour": "tertiary" }), h("span", { class: "label" }, this.secondaryStatText))) : null))));
+    return (h("div", { class: 'container space-below-' + this.spaceBelow }, h("div", { class: "sleeve" }, this.campaignTitle != null ? (h("div", { class: "campaign-title" }, h("span", null, this.campaignTitle))) : null, this.banner.length > 0 ? (h("div", { class: "image-wrap banner", style: { 'background-image': 'url(' + this.banner + ')' } }, h("img", { src: this.banner, class: "banner" }))) : null, h("div", { class: "meta-wrap" }, h("div", { class: "meta-item" }, h("span", { class: "label" }, this.primaryFigureLabel), h("span", { class: "text" }, this.primaryFigureAmount)), h("div", { class: "meta-item" }, h("span", { class: "label" }, this.secondaryFigureLabel), h("span", { class: "text" }, this.secondaryFigureAmount))), h("div", { class: "progress-bar-wrap" }, h("biggive-progress-bar", { counter: this.progressBarCounter, "colour-scheme": "primary" })), h("div", { class: "stat-wrap" }, this.primaryStatIcon != null ? (h("div", { class: "stat-item" }, h("biggive-misc-icon", { icon: this.primaryStatIcon, "background-colour": "white", "icon-colour": "tertiary" }), h("span", { class: "label" }, this.primaryStatText))) : null, this.secondaryStatIcon != null ? (h("div", { class: "stat-item" }, h("biggive-misc-icon", { icon: this.secondaryStatIcon, "background-colour": "white", "icon-colour": "tertiary" }), h("span", { class: "label" }, this.secondaryStatText))) : null))));
   }
   static get style() { return biggiveCampaignHighlightsCss; }
 }, [1, "biggive-campaign-highlights", {
     "spaceBelow": [2, "space-below"],
     "banner": [1],
     "campaignTitle": [1, "campaign-title"],
-    "currencyCode": [1, "currency-code"],
     "primaryFigureLabel": [1, "primary-figure-label"],
-    "primaryFigureAmount": [2, "primary-figure-amount"],
+    "primaryFigureAmount": [1, "primary-figure-amount"],
     "secondaryFigureLabel": [1, "secondary-figure-label"],
-    "secondaryFigureAmount": [2, "secondary-figure-amount"],
+    "secondaryFigureAmount": [1, "secondary-figure-amount"],
     "progressBarCounter": [2, "progress-bar-counter"],
     "primaryStatIcon": [1, "primary-stat-icon"],
     "primaryStatText": [1, "primary-stat-text"],

package/dist/components/biggive-footer.js

@@ -22,7 +22,7 @@ const BiggiveFooter$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     this.appendMenu('nav-postscript');
   }
   render() {
-    return (h("footer", { class: "footer" }, h("div", { class: "row row-top" }, h("nav", { class: "nav nav-primary" }, h("h5", null, h("slot", { name: "nav-primary-title" }))), h("nav", { class: "nav nav-secondary" }, h("h5", null, h("slot", { name: "nav-secondary-title" }))), h("nav", { class: "nav nav-tertiary" }, h("h5", null, h("slot", { name: "nav-tertiary-title" }))), h("div", { class: "button-wrap" }, h("biggive-button", { "colour-scheme": "white", url: "https://www.thebiggive.org.uk/s/charities", label: "For charities" }), h("biggive-button", { "colour-scheme": "white", url: "https://www.thebiggive.org.uk/s/philanthropists", label: "For funders" }))), h("div", { class: "row row-bottom" }, h("div", { class: "postscript-wrap" }, h("img", { class: "fr-logo", src: getAssetPath('../assets/images/fundraising-regulator.png') }), h("nav", { class: "nav nav-postscript" })), h("div", { class: "social-icon-wrap" }, h("slot", { name: "social-icons" })), h("p", null, "\u00A9 2007 \u2013 2022 The Big Give Trust (1136547) | Company number 07273065 | Dragon Court, 27-29 Macklin Street, London WC2B 5LX, United Kingdom"))));
+    return (h("footer", { class: "footer" }, h("div", { class: "row row-top" }, h("nav", { class: "nav nav-primary" }, h("h5", null, h("slot", { name: "nav-primary-title" }))), h("nav", { class: "nav nav-secondary" }, h("h5", null, h("slot", { name: "nav-secondary-title" }))), h("nav", { class: "nav nav-tertiary" }, h("h5", null, h("slot", { name: "nav-tertiary-title" }))), h("div", { class: "button-wrap" }, h("biggive-button", { "colour-scheme": "white", url: "https://www.thebiggive.org.uk/s/charities", label: "For charities" }), h("biggive-button", { "colour-scheme": "white", url: "https://www.thebiggive.org.uk/s/philanthropists", label: "For funders" }))), h("div", { class: "row row-bottom" }, h("div", { class: "postscript-wrap" }, h("img", { class: "fr-logo", src: getAssetPath('../assets/images/fundraising-regulator.png'), alt: "Fundraising Regulator" }), h("nav", { class: "nav nav-postscript" })), h("div", { class: "social-icon-wrap" }, h("slot", { name: "social-icons" })), h("p", null, "\u00A9 2007 \u2013 2022 The Big Give Trust (1136547) | Company number 07273065 | Dragon Court, 27-29 Macklin Street, London WC2B 5LX, United Kingdom"))));
   }
   get host() { return this; }
   static get style() { return biggiveFooterCss; }

package/dist/components/biggive-popup.js

@@ -1,4 +1,42 @@
-import { B as BiggivePopup$1, d as defineCustomElement$1 } from './biggive-popup2.js';
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const biggivePopupCss = "body{background-color:#D7D7D7}h1,h3,h4,h5,h6{margin-bottom:0}h1,.heading-1{font-size:47px;line-height:60px;font-weight:bold}h2,.heading-2{font-size:38px;line-height:45px;font-weight:bold}h3,.heading-3{font-size:25px;line-height:32px;font-weight:bold}h4,.heading-4{font-size:20px;line-height:24px;font-weight:bold}h5,.heading-5{font-size:17px;line-height:24px;font-weight:bold}a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.colour-primary{color:#2C089B}.colour-secondary{color:#2AF135}.colour-tertiary{color:#FF7272}.colour-white{color:#FFFFFF}.colour-black{color:#000000}.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-white:hover,.text-colour-white{color:#FFFFFF}.text-colour-hover-black:hover,.text-colour-black{color:#000000}.fill-primary{fill:#2C089B}.fill-secondary{fill:#2AF135}.fill-tertiary{fill:#FF7272}.fill-white{fill:#FFFFFF}.fill-black{fill:#000000}.fill-red{fill:red}.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-white:hover,.background-colour-white{background-color:#FFFFFF}.background-colour-hover-black:hover,.background-colour-black{background-color:#000000}.input-wrap{display:flex;justify-content:space-between}.input-text{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;color:#000000;padding:5px 10px;box-sizing:border-box;width:100%}.input-text:focus{outline:0}.input-text:placeholder{color:#4A4A4A}.button{font-size:17px;line-height:24px;padding:10px 30px;border-radius:5px;border:1px solid #000000;background-color:#000000;filter:drop-shadow(0px 8px 20px rgba(0, 0, 0, 0.22));color:#FFFFFF;display:inline-block;text-decoration:none;text-align:center;transition:all ease-in-out 0.5s;cursor:pointer}.button:hover{background-color:#FFFFFF;color:#000000}.button.size-small{font-size:13px;line-height:17px;padding:5px 15px}.button.button.rounded-true{border-radius:27.5px}.button.button.rounded-true.size-small{border-radius:20px}.button-primary{color:#FFFFFF;background-color:#2C089B;border-color:#2C089B}.button-primary:hover{color:#2C089B;background-color:#FFFFFF}.button-secondary{color:#2C089B;background-color:#2AF135;border-color:#2AF135}.button-secondary:hover{background-color:#FFFFFF}.button-tertiary{color:#FFFFFF;background-color:#FF7272;border-color:#FF7272}.button-tertiary:hover{background-color:#FFFFFF}.button-white{color:#2C089B;background-color:#FFFFFF;border-color:#FFFFFF}.button-white:hover{color:#FFFFFF;background-color:#2C089B}.button-black{color:#FFFFFF;background-color:#000000;border-color:#000000}.button-black:hover{color:#000000;background-color:#FFFFFF}.button-clear-primary{color:#2C089B;background-color:transparent;text-decoration:underline;box-shadow:none;border:0;padding-left:0;padding-right:0}.button-clear-primary:hover{text-decoration:none;background-color:transparent}.button-clear-secondary{color:#2AF135;background-color:transparent;text-decoration:underline;box-shadow:none;border:0;padding-left:0;padding-right:0}.button-clear-secondary:hover{text-decoration:none;background-color:transparent}.button-clear-tertiary{color:#FF7272;background-color:transparent;text-decoration:underline;box-shadow:none;border:0;padding-left:0;padding-right:0}.button-clear-tertiary:hover{text-decoration:none;background-color:transparent}.button-clear-white{color:#FFFFFF;background-color:transparent;text-decoration:underline;box-shadow:none;border:0;padding-left:0;padding-right:0}.button-clear-white:hover{color:#FFFFFF;text-decoration:none;background-color:transparent}.button-rounded{border-radius:27.5px}.button-rounded.size-small{border-radius:20px}.progress-bar{display:flex}.progress-bar .slider{margin:auto 15px auto 0;position:relative;flex-grow:1}.progress-bar .slider:before{content:\"\";position:absolute;display:block;top:0;left:0;bottom:0;right:0;background-color:#E8E8E8;border-radius:4px}.progress-bar .slider .progress{position:relative;border-radius:4px;background-color:#000000;height:8px}.progress-bar .counter{font-weight:700;color:#000000;font-size:14px;line-height:18px}.progress-bar-primary .slider .progress{background-color:#2C089B}.progress-bar-primary .counter{color:#2C089B}.progress-bar-secondary .slider .progress{background-color:#2AF135}.progress-bar-secondary .counter{color:#2AF135}.video-wrap{position:relative;padding-bottom:56.25%}.video-wrap iframe,.video-wrap video{position:absolute;border:0;display:block;left:0;right:0;top:0;bottom:0;width:100%;height:100%}.image-wrap img{width:100%;height:auto}.align-left{text-align:left}.align-right{text-align:right}.align-center{text-align:center}.align-justify{text-align:justify}.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}.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}.horizontal-padding-1{padding-left:5px;padding-right:5px}.horizontal-padding-2{padding-left:10px;padding-right:10px}.horizontal-padding-3{padding-left:15px;padding-right:15px}.horizontal-padding-4{padding-left:30px;padding-right:30px}.horizontal-padding-5{padding-left:45px;padding-right:45px}.horizontal-padding-6{padding-left:60px;padding-right:60px}.vertical-padding-1{padding-top:5px;padding-bottom:5px}.vertical-padding-2{padding-top:10px;padding-bottom:10px}.vertical-padding-3{padding-top:15px;padding-bottom:15px}.vertical-padding-4{padding-top:30px;padding-bottom:30px}.vertical-padding-5{padding-top:45px;padding-bottom:45px}.vertical-padding-6{padding-top:60px;padding-bottom:60px}:host{display:contents}.popup{position:fixed;display:none;z-index:100;top:0;bottom:0;left:0;right:0;padding:15px;background-color:rgba(0, 0, 0, 0.75);transition:all 0.5s ease-in-out}.popup .sleeve{position:relative;max-width:600px;padding:30px;box-sizing:border-box;position:relative;margin-left:auto;margin-right:auto;top:50%;transform:translateY(-50%);background-color:#FFFFFF;text-align:left}.popup .header .close{width:25px;height:25px;position:absolute;top:10px;right:10px;background-color:#2C089B;border-radius:50%;cursor:pointer}.popup[data-visible=true]{display:block}";
+
+const BiggivePopup$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.close = (event) => {
+      if (event.target.classList.contains('popup') || event.target.classList.contains('close')) {
+        this.el.shadowRoot.querySelector('.popup').setAttribute('data-visible', 'false');
+      }
+    };
+  }
+  async open() {
+    this.el.shadowRoot.querySelector('.popup').setAttribute('data-visible', 'true');
+  }
+  render() {
+    return (h("div", { class: "popup", onClick: this.close }, h("div", { class: "sleeve" }, h("div", { class: "header" }, h("div", { class: "close", onClick: this.close })), h("div", { class: "content" }, h("slot", null)))));
+  }
+  get el() { return this; }
+  static get style() { return biggivePopupCss; }
+}, [1, "biggive-popup", {
+    "open": [64]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["biggive-popup"];
+  components.forEach(tagName => { switch (tagName) {
+    case "biggive-popup":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, BiggivePopup$1);
+      }
+      break;
+  } });
+}
 
 const BiggivePopup = BiggivePopup$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/biggive-progress-bar2.js

@@ -11,11 +11,8 @@ const BiggiveProgressBar = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
     this.colourScheme = 'primary';
     this.counter = 100;
   }
-  getPercentage() {
-    return Math.round(this.counter);
-  }
   render() {
-    return (h("div", { class: 'progress-bar progress-bar-' + this.colourScheme + ' space-below-' + this.spaceBelow }, h("div", { class: "slider" }, h("div", { class: "progress", style: { width: this.getPercentage() + '%' } })), h("div", { class: "counter" }, this.getPercentage(), "%")));
+    return (h("div", { class: 'progress-bar progress-bar-' + this.colourScheme + ' space-below-' + this.spaceBelow }, h("div", { class: "slider" }, h("div", { class: "progress", style: { width: `${this.counter}%` } })), h("div", { class: "counter" }, this.counter, "%")));
   }
   static get style() { return biggiveProgressBarCss; }
 }, [1, "biggive-progress-bar", {

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

@@ -17,7 +17,7 @@ const BiggiveSocialIcon$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
     return icon;
   }
   render() {
-    return (h("div", { class: 'social-icon-item background-colour-' + this.backgroundColour }, h("a", { href: this.url, target: "_blank" }, h("svg", { width: this.getSocialIcon().icon[0], height: this.getSocialIcon().icon[1], xmlns: "http://www.w3.org/2000/svg", class: 'fill-' + this.iconColour, viewBox: '0 0 ' + this.getSocialIcon().icon[0] + ' ' + this.getSocialIcon().icon[1] }, h("path", { d: this.getSocialIcon().icon[4].toString() })))));
+    return (h("div", { class: 'social-icon-item background-colour-' + this.backgroundColour }, h("a", { href: this.url, "aria-label": `Big Give on ${this.service}`, target: "_blank" }, h("svg", { width: this.getSocialIcon().icon[0], height: this.getSocialIcon().icon[1], xmlns: "http://www.w3.org/2000/svg", class: 'fill-' + this.iconColour, viewBox: '0 0 ' + this.getSocialIcon().icon[0] + ' ' + this.getSocialIcon().icon[1] }, h("path", { d: this.getSocialIcon().icon[4].toString() })))));
   }
   static get style() { return biggiveSocialIconCss; }
 }, [0, "biggive-social-icon", {