@biggive/components 202501031034.0.0 → 202501071646.0.0

package/dist/cjs/biggive-accordion_38.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c0a19159.js');
+const index = require('./index-c7b6790e.js');
 const fontawesomeIcons = require('./fontawesome-icons-a9f29d2c.js');
 const video = require('./video-4454820e.js');
 
@@ -15,7 +15,6 @@ const BiggiveAccordion = class {
         this.spaceBelow = 0;
         this.textColour = 'black';
         this.headingColour = 'primary';
-        this.children = undefined;
     }
     componentWillLoad() {
         this.children = Array.from(this.host.children);
@@ -76,13 +75,18 @@ const BiggiveBrandedImageStyle0 = biggiveBrandedImageCss;
 const BiggiveBrandedImage = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /**
+         * Space below component
+         */
         this.spaceBelow = 0;
+        /**
+         * Full URL of a image.
+         */
         this.imageUrl = '';
+        /**
+         * Full URL of the logo.
+         */
         this.logoUrl = '';
-        this.slug = undefined;
-        this.charityName = undefined;
-        this.charityLocation = undefined;
-        this.charityUrl = undefined;
     }
     render() {
         return (index.h("div", { key: '23614f7c92777ff9cc505df3ba05e414266140ae', class: 'container space-below-' + this.spaceBelow }, index.h("div", { key: 'de69e9303308ff4be55295f6d98c8df514ed1379', class: "slug" }, this.slug), this.imageUrl !== undefined && this.imageUrl !== null ? (index.h("div", { class: "image-wrap" }, index.h("img", { src: this.imageUrl }))) : null, this.logoUrl !== undefined && this.logoUrl !== null ? index.h("div", { class: "logo-wrap", style: { 'background-image': "url('" + this.logoUrl + "')" } }) : null, this.charityName !== undefined && this.charityName !== null ? index.h("h3", { class: "title" }, this.charityName) : null, this.charityLocation !== undefined && this.charityLocation !== null ? index.h("div", { class: "charity-info" }, this.charityLocation) : null));
@@ -97,19 +101,42 @@ const BiggiveButton = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.doButtonClick = index.createEvent(this, "doButtonClick", 7);
-        this.handleButtonClick = (event) => {
-            this.doButtonClick.emit({ event: event, url: event.target.parentElement.href });
-        };
+        /**
+         * Space below component
+         */
         this.spaceBelow = 1;
+        /**
+         * Colour Scheme
+         */
         this.colourScheme = 'primary';
+        /**
+         * Text
+         */
         this.label = 'Click me';
-        this.url = undefined;
+        /**
+         * New Tab
+         */
         this.openInNewTab = false;
+        /**
+         * Display full width
+         */
         this.fullWidth = false;
+        /**
+         * Size
+         */
         this.size = 'medium';
+        /**
+         * Rounded corners
+         */
         this.rounded = false;
+        /**
+         * Centered
+         */
         this.centered = false;
         this.buttonId = undefined;
+        this.handleButtonClick = (event) => {
+            this.doButtonClick.emit({ event: event, url: event.target.parentElement.href });
+        };
     }
     render() {
         // We always want to have a href so that browsers will see this as a link and allow clicking with keybard.
@@ -127,25 +154,53 @@ const BiggiveCallToActionStyle0 = biggiveCallToActionCss;
 const BiggiveCallToAction = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /**
+         * Space above component
+         */
         this.spaceAbove = 0;
+        /**
+         * Space below component
+         */
         this.spaceBelow = 0;
+        /**
+         * Default text colour
+         */
         this.defaultTextColour = 'primary';
+        /**
+         * Slug size
+         */
         this.slugSize = 4;
+        /**
+         * Slug colour
+         */
         this.slugColour = '';
-        this.slug = undefined;
+        /**
+         * Main title colour
+         */
         this.mainTitleColour = '';
+        /**
+         * Main title size
+         */
         this.mainTitleSize = 2;
-        this.mainTitle = undefined;
+        /**
+         * Main title size
+         */
         this.subtitleSize = 4;
+        /**
+         * Subtitle colour
+         */
         this.subtitleColour = '';
-        this.subtitle = undefined;
+        /**
+         * Teaser colour
+         */
         this.teaserColour = '';
-        this.teaser = undefined;
-        this.primaryButtonUrl = undefined;
-        this.primaryButtonLabel = undefined;
+        /**
+         * Primary button Colour Scheme
+         */
         this.primaryButtonColourScheme = 'primary';
-        this.secondaryButtonUrl = undefined;
-        this.secondaryButtonLabel = undefined;
+        /**
+         * Secondary button Colour Scheme
+         */
         this.secondaryButtonColourScheme = 'primary';
     }
     render() {
@@ -161,28 +216,37 @@ const BiggiveCampaignCard = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.doCardGeneralClick = index.createEvent(this, "doCardGeneralClick", 7);
-        this.handleCardGeneralClick = (event) => {
-            this.doCardGeneralClick.emit({ event, url: this.moreInfoButtonUrl });
-        };
+        /**
+         * Space below component
+         */
         this.spaceBelow = 4;
-        this.campaignType = undefined;
-        this.banner = undefined;
-        this.campaignTitle = undefined;
-        this.organisationName = undefined;
-        this.primaryFigureLabel = undefined;
-        this.primaryFigureAmount = undefined;
-        this.secondaryFigureLabel = undefined;
-        this.secondaryFigureAmount = undefined;
-        this.progressBarCounter = undefined;
+        /**
+         * Donate button label
+         */
         this.donateButtonLabel = 'Donate now';
-        this.donateButtonUrl = undefined;
+        /**
+         * Donate button colour scheme
+         */
         this.donateButtonColourScheme = 'primary';
+        /**
+         * More information button label
+         */
         this.moreInfoButtonLabel = 'Find out more';
-        this.moreInfoButtonUrl = undefined;
+        /**
+         * Donate button colour scheme
+         */
         this.moreInfoButtonColourScheme = 'clear-primary';
+        /**
+         * Boolean flag telling the component if the campaign is in the future (not open yet).
+         */
         this.isFutureCampaign = false;
+        /**
+         * Boolean flag telling the component if the campaign is in the future (not open yet).
+         */
         this.isPastCampaign = false;
-        this.datetime = undefined;
+        this.handleCardGeneralClick = (event) => {
+            this.doCardGeneralClick.emit({ event, url: this.moreInfoButtonUrl });
+        };
     }
     isEmpty(value) {
         return value === undefined || value === null || value === '';
@@ -217,6 +281,44 @@ const BiggiveCampaignCardFilterGrid = class {
         this.newSelectedFilterCategory = null;
         this.newSelectedFilterBeneficiary = null;
         this.newSelectedFilterLocation = null;
+        /**
+         * Space below component
+         */
+        this.spaceBelow = 0;
+        /**
+         * Intro
+         */
+        this.intro = 'Find a charity or project';
+        /**
+         * Optional search text prop. Useful for pre-populating the search field
+         * when the page is loaded with a search term already existing in the URL.
+         * This can happen when sharing links, or if a donor goes to a campaign page
+         * after searching, and then returns to the search results. In such a case,
+         * the search box text will clear, unless we use this prop to populate it on
+         * rendering. DON-652.
+         */
+        this.searchText = null;
+        /**
+         * Defines the text displayed as the placeholder in the input field
+         * before the user types anything
+         */
+        this.placeholderText = 'Search';
+        /**
+         * Defines the text on the search button
+         */
+        this.buttonText = 'Search';
+        /**
+         * For injecting the chosen category to filter by, as per the comment above for `selectedSortByOption`.
+         */
+        this.selectedFilterCategory = null;
+        /**
+         * For injecting the chosen beneficiary to filter by, as per the comment above for `selectedSortByOption`.
+         */
+        this.selectedFilterBeneficiary = null;
+        /**
+         * For injecting the chosen location to filter by, as per the comment above for `selectedSortByOption`.
+         */
+        this.selectedFilterLocation = null;
         this.categoryFilterSelectionChanged = (value) => {
             this.newSelectedFilterCategory = value;
         };
@@ -306,19 +408,6 @@ const BiggiveCampaignCardFilterGrid = class {
                 filterLocation: null,
             });
         };
-        this.spaceBelow = 0;
-        this.intro = 'Find a charity or project';
-        this.searchText = null;
-        this.placeholderText = 'Search';
-        this.buttonText = 'Search';
-        this.categoryOptions = undefined;
-        this.beneficiaryOptions = undefined;
-        this.locationOptions = undefined;
-        this.selectedSortByOption = undefined;
-        this.selectedFilterCategory = null;
-        this.selectedFilterBeneficiary = null;
-        this.selectedFilterLocation = null;
-        this.filtersApplied = undefined;
     }
     /**
      * Typically on non-negligible scroll away from the search area.
@@ -429,20 +518,14 @@ const BiggiveCampaignHighlightsStyle0 = biggiveCampaignHighlightsCss;
 const BiggiveCampaignHighlights = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /**
+         * Space below component
+         */
         this.spaceBelow = 0;
-        this.banner = undefined;
-        this.campaignTitle = undefined;
-        this.primaryFigureLabel = undefined;
-        this.primaryFigureAmount = undefined;
-        this.secondaryFigureLabel = undefined;
-        this.secondaryFigureAmount = undefined;
+        /**
+         * Progress bar percentage
+         */
         this.progressBarCounter = 100;
-        this.primaryStatIcon = undefined;
-        this.primaryStatText = undefined;
-        this.secondaryStatIcon = undefined;
-        this.secondaryStatText = undefined;
-        this.championName = undefined;
-        this.championUrl = undefined;
     }
     render() {
         return (index.h("div", { key: 'add93be878549fc1c8f00b8dc3001896724cfe34', class: 'container space-below-' + this.spaceBelow }, index.h("div", { key: 'd5577539172f56e51540d03e53c91327bed96143', class: "sleeve" }, this.campaignTitle != null ? (index.h("div", { class: "campaign-title" }, index.h("span", null, this.campaignTitle))) : null, this.banner !== null && this.banner !== undefined ? (index.h("div", { class: "image-wrap banner", style: { 'background-image': 'url(' + this.banner + ')' } }, index.h("img", { src: this.banner, class: "banner" }))) : null, index.h("div", { key: 'c7029df25a46f19e84057d4e9db469ba6325d1ec', class: "meta-wrap" }, index.h("div", { key: '877452b98dd3d64bfa132da71797e6f00bc5696d', class: "meta-item" }, index.h("span", { key: '4c373ec8b3e8d53754280b5fabecc0986a57f6f8', class: "label" }, this.primaryFigureLabel), index.h("span", { key: 'c354468bd49fb84a9b5317c7cfb7dc363b0b7b54', class: "text" }, this.primaryFigureAmount)), index.h("div", { key: '49ba302a5c22f674bd45478607afe5e57c40ad98', class: "meta-item" }, index.h("span", { key: '8f8c8e3935542794e7ba3e9624cedf5bacd89be1', class: "label" }, this.secondaryFigureLabel), index.h("span", { key: '952ee3945423ac3f129d59f466b98c7f5b1f9f26', class: "text" }, this.secondaryFigureAmount))), index.h("div", { key: '76bf79668d1c1f737d400d9d85816310de2147ee', class: "progress-bar-wrap" }, index.h("biggive-progress-bar", { key: 'cb43751f5905000bb6c294d472a43c89e660447e', counter: this.progressBarCounter, "colour-scheme": "primary" })), index.h("div", { key: 'af9a81b3c9ca0b15fa44e45df0aa7068ddb9249d', class: "stat-wrap" }, this.primaryStatIcon != null ? (index.h("div", { class: "stat-item" }, index.h("biggive-misc-icon", { icon: this.primaryStatIcon, "background-colour": "white", "icon-colour": "tertiary" }), index.h("span", { class: "label" }, this.primaryStatText))) : null, this.secondaryStatIcon != null ? (index.h("div", { class: "stat-item" }, index.h("biggive-misc-icon", { icon: this.secondaryStatIcon, "background-colour": "white", "icon-colour": "tertiary" }), index.h("span", { class: "label" }, this.secondaryStatText))) : null), this.championName != null ? (index.h("div", { class: "championed-by" }, "Championed by ", index.h("a", { href: this.championUrl }, this.championName))) : null)));
@@ -464,11 +547,12 @@ const BiggiveFooterStyle0 = biggiveFooterCss;
 const BiggiveFooter = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.year = new Date().getFullYear().toString();
         this.headingLevel = 5;
-        this.donateUrlPrefix = undefined;
-        this.blogUrlPrefix = undefined;
-        this.experienceUrlPrefix = undefined;
+        this.year = new Date().getFullYear().toString();
+        /**
+         * Conditionally render footer menu:
+         * hard-coded (preset) when set to true, dynamic (slot-based) when set to false
+         */
         this.usePresetFooter = false;
     }
     appendMenu(menuName) {
@@ -505,22 +589,18 @@ const BiggiveFormFieldSelectStyle0 = biggiveFormFieldSelectCss;
 const BiggiveFormFieldSelect = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.selectStyle = 'bordered';
+        this.selectedOptionColour = 'blue';
         this.doOptionSelectCompletedHandler = (event) => {
             const value = event.target.value;
             this.selectedValue = value;
             this.selectedLabel = event.target.label;
             this.selectionChanged(value);
         };
-        this.selectionChanged = undefined;
-        this.prompt = undefined;
-        this.selectedValue = undefined;
-        this.selectedLabel = undefined;
-        this.options = undefined;
-        this.selectStyle = 'bordered';
-        this.backgroundColour = undefined;
-        this.selectedOptionColour = 'blue';
+        /**
+         * Space below component
+         */
         this.spaceBelow = 0;
-        this.placeholder = undefined;
     }
     render() {
         const greyIfRequired = this.backgroundColour === 'grey' ? ' grey' : '';
@@ -561,8 +641,17 @@ const BiggiveFormattedTextStyle0 = biggiveFormattedTextCss;
 const BiggiveFormattedText = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /**
+         * Space below component
+         */
         this.spaceBelow = 0;
+        /**
+         * Default text colour
+         */
         this.defaultTextColour = 'primary';
+        /**
+         * Width
+         */
         this.maxWidth = 100;
     }
     render() {
@@ -579,9 +668,6 @@ const BiggiveGenericIcon = class {
         index.registerInstance(this, hostRef);
         this.backgroundColour = 'primary';
         this.iconColour = 'white';
-        this.iconGroup = undefined;
-        this.icon = undefined;
-        this.url = undefined;
     }
     getIconDefinition() {
         let iconDefinition;
@@ -616,6 +702,9 @@ const BiggiveGrid = class {
         index.registerInstance(this, hostRef);
         this.spaceBelow = 4;
         this.columnCount = 3;
+        /**
+         * Deprecated - should use columGap Instead
+         */
         this.spaceBetween = false;
         this.columnGap = 0;
     }
@@ -654,23 +743,46 @@ const BiggiveHeroImageStyle0 = biggiveHeroImageCss;
 const BiggiveHeroImage = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /**
+         * Space below component
+         */
         this.spaceBelow = 0;
+        /**
+         * Colour Scheme
+         */
         this.colourScheme = 'primary';
-        this.slug = undefined;
-        this.slugColour = undefined;
+        /**
+         * Full URL of a logo image.
+         */
         this.logo = '';
+        /**
+        * Logo container height selection. Numbers are not measurements.
+        */
         this.logoHeight = 3;
+        /**
+         * Logo alt text
+         */
         this.logoAltText = '';
+        /**
+         * Full URL of a main hero image.
+         */
         this.mainImage = null;
+        /**
+         * Determines whether the main image is clipped to a triangle shape (default) or used as
+         * a background for the entire component. Clipping can leave a lot of blank space.
+         */
         this.mainImageShape = 'triangle';
+        /**
+         * Horizontal alignment of image
+         */
         this.mainImageAlignHorizontal = 'center';
+        /**
+     * Vertical alignment of image
+     */
         this.mainImageAlignVertical = 'center';
-        this.mainTitle = undefined;
-        this.mainTitleColour = undefined;
-        this.teaser = undefined;
-        this.teaserColour = undefined;
-        this.buttonUrl = undefined;
-        this.buttonLabel = undefined;
+        /**
+         * Button Colour Scheme
+         */
         this.buttonColourScheme = 'primary';
     }
     render() {
@@ -712,17 +824,10 @@ const BiggiveIconButton = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.doButtonClick = index.createEvent(this, "doButtonClick", 7);
-        this.handleButtonClick = (event) => {
-            this.doButtonClick.emit({ event: event, url: event.target.parentElement.href });
-        };
         this.spaceBelow = 1;
         this.backgroundColour = 'white';
         this.backgroundPadding = 0;
-        this.text = undefined;
         this.textColour = 'black';
-        this.iconGroup = undefined;
-        this.icon = undefined;
-        this.url = undefined;
         this.openInNewTab = false;
         this.size = 'medium';
         this.arrow = false;
@@ -732,6 +837,9 @@ const BiggiveIconButton = class {
         this.centered = false;
         this.rounded = false;
         this.buttonId = undefined;
+        this.handleButtonClick = (event) => {
+            this.doButtonClick.emit({ event: event, url: event.target.parentElement.href });
+        };
     }
     render() {
         return (index.h("div", { key: '2345c3faaec52f17c518641b301caedc686ba150', class: 'container space-below-' +
@@ -756,12 +864,33 @@ const BiggiveImageStyle0 = biggiveImageCss;
 const BiggiveImage = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /**
+         * Space above component
+         */
         this.spaceAbove = 0;
+        /**
+         * Space below component
+         */
         this.spaceBelow = 0;
+        /**
+         * Full URL of a image.
+         */
         this.imageUrl = '';
+        /**
+         * Image alt text tag.
+         */
         this.imageAltText = '';
+        /**
+         * Image width
+         */
         this.width = 0;
+        /**
+         * Image width
+         */
         this.height = 0;
+        /**
+         * Size unit
+         */
         this.sizeUnit = 'px';
     }
     getWidth() {
@@ -791,17 +920,11 @@ const BiggiveImageButton = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.doButtonClick = index.createEvent(this, "doButtonClick", 7);
-        this.handleButtonClick = (event) => {
-            this.doButtonClick.emit({ event: event, url: event.target.parentElement.href });
-        };
         this.spaceBelow = 1;
         this.backgroundColour = 'white';
         this.backgroundPadding = 0;
-        this.text = undefined;
         this.textColour = 'black';
-        this.imageUrl = undefined;
         this.imageStyle = 'cover';
-        this.url = undefined;
         this.openInNewTab = false;
         this.size = 'medium';
         this.arrow = false;
@@ -811,6 +934,9 @@ const BiggiveImageButton = class {
         this.centered = false;
         this.rounded = false;
         this.buttonId = undefined;
+        this.handleButtonClick = (event) => {
+            this.doButtonClick.emit({ event: event, url: event.target.parentElement.href });
+        };
     }
     render() {
         return (index.h("div", { key: 'ca8fa701b2ebc212f7b80005f41c43953e67b187', class: 'container space-below-' +
@@ -835,18 +961,37 @@ const BiggiveImageFeatureStyle0 = biggiveImageFeatureCss;
 const BiggiveImageFeature = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /**
+         * Space below component
+         */
         this.spaceBelow = 0;
+        /**
+         * Default text colour
+         */
         this.defaultTextColour = 'primary';
+        /**
+         * Full URL of a image.
+         */
         this.imageUrl = '';
+        /**
+         * Image alt text tag.
+         */
         this.imageAltText = '';
-        this.slug = undefined;
+        /**
+         * Slug colour
+         */
         this.slugColour = '';
-        this.mainTitle = undefined;
+        /**
+         * Slug colour
+         */
         this.mainTitleColour = '';
-        this.teaser = undefined;
+        /**
+         * Teaser colour
+         */
         this.teaserColour = '';
-        this.buttonUrl = undefined;
-        this.buttonLabel = undefined;
+        /**
+         * Button Colour Scheme
+         */
         this.buttonColourScheme = 'primary';
     }
     render() {
@@ -863,6 +1008,19 @@ const BiggiveMainMenu = class {
         index.registerInstance(this, hostRef);
         this.logoutClicked = index.createEvent(this, "logoutClicked", 7);
         this.lastScrollHeight = 0;
+        // URL prefixes vary by environment, and components library is not best placed to know what they are, so we
+        // take them as props. But somehow on first render the prop passed in doesn't seem to be used, so the defaults
+        // below are the values currently used in our prod site. They should be replaced by other values in other
+        // environments.
+        this.blogUrlPrefix = 'https://biggive.org';
+        this.donateUrlPrefix = 'https://donate.biggive.org';
+        this.experienceUrlPrefix = 'https://community.biggive.org';
+        this.myAccountFlagEnabled = false;
+        /**
+         * Whether the current user is logged in (i.e. is assumed to have a valid JWT). They get links to some
+         * extra content if they are.
+         */
+        this.isLoggedIn = false;
         this.openMobileMenu = () => {
             const mobileMenu = this.host.shadowRoot.querySelector('.nav-links');
             mobileMenu.style.left = '0';
@@ -874,11 +1032,6 @@ const BiggiveMainMenu = class {
             const mobileMenu = this.host.shadowRoot.querySelector('.nav-links');
             mobileMenu.style.left = '-100%';
         };
-        this.blogUrlPrefix = 'https://biggive.org';
-        this.donateUrlPrefix = 'https://donate.biggive.org';
-        this.experienceUrlPrefix = 'https://community.biggive.org';
-        this.myAccountFlagEnabled = false;
-        this.isLoggedIn = false;
     }
     async closeMobileMenuFromOutside() {
         const mobileMenu = this.host.shadowRoot.querySelector('.nav-links');
@@ -986,10 +1139,14 @@ const BiggiveMiscIconStyle0 = biggiveMiscIconCss;
 const BiggiveMiscIcon = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /**
+         * Background colour
+         */
         this.backgroundColour = 'primary';
+        /**
+         * Background colour
+         */
         this.iconColour = 'white';
-        this.icon = undefined;
-        this.url = undefined;
     }
     getMiscIcon() {
         var icon = fontawesomeIcons.FontAwesomeIconsService.getMiscIcon(this.icon);
@@ -1022,6 +1179,9 @@ const BiggivePageColumnsStyle0 = biggivePageColumnsCss;
 const BiggivePageColumns = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /**
+         * Space below component
+         */
         this.spaceBelow = 0;
     }
     render() {
@@ -1036,11 +1196,25 @@ const BiggivePageSectionStyle0 = biggivePageSectionCss;
 const BiggivePageSection = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /**
+         * Space below component
+         */
         this.spaceBelow = 0;
+        /**
+         * Section style top
+         */
         this.sectionStyleTop = 'straight';
+        /**
+         * Section style bottom
+         */
         this.sectionStyleBottom = 'straight';
-        this.colourScheme = undefined;
+        /**
+         * Width
+         */
         this.maxWidth = 100;
+        /**
+         * Bleeds the primary brand colour to the left and right edge of the viewport, even if used within a containing block element.
+         */
         this.primaryFullBleed = false;
     }
     render() {
@@ -1065,6 +1239,10 @@ const BiggivePopupStyle0 = biggivePopupCss;
 const BiggivePopup = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /**
+         * Function to execute when the modal is closed, whether by the user or programmatically.
+         */
+        this.modalClosedCallback = () => { };
         this.closeFromWithin = (event) => {
             if (event.target.classList.contains('popup') || event.target.classList.contains('close')) {
                 this.popup.setAttribute('data-visible', 'false');
@@ -1072,7 +1250,6 @@ const BiggivePopup = class {
                 this.modalClosedCallback();
             }
         };
-        this.modalClosedCallback = () => { };
     }
     async openFromOutside() {
         this.popup.setAttribute('data-visible', 'true');
@@ -1096,8 +1273,17 @@ const BiggiveProgressBarStyle0 = biggiveProgressBarCss;
 const BiggiveProgressBar = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /**
+         * Space below component
+         */
         this.spaceBelow = 0;
+        /**
+         * Colour Scheme
+         */
         this.colourScheme = 'primary';
+        /**
+         * Percentage to show + use for CSS width; round before input if desired
+         */
         this.counter = 100;
     }
     render() {
@@ -1133,14 +1319,17 @@ const BiggiveSheetStyle0 = biggiveSheetCss;
 const BiggiveSheet = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /**
+         * A string ID (no spaces) unique within the page context, used to trigger the opening of the sheet from an anchor hash.
+         */
+        this.sheetId = '';
+        this.backgroundColour = 'primary';
+        this.textColour = 'white';
         this.closeSheet = () => {
             var _a, _b;
             (_b = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.container')) === null || _b === void 0 ? void 0 : _b.classList.remove('active');
             history.pushState('', document.title, window.location.pathname);
         };
-        this.sheetId = '';
-        this.backgroundColour = 'primary';
-        this.textColour = 'white';
     }
     componentWillLoad() {
         window.addEventListener('hashchange', () => {
@@ -1169,11 +1358,26 @@ const BiggiveSocialIconStyle0 = biggiveSocialIconCss;
 const BiggiveSocialIcon = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.service = undefined;
+        /**
+         * Used within accessible labels for links. Typically a charity name or "Big Give". Can also be "Share".
+         */
         this.labelPrefix = 'Big Give';
+        /**
+         * Background colour
+         */
         this.backgroundColour = 'primary';
+        /**
+         * Icon colour
+         */
         this.iconColour = 'white';
+        /**
+         * Used in the social icons in the biggive-footer, which are more spaced out
+         * than others across the site. COM-43.
+         */
         this.wide = false;
+        /**
+         * Url
+         */
         this.url = '#';
     }
     getSocialIcon() {
@@ -1206,6 +1410,13 @@ const BiggiveTabbedContentStyle0 = biggiveTabbedContentCss;
 const BiggiveTabbedContent = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.spaceBelow = 0;
+        this.textColour = 'black';
+        this.selectedTextColour = 'primary';
+        this.navigationHighlightColour = 'grey-medium';
+        this.selectedNavigationHighlightColour = 'primary';
+        this.buttonBackgroundColour = 'white';
+        this.buttonIconColour = 'primary';
         this.scrollOffset = 0;
         this.children = [];
         this.clickTabHandler = (e) => {
@@ -1225,13 +1436,6 @@ const BiggiveTabbedContent = class {
         this.clickNextHandler = () => {
             this.scrollTab('NEXT');
         };
-        this.spaceBelow = 0;
-        this.textColour = 'black';
-        this.selectedTextColour = 'primary';
-        this.navigationHighlightColour = 'grey-medium';
-        this.selectedNavigationHighlightColour = 'primary';
-        this.buttonBackgroundColour = 'white';
-        this.buttonIconColour = 'primary';
     }
     componentWillLoad() {
         this.children = Array.from(this.host.children);
@@ -1333,8 +1537,6 @@ const BiggiveTextInputStyle0 = biggiveTextInputCss;
 const BiggiveTextInput = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.value = undefined;
-        this.currency = undefined;
         this.spaceBelow = 0;
         this.selectStyle = 'bordered';
     }
@@ -1361,6 +1563,18 @@ const BiggiveTimelineStyle0 = biggiveTimelineCss;
 const BiggiveTimeline = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.spaceBelow = 0;
+        this.textColour = 'black';
+        this.selectedTextColour = 'primary';
+        this.navigationHighlightColour = 'grey-medium';
+        this.selectedNavigationHighlightColour = 'primary';
+        this.buttonBackgroundColour = 'white';
+        this.buttonIconColour = 'primary';
+        this.entryBackgroundColour = 'white';
+        this.entryHighlightColour = 'secondary';
+        this.entryDateColour = 'black';
+        this.entryTitleColour = 'primary';
+        this.entryTextColour = 'black';
         this.scrollOffset = 0;
         this.tabHeadings = [];
         this.children = [];
@@ -1380,18 +1594,6 @@ const BiggiveTimeline = class {
         this.clickNextHandler = () => {
             this.scrollTab('NEXT');
         };
-        this.spaceBelow = 0;
-        this.textColour = 'black';
-        this.selectedTextColour = 'primary';
-        this.navigationHighlightColour = 'grey-medium';
-        this.selectedNavigationHighlightColour = 'primary';
-        this.buttonBackgroundColour = 'white';
-        this.buttonIconColour = 'primary';
-        this.entryBackgroundColour = 'white';
-        this.entryHighlightColour = 'secondary';
-        this.entryDateColour = 'black';
-        this.entryTitleColour = 'primary';
-        this.entryTextColour = 'black';
     }
     componentWillLoad() {
         this.children = Array.from(this.host.children);
@@ -1501,8 +1703,6 @@ const BiggiveTimelineEntryStyle0 = biggiveTimelineEntryCss;
 const BiggiveTimelineEntry = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.date = undefined;
-        this.heading = undefined;
     }
     render() {
         return null;
@@ -1517,12 +1717,26 @@ const BiggiveTotalizer = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.lastWrapperWidth = 0;
+        /**
+         * Space below component
+         */
         this.spaceBelow = 0;
+        /**
+         * Primary banner colour
+         */
         this.primaryColour = 'primary';
+        /**
+         * Primary text colour
+         */
         this.primaryTextColour = 'white';
+        /**
+         * Secondary banner colour
+         */
         this.secondaryColour = 'secondary';
+        /**
+         * Secondary text colour
+         */
         this.secondaryTextColour = 'black';
-        this.mainMessage = undefined;
     }
     setSpeed(itemsWidth, containerWidth) {
         var _a;
@@ -1608,8 +1822,6 @@ const BiggiveTotalizerTickerItemStyle0 = biggiveTotalizerTickerItemCss;
 const BiggiveTotalizerTickerItem = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.figure = undefined;
-        this.label = undefined;
     }
     render() {
         return (index.h("div", { key: 'a2402c2906760dd5e9f2220ba9f3b82e402ac668', class: "ticker-item" }, index.h("strong", { key: 'f5c711457f2fd02384f65e8a3d0cefd4643b6fe0' }, this.figure), " ", this.label));
@@ -1623,18 +1835,37 @@ const BiggiveVideoFeatureStyle0 = biggiveVideoFeatureCss;
 const BiggiveVideoFeature = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /**
+         * Space above component
+         */
         this.spaceAbove = 0;
+        /**
+         * Space below component
+         */
         this.spaceBelow = 0;
+        /**
+         * Default text colour
+         */
         this.defaultTextColour = 'primary';
+        /**
+         * Full URL of a video.
+         */
         this.videoUrl = '';
-        this.slug = undefined;
+        /**
+         * Slug colour
+         */
         this.slugColour = '';
-        this.mainTitle = undefined;
+        /**
+         * Slug colour
+         */
         this.mainTitleColour = '';
-        this.teaser = undefined;
+        /**
+         * Teaser colour
+         */
         this.teaserColour = '';
-        this.buttonUrl = undefined;
-        this.buttonLabel = undefined;
+        /**
+         * Button Colour Scheme
+         */
         this.buttonColourScheme = 'primary';
     }
     render() {