@biggive/components 202508011504.0.0 → 202508011615.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.
- package/dist/biggive/biggive-heading-banner.entry.esm.js.map +1 -1
- package/dist/biggive/biggive.esm.js +1 -1
- package/dist/biggive/{p-453eeb33.entry.js → p-8423b699.entry.js} +2 -2
- package/dist/biggive/p-8423b699.entry.js.map +1 -0
- package/dist/cjs/biggive-heading-banner.cjs.entry.js +11 -8
- package/dist/cjs/biggive-heading-banner.cjs.entry.js.map +1 -1
- package/dist/cjs/biggive-heading-banner.entry.cjs.js.map +1 -1
- package/dist/collection/components/biggive-heading-banner/biggive-heading-banner.js +11 -8
- package/dist/collection/components/biggive-heading-banner/biggive-heading-banner.js.map +1 -1
- package/dist/components/biggive-heading-banner.js +11 -8
- package/dist/components/biggive-heading-banner.js.map +1 -1
- package/dist/esm/biggive-heading-banner.entry.js +11 -8
- package/dist/esm/biggive-heading-banner.entry.js.map +1 -1
- package/hydrate/index.js +11 -8
- package/hydrate/index.mjs +11 -8
- package/package.json +1 -1
- package/dist/biggive/p-453eeb33.entry.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"biggive-heading-banner.entry.esm.js","sources":["src/components/biggive-heading-banner/biggive-heading-banner.scss?tag=biggive-heading-banner&encapsulation=shadow","src/components/biggive-heading-banner/biggive-heading-banner.tsx"],"sourcesContent":[":host {\n display: contents;\n @include standard-font();\n}\n\n@include spacers();\n@include text-colours();\n\n.banner {\n font-size: 17px;\n background-size: cover;\n height: 600px;\n position: relative;\n overflow: hidden;\n\n &.short {\n height: 400px;\n }\n\n img.background {\n object-fit: cover;\n position: absolute;\n max-width: 2000px;\n width: 100%;\n height: 400px;\n left: 50%;\n transform: translateX(-50%);\n bottom: 0;\n display: none;\n @media (min-width: 450px) {\n display: block;\n bottom: initial;\n height: 100%;\n }\n }\n}\n\n.sleeve {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n max-width: 1200px;\n margin-left: auto;\n margin-right: auto;\n padding: 0;\n box-sizing: border-box;\n height: 100%;\n\n @media (min-width: #{$screen-mobile-max}) {\n flex-direction: column;\n }\n\n @media (min-width: #{$screen-mobile-max + 30px}) {\n // adding 30px to standard breakpoint to match padding.\n padding-left: 20px;\n align-items: start;\n height: 600px;\n }\n}\n\n@media (min-width: #{$screen-mobile-small + 30px}) {\n .short .sleeve {\n height: 400px;\n }\n}\n\n.content-wrap {\n position: relative;\n padding-top: 70px; // includes 30 extra on mobile to make space for overlapping 'main-message-wrap'\n padding-right: 30px;\n padding-left: 30px;\n padding-bottom: 30px;\n box-sizing: border-box;\n width: 100%;\n max-width: 450px;\n\n @media (min-width: #{$screen-mobile-small}) {\n margin-bottom: auto;\n margin-top: auto;\n padding-top: 40px;\n }\n\n @media (min-width: #{$screen-mobile-small + 30px}) {\n padding-top: 30px;\n margin-left: 0;\n }\n}\n\nimg.stacked {\n width: 100%;\n height: 100%;\n object-fit: cover;\n\n @media (min-width: #{$screen-mobile-small}) {\n display: none;\n }\n}\n\nh1.main-title {\n font-size: 47px;\n line-height: 60px;\n font-weight: bold;\n margin: 0 0 15px;\n padding: 0;\n}\n\n.slug {\n font-size: 20px;\n line-height: inherit;\n font-weight: bold;\n margin-bottom: -7px;\n}\n\n.teaser {\n margin: 0;\n padding: 0;\n}\n\n.logo {\n height: 100px;\n background-size: contain;\n background-repeat: no-repeat;\n background-position: left center;\n margin-bottom: 10px;\n\n img {\n width: auto;\n height: 100%;\n position: relative;\n }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * Heading banner component for use as a page header.\n *\n * This component provides a banner with a background image, optional logo, and text content.\n * It supports different heights and customizable colors.\n */\n@Component({\n tag: 'biggive-heading-banner',\n styleUrl: 'biggive-heading-banner.scss',\n shadow: true,\n})\nexport class BiggiveHeadingBanner {\n /**\n * Optional logo object with URL and alt text\n */\n @Prop() logo?: { url: string; alt?: string } | string;\n\n /**\n * Optional slightly smaller text to appear above the main title\n */\n @Prop() slug?: string = '';\n\n /**\n * Main title text for the banner\n */\n @Prop() mainTitle!: string;\n\n /**\n * URL for the main banner image\n */\n @Prop() mainImageUrl!: string | null;\n\n /**\n * Focal point for the image positioning\n * x and y values are percentages (0-100)\n */\n @Prop() focalPoint!: string | { x: number; y: number };\n\n /**\n * Optional teaser text that appears below the main title\n */\n @Prop() teaser!: string;\n\n /**\n * Background color for the banner\n */\n @Prop() backgroundColour!: string;\n\n /**\n * Background color for the text content area\n */\n @Prop() textBackgroundColour!: string;\n\n @Prop() slugColour!: string;\n\n @Prop() mainTitleColour!: string;\n\n @Prop() teaserColour!: string;\n\n /**\n * Height variant of the banner\n * 'tall' for full height, 'short' for reduced height\n */\n @Prop() height: 'short' | 'tall' = 'tall';\n\n /**\n * Takes a string that may contain any form of newlines, and returns an array that alternates\n * between substrings found between the newlines and <br/> elements as objects.\n */\n private lineBreakToBr(string: string | undefined): unknown[] {\n if (string == undefined) {\n return [];\n }\n\n return string\n .split(/\\r?\\n|\\r|\\n/g)\n .map(line => [line, <br />])\n .flat()\n .slice(0, -1);\n }\n\n private getParsedFocalPoint(): { x: number; y: number } {\n if (typeof this.focalPoint === 'string') {\n return JSON.parse(this.focalPoint);\n }\n return this.focalPoint;\n }\n\n private getParsedLogo(): { url: string; alt?: string } | undefined {\n if (this.logo === undefined) return undefined;\n if (typeof this.logo === 'string') {\n return JSON.parse(this.logo);\n }\n return this.logo;\n }\n\n render() {\n // Convert teaser text with line breaks to JSX\n const teaserLines = this.lineBreakToBr(this.teaser);\n\n // Ensure color values have # prefix if they're hex colors without it\n const bgColor = this.backgroundColour.startsWith('#') ? this.backgroundColour : `#${this.backgroundColour}`;\n const textBgColor = this.textBackgroundColour.startsWith('#') ? this.textBackgroundColour : `#${this.textBackgroundColour}`;\n const slugColour = this.slugColour.startsWith('#') ? this.slugColour : `#${this.slugColour}`;\n const mainTitleColour = this.mainTitleColour.startsWith('#') ? this.mainTitleColour : `#${this.mainTitleColour}`;\n const teaserColour = this.teaserColour.startsWith('#') ? this.teaserColour : `#${this.teaserColour}`;\n\n const logo = this.getParsedLogo();\n return (\n <div\n class={{\n banner: true,\n short: this.height === 'short',\n }}\n style={{\n 'background-color': bgColor,\n }}\n >\n {typeof this.mainImageUrl === 'string' && this.mainImageUrl !== '' ? (\n <img\n class=\"background\"\n src={this.mainImageUrl}\n alt=\"\"\n style={{\n 'object-position': `${this.getParsedFocalPoint().x}% ${this.getParsedFocalPoint().y}%`,\n }}\n />\n ) : null}\n <div class=\"sleeve\">\n <div\n class=\"content-wrap\"\n style={{\n 'background-color': textBgColor,\n }}\n >\n {logo ? (\n <div class=\"logo\">\n <img src={logo.url} alt={logo.alt || ''} />\n </div>\n ) : null}\n\n {this.slug != undefined ? (\n <div\n style={{\n color: slugColour,\n }}\n class=\"slug\"\n >\n {this.slug}\n </div>\n ) : null}\n\n <h1\n style={{\n color: mainTitleColour,\n }}\n class=\"main-title\"\n >\n {this.mainTitle}\n </h1>\n\n {this.teaser != undefined ? (\n <div\n class=\"teaser\"\n style={{\n color: teaserColour,\n }}\n >\n {teaserLines}\n </div>\n ) : null}\n </div>\n\n {typeof this.mainImageUrl === 'string' && this.mainImageUrl !== '' ? (\n <img\n class=\"stacked\"\n src={this.mainImageUrl}\n alt=\"\"\n style={{\n 'object-position': `${this.getParsedFocalPoint().x}% ${this.getParsedFocalPoint().y}%`,\n }}\n />\n ) : null}\n </div>\n </div>\n );\n }\n}\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"biggive-heading-banner.entry.esm.js","sources":["src/components/biggive-heading-banner/biggive-heading-banner.scss?tag=biggive-heading-banner&encapsulation=shadow","src/components/biggive-heading-banner/biggive-heading-banner.tsx"],"sourcesContent":[":host {\n display: contents;\n @include standard-font();\n}\n\n@include spacers();\n@include text-colours();\n\n.banner {\n font-size: 17px;\n background-size: cover;\n height: 600px;\n position: relative;\n overflow: hidden;\n\n &.short {\n height: 400px;\n }\n\n img.background {\n object-fit: cover;\n position: absolute;\n max-width: 2000px;\n width: 100%;\n height: 400px;\n left: 50%;\n transform: translateX(-50%);\n bottom: 0;\n display: none;\n @media (min-width: 450px) {\n display: block;\n bottom: initial;\n height: 100%;\n }\n }\n}\n\n.sleeve {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n max-width: 1200px;\n margin-left: auto;\n margin-right: auto;\n padding: 0;\n box-sizing: border-box;\n height: 100%;\n\n @media (min-width: #{$screen-mobile-max}) {\n flex-direction: column;\n }\n\n @media (min-width: #{$screen-mobile-max + 30px}) {\n // adding 30px to standard breakpoint to match padding.\n padding-left: 20px;\n align-items: start;\n height: 600px;\n }\n}\n\n@media (min-width: #{$screen-mobile-small + 30px}) {\n .short .sleeve {\n height: 400px;\n }\n}\n\n.content-wrap {\n position: relative;\n padding-top: 70px; // includes 30 extra on mobile to make space for overlapping 'main-message-wrap'\n padding-right: 30px;\n padding-left: 30px;\n padding-bottom: 30px;\n box-sizing: border-box;\n width: 100%;\n max-width: 450px;\n\n @media (min-width: #{$screen-mobile-small}) {\n margin-bottom: auto;\n margin-top: auto;\n padding-top: 40px;\n }\n\n @media (min-width: #{$screen-mobile-small + 30px}) {\n padding-top: 30px;\n margin-left: 0;\n }\n}\n\nimg.stacked {\n width: 100%;\n height: 100%;\n object-fit: cover;\n\n @media (min-width: #{$screen-mobile-small}) {\n display: none;\n }\n}\n\nh1.main-title {\n font-size: 47px;\n line-height: 60px;\n font-weight: bold;\n margin: 0 0 15px;\n padding: 0;\n}\n\n.slug {\n font-size: 20px;\n line-height: inherit;\n font-weight: bold;\n margin-bottom: -7px;\n}\n\n.teaser {\n margin: 0;\n padding: 0;\n}\n\n.logo {\n height: 100px;\n background-size: contain;\n background-repeat: no-repeat;\n background-position: left center;\n margin-bottom: 10px;\n\n img {\n width: auto;\n height: 100%;\n position: relative;\n }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * Heading banner component for use as a page header.\n *\n * This component provides a banner with a background image, optional logo, and text content.\n * It supports different heights and customizable colors.\n */\n@Component({\n tag: 'biggive-heading-banner',\n styleUrl: 'biggive-heading-banner.scss',\n shadow: true,\n})\nexport class BiggiveHeadingBanner {\n /**\n * Optional logo object with URL and alt text\n */\n @Prop() logo?: { url: string; alt?: string } | string;\n\n /**\n * Optional slightly smaller text to appear above the main title\n */\n @Prop() slug?: string = '';\n\n /**\n * Main title text for the banner\n */\n @Prop() mainTitle!: string;\n\n /**\n * URL for the main banner image\n */\n @Prop() mainImageUrl!: string | null;\n\n /**\n * Focal point for the image positioning\n * x and y values are percentages (0-100)\n */\n @Prop() focalPoint!: string | { x: number; y: number };\n\n /**\n * Optional teaser text that appears below the main title\n */\n @Prop() teaser!: string;\n\n /**\n * Background color for the banner\n */\n @Prop() backgroundColour!: string;\n\n /**\n * Background color for the text content area\n */\n @Prop() textBackgroundColour!: string;\n\n @Prop() slugColour!: string;\n\n @Prop() mainTitleColour!: string;\n\n @Prop() teaserColour!: string;\n\n /**\n * Height variant of the banner\n * 'tall' for full height, 'short' for reduced height\n */\n @Prop() height: 'short' | 'tall' = 'tall';\n\n /**\n * Takes a string that may contain any form of newlines, and returns an array that alternates\n * between substrings found between the newlines and <br/> elements as objects.\n */\n private lineBreakToBr(string: string | undefined): unknown[] {\n if (string == undefined) {\n return [];\n }\n\n return string\n .split(/\\r?\\n|\\r|\\n/g)\n .map(line => [line, <br />])\n .flat()\n .slice(0, -1);\n }\n\n private getParsedFocalPoint(): { x: number; y: number } {\n if (typeof this.focalPoint === 'string') {\n return JSON.parse(this.focalPoint);\n }\n return this.focalPoint;\n }\n\n private getParsedLogo(): { url: string; alt?: string } | undefined {\n if (this.logo === undefined) return undefined;\n if (typeof this.logo === 'string') {\n return JSON.parse(this.logo);\n }\n return this.logo;\n }\n\n render() {\n // Convert teaser text with line breaks to JSX\n const teaserLines = this.lineBreakToBr(this.teaser);\n\n // Ensure color values have # prefix if they're hex colors without it\n // not sure how but it seems we're sometimes doing at least an intiial render before the colour props are populated,\n // so using null-safe navigation to avoid a crash here.\n const bgColor = this.backgroundColour?.startsWith('#') ? this.backgroundColour : `#${this.backgroundColour}`;\n const textBgColor = this.textBackgroundColour?.startsWith('#') ? this.textBackgroundColour : `#${this.textBackgroundColour}`;\n const slugColour = this.slugColour?.startsWith('#') ? this.slugColour : `#${this.slugColour}`;\n const mainTitleColour = this.mainTitleColour?.startsWith('#') ? this.mainTitleColour : `#${this.mainTitleColour}`;\n const teaserColour = this.teaserColour?.startsWith('#') ? this.teaserColour : `#${this.teaserColour}`;\n\n const logo = this.getParsedLogo();\n return (\n <div\n class={{\n banner: true,\n short: this.height === 'short',\n }}\n style={{\n 'background-color': bgColor,\n }}\n >\n {typeof this.mainImageUrl === 'string' && this.mainImageUrl !== '' ? (\n <img\n class=\"background\"\n src={this.mainImageUrl}\n alt=\"\"\n style={{\n 'object-position': `${this.getParsedFocalPoint().x}% ${this.getParsedFocalPoint().y}%`,\n }}\n />\n ) : null}\n <div class=\"sleeve\">\n <div\n class=\"content-wrap\"\n style={{\n 'background-color': textBgColor,\n }}\n >\n {logo ? (\n <div class=\"logo\">\n <img src={logo.url} alt={logo.alt || ''} />\n </div>\n ) : null}\n\n {this.slug != undefined ? (\n <div\n style={{\n color: slugColour,\n }}\n class=\"slug\"\n >\n {this.slug}\n </div>\n ) : null}\n\n <h1\n style={{\n color: mainTitleColour,\n }}\n class=\"main-title\"\n >\n {this.mainTitle}\n </h1>\n\n {this.teaser != undefined ? (\n <div\n class=\"teaser\"\n style={{\n color: teaserColour,\n }}\n >\n {teaserLines}\n </div>\n ) : null}\n </div>\n\n {typeof this.mainImageUrl === 'string' && this.mainImageUrl !== '' ? (\n <img\n class=\"stacked\"\n src={this.mainImageUrl}\n alt=\"\"\n style={{\n 'object-position': `${this.getParsedFocalPoint().x}% ${this.getParsedFocalPoint().y}%`,\n }}\n />\n ) : null}\n </div>\n </div>\n );\n }\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,H as o,b as t}from"./p-Bw8i6zSc.js";export{s as setNonce}from"./p-Bw8i6zSc.js";import{g as l}from"./p-DQuL1Twl.js";var r=()=>{{a(o.prototype)}const t=import.meta.url;const l={};if(t!==""){l.resourcesUrl=new URL(".",t).href}return e(l)};var a=e=>{const o=e.cloneNode;e.cloneNode=function(e){if(this.nodeName==="TEMPLATE"){return o.call(this,e)}const t=o.call(this,false);const l=this.childNodes;if(e){for(let e=0;e<l.length;e++){if(l[e].nodeType!==2){t.appendChild(l[e].cloneNode(true))}}}return t}};r().then((async e=>{await l();return t(JSON.parse('[["p-bc53052f",[[257,"biggive-campaign-card",{"spaceBelow":[2,"space-below"],"campaignType":[1,"campaign-type"],"banner":[1],"campaignTitle":[1,"campaign-title"],"organisationName":[1,"organisation-name"],"primaryFigureLabel":[1,"primary-figure-label"],"primaryFigureAmount":[1,"primary-figure-amount"],"secondaryFigureLabel":[1,"secondary-figure-label"],"secondaryFigureAmount":[1,"secondary-figure-amount"],"progressBarCounter":[2,"progress-bar-counter"],"donateButtonLabel":[1,"donate-button-label"],"donateButtonUrl":[1,"donate-button-url"],"donateButtonColourScheme":[1,"donate-button-colour-scheme"],"moreInfoButtonLabel":[1,"more-info-button-label"],"moreInfoButtonUrl":[1,"more-info-button-url"],"moreInfoButtonColourScheme":[1,"more-info-button-colour-scheme"],"isFutureCampaign":[4,"is-future-campaign"],"isPastCampaign":[4,"is-past-campaign"],"datetime":[1]}]]],["p-a3144d26",[[257,"biggive-campaign-card-filter-grid",{"spaceBelow":[2,"space-below"],"intro":[1],"searchText":[1,"search-text"],"placeholderText":[1,"placeholder-text"],"buttonText":[1,"button-text"],"categoryOptions":[1,"category-options"],"beneficiaryOptions":[1,"beneficiary-options"],"locationOptions":[1,"location-options"],"selectedSortByOption":[1025,"selected-sort-by-option"],"selectedFilterCategory":[1025,"selected-filter-category"],"selectedFilterBeneficiary":[1025,"selected-filter-beneficiary"],"selectedFilterLocation":[1025,"selected-filter-location"],"filtersApplied":[32],"unfocusInputs":[64]}]]],["p-801b1332",[[257,"biggive-campaign-highlights",{"spaceBelow":[2,"space-below"],"banner":[1],"campaignTitle":[1,"campaign-title"],"primaryFigureLabel":[1,"primary-figure-label"],"primaryFigureAmount":[1,"primary-figure-amount"],"secondaryFigureLabel":[1,"secondary-figure-label"],"secondaryFigureAmount":[1,"secondary-figure-amount"],"progressBarCounter":[2,"progress-bar-counter"],"primaryStatIcon":[1,"primary-stat-icon"],"primaryStatText":[1,"primary-stat-text"],"secondaryStatIcon":[1,"secondary-stat-icon"],"secondaryStatText":[1,"secondary-stat-text"],"championName":[1,"champion-name"],"championUrl":[1,"champion-url"]}]]],["p-da5d01aa",[[257,"biggive-cookie-banner",{"autoOpenPreferences":[4,"auto-open-preferences"],"blogUriPrefix":[1,"blog-uri-prefix"],"previouslyAgreedCookiePreferences":[16,"previously-agreed-cookie-preferences"]},null,{"autoOpenPreferences":["autoOpenPreferencesIfRequested"]}]]],["p-8dec4d4c",[[257,"biggive-footer",{"headingLevel":[2,"heading-level"],"donateUrlPrefix":[1,"donate-url-prefix"],"blogUrlPrefix":[1,"blog-url-prefix"],"experienceUrlPrefix":[1,"experience-url-prefix"],"smallCharityWeekEnabled":[4,"small-charity-week-enabled"],"usePresetFooter":[4,"use-preset-footer"]}]]],["p-feb1ca0a",[[257,"biggive-main-menu",{"blogUrlPrefix":[1,"blog-url-prefix"],"donateUrlPrefix":[1,"donate-url-prefix"],"experienceUrlPrefix":[1,"experience-url-prefix"],"smallCharityWeekEnabled":[4,"small-charity-week-enabled"],"someCampaignHasHomePageRedirect":[4,"some-campaign-has-home-page-redirect"],"isLoggedIn":[4,"is-logged-in"],"closeMobileMenuFromOutside":[64]}]]],["p-232244c2",[[257,"philco-main-menu",{"philcoUrlPrefix":[1,"philco-url-prefix"],"closeMobileMenuFromOutside":[64]}]]],["p-f9fb0feb",[[257,"biggive-article-card",{"spaceBelow":[2,"space-below"],"backgroundColour":[1,"background-colour"],"backgroundImageUrl":[1,"background-image-url"],"slug":[1],"slugColour":[1,"slug-colour"],"date":[1],"dateColour":[1,"date-colour"],"mainTitle":[1,"main-title"],"mainTitleColour":[1,"main-title-colour"],"mainImageUrl":[1,"main-image-url"],"mainImageAltText":[1,"main-image-alt-text"],"image1Url":[1,"image-1-url"],"image1AltText":[1,"image-1-alt-text"],"image2Url":[1,"image-2-url"],"image2AltText":[1,"image-2-alt-text"],"imageLabel":[1,"image-label"],"imageLabelColour":[1,"image-label-colour"],"buttonLabel":[1,"button-label"],"buttonUrl":[1,"button-url"],"buttonColour":[1,"button-colour"],"clipBottomLeftCorner":[4,"clip-bottom-left-corner"],"clipTopRightCorner":[4,"clip-top-right-corner"]}]]],["p-0ba9c6b9",[[257,"biggive-basic-card",{"spaceBelow":[2,"space-below"],"siteDesign":[1,"site-design"],"backgroundColour":[1,"background-colour"],"backgroundImageUrl":[1,"background-image-url"],"cardColour":[1,"card-colour"],"textColour":[1,"text-colour"],"mainImageUrl":[1,"main-image-url"],"mainImageAltText":[1,"main-image-alt-text"],"mainTitle":[1,"main-title"],"subtitle":[1],"author":[1],"date":[1],"teaser":[1],"icon":[4],"iconColour":[1,"icon-colour"],"buttonAlign":[1,"button-align"],"buttonStyle":[1,"button-style"],"buttonLabel":[1,"button-label"],"buttonUrl":[1,"button-url"],"buttonColourScheme":[1,"button-colour-scheme"],"clipBottomLeftCorner":[4,"clip-bottom-left-corner"],"clipTopRightCorner":[4,"clip-top-right-corner"],"headingLevel":[2,"heading-level"],"addAnimation":[4,"add-animation"]}]]],["p-a2edb531",[[257,"biggive-call-to-action",{"spaceAbove":[2,"space-above"],"spaceBelow":[2,"space-below"],"defaultTextColour":[1,"default-text-colour"],"slugSize":[2,"slug-size"],"slugColour":[1,"slug-colour"],"slug":[1],"mainTitleColour":[1,"main-title-colour"],"mainTitleSize":[2,"main-title-size"],"mainTitle":[1,"main-title"],"subtitleSize":[2,"subtitle-size"],"subtitleColour":[1,"subtitle-colour"],"subtitle":[1],"teaserColour":[1,"teaser-colour"],"teaser":[1],"primaryButtonUrl":[1,"primary-button-url"],"primaryButtonLabel":[1,"primary-button-label"],"primaryButtonColourScheme":[1,"primary-button-colour-scheme"],"secondaryButtonUrl":[1,"secondary-button-url"],"secondaryButtonLabel":[1,"secondary-button-label"],"secondaryButtonColourScheme":[1,"secondary-button-colour-scheme"]}]]],["p-095433cc",[[257,"biggive-hero-image",{"spaceBelow":[2,"space-below"],"colourScheme":[1,"colour-scheme"],"slug":[1],"slugColour":[1,"slug-colour"],"logo":[1],"logoHeight":[2,"logo-height"],"logoAltText":[1,"logo-alt-text"],"mainImage":[1,"main-image"],"mainImageShape":[1,"main-image-shape"],"mainImageAlignHorizontal":[1,"main-image-align-horizontal"],"mainImageAlignVertical":[1,"main-image-align-vertical"],"mainTitle":[1,"main-title"],"mainTitleColour":[1,"main-title-colour"],"teaser":[1],"teaserColour":[1,"teaser-colour"],"buttonUrl":[1,"button-url"],"buttonLabel":[1,"button-label"],"buttonColourScheme":[1,"button-colour-scheme"]}]]],["p-438cd97b",[[257,"biggive-icon-button",{"spaceBelow":[2,"space-below"],"backgroundColour":[1,"background-colour"],"backgroundPadding":[2,"background-padding"],"text":[1],"textColour":[1,"text-colour"],"icon":[1],"url":[1],"openInNewTab":[4,"open-in-new-tab"],"size":[1],"arrow":[4],"arrowColour":[1,"arrow-colour"],"circle":[4],"shadow":[4],"centered":[4],"rounded":[4],"buttonId":[1,"button-id"]}]]],["p-b16d779d",[[257,"biggive-image-card",{"spaceBelow":[2,"space-below"],"backgroundColour":[1,"background-colour"],"mainImageUrl":[1,"main-image-url"],"mainImageAltText":[1,"main-image-alt-text"],"textAlign":[1,"text-align"],"teaser":[1],"teaserColour":[1,"teaser-colour"],"buttonAlign":[1,"button-align"],"buttonStyle":[1,"button-style"],"buttonLabel":[1,"button-label"],"buttonUrl":[1,"button-url"],"buttonColourScheme":[1,"button-colour-scheme"],"clipBottomLeftCorner":[4,"clip-bottom-left-corner"],"clipTopRightCorner":[4,"clip-top-right-corner"],"addAnimation":[4,"add-animation"]}]]],["p-cdbc0658",[[257,"biggive-image-feature",{"spaceBelow":[2,"space-below"],"defaultTextColour":[1,"default-text-colour"],"imageUrl":[1,"image-url"],"imageAltText":[1,"image-alt-text"],"slug":[1],"slugColour":[1,"slug-colour"],"mainTitle":[1,"main-title"],"mainTitleColour":[1,"main-title-colour"],"teaser":[1],"teaserColour":[1,"teaser-colour"],"buttonUrl":[1,"button-url"],"buttonLabel":[1,"button-label"],"buttonColourScheme":[1,"button-colour-scheme"]}]]],["p-3fe03531",[[257,"biggive-video-feature",{"spaceAbove":[2,"space-above"],"spaceBelow":[2,"space-below"],"defaultTextColour":[1,"default-text-colour"],"videoUrl":[1,"video-url"],"slug":[1],"slugColour":[1,"slug-colour"],"mainTitle":[1,"main-title"],"mainTitleColour":[1,"main-title-colour"],"teaser":[1],"teaserColour":[1,"teaser-colour"],"buttonUrl":[1,"button-url"],"buttonLabel":[1,"button-label"],"buttonColourScheme":[1,"button-colour-scheme"]}]]],["p-17ead927",[[257,"biggive-accordion",{"spaceBelow":[2,"space-below"],"textColour":[1,"text-colour"],"headingColour":[1,"heading-colour"],"children":[32]}]]],["p-b8e3a0c3",[[257,"biggive-accordion-entry",{"heading":[1]}]]],["p-ba97e1a7",[[257,"biggive-back-to-top"]]],["p-f18c6044",[[257,"biggive-biography-card",{"spaceBelow":[2,"space-below"],"borderWidth":[2,"border-width"],"imageUrl":[1,"image-url"],"imageStyle":[1,"image-style"],"textColour":[1,"text-colour"],"backgroundColour":[1,"background-colour"],"fullName":[1,"full-name"],"jobTitle":[1,"job-title"],"textAlign":[1,"text-align"],"ratio":[1],"circle":[4],"circleColour":[1,"circle-colour"],"rounded":[4],"url":[1]}]]],["p-9a616be5",[[257,"biggive-boxed-content",{"spaceBelow":[2,"space-below"],"verticalPadding":[2,"vertical-padding"],"horizontalPadding":[2,"horizontal-padding"],"backgroundColour":[1,"background-colour"],"shadow":[4]}]]],["p-671a00c2",[[257,"biggive-branded-image",{"spaceBelow":[2,"space-below"],"imageUrl":[1,"image-url"],"logoUrl":[1,"logo-url"],"slug":[1],"charityName":[1,"charity-name"],"charityLocation":[1,"charity-location"],"charityUrl":[1,"charity-url"]}]]],["p-7ea10d17",[[257,"biggive-container-card",{"spaceBelow":[2,"space-below"],"backgroundColour":[1,"background-colour"],"backgroundImageUrl":[1,"background-image-url"],"cardColour":[1,"card-colour"],"textColour":[1,"text-colour"],"clipBottomLeftCorner":[4,"clip-bottom-left-corner"],"clipTopRightCorner":[4,"clip-top-right-corner"],"headingLevel":[2,"heading-level"]}]]],["p-4a7c3666",[[257,"biggive-form"]]],["p-049a9e00",[[257,"biggive-formatted-text",{"spaceBelow":[2,"space-below"],"defaultTextColour":[1,"default-text-colour"],"maxWidth":[2,"max-width"],"siteDesign":[1,"site-design"]}]]],["p-4db2a4f5",[[257,"biggive-grid",{"spaceBelow":[2,"space-below"],"columnCount":[2,"column-count"],"spaceBetween":[4,"space-between"],"columnGap":[2,"column-gap"]}]]],["p-8ead1510",[[257,"biggive-heading",{"spaceAbove":[2,"space-above"],"spaceBelow":[2,"space-below"],"colour":[1],"htmlElement":[1,"html-element"],"size":[2],"align":[1],"text":[1],"icon":[4],"iconColour":[1,"icon-colour"],"siteDesign":[1,"site-design"]}]]],["p-453eeb33",[[257,"biggive-heading-banner",{"logo":[1],"slug":[1],"mainTitle":[1,"main-title"],"mainImageUrl":[1,"main-image-url"],"focalPoint":[1,"focal-point"],"teaser":[1],"backgroundColour":[1,"background-colour"],"textBackgroundColour":[1,"text-background-colour"],"slugColour":[1,"slug-colour"],"mainTitleColour":[1,"main-title-colour"],"teaserColour":[1,"teaser-colour"],"height":[1]}]]],["p-55e2c83a",[[257,"biggive-image",{"spaceAbove":[2,"space-above"],"spaceBelow":[2,"space-below"],"imageUrl":[1,"image-url"],"imageAltText":[1,"image-alt-text"],"width":[2],"height":[2],"sizeUnit":[1,"size-unit"]}]]],["p-ec5fee3c",[[257,"biggive-image-button",{"spaceBelow":[2,"space-below"],"backgroundColour":[1,"background-colour"],"backgroundPadding":[2,"background-padding"],"text":[1],"textColour":[1,"text-colour"],"imageUrl":[1,"image-url"],"imageStyle":[1,"image-style"],"url":[1],"openInNewTab":[4,"open-in-new-tab"],"size":[1],"arrow":[4],"arrowColour":[1,"arrow-colour"],"circle":[4],"shadow":[4],"centered":[4],"rounded":[4],"buttonId":[1,"button-id"]}]]],["p-d70de323",[[257,"biggive-nav-group",{"inline":[4]}]]],["p-a7d8778c",[[257,"biggive-nav-item",{"url":[1],"label":[1],"iconColour":[1,"icon-colour"]}]]],["p-7830b031",[[257,"biggive-page-column"]]],["p-b75ac678",[[257,"biggive-page-columns",{"spaceBelow":[2,"space-below"]}]]],["p-98355c54",[[257,"biggive-page-section",{"spaceBelow":[2,"space-below"],"sectionStyleTop":[1,"section-style-top"],"sectionStyleBottom":[1,"section-style-bottom"],"colourScheme":[1,"colour-scheme"],"maxWidth":[2,"max-width"],"primaryFullBleed":[4,"primary-full-bleed"]}]]],["p-7b68bd95",[[257,"biggive-quote",{"spaceBelow":[2,"space-below"],"defaultTextColour":[1,"default-text-colour"],"quote":[1],"attribution":[1],"quoteIconColour":[1,"quote-icon-colour"],"siteDesign":[1,"site-design"]}]]],["p-2c82c668",[[257,"biggive-sheet",{"sheetId":[1,"sheet-id"],"backgroundColour":[1,"background-colour"],"textColour":[1,"text-colour"]}]]],["p-e8bb3dc0",[[257,"biggive-tab",{"tabTitle":[1,"tab-title"]}]]],["p-69427d22",[[257,"biggive-tabbed-content",{"spaceBelow":[2,"space-below"],"textColour":[1,"text-colour"],"selectedTextColour":[1,"selected-text-colour"],"navigationHighlightColour":[1,"navigation-highlight-colour"],"selectedNavigationHighlightColour":[1,"selected-navigation-highlight-colour"],"buttonBackgroundColour":[1,"button-background-colour"],"buttonIconColour":[1,"button-icon-colour"]}]]],["p-52d0561b",[[257,"biggive-table",{"spaceBelow":[2,"space-below"],"headerTextColour":[1,"header-text-colour"],"headerBackgroundColour":[1,"header-background-colour"],"bodyTextColour":[1,"body-text-colour"],"bodyBackgroundColour":[1,"body-background-colour"]}]]],["p-5bc3fd16",[[257,"biggive-text-input",{"currency":[1],"spaceBelow":[2,"space-below"],"selectStyle":[1,"select-style"],"siteDesign":[1,"site-design"]}]]],["p-fcb0a029",[[257,"biggive-timeline",{"spaceBelow":[2,"space-below"],"textColour":[1,"text-colour"],"selectedTextColour":[1,"selected-text-colour"],"navigationHighlightColour":[1,"navigation-highlight-colour"],"selectedNavigationHighlightColour":[1,"selected-navigation-highlight-colour"],"buttonBackgroundColour":[1,"button-background-colour"],"buttonIconColour":[1,"button-icon-colour"],"entryBackgroundColour":[1,"entry-background-colour"],"entryHighlightColour":[1,"entry-highlight-colour"],"entryDateColour":[1,"entry-date-colour"],"entryTitleColour":[1,"entry-title-colour"],"entryTextColour":[1,"entry-text-colour"]}]]],["p-881b7f5a",[[257,"biggive-timeline-entry",{"date":[1],"heading":[1]}]]],["p-ba1e89b7",[[257,"biggive-totalizer",{"spaceBelow":[2,"space-below"],"primaryColour":[1,"primary-colour"],"primaryTextColour":[1,"primary-text-colour"],"secondaryColour":[1,"secondary-colour"],"secondaryTextColour":[1,"secondary-text-colour"],"mainMessage":[1,"main-message"]}]]],["p-0ec3857b",[[257,"biggive-totalizer-ticker-item",{"figure":[1],"label":[1]}]]],["p-18dc7efa",[[257,"biggive-video",{"spaceAbove":[2,"space-above"],"spaceBelow":[2,"space-below"],"videoUrl":[1,"video-url"]}]]],["p-f8fc5ed8",[[257,"philco-footer",{"headingLevel":[2,"heading-level"],"philcoUrlPrefix":[1,"philco-url-prefix"]}]]],["p-8218058a",[[257,"biggive-form-field-select",{"selectionChanged":[16,"selection-changed"],"prompt":[1],"selectedValue":[1025,"selected-value"],"selectedLabel":[1025,"selected-label"],"options":[1],"selectStyle":[1,"select-style"],"backgroundColour":[1,"background-colour"],"selectedOptionColour":[1,"selected-option-colour"],"selectElementId":[1,"select-element-id"],"spaceBelow":[2,"space-below"],"placeholder":[1]}]]],["p-01e3e032",[[257,"biggive-popup",{"modalClosedCallback":[16,"modal-closed-callback"],"openFromOutside":[64],"closeFromOutside":[64]}]]],["p-dec8ce1a",[[257,"biggive-progress-bar",{"spaceBelow":[2,"space-below"],"colourScheme":[1,"colour-scheme"],"counter":[2]}]]],["p-20458ccf",[[257,"biggive-social-icon",{"service":[1],"labelPrefix":[1,"label-prefix"],"backgroundColour":[1,"background-colour"],"iconColour":[1,"icon-colour"],"wide":[4],"url":[1]}]]],["p-8aa5cd67",[[257,"biggive-misc-icon",{"backgroundColour":[1,"background-colour"],"iconColour":[1,"icon-colour"],"icon":[1],"url":[1]}]]],["p-f33df851",[[257,"biggive-button",{"spaceBelow":[2,"space-below"],"colourScheme":[1,"colour-scheme"],"label":[1],"url":[1],"openInNewTab":[4,"open-in-new-tab"],"fullWidth":[4,"full-width"],"size":[1],"rounded":[4],"centered":[4],"buttonId":[1,"button-id"],"siteDesign":[1,"site-design"],"disabled":[4]}]]]]'),e)}));
|
|
1
|
+
import{p as e,H as o,b as t}from"./p-Bw8i6zSc.js";export{s as setNonce}from"./p-Bw8i6zSc.js";import{g as l}from"./p-DQuL1Twl.js";var r=()=>{{a(o.prototype)}const t=import.meta.url;const l={};if(t!==""){l.resourcesUrl=new URL(".",t).href}return e(l)};var a=e=>{const o=e.cloneNode;e.cloneNode=function(e){if(this.nodeName==="TEMPLATE"){return o.call(this,e)}const t=o.call(this,false);const l=this.childNodes;if(e){for(let e=0;e<l.length;e++){if(l[e].nodeType!==2){t.appendChild(l[e].cloneNode(true))}}}return t}};r().then((async e=>{await l();return t(JSON.parse('[["p-bc53052f",[[257,"biggive-campaign-card",{"spaceBelow":[2,"space-below"],"campaignType":[1,"campaign-type"],"banner":[1],"campaignTitle":[1,"campaign-title"],"organisationName":[1,"organisation-name"],"primaryFigureLabel":[1,"primary-figure-label"],"primaryFigureAmount":[1,"primary-figure-amount"],"secondaryFigureLabel":[1,"secondary-figure-label"],"secondaryFigureAmount":[1,"secondary-figure-amount"],"progressBarCounter":[2,"progress-bar-counter"],"donateButtonLabel":[1,"donate-button-label"],"donateButtonUrl":[1,"donate-button-url"],"donateButtonColourScheme":[1,"donate-button-colour-scheme"],"moreInfoButtonLabel":[1,"more-info-button-label"],"moreInfoButtonUrl":[1,"more-info-button-url"],"moreInfoButtonColourScheme":[1,"more-info-button-colour-scheme"],"isFutureCampaign":[4,"is-future-campaign"],"isPastCampaign":[4,"is-past-campaign"],"datetime":[1]}]]],["p-a3144d26",[[257,"biggive-campaign-card-filter-grid",{"spaceBelow":[2,"space-below"],"intro":[1],"searchText":[1,"search-text"],"placeholderText":[1,"placeholder-text"],"buttonText":[1,"button-text"],"categoryOptions":[1,"category-options"],"beneficiaryOptions":[1,"beneficiary-options"],"locationOptions":[1,"location-options"],"selectedSortByOption":[1025,"selected-sort-by-option"],"selectedFilterCategory":[1025,"selected-filter-category"],"selectedFilterBeneficiary":[1025,"selected-filter-beneficiary"],"selectedFilterLocation":[1025,"selected-filter-location"],"filtersApplied":[32],"unfocusInputs":[64]}]]],["p-801b1332",[[257,"biggive-campaign-highlights",{"spaceBelow":[2,"space-below"],"banner":[1],"campaignTitle":[1,"campaign-title"],"primaryFigureLabel":[1,"primary-figure-label"],"primaryFigureAmount":[1,"primary-figure-amount"],"secondaryFigureLabel":[1,"secondary-figure-label"],"secondaryFigureAmount":[1,"secondary-figure-amount"],"progressBarCounter":[2,"progress-bar-counter"],"primaryStatIcon":[1,"primary-stat-icon"],"primaryStatText":[1,"primary-stat-text"],"secondaryStatIcon":[1,"secondary-stat-icon"],"secondaryStatText":[1,"secondary-stat-text"],"championName":[1,"champion-name"],"championUrl":[1,"champion-url"]}]]],["p-da5d01aa",[[257,"biggive-cookie-banner",{"autoOpenPreferences":[4,"auto-open-preferences"],"blogUriPrefix":[1,"blog-uri-prefix"],"previouslyAgreedCookiePreferences":[16,"previously-agreed-cookie-preferences"]},null,{"autoOpenPreferences":["autoOpenPreferencesIfRequested"]}]]],["p-8dec4d4c",[[257,"biggive-footer",{"headingLevel":[2,"heading-level"],"donateUrlPrefix":[1,"donate-url-prefix"],"blogUrlPrefix":[1,"blog-url-prefix"],"experienceUrlPrefix":[1,"experience-url-prefix"],"smallCharityWeekEnabled":[4,"small-charity-week-enabled"],"usePresetFooter":[4,"use-preset-footer"]}]]],["p-feb1ca0a",[[257,"biggive-main-menu",{"blogUrlPrefix":[1,"blog-url-prefix"],"donateUrlPrefix":[1,"donate-url-prefix"],"experienceUrlPrefix":[1,"experience-url-prefix"],"smallCharityWeekEnabled":[4,"small-charity-week-enabled"],"someCampaignHasHomePageRedirect":[4,"some-campaign-has-home-page-redirect"],"isLoggedIn":[4,"is-logged-in"],"closeMobileMenuFromOutside":[64]}]]],["p-232244c2",[[257,"philco-main-menu",{"philcoUrlPrefix":[1,"philco-url-prefix"],"closeMobileMenuFromOutside":[64]}]]],["p-f9fb0feb",[[257,"biggive-article-card",{"spaceBelow":[2,"space-below"],"backgroundColour":[1,"background-colour"],"backgroundImageUrl":[1,"background-image-url"],"slug":[1],"slugColour":[1,"slug-colour"],"date":[1],"dateColour":[1,"date-colour"],"mainTitle":[1,"main-title"],"mainTitleColour":[1,"main-title-colour"],"mainImageUrl":[1,"main-image-url"],"mainImageAltText":[1,"main-image-alt-text"],"image1Url":[1,"image-1-url"],"image1AltText":[1,"image-1-alt-text"],"image2Url":[1,"image-2-url"],"image2AltText":[1,"image-2-alt-text"],"imageLabel":[1,"image-label"],"imageLabelColour":[1,"image-label-colour"],"buttonLabel":[1,"button-label"],"buttonUrl":[1,"button-url"],"buttonColour":[1,"button-colour"],"clipBottomLeftCorner":[4,"clip-bottom-left-corner"],"clipTopRightCorner":[4,"clip-top-right-corner"]}]]],["p-0ba9c6b9",[[257,"biggive-basic-card",{"spaceBelow":[2,"space-below"],"siteDesign":[1,"site-design"],"backgroundColour":[1,"background-colour"],"backgroundImageUrl":[1,"background-image-url"],"cardColour":[1,"card-colour"],"textColour":[1,"text-colour"],"mainImageUrl":[1,"main-image-url"],"mainImageAltText":[1,"main-image-alt-text"],"mainTitle":[1,"main-title"],"subtitle":[1],"author":[1],"date":[1],"teaser":[1],"icon":[4],"iconColour":[1,"icon-colour"],"buttonAlign":[1,"button-align"],"buttonStyle":[1,"button-style"],"buttonLabel":[1,"button-label"],"buttonUrl":[1,"button-url"],"buttonColourScheme":[1,"button-colour-scheme"],"clipBottomLeftCorner":[4,"clip-bottom-left-corner"],"clipTopRightCorner":[4,"clip-top-right-corner"],"headingLevel":[2,"heading-level"],"addAnimation":[4,"add-animation"]}]]],["p-a2edb531",[[257,"biggive-call-to-action",{"spaceAbove":[2,"space-above"],"spaceBelow":[2,"space-below"],"defaultTextColour":[1,"default-text-colour"],"slugSize":[2,"slug-size"],"slugColour":[1,"slug-colour"],"slug":[1],"mainTitleColour":[1,"main-title-colour"],"mainTitleSize":[2,"main-title-size"],"mainTitle":[1,"main-title"],"subtitleSize":[2,"subtitle-size"],"subtitleColour":[1,"subtitle-colour"],"subtitle":[1],"teaserColour":[1,"teaser-colour"],"teaser":[1],"primaryButtonUrl":[1,"primary-button-url"],"primaryButtonLabel":[1,"primary-button-label"],"primaryButtonColourScheme":[1,"primary-button-colour-scheme"],"secondaryButtonUrl":[1,"secondary-button-url"],"secondaryButtonLabel":[1,"secondary-button-label"],"secondaryButtonColourScheme":[1,"secondary-button-colour-scheme"]}]]],["p-095433cc",[[257,"biggive-hero-image",{"spaceBelow":[2,"space-below"],"colourScheme":[1,"colour-scheme"],"slug":[1],"slugColour":[1,"slug-colour"],"logo":[1],"logoHeight":[2,"logo-height"],"logoAltText":[1,"logo-alt-text"],"mainImage":[1,"main-image"],"mainImageShape":[1,"main-image-shape"],"mainImageAlignHorizontal":[1,"main-image-align-horizontal"],"mainImageAlignVertical":[1,"main-image-align-vertical"],"mainTitle":[1,"main-title"],"mainTitleColour":[1,"main-title-colour"],"teaser":[1],"teaserColour":[1,"teaser-colour"],"buttonUrl":[1,"button-url"],"buttonLabel":[1,"button-label"],"buttonColourScheme":[1,"button-colour-scheme"]}]]],["p-438cd97b",[[257,"biggive-icon-button",{"spaceBelow":[2,"space-below"],"backgroundColour":[1,"background-colour"],"backgroundPadding":[2,"background-padding"],"text":[1],"textColour":[1,"text-colour"],"icon":[1],"url":[1],"openInNewTab":[4,"open-in-new-tab"],"size":[1],"arrow":[4],"arrowColour":[1,"arrow-colour"],"circle":[4],"shadow":[4],"centered":[4],"rounded":[4],"buttonId":[1,"button-id"]}]]],["p-b16d779d",[[257,"biggive-image-card",{"spaceBelow":[2,"space-below"],"backgroundColour":[1,"background-colour"],"mainImageUrl":[1,"main-image-url"],"mainImageAltText":[1,"main-image-alt-text"],"textAlign":[1,"text-align"],"teaser":[1],"teaserColour":[1,"teaser-colour"],"buttonAlign":[1,"button-align"],"buttonStyle":[1,"button-style"],"buttonLabel":[1,"button-label"],"buttonUrl":[1,"button-url"],"buttonColourScheme":[1,"button-colour-scheme"],"clipBottomLeftCorner":[4,"clip-bottom-left-corner"],"clipTopRightCorner":[4,"clip-top-right-corner"],"addAnimation":[4,"add-animation"]}]]],["p-cdbc0658",[[257,"biggive-image-feature",{"spaceBelow":[2,"space-below"],"defaultTextColour":[1,"default-text-colour"],"imageUrl":[1,"image-url"],"imageAltText":[1,"image-alt-text"],"slug":[1],"slugColour":[1,"slug-colour"],"mainTitle":[1,"main-title"],"mainTitleColour":[1,"main-title-colour"],"teaser":[1],"teaserColour":[1,"teaser-colour"],"buttonUrl":[1,"button-url"],"buttonLabel":[1,"button-label"],"buttonColourScheme":[1,"button-colour-scheme"]}]]],["p-3fe03531",[[257,"biggive-video-feature",{"spaceAbove":[2,"space-above"],"spaceBelow":[2,"space-below"],"defaultTextColour":[1,"default-text-colour"],"videoUrl":[1,"video-url"],"slug":[1],"slugColour":[1,"slug-colour"],"mainTitle":[1,"main-title"],"mainTitleColour":[1,"main-title-colour"],"teaser":[1],"teaserColour":[1,"teaser-colour"],"buttonUrl":[1,"button-url"],"buttonLabel":[1,"button-label"],"buttonColourScheme":[1,"button-colour-scheme"]}]]],["p-17ead927",[[257,"biggive-accordion",{"spaceBelow":[2,"space-below"],"textColour":[1,"text-colour"],"headingColour":[1,"heading-colour"],"children":[32]}]]],["p-b8e3a0c3",[[257,"biggive-accordion-entry",{"heading":[1]}]]],["p-ba97e1a7",[[257,"biggive-back-to-top"]]],["p-f18c6044",[[257,"biggive-biography-card",{"spaceBelow":[2,"space-below"],"borderWidth":[2,"border-width"],"imageUrl":[1,"image-url"],"imageStyle":[1,"image-style"],"textColour":[1,"text-colour"],"backgroundColour":[1,"background-colour"],"fullName":[1,"full-name"],"jobTitle":[1,"job-title"],"textAlign":[1,"text-align"],"ratio":[1],"circle":[4],"circleColour":[1,"circle-colour"],"rounded":[4],"url":[1]}]]],["p-9a616be5",[[257,"biggive-boxed-content",{"spaceBelow":[2,"space-below"],"verticalPadding":[2,"vertical-padding"],"horizontalPadding":[2,"horizontal-padding"],"backgroundColour":[1,"background-colour"],"shadow":[4]}]]],["p-671a00c2",[[257,"biggive-branded-image",{"spaceBelow":[2,"space-below"],"imageUrl":[1,"image-url"],"logoUrl":[1,"logo-url"],"slug":[1],"charityName":[1,"charity-name"],"charityLocation":[1,"charity-location"],"charityUrl":[1,"charity-url"]}]]],["p-7ea10d17",[[257,"biggive-container-card",{"spaceBelow":[2,"space-below"],"backgroundColour":[1,"background-colour"],"backgroundImageUrl":[1,"background-image-url"],"cardColour":[1,"card-colour"],"textColour":[1,"text-colour"],"clipBottomLeftCorner":[4,"clip-bottom-left-corner"],"clipTopRightCorner":[4,"clip-top-right-corner"],"headingLevel":[2,"heading-level"]}]]],["p-4a7c3666",[[257,"biggive-form"]]],["p-049a9e00",[[257,"biggive-formatted-text",{"spaceBelow":[2,"space-below"],"defaultTextColour":[1,"default-text-colour"],"maxWidth":[2,"max-width"],"siteDesign":[1,"site-design"]}]]],["p-4db2a4f5",[[257,"biggive-grid",{"spaceBelow":[2,"space-below"],"columnCount":[2,"column-count"],"spaceBetween":[4,"space-between"],"columnGap":[2,"column-gap"]}]]],["p-8ead1510",[[257,"biggive-heading",{"spaceAbove":[2,"space-above"],"spaceBelow":[2,"space-below"],"colour":[1],"htmlElement":[1,"html-element"],"size":[2],"align":[1],"text":[1],"icon":[4],"iconColour":[1,"icon-colour"],"siteDesign":[1,"site-design"]}]]],["p-8423b699",[[257,"biggive-heading-banner",{"logo":[1],"slug":[1],"mainTitle":[1,"main-title"],"mainImageUrl":[1,"main-image-url"],"focalPoint":[1,"focal-point"],"teaser":[1],"backgroundColour":[1,"background-colour"],"textBackgroundColour":[1,"text-background-colour"],"slugColour":[1,"slug-colour"],"mainTitleColour":[1,"main-title-colour"],"teaserColour":[1,"teaser-colour"],"height":[1]}]]],["p-55e2c83a",[[257,"biggive-image",{"spaceAbove":[2,"space-above"],"spaceBelow":[2,"space-below"],"imageUrl":[1,"image-url"],"imageAltText":[1,"image-alt-text"],"width":[2],"height":[2],"sizeUnit":[1,"size-unit"]}]]],["p-ec5fee3c",[[257,"biggive-image-button",{"spaceBelow":[2,"space-below"],"backgroundColour":[1,"background-colour"],"backgroundPadding":[2,"background-padding"],"text":[1],"textColour":[1,"text-colour"],"imageUrl":[1,"image-url"],"imageStyle":[1,"image-style"],"url":[1],"openInNewTab":[4,"open-in-new-tab"],"size":[1],"arrow":[4],"arrowColour":[1,"arrow-colour"],"circle":[4],"shadow":[4],"centered":[4],"rounded":[4],"buttonId":[1,"button-id"]}]]],["p-d70de323",[[257,"biggive-nav-group",{"inline":[4]}]]],["p-a7d8778c",[[257,"biggive-nav-item",{"url":[1],"label":[1],"iconColour":[1,"icon-colour"]}]]],["p-7830b031",[[257,"biggive-page-column"]]],["p-b75ac678",[[257,"biggive-page-columns",{"spaceBelow":[2,"space-below"]}]]],["p-98355c54",[[257,"biggive-page-section",{"spaceBelow":[2,"space-below"],"sectionStyleTop":[1,"section-style-top"],"sectionStyleBottom":[1,"section-style-bottom"],"colourScheme":[1,"colour-scheme"],"maxWidth":[2,"max-width"],"primaryFullBleed":[4,"primary-full-bleed"]}]]],["p-7b68bd95",[[257,"biggive-quote",{"spaceBelow":[2,"space-below"],"defaultTextColour":[1,"default-text-colour"],"quote":[1],"attribution":[1],"quoteIconColour":[1,"quote-icon-colour"],"siteDesign":[1,"site-design"]}]]],["p-2c82c668",[[257,"biggive-sheet",{"sheetId":[1,"sheet-id"],"backgroundColour":[1,"background-colour"],"textColour":[1,"text-colour"]}]]],["p-e8bb3dc0",[[257,"biggive-tab",{"tabTitle":[1,"tab-title"]}]]],["p-69427d22",[[257,"biggive-tabbed-content",{"spaceBelow":[2,"space-below"],"textColour":[1,"text-colour"],"selectedTextColour":[1,"selected-text-colour"],"navigationHighlightColour":[1,"navigation-highlight-colour"],"selectedNavigationHighlightColour":[1,"selected-navigation-highlight-colour"],"buttonBackgroundColour":[1,"button-background-colour"],"buttonIconColour":[1,"button-icon-colour"]}]]],["p-52d0561b",[[257,"biggive-table",{"spaceBelow":[2,"space-below"],"headerTextColour":[1,"header-text-colour"],"headerBackgroundColour":[1,"header-background-colour"],"bodyTextColour":[1,"body-text-colour"],"bodyBackgroundColour":[1,"body-background-colour"]}]]],["p-5bc3fd16",[[257,"biggive-text-input",{"currency":[1],"spaceBelow":[2,"space-below"],"selectStyle":[1,"select-style"],"siteDesign":[1,"site-design"]}]]],["p-fcb0a029",[[257,"biggive-timeline",{"spaceBelow":[2,"space-below"],"textColour":[1,"text-colour"],"selectedTextColour":[1,"selected-text-colour"],"navigationHighlightColour":[1,"navigation-highlight-colour"],"selectedNavigationHighlightColour":[1,"selected-navigation-highlight-colour"],"buttonBackgroundColour":[1,"button-background-colour"],"buttonIconColour":[1,"button-icon-colour"],"entryBackgroundColour":[1,"entry-background-colour"],"entryHighlightColour":[1,"entry-highlight-colour"],"entryDateColour":[1,"entry-date-colour"],"entryTitleColour":[1,"entry-title-colour"],"entryTextColour":[1,"entry-text-colour"]}]]],["p-881b7f5a",[[257,"biggive-timeline-entry",{"date":[1],"heading":[1]}]]],["p-ba1e89b7",[[257,"biggive-totalizer",{"spaceBelow":[2,"space-below"],"primaryColour":[1,"primary-colour"],"primaryTextColour":[1,"primary-text-colour"],"secondaryColour":[1,"secondary-colour"],"secondaryTextColour":[1,"secondary-text-colour"],"mainMessage":[1,"main-message"]}]]],["p-0ec3857b",[[257,"biggive-totalizer-ticker-item",{"figure":[1],"label":[1]}]]],["p-18dc7efa",[[257,"biggive-video",{"spaceAbove":[2,"space-above"],"spaceBelow":[2,"space-below"],"videoUrl":[1,"video-url"]}]]],["p-f8fc5ed8",[[257,"philco-footer",{"headingLevel":[2,"heading-level"],"philcoUrlPrefix":[1,"philco-url-prefix"]}]]],["p-8218058a",[[257,"biggive-form-field-select",{"selectionChanged":[16,"selection-changed"],"prompt":[1],"selectedValue":[1025,"selected-value"],"selectedLabel":[1025,"selected-label"],"options":[1],"selectStyle":[1,"select-style"],"backgroundColour":[1,"background-colour"],"selectedOptionColour":[1,"selected-option-colour"],"selectElementId":[1,"select-element-id"],"spaceBelow":[2,"space-below"],"placeholder":[1]}]]],["p-01e3e032",[[257,"biggive-popup",{"modalClosedCallback":[16,"modal-closed-callback"],"openFromOutside":[64],"closeFromOutside":[64]}]]],["p-dec8ce1a",[[257,"biggive-progress-bar",{"spaceBelow":[2,"space-below"],"colourScheme":[1,"colour-scheme"],"counter":[2]}]]],["p-20458ccf",[[257,"biggive-social-icon",{"service":[1],"labelPrefix":[1,"label-prefix"],"backgroundColour":[1,"background-colour"],"iconColour":[1,"icon-colour"],"wide":[4],"url":[1]}]]],["p-8aa5cd67",[[257,"biggive-misc-icon",{"backgroundColour":[1,"background-colour"],"iconColour":[1,"icon-colour"],"icon":[1],"url":[1]}]]],["p-f33df851",[[257,"biggive-button",{"spaceBelow":[2,"space-below"],"colourScheme":[1,"colour-scheme"],"label":[1],"url":[1],"openInNewTab":[4,"open-in-new-tab"],"fullWidth":[4,"full-width"],"size":[1],"rounded":[4],"centered":[4],"buttonId":[1,"button-id"],"siteDesign":[1,"site-design"],"disabled":[4]}]]]]'),e)}));
|
|
2
2
|
//# sourceMappingURL=biggive.esm.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as o,h as e}from"./p-Bw8i6zSc.js";const t='a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}:host{display:contents;font-family:"Euclid Triangle", sans-serif;font-size:17px;line-height:24px}.space-above-0{margin-top:0}.space-above-1{margin-top:5px}.space-above-2{margin-top:10px}.space-above-3{margin-top:15px}.space-above-4{margin-top:30px}.space-above-5{margin-top:45px}.space-above-6{margin-top:60px}.space-below-0{margin-bottom:0}.space-below-1{margin-bottom:5px}.space-below-2{margin-bottom:10px}.space-below-3{margin-bottom:15px}.space-below-4{margin-bottom:30px}.space-below-5{margin-bottom:45px}.space-below-6{margin-bottom:60px}.text-colour-hover-primary:hover,.text-colour-primary{color:#2C089B}.text-colour-hover-secondary:hover,.text-colour-secondary{color:#2AF135}.text-colour-hover-tertiary:hover,.text-colour-tertiary{color:#FF7272}.text-colour-hover-brand-cc-red:hover,.text-colour-brand-cc-red{color:#B30510}.text-colour-hover-brand-wgmf-purple:hover,.text-colour-brand-wgmf-purple{color:#6E0887}.text-colour-hover-brand-gmf-green:hover,.text-colour-brand-gmf-green{color:#50B400}.text-colour-hover-brand-er-green:hover,.text-colour-brand-er-green{color:#50B400}.text-colour-hover-brand-er-dark-green:hover,.text-colour-brand-er-dark-green{color:#002413}.text-colour-hover-brand-er-dark-blue:hover,.text-colour-brand-er-dark-blue{color:#0c0068}.text-colour-hover-brand-er-teal:hover,.text-colour-brand-er-teal{color:#00a76d}.text-colour-hover-brand-emf-yellow:hover,.text-colour-brand-emf-yellow{color:#FFE500}.text-colour-hover-brand-c4c-orange:hover,.text-colour-brand-c4c-orange{color:#F07D00}.text-colour-hover-brand-afa-pink:hover,.text-colour-brand-afa-pink{color:#BF387D}.text-colour-hover-brand-scw-magenta:hover,.text-colour-brand-scw-magenta{color:#EE2C65}.text-colour-hover-brand-mhf-turquoise:hover,.text-colour-brand-mhf-turquoise{color:#62CFC9}.text-colour-hover-brand-grey:hover,.text-colour-brand-grey{color:#CBC8C8}.text-colour-hover-white:hover,.text-colour-white{color:#FFFFFF}.text-colour-hover-black:hover,.text-colour-black{color:#000000}.text-colour-hover-grey-extra-light:hover,.text-colour-grey-extra-light{color:#D7D7D7}.text-colour-hover-grey-light:hover,.text-colour-grey-light{color:#E8E8E8}.text-colour-hover-grey-medium:hover,.text-colour-grey-medium{color:#8A8A8A}.text-colour-hover-grey-dark:hover,.text-colour-grey-dark{color:#4A4A4A}.text-colour-hover-philco-orange:hover,.text-colour-philco-orange{color:#f18a00}.text-colour-hover-philco-gray-90:hover,.text-colour-philco-gray-90{color:#1d1d1B}.text-colour-hover-philco-gray-70:hover,.text-colour-philco-gray-70{color:#7D7D7D}.text-colour-hover-philco-white:hover,.text-colour-philco-white{color:#FFFFFF}.text-colour-hover-philco-success-green:hover,.text-colour-philco-success-green{color:#1Ec691}.text-colour-hover-philco-error-coral:hover,.text-colour-philco-error-coral{color:#F54242}.text-colour-hover-philco-gray-30:hover,.text-colour-philco-gray-30{color:#BBBBBB}.text-colour-hover-philco-gray-20:hover,.text-colour-philco-gray-20{color:#F6F6F6}.banner{font-size:17px;background-size:cover;height:600px;position:relative;overflow:hidden}.banner.short{height:400px}.banner img.background{object-fit:cover;position:absolute;max-width:2000px;width:100%;height:400px;left:50%;transform:translateX(-50%);bottom:0;display:none}@media (min-width: 450px){.banner img.background{display:block;bottom:initial;height:100%}}.sleeve{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;max-width:1200px;margin-left:auto;margin-right:auto;padding:0;box-sizing:border-box;height:100%}@media (min-width: 576px){.sleeve{flex-direction:column}}@media (min-width: 606px){.sleeve{padding-left:20px;align-items:start;height:600px}}@media (min-width: 480px){.short .sleeve{height:400px}}.content-wrap{position:relative;padding-top:70px;padding-right:30px;padding-left:30px;padding-bottom:30px;box-sizing:border-box;width:100%;max-width:450px}@media (min-width: 450px){.content-wrap{margin-bottom:auto;margin-top:auto;padding-top:40px}}@media (min-width: 480px){.content-wrap{padding-top:30px;margin-left:0}}img.stacked{width:100%;height:100%;object-fit:cover}@media (min-width: 450px){img.stacked{display:none}}h1.main-title{font-size:47px;line-height:60px;font-weight:bold;margin:0 0 15px;padding:0}.slug{font-size:20px;line-height:inherit;font-weight:bold;margin-bottom:-7px}.teaser{margin:0;padding:0}.logo{height:100px;background-size:contain;background-repeat:no-repeat;background-position:left center;margin-bottom:10px}.logo img{width:auto;height:100%;position:relative}';const r=class{constructor(e){o(this,e);this.slug="";this.height="tall"}lineBreakToBr(o){if(o==undefined){return[]}return o.split(/\r?\n|\r|\n/g).map((o=>[o,e("br",null)])).flat().slice(0,-1)}getParsedFocalPoint(){if(typeof this.focalPoint==="string"){return JSON.parse(this.focalPoint)}return this.focalPoint}getParsedLogo(){if(this.logo===undefined)return undefined;if(typeof this.logo==="string"){return JSON.parse(this.logo)}return this.logo}render(){const
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as o,h as e}from"./p-Bw8i6zSc.js";const t='a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}:host{display:contents;font-family:"Euclid Triangle", sans-serif;font-size:17px;line-height:24px}.space-above-0{margin-top:0}.space-above-1{margin-top:5px}.space-above-2{margin-top:10px}.space-above-3{margin-top:15px}.space-above-4{margin-top:30px}.space-above-5{margin-top:45px}.space-above-6{margin-top:60px}.space-below-0{margin-bottom:0}.space-below-1{margin-bottom:5px}.space-below-2{margin-bottom:10px}.space-below-3{margin-bottom:15px}.space-below-4{margin-bottom:30px}.space-below-5{margin-bottom:45px}.space-below-6{margin-bottom:60px}.text-colour-hover-primary:hover,.text-colour-primary{color:#2C089B}.text-colour-hover-secondary:hover,.text-colour-secondary{color:#2AF135}.text-colour-hover-tertiary:hover,.text-colour-tertiary{color:#FF7272}.text-colour-hover-brand-cc-red:hover,.text-colour-brand-cc-red{color:#B30510}.text-colour-hover-brand-wgmf-purple:hover,.text-colour-brand-wgmf-purple{color:#6E0887}.text-colour-hover-brand-gmf-green:hover,.text-colour-brand-gmf-green{color:#50B400}.text-colour-hover-brand-er-green:hover,.text-colour-brand-er-green{color:#50B400}.text-colour-hover-brand-er-dark-green:hover,.text-colour-brand-er-dark-green{color:#002413}.text-colour-hover-brand-er-dark-blue:hover,.text-colour-brand-er-dark-blue{color:#0c0068}.text-colour-hover-brand-er-teal:hover,.text-colour-brand-er-teal{color:#00a76d}.text-colour-hover-brand-emf-yellow:hover,.text-colour-brand-emf-yellow{color:#FFE500}.text-colour-hover-brand-c4c-orange:hover,.text-colour-brand-c4c-orange{color:#F07D00}.text-colour-hover-brand-afa-pink:hover,.text-colour-brand-afa-pink{color:#BF387D}.text-colour-hover-brand-scw-magenta:hover,.text-colour-brand-scw-magenta{color:#EE2C65}.text-colour-hover-brand-mhf-turquoise:hover,.text-colour-brand-mhf-turquoise{color:#62CFC9}.text-colour-hover-brand-grey:hover,.text-colour-brand-grey{color:#CBC8C8}.text-colour-hover-white:hover,.text-colour-white{color:#FFFFFF}.text-colour-hover-black:hover,.text-colour-black{color:#000000}.text-colour-hover-grey-extra-light:hover,.text-colour-grey-extra-light{color:#D7D7D7}.text-colour-hover-grey-light:hover,.text-colour-grey-light{color:#E8E8E8}.text-colour-hover-grey-medium:hover,.text-colour-grey-medium{color:#8A8A8A}.text-colour-hover-grey-dark:hover,.text-colour-grey-dark{color:#4A4A4A}.text-colour-hover-philco-orange:hover,.text-colour-philco-orange{color:#f18a00}.text-colour-hover-philco-gray-90:hover,.text-colour-philco-gray-90{color:#1d1d1B}.text-colour-hover-philco-gray-70:hover,.text-colour-philco-gray-70{color:#7D7D7D}.text-colour-hover-philco-white:hover,.text-colour-philco-white{color:#FFFFFF}.text-colour-hover-philco-success-green:hover,.text-colour-philco-success-green{color:#1Ec691}.text-colour-hover-philco-error-coral:hover,.text-colour-philco-error-coral{color:#F54242}.text-colour-hover-philco-gray-30:hover,.text-colour-philco-gray-30{color:#BBBBBB}.text-colour-hover-philco-gray-20:hover,.text-colour-philco-gray-20{color:#F6F6F6}.banner{font-size:17px;background-size:cover;height:600px;position:relative;overflow:hidden}.banner.short{height:400px}.banner img.background{object-fit:cover;position:absolute;max-width:2000px;width:100%;height:400px;left:50%;transform:translateX(-50%);bottom:0;display:none}@media (min-width: 450px){.banner img.background{display:block;bottom:initial;height:100%}}.sleeve{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;max-width:1200px;margin-left:auto;margin-right:auto;padding:0;box-sizing:border-box;height:100%}@media (min-width: 576px){.sleeve{flex-direction:column}}@media (min-width: 606px){.sleeve{padding-left:20px;align-items:start;height:600px}}@media (min-width: 480px){.short .sleeve{height:400px}}.content-wrap{position:relative;padding-top:70px;padding-right:30px;padding-left:30px;padding-bottom:30px;box-sizing:border-box;width:100%;max-width:450px}@media (min-width: 450px){.content-wrap{margin-bottom:auto;margin-top:auto;padding-top:40px}}@media (min-width: 480px){.content-wrap{padding-top:30px;margin-left:0}}img.stacked{width:100%;height:100%;object-fit:cover}@media (min-width: 450px){img.stacked{display:none}}h1.main-title{font-size:47px;line-height:60px;font-weight:bold;margin:0 0 15px;padding:0}.slug{font-size:20px;line-height:inherit;font-weight:bold;margin-bottom:-7px}.teaser{margin:0;padding:0}.logo{height:100px;background-size:contain;background-repeat:no-repeat;background-position:left center;margin-bottom:10px}.logo img{width:auto;height:100%;position:relative}';const r=class{constructor(e){o(this,e);this.slug="";this.height="tall"}lineBreakToBr(o){if(o==undefined){return[]}return o.split(/\r?\n|\r|\n/g).map((o=>[o,e("br",null)])).flat().slice(0,-1)}getParsedFocalPoint(){if(typeof this.focalPoint==="string"){return JSON.parse(this.focalPoint)}return this.focalPoint}getParsedLogo(){if(this.logo===undefined)return undefined;if(typeof this.logo==="string"){return JSON.parse(this.logo)}return this.logo}render(){var o,t,r,i,l;const a=this.lineBreakToBr(this.teaser);const c=((o=this.backgroundColour)===null||o===void 0?void 0:o.startsWith("#"))?this.backgroundColour:`#${this.backgroundColour}`;const n=((t=this.textBackgroundColour)===null||t===void 0?void 0:t.startsWith("#"))?this.textBackgroundColour:`#${this.textBackgroundColour}`;const h=((r=this.slugColour)===null||r===void 0?void 0:r.startsWith("#"))?this.slugColour:`#${this.slugColour}`;const s=((i=this.mainTitleColour)===null||i===void 0?void 0:i.startsWith("#"))?this.mainTitleColour:`#${this.mainTitleColour}`;const d=((l=this.teaserColour)===null||l===void 0?void 0:l.startsWith("#"))?this.teaserColour:`#${this.teaserColour}`;const g=this.getParsedLogo();return e("div",{key:"f1d20a1ffc7d8f49c1f1068de66135de634fbfe7",class:{banner:true,short:this.height==="short"},style:{"background-color":c}},typeof this.mainImageUrl==="string"&&this.mainImageUrl!==""?e("img",{class:"background",src:this.mainImageUrl,alt:"",style:{"object-position":`${this.getParsedFocalPoint().x}% ${this.getParsedFocalPoint().y}%`}}):null,e("div",{key:"3b3a185c3336799f757bc34ca7ff7ab1126b49d7",class:"sleeve"},e("div",{key:"b621ed5069510f13a385c606c36806f6f26ecab3",class:"content-wrap",style:{"background-color":n}},g?e("div",{class:"logo"},e("img",{src:g.url,alt:g.alt||""})):null,this.slug!=undefined?e("div",{style:{color:h},class:"slug"},this.slug):null,e("h1",{key:"1a8ba9e55d7c038fc5a99d5e9014773de178254a",style:{color:s},class:"main-title"},this.mainTitle),this.teaser!=undefined?e("div",{class:"teaser",style:{color:d}},a):null),typeof this.mainImageUrl==="string"&&this.mainImageUrl!==""?e("img",{class:"stacked",src:this.mainImageUrl,alt:"",style:{"object-position":`${this.getParsedFocalPoint().x}% ${this.getParsedFocalPoint().y}%`}}):null))}};r.style=t;export{r as biggive_heading_banner};
|
|
2
|
+
//# sourceMappingURL=p-8423b699.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["biggiveHeadingBannerCss","BiggiveHeadingBanner","constructor","hostRef","this","slug","height","lineBreakToBr","string","undefined","split","map","line","h","flat","slice","getParsedFocalPoint","focalPoint","JSON","parse","getParsedLogo","logo","render","teaserLines","teaser","bgColor","_a","backgroundColour","startsWith","textBgColor","_b","textBackgroundColour","slugColour","_c","mainTitleColour","_d","teaserColour","_e","key","class","banner","short","style","mainImageUrl","src","alt","x","y","url","color","mainTitle"],"sources":["src/components/biggive-heading-banner/biggive-heading-banner.scss?tag=biggive-heading-banner&encapsulation=shadow","src/components/biggive-heading-banner/biggive-heading-banner.tsx"],"sourcesContent":[":host {\n display: contents;\n @include standard-font();\n}\n\n@include spacers();\n@include text-colours();\n\n.banner {\n font-size: 17px;\n background-size: cover;\n height: 600px;\n position: relative;\n overflow: hidden;\n\n &.short {\n height: 400px;\n }\n\n img.background {\n object-fit: cover;\n position: absolute;\n max-width: 2000px;\n width: 100%;\n height: 400px;\n left: 50%;\n transform: translateX(-50%);\n bottom: 0;\n display: none;\n @media (min-width: 450px) {\n display: block;\n bottom: initial;\n height: 100%;\n }\n }\n}\n\n.sleeve {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n max-width: 1200px;\n margin-left: auto;\n margin-right: auto;\n padding: 0;\n box-sizing: border-box;\n height: 100%;\n\n @media (min-width: #{$screen-mobile-max}) {\n flex-direction: column;\n }\n\n @media (min-width: #{$screen-mobile-max + 30px}) {\n // adding 30px to standard breakpoint to match padding.\n padding-left: 20px;\n align-items: start;\n height: 600px;\n }\n}\n\n@media (min-width: #{$screen-mobile-small + 30px}) {\n .short .sleeve {\n height: 400px;\n }\n}\n\n.content-wrap {\n position: relative;\n padding-top: 70px; // includes 30 extra on mobile to make space for overlapping 'main-message-wrap'\n padding-right: 30px;\n padding-left: 30px;\n padding-bottom: 30px;\n box-sizing: border-box;\n width: 100%;\n max-width: 450px;\n\n @media (min-width: #{$screen-mobile-small}) {\n margin-bottom: auto;\n margin-top: auto;\n padding-top: 40px;\n }\n\n @media (min-width: #{$screen-mobile-small + 30px}) {\n padding-top: 30px;\n margin-left: 0;\n }\n}\n\nimg.stacked {\n width: 100%;\n height: 100%;\n object-fit: cover;\n\n @media (min-width: #{$screen-mobile-small}) {\n display: none;\n }\n}\n\nh1.main-title {\n font-size: 47px;\n line-height: 60px;\n font-weight: bold;\n margin: 0 0 15px;\n padding: 0;\n}\n\n.slug {\n font-size: 20px;\n line-height: inherit;\n font-weight: bold;\n margin-bottom: -7px;\n}\n\n.teaser {\n margin: 0;\n padding: 0;\n}\n\n.logo {\n height: 100px;\n background-size: contain;\n background-repeat: no-repeat;\n background-position: left center;\n margin-bottom: 10px;\n\n img {\n width: auto;\n height: 100%;\n position: relative;\n }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * Heading banner component for use as a page header.\n *\n * This component provides a banner with a background image, optional logo, and text content.\n * It supports different heights and customizable colors.\n */\n@Component({\n tag: 'biggive-heading-banner',\n styleUrl: 'biggive-heading-banner.scss',\n shadow: true,\n})\nexport class BiggiveHeadingBanner {\n /**\n * Optional logo object with URL and alt text\n */\n @Prop() logo?: { url: string; alt?: string } | string;\n\n /**\n * Optional slightly smaller text to appear above the main title\n */\n @Prop() slug?: string = '';\n\n /**\n * Main title text for the banner\n */\n @Prop() mainTitle!: string;\n\n /**\n * URL for the main banner image\n */\n @Prop() mainImageUrl!: string | null;\n\n /**\n * Focal point for the image positioning\n * x and y values are percentages (0-100)\n */\n @Prop() focalPoint!: string | { x: number; y: number };\n\n /**\n * Optional teaser text that appears below the main title\n */\n @Prop() teaser!: string;\n\n /**\n * Background color for the banner\n */\n @Prop() backgroundColour!: string;\n\n /**\n * Background color for the text content area\n */\n @Prop() textBackgroundColour!: string;\n\n @Prop() slugColour!: string;\n\n @Prop() mainTitleColour!: string;\n\n @Prop() teaserColour!: string;\n\n /**\n * Height variant of the banner\n * 'tall' for full height, 'short' for reduced height\n */\n @Prop() height: 'short' | 'tall' = 'tall';\n\n /**\n * Takes a string that may contain any form of newlines, and returns an array that alternates\n * between substrings found between the newlines and <br/> elements as objects.\n */\n private lineBreakToBr(string: string | undefined): unknown[] {\n if (string == undefined) {\n return [];\n }\n\n return string\n .split(/\\r?\\n|\\r|\\n/g)\n .map(line => [line, <br />])\n .flat()\n .slice(0, -1);\n }\n\n private getParsedFocalPoint(): { x: number; y: number } {\n if (typeof this.focalPoint === 'string') {\n return JSON.parse(this.focalPoint);\n }\n return this.focalPoint;\n }\n\n private getParsedLogo(): { url: string; alt?: string } | undefined {\n if (this.logo === undefined) return undefined;\n if (typeof this.logo === 'string') {\n return JSON.parse(this.logo);\n }\n return this.logo;\n }\n\n render() {\n // Convert teaser text with line breaks to JSX\n const teaserLines = this.lineBreakToBr(this.teaser);\n\n // Ensure color values have # prefix if they're hex colors without it\n // not sure how but it seems we're sometimes doing at least an intiial render before the colour props are populated,\n // so using null-safe navigation to avoid a crash here.\n const bgColor = this.backgroundColour?.startsWith('#') ? this.backgroundColour : `#${this.backgroundColour}`;\n const textBgColor = this.textBackgroundColour?.startsWith('#') ? this.textBackgroundColour : `#${this.textBackgroundColour}`;\n const slugColour = this.slugColour?.startsWith('#') ? this.slugColour : `#${this.slugColour}`;\n const mainTitleColour = this.mainTitleColour?.startsWith('#') ? this.mainTitleColour : `#${this.mainTitleColour}`;\n const teaserColour = this.teaserColour?.startsWith('#') ? this.teaserColour : `#${this.teaserColour}`;\n\n const logo = this.getParsedLogo();\n return (\n <div\n class={{\n banner: true,\n short: this.height === 'short',\n }}\n style={{\n 'background-color': bgColor,\n }}\n >\n {typeof this.mainImageUrl === 'string' && this.mainImageUrl !== '' ? (\n <img\n class=\"background\"\n src={this.mainImageUrl}\n alt=\"\"\n style={{\n 'object-position': `${this.getParsedFocalPoint().x}% ${this.getParsedFocalPoint().y}%`,\n }}\n />\n ) : null}\n <div class=\"sleeve\">\n <div\n class=\"content-wrap\"\n style={{\n 'background-color': textBgColor,\n }}\n >\n {logo ? (\n <div class=\"logo\">\n <img src={logo.url} alt={logo.alt || ''} />\n </div>\n ) : null}\n\n {this.slug != undefined ? (\n <div\n style={{\n color: slugColour,\n }}\n class=\"slug\"\n >\n {this.slug}\n </div>\n ) : null}\n\n <h1\n style={{\n color: mainTitleColour,\n }}\n class=\"main-title\"\n >\n {this.mainTitle}\n </h1>\n\n {this.teaser != undefined ? (\n <div\n class=\"teaser\"\n style={{\n color: teaserColour,\n }}\n >\n {teaserLines}\n </div>\n ) : null}\n </div>\n\n {typeof this.mainImageUrl === 'string' && this.mainImageUrl !== '' ? (\n <img\n class=\"stacked\"\n src={this.mainImageUrl}\n alt=\"\"\n style={{\n 'object-position': `${this.getParsedFocalPoint().x}% ${this.getParsedFocalPoint().y}%`,\n }}\n />\n ) : null}\n </div>\n </div>\n );\n }\n}\n"],"mappings":"2CAAA,MAAMA,EAA0B,89I,MCanBC,EAAoB,MALjC,WAAAC,CAAAC,G,UAcUC,KAAIC,KAAY,GA2ChBD,KAAME,OAAqB,MA8HpC,CAxHS,aAAAC,CAAcC,GACpB,GAAIA,GAAUC,UAAW,CACvB,MAAO,E,CAGT,OAAOD,EACJE,MAAM,gBACNC,KAAIC,GAAQ,CAACA,EAAMC,EAAM,cACzBC,OACAC,MAAM,GAAG,E,CAGN,mBAAAC,GACN,UAAWZ,KAAKa,aAAe,SAAU,CACvC,OAAOC,KAAKC,MAAMf,KAAKa,W,CAEzB,OAAOb,KAAKa,U,CAGN,aAAAG,GACN,GAAIhB,KAAKiB,OAASZ,UAAW,OAAOA,UACpC,UAAWL,KAAKiB,OAAS,SAAU,CACjC,OAAOH,KAAKC,MAAMf,KAAKiB,K,CAEzB,OAAOjB,KAAKiB,I,CAGd,MAAAC,G,cAEE,MAAMC,EAAcnB,KAAKG,cAAcH,KAAKoB,QAK5C,MAAMC,IAAUC,EAAAtB,KAAKuB,oBAAkB,MAAAD,SAAA,SAAAA,EAAAE,WAAW,MAAOxB,KAAKuB,iBAAmB,IAAIvB,KAAKuB,mBAC1F,MAAME,IAAcC,EAAA1B,KAAK2B,wBAAsB,MAAAD,SAAA,SAAAA,EAAAF,WAAW,MAAOxB,KAAK2B,qBAAuB,IAAI3B,KAAK2B,uBACtG,MAAMC,IAAaC,EAAA7B,KAAK4B,cAAY,MAAAC,SAAA,SAAAA,EAAAL,WAAW,MAAOxB,KAAK4B,WAAa,IAAI5B,KAAK4B,aACjF,MAAME,IAAkBC,EAAA/B,KAAK8B,mBAAiB,MAAAC,SAAA,SAAAA,EAAAP,WAAW,MAAOxB,KAAK8B,gBAAkB,IAAI9B,KAAK8B,kBAChG,MAAME,IAAeC,EAAAjC,KAAKgC,gBAAc,MAAAC,SAAA,SAAAA,EAAAT,WAAW,MAAOxB,KAAKgC,aAAe,IAAIhC,KAAKgC,eAEvF,MAAMf,EAAOjB,KAAKgB,gBAClB,OACEP,EACE,OAAAyB,IAAA,2CAAAC,MAAO,CACLC,OAAQ,KACRC,MAAOrC,KAAKE,SAAW,SAEzBoC,MAAO,CACL,mBAAoBjB,WAGdrB,KAAKuC,eAAiB,UAAYvC,KAAKuC,eAAiB,GAC9D9B,EACE,OAAA0B,MAAM,aACNK,IAAKxC,KAAKuC,aACVE,IAAI,GACJH,MAAO,CACL,kBAAmB,GAAGtC,KAAKY,sBAAsB8B,MAAM1C,KAAKY,sBAAsB+B,QAGpF,KACJlC,EAAK,OAAAyB,IAAA,2CAAAC,MAAM,UACT1B,EAAA,OAAAyB,IAAA,2CACEC,MAAM,eACNG,MAAO,CACL,mBAAoBb,IAGrBR,EACCR,EAAK,OAAA0B,MAAM,QACT1B,EAAA,OAAK+B,IAAKvB,EAAK2B,IAAKH,IAAKxB,EAAKwB,KAAO,MAErC,KAEHzC,KAAKC,MAAQI,UACZI,EACE,OAAA6B,MAAO,CACLO,MAAOjB,GAETO,MAAM,QAELnC,KAAKC,MAEN,KAEJQ,EAAA,MAAAyB,IAAA,2CACEI,MAAO,CACLO,MAAOf,GAETK,MAAM,cAELnC,KAAK8C,WAGP9C,KAAKoB,QAAUf,UACdI,EAAA,OACE0B,MAAM,SACNG,MAAO,CACLO,MAAOb,IAGRb,GAED,aAGEnB,KAAKuC,eAAiB,UAAYvC,KAAKuC,eAAiB,GAC9D9B,EACE,OAAA0B,MAAM,UACNK,IAAKxC,KAAKuC,aACVE,IAAI,GACJH,MAAO,CACL,kBAAmB,GAAGtC,KAAKY,sBAAsB8B,MAAM1C,KAAKY,sBAAsB+B,QAGpF,M","ignoreList":[]}
|
|
@@ -46,27 +46,30 @@ const BiggiveHeadingBanner = class {
|
|
|
46
46
|
return this.logo;
|
|
47
47
|
}
|
|
48
48
|
render() {
|
|
49
|
+
var _a, _b, _c, _d, _e;
|
|
49
50
|
// Convert teaser text with line breaks to JSX
|
|
50
51
|
const teaserLines = this.lineBreakToBr(this.teaser);
|
|
51
52
|
// Ensure color values have # prefix if they're hex colors without it
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
const
|
|
55
|
-
const
|
|
56
|
-
const
|
|
53
|
+
// not sure how but it seems we're sometimes doing at least an intiial render before the colour props are populated,
|
|
54
|
+
// so using null-safe navigation to avoid a crash here.
|
|
55
|
+
const bgColor = ((_a = this.backgroundColour) === null || _a === void 0 ? void 0 : _a.startsWith('#')) ? this.backgroundColour : `#${this.backgroundColour}`;
|
|
56
|
+
const textBgColor = ((_b = this.textBackgroundColour) === null || _b === void 0 ? void 0 : _b.startsWith('#')) ? this.textBackgroundColour : `#${this.textBackgroundColour}`;
|
|
57
|
+
const slugColour = ((_c = this.slugColour) === null || _c === void 0 ? void 0 : _c.startsWith('#')) ? this.slugColour : `#${this.slugColour}`;
|
|
58
|
+
const mainTitleColour = ((_d = this.mainTitleColour) === null || _d === void 0 ? void 0 : _d.startsWith('#')) ? this.mainTitleColour : `#${this.mainTitleColour}`;
|
|
59
|
+
const teaserColour = ((_e = this.teaserColour) === null || _e === void 0 ? void 0 : _e.startsWith('#')) ? this.teaserColour : `#${this.teaserColour}`;
|
|
57
60
|
const logo = this.getParsedLogo();
|
|
58
|
-
return (index.h("div", { key: '
|
|
61
|
+
return (index.h("div", { key: 'f1d20a1ffc7d8f49c1f1068de66135de634fbfe7', class: {
|
|
59
62
|
banner: true,
|
|
60
63
|
short: this.height === 'short',
|
|
61
64
|
}, style: {
|
|
62
65
|
'background-color': bgColor,
|
|
63
66
|
} }, typeof this.mainImageUrl === 'string' && this.mainImageUrl !== '' ? (index.h("img", { class: "background", src: this.mainImageUrl, alt: "", style: {
|
|
64
67
|
'object-position': `${this.getParsedFocalPoint().x}% ${this.getParsedFocalPoint().y}%`,
|
|
65
|
-
} })) : null, index.h("div", { key: '
|
|
68
|
+
} })) : null, index.h("div", { key: '3b3a185c3336799f757bc34ca7ff7ab1126b49d7', class: "sleeve" }, index.h("div", { key: 'b621ed5069510f13a385c606c36806f6f26ecab3', class: "content-wrap", style: {
|
|
66
69
|
'background-color': textBgColor,
|
|
67
70
|
} }, logo ? (index.h("div", { class: "logo" }, index.h("img", { src: logo.url, alt: logo.alt || '' }))) : null, this.slug != undefined ? (index.h("div", { style: {
|
|
68
71
|
color: slugColour,
|
|
69
|
-
}, class: "slug" }, this.slug)) : null, index.h("h1", { key: '
|
|
72
|
+
}, class: "slug" }, this.slug)) : null, index.h("h1", { key: '1a8ba9e55d7c038fc5a99d5e9014773de178254a', style: {
|
|
70
73
|
color: mainTitleColour,
|
|
71
74
|
}, class: "main-title" }, this.mainTitle), this.teaser != undefined ? (index.h("div", { class: "teaser", style: {
|
|
72
75
|
color: teaserColour,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"biggive-heading-banner.entry.cjs.js","mappings":";;;;AAAA,MAAM,uBAAuB,GAAG,+9IAA+9I;;MCal/I,oBAAoB,GAAA,MAAA;AALjC,IAAA,WAAA,CAAA,OAAA,EAAA;;AAWE;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAY,EAAE;AAuC1B;;;AAGG;AACK,QAAA,IAAM,CAAA,MAAA,GAAqB,MAAM;AA4H1C;AA1HC;;;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;;QAGnD,MAAM,OAAO,GAAG,IAAI,CAAC,gBAAgB,CAAC,UAAU,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,gBAAgB,GAAG,IAAI,IAAI,CAAC,gBAAgB,CAAA,CAAE;QAC3G,MAAM,WAAW,GAAG,IAAI,CAAC,oBAAoB,CAAC,UAAU,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,oBAAoB,GAAG,IAAI,IAAI,CAAC,oBAAoB,CAAA,CAAE;QAC3H,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,UAAU,GAAG,IAAI,IAAI,CAAC,UAAU,CAAA,CAAE;QAC5F,MAAM,eAAe,GAAG,IAAI,CAAC,eAAe,CAAC,UAAU,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,eAAe,GAAG,IAAI,IAAI,CAAC,eAAe,CAAA,CAAE;QAChH,MAAM,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,YAAY,GAAG,IAAI,IAAI,CAAC,YAAY,CAAA,CAAE;AAEpG,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,aAAa,EAAE;QACjC,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,EAERA,OAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,KAAK,EAAE,eAAe;AACvB,aAAA,EACD,KAAK,EAAC,YAAY,IAEjB,IAAI,CAAC,SAAS,CACZ,EAEJ,IAAI,CAAC,MAAM,IAAI,SAAS,IACvBA,OAAA,CAAA,KAAA,EAAA,EACE,KAAK,EAAC,QAAQ,EACd,KAAK,EAAE;AACL,gBAAA,KAAK,EAAE,YAAY;aACpB,EAAA,EAEA,WAAW,CACR,IACJ,IAAI,CACJ,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;;;;;;;","names":["h"],"sources":["src/components/biggive-heading-banner/biggive-heading-banner.scss?tag=biggive-heading-banner&encapsulation=shadow","src/components/biggive-heading-banner/biggive-heading-banner.tsx"],"sourcesContent":[":host {\n display: contents;\n @include standard-font();\n}\n\n@include spacers();\n@include text-colours();\n\n.banner {\n font-size: 17px;\n background-size: cover;\n height: 600px;\n position: relative;\n overflow: hidden;\n\n &.short {\n height: 400px;\n }\n\n img.background {\n object-fit: cover;\n position: absolute;\n max-width: 2000px;\n width: 100%;\n height: 400px;\n left: 50%;\n transform: translateX(-50%);\n bottom: 0;\n display: none;\n @media (min-width: 450px) {\n display: block;\n bottom: initial;\n height: 100%;\n }\n }\n}\n\n.sleeve {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n max-width: 1200px;\n margin-left: auto;\n margin-right: auto;\n padding: 0;\n box-sizing: border-box;\n height: 100%;\n\n @media (min-width: #{$screen-mobile-max}) {\n flex-direction: column;\n }\n\n @media (min-width: #{$screen-mobile-max + 30px}) {\n // adding 30px to standard breakpoint to match padding.\n padding-left: 20px;\n align-items: start;\n height: 600px;\n }\n}\n\n@media (min-width: #{$screen-mobile-small + 30px}) {\n .short .sleeve {\n height: 400px;\n }\n}\n\n.content-wrap {\n position: relative;\n padding-top: 70px; // includes 30 extra on mobile to make space for overlapping 'main-message-wrap'\n padding-right: 30px;\n padding-left: 30px;\n padding-bottom: 30px;\n box-sizing: border-box;\n width: 100%;\n max-width: 450px;\n\n @media (min-width: #{$screen-mobile-small}) {\n margin-bottom: auto;\n margin-top: auto;\n padding-top: 40px;\n }\n\n @media (min-width: #{$screen-mobile-small + 30px}) {\n padding-top: 30px;\n margin-left: 0;\n }\n}\n\nimg.stacked {\n width: 100%;\n height: 100%;\n object-fit: cover;\n\n @media (min-width: #{$screen-mobile-small}) {\n display: none;\n }\n}\n\nh1.main-title {\n font-size: 47px;\n line-height: 60px;\n font-weight: bold;\n margin: 0 0 15px;\n padding: 0;\n}\n\n.slug {\n font-size: 20px;\n line-height: inherit;\n font-weight: bold;\n margin-bottom: -7px;\n}\n\n.teaser {\n margin: 0;\n padding: 0;\n}\n\n.logo {\n height: 100px;\n background-size: contain;\n background-repeat: no-repeat;\n background-position: left center;\n margin-bottom: 10px;\n\n img {\n width: auto;\n height: 100%;\n position: relative;\n }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * Heading banner component for use as a page header.\n *\n * This component provides a banner with a background image, optional logo, and text content.\n * It supports different heights and customizable colors.\n */\n@Component({\n tag: 'biggive-heading-banner',\n styleUrl: 'biggive-heading-banner.scss',\n shadow: true,\n})\nexport class BiggiveHeadingBanner {\n /**\n * Optional logo object with URL and alt text\n */\n @Prop() logo?: { url: string; alt?: string } | string;\n\n /**\n * Optional slightly smaller text to appear above the main title\n */\n @Prop() slug?: string = '';\n\n /**\n * Main title text for the banner\n */\n @Prop() mainTitle!: string;\n\n /**\n * URL for the main banner image\n */\n @Prop() mainImageUrl!: string | null;\n\n /**\n * Focal point for the image positioning\n * x and y values are percentages (0-100)\n */\n @Prop() focalPoint!: string | { x: number; y: number };\n\n /**\n * Optional teaser text that appears below the main title\n */\n @Prop() teaser!: string;\n\n /**\n * Background color for the banner\n */\n @Prop() backgroundColour!: string;\n\n /**\n * Background color for the text content area\n */\n @Prop() textBackgroundColour!: string;\n\n @Prop() slugColour!: string;\n\n @Prop() mainTitleColour!: string;\n\n @Prop() teaserColour!: string;\n\n /**\n * Height variant of the banner\n * 'tall' for full height, 'short' for reduced height\n */\n @Prop() height: 'short' | 'tall' = 'tall';\n\n /**\n * Takes a string that may contain any form of newlines, and returns an array that alternates\n * between substrings found between the newlines and <br/> elements as objects.\n */\n private lineBreakToBr(string: string | undefined): unknown[] {\n if (string == undefined) {\n return [];\n }\n\n return string\n .split(/\\r?\\n|\\r|\\n/g)\n .map(line => [line, <br />])\n .flat()\n .slice(0, -1);\n }\n\n private getParsedFocalPoint(): { x: number; y: number } {\n if (typeof this.focalPoint === 'string') {\n return JSON.parse(this.focalPoint);\n }\n return this.focalPoint;\n }\n\n private getParsedLogo(): { url: string; alt?: string } | undefined {\n if (this.logo === undefined) return undefined;\n if (typeof this.logo === 'string') {\n return JSON.parse(this.logo);\n }\n return this.logo;\n }\n\n render() {\n // Convert teaser text with line breaks to JSX\n const teaserLines = this.lineBreakToBr(this.teaser);\n\n // Ensure color values have # prefix if they're hex colors without it\n const bgColor = this.backgroundColour.startsWith('#') ? this.backgroundColour : `#${this.backgroundColour}`;\n const textBgColor = this.textBackgroundColour.startsWith('#') ? this.textBackgroundColour : `#${this.textBackgroundColour}`;\n const slugColour = this.slugColour.startsWith('#') ? this.slugColour : `#${this.slugColour}`;\n const mainTitleColour = this.mainTitleColour.startsWith('#') ? this.mainTitleColour : `#${this.mainTitleColour}`;\n const teaserColour = this.teaserColour.startsWith('#') ? this.teaserColour : `#${this.teaserColour}`;\n\n const logo = this.getParsedLogo();\n return (\n <div\n class={{\n banner: true,\n short: this.height === 'short',\n }}\n style={{\n 'background-color': bgColor,\n }}\n >\n {typeof this.mainImageUrl === 'string' && this.mainImageUrl !== '' ? (\n <img\n class=\"background\"\n src={this.mainImageUrl}\n alt=\"\"\n style={{\n 'object-position': `${this.getParsedFocalPoint().x}% ${this.getParsedFocalPoint().y}%`,\n }}\n />\n ) : null}\n <div class=\"sleeve\">\n <div\n class=\"content-wrap\"\n style={{\n 'background-color': textBgColor,\n }}\n >\n {logo ? (\n <div class=\"logo\">\n <img src={logo.url} alt={logo.alt || ''} />\n </div>\n ) : null}\n\n {this.slug != undefined ? (\n <div\n style={{\n color: slugColour,\n }}\n class=\"slug\"\n >\n {this.slug}\n </div>\n ) : null}\n\n <h1\n style={{\n color: mainTitleColour,\n }}\n class=\"main-title\"\n >\n {this.mainTitle}\n </h1>\n\n {this.teaser != undefined ? (\n <div\n class=\"teaser\"\n style={{\n color: teaserColour,\n }}\n >\n {teaserLines}\n </div>\n ) : null}\n </div>\n\n {typeof this.mainImageUrl === 'string' && this.mainImageUrl !== '' ? (\n <img\n class=\"stacked\"\n src={this.mainImageUrl}\n alt=\"\"\n style={{\n 'object-position': `${this.getParsedFocalPoint().x}% ${this.getParsedFocalPoint().y}%`,\n }}\n />\n ) : null}\n </div>\n </div>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"biggive-heading-banner.entry.cjs.js","mappings":"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","names":["h"],"sources":["src/components/biggive-heading-banner/biggive-heading-banner.scss?tag=biggive-heading-banner&encapsulation=shadow","src/components/biggive-heading-banner/biggive-heading-banner.tsx"],"sourcesContent":[":host {\n display: contents;\n @include standard-font();\n}\n\n@include spacers();\n@include text-colours();\n\n.banner {\n font-size: 17px;\n background-size: cover;\n height: 600px;\n position: relative;\n overflow: hidden;\n\n &.short {\n height: 400px;\n }\n\n img.background {\n object-fit: cover;\n position: absolute;\n max-width: 2000px;\n width: 100%;\n height: 400px;\n left: 50%;\n transform: translateX(-50%);\n bottom: 0;\n display: none;\n @media (min-width: 450px) {\n display: block;\n bottom: initial;\n height: 100%;\n }\n }\n}\n\n.sleeve {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n max-width: 1200px;\n margin-left: auto;\n margin-right: auto;\n padding: 0;\n box-sizing: border-box;\n height: 100%;\n\n @media (min-width: #{$screen-mobile-max}) {\n flex-direction: column;\n }\n\n @media (min-width: #{$screen-mobile-max + 30px}) {\n // adding 30px to standard breakpoint to match padding.\n padding-left: 20px;\n align-items: start;\n height: 600px;\n }\n}\n\n@media (min-width: #{$screen-mobile-small + 30px}) {\n .short .sleeve {\n height: 400px;\n }\n}\n\n.content-wrap {\n position: relative;\n padding-top: 70px; // includes 30 extra on mobile to make space for overlapping 'main-message-wrap'\n padding-right: 30px;\n padding-left: 30px;\n padding-bottom: 30px;\n box-sizing: border-box;\n width: 100%;\n max-width: 450px;\n\n @media (min-width: #{$screen-mobile-small}) {\n margin-bottom: auto;\n margin-top: auto;\n padding-top: 40px;\n }\n\n @media (min-width: #{$screen-mobile-small + 30px}) {\n padding-top: 30px;\n margin-left: 0;\n }\n}\n\nimg.stacked {\n width: 100%;\n height: 100%;\n object-fit: cover;\n\n @media (min-width: #{$screen-mobile-small}) {\n display: none;\n }\n}\n\nh1.main-title {\n font-size: 47px;\n line-height: 60px;\n font-weight: bold;\n margin: 0 0 15px;\n padding: 0;\n}\n\n.slug {\n font-size: 20px;\n line-height: inherit;\n font-weight: bold;\n margin-bottom: -7px;\n}\n\n.teaser {\n margin: 0;\n padding: 0;\n}\n\n.logo {\n height: 100px;\n background-size: contain;\n background-repeat: no-repeat;\n background-position: left center;\n margin-bottom: 10px;\n\n img {\n width: auto;\n height: 100%;\n position: relative;\n }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * Heading banner component for use as a page header.\n *\n * This component provides a banner with a background image, optional logo, and text content.\n * It supports different heights and customizable colors.\n */\n@Component({\n tag: 'biggive-heading-banner',\n styleUrl: 'biggive-heading-banner.scss',\n shadow: true,\n})\nexport class BiggiveHeadingBanner {\n /**\n * Optional logo object with URL and alt text\n */\n @Prop() logo?: { url: string; alt?: string } | string;\n\n /**\n * Optional slightly smaller text to appear above the main title\n */\n @Prop() slug?: string = '';\n\n /**\n * Main title text for the banner\n */\n @Prop() mainTitle!: string;\n\n /**\n * URL for the main banner image\n */\n @Prop() mainImageUrl!: string | null;\n\n /**\n * Focal point for the image positioning\n * x and y values are percentages (0-100)\n */\n @Prop() focalPoint!: string | { x: number; y: number };\n\n /**\n * Optional teaser text that appears below the main title\n */\n @Prop() teaser!: string;\n\n /**\n * Background color for the banner\n */\n @Prop() backgroundColour!: string;\n\n /**\n * Background color for the text content area\n */\n @Prop() textBackgroundColour!: string;\n\n @Prop() slugColour!: string;\n\n @Prop() mainTitleColour!: string;\n\n @Prop() teaserColour!: string;\n\n /**\n * Height variant of the banner\n * 'tall' for full height, 'short' for reduced height\n */\n @Prop() height: 'short' | 'tall' = 'tall';\n\n /**\n * Takes a string that may contain any form of newlines, and returns an array that alternates\n * between substrings found between the newlines and <br/> elements as objects.\n */\n private lineBreakToBr(string: string | undefined): unknown[] {\n if (string == undefined) {\n return [];\n }\n\n return string\n .split(/\\r?\\n|\\r|\\n/g)\n .map(line => [line, <br />])\n .flat()\n .slice(0, -1);\n }\n\n private getParsedFocalPoint(): { x: number; y: number } {\n if (typeof this.focalPoint === 'string') {\n return JSON.parse(this.focalPoint);\n }\n return this.focalPoint;\n }\n\n private getParsedLogo(): { url: string; alt?: string } | undefined {\n if (this.logo === undefined) return undefined;\n if (typeof this.logo === 'string') {\n return JSON.parse(this.logo);\n }\n return this.logo;\n }\n\n render() {\n // Convert teaser text with line breaks to JSX\n const teaserLines = this.lineBreakToBr(this.teaser);\n\n // Ensure color values have # prefix if they're hex colors without it\n // not sure how but it seems we're sometimes doing at least an intiial render before the colour props are populated,\n // so using null-safe navigation to avoid a crash here.\n const bgColor = this.backgroundColour?.startsWith('#') ? this.backgroundColour : `#${this.backgroundColour}`;\n const textBgColor = this.textBackgroundColour?.startsWith('#') ? this.textBackgroundColour : `#${this.textBackgroundColour}`;\n const slugColour = this.slugColour?.startsWith('#') ? this.slugColour : `#${this.slugColour}`;\n const mainTitleColour = this.mainTitleColour?.startsWith('#') ? this.mainTitleColour : `#${this.mainTitleColour}`;\n const teaserColour = this.teaserColour?.startsWith('#') ? this.teaserColour : `#${this.teaserColour}`;\n\n const logo = this.getParsedLogo();\n return (\n <div\n class={{\n banner: true,\n short: this.height === 'short',\n }}\n style={{\n 'background-color': bgColor,\n }}\n >\n {typeof this.mainImageUrl === 'string' && this.mainImageUrl !== '' ? (\n <img\n class=\"background\"\n src={this.mainImageUrl}\n alt=\"\"\n style={{\n 'object-position': `${this.getParsedFocalPoint().x}% ${this.getParsedFocalPoint().y}%`,\n }}\n />\n ) : null}\n <div class=\"sleeve\">\n <div\n class=\"content-wrap\"\n style={{\n 'background-color': textBgColor,\n }}\n >\n {logo ? (\n <div class=\"logo\">\n <img src={logo.url} alt={logo.alt || ''} />\n </div>\n ) : null}\n\n {this.slug != undefined ? (\n <div\n style={{\n color: slugColour,\n }}\n class=\"slug\"\n >\n {this.slug}\n </div>\n ) : null}\n\n <h1\n style={{\n color: mainTitleColour,\n }}\n class=\"main-title\"\n >\n {this.mainTitle}\n </h1>\n\n {this.teaser != undefined ? (\n <div\n class=\"teaser\"\n style={{\n color: teaserColour,\n }}\n >\n {teaserLines}\n </div>\n ) : null}\n </div>\n\n {typeof this.mainImageUrl === 'string' && this.mainImageUrl !== '' ? (\n <img\n class=\"stacked\"\n src={this.mainImageUrl}\n alt=\"\"\n style={{\n 'object-position': `${this.getParsedFocalPoint().x}% ${this.getParsedFocalPoint().y}%`,\n }}\n />\n ) : null}\n </div>\n </div>\n );\n }\n}\n"],"version":3}
|
|
@@ -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: 450px) {\n display: block;\n bottom: initial;\n height: 100%;\n }\n }\n}\n\n.sleeve {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n max-width: 1200px;\n margin-left: auto;\n margin-right: auto;\n padding: 0;\n box-sizing: border-box;\n height: 100%;\n\n @media (min-width: #{$screen-mobile-max}) {\n flex-direction: column;\n }\n\n @media (min-width: #{$screen-mobile-max + 30px}) {\n // adding 30px to standard breakpoint to match padding.\n padding-left: 20px;\n align-items: start;\n height: 600px;\n }\n}\n\n@media (min-width: #{$screen-mobile-small + 30px}) {\n .short .sleeve {\n height: 400px;\n }\n}\n\n.content-wrap {\n position: relative;\n padding-top: 70px; // includes 30 extra on mobile to make space for overlapping 'main-message-wrap'\n padding-right: 30px;\n padding-left: 30px;\n padding-bottom: 30px;\n box-sizing: border-box;\n width: 100%;\n max-width: 450px;\n\n @media (min-width: #{$screen-mobile-small}) {\n margin-bottom: auto;\n margin-top: auto;\n padding-top: 40px;\n }\n\n @media (min-width: #{$screen-mobile-small + 30px}) {\n padding-top: 30px;\n margin-left: 0;\n }\n}\n\nimg.stacked {\n width: 100%;\n height: 100%;\n object-fit: cover;\n\n @media (min-width: #{$screen-mobile-small}) {\n display: none;\n }\n}\n\nh1.main-title {\n font-size: 47px;\n line-height: 60px;\n font-weight: bold;\n margin: 0 0 15px;\n padding: 0;\n}\n\n.slug {\n font-size: 20px;\n line-height: inherit;\n font-weight: bold;\n margin-bottom: -7px;\n}\n\n.teaser {\n margin: 0;\n padding: 0;\n}\n\n.logo {\n height: 100px;\n background-size: contain;\n background-repeat: no-repeat;\n background-position: left center;\n margin-bottom: 10px;\n\n img {\n width: auto;\n height: 100%;\n position: relative;\n }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * Heading banner component for use as a page header.\n *\n * This component provides a banner with a background image, optional logo, and text content.\n * It supports different heights and customizable colors.\n */\n@Component({\n tag: 'biggive-heading-banner',\n styleUrl: 'biggive-heading-banner.scss',\n shadow: true,\n})\nexport class BiggiveHeadingBanner {\n /**\n * Optional logo object with URL and alt text\n */\n @Prop() logo?: { url: string; alt?: string } | string;\n\n /**\n * Optional slightly smaller text to appear above the main title\n */\n @Prop() slug?: string = '';\n\n /**\n * Main title text for the banner\n */\n @Prop() mainTitle!: string;\n\n /**\n * URL for the main banner image\n */\n @Prop() mainImageUrl!: string | null;\n\n /**\n * Focal point for the image positioning\n * x and y values are percentages (0-100)\n */\n @Prop() focalPoint!: string | { x: number; y: number };\n\n /**\n * Optional teaser text that appears below the main title\n */\n @Prop() teaser!: string;\n\n /**\n * Background color for the banner\n */\n @Prop() backgroundColour!: string;\n\n /**\n * Background color for the text content area\n */\n @Prop() textBackgroundColour!: string;\n\n @Prop() slugColour!: string;\n\n @Prop() mainTitleColour!: string;\n\n @Prop() teaserColour!: string;\n\n /**\n * Height variant of the banner\n * 'tall' for full height, 'short' for reduced height\n */\n @Prop() height: 'short' | 'tall' = 'tall';\n\n /**\n * Takes a string that may contain any form of newlines, and returns an array that alternates\n * between substrings found between the newlines and <br/> elements as objects.\n */\n private lineBreakToBr(string: string | undefined): unknown[] {\n if (string == undefined) {\n return [];\n }\n\n return string\n .split(/\\r?\\n|\\r|\\n/g)\n .map(line => [line, <br />])\n .flat()\n .slice(0, -1);\n }\n\n private getParsedFocalPoint(): { x: number; y: number } {\n if (typeof this.focalPoint === 'string') {\n return JSON.parse(this.focalPoint);\n }\n return this.focalPoint;\n }\n\n private getParsedLogo(): { url: string; alt?: string } | undefined {\n if (this.logo === undefined) return undefined;\n if (typeof this.logo === 'string') {\n return JSON.parse(this.logo);\n }\n return this.logo;\n }\n\n render() {\n // Convert teaser text with line breaks to JSX\n const teaserLines = this.lineBreakToBr(this.teaser);\n\n // Ensure color values have # prefix if they're hex colors without it\n const bgColor = this.backgroundColour.startsWith('#') ? this.backgroundColour : `#${this.backgroundColour}`;\n const textBgColor = this.textBackgroundColour.startsWith('#') ? this.textBackgroundColour : `#${this.textBackgroundColour}`;\n const slugColour = this.slugColour.startsWith('#') ? this.slugColour : `#${this.slugColour}`;\n const mainTitleColour = this.mainTitleColour.startsWith('#') ? this.mainTitleColour : `#${this.mainTitleColour}`;\n const teaserColour = this.teaserColour.startsWith('#') ? this.teaserColour : `#${this.teaserColour}`;\n\n const logo = this.getParsedLogo();\n return (\n <div\n class={{\n banner: true,\n short: this.height === 'short',\n }}\n style={{\n 'background-color': bgColor,\n }}\n >\n {typeof this.mainImageUrl === 'string' && this.mainImageUrl !== '' ? (\n <img\n class=\"background\"\n src={this.mainImageUrl}\n alt=\"\"\n style={{\n 'object-position': `${this.getParsedFocalPoint().x}% ${this.getParsedFocalPoint().y}%`,\n }}\n />\n ) : null}\n <div class=\"sleeve\">\n <div\n class=\"content-wrap\"\n style={{\n 'background-color': textBgColor,\n }}\n >\n {logo ? (\n <div class=\"logo\">\n <img src={logo.url} alt={logo.alt || ''} />\n </div>\n ) : null}\n\n {this.slug != undefined ? (\n <div\n style={{\n color: slugColour,\n }}\n class=\"slug\"\n >\n {this.slug}\n </div>\n ) : null}\n\n <h1\n style={{\n color: mainTitleColour,\n }}\n class=\"main-title\"\n >\n {this.mainTitle}\n </h1>\n\n {this.teaser != undefined ? (\n <div\n class=\"teaser\"\n style={{\n color: teaserColour,\n }}\n >\n {teaserLines}\n </div>\n ) : null}\n </div>\n\n {typeof this.mainImageUrl === 'string' && this.mainImageUrl !== '' ? (\n <img\n class=\"stacked\"\n src={this.mainImageUrl}\n alt=\"\"\n style={{\n 'object-position': `${this.getParsedFocalPoint().x}% ${this.getParsedFocalPoint().y}%`,\n }}\n />\n ) : null}\n </div>\n </div>\n );\n }\n}\n"],"names":["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: 450px) {\n display: block;\n bottom: initial;\n height: 100%;\n }\n }\n}\n\n.sleeve {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n max-width: 1200px;\n margin-left: auto;\n margin-right: auto;\n padding: 0;\n box-sizing: border-box;\n height: 100%;\n\n @media (min-width: #{$screen-mobile-max}) {\n flex-direction: column;\n }\n\n @media (min-width: #{$screen-mobile-max + 30px}) {\n // adding 30px to standard breakpoint to match padding.\n padding-left: 20px;\n align-items: start;\n height: 600px;\n }\n}\n\n@media (min-width: #{$screen-mobile-small + 30px}) {\n .short .sleeve {\n height: 400px;\n }\n}\n\n.content-wrap {\n position: relative;\n padding-top: 70px; // includes 30 extra on mobile to make space for overlapping 'main-message-wrap'\n padding-right: 30px;\n padding-left: 30px;\n padding-bottom: 30px;\n box-sizing: border-box;\n width: 100%;\n max-width: 450px;\n\n @media (min-width: #{$screen-mobile-small}) {\n margin-bottom: auto;\n margin-top: auto;\n padding-top: 40px;\n }\n\n @media (min-width: #{$screen-mobile-small + 30px}) {\n padding-top: 30px;\n margin-left: 0;\n }\n}\n\nimg.stacked {\n width: 100%;\n height: 100%;\n object-fit: cover;\n\n @media (min-width: #{$screen-mobile-small}) {\n display: none;\n }\n}\n\nh1.main-title {\n font-size: 47px;\n line-height: 60px;\n font-weight: bold;\n margin: 0 0 15px;\n padding: 0;\n}\n\n.slug {\n font-size: 20px;\n line-height: inherit;\n font-weight: bold;\n margin-bottom: -7px;\n}\n\n.teaser {\n margin: 0;\n padding: 0;\n}\n\n.logo {\n height: 100px;\n background-size: contain;\n background-repeat: no-repeat;\n background-position: left center;\n margin-bottom: 10px;\n\n img {\n width: auto;\n height: 100%;\n position: relative;\n }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * Heading banner component for use as a page header.\n *\n * This component provides a banner with a background image, optional logo, and text content.\n * It supports different heights and customizable colors.\n */\n@Component({\n tag: 'biggive-heading-banner',\n styleUrl: 'biggive-heading-banner.scss',\n shadow: true,\n})\nexport class BiggiveHeadingBanner {\n /**\n * Optional logo object with URL and alt text\n */\n @Prop() logo?: { url: string; alt?: string } | string;\n\n /**\n * Optional slightly smaller text to appear above the main title\n */\n @Prop() slug?: string = '';\n\n /**\n * Main title text for the banner\n */\n @Prop() mainTitle!: string;\n\n /**\n * URL for the main banner image\n */\n @Prop() mainImageUrl!: string | null;\n\n /**\n * Focal point for the image positioning\n * x and y values are percentages (0-100)\n */\n @Prop() focalPoint!: string | { x: number; y: number };\n\n /**\n * Optional teaser text that appears below the main title\n */\n @Prop() teaser!: string;\n\n /**\n * Background color for the banner\n */\n @Prop() backgroundColour!: string;\n\n /**\n * Background color for the text content area\n */\n @Prop() textBackgroundColour!: string;\n\n @Prop() slugColour!: string;\n\n @Prop() mainTitleColour!: string;\n\n @Prop() teaserColour!: string;\n\n /**\n * Height variant of the banner\n * 'tall' for full height, 'short' for reduced height\n */\n @Prop() height: 'short' | 'tall' = 'tall';\n\n /**\n * Takes a string that may contain any form of newlines, and returns an array that alternates\n * between substrings found between the newlines and <br/> elements as objects.\n */\n private lineBreakToBr(string: string | undefined): unknown[] {\n if (string == undefined) {\n return [];\n }\n\n return string\n .split(/\\r?\\n|\\r|\\n/g)\n .map(line => [line, <br />])\n .flat()\n .slice(0, -1);\n }\n\n private getParsedFocalPoint(): { x: number; y: number } {\n if (typeof this.focalPoint === 'string') {\n return JSON.parse(this.focalPoint);\n }\n return this.focalPoint;\n }\n\n private getParsedLogo(): { url: string; alt?: string } | undefined {\n if (this.logo === undefined) return undefined;\n if (typeof this.logo === 'string') {\n return JSON.parse(this.logo);\n }\n return this.logo;\n }\n\n render() {\n // Convert teaser text with line breaks to JSX\n const teaserLines = this.lineBreakToBr(this.teaser);\n\n // Ensure color values have # prefix if they're hex colors without it\n // not sure how but it seems we're sometimes doing at least an intiial render before the colour props are populated,\n // so using null-safe navigation to avoid a crash here.\n const bgColor = this.backgroundColour?.startsWith('#') ? this.backgroundColour : `#${this.backgroundColour}`;\n const textBgColor = this.textBackgroundColour?.startsWith('#') ? this.textBackgroundColour : `#${this.textBackgroundColour}`;\n const slugColour = this.slugColour?.startsWith('#') ? this.slugColour : `#${this.slugColour}`;\n const mainTitleColour = this.mainTitleColour?.startsWith('#') ? this.mainTitleColour : `#${this.mainTitleColour}`;\n const teaserColour = this.teaserColour?.startsWith('#') ? this.teaserColour : `#${this.teaserColour}`;\n\n const logo = this.getParsedLogo();\n return (\n <div\n class={{\n banner: true,\n short: this.height === 'short',\n }}\n style={{\n 'background-color': bgColor,\n }}\n >\n {typeof this.mainImageUrl === 'string' && this.mainImageUrl !== '' ? (\n <img\n class=\"background\"\n src={this.mainImageUrl}\n alt=\"\"\n style={{\n 'object-position': `${this.getParsedFocalPoint().x}% ${this.getParsedFocalPoint().y}%`,\n }}\n />\n ) : null}\n <div class=\"sleeve\">\n <div\n class=\"content-wrap\"\n style={{\n 'background-color': textBgColor,\n }}\n >\n {logo ? (\n <div class=\"logo\">\n <img src={logo.url} alt={logo.alt || ''} />\n </div>\n ) : null}\n\n {this.slug != undefined ? (\n <div\n style={{\n color: slugColour,\n }}\n class=\"slug\"\n >\n {this.slug}\n </div>\n ) : null}\n\n <h1\n style={{\n color: mainTitleColour,\n }}\n class=\"main-title\"\n >\n {this.mainTitle}\n </h1>\n\n {this.teaser != undefined ? (\n <div\n class=\"teaser\"\n style={{\n color: teaserColour,\n }}\n >\n {teaserLines}\n </div>\n ) : null}\n </div>\n\n {typeof this.mainImageUrl === 'string' && this.mainImageUrl !== '' ? (\n <img\n class=\"stacked\"\n src={this.mainImageUrl}\n alt=\"\"\n style={{\n 'object-position': `${this.getParsedFocalPoint().x}% ${this.getParsedFocalPoint().y}%`,\n }}\n />\n ) : null}\n </div>\n </div>\n );\n }\n}\n"],"names":["h"],"mappings":"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"}
|
|
@@ -46,27 +46,30 @@ export class BiggiveHeadingBanner {
|
|
|
46
46
|
return this.logo;
|
|
47
47
|
}
|
|
48
48
|
render() {
|
|
49
|
+
var _a, _b, _c, _d, _e;
|
|
49
50
|
// Convert teaser text with line breaks to JSX
|
|
50
51
|
const teaserLines = this.lineBreakToBr(this.teaser);
|
|
51
52
|
// Ensure color values have # prefix if they're hex colors without it
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
const
|
|
55
|
-
const
|
|
56
|
-
const
|
|
53
|
+
// not sure how but it seems we're sometimes doing at least an intiial render before the colour props are populated,
|
|
54
|
+
// so using null-safe navigation to avoid a crash here.
|
|
55
|
+
const bgColor = ((_a = this.backgroundColour) === null || _a === void 0 ? void 0 : _a.startsWith('#')) ? this.backgroundColour : `#${this.backgroundColour}`;
|
|
56
|
+
const textBgColor = ((_b = this.textBackgroundColour) === null || _b === void 0 ? void 0 : _b.startsWith('#')) ? this.textBackgroundColour : `#${this.textBackgroundColour}`;
|
|
57
|
+
const slugColour = ((_c = this.slugColour) === null || _c === void 0 ? void 0 : _c.startsWith('#')) ? this.slugColour : `#${this.slugColour}`;
|
|
58
|
+
const mainTitleColour = ((_d = this.mainTitleColour) === null || _d === void 0 ? void 0 : _d.startsWith('#')) ? this.mainTitleColour : `#${this.mainTitleColour}`;
|
|
59
|
+
const teaserColour = ((_e = this.teaserColour) === null || _e === void 0 ? void 0 : _e.startsWith('#')) ? this.teaserColour : `#${this.teaserColour}`;
|
|
57
60
|
const logo = this.getParsedLogo();
|
|
58
|
-
return (h("div", { key: '
|
|
61
|
+
return (h("div", { key: 'f1d20a1ffc7d8f49c1f1068de66135de634fbfe7', class: {
|
|
59
62
|
banner: true,
|
|
60
63
|
short: this.height === 'short',
|
|
61
64
|
}, style: {
|
|
62
65
|
'background-color': bgColor,
|
|
63
66
|
} }, typeof this.mainImageUrl === 'string' && this.mainImageUrl !== '' ? (h("img", { class: "background", src: this.mainImageUrl, alt: "", style: {
|
|
64
67
|
'object-position': `${this.getParsedFocalPoint().x}% ${this.getParsedFocalPoint().y}%`,
|
|
65
|
-
} })) : null, h("div", { key: '
|
|
68
|
+
} })) : null, h("div", { key: '3b3a185c3336799f757bc34ca7ff7ab1126b49d7', class: "sleeve" }, h("div", { key: 'b621ed5069510f13a385c606c36806f6f26ecab3', class: "content-wrap", style: {
|
|
66
69
|
'background-color': textBgColor,
|
|
67
70
|
} }, logo ? (h("div", { class: "logo" }, h("img", { src: logo.url, alt: logo.alt || '' }))) : null, this.slug != undefined ? (h("div", { style: {
|
|
68
71
|
color: slugColour,
|
|
69
|
-
}, class: "slug" }, this.slug)) : null, h("h1", { key: '
|
|
72
|
+
}, class: "slug" }, this.slug)) : null, h("h1", { key: '1a8ba9e55d7c038fc5a99d5e9014773de178254a', style: {
|
|
70
73
|
color: mainTitleColour,
|
|
71
74
|
}, class: "main-title" }, this.mainTitle), this.teaser != undefined ? (h("div", { class: "teaser", style: {
|
|
72
75
|
color: teaserColour,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"biggive-heading-banner.js","sourceRoot":"","sources":["../../../src/components/biggive-heading-banner/biggive-heading-banner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;;;;GAKG;AAMH,MAAM,OAAO,oBAAoB;IALjC;QAWE;;WAEG;QACK,SAAI,GAAY,EAAE,CAAC;QAuC3B;;;WAGG;QACK,WAAM,GAAqB,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"biggive-heading-banner.js","sourceRoot":"","sources":["../../../src/components/biggive-heading-banner/biggive-heading-banner.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n/**\n * Heading banner component for use as a page header.\n *\n * This component provides a banner with a background image, optional logo, and text content.\n * It supports different heights and customizable colors.\n */\n@Component({\n tag: 'biggive-heading-banner',\n styleUrl: 'biggive-heading-banner.scss',\n shadow: true,\n})\nexport class BiggiveHeadingBanner {\n /**\n * Optional logo object with URL and alt text\n */\n @Prop() logo?: { url: string; alt?: string } | string;\n\n /**\n * Optional slightly smaller text to appear above the main title\n */\n @Prop() slug?: string = '';\n\n /**\n * Main title text for the banner\n */\n @Prop() mainTitle!: string;\n\n /**\n * URL for the main banner image\n */\n @Prop() mainImageUrl!: string | null;\n\n /**\n * Focal point for the image positioning\n * x and y values are percentages (0-100)\n */\n @Prop() focalPoint!: string | { x: number; y: number };\n\n /**\n * Optional teaser text that appears below the main title\n */\n @Prop() teaser!: string;\n\n /**\n * Background color for the banner\n */\n @Prop() backgroundColour!: string;\n\n /**\n * Background color for the text content area\n */\n @Prop() textBackgroundColour!: string;\n\n @Prop() slugColour!: string;\n\n @Prop() mainTitleColour!: string;\n\n @Prop() teaserColour!: string;\n\n /**\n * Height variant of the banner\n * 'tall' for full height, 'short' for reduced height\n */\n @Prop() height: 'short' | 'tall' = 'tall';\n\n /**\n * Takes a string that may contain any form of newlines, and returns an array that alternates\n * between substrings found between the newlines and <br/> elements as objects.\n */\n private lineBreakToBr(string: string | undefined): unknown[] {\n if (string == undefined) {\n return [];\n }\n\n return string\n .split(/\\r?\\n|\\r|\\n/g)\n .map(line => [line, <br />])\n .flat()\n .slice(0, -1);\n }\n\n private getParsedFocalPoint(): { x: number; y: number } {\n if (typeof this.focalPoint === 'string') {\n return JSON.parse(this.focalPoint);\n }\n return this.focalPoint;\n }\n\n private getParsedLogo(): { url: string; alt?: string } | undefined {\n if (this.logo === undefined) return undefined;\n if (typeof this.logo === 'string') {\n return JSON.parse(this.logo);\n }\n return this.logo;\n }\n\n render() {\n // Convert teaser text with line breaks to JSX\n const teaserLines = this.lineBreakToBr(this.teaser);\n\n // Ensure color values have # prefix if they're hex colors without it\n // not sure how but it seems we're sometimes doing at least an intiial render before the colour props are populated,\n // so using null-safe navigation to avoid a crash here.\n const bgColor = this.backgroundColour?.startsWith('#') ? this.backgroundColour : `#${this.backgroundColour}`;\n const textBgColor = this.textBackgroundColour?.startsWith('#') ? this.textBackgroundColour : `#${this.textBackgroundColour}`;\n const slugColour = this.slugColour?.startsWith('#') ? this.slugColour : `#${this.slugColour}`;\n const mainTitleColour = this.mainTitleColour?.startsWith('#') ? this.mainTitleColour : `#${this.mainTitleColour}`;\n const teaserColour = this.teaserColour?.startsWith('#') ? this.teaserColour : `#${this.teaserColour}`;\n\n const logo = this.getParsedLogo();\n return (\n <div\n class={{\n banner: true,\n short: this.height === 'short',\n }}\n style={{\n 'background-color': bgColor,\n }}\n >\n {typeof this.mainImageUrl === 'string' && this.mainImageUrl !== '' ? (\n <img\n class=\"background\"\n src={this.mainImageUrl}\n alt=\"\"\n style={{\n 'object-position': `${this.getParsedFocalPoint().x}% ${this.getParsedFocalPoint().y}%`,\n }}\n />\n ) : null}\n <div class=\"sleeve\">\n <div\n class=\"content-wrap\"\n style={{\n 'background-color': textBgColor,\n }}\n >\n {logo ? (\n <div class=\"logo\">\n <img src={logo.url} alt={logo.alt || ''} />\n </div>\n ) : null}\n\n {this.slug != undefined ? (\n <div\n style={{\n color: slugColour,\n }}\n class=\"slug\"\n >\n {this.slug}\n </div>\n ) : null}\n\n <h1\n style={{\n color: mainTitleColour,\n }}\n class=\"main-title\"\n >\n {this.mainTitle}\n </h1>\n\n {this.teaser != undefined ? (\n <div\n class=\"teaser\"\n style={{\n color: teaserColour,\n }}\n >\n {teaserLines}\n </div>\n ) : null}\n </div>\n\n {typeof this.mainImageUrl === 'string' && this.mainImageUrl !== '' ? (\n <img\n class=\"stacked\"\n src={this.mainImageUrl}\n alt=\"\"\n style={{\n 'object-position': `${this.getParsedFocalPoint().x}% ${this.getParsedFocalPoint().y}%`,\n }}\n />\n ) : null}\n </div>\n </div>\n );\n }\n}\n"]}
|
|
@@ -46,27 +46,30 @@ const BiggiveHeadingBanner$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveHea
|
|
|
46
46
|
return this.logo;
|
|
47
47
|
}
|
|
48
48
|
render() {
|
|
49
|
+
var _a, _b, _c, _d, _e;
|
|
49
50
|
// Convert teaser text with line breaks to JSX
|
|
50
51
|
const teaserLines = this.lineBreakToBr(this.teaser);
|
|
51
52
|
// Ensure color values have # prefix if they're hex colors without it
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
const
|
|
55
|
-
const
|
|
56
|
-
const
|
|
53
|
+
// not sure how but it seems we're sometimes doing at least an intiial render before the colour props are populated,
|
|
54
|
+
// so using null-safe navigation to avoid a crash here.
|
|
55
|
+
const bgColor = ((_a = this.backgroundColour) === null || _a === void 0 ? void 0 : _a.startsWith('#')) ? this.backgroundColour : `#${this.backgroundColour}`;
|
|
56
|
+
const textBgColor = ((_b = this.textBackgroundColour) === null || _b === void 0 ? void 0 : _b.startsWith('#')) ? this.textBackgroundColour : `#${this.textBackgroundColour}`;
|
|
57
|
+
const slugColour = ((_c = this.slugColour) === null || _c === void 0 ? void 0 : _c.startsWith('#')) ? this.slugColour : `#${this.slugColour}`;
|
|
58
|
+
const mainTitleColour = ((_d = this.mainTitleColour) === null || _d === void 0 ? void 0 : _d.startsWith('#')) ? this.mainTitleColour : `#${this.mainTitleColour}`;
|
|
59
|
+
const teaserColour = ((_e = this.teaserColour) === null || _e === void 0 ? void 0 : _e.startsWith('#')) ? this.teaserColour : `#${this.teaserColour}`;
|
|
57
60
|
const logo = this.getParsedLogo();
|
|
58
|
-
return (h("div", { key: '
|
|
61
|
+
return (h("div", { key: 'f1d20a1ffc7d8f49c1f1068de66135de634fbfe7', class: {
|
|
59
62
|
banner: true,
|
|
60
63
|
short: this.height === 'short',
|
|
61
64
|
}, style: {
|
|
62
65
|
'background-color': bgColor,
|
|
63
66
|
} }, typeof this.mainImageUrl === 'string' && this.mainImageUrl !== '' ? (h("img", { class: "background", src: this.mainImageUrl, alt: "", style: {
|
|
64
67
|
'object-position': `${this.getParsedFocalPoint().x}% ${this.getParsedFocalPoint().y}%`,
|
|
65
|
-
} })) : null, h("div", { key: '
|
|
68
|
+
} })) : null, h("div", { key: '3b3a185c3336799f757bc34ca7ff7ab1126b49d7', class: "sleeve" }, h("div", { key: 'b621ed5069510f13a385c606c36806f6f26ecab3', class: "content-wrap", style: {
|
|
66
69
|
'background-color': textBgColor,
|
|
67
70
|
} }, logo ? (h("div", { class: "logo" }, h("img", { src: logo.url, alt: logo.alt || '' }))) : null, this.slug != undefined ? (h("div", { style: {
|
|
68
71
|
color: slugColour,
|
|
69
|
-
}, class: "slug" }, this.slug)) : null, h("h1", { key: '
|
|
72
|
+
}, class: "slug" }, this.slug)) : null, h("h1", { key: '1a8ba9e55d7c038fc5a99d5e9014773de178254a', style: {
|
|
70
73
|
color: mainTitleColour,
|
|
71
74
|
}, class: "main-title" }, this.mainTitle), this.teaser != undefined ? (h("div", { class: "teaser", style: {
|
|
72
75
|
color: teaserColour,
|
|
@@ -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: 450px) {\n display: block;\n bottom: initial;\n height: 100%;\n }\n }\n}\n\n.sleeve {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n max-width: 1200px;\n margin-left: auto;\n margin-right: auto;\n padding: 0;\n box-sizing: border-box;\n height: 100%;\n\n @media (min-width: #{$screen-mobile-max}) {\n flex-direction: column;\n }\n\n @media (min-width: #{$screen-mobile-max + 30px}) {\n // adding 30px to standard breakpoint to match padding.\n padding-left: 20px;\n align-items: start;\n height: 600px;\n }\n}\n\n@media (min-width: #{$screen-mobile-small + 30px}) {\n .short .sleeve {\n height: 400px;\n }\n}\n\n.content-wrap {\n position: relative;\n padding-top: 70px; // includes 30 extra on mobile to make space for overlapping 'main-message-wrap'\n padding-right: 30px;\n padding-left: 30px;\n padding-bottom: 30px;\n box-sizing: border-box;\n width: 100%;\n max-width: 450px;\n\n @media (min-width: #{$screen-mobile-small}) {\n margin-bottom: auto;\n margin-top: auto;\n padding-top: 40px;\n }\n\n @media (min-width: #{$screen-mobile-small + 30px}) {\n padding-top: 30px;\n margin-left: 0;\n }\n}\n\nimg.stacked {\n width: 100%;\n height: 100%;\n object-fit: cover;\n\n @media (min-width: #{$screen-mobile-small}) {\n display: none;\n }\n}\n\nh1.main-title {\n font-size: 47px;\n line-height: 60px;\n font-weight: bold;\n margin: 0 0 15px;\n padding: 0;\n}\n\n.slug {\n font-size: 20px;\n line-height: inherit;\n font-weight: bold;\n margin-bottom: -7px;\n}\n\n.teaser {\n margin: 0;\n padding: 0;\n}\n\n.logo {\n height: 100px;\n background-size: contain;\n background-repeat: no-repeat;\n background-position: left center;\n margin-bottom: 10px;\n\n img {\n width: auto;\n height: 100%;\n position: relative;\n }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * Heading banner component for use as a page header.\n *\n * This component provides a banner with a background image, optional logo, and text content.\n * It supports different heights and customizable colors.\n */\n@Component({\n tag: 'biggive-heading-banner',\n styleUrl: 'biggive-heading-banner.scss',\n shadow: true,\n})\nexport class BiggiveHeadingBanner {\n /**\n * Optional logo object with URL and alt text\n */\n @Prop() logo?: { url: string; alt?: string } | string;\n\n /**\n * Optional slightly smaller text to appear above the main title\n */\n @Prop() slug?: string = '';\n\n /**\n * Main title text for the banner\n */\n @Prop() mainTitle!: string;\n\n /**\n * URL for the main banner image\n */\n @Prop() mainImageUrl!: string | null;\n\n /**\n * Focal point for the image positioning\n * x and y values are percentages (0-100)\n */\n @Prop() focalPoint!: string | { x: number; y: number };\n\n /**\n * Optional teaser text that appears below the main title\n */\n @Prop() teaser!: string;\n\n /**\n * Background color for the banner\n */\n @Prop() backgroundColour!: string;\n\n /**\n * Background color for the text content area\n */\n @Prop() textBackgroundColour!: string;\n\n @Prop() slugColour!: string;\n\n @Prop() mainTitleColour!: string;\n\n @Prop() teaserColour!: string;\n\n /**\n * Height variant of the banner\n * 'tall' for full height, 'short' for reduced height\n */\n @Prop() height: 'short' | 'tall' = 'tall';\n\n /**\n * Takes a string that may contain any form of newlines, and returns an array that alternates\n * between substrings found between the newlines and <br/> elements as objects.\n */\n private lineBreakToBr(string: string | undefined): unknown[] {\n if (string == undefined) {\n return [];\n }\n\n return string\n .split(/\\r?\\n|\\r|\\n/g)\n .map(line => [line, <br />])\n .flat()\n .slice(0, -1);\n }\n\n private getParsedFocalPoint(): { x: number; y: number } {\n if (typeof this.focalPoint === 'string') {\n return JSON.parse(this.focalPoint);\n }\n return this.focalPoint;\n }\n\n private getParsedLogo(): { url: string; alt?: string } | undefined {\n if (this.logo === undefined) return undefined;\n if (typeof this.logo === 'string') {\n return JSON.parse(this.logo);\n }\n return this.logo;\n }\n\n render() {\n // Convert teaser text with line breaks to JSX\n const teaserLines = this.lineBreakToBr(this.teaser);\n\n // Ensure color values have # prefix if they're hex colors without it\n const bgColor = this.backgroundColour.startsWith('#') ? this.backgroundColour : `#${this.backgroundColour}`;\n const textBgColor = this.textBackgroundColour.startsWith('#') ? this.textBackgroundColour : `#${this.textBackgroundColour}`;\n const slugColour = this.slugColour.startsWith('#') ? this.slugColour : `#${this.slugColour}`;\n const mainTitleColour = this.mainTitleColour.startsWith('#') ? this.mainTitleColour : `#${this.mainTitleColour}`;\n const teaserColour = this.teaserColour.startsWith('#') ? this.teaserColour : `#${this.teaserColour}`;\n\n const logo = this.getParsedLogo();\n return (\n <div\n class={{\n banner: true,\n short: this.height === 'short',\n }}\n style={{\n 'background-color': bgColor,\n }}\n >\n {typeof this.mainImageUrl === 'string' && this.mainImageUrl !== '' ? (\n <img\n class=\"background\"\n src={this.mainImageUrl}\n alt=\"\"\n style={{\n 'object-position': `${this.getParsedFocalPoint().x}% ${this.getParsedFocalPoint().y}%`,\n }}\n />\n ) : null}\n <div class=\"sleeve\">\n <div\n class=\"content-wrap\"\n style={{\n 'background-color': textBgColor,\n }}\n >\n {logo ? (\n <div class=\"logo\">\n <img src={logo.url} alt={logo.alt || ''} />\n </div>\n ) : null}\n\n {this.slug != undefined ? (\n <div\n style={{\n color: slugColour,\n }}\n class=\"slug\"\n >\n {this.slug}\n </div>\n ) : null}\n\n <h1\n style={{\n color: mainTitleColour,\n }}\n class=\"main-title\"\n >\n {this.mainTitle}\n </h1>\n\n {this.teaser != undefined ? (\n <div\n class=\"teaser\"\n style={{\n color: teaserColour,\n }}\n >\n {teaserLines}\n </div>\n ) : null}\n </div>\n\n {typeof this.mainImageUrl === 'string' && this.mainImageUrl !== '' ? (\n <img\n class=\"stacked\"\n src={this.mainImageUrl}\n alt=\"\"\n style={{\n 'object-position': `${this.getParsedFocalPoint().x}% ${this.getParsedFocalPoint().y}%`,\n }}\n />\n ) : null}\n </div>\n </div>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"biggive-heading-banner.js","mappings":";;AAAA,MAAM,uBAAuB,GAAG,+9IAA+9I;;MCal/IA,sBAAoB,iBAAAC,kBAAA,CAAA,MAAA,oBAAA,SAAA,WAAA,CAAA;AALjC,IAAA,WAAA,GAAA;;;;AAWE;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAY,EAAE;AAuC1B;;;AAGG;AACK,QAAA,IAAM,CAAA,MAAA,GAAqB,MAAM;AA8H1C;AA5HC;;;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,EAAE,CAAM,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;QACjC,QACE,CACE,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,IAChE,CACE,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,EACR,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,QAAQ,EAAA,EACjB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,cAAc,EACpB,KAAK,EAAE;AACL,gBAAA,kBAAkB,EAAE,WAAW;aAChC,EAAA,EAEA,IAAI,IACH,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,MAAM,EAAA,EACf,CAAA,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,IACrB,CACE,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE;AACL,gBAAA,KAAK,EAAE,UAAU;aAClB,EACD,KAAK,EAAC,MAAM,EAAA,EAEX,IAAI,CAAC,IAAI,CACN,IACJ,IAAI,EAER,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,KAAK,EAAE,eAAe;AACvB,aAAA,EACD,KAAK,EAAC,YAAY,IAEjB,IAAI,CAAC,SAAS,CACZ,EAEJ,IAAI,CAAC,MAAM,IAAI,SAAS,IACvB,CAAA,CAAA,KAAA,EAAA,EACE,KAAK,EAAC,QAAQ,EACd,KAAK,EAAE;AACL,gBAAA,KAAK,EAAE,YAAY;aACpB,EAAA,EAEA,WAAW,CACR,IACJ,IAAI,CACJ,EAEL,OAAO,IAAI,CAAC,YAAY,KAAK,QAAQ,IAAI,IAAI,CAAC,YAAY,KAAK,EAAE,IAChE,CACE,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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: 450px) {\n display: block;\n bottom: initial;\n height: 100%;\n }\n }\n}\n\n.sleeve {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n max-width: 1200px;\n margin-left: auto;\n margin-right: auto;\n padding: 0;\n box-sizing: border-box;\n height: 100%;\n\n @media (min-width: #{$screen-mobile-max}) {\n flex-direction: column;\n }\n\n @media (min-width: #{$screen-mobile-max + 30px}) {\n // adding 30px to standard breakpoint to match padding.\n padding-left: 20px;\n align-items: start;\n height: 600px;\n }\n}\n\n@media (min-width: #{$screen-mobile-small + 30px}) {\n .short .sleeve {\n height: 400px;\n }\n}\n\n.content-wrap {\n position: relative;\n padding-top: 70px; // includes 30 extra on mobile to make space for overlapping 'main-message-wrap'\n padding-right: 30px;\n padding-left: 30px;\n padding-bottom: 30px;\n box-sizing: border-box;\n width: 100%;\n max-width: 450px;\n\n @media (min-width: #{$screen-mobile-small}) {\n margin-bottom: auto;\n margin-top: auto;\n padding-top: 40px;\n }\n\n @media (min-width: #{$screen-mobile-small + 30px}) {\n padding-top: 30px;\n margin-left: 0;\n }\n}\n\nimg.stacked {\n width: 100%;\n height: 100%;\n object-fit: cover;\n\n @media (min-width: #{$screen-mobile-small}) {\n display: none;\n }\n}\n\nh1.main-title {\n font-size: 47px;\n line-height: 60px;\n font-weight: bold;\n margin: 0 0 15px;\n padding: 0;\n}\n\n.slug {\n font-size: 20px;\n line-height: inherit;\n font-weight: bold;\n margin-bottom: -7px;\n}\n\n.teaser {\n margin: 0;\n padding: 0;\n}\n\n.logo {\n height: 100px;\n background-size: contain;\n background-repeat: no-repeat;\n background-position: left center;\n margin-bottom: 10px;\n\n img {\n width: auto;\n height: 100%;\n position: relative;\n }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * Heading banner component for use as a page header.\n *\n * This component provides a banner with a background image, optional logo, and text content.\n * It supports different heights and customizable colors.\n */\n@Component({\n tag: 'biggive-heading-banner',\n styleUrl: 'biggive-heading-banner.scss',\n shadow: true,\n})\nexport class BiggiveHeadingBanner {\n /**\n * Optional logo object with URL and alt text\n */\n @Prop() logo?: { url: string; alt?: string } | string;\n\n /**\n * Optional slightly smaller text to appear above the main title\n */\n @Prop() slug?: string = '';\n\n /**\n * Main title text for the banner\n */\n @Prop() mainTitle!: string;\n\n /**\n * URL for the main banner image\n */\n @Prop() mainImageUrl!: string | null;\n\n /**\n * Focal point for the image positioning\n * x and y values are percentages (0-100)\n */\n @Prop() focalPoint!: string | { x: number; y: number };\n\n /**\n * Optional teaser text that appears below the main title\n */\n @Prop() teaser!: string;\n\n /**\n * Background color for the banner\n */\n @Prop() backgroundColour!: string;\n\n /**\n * Background color for the text content area\n */\n @Prop() textBackgroundColour!: string;\n\n @Prop() slugColour!: string;\n\n @Prop() mainTitleColour!: string;\n\n @Prop() teaserColour!: string;\n\n /**\n * Height variant of the banner\n * 'tall' for full height, 'short' for reduced height\n */\n @Prop() height: 'short' | 'tall' = 'tall';\n\n /**\n * Takes a string that may contain any form of newlines, and returns an array that alternates\n * between substrings found between the newlines and <br/> elements as objects.\n */\n private lineBreakToBr(string: string | undefined): unknown[] {\n if (string == undefined) {\n return [];\n }\n\n return string\n .split(/\\r?\\n|\\r|\\n/g)\n .map(line => [line, <br />])\n .flat()\n .slice(0, -1);\n }\n\n private getParsedFocalPoint(): { x: number; y: number } {\n if (typeof this.focalPoint === 'string') {\n return JSON.parse(this.focalPoint);\n }\n return this.focalPoint;\n }\n\n private getParsedLogo(): { url: string; alt?: string } | undefined {\n if (this.logo === undefined) return undefined;\n if (typeof this.logo === 'string') {\n return JSON.parse(this.logo);\n }\n return this.logo;\n }\n\n render() {\n // Convert teaser text with line breaks to JSX\n const teaserLines = this.lineBreakToBr(this.teaser);\n\n // Ensure color values have # prefix if they're hex colors without it\n // not sure how but it seems we're sometimes doing at least an intiial render before the colour props are populated,\n // so using null-safe navigation to avoid a crash here.\n const bgColor = this.backgroundColour?.startsWith('#') ? this.backgroundColour : `#${this.backgroundColour}`;\n const textBgColor = this.textBackgroundColour?.startsWith('#') ? this.textBackgroundColour : `#${this.textBackgroundColour}`;\n const slugColour = this.slugColour?.startsWith('#') ? this.slugColour : `#${this.slugColour}`;\n const mainTitleColour = this.mainTitleColour?.startsWith('#') ? this.mainTitleColour : `#${this.mainTitleColour}`;\n const teaserColour = this.teaserColour?.startsWith('#') ? this.teaserColour : `#${this.teaserColour}`;\n\n const logo = this.getParsedLogo();\n return (\n <div\n class={{\n banner: true,\n short: this.height === 'short',\n }}\n style={{\n 'background-color': bgColor,\n }}\n >\n {typeof this.mainImageUrl === 'string' && this.mainImageUrl !== '' ? (\n <img\n class=\"background\"\n src={this.mainImageUrl}\n alt=\"\"\n style={{\n 'object-position': `${this.getParsedFocalPoint().x}% ${this.getParsedFocalPoint().y}%`,\n }}\n />\n ) : null}\n <div class=\"sleeve\">\n <div\n class=\"content-wrap\"\n style={{\n 'background-color': textBgColor,\n }}\n >\n {logo ? (\n <div class=\"logo\">\n <img src={logo.url} alt={logo.alt || ''} />\n </div>\n ) : null}\n\n {this.slug != undefined ? (\n <div\n style={{\n color: slugColour,\n }}\n class=\"slug\"\n >\n {this.slug}\n </div>\n ) : null}\n\n <h1\n style={{\n color: mainTitleColour,\n }}\n class=\"main-title\"\n >\n {this.mainTitle}\n </h1>\n\n {this.teaser != undefined ? (\n <div\n class=\"teaser\"\n style={{\n color: teaserColour,\n }}\n >\n {teaserLines}\n </div>\n ) : null}\n </div>\n\n {typeof this.mainImageUrl === 'string' && this.mainImageUrl !== '' ? (\n <img\n class=\"stacked\"\n src={this.mainImageUrl}\n alt=\"\"\n style={{\n 'object-position': `${this.getParsedFocalPoint().x}% ${this.getParsedFocalPoint().y}%`,\n }}\n />\n ) : null}\n </div>\n </div>\n );\n }\n}\n"],"version":3}
|
|
@@ -44,27 +44,30 @@ const BiggiveHeadingBanner = class {
|
|
|
44
44
|
return this.logo;
|
|
45
45
|
}
|
|
46
46
|
render() {
|
|
47
|
+
var _a, _b, _c, _d, _e;
|
|
47
48
|
// Convert teaser text with line breaks to JSX
|
|
48
49
|
const teaserLines = this.lineBreakToBr(this.teaser);
|
|
49
50
|
// Ensure color values have # prefix if they're hex colors without it
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
const
|
|
53
|
-
const
|
|
54
|
-
const
|
|
51
|
+
// not sure how but it seems we're sometimes doing at least an intiial render before the colour props are populated,
|
|
52
|
+
// so using null-safe navigation to avoid a crash here.
|
|
53
|
+
const bgColor = ((_a = this.backgroundColour) === null || _a === void 0 ? void 0 : _a.startsWith('#')) ? this.backgroundColour : `#${this.backgroundColour}`;
|
|
54
|
+
const textBgColor = ((_b = this.textBackgroundColour) === null || _b === void 0 ? void 0 : _b.startsWith('#')) ? this.textBackgroundColour : `#${this.textBackgroundColour}`;
|
|
55
|
+
const slugColour = ((_c = this.slugColour) === null || _c === void 0 ? void 0 : _c.startsWith('#')) ? this.slugColour : `#${this.slugColour}`;
|
|
56
|
+
const mainTitleColour = ((_d = this.mainTitleColour) === null || _d === void 0 ? void 0 : _d.startsWith('#')) ? this.mainTitleColour : `#${this.mainTitleColour}`;
|
|
57
|
+
const teaserColour = ((_e = this.teaserColour) === null || _e === void 0 ? void 0 : _e.startsWith('#')) ? this.teaserColour : `#${this.teaserColour}`;
|
|
55
58
|
const logo = this.getParsedLogo();
|
|
56
|
-
return (h("div", { key: '
|
|
59
|
+
return (h("div", { key: 'f1d20a1ffc7d8f49c1f1068de66135de634fbfe7', class: {
|
|
57
60
|
banner: true,
|
|
58
61
|
short: this.height === 'short',
|
|
59
62
|
}, style: {
|
|
60
63
|
'background-color': bgColor,
|
|
61
64
|
} }, typeof this.mainImageUrl === 'string' && this.mainImageUrl !== '' ? (h("img", { class: "background", src: this.mainImageUrl, alt: "", style: {
|
|
62
65
|
'object-position': `${this.getParsedFocalPoint().x}% ${this.getParsedFocalPoint().y}%`,
|
|
63
|
-
} })) : null, h("div", { key: '
|
|
66
|
+
} })) : null, h("div", { key: '3b3a185c3336799f757bc34ca7ff7ab1126b49d7', class: "sleeve" }, h("div", { key: 'b621ed5069510f13a385c606c36806f6f26ecab3', class: "content-wrap", style: {
|
|
64
67
|
'background-color': textBgColor,
|
|
65
68
|
} }, logo ? (h("div", { class: "logo" }, h("img", { src: logo.url, alt: logo.alt || '' }))) : null, this.slug != undefined ? (h("div", { style: {
|
|
66
69
|
color: slugColour,
|
|
67
|
-
}, class: "slug" }, this.slug)) : null, h("h1", { key: '
|
|
70
|
+
}, class: "slug" }, this.slug)) : null, h("h1", { key: '1a8ba9e55d7c038fc5a99d5e9014773de178254a', style: {
|
|
68
71
|
color: mainTitleColour,
|
|
69
72
|
}, class: "main-title" }, this.mainTitle), this.teaser != undefined ? (h("div", { class: "teaser", style: {
|
|
70
73
|
color: teaserColour,
|
|
@@ -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: 450px) {\n display: block;\n bottom: initial;\n height: 100%;\n }\n }\n}\n\n.sleeve {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n max-width: 1200px;\n margin-left: auto;\n margin-right: auto;\n padding: 0;\n box-sizing: border-box;\n height: 100%;\n\n @media (min-width: #{$screen-mobile-max}) {\n flex-direction: column;\n }\n\n @media (min-width: #{$screen-mobile-max + 30px}) {\n // adding 30px to standard breakpoint to match padding.\n padding-left: 20px;\n align-items: start;\n height: 600px;\n }\n}\n\n@media (min-width: #{$screen-mobile-small + 30px}) {\n .short .sleeve {\n height: 400px;\n }\n}\n\n.content-wrap {\n position: relative;\n padding-top: 70px; // includes 30 extra on mobile to make space for overlapping 'main-message-wrap'\n padding-right: 30px;\n padding-left: 30px;\n padding-bottom: 30px;\n box-sizing: border-box;\n width: 100%;\n max-width: 450px;\n\n @media (min-width: #{$screen-mobile-small}) {\n margin-bottom: auto;\n margin-top: auto;\n padding-top: 40px;\n }\n\n @media (min-width: #{$screen-mobile-small + 30px}) {\n padding-top: 30px;\n margin-left: 0;\n }\n}\n\nimg.stacked {\n width: 100%;\n height: 100%;\n object-fit: cover;\n\n @media (min-width: #{$screen-mobile-small}) {\n display: none;\n }\n}\n\nh1.main-title {\n font-size: 47px;\n line-height: 60px;\n font-weight: bold;\n margin: 0 0 15px;\n padding: 0;\n}\n\n.slug {\n font-size: 20px;\n line-height: inherit;\n font-weight: bold;\n margin-bottom: -7px;\n}\n\n.teaser {\n margin: 0;\n padding: 0;\n}\n\n.logo {\n height: 100px;\n background-size: contain;\n background-repeat: no-repeat;\n background-position: left center;\n margin-bottom: 10px;\n\n img {\n width: auto;\n height: 100%;\n position: relative;\n }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * Heading banner component for use as a page header.\n *\n * This component provides a banner with a background image, optional logo, and text content.\n * It supports different heights and customizable colors.\n */\n@Component({\n tag: 'biggive-heading-banner',\n styleUrl: 'biggive-heading-banner.scss',\n shadow: true,\n})\nexport class BiggiveHeadingBanner {\n /**\n * Optional logo object with URL and alt text\n */\n @Prop() logo?: { url: string; alt?: string } | string;\n\n /**\n * Optional slightly smaller text to appear above the main title\n */\n @Prop() slug?: string = '';\n\n /**\n * Main title text for the banner\n */\n @Prop() mainTitle!: string;\n\n /**\n * URL for the main banner image\n */\n @Prop() mainImageUrl!: string | null;\n\n /**\n * Focal point for the image positioning\n * x and y values are percentages (0-100)\n */\n @Prop() focalPoint!: string | { x: number; y: number };\n\n /**\n * Optional teaser text that appears below the main title\n */\n @Prop() teaser!: string;\n\n /**\n * Background color for the banner\n */\n @Prop() backgroundColour!: string;\n\n /**\n * Background color for the text content area\n */\n @Prop() textBackgroundColour!: string;\n\n @Prop() slugColour!: string;\n\n @Prop() mainTitleColour!: string;\n\n @Prop() teaserColour!: string;\n\n /**\n * Height variant of the banner\n * 'tall' for full height, 'short' for reduced height\n */\n @Prop() height: 'short' | 'tall' = 'tall';\n\n /**\n * Takes a string that may contain any form of newlines, and returns an array that alternates\n * between substrings found between the newlines and <br/> elements as objects.\n */\n private lineBreakToBr(string: string | undefined): unknown[] {\n if (string == undefined) {\n return [];\n }\n\n return string\n .split(/\\r?\\n|\\r|\\n/g)\n .map(line => [line, <br />])\n .flat()\n .slice(0, -1);\n }\n\n private getParsedFocalPoint(): { x: number; y: number } {\n if (typeof this.focalPoint === 'string') {\n return JSON.parse(this.focalPoint);\n }\n return this.focalPoint;\n }\n\n private getParsedLogo(): { url: string; alt?: string } | undefined {\n if (this.logo === undefined) return undefined;\n if (typeof this.logo === 'string') {\n return JSON.parse(this.logo);\n }\n return this.logo;\n }\n\n render() {\n // Convert teaser text with line breaks to JSX\n const teaserLines = this.lineBreakToBr(this.teaser);\n\n // Ensure color values have # prefix if they're hex colors without it\n const bgColor = this.backgroundColour.startsWith('#') ? this.backgroundColour : `#${this.backgroundColour}`;\n const textBgColor = this.textBackgroundColour.startsWith('#') ? this.textBackgroundColour : `#${this.textBackgroundColour}`;\n const slugColour = this.slugColour.startsWith('#') ? this.slugColour : `#${this.slugColour}`;\n const mainTitleColour = this.mainTitleColour.startsWith('#') ? this.mainTitleColour : `#${this.mainTitleColour}`;\n const teaserColour = this.teaserColour.startsWith('#') ? this.teaserColour : `#${this.teaserColour}`;\n\n const logo = this.getParsedLogo();\n return (\n <div\n class={{\n banner: true,\n short: this.height === 'short',\n }}\n style={{\n 'background-color': bgColor,\n }}\n >\n {typeof this.mainImageUrl === 'string' && this.mainImageUrl !== '' ? (\n <img\n class=\"background\"\n src={this.mainImageUrl}\n alt=\"\"\n style={{\n 'object-position': `${this.getParsedFocalPoint().x}% ${this.getParsedFocalPoint().y}%`,\n }}\n />\n ) : null}\n <div class=\"sleeve\">\n <div\n class=\"content-wrap\"\n style={{\n 'background-color': textBgColor,\n }}\n >\n {logo ? (\n <div class=\"logo\">\n <img src={logo.url} alt={logo.alt || ''} />\n </div>\n ) : null}\n\n {this.slug != undefined ? (\n <div\n style={{\n color: slugColour,\n }}\n class=\"slug\"\n >\n {this.slug}\n </div>\n ) : null}\n\n <h1\n style={{\n color: mainTitleColour,\n }}\n class=\"main-title\"\n >\n {this.mainTitle}\n </h1>\n\n {this.teaser != undefined ? (\n <div\n class=\"teaser\"\n style={{\n color: teaserColour,\n }}\n >\n {teaserLines}\n </div>\n ) : null}\n </div>\n\n {typeof this.mainImageUrl === 'string' && this.mainImageUrl !== '' ? (\n <img\n class=\"stacked\"\n src={this.mainImageUrl}\n alt=\"\"\n style={{\n 'object-position': `${this.getParsedFocalPoint().x}% ${this.getParsedFocalPoint().y}%`,\n }}\n />\n ) : null}\n </div>\n </div>\n );\n }\n}\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"biggive-heading-banner.entry.js","sources":["src/components/biggive-heading-banner/biggive-heading-banner.scss?tag=biggive-heading-banner&encapsulation=shadow","src/components/biggive-heading-banner/biggive-heading-banner.tsx"],"sourcesContent":[":host {\n display: contents;\n @include standard-font();\n}\n\n@include spacers();\n@include text-colours();\n\n.banner {\n font-size: 17px;\n background-size: cover;\n height: 600px;\n position: relative;\n overflow: hidden;\n\n &.short {\n height: 400px;\n }\n\n img.background {\n object-fit: cover;\n position: absolute;\n max-width: 2000px;\n width: 100%;\n height: 400px;\n left: 50%;\n transform: translateX(-50%);\n bottom: 0;\n display: none;\n @media (min-width: 450px) {\n display: block;\n bottom: initial;\n height: 100%;\n }\n }\n}\n\n.sleeve {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n max-width: 1200px;\n margin-left: auto;\n margin-right: auto;\n padding: 0;\n box-sizing: border-box;\n height: 100%;\n\n @media (min-width: #{$screen-mobile-max}) {\n flex-direction: column;\n }\n\n @media (min-width: #{$screen-mobile-max + 30px}) {\n // adding 30px to standard breakpoint to match padding.\n padding-left: 20px;\n align-items: start;\n height: 600px;\n }\n}\n\n@media (min-width: #{$screen-mobile-small + 30px}) {\n .short .sleeve {\n height: 400px;\n }\n}\n\n.content-wrap {\n position: relative;\n padding-top: 70px; // includes 30 extra on mobile to make space for overlapping 'main-message-wrap'\n padding-right: 30px;\n padding-left: 30px;\n padding-bottom: 30px;\n box-sizing: border-box;\n width: 100%;\n max-width: 450px;\n\n @media (min-width: #{$screen-mobile-small}) {\n margin-bottom: auto;\n margin-top: auto;\n padding-top: 40px;\n }\n\n @media (min-width: #{$screen-mobile-small + 30px}) {\n padding-top: 30px;\n margin-left: 0;\n }\n}\n\nimg.stacked {\n width: 100%;\n height: 100%;\n object-fit: cover;\n\n @media (min-width: #{$screen-mobile-small}) {\n display: none;\n }\n}\n\nh1.main-title {\n font-size: 47px;\n line-height: 60px;\n font-weight: bold;\n margin: 0 0 15px;\n padding: 0;\n}\n\n.slug {\n font-size: 20px;\n line-height: inherit;\n font-weight: bold;\n margin-bottom: -7px;\n}\n\n.teaser {\n margin: 0;\n padding: 0;\n}\n\n.logo {\n height: 100px;\n background-size: contain;\n background-repeat: no-repeat;\n background-position: left center;\n margin-bottom: 10px;\n\n img {\n width: auto;\n height: 100%;\n position: relative;\n }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * Heading banner component for use as a page header.\n *\n * This component provides a banner with a background image, optional logo, and text content.\n * It supports different heights and customizable colors.\n */\n@Component({\n tag: 'biggive-heading-banner',\n styleUrl: 'biggive-heading-banner.scss',\n shadow: true,\n})\nexport class BiggiveHeadingBanner {\n /**\n * Optional logo object with URL and alt text\n */\n @Prop() logo?: { url: string; alt?: string } | string;\n\n /**\n * Optional slightly smaller text to appear above the main title\n */\n @Prop() slug?: string = '';\n\n /**\n * Main title text for the banner\n */\n @Prop() mainTitle!: string;\n\n /**\n * URL for the main banner image\n */\n @Prop() mainImageUrl!: string | null;\n\n /**\n * Focal point for the image positioning\n * x and y values are percentages (0-100)\n */\n @Prop() focalPoint!: string | { x: number; y: number };\n\n /**\n * Optional teaser text that appears below the main title\n */\n @Prop() teaser!: string;\n\n /**\n * Background color for the banner\n */\n @Prop() backgroundColour!: string;\n\n /**\n * Background color for the text content area\n */\n @Prop() textBackgroundColour!: string;\n\n @Prop() slugColour!: string;\n\n @Prop() mainTitleColour!: string;\n\n @Prop() teaserColour!: string;\n\n /**\n * Height variant of the banner\n * 'tall' for full height, 'short' for reduced height\n */\n @Prop() height: 'short' | 'tall' = 'tall';\n\n /**\n * Takes a string that may contain any form of newlines, and returns an array that alternates\n * between substrings found between the newlines and <br/> elements as objects.\n */\n private lineBreakToBr(string: string | undefined): unknown[] {\n if (string == undefined) {\n return [];\n }\n\n return string\n .split(/\\r?\\n|\\r|\\n/g)\n .map(line => [line, <br />])\n .flat()\n .slice(0, -1);\n }\n\n private getParsedFocalPoint(): { x: number; y: number } {\n if (typeof this.focalPoint === 'string') {\n return JSON.parse(this.focalPoint);\n }\n return this.focalPoint;\n }\n\n private getParsedLogo(): { url: string; alt?: string } | undefined {\n if (this.logo === undefined) return undefined;\n if (typeof this.logo === 'string') {\n return JSON.parse(this.logo);\n }\n return this.logo;\n }\n\n render() {\n // Convert teaser text with line breaks to JSX\n const teaserLines = this.lineBreakToBr(this.teaser);\n\n // Ensure color values have # prefix if they're hex colors without it\n // not sure how but it seems we're sometimes doing at least an intiial render before the colour props are populated,\n // so using null-safe navigation to avoid a crash here.\n const bgColor = this.backgroundColour?.startsWith('#') ? this.backgroundColour : `#${this.backgroundColour}`;\n const textBgColor = this.textBackgroundColour?.startsWith('#') ? this.textBackgroundColour : `#${this.textBackgroundColour}`;\n const slugColour = this.slugColour?.startsWith('#') ? this.slugColour : `#${this.slugColour}`;\n const mainTitleColour = this.mainTitleColour?.startsWith('#') ? this.mainTitleColour : `#${this.mainTitleColour}`;\n const teaserColour = this.teaserColour?.startsWith('#') ? this.teaserColour : `#${this.teaserColour}`;\n\n const logo = this.getParsedLogo();\n return (\n <div\n class={{\n banner: true,\n short: this.height === 'short',\n }}\n style={{\n 'background-color': bgColor,\n }}\n >\n {typeof this.mainImageUrl === 'string' && this.mainImageUrl !== '' ? (\n <img\n class=\"background\"\n src={this.mainImageUrl}\n alt=\"\"\n style={{\n 'object-position': `${this.getParsedFocalPoint().x}% ${this.getParsedFocalPoint().y}%`,\n }}\n />\n ) : null}\n <div class=\"sleeve\">\n <div\n class=\"content-wrap\"\n style={{\n 'background-color': textBgColor,\n }}\n >\n {logo ? (\n <div class=\"logo\">\n <img src={logo.url} alt={logo.alt || ''} />\n </div>\n ) : null}\n\n {this.slug != undefined ? (\n <div\n style={{\n color: slugColour,\n }}\n class=\"slug\"\n >\n {this.slug}\n </div>\n ) : null}\n\n <h1\n style={{\n color: mainTitleColour,\n }}\n class=\"main-title\"\n >\n {this.mainTitle}\n </h1>\n\n {this.teaser != undefined ? (\n <div\n class=\"teaser\"\n style={{\n color: teaserColour,\n }}\n >\n {teaserLines}\n </div>\n ) : null}\n </div>\n\n {typeof this.mainImageUrl === 'string' && this.mainImageUrl !== '' ? (\n <img\n class=\"stacked\"\n src={this.mainImageUrl}\n alt=\"\"\n style={{\n 'object-position': `${this.getParsedFocalPoint().x}% ${this.getParsedFocalPoint().y}%`,\n }}\n />\n ) : null}\n </div>\n </div>\n );\n }\n}\n"],"names":[],"mappings":"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"}
|
package/hydrate/index.js
CHANGED
|
@@ -4750,27 +4750,30 @@ class BiggiveHeadingBanner {
|
|
|
4750
4750
|
return this.logo;
|
|
4751
4751
|
}
|
|
4752
4752
|
render() {
|
|
4753
|
+
var _a, _b, _c, _d, _e;
|
|
4753
4754
|
// Convert teaser text with line breaks to JSX
|
|
4754
4755
|
const teaserLines = this.lineBreakToBr(this.teaser);
|
|
4755
4756
|
// Ensure color values have # prefix if they're hex colors without it
|
|
4756
|
-
|
|
4757
|
-
|
|
4758
|
-
const
|
|
4759
|
-
const
|
|
4760
|
-
const
|
|
4757
|
+
// not sure how but it seems we're sometimes doing at least an intiial render before the colour props are populated,
|
|
4758
|
+
// so using null-safe navigation to avoid a crash here.
|
|
4759
|
+
const bgColor = ((_a = this.backgroundColour) === null || _a === void 0 ? void 0 : _a.startsWith('#')) ? this.backgroundColour : `#${this.backgroundColour}`;
|
|
4760
|
+
const textBgColor = ((_b = this.textBackgroundColour) === null || _b === void 0 ? void 0 : _b.startsWith('#')) ? this.textBackgroundColour : `#${this.textBackgroundColour}`;
|
|
4761
|
+
const slugColour = ((_c = this.slugColour) === null || _c === void 0 ? void 0 : _c.startsWith('#')) ? this.slugColour : `#${this.slugColour}`;
|
|
4762
|
+
const mainTitleColour = ((_d = this.mainTitleColour) === null || _d === void 0 ? void 0 : _d.startsWith('#')) ? this.mainTitleColour : `#${this.mainTitleColour}`;
|
|
4763
|
+
const teaserColour = ((_e = this.teaserColour) === null || _e === void 0 ? void 0 : _e.startsWith('#')) ? this.teaserColour : `#${this.teaserColour}`;
|
|
4761
4764
|
const logo = this.getParsedLogo();
|
|
4762
|
-
return (hAsync("div", { key: '
|
|
4765
|
+
return (hAsync("div", { key: 'f1d20a1ffc7d8f49c1f1068de66135de634fbfe7', class: {
|
|
4763
4766
|
banner: true,
|
|
4764
4767
|
short: this.height === 'short',
|
|
4765
4768
|
}, style: {
|
|
4766
4769
|
'background-color': bgColor,
|
|
4767
4770
|
} }, typeof this.mainImageUrl === 'string' && this.mainImageUrl !== '' ? (hAsync("img", { class: "background", src: this.mainImageUrl, alt: "", style: {
|
|
4768
4771
|
'object-position': `${this.getParsedFocalPoint().x}% ${this.getParsedFocalPoint().y}%`,
|
|
4769
|
-
} })) : null, hAsync("div", { key: '
|
|
4772
|
+
} })) : null, hAsync("div", { key: '3b3a185c3336799f757bc34ca7ff7ab1126b49d7', class: "sleeve" }, hAsync("div", { key: 'b621ed5069510f13a385c606c36806f6f26ecab3', class: "content-wrap", style: {
|
|
4770
4773
|
'background-color': textBgColor,
|
|
4771
4774
|
} }, logo ? (hAsync("div", { class: "logo" }, hAsync("img", { src: logo.url, alt: logo.alt || '' }))) : null, this.slug != undefined ? (hAsync("div", { style: {
|
|
4772
4775
|
color: slugColour,
|
|
4773
|
-
}, class: "slug" }, this.slug)) : null, hAsync("h1", { key: '
|
|
4776
|
+
}, class: "slug" }, this.slug)) : null, hAsync("h1", { key: '1a8ba9e55d7c038fc5a99d5e9014773de178254a', style: {
|
|
4774
4777
|
color: mainTitleColour,
|
|
4775
4778
|
}, class: "main-title" }, this.mainTitle), this.teaser != undefined ? (hAsync("div", { class: "teaser", style: {
|
|
4776
4779
|
color: teaserColour,
|
package/hydrate/index.mjs
CHANGED
|
@@ -4748,27 +4748,30 @@ class BiggiveHeadingBanner {
|
|
|
4748
4748
|
return this.logo;
|
|
4749
4749
|
}
|
|
4750
4750
|
render() {
|
|
4751
|
+
var _a, _b, _c, _d, _e;
|
|
4751
4752
|
// Convert teaser text with line breaks to JSX
|
|
4752
4753
|
const teaserLines = this.lineBreakToBr(this.teaser);
|
|
4753
4754
|
// Ensure color values have # prefix if they're hex colors without it
|
|
4754
|
-
|
|
4755
|
-
|
|
4756
|
-
const
|
|
4757
|
-
const
|
|
4758
|
-
const
|
|
4755
|
+
// not sure how but it seems we're sometimes doing at least an intiial render before the colour props are populated,
|
|
4756
|
+
// so using null-safe navigation to avoid a crash here.
|
|
4757
|
+
const bgColor = ((_a = this.backgroundColour) === null || _a === void 0 ? void 0 : _a.startsWith('#')) ? this.backgroundColour : `#${this.backgroundColour}`;
|
|
4758
|
+
const textBgColor = ((_b = this.textBackgroundColour) === null || _b === void 0 ? void 0 : _b.startsWith('#')) ? this.textBackgroundColour : `#${this.textBackgroundColour}`;
|
|
4759
|
+
const slugColour = ((_c = this.slugColour) === null || _c === void 0 ? void 0 : _c.startsWith('#')) ? this.slugColour : `#${this.slugColour}`;
|
|
4760
|
+
const mainTitleColour = ((_d = this.mainTitleColour) === null || _d === void 0 ? void 0 : _d.startsWith('#')) ? this.mainTitleColour : `#${this.mainTitleColour}`;
|
|
4761
|
+
const teaserColour = ((_e = this.teaserColour) === null || _e === void 0 ? void 0 : _e.startsWith('#')) ? this.teaserColour : `#${this.teaserColour}`;
|
|
4759
4762
|
const logo = this.getParsedLogo();
|
|
4760
|
-
return (hAsync("div", { key: '
|
|
4763
|
+
return (hAsync("div", { key: 'f1d20a1ffc7d8f49c1f1068de66135de634fbfe7', class: {
|
|
4761
4764
|
banner: true,
|
|
4762
4765
|
short: this.height === 'short',
|
|
4763
4766
|
}, style: {
|
|
4764
4767
|
'background-color': bgColor,
|
|
4765
4768
|
} }, typeof this.mainImageUrl === 'string' && this.mainImageUrl !== '' ? (hAsync("img", { class: "background", src: this.mainImageUrl, alt: "", style: {
|
|
4766
4769
|
'object-position': `${this.getParsedFocalPoint().x}% ${this.getParsedFocalPoint().y}%`,
|
|
4767
|
-
} })) : null, hAsync("div", { key: '
|
|
4770
|
+
} })) : null, hAsync("div", { key: '3b3a185c3336799f757bc34ca7ff7ab1126b49d7', class: "sleeve" }, hAsync("div", { key: 'b621ed5069510f13a385c606c36806f6f26ecab3', class: "content-wrap", style: {
|
|
4768
4771
|
'background-color': textBgColor,
|
|
4769
4772
|
} }, logo ? (hAsync("div", { class: "logo" }, hAsync("img", { src: logo.url, alt: logo.alt || '' }))) : null, this.slug != undefined ? (hAsync("div", { style: {
|
|
4770
4773
|
color: slugColour,
|
|
4771
|
-
}, class: "slug" }, this.slug)) : null, hAsync("h1", { key: '
|
|
4774
|
+
}, class: "slug" }, this.slug)) : null, hAsync("h1", { key: '1a8ba9e55d7c038fc5a99d5e9014773de178254a', style: {
|
|
4772
4775
|
color: mainTitleColour,
|
|
4773
4776
|
}, class: "main-title" }, this.mainTitle), this.teaser != undefined ? (hAsync("div", { class: "teaser", style: {
|
|
4774
4777
|
color: teaserColour,
|
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": "
|
|
4
|
+
"version": "202508011615.0.0",
|
|
5
5
|
"description": "Big Give Components",
|
|
6
6
|
"main": "dist/index.cjs.js",
|
|
7
7
|
"module": "dist/index.js",
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["biggiveHeadingBannerCss","BiggiveHeadingBanner","constructor","hostRef","this","slug","height","lineBreakToBr","string","undefined","split","map","line","h","flat","slice","getParsedFocalPoint","focalPoint","JSON","parse","getParsedLogo","logo","render","teaserLines","teaser","bgColor","backgroundColour","startsWith","textBgColor","textBackgroundColour","slugColour","mainTitleColour","teaserColour","key","class","banner","short","style","mainImageUrl","src","alt","x","y","url","color","mainTitle"],"sources":["src/components/biggive-heading-banner/biggive-heading-banner.scss?tag=biggive-heading-banner&encapsulation=shadow","src/components/biggive-heading-banner/biggive-heading-banner.tsx"],"sourcesContent":[":host {\n display: contents;\n @include standard-font();\n}\n\n@include spacers();\n@include text-colours();\n\n.banner {\n font-size: 17px;\n background-size: cover;\n height: 600px;\n position: relative;\n overflow: hidden;\n\n &.short {\n height: 400px;\n }\n\n img.background {\n object-fit: cover;\n position: absolute;\n max-width: 2000px;\n width: 100%;\n height: 400px;\n left: 50%;\n transform: translateX(-50%);\n bottom: 0;\n display: none;\n @media (min-width: 450px) {\n display: block;\n bottom: initial;\n height: 100%;\n }\n }\n}\n\n.sleeve {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n max-width: 1200px;\n margin-left: auto;\n margin-right: auto;\n padding: 0;\n box-sizing: border-box;\n height: 100%;\n\n @media (min-width: #{$screen-mobile-max}) {\n flex-direction: column;\n }\n\n @media (min-width: #{$screen-mobile-max + 30px}) {\n // adding 30px to standard breakpoint to match padding.\n padding-left: 20px;\n align-items: start;\n height: 600px;\n }\n}\n\n@media (min-width: #{$screen-mobile-small + 30px}) {\n .short .sleeve {\n height: 400px;\n }\n}\n\n.content-wrap {\n position: relative;\n padding-top: 70px; // includes 30 extra on mobile to make space for overlapping 'main-message-wrap'\n padding-right: 30px;\n padding-left: 30px;\n padding-bottom: 30px;\n box-sizing: border-box;\n width: 100%;\n max-width: 450px;\n\n @media (min-width: #{$screen-mobile-small}) {\n margin-bottom: auto;\n margin-top: auto;\n padding-top: 40px;\n }\n\n @media (min-width: #{$screen-mobile-small + 30px}) {\n padding-top: 30px;\n margin-left: 0;\n }\n}\n\nimg.stacked {\n width: 100%;\n height: 100%;\n object-fit: cover;\n\n @media (min-width: #{$screen-mobile-small}) {\n display: none;\n }\n}\n\nh1.main-title {\n font-size: 47px;\n line-height: 60px;\n font-weight: bold;\n margin: 0 0 15px;\n padding: 0;\n}\n\n.slug {\n font-size: 20px;\n line-height: inherit;\n font-weight: bold;\n margin-bottom: -7px;\n}\n\n.teaser {\n margin: 0;\n padding: 0;\n}\n\n.logo {\n height: 100px;\n background-size: contain;\n background-repeat: no-repeat;\n background-position: left center;\n margin-bottom: 10px;\n\n img {\n width: auto;\n height: 100%;\n position: relative;\n }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * Heading banner component for use as a page header.\n *\n * This component provides a banner with a background image, optional logo, and text content.\n * It supports different heights and customizable colors.\n */\n@Component({\n tag: 'biggive-heading-banner',\n styleUrl: 'biggive-heading-banner.scss',\n shadow: true,\n})\nexport class BiggiveHeadingBanner {\n /**\n * Optional logo object with URL and alt text\n */\n @Prop() logo?: { url: string; alt?: string } | string;\n\n /**\n * Optional slightly smaller text to appear above the main title\n */\n @Prop() slug?: string = '';\n\n /**\n * Main title text for the banner\n */\n @Prop() mainTitle!: string;\n\n /**\n * URL for the main banner image\n */\n @Prop() mainImageUrl!: string | null;\n\n /**\n * Focal point for the image positioning\n * x and y values are percentages (0-100)\n */\n @Prop() focalPoint!: string | { x: number; y: number };\n\n /**\n * Optional teaser text that appears below the main title\n */\n @Prop() teaser!: string;\n\n /**\n * Background color for the banner\n */\n @Prop() backgroundColour!: string;\n\n /**\n * Background color for the text content area\n */\n @Prop() textBackgroundColour!: string;\n\n @Prop() slugColour!: string;\n\n @Prop() mainTitleColour!: string;\n\n @Prop() teaserColour!: string;\n\n /**\n * Height variant of the banner\n * 'tall' for full height, 'short' for reduced height\n */\n @Prop() height: 'short' | 'tall' = 'tall';\n\n /**\n * Takes a string that may contain any form of newlines, and returns an array that alternates\n * between substrings found between the newlines and <br/> elements as objects.\n */\n private lineBreakToBr(string: string | undefined): unknown[] {\n if (string == undefined) {\n return [];\n }\n\n return string\n .split(/\\r?\\n|\\r|\\n/g)\n .map(line => [line, <br />])\n .flat()\n .slice(0, -1);\n }\n\n private getParsedFocalPoint(): { x: number; y: number } {\n if (typeof this.focalPoint === 'string') {\n return JSON.parse(this.focalPoint);\n }\n return this.focalPoint;\n }\n\n private getParsedLogo(): { url: string; alt?: string } | undefined {\n if (this.logo === undefined) return undefined;\n if (typeof this.logo === 'string') {\n return JSON.parse(this.logo);\n }\n return this.logo;\n }\n\n render() {\n // Convert teaser text with line breaks to JSX\n const teaserLines = this.lineBreakToBr(this.teaser);\n\n // Ensure color values have # prefix if they're hex colors without it\n const bgColor = this.backgroundColour.startsWith('#') ? this.backgroundColour : `#${this.backgroundColour}`;\n const textBgColor = this.textBackgroundColour.startsWith('#') ? this.textBackgroundColour : `#${this.textBackgroundColour}`;\n const slugColour = this.slugColour.startsWith('#') ? this.slugColour : `#${this.slugColour}`;\n const mainTitleColour = this.mainTitleColour.startsWith('#') ? this.mainTitleColour : `#${this.mainTitleColour}`;\n const teaserColour = this.teaserColour.startsWith('#') ? this.teaserColour : `#${this.teaserColour}`;\n\n const logo = this.getParsedLogo();\n return (\n <div\n class={{\n banner: true,\n short: this.height === 'short',\n }}\n style={{\n 'background-color': bgColor,\n }}\n >\n {typeof this.mainImageUrl === 'string' && this.mainImageUrl !== '' ? (\n <img\n class=\"background\"\n src={this.mainImageUrl}\n alt=\"\"\n style={{\n 'object-position': `${this.getParsedFocalPoint().x}% ${this.getParsedFocalPoint().y}%`,\n }}\n />\n ) : null}\n <div class=\"sleeve\">\n <div\n class=\"content-wrap\"\n style={{\n 'background-color': textBgColor,\n }}\n >\n {logo ? (\n <div class=\"logo\">\n <img src={logo.url} alt={logo.alt || ''} />\n </div>\n ) : null}\n\n {this.slug != undefined ? (\n <div\n style={{\n color: slugColour,\n }}\n class=\"slug\"\n >\n {this.slug}\n </div>\n ) : null}\n\n <h1\n style={{\n color: mainTitleColour,\n }}\n class=\"main-title\"\n >\n {this.mainTitle}\n </h1>\n\n {this.teaser != undefined ? (\n <div\n class=\"teaser\"\n style={{\n color: teaserColour,\n }}\n >\n {teaserLines}\n </div>\n ) : null}\n </div>\n\n {typeof this.mainImageUrl === 'string' && this.mainImageUrl !== '' ? (\n <img\n class=\"stacked\"\n src={this.mainImageUrl}\n alt=\"\"\n style={{\n 'object-position': `${this.getParsedFocalPoint().x}% ${this.getParsedFocalPoint().y}%`,\n }}\n />\n ) : null}\n </div>\n </div>\n );\n }\n}\n"],"mappings":"2CAAA,MAAMA,EAA0B,89I,MCanBC,EAAoB,MALjC,WAAAC,CAAAC,G,UAcUC,KAAIC,KAAY,GA2ChBD,KAAME,OAAqB,MA4HpC,CAtHS,aAAAC,CAAcC,GACpB,GAAIA,GAAUC,UAAW,CACvB,MAAO,E,CAGT,OAAOD,EACJE,MAAM,gBACNC,KAAIC,GAAQ,CAACA,EAAMC,EAAM,cACzBC,OACAC,MAAM,GAAG,E,CAGN,mBAAAC,GACN,UAAWZ,KAAKa,aAAe,SAAU,CACvC,OAAOC,KAAKC,MAAMf,KAAKa,W,CAEzB,OAAOb,KAAKa,U,CAGN,aAAAG,GACN,GAAIhB,KAAKiB,OAASZ,UAAW,OAAOA,UACpC,UAAWL,KAAKiB,OAAS,SAAU,CACjC,OAAOH,KAAKC,MAAMf,KAAKiB,K,CAEzB,OAAOjB,KAAKiB,I,CAGd,MAAAC,GAEE,MAAMC,EAAcnB,KAAKG,cAAcH,KAAKoB,QAG5C,MAAMC,EAAUrB,KAAKsB,iBAAiBC,WAAW,KAAOvB,KAAKsB,iBAAmB,IAAItB,KAAKsB,mBACzF,MAAME,EAAcxB,KAAKyB,qBAAqBF,WAAW,KAAOvB,KAAKyB,qBAAuB,IAAIzB,KAAKyB,uBACrG,MAAMC,EAAa1B,KAAK0B,WAAWH,WAAW,KAAOvB,KAAK0B,WAAa,IAAI1B,KAAK0B,aAChF,MAAMC,EAAkB3B,KAAK2B,gBAAgBJ,WAAW,KAAOvB,KAAK2B,gBAAkB,IAAI3B,KAAK2B,kBAC/F,MAAMC,EAAe5B,KAAK4B,aAAaL,WAAW,KAAOvB,KAAK4B,aAAe,IAAI5B,KAAK4B,eAEtF,MAAMX,EAAOjB,KAAKgB,gBAClB,OACEP,EACE,OAAAoB,IAAA,2CAAAC,MAAO,CACLC,OAAQ,KACRC,MAAOhC,KAAKE,SAAW,SAEzB+B,MAAO,CACL,mBAAoBZ,WAGdrB,KAAKkC,eAAiB,UAAYlC,KAAKkC,eAAiB,GAC9DzB,EACE,OAAAqB,MAAM,aACNK,IAAKnC,KAAKkC,aACVE,IAAI,GACJH,MAAO,CACL,kBAAmB,GAAGjC,KAAKY,sBAAsByB,MAAMrC,KAAKY,sBAAsB0B,QAGpF,KACJ7B,EAAK,OAAAoB,IAAA,2CAAAC,MAAM,UACTrB,EAAA,OAAAoB,IAAA,2CACEC,MAAM,eACNG,MAAO,CACL,mBAAoBT,IAGrBP,EACCR,EAAK,OAAAqB,MAAM,QACTrB,EAAA,OAAK0B,IAAKlB,EAAKsB,IAAKH,IAAKnB,EAAKmB,KAAO,MAErC,KAEHpC,KAAKC,MAAQI,UACZI,EACE,OAAAwB,MAAO,CACLO,MAAOd,GAETI,MAAM,QAEL9B,KAAKC,MAEN,KAEJQ,EAAA,MAAAoB,IAAA,2CACEI,MAAO,CACLO,MAAOb,GAETG,MAAM,cAEL9B,KAAKyC,WAGPzC,KAAKoB,QAAUf,UACdI,EAAA,OACEqB,MAAM,SACNG,MAAO,CACLO,MAAOZ,IAGRT,GAED,aAGEnB,KAAKkC,eAAiB,UAAYlC,KAAKkC,eAAiB,GAC9DzB,EACE,OAAAqB,MAAM,UACNK,IAAKnC,KAAKkC,aACVE,IAAI,GACJH,MAAO,CACL,kBAAmB,GAAGjC,KAAKY,sBAAsByB,MAAMrC,KAAKY,sBAAsB0B,QAGpF,M","ignoreList":[]}
|