@biggive/components 202501021532.0.0 → 202501071646.0.0

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

@@ -1 +1 @@
-{"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,4DACE,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,0DAAG,IAAI,EAAE,IAAI,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,YAAY,GAAG,QAAQ,GAAG,OAAO,EAAE,EAAE,EAAE,IAAI,CAAC,QAAQ,IAClF,4DAAK,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,IACjD,4DACE,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;IAL/B;;;;;QAcU,eAAU,GAAkB,CAAC,CAAC;QAE9B,qBAAgB,GAAgB,OAAO,CAAC;QAExC,sBAAiB,GAAkB,CAAC,CAAC;QAIrC,eAAU,GAAgB,OAAO,CAAC;QAIlC,eAAU,GAAW,OAAO,CAAC;QAI7B,iBAAY,GAAY,KAAK,CAAC;QAE9B,SAAI,GAA0D,QAAQ,CAAC;QAEvE,UAAK,GAAY,KAAK,CAAC;QAEvB,gBAAW,GAAgB,OAAO,CAAC;QAEnC,WAAM,GAAY,KAAK,CAAC;QAExB,WAAM,GAAY,KAAK,CAAC;QAExB,aAAQ,GAAY,KAAK,CAAC;QAE1B,YAAO,GAAY,KAAK,CAAC;QAEzB,aAAQ,GAAuB,SAAS,CAAC;QAEzC,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;KAyCH;IAvCC,MAAM;QACJ,QACE,4DACE,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,0DAAG,IAAI,EAAE,IAAI,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,YAAY,GAAG,QAAQ,GAAG,OAAO,EAAE,EAAE,EAAE,IAAI,CAAC,QAAQ,IAClF,4DAAK,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,IACjD,4DACE,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

@@ -11,15 +11,10 @@ const BiggiveImageCard$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveImageCa
         this.__attachShadow();
         this.spaceBelow = 0;
         this.backgroundColour = 'primary';
-        this.mainImageUrl = undefined;
-        this.mainImageAltText = undefined;
         this.textAlign = 'center';
-        this.teaser = undefined;
         this.teaserColour = 'black';
         this.buttonAlign = 'center';
         this.buttonStyle = 'standard';
-        this.buttonLabel = undefined;
-        this.buttonUrl = undefined;
         this.buttonColourScheme = 'clear-primary';
         this.clipBottomLeftCorner = true;
         this.clipTopRightCorner = true;

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

@@ -1 +1 @@
-{"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,4DACE,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,0DAAG,IAAI,EAAE,IAAI,CAAC,SAAS,IACrB,4DAAK,KAAK,EAAE,qBAAqB,GAAG,IAAI,CAAC,YAAY,GAAG,cAAc,GAAG,IAAI,CAAC,SAAS,IACrF,4DAAK,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,4DAAK,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;IAL7B;;;;QAMU,eAAU,GAAkB,CAAC,CAAC;QAE9B,qBAAgB,GAAgB,SAAS,CAAC;QAM1C,cAAS,GAAgC,QAAQ,CAAC;QAIlD,iBAAY,GAAgB,OAAO,CAAC;QAEpC,gBAAW,GAAW,QAAQ,CAAC;QAE/B,gBAAW,GAAW,UAAU,CAAC;QAMjC,uBAAkB,GAAW,eAAe,CAAC;QAE7C,yBAAoB,GAAY,IAAI,CAAC;QAErC,uBAAkB,GAAY,IAAI,CAAC;QAEnC,iBAAY,GAAY,KAAK,CAAC;KAwCvC;IAtCC,MAAM;QACJ,QACE,4DACE,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,0DAAG,IAAI,EAAE,IAAI,CAAC,SAAS,IACrB,4DAAK,KAAK,EAAE,qBAAqB,GAAG,IAAI,CAAC,YAAY,GAAG,cAAc,GAAG,IAAI,CAAC,SAAS,IACrF,4DAAK,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,4DAAK,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

@@ -9,18 +9,37 @@ const BiggiveImageFeature$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveImag
         super();
         this.__registerHost();
         this.__attachShadow();
+        /**
+         * Space below component
+         */
         this.spaceBelow = 0;
+        /**
+         * Default text colour
+         */
         this.defaultTextColour = 'primary';
+        /**
+         * Full URL of a image.
+         */
         this.imageUrl = '';
+        /**
+         * Image alt text tag.
+         */
         this.imageAltText = '';
-        this.slug = undefined;
+        /**
+         * Slug colour
+         */
         this.slugColour = '';
-        this.mainTitle = undefined;
+        /**
+         * Slug colour
+         */
         this.mainTitleColour = '';
-        this.teaser = undefined;
+        /**
+         * Teaser colour
+         */
         this.teaserColour = '';
-        this.buttonUrl = undefined;
-        this.buttonLabel = undefined;
+        /**
+         * Button Colour Scheme
+         */
         this.buttonColourScheme = 'primary';
     }
     render() {

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

@@ -1 +1 @@
-{"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,4DAAK,KAAK,EAAE,wBAAwB,GAAG,IAAI,CAAC,iBAAiB,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,IAC/F,4DAAK,KAAK,EAAC,QAAQ,IACjB,4DAAK,KAAK,EAAC,cAAc,IACvB,4DAAK,KAAK,EAAE,mBAAmB,GAAG,IAAI,CAAC,UAAU,IAAG,IAAI,CAAC,IAAI,CAAO,EACpE,2DAAI,KAAK,EAAE,oBAAoB,GAAG,IAAI,CAAC,eAAe,IAAG,IAAI,CAAC,SAAS,CAAM,EAC7E,4DAAK,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,4DAAK,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;IALhC;;;;;;;QASU,eAAU,GAAW,CAAC,CAAC;;;;QAIvB,sBAAiB,GAAW,SAAS,CAAC;;;;QAKtC,aAAQ,GAAW,EAAE,CAAC;;;;QAKtB,iBAAY,GAAW,EAAE,CAAC;;;;QAU1B,eAAU,GAAW,EAAE,CAAC;;;;QAUxB,oBAAe,GAAW,EAAE,CAAC;;;;QAU7B,iBAAY,GAAW,EAAE,CAAC;;;;QAe1B,uBAAkB,GAAW,SAAS,CAAC;KAyBhD;IAvBC,MAAM;QACJ,QACE,4DAAK,KAAK,EAAE,wBAAwB,GAAG,IAAI,CAAC,iBAAiB,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,IAC/F,4DAAK,KAAK,EAAC,QAAQ,IACjB,4DAAK,KAAK,EAAC,cAAc,IACvB,4DAAK,KAAK,EAAE,mBAAmB,GAAG,IAAI,CAAC,UAAU,IAAG,IAAI,CAAC,IAAI,CAAO,EACpE,2DAAI,KAAK,EAAE,oBAAoB,GAAG,IAAI,CAAC,eAAe,IAAG,IAAI,CAAC,SAAS,CAAM,EAC7E,4DAAK,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,4DAAK,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

@@ -8,12 +8,33 @@ const BiggiveImage$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveImage exten
         super();
         this.__registerHost();
         this.__attachShadow();
+        /**
+         * Space above component
+         */
         this.spaceAbove = 0;
+        /**
+         * Space below component
+         */
         this.spaceBelow = 0;
+        /**
+         * Full URL of a image.
+         */
         this.imageUrl = '';
+        /**
+         * Image alt text tag.
+         */
         this.imageAltText = '';
+        /**
+         * Image width
+         */
         this.width = 0;
+        /**
+         * Image width
+         */
         this.height = 0;
+        /**
+         * Size unit
+         */
         this.sizeUnit = 'px';
     }
     getWidth() {

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

@@ -1 +1 @@
-{"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,4DAAK,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,4DAAK,KAAK,EAAC,YAAY,IACrB,4DAAK,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;IALzB;;;;;;;QASU,eAAU,GAAW,CAAC,CAAC;;;;QAKvB,eAAU,GAAW,CAAC,CAAC;;;;QAKvB,aAAQ,GAAW,EAAE,CAAC;;;;QAKtB,iBAAY,GAAW,EAAE,CAAC;;;;QAK1B,UAAK,GAAW,CAAC,CAAC;;;;QAKlB,WAAM,GAAW,CAAC,CAAC;;;;QAKnB,aAAQ,GAAW,IAAI,CAAC;KA2BjC;IAzBS,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,4DAAK,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,4DAAK,KAAK,EAAC,YAAY,IACrB,4DAAK,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

@@ -13,6 +13,19 @@ const BiggiveMainMenu$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveMainMenu
         this.__attachShadow();
         this.logoutClicked = createEvent(this, "logoutClicked", 7);
         this.lastScrollHeight = 0;
+        // URL prefixes vary by environment, and components library is not best placed to know what they are, so we
+        // take them as props. But somehow on first render the prop passed in doesn't seem to be used, so the defaults
+        // below are the values currently used in our prod site. They should be replaced by other values in other
+        // environments.
+        this.blogUrlPrefix = 'https://biggive.org';
+        this.donateUrlPrefix = 'https://donate.biggive.org';
+        this.experienceUrlPrefix = 'https://community.biggive.org';
+        this.myAccountFlagEnabled = false;
+        /**
+         * Whether the current user is logged in (i.e. is assumed to have a valid JWT). They get links to some
+         * extra content if they are.
+         */
+        this.isLoggedIn = false;
         this.openMobileMenu = () => {
             const mobileMenu = this.host.shadowRoot.querySelector('.nav-links');
             mobileMenu.style.left = '0';
@@ -24,11 +37,6 @@ const BiggiveMainMenu$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveMainMenu
             const mobileMenu = this.host.shadowRoot.querySelector('.nav-links');
             mobileMenu.style.left = '-100%';
         };
-        this.blogUrlPrefix = 'https://biggive.org';
-        this.donateUrlPrefix = 'https://donate.biggive.org';
-        this.experienceUrlPrefix = 'https://community.biggive.org';
-        this.myAccountFlagEnabled = false;
-        this.isLoggedIn = false;
     }
     async closeMobileMenuFromOutside() {
         const mobileMenu = this.host.shadowRoot.querySelector('.nav-links');

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

@@ -1 +1 @@
-{"file":"biggive-main-menu.js","mappings":"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","names":["BiggiveMainMenu"],"sources":["src/components/biggive-main-menu/biggive-main-menu.scss?tag=biggive-main-menu&encapsulation=shadow","src/components/biggive-main-menu/biggive-main-menu.tsx"],"sourcesContent":[":host {\n  display: block !important;\n}\n\n:host(.fixed) {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  z-index: 10;\n}\n\n* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n  font-family: 'Euclid Triangle', sans-serif;\n}\n\na {\n  // target all classes prefixed with 'icon-' so we don't repeat code\n  &[class^='icon-'],\n  &[class*='icon-'] {\n    padding-left: 20px;\n    background-repeat: no-repeat;\n    background-size: auto 10px;\n    background-position: left center;\n  }\n\n  &.icon-green {\n    background-image: url(/assets/images/triangles-combined.svg);\n  }\n\n  &.icon-children {\n    background-image: url(/assets/images/triangles-combined-children.svg);\n  }\n\n  &.icon-christmas {\n    background-image: url(/assets/images/triangles-combined-christmas-challenge.svg);\n  }\n\n  &.icon-green-match {\n    background-image: url(/assets/images/triangles-combined-green-match.svg);\n  }\n\n  &.icon-women-girls {\n    background-image: url(/assets/images/triangles-combined-women-girls.svg);\n  }\n\n  &.icon-mental-health {\n    background-image: url(/assets/images/triangles-combined-mental-health.svg);\n  }\n\n  &.icon-anchor-match {\n    background-image: url(/assets/images/triangles-combined-anchor.svg);\n  }\n\n  &.icon-emergency {\n    background-image: url(/assets/images/triangles-combined-emergency.svg);\n  }\n\n  &.icon-arts-impact {\n    background-image: url(/assets/images/triangles-combined-arts-black.svg);\n  }\n}\n\n.mobile-only {\n  display: none !important;\n}\n\n.row-top {\n  padding: $spacer-2 $spacer-4;\n  background-color: $colour-primary-blue;\n  display: flex;\n  max-height: $icon-size-large + 2 * $spacer-2;\n\n  .social-icon-wrap {\n    display: flex;\n    min-height: $icon-size-large; // Avoid broken content padding offset, due to menu height changing after component load.\n    margin-right: $spacer-2;\n\n    .social-icon-item {\n      margin-right: $spacer-2;\n    }\n  }\n\n  .nav-secondary {\n    margin-left: auto;\n    display: grid;\n\n    ul {\n      list-style: none;\n      display: inline-flex;\n      margin: auto;\n    }\n\n    li {\n      border-right: 1px solid $colour-white;\n      height: fit-content;\n      padding: 0 10px;\n\n      &:last-child {\n        border-right: 0;\n        padding-right: 0;\n      }\n\n      a {\n        color: $colour-white;\n        text-decoration: none;\n      }\n    }\n  }\n}\n\nnav {\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: $nav-height-desktop;\n  background: white;\n  z-index: 99;\n  box-shadow: 0 1px 2px rgb(0 0 0 / 20%);\n\n  .navbar {\n    height: 100%;\n    width: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin: auto;\n    padding: 0 50px;\n\n    .nav-links {\n      line-height: $nav-height-desktop;\n      height: 100%;\n\n      .sidebar-logo {\n        display: none;\n      }\n\n      .links {\n        display: flex;\n\n        li {\n          position: relative;\n          display: flex;\n          align-items: center;\n          justify-content: space-between;\n          list-style: none;\n          padding: 0 30px;\n\n          a {\n            height: 100%;\n            text-decoration: none;\n            white-space: nowrap;\n            color: black;\n            font-size: 17px;\n            font-weight: 500;\n          }\n\n          .sub-menu {\n            position: absolute;\n            top: $nav-height-desktop;\n            left: 0;\n            line-height: 40px;\n            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);\n            border-radius: 0 0 4px 4px;\n            display: none;\n            z-index: 2;\n            background-color: inherit;\n\n            li {\n              padding: 0 22px;\n              border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n            }\n\n            a {\n              color: black;\n              font-size: 15px;\n              font-weight: 500;\n            }\n\n            .more {\n              .sub-sub-menu {\n                position: absolute;\n                top: 0;\n                left: 100%;\n                border-radius: 0 4px 4px 4px;\n                z-index: 1;\n                display: none;\n              }\n            }\n          }\n\n          .arrow {\n            margin-left: 5px;\n            text-align: center;\n            display: inline-block;\n            color: black;\n            transition: all 0.3s ease;\n\n            &.transform-90 {\n              transform: rotate(90deg);\n            }\n          }\n        }\n      }\n    }\n\n    .logo {\n      min-width: 180px;\n      width: 180px;\n\n      a {\n        font-size: 30px;\n        color: black;\n        text-decoration: none;\n        font-weight: 600;\n        display: grid;\n      }\n    }\n\n    .bx-menu {\n      display: none;\n    }\n  }\n}\n\n@media (hover: hover) {\n  /* when hover is supported */\n  .row-top {\n    .nav-secondary {\n      li {\n        a {\n          &:hover {\n            border-bottom-color: $colour-white;\n            color: $colour-white;\n          }\n        }\n      }\n    }\n  }\n\n  nav {\n    .navbar {\n      .nav-links {\n        .links {\n          li {\n            .sub-menu {\n              .more {\n                &:hover {\n                  .sub-sub-menu {\n                    display: block;\n                  }\n                }\n              }\n            }\n\n            &:hover {\n              .sub-menu-arrow {\n                transform: rotate(90deg);\n              }\n\n              .sub-menu {\n                display: block;\n                background-color: white;\n\n                .sub-sub-menu {\n                  background-color: white;\n                }\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n}\n\n@media (max-width: 1200px) {\n  nav {\n    .navbar {\n      .logo {\n        min-width: 120px;\n        width: 120px;\n      }\n\n      .nav-links {\n        .links {\n          li {\n            padding: 0 7px;\n\n            a {\n              font-size: 15px;\n            }\n\n            .sub-menu {\n              a {\n                font-size: 13px;\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n}\n\n@media (max-width: $screen-large) {\n  .mobile-only {\n    display: block !important;\n  }\n\n  .row-top {\n    display: none;\n  }\n\n  nav {\n    height: 60px;\n    .navbar {\n      padding: 0px 25px;\n      .bx-menu {\n        display: block;\n        font-size: 25px;\n        color: black;\n      }\n\n      .nav-links {\n        position: fixed;\n        top: 0;\n        left: -100%;\n        display: block;\n        max-width: 450px;\n        width: 100%;\n        background: white;\n        line-height: 40px;\n        padding: 20px;\n        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);\n        transition: all 0.5s ease;\n        z-index: 1000;\n        overflow-y: scroll;\n\n        .sidebar-logo {\n          display: flex;\n          align-items: center;\n          justify-content: space-between;\n\n          a {\n            display: contents;\n\n            #mobileLogo {\n              width: 130px;\n            }\n\n          }\n\n          #x {\n            margin-right: 15px;\n          }\n\n          i {\n            font-size: 25px;\n            color: black;\n          }\n        }\n\n        .mobile-social-icon-wrap {\n          margin-top: 20px;\n        }\n\n        .links {\n          display: block;\n          margin-top: 20px;\n\n          li {\n            display: block;\n            border-bottom: 1px solid #e6e6e6;\n\n            a {\n              width: 100%;\n              display: block;\n            }\n\n            .sub-menu {\n              position: relative;\n              top: 0;\n              box-shadow: none;\n              display: none;\n\n              li {\n                border-bottom: none;\n              }\n\n              .sub-sub-menu {\n                display: none;\n                position: relative;\n                left: 0;\n\n                li {\n                  display: flex;\n                  align-items: center;\n                  justify-content: space-between;\n                }\n              }\n\n              .more {\n                span {\n                  display: flex;\n                  align-items: center;\n                }\n\n                .sub-sub-menu {\n                  &.display-sub-menu {\n                    position: initial;\n                  }\n                }\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n\n  @media (max-width: 370px) {\n    nav .navbar .nav-links {\n      max-width: 100%;\n    }\n  }\n}\n\n.display-sub-menu, .display-sub-menu li {\n  display: block !important;\n}\n\n#nav-primary .display-sub-menu, #nav-primary .display-sub-menu li {\n  background-color: white;\n}\n\n\n.sub-menu-main {\n  position: absolute;\n  top: $upper-nav-height-desktop;\n  left: 0;\n  line-height: 40px;\n  border-radius: 0 0 4px 4px;\n  display: none;\n  background-color: $colour-primary-blue;\n  z-index: 2;\n\n  li {\n    border-right: none !important;\n    padding: 0 22px;\n    display: none;\n  }\n\n  @media (max-width: $screen-large) {\n    position: static !important;\n    background: none;\n  }\n}\n\n.arrow {\n  margin-left: 5px;\n  text-align: center;\n  display: inline-block;\n  color: black;\n  transition: all 0.3s ease;\n\n  &.transform-90 {\n    transform: rotate(90deg);\n  }\n}\n\n.nav-secondary li {\n  position: relative !important;\n  &:hover {\n    .sub-menu-arrow {\n      transform: rotate(90deg);\n    }\n\n    .sub-menu-main {\n      display: block;\n      li {\n        display: block;\n      }\n    }\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport { makeURL } from '../../util/helper-methods';\n\n@Component({\n  tag: 'biggive-main-menu',\n  styleUrl: 'biggive-main-menu.scss',\n  shadow: true,\n})\nexport class BiggiveMainMenu {\n  private lastScrollHeight = 0;\n\n  @Element() host: HTMLBiggiveMainMenuElement;\n\n  // URL prefixes vary by environment, and components library is not best placed to know what they are, so we\n  // take them as props. But somehow on first render the prop passed in doesn't seem to be used, so the defaults\n  // below are the values currently used in our prod site. They should be replaced by other values in other\n  // environments.\n  @Prop() blogUrlPrefix: string = 'https://biggive.org';\n\n  @Prop() donateUrlPrefix: string = 'https://donate.biggive.org';\n\n  @Prop() experienceUrlPrefix: string = 'https://community.biggive.org';\n\n  @Prop() myAccountFlagEnabled = false;\n\n  /**\n   * Whether the current user is logged in (i.e. is assumed to have a valid JWT). They get links to some\n   * extra content if they are.\n   */\n  @Prop() isLoggedIn = false;\n\n  @Event({\n    eventName: 'logoutClicked',\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  logoutClicked: EventEmitter<void>;\n\n  @Method()\n  async closeMobileMenuFromOutside() {\n    const mobileMenu = this.host.shadowRoot!.querySelector<HTMLElement>('.nav-links');\n    mobileMenu!.style.left = '-100%';\n  }\n\n  private openMobileMenu = () => {\n    const mobileMenu = this.host.shadowRoot!.querySelector<HTMLElement>('.nav-links');\n    mobileMenu!.style.left = '0';\n  };\n\n  private logOut = () => {\n    this.logoutClicked.emit();\n  };\n\n  private closeMobileMenu = () => {\n    const mobileMenu = this.host.shadowRoot!.querySelector<HTMLElement>('.nav-links');\n    mobileMenu!.style.left = '-100%';\n  };\n\n  private noNav(event: Event) {\n    event.preventDefault();\n  }\n\n  private setHeaderSize() {\n    if (this.host.scrollHeight === this.lastScrollHeight) {\n      // Some browsers fire 'resize' overzealously on scroll; we don't want to cause extra paints if nothing\n      // relevant changed.\n      return;\n    }\n\n    this.lastScrollHeight = this.host.scrollHeight;\n\n    // Some resize edge cases lead Firefox, and maybe others, to go haywire and get a host offset\n    // height of millions of pixels, presumably due to a layout logic loop. So for as long as we use\n    // this body padding workaround, we need a safe maximum value, currently 130px, beyond which\n    // we will never further displace the main content.\n    // (Possibly scrollHeight could have the same issue, not tested.)\n    // We have also seen intermittent scrolling scenarios where `scrollHeight` is spuriously less than 60px,\n    // maybe related to browsers / OSes with \"overscroll\" features. So we also now set a fixed minimum of 60px.\n    const scrollHeight = isNaN(this.host.scrollHeight) ? 60 : Math.max(60, this.host.scrollHeight);\n\n    document.body.style.paddingTop = Math.min(130, scrollHeight).toString() + 'px';\n  }\n\n  componentDidLoad() {\n    this.host.classList.add('fixed');\n    window.addEventListener('resize', () => {\n      this.setHeaderSize();\n    });\n    this.setHeaderSize();\n\n    const subMenuElements = this.host.shadowRoot!.querySelectorAll<HTMLElement>('.sub-menu');\n    if (subMenuElements.length === 0) {\n      throw new Error('Missing subMenuElements');\n    }\n\n    /**\n     * Closes all the sub-menus except the one exception.\n     */\n    const closeAllSubMenus = ({ except }: { except: HTMLAnchorElement }) => {\n      subMenuElements.forEach(subMenuElement => {\n        const link = subMenuElement.parentElement?.querySelector('a');\n\n        if (link === except) {\n          return;\n        }\n\n        link?.classList.remove('transform-90');\n        subMenuElement.classList.remove('display-sub-menu');\n      });\n    };\n\n    subMenuElements.forEach(subMenuElement => {\n      // the subMenuLink is a sibling element to the actual sub-menu\n      const subMenuLink = subMenuElement.parentElement?.querySelector('a');\n\n      subMenuLink!.onclick = () => {\n        const subMenuArrow = subMenuLink!.querySelector('.sub-menu-arrow');\n        closeAllSubMenus({ except: subMenuLink! });\n        subMenuArrow!.classList.toggle('transform-90');\n        subMenuElement.classList.toggle('display-sub-menu');\n      };\n    });\n\n    const subSubMenuElements = this.host.shadowRoot!.querySelectorAll<HTMLElement>('.sub-sub-menu');\n\n    if (subSubMenuElements.length === 0) {\n      throw new Error('Missing subSubMenuElements');\n    }\n\n    subSubMenuElements.forEach(subSubMenuElement => {\n      // the subSubMenuLink is a sibling element to the actual sub-sub-menu\n      const subSubMenuLink = subSubMenuElement!.parentElement!.querySelector('a');\n\n      subSubMenuLink!.onclick = () => {\n        const subMenuArrow = subSubMenuLink!.querySelector('.sub-sub-menu-arrow');\n        subMenuArrow!.classList.toggle('transform-90');\n        subSubMenuElement.classList.toggle('display-sub-menu');\n      };\n    });\n  }\n\n  private getSecondaryNavLinks(layout: 'desktop' | 'mobile') {\n    const chevronIconColour = layout === 'desktop' ? 'white' : 'black';\n    const chevronBackgroundColour = layout === 'desktop' ? 'blue' : 'white';\n    return (\n      <ul>\n        {this.myAccountFlagEnabled && !this.isLoggedIn && (\n          <li>\n            <a href={makeURL('Donate', this.donateUrlPrefix, 'login')}>Donor Login</a>\n          </li>\n        )}\n        {this.isLoggedIn && (\n          <li>\n            <a onClick={this.noNav}>\n              My Account\n              <biggive-misc-icon\n                class=\"bx bxs-chevron-down sub-menu-arrow arrow\"\n                background-colour={chevronBackgroundColour}\n                icon-colour={chevronIconColour}\n                icon=\"CaretRight\"\n              ></biggive-misc-icon>\n            </a>\n            <ul class=\"sub-menu sub-menu-main\" id=\"my-account-sub-menu\">\n              <li>\n                <a href={makeURL('Donate', this.donateUrlPrefix, 'my-account')}>Your details</a>\n              </li>\n              <li>\n                <a href=\"javascript:void(0)\" onClick={this.logOut}>\n                  Log out\n                </a>\n              </li>\n            </ul>\n          </li>\n        )}\n        <li>\n          <a href={makeURL('Experience', this.experienceUrlPrefix, 'charities/s/login')}>Charity Login</a>\n        </li>\n        <li>\n          <a href={makeURL('Blog', this.blogUrlPrefix, 'support')}>Support</a>\n        </li>\n      </ul>\n    );\n  }\n\n  render() {\n    /** ten minutes in advance to account for a *very* slow browser following the link and/or clock skew.\n     * There's not really any harm in doing this early unless its soo early that people start sharing the noredirect link more than we'd like.\n     */\n    const CCOpenDate = new Date('2024-12-02T23:50:00+00:00');\n\n    /**\n     * Ten minutes late. Again doing this late doesn't hurt.\n     */\n    const CCCloseDate = new Date('2024-12-10T12:10:00+00:00');\n\n    const now = new Date();\n\n    const ccIsOpenNowIsh = now > CCOpenDate && now < CCCloseDate;\n\n    const homePageLink = ccIsOpenNowIsh ? '/?noredirect' : '/';\n\n    // calling same function twice because using same JSX node twice is not allowed\n    // see https://stenciljs.com/docs/templating-jsx#avoid-shared-jsx-nodes\n    const secondaryNavLinksForDesktop = this.getSecondaryNavLinks('desktop');\n    const secondaryNavLinksForMobile = this.getSecondaryNavLinks('mobile');\n\n    return (\n      <Host>\n        <div class=\"row row-top\">\n          <div class=\"social-icon-wrap\">\n            <biggive-social-icon service=\"Facebook\" url=\"https://www.facebook.com/BigGive.org\" background-colour=\"tertiary\" icon-colour=\"black\"></biggive-social-icon>\n            <biggive-social-icon service=\"Twitter\" url=\"https://x.com/BigGive\" background-colour=\"tertiary\" icon-colour=\"black\"></biggive-social-icon>\n            <biggive-social-icon service=\"LinkedIn\" url=\"https://uk.linkedin.com/company/big-give\" background-colour=\"tertiary\" icon-colour=\"black\"></biggive-social-icon>\n            <biggive-social-icon\n              service=\"YouTube\"\n              url=\"https://www.youtube.com/channel/UC9_wH1aaTuZurJ-F9R8GDcA\"\n              background-colour=\"tertiary\"\n              icon-colour=\"black\"\n            ></biggive-social-icon>\n            <biggive-social-icon service=\"Instagram\" url=\"https://www.instagram.com/biggiveorg\" background-colour=\"tertiary\" icon-colour=\"black\"></biggive-social-icon>\n          </div>\n          <div class=\"nav-secondary\">{secondaryNavLinksForDesktop}</div>\n        </div>\n        <nav role=\"navigation\" aria-label=\"Main Menu\">\n          <div class=\"navbar\">\n            <div class=\"logo\">\n              <a href={this.donateUrlPrefix + homePageLink} aria-label=\"Home\">\n                <svg version=\"1.1\" x=\"0px\" y=\"0px\" viewBox=\"0 0 140.9 30\">\n                  <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\" />\n                  <path d=\"M13.5,1l13.5,23H0L13.5,1z\" />\n                </svg>\n              </a>\n            </div>\n            <biggive-misc-icon class=\"bx bx-menu\" background-colour=\"white\" icon-colour=\"black\" icon=\"MenuOpen\" onClick={this.openMobileMenu}></biggive-misc-icon>\n            <div class=\"nav-links\">\n              <div class=\"sidebar-logo\">\n                <a href={this.donateUrlPrefix + homePageLink} aria-label=\"Home\">\n                  <svg version=\"1.1\" x=\"0px\" y=\"0px\" viewBox=\"0 0 140.9 30\" id=\"mobileLogo\">\n                    <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\" />\n                    <path d=\"M13.5,1l13.5,23H0L13.5,1z\" />\n                  </svg>\n                </a>\n                <biggive-misc-icon class=\"bx bx-x\" background-colour=\"transparent\" icon-colour=\"black\" icon=\"MenuClose\" onClick={this.closeMobileMenu}></biggive-misc-icon>\n              </div>\n              <div id=\"nav-primary\">\n                <ul class=\"links\" slot=\"nav-primary\">\n                  <li>\n                    <a href={makeURL('Donate', this.donateUrlPrefix, 'explore')}>Explore Campaigns</a>\n                  </li>\n                  <li>\n                    <a href={makeURL('Blog', this.blogUrlPrefix, 'charities')}>For Charities</a>\n                  </li>\n                  <li>\n                    <a href={makeURL('Blog', this.blogUrlPrefix, 'funders')}>For Funders</a>\n                  </li>\n                  <li>\n                    <a onClick={this.noNav}>\n                      Match Funding\n                      <biggive-misc-icon class=\"bx bxs-chevron-down sub-menu-arrow arrow\" background-colour=\"white\" icon-colour=\"black\" icon=\"CaretRight\"></biggive-misc-icon>\n                    </a>\n                    <ul class=\"sub-menu\">\n                      <li>\n                        <a href={makeURL('Blog', this.blogUrlPrefix, 'match-funding-explained')}>Match Funding Explained</a>\n                      </li>\n                      <li>\n                        <a href={makeURL('Blog', this.blogUrlPrefix, 'impact')}>Match Funding Impact</a>\n                      </li>\n                      <li class=\"more\">\n                        <a onClick={this.noNav}>\n                          Match Funding Opportunities\n                          {/* IMPORTANT: notice this one has a class sub-sub-menu, not sub-menu  */}\n                          <biggive-misc-icon\n                            class=\"bx bxs-chevron-down sub-sub-menu-arrow arrow\"\n                            background-colour=\"white\"\n                            icon-colour=\"black\"\n                            icon=\"CaretRight\"\n                          ></biggive-misc-icon>\n                        </a>\n                        <ul class=\"sub-sub-menu\">\n                          <li>\n                            <a href={makeURL('Blog', this.blogUrlPrefix, 'christmas-challenge')} class=\"icon-christmas\">\n                              Christmas Challenge\n                            </a>\n                          </li>\n                          <li>\n                            <a href={makeURL('Blog', this.blogUrlPrefix, 'champions-for-children')} class=\"icon-children\">\n                              Champions for Children\n                            </a>\n                          </li>\n                          <li>\n                            <a href={makeURL('Blog', this.blogUrlPrefix, 'green-match-fund')} class=\"icon-green-match\">\n                              Green Match Fund\n                            </a>\n                          </li>\n                          <li>\n                            <a href={makeURL('Blog', this.blogUrlPrefix, 'women-girls-match-fund')} class=\"icon-women-girls\">\n                              Women &amp; Girls Match Fund\n                            </a>\n                          </li>\n                          <li>\n                            <a href={makeURL('Blog', this.blogUrlPrefix, 'kind2mind/')} class=\"icon-mental-health\">\n                              Kind²Mind\n                            </a>\n                          </li>\n                          <li>\n                            <a href={makeURL('Blog', this.blogUrlPrefix, 'artsforimpact/')} class=\"icon-arts-impact\">\n                              Arts for Impact\n                            </a>\n                          </li>\n                          <li>\n                            <a href={makeURL('Blog', this.blogUrlPrefix, 'anchor-match-fund/')} class=\"icon-anchor-match\">\n                              Anchor Match Fund\n                            </a>\n                          </li>\n                          <li>\n                            <a href={makeURL('Blog', this.blogUrlPrefix, 'emergency-campaigns/')} class=\"icon-emergency\">\n                              Emergency Match Fund\n                            </a>\n                          </li>\n                        </ul>\n                      </li>\n                      <li>\n                        <a href={makeURL('Blog', this.blogUrlPrefix, 'run-your-own-campaign/)')}>Run your match funding campaign</a>\n                      </li>\n                    </ul>\n                  </li>\n                  <li>\n                    <a onClick={this.noNav}>\n                      About Us\n                      <biggive-misc-icon class=\"bx bxs-chevron-down sub-menu-arrow arrow\" background-colour=\"white\" icon-colour=\"black\" icon=\"CaretRight\"></biggive-misc-icon>\n                    </a>\n                    <ul class=\"sub-menu\">\n                      <li>\n                        <a href={makeURL('Blog', this.blogUrlPrefix, 'our-people')}>Our People</a>\n                      </li>\n                      <li>\n                        <a href={makeURL('Blog', this.blogUrlPrefix, 'our-story')}>Our Story</a>\n                      </li>\n                      <li>\n                        <a href={makeURL('Blog', this.blogUrlPrefix, 'donation-funds')}>Donate by Bank Transfer</a>\n                      </li>\n                      <li>\n                        <a href={makeURL('Blog', this.blogUrlPrefix, 'our-fees')}>Our Fees</a>\n                      </li>\n                      <li>\n                        <a href={makeURL('Blog', this.blogUrlPrefix, 'faqs')}>FAQs</a>\n                      </li>\n                    </ul>\n                  </li>\n                  <li>\n                    <a onClick={this.noNav}>\n                      Resources\n                      <biggive-misc-icon class=\"bx bxs-chevron-down sub-menu-arrow arrow\" background-colour=\"white\" icon-colour=\"black\" icon=\"CaretRight\"></biggive-misc-icon>\n                    </a>\n                    <ul class=\"sub-menu\">\n                      <li>\n                        <a href={makeURL('Blog', this.blogUrlPrefix, 'case-studies')}>Case Studies</a>\n                      </li>\n                      <li>\n                        <a href={makeURL('Blog', this.blogUrlPrefix, 'blog')}>Blog</a>\n                      </li>\n                      <li>\n                        <a href={makeURL('Blog', this.blogUrlPrefix, 'reports-insights')}>Reports &amp; Insights</a>\n                      </li>\n                      <li>\n                        <a href={makeURL('Blog', this.blogUrlPrefix, 'press')}>Press</a>\n                      </li>\n                    </ul>\n                  </li>\n                </ul>\n                <div class=\"mobile-only\">{secondaryNavLinksForMobile}</div>\n              </div>\n              <div class=\"mobile-social-icon-wrap mobile-only\">\n                <biggive-social-icon service=\"Facebook\" url=\"https://www.facebook.com/BigGive.org\" background-colour=\"tertiary\" icon-colour=\"black\"></biggive-social-icon>\n                <biggive-social-icon service=\"Twitter\" url=\"https://x.com/BigGive\" background-colour=\"tertiary\" icon-colour=\"black\"></biggive-social-icon>\n                <biggive-social-icon service=\"LinkedIn\" url=\"https://uk.linkedin.com/company/big-give\" background-colour=\"tertiary\" icon-colour=\"black\"></biggive-social-icon>\n                <biggive-social-icon\n                  service=\"YouTube\"\n                  url=\"https://www.youtube.com/channel/UC9_wH1aaTuZurJ-F9R8GDcA\"\n                  background-colour=\"tertiary\"\n                  icon-colour=\"black\"\n                ></biggive-social-icon>\n                <biggive-social-icon service=\"Instagram\" url=\"https://www.instagram.com/biggiveorg\" background-colour=\"tertiary\" icon-colour=\"black\"></biggive-social-icon>\n              </div>\n            </div>\n          </div>\n        </nav>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"biggive-main-menu.js","mappings":"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","names":["BiggiveMainMenu"],"sources":["src/components/biggive-main-menu/biggive-main-menu.scss?tag=biggive-main-menu&encapsulation=shadow","src/components/biggive-main-menu/biggive-main-menu.tsx"],"sourcesContent":[":host {\n  display: block !important;\n}\n\n:host(.fixed) {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  z-index: 10;\n}\n\n* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n  font-family: 'Euclid Triangle', sans-serif;\n}\n\na {\n  // target all classes prefixed with 'icon-' so we don't repeat code\n  &[class^='icon-'],\n  &[class*='icon-'] {\n    padding-left: 20px;\n    background-repeat: no-repeat;\n    background-size: auto 10px;\n    background-position: left center;\n  }\n\n  &.icon-green {\n    background-image: url(/assets/images/triangles-combined.svg);\n  }\n\n  &.icon-children {\n    background-image: url(/assets/images/triangles-combined-children.svg);\n  }\n\n  &.icon-christmas {\n    background-image: url(/assets/images/triangles-combined-christmas-challenge.svg);\n  }\n\n  &.icon-green-match {\n    background-image: url(/assets/images/triangles-combined-green-match.svg);\n  }\n\n  &.icon-women-girls {\n    background-image: url(/assets/images/triangles-combined-women-girls.svg);\n  }\n\n  &.icon-mental-health {\n    background-image: url(/assets/images/triangles-combined-mental-health.svg);\n  }\n\n  &.icon-anchor-match {\n    background-image: url(/assets/images/triangles-combined-anchor.svg);\n  }\n\n  &.icon-emergency {\n    background-image: url(/assets/images/triangles-combined-emergency.svg);\n  }\n\n  &.icon-arts-impact {\n    background-image: url(/assets/images/triangles-combined-arts-black.svg);\n  }\n}\n\n.mobile-only {\n  display: none !important;\n}\n\n.row-top {\n  padding: $spacer-2 $spacer-4;\n  background-color: $colour-primary-blue;\n  display: flex;\n  max-height: $icon-size-large + 2 * $spacer-2;\n\n  .social-icon-wrap {\n    display: flex;\n    min-height: $icon-size-large; // Avoid broken content padding offset, due to menu height changing after component load.\n    margin-right: $spacer-2;\n\n    .social-icon-item {\n      margin-right: $spacer-2;\n    }\n  }\n\n  .nav-secondary {\n    margin-left: auto;\n    display: grid;\n\n    ul {\n      list-style: none;\n      display: inline-flex;\n      margin: auto;\n    }\n\n    li {\n      border-right: 1px solid $colour-white;\n      height: fit-content;\n      padding: 0 10px;\n\n      &:last-child {\n        border-right: 0;\n        padding-right: 0;\n      }\n\n      a {\n        color: $colour-white;\n        text-decoration: none;\n      }\n    }\n  }\n}\n\nnav {\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: $nav-height-desktop;\n  background: white;\n  z-index: 99;\n  box-shadow: 0 1px 2px rgb(0 0 0 / 20%);\n\n  .navbar {\n    height: 100%;\n    width: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin: auto;\n    padding: 0 50px;\n\n    .nav-links {\n      line-height: $nav-height-desktop;\n      height: 100%;\n\n      .sidebar-logo {\n        display: none;\n      }\n\n      .links {\n        display: flex;\n\n        li {\n          position: relative;\n          display: flex;\n          align-items: center;\n          justify-content: space-between;\n          list-style: none;\n          padding: 0 30px;\n\n          a {\n            height: 100%;\n            text-decoration: none;\n            white-space: nowrap;\n            color: black;\n            font-size: 17px;\n            font-weight: 500;\n          }\n\n          .sub-menu {\n            position: absolute;\n            top: $nav-height-desktop;\n            left: 0;\n            line-height: 40px;\n            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);\n            border-radius: 0 0 4px 4px;\n            display: none;\n            z-index: 2;\n            background-color: inherit;\n\n            li {\n              padding: 0 22px;\n              border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n            }\n\n            a {\n              color: black;\n              font-size: 15px;\n              font-weight: 500;\n            }\n\n            .more {\n              .sub-sub-menu {\n                position: absolute;\n                top: 0;\n                left: 100%;\n                border-radius: 0 4px 4px 4px;\n                z-index: 1;\n                display: none;\n              }\n            }\n          }\n\n          .arrow {\n            margin-left: 5px;\n            text-align: center;\n            display: inline-block;\n            color: black;\n            transition: all 0.3s ease;\n\n            &.transform-90 {\n              transform: rotate(90deg);\n            }\n          }\n        }\n      }\n    }\n\n    .logo {\n      min-width: 180px;\n      width: 180px;\n\n      a {\n        font-size: 30px;\n        color: black;\n        text-decoration: none;\n        font-weight: 600;\n        display: grid;\n      }\n    }\n\n    .bx-menu {\n      display: none;\n    }\n  }\n}\n\n@media (hover: hover) {\n  /* when hover is supported */\n  .row-top {\n    .nav-secondary {\n      li {\n        a {\n          &:hover {\n            border-bottom-color: $colour-white;\n            color: $colour-white;\n          }\n        }\n      }\n    }\n  }\n\n  nav {\n    .navbar {\n      .nav-links {\n        .links {\n          li {\n            .sub-menu {\n              .more {\n                &:hover {\n                  .sub-sub-menu {\n                    display: block;\n                  }\n                }\n              }\n            }\n\n            &:hover {\n              .sub-menu-arrow {\n                transform: rotate(90deg);\n              }\n\n              .sub-menu {\n                display: block;\n                background-color: white;\n\n                .sub-sub-menu {\n                  background-color: white;\n                }\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n}\n\n@media (max-width: 1200px) {\n  nav {\n    .navbar {\n      .logo {\n        min-width: 120px;\n        width: 120px;\n      }\n\n      .nav-links {\n        .links {\n          li {\n            padding: 0 7px;\n\n            a {\n              font-size: 15px;\n            }\n\n            .sub-menu {\n              a {\n                font-size: 13px;\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n}\n\n@media (max-width: $screen-large) {\n  .mobile-only {\n    display: block !important;\n  }\n\n  .row-top {\n    display: none;\n  }\n\n  nav {\n    height: 60px;\n    .navbar {\n      padding: 0px 25px;\n      .bx-menu {\n        display: block;\n        font-size: 25px;\n        color: black;\n      }\n\n      .nav-links {\n        position: fixed;\n        top: 0;\n        left: -100%;\n        display: block;\n        max-width: 450px;\n        width: 100%;\n        background: white;\n        line-height: 40px;\n        padding: 20px;\n        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);\n        transition: all 0.5s ease;\n        z-index: 1000;\n        overflow-y: scroll;\n\n        .sidebar-logo {\n          display: flex;\n          align-items: center;\n          justify-content: space-between;\n\n          a {\n            display: contents;\n\n            #mobileLogo {\n              width: 130px;\n            }\n\n          }\n\n          #x {\n            margin-right: 15px;\n          }\n\n          i {\n            font-size: 25px;\n            color: black;\n          }\n        }\n\n        .mobile-social-icon-wrap {\n          margin-top: 20px;\n        }\n\n        .links {\n          display: block;\n          margin-top: 20px;\n\n          li {\n            display: block;\n            border-bottom: 1px solid #e6e6e6;\n\n            a {\n              width: 100%;\n              display: block;\n            }\n\n            .sub-menu {\n              position: relative;\n              top: 0;\n              box-shadow: none;\n              display: none;\n\n              li {\n                border-bottom: none;\n              }\n\n              .sub-sub-menu {\n                display: none;\n                position: relative;\n                left: 0;\n\n                li {\n                  display: flex;\n                  align-items: center;\n                  justify-content: space-between;\n                }\n              }\n\n              .more {\n                span {\n                  display: flex;\n                  align-items: center;\n                }\n\n                .sub-sub-menu {\n                  &.display-sub-menu {\n                    position: initial;\n                  }\n                }\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n\n  @media (max-width: 370px) {\n    nav .navbar .nav-links {\n      max-width: 100%;\n    }\n  }\n}\n\n.display-sub-menu, .display-sub-menu li {\n  display: block !important;\n}\n\n#nav-primary .display-sub-menu, #nav-primary .display-sub-menu li {\n  background-color: white;\n}\n\n\n.sub-menu-main {\n  position: absolute;\n  top: $upper-nav-height-desktop;\n  left: 0;\n  line-height: 40px;\n  border-radius: 0 0 4px 4px;\n  display: none;\n  background-color: $colour-primary-blue;\n  z-index: 2;\n\n  li {\n    border-right: none !important;\n    padding: 0 22px;\n    display: none;\n  }\n\n  @media (max-width: $screen-large) {\n    position: static !important;\n    background: none;\n  }\n}\n\n.arrow {\n  margin-left: 5px;\n  text-align: center;\n  display: inline-block;\n  color: black;\n  transition: all 0.3s ease;\n\n  &.transform-90 {\n    transform: rotate(90deg);\n  }\n}\n\n.nav-secondary li {\n  position: relative !important;\n  &:hover {\n    .sub-menu-arrow {\n      transform: rotate(90deg);\n    }\n\n    .sub-menu-main {\n      display: block;\n      li {\n        display: block;\n      }\n    }\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport { makeURL } from '../../util/helper-methods';\n\n@Component({\n  tag: 'biggive-main-menu',\n  styleUrl: 'biggive-main-menu.scss',\n  shadow: true,\n})\nexport class BiggiveMainMenu {\n  private lastScrollHeight = 0;\n\n  @Element() host: HTMLBiggiveMainMenuElement;\n\n  // URL prefixes vary by environment, and components library is not best placed to know what they are, so we\n  // take them as props. But somehow on first render the prop passed in doesn't seem to be used, so the defaults\n  // below are the values currently used in our prod site. They should be replaced by other values in other\n  // environments.\n  @Prop() blogUrlPrefix: string = 'https://biggive.org';\n\n  @Prop() donateUrlPrefix: string = 'https://donate.biggive.org';\n\n  @Prop() experienceUrlPrefix: string = 'https://community.biggive.org';\n\n  @Prop() myAccountFlagEnabled = false;\n\n  /**\n   * Whether the current user is logged in (i.e. is assumed to have a valid JWT). They get links to some\n   * extra content if they are.\n   */\n  @Prop() isLoggedIn = false;\n\n  @Event({\n    eventName: 'logoutClicked',\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  logoutClicked: EventEmitter<void>;\n\n  @Method()\n  async closeMobileMenuFromOutside() {\n    const mobileMenu = this.host.shadowRoot!.querySelector<HTMLElement>('.nav-links');\n    mobileMenu!.style.left = '-100%';\n  }\n\n  private openMobileMenu = () => {\n    const mobileMenu = this.host.shadowRoot!.querySelector<HTMLElement>('.nav-links');\n    mobileMenu!.style.left = '0';\n  };\n\n  private logOut = () => {\n    this.logoutClicked.emit();\n  };\n\n  private closeMobileMenu = () => {\n    const mobileMenu = this.host.shadowRoot!.querySelector<HTMLElement>('.nav-links');\n    mobileMenu!.style.left = '-100%';\n  };\n\n  private noNav(event: Event) {\n    event.preventDefault();\n  }\n\n  private setHeaderSize() {\n    if (this.host.scrollHeight === this.lastScrollHeight) {\n      // Some browsers fire 'resize' overzealously on scroll; we don't want to cause extra paints if nothing\n      // relevant changed.\n      return;\n    }\n\n    this.lastScrollHeight = this.host.scrollHeight;\n\n    // Some resize edge cases lead Firefox, and maybe others, to go haywire and get a host offset\n    // height of millions of pixels, presumably due to a layout logic loop. So for as long as we use\n    // this body padding workaround, we need a safe maximum value, currently 130px, beyond which\n    // we will never further displace the main content.\n    // (Possibly scrollHeight could have the same issue, not tested.)\n    // We have also seen intermittent scrolling scenarios where `scrollHeight` is spuriously less than 60px,\n    // maybe related to browsers / OSes with \"overscroll\" features. So we also now set a fixed minimum of 60px.\n    const scrollHeight = isNaN(this.host.scrollHeight) ? 60 : Math.max(60, this.host.scrollHeight);\n\n    document.body.style.paddingTop = Math.min(130, scrollHeight).toString() + 'px';\n  }\n\n  componentDidLoad() {\n    this.host.classList.add('fixed');\n    window.addEventListener('resize', () => {\n      this.setHeaderSize();\n    });\n    this.setHeaderSize();\n\n    const subMenuElements = this.host.shadowRoot!.querySelectorAll<HTMLElement>('.sub-menu');\n    if (subMenuElements.length === 0) {\n      throw new Error('Missing subMenuElements');\n    }\n\n    /**\n     * Closes all the sub-menus except the one exception.\n     */\n    const closeAllSubMenus = ({ except }: { except: HTMLAnchorElement }) => {\n      subMenuElements.forEach(subMenuElement => {\n        const link = subMenuElement.parentElement?.querySelector('a');\n\n        if (link === except) {\n          return;\n        }\n\n        link?.classList.remove('transform-90');\n        subMenuElement.classList.remove('display-sub-menu');\n      });\n    };\n\n    subMenuElements.forEach(subMenuElement => {\n      // the subMenuLink is a sibling element to the actual sub-menu\n      const subMenuLink = subMenuElement.parentElement?.querySelector('a');\n\n      subMenuLink!.onclick = () => {\n        const subMenuArrow = subMenuLink!.querySelector('.sub-menu-arrow');\n        closeAllSubMenus({ except: subMenuLink! });\n        subMenuArrow!.classList.toggle('transform-90');\n        subMenuElement.classList.toggle('display-sub-menu');\n      };\n    });\n\n    const subSubMenuElements = this.host.shadowRoot!.querySelectorAll<HTMLElement>('.sub-sub-menu');\n\n    if (subSubMenuElements.length === 0) {\n      throw new Error('Missing subSubMenuElements');\n    }\n\n    subSubMenuElements.forEach(subSubMenuElement => {\n      // the subSubMenuLink is a sibling element to the actual sub-sub-menu\n      const subSubMenuLink = subSubMenuElement!.parentElement!.querySelector('a');\n\n      subSubMenuLink!.onclick = () => {\n        const subMenuArrow = subSubMenuLink!.querySelector('.sub-sub-menu-arrow');\n        subMenuArrow!.classList.toggle('transform-90');\n        subSubMenuElement.classList.toggle('display-sub-menu');\n      };\n    });\n  }\n\n  private getSecondaryNavLinks(layout: 'desktop' | 'mobile') {\n    const chevronIconColour = layout === 'desktop' ? 'white' : 'black';\n    const chevronBackgroundColour = layout === 'desktop' ? 'blue' : 'white';\n    return (\n      <ul>\n        {this.myAccountFlagEnabled && !this.isLoggedIn && (\n          <li>\n            <a href={makeURL('Donate', this.donateUrlPrefix, 'login')}>Donor Login</a>\n          </li>\n        )}\n        {this.isLoggedIn && (\n          <li>\n            <a onClick={this.noNav}>\n              My Account\n              <biggive-misc-icon\n                class=\"bx bxs-chevron-down sub-menu-arrow arrow\"\n                background-colour={chevronBackgroundColour}\n                icon-colour={chevronIconColour}\n                icon=\"CaretRight\"\n              ></biggive-misc-icon>\n            </a>\n            <ul class=\"sub-menu sub-menu-main\" id=\"my-account-sub-menu\">\n              <li>\n                <a href={makeURL('Donate', this.donateUrlPrefix, 'my-account')}>Your details</a>\n              </li>\n              <li>\n                <a href=\"javascript:void(0)\" onClick={this.logOut}>\n                  Log out\n                </a>\n              </li>\n            </ul>\n          </li>\n        )}\n        <li>\n          <a href={makeURL('Experience', this.experienceUrlPrefix, 'charities/s/login')}>Charity Login</a>\n        </li>\n        <li>\n          <a href={makeURL('Blog', this.blogUrlPrefix, 'support')}>Support</a>\n        </li>\n      </ul>\n    );\n  }\n\n  render() {\n    /** ten minutes in advance to account for a *very* slow browser following the link and/or clock skew.\n     * There's not really any harm in doing this early unless its soo early that people start sharing the noredirect link more than we'd like.\n     */\n    const CCOpenDate = new Date('2024-12-02T23:50:00+00:00');\n\n    /**\n     * Ten minutes late. Again doing this late doesn't hurt.\n     */\n    const CCCloseDate = new Date('2024-12-10T12:10:00+00:00');\n\n    const now = new Date();\n\n    const ccIsOpenNowIsh = now > CCOpenDate && now < CCCloseDate;\n\n    const homePageLink = ccIsOpenNowIsh ? '/?noredirect' : '/';\n\n    // calling same function twice because using same JSX node twice is not allowed\n    // see https://stenciljs.com/docs/templating-jsx#avoid-shared-jsx-nodes\n    const secondaryNavLinksForDesktop = this.getSecondaryNavLinks('desktop');\n    const secondaryNavLinksForMobile = this.getSecondaryNavLinks('mobile');\n\n    return (\n      <Host>\n        <div class=\"row row-top\">\n          <div class=\"social-icon-wrap\">\n            <biggive-social-icon service=\"Facebook\" url=\"https://www.facebook.com/BigGive.org\" background-colour=\"tertiary\" icon-colour=\"black\"></biggive-social-icon>\n            <biggive-social-icon service=\"Twitter\" url=\"https://x.com/BigGive\" background-colour=\"tertiary\" icon-colour=\"black\"></biggive-social-icon>\n            <biggive-social-icon service=\"LinkedIn\" url=\"https://uk.linkedin.com/company/big-give\" background-colour=\"tertiary\" icon-colour=\"black\"></biggive-social-icon>\n            <biggive-social-icon\n              service=\"YouTube\"\n              url=\"https://www.youtube.com/channel/UC9_wH1aaTuZurJ-F9R8GDcA\"\n              background-colour=\"tertiary\"\n              icon-colour=\"black\"\n            ></biggive-social-icon>\n            <biggive-social-icon service=\"Instagram\" url=\"https://www.instagram.com/biggiveorg\" background-colour=\"tertiary\" icon-colour=\"black\"></biggive-social-icon>\n          </div>\n          <div class=\"nav-secondary\">{secondaryNavLinksForDesktop}</div>\n        </div>\n        <nav role=\"navigation\" aria-label=\"Main Menu\">\n          <div class=\"navbar\">\n            <div class=\"logo\">\n              <a href={this.donateUrlPrefix + homePageLink} aria-label=\"Home\">\n                <svg version=\"1.1\" x=\"0px\" y=\"0px\" viewBox=\"0 0 140.9 30\">\n                  <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\" />\n                  <path d=\"M13.5,1l13.5,23H0L13.5,1z\" />\n                </svg>\n              </a>\n            </div>\n            <biggive-misc-icon class=\"bx bx-menu\" background-colour=\"white\" icon-colour=\"black\" icon=\"MenuOpen\" onClick={this.openMobileMenu}></biggive-misc-icon>\n            <div class=\"nav-links\">\n              <div class=\"sidebar-logo\">\n                <a href={this.donateUrlPrefix + homePageLink} aria-label=\"Home\">\n                  <svg version=\"1.1\" x=\"0px\" y=\"0px\" viewBox=\"0 0 140.9 30\" id=\"mobileLogo\">\n                    <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\" />\n                    <path d=\"M13.5,1l13.5,23H0L13.5,1z\" />\n                  </svg>\n                </a>\n                <biggive-misc-icon class=\"bx bx-x\" background-colour=\"transparent\" icon-colour=\"black\" icon=\"MenuClose\" onClick={this.closeMobileMenu}></biggive-misc-icon>\n              </div>\n              <div id=\"nav-primary\">\n                <ul class=\"links\" slot=\"nav-primary\">\n                  <li>\n                    <a href={makeURL('Donate', this.donateUrlPrefix, 'explore')}>Explore Campaigns</a>\n                  </li>\n                  <li>\n                    <a href={makeURL('Blog', this.blogUrlPrefix, 'charities')}>For Charities</a>\n                  </li>\n                  <li>\n                    <a href={makeURL('Blog', this.blogUrlPrefix, 'funders')}>For Funders</a>\n                  </li>\n                  <li>\n                    <a onClick={this.noNav}>\n                      Match Funding\n                      <biggive-misc-icon class=\"bx bxs-chevron-down sub-menu-arrow arrow\" background-colour=\"white\" icon-colour=\"black\" icon=\"CaretRight\"></biggive-misc-icon>\n                    </a>\n                    <ul class=\"sub-menu\">\n                      <li>\n                        <a href={makeURL('Blog', this.blogUrlPrefix, 'match-funding-explained')}>Match Funding Explained</a>\n                      </li>\n                      <li>\n                        <a href={makeURL('Blog', this.blogUrlPrefix, 'impact')}>Match Funding Impact</a>\n                      </li>\n                      <li class=\"more\">\n                        <a onClick={this.noNav}>\n                          Match Funding Opportunities\n                          {/* IMPORTANT: notice this one has a class sub-sub-menu, not sub-menu  */}\n                          <biggive-misc-icon\n                            class=\"bx bxs-chevron-down sub-sub-menu-arrow arrow\"\n                            background-colour=\"white\"\n                            icon-colour=\"black\"\n                            icon=\"CaretRight\"\n                          ></biggive-misc-icon>\n                        </a>\n                        <ul class=\"sub-sub-menu\">\n                          <li>\n                            <a href={makeURL('Blog', this.blogUrlPrefix, 'christmas-challenge')} class=\"icon-christmas\">\n                              Christmas Challenge\n                            </a>\n                          </li>\n                          <li>\n                            <a href={makeURL('Blog', this.blogUrlPrefix, 'champions-for-children')} class=\"icon-children\">\n                              Champions for Children\n                            </a>\n                          </li>\n                          <li>\n                            <a href={makeURL('Blog', this.blogUrlPrefix, 'green-match-fund')} class=\"icon-green-match\">\n                              Green Match Fund\n                            </a>\n                          </li>\n                          <li>\n                            <a href={makeURL('Blog', this.blogUrlPrefix, 'women-girls-match-fund')} class=\"icon-women-girls\">\n                              Women &amp; Girls Match Fund\n                            </a>\n                          </li>\n                          <li>\n                            <a href={makeURL('Blog', this.blogUrlPrefix, 'kind2mind/')} class=\"icon-mental-health\">\n                              Kind²Mind\n                            </a>\n                          </li>\n                          <li>\n                            <a href={makeURL('Blog', this.blogUrlPrefix, 'artsforimpact/')} class=\"icon-arts-impact\">\n                              Arts for Impact\n                            </a>\n                          </li>\n                          <li>\n                            <a href={makeURL('Blog', this.blogUrlPrefix, 'anchor-match-fund/')} class=\"icon-anchor-match\">\n                              Anchor Match Fund\n                            </a>\n                          </li>\n                          <li>\n                            <a href={makeURL('Blog', this.blogUrlPrefix, 'emergency-campaigns/')} class=\"icon-emergency\">\n                              Emergency Match Fund\n                            </a>\n                          </li>\n                        </ul>\n                      </li>\n                      <li>\n                        <a href={makeURL('Blog', this.blogUrlPrefix, 'run-your-own-campaign/)')}>Run your match funding campaign</a>\n                      </li>\n                    </ul>\n                  </li>\n                  <li>\n                    <a onClick={this.noNav}>\n                      About Us\n                      <biggive-misc-icon class=\"bx bxs-chevron-down sub-menu-arrow arrow\" background-colour=\"white\" icon-colour=\"black\" icon=\"CaretRight\"></biggive-misc-icon>\n                    </a>\n                    <ul class=\"sub-menu\">\n                      <li>\n                        <a href={makeURL('Blog', this.blogUrlPrefix, 'our-people')}>Our People</a>\n                      </li>\n                      <li>\n                        <a href={makeURL('Blog', this.blogUrlPrefix, 'our-story')}>Our Story</a>\n                      </li>\n                      <li>\n                        <a href={makeURL('Blog', this.blogUrlPrefix, 'donation-funds')}>Donate by Bank Transfer</a>\n                      </li>\n                      <li>\n                        <a href={makeURL('Blog', this.blogUrlPrefix, 'our-fees')}>Our Fees</a>\n                      </li>\n                      <li>\n                        <a href={makeURL('Blog', this.blogUrlPrefix, 'faqs')}>FAQs</a>\n                      </li>\n                    </ul>\n                  </li>\n                  <li>\n                    <a onClick={this.noNav}>\n                      Resources\n                      <biggive-misc-icon class=\"bx bxs-chevron-down sub-menu-arrow arrow\" background-colour=\"white\" icon-colour=\"black\" icon=\"CaretRight\"></biggive-misc-icon>\n                    </a>\n                    <ul class=\"sub-menu\">\n                      <li>\n                        <a href={makeURL('Blog', this.blogUrlPrefix, 'case-studies')}>Case Studies</a>\n                      </li>\n                      <li>\n                        <a href={makeURL('Blog', this.blogUrlPrefix, 'blog')}>Blog</a>\n                      </li>\n                      <li>\n                        <a href={makeURL('Blog', this.blogUrlPrefix, 'reports-insights')}>Reports &amp; Insights</a>\n                      </li>\n                      <li>\n                        <a href={makeURL('Blog', this.blogUrlPrefix, 'press')}>Press</a>\n                      </li>\n                    </ul>\n                  </li>\n                </ul>\n                <div class=\"mobile-only\">{secondaryNavLinksForMobile}</div>\n              </div>\n              <div class=\"mobile-social-icon-wrap mobile-only\">\n                <biggive-social-icon service=\"Facebook\" url=\"https://www.facebook.com/BigGive.org\" background-colour=\"tertiary\" icon-colour=\"black\"></biggive-social-icon>\n                <biggive-social-icon service=\"Twitter\" url=\"https://x.com/BigGive\" background-colour=\"tertiary\" icon-colour=\"black\"></biggive-social-icon>\n                <biggive-social-icon service=\"LinkedIn\" url=\"https://uk.linkedin.com/company/big-give\" background-colour=\"tertiary\" icon-colour=\"black\"></biggive-social-icon>\n                <biggive-social-icon\n                  service=\"YouTube\"\n                  url=\"https://www.youtube.com/channel/UC9_wH1aaTuZurJ-F9R8GDcA\"\n                  background-colour=\"tertiary\"\n                  icon-colour=\"black\"\n                ></biggive-social-icon>\n                <biggive-social-icon service=\"Instagram\" url=\"https://www.instagram.com/biggiveorg\" background-colour=\"tertiary\" icon-colour=\"black\"></biggive-social-icon>\n              </div>\n            </div>\n          </div>\n        </nav>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/biggive-misc-icon2.js

@@ -8,10 +8,14 @@ const BiggiveMiscIcon = /*@__PURE__*/ proxyCustomElement(class BiggiveMiscIcon e
     constructor() {
         super();
         this.__registerHost();
+        /**
+         * Background colour
+         */
         this.backgroundColour = 'primary';
+        /**
+         * Background colour
+         */
         this.iconColour = 'white';
-        this.icon = undefined;
-        this.url = undefined;
     }
     getMiscIcon() {
         var icon = FontAwesomeIconsService.getMiscIcon(this.icon);

package/dist/components/biggive-misc-icon2.js.map

@@ -1 +1 @@
-{"file":"biggive-misc-icon2.js","mappings":";;;AAAA,MAAM,kBAAkB,GAAG,moQAAmoQ,CAAC;AAC/pQ,8BAAe,kBAAkB;;MCQpB,eAAe;;;;gCAIS,SAAS;0BAKf,OAAO;;;;IAY5B,WAAW;QACjB,IAAI,IAAI,GAAG,uBAAuB,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC1D,OAAO,IAAI,CAAC;KACb;IAED,MAAM;QACJ;;QAEE,4DAAK,KAAK,EAAE,mCAAmC,GAAG,IAAI,CAAC,gBAAgB,GAAG,GAAG,GAAG,IAAI,CAAC,IAAI,IACvF,0DAAG,IAAI,EAAE,IAAI,CAAC,GAAG,IACf,4DACE,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,EACjC,MAAM,EAAE,IAAI,CAAC,WAAW,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,EAClC,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC,UAAU,EAChC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,GAAG,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,IAE/E,6DAAM,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,GAAI,CAC9C,CACJ,CACA,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/biggive-misc-icon/biggive-misc-icon.scss?tag=biggive-misc-icon","src/components/biggive-misc-icon/biggive-misc-icon.tsx"],"sourcesContent":["@include backgrounds();\n@include fills();\n\n:host {\n  display: contents;\n}\n\n.misc-icon-item {\n  @include icon-large();\n\n  @media screen and (max-width: $screen-mobile-max) {\n    @include icon-medium();\n    margin: auto;\n\n    a {\n      margin: auto;\n    }\n  }\n}\n\n.CaretRight {\n  height: 10px;\n  width: 10px;\n  margin-right: 0px;\n  a {\n    padding: 0px;\n  }\n}\n\n.MenuClose {\n  a {\n    svg {\n      height: 12px;\n      width: 12px;\n    }\n  }\n}\n","import { IconDefinition } from '@fortawesome/fontawesome-svg-core';\nimport { Component, Prop, h } from '@stencil/core';\nimport { FontAwesomeIconsService } from '../../util/fontawesome-icons';\n\n@Component({\n  tag: 'biggive-misc-icon',\n  styleUrl: 'biggive-misc-icon.scss',\n  shadow: false,\n})\nexport class BiggiveMiscIcon {\n  /**\n   * Background colour\n   */\n  @Prop() backgroundColour: string = 'primary';\n\n  /**\n   * Background colour\n   */\n  @Prop() iconColour: string = 'white';\n\n  /**\n   * Icon\n   */\n  @Prop() icon: string;\n\n  /**\n   * Url\n   */\n  @Prop() url: string;\n\n  private getMiscIcon(): IconDefinition {\n    var icon = FontAwesomeIconsService.getMiscIcon(this.icon);\n    return icon;\n  }\n\n  render() {\n    return (\n      // Note: the icon name prop is set as a css class too for any styling specific to certain icons\n      <div class={'misc-icon-item background-colour-' + this.backgroundColour + ' ' + this.icon}>\n        <a href={this.url}>\n          <svg\n            width={this.getMiscIcon().icon[0]}\n            height={this.getMiscIcon().icon[1]}\n            xmlns=\"http://www.w3.org/2000/svg\"\n            class={'fill-' + this.iconColour}\n            viewBox={'0 0 ' + this.getMiscIcon().icon[0] + ' ' + this.getMiscIcon().icon[1]}\n          >\n            <path d={this.getMiscIcon().icon[4].toString()} />\n          </svg>\n        </a>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"biggive-misc-icon2.js","mappings":";;;AAAA,MAAM,kBAAkB,GAAG,moQAAmoQ,CAAC;AAC/pQ,8BAAe,kBAAkB;;MCQpB,eAAe;IAL5B;;;;;;QASU,qBAAgB,GAAW,SAAS,CAAC;;;;QAKrC,eAAU,GAAW,OAAO,CAAC;KAmCtC;IAvBS,WAAW;QACjB,IAAI,IAAI,GAAG,uBAAuB,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC1D,OAAO,IAAI,CAAC;KACb;IAED,MAAM;QACJ;;QAEE,4DAAK,KAAK,EAAE,mCAAmC,GAAG,IAAI,CAAC,gBAAgB,GAAG,GAAG,GAAG,IAAI,CAAC,IAAI,IACvF,0DAAG,IAAI,EAAE,IAAI,CAAC,GAAG,IACf,4DACE,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,EACjC,MAAM,EAAE,IAAI,CAAC,WAAW,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,EAClC,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC,UAAU,EAChC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,GAAG,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,IAE/E,6DAAM,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,GAAI,CAC9C,CACJ,CACA,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/biggive-misc-icon/biggive-misc-icon.scss?tag=biggive-misc-icon","src/components/biggive-misc-icon/biggive-misc-icon.tsx"],"sourcesContent":["@include backgrounds();\n@include fills();\n\n:host {\n  display: contents;\n}\n\n.misc-icon-item {\n  @include icon-large();\n\n  @media screen and (max-width: $screen-mobile-max) {\n    @include icon-medium();\n    margin: auto;\n\n    a {\n      margin: auto;\n    }\n  }\n}\n\n.CaretRight {\n  height: 10px;\n  width: 10px;\n  margin-right: 0px;\n  a {\n    padding: 0px;\n  }\n}\n\n.MenuClose {\n  a {\n    svg {\n      height: 12px;\n      width: 12px;\n    }\n  }\n}\n","import { IconDefinition } from '@fortawesome/fontawesome-svg-core';\nimport { Component, Prop, h } from '@stencil/core';\nimport { FontAwesomeIconsService } from '../../util/fontawesome-icons';\n\n@Component({\n  tag: 'biggive-misc-icon',\n  styleUrl: 'biggive-misc-icon.scss',\n  shadow: false,\n})\nexport class BiggiveMiscIcon {\n  /**\n   * Background colour\n   */\n  @Prop() backgroundColour: string = 'primary';\n\n  /**\n   * Background colour\n   */\n  @Prop() iconColour: string = 'white';\n\n  /**\n   * Icon\n   */\n  @Prop() icon: string;\n\n  /**\n   * Url\n   */\n  @Prop() url: string;\n\n  private getMiscIcon(): IconDefinition {\n    var icon = FontAwesomeIconsService.getMiscIcon(this.icon);\n    return icon;\n  }\n\n  render() {\n    return (\n      // Note: the icon name prop is set as a css class too for any styling specific to certain icons\n      <div class={'misc-icon-item background-colour-' + this.backgroundColour + ' ' + this.icon}>\n        <a href={this.url}>\n          <svg\n            width={this.getMiscIcon().icon[0]}\n            height={this.getMiscIcon().icon[1]}\n            xmlns=\"http://www.w3.org/2000/svg\"\n            class={'fill-' + this.iconColour}\n            viewBox={'0 0 ' + this.getMiscIcon().icon[0] + ' ' + this.getMiscIcon().icon[1]}\n          >\n            <path d={this.getMiscIcon().icon[4].toString()} />\n          </svg>\n        </a>\n      </div>\n    );\n  }\n}\n"],"version":3}

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

@@ -8,6 +8,9 @@ const BiggiveNavGroup$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveNavGroup
         super();
         this.__registerHost();
         this.__attachShadow();
+        /**
+         * Inline
+         */
         this.inline = true;
     }
     render() {

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

@@ -1 +1 @@
-{"file":"biggive-nav-group.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,uNAAuN,CAAC;AACnP,8BAAe,kBAAkB;;MCMpBA,iBAAe;;;;;sBAIA,IAAI;;IAE9B,MAAM;QACJ,QACE,6DACE,8DAAa,CACV,EACL;KACH;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveNavGroup"],"sources":["src/components/biggive-nav-group/biggive-nav-group.scss?tag=biggive-nav-group&encapsulation=shadow","src/components/biggive-nav-group/biggive-nav-group.tsx"],"sourcesContent":[":host {\n  display: contents;\n}\n\n\nul {\n  @include standard-font();\n  list-style-type: none;\n  padding: 0;\n  margin: 0;\n}","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-nav-group',\n  styleUrl: 'biggive-nav-group.scss',\n  shadow: true,\n})\nexport class BiggiveNavGroup {\n  /**\n   * Inline\n   */\n  @Prop() inline: boolean = true;\n\n  render() {\n    return (\n      <ul>\n        <slot></slot>\n      </ul>\n    );\n  }\n}\n"],"version":3}
+{"file":"biggive-nav-group.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,uNAAuN,CAAC;AACnP,8BAAe,kBAAkB;;MCMpBA,iBAAe;IAL5B;;;;;;;QASU,WAAM,GAAY,IAAI,CAAC;KAShC;IAPC,MAAM;QACJ,QACE,6DACE,8DAAa,CACV,EACL;KACH;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveNavGroup"],"sources":["src/components/biggive-nav-group/biggive-nav-group.scss?tag=biggive-nav-group&encapsulation=shadow","src/components/biggive-nav-group/biggive-nav-group.tsx"],"sourcesContent":[":host {\n  display: contents;\n}\n\n\nul {\n  @include standard-font();\n  list-style-type: none;\n  padding: 0;\n  margin: 0;\n}","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-nav-group',\n  styleUrl: 'biggive-nav-group.scss',\n  shadow: true,\n})\nexport class BiggiveNavGroup {\n  /**\n   * Inline\n   */\n  @Prop() inline: boolean = true;\n\n  render() {\n    return (\n      <ul>\n        <slot></slot>\n      </ul>\n    );\n  }\n}\n"],"version":3}

package/dist/components/biggive-nav-item.js

@@ -8,9 +8,6 @@ const BiggiveNavItem$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveNavItem e
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.url = undefined;
-        this.label = undefined;
-        this.iconColour = undefined;
     }
     render() {
         return (h("li", { key: 'e3397df27a329b834615305d2f0c290942735e3a', class: 'icon-' + this.iconColour }, h("a", { key: '6bcc1f29538da7418b26e4f74b22e55dd1fa5f59', href: this.url }, this.label), h("slot", { key: '9728762db7497b42bce1222b837699c075b31b00' })));

package/dist/components/biggive-nav-item.js.map

@@ -1 +1 @@
-{"file":"biggive-nav-item.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,sQAAsQ,CAAC;AACjS,6BAAe,iBAAiB;;MCMnBA,gBAAc;;;;;;;;;IAczB,MAAM;QACJ,QACE,2DAAI,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC,UAAU,IAClC,0DAAG,IAAI,EAAE,IAAI,CAAC,GAAG,IAAG,IAAI,CAAC,KAAK,CAAK,EACnC,8DAAa,CACV,EACL;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveNavItem"],"sources":["src/components/biggive-nav-item/biggive-nav-item.scss?tag=biggive-nav-item&encapsulation=shadow","src/components/biggive-nav-item/biggive-nav-item.tsx"],"sourcesContent":[":host {\n  display: contents;\n}\n\n\nli {\n  @include standard-font();\n  list-style-type: none;\n  padding: 0;\n  margin: 0;\n  display: inline-block;\n\n\n}\n\n::slotted(*) {\n  display: none;\n}","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-nav-item',\n  styleUrl: 'biggive-nav-item.scss',\n  shadow: true,\n})\nexport class BiggiveNavItem {\n  /**\n   * URL\n   */\n  @Prop() url: string;\n  /**\n   * Label\n   */\n  @Prop() label: string;\n  /**\n   * URL\n   */\n  @Prop() iconColour: string;\n\n  render() {\n    return (\n      <li class={'icon-' + this.iconColour}>\n        <a href={this.url}>{this.label}</a>\n        <slot></slot>\n      </li>\n    );\n  }\n}\n"],"version":3}
+{"file":"biggive-nav-item.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,sQAAsQ,CAAC;AACjS,6BAAe,iBAAiB;;MCMnBA,gBAAc;;;;;;IAczB,MAAM;QACJ,QACE,2DAAI,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC,UAAU,IAClC,0DAAG,IAAI,EAAE,IAAI,CAAC,GAAG,IAAG,IAAI,CAAC,KAAK,CAAK,EACnC,8DAAa,CACV,EACL;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveNavItem"],"sources":["src/components/biggive-nav-item/biggive-nav-item.scss?tag=biggive-nav-item&encapsulation=shadow","src/components/biggive-nav-item/biggive-nav-item.tsx"],"sourcesContent":[":host {\n  display: contents;\n}\n\n\nli {\n  @include standard-font();\n  list-style-type: none;\n  padding: 0;\n  margin: 0;\n  display: inline-block;\n\n\n}\n\n::slotted(*) {\n  display: none;\n}","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-nav-item',\n  styleUrl: 'biggive-nav-item.scss',\n  shadow: true,\n})\nexport class BiggiveNavItem {\n  /**\n   * URL\n   */\n  @Prop() url: string;\n  /**\n   * Label\n   */\n  @Prop() label: string;\n  /**\n   * URL\n   */\n  @Prop() iconColour: string;\n\n  render() {\n    return (\n      <li class={'icon-' + this.iconColour}>\n        <a href={this.url}>{this.label}</a>\n        <slot></slot>\n      </li>\n    );\n  }\n}\n"],"version":3}

package/dist/components/biggive-page-columns.js

@@ -8,6 +8,9 @@ const BiggivePageColumns$1 = /*@__PURE__*/ proxyCustomElement(class BiggivePageC
         super();
         this.__registerHost();
         this.__attachShadow();
+        /**
+         * Space below component
+         */
         this.spaceBelow = 0;
     }
     render() {

package/dist/components/biggive-page-columns.js.map

@@ -1 +1 @@
-{"file":"biggive-page-columns.js","mappings":";;AAAA,MAAM,qBAAqB,GAAG,giCAAgiC,CAAC;AAC/jC,iCAAe,qBAAqB;;MCMvBA,oBAAkB;;;;;0BAIA,CAAC;;IAE9B,MAAM;QACJ,QACE,4DAAK,KAAK,EAAE,wBAAwB,GAAG,IAAI,CAAC,UAAU,IACpD,4DAAK,KAAK,EAAC,SAAS,IAClB,4DAAK,KAAK,EAAC,gBAAgB,IACzB,6DAAM,IAAI,EAAC,gBAAgB,GAAQ,CAC/B,EACN,4DAAK,KAAK,EAAC,kBAAkB,IAC3B,6DAAM,IAAI,EAAC,kBAAkB,GAAQ,CACjC,CACF,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggivePageColumns"],"sources":["src/components/biggive-page-columns/biggive-page-columns.scss?tag=biggive-page-columns&encapsulation=shadow","src/components/biggive-page-columns/biggive-page-columns.tsx"],"sourcesContent":["@include spacers();\n\n:host {\n  display: contents;\n}\n\n.columns {\n  @include standard-font();\n  @include section-container();\n  display: flex;\n  flex-flow: row wrap;\n  justify-content: space-between;  \n  .column-primary {\n    width: calc(66.6% - $spacer-3);\n    box-sizing: border-box;\n  }\n  .column-secondary {\n    width: calc(33.4% - $spacer-3);\n    box-sizing: border-box;\n  }\n}\n\n@media screen and (max-width: $screen-tablet-max) {\n  .columns {\n    .column-primary {\n      width: 100%;\n      margin-bottom: $spacer-3;\n    }\n    .column-secondary {\n      width: 100%;\n    }\n  }\n}\n\n\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-page-columns',\n  styleUrl: 'biggive-page-columns.scss',\n  shadow: true,\n})\nexport class BiggivePageColumns {\n  /**\n   * Space below component\n   */\n  @Prop() spaceBelow: number = 0;\n\n  render() {\n    return (\n      <div class={'container space-below-' + this.spaceBelow}>\n        <div class=\"columns\">\n          <div class=\"column-primary\">\n            <slot name=\"column-primary\"></slot>\n          </div>\n          <div class=\"column-secondary\">\n            <slot name=\"column-secondary\"></slot>\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"biggive-page-columns.js","mappings":";;AAAA,MAAM,qBAAqB,GAAG,giCAAgiC,CAAC;AAC/jC,iCAAe,qBAAqB;;MCMvBA,oBAAkB;IAL/B;;;;;;;QASU,eAAU,GAAW,CAAC,CAAC;KAgBhC;IAdC,MAAM;QACJ,QACE,4DAAK,KAAK,EAAE,wBAAwB,GAAG,IAAI,CAAC,UAAU,IACpD,4DAAK,KAAK,EAAC,SAAS,IAClB,4DAAK,KAAK,EAAC,gBAAgB,IACzB,6DAAM,IAAI,EAAC,gBAAgB,GAAQ,CAC/B,EACN,4DAAK,KAAK,EAAC,kBAAkB,IAC3B,6DAAM,IAAI,EAAC,kBAAkB,GAAQ,CACjC,CACF,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggivePageColumns"],"sources":["src/components/biggive-page-columns/biggive-page-columns.scss?tag=biggive-page-columns&encapsulation=shadow","src/components/biggive-page-columns/biggive-page-columns.tsx"],"sourcesContent":["@include spacers();\n\n:host {\n  display: contents;\n}\n\n.columns {\n  @include standard-font();\n  @include section-container();\n  display: flex;\n  flex-flow: row wrap;\n  justify-content: space-between;  \n  .column-primary {\n    width: calc(66.6% - $spacer-3);\n    box-sizing: border-box;\n  }\n  .column-secondary {\n    width: calc(33.4% - $spacer-3);\n    box-sizing: border-box;\n  }\n}\n\n@media screen and (max-width: $screen-tablet-max) {\n  .columns {\n    .column-primary {\n      width: 100%;\n      margin-bottom: $spacer-3;\n    }\n    .column-secondary {\n      width: 100%;\n    }\n  }\n}\n\n\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-page-columns',\n  styleUrl: 'biggive-page-columns.scss',\n  shadow: true,\n})\nexport class BiggivePageColumns {\n  /**\n   * Space below component\n   */\n  @Prop() spaceBelow: number = 0;\n\n  render() {\n    return (\n      <div class={'container space-below-' + this.spaceBelow}>\n        <div class=\"columns\">\n          <div class=\"column-primary\">\n            <slot name=\"column-primary\"></slot>\n          </div>\n          <div class=\"column-secondary\">\n            <slot name=\"column-secondary\"></slot>\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/biggive-page-section.js

@@ -8,11 +8,25 @@ const BiggivePageSection$1 = /*@__PURE__*/ proxyCustomElement(class BiggivePageS
         super();
         this.__registerHost();
         this.__attachShadow();
+        /**
+         * Space below component
+         */
         this.spaceBelow = 0;
+        /**
+         * Section style top
+         */
         this.sectionStyleTop = 'straight';
+        /**
+         * Section style bottom
+         */
         this.sectionStyleBottom = 'straight';
-        this.colourScheme = undefined;
+        /**
+         * Width
+         */
         this.maxWidth = 100;
+        /**
+         * Bleeds the primary brand colour to the left and right edge of the viewport, even if used within a containing block element.
+         */
         this.primaryFullBleed = false;
     }
     render() {