@biggive/components 202512031112.0.0 → 202512081017.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 (14) hide show
  1. package/dist/biggive/biggive-heading-banner.entry.esm.js.map +1 -1
  2. package/dist/biggive/biggive.esm.js +1 -1
  3. package/dist/biggive/{p-8bb1f05f.entry.js → p-a4537a2d.entry.js} +2 -2
  4. package/dist/cjs/biggive-heading-banner.cjs.entry.js +1 -1
  5. package/dist/cjs/biggive-heading-banner.entry.cjs.js.map +1 -1
  6. package/dist/collection/components/biggive-heading-banner/biggive-heading-banner.css +1 -1
  7. package/dist/components/biggive-heading-banner.js +1 -1
  8. package/dist/components/biggive-heading-banner.js.map +1 -1
  9. package/dist/esm/biggive-heading-banner.entry.js +1 -1
  10. package/dist/esm/biggive-heading-banner.entry.js.map +1 -1
  11. package/hydrate/index.js +1 -1
  12. package/hydrate/index.mjs +1 -1
  13. package/package.json +2 -2
  14. /package/dist/biggive/{p-8bb1f05f.entry.js.map → p-a4537a2d.entry.js.map} +0 -0
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: #{$screen-tablet-max}) {\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-tablet-max}) {\n flex-direction: column;\n padding-left: 20px;\n align-items: start;\n height: 600px;\n\n .short & {\n height: 400px;\n }\n }\n}\n\n.banner-link {\n text-decoration: none;\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: $screen-tablet-max;\n\n @media (min-width: #{$screen-tablet-max}) {\n margin-bottom: auto;\n margin-top: auto;\n margin-left: 0;\n padding-top: 30px;\n max-width: 40%;\n }\n}\n\nimg.stacked {\n width: 100%;\n height: 100%;\n object-fit: cover;\n\n @media (min-width: #{$screen-tablet-max}) {\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 @Prop() targetUrl?: string;\n\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\n const mainTitle =\n this.targetUrl === undefined ? (\n <h1 style={{ color: mainTitleColour }} class=\"main-title\">\n {this.mainTitle}\n </h1>\n ) : (\n <a href={this.targetUrl} class=\"banner-link\">\n <h1 style={{ color: mainTitleColour }} class=\"main-title\">\n {this.mainTitle}\n </h1>\n </a>\n );\n\n let teaserBlock = null;\n if (this.teaser != undefined) {\n teaserBlock =\n this.targetUrl === undefined ? (\n <div class=\"teaser\" style={{ color: teaserColour }}>\n {teaserLines}\n </div>\n ) : (\n <a href={this.targetUrl} class=\"banner-link\">\n <div class=\"teaser\" style={{ color: teaserColour }}>\n {teaserLines}\n </div>\n </a>\n );\n }\n\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 {mainTitle}\n\n {teaserBlock}\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: #{$screen-tablet-max}) {\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-tablet-max}) {\n flex-direction: column;\n padding-left: 20px;\n align-items: start;\n height: 600px;\n\n .short & {\n height: 400px;\n }\n }\n}\n\n.banner-link {\n text-decoration: none;\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: 50px; // Avoid overlapping social icons\n padding-left: 30px;\n padding-bottom: 30px;\n box-sizing: border-box;\n width: 100%;\n max-width: $screen-tablet-max;\n\n @media (min-width: #{$screen-tablet-max}) {\n margin-bottom: auto;\n margin-top: auto;\n margin-left: 0;\n padding-top: 30px;\n max-width: 40%;\n }\n}\n\nimg.stacked {\n width: 100%;\n height: 100%;\n object-fit: cover;\n\n @media (min-width: #{$screen-tablet-max}) {\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 @Prop() targetUrl?: string;\n\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\n const mainTitle =\n this.targetUrl === undefined ? (\n <h1 style={{ color: mainTitleColour }} class=\"main-title\">\n {this.mainTitle}\n </h1>\n ) : (\n <a href={this.targetUrl} class=\"banner-link\">\n <h1 style={{ color: mainTitleColour }} class=\"main-title\">\n {this.mainTitle}\n </h1>\n </a>\n );\n\n let teaserBlock = null;\n if (this.teaser != undefined) {\n teaserBlock =\n this.targetUrl === undefined ? (\n <div class=\"teaser\" style={{ color: teaserColour }}>\n {teaserLines}\n </div>\n ) : (\n <a href={this.targetUrl} class=\"banner-link\">\n <div class=\"teaser\" style={{ color: teaserColour }}>\n {teaserLines}\n </div>\n </a>\n );\n }\n\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 {mainTitle}\n\n {teaserBlock}\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-BM4-32bx.js";export{s as setNonce}from"./p-BM4-32bx.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-3312766c",[[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-1484d213",[[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-e4f2cfe5",[[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-6cabfc64",[[257,"biggive-cookie-banner",{"autoOpenPreferences":[4,"auto-open-preferences"],"blogUriPrefix":[1,"blog-uri-prefix"],"previouslyAgreedCookiePreferences":[16]},null,{"autoOpenPreferences":["autoOpenPreferencesIfRequested"]}]]],["p-ebc8d3af",[[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-7f43fb1e",[[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-17114809",[[257,"philco-main-menu",{"philcoUrlPrefix":[1,"philco-url-prefix"],"closeMobileMenuFromOutside":[64]}]]],["p-d57a27e3",[[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-c2b67052",[[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-a8b8c709",[[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-cec16b7e",[[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-deff1ef9",[[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-954b5ae0",[[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-76d61dc2",[[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-d6d5b9b0",[[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-85ba724f",[[257,"biggive-accordion",{"spaceBelow":[2,"space-below"],"textColour":[1,"text-colour"],"headingColour":[1,"heading-colour"],"children":[32]}]]],["p-a56d303d",[[257,"biggive-accordion-entry",{"heading":[1]}]]],["p-f3592869",[[257,"biggive-back-to-top"]]],["p-9b64363f",[[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-112efd01",[[257,"biggive-boxed-content",{"spaceBelow":[2,"space-below"],"verticalPadding":[2,"vertical-padding"],"horizontalPadding":[2,"horizontal-padding"],"backgroundColour":[1,"background-colour"],"shadow":[4]}]]],["p-0ee58ee2",[[257,"biggive-branded-image",{"spaceBelow":[2,"space-below"],"imageUrl":[1,"image-url"],"imageHeightPercent":[2,"image-height-percent"],"imageAlt":[1,"image-alt"],"logoUrl":[1,"logo-url"],"slug":[1],"charityName":[1,"charity-name"],"charityLocation":[1,"charity-location"],"charityUrl":[1,"charity-url"]}]]],["p-43909904",[[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-7d8295a2",[[257,"biggive-form"]]],["p-5e2cd937",[[257,"biggive-formatted-text",{"spaceBelow":[2,"space-below"],"defaultTextColour":[1,"default-text-colour"],"maxWidth":[2,"max-width"],"siteDesign":[1,"site-design"]}]]],["p-754f0043",[[257,"biggive-grid",{"spaceBelow":[2,"space-below"],"columnCount":[2,"column-count"],"spaceBetween":[4,"space-between"],"columnGap":[2,"column-gap"]}]]],["p-add31c30",[[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-8bb1f05f",[[257,"biggive-heading-banner",{"targetUrl":[1,"target-url"],"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-dd31ec22",[[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-876f4930",[[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-42370c1e",[[257,"biggive-nav-group",{"inline":[4]}]]],["p-43fed57f",[[257,"biggive-nav-item",{"url":[1],"label":[1],"iconColour":[1,"icon-colour"]}]]],["p-9444f538",[[257,"biggive-page-column"]]],["p-cb7ac965",[[257,"biggive-page-columns",{"spaceBelow":[2,"space-below"]}]]],["p-e69b1d5a",[[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-9b89f95f",[[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-c1d9c406",[[257,"biggive-sheet",{"sheetId":[1,"sheet-id"],"backgroundColour":[1,"background-colour"],"textColour":[1,"text-colour"]}]]],["p-7f956ecd",[[257,"biggive-tab",{"tabTitle":[1,"tab-title"]}]]],["p-4e7646ed",[[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-0ecf6f0a",[[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-15787e61",[[257,"biggive-text-input",{"currency":[1],"spaceBelow":[2,"space-below"],"selectStyle":[1,"select-style"],"siteDesign":[1,"site-design"]}]]],["p-9e866444",[[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-a4449aba",[[257,"biggive-timeline-entry",{"date":[1],"heading":[1]}]]],["p-a9fcced8",[[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-f66c441b",[[257,"biggive-totalizer-ticker-item",{"figure":[1],"label":[1]}]]],["p-9044ee40",[[257,"biggive-video",{"spaceAbove":[2,"space-above"],"spaceBelow":[2,"space-below"],"videoUrl":[1,"video-url"]}]]],["p-f062bb37",[[257,"philco-footer",{"headingLevel":[2,"heading-level"],"philcoUrlPrefix":[1,"philco-url-prefix"]}]]],["p-7c22f905",[[257,"biggive-form-field-select",{"selectionChanged":[16],"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-1cc85e7f",[[257,"biggive-popup",{"modalClosedCallback":[16],"openFromOutside":[64],"closeFromOutside":[64]}]]],["p-18692b59",[[257,"biggive-progress-bar",{"spaceBelow":[2,"space-below"],"colourScheme":[1,"colour-scheme"],"counter":[2]}]]],["p-fa53a300",[[257,"biggive-social-icon",{"service":[1],"labelPrefix":[1,"label-prefix"],"backgroundColour":[1,"background-colour"],"iconColour":[1,"icon-colour"],"wide":[4],"url":[1]}]]],["p-71d77bd5",[[257,"biggive-misc-icon",{"backgroundColour":[1,"background-colour"],"iconColour":[1,"icon-colour"],"icon":[1],"url":[1]}]]],["p-83d6a2d3",[[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-BM4-32bx.js";export{s as setNonce}from"./p-BM4-32bx.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-3312766c",[[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-1484d213",[[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-e4f2cfe5",[[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-6cabfc64",[[257,"biggive-cookie-banner",{"autoOpenPreferences":[4,"auto-open-preferences"],"blogUriPrefix":[1,"blog-uri-prefix"],"previouslyAgreedCookiePreferences":[16]},null,{"autoOpenPreferences":["autoOpenPreferencesIfRequested"]}]]],["p-ebc8d3af",[[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-7f43fb1e",[[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-17114809",[[257,"philco-main-menu",{"philcoUrlPrefix":[1,"philco-url-prefix"],"closeMobileMenuFromOutside":[64]}]]],["p-d57a27e3",[[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-c2b67052",[[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-a8b8c709",[[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-cec16b7e",[[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-deff1ef9",[[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-954b5ae0",[[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-76d61dc2",[[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-d6d5b9b0",[[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-85ba724f",[[257,"biggive-accordion",{"spaceBelow":[2,"space-below"],"textColour":[1,"text-colour"],"headingColour":[1,"heading-colour"],"children":[32]}]]],["p-a56d303d",[[257,"biggive-accordion-entry",{"heading":[1]}]]],["p-f3592869",[[257,"biggive-back-to-top"]]],["p-9b64363f",[[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-112efd01",[[257,"biggive-boxed-content",{"spaceBelow":[2,"space-below"],"verticalPadding":[2,"vertical-padding"],"horizontalPadding":[2,"horizontal-padding"],"backgroundColour":[1,"background-colour"],"shadow":[4]}]]],["p-0ee58ee2",[[257,"biggive-branded-image",{"spaceBelow":[2,"space-below"],"imageUrl":[1,"image-url"],"imageHeightPercent":[2,"image-height-percent"],"imageAlt":[1,"image-alt"],"logoUrl":[1,"logo-url"],"slug":[1],"charityName":[1,"charity-name"],"charityLocation":[1,"charity-location"],"charityUrl":[1,"charity-url"]}]]],["p-43909904",[[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-7d8295a2",[[257,"biggive-form"]]],["p-5e2cd937",[[257,"biggive-formatted-text",{"spaceBelow":[2,"space-below"],"defaultTextColour":[1,"default-text-colour"],"maxWidth":[2,"max-width"],"siteDesign":[1,"site-design"]}]]],["p-754f0043",[[257,"biggive-grid",{"spaceBelow":[2,"space-below"],"columnCount":[2,"column-count"],"spaceBetween":[4,"space-between"],"columnGap":[2,"column-gap"]}]]],["p-add31c30",[[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-a4537a2d",[[257,"biggive-heading-banner",{"targetUrl":[1,"target-url"],"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-dd31ec22",[[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-876f4930",[[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-42370c1e",[[257,"biggive-nav-group",{"inline":[4]}]]],["p-43fed57f",[[257,"biggive-nav-item",{"url":[1],"label":[1],"iconColour":[1,"icon-colour"]}]]],["p-9444f538",[[257,"biggive-page-column"]]],["p-cb7ac965",[[257,"biggive-page-columns",{"spaceBelow":[2,"space-below"]}]]],["p-e69b1d5a",[[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-9b89f95f",[[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-c1d9c406",[[257,"biggive-sheet",{"sheetId":[1,"sheet-id"],"backgroundColour":[1,"background-colour"],"textColour":[1,"text-colour"]}]]],["p-7f956ecd",[[257,"biggive-tab",{"tabTitle":[1,"tab-title"]}]]],["p-4e7646ed",[[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-0ecf6f0a",[[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-15787e61",[[257,"biggive-text-input",{"currency":[1],"spaceBelow":[2,"space-below"],"selectStyle":[1,"select-style"],"siteDesign":[1,"site-design"]}]]],["p-9e866444",[[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-a4449aba",[[257,"biggive-timeline-entry",{"date":[1],"heading":[1]}]]],["p-a9fcced8",[[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-f66c441b",[[257,"biggive-totalizer-ticker-item",{"figure":[1],"label":[1]}]]],["p-9044ee40",[[257,"biggive-video",{"spaceAbove":[2,"space-above"],"spaceBelow":[2,"space-below"],"videoUrl":[1,"video-url"]}]]],["p-f062bb37",[[257,"philco-footer",{"headingLevel":[2,"heading-level"],"philcoUrlPrefix":[1,"philco-url-prefix"]}]]],["p-7c22f905",[[257,"biggive-form-field-select",{"selectionChanged":[16],"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-1cc85e7f",[[257,"biggive-popup",{"modalClosedCallback":[16],"openFromOutside":[64],"closeFromOutside":[64]}]]],["p-18692b59",[[257,"biggive-progress-bar",{"spaceBelow":[2,"space-below"],"colourScheme":[1,"colour-scheme"],"counter":[2]}]]],["p-fa53a300",[[257,"biggive-social-icon",{"service":[1],"labelPrefix":[1,"label-prefix"],"backgroundColour":[1,"background-colour"],"iconColour":[1,"icon-colour"],"wide":[4],"url":[1]}]]],["p-71d77bd5",[[257,"biggive-misc-icon",{"backgroundColour":[1,"background-colour"],"iconColour":[1,"icon-colour"],"icon":[1],"url":[1]}]]],["p-83d6a2d3",[[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-8bb1f05f.entry.js → p-a4537a2d.entry.js} RENAMED
@@ -1,2 +1,2 @@
1
- import{r as o,h as e}from"./p-BM4-32bx.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: 768px){.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: 768px){.sleeve{flex-direction:column;padding-left:20px;align-items:start;height:600px}.short .sleeve{height:400px}}.banner-link{text-decoration:none}.content-wrap{position:relative;padding-top:70px;padding-right:30px;padding-left:30px;padding-bottom:30px;box-sizing:border-box;width:100%;max-width:768px}@media (min-width: 768px){.content-wrap{margin-bottom:auto;margin-top:auto;margin-left:0;padding-top:30px;max-width:40%}}img.stacked{width:100%;height:100%;object-fit:cover}@media (min-width: 768px){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 n=((o=this.backgroundColour)===null||o===void 0?void 0:o.startsWith("#"))?this.backgroundColour:`#${this.backgroundColour}`;const c=((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();const u=this.targetUrl===undefined?e("h1",{style:{color:s},class:"main-title"},this.mainTitle):e("a",{href:this.targetUrl,class:"banner-link"},e("h1",{style:{color:s},class:"main-title"},this.mainTitle));let p=null;if(this.teaser!=undefined){p=this.targetUrl===undefined?e("div",{class:"teaser",style:{color:d}},a):e("a",{href:this.targetUrl,class:"banner-link"},e("div",{class:"teaser",style:{color:d}},a))}return e("div",{key:"c3aca52828edd0b68a3efd547fc1e01326b7a4fe",class:{banner:true,short:this.height==="short"},style:{"background-color":n}},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:"2f24af54cd76205a01154cd0975842af237fda3d",class:"sleeve"},e("div",{key:"5b841e413144a639b3d4ea6dbc8e14a72362e2c1",class:"content-wrap",style:{"background-color":c}},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,u,p),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-8bb1f05f.entry.js.map
1
+ import{r as o,h as e}from"./p-BM4-32bx.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: 768px){.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: 768px){.sleeve{flex-direction:column;padding-left:20px;align-items:start;height:600px}.short .sleeve{height:400px}}.banner-link{text-decoration:none}.content-wrap{position:relative;padding-top:70px;padding-right:50px;padding-left:30px;padding-bottom:30px;box-sizing:border-box;width:100%;max-width:768px}@media (min-width: 768px){.content-wrap{margin-bottom:auto;margin-top:auto;margin-left:0;padding-top:30px;max-width:40%}}img.stacked{width:100%;height:100%;object-fit:cover}@media (min-width: 768px){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 n=((o=this.backgroundColour)===null||o===void 0?void 0:o.startsWith("#"))?this.backgroundColour:`#${this.backgroundColour}`;const c=((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();const u=this.targetUrl===undefined?e("h1",{style:{color:s},class:"main-title"},this.mainTitle):e("a",{href:this.targetUrl,class:"banner-link"},e("h1",{style:{color:s},class:"main-title"},this.mainTitle));let p=null;if(this.teaser!=undefined){p=this.targetUrl===undefined?e("div",{class:"teaser",style:{color:d}},a):e("a",{href:this.targetUrl,class:"banner-link"},e("div",{class:"teaser",style:{color:d}},a))}return e("div",{key:"c3aca52828edd0b68a3efd547fc1e01326b7a4fe",class:{banner:true,short:this.height==="short"},style:{"background-color":n}},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:"2f24af54cd76205a01154cd0975842af237fda3d",class:"sleeve"},e("div",{key:"5b841e413144a639b3d4ea6dbc8e14a72362e2c1",class:"content-wrap",style:{"background-color":c}},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,u,p),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-a4537a2d.entry.js.map
package/dist/cjs/biggive-heading-banner.cjs.entry.js CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  var index = require('./index-jXV1Nhnf.js');
4
4
 
5
- const biggiveHeadingBannerCss = "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: 768px){.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: 768px){.sleeve{flex-direction:column;padding-left:20px;align-items:start;height:600px}.short .sleeve{height:400px}}.banner-link{text-decoration:none}.content-wrap{position:relative;padding-top:70px;padding-right:30px;padding-left:30px;padding-bottom:30px;box-sizing:border-box;width:100%;max-width:768px}@media (min-width: 768px){.content-wrap{margin-bottom:auto;margin-top:auto;margin-left:0;padding-top:30px;max-width:40%}}img.stacked{width:100%;height:100%;object-fit:cover}@media (min-width: 768px){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}";
5
+ const biggiveHeadingBannerCss = "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: 768px){.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: 768px){.sleeve{flex-direction:column;padding-left:20px;align-items:start;height:600px}.short .sleeve{height:400px}}.banner-link{text-decoration:none}.content-wrap{position:relative;padding-top:70px;padding-right:50px;padding-left:30px;padding-bottom:30px;box-sizing:border-box;width:100%;max-width:768px}@media (min-width: 768px){.content-wrap{margin-bottom:auto;margin-top:auto;margin-left:0;padding-top:30px;max-width:40%}}img.stacked{width:100%;height:100%;object-fit:cover}@media (min-width: 768px){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}";
6
6
 
7
7
  const BiggiveHeadingBanner = class {
8
8
  constructor(hostRef) {
package/dist/cjs/biggive-heading-banner.entry.cjs.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"biggive-heading-banner.entry.cjs.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: #{$screen-tablet-max}) {\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-tablet-max}) {\n flex-direction: column;\n padding-left: 20px;\n align-items: start;\n height: 600px;\n\n .short & {\n height: 400px;\n }\n }\n}\n\n.banner-link {\n text-decoration: none;\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: $screen-tablet-max;\n\n @media (min-width: #{$screen-tablet-max}) {\n margin-bottom: auto;\n margin-top: auto;\n margin-left: 0;\n padding-top: 30px;\n max-width: 40%;\n }\n}\n\nimg.stacked {\n width: 100%;\n height: 100%;\n object-fit: cover;\n\n @media (min-width: #{$screen-tablet-max}) {\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 @Prop() targetUrl?: string;\n\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\n const mainTitle =\n this.targetUrl === undefined ? (\n <h1 style={{ color: mainTitleColour }} class=\"main-title\">\n {this.mainTitle}\n </h1>\n ) : (\n <a href={this.targetUrl} class=\"banner-link\">\n <h1 style={{ color: mainTitleColour }} class=\"main-title\">\n {this.mainTitle}\n </h1>\n </a>\n );\n\n let teaserBlock = null;\n if (this.teaser != undefined) {\n teaserBlock =\n this.targetUrl === undefined ? (\n <div class=\"teaser\" style={{ color: teaserColour }}>\n {teaserLines}\n </div>\n ) : (\n <a href={this.targetUrl} class=\"banner-link\">\n <div class=\"teaser\" style={{ color: teaserColour }}>\n {teaserLines}\n </div>\n </a>\n );\n }\n\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 {mainTitle}\n\n {teaserBlock}\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":["h"],"mappings":"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"}
1
+ {"version":3,"file":"biggive-heading-banner.entry.cjs.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: #{$screen-tablet-max}) {\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-tablet-max}) {\n flex-direction: column;\n padding-left: 20px;\n align-items: start;\n height: 600px;\n\n .short & {\n height: 400px;\n }\n }\n}\n\n.banner-link {\n text-decoration: none;\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: 50px; // Avoid overlapping social icons\n padding-left: 30px;\n padding-bottom: 30px;\n box-sizing: border-box;\n width: 100%;\n max-width: $screen-tablet-max;\n\n @media (min-width: #{$screen-tablet-max}) {\n margin-bottom: auto;\n margin-top: auto;\n margin-left: 0;\n padding-top: 30px;\n max-width: 40%;\n }\n}\n\nimg.stacked {\n width: 100%;\n height: 100%;\n object-fit: cover;\n\n @media (min-width: #{$screen-tablet-max}) {\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 @Prop() targetUrl?: string;\n\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\n const mainTitle =\n this.targetUrl === undefined ? (\n <h1 style={{ color: mainTitleColour }} class=\"main-title\">\n {this.mainTitle}\n </h1>\n ) : (\n <a href={this.targetUrl} class=\"banner-link\">\n <h1 style={{ color: mainTitleColour }} class=\"main-title\">\n {this.mainTitle}\n </h1>\n </a>\n );\n\n let teaserBlock = null;\n if (this.teaser != undefined) {\n teaserBlock =\n this.targetUrl === undefined ? (\n <div class=\"teaser\" style={{ color: teaserColour }}>\n {teaserLines}\n </div>\n ) : (\n <a href={this.targetUrl} class=\"banner-link\">\n <div class=\"teaser\" style={{ color: teaserColour }}>\n {teaserLines}\n </div>\n </a>\n );\n }\n\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 {mainTitle}\n\n {teaserBlock}\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":["h"],"mappings":";;;;AAAA,MAAM,uBAAuB,GAAG,u5IAAu5I;;MCa16I,oBAAoB,GAAA,MAAA;AALjC,IAAA,WAAA,CAAA,OAAA,EAAA;;AAaE;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAY,EAAE;AAuC1B;;;AAGG;AACK,QAAA,IAAM,CAAA,MAAA,GAAqB,MAAM;AA4I1C;AA1IC;;;AAGG;AACK,IAAA,aAAa,CAAC,MAA0B,EAAA;AAC9C,QAAA,IAAI,MAAM,IAAI,SAAS,EAAE;AACvB,YAAA,OAAO,EAAE;;AAGX,QAAA,OAAO;aACJ,KAAK,CAAC,cAAc;AACpB,aAAA,GAAG,CAAC,IAAI,IAAI,CAAC,IAAI,EAAEA,OAAM,CAAA,IAAA,EAAA,IAAA,CAAA,CAAC;AAC1B,aAAA,IAAI;AACJ,aAAA,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC;;IAGT,mBAAmB,GAAA;AACzB,QAAA,IAAI,OAAO,IAAI,CAAC,UAAU,KAAK,QAAQ,EAAE;YACvC,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC;;QAEpC,OAAO,IAAI,CAAC,UAAU;;IAGhB,aAAa,GAAA;AACnB,QAAA,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS;AAAE,YAAA,OAAO,SAAS;AAC7C,QAAA,IAAI,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE;YACjC,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC;;QAE9B,OAAO,IAAI,CAAC,IAAI;;IAGlB,MAAM,GAAA;;;QAEJ,MAAM,WAAW,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC;;;;QAKnD,MAAM,OAAO,GAAG,CAAA,CAAA,EAAA,GAAA,IAAI,CAAC,gBAAgB,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,UAAU,CAAC,GAAG,CAAC,IAAG,IAAI,CAAC,gBAAgB,GAAG,IAAI,IAAI,CAAC,gBAAgB,CAAA,CAAE;QAC5G,MAAM,WAAW,GAAG,CAAA,CAAA,EAAA,GAAA,IAAI,CAAC,oBAAoB,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,UAAU,CAAC,GAAG,CAAC,IAAG,IAAI,CAAC,oBAAoB,GAAG,IAAI,IAAI,CAAC,oBAAoB,CAAA,CAAE;QAC5H,MAAM,UAAU,GAAG,CAAA,CAAA,EAAA,GAAA,IAAI,CAAC,UAAU,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,UAAU,CAAC,GAAG,CAAC,IAAG,IAAI,CAAC,UAAU,GAAG,IAAI,IAAI,CAAC,UAAU,CAAA,CAAE;QAC7F,MAAM,eAAe,GAAG,CAAA,CAAA,EAAA,GAAA,IAAI,CAAC,eAAe,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,UAAU,CAAC,GAAG,CAAC,IAAG,IAAI,CAAC,eAAe,GAAG,IAAI,IAAI,CAAC,eAAe,CAAA,CAAE;QACjH,MAAM,YAAY,GAAG,CAAA,CAAA,EAAA,GAAA,IAAI,CAAC,YAAY,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,UAAU,CAAC,GAAG,CAAC,IAAG,IAAI,CAAC,YAAY,GAAG,IAAI,IAAI,CAAC,YAAY,CAAA,CAAE;AAErG,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,aAAa,EAAE;AAEjC,QAAA,MAAM,SAAS,GACb,IAAI,CAAC,SAAS,KAAK,SAAS,IAC1BA,OAAA,CAAA,IAAA,EAAA,EAAI,KAAK,EAAE,EAAE,KAAK,EAAE,eAAe,EAAE,EAAE,KAAK,EAAC,YAAY,IACtD,IAAI,CAAC,SAAS,CACZ,KAELA,OAAG,CAAA,GAAA,EAAA,EAAA,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,KAAK,EAAC,aAAa,EAAA,EAC1CA,OAAA,CAAA,IAAA,EAAA,EAAI,KAAK,EAAE,EAAE,KAAK,EAAE,eAAe,EAAE,EAAE,KAAK,EAAC,YAAY,IACtD,IAAI,CAAC,SAAS,CACZ,CACH,CACL;QAEH,IAAI,WAAW,GAAG,IAAI;AACtB,QAAA,IAAI,IAAI,CAAC,MAAM,IAAI,SAAS,EAAE;YAC5B,WAAW;AACT,gBAAA,IAAI,CAAC,SAAS,KAAK,SAAS,IAC1BA,OAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,QAAQ,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,YAAY,EAAE,IAC/C,WAAW,CACR,KAENA,OAAG,CAAA,GAAA,EAAA,EAAA,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,KAAK,EAAC,aAAa,EAAA,EAC1CA,OAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,QAAQ,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,YAAY,EAAE,EAC/C,EAAA,WAAW,CACR,CACJ,CACL;;QAGL,QACEA,OACE,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE;AACL,gBAAA,MAAM,EAAE,IAAI;AACZ,gBAAA,KAAK,EAAE,IAAI,CAAC,MAAM,KAAK,OAAO;AAC/B,aAAA,EACD,KAAK,EAAE;AACL,gBAAA,kBAAkB,EAAE,OAAO;AAC5B,aAAA,EAAA,EAEA,OAAO,IAAI,CAAC,YAAY,KAAK,QAAQ,IAAI,IAAI,CAAC,YAAY,KAAK,EAAE,IAChEA,OACE,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,YAAY,EAClB,GAAG,EAAE,IAAI,CAAC,YAAY,EACtB,GAAG,EAAC,EAAE,EACN,KAAK,EAAE;AACL,gBAAA,iBAAiB,EAAE,CAAA,EAAG,IAAI,CAAC,mBAAmB,EAAE,CAAC,CAAC,CAAA,EAAA,EAAK,IAAI,CAAC,mBAAmB,EAAE,CAAC,CAAC,CAAG,CAAA,CAAA;AACvF,aAAA,EAAA,CACD,IACA,IAAI,EACRA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,QAAQ,EAAA,EACjBA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,cAAc,EACpB,KAAK,EAAE;AACL,gBAAA,kBAAkB,EAAE,WAAW;aAChC,EAAA,EAEA,IAAI,IACHA,OAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,MAAM,EAAA,EACfA,OAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,IAAI,EAAE,EAAI,CAAA,CACvC,IACJ,IAAI,EAEP,IAAI,CAAC,IAAI,IAAI,SAAS,IACrBA,OACE,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE;AACL,gBAAA,KAAK,EAAE,UAAU;aAClB,EACD,KAAK,EAAC,MAAM,EAAA,EAEX,IAAI,CAAC,IAAI,CACN,IACJ,IAAI,EAEP,SAAS,EAET,WAAW,CACR,EAEL,OAAO,IAAI,CAAC,YAAY,KAAK,QAAQ,IAAI,IAAI,CAAC,YAAY,KAAK,EAAE,IAChEA,OACE,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,SAAS,EACf,GAAG,EAAE,IAAI,CAAC,YAAY,EACtB,GAAG,EAAC,EAAE,EACN,KAAK,EAAE;AACL,gBAAA,iBAAiB,EAAE,CAAA,EAAG,IAAI,CAAC,mBAAmB,EAAE,CAAC,CAAC,CAAA,EAAA,EAAK,IAAI,CAAC,mBAAmB,EAAE,CAAC,CAAC,CAAG,CAAA,CAAA;aACvF,EACD,CAAA,IACA,IAAI,CACJ,CACF;;;;;;;"}
package/dist/collection/components/biggive-heading-banner/biggive-heading-banner.css CHANGED
@@ -284,7 +284,7 @@ a:hover {
284
284
  .content-wrap {
285
285
  position: relative;
286
286
  padding-top: 70px;
287
- padding-right: 30px;
287
+ padding-right: 50px;
288
288
  padding-left: 30px;
289
289
  padding-bottom: 30px;
290
290
  box-sizing: border-box;
package/dist/components/biggive-heading-banner.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
2
2
 
3
- const biggiveHeadingBannerCss = "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: 768px){.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: 768px){.sleeve{flex-direction:column;padding-left:20px;align-items:start;height:600px}.short .sleeve{height:400px}}.banner-link{text-decoration:none}.content-wrap{position:relative;padding-top:70px;padding-right:30px;padding-left:30px;padding-bottom:30px;box-sizing:border-box;width:100%;max-width:768px}@media (min-width: 768px){.content-wrap{margin-bottom:auto;margin-top:auto;margin-left:0;padding-top:30px;max-width:40%}}img.stacked{width:100%;height:100%;object-fit:cover}@media (min-width: 768px){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}";
3
+ const biggiveHeadingBannerCss = "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: 768px){.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: 768px){.sleeve{flex-direction:column;padding-left:20px;align-items:start;height:600px}.short .sleeve{height:400px}}.banner-link{text-decoration:none}.content-wrap{position:relative;padding-top:70px;padding-right:50px;padding-left:30px;padding-bottom:30px;box-sizing:border-box;width:100%;max-width:768px}@media (min-width: 768px){.content-wrap{margin-bottom:auto;margin-top:auto;margin-left:0;padding-top:30px;max-width:40%}}img.stacked{width:100%;height:100%;object-fit:cover}@media (min-width: 768px){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}";
4
4
 
5
5
  const BiggiveHeadingBanner$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveHeadingBanner extends HTMLElement {
6
6
  constructor(registerHost) {
package/dist/components/biggive-heading-banner.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"biggive-heading-banner.js","mappings":"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","names":["BiggiveHeadingBanner","__stencil_proxyCustomElement"],"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: #{$screen-tablet-max}) {\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-tablet-max}) {\n flex-direction: column;\n padding-left: 20px;\n align-items: start;\n height: 600px;\n\n .short & {\n height: 400px;\n }\n }\n}\n\n.banner-link {\n text-decoration: none;\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: $screen-tablet-max;\n\n @media (min-width: #{$screen-tablet-max}) {\n margin-bottom: auto;\n margin-top: auto;\n margin-left: 0;\n padding-top: 30px;\n max-width: 40%;\n }\n}\n\nimg.stacked {\n width: 100%;\n height: 100%;\n object-fit: cover;\n\n @media (min-width: #{$screen-tablet-max}) {\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 @Prop() targetUrl?: string;\n\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\n const mainTitle =\n this.targetUrl === undefined ? (\n <h1 style={{ color: mainTitleColour }} class=\"main-title\">\n {this.mainTitle}\n </h1>\n ) : (\n <a href={this.targetUrl} class=\"banner-link\">\n <h1 style={{ color: mainTitleColour }} class=\"main-title\">\n {this.mainTitle}\n </h1>\n </a>\n );\n\n let teaserBlock = null;\n if (this.teaser != undefined) {\n teaserBlock =\n this.targetUrl === undefined ? (\n <div class=\"teaser\" style={{ color: teaserColour }}>\n {teaserLines}\n </div>\n ) : (\n <a href={this.targetUrl} class=\"banner-link\">\n <div class=\"teaser\" style={{ color: teaserColour }}>\n {teaserLines}\n </div>\n </a>\n );\n }\n\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 {mainTitle}\n\n {teaserBlock}\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"],"version":3}
1
+ {"file":"biggive-heading-banner.js","mappings":"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","names":["BiggiveHeadingBanner","__stencil_proxyCustomElement"],"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: #{$screen-tablet-max}) {\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-tablet-max}) {\n flex-direction: column;\n padding-left: 20px;\n align-items: start;\n height: 600px;\n\n .short & {\n height: 400px;\n }\n }\n}\n\n.banner-link {\n text-decoration: none;\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: 50px; // Avoid overlapping social icons\n padding-left: 30px;\n padding-bottom: 30px;\n box-sizing: border-box;\n width: 100%;\n max-width: $screen-tablet-max;\n\n @media (min-width: #{$screen-tablet-max}) {\n margin-bottom: auto;\n margin-top: auto;\n margin-left: 0;\n padding-top: 30px;\n max-width: 40%;\n }\n}\n\nimg.stacked {\n width: 100%;\n height: 100%;\n object-fit: cover;\n\n @media (min-width: #{$screen-tablet-max}) {\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 @Prop() targetUrl?: string;\n\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\n const mainTitle =\n this.targetUrl === undefined ? (\n <h1 style={{ color: mainTitleColour }} class=\"main-title\">\n {this.mainTitle}\n </h1>\n ) : (\n <a href={this.targetUrl} class=\"banner-link\">\n <h1 style={{ color: mainTitleColour }} class=\"main-title\">\n {this.mainTitle}\n </h1>\n </a>\n );\n\n let teaserBlock = null;\n if (this.teaser != undefined) {\n teaserBlock =\n this.targetUrl === undefined ? (\n <div class=\"teaser\" style={{ color: teaserColour }}>\n {teaserLines}\n </div>\n ) : (\n <a href={this.targetUrl} class=\"banner-link\">\n <div class=\"teaser\" style={{ color: teaserColour }}>\n {teaserLines}\n </div>\n </a>\n );\n }\n\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 {mainTitle}\n\n {teaserBlock}\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"],"version":3}
package/dist/esm/biggive-heading-banner.entry.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { r as registerInstance, h } from './index-BM4-32bx.js';
2
2
 
3
- const biggiveHeadingBannerCss = "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: 768px){.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: 768px){.sleeve{flex-direction:column;padding-left:20px;align-items:start;height:600px}.short .sleeve{height:400px}}.banner-link{text-decoration:none}.content-wrap{position:relative;padding-top:70px;padding-right:30px;padding-left:30px;padding-bottom:30px;box-sizing:border-box;width:100%;max-width:768px}@media (min-width: 768px){.content-wrap{margin-bottom:auto;margin-top:auto;margin-left:0;padding-top:30px;max-width:40%}}img.stacked{width:100%;height:100%;object-fit:cover}@media (min-width: 768px){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}";
3
+ const biggiveHeadingBannerCss = "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: 768px){.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: 768px){.sleeve{flex-direction:column;padding-left:20px;align-items:start;height:600px}.short .sleeve{height:400px}}.banner-link{text-decoration:none}.content-wrap{position:relative;padding-top:70px;padding-right:50px;padding-left:30px;padding-bottom:30px;box-sizing:border-box;width:100%;max-width:768px}@media (min-width: 768px){.content-wrap{margin-bottom:auto;margin-top:auto;margin-left:0;padding-top:30px;max-width:40%}}img.stacked{width:100%;height:100%;object-fit:cover}@media (min-width: 768px){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}";
4
4
 
5
5
  const BiggiveHeadingBanner = class {
6
6
  constructor(hostRef) {
package/dist/esm/biggive-heading-banner.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"biggive-heading-banner.entry.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: #{$screen-tablet-max}) {\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-tablet-max}) {\n flex-direction: column;\n padding-left: 20px;\n align-items: start;\n height: 600px;\n\n .short & {\n height: 400px;\n }\n }\n}\n\n.banner-link {\n text-decoration: none;\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: $screen-tablet-max;\n\n @media (min-width: #{$screen-tablet-max}) {\n margin-bottom: auto;\n margin-top: auto;\n margin-left: 0;\n padding-top: 30px;\n max-width: 40%;\n }\n}\n\nimg.stacked {\n width: 100%;\n height: 100%;\n object-fit: cover;\n\n @media (min-width: #{$screen-tablet-max}) {\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 @Prop() targetUrl?: string;\n\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\n const mainTitle =\n this.targetUrl === undefined ? (\n <h1 style={{ color: mainTitleColour }} class=\"main-title\">\n {this.mainTitle}\n </h1>\n ) : (\n <a href={this.targetUrl} class=\"banner-link\">\n <h1 style={{ color: mainTitleColour }} class=\"main-title\">\n {this.mainTitle}\n </h1>\n </a>\n );\n\n let teaserBlock = null;\n if (this.teaser != undefined) {\n teaserBlock =\n this.targetUrl === undefined ? (\n <div class=\"teaser\" style={{ color: teaserColour }}>\n {teaserLines}\n </div>\n ) : (\n <a href={this.targetUrl} class=\"banner-link\">\n <div class=\"teaser\" style={{ color: teaserColour }}>\n {teaserLines}\n </div>\n </a>\n );\n }\n\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 {mainTitle}\n\n {teaserBlock}\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.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: #{$screen-tablet-max}) {\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-tablet-max}) {\n flex-direction: column;\n padding-left: 20px;\n align-items: start;\n height: 600px;\n\n .short & {\n height: 400px;\n }\n }\n}\n\n.banner-link {\n text-decoration: none;\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: 50px; // Avoid overlapping social icons\n padding-left: 30px;\n padding-bottom: 30px;\n box-sizing: border-box;\n width: 100%;\n max-width: $screen-tablet-max;\n\n @media (min-width: #{$screen-tablet-max}) {\n margin-bottom: auto;\n margin-top: auto;\n margin-left: 0;\n padding-top: 30px;\n max-width: 40%;\n }\n}\n\nimg.stacked {\n width: 100%;\n height: 100%;\n object-fit: cover;\n\n @media (min-width: #{$screen-tablet-max}) {\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 @Prop() targetUrl?: string;\n\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\n const mainTitle =\n this.targetUrl === undefined ? (\n <h1 style={{ color: mainTitleColour }} class=\"main-title\">\n {this.mainTitle}\n </h1>\n ) : (\n <a href={this.targetUrl} class=\"banner-link\">\n <h1 style={{ color: mainTitleColour }} class=\"main-title\">\n {this.mainTitle}\n </h1>\n </a>\n );\n\n let teaserBlock = null;\n if (this.teaser != undefined) {\n teaserBlock =\n this.targetUrl === undefined ? (\n <div class=\"teaser\" style={{ color: teaserColour }}>\n {teaserLines}\n </div>\n ) : (\n <a href={this.targetUrl} class=\"banner-link\">\n <div class=\"teaser\" style={{ color: teaserColour }}>\n {teaserLines}\n </div>\n </a>\n );\n }\n\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 {mainTitle}\n\n {teaserBlock}\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/hydrate/index.js CHANGED
@@ -4741,7 +4741,7 @@ class BiggiveHeading {
4741
4741
  }; }
4742
4742
  }
4743
4743
 
4744
- const biggiveHeadingBannerCss = "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: 768px){.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: 768px){.sleeve{flex-direction:column;padding-left:20px;align-items:start;height:600px}.short .sleeve{height:400px}}.banner-link{text-decoration:none}.content-wrap{position:relative;padding-top:70px;padding-right:30px;padding-left:30px;padding-bottom:30px;box-sizing:border-box;width:100%;max-width:768px}@media (min-width: 768px){.content-wrap{margin-bottom:auto;margin-top:auto;margin-left:0;padding-top:30px;max-width:40%}}img.stacked{width:100%;height:100%;object-fit:cover}@media (min-width: 768px){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}";
4744
+ const biggiveHeadingBannerCss = "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: 768px){.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: 768px){.sleeve{flex-direction:column;padding-left:20px;align-items:start;height:600px}.short .sleeve{height:400px}}.banner-link{text-decoration:none}.content-wrap{position:relative;padding-top:70px;padding-right:50px;padding-left:30px;padding-bottom:30px;box-sizing:border-box;width:100%;max-width:768px}@media (min-width: 768px){.content-wrap{margin-bottom:auto;margin-top:auto;margin-left:0;padding-top:30px;max-width:40%}}img.stacked{width:100%;height:100%;object-fit:cover}@media (min-width: 768px){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}";
4745
4745
 
4746
4746
  /**
4747
4747
  * Heading banner component for use as a page header.
package/hydrate/index.mjs CHANGED
@@ -4739,7 +4739,7 @@ class BiggiveHeading {
4739
4739
  }; }
4740
4740
  }
4741
4741
 
4742
- const biggiveHeadingBannerCss = "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: 768px){.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: 768px){.sleeve{flex-direction:column;padding-left:20px;align-items:start;height:600px}.short .sleeve{height:400px}}.banner-link{text-decoration:none}.content-wrap{position:relative;padding-top:70px;padding-right:30px;padding-left:30px;padding-bottom:30px;box-sizing:border-box;width:100%;max-width:768px}@media (min-width: 768px){.content-wrap{margin-bottom:auto;margin-top:auto;margin-left:0;padding-top:30px;max-width:40%}}img.stacked{width:100%;height:100%;object-fit:cover}@media (min-width: 768px){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}";
4742
+ const biggiveHeadingBannerCss = "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: 768px){.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: 768px){.sleeve{flex-direction:column;padding-left:20px;align-items:start;height:600px}.short .sleeve{height:400px}}.banner-link{text-decoration:none}.content-wrap{position:relative;padding-top:70px;padding-right:50px;padding-left:30px;padding-bottom:30px;box-sizing:border-box;width:100%;max-width:768px}@media (min-width: 768px){.content-wrap{margin-bottom:auto;margin-top:auto;margin-left:0;padding-top:30px;max-width:40%}}img.stacked{width:100%;height:100%;object-fit:cover}@media (min-width: 768px){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}";
4743
4743
 
4744
4744
  /**
4745
4745
  * Heading banner component for use as a page header.
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@biggive/components",
3
3
  "_comment": "Version number below is automatically replaced during CircleCI build.",
4
- "version": "202512031112.0.0",
4
+ "version": "202512081017.0.0",
5
5
  "description": "Big Give Components",
6
6
  "main": "dist/index.cjs.js",
7
7
  "module": "dist/index.js",
@@ -67,7 +67,7 @@
67
67
  "jest-cli": "^29.7.0",
68
68
  "lint-staged": "^16.0.0",
69
69
  "prettier": "^3.1.1",
70
- "puppeteer": "24.31.*",
70
+ "puppeteer": "^24.32.0",
71
71
  "storybook": "^8.1.6"
72
72
  },
73
73
  "engines": {