@biggive/components 202401191800.0.0 → 202401231203.0.0

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

@@ -3,6 +3,7 @@ import { V as VideoService } from './video.js';
 import { d as defineCustomElement$2 } from './biggive-button2.js';
 
 const biggiveVideoFeatureCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.space-above-0{margin-top:0}.space-above-1{margin-top:5px}.space-above-2{margin-top:10px}.space-above-3{margin-top:15px}.space-above-4{margin-top:30px}.space-above-5{margin-top:45px}.space-above-6{margin-top:60px}.space-below-0{margin-bottom:0}.space-below-1{margin-bottom:5px}.space-below-2{margin-bottom:10px}.space-below-3{margin-bottom:15px}.space-below-4{margin-bottom:30px}.space-below-5{margin-bottom:45px}.space-below-6{margin-bottom:60px}.text-colour-hover-primary:hover,.text-colour-primary{color:#2C089B}.text-colour-hover-secondary:hover,.text-colour-secondary{color:#2AF135}.text-colour-hover-tertiary:hover,.text-colour-tertiary{color:#FF7272}.text-colour-hover-brand-1:hover,.text-colour-brand-1{color:#B30510}.text-colour-hover-brand-2:hover,.text-colour-brand-2{color:#6E0887}.text-colour-hover-brand-3:hover,.text-colour-brand-3{color:#50B400}.text-colour-hover-brand-4:hover,.text-colour-brand-4{color:#FFE500}.text-colour-hover-brand-5:hover,.text-colour-brand-5{color:#F07D00}.text-colour-hover-brand-cc-red:hover,.text-colour-brand-cc-red{color:#B30510}.text-colour-hover-brand-wgmf-purple:hover,.text-colour-brand-wgmf-purple{color:#6E0887}.text-colour-hover-brand-gmf-green:hover,.text-colour-brand-gmf-green{color:#50B400}.text-colour-hover-brand-emf-yellow:hover,.text-colour-brand-emf-yellow{color:#FFE500}.text-colour-hover-brand-c4c-orange:hover,.text-colour-brand-c4c-orange{color:#F07D00}.text-colour-hover-brand-afa-pink:hover,.text-colour-brand-afa-pink{color:#BF387D}.text-colour-hover-brand-mhf-turquoise:hover,.text-colour-brand-mhf-turquoise{color:#62CFC9}.text-colour-hover-brand-grey:hover,.text-colour-brand-grey{color:#CBC8C8}.text-colour-hover-white:hover,.text-colour-white{color:#FFFFFF}.text-colour-hover-black:hover,.text-colour-black{color:#000000}.text-colour-hover-grey-extra-light:hover,.text-colour-grey-extra-light{color:#D7D7D7}.text-colour-hover-grey-light:hover,.text-colour-grey-light{color:#E8E8E8}.text-colour-hover-grey-medium:hover,.text-colour-grey-medium{color:#8A8A8A}.text-colour-hover-grey-dark:hover,.text-colour-grey-dark{color:#4A4A4A}.text-colour-hover-brand-6:hover,.text-colour-brand-6{color:#CBC8C8}:host{display:contents}.video-wrap{position:relative}.video-wrap iframe,.video-wrap video{position:absolute;border:0;display:block;left:0;right:0;top:0;bottom:0;width:100%;height:100%}.video-wrap.youtube{padding-bottom:56.25%}.container{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;position:relative}.container .sleeve{display:flex;justify-content:space-between}.container .sleeve .content-wrap{width:calc(40% - 15px);position:relative;z-index:1}.container .sleeve .content-wrap .slug{font-size:20px;line-height:24px;font-weight:bold;margin:0;padding:0}.container .sleeve .content-wrap h2{font-size:38px;line-height:45px;font-weight:bold;margin:0 0 15px 0;padding:0}.container .sleeve .content-wrap .teaser{margin:0 0 45px 0;padding:0}.container .sleeve .graphic-wrap{width:calc(60% - 15px)}@media screen and (max-width: 576px){.container .sleeve{flex-wrap:wrap}.container .sleeve .content-wrap{width:100%}.container .sleeve .graphic-wrap{padding-top:20px;width:100%;margin-bottom:15px}}";
+const BiggiveVideoFeatureStyle0 = biggiveVideoFeatureCss;
 
 const BiggiveVideoFeature$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveVideoFeature extends HTMLElement {
     constructor() {
@@ -27,7 +28,7 @@ const BiggiveVideoFeature$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveVide
         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))));
     }
-    static get style() { return biggiveVideoFeatureCss; }
+    static get style() { return BiggiveVideoFeatureStyle0; }
 }, [1, "biggive-video-feature", {
         "spaceAbove": [2, "space-above"],
         "spaceBelow": [2, "space-below"],

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

@@ -1 +1 @@
-{"file":"biggive-video-feature.js","mappings":";;;;AAAA,MAAM,sBAAsB,GAAG,8rGAA8rG;;MCQhtGA,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,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}

package/dist/components/biggive-video.js

@@ -2,6 +2,7 @@ import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/clien
 import { V as VideoService } from './video.js';
 
 const biggiveVideoCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.space-above-0{margin-top:0}.space-above-1{margin-top:5px}.space-above-2{margin-top:10px}.space-above-3{margin-top:15px}.space-above-4{margin-top:30px}.space-above-5{margin-top:45px}.space-above-6{margin-top:60px}.space-below-0{margin-bottom:0}.space-below-1{margin-bottom:5px}.space-below-2{margin-bottom:10px}.space-below-3{margin-bottom:15px}.space-below-4{margin-bottom:30px}.space-below-5{margin-bottom:45px}.space-below-6{margin-bottom:60px}:host{display:contents}.video-wrap{position:relative}.video-wrap iframe,.video-wrap video{position:absolute;border:0;display:block;left:0;right:0;top:0;bottom:0;width:100%;height:100%}.video-wrap.youtube{padding-bottom:56.25%}.container{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px}";
+const BiggiveVideoStyle0 = biggiveVideoCss;
 
 const BiggiveVideo$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveVideo extends HTMLElement {
     constructor() {
@@ -15,7 +16,7 @@ const BiggiveVideo$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveVideo exten
     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) })));
     }
-    static get style() { return biggiveVideoCss; }
+    static get style() { return BiggiveVideoStyle0; }
 }, [1, "biggive-video", {
         "spaceAbove": [2, "space-above"],
         "spaceBelow": [2, "space-below"],

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

@@ -1 +1 @@
-{"file":"biggive-video.js","mappings":";;;AAAA,MAAM,eAAe,GAAG,i0BAAi0B;;MCQ50BA,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,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}

package/dist/components/fontawesome-icons.js

@@ -1,4 +1,4 @@
-import { a as faChild, b as faUniversalAccess, c as faBaby, d as faRainbow, e as faBlind, g as faCampground, h as faVenus, i as faUserGraduate, j as faPlus, k as faGlobe, l as faAlarmClock, m as faHeart, n as faBars, o as faX, p as faFilter, q as faFilterSlash, r as faPaw, s as faMedal, t as faTheaterMasks, u as faRibbon, v as faPeopleCarry, w as faParachuteBox, x as faBook, y as faSeedling, z as faHeartbeat, A as faHomeHeart, B as faHospital, C as faBalanceScale, D as faInfoCircle, E as faMicroscope, F as faHeadSideMedical, G as faMortarPestle, H as faPlaceOfWorship, I as faFutbol } from './index2.js';
+import { a as faPlus, b as faChild, c as faUniversalAccess, d as faBaby, e as faRainbow, g as faBlind, h as faCampground, i as faVenus, j as faUserGraduate, k as faGlobe, l as faAlarmClock, m as faHeart, n as faBars, o as faX, p as faFilter, q as faFilterSlash, r as faPaw, s as faMedal, t as faTheaterMasks, u as faRibbon, v as faPeopleCarry, w as faParachuteBox, x as faBook, y as faSeedling, z as faHeartbeat, A as faHomeHeart, B as faHospital, C as faBalanceScale, D as faInfoCircle, E as faMicroscope, F as faHeadSideMedical, G as faMortarPestle, H as faPlaceOfWorship, I as faFutbol } from './index2.js';
 
 var faLinkedinIn = {
   prefix: 'fab',

package/dist/components/index2.js

@@ -181,6 +181,6 @@ var faMasksTheater = {
 };
 var faTheaterMasks = faMasksTheater;
 
-export { faHomeHeart as A, faHospital as B, faBalanceScale as C, faInfoCircle as D, faMicroscope as E, faHeadSideMedical as F, faMortarPestle as G, faPlaceOfWorship as H, faFutbol as I, faChild as a, faUniversalAccess as b, faBaby as c, faRainbow as d, faBlind as e, faMagnifyingGlass as f, faCampground as g, faVenus as h, faUserGraduate as i, faPlus as j, faGlobe as k, faAlarmClock as l, faHeart as m, faBars as n, faX as o, faFilter as p, faFilterSlash as q, faPaw as r, faMedal as s, faTheaterMasks as t, faRibbon as u, faPeopleCarry as v, faParachuteBox as w, faBook as x, faSeedling as y, faHeartbeat as z };
+export { faHomeHeart as A, faHospital as B, faBalanceScale as C, faInfoCircle as D, faMicroscope as E, faHeadSideMedical as F, faMortarPestle as G, faPlaceOfWorship as H, faFutbol as I, faPlus as a, faChild as b, faUniversalAccess as c, faBaby as d, faRainbow as e, faMagnifyingGlass as f, faBlind as g, faCampground as h, faVenus as i, faUserGraduate as j, faGlobe as k, faAlarmClock as l, faHeart as m, faBars as n, faX as o, faFilter as p, faFilterSlash as q, faPaw as r, faMedal as s, faTheaterMasks as t, faRibbon as u, faPeopleCarry as v, faParachuteBox as w, faBook as x, faSeedling as y, faHeartbeat as z };
 
 //# sourceMappingURL=index2.js.map