@biggive/components 202304111314.0.0 → 202304281233.0.0

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

@@ -24,7 +24,7 @@ export class BiggiveBiographyCard {
           ' background-colour-' +
           this.backgroundColour +
           ' border-width-' +
-          this.borderWidth }, this.imageUrl != '' ? (h("div", { "data-ratio": this.ratio, class: 'image-wrap image-style-' + this.imageStyle + ' rounded-' + this.rounded.toString(), style: { 'background-image': "url('" + this.imageUrl + "')" } }, h("img", { src: this.imageUrl, alt: this.fullName, title: this.fullName }), h("div", { class: "circle" }, h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M11 11v-11h1v11h11v1h-11v11h-1v-11h-11v-1h11z" }))))) : null), h("h3", { class: "full-name" }, this.fullName), h("div", { class: "job-title" }, this.jobTitle))));
+          this.borderWidth }, this.imageUrl != '' ? (h("div", { "data-ratio": this.ratio, class: 'image-wrap image-style-' + this.imageStyle + ' rounded-' + this.rounded.toString(), style: { 'background-image': "url('" + this.imageUrl + "')" } }, h("img", { src: this.imageUrl, alt: this.fullName, title: this.fullName }), h("div", { class: "circle" }, h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "stroke-color": "1", stroke: "#000000", d: "M11 11v-11h1v11h11v1h-11v11h-1v-11h-11v-1h11z" }))))) : null), h("h3", { class: "full-name" }, this.fullName), h("div", { class: "job-title" }, this.jobTitle))));
     }
     else {
       return (h("div", { class: 'container space-below-' + this.spaceBelow + ' text-colour-' + this.textColour + ' text-align-' + this.textAlign }, h("div", { class: 'sleeve circle-' +

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" }, 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 })))));
+    return (h("div", { class: 'container space-below-' + this.spaceBelow.toString() }, h("div", { class: "sleeve" }, h("div", { onClick: this.handleCardGeneralClick }, 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.css

@@ -102,6 +102,46 @@ a:hover {
   padding: 5px 30px;
 }
 
+.selected-filter-wrap {
+  display: flex;
+  margin-bottom: 30px;
+}
+.selected-filter-wrap .button {
+  cursor: pointer;
+  border-radius: 20px;
+  padding: 5px 50px 5px 20px;
+  margin-right: 15px;
+  background-color: #FF7272;
+  color: #000000;
+  border: 1px solid #FF7272;
+  text-decoration: none;
+  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgMTguNCAxOC40IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxOC40IDE4LjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7c3Ryb2tlOiMwMDAwMDA7fQo8L3N0eWxlPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNOS4yLDguNUwxNywwLjdsMC43LDAuN0w5LjksOS4ybDcuOCw3LjhMMTcsMTcuN0w5LjIsOS45bC03LjgsNy44TDAuNywxN2w3LjgtNy44TDAuNywxLjRsMC43LTAuN0w5LjIsOC41eiIvPgo8L3N2Zz4K);
+  background-repeat: no-repeat;
+  background-position: right 20px center;
+  background-size: 12px auto;
+}
+.selected-filter-wrap .button:hover {
+  background-color: #FFFFFF;
+  color: #000000;
+}
+.selected-filter-wrap .clear-all {
+  margin-left: auto;
+}
+.selected-filter-wrap .clear-all a {
+  cursor: pointer;
+  border-radius: 20px;
+  padding: 5px 20px;
+  margin-right: 15px;
+  background-color: #2C089B;
+  color: #FFFFFF;
+  border: 1px solid #2C089B;
+  text-decoration: none;
+}
+.selected-filter-wrap .clear-all a:hover {
+  background-color: #FFFFFF;
+  color: #2C089B;
+}
+
 .sort-filter-wrap {
   display: flex;
   justify-content: flex-end;

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

@@ -1,5 +1,5 @@
 import { h } from '@stencil/core';
-import { faFilterSlash, faMagnifyingGlass } from '@fortawesome/pro-solid-svg-icons';
+import { faMagnifyingGlass } from '@fortawesome/pro-solid-svg-icons';
 export class BiggiveCampaignCardFilterGrid {
   constructor() {
     this.sortByPlaceholderText = 'Sort by';
@@ -11,6 +11,30 @@ export class BiggiveCampaignCardFilterGrid {
       const searchAndFilterObj = this.getSearchAndFilterObject();
       this.doSearchAndFilterUpdate.emit(searchAndFilterObj);
       this.el.shadowRoot.getElementById('filter-popup').closeFromOutside();
+      const selectedFilters = this.el.shadowRoot.querySelector('.selected-filters');
+      selectedFilters.querySelectorAll('.button').forEach(button => {
+        button.remove();
+      });
+      let filters = {
+        beneficiaries: searchAndFilterObj.filterBeneficiary,
+        categories: searchAndFilterObj.filterCategory,
+        funding: searchAndFilterObj.filterFunding,
+        locations: searchAndFilterObj.filterLocation,
+      };
+      for (var id in filters) {
+        if (typeof filters[id] === 'string') {
+          let button = document.createElement('span');
+          button.classList.add('button');
+          button.dataset.id = id;
+          button.innerText = filters[id];
+          selectedFilters.appendChild(button);
+          button.addEventListener('click', () => {
+            button.remove();
+            this.el.shadowRoot.getElementById(button.dataset.id).selectedValue = null;
+            this.el.shadowRoot.getElementById(button.dataset.id).selectedLabel = null;
+          });
+        }
+      }
       this.filtersApplied =
         typeof searchAndFilterObj.filterBeneficiary === 'string' ||
           typeof searchAndFilterObj.filterCategory === 'string' ||
@@ -46,6 +70,10 @@ export class BiggiveCampaignCardFilterGrid {
         this.el.shadowRoot.getElementById(id).selectedValue = null;
         this.el.shadowRoot.getElementById(id).selectedLabel = null;
       });
+      const selectedFilters = this.el.shadowRoot.querySelector('.selected-filters');
+      selectedFilters.querySelectorAll('.button').forEach(button => {
+        button.remove();
+      });
       // Emit the doSearchAndFilterUpdate event with null values. DON-654
       this.doSearchAndFilterUpdate.emit({
         searchText: null,
@@ -119,7 +147,7 @@ export class BiggiveCampaignCardFilterGrid {
   }
   render() {
     var _a;
-    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: (_a = this.searchText) !== null && _a !== void 0 ? _a : '', 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 text-colour-primary" }, "Filters"), h("biggive-form-field-select", { placeholder: this.categoriesPlaceHolderText, 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: (_a = this.searchText) !== null && _a !== void 0 ? _a : '', 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: "filter-wrap" }, h("biggive-button", { class: "filter", colourScheme: "primary", onClick: this.handleFilterButtonClick, label: "Filter", fullWidth: true, "space-below": "0" }), h("biggive-popup", { id: "filter-popup" }, h("h4", { class: "space-above-0 space-below-3 text-colour-primary" }, "Filters"), h("biggive-form-field-select", { placeholder: this.categoriesPlaceHolderText, selectedLabel: this.selectedFilterCategory, id: "categories", "space-below": "2" }, this.categoryOptions.length === 0
       ? undefined
       : (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
@@ -127,7 +155,7 @@ export class BiggiveCampaignCardFilterGrid {
       ? undefined
       : (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
-      : (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" })))));
+      : (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: "sort-wrap" }, h("biggive-form-field-select", { "select-style": "underlined", 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: "selected-filter-wrap" }, h("div", { class: "selected-filters" }), h("div", { class: "clear-all" }, h("a", { onClick: this.handleClearAll }, "Clear all"))), 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-carousel/biggive-carousel.css

@@ -157,6 +157,7 @@ a:hover {
   display: flex;
   flex-flow: row wrap;
   min-width: 100%;
+  overflow: hidden;
 }
 .container .navigation {
   padding: 10px 0;
@@ -179,15 +180,23 @@ a:hover {
   cursor: pointer;
   text-align: center;
 }
+.container .navigation .button svg {
+  width: 15px;
+  height: 15px;
+  position: relative;
+  top: 2.5px;
+}
 .container .navigation .button.prev {
   left: 0;
 }
+.container .navigation .button.prev svg {
+  left: -3px;
+}
 .container .navigation .button.next {
   right: 0;
 }
-.container .navigation .button svg {
-  width: 10px;
-  height: 10px;
+.container .navigation .button.next svg {
+  left: -1px;
 }
 
 .container ::slotted(.hidden) {

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

@@ -5,14 +5,19 @@ export class BiggiveCarousel {
     this.itemCount = 0;
     this.itemWidthPx = 0;
     this.columnGapPx = 0;
+    this.versions = undefined;
     this.spaceBelow = 4;
     this.columnCount = 3;
     this.buttonBackgroundColour = 'white';
     this.buttonIconColour = 'primary';
   }
   componentDidRender() {
-    var _a, _b;
+    var _a;
     this.sleeve = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.sleeve');
+    this.resizeToFitContent();
+  }
+  async resizeToFitContent() {
+    var _a;
     let children = new Array();
     Array.from(this.host.children).forEach(item => {
       if (!item.classList.contains('hidden')) {
@@ -22,8 +27,10 @@ export class BiggiveCarousel {
     this.itemCount = children.length;
     if (children.length > 0) {
       this.columnGapPx = 30;
-      this.itemWidthPx = (((_b = this.sleeve.parentElement) === null || _b === void 0 ? void 0 : _b.offsetWidth) - (this.columnCount - 1) * this.columnGapPx) / this.columnCount;
+      this.itemWidthPx = (((_a = this.sleeve.parentElement) === null || _a === void 0 ? void 0 : _a.offsetWidth) - (this.columnCount - 1) * this.columnGapPx) / this.columnCount;
       this.sleeve.style.width = (this.itemWidthPx + this.columnGapPx) * children.length + 'px';
+      this.sleeve.style.height = this.sleeve.style.height;
+      this.sleeve.style.transform = 'translate3d(0px, 0, 0)';
       children.forEach(el => {
         el.style.width = this.itemWidthPx + 'px';
         el.style.marginRight = this.columnGapPx + 'px';
@@ -59,7 +66,7 @@ export class BiggiveCarousel {
         ' button-background-colour-' +
         this.buttonBackgroundColour +
         ' button-icon-colour-' +
-        this.buttonIconColour }, h("div", { class: "items" }, h("div", { class: "sleeve" }, h("slot", null))), h("div", { class: "navigation" }, h("div", { class: "button prev", onClick: () => this.clickPrevHandler(), title: "Previous" }, h("svg", { width: "9", height: "16", viewBox: "0 0 9 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M8.29311 14.5703L1.73926 8.01646L8.29311 1.46261", stroke: "#000000", "stroke-width": "2" }))), h("div", { class: "button next", onClick: () => this.clickNextHandler(), title: "Next" }, h("svg", { width: "9", height: "16", viewBox: "0 0 9 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M0.739117 1.46094L7.29297 8.01479L0.739118 14.5686", stroke: "#000000", "stroke-width": "2" }))))));
+        this.buttonIconColour }, h("div", { class: "items" }, h("div", { class: "sleeve" }, h("slot", null))), h("div", { class: "navigation" }, h("div", { class: "button prev", onClick: this.clickPrevHandler, title: "Previous" }, h("svg", { width: "9", height: "16", viewBox: "0 0 9 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M8.29311 14.5703L1.73926 8.01646L8.29311 1.46261", stroke: "#000000", "stroke-width": "2" }))), h("div", { class: "button next", onClick: this.clickNextHandler, title: "Next" }, h("svg", { width: "9", height: "16", viewBox: "0 0 9 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M0.739117 1.46094L7.29297 8.01479L0.739118 14.5686", stroke: "#000000", "stroke-width": "2" }))))));
   }
   static get is() { return "biggive-carousel"; }
   static get encapsulation() { return "shadow"; }
@@ -164,5 +171,33 @@ export class BiggiveCarousel {
       }
     };
   }
+  static get states() {
+    return {
+      "versions": {}
+    };
+  }
+  static get methods() {
+    return {
+      "resizeToFitContent": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "HTMLElement": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
   static get elementRef() { return "host"; }
 }

package/dist/collection/components/biggive-filtered-carousel/biggive-filtered-carousel.css

@@ -31,4 +31,18 @@ a:hover {
   background-color: #000000;
   border-color: #000000;
   color: #FFFFFF;
+}
+.filters .clear {
+  padding: 5px;
+  height: 26px;
+  width: 26px;
+  text-align: center;
+}
+.filters .clear svg {
+  top: 3px;
+  left: 0.5px;
+  position: relative;
+  height: 16px;
+  width: 16px;
+  transform: rotate(45deg);
 }

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

@@ -30,6 +30,7 @@ export class BiggiveFilteredCarousel {
       var button = document.createElement('span');
       button.innerHTML = filter;
       button.classList.add('button');
+      button.classList.add('apply');
       button.setAttribute('data-filter', filter);
       button.addEventListener('click', e => {
         var _a;
@@ -49,12 +50,32 @@ export class BiggiveFilteredCarousel {
             item.classList.add('hidden');
           }
         });
-        carousel.setAttribute('space-below', '0');
-        carousel.setAttribute('space-below', '1');
+        carousel.resizeToFitContent();
       });
       filterWrap.appendChild(button);
     });
-    carousel.setAttribute('space-below', '0');
+    var clear = document.createElement('span');
+    clear.innerHTML =
+      '<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-color="1" stroke="#000000" d="M11 11v-11h1v11h11v1h-11v11h-1v-11h-11v-1h11z" /></svg>';
+    clear.classList.add('button');
+    clear.classList.add('clear');
+    clear.addEventListener('click', () => {
+      filterWrap.querySelectorAll('.apply').forEach(button => {
+        button.classList.remove('active');
+      });
+      this.children.forEach(item => {
+        item.classList.remove('hidden');
+      });
+      carousel.resizeToFitContent();
+    });
+    filterWrap.appendChild(clear);
+    /*
+    Check added to confirm that carousel variable is set with a valid carousel. Ommiting this check fails the npm test - although works fine at runtime in browser.
+    @todo Pass a null fn in the test so it passes without this workaround?
+    */
+    if (typeof carousel.resizeToFitContent === 'function') {
+      carousel.resizeToFitContent();
+    }
   }
   render() {
     return (h("div", { class: 'container space-below-' + this.spaceBelow }, h("div", { class: "filters" }), h("biggive-carousel", { "space-below": "1", "column-count": this.columnCount, "button-background-colour": this.buttonBackgroundColour, "button-icon-colour": this.buttonIconColour })));

package/dist/collection/components/biggive-form-field-select/biggive-form-field-select.css

@@ -76,7 +76,7 @@ a:hover {
   position: relative;
   text-align: left;
 }
-.dropdown .sleeve {
+.dropdown.select-style-bordered .sleeve {
   font-size: 17px;
   line-height: 24px;
   padding: 1px;
@@ -84,7 +84,7 @@ a:hover {
   background-color: #2C089B;
   clip-path: polygon(0% 0%, 0% 0%, calc(100% - 15px) 0%, 100% 15px, 100% 100%, 100% 100%, 0 100%, 0 100%);
 }
-.dropdown .sleeve span.placeholder {
+.dropdown.select-style-bordered .sleeve span.placeholder {
   background-color: #FFFFFF;
   color: #2C089B;
   display: block;
@@ -93,7 +93,35 @@ a:hover {
   cursor: pointer;
   clip-path: polygon(0% 0%, 0% 0%, calc(100% - 14px) 0%, 100% 14px, 100% 100%, 100% 100%, 0 100%, 0 100%);
 }
-.dropdown .sleeve span.placeholder:after {
+.dropdown.select-style-bordered .sleeve span.placeholder:after {
+  content: "";
+  display: block;
+  position: absolute;
+  right: 20px;
+  top: 18px;
+  width: 10px;
+  height: 10px;
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI3IiB2aWV3Qm94PSIwIDAgOSA3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNS4yMzcxNiA2LjYyNDkzQzQuOTAzMjMgNy4xMjUwMiA0LjA5NyA3LjEyNTAyIDMuNzYzMDggNi42MjQ5M0wwLjEyMzg2OCAxLjE3MDYzQy0wLjIxOTk0IDAuNjU1NDU5IDAuMTkyNjMgMS44MzcxZS0wNyAwLjg2MDkwOCAyLjQyMTMyZS0wN0w4LjEzOTMzIDguNzg0MzJlLTA3QzguODA3MTggOS4zNjgxN2UtMDcgOS4yMTk3NSAwLjY1NTQ1OSA4Ljg3NjM3IDEuMTcwNjNMNS4yMzcxNiA2LjYyNDkzWiIgZmlsbD0iIzJDMDg5QiIvPgo8L3N2Zz4K");
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center center;
+}
+.dropdown.select-style-underlined .sleeve {
+  font-size: 17px;
+  line-height: 24px;
+  padding: 1px;
+  position: relative;
+  border-bottom: 1px solid #2C089B;
+}
+.dropdown.select-style-underlined .sleeve span.placeholder {
+  background-color: #FFFFFF;
+  color: #2C089B;
+  display: block;
+  position: relative;
+  padding: 10px 80px 10px 10px;
+  cursor: pointer;
+}
+.dropdown.select-style-underlined .sleeve span.placeholder:after {
   content: "";
   display: block;
   position: absolute;

package/dist/collection/components/biggive-form-field-select/biggive-form-field-select.js

@@ -3,6 +3,7 @@ export class BiggiveFormFieldSelect {
   constructor() {
     this.selectedValue = undefined;
     this.selectedLabel = undefined;
+    this.selectStyle = 'bordered';
     this.spaceBelow = 0;
     this.placeholder = undefined;
   }
@@ -31,7 +32,7 @@ export class BiggiveFormFieldSelect {
     }
   }
   render() {
-    return (h("div", { class: 'dropdown space-below-' + this.spaceBelow }, h("div", { class: "sleeve", onClick: this.toggleFocus, onMouseLeave: this.toggleFocus }, h("span", { class: "placeholder" }, this.selectedLabel === null || this.selectedLabel === undefined ? this.placeholder : this.selectedLabel)), h("div", { class: "options" }, h("slot", null))));
+    return (h("div", { class: 'dropdown space-below-' + this.spaceBelow + ' select-style-' + this.selectStyle }, h("div", { class: "sleeve", onClick: this.toggleFocus, onMouseLeave: this.toggleFocus }, h("span", { class: "placeholder" }, this.selectedLabel === null || this.selectedLabel === undefined ? this.placeholder : this.selectedLabel)), h("div", { class: "options" }, h("slot", null))));
   }
   static get is() { return "biggive-form-field-select"; }
   static get encapsulation() { return "shadow"; }
@@ -81,6 +82,24 @@ export class BiggiveFormFieldSelect {
         "attribute": "selected-label",
         "reflect": false
       },
+      "selectStyle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'bordered' | 'underlined'",
+          "resolved": "\"bordered\" | \"underlined\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "select-style",
+        "reflect": false,
+        "defaultValue": "'bordered'"
+      },
       "spaceBelow": {
         "type": "number",
         "mutable": false,

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

@@ -8,26 +8,27 @@ export class BiggiveGenericIcon {
     this.icon = undefined;
     this.url = undefined;
   }
-  getIcon() {
-    let icon;
+  getIconDefinition() {
+    let iconDefinition;
     if (this.iconGroup == 'beneficiary') {
-      icon = FontAwesomeIconsService.getBeneficiaryIcon(this.icon);
+      iconDefinition = FontAwesomeIconsService.getBeneficiaryIcon(this.icon);
     }
     else if (this.iconGroup == 'misc') {
-      icon = FontAwesomeIconsService.getMiscIcon(this.icon);
+      iconDefinition = FontAwesomeIconsService.getMiscIcon(this.icon);
     }
     else if (this.iconGroup == 'social') {
-      icon = FontAwesomeIconsService.getSocialIcon(this.icon);
+      iconDefinition = FontAwesomeIconsService.getSocialIcon(this.icon);
     }
     else if (this.iconGroup == 'category') {
-      icon = FontAwesomeIconsService.getCategoryIcon(this.icon);
+      iconDefinition = FontAwesomeIconsService.getCategoryIcon(this.icon);
     }
-    return icon;
+    return iconDefinition;
   }
   render() {
+    const iconDefinition = this.getIconDefinition();
     return (
     // Note: the icon name prop is set as a css class too for any styling specific to certain icons
-    h("div", { class: 'generic-icon-item background-colour-' + this.backgroundColour + ' ' + this.icon }, h("a", { href: this.url }, this.getIcon() ? (h("svg", { width: this.getIcon().icon[0], height: this.getIcon().icon[1], xmlns: "http://www.w3.org/2000/svg", class: 'fill-' + this.iconColour, viewBox: '0 0 ' + this.getIcon().icon[0] + ' ' + this.getIcon().icon[1] }, h("path", { d: this.getIcon().icon[4].toString() }))) : null)));
+    h("div", { class: 'generic-icon-item background-colour-' + this.backgroundColour + ' ' + this.icon }, h("a", { href: this.url }, iconDefinition ? (h("svg", { width: iconDefinition.icon[0], height: iconDefinition.icon[1], xmlns: "http://www.w3.org/2000/svg", class: 'fill-' + this.iconColour, viewBox: '0 0 ' + iconDefinition.icon[0] + ' ' + iconDefinition.icon[1] }, h("path", { d: iconDefinition.icon[4].toString() }))) : null)));
   }
   static get is() { return "biggive-generic-icon"; }
   static get originalStyleUrls() {

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

@@ -257,6 +257,48 @@ a:hover {
   width: calc(16.6666666667% - 50px);
 }
 
+.column-count-3.column-gap-1:after {
+  content: "";
+  display: flex;
+  flex-direction: column;
+  width: calc(33.3333333333% - 3.3333333333px);
+}
+
+.column-count-3.column-gap-2:after {
+  content: "";
+  display: flex;
+  flex-direction: column;
+  width: calc(33.3333333333% - 6.6666666667px);
+}
+
+.column-count-3.column-gap-3:after {
+  content: "";
+  display: flex;
+  flex-direction: column;
+  width: calc(33.3333333333% - 10px);
+}
+
+.column-count-3.column-gap-4:after {
+  content: "";
+  display: flex;
+  flex-direction: column;
+  width: calc(33.3333333333% - 20px);
+}
+
+.column-count-3.column-gap-5:after {
+  content: "";
+  display: flex;
+  flex-direction: column;
+  width: calc(33.3333333333% - 30px);
+}
+
+.column-count-3.column-gap-6:after {
+  content: "";
+  display: flex;
+  flex-direction: column;
+  width: calc(33.3333333333% - 40px);
+}
+
 @media screen and (max-width: 768px) {
   .column-count-2 ::slotted(*),
 .column-count-3 ::slotted(*),

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

@@ -339,6 +339,11 @@ a:hover {
   box-sizing: border-box;
 }
 .container .popup .header .close-link .svg-wrap svg {
+  display: inline-block;
+  top: -1.5px;
+  position: relative;
+  stroke-width: 1;
+  stroke: #000000;
   height: 15px;
   width: 15px;
   transform: rotate(45deg);

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

@@ -25,7 +25,7 @@ export class BiggiveSheet {
     history.pushState('', document.title, window.location.pathname);
   }
   render() {
-    return (h("div", { class: 'container' }, h("div", { class: "background" }), h("div", { class: 'popup background-colour-' + this.backgroundColour + ' text-colour-' + this.textColour }, h("div", { class: "header" }, h("div", { class: "back-link", onClick: () => this.closeSheet() }, h("span", { class: 'svg-wrap colour-' + this.textColour }, h("svg", { width: "33", height: "16", viewBox: "0 0 33 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M0.292892 7.29289C-0.0976295 7.68342 -0.0976295 8.31658 0.292892 8.70711L6.65685 15.0711C7.04738 15.4616 7.68054 15.4616 8.07107 15.0711C8.46159 14.6805 8.46159 14.0474 8.07107 13.6569L2.41421 8L8.07107 2.34315C8.46159 1.95262 8.46159 1.31946 8.07107 0.928932C7.68054 0.538408 7.04738 0.538408 6.65685 0.928932L0.292892 7.29289ZM33 7L1 7V9L33 9V7Z", fill: "black" }))), "Back"), h("div", { class: "close-link", onClick: () => this.closeSheet() }, h("span", { class: "svg-wrap" }, h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M11 11v-11h1v11h11v1h-11v11h-1v-11h-11v-1h11z" }))))), h("div", { class: "content" }, h("slot", null)))));
+    return (h("div", { class: 'container' }, h("div", { class: "background" }), h("div", { class: 'popup background-colour-' + this.backgroundColour + ' text-colour-' + this.textColour }, h("div", { class: "header" }, h("div", { class: "back-link", onClick: this.closeSheet }, h("span", { class: 'svg-wrap colour-' + this.textColour }, h("svg", { width: "33", height: "16", viewBox: "0 0 33 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M0.292892 7.29289C-0.0976295 7.68342 -0.0976295 8.31658 0.292892 8.70711L6.65685 15.0711C7.04738 15.4616 7.68054 15.4616 8.07107 15.0711C8.46159 14.6805 8.46159 14.0474 8.07107 13.6569L2.41421 8L8.07107 2.34315C8.46159 1.95262 8.46159 1.31946 8.07107 0.928932C7.68054 0.538408 7.04738 0.538408 6.65685 0.928932L0.292892 7.29289ZM33 7L1 7V9L33 9V7Z", fill: "black" }))), "Back"), h("div", { class: "close-link", onClick: this.closeSheet }, h("span", { class: "svg-wrap" }, h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M11 11v-11h1v11h11v1h-11v11h-1v-11h-11v-1h11z" }))))), h("div", { class: "content" }, h("slot", null)))));
   }
   static get is() { return "biggive-sheet"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/biggive-tabbed-content/biggive-tabbed-content.css

@@ -198,6 +198,7 @@ a:hover {
   width: calc(33.3% - 20px);
   border-bottom: 3px solid transparent;
   text-align: center;
+  white-space: nowrap;
   cursor: pointer;
 }
 .container .navigation .sleeve ul li.selected {

package/dist/collection/components/biggive-tabbed-content/biggive-tabbed-content.js

@@ -16,7 +16,20 @@ export class BiggiveTabbedContent {
     this.children = Array.from(this.host.children);
   }
   componentDidRender() {
+    var _a, _b, _c, _d;
     this.showTab(0);
+    this.scrollContextTab = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.navigation .sleeve ul li');
+    const sleeveElement = (_b = this.host.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.navigation .sleeve');
+    if (sleeveElement.scrollWidth > sleeveElement.offsetWidth) {
+      (_c = this.host.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelectorAll('.navigation .button').forEach(function (button) {
+        button.style.display = 'block';
+      });
+    }
+    else {
+      (_d = this.host.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelectorAll('.navigation .button').forEach(function (button) {
+        button.style.display = 'none';
+      });
+    }
   }
   /*
    * Shows the i'th tab, counting from zero. Does nothing if i out of range.
@@ -103,7 +116,7 @@ export class BiggiveTabbedContent {
         ' button-background-colour-' +
         this.buttonBackgroundColour +
         ' button-icon-colour-' +
-        this.buttonIconColour }, h("div", { class: "navigation" }, h("div", { class: "button prev", onClick: () => this.clickPrevHandler(), title: "Previous" }, h("svg", { width: "9", height: "16", viewBox: "0 0 9 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M8.29311 14.5703L1.73926 8.01646L8.29311 1.46261", stroke: "#000000", "stroke-width": "2" }))), h("div", { class: "sleeve" }, h("ul", null, this.children.map(child => (h("li", { onClick: event => this.clickTabHandler(event) }, child.tabTitle))))), h("div", { class: "button next", onClick: () => this.clickNextHandler(), title: "Next" }, h("svg", { width: "9", height: "16", viewBox: "0 0 9 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M0.739117 1.46094L7.29297 8.01479L0.739118 14.5686", stroke: "#000000", "stroke-width": "2" })))), h("slot", null)));
+        this.buttonIconColour }, h("div", { class: "navigation" }, h("div", { class: "button prev", onClick: this.clickPrevHandler, title: "Previous" }, h("svg", { width: "9", height: "16", viewBox: "0 0 9 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M8.29311 14.5703L1.73926 8.01646L8.29311 1.46261", stroke: "#000000", "stroke-width": "2" }))), h("div", { class: "sleeve" }, h("ul", null, this.children.map(child => (h("li", { onClick: this.clickTabHandler }, child.tabTitle))))), h("div", { class: "button next", onClick: this.clickNextHandler, title: "Next" }, h("svg", { width: "9", height: "16", viewBox: "0 0 9 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M0.739117 1.46094L7.29297 8.01479L0.739118 14.5686", stroke: "#000000", "stroke-width": "2" })))), h("slot", null)));
   }
   static get is() { return "biggive-tabbed-content"; }
   static get encapsulation() { return "shadow"; }