@biggive/components 202401191800.0.0 → 202401231203.0.0

package/dist/components/biggive-grid.js.map

@@ -1 +1 @@
-{"file":"biggive-grid.js","mappings":";;AAAA,MAAM,cAAc,GAAG,63RAA63R;;MCQv4RA,aAAW;;;;;0BACO,CAAC;2BAEA,CAAC;4BAKC,KAAK;yBAEF,CAAC;;IAEpC,MAAM;QACJ,QACE,WAAK,KAAK,EAAE,oBAAoB,GAAG,IAAI,CAAC,WAAW,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,GAAG,cAAc,GAAG,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,YAAY,GAAG,gBAAgB,GAAG,EAAE,CAAC,IACrK,eAAa,CACT,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveGrid"],"sources":["src/components/biggive-grid/biggive-grid.scss?tag=biggive-grid&encapsulation=shadow","src/components/biggive-grid/biggive-grid.tsx"],"sourcesContent":["@include spacers();\n\n:host {\n  display: contents;\n}\n\n.grid {\n  margin-bottom: $spacer-3;\n  display: flex;\n  flex-flow: row wrap;\n}\n\n.space-between {\n  justify-content: space-between;\n}\n\n.grid ::slotted([slot=grid-item]) {\n  display: block;\n}\n\n.column-count-2 ::slotted(*) {\n  width: calc( 100% / 2 );\n  @include flex-container-column();\n}\n\n.column-count-3 ::slotted(*) {\n  width: calc( 100% / 3 );\n  @include flex-container-column();\n}\n\n.column-count-4 ::slotted(*) {\n  width: calc( 100% / 4 );\n  @include flex-container-column();\n}\n\n.column-count-5 ::slotted(*) {\n  width: calc( 100% / 5 );\n  @include flex-container-column();\n}\n\n.column-count-6 ::slotted(*) {\n  width: calc( 100% / 6 );\n  @include flex-container-column();\n}\n\n\n.column-gap-1 { justify-content: space-between; }\n.column-gap-2 { justify-content: space-between; }\n.column-gap-3 { justify-content: space-between; }\n.column-gap-4 { justify-content: space-between; }\n.column-gap-5 { justify-content: space-between; }\n.column-gap-6 { justify-content: space-between; }\n\n\n.column-count-2.column-gap-1 ::slotted(*) { width: calc( 100% / 2 - (($spacer-1 * 1) / 2) );}\n.column-count-2.column-gap-2 ::slotted(*) { width: calc( 100% / 2 - (($spacer-2 * 1) / 2) );}\n.column-count-2.column-gap-3 ::slotted(*) { width: calc( 100% / 2 - (($spacer-3 * 1) / 2) );}\n.column-count-2.column-gap-4 ::slotted(*) { width: calc( 100% / 2 - (($spacer-4 * 1) / 2) );}\n.column-count-2.column-gap-5 ::slotted(*) { width: calc( 100% / 2 - (($spacer-5 * 1) / 2) );}\n.column-count-2.column-gap-6 ::slotted(*) { width: calc( 100% / 2 - (($spacer-6 * 1) / 2) );}\n\n.column-count-3.column-gap-1 ::slotted(*) { width: calc( 100% / 3 - (($spacer-1 * 2) / 3) );}\n.column-count-3.column-gap-2 ::slotted(*) { width: calc( 100% / 3 - (($spacer-2 * 2) / 3) );}\n.column-count-3.column-gap-3 ::slotted(*) { width: calc( 100% / 3 - (($spacer-3 * 2) / 3) );}\n.column-count-3.column-gap-4 ::slotted(*) { width: calc( 100% / 3 - (($spacer-4 * 2) / 3) );}\n.column-count-3.column-gap-5 ::slotted(*) { width: calc( 100% / 3 - (($spacer-5 * 2) / 3) );}\n.column-count-3.column-gap-6 ::slotted(*) { width: calc( 100% / 3 - (($spacer-6 * 2) / 3) );}\n\n.column-count-4.column-gap-1 ::slotted(*) { width: calc( 100% / 4 - (($spacer-1 * 3) / 4) );}\n.column-count-4.column-gap-2 ::slotted(*) { width: calc( 100% / 4 - (($spacer-2 * 3) / 4) );}\n.column-count-4.column-gap-3 ::slotted(*) { width: calc( 100% / 4 - (($spacer-3 * 3) / 4) );}\n.column-count-4.column-gap-4 ::slotted(*) { width: calc( 100% / 4 - (($spacer-4 * 3) / 4) );}\n.column-count-4.column-gap-5 ::slotted(*) { width: calc( 100% / 4 - (($spacer-5 * 3) / 4) );}\n.column-count-4.column-gap-6 ::slotted(*) { width: calc( 100% / 4 - (($spacer-6 * 3) / 4) );}\n\n.column-count-5.column-gap-1 ::slotted(*) { width: calc( 100% / 5 - (($spacer-1 * 4) / 5) );}\n.column-count-5.column-gap-2 ::slotted(*) { width: calc( 100% / 5 - (($spacer-2 * 4) / 5) );}\n.column-count-5.column-gap-3 ::slotted(*) { width: calc( 100% / 5 - (($spacer-3 * 4) / 5) );}\n.column-count-5.column-gap-4 ::slotted(*) { width: calc( 100% / 5 - (($spacer-4 * 4) / 5) );}\n.column-count-5.column-gap-5 ::slotted(*) { width: calc( 100% / 5 - (($spacer-5 * 4) / 5) );}\n.column-count-5.column-gap-6 ::slotted(*) { width: calc( 100% / 5 - (($spacer-6 * 4) / 5) );}\n\n.column-count-6.column-gap-1 ::slotted(*) { width: calc( 100% / 6 - (($spacer-1 * 5) / 6) );}\n.column-count-6.column-gap-2 ::slotted(*) { width: calc( 100% / 6 - (($spacer-2 * 5) / 6) );}\n.column-count-6.column-gap-3 ::slotted(*) { width: calc( 100% / 6 - (($spacer-3 * 5) / 6) );}\n.column-count-6.column-gap-4 ::slotted(*) { width: calc( 100% / 6 - (($spacer-4 * 5) / 6) );}\n.column-count-6.column-gap-5 ::slotted(*) { width: calc( 100% / 6 - (($spacer-5 * 5) / 6) );}\n.column-count-6.column-gap-6 ::slotted(*) { width: calc( 100% / 6 - (($spacer-6 * 5) / 6) );}\n\n.column-count-3.column-gap-1:after { content: \"\"; @include flex-container-column(); width: calc( 100% / 3 - (($spacer-1 * 2) / 3) );}\n.column-count-3.column-gap-2:after { content: \"\"; @include flex-container-column(); width: calc( 100% / 3 - (($spacer-2 * 2) / 3) );}\n.column-count-3.column-gap-3:after { content: \"\"; @include flex-container-column(); width: calc( 100% / 3 - (($spacer-3 * 2) / 3) );}\n.column-count-3.column-gap-4:after { content: \"\"; @include flex-container-column(); width: calc( 100% / 3 - (($spacer-4 * 2) / 3) );}\n.column-count-3.column-gap-5:after { content: \"\"; @include flex-container-column(); width: calc( 100% / 3 - (($spacer-5 * 2) / 3) );}\n.column-count-3.column-gap-6:after { content: \"\"; @include flex-container-column(); width: calc( 100% / 3 - (($spacer-6 * 2) / 3) );}\n\n\n\n\n@media screen and (max-width: $screen-tablet-max) {\n\n  @for $i from 1 through 6 {\n    .column-count-#{$i}  ::slotted(*) { width: calc( 51% - (($spacer-4 * 1) / 2)) };\n    @for $j from 1 through 6 {\n      .column-count-#{$i}.column-gap-#{$j} ::slotted(*) { width: calc( 50% - (($spacer-4 * 1) / 2)) };\n    }\n  }\n\n}\n\n@media screen and (max-width: $screen-mobile-max) {\n  @for $i from 1 through 6 {\n    .column-count-#{$i}  ::slotted(*) { width: 100%; };\n    @for $j from 1 through 6 {\n      .column-count-#{$i}.column-gap-#{$j}  ::slotted(*) { width: 100%; };\n    }\n  }\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { spacingOption } from '../../globals/spacing-option';\n\n@Component({\n  tag: 'biggive-grid',\n  styleUrl: 'biggive-grid.scss',\n  shadow: true,\n})\nexport class BiggiveGrid {\n  @Prop() spaceBelow: number = 4;\n\n  @Prop() columnCount: number = 3;\n\n  /**\n   * Deprecated - should use columGap Instead\n   */\n  @Prop() spaceBetween: boolean = false;\n\n  @Prop() columnGap: spacingOption = 0;\n\n  render() {\n    return (\n      <div class={'grid column-count-' + this.columnCount + ' space-below-' + this.spaceBelow + ' column-gap-' + this.columnGap + (this.spaceBetween ? ' space-between' : '')}>\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"biggive-grid.js","mappings":";;AAAA,MAAM,cAAc,GAAG,63RAA63R,CAAC;AACr5R,0BAAe,cAAc;;MCOhBA,aAAW;;;;;0BACO,CAAC;2BAEA,CAAC;4BAKC,KAAK;yBAEF,CAAC;;IAEpC,MAAM;QACJ,QACE,WAAK,KAAK,EAAE,oBAAoB,GAAG,IAAI,CAAC,WAAW,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,GAAG,cAAc,GAAG,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,YAAY,GAAG,gBAAgB,GAAG,EAAE,CAAC,IACrK,eAAa,CACT,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveGrid"],"sources":["src/components/biggive-grid/biggive-grid.scss?tag=biggive-grid&encapsulation=shadow","src/components/biggive-grid/biggive-grid.tsx"],"sourcesContent":["@include spacers();\n\n:host {\n  display: contents;\n}\n\n.grid {\n  margin-bottom: $spacer-3;\n  display: flex;\n  flex-flow: row wrap;\n}\n\n.space-between {\n  justify-content: space-between;\n}\n\n.grid ::slotted([slot=grid-item]) {\n  display: block;\n}\n\n.column-count-2 ::slotted(*) {\n  width: calc( 100% / 2 );\n  @include flex-container-column();\n}\n\n.column-count-3 ::slotted(*) {\n  width: calc( 100% / 3 );\n  @include flex-container-column();\n}\n\n.column-count-4 ::slotted(*) {\n  width: calc( 100% / 4 );\n  @include flex-container-column();\n}\n\n.column-count-5 ::slotted(*) {\n  width: calc( 100% / 5 );\n  @include flex-container-column();\n}\n\n.column-count-6 ::slotted(*) {\n  width: calc( 100% / 6 );\n  @include flex-container-column();\n}\n\n\n.column-gap-1 { justify-content: space-between; }\n.column-gap-2 { justify-content: space-between; }\n.column-gap-3 { justify-content: space-between; }\n.column-gap-4 { justify-content: space-between; }\n.column-gap-5 { justify-content: space-between; }\n.column-gap-6 { justify-content: space-between; }\n\n\n.column-count-2.column-gap-1 ::slotted(*) { width: calc( 100% / 2 - (($spacer-1 * 1) / 2) );}\n.column-count-2.column-gap-2 ::slotted(*) { width: calc( 100% / 2 - (($spacer-2 * 1) / 2) );}\n.column-count-2.column-gap-3 ::slotted(*) { width: calc( 100% / 2 - (($spacer-3 * 1) / 2) );}\n.column-count-2.column-gap-4 ::slotted(*) { width: calc( 100% / 2 - (($spacer-4 * 1) / 2) );}\n.column-count-2.column-gap-5 ::slotted(*) { width: calc( 100% / 2 - (($spacer-5 * 1) / 2) );}\n.column-count-2.column-gap-6 ::slotted(*) { width: calc( 100% / 2 - (($spacer-6 * 1) / 2) );}\n\n.column-count-3.column-gap-1 ::slotted(*) { width: calc( 100% / 3 - (($spacer-1 * 2) / 3) );}\n.column-count-3.column-gap-2 ::slotted(*) { width: calc( 100% / 3 - (($spacer-2 * 2) / 3) );}\n.column-count-3.column-gap-3 ::slotted(*) { width: calc( 100% / 3 - (($spacer-3 * 2) / 3) );}\n.column-count-3.column-gap-4 ::slotted(*) { width: calc( 100% / 3 - (($spacer-4 * 2) / 3) );}\n.column-count-3.column-gap-5 ::slotted(*) { width: calc( 100% / 3 - (($spacer-5 * 2) / 3) );}\n.column-count-3.column-gap-6 ::slotted(*) { width: calc( 100% / 3 - (($spacer-6 * 2) / 3) );}\n\n.column-count-4.column-gap-1 ::slotted(*) { width: calc( 100% / 4 - (($spacer-1 * 3) / 4) );}\n.column-count-4.column-gap-2 ::slotted(*) { width: calc( 100% / 4 - (($spacer-2 * 3) / 4) );}\n.column-count-4.column-gap-3 ::slotted(*) { width: calc( 100% / 4 - (($spacer-3 * 3) / 4) );}\n.column-count-4.column-gap-4 ::slotted(*) { width: calc( 100% / 4 - (($spacer-4 * 3) / 4) );}\n.column-count-4.column-gap-5 ::slotted(*) { width: calc( 100% / 4 - (($spacer-5 * 3) / 4) );}\n.column-count-4.column-gap-6 ::slotted(*) { width: calc( 100% / 4 - (($spacer-6 * 3) / 4) );}\n\n.column-count-5.column-gap-1 ::slotted(*) { width: calc( 100% / 5 - (($spacer-1 * 4) / 5) );}\n.column-count-5.column-gap-2 ::slotted(*) { width: calc( 100% / 5 - (($spacer-2 * 4) / 5) );}\n.column-count-5.column-gap-3 ::slotted(*) { width: calc( 100% / 5 - (($spacer-3 * 4) / 5) );}\n.column-count-5.column-gap-4 ::slotted(*) { width: calc( 100% / 5 - (($spacer-4 * 4) / 5) );}\n.column-count-5.column-gap-5 ::slotted(*) { width: calc( 100% / 5 - (($spacer-5 * 4) / 5) );}\n.column-count-5.column-gap-6 ::slotted(*) { width: calc( 100% / 5 - (($spacer-6 * 4) / 5) );}\n\n.column-count-6.column-gap-1 ::slotted(*) { width: calc( 100% / 6 - (($spacer-1 * 5) / 6) );}\n.column-count-6.column-gap-2 ::slotted(*) { width: calc( 100% / 6 - (($spacer-2 * 5) / 6) );}\n.column-count-6.column-gap-3 ::slotted(*) { width: calc( 100% / 6 - (($spacer-3 * 5) / 6) );}\n.column-count-6.column-gap-4 ::slotted(*) { width: calc( 100% / 6 - (($spacer-4 * 5) / 6) );}\n.column-count-6.column-gap-5 ::slotted(*) { width: calc( 100% / 6 - (($spacer-5 * 5) / 6) );}\n.column-count-6.column-gap-6 ::slotted(*) { width: calc( 100% / 6 - (($spacer-6 * 5) / 6) );}\n\n.column-count-3.column-gap-1:after { content: \"\"; @include flex-container-column(); width: calc( 100% / 3 - (($spacer-1 * 2) / 3) );}\n.column-count-3.column-gap-2:after { content: \"\"; @include flex-container-column(); width: calc( 100% / 3 - (($spacer-2 * 2) / 3) );}\n.column-count-3.column-gap-3:after { content: \"\"; @include flex-container-column(); width: calc( 100% / 3 - (($spacer-3 * 2) / 3) );}\n.column-count-3.column-gap-4:after { content: \"\"; @include flex-container-column(); width: calc( 100% / 3 - (($spacer-4 * 2) / 3) );}\n.column-count-3.column-gap-5:after { content: \"\"; @include flex-container-column(); width: calc( 100% / 3 - (($spacer-5 * 2) / 3) );}\n.column-count-3.column-gap-6:after { content: \"\"; @include flex-container-column(); width: calc( 100% / 3 - (($spacer-6 * 2) / 3) );}\n\n\n\n\n@media screen and (max-width: $screen-tablet-max) {\n\n  @for $i from 1 through 6 {\n    .column-count-#{$i}  ::slotted(*) { width: calc( 51% - (($spacer-4 * 1) / 2)) };\n    @for $j from 1 through 6 {\n      .column-count-#{$i}.column-gap-#{$j} ::slotted(*) { width: calc( 50% - (($spacer-4 * 1) / 2)) };\n    }\n  }\n\n}\n\n@media screen and (max-width: $screen-mobile-max) {\n  @for $i from 1 through 6 {\n    .column-count-#{$i}  ::slotted(*) { width: 100%; };\n    @for $j from 1 through 6 {\n      .column-count-#{$i}.column-gap-#{$j}  ::slotted(*) { width: 100%; };\n    }\n  }\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { spacingOption } from '../../globals/spacing-option';\n\n@Component({\n  tag: 'biggive-grid',\n  styleUrl: 'biggive-grid.scss',\n  shadow: true,\n})\nexport class BiggiveGrid {\n  @Prop() spaceBelow: number = 4;\n\n  @Prop() columnCount: number = 3;\n\n  /**\n   * Deprecated - should use columGap Instead\n   */\n  @Prop() spaceBetween: boolean = false;\n\n  @Prop() columnGap: spacingOption = 0;\n\n  render() {\n    return (\n      <div class={'grid column-count-' + this.columnCount + ' space-below-' + this.spaceBelow + ' column-gap-' + this.columnGap + (this.spaceBetween ? ' space-between' : '')}>\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/biggive-heading.js

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
 const biggiveHeadingCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.align-left{text-align:left}.align-right{text-align:right}.align-center{text-align:center}.align-justify{text-align:justify}h1,.heading-1{font-size:47px;line-height:60px;font-weight:bold}h2,.heading-2{font-size:38px;line-height:45px;font-weight:bold}h3,.heading-3{font-size:25px;line-height:32px;font-weight:bold}h4,.heading-4{font-size:20px;line-height:24px;font-weight:bold}h5,.heading-5{font-size:17px;line-height:24px;font-weight:bold}.space-above-0{margin-top:0}.space-above-1{margin-top:5px}.space-above-2{margin-top:10px}.space-above-3{margin-top:15px}.space-above-4{margin-top:30px}.space-above-5{margin-top:45px}.space-above-6{margin-top:60px}.space-below-0{margin-bottom:0}.space-below-1{margin-bottom:5px}.space-below-2{margin-bottom:10px}.space-below-3{margin-bottom:15px}.space-below-4{margin-bottom:30px}.space-below-5{margin-bottom:45px}.space-below-6{margin-bottom:60px}:host{display:contents}.container{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;display:flex}.container .heading-colour-primary{color:#2C089B}.container .heading-colour-secondary{color:#2AF135}.container .heading-colour-tertiary{color:#FF7272}.container .heading-colour-brand-1{color:#B30510}.container .heading-colour-brand-2{color:#6E0887}.container .heading-colour-brand-3{color:#50B400}.container .heading-colour-brand-4{color:#FFE500}.container .heading-colour-brand-5{color:#F07D00}.container .heading-colour-brand-cc-red{color:#B30510}.container .heading-colour-brand-wgmf-purple{color:#6E0887}.container .heading-colour-brand-gmf-green{color:#50B400}.container .heading-colour-brand-emf-yellow{color:#FFE500}.container .heading-colour-brand-c4c-orange{color:#F07D00}.container .heading-colour-brand-afa-pink{color:#BF387D}.container .heading-colour-brand-mhf-turquoise{color:#62CFC9}.container .heading-colour-brand-grey{color:#CBC8C8}.container .heading-colour-white{color:#FFFFFF}.container .heading-colour-black{color:#000000}.container .heading-colour-grey-extra-light{color:#D7D7D7}.container .heading-colour-grey-light{color:#E8E8E8}.container .heading-colour-grey-medium{color:#8A8A8A}.container .heading-colour-grey-dark{color:#4A4A4A}.container .heading-colour-brand-6{color:#62CFC9}.container h1,.container h2,.container h3,.container h4,.container h5{margin:0;padding:0;width:100%}.container h1 svg,.container h2 svg,.container h3 svg,.container h4 svg,.container h5 svg{height:0.7em;margin-right:0.2em}.container .icon-colour-primary svg path{fill:#2C089B}.container .icon-colour-secondary svg path{fill:#2AF135}.container .icon-colour-tertiary svg path{fill:#FF7272}.container .icon-colour-brand-1 svg path{fill:#B30510}.container .icon-colour-brand-2 svg path{fill:#6E0887}.container .icon-colour-brand-3 svg path{fill:#50B400}.container .icon-colour-brand-4 svg path{fill:#FFE500}.container .icon-colour-brand-5 svg path{fill:#F07D00}.container .icon-colour-brand-cc-red svg path{fill:#B30510}.container .icon-colour-brand-wgmf-purple svg path{fill:#6E0887}.container .icon-colour-brand-gmf-green svg path{fill:#50B400}.container .icon-colour-brand-emf-yellow svg path{fill:#FFE500}.container .icon-colour-brand-c4c-orange svg path{fill:#F07D00}.container .icon-colour-brand-afa-pink svg path{fill:#BF387D}.container .icon-colour-brand-mhf-turquoise svg path{fill:#62CFC9}.container .icon-colour-brand-grey svg path{fill:#CBC8C8}.container .icon-colour-white svg path{fill:#FFFFFF}.container .icon-colour-black svg path{fill:#000000}.container .icon-colour-grey-extra-light svg path{fill:#D7D7D7}.container .icon-colour-grey-light svg path{fill:#E8E8E8}.container .icon-colour-grey-medium svg path{fill:#8A8A8A}.container .icon-colour-grey-dark svg path{fill:#4A4A4A}.container .icon-colour-brand-6 svg path{fill:#62CFC9}";
+const BiggiveHeadingStyle0 = biggiveHeadingCss;
 
 const BiggiveHeading$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveHeading extends HTMLElement {
     constructor() {
@@ -21,7 +22,7 @@ const BiggiveHeading$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveHeading e
         const Tag = this.htmlElement;
         return (h("div", { class: 'container align-' + this.align + ' space-above-' + this.spaceAbove + ' space-below-' + this.spaceBelow }, h(Tag, { class: 'heading-colour-' + this.colour + ' icon-colour-' + this.iconColour + ' heading-' + this.size }, this.icon ? (h("svg", { viewBox: "0 0 102 88" }, h("path", { class: "st0", d: "M51.2,0l-51,88h102L51.2,0z" }), h("path", { d: "M31,68.3c-1,0-1.9-0.9-1.9-1.9c0-1,0.9-1.9,1.9-1.9c1.1,0,1.9,0.9,1.9,1.9C32.9,67.5,32.1,68.3,31,68.3z M29.5,79.4h3v-10\n         h-3V79.4z M41,69.4V70c-0.5-0.5-1.4-0.9-2.5-0.9c-2.7,0-4.9,2-4.9,4.9c0,2.9,2.2,4.9,4.9,4.9c1.1,0,2-0.3,2.5-0.9v0.6\n         c0,1.3-1.2,1.9-2.7,1.9c-1.3,0-2.4-0.3-3.5-0.9v3c1.3,0.5,2.7,0.6,3.6,0.6c3,0,5.5-1.3,5.5-4.6v-9.4L41,69.4L41,69.4z M41,75.3\n         c-0.4,0.6-1.2,0.9-1.9,0.9c-1.3,0-2.3-0.8-2.3-2.2c0-1.4,1-2.2,2.3-2.2c0.8,0,1.5,0.4,1.9,0.9V75.3z M52.8,79.7\n         c2.4,0,3.8-0.4,5.1-1.2v-7.7h-6.6v2.9h3.5v2.6c-0.5,0.1-1.1,0.3-1.9,0.3c-3,0-4.4-2-4.4-4.3c0-2.3,1.7-4.3,4.8-4.3\n         c1.3,0,2.6,0.4,3.5,0.9v-3.3c-0.9-0.4-2.1-0.7-3.7-0.7c-4.6,0-7.8,3.3-7.8,7.4C45.2,76.5,48.1,79.7,52.8,79.7z M60.7,68.3\n         c-1,0-1.9-0.9-1.9-1.9c0-1,0.9-1.9,1.9-1.9c1.1,0,1.9,0.9,1.9,1.9C62.6,67.5,61.8,68.3,60.7,68.3z M59.2,79.4h3v-10h-3V79.4z\n          M69,73.9l-2.6-4.5h-3.5l6,10.3l6-10.3h-3.5L69,73.9z M77.5,75.1h7c0-4.4-2.5-6-5.1-6c-2.7,0-5.1,1.6-5.1,5.2c0,3.5,2.5,5.2,5.5,5.2\n         c1.3,0,2.7-0.2,3.8-0.8v-2.8c-1.5,0.9-2.5,0.9-3.3,0.9C78.9,76.9,77.6,76.5,77.5,75.1z M79.4,71.5c0.9,0,1.7,0.4,1.8,1.7h-3.7\n         C77.7,72,78.6,71.5,79.4,71.5z M26,71.6c0.7-0.6,1.1-1.5,1.1-2.5c0-1.9-1.8-3.9-4.4-3.9h-4.8v14.3h6.3c2.4,0,4.3-1.9,4.3-4.2\n         C28.4,73.8,27.8,72.2,26,71.6z M21,68.1h1.4c0.9,0,1.5,0.7,1.5,1.4c0,0.8-0.6,1.4-1.5,1.4H21V68.1z M23.8,76.5H21v-2.9h2.8\n         c0.9,0,1.5,0.6,1.5,1.4C25.3,75.9,24.7,76.5,23.8,76.5z" }))) : null, this.text)));
     }
-    static get style() { return biggiveHeadingCss; }
+    static get style() { return BiggiveHeadingStyle0; }
 }, [1, "biggive-heading", {
         "spaceAbove": [2, "space-above"],
         "spaceBelow": [2, "space-below"],

package/dist/components/biggive-heading.js.map

@@ -1 +1 @@
-{"file":"biggive-heading.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,yvHAAyvH;;MCWtwHA,gBAAc;;;;;0BACW,CAAC;0BAED,CAAC;sBAEP,SAAS;2BAEL,IAAI;oBAEV,CAAC;qBAEL,MAAM;oBAEP,EAAE;oBAED,KAAK;0BAEK,SAAS;;IAE3C,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,WAAW,CAAC;QAC7B,QACE,WAAK,KAAK,EAAE,kBAAkB,GAAG,IAAI,CAAC,KAAK,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,IACjH,EAAC,GAAG,IAAC,KAAK,EAAE,iBAAiB,GAAG,IAAI,CAAC,MAAM,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,GAAG,WAAW,GAAG,IAAI,CAAC,IAAI,IACtG,IAAI,CAAC,IAAI,IACR,WAAK,OAAO,EAAC,YAAY,IACvB,YAAM,KAAK,EAAC,KAAK,EAAC,CAAC,EAAC,4BAA4B,GAAG,EACnD,YACE,CAAC,EAAC,47CAW6C,GAC/C,CACE,IACJ,IAAI,EAEP,IAAI,CAAC,IAAI,CACN,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveHeading"],"sources":["src/components/biggive-heading/biggive-heading.scss?tag=biggive-heading&encapsulation=shadow","src/components/biggive-heading/biggive-heading.tsx"],"sourcesContent":["@include alignments();\n@include headings();\n@include spacers();\n\n:host {\n  display: contents;\n}\n\n.container {\n  @include standard-font();\n  @each $key, $colour in $brandColoursIncBrand6Turquoise {\n    .heading-colour-#{$key} { color: $colour; }\n  }\n  display: flex;\n\n  h1,h2,h3,h4,h5 {\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    svg {\n      height: 0.7em;\n      margin-right: 0.2em;\n    }\n  }\n\n  @each $key, $colour in $brandColoursIncBrand6Turquoise {\n    .icon-colour-#{$key} svg path { fill: $colour; }\n  }\n\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { brandColour } from '../../globals/brand-colour';\nimport { headingTag } from '../../globals/heading-tag';\nimport { headingSize } from '../../globals/heading-size';\nimport { spacingOption } from '../../globals/spacing-option';\n\n@Component({\n  tag: 'biggive-heading',\n  styleUrl: 'biggive-heading.scss',\n  shadow: true,\n})\nexport class BiggiveHeading {\n  @Prop() spaceAbove: spacingOption = 2;\n\n  @Prop() spaceBelow: spacingOption = 4;\n\n  @Prop() colour: brandColour = 'primary';\n\n  @Prop() htmlElement: headingTag = 'h1';\n\n  @Prop() size: headingSize = 1;\n\n  @Prop() align: string = 'left';\n\n  @Prop() text: string = '';\n\n  @Prop() icon: boolean = false;\n\n  @Prop() iconColour: brandColour = 'primary';\n\n  render() {\n    const Tag = this.htmlElement;\n    return (\n      <div class={'container align-' + this.align + ' space-above-' + this.spaceAbove + ' space-below-' + this.spaceBelow}>\n        <Tag class={'heading-colour-' + this.colour + ' icon-colour-' + this.iconColour + ' heading-' + this.size}>\n          {this.icon ? (\n            <svg viewBox=\"0 0 102 88\">\n              <path class=\"st0\" d=\"M51.2,0l-51,88h102L51.2,0z\" />\n              <path\n                d=\"M31,68.3c-1,0-1.9-0.9-1.9-1.9c0-1,0.9-1.9,1.9-1.9c1.1,0,1.9,0.9,1.9,1.9C32.9,67.5,32.1,68.3,31,68.3z M29.5,79.4h3v-10\n         h-3V79.4z M41,69.4V70c-0.5-0.5-1.4-0.9-2.5-0.9c-2.7,0-4.9,2-4.9,4.9c0,2.9,2.2,4.9,4.9,4.9c1.1,0,2-0.3,2.5-0.9v0.6\n         c0,1.3-1.2,1.9-2.7,1.9c-1.3,0-2.4-0.3-3.5-0.9v3c1.3,0.5,2.7,0.6,3.6,0.6c3,0,5.5-1.3,5.5-4.6v-9.4L41,69.4L41,69.4z M41,75.3\n         c-0.4,0.6-1.2,0.9-1.9,0.9c-1.3,0-2.3-0.8-2.3-2.2c0-1.4,1-2.2,2.3-2.2c0.8,0,1.5,0.4,1.9,0.9V75.3z M52.8,79.7\n         c2.4,0,3.8-0.4,5.1-1.2v-7.7h-6.6v2.9h3.5v2.6c-0.5,0.1-1.1,0.3-1.9,0.3c-3,0-4.4-2-4.4-4.3c0-2.3,1.7-4.3,4.8-4.3\n         c1.3,0,2.6,0.4,3.5,0.9v-3.3c-0.9-0.4-2.1-0.7-3.7-0.7c-4.6,0-7.8,3.3-7.8,7.4C45.2,76.5,48.1,79.7,52.8,79.7z M60.7,68.3\n         c-1,0-1.9-0.9-1.9-1.9c0-1,0.9-1.9,1.9-1.9c1.1,0,1.9,0.9,1.9,1.9C62.6,67.5,61.8,68.3,60.7,68.3z M59.2,79.4h3v-10h-3V79.4z\n          M69,73.9l-2.6-4.5h-3.5l6,10.3l6-10.3h-3.5L69,73.9z M77.5,75.1h7c0-4.4-2.5-6-5.1-6c-2.7,0-5.1,1.6-5.1,5.2c0,3.5,2.5,5.2,5.5,5.2\n         c1.3,0,2.7-0.2,3.8-0.8v-2.8c-1.5,0.9-2.5,0.9-3.3,0.9C78.9,76.9,77.6,76.5,77.5,75.1z M79.4,71.5c0.9,0,1.7,0.4,1.8,1.7h-3.7\n         C77.7,72,78.6,71.5,79.4,71.5z M26,71.6c0.7-0.6,1.1-1.5,1.1-2.5c0-1.9-1.8-3.9-4.4-3.9h-4.8v14.3h6.3c2.4,0,4.3-1.9,4.3-4.2\n         C28.4,73.8,27.8,72.2,26,71.6z M21,68.1h1.4c0.9,0,1.5,0.7,1.5,1.4c0,0.8-0.6,1.4-1.5,1.4H21V68.1z M23.8,76.5H21v-2.9h2.8\n         c0.9,0,1.5,0.6,1.5,1.4C25.3,75.9,24.7,76.5,23.8,76.5z\"\n              />\n            </svg>\n          ) : null}\n\n          {this.text}\n        </Tag>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"biggive-heading.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,yvHAAyvH,CAAC;AACpxH,6BAAe,iBAAiB;;MCUnBA,gBAAc;;;;;0BACW,CAAC;0BAED,CAAC;sBAEP,SAAS;2BAEL,IAAI;oBAEV,CAAC;qBAEL,MAAM;oBAEP,EAAE;oBAED,KAAK;0BAEK,SAAS;;IAE3C,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,WAAW,CAAC;QAC7B,QACE,WAAK,KAAK,EAAE,kBAAkB,GAAG,IAAI,CAAC,KAAK,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,IACjH,EAAC,GAAG,IAAC,KAAK,EAAE,iBAAiB,GAAG,IAAI,CAAC,MAAM,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,GAAG,WAAW,GAAG,IAAI,CAAC,IAAI,IACtG,IAAI,CAAC,IAAI,IACR,WAAK,OAAO,EAAC,YAAY,IACvB,YAAM,KAAK,EAAC,KAAK,EAAC,CAAC,EAAC,4BAA4B,GAAG,EACnD,YACE,CAAC,EAAC,47CAW6C,GAC/C,CACE,IACJ,IAAI,EAEP,IAAI,CAAC,IAAI,CACN,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveHeading"],"sources":["src/components/biggive-heading/biggive-heading.scss?tag=biggive-heading&encapsulation=shadow","src/components/biggive-heading/biggive-heading.tsx"],"sourcesContent":["@include alignments();\n@include headings();\n@include spacers();\n\n:host {\n  display: contents;\n}\n\n.container {\n  @include standard-font();\n  @each $key, $colour in $brandColoursIncBrand6Turquoise {\n    .heading-colour-#{$key} { color: $colour; }\n  }\n  display: flex;\n\n  h1,h2,h3,h4,h5 {\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    svg {\n      height: 0.7em;\n      margin-right: 0.2em;\n    }\n  }\n\n  @each $key, $colour in $brandColoursIncBrand6Turquoise {\n    .icon-colour-#{$key} svg path { fill: $colour; }\n  }\n\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { brandColour } from '../../globals/brand-colour';\nimport { headingTag } from '../../globals/heading-tag';\nimport { headingSize } from '../../globals/heading-size';\nimport { spacingOption } from '../../globals/spacing-option';\n\n@Component({\n  tag: 'biggive-heading',\n  styleUrl: 'biggive-heading.scss',\n  shadow: true,\n})\nexport class BiggiveHeading {\n  @Prop() spaceAbove: spacingOption = 2;\n\n  @Prop() spaceBelow: spacingOption = 4;\n\n  @Prop() colour: brandColour = 'primary';\n\n  @Prop() htmlElement: headingTag = 'h1';\n\n  @Prop() size: headingSize = 1;\n\n  @Prop() align: string = 'left';\n\n  @Prop() text: string = '';\n\n  @Prop() icon: boolean = false;\n\n  @Prop() iconColour: brandColour = 'primary';\n\n  render() {\n    const Tag = this.htmlElement;\n    return (\n      <div class={'container align-' + this.align + ' space-above-' + this.spaceAbove + ' space-below-' + this.spaceBelow}>\n        <Tag class={'heading-colour-' + this.colour + ' icon-colour-' + this.iconColour + ' heading-' + this.size}>\n          {this.icon ? (\n            <svg viewBox=\"0 0 102 88\">\n              <path class=\"st0\" d=\"M51.2,0l-51,88h102L51.2,0z\" />\n              <path\n                d=\"M31,68.3c-1,0-1.9-0.9-1.9-1.9c0-1,0.9-1.9,1.9-1.9c1.1,0,1.9,0.9,1.9,1.9C32.9,67.5,32.1,68.3,31,68.3z M29.5,79.4h3v-10\n         h-3V79.4z M41,69.4V70c-0.5-0.5-1.4-0.9-2.5-0.9c-2.7,0-4.9,2-4.9,4.9c0,2.9,2.2,4.9,4.9,4.9c1.1,0,2-0.3,2.5-0.9v0.6\n         c0,1.3-1.2,1.9-2.7,1.9c-1.3,0-2.4-0.3-3.5-0.9v3c1.3,0.5,2.7,0.6,3.6,0.6c3,0,5.5-1.3,5.5-4.6v-9.4L41,69.4L41,69.4z M41,75.3\n         c-0.4,0.6-1.2,0.9-1.9,0.9c-1.3,0-2.3-0.8-2.3-2.2c0-1.4,1-2.2,2.3-2.2c0.8,0,1.5,0.4,1.9,0.9V75.3z M52.8,79.7\n         c2.4,0,3.8-0.4,5.1-1.2v-7.7h-6.6v2.9h3.5v2.6c-0.5,0.1-1.1,0.3-1.9,0.3c-3,0-4.4-2-4.4-4.3c0-2.3,1.7-4.3,4.8-4.3\n         c1.3,0,2.6,0.4,3.5,0.9v-3.3c-0.9-0.4-2.1-0.7-3.7-0.7c-4.6,0-7.8,3.3-7.8,7.4C45.2,76.5,48.1,79.7,52.8,79.7z M60.7,68.3\n         c-1,0-1.9-0.9-1.9-1.9c0-1,0.9-1.9,1.9-1.9c1.1,0,1.9,0.9,1.9,1.9C62.6,67.5,61.8,68.3,60.7,68.3z M59.2,79.4h3v-10h-3V79.4z\n          M69,73.9l-2.6-4.5h-3.5l6,10.3l6-10.3h-3.5L69,73.9z M77.5,75.1h7c0-4.4-2.5-6-5.1-6c-2.7,0-5.1,1.6-5.1,5.2c0,3.5,2.5,5.2,5.5,5.2\n         c1.3,0,2.7-0.2,3.8-0.8v-2.8c-1.5,0.9-2.5,0.9-3.3,0.9C78.9,76.9,77.6,76.5,77.5,75.1z M79.4,71.5c0.9,0,1.7,0.4,1.8,1.7h-3.7\n         C77.7,72,78.6,71.5,79.4,71.5z M26,71.6c0.7-0.6,1.1-1.5,1.1-2.5c0-1.9-1.8-3.9-4.4-3.9h-4.8v14.3h6.3c2.4,0,4.3-1.9,4.3-4.2\n         C28.4,73.8,27.8,72.2,26,71.6z M21,68.1h1.4c0.9,0,1.5,0.7,1.5,1.4c0,0.8-0.6,1.4-1.5,1.4H21V68.1z M23.8,76.5H21v-2.9h2.8\n         c0.9,0,1.5,0.6,1.5,1.4C25.3,75.9,24.7,76.5,23.8,76.5z\"\n              />\n            </svg>\n          ) : null}\n\n          {this.text}\n        </Tag>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/biggive-hero-image.js

@@ -2,6 +2,7 @@ import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/clien
 import { d as defineCustomElement$2 } from './biggive-button2.js';
 
 const biggiveHeroImageCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.image-wrap img{width:100%;height:auto}.space-above-0{margin-top:0}.space-above-1{margin-top:5px}.space-above-2{margin-top:10px}.space-above-3{margin-top:15px}.space-above-4{margin-top:30px}.space-above-5{margin-top:45px}.space-above-6{margin-top:60px}.space-below-0{margin-bottom:0}.space-below-1{margin-bottom:5px}.space-below-2{margin-bottom:10px}.space-below-3{margin-bottom:15px}.space-below-4{margin-bottom:30px}.space-below-5{margin-bottom:45px}.space-below-6{margin-bottom:60px}.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-1:hover,.text-colour-brand-1{color:#B30510}.text-colour-hover-brand-2:hover,.text-colour-brand-2{color:#6E0887}.text-colour-hover-brand-3:hover,.text-colour-brand-3{color:#50B400}.text-colour-hover-brand-4:hover,.text-colour-brand-4{color:#FFE500}.text-colour-hover-brand-5:hover,.text-colour-brand-5{color:#F07D00}.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-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-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-brand-6:hover,.text-colour-brand-6{color:#CBC8C8}:host{display:contents;font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px}.container{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;overflow:hidden;position:relative;margin-bottom:30px;min-height:32.5vw}.container.colour-scheme-primary{color:#2C089B}.container.colour-scheme-secondary{color:#2AF135}.container.colour-scheme-tertiary{color:#FF7272}.container.colour-scheme-brand-1{color:#B30510}.container.colour-scheme-brand-2{color:#6E0887}.container.colour-scheme-brand-3{color:#50B400}.container.colour-scheme-brand-4{color:#FFE500}.container.colour-scheme-brand-5{color:#F07D00}.container.colour-scheme-brand-cc-red{color:#B30510}.container.colour-scheme-brand-wgmf-purple{color:#6E0887}.container.colour-scheme-brand-gmf-green{color:#50B400}.container.colour-scheme-brand-emf-yellow{color:#FFE500}.container.colour-scheme-brand-c4c-orange{color:#F07D00}.container.colour-scheme-brand-afa-pink{color:#BF387D}.container.colour-scheme-brand-mhf-turquoise{color:#62CFC9}.container.colour-scheme-brand-grey{color:#CBC8C8}.container.colour-scheme-white{color:#FFFFFF}.container.colour-scheme-black{color:#000000}.container.colour-scheme-grey-extra-light{color:#D7D7D7}.container.colour-scheme-grey-light{color:#E8E8E8}.container.colour-scheme-grey-medium{color:#8A8A8A}.container.colour-scheme-grey-dark{color:#4A4A4A}.container.colour-scheme-brand-6{color:#62CFC9}.container .sleeve{display:flex;justify-content:space-between;max-width:1200px;margin-left:auto;margin-right:auto}.container .content-wrap{width:40%;position:relative;z-index:1;white-space:pre-wrap;padding:120px 60px 60px 0}.container .content-wrap .logo,.container .content-wrap .logo-space{height:75px}.container .content-wrap .logo.logo-height-1,.container .content-wrap .logo-space.logo-height-1{height:50px}.container .content-wrap .logo.logo-height-2,.container .content-wrap .logo-space.logo-height-2{height:75px}.container .content-wrap .logo.logo-height-3,.container .content-wrap .logo-space.logo-height-3{height:100px}.container .content-wrap .logo.logo-height-4,.container .content-wrap .logo-space.logo-height-4{height:125px}.container .content-wrap .logo.logo-height-5,.container .content-wrap .logo-space.logo-height-5{height:150px}.container .content-wrap .logo.logo-height-6,.container .content-wrap .logo-space.logo-height-6{height:175px}.container .content-wrap .logo.logo-height-7,.container .content-wrap .logo-space.logo-height-7{height:200px}.container .content-wrap .logo.logo-height-8,.container .content-wrap .logo-space.logo-height-8{height:225px}.container .content-wrap .logo.logo-height-9,.container .content-wrap .logo-space.logo-height-9{height:250px}.container .content-wrap .logo.logo-height-10,.container .content-wrap .logo-space.logo-height-10{height:275px}.container .content-wrap .logo{background-size:contain;background-repeat:no-repeat;background-position:left center}.container .content-wrap .logo img{width:auto;height:100%;position:relative}.container .content-wrap .slug{font-size:20px;line-height:24px;font-weight:bold;min-height:24px;margin:0;padding:0}.container .content-wrap h1{font-size:47px;line-height:60px;font-weight:bold;margin:0 0 15px 0;padding:0}@media (max-width: 1200px){.container .content-wrap h1{font-size:38px;line-height:45px;font-weight:bold}}.container .content-wrap .teaser{margin:0 0 45px 0;padding:0}.container .graphic-wrap{position:absolute;display:block;top:0;left:0;right:0;padding-bottom:32.5vw;background-color:#F1F1F1;margin-left:20vw;clip-path:polygon(0 0, 100% 0, 100% 100%)}.container .graphic-wrap .image-wrap{position:absolute;display:block;top:0;left:0;bottom:0;right:0;background-size:cover}.container .graphic-wrap .image-wrap img{display:none}@media screen and (max-width: 1200px){.container{min-height:50vw}.container .sleeve{flex-wrap:wrap}.container .sleeve .content-wrap{width:60%;padding:18vw 15px 15px 15px;margin-bottom:50px}.container .sleeve .graphic-wrap{margin-left:0;bottom:auto;padding-bottom:50vw}}@media screen and (max-width: 768px){.container .sleeve .content-wrap{width:70%;padding-top:120px}}@media screen and (max-width: 576px){.container .sleeve .content-wrap{width:80%}}@media screen and (max-width: 450px){.container .sleeve .content-wrap{width:100%}}";
+const BiggiveHeroImageStyle0 = biggiveHeroImageCss;
 
 const BiggiveHeroImage$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveHeroImage extends HTMLElement {
     constructor() {
@@ -33,7 +34,7 @@ const BiggiveHeroImage$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveHeroIma
             ? h("biggive-button", { "colour-scheme": this.buttonColourScheme, url: this.buttonUrl, label: this.buttonLabel })
             : null), h("div", { class: "graphic-wrap" }, this.mainImage !== null ? (h("div", { class: "image-wrap", role: "presentation", style: { 'background-image': 'url(' + this.mainImage + ')', 'background-position': this.mainImageAlignHorizontal + ' ' + this.mainImageAlignVertical } })) : null))));
     }
-    static get style() { return biggiveHeroImageCss; }
+    static get style() { return BiggiveHeroImageStyle0; }
 }, [1, "biggive-hero-image", {
         "spaceBelow": [2, "space-below"],
         "colourScheme": [1, "colour-scheme"],

package/dist/components/biggive-hero-image.js.map

@@ -1 +1 @@
-{"file":"biggive-hero-image.js","mappings":";;;AAAA,MAAM,mBAAmB,GAAG,k6MAAk6M;;MCWj7MA,kBAAgB;;;;;0BAIS,CAAC;4BAKA,SAAS;;;oBAetB,EAAE;0BAKkB,CAAC;2BAKb,EAAE;yBAKC,IAAI;wCAKM,QAAQ;sCAKV,QAAQ;;;;;;;kCA+BT,SAAS;;IAGnD,MAAM;QACJ,MAAM,gBAAgB,GAAG,aAAa,IAAI,OAAO,IAAI,CAAC,eAAe,KAAK,QAAQ,IAAI,IAAI,CAAC,eAAe,CAAC,MAAM,GAAG,CAAC,GAAG,eAAe,IAAI,CAAC,eAAe,EAAE,GAAG,EAAE,CAAC,CAAC;QACpK,MAAM,aAAa,GAAG,SAAS,IAAI,OAAO,IAAI,CAAC,YAAY,KAAK,QAAQ,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,GAAG,eAAe,IAAI,CAAC,YAAY,EAAE,GAAG,EAAE,CAAC,CAAC;QAEpJ,QACE,WAAK,KAAK,EAAE,0BAA0B,GAAG,IAAI,CAAC,YAAY,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,IAC5F,WAAK,KAAK,EAAC,QAAQ,IACjB,WAAK,KAAK,EAAC,cAAc,IACtB,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,IAC5C,WAAK,KAAK,EAAE,8BAA8B,GAAC,IAAI,CAAC,UAAU,IACxD,WAAK,GAAG,EAAE,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE,IAAI,CAAC,WAAW,EAAE,KAAK,EAAE,IAAI,CAAC,WAAW,GAAG,CAClE,IACJ,WAAK,KAAK,EAAE,yBAAyB,GAAC,IAAI,CAAC,UAAU,GAAQ,EACjE,WAAK,KAAK,EAAE,mBAAmB,GAAC,IAAI,CAAC,UAAU,IAAG,IAAI,CAAC,IAAI,CAAO,EAClE,UAAI,KAAK,EAAE,gBAAgB,IAAG,IAAI,CAAC,SAAS,CAAM,EAClD,WAAK,KAAK,EAAE,aAAa,IAAG,IAAI,CAAC,MAAM,CAAO,EAC7C,IAAI,CAAC,WAAW,IAAI,IAAI,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI;cAC/C,uCAA+B,IAAI,CAAC,kBAAkB,EAAE,GAAG,EAAE,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,WAAW,GAAmB;cACvH,IAAI,CAEJ,EACN,WAAK,KAAK,EAAC,cAAc,IACtB,IAAI,CAAC,SAAS,KAAK,IAAI,IACtB,WAAK,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,cAAc,EAAC,KAAK,EAAE,EAAE,kBAAkB,EAAE,MAAM,GAAG,IAAI,CAAC,SAAS,GAAG,GAAG,EAAE,qBAAqB,EAAE,IAAI,CAAC,wBAAwB,GAAG,GAAG,GAAG,IAAI,CAAC,sBAAsB,EAAE,GAC5L,IACJ,IAAI,CACJ,CACF,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveHeroImage"],"sources":["src/components/biggive-hero-image/biggive-hero-image.scss?tag=biggive-hero-image&encapsulation=shadow","src/components/biggive-hero-image/biggive-hero-image.tsx"],"sourcesContent":["@include image-alignment();\n@include spacers();\n@include text-colours();\n\n:host {\n  display: contents;\n  @include standard-font();\n}\n\n.container {\n  @include standard-font();\n  overflow: hidden;\n  position: relative;\n  margin-bottom: $spacer-4;\n  min-height: 32.5vw;\n  @each $key, $colour in $brandColoursIncBrand6Turquoise {\n    &.colour-scheme-#{$key} { color: $colour; }\n  }\n  .sleeve {\n    @include flex-container-row();\n    max-width: $screen-desktop-max;\n    margin-left: auto;\n    margin-right: auto;\n  }\n  .content-wrap {\n    width: 40%;\n    position: relative;\n    z-index: 1;\n    white-space: pre-wrap; // helps render out \\n\n    padding: $spacer-8 $spacer-6 $spacer-6 $spacer-0;\n\n    .logo, .logo-space {\n      height: 75px;\n      &.logo-height-1 { height: 50px; }\n      &.logo-height-2 { height: 75px; }\n      &.logo-height-3 { height: 100px; }\n      &.logo-height-4 { height: 125px; }\n      &.logo-height-5 { height: 150px; }\n      &.logo-height-6 { height: 175px; }\n      &.logo-height-7 { height: 200px; }\n      &.logo-height-8 { height: 225px; }\n      &.logo-height-9 { height: 250px; }\n      &.logo-height-10 { height: 275px; }    \n    }\n\n    .logo {\n      background-size: contain;\n      background-repeat: no-repeat;\n      background-position: left center;\n\n      img {\n        width: auto;\n        height: 100%;\n        position: relative;\n      }\n    }\n    .slug {\n      @include heading-4;\n      min-height: 24px; // Sort layout when there is no slug.\n      margin: 0;\n      padding: 0;\n    }\n    h1 {\n      @include heading-1;\n      margin: 0 0 $spacer-3 0;\n      padding: 0;\n\n      @media (max-width: $screen-desktop-max) {\n        @include heading-2;\n      }\n    }\n    .teaser {\n      margin: 0 0 $spacer-5 0;\n      padding: 0;\n    }\n  }\n\n  .graphic-wrap {\n    position: absolute;\n    display: block;\n    top: 0;\n    left: 0;\n    right: 0;\n    padding-bottom: 32.5vw;\n    background-color: #F1F1F1;\n    margin-left: 20vw;\n    clip-path: polygon(0 0, 100% 0, 100% 100%);\n    .image-wrap {\n      @include absolute-fill();\n      background-size: cover;\n      img {\n        display: none;\n      }\n    }\n  }\n}\n\n@media screen and (max-width: $screen-desktop-max) {\n  .container {\n    min-height: 50vw;\n    .sleeve {\n      flex-wrap: wrap;\n      .content-wrap {\n        width: 60%;\n        padding: 18vw $spacer-3 $spacer-3 $spacer-3;\n        margin-bottom: 50px;\n      }\n      .graphic-wrap {\n        margin-left: 0;\n        bottom: auto;\n        padding-bottom: 50vw;\n      }\n    }\n  }\n}\n\n\n@media screen and (max-width: $screen-tablet-max) {\n  .container {\n    .sleeve {\n      .content-wrap {\n        width: 70%;\n        padding-top: $spacer-8;\n      }\n    }\n  }\n}\n\n@media screen and (max-width: $screen-mobile-max) {\n  .container {\n    .sleeve {\n      .content-wrap {\n        width: 80%;\n      }\n    }\n  }\n}\n\n@media screen and (max-width: $screen-mobile-small) {\n  .container {\n    .sleeve {\n      .content-wrap {\n        width: 100%;\n      }\n    }\n  }\n}\n","/* eslint-disable prettier/prettier */\nimport { Component, Prop, h } from '@stencil/core';\nimport { brandColour } from '../../globals/brand-colour';\nimport { spacingOption } from '../../globals/spacing-option';\n\n\n@Component({\n  tag: 'biggive-hero-image',\n  styleUrl: 'biggive-hero-image.scss',\n  shadow: true,\n})\nexport class BiggiveHeroImage {\n  /**\n   * Space below component\n   */\n  @Prop() spaceBelow: spacingOption = 0;\n\n  /**\n   * Colour Scheme\n   */\n   @Prop() colourScheme: brandColour = 'primary';\n\n  /**\n   * Header slug\n   */\n   @Prop() slug: string;\n\n  /**\n   * Header slug colour\n   */\n   @Prop() slugColour: brandColour;\n\n  /**\n   * Full URL of a logo image.\n   */\n   @Prop() logo: string = '';\n\n   /**\n   * Logo container height selection. Numbers are not measurements.\n   */\n   @Prop() logoHeight: 1|2|3|4|5|6|7|8|9|10 = 3;\n\n  /**\n   * Logo alt text\n   */\n    @Prop() logoAltText: string = '';\n\n  /**\n   * Full URL of a main hero image.\n   */\n    @Prop() mainImage: string|null = null;\n\n  /**\n   * Horizontal alignment of image\n   */\n    @Prop() mainImageAlignHorizontal: string = 'center';\n\n      /**\n   * Vertical alignment of image\n   */\n    @Prop() mainImageAlignVertical: string = 'center';\n\n  /**\n   * Hero image title, typically the page.\n   */\n  @Prop() mainTitle: string;\n  /**\n   * Main title colour\n   */\n   @Prop() mainTitleColour?: brandColour;\n  /**\n   * Introductory teaser text\n   */\n  @Prop() teaser: string;\n  /**\n   * Teaser colour\n   */\n   @Prop() teaserColour?: brandColour;\n  /**\n   * Button Url\n   */\n   @Prop() buttonUrl: string;\n\n  /**\n   * Button Label\n   */\n   @Prop() buttonLabel: string;\n\n  /**\n   * Button Colour Scheme\n   */\n  @Prop() buttonColourScheme: brandColour = 'primary';\n\n\n  render() {\n    const mainTitleClasses = 'main-title ' + (typeof this.mainTitleColour === 'string' && this.mainTitleColour.length > 0 ? `text-colour-${this.mainTitleColour}` : '');\n    const teaserClasses = 'teaser ' + (typeof this.teaserColour === 'string' && this.teaserColour.length > 0 ? `text-colour-${this.teaserColour}` : '');\n\n    return (\n      <div class={'container colour-scheme-' + this.colourScheme + ' space-below-' + this.spaceBelow}>\n        <div class=\"sleeve\">\n          <div class=\"content-wrap\">\n            {this.logo !== undefined && this.logo !== null ? (\n              <div class={'logo image-wrap logo-height-'+this.logoHeight}>\n                <img src={this.logo} alt={this.logoAltText} title={this.logoAltText}/>\n              </div>\n            ) : <div class={'logo-space logo-height-'+this.logoHeight}></div>}\n            <div class={'slug text-colour-'+this.slugColour}>{this.slug}</div>\n            <h1 class={mainTitleClasses}>{this.mainTitle}</h1>\n            <div class={teaserClasses}>{this.teaser}</div>\n            {this.buttonLabel != null && this.buttonUrl != null\n              ? <biggive-button colour-scheme={this.buttonColourScheme} url={this.buttonUrl} label={this.buttonLabel}></biggive-button>\n              : null\n            }\n          </div>\n          <div class=\"graphic-wrap\">\n            {this.mainImage !== null ? (\n              <div class=\"image-wrap\" role=\"presentation\" style={{ 'background-image': 'url(' + this.mainImage + ')', 'background-position': this.mainImageAlignHorizontal + ' ' + this.mainImageAlignVertical }}>\n              </div>\n            ) : null}\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"biggive-hero-image.js","mappings":";;;AAAA,MAAM,mBAAmB,GAAG,k6MAAk6M,CAAC;AAC/7M,+BAAe,mBAAmB;;MCUrBA,kBAAgB;;;;;0BAIS,CAAC;4BAKA,SAAS;;;oBAetB,EAAE;0BAKkB,CAAC;2BAKb,EAAE;yBAKC,IAAI;wCAKM,QAAQ;sCAKV,QAAQ;;;;;;;kCA+BT,SAAS;;IAGnD,MAAM;QACJ,MAAM,gBAAgB,GAAG,aAAa,IAAI,OAAO,IAAI,CAAC,eAAe,KAAK,QAAQ,IAAI,IAAI,CAAC,eAAe,CAAC,MAAM,GAAG,CAAC,GAAG,eAAe,IAAI,CAAC,eAAe,EAAE,GAAG,EAAE,CAAC,CAAC;QACpK,MAAM,aAAa,GAAG,SAAS,IAAI,OAAO,IAAI,CAAC,YAAY,KAAK,QAAQ,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,GAAG,eAAe,IAAI,CAAC,YAAY,EAAE,GAAG,EAAE,CAAC,CAAC;QAEpJ,QACE,WAAK,KAAK,EAAE,0BAA0B,GAAG,IAAI,CAAC,YAAY,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,IAC5F,WAAK,KAAK,EAAC,QAAQ,IACjB,WAAK,KAAK,EAAC,cAAc,IACtB,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,IAC5C,WAAK,KAAK,EAAE,8BAA8B,GAAC,IAAI,CAAC,UAAU,IACxD,WAAK,GAAG,EAAE,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE,IAAI,CAAC,WAAW,EAAE,KAAK,EAAE,IAAI,CAAC,WAAW,GAAG,CAClE,IACJ,WAAK,KAAK,EAAE,yBAAyB,GAAC,IAAI,CAAC,UAAU,GAAQ,EACjE,WAAK,KAAK,EAAE,mBAAmB,GAAC,IAAI,CAAC,UAAU,IAAG,IAAI,CAAC,IAAI,CAAO,EAClE,UAAI,KAAK,EAAE,gBAAgB,IAAG,IAAI,CAAC,SAAS,CAAM,EAClD,WAAK,KAAK,EAAE,aAAa,IAAG,IAAI,CAAC,MAAM,CAAO,EAC7C,IAAI,CAAC,WAAW,IAAI,IAAI,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI;cAC/C,uCAA+B,IAAI,CAAC,kBAAkB,EAAE,GAAG,EAAE,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,WAAW,GAAmB;cACvH,IAAI,CAEJ,EACN,WAAK,KAAK,EAAC,cAAc,IACtB,IAAI,CAAC,SAAS,KAAK,IAAI,IACtB,WAAK,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,cAAc,EAAC,KAAK,EAAE,EAAE,kBAAkB,EAAE,MAAM,GAAG,IAAI,CAAC,SAAS,GAAG,GAAG,EAAE,qBAAqB,EAAE,IAAI,CAAC,wBAAwB,GAAG,GAAG,GAAG,IAAI,CAAC,sBAAsB,EAAE,GAC5L,IACJ,IAAI,CACJ,CACF,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveHeroImage"],"sources":["src/components/biggive-hero-image/biggive-hero-image.scss?tag=biggive-hero-image&encapsulation=shadow","src/components/biggive-hero-image/biggive-hero-image.tsx"],"sourcesContent":["@include image-alignment();\n@include spacers();\n@include text-colours();\n\n:host {\n  display: contents;\n  @include standard-font();\n}\n\n.container {\n  @include standard-font();\n  overflow: hidden;\n  position: relative;\n  margin-bottom: $spacer-4;\n  min-height: 32.5vw;\n  @each $key, $colour in $brandColoursIncBrand6Turquoise {\n    &.colour-scheme-#{$key} { color: $colour; }\n  }\n  .sleeve {\n    @include flex-container-row();\n    max-width: $screen-desktop-max;\n    margin-left: auto;\n    margin-right: auto;\n  }\n  .content-wrap {\n    width: 40%;\n    position: relative;\n    z-index: 1;\n    white-space: pre-wrap; // helps render out \\n\n    padding: $spacer-8 $spacer-6 $spacer-6 $spacer-0;\n\n    .logo, .logo-space {\n      height: 75px;\n      &.logo-height-1 { height: 50px; }\n      &.logo-height-2 { height: 75px; }\n      &.logo-height-3 { height: 100px; }\n      &.logo-height-4 { height: 125px; }\n      &.logo-height-5 { height: 150px; }\n      &.logo-height-6 { height: 175px; }\n      &.logo-height-7 { height: 200px; }\n      &.logo-height-8 { height: 225px; }\n      &.logo-height-9 { height: 250px; }\n      &.logo-height-10 { height: 275px; }    \n    }\n\n    .logo {\n      background-size: contain;\n      background-repeat: no-repeat;\n      background-position: left center;\n\n      img {\n        width: auto;\n        height: 100%;\n        position: relative;\n      }\n    }\n    .slug {\n      @include heading-4;\n      min-height: 24px; // Sort layout when there is no slug.\n      margin: 0;\n      padding: 0;\n    }\n    h1 {\n      @include heading-1;\n      margin: 0 0 $spacer-3 0;\n      padding: 0;\n\n      @media (max-width: $screen-desktop-max) {\n        @include heading-2;\n      }\n    }\n    .teaser {\n      margin: 0 0 $spacer-5 0;\n      padding: 0;\n    }\n  }\n\n  .graphic-wrap {\n    position: absolute;\n    display: block;\n    top: 0;\n    left: 0;\n    right: 0;\n    padding-bottom: 32.5vw;\n    background-color: #F1F1F1;\n    margin-left: 20vw;\n    clip-path: polygon(0 0, 100% 0, 100% 100%);\n    .image-wrap {\n      @include absolute-fill();\n      background-size: cover;\n      img {\n        display: none;\n      }\n    }\n  }\n}\n\n@media screen and (max-width: $screen-desktop-max) {\n  .container {\n    min-height: 50vw;\n    .sleeve {\n      flex-wrap: wrap;\n      .content-wrap {\n        width: 60%;\n        padding: 18vw $spacer-3 $spacer-3 $spacer-3;\n        margin-bottom: 50px;\n      }\n      .graphic-wrap {\n        margin-left: 0;\n        bottom: auto;\n        padding-bottom: 50vw;\n      }\n    }\n  }\n}\n\n\n@media screen and (max-width: $screen-tablet-max) {\n  .container {\n    .sleeve {\n      .content-wrap {\n        width: 70%;\n        padding-top: $spacer-8;\n      }\n    }\n  }\n}\n\n@media screen and (max-width: $screen-mobile-max) {\n  .container {\n    .sleeve {\n      .content-wrap {\n        width: 80%;\n      }\n    }\n  }\n}\n\n@media screen and (max-width: $screen-mobile-small) {\n  .container {\n    .sleeve {\n      .content-wrap {\n        width: 100%;\n      }\n    }\n  }\n}\n","/* eslint-disable prettier/prettier */\nimport { Component, Prop, h } from '@stencil/core';\nimport { brandColour } from '../../globals/brand-colour';\nimport { spacingOption } from '../../globals/spacing-option';\n\n\n@Component({\n  tag: 'biggive-hero-image',\n  styleUrl: 'biggive-hero-image.scss',\n  shadow: true,\n})\nexport class BiggiveHeroImage {\n  /**\n   * Space below component\n   */\n  @Prop() spaceBelow: spacingOption = 0;\n\n  /**\n   * Colour Scheme\n   */\n   @Prop() colourScheme: brandColour = 'primary';\n\n  /**\n   * Header slug\n   */\n   @Prop() slug: string;\n\n  /**\n   * Header slug colour\n   */\n   @Prop() slugColour: brandColour;\n\n  /**\n   * Full URL of a logo image.\n   */\n   @Prop() logo: string = '';\n\n   /**\n   * Logo container height selection. Numbers are not measurements.\n   */\n   @Prop() logoHeight: 1|2|3|4|5|6|7|8|9|10 = 3;\n\n  /**\n   * Logo alt text\n   */\n    @Prop() logoAltText: string = '';\n\n  /**\n   * Full URL of a main hero image.\n   */\n    @Prop() mainImage: string|null = null;\n\n  /**\n   * Horizontal alignment of image\n   */\n    @Prop() mainImageAlignHorizontal: string = 'center';\n\n      /**\n   * Vertical alignment of image\n   */\n    @Prop() mainImageAlignVertical: string = 'center';\n\n  /**\n   * Hero image title, typically the page.\n   */\n  @Prop() mainTitle: string;\n  /**\n   * Main title colour\n   */\n   @Prop() mainTitleColour?: brandColour;\n  /**\n   * Introductory teaser text\n   */\n  @Prop() teaser: string;\n  /**\n   * Teaser colour\n   */\n   @Prop() teaserColour?: brandColour;\n  /**\n   * Button Url\n   */\n   @Prop() buttonUrl: string;\n\n  /**\n   * Button Label\n   */\n   @Prop() buttonLabel: string;\n\n  /**\n   * Button Colour Scheme\n   */\n  @Prop() buttonColourScheme: brandColour = 'primary';\n\n\n  render() {\n    const mainTitleClasses = 'main-title ' + (typeof this.mainTitleColour === 'string' && this.mainTitleColour.length > 0 ? `text-colour-${this.mainTitleColour}` : '');\n    const teaserClasses = 'teaser ' + (typeof this.teaserColour === 'string' && this.teaserColour.length > 0 ? `text-colour-${this.teaserColour}` : '');\n\n    return (\n      <div class={'container colour-scheme-' + this.colourScheme + ' space-below-' + this.spaceBelow}>\n        <div class=\"sleeve\">\n          <div class=\"content-wrap\">\n            {this.logo !== undefined && this.logo !== null ? (\n              <div class={'logo image-wrap logo-height-'+this.logoHeight}>\n                <img src={this.logo} alt={this.logoAltText} title={this.logoAltText}/>\n              </div>\n            ) : <div class={'logo-space logo-height-'+this.logoHeight}></div>}\n            <div class={'slug text-colour-'+this.slugColour}>{this.slug}</div>\n            <h1 class={mainTitleClasses}>{this.mainTitle}</h1>\n            <div class={teaserClasses}>{this.teaser}</div>\n            {this.buttonLabel != null && this.buttonUrl != null\n              ? <biggive-button colour-scheme={this.buttonColourScheme} url={this.buttonUrl} label={this.buttonLabel}></biggive-button>\n              : null\n            }\n          </div>\n          <div class=\"graphic-wrap\">\n            {this.mainImage !== null ? (\n              <div class=\"image-wrap\" role=\"presentation\" style={{ 'background-image': 'url(' + this.mainImage + ')', 'background-position': this.mainImageAlignHorizontal + ' ' + this.mainImageAlignVertical }}>\n              </div>\n            ) : null}\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/biggive-icon-button.js

@@ -2,6 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/i
 import { d as defineCustomElement$2 } from './biggive-generic-icon2.js';
 
 const biggiveIconButtonCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.background-colour-hover-primary:hover,.background-colour-primary{background-color:#2C089B}.background-colour-hover-secondary:hover,.background-colour-secondary{background-color:#2AF135}.background-colour-hover-tertiary:hover,.background-colour-tertiary{background-color:#FF7272}.background-colour-hover-brand-1:hover,.background-colour-brand-1{background-color:#B30510}.background-colour-hover-brand-2:hover,.background-colour-brand-2{background-color:#6E0887}.background-colour-hover-brand-3:hover,.background-colour-brand-3{background-color:#50B400}.background-colour-hover-brand-4:hover,.background-colour-brand-4{background-color:#FFE500}.background-colour-hover-brand-5:hover,.background-colour-brand-5{background-color:#F07D00}.background-colour-hover-brand-cc-red:hover,.background-colour-brand-cc-red{background-color:#B30510}.background-colour-hover-brand-wgmf-purple:hover,.background-colour-brand-wgmf-purple{background-color:#6E0887}.background-colour-hover-brand-gmf-green:hover,.background-colour-brand-gmf-green{background-color:#50B400}.background-colour-hover-brand-emf-yellow:hover,.background-colour-brand-emf-yellow{background-color:#FFE500}.background-colour-hover-brand-c4c-orange:hover,.background-colour-brand-c4c-orange{background-color:#F07D00}.background-colour-hover-brand-afa-pink:hover,.background-colour-brand-afa-pink{background-color:#BF387D}.background-colour-hover-brand-mhf-turquoise:hover,.background-colour-brand-mhf-turquoise{background-color:#62CFC9}.background-colour-hover-brand-grey:hover,.background-colour-brand-grey{background-color:#CBC8C8}.background-colour-hover-white:hover,.background-colour-white{background-color:#FFFFFF}.background-colour-hover-black:hover,.background-colour-black{background-color:#000000}.background-colour-hover-grey-extra-light:hover,.background-colour-grey-extra-light{background-color:#D7D7D7}.background-colour-hover-grey-light:hover,.background-colour-grey-light{background-color:#E8E8E8}.background-colour-hover-grey-medium:hover,.background-colour-grey-medium{background-color:#8A8A8A}.background-colour-hover-grey-dark:hover,.background-colour-grey-dark{background-color:#4A4A4A}.background-colour-hover-brand-6:hover,.background-colour-brand-6{background-color:#62CFC9}.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-1:hover,.text-colour-brand-1{color:#B30510}.text-colour-hover-brand-2:hover,.text-colour-brand-2{color:#6E0887}.text-colour-hover-brand-3:hover,.text-colour-brand-3{color:#50B400}.text-colour-hover-brand-4:hover,.text-colour-brand-4{color:#FFE500}.text-colour-hover-brand-5:hover,.text-colour-brand-5{color:#F07D00}.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-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-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-brand-6:hover,.text-colour-brand-6{color:#CBC8C8}:host{display:contents}.container{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px}.container a{display:block;text-decoration:none}.container a.full-width-true{display:block}.container.centered-true{text-align:center}.container.shadow-true{filter:drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.25))}.container.rounded-true{border-radius:10px}.container.background-padding-1{padding:5px}.container.background-padding-2{padding:10px}.container.background-padding-3{padding:15px}.container.background-padding-4{padding:30px}.container.background-padding-5{padding:45px}.container.background-padding-6{padding:60px}.container .sleeve{display:flex}.container .sleeve .text-wrap{margin:auto 0;text-decoration:none}.container .sleeve .text-wrap.text-padding-1{padding:0 5px}.container .sleeve .text-wrap.text-padding-2{padding:0 10px}.container .sleeve .text-wrap.text-padding-3{padding:0 15px}.container .sleeve .text-wrap.text-padding-4{padding:0 30px}.container .sleeve .text-wrap.text-padding-5{padding:0 45px}.container .sleeve .text-wrap.text-padding-6{padding:0 60px}.container .sleeve .arrow-wrap{margin:auto 0 auto auto}.container .sleeve .arrow-wrap.arrow-colour-primary .arrow-wrap svg path{stroke:#2C089B}.container .sleeve .arrow-wrap.arrow-colour-secondary .arrow-wrap svg path{stroke:#2AF135}.container .sleeve .arrow-wrap.arrow-colour-tertiary .arrow-wrap svg path{stroke:#FF7272}.container .sleeve .arrow-wrap.arrow-colour-brand-1 .arrow-wrap svg path{stroke:#B30510}.container .sleeve .arrow-wrap.arrow-colour-brand-2 .arrow-wrap svg path{stroke:#6E0887}.container .sleeve .arrow-wrap.arrow-colour-brand-3 .arrow-wrap svg path{stroke:#50B400}.container .sleeve .arrow-wrap.arrow-colour-brand-4 .arrow-wrap svg path{stroke:#FFE500}.container .sleeve .arrow-wrap.arrow-colour-brand-5 .arrow-wrap svg path{stroke:#F07D00}.container .sleeve .arrow-wrap.arrow-colour-brand-cc-red .arrow-wrap svg path{stroke:#B30510}.container .sleeve .arrow-wrap.arrow-colour-brand-wgmf-purple .arrow-wrap svg path{stroke:#6E0887}.container .sleeve .arrow-wrap.arrow-colour-brand-gmf-green .arrow-wrap svg path{stroke:#50B400}.container .sleeve .arrow-wrap.arrow-colour-brand-emf-yellow .arrow-wrap svg path{stroke:#FFE500}.container .sleeve .arrow-wrap.arrow-colour-brand-c4c-orange .arrow-wrap svg path{stroke:#F07D00}.container .sleeve .arrow-wrap.arrow-colour-brand-afa-pink .arrow-wrap svg path{stroke:#BF387D}.container .sleeve .arrow-wrap.arrow-colour-brand-mhf-turquoise .arrow-wrap svg path{stroke:#62CFC9}.container .sleeve .arrow-wrap.arrow-colour-brand-grey .arrow-wrap svg path{stroke:#CBC8C8}.container .sleeve .arrow-wrap.arrow-colour-white .arrow-wrap svg path{stroke:#FFFFFF}.container .sleeve .arrow-wrap.arrow-colour-black .arrow-wrap svg path{stroke:#000000}.container .sleeve .arrow-wrap.arrow-colour-grey-extra-light .arrow-wrap svg path{stroke:#D7D7D7}.container .sleeve .arrow-wrap.arrow-colour-grey-light .arrow-wrap svg path{stroke:#E8E8E8}.container .sleeve .arrow-wrap.arrow-colour-grey-medium .arrow-wrap svg path{stroke:#8A8A8A}.container .sleeve .arrow-wrap.arrow-colour-grey-dark .arrow-wrap svg path{stroke:#4A4A4A}.container .sleeve .arrow-wrap.arrow-colour-brand-6 .arrow-wrap svg path{stroke:#62CFC9}.container .icon-wrap{background-position:center center;background-size:cover}.container .icon-wrap.circle-true{border-radius:50%;overflow:hidden}.container .icon-wrap.size-small{width:30px;height:30px}.container .icon-wrap.size-medium{width:45px;height:45px}.container .icon-wrap.size-large{width:60px;height:60px}.container .icon-wrap.size-x-large{width:75px;height:75px}.container .icon-wrap.size-xx-large{width:90px;height:90px}.container .icon-wrap .misc-icon-item{width:100%;height:100%}.container .icon-wrap .misc-icon-item a{padding:20%}.container.arrow-colour-primary .arrow-wrap svg path{stroke:#2C089B}.container.arrow-colour-secondary .arrow-wrap svg path{stroke:#2AF135}.container.arrow-colour-tertiary .arrow-wrap svg path{stroke:#FF7272}.container.arrow-colour-brand-1 .arrow-wrap svg path{stroke:#B30510}.container.arrow-colour-brand-2 .arrow-wrap svg path{stroke:#6E0887}.container.arrow-colour-brand-3 .arrow-wrap svg path{stroke:#50B400}.container.arrow-colour-brand-4 .arrow-wrap svg path{stroke:#FFE500}.container.arrow-colour-brand-5 .arrow-wrap svg path{stroke:#F07D00}.container.arrow-colour-brand-cc-red .arrow-wrap svg path{stroke:#B30510}.container.arrow-colour-brand-wgmf-purple .arrow-wrap svg path{stroke:#6E0887}.container.arrow-colour-brand-gmf-green .arrow-wrap svg path{stroke:#50B400}.container.arrow-colour-brand-emf-yellow .arrow-wrap svg path{stroke:#FFE500}.container.arrow-colour-brand-c4c-orange .arrow-wrap svg path{stroke:#F07D00}.container.arrow-colour-brand-afa-pink .arrow-wrap svg path{stroke:#BF387D}.container.arrow-colour-brand-mhf-turquoise .arrow-wrap svg path{stroke:#62CFC9}.container.arrow-colour-brand-grey .arrow-wrap svg path{stroke:#CBC8C8}.container.arrow-colour-white .arrow-wrap svg path{stroke:#FFFFFF}.container.arrow-colour-black .arrow-wrap svg path{stroke:#000000}.container.arrow-colour-grey-extra-light .arrow-wrap svg path{stroke:#D7D7D7}.container.arrow-colour-grey-light .arrow-wrap svg path{stroke:#E8E8E8}.container.arrow-colour-grey-medium .arrow-wrap svg path{stroke:#8A8A8A}.container.arrow-colour-grey-dark .arrow-wrap svg path{stroke:#4A4A4A}.container.arrow-colour-brand-6 .arrow-wrap svg path{stroke:#62CFC9}";
+const BiggiveIconButtonStyle0 = biggiveIconButtonCss;
 
 const BiggiveIconButton$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveIconButton extends HTMLElement {
     constructor() {
@@ -44,7 +45,7 @@ const BiggiveIconButton$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveIconBu
                 ' shadow-' +
                 this.shadow }, h("a", { href: this.url, target: this.openInNewTab ? '_blank' : '_self', id: this.buttonId }, h("div", { class: "sleeve", onClick: this.handleButtonClick }, h("div", { class: 'icon-wrap ' + ' size-' + this.size + ' circle-' + this.circle.toString() }, h("biggive-generic-icon", { iconGroup: this.iconGroup, icon: this.icon })), this.text != '' ? h("div", { class: 'text-wrap text-colour-' + this.textColour + ' text-padding-' + this.backgroundPadding }, this.text) : null, this.arrow ? (h("div", { class: 'arrow-wrap arrow-colour-' + this.arrowColour }, h("svg", { width: "8", height: "12", viewBox: "0 0 8 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M0.76912 1.0791L5.73828 6.04826L0.769121 11.0174", stroke: "black", "stroke-width": "2" })))) : null))));
     }
-    static get style() { return biggiveIconButtonCss; }
+    static get style() { return BiggiveIconButtonStyle0; }
 }, [1, "biggive-icon-button", {
         "spaceBelow": [2, "space-below"],
         "backgroundColour": [1, "background-colour"],

package/dist/components/biggive-icon-button.js.map

@@ -1 +1 @@
-{"file":"biggive-icon-button.js","mappings":";;;AAAA,MAAM,oBAAoB,GAAG,6sTAA6sT;;MCS7tTA,mBAAiB;;;;;;QA2CpB,sBAAiB,GAAG,CAAC,KAAU;YACrC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,CAAC,MAAM,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC,CAAC;SACjF,CAAC;0BApCkC,CAAC;gCAEG,OAAO;iCAEJ,CAAC;;0BAIV,OAAO;;;;4BAQT,KAAK;oBAEiC,QAAQ;qBAErD,KAAK;2BAEK,OAAO;sBAEhB,KAAK;sBAEL,KAAK;wBAEH,KAAK;uBAEN,KAAK;wBAEO,SAAS;;IAMhD,MAAM;QACJ,QACE,WACE,KAAK,EACH,wBAAwB;gBACxB,IAAI,CAAC,UAAU;gBACf,qBAAqB;gBACrB,IAAI,CAAC,gBAAgB;gBACrB,sBAAsB;gBACtB,IAAI,CAAC,iBAAiB;gBACtB,YAAY;gBACZ,IAAI,CAAC,QAAQ;gBACb,WAAW;gBACX,IAAI,CAAC,OAAO;gBACZ,UAAU;gBACV,IAAI,CAAC,MAAM,IAGb,SAAG,IAAI,EAAE,IAAI,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,YAAY,GAAG,QAAQ,GAAG,OAAO,EAAE,EAAE,EAAE,IAAI,CAAC,QAAQ,IAClF,WAAK,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,IACjD,WAAK,KAAK,EAAE,YAAY,GAAG,QAAQ,GAAG,IAAI,CAAC,IAAI,GAAG,UAAU,GAAG,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,IACnF,4BAAsB,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAyB,CACrF,EAEL,IAAI,CAAC,IAAI,IAAI,EAAE,GAAG,WAAK,KAAK,EAAE,wBAAwB,GAAG,IAAI,CAAC,UAAU,GAAG,gBAAgB,GAAG,IAAI,CAAC,iBAAiB,IAAG,IAAI,CAAC,IAAI,CAAO,GAAG,IAAI,EAE9I,IAAI,CAAC,KAAK,IACT,WAAK,KAAK,EAAE,0BAA0B,GAAG,IAAI,CAAC,WAAW,IACvD,WAAK,KAAK,EAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,UAAU,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,IAC1F,YAAM,CAAC,EAAC,kDAAkD,EAAC,MAAM,EAAC,OAAO,kBAAc,GAAG,GAAG,CACzF,CACF,IACJ,IAAI,CACJ,CACJ,CACA,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveIconButton"],"sources":["src/components/biggive-icon-button/biggive-icon-button.scss?tag=biggive-icon-button&encapsulation=shadow","src/components/biggive-icon-button/biggive-icon-button.tsx"],"sourcesContent":["@include backgrounds();\n@include spacers();\n@include text-colours();\n\n:host {\n  display: contents; \n}\n\n.container {\n  @include standard-font();\n  a {\n    display: block;\n    text-decoration: none;\n    &.full-width-true {\n      display: block;\n    }\n  }\n  &.centered-true {\n    text-align: center;\n  }\n  &.shadow-true {\n    filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.25));\n  }\n  &.rounded-true {\n    border-radius: 10px;\n  }\n  &.background-padding-1 { padding: $spacer-1; }\n  &.background-padding-2 { padding: $spacer-2; }\n  &.background-padding-3 { padding: $spacer-3; }\n  &.background-padding-4 { padding: $spacer-4; }\n  &.background-padding-5 { padding: $spacer-5; }\n  &.background-padding-6 { padding: $spacer-6; }\n\n  .sleeve {\n    display: flex;\n    .text-wrap {\n      margin: auto 0;\n      text-decoration: none;\n      &.text-padding-1 { padding: 0 $spacer-1; }\n      &.text-padding-2 { padding: 0 $spacer-2; }\n      &.text-padding-3 { padding: 0 $spacer-3; }\n      &.text-padding-4 { padding: 0 $spacer-4; }\n      &.text-padding-5 { padding: 0 $spacer-5; }\n      &.text-padding-6 { padding: 0 $spacer-6; }\n    }\n\n    .arrow-wrap {\n      margin: auto 0 auto auto;\n      @each $key, $colour in $brandColoursIncBrand6Turquoise {\n        &.arrow-colour-#{$key} .arrow-wrap svg path { stroke: $colour; }\n      }\n    }\n  }\n\n  .icon-wrap {\n    background-position: center center;\n    background-size: cover;\n\n    &.circle-true {\n      border-radius: 50%;\n      overflow: hidden;\n    }\n\n    &.size-small {\n      width: 30px;\n      height: 30px;\n    }\n    &.size-medium {\n      width: 45px;\n      height: 45px;\n    }  \n    &.size-large {\n      width: 60px;\n      height: 60px;\n    }\n    &.size-x-large {\n      width: 75px;\n      height: 75px;\n    }\n    &.size-xx-large {\n      width: 90px;\n      height: 90px;\n    }\n\n    .misc-icon-item {\n      width: 100%;\n      height: 100%;\n    }\n\n    .misc-icon-item a {\n      padding: 20%;\n    }\n\n  }\n\n  @each $key, $colour in $brandColoursIncBrand6Turquoise {\n    &.arrow-colour-#{$key} .arrow-wrap svg path { stroke: $colour; }\n\n  }\n  \n\n\n}\n\n\n","import { Component, Event, EventEmitter, Prop, h } from '@stencil/core';\nimport { brandColour } from '../../globals/brand-colour';\nimport { spacingOption } from '../../globals/spacing-option';\n\n@Component({\n  tag: 'biggive-icon-button',\n  styleUrl: 'biggive-icon-button.scss',\n  shadow: true,\n})\nexport class BiggiveIconButton {\n  @Event({\n    eventName: 'doButtonClick',\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  doButtonClick: EventEmitter<{ event: object; url: string }>;\n\n  @Prop() spaceBelow: spacingOption = 1;\n\n  @Prop() backgroundColour: brandColour = 'white';\n\n  @Prop() backgroundPadding: spacingOption = 0;\n\n  @Prop() text: string;\n\n  @Prop() textColour: brandColour = 'black';\n\n  @Prop() iconGroup: 'beneficiary' | 'misc' | 'social' | 'category';\n\n  @Prop() icon: string;\n\n  @Prop() url: string;\n\n  @Prop() openInNewTab: boolean = false;\n\n  @Prop() size: 'small' | 'medium' | 'large' | 'x-large' | 'xx-large' = 'medium';\n\n  @Prop() arrow: boolean = false;\n\n  @Prop() arrowColour: brandColour = 'black';\n\n  @Prop() circle: boolean = false;\n\n  @Prop() shadow: boolean = false;\n\n  @Prop() centered: boolean = false;\n\n  @Prop() rounded: boolean = false;\n\n  @Prop() buttonId: undefined | string = undefined;\n\n  private handleButtonClick = (event: any) => {\n    this.doButtonClick.emit({ event: event, url: event.target.parentElement.href });\n  };\n\n  render() {\n    return (\n      <div\n        class={\n          'container space-below-' +\n          this.spaceBelow +\n          ' background-colour-' +\n          this.backgroundColour +\n          ' background-padding-' +\n          this.backgroundPadding +\n          ' centered-' +\n          this.centered +\n          ' rounded-' +\n          this.rounded +\n          ' shadow-' +\n          this.shadow\n        }\n      >\n        <a href={this.url} target={this.openInNewTab ? '_blank' : '_self'} id={this.buttonId}>\n          <div class=\"sleeve\" onClick={this.handleButtonClick}>\n            <div class={'icon-wrap ' + ' size-' + this.size + ' circle-' + this.circle.toString()}>\n              <biggive-generic-icon iconGroup={this.iconGroup} icon={this.icon}></biggive-generic-icon>\n            </div>\n\n            {this.text != '' ? <div class={'text-wrap text-colour-' + this.textColour + ' text-padding-' + this.backgroundPadding}>{this.text}</div> : null}\n\n            {this.arrow ? (\n              <div class={'arrow-wrap arrow-colour-' + this.arrowColour}>\n                <svg width=\"8\" height=\"12\" viewBox=\"0 0 8 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M0.76912 1.0791L5.73828 6.04826L0.769121 11.0174\" stroke=\"black\" stroke-width=\"2\" />\n                </svg>\n              </div>\n            ) : null}\n          </div>\n        </a>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"biggive-icon-button.js","mappings":";;;AAAA,MAAM,oBAAoB,GAAG,6sTAA6sT,CAAC;AAC3uT,gCAAe,oBAAoB;;MCQtBA,mBAAiB;;;;;;QA2CpB,sBAAiB,GAAG,CAAC,KAAU;YACrC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,CAAC,MAAM,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC,CAAC;SACjF,CAAC;0BApCkC,CAAC;gCAEG,OAAO;iCAEJ,CAAC;;0BAIV,OAAO;;;;4BAQT,KAAK;oBAEiC,QAAQ;qBAErD,KAAK;2BAEK,OAAO;sBAEhB,KAAK;sBAEL,KAAK;wBAEH,KAAK;uBAEN,KAAK;wBAEO,SAAS;;IAMhD,MAAM;QACJ,QACE,WACE,KAAK,EACH,wBAAwB;gBACxB,IAAI,CAAC,UAAU;gBACf,qBAAqB;gBACrB,IAAI,CAAC,gBAAgB;gBACrB,sBAAsB;gBACtB,IAAI,CAAC,iBAAiB;gBACtB,YAAY;gBACZ,IAAI,CAAC,QAAQ;gBACb,WAAW;gBACX,IAAI,CAAC,OAAO;gBACZ,UAAU;gBACV,IAAI,CAAC,MAAM,IAGb,SAAG,IAAI,EAAE,IAAI,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,YAAY,GAAG,QAAQ,GAAG,OAAO,EAAE,EAAE,EAAE,IAAI,CAAC,QAAQ,IAClF,WAAK,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,IACjD,WAAK,KAAK,EAAE,YAAY,GAAG,QAAQ,GAAG,IAAI,CAAC,IAAI,GAAG,UAAU,GAAG,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,IACnF,4BAAsB,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAyB,CACrF,EAEL,IAAI,CAAC,IAAI,IAAI,EAAE,GAAG,WAAK,KAAK,EAAE,wBAAwB,GAAG,IAAI,CAAC,UAAU,GAAG,gBAAgB,GAAG,IAAI,CAAC,iBAAiB,IAAG,IAAI,CAAC,IAAI,CAAO,GAAG,IAAI,EAE9I,IAAI,CAAC,KAAK,IACT,WAAK,KAAK,EAAE,0BAA0B,GAAG,IAAI,CAAC,WAAW,IACvD,WAAK,KAAK,EAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,UAAU,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,IAC1F,YAAM,CAAC,EAAC,kDAAkD,EAAC,MAAM,EAAC,OAAO,kBAAc,GAAG,GAAG,CACzF,CACF,IACJ,IAAI,CACJ,CACJ,CACA,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveIconButton"],"sources":["src/components/biggive-icon-button/biggive-icon-button.scss?tag=biggive-icon-button&encapsulation=shadow","src/components/biggive-icon-button/biggive-icon-button.tsx"],"sourcesContent":["@include backgrounds();\n@include spacers();\n@include text-colours();\n\n:host {\n  display: contents; \n}\n\n.container {\n  @include standard-font();\n  a {\n    display: block;\n    text-decoration: none;\n    &.full-width-true {\n      display: block;\n    }\n  }\n  &.centered-true {\n    text-align: center;\n  }\n  &.shadow-true {\n    filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.25));\n  }\n  &.rounded-true {\n    border-radius: 10px;\n  }\n  &.background-padding-1 { padding: $spacer-1; }\n  &.background-padding-2 { padding: $spacer-2; }\n  &.background-padding-3 { padding: $spacer-3; }\n  &.background-padding-4 { padding: $spacer-4; }\n  &.background-padding-5 { padding: $spacer-5; }\n  &.background-padding-6 { padding: $spacer-6; }\n\n  .sleeve {\n    display: flex;\n    .text-wrap {\n      margin: auto 0;\n      text-decoration: none;\n      &.text-padding-1 { padding: 0 $spacer-1; }\n      &.text-padding-2 { padding: 0 $spacer-2; }\n      &.text-padding-3 { padding: 0 $spacer-3; }\n      &.text-padding-4 { padding: 0 $spacer-4; }\n      &.text-padding-5 { padding: 0 $spacer-5; }\n      &.text-padding-6 { padding: 0 $spacer-6; }\n    }\n\n    .arrow-wrap {\n      margin: auto 0 auto auto;\n      @each $key, $colour in $brandColoursIncBrand6Turquoise {\n        &.arrow-colour-#{$key} .arrow-wrap svg path { stroke: $colour; }\n      }\n    }\n  }\n\n  .icon-wrap {\n    background-position: center center;\n    background-size: cover;\n\n    &.circle-true {\n      border-radius: 50%;\n      overflow: hidden;\n    }\n\n    &.size-small {\n      width: 30px;\n      height: 30px;\n    }\n    &.size-medium {\n      width: 45px;\n      height: 45px;\n    }  \n    &.size-large {\n      width: 60px;\n      height: 60px;\n    }\n    &.size-x-large {\n      width: 75px;\n      height: 75px;\n    }\n    &.size-xx-large {\n      width: 90px;\n      height: 90px;\n    }\n\n    .misc-icon-item {\n      width: 100%;\n      height: 100%;\n    }\n\n    .misc-icon-item a {\n      padding: 20%;\n    }\n\n  }\n\n  @each $key, $colour in $brandColoursIncBrand6Turquoise {\n    &.arrow-colour-#{$key} .arrow-wrap svg path { stroke: $colour; }\n\n  }\n  \n\n\n}\n\n\n","import { Component, Event, EventEmitter, Prop, h } from '@stencil/core';\nimport { brandColour } from '../../globals/brand-colour';\nimport { spacingOption } from '../../globals/spacing-option';\n\n@Component({\n  tag: 'biggive-icon-button',\n  styleUrl: 'biggive-icon-button.scss',\n  shadow: true,\n})\nexport class BiggiveIconButton {\n  @Event({\n    eventName: 'doButtonClick',\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  doButtonClick: EventEmitter<{ event: object; url: string }>;\n\n  @Prop() spaceBelow: spacingOption = 1;\n\n  @Prop() backgroundColour: brandColour = 'white';\n\n  @Prop() backgroundPadding: spacingOption = 0;\n\n  @Prop() text: string;\n\n  @Prop() textColour: brandColour = 'black';\n\n  @Prop() iconGroup: 'beneficiary' | 'misc' | 'social' | 'category';\n\n  @Prop() icon: string;\n\n  @Prop() url: string;\n\n  @Prop() openInNewTab: boolean = false;\n\n  @Prop() size: 'small' | 'medium' | 'large' | 'x-large' | 'xx-large' = 'medium';\n\n  @Prop() arrow: boolean = false;\n\n  @Prop() arrowColour: brandColour = 'black';\n\n  @Prop() circle: boolean = false;\n\n  @Prop() shadow: boolean = false;\n\n  @Prop() centered: boolean = false;\n\n  @Prop() rounded: boolean = false;\n\n  @Prop() buttonId: undefined | string = undefined;\n\n  private handleButtonClick = (event: any) => {\n    this.doButtonClick.emit({ event: event, url: event.target.parentElement.href });\n  };\n\n  render() {\n    return (\n      <div\n        class={\n          'container space-below-' +\n          this.spaceBelow +\n          ' background-colour-' +\n          this.backgroundColour +\n          ' background-padding-' +\n          this.backgroundPadding +\n          ' centered-' +\n          this.centered +\n          ' rounded-' +\n          this.rounded +\n          ' shadow-' +\n          this.shadow\n        }\n      >\n        <a href={this.url} target={this.openInNewTab ? '_blank' : '_self'} id={this.buttonId}>\n          <div class=\"sleeve\" onClick={this.handleButtonClick}>\n            <div class={'icon-wrap ' + ' size-' + this.size + ' circle-' + this.circle.toString()}>\n              <biggive-generic-icon iconGroup={this.iconGroup} icon={this.icon}></biggive-generic-icon>\n            </div>\n\n            {this.text != '' ? <div class={'text-wrap text-colour-' + this.textColour + ' text-padding-' + this.backgroundPadding}>{this.text}</div> : null}\n\n            {this.arrow ? (\n              <div class={'arrow-wrap arrow-colour-' + this.arrowColour}>\n                <svg width=\"8\" height=\"12\" viewBox=\"0 0 8 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M0.76912 1.0791L5.73828 6.04826L0.769121 11.0174\" stroke=\"black\" stroke-width=\"2\" />\n                </svg>\n              </div>\n            ) : null}\n          </div>\n        </a>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/biggive-icon-group.js

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
 const biggiveIconGroupCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}:host{display:contents}.container{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px}.container .label{border-bottom:1px solid #4A4A4A;padding-bottom:5px;margin-bottom:10px}.container .sleeve{display:flex}::slotted(*){margin-right:15px}";
+const BiggiveIconGroupStyle0 = biggiveIconGroupCss;
 
 const BiggiveIconGroup$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveIconGroup extends HTMLElement {
     constructor() {
@@ -13,7 +14,7 @@ const BiggiveIconGroup$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveIconGro
     render() {
         return (h("div", { class: 'container space-below-' + this.spaceBelow }, this.label != null ? h("div", { class: "label" }, this.label) : null, h("div", { class: "sleeve" }, h("slot", null))));
     }
-    static get style() { return biggiveIconGroupCss; }
+    static get style() { return BiggiveIconGroupStyle0; }
 }, [1, "biggive-icon-group", {
         "spaceBelow": [2, "space-below"],
         "label": [1]

package/dist/components/biggive-icon-group.js.map

@@ -1 +1 @@
-{"file":"biggive-icon-group.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,8UAA8U;;MCO7VA,kBAAgB;;;;;0BAIE,CAAC;;;IAO9B,MAAM;QACJ,QACE,WAAK,KAAK,EAAE,wBAAwB,GAAG,IAAI,CAAC,UAAU,IACnD,IAAI,CAAC,KAAK,IAAI,IAAI,GAAG,WAAK,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAO,GAAG,IAAI,EAClE,WAAK,KAAK,EAAC,QAAQ,IACjB,eAAa,CACT,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveIconGroup"],"sources":["src/components/biggive-icon-group/biggive-icon-group.scss?tag=biggive-icon-group&encapsulation=shadow","src/components/biggive-icon-group/biggive-icon-group.tsx"],"sourcesContent":[":host {\n  display: contents;\n}\n\n.container {\n  @include standard-font();\n  .label {\n    border-bottom: 1px solid $colour-grey-dark;\n    padding-bottom: $spacer-1;\n    margin-bottom: $spacer-2;\n  }\n  .sleeve {\n    display: flex;\n  }\n}\n\n\n::slotted(*) {\n  margin-right: $spacer-3;\n}","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-icon-group',\n  styleUrl: 'biggive-icon-group.scss',\n  shadow: true,\n})\nexport class BiggiveIconGroup {\n  /**\n   * Space below component\n   */\n  @Prop() spaceBelow: number = 0;\n\n  /**\n   * Label\n   */\n  @Prop() label: string;\n\n  render() {\n    return (\n      <div class={'container space-below-' + this.spaceBelow}>\n        {this.label != null ? <div class=\"label\">{this.label}</div> : null}\n        <div class=\"sleeve\">\n          <slot></slot>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"biggive-icon-group.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,8UAA8U,CAAC;AAC3W,+BAAe,mBAAmB;;MCMrBA,kBAAgB;;;;;0BAIE,CAAC;;;IAO9B,MAAM;QACJ,QACE,WAAK,KAAK,EAAE,wBAAwB,GAAG,IAAI,CAAC,UAAU,IACnD,IAAI,CAAC,KAAK,IAAI,IAAI,GAAG,WAAK,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAO,GAAG,IAAI,EAClE,WAAK,KAAK,EAAC,QAAQ,IACjB,eAAa,CACT,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveIconGroup"],"sources":["src/components/biggive-icon-group/biggive-icon-group.scss?tag=biggive-icon-group&encapsulation=shadow","src/components/biggive-icon-group/biggive-icon-group.tsx"],"sourcesContent":[":host {\n  display: contents;\n}\n\n.container {\n  @include standard-font();\n  .label {\n    border-bottom: 1px solid $colour-grey-dark;\n    padding-bottom: $spacer-1;\n    margin-bottom: $spacer-2;\n  }\n  .sleeve {\n    display: flex;\n  }\n}\n\n\n::slotted(*) {\n  margin-right: $spacer-3;\n}","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-icon-group',\n  styleUrl: 'biggive-icon-group.scss',\n  shadow: true,\n})\nexport class BiggiveIconGroup {\n  /**\n   * Space below component\n   */\n  @Prop() spaceBelow: number = 0;\n\n  /**\n   * Label\n   */\n  @Prop() label: string;\n\n  render() {\n    return (\n      <div class={'container space-below-' + this.spaceBelow}>\n        {this.label != null ? <div class=\"label\">{this.label}</div> : null}\n        <div class=\"sleeve\">\n          <slot></slot>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/biggive-image-button.js

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 
 const biggiveImageButtonCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.background-colour-hover-primary:hover,.background-colour-primary{background-color:#2C089B}.background-colour-hover-secondary:hover,.background-colour-secondary{background-color:#2AF135}.background-colour-hover-tertiary:hover,.background-colour-tertiary{background-color:#FF7272}.background-colour-hover-brand-1:hover,.background-colour-brand-1{background-color:#B30510}.background-colour-hover-brand-2:hover,.background-colour-brand-2{background-color:#6E0887}.background-colour-hover-brand-3:hover,.background-colour-brand-3{background-color:#50B400}.background-colour-hover-brand-4:hover,.background-colour-brand-4{background-color:#FFE500}.background-colour-hover-brand-5:hover,.background-colour-brand-5{background-color:#F07D00}.background-colour-hover-brand-cc-red:hover,.background-colour-brand-cc-red{background-color:#B30510}.background-colour-hover-brand-wgmf-purple:hover,.background-colour-brand-wgmf-purple{background-color:#6E0887}.background-colour-hover-brand-gmf-green:hover,.background-colour-brand-gmf-green{background-color:#50B400}.background-colour-hover-brand-emf-yellow:hover,.background-colour-brand-emf-yellow{background-color:#FFE500}.background-colour-hover-brand-c4c-orange:hover,.background-colour-brand-c4c-orange{background-color:#F07D00}.background-colour-hover-brand-afa-pink:hover,.background-colour-brand-afa-pink{background-color:#BF387D}.background-colour-hover-brand-mhf-turquoise:hover,.background-colour-brand-mhf-turquoise{background-color:#62CFC9}.background-colour-hover-brand-grey:hover,.background-colour-brand-grey{background-color:#CBC8C8}.background-colour-hover-white:hover,.background-colour-white{background-color:#FFFFFF}.background-colour-hover-black:hover,.background-colour-black{background-color:#000000}.background-colour-hover-grey-extra-light:hover,.background-colour-grey-extra-light{background-color:#D7D7D7}.background-colour-hover-grey-light:hover,.background-colour-grey-light{background-color:#E8E8E8}.background-colour-hover-grey-medium:hover,.background-colour-grey-medium{background-color:#8A8A8A}.background-colour-hover-grey-dark:hover,.background-colour-grey-dark{background-color:#4A4A4A}.background-colour-hover-brand-6:hover,.background-colour-brand-6{background-color:#62CFC9}.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-1:hover,.text-colour-brand-1{color:#B30510}.text-colour-hover-brand-2:hover,.text-colour-brand-2{color:#6E0887}.text-colour-hover-brand-3:hover,.text-colour-brand-3{color:#50B400}.text-colour-hover-brand-4:hover,.text-colour-brand-4{color:#FFE500}.text-colour-hover-brand-5:hover,.text-colour-brand-5{color:#F07D00}.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-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-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-brand-6:hover,.text-colour-brand-6{color:#CBC8C8}.space-above-0{margin-top:0}.space-above-1{margin-top:5px}.space-above-2{margin-top:10px}.space-above-3{margin-top:15px}.space-above-4{margin-top:30px}.space-above-5{margin-top:45px}.space-above-6{margin-top:60px}.space-below-0{margin-bottom:0}.space-below-1{margin-bottom:5px}.space-below-2{margin-bottom:10px}.space-below-3{margin-bottom:15px}.space-below-4{margin-bottom:30px}.space-below-5{margin-bottom:45px}.space-below-6{margin-bottom:60px}:host{display:contents}.container{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px}.container a{display:block;text-decoration:none}.container a.full-width-true{display:block}.container.centered-true{text-align:center}.container.shadow-true{filter:drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.25))}.container.rounded-true{border-radius:10px}.container.background-padding-1{padding:5px}.container.background-padding-2{padding:10px}.container.background-padding-3{padding:15px}.container.background-padding-4{padding:30px}.container.background-padding-5{padding:45px}.container.background-padding-6{padding:60px}.container .sleeve{display:flex}.container .sleeve .text-wrap{margin:auto 0;text-decoration:none}.container .sleeve .text-wrap.text-padding-1{padding:0 5px}.container .sleeve .text-wrap.text-padding-2{padding:0 10px}.container .sleeve .text-wrap.text-padding-3{padding:0 15px}.container .sleeve .text-wrap.text-padding-4{padding:0 30px}.container .sleeve .text-wrap.text-padding-5{padding:0 45px}.container .sleeve .text-wrap.text-padding-6{padding:0 60px}.container .sleeve .arrow-wrap{margin:auto 0 auto auto}.container .sleeve .arrow-wrap.arrow-colour-primary .arrow-wrap svg path{stroke:#2C089B}.container .sleeve .arrow-wrap.arrow-colour-secondary .arrow-wrap svg path{stroke:#2AF135}.container .sleeve .arrow-wrap.arrow-colour-tertiary .arrow-wrap svg path{stroke:#FF7272}.container .sleeve .arrow-wrap.arrow-colour-brand-1 .arrow-wrap svg path{stroke:#B30510}.container .sleeve .arrow-wrap.arrow-colour-brand-2 .arrow-wrap svg path{stroke:#6E0887}.container .sleeve .arrow-wrap.arrow-colour-brand-3 .arrow-wrap svg path{stroke:#50B400}.container .sleeve .arrow-wrap.arrow-colour-brand-4 .arrow-wrap svg path{stroke:#FFE500}.container .sleeve .arrow-wrap.arrow-colour-brand-5 .arrow-wrap svg path{stroke:#F07D00}.container .sleeve .arrow-wrap.arrow-colour-brand-cc-red .arrow-wrap svg path{stroke:#B30510}.container .sleeve .arrow-wrap.arrow-colour-brand-wgmf-purple .arrow-wrap svg path{stroke:#6E0887}.container .sleeve .arrow-wrap.arrow-colour-brand-gmf-green .arrow-wrap svg path{stroke:#50B400}.container .sleeve .arrow-wrap.arrow-colour-brand-emf-yellow .arrow-wrap svg path{stroke:#FFE500}.container .sleeve .arrow-wrap.arrow-colour-brand-c4c-orange .arrow-wrap svg path{stroke:#F07D00}.container .sleeve .arrow-wrap.arrow-colour-brand-afa-pink .arrow-wrap svg path{stroke:#BF387D}.container .sleeve .arrow-wrap.arrow-colour-brand-mhf-turquoise .arrow-wrap svg path{stroke:#62CFC9}.container .sleeve .arrow-wrap.arrow-colour-brand-grey .arrow-wrap svg path{stroke:#CBC8C8}.container .sleeve .arrow-wrap.arrow-colour-white .arrow-wrap svg path{stroke:#FFFFFF}.container .sleeve .arrow-wrap.arrow-colour-black .arrow-wrap svg path{stroke:#000000}.container .sleeve .arrow-wrap.arrow-colour-grey-extra-light .arrow-wrap svg path{stroke:#D7D7D7}.container .sleeve .arrow-wrap.arrow-colour-grey-light .arrow-wrap svg path{stroke:#E8E8E8}.container .sleeve .arrow-wrap.arrow-colour-grey-medium .arrow-wrap svg path{stroke:#8A8A8A}.container .sleeve .arrow-wrap.arrow-colour-grey-dark .arrow-wrap svg path{stroke:#4A4A4A}.container .sleeve .arrow-wrap.arrow-colour-brand-6 .arrow-wrap svg path{stroke:#62CFC9}.container .image-wrap{background-position:center center;background-size:cover}.container .image-wrap.image-style-contain{background-size:contain}.container .image-wrap.circle-true{border-radius:50%;overflow:hidden}.container .image-wrap.size-small{width:30px;height:30px}.container .image-wrap.size-medium{width:45px;height:45px}.container .image-wrap.size-large{width:60px;height:60px}.container .image-wrap.size-x-large{width:75px;height:75px}.container .image-wrap.size-xx-large{width:90px;height:90px}";
+const BiggiveImageButtonStyle0 = biggiveImageButtonCss;
 
 const BiggiveImageButton$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveImageButton extends HTMLElement {
     constructor() {
@@ -43,7 +44,7 @@ const BiggiveImageButton$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveImage
                 ' shadow-' +
                 this.shadow }, h("a", { href: this.url, target: this.openInNewTab ? '_blank' : '_self', id: this.buttonId }, h("div", { class: "sleeve", onClick: this.handleButtonClick }, h("div", { class: 'image-wrap ' + ' image-style-' + this.imageStyle + ' size-' + this.size + ' circle-' + this.circle.toString(), style: { backgroundImage: 'url(' + this.imageUrl + ')' } }), this.text != '' ? h("div", { class: 'text-wrap text-colour-' + this.textColour + ' text-padding-' + this.backgroundPadding }, this.text) : null, this.arrow ? (h("div", { class: 'arrow-wrap arrow-colour-' + this.arrowColour }, h("svg", { width: "8", height: "12", viewBox: "0 0 8 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M0.76912 1.0791L5.73828 6.04826L0.769121 11.0174", stroke: "black", "stroke-width": "2" })))) : null))));
     }
-    static get style() { return biggiveImageButtonCss; }
+    static get style() { return BiggiveImageButtonStyle0; }
 }, [1, "biggive-image-button", {
         "spaceBelow": [2, "space-below"],
         "backgroundColour": [1, "background-colour"],

package/dist/components/biggive-image-button.js.map

@@ -1 +1 @@
-{"file":"biggive-image-button.js","mappings":";;AAAA,MAAM,qBAAqB,GAAG,0jQAA0jQ;;MCS3kQA,oBAAkB;;;;;;QA2CrB,sBAAiB,GAAG,CAAC,KAAU;YACrC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,CAAC,MAAM,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC,CAAC;SACjF,CAAC;0BApCkC,CAAC;gCAEG,OAAO;iCAEJ,CAAC;;0BAIV,OAAO;;0BAIZ,OAAO;;4BAIJ,KAAK;oBAEiC,QAAQ;qBAErD,KAAK;2BAEK,OAAO;sBAEhB,KAAK;sBAEL,KAAK;wBAEH,KAAK;uBAEN,KAAK;wBAEO,SAAS;;IAMhD,MAAM;QACJ,QACE,WACE,KAAK,EACH,wBAAwB;gBACxB,IAAI,CAAC,UAAU;gBACf,qBAAqB;gBACrB,IAAI,CAAC,gBAAgB;gBACrB,sBAAsB;gBACtB,IAAI,CAAC,iBAAiB;gBACtB,YAAY;gBACZ,IAAI,CAAC,QAAQ;gBACb,WAAW;gBACX,IAAI,CAAC,OAAO;gBACZ,UAAU;gBACV,IAAI,CAAC,MAAM,IAGb,SAAG,IAAI,EAAE,IAAI,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,YAAY,GAAG,QAAQ,GAAG,OAAO,EAAE,EAAE,EAAE,IAAI,CAAC,QAAQ,IAClF,WAAK,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,IACjD,WACE,KAAK,EAAE,aAAa,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,GAAG,QAAQ,GAAG,IAAI,CAAC,IAAI,GAAG,UAAU,GAAG,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,EACrH,KAAK,EAAE,EAAE,eAAe,EAAE,MAAM,GAAG,IAAI,CAAC,QAAQ,GAAG,GAAG,EAAE,GACnD,EAEN,IAAI,CAAC,IAAI,IAAI,EAAE,GAAG,WAAK,KAAK,EAAE,wBAAwB,GAAG,IAAI,CAAC,UAAU,GAAG,gBAAgB,GAAG,IAAI,CAAC,iBAAiB,IAAG,IAAI,CAAC,IAAI,CAAO,GAAG,IAAI,EAE9I,IAAI,CAAC,KAAK,IACT,WAAK,KAAK,EAAE,0BAA0B,GAAG,IAAI,CAAC,WAAW,IACvD,WAAK,KAAK,EAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,UAAU,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,IAC1F,YAAM,CAAC,EAAC,kDAAkD,EAAC,MAAM,EAAC,OAAO,kBAAc,GAAG,GAAG,CACzF,CACF,IACJ,IAAI,CACJ,CACJ,CACA,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveImageButton"],"sources":["src/components/biggive-image-button/biggive-image-button.scss?tag=biggive-image-button&encapsulation=shadow","src/components/biggive-image-button/biggive-image-button.tsx"],"sourcesContent":["@include backgrounds();\n@include text-colours();\n@include spacers();\n\n:host {\n  display: contents; \n}\n\n.container {\n  @include standard-font();\n  a {\n    display: block;\n    text-decoration: none;\n    &.full-width-true {\n      display: block;\n    }\n  }\n  &.centered-true {\n    text-align: center;\n  }\n  &.shadow-true {\n    filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.25));\n  }\n  &.rounded-true {\n    border-radius: 10px;\n  }\n  &.background-padding-1 { padding: $spacer-1; }\n  &.background-padding-2 { padding: $spacer-2; }\n  &.background-padding-3 { padding: $spacer-3; }\n  &.background-padding-4 { padding: $spacer-4; }\n  &.background-padding-5 { padding: $spacer-5; }\n  &.background-padding-6 { padding: $spacer-6; }\n\n  .sleeve {\n    display: flex;\n    .text-wrap {\n      margin: auto 0;\n      text-decoration: none;\n      &.text-padding-1 { padding: 0 $spacer-1; }\n      &.text-padding-2 { padding: 0 $spacer-2; }\n      &.text-padding-3 { padding: 0 $spacer-3; }\n      &.text-padding-4 { padding: 0 $spacer-4; }\n      &.text-padding-5 { padding: 0 $spacer-5; }\n      &.text-padding-6 { padding: 0 $spacer-6; }\n    }\n\n    .arrow-wrap {\n      margin: auto 0 auto auto;\n      @each $key, $colour in $brandColoursIncBrand6Turquoise {\n        &.arrow-colour-#{$key} .arrow-wrap svg path { stroke: $colour; }\n      }\n    }\n  }\n\n  .image-wrap {\n    background-position: center center;\n    background-size: cover;\n\n    &.image-style-contain {\n      background-size: contain;\n    }  \n\n    &.circle-true {\n      border-radius: 50%;\n      overflow: hidden;\n    }\n\n    &.size-small {\n      width: 30px;\n      height: 30px;\n    }\n    &.size-medium {\n      width: 45px;\n      height: 45px;\n    }  \n    &.size-large {\n      width: 60px;\n      height: 60px;\n    }\n    &.size-x-large {\n      width: 75px;\n      height: 75px;\n    }\n    &.size-xx-large {\n      width: 90px;\n      height: 90px;\n    }\n\n  }\n\n\n  \n\n\n}\n\n\n","import { Component, Event, EventEmitter, Prop, h } from '@stencil/core';\nimport { brandColour } from '../../globals/brand-colour';\nimport { spacingOption } from '../../globals/spacing-option';\n\n@Component({\n  tag: 'biggive-image-button',\n  styleUrl: 'biggive-image-button.scss',\n  shadow: true,\n})\nexport class BiggiveImageButton {\n  @Event({\n    eventName: 'doButtonClick',\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  doButtonClick: EventEmitter<{ event: object; url: string }>;\n\n  @Prop() spaceBelow: spacingOption = 1;\n\n  @Prop() backgroundColour: brandColour = 'white';\n\n  @Prop() backgroundPadding: spacingOption = 0;\n\n  @Prop() text: string;\n\n  @Prop() textColour: brandColour = 'black';\n\n  @Prop() imageUrl: string;\n\n  @Prop() imageStyle: string = 'cover';\n\n  @Prop() url: string;\n\n  @Prop() openInNewTab: boolean = false;\n\n  @Prop() size: 'small' | 'medium' | 'large' | 'x-large' | 'xx-large' = 'medium';\n\n  @Prop() arrow: boolean = false;\n\n  @Prop() arrowColour: brandColour = 'black';\n\n  @Prop() circle: boolean = false;\n\n  @Prop() shadow: boolean = false;\n\n  @Prop() centered: boolean = false;\n\n  @Prop() rounded: boolean = false;\n\n  @Prop() buttonId: undefined | string = undefined;\n\n  private handleButtonClick = (event: any) => {\n    this.doButtonClick.emit({ event: event, url: event.target.parentElement.href });\n  };\n\n  render() {\n    return (\n      <div\n        class={\n          'container space-below-' +\n          this.spaceBelow +\n          ' background-colour-' +\n          this.backgroundColour +\n          ' background-padding-' +\n          this.backgroundPadding +\n          ' centered-' +\n          this.centered +\n          ' rounded-' +\n          this.rounded +\n          ' shadow-' +\n          this.shadow\n        }\n      >\n        <a href={this.url} target={this.openInNewTab ? '_blank' : '_self'} id={this.buttonId}>\n          <div class=\"sleeve\" onClick={this.handleButtonClick}>\n            <div\n              class={'image-wrap ' + ' image-style-' + this.imageStyle + ' size-' + this.size + ' circle-' + this.circle.toString()}\n              style={{ backgroundImage: 'url(' + this.imageUrl + ')' }}\n            ></div>\n\n            {this.text != '' ? <div class={'text-wrap text-colour-' + this.textColour + ' text-padding-' + this.backgroundPadding}>{this.text}</div> : null}\n\n            {this.arrow ? (\n              <div class={'arrow-wrap arrow-colour-' + this.arrowColour}>\n                <svg width=\"8\" height=\"12\" viewBox=\"0 0 8 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M0.76912 1.0791L5.73828 6.04826L0.769121 11.0174\" stroke=\"black\" stroke-width=\"2\" />\n                </svg>\n              </div>\n            ) : null}\n          </div>\n        </a>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"biggive-image-button.js","mappings":";;AAAA,MAAM,qBAAqB,GAAG,0jQAA0jQ,CAAC;AACzlQ,iCAAe,qBAAqB;;MCQvBA,oBAAkB;;;;;;QA2CrB,sBAAiB,GAAG,CAAC,KAAU;YACrC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,CAAC,MAAM,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC,CAAC;SACjF,CAAC;0BApCkC,CAAC;gCAEG,OAAO;iCAEJ,CAAC;;0BAIV,OAAO;;0BAIZ,OAAO;;4BAIJ,KAAK;oBAEiC,QAAQ;qBAErD,KAAK;2BAEK,OAAO;sBAEhB,KAAK;sBAEL,KAAK;wBAEH,KAAK;uBAEN,KAAK;wBAEO,SAAS;;IAMhD,MAAM;QACJ,QACE,WACE,KAAK,EACH,wBAAwB;gBACxB,IAAI,CAAC,UAAU;gBACf,qBAAqB;gBACrB,IAAI,CAAC,gBAAgB;gBACrB,sBAAsB;gBACtB,IAAI,CAAC,iBAAiB;gBACtB,YAAY;gBACZ,IAAI,CAAC,QAAQ;gBACb,WAAW;gBACX,IAAI,CAAC,OAAO;gBACZ,UAAU;gBACV,IAAI,CAAC,MAAM,IAGb,SAAG,IAAI,EAAE,IAAI,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,YAAY,GAAG,QAAQ,GAAG,OAAO,EAAE,EAAE,EAAE,IAAI,CAAC,QAAQ,IAClF,WAAK,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,IACjD,WACE,KAAK,EAAE,aAAa,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,GAAG,QAAQ,GAAG,IAAI,CAAC,IAAI,GAAG,UAAU,GAAG,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,EACrH,KAAK,EAAE,EAAE,eAAe,EAAE,MAAM,GAAG,IAAI,CAAC,QAAQ,GAAG,GAAG,EAAE,GACnD,EAEN,IAAI,CAAC,IAAI,IAAI,EAAE,GAAG,WAAK,KAAK,EAAE,wBAAwB,GAAG,IAAI,CAAC,UAAU,GAAG,gBAAgB,GAAG,IAAI,CAAC,iBAAiB,IAAG,IAAI,CAAC,IAAI,CAAO,GAAG,IAAI,EAE9I,IAAI,CAAC,KAAK,IACT,WAAK,KAAK,EAAE,0BAA0B,GAAG,IAAI,CAAC,WAAW,IACvD,WAAK,KAAK,EAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,UAAU,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,IAC1F,YAAM,CAAC,EAAC,kDAAkD,EAAC,MAAM,EAAC,OAAO,kBAAc,GAAG,GAAG,CACzF,CACF,IACJ,IAAI,CACJ,CACJ,CACA,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveImageButton"],"sources":["src/components/biggive-image-button/biggive-image-button.scss?tag=biggive-image-button&encapsulation=shadow","src/components/biggive-image-button/biggive-image-button.tsx"],"sourcesContent":["@include backgrounds();\n@include text-colours();\n@include spacers();\n\n:host {\n  display: contents; \n}\n\n.container {\n  @include standard-font();\n  a {\n    display: block;\n    text-decoration: none;\n    &.full-width-true {\n      display: block;\n    }\n  }\n  &.centered-true {\n    text-align: center;\n  }\n  &.shadow-true {\n    filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.25));\n  }\n  &.rounded-true {\n    border-radius: 10px;\n  }\n  &.background-padding-1 { padding: $spacer-1; }\n  &.background-padding-2 { padding: $spacer-2; }\n  &.background-padding-3 { padding: $spacer-3; }\n  &.background-padding-4 { padding: $spacer-4; }\n  &.background-padding-5 { padding: $spacer-5; }\n  &.background-padding-6 { padding: $spacer-6; }\n\n  .sleeve {\n    display: flex;\n    .text-wrap {\n      margin: auto 0;\n      text-decoration: none;\n      &.text-padding-1 { padding: 0 $spacer-1; }\n      &.text-padding-2 { padding: 0 $spacer-2; }\n      &.text-padding-3 { padding: 0 $spacer-3; }\n      &.text-padding-4 { padding: 0 $spacer-4; }\n      &.text-padding-5 { padding: 0 $spacer-5; }\n      &.text-padding-6 { padding: 0 $spacer-6; }\n    }\n\n    .arrow-wrap {\n      margin: auto 0 auto auto;\n      @each $key, $colour in $brandColoursIncBrand6Turquoise {\n        &.arrow-colour-#{$key} .arrow-wrap svg path { stroke: $colour; }\n      }\n    }\n  }\n\n  .image-wrap {\n    background-position: center center;\n    background-size: cover;\n\n    &.image-style-contain {\n      background-size: contain;\n    }  \n\n    &.circle-true {\n      border-radius: 50%;\n      overflow: hidden;\n    }\n\n    &.size-small {\n      width: 30px;\n      height: 30px;\n    }\n    &.size-medium {\n      width: 45px;\n      height: 45px;\n    }  \n    &.size-large {\n      width: 60px;\n      height: 60px;\n    }\n    &.size-x-large {\n      width: 75px;\n      height: 75px;\n    }\n    &.size-xx-large {\n      width: 90px;\n      height: 90px;\n    }\n\n  }\n\n\n  \n\n\n}\n\n\n","import { Component, Event, EventEmitter, Prop, h } from '@stencil/core';\nimport { brandColour } from '../../globals/brand-colour';\nimport { spacingOption } from '../../globals/spacing-option';\n\n@Component({\n  tag: 'biggive-image-button',\n  styleUrl: 'biggive-image-button.scss',\n  shadow: true,\n})\nexport class BiggiveImageButton {\n  @Event({\n    eventName: 'doButtonClick',\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  doButtonClick: EventEmitter<{ event: object; url: string }>;\n\n  @Prop() spaceBelow: spacingOption = 1;\n\n  @Prop() backgroundColour: brandColour = 'white';\n\n  @Prop() backgroundPadding: spacingOption = 0;\n\n  @Prop() text: string;\n\n  @Prop() textColour: brandColour = 'black';\n\n  @Prop() imageUrl: string;\n\n  @Prop() imageStyle: string = 'cover';\n\n  @Prop() url: string;\n\n  @Prop() openInNewTab: boolean = false;\n\n  @Prop() size: 'small' | 'medium' | 'large' | 'x-large' | 'xx-large' = 'medium';\n\n  @Prop() arrow: boolean = false;\n\n  @Prop() arrowColour: brandColour = 'black';\n\n  @Prop() circle: boolean = false;\n\n  @Prop() shadow: boolean = false;\n\n  @Prop() centered: boolean = false;\n\n  @Prop() rounded: boolean = false;\n\n  @Prop() buttonId: undefined | string = undefined;\n\n  private handleButtonClick = (event: any) => {\n    this.doButtonClick.emit({ event: event, url: event.target.parentElement.href });\n  };\n\n  render() {\n    return (\n      <div\n        class={\n          'container space-below-' +\n          this.spaceBelow +\n          ' background-colour-' +\n          this.backgroundColour +\n          ' background-padding-' +\n          this.backgroundPadding +\n          ' centered-' +\n          this.centered +\n          ' rounded-' +\n          this.rounded +\n          ' shadow-' +\n          this.shadow\n        }\n      >\n        <a href={this.url} target={this.openInNewTab ? '_blank' : '_self'} id={this.buttonId}>\n          <div class=\"sleeve\" onClick={this.handleButtonClick}>\n            <div\n              class={'image-wrap ' + ' image-style-' + this.imageStyle + ' size-' + this.size + ' circle-' + this.circle.toString()}\n              style={{ backgroundImage: 'url(' + this.imageUrl + ')' }}\n            ></div>\n\n            {this.text != '' ? <div class={'text-wrap text-colour-' + this.textColour + ' text-padding-' + this.backgroundPadding}>{this.text}</div> : null}\n\n            {this.arrow ? (\n              <div class={'arrow-wrap arrow-colour-' + this.arrowColour}>\n                <svg width=\"8\" height=\"12\" viewBox=\"0 0 8 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M0.76912 1.0791L5.73828 6.04826L0.769121 11.0174\" stroke=\"black\" stroke-width=\"2\" />\n                </svg>\n              </div>\n            ) : null}\n          </div>\n        </a>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/biggive-image-card.js

@@ -2,6 +2,7 @@ import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/clien
 import { d as defineCustomElement$2 } from './biggive-button2.js';
 
 const biggiveImageCardCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.background-colour-hover-primary:hover,.background-colour-primary{background-color:#2C089B}.background-colour-hover-secondary:hover,.background-colour-secondary{background-color:#2AF135}.background-colour-hover-tertiary:hover,.background-colour-tertiary{background-color:#FF7272}.background-colour-hover-brand-1:hover,.background-colour-brand-1{background-color:#B30510}.background-colour-hover-brand-2:hover,.background-colour-brand-2{background-color:#6E0887}.background-colour-hover-brand-3:hover,.background-colour-brand-3{background-color:#50B400}.background-colour-hover-brand-4:hover,.background-colour-brand-4{background-color:#FFE500}.background-colour-hover-brand-5:hover,.background-colour-brand-5{background-color:#F07D00}.background-colour-hover-brand-cc-red:hover,.background-colour-brand-cc-red{background-color:#B30510}.background-colour-hover-brand-wgmf-purple:hover,.background-colour-brand-wgmf-purple{background-color:#6E0887}.background-colour-hover-brand-gmf-green:hover,.background-colour-brand-gmf-green{background-color:#50B400}.background-colour-hover-brand-emf-yellow:hover,.background-colour-brand-emf-yellow{background-color:#FFE500}.background-colour-hover-brand-c4c-orange:hover,.background-colour-brand-c4c-orange{background-color:#F07D00}.background-colour-hover-brand-afa-pink:hover,.background-colour-brand-afa-pink{background-color:#BF387D}.background-colour-hover-brand-mhf-turquoise:hover,.background-colour-brand-mhf-turquoise{background-color:#62CFC9}.background-colour-hover-brand-grey:hover,.background-colour-brand-grey{background-color:#CBC8C8}.background-colour-hover-white:hover,.background-colour-white{background-color:#FFFFFF}.background-colour-hover-black:hover,.background-colour-black{background-color:#000000}.background-colour-hover-grey-extra-light:hover,.background-colour-grey-extra-light{background-color:#D7D7D7}.background-colour-hover-grey-light:hover,.background-colour-grey-light{background-color:#E8E8E8}.background-colour-hover-grey-medium:hover,.background-colour-grey-medium{background-color:#8A8A8A}.background-colour-hover-grey-dark:hover,.background-colour-grey-dark{background-color:#4A4A4A}.background-colour-hover-brand-6:hover,.background-colour-brand-6{background-color:#62CFC9}.fill-primary{fill:#2C089B}.fill-secondary{fill:#2AF135}.fill-tertiary{fill:#FF7272}.fill-brand-1{fill:#B30510}.fill-brand-2{fill:#6E0887}.fill-brand-3{fill:#50B400}.fill-brand-4{fill:#FFE500}.fill-brand-5{fill:#F07D00}.fill-brand-cc-red{fill:#B30510}.fill-brand-wgmf-purple{fill:#6E0887}.fill-brand-gmf-green{fill:#50B400}.fill-brand-emf-yellow{fill:#FFE500}.fill-brand-c4c-orange{fill:#F07D00}.fill-brand-afa-pink{fill:#BF387D}.fill-brand-mhf-turquoise{fill:#62CFC9}.fill-brand-grey{fill:#CBC8C8}.fill-white{fill:#FFFFFF}.fill-black{fill:#000000}.fill-grey-extra-light{fill:#D7D7D7}.fill-grey-light{fill:#E8E8E8}.fill-grey-medium{fill:#8A8A8A}.fill-grey-dark{fill:#4A4A4A}.fill-brand-6{fill:#CBC8C8}.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-1:hover,.text-colour-brand-1{color:#B30510}.text-colour-hover-brand-2:hover,.text-colour-brand-2{color:#6E0887}.text-colour-hover-brand-3:hover,.text-colour-brand-3{color:#50B400}.text-colour-hover-brand-4:hover,.text-colour-brand-4{color:#FFE500}.text-colour-hover-brand-5:hover,.text-colour-brand-5{color:#F07D00}.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-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-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-brand-6:hover,.text-colour-brand-6{color:#CBC8C8}:host{display:contents}.container{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;position:relative;text-align:center;background-size:cover;background-position:center center;padding:10px;height:100%;white-space:pre-wrap;box-shadow:0px 0px 30px rgba(0, 0, 0, 0.2)}.container a,.container a:hover{text-decoration:none}.container .sleeve{padding:10px;height:100%;box-sizing:border-box;transition:all 1s ease-in-out}.container.add-animation-true:hover .sleeve{margin:-30px;padding:60px;height:calc(100% + 60px)}.container.clip-bottom-left-corner-false.clip-top-right-corner-true{clip-path:polygon(0% 0%, 0% 0%, calc(100% - 50px) 0%, 100% 50px, 100% 100%, 100% 100%, 0% 100%, 0 100%)}.container.clip-bottom-left-corner-true.clip-top-right-corner-false{clip-path:polygon(0% 0%, 0% 0%, 100% 0%, 100% 0, 100% 100%, 100% 100%, 50px 100%, 0 calc(100% - 50px))}.container.clip-bottom-left-corner-true.clip-top-right-corner-true{clip-path:polygon(0% 0%, 0% 0%, calc(100% - 50px) 0%, 100% 50px, 100% 100%, 100% 100%, 50px 100%, 0 calc(100% - 50px))}.container .icon svg{width:50px;height:auto}.container .title{font-size:25px;line-height:32px;font-weight:bold;margin-bottom:15px}.container .teaser{margin-bottom:15px}.container .main-image-container{margin-bottom:15px}.container .main-image-container img{width:100%;height:auto}.container .button-wrap{text-align:center}.container .button-wrap.align-left{text-align:left}.container .button-wrap.align-right{text-align:right}.container .text-align-left{text-align:left}.container .text-align-center{text-align:center}.container .text-align-right{text-align:right}";
+const BiggiveImageCardStyle0 = biggiveImageCardCss;
 
 const BiggiveImageCard$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveImageCard extends HTMLElement {
     constructor() {
@@ -36,7 +37,7 @@ const BiggiveImageCard$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveImageCa
                 ' add-animation-' +
                 this.addAnimation }, h("a", { href: this.buttonUrl }, h("div", { class: 'sleeve text-colour-' + this.teaserColour + ' text-align-' + this.textAlign }, h("div", { class: "content-wrap" }, this.mainImageUrl != '' ? (h("div", { class: "main-image-container" }, h("div", { class: "image-wrap" }, h("img", { src: this.mainImageUrl, alt: this.mainImageAltText, title: this.mainImageAltText })))) : null, h("div", { class: "teaser" }, this.teaser), this.buttonLabel != null && this.buttonUrl != null && this.buttonUrl != '' ? (h("div", { class: 'button-wrap align-' + this.buttonAlign }, h("biggive-button", { "colour-scheme": this.buttonColourScheme, label: this.buttonLabel }))) : null)))));
     }
-    static get style() { return biggiveImageCardCss; }
+    static get style() { return BiggiveImageCardStyle0; }
 }, [1, "biggive-image-card", {
         "spaceBelow": [2, "space-below"],
         "backgroundColour": [1, "background-colour"],

package/dist/components/biggive-image-card.js.map

@@ -1 +1 @@
-{"file":"biggive-image-card.js","mappings":";;;AAAA,MAAM,mBAAmB,GAAG,0qNAA0qN;;MCSzrNA,kBAAgB;;;;;0BACS,CAAC;gCAEG,SAAS;;;yBAMA,QAAQ;;4BAIrB,OAAO;2BAEb,QAAQ;2BAER,UAAU;;;kCAMH,eAAe;oCAEZ,IAAI;kCAEN,IAAI;4BAEV,KAAK;;IAErC,MAAM;QACJ,QACE,WACE,KAAK,EACH,wBAAwB;gBACxB,IAAI,CAAC,UAAU;gBACf,qBAAqB;gBACrB,IAAI,CAAC,gBAAgB;gBACrB,2BAA2B;gBAC3B,IAAI,CAAC,oBAAoB;gBACzB,yBAAyB;gBACzB,IAAI,CAAC,kBAAkB;gBACvB,iBAAiB;gBACjB,IAAI,CAAC,YAAY,IAGnB,SAAG,IAAI,EAAE,IAAI,CAAC,SAAS,IACrB,WAAK,KAAK,EAAE,qBAAqB,GAAG,IAAI,CAAC,YAAY,GAAG,cAAc,GAAG,IAAI,CAAC,SAAS,IACrF,WAAK,KAAK,EAAC,cAAc,IACtB,IAAI,CAAC,YAAY,IAAI,EAAE,IACtB,WAAK,KAAK,EAAC,sBAAsB,IAC/B,WAAK,KAAK,EAAC,YAAY,IACrB,WAAK,GAAG,EAAE,IAAI,CAAC,YAAY,EAAE,GAAG,EAAE,IAAI,CAAC,gBAAgB,EAAE,KAAK,EAAE,IAAI,CAAC,gBAAgB,GAAI,CACrF,CACF,IACJ,IAAI,EACR,WAAK,KAAK,EAAC,QAAQ,IAAE,IAAI,CAAC,MAAM,CAAO,EACtC,IAAI,CAAC,WAAW,IAAI,IAAI,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,IAAI,IAAI,CAAC,SAAS,IAAI,EAAE,IACzE,WAAK,KAAK,EAAE,oBAAoB,GAAG,IAAI,CAAC,WAAW,IACjD,uCAA+B,IAAI,CAAC,kBAAkB,EAAE,KAAK,EAAE,IAAI,CAAC,WAAW,GAAmB,CAC9F,IACJ,IAAI,CACJ,CACF,CACJ,CACA,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveImageCard"],"sources":["src/components/biggive-image-card/biggive-image-card.scss?tag=biggive-image-card&encapsulation=shadow","src/components/biggive-image-card/biggive-image-card.tsx"],"sourcesContent":["@include backgrounds();\n@include fills();\n@include spacers();\n@include text-colours();\n\n:host {\n  display: contents;\n}\n\n.container {\n  @include standard-font();\n  position: relative;\n  text-align: center;\n  background-size: cover;\n  background-position: center center;\n  padding: $spacer-2;\n  height: 100%;\n  white-space: pre-wrap;\n  box-shadow: 0px 0px 30px rgb(0 0 0 / 20%);\n  a,\n  a:hover {\n    text-decoration: none;\n  }\n  .sleeve {\n    padding: $spacer-2;\n    height: 100%;\n    box-sizing: border-box;\n    transition: all 1s ease-in-out;\n  }\n  &.add-animation-true:hover .sleeve {\n    margin: -30px;\n    padding: 60px;\n    height: calc(100% + 60px);\n  }\n  &.clip-bottom-left-corner-false.clip-top-right-corner-true {\n      @include corner-clip-medium-top-right();\n  }\n  &.clip-bottom-left-corner-true.clip-top-right-corner-false {\n      @include corner-clip-medium-bottom-left();\n  }\n  &.clip-bottom-left-corner-true.clip-top-right-corner-true {\n      @include corner-clip-medium-bottom-left-top-right();\n  }\n\n  .icon {\n    svg {\n      width: 50px;\n      height: auto;\n    }\n  }\n  .title {\n    // these have to be the heading level passed in based on order of headings, but in terms of design we want it look like H3.\n    @include heading-3();\n    margin-bottom: $spacer-3;\n  }\n  .teaser {\n    margin-bottom: $spacer-3;\n  }\n  .main-image-container {\n    margin-bottom: 15px;\n    img {\n      width: 100%;\n      height: auto;\n    }\n  }\n  .button-wrap {\n    text-align: center;\n    &.align-left {\n      text-align: left;\n    }\n    &.align-right {\n      text-align: right;\n    }\n  }\n\n  .text-align-left {\n    text-align: left;\n  }\n  .text-align-center {\n    text-align: center;\n  }\n  .text-align-right {\n    text-align: right;\n  }\n\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { brandColour } from '../../globals/brand-colour';\nimport { spacingOption } from '../../globals/spacing-option';\n\n@Component({\n  tag: 'biggive-image-card',\n  styleUrl: 'biggive-image-card.scss',\n  shadow: true,\n})\nexport class BiggiveImageCard {\n  @Prop() spaceBelow: spacingOption = 0;\n\n  @Prop() backgroundColour: brandColour = 'primary';\n\n  @Prop() mainImageUrl: string;\n\n  @Prop() mainImageAltText: string;\n\n  @Prop() textAlign: 'left' | 'center' | 'right' = 'center';\n\n  @Prop() teaser: string;\n\n  @Prop() teaserColour: brandColour = 'black';\n\n  @Prop() buttonAlign: string = 'center';\n\n  @Prop() buttonStyle: string = 'standard';\n\n  @Prop() buttonLabel: string;\n\n  @Prop() buttonUrl: string;\n\n  @Prop() buttonColourScheme: string = 'clear-primary';\n\n  @Prop() clipBottomLeftCorner: boolean = true;\n\n  @Prop() clipTopRightCorner: boolean = true;\n\n  @Prop() addAnimation: boolean = false;\n\n  render() {\n    return (\n      <div\n        class={\n          'container space-below-' +\n          this.spaceBelow +\n          ' background-colour-' +\n          this.backgroundColour +\n          ' clip-bottom-left-corner-' +\n          this.clipBottomLeftCorner +\n          ' clip-top-right-corner-' +\n          this.clipTopRightCorner +\n          ' add-animation-' +\n          this.addAnimation\n        }\n      >\n        <a href={this.buttonUrl}>\n          <div class={'sleeve text-colour-' + this.teaserColour + ' text-align-' + this.textAlign}>\n            <div class=\"content-wrap\">\n              {this.mainImageUrl != '' ? (\n                <div class=\"main-image-container\">\n                  <div class=\"image-wrap\">\n                    <img src={this.mainImageUrl} alt={this.mainImageAltText} title={this.mainImageAltText} />\n                  </div>\n                </div>\n              ) : null}\n              <div class=\"teaser\">{this.teaser}</div>\n              {this.buttonLabel != null && this.buttonUrl != null && this.buttonUrl != '' ? (\n                <div class={'button-wrap align-' + this.buttonAlign}>\n                  <biggive-button colour-scheme={this.buttonColourScheme} label={this.buttonLabel}></biggive-button>\n                </div>\n              ) : null}\n            </div>\n          </div>\n        </a>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"biggive-image-card.js","mappings":";;;AAAA,MAAM,mBAAmB,GAAG,0qNAA0qN,CAAC;AACvsN,+BAAe,mBAAmB;;MCQrBA,kBAAgB;;;;;0BACS,CAAC;gCAEG,SAAS;;;yBAMA,QAAQ;;4BAIrB,OAAO;2BAEb,QAAQ;2BAER,UAAU;;;kCAMH,eAAe;oCAEZ,IAAI;kCAEN,IAAI;4BAEV,KAAK;;IAErC,MAAM;QACJ,QACE,WACE,KAAK,EACH,wBAAwB;gBACxB,IAAI,CAAC,UAAU;gBACf,qBAAqB;gBACrB,IAAI,CAAC,gBAAgB;gBACrB,2BAA2B;gBAC3B,IAAI,CAAC,oBAAoB;gBACzB,yBAAyB;gBACzB,IAAI,CAAC,kBAAkB;gBACvB,iBAAiB;gBACjB,IAAI,CAAC,YAAY,IAGnB,SAAG,IAAI,EAAE,IAAI,CAAC,SAAS,IACrB,WAAK,KAAK,EAAE,qBAAqB,GAAG,IAAI,CAAC,YAAY,GAAG,cAAc,GAAG,IAAI,CAAC,SAAS,IACrF,WAAK,KAAK,EAAC,cAAc,IACtB,IAAI,CAAC,YAAY,IAAI,EAAE,IACtB,WAAK,KAAK,EAAC,sBAAsB,IAC/B,WAAK,KAAK,EAAC,YAAY,IACrB,WAAK,GAAG,EAAE,IAAI,CAAC,YAAY,EAAE,GAAG,EAAE,IAAI,CAAC,gBAAgB,EAAE,KAAK,EAAE,IAAI,CAAC,gBAAgB,GAAI,CACrF,CACF,IACJ,IAAI,EACR,WAAK,KAAK,EAAC,QAAQ,IAAE,IAAI,CAAC,MAAM,CAAO,EACtC,IAAI,CAAC,WAAW,IAAI,IAAI,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,IAAI,IAAI,CAAC,SAAS,IAAI,EAAE,IACzE,WAAK,KAAK,EAAE,oBAAoB,GAAG,IAAI,CAAC,WAAW,IACjD,uCAA+B,IAAI,CAAC,kBAAkB,EAAE,KAAK,EAAE,IAAI,CAAC,WAAW,GAAmB,CAC9F,IACJ,IAAI,CACJ,CACF,CACJ,CACA,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveImageCard"],"sources":["src/components/biggive-image-card/biggive-image-card.scss?tag=biggive-image-card&encapsulation=shadow","src/components/biggive-image-card/biggive-image-card.tsx"],"sourcesContent":["@include backgrounds();\n@include fills();\n@include spacers();\n@include text-colours();\n\n:host {\n  display: contents;\n}\n\n.container {\n  @include standard-font();\n  position: relative;\n  text-align: center;\n  background-size: cover;\n  background-position: center center;\n  padding: $spacer-2;\n  height: 100%;\n  white-space: pre-wrap;\n  box-shadow: 0px 0px 30px rgb(0 0 0 / 20%);\n  a,\n  a:hover {\n    text-decoration: none;\n  }\n  .sleeve {\n    padding: $spacer-2;\n    height: 100%;\n    box-sizing: border-box;\n    transition: all 1s ease-in-out;\n  }\n  &.add-animation-true:hover .sleeve {\n    margin: -30px;\n    padding: 60px;\n    height: calc(100% + 60px);\n  }\n  &.clip-bottom-left-corner-false.clip-top-right-corner-true {\n      @include corner-clip-medium-top-right();\n  }\n  &.clip-bottom-left-corner-true.clip-top-right-corner-false {\n      @include corner-clip-medium-bottom-left();\n  }\n  &.clip-bottom-left-corner-true.clip-top-right-corner-true {\n      @include corner-clip-medium-bottom-left-top-right();\n  }\n\n  .icon {\n    svg {\n      width: 50px;\n      height: auto;\n    }\n  }\n  .title {\n    // these have to be the heading level passed in based on order of headings, but in terms of design we want it look like H3.\n    @include heading-3();\n    margin-bottom: $spacer-3;\n  }\n  .teaser {\n    margin-bottom: $spacer-3;\n  }\n  .main-image-container {\n    margin-bottom: 15px;\n    img {\n      width: 100%;\n      height: auto;\n    }\n  }\n  .button-wrap {\n    text-align: center;\n    &.align-left {\n      text-align: left;\n    }\n    &.align-right {\n      text-align: right;\n    }\n  }\n\n  .text-align-left {\n    text-align: left;\n  }\n  .text-align-center {\n    text-align: center;\n  }\n  .text-align-right {\n    text-align: right;\n  }\n\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { brandColour } from '../../globals/brand-colour';\nimport { spacingOption } from '../../globals/spacing-option';\n\n@Component({\n  tag: 'biggive-image-card',\n  styleUrl: 'biggive-image-card.scss',\n  shadow: true,\n})\nexport class BiggiveImageCard {\n  @Prop() spaceBelow: spacingOption = 0;\n\n  @Prop() backgroundColour: brandColour = 'primary';\n\n  @Prop() mainImageUrl: string;\n\n  @Prop() mainImageAltText: string;\n\n  @Prop() textAlign: 'left' | 'center' | 'right' = 'center';\n\n  @Prop() teaser: string;\n\n  @Prop() teaserColour: brandColour = 'black';\n\n  @Prop() buttonAlign: string = 'center';\n\n  @Prop() buttonStyle: string = 'standard';\n\n  @Prop() buttonLabel: string;\n\n  @Prop() buttonUrl: string;\n\n  @Prop() buttonColourScheme: string = 'clear-primary';\n\n  @Prop() clipBottomLeftCorner: boolean = true;\n\n  @Prop() clipTopRightCorner: boolean = true;\n\n  @Prop() addAnimation: boolean = false;\n\n  render() {\n    return (\n      <div\n        class={\n          'container space-below-' +\n          this.spaceBelow +\n          ' background-colour-' +\n          this.backgroundColour +\n          ' clip-bottom-left-corner-' +\n          this.clipBottomLeftCorner +\n          ' clip-top-right-corner-' +\n          this.clipTopRightCorner +\n          ' add-animation-' +\n          this.addAnimation\n        }\n      >\n        <a href={this.buttonUrl}>\n          <div class={'sleeve text-colour-' + this.teaserColour + ' text-align-' + this.textAlign}>\n            <div class=\"content-wrap\">\n              {this.mainImageUrl != '' ? (\n                <div class=\"main-image-container\">\n                  <div class=\"image-wrap\">\n                    <img src={this.mainImageUrl} alt={this.mainImageAltText} title={this.mainImageAltText} />\n                  </div>\n                </div>\n              ) : null}\n              <div class=\"teaser\">{this.teaser}</div>\n              {this.buttonLabel != null && this.buttonUrl != null && this.buttonUrl != '' ? (\n                <div class={'button-wrap align-' + this.buttonAlign}>\n                  <biggive-button colour-scheme={this.buttonColourScheme} label={this.buttonLabel}></biggive-button>\n                </div>\n              ) : null}\n            </div>\n          </div>\n        </a>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/biggive-image-feature.js

@@ -2,6 +2,7 @@ import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/clien
 import { d as defineCustomElement$2 } from './biggive-button2.js';
 
 const biggiveImageFeatureCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.image-wrap img{width:100%;height:auto}.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-1:hover,.text-colour-brand-1{color:#B30510}.text-colour-hover-brand-2:hover,.text-colour-brand-2{color:#6E0887}.text-colour-hover-brand-3:hover,.text-colour-brand-3{color:#50B400}.text-colour-hover-brand-4:hover,.text-colour-brand-4{color:#FFE500}.text-colour-hover-brand-5:hover,.text-colour-brand-5{color:#F07D00}.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-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-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-brand-6:hover,.text-colour-brand-6{color:#CBC8C8}:host{display:contents}.container{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;position:relative}.container .sleeve{display:flex;justify-content:space-between}.container .sleeve .content-wrap{width:calc(40% - 15px);position:relative;z-index:1}.container .sleeve .content-wrap .slug{font-size:20px;line-height:24px;font-weight:bold;margin:0;padding:0}.container .sleeve .content-wrap h2{font-size:38px;line-height:45px;font-weight:bold;margin:0 0 15px 0;padding:0}.container .sleeve .content-wrap .teaser{margin:0 0 45px 0;padding:0}.container .sleeve .graphic-wrap{width:calc(60% - 15px)}@media screen and (max-width: 576px){.container .sleeve{flex-wrap:wrap}.container .sleeve .content-wrap{width:100%}.container .sleeve .graphic-wrap{width:100%;margin-bottom:15px;order:-1}}";
+const BiggiveImageFeatureStyle0 = biggiveImageFeatureCss;
 
 const BiggiveImageFeature$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveImageFeature extends HTMLElement {
     constructor() {
@@ -25,7 +26,7 @@ const BiggiveImageFeature$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveImag
     render() {
         return (h("div", { class: 'container text-colour-' + this.defaultTextColour + ' space-below-' + this.spaceBelow }, h("div", { class: "sleeve" }, h("div", { class: "content-wrap" }, h("div", { class: 'slug text-colour-' + this.slugColour }, this.slug), h("h2", { class: 'title text-colour-' + this.mainTitleColour }, this.mainTitle), h("div", { class: 'teaser text-colour-' + this.teaserColour }, this.teaser), this.buttonLabel != null && this.buttonUrl != null ? (h("biggive-button", { "colour-scheme": this.buttonColourScheme, url: this.buttonUrl, label: this.buttonLabel })) : null), h("div", { class: "graphic-wrap" }, this.imageUrl !== null && this.imageUrl !== undefined ? (h("div", { class: "image-wrap" }, h("img", { src: this.imageUrl, alt: this.imageAltText }))) : null))));
     }
-    static get style() { return biggiveImageFeatureCss; }
+    static get style() { return BiggiveImageFeatureStyle0; }
 }, [1, "biggive-image-feature", {
         "spaceBelow": [2, "space-below"],
         "defaultTextColour": [1, "default-text-colour"],

package/dist/components/biggive-image-feature.js.map

@@ -1 +1 @@
-{"file":"biggive-image-feature.js","mappings":";;;AAAA,MAAM,sBAAsB,GAAG,mlFAAmlF;;MCOrmFA,qBAAmB;;;;;0BAID,CAAC;iCAIM,SAAS;wBAKlB,EAAE;4BAKE,EAAE;;0BAUJ,EAAE;;+BAUG,EAAE;;4BAUL,EAAE;;;kCAeI,SAAS;;IAE9C,MAAM;QACJ,QACE,WAAK,KAAK,EAAE,wBAAwB,GAAG,IAAI,CAAC,iBAAiB,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,IAC/F,WAAK,KAAK,EAAC,QAAQ,IACjB,WAAK,KAAK,EAAC,cAAc,IACvB,WAAK,KAAK,EAAE,mBAAmB,GAAG,IAAI,CAAC,UAAU,IAAG,IAAI,CAAC,IAAI,CAAO,EACpE,UAAI,KAAK,EAAE,oBAAoB,GAAG,IAAI,CAAC,eAAe,IAAG,IAAI,CAAC,SAAS,CAAM,EAC7E,WAAK,KAAK,EAAE,qBAAqB,GAAG,IAAI,CAAC,YAAY,IAAG,IAAI,CAAC,MAAM,CAAO,EACzE,IAAI,CAAC,WAAW,IAAI,IAAI,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,IACjD,uCAA+B,IAAI,CAAC,kBAAkB,EAAE,GAAG,EAAE,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,WAAW,GAAmB,IACrH,IAAI,CACJ,EACN,WAAK,KAAK,EAAC,cAAc,IACtB,IAAI,CAAC,QAAQ,KAAK,IAAI,IAAI,IAAI,CAAC,QAAQ,KAAK,SAAS,IACpD,WAAK,KAAK,EAAC,YAAY,IACrB,WAAK,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,IAAI,CAAC,YAAY,GAAI,CAC/C,IACJ,IAAI,CACJ,CACF,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveImageFeature"],"sources":["src/components/biggive-image-feature/biggive-image-feature.scss?tag=biggive-image-feature&encapsulation=shadow","src/components/biggive-image-feature/biggive-image-feature.tsx"],"sourcesContent":["@include image-alignment();\n@include text-colours();\n\n:host {\n  display: contents;\n}\n\n.container {\n  @include standard-font();\n  position: relative;\n  .sleeve {\n    @include flex-container-row();\n    .content-wrap {\n      width: calc(40% - $spacer-3);\n      position: relative;\n      z-index: 1;\n      .slug {\n        @include heading-4;\n        margin: 0;\n        padding: 0;\n      }\n      h2 {\n        @include heading-2;\n         margin: 0 0 $spacer-3 0;\n        padding: 0;\n      }\n      .teaser {\n        margin: 0 0 $spacer-5 0;\n        padding: 0;\n      }\n    }\n  \n    .graphic-wrap {\n      width: calc(60% - $spacer-3);\n    }\n  }\n}\n\n\n@media screen and (max-width: $screen-mobile-max) {\n  .container {\n    .sleeve {\n      flex-wrap: wrap;\n    .content-wrap {\n      width: 100%;\n    }\n    .graphic-wrap {\n      width: 100%;\n      margin-bottom: $spacer-3;\n      order: -1;\n    }\n  }\n  }\n}\n\n\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-image-feature',\n  styleUrl: 'biggive-image-feature.scss',\n  shadow: true,\n})\nexport class BiggiveImageFeature {\n  /**\n   * Space below component\n   */\n  @Prop() spaceBelow: number = 0;\n  /**\n   * Default text colour\n   */\n  @Prop() defaultTextColour: string = 'primary';\n\n  /**\n   * Full URL of a image.\n   */\n  @Prop() imageUrl: string = '';\n\n  /**\n   * Image alt text tag.\n   */\n  @Prop() imageAltText: string = '';\n\n  /**\n   * Slug\n   */\n  @Prop() slug: string;\n\n  /**\n   * Slug colour\n   */\n  @Prop() slugColour: string = '';\n\n  /**\n   * Video title\n   */\n  @Prop() mainTitle: string;\n\n  /**\n   * Slug colour\n   */\n  @Prop() mainTitleColour: string = '';\n\n  /**\n   * Introductory teaser text\n   */\n  @Prop() teaser: string;\n\n  /**\n   * Teaser colour\n   */\n  @Prop() teaserColour: string = '';\n\n  /**\n   * Button Url\n   */\n  @Prop() buttonUrl: string;\n\n  /**\n   * Button Label\n   */\n  @Prop() buttonLabel: string;\n\n  /**\n   * Button Colour Scheme\n   */\n  @Prop() buttonColourScheme: string = 'primary';\n\n  render() {\n    return (\n      <div class={'container text-colour-' + this.defaultTextColour + ' space-below-' + this.spaceBelow}>\n        <div class=\"sleeve\">\n          <div class=\"content-wrap\">\n            <div class={'slug text-colour-' + this.slugColour}>{this.slug}</div>\n            <h2 class={'title text-colour-' + this.mainTitleColour}>{this.mainTitle}</h2>\n            <div class={'teaser text-colour-' + this.teaserColour}>{this.teaser}</div>\n            {this.buttonLabel != null && this.buttonUrl != null ? (\n              <biggive-button colour-scheme={this.buttonColourScheme} url={this.buttonUrl} label={this.buttonLabel}></biggive-button>\n            ) : null}\n          </div>\n          <div class=\"graphic-wrap\">\n            {this.imageUrl !== null && this.imageUrl !== undefined ? (\n              <div class=\"image-wrap\">\n                <img src={this.imageUrl} alt={this.imageAltText} />\n              </div>\n            ) : null}\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"biggive-image-feature.js","mappings":";;;AAAA,MAAM,sBAAsB,GAAG,mlFAAmlF,CAAC;AACnnF,kCAAe,sBAAsB;;MCMxBA,qBAAmB;;;;;0BAID,CAAC;iCAIM,SAAS;wBAKlB,EAAE;4BAKE,EAAE;;0BAUJ,EAAE;;+BAUG,EAAE;;4BAUL,EAAE;;;kCAeI,SAAS;;IAE9C,MAAM;QACJ,QACE,WAAK,KAAK,EAAE,wBAAwB,GAAG,IAAI,CAAC,iBAAiB,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,IAC/F,WAAK,KAAK,EAAC,QAAQ,IACjB,WAAK,KAAK,EAAC,cAAc,IACvB,WAAK,KAAK,EAAE,mBAAmB,GAAG,IAAI,CAAC,UAAU,IAAG,IAAI,CAAC,IAAI,CAAO,EACpE,UAAI,KAAK,EAAE,oBAAoB,GAAG,IAAI,CAAC,eAAe,IAAG,IAAI,CAAC,SAAS,CAAM,EAC7E,WAAK,KAAK,EAAE,qBAAqB,GAAG,IAAI,CAAC,YAAY,IAAG,IAAI,CAAC,MAAM,CAAO,EACzE,IAAI,CAAC,WAAW,IAAI,IAAI,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,IACjD,uCAA+B,IAAI,CAAC,kBAAkB,EAAE,GAAG,EAAE,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,WAAW,GAAmB,IACrH,IAAI,CACJ,EACN,WAAK,KAAK,EAAC,cAAc,IACtB,IAAI,CAAC,QAAQ,KAAK,IAAI,IAAI,IAAI,CAAC,QAAQ,KAAK,SAAS,IACpD,WAAK,KAAK,EAAC,YAAY,IACrB,WAAK,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,IAAI,CAAC,YAAY,GAAI,CAC/C,IACJ,IAAI,CACJ,CACF,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveImageFeature"],"sources":["src/components/biggive-image-feature/biggive-image-feature.scss?tag=biggive-image-feature&encapsulation=shadow","src/components/biggive-image-feature/biggive-image-feature.tsx"],"sourcesContent":["@include image-alignment();\n@include text-colours();\n\n:host {\n  display: contents;\n}\n\n.container {\n  @include standard-font();\n  position: relative;\n  .sleeve {\n    @include flex-container-row();\n    .content-wrap {\n      width: calc(40% - $spacer-3);\n      position: relative;\n      z-index: 1;\n      .slug {\n        @include heading-4;\n        margin: 0;\n        padding: 0;\n      }\n      h2 {\n        @include heading-2;\n         margin: 0 0 $spacer-3 0;\n        padding: 0;\n      }\n      .teaser {\n        margin: 0 0 $spacer-5 0;\n        padding: 0;\n      }\n    }\n  \n    .graphic-wrap {\n      width: calc(60% - $spacer-3);\n    }\n  }\n}\n\n\n@media screen and (max-width: $screen-mobile-max) {\n  .container {\n    .sleeve {\n      flex-wrap: wrap;\n    .content-wrap {\n      width: 100%;\n    }\n    .graphic-wrap {\n      width: 100%;\n      margin-bottom: $spacer-3;\n      order: -1;\n    }\n  }\n  }\n}\n\n\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-image-feature',\n  styleUrl: 'biggive-image-feature.scss',\n  shadow: true,\n})\nexport class BiggiveImageFeature {\n  /**\n   * Space below component\n   */\n  @Prop() spaceBelow: number = 0;\n  /**\n   * Default text colour\n   */\n  @Prop() defaultTextColour: string = 'primary';\n\n  /**\n   * Full URL of a image.\n   */\n  @Prop() imageUrl: string = '';\n\n  /**\n   * Image alt text tag.\n   */\n  @Prop() imageAltText: string = '';\n\n  /**\n   * Slug\n   */\n  @Prop() slug: string;\n\n  /**\n   * Slug colour\n   */\n  @Prop() slugColour: string = '';\n\n  /**\n   * Video title\n   */\n  @Prop() mainTitle: string;\n\n  /**\n   * Slug colour\n   */\n  @Prop() mainTitleColour: string = '';\n\n  /**\n   * Introductory teaser text\n   */\n  @Prop() teaser: string;\n\n  /**\n   * Teaser colour\n   */\n  @Prop() teaserColour: string = '';\n\n  /**\n   * Button Url\n   */\n  @Prop() buttonUrl: string;\n\n  /**\n   * Button Label\n   */\n  @Prop() buttonLabel: string;\n\n  /**\n   * Button Colour Scheme\n   */\n  @Prop() buttonColourScheme: string = 'primary';\n\n  render() {\n    return (\n      <div class={'container text-colour-' + this.defaultTextColour + ' space-below-' + this.spaceBelow}>\n        <div class=\"sleeve\">\n          <div class=\"content-wrap\">\n            <div class={'slug text-colour-' + this.slugColour}>{this.slug}</div>\n            <h2 class={'title text-colour-' + this.mainTitleColour}>{this.mainTitle}</h2>\n            <div class={'teaser text-colour-' + this.teaserColour}>{this.teaser}</div>\n            {this.buttonLabel != null && this.buttonUrl != null ? (\n              <biggive-button colour-scheme={this.buttonColourScheme} url={this.buttonUrl} label={this.buttonLabel}></biggive-button>\n            ) : null}\n          </div>\n          <div class=\"graphic-wrap\">\n            {this.imageUrl !== null && this.imageUrl !== undefined ? (\n              <div class=\"image-wrap\">\n                <img src={this.imageUrl} alt={this.imageAltText} />\n              </div>\n            ) : null}\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/biggive-image.js

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
 const biggiveImageCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.image-wrap img{width:100%;height:auto}.space-above-0{margin-top:0}.space-above-1{margin-top:5px}.space-above-2{margin-top:10px}.space-above-3{margin-top:15px}.space-above-4{margin-top:30px}.space-above-5{margin-top:45px}.space-above-6{margin-top:60px}.space-below-0{margin-bottom:0}.space-below-1{margin-bottom:5px}.space-below-2{margin-bottom:10px}.space-below-3{margin-bottom:15px}.space-below-4{margin-bottom:30px}.space-below-5{margin-bottom:45px}.space-below-6{margin-bottom:60px}:host{display:contents}.container{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px}";
+const BiggiveImageStyle0 = biggiveImageCss;
 
 const BiggiveImage$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveImage extends HTMLElement {
     constructor() {
@@ -32,7 +33,7 @@ const BiggiveImage$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveImage exten
     render() {
         return (h("div", { class: 'container space-above-' + this.spaceAbove + ' space-below-' + this.spaceBelow, style: { width: this.getWidth(), height: this.getHeight() } }, h("div", { class: "image-wrap" }, h("img", { src: this.imageUrl, style: { width: this.getWidth(), height: this.getHeight() }, alt: this.imageAltText }))));
     }
-    static get style() { return biggiveImageCss; }
+    static get style() { return BiggiveImageStyle0; }
 }, [1, "biggive-image", {
         "spaceAbove": [2, "space-above"],
         "spaceBelow": [2, "space-below"],

package/dist/components/biggive-image.js.map

@@ -1 +1 @@
-{"file":"biggive-image.js","mappings":";;AAAA,MAAM,eAAe,GAAG,6pBAA6pB;;MCOxqBA,cAAY;;;;;0BAIM,CAAC;0BAKD,CAAC;wBAKH,EAAE;4BAKE,EAAE;qBAKT,CAAC;sBAKA,CAAC;wBAKC,IAAI;;IAEvB,QAAQ;QACd,IAAI,KAAK,GAAG,MAAM,CAAC;QACnB,IAAI,IAAI,CAAC,KAAK,GAAG,CAAC,EAAE;YAClB,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC;SACpC;QACD,OAAO,KAAK,CAAC;KACd;IAEO,SAAS;QACf,IAAI,MAAM,GAAG,MAAM,CAAC;QACpB,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE;YACnB,MAAM,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC;SACtC;QACD,OAAO,MAAM,CAAC;KACf;IAED,MAAM;QACJ,QACE,WAAK,KAAK,EAAE,wBAAwB,GAAG,IAAI,CAAC,UAAU,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,SAAS,EAAE,EAAE,IACrJ,WAAK,KAAK,EAAC,YAAY,IACrB,WAAK,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,SAAS,EAAE,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,YAAY,GAAI,CAC5G,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveImage"],"sources":["src/components/biggive-image/biggive-image.scss?tag=biggive-image&encapsulation=shadow","src/components/biggive-image/biggive-image.tsx"],"sourcesContent":["@include image-alignment();\n@include spacers();\n\n:host {\n  display: contents;\n}\n\n.container {\n  @include standard-font();\n}","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-image',\n  styleUrl: 'biggive-image.scss',\n  shadow: true,\n})\nexport class BiggiveImage {\n  /**\n   * Space above component\n   */\n  @Prop() spaceAbove: number = 0;\n\n  /**\n   * Space below component\n   */\n  @Prop() spaceBelow: number = 0;\n\n  /**\n   * Full URL of a image.\n   */\n  @Prop() imageUrl: string = '';\n\n  /**\n   * Image alt text tag.\n   */\n  @Prop() imageAltText: string = '';\n\n  /**\n   * Image width\n   */\n  @Prop() width: number = 0;\n\n  /**\n   * Image width\n   */\n  @Prop() height: number = 0;\n\n  /**\n   * Size unit\n   */\n  @Prop() sizeUnit: string = 'px';\n\n  private getWidth(): string {\n    var width = 'auto';\n    if (this.width > 0) {\n      width = this.width + this.sizeUnit;\n    }\n    return width;\n  }\n\n  private getHeight(): string {\n    var height = 'auto';\n    if (this.height > 0) {\n      height = this.height + this.sizeUnit;\n    }\n    return height;\n  }\n\n  render() {\n    return (\n      <div class={'container space-above-' + this.spaceAbove + ' space-below-' + this.spaceBelow} style={{ width: this.getWidth(), height: this.getHeight() }}>\n        <div class=\"image-wrap\">\n          <img src={this.imageUrl} style={{ width: this.getWidth(), height: this.getHeight() }} alt={this.imageAltText} />\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"biggive-image.js","mappings":";;AAAA,MAAM,eAAe,GAAG,6pBAA6pB,CAAC;AACtrB,2BAAe,eAAe;;MCMjBA,cAAY;;;;;0BAIM,CAAC;0BAKD,CAAC;wBAKH,EAAE;4BAKE,EAAE;qBAKT,CAAC;sBAKA,CAAC;wBAKC,IAAI;;IAEvB,QAAQ;QACd,IAAI,KAAK,GAAG,MAAM,CAAC;QACnB,IAAI,IAAI,CAAC,KAAK,GAAG,CAAC,EAAE;YAClB,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC;SACpC;QACD,OAAO,KAAK,CAAC;KACd;IAEO,SAAS;QACf,IAAI,MAAM,GAAG,MAAM,CAAC;QACpB,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE;YACnB,MAAM,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC;SACtC;QACD,OAAO,MAAM,CAAC;KACf;IAED,MAAM;QACJ,QACE,WAAK,KAAK,EAAE,wBAAwB,GAAG,IAAI,CAAC,UAAU,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,SAAS,EAAE,EAAE,IACrJ,WAAK,KAAK,EAAC,YAAY,IACrB,WAAK,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,SAAS,EAAE,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,YAAY,GAAI,CAC5G,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveImage"],"sources":["src/components/biggive-image/biggive-image.scss?tag=biggive-image&encapsulation=shadow","src/components/biggive-image/biggive-image.tsx"],"sourcesContent":["@include image-alignment();\n@include spacers();\n\n:host {\n  display: contents;\n}\n\n.container {\n  @include standard-font();\n}","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-image',\n  styleUrl: 'biggive-image.scss',\n  shadow: true,\n})\nexport class BiggiveImage {\n  /**\n   * Space above component\n   */\n  @Prop() spaceAbove: number = 0;\n\n  /**\n   * Space below component\n   */\n  @Prop() spaceBelow: number = 0;\n\n  /**\n   * Full URL of a image.\n   */\n  @Prop() imageUrl: string = '';\n\n  /**\n   * Image alt text tag.\n   */\n  @Prop() imageAltText: string = '';\n\n  /**\n   * Image width\n   */\n  @Prop() width: number = 0;\n\n  /**\n   * Image width\n   */\n  @Prop() height: number = 0;\n\n  /**\n   * Size unit\n   */\n  @Prop() sizeUnit: string = 'px';\n\n  private getWidth(): string {\n    var width = 'auto';\n    if (this.width > 0) {\n      width = this.width + this.sizeUnit;\n    }\n    return width;\n  }\n\n  private getHeight(): string {\n    var height = 'auto';\n    if (this.height > 0) {\n      height = this.height + this.sizeUnit;\n    }\n    return height;\n  }\n\n  render() {\n    return (\n      <div class={'container space-above-' + this.spaceAbove + ' space-below-' + this.spaceBelow} style={{ width: this.getWidth(), height: this.getHeight() }}>\n        <div class=\"image-wrap\">\n          <img src={this.imageUrl} style={{ width: this.getWidth(), height: this.getHeight() }} alt={this.imageAltText} />\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/biggive-main-menu.js

@@ -4,6 +4,7 @@ import { d as defineCustomElement$3 } from './biggive-misc-icon2.js';
 import { d as defineCustomElement$2 } from './biggive-social-icon2.js';
 
 const biggiveMainMenuCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}:host{display:block !important}:host(.fixed){position:fixed;top:0;left:0;right:0;z-index:10}*{margin:0;padding:0;box-sizing:border-box;font-family:\"Euclid Triangle\", sans-serif}a[class^=icon-],a[class*=icon-]{padding-left:20px;background-repeat:no-repeat;background-size:auto 10px;background-position:left center}a.icon-green{background-image:url(/assets/images/triangles-combined.svg)}a.icon-children{background-image:url(/assets/images/triangles-combined-children.svg)}a.icon-christmas{background-image:url(/assets/images/triangles-combined-christmas-challenge.svg)}a.icon-green-match{background-image:url(/assets/images/triangles-combined-green-match.svg)}a.icon-women-girls{background-image:url(/assets/images/triangles-combined-women-girls.svg)}a.icon-mental-health{background-image:url(/assets/images/triangles-combined-mental-health.svg)}a.icon-anchor-match{background-image:url(/assets/images/triangles-combined-anchor.svg)}a.icon-emergency{background-image:url(/assets/images/triangles-combined-emergency.svg)}a.icon-arts-impact{background-image:url(/assets/images/triangles-combined-arts-black.svg)}.mobile-only{display:none !important}.row-top{padding:10px 30px;background-color:#2C089B;display:flex;max-height:60px}.row-top .social-icon-wrap{display:flex;min-height:40px;margin-right:10px}.row-top .social-icon-wrap .social-icon-item{margin-right:10px}.row-top .nav-secondary{margin-left:auto;display:grid}.row-top .nav-secondary ul{list-style:none;display:inline-flex;margin:auto}.row-top .nav-secondary li{border-right:1px solid #FFFFFF;height:fit-content;padding:0 10px}.row-top .nav-secondary li:last-child{border-right:0;padding-right:0}.row-top .nav-secondary li a{color:#FFFFFF;text-decoration:none}nav{top:0;left:0;width:100%;height:100%;height:70px;background:white;z-index:99;box-shadow:0 1px 2px rgba(0, 0, 0, 0.2)}nav .navbar{height:100%;width:100%;display:flex;align-items:center;justify-content:space-between;margin:auto;padding:0 50px}nav .navbar .nav-links{line-height:70px;height:100%}nav .navbar .nav-links .sidebar-logo{display:none}nav .navbar .nav-links .links{display:flex}nav .navbar .nav-links .links li{position:relative;display:flex;align-items:center;justify-content:space-between;list-style:none;padding:0 30px}nav .navbar .nav-links .links li a{height:100%;text-decoration:none;white-space:nowrap;color:black;font-size:17px;font-weight:500}nav .navbar .nav-links .links li .sub-menu{position:absolute;top:70px;left:0;line-height:40px;box-shadow:0 1px 2px rgba(0, 0, 0, 0.2);border-radius:0 0 4px 4px;display:none;z-index:2;background-color:inherit}nav .navbar .nav-links .links li .sub-menu li{padding:0 22px;border-bottom:1px solid rgba(255, 255, 255, 0.1)}nav .navbar .nav-links .links li .sub-menu a{color:black;font-size:15px;font-weight:500}nav .navbar .nav-links .links li .sub-menu .more .sub-sub-menu{position:absolute;top:0;left:100%;border-radius:0 4px 4px 4px;z-index:1;display:none}nav .navbar .nav-links .links li .arrow{margin-left:5px;text-align:center;display:inline-block;color:black;transition:all 0.3s ease}nav .navbar .nav-links .links li .arrow.transform-90{transform:rotate(90deg)}nav .navbar .logo{min-width:180px;width:180px}nav .navbar .logo a{font-size:30px;color:black;text-decoration:none;font-weight:600;display:grid}nav .navbar .bx-menu{display:none}@media (hover: hover){.row-top .nav-secondary li a:hover{border-bottom-color:#FFFFFF;color:#FFFFFF}nav .navbar .nav-links .links li .sub-menu .more:hover .sub-sub-menu{display:block}nav .navbar .nav-links .links li:hover .sub-menu-arrow{transform:rotate(90deg)}nav .navbar .nav-links .links li:hover .sub-menu{display:block;background-color:white}nav .navbar .nav-links .links li:hover .sub-menu .sub-sub-menu{background-color:white}}@media (max-width: 1200px){nav .navbar .logo{min-width:120px;width:120px}nav .navbar .nav-links .links li{padding:0 7px}nav .navbar .nav-links .links li a{font-size:15px}nav .navbar .nav-links .links li .sub-menu a{font-size:13px}}@media (max-width: 968px){.mobile-only{display:block !important}.row-top{display:none}nav{height:60px}nav .navbar{padding:0px 25px}nav .navbar .bx-menu{display:block;font-size:25px;color:black}nav .navbar .nav-links{position:fixed;top:0;left:-100%;display:block;max-width:450px;width:100%;background:white;line-height:40px;padding:20px;box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);transition:all 0.5s ease;z-index:1000;overflow-y:scroll}nav .navbar .nav-links .sidebar-logo{display:flex;align-items:center;justify-content:space-between}nav .navbar .nav-links .sidebar-logo a{display:contents}nav .navbar .nav-links .sidebar-logo a #mobileLogo{width:130px}nav .navbar .nav-links .sidebar-logo #x{margin-right:15px}nav .navbar .nav-links .sidebar-logo i{font-size:25px;color:black}nav .navbar .nav-links .mobile-social-icon-wrap{margin-top:20px}nav .navbar .nav-links .links{display:block;margin-top:20px}nav .navbar .nav-links .links li{display:block;border-bottom:1px solid #e6e6e6}nav .navbar .nav-links .links li a{width:100%;display:block}nav .navbar .nav-links .links li .display-sub-menu{display:block !important}nav .navbar .nav-links .links li .sub-menu{position:relative;top:0;box-shadow:none;display:none}nav .navbar .nav-links .links li .sub-menu li{border-bottom:none}nav .navbar .nav-links .links li .sub-menu .sub-sub-menu{display:none;position:relative;left:0}nav .navbar .nav-links .links li .sub-menu .sub-sub-menu li{display:flex;align-items:center;justify-content:space-between}nav .navbar .nav-links .links li .sub-menu .more span{display:flex;align-items:center}nav .navbar .nav-links .links li .sub-menu .more .sub-sub-menu.display-sub-menu{position:initial}}@media (max-width: 968px) and (max-width: 370px){nav .navbar .nav-links{max-width:100%}}";
+const BiggiveMainMenuStyle0 = biggiveMainMenuCss;
 
 const BiggiveMainMenu$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveMainMenu extends HTMLElement {
     constructor() {
@@ -97,7 +98,7 @@ const BiggiveMainMenu$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveMainMenu
         return (h(Host, null, h("div", { class: "row row-top" }, h("div", { class: "social-icon-wrap" }, h("biggive-social-icon", { service: "Facebook", url: "https://www.facebook.com/BigGive.org", "background-colour": "tertiary", "icon-colour": "black" }), h("biggive-social-icon", { service: "Twitter", url: "https://twitter.com/BigGive", "background-colour": "tertiary", "icon-colour": "black" }), h("biggive-social-icon", { service: "LinkedIn", url: "https://uk.linkedin.com/company/big-give", "background-colour": "tertiary", "icon-colour": "black" }), h("biggive-social-icon", { service: "YouTube", url: "https://www.youtube.com/channel/UC9_wH1aaTuZurJ-F9R8GDcA", "background-colour": "tertiary", "icon-colour": "black" }), h("biggive-social-icon", { service: "Instagram", url: "https://www.instagram.com/biggiveorg", "background-colour": "tertiary", "icon-colour": "black" })), h("div", { class: "nav-secondary" }, this.getSecondaryNavLinks())), h("nav", { role: "navigation", "aria-label": "Main Menu" }, h("div", { class: "navbar" }, h("div", { class: "logo" }, h("a", { href: this.donateUrlPrefix + homePageLink, "aria-label": "Home" }, h("svg", { version: "1.1", x: "0px", y: "0px", viewBox: "0 0 140.9 30" }, h("path", { d: "M51.9,6.1c-1.7,0-3.1-1.4-3.1-3s1.4-3,3.1-3C53.6,0,55,1.4,55,3S53.6,6.1,51.9,6.1z M49.3,23.8h5V7.7h-5V23.8z M68.5,7.7v1 c-0.8-0.7-2.3-1.4-4.1-1.4c-4.5,0-8.2,3.2-8.2,7.9c0,4.7,3.7,7.9,8.2,7.9c1.8,0,3.4-0.5,4.1-1.4v0.9c0,2.1-1.9,3.1-4.4,3.1 c-2.2,0-4-0.5-5.8-1.4V29c2.1,0.7,4.4,1,6,1c5,0,9.2-2,9.2-7.3v-15L68.5,7.7L68.5,7.7z M68.5,17.2c-0.7,1-1.9,1.4-3.2,1.4 c-2.1,0-3.8-1.2-3.8-3.4c0-2.2,1.7-3.4,3.8-3.4c1.3,0,2.5,0.6,3.2,1.5V17.2z M88.1,24.2c4,0,6.4-0.7,8.5-2V10h-11v4.7h5.8v4.1 c-0.8,0.2-1.8,0.4-3.2,0.4c-4.9,0-7.3-3.2-7.3-6.8c0-3.7,2.8-6.8,8-6.8c2.2,0,4.3,0.6,5.8,1.4V1.7c-1.5-0.6-3.4-1.1-6.1-1.1 c-7.6,0-13,5.3-13,11.8C75.5,19.1,80.4,24.2,88.1,24.2z M101.4,6.1c-1.7,0-3.1-1.4-3.1-3s1.4-3,3.1-3c1.8,0,3.2,1.4,3.2,3 S103.1,6.1,101.4,6.1z M98.8,23.8h5V7.7h-5V23.8z M115.1,15l-4.3-7.2H105l10.1,16.4l10.1-16.4h-5.8L115.1,15z M129.3,16.9h11.6 c0.1-7-4.2-9.5-8.4-9.5c-4.5,0-8.5,2.6-8.6,8.4c0,5.6,4.1,8.4,9.1,8.4c2.2,0,4.4-0.3,6.4-1.3v-4.4c-2.5,1.4-4.1,1.4-5.6,1.4 C131.7,19.8,129.5,19.2,129.3,16.9z M132.5,11.1c1.5,0,2.8,0.7,3,2.7h-6.2C129.6,11.9,131,11.1,132.5,11.1z M43.5,11.4 c1.2-1,1.8-2.4,1.8-4c0-3.1-3-6.3-7.3-6.3h-8v22.8h10.4c4.1,0,7.2-3,7.2-6.8C47.5,14.8,46.5,12.3,43.5,11.4z M35.2,5.7h2.4 C39,5.7,40,6.8,40,8c0,1.2-1,2.2-2.5,2.2h-2.4V5.7z M39.9,19.2h-4.7v-4.6h4.7c1.4,0,2.5,1,2.5,2.3C42.4,18.1,41.3,19.2,39.9,19.2z" }), h("path", { d: "M13.5,1l13.5,23H0L13.5,1z" })))), h("biggive-misc-icon", { class: "bx bx-menu", "background-colour": "white", "icon-colour": "black", icon: "MenuOpen", onClick: this.openMobileMenu }), h("div", { class: "nav-links" }, h("div", { class: "sidebar-logo" }, h("a", { href: this.donateUrlPrefix + homePageLink, "aria-label": "Home" }, h("svg", { version: "1.1", x: "0px", y: "0px", viewBox: "0 0 140.9 30", id: "mobileLogo" }, h("path", { d: "M51.9,6.1c-1.7,0-3.1-1.4-3.1-3s1.4-3,3.1-3C53.6,0,55,1.4,55,3S53.6,6.1,51.9,6.1z M49.3,23.8h5V7.7h-5V23.8z M68.5,7.7v1 c-0.8-0.7-2.3-1.4-4.1-1.4c-4.5,0-8.2,3.2-8.2,7.9c0,4.7,3.7,7.9,8.2,7.9c1.8,0,3.4-0.5,4.1-1.4v0.9c0,2.1-1.9,3.1-4.4,3.1 c-2.2,0-4-0.5-5.8-1.4V29c2.1,0.7,4.4,1,6,1c5,0,9.2-2,9.2-7.3v-15L68.5,7.7L68.5,7.7z M68.5,17.2c-0.7,1-1.9,1.4-3.2,1.4 c-2.1,0-3.8-1.2-3.8-3.4c0-2.2,1.7-3.4,3.8-3.4c1.3,0,2.5,0.6,3.2,1.5V17.2z M88.1,24.2c4,0,6.4-0.7,8.5-2V10h-11v4.7h5.8v4.1 c-0.8,0.2-1.8,0.4-3.2,0.4c-4.9,0-7.3-3.2-7.3-6.8c0-3.7,2.8-6.8,8-6.8c2.2,0,4.3,0.6,5.8,1.4V1.7c-1.5-0.6-3.4-1.1-6.1-1.1 c-7.6,0-13,5.3-13,11.8C75.5,19.1,80.4,24.2,88.1,24.2z M101.4,6.1c-1.7,0-3.1-1.4-3.1-3s1.4-3,3.1-3c1.8,0,3.2,1.4,3.2,3 S103.1,6.1,101.4,6.1z M98.8,23.8h5V7.7h-5V23.8z M115.1,15l-4.3-7.2H105l10.1,16.4l10.1-16.4h-5.8L115.1,15z M129.3,16.9h11.6 c0.1-7-4.2-9.5-8.4-9.5c-4.5,0-8.5,2.6-8.6,8.4c0,5.6,4.1,8.4,9.1,8.4c2.2,0,4.4-0.3,6.4-1.3v-4.4c-2.5,1.4-4.1,1.4-5.6,1.4 C131.7,19.8,129.5,19.2,129.3,16.9z M132.5,11.1c1.5,0,2.8,0.7,3,2.7h-6.2C129.6,11.9,131,11.1,132.5,11.1z M43.5,11.4 c1.2-1,1.8-2.4,1.8-4c0-3.1-3-6.3-7.3-6.3h-8v22.8h10.4c4.1,0,7.2-3,7.2-6.8C47.5,14.8,46.5,12.3,43.5,11.4z M35.2,5.7h2.4 C39,5.7,40,6.8,40,8c0,1.2-1,2.2-2.5,2.2h-2.4V5.7z M39.9,19.2h-4.7v-4.6h4.7c1.4,0,2.5,1,2.5,2.3C42.4,18.1,41.3,19.2,39.9,19.2z" }), h("path", { d: "M13.5,1l13.5,23H0L13.5,1z" }))), h("biggive-misc-icon", { class: "bx bx-x", "background-colour": "transparent", "icon-colour": "black", icon: "MenuClose", onClick: this.closeMobileMenu })), h("div", { id: "nav-primary" }, h("ul", { class: "links", slot: "nav-primary" }, h("li", null, h("a", { href: makeURL('Donate', this.donateUrlPrefix, 'explore') }, "Explore Campaigns")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'charities') }, "For Charities")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'funders') }, "For Funders")), h("li", null, h("a", { onClick: this.noNav }, "Match Funding", h("biggive-misc-icon", { class: "bx bxs-chevron-down sub-menu-arrow arrow", "background-colour": "white", "icon-colour": "black", icon: "CaretRight" })), h("ul", { class: "sub-menu" }, h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'match-funding-explained') }, "Match Funding Explained")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'impact') }, "Match Funding Impact")), h("li", { class: "more" }, h("a", { onClick: this.noNav }, "Match Funding Opportunities", h("biggive-misc-icon", { class: "bx bxs-chevron-down sub-sub-menu-arrow arrow", "background-colour": "white", "icon-colour": "black", icon: "CaretRight" })), h("ul", { class: "sub-sub-menu" }, h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'christmas-challenge'), class: "icon-christmas" }, "Christmas Challenge")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'champions-for-children'), class: "icon-children" }, "Champions for Children")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'green-match-fund'), class: "icon-green-match" }, "Green Match Fund")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'women-girls-match-fund'), class: "icon-women-girls" }, "Women & Girls Match Fund")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'kind2mind/'), class: "icon-mental-health" }, "Kind\u00B2Mind")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'artsforimpact/'), class: "icon-arts-impact" }, "Arts for Impact")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'anchor-match-fund/'), class: "icon-anchor-match" }, "Anchor Match Fund")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'emergency-campaigns/'), class: "icon-emergency" }, "Emergency Match Fund")))), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'run-your-own-campaign/)') }, "Run your match funding campaign")))), h("li", null, h("a", { onClick: this.noNav }, "About Us", h("biggive-misc-icon", { class: "bx bxs-chevron-down sub-menu-arrow arrow", "background-colour": "white", "icon-colour": "black", icon: "CaretRight" })), h("ul", { class: "sub-menu" }, h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'our-people') }, "Our People")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'our-story') }, "Our Story")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'donation-funds') }, "Donate by Bank Transfer")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'our-fees') }, "Our Fees")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'faqs') }, "FAQs")))), h("li", null, h("a", { onClick: this.noNav }, "Resources", h("biggive-misc-icon", { class: "bx bxs-chevron-down sub-menu-arrow arrow", "background-colour": "white", "icon-colour": "black", icon: "CaretRight" })), h("ul", { class: "sub-menu" }, h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'case-studies') }, "Case Studies")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'blog') }, "Blog")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'reports-insights') }, "Reports & Insights")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'press') }, "Press"))))), h("div", { class: "mobile-only" }, this.getSecondaryNavLinks())), h("div", { class: "mobile-social-icon-wrap mobile-only" }, h("biggive-social-icon", { service: "Facebook", url: "https://www.facebook.com/BigGive.org", "background-colour": "tertiary", "icon-colour": "black" }), h("biggive-social-icon", { service: "Twitter", url: "https://twitter.com/BigGive", "background-colour": "tertiary", "icon-colour": "black" }), h("biggive-social-icon", { service: "LinkedIn", url: "https://uk.linkedin.com/company/big-give", "background-colour": "tertiary", "icon-colour": "black" }), h("biggive-social-icon", { service: "YouTube", url: "https://www.youtube.com/channel/UC9_wH1aaTuZurJ-F9R8GDcA", "background-colour": "tertiary", "icon-colour": "black" }), h("biggive-social-icon", { service: "Instagram", url: "https://www.instagram.com/biggiveorg", "background-colour": "tertiary", "icon-colour": "black" })))))));
     }
     get host() { return this; }
-    static get style() { return biggiveMainMenuCss; }
+    static get style() { return BiggiveMainMenuStyle0; }
 }, [1, "biggive-main-menu", {
         "blogUrlPrefix": [1, "blog-url-prefix"],
         "donateUrlPrefix": [1, "donate-url-prefix"],