@biggive/components 1.0.175 → 1.0.177

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

@@ -13,12 +13,9 @@ export class BiggiveButton {
     this.size = 'medium';
     this.rounded = false;
     this.centered = false;
-    this.isFutureCampaign = false;
-    this.isPastCampaign = false;
-    this.datetime = undefined;
   }
   render() {
-    return (h("div", { class: 'container space-below-' + this.spaceBelow + ' centered-' + this.centered }, this.isFutureCampaign || this.isPastCampaign ? (h("div", { class: "msg-wrapper" }, h("biggive-misc-icon", { "background-colour": "white", "icon-colour": "black", icon: "Timer" }), this.isFutureCampaign ? h("p", null, "Launches ", this.datetime) : h("p", null, "Closed ", this.datetime))) : (h("a", { href: this.url, target: this.openInNewTab ? '_blank' : '_self', class: 'button button-' + this.colourScheme + ' full-width-' + this.fullWidth.toString() + ' size-' + this.size + ' rounded-' + this.rounded.toString() }, h("span", { onClick: this.handleButtonClick }, this.label)))));
+    return (h("div", { class: 'container space-below-' + this.spaceBelow + ' centered-' + this.centered }, h("a", { href: this.url, target: this.openInNewTab ? '_blank' : '_self', class: 'button button-' + this.colourScheme + ' full-width-' + this.fullWidth.toString() + ' size-' + this.size + ' rounded-' + this.rounded.toString() }, h("span", { onClick: this.handleButtonClick }, this.label))));
   }
   static get is() { return "biggive-button"; }
   static get encapsulation() { return "shadow"; }
@@ -195,59 +192,6 @@ export class BiggiveButton {
         "attribute": "centered",
         "reflect": false,
         "defaultValue": "false"
-      },
-      "isFutureCampaign": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Boolean flag telling the component if the campaign is in the future (not open yet)."
-        },
-        "attribute": "is-future-campaign",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "isPastCampaign": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Boolean flag telling the component if the campaign is in the future (not open yet)."
-        },
-        "attribute": "is-past-campaign",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "datetime": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "To be used alongside isFutureCampaign = true or isPastCampaign = true.\nIf either is true, we render out: 'Launches: ' + datetime or 'Closed: ' + datetime.\nPreferred format: DD/MM/YYYY, HH:MM\nDON-661."
-        },
-        "attribute": "datetime",
-        "reflect": false
       }
     };
   }

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

@@ -857,4 +857,20 @@ a:hover {
   padding-bottom: 10px;
   margin-bottom: 10px;
   border-bottom: 1px solid #E8E8E8;
+}
+.container .msg-wrapper {
+  display: flex;
+  justify-content: center;
+}
+.container .msg-wrapper biggive-misc-icon {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+.container .msg-wrapper p {
+  text-align: center;
+}
+@media screen and (max-width: 1200px) {
+  .container .msg-wrapper p {
+    font-size: 15px;
+  }
 }

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

@@ -25,7 +25,7 @@ export class BiggiveCampaignCard {
     this.datetime = undefined;
   }
   render() {
-    return (h("div", { class: 'container space-below-' + this.spaceBelow.toString(), onClick: this.handleCardGeneralClick }, 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", role: "presentation", style: { 'background-image': 'url(' + this.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, isFutureCampaign: this.isFutureCampaign, isPastCampaign: this.isPastCampaign, datetime: this.datetime }), 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(), onClick: this.handleCardGeneralClick }, 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", role: "presentation", style: { 'background-image': 'url(' + this.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" }, this.isFutureCampaign || this.isPastCampaign ? (h("div", { class: "msg-wrapper" }, h("biggive-misc-icon", { "background-colour": "white", "icon-colour": "black", icon: "Timer" }), this.isFutureCampaign ? h("p", null, "Launches ", this.datetime) : h("p", null, "Closed ", this.datetime))) : (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 is() { return "biggive-campaign-card"; }
   static get encapsulation() { return "shadow"; }

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

@@ -3,6 +3,10 @@ import { faFilterSlash, faMagnifyingGlass } from '@fortawesome/pro-solid-svg-ico
 export class BiggiveCampaignCardFilterGrid {
   constructor() {
     this.sortByPlaceholderText = 'Sort by';
+    this.beneficiariesPlaceHolderText = 'Beneficiary';
+    this.categoriesPlaceHolderText = 'Category';
+    this.locationsPlaceHolderText = 'Location';
+    this.fundingPlaceHolderText = 'Funding';
     this.handleApplyFilterButtonClick = () => {
       const searchAndFilterObj = this.getSearchAndFilterObject();
       this.doSearchAndFilterUpdate.emit(searchAndFilterObj);
@@ -37,6 +41,11 @@ export class BiggiveCampaignCardFilterGrid {
       this.selectedFilterCategory = null;
       this.selectedFilterFunding = null;
       this.selectedFilterLocation = null;
+      // Clear <biggive-form-field-select> components' internal selectedValue and selectedLabel. DON-654.
+      ['sort-by', 'categories', 'beneficiaries', 'locations', 'funding'].forEach(id => {
+        this.el.shadowRoot.getElementById(id).selectedValue = null;
+        this.el.shadowRoot.getElementById(id).selectedLabel = null;
+      });
       // Emit the doSearchAndFilterUpdate event with null values. DON-654
       this.doSearchAndFilterUpdate.emit({
         searchText: null,
@@ -56,12 +65,12 @@ export class BiggiveCampaignCardFilterGrid {
     this.beneficiaryOptions = [];
     this.locationOptions = [];
     this.fundingOptions = [];
-    this.filtersApplied = undefined;
     this.selectedSortByOption = null;
     this.selectedFilterCategory = null;
     this.selectedFilterBeneficiary = null;
     this.selectedFilterLocation = null;
     this.selectedFilterFunding = null;
+    this.filtersApplied = undefined;
   }
   getSearchAndFilterObject() {
     const event = {
@@ -75,11 +84,7 @@ export class BiggiveCampaignCardFilterGrid {
     return event;
   }
   doOptionSelectCompletedHandler(event) {
-    this.selectedSortByOption = this.el.shadowRoot.getElementById('sort-by').selectedValue;
-    this.selectedFilterCategory = this.el.shadowRoot.getElementById('categories').selectedValue;
-    this.selectedFilterBeneficiary = this.el.shadowRoot.getElementById('beneficiaries').selectedValue;
-    this.selectedFilterLocation = this.el.shadowRoot.getElementById('locations').selectedValue;
-    this.selectedFilterFunding = this.el.shadowRoot.getElementById('funding').selectedValue;
+    const nameOfUpdatedDropdown = event.detail.placeholder;
     // If this method was trigerred by the selection of a 'Sort by' dropdown option, then
     // emit an event to search, but do NOT emit an event for example when filter options
     // are selected, until the 'Apply filters' button is pressed which is handled separately
@@ -88,10 +93,23 @@ export class BiggiveCampaignCardFilterGrid {
     // `<biggive-form-field-select placeholder="Sort by" id="sort-by" onDoSelectChange={this.someHandleMethod}>`
     // but the problem with that is that `someHandleMethod` gets called first and then this
     // method gets called, leading to two calls and more risk for error. DON-570.
-    if (event.detail.placeholder === this.sortByPlaceholderText) {
-      console.log('emitting event:');
-      console.log(this.getSearchAndFilterObject());
-      this.doSearchAndFilterUpdate.emit(this.getSearchAndFilterObject());
+    switch (nameOfUpdatedDropdown) {
+      case this.sortByPlaceholderText:
+        this.selectedSortByOption = event.detail.value;
+        this.doSearchAndFilterUpdate.emit(this.getSearchAndFilterObject());
+        break;
+      case this.beneficiariesPlaceHolderText:
+        this.selectedFilterBeneficiary = event.detail.value;
+        break;
+      case this.categoriesPlaceHolderText:
+        this.selectedFilterCategory = event.detail.value;
+        break;
+      case this.fundingPlaceHolderText:
+        this.selectedFilterFunding = event.detail.value;
+        break;
+      case this.locationsPlaceHolderText:
+        this.selectedFilterLocation = event.detail.value;
+        break;
     }
   }
   componentWillRender() {
@@ -99,15 +117,15 @@ export class BiggiveCampaignCardFilterGrid {
       this.selectedFilterCategory !== null || this.selectedFilterBeneficiary !== null || this.selectedFilterFunding !== null || this.selectedFilterLocation !== null;
   }
   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: "clear-all" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", class: "icon icon-clear-all", viewBox: "0 0 512 512" }, h("path", { d: faFilterSlash.icon[4].toString() })), h("a", { onClick: this.handleClearAll }, "Clear all")), h("div", { class: "sort-wrap" }, h("biggive-form-field-select", { placeholder: "Sort by", selectedLabel: this.selectedSortByOption, id: "sort-by" }, h("biggive-form-field-select-option", { value: "amountRaised", label: "Most raised" }), h("biggive-form-field-select-option", { value: "matchFundsRemaining", label: "Match funds remaining" }), h("biggive-form-field-select-option", { value: "Relevance", label: "Relevance" }))), h("div", { class: "filter-wrap" }, h("biggive-button", { class: "filter", colourScheme: this.filtersApplied ? 'secondary' : 'primary', onClick: this.handleFilterButtonClick, label: "Filters", fullWidth: true, "space-below": "0" }), 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", selectedLabel: this.selectedFilterCategory, id: "categories", "space-below": "2" }, this.categoryOptions.length === 0
+    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: "clear-all" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", class: "icon icon-clear-all", viewBox: "0 0 512 512" }, h("path", { d: faFilterSlash.icon[4].toString() })), h("a", { onClick: this.handleClearAll }, "Clear all")), h("div", { class: "sort-wrap" }, h("biggive-form-field-select", { placeholder: this.sortByPlaceholderText, selectedLabel: this.selectedSortByOption, id: "sort-by" }, h("biggive-form-field-select-option", { value: "amountRaised", label: "Most raised" }), h("biggive-form-field-select-option", { value: "matchFundsRemaining", label: "Match funds remaining" }), h("biggive-form-field-select-option", { value: "Relevance", label: "Relevance" }))), h("div", { class: "filter-wrap" }, h("biggive-button", { class: "filter", colourScheme: this.filtersApplied ? 'secondary' : 'primary', onClick: this.handleFilterButtonClick, label: "Filters", fullWidth: true, "space-below": "0" }), h("biggive-popup", { id: "filter-popup" }, h("h4", { class: "space-above-0 space-below-3 colour-primary" }, "Filters"), h("biggive-form-field-select", { placeholder: this.categoriesPlaceHolderText, selectedLabel: this.selectedFilterCategory, 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", selectedLabel: this.selectedFilterBeneficiary, id: "beneficiaries", "space-below": "2" }, this.beneficiaryOptions.length === 0
+      : (Array.isArray(this.categoryOptions) ? this.categoryOptions : JSON.parse(this.categoryOptions)).map(option => (h("biggive-form-field-select-option", { value: option, label: option })))), h("biggive-form-field-select", { placeholder: this.beneficiariesPlaceHolderText, selectedLabel: this.selectedFilterBeneficiary, 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", selectedLabel: this.selectedFilterLocation, id: "locations", "space-below": "2" }, this.locationOptions.length === 0
+      : (Array.isArray(this.beneficiaryOptions) ? this.beneficiaryOptions : JSON.parse(this.beneficiaryOptions)).map(option => (h("biggive-form-field-select-option", { value: option, label: option })))), h("biggive-form-field-select", { placeholder: this.locationsPlaceHolderText, selectedLabel: this.selectedFilterLocation, 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", selectedLabel: this.selectedFilterFunding, id: "funding", "space-below": "2" }, this.fundingOptions.length === 0
+      : (Array.isArray(this.locationOptions) ? this.locationOptions : JSON.parse(this.locationOptions)).map(option => (h("biggive-form-field-select-option", { value: option, label: option })))), h("biggive-form-field-select", { placeholder: this.fundingPlaceHolderText, selectedLabel: this.selectedFilterFunding, 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" })))));
+      : (Array.isArray(this.fundingOptions) ? this.fundingOptions : JSON.parse(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" })))));
   }
   static get is() { return "biggive-campaign-card-filter-grid"; }
   static get encapsulation() { return "shadow"; }
@@ -214,86 +232,77 @@ export class BiggiveCampaignCardFilterGrid {
         "defaultValue": "'Search'"
       },
       "categoryOptions": {
-        "type": "unknown",
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string[]",
-          "resolved": "string[]",
+          "original": "string | string[]",
+          "resolved": "string | string[]",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "JSON array of category key/values"
+          "text": "JSON array of category key/values, or takes a stringified equiavalent (for Storybook)"
         },
+        "attribute": "category-options",
+        "reflect": false,
         "defaultValue": "[]"
       },
       "beneficiaryOptions": {
-        "type": "unknown",
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string[]",
-          "resolved": "string[]",
+          "original": "string | string[]",
+          "resolved": "string | string[]",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "JSON array of beneficiary key/values"
+          "text": "JSON array of beneficiary key/values, or takes a stringified equiavalent (for Storybook)"
         },
+        "attribute": "beneficiary-options",
+        "reflect": false,
         "defaultValue": "[]"
       },
       "locationOptions": {
-        "type": "unknown",
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string[]",
-          "resolved": "string[]",
+          "original": "string | string[]",
+          "resolved": "string | string[]",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "JSON array of location key/values"
+          "text": "JSON array of location key/values, or takes a stringified equiavalent (for Storybook)"
         },
+        "attribute": "location-options",
+        "reflect": false,
         "defaultValue": "[]"
       },
       "fundingOptions": {
-        "type": "unknown",
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string[]",
-          "resolved": "string[]",
+          "original": "string | string[]",
+          "resolved": "string | string[]",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "JSON array of funding key/values"
+          "text": "JSON array of funding key/values, or takes a stringified equiavalent (for Storybook)"
         },
+        "attribute": "funding-options",
+        "reflect": false,
         "defaultValue": "[]"
       },
-      "filtersApplied": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "filters-applied",
-        "reflect": false
-      },
       "selectedSortByOption": {
         "type": "string",
         "mutable": false,
@@ -386,6 +395,11 @@ export class BiggiveCampaignCardFilterGrid {
       }
     };
   }
+  static get states() {
+    return {
+      "filtersApplied": {}
+    };
+  }
   static get events() {
     return [{
         "method": "doSearchAndFilterUpdate",

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

@@ -51,28 +51,21 @@ export default {
         type: 'select',
       },
     },
-    filtersApplied: {
-      name: 'Filters applied',
-      options: [true, false],
-      control: {
-        type: 'select',
-      },
-    },
   },
 };
 const Template = args => `
       <biggive-campaign-card-filter-grid
-        category-options="${args.categoryOptions}"
-        beneficiary-options="${args.beneficiaryOptions}"
-        location-options="${args.locationOptions}"
-        funding-options="${args.fundingOptions}"
+        category-options='${args.categoryOptions}'
+        beneficiary-options='${args.beneficiaryOptions}'
+        location-options='${args.locationOptions}'
+        funding-options='${args.fundingOptions}'
         search-text="${args.searchText}"
         filters-applied="${args.filtersApplied}",
-        selected-sort-by-option="${args.selectedSortByOption}"
-        selected-filter-categeory="${args.selectedFilterCategory}"
-        selected-filter-beneficiary="${args.selectedFilterBeneficiary}"
-        selected-filter-location="${args.selectedFilterLocation}"
-        selected-filter-funding="${args.selectedFilterFunding}"
+        ${args.selectedSortByOption ? 'selected-sort-by-option=' + args.selectedSortByOption : ''}
+        ${args.selectedFilterCategory ? 'selected-filter-category=' + args.selectedFilterCategory : ''}
+        ${args.selectedFilterBeneficiary ? 'selected-filter-beneficiary=' + args.selectedFilterBeneficiary : ''}
+        ${args.selectedFilterLocation ? 'selected-filter-location=' + args.selectedFilterLocation : ''}
+        ${args.selectedFilterFunding ? 'selected-filter-funding=' + args.selectedFilterFunding : ''}
         >
       <biggive-grid slot="campaign-grid" column-count="3">
         <biggive-campaign-card
@@ -113,18 +106,17 @@ const Template = args => `
       </biggive-grid>
       </biggive-campaign-card-filter-grid>
       `;
-document.addEventListener('doSearchAndFilterUpdate', $event => console.log($event));
+document.addEventListener('doSearchAndFilterUpdate', ($event) => console.log($event.detail));
 export const CampaignCardFilterGridComponent = Template.bind({});
 CampaignCardFilterGridComponent.args = {
-  categoryOptions: ['ABC', 'DEF'],
-  beneficiaryOptions: ['ABC', 'DEF'],
-  locationOptions: ['ABC', 'DEF'],
-  fundingOptions: ['ABC', 'DEF'],
+  categoryOptions: JSON.stringify(['ABC', 'DEF']),
+  beneficiaryOptions: JSON.stringify(['ABC', 'DEF']),
+  locationOptions: JSON.stringify(['ABC', 'DEF']),
+  fundingOptions: JSON.stringify(['ABC', 'DEF']),
   searchText: '',
-  selectedSortByOption: 'Sort by',
-  selectedFilterCategory: 'Category',
-  selectedFilterBeneficiary: 'Beneficiary',
-  selectedFilterLocation: 'Location',
-  selectedFilterFunding: 'Funding',
-  filtersApplied: false,
+  selectedSortByOption: null,
+  selectedFilterCategory: null,
+  selectedFilterBeneficiary: null,
+  selectedFilterLocation: null,
+  selectedFilterFunding: null,
 };

package/dist/collection/util/fontawesome-icons.js

@@ -175,22 +175,21 @@ export class FontAwesomeIconsService {
   static getBeneficiaryIcon(beneficiary) {
     const matchingItems = FontAwesomeIconsService.getBeneficiaries().filter(ii => ii.name === beneficiary);
     // For an unknown/invalid beneficiary, show 'other' symbol.
-    return matchingItems[0].icon || faPlus;
+    return matchingItems.length > 0 ? matchingItems[0].icon : faPlus;
   }
   static getMiscIcon(misc) {
     const matchingItems = FontAwesomeIconsService.getMisc().filter(ii => ii.name === misc);
     // For an unknown/invalid beneficiary, show 'other' symbol.
-    return matchingItems[0].icon || faPlus;
+    return matchingItems.length > 0 ? matchingItems[0].icon : faPlus;
   }
   static getSocialIcon(social) {
     const matchingItems = FontAwesomeIconsService.getSocials().filter(ii => ii.name === social);
     // For an unknown/invalid beneficiary, show 'other' symbol.
-    return matchingItems[0].icon || faPlus;
+    return matchingItems.length > 0 ? matchingItems[0].icon : faPlus;
   }
   static getCategoryIcon(category) {
-    var _a;
     const matchingItems = FontAwesomeIconsService.getCategories().filter(ii => ii.name === category);
     // For an unknown/invalid category, show 'other' symbol.
-    return ((_a = matchingItems[0]) === null || _a === void 0 ? void 0 : _a.icon) || faPlus;
+    return matchingItems.length > 0 ? matchingItems[0].icon : faPlus;
   }
 }

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

@@ -1,6 +1,5 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { d as defineCustomElement$3 } from './biggive-button2.js';
-import { d as defineCustomElement$2 } from './biggive-misc-icon2.js';
+import { d as defineCustomElement$2 } from './biggive-button2.js';
 
 const biggiveArticleCardCss = "body{background-color:#FFFFFF}body.background-primary{background-color:#2C089B}body.background-secondary{background-color:#2C089B}body.background-tertiary{background-color:#2C089B}body.background-brand-1{background-color:#B30510}body.background-brand-2{background-color:#B30510}body.background-brand-3{background-color:#B30510}body.background-brand-4{background-color:#B30510}body.background-brand-5{background-color:#B30510}body.background-brand-6{background-color:#B30510}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-brand-1{color:#B30510}.colour-brand-2{color:#6E0887}.colour-brand-3{color:#50B400}.colour-brand-4{color:#FFE500}.colour-brand-5{color:#F07D00}.colour-brand-6{color:#CBC8C8}.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-brand-1:hover,.text-colour-brand-1{color:#B30510}.text-colour-hover-brand-2:hover,.text-colour-brand-2{color:#6E0887}.text-colour-hover-brand-3:hover,.text-colour-brand-3{color:#50B400}.text-colour-hover-brand-4:hover,.text-colour-brand-4{color:#FFE500}.text-colour-hover-brand-5:hover,.text-colour-brand-5{color:#F07D00}.text-colour-hover-brand-6:hover,.text-colour-brand-6{color:#CBC8C8}.text-colour-hover-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-brand-1{fill:#B30510}.fill-brand-2{fill:#6E0887}.fill-brand-3{fill:#50B400}.fill-brand-4{fill:#FFE500}.fill-brand-5{fill:#F07D00}.fill-brand-6{fill:#CBC8C8}.fill-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-brand-1:hover,.background-colour-brand-1{background-color:#B30510}.background-colour-hover-brand-2:hover,.background-colour-brand-2{background-color:#6E0887}.background-colour-hover-brand-3:hover,.background-colour-brand-3{background-color:#50B400}.background-colour-hover-brand-4:hover,.background-colour-brand-4{background-color:#FFE500}.background-colour-hover-brand-5:hover,.background-colour-brand-5{background-color:#F07D00}.background-colour-hover-brand-6:hover,.background-colour-brand-6{background-color:#CBC8C8}.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;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:#000000;background-color:#2AF135;border-color:#2AF135}.button-secondary:hover{background-color:#FFFFFF;border-color:#000000}.button-tertiary{color:#FFFFFF;background-color:#FF7272;border-color:#FF7272}.button-tertiary:hover{background-color:#FFFFFF}.button-brand-1{color:#FFFFFF;background-color:#B30510;border-color:#B30510}.button-brand-1:hover{background-color:#FFFFFF}.button-brand-2{color:#FFFFFF;background-color:#6E0887;border-color:#6E0887}.button-brand-2:hover{background-color:#FFFFFF}.button-brand-3{color:#FFFFFF;background-color:#50B400;border-color:#50B400}.button-brand-3:hover{background-color:#FFFFFF}.button-brand-4{color:#FFFFFF;background-color:#FFE500;border-color:#FFE500}.button-brand-4:hover{background-color:#000000}.button-brand-5{color:#FFFFFF;background-color:#F07D00;border-color:#F07D00}.button-brand-5:hover{background-color:#FFFFFF}.button-brand-6{color:#FFFFFF;background-color:#CBC8C8;border-color:#CBC8C8}.button-brand-6:hover{background-color:#000000}.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;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;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;border:0;padding-left:0;padding-right:0}.button-clear-tertiary:hover{text-decoration:none;background-color:transparent}.button-clear-brand-1{color:#B30510;background-color:transparent;text-decoration:underline;border:0;padding-left:0;padding-right:0}.button-clear-brand-1:hover{text-decoration:none;background-color:transparent}.button-clear-brand-2{color:#6E0887;background-color:transparent;text-decoration:underline;border:0;padding-left:0;padding-right:0}.button-clear-brand-2:hover{text-decoration:none;background-color:transparent}.button-clear-brand-3{color:#50B400;background-color:transparent;text-decoration:underline;border:0;padding-left:0;padding-right:0}.button-clear-brand-3:hover{text-decoration:none;background-color:transparent}.button-clear-brand-4{color:#FFE500;background-color:transparent;text-decoration:underline;border:0;padding-left:0;padding-right:0}.button-clear-brand-4:hover{text-decoration:none;background-color:transparent}.button-clear-brand-5{color:#F07D00;background-color:transparent;text-decoration:underline;border:0;padding-left:0;padding-right:0}.button-clear-brand-5:hover{text-decoration:none;background-color:transparent}.button-clear-brand-6{color:#CBC8C8;background-color:transparent;text-decoration:underline;border:0;padding-left:0;padding-right:0}.button-clear-brand-6:hover{text-decoration:none;background-color:transparent}.button-clear-white{color:#FFFFFF;background-color:transparent;text-decoration:underline;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}.container{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;position:relative;text-align:left;padding:30px}.container .sleeve{padding:30px 30px 0 30px;clip-path:polygon(0% 0%, 0% 0%, 100% 0%, 100% 0, 100% 100%, 100% 100%, 50px 100%, 0 calc(100% - 50px))}.container .slug{margin-bottom:5px}.container .date{font-size:13px;line-height:17px;margin-bottom:15px}.container h3{font-size:20px;line-height:24px;font-weight:bold;margin-bottom:15px}.container h3 a,.container h3 a:hover{text-decoration:none}.container .image-group{margin-bottom:15px}.container .image-group .image-wrap{border-radius:50%;width:60px;height:60px;background-size:cover;background-position:center center;margin-bottom:5px}.container .image-group .image-wrap img{display:none}.container .image-group .image-label{font-size:13px;line-height:17px}";
 
@@ -44,7 +43,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["biggive-article-card", "biggive-button", "biggive-misc-icon"];
+  const components = ["biggive-article-card", "biggive-button"];
   components.forEach(tagName => { switch (tagName) {
     case "biggive-article-card":
       if (!customElements.get(tagName)) {
@@ -52,11 +51,6 @@ function defineCustomElement$1() {
       }
       break;
     case "biggive-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "biggive-misc-icon":
       if (!customElements.get(tagName)) {
         defineCustomElement$2();
       }

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

@@ -1,6 +1,5 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { d as defineCustomElement$3 } from './biggive-button2.js';
-import { d as defineCustomElement$2 } from './biggive-misc-icon2.js';
+import { d as defineCustomElement$2 } from './biggive-button2.js';
 
 const biggiveBasicCardCss = "body{background-color:#FFFFFF}body.background-primary{background-color:#2C089B}body.background-secondary{background-color:#2C089B}body.background-tertiary{background-color:#2C089B}body.background-brand-1{background-color:#B30510}body.background-brand-2{background-color:#B30510}body.background-brand-3{background-color:#B30510}body.background-brand-4{background-color:#B30510}body.background-brand-5{background-color:#B30510}body.background-brand-6{background-color:#B30510}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-brand-1{color:#B30510}.colour-brand-2{color:#6E0887}.colour-brand-3{color:#50B400}.colour-brand-4{color:#FFE500}.colour-brand-5{color:#F07D00}.colour-brand-6{color:#CBC8C8}.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-brand-1:hover,.text-colour-brand-1{color:#B30510}.text-colour-hover-brand-2:hover,.text-colour-brand-2{color:#6E0887}.text-colour-hover-brand-3:hover,.text-colour-brand-3{color:#50B400}.text-colour-hover-brand-4:hover,.text-colour-brand-4{color:#FFE500}.text-colour-hover-brand-5:hover,.text-colour-brand-5{color:#F07D00}.text-colour-hover-brand-6:hover,.text-colour-brand-6{color:#CBC8C8}.text-colour-hover-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-brand-1{fill:#B30510}.fill-brand-2{fill:#6E0887}.fill-brand-3{fill:#50B400}.fill-brand-4{fill:#FFE500}.fill-brand-5{fill:#F07D00}.fill-brand-6{fill:#CBC8C8}.fill-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-brand-1:hover,.background-colour-brand-1{background-color:#B30510}.background-colour-hover-brand-2:hover,.background-colour-brand-2{background-color:#6E0887}.background-colour-hover-brand-3:hover,.background-colour-brand-3{background-color:#50B400}.background-colour-hover-brand-4:hover,.background-colour-brand-4{background-color:#FFE500}.background-colour-hover-brand-5:hover,.background-colour-brand-5{background-color:#F07D00}.background-colour-hover-brand-6:hover,.background-colour-brand-6{background-color:#CBC8C8}.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;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:#000000;background-color:#2AF135;border-color:#2AF135}.button-secondary:hover{background-color:#FFFFFF;border-color:#000000}.button-tertiary{color:#FFFFFF;background-color:#FF7272;border-color:#FF7272}.button-tertiary:hover{background-color:#FFFFFF}.button-brand-1{color:#FFFFFF;background-color:#B30510;border-color:#B30510}.button-brand-1:hover{background-color:#FFFFFF}.button-brand-2{color:#FFFFFF;background-color:#6E0887;border-color:#6E0887}.button-brand-2:hover{background-color:#FFFFFF}.button-brand-3{color:#FFFFFF;background-color:#50B400;border-color:#50B400}.button-brand-3:hover{background-color:#FFFFFF}.button-brand-4{color:#FFFFFF;background-color:#FFE500;border-color:#FFE500}.button-brand-4:hover{background-color:#000000}.button-brand-5{color:#FFFFFF;background-color:#F07D00;border-color:#F07D00}.button-brand-5:hover{background-color:#FFFFFF}.button-brand-6{color:#FFFFFF;background-color:#CBC8C8;border-color:#CBC8C8}.button-brand-6:hover{background-color:#000000}.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;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;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;border:0;padding-left:0;padding-right:0}.button-clear-tertiary:hover{text-decoration:none;background-color:transparent}.button-clear-brand-1{color:#B30510;background-color:transparent;text-decoration:underline;border:0;padding-left:0;padding-right:0}.button-clear-brand-1:hover{text-decoration:none;background-color:transparent}.button-clear-brand-2{color:#6E0887;background-color:transparent;text-decoration:underline;border:0;padding-left:0;padding-right:0}.button-clear-brand-2:hover{text-decoration:none;background-color:transparent}.button-clear-brand-3{color:#50B400;background-color:transparent;text-decoration:underline;border:0;padding-left:0;padding-right:0}.button-clear-brand-3:hover{text-decoration:none;background-color:transparent}.button-clear-brand-4{color:#FFE500;background-color:transparent;text-decoration:underline;border:0;padding-left:0;padding-right:0}.button-clear-brand-4:hover{text-decoration:none;background-color:transparent}.button-clear-brand-5{color:#F07D00;background-color:transparent;text-decoration:underline;border:0;padding-left:0;padding-right:0}.button-clear-brand-5:hover{text-decoration:none;background-color:transparent}.button-clear-brand-6{color:#CBC8C8;background-color:transparent;text-decoration:underline;border:0;padding-left:0;padding-right:0}.button-clear-brand-6:hover{text-decoration:none;background-color:transparent}.button-clear-white{color:#FFFFFF;background-color:transparent;text-decoration:underline;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}.container{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;position:relative;text-align:center;background-size:cover;background-position:center center;padding:30px;height:100%;white-space:pre-wrap}.container .sleeve{padding:30px;height:100%;box-sizing:border-box}.container.clip-bottom-left-corner-false.clip-top-right-corner-true .sleeve{clip-path:polygon(0% 0%, 0% 0%, calc(100% - 50px) 0%, 100% 50px, 100% 100%, 100% 100%, 0% 100%, 0 100%)}.container.clip-bottom-left-corner-true.clip-top-right-corner-false .sleeve{clip-path:polygon(0% 0%, 0% 0%, 100% 0%, 100% 0, 100% 100%, 100% 100%, 50px 100%, 0 calc(100% - 50px))}.container.clip-bottom-left-corner-true.clip-top-right-corner-true .sleeve{clip-path:polygon(0% 0%, 0% 0%, calc(100% - 50px) 0%, 100% 50px, 100% 100%, 100% 100%, 50px 100%, 0 calc(100% - 50px))}.container .icon svg{width:50px;height:auto}.container h3{font-size:25px;line-height:32px;font-weight:bold;margin-bottom:15px}.container .subtitle{margin-bottom:15px}";
 
@@ -57,7 +56,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["biggive-basic-card", "biggive-button", "biggive-misc-icon"];
+  const components = ["biggive-basic-card", "biggive-button"];
   components.forEach(tagName => { switch (tagName) {
     case "biggive-basic-card":
       if (!customElements.get(tagName)) {
@@ -65,11 +64,6 @@ function defineCustomElement$1() {
       }
       break;
     case "biggive-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "biggive-misc-icon":
       if (!customElements.get(tagName)) {
         defineCustomElement$2();
       }