@biggive/components 202401301136.0.0 → 202401301139.0.0

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,WAAK,KAAK,EAAE,wBAAwB,GAAG,IAAI,CAAC,iBAAiB,GAAG,qBAAqB,GAAG,IAAI,CAAC,eAAe,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,IAC9I,WAAK,KAAK,EAAC,YAAY,IACrB,WAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,IAC5F,YAAM,CAAC,EAAC,kFAAkF,EAAC,IAAI,EAAC,SAAS,GAAG,CACxG,CACF,EACN,WAAK,KAAK,EAAC,OAAO,cAAG,IAAI,CAAC,KAAK,WAAQ,EACvC,WAAK,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;;;;;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}

package/dist/components/biggive-sheet.js

@@ -32,7 +32,7 @@ const BiggiveSheet$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveSheet exten
         }
     }
     render() {
-        return (h("div", { class: 'container' }, h("div", { class: "background" }), h("div", { class: 'popup background-colour-' + this.backgroundColour + ' text-colour-' + this.textColour }, h("div", { class: "header" }, h("div", { class: "back-link", onClick: this.closeSheet }, h("span", { class: 'svg-wrap colour-' + this.textColour }, h("svg", { width: "33", height: "16", viewBox: "0 0 33 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { 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", fill: "black" }))), "Back"), h("div", { class: "close-link", onClick: this.closeSheet }, h("span", { class: "svg-wrap" }, h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M11 11v-11h1v11h11v1h-11v11h-1v-11h-11v-1h11z" }))))), h("div", { class: "content" }, h("slot", null)))));
+        return (h("div", { key: '069a7b7f1df4aff4c2aef0791c800a719c6b21bc', class: 'container' }, h("div", { key: 'f5b1224e0ad76c5719153bddac5b18f9c0f2ea85', class: "background" }), h("div", { key: 'b0bce375757692e95ede3db89a1a33ae7dd9dd04', class: 'popup background-colour-' + this.backgroundColour + ' text-colour-' + this.textColour }, h("div", { key: 'b80dbc88befcef4efba00c40bae12fdc6741244b', class: "header" }, h("div", { key: '122071d56dd6b942f330204a442c5d6c18f7c544', class: "back-link", onClick: this.closeSheet }, h("span", { key: '406bf5ff817135ac6c92b9d7e09677cfb2273e46', class: 'svg-wrap colour-' + this.textColour }, h("svg", { key: 'bb88afcdac83b354cb7e07bafcfdd1e904ece9cb', width: "33", height: "16", viewBox: "0 0 33 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '17963275c0a2d7d0db417af6587bc85108bec46c', 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", fill: "black" }))), "Back"), h("div", { key: '4582894b11d66c151db3723bbba7a8ee674565bb', class: "close-link", onClick: this.closeSheet }, h("span", { key: 'c31145fd90831c0959b3e52c5dc3affc1db5e022', class: "svg-wrap" }, h("svg", { key: 'd25fae88521a2164cbd68bda94ebf580d22767f6', width: "24", height: "24", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'fc29add510f29b0b81a14c73cdead7fbe565f071', d: "M11 11v-11h1v11h11v1h-11v11h-1v-11h-11v-1h11z" }))))), h("div", { key: 'ca55b5904a848b734df2159596e2f1f890407f24', class: "content" }, h("slot", { key: '3ec40a2899ac3bf126ca824793e791ceeb332364' })))));
     }
     get host() { return this; }
     static get style() { return BiggiveSheetStyle0; }

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,WAAK,KAAK,EAAE,WAAW,IACrB,WAAK,KAAK,EAAC,YAAY,GAAO,EAC9B,WAAK,KAAK,EAAE,0BAA0B,GAAG,IAAI,CAAC,gBAAgB,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,IAChG,WAAK,KAAK,EAAC,QAAQ,IACjB,WAAK,KAAK,EAAC,WAAW,EAAC,OAAO,EAAE,IAAI,CAAC,UAAU,IAC7C,YAAM,KAAK,EAAE,kBAAkB,GAAG,IAAI,CAAC,UAAU,IAC/C,WAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,IAC5F,YACE,CAAC,EAAC,6VAA6V,EAC/V,IAAI,EAAC,OAAO,GACZ,CACE,CACD,SAEH,EAEN,WAAK,KAAK,EAAC,YAAY,EAAC,OAAO,EAAE,IAAI,CAAC,UAAU,IAC9C,YAAM,KAAK,EAAC,UAAU,IACpB,WAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,IAChF,YAAM,CAAC,EAAC,+CAA+C,GAAG,CACtD,CACD,CACH,CACF,EACN,WAAK,KAAK,EAAC,SAAS,IAClB,eAAa,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;;;;;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}

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

@@ -20,7 +20,7 @@ const BiggiveSocialIcon = /*@__PURE__*/ proxyCustomElement(class BiggiveSocialIc
         return icon;
     }
     render() {
-        return (h("div", { class: 'social-icon-item background-colour-' + this.backgroundColour + (this.wide ? ' wide' : '') }, h("a", { href: this.url, "aria-label": `${this.labelPrefix} on ${this.service}`, target: "_blank", rel: "noopener" }, h("svg", { width: this.getSocialIcon().icon[0], height: this.getSocialIcon().icon[1], xmlns: "http://www.w3.org/2000/svg", class: 'fill-' + this.iconColour, viewBox: '0 0 ' + this.getSocialIcon().icon[0] + ' ' + this.getSocialIcon().icon[1] }, h("path", { d: this.getSocialIcon().icon[4].toString() })))));
+        return (h("div", { key: 'b93ff0500561d1d83b42ee18d113a4dfdba3f8a9', class: 'social-icon-item background-colour-' + this.backgroundColour + (this.wide ? ' wide' : '') }, h("a", { key: '1b1abcb967c177ecf86ffb2d8571765c138051b8', href: this.url, "aria-label": `${this.labelPrefix} on ${this.service}`, target: "_blank", rel: "noopener" }, h("svg", { key: 'ebb8c62432866be7ffa8982a7ea3714b48407796', width: this.getSocialIcon().icon[0], height: this.getSocialIcon().icon[1], xmlns: "http://www.w3.org/2000/svg", class: 'fill-' + this.iconColour, viewBox: '0 0 ' + this.getSocialIcon().icon[0] + ' ' + this.getSocialIcon().icon[1] }, h("path", { key: 'ec81bf9fff15d35ec50c3156f1f1af77d4bb4107', d: this.getSocialIcon().icon[4].toString() })))));
     }
     static get style() { return BiggiveSocialIconStyle0; }
 }, [0, "biggive-social-icon", {

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,WAAK,KAAK,EAAE,qCAAqC,GAAG,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,IAAI,GAAG,OAAO,GAAG,EAAE,CAAC,IACpG,SAAG,IAAI,EAAE,IAAI,CAAC,GAAG,gBAAc,GAAG,IAAI,CAAC,WAAW,OAAO,IAAI,CAAC,OAAO,EAAE,EAAE,MAAM,EAAC,QAAQ,EAAC,GAAG,EAAC,UAAU,IACrG,WACE,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,YAAM,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;;;;;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}

package/dist/components/biggive-tab.js

@@ -11,7 +11,7 @@ const BiggiveTab$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveTab extends H
         this.tabTitle = '';
     }
     render() {
-        return (h("div", { class: "container" }, h("slot", null)));
+        return (h("div", { key: 'f1a5796a719cb3e1eb09729697a1f95ac3cc8ae5', class: "container" }, h("slot", { key: 'd95e5ff6692a6b9042fefb89773eaf107ddf136d' })));
     }
     static get style() { return BiggiveTabStyle0; }
 }, [1, "biggive-tab", {

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,WAAK,KAAK,EAAC,WAAW,IACpB,eAAa,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;;;;;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}

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

@@ -110,7 +110,7 @@ const BiggiveTabbedContent$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveTab
         });
     }
     render() {
-        return (h("div", { class: 'container space-below-' +
+        return (h("div", { key: '03d08750a83b257bad4d11502b3884d249b4ed9f', class: 'container space-below-' +
                 this.spaceBelow +
                 ' text-colour-' +
                 this.textColour +
@@ -123,7 +123,7 @@ const BiggiveTabbedContent$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveTab
                 ' button-background-colour-' +
                 this.buttonBackgroundColour +
                 ' button-icon-colour-' +
-                this.buttonIconColour }, h("div", { class: "navigation" }, h("div", { class: "button prev", onClick: this.clickPrevHandler, title: "Previous" }, h("svg", { width: "9", height: "16", viewBox: "0 0 9 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M8.29311 14.5703L1.73926 8.01646L8.29311 1.46261", stroke: "#000000", "stroke-width": "2" }))), h("div", { class: "sleeve" }, h("ul", null, this.children.map(child => (h("li", { onClick: this.clickTabHandler }, child.tabTitle))))), h("div", { class: "button next", onClick: this.clickNextHandler, title: "Next" }, h("svg", { width: "9", height: "16", viewBox: "0 0 9 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M0.739117 1.46094L7.29297 8.01479L0.739118 14.5686", stroke: "#000000", "stroke-width": "2" })))), h("slot", null)));
+                this.buttonIconColour }, h("div", { key: 'c0c483d66d7e4f10f55e05adbe7fd913e2508fad', class: "navigation" }, h("div", { key: '0a1c8c83efeb6b4c4d3021a0a82f1985ed2383d2', class: "button prev", onClick: this.clickPrevHandler, title: "Previous" }, h("svg", { key: 'aff64695b3e9e52bf818f34a7692798728ffbcd8', width: "9", height: "16", viewBox: "0 0 9 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'fe010ad83716b330ae4620c48a6c193f7e1766c2', d: "M8.29311 14.5703L1.73926 8.01646L8.29311 1.46261", stroke: "#000000", "stroke-width": "2" }))), h("div", { key: '09489151bbc491bca839d7bbb63b78ed33b1e4eb', class: "sleeve" }, h("ul", { key: 'c8be1d46992ff09c5c0ca5fb122b9a1d79423ccc' }, this.children.map(child => (h("li", { onClick: this.clickTabHandler }, child.tabTitle))))), h("div", { key: '664136adfcabd5da359d8302edd9ca0330c45986', class: "button next", onClick: this.clickNextHandler, title: "Next" }, h("svg", { key: '4788da7f204c274933a8a4f43e817f7bef86da1e', width: "9", height: "16", viewBox: "0 0 9 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '397a856d73c427d71475a42a2d8dab9a18a776be', d: "M0.739117 1.46094L7.29297 8.01479L0.739118 14.5686", stroke: "#000000", "stroke-width": "2" })))), h("slot", { key: '4e03a46a3d406a1b67e7905b53edd39f8b255f54' })));
     }
     get host() { return this; }
     static get style() { return BiggiveTabbedContentStyle0; }

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

@@ -1 +1 @@
-{"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}
+{"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

@@ -14,7 +14,7 @@ const BiggiveTable$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveTable exten
         this.bodyBackgroundColour = 'grey-light';
     }
     render() {
-        return (h("div", { class: 'container header-text-colour-' +
+        return (h("div", { key: '2eccacbfce1350d28cab259aab315d12db157411', class: 'container header-text-colour-' +
                 this.headerTextColour +
                 ' header-background-colour-' +
                 this.headerBackgroundColour +
@@ -23,7 +23,7 @@ const BiggiveTable$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveTable exten
                 ' body-background-colour-' +
                 this.bodyBackgroundColour +
                 ' space-below-' +
-                this.spaceBelow }, h("slot", null)));
+                this.spaceBelow }, h("slot", { key: '2ccd1f183504aaf3b42ebb9696686ed0ec88733f' })));
     }
     static get style() { return BiggiveTableStyle0; }
 }, [4, "biggive-table", {

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,WACE,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,eAAa,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;;;;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}

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

@@ -15,7 +15,7 @@ const BiggiveTextInput$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveTextInp
     }
     render() {
         const currencySymbol = this.currency === 'GBP' ? '£' : this.currency === 'USD' ? '$' : undefined;
-        return (h("div", { class: 'text-input space-below-' + this.spaceBelow + ' select-style-' + this.selectStyle }, h("div", { class: "sleeve" }, h("div", { class: "inner-sleave" }, currencySymbol && h("span", { class: "currency-symbol" }, currencySymbol), h("slot", { name: "input" }), h("div", { style: { clear: 'both' } }))), h("div", { class: "prompt" }, h("slot", { name: "label" }))));
+        return (h("div", { key: '7805b9b8ec77c165db8bb96d835ec2f98bab88b6', class: 'text-input space-below-' + this.spaceBelow + ' select-style-' + this.selectStyle }, h("div", { key: '6eb43317816586457de0b92fd3bc395d56c4c229', class: "sleeve" }, h("div", { key: 'c969eb3a383fc7703afeea98a0fc68556e5e1fe6', class: "inner-sleave" }, currencySymbol && h("span", { class: "currency-symbol" }, currencySymbol), h("slot", { key: 'ab6d1e8548d563b4e31dde83768dc7f50f877dca', name: "input" }), h("div", { key: 'ab8f16a0c73afc60ed2d4e2bff5b9f8abd24c938', style: { clear: 'both' } }))), h("div", { key: '49a8221332a13de60abe61bfa985fc78b70c46c3', class: "prompt" }, h("slot", { key: '3c2f01682c30609204a064145e0b46d01ac82fc9', name: "label" }))));
     }
     static get style() { return BiggiveTextInputStyle0; }
 }, [1, "biggive-text-input", {

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

@@ -1 +1 @@
-{"file":"biggive-text-input.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,+lDAA+lD,CAAC;AAC5nD,+BAAe,mBAAmB;;MCYrBA,kBAAgB;;;;;;;0BAME,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,WAAK,KAAK,EAAE,yBAAyB,GAAG,IAAI,CAAC,UAAU,GAAG,gBAAgB,GAAG,IAAI,CAAC,WAAW,IAC3F,WAAK,KAAK,EAAC,QAAQ,IACjB,WAAK,KAAK,EAAC,cAAc,IACtB,cAAc,IAAI,YAAM,KAAK,EAAC,iBAAiB,IAAE,cAAc,CAAQ,EACxE,YAAM,IAAI,EAAC,OAAO,GAAG,EACrB,WAAK,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,GAAQ,CACjC,CACF,EACN,WAAK,KAAK,EAAC,QAAQ,IACjB,YAAM,IAAI,EAAC,OAAO,GAAG,CACjB,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveTextInput"],"sources":["src/components/biggive-form-field-text-input/biggive-text-input.scss?tag=biggive-text-input&encapsulation=shadow","src/components/biggive-form-field-text-input/biggive-text-input.tsx"],"sourcesContent":["@include spacers();\n\n:host {\n  display: contents;\n}\n.text-input {\n  .currency-symbol {\n    position: absolute;\n  }\n  position: relative;\n  .prompt {\n    position: absolute;\n    z-index: 2;\n    font-size: small;\n    top: -1em;\n    background-color: $colour-grey-background;\n    left: 4em;\n    padding-left: 1em;\n    padding-right: 1em;\n    color: $colour-primary-blue;\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-sleave {\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    }\n  }\n}\n\n","import { Component, 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  @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=\"sleeve\">\n          <div class=\"inner-sleave\">\n            {currencySymbol && <span class=\"currency-symbol\">{currencySymbol}</span>}\n            <slot name=\"input\" />\n            <div style={{ clear: 'both' }}></div>\n          </div>\n        </div>\n        <div class=\"prompt\">\n          <slot name=\"label\" />\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"biggive-text-input.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,+lDAA+lD,CAAC;AAC5nD,+BAAe,mBAAmB;;MCYrBA,kBAAgB;;;;;;;0BAME,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,4DAAK,KAAK,EAAC,cAAc,IACtB,cAAc,IAAI,YAAM,KAAK,EAAC,iBAAiB,IAAE,cAAc,CAAQ,EACxE,6DAAM,IAAI,EAAC,OAAO,GAAG,EACrB,4DAAK,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,GAAQ,CACjC,CACF,EACN,4DAAK,KAAK,EAAC,QAAQ,IACjB,6DAAM,IAAI,EAAC,OAAO,GAAG,CACjB,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveTextInput"],"sources":["src/components/biggive-form-field-text-input/biggive-text-input.scss?tag=biggive-text-input&encapsulation=shadow","src/components/biggive-form-field-text-input/biggive-text-input.tsx"],"sourcesContent":["@include spacers();\n\n:host {\n  display: contents;\n}\n.text-input {\n  .currency-symbol {\n    position: absolute;\n  }\n  position: relative;\n  .prompt {\n    position: absolute;\n    z-index: 2;\n    font-size: small;\n    top: -1em;\n    background-color: $colour-grey-background;\n    left: 4em;\n    padding-left: 1em;\n    padding-right: 1em;\n    color: $colour-primary-blue;\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-sleave {\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    }\n  }\n}\n\n","import { Component, 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  @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=\"sleeve\">\n          <div class=\"inner-sleave\">\n            {currencySymbol && <span class=\"currency-symbol\">{currencySymbol}</span>}\n            <slot name=\"input\" />\n            <div style={{ clear: 'both' }}></div>\n          </div>\n        </div>\n        <div class=\"prompt\">\n          <slot name=\"label\" />\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/biggive-timeline.js

@@ -113,7 +113,7 @@ const BiggiveTimeline$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveTimeline
         });
     }
     render() {
-        return (h("div", { class: 'container space-below-' +
+        return (h("div", { key: 'cb43cf7f378936cd89dbccbd7c72b83905f21a4b', class: 'container space-below-' +
                 this.spaceBelow +
                 ' text-colour-' +
                 this.textColour +
@@ -136,7 +136,7 @@ const BiggiveTimeline$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveTimeline
                 ' entry-title-colour-' +
                 this.entryTitleColour +
                 ' entry-text-colour-' +
-                this.entryTextColour }, h("div", { class: "navigation" }, h("div", { class: "button prev", onClick: this.clickPrevHandler, title: "Previous" }, h("svg", { width: "9", height: "16", viewBox: "0 0 9 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M8.29311 14.5703L1.73926 8.01646L8.29311 1.46261", stroke: "#000000", "stroke-width": "2" }))), h("div", { class: "sleeve" }, h("ul", null, this.tabHeadings.map(tab => (h("li", { onClick: this.clickTabHandler }, tab))))), h("div", { class: "button next", onClick: this.clickNextHandler, title: "Next" }, h("svg", { width: "9", height: "16", viewBox: "0 0 9 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M0.739117 1.46094L7.29297 8.01479L0.739118 14.5686", stroke: "#000000", "stroke-width": "2" })))), h("div", { class: "entry-wrap" }, this.children.map(entry => (h("div", { class: "entry", "data-date": entry.date }, h("h4", { class: "title" }, entry.heading), h("div", { class: "content", innerHTML: entry.innerHTML })))))));
+                this.entryTextColour }, h("div", { key: 'c1749936a1bd46e9129b4104ee1dacc867df5bc3', class: "navigation" }, h("div", { key: '23567e5b5f5792aea36a123f575565b2385d3e2f', class: "button prev", onClick: this.clickPrevHandler, title: "Previous" }, h("svg", { key: 'c4e166fb4fce2fed406a61a3e540df0313c0caed', width: "9", height: "16", viewBox: "0 0 9 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '47ceb0e05d49a752b6ac517caeb0f569e797417f', d: "M8.29311 14.5703L1.73926 8.01646L8.29311 1.46261", stroke: "#000000", "stroke-width": "2" }))), h("div", { key: 'e958f26ea6d5a360354cec3ec568072eeee89899', class: "sleeve" }, h("ul", { key: '17023a6c51fe88b2faa82f087b7e1bff1f2750f6' }, this.tabHeadings.map(tab => (h("li", { onClick: this.clickTabHandler }, tab))))), h("div", { key: '910aa9fe9731008f0818bab5d8cede9060d88fe1', class: "button next", onClick: this.clickNextHandler, title: "Next" }, h("svg", { key: '0c82c15b8d51ebd472a8dcbefd9d1e64205d3731', width: "9", height: "16", viewBox: "0 0 9 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '04d9c83bfe0c79336c2f99bcab035b015b2added', d: "M0.739117 1.46094L7.29297 8.01479L0.739118 14.5686", stroke: "#000000", "stroke-width": "2" })))), h("div", { key: '6e5cf8e897f40ebd05a3c77e1b1fb179d9c5c4e7', class: "entry-wrap" }, this.children.map(entry => (h("div", { class: "entry", "data-date": entry.date }, h("h4", { class: "title" }, entry.heading), h("div", { class: "content", innerHTML: entry.innerHTML })))))));
     }
     get host() { return this; }
     static get style() { return BiggiveTimelineStyle0; }

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

@@ -1 +1 @@
-{"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}
+{"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

@@ -12,7 +12,7 @@ const BiggiveTotalizerTickerItem$1 = /*@__PURE__*/ proxyCustomElement(class Bigg
         this.label = undefined;
     }
     render() {
-        return (h("div", { class: "ticker-item" }, h("strong", null, this.figure), " ", this.label));
+        return (h("div", { key: 'afb95bb654892517ef199abcad04b888f13a596c', class: "ticker-item" }, h("strong", { key: 'afd8e3e88e4e6f008cd037b2dcd9a429d6cb108f' }, this.figure), " ", this.label));
     }
     static get style() { return BiggiveTotalizerTickerItemStyle0; }
 }, [1, "biggive-totalizer-ticker-item", {

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,WAAK,KAAK,EAAC,aAAa,IACtB,kBAAS,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

@@ -89,7 +89,7 @@ const BiggiveTotalizer$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveTotaliz
         });
     }
     render() {
-        return (h("div", { class: 'container space-below-' + this.spaceBelow }, h("div", null, h("div", { class: "banner" }, h("div", { class: 'main-message-wrap background-colour-' + this.secondaryColour + ' text-colour-' + this.secondaryTextColour }, this.mainMessage), h("div", { class: 'ticker-wrap background-colour-' + this.primaryColour + ' text-colour-' + this.primaryTextColour }, h("div", { id: "sleeve_1", class: "sleeve" }, h("slot", { name: "ticker-items" })), h("div", { id: "sleeve_2", class: "sleeve sleeve-delayed-copy" }), h("div", { id: "sleeve_3", class: "sleeve sleeve-delayed-copy" }), h("div", { id: "sleeve_4", class: "sleeve sleeve-delayed-copy" }))))));
+        return (h("div", { key: '4ecdacf74f838683944619c97ebb68744a0af5da', class: 'container space-below-' + this.spaceBelow }, h("div", { key: '56264afd6331ab27e2016b3c53a2404d503726d4' }, h("div", { key: '1602eb2098650f4eef052e2670dc909cfbd0fac2', class: "banner" }, h("div", { key: '4e71eb72267f5f3c07e4ee300a13f9a739668f4a', class: 'main-message-wrap background-colour-' + this.secondaryColour + ' text-colour-' + this.secondaryTextColour }, this.mainMessage), h("div", { key: '0ec41320eefbabe9fb5e154b14f5e03e97a0ac8e', class: 'ticker-wrap background-colour-' + this.primaryColour + ' text-colour-' + this.primaryTextColour }, h("div", { key: 'd896541f9c20116b6f94452347622cac1857108c', id: "sleeve_1", class: "sleeve" }, h("slot", { key: '836d2b6fa73db83208b4c3f6944475932db73887', name: "ticker-items" })), h("div", { key: '541e3b3cea3be2e428e41ffa32ea4be1c4d05593', id: "sleeve_2", class: "sleeve sleeve-delayed-copy" }), h("div", { key: '987778b55bf30fe3cd15e7c183108df699648a25', id: "sleeve_3", class: "sleeve sleeve-delayed-copy" }), h("div", { key: '2ee144b6327c7333478bd608da341100f51bcde5', id: "sleeve_4", class: "sleeve sleeve-delayed-copy" }))))));
     }
     get host() { return this; }
     static get style() { return BiggiveTotalizerStyle0; }

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

@@ -1 +1 @@
-{"file":"biggive-totalizer.js","mappings":"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","names":["BiggiveTotalizer"],"sources":["src/components/biggive-totalizer/biggive-totalizer.scss?tag=biggive-totalizer&encapsulation=shadow","src/components/biggive-totalizer/biggive-totalizer.tsx"],"sourcesContent":["@include backgrounds();\n@include spacers();\n@include text-colours();\n\n:host {\n  display: contents;\n  @include standard-font();\n\n  --ticker-end-left: -200%;\n}\n\n@keyframes ticker {\n  0% {\n    transform: translate3d(0, 0, 0);\n  }\n\n  100% {\n    transform: translate3d(var(--ticker-end-left), 0, 0);\n  }\n}\n\n.container {\n  position: absolute;\n  left: 0;\n  right: 0;\n  z-index: 1;\n\n  .main-message-wrap {\n    position: absolute;\n    z-index: 1;\n    padding: $spacer-2 $spacer-4;\n    left: 0;\n    top: 0;\n    @include font-size-large();\n    font-weight: 600;\n    max-width: 33.3%;\n  }\n\n  .ticker-wrap {\n    @include font-size-medium();\n    padding: calc($spacer-2 - 4px) $spacer-4 $spacer-2 0;\n    min-height: 17px;\n    overflow: hidden;\n    position: relative;\n\n    .sleeve {\n      will-change: transform; // https://web.dev/stick-to-compositor-only-properties-and-manage-layer-count/\n      display: inline-flex;\n      position: absolute;\n      top: 4px;\n      height: 24px;\n      min-width: 100%;\n      left: 100%;\n      white-space: nowrap;\n\n      animation-iteration-count: infinite;\n      animation-timing-function: linear;\n      animation-name: ticker;\n      // TS overrides the specific timings once the width of ticker elements is known.\n      animation-duration: 10s;\n\n      @media (prefers-reduced-motion) {\n        animation-name: none !important; // Turn off movement when needed for a11y.\n      }\n    }\n\n    .sleeve-delayed-copy {\n      // We set between 0 and 3 copies to `display: inline-flex` in TS, depending on the size\n      // of the items and container.\n      display: none;\n      white-space: nowrap;\n      max-height: 24px;\n    }\n  }\n}\n\n@media screen and (max-width: $screen-tablet-max) {\n  .container {\n    .main-message-wrap {\n      @include font-size-medium();\n      padding: $spacer-2;\n    }\n  }\n}\n","import { Component, Element, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-totalizer',\n  styleUrl: 'biggive-totalizer.scss',\n  shadow: true,\n})\nexport class BiggiveTotalizer {\n  private lastWrapperWidth: number = 0;\n\n  @Element() host: HTMLBiggiveTotalizerElement;\n  /**\n   * Space below component\n   */\n  @Prop() spaceBelow: number = 0;\n  /**\n   * Primary banner colour\n   */\n  @Prop() primaryColour: string = 'primary';\n\n  /**\n   * Primary text colour\n   */\n  @Prop() primaryTextColour: string = 'white';\n\n  /**\n   * Secondary banner colour\n   */\n  @Prop() secondaryColour: string = 'secondary';\n\n  /**\n   * Secondary text colour\n   */\n  @Prop() secondaryTextColour: string = 'black';\n\n  /**\n   * Primary message\n   */\n  @Prop() mainMessage: string;\n\n  private setSpeed(itemsWidth: number, containerWidth: number) {\n    console.log('setSpeed() called with itemsWidth=' + itemsWidth + ', containerWidth=' + containerWidth);\n\n    if (containerWidth === this.lastWrapperWidth) {\n      // Some browsers fire 'resize' overzealously on scroll; we don't want to cause extra paints if nothing\n      // relevant changed.\n      return;\n    }\n\n    let sleeves: HTMLDivElement[] = [];\n    for (const ii in [1, 2, 3, 4]) {\n      const sleeve = this.host.shadowRoot?.querySelector('.ticker-wrap #sleeve_' + ii) as HTMLDivElement | null;\n      if (sleeve) {\n        sleeves.push(sleeve);\n        // Restart the animation(s) on window resize to reduce the chance of jankiness.\n        // https://stackoverflow.com/a/45036752/2803757\n        sleeve.style.animationName = 'none';\n      }\n    }\n\n    this.lastWrapperWidth = containerWidth;\n\n    if (sleeves.length === 0) {\n      console.log('sleeves missing, skipping setSpeed()');\n      return;\n    }\n\n    // We've seen the initial calculation exclude the ~30px per set of values end padding before,\n    // and it's safe to err on the side of more copies to reduce the chance of abrupt early loop\n    // ends, so we add a buffer of 40px to the calculation when deciding how many copies to use.\n    // const sleeveCount = Math.max(1, Math.min(4, Math.ceil((2 * (40 + itemsWidth)) / containerWidth)));\n    // TODO Ultimately we'd like to get multiple copies working, or simplify. This\n    // has proven very hard to iterate on pending a fix for DON-867 because\n    // there is Angular-specific behaviour breaking the contents of copies.\n    const sleeveCount = 1;\n    this.host.style.setProperty('--ticker-end-left', `-${(sleeveCount + 1) * 100}%`);\n\n    const duration = Math.round((itemsWidth / 50) * sleeveCount);\n\n    for (let ii = 1; ii <= sleeveCount; ii++) {\n      const sleeve = sleeves[ii - 1];\n      if (sleeve) {\n        sleeve.style.animationDuration = duration + 's';\n        // https://stackoverflow.com/a/45847760\n        sleeve.style.animationDelay = (duration / (sleeveCount - 1)) * (ii - 1) + 's';\n        sleeve.style.display = 'inline-flex';\n        sleeve.style.animationName = 'ticker';\n      }\n    }\n  }\n\n  componentDidLoad() {\n    const wrapper = this.host.shadowRoot?.querySelector('.ticker-wrap') as HTMLDivElement;\n\n    const tickerItemsInternalWrapper: HTMLDivElement | null = this.host.querySelector(`[slot=\"ticker-items\"]`);\n    const sleeve1: HTMLDivElement | null | undefined = this.host.shadowRoot?.querySelector('.ticker-wrap #sleeve_1');\n    const sleeve2: HTMLDivElement | null | undefined = this.host.shadowRoot?.querySelector('.ticker-wrap #sleeve_2');\n    const sleeve3: HTMLDivElement | null | undefined = this.host.shadowRoot?.querySelector('.ticker-wrap #sleeve_3');\n    const sleeve4: HTMLDivElement | null | undefined = this.host.shadowRoot?.querySelector('.ticker-wrap #sleeve_4');\n\n    if (!tickerItemsInternalWrapper || !sleeve1) {\n      console.log('tickerItemsInternalWrapper or sleeve1 is missing, skipping totalizer animation setup');\n      return;\n    }\n\n    // Deep clone [all children of] the ticker items internal wrapper and append them, so the ticker can show items without\n    // a blank break. Sleeve 2 and up will animate on delays per https://stackoverflow.com/a/45847760.\n    setTimeout(() => {\n      sleeve2 && sleeve2.appendChild(tickerItemsInternalWrapper.cloneNode(true));\n      sleeve3 && sleeve3.appendChild(tickerItemsInternalWrapper.cloneNode(true));\n      sleeve4 && sleeve4.appendChild(tickerItemsInternalWrapper.cloneNode(true));\n    }, 800);\n\n    setTimeout(() => {\n      // In Angular contexts, it seems like we need to leave a little time before the calculations work.\n      // Not totally clear why yet.\n      this.setSpeed(tickerItemsInternalWrapper.clientWidth, wrapper.clientWidth);\n    }, 300);\n\n    window.addEventListener('resize', () => {\n      this.setSpeed(tickerItemsInternalWrapper.clientWidth, wrapper.clientWidth);\n    });\n  }\n\n  render() {\n    return (\n      <div class={'container space-below-' + this.spaceBelow}>\n        <div>\n          <div class=\"banner\">\n            <div class={'main-message-wrap background-colour-' + this.secondaryColour + ' text-colour-' + this.secondaryTextColour}>{this.mainMessage}</div>\n            <div class={'ticker-wrap background-colour-' + this.primaryColour + ' text-colour-' + this.primaryTextColour}>\n              <div id=\"sleeve_1\" class=\"sleeve\">\n                <slot name=\"ticker-items\"></slot>\n              </div>\n              <div id=\"sleeve_2\" class=\"sleeve sleeve-delayed-copy\">\n                {/* Contents for these 3 are copied in TS and copies shown or hidden based on available space */}\n              </div>\n              <div id=\"sleeve_3\" class=\"sleeve sleeve-delayed-copy\"></div>\n              <div id=\"sleeve_4\" class=\"sleeve sleeve-delayed-copy\"></div>\n            </div>\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"biggive-totalizer.js","mappings":"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","names":["BiggiveTotalizer"],"sources":["src/components/biggive-totalizer/biggive-totalizer.scss?tag=biggive-totalizer&encapsulation=shadow","src/components/biggive-totalizer/biggive-totalizer.tsx"],"sourcesContent":["@include backgrounds();\n@include spacers();\n@include text-colours();\n\n:host {\n  display: contents;\n  @include standard-font();\n\n  --ticker-end-left: -200%;\n}\n\n@keyframes ticker {\n  0% {\n    transform: translate3d(0, 0, 0);\n  }\n\n  100% {\n    transform: translate3d(var(--ticker-end-left), 0, 0);\n  }\n}\n\n.container {\n  position: absolute;\n  left: 0;\n  right: 0;\n  z-index: 1;\n\n  .main-message-wrap {\n    position: absolute;\n    z-index: 1;\n    padding: $spacer-2 $spacer-4;\n    left: 0;\n    top: 0;\n    @include font-size-large();\n    font-weight: 600;\n    max-width: 33.3%;\n  }\n\n  .ticker-wrap {\n    @include font-size-medium();\n    padding: calc($spacer-2 - 4px) $spacer-4 $spacer-2 0;\n    min-height: 17px;\n    overflow: hidden;\n    position: relative;\n\n    .sleeve {\n      will-change: transform; // https://web.dev/stick-to-compositor-only-properties-and-manage-layer-count/\n      display: inline-flex;\n      position: absolute;\n      top: 4px;\n      height: 24px;\n      min-width: 100%;\n      left: 100%;\n      white-space: nowrap;\n\n      animation-iteration-count: infinite;\n      animation-timing-function: linear;\n      animation-name: ticker;\n      // TS overrides the specific timings once the width of ticker elements is known.\n      animation-duration: 10s;\n\n      @media (prefers-reduced-motion) {\n        animation-name: none !important; // Turn off movement when needed for a11y.\n      }\n    }\n\n    .sleeve-delayed-copy {\n      // We set between 0 and 3 copies to `display: inline-flex` in TS, depending on the size\n      // of the items and container.\n      display: none;\n      white-space: nowrap;\n      max-height: 24px;\n    }\n  }\n}\n\n@media screen and (max-width: $screen-tablet-max) {\n  .container {\n    .main-message-wrap {\n      @include font-size-medium();\n      padding: $spacer-2;\n    }\n  }\n}\n","import { Component, Element, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-totalizer',\n  styleUrl: 'biggive-totalizer.scss',\n  shadow: true,\n})\nexport class BiggiveTotalizer {\n  private lastWrapperWidth: number = 0;\n\n  @Element() host: HTMLBiggiveTotalizerElement;\n  /**\n   * Space below component\n   */\n  @Prop() spaceBelow: number = 0;\n  /**\n   * Primary banner colour\n   */\n  @Prop() primaryColour: string = 'primary';\n\n  /**\n   * Primary text colour\n   */\n  @Prop() primaryTextColour: string = 'white';\n\n  /**\n   * Secondary banner colour\n   */\n  @Prop() secondaryColour: string = 'secondary';\n\n  /**\n   * Secondary text colour\n   */\n  @Prop() secondaryTextColour: string = 'black';\n\n  /**\n   * Primary message\n   */\n  @Prop() mainMessage: string;\n\n  private setSpeed(itemsWidth: number, containerWidth: number) {\n    console.log('setSpeed() called with itemsWidth=' + itemsWidth + ', containerWidth=' + containerWidth);\n\n    if (containerWidth === this.lastWrapperWidth) {\n      // Some browsers fire 'resize' overzealously on scroll; we don't want to cause extra paints if nothing\n      // relevant changed.\n      return;\n    }\n\n    let sleeves: HTMLDivElement[] = [];\n    for (const ii in [1, 2, 3, 4]) {\n      const sleeve = this.host.shadowRoot?.querySelector('.ticker-wrap #sleeve_' + ii) as HTMLDivElement | null;\n      if (sleeve) {\n        sleeves.push(sleeve);\n        // Restart the animation(s) on window resize to reduce the chance of jankiness.\n        // https://stackoverflow.com/a/45036752/2803757\n        sleeve.style.animationName = 'none';\n      }\n    }\n\n    this.lastWrapperWidth = containerWidth;\n\n    if (sleeves.length === 0) {\n      console.log('sleeves missing, skipping setSpeed()');\n      return;\n    }\n\n    // We've seen the initial calculation exclude the ~30px per set of values end padding before,\n    // and it's safe to err on the side of more copies to reduce the chance of abrupt early loop\n    // ends, so we add a buffer of 40px to the calculation when deciding how many copies to use.\n    // const sleeveCount = Math.max(1, Math.min(4, Math.ceil((2 * (40 + itemsWidth)) / containerWidth)));\n    // TODO Ultimately we'd like to get multiple copies working, or simplify. This\n    // has proven very hard to iterate on pending a fix for DON-867 because\n    // there is Angular-specific behaviour breaking the contents of copies.\n    const sleeveCount = 1;\n    this.host.style.setProperty('--ticker-end-left', `-${(sleeveCount + 1) * 100}%`);\n\n    const duration = Math.round((itemsWidth / 50) * sleeveCount);\n\n    for (let ii = 1; ii <= sleeveCount; ii++) {\n      const sleeve = sleeves[ii - 1];\n      if (sleeve) {\n        sleeve.style.animationDuration = duration + 's';\n        // https://stackoverflow.com/a/45847760\n        sleeve.style.animationDelay = (duration / (sleeveCount - 1)) * (ii - 1) + 's';\n        sleeve.style.display = 'inline-flex';\n        sleeve.style.animationName = 'ticker';\n      }\n    }\n  }\n\n  componentDidLoad() {\n    const wrapper = this.host.shadowRoot?.querySelector('.ticker-wrap') as HTMLDivElement;\n\n    const tickerItemsInternalWrapper: HTMLDivElement | null = this.host.querySelector(`[slot=\"ticker-items\"]`);\n    const sleeve1: HTMLDivElement | null | undefined = this.host.shadowRoot?.querySelector('.ticker-wrap #sleeve_1');\n    const sleeve2: HTMLDivElement | null | undefined = this.host.shadowRoot?.querySelector('.ticker-wrap #sleeve_2');\n    const sleeve3: HTMLDivElement | null | undefined = this.host.shadowRoot?.querySelector('.ticker-wrap #sleeve_3');\n    const sleeve4: HTMLDivElement | null | undefined = this.host.shadowRoot?.querySelector('.ticker-wrap #sleeve_4');\n\n    if (!tickerItemsInternalWrapper || !sleeve1) {\n      console.log('tickerItemsInternalWrapper or sleeve1 is missing, skipping totalizer animation setup');\n      return;\n    }\n\n    // Deep clone [all children of] the ticker items internal wrapper and append them, so the ticker can show items without\n    // a blank break. Sleeve 2 and up will animate on delays per https://stackoverflow.com/a/45847760.\n    setTimeout(() => {\n      sleeve2 && sleeve2.appendChild(tickerItemsInternalWrapper.cloneNode(true));\n      sleeve3 && sleeve3.appendChild(tickerItemsInternalWrapper.cloneNode(true));\n      sleeve4 && sleeve4.appendChild(tickerItemsInternalWrapper.cloneNode(true));\n    }, 800);\n\n    setTimeout(() => {\n      // In Angular contexts, it seems like we need to leave a little time before the calculations work.\n      // Not totally clear why yet.\n      this.setSpeed(tickerItemsInternalWrapper.clientWidth, wrapper.clientWidth);\n    }, 300);\n\n    window.addEventListener('resize', () => {\n      this.setSpeed(tickerItemsInternalWrapper.clientWidth, wrapper.clientWidth);\n    });\n  }\n\n  render() {\n    return (\n      <div class={'container space-below-' + this.spaceBelow}>\n        <div>\n          <div class=\"banner\">\n            <div class={'main-message-wrap background-colour-' + this.secondaryColour + ' text-colour-' + this.secondaryTextColour}>{this.mainMessage}</div>\n            <div class={'ticker-wrap background-colour-' + this.primaryColour + ' text-colour-' + this.primaryTextColour}>\n              <div id=\"sleeve_1\" class=\"sleeve\">\n                <slot name=\"ticker-items\"></slot>\n              </div>\n              <div id=\"sleeve_2\" class=\"sleeve sleeve-delayed-copy\">\n                {/* Contents for these 3 are copied in TS and copies shown or hidden based on available space */}\n              </div>\n              <div id=\"sleeve_3\" class=\"sleeve sleeve-delayed-copy\"></div>\n              <div id=\"sleeve_4\" class=\"sleeve sleeve-delayed-copy\"></div>\n            </div>\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

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

@@ -26,7 +26,7 @@ const BiggiveVideoFeature$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveVide
     }
     render() {
         const youtubeClass = this.videoUrl.includes('youtube.com') ? ' youtube' : '';
-        return (h("div", { class: 'container text-colour-' + this.defaultTextColour + ' space-above-' + this.spaceAbove + ' space-below-' + this.spaceBelow }, h("div", { class: "sleeve" }, h("div", { class: "content-wrap" }, h("div", { class: 'slug text-colour-' + this.slugColour }, this.slug), h("h2", { class: 'title text-colour-' + this.mainTitleColour }, this.mainTitle), h("div", { class: 'teaser text-colour-' + this.teaserColour }, this.teaser), this.buttonLabel != null && this.buttonUrl != null ? (h("biggive-button", { "colour-scheme": this.buttonColourScheme, url: this.buttonUrl, label: this.buttonLabel })) : null), h("div", { class: "graphic-wrap" }, this.videoUrl !== null && this.videoUrl !== undefined ? (h("div", { class: 'video-wrap' + youtubeClass, innerHTML: VideoService.getEmbedHtml(this.videoUrl, this.mainTitle) })) : null))));
+        return (h("div", { key: '2de9c808246be7c2d40ef80c310a454988451489', class: 'container text-colour-' + this.defaultTextColour + ' space-above-' + this.spaceAbove + ' space-below-' + this.spaceBelow }, h("div", { key: 'd3c66d90fef509f7fe1e474f5f15908f4b4a3830', class: "sleeve" }, h("div", { key: 'b1d0e4b5e968c9891e5e9ff2691cfdf71de8c093', class: "content-wrap" }, h("div", { key: '89f74432a65211bf75cc834edb7359633b0e7d45', class: 'slug text-colour-' + this.slugColour }, this.slug), h("h2", { key: '4ab81ed2b88b79d49e7eae895fe001019a334a1a', class: 'title text-colour-' + this.mainTitleColour }, this.mainTitle), h("div", { key: '046ba0757343f10f3e84b6f70cb6c377cc62aa42', class: 'teaser text-colour-' + this.teaserColour }, this.teaser), this.buttonLabel != null && this.buttonUrl != null ? (h("biggive-button", { "colour-scheme": this.buttonColourScheme, url: this.buttonUrl, label: this.buttonLabel })) : null), h("div", { key: '68cfe2bbff4996307240fbfa610cad410850f585', class: "graphic-wrap" }, this.videoUrl !== null && this.videoUrl !== undefined ? (h("div", { class: 'video-wrap' + youtubeClass, innerHTML: VideoService.getEmbedHtml(this.videoUrl, this.mainTitle) })) : null))));
     }
     static get style() { return BiggiveVideoFeatureStyle0; }
 }, [1, "biggive-video-feature", {

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

@@ -1 +1 @@
-{"file":"biggive-video-feature.js","mappings":";;;;AAAA,MAAM,sBAAsB,GAAG,8rGAA8rG,CAAC;AAC9tG,kCAAe,sBAAsB;;MCOxBA,qBAAmB;;;;;0BAID,CAAC;0BAID,CAAC;iCAIM,SAAS;wBAKlB,EAAE;;0BAUA,EAAE;;+BAUG,EAAE;;4BAUL,EAAE;;;kCAeI,SAAS;;IAE9C,MAAM;QACJ,MAAM,YAAY,GAAG,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,aAAa,CAAC,GAAG,UAAU,GAAG,EAAE,CAAC;QAE7E,QACE,WAAK,KAAK,EAAE,wBAAwB,GAAG,IAAI,CAAC,iBAAiB,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,IACnI,WAAK,KAAK,EAAC,QAAQ,IACjB,WAAK,KAAK,EAAC,cAAc,IACvB,WAAK,KAAK,EAAE,mBAAmB,GAAG,IAAI,CAAC,UAAU,IAAG,IAAI,CAAC,IAAI,CAAO,EACpE,UAAI,KAAK,EAAE,oBAAoB,GAAG,IAAI,CAAC,eAAe,IAAG,IAAI,CAAC,SAAS,CAAM,EAC7E,WAAK,KAAK,EAAE,qBAAqB,GAAG,IAAI,CAAC,YAAY,IAAG,IAAI,CAAC,MAAM,CAAO,EACzE,IAAI,CAAC,WAAW,IAAI,IAAI,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,IACjD,uCAA+B,IAAI,CAAC,kBAAkB,EAAE,GAAG,EAAE,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,WAAW,GAAmB,IACrH,IAAI,CACJ,EACN,WAAK,KAAK,EAAC,cAAc,IACtB,IAAI,CAAC,QAAQ,KAAK,IAAI,IAAI,IAAI,CAAC,QAAQ,KAAK,SAAS,IACpD,WAAK,KAAK,EAAE,YAAY,GAAG,YAAY,EAAE,SAAS,EAAE,YAAY,CAAC,YAAY,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,SAAS,CAAC,GAAQ,IAClH,IAAI,CACJ,CACF,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveVideoFeature"],"sources":["src/components/biggive-video-feature/biggive-video-feature.scss?tag=biggive-video-feature&encapsulation=shadow","src/components/biggive-video-feature/biggive-video-feature.tsx"],"sourcesContent":["@include spacers();\n@include text-colours();\n\n:host {\n  display: contents;\n}\n\n.video-wrap {\n  @include video-wrap();\n}\n\n.video-wrap.youtube {\n  padding-bottom: 56.25%;\n}\n\n.container {\n  @include standard-font();\n  position: relative;\n  .sleeve {\n    @include flex-container-row();\n    .content-wrap {\n      width: calc(40% - $spacer-3);\n      position: relative;\n      z-index: 1;\n      .slug {\n        @include heading-4;\n        margin: 0;\n        padding: 0;\n      }\n      h2 {\n        @include heading-2;\n        margin: 0 0 $spacer-3 0;\n        padding: 0;\n      }\n      .teaser {\n        margin: 0 0 $spacer-5 0;\n        padding: 0;\n      }\n    }\n    .graphic-wrap {\n      width: calc(60% - $spacer-3);\n    }\n  }\n}\n\n@media screen and (max-width: $screen-mobile-max) {\n  .container {\n    .sleeve {\n      flex-wrap: wrap;\n    .content-wrap {\n      width: 100%;\n    }\n    .graphic-wrap {\n      padding-top: 20px;\n      width: 100%;\n      margin-bottom: $spacer-3;\n    }\n  }\n  }\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { VideoService } from '../../util/video';\n\n@Component({\n  tag: 'biggive-video-feature',\n  styleUrl: 'biggive-video-feature.scss',\n  shadow: true,\n})\nexport class BiggiveVideoFeature {\n  /**\n   * Space above component\n   */\n  @Prop() spaceAbove: number = 0;\n  /**\n   * Space below component\n   */\n  @Prop() spaceBelow: number = 0;\n  /**\n   * Default text colour\n   */\n  @Prop() defaultTextColour: string = 'primary';\n\n  /**\n   * Full URL of a video.\n   */\n  @Prop() videoUrl: string = '';\n\n  /**\n   * Slug\n   */\n  @Prop() slug: string;\n\n  /**\n   * Slug colour\n   */\n  @Prop() slugColour: string = '';\n\n  /**\n   * Video title\n   */\n  @Prop() mainTitle: string;\n\n  /**\n   * Slug colour\n   */\n  @Prop() mainTitleColour: string = '';\n\n  /**\n   * Introductory teaser text\n   */\n  @Prop() teaser: string;\n\n  /**\n   * Teaser colour\n   */\n  @Prop() teaserColour: string = '';\n\n  /**\n   * Button Url\n   */\n  @Prop() buttonUrl: string;\n\n  /**\n   * Button Label\n   */\n  @Prop() buttonLabel: string;\n\n  /**\n   * Button Colour Scheme\n   */\n  @Prop() buttonColourScheme: string = 'primary';\n\n  render() {\n    const youtubeClass = this.videoUrl.includes('youtube.com') ? ' youtube' : '';\n\n    return (\n      <div class={'container text-colour-' + this.defaultTextColour + ' space-above-' + this.spaceAbove + ' space-below-' + this.spaceBelow}>\n        <div class=\"sleeve\">\n          <div class=\"content-wrap\">\n            <div class={'slug text-colour-' + this.slugColour}>{this.slug}</div>\n            <h2 class={'title text-colour-' + this.mainTitleColour}>{this.mainTitle}</h2>\n            <div class={'teaser text-colour-' + this.teaserColour}>{this.teaser}</div>\n            {this.buttonLabel != null && this.buttonUrl != null ? (\n              <biggive-button colour-scheme={this.buttonColourScheme} url={this.buttonUrl} label={this.buttonLabel}></biggive-button>\n            ) : null}\n          </div>\n          <div class=\"graphic-wrap\">\n            {this.videoUrl !== null && this.videoUrl !== undefined ? (\n              <div class={'video-wrap' + youtubeClass} innerHTML={VideoService.getEmbedHtml(this.videoUrl, this.mainTitle)}></div>\n            ) : null}\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"biggive-video-feature.js","mappings":";;;;AAAA,MAAM,sBAAsB,GAAG,8rGAA8rG,CAAC;AAC9tG,kCAAe,sBAAsB;;MCOxBA,qBAAmB;;;;;0BAID,CAAC;0BAID,CAAC;iCAIM,SAAS;wBAKlB,EAAE;;0BAUA,EAAE;;+BAUG,EAAE;;4BAUL,EAAE;;;kCAeI,SAAS;;IAE9C,MAAM;QACJ,MAAM,YAAY,GAAG,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,aAAa,CAAC,GAAG,UAAU,GAAG,EAAE,CAAC;QAE7E,QACE,4DAAK,KAAK,EAAE,wBAAwB,GAAG,IAAI,CAAC,iBAAiB,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,IACnI,4DAAK,KAAK,EAAC,QAAQ,IACjB,4DAAK,KAAK,EAAC,cAAc,IACvB,4DAAK,KAAK,EAAE,mBAAmB,GAAG,IAAI,CAAC,UAAU,IAAG,IAAI,CAAC,IAAI,CAAO,EACpE,2DAAI,KAAK,EAAE,oBAAoB,GAAG,IAAI,CAAC,eAAe,IAAG,IAAI,CAAC,SAAS,CAAM,EAC7E,4DAAK,KAAK,EAAE,qBAAqB,GAAG,IAAI,CAAC,YAAY,IAAG,IAAI,CAAC,MAAM,CAAO,EACzE,IAAI,CAAC,WAAW,IAAI,IAAI,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,IACjD,uCAA+B,IAAI,CAAC,kBAAkB,EAAE,GAAG,EAAE,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,WAAW,GAAmB,IACrH,IAAI,CACJ,EACN,4DAAK,KAAK,EAAC,cAAc,IACtB,IAAI,CAAC,QAAQ,KAAK,IAAI,IAAI,IAAI,CAAC,QAAQ,KAAK,SAAS,IACpD,WAAK,KAAK,EAAE,YAAY,GAAG,YAAY,EAAE,SAAS,EAAE,YAAY,CAAC,YAAY,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,SAAS,CAAC,GAAQ,IAClH,IAAI,CACJ,CACF,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveVideoFeature"],"sources":["src/components/biggive-video-feature/biggive-video-feature.scss?tag=biggive-video-feature&encapsulation=shadow","src/components/biggive-video-feature/biggive-video-feature.tsx"],"sourcesContent":["@include spacers();\n@include text-colours();\n\n:host {\n  display: contents;\n}\n\n.video-wrap {\n  @include video-wrap();\n}\n\n.video-wrap.youtube {\n  padding-bottom: 56.25%;\n}\n\n.container {\n  @include standard-font();\n  position: relative;\n  .sleeve {\n    @include flex-container-row();\n    .content-wrap {\n      width: calc(40% - $spacer-3);\n      position: relative;\n      z-index: 1;\n      .slug {\n        @include heading-4;\n        margin: 0;\n        padding: 0;\n      }\n      h2 {\n        @include heading-2;\n        margin: 0 0 $spacer-3 0;\n        padding: 0;\n      }\n      .teaser {\n        margin: 0 0 $spacer-5 0;\n        padding: 0;\n      }\n    }\n    .graphic-wrap {\n      width: calc(60% - $spacer-3);\n    }\n  }\n}\n\n@media screen and (max-width: $screen-mobile-max) {\n  .container {\n    .sleeve {\n      flex-wrap: wrap;\n    .content-wrap {\n      width: 100%;\n    }\n    .graphic-wrap {\n      padding-top: 20px;\n      width: 100%;\n      margin-bottom: $spacer-3;\n    }\n  }\n  }\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { VideoService } from '../../util/video';\n\n@Component({\n  tag: 'biggive-video-feature',\n  styleUrl: 'biggive-video-feature.scss',\n  shadow: true,\n})\nexport class BiggiveVideoFeature {\n  /**\n   * Space above component\n   */\n  @Prop() spaceAbove: number = 0;\n  /**\n   * Space below component\n   */\n  @Prop() spaceBelow: number = 0;\n  /**\n   * Default text colour\n   */\n  @Prop() defaultTextColour: string = 'primary';\n\n  /**\n   * Full URL of a video.\n   */\n  @Prop() videoUrl: string = '';\n\n  /**\n   * Slug\n   */\n  @Prop() slug: string;\n\n  /**\n   * Slug colour\n   */\n  @Prop() slugColour: string = '';\n\n  /**\n   * Video title\n   */\n  @Prop() mainTitle: string;\n\n  /**\n   * Slug colour\n   */\n  @Prop() mainTitleColour: string = '';\n\n  /**\n   * Introductory teaser text\n   */\n  @Prop() teaser: string;\n\n  /**\n   * Teaser colour\n   */\n  @Prop() teaserColour: string = '';\n\n  /**\n   * Button Url\n   */\n  @Prop() buttonUrl: string;\n\n  /**\n   * Button Label\n   */\n  @Prop() buttonLabel: string;\n\n  /**\n   * Button Colour Scheme\n   */\n  @Prop() buttonColourScheme: string = 'primary';\n\n  render() {\n    const youtubeClass = this.videoUrl.includes('youtube.com') ? ' youtube' : '';\n\n    return (\n      <div class={'container text-colour-' + this.defaultTextColour + ' space-above-' + this.spaceAbove + ' space-below-' + this.spaceBelow}>\n        <div class=\"sleeve\">\n          <div class=\"content-wrap\">\n            <div class={'slug text-colour-' + this.slugColour}>{this.slug}</div>\n            <h2 class={'title text-colour-' + this.mainTitleColour}>{this.mainTitle}</h2>\n            <div class={'teaser text-colour-' + this.teaserColour}>{this.teaser}</div>\n            {this.buttonLabel != null && this.buttonUrl != null ? (\n              <biggive-button colour-scheme={this.buttonColourScheme} url={this.buttonUrl} label={this.buttonLabel}></biggive-button>\n            ) : null}\n          </div>\n          <div class=\"graphic-wrap\">\n            {this.videoUrl !== null && this.videoUrl !== undefined ? (\n              <div class={'video-wrap' + youtubeClass} innerHTML={VideoService.getEmbedHtml(this.videoUrl, this.mainTitle)}></div>\n            ) : null}\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/biggive-video.js

@@ -14,7 +14,7 @@ const BiggiveVideo$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveVideo exten
         this.videoUrl = '';
     }
     render() {
-        return (h("div", { class: 'container space-above-' + this.spaceAbove + ' space-below-' + this.spaceBelow }, h("div", { class: "video-wrap", innerHTML: VideoService.getEmbedHtml(this.videoUrl, null) })));
+        return (h("div", { key: 'f018ff7a0d91d8812151efb58e1316df2ecb8184', class: 'container space-above-' + this.spaceAbove + ' space-below-' + this.spaceBelow }, h("div", { key: '35327491c32d9028b49786d9dcc0ab9193324e08', class: "video-wrap", innerHTML: VideoService.getEmbedHtml(this.videoUrl, null) })));
     }
     static get style() { return BiggiveVideoStyle0; }
 }, [1, "biggive-video", {

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

@@ -1 +1 @@
-{"file":"biggive-video.js","mappings":";;;AAAA,MAAM,eAAe,GAAG,i0BAAi0B,CAAC;AAC11B,2BAAe,eAAe;;MCOjBA,cAAY;;;;;0BAIM,CAAC;0BAID,CAAC;wBAIH,EAAE;;IAE7B,MAAM;QACJ,QACE,WAAK,KAAK,EAAE,wBAAwB,GAAG,IAAI,CAAC,UAAU,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,IACxF,WAAK,KAAK,EAAC,YAAY,EAAC,SAAS,EAAE,YAAY,CAAC,YAAY,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,GAAQ,CACrF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveVideo"],"sources":["src/components/biggive-video/biggive-video.scss?tag=biggive-video&encapsulation=shadow","src/components/biggive-video/biggive-video.tsx"],"sourcesContent":["@include spacers();\n\n:host {\n  display: contents;\n}\n\n.video-wrap {\n  @include video-wrap();\n}\n\n.video-wrap.youtube {\n  padding-bottom: 56.25%;\n}\n\n.container {\n  @include standard-font();\n}\n\n","import { Component, Prop, h } from '@stencil/core';\nimport { VideoService } from '../../util/video';\n\n@Component({\n  tag: 'biggive-video',\n  styleUrl: 'biggive-video.scss',\n  shadow: true,\n})\nexport class BiggiveVideo {\n  /**\n   * Space above component\n   */\n  @Prop() spaceAbove: number = 0;\n  /**\n   * Space below component\n   */\n  @Prop() spaceBelow: number = 0;\n  /**\n   * Full URL of a video.\n   */\n  @Prop() videoUrl: string = '';\n\n  render() {\n    return (\n      <div class={'container space-above-' + this.spaceAbove + ' space-below-' + this.spaceBelow}>\n        <div class=\"video-wrap\" innerHTML={VideoService.getEmbedHtml(this.videoUrl, null)}></div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"biggive-video.js","mappings":";;;AAAA,MAAM,eAAe,GAAG,i0BAAi0B,CAAC;AAC11B,2BAAe,eAAe;;MCOjBA,cAAY;;;;;0BAIM,CAAC;0BAID,CAAC;wBAIH,EAAE;;IAE7B,MAAM;QACJ,QACE,4DAAK,KAAK,EAAE,wBAAwB,GAAG,IAAI,CAAC,UAAU,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,IACxF,4DAAK,KAAK,EAAC,YAAY,EAAC,SAAS,EAAE,YAAY,CAAC,YAAY,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,GAAQ,CACrF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveVideo"],"sources":["src/components/biggive-video/biggive-video.scss?tag=biggive-video&encapsulation=shadow","src/components/biggive-video/biggive-video.tsx"],"sourcesContent":["@include spacers();\n\n:host {\n  display: contents;\n}\n\n.video-wrap {\n  @include video-wrap();\n}\n\n.video-wrap.youtube {\n  padding-bottom: 56.25%;\n}\n\n.container {\n  @include standard-font();\n}\n\n","import { Component, Prop, h } from '@stencil/core';\nimport { VideoService } from '../../util/video';\n\n@Component({\n  tag: 'biggive-video',\n  styleUrl: 'biggive-video.scss',\n  shadow: true,\n})\nexport class BiggiveVideo {\n  /**\n   * Space above component\n   */\n  @Prop() spaceAbove: number = 0;\n  /**\n   * Space below component\n   */\n  @Prop() spaceBelow: number = 0;\n  /**\n   * Full URL of a video.\n   */\n  @Prop() videoUrl: string = '';\n\n  render() {\n    return (\n      <div class={'container space-above-' + this.spaceAbove + ' space-below-' + this.spaceBelow}>\n        <div class=\"video-wrap\" innerHTML={VideoService.getEmbedHtml(this.videoUrl, null)}></div>\n      </div>\n    );\n  }\n}\n"],"version":3}