@biggive/components 202501021532.0.0 → 202501071646.0.0

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

@@ -1 +1 @@
-{"file":"biggive-page-section.js","mappings":";;AAAA,MAAM,qBAAqB,GAAG,02QAA02Q,CAAC;AACz4Q,iCAAe,qBAAqB;;MCMvBA,oBAAkB;;;;;0BAIA,CAAC;+BAKI,UAAU;kCAKP,UAAU;;wBAUpB,GAAG;gCAKM,KAAK;;IAEzC,MAAM;QACJ,QACE,4DACE,KAAK,EACH,sBAAsB;gBACtB,IAAI,CAAC,QAAQ;gBACb,eAAe;gBACf,IAAI,CAAC,UAAU;gBACf,oBAAoB;gBACpB,IAAI,CAAC,YAAY;gBACjB,aAAa;gBACb,IAAI,CAAC,eAAe;gBACpB,gBAAgB;gBAChB,IAAI,CAAC,kBAAkB;iBACtB,IAAI,CAAC,gBAAgB,GAAG,aAAa,GAAG,EAAE,CAAC,IAG9C,4DAAK,KAAK,EAAC,QAAQ,IACjB,8DAAa,CACT,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggivePageSection"],"sources":["src/components/biggive-page-section/biggive-page-section.scss?tag=biggive-page-section&encapsulation=shadow","src/components/biggive-page-section/biggive-page-section.tsx"],"sourcesContent":["@include spacers();\n\n:host {\n  display: contents;\n}\n\n.container {\n  @include standard-font();\n  overflow: hidden;\n  position: relative;\n  text-align: center;\n  .sleeve {\n    @include section-container();\n    padding: $spacer-4;\n\n    @media screen and (max-width: $screen-desktop-max) {\n      // similar to e.g. biggive-hero-image which was set to use $spacer-3 first.\n      padding: $spacer-3;\n    }\n  }\n}\n\n.container.full-bleed {\n  // from https://stackoverflow.com/questions/22083157/extend-background-color-of-header-beyond-container-with-css\n  box-shadow: 0 0 0 100vmax $colour-primary-blue;\n  clip-path: inset(0 -100vmax);\n}\n\n.container.style-top-crop-right:before {\n  content: '';\n  display: block;\n  height: 75px;\n  clip-path: polygon(0 0, 0% 100%, 100% 100%);\n  transform: translateY(1px);\n}\n\n.container.style-top-crop-left:before {\n  content: '';\n  display: block;\n  height: 75px;\n  clip-path: polygon(100% 0, 100% 0%, 100% 100%, 0 100%);\n  transform: translateY(1px);\n}\n\n.container.style-bottom-crop-right:after {\n  content: '';\n  display: block;\n  height: 75px;\n  clip-path: polygon(0 0, 100% 0, 0 100%);\n  transform: translateY(-1px);\n}\n\n.container.style-bottom-crop-left:after {\n  content: '';\n  display: block;\n  height: 75px;\n  clip-path: polygon(0 0, 100% 0, 100% 100%);\n  transform: translateY(-1px);\n}\n\n.container .sleeve {\n  position: relative;\n  text-align: left;\n}\n\n.container.max-width-10 .sleeve { @include max-width-10(); }\n.container.max-width-15 .sleeve { @include max-width-15(); }\n.container.max-width-20 .sleeve { @include max-width-20(); }\n.container.max-width-25 .sleeve { @include max-width-25(); }\n.container.max-width-30 .sleeve { @include max-width-30(); }\n.container.max-width-35 .sleeve { @include max-width-35(); }\n.container.max-width-40 .sleeve { @include max-width-40(); }\n.container.max-width-45 .sleeve { @include max-width-45(); }\n.container.max-width-50 .sleeve { @include max-width-50(); }\n.container.max-width-55 .sleeve { @include max-width-55(); }\n.container.max-width-60 .sleeve { @include max-width-60(); }\n.container.max-width-65 .sleeve { @include max-width-65(); }\n.container.max-width-70 .sleeve { @include max-width-70(); }\n.container.max-width-75 .sleeve { @include max-width-75(); }\n.container.max-width-80 .sleeve { @include max-width-80(); }\n.container.max-width-85 .sleeve { @include max-width-85(); }\n.container.max-width-90 .sleeve { @include max-width-90(); }\n.container.max-width-95 .sleeve { @include max-width-95(); }\n\n\n\n.container .sleeve:before {\n  content: '';\n  position: absolute;\n  z-index: -1;\n  left: 50%;\n  transform: translateX(-50%);\n  width: 100vw;\n  top: 0;\n  bottom: 0;\n}\n\n@each $brand, $colour in $colours {\n  .container.background-color-#{$brand}:before,\n  .container.background-color-#{$brand}:after,\n  .container.background-color-#{$brand} .sleeve:before,\n  .container.background-color-#{$brand} .sleeve {\n    background-color: $colour;\n    @if $brand == 'white' or $brand == 'grey-extra-light' or $brand == 'grey-light' {\n      color: $colour-black;\n    } @else {\n      color: $colour-white;\n    }\n  }\n}\n\n.container.background-color-brand-6:before,\n.container.background-color-brand-6:after,\n.container.background-color-brand-6 .sleeve:before,\n.container.background-color-brand-6 .sleeve {\n  background-color: $colour-brand-mhf-turquoise;\n  color: $colour-white;\n}\n\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-page-section',\n  styleUrl: 'biggive-page-section.scss',\n  shadow: true,\n})\nexport class BiggivePageSection {\n  /**\n   * Space below component\n   */\n  @Prop() spaceBelow: number = 0;\n\n  /**\n   * Section style top\n   */\n  @Prop() sectionStyleTop: string = 'straight';\n\n  /**\n   * Section style bottom\n   */\n  @Prop() sectionStyleBottom: string = 'straight';\n\n  /**\n   * Colour scheme\n   */\n  @Prop() colourScheme: string;\n\n  /**\n   * Width\n   */\n  @Prop() maxWidth: number = 100;\n\n  /**\n   * Bleeds the primary brand colour to the left and right edge of the viewport, even if used within a containing block element.\n   */\n  @Prop() primaryFullBleed: boolean = false;\n\n  render() {\n    return (\n      <div\n        class={\n          'container max-width-' +\n          this.maxWidth +\n          ' space-below-' +\n          this.spaceBelow +\n          ' background-color-' +\n          this.colourScheme +\n          ' style-top-' +\n          this.sectionStyleTop +\n          ' style-bottom-' +\n          this.sectionStyleBottom +\n          (this.primaryFullBleed ? ' full-bleed' : '')\n        }\n      >\n        <div class=\"sleeve\">\n          <slot></slot>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"biggive-page-section.js","mappings":";;AAAA,MAAM,qBAAqB,GAAG,02QAA02Q,CAAC;AACz4Q,iCAAe,qBAAqB;;MCMvBA,oBAAkB;IAL/B;;;;;;;QASU,eAAU,GAAW,CAAC,CAAC;;;;QAKvB,oBAAe,GAAW,UAAU,CAAC;;;;QAKrC,uBAAkB,GAAW,UAAU,CAAC;;;;QAUxC,aAAQ,GAAW,GAAG,CAAC;;;;QAKvB,qBAAgB,GAAY,KAAK,CAAC;KAyB3C;IAvBC,MAAM;QACJ,QACE,4DACE,KAAK,EACH,sBAAsB;gBACtB,IAAI,CAAC,QAAQ;gBACb,eAAe;gBACf,IAAI,CAAC,UAAU;gBACf,oBAAoB;gBACpB,IAAI,CAAC,YAAY;gBACjB,aAAa;gBACb,IAAI,CAAC,eAAe;gBACpB,gBAAgB;gBAChB,IAAI,CAAC,kBAAkB;iBACtB,IAAI,CAAC,gBAAgB,GAAG,aAAa,GAAG,EAAE,CAAC,IAG9C,4DAAK,KAAK,EAAC,QAAQ,IACjB,8DAAa,CACT,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggivePageSection"],"sources":["src/components/biggive-page-section/biggive-page-section.scss?tag=biggive-page-section&encapsulation=shadow","src/components/biggive-page-section/biggive-page-section.tsx"],"sourcesContent":["@include spacers();\n\n:host {\n  display: contents;\n}\n\n.container {\n  @include standard-font();\n  overflow: hidden;\n  position: relative;\n  text-align: center;\n  .sleeve {\n    @include section-container();\n    padding: $spacer-4;\n\n    @media screen and (max-width: $screen-desktop-max) {\n      // similar to e.g. biggive-hero-image which was set to use $spacer-3 first.\n      padding: $spacer-3;\n    }\n  }\n}\n\n.container.full-bleed {\n  // from https://stackoverflow.com/questions/22083157/extend-background-color-of-header-beyond-container-with-css\n  box-shadow: 0 0 0 100vmax $colour-primary-blue;\n  clip-path: inset(0 -100vmax);\n}\n\n.container.style-top-crop-right:before {\n  content: '';\n  display: block;\n  height: 75px;\n  clip-path: polygon(0 0, 0% 100%, 100% 100%);\n  transform: translateY(1px);\n}\n\n.container.style-top-crop-left:before {\n  content: '';\n  display: block;\n  height: 75px;\n  clip-path: polygon(100% 0, 100% 0%, 100% 100%, 0 100%);\n  transform: translateY(1px);\n}\n\n.container.style-bottom-crop-right:after {\n  content: '';\n  display: block;\n  height: 75px;\n  clip-path: polygon(0 0, 100% 0, 0 100%);\n  transform: translateY(-1px);\n}\n\n.container.style-bottom-crop-left:after {\n  content: '';\n  display: block;\n  height: 75px;\n  clip-path: polygon(0 0, 100% 0, 100% 100%);\n  transform: translateY(-1px);\n}\n\n.container .sleeve {\n  position: relative;\n  text-align: left;\n}\n\n.container.max-width-10 .sleeve { @include max-width-10(); }\n.container.max-width-15 .sleeve { @include max-width-15(); }\n.container.max-width-20 .sleeve { @include max-width-20(); }\n.container.max-width-25 .sleeve { @include max-width-25(); }\n.container.max-width-30 .sleeve { @include max-width-30(); }\n.container.max-width-35 .sleeve { @include max-width-35(); }\n.container.max-width-40 .sleeve { @include max-width-40(); }\n.container.max-width-45 .sleeve { @include max-width-45(); }\n.container.max-width-50 .sleeve { @include max-width-50(); }\n.container.max-width-55 .sleeve { @include max-width-55(); }\n.container.max-width-60 .sleeve { @include max-width-60(); }\n.container.max-width-65 .sleeve { @include max-width-65(); }\n.container.max-width-70 .sleeve { @include max-width-70(); }\n.container.max-width-75 .sleeve { @include max-width-75(); }\n.container.max-width-80 .sleeve { @include max-width-80(); }\n.container.max-width-85 .sleeve { @include max-width-85(); }\n.container.max-width-90 .sleeve { @include max-width-90(); }\n.container.max-width-95 .sleeve { @include max-width-95(); }\n\n\n\n.container .sleeve:before {\n  content: '';\n  position: absolute;\n  z-index: -1;\n  left: 50%;\n  transform: translateX(-50%);\n  width: 100vw;\n  top: 0;\n  bottom: 0;\n}\n\n@each $brand, $colour in $colours {\n  .container.background-color-#{$brand}:before,\n  .container.background-color-#{$brand}:after,\n  .container.background-color-#{$brand} .sleeve:before,\n  .container.background-color-#{$brand} .sleeve {\n    background-color: $colour;\n    @if $brand == 'white' or $brand == 'grey-extra-light' or $brand == 'grey-light' {\n      color: $colour-black;\n    } @else {\n      color: $colour-white;\n    }\n  }\n}\n\n.container.background-color-brand-6:before,\n.container.background-color-brand-6:after,\n.container.background-color-brand-6 .sleeve:before,\n.container.background-color-brand-6 .sleeve {\n  background-color: $colour-brand-mhf-turquoise;\n  color: $colour-white;\n}\n\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-page-section',\n  styleUrl: 'biggive-page-section.scss',\n  shadow: true,\n})\nexport class BiggivePageSection {\n  /**\n   * Space below component\n   */\n  @Prop() spaceBelow: number = 0;\n\n  /**\n   * Section style top\n   */\n  @Prop() sectionStyleTop: string = 'straight';\n\n  /**\n   * Section style bottom\n   */\n  @Prop() sectionStyleBottom: string = 'straight';\n\n  /**\n   * Colour scheme\n   */\n  @Prop() colourScheme: string;\n\n  /**\n   * Width\n   */\n  @Prop() maxWidth: number = 100;\n\n  /**\n   * Bleeds the primary brand colour to the left and right edge of the viewport, even if used within a containing block element.\n   */\n  @Prop() primaryFullBleed: boolean = false;\n\n  render() {\n    return (\n      <div\n        class={\n          'container max-width-' +\n          this.maxWidth +\n          ' space-below-' +\n          this.spaceBelow +\n          ' background-color-' +\n          this.colourScheme +\n          ' style-top-' +\n          this.sectionStyleTop +\n          ' style-bottom-' +\n          this.sectionStyleBottom +\n          (this.primaryFullBleed ? ' full-bleed' : '')\n        }\n      >\n        <div class=\"sleeve\">\n          <slot></slot>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/biggive-popup2.js

@@ -8,6 +8,10 @@ const BiggivePopup = /*@__PURE__*/ proxyCustomElement(class BiggivePopup extends
         super();
         this.__registerHost();
         this.__attachShadow();
+        /**
+         * Function to execute when the modal is closed, whether by the user or programmatically.
+         */
+        this.modalClosedCallback = () => { };
         this.closeFromWithin = (event) => {
             if (event.target.classList.contains('popup') || event.target.classList.contains('close')) {
                 this.popup.setAttribute('data-visible', 'false');
@@ -15,7 +19,6 @@ const BiggivePopup = /*@__PURE__*/ proxyCustomElement(class BiggivePopup extends
                 this.modalClosedCallback();
             }
         };
-        this.modalClosedCallback = () => { };
     }
     async openFromOutside() {
         this.popup.setAttribute('data-visible', 'true');

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

@@ -1 +1 @@
-{"file":"biggive-popup2.js","mappings":";;AAAA,MAAM,eAAe,GAAG,gxBAAgxB,CAAC;AACzyB,2BAAe,eAAe;;MCMjB,YAAY;;;;;QAsBf,oBAAe,GAAG,CAAC,KAAU;YACnC,IAAI,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE;gBACxF,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,cAAc,EAAE,OAAO,CAAC,CAAC;gBACjD,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;gBAC1C,IAAI,CAAC,mBAAmB,EAAE,CAAC;aAC5B;SACF,CAAC;mCAtBwC,SAAQ;;IAGlD,MAAM,eAAe;QACnB,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC;QAChD,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;QACzC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;KACpB;IAGD,MAAM,gBAAgB;QACpB,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,cAAc,EAAE,OAAO,CAAC,CAAC;QACjD,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;QAC1C,IAAI,CAAC,mBAAmB,EAAE,CAAC;KAC5B;IAUD,MAAM;QACJ,QACE,4DAAK,KAAK,EAAC,OAAO,EAAC,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,KAAK,GAAG,EAAoB,CAAC,EAAE,QAAQ,EAAC,IAAI,EAAC,OAAO,EAAE,IAAI,CAAC,eAAe,IAC5G,4DAAK,KAAK,EAAC,QAAQ,IACjB,4DAAK,KAAK,EAAC,QAAQ,IACjB,4DAAK,KAAK,EAAC,OAAO,EAAC,OAAO,EAAE,IAAI,CAAC,eAAe,GAAQ,CACpD,EACN,4DAAK,KAAK,EAAC,SAAS,IAClB,8DAAa,CACT,CACF,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/biggive-popup/biggive-popup.scss?tag=biggive-popup&encapsulation=shadow","src/components/biggive-popup/biggive-popup.tsx"],"sourcesContent":[":host {\n  display: contents;\n}\n\n.popup {\n  @include popup();\n  &[data-visible=true] {\n    display: block;\n  }\n}","import { Component, Method, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-popup',\n  styleUrl: 'biggive-popup.scss',\n  shadow: true,\n})\nexport class BiggivePopup {\n  private popup: HTMLDivElement;\n\n  /**\n   * Function to execute when the modal is closed, whether by the user or programmatically.\n   */\n  @Prop() modalClosedCallback: () => void = () => {};\n\n  @Method()\n  async openFromOutside() {\n    this.popup.setAttribute('data-visible', 'true');\n    this.popup.setAttribute('tabindex', '0');\n    this.popup.focus();\n  }\n\n  @Method()\n  async closeFromOutside() {\n    this.popup.setAttribute('data-visible', 'false');\n    this.popup.setAttribute('tabindex', '-1');\n    this.modalClosedCallback();\n  }\n\n  private closeFromWithin = (event: any) => {\n    if (event.target.classList.contains('popup') || event.target.classList.contains('close')) {\n      this.popup.setAttribute('data-visible', 'false');\n      this.popup.setAttribute('tabindex', '-1');\n      this.modalClosedCallback();\n    }\n  };\n\n  render() {\n    return (\n      <div class=\"popup\" ref={el => (this.popup = el as HTMLDivElement)} tabindex=\"-1\" onClick={this.closeFromWithin}>\n        <div class=\"sleeve\">\n          <div class=\"header\">\n            <div class=\"close\" onClick={this.closeFromWithin}></div>\n          </div>\n          <div class=\"content\">\n            <slot></slot>\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"biggive-popup2.js","mappings":";;AAAA,MAAM,eAAe,GAAG,gxBAAgxB,CAAC;AACzyB,2BAAe,eAAe;;MCMjB,YAAY;IALzB;;;;;;;QAWU,wBAAmB,GAAe,SAAQ,CAAC;QAgB3C,oBAAe,GAAG,CAAC,KAAU;YACnC,IAAI,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE;gBACxF,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,cAAc,EAAE,OAAO,CAAC,CAAC;gBACjD,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;gBAC1C,IAAI,CAAC,mBAAmB,EAAE,CAAC;aAC5B;SACF,CAAC;KAgBH;IAnCC,MAAM,eAAe;QACnB,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC;QAChD,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;QACzC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;KACpB;IAGD,MAAM,gBAAgB;QACpB,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,cAAc,EAAE,OAAO,CAAC,CAAC;QACjD,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;QAC1C,IAAI,CAAC,mBAAmB,EAAE,CAAC;KAC5B;IAUD,MAAM;QACJ,QACE,4DAAK,KAAK,EAAC,OAAO,EAAC,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,KAAK,GAAG,EAAoB,CAAC,EAAE,QAAQ,EAAC,IAAI,EAAC,OAAO,EAAE,IAAI,CAAC,eAAe,IAC5G,4DAAK,KAAK,EAAC,QAAQ,IACjB,4DAAK,KAAK,EAAC,QAAQ,IACjB,4DAAK,KAAK,EAAC,OAAO,EAAC,OAAO,EAAE,IAAI,CAAC,eAAe,GAAQ,CACpD,EACN,4DAAK,KAAK,EAAC,SAAS,IAClB,8DAAa,CACT,CACF,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/biggive-popup/biggive-popup.scss?tag=biggive-popup&encapsulation=shadow","src/components/biggive-popup/biggive-popup.tsx"],"sourcesContent":[":host {\n  display: contents;\n}\n\n.popup {\n  @include popup();\n  &[data-visible=true] {\n    display: block;\n  }\n}","import { Component, Method, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-popup',\n  styleUrl: 'biggive-popup.scss',\n  shadow: true,\n})\nexport class BiggivePopup {\n  private popup: HTMLDivElement;\n\n  /**\n   * Function to execute when the modal is closed, whether by the user or programmatically.\n   */\n  @Prop() modalClosedCallback: () => void = () => {};\n\n  @Method()\n  async openFromOutside() {\n    this.popup.setAttribute('data-visible', 'true');\n    this.popup.setAttribute('tabindex', '0');\n    this.popup.focus();\n  }\n\n  @Method()\n  async closeFromOutside() {\n    this.popup.setAttribute('data-visible', 'false');\n    this.popup.setAttribute('tabindex', '-1');\n    this.modalClosedCallback();\n  }\n\n  private closeFromWithin = (event: any) => {\n    if (event.target.classList.contains('popup') || event.target.classList.contains('close')) {\n      this.popup.setAttribute('data-visible', 'false');\n      this.popup.setAttribute('tabindex', '-1');\n      this.modalClosedCallback();\n    }\n  };\n\n  render() {\n    return (\n      <div class=\"popup\" ref={el => (this.popup = el as HTMLDivElement)} tabindex=\"-1\" onClick={this.closeFromWithin}>\n        <div class=\"sleeve\">\n          <div class=\"header\">\n            <div class=\"close\" onClick={this.closeFromWithin}></div>\n          </div>\n          <div class=\"content\">\n            <slot></slot>\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/biggive-progress-bar2.js

@@ -8,8 +8,17 @@ const BiggiveProgressBar = /*@__PURE__*/ proxyCustomElement(class BiggiveProgres
         super();
         this.__registerHost();
         this.__attachShadow();
+        /**
+         * Space below component
+         */
         this.spaceBelow = 0;
+        /**
+         * Colour Scheme
+         */
         this.colourScheme = 'primary';
+        /**
+         * Percentage to show + use for CSS width; round before input if desired
+         */
         this.counter = 100;
     }
     render() {

package/dist/components/biggive-progress-bar2.js.map

@@ -1 +1 @@
-{"file":"biggive-progress-bar2.js","mappings":";;AAAA,MAAM,qBAAqB,GAAG,ixCAAixC,CAAC;AAChzC,iCAAe,qBAAqB;;MCMvB,kBAAkB;;;;;0BAIA,CAAC;4BAIC,SAAS;uBAKN,GAAG;;IAErC,MAAM;QACJ,IAAI,IAAI,CAAC,OAAO,KAAK,IAAI,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,EAAE;YACvD,OAAO,IAAI,CAAC;SACb;QAED,QACE,WAAK,KAAK,EAAE,4BAA4B,GAAG,IAAI,CAAC,YAAY,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,IAC9F,WAAK,KAAK,EAAC,QAAQ,IACjB,WAAK,KAAK,EAAC,UAAU,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,GAAG,EAAE,GAAQ,CAC7E,EACN,WAAK,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,OAAO,MAAQ,CACtC,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/biggive-progress-bar/biggive-progress-bar.scss?tag=biggive-progress-bar&encapsulation=shadow","src/components/biggive-progress-bar/biggive-progress-bar.tsx"],"sourcesContent":["@include spacers();\n\n:host {\n  display: block;\n  margin-bottom: $spacer-1;\n  @include standard-font();\n}\n\n.progress-bar {\n    @include progress-bar();\n}\n\n.progress-bar-primary {\n    @include progress-bar-primary();\n}\n\n.progress-bar-secondary {\n    @include progress-bar-secondary();\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-progress-bar',\n  styleUrl: 'biggive-progress-bar.scss',\n  shadow: true,\n})\nexport class BiggiveProgressBar {\n  /**\n   * Space below component\n   */\n  @Prop() spaceBelow: number = 0;\n  /**\n   * Colour Scheme\n   */\n  @Prop() colourScheme: string = 'primary';\n\n  /**\n   * Percentage to show + use for CSS width; round before input if desired\n   */\n  @Prop() counter?: number | null = 100;\n\n  render() {\n    if (this.counter === null || this.counter === undefined) {\n      return null;\n    }\n\n    return (\n      <div class={'progress-bar progress-bar-' + this.colourScheme + ' space-below-' + this.spaceBelow}>\n        <div class=\"slider\">\n          <div class=\"progress\" style={{ width: `${Math.min(this.counter, 100)}%` }}></div>\n        </div>\n        <div class=\"counter\">{this.counter}%</div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"biggive-progress-bar2.js","mappings":";;AAAA,MAAM,qBAAqB,GAAG,ixCAAixC,CAAC;AAChzC,iCAAe,qBAAqB;;MCMvB,kBAAkB;IAL/B;;;;;;;QASU,eAAU,GAAW,CAAC,CAAC;;;;QAIvB,iBAAY,GAAW,SAAS,CAAC;;;;QAKjC,YAAO,GAAmB,GAAG,CAAC;KAgBvC;IAdC,MAAM;QACJ,IAAI,IAAI,CAAC,OAAO,KAAK,IAAI,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,EAAE;YACvD,OAAO,IAAI,CAAC;SACb;QAED,QACE,WAAK,KAAK,EAAE,4BAA4B,GAAG,IAAI,CAAC,YAAY,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,IAC9F,WAAK,KAAK,EAAC,QAAQ,IACjB,WAAK,KAAK,EAAC,UAAU,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,GAAG,EAAE,GAAQ,CAC7E,EACN,WAAK,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,OAAO,MAAQ,CACtC,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/biggive-progress-bar/biggive-progress-bar.scss?tag=biggive-progress-bar&encapsulation=shadow","src/components/biggive-progress-bar/biggive-progress-bar.tsx"],"sourcesContent":["@include spacers();\n\n:host {\n  display: block;\n  margin-bottom: $spacer-1;\n  @include standard-font();\n}\n\n.progress-bar {\n    @include progress-bar();\n}\n\n.progress-bar-primary {\n    @include progress-bar-primary();\n}\n\n.progress-bar-secondary {\n    @include progress-bar-secondary();\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-progress-bar',\n  styleUrl: 'biggive-progress-bar.scss',\n  shadow: true,\n})\nexport class BiggiveProgressBar {\n  /**\n   * Space below component\n   */\n  @Prop() spaceBelow: number = 0;\n  /**\n   * Colour Scheme\n   */\n  @Prop() colourScheme: string = 'primary';\n\n  /**\n   * Percentage to show + use for CSS width; round before input if desired\n   */\n  @Prop() counter?: number | null = 100;\n\n  render() {\n    if (this.counter === null || this.counter === undefined) {\n      return null;\n    }\n\n    return (\n      <div class={'progress-bar progress-bar-' + this.colourScheme + ' space-below-' + this.spaceBelow}>\n        <div class=\"slider\">\n          <div class=\"progress\" style={{ width: `${Math.min(this.counter, 100)}%` }}></div>\n        </div>\n        <div class=\"counter\">{this.counter}%</div>\n      </div>\n    );\n  }\n}\n"],"version":3}

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

@@ -1 +1 @@
-{"file":"biggive-quote.js","mappings":";;AAAA,MAAM,eAAe,GAAG,w+IAAw+I,CAAC;AACjgJ,2BAAe,eAAe;;MCQjBA,cAAY;;;;;0BACa,CAAC;iCAEI,OAAO;qBAExB,EAAE;2BAEI,EAAE;+BAEO,SAAS;;IAEhD,MAAM;QACJ,QACE,4DAAK,KAAK,EAAE,wBAAwB,GAAG,IAAI,CAAC,iBAAiB,GAAG,qBAAqB,GAAG,IAAI,CAAC,eAAe,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,IAC9I,4DAAK,KAAK,EAAC,YAAY,IACrB,4DAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,IAC5F,6DAAM,CAAC,EAAC,kFAAkF,EAAC,IAAI,EAAC,SAAS,GAAG,CACxG,CACF,EACN,4DAAK,KAAK,EAAC,OAAO,cAAG,IAAI,CAAC,KAAK,WAAQ,EACvC,4DAAK,KAAK,EAAC,aAAa,WAAK,IAAI,CAAC,WAAW,CAAO,CAChD,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveQuote"],"sources":["src/components/biggive-quote/biggive-quote.scss?tag=biggive-quote&encapsulation=shadow","src/components/biggive-quote/biggive-quote.tsx"],"sourcesContent":["@include image-alignment();\n@include spacers();\n@include text-colours();\n\n:host {\n  display: contents;\n}\n\n.container {\n  @include all-round-shadow();\n  @include standard-font();\n  height: 100%;\n  background-color: white;\n  text-align: center;\n  margin-left: auto;\n  margin-right: auto;\n  max-width: 600px;\n  padding: $spacer-6;\n  .image-wrap {\n    text-align: center;\n    margin-bottom: $spacer-3;\n    svg {\n      height: 30px;\n      width: auto;\n      margin: auto;\n    }\n  }\n  .quote {\n    margin-bottom: $spacer-4;\n  }\n\n  @each $key, $colour in $brandColoursIncBrand6Turquoise {\n    &.quote-icon-colour-#{$key} .image-wrap path { fill: $colour; }\n  }\n\n\n  @media screen and (max-width: $screen-tablet-max) {\n    padding: $spacer-5;\n    svg {\n      width: 40px;\n      height: 40px;\n    }\n  }\n\n  @media screen and (max-width: $screen-mobile-max) {\n    padding: $spacer-4;\n    @include font-size-small();\n\n    svg {\n      width: 30px;\n      height: 30px;\n    }\n  }\n\n  @media screen and (max-width: $screen-mobile-small) {\n    padding: $spacer-3;\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-quote',\n  styleUrl: 'biggive-quote.scss',\n  shadow: true,\n})\nexport class BiggiveQuote {\n  @Prop() spaceBelow: spacingOption = 0;\n\n  @Prop() defaultTextColour: brandColour = 'black';\n\n  @Prop() quote: string = '';\n\n  @Prop() attribution: string = '';\n\n  @Prop() quoteIconColour: brandColour = 'primary';\n\n  render() {\n    return (\n      <div class={'container text-colour-' + this.defaultTextColour + ' quote-icon-colour-' + this.quoteIconColour + ' space-below-' + this.spaceBelow}>\n        <div class=\"image-wrap\">\n          <svg width=\"34\" height=\"24\" viewBox=\"0 0 34 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M16.1245 0L13.7167 24H0L11.0901 0H16.1245ZM34 0L31.5923 24H17.8755L28.9657 0H34Z\" fill=\"#2C089B\" />\n          </svg>\n        </div>\n        <div class=\"quote\">“{this.quote}”</div>\n        <div class=\"attribution\"> - {this.attribution}</div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"biggive-quote.js","mappings":";;AAAA,MAAM,eAAe,GAAG,w+IAAw+I,CAAC;AACjgJ,2BAAe,eAAe;;MCQjBA,cAAY;IALzB;;;;QAMU,eAAU,GAAkB,CAAC,CAAC;QAE9B,sBAAiB,GAAgB,OAAO,CAAC;QAEzC,UAAK,GAAW,EAAE,CAAC;QAEnB,gBAAW,GAAW,EAAE,CAAC;QAEzB,oBAAe,GAAgB,SAAS,CAAC;KAelD;IAbC,MAAM;QACJ,QACE,4DAAK,KAAK,EAAE,wBAAwB,GAAG,IAAI,CAAC,iBAAiB,GAAG,qBAAqB,GAAG,IAAI,CAAC,eAAe,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,IAC9I,4DAAK,KAAK,EAAC,YAAY,IACrB,4DAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,IAC5F,6DAAM,CAAC,EAAC,kFAAkF,EAAC,IAAI,EAAC,SAAS,GAAG,CACxG,CACF,EACN,4DAAK,KAAK,EAAC,OAAO,cAAG,IAAI,CAAC,KAAK,WAAQ,EACvC,4DAAK,KAAK,EAAC,aAAa,WAAK,IAAI,CAAC,WAAW,CAAO,CAChD,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveQuote"],"sources":["src/components/biggive-quote/biggive-quote.scss?tag=biggive-quote&encapsulation=shadow","src/components/biggive-quote/biggive-quote.tsx"],"sourcesContent":["@include image-alignment();\n@include spacers();\n@include text-colours();\n\n:host {\n  display: contents;\n}\n\n.container {\n  @include all-round-shadow();\n  @include standard-font();\n  height: 100%;\n  background-color: white;\n  text-align: center;\n  margin-left: auto;\n  margin-right: auto;\n  max-width: 600px;\n  padding: $spacer-6;\n  .image-wrap {\n    text-align: center;\n    margin-bottom: $spacer-3;\n    svg {\n      height: 30px;\n      width: auto;\n      margin: auto;\n    }\n  }\n  .quote {\n    margin-bottom: $spacer-4;\n  }\n\n  @each $key, $colour in $brandColoursIncBrand6Turquoise {\n    &.quote-icon-colour-#{$key} .image-wrap path { fill: $colour; }\n  }\n\n\n  @media screen and (max-width: $screen-tablet-max) {\n    padding: $spacer-5;\n    svg {\n      width: 40px;\n      height: 40px;\n    }\n  }\n\n  @media screen and (max-width: $screen-mobile-max) {\n    padding: $spacer-4;\n    @include font-size-small();\n\n    svg {\n      width: 30px;\n      height: 30px;\n    }\n  }\n\n  @media screen and (max-width: $screen-mobile-small) {\n    padding: $spacer-3;\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-quote',\n  styleUrl: 'biggive-quote.scss',\n  shadow: true,\n})\nexport class BiggiveQuote {\n  @Prop() spaceBelow: spacingOption = 0;\n\n  @Prop() defaultTextColour: brandColour = 'black';\n\n  @Prop() quote: string = '';\n\n  @Prop() attribution: string = '';\n\n  @Prop() quoteIconColour: brandColour = 'primary';\n\n  render() {\n    return (\n      <div class={'container text-colour-' + this.defaultTextColour + ' quote-icon-colour-' + this.quoteIconColour + ' space-below-' + this.spaceBelow}>\n        <div class=\"image-wrap\">\n          <svg width=\"34\" height=\"24\" viewBox=\"0 0 34 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M16.1245 0L13.7167 24H0L11.0901 0H16.1245ZM34 0L31.5923 24H17.8755L28.9657 0H34Z\" fill=\"#2C089B\" />\n          </svg>\n        </div>\n        <div class=\"quote\">“{this.quote}”</div>\n        <div class=\"attribution\"> - {this.attribution}</div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/biggive-sheet.js

@@ -8,14 +8,17 @@ const BiggiveSheet$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveSheet exten
         super();
         this.__registerHost();
         this.__attachShadow();
+        /**
+         * A string ID (no spaces) unique within the page context, used to trigger the opening of the sheet from an anchor hash.
+         */
+        this.sheetId = '';
+        this.backgroundColour = 'primary';
+        this.textColour = 'white';
         this.closeSheet = () => {
             var _a, _b;
             (_b = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.container')) === null || _b === void 0 ? void 0 : _b.classList.remove('active');
             history.pushState('', document.title, window.location.pathname);
         };
-        this.sheetId = '';
-        this.backgroundColour = 'primary';
-        this.textColour = 'white';
     }
     componentWillLoad() {
         window.addEventListener('hashchange', () => {

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

@@ -1 +1 @@
-{"file":"biggive-sheet.js","mappings":";;AAAA,MAAM,eAAe,GAAG,mwQAAmwQ,CAAC;AAC5xQ,2BAAe,eAAe;;MCOjBA,cAAY;;;;;QA4Bf,eAAU,GAAG;;YACnB,MAAA,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAC,YAAY,CAAC,0CAAE,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;YAC9E,OAAO,CAAC,SAAS,CAAC,EAAE,EAAE,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;SACjE,CAAC;uBAzBwB,EAAE;gCAEY,SAAS;0BAEf,OAAO;;IAEzC,iBAAiB;QACf,MAAM,CAAC,gBAAgB,CAAC,YAAY,EAAE;YACpC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;SACtC,CAAC,CAAC;KACJ;IAED,kBAAkB;QAChB,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;KACtC;IAEO,SAAS,CAAC,IAAY;;QAC5B,IAAI,IAAI,IAAI,EAAE,IAAI,IAAI,IAAI,IAAI,CAAC,OAAO,EAAE;YACtC,MAAA,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAC,YAAY,CAAC,0CAAE,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;SAC5E;KACF;IAOD,MAAM;QACJ,QACE,4DAAK,KAAK,EAAE,WAAW,IACrB,4DAAK,KAAK,EAAC,YAAY,GAAO,EAC9B,4DAAK,KAAK,EAAE,0BAA0B,GAAG,IAAI,CAAC,gBAAgB,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,IAChG,4DAAK,KAAK,EAAC,QAAQ,IACjB,4DAAK,KAAK,EAAC,WAAW,EAAC,OAAO,EAAE,IAAI,CAAC,UAAU,IAC7C,6DAAM,KAAK,EAAE,kBAAkB,GAAG,IAAI,CAAC,UAAU,IAC/C,4DAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,IAC5F,6DACE,CAAC,EAAC,6VAA6V,EAC/V,IAAI,EAAC,OAAO,GACZ,CACE,CACD,SAEH,EAEN,4DAAK,KAAK,EAAC,YAAY,EAAC,OAAO,EAAE,IAAI,CAAC,UAAU,IAC9C,6DAAM,KAAK,EAAC,UAAU,IACpB,4DAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,IAChF,6DAAM,CAAC,EAAC,+CAA+C,GAAG,CACtD,CACD,CACH,CACF,EACN,4DAAK,KAAK,EAAC,SAAS,IAClB,8DAAa,CACT,CACF,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveSheet"],"sources":["src/components/biggive-sheet/biggive-sheet.scss?tag=biggive-sheet&encapsulation=shadow","src/components/biggive-sheet/biggive-sheet.tsx"],"sourcesContent":["@include backgrounds();\n@include text-colours();\n@include fills();\n\n:host {\n  display: contents;\n  @include standard-font();\n}\n\n\n.container {\n\n  &.active {\n    .popup {\n      transform: translateX(0);\n    }\n    .background {\n      position: fixed;\n      left: 0;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      background-color: rgba(0,0,0,0.6);\n      z-index: 99;\n    }\n  }\n\n  .popup {\n    position: fixed;\n    transition: transform 1s ease-in-out;\n    transform: translateX(100%);\n    z-index: 999;\n    top: 0;\n    bottom: 0;\n    right: 0;\n    width: 66%;\n\n\n  .header {\n    padding: 45px;\n    display: flex;\n    justify-content: space-between;\n    .back-link {\n      cursor: pointer;\n      display: flex;\n      font-size: 14px;\n      .svg-wrap {\n        @each $key, $colour in $brandColoursIncBrand6Turquoise {\n          &.colour-#{$key} svg path { fill: $colour; }\n        }\n        display: flex;\n        margin: 5px 15px auto 0;\n        svg {\n          height: 14px;\n          width: auto;\n        }\n      }\n    }\n\n    .close-link {\n      margin-bottom: auto;\n      cursor: pointer;\n      .svg-wrap {\n        display: block;\n        width: 30px;\n        height: 30px;\n        background-color: #FFFFFF;\n        border-radius: 50%;\n        text-align: center;\n        padding: 6.5px;\n        box-sizing: border-box;\n        svg {\n          display: inline-block;\n          top: -1.5px;\n          position: relative;\n          stroke-width: 1;\n          stroke: #000000;      \n          height: 15px;\n          width: 15px;\n          transform: rotate(45deg);\n        }\n      }\n    }\n\n  }\n\n\n  .content{\n    padding: 0 45px 90px 90px;\n    margin-right: 45px;\n    max-height: calc(100vh - 200px);\n    overflow-y: scroll;\n    box-sizing: border-box;\n  }\n\n  }\n\n}\n\n\n@media screen and (max-width: $screen-tablet-max) {\n  .container {\n    .header {\n      padding: 15px;\n    }\n    .content {\n      padding: 0 15px 30px 30px;\n      margin-right: 15px;\n      max-height: calc(100vh - 90px);\n    }\n    .popup {\n      width: 100%;\n    }\n  }\n}\n\n@media screen and (max-width: $screen-mobile-max) {\n  .container {\n    .header {\n      padding: 15px;\n    }\n    .content {\n      padding: 0 15px 30px 30px;\n      margin-right: 15px;\n      max-height: calc(100vh - 90px);\n    }\n    .popup {\n      width: 100%;\n    }\n  }\n}","import { Component, Prop, Element, h } from '@stencil/core';\nimport { brandColour } from '../../globals/brand-colour';\n\n@Component({\n  tag: 'biggive-sheet',\n  styleUrl: 'biggive-sheet.scss',\n  shadow: true,\n})\nexport class BiggiveSheet {\n  @Element() host: HTMLBiggiveSheetElement;\n\n  /**\n   * A string ID (no spaces) unique within the page context, used to trigger the opening of the sheet from an anchor hash.\n   */\n  @Prop() sheetId: string = '';\n\n  @Prop() backgroundColour: brandColour = 'primary';\n\n  @Prop() textColour: brandColour = 'white';\n\n  componentWillLoad() {\n    window.addEventListener('hashchange', () => {\n      this.openSheet(window.location.hash);\n    });\n  }\n\n  componentDidRender() {\n    this.openSheet(window.location.hash);\n  }\n\n  private openSheet(hash: string) {\n    if (hash != '' && hash == this.sheetId) {\n      this.host.shadowRoot?.querySelector('.container')?.classList.add('active');\n    }\n  }\n\n  private closeSheet = () => {\n    this.host.shadowRoot?.querySelector('.container')?.classList.remove('active');\n    history.pushState('', document.title, window.location.pathname);\n  };\n\n  render() {\n    return (\n      <div class={'container'}>\n        <div class=\"background\"></div>\n        <div class={'popup background-colour-' + this.backgroundColour + ' text-colour-' + this.textColour}>\n          <div class=\"header\">\n            <div class=\"back-link\" onClick={this.closeSheet}>\n              <span class={'svg-wrap colour-' + this.textColour}>\n                <svg width=\"33\" height=\"16\" viewBox=\"0 0 33 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path\n                    d=\"M0.292892 7.29289C-0.0976295 7.68342 -0.0976295 8.31658 0.292892 8.70711L6.65685 15.0711C7.04738 15.4616 7.68054 15.4616 8.07107 15.0711C8.46159 14.6805 8.46159 14.0474 8.07107 13.6569L2.41421 8L8.07107 2.34315C8.46159 1.95262 8.46159 1.31946 8.07107 0.928932C7.68054 0.538408 7.04738 0.538408 6.65685 0.928932L0.292892 7.29289ZM33 7L1 7V9L33 9V7Z\"\n                    fill=\"black\"\n                  />\n                </svg>\n              </span>\n              Back\n            </div>\n\n            <div class=\"close-link\" onClick={this.closeSheet}>\n              <span class=\"svg-wrap\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M11 11v-11h1v11h11v1h-11v11h-1v-11h-11v-1h11z\" />\n                </svg>\n              </span>\n            </div>\n          </div>\n          <div class=\"content\">\n            <slot></slot>\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"biggive-sheet.js","mappings":";;AAAA,MAAM,eAAe,GAAG,mwQAAmwQ,CAAC;AAC5xQ,2BAAe,eAAe;;MCOjBA,cAAY;IALzB;;;;;;;QAWU,YAAO,GAAW,EAAE,CAAC;QAErB,qBAAgB,GAAgB,SAAS,CAAC;QAE1C,eAAU,GAAgB,OAAO,CAAC;QAkBlC,eAAU,GAAG;;YACnB,MAAA,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAC,YAAY,CAAC,0CAAE,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;YAC9E,OAAO,CAAC,SAAS,CAAC,EAAE,EAAE,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;SACjE,CAAC;KAmCH;IAtDC,iBAAiB;QACf,MAAM,CAAC,gBAAgB,CAAC,YAAY,EAAE;YACpC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;SACtC,CAAC,CAAC;KACJ;IAED,kBAAkB;QAChB,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;KACtC;IAEO,SAAS,CAAC,IAAY;;QAC5B,IAAI,IAAI,IAAI,EAAE,IAAI,IAAI,IAAI,IAAI,CAAC,OAAO,EAAE;YACtC,MAAA,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAC,YAAY,CAAC,0CAAE,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;SAC5E;KACF;IAOD,MAAM;QACJ,QACE,4DAAK,KAAK,EAAE,WAAW,IACrB,4DAAK,KAAK,EAAC,YAAY,GAAO,EAC9B,4DAAK,KAAK,EAAE,0BAA0B,GAAG,IAAI,CAAC,gBAAgB,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,IAChG,4DAAK,KAAK,EAAC,QAAQ,IACjB,4DAAK,KAAK,EAAC,WAAW,EAAC,OAAO,EAAE,IAAI,CAAC,UAAU,IAC7C,6DAAM,KAAK,EAAE,kBAAkB,GAAG,IAAI,CAAC,UAAU,IAC/C,4DAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,IAC5F,6DACE,CAAC,EAAC,6VAA6V,EAC/V,IAAI,EAAC,OAAO,GACZ,CACE,CACD,SAEH,EAEN,4DAAK,KAAK,EAAC,YAAY,EAAC,OAAO,EAAE,IAAI,CAAC,UAAU,IAC9C,6DAAM,KAAK,EAAC,UAAU,IACpB,4DAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,IAChF,6DAAM,CAAC,EAAC,+CAA+C,GAAG,CACtD,CACD,CACH,CACF,EACN,4DAAK,KAAK,EAAC,SAAS,IAClB,8DAAa,CACT,CACF,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveSheet"],"sources":["src/components/biggive-sheet/biggive-sheet.scss?tag=biggive-sheet&encapsulation=shadow","src/components/biggive-sheet/biggive-sheet.tsx"],"sourcesContent":["@include backgrounds();\n@include text-colours();\n@include fills();\n\n:host {\n  display: contents;\n  @include standard-font();\n}\n\n\n.container {\n\n  &.active {\n    .popup {\n      transform: translateX(0);\n    }\n    .background {\n      position: fixed;\n      left: 0;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      background-color: rgba(0,0,0,0.6);\n      z-index: 99;\n    }\n  }\n\n  .popup {\n    position: fixed;\n    transition: transform 1s ease-in-out;\n    transform: translateX(100%);\n    z-index: 999;\n    top: 0;\n    bottom: 0;\n    right: 0;\n    width: 66%;\n\n\n  .header {\n    padding: 45px;\n    display: flex;\n    justify-content: space-between;\n    .back-link {\n      cursor: pointer;\n      display: flex;\n      font-size: 14px;\n      .svg-wrap {\n        @each $key, $colour in $brandColoursIncBrand6Turquoise {\n          &.colour-#{$key} svg path { fill: $colour; }\n        }\n        display: flex;\n        margin: 5px 15px auto 0;\n        svg {\n          height: 14px;\n          width: auto;\n        }\n      }\n    }\n\n    .close-link {\n      margin-bottom: auto;\n      cursor: pointer;\n      .svg-wrap {\n        display: block;\n        width: 30px;\n        height: 30px;\n        background-color: #FFFFFF;\n        border-radius: 50%;\n        text-align: center;\n        padding: 6.5px;\n        box-sizing: border-box;\n        svg {\n          display: inline-block;\n          top: -1.5px;\n          position: relative;\n          stroke-width: 1;\n          stroke: #000000;      \n          height: 15px;\n          width: 15px;\n          transform: rotate(45deg);\n        }\n      }\n    }\n\n  }\n\n\n  .content{\n    padding: 0 45px 90px 90px;\n    margin-right: 45px;\n    max-height: calc(100vh - 200px);\n    overflow-y: scroll;\n    box-sizing: border-box;\n  }\n\n  }\n\n}\n\n\n@media screen and (max-width: $screen-tablet-max) {\n  .container {\n    .header {\n      padding: 15px;\n    }\n    .content {\n      padding: 0 15px 30px 30px;\n      margin-right: 15px;\n      max-height: calc(100vh - 90px);\n    }\n    .popup {\n      width: 100%;\n    }\n  }\n}\n\n@media screen and (max-width: $screen-mobile-max) {\n  .container {\n    .header {\n      padding: 15px;\n    }\n    .content {\n      padding: 0 15px 30px 30px;\n      margin-right: 15px;\n      max-height: calc(100vh - 90px);\n    }\n    .popup {\n      width: 100%;\n    }\n  }\n}","import { Component, Prop, Element, h } from '@stencil/core';\nimport { brandColour } from '../../globals/brand-colour';\n\n@Component({\n  tag: 'biggive-sheet',\n  styleUrl: 'biggive-sheet.scss',\n  shadow: true,\n})\nexport class BiggiveSheet {\n  @Element() host: HTMLBiggiveSheetElement;\n\n  /**\n   * A string ID (no spaces) unique within the page context, used to trigger the opening of the sheet from an anchor hash.\n   */\n  @Prop() sheetId: string = '';\n\n  @Prop() backgroundColour: brandColour = 'primary';\n\n  @Prop() textColour: brandColour = 'white';\n\n  componentWillLoad() {\n    window.addEventListener('hashchange', () => {\n      this.openSheet(window.location.hash);\n    });\n  }\n\n  componentDidRender() {\n    this.openSheet(window.location.hash);\n  }\n\n  private openSheet(hash: string) {\n    if (hash != '' && hash == this.sheetId) {\n      this.host.shadowRoot?.querySelector('.container')?.classList.add('active');\n    }\n  }\n\n  private closeSheet = () => {\n    this.host.shadowRoot?.querySelector('.container')?.classList.remove('active');\n    history.pushState('', document.title, window.location.pathname);\n  };\n\n  render() {\n    return (\n      <div class={'container'}>\n        <div class=\"background\"></div>\n        <div class={'popup background-colour-' + this.backgroundColour + ' text-colour-' + this.textColour}>\n          <div class=\"header\">\n            <div class=\"back-link\" onClick={this.closeSheet}>\n              <span class={'svg-wrap colour-' + this.textColour}>\n                <svg width=\"33\" height=\"16\" viewBox=\"0 0 33 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path\n                    d=\"M0.292892 7.29289C-0.0976295 7.68342 -0.0976295 8.31658 0.292892 8.70711L6.65685 15.0711C7.04738 15.4616 7.68054 15.4616 8.07107 15.0711C8.46159 14.6805 8.46159 14.0474 8.07107 13.6569L2.41421 8L8.07107 2.34315C8.46159 1.95262 8.46159 1.31946 8.07107 0.928932C7.68054 0.538408 7.04738 0.538408 6.65685 0.928932L0.292892 7.29289ZM33 7L1 7V9L33 9V7Z\"\n                    fill=\"black\"\n                  />\n                </svg>\n              </span>\n              Back\n            </div>\n\n            <div class=\"close-link\" onClick={this.closeSheet}>\n              <span class=\"svg-wrap\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M11 11v-11h1v11h11v1h-11v11h-1v-11h-11v-1h11z\" />\n                </svg>\n              </span>\n            </div>\n          </div>\n          <div class=\"content\">\n            <slot></slot>\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

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

@@ -8,11 +8,26 @@ const BiggiveSocialIcon = /*@__PURE__*/ proxyCustomElement(class BiggiveSocialIc
     constructor() {
         super();
         this.__registerHost();
-        this.service = undefined;
+        /**
+         * Used within accessible labels for links. Typically a charity name or "Big Give". Can also be "Share".
+         */
         this.labelPrefix = 'Big Give';
+        /**
+         * Background colour
+         */
         this.backgroundColour = 'primary';
+        /**
+         * Icon colour
+         */
         this.iconColour = 'white';
+        /**
+         * Used in the social icons in the biggive-footer, which are more spaced out
+         * than others across the site. COM-43.
+         */
         this.wide = false;
+        /**
+         * Url
+         */
         this.url = '#';
     }
     getSocialIcon() {

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

@@ -1 +1 @@
-{"file":"biggive-social-icon2.js","mappings":";;;AAAA,MAAM,oBAAoB,GAAG,6+VAA6+V,CAAC;AAC3gW,gCAAe,oBAAoB;;MCWtB,iBAAiB;;;;;2BASE,UAAU;gCAKL,SAAS;0BAKf,OAAO;oBAMZ,KAAK;mBAKP,GAAG;;IAEjB,aAAa;QACnB,IAAI,IAAI,GAAG,uBAAuB,CAAC,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAC/D,OAAO,IAAI,CAAC;KACb;IAED,MAAM;QACJ,QACE,4DAAK,KAAK,EAAE,qCAAqC,GAAG,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,IAAI,GAAG,OAAO,GAAG,EAAE,CAAC,IACpG,0DAAG,IAAI,EAAE,IAAI,CAAC,GAAG,gBAAc,GAAG,IAAI,CAAC,WAAW,OAAO,IAAI,CAAC,OAAO,EAAE,EAAE,MAAM,EAAC,QAAQ,EAAC,GAAG,EAAC,UAAU,IACrG,4DACE,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,EACnC,MAAM,EAAE,IAAI,CAAC,aAAa,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,EACpC,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC,UAAU,EAChC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,GAAG,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,IAEnF,6DAAM,CAAC,EAAE,IAAI,CAAC,aAAa,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,GAAI,CAChD,CACJ,CACA,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/biggive-social-icon/biggive-social-icon.scss?tag=biggive-social-icon","src/components/biggive-social-icon/biggive-social-icon.tsx"],"sourcesContent":["@include backgrounds();\n@include fills();\n\n:host {\n  display: contents;\n}\n\n.social-icon-item {\n  margin-right: 6px;\n  @include icon-large();\n\n  &.wide {\n    margin-right: 30px;\n  }\n\n  @media screen and (max-width: $screen-mobile-max) {\n    @include icon-medium();\n\n    &.wide {\n      @include icon-medium();\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/**\n * Used to indicate and link to a charity's social page, or their own web site.\n */\n@Component({\n  tag: 'biggive-social-icon',\n  styleUrl: 'biggive-social-icon.scss',\n  shadow: false,\n})\nexport class BiggiveSocialIcon {\n  /**\n   * Service name\n   */\n  @Prop() service!: 'Facebook' | 'Instagram' | 'LinkedIn' | 'Twitter' | 'Web' | 'Whatsapp' | 'YouTube';\n\n  /**\n   * Used within accessible labels for links. Typically a charity name or \"Big Give\". Can also be \"Share\".\n   */\n  @Prop() labelPrefix: string = 'Big Give';\n\n  /**\n   * Background colour\n   */\n  @Prop() backgroundColour: string = 'primary';\n\n  /**\n   * Icon colour\n   */\n  @Prop() iconColour: string = 'white';\n\n  /**\n   * Used in the social icons in the biggive-footer, which are more spaced out\n   * than others across the site. COM-43.\n   */\n  @Prop() wide: boolean = false;\n\n  /**\n   * Url\n   */\n  @Prop() url: string = '#';\n\n  private getSocialIcon(): IconDefinition {\n    var icon = FontAwesomeIconsService.getSocialIcon(this.service);\n    return icon;\n  }\n\n  render() {\n    return (\n      <div class={'social-icon-item background-colour-' + this.backgroundColour + (this.wide ? ' wide' : '')}>\n        <a href={this.url} aria-label={`${this.labelPrefix} on ${this.service}`} target=\"_blank\" rel=\"noopener\">\n          <svg\n            width={this.getSocialIcon().icon[0]}\n            height={this.getSocialIcon().icon[1]}\n            xmlns=\"http://www.w3.org/2000/svg\"\n            class={'fill-' + this.iconColour}\n            viewBox={'0 0 ' + this.getSocialIcon().icon[0] + ' ' + this.getSocialIcon().icon[1]}\n          >\n            <path d={this.getSocialIcon().icon[4].toString()} />\n          </svg>\n        </a>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"biggive-social-icon2.js","mappings":";;;AAAA,MAAM,oBAAoB,GAAG,6+VAA6+V,CAAC;AAC3gW,gCAAe,oBAAoB;;MCWtB,iBAAiB;IAL9B;;;;;;QAcU,gBAAW,GAAW,UAAU,CAAC;;;;QAKjC,qBAAgB,GAAW,SAAS,CAAC;;;;QAKrC,eAAU,GAAW,OAAO,CAAC;;;;;QAM7B,SAAI,GAAY,KAAK,CAAC;;;;QAKtB,QAAG,GAAW,GAAG,CAAC;KAwB3B;IAtBS,aAAa;QACnB,IAAI,IAAI,GAAG,uBAAuB,CAAC,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAC/D,OAAO,IAAI,CAAC;KACb;IAED,MAAM;QACJ,QACE,4DAAK,KAAK,EAAE,qCAAqC,GAAG,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,IAAI,GAAG,OAAO,GAAG,EAAE,CAAC,IACpG,0DAAG,IAAI,EAAE,IAAI,CAAC,GAAG,gBAAc,GAAG,IAAI,CAAC,WAAW,OAAO,IAAI,CAAC,OAAO,EAAE,EAAE,MAAM,EAAC,QAAQ,EAAC,GAAG,EAAC,UAAU,IACrG,4DACE,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,EACnC,MAAM,EAAE,IAAI,CAAC,aAAa,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,EACpC,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC,UAAU,EAChC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,GAAG,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,IAEnF,6DAAM,CAAC,EAAE,IAAI,CAAC,aAAa,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,GAAI,CAChD,CACJ,CACA,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/biggive-social-icon/biggive-social-icon.scss?tag=biggive-social-icon","src/components/biggive-social-icon/biggive-social-icon.tsx"],"sourcesContent":["@include backgrounds();\n@include fills();\n\n:host {\n  display: contents;\n}\n\n.social-icon-item {\n  margin-right: 6px;\n  @include icon-large();\n\n  &.wide {\n    margin-right: 30px;\n  }\n\n  @media screen and (max-width: $screen-mobile-max) {\n    @include icon-medium();\n\n    &.wide {\n      @include icon-medium();\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/**\n * Used to indicate and link to a charity's social page, or their own web site.\n */\n@Component({\n  tag: 'biggive-social-icon',\n  styleUrl: 'biggive-social-icon.scss',\n  shadow: false,\n})\nexport class BiggiveSocialIcon {\n  /**\n   * Service name\n   */\n  @Prop() service!: 'Facebook' | 'Instagram' | 'LinkedIn' | 'Twitter' | 'Web' | 'Whatsapp' | 'YouTube';\n\n  /**\n   * Used within accessible labels for links. Typically a charity name or \"Big Give\". Can also be \"Share\".\n   */\n  @Prop() labelPrefix: string = 'Big Give';\n\n  /**\n   * Background colour\n   */\n  @Prop() backgroundColour: string = 'primary';\n\n  /**\n   * Icon colour\n   */\n  @Prop() iconColour: string = 'white';\n\n  /**\n   * Used in the social icons in the biggive-footer, which are more spaced out\n   * than others across the site. COM-43.\n   */\n  @Prop() wide: boolean = false;\n\n  /**\n   * Url\n   */\n  @Prop() url: string = '#';\n\n  private getSocialIcon(): IconDefinition {\n    var icon = FontAwesomeIconsService.getSocialIcon(this.service);\n    return icon;\n  }\n\n  render() {\n    return (\n      <div class={'social-icon-item background-colour-' + this.backgroundColour + (this.wide ? ' wide' : '')}>\n        <a href={this.url} aria-label={`${this.labelPrefix} on ${this.service}`} target=\"_blank\" rel=\"noopener\">\n          <svg\n            width={this.getSocialIcon().icon[0]}\n            height={this.getSocialIcon().icon[1]}\n            xmlns=\"http://www.w3.org/2000/svg\"\n            class={'fill-' + this.iconColour}\n            viewBox={'0 0 ' + this.getSocialIcon().icon[0] + ' ' + this.getSocialIcon().icon[1]}\n          >\n            <path d={this.getSocialIcon().icon[4].toString()} />\n          </svg>\n        </a>\n      </div>\n    );\n  }\n}\n"],"version":3}

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

@@ -1 +1 @@
-{"file":"biggive-tab.js","mappings":";;AAAA,MAAM,aAAa,GAAG,uLAAuL,CAAC;AAC9M,yBAAe,aAAa;;MCMfA,YAAU;;;;;wBACM,EAAE;;IAE7B,MAAM;QACJ,QACE,4DAAK,KAAK,EAAC,WAAW,IACpB,8DAAa,CACT,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveTab"],"sources":["src/components/biggive-tab/biggive-tab.scss?tag=biggive-tab&encapsulation=shadow","src/components/biggive-tab/biggive-tab.tsx"],"sourcesContent":[":host {\n  display: contents;\n}\n\n\n.container {\n  @include standard-font();\n}","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-tab',\n  styleUrl: 'biggive-tab.scss',\n  shadow: true,\n})\nexport class BiggiveTab {\n  @Prop() tabTitle: string = '';\n\n  render() {\n    return (\n      <div class=\"container\">\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"biggive-tab.js","mappings":";;AAAA,MAAM,aAAa,GAAG,uLAAuL,CAAC;AAC9M,yBAAe,aAAa;;MCMfA,YAAU;IALvB;;;;QAMU,aAAQ,GAAW,EAAE,CAAC;KAS/B;IAPC,MAAM;QACJ,QACE,4DAAK,KAAK,EAAC,WAAW,IACpB,8DAAa,CACT,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveTab"],"sources":["src/components/biggive-tab/biggive-tab.scss?tag=biggive-tab&encapsulation=shadow","src/components/biggive-tab/biggive-tab.tsx"],"sourcesContent":[":host {\n  display: contents;\n}\n\n\n.container {\n  @include standard-font();\n}","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-tab',\n  styleUrl: 'biggive-tab.scss',\n  shadow: true,\n})\nexport class BiggiveTab {\n  @Prop() tabTitle: string = '';\n\n  render() {\n    return (\n      <div class=\"container\">\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"],"version":3}

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

@@ -8,6 +8,13 @@ const BiggiveTabbedContent$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveTab
         super();
         this.__registerHost();
         this.__attachShadow();
+        this.spaceBelow = 0;
+        this.textColour = 'black';
+        this.selectedTextColour = 'primary';
+        this.navigationHighlightColour = 'grey-medium';
+        this.selectedNavigationHighlightColour = 'primary';
+        this.buttonBackgroundColour = 'white';
+        this.buttonIconColour = 'primary';
         this.scrollOffset = 0;
         this.children = [];
         this.clickTabHandler = (e) => {
@@ -27,13 +34,6 @@ const BiggiveTabbedContent$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveTab
         this.clickNextHandler = () => {
             this.scrollTab('NEXT');
         };
-        this.spaceBelow = 0;
-        this.textColour = 'black';
-        this.selectedTextColour = 'primary';
-        this.navigationHighlightColour = 'grey-medium';
-        this.selectedNavigationHighlightColour = 'primary';
-        this.buttonBackgroundColour = 'white';
-        this.buttonIconColour = 'primary';
     }
     componentWillLoad() {
         this.children = Array.from(this.host.children);

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

@@ -1 +1 @@
-{"file":"biggive-tabbed-content.js","mappings":";;AAAA,MAAM,uBAAuB,GAAG,wseAAwse,CAAC;AACzue,mCAAe,uBAAuB;;MCQzBA,sBAAoB;;;;;QAkBvB,iBAAY,GAAW,CAAC,CAAC;QACzB,aAAQ,GAAiC,EAAE,CAAC;QAiD5C,oBAAe,GAAG,CAAC,CAAa;YACtC,IAAI,CAAC,GAAG,CAAC,CAAC;YACV,MAAM,MAAM,GAAI,CAAC,CAAC,MAAkB,CAAC,aAAc,CAAC;YACpD,KAAK,IAAI,EAAE,IAAI,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE;gBAC1C,IAAI,EAAE,IAAI,CAAC,CAAC,MAAM,EAAE;oBAClB,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;oBAChB,OAAO;iBACR;gBACD,CAAC,EAAE,CAAC;aACL;SACF,CAAC;QAqCM,qBAAgB,GAAG;YACzB,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;SACxB,CAAC;QAEM,qBAAgB,GAAG;YACzB,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;SACxB,CAAC;0BAtHkC,CAAC;0BAEH,OAAO;kCAEC,SAAS;yCAEF,aAAa;iDAEL,SAAS;sCAEpB,OAAO;gCAEb,SAAS;;IAMjD,iBAAiB;QACf,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAiC,CAAC;KAChF;IAED,kBAAkB;;QAChB,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;QAEhB,IAAI,CAAC,gBAAgB,GAAG,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAC,2BAA2B,CAAE,CAAC;QAE1F,MAAM,aAAa,GAAgB,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAC,qBAAqB,CAAE,CAAC;QAE/F,IAAI,aAAa,CAAC,WAAW,GAAG,aAAa,CAAC,WAAW,EAAE;YACzD,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,gBAAgB,CAAC,qBAAqB,EAAE,OAAO,CAAC,UAAU,MAAmB;gBACjG,MAAM,CAAC,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC;aAChC,CAAC,CAAC;SACJ;aAAM;YACL,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,gBAAgB,CAAC,qBAAqB,EAAE,OAAO,CAAC,UAAU,MAAmB;gBACjG,MAAM,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;aAC/B,CAAC,CAAC;SACJ;KACF;;;;IAKO,OAAO,CAAC,CAAS;;QACvB,MAAM,IAAI,GAAG,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,gBAAgB,CAAC,mBAAmB,CAAE,CAAC;QAE1E,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,MAAM,IAAG,CAAC,EAAE;YACnC,IAAI,CAAC,GAAG,CAAC,CAAC;YACV,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,OAAO,CAAC,UAAU,GAAG;gBACzB,IAAI,CAAC,IAAI,CAAC,EAAE;oBACV,GAAG,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;iBAC/B;qBAAM;oBACL,GAAG,CAAC,SAAS,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;iBAClC;gBACD,CAAC,EAAE,CAAC;aACL,CAAC,CAAC;YAEH,CAAC,GAAG,CAAC,CAAC;YACN,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,aAAa,CAAC,CAAC,OAAO,CAAC,UAAU,GAAG;gBAC7D,GAAG,CAAC,KAAK,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,GAAG,OAAO,GAAG,MAAM,CAAC;gBAC9C,CAAC,EAAE,CAAC;aACL,CAAC,CAAC;SACJ;KACF;IAcO,SAAS,CAAC,SAA0B;;QAC1C,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE;YAC1B,OAAO;SACR;QAED,IAAI,MAAM,GAAgB,IAAI,CAAC,gBAAgB,CAAC,aAAc,CAAC;QAC/D,IAAI,GAAG,GAAG,MAAM,CAAC,WAAW,IAAG,MAAA,MAAM,CAAC,aAAa,0CAAE,WAAY,CAAA,CAAC;QAElE,IAAI,SAAS,IAAI,MAAM,EAAE;YACvB,IAAI,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,gBAAgB,CAAC,WAAW,GAAG,CAAC,EAAE;gBAC7D,OAAO;aACR;YAED,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,gBAAgB,CAAC,WAAW,CAAC;YAC1E,IAAI,IAAI,CAAC,gBAAgB,CAAC,sBAAsB,EAAE;gBAChD,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC,sBAAqC,CAAC;aACrF;SACF;aAAM,IAAI,SAAS,IAAI,MAAM,EAAE;YAC9B,IAAI,CAAC,GAAG,IAAI,CAAC,YAAY,GAAG,GAAG,EAAE;gBAC/B,OAAO;aACR;YAED,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,gBAAgB,CAAC,WAAW,CAAC;YAC1E,IAAI,IAAI,CAAC,gBAAgB,CAAC,kBAAkB,EAAE;gBAC5C,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC,kBAAiC,CAAC;aACjF;SACF;QAED,MAAM,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,EAAE;YACtC,EAAE,CAAC,KAAK,CAAC,kBAAkB,GAAG,MAAM,CAAC;YACrC,EAAE,CAAC,KAAK,CAAC,wBAAwB,GAAG,UAAU,CAAC;YAC/C,EAAE,CAAC,KAAK,CAAC,SAAS,GAAG,cAAc,GAAG,IAAI,CAAC,YAAY,GAAG,WAAW,CAAC;SACvE,CAAC,CAAC;KACJ;IAUD,MAAM;QACJ,QACE,4DACE,KAAK,EACH,wBAAwB;gBACxB,IAAI,CAAC,UAAU;gBACf,eAAe;gBACf,IAAI,CAAC,UAAU;gBACf,wBAAwB;gBACxB,IAAI,CAAC,kBAAkB;gBACvB,+BAA+B;gBAC/B,IAAI,CAAC,yBAAyB;gBAC9B,wCAAwC;gBACxC,IAAI,CAAC,iCAAiC;gBACtC,4BAA4B;gBAC5B,IAAI,CAAC,sBAAsB;gBAC3B,sBAAsB;gBACtB,IAAI,CAAC,gBAAgB,IAGvB,4DAAK,KAAK,EAAC,YAAY,IACrB,4DAAK,KAAK,EAAC,aAAa,EAAC,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAAE,KAAK,EAAC,UAAU,IACvE,4DAAK,KAAK,EAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,UAAU,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,IAC1F,6DAAM,CAAC,EAAC,kDAAkD,EAAC,MAAM,EAAC,SAAS,kBAAc,GAAG,GAAG,CAC3F,CACF,EACN,4DAAK,KAAK,EAAC,QAAQ,IACjB,6DACG,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,KACtB,UAAI,OAAO,EAAE,IAAI,CAAC,eAAe,IAAG,KAAK,CAAC,QAAQ,CAAM,CACzD,CAAC,CACC,CACD,EACN,4DAAK,KAAK,EAAC,aAAa,EAAC,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAAE,KAAK,EAAC,MAAM,IACnE,4DAAK,KAAK,EAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,UAAU,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,IAC1F,6DAAM,CAAC,EAAC,oDAAoD,EAAC,MAAM,EAAC,SAAS,kBAAc,GAAG,GAAG,CAC7F,CACF,CACF,EACN,8DAAa,CACT,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveTabbedContent"],"sources":["src/components/biggive-tabbed-content/biggive-tabbed-content.scss?tag=biggive-tabbed-content&encapsulation=shadow","src/components/biggive-tabbed-content/biggive-tabbed-content.tsx"],"sourcesContent":["@include spacers();\n@include text-colours();\n\n:host {\n  display: contents;\n}\n\n::slotted(*) {\n  display: none;\n}\n\n.container {\n  @include standard-font();\n  position: relative;\n\n  .navigation {\n    padding: 0 40px;\n    .button {\n      position: absolute;\n      top: 5px;\n      display: block;\n      width: 30px;\n      height: 30px;\n      padding: 2.5px 10px;\n      box-sizing: border-box;\n      background-color: #FFFFFF;\n      box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.25);\n      border-radius: 50%;\n      cursor: pointer;\n      text-align: center;\n      &.prev {\n        left: 0;\n      }\n      &.next {\n        right: 0;\n      }\n      svg {\n        width: 10px;\n        height: 10px;\n      }\n    }\n    .sleeve {\n      border-bottom: 1px solid $colour-grey-light;\n      overflow: hidden;\n      ul {\n        margin: 0;\n        padding: 0;\n        list-style-type: none;\n        display: flex;\n        li {\n          flex-grow: 1;\n          padding: 10px 20px;\n          margin: 0;\n          width: calc(33.3% - 20px);\n          border-bottom: 3px solid transparent;\n          text-align: center;\n          white-space: nowrap;\n          cursor: pointer;\n          &.selected {\n            font-weight: bold;\n          }\n        }\n      }\n    }\n  }\n\n  @each $key, $colour in $brandColoursIncBrand6Turquoise {\n    &.text-colour-#{$key} .navigation li { color: $colour; }\n    &.navigation-highlight-colour-#{$key} .navigation ul {border-color: $colour; }\n    &.selected-text-colour-#{$key} .navigation li.selected { color: $colour; border-color: $colour; }\n    &.selected-navigation-highlight-colour-#{$key} .navigation li.selected { border-color: $colour; }\n    &.button-background-colour-#{$key} .navigation .button { background-color: $colour; }\n    &.button-icon-colour-#{$key} .navigation .button svg path { stroke: $colour; }\n  }\n\n}","import { Component, Prop, Element, h } from '@stencil/core';\nimport { brandColour } from '../../globals/brand-colour';\nimport { spacingOption } from '../../globals/spacing-option';\n\n@Component({\n  tag: 'biggive-tabbed-content',\n  styleUrl: 'biggive-tabbed-content.scss',\n  shadow: true,\n})\nexport class BiggiveTabbedContent {\n  @Element() host: HTMLBiggiveTabbedContentElement;\n\n  @Prop() spaceBelow: spacingOption = 0;\n\n  @Prop() textColour: brandColour = 'black';\n\n  @Prop() selectedTextColour: brandColour = 'primary';\n\n  @Prop() navigationHighlightColour: brandColour = 'grey-medium';\n\n  @Prop() selectedNavigationHighlightColour: brandColour = 'primary';\n\n  @Prop() buttonBackgroundColour: brandColour = 'white';\n\n  @Prop() buttonIconColour: brandColour = 'primary';\n\n  private scrollContextTab: HTMLElement | null;\n  private scrollOffset: number = 0;\n  private children: Array<HTMLBiggiveTabElement> = [];\n\n  componentWillLoad() {\n    this.children = Array.from(this.host.children) as Array<HTMLBiggiveTabElement>;\n  }\n\n  componentDidRender() {\n    this.showTab(0);\n\n    this.scrollContextTab = this.host.shadowRoot?.querySelector('.navigation .sleeve ul li')!;\n\n    const sleeveElement: HTMLElement = this.host.shadowRoot?.querySelector('.navigation .sleeve')!;\n\n    if (sleeveElement.scrollWidth > sleeveElement.offsetWidth) {\n      this.host.shadowRoot?.querySelectorAll('.navigation .button').forEach(function (button: HTMLElement) {\n        button.style.display = 'block';\n      });\n    } else {\n      this.host.shadowRoot?.querySelectorAll('.navigation .button').forEach(function (button: HTMLElement) {\n        button.style.display = 'none';\n      });\n    }\n  }\n\n  /*\n   * Shows the i'th tab, counting from zero. Does nothing if i out of range.\n   */\n  private showTab(i: number) {\n    const tabs = this.host.shadowRoot?.querySelectorAll('.navigation ul li')!;\n\n    if (i >= 0 && i <= tabs?.length - 1) {\n      let j = 0;\n      tabs?.forEach(function (tab) {\n        if (i == j) {\n          tab.classList.add('selected');\n        } else {\n          tab.classList.remove('selected');\n        }\n        j++;\n      });\n\n      j = 0;\n      this.host.querySelectorAll('biggive-tab').forEach(function (tab) {\n        tab.style.display = i == j ? 'block' : 'none';\n        j++;\n      });\n    }\n  }\n\n  private clickTabHandler = (e: MouseEvent) => {\n    let i = 0;\n    const parent = (e.target as Element).parentElement!;\n    for (let el of Array.from(parent.children)) {\n      if (el == e.target) {\n        this.showTab(i);\n        return;\n      }\n      i++;\n    }\n  };\n\n  private scrollTab(direction: 'NEXT' | 'PREV') {\n    if (!this.scrollContextTab) {\n      return;\n    }\n\n    let sleeve: HTMLElement = this.scrollContextTab.parentElement!;\n    let max = sleeve.scrollWidth - sleeve.parentElement?.offsetWidth!;\n\n    if (direction == 'PREV') {\n      if (this.scrollOffset + this.scrollContextTab.offsetWidth > 0) {\n        return;\n      }\n\n      this.scrollOffset = this.scrollOffset + this.scrollContextTab.offsetWidth;\n      if (this.scrollContextTab.previousElementSibling) {\n        this.scrollContextTab = this.scrollContextTab.previousElementSibling as HTMLElement;\n      }\n    } else if (direction == 'NEXT') {\n      if (0 - this.scrollOffset > max) {\n        return;\n      }\n\n      this.scrollOffset = this.scrollOffset - this.scrollContextTab.offsetWidth;\n      if (this.scrollContextTab.nextElementSibling) {\n        this.scrollContextTab = this.scrollContextTab.nextElementSibling as HTMLElement;\n      }\n    }\n\n    sleeve.querySelectorAll('li').forEach(li => {\n      li.style.transitionDuration = '0.3s';\n      li.style.transitionTimingFunction = 'ease-out';\n      li.style.transform = 'translate3d(' + this.scrollOffset + 'px, 0, 0)';\n    });\n  }\n\n  private clickPrevHandler = () => {\n    this.scrollTab('PREV');\n  };\n\n  private clickNextHandler = () => {\n    this.scrollTab('NEXT');\n  };\n\n  render() {\n    return (\n      <div\n        class={\n          'container space-below-' +\n          this.spaceBelow +\n          ' text-colour-' +\n          this.textColour +\n          ' selected-text-colour-' +\n          this.selectedTextColour +\n          ' navigation-highlight-colour-' +\n          this.navigationHighlightColour +\n          ' selected-navigation-highlight-colour-' +\n          this.selectedNavigationHighlightColour +\n          ' button-background-colour-' +\n          this.buttonBackgroundColour +\n          ' button-icon-colour-' +\n          this.buttonIconColour\n        }\n      >\n        <div class=\"navigation\">\n          <div class=\"button prev\" onClick={this.clickPrevHandler} title=\"Previous\">\n            <svg width=\"9\" height=\"16\" viewBox=\"0 0 9 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M8.29311 14.5703L1.73926 8.01646L8.29311 1.46261\" stroke=\"#000000\" stroke-width=\"2\" />\n            </svg>\n          </div>\n          <div class=\"sleeve\">\n            <ul>\n              {this.children.map(child => (\n                <li onClick={this.clickTabHandler}>{child.tabTitle}</li>\n              ))}\n            </ul>\n          </div>\n          <div class=\"button next\" onClick={this.clickNextHandler} title=\"Next\">\n            <svg width=\"9\" height=\"16\" viewBox=\"0 0 9 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M0.739117 1.46094L7.29297 8.01479L0.739118 14.5686\" stroke=\"#000000\" stroke-width=\"2\" />\n            </svg>\n          </div>\n        </div>\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"biggive-tabbed-content.js","mappings":"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","names":["BiggiveTabbedContent"],"sources":["src/components/biggive-tabbed-content/biggive-tabbed-content.scss?tag=biggive-tabbed-content&encapsulation=shadow","src/components/biggive-tabbed-content/biggive-tabbed-content.tsx"],"sourcesContent":["@include spacers();\n@include text-colours();\n\n:host {\n  display: contents;\n}\n\n::slotted(*) {\n  display: none;\n}\n\n.container {\n  @include standard-font();\n  position: relative;\n\n  .navigation {\n    padding: 0 40px;\n    .button {\n      position: absolute;\n      top: 5px;\n      display: block;\n      width: 30px;\n      height: 30px;\n      padding: 2.5px 10px;\n      box-sizing: border-box;\n      background-color: #FFFFFF;\n      box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.25);\n      border-radius: 50%;\n      cursor: pointer;\n      text-align: center;\n      &.prev {\n        left: 0;\n      }\n      &.next {\n        right: 0;\n      }\n      svg {\n        width: 10px;\n        height: 10px;\n      }\n    }\n    .sleeve {\n      border-bottom: 1px solid $colour-grey-light;\n      overflow: hidden;\n      ul {\n        margin: 0;\n        padding: 0;\n        list-style-type: none;\n        display: flex;\n        li {\n          flex-grow: 1;\n          padding: 10px 20px;\n          margin: 0;\n          width: calc(33.3% - 20px);\n          border-bottom: 3px solid transparent;\n          text-align: center;\n          white-space: nowrap;\n          cursor: pointer;\n          &.selected {\n            font-weight: bold;\n          }\n        }\n      }\n    }\n  }\n\n  @each $key, $colour in $brandColoursIncBrand6Turquoise {\n    &.text-colour-#{$key} .navigation li { color: $colour; }\n    &.navigation-highlight-colour-#{$key} .navigation ul {border-color: $colour; }\n    &.selected-text-colour-#{$key} .navigation li.selected { color: $colour; border-color: $colour; }\n    &.selected-navigation-highlight-colour-#{$key} .navigation li.selected { border-color: $colour; }\n    &.button-background-colour-#{$key} .navigation .button { background-color: $colour; }\n    &.button-icon-colour-#{$key} .navigation .button svg path { stroke: $colour; }\n  }\n\n}","import { Component, Prop, Element, h } from '@stencil/core';\nimport { brandColour } from '../../globals/brand-colour';\nimport { spacingOption } from '../../globals/spacing-option';\n\n@Component({\n  tag: 'biggive-tabbed-content',\n  styleUrl: 'biggive-tabbed-content.scss',\n  shadow: true,\n})\nexport class BiggiveTabbedContent {\n  @Element() host: HTMLBiggiveTabbedContentElement;\n\n  @Prop() spaceBelow: spacingOption = 0;\n\n  @Prop() textColour: brandColour = 'black';\n\n  @Prop() selectedTextColour: brandColour = 'primary';\n\n  @Prop() navigationHighlightColour: brandColour = 'grey-medium';\n\n  @Prop() selectedNavigationHighlightColour: brandColour = 'primary';\n\n  @Prop() buttonBackgroundColour: brandColour = 'white';\n\n  @Prop() buttonIconColour: brandColour = 'primary';\n\n  private scrollContextTab: HTMLElement | null;\n  private scrollOffset: number = 0;\n  private children: Array<HTMLBiggiveTabElement> = [];\n\n  componentWillLoad() {\n    this.children = Array.from(this.host.children) as Array<HTMLBiggiveTabElement>;\n  }\n\n  componentDidRender() {\n    this.showTab(0);\n\n    this.scrollContextTab = this.host.shadowRoot?.querySelector('.navigation .sleeve ul li')!;\n\n    const sleeveElement: HTMLElement = this.host.shadowRoot?.querySelector('.navigation .sleeve')!;\n\n    if (sleeveElement.scrollWidth > sleeveElement.offsetWidth) {\n      this.host.shadowRoot?.querySelectorAll('.navigation .button').forEach(function (button: HTMLElement) {\n        button.style.display = 'block';\n      });\n    } else {\n      this.host.shadowRoot?.querySelectorAll('.navigation .button').forEach(function (button: HTMLElement) {\n        button.style.display = 'none';\n      });\n    }\n  }\n\n  /*\n   * Shows the i'th tab, counting from zero. Does nothing if i out of range.\n   */\n  private showTab(i: number) {\n    const tabs = this.host.shadowRoot?.querySelectorAll('.navigation ul li')!;\n\n    if (i >= 0 && i <= tabs?.length - 1) {\n      let j = 0;\n      tabs?.forEach(function (tab) {\n        if (i == j) {\n          tab.classList.add('selected');\n        } else {\n          tab.classList.remove('selected');\n        }\n        j++;\n      });\n\n      j = 0;\n      this.host.querySelectorAll('biggive-tab').forEach(function (tab) {\n        tab.style.display = i == j ? 'block' : 'none';\n        j++;\n      });\n    }\n  }\n\n  private clickTabHandler = (e: MouseEvent) => {\n    let i = 0;\n    const parent = (e.target as Element).parentElement!;\n    for (let el of Array.from(parent.children)) {\n      if (el == e.target) {\n        this.showTab(i);\n        return;\n      }\n      i++;\n    }\n  };\n\n  private scrollTab(direction: 'NEXT' | 'PREV') {\n    if (!this.scrollContextTab) {\n      return;\n    }\n\n    let sleeve: HTMLElement = this.scrollContextTab.parentElement!;\n    let max = sleeve.scrollWidth - sleeve.parentElement?.offsetWidth!;\n\n    if (direction == 'PREV') {\n      if (this.scrollOffset + this.scrollContextTab.offsetWidth > 0) {\n        return;\n      }\n\n      this.scrollOffset = this.scrollOffset + this.scrollContextTab.offsetWidth;\n      if (this.scrollContextTab.previousElementSibling) {\n        this.scrollContextTab = this.scrollContextTab.previousElementSibling as HTMLElement;\n      }\n    } else if (direction == 'NEXT') {\n      if (0 - this.scrollOffset > max) {\n        return;\n      }\n\n      this.scrollOffset = this.scrollOffset - this.scrollContextTab.offsetWidth;\n      if (this.scrollContextTab.nextElementSibling) {\n        this.scrollContextTab = this.scrollContextTab.nextElementSibling as HTMLElement;\n      }\n    }\n\n    sleeve.querySelectorAll('li').forEach(li => {\n      li.style.transitionDuration = '0.3s';\n      li.style.transitionTimingFunction = 'ease-out';\n      li.style.transform = 'translate3d(' + this.scrollOffset + 'px, 0, 0)';\n    });\n  }\n\n  private clickPrevHandler = () => {\n    this.scrollTab('PREV');\n  };\n\n  private clickNextHandler = () => {\n    this.scrollTab('NEXT');\n  };\n\n  render() {\n    return (\n      <div\n        class={\n          'container space-below-' +\n          this.spaceBelow +\n          ' text-colour-' +\n          this.textColour +\n          ' selected-text-colour-' +\n          this.selectedTextColour +\n          ' navigation-highlight-colour-' +\n          this.navigationHighlightColour +\n          ' selected-navigation-highlight-colour-' +\n          this.selectedNavigationHighlightColour +\n          ' button-background-colour-' +\n          this.buttonBackgroundColour +\n          ' button-icon-colour-' +\n          this.buttonIconColour\n        }\n      >\n        <div class=\"navigation\">\n          <div class=\"button prev\" onClick={this.clickPrevHandler} title=\"Previous\">\n            <svg width=\"9\" height=\"16\" viewBox=\"0 0 9 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M8.29311 14.5703L1.73926 8.01646L8.29311 1.46261\" stroke=\"#000000\" stroke-width=\"2\" />\n            </svg>\n          </div>\n          <div class=\"sleeve\">\n            <ul>\n              {this.children.map(child => (\n                <li onClick={this.clickTabHandler}>{child.tabTitle}</li>\n              ))}\n            </ul>\n          </div>\n          <div class=\"button next\" onClick={this.clickNextHandler} title=\"Next\">\n            <svg width=\"9\" height=\"16\" viewBox=\"0 0 9 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M0.739117 1.46094L7.29297 8.01479L0.739118 14.5686\" stroke=\"#000000\" stroke-width=\"2\" />\n            </svg>\n          </div>\n        </div>\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"],"version":3}

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

@@ -1 +1 @@
-{"file":"biggive-table.js","mappings":";;AAAA,MAAM,eAAe,GAAG,+qTAA+qT,CAAC;AACxsT,2BAAe,eAAe;;MCQjBA,cAAY;;;;0BACa,CAAC;gCAEG,SAAS;sCAEH,OAAO;8BAEf,OAAO;oCAED,YAAY;;IAExD,MAAM;QACJ,QACE,4DACE,KAAK,EACH,+BAA+B;gBAC/B,IAAI,CAAC,gBAAgB;gBACrB,4BAA4B;gBAC5B,IAAI,CAAC,sBAAsB;gBAC3B,oBAAoB;gBACpB,IAAI,CAAC,cAAc;gBACnB,0BAA0B;gBAC1B,IAAI,CAAC,oBAAoB;gBACzB,eAAe;gBACf,IAAI,CAAC,UAAU,IAGjB,8DAAa,CACT,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveTable"],"sources":["src/components/biggive-table/biggive-table.scss?tag=biggive-table","src/components/biggive-table/biggive-table.tsx"],"sourcesContent":["@include backgrounds();\n@include fills();\n\n:host {\n  display: contents;\n  @include standard-font();\n}\n\n\n.container {\n\n  @each $key, $colour in $brandColoursIncBrand6Turquoise {\n    &.header-text-colour-#{$key} thead { color: $colour; }\n    &.header-background-colour-#{$key} thead { background-color: $colour; }\n    &.body-text-colour-#{$key} tbody { color: $colour; }\n    &.body-background-colour-#{$key} tbody { background-color: $colour; }\n  }\n\n\n  table {\n    width: 100%;\n    border-collapse: collapse;\n    border: 0;\n\n    td,th {\n      padding: 10px 20px;\n      border: 0;\n      font-size: inherit;\n    }\n\n    thead {\n      filter: drop-shadow(-1px 3px 12px rgba(0,0,0,0.15));\n      td,th {\n        font-weight: bold;\n      }\n    }\n\n    tbody {\n      tr.odd {\n        background-color: rgba(255,255,255,0.3);\n      }\n      \n      td,th {\n        font-size: 80%;\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-table',\n  styleUrl: 'biggive-table.scss',\n  shadow: false,\n})\nexport class BiggiveTable {\n  @Prop() spaceBelow: spacingOption = 0;\n\n  @Prop() headerTextColour: brandColour = 'primary';\n\n  @Prop() headerBackgroundColour: brandColour = 'white';\n\n  @Prop() bodyTextColour: brandColour = 'black';\n\n  @Prop() bodyBackgroundColour: brandColour = 'grey-light';\n\n  render() {\n    return (\n      <div\n        class={\n          'container header-text-colour-' +\n          this.headerTextColour +\n          ' header-background-colour-' +\n          this.headerBackgroundColour +\n          ' body-text-colour-' +\n          this.bodyTextColour +\n          ' body-background-colour-' +\n          this.bodyBackgroundColour +\n          ' space-below-' +\n          this.spaceBelow\n        }\n      >\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"biggive-table.js","mappings":";;AAAA,MAAM,eAAe,GAAG,+qTAA+qT,CAAC;AACxsT,2BAAe,eAAe;;MCQjBA,cAAY;IALzB;;;QAMU,eAAU,GAAkB,CAAC,CAAC;QAE9B,qBAAgB,GAAgB,SAAS,CAAC;QAE1C,2BAAsB,GAAgB,OAAO,CAAC;QAE9C,mBAAc,GAAgB,OAAO,CAAC;QAEtC,yBAAoB,GAAgB,YAAY,CAAC;KAsB1D;IApBC,MAAM;QACJ,QACE,4DACE,KAAK,EACH,+BAA+B;gBAC/B,IAAI,CAAC,gBAAgB;gBACrB,4BAA4B;gBAC5B,IAAI,CAAC,sBAAsB;gBAC3B,oBAAoB;gBACpB,IAAI,CAAC,cAAc;gBACnB,0BAA0B;gBAC1B,IAAI,CAAC,oBAAoB;gBACzB,eAAe;gBACf,IAAI,CAAC,UAAU,IAGjB,8DAAa,CACT,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveTable"],"sources":["src/components/biggive-table/biggive-table.scss?tag=biggive-table","src/components/biggive-table/biggive-table.tsx"],"sourcesContent":["@include backgrounds();\n@include fills();\n\n:host {\n  display: contents;\n  @include standard-font();\n}\n\n\n.container {\n\n  @each $key, $colour in $brandColoursIncBrand6Turquoise {\n    &.header-text-colour-#{$key} thead { color: $colour; }\n    &.header-background-colour-#{$key} thead { background-color: $colour; }\n    &.body-text-colour-#{$key} tbody { color: $colour; }\n    &.body-background-colour-#{$key} tbody { background-color: $colour; }\n  }\n\n\n  table {\n    width: 100%;\n    border-collapse: collapse;\n    border: 0;\n\n    td,th {\n      padding: 10px 20px;\n      border: 0;\n      font-size: inherit;\n    }\n\n    thead {\n      filter: drop-shadow(-1px 3px 12px rgba(0,0,0,0.15));\n      td,th {\n        font-weight: bold;\n      }\n    }\n\n    tbody {\n      tr.odd {\n        background-color: rgba(255,255,255,0.3);\n      }\n      \n      td,th {\n        font-size: 80%;\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-table',\n  styleUrl: 'biggive-table.scss',\n  shadow: false,\n})\nexport class BiggiveTable {\n  @Prop() spaceBelow: spacingOption = 0;\n\n  @Prop() headerTextColour: brandColour = 'primary';\n\n  @Prop() headerBackgroundColour: brandColour = 'white';\n\n  @Prop() bodyTextColour: brandColour = 'black';\n\n  @Prop() bodyBackgroundColour: brandColour = 'grey-light';\n\n  render() {\n    return (\n      <div\n        class={\n          'container header-text-colour-' +\n          this.headerTextColour +\n          ' header-background-colour-' +\n          this.headerBackgroundColour +\n          ' body-text-colour-' +\n          this.bodyTextColour +\n          ' body-background-colour-' +\n          this.bodyBackgroundColour +\n          ' space-below-' +\n          this.spaceBelow\n        }\n      >\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/biggive-text-input.js

@@ -8,8 +8,6 @@ const BiggiveTextInput$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveTextInp
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.value = undefined;
-        this.currency = undefined;
         this.spaceBelow = 0;
         this.selectStyle = 'bordered';
     }

package/dist/components/biggive-text-input.js.map

@@ -1 +1 @@
-{"file":"biggive-text-input.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,gzDAAgzD,CAAC;AAC70D,+BAAe,mBAAmB;;MCYrBA,kBAAgB;;;;;;;0BAOE,CAAC;2BACmB,UAAU;;IAE3D,MAAM;QACJ,MAAM,cAAc,GAAG,IAAI,CAAC,QAAQ,KAAK,KAAK,GAAG,GAAG,GAAG,IAAI,CAAC,QAAQ,KAAK,KAAK,GAAG,GAAG,GAAG,SAAS,CAAC;QACjG,QACE,4DAAK,KAAK,EAAE,yBAAyB,GAAG,IAAI,CAAC,UAAU,GAAG,gBAAgB,GAAG,IAAI,CAAC,WAAW,IAC3F,4DAAK,KAAK,EAAC,QAAQ,IACjB,+DACE,6DAAM,IAAI,EAAC,OAAO,GAAG,CAChB,CACH,EACN,4DAAK,KAAK,EAAC,QAAQ,IACjB,4DAAK,KAAK,EAAC,cAAc,IACtB,cAAc,IAAI,6DAAM,KAAK,EAAC,iBAAiB,IAAE,cAAc,CAAQ,EACxE,6DAAM,IAAI,EAAC,OAAO,GAAG,EACrB,4DAAK,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,GAAQ,CACjC,CACF,CACF,EACN;KACH;IAED,gBAAgB;QACd,MAAM,WAAW,GAAuB,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;QAClF,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,UAAW,CAAC,aAAa,CAAC,SAAS,CAAE,CAAC;QAE/D,IAAI,CAAC,WAAW,EAAE;YAChB,MAAM,IAAI,KAAK,CAAC,oDAAoD,CAAC,CAAC;SACvE;QAED,WAAW,CAAC,gBAAgB,CAAC,SAAS,EAAE,MAAM,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC;QAC/E,WAAW,CAAC,gBAAgB,CAAC,UAAU,EAAE,MAAM,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC;KACpF;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveTextInput"],"sources":["src/components/biggive-text-input/biggive-text-input.scss?tag=biggive-text-input&encapsulation=shadow","src/components/biggive-text-input/biggive-text-input.tsx"],"sourcesContent":["@include spacers();\n\n:host {\n  display: contents;\n}\n\n::slotted([slot=label]) {\n  display: inline-block;\n  line-height: 1.2; // Slightly less than other text to help with long charity names.\n}\n\n.text-input {\n  .currency-symbol {\n    position: absolute;\n  }\n  position: relative;\n  .prompt {\n    position: relative;\n    z-index: 2;\n    font-size: small;\n    top: 1em;\n    left: 4em;\n    color: $colour-primary-blue;\n    max-width: calc(100% - 10em);\n    display: inline-block;\n\n    > span {\n      padding-left: 1em;\n      padding-right: 1em;\n      background-color: $colour-grey-background;\n    }\n  }\n\n  @include standard-font();\n  position: relative;\n  text-align: left;\n  &.select-style-bordered {\n    .sleeve {\n      @include font-size-large();\n      font-weight: bolder;\n      padding: 2px;\n      position: relative;\n      background-color: $colour-primary-blue;\n      @include corner-clip-small-top-right();\n      .inner-sleeve {\n        background-color: $colour-grey-background;\n        color: $colour-primary-blue;\n        display: block;\n        position: relative;\n        padding: 10px 30px 10px 10px;\n        clip-path:\n          polygon(\n            0% 0%,     /* top left */\n            0% 0%,     /* top left */\n            calc(100% - 14px) 0%,    /* top right */\n            100% 14px,   /* top right */\n            100% 100%,  /* bottom right */\n            100% 100%,  /* bottom right */\n            0 100%,   /* bottom left */\n            0 100%      /* bottom left */\n          );\n        &:after {\n          content: '';\n          display: block;\n          position: absolute;\n          right: 20px;\n          top: 18px;\n          width: 10px;\n          height: 10px;\n          background-size: contain;\n          background-repeat: no-repeat;\n          background-position: center center;\n        }\n      }\n      &.focused {\n        background-color: $colour-tertiary-coral;\n      }\n    }\n  }\n}\n\n","import { Component, Element, h, Prop } from '@stencil/core';\n\n/**\n * Initially developed for use within the new donate stepper design. Currently has a hard-coded background\n * of $colour-grey-background, intened to appear transparent when used on a page with a matching background.\n *\n * Please ensure input is styled as width: 100%.\n */\n@Component({\n  tag: 'biggive-text-input',\n  styleUrl: 'biggive-text-input.scss',\n  shadow: true,\n})\nexport class BiggiveTextInput {\n  @Element() host: HTMLBiggiveTextInputElement;\n  @Prop() value!: string;\n  /**\n   * ISO-4217 currency code if input is for a money value\n   */\n  @Prop() currency: 'GBP' | 'USD' | undefined;\n  @Prop() spaceBelow: number = 0;\n  @Prop() selectStyle: 'bordered' | 'underlined' = 'bordered';\n\n  render() {\n    const currencySymbol = this.currency === 'GBP' ? '£' : this.currency === 'USD' ? '$' : undefined;\n    return (\n      <div class={'text-input space-below-' + this.spaceBelow + ' select-style-' + this.selectStyle}>\n        <div class=\"prompt\">\n          <span>\n            <slot name=\"label\" />\n          </span>\n        </div>\n        <div class=\"sleeve\">\n          <div class=\"inner-sleeve\">\n            {currencySymbol && <span class=\"currency-symbol\">{currencySymbol}</span>}\n            <slot name=\"input\" />\n            <div style={{ clear: 'both' }}></div>\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  componentDidLoad() {\n    const nativeInput: HTMLElement | null = this.host.querySelector(`[slot=\"input\"]`);\n    const sleave = this.host.shadowRoot!.querySelector('.sleeve')!;\n\n    if (!nativeInput) {\n      throw new Error('Input slot element required for biggive-text-input');\n    }\n\n    nativeInput.addEventListener('focusin', () => sleave.classList.add('focused'));\n    nativeInput.addEventListener('focusout', () => sleave.classList.remove('focused'));\n  }\n}\n"],"version":3}
+{"file":"biggive-text-input.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,gzDAAgzD,CAAC;AAC70D,+BAAe,mBAAmB;;MCYrBA,kBAAgB;IAL7B;;;;QAYU,eAAU,GAAW,CAAC,CAAC;QACvB,gBAAW,GAA8B,UAAU,CAAC;KAiC7D;IA/BC,MAAM;QACJ,MAAM,cAAc,GAAG,IAAI,CAAC,QAAQ,KAAK,KAAK,GAAG,GAAG,GAAG,IAAI,CAAC,QAAQ,KAAK,KAAK,GAAG,GAAG,GAAG,SAAS,CAAC;QACjG,QACE,4DAAK,KAAK,EAAE,yBAAyB,GAAG,IAAI,CAAC,UAAU,GAAG,gBAAgB,GAAG,IAAI,CAAC,WAAW,IAC3F,4DAAK,KAAK,EAAC,QAAQ,IACjB,+DACE,6DAAM,IAAI,EAAC,OAAO,GAAG,CAChB,CACH,EACN,4DAAK,KAAK,EAAC,QAAQ,IACjB,4DAAK,KAAK,EAAC,cAAc,IACtB,cAAc,IAAI,6DAAM,KAAK,EAAC,iBAAiB,IAAE,cAAc,CAAQ,EACxE,6DAAM,IAAI,EAAC,OAAO,GAAG,EACrB,4DAAK,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,GAAQ,CACjC,CACF,CACF,EACN;KACH;IAED,gBAAgB;QACd,MAAM,WAAW,GAAuB,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;QAClF,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,UAAW,CAAC,aAAa,CAAC,SAAS,CAAE,CAAC;QAE/D,IAAI,CAAC,WAAW,EAAE;YAChB,MAAM,IAAI,KAAK,CAAC,oDAAoD,CAAC,CAAC;SACvE;QAED,WAAW,CAAC,gBAAgB,CAAC,SAAS,EAAE,MAAM,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC;QAC/E,WAAW,CAAC,gBAAgB,CAAC,UAAU,EAAE,MAAM,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC;KACpF;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveTextInput"],"sources":["src/components/biggive-text-input/biggive-text-input.scss?tag=biggive-text-input&encapsulation=shadow","src/components/biggive-text-input/biggive-text-input.tsx"],"sourcesContent":["@include spacers();\n\n:host {\n  display: contents;\n}\n\n::slotted([slot=label]) {\n  display: inline-block;\n  line-height: 1.2; // Slightly less than other text to help with long charity names.\n}\n\n.text-input {\n  .currency-symbol {\n    position: absolute;\n  }\n  position: relative;\n  .prompt {\n    position: relative;\n    z-index: 2;\n    font-size: small;\n    top: 1em;\n    left: 4em;\n    color: $colour-primary-blue;\n    max-width: calc(100% - 10em);\n    display: inline-block;\n\n    > span {\n      padding-left: 1em;\n      padding-right: 1em;\n      background-color: $colour-grey-background;\n    }\n  }\n\n  @include standard-font();\n  position: relative;\n  text-align: left;\n  &.select-style-bordered {\n    .sleeve {\n      @include font-size-large();\n      font-weight: bolder;\n      padding: 2px;\n      position: relative;\n      background-color: $colour-primary-blue;\n      @include corner-clip-small-top-right();\n      .inner-sleeve {\n        background-color: $colour-grey-background;\n        color: $colour-primary-blue;\n        display: block;\n        position: relative;\n        padding: 10px 30px 10px 10px;\n        clip-path:\n          polygon(\n            0% 0%,     /* top left */\n            0% 0%,     /* top left */\n            calc(100% - 14px) 0%,    /* top right */\n            100% 14px,   /* top right */\n            100% 100%,  /* bottom right */\n            100% 100%,  /* bottom right */\n            0 100%,   /* bottom left */\n            0 100%      /* bottom left */\n          );\n        &:after {\n          content: '';\n          display: block;\n          position: absolute;\n          right: 20px;\n          top: 18px;\n          width: 10px;\n          height: 10px;\n          background-size: contain;\n          background-repeat: no-repeat;\n          background-position: center center;\n        }\n      }\n      &.focused {\n        background-color: $colour-tertiary-coral;\n      }\n    }\n  }\n}\n\n","import { Component, Element, h, Prop } from '@stencil/core';\n\n/**\n * Initially developed for use within the new donate stepper design. Currently has a hard-coded background\n * of $colour-grey-background, intened to appear transparent when used on a page with a matching background.\n *\n * Please ensure input is styled as width: 100%.\n */\n@Component({\n  tag: 'biggive-text-input',\n  styleUrl: 'biggive-text-input.scss',\n  shadow: true,\n})\nexport class BiggiveTextInput {\n  @Element() host: HTMLBiggiveTextInputElement;\n  @Prop() value!: string;\n  /**\n   * ISO-4217 currency code if input is for a money value\n   */\n  @Prop() currency: 'GBP' | 'USD' | undefined;\n  @Prop() spaceBelow: number = 0;\n  @Prop() selectStyle: 'bordered' | 'underlined' = 'bordered';\n\n  render() {\n    const currencySymbol = this.currency === 'GBP' ? '£' : this.currency === 'USD' ? '$' : undefined;\n    return (\n      <div class={'text-input space-below-' + this.spaceBelow + ' select-style-' + this.selectStyle}>\n        <div class=\"prompt\">\n          <span>\n            <slot name=\"label\" />\n          </span>\n        </div>\n        <div class=\"sleeve\">\n          <div class=\"inner-sleeve\">\n            {currencySymbol && <span class=\"currency-symbol\">{currencySymbol}</span>}\n            <slot name=\"input\" />\n            <div style={{ clear: 'both' }}></div>\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  componentDidLoad() {\n    const nativeInput: HTMLElement | null = this.host.querySelector(`[slot=\"input\"]`);\n    const sleave = this.host.shadowRoot!.querySelector('.sleeve')!;\n\n    if (!nativeInput) {\n      throw new Error('Input slot element required for biggive-text-input');\n    }\n\n    nativeInput.addEventListener('focusin', () => sleave.classList.add('focused'));\n    nativeInput.addEventListener('focusout', () => sleave.classList.remove('focused'));\n  }\n}\n"],"version":3}

package/dist/components/biggive-timeline-entry.js

@@ -8,8 +8,6 @@ const BiggiveTimelineEntry$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveTim
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.date = undefined;
-        this.heading = undefined;
     }
     render() {
         return null;

package/dist/components/biggive-timeline-entry.js.map

@@ -1 +1 @@
-{"file":"biggive-timeline-entry.js","mappings":";;AAAA,MAAM,uBAAuB,GAAG,6FAA6F,CAAC;AAC9H,mCAAe,uBAAuB;;MCMzBA,sBAAoB;;;;;;;;IAQ/B,MAAM;QACJ,OAAO,IAAI,CAAC;KACb;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveTimelineEntry"],"sources":["src/components/biggive-timeline-entry/biggive-timeline-entry.scss?tag=biggive-timeline-entry&encapsulation=shadow","src/components/biggive-timeline-entry/biggive-timeline-entry.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n","import { Component, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-timeline-entry',\n  styleUrl: 'biggive-timeline-entry.scss',\n  shadow: true,\n})\nexport class BiggiveTimelineEntry {\n  /**\n   * Should be in the format 'YYYY-mm-dd', for example '2023-01-01'\n   */\n  @Prop() date: string;\n\n  @Prop() heading: string;\n\n  render() {\n    return null;\n  }\n}\n"],"version":3}
+{"file":"biggive-timeline-entry.js","mappings":";;AAAA,MAAM,uBAAuB,GAAG,6FAA6F,CAAC;AAC9H,mCAAe,uBAAuB;;MCMzBA,sBAAoB;;;;;;IAQ/B,MAAM;QACJ,OAAO,IAAI,CAAC;KACb;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveTimelineEntry"],"sources":["src/components/biggive-timeline-entry/biggive-timeline-entry.scss?tag=biggive-timeline-entry&encapsulation=shadow","src/components/biggive-timeline-entry/biggive-timeline-entry.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n","import { Component, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-timeline-entry',\n  styleUrl: 'biggive-timeline-entry.scss',\n  shadow: true,\n})\nexport class BiggiveTimelineEntry {\n  /**\n   * Should be in the format 'YYYY-mm-dd', for example '2023-01-01'\n   */\n  @Prop() date: string;\n\n  @Prop() heading: string;\n\n  render() {\n    return null;\n  }\n}\n"],"version":3}

package/dist/components/biggive-timeline.js

@@ -8,6 +8,18 @@ const BiggiveTimeline$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveTimeline
         super();
         this.__registerHost();
         this.__attachShadow();
+        this.spaceBelow = 0;
+        this.textColour = 'black';
+        this.selectedTextColour = 'primary';
+        this.navigationHighlightColour = 'grey-medium';
+        this.selectedNavigationHighlightColour = 'primary';
+        this.buttonBackgroundColour = 'white';
+        this.buttonIconColour = 'primary';
+        this.entryBackgroundColour = 'white';
+        this.entryHighlightColour = 'secondary';
+        this.entryDateColour = 'black';
+        this.entryTitleColour = 'primary';
+        this.entryTextColour = 'black';
         this.scrollOffset = 0;
         this.tabHeadings = [];
         this.children = [];
@@ -27,18 +39,6 @@ const BiggiveTimeline$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveTimeline
         this.clickNextHandler = () => {
             this.scrollTab('NEXT');
         };
-        this.spaceBelow = 0;
-        this.textColour = 'black';
-        this.selectedTextColour = 'primary';
-        this.navigationHighlightColour = 'grey-medium';
-        this.selectedNavigationHighlightColour = 'primary';
-        this.buttonBackgroundColour = 'white';
-        this.buttonIconColour = 'primary';
-        this.entryBackgroundColour = 'white';
-        this.entryHighlightColour = 'secondary';
-        this.entryDateColour = 'black';
-        this.entryTitleColour = 'primary';
-        this.entryTextColour = 'black';
     }
     componentWillLoad() {
         this.children = Array.from(this.host.children);

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

@@ -1 +1 @@
-{"file":"biggive-timeline.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,skuBAAskuB,CAAC;AAClmuB,8BAAe,kBAAkB;;MCQpBA,iBAAe;;;;;QA4BlB,iBAAY,GAAW,CAAC,CAAC;QACzB,gBAAW,GAAkB,EAAE,CAAC;QAChC,aAAQ,GAA2C,EAAE,CAAC;QAgDtD,oBAAe,GAAG,CAAC,CAAM;YAC/B,IAAI,CAAC,GAAG,CAAC,CAAC;YACV,KAAK,IAAI,EAAE,IAAI,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,QAAQ,EAAE;gBAC9C,IAAI,EAAE,IAAI,CAAC,CAAC,MAAM,EAAE;oBAClB,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;oBAChB,OAAO;iBACR;gBACD,CAAC,EAAE,CAAC;aACL;SACF,CAAC;QAqCM,qBAAgB,GAAG;YACzB,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;SACxB,CAAC;QAEM,qBAAgB,GAAG;YACzB,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;SACxB,CAAC;0BA/HkC,CAAC;0BAEH,OAAO;kCAEC,SAAS;yCAEF,aAAa;iDAEL,SAAS;sCAEpB,OAAO;gCAEb,SAAS;qCAEJ,OAAO;oCAER,WAAW;+BAEhB,OAAO;gCAEN,SAAS;+BAEV,OAAO;;IAO9C,iBAAiB;QACf,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAA2C,CAAC;QAEzF,IAAI,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;QAEnC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,UAAU,KAAK;YACnC,IAAI,GAAG,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;YACrC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;gBAC9B,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;aACvB;SACF,CAAC,CAAC;KACJ;IAED,kBAAkB;QAChB,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;KACjB;;;;IAKO,OAAO,CAAC,CAAS;;QACvB,MAAM,IAAI,GAAG,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,gBAAgB,CAAc,mBAAmB,CAAE,CAAC;QACvF,MAAM,OAAO,GAAG,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,gBAAgB,CAAc,QAAQ,CAAE,CAAC;QAE/E,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE;YACnB,IAAI,CAAC,gBAAgB,GAAG,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAc,mBAAmB,CAAE,CAAC;SAChG;QAED,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,MAAM,IAAG,CAAC,EAAE;YACnC,IAAI,eAAe,GAAG,MAAA,IAAI,CAAC,CAAC,CAAC,0CAAE,SAAS,CAAC;YACzC,IAAI,CAAC,GAAG,CAAC,CAAC;YACV,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,OAAO,CAAC,UAAU,GAAG;gBACzB,IAAI,CAAC,IAAI,CAAC,EAAE;oBACV,GAAG,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;iBAC/B;qBAAM;oBACL,GAAG,CAAC,SAAS,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;iBAClC;gBACD,CAAC,EAAE,CAAC;aACL,CAAC,CAAC;YAEH,OAAO,CAAC,OAAO,CAAC,UAAU,KAAK;;gBAC7B,KAAK,CAAC,KAAK,CAAC,OAAO,GAAG,CAAA,MAAA,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,0CAAE,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,KAAI,eAAe,GAAG,OAAO,GAAG,MAAM,CAAC;aAC9G,CAAC,CAAC;SACJ;KACF;IAaO,SAAS,CAAC,SAA0B;;QAC1C,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE;YAC1B,OAAO;SACR;QAED,IAAI,MAAM,GAAgB,IAAI,CAAC,gBAAgB,CAAC,aAAc,CAAC;QAC/D,IAAI,GAAG,GAAG,MAAM,CAAC,WAAW,IAAG,MAAA,MAAM,CAAC,aAAa,0CAAE,WAAY,CAAA,CAAC;QAElE,IAAI,SAAS,IAAI,MAAM,EAAE;YACvB,IAAI,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,gBAAgB,CAAC,WAAW,GAAG,CAAC,EAAE;gBAC7D,OAAO;aACR;YAED,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,gBAAgB,CAAC,WAAW,CAAC;YAC1E,IAAI,IAAI,CAAC,gBAAgB,CAAC,sBAAsB,EAAE;gBAChD,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC,sBAAqC,CAAC;aACrF;SACF;aAAM,IAAI,SAAS,IAAI,MAAM,EAAE;YAC9B,IAAI,CAAC,GAAG,IAAI,CAAC,YAAY,GAAG,GAAG,EAAE;gBAC/B,OAAO;aACR;YAED,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,gBAAgB,CAAC,WAAW,CAAC;YAC1E,IAAI,IAAI,CAAC,gBAAgB,CAAC,kBAAkB,EAAE;gBAC5C,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC,kBAAiC,CAAC;aACjF;SACF;QAED,MAAM,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,EAAE;YACtC,EAAE,CAAC,KAAK,CAAC,kBAAkB,GAAG,MAAM,CAAC;YACrC,EAAE,CAAC,KAAK,CAAC,wBAAwB,GAAG,UAAU,CAAC;YAC/C,EAAE,CAAC,KAAK,CAAC,SAAS,GAAG,cAAc,GAAG,IAAI,CAAC,YAAY,GAAG,WAAW,CAAC;SACvE,CAAC,CAAC;KACJ;IAUD,MAAM;QACJ,QACE,4DACE,KAAK,EACH,wBAAwB;gBACxB,IAAI,CAAC,UAAU;gBACf,eAAe;gBACf,IAAI,CAAC,UAAU;gBACf,wBAAwB;gBACxB,IAAI,CAAC,kBAAkB;gBACvB,+BAA+B;gBAC/B,IAAI,CAAC,yBAAyB;gBAC9B,wCAAwC;gBACxC,IAAI,CAAC,iCAAiC;gBACtC,4BAA4B;gBAC5B,IAAI,CAAC,sBAAsB;gBAC3B,sBAAsB;gBACtB,IAAI,CAAC,gBAAgB;gBACrB,2BAA2B;gBAC3B,IAAI,CAAC,qBAAqB;gBAC1B,0BAA0B;gBAC1B,IAAI,CAAC,oBAAoB;gBACzB,qBAAqB;gBACrB,IAAI,CAAC,eAAe;gBACpB,sBAAsB;gBACtB,IAAI,CAAC,gBAAgB;gBACrB,qBAAqB;gBACrB,IAAI,CAAC,eAAe,IAGtB,4DAAK,KAAK,EAAC,YAAY,IACrB,4DAAK,KAAK,EAAC,aAAa,EAAC,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAAE,KAAK,EAAC,UAAU,IACvE,4DAAK,KAAK,EAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,UAAU,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,IAC1F,6DAAM,CAAC,EAAC,kDAAkD,EAAC,MAAM,EAAC,SAAS,kBAAc,GAAG,GAAG,CAC3F,CACF,EACN,4DAAK,KAAK,EAAC,QAAQ,IACjB,6DACG,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,GAAG,KACvB,UAAI,OAAO,EAAE,IAAI,CAAC,eAAe,IAAG,GAAG,CAAM,CAC9C,CAAC,CACC,CACD,EACN,4DAAK,KAAK,EAAC,aAAa,EAAC,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAAE,KAAK,EAAC,MAAM,IACnE,4DAAK,KAAK,EAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,UAAU,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,IAC1F,6DAAM,CAAC,EAAC,oDAAoD,EAAC,MAAM,EAAC,SAAS,kBAAc,GAAG,GAAG,CAC7F,CACF,CACF,EACN,4DAAK,KAAK,EAAC,YAAY,IACpB,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,KACtB,WAAK,KAAK,EAAC,OAAO,eAAY,KAAK,CAAC,IAAI,IACtC,UAAI,KAAK,EAAC,OAAO,IAAE,KAAK,CAAC,OAAO,CAAM,EACtC,WAAK,KAAK,EAAC,SAAS,EAAC,SAAS,EAAE,KAAK,CAAC,SAAS,GAAQ,CACnD,CACP,CAAC,CACE,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveTimeline"],"sources":["src/components/biggive-timeline/biggive-timeline.scss?tag=biggive-timeline&encapsulation=shadow","src/components/biggive-timeline/biggive-timeline.tsx"],"sourcesContent":["@include spacers();\n@include text-colours();\n\n:host {\n  display: contents;\n}\n\n::slotted(*) {\n  display: none;\n}\n\n.container {\n  @include standard-font();\n  position: relative;\n\n  .navigation {\n    padding: 0 40px;\n    .button {\n      position: absolute;\n      top: 5px;\n      display: block;\n      width: 30px;\n      height: 30px;\n      padding: 2.5px 10px;\n      box-sizing: border-box;\n      background-color: #FFFFFF;\n      box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.25);\n      border-radius: 50%;\n      cursor: pointer;\n      text-align: center;\n      &.prev {\n        left: 0;\n      }\n      &.next {\n        right: 0;\n      }\n      svg {\n        width: 10px;\n        height: 10px;\n      }\n    }\n    .sleeve {\n      overflow-x: hidden;\n      ul {\n        margin: 0;\n        padding: 0;\n        list-style-type: none;\n        display: flex;\n        border-bottom: 1px solid $colour-grey-light;\n        li {\n          flex-grow: 1;\n          padding: 10px 20px;\n          margin: 0 0 -1px 0;\n          width: calc(33.3% - 20px);\n          border-bottom: 3px solid transparent;\n          text-align: center;\n          cursor: pointer;\n          &.selected {\n            font-weight: bold;\n          }\n        }\n      }\n    }\n  }\n\n  .entry-wrap {\n    padding: 40px;\n\n    .entry {\n      margin-bottom: $spacer-3;\n      border-left: 15px solid transparent;\n      padding: 15px 40px 15px 40px;\n      .title {\n        font-weight: bold;\n        margin: 0 0 5px 0;\n        padding: 0\n      }\n      .content {\n        p {\n          margin: 0 0 5px 0;\n        }\n      }\n      \n    }\n  }\n\n  @each $key, $colour in $brandColoursIncBrand6Turquoise {\n    &.text-colour-#{$key} .navigation li { color: $colour; }\n    &.navigation-highlight-colour-#{$key} .navigation ul {border-color: $colour; }\n    &.selected-text-colour-#{$key} .navigation li.selected { color: $colour; }\n    &.selected-navigation-highlight-colour-#{$key} .navigation li.selected { border-color: $colour; }\n    &.button-background-colour-#{$key} .navigation .button { background-color: $colour; }\n    &.button-icon-colour-#{$key} .navigation .button svg path { stroke: $colour; }\n    &.entry-background-colour-#{$key} .entry { background-color: $colour; }\n    &.entry-highlight-colour-#{$key} .entry { border-color: $colour; }\n    &.entry-date-colour-#{$key} .entry .date { color: $colour; }\n    &.entry-title-colour-#{$key} .entry .title { color: $colour; }\n    &.entry-text-colour-#{$key} .entry .content { color: $colour; }\n  }\n\n}","import { Component, Prop, Element, h } from '@stencil/core';\nimport { brandColour } from '../../globals/brand-colour';\nimport { spacingOption } from '../../globals/spacing-option';\n\n@Component({\n  tag: 'biggive-timeline',\n  styleUrl: 'biggive-timeline.scss',\n  shadow: true,\n})\nexport class BiggiveTimeline {\n  @Element() host: HTMLBiggiveTimelineElement;\n\n  @Prop() spaceBelow: spacingOption = 0;\n\n  @Prop() textColour: brandColour = 'black';\n\n  @Prop() selectedTextColour: brandColour = 'primary';\n\n  @Prop() navigationHighlightColour: brandColour = 'grey-medium';\n\n  @Prop() selectedNavigationHighlightColour: brandColour = 'primary';\n\n  @Prop() buttonBackgroundColour: brandColour = 'white';\n\n  @Prop() buttonIconColour: brandColour = 'primary';\n\n  @Prop() entryBackgroundColour: brandColour = 'white';\n\n  @Prop() entryHighlightColour: brandColour = 'secondary';\n\n  @Prop() entryDateColour: brandColour = 'black';\n\n  @Prop() entryTitleColour: brandColour = 'primary';\n\n  @Prop() entryTextColour: brandColour = 'black';\n\n  private scrollContextTab: HTMLElement | null;\n  private scrollOffset: number = 0;\n  private tabHeadings: Array<string> = [];\n  private children: Array<HTMLBiggiveTimelineEntryElement> = [];\n\n  componentWillLoad() {\n    this.children = Array.from(this.host.children) as Array<HTMLBiggiveTimelineEntryElement>;\n\n    let tabHeadings = this.tabHeadings;\n\n    this.children.forEach(function (entry) {\n      let tab = entry.date.substring(0, 4);\n      if (!tabHeadings.includes(tab)) {\n        tabHeadings.push(tab);\n      }\n    });\n  }\n\n  componentDidRender() {\n    this.showTab(0);\n  }\n\n  /*\n   * Shows the i'th element in the timeline, counting from zero. Does nothing if i out of range.\n   */\n  private showTab(i: number) {\n    const tabs = this.host.shadowRoot?.querySelectorAll<HTMLElement>('.navigation ul li')!;\n    const entries = this.host.shadowRoot?.querySelectorAll<HTMLElement>('.entry')!;\n\n    if (tabs.length > 0) {\n      this.scrollContextTab = this.host.shadowRoot?.querySelector<HTMLElement>('.navigation ul li')!;\n    }\n\n    if (i >= 0 && i <= tabs?.length - 1) {\n      let currentTabTitle = tabs[i]?.innerHTML;\n      let j = 0;\n      tabs?.forEach(function (tab) {\n        if (i == j) {\n          tab.classList.add('selected');\n        } else {\n          tab.classList.remove('selected');\n        }\n        j++;\n      });\n\n      entries.forEach(function (entry) {\n        entry.style.display = entry.getAttribute('data-date')?.substring(0, 4) == currentTabTitle ? 'block' : 'none';\n      });\n    }\n  }\n\n  private clickTabHandler = (e: any) => {\n    let i = 0;\n    for (let el of e.target.parentElement.children) {\n      if (el == e.target) {\n        this.showTab(i);\n        return;\n      }\n      i++;\n    }\n  };\n\n  private scrollTab(direction: 'NEXT' | 'PREV') {\n    if (!this.scrollContextTab) {\n      return;\n    }\n\n    let sleeve: HTMLElement = this.scrollContextTab.parentElement!;\n    let max = sleeve.scrollWidth - sleeve.parentElement?.offsetWidth!;\n\n    if (direction == 'PREV') {\n      if (this.scrollOffset + this.scrollContextTab.offsetWidth > 0) {\n        return;\n      }\n\n      this.scrollOffset = this.scrollOffset + this.scrollContextTab.offsetWidth;\n      if (this.scrollContextTab.previousElementSibling) {\n        this.scrollContextTab = this.scrollContextTab.previousElementSibling as HTMLElement;\n      }\n    } else if (direction == 'NEXT') {\n      if (0 - this.scrollOffset > max) {\n        return;\n      }\n\n      this.scrollOffset = this.scrollOffset - this.scrollContextTab.offsetWidth;\n      if (this.scrollContextTab.nextElementSibling) {\n        this.scrollContextTab = this.scrollContextTab.nextElementSibling as HTMLElement;\n      }\n    }\n\n    sleeve.querySelectorAll('li').forEach(li => {\n      li.style.transitionDuration = '0.3s';\n      li.style.transitionTimingFunction = 'ease-out';\n      li.style.transform = 'translate3d(' + this.scrollOffset + 'px, 0, 0)';\n    });\n  }\n\n  private clickPrevHandler = () => {\n    this.scrollTab('PREV');\n  };\n\n  private clickNextHandler = () => {\n    this.scrollTab('NEXT');\n  };\n\n  render() {\n    return (\n      <div\n        class={\n          'container space-below-' +\n          this.spaceBelow +\n          ' text-colour-' +\n          this.textColour +\n          ' selected-text-colour-' +\n          this.selectedTextColour +\n          ' navigation-highlight-colour-' +\n          this.navigationHighlightColour +\n          ' selected-navigation-highlight-colour-' +\n          this.selectedNavigationHighlightColour +\n          ' button-background-colour-' +\n          this.buttonBackgroundColour +\n          ' button-icon-colour-' +\n          this.buttonIconColour +\n          ' entry-background-colour-' +\n          this.entryBackgroundColour +\n          ' entry-highlight-colour-' +\n          this.entryHighlightColour +\n          ' entry-date-colour-' +\n          this.entryDateColour +\n          ' entry-title-colour-' +\n          this.entryTitleColour +\n          ' entry-text-colour-' +\n          this.entryTextColour\n        }\n      >\n        <div class=\"navigation\">\n          <div class=\"button prev\" onClick={this.clickPrevHandler} title=\"Previous\">\n            <svg width=\"9\" height=\"16\" viewBox=\"0 0 9 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M8.29311 14.5703L1.73926 8.01646L8.29311 1.46261\" stroke=\"#000000\" stroke-width=\"2\" />\n            </svg>\n          </div>\n          <div class=\"sleeve\">\n            <ul>\n              {this.tabHeadings.map(tab => (\n                <li onClick={this.clickTabHandler}>{tab}</li>\n              ))}\n            </ul>\n          </div>\n          <div class=\"button next\" onClick={this.clickNextHandler} title=\"Next\">\n            <svg width=\"9\" height=\"16\" viewBox=\"0 0 9 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M0.739117 1.46094L7.29297 8.01479L0.739118 14.5686\" stroke=\"#000000\" stroke-width=\"2\" />\n            </svg>\n          </div>\n        </div>\n        <div class=\"entry-wrap\">\n          {this.children.map(entry => (\n            <div class=\"entry\" data-date={entry.date}>\n              <h4 class=\"title\">{entry.heading}</h4>\n              <div class=\"content\" innerHTML={entry.innerHTML}></div>\n            </div>\n          ))}\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"biggive-timeline.js","mappings":"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","names":["BiggiveTimeline"],"sources":["src/components/biggive-timeline/biggive-timeline.scss?tag=biggive-timeline&encapsulation=shadow","src/components/biggive-timeline/biggive-timeline.tsx"],"sourcesContent":["@include spacers();\n@include text-colours();\n\n:host {\n  display: contents;\n}\n\n::slotted(*) {\n  display: none;\n}\n\n.container {\n  @include standard-font();\n  position: relative;\n\n  .navigation {\n    padding: 0 40px;\n    .button {\n      position: absolute;\n      top: 5px;\n      display: block;\n      width: 30px;\n      height: 30px;\n      padding: 2.5px 10px;\n      box-sizing: border-box;\n      background-color: #FFFFFF;\n      box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.25);\n      border-radius: 50%;\n      cursor: pointer;\n      text-align: center;\n      &.prev {\n        left: 0;\n      }\n      &.next {\n        right: 0;\n      }\n      svg {\n        width: 10px;\n        height: 10px;\n      }\n    }\n    .sleeve {\n      overflow-x: hidden;\n      ul {\n        margin: 0;\n        padding: 0;\n        list-style-type: none;\n        display: flex;\n        border-bottom: 1px solid $colour-grey-light;\n        li {\n          flex-grow: 1;\n          padding: 10px 20px;\n          margin: 0 0 -1px 0;\n          width: calc(33.3% - 20px);\n          border-bottom: 3px solid transparent;\n          text-align: center;\n          cursor: pointer;\n          &.selected {\n            font-weight: bold;\n          }\n        }\n      }\n    }\n  }\n\n  .entry-wrap {\n    padding: 40px;\n\n    .entry {\n      margin-bottom: $spacer-3;\n      border-left: 15px solid transparent;\n      padding: 15px 40px 15px 40px;\n      .title {\n        font-weight: bold;\n        margin: 0 0 5px 0;\n        padding: 0\n      }\n      .content {\n        p {\n          margin: 0 0 5px 0;\n        }\n      }\n      \n    }\n  }\n\n  @each $key, $colour in $brandColoursIncBrand6Turquoise {\n    &.text-colour-#{$key} .navigation li { color: $colour; }\n    &.navigation-highlight-colour-#{$key} .navigation ul {border-color: $colour; }\n    &.selected-text-colour-#{$key} .navigation li.selected { color: $colour; }\n    &.selected-navigation-highlight-colour-#{$key} .navigation li.selected { border-color: $colour; }\n    &.button-background-colour-#{$key} .navigation .button { background-color: $colour; }\n    &.button-icon-colour-#{$key} .navigation .button svg path { stroke: $colour; }\n    &.entry-background-colour-#{$key} .entry { background-color: $colour; }\n    &.entry-highlight-colour-#{$key} .entry { border-color: $colour; }\n    &.entry-date-colour-#{$key} .entry .date { color: $colour; }\n    &.entry-title-colour-#{$key} .entry .title { color: $colour; }\n    &.entry-text-colour-#{$key} .entry .content { color: $colour; }\n  }\n\n}","import { Component, Prop, Element, h } from '@stencil/core';\nimport { brandColour } from '../../globals/brand-colour';\nimport { spacingOption } from '../../globals/spacing-option';\n\n@Component({\n  tag: 'biggive-timeline',\n  styleUrl: 'biggive-timeline.scss',\n  shadow: true,\n})\nexport class BiggiveTimeline {\n  @Element() host: HTMLBiggiveTimelineElement;\n\n  @Prop() spaceBelow: spacingOption = 0;\n\n  @Prop() textColour: brandColour = 'black';\n\n  @Prop() selectedTextColour: brandColour = 'primary';\n\n  @Prop() navigationHighlightColour: brandColour = 'grey-medium';\n\n  @Prop() selectedNavigationHighlightColour: brandColour = 'primary';\n\n  @Prop() buttonBackgroundColour: brandColour = 'white';\n\n  @Prop() buttonIconColour: brandColour = 'primary';\n\n  @Prop() entryBackgroundColour: brandColour = 'white';\n\n  @Prop() entryHighlightColour: brandColour = 'secondary';\n\n  @Prop() entryDateColour: brandColour = 'black';\n\n  @Prop() entryTitleColour: brandColour = 'primary';\n\n  @Prop() entryTextColour: brandColour = 'black';\n\n  private scrollContextTab: HTMLElement | null;\n  private scrollOffset: number = 0;\n  private tabHeadings: Array<string> = [];\n  private children: Array<HTMLBiggiveTimelineEntryElement> = [];\n\n  componentWillLoad() {\n    this.children = Array.from(this.host.children) as Array<HTMLBiggiveTimelineEntryElement>;\n\n    let tabHeadings = this.tabHeadings;\n\n    this.children.forEach(function (entry) {\n      let tab = entry.date.substring(0, 4);\n      if (!tabHeadings.includes(tab)) {\n        tabHeadings.push(tab);\n      }\n    });\n  }\n\n  componentDidRender() {\n    this.showTab(0);\n  }\n\n  /*\n   * Shows the i'th element in the timeline, counting from zero. Does nothing if i out of range.\n   */\n  private showTab(i: number) {\n    const tabs = this.host.shadowRoot?.querySelectorAll<HTMLElement>('.navigation ul li')!;\n    const entries = this.host.shadowRoot?.querySelectorAll<HTMLElement>('.entry')!;\n\n    if (tabs.length > 0) {\n      this.scrollContextTab = this.host.shadowRoot?.querySelector<HTMLElement>('.navigation ul li')!;\n    }\n\n    if (i >= 0 && i <= tabs?.length - 1) {\n      let currentTabTitle = tabs[i]?.innerHTML;\n      let j = 0;\n      tabs?.forEach(function (tab) {\n        if (i == j) {\n          tab.classList.add('selected');\n        } else {\n          tab.classList.remove('selected');\n        }\n        j++;\n      });\n\n      entries.forEach(function (entry) {\n        entry.style.display = entry.getAttribute('data-date')?.substring(0, 4) == currentTabTitle ? 'block' : 'none';\n      });\n    }\n  }\n\n  private clickTabHandler = (e: any) => {\n    let i = 0;\n    for (let el of e.target.parentElement.children) {\n      if (el == e.target) {\n        this.showTab(i);\n        return;\n      }\n      i++;\n    }\n  };\n\n  private scrollTab(direction: 'NEXT' | 'PREV') {\n    if (!this.scrollContextTab) {\n      return;\n    }\n\n    let sleeve: HTMLElement = this.scrollContextTab.parentElement!;\n    let max = sleeve.scrollWidth - sleeve.parentElement?.offsetWidth!;\n\n    if (direction == 'PREV') {\n      if (this.scrollOffset + this.scrollContextTab.offsetWidth > 0) {\n        return;\n      }\n\n      this.scrollOffset = this.scrollOffset + this.scrollContextTab.offsetWidth;\n      if (this.scrollContextTab.previousElementSibling) {\n        this.scrollContextTab = this.scrollContextTab.previousElementSibling as HTMLElement;\n      }\n    } else if (direction == 'NEXT') {\n      if (0 - this.scrollOffset > max) {\n        return;\n      }\n\n      this.scrollOffset = this.scrollOffset - this.scrollContextTab.offsetWidth;\n      if (this.scrollContextTab.nextElementSibling) {\n        this.scrollContextTab = this.scrollContextTab.nextElementSibling as HTMLElement;\n      }\n    }\n\n    sleeve.querySelectorAll('li').forEach(li => {\n      li.style.transitionDuration = '0.3s';\n      li.style.transitionTimingFunction = 'ease-out';\n      li.style.transform = 'translate3d(' + this.scrollOffset + 'px, 0, 0)';\n    });\n  }\n\n  private clickPrevHandler = () => {\n    this.scrollTab('PREV');\n  };\n\n  private clickNextHandler = () => {\n    this.scrollTab('NEXT');\n  };\n\n  render() {\n    return (\n      <div\n        class={\n          'container space-below-' +\n          this.spaceBelow +\n          ' text-colour-' +\n          this.textColour +\n          ' selected-text-colour-' +\n          this.selectedTextColour +\n          ' navigation-highlight-colour-' +\n          this.navigationHighlightColour +\n          ' selected-navigation-highlight-colour-' +\n          this.selectedNavigationHighlightColour +\n          ' button-background-colour-' +\n          this.buttonBackgroundColour +\n          ' button-icon-colour-' +\n          this.buttonIconColour +\n          ' entry-background-colour-' +\n          this.entryBackgroundColour +\n          ' entry-highlight-colour-' +\n          this.entryHighlightColour +\n          ' entry-date-colour-' +\n          this.entryDateColour +\n          ' entry-title-colour-' +\n          this.entryTitleColour +\n          ' entry-text-colour-' +\n          this.entryTextColour\n        }\n      >\n        <div class=\"navigation\">\n          <div class=\"button prev\" onClick={this.clickPrevHandler} title=\"Previous\">\n            <svg width=\"9\" height=\"16\" viewBox=\"0 0 9 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M8.29311 14.5703L1.73926 8.01646L8.29311 1.46261\" stroke=\"#000000\" stroke-width=\"2\" />\n            </svg>\n          </div>\n          <div class=\"sleeve\">\n            <ul>\n              {this.tabHeadings.map(tab => (\n                <li onClick={this.clickTabHandler}>{tab}</li>\n              ))}\n            </ul>\n          </div>\n          <div class=\"button next\" onClick={this.clickNextHandler} title=\"Next\">\n            <svg width=\"9\" height=\"16\" viewBox=\"0 0 9 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M0.739117 1.46094L7.29297 8.01479L0.739118 14.5686\" stroke=\"#000000\" stroke-width=\"2\" />\n            </svg>\n          </div>\n        </div>\n        <div class=\"entry-wrap\">\n          {this.children.map(entry => (\n            <div class=\"entry\" data-date={entry.date}>\n              <h4 class=\"title\">{entry.heading}</h4>\n              <div class=\"content\" innerHTML={entry.innerHTML}></div>\n            </div>\n          ))}\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/biggive-totalizer-ticker-item.js

@@ -8,8 +8,6 @@ const BiggiveTotalizerTickerItem$1 = /*@__PURE__*/ proxyCustomElement(class Bigg
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.figure = undefined;
-        this.label = undefined;
     }
     render() {
         return (h("div", { key: 'a2402c2906760dd5e9f2220ba9f3b82e402ac668', class: "ticker-item" }, h("strong", { key: 'f5c711457f2fd02384f65e8a3d0cefd4643b6fe0' }, this.figure), " ", this.label));

package/dist/components/biggive-totalizer-ticker-item.js.map

@@ -1 +1 @@
-{"file":"biggive-totalizer-ticker-item.js","mappings":";;AAAA,MAAM,6BAA6B,GAAG,kIAAkI,CAAC;AACzK,yCAAe,6BAA6B;;MCM/BA,4BAA0B;;;;;;;;IAWrC,MAAM;QACJ,QACE,4DAAK,KAAK,EAAC,aAAa,IACtB,iEAAS,IAAI,CAAC,MAAM,CAAU,OAAE,IAAI,CAAC,KAAK,CACtC,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveTotalizerTickerItem"],"sources":["src/components/biggive-totalizer-ticker-item/biggive-totalizer-ticker-item.scss?tag=biggive-totalizer-ticker-item&encapsulation=shadow","src/components/biggive-totalizer-ticker-item/biggive-totalizer-ticker-item.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n}\n\n.ticker-item {\n  margin-right: $spacer-4;\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-totalizer-ticker-item',\n  styleUrl: 'biggive-totalizer-ticker-item.scss',\n  shadow: true,\n})\nexport class BiggiveTotalizerTickerItem {\n  /**\n   * Figure\n   */\n  @Prop() figure: string;\n\n  /**\n   * Figure\n   */\n  @Prop() label: string;\n\n  render() {\n    return (\n      <div class=\"ticker-item\">\n        <strong>{this.figure}</strong> {this.label}\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"biggive-totalizer-ticker-item.js","mappings":";;AAAA,MAAM,6BAA6B,GAAG,kIAAkI,CAAC;AACzK,yCAAe,6BAA6B;;MCM/BA,4BAA0B;;;;;;IAWrC,MAAM;QACJ,QACE,4DAAK,KAAK,EAAC,aAAa,IACtB,iEAAS,IAAI,CAAC,MAAM,CAAU,OAAE,IAAI,CAAC,KAAK,CACtC,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveTotalizerTickerItem"],"sources":["src/components/biggive-totalizer-ticker-item/biggive-totalizer-ticker-item.scss?tag=biggive-totalizer-ticker-item&encapsulation=shadow","src/components/biggive-totalizer-ticker-item/biggive-totalizer-ticker-item.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n}\n\n.ticker-item {\n  margin-right: $spacer-4;\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-totalizer-ticker-item',\n  styleUrl: 'biggive-totalizer-ticker-item.scss',\n  shadow: true,\n})\nexport class BiggiveTotalizerTickerItem {\n  /**\n   * Figure\n   */\n  @Prop() figure: string;\n\n  /**\n   * Figure\n   */\n  @Prop() label: string;\n\n  render() {\n    return (\n      <div class=\"ticker-item\">\n        <strong>{this.figure}</strong> {this.label}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/biggive-totalizer.js

@@ -9,12 +9,26 @@ const BiggiveTotalizer$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveTotaliz
         this.__registerHost();
         this.__attachShadow();
         this.lastWrapperWidth = 0;
+        /**
+         * Space below component
+         */
         this.spaceBelow = 0;
+        /**
+         * Primary banner colour
+         */
         this.primaryColour = 'primary';
+        /**
+         * Primary text colour
+         */
         this.primaryTextColour = 'white';
+        /**
+         * Secondary banner colour
+         */
         this.secondaryColour = 'secondary';
+        /**
+         * Secondary text colour
+         */
         this.secondaryTextColour = 'black';
-        this.mainMessage = undefined;
     }
     setSpeed(itemsWidth, containerWidth) {
         var _a;