@biggive/components 202508011504.0.0 → 202508201444.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (30) hide show
  1. package/dist/biggive/biggive-campaign-card.entry.esm.js.map +1 -1
  2. package/dist/biggive/biggive-heading-banner.entry.esm.js.map +1 -1
  3. package/dist/biggive/biggive.esm.js +1 -1
  4. package/dist/biggive/{p-453eeb33.entry.js → p-8423b699.entry.js} +2 -2
  5. package/dist/biggive/p-8423b699.entry.js.map +1 -0
  6. package/dist/biggive/{p-bc53052f.entry.js → p-cee6717b.entry.js} +2 -2
  7. package/dist/biggive/p-cee6717b.entry.js.map +1 -0
  8. package/dist/cjs/biggive-campaign-card.cjs.entry.js +4 -1
  9. package/dist/cjs/biggive-campaign-card.cjs.entry.js.map +1 -1
  10. package/dist/cjs/biggive-campaign-card.entry.cjs.js.map +1 -1
  11. package/dist/cjs/biggive-heading-banner.cjs.entry.js +11 -8
  12. package/dist/cjs/biggive-heading-banner.cjs.entry.js.map +1 -1
  13. package/dist/cjs/biggive-heading-banner.entry.cjs.js.map +1 -1
  14. package/dist/collection/components/biggive-campaign-card/biggive-campaign-card.js +4 -1
  15. package/dist/collection/components/biggive-campaign-card/biggive-campaign-card.js.map +1 -1
  16. package/dist/collection/components/biggive-heading-banner/biggive-heading-banner.js +11 -8
  17. package/dist/collection/components/biggive-heading-banner/biggive-heading-banner.js.map +1 -1
  18. package/dist/components/biggive-campaign-card.js +4 -1
  19. package/dist/components/biggive-campaign-card.js.map +1 -1
  20. package/dist/components/biggive-heading-banner.js +11 -8
  21. package/dist/components/biggive-heading-banner.js.map +1 -1
  22. package/dist/esm/biggive-campaign-card.entry.js +4 -1
  23. package/dist/esm/biggive-campaign-card.entry.js.map +1 -1
  24. package/dist/esm/biggive-heading-banner.entry.js +11 -8
  25. package/dist/esm/biggive-heading-banner.entry.js.map +1 -1
  26. package/hydrate/index.js +15 -9
  27. package/hydrate/index.mjs +15 -9
  28. package/package.json +1 -1
  29. package/dist/biggive/p-453eeb33.entry.js.map +0 -1
  30. package/dist/biggive/p-bc53052f.entry.js.map +0 -1
package/dist/biggive/biggive-campaign-card.entry.esm.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"biggive-campaign-card.entry.esm.js","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 && this.banner !== undefined ? (\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"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"biggive-campaign-card.entry.esm.js","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 && this.banner !== undefined ? (\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) ? (\n // We don't have a progress bar to show in this case, so the following is just functioning as a spacer to\n // keep layout consistent. Counter must be non-null to make bar display.\n <div class=\"progress-bar-wrap\" style={{ visibility: 'hidden' }}>\n <biggive-progress-bar counter={0} colour-scheme=\"primary\"></biggive-progress-bar>\n </div>\n ) : (\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"],"names":[],"mappings":"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"}
package/dist/biggive/biggive-heading-banner.entry.esm.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"biggive-heading-banner.entry.esm.js","sources":["src/components/biggive-heading-banner/biggive-heading-banner.scss?tag=biggive-heading-banner&encapsulation=shadow","src/components/biggive-heading-banner/biggive-heading-banner.tsx"],"sourcesContent":[":host {\n display: contents;\n @include standard-font();\n}\n\n@include spacers();\n@include text-colours();\n\n.banner {\n font-size: 17px;\n background-size: cover;\n height: 600px;\n position: relative;\n overflow: hidden;\n\n &.short {\n height: 400px;\n }\n\n img.background {\n object-fit: cover;\n position: absolute;\n max-width: 2000px;\n width: 100%;\n height: 400px;\n left: 50%;\n transform: translateX(-50%);\n bottom: 0;\n display: none;\n @media (min-width: 450px) {\n display: block;\n bottom: initial;\n height: 100%;\n }\n }\n}\n\n.sleeve {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n max-width: 1200px;\n margin-left: auto;\n margin-right: auto;\n padding: 0;\n box-sizing: border-box;\n height: 100%;\n\n @media (min-width: #{$screen-mobile-max}) {\n flex-direction: column;\n }\n\n @media (min-width: #{$screen-mobile-max + 30px}) {\n // adding 30px to standard breakpoint to match padding.\n padding-left: 20px;\n align-items: start;\n height: 600px;\n }\n}\n\n@media (min-width: #{$screen-mobile-small + 30px}) {\n .short .sleeve {\n height: 400px;\n }\n}\n\n.content-wrap {\n position: relative;\n padding-top: 70px; // includes 30 extra on mobile to make space for overlapping 'main-message-wrap'\n padding-right: 30px;\n padding-left: 30px;\n padding-bottom: 30px;\n box-sizing: border-box;\n width: 100%;\n max-width: 450px;\n\n @media (min-width: #{$screen-mobile-small}) {\n margin-bottom: auto;\n margin-top: auto;\n padding-top: 40px;\n }\n\n @media (min-width: #{$screen-mobile-small + 30px}) {\n padding-top: 30px;\n margin-left: 0;\n }\n}\n\nimg.stacked {\n width: 100%;\n height: 100%;\n object-fit: cover;\n\n @media (min-width: #{$screen-mobile-small}) {\n display: none;\n }\n}\n\nh1.main-title {\n font-size: 47px;\n line-height: 60px;\n font-weight: bold;\n margin: 0 0 15px;\n padding: 0;\n}\n\n.slug {\n font-size: 20px;\n line-height: inherit;\n font-weight: bold;\n margin-bottom: -7px;\n}\n\n.teaser {\n margin: 0;\n padding: 0;\n}\n\n.logo {\n height: 100px;\n background-size: contain;\n background-repeat: no-repeat;\n background-position: left center;\n margin-bottom: 10px;\n\n img {\n width: auto;\n height: 100%;\n position: relative;\n }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * Heading banner component for use as a page header.\n *\n * This component provides a banner with a background image, optional logo, and text content.\n * It supports different heights and customizable colors.\n */\n@Component({\n tag: 'biggive-heading-banner',\n styleUrl: 'biggive-heading-banner.scss',\n shadow: true,\n})\nexport class BiggiveHeadingBanner {\n /**\n * Optional logo object with URL and alt text\n */\n @Prop() logo?: { url: string; alt?: string } | string;\n\n /**\n * Optional slightly smaller text to appear above the main title\n */\n @Prop() slug?: string = '';\n\n /**\n * Main title text for the banner\n */\n @Prop() mainTitle!: string;\n\n /**\n * URL for the main banner image\n */\n @Prop() mainImageUrl!: string | null;\n\n /**\n * Focal point for the image positioning\n * x and y values are percentages (0-100)\n */\n @Prop() focalPoint!: string | { x: number; y: number };\n\n /**\n * Optional teaser text that appears below the main title\n */\n @Prop() teaser!: string;\n\n /**\n * Background color for the banner\n */\n @Prop() backgroundColour!: string;\n\n /**\n * Background color for the text content area\n */\n @Prop() textBackgroundColour!: string;\n\n @Prop() slugColour!: string;\n\n @Prop() mainTitleColour!: string;\n\n @Prop() teaserColour!: string;\n\n /**\n * Height variant of the banner\n * 'tall' for full height, 'short' for reduced height\n */\n @Prop() height: 'short' | 'tall' = 'tall';\n\n /**\n * Takes a string that may contain any form of newlines, and returns an array that alternates\n * between substrings found between the newlines and <br/> elements as objects.\n */\n private lineBreakToBr(string: string | undefined): unknown[] {\n if (string == undefined) {\n return [];\n }\n\n return string\n .split(/\\r?\\n|\\r|\\n/g)\n .map(line => [line, <br />])\n .flat()\n .slice(0, -1);\n }\n\n private getParsedFocalPoint(): { x: number; y: number } {\n if (typeof this.focalPoint === 'string') {\n return JSON.parse(this.focalPoint);\n }\n return this.focalPoint;\n }\n\n private getParsedLogo(): { url: string; alt?: string } | undefined {\n if (this.logo === undefined) return undefined;\n if (typeof this.logo === 'string') {\n return JSON.parse(this.logo);\n }\n return this.logo;\n }\n\n render() {\n // Convert teaser text with line breaks to JSX\n const teaserLines = this.lineBreakToBr(this.teaser);\n\n // Ensure color values have # prefix if they're hex colors without it\n const bgColor = this.backgroundColour.startsWith('#') ? this.backgroundColour : `#${this.backgroundColour}`;\n const textBgColor = this.textBackgroundColour.startsWith('#') ? this.textBackgroundColour : `#${this.textBackgroundColour}`;\n const slugColour = this.slugColour.startsWith('#') ? this.slugColour : `#${this.slugColour}`;\n const mainTitleColour = this.mainTitleColour.startsWith('#') ? this.mainTitleColour : `#${this.mainTitleColour}`;\n const teaserColour = this.teaserColour.startsWith('#') ? this.teaserColour : `#${this.teaserColour}`;\n\n const logo = this.getParsedLogo();\n return (\n <div\n class={{\n banner: true,\n short: this.height === 'short',\n }}\n style={{\n 'background-color': bgColor,\n }}\n >\n {typeof this.mainImageUrl === 'string' && this.mainImageUrl !== '' ? (\n <img\n class=\"background\"\n src={this.mainImageUrl}\n alt=\"\"\n style={{\n 'object-position': `${this.getParsedFocalPoint().x}% ${this.getParsedFocalPoint().y}%`,\n }}\n />\n ) : null}\n <div class=\"sleeve\">\n <div\n class=\"content-wrap\"\n style={{\n 'background-color': textBgColor,\n }}\n >\n {logo ? (\n <div class=\"logo\">\n <img src={logo.url} alt={logo.alt || ''} />\n </div>\n ) : null}\n\n {this.slug != undefined ? (\n <div\n style={{\n color: slugColour,\n }}\n class=\"slug\"\n >\n {this.slug}\n </div>\n ) : null}\n\n <h1\n style={{\n color: mainTitleColour,\n }}\n class=\"main-title\"\n >\n {this.mainTitle}\n </h1>\n\n {this.teaser != undefined ? (\n <div\n class=\"teaser\"\n style={{\n color: teaserColour,\n }}\n >\n {teaserLines}\n </div>\n ) : null}\n </div>\n\n {typeof this.mainImageUrl === 'string' && this.mainImageUrl !== '' ? (\n <img\n class=\"stacked\"\n src={this.mainImageUrl}\n alt=\"\"\n style={{\n 'object-position': `${this.getParsedFocalPoint().x}% ${this.getParsedFocalPoint().y}%`,\n }}\n />\n ) : null}\n </div>\n </div>\n );\n }\n}\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"biggive-heading-banner.entry.esm.js","sources":["src/components/biggive-heading-banner/biggive-heading-banner.scss?tag=biggive-heading-banner&encapsulation=shadow","src/components/biggive-heading-banner/biggive-heading-banner.tsx"],"sourcesContent":[":host {\n display: contents;\n @include standard-font();\n}\n\n@include spacers();\n@include text-colours();\n\n.banner {\n font-size: 17px;\n background-size: cover;\n height: 600px;\n position: relative;\n overflow: hidden;\n\n &.short {\n height: 400px;\n }\n\n img.background {\n object-fit: cover;\n position: absolute;\n max-width: 2000px;\n width: 100%;\n height: 400px;\n left: 50%;\n transform: translateX(-50%);\n bottom: 0;\n display: none;\n @media (min-width: 450px) {\n display: block;\n bottom: initial;\n height: 100%;\n }\n }\n}\n\n.sleeve {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n max-width: 1200px;\n margin-left: auto;\n margin-right: auto;\n padding: 0;\n box-sizing: border-box;\n height: 100%;\n\n @media (min-width: #{$screen-mobile-max}) {\n flex-direction: column;\n }\n\n @media (min-width: #{$screen-mobile-max + 30px}) {\n // adding 30px to standard breakpoint to match padding.\n padding-left: 20px;\n align-items: start;\n height: 600px;\n }\n}\n\n@media (min-width: #{$screen-mobile-small + 30px}) {\n .short .sleeve {\n height: 400px;\n }\n}\n\n.content-wrap {\n position: relative;\n padding-top: 70px; // includes 30 extra on mobile to make space for overlapping 'main-message-wrap'\n padding-right: 30px;\n padding-left: 30px;\n padding-bottom: 30px;\n box-sizing: border-box;\n width: 100%;\n max-width: 450px;\n\n @media (min-width: #{$screen-mobile-small}) {\n margin-bottom: auto;\n margin-top: auto;\n padding-top: 40px;\n }\n\n @media (min-width: #{$screen-mobile-small + 30px}) {\n padding-top: 30px;\n margin-left: 0;\n }\n}\n\nimg.stacked {\n width: 100%;\n height: 100%;\n object-fit: cover;\n\n @media (min-width: #{$screen-mobile-small}) {\n display: none;\n }\n}\n\nh1.main-title {\n font-size: 47px;\n line-height: 60px;\n font-weight: bold;\n margin: 0 0 15px;\n padding: 0;\n}\n\n.slug {\n font-size: 20px;\n line-height: inherit;\n font-weight: bold;\n margin-bottom: -7px;\n}\n\n.teaser {\n margin: 0;\n padding: 0;\n}\n\n.logo {\n height: 100px;\n background-size: contain;\n background-repeat: no-repeat;\n background-position: left center;\n margin-bottom: 10px;\n\n img {\n width: auto;\n height: 100%;\n position: relative;\n }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * Heading banner component for use as a page header.\n *\n * This component provides a banner with a background image, optional logo, and text content.\n * It supports different heights and customizable colors.\n */\n@Component({\n tag: 'biggive-heading-banner',\n styleUrl: 'biggive-heading-banner.scss',\n shadow: true,\n})\nexport class BiggiveHeadingBanner {\n /**\n * Optional logo object with URL and alt text\n */\n @Prop() logo?: { url: string; alt?: string } | string;\n\n /**\n * Optional slightly smaller text to appear above the main title\n */\n @Prop() slug?: string = '';\n\n /**\n * Main title text for the banner\n */\n @Prop() mainTitle!: string;\n\n /**\n * URL for the main banner image\n */\n @Prop() mainImageUrl!: string | null;\n\n /**\n * Focal point for the image positioning\n * x and y values are percentages (0-100)\n */\n @Prop() focalPoint!: string | { x: number; y: number };\n\n /**\n * Optional teaser text that appears below the main title\n */\n @Prop() teaser!: string;\n\n /**\n * Background color for the banner\n */\n @Prop() backgroundColour!: string;\n\n /**\n * Background color for the text content area\n */\n @Prop() textBackgroundColour!: string;\n\n @Prop() slugColour!: string;\n\n @Prop() mainTitleColour!: string;\n\n @Prop() teaserColour!: string;\n\n /**\n * Height variant of the banner\n * 'tall' for full height, 'short' for reduced height\n */\n @Prop() height: 'short' | 'tall' = 'tall';\n\n /**\n * Takes a string that may contain any form of newlines, and returns an array that alternates\n * between substrings found between the newlines and <br/> elements as objects.\n */\n private lineBreakToBr(string: string | undefined): unknown[] {\n if (string == undefined) {\n return [];\n }\n\n return string\n .split(/\\r?\\n|\\r|\\n/g)\n .map(line => [line, <br />])\n .flat()\n .slice(0, -1);\n }\n\n private getParsedFocalPoint(): { x: number; y: number } {\n if (typeof this.focalPoint === 'string') {\n return JSON.parse(this.focalPoint);\n }\n return this.focalPoint;\n }\n\n private getParsedLogo(): { url: string; alt?: string } | undefined {\n if (this.logo === undefined) return undefined;\n if (typeof this.logo === 'string') {\n return JSON.parse(this.logo);\n }\n return this.logo;\n }\n\n render() {\n // Convert teaser text with line breaks to JSX\n const teaserLines = this.lineBreakToBr(this.teaser);\n\n // Ensure color values have # prefix if they're hex colors without it\n // not sure how but it seems we're sometimes doing at least an intiial render before the colour props are populated,\n // so using null-safe navigation to avoid a crash here.\n const bgColor = this.backgroundColour?.startsWith('#') ? this.backgroundColour : `#${this.backgroundColour}`;\n const textBgColor = this.textBackgroundColour?.startsWith('#') ? this.textBackgroundColour : `#${this.textBackgroundColour}`;\n const slugColour = this.slugColour?.startsWith('#') ? this.slugColour : `#${this.slugColour}`;\n const mainTitleColour = this.mainTitleColour?.startsWith('#') ? this.mainTitleColour : `#${this.mainTitleColour}`;\n const teaserColour = this.teaserColour?.startsWith('#') ? this.teaserColour : `#${this.teaserColour}`;\n\n const logo = this.getParsedLogo();\n return (\n <div\n class={{\n banner: true,\n short: this.height === 'short',\n }}\n style={{\n 'background-color': bgColor,\n }}\n >\n {typeof this.mainImageUrl === 'string' && this.mainImageUrl !== '' ? (\n <img\n class=\"background\"\n src={this.mainImageUrl}\n alt=\"\"\n style={{\n 'object-position': `${this.getParsedFocalPoint().x}% ${this.getParsedFocalPoint().y}%`,\n }}\n />\n ) : null}\n <div class=\"sleeve\">\n <div\n class=\"content-wrap\"\n style={{\n 'background-color': textBgColor,\n }}\n >\n {logo ? (\n <div class=\"logo\">\n <img src={logo.url} alt={logo.alt || ''} />\n </div>\n ) : null}\n\n {this.slug != undefined ? (\n <div\n style={{\n color: slugColour,\n }}\n class=\"slug\"\n >\n {this.slug}\n </div>\n ) : null}\n\n <h1\n style={{\n color: mainTitleColour,\n }}\n class=\"main-title\"\n >\n {this.mainTitle}\n </h1>\n\n {this.teaser != undefined ? (\n <div\n class=\"teaser\"\n style={{\n color: teaserColour,\n }}\n >\n {teaserLines}\n </div>\n ) : null}\n </div>\n\n {typeof this.mainImageUrl === 'string' && this.mainImageUrl !== '' ? (\n <img\n class=\"stacked\"\n src={this.mainImageUrl}\n alt=\"\"\n style={{\n 'object-position': `${this.getParsedFocalPoint().x}% ${this.getParsedFocalPoint().y}%`,\n }}\n />\n ) : null}\n </div>\n </div>\n );\n }\n}\n"],"names":[],"mappings":"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"}
package/dist/biggive/biggive.esm.js CHANGED
@@ -1,2 +1,2 @@
1
- import{p as e,H as o,b as t}from"./p-Bw8i6zSc.js";export{s as setNonce}from"./p-Bw8i6zSc.js";import{g as l}from"./p-DQuL1Twl.js";var r=()=>{{a(o.prototype)}const t=import.meta.url;const l={};if(t!==""){l.resourcesUrl=new URL(".",t).href}return e(l)};var a=e=>{const o=e.cloneNode;e.cloneNode=function(e){if(this.nodeName==="TEMPLATE"){return o.call(this,e)}const t=o.call(this,false);const l=this.childNodes;if(e){for(let e=0;e<l.length;e++){if(l[e].nodeType!==2){t.appendChild(l[e].cloneNode(true))}}}return t}};r().then((async e=>{await l();return t(JSON.parse('[["p-bc53052f",[[257,"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"],"isFutureCampaign":[4,"is-future-campaign"],"isPastCampaign":[4,"is-past-campaign"],"datetime":[1]}]]],["p-a3144d26",[[257,"biggive-campaign-card-filter-grid",{"spaceBelow":[2,"space-below"],"intro":[1],"searchText":[1,"search-text"],"placeholderText":[1,"placeholder-text"],"buttonText":[1,"button-text"],"categoryOptions":[1,"category-options"],"beneficiaryOptions":[1,"beneficiary-options"],"locationOptions":[1,"location-options"],"selectedSortByOption":[1025,"selected-sort-by-option"],"selectedFilterCategory":[1025,"selected-filter-category"],"selectedFilterBeneficiary":[1025,"selected-filter-beneficiary"],"selectedFilterLocation":[1025,"selected-filter-location"],"filtersApplied":[32],"unfocusInputs":[64]}]]],["p-801b1332",[[257,"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"]}]]],["p-da5d01aa",[[257,"biggive-cookie-banner",{"autoOpenPreferences":[4,"auto-open-preferences"],"blogUriPrefix":[1,"blog-uri-prefix"],"previouslyAgreedCookiePreferences":[16,"previously-agreed-cookie-preferences"]},null,{"autoOpenPreferences":["autoOpenPreferencesIfRequested"]}]]],["p-8dec4d4c",[[257,"biggive-footer",{"headingLevel":[2,"heading-level"],"donateUrlPrefix":[1,"donate-url-prefix"],"blogUrlPrefix":[1,"blog-url-prefix"],"experienceUrlPrefix":[1,"experience-url-prefix"],"smallCharityWeekEnabled":[4,"small-charity-week-enabled"],"usePresetFooter":[4,"use-preset-footer"]}]]],["p-feb1ca0a",[[257,"biggive-main-menu",{"blogUrlPrefix":[1,"blog-url-prefix"],"donateUrlPrefix":[1,"donate-url-prefix"],"experienceUrlPrefix":[1,"experience-url-prefix"],"smallCharityWeekEnabled":[4,"small-charity-week-enabled"],"someCampaignHasHomePageRedirect":[4,"some-campaign-has-home-page-redirect"],"isLoggedIn":[4,"is-logged-in"],"closeMobileMenuFromOutside":[64]}]]],["p-232244c2",[[257,"philco-main-menu",{"philcoUrlPrefix":[1,"philco-url-prefix"],"closeMobileMenuFromOutside":[64]}]]],["p-f9fb0feb",[[257,"biggive-article-card",{"spaceBelow":[2,"space-below"],"backgroundColour":[1,"background-colour"],"backgroundImageUrl":[1,"background-image-url"],"slug":[1],"slugColour":[1,"slug-colour"],"date":[1],"dateColour":[1,"date-colour"],"mainTitle":[1,"main-title"],"mainTitleColour":[1,"main-title-colour"],"mainImageUrl":[1,"main-image-url"],"mainImageAltText":[1,"main-image-alt-text"],"image1Url":[1,"image-1-url"],"image1AltText":[1,"image-1-alt-text"],"image2Url":[1,"image-2-url"],"image2AltText":[1,"image-2-alt-text"],"imageLabel":[1,"image-label"],"imageLabelColour":[1,"image-label-colour"],"buttonLabel":[1,"button-label"],"buttonUrl":[1,"button-url"],"buttonColour":[1,"button-colour"],"clipBottomLeftCorner":[4,"clip-bottom-left-corner"],"clipTopRightCorner":[4,"clip-top-right-corner"]}]]],["p-0ba9c6b9",[[257,"biggive-basic-card",{"spaceBelow":[2,"space-below"],"siteDesign":[1,"site-design"],"backgroundColour":[1,"background-colour"],"backgroundImageUrl":[1,"background-image-url"],"cardColour":[1,"card-colour"],"textColour":[1,"text-colour"],"mainImageUrl":[1,"main-image-url"],"mainImageAltText":[1,"main-image-alt-text"],"mainTitle":[1,"main-title"],"subtitle":[1],"author":[1],"date":[1],"teaser":[1],"icon":[4],"iconColour":[1,"icon-colour"],"buttonAlign":[1,"button-align"],"buttonStyle":[1,"button-style"],"buttonLabel":[1,"button-label"],"buttonUrl":[1,"button-url"],"buttonColourScheme":[1,"button-colour-scheme"],"clipBottomLeftCorner":[4,"clip-bottom-left-corner"],"clipTopRightCorner":[4,"clip-top-right-corner"],"headingLevel":[2,"heading-level"],"addAnimation":[4,"add-animation"]}]]],["p-a2edb531",[[257,"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"]}]]],["p-095433cc",[[257,"biggive-hero-image",{"spaceBelow":[2,"space-below"],"colourScheme":[1,"colour-scheme"],"slug":[1],"slugColour":[1,"slug-colour"],"logo":[1],"logoHeight":[2,"logo-height"],"logoAltText":[1,"logo-alt-text"],"mainImage":[1,"main-image"],"mainImageShape":[1,"main-image-shape"],"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"]}]]],["p-438cd97b",[[257,"biggive-icon-button",{"spaceBelow":[2,"space-below"],"backgroundColour":[1,"background-colour"],"backgroundPadding":[2,"background-padding"],"text":[1],"textColour":[1,"text-colour"],"icon":[1],"url":[1],"openInNewTab":[4,"open-in-new-tab"],"size":[1],"arrow":[4],"arrowColour":[1,"arrow-colour"],"circle":[4],"shadow":[4],"centered":[4],"rounded":[4],"buttonId":[1,"button-id"]}]]],["p-b16d779d",[[257,"biggive-image-card",{"spaceBelow":[2,"space-below"],"backgroundColour":[1,"background-colour"],"mainImageUrl":[1,"main-image-url"],"mainImageAltText":[1,"main-image-alt-text"],"textAlign":[1,"text-align"],"teaser":[1],"teaserColour":[1,"teaser-colour"],"buttonAlign":[1,"button-align"],"buttonStyle":[1,"button-style"],"buttonLabel":[1,"button-label"],"buttonUrl":[1,"button-url"],"buttonColourScheme":[1,"button-colour-scheme"],"clipBottomLeftCorner":[4,"clip-bottom-left-corner"],"clipTopRightCorner":[4,"clip-top-right-corner"],"addAnimation":[4,"add-animation"]}]]],["p-cdbc0658",[[257,"biggive-image-feature",{"spaceBelow":[2,"space-below"],"defaultTextColour":[1,"default-text-colour"],"imageUrl":[1,"image-url"],"imageAltText":[1,"image-alt-text"],"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"]}]]],["p-3fe03531",[[257,"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"]}]]],["p-17ead927",[[257,"biggive-accordion",{"spaceBelow":[2,"space-below"],"textColour":[1,"text-colour"],"headingColour":[1,"heading-colour"],"children":[32]}]]],["p-b8e3a0c3",[[257,"biggive-accordion-entry",{"heading":[1]}]]],["p-ba97e1a7",[[257,"biggive-back-to-top"]]],["p-f18c6044",[[257,"biggive-biography-card",{"spaceBelow":[2,"space-below"],"borderWidth":[2,"border-width"],"imageUrl":[1,"image-url"],"imageStyle":[1,"image-style"],"textColour":[1,"text-colour"],"backgroundColour":[1,"background-colour"],"fullName":[1,"full-name"],"jobTitle":[1,"job-title"],"textAlign":[1,"text-align"],"ratio":[1],"circle":[4],"circleColour":[1,"circle-colour"],"rounded":[4],"url":[1]}]]],["p-9a616be5",[[257,"biggive-boxed-content",{"spaceBelow":[2,"space-below"],"verticalPadding":[2,"vertical-padding"],"horizontalPadding":[2,"horizontal-padding"],"backgroundColour":[1,"background-colour"],"shadow":[4]}]]],["p-671a00c2",[[257,"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"]}]]],["p-7ea10d17",[[257,"biggive-container-card",{"spaceBelow":[2,"space-below"],"backgroundColour":[1,"background-colour"],"backgroundImageUrl":[1,"background-image-url"],"cardColour":[1,"card-colour"],"textColour":[1,"text-colour"],"clipBottomLeftCorner":[4,"clip-bottom-left-corner"],"clipTopRightCorner":[4,"clip-top-right-corner"],"headingLevel":[2,"heading-level"]}]]],["p-4a7c3666",[[257,"biggive-form"]]],["p-049a9e00",[[257,"biggive-formatted-text",{"spaceBelow":[2,"space-below"],"defaultTextColour":[1,"default-text-colour"],"maxWidth":[2,"max-width"],"siteDesign":[1,"site-design"]}]]],["p-4db2a4f5",[[257,"biggive-grid",{"spaceBelow":[2,"space-below"],"columnCount":[2,"column-count"],"spaceBetween":[4,"space-between"],"columnGap":[2,"column-gap"]}]]],["p-8ead1510",[[257,"biggive-heading",{"spaceAbove":[2,"space-above"],"spaceBelow":[2,"space-below"],"colour":[1],"htmlElement":[1,"html-element"],"size":[2],"align":[1],"text":[1],"icon":[4],"iconColour":[1,"icon-colour"],"siteDesign":[1,"site-design"]}]]],["p-453eeb33",[[257,"biggive-heading-banner",{"logo":[1],"slug":[1],"mainTitle":[1,"main-title"],"mainImageUrl":[1,"main-image-url"],"focalPoint":[1,"focal-point"],"teaser":[1],"backgroundColour":[1,"background-colour"],"textBackgroundColour":[1,"text-background-colour"],"slugColour":[1,"slug-colour"],"mainTitleColour":[1,"main-title-colour"],"teaserColour":[1,"teaser-colour"],"height":[1]}]]],["p-55e2c83a",[[257,"biggive-image",{"spaceAbove":[2,"space-above"],"spaceBelow":[2,"space-below"],"imageUrl":[1,"image-url"],"imageAltText":[1,"image-alt-text"],"width":[2],"height":[2],"sizeUnit":[1,"size-unit"]}]]],["p-ec5fee3c",[[257,"biggive-image-button",{"spaceBelow":[2,"space-below"],"backgroundColour":[1,"background-colour"],"backgroundPadding":[2,"background-padding"],"text":[1],"textColour":[1,"text-colour"],"imageUrl":[1,"image-url"],"imageStyle":[1,"image-style"],"url":[1],"openInNewTab":[4,"open-in-new-tab"],"size":[1],"arrow":[4],"arrowColour":[1,"arrow-colour"],"circle":[4],"shadow":[4],"centered":[4],"rounded":[4],"buttonId":[1,"button-id"]}]]],["p-d70de323",[[257,"biggive-nav-group",{"inline":[4]}]]],["p-a7d8778c",[[257,"biggive-nav-item",{"url":[1],"label":[1],"iconColour":[1,"icon-colour"]}]]],["p-7830b031",[[257,"biggive-page-column"]]],["p-b75ac678",[[257,"biggive-page-columns",{"spaceBelow":[2,"space-below"]}]]],["p-98355c54",[[257,"biggive-page-section",{"spaceBelow":[2,"space-below"],"sectionStyleTop":[1,"section-style-top"],"sectionStyleBottom":[1,"section-style-bottom"],"colourScheme":[1,"colour-scheme"],"maxWidth":[2,"max-width"],"primaryFullBleed":[4,"primary-full-bleed"]}]]],["p-7b68bd95",[[257,"biggive-quote",{"spaceBelow":[2,"space-below"],"defaultTextColour":[1,"default-text-colour"],"quote":[1],"attribution":[1],"quoteIconColour":[1,"quote-icon-colour"],"siteDesign":[1,"site-design"]}]]],["p-2c82c668",[[257,"biggive-sheet",{"sheetId":[1,"sheet-id"],"backgroundColour":[1,"background-colour"],"textColour":[1,"text-colour"]}]]],["p-e8bb3dc0",[[257,"biggive-tab",{"tabTitle":[1,"tab-title"]}]]],["p-69427d22",[[257,"biggive-tabbed-content",{"spaceBelow":[2,"space-below"],"textColour":[1,"text-colour"],"selectedTextColour":[1,"selected-text-colour"],"navigationHighlightColour":[1,"navigation-highlight-colour"],"selectedNavigationHighlightColour":[1,"selected-navigation-highlight-colour"],"buttonBackgroundColour":[1,"button-background-colour"],"buttonIconColour":[1,"button-icon-colour"]}]]],["p-52d0561b",[[257,"biggive-table",{"spaceBelow":[2,"space-below"],"headerTextColour":[1,"header-text-colour"],"headerBackgroundColour":[1,"header-background-colour"],"bodyTextColour":[1,"body-text-colour"],"bodyBackgroundColour":[1,"body-background-colour"]}]]],["p-5bc3fd16",[[257,"biggive-text-input",{"currency":[1],"spaceBelow":[2,"space-below"],"selectStyle":[1,"select-style"],"siteDesign":[1,"site-design"]}]]],["p-fcb0a029",[[257,"biggive-timeline",{"spaceBelow":[2,"space-below"],"textColour":[1,"text-colour"],"selectedTextColour":[1,"selected-text-colour"],"navigationHighlightColour":[1,"navigation-highlight-colour"],"selectedNavigationHighlightColour":[1,"selected-navigation-highlight-colour"],"buttonBackgroundColour":[1,"button-background-colour"],"buttonIconColour":[1,"button-icon-colour"],"entryBackgroundColour":[1,"entry-background-colour"],"entryHighlightColour":[1,"entry-highlight-colour"],"entryDateColour":[1,"entry-date-colour"],"entryTitleColour":[1,"entry-title-colour"],"entryTextColour":[1,"entry-text-colour"]}]]],["p-881b7f5a",[[257,"biggive-timeline-entry",{"date":[1],"heading":[1]}]]],["p-ba1e89b7",[[257,"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"]}]]],["p-0ec3857b",[[257,"biggive-totalizer-ticker-item",{"figure":[1],"label":[1]}]]],["p-18dc7efa",[[257,"biggive-video",{"spaceAbove":[2,"space-above"],"spaceBelow":[2,"space-below"],"videoUrl":[1,"video-url"]}]]],["p-f8fc5ed8",[[257,"philco-footer",{"headingLevel":[2,"heading-level"],"philcoUrlPrefix":[1,"philco-url-prefix"]}]]],["p-8218058a",[[257,"biggive-form-field-select",{"selectionChanged":[16,"selection-changed"],"prompt":[1],"selectedValue":[1025,"selected-value"],"selectedLabel":[1025,"selected-label"],"options":[1],"selectStyle":[1,"select-style"],"backgroundColour":[1,"background-colour"],"selectedOptionColour":[1,"selected-option-colour"],"selectElementId":[1,"select-element-id"],"spaceBelow":[2,"space-below"],"placeholder":[1]}]]],["p-01e3e032",[[257,"biggive-popup",{"modalClosedCallback":[16,"modal-closed-callback"],"openFromOutside":[64],"closeFromOutside":[64]}]]],["p-dec8ce1a",[[257,"biggive-progress-bar",{"spaceBelow":[2,"space-below"],"colourScheme":[1,"colour-scheme"],"counter":[2]}]]],["p-20458ccf",[[257,"biggive-social-icon",{"service":[1],"labelPrefix":[1,"label-prefix"],"backgroundColour":[1,"background-colour"],"iconColour":[1,"icon-colour"],"wide":[4],"url":[1]}]]],["p-8aa5cd67",[[257,"biggive-misc-icon",{"backgroundColour":[1,"background-colour"],"iconColour":[1,"icon-colour"],"icon":[1],"url":[1]}]]],["p-f33df851",[[257,"biggive-button",{"spaceBelow":[2,"space-below"],"colourScheme":[1,"colour-scheme"],"label":[1],"url":[1],"openInNewTab":[4,"open-in-new-tab"],"fullWidth":[4,"full-width"],"size":[1],"rounded":[4],"centered":[4],"buttonId":[1,"button-id"],"siteDesign":[1,"site-design"],"disabled":[4]}]]]]'),e)}));
1
+ import{p as e,H as o,b as t}from"./p-Bw8i6zSc.js";export{s as setNonce}from"./p-Bw8i6zSc.js";import{g as l}from"./p-DQuL1Twl.js";var r=()=>{{a(o.prototype)}const t=import.meta.url;const l={};if(t!==""){l.resourcesUrl=new URL(".",t).href}return e(l)};var a=e=>{const o=e.cloneNode;e.cloneNode=function(e){if(this.nodeName==="TEMPLATE"){return o.call(this,e)}const t=o.call(this,false);const l=this.childNodes;if(e){for(let e=0;e<l.length;e++){if(l[e].nodeType!==2){t.appendChild(l[e].cloneNode(true))}}}return t}};r().then((async e=>{await l();return t(JSON.parse('[["p-cee6717b",[[257,"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"],"isFutureCampaign":[4,"is-future-campaign"],"isPastCampaign":[4,"is-past-campaign"],"datetime":[1]}]]],["p-a3144d26",[[257,"biggive-campaign-card-filter-grid",{"spaceBelow":[2,"space-below"],"intro":[1],"searchText":[1,"search-text"],"placeholderText":[1,"placeholder-text"],"buttonText":[1,"button-text"],"categoryOptions":[1,"category-options"],"beneficiaryOptions":[1,"beneficiary-options"],"locationOptions":[1,"location-options"],"selectedSortByOption":[1025,"selected-sort-by-option"],"selectedFilterCategory":[1025,"selected-filter-category"],"selectedFilterBeneficiary":[1025,"selected-filter-beneficiary"],"selectedFilterLocation":[1025,"selected-filter-location"],"filtersApplied":[32],"unfocusInputs":[64]}]]],["p-801b1332",[[257,"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"]}]]],["p-da5d01aa",[[257,"biggive-cookie-banner",{"autoOpenPreferences":[4,"auto-open-preferences"],"blogUriPrefix":[1,"blog-uri-prefix"],"previouslyAgreedCookiePreferences":[16,"previously-agreed-cookie-preferences"]},null,{"autoOpenPreferences":["autoOpenPreferencesIfRequested"]}]]],["p-8dec4d4c",[[257,"biggive-footer",{"headingLevel":[2,"heading-level"],"donateUrlPrefix":[1,"donate-url-prefix"],"blogUrlPrefix":[1,"blog-url-prefix"],"experienceUrlPrefix":[1,"experience-url-prefix"],"smallCharityWeekEnabled":[4,"small-charity-week-enabled"],"usePresetFooter":[4,"use-preset-footer"]}]]],["p-feb1ca0a",[[257,"biggive-main-menu",{"blogUrlPrefix":[1,"blog-url-prefix"],"donateUrlPrefix":[1,"donate-url-prefix"],"experienceUrlPrefix":[1,"experience-url-prefix"],"smallCharityWeekEnabled":[4,"small-charity-week-enabled"],"someCampaignHasHomePageRedirect":[4,"some-campaign-has-home-page-redirect"],"isLoggedIn":[4,"is-logged-in"],"closeMobileMenuFromOutside":[64]}]]],["p-232244c2",[[257,"philco-main-menu",{"philcoUrlPrefix":[1,"philco-url-prefix"],"closeMobileMenuFromOutside":[64]}]]],["p-f9fb0feb",[[257,"biggive-article-card",{"spaceBelow":[2,"space-below"],"backgroundColour":[1,"background-colour"],"backgroundImageUrl":[1,"background-image-url"],"slug":[1],"slugColour":[1,"slug-colour"],"date":[1],"dateColour":[1,"date-colour"],"mainTitle":[1,"main-title"],"mainTitleColour":[1,"main-title-colour"],"mainImageUrl":[1,"main-image-url"],"mainImageAltText":[1,"main-image-alt-text"],"image1Url":[1,"image-1-url"],"image1AltText":[1,"image-1-alt-text"],"image2Url":[1,"image-2-url"],"image2AltText":[1,"image-2-alt-text"],"imageLabel":[1,"image-label"],"imageLabelColour":[1,"image-label-colour"],"buttonLabel":[1,"button-label"],"buttonUrl":[1,"button-url"],"buttonColour":[1,"button-colour"],"clipBottomLeftCorner":[4,"clip-bottom-left-corner"],"clipTopRightCorner":[4,"clip-top-right-corner"]}]]],["p-0ba9c6b9",[[257,"biggive-basic-card",{"spaceBelow":[2,"space-below"],"siteDesign":[1,"site-design"],"backgroundColour":[1,"background-colour"],"backgroundImageUrl":[1,"background-image-url"],"cardColour":[1,"card-colour"],"textColour":[1,"text-colour"],"mainImageUrl":[1,"main-image-url"],"mainImageAltText":[1,"main-image-alt-text"],"mainTitle":[1,"main-title"],"subtitle":[1],"author":[1],"date":[1],"teaser":[1],"icon":[4],"iconColour":[1,"icon-colour"],"buttonAlign":[1,"button-align"],"buttonStyle":[1,"button-style"],"buttonLabel":[1,"button-label"],"buttonUrl":[1,"button-url"],"buttonColourScheme":[1,"button-colour-scheme"],"clipBottomLeftCorner":[4,"clip-bottom-left-corner"],"clipTopRightCorner":[4,"clip-top-right-corner"],"headingLevel":[2,"heading-level"],"addAnimation":[4,"add-animation"]}]]],["p-a2edb531",[[257,"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"]}]]],["p-095433cc",[[257,"biggive-hero-image",{"spaceBelow":[2,"space-below"],"colourScheme":[1,"colour-scheme"],"slug":[1],"slugColour":[1,"slug-colour"],"logo":[1],"logoHeight":[2,"logo-height"],"logoAltText":[1,"logo-alt-text"],"mainImage":[1,"main-image"],"mainImageShape":[1,"main-image-shape"],"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"]}]]],["p-438cd97b",[[257,"biggive-icon-button",{"spaceBelow":[2,"space-below"],"backgroundColour":[1,"background-colour"],"backgroundPadding":[2,"background-padding"],"text":[1],"textColour":[1,"text-colour"],"icon":[1],"url":[1],"openInNewTab":[4,"open-in-new-tab"],"size":[1],"arrow":[4],"arrowColour":[1,"arrow-colour"],"circle":[4],"shadow":[4],"centered":[4],"rounded":[4],"buttonId":[1,"button-id"]}]]],["p-b16d779d",[[257,"biggive-image-card",{"spaceBelow":[2,"space-below"],"backgroundColour":[1,"background-colour"],"mainImageUrl":[1,"main-image-url"],"mainImageAltText":[1,"main-image-alt-text"],"textAlign":[1,"text-align"],"teaser":[1],"teaserColour":[1,"teaser-colour"],"buttonAlign":[1,"button-align"],"buttonStyle":[1,"button-style"],"buttonLabel":[1,"button-label"],"buttonUrl":[1,"button-url"],"buttonColourScheme":[1,"button-colour-scheme"],"clipBottomLeftCorner":[4,"clip-bottom-left-corner"],"clipTopRightCorner":[4,"clip-top-right-corner"],"addAnimation":[4,"add-animation"]}]]],["p-cdbc0658",[[257,"biggive-image-feature",{"spaceBelow":[2,"space-below"],"defaultTextColour":[1,"default-text-colour"],"imageUrl":[1,"image-url"],"imageAltText":[1,"image-alt-text"],"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"]}]]],["p-3fe03531",[[257,"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"]}]]],["p-17ead927",[[257,"biggive-accordion",{"spaceBelow":[2,"space-below"],"textColour":[1,"text-colour"],"headingColour":[1,"heading-colour"],"children":[32]}]]],["p-b8e3a0c3",[[257,"biggive-accordion-entry",{"heading":[1]}]]],["p-ba97e1a7",[[257,"biggive-back-to-top"]]],["p-f18c6044",[[257,"biggive-biography-card",{"spaceBelow":[2,"space-below"],"borderWidth":[2,"border-width"],"imageUrl":[1,"image-url"],"imageStyle":[1,"image-style"],"textColour":[1,"text-colour"],"backgroundColour":[1,"background-colour"],"fullName":[1,"full-name"],"jobTitle":[1,"job-title"],"textAlign":[1,"text-align"],"ratio":[1],"circle":[4],"circleColour":[1,"circle-colour"],"rounded":[4],"url":[1]}]]],["p-9a616be5",[[257,"biggive-boxed-content",{"spaceBelow":[2,"space-below"],"verticalPadding":[2,"vertical-padding"],"horizontalPadding":[2,"horizontal-padding"],"backgroundColour":[1,"background-colour"],"shadow":[4]}]]],["p-671a00c2",[[257,"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"]}]]],["p-7ea10d17",[[257,"biggive-container-card",{"spaceBelow":[2,"space-below"],"backgroundColour":[1,"background-colour"],"backgroundImageUrl":[1,"background-image-url"],"cardColour":[1,"card-colour"],"textColour":[1,"text-colour"],"clipBottomLeftCorner":[4,"clip-bottom-left-corner"],"clipTopRightCorner":[4,"clip-top-right-corner"],"headingLevel":[2,"heading-level"]}]]],["p-4a7c3666",[[257,"biggive-form"]]],["p-049a9e00",[[257,"biggive-formatted-text",{"spaceBelow":[2,"space-below"],"defaultTextColour":[1,"default-text-colour"],"maxWidth":[2,"max-width"],"siteDesign":[1,"site-design"]}]]],["p-4db2a4f5",[[257,"biggive-grid",{"spaceBelow":[2,"space-below"],"columnCount":[2,"column-count"],"spaceBetween":[4,"space-between"],"columnGap":[2,"column-gap"]}]]],["p-8ead1510",[[257,"biggive-heading",{"spaceAbove":[2,"space-above"],"spaceBelow":[2,"space-below"],"colour":[1],"htmlElement":[1,"html-element"],"size":[2],"align":[1],"text":[1],"icon":[4],"iconColour":[1,"icon-colour"],"siteDesign":[1,"site-design"]}]]],["p-8423b699",[[257,"biggive-heading-banner",{"logo":[1],"slug":[1],"mainTitle":[1,"main-title"],"mainImageUrl":[1,"main-image-url"],"focalPoint":[1,"focal-point"],"teaser":[1],"backgroundColour":[1,"background-colour"],"textBackgroundColour":[1,"text-background-colour"],"slugColour":[1,"slug-colour"],"mainTitleColour":[1,"main-title-colour"],"teaserColour":[1,"teaser-colour"],"height":[1]}]]],["p-55e2c83a",[[257,"biggive-image",{"spaceAbove":[2,"space-above"],"spaceBelow":[2,"space-below"],"imageUrl":[1,"image-url"],"imageAltText":[1,"image-alt-text"],"width":[2],"height":[2],"sizeUnit":[1,"size-unit"]}]]],["p-ec5fee3c",[[257,"biggive-image-button",{"spaceBelow":[2,"space-below"],"backgroundColour":[1,"background-colour"],"backgroundPadding":[2,"background-padding"],"text":[1],"textColour":[1,"text-colour"],"imageUrl":[1,"image-url"],"imageStyle":[1,"image-style"],"url":[1],"openInNewTab":[4,"open-in-new-tab"],"size":[1],"arrow":[4],"arrowColour":[1,"arrow-colour"],"circle":[4],"shadow":[4],"centered":[4],"rounded":[4],"buttonId":[1,"button-id"]}]]],["p-d70de323",[[257,"biggive-nav-group",{"inline":[4]}]]],["p-a7d8778c",[[257,"biggive-nav-item",{"url":[1],"label":[1],"iconColour":[1,"icon-colour"]}]]],["p-7830b031",[[257,"biggive-page-column"]]],["p-b75ac678",[[257,"biggive-page-columns",{"spaceBelow":[2,"space-below"]}]]],["p-98355c54",[[257,"biggive-page-section",{"spaceBelow":[2,"space-below"],"sectionStyleTop":[1,"section-style-top"],"sectionStyleBottom":[1,"section-style-bottom"],"colourScheme":[1,"colour-scheme"],"maxWidth":[2,"max-width"],"primaryFullBleed":[4,"primary-full-bleed"]}]]],["p-7b68bd95",[[257,"biggive-quote",{"spaceBelow":[2,"space-below"],"defaultTextColour":[1,"default-text-colour"],"quote":[1],"attribution":[1],"quoteIconColour":[1,"quote-icon-colour"],"siteDesign":[1,"site-design"]}]]],["p-2c82c668",[[257,"biggive-sheet",{"sheetId":[1,"sheet-id"],"backgroundColour":[1,"background-colour"],"textColour":[1,"text-colour"]}]]],["p-e8bb3dc0",[[257,"biggive-tab",{"tabTitle":[1,"tab-title"]}]]],["p-69427d22",[[257,"biggive-tabbed-content",{"spaceBelow":[2,"space-below"],"textColour":[1,"text-colour"],"selectedTextColour":[1,"selected-text-colour"],"navigationHighlightColour":[1,"navigation-highlight-colour"],"selectedNavigationHighlightColour":[1,"selected-navigation-highlight-colour"],"buttonBackgroundColour":[1,"button-background-colour"],"buttonIconColour":[1,"button-icon-colour"]}]]],["p-52d0561b",[[257,"biggive-table",{"spaceBelow":[2,"space-below"],"headerTextColour":[1,"header-text-colour"],"headerBackgroundColour":[1,"header-background-colour"],"bodyTextColour":[1,"body-text-colour"],"bodyBackgroundColour":[1,"body-background-colour"]}]]],["p-5bc3fd16",[[257,"biggive-text-input",{"currency":[1],"spaceBelow":[2,"space-below"],"selectStyle":[1,"select-style"],"siteDesign":[1,"site-design"]}]]],["p-fcb0a029",[[257,"biggive-timeline",{"spaceBelow":[2,"space-below"],"textColour":[1,"text-colour"],"selectedTextColour":[1,"selected-text-colour"],"navigationHighlightColour":[1,"navigation-highlight-colour"],"selectedNavigationHighlightColour":[1,"selected-navigation-highlight-colour"],"buttonBackgroundColour":[1,"button-background-colour"],"buttonIconColour":[1,"button-icon-colour"],"entryBackgroundColour":[1,"entry-background-colour"],"entryHighlightColour":[1,"entry-highlight-colour"],"entryDateColour":[1,"entry-date-colour"],"entryTitleColour":[1,"entry-title-colour"],"entryTextColour":[1,"entry-text-colour"]}]]],["p-881b7f5a",[[257,"biggive-timeline-entry",{"date":[1],"heading":[1]}]]],["p-ba1e89b7",[[257,"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"]}]]],["p-0ec3857b",[[257,"biggive-totalizer-ticker-item",{"figure":[1],"label":[1]}]]],["p-18dc7efa",[[257,"biggive-video",{"spaceAbove":[2,"space-above"],"spaceBelow":[2,"space-below"],"videoUrl":[1,"video-url"]}]]],["p-f8fc5ed8",[[257,"philco-footer",{"headingLevel":[2,"heading-level"],"philcoUrlPrefix":[1,"philco-url-prefix"]}]]],["p-8218058a",[[257,"biggive-form-field-select",{"selectionChanged":[16,"selection-changed"],"prompt":[1],"selectedValue":[1025,"selected-value"],"selectedLabel":[1025,"selected-label"],"options":[1],"selectStyle":[1,"select-style"],"backgroundColour":[1,"background-colour"],"selectedOptionColour":[1,"selected-option-colour"],"selectElementId":[1,"select-element-id"],"spaceBelow":[2,"space-below"],"placeholder":[1]}]]],["p-01e3e032",[[257,"biggive-popup",{"modalClosedCallback":[16,"modal-closed-callback"],"openFromOutside":[64],"closeFromOutside":[64]}]]],["p-dec8ce1a",[[257,"biggive-progress-bar",{"spaceBelow":[2,"space-below"],"colourScheme":[1,"colour-scheme"],"counter":[2]}]]],["p-20458ccf",[[257,"biggive-social-icon",{"service":[1],"labelPrefix":[1,"label-prefix"],"backgroundColour":[1,"background-colour"],"iconColour":[1,"icon-colour"],"wide":[4],"url":[1]}]]],["p-8aa5cd67",[[257,"biggive-misc-icon",{"backgroundColour":[1,"background-colour"],"iconColour":[1,"icon-colour"],"icon":[1],"url":[1]}]]],["p-f33df851",[[257,"biggive-button",{"spaceBelow":[2,"space-below"],"colourScheme":[1,"colour-scheme"],"label":[1],"url":[1],"openInNewTab":[4,"open-in-new-tab"],"fullWidth":[4,"full-width"],"size":[1],"rounded":[4],"centered":[4],"buttonId":[1,"button-id"],"siteDesign":[1,"site-design"],"disabled":[4]}]]]]'),e)}));
2
2
  //# sourceMappingURL=biggive.esm.js.map
package/dist/biggive/{p-453eeb33.entry.js → p-8423b699.entry.js} RENAMED
@@ -1,2 +1,2 @@
1
- import{r as o,h as e}from"./p-Bw8i6zSc.js";const t='a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}:host{display:contents;font-family:"Euclid Triangle", sans-serif;font-size:17px;line-height:24px}.space-above-0{margin-top:0}.space-above-1{margin-top:5px}.space-above-2{margin-top:10px}.space-above-3{margin-top:15px}.space-above-4{margin-top:30px}.space-above-5{margin-top:45px}.space-above-6{margin-top:60px}.space-below-0{margin-bottom:0}.space-below-1{margin-bottom:5px}.space-below-2{margin-bottom:10px}.space-below-3{margin-bottom:15px}.space-below-4{margin-bottom:30px}.space-below-5{margin-bottom:45px}.space-below-6{margin-bottom:60px}.text-colour-hover-primary:hover,.text-colour-primary{color:#2C089B}.text-colour-hover-secondary:hover,.text-colour-secondary{color:#2AF135}.text-colour-hover-tertiary:hover,.text-colour-tertiary{color:#FF7272}.text-colour-hover-brand-cc-red:hover,.text-colour-brand-cc-red{color:#B30510}.text-colour-hover-brand-wgmf-purple:hover,.text-colour-brand-wgmf-purple{color:#6E0887}.text-colour-hover-brand-gmf-green:hover,.text-colour-brand-gmf-green{color:#50B400}.text-colour-hover-brand-er-green:hover,.text-colour-brand-er-green{color:#50B400}.text-colour-hover-brand-er-dark-green:hover,.text-colour-brand-er-dark-green{color:#002413}.text-colour-hover-brand-er-dark-blue:hover,.text-colour-brand-er-dark-blue{color:#0c0068}.text-colour-hover-brand-er-teal:hover,.text-colour-brand-er-teal{color:#00a76d}.text-colour-hover-brand-emf-yellow:hover,.text-colour-brand-emf-yellow{color:#FFE500}.text-colour-hover-brand-c4c-orange:hover,.text-colour-brand-c4c-orange{color:#F07D00}.text-colour-hover-brand-afa-pink:hover,.text-colour-brand-afa-pink{color:#BF387D}.text-colour-hover-brand-scw-magenta:hover,.text-colour-brand-scw-magenta{color:#EE2C65}.text-colour-hover-brand-mhf-turquoise:hover,.text-colour-brand-mhf-turquoise{color:#62CFC9}.text-colour-hover-brand-grey:hover,.text-colour-brand-grey{color:#CBC8C8}.text-colour-hover-white:hover,.text-colour-white{color:#FFFFFF}.text-colour-hover-black:hover,.text-colour-black{color:#000000}.text-colour-hover-grey-extra-light:hover,.text-colour-grey-extra-light{color:#D7D7D7}.text-colour-hover-grey-light:hover,.text-colour-grey-light{color:#E8E8E8}.text-colour-hover-grey-medium:hover,.text-colour-grey-medium{color:#8A8A8A}.text-colour-hover-grey-dark:hover,.text-colour-grey-dark{color:#4A4A4A}.text-colour-hover-philco-orange:hover,.text-colour-philco-orange{color:#f18a00}.text-colour-hover-philco-gray-90:hover,.text-colour-philco-gray-90{color:#1d1d1B}.text-colour-hover-philco-gray-70:hover,.text-colour-philco-gray-70{color:#7D7D7D}.text-colour-hover-philco-white:hover,.text-colour-philco-white{color:#FFFFFF}.text-colour-hover-philco-success-green:hover,.text-colour-philco-success-green{color:#1Ec691}.text-colour-hover-philco-error-coral:hover,.text-colour-philco-error-coral{color:#F54242}.text-colour-hover-philco-gray-30:hover,.text-colour-philco-gray-30{color:#BBBBBB}.text-colour-hover-philco-gray-20:hover,.text-colour-philco-gray-20{color:#F6F6F6}.banner{font-size:17px;background-size:cover;height:600px;position:relative;overflow:hidden}.banner.short{height:400px}.banner img.background{object-fit:cover;position:absolute;max-width:2000px;width:100%;height:400px;left:50%;transform:translateX(-50%);bottom:0;display:none}@media (min-width: 450px){.banner img.background{display:block;bottom:initial;height:100%}}.sleeve{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;max-width:1200px;margin-left:auto;margin-right:auto;padding:0;box-sizing:border-box;height:100%}@media (min-width: 576px){.sleeve{flex-direction:column}}@media (min-width: 606px){.sleeve{padding-left:20px;align-items:start;height:600px}}@media (min-width: 480px){.short .sleeve{height:400px}}.content-wrap{position:relative;padding-top:70px;padding-right:30px;padding-left:30px;padding-bottom:30px;box-sizing:border-box;width:100%;max-width:450px}@media (min-width: 450px){.content-wrap{margin-bottom:auto;margin-top:auto;padding-top:40px}}@media (min-width: 480px){.content-wrap{padding-top:30px;margin-left:0}}img.stacked{width:100%;height:100%;object-fit:cover}@media (min-width: 450px){img.stacked{display:none}}h1.main-title{font-size:47px;line-height:60px;font-weight:bold;margin:0 0 15px;padding:0}.slug{font-size:20px;line-height:inherit;font-weight:bold;margin-bottom:-7px}.teaser{margin:0;padding:0}.logo{height:100px;background-size:contain;background-repeat:no-repeat;background-position:left center;margin-bottom:10px}.logo img{width:auto;height:100%;position:relative}';const r=class{constructor(e){o(this,e);this.slug="";this.height="tall"}lineBreakToBr(o){if(o==undefined){return[]}return o.split(/\r?\n|\r|\n/g).map((o=>[o,e("br",null)])).flat().slice(0,-1)}getParsedFocalPoint(){if(typeof this.focalPoint==="string"){return JSON.parse(this.focalPoint)}return this.focalPoint}getParsedLogo(){if(this.logo===undefined)return undefined;if(typeof this.logo==="string"){return JSON.parse(this.logo)}return this.logo}render(){const o=this.lineBreakToBr(this.teaser);const t=this.backgroundColour.startsWith("#")?this.backgroundColour:`#${this.backgroundColour}`;const r=this.textBackgroundColour.startsWith("#")?this.textBackgroundColour:`#${this.textBackgroundColour}`;const i=this.slugColour.startsWith("#")?this.slugColour:`#${this.slugColour}`;const a=this.mainTitleColour.startsWith("#")?this.mainTitleColour:`#${this.mainTitleColour}`;const l=this.teaserColour.startsWith("#")?this.teaserColour:`#${this.teaserColour}`;const c=this.getParsedLogo();return e("div",{key:"a8bfd958a45d8fbabd8d43a5ab6e5f8c40bbe8fd",class:{banner:true,short:this.height==="short"},style:{"background-color":t}},typeof this.mainImageUrl==="string"&&this.mainImageUrl!==""?e("img",{class:"background",src:this.mainImageUrl,alt:"",style:{"object-position":`${this.getParsedFocalPoint().x}% ${this.getParsedFocalPoint().y}%`}}):null,e("div",{key:"d0153d2ea04f43ba9f7000c2f1eb7babf975112d",class:"sleeve"},e("div",{key:"f27f6341cfa30c420b5b57c386fcac6b75c6f508",class:"content-wrap",style:{"background-color":r}},c?e("div",{class:"logo"},e("img",{src:c.url,alt:c.alt||""})):null,this.slug!=undefined?e("div",{style:{color:i},class:"slug"},this.slug):null,e("h1",{key:"dcd1da69b69456127e81ef93973fe51d5831227f",style:{color:a},class:"main-title"},this.mainTitle),this.teaser!=undefined?e("div",{class:"teaser",style:{color:l}},o):null),typeof this.mainImageUrl==="string"&&this.mainImageUrl!==""?e("img",{class:"stacked",src:this.mainImageUrl,alt:"",style:{"object-position":`${this.getParsedFocalPoint().x}% ${this.getParsedFocalPoint().y}%`}}):null))}};r.style=t;export{r as biggive_heading_banner};
2
- //# sourceMappingURL=p-453eeb33.entry.js.map
1
+ import{r as o,h as e}from"./p-Bw8i6zSc.js";const t='a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}:host{display:contents;font-family:"Euclid Triangle", sans-serif;font-size:17px;line-height:24px}.space-above-0{margin-top:0}.space-above-1{margin-top:5px}.space-above-2{margin-top:10px}.space-above-3{margin-top:15px}.space-above-4{margin-top:30px}.space-above-5{margin-top:45px}.space-above-6{margin-top:60px}.space-below-0{margin-bottom:0}.space-below-1{margin-bottom:5px}.space-below-2{margin-bottom:10px}.space-below-3{margin-bottom:15px}.space-below-4{margin-bottom:30px}.space-below-5{margin-bottom:45px}.space-below-6{margin-bottom:60px}.text-colour-hover-primary:hover,.text-colour-primary{color:#2C089B}.text-colour-hover-secondary:hover,.text-colour-secondary{color:#2AF135}.text-colour-hover-tertiary:hover,.text-colour-tertiary{color:#FF7272}.text-colour-hover-brand-cc-red:hover,.text-colour-brand-cc-red{color:#B30510}.text-colour-hover-brand-wgmf-purple:hover,.text-colour-brand-wgmf-purple{color:#6E0887}.text-colour-hover-brand-gmf-green:hover,.text-colour-brand-gmf-green{color:#50B400}.text-colour-hover-brand-er-green:hover,.text-colour-brand-er-green{color:#50B400}.text-colour-hover-brand-er-dark-green:hover,.text-colour-brand-er-dark-green{color:#002413}.text-colour-hover-brand-er-dark-blue:hover,.text-colour-brand-er-dark-blue{color:#0c0068}.text-colour-hover-brand-er-teal:hover,.text-colour-brand-er-teal{color:#00a76d}.text-colour-hover-brand-emf-yellow:hover,.text-colour-brand-emf-yellow{color:#FFE500}.text-colour-hover-brand-c4c-orange:hover,.text-colour-brand-c4c-orange{color:#F07D00}.text-colour-hover-brand-afa-pink:hover,.text-colour-brand-afa-pink{color:#BF387D}.text-colour-hover-brand-scw-magenta:hover,.text-colour-brand-scw-magenta{color:#EE2C65}.text-colour-hover-brand-mhf-turquoise:hover,.text-colour-brand-mhf-turquoise{color:#62CFC9}.text-colour-hover-brand-grey:hover,.text-colour-brand-grey{color:#CBC8C8}.text-colour-hover-white:hover,.text-colour-white{color:#FFFFFF}.text-colour-hover-black:hover,.text-colour-black{color:#000000}.text-colour-hover-grey-extra-light:hover,.text-colour-grey-extra-light{color:#D7D7D7}.text-colour-hover-grey-light:hover,.text-colour-grey-light{color:#E8E8E8}.text-colour-hover-grey-medium:hover,.text-colour-grey-medium{color:#8A8A8A}.text-colour-hover-grey-dark:hover,.text-colour-grey-dark{color:#4A4A4A}.text-colour-hover-philco-orange:hover,.text-colour-philco-orange{color:#f18a00}.text-colour-hover-philco-gray-90:hover,.text-colour-philco-gray-90{color:#1d1d1B}.text-colour-hover-philco-gray-70:hover,.text-colour-philco-gray-70{color:#7D7D7D}.text-colour-hover-philco-white:hover,.text-colour-philco-white{color:#FFFFFF}.text-colour-hover-philco-success-green:hover,.text-colour-philco-success-green{color:#1Ec691}.text-colour-hover-philco-error-coral:hover,.text-colour-philco-error-coral{color:#F54242}.text-colour-hover-philco-gray-30:hover,.text-colour-philco-gray-30{color:#BBBBBB}.text-colour-hover-philco-gray-20:hover,.text-colour-philco-gray-20{color:#F6F6F6}.banner{font-size:17px;background-size:cover;height:600px;position:relative;overflow:hidden}.banner.short{height:400px}.banner img.background{object-fit:cover;position:absolute;max-width:2000px;width:100%;height:400px;left:50%;transform:translateX(-50%);bottom:0;display:none}@media (min-width: 450px){.banner img.background{display:block;bottom:initial;height:100%}}.sleeve{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;max-width:1200px;margin-left:auto;margin-right:auto;padding:0;box-sizing:border-box;height:100%}@media (min-width: 576px){.sleeve{flex-direction:column}}@media (min-width: 606px){.sleeve{padding-left:20px;align-items:start;height:600px}}@media (min-width: 480px){.short .sleeve{height:400px}}.content-wrap{position:relative;padding-top:70px;padding-right:30px;padding-left:30px;padding-bottom:30px;box-sizing:border-box;width:100%;max-width:450px}@media (min-width: 450px){.content-wrap{margin-bottom:auto;margin-top:auto;padding-top:40px}}@media (min-width: 480px){.content-wrap{padding-top:30px;margin-left:0}}img.stacked{width:100%;height:100%;object-fit:cover}@media (min-width: 450px){img.stacked{display:none}}h1.main-title{font-size:47px;line-height:60px;font-weight:bold;margin:0 0 15px;padding:0}.slug{font-size:20px;line-height:inherit;font-weight:bold;margin-bottom:-7px}.teaser{margin:0;padding:0}.logo{height:100px;background-size:contain;background-repeat:no-repeat;background-position:left center;margin-bottom:10px}.logo img{width:auto;height:100%;position:relative}';const r=class{constructor(e){o(this,e);this.slug="";this.height="tall"}lineBreakToBr(o){if(o==undefined){return[]}return o.split(/\r?\n|\r|\n/g).map((o=>[o,e("br",null)])).flat().slice(0,-1)}getParsedFocalPoint(){if(typeof this.focalPoint==="string"){return JSON.parse(this.focalPoint)}return this.focalPoint}getParsedLogo(){if(this.logo===undefined)return undefined;if(typeof this.logo==="string"){return JSON.parse(this.logo)}return this.logo}render(){var o,t,r,i,l;const a=this.lineBreakToBr(this.teaser);const c=((o=this.backgroundColour)===null||o===void 0?void 0:o.startsWith("#"))?this.backgroundColour:`#${this.backgroundColour}`;const n=((t=this.textBackgroundColour)===null||t===void 0?void 0:t.startsWith("#"))?this.textBackgroundColour:`#${this.textBackgroundColour}`;const h=((r=this.slugColour)===null||r===void 0?void 0:r.startsWith("#"))?this.slugColour:`#${this.slugColour}`;const s=((i=this.mainTitleColour)===null||i===void 0?void 0:i.startsWith("#"))?this.mainTitleColour:`#${this.mainTitleColour}`;const d=((l=this.teaserColour)===null||l===void 0?void 0:l.startsWith("#"))?this.teaserColour:`#${this.teaserColour}`;const g=this.getParsedLogo();return e("div",{key:"f1d20a1ffc7d8f49c1f1068de66135de634fbfe7",class:{banner:true,short:this.height==="short"},style:{"background-color":c}},typeof this.mainImageUrl==="string"&&this.mainImageUrl!==""?e("img",{class:"background",src:this.mainImageUrl,alt:"",style:{"object-position":`${this.getParsedFocalPoint().x}% ${this.getParsedFocalPoint().y}%`}}):null,e("div",{key:"3b3a185c3336799f757bc34ca7ff7ab1126b49d7",class:"sleeve"},e("div",{key:"b621ed5069510f13a385c606c36806f6f26ecab3",class:"content-wrap",style:{"background-color":n}},g?e("div",{class:"logo"},e("img",{src:g.url,alt:g.alt||""})):null,this.slug!=undefined?e("div",{style:{color:h},class:"slug"},this.slug):null,e("h1",{key:"1a8ba9e55d7c038fc5a99d5e9014773de178254a",style:{color:s},class:"main-title"},this.mainTitle),this.teaser!=undefined?e("div",{class:"teaser",style:{color:d}},a):null),typeof this.mainImageUrl==="string"&&this.mainImageUrl!==""?e("img",{class:"stacked",src:this.mainImageUrl,alt:"",style:{"object-position":`${this.getParsedFocalPoint().x}% ${this.getParsedFocalPoint().y}%`}}):null))}};r.style=t;export{r as biggive_heading_banner};
2
+ //# sourceMappingURL=p-8423b699.entry.js.map
package/dist/biggive/p-8423b699.entry.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"names":["biggiveHeadingBannerCss","BiggiveHeadingBanner","constructor","hostRef","this","slug","height","lineBreakToBr","string","undefined","split","map","line","h","flat","slice","getParsedFocalPoint","focalPoint","JSON","parse","getParsedLogo","logo","render","teaserLines","teaser","bgColor","_a","backgroundColour","startsWith","textBgColor","_b","textBackgroundColour","slugColour","_c","mainTitleColour","_d","teaserColour","_e","key","class","banner","short","style","mainImageUrl","src","alt","x","y","url","color","mainTitle"],"sources":["src/components/biggive-heading-banner/biggive-heading-banner.scss?tag=biggive-heading-banner&encapsulation=shadow","src/components/biggive-heading-banner/biggive-heading-banner.tsx"],"sourcesContent":[":host {\n display: contents;\n @include standard-font();\n}\n\n@include spacers();\n@include text-colours();\n\n.banner {\n font-size: 17px;\n background-size: cover;\n height: 600px;\n position: relative;\n overflow: hidden;\n\n &.short {\n height: 400px;\n }\n\n img.background {\n object-fit: cover;\n position: absolute;\n max-width: 2000px;\n width: 100%;\n height: 400px;\n left: 50%;\n transform: translateX(-50%);\n bottom: 0;\n display: none;\n @media (min-width: 450px) {\n display: block;\n bottom: initial;\n height: 100%;\n }\n }\n}\n\n.sleeve {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n max-width: 1200px;\n margin-left: auto;\n margin-right: auto;\n padding: 0;\n box-sizing: border-box;\n height: 100%;\n\n @media (min-width: #{$screen-mobile-max}) {\n flex-direction: column;\n }\n\n @media (min-width: #{$screen-mobile-max + 30px}) {\n // adding 30px to standard breakpoint to match padding.\n padding-left: 20px;\n align-items: start;\n height: 600px;\n }\n}\n\n@media (min-width: #{$screen-mobile-small + 30px}) {\n .short .sleeve {\n height: 400px;\n }\n}\n\n.content-wrap {\n position: relative;\n padding-top: 70px; // includes 30 extra on mobile to make space for overlapping 'main-message-wrap'\n padding-right: 30px;\n padding-left: 30px;\n padding-bottom: 30px;\n box-sizing: border-box;\n width: 100%;\n max-width: 450px;\n\n @media (min-width: #{$screen-mobile-small}) {\n margin-bottom: auto;\n margin-top: auto;\n padding-top: 40px;\n }\n\n @media (min-width: #{$screen-mobile-small + 30px}) {\n padding-top: 30px;\n margin-left: 0;\n }\n}\n\nimg.stacked {\n width: 100%;\n height: 100%;\n object-fit: cover;\n\n @media (min-width: #{$screen-mobile-small}) {\n display: none;\n }\n}\n\nh1.main-title {\n font-size: 47px;\n line-height: 60px;\n font-weight: bold;\n margin: 0 0 15px;\n padding: 0;\n}\n\n.slug {\n font-size: 20px;\n line-height: inherit;\n font-weight: bold;\n margin-bottom: -7px;\n}\n\n.teaser {\n margin: 0;\n padding: 0;\n}\n\n.logo {\n height: 100px;\n background-size: contain;\n background-repeat: no-repeat;\n background-position: left center;\n margin-bottom: 10px;\n\n img {\n width: auto;\n height: 100%;\n position: relative;\n }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * Heading banner component for use as a page header.\n *\n * This component provides a banner with a background image, optional logo, and text content.\n * It supports different heights and customizable colors.\n */\n@Component({\n tag: 'biggive-heading-banner',\n styleUrl: 'biggive-heading-banner.scss',\n shadow: true,\n})\nexport class BiggiveHeadingBanner {\n /**\n * Optional logo object with URL and alt text\n */\n @Prop() logo?: { url: string; alt?: string } | string;\n\n /**\n * Optional slightly smaller text to appear above the main title\n */\n @Prop() slug?: string = '';\n\n /**\n * Main title text for the banner\n */\n @Prop() mainTitle!: string;\n\n /**\n * URL for the main banner image\n */\n @Prop() mainImageUrl!: string | null;\n\n /**\n * Focal point for the image positioning\n * x and y values are percentages (0-100)\n */\n @Prop() focalPoint!: string | { x: number; y: number };\n\n /**\n * Optional teaser text that appears below the main title\n */\n @Prop() teaser!: string;\n\n /**\n * Background color for the banner\n */\n @Prop() backgroundColour!: string;\n\n /**\n * Background color for the text content area\n */\n @Prop() textBackgroundColour!: string;\n\n @Prop() slugColour!: string;\n\n @Prop() mainTitleColour!: string;\n\n @Prop() teaserColour!: string;\n\n /**\n * Height variant of the banner\n * 'tall' for full height, 'short' for reduced height\n */\n @Prop() height: 'short' | 'tall' = 'tall';\n\n /**\n * Takes a string that may contain any form of newlines, and returns an array that alternates\n * between substrings found between the newlines and <br/> elements as objects.\n */\n private lineBreakToBr(string: string | undefined): unknown[] {\n if (string == undefined) {\n return [];\n }\n\n return string\n .split(/\\r?\\n|\\r|\\n/g)\n .map(line => [line, <br />])\n .flat()\n .slice(0, -1);\n }\n\n private getParsedFocalPoint(): { x: number; y: number } {\n if (typeof this.focalPoint === 'string') {\n return JSON.parse(this.focalPoint);\n }\n return this.focalPoint;\n }\n\n private getParsedLogo(): { url: string; alt?: string } | undefined {\n if (this.logo === undefined) return undefined;\n if (typeof this.logo === 'string') {\n return JSON.parse(this.logo);\n }\n return this.logo;\n }\n\n render() {\n // Convert teaser text with line breaks to JSX\n const teaserLines = this.lineBreakToBr(this.teaser);\n\n // Ensure color values have # prefix if they're hex colors without it\n // not sure how but it seems we're sometimes doing at least an intiial render before the colour props are populated,\n // so using null-safe navigation to avoid a crash here.\n const bgColor = this.backgroundColour?.startsWith('#') ? this.backgroundColour : `#${this.backgroundColour}`;\n const textBgColor = this.textBackgroundColour?.startsWith('#') ? this.textBackgroundColour : `#${this.textBackgroundColour}`;\n const slugColour = this.slugColour?.startsWith('#') ? this.slugColour : `#${this.slugColour}`;\n const mainTitleColour = this.mainTitleColour?.startsWith('#') ? this.mainTitleColour : `#${this.mainTitleColour}`;\n const teaserColour = this.teaserColour?.startsWith('#') ? this.teaserColour : `#${this.teaserColour}`;\n\n const logo = this.getParsedLogo();\n return (\n <div\n class={{\n banner: true,\n short: this.height === 'short',\n }}\n style={{\n 'background-color': bgColor,\n }}\n >\n {typeof this.mainImageUrl === 'string' && this.mainImageUrl !== '' ? (\n <img\n class=\"background\"\n src={this.mainImageUrl}\n alt=\"\"\n style={{\n 'object-position': `${this.getParsedFocalPoint().x}% ${this.getParsedFocalPoint().y}%`,\n }}\n />\n ) : null}\n <div class=\"sleeve\">\n <div\n class=\"content-wrap\"\n style={{\n 'background-color': textBgColor,\n }}\n >\n {logo ? (\n <div class=\"logo\">\n <img src={logo.url} alt={logo.alt || ''} />\n </div>\n ) : null}\n\n {this.slug != undefined ? (\n <div\n style={{\n color: slugColour,\n }}\n class=\"slug\"\n >\n {this.slug}\n </div>\n ) : null}\n\n <h1\n style={{\n color: mainTitleColour,\n }}\n class=\"main-title\"\n >\n {this.mainTitle}\n </h1>\n\n {this.teaser != undefined ? (\n <div\n class=\"teaser\"\n style={{\n color: teaserColour,\n }}\n >\n {teaserLines}\n </div>\n ) : null}\n </div>\n\n {typeof this.mainImageUrl === 'string' && this.mainImageUrl !== '' ? (\n <img\n class=\"stacked\"\n src={this.mainImageUrl}\n alt=\"\"\n style={{\n 'object-position': `${this.getParsedFocalPoint().x}% ${this.getParsedFocalPoint().y}%`,\n }}\n />\n ) : null}\n </div>\n </div>\n );\n }\n}\n"],"mappings":"2CAAA,MAAMA,EAA0B,89I,MCanBC,EAAoB,MALjC,WAAAC,CAAAC,G,UAcUC,KAAIC,KAAY,GA2ChBD,KAAME,OAAqB,MA8HpC,CAxHS,aAAAC,CAAcC,GACpB,GAAIA,GAAUC,UAAW,CACvB,MAAO,E,CAGT,OAAOD,EACJE,MAAM,gBACNC,KAAIC,GAAQ,CAACA,EAAMC,EAAM,cACzBC,OACAC,MAAM,GAAG,E,CAGN,mBAAAC,GACN,UAAWZ,KAAKa,aAAe,SAAU,CACvC,OAAOC,KAAKC,MAAMf,KAAKa,W,CAEzB,OAAOb,KAAKa,U,CAGN,aAAAG,GACN,GAAIhB,KAAKiB,OAASZ,UAAW,OAAOA,UACpC,UAAWL,KAAKiB,OAAS,SAAU,CACjC,OAAOH,KAAKC,MAAMf,KAAKiB,K,CAEzB,OAAOjB,KAAKiB,I,CAGd,MAAAC,G,cAEE,MAAMC,EAAcnB,KAAKG,cAAcH,KAAKoB,QAK5C,MAAMC,IAAUC,EAAAtB,KAAKuB,oBAAkB,MAAAD,SAAA,SAAAA,EAAAE,WAAW,MAAOxB,KAAKuB,iBAAmB,IAAIvB,KAAKuB,mBAC1F,MAAME,IAAcC,EAAA1B,KAAK2B,wBAAsB,MAAAD,SAAA,SAAAA,EAAAF,WAAW,MAAOxB,KAAK2B,qBAAuB,IAAI3B,KAAK2B,uBACtG,MAAMC,IAAaC,EAAA7B,KAAK4B,cAAY,MAAAC,SAAA,SAAAA,EAAAL,WAAW,MAAOxB,KAAK4B,WAAa,IAAI5B,KAAK4B,aACjF,MAAME,IAAkBC,EAAA/B,KAAK8B,mBAAiB,MAAAC,SAAA,SAAAA,EAAAP,WAAW,MAAOxB,KAAK8B,gBAAkB,IAAI9B,KAAK8B,kBAChG,MAAME,IAAeC,EAAAjC,KAAKgC,gBAAc,MAAAC,SAAA,SAAAA,EAAAT,WAAW,MAAOxB,KAAKgC,aAAe,IAAIhC,KAAKgC,eAEvF,MAAMf,EAAOjB,KAAKgB,gBAClB,OACEP,EACE,OAAAyB,IAAA,2CAAAC,MAAO,CACLC,OAAQ,KACRC,MAAOrC,KAAKE,SAAW,SAEzBoC,MAAO,CACL,mBAAoBjB,WAGdrB,KAAKuC,eAAiB,UAAYvC,KAAKuC,eAAiB,GAC9D9B,EACE,OAAA0B,MAAM,aACNK,IAAKxC,KAAKuC,aACVE,IAAI,GACJH,MAAO,CACL,kBAAmB,GAAGtC,KAAKY,sBAAsB8B,MAAM1C,KAAKY,sBAAsB+B,QAGpF,KACJlC,EAAK,OAAAyB,IAAA,2CAAAC,MAAM,UACT1B,EAAA,OAAAyB,IAAA,2CACEC,MAAM,eACNG,MAAO,CACL,mBAAoBb,IAGrBR,EACCR,EAAK,OAAA0B,MAAM,QACT1B,EAAA,OAAK+B,IAAKvB,EAAK2B,IAAKH,IAAKxB,EAAKwB,KAAO,MAErC,KAEHzC,KAAKC,MAAQI,UACZI,EACE,OAAA6B,MAAO,CACLO,MAAOjB,GAETO,MAAM,QAELnC,KAAKC,MAEN,KAEJQ,EAAA,MAAAyB,IAAA,2CACEI,MAAO,CACLO,MAAOf,GAETK,MAAM,cAELnC,KAAK8C,WAGP9C,KAAKoB,QAAUf,UACdI,EAAA,OACE0B,MAAM,SACNG,MAAO,CACLO,MAAOb,IAGRb,GAED,aAGEnB,KAAKuC,eAAiB,UAAYvC,KAAKuC,eAAiB,GAC9D9B,EACE,OAAA0B,MAAM,UACNK,IAAKxC,KAAKuC,aACVE,IAAI,GACJH,MAAO,CACL,kBAAmB,GAAGtC,KAAKY,sBAAsB8B,MAAM1C,KAAKY,sBAAsB+B,QAGpF,M","ignoreList":[]}
package/dist/biggive/{p-bc53052f.entry.js → p-cee6717b.entry.js} RENAMED
@@ -1,2 +1,2 @@
1
- import{r as e,c as t,h as a}from"./p-Bw8i6zSc.js";const i='a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.image-wrap img{width:100%;height:auto}.space-above-0{margin-top:0}.space-above-1{margin-top:5px}.space-above-2{margin-top:10px}.space-above-3{margin-top:15px}.space-above-4{margin-top:30px}.space-above-5{margin-top:45px}.space-above-6{margin-top:60px}.space-below-0{margin-bottom:0}.space-below-1{margin-bottom:5px}.space-below-2{margin-bottom:10px}.space-below-3{margin-bottom:15px}.space-below-4{margin-bottom:30px}.space-below-5{margin-bottom:45px}.space-below-6{margin-bottom:60px}:host{display:contents}.container{display:flex;flex-direction:column;font-family:"Euclid Triangle", sans-serif;font-size:17px;line-height:24px;margin-right:10px;margin-left:10px;cursor:pointer;position:relative;height:100%;background-color:#FFFFFF;padding:15px;box-sizing:border-box}.container .sleeve{display:flex;flex-direction:column;height:100%}.container .sleeve .above-button-wrap{flex-grow:1;display:flex;flex-direction:column}.container .sleeve .above-button-wrap .title-wrap{flex-grow:1}.container .campaign-type{position:absolute;top:0;left:0;right:0;text-align:center;font-weight:bold}.container .campaign-type span{background-color:#2AF135;color:#000000;padding:5px 15px;display:inline-block}.container .banner{top:0;margin-top:19px;padding-bottom:30.555%;background-color:#F1F1F1;background-size:contain;background-repeat:no-repeat}.container .banner img{display:none}.container h3{font-size:20px;line-height:24px;font-weight:bold}.container .button{display:block}.container .organisation-name{margin-bottom:30px;color:#2C089B}.container .meta-wrap{display:flex;justify-content:space-between;margin-top:auto;margin-bottom:15px}.container .meta-wrap .meta-item{width:calc(50% - 15px)}.container .meta-wrap .meta-item .label{font-size:11px;line-height:14px;display:block}.container .meta-wrap .meta-item .text{font-size:25px;line-height:32px;font-weight:bold;display:block}.container .meta-wrap .meta-item:last-child{text-align:right}.container .meta-wrap .meta-item:last-child .text{color:#2C089B}.container .progress-bar-wrap{padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid #E8E8E8}.container .msg-wrapper{display:flex;justify-content:center}.container .msg-wrapper biggive-misc-icon{margin-top:auto;margin-bottom:auto}.container .msg-wrapper p{text-align:center}@media screen and (max-width: 1200px){.container .msg-wrapper p{font-size:15px}}';const n=class{constructor(a){e(this,a);this.doCardGeneralClick=t(this,"doCardGeneralClick");this.spaceBelow=4;this.donateButtonLabel="Donate now";this.donateButtonColourScheme="primary";this.moreInfoButtonLabel="Find out more";this.moreInfoButtonColourScheme="clear-primary";this.isFutureCampaign=false;this.isPastCampaign=false;this.handleCardGeneralClick=e=>{this.doCardGeneralClick.emit({event:e,url:this.moreInfoButtonUrl})}}isEmpty(e){return e===undefined||e===null||e===""}render(){return a("div",{key:"319985f7b32754f323941126da3e14b50a14ebe3",class:"container space-below-"+this.spaceBelow.toString()},a("div",{key:"31b9adc9d26688a04babd7de6ec863df8e5fb984",class:"sleeve"},a("div",{key:"e3a9067edacce4985038bb4d92929c0bc5c8151e",onClick:this.handleCardGeneralClick,class:"above-button-wrap"},this.campaignType!==null?a("div",{class:"campaign-type"},a("span",null,this.campaignType)):null,this.banner!==null&&this.banner!==undefined?a("div",{class:"image-wrap banner",role:"presentation",style:{"background-image":"url("+this.banner+")"}}):a("div",{class:"image-wrap banner"}),a("div",{key:"dd4d04a159af990a2023a06912321fff42368727",class:"title-wrap"},a("h3",{key:"2ff55ab537792164659b1b435b330292a037840b"},this.campaignTitle),a("div",{key:"4a70987a57ae638317c30b21e9d5c422f7d5f779",class:"organisation-name"},"By ",this.organisationName)),this.isEmpty(this.primaryFigureAmount)&&this.isEmpty(this.secondaryFigureAmount)?null:a("div",{class:"meta-wrap"},this.isEmpty(this.primaryFigureAmount)?null:a("div",{class:"meta-item"},a("span",{class:"label"},this.primaryFigureLabel),a("span",{class:"text"},this.primaryFigureAmount)),this.isEmpty(this.secondaryFigureAmount)?null:a("div",{class:"meta-item"},a("span",{class:"label"},this.secondaryFigureLabel),a("span",{class:"text"},this.secondaryFigureAmount))),this.isEmpty(this.progressBarCounter)?null:a("div",{class:"progress-bar-wrap"},a("biggive-progress-bar",{counter:this.progressBarCounter,"colour-scheme":"primary"}))),a("div",{key:"ee6cd76f7d633aba92bc8af1d33c8298b5db643a",class:"button-wrap"},this.isFutureCampaign||this.isPastCampaign?a("div",{class:"msg-wrapper"},a("biggive-misc-icon",{"background-colour":"white","icon-colour":"black",icon:"Timer"}),this.isFutureCampaign?a("p",null,"Launches ",this.datetime):a("p",null,"Closed ",this.datetime)):a("biggive-button",{"full-width":"true","colour-scheme":this.donateButtonColourScheme,url:this.donateButtonUrl,label:this.donateButtonLabel}),a("biggive-button",{key:"394552333d901e22ad76ebdbd941976d52d6c21f","full-width":"true","colour-scheme":this.moreInfoButtonColourScheme,url:this.moreInfoButtonUrl,label:this.moreInfoButtonLabel}))))}};n.style=i;export{n as biggive_campaign_card};
2
- //# sourceMappingURL=p-bc53052f.entry.js.map
1
+ import{r as e,c as t,h as a}from"./p-Bw8i6zSc.js";const i='a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.image-wrap img{width:100%;height:auto}.space-above-0{margin-top:0}.space-above-1{margin-top:5px}.space-above-2{margin-top:10px}.space-above-3{margin-top:15px}.space-above-4{margin-top:30px}.space-above-5{margin-top:45px}.space-above-6{margin-top:60px}.space-below-0{margin-bottom:0}.space-below-1{margin-bottom:5px}.space-below-2{margin-bottom:10px}.space-below-3{margin-bottom:15px}.space-below-4{margin-bottom:30px}.space-below-5{margin-bottom:45px}.space-below-6{margin-bottom:60px}:host{display:contents}.container{display:flex;flex-direction:column;font-family:"Euclid Triangle", sans-serif;font-size:17px;line-height:24px;margin-right:10px;margin-left:10px;cursor:pointer;position:relative;height:100%;background-color:#FFFFFF;padding:15px;box-sizing:border-box}.container .sleeve{display:flex;flex-direction:column;height:100%}.container .sleeve .above-button-wrap{flex-grow:1;display:flex;flex-direction:column}.container .sleeve .above-button-wrap .title-wrap{flex-grow:1}.container .campaign-type{position:absolute;top:0;left:0;right:0;text-align:center;font-weight:bold}.container .campaign-type span{background-color:#2AF135;color:#000000;padding:5px 15px;display:inline-block}.container .banner{top:0;margin-top:19px;padding-bottom:30.555%;background-color:#F1F1F1;background-size:contain;background-repeat:no-repeat}.container .banner img{display:none}.container h3{font-size:20px;line-height:24px;font-weight:bold}.container .button{display:block}.container .organisation-name{margin-bottom:30px;color:#2C089B}.container .meta-wrap{display:flex;justify-content:space-between;margin-top:auto;margin-bottom:15px}.container .meta-wrap .meta-item{width:calc(50% - 15px)}.container .meta-wrap .meta-item .label{font-size:11px;line-height:14px;display:block}.container .meta-wrap .meta-item .text{font-size:25px;line-height:32px;font-weight:bold;display:block}.container .meta-wrap .meta-item:last-child{text-align:right}.container .meta-wrap .meta-item:last-child .text{color:#2C089B}.container .progress-bar-wrap{padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid #E8E8E8}.container .msg-wrapper{display:flex;justify-content:center}.container .msg-wrapper biggive-misc-icon{margin-top:auto;margin-bottom:auto}.container .msg-wrapper p{text-align:center}@media screen and (max-width: 1200px){.container .msg-wrapper p{font-size:15px}}';const o=class{constructor(a){e(this,a);this.doCardGeneralClick=t(this,"doCardGeneralClick");this.spaceBelow=4;this.donateButtonLabel="Donate now";this.donateButtonColourScheme="primary";this.moreInfoButtonLabel="Find out more";this.moreInfoButtonColourScheme="clear-primary";this.isFutureCampaign=false;this.isPastCampaign=false;this.handleCardGeneralClick=e=>{this.doCardGeneralClick.emit({event:e,url:this.moreInfoButtonUrl})}}isEmpty(e){return e===undefined||e===null||e===""}render(){return a("div",{key:"319985f7b32754f323941126da3e14b50a14ebe3",class:"container space-below-"+this.spaceBelow.toString()},a("div",{key:"31b9adc9d26688a04babd7de6ec863df8e5fb984",class:"sleeve"},a("div",{key:"e3a9067edacce4985038bb4d92929c0bc5c8151e",onClick:this.handleCardGeneralClick,class:"above-button-wrap"},this.campaignType!==null?a("div",{class:"campaign-type"},a("span",null,this.campaignType)):null,this.banner!==null&&this.banner!==undefined?a("div",{class:"image-wrap banner",role:"presentation",style:{"background-image":"url("+this.banner+")"}}):a("div",{class:"image-wrap banner"}),a("div",{key:"dd4d04a159af990a2023a06912321fff42368727",class:"title-wrap"},a("h3",{key:"2ff55ab537792164659b1b435b330292a037840b"},this.campaignTitle),a("div",{key:"4a70987a57ae638317c30b21e9d5c422f7d5f779",class:"organisation-name"},"By ",this.organisationName)),this.isEmpty(this.primaryFigureAmount)&&this.isEmpty(this.secondaryFigureAmount)?null:a("div",{class:"meta-wrap"},this.isEmpty(this.primaryFigureAmount)?null:a("div",{class:"meta-item"},a("span",{class:"label"},this.primaryFigureLabel),a("span",{class:"text"},this.primaryFigureAmount)),this.isEmpty(this.secondaryFigureAmount)?null:a("div",{class:"meta-item"},a("span",{class:"label"},this.secondaryFigureLabel),a("span",{class:"text"},this.secondaryFigureAmount))),this.isEmpty(this.progressBarCounter)?a("div",{class:"progress-bar-wrap",style:{visibility:"hidden"}},a("biggive-progress-bar",{counter:0,"colour-scheme":"primary"})):a("div",{class:"progress-bar-wrap"},a("biggive-progress-bar",{counter:this.progressBarCounter,"colour-scheme":"primary"}))),a("div",{key:"46f8ebfd1fc425610e6ef5fa87376659495890da",class:"button-wrap"},this.isFutureCampaign||this.isPastCampaign?a("div",{class:"msg-wrapper"},a("biggive-misc-icon",{"background-colour":"white","icon-colour":"black",icon:"Timer"}),this.isFutureCampaign?a("p",null,"Launches ",this.datetime):a("p",null,"Closed ",this.datetime)):a("biggive-button",{"full-width":"true","colour-scheme":this.donateButtonColourScheme,url:this.donateButtonUrl,label:this.donateButtonLabel}),a("biggive-button",{key:"13362b0cf844a93315672123f464c41482c9b65d","full-width":"true","colour-scheme":this.moreInfoButtonColourScheme,url:this.moreInfoButtonUrl,label:this.moreInfoButtonLabel}))))}};o.style=i;export{o as biggive_campaign_card};
2
+ //# sourceMappingURL=p-cee6717b.entry.js.map
package/dist/biggive/p-cee6717b.entry.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"names":["biggiveCampaignCardCss","BiggiveCampaignCard","constructor","hostRef","this","spaceBelow","donateButtonLabel","donateButtonColourScheme","moreInfoButtonLabel","moreInfoButtonColourScheme","isFutureCampaign","isPastCampaign","handleCardGeneralClick","event","doCardGeneralClick","emit","url","moreInfoButtonUrl","isEmpty","value","undefined","render","h","key","class","toString","onClick","campaignType","banner","role","style","campaignTitle","organisationName","primaryFigureAmount","secondaryFigureAmount","primaryFigureLabel","secondaryFigureLabel","progressBarCounter","visibility","counter","icon","datetime","donateButtonUrl","label"],"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 && this.banner !== undefined ? (\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) ? (\n // We don't have a progress bar to show in this case, so the following is just functioning as a spacer to\n // keep layout consistent. Counter must be non-null to make bar display.\n <div class=\"progress-bar-wrap\" style={{ visibility: 'hidden' }}>\n <biggive-progress-bar counter={0} colour-scheme=\"primary\"></biggive-progress-bar>\n </div>\n ) : (\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"],"mappings":"kDAAA,MAAMA,EAAyB,+3E,MCOlBC,EAAmB,MALhC,WAAAC,CAAAC,G,+DAiBUC,KAAUC,WAAW,EAiDrBD,KAAiBE,kBAAW,aAU5BF,KAAwBG,yBAAW,UAKnCH,KAAmBI,oBAAW,gBAU9BJ,KAA0BK,2BAAW,gBAKrCL,KAAgBM,iBAAY,MAK5BN,KAAcO,eAAY,MAc1BP,KAAAQ,uBAA0BC,IAChCT,KAAKU,mBAAmBC,KAAK,CAAEF,QAAOG,IAAKZ,KAAKa,mBAAoB,CAoEvE,CAzES,OAAAC,CAAQC,GACd,OAAOA,IAAUC,WAAaD,IAAU,MAAQA,IAAU,E,CAO5D,MAAAE,GACE,OACEC,EAAK,OAAAC,IAAA,2CAAAC,MAAO,yBAA2BpB,KAAKC,WAAWoB,YACrDH,EAAK,OAAAC,IAAA,2CAAAC,MAAM,UACTF,EAAK,OAAAC,IAAA,2CAAAG,QAAStB,KAAKQ,uBAAwBY,MAAM,qBAC9CpB,KAAKuB,eAAiB,KACrBL,EAAA,OAAKE,MAAM,iBACTF,EAAO,YAAAlB,KAAKuB,eAEZ,KAEHvB,KAAKwB,SAAW,MAAQxB,KAAKwB,SAAWR,UACvCE,EAAK,OAAAE,MAAM,oBAAoBK,KAAK,eAAeC,MAAO,CAAE,mBAAoB,OAAS1B,KAAKwB,OAAS,OAEvGN,EAAA,OAAKE,MAAM,sBAGbF,EAAK,OAAAC,IAAA,2CAAAC,MAAM,cACTF,EAAK,MAAAC,IAAA,4CAAAnB,KAAK2B,eACVT,EAAK,OAAAC,IAAA,2CAAAC,MAAM,qBAAmB,MAAKpB,KAAK4B,mBAGzC5B,KAAKc,QAAQd,KAAK6B,sBAAwB7B,KAAKc,QAAQd,KAAK8B,uBAAyB,KACpFZ,EAAA,OAAKE,MAAM,aACRpB,KAAKc,QAAQd,KAAK6B,qBAAuB,KACxCX,EAAK,OAAAE,MAAM,aACTF,EAAA,QAAME,MAAM,SAASpB,KAAK+B,oBAC1Bb,EAAM,QAAAE,MAAM,QAAQpB,KAAK6B,sBAG5B7B,KAAKc,QAAQd,KAAK8B,uBAAyB,KAC1CZ,EAAK,OAAAE,MAAM,aACTF,EAAA,QAAME,MAAM,SAASpB,KAAKgC,sBAC1Bd,EAAM,QAAAE,MAAM,QAAQpB,KAAK8B,yBAKhC9B,KAAKc,QAAQd,KAAKiC,oBAGjBf,EAAK,OAAAE,MAAM,oBAAoBM,MAAO,CAAEQ,WAAY,WAClDhB,EAAA,wBAAsBiB,QAAS,EAAC,gBAAgB,aAGlDjB,EAAK,OAAAE,MAAM,qBACTF,EAAsB,wBAAAiB,QAASnC,KAAKiC,mBAAkB,gBAAgB,cAI5Ef,EAAK,OAAAC,IAAA,2CAAAC,MAAM,eACRpB,KAAKM,kBAAoBN,KAAKO,eAC7BW,EAAK,OAAAE,MAAM,eACTF,EAAA,yCAAqC,QAAoB,sBAAQkB,KAAK,UACrEpC,KAAKM,iBAAmBY,EAAA,qBAAalB,KAAKqC,UAAgBnB,EAAA,mBAAWlB,KAAKqC,WAG7EnB,EAAA,+BAA2B,OAAM,gBAAgBlB,KAAKG,yBAA0BS,IAAKZ,KAAKsC,gBAAiBC,MAAOvC,KAAKE,oBAEzHgB,EAA2B,kBAAAC,IAAA,+DAAM,gBAAgBnB,KAAKK,2BAA4BO,IAAKZ,KAAKa,kBAAmB0B,MAAOvC,KAAKI,wB","ignoreList":[]}
package/dist/cjs/biggive-campaign-card.cjs.entry.js CHANGED
@@ -44,7 +44,10 @@ const BiggiveCampaignCard = class {
44
44
  return value === undefined || value === null || value === '';
45
45
  }
46
46
  render() {
47
- return (index.h("div", { key: '319985f7b32754f323941126da3e14b50a14ebe3', class: 'container space-below-' + this.spaceBelow.toString() }, index.h("div", { key: '31b9adc9d26688a04babd7de6ec863df8e5fb984', class: "sleeve" }, index.h("div", { key: 'e3a9067edacce4985038bb4d92929c0bc5c8151e', onClick: this.handleCardGeneralClick, class: "above-button-wrap" }, this.campaignType !== null ? (index.h("div", { class: "campaign-type" }, index.h("span", null, this.campaignType))) : null, this.banner !== null && this.banner !== undefined ? (index.h("div", { class: "image-wrap banner", role: "presentation", style: { 'background-image': 'url(' + this.banner + ')' } })) : (index.h("div", { class: "image-wrap banner" })), index.h("div", { key: 'dd4d04a159af990a2023a06912321fff42368727', class: "title-wrap" }, index.h("h3", { key: '2ff55ab537792164659b1b435b330292a037840b' }, this.campaignTitle), index.h("div", { key: '4a70987a57ae638317c30b21e9d5c422f7d5f779', class: "organisation-name" }, "By ", this.organisationName)), this.isEmpty(this.primaryFigureAmount) && this.isEmpty(this.secondaryFigureAmount) ? null : (index.h("div", { class: "meta-wrap" }, this.isEmpty(this.primaryFigureAmount) ? null : (index.h("div", { class: "meta-item" }, index.h("span", { class: "label" }, this.primaryFigureLabel), index.h("span", { class: "text" }, this.primaryFigureAmount))), this.isEmpty(this.secondaryFigureAmount) ? null : (index.h("div", { class: "meta-item" }, index.h("span", { class: "label" }, this.secondaryFigureLabel), index.h("span", { class: "text" }, this.secondaryFigureAmount))))), this.isEmpty(this.progressBarCounter) ? null : (index.h("div", { class: "progress-bar-wrap" }, index.h("biggive-progress-bar", { counter: this.progressBarCounter, "colour-scheme": "primary" })))), index.h("div", { key: 'ee6cd76f7d633aba92bc8af1d33c8298b5db643a', class: "button-wrap" }, this.isFutureCampaign || this.isPastCampaign ? (index.h("div", { class: "msg-wrapper" }, index.h("biggive-misc-icon", { "background-colour": "white", "icon-colour": "black", icon: "Timer" }), this.isFutureCampaign ? index.h("p", null, "Launches ", this.datetime) : index.h("p", null, "Closed ", this.datetime))) : (index.h("biggive-button", { "full-width": "true", "colour-scheme": this.donateButtonColourScheme, url: this.donateButtonUrl, label: this.donateButtonLabel })), index.h("biggive-button", { key: '394552333d901e22ad76ebdbd941976d52d6c21f', "full-width": "true", "colour-scheme": this.moreInfoButtonColourScheme, url: this.moreInfoButtonUrl, label: this.moreInfoButtonLabel })))));
47
+ return (index.h("div", { key: '319985f7b32754f323941126da3e14b50a14ebe3', class: 'container space-below-' + this.spaceBelow.toString() }, index.h("div", { key: '31b9adc9d26688a04babd7de6ec863df8e5fb984', class: "sleeve" }, index.h("div", { key: 'e3a9067edacce4985038bb4d92929c0bc5c8151e', onClick: this.handleCardGeneralClick, class: "above-button-wrap" }, this.campaignType !== null ? (index.h("div", { class: "campaign-type" }, index.h("span", null, this.campaignType))) : null, this.banner !== null && this.banner !== undefined ? (index.h("div", { class: "image-wrap banner", role: "presentation", style: { 'background-image': 'url(' + this.banner + ')' } })) : (index.h("div", { class: "image-wrap banner" })), index.h("div", { key: 'dd4d04a159af990a2023a06912321fff42368727', class: "title-wrap" }, index.h("h3", { key: '2ff55ab537792164659b1b435b330292a037840b' }, this.campaignTitle), index.h("div", { key: '4a70987a57ae638317c30b21e9d5c422f7d5f779', class: "organisation-name" }, "By ", this.organisationName)), this.isEmpty(this.primaryFigureAmount) && this.isEmpty(this.secondaryFigureAmount) ? null : (index.h("div", { class: "meta-wrap" }, this.isEmpty(this.primaryFigureAmount) ? null : (index.h("div", { class: "meta-item" }, index.h("span", { class: "label" }, this.primaryFigureLabel), index.h("span", { class: "text" }, this.primaryFigureAmount))), this.isEmpty(this.secondaryFigureAmount) ? null : (index.h("div", { class: "meta-item" }, index.h("span", { class: "label" }, this.secondaryFigureLabel), index.h("span", { class: "text" }, this.secondaryFigureAmount))))), this.isEmpty(this.progressBarCounter) ? (
48
+ // We don't have a progress bar to show in this case, so the following is just functioning as a spacer to
49
+ // keep layout consistent. Counter must be non-null to make bar display.
50
+ index.h("div", { class: "progress-bar-wrap", style: { visibility: 'hidden' } }, index.h("biggive-progress-bar", { counter: 0, "colour-scheme": "primary" }))) : (index.h("div", { class: "progress-bar-wrap" }, index.h("biggive-progress-bar", { counter: this.progressBarCounter, "colour-scheme": "primary" })))), index.h("div", { key: '46f8ebfd1fc425610e6ef5fa87376659495890da', class: "button-wrap" }, this.isFutureCampaign || this.isPastCampaign ? (index.h("div", { class: "msg-wrapper" }, index.h("biggive-misc-icon", { "background-colour": "white", "icon-colour": "black", icon: "Timer" }), this.isFutureCampaign ? index.h("p", null, "Launches ", this.datetime) : index.h("p", null, "Closed ", this.datetime))) : (index.h("biggive-button", { "full-width": "true", "colour-scheme": this.donateButtonColourScheme, url: this.donateButtonUrl, label: this.donateButtonLabel })), index.h("biggive-button", { key: '13362b0cf844a93315672123f464c41482c9b65d', "full-width": "true", "colour-scheme": this.moreInfoButtonColourScheme, url: this.moreInfoButtonUrl, label: this.moreInfoButtonLabel })))));
48
51
  }
49
52
  };
50
53
  BiggiveCampaignCard.style = biggiveCampaignCardCss;
package/dist/cjs/biggive-campaign-card.cjs.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"biggive-campaign-card.entry.cjs.js","mappings":"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","names":["h"],"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 && this.banner !== undefined ? (\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}
1
+ {"file":"biggive-campaign-card.entry.cjs.js","mappings":"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","names":["h"],"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 && this.banner !== undefined ? (\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) ? (\n // We don't have a progress bar to show in this case, so the following is just functioning as a spacer to\n // keep layout consistent. Counter must be non-null to make bar display.\n <div class=\"progress-bar-wrap\" style={{ visibility: 'hidden' }}>\n <biggive-progress-bar counter={0} colour-scheme=\"primary\"></biggive-progress-bar>\n </div>\n ) : (\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/cjs/biggive-campaign-card.entry.cjs.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"biggive-campaign-card.entry.cjs.js","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 && this.banner !== undefined ? (\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"],"names":["h"],"mappings":"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"}
1
+ {"version":3,"file":"biggive-campaign-card.entry.cjs.js","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 && this.banner !== undefined ? (\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) ? (\n // We don't have a progress bar to show in this case, so the following is just functioning as a spacer to\n // keep layout consistent. Counter must be non-null to make bar display.\n <div class=\"progress-bar-wrap\" style={{ visibility: 'hidden' }}>\n <biggive-progress-bar counter={0} colour-scheme=\"primary\"></biggive-progress-bar>\n </div>\n ) : (\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"],"names":["h"],"mappings":"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"}
package/dist/cjs/biggive-heading-banner.cjs.entry.js CHANGED
@@ -46,27 +46,30 @@ const BiggiveHeadingBanner = class {
46
46
  return this.logo;
47
47
  }
48
48
  render() {
49
+ var _a, _b, _c, _d, _e;
49
50
  // Convert teaser text with line breaks to JSX
50
51
  const teaserLines = this.lineBreakToBr(this.teaser);
51
52
  // Ensure color values have # prefix if they're hex colors without it
52
- const bgColor = this.backgroundColour.startsWith('#') ? this.backgroundColour : `#${this.backgroundColour}`;
53
- const textBgColor = this.textBackgroundColour.startsWith('#') ? this.textBackgroundColour : `#${this.textBackgroundColour}`;
54
- const slugColour = this.slugColour.startsWith('#') ? this.slugColour : `#${this.slugColour}`;
55
- const mainTitleColour = this.mainTitleColour.startsWith('#') ? this.mainTitleColour : `#${this.mainTitleColour}`;
56
- const teaserColour = this.teaserColour.startsWith('#') ? this.teaserColour : `#${this.teaserColour}`;
53
+ // not sure how but it seems we're sometimes doing at least an intiial render before the colour props are populated,
54
+ // so using null-safe navigation to avoid a crash here.
55
+ const bgColor = ((_a = this.backgroundColour) === null || _a === void 0 ? void 0 : _a.startsWith('#')) ? this.backgroundColour : `#${this.backgroundColour}`;
56
+ const textBgColor = ((_b = this.textBackgroundColour) === null || _b === void 0 ? void 0 : _b.startsWith('#')) ? this.textBackgroundColour : `#${this.textBackgroundColour}`;
57
+ const slugColour = ((_c = this.slugColour) === null || _c === void 0 ? void 0 : _c.startsWith('#')) ? this.slugColour : `#${this.slugColour}`;
58
+ const mainTitleColour = ((_d = this.mainTitleColour) === null || _d === void 0 ? void 0 : _d.startsWith('#')) ? this.mainTitleColour : `#${this.mainTitleColour}`;
59
+ const teaserColour = ((_e = this.teaserColour) === null || _e === void 0 ? void 0 : _e.startsWith('#')) ? this.teaserColour : `#${this.teaserColour}`;
57
60
  const logo = this.getParsedLogo();
58
- return (index.h("div", { key: 'a8bfd958a45d8fbabd8d43a5ab6e5f8c40bbe8fd', class: {
61
+ return (index.h("div", { key: 'f1d20a1ffc7d8f49c1f1068de66135de634fbfe7', class: {
59
62
  banner: true,
60
63
  short: this.height === 'short',
61
64
  }, style: {
62
65
  'background-color': bgColor,
63
66
  } }, typeof this.mainImageUrl === 'string' && this.mainImageUrl !== '' ? (index.h("img", { class: "background", src: this.mainImageUrl, alt: "", style: {
64
67
  'object-position': `${this.getParsedFocalPoint().x}% ${this.getParsedFocalPoint().y}%`,
65
- } })) : null, index.h("div", { key: 'd0153d2ea04f43ba9f7000c2f1eb7babf975112d', class: "sleeve" }, index.h("div", { key: 'f27f6341cfa30c420b5b57c386fcac6b75c6f508', class: "content-wrap", style: {
68
+ } })) : null, index.h("div", { key: '3b3a185c3336799f757bc34ca7ff7ab1126b49d7', class: "sleeve" }, index.h("div", { key: 'b621ed5069510f13a385c606c36806f6f26ecab3', class: "content-wrap", style: {
66
69
  'background-color': textBgColor,
67
70
  } }, logo ? (index.h("div", { class: "logo" }, index.h("img", { src: logo.url, alt: logo.alt || '' }))) : null, this.slug != undefined ? (index.h("div", { style: {
68
71
  color: slugColour,
69
- }, class: "slug" }, this.slug)) : null, index.h("h1", { key: 'dcd1da69b69456127e81ef93973fe51d5831227f', style: {
72
+ }, class: "slug" }, this.slug)) : null, index.h("h1", { key: '1a8ba9e55d7c038fc5a99d5e9014773de178254a', style: {
70
73
  color: mainTitleColour,
71
74
  }, class: "main-title" }, this.mainTitle), this.teaser != undefined ? (index.h("div", { class: "teaser", style: {
72
75
  color: teaserColour,