@biggive/components 0.0.4 → 0.0.7

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

@@ -6,62 +6,61 @@ import { CampaignGroupsService } from '../../util/campaign-groups';
 export class BiggiveCampaignCard {
   constructor() {
     /**
-     * @param {string} banner Full URL of a banner image.
+     * Full URL of a banner image.
      */
     this.banner = '';
     /**
-     * @param {string} number (Ceiling of) whole number of days until campaign end.
+     * (Ceiling of) whole number of days until campaign end.
      */
     this.daysRemaining = null;
     /**
-     * @param {number} totalFundsRaised Target for the campaign including matching but excluding any
-     *                                        tax relief, in major unit of currency e.g. pounds GBP.
+     * Target for the campaign including matching but excluding any
+     * tax relief, in major unit of currency e.g. pounds GBP.
      */
     this.target = null;
     /**
-     * @param {string} organisationName Display name of the charity or non-profit.
+     * Display name of the charity or non-profit.
      */
     this.organisationName = null;
     /**
-     * @param {string} organisationName Display name of the charity's specific time-bound fundraising campaign.
+     * Display name of the charity's specific time-bound fundraising campaign.
      */
     this.campaignTitle = null;
     /**
-     * @param {string} campaignType e.g. "Match Funded".
+     * e.g. "Match Funded".
      */
     this.campaignType = null;
     /**
-     * @param {string} beneficiaries Pipe (|) -separated list of full category labels.
+     * Array of full beneficiary labels.
      */
-    this.beneficiaries = '';
+    this.beneficiaries = [];
     /**
-     * @param {string} categories Pipe (|) -separated list of full category labels.
+     * Array of full category labels.
      */
-    this.categories = '';
+    this.categories = [];
     /**
-     * @param {number} totalFundsRaised Match funds not yet used or reserved, in major unit of currency
-     *                                        e.g. pounds GBP.
+     * Match funds not yet used or reserved, in major unit of currency e.g. pounds GBP.
      */
     this.matchFundsRemaining = null;
     /**
-     * @param {number} totalFundsRaised Total the campaign has raised so far including matching but excluding any
-     *                                  tax relief, in major unit of currency e.g. pounds GBP.
+     * Total the campaign has raised so far including matching but excluding any
+     * tax relief, in major unit of currency e.g. pounds GBP.
      */
     this.totalFundsRaised = null;
     /**
-     * @param {string} callToActionUrl Full URL of a call to action.
+     * Full URL of a call to action.
      */
     this.callToActionUrl = null;
     /**
-     * @param {string} callToActionLabel Text for the link to `callToActionUrl`.
+     * Text for the link to `callToActionUrl`.
      */
     this.callToActionLabel = null;
   }
   getBeneficiaryIcons() {
-    return this.beneficiaries.length > 0 ? this.beneficiaries.split('|').map(beneficiary => CampaignGroupsService.getBeneficiaryIcon(beneficiary)) : [];
+    return this.beneficiaries.map(beneficiary => CampaignGroupsService.getBeneficiaryIcon(beneficiary));
   }
   getCategoryIcons() {
-    return this.categories.length > 0 ? this.categories.split('|').map(category => CampaignGroupsService.getCategoryIcon(category)) : [];
+    return this.categories.map(category => CampaignGroupsService.getCategoryIcon(category));
   }
   formatCurrency(num) {
     if (!isNaN(num)) {
@@ -123,7 +122,7 @@ export class BiggiveCampaignCard {
   static get is() { return "biggive-campaign-card"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["biggive-campaign-card.css"]
+    "$": ["biggive-campaign-card.scss"]
   }; }
   static get styleUrls() { return {
     "$": ["biggive-campaign-card.css"]
@@ -140,11 +139,8 @@ export class BiggiveCampaignCard {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [{
-            "name": "param",
-            "text": "banner Full URL of a banner image."
-          }],
-        "text": ""
+        "tags": [],
+        "text": "Full URL of a banner image."
       },
       "attribute": "banner",
       "reflect": false,
@@ -161,11 +157,8 @@ export class BiggiveCampaignCard {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [{
-            "name": "param",
-            "text": "number (Ceiling of) whole number of days until campaign end."
-          }],
-        "text": ""
+        "tags": [],
+        "text": "(Ceiling of) whole number of days until campaign end."
       },
       "attribute": "days-remaining",
       "reflect": false,
@@ -182,11 +175,8 @@ export class BiggiveCampaignCard {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [{
-            "name": "param",
-            "text": "totalFundsRaised Target for the campaign including matching but excluding any\n      tax relief, in major unit of currency e.g. pounds GBP."
-          }],
-        "text": ""
+        "tags": [],
+        "text": "Target for the campaign including matching but excluding any\ntax relief, in major unit of currency e.g. pounds GBP."
       },
       "attribute": "target",
       "reflect": false,
@@ -203,11 +193,8 @@ export class BiggiveCampaignCard {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [{
-            "name": "param",
-            "text": "organisationName Display name of the charity or non-profit."
-          }],
-        "text": ""
+        "tags": [],
+        "text": "Display name of the charity or non-profit."
       },
       "attribute": "organisation-name",
       "reflect": false,
@@ -224,11 +211,8 @@ export class BiggiveCampaignCard {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [{
-            "name": "param",
-            "text": "organisationName Display name of the charity's specific time-bound fundraising campaign."
-          }],
-        "text": ""
+        "tags": [],
+        "text": "Display name of the charity's specific time-bound fundraising campaign."
       },
       "attribute": "campaign-title",
       "reflect": false,
@@ -245,57 +229,44 @@ export class BiggiveCampaignCard {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [{
-            "name": "param",
-            "text": "campaignType e.g. \"Match Funded\"."
-          }],
-        "text": ""
+        "tags": [],
+        "text": "e.g. \"Match Funded\"."
       },
       "attribute": "campaign-type",
       "reflect": false,
       "defaultValue": "null"
     },
     "beneficiaries": {
-      "type": "string",
+      "type": "unknown",
       "mutable": false,
       "complexType": {
-        "original": "string",
-        "resolved": "string",
+        "original": "string[]",
+        "resolved": "string[]",
         "references": {}
       },
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [{
-            "name": "param",
-            "text": "beneficiaries Pipe (|) -separated list of full category labels."
-          }],
-        "text": ""
+        "tags": [],
+        "text": "Array of full beneficiary labels."
       },
-      "attribute": "beneficiaries",
-      "reflect": false,
-      "defaultValue": "''"
+      "defaultValue": "[]"
     },
     "categories": {
-      "type": "string",
+      "type": "unknown",
       "mutable": false,
       "complexType": {
-        "original": "string",
-        "resolved": "string",
+        "original": "string[]",
+        "resolved": "string[]",
         "references": {}
       },
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [{
-            "name": "param",
-            "text": "categories Pipe (|) -separated list of full category labels."
-          }],
-        "text": ""
+        "tags": [],
+        "text": "Array of full category labels."
       },
-      "attribute": "categories",
-      "reflect": false,
-      "defaultValue": "''"
+      "defaultValue": "[]"
     },
     "matchFundsRemaining": {
       "type": "number",
@@ -308,11 +279,8 @@ export class BiggiveCampaignCard {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [{
-            "name": "param",
-            "text": "totalFundsRaised Match funds not yet used or reserved, in major unit of currency\n      e.g. pounds GBP."
-          }],
-        "text": ""
+        "tags": [],
+        "text": "Match funds not yet used or reserved, in major unit of currency e.g. pounds GBP."
       },
       "attribute": "match-funds-remaining",
       "reflect": false,
@@ -329,11 +297,8 @@ export class BiggiveCampaignCard {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [{
-            "name": "param",
-            "text": "totalFundsRaised Total the campaign has raised so far including matching but excluding any\ntax relief, in major unit of currency e.g. pounds GBP."
-          }],
-        "text": ""
+        "tags": [],
+        "text": "Total the campaign has raised so far including matching but excluding any\ntax relief, in major unit of currency e.g. pounds GBP."
       },
       "attribute": "total-funds-raised",
       "reflect": false,
@@ -350,11 +315,8 @@ export class BiggiveCampaignCard {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [{
-            "name": "param",
-            "text": "callToActionUrl Full URL of a call to action."
-          }],
-        "text": ""
+        "tags": [],
+        "text": "Full URL of a call to action."
       },
       "attribute": "call-to-action-url",
       "reflect": false,
@@ -371,11 +333,8 @@ export class BiggiveCampaignCard {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [{
-            "name": "param",
-            "text": "callToActionLabel Text for the link to `callToActionUrl`."
-          }],
-        "text": ""
+        "tags": [],
+        "text": "Text for the link to `callToActionUrl`."
       },
       "attribute": "call-to-action-label",
       "reflect": false,

package/dist/collection/components/biggive-grid/biggive-grid.css

@@ -3,12 +3,7 @@
 }
 
 .grid {
-  display: -webkit-box;
-  display: -moz-box;
-  display: -webkit-flex;
   display: flex;
-  -webkit-flex-flow: row wrap;
   flex-flow: row wrap;
-  -webkit-justify-content: space-between;
   justify-content: space-between; 
-} 
+}

package/dist/collection/components/demo-campaign-cards/demo-campaign-cards.js

@@ -1,7 +1,7 @@
 import { Component, getAssetPath, h } from '@stencil/core';
 export class DemoCampaignCards {
   render() {
-    return (h("biggive-grid", null, [...Array(12)].map(() => (h("biggive-campaign-card", { banner: getAssetPath('/assets/images/banner.png'), "days-remaining": 50, target: 50000, "organisation-name": "Ardent Theatre Company", "campaign-type": "Match Funded", "campaign-title": "Strike! A play by Tracy Ryan", categories: "Arts/Culture/Heritage|Environment/Conservation|Health/Wellbeing", beneficiaries: "General Public/Humankind", "match-funds-remaining": 17424, "total-funds-raised": 15424, "call-to-action-url": "#", "call-to-action-label": "Donate" })))));
+    return (h("biggive-grid", null, [...Array(12)].map(() => (h("biggive-campaign-card", { banner: getAssetPath('/assets/images/banner.png'), "days-remaining": 50, target: 50000, "organisation-name": "Ardent Theatre Company", "campaign-type": "Match Funded", "campaign-title": "Strike! A play by Tracy Ryan", categories: ['Arts/Culture/Heritage', 'Environment/Conservation', 'Health/Wellbeing'], beneficiaries: ['General Public/Humankind'], "match-funds-remaining": 17424, "total-funds-raised": 15424, "call-to-action-url": "#", "call-to-action-label": "Donate" })))));
   }
   static get is() { return "demo-campaign-cards"; }
   static get encapsulation() { return "shadow"; }

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

@@ -318,7 +318,7 @@ class CampaignGroupsService {
   }
 }
 
-const biggiveCampaignCardCss = ":host{display:block;margin-bottom:30px}:host([column='1-5']){width:100%}:host([column='1-2']){width:calc(50% - (30px / 2))}:host([column='1-3']){width:calc(33.3% - (60px / 3))}:host([column='1-4']){width:calc(25% - (90px / 4))}:host([column='1-5']){width:calc(20% - (120px / 5))}.container{font-family:'Euclid Triangle', sans-serif;filter:drop-shadow(-1px 6px 3px rgba(0,0,0,0.25))}.sleeve{clip-path:polygon(\n      0% 0%,     \n      0% 0%,     \n      100% 0%,    \n      100% 0%,   \n      100% 100%,  \n      100% 100%,  \n      10% 100%,   \n      0 90%      \n    )}.content{padding:15px;background-color:#FFFFFF}.campaign-type{margin-left:15px;width:0;height:0;border-style:inset;border-width:86.6px 50px 0 50px;border-color:#2AF135 transparent transparent transparent;float:left;transform:rotate(360deg)}.campaign-type span{display:block;text-align:center;top:-75px;left:-25px;position:relative;width:46.5px;height:46.5px;margin:0;color:#2C089B;font-size:12px}.banner{padding-bottom:30%;background-repeat:no-repeat;background-position:center center;background-size:cover}.banner img{display:none}.meta-wrap.style-1{display:flex;font-size:16px;line-height:20px;margin-bottom:20px}.meta-wrap.style-1 .meta-item{width:50%}.meta-wrap.style-1 .meta-item .label{font-weight:bold}.meta-wrap.style-1 .meta-item .text{color:#2C089B}header{margin-bottom:20px}header .slug{text-transform:uppercase;font-size:12px;line-height:14px}header h3{margin:0;padding:0;font-size:24px;line-height:28px}.meta-wrap.style-2{display:flex;font-size:12px;line-height:14px;margin-bottom:40px}.meta-wrap.style-2 .meta-item{width:50%}.meta-wrap.style-2 .meta-item .label{font-weight:bold;display:block;margin-bottom:10px}.meta-wrap.style-2 .meta-item .text{display:block;font-size:16px;line-height:18px}.meta-wrap.style-2 .meta-item .text i{margin-right:10px}.meta-wrap.style-3{display:flex;font-size:16px;line-height:20px;margin-bottom:20px}.meta-wrap.style-3 .meta-item{margin-right:60px}.meta-wrap.style-3 .meta-item .label{font-weight:bold;display:block;font-size:12px;line-height:14px;margin-bottom:10px}.meta-wrap.style-3 .meta-item .text{display:block;font-size:36px;line-height:40px;font-weight:bold}.meta-wrap.style-3 .meta-item:last-child .text{color:#2C089B}.button-wrap{text-align:right}.button-wrap a{display:inline-block;padding:15px 30px;color:#FFFFFF;background-color:#2C089B;cursor:pointer;text-transform:uppercase;font-size:12px;text-decoration:none}.icon{height:1rem;width:2rem;vertical-align:-.125rem}";
+const biggiveCampaignCardCss = ":host{display:block;margin-bottom:30px}.container{font-family:\"Euclid Triangle\", sans-serif;filter:drop-shadow(-1px 6px 3px rgba(0, 0, 0, 0.25))}.sleeve{clip-path:polygon(0% 0%, 0% 0%, 100% 0%, 100% 0%, 100% 100%, 100% 100%, 10% 100%, 0 90%)}.content{padding:15px;background-color:#FFFFFF}.campaign-type{margin-left:15px;width:0;height:0;border-style:inset;border-width:85px 45px 0 45px;border-color:#2AF135 transparent transparent transparent;float:left;transform:rotate(360deg)}.campaign-type span{display:block;text-align:center;top:-85px;left:-25px;position:relative;width:45px;height:45px;margin:0;color:#2C089B;font-size:0.9rem}.banner{padding-bottom:30%;background-repeat:no-repeat;background-position:center center;background-size:cover}.banner img{display:none}.meta-wrap.style-1{display:flex;font-size:16px;line-height:20px;margin-bottom:20px}.meta-wrap.style-1 .meta-item{width:50%}.meta-wrap.style-1 .meta-item .label{font-weight:bold}.meta-wrap.style-1 .meta-item .text{color:#2C089B}header{margin-bottom:20px}header .slug{text-transform:uppercase;font-size:12px;line-height:14px}header h3{margin:0;padding:0;font-size:24px;line-height:28px}.meta-wrap.style-2{display:flex;font-size:12px;line-height:14px;margin-bottom:40px}.meta-wrap.style-2 .meta-item{width:50%}.meta-wrap.style-2 .meta-item .label{font-weight:bold;display:block;margin-bottom:10px}.meta-wrap.style-2 .meta-item .text{display:block;font-size:16px;line-height:18px}.meta-wrap.style-2 .meta-item .text i{margin-right:10px}.meta-wrap.style-3{display:flex;font-size:16px;line-height:20px;margin-bottom:20px}.meta-wrap.style-3 .meta-item{margin-right:60px}.meta-wrap.style-3 .meta-item .label{font-weight:bold;display:block;font-size:12px;line-height:14px;margin-bottom:10px}.meta-wrap.style-3 .meta-item .text{display:block;font-size:36px;line-height:40px;font-weight:bold}.meta-wrap.style-3 .meta-item:last-child .text{color:#2C089B}.button-wrap{text-align:right}.button-wrap a{display:inline-block;padding:15px 30px;color:#FFFFFF;background-color:#2C089B;cursor:pointer;text-transform:uppercase;font-size:12px;text-decoration:none}.icon{height:1rem;width:2rem;vertical-align:-0.125rem}";
 
 const BiggiveCampaignCard = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -326,62 +326,61 @@ const BiggiveCampaignCard = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
     this.__registerHost();
     this.__attachShadow();
     /**
-     * @param {string} banner Full URL of a banner image.
+     * Full URL of a banner image.
      */
     this.banner = '';
     /**
-     * @param {string} number (Ceiling of) whole number of days until campaign end.
+     * (Ceiling of) whole number of days until campaign end.
      */
     this.daysRemaining = null;
     /**
-     * @param {number} totalFundsRaised Target for the campaign including matching but excluding any
-     *                                        tax relief, in major unit of currency e.g. pounds GBP.
+     * Target for the campaign including matching but excluding any
+     * tax relief, in major unit of currency e.g. pounds GBP.
      */
     this.target = null;
     /**
-     * @param {string} organisationName Display name of the charity or non-profit.
+     * Display name of the charity or non-profit.
      */
     this.organisationName = null;
     /**
-     * @param {string} organisationName Display name of the charity's specific time-bound fundraising campaign.
+     * Display name of the charity's specific time-bound fundraising campaign.
      */
     this.campaignTitle = null;
     /**
-     * @param {string} campaignType e.g. "Match Funded".
+     * e.g. "Match Funded".
      */
     this.campaignType = null;
     /**
-     * @param {string} beneficiaries Pipe (|) -separated list of full category labels.
+     * Array of full beneficiary labels.
      */
-    this.beneficiaries = '';
+    this.beneficiaries = [];
     /**
-     * @param {string} categories Pipe (|) -separated list of full category labels.
+     * Array of full category labels.
      */
-    this.categories = '';
+    this.categories = [];
     /**
-     * @param {number} totalFundsRaised Match funds not yet used or reserved, in major unit of currency
-     *                                        e.g. pounds GBP.
+     * Match funds not yet used or reserved, in major unit of currency e.g. pounds GBP.
      */
     this.matchFundsRemaining = null;
     /**
-     * @param {number} totalFundsRaised Total the campaign has raised so far including matching but excluding any
-     *                                  tax relief, in major unit of currency e.g. pounds GBP.
+     * Total the campaign has raised so far including matching but excluding any
+     * tax relief, in major unit of currency e.g. pounds GBP.
      */
     this.totalFundsRaised = null;
     /**
-     * @param {string} callToActionUrl Full URL of a call to action.
+     * Full URL of a call to action.
      */
     this.callToActionUrl = null;
     /**
-     * @param {string} callToActionLabel Text for the link to `callToActionUrl`.
+     * Text for the link to `callToActionUrl`.
      */
     this.callToActionLabel = null;
   }
   getBeneficiaryIcons() {
-    return this.beneficiaries.length > 0 ? this.beneficiaries.split('|').map(beneficiary => CampaignGroupsService.getBeneficiaryIcon(beneficiary)) : [];
+    return this.beneficiaries.map(beneficiary => CampaignGroupsService.getBeneficiaryIcon(beneficiary));
   }
   getCategoryIcons() {
-    return this.categories.length > 0 ? this.categories.split('|').map(category => CampaignGroupsService.getCategoryIcon(category)) : [];
+    return this.categories.map(category => CampaignGroupsService.getCategoryIcon(category));
   }
   formatCurrency(num) {
     if (!isNaN(num)) {
@@ -400,8 +399,8 @@ const BiggiveCampaignCard = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
     "organisationName": [1, "organisation-name"],
     "campaignTitle": [1, "campaign-title"],
     "campaignType": [1, "campaign-type"],
-    "beneficiaries": [1],
-    "categories": [1],
+    "beneficiaries": [16],
+    "categories": [16],
     "matchFundsRemaining": [2, "match-funds-remaining"],
     "totalFundsRaised": [2, "total-funds-raised"],
     "callToActionUrl": [1, "call-to-action-url"],

package/dist/components/biggive-grid2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
-const biggiveGridCss = ":host{display:block}.grid{display:-webkit-box;display:-moz-box;display:-webkit-flex;display:flex;-webkit-flex-flow:row wrap;flex-flow:row wrap;-webkit-justify-content:space-between;justify-content:space-between}";
+const biggiveGridCss = ":host{display:block}.grid{display:flex;flex-flow:row wrap;justify-content:space-between}";
 
 const BiggiveGrid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/demo-campaign-cards.js

@@ -11,7 +11,7 @@ const DemoCampaignCards$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
     this.__attachShadow();
   }
   render() {
-    return (h("biggive-grid", null, [...Array(12)].map(() => (h("biggive-campaign-card", { banner: getAssetPath('/assets/images/banner.png'), "days-remaining": 50, target: 50000, "organisation-name": "Ardent Theatre Company", "campaign-type": "Match Funded", "campaign-title": "Strike! A play by Tracy Ryan", categories: "Arts/Culture/Heritage|Environment/Conservation|Health/Wellbeing", beneficiaries: "General Public/Humankind", "match-funds-remaining": 17424, "total-funds-raised": 15424, "call-to-action-url": "#", "call-to-action-label": "Donate" })))));
+    return (h("biggive-grid", null, [...Array(12)].map(() => (h("biggive-campaign-card", { banner: getAssetPath('/assets/images/banner.png'), "days-remaining": 50, target: 50000, "organisation-name": "Ardent Theatre Company", "campaign-type": "Match Funded", "campaign-title": "Strike! A play by Tracy Ryan", categories: ['Arts/Culture/Heritage', 'Environment/Conservation', 'Health/Wellbeing'], beneficiaries: ['General Public/Humankind'], "match-funds-remaining": 17424, "total-funds-raised": 15424, "call-to-action-url": "#", "call-to-action-label": "Donate" })))));
   }
   static get style() { return demoCampaignCardsCss; }
 }, [1, "demo-campaign-cards"]);

package/dist/esm/biggive-campaign-card_3.entry.js

@@ -318,68 +318,67 @@ class CampaignGroupsService {
   }
 }
 
-const biggiveCampaignCardCss = ":host{display:block;margin-bottom:30px}:host([column='1-5']){width:100%}:host([column='1-2']){width:calc(50% - (30px / 2))}:host([column='1-3']){width:calc(33.3% - (60px / 3))}:host([column='1-4']){width:calc(25% - (90px / 4))}:host([column='1-5']){width:calc(20% - (120px / 5))}.container{font-family:'Euclid Triangle', sans-serif;filter:drop-shadow(-1px 6px 3px rgba(0,0,0,0.25))}.sleeve{clip-path:polygon(\n      0% 0%,     \n      0% 0%,     \n      100% 0%,    \n      100% 0%,   \n      100% 100%,  \n      100% 100%,  \n      10% 100%,   \n      0 90%      \n    )}.content{padding:15px;background-color:#FFFFFF}.campaign-type{margin-left:15px;width:0;height:0;border-style:inset;border-width:86.6px 50px 0 50px;border-color:#2AF135 transparent transparent transparent;float:left;transform:rotate(360deg)}.campaign-type span{display:block;text-align:center;top:-75px;left:-25px;position:relative;width:46.5px;height:46.5px;margin:0;color:#2C089B;font-size:12px}.banner{padding-bottom:30%;background-repeat:no-repeat;background-position:center center;background-size:cover}.banner img{display:none}.meta-wrap.style-1{display:flex;font-size:16px;line-height:20px;margin-bottom:20px}.meta-wrap.style-1 .meta-item{width:50%}.meta-wrap.style-1 .meta-item .label{font-weight:bold}.meta-wrap.style-1 .meta-item .text{color:#2C089B}header{margin-bottom:20px}header .slug{text-transform:uppercase;font-size:12px;line-height:14px}header h3{margin:0;padding:0;font-size:24px;line-height:28px}.meta-wrap.style-2{display:flex;font-size:12px;line-height:14px;margin-bottom:40px}.meta-wrap.style-2 .meta-item{width:50%}.meta-wrap.style-2 .meta-item .label{font-weight:bold;display:block;margin-bottom:10px}.meta-wrap.style-2 .meta-item .text{display:block;font-size:16px;line-height:18px}.meta-wrap.style-2 .meta-item .text i{margin-right:10px}.meta-wrap.style-3{display:flex;font-size:16px;line-height:20px;margin-bottom:20px}.meta-wrap.style-3 .meta-item{margin-right:60px}.meta-wrap.style-3 .meta-item .label{font-weight:bold;display:block;font-size:12px;line-height:14px;margin-bottom:10px}.meta-wrap.style-3 .meta-item .text{display:block;font-size:36px;line-height:40px;font-weight:bold}.meta-wrap.style-3 .meta-item:last-child .text{color:#2C089B}.button-wrap{text-align:right}.button-wrap a{display:inline-block;padding:15px 30px;color:#FFFFFF;background-color:#2C089B;cursor:pointer;text-transform:uppercase;font-size:12px;text-decoration:none}.icon{height:1rem;width:2rem;vertical-align:-.125rem}";
+const biggiveCampaignCardCss = ":host{display:block;margin-bottom:30px}.container{font-family:\"Euclid Triangle\", sans-serif;filter:drop-shadow(-1px 6px 3px rgba(0, 0, 0, 0.25))}.sleeve{clip-path:polygon(0% 0%, 0% 0%, 100% 0%, 100% 0%, 100% 100%, 100% 100%, 10% 100%, 0 90%)}.content{padding:15px;background-color:#FFFFFF}.campaign-type{margin-left:15px;width:0;height:0;border-style:inset;border-width:85px 45px 0 45px;border-color:#2AF135 transparent transparent transparent;float:left;transform:rotate(360deg)}.campaign-type span{display:block;text-align:center;top:-85px;left:-25px;position:relative;width:45px;height:45px;margin:0;color:#2C089B;font-size:0.9rem}.banner{padding-bottom:30%;background-repeat:no-repeat;background-position:center center;background-size:cover}.banner img{display:none}.meta-wrap.style-1{display:flex;font-size:16px;line-height:20px;margin-bottom:20px}.meta-wrap.style-1 .meta-item{width:50%}.meta-wrap.style-1 .meta-item .label{font-weight:bold}.meta-wrap.style-1 .meta-item .text{color:#2C089B}header{margin-bottom:20px}header .slug{text-transform:uppercase;font-size:12px;line-height:14px}header h3{margin:0;padding:0;font-size:24px;line-height:28px}.meta-wrap.style-2{display:flex;font-size:12px;line-height:14px;margin-bottom:40px}.meta-wrap.style-2 .meta-item{width:50%}.meta-wrap.style-2 .meta-item .label{font-weight:bold;display:block;margin-bottom:10px}.meta-wrap.style-2 .meta-item .text{display:block;font-size:16px;line-height:18px}.meta-wrap.style-2 .meta-item .text i{margin-right:10px}.meta-wrap.style-3{display:flex;font-size:16px;line-height:20px;margin-bottom:20px}.meta-wrap.style-3 .meta-item{margin-right:60px}.meta-wrap.style-3 .meta-item .label{font-weight:bold;display:block;font-size:12px;line-height:14px;margin-bottom:10px}.meta-wrap.style-3 .meta-item .text{display:block;font-size:36px;line-height:40px;font-weight:bold}.meta-wrap.style-3 .meta-item:last-child .text{color:#2C089B}.button-wrap{text-align:right}.button-wrap a{display:inline-block;padding:15px 30px;color:#FFFFFF;background-color:#2C089B;cursor:pointer;text-transform:uppercase;font-size:12px;text-decoration:none}.icon{height:1rem;width:2rem;vertical-align:-0.125rem}";
 
 const BiggiveCampaignCard = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     /**
-     * @param {string} banner Full URL of a banner image.
+     * Full URL of a banner image.
      */
     this.banner = '';
     /**
-     * @param {string} number (Ceiling of) whole number of days until campaign end.
+     * (Ceiling of) whole number of days until campaign end.
      */
     this.daysRemaining = null;
     /**
-     * @param {number} totalFundsRaised Target for the campaign including matching but excluding any
-     *                                        tax relief, in major unit of currency e.g. pounds GBP.
+     * Target for the campaign including matching but excluding any
+     * tax relief, in major unit of currency e.g. pounds GBP.
      */
     this.target = null;
     /**
-     * @param {string} organisationName Display name of the charity or non-profit.
+     * Display name of the charity or non-profit.
      */
     this.organisationName = null;
     /**
-     * @param {string} organisationName Display name of the charity's specific time-bound fundraising campaign.
+     * Display name of the charity's specific time-bound fundraising campaign.
      */
     this.campaignTitle = null;
     /**
-     * @param {string} campaignType e.g. "Match Funded".
+     * e.g. "Match Funded".
      */
     this.campaignType = null;
     /**
-     * @param {string} beneficiaries Pipe (|) -separated list of full category labels.
+     * Array of full beneficiary labels.
      */
-    this.beneficiaries = '';
+    this.beneficiaries = [];
     /**
-     * @param {string} categories Pipe (|) -separated list of full category labels.
+     * Array of full category labels.
      */
-    this.categories = '';
+    this.categories = [];
     /**
-     * @param {number} totalFundsRaised Match funds not yet used or reserved, in major unit of currency
-     *                                        e.g. pounds GBP.
+     * Match funds not yet used or reserved, in major unit of currency e.g. pounds GBP.
      */
     this.matchFundsRemaining = null;
     /**
-     * @param {number} totalFundsRaised Total the campaign has raised so far including matching but excluding any
-     *                                  tax relief, in major unit of currency e.g. pounds GBP.
+     * Total the campaign has raised so far including matching but excluding any
+     * tax relief, in major unit of currency e.g. pounds GBP.
      */
     this.totalFundsRaised = null;
     /**
-     * @param {string} callToActionUrl Full URL of a call to action.
+     * Full URL of a call to action.
      */
     this.callToActionUrl = null;
     /**
-     * @param {string} callToActionLabel Text for the link to `callToActionUrl`.
+     * Text for the link to `callToActionUrl`.
      */
     this.callToActionLabel = null;
   }
   getBeneficiaryIcons() {
-    return this.beneficiaries.length > 0 ? this.beneficiaries.split('|').map(beneficiary => CampaignGroupsService.getBeneficiaryIcon(beneficiary)) : [];
+    return this.beneficiaries.map(beneficiary => CampaignGroupsService.getBeneficiaryIcon(beneficiary));
   }
   getCategoryIcons() {
-    return this.categories.length > 0 ? this.categories.split('|').map(category => CampaignGroupsService.getCategoryIcon(category)) : [];
+    return this.categories.map(category => CampaignGroupsService.getCategoryIcon(category));
   }
   formatCurrency(num) {
     if (!isNaN(num)) {
@@ -393,7 +392,7 @@ const BiggiveCampaignCard = class {
 };
 BiggiveCampaignCard.style = biggiveCampaignCardCss;
 
-const biggiveGridCss = ":host{display:block}.grid{display:-webkit-box;display:-moz-box;display:-webkit-flex;display:flex;-webkit-flex-flow:row wrap;flex-flow:row wrap;-webkit-justify-content:space-between;justify-content:space-between}";
+const biggiveGridCss = ":host{display:block}.grid{display:flex;flex-flow:row wrap;justify-content:space-between}";
 
 const BiggiveGrid = class {
   constructor(hostRef) {
@@ -412,7 +411,7 @@ const DemoCampaignCards = class {
     registerInstance(this, hostRef);
   }
   render() {
-    return (h("biggive-grid", null, [...Array(12)].map(() => (h("biggive-campaign-card", { banner: getAssetPath('/assets/images/banner.png'), "days-remaining": 50, target: 50000, "organisation-name": "Ardent Theatre Company", "campaign-type": "Match Funded", "campaign-title": "Strike! A play by Tracy Ryan", categories: "Arts/Culture/Heritage|Environment/Conservation|Health/Wellbeing", beneficiaries: "General Public/Humankind", "match-funds-remaining": 17424, "total-funds-raised": 15424, "call-to-action-url": "#", "call-to-action-label": "Donate" })))));
+    return (h("biggive-grid", null, [...Array(12)].map(() => (h("biggive-campaign-card", { banner: getAssetPath('/assets/images/banner.png'), "days-remaining": 50, target: 50000, "organisation-name": "Ardent Theatre Company", "campaign-type": "Match Funded", "campaign-title": "Strike! A play by Tracy Ryan", categories: ['Arts/Culture/Heritage', 'Environment/Conservation', 'Health/Wellbeing'], beneficiaries: ['General Public/Humankind'], "match-funds-remaining": 17424, "total-funds-raised": 15424, "call-to-action-url": "#", "call-to-action-label": "Donate" })))));
   }
 };
 DemoCampaignCards.style = demoCampaignCardsCss;

package/dist/esm/biggive.js

@@ -13,5 +13,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy([["biggive-campaign-card_3",[[1,"demo-campaign-cards"],[1,"biggive-campaign-card",{"banner":[1],"daysRemaining":[2,"days-remaining"],"target":[2],"organisationName":[1,"organisation-name"],"campaignTitle":[1,"campaign-title"],"campaignType":[1,"campaign-type"],"beneficiaries":[1],"categories":[1],"matchFundsRemaining":[2,"match-funds-remaining"],"totalFundsRaised":[2,"total-funds-raised"],"callToActionUrl":[1,"call-to-action-url"],"callToActionLabel":[1,"call-to-action-label"]}],[1,"biggive-grid"]]]], options);
+  return bootstrapLazy([["biggive-campaign-card_3",[[1,"demo-campaign-cards"],[1,"biggive-campaign-card",{"banner":[1],"daysRemaining":[2,"days-remaining"],"target":[2],"organisationName":[1,"organisation-name"],"campaignTitle":[1,"campaign-title"],"campaignType":[1,"campaign-type"],"beneficiaries":[16],"categories":[16],"matchFundsRemaining":[2,"match-funds-remaining"],"totalFundsRaised":[2,"total-funds-raised"],"callToActionUrl":[1,"call-to-action-url"],"callToActionLabel":[1,"call-to-action-label"]}],[1,"biggive-grid"]]]], options);
 });

package/dist/esm/loader.js

@@ -10,7 +10,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return bootstrapLazy([["biggive-campaign-card_3",[[1,"demo-campaign-cards"],[1,"biggive-campaign-card",{"banner":[1],"daysRemaining":[2,"days-remaining"],"target":[2],"organisationName":[1,"organisation-name"],"campaignTitle":[1,"campaign-title"],"campaignType":[1,"campaign-type"],"beneficiaries":[1],"categories":[1],"matchFundsRemaining":[2,"match-funds-remaining"],"totalFundsRaised":[2,"total-funds-raised"],"callToActionUrl":[1,"call-to-action-url"],"callToActionLabel":[1,"call-to-action-label"]}],[1,"biggive-grid"]]]], options);
+  return bootstrapLazy([["biggive-campaign-card_3",[[1,"demo-campaign-cards"],[1,"biggive-campaign-card",{"banner":[1],"daysRemaining":[2,"days-remaining"],"target":[2],"organisationName":[1,"organisation-name"],"campaignTitle":[1,"campaign-title"],"campaignType":[1,"campaign-type"],"beneficiaries":[16],"categories":[16],"matchFundsRemaining":[2,"match-funds-remaining"],"totalFundsRaised":[2,"total-funds-raised"],"callToActionUrl":[1,"call-to-action-url"],"callToActionLabel":[1,"call-to-action-label"]}],[1,"biggive-grid"]]]], options);
   });
 };