@biggive/components 1.0.139 → 1.0.141

package/dist/cjs/loader.cjs.js

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["biggive-back-to-top_26.cjs",[[1,"biggive-campaign-card-filter-grid",{"spaceBelow":[2,"space-below"],"intro":[1],"placeholderText":[1,"placeholder-text"],"buttonText":[1,"button-text"],"categoryOptions":[16],"beneficiaryOptions":[16],"locationOptions":[16],"fundingOptions":[16],"selectedLabel":[1,"selected-label"]},[[0,"doSelectChange","doOptionSelectCompletedHandler"]]],[1,"biggive-campaign-card",{"spaceBelow":[2,"space-below"],"campaignType":[1,"campaign-type"],"banner":[1],"campaignTitle":[1,"campaign-title"],"organisationName":[1,"organisation-name"],"primaryFigureLabel":[1,"primary-figure-label"],"primaryFigureAmount":[1,"primary-figure-amount"],"secondaryFigureLabel":[1,"secondary-figure-label"],"secondaryFigureAmount":[1,"secondary-figure-amount"],"progressBarCounter":[2,"progress-bar-counter"],"donateButtonLabel":[1,"donate-button-label"],"donateButtonUrl":[1,"donate-button-url"],"donateButtonColourScheme":[1,"donate-button-colour-scheme"],"moreInfoButtonLabel":[1,"more-info-button-label"],"moreInfoButtonUrl":[1,"more-info-button-url"],"moreInfoButtonColourScheme":[1,"more-info-button-colour-scheme"]}],[1,"biggive-campaign-highlights",{"spaceBelow":[2,"space-below"],"banner":[1],"campaignTitle":[1,"campaign-title"],"primaryFigureLabel":[1,"primary-figure-label"],"primaryFigureAmount":[1,"primary-figure-amount"],"secondaryFigureLabel":[1,"secondary-figure-label"],"secondaryFigureAmount":[1,"secondary-figure-amount"],"progressBarCounter":[2,"progress-bar-counter"],"primaryStatIcon":[1,"primary-stat-icon"],"primaryStatText":[1,"primary-stat-text"],"secondaryStatIcon":[1,"secondary-stat-icon"],"secondaryStatText":[1,"secondary-stat-text"]}],[1,"biggive-call-to-action",{"spaceAbove":[2,"space-above"],"spaceBelow":[2,"space-below"],"defaultTextColour":[1,"default-text-colour"],"slugSize":[2,"slug-size"],"slugColour":[1,"slug-colour"],"slug":[1],"mainTitleColour":[1,"main-title-colour"],"mainTitleSize":[2,"main-title-size"],"mainTitle":[1,"main-title"],"subtitleSize":[2,"subtitle-size"],"subtitleColour":[1,"subtitle-colour"],"subtitle":[1],"teaserColour":[1,"teaser-colour"],"teaser":[1],"primaryButtonUrl":[1,"primary-button-url"],"primaryButtonLabel":[1,"primary-button-label"],"primaryButtonColourScheme":[1,"primary-button-colour-scheme"],"secondaryButtonUrl":[1,"secondary-button-url"],"secondaryButtonLabel":[1,"secondary-button-label"],"secondaryButtonColourScheme":[1,"secondary-button-colour-scheme"]}],[1,"biggive-footer"],[1,"biggive-hero-image",{"spaceBelow":[2,"space-below"],"colourScheme":[1,"colour-scheme"],"slug":[1],"slugColour":[1,"slug-colour"],"logo":[1],"mainImage":[1,"main-image"],"mainImageAlignHorizontal":[1,"main-image-align-horizontal"],"mainImageAlignVertical":[1,"main-image-align-vertical"],"mainTitle":[1,"main-title"],"mainTitleColour":[1,"main-title-colour"],"teaser":[1],"teaserColour":[1,"teaser-colour"],"buttonUrl":[1,"button-url"],"buttonLabel":[1,"button-label"],"buttonColourScheme":[1,"button-colour-scheme"]}],[1,"biggive-image-feature",{"spaceBelow":[2,"space-below"],"defaultTextColour":[1,"default-text-colour"],"imageUrl":[1,"image-url"],"slug":[1],"slugColour":[1,"slug-colour"],"mainTitle":[1,"main-title"],"mainTitleColour":[1,"main-title-colour"],"teaser":[1],"teaserColour":[1,"teaser-colour"],"buttonUrl":[1,"button-url"],"buttonLabel":[1,"button-label"],"buttonColourScheme":[1,"button-colour-scheme"]}],[1,"biggive-video-feature",{"spaceAbove":[2,"space-above"],"spaceBelow":[2,"space-below"],"defaultTextColour":[1,"default-text-colour"],"videoUrl":[1,"video-url"],"slug":[1],"slugColour":[1,"slug-colour"],"mainTitle":[1,"main-title"],"mainTitleColour":[1,"main-title-colour"],"teaser":[1],"teaserColour":[1,"teaser-colour"],"buttonUrl":[1,"button-url"],"buttonLabel":[1,"button-label"],"buttonColourScheme":[1,"button-colour-scheme"]}],[1,"biggive-back-to-top"],[1,"biggive-branded-image",{"spaceBelow":[2,"space-below"],"imageUrl":[1,"image-url"],"logoUrl":[1,"logo-url"],"slug":[1],"charityName":[1,"charity-name"],"charityLocation":[1,"charity-location"]}],[1,"biggive-grid",{"spaceBelow":[2,"space-below"],"columnCount":[2,"column-count"],"columnGap":[2,"column-gap"]}],[1,"biggive-header",{"spaceBelow":[2,"space-below"],"logoUrl":[1,"logo-url"]}],[1,"biggive-heading",{"spaceAbove":[2,"space-above"],"spaceBelow":[2,"space-below"],"colour":[1],"htmlElement":[1,"html-element"],"size":[2],"align":[1],"text":[1]}],[1,"biggive-page-column"],[1,"biggive-page-columns",{"spaceBelow":[2,"space-below"]}],[1,"biggive-page-section",{"spaceBelow":[2,"space-below"],"sectionStyleTop":[1,"section-style-top"],"sectionStyleBottom":[1,"section-style-bottom"],"colourScheme":[1,"colour-scheme"]}],[1,"biggive-quote",{"spaceBelow":[2,"space-below"],"defaultTextColour":[1,"default-text-colour"],"quote":[1],"attribution":[1]}],[0,"biggive-social-icon",{"service":[1],"backgroundColour":[1,"background-colour"],"iconColour":[1,"icon-colour"],"url":[1]}],[1,"biggive-totalizer",{"spaceBelow":[2,"space-below"],"primaryColour":[1,"primary-colour"],"primaryTextColour":[1,"primary-text-colour"],"secondaryColour":[1,"secondary-colour"],"secondaryTextColour":[1,"secondary-text-colour"],"mainMessage":[1,"main-message"]}],[1,"biggive-totalizer-ticker-item",{"figure":[1],"label":[1]}],[1,"biggive-form-field-select",{"selectedValue":[1,"selected-value"],"selectedLabel":[1,"selected-label"],"spaceBelow":[2,"space-below"],"placeholder":[1]},[[0,"doOptionSelect","doOptionSelectCompletedHandler"]]],[1,"biggive-form-field-select-option",{"label":[1],"value":[1],"selectedValue":[32],"selectedLabel":[32]}],[0,"biggive-misc-icon",{"backgroundColour":[1,"background-colour"],"iconColour":[1,"icon-colour"],"icon":[1],"url":[1]}],[1,"biggive-popup",{"open":[64]}],[1,"biggive-progress-bar",{"spaceBelow":[2,"space-below"],"colourScheme":[1,"colour-scheme"],"counter":[2]}],[1,"biggive-button",{"spaceBelow":[2,"space-below"],"colourScheme":[1,"colour-scheme"],"label":[1],"url":[1],"fullWidth":[4,"full-width"],"size":[1],"rounded":[4]}]]],["biggive-article-card.cjs",[[1,"biggive-article-card",{"spaceBelow":[2,"space-below"],"backgroundColour":[1,"background-colour"],"backgroundColourHover":[1,"background-colour-hover"],"textColour":[1,"text-colour"],"slug":[1],"date":[1],"mainTitle":[1,"main-title"],"imageUrl":[1,"image-url"],"imageLabel":[1,"image-label"],"buttonLabel":[1,"button-label"],"buttonUrl":[1,"button-url"]}]]],["biggive-basic-card.cjs",[[1,"biggive-basic-card",{"spaceBelow":[2,"space-below"],"backgroundColour":[1,"background-colour"],"backgroundImageUrl":[1,"background-image-url"],"cardColour":[1,"card-colour"],"textColour":[1,"text-colour"],"mainTitle":[1,"main-title"],"subtitle":[1],"iconColour":[1,"icon-colour"],"buttonLabel":[1,"button-label"],"buttonUrl":[1,"button-url"],"buttonColourScheme":[1,"button-colour-scheme"]}]]],["biggive-search.cjs",[[1,"biggive-search",{"placeholderText":[1,"placeholder-text"],"buttonText":[1,"button-text"],"searchText":[32]}]]],["biggive-beneficiary-icon.cjs",[[0,"biggive-beneficiary-icon",{"backgroundColour":[1,"background-colour"],"iconColour":[1,"icon-colour"],"icon":[1],"label":[1],"url":[1]}]]],["biggive-boxed-content.cjs",[[1,"biggive-boxed-content",{"spaceBelow":[2,"space-below"],"verticalPadding":[2,"vertical-padding"],"horizontalPadding":[2,"horizontal-padding"],"backgroundColour":[1,"background-colour"],"shadow":[4]}]]],["biggive-category-icon.cjs",[[0,"biggive-category-icon",{"backgroundColour":[1,"background-colour"],"iconColour":[1,"icon-colour"],"icon":[1],"label":[1],"url":[1]}]]],["biggive-form.cjs",[[1,"biggive-form"]]],["biggive-formatted-text.cjs",[[1,"biggive-formatted-text",{"spaceBelow":[2,"space-below"],"defaultTextColour":[1,"default-text-colour"]}]]],["biggive-icon-group.cjs",[[1,"biggive-icon-group",{"spaceBelow":[2,"space-below"],"label":[1]}]]],["biggive-image.cjs",[[1,"biggive-image",{"spaceAbove":[2,"space-above"],"spaceBelow":[2,"space-below"],"imageUrl":[1,"image-url"],"width":[2],"height":[2],"sizeUnit":[1,"size-unit"]}]]],["biggive-nav-group.cjs",[[1,"biggive-nav-group",{"inline":[4]}]]],["biggive-nav-item.cjs",[[1,"biggive-nav-item",{"url":[1],"label":[1],"iconColour":[1,"icon-colour"]}]]],["biggive-popup-standalone.cjs",[[1,"biggive-popup-standalone"]]],["biggive-tab.cjs",[[1,"biggive-tab",{"tabTitle":[1,"tab-title"]}]]],["biggive-tabbed-content.cjs",[[1,"biggive-tabbed-content",{"spaceBelow":[2,"space-below"],"defaultTextColour":[1,"default-text-colour"]}]]],["biggive-text-input.cjs",[[1,"biggive-text-input"]]],["biggive-video.cjs",[[1,"biggive-video",{"spaceAbove":[2,"space-above"],"spaceBelow":[2,"space-below"],"videoUrl":[1,"video-url"]}]]]], options);
+  return index.bootstrapLazy([["biggive-back-to-top_26.cjs",[[1,"biggive-campaign-card-filter-grid",{"spaceBelow":[2,"space-below"],"intro":[1],"searchText":[1,"search-text"],"placeholderText":[1,"placeholder-text"],"buttonText":[1,"button-text"],"categoryOptions":[16],"beneficiaryOptions":[16],"locationOptions":[16],"fundingOptions":[16],"selectedLabel":[1,"selected-label"]},[[0,"doSelectChange","doOptionSelectCompletedHandler"]]],[1,"biggive-campaign-card",{"spaceBelow":[2,"space-below"],"campaignType":[1,"campaign-type"],"banner":[1],"campaignTitle":[1,"campaign-title"],"organisationName":[1,"organisation-name"],"primaryFigureLabel":[1,"primary-figure-label"],"primaryFigureAmount":[1,"primary-figure-amount"],"secondaryFigureLabel":[1,"secondary-figure-label"],"secondaryFigureAmount":[1,"secondary-figure-amount"],"progressBarCounter":[2,"progress-bar-counter"],"donateButtonLabel":[1,"donate-button-label"],"donateButtonUrl":[1,"donate-button-url"],"donateButtonColourScheme":[1,"donate-button-colour-scheme"],"moreInfoButtonLabel":[1,"more-info-button-label"],"moreInfoButtonUrl":[1,"more-info-button-url"],"moreInfoButtonColourScheme":[1,"more-info-button-colour-scheme"]}],[1,"biggive-campaign-highlights",{"spaceBelow":[2,"space-below"],"banner":[1],"campaignTitle":[1,"campaign-title"],"primaryFigureLabel":[1,"primary-figure-label"],"primaryFigureAmount":[1,"primary-figure-amount"],"secondaryFigureLabel":[1,"secondary-figure-label"],"secondaryFigureAmount":[1,"secondary-figure-amount"],"progressBarCounter":[2,"progress-bar-counter"],"primaryStatIcon":[1,"primary-stat-icon"],"primaryStatText":[1,"primary-stat-text"],"secondaryStatIcon":[1,"secondary-stat-icon"],"secondaryStatText":[1,"secondary-stat-text"],"championName":[1,"champion-name"],"championUrl":[1,"champion-url"]}],[1,"biggive-call-to-action",{"spaceAbove":[2,"space-above"],"spaceBelow":[2,"space-below"],"defaultTextColour":[1,"default-text-colour"],"slugSize":[2,"slug-size"],"slugColour":[1,"slug-colour"],"slug":[1],"mainTitleColour":[1,"main-title-colour"],"mainTitleSize":[2,"main-title-size"],"mainTitle":[1,"main-title"],"subtitleSize":[2,"subtitle-size"],"subtitleColour":[1,"subtitle-colour"],"subtitle":[1],"teaserColour":[1,"teaser-colour"],"teaser":[1],"primaryButtonUrl":[1,"primary-button-url"],"primaryButtonLabel":[1,"primary-button-label"],"primaryButtonColourScheme":[1,"primary-button-colour-scheme"],"secondaryButtonUrl":[1,"secondary-button-url"],"secondaryButtonLabel":[1,"secondary-button-label"],"secondaryButtonColourScheme":[1,"secondary-button-colour-scheme"]}],[1,"biggive-footer"],[1,"biggive-hero-image",{"spaceBelow":[2,"space-below"],"colourScheme":[1,"colour-scheme"],"slug":[1],"slugColour":[1,"slug-colour"],"logo":[1],"mainImage":[1,"main-image"],"mainImageAlignHorizontal":[1,"main-image-align-horizontal"],"mainImageAlignVertical":[1,"main-image-align-vertical"],"mainTitle":[1,"main-title"],"mainTitleColour":[1,"main-title-colour"],"teaser":[1],"teaserColour":[1,"teaser-colour"],"buttonUrl":[1,"button-url"],"buttonLabel":[1,"button-label"],"buttonColourScheme":[1,"button-colour-scheme"]}],[1,"biggive-image-feature",{"spaceBelow":[2,"space-below"],"defaultTextColour":[1,"default-text-colour"],"imageUrl":[1,"image-url"],"slug":[1],"slugColour":[1,"slug-colour"],"mainTitle":[1,"main-title"],"mainTitleColour":[1,"main-title-colour"],"teaser":[1],"teaserColour":[1,"teaser-colour"],"buttonUrl":[1,"button-url"],"buttonLabel":[1,"button-label"],"buttonColourScheme":[1,"button-colour-scheme"]}],[1,"biggive-video-feature",{"spaceAbove":[2,"space-above"],"spaceBelow":[2,"space-below"],"defaultTextColour":[1,"default-text-colour"],"videoUrl":[1,"video-url"],"slug":[1],"slugColour":[1,"slug-colour"],"mainTitle":[1,"main-title"],"mainTitleColour":[1,"main-title-colour"],"teaser":[1],"teaserColour":[1,"teaser-colour"],"buttonUrl":[1,"button-url"],"buttonLabel":[1,"button-label"],"buttonColourScheme":[1,"button-colour-scheme"]}],[1,"biggive-back-to-top"],[1,"biggive-branded-image",{"spaceBelow":[2,"space-below"],"imageUrl":[1,"image-url"],"logoUrl":[1,"logo-url"],"slug":[1],"charityName":[1,"charity-name"],"charityLocation":[1,"charity-location"],"charityUrl":[1,"charity-url"]}],[1,"biggive-grid",{"spaceBelow":[2,"space-below"],"columnCount":[2,"column-count"],"columnGap":[2,"column-gap"]}],[1,"biggive-header",{"spaceBelow":[2,"space-below"],"logoUrl":[1,"logo-url"]}],[1,"biggive-heading",{"spaceAbove":[2,"space-above"],"spaceBelow":[2,"space-below"],"colour":[1],"htmlElement":[1,"html-element"],"size":[2],"align":[1],"text":[1]}],[1,"biggive-page-column"],[1,"biggive-page-columns",{"spaceBelow":[2,"space-below"]}],[1,"biggive-page-section",{"spaceBelow":[2,"space-below"],"sectionStyleTop":[1,"section-style-top"],"sectionStyleBottom":[1,"section-style-bottom"],"colourScheme":[1,"colour-scheme"]}],[1,"biggive-quote",{"spaceBelow":[2,"space-below"],"defaultTextColour":[1,"default-text-colour"],"quote":[1],"attribution":[1]}],[0,"biggive-social-icon",{"service":[1],"backgroundColour":[1,"background-colour"],"iconColour":[1,"icon-colour"],"url":[1]}],[1,"biggive-totalizer",{"spaceBelow":[2,"space-below"],"primaryColour":[1,"primary-colour"],"primaryTextColour":[1,"primary-text-colour"],"secondaryColour":[1,"secondary-colour"],"secondaryTextColour":[1,"secondary-text-colour"],"mainMessage":[1,"main-message"]}],[1,"biggive-totalizer-ticker-item",{"figure":[1],"label":[1]}],[1,"biggive-form-field-select",{"selectedValue":[1,"selected-value"],"selectedLabel":[1,"selected-label"],"spaceBelow":[2,"space-below"],"placeholder":[1]},[[0,"doOptionSelect","doOptionSelectCompletedHandler"]]],[1,"biggive-form-field-select-option",{"label":[1],"value":[1],"selectedValue":[32],"selectedLabel":[32]}],[0,"biggive-misc-icon",{"backgroundColour":[1,"background-colour"],"iconColour":[1,"icon-colour"],"icon":[1],"url":[1]}],[1,"biggive-popup",{"openFromOutside":[64],"closeFromOutside":[64]}],[1,"biggive-progress-bar",{"spaceBelow":[2,"space-below"],"colourScheme":[1,"colour-scheme"],"counter":[2]}],[1,"biggive-button",{"spaceBelow":[2,"space-below"],"colourScheme":[1,"colour-scheme"],"label":[1],"url":[1],"fullWidth":[4,"full-width"],"size":[1],"rounded":[4]}]]],["biggive-article-card.cjs",[[1,"biggive-article-card",{"spaceBelow":[2,"space-below"],"backgroundColour":[1,"background-colour"],"backgroundColourHover":[1,"background-colour-hover"],"textColour":[1,"text-colour"],"slug":[1],"date":[1],"mainTitle":[1,"main-title"],"imageUrl":[1,"image-url"],"imageLabel":[1,"image-label"],"buttonLabel":[1,"button-label"],"buttonUrl":[1,"button-url"]}]]],["biggive-basic-card.cjs",[[1,"biggive-basic-card",{"spaceBelow":[2,"space-below"],"backgroundColour":[1,"background-colour"],"backgroundImageUrl":[1,"background-image-url"],"cardColour":[1,"card-colour"],"textColour":[1,"text-colour"],"mainTitle":[1,"main-title"],"subtitle":[1],"iconColour":[1,"icon-colour"],"buttonLabel":[1,"button-label"],"buttonUrl":[1,"button-url"],"buttonColourScheme":[1,"button-colour-scheme"]}]]],["biggive-search.cjs",[[1,"biggive-search",{"searchText":[1,"search-text"],"placeholderText":[1,"placeholder-text"],"buttonText":[1,"button-text"]}]]],["biggive-beneficiary-icon.cjs",[[0,"biggive-beneficiary-icon",{"backgroundColour":[1,"background-colour"],"iconColour":[1,"icon-colour"],"icon":[1],"label":[1],"url":[1]}]]],["biggive-boxed-content.cjs",[[1,"biggive-boxed-content",{"spaceBelow":[2,"space-below"],"verticalPadding":[2,"vertical-padding"],"horizontalPadding":[2,"horizontal-padding"],"backgroundColour":[1,"background-colour"],"shadow":[4]}]]],["biggive-category-icon.cjs",[[0,"biggive-category-icon",{"backgroundColour":[1,"background-colour"],"iconColour":[1,"icon-colour"],"icon":[1],"label":[1],"url":[1]}]]],["biggive-form.cjs",[[1,"biggive-form"]]],["biggive-formatted-text.cjs",[[1,"biggive-formatted-text",{"spaceBelow":[2,"space-below"],"defaultTextColour":[1,"default-text-colour"]}]]],["biggive-icon-group.cjs",[[1,"biggive-icon-group",{"spaceBelow":[2,"space-below"],"label":[1]}]]],["biggive-image.cjs",[[1,"biggive-image",{"spaceAbove":[2,"space-above"],"spaceBelow":[2,"space-below"],"imageUrl":[1,"image-url"],"width":[2],"height":[2],"sizeUnit":[1,"size-unit"]}]]],["biggive-nav-group.cjs",[[1,"biggive-nav-group",{"inline":[4]}]]],["biggive-nav-item.cjs",[[1,"biggive-nav-item",{"url":[1],"label":[1],"iconColour":[1,"icon-colour"]}]]],["biggive-popup-standalone.cjs",[[1,"biggive-popup-standalone"]]],["biggive-tab.cjs",[[1,"biggive-tab",{"tabTitle":[1,"tab-title"]}]]],["biggive-tabbed-content.cjs",[[1,"biggive-tabbed-content",{"spaceBelow":[2,"space-below"],"defaultTextColour":[1,"default-text-colour"]}]]],["biggive-text-input.cjs",[[1,"biggive-text-input"]]],["biggive-video.cjs",[[1,"biggive-video",{"spaceAbove":[2,"space-above"],"spaceBelow":[2,"space-below"],"videoUrl":[1,"video-url"]}]]]], options);
   });
 };
 

package/dist/collection/components/biggive-beneficiary-icon/biggive-beneficiary-icon.css

@@ -572,11 +572,14 @@ a:hover {
 .beneficiary-icon-item a {
   display: block;
   position: relative;
-  padding: 5px;
+  padding: 8px;
   box-sizing: border-box;
   height: 100%;
 }
 .beneficiary-icon-item a svg {
   width: 100%;
   height: 100%;
+}
+.beneficiary-icon-item a {
+  padding: 6px;
 }

package/dist/collection/components/biggive-branded-image/biggive-branded-image.css

@@ -566,21 +566,21 @@ a:hover {
   margin-bottom: 5px;
   width: fit-content;
 }
-.container #charityName, .container #charityLocation {
+.container #charityName, .container .charity-info {
   font-size: 17px;
 }
 @media screen and (max-width: 768px) {
-  .container #charityName, .container #charityLocation {
+  .container #charityName, .container .charity-info {
     font-size: 16px;
   }
 }
 @media screen and (max-width: 576px) {
-  .container #charityName, .container #charityLocation {
+  .container #charityName, .container .charity-info {
     font-size: 15px;
   }
 }
 @media screen and (max-width: 450px) {
-  .container #charityName, .container #charityLocation {
+  .container #charityName, .container .charity-info {
     font-size: 14px;
   }
 }

package/dist/collection/components/biggive-branded-image/biggive-branded-image.js

@@ -7,9 +7,10 @@ export class BiggiveBrandedImage {
     this.slug = null;
     this.charityName = null;
     this.charityLocation = null;
+    this.charityUrl = null;
   }
   render() {
-    return (h("div", { class: 'container space-below-' + this.spaceBelow }, h("div", { class: "slug" }, this.slug), this.imageUrl !== undefined ? (h("div", { class: "image-wrap" }, h("img", { src: this.imageUrl }))) : null, this.logoUrl.length > 0 ? h("div", { class: "logo-wrap", style: { 'background-image': "url('" + this.logoUrl + "')" } }) : null, this.charityName !== undefined ? (h("a", { id: "charityName", href: "" }, this.charityName)) : null, this.charityLocation !== undefined ? h("div", { id: "charityLocation" }, this.charityLocation) : null));
+    return (h("div", { class: 'container space-below-' + this.spaceBelow }, h("div", { class: "slug" }, this.slug), this.imageUrl !== undefined && this.imageUrl !== null ? (h("div", { class: "image-wrap" }, h("img", { src: this.imageUrl }))) : null, this.logoUrl !== undefined && this.logoUrl !== null ? h("div", { class: "logo-wrap", style: { 'background-image': "url('" + this.logoUrl + "')" } }) : null, this.charityName !== undefined && this.charityName !== null ? (h("a", { id: "charityName", href: this.charityUrl, target: "_blank" }, this.charityName)) : null, this.charityLocation !== undefined && this.charityLocation !== null ? h("div", { class: "charity-info" }, this.charityLocation) : null));
   }
   static get is() { return "biggive-branded-image"; }
   static get encapsulation() { return "shadow"; }
@@ -132,6 +133,24 @@ export class BiggiveBrandedImage {
         "attribute": "charity-location",
         "reflect": false,
         "defaultValue": "null"
+      },
+      "charityUrl": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Link to the charity's website"
+        },
+        "attribute": "charity-url",
+        "reflect": false,
+        "defaultValue": "null"
       }
     };
   }

package/dist/collection/components/biggive-branded-image/biggive-branded-image.stories.js

@@ -7,6 +7,9 @@ export default {
     charityName: {
       name: 'Charity Name',
     },
+    charityUrl: {
+      name: 'Charity URL',
+    },
     spaceBelow: {
       name: 'Space below',
       control: {
@@ -29,6 +32,7 @@ const Template = args => `
             <biggive-branded-image
               charity-location="${args.charityLocation}"
               charity-name="${args.charityName}"
+              charity-url="${args.charityUrl}"
               space-below="${args.spaceBelow}"  
               image-url="${args.imageUrl}"   
               logo-url="${args.logoUrl}"    
@@ -40,6 +44,7 @@ export const BrandedImageComponent = Template.bind({});
 BrandedImageComponent.args = {
   charityLocation: 'London',
   charityName: 'The Big Give Trust',
+  charityUrl: 'https://thebiggive.org.uk',
   spaceBelow: 4,
   imageUrl: 'https://media.istockphoto.com/vectors/childish-seamless-dotted-pattern-with-colorful-doodle-letters-fun-vector-id1208462693',
   logoUrl: 'https://99designs-blog.imgix.net/blog/wp-content/uploads/2018/10/attachment_98611730-e1539290946446.png?auto=format&q=60&fit=max&w=930',

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

@@ -541,12 +541,18 @@ a:hover {
 
 .sort-filter-wrap {
   display: flex;
-  align-items: flex-end;
+  justify-content: flex-end;
   margin-bottom: 30px;
   text-align: right;
 }
+.sort-filter-wrap #clearFilters {
+  margin: auto 0 auto auto;
+}
+.sort-filter-wrap #clearFilters:hover {
+  cursor: pointer;
+}
 .sort-filter-wrap .sort-wrap {
-  margin-left: auto;
+  margin-left: 15px;
 }
 .sort-filter-wrap .filter-wrap {
   margin-left: 15px;
@@ -581,4 +587,25 @@ a:hover {
 }
 .icon > path {
   fill: #2C089B;
+}
+
+@media screen and (max-width: 768px) {
+  .sort-filter-wrap {
+    flex-wrap: wrap-reverse;
+  }
+  .sort-filter-wrap #clearFilters {
+    flex: 1 0 100%;
+    padding-top: 10px;
+  }
+}
+@media screen and (max-width: 475px) {
+  .sort-filter-wrap {
+    flex-wrap: wrap-reverse;
+  }
+  .sort-filter-wrap .sort-wrap {
+    padding-top: 10px;
+  }
+  .sort-filter-wrap .sort-wrap, .sort-filter-wrap .filter-wrap {
+    flex: 1 0 100%;
+  }
 }

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

@@ -2,7 +2,6 @@ import { h } from '@stencil/core';
 import { faMagnifyingGlass } from '@fortawesome/pro-solid-svg-icons';
 export class BiggiveCampaignCardFilterGrid {
   constructor() {
-    this.searchText = null;
     this.sortBy = null;
     this.filterCategory = null;
     this.filterBeneficiary = null;
@@ -11,6 +10,8 @@ export class BiggiveCampaignCardFilterGrid {
     this.sortByPlaceholderText = 'Sort by';
     this.handleApplyFilterButtonClick = () => {
       this.doSearchAndFilterUpdate.emit(this.getSearchAndFilterObject());
+      console.log(this.el.shadowRoot.getElementById('filter-popup'));
+      this.el.shadowRoot.getElementById('filter-popup').closeFromOutside();
     };
     this.handleSearchButtonPressed = () => {
       this.doSearchAndFilterUpdate.emit(this.getSearchAndFilterObject());
@@ -24,10 +25,14 @@ export class BiggiveCampaignCardFilterGrid {
       }
     };
     this.handleFilterButtonClick = () => {
-      this.el.shadowRoot.getElementById('filter-popup').open();
+      this.el.shadowRoot.getElementById('filter-popup').openFromOutside();
+    };
+    this.handleClearFiltersClicked = () => {
+      this.doClearFilters.emit(true);
     };
     this.spaceBelow = 0;
     this.intro = 'Find a charity or project';
+    this.searchText = null;
     this.placeholderText = 'Search';
     this.buttonText = 'Search';
     this.categoryOptions = [];
@@ -68,7 +73,7 @@ export class BiggiveCampaignCardFilterGrid {
     }
   }
   render() {
-    return (h("div", { class: 'container space-below-' + this.spaceBelow }, h("div", { class: "sleeve" }, h("div", { class: "search-wrap" }, h("h4", null, this.intro), h("div", { class: "field-wrap" }, h("div", { class: "input-wrap" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", class: "icon", viewBox: "0 0 512 512" }, h("path", { d: faMagnifyingGlass.icon[4].toString() })), h("input", { type: "text", value: this.searchText, class: "input-text", placeholder: this.placeholderText, onInput: this.handleSearchTextChanged, onKeyDown: this.handleEnterPressed })), h("biggive-button", { onClick: this.handleSearchButtonPressed, label: this.buttonText }))), h("div", { class: "sort-filter-wrap" }, h("div", { class: "sort-wrap" }, h("biggive-form-field-select", { placeholder: "Sort by", selectedLabel: this.selectedLabel, id: "sort-by" }, h("biggive-form-field-select-option", { value: "amountRaised", label: "Most raised" }), h("biggive-form-field-select-option", { value: "matchFundsRemaining", label: "Match funds remaining" }), h("biggive-form-field-select-option", { value: "Relevance", label: "Relevance" }))), h("div", { class: "filter-wrap" }, h("biggive-button", { class: "filter", onClick: this.handleFilterButtonClick, label: "Filters" }), h("biggive-popup", { id: "filter-popup" }, h("h4", { class: "space-above-0 space-below-3 colour-primary" }, "Filters"), h("biggive-form-field-select", { placeholder: "Category", id: "categories", "space-below": "2" }, this.categoryOptions.length === 0
+    return (h("div", { class: 'container space-below-' + this.spaceBelow }, h("div", { class: "sleeve" }, h("div", { class: "search-wrap" }, h("h4", null, this.intro), h("div", { class: "field-wrap" }, h("div", { class: "input-wrap" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", class: "icon", viewBox: "0 0 512 512" }, h("path", { d: faMagnifyingGlass.icon[4].toString() })), h("input", { type: "text", value: this.searchText, class: "input-text", placeholder: this.placeholderText, onInput: this.handleSearchTextChanged, onKeyDown: this.handleEnterPressed })), h("biggive-button", { onClick: this.handleSearchButtonPressed, label: this.buttonText }))), h("div", { class: "sort-filter-wrap" }, h("a", { onClick: this.handleClearFiltersClicked, id: "clearFilters" }, "Clear Filters"), h("div", { class: "sort-wrap" }, h("biggive-form-field-select", { placeholder: "Sort by", selectedLabel: this.selectedLabel, id: "sort-by" }, h("biggive-form-field-select-option", { value: "amountRaised", label: "Most raised" }), h("biggive-form-field-select-option", { value: "matchFundsRemaining", label: "Match funds remaining" }), h("biggive-form-field-select-option", { value: "Relevance", label: "Relevance" }))), h("div", { class: "filter-wrap" }, h("biggive-button", { class: "filter", onClick: this.handleFilterButtonClick, label: "Filters", fullWidth: true }), h("biggive-popup", { id: "filter-popup" }, h("h4", { class: "space-above-0 space-below-3 colour-primary" }, "Filters"), h("biggive-form-field-select", { placeholder: "Category", id: "categories", "space-below": "2" }, this.categoryOptions.length === 0
       ? undefined
       : this.categoryOptions.map(option => h("biggive-form-field-select-option", { value: option, label: option }))), h("biggive-form-field-select", { placeholder: "Beneficiary", id: "beneficiaries", "space-below": "2" }, this.beneficiaryOptions.length === 0
       ? undefined
@@ -128,6 +133,24 @@ export class BiggiveCampaignCardFilterGrid {
         "reflect": false,
         "defaultValue": "'Find a charity or project'"
       },
+      "searchText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Optional search text prop. Useful for pre-populating the search field\nwhen the page is loaded with a search term already existing in the URL.\nThis can happen when sharing links, or if a donor goes to a campaign page\nafter searching, and then returns to the search results. In such a case,\nthe search box text will clear, unless we use this prop to populate it on\nrendering. DON-652."
+        },
+        "attribute": "search-text",
+        "reflect": false,
+        "defaultValue": "null"
+      },
       "placeholderText": {
         "type": "string",
         "mutable": false,
@@ -264,6 +287,21 @@ export class BiggiveCampaignCardFilterGrid {
           "resolved": "{ searchText: string; sortBy: string; filterCategory: string; filterBeneficiary: string; filterLocation: string; filterFunding: string; }",
           "references": {}
         }
+      }, {
+        "method": "doClearFilters",
+        "name": "doClearFilters",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "This event `doSearchAndFilterUpdate` event is emitted and propogates to the parent\ncomponent which handles it"
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
       }];
   }
   static get elementRef() { return "el"; }

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

@@ -1,10 +1,25 @@
-//import { BiggiveCampaignCard } from 'biggive-campaign-card/biggive-campaign-card';
 export default {
   title: 'Components/Campaign Features',
-  //subcomponents: {BiggiveCampaignCard}
+  argTypes: {
+    categoryOptions: {
+      name: 'Category Options',
+    },
+    beneficiaryOptions: {
+      name: 'Beneficiary Options',
+    },
+    locationOptions: {
+      name: 'Location Options',
+    },
+    fundingOptions: {
+      name: 'Funding Options',
+    },
+    searchText: {
+      name: 'Search Text',
+    },
+  },
 };
 const Template = args => `
-      <biggive-campaign-card-filter-grid category-options="${args.categoryOptions}" beneficiary-options="${args.beneficiaryOptions}" location-options="${args.locationOptions}" funding-options="${args.fundingOptions}">
+      <biggive-campaign-card-filter-grid category-options="${args.categoryOptions}" beneficiary-options="${args.beneficiaryOptions}" location-options="${args.locationOptions}" funding-options="${args.fundingOptions}" search-text=${args.searchText}>
       <biggive-grid slot="campaign-grid" column-count="3">
         <biggive-campaign-card
           campaign-type="Match Funded"
@@ -45,10 +60,12 @@ const Template = args => `
       </biggive-campaign-card-filter-grid>
       `;
 document.addEventListener('doSearchAndFilterUpdate', $event => console.log($event));
+document.addEventListener('doClearFilters', $event => console.log($event));
 export const CampaignCardFilterGridComponent = Template.bind({});
 CampaignCardFilterGridComponent.args = {
   categoryOptions: ['ABC', 'DEF'],
-  beneficiaryOptions: ['ABC', 'DEF', 'ABC', 'DEF', 'ABC', 'DEF', 'ABC', 'DEF', 'ABC', 'DEF', 'ABC', 'DEF', 'ABC', 'DEF'],
+  beneficiaryOptions: ['ABC', 'DEF'],
   locationOptions: ['ABC', 'DEF'],
   fundingOptions: ['ABC', 'DEF'],
+  searchText: '',
 };

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

@@ -618,6 +618,40 @@ a:hover {
 .container .stat-wrap .stat-item svg {
   fill: #FF7272;
 }
+.container .championed-by {
+  text-align: left;
+  margin-left: 20px;
+  margin-top: 20px;
+  color: black;
+  font-size: 15px;
+}
+@media screen and (max-width: 768px) {
+  .container .championed-by {
+    font-size: 14px;
+  }
+}
+@media screen and (max-width: 576px) {
+  .container .championed-by {
+    text-align: center;
+    margin-left: 0;
+    margin-bottom: 10px;
+    font-size: 13px;
+  }
+}
+@media screen and (max-width: 450px) {
+  .container .championed-by {
+    font-size: 12px;
+  }
+}
+.container .championed-by a {
+  text-decoration: none;
+  color: #2C089B;
+}
+@media screen and (max-width: 450px) {
+  .container .championed-by a {
+    display: block;
+  }
+}
 @media screen and (max-width: 576px) {
   .container {
     padding: 15px;

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

@@ -13,9 +13,11 @@ export class BiggiveCampaignHighlights {
     this.primaryStatText = null;
     this.secondaryStatIcon = null;
     this.secondaryStatText = null;
+    this.championName = null;
+    this.championUrl = null;
   }
   render() {
-    return (h("div", { class: 'container space-below-' + this.spaceBelow }, h("div", { class: "sleeve" }, this.campaignTitle != null ? (h("div", { class: "campaign-title" }, h("span", null, this.campaignTitle))) : null, this.banner.length > 0 ? (h("div", { class: "image-wrap banner", style: { 'background-image': 'url(' + this.banner + ')' } }, h("img", { src: this.banner, class: "banner" }))) : null, h("div", { class: "meta-wrap" }, h("div", { class: "meta-item" }, h("span", { class: "label" }, this.primaryFigureLabel), h("span", { class: "text" }, this.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))));
+    return (h("div", { class: 'container space-below-' + this.spaceBelow }, h("div", { class: "sleeve" }, this.campaignTitle != null ? (h("div", { class: "campaign-title" }, h("span", null, this.campaignTitle))) : null, this.banner.length > 0 ? (h("div", { class: "image-wrap banner", style: { 'background-image': 'url(' + this.banner + ')' } }, h("img", { src: this.banner, class: "banner" }))) : null, h("div", { class: "meta-wrap" }, h("div", { class: "meta-item" }, h("span", { class: "label" }, this.primaryFigureLabel), h("span", { class: "text" }, this.primaryFigureAmount)), h("div", { class: "meta-item" }, h("span", { class: "label" }, this.secondaryFigureLabel), h("span", { class: "text" }, this.secondaryFigureAmount))), h("div", { class: "progress-bar-wrap" }, h("biggive-progress-bar", { counter: this.progressBarCounter, "colour-scheme": "primary" })), h("div", { class: "stat-wrap" }, this.primaryStatIcon != null ? (h("div", { class: "stat-item" }, h("biggive-misc-icon", { icon: this.primaryStatIcon, "background-colour": "white", "icon-colour": "tertiary" }), h("span", { class: "label" }, this.primaryStatText))) : null, this.secondaryStatIcon != null ? (h("div", { class: "stat-item" }, h("biggive-misc-icon", { icon: this.secondaryStatIcon, "background-colour": "white", "icon-colour": "tertiary" }), h("span", { class: "label" }, this.secondaryStatText))) : null), this.championName != null ? (h("div", { class: "championed-by" }, "Championed by ", h("a", { href: this.championUrl }, this.championName))) : null)));
   }
   static get is() { return "biggive-campaign-highlights"; }
   static get encapsulation() { return "shadow"; }
@@ -246,6 +248,42 @@ export class BiggiveCampaignHighlights {
         "attribute": "secondary-stat-text",
         "reflect": false,
         "defaultValue": "null"
+      },
+      "championName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Champion's name"
+        },
+        "attribute": "champion-name",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "championUrl": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Link to all meta-campaigns funded by this champion.\nFor example: /christmas-challenge-2022/the-reed-foundation-22\nIn other words, it follows the following format:\n'/' + campaign.parentRef + '/' + campaign.championRef"
+        },
+        "attribute": "champion-url",
+        "reflect": false,
+        "defaultValue": "null"
       }
     };
   }

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

@@ -14,6 +14,12 @@ export default {
     campaignTitle: {
       name: 'Camapign title',
     },
+    championName: {
+      name: 'Champion name',
+    },
+    championUrl: {
+      name: 'Champion url',
+    },
     currencyCode: {
       name: 'Currency code',
     },
@@ -59,6 +65,8 @@ const Template = args => `
           space-below=${args.spaceBelow}
           banner="${args.banner}"
           campaign-title="${args.campaignTitle}"
+          champion-name="${args.championName}"
+          champion-url="${args.championUrl}"
           currency-code="${args.currencyCode}"
           primary-figure-label=${args.primaryFigureLabel}
           primary-figure-amount=${args.primaryFigureAmount}
@@ -76,6 +84,8 @@ CampaignHighlightsComponent.args = {
   spaceBelow: 0,
   banner: 'https://media.istockphoto.com/vectors/childish-seamless-dotted-pattern-with-colorful-doodle-letters-fun-vector-id1208462693',
   campaignTitle: 'this is my sample title',
+  championName: 'The Champion Name',
+  championUrl: 'https://thebiggive.org.uk',
   currencyCode: 'GBP',
   primaryFigureLabel: 'Total raised',
   primaryFigureAmount: 1000,

package/dist/collection/components/biggive-category-icon/biggive-category-icon.css

@@ -572,11 +572,14 @@ a:hover {
 .category-icon-item a {
   display: block;
   position: relative;
-  padding: 5px;
+  padding: 8px;
   box-sizing: border-box;
   height: 100%;
 }
 .category-icon-item a svg {
   width: 100%;
   height: 100%;
+}
+.category-icon-item a {
+  padding: 6px;
 }

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

@@ -31,7 +31,7 @@ export class BiggiveFormFieldSelect {
     }
   }
   render() {
-    return (h("div", { class: 'dropdown space-below-' + this.spaceBelow }, h("div", { class: "sleeve", onClick: this.toggleFocus, onMouseLeave: this.toggleFocus }, h("span", { class: "placeholder" }, this.selectedLabel === null ? this.placeholder : this.selectedLabel)), h("div", { class: "options" }, h("slot", null))));
+    return (h("div", { class: 'dropdown space-below-' + this.spaceBelow }, h("div", { class: "sleeve", onClick: this.toggleFocus, onMouseLeave: this.toggleFocus }, h("span", { class: "placeholder" }, this.selectedLabel === null || this.selectedLabel === undefined ? this.placeholder : this.selectedLabel)), h("div", { class: "options" }, h("slot", null))));
   }
   static get is() { return "biggive-form-field-select"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/biggive-hero-image/biggive-hero-image.css

@@ -574,7 +574,7 @@ a:hover {
   margin: 50px 0 15px 0;
   padding: 0;
 }
-@media (max-width: 768px) {
+@media (max-width: 1200px) {
   .container .content-wrap h1 {
     font-size: 38px;
     line-height: 45px;
@@ -614,7 +614,7 @@ a:hover {
     flex-wrap: wrap;
   }
   .container .sleeve .content-wrap {
-    width: 100%;
+    width: 60%;
     padding: 18vw 15px 15px 15px;
     margin-bottom: 50px;
   }
@@ -624,8 +624,13 @@ a:hover {
     padding-bottom: 50%;
   }
 }
-@media screen and (max-width: 1225px) and (min-width: 768px) {
+@media screen and (max-width: 768px) {
   .container .sleeve .content-wrap {
-    padding-left: 60px;
+    width: 80%;
+  }
+}
+@media screen and (max-width: 576px) {
+  .container .sleeve .content-wrap {
+    width: 100%;
   }
 }

package/dist/collection/components/biggive-misc-icon/biggive-misc-icon.css

@@ -554,7 +554,7 @@ a:hover {
 .misc-icon-item a {
   display: block;
   position: relative;
-  padding: 5px;
+  padding: 8px;
   box-sizing: border-box;
   height: 100%;
 }
@@ -614,7 +614,7 @@ a:hover {
   .misc-icon-item a {
     display: block;
     position: relative;
-    padding: 5px;
+    padding: 8px;
     box-sizing: border-box;
     height: 100%;
   }
@@ -622,6 +622,9 @@ a:hover {
     width: 100%;
     height: 100%;
   }
+  .misc-icon-item a {
+    padding: 6px;
+  }
   .misc-icon-item a {
     margin: auto;
   }

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

@@ -5,7 +5,7 @@ export class BiggiveMiscIcon {
     this.backgroundColour = 'primary';
     this.iconColour = 'white';
     this.icon = null;
-    this.url = '#';
+    this.url = undefined;
   }
   getMiscIcon() {
     var icon = FontAwesomeIconsService.getMiscIcon(this.icon);
@@ -97,7 +97,7 @@ export class BiggiveMiscIcon {
         },
         "attribute": "url",
         "reflect": false,
-        "defaultValue": "'#'"
+        "defaultValue": "undefined"
       }
     };
   }

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

@@ -1,17 +1,20 @@
 import { h } from '@stencil/core';
 export class BiggivePopup {
   constructor() {
-    this.close = (event) => {
+    this.closeFromWithin = (event) => {
       if (event.target.classList.contains('popup') || event.target.classList.contains('close')) {
         this.el.shadowRoot.querySelector('.popup').setAttribute('data-visible', 'false');
       }
     };
   }
-  async open() {
+  async openFromOutside() {
     this.el.shadowRoot.querySelector('.popup').setAttribute('data-visible', 'true');
   }
+  async closeFromOutside() {
+    this.el.shadowRoot.querySelector('.popup').setAttribute('data-visible', 'false');
+  }
   render() {
-    return (h("div", { class: "popup", onClick: this.close }, h("div", { class: "sleeve" }, h("div", { class: "header" }, h("div", { class: "close", onClick: this.close })), h("div", { class: "content" }, h("slot", null)))));
+    return (h("div", { class: "popup", onClick: this.closeFromWithin }, h("div", { class: "sleeve" }, h("div", { class: "header" }, h("div", { class: "close", onClick: this.closeFromWithin })), h("div", { class: "content" }, h("slot", null)))));
   }
   static get is() { return "biggive-popup"; }
   static get encapsulation() { return "shadow"; }
@@ -27,7 +30,23 @@ export class BiggivePopup {
   }
   static get methods() {
     return {
-      "open": {
+      "openFromOutside": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
+      "closeFromOutside": {
         "complexType": {
           "signature": "() => Promise<void>",
           "parameters": [],