@biggive/components 202501031034.0.0 → 202501071646.0.0

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

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

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

@@ -1 +1 @@
-{"file":"biggive-tabbed-content.js","mappings":"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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.map

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

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

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

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

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

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

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

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

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

package/dist/components/biggive-timeline.js

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

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

@@ -1 +1 @@
-{"file":"biggive-timeline.js","mappings":"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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

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

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

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

package/dist/components/biggive-totalizer.js

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

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    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 / 30) * 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    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 / 30) * 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

@@ -10,18 +10,37 @@ const BiggiveVideoFeature$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveVide
         super();
         this.__registerHost();
         this.__attachShadow();
+        /**
+         * Space above component
+         */
         this.spaceAbove = 0;
+        /**
+         * Space below component
+         */
         this.spaceBelow = 0;
+        /**
+         * Default text colour
+         */
         this.defaultTextColour = 'primary';
+        /**
+         * Full URL of a video.
+         */
         this.videoUrl = '';
-        this.slug = undefined;
+        /**
+         * Slug colour
+         */
         this.slugColour = '';
-        this.mainTitle = undefined;
+        /**
+         * Slug colour
+         */
         this.mainTitleColour = '';
-        this.teaser = undefined;
+        /**
+         * Teaser colour
+         */
         this.teaserColour = '';
-        this.buttonUrl = undefined;
-        this.buttonLabel = undefined;
+        /**
+         * Button Colour Scheme
+         */
         this.buttonColourScheme = 'primary';
     }
     render() {

package/dist/components/biggive-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,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}
+{"file":"biggive-video-feature.js","mappings":";;;;AAAA,MAAM,sBAAsB,GAAG,8rGAA8rG,CAAC;AAC9tG,kCAAe,sBAAsB;;MCOxBA,qBAAmB;IALhC;;;;;;;QASU,eAAU,GAAW,CAAC,CAAC;;;;QAIvB,eAAU,GAAW,CAAC,CAAC;;;;QAIvB,sBAAiB,GAAW,SAAS,CAAC;;;;QAKtC,aAAQ,GAAW,EAAE,CAAC;;;;QAUtB,eAAU,GAAW,EAAE,CAAC;;;;QAUxB,oBAAe,GAAW,EAAE,CAAC;;;;QAU7B,iBAAY,GAAW,EAAE,CAAC;;;;QAe1B,uBAAkB,GAAW,SAAS,CAAC;KAyBhD;IAvBC,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

@@ -9,8 +9,17 @@ const BiggiveVideo$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveVideo exten
         super();
         this.__registerHost();
         this.__attachShadow();
+        /**
+         * Space above component
+         */
         this.spaceAbove = 0;
+        /**
+         * Space below component
+         */
         this.spaceBelow = 0;
+        /**
+         * Full URL of a video.
+         */
         this.videoUrl = '';
     }
     render() {

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,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}
+{"file":"biggive-video.js","mappings":";;;AAAA,MAAM,eAAe,GAAG,i0BAAi0B,CAAC;AAC11B,2BAAe,eAAe;;MCOjBA,cAAY;IALzB;;;;;;;QASU,eAAU,GAAW,CAAC,CAAC;;;;QAIvB,eAAU,GAAW,CAAC,CAAC;;;;QAIvB,aAAQ,GAAW,EAAE,CAAC;KAS/B;IAPC,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}