@biggive/components 202501021532.0.0 → 202501071646.0.0

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

@@ -1 +1 @@
-{"file":"biggive-basic-card.js","mappings":";;;AAAA,MAAM,mBAAmB,GAAG,+gNAA+gN,CAAC;AAC5iN,+BAAe,mBAAmB;;MCQrBA,kBAAgB;;;;;0BACS,CAAC;gCAEG,SAAS;kCAEZ,EAAE;0BAEL,OAAO;0BAEP,OAAO;;;;;;oBAYjB,IAAI;0BAEM,SAAS;2BAEb,QAAQ;2BAER,UAAU;;;kCAMH,eAAe;oCAEZ,IAAI;kCAEN,IAAI;4BAEI,CAAC;4BAEf,KAAK;;IAErC,MAAM;QACJ,MAAM,UAAU,GAAG,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;QAE3C,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,EAEnB,KAAK,EAAE,EAAE,kBAAkB,EAAE,OAAO,GAAG,IAAI,CAAC,kBAAkB,GAAG,IAAI,EAAE,IAEvE,0DAAG,IAAI,EAAE,IAAI,CAAC,SAAS,IACrB,4DAAK,KAAK,EAAE,2BAA2B,GAAG,IAAI,CAAC,UAAU,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,IAC3F,4DAAK,KAAK,EAAC,cAAc,IACtB,IAAI,CAAC,IAAI,IAAI,IAAI,IAChB,WAAK,KAAK,EAAC,MAAM,IACf,WAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,IAC5F,YAAM,CAAC,EAAC,2DAA2D,EAAC,KAAK,EAAC,YAAY,GAAG,EACzF,YAAM,CAAC,EAAC,+EAA+E,EAAC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC,UAAU,GAAI,CACxH,CACF,IACJ,IAAI,EACP,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,EAAC,UAAU,qDAAC,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,SAAS,CAAc,EACvD,4DAAK,KAAK,EAAC,UAAU,IAAE,IAAI,CAAC,QAAQ,CAAO,EAC3C,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,GAAG,EAAE,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,WAAW,GAAmB,CACnH,IACJ,IAAI,CACJ,CACF,CACJ,CACA,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveBasicCard"],"sources":["src/components/biggive-basic-card/biggive-basic-card.scss?tag=biggive-basic-card&encapsulation=shadow","src/components/biggive-basic-card/biggive-basic-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-4;\n  height: 100%;\n  white-space: pre-wrap;\n  a,\n  a:hover {\n    text-decoration: none;\n  }\n  .sleeve {\n    padding: $spacer-4;\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    .sleeve {\n      @include corner-clip-medium-top-right();\n    }\n  }\n  &.clip-bottom-left-corner-true.clip-top-right-corner-false {\n    .sleeve {\n      @include corner-clip-medium-bottom-left();\n    }\n  }\n  &.clip-bottom-left-corner-true.clip-top-right-corner-true {\n    .sleeve {\n      @include corner-clip-medium-bottom-left-top-right();\n    }\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  .subtitle {\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}\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-basic-card',\n  styleUrl: 'biggive-basic-card.scss',\n  shadow: true,\n})\nexport class BiggiveBasicCard {\n  @Prop() spaceBelow: spacingOption = 0;\n\n  @Prop() backgroundColour: brandColour = 'primary';\n\n  @Prop() backgroundImageUrl: string = '';\n\n  @Prop() cardColour: brandColour = 'white';\n\n  @Prop() textColour: brandColour = 'black';\n\n  @Prop() mainImageUrl: string;\n\n  @Prop() mainImageAltText: string;\n\n  @Prop() mainTitle: string;\n\n  @Prop() subtitle: string;\n\n  @Prop() teaser: string;\n\n  @Prop() icon: boolean = true;\n\n  @Prop() iconColour: brandColour = 'primary';\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() headingLevel: 1 | 2 | 3 | 4 | 5 | 6 = 3;\n\n  @Prop() addAnimation: boolean = false;\n\n  render() {\n    const HeadingTag = `h${this.headingLevel}`;\n\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        style={{ 'background-image': \"url('\" + this.backgroundImageUrl + \"')\" }}\n      >\n        <a href={this.buttonUrl}>\n          <div class={'sleeve background-colour-' + this.cardColour + ' text-colour-' + this.textColour}>\n            <div class=\"content-wrap\">\n              {this.icon == true ? (\n                <div class=\"icon\">\n                  <svg width=\"53\" height=\"39\" viewBox=\"0 0 53 39\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path d=\"M38.7009 13.6572L52.3535 38.6959H25.0386L38.7009 13.6572Z\" class=\"fill-black\" />\n                    <path d=\"M20.4789 36.4199L6.36785e-06 5.89713e-05L40.9724 6.61352e-05L20.4789 36.4199Z\" class={'fill-' + this.iconColour} />\n                  </svg>\n                </div>\n              ) : null}\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              <HeadingTag class=\"title\">{this.mainTitle}</HeadingTag>\n              <div class=\"subtitle\">{this.subtitle}</div>\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} url={this.buttonUrl} 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-basic-card.js","mappings":";;;AAAA,MAAM,mBAAmB,GAAG,+gNAA+gN,CAAC;AAC5iN,+BAAe,mBAAmB;;MCQrBA,kBAAgB;IAL7B;;;;QAMU,eAAU,GAAkB,CAAC,CAAC;QAE9B,qBAAgB,GAAgB,SAAS,CAAC;QAE1C,uBAAkB,GAAW,EAAE,CAAC;QAEhC,eAAU,GAAgB,OAAO,CAAC;QAElC,eAAU,GAAgB,OAAO,CAAC;QAYlC,SAAI,GAAY,IAAI,CAAC;QAErB,eAAU,GAAgB,SAAS,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,GAA0B,CAAC,CAAC;QAExC,iBAAY,GAAY,KAAK,CAAC;KAqDvC;IAnDC,MAAM;QACJ,MAAM,UAAU,GAAG,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;QAE3C,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,EAEnB,KAAK,EAAE,EAAE,kBAAkB,EAAE,OAAO,GAAG,IAAI,CAAC,kBAAkB,GAAG,IAAI,EAAE,IAEvE,0DAAG,IAAI,EAAE,IAAI,CAAC,SAAS,IACrB,4DAAK,KAAK,EAAE,2BAA2B,GAAG,IAAI,CAAC,UAAU,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,IAC3F,4DAAK,KAAK,EAAC,cAAc,IACtB,IAAI,CAAC,IAAI,IAAI,IAAI,IAChB,WAAK,KAAK,EAAC,MAAM,IACf,WAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,IAC5F,YAAM,CAAC,EAAC,2DAA2D,EAAC,KAAK,EAAC,YAAY,GAAG,EACzF,YAAM,CAAC,EAAC,+EAA+E,EAAC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC,UAAU,GAAI,CACxH,CACF,IACJ,IAAI,EACP,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,EAAC,UAAU,qDAAC,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,SAAS,CAAc,EACvD,4DAAK,KAAK,EAAC,UAAU,IAAE,IAAI,CAAC,QAAQ,CAAO,EAC3C,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,GAAG,EAAE,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,WAAW,GAAmB,CACnH,IACJ,IAAI,CACJ,CACF,CACJ,CACA,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveBasicCard"],"sources":["src/components/biggive-basic-card/biggive-basic-card.scss?tag=biggive-basic-card&encapsulation=shadow","src/components/biggive-basic-card/biggive-basic-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-4;\n  height: 100%;\n  white-space: pre-wrap;\n  a,\n  a:hover {\n    text-decoration: none;\n  }\n  .sleeve {\n    padding: $spacer-4;\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    .sleeve {\n      @include corner-clip-medium-top-right();\n    }\n  }\n  &.clip-bottom-left-corner-true.clip-top-right-corner-false {\n    .sleeve {\n      @include corner-clip-medium-bottom-left();\n    }\n  }\n  &.clip-bottom-left-corner-true.clip-top-right-corner-true {\n    .sleeve {\n      @include corner-clip-medium-bottom-left-top-right();\n    }\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  .subtitle {\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}\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-basic-card',\n  styleUrl: 'biggive-basic-card.scss',\n  shadow: true,\n})\nexport class BiggiveBasicCard {\n  @Prop() spaceBelow: spacingOption = 0;\n\n  @Prop() backgroundColour: brandColour = 'primary';\n\n  @Prop() backgroundImageUrl: string = '';\n\n  @Prop() cardColour: brandColour = 'white';\n\n  @Prop() textColour: brandColour = 'black';\n\n  @Prop() mainImageUrl: string;\n\n  @Prop() mainImageAltText: string;\n\n  @Prop() mainTitle: string;\n\n  @Prop() subtitle: string;\n\n  @Prop() teaser: string;\n\n  @Prop() icon: boolean = true;\n\n  @Prop() iconColour: brandColour = 'primary';\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() headingLevel: 1 | 2 | 3 | 4 | 5 | 6 = 3;\n\n  @Prop() addAnimation: boolean = false;\n\n  render() {\n    const HeadingTag = `h${this.headingLevel}`;\n\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        style={{ 'background-image': \"url('\" + this.backgroundImageUrl + \"')\" }}\n      >\n        <a href={this.buttonUrl}>\n          <div class={'sleeve background-colour-' + this.cardColour + ' text-colour-' + this.textColour}>\n            <div class=\"content-wrap\">\n              {this.icon == true ? (\n                <div class=\"icon\">\n                  <svg width=\"53\" height=\"39\" viewBox=\"0 0 53 39\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path d=\"M38.7009 13.6572L52.3535 38.6959H25.0386L38.7009 13.6572Z\" class=\"fill-black\" />\n                    <path d=\"M20.4789 36.4199L6.36785e-06 5.89713e-05L40.9724 6.61352e-05L20.4789 36.4199Z\" class={'fill-' + this.iconColour} />\n                  </svg>\n                </div>\n              ) : null}\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              <HeadingTag class=\"title\">{this.mainTitle}</HeadingTag>\n              <div class=\"subtitle\">{this.subtitle}</div>\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} url={this.buttonUrl} 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-beneficiary-icon.js

@@ -8,10 +8,21 @@ const BiggiveBeneficiaryIcon$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveB
     constructor() {
         super();
         this.__registerHost();
+        /**
+         * Background colour
+         */
         this.backgroundColour = 'primary';
+        /**
+         * Background colour
+         */
         this.iconColour = 'white';
+        /**
+         * Icon
+         */
         this.icon = 'Other';
-        this.label = undefined;
+        /**
+         * Url
+         */
         this.url = '#';
     }
     getBeneficiaryIcon() {

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

@@ -1 +1 @@
-{"file":"biggive-beneficiary-icon.js","mappings":";;;AAAA,MAAM,yBAAyB,GAAG,qgMAAqgM,CAAC;AACxiM,qCAAe,yBAAyB;;MCQ3BA,wBAAsB;;;;gCAIE,SAAS;0BAKf,OAAO;oBAIb,OAAO;;mBAUR,GAAG;;IAEjB,kBAAkB;QACxB,IAAI,IAAI,GAAG,uBAAuB,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACjE,OAAO,IAAI,CAAC;KACb;IAED,MAAM;QACJ,QACE,4DAAK,KAAK,EAAC,WAAW,IACpB,4DAAK,KAAK,EAAE,0CAA0C,GAAG,IAAI,CAAC,gBAAgB,IAC5E,0DAAG,IAAI,EAAE,IAAI,CAAC,GAAG,IACf,4DACE,KAAK,EAAE,IAAI,CAAC,kBAAkB,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,EACxC,MAAM,EAAE,IAAI,CAAC,kBAAkB,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,EACzC,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC,UAAU,EAChC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,GAAG,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,IAE7F,6DAAM,CAAC,EAAE,IAAI,CAAC,kBAAkB,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,GAAI,CACrD,CACJ,CACA,EACN,4DAAK,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAO,CACjC,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveBeneficiaryIcon"],"sources":["src/components/biggive-beneficiary-icon/biggive-beneficiary-icon.scss?tag=biggive-beneficiary-icon","src/components/biggive-beneficiary-icon/biggive-beneficiary-icon.tsx"],"sourcesContent":["@include backgrounds();\n@include fills();\n\n:host {\n  display: contents;\n}\n\n.container {\n  @include standard-font();\n  display: flex;\n  justify-content: flex-start;\n  .label {\n    padding-left: $spacer-3;\n    @include font-size-x-small();\n    width: 60px;\n    margin-top: auto;\n    margin-bottom: auto;\n  }\n}\n\n.beneficiary-icon-item {\n  @include icon-medium();\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-beneficiary-icon',\n  styleUrl: 'biggive-beneficiary-icon.scss',\n  shadow: false,\n})\nexport class BiggiveBeneficiaryIcon {\n  /**\n   * Background colour\n   */\n  @Prop() backgroundColour: string = 'primary';\n\n  /**\n   * Background colour\n   */\n  @Prop() iconColour: string = 'white';\n  /**\n   * Icon\n   */\n  @Prop() icon: string = 'Other';\n\n  /**\n   * Label\n   */\n  @Prop() label: string;\n\n  /**\n   * Url\n   */\n  @Prop() url: string = '#';\n\n  private getBeneficiaryIcon(): IconDefinition {\n    var icon = FontAwesomeIconsService.getBeneficiaryIcon(this.icon);\n    return icon;\n  }\n\n  render() {\n    return (\n      <div class=\"container\">\n        <div class={'beneficiary-icon-item background-colour-' + this.backgroundColour}>\n          <a href={this.url}>\n            <svg\n              width={this.getBeneficiaryIcon().icon[0]}\n              height={this.getBeneficiaryIcon().icon[1]}\n              xmlns=\"http://www.w3.org/2000/svg\"\n              class={'fill-' + this.iconColour}\n              viewBox={'0 0 ' + this.getBeneficiaryIcon().icon[0] + ' ' + this.getBeneficiaryIcon().icon[1]}\n            >\n              <path d={this.getBeneficiaryIcon().icon[4].toString()} />\n            </svg>\n          </a>\n        </div>\n        <div class=\"label\">{this.label}</div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"biggive-beneficiary-icon.js","mappings":";;;AAAA,MAAM,yBAAyB,GAAG,qgMAAqgM,CAAC;AACxiM,qCAAe,yBAAyB;;MCQ3BA,wBAAsB;IALnC;;;;;;QASU,qBAAgB,GAAW,SAAS,CAAC;;;;QAKrC,eAAU,GAAW,OAAO,CAAC;;;;QAI7B,SAAI,GAAW,OAAO,CAAC;;;;QAUvB,QAAG,GAAW,GAAG,CAAC;KA2B3B;IAzBS,kBAAkB;QACxB,IAAI,IAAI,GAAG,uBAAuB,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACjE,OAAO,IAAI,CAAC;KACb;IAED,MAAM;QACJ,QACE,4DAAK,KAAK,EAAC,WAAW,IACpB,4DAAK,KAAK,EAAE,0CAA0C,GAAG,IAAI,CAAC,gBAAgB,IAC5E,0DAAG,IAAI,EAAE,IAAI,CAAC,GAAG,IACf,4DACE,KAAK,EAAE,IAAI,CAAC,kBAAkB,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,EACxC,MAAM,EAAE,IAAI,CAAC,kBAAkB,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,EACzC,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC,UAAU,EAChC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,GAAG,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,IAE7F,6DAAM,CAAC,EAAE,IAAI,CAAC,kBAAkB,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,GAAI,CACrD,CACJ,CACA,EACN,4DAAK,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAO,CACjC,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveBeneficiaryIcon"],"sources":["src/components/biggive-beneficiary-icon/biggive-beneficiary-icon.scss?tag=biggive-beneficiary-icon","src/components/biggive-beneficiary-icon/biggive-beneficiary-icon.tsx"],"sourcesContent":["@include backgrounds();\n@include fills();\n\n:host {\n  display: contents;\n}\n\n.container {\n  @include standard-font();\n  display: flex;\n  justify-content: flex-start;\n  .label {\n    padding-left: $spacer-3;\n    @include font-size-x-small();\n    width: 60px;\n    margin-top: auto;\n    margin-bottom: auto;\n  }\n}\n\n.beneficiary-icon-item {\n  @include icon-medium();\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-beneficiary-icon',\n  styleUrl: 'biggive-beneficiary-icon.scss',\n  shadow: false,\n})\nexport class BiggiveBeneficiaryIcon {\n  /**\n   * Background colour\n   */\n  @Prop() backgroundColour: string = 'primary';\n\n  /**\n   * Background colour\n   */\n  @Prop() iconColour: string = 'white';\n  /**\n   * Icon\n   */\n  @Prop() icon: string = 'Other';\n\n  /**\n   * Label\n   */\n  @Prop() label: string;\n\n  /**\n   * Url\n   */\n  @Prop() url: string = '#';\n\n  private getBeneficiaryIcon(): IconDefinition {\n    var icon = FontAwesomeIconsService.getBeneficiaryIcon(this.icon);\n    return icon;\n  }\n\n  render() {\n    return (\n      <div class=\"container\">\n        <div class={'beneficiary-icon-item background-colour-' + this.backgroundColour}>\n          <a href={this.url}>\n            <svg\n              width={this.getBeneficiaryIcon().icon[0]}\n              height={this.getBeneficiaryIcon().icon[1]}\n              xmlns=\"http://www.w3.org/2000/svg\"\n              class={'fill-' + this.iconColour}\n              viewBox={'0 0 ' + this.getBeneficiaryIcon().icon[0] + ' ' + this.getBeneficiaryIcon().icon[1]}\n            >\n              <path d={this.getBeneficiaryIcon().icon[4].toString()} />\n            </svg>\n          </a>\n        </div>\n        <div class=\"label\">{this.label}</div>\n      </div>\n    );\n  }\n}\n"],"version":3}

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

@@ -1 +1 @@
-{"file":"biggive-biography-card.js","mappings":"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","names":["BiggiveBiographyCard"],"sources":["src/components/biggive-biography-card/biggive-biography-card.scss?tag=biggive-biography-card&encapsulation=shadow","src/components/biggive-biography-card/biggive-biography-card.tsx"],"sourcesContent":["@include image-alignment();\n@include spacers();\n@include backgrounds();\n@include text-colours();\n\n:host {\n  display: block;\n}\n\n.container {\n\n  @each $key, $colour in $brandColoursIncBrand6Turquoise {\n    &.background-colour-#{$key} .image-wrap { background-color: $colour; }\n  }\n\n  text-align: left;\n  &.text-align-center {\n    text-align: center;\n  }\n  &.text-align-right {\n    text-align: right;\n  }\n\n  a {\n    text-decoration: none;\n  }\n\n  h3.full-name {\n    font-size: font-size-medium();\n    margin: 0;\n  }\n\n  div.job-title {\n    font-size: font-size-small();\n    margin: 0;    \n  }\n  \n\n  .sleeve {\n\n    \n    @each $key, $colour in $brandColoursIncBrand6Turquoise {\n\n      &.border-width-1.border-colour-#{$key} { border: $spacer-1 solid $colour; }\n      &.border-width-2.border-colour-#{$key} { border: $spacer-2 solid $colour; }\n      &.border-width-3.border-colour-#{$key} { border: $spacer-3 solid $colour; }\n      &.border-width-4.border-colour-#{$key} { border: $spacer-4 solid $colour; }\n      &.border-width-5.border-colour-#{$key} { border: $spacer-5 solid $colour; }\n      &.border-width-6.border-colour-#{$key} { border: $spacer-6 solid $colour; }\n    }\n  \n\n    margin-bottom: $spacer-2;\n\n    &.circle-true {\n      overflow: hidden;\n      border-radius: 50%;\n    }\n\n\n    .image-wrap {\n      position: relative;\n      background-position: center center;\n      background-size: cover;\n      background-repeat: no-repeat;\n  \n      &.image-style-cover {\n        background-size: cover;\n      }\n      &.image-style-contain {\n        background-size: contain;\n      }\n  \n      &[data-ratio=\"1,1\"] { padding-bottom: 100%; }\n      &[data-ratio=\"1,1\"].border-width-1 { padding-bottom: calc(100% - ( $spacer-1 * 2 )); }\n      &[data-ratio=\"1,1\"].border-width-2 { padding-bottom: calc(100% - ( $spacer-2 * 2 )); }\n      &[data-ratio=\"1,1\"].border-width-3 { padding-bottom: calc(100% - ( $spacer-3 * 2 )); }\n      &[data-ratio=\"1,1\"].border-width-4 { padding-bottom: calc(100% - ( $spacer-4 * 2 )); }\n      &[data-ratio=\"1,1\"].border-width-5 { padding-bottom: calc(100% - ( $spacer-5 * 2 )); }\n      &[data-ratio=\"1,1\"].border-width-6 { padding-bottom: calc(100% - ( $spacer-6 * 2 )); }\n  \n      &[data-ratio=\"1,1.5\"] { padding-bottom: 150%; }\n      &[data-ratio=\"1,1.5\"].border-width-1 { padding-bottom: calc(150% - ( $spacer-1 * 2 )); }\n      &[data-ratio=\"1,1.5\"].border-width-2 { padding-bottom: calc(150% - ( $spacer-2 * 2 )); }\n      &[data-ratio=\"1,1.5\"].border-width-3 { padding-bottom: calc(150% - ( $spacer-3 * 2 )); }\n      &[data-ratio=\"1,1.5\"].border-width-4 { padding-bottom: calc(150% - ( $spacer-4 * 2 )); }\n      &[data-ratio=\"1,1.5\"].border-width-5 { padding-bottom: calc(150% - ( $spacer-5 * 2 )); }\n      &[data-ratio=\"1,1.5\"].border-width-6 { padding-bottom: calc(150% - ( $spacer-6 * 2 )); }\n  \n      &[data-ratio=\"1,2\"] { padding-bottom: 200%; }\n      &[data-ratio=\"1,2\"].border-width-1 { padding-bottom: calc(200% - ( $spacer-1 * 2 )); }\n      &[data-ratio=\"1,2\"].border-width-2 { padding-bottom: calc(200% - ( $spacer-2 * 2 )); }\n      &[data-ratio=\"1,2\"].border-width-3 { padding-bottom: calc(200% - ( $spacer-3 * 2 )); }\n      &[data-ratio=\"1,2\"].border-width-4 { padding-bottom: calc(200% - ( $spacer-4 * 2 )); }\n      &[data-ratio=\"1,2\"].border-width-5 { padding-bottom: calc(200% - ( $spacer-5 * 2 )); }\n      &[data-ratio=\"1,2\"].border-width-6 { padding-bottom: calc(200% - ( $spacer-6 * 2 )); }\n  \n  \n  \n  \n  \n  \n      &.rounded-true {\n        overflow: hidden;\n        border-radius: 10px;\n      }\n  \n  \n\n  \n      .circle {\n        position: absolute;\n        width: 30px;\n        height: 30px;\n        background-color: #FFFFFF;\n        bottom: 15px;\n        right: 15px;\n        border-radius: 50%;\n        text-align: center;\n        padding: 6.5px;\n        box-sizing: border-box;\n        svg path {\n          stroke: #000000;\n        }\n        &.dark {\n          background-color: #000000;\n          svg path {\n            stroke: #FFFFFF;\n          }\n        }\n        svg {\n          position: relative;\n          display: inline-block;\n          top: -1px;\n          height: 15px;\n          width: 15px;\n        }\n      }\n  \n  \n  \n      img {\n        display: none;\n      }\n\n\n  }\n\n\n\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-biography-card',\n  styleUrl: 'biggive-biography-card.scss',\n  shadow: true,\n})\nexport class BiggiveBiographyCard {\n  @Prop() spaceBelow: spacingOption = 0;\n\n  @Prop() borderWidth: spacingOption = 0;\n\n  @Prop() imageUrl: string = '';\n\n  @Prop() imageStyle: 'cover' | 'contain' = 'cover';\n\n  @Prop() textColour: brandColour = 'black';\n\n  @Prop() backgroundColour: brandColour = 'white';\n\n  @Prop() fullName: string = '';\n\n  @Prop() jobTitle: string = '';\n\n  @Prop() textAlign: 'center' | 'left' | 'right' = 'left';\n\n  @Prop() ratio: '1,1' | '1,1.5' | '1,2' = '1,1.5';\n\n  @Prop() circle: boolean = false;\n\n  @Prop() circleColour: 'light' | 'dark' = 'light';\n\n  @Prop() rounded: boolean = false;\n\n  @Prop() url: string = '';\n\n  render() {\n    if (this.url != '') {\n      return (\n        <div class={'container space-below-' + this.spaceBelow + ' text-colour-' + this.textColour + ' text-align-' + this.textAlign}>\n          <a href={this.url}>\n            <div\n              class={\n                'sleeve circle-' +\n                this.circle.toString() +\n                ' border-colour-' +\n                this.backgroundColour +\n                ' background-colour-' +\n                this.backgroundColour +\n                ' border-width-' +\n                this.borderWidth\n              }\n            >\n              {this.imageUrl != '' ? (\n                <div\n                  data-ratio={this.ratio}\n                  class={'image-wrap image-style-' + this.imageStyle + ' rounded-' + this.rounded.toString()}\n                  style={{ 'background-image': \"url('\" + this.imageUrl + \"')\" }}\n                >\n                  <img src={this.imageUrl} alt={this.fullName} title={this.fullName} />\n                  <div class={'circle ' + this.circleColour}>\n                    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n                      <path stroke-color=\"1\" d=\"M11 11v-11h1v11h11v1h-11v11h-1v-11h-11v-1h11z\" />\n                    </svg>\n                  </div>\n                </div>\n              ) : null}\n            </div>\n            <h3 class=\"full-name\">{this.fullName}</h3>\n            <div class=\"job-title\">{this.jobTitle}</div>\n          </a>\n        </div>\n      );\n    } else {\n      return (\n        <div class={'container space-below-' + this.spaceBelow + ' text-colour-' + this.textColour + ' text-align-' + this.textAlign}>\n          <div\n            class={\n              'sleeve circle-' +\n              this.circle.toString() +\n              ' border-colour-' +\n              this.backgroundColour +\n              ' background-colour-' +\n              this.backgroundColour +\n              ' border-width-' +\n              this.borderWidth\n            }\n          >\n            {this.imageUrl != '' ? (\n              <div\n                data-ratio={this.ratio}\n                class={'image-wrap image-style-' + this.imageStyle + ' rounded-' + this.rounded.toString()}\n                style={{ 'background-image': \"url('\" + this.imageUrl + \"')\" }}\n              >\n                <img src={this.imageUrl} alt={this.fullName} title={this.fullName} />\n              </div>\n            ) : null}\n          </div>\n          <h3 class=\"full-name\">{this.fullName}</h3>\n          <div class=\"job-title\">{this.jobTitle}</div>\n        </div>\n      );\n    }\n  }\n}\n"],"version":3}
+{"file":"biggive-biography-card.js","mappings":"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","names":["BiggiveBiographyCard"],"sources":["src/components/biggive-biography-card/biggive-biography-card.scss?tag=biggive-biography-card&encapsulation=shadow","src/components/biggive-biography-card/biggive-biography-card.tsx"],"sourcesContent":["@include image-alignment();\n@include spacers();\n@include backgrounds();\n@include text-colours();\n\n:host {\n  display: block;\n}\n\n.container {\n\n  @each $key, $colour in $brandColoursIncBrand6Turquoise {\n    &.background-colour-#{$key} .image-wrap { background-color: $colour; }\n  }\n\n  text-align: left;\n  &.text-align-center {\n    text-align: center;\n  }\n  &.text-align-right {\n    text-align: right;\n  }\n\n  a {\n    text-decoration: none;\n  }\n\n  h3.full-name {\n    font-size: font-size-medium();\n    margin: 0;\n  }\n\n  div.job-title {\n    font-size: font-size-small();\n    margin: 0;    \n  }\n  \n\n  .sleeve {\n\n    \n    @each $key, $colour in $brandColoursIncBrand6Turquoise {\n\n      &.border-width-1.border-colour-#{$key} { border: $spacer-1 solid $colour; }\n      &.border-width-2.border-colour-#{$key} { border: $spacer-2 solid $colour; }\n      &.border-width-3.border-colour-#{$key} { border: $spacer-3 solid $colour; }\n      &.border-width-4.border-colour-#{$key} { border: $spacer-4 solid $colour; }\n      &.border-width-5.border-colour-#{$key} { border: $spacer-5 solid $colour; }\n      &.border-width-6.border-colour-#{$key} { border: $spacer-6 solid $colour; }\n    }\n  \n\n    margin-bottom: $spacer-2;\n\n    &.circle-true {\n      overflow: hidden;\n      border-radius: 50%;\n    }\n\n\n    .image-wrap {\n      position: relative;\n      background-position: center center;\n      background-size: cover;\n      background-repeat: no-repeat;\n  \n      &.image-style-cover {\n        background-size: cover;\n      }\n      &.image-style-contain {\n        background-size: contain;\n      }\n  \n      &[data-ratio=\"1,1\"] { padding-bottom: 100%; }\n      &[data-ratio=\"1,1\"].border-width-1 { padding-bottom: calc(100% - ( $spacer-1 * 2 )); }\n      &[data-ratio=\"1,1\"].border-width-2 { padding-bottom: calc(100% - ( $spacer-2 * 2 )); }\n      &[data-ratio=\"1,1\"].border-width-3 { padding-bottom: calc(100% - ( $spacer-3 * 2 )); }\n      &[data-ratio=\"1,1\"].border-width-4 { padding-bottom: calc(100% - ( $spacer-4 * 2 )); }\n      &[data-ratio=\"1,1\"].border-width-5 { padding-bottom: calc(100% - ( $spacer-5 * 2 )); }\n      &[data-ratio=\"1,1\"].border-width-6 { padding-bottom: calc(100% - ( $spacer-6 * 2 )); }\n  \n      &[data-ratio=\"1,1.5\"] { padding-bottom: 150%; }\n      &[data-ratio=\"1,1.5\"].border-width-1 { padding-bottom: calc(150% - ( $spacer-1 * 2 )); }\n      &[data-ratio=\"1,1.5\"].border-width-2 { padding-bottom: calc(150% - ( $spacer-2 * 2 )); }\n      &[data-ratio=\"1,1.5\"].border-width-3 { padding-bottom: calc(150% - ( $spacer-3 * 2 )); }\n      &[data-ratio=\"1,1.5\"].border-width-4 { padding-bottom: calc(150% - ( $spacer-4 * 2 )); }\n      &[data-ratio=\"1,1.5\"].border-width-5 { padding-bottom: calc(150% - ( $spacer-5 * 2 )); }\n      &[data-ratio=\"1,1.5\"].border-width-6 { padding-bottom: calc(150% - ( $spacer-6 * 2 )); }\n  \n      &[data-ratio=\"1,2\"] { padding-bottom: 200%; }\n      &[data-ratio=\"1,2\"].border-width-1 { padding-bottom: calc(200% - ( $spacer-1 * 2 )); }\n      &[data-ratio=\"1,2\"].border-width-2 { padding-bottom: calc(200% - ( $spacer-2 * 2 )); }\n      &[data-ratio=\"1,2\"].border-width-3 { padding-bottom: calc(200% - ( $spacer-3 * 2 )); }\n      &[data-ratio=\"1,2\"].border-width-4 { padding-bottom: calc(200% - ( $spacer-4 * 2 )); }\n      &[data-ratio=\"1,2\"].border-width-5 { padding-bottom: calc(200% - ( $spacer-5 * 2 )); }\n      &[data-ratio=\"1,2\"].border-width-6 { padding-bottom: calc(200% - ( $spacer-6 * 2 )); }\n  \n  \n  \n  \n  \n  \n      &.rounded-true {\n        overflow: hidden;\n        border-radius: 10px;\n      }\n  \n  \n\n  \n      .circle {\n        position: absolute;\n        width: 30px;\n        height: 30px;\n        background-color: #FFFFFF;\n        bottom: 15px;\n        right: 15px;\n        border-radius: 50%;\n        text-align: center;\n        padding: 6.5px;\n        box-sizing: border-box;\n        svg path {\n          stroke: #000000;\n        }\n        &.dark {\n          background-color: #000000;\n          svg path {\n            stroke: #FFFFFF;\n          }\n        }\n        svg {\n          position: relative;\n          display: inline-block;\n          top: -1px;\n          height: 15px;\n          width: 15px;\n        }\n      }\n  \n  \n  \n      img {\n        display: none;\n      }\n\n\n  }\n\n\n\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-biography-card',\n  styleUrl: 'biggive-biography-card.scss',\n  shadow: true,\n})\nexport class BiggiveBiographyCard {\n  @Prop() spaceBelow: spacingOption = 0;\n\n  @Prop() borderWidth: spacingOption = 0;\n\n  @Prop() imageUrl: string = '';\n\n  @Prop() imageStyle: 'cover' | 'contain' = 'cover';\n\n  @Prop() textColour: brandColour = 'black';\n\n  @Prop() backgroundColour: brandColour = 'white';\n\n  @Prop() fullName: string = '';\n\n  @Prop() jobTitle: string = '';\n\n  @Prop() textAlign: 'center' | 'left' | 'right' = 'left';\n\n  @Prop() ratio: '1,1' | '1,1.5' | '1,2' = '1,1.5';\n\n  @Prop() circle: boolean = false;\n\n  @Prop() circleColour: 'light' | 'dark' = 'light';\n\n  @Prop() rounded: boolean = false;\n\n  @Prop() url: string = '';\n\n  render() {\n    if (this.url != '') {\n      return (\n        <div class={'container space-below-' + this.spaceBelow + ' text-colour-' + this.textColour + ' text-align-' + this.textAlign}>\n          <a href={this.url}>\n            <div\n              class={\n                'sleeve circle-' +\n                this.circle.toString() +\n                ' border-colour-' +\n                this.backgroundColour +\n                ' background-colour-' +\n                this.backgroundColour +\n                ' border-width-' +\n                this.borderWidth\n              }\n            >\n              {this.imageUrl != '' ? (\n                <div\n                  data-ratio={this.ratio}\n                  class={'image-wrap image-style-' + this.imageStyle + ' rounded-' + this.rounded.toString()}\n                  style={{ 'background-image': \"url('\" + this.imageUrl + \"')\" }}\n                >\n                  <img src={this.imageUrl} alt={this.fullName} title={this.fullName} />\n                  <div class={'circle ' + this.circleColour}>\n                    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n                      <path stroke-color=\"1\" d=\"M11 11v-11h1v11h11v1h-11v11h-1v-11h-11v-1h11z\" />\n                    </svg>\n                  </div>\n                </div>\n              ) : null}\n            </div>\n            <h3 class=\"full-name\">{this.fullName}</h3>\n            <div class=\"job-title\">{this.jobTitle}</div>\n          </a>\n        </div>\n      );\n    } else {\n      return (\n        <div class={'container space-below-' + this.spaceBelow + ' text-colour-' + this.textColour + ' text-align-' + this.textAlign}>\n          <div\n            class={\n              'sleeve circle-' +\n              this.circle.toString() +\n              ' border-colour-' +\n              this.backgroundColour +\n              ' background-colour-' +\n              this.backgroundColour +\n              ' border-width-' +\n              this.borderWidth\n            }\n          >\n            {this.imageUrl != '' ? (\n              <div\n                data-ratio={this.ratio}\n                class={'image-wrap image-style-' + this.imageStyle + ' rounded-' + this.rounded.toString()}\n                style={{ 'background-image': \"url('\" + this.imageUrl + \"')\" }}\n              >\n                <img src={this.imageUrl} alt={this.fullName} title={this.fullName} />\n              </div>\n            ) : null}\n          </div>\n          <h3 class=\"full-name\">{this.fullName}</h3>\n          <div class=\"job-title\">{this.jobTitle}</div>\n        </div>\n      );\n    }\n  }\n}\n"],"version":3}

package/dist/components/biggive-boxed-content.js

@@ -8,10 +8,25 @@ const BiggiveBoxedContent$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveBoxe
         super();
         this.__registerHost();
         this.__attachShadow();
+        /**
+         * Space below component
+         */
         this.spaceBelow = 0;
+        /**
+         * Vertical padding
+         */
         this.verticalPadding = 3;
+        /**
+         * Horizontal padding
+         */
         this.horizontalPadding = 3;
+        /**
+         * Background colour
+         */
         this.backgroundColour = 'white';
+        /**
+         * Shadow
+         */
         this.shadow = true;
     }
     render() {

package/dist/components/biggive-boxed-content.js.map

@@ -1 +1 @@
-{"file":"biggive-boxed-content.js","mappings":";;AAAA,MAAM,sBAAsB,GAAG,ujGAAujG,CAAC;AACvlG,kCAAe,sBAAsB;;MCMxBA,qBAAmB;;;;;0BAID,CAAC;+BAII,CAAC;iCAIC,CAAC;gCAIF,OAAO;sBAIhB,IAAI;;IAE9B,MAAM;QACJ,QACE,4DACE,KAAK,EACH,8BAA8B;gBAC9B,IAAI,CAAC,gBAAgB;gBACrB,eAAe;gBACf,IAAI,CAAC,UAAU;gBACf,sBAAsB;gBACtB,IAAI,CAAC,iBAAiB;gBACtB,oBAAoB;gBACpB,IAAI,CAAC,eAAe;gBACpB,UAAU;gBACV,IAAI,CAAC,MAAM,IAGb,8DAAa,CACT,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveBoxedContent"],"sources":["src/components/biggive-boxed-content/biggive-boxed-content.scss?tag=biggive-boxed-content&encapsulation=shadow","src/components/biggive-boxed-content/biggive-boxed-content.tsx"],"sourcesContent":["@include backgrounds();\n\n:host {\n  display: content;\n}\n\n.container {\n  @include standard-font();\n  &.shadow-true {\n    @include lower-shadow();\n  }  \n}\n\n.horizontal-padding-1 { padding-left: $spacer-1; padding-right: $spacer-1; }\n.horizontal-padding-2 { padding-left: $spacer-2; padding-right: $spacer-2; }\n.horizontal-padding-3 { padding-left: $spacer-3; padding-right: $spacer-3; }\n.horizontal-padding-4 { padding-left: $spacer-4; padding-right: $spacer-4; }\n.horizontal-padding-5 { padding-left: $spacer-5; padding-right: $spacer-5; }\n.horizontal-padding-6 { padding-left: $spacer-6; padding-right: $spacer-6; }\n\n.vertical-padding-1 { padding-top: $spacer-1; padding-bottom: $spacer-1; }\n.vertical-padding-2 { padding-top: $spacer-2; padding-bottom: $spacer-2; }\n.vertical-padding-3 { padding-top: $spacer-3; padding-bottom: $spacer-3; }\n.vertical-padding-4 { padding-top: $spacer-4; padding-bottom: $spacer-4; }\n.vertical-padding-5 { padding-top: $spacer-5; padding-bottom: $spacer-5; }\n.vertical-padding-6 { padding-top: $spacer-6; padding-bottom: $spacer-6; }","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-boxed-content',\n  styleUrl: 'biggive-boxed-content.scss',\n  shadow: true,\n})\nexport class BiggiveBoxedContent {\n  /**\n   * Space below component\n   */\n  @Prop() spaceBelow: number = 0;\n  /**\n   * Vertical padding\n   */\n  @Prop() verticalPadding: number = 3;\n  /**\n   * Horizontal padding\n   */\n  @Prop() horizontalPadding: number = 3;\n  /**\n   * Background colour\n   */\n  @Prop() backgroundColour: string = 'white';\n  /**\n   * Shadow\n   */\n  @Prop() shadow: boolean = true;\n\n  render() {\n    return (\n      <div\n        class={\n          'container background-colour-' +\n          this.backgroundColour +\n          ' space-below-' +\n          this.spaceBelow +\n          ' horizontal-padding-' +\n          this.horizontalPadding +\n          ' vertical-padding-' +\n          this.verticalPadding +\n          ' shadow-' +\n          this.shadow\n        }\n      >\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"biggive-boxed-content.js","mappings":";;AAAA,MAAM,sBAAsB,GAAG,ujGAAujG,CAAC;AACvlG,kCAAe,sBAAsB;;MCMxBA,qBAAmB;IALhC;;;;;;;QASU,eAAU,GAAW,CAAC,CAAC;;;;QAIvB,oBAAe,GAAW,CAAC,CAAC;;;;QAI5B,sBAAiB,GAAW,CAAC,CAAC;;;;QAI9B,qBAAgB,GAAW,OAAO,CAAC;;;;QAInC,WAAM,GAAY,IAAI,CAAC;KAsBhC;IApBC,MAAM;QACJ,QACE,4DACE,KAAK,EACH,8BAA8B;gBAC9B,IAAI,CAAC,gBAAgB;gBACrB,eAAe;gBACf,IAAI,CAAC,UAAU;gBACf,sBAAsB;gBACtB,IAAI,CAAC,iBAAiB;gBACtB,oBAAoB;gBACpB,IAAI,CAAC,eAAe;gBACpB,UAAU;gBACV,IAAI,CAAC,MAAM,IAGb,8DAAa,CACT,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveBoxedContent"],"sources":["src/components/biggive-boxed-content/biggive-boxed-content.scss?tag=biggive-boxed-content&encapsulation=shadow","src/components/biggive-boxed-content/biggive-boxed-content.tsx"],"sourcesContent":["@include backgrounds();\n\n:host {\n  display: content;\n}\n\n.container {\n  @include standard-font();\n  &.shadow-true {\n    @include lower-shadow();\n  }  \n}\n\n.horizontal-padding-1 { padding-left: $spacer-1; padding-right: $spacer-1; }\n.horizontal-padding-2 { padding-left: $spacer-2; padding-right: $spacer-2; }\n.horizontal-padding-3 { padding-left: $spacer-3; padding-right: $spacer-3; }\n.horizontal-padding-4 { padding-left: $spacer-4; padding-right: $spacer-4; }\n.horizontal-padding-5 { padding-left: $spacer-5; padding-right: $spacer-5; }\n.horizontal-padding-6 { padding-left: $spacer-6; padding-right: $spacer-6; }\n\n.vertical-padding-1 { padding-top: $spacer-1; padding-bottom: $spacer-1; }\n.vertical-padding-2 { padding-top: $spacer-2; padding-bottom: $spacer-2; }\n.vertical-padding-3 { padding-top: $spacer-3; padding-bottom: $spacer-3; }\n.vertical-padding-4 { padding-top: $spacer-4; padding-bottom: $spacer-4; }\n.vertical-padding-5 { padding-top: $spacer-5; padding-bottom: $spacer-5; }\n.vertical-padding-6 { padding-top: $spacer-6; padding-bottom: $spacer-6; }","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-boxed-content',\n  styleUrl: 'biggive-boxed-content.scss',\n  shadow: true,\n})\nexport class BiggiveBoxedContent {\n  /**\n   * Space below component\n   */\n  @Prop() spaceBelow: number = 0;\n  /**\n   * Vertical padding\n   */\n  @Prop() verticalPadding: number = 3;\n  /**\n   * Horizontal padding\n   */\n  @Prop() horizontalPadding: number = 3;\n  /**\n   * Background colour\n   */\n  @Prop() backgroundColour: string = 'white';\n  /**\n   * Shadow\n   */\n  @Prop() shadow: boolean = true;\n\n  render() {\n    return (\n      <div\n        class={\n          'container background-colour-' +\n          this.backgroundColour +\n          ' space-below-' +\n          this.spaceBelow +\n          ' horizontal-padding-' +\n          this.horizontalPadding +\n          ' vertical-padding-' +\n          this.verticalPadding +\n          ' shadow-' +\n          this.shadow\n        }\n      >\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"],"version":3}

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

@@ -8,13 +8,18 @@ const BiggiveBrandedImage$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveBran
         super();
         this.__registerHost();
         this.__attachShadow();
+        /**
+         * Space below component
+         */
         this.spaceBelow = 0;
+        /**
+         * Full URL of a image.
+         */
         this.imageUrl = '';
+        /**
+         * Full URL of the logo.
+         */
         this.logoUrl = '';
-        this.slug = undefined;
-        this.charityName = undefined;
-        this.charityLocation = undefined;
-        this.charityUrl = undefined;
     }
     render() {
         return (h("div", { key: '23614f7c92777ff9cc505df3ba05e414266140ae', class: 'container space-below-' + this.spaceBelow }, h("div", { key: 'de69e9303308ff4be55295f6d98c8df514ed1379', class: "slug" }, this.slug), this.imageUrl !== undefined && this.imageUrl !== null ? (h("div", { class: "image-wrap" }, h("img", { src: this.imageUrl }))) : null, this.logoUrl !== undefined && this.logoUrl !== null ? h("div", { class: "logo-wrap", style: { 'background-image': "url('" + this.logoUrl + "')" } }) : null, this.charityName !== undefined && this.charityName !== null ? h("h3", { class: "title" }, this.charityName) : null, this.charityLocation !== undefined && this.charityLocation !== null ? h("div", { class: "charity-info" }, this.charityLocation) : null));

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

@@ -1 +1 @@
-{"file":"biggive-branded-image.js","mappings":";;AAAA,MAAM,sBAAsB,GAAG,6vDAA6vD,CAAC;AAC7xD,kCAAe,sBAAsB;;MCMxBA,qBAAmB;;;;;0BAID,CAAC;wBAIH,EAAE;uBAKH,EAAE;;;;;;IAuB5B,MAAM;QACJ,QACE,4DAAK,KAAK,EAAE,wBAAwB,GAAG,IAAI,CAAC,UAAU,IACnD,4DAAK,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,IAAI,CAAO,EACnC,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,IACpD,WAAK,KAAK,EAAC,YAAY,IACrB,WAAK,GAAG,EAAE,IAAI,CAAC,QAAQ,GAAI,CACvB,IACJ,IAAI,EACP,IAAI,CAAC,OAAO,KAAK,SAAS,IAAI,IAAI,CAAC,OAAO,KAAK,IAAI,GAAG,WAAK,KAAK,EAAC,WAAW,EAAC,KAAK,EAAE,EAAE,kBAAkB,EAAE,OAAO,GAAG,IAAI,CAAC,OAAO,GAAG,IAAI,EAAE,GAAQ,GAAG,IAAI,EAExJ,IAAI,CAAC,WAAW,KAAK,SAAS,IAAI,IAAI,CAAC,WAAW,KAAK,IAAI,GAAG,UAAI,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,WAAW,CAAM,GAAG,IAAI,EAC9G,IAAI,CAAC,eAAe,KAAK,SAAS,IAAI,IAAI,CAAC,eAAe,KAAK,IAAI,GAAG,WAAK,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,eAAe,CAAO,GAAG,IAAI,CAChI,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveBrandedImage"],"sources":["src/components/biggive-branded-image/biggive-branded-image.scss?tag=biggive-branded-image&encapsulation=shadow","src/components/biggive-branded-image/biggive-branded-image.tsx"],"sourcesContent":["@include image-alignment();\n@include spacers();\n\n:host {\n  display: contents;\n}\n\n.container {\n  @include standard-font();\n  position: relative;\n  .slug {\n    text-align: center;\n    font-weight: bold;\n    background-color: $colour-secondary-green;\n    color: $colour-black;\n    padding: $spacer-1 $spacer-3;\n    width: 100%;\n    margin: -17px auto 17px auto;\n    transform: translateY(50%);\n    box-sizing: border-box;\n  }\n\n  img {\n    width: 100%;\n  }\n\n  .logo-wrap {\n    border-radius: 50%;\n    width: 120px;\n    height: 120px;\n    transform: translateY(-50%);\n    margin-top: 30px;\n    margin-bottom: -30px; // Breathing space before charity name etc.\n    background-size: contain;\n    background-position: center center;\n    background-repeat: no-repeat;\n    background-color: #FFFFFF;\n\n    @media screen and (max-width: $screen-tablet-max) {\n      width: 100px;\n      height: 100px;\n    }\n\n    @media screen and (max-width: $screen-mobile-max) {\n      width: 70px;\n      height: 70px;\n      margin-top: 20px;\n    }\n  }\n\n  #charityName {\n    color: $colour-primary-blue;\n    display: block;\n    margin-bottom: 5px;\n    width: fit-content; // so link doesn't go full width\n  }\n\n  #charityName, .charity-info {\n    font-size: 17px;\n\n    @media screen and (max-width: $screen-tablet-max) {\n      font-size: 16px;\n    }\n\n    @media screen and (max-width: $screen-mobile-max) {\n      font-size: 15px;\n    }\n\n    @media screen and (max-width: $screen-mobile-small) {\n      font-size: 14px;\n    }\n  }\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-branded-image',\n  styleUrl: 'biggive-branded-image.scss',\n  shadow: true,\n})\nexport class BiggiveBrandedImage {\n  /**\n   * Space below component\n   */\n  @Prop() spaceBelow: number = 0;\n  /**\n   * Full URL of a image.\n   */\n  @Prop() imageUrl: string = '';\n\n  /**\n   * Full URL of the logo.\n   */\n  @Prop() logoUrl: string = '';\n\n  /**\n   * Slug\n   */\n  @Prop() slug: string;\n\n  /**\n   * Charity name\n   */\n  @Prop() charityName: string;\n\n  /**\n   * Charity location\n   */\n  @Prop() charityLocation: string;\n\n  /**\n   * Link to the charity's website\n   * @deprecated We should stop passing this soon, and will link to charity URLs alongside socials.\n   */\n  @Prop() charityUrl: string;\n\n  render() {\n    return (\n      <div class={'container space-below-' + this.spaceBelow}>\n        {<div class=\"slug\">{this.slug}</div>}\n        {this.imageUrl !== undefined && this.imageUrl !== null ? (\n          <div class=\"image-wrap\">\n            <img src={this.imageUrl} />\n          </div>\n        ) : null}\n        {this.logoUrl !== undefined && this.logoUrl !== null ? <div class=\"logo-wrap\" style={{ 'background-image': \"url('\" + this.logoUrl + \"')\" }}></div> : null}\n\n        {this.charityName !== undefined && this.charityName !== null ? <h3 class=\"title\">{this.charityName}</h3> : null}\n        {this.charityLocation !== undefined && this.charityLocation !== null ? <div class=\"charity-info\">{this.charityLocation}</div> : null}\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"biggive-branded-image.js","mappings":";;AAAA,MAAM,sBAAsB,GAAG,6vDAA6vD,CAAC;AAC7xD,kCAAe,sBAAsB;;MCMxBA,qBAAmB;IALhC;;;;;;;QASU,eAAU,GAAW,CAAC,CAAC;;;;QAIvB,aAAQ,GAAW,EAAE,CAAC;;;;QAKtB,YAAO,GAAW,EAAE,CAAC;KAuC9B;IAhBC,MAAM;QACJ,QACE,4DAAK,KAAK,EAAE,wBAAwB,GAAG,IAAI,CAAC,UAAU,IACnD,4DAAK,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,IAAI,CAAO,EACnC,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,IACpD,WAAK,KAAK,EAAC,YAAY,IACrB,WAAK,GAAG,EAAE,IAAI,CAAC,QAAQ,GAAI,CACvB,IACJ,IAAI,EACP,IAAI,CAAC,OAAO,KAAK,SAAS,IAAI,IAAI,CAAC,OAAO,KAAK,IAAI,GAAG,WAAK,KAAK,EAAC,WAAW,EAAC,KAAK,EAAE,EAAE,kBAAkB,EAAE,OAAO,GAAG,IAAI,CAAC,OAAO,GAAG,IAAI,EAAE,GAAQ,GAAG,IAAI,EAExJ,IAAI,CAAC,WAAW,KAAK,SAAS,IAAI,IAAI,CAAC,WAAW,KAAK,IAAI,GAAG,UAAI,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,WAAW,CAAM,GAAG,IAAI,EAC9G,IAAI,CAAC,eAAe,KAAK,SAAS,IAAI,IAAI,CAAC,eAAe,KAAK,IAAI,GAAG,WAAK,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,eAAe,CAAO,GAAG,IAAI,CAChI,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveBrandedImage"],"sources":["src/components/biggive-branded-image/biggive-branded-image.scss?tag=biggive-branded-image&encapsulation=shadow","src/components/biggive-branded-image/biggive-branded-image.tsx"],"sourcesContent":["@include image-alignment();\n@include spacers();\n\n:host {\n  display: contents;\n}\n\n.container {\n  @include standard-font();\n  position: relative;\n  .slug {\n    text-align: center;\n    font-weight: bold;\n    background-color: $colour-secondary-green;\n    color: $colour-black;\n    padding: $spacer-1 $spacer-3;\n    width: 100%;\n    margin: -17px auto 17px auto;\n    transform: translateY(50%);\n    box-sizing: border-box;\n  }\n\n  img {\n    width: 100%;\n  }\n\n  .logo-wrap {\n    border-radius: 50%;\n    width: 120px;\n    height: 120px;\n    transform: translateY(-50%);\n    margin-top: 30px;\n    margin-bottom: -30px; // Breathing space before charity name etc.\n    background-size: contain;\n    background-position: center center;\n    background-repeat: no-repeat;\n    background-color: #FFFFFF;\n\n    @media screen and (max-width: $screen-tablet-max) {\n      width: 100px;\n      height: 100px;\n    }\n\n    @media screen and (max-width: $screen-mobile-max) {\n      width: 70px;\n      height: 70px;\n      margin-top: 20px;\n    }\n  }\n\n  #charityName {\n    color: $colour-primary-blue;\n    display: block;\n    margin-bottom: 5px;\n    width: fit-content; // so link doesn't go full width\n  }\n\n  #charityName, .charity-info {\n    font-size: 17px;\n\n    @media screen and (max-width: $screen-tablet-max) {\n      font-size: 16px;\n    }\n\n    @media screen and (max-width: $screen-mobile-max) {\n      font-size: 15px;\n    }\n\n    @media screen and (max-width: $screen-mobile-small) {\n      font-size: 14px;\n    }\n  }\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-branded-image',\n  styleUrl: 'biggive-branded-image.scss',\n  shadow: true,\n})\nexport class BiggiveBrandedImage {\n  /**\n   * Space below component\n   */\n  @Prop() spaceBelow: number = 0;\n  /**\n   * Full URL of a image.\n   */\n  @Prop() imageUrl: string = '';\n\n  /**\n   * Full URL of the logo.\n   */\n  @Prop() logoUrl: string = '';\n\n  /**\n   * Slug\n   */\n  @Prop() slug: string;\n\n  /**\n   * Charity name\n   */\n  @Prop() charityName: string;\n\n  /**\n   * Charity location\n   */\n  @Prop() charityLocation: string;\n\n  /**\n   * Link to the charity's website\n   * @deprecated We should stop passing this soon, and will link to charity URLs alongside socials.\n   */\n  @Prop() charityUrl: string;\n\n  render() {\n    return (\n      <div class={'container space-below-' + this.spaceBelow}>\n        {<div class=\"slug\">{this.slug}</div>}\n        {this.imageUrl !== undefined && this.imageUrl !== null ? (\n          <div class=\"image-wrap\">\n            <img src={this.imageUrl} />\n          </div>\n        ) : null}\n        {this.logoUrl !== undefined && this.logoUrl !== null ? <div class=\"logo-wrap\" style={{ 'background-image': \"url('\" + this.logoUrl + \"')\" }}></div> : null}\n\n        {this.charityName !== undefined && this.charityName !== null ? <h3 class=\"title\">{this.charityName}</h3> : null}\n        {this.charityLocation !== undefined && this.charityLocation !== null ? <div class=\"charity-info\">{this.charityLocation}</div> : null}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/biggive-button2.js

@@ -9,19 +9,42 @@ const BiggiveButton = /*@__PURE__*/ proxyCustomElement(class BiggiveButton exten
         this.__registerHost();
         this.__attachShadow();
         this.doButtonClick = createEvent(this, "doButtonClick", 7);
-        this.handleButtonClick = (event) => {
-            this.doButtonClick.emit({ event: event, url: event.target.parentElement.href });
-        };
+        /**
+         * Space below component
+         */
         this.spaceBelow = 1;
+        /**
+         * Colour Scheme
+         */
         this.colourScheme = 'primary';
+        /**
+         * Text
+         */
         this.label = 'Click me';
-        this.url = undefined;
+        /**
+         * New Tab
+         */
         this.openInNewTab = false;
+        /**
+         * Display full width
+         */
         this.fullWidth = false;
+        /**
+         * Size
+         */
         this.size = 'medium';
+        /**
+         * Rounded corners
+         */
         this.rounded = false;
+        /**
+         * Centered
+         */
         this.centered = false;
         this.buttonId = undefined;
+        this.handleButtonClick = (event) => {
+            this.doButtonClick.emit({ event: event, url: event.target.parentElement.href });
+        };
     }
     render() {
         // We always want to have a href so that browsers will see this as a link and allow clicking with keybard.

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

@@ -1 +1 @@
-{"file":"biggive-button2.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,u/UAAu/U,CAAC;AACjhV,4BAAe,gBAAgB;;MCMlB,aAAa;;;;;;QAwDhB,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;0BA9C2B,CAAC;4BAKC,SAAS;qBAKhB,UAAU;;4BAUF,KAAK;yBAKR,KAAK;oBAKX,QAAQ;uBAKJ,KAAK;wBAKJ,KAAK;wBAEM,SAAS;;IAMhD,MAAM;;;;QAIJ,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,IAAI,qBAAqB,CAAC;QAE/C,QACE,4DAAK,KAAK,EAAE,wBAAwB,GAAG,IAAI,CAAC,UAAU,GAAG,YAAY,GAAG,IAAI,CAAC,QAAQ,IACnF,0DACE,IAAI,EAAC,QAAQ,EACb,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,IAAI,CAAC,YAAY,GAAG,QAAQ,GAAG,OAAO,EAC9C,EAAE,EAAE,IAAI,CAAC,QAAQ,EACjB,KAAK,EAAE,gBAAgB,GAAG,IAAI,CAAC,YAAY,GAAG,cAAc,GAAG,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,GAAG,QAAQ,GAAG,IAAI,CAAC,IAAI,GAAG,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,IAEvJ,6DAAM,OAAO,EAAE,IAAI,CAAC,iBAAiB,IAAG,IAAI,CAAC,KAAK,CAAQ,CACxD,CACA,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/biggive-button/biggive-button.scss?tag=biggive-button&encapsulation=shadow","src/components/biggive-button/biggive-button.tsx"],"sourcesContent":["@include spacers();\n\n:host {\n  display: contents;\n}\n\n.container {\n  @include standard-font();\n  a {\n    display: inline-block;\n    &.full-width-true {\n      display: block;\n    }\n  }\n  &.centered-true {\n    text-align: center;\n  }\n}\n\n.button {\n    @include button();\n    &.size-small {\n      @include button-small();\n    }\n\n    &.button.rounded-true {\n      @include button-rounded();\n    }\n}\n// brand-6 color ambiguity (for now keeping its definition outside of the brand colors loop)\n.button-clear-brand-6 {\n    color: $colour-brand-grey;\n    background-color: transparent;\n    text-decoration: underline;\n    border: 0;\n    padding-left: 0;\n    padding-right: 0;\n    &:hover {\n      text-decoration: none;\n      background-color: transparent;\n    }\n}\n\n@each $brand, $colour in $colours {\n  .button-#{$brand} {\n    color: $colour-white; // may be overridden by following rules. Later CSS rules have priority.\n    background-color: $colour;\n    border-color: $colour;\n    &:hover {\n      color: $colour;\n      background-color: $colour-white; // may be overriden by following rules\n    }\n  }\n}\n\n// not part of loop, 6 is deprecated\n.button-brand-6 {\n  color: $colour-white;\n  background-color: $colour-brand-grey;\n  border-color: $colour-brand-grey;\n  &:hover {\n    background-color: $colour-black;\n  }\n}\n\n.button-secondary {\n  color: $colour-black;\n  &:hover {\n    color: $colour-black;\n    background-color: $colour-white;\n    border-color: $colour-black;\n  }\n}\n\n.button-brand-4 {\n  &:hover {\n    background-color: $colour-black;\n  }\n}\n\n.button-brand-grey {\n  color: $colour-white;\n  &:hover {\n    background-color: $colour-black;\n  }\n}\n\n.button-brand-mhf-turquoise {\n  &:hover {\n    background-color: $colour-black;\n  }\n}\n\n.button-brand-afa-pink {\n  &:hover {\n    background-color: $colour-black;\n  }\n}\n\n.button-white {\n  color: $colour-primary-blue;\n  &:hover {\n    color: $colour-black;\n    background-color: $colour-secondary-green;\n  }\n}\n\n.button-black {\n  color: $colour-white;\n  &:hover {\n    background-color: $colour-white;\n  }\n}\n\n.button-grey-extra-light {\n  color: $colour-black;\n  &:hover {\n    background-color: $colour-black;\n  }\n}\n\n.button-grey-light {\n  color: $colour-black;\n  &:hover {\n    background-color: $colour-black;\n  }}\n\n.button-grey-medium {\n  color: $colour-white;\n  &:hover {\n    background-color: $colour-white;\n  }\n}\n\n.button-grey-dark {\n  color: $colour-white;\n  &:hover {\n    background-color: $colour-white;\n  }\n}\n\n.button-rounded {\n    @include button-rounded();\n }\n\n @each $brand, $colour in $colours {\n    .button-clear-#{$brand} {\n        color: $colour;\n        background-color: transparent;\n        text-decoration: underline;\n        border: 0;\n        padding-left: 0;\n        padding-right: 0;\n        &:hover {\n          color: $colour;\n          text-decoration: none;\n          background-color: transparent;\n        }\n    }\n}\n","import { Component, Event, EventEmitter, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-button',\n  styleUrl: 'biggive-button.scss',\n  shadow: true,\n})\nexport class BiggiveButton {\n  @Event({\n    eventName: 'doButtonClick',\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  doButtonClick: EventEmitter<{ event: object; url: string }>;\n\n  /**\n   * Space below component\n   */\n  @Prop() spaceBelow: number = 1;\n\n  /**\n   * Colour Scheme\n   */\n  @Prop() colourScheme: string = 'primary';\n\n  /**\n   * Text\n   */\n  @Prop() label: string = 'Click me';\n\n  /**\n   * URL\n   */\n  @Prop() url: string | undefined;\n\n  /**\n   * New Tab\n   */\n  @Prop() openInNewTab: boolean = false;\n\n  /**\n   * Display full width\n   */\n  @Prop() fullWidth: boolean = false;\n\n  /**\n   * Size\n   */\n  @Prop() size: string = 'medium';\n\n  /**\n   * Rounded corners\n   */\n  @Prop() rounded: boolean = false;\n\n  /**\n   * Centered\n   */\n  @Prop() centered: 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    // We always want to have a href so that browsers will see this as a link and allow clicking with keybard.\n    // If there's no or an empty href then it isn't possible to click by keyboard and we would have to handle keyboard\n    // interaction separately.\n    const href = this.url || 'javascript:void(0);';\n\n    return (\n      <div class={'container space-below-' + this.spaceBelow + ' centered-' + this.centered}>\n        <a\n          role=\"button\"\n          href={href}\n          target={this.openInNewTab ? '_blank' : '_self'}\n          id={this.buttonId}\n          class={'button button-' + this.colourScheme + ' full-width-' + this.fullWidth.toString() + ' size-' + this.size + ' rounded-' + this.rounded.toString()}\n        >\n          <span onClick={this.handleButtonClick}>{this.label}</span>\n        </a>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"biggive-button2.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,u/UAAu/U,CAAC;AACjhV,4BAAe,gBAAgB;;MCMlB,aAAa;IAL1B;;;;;;;;QAiBU,eAAU,GAAW,CAAC,CAAC;;;;QAKvB,iBAAY,GAAW,SAAS,CAAC;;;;QAKjC,UAAK,GAAW,UAAU,CAAC;;;;QAU3B,iBAAY,GAAY,KAAK,CAAC;;;;QAK9B,cAAS,GAAY,KAAK,CAAC;;;;QAK3B,SAAI,GAAW,QAAQ,CAAC;;;;QAKxB,YAAO,GAAY,KAAK,CAAC;;;;QAKzB,aAAQ,GAAY,KAAK,CAAC;QAE1B,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;KAsBH;IApBC,MAAM;;;;QAIJ,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,IAAI,qBAAqB,CAAC;QAE/C,QACE,4DAAK,KAAK,EAAE,wBAAwB,GAAG,IAAI,CAAC,UAAU,GAAG,YAAY,GAAG,IAAI,CAAC,QAAQ,IACnF,0DACE,IAAI,EAAC,QAAQ,EACb,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,IAAI,CAAC,YAAY,GAAG,QAAQ,GAAG,OAAO,EAC9C,EAAE,EAAE,IAAI,CAAC,QAAQ,EACjB,KAAK,EAAE,gBAAgB,GAAG,IAAI,CAAC,YAAY,GAAG,cAAc,GAAG,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,GAAG,QAAQ,GAAG,IAAI,CAAC,IAAI,GAAG,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,IAEvJ,6DAAM,OAAO,EAAE,IAAI,CAAC,iBAAiB,IAAG,IAAI,CAAC,KAAK,CAAQ,CACxD,CACA,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/biggive-button/biggive-button.scss?tag=biggive-button&encapsulation=shadow","src/components/biggive-button/biggive-button.tsx"],"sourcesContent":["@include spacers();\n\n:host {\n  display: contents;\n}\n\n.container {\n  @include standard-font();\n  a {\n    display: inline-block;\n    &.full-width-true {\n      display: block;\n    }\n  }\n  &.centered-true {\n    text-align: center;\n  }\n}\n\n.button {\n    @include button();\n    &.size-small {\n      @include button-small();\n    }\n\n    &.button.rounded-true {\n      @include button-rounded();\n    }\n}\n// brand-6 color ambiguity (for now keeping its definition outside of the brand colors loop)\n.button-clear-brand-6 {\n    color: $colour-brand-grey;\n    background-color: transparent;\n    text-decoration: underline;\n    border: 0;\n    padding-left: 0;\n    padding-right: 0;\n    &:hover {\n      text-decoration: none;\n      background-color: transparent;\n    }\n}\n\n@each $brand, $colour in $colours {\n  .button-#{$brand} {\n    color: $colour-white; // may be overridden by following rules. Later CSS rules have priority.\n    background-color: $colour;\n    border-color: $colour;\n    &:hover {\n      color: $colour;\n      background-color: $colour-white; // may be overriden by following rules\n    }\n  }\n}\n\n// not part of loop, 6 is deprecated\n.button-brand-6 {\n  color: $colour-white;\n  background-color: $colour-brand-grey;\n  border-color: $colour-brand-grey;\n  &:hover {\n    background-color: $colour-black;\n  }\n}\n\n.button-secondary {\n  color: $colour-black;\n  &:hover {\n    color: $colour-black;\n    background-color: $colour-white;\n    border-color: $colour-black;\n  }\n}\n\n.button-brand-4 {\n  &:hover {\n    background-color: $colour-black;\n  }\n}\n\n.button-brand-grey {\n  color: $colour-white;\n  &:hover {\n    background-color: $colour-black;\n  }\n}\n\n.button-brand-mhf-turquoise {\n  &:hover {\n    background-color: $colour-black;\n  }\n}\n\n.button-brand-afa-pink {\n  &:hover {\n    background-color: $colour-black;\n  }\n}\n\n.button-white {\n  color: $colour-primary-blue;\n  &:hover {\n    color: $colour-black;\n    background-color: $colour-secondary-green;\n  }\n}\n\n.button-black {\n  color: $colour-white;\n  &:hover {\n    background-color: $colour-white;\n  }\n}\n\n.button-grey-extra-light {\n  color: $colour-black;\n  &:hover {\n    background-color: $colour-black;\n  }\n}\n\n.button-grey-light {\n  color: $colour-black;\n  &:hover {\n    background-color: $colour-black;\n  }}\n\n.button-grey-medium {\n  color: $colour-white;\n  &:hover {\n    background-color: $colour-white;\n  }\n}\n\n.button-grey-dark {\n  color: $colour-white;\n  &:hover {\n    background-color: $colour-white;\n  }\n}\n\n.button-rounded {\n    @include button-rounded();\n }\n\n @each $brand, $colour in $colours {\n    .button-clear-#{$brand} {\n        color: $colour;\n        background-color: transparent;\n        text-decoration: underline;\n        border: 0;\n        padding-left: 0;\n        padding-right: 0;\n        &:hover {\n          color: $colour;\n          text-decoration: none;\n          background-color: transparent;\n        }\n    }\n}\n","import { Component, Event, EventEmitter, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-button',\n  styleUrl: 'biggive-button.scss',\n  shadow: true,\n})\nexport class BiggiveButton {\n  @Event({\n    eventName: 'doButtonClick',\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  doButtonClick: EventEmitter<{ event: object; url: string }>;\n\n  /**\n   * Space below component\n   */\n  @Prop() spaceBelow: number = 1;\n\n  /**\n   * Colour Scheme\n   */\n  @Prop() colourScheme: string = 'primary';\n\n  /**\n   * Text\n   */\n  @Prop() label: string = 'Click me';\n\n  /**\n   * URL\n   */\n  @Prop() url: string | undefined;\n\n  /**\n   * New Tab\n   */\n  @Prop() openInNewTab: boolean = false;\n\n  /**\n   * Display full width\n   */\n  @Prop() fullWidth: boolean = false;\n\n  /**\n   * Size\n   */\n  @Prop() size: string = 'medium';\n\n  /**\n   * Rounded corners\n   */\n  @Prop() rounded: boolean = false;\n\n  /**\n   * Centered\n   */\n  @Prop() centered: 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    // We always want to have a href so that browsers will see this as a link and allow clicking with keybard.\n    // If there's no or an empty href then it isn't possible to click by keyboard and we would have to handle keyboard\n    // interaction separately.\n    const href = this.url || 'javascript:void(0);';\n\n    return (\n      <div class={'container space-below-' + this.spaceBelow + ' centered-' + this.centered}>\n        <a\n          role=\"button\"\n          href={href}\n          target={this.openInNewTab ? '_blank' : '_self'}\n          id={this.buttonId}\n          class={'button button-' + this.colourScheme + ' full-width-' + this.fullWidth.toString() + ' size-' + this.size + ' rounded-' + this.rounded.toString()}\n        >\n          <span onClick={this.handleButtonClick}>{this.label}</span>\n        </a>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/biggive-call-to-action.js

@@ -9,25 +9,53 @@ const BiggiveCallToAction$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveCall
         super();
         this.__registerHost();
         this.__attachShadow();
+        /**
+         * Space above component
+         */
         this.spaceAbove = 0;
+        /**
+         * Space below component
+         */
         this.spaceBelow = 0;
+        /**
+         * Default text colour
+         */
         this.defaultTextColour = 'primary';
+        /**
+         * Slug size
+         */
         this.slugSize = 4;
+        /**
+         * Slug colour
+         */
         this.slugColour = '';
-        this.slug = undefined;
+        /**
+         * Main title colour
+         */
         this.mainTitleColour = '';
+        /**
+         * Main title size
+         */
         this.mainTitleSize = 2;
-        this.mainTitle = undefined;
+        /**
+         * Main title size
+         */
         this.subtitleSize = 4;
+        /**
+         * Subtitle colour
+         */
         this.subtitleColour = '';
-        this.subtitle = undefined;
+        /**
+         * Teaser colour
+         */
         this.teaserColour = '';
-        this.teaser = undefined;
-        this.primaryButtonUrl = undefined;
-        this.primaryButtonLabel = undefined;
+        /**
+         * Primary button Colour Scheme
+         */
         this.primaryButtonColourScheme = 'primary';
-        this.secondaryButtonUrl = undefined;
-        this.secondaryButtonLabel = undefined;
+        /**
+         * Secondary button Colour Scheme
+         */
         this.secondaryButtonColourScheme = 'primary';
     }
     render() {

package/dist/components/biggive-call-to-action.js.map

@@ -1 +1 @@
-{"file":"biggive-call-to-action.js","mappings":";;;AAAA,MAAM,sBAAsB,GAAG,khGAAkhG,CAAC;AACljG,kCAAe,sBAAsB;;MCMxBA,qBAAmB;;;;;0BAID,CAAC;0BAID,CAAC;iCAIM,SAAS;wBAKlB,CAAC;0BAIC,EAAE;;+BASG,EAAE;6BAIJ,CAAC;;4BASF,CAAC;8BAIC,EAAE;;4BAUJ,EAAE;;;;yCAoBW,SAAS;;;2CAeP,SAAS;;IAEvD,MAAM;QACJ,QACE,4DAAK,KAAK,EAAE,wBAAwB,GAAG,IAAI,CAAC,iBAAiB,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,IACnI,4DAAK,KAAK,EAAC,QAAQ,IACjB,4DAAK,KAAK,EAAC,cAAc,IACvB,4DAAK,KAAK,EAAE,eAAe,GAAG,IAAI,CAAC,QAAQ,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,IAAG,IAAI,CAAC,IAAI,CAAO,EAClG,2DAAI,KAAK,EAAE,gBAAgB,GAAG,IAAI,CAAC,aAAa,GAAG,eAAe,GAAG,IAAI,CAAC,eAAe,IAAG,IAAI,CAAC,SAAS,CAAM,EAChH,4DAAK,KAAK,EAAE,eAAe,GAAG,IAAI,CAAC,YAAY,GAAG,eAAe,GAAG,IAAI,CAAC,cAAc,IAAG,IAAI,CAAC,QAAQ,CAAO,EAC9G,4DAAK,KAAK,EAAE,qBAAqB,GAAG,IAAI,CAAC,YAAY,IAAG,IAAI,CAAC,MAAM,CAAO,EACzE,IAAI,CAAC,kBAAkB,IAAI,IAAI,IAAI,IAAI,CAAC,gBAAgB,IAAI,IAAI,IAC/D,WAAK,KAAK,EAAC,aAAa,IACtB,uCAA+B,IAAI,CAAC,yBAAyB,EAAE,GAAG,EAAE,IAAI,CAAC,gBAAgB,EAAE,KAAK,EAAE,IAAI,CAAC,kBAAkB,GAAmB,CACxI,IACJ,IAAI,EACP,IAAI,CAAC,oBAAoB,IAAI,IAAI,IAAI,IAAI,CAAC,kBAAkB,IAAI,IAAI,IACnE,WAAK,KAAK,EAAC,aAAa,IACtB,uCAA+B,IAAI,CAAC,2BAA2B,EAAE,GAAG,EAAE,IAAI,CAAC,kBAAkB,EAAE,KAAK,EAAE,IAAI,CAAC,oBAAoB,GAAmB,CAC9I,IACJ,IAAI,CACJ,CACF,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveCallToAction"],"sources":["src/components/biggive-call-to-action/biggive-call-to-action.scss?tag=biggive-call-to-action&encapsulation=shadow","src/components/biggive-call-to-action/biggive-call-to-action.tsx"],"sourcesContent":["@include headings();\n@include spacers();\n@include text-colours();\n\n:host {\n  display: contents;\n  @include standard-font();\n}\n\n.container {\n  @include section-container();\n  position: relative;\n  text-align: center;\n}\n\n\n.content-wrap {\n  .slug {\n    margin: 0;\n    padding: 0;\n  }\n  h2 {\n    margin: 0 0 $spacer-1 0;\n    padding: 0;\n  }\n  .subtitle {\n    margin: 0 0 $spacer-1 0;\n    padding: 0;\n  }\n  .teaser {\n    margin: $spacer-3 auto $spacer-3 auto;\n    max-width: 400px;\n    padding: 0;\n  }\n}\n\n@media screen and (max-width: $screen-mobile-max) {\n  .content-wrap {\n    text-align: right\n  }\n  h2 {\n    padding: 40px 0;\n  }\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-call-to-action',\n  styleUrl: 'biggive-call-to-action.scss',\n  shadow: true,\n})\nexport class BiggiveCallToAction {\n  /**\n   * Space above component\n   */\n  @Prop() spaceAbove: number = 0;\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   * Slug size\n   */\n  @Prop() slugSize: number = 4;\n  /**\n   * Slug colour\n   */\n  @Prop() slugColour: string = '';\n  /**\n   * Slug\n   */\n  @Prop() slug: string;\n\n  /**\n   * Main title colour\n   */\n  @Prop() mainTitleColour: string = '';\n  /**\n   * Main title size\n   */\n  @Prop() mainTitleSize: number = 2;\n  /**\n   * Main title\n   */\n  @Prop() mainTitle: string;\n\n  /**\n   * Main title size\n   */\n  @Prop() subtitleSize: number = 4;\n  /**\n   * Subtitle colour\n   */\n  @Prop() subtitleColour: string = '';\n\n  /**\n   * Subtitle\n   */\n  @Prop() subtitle: string;\n\n  /**\n   * Teaser colour\n   */\n  @Prop() teaserColour: string = '';\n\n  /**\n   * Teaser\n   */\n  @Prop() teaser: string;\n\n  /**\n   * Primary button Url\n   */\n  @Prop() primaryButtonUrl: string;\n\n  /**\n   * Primary button Label\n   */\n  @Prop() primaryButtonLabel: string;\n\n  /**\n   * Primary button Colour Scheme\n   */\n  @Prop() primaryButtonColourScheme: string = 'primary';\n\n  /**\n   * Secondary button Url\n   */\n  @Prop() secondaryButtonUrl: string;\n\n  /**\n   * Secondary button Label\n   */\n  @Prop() secondaryButtonLabel: string;\n\n  /**\n   * Secondary button Colour Scheme\n   */\n  @Prop() secondaryButtonColourScheme: string = 'primary';\n\n  render() {\n    return (\n      <div class={'container text-colour-' + this.defaultTextColour + ' space-above-' + this.spaceAbove + ' space-below-' + this.spaceBelow}>\n        <div class=\"sleeve\">\n          <div class=\"content-wrap\">\n            <div class={'slug heading-' + this.slugSize + ' text-colour-' + this.slugColour}>{this.slug}</div>\n            <h2 class={'title heading-' + this.mainTitleSize + ' text-colour-' + this.mainTitleColour}>{this.mainTitle}</h2>\n            <div class={'slug heading-' + this.subtitleSize + ' text-colour-' + this.subtitleColour}>{this.subtitle}</div>\n            <div class={'teaser text-colour-' + this.teaserColour}>{this.teaser}</div>\n            {this.primaryButtonLabel != null && this.primaryButtonUrl != null ? (\n              <div class=\"button-wrap\">\n                <biggive-button colour-scheme={this.primaryButtonColourScheme} url={this.primaryButtonUrl} label={this.primaryButtonLabel}></biggive-button>\n              </div>\n            ) : null}\n            {this.secondaryButtonLabel != null && this.secondaryButtonUrl != null ? (\n              <div class=\"button-wrap\">\n                <biggive-button colour-scheme={this.secondaryButtonColourScheme} url={this.secondaryButtonUrl} label={this.secondaryButtonLabel}></biggive-button>\n              </div>\n            ) : null}\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"biggive-call-to-action.js","mappings":";;;AAAA,MAAM,sBAAsB,GAAG,khGAAkhG,CAAC;AACljG,kCAAe,sBAAsB;;MCMxBA,qBAAmB;IALhC;;;;;;;QASU,eAAU,GAAW,CAAC,CAAC;;;;QAIvB,eAAU,GAAW,CAAC,CAAC;;;;QAIvB,sBAAiB,GAAW,SAAS,CAAC;;;;QAKtC,aAAQ,GAAW,CAAC,CAAC;;;;QAIrB,eAAU,GAAW,EAAE,CAAC;;;;QASxB,oBAAe,GAAW,EAAE,CAAC;;;;QAI7B,kBAAa,GAAW,CAAC,CAAC;;;;QAS1B,iBAAY,GAAW,CAAC,CAAC;;;;QAIzB,mBAAc,GAAW,EAAE,CAAC;;;;QAU5B,iBAAY,GAAW,EAAE,CAAC;;;;QAoB1B,8BAAyB,GAAW,SAAS,CAAC;;;;QAe9C,gCAA2B,GAAW,SAAS,CAAC;KA0BzD;IAxBC,MAAM;QACJ,QACE,4DAAK,KAAK,EAAE,wBAAwB,GAAG,IAAI,CAAC,iBAAiB,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,IACnI,4DAAK,KAAK,EAAC,QAAQ,IACjB,4DAAK,KAAK,EAAC,cAAc,IACvB,4DAAK,KAAK,EAAE,eAAe,GAAG,IAAI,CAAC,QAAQ,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,IAAG,IAAI,CAAC,IAAI,CAAO,EAClG,2DAAI,KAAK,EAAE,gBAAgB,GAAG,IAAI,CAAC,aAAa,GAAG,eAAe,GAAG,IAAI,CAAC,eAAe,IAAG,IAAI,CAAC,SAAS,CAAM,EAChH,4DAAK,KAAK,EAAE,eAAe,GAAG,IAAI,CAAC,YAAY,GAAG,eAAe,GAAG,IAAI,CAAC,cAAc,IAAG,IAAI,CAAC,QAAQ,CAAO,EAC9G,4DAAK,KAAK,EAAE,qBAAqB,GAAG,IAAI,CAAC,YAAY,IAAG,IAAI,CAAC,MAAM,CAAO,EACzE,IAAI,CAAC,kBAAkB,IAAI,IAAI,IAAI,IAAI,CAAC,gBAAgB,IAAI,IAAI,IAC/D,WAAK,KAAK,EAAC,aAAa,IACtB,uCAA+B,IAAI,CAAC,yBAAyB,EAAE,GAAG,EAAE,IAAI,CAAC,gBAAgB,EAAE,KAAK,EAAE,IAAI,CAAC,kBAAkB,GAAmB,CACxI,IACJ,IAAI,EACP,IAAI,CAAC,oBAAoB,IAAI,IAAI,IAAI,IAAI,CAAC,kBAAkB,IAAI,IAAI,IACnE,WAAK,KAAK,EAAC,aAAa,IACtB,uCAA+B,IAAI,CAAC,2BAA2B,EAAE,GAAG,EAAE,IAAI,CAAC,kBAAkB,EAAE,KAAK,EAAE,IAAI,CAAC,oBAAoB,GAAmB,CAC9I,IACJ,IAAI,CACJ,CACF,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveCallToAction"],"sources":["src/components/biggive-call-to-action/biggive-call-to-action.scss?tag=biggive-call-to-action&encapsulation=shadow","src/components/biggive-call-to-action/biggive-call-to-action.tsx"],"sourcesContent":["@include headings();\n@include spacers();\n@include text-colours();\n\n:host {\n  display: contents;\n  @include standard-font();\n}\n\n.container {\n  @include section-container();\n  position: relative;\n  text-align: center;\n}\n\n\n.content-wrap {\n  .slug {\n    margin: 0;\n    padding: 0;\n  }\n  h2 {\n    margin: 0 0 $spacer-1 0;\n    padding: 0;\n  }\n  .subtitle {\n    margin: 0 0 $spacer-1 0;\n    padding: 0;\n  }\n  .teaser {\n    margin: $spacer-3 auto $spacer-3 auto;\n    max-width: 400px;\n    padding: 0;\n  }\n}\n\n@media screen and (max-width: $screen-mobile-max) {\n  .content-wrap {\n    text-align: right\n  }\n  h2 {\n    padding: 40px 0;\n  }\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-call-to-action',\n  styleUrl: 'biggive-call-to-action.scss',\n  shadow: true,\n})\nexport class BiggiveCallToAction {\n  /**\n   * Space above component\n   */\n  @Prop() spaceAbove: number = 0;\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   * Slug size\n   */\n  @Prop() slugSize: number = 4;\n  /**\n   * Slug colour\n   */\n  @Prop() slugColour: string = '';\n  /**\n   * Slug\n   */\n  @Prop() slug: string;\n\n  /**\n   * Main title colour\n   */\n  @Prop() mainTitleColour: string = '';\n  /**\n   * Main title size\n   */\n  @Prop() mainTitleSize: number = 2;\n  /**\n   * Main title\n   */\n  @Prop() mainTitle: string;\n\n  /**\n   * Main title size\n   */\n  @Prop() subtitleSize: number = 4;\n  /**\n   * Subtitle colour\n   */\n  @Prop() subtitleColour: string = '';\n\n  /**\n   * Subtitle\n   */\n  @Prop() subtitle: string;\n\n  /**\n   * Teaser colour\n   */\n  @Prop() teaserColour: string = '';\n\n  /**\n   * Teaser\n   */\n  @Prop() teaser: string;\n\n  /**\n   * Primary button Url\n   */\n  @Prop() primaryButtonUrl: string;\n\n  /**\n   * Primary button Label\n   */\n  @Prop() primaryButtonLabel: string;\n\n  /**\n   * Primary button Colour Scheme\n   */\n  @Prop() primaryButtonColourScheme: string = 'primary';\n\n  /**\n   * Secondary button Url\n   */\n  @Prop() secondaryButtonUrl: string;\n\n  /**\n   * Secondary button Label\n   */\n  @Prop() secondaryButtonLabel: string;\n\n  /**\n   * Secondary button Colour Scheme\n   */\n  @Prop() secondaryButtonColourScheme: string = 'primary';\n\n  render() {\n    return (\n      <div class={'container text-colour-' + this.defaultTextColour + ' space-above-' + this.spaceAbove + ' space-below-' + this.spaceBelow}>\n        <div class=\"sleeve\">\n          <div class=\"content-wrap\">\n            <div class={'slug heading-' + this.slugSize + ' text-colour-' + this.slugColour}>{this.slug}</div>\n            <h2 class={'title heading-' + this.mainTitleSize + ' text-colour-' + this.mainTitleColour}>{this.mainTitle}</h2>\n            <div class={'slug heading-' + this.subtitleSize + ' text-colour-' + this.subtitleColour}>{this.subtitle}</div>\n            <div class={'teaser text-colour-' + this.teaserColour}>{this.teaser}</div>\n            {this.primaryButtonLabel != null && this.primaryButtonUrl != null ? (\n              <div class=\"button-wrap\">\n                <biggive-button colour-scheme={this.primaryButtonColourScheme} url={this.primaryButtonUrl} label={this.primaryButtonLabel}></biggive-button>\n              </div>\n            ) : null}\n            {this.secondaryButtonLabel != null && this.secondaryButtonUrl != null ? (\n              <div class=\"button-wrap\">\n                <biggive-button colour-scheme={this.secondaryButtonColourScheme} url={this.secondaryButtonUrl} label={this.secondaryButtonLabel}></biggive-button>\n              </div>\n            ) : null}\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/biggive-campaign-card-filter-grid.js

@@ -30,6 +30,44 @@ const BiggiveCampaignCardFilterGrid$1 = /*@__PURE__*/ proxyCustomElement(class B
         this.newSelectedFilterCategory = null;
         this.newSelectedFilterBeneficiary = null;
         this.newSelectedFilterLocation = null;
+        /**
+         * Space below component
+         */
+        this.spaceBelow = 0;
+        /**
+         * Intro
+         */
+        this.intro = 'Find a charity or project';
+        /**
+         * Optional search text prop. Useful for pre-populating the search field
+         * when the page is loaded with a search term already existing in the URL.
+         * This can happen when sharing links, or if a donor goes to a campaign page
+         * after searching, and then returns to the search results. In such a case,
+         * the search box text will clear, unless we use this prop to populate it on
+         * rendering. DON-652.
+         */
+        this.searchText = null;
+        /**
+         * Defines the text displayed as the placeholder in the input field
+         * before the user types anything
+         */
+        this.placeholderText = 'Search';
+        /**
+         * Defines the text on the search button
+         */
+        this.buttonText = 'Search';
+        /**
+         * For injecting the chosen category to filter by, as per the comment above for `selectedSortByOption`.
+         */
+        this.selectedFilterCategory = null;
+        /**
+         * For injecting the chosen beneficiary to filter by, as per the comment above for `selectedSortByOption`.
+         */
+        this.selectedFilterBeneficiary = null;
+        /**
+         * For injecting the chosen location to filter by, as per the comment above for `selectedSortByOption`.
+         */
+        this.selectedFilterLocation = null;
         this.categoryFilterSelectionChanged = (value) => {
             this.newSelectedFilterCategory = value;
         };
@@ -119,19 +157,6 @@ const BiggiveCampaignCardFilterGrid$1 = /*@__PURE__*/ proxyCustomElement(class B
                 filterLocation: null,
             });
         };
-        this.spaceBelow = 0;
-        this.intro = 'Find a charity or project';
-        this.searchText = null;
-        this.placeholderText = 'Search';
-        this.buttonText = 'Search';
-        this.categoryOptions = undefined;
-        this.beneficiaryOptions = undefined;
-        this.locationOptions = undefined;
-        this.selectedSortByOption = undefined;
-        this.selectedFilterCategory = null;
-        this.selectedFilterBeneficiary = null;
-        this.selectedFilterLocation = null;
-        this.filtersApplied = undefined;
     }
     /**
      * Typically on non-negligible scroll away from the search area.