@biggive/components 202401301136.0.0 → 202401301139.0.0

package/dist/components/biggive-call-to-action.js

@@ -31,7 +31,7 @@ const BiggiveCallToAction$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveCall
         this.secondaryButtonColourScheme = 'primary';
     }
     render() {
-        return (h("div", { class: 'container text-colour-' + this.defaultTextColour + ' space-above-' + this.spaceAbove + ' space-below-' + this.spaceBelow }, h("div", { class: "sleeve" }, h("div", { class: "content-wrap" }, h("div", { class: 'slug heading-' + this.slugSize + ' text-colour-' + this.slugColour }, this.slug), h("h2", { class: 'title heading-' + this.mainTitleSize + ' text-colour-' + this.mainTitleColour }, this.mainTitle), h("div", { class: 'slug heading-' + this.subtitleSize + ' text-colour-' + this.subtitleColour }, this.subtitle), h("div", { class: 'teaser text-colour-' + this.teaserColour }, this.teaser), this.primaryButtonLabel != null && this.primaryButtonUrl != null ? (h("div", { class: "button-wrap" }, h("biggive-button", { "colour-scheme": this.primaryButtonColourScheme, url: this.primaryButtonUrl, label: this.primaryButtonLabel }))) : null, this.secondaryButtonLabel != null && this.secondaryButtonUrl != null ? (h("div", { class: "button-wrap" }, h("biggive-button", { "colour-scheme": this.secondaryButtonColourScheme, url: this.secondaryButtonUrl, label: this.secondaryButtonLabel }))) : null))));
+        return (h("div", { key: 'e60e86429ceb4d0cf805d43a2ef3698097e88f68', class: 'container text-colour-' + this.defaultTextColour + ' space-above-' + this.spaceAbove + ' space-below-' + this.spaceBelow }, h("div", { key: '91e0334b2185a214d5eb46b10f2879b0a5c22199', class: "sleeve" }, h("div", { key: 'd631b0c1750d6e8c54d15223d67f4e8389b73496', class: "content-wrap" }, h("div", { key: 'd04b5f1c4b424cf8105d84f5883ef4191ce98bb7', class: 'slug heading-' + this.slugSize + ' text-colour-' + this.slugColour }, this.slug), h("h2", { key: '3fe4d64ae4236ee956082b2552d34ece60e4bb68', class: 'title heading-' + this.mainTitleSize + ' text-colour-' + this.mainTitleColour }, this.mainTitle), h("div", { key: '731f531a5d78ed5f939e7ca4d0785239fe966935', class: 'slug heading-' + this.subtitleSize + ' text-colour-' + this.subtitleColour }, this.subtitle), h("div", { key: 'eea5215a144aa6364411c631d8db59ddc45f6b45', class: 'teaser text-colour-' + this.teaserColour }, this.teaser), this.primaryButtonLabel != null && this.primaryButtonUrl != null ? (h("div", { class: "button-wrap" }, h("biggive-button", { "colour-scheme": this.primaryButtonColourScheme, url: this.primaryButtonUrl, label: this.primaryButtonLabel }))) : null, this.secondaryButtonLabel != null && this.secondaryButtonUrl != null ? (h("div", { class: "button-wrap" }, h("biggive-button", { "colour-scheme": this.secondaryButtonColourScheme, url: this.secondaryButtonUrl, label: this.secondaryButtonLabel }))) : null))));
     }
     static get style() { return BiggiveCallToActionStyle0; }
 }, [1, "biggive-call-to-action", {

package/dist/components/biggive-call-to-action.js.map

@@ -1 +1 @@
-{"file":"biggive-call-to-action.js","mappings":";;;AAAA,MAAM,sBAAsB,GAAG,khGAAkhG,CAAC;AACljG,kCAAe,sBAAsB;;MCMxBA,qBAAmB;;;;;0BAID,CAAC;0BAID,CAAC;iCAIM,SAAS;wBAKlB,CAAC;0BAIC,EAAE;;+BASG,EAAE;6BAIJ,CAAC;;4BASF,CAAC;8BAIC,EAAE;;4BAUJ,EAAE;;;;yCAoBW,SAAS;;;2CAeP,SAAS;;IAEvD,MAAM;QACJ,QACE,WAAK,KAAK,EAAE,wBAAwB,GAAG,IAAI,CAAC,iBAAiB,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,IACnI,WAAK,KAAK,EAAC,QAAQ,IACjB,WAAK,KAAK,EAAC,cAAc,IACvB,WAAK,KAAK,EAAE,eAAe,GAAG,IAAI,CAAC,QAAQ,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,IAAG,IAAI,CAAC,IAAI,CAAO,EAClG,UAAI,KAAK,EAAE,gBAAgB,GAAG,IAAI,CAAC,aAAa,GAAG,eAAe,GAAG,IAAI,CAAC,eAAe,IAAG,IAAI,CAAC,SAAS,CAAM,EAChH,WAAK,KAAK,EAAE,eAAe,GAAG,IAAI,CAAC,YAAY,GAAG,eAAe,GAAG,IAAI,CAAC,cAAc,IAAG,IAAI,CAAC,QAAQ,CAAO,EAC9G,WAAK,KAAK,EAAE,qBAAqB,GAAG,IAAI,CAAC,YAAY,IAAG,IAAI,CAAC,MAAM,CAAO,EACzE,IAAI,CAAC,kBAAkB,IAAI,IAAI,IAAI,IAAI,CAAC,gBAAgB,IAAI,IAAI,IAC/D,WAAK,KAAK,EAAC,aAAa,IACtB,uCAA+B,IAAI,CAAC,yBAAyB,EAAE,GAAG,EAAE,IAAI,CAAC,gBAAgB,EAAE,KAAK,EAAE,IAAI,CAAC,kBAAkB,GAAmB,CACxI,IACJ,IAAI,EACP,IAAI,CAAC,oBAAoB,IAAI,IAAI,IAAI,IAAI,CAAC,kBAAkB,IAAI,IAAI,IACnE,WAAK,KAAK,EAAC,aAAa,IACtB,uCAA+B,IAAI,CAAC,2BAA2B,EAAE,GAAG,EAAE,IAAI,CAAC,kBAAkB,EAAE,KAAK,EAAE,IAAI,CAAC,oBAAoB,GAAmB,CAC9I,IACJ,IAAI,CACJ,CACF,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveCallToAction"],"sources":["src/components/biggive-call-to-action/biggive-call-to-action.scss?tag=biggive-call-to-action&encapsulation=shadow","src/components/biggive-call-to-action/biggive-call-to-action.tsx"],"sourcesContent":["@include headings();\n@include spacers();\n@include text-colours();\n\n:host {\n  display: contents;\n  @include standard-font();\n}\n\n.container {\n  @include section-container();\n  position: relative;\n  text-align: center;\n}\n\n\n.content-wrap {\n  .slug {\n    margin: 0;\n    padding: 0;\n  }\n  h2 {\n    margin: 0 0 $spacer-1 0;\n    padding: 0;\n  }\n  .subtitle {\n    margin: 0 0 $spacer-1 0;\n    padding: 0;\n  }\n  .teaser {\n    margin: $spacer-3 auto $spacer-3 auto;\n    max-width: 400px;\n    padding: 0;\n  }\n}\n\n@media screen and (max-width: $screen-mobile-max) {\n  .content-wrap {\n    text-align: right\n  }\n  h2 {\n    padding: 40px 0;\n  }\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-call-to-action',\n  styleUrl: 'biggive-call-to-action.scss',\n  shadow: true,\n})\nexport class BiggiveCallToAction {\n  /**\n   * Space above component\n   */\n  @Prop() spaceAbove: number = 0;\n  /**\n   * Space below component\n   */\n  @Prop() spaceBelow: number = 0;\n  /**\n   * Default text colour\n   */\n  @Prop() defaultTextColour: string = 'primary';\n\n  /**\n   * Slug size\n   */\n  @Prop() slugSize: number = 4;\n  /**\n   * Slug colour\n   */\n  @Prop() slugColour: string = '';\n  /**\n   * Slug\n   */\n  @Prop() slug: string;\n\n  /**\n   * Main title colour\n   */\n  @Prop() mainTitleColour: string = '';\n  /**\n   * Main title size\n   */\n  @Prop() mainTitleSize: number = 2;\n  /**\n   * Main title\n   */\n  @Prop() mainTitle: string;\n\n  /**\n   * Main title size\n   */\n  @Prop() subtitleSize: number = 4;\n  /**\n   * Subtitle colour\n   */\n  @Prop() subtitleColour: string = '';\n\n  /**\n   * Subtitle\n   */\n  @Prop() subtitle: string;\n\n  /**\n   * Teaser colour\n   */\n  @Prop() teaserColour: string = '';\n\n  /**\n   * Teaser\n   */\n  @Prop() teaser: string;\n\n  /**\n   * Primary button Url\n   */\n  @Prop() primaryButtonUrl: string;\n\n  /**\n   * Primary button Label\n   */\n  @Prop() primaryButtonLabel: string;\n\n  /**\n   * Primary button Colour Scheme\n   */\n  @Prop() primaryButtonColourScheme: string = 'primary';\n\n  /**\n   * Secondary button Url\n   */\n  @Prop() secondaryButtonUrl: string;\n\n  /**\n   * Secondary button Label\n   */\n  @Prop() secondaryButtonLabel: string;\n\n  /**\n   * Secondary button Colour Scheme\n   */\n  @Prop() secondaryButtonColourScheme: string = 'primary';\n\n  render() {\n    return (\n      <div class={'container text-colour-' + this.defaultTextColour + ' space-above-' + this.spaceAbove + ' space-below-' + this.spaceBelow}>\n        <div class=\"sleeve\">\n          <div class=\"content-wrap\">\n            <div class={'slug heading-' + this.slugSize + ' text-colour-' + this.slugColour}>{this.slug}</div>\n            <h2 class={'title heading-' + this.mainTitleSize + ' text-colour-' + this.mainTitleColour}>{this.mainTitle}</h2>\n            <div class={'slug heading-' + this.subtitleSize + ' text-colour-' + this.subtitleColour}>{this.subtitle}</div>\n            <div class={'teaser text-colour-' + this.teaserColour}>{this.teaser}</div>\n            {this.primaryButtonLabel != null && this.primaryButtonUrl != null ? (\n              <div class=\"button-wrap\">\n                <biggive-button colour-scheme={this.primaryButtonColourScheme} url={this.primaryButtonUrl} label={this.primaryButtonLabel}></biggive-button>\n              </div>\n            ) : null}\n            {this.secondaryButtonLabel != null && this.secondaryButtonUrl != null ? (\n              <div class=\"button-wrap\">\n                <biggive-button colour-scheme={this.secondaryButtonColourScheme} url={this.secondaryButtonUrl} label={this.secondaryButtonLabel}></biggive-button>\n              </div>\n            ) : null}\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"biggive-call-to-action.js","mappings":";;;AAAA,MAAM,sBAAsB,GAAG,khGAAkhG,CAAC;AACljG,kCAAe,sBAAsB;;MCMxBA,qBAAmB;;;;;0BAID,CAAC;0BAID,CAAC;iCAIM,SAAS;wBAKlB,CAAC;0BAIC,EAAE;;+BASG,EAAE;6BAIJ,CAAC;;4BASF,CAAC;8BAIC,EAAE;;4BAUJ,EAAE;;;;yCAoBW,SAAS;;;2CAeP,SAAS;;IAEvD,MAAM;QACJ,QACE,4DAAK,KAAK,EAAE,wBAAwB,GAAG,IAAI,CAAC,iBAAiB,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,IACnI,4DAAK,KAAK,EAAC,QAAQ,IACjB,4DAAK,KAAK,EAAC,cAAc,IACvB,4DAAK,KAAK,EAAE,eAAe,GAAG,IAAI,CAAC,QAAQ,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,IAAG,IAAI,CAAC,IAAI,CAAO,EAClG,2DAAI,KAAK,EAAE,gBAAgB,GAAG,IAAI,CAAC,aAAa,GAAG,eAAe,GAAG,IAAI,CAAC,eAAe,IAAG,IAAI,CAAC,SAAS,CAAM,EAChH,4DAAK,KAAK,EAAE,eAAe,GAAG,IAAI,CAAC,YAAY,GAAG,eAAe,GAAG,IAAI,CAAC,cAAc,IAAG,IAAI,CAAC,QAAQ,CAAO,EAC9G,4DAAK,KAAK,EAAE,qBAAqB,GAAG,IAAI,CAAC,YAAY,IAAG,IAAI,CAAC,MAAM,CAAO,EACzE,IAAI,CAAC,kBAAkB,IAAI,IAAI,IAAI,IAAI,CAAC,gBAAgB,IAAI,IAAI,IAC/D,WAAK,KAAK,EAAC,aAAa,IACtB,uCAA+B,IAAI,CAAC,yBAAyB,EAAE,GAAG,EAAE,IAAI,CAAC,gBAAgB,EAAE,KAAK,EAAE,IAAI,CAAC,kBAAkB,GAAmB,CACxI,IACJ,IAAI,EACP,IAAI,CAAC,oBAAoB,IAAI,IAAI,IAAI,IAAI,CAAC,kBAAkB,IAAI,IAAI,IACnE,WAAK,KAAK,EAAC,aAAa,IACtB,uCAA+B,IAAI,CAAC,2BAA2B,EAAE,GAAG,EAAE,IAAI,CAAC,kBAAkB,EAAE,KAAK,EAAE,IAAI,CAAC,oBAAoB,GAAmB,CAC9I,IACJ,IAAI,CACJ,CACF,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveCallToAction"],"sources":["src/components/biggive-call-to-action/biggive-call-to-action.scss?tag=biggive-call-to-action&encapsulation=shadow","src/components/biggive-call-to-action/biggive-call-to-action.tsx"],"sourcesContent":["@include headings();\n@include spacers();\n@include text-colours();\n\n:host {\n  display: contents;\n  @include standard-font();\n}\n\n.container {\n  @include section-container();\n  position: relative;\n  text-align: center;\n}\n\n\n.content-wrap {\n  .slug {\n    margin: 0;\n    padding: 0;\n  }\n  h2 {\n    margin: 0 0 $spacer-1 0;\n    padding: 0;\n  }\n  .subtitle {\n    margin: 0 0 $spacer-1 0;\n    padding: 0;\n  }\n  .teaser {\n    margin: $spacer-3 auto $spacer-3 auto;\n    max-width: 400px;\n    padding: 0;\n  }\n}\n\n@media screen and (max-width: $screen-mobile-max) {\n  .content-wrap {\n    text-align: right\n  }\n  h2 {\n    padding: 40px 0;\n  }\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-call-to-action',\n  styleUrl: 'biggive-call-to-action.scss',\n  shadow: true,\n})\nexport class BiggiveCallToAction {\n  /**\n   * Space above component\n   */\n  @Prop() spaceAbove: number = 0;\n  /**\n   * Space below component\n   */\n  @Prop() spaceBelow: number = 0;\n  /**\n   * Default text colour\n   */\n  @Prop() defaultTextColour: string = 'primary';\n\n  /**\n   * Slug size\n   */\n  @Prop() slugSize: number = 4;\n  /**\n   * Slug colour\n   */\n  @Prop() slugColour: string = '';\n  /**\n   * Slug\n   */\n  @Prop() slug: string;\n\n  /**\n   * Main title colour\n   */\n  @Prop() mainTitleColour: string = '';\n  /**\n   * Main title size\n   */\n  @Prop() mainTitleSize: number = 2;\n  /**\n   * Main title\n   */\n  @Prop() mainTitle: string;\n\n  /**\n   * Main title size\n   */\n  @Prop() subtitleSize: number = 4;\n  /**\n   * Subtitle colour\n   */\n  @Prop() subtitleColour: string = '';\n\n  /**\n   * Subtitle\n   */\n  @Prop() subtitle: string;\n\n  /**\n   * Teaser colour\n   */\n  @Prop() teaserColour: string = '';\n\n  /**\n   * Teaser\n   */\n  @Prop() teaser: string;\n\n  /**\n   * Primary button Url\n   */\n  @Prop() primaryButtonUrl: string;\n\n  /**\n   * Primary button Label\n   */\n  @Prop() primaryButtonLabel: string;\n\n  /**\n   * Primary button Colour Scheme\n   */\n  @Prop() primaryButtonColourScheme: string = 'primary';\n\n  /**\n   * Secondary button Url\n   */\n  @Prop() secondaryButtonUrl: string;\n\n  /**\n   * Secondary button Label\n   */\n  @Prop() secondaryButtonLabel: string;\n\n  /**\n   * Secondary button Colour Scheme\n   */\n  @Prop() secondaryButtonColourScheme: string = 'primary';\n\n  render() {\n    return (\n      <div class={'container text-colour-' + this.defaultTextColour + ' space-above-' + this.spaceAbove + ' space-below-' + this.spaceBelow}>\n        <div class=\"sleeve\">\n          <div class=\"content-wrap\">\n            <div class={'slug heading-' + this.slugSize + ' text-colour-' + this.slugColour}>{this.slug}</div>\n            <h2 class={'title heading-' + this.mainTitleSize + ' text-colour-' + this.mainTitleColour}>{this.mainTitle}</h2>\n            <div class={'slug heading-' + this.subtitleSize + ' text-colour-' + this.subtitleColour}>{this.subtitle}</div>\n            <div class={'teaser text-colour-' + this.teaserColour}>{this.teaser}</div>\n            {this.primaryButtonLabel != null && this.primaryButtonUrl != null ? (\n              <div class=\"button-wrap\">\n                <biggive-button colour-scheme={this.primaryButtonColourScheme} url={this.primaryButtonUrl} label={this.primaryButtonLabel}></biggive-button>\n              </div>\n            ) : null}\n            {this.secondaryButtonLabel != null && this.secondaryButtonUrl != null ? (\n              <div class=\"button-wrap\">\n                <biggive-button colour-scheme={this.secondaryButtonColourScheme} url={this.secondaryButtonUrl} label={this.secondaryButtonLabel}></biggive-button>\n              </div>\n            ) : null}\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

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

@@ -180,10 +180,10 @@ const BiggiveCampaignCardFilterGrid$1 = /*@__PURE__*/ proxyCustomElement(class B
     }
     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: "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("div", { class: "select-wrapper-1" }, h("biggive-form-field-select", { backgroundColour: "white", prompt: "Category", placeholder: this.categoriesPlaceHolderText, selectedLabel: this.selectedFilterCategory, selectedValue: this.selectedFilterCategory, options: this.optionsToArray(this.categoryOptions || []), selectionChanged: this.categoryFilterSelectionChanged, id: "categories", "space-below": "2" })), h("div", { class: "select-wrapper-2" }, h("biggive-form-field-select", { backgroundColour: "white", prompt: "Beneficiary", placeholder: this.beneficiariesPlaceHolderText, selectedLabel: this.selectedFilterBeneficiary, selectedValue: this.selectedFilterBeneficiary, options: this.optionsToArray(this.beneficiaryOptions || []), selectionChanged: this.beneficiarySelectionChanged, id: "beneficiaries", "space-below": "2" })), h("div", { class: "select-wrapper-3" }, h("biggive-form-field-select", { backgroundColour: "white", prompt: "Location", placeholder: this.locationsPlaceHolderText, selectedLabel: this.selectedFilterLocation, selectedValue: this.selectedFilterLocation, options: this.optionsToArray(this.locationOptions || []), selectionChanged: this.locationSelectionChanged, id: "locations", "space-below": "2" })), h("div", { class: "select-wrapper-4" }, h("biggive-form-field-select", { backgroundColour: "white", prompt: "Funding", placeholder: this.fundingPlaceHolderText, selectedLabel: this.selectedFilterFunding, selectedValue: this.selectedFilterFunding, options: this.optionsToArray(this.fundingOptions || []), selectionChanged: this.fundingSelectionChanged, id: "funding", "space-below": "2" })), h("div", { class: "align-right" }, h("biggive-button", { label: "Apply filters", onClick: this.handleApplyFilterButtonClick })))), h("div", { class: "sort-wrap" }, h("biggive-form-field-select", { options: [
+        return (h("div", { key: 'a350ebc1ee5ca6ac46bd86282e17bac979509ad6', class: 'container space-below-' + this.spaceBelow }, h("div", { key: 'a4383e299d558fa49603652d72d8ea64e725ec5c', class: "sleeve" }, h("div", { key: '2e4604e9ed71877dd3d50034f46275b01e51e429', class: "search-wrap" }, h("h4", { key: 'e48c6c83d83e53414993792f0ee355f04ff89ca1' }, this.intro), h("div", { key: 'ab439d6d61efda938234ee78ef7a70177b529dd9', class: "field-wrap" }, h("div", { key: 'fa4c6bb7b1edcebd14414ae22b9b82356f75eb87', class: "input-wrap" }, h("svg", { key: '9d7729d070462356c53f20e4e2ba263af82d5862', xmlns: "http://www.w3.org/2000/svg", class: "icon", viewBox: "0 0 512 512" }, h("path", { key: '0e5789bb4a1db2a3df0cd20a131d5e59d838599a', d: faMagnifyingGlass.icon[4].toString() })), h("input", { key: '51eec0d43126625deb91b7e10e41ea998c86343c', 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", { key: '56bb6438f976e88bb3ceeeba4047fd43cea4c610', onClick: this.handleSearchButtonPressed, label: this.buttonText }))), h("div", { key: 'b579fbc0101dd50bf579bbfc8cdb5de5e5037db0', class: "sort-filter-wrap" }, h("div", { key: 'fd39b0dbffd93d6372669ec1c87a7bc4910752b3', class: "filter-wrap" }, h("biggive-button", { key: '44b08294f5c6896e9d46809bb7853797a8373ec6', class: "filter", colourScheme: "primary", onClick: this.handleFilterButtonClick, label: "Filter", fullWidth: true, "space-below": "0" }), h("biggive-popup", { key: 'f2dcb9e7748791976925636150a54ee53113e410', id: "filter-popup" }, h("h4", { key: '8272e2b3509fa6646450d452d7715d6ccd56baaa', class: "space-above-0 space-below-3 text-colour-primary" }, "Filters"), h("div", { key: '0ee3ef2e80c93a93b4d0252fd4d3fd90f45693c4', class: "select-wrapper-1" }, h("biggive-form-field-select", { key: '1bfdbb00fc46c5eee0fd64761d76f9905453f27a', backgroundColour: "white", prompt: "Category", placeholder: this.categoriesPlaceHolderText, selectedLabel: this.selectedFilterCategory, selectedValue: this.selectedFilterCategory, options: this.optionsToArray(this.categoryOptions || []), selectionChanged: this.categoryFilterSelectionChanged, id: "categories", "space-below": "2" })), h("div", { key: '4cd93a981100d234b09fc0d268a365ff9b12ddac', class: "select-wrapper-2" }, h("biggive-form-field-select", { key: 'fed6335919bef115cd3baf092fb3862935bdeb25', backgroundColour: "white", prompt: "Beneficiary", placeholder: this.beneficiariesPlaceHolderText, selectedLabel: this.selectedFilterBeneficiary, selectedValue: this.selectedFilterBeneficiary, options: this.optionsToArray(this.beneficiaryOptions || []), selectionChanged: this.beneficiarySelectionChanged, id: "beneficiaries", "space-below": "2" })), h("div", { key: '8dd57b330fc04fad24fbb34114198cba8fe1c5e4', class: "select-wrapper-3" }, h("biggive-form-field-select", { key: '284f95dd5f5890572f0385d61d1d117b9a0e194c', backgroundColour: "white", prompt: "Location", placeholder: this.locationsPlaceHolderText, selectedLabel: this.selectedFilterLocation, selectedValue: this.selectedFilterLocation, options: this.optionsToArray(this.locationOptions || []), selectionChanged: this.locationSelectionChanged, id: "locations", "space-below": "2" })), h("div", { key: '1ad854d19d151b4f1729ddf624668f3b93199d6e', class: "select-wrapper-4" }, h("biggive-form-field-select", { key: 'f444bb17e37560723049a1bd2bf6cfb459be3258', backgroundColour: "white", prompt: "Funding", placeholder: this.fundingPlaceHolderText, selectedLabel: this.selectedFilterFunding, selectedValue: this.selectedFilterFunding, options: this.optionsToArray(this.fundingOptions || []), selectionChanged: this.fundingSelectionChanged, id: "funding", "space-below": "2" })), h("div", { key: 'bac86ef9c2d2af40844764301b9cb4a468281082', class: "align-right" }, h("biggive-button", { key: 'ba7fa078d238fb2e7f2685a98d785d805a4bab46', label: "Apply filters", onClick: this.handleApplyFilterButtonClick })))), h("div", { key: 'bffe3ada7c07f1cbab8562233b5e54ae22b46baf', class: "sort-wrap" }, h("biggive-form-field-select", { key: 'd0cd9537f58de77df880e51c8a93ba1cae077b56', options: [
                 { value: 'amountRaised', label: 'Most raised' },
                 { value: 'matchFundsRemaining', label: 'Match funds remaining' },
-            ], prompt: null, "select-style": "underlined", placeholder: this.sortByPlaceholderText, selectedLabel: this.selectedSortByOption, selectionChanged: this.sortBySelectionChanged, 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" }), (this.searchText || '').length > 0 ? h("biggive-form-field-select-option", { value: "Relevance", label: "Relevance" }) : null))), h("div", { class: "selected-filter-wrap" }, h("div", { class: "selected-filters" }, this.selectedFilterCategory && (h("span", { class: "button", onClick: () => {
+            ], prompt: null, "select-style": "underlined", placeholder: this.sortByPlaceholderText, selectedLabel: this.selectedSortByOption, selectionChanged: this.sortBySelectionChanged, id: "sort-by" }, h("biggive-form-field-select-option", { key: 'c10b4837e1649779d84a12058e50cbb819612b56', value: "amountRaised", label: "Most raised" }), h("biggive-form-field-select-option", { key: 'f763852c725cc9170b92228dc41760eb6e2b26ac', value: "matchFundsRemaining", label: "Match funds remaining" }), (this.searchText || '').length > 0 ? h("biggive-form-field-select-option", { value: "Relevance", label: "Relevance" }) : null))), h("div", { key: 'd328a038936d42996fec5f795eb7184587cfa264', class: "selected-filter-wrap" }, h("div", { key: 'cfc88a3dea4c383d3c4c00c8d7bc9bc85b936b60', class: "selected-filters" }, this.selectedFilterCategory && (h("span", { class: "button", onClick: () => {
                 this.removeFilter('categories');
             } }, this.selectedFilterCategory)), this.selectedFilterBeneficiary && (h("span", { class: "button", onClick: () => {
                 this.removeFilter('beneficiaries');
@@ -191,7 +191,7 @@ const BiggiveCampaignCardFilterGrid$1 = /*@__PURE__*/ proxyCustomElement(class B
                 this.removeFilter('locations');
             } }, this.selectedFilterLocation)), this.selectedFilterFunding && (h("span", { class: "button", onClick: () => {
                 this.removeFilter('funding');
-            } }, this.selectedFilterFunding))), h("div", { class: "clear-all" }, h("a", { onClick: this.handleClearAll }, "Clear all"))), h("div", { class: "campaign-grid" }, h("slot", { name: "campaign-grid" })))));
+            } }, this.selectedFilterFunding))), h("div", { key: 'e739816ea15b344b5296b8fc749187157eb636c1', class: "clear-all" }, h("a", { key: '266d43091edbc0e5bc787f10bc68a218a30976f3', onClick: this.handleClearAll }, "Clear all"))), h("div", { key: '3da7c5784499a276eb9257db7530c641f4829feb', class: "campaign-grid" }, h("slot", { key: '1535a29f17ea02d9a0e439bc89005ae806212a5d', name: "campaign-grid" })))));
     }
     optionsToArray(options) {
         if (typeof options === 'string') {

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

@@ -1 +1 @@
-{"file":"biggive-campaign-card-filter-grid.js","mappings":"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","names":["BiggiveCampaignCardFilterGrid"],"sources":["src/components/biggive-campaign-card-filter-grid/biggive-campaign-card-filter-grid.scss?tag=biggive-campaign-card-filter-grid&encapsulation=shadow","src/components/biggive-campaign-card-filter-grid/biggive-campaign-card-filter-grid.tsx"],"sourcesContent":["@include spacers();\n\n:host {\n  display: content;\n}\n\n// Each select needs a higher z-index than the one below,\n// so that the drop-down part will occlude it.\n.select-wrapper-1, .select-wrapper-2, .select-wrapper-3, .select-wrapper-4 {\n  position: relative;\n  margin-top: 1em;\n}\n.select-wrapper-1 {\n  z-index: 4;\n}\n.select-wrapper-2 {\n  z-index: 3;\n}\n.select-wrapper-3 {\n   z-index: 2;\n }\n.select-wrapper-4 {\n  z-index: 1;\n}\n\n.container {\n  @include standard-font();\n  position: relative;\n  .search-wrap {\n    @include lower-shadow();\n    background-color: $colour-white;\n    padding: $spacer-3 $spacer-4;\n    margin-bottom: $spacer-3;\n    h4 {\n      margin-bottom: $spacer-3;\n    }\n    .field-wrap {\n      @include flex-container-row();\n\n      .input-wrap {\n        @include flex-container-row();\n        padding-bottom: $spacer-1;\n        border-bottom: 1px solid $colour-black;\n        margin-right: $spacer-4;\n        flex-grow: 1;\n        input {\n          border: 0;\n        }\n      }\n      button {\n        padding: 5px 30px;\n      }\n    }\n  }\n}\n.selected-filter-wrap {\n  display: flex;\n  margin-bottom: 30px;\n  padding: 0;\n  .button {\n    cursor: pointer;\n    border-radius: 20px;\n    padding: 5px 50px 5px 20px;\n    margin-right: 15px;\n    background-color: $colour-tertiary-coral;;\n    color: $colour-black;\n    border: 1px solid $colour-tertiary-coral;\n    text-decoration: none;\n    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgMTguNCAxOC40IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxOC40IDE4LjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7c3Ryb2tlOiMwMDAwMDA7fQo8L3N0eWxlPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNOS4yLDguNUwxNywwLjdsMC43LDAuN0w5LjksOS4ybDcuOCw3LjhMMTcsMTcuN0w5LjIsOS45bC03LjgsNy44TDAuNywxN2w3LjgtNy44TDAuNywxLjRsMC43LTAuN0w5LjIsOC41eiIvPgo8L3N2Zz4K);\n    background-repeat: no-repeat;\n    background-position: right 20px center;\n    background-size: 12px auto;\n    &:hover {\n     background-color: $colour-white;\n     color: $colour-black;\n   }\n  }\n  .clear-all {\n    margin-left: auto;\n    a {\n      cursor: pointer;\n      border-radius: 20px;\n      padding: 5px 20px;\n      background-color: $colour-primary-blue;\n      color: $colour-white;\n      border: 1px solid $colour-primary-blue;\n      text-decoration: none;\n      &:hover {\n       background-color: $colour-white;\n       color: $colour-primary-blue;\n     }\n    }\n  }\n}\n\n.sort-filter-wrap {\n  display: flex;\n  justify-content: flex-end;\n  margin-bottom: $spacer-4;\n  padding: 0;\n  text-align: right;\n  .clear-all {\n    cursor: pointer;\n    vertical-align: center;\n    margin-top: auto;\n    margin-bottom: auto;\n  }\n\n    display: flex;\n    .sort-wrap {\n      margin-left: 15px;\n    }\n\n    .filter-wrap {\n      background-color: $colour-grey-background; // temp for testing dropdown\n\n      margin-left: $spacer-3;\n\n      .button.filter {\n        padding-left: 60px;\n        padding-right: 30px;\n\n      .filter-icon {\n        content: '';\n        display: block;\n        position: absolute;\n        left: 25px;\n        top: 17px;\n        width: 13px;\n        height: 13px;\n\n        svg {\n          width: 100%;\n          height: auto;\n          vertical-align: top;\n\n          &:hover {\n            fill: $colour-primary-blue;\n          }\n        }\n      }\n    }\n  }\n}\n\n.icon {\n  @include icon();\n  margin: auto;\n\n  > path {\n    fill: $colour-primary-blue;\n  }\n}\n\n.icon-clear-all {\n  > path {\n    fill: $colour-black;\n  }\n}\n\n@media screen and (max-width: $screen-mobile-small) {\n  .sort-filter-wrap {\n    flex-direction: column-reverse;\n    .sort-wrap {\n      margin-top: 20px;\n      margin-bottom: 20px;\n    }\n  }\n}\n\n@media screen and (max-width: $screen-mobile-x-small) {\n  .sort-filter-wrap {\n    justify-content: space-between;\n    .sort-wrap {\n      margin-left: 0px;\n    }\n    .filter-wrap {\n      margin-left: 3px;\n    }\n  }\n}\n\n.align-right {\n  text-align: right;\n}\n\n.input-text {\n    @include input-text();\n}\n\n.text-colour-primary {\n  color: $colour-primary-blue;\n}\n","import { Component, Element, Event, EventEmitter, h, Prop, State } from '@stencil/core';\nimport { faMagnifyingGlass } from '@fortawesome/pro-solid-svg-icons';\n\n@Component({\n  tag: 'biggive-campaign-card-filter-grid',\n  styleUrl: 'biggive-campaign-card-filter-grid.scss',\n  shadow: true,\n})\nexport class BiggiveCampaignCardFilterGrid {\n  @Element() el: HTMLBiggiveCampaignCardFilterGridElement;\n\n  /**\n   * This event `doSearchAndFilterUpdate` event is emitted and propogates to the parent\n   * component which handles it\n   */\n  @Event({\n    eventName: 'doSearchAndFilterUpdate',\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  doSearchAndFilterUpdate: EventEmitter<{\n    searchText: string | null;\n    sortBy: string | null;\n    filterCategory: string | null;\n    filterBeneficiary: string | null;\n    filterLocation: string | null;\n    filterFunding: string | null;\n  }>;\n\n  private sortByPlaceholderText = 'Sort by';\n  private beneficiariesPlaceHolderText = 'Select beneficiary';\n  private categoriesPlaceHolderText = 'Select category';\n  private locationsPlaceHolderText = 'Select location';\n  private fundingPlaceHolderText = 'Select funding';\n\n  /**\n   * Space below component\n   */\n  @Prop() spaceBelow: number = 0;\n\n  /**\n   * Intro\n   */\n  @Prop() intro: string = 'Find a charity or project';\n\n  /**\n   * Optional search text prop. Useful for pre-populating the search field\n   * when the page is loaded with a search term already existing in the URL.\n   * This can happen when sharing links, or if a donor goes to a campaign page\n   * after searching, and then returns to the search results. In such a case,\n   * the search box text will clear, unless we use this prop to populate it on\n   * rendering. DON-652.\n   */\n  @Prop() searchText: string | null = null;\n\n  /**\n   * Defines the text displayed as the placeholder in the input field\n   * before the user types anything\n   */\n  @Prop() placeholderText: string = 'Search';\n\n  /**\n   * Defines the text on the search button\n   */\n  @Prop() buttonText: string = 'Search';\n\n  /**\n   * JSON array of category key/values, or takes a stringified equiavalent (for Storybook)\n   */\n  @Prop() categoryOptions: string | Record<string, string> | string[];\n\n  /**\n   * JSON array of beneficiary key/values, or takes a stringified equiavalent (for Storybook)\n   */\n  @Prop() beneficiaryOptions: string | Record<string, string> | string[];\n\n  /**\n   * JSON array of location key/values, or takes a stringified equiavalent (for Storybook)\n   */\n  @Prop() locationOptions: string | Record<string, string> | string[];\n\n  /**\n   * JSON array of funding key/values, or takes a stringified equiavalent (for Storybook)\n   */\n  @Prop() fundingOptions: string | Record<string, string> | string[];\n\n  /**\n   * This helps us inject a pre-selected dropdown value from outside of this component.\n   * This is especially helpful for the Meta campaign and Explore pages, where searching\n   * by text wipes out previous sort options and re-uses Relevance, or where one of those\n   * two pages is loaded directly with URL parameters - in such a scenario the dropdown\n   * shows that it's pre-selected. DON-558.\n   */\n  @Prop({ mutable: true }) selectedSortByOption: 'Most raised' | 'Match funds remaining' | 'Relevance';\n\n  /**\n   * For injecting the chosen category to filter by, as per the comment above for `selectedSortByOption`.\n   */\n  @Prop({ mutable: true }) selectedFilterCategory: string | null = null;\n\n  /**\n   * For injecting the chosen beneficiary to filter by, as per the comment above for `selectedSortByOption`.\n   */\n  @Prop({ mutable: true }) selectedFilterBeneficiary: string | null = null;\n\n  /**\n   * For injecting the chosen location to filter by, as per the comment above for `selectedSortByOption`.\n   */\n  @Prop({ mutable: true }) selectedFilterLocation: string | null = null;\n\n  /**\n   * For injecting the chosen funding to filter by, as per the comment above for `selectedSortByOption`.\n   */\n  @Prop({ mutable: true }) selectedFilterFunding: string | null = null;\n\n  /**\n   * State variable - causes re-render on change\n   */\n  @State() filtersApplied: boolean;\n\n  private initialSortByOption: 'Most raised' | 'Match funds remaining' | 'Relevance';\n\n  /**\n   * This and similar properties represent selections made in the popup but not yet applied.\n   */\n  private newSelectedFilterCategory: string | null = null;\n  private newSelectedFilterBeneficiary: string | null = null;\n  private newSelectedFilterLocation: string | null = null;\n  private newSelectedFilterFunding: string | null = null;\n\n  private categoryFilterSelectionChanged = (value: string) => {\n    this.newSelectedFilterCategory = value;\n  };\n\n  private beneficiarySelectionChanged = (value: string) => {\n    this.newSelectedFilterBeneficiary = value;\n  };\n\n  private locationSelectionChanged = (value: string) => {\n    this.newSelectedFilterLocation = value;\n  };\n\n  private fundingSelectionChanged = (value: string) => {\n    this.newSelectedFilterFunding = value;\n  };\n\n  private sortBySelectionChanged = (value: 'Most raised' | 'Match funds remaining' | 'Relevance') => {\n    this.selectedSortByOption = value;\n    this.doSearchAndFilterUpdate.emit(this.getSearchAndFilterObject());\n  };\n\n  private getSearchAndFilterObject() {\n    return {\n      searchText: this.searchText,\n      sortBy: this.selectedSortByOption,\n      filterCategory: this.selectedFilterCategory,\n      filterBeneficiary: this.selectedFilterBeneficiary,\n      filterFunding: this.selectedFilterFunding,\n      filterLocation: this.selectedFilterLocation,\n    };\n  }\n\n  private handleApplyFilterButtonClick = () => {\n    this.selectedFilterCategory = this.newSelectedFilterCategory ?? this.selectedFilterCategory;\n    this.selectedFilterBeneficiary = this.newSelectedFilterBeneficiary ?? this.selectedFilterBeneficiary;\n    this.selectedFilterLocation = this.newSelectedFilterLocation ?? this.selectedFilterLocation;\n    this.selectedFilterFunding = this.newSelectedFilterFunding ?? this.selectedFilterFunding;\n\n    const searchAndFilterObj = this.getSearchAndFilterObject();\n    this.doSearchAndFilterUpdate.emit(searchAndFilterObj);\n\n    const filterPopup = this.el.shadowRoot?.getElementById('filter-popup') as HTMLBiggivePopupElement | undefined;\n    if (filterPopup) {\n      filterPopup.closeFromOutside();\n    }\n\n    this.filtersApplied =\n      typeof searchAndFilterObj.filterBeneficiary === 'string' ||\n      typeof searchAndFilterObj.filterCategory === 'string' ||\n      typeof searchAndFilterObj.filterFunding === 'string' ||\n      typeof searchAndFilterObj.filterLocation === 'string';\n  };\n\n  private removeFilter(filterKey: 'funding' | 'locations' | 'categories' | 'beneficiaries') {\n    switch (filterKey) {\n      case 'beneficiaries':\n        this.selectedFilterBeneficiary = null;\n        break;\n      case 'categories':\n        this.selectedFilterCategory = null;\n        break;\n      case 'funding':\n        this.selectedFilterFunding = null;\n        break;\n      case 'locations':\n        this.selectedFilterLocation = null;\n        break;\n      default:\n        // This asks the compiler to check that we are in dead code, i.e. we covered all the possible filter keys\n        // above. If we missed one we would get a compile error trying to assign a string to a never.\n        const exhaustiveSwitch: never = filterKey;\n        console.error(exhaustiveSwitch);\n    }\n\n    const selectEl = this.el.shadowRoot?.getElementById(filterKey) as HTMLBiggiveFormFieldSelectElement | undefined;\n    if (!selectEl) {\n      return;\n    }\n\n    selectEl.selectedLabel = null;\n    selectEl.selectedValue = null;\n    this.doSearchAndFilterUpdate.emit(this.getSearchAndFilterObject());\n  }\n\n  private handleSearchButtonPressed = () => {\n    this.doSearchAndFilterUpdate.emit(this.getSearchAndFilterObject());\n  };\n\n  private handleSearchTextChanged = (event: any) => {\n    this.searchText = event.target.value;\n  };\n\n  private handleEnterPressed = (ev: KeyboardEvent) => {\n    if (ev.key === 'Enter') {\n      this.doSearchAndFilterUpdate.emit(this.getSearchAndFilterObject());\n    }\n  };\n\n  private handleFilterButtonClick = () => {\n    this.newSelectedFilterBeneficiary = this.selectedFilterBeneficiary;\n    this.newSelectedFilterCategory = this.selectedFilterCategory;\n    this.newSelectedFilterFunding = this.selectedFilterFunding;\n    this.newSelectedFilterLocation = this.selectedFilterLocation;\n\n    const filterPopup = this.el.shadowRoot?.getElementById('filter-popup') as HTMLBiggivePopupElement | undefined;\n    if (filterPopup) {\n      filterPopup.openFromOutside();\n    }\n  };\n\n  private handleClearAll = () => {\n    // Set the 'Filters' button back to the primary background colour\n    this.filtersApplied = false;\n\n    // Clear all\n    this.searchText = null;\n    this.selectedSortByOption = this.initialSortByOption;\n    this.selectedFilterBeneficiary = null;\n    this.selectedFilterCategory = null;\n    this.selectedFilterFunding = null;\n    this.selectedFilterLocation = null;\n\n    // Clear <biggive-form-field-select> components' internal selectedValue and selectedLabel. DON-654.\n    ['sort-by', 'categories', 'beneficiaries', 'locations', 'funding'].forEach(id => {\n      const theEl = this.el.shadowRoot?.getElementById(id) as HTMLBiggiveFormFieldSelectElement | undefined;\n      if (!theEl) {\n        return;\n      }\n\n      theEl.selectedValue = null;\n      theEl.selectedLabel = null;\n    });\n\n    const selectedFilters = this.el.shadowRoot?.querySelector('.selected-filters');\n    if (selectedFilters) {\n      selectedFilters.querySelectorAll('.button').forEach(button => {\n        button.remove();\n      });\n    }\n\n    // Emit the doSearchAndFilterUpdate event with null values. DON-654\n    this.doSearchAndFilterUpdate.emit({\n      searchText: null,\n      sortBy: null,\n      filterCategory: null,\n      filterBeneficiary: null,\n      filterFunding: null,\n      filterLocation: null,\n    });\n  };\n\n  componentWillRender() {\n    this.filtersApplied =\n      this.selectedFilterCategory !== null || this.selectedFilterBeneficiary !== null || this.selectedFilterFunding !== null || this.selectedFilterLocation !== null;\n    this.initialSortByOption = this.selectedSortByOption;\n  }\n\n  render() {\n    return (\n      <div class={'container space-below-' + this.spaceBelow}>\n        <div class=\"sleeve\">\n          <div class=\"search-wrap\">\n            <h4>{this.intro}</h4>\n            <div class=\"field-wrap\">\n              <div class=\"input-wrap\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"icon\" viewBox=\"0 0 512 512\">\n                  <path d={faMagnifyingGlass.icon[4].toString()} />\n                </svg>\n                <input\n                  type=\"text\"\n                  value={this.searchText ?? ''}\n                  class=\"input-text\"\n                  placeholder={this.placeholderText}\n                  onInput={this.handleSearchTextChanged}\n                  onKeyDown={this.handleEnterPressed}\n                />\n              </div>\n              <biggive-button onClick={this.handleSearchButtonPressed} label={this.buttonText} />\n            </div>\n          </div>\n          <div class=\"sort-filter-wrap\">\n            <div class=\"filter-wrap\">\n              <biggive-button class=\"filter\" colourScheme=\"primary\" onClick={this.handleFilterButtonClick} label=\"Filter\" fullWidth={true} space-below=\"0\"></biggive-button>\n              <biggive-popup id=\"filter-popup\">\n                <h4 class=\"space-above-0 space-below-3 text-colour-primary\">Filters</h4>\n                <div class=\"select-wrapper-1\">\n                  <biggive-form-field-select\n                    backgroundColour=\"white\"\n                    prompt=\"Category\"\n                    placeholder={this.categoriesPlaceHolderText}\n                    selectedLabel={this.selectedFilterCategory}\n                    selectedValue={this.selectedFilterCategory}\n                    options={this.optionsToArray(this.categoryOptions || [])}\n                    selectionChanged={this.categoryFilterSelectionChanged}\n                    id=\"categories\"\n                    space-below=\"2\"\n                  ></biggive-form-field-select>\n                </div>\n\n                <div class=\"select-wrapper-2\">\n                  <biggive-form-field-select\n                    backgroundColour=\"white\"\n                    prompt=\"Beneficiary\"\n                    placeholder={this.beneficiariesPlaceHolderText}\n                    selectedLabel={this.selectedFilterBeneficiary}\n                    selectedValue={this.selectedFilterBeneficiary}\n                    options={this.optionsToArray(this.beneficiaryOptions || [])}\n                    selectionChanged={this.beneficiarySelectionChanged}\n                    id=\"beneficiaries\"\n                    space-below=\"2\"\n                  ></biggive-form-field-select>\n                </div>\n\n                <div class=\"select-wrapper-3\">\n                  <biggive-form-field-select\n                    backgroundColour=\"white\"\n                    prompt=\"Location\"\n                    placeholder={this.locationsPlaceHolderText}\n                    selectedLabel={this.selectedFilterLocation}\n                    selectedValue={this.selectedFilterLocation}\n                    options={this.optionsToArray(this.locationOptions || [])}\n                    selectionChanged={this.locationSelectionChanged}\n                    id=\"locations\"\n                    space-below=\"2\"\n                  ></biggive-form-field-select>\n                </div>\n\n                <div class=\"select-wrapper-4\">\n                  <biggive-form-field-select\n                    backgroundColour=\"white\"\n                    prompt=\"Funding\"\n                    placeholder={this.fundingPlaceHolderText}\n                    selectedLabel={this.selectedFilterFunding}\n                    selectedValue={this.selectedFilterFunding}\n                    options={this.optionsToArray(this.fundingOptions || [])}\n                    selectionChanged={this.fundingSelectionChanged}\n                    id=\"funding\"\n                    space-below=\"2\"\n                  ></biggive-form-field-select>\n                </div>\n                <div class=\"align-right\">\n                  <biggive-button label=\"Apply filters\" onClick={this.handleApplyFilterButtonClick} />\n                </div>\n              </biggive-popup>\n            </div>\n\n            <div class=\"sort-wrap\">\n              <biggive-form-field-select\n                options={[\n                  { value: 'amountRaised', label: 'Most raised' },\n                  { value: 'matchFundsRemaining', label: 'Match funds remaining' },\n                ]}\n                prompt={null}\n                select-style=\"underlined\"\n                placeholder={this.sortByPlaceholderText}\n                selectedLabel={this.selectedSortByOption}\n                selectionChanged={this.sortBySelectionChanged}\n                id=\"sort-by\"\n              >\n                <biggive-form-field-select-option value=\"amountRaised\" label=\"Most raised\"></biggive-form-field-select-option>\n                <biggive-form-field-select-option value=\"matchFundsRemaining\" label=\"Match funds remaining\"></biggive-form-field-select-option>\n                {(this.searchText || '').length > 0 ? <biggive-form-field-select-option value=\"Relevance\" label=\"Relevance\"></biggive-form-field-select-option> : null}\n              </biggive-form-field-select>\n            </div>\n          </div>\n          <div class=\"selected-filter-wrap\">\n            <div class=\"selected-filters\">\n              {this.selectedFilterCategory && (\n                <span\n                  class=\"button\"\n                  onClick={() => {\n                    this.removeFilter('categories');\n                  }}\n                >\n                  {this.selectedFilterCategory}\n                </span>\n              )}\n              {this.selectedFilterBeneficiary && (\n                <span\n                  class=\"button\"\n                  onClick={() => {\n                    this.removeFilter('beneficiaries');\n                  }}\n                >\n                  {this.selectedFilterBeneficiary}\n                </span>\n              )}\n              {this.selectedFilterLocation && (\n                <span\n                  class=\"button\"\n                  onClick={() => {\n                    this.removeFilter('locations');\n                  }}\n                >\n                  {this.selectedFilterLocation}\n                </span>\n              )}\n              {this.selectedFilterFunding && (\n                <span\n                  class=\"button\"\n                  onClick={() => {\n                    this.removeFilter('funding');\n                  }}\n                >\n                  {this.selectedFilterFunding}\n                </span>\n              )}\n            </div>\n            <div class=\"clear-all\">\n              <a onClick={this.handleClearAll}>Clear all</a>\n            </div>\n          </div>\n          <div class=\"campaign-grid\">\n            <slot name=\"campaign-grid\"></slot>\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  private optionsToArray(options: string | Record<string, string> | string[]): {\n    label: string;\n    value: string;\n  }[] {\n    if (typeof options === 'string') {\n      options = JSON.parse(options);\n    }\n    if (Array.isArray(options)) {\n      return options.map((option: string) => ({ value: option, label: option }));\n    }\n\n    return Object.entries(options).map(entry => ({ value: entry[0], label: entry[1] }));\n  }\n}\n"],"version":3}
+{"file":"biggive-campaign-card-filter-grid.js","mappings":"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","names":["BiggiveCampaignCardFilterGrid"],"sources":["src/components/biggive-campaign-card-filter-grid/biggive-campaign-card-filter-grid.scss?tag=biggive-campaign-card-filter-grid&encapsulation=shadow","src/components/biggive-campaign-card-filter-grid/biggive-campaign-card-filter-grid.tsx"],"sourcesContent":["@include spacers();\n\n:host {\n  display: content;\n}\n\n// Each select needs a higher z-index than the one below,\n// so that the drop-down part will occlude it.\n.select-wrapper-1, .select-wrapper-2, .select-wrapper-3, .select-wrapper-4 {\n  position: relative;\n  margin-top: 1em;\n}\n.select-wrapper-1 {\n  z-index: 4;\n}\n.select-wrapper-2 {\n  z-index: 3;\n}\n.select-wrapper-3 {\n   z-index: 2;\n }\n.select-wrapper-4 {\n  z-index: 1;\n}\n\n.container {\n  @include standard-font();\n  position: relative;\n  .search-wrap {\n    @include lower-shadow();\n    background-color: $colour-white;\n    padding: $spacer-3 $spacer-4;\n    margin-bottom: $spacer-3;\n    h4 {\n      margin-bottom: $spacer-3;\n    }\n    .field-wrap {\n      @include flex-container-row();\n\n      .input-wrap {\n        @include flex-container-row();\n        padding-bottom: $spacer-1;\n        border-bottom: 1px solid $colour-black;\n        margin-right: $spacer-4;\n        flex-grow: 1;\n        input {\n          border: 0;\n        }\n      }\n      button {\n        padding: 5px 30px;\n      }\n    }\n  }\n}\n.selected-filter-wrap {\n  display: flex;\n  margin-bottom: 30px;\n  padding: 0;\n  .button {\n    cursor: pointer;\n    border-radius: 20px;\n    padding: 5px 50px 5px 20px;\n    margin-right: 15px;\n    background-color: $colour-tertiary-coral;;\n    color: $colour-black;\n    border: 1px solid $colour-tertiary-coral;\n    text-decoration: none;\n    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgMTguNCAxOC40IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxOC40IDE4LjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7c3Ryb2tlOiMwMDAwMDA7fQo8L3N0eWxlPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNOS4yLDguNUwxNywwLjdsMC43LDAuN0w5LjksOS4ybDcuOCw3LjhMMTcsMTcuN0w5LjIsOS45bC03LjgsNy44TDAuNywxN2w3LjgtNy44TDAuNywxLjRsMC43LTAuN0w5LjIsOC41eiIvPgo8L3N2Zz4K);\n    background-repeat: no-repeat;\n    background-position: right 20px center;\n    background-size: 12px auto;\n    &:hover {\n     background-color: $colour-white;\n     color: $colour-black;\n   }\n  }\n  .clear-all {\n    margin-left: auto;\n    a {\n      cursor: pointer;\n      border-radius: 20px;\n      padding: 5px 20px;\n      background-color: $colour-primary-blue;\n      color: $colour-white;\n      border: 1px solid $colour-primary-blue;\n      text-decoration: none;\n      &:hover {\n       background-color: $colour-white;\n       color: $colour-primary-blue;\n     }\n    }\n  }\n}\n\n.sort-filter-wrap {\n  display: flex;\n  justify-content: flex-end;\n  margin-bottom: $spacer-4;\n  padding: 0;\n  text-align: right;\n  .clear-all {\n    cursor: pointer;\n    vertical-align: center;\n    margin-top: auto;\n    margin-bottom: auto;\n  }\n\n    display: flex;\n    .sort-wrap {\n      margin-left: 15px;\n    }\n\n    .filter-wrap {\n      background-color: $colour-grey-background; // temp for testing dropdown\n\n      margin-left: $spacer-3;\n\n      .button.filter {\n        padding-left: 60px;\n        padding-right: 30px;\n\n      .filter-icon {\n        content: '';\n        display: block;\n        position: absolute;\n        left: 25px;\n        top: 17px;\n        width: 13px;\n        height: 13px;\n\n        svg {\n          width: 100%;\n          height: auto;\n          vertical-align: top;\n\n          &:hover {\n            fill: $colour-primary-blue;\n          }\n        }\n      }\n    }\n  }\n}\n\n.icon {\n  @include icon();\n  margin: auto;\n\n  > path {\n    fill: $colour-primary-blue;\n  }\n}\n\n.icon-clear-all {\n  > path {\n    fill: $colour-black;\n  }\n}\n\n@media screen and (max-width: $screen-mobile-small) {\n  .sort-filter-wrap {\n    flex-direction: column-reverse;\n    .sort-wrap {\n      margin-top: 20px;\n      margin-bottom: 20px;\n    }\n  }\n}\n\n@media screen and (max-width: $screen-mobile-x-small) {\n  .sort-filter-wrap {\n    justify-content: space-between;\n    .sort-wrap {\n      margin-left: 0px;\n    }\n    .filter-wrap {\n      margin-left: 3px;\n    }\n  }\n}\n\n.align-right {\n  text-align: right;\n}\n\n.input-text {\n    @include input-text();\n}\n\n.text-colour-primary {\n  color: $colour-primary-blue;\n}\n","import { Component, Element, Event, EventEmitter, h, Prop, State } from '@stencil/core';\nimport { faMagnifyingGlass } from '@fortawesome/pro-solid-svg-icons';\n\n@Component({\n  tag: 'biggive-campaign-card-filter-grid',\n  styleUrl: 'biggive-campaign-card-filter-grid.scss',\n  shadow: true,\n})\nexport class BiggiveCampaignCardFilterGrid {\n  @Element() el: HTMLBiggiveCampaignCardFilterGridElement;\n\n  /**\n   * This event `doSearchAndFilterUpdate` event is emitted and propogates to the parent\n   * component which handles it\n   */\n  @Event({\n    eventName: 'doSearchAndFilterUpdate',\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  doSearchAndFilterUpdate: EventEmitter<{\n    searchText: string | null;\n    sortBy: string | null;\n    filterCategory: string | null;\n    filterBeneficiary: string | null;\n    filterLocation: string | null;\n    filterFunding: string | null;\n  }>;\n\n  private sortByPlaceholderText = 'Sort by';\n  private beneficiariesPlaceHolderText = 'Select beneficiary';\n  private categoriesPlaceHolderText = 'Select category';\n  private locationsPlaceHolderText = 'Select location';\n  private fundingPlaceHolderText = 'Select funding';\n\n  /**\n   * Space below component\n   */\n  @Prop() spaceBelow: number = 0;\n\n  /**\n   * Intro\n   */\n  @Prop() intro: string = 'Find a charity or project';\n\n  /**\n   * Optional search text prop. Useful for pre-populating the search field\n   * when the page is loaded with a search term already existing in the URL.\n   * This can happen when sharing links, or if a donor goes to a campaign page\n   * after searching, and then returns to the search results. In such a case,\n   * the search box text will clear, unless we use this prop to populate it on\n   * rendering. DON-652.\n   */\n  @Prop() searchText: string | null = null;\n\n  /**\n   * Defines the text displayed as the placeholder in the input field\n   * before the user types anything\n   */\n  @Prop() placeholderText: string = 'Search';\n\n  /**\n   * Defines the text on the search button\n   */\n  @Prop() buttonText: string = 'Search';\n\n  /**\n   * JSON array of category key/values, or takes a stringified equiavalent (for Storybook)\n   */\n  @Prop() categoryOptions: string | Record<string, string> | string[];\n\n  /**\n   * JSON array of beneficiary key/values, or takes a stringified equiavalent (for Storybook)\n   */\n  @Prop() beneficiaryOptions: string | Record<string, string> | string[];\n\n  /**\n   * JSON array of location key/values, or takes a stringified equiavalent (for Storybook)\n   */\n  @Prop() locationOptions: string | Record<string, string> | string[];\n\n  /**\n   * JSON array of funding key/values, or takes a stringified equiavalent (for Storybook)\n   */\n  @Prop() fundingOptions: string | Record<string, string> | string[];\n\n  /**\n   * This helps us inject a pre-selected dropdown value from outside of this component.\n   * This is especially helpful for the Meta campaign and Explore pages, where searching\n   * by text wipes out previous sort options and re-uses Relevance, or where one of those\n   * two pages is loaded directly with URL parameters - in such a scenario the dropdown\n   * shows that it's pre-selected. DON-558.\n   */\n  @Prop({ mutable: true }) selectedSortByOption: 'Most raised' | 'Match funds remaining' | 'Relevance';\n\n  /**\n   * For injecting the chosen category to filter by, as per the comment above for `selectedSortByOption`.\n   */\n  @Prop({ mutable: true }) selectedFilterCategory: string | null = null;\n\n  /**\n   * For injecting the chosen beneficiary to filter by, as per the comment above for `selectedSortByOption`.\n   */\n  @Prop({ mutable: true }) selectedFilterBeneficiary: string | null = null;\n\n  /**\n   * For injecting the chosen location to filter by, as per the comment above for `selectedSortByOption`.\n   */\n  @Prop({ mutable: true }) selectedFilterLocation: string | null = null;\n\n  /**\n   * For injecting the chosen funding to filter by, as per the comment above for `selectedSortByOption`.\n   */\n  @Prop({ mutable: true }) selectedFilterFunding: string | null = null;\n\n  /**\n   * State variable - causes re-render on change\n   */\n  @State() filtersApplied: boolean;\n\n  private initialSortByOption: 'Most raised' | 'Match funds remaining' | 'Relevance';\n\n  /**\n   * This and similar properties represent selections made in the popup but not yet applied.\n   */\n  private newSelectedFilterCategory: string | null = null;\n  private newSelectedFilterBeneficiary: string | null = null;\n  private newSelectedFilterLocation: string | null = null;\n  private newSelectedFilterFunding: string | null = null;\n\n  private categoryFilterSelectionChanged = (value: string) => {\n    this.newSelectedFilterCategory = value;\n  };\n\n  private beneficiarySelectionChanged = (value: string) => {\n    this.newSelectedFilterBeneficiary = value;\n  };\n\n  private locationSelectionChanged = (value: string) => {\n    this.newSelectedFilterLocation = value;\n  };\n\n  private fundingSelectionChanged = (value: string) => {\n    this.newSelectedFilterFunding = value;\n  };\n\n  private sortBySelectionChanged = (value: 'Most raised' | 'Match funds remaining' | 'Relevance') => {\n    this.selectedSortByOption = value;\n    this.doSearchAndFilterUpdate.emit(this.getSearchAndFilterObject());\n  };\n\n  private getSearchAndFilterObject() {\n    return {\n      searchText: this.searchText,\n      sortBy: this.selectedSortByOption,\n      filterCategory: this.selectedFilterCategory,\n      filterBeneficiary: this.selectedFilterBeneficiary,\n      filterFunding: this.selectedFilterFunding,\n      filterLocation: this.selectedFilterLocation,\n    };\n  }\n\n  private handleApplyFilterButtonClick = () => {\n    this.selectedFilterCategory = this.newSelectedFilterCategory ?? this.selectedFilterCategory;\n    this.selectedFilterBeneficiary = this.newSelectedFilterBeneficiary ?? this.selectedFilterBeneficiary;\n    this.selectedFilterLocation = this.newSelectedFilterLocation ?? this.selectedFilterLocation;\n    this.selectedFilterFunding = this.newSelectedFilterFunding ?? this.selectedFilterFunding;\n\n    const searchAndFilterObj = this.getSearchAndFilterObject();\n    this.doSearchAndFilterUpdate.emit(searchAndFilterObj);\n\n    const filterPopup = this.el.shadowRoot?.getElementById('filter-popup') as HTMLBiggivePopupElement | undefined;\n    if (filterPopup) {\n      filterPopup.closeFromOutside();\n    }\n\n    this.filtersApplied =\n      typeof searchAndFilterObj.filterBeneficiary === 'string' ||\n      typeof searchAndFilterObj.filterCategory === 'string' ||\n      typeof searchAndFilterObj.filterFunding === 'string' ||\n      typeof searchAndFilterObj.filterLocation === 'string';\n  };\n\n  private removeFilter(filterKey: 'funding' | 'locations' | 'categories' | 'beneficiaries') {\n    switch (filterKey) {\n      case 'beneficiaries':\n        this.selectedFilterBeneficiary = null;\n        break;\n      case 'categories':\n        this.selectedFilterCategory = null;\n        break;\n      case 'funding':\n        this.selectedFilterFunding = null;\n        break;\n      case 'locations':\n        this.selectedFilterLocation = null;\n        break;\n      default:\n        // This asks the compiler to check that we are in dead code, i.e. we covered all the possible filter keys\n        // above. If we missed one we would get a compile error trying to assign a string to a never.\n        const exhaustiveSwitch: never = filterKey;\n        console.error(exhaustiveSwitch);\n    }\n\n    const selectEl = this.el.shadowRoot?.getElementById(filterKey) as HTMLBiggiveFormFieldSelectElement | undefined;\n    if (!selectEl) {\n      return;\n    }\n\n    selectEl.selectedLabel = null;\n    selectEl.selectedValue = null;\n    this.doSearchAndFilterUpdate.emit(this.getSearchAndFilterObject());\n  }\n\n  private handleSearchButtonPressed = () => {\n    this.doSearchAndFilterUpdate.emit(this.getSearchAndFilterObject());\n  };\n\n  private handleSearchTextChanged = (event: any) => {\n    this.searchText = event.target.value;\n  };\n\n  private handleEnterPressed = (ev: KeyboardEvent) => {\n    if (ev.key === 'Enter') {\n      this.doSearchAndFilterUpdate.emit(this.getSearchAndFilterObject());\n    }\n  };\n\n  private handleFilterButtonClick = () => {\n    this.newSelectedFilterBeneficiary = this.selectedFilterBeneficiary;\n    this.newSelectedFilterCategory = this.selectedFilterCategory;\n    this.newSelectedFilterFunding = this.selectedFilterFunding;\n    this.newSelectedFilterLocation = this.selectedFilterLocation;\n\n    const filterPopup = this.el.shadowRoot?.getElementById('filter-popup') as HTMLBiggivePopupElement | undefined;\n    if (filterPopup) {\n      filterPopup.openFromOutside();\n    }\n  };\n\n  private handleClearAll = () => {\n    // Set the 'Filters' button back to the primary background colour\n    this.filtersApplied = false;\n\n    // Clear all\n    this.searchText = null;\n    this.selectedSortByOption = this.initialSortByOption;\n    this.selectedFilterBeneficiary = null;\n    this.selectedFilterCategory = null;\n    this.selectedFilterFunding = null;\n    this.selectedFilterLocation = null;\n\n    // Clear <biggive-form-field-select> components' internal selectedValue and selectedLabel. DON-654.\n    ['sort-by', 'categories', 'beneficiaries', 'locations', 'funding'].forEach(id => {\n      const theEl = this.el.shadowRoot?.getElementById(id) as HTMLBiggiveFormFieldSelectElement | undefined;\n      if (!theEl) {\n        return;\n      }\n\n      theEl.selectedValue = null;\n      theEl.selectedLabel = null;\n    });\n\n    const selectedFilters = this.el.shadowRoot?.querySelector('.selected-filters');\n    if (selectedFilters) {\n      selectedFilters.querySelectorAll('.button').forEach(button => {\n        button.remove();\n      });\n    }\n\n    // Emit the doSearchAndFilterUpdate event with null values. DON-654\n    this.doSearchAndFilterUpdate.emit({\n      searchText: null,\n      sortBy: null,\n      filterCategory: null,\n      filterBeneficiary: null,\n      filterFunding: null,\n      filterLocation: null,\n    });\n  };\n\n  componentWillRender() {\n    this.filtersApplied =\n      this.selectedFilterCategory !== null || this.selectedFilterBeneficiary !== null || this.selectedFilterFunding !== null || this.selectedFilterLocation !== null;\n    this.initialSortByOption = this.selectedSortByOption;\n  }\n\n  render() {\n    return (\n      <div class={'container space-below-' + this.spaceBelow}>\n        <div class=\"sleeve\">\n          <div class=\"search-wrap\">\n            <h4>{this.intro}</h4>\n            <div class=\"field-wrap\">\n              <div class=\"input-wrap\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"icon\" viewBox=\"0 0 512 512\">\n                  <path d={faMagnifyingGlass.icon[4].toString()} />\n                </svg>\n                <input\n                  type=\"text\"\n                  value={this.searchText ?? ''}\n                  class=\"input-text\"\n                  placeholder={this.placeholderText}\n                  onInput={this.handleSearchTextChanged}\n                  onKeyDown={this.handleEnterPressed}\n                />\n              </div>\n              <biggive-button onClick={this.handleSearchButtonPressed} label={this.buttonText} />\n            </div>\n          </div>\n          <div class=\"sort-filter-wrap\">\n            <div class=\"filter-wrap\">\n              <biggive-button class=\"filter\" colourScheme=\"primary\" onClick={this.handleFilterButtonClick} label=\"Filter\" fullWidth={true} space-below=\"0\"></biggive-button>\n              <biggive-popup id=\"filter-popup\">\n                <h4 class=\"space-above-0 space-below-3 text-colour-primary\">Filters</h4>\n                <div class=\"select-wrapper-1\">\n                  <biggive-form-field-select\n                    backgroundColour=\"white\"\n                    prompt=\"Category\"\n                    placeholder={this.categoriesPlaceHolderText}\n                    selectedLabel={this.selectedFilterCategory}\n                    selectedValue={this.selectedFilterCategory}\n                    options={this.optionsToArray(this.categoryOptions || [])}\n                    selectionChanged={this.categoryFilterSelectionChanged}\n                    id=\"categories\"\n                    space-below=\"2\"\n                  ></biggive-form-field-select>\n                </div>\n\n                <div class=\"select-wrapper-2\">\n                  <biggive-form-field-select\n                    backgroundColour=\"white\"\n                    prompt=\"Beneficiary\"\n                    placeholder={this.beneficiariesPlaceHolderText}\n                    selectedLabel={this.selectedFilterBeneficiary}\n                    selectedValue={this.selectedFilterBeneficiary}\n                    options={this.optionsToArray(this.beneficiaryOptions || [])}\n                    selectionChanged={this.beneficiarySelectionChanged}\n                    id=\"beneficiaries\"\n                    space-below=\"2\"\n                  ></biggive-form-field-select>\n                </div>\n\n                <div class=\"select-wrapper-3\">\n                  <biggive-form-field-select\n                    backgroundColour=\"white\"\n                    prompt=\"Location\"\n                    placeholder={this.locationsPlaceHolderText}\n                    selectedLabel={this.selectedFilterLocation}\n                    selectedValue={this.selectedFilterLocation}\n                    options={this.optionsToArray(this.locationOptions || [])}\n                    selectionChanged={this.locationSelectionChanged}\n                    id=\"locations\"\n                    space-below=\"2\"\n                  ></biggive-form-field-select>\n                </div>\n\n                <div class=\"select-wrapper-4\">\n                  <biggive-form-field-select\n                    backgroundColour=\"white\"\n                    prompt=\"Funding\"\n                    placeholder={this.fundingPlaceHolderText}\n                    selectedLabel={this.selectedFilterFunding}\n                    selectedValue={this.selectedFilterFunding}\n                    options={this.optionsToArray(this.fundingOptions || [])}\n                    selectionChanged={this.fundingSelectionChanged}\n                    id=\"funding\"\n                    space-below=\"2\"\n                  ></biggive-form-field-select>\n                </div>\n                <div class=\"align-right\">\n                  <biggive-button label=\"Apply filters\" onClick={this.handleApplyFilterButtonClick} />\n                </div>\n              </biggive-popup>\n            </div>\n\n            <div class=\"sort-wrap\">\n              <biggive-form-field-select\n                options={[\n                  { value: 'amountRaised', label: 'Most raised' },\n                  { value: 'matchFundsRemaining', label: 'Match funds remaining' },\n                ]}\n                prompt={null}\n                select-style=\"underlined\"\n                placeholder={this.sortByPlaceholderText}\n                selectedLabel={this.selectedSortByOption}\n                selectionChanged={this.sortBySelectionChanged}\n                id=\"sort-by\"\n              >\n                <biggive-form-field-select-option value=\"amountRaised\" label=\"Most raised\"></biggive-form-field-select-option>\n                <biggive-form-field-select-option value=\"matchFundsRemaining\" label=\"Match funds remaining\"></biggive-form-field-select-option>\n                {(this.searchText || '').length > 0 ? <biggive-form-field-select-option value=\"Relevance\" label=\"Relevance\"></biggive-form-field-select-option> : null}\n              </biggive-form-field-select>\n            </div>\n          </div>\n          <div class=\"selected-filter-wrap\">\n            <div class=\"selected-filters\">\n              {this.selectedFilterCategory && (\n                <span\n                  class=\"button\"\n                  onClick={() => {\n                    this.removeFilter('categories');\n                  }}\n                >\n                  {this.selectedFilterCategory}\n                </span>\n              )}\n              {this.selectedFilterBeneficiary && (\n                <span\n                  class=\"button\"\n                  onClick={() => {\n                    this.removeFilter('beneficiaries');\n                  }}\n                >\n                  {this.selectedFilterBeneficiary}\n                </span>\n              )}\n              {this.selectedFilterLocation && (\n                <span\n                  class=\"button\"\n                  onClick={() => {\n                    this.removeFilter('locations');\n                  }}\n                >\n                  {this.selectedFilterLocation}\n                </span>\n              )}\n              {this.selectedFilterFunding && (\n                <span\n                  class=\"button\"\n                  onClick={() => {\n                    this.removeFilter('funding');\n                  }}\n                >\n                  {this.selectedFilterFunding}\n                </span>\n              )}\n            </div>\n            <div class=\"clear-all\">\n              <a onClick={this.handleClearAll}>Clear all</a>\n            </div>\n          </div>\n          <div class=\"campaign-grid\">\n            <slot name=\"campaign-grid\"></slot>\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  private optionsToArray(options: string | Record<string, string> | string[]): {\n    label: string;\n    value: string;\n  }[] {\n    if (typeof options === 'string') {\n      options = JSON.parse(options);\n    }\n    if (Array.isArray(options)) {\n      return options.map((option: string) => ({ value: option, label: option }));\n    }\n\n    return Object.entries(options).map(entry => ({ value: entry[0], label: entry[1] }));\n  }\n}\n"],"version":3}

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

@@ -39,7 +39,7 @@ const BiggiveCampaignCard$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveCamp
         return value === undefined || value === null || value === '';
     }
     render() {
-        return (h("div", { class: 'container space-below-' + this.spaceBelow.toString() }, h("div", { class: "sleeve" }, h("div", { onClick: this.handleCardGeneralClick, class: "above-button-wrap" }, 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)), this.isEmpty(this.primaryFigureAmount) && this.isEmpty(this.secondaryFigureAmount) ? null : (h("div", { class: "meta-wrap" }, this.isEmpty(this.primaryFigureAmount) ? null : (h("div", { class: "meta-item" }, h("span", { class: "label" }, this.primaryFigureLabel), h("span", { class: "text" }, this.primaryFigureAmount))), this.isEmpty(this.secondaryFigureAmount) ? null : (h("div", { class: "meta-item" }, h("span", { class: "label" }, this.secondaryFigureLabel), h("span", { class: "text" }, this.secondaryFigureAmount))))), this.isEmpty(this.progressBarCounter) ? null : (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", { key: '8383f816181ea902732fc490d348e0b5960ff432', class: 'container space-below-' + this.spaceBelow.toString() }, h("div", { key: '31fb7a6a11a347a7a4bb4755ba5d9a09a26be9a7', class: "sleeve" }, h("div", { key: '28b948056d296e1bf9387864433906a5c96976e6', onClick: this.handleCardGeneralClick, class: "above-button-wrap" }, 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", { key: '1b316684a436c019936307ac86753dde6c073092', class: "title-wrap" }, h("h3", { key: '6c5794bc18d0f6f7977a24410f8038300fa46f04' }, this.campaignTitle), h("div", { key: 'd42b4fd4800d162d8ad83daddb2198e6a097acbc', class: "organisation-name" }, "By ", this.organisationName)), this.isEmpty(this.primaryFigureAmount) && this.isEmpty(this.secondaryFigureAmount) ? null : (h("div", { class: "meta-wrap" }, this.isEmpty(this.primaryFigureAmount) ? null : (h("div", { class: "meta-item" }, h("span", { class: "label" }, this.primaryFigureLabel), h("span", { class: "text" }, this.primaryFigureAmount))), this.isEmpty(this.secondaryFigureAmount) ? null : (h("div", { class: "meta-item" }, h("span", { class: "label" }, this.secondaryFigureLabel), h("span", { class: "text" }, this.secondaryFigureAmount))))), this.isEmpty(this.progressBarCounter) ? null : (h("div", { class: "progress-bar-wrap" }, h("biggive-progress-bar", { counter: this.progressBarCounter, "colour-scheme": "primary" })))), h("div", { key: '95444c045dfadb58f02584accd5013abf9fa8006', 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", { key: 'e261bcc2c51296da7db737ada806bbc297d7d7fc', "full-width": "true", "colour-scheme": this.moreInfoButtonColourScheme, url: this.moreInfoButtonUrl, label: this.moreInfoButtonLabel })))));
     }
     static get style() { return BiggiveCampaignCardStyle0; }
 }, [1, "biggive-campaign-card", {

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

@@ -1 +1 @@
-{"file":"biggive-campaign-card.js","mappings":"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","names":["BiggiveCampaignCard"],"sources":["src/components/biggive-campaign-card/biggive-campaign-card.scss?tag=biggive-campaign-card&encapsulation=shadow","src/components/biggive-campaign-card/biggive-campaign-card.tsx"],"sourcesContent":["@include image-alignment();\n@include spacers();\n\n:host {\n  display: contents;\n}\n\n* {\n  //outline: 1px dotted red;\n}\n\n.container {\n  @include flex-container-column();\n  @include standard-font();\n  @include lower-shadow();\n  margin-right: 10px;\n  margin-left: 10px;\n\n  cursor: pointer; // Fallback click behaviour is to go to info URL.\n\n  position: relative;\n  height: 100%;\n  background-color: $colour-white;\n  padding: $spacer-3;\n  box-sizing: border-box;\n  .sleeve {\n    @include flex-container-column();\n    height: 100%;\n    .above-button-wrap {\n      // we want all the height variation to be inside this element, so that the button is always at the same position\n      // right at the bottom of the card.\n      flex-grow: 1;\n      @include flex-container-column();\n      .title-wrap {\n        // and specifically we want the spare height to go under the charity name.\n        flex-grow: 1;\n      }\n    }\n  }\n  .campaign-type {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    text-align: center;\n    font-weight: bold;\n    span {\n      background-color: $colour-secondary-green;\n      color: $colour-black;\n      padding: $spacer-1 $spacer-3;\n      display: inline-block;\n    }\n  }\n  .banner {\n    top: 0;\n    margin-top: 19px;\n    padding-bottom: $aspect-ratio-banners;\n    background-color: #F1F1F1;\n    background-size: contain;\n    background-repeat: no-repeat;\n    img {\n      display: none;\n    }\n  }\n  h3 {\n    @include heading-4();\n  }\n  .button {\n    display: block;\n  }\n  .organisation-name {\n    margin-bottom: $spacer-4;\n    color: $colour-primary-blue;\n  }\n  .meta-wrap {\n    @include flex-container-row();\n    margin-top: auto;\n    margin-bottom: $spacer-3;\n    .meta-item {\n      width: calc( 50% - $spacer-3 );\n      .label {\n        @include font-size-x-small();\n        display: block;\n      }\n      .text {\n        @include heading-3();\n        display: block;\n      }\n      &:last-child {\n        text-align: right;\n        .text {\n          color: $colour-primary-blue;\n        }\n      }\n    }\n  }\n  .progress-bar-wrap {\n    padding-bottom: $spacer-2;\n    margin-bottom: $spacer-2;\n    border-bottom: 1px solid $colour-grey-light;\n  }\n\n  .msg-wrapper {\n    display: flex;\n    justify-content: center;\n\n    biggive-misc-icon {\n      margin-top: auto;\n      margin-bottom: auto;\n    }\n\n    p {\n      text-align: center;\n\n      @media screen and (max-width: $screen-desktop-max) {\n        font-size: 15px;\n      }\n    }\n  }\n}\n","import { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-campaign-card',\n  styleUrl: 'biggive-campaign-card.scss',\n  shadow: true,\n})\nexport class BiggiveCampaignCard {\n  @Event({\n    eventName: 'doCardGeneralClick',\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  doCardGeneralClick: EventEmitter<{ event: object; url: string }>;\n\n  /**\n   * Space below component\n   */\n  @Prop() spaceBelow: number = 4;\n  /**\n   * e.g. \"Match Funded\".\n   */\n  @Prop() campaignType: string;\n\n  /**\n   * Full URL of a banner image.\n   */\n  @Prop() banner: string;\n\n  /**\n   * Display name of the charity's specific time-bound fundraising campaign.\n   */\n  @Prop() campaignTitle: string;\n\n  /**\n   * Display name of the charity or non-profit.\n   */\n  @Prop() organisationName: string;\n\n  /**\n   * Label for the primary figure – may be null or omitted for no label or if there's no figure.\n   */\n  @Prop() primaryFigureLabel: string | null;\n\n  /**\n   * Amount for the primary figure, formatted with currency symbol – null or omit to hide the figure & label.\n   */\n  @Prop() primaryFigureAmount: string | null;\n\n  /**\n   * Label for the secondary figure – may be null or omitted for no label or if there's no figure.\n   */\n  @Prop() secondaryFigureLabel: string | null;\n\n  /**\n   * Amount for the secondary figure, formatted with currency symbol – null or omit to hide the figure & label.\n   */\n  @Prop() secondaryFigureAmount: string | null;\n\n  /**\n   * Progress bar percentage – null or omit to hide the progress bar.\n   */\n  @Prop() progressBarCounter: number | null;\n\n  /**\n   * Donate button label\n   */\n  @Prop() donateButtonLabel: string = 'Donate now';\n\n  /**\n   * Donate button url\n   */\n  @Prop() donateButtonUrl: string;\n\n  /**\n   * Donate button colour scheme\n   */\n  @Prop() donateButtonColourScheme: string = 'primary';\n\n  /**\n   * More information button label\n   */\n  @Prop() moreInfoButtonLabel: string = 'Find out more';\n\n  /**\n   * More information button url\n   */\n  @Prop() moreInfoButtonUrl: string;\n\n  /**\n   * Donate button colour scheme\n   */\n  @Prop() moreInfoButtonColourScheme: string = 'clear-primary';\n\n  /**\n   * Boolean flag telling the component if the campaign is in the future (not open yet).\n   */\n  @Prop() isFutureCampaign: boolean = false;\n\n  /**\n   * Boolean flag telling the component if the campaign is in the future (not open yet).\n   */\n  @Prop() isPastCampaign: boolean = false;\n\n  /**\n   * To be used alongside isFutureCampaign = true or isPastCampaign = true.\n   * If either is true, we render out: 'Launches: ' + datetime or 'Closed: ' + datetime.\n   * Preferred format: DD/MM/YYYY, HH:MM\n   * DON-661.\n   */\n  @Prop() datetime: string;\n\n  private isEmpty(value?: number | string | null) {\n    return value === undefined || value === null || value === '';\n  }\n\n  private handleCardGeneralClick = (event: any) => {\n    this.doCardGeneralClick.emit({ event, url: this.moreInfoButtonUrl });\n  };\n\n  render() {\n    return (\n      <div class={'container space-below-' + this.spaceBelow.toString()}>\n        <div class=\"sleeve\">\n          <div onClick={this.handleCardGeneralClick} class=\"above-button-wrap\">\n            {this.campaignType !== null ? (\n              <div class=\"campaign-type\">\n                <span>{this.campaignType}</span>\n              </div>\n            ) : null}\n\n            {this.banner !== null ? (\n              <div class=\"image-wrap banner\" role=\"presentation\" style={{ 'background-image': 'url(' + this.banner + ')' }}></div>\n            ) : (\n              <div class=\"image-wrap banner\"></div>\n            )}\n\n            <div class=\"title-wrap\">\n              <h3>{this.campaignTitle}</h3>\n              <div class=\"organisation-name\">By {this.organisationName}</div>\n            </div>\n\n            {this.isEmpty(this.primaryFigureAmount) && this.isEmpty(this.secondaryFigureAmount) ? null : (\n              <div class=\"meta-wrap\">\n                {this.isEmpty(this.primaryFigureAmount) ? null : (\n                  <div class=\"meta-item\">\n                    <span class=\"label\">{this.primaryFigureLabel}</span>\n                    <span class=\"text\">{this.primaryFigureAmount}</span>\n                  </div>\n                )}\n                {this.isEmpty(this.secondaryFigureAmount) ? null : (\n                  <div class=\"meta-item\">\n                    <span class=\"label\">{this.secondaryFigureLabel}</span>\n                    <span class=\"text\">{this.secondaryFigureAmount}</span>\n                  </div>\n                )}\n              </div>\n            )}\n            {this.isEmpty(this.progressBarCounter) ? null : (\n              <div class=\"progress-bar-wrap\">\n                <biggive-progress-bar counter={this.progressBarCounter} colour-scheme=\"primary\"></biggive-progress-bar>\n              </div>\n            )}\n          </div>\n          <div class=\"button-wrap\">\n            {this.isFutureCampaign || this.isPastCampaign ? (\n              <div class=\"msg-wrapper\">\n                <biggive-misc-icon background-colour=\"white\" icon-colour=\"black\" icon=\"Timer\"></biggive-misc-icon>\n                {this.isFutureCampaign ? <p>Launches {this.datetime}</p> : <p>Closed {this.datetime}</p>}\n              </div>\n            ) : (\n              <biggive-button full-width=\"true\" colour-scheme={this.donateButtonColourScheme} url={this.donateButtonUrl} label={this.donateButtonLabel}></biggive-button>\n            )}\n            <biggive-button full-width=\"true\" colour-scheme={this.moreInfoButtonColourScheme} url={this.moreInfoButtonUrl} label={this.moreInfoButtonLabel}></biggive-button>\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"biggive-campaign-card.js","mappings":"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","names":["BiggiveCampaignCard"],"sources":["src/components/biggive-campaign-card/biggive-campaign-card.scss?tag=biggive-campaign-card&encapsulation=shadow","src/components/biggive-campaign-card/biggive-campaign-card.tsx"],"sourcesContent":["@include image-alignment();\n@include spacers();\n\n:host {\n  display: contents;\n}\n\n* {\n  //outline: 1px dotted red;\n}\n\n.container {\n  @include flex-container-column();\n  @include standard-font();\n  @include lower-shadow();\n  margin-right: 10px;\n  margin-left: 10px;\n\n  cursor: pointer; // Fallback click behaviour is to go to info URL.\n\n  position: relative;\n  height: 100%;\n  background-color: $colour-white;\n  padding: $spacer-3;\n  box-sizing: border-box;\n  .sleeve {\n    @include flex-container-column();\n    height: 100%;\n    .above-button-wrap {\n      // we want all the height variation to be inside this element, so that the button is always at the same position\n      // right at the bottom of the card.\n      flex-grow: 1;\n      @include flex-container-column();\n      .title-wrap {\n        // and specifically we want the spare height to go under the charity name.\n        flex-grow: 1;\n      }\n    }\n  }\n  .campaign-type {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    text-align: center;\n    font-weight: bold;\n    span {\n      background-color: $colour-secondary-green;\n      color: $colour-black;\n      padding: $spacer-1 $spacer-3;\n      display: inline-block;\n    }\n  }\n  .banner {\n    top: 0;\n    margin-top: 19px;\n    padding-bottom: $aspect-ratio-banners;\n    background-color: #F1F1F1;\n    background-size: contain;\n    background-repeat: no-repeat;\n    img {\n      display: none;\n    }\n  }\n  h3 {\n    @include heading-4();\n  }\n  .button {\n    display: block;\n  }\n  .organisation-name {\n    margin-bottom: $spacer-4;\n    color: $colour-primary-blue;\n  }\n  .meta-wrap {\n    @include flex-container-row();\n    margin-top: auto;\n    margin-bottom: $spacer-3;\n    .meta-item {\n      width: calc( 50% - $spacer-3 );\n      .label {\n        @include font-size-x-small();\n        display: block;\n      }\n      .text {\n        @include heading-3();\n        display: block;\n      }\n      &:last-child {\n        text-align: right;\n        .text {\n          color: $colour-primary-blue;\n        }\n      }\n    }\n  }\n  .progress-bar-wrap {\n    padding-bottom: $spacer-2;\n    margin-bottom: $spacer-2;\n    border-bottom: 1px solid $colour-grey-light;\n  }\n\n  .msg-wrapper {\n    display: flex;\n    justify-content: center;\n\n    biggive-misc-icon {\n      margin-top: auto;\n      margin-bottom: auto;\n    }\n\n    p {\n      text-align: center;\n\n      @media screen and (max-width: $screen-desktop-max) {\n        font-size: 15px;\n      }\n    }\n  }\n}\n","import { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-campaign-card',\n  styleUrl: 'biggive-campaign-card.scss',\n  shadow: true,\n})\nexport class BiggiveCampaignCard {\n  @Event({\n    eventName: 'doCardGeneralClick',\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  doCardGeneralClick: EventEmitter<{ event: object; url: string }>;\n\n  /**\n   * Space below component\n   */\n  @Prop() spaceBelow: number = 4;\n  /**\n   * e.g. \"Match Funded\".\n   */\n  @Prop() campaignType: string;\n\n  /**\n   * Full URL of a banner image.\n   */\n  @Prop() banner: string;\n\n  /**\n   * Display name of the charity's specific time-bound fundraising campaign.\n   */\n  @Prop() campaignTitle: string;\n\n  /**\n   * Display name of the charity or non-profit.\n   */\n  @Prop() organisationName: string;\n\n  /**\n   * Label for the primary figure – may be null or omitted for no label or if there's no figure.\n   */\n  @Prop() primaryFigureLabel: string | null;\n\n  /**\n   * Amount for the primary figure, formatted with currency symbol – null or omit to hide the figure & label.\n   */\n  @Prop() primaryFigureAmount: string | null;\n\n  /**\n   * Label for the secondary figure – may be null or omitted for no label or if there's no figure.\n   */\n  @Prop() secondaryFigureLabel: string | null;\n\n  /**\n   * Amount for the secondary figure, formatted with currency symbol – null or omit to hide the figure & label.\n   */\n  @Prop() secondaryFigureAmount: string | null;\n\n  /**\n   * Progress bar percentage – null or omit to hide the progress bar.\n   */\n  @Prop() progressBarCounter: number | null;\n\n  /**\n   * Donate button label\n   */\n  @Prop() donateButtonLabel: string = 'Donate now';\n\n  /**\n   * Donate button url\n   */\n  @Prop() donateButtonUrl: string;\n\n  /**\n   * Donate button colour scheme\n   */\n  @Prop() donateButtonColourScheme: string = 'primary';\n\n  /**\n   * More information button label\n   */\n  @Prop() moreInfoButtonLabel: string = 'Find out more';\n\n  /**\n   * More information button url\n   */\n  @Prop() moreInfoButtonUrl: string;\n\n  /**\n   * Donate button colour scheme\n   */\n  @Prop() moreInfoButtonColourScheme: string = 'clear-primary';\n\n  /**\n   * Boolean flag telling the component if the campaign is in the future (not open yet).\n   */\n  @Prop() isFutureCampaign: boolean = false;\n\n  /**\n   * Boolean flag telling the component if the campaign is in the future (not open yet).\n   */\n  @Prop() isPastCampaign: boolean = false;\n\n  /**\n   * To be used alongside isFutureCampaign = true or isPastCampaign = true.\n   * If either is true, we render out: 'Launches: ' + datetime or 'Closed: ' + datetime.\n   * Preferred format: DD/MM/YYYY, HH:MM\n   * DON-661.\n   */\n  @Prop() datetime: string;\n\n  private isEmpty(value?: number | string | null) {\n    return value === undefined || value === null || value === '';\n  }\n\n  private handleCardGeneralClick = (event: any) => {\n    this.doCardGeneralClick.emit({ event, url: this.moreInfoButtonUrl });\n  };\n\n  render() {\n    return (\n      <div class={'container space-below-' + this.spaceBelow.toString()}>\n        <div class=\"sleeve\">\n          <div onClick={this.handleCardGeneralClick} class=\"above-button-wrap\">\n            {this.campaignType !== null ? (\n              <div class=\"campaign-type\">\n                <span>{this.campaignType}</span>\n              </div>\n            ) : null}\n\n            {this.banner !== null ? (\n              <div class=\"image-wrap banner\" role=\"presentation\" style={{ 'background-image': 'url(' + this.banner + ')' }}></div>\n            ) : (\n              <div class=\"image-wrap banner\"></div>\n            )}\n\n            <div class=\"title-wrap\">\n              <h3>{this.campaignTitle}</h3>\n              <div class=\"organisation-name\">By {this.organisationName}</div>\n            </div>\n\n            {this.isEmpty(this.primaryFigureAmount) && this.isEmpty(this.secondaryFigureAmount) ? null : (\n              <div class=\"meta-wrap\">\n                {this.isEmpty(this.primaryFigureAmount) ? null : (\n                  <div class=\"meta-item\">\n                    <span class=\"label\">{this.primaryFigureLabel}</span>\n                    <span class=\"text\">{this.primaryFigureAmount}</span>\n                  </div>\n                )}\n                {this.isEmpty(this.secondaryFigureAmount) ? null : (\n                  <div class=\"meta-item\">\n                    <span class=\"label\">{this.secondaryFigureLabel}</span>\n                    <span class=\"text\">{this.secondaryFigureAmount}</span>\n                  </div>\n                )}\n              </div>\n            )}\n            {this.isEmpty(this.progressBarCounter) ? null : (\n              <div class=\"progress-bar-wrap\">\n                <biggive-progress-bar counter={this.progressBarCounter} colour-scheme=\"primary\"></biggive-progress-bar>\n              </div>\n            )}\n          </div>\n          <div class=\"button-wrap\">\n            {this.isFutureCampaign || this.isPastCampaign ? (\n              <div class=\"msg-wrapper\">\n                <biggive-misc-icon background-colour=\"white\" icon-colour=\"black\" icon=\"Timer\"></biggive-misc-icon>\n                {this.isFutureCampaign ? <p>Launches {this.datetime}</p> : <p>Closed {this.datetime}</p>}\n              </div>\n            ) : (\n              <biggive-button full-width=\"true\" colour-scheme={this.donateButtonColourScheme} url={this.donateButtonUrl} label={this.donateButtonLabel}></biggive-button>\n            )}\n            <biggive-button full-width=\"true\" colour-scheme={this.moreInfoButtonColourScheme} url={this.moreInfoButtonUrl} label={this.moreInfoButtonLabel}></biggive-button>\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

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

@@ -26,7 +26,7 @@ const BiggiveCampaignHighlights$1 = /*@__PURE__*/ proxyCustomElement(class Biggi
         this.championUrl = undefined;
     }
     render() {
-        return (h("div", { class: 'container space-below-' + this.spaceBelow }, h("div", { class: "sleeve" }, this.campaignTitle != null ? (h("div", { class: "campaign-title" }, h("span", null, this.campaignTitle))) : null, this.banner !== null && this.banner !== undefined ? (h("div", { class: "image-wrap banner", style: { 'background-image': 'url(' + this.banner + ')' } }, h("img", { src: this.banner, class: "banner" }))) : null, h("div", { class: "meta-wrap" }, h("div", { class: "meta-item" }, h("span", { class: "label" }, this.primaryFigureLabel), h("span", { class: "text" }, this.primaryFigureAmount)), h("div", { class: "meta-item" }, h("span", { class: "label" }, this.secondaryFigureLabel), h("span", { class: "text" }, this.secondaryFigureAmount))), h("div", { class: "progress-bar-wrap" }, h("biggive-progress-bar", { counter: this.progressBarCounter, "colour-scheme": "primary" })), h("div", { class: "stat-wrap" }, this.primaryStatIcon != null ? (h("div", { class: "stat-item" }, h("biggive-misc-icon", { icon: this.primaryStatIcon, "background-colour": "white", "icon-colour": "tertiary" }), h("span", { class: "label" }, this.primaryStatText))) : null, this.secondaryStatIcon != null ? (h("div", { class: "stat-item" }, h("biggive-misc-icon", { icon: this.secondaryStatIcon, "background-colour": "white", "icon-colour": "tertiary" }), h("span", { class: "label" }, this.secondaryStatText))) : null), this.championName != null ? (h("div", { class: "championed-by" }, "Championed by ", h("a", { href: this.championUrl }, this.championName))) : null)));
+        return (h("div", { key: 'bbcf49bd19fe377fea79696306c3d8c974c3bdbb', class: 'container space-below-' + this.spaceBelow }, h("div", { key: '273cc1644ceabfa4f68cd6255d2941ddeadc6964', class: "sleeve" }, this.campaignTitle != null ? (h("div", { class: "campaign-title" }, h("span", null, this.campaignTitle))) : null, this.banner !== null && this.banner !== undefined ? (h("div", { class: "image-wrap banner", style: { 'background-image': 'url(' + this.banner + ')' } }, h("img", { src: this.banner, class: "banner" }))) : null, h("div", { key: 'bd13271c2f3fc9b6f30457dfe3f6ead9d701558b', class: "meta-wrap" }, h("div", { key: 'b1e347aa86b2f3d9a646fabafd8d94d154508c25', class: "meta-item" }, h("span", { key: '90afeac11075c3aa494233ab62adda6c31c88d51', class: "label" }, this.primaryFigureLabel), h("span", { key: '1f497d7b0ac5ec9c8b6c20631dfb6e50ab604de7', class: "text" }, this.primaryFigureAmount)), h("div", { key: '1fd0cdd2ca5d8e1aa999a7a8496b0e95b21df03d', class: "meta-item" }, h("span", { key: '8f0a3847f6a08eca563ddbb9141b8ec368efb900', class: "label" }, this.secondaryFigureLabel), h("span", { key: 'af44f99e312ed388a2a1dd1f4288a21e696f5fbe', class: "text" }, this.secondaryFigureAmount))), h("div", { key: '550372f0f76aad1ec11258af26ac9b5a28c8d0eb', class: "progress-bar-wrap" }, h("biggive-progress-bar", { key: '3ed7e6cf230f549d09ef383b7d056f45a7d7e4fb', counter: this.progressBarCounter, "colour-scheme": "primary" })), h("div", { key: '3fd133550c51fbfe62858467fc8b6589d17dd712', class: "stat-wrap" }, this.primaryStatIcon != null ? (h("div", { class: "stat-item" }, h("biggive-misc-icon", { icon: this.primaryStatIcon, "background-colour": "white", "icon-colour": "tertiary" }), h("span", { class: "label" }, this.primaryStatText))) : null, this.secondaryStatIcon != null ? (h("div", { class: "stat-item" }, h("biggive-misc-icon", { icon: this.secondaryStatIcon, "background-colour": "white", "icon-colour": "tertiary" }), h("span", { class: "label" }, this.secondaryStatText))) : null), this.championName != null ? (h("div", { class: "championed-by" }, "Championed by ", h("a", { href: this.championUrl }, this.championName))) : null)));
     }
     static get style() { return BiggiveCampaignHighlightsStyle0; }
 }, [1, "biggive-campaign-highlights", {

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

@@ -1 +1 @@
-{"file":"biggive-campaign-highlights.js","mappings":";;;;AAAA,MAAM,4BAA4B,GAAG,yiGAAyiG,CAAC;AAC/kG,wCAAe,4BAA4B;;MCM9BA,2BAAyB;;;;;0BAIP,CAAC;;;;;;;kCAmCO,GAAG;;;;;;;;IAmCxC,MAAM;QACJ,QACE,WAAK,KAAK,EAAE,wBAAwB,GAAG,IAAI,CAAC,UAAU,IACpD,WAAK,KAAK,EAAC,QAAQ,IAChB,IAAI,CAAC,aAAa,IAAI,IAAI,IACzB,WAAK,KAAK,EAAC,gBAAgB,IACzB,gBAAO,IAAI,CAAC,aAAa,CAAQ,CAC7B,IACJ,IAAI,EAEP,IAAI,CAAC,MAAM,KAAK,IAAI,IAAI,IAAI,CAAC,MAAM,KAAK,SAAS,IAChD,WAAK,KAAK,EAAC,mBAAmB,EAAC,KAAK,EAAE,EAAE,kBAAkB,EAAE,MAAM,GAAG,IAAI,CAAC,MAAM,GAAG,GAAG,EAAE,IACtF,WAAK,GAAG,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAC,QAAQ,GAAG,CACpC,IACJ,IAAI,EAER,WAAK,KAAK,EAAC,WAAW,IACpB,WAAK,KAAK,EAAC,WAAW,IACpB,YAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,kBAAkB,CAAQ,EACpD,YAAM,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,mBAAmB,CAAQ,CAChD,EACN,WAAK,KAAK,EAAC,WAAW,IACpB,YAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,oBAAoB,CAAQ,EACtD,YAAM,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,qBAAqB,CAAQ,CAClD,CACF,EACN,WAAK,KAAK,EAAC,mBAAmB,IAC5B,4BAAsB,OAAO,EAAE,IAAI,CAAC,kBAAkB,mBAAgB,SAAS,GAAwB,CACnG,EACN,WAAK,KAAK,EAAC,WAAW,IACnB,IAAI,CAAC,eAAe,IAAI,IAAI,IAC3B,WAAK,KAAK,EAAC,WAAW,IACpB,yBAAmB,IAAI,EAAE,IAAI,CAAC,eAAe,uBAAoB,OAAO,iBAAa,UAAU,GAAqB,EACpH,YAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,eAAe,CAAQ,CAC7C,IACJ,IAAI,EACP,IAAI,CAAC,iBAAiB,IAAI,IAAI,IAC7B,WAAK,KAAK,EAAC,WAAW,IACpB,yBAAmB,IAAI,EAAE,IAAI,CAAC,iBAAiB,uBAAoB,OAAO,iBAAa,UAAU,GAAqB,EACtH,YAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,iBAAiB,CAAQ,CAC/C,IACJ,IAAI,CACJ,EACL,IAAI,CAAC,YAAY,IAAI,IAAI,IACxB,WAAK,KAAK,EAAC,eAAe,sBACV,SAAG,IAAI,EAAE,IAAI,CAAC,WAAW,IAAG,IAAI,CAAC,YAAY,CAAK,CAC5D,IACJ,IAAI,CACJ,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveCampaignHighlights"],"sources":["src/components/biggive-campaign-highlights/biggive-campaign-highlights.scss?tag=biggive-campaign-highlights&encapsulation=shadow","src/components/biggive-campaign-highlights/biggive-campaign-highlights.tsx"],"sourcesContent":["@include image-alignment();\n@include spacers();\n\n:host {\n  display: contents;\n}\n\n.container {\n  @include standard-font();\n  @include lower-shadow();\n  background-color: $colour-white;\n  padding: 25px;\n  box-sizing: border-box;\n  height: fit-content;\n\n  .campaign-title {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    text-align: center;\n    font-weight: bold;\n    span {\n      background-color: $colour-secondary-green;\n      color: $colour-black;\n      padding: $spacer-1 $spacer-3;\n      display: inline-block;\n    }\n  }\n  .banner {\n    top: 0;\n    margin-top: 19px;\n    padding-bottom: $aspect-ratio-banners;\n    background-color: #F1F1F1;\n    background-size: contain;\n    background-repeat: no-repeat;\n    margin-bottom: $spacer-4;\n    img {\n      display: none;\n    }\n  }\n  .meta-wrap {\n    @include flex-container-row();\n    margin-top: auto;\n    margin-bottom: $spacer-3;\n    .meta-item {\n      width: calc( 50% - $spacer-3 );\n      .label {\n        @include font-size-small();\n        display: block;\n      }\n      .text {\n        @include heading-3();\n        display: block;\n\n        @media screen and (max-width: $screen-tablet-max) {\n          font-size: 23px;\n        }\n\n        @media screen and (max-width: $screen-mobile-max) {\n          font-size: 21px;;\n        }\n\n        @media screen and (max-width: $screen-mobile-small) {\n          font-size: 17px;\n        }\n      }\n      &:last-child {\n        text-align: right;\n        .text {\n          color: $colour-primary-blue;\n        }\n      }\n    }\n  }\n  .progress-bar-wrap {\n    padding-bottom: $spacer-2;\n    margin-bottom: $spacer-2;\n    border-bottom: 1px solid $colour-grey-light;\n  }\n  .stat-wrap {\n    @include flex-container-row();\n    .stat-item {\n      @include font-size-medium();\n      font-weight: bold;\n      width: calc( 50% - $spacer-3 );\n      margin: auto 0 auto $spacer-3;\n\n      .label {\n        position: relative;\n        bottom: 7px;\n      }\n\n      @media screen and (max-width: $screen-mobile-max) {\n        @include font-size-small();\n        margin: auto 0;\n        text-align: center;\n\n        .label {\n          bottom: 5px;\n        }\n      }\n\n      svg {\n        fill: $colour-tertiary-coral;\n      }\n    }\n  }\n\n  .championed-by {\n    text-align: left;\n    margin-left: 20px;\n    margin-top: 20px;\n    color: $colour-black;\n\n    font-size: 15px;\n\n    @media screen and (max-width: $screen-tablet-max) {\n      font-size: 14px;\n    }\n\n    @media screen and (max-width: $screen-mobile-max) {\n      text-align: center;\n      margin-left: 0;\n      margin-bottom: 10px;\n      font-size: 13px;\n    }\n\n    @media screen and (max-width: $screen-mobile-small) {\n      font-size: 12px;\n    }\n\n    a {\n      text-decoration: none;\n      font-weight: bold;\n      color: $colour-primary-blue;\n      @media screen and (max-width: $screen-mobile-small) {\n        // Show Champion Name on new line in smaller screens\n        display: block;\n      }\n    }\n  }\n\n  @media screen and (max-width: $screen-mobile-max) {\n    padding: 15px;\n  }\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-campaign-highlights',\n  styleUrl: 'biggive-campaign-highlights.scss',\n  shadow: true,\n})\nexport class BiggiveCampaignHighlights {\n  /**\n   * Space below component\n   */\n  @Prop() spaceBelow: number = 0;\n\n  /**\n   * Full URL of a banner image.\n   */\n  @Prop() banner: string;\n\n  /**\n   * Display name of the charity's specific time-bound fundraising campaign.\n   */\n  @Prop() campaignTitle: string;\n\n  /**\n   * Label for the primary figure\n   */\n  @Prop() primaryFigureLabel: string;\n\n  /**\n   * Amount for the primary figure, formatted with currency symbol\n   */\n  @Prop() primaryFigureAmount: string;\n\n  /**\n   * Label for the secondary figure\n   */\n  @Prop() secondaryFigureLabel: string;\n\n  /**\n   * Amount for the secondary figure, formatted with currency symbol\n   */\n  @Prop() secondaryFigureAmount: string;\n\n  /**\n   * Progress bar percentage\n   */\n  @Prop() progressBarCounter: number = 100;\n\n  /**\n   * Primary stat icon\n   */\n  @Prop() primaryStatIcon: string;\n\n  /**\n   * Primary stat text\n   */\n  @Prop() primaryStatText: string;\n\n  /**\n   * Secondary stat icon\n   */\n  @Prop() secondaryStatIcon: string;\n\n  /**\n   * Secondary stat text\n   */\n  @Prop() secondaryStatText: string;\n\n  /**\n   * Champion's name\n   */\n  @Prop() championName: string;\n\n  /**\n   * Link to all meta-campaigns funded by this champion.\n   * For example: /christmas-challenge-2022/the-reed-foundation-22\n   * In other words, it follows the following format:\n   * '/' + campaign.parentRef + '/' + campaign.championRef\n   */\n  @Prop() championUrl: string;\n\n  render() {\n    return (\n      <div class={'container space-below-' + this.spaceBelow}>\n        <div class=\"sleeve\">\n          {this.campaignTitle != null ? (\n            <div class=\"campaign-title\">\n              <span>{this.campaignTitle}</span>\n            </div>\n          ) : null}\n\n          {this.banner !== null && this.banner !== undefined ? (\n            <div class=\"image-wrap banner\" style={{ 'background-image': 'url(' + this.banner + ')' }}>\n              <img src={this.banner} class=\"banner\" />\n            </div>\n          ) : null}\n\n          <div class=\"meta-wrap\">\n            <div class=\"meta-item\">\n              <span class=\"label\">{this.primaryFigureLabel}</span>\n              <span class=\"text\">{this.primaryFigureAmount}</span>\n            </div>\n            <div class=\"meta-item\">\n              <span class=\"label\">{this.secondaryFigureLabel}</span>\n              <span class=\"text\">{this.secondaryFigureAmount}</span>\n            </div>\n          </div>\n          <div class=\"progress-bar-wrap\">\n            <biggive-progress-bar counter={this.progressBarCounter} colour-scheme=\"primary\"></biggive-progress-bar>\n          </div>\n          <div class=\"stat-wrap\">\n            {this.primaryStatIcon != null ? (\n              <div class=\"stat-item\">\n                <biggive-misc-icon icon={this.primaryStatIcon} background-colour=\"white\" icon-colour=\"tertiary\"></biggive-misc-icon>\n                <span class=\"label\">{this.primaryStatText}</span>\n              </div>\n            ) : null}\n            {this.secondaryStatIcon != null ? (\n              <div class=\"stat-item\">\n                <biggive-misc-icon icon={this.secondaryStatIcon} background-colour=\"white\" icon-colour=\"tertiary\"></biggive-misc-icon>\n                <span class=\"label\">{this.secondaryStatText}</span>\n              </div>\n            ) : null}\n          </div>\n          {this.championName != null ? (\n            <div class=\"championed-by\">\n              Championed by <a href={this.championUrl}>{this.championName}</a>\n            </div>\n          ) : null}\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"biggive-campaign-highlights.js","mappings":";;;;AAAA,MAAM,4BAA4B,GAAG,yiGAAyiG,CAAC;AAC/kG,wCAAe,4BAA4B;;MCM9BA,2BAAyB;;;;;0BAIP,CAAC;;;;;;;kCAmCO,GAAG;;;;;;;;IAmCxC,MAAM;QACJ,QACE,4DAAK,KAAK,EAAE,wBAAwB,GAAG,IAAI,CAAC,UAAU,IACpD,4DAAK,KAAK,EAAC,QAAQ,IAChB,IAAI,CAAC,aAAa,IAAI,IAAI,IACzB,WAAK,KAAK,EAAC,gBAAgB,IACzB,gBAAO,IAAI,CAAC,aAAa,CAAQ,CAC7B,IACJ,IAAI,EAEP,IAAI,CAAC,MAAM,KAAK,IAAI,IAAI,IAAI,CAAC,MAAM,KAAK,SAAS,IAChD,WAAK,KAAK,EAAC,mBAAmB,EAAC,KAAK,EAAE,EAAE,kBAAkB,EAAE,MAAM,GAAG,IAAI,CAAC,MAAM,GAAG,GAAG,EAAE,IACtF,WAAK,GAAG,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAC,QAAQ,GAAG,CACpC,IACJ,IAAI,EAER,4DAAK,KAAK,EAAC,WAAW,IACpB,4DAAK,KAAK,EAAC,WAAW,IACpB,6DAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,kBAAkB,CAAQ,EACpD,6DAAM,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,mBAAmB,CAAQ,CAChD,EACN,4DAAK,KAAK,EAAC,WAAW,IACpB,6DAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,oBAAoB,CAAQ,EACtD,6DAAM,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,qBAAqB,CAAQ,CAClD,CACF,EACN,4DAAK,KAAK,EAAC,mBAAmB,IAC5B,6EAAsB,OAAO,EAAE,IAAI,CAAC,kBAAkB,mBAAgB,SAAS,GAAwB,CACnG,EACN,4DAAK,KAAK,EAAC,WAAW,IACnB,IAAI,CAAC,eAAe,IAAI,IAAI,IAC3B,WAAK,KAAK,EAAC,WAAW,IACpB,yBAAmB,IAAI,EAAE,IAAI,CAAC,eAAe,uBAAoB,OAAO,iBAAa,UAAU,GAAqB,EACpH,YAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,eAAe,CAAQ,CAC7C,IACJ,IAAI,EACP,IAAI,CAAC,iBAAiB,IAAI,IAAI,IAC7B,WAAK,KAAK,EAAC,WAAW,IACpB,yBAAmB,IAAI,EAAE,IAAI,CAAC,iBAAiB,uBAAoB,OAAO,iBAAa,UAAU,GAAqB,EACtH,YAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,iBAAiB,CAAQ,CAC/C,IACJ,IAAI,CACJ,EACL,IAAI,CAAC,YAAY,IAAI,IAAI,IACxB,WAAK,KAAK,EAAC,eAAe,sBACV,SAAG,IAAI,EAAE,IAAI,CAAC,WAAW,IAAG,IAAI,CAAC,YAAY,CAAK,CAC5D,IACJ,IAAI,CACJ,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveCampaignHighlights"],"sources":["src/components/biggive-campaign-highlights/biggive-campaign-highlights.scss?tag=biggive-campaign-highlights&encapsulation=shadow","src/components/biggive-campaign-highlights/biggive-campaign-highlights.tsx"],"sourcesContent":["@include image-alignment();\n@include spacers();\n\n:host {\n  display: contents;\n}\n\n.container {\n  @include standard-font();\n  @include lower-shadow();\n  background-color: $colour-white;\n  padding: 25px;\n  box-sizing: border-box;\n  height: fit-content;\n\n  .campaign-title {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    text-align: center;\n    font-weight: bold;\n    span {\n      background-color: $colour-secondary-green;\n      color: $colour-black;\n      padding: $spacer-1 $spacer-3;\n      display: inline-block;\n    }\n  }\n  .banner {\n    top: 0;\n    margin-top: 19px;\n    padding-bottom: $aspect-ratio-banners;\n    background-color: #F1F1F1;\n    background-size: contain;\n    background-repeat: no-repeat;\n    margin-bottom: $spacer-4;\n    img {\n      display: none;\n    }\n  }\n  .meta-wrap {\n    @include flex-container-row();\n    margin-top: auto;\n    margin-bottom: $spacer-3;\n    .meta-item {\n      width: calc( 50% - $spacer-3 );\n      .label {\n        @include font-size-small();\n        display: block;\n      }\n      .text {\n        @include heading-3();\n        display: block;\n\n        @media screen and (max-width: $screen-tablet-max) {\n          font-size: 23px;\n        }\n\n        @media screen and (max-width: $screen-mobile-max) {\n          font-size: 21px;;\n        }\n\n        @media screen and (max-width: $screen-mobile-small) {\n          font-size: 17px;\n        }\n      }\n      &:last-child {\n        text-align: right;\n        .text {\n          color: $colour-primary-blue;\n        }\n      }\n    }\n  }\n  .progress-bar-wrap {\n    padding-bottom: $spacer-2;\n    margin-bottom: $spacer-2;\n    border-bottom: 1px solid $colour-grey-light;\n  }\n  .stat-wrap {\n    @include flex-container-row();\n    .stat-item {\n      @include font-size-medium();\n      font-weight: bold;\n      width: calc( 50% - $spacer-3 );\n      margin: auto 0 auto $spacer-3;\n\n      .label {\n        position: relative;\n        bottom: 7px;\n      }\n\n      @media screen and (max-width: $screen-mobile-max) {\n        @include font-size-small();\n        margin: auto 0;\n        text-align: center;\n\n        .label {\n          bottom: 5px;\n        }\n      }\n\n      svg {\n        fill: $colour-tertiary-coral;\n      }\n    }\n  }\n\n  .championed-by {\n    text-align: left;\n    margin-left: 20px;\n    margin-top: 20px;\n    color: $colour-black;\n\n    font-size: 15px;\n\n    @media screen and (max-width: $screen-tablet-max) {\n      font-size: 14px;\n    }\n\n    @media screen and (max-width: $screen-mobile-max) {\n      text-align: center;\n      margin-left: 0;\n      margin-bottom: 10px;\n      font-size: 13px;\n    }\n\n    @media screen and (max-width: $screen-mobile-small) {\n      font-size: 12px;\n    }\n\n    a {\n      text-decoration: none;\n      font-weight: bold;\n      color: $colour-primary-blue;\n      @media screen and (max-width: $screen-mobile-small) {\n        // Show Champion Name on new line in smaller screens\n        display: block;\n      }\n    }\n  }\n\n  @media screen and (max-width: $screen-mobile-max) {\n    padding: 15px;\n  }\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-campaign-highlights',\n  styleUrl: 'biggive-campaign-highlights.scss',\n  shadow: true,\n})\nexport class BiggiveCampaignHighlights {\n  /**\n   * Space below component\n   */\n  @Prop() spaceBelow: number = 0;\n\n  /**\n   * Full URL of a banner image.\n   */\n  @Prop() banner: string;\n\n  /**\n   * Display name of the charity's specific time-bound fundraising campaign.\n   */\n  @Prop() campaignTitle: string;\n\n  /**\n   * Label for the primary figure\n   */\n  @Prop() primaryFigureLabel: string;\n\n  /**\n   * Amount for the primary figure, formatted with currency symbol\n   */\n  @Prop() primaryFigureAmount: string;\n\n  /**\n   * Label for the secondary figure\n   */\n  @Prop() secondaryFigureLabel: string;\n\n  /**\n   * Amount for the secondary figure, formatted with currency symbol\n   */\n  @Prop() secondaryFigureAmount: string;\n\n  /**\n   * Progress bar percentage\n   */\n  @Prop() progressBarCounter: number = 100;\n\n  /**\n   * Primary stat icon\n   */\n  @Prop() primaryStatIcon: string;\n\n  /**\n   * Primary stat text\n   */\n  @Prop() primaryStatText: string;\n\n  /**\n   * Secondary stat icon\n   */\n  @Prop() secondaryStatIcon: string;\n\n  /**\n   * Secondary stat text\n   */\n  @Prop() secondaryStatText: string;\n\n  /**\n   * Champion's name\n   */\n  @Prop() championName: string;\n\n  /**\n   * Link to all meta-campaigns funded by this champion.\n   * For example: /christmas-challenge-2022/the-reed-foundation-22\n   * In other words, it follows the following format:\n   * '/' + campaign.parentRef + '/' + campaign.championRef\n   */\n  @Prop() championUrl: string;\n\n  render() {\n    return (\n      <div class={'container space-below-' + this.spaceBelow}>\n        <div class=\"sleeve\">\n          {this.campaignTitle != null ? (\n            <div class=\"campaign-title\">\n              <span>{this.campaignTitle}</span>\n            </div>\n          ) : null}\n\n          {this.banner !== null && this.banner !== undefined ? (\n            <div class=\"image-wrap banner\" style={{ 'background-image': 'url(' + this.banner + ')' }}>\n              <img src={this.banner} class=\"banner\" />\n            </div>\n          ) : null}\n\n          <div class=\"meta-wrap\">\n            <div class=\"meta-item\">\n              <span class=\"label\">{this.primaryFigureLabel}</span>\n              <span class=\"text\">{this.primaryFigureAmount}</span>\n            </div>\n            <div class=\"meta-item\">\n              <span class=\"label\">{this.secondaryFigureLabel}</span>\n              <span class=\"text\">{this.secondaryFigureAmount}</span>\n            </div>\n          </div>\n          <div class=\"progress-bar-wrap\">\n            <biggive-progress-bar counter={this.progressBarCounter} colour-scheme=\"primary\"></biggive-progress-bar>\n          </div>\n          <div class=\"stat-wrap\">\n            {this.primaryStatIcon != null ? (\n              <div class=\"stat-item\">\n                <biggive-misc-icon icon={this.primaryStatIcon} background-colour=\"white\" icon-colour=\"tertiary\"></biggive-misc-icon>\n                <span class=\"label\">{this.primaryStatText}</span>\n              </div>\n            ) : null}\n            {this.secondaryStatIcon != null ? (\n              <div class=\"stat-item\">\n                <biggive-misc-icon icon={this.secondaryStatIcon} background-colour=\"white\" icon-colour=\"tertiary\"></biggive-misc-icon>\n                <span class=\"label\">{this.secondaryStatText}</span>\n              </div>\n            ) : null}\n          </div>\n          {this.championName != null ? (\n            <div class=\"championed-by\">\n              Championed by <a href={this.championUrl}>{this.championName}</a>\n            </div>\n          ) : null}\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/biggive-carousel2.js

@@ -66,14 +66,14 @@ const BiggiveCarousel = /*@__PURE__*/ proxyCustomElement(class BiggiveCarousel e
         this.currentTab = newTab;
     }
     render() {
-        return (h("div", { class: 'container column-count-' +
+        return (h("div", { key: '9377f7a62408543e7eb814943e0a39e01d87e160', class: 'container column-count-' +
                 this.columnCount +
                 ' space-below-' +
                 this.spaceBelow +
                 ' 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", { key: 'cd5cf428c8120718335924fd52aa8c0dfda55348', class: "items" }, h("div", { key: 'c48b64e3b589fdbd08d3d12b9b9d512d1f0bcee1', class: "sleeve" }, h("slot", { key: '71f2f2e3bbfe9fb4203c4fb89da58ba723cfb027' }))), h("div", { key: '2e1313240c95a46e56df38d171da330064451f83', class: "navigation" }, h("div", { key: 'b51931d54dd1b4467655a9f889d7e0bcf4697dc5', class: "button prev", onClick: this.clickPrevHandler, title: "Previous" }, h("svg", { key: '14780dcd1a9c4f341271ab46e884f0b4466863fc', width: "9", height: "16", viewBox: "0 0 9 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '8e78202db305389daf814e173e9d166fef8f9ece', d: "M8.29311 14.5703L1.73926 8.01646L8.29311 1.46261", stroke: "#000000", "stroke-width": "2" }))), h("div", { key: 'f8312e9165d39e1e1ff72aa79709074c09a22df1', class: "button next", onClick: this.clickNextHandler, title: "Next" }, h("svg", { key: '9db8cb7bccf8b0de4e9bc665105acdfbffb7ab65', width: "9", height: "16", viewBox: "0 0 9 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'd777e136f2d479a8f046f6f51ea2b0925d9b13cd', d: "M0.739117 1.46094L7.29297 8.01479L0.739118 14.5686", stroke: "#000000", "stroke-width": "2" }))))));
     }
     get host() { return this; }
     static get style() { return BiggiveCarouselStyle0; }

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

@@ -1 +1 @@
-{"file":"biggive-carousel2.js","mappings":"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","names":[],"sources":["src/components/biggive-carousel/biggive-carousel.scss?tag=biggive-carousel&encapsulation=shadow","src/components/biggive-carousel/biggive-carousel.tsx"],"sourcesContent":["@include spacers();\n@include text-colours();\n\n\n:host {\n  display: contents;\n}\n\n.container {\n  @include standard-font();\n  position: relative;\n\n  .items {\n    .sleeve {\n      display: flex;\n      min-width: 100%;\n    }\n  }\n\n\n  .navigation {\n    padding: 10px 0;\n    text-align: right;\n    display: flex;\n    justify-content: end;\n    position: relative;\n    z-index: 1;\n    .button {\n      margin-left: 15px;\n      display: block;\n      width: 30px;\n      height: 30px;\n      padding: 2.5px 10px;\n      box-sizing: border-box;\n      background-color: #FFFFFF;\n      box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.25);\n      border-radius: 50%;\n      cursor: pointer;\n      text-align: center;\n      svg {\n        width: 15px;\n        height: 15px;\n        position: relative;\n        top: 2.5px;\n      }\n      &.prev {\n        left: 0;\n        svg {\n          left: -3px;\n        }\n      }\n      &.next {\n        right: 0;\n        svg {\n          left: -1px;\n        }\n      }\n    }\n  }\n\n}\n\n.container ::slotted(.hidden) {\n  display: none;\n}\n\n.column-count-5 ::slotted(*) {\n  width: calc( (100% / 5) - (( $spacer-4 * 4 ) / 5 ) );\n  @include flex-container-column();\n}\n\n.column-count-4 ::slotted(*) {\n  width: calc( (100% / 4) - (( $spacer-4 * 3 ) / 4 ) );\n  @include flex-container-column();\n}\n\n.column-count-3 ::slotted(*) {\n  width: calc( (100% / 3) - (( $spacer-4 * 2 ) / 3 ) );\n  @include flex-container-column();\n}\n\n.column-count-2 ::slotted(*) {\n  width: calc( (100% / 2) - (( $spacer-4 * 1 ) / 2 ) );\n  @include flex-container-column();\n}\n\n@media screen and (max-width: $screen-tablet-max) {\n  .column-count-2 ::slotted(*),\n  .column-count-3 ::slotted(*),\n  .column-count-4 ::slotted(*),\n  .column-count-5 ::slotted(*) {\n    width: calc( 50% - (($spacer-4 * 1) / 2));\n  }\n}\n\n@media screen and (max-width: $screen-mobile-max) {\n  .column-count-2 ::slotted(*),\n  .column-count-3 ::slotted(*),\n  .column-count-4 ::slotted(*),\n  .column-count-5 ::slotted(*) {\n    width: 100%;\n  }\n}\n","import { Component, Method, State, Prop, Element, h } from '@stencil/core';\nimport { brandColour } from '../../globals/brand-colour';\nimport { spacingOption } from '../../globals/spacing-option';\n\n@Component({\n  tag: 'biggive-carousel',\n  styleUrl: 'biggive-carousel.scss',\n  shadow: true,\n})\nexport class BiggiveCarousel {\n  @Element() host: HTMLBiggiveCarouselElement;\n\n  @State() versions: [];\n  @Prop() spaceBelow: spacingOption = 4;\n  @Prop() columnCount: 1 | 2 | 3 | 4 | 5 = 3;\n  @Prop() buttonBackgroundColour: brandColour = 'white';\n  @Prop() buttonIconColour: brandColour = 'primary';\n\n  private currentTab = 0;\n  private itemCount = 0;\n  private itemWidthPx = 0;\n  private columnGapPx = 0;\n  private sleeve: HTMLElement;\n\n  componentDidRender() {\n    this.sleeve = this.host.shadowRoot?.querySelector<HTMLElement>('.sleeve')!;\n    this.resizeToFitContent();\n  }\n\n  @Method()\n  public async resizeToFitContent() {\n    let children = new Array<HTMLElement>();\n    Array.from(this.host.children).forEach(item => {\n      if (!item.classList.contains('hidden')) {\n        children.push(item as HTMLElement);\n      }\n    });\n\n    this.itemCount = children.length;\n\n    if (children.length > 0) {\n      this.columnGapPx = 30;\n\n      this.itemWidthPx = (this.sleeve.parentElement?.offsetWidth! - (this.columnCount - 1) * this.columnGapPx) / this.columnCount;\n\n      this.sleeve.style.width = (this.itemWidthPx + this.columnGapPx) * children.length + 'px';\n      this.sleeve.style.height = this.sleeve.style.height;\n      this.sleeve.style.transform = 'translate3d(0px, 0, 0)';\n\n      children.forEach(el => {\n        el.style.width = this.itemWidthPx + 'px';\n        el.style.marginRight = this.columnGapPx + 'px';\n      });\n    }\n  }\n\n  /*\n   * Animates a transition to show the NEXT or PREVIOUS element in the carousel.\n   * Does nothing if there is no next or previous element.\n   */\n  private showTab(direction: 'NEXT' | 'PREV') {\n    const newTab = this.currentTab + (direction === 'PREV' ? -1 : 1);\n\n    if (newTab < 0 || newTab > this.itemCount - this.columnCount) {\n      return;\n    }\n\n    const pos = 0 - (this.itemWidthPx + this.columnGapPx) * newTab;\n\n    this.sleeve.style.transitionDuration = '0.3s';\n    this.sleeve.style.transitionTimingFunction = 'ease-out';\n    this.sleeve.style.transform = 'translate3d(' + pos + 'px, 0, 0)';\n    this.currentTab = newTab;\n  }\n\n  private clickPrevHandler = () => {\n    this.showTab('PREV');\n  };\n\n  private clickNextHandler = () => {\n    this.showTab('NEXT');\n  };\n\n  render() {\n    return (\n      <div\n        class={\n          'container column-count-' +\n          this.columnCount +\n          ' space-below-' +\n          this.spaceBelow +\n          ' button-background-colour-' +\n          this.buttonBackgroundColour +\n          ' button-icon-colour-' +\n          this.buttonIconColour\n        }\n      >\n        <div class=\"items\">\n          <div class=\"sleeve\">\n            <slot></slot>\n          </div>\n        </div>\n\n        <div class=\"navigation\">\n          <div class=\"button prev\" onClick={this.clickPrevHandler} title=\"Previous\">\n            <svg width=\"9\" height=\"16\" viewBox=\"0 0 9 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M8.29311 14.5703L1.73926 8.01646L8.29311 1.46261\" stroke=\"#000000\" stroke-width=\"2\" />\n            </svg>\n          </div>\n          <div class=\"button next\" onClick={this.clickNextHandler} title=\"Next\">\n            <svg width=\"9\" height=\"16\" viewBox=\"0 0 9 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M0.739117 1.46094L7.29297 8.01479L0.739118 14.5686\" stroke=\"#000000\" stroke-width=\"2\" />\n            </svg>\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"biggive-carousel2.js","mappings":"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","names":[],"sources":["src/components/biggive-carousel/biggive-carousel.scss?tag=biggive-carousel&encapsulation=shadow","src/components/biggive-carousel/biggive-carousel.tsx"],"sourcesContent":["@include spacers();\n@include text-colours();\n\n\n:host {\n  display: contents;\n}\n\n.container {\n  @include standard-font();\n  position: relative;\n\n  .items {\n    .sleeve {\n      display: flex;\n      min-width: 100%;\n    }\n  }\n\n\n  .navigation {\n    padding: 10px 0;\n    text-align: right;\n    display: flex;\n    justify-content: end;\n    position: relative;\n    z-index: 1;\n    .button {\n      margin-left: 15px;\n      display: block;\n      width: 30px;\n      height: 30px;\n      padding: 2.5px 10px;\n      box-sizing: border-box;\n      background-color: #FFFFFF;\n      box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.25);\n      border-radius: 50%;\n      cursor: pointer;\n      text-align: center;\n      svg {\n        width: 15px;\n        height: 15px;\n        position: relative;\n        top: 2.5px;\n      }\n      &.prev {\n        left: 0;\n        svg {\n          left: -3px;\n        }\n      }\n      &.next {\n        right: 0;\n        svg {\n          left: -1px;\n        }\n      }\n    }\n  }\n\n}\n\n.container ::slotted(.hidden) {\n  display: none;\n}\n\n.column-count-5 ::slotted(*) {\n  width: calc( (100% / 5) - (( $spacer-4 * 4 ) / 5 ) );\n  @include flex-container-column();\n}\n\n.column-count-4 ::slotted(*) {\n  width: calc( (100% / 4) - (( $spacer-4 * 3 ) / 4 ) );\n  @include flex-container-column();\n}\n\n.column-count-3 ::slotted(*) {\n  width: calc( (100% / 3) - (( $spacer-4 * 2 ) / 3 ) );\n  @include flex-container-column();\n}\n\n.column-count-2 ::slotted(*) {\n  width: calc( (100% / 2) - (( $spacer-4 * 1 ) / 2 ) );\n  @include flex-container-column();\n}\n\n@media screen and (max-width: $screen-tablet-max) {\n  .column-count-2 ::slotted(*),\n  .column-count-3 ::slotted(*),\n  .column-count-4 ::slotted(*),\n  .column-count-5 ::slotted(*) {\n    width: calc( 50% - (($spacer-4 * 1) / 2));\n  }\n}\n\n@media screen and (max-width: $screen-mobile-max) {\n  .column-count-2 ::slotted(*),\n  .column-count-3 ::slotted(*),\n  .column-count-4 ::slotted(*),\n  .column-count-5 ::slotted(*) {\n    width: 100%;\n  }\n}\n","import { Component, Method, State, Prop, Element, h } from '@stencil/core';\nimport { brandColour } from '../../globals/brand-colour';\nimport { spacingOption } from '../../globals/spacing-option';\n\n@Component({\n  tag: 'biggive-carousel',\n  styleUrl: 'biggive-carousel.scss',\n  shadow: true,\n})\nexport class BiggiveCarousel {\n  @Element() host: HTMLBiggiveCarouselElement;\n\n  @State() versions: [];\n  @Prop() spaceBelow: spacingOption = 4;\n  @Prop() columnCount: 1 | 2 | 3 | 4 | 5 = 3;\n  @Prop() buttonBackgroundColour: brandColour = 'white';\n  @Prop() buttonIconColour: brandColour = 'primary';\n\n  private currentTab = 0;\n  private itemCount = 0;\n  private itemWidthPx = 0;\n  private columnGapPx = 0;\n  private sleeve: HTMLElement;\n\n  componentDidRender() {\n    this.sleeve = this.host.shadowRoot?.querySelector<HTMLElement>('.sleeve')!;\n    this.resizeToFitContent();\n  }\n\n  @Method()\n  public async resizeToFitContent() {\n    let children = new Array<HTMLElement>();\n    Array.from(this.host.children).forEach(item => {\n      if (!item.classList.contains('hidden')) {\n        children.push(item as HTMLElement);\n      }\n    });\n\n    this.itemCount = children.length;\n\n    if (children.length > 0) {\n      this.columnGapPx = 30;\n\n      this.itemWidthPx = (this.sleeve.parentElement?.offsetWidth! - (this.columnCount - 1) * this.columnGapPx) / this.columnCount;\n\n      this.sleeve.style.width = (this.itemWidthPx + this.columnGapPx) * children.length + 'px';\n      this.sleeve.style.height = this.sleeve.style.height;\n      this.sleeve.style.transform = 'translate3d(0px, 0, 0)';\n\n      children.forEach(el => {\n        el.style.width = this.itemWidthPx + 'px';\n        el.style.marginRight = this.columnGapPx + 'px';\n      });\n    }\n  }\n\n  /*\n   * Animates a transition to show the NEXT or PREVIOUS element in the carousel.\n   * Does nothing if there is no next or previous element.\n   */\n  private showTab(direction: 'NEXT' | 'PREV') {\n    const newTab = this.currentTab + (direction === 'PREV' ? -1 : 1);\n\n    if (newTab < 0 || newTab > this.itemCount - this.columnCount) {\n      return;\n    }\n\n    const pos = 0 - (this.itemWidthPx + this.columnGapPx) * newTab;\n\n    this.sleeve.style.transitionDuration = '0.3s';\n    this.sleeve.style.transitionTimingFunction = 'ease-out';\n    this.sleeve.style.transform = 'translate3d(' + pos + 'px, 0, 0)';\n    this.currentTab = newTab;\n  }\n\n  private clickPrevHandler = () => {\n    this.showTab('PREV');\n  };\n\n  private clickNextHandler = () => {\n    this.showTab('NEXT');\n  };\n\n  render() {\n    return (\n      <div\n        class={\n          'container column-count-' +\n          this.columnCount +\n          ' space-below-' +\n          this.spaceBelow +\n          ' button-background-colour-' +\n          this.buttonBackgroundColour +\n          ' button-icon-colour-' +\n          this.buttonIconColour\n        }\n      >\n        <div class=\"items\">\n          <div class=\"sleeve\">\n            <slot></slot>\n          </div>\n        </div>\n\n        <div class=\"navigation\">\n          <div class=\"button prev\" onClick={this.clickPrevHandler} title=\"Previous\">\n            <svg width=\"9\" height=\"16\" viewBox=\"0 0 9 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M8.29311 14.5703L1.73926 8.01646L8.29311 1.46261\" stroke=\"#000000\" stroke-width=\"2\" />\n            </svg>\n          </div>\n          <div class=\"button next\" onClick={this.clickNextHandler} title=\"Next\">\n            <svg width=\"9\" height=\"16\" viewBox=\"0 0 9 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M0.739117 1.46094L7.29297 8.01479L0.739118 14.5686\" stroke=\"#000000\" stroke-width=\"2\" />\n            </svg>\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

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

@@ -19,7 +19,7 @@ const BiggiveCategoryIcon$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveCate
         return icon;
     }
     render() {
-        return (h("div", { class: "container" }, h("div", { class: 'category-icon-item background-colour-' + this.backgroundColour }, h("a", { href: this.url }, h("svg", { width: this.getCategoryIcon().icon[0], height: this.getCategoryIcon().icon[1], xmlns: "http://www.w3.org/2000/svg", class: 'fill-' + this.iconColour, viewBox: '0 0 ' + this.getCategoryIcon().icon[0] + ' ' + this.getCategoryIcon().icon[1] }, h("path", { d: this.getCategoryIcon().icon[4].toString() })))), h("div", { class: "label" }, this.label)));
+        return (h("div", { key: '7e389fac9238aefc77512ae1f980e49b3eba4672', class: "container" }, h("div", { key: '5ecfdf7c51d2e49a1ccc7083f1763af3068ff538', class: 'category-icon-item background-colour-' + this.backgroundColour }, h("a", { key: '227a760e2041ac222caf6bfef39647cf6ab16962', href: this.url }, h("svg", { key: '6abc97fe20959054433408468b4bbbc4638b82fd', width: this.getCategoryIcon().icon[0], height: this.getCategoryIcon().icon[1], xmlns: "http://www.w3.org/2000/svg", class: 'fill-' + this.iconColour, viewBox: '0 0 ' + this.getCategoryIcon().icon[0] + ' ' + this.getCategoryIcon().icon[1] }, h("path", { key: '5ddb5c11669c939676623417eba8573573d94763', d: this.getCategoryIcon().icon[4].toString() })))), h("div", { key: 'eaee89c071a8152414238585616dbe50627526dc', class: "label" }, this.label)));
     }
     static get style() { return BiggiveCategoryIconStyle0; }
 }, [0, "biggive-category-icon", {

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

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

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

@@ -34,7 +34,7 @@ const BiggiveCookieBanner$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveCook
         this.blogUriPrefix = undefined;
     }
     render() {
-        return (h("div", { class: "cooke-consent-container" }, h("biggive-popup", { id: "cookie-preferences-popup" }, h("div", { class: "content" }, h("h4", { class: "space-above-0 space-below-3 text-colour-primary" }, "Manage your cookie preferences"), h("form", null, h("div", { class: "radio-group" }, h("h5", null, "Essential Cookies"), h("p", null, "These cookies are necessary to ensure our website functions correctly and include required cookies from third parties."), h("input", { type: "radio", name: "necassary", id: "necassary-off", disabled: true }), h("label", { htmlFor: "necassary-on" }, "Off"), h("input", { type: "radio", name: "necassary", id: "necassary-on", disabled: true, checked: true }), h("label", { htmlFor: "necassary-on" }, "On")), h("div", { class: "radio-group" }, h("h5", null, "Analytics & Testing Cookies"), h("p", null, "We use analytics cookies to track activity on our website. For example, the pages you\u2019ve visited, the content you\u2019ve engaged with and the search terms you\u2019ve used. This allows us to personalise and improve our content."), h("p", null, "We use testing cookies to collect data on how you interact with website features. These insights allow us to update our website and build features that enhance your user experience."), h("input", { type: "radio", name: "a-and-t", id: "a-and-t-off", checked: true }), h("label", { htmlFor: "a-and-t-off" }, "Off"), h("input", { type: "radio", name: "a-and-t", id: "a-and-t-on" }), h("label", { htmlFor: "a-and-t-on" }, "On")), h("div", { class: "radio-group" }, h("h5", null, "Third-party Cookies "), h("p", null, "These cookies are used to track activity, which can help to provide a better experience and improve functionality across various applications. For example, our donation experience survey."), h("input", { type: "radio", name: "third-party", id: "third-party-off", checked: true }), h("label", { htmlFor: "third-party-off" }, "Off"), h("input", { type: "radio", name: "third-party", id: "third-party-on" }), h("label", { htmlFor: "third-party-on" }, "On")), h("biggive-button", { "space-below": "0", "space-above": "2", "colour-scheme": "secondary", "is-past-campaign": "false", "is-future-campaign": "false", label: "Accept Selected Cookies", "open-in-new-tab": "false", "full-width": "false", size: "small", rounded: false, centered: false, "button-id": "accept-selected-button", onClick: this.handleAcceptSelectedCookies })))), h("h2", null, "Our website uses cookies"), h("p", null, "We use some essential cookies to make our website work. We'd also like to share data with our analytics platform and use analytics cookies to understand how you use the website and make improvements."), h("p", null, h("a", { href: this.blogUriPrefix + '/privacy' }, "Find out more in our Privacy Policy")), h("div", { class: "button-group" }, h("biggive-button", { onClick: this.handleAcceptAllClick, "space-below": "0", "colour-scheme": "secondary", "is-past-campaign": "false", "is-future-campaign": "false", label: "Accept All", "open-in-new-tab": "false", "full-width": "true", size: "medium", rounded: false, centered: false, "button-id": "accept-all-button" }), h("biggive-button", { onClick: this.handleChoosePrefencesClick, "space-below": "0", "colour-scheme": "grey-light", "is-past-campaign": "false", "is-future-campaign": "false", label: "Choose Preferences", "open-in-new-tab": "false", "full-width": "true", size: "medium", rounded: false, centered: false, "button-id": "choose-preferences-button" }))));
+        return (h("div", { key: 'eac18394950c4ad7af25bc9262828eb2d2b9d4c7', class: "cooke-consent-container" }, h("biggive-popup", { key: 'af5e75e177f9e3bd35070adad5e0e7423f92cebf', id: "cookie-preferences-popup" }, h("div", { key: '248e5f66c4c070eadef3a35c0dfd9076cf61de77', class: "content" }, h("h4", { key: 'ba5335518b5205da5b4bc90c6190cf90015bd76a', class: "space-above-0 space-below-3 text-colour-primary" }, "Manage your cookie preferences"), h("form", { key: 'e773e891d5322bd822901475c0c97ef844c5330c' }, h("div", { key: 'b25fd1baff2cddb2956dead31af89f9e50acde52', class: "radio-group" }, h("h5", { key: '495c06e4e3a330a9dab6887ba3668bfa976ff29d' }, "Essential Cookies"), h("p", { key: '29290c9eb229e0b679d33f889e1ea6e502a41b68' }, "These cookies are necessary to ensure our website functions correctly and include required cookies from third parties."), h("input", { key: '192ca2969405dbbc264e9e7b5c81161cf1f67444', type: "radio", name: "necassary", id: "necassary-off", disabled: true }), h("label", { key: '6e6e78e28ecc23e29b60dc9d727b3e2246b7906c', htmlFor: "necassary-on" }, "Off"), h("input", { key: 'fc38cc15906313973b80b461e66c1b9013323976', type: "radio", name: "necassary", id: "necassary-on", disabled: true, checked: true }), h("label", { key: '6d2361238d0c032fa064229f324709191390b4f5', htmlFor: "necassary-on" }, "On")), h("div", { key: '855b8d5834feca40110b616671aaeaa6841656b9', class: "radio-group" }, h("h5", { key: '8f3dd8ee846a2ea002c85d2d1c9b82732ff87918' }, "Analytics & Testing Cookies"), h("p", { key: '341585f41b9603c7e7af2cf5cc5980692061531f' }, "We use analytics cookies to track activity on our website. For example, the pages you\u2019ve visited, the content you\u2019ve engaged with and the search terms you\u2019ve used. This allows us to personalise and improve our content."), h("p", { key: '1824205acd1c31c1abf8d032dcf9bc1c034cd7d3' }, "We use testing cookies to collect data on how you interact with website features. These insights allow us to update our website and build features that enhance your user experience."), h("input", { key: '27c7ecbf5f5d419f680bcca626fae462f13b88d7', type: "radio", name: "a-and-t", id: "a-and-t-off", checked: true }), h("label", { key: 'b80a7783c0832d2c55dafa2a3389da8c4cfdbe9b', htmlFor: "a-and-t-off" }, "Off"), h("input", { key: 'e3cae161a7df550dae036fda3bd5cae69180394b', type: "radio", name: "a-and-t", id: "a-and-t-on" }), h("label", { key: 'bcefc15012a9f4aa3ab8235a387523ea45d7effd', htmlFor: "a-and-t-on" }, "On")), h("div", { key: '7f6611a789b4491390e7ef1c8987f88d3e9abf27', class: "radio-group" }, h("h5", { key: '80995388585e051713acd51962cd49a9bfb326ce' }, "Third-party Cookies "), h("p", { key: 'b47056965d52e623742dc93de79532edcb83058d' }, "These cookies are used to track activity, which can help to provide a better experience and improve functionality across various applications. For example, our donation experience survey."), h("input", { key: 'fe20268db432763c5eac81edee14fab6852d4f4b', type: "radio", name: "third-party", id: "third-party-off", checked: true }), h("label", { key: '727aa44443b580bb69a63a5faa04105365edf9c7', htmlFor: "third-party-off" }, "Off"), h("input", { key: '4d886dd596dd281a57567b07cd649e9927ce44f5', type: "radio", name: "third-party", id: "third-party-on" }), h("label", { key: '9592d844e1539956c09c67a1ea93b78795a13f04', htmlFor: "third-party-on" }, "On")), h("biggive-button", { key: 'd575180ed7f8cf291533eab6773a8c6bc2296828', "space-below": "0", "space-above": "2", "colour-scheme": "secondary", "is-past-campaign": "false", "is-future-campaign": "false", label: "Accept Selected Cookies", "open-in-new-tab": "false", "full-width": "false", size: "small", rounded: false, centered: false, "button-id": "accept-selected-button", onClick: this.handleAcceptSelectedCookies })))), h("h2", { key: 'ef79a0ab749a6a09328f6f08acfb6f55534713b0' }, "Our website uses cookies"), h("p", { key: '0c563253e6698ae2c03d723f8763642e44fd3fe6' }, "We use some essential cookies to make our website work. We'd also like to share data with our analytics platform and use analytics cookies to understand how you use the website and make improvements."), h("p", { key: '8b2536cde409b1e40263a0d4af7a67890c7f9458' }, h("a", { key: '919733e7cbe3841009fe89faf69c2002cc82cf72', href: this.blogUriPrefix + '/privacy' }, "Find out more in our Privacy Policy")), h("div", { key: 'afa3d41db3be482f5caafd6a3769cb0771bbabba', class: "button-group" }, h("biggive-button", { key: '9decb727d60a1460043b5e77ed85f4a473643a62', onClick: this.handleAcceptAllClick, "space-below": "0", "colour-scheme": "secondary", "is-past-campaign": "false", "is-future-campaign": "false", label: "Accept All", "open-in-new-tab": "false", "full-width": "true", size: "medium", rounded: false, centered: false, "button-id": "accept-all-button" }), h("biggive-button", { key: '604be2bc1aa782b8fa270c0eca691da069c9ef92', onClick: this.handleChoosePrefencesClick, "space-below": "0", "colour-scheme": "grey-light", "is-past-campaign": "false", "is-future-campaign": "false", label: "Choose Preferences", "open-in-new-tab": "false", "full-width": "true", size: "medium", rounded: false, centered: false, "button-id": "choose-preferences-button" }))));
     }
     get el() { return this; }
     static get style() { return BiggiveCookieBannerStyle0; }