npm - @biggive/components - Versions diffs - 202304111314.0.0 → 202304281233.0.0 - Mend

@biggive/components 202304111314.0.0 → 202304281233.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (80) hide show

package/dist/components/biggive-carousel2.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-const biggiveCarouselCss = "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-6:hover,.text-colour-brand-6{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}:host{display:contents}.container{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;position:relative}.container .items{overflow:hidden}.container .items .sleeve{display:flex;flex-flow:row wrap;min-width:100%}.container .navigation{padding:10px 0;text-align:right;display:flex;justify-content:end;position:relative;z-index:1}.container .navigation .button{margin-left:15px;display:block;width:30px;height:30px;padding:2.5px 10px;box-sizing:border-box;background-color:#FFFFFF;box-shadow:0px 0px 10px 0px rgba(0, 0, 0, 0.25);border-radius:50%;cursor:pointer;text-align:center}.container .navigation .button.prev{left:0}.container .navigation .button.next{right:0}.container .navigation .button svg{width:10px;height:10px}.container ::slotted(.hidden){display:none}.column-count-5 ::slotted(*){width:calc(20% - 24px);display:flex;flex-direction:column}.column-count-4 ::slotted(*){width:calc(25% - 22.5px);display:flex;flex-direction:column}.column-count-3 ::slotted(*){width:calc(33.3333333333% - 20px);display:flex;flex-direction:column}.column-count-2 ::slotted(*){width:calc(50% - 15px);display:flex;flex-direction:column}@media screen and (max-width: 768px){.column-count-2 ::slotted(*),.column-count-3 ::slotted(*),.column-count-4 ::slotted(*),.column-count-5 ::slotted(*){width:calc(50% - 15px)}}@media screen and (max-width: 576px){.column-count-2 ::slotted(*),.column-count-3 ::slotted(*),.column-count-4 ::slotted(*),.column-count-5 ::slotted(*){width:100%}}";
+const biggiveCarouselCss = "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-6:hover,.text-colour-brand-6{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}:host{display:contents}.container{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;position:relative}.container .items{overflow:hidden}.container .items .sleeve{display:flex;flex-flow:row wrap;min-width:100%;overflow:hidden}.container .navigation{padding:10px 0;text-align:right;display:flex;justify-content:end;position:relative;z-index:1}.container .navigation .button{margin-left:15px;display:block;width:30px;height:30px;padding:2.5px 10px;box-sizing:border-box;background-color:#FFFFFF;box-shadow:0px 0px 10px 0px rgba(0, 0, 0, 0.25);border-radius:50%;cursor:pointer;text-align:center}.container .navigation .button svg{width:15px;height:15px;position:relative;top:2.5px}.container .navigation .button.prev{left:0}.container .navigation .button.prev svg{left:-3px}.container .navigation .button.next{right:0}.container .navigation .button.next svg{left:-1px}.container ::slotted(.hidden){display:none}.column-count-5 ::slotted(*){width:calc(20% - 24px);display:flex;flex-direction:column}.column-count-4 ::slotted(*){width:calc(25% - 22.5px);display:flex;flex-direction:column}.column-count-3 ::slotted(*){width:calc(33.3333333333% - 20px);display:flex;flex-direction:column}.column-count-2 ::slotted(*){width:calc(50% - 15px);display:flex;flex-direction:column}@media screen and (max-width: 768px){.column-count-2 ::slotted(*),.column-count-3 ::slotted(*),.column-count-4 ::slotted(*),.column-count-5 ::slotted(*){width:calc(50% - 15px)}}@media screen and (max-width: 576px){.column-count-2 ::slotted(*),.column-count-3 ::slotted(*),.column-count-4 ::slotted(*),.column-count-5 ::slotted(*){width:100%}}";
 const BiggiveCarousel = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -11,14 +11,19 @@ const BiggiveCarousel = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     this.itemCount = 0;
     this.itemWidthPx = 0;
     this.columnGapPx = 0;
+    this.versions = undefined;
     this.spaceBelow = 4;
     this.columnCount = 3;
     this.buttonBackgroundColour = 'white';
     this.buttonIconColour = 'primary';
   }
   componentDidRender() {
-    var _a, _b;
+    var _a;
     this.sleeve = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.sleeve');
+    this.resizeToFitContent();
+  }
+  async resizeToFitContent() {
+    var _a;
     let children = new Array();
     Array.from(this.host.children).forEach(item => {
       if (!item.classList.contains('hidden')) {
@@ -28,8 +33,10 @@ const BiggiveCarousel = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     this.itemCount = children.length;
     if (children.length > 0) {
       this.columnGapPx = 30;
-      this.itemWidthPx = (((_b = this.sleeve.parentElement) === null || _b === void 0 ? void 0 : _b.offsetWidth) - (this.columnCount - 1) * this.columnGapPx) / this.columnCount;
+      this.itemWidthPx = (((_a = this.sleeve.parentElement) === null || _a === void 0 ? void 0 : _a.offsetWidth) - (this.columnCount - 1) * this.columnGapPx) / this.columnCount;
       this.sleeve.style.width = (this.itemWidthPx + this.columnGapPx) * children.length + 'px';
+      this.sleeve.style.height = this.sleeve.style.height;
+      this.sleeve.style.transform = 'translate3d(0px, 0, 0)';
       children.forEach(el => {
         el.style.width = this.itemWidthPx + 'px';
         el.style.marginRight = this.columnGapPx + 'px';
@@ -65,7 +72,7 @@ const BiggiveCarousel = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
         ' button-background-colour-' +
         this.buttonBackgroundColour +
         ' button-icon-colour-' +
-        this.buttonIconColour }, h("div", { class: "items" }, h("div", { class: "sleeve" }, h("slot", null))), h("div", { class: "navigation" }, h("div", { class: "button prev", onClick: () => this.clickPrevHandler(), title: "Previous" }, h("svg", { width: "9", height: "16", viewBox: "0 0 9 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M8.29311 14.5703L1.73926 8.01646L8.29311 1.46261", stroke: "#000000", "stroke-width": "2" }))), h("div", { class: "button next", onClick: () => this.clickNextHandler(), title: "Next" }, h("svg", { width: "9", height: "16", viewBox: "0 0 9 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M0.739117 1.46094L7.29297 8.01479L0.739118 14.5686", stroke: "#000000", "stroke-width": "2" }))))));
+        this.buttonIconColour }, h("div", { class: "items" }, h("div", { class: "sleeve" }, h("slot", null))), h("div", { class: "navigation" }, h("div", { class: "button prev", onClick: this.clickPrevHandler, title: "Previous" }, h("svg", { width: "9", height: "16", viewBox: "0 0 9 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M8.29311 14.5703L1.73926 8.01646L8.29311 1.46261", stroke: "#000000", "stroke-width": "2" }))), h("div", { class: "button next", onClick: this.clickNextHandler, title: "Next" }, h("svg", { width: "9", height: "16", viewBox: "0 0 9 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M0.739117 1.46094L7.29297 8.01479L0.739118 14.5686", stroke: "#000000", "stroke-width": "2" }))))));
   }
   get host() { return this; }
   static get style() { return biggiveCarouselCss; }
@@ -73,7 +80,9 @@ const BiggiveCarousel = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     "spaceBelow": [2, "space-below"],
     "columnCount": [2, "column-count"],
     "buttonBackgroundColour": [1, "button-background-colour"],
-    "buttonIconColour": [1, "button-icon-colour"]
+    "buttonIconColour": [1, "button-icon-colour"],
+    "versions": [32],
+    "resizeToFitContent": [64]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {

package/dist/components/biggive-filtered-carousel.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { d as defineCustomElement$2 } from './biggive-carousel2.js';
-const biggiveFilteredCarouselCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}:host{display:block}.filters{margin-bottom:15px}.filters .button{cursor:pointer;border-radius:20px;padding:5px 20px;margin-right:15px;font-size:13px;line-height:17px;background-color:#FF7272;color:#000000;border-color:#FF7272}.filters .button.active{background-color:#000000;border-color:#000000;color:#FFFFFF}";
+const biggiveFilteredCarouselCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}:host{display:block}.filters{margin-bottom:15px}.filters .button{cursor:pointer;border-radius:20px;padding:5px 20px;margin-right:15px;font-size:13px;line-height:17px;background-color:#FF7272;color:#000000;border-color:#FF7272}.filters .button.active{background-color:#000000;border-color:#000000;color:#FFFFFF}.filters .clear{padding:5px;height:26px;width:26px;text-align:center}.filters .clear svg{top:3px;left:0.5px;position:relative;height:16px;width:16px;transform:rotate(45deg)}";
 const BiggiveFilteredCarousel$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -37,6 +37,7 @@ const BiggiveFilteredCarousel$1 = /*@__PURE__*/ proxyCustomElement(class extends
       var button = document.createElement('span');
       button.innerHTML = filter;
       button.classList.add('button');
+      button.classList.add('apply');
       button.setAttribute('data-filter', filter);
       button.addEventListener('click', e => {
         var _a;
@@ -56,12 +57,32 @@ const BiggiveFilteredCarousel$1 = /*@__PURE__*/ proxyCustomElement(class extends
             item.classList.add('hidden');
           }
         });
-        carousel.setAttribute('space-below', '0');
-        carousel.setAttribute('space-below', '1');
+        carousel.resizeToFitContent();
       });
       filterWrap.appendChild(button);
     });
-    carousel.setAttribute('space-below', '0');
+    var clear = document.createElement('span');
+    clear.innerHTML =
+      '<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-color="1" stroke="#000000" d="M11 11v-11h1v11h11v1h-11v11h-1v-11h-11v-1h11z" /></svg>';
+    clear.classList.add('button');
+    clear.classList.add('clear');
+    clear.addEventListener('click', () => {
+      filterWrap.querySelectorAll('.apply').forEach(button => {
+        button.classList.remove('active');
+      });
+      this.children.forEach(item => {
+        item.classList.remove('hidden');
+      });
+      carousel.resizeToFitContent();
+    });
+    filterWrap.appendChild(clear);
+    /*
+    Check added to confirm that carousel variable is set with a valid carousel. Ommiting this check fails the npm test - although works fine at runtime in browser.
+    @todo Pass a null fn in the test so it passes without this workaround?
+    */
+    if (typeof carousel.resizeToFitContent === 'function') {
+      carousel.resizeToFitContent();
+    }
   }
   render() {
     return (h("div", { class: 'container space-below-' + this.spaceBelow }, h("div", { class: "filters" }), h("biggive-carousel", { "space-below": "1", "column-count": this.columnCount, "button-background-colour": this.buttonBackgroundColour, "button-icon-colour": this.buttonIconColour })));

package/dist/components/biggive-form-field-select2.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-const biggiveFormFieldSelectCss = "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}.dropdown{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;position:relative;text-align:left}.dropdown .sleeve{font-size:17px;line-height:24px;padding:1px;position:relative;background-color:#2C089B;clip-path:polygon(0% 0%, 0% 0%, calc(100% - 15px) 0%, 100% 15px, 100% 100%, 100% 100%, 0 100%, 0 100%)}.dropdown .sleeve span.placeholder{background-color:#FFFFFF;color:#2C089B;display:block;position:relative;padding:10px 80px 10px 10px;cursor:pointer;clip-path:polygon(0% 0%, 0% 0%, calc(100% - 14px) 0%, 100% 14px, 100% 100%, 100% 100%, 0 100%, 0 100%)}.dropdown .sleeve span.placeholder:after{content:\"\";display:block;position:absolute;right:20px;top:18px;width:10px;height:10px;background-image:url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI3IiB2aWV3Qm94PSIwIDAgOSA3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNS4yMzcxNiA2LjYyNDkzQzQuOTAzMjMgNy4xMjUwMiA0LjA5NyA3LjEyNTAyIDMuNzYzMDggNi42MjQ5M0wwLjEyMzg2OCAxLjE3MDYzQy0wLjIxOTk0IDAuNjU1NDU5IDAuMTkyNjMgMS44MzcxZS0wNyAwLjg2MDkwOCAyLjQyMTMyZS0wN0w4LjEzOTMzIDguNzg0MzJlLTA3QzguODA3MTggOS4zNjgxN2UtMDcgOS4yMTk3NSAwLjY1NTQ1OSA4Ljg3NjM3IDEuMTcwNjNMNS4yMzcxNiA2LjYyNDkzWiIgZmlsbD0iIzJDMDg5QiIvPgo8L3N2Zz4K\");background-size:contain;background-repeat:no-repeat;background-position:center center}.dropdown .options{max-height:200px;overflow-x:hidden;overflow-y:scroll;background-color:#FFFFFF;position:absolute;display:none;z-index:1;left:0;right:0;border-left:1px solid #2C089B;border-right:1px solid #2C089B;border-bottom:1px solid #2C089B}.dropdown.active .options{display:block}";
+const biggiveFormFieldSelectCss = "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}.dropdown{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;position:relative;text-align:left}.dropdown.select-style-bordered .sleeve{font-size:17px;line-height:24px;padding:1px;position:relative;background-color:#2C089B;clip-path:polygon(0% 0%, 0% 0%, calc(100% - 15px) 0%, 100% 15px, 100% 100%, 100% 100%, 0 100%, 0 100%)}.dropdown.select-style-bordered .sleeve span.placeholder{background-color:#FFFFFF;color:#2C089B;display:block;position:relative;padding:10px 80px 10px 10px;cursor:pointer;clip-path:polygon(0% 0%, 0% 0%, calc(100% - 14px) 0%, 100% 14px, 100% 100%, 100% 100%, 0 100%, 0 100%)}.dropdown.select-style-bordered .sleeve span.placeholder:after{content:\"\";display:block;position:absolute;right:20px;top:18px;width:10px;height:10px;background-image:url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI3IiB2aWV3Qm94PSIwIDAgOSA3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNS4yMzcxNiA2LjYyNDkzQzQuOTAzMjMgNy4xMjUwMiA0LjA5NyA3LjEyNTAyIDMuNzYzMDggNi42MjQ5M0wwLjEyMzg2OCAxLjE3MDYzQy0wLjIxOTk0IDAuNjU1NDU5IDAuMTkyNjMgMS44MzcxZS0wNyAwLjg2MDkwOCAyLjQyMTMyZS0wN0w4LjEzOTMzIDguNzg0MzJlLTA3QzguODA3MTggOS4zNjgxN2UtMDcgOS4yMTk3NSAwLjY1NTQ1OSA4Ljg3NjM3IDEuMTcwNjNMNS4yMzcxNiA2LjYyNDkzWiIgZmlsbD0iIzJDMDg5QiIvPgo8L3N2Zz4K\");background-size:contain;background-repeat:no-repeat;background-position:center center}.dropdown.select-style-underlined .sleeve{font-size:17px;line-height:24px;padding:1px;position:relative;border-bottom:1px solid #2C089B}.dropdown.select-style-underlined .sleeve span.placeholder{background-color:#FFFFFF;color:#2C089B;display:block;position:relative;padding:10px 80px 10px 10px;cursor:pointer}.dropdown.select-style-underlined .sleeve span.placeholder:after{content:\"\";display:block;position:absolute;right:20px;top:18px;width:10px;height:10px;background-image:url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI3IiB2aWV3Qm94PSIwIDAgOSA3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNS4yMzcxNiA2LjYyNDkzQzQuOTAzMjMgNy4xMjUwMiA0LjA5NyA3LjEyNTAyIDMuNzYzMDggNi42MjQ5M0wwLjEyMzg2OCAxLjE3MDYzQy0wLjIxOTk0IDAuNjU1NDU5IDAuMTkyNjMgMS44MzcxZS0wNyAwLjg2MDkwOCAyLjQyMTMyZS0wN0w4LjEzOTMzIDguNzg0MzJlLTA3QzguODA3MTggOS4zNjgxN2UtMDcgOS4yMTk3NSAwLjY1NTQ1OSA4Ljg3NjM3IDEuMTcwNjNMNS4yMzcxNiA2LjYyNDkzWiIgZmlsbD0iIzJDMDg5QiIvPgo8L3N2Zz4K\");background-size:contain;background-repeat:no-repeat;background-position:center center}.dropdown .options{max-height:200px;overflow-x:hidden;overflow-y:scroll;background-color:#FFFFFF;position:absolute;display:none;z-index:1;left:0;right:0;border-left:1px solid #2C089B;border-right:1px solid #2C089B;border-bottom:1px solid #2C089B}.dropdown.active .options{display:block}";
 const BiggiveFormFieldSelect = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -10,6 +10,7 @@ const BiggiveFormFieldSelect = /*@__PURE__*/ proxyCustomElement(class extends HT
     this.doSelectChange = createEvent(this, "doSelectChange", 7);
     this.selectedValue = undefined;
     this.selectedLabel = undefined;
+    this.selectStyle = 'bordered';
     this.spaceBelow = 0;
     this.placeholder = undefined;
   }
@@ -38,13 +39,14 @@ const BiggiveFormFieldSelect = /*@__PURE__*/ proxyCustomElement(class extends HT
     }
   }
   render() {
-    return (h("div", { class: 'dropdown space-below-' + this.spaceBelow }, h("div", { class: "sleeve", onClick: this.toggleFocus, onMouseLeave: this.toggleFocus }, h("span", { class: "placeholder" }, this.selectedLabel === null || this.selectedLabel === undefined ? this.placeholder : this.selectedLabel)), h("div", { class: "options" }, h("slot", null))));
+    return (h("div", { class: 'dropdown space-below-' + this.spaceBelow + ' select-style-' + this.selectStyle }, h("div", { class: "sleeve", onClick: this.toggleFocus, onMouseLeave: this.toggleFocus }, h("span", { class: "placeholder" }, this.selectedLabel === null || this.selectedLabel === undefined ? this.placeholder : this.selectedLabel)), h("div", { class: "options" }, h("slot", null))));
   }
   get el() { return this; }
   static get style() { return biggiveFormFieldSelectCss; }
 }, [1, "biggive-form-field-select", {
     "selectedValue": [1, "selected-value"],
     "selectedLabel": [1, "selected-label"],
+    "selectStyle": [1, "select-style"],
     "spaceBelow": [2, "space-below"],
     "placeholder": [1]
   }, [[0, "doOptionSelect", "doOptionSelectCompletedHandler"]]]);

package/dist/components/biggive-generic-icon2.js CHANGED Viewed

@@ -13,26 +13,27 @@ const BiggiveGenericIcon = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
     this.icon = undefined;
     this.url = undefined;
   }
-  getIcon() {
-    let icon;
+  getIconDefinition() {
+    let iconDefinition;
     if (this.iconGroup == 'beneficiary') {
-      icon = FontAwesomeIconsService.getBeneficiaryIcon(this.icon);
+      iconDefinition = FontAwesomeIconsService.getBeneficiaryIcon(this.icon);
     }
     else if (this.iconGroup == 'misc') {
-      icon = FontAwesomeIconsService.getMiscIcon(this.icon);
+      iconDefinition = FontAwesomeIconsService.getMiscIcon(this.icon);
     }
     else if (this.iconGroup == 'social') {
-      icon = FontAwesomeIconsService.getSocialIcon(this.icon);
+      iconDefinition = FontAwesomeIconsService.getSocialIcon(this.icon);
     }
     else if (this.iconGroup == 'category') {
-      icon = FontAwesomeIconsService.getCategoryIcon(this.icon);
+      iconDefinition = FontAwesomeIconsService.getCategoryIcon(this.icon);
     }
-    return icon;
+    return iconDefinition;
   }
   render() {
+    const iconDefinition = this.getIconDefinition();
     return (
     // Note: the icon name prop is set as a css class too for any styling specific to certain icons
-    h("div", { class: 'generic-icon-item background-colour-' + this.backgroundColour + ' ' + this.icon }, h("a", { href: this.url }, this.getIcon() ? (h("svg", { width: this.getIcon().icon[0], height: this.getIcon().icon[1], xmlns: "http://www.w3.org/2000/svg", class: 'fill-' + this.iconColour, viewBox: '0 0 ' + this.getIcon().icon[0] + ' ' + this.getIcon().icon[1] }, h("path", { d: this.getIcon().icon[4].toString() }))) : null)));
+    h("div", { class: 'generic-icon-item background-colour-' + this.backgroundColour + ' ' + this.icon }, h("a", { href: this.url }, iconDefinition ? (h("svg", { width: iconDefinition.icon[0], height: iconDefinition.icon[1], xmlns: "http://www.w3.org/2000/svg", class: 'fill-' + this.iconColour, viewBox: '0 0 ' + iconDefinition.icon[0] + ' ' + iconDefinition.icon[1] }, h("path", { d: iconDefinition.icon[4].toString() }))) : null)));
   }
   static get style() { return biggiveGenericIconCss; }
 }, [0, "biggive-generic-icon", {

package/dist/components/biggive-grid.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-const biggiveGridCss = "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}.grid{margin-bottom:15px;display:flex;flex-flow:row wrap}.space-between{justify-content:space-between}.grid ::slotted([slot=grid-item]){display:block}.column-count-2 ::slotted(*){width:50%;display:flex;flex-direction:column}.column-count-3 ::slotted(*){width:33.3333333333%;display:flex;flex-direction:column}.column-count-4 ::slotted(*){width:25%;display:flex;flex-direction:column}.column-count-5 ::slotted(*){width:20%;display:flex;flex-direction:column}.column-count-6 ::slotted(*){width:16.6666666667%;display:flex;flex-direction:column}.column-gap-1{justify-content:space-between}.column-gap-2{justify-content:space-between}.column-gap-3{justify-content:space-between}.column-gap-4{justify-content:space-between}.column-gap-5{justify-content:space-between}.column-gap-6{justify-content:space-between}.column-count-2.column-gap-1 ::slotted(*){width:calc(50% - 2.5px)}.column-count-2.column-gap-2 ::slotted(*){width:calc(50% - 5px)}.column-count-2.column-gap-3 ::slotted(*){width:calc(50% - 7.5px)}.column-count-2.column-gap-4 ::slotted(*){width:calc(50% - 15px)}.column-count-2.column-gap-5 ::slotted(*){width:calc(50% - 22.5px)}.column-count-2.column-gap-6 ::slotted(*){width:calc(50% - 30px)}.column-count-3.column-gap-1 ::slotted(*){width:calc(33.3333333333% - 3.3333333333px)}.column-count-3.column-gap-2 ::slotted(*){width:calc(33.3333333333% - 6.6666666667px)}.column-count-3.column-gap-3 ::slotted(*){width:calc(33.3333333333% - 10px)}.column-count-3.column-gap-4 ::slotted(*){width:calc(33.3333333333% - 20px)}.column-count-3.column-gap-5 ::slotted(*){width:calc(33.3333333333% - 30px)}.column-count-3.column-gap-6 ::slotted(*){width:calc(33.3333333333% - 40px)}.column-count-4.column-gap-1 ::slotted(*){width:calc(25% - 3.75px)}.column-count-4.column-gap-2 ::slotted(*){width:calc(25% - 7.5px)}.column-count-4.column-gap-3 ::slotted(*){width:calc(25% - 11.25px)}.column-count-4.column-gap-4 ::slotted(*){width:calc(25% - 22.5px)}.column-count-4.column-gap-5 ::slotted(*){width:calc(25% - 33.75px)}.column-count-4.column-gap-6 ::slotted(*){width:calc(25% - 45px)}.column-count-5.column-gap-1 ::slotted(*){width:calc(20% - 4px)}.column-count-5.column-gap-2 ::slotted(*){width:calc(20% - 8px)}.column-count-5.column-gap-3 ::slotted(*){width:calc(20% - 12px)}.column-count-5.column-gap-4 ::slotted(*){width:calc(20% - 24px)}.column-count-5.column-gap-5 ::slotted(*){width:calc(20% - 36px)}.column-count-5.column-gap-6 ::slotted(*){width:calc(20% - 48px)}.column-count-6.column-gap-1 ::slotted(*){width:calc(16.6666666667% - 4.1666666667px)}.column-count-6.column-gap-2 ::slotted(*){width:calc(16.6666666667% - 8.3333333333px)}.column-count-6.column-gap-3 ::slotted(*){width:calc(16.6666666667% - 12.5px)}.column-count-6.column-gap-4 ::slotted(*){width:calc(16.6666666667% - 25px)}.column-count-6.column-gap-5 ::slotted(*){width:calc(16.6666666667% - 37.5px)}.column-count-6.column-gap-6 ::slotted(*){width:calc(16.6666666667% - 50px)}@media screen and (max-width: 768px){.column-count-2 ::slotted(*),.column-count-3 ::slotted(*),.column-count-4 ::slotted(*),.column-count-5 ::slotted(*),.column-count-6 ::slotted(*){width:calc(50% - 15px)}}@media screen and (max-width: 576px){.column-count-2 ::slotted(*),.column-count-3 ::slotted(*),.column-count-4 ::slotted(*),.column-count-5 ::slotted(*),.column-count-6 ::slotted(*){width:100%}}";
+const biggiveGridCss = "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}.grid{margin-bottom:15px;display:flex;flex-flow:row wrap}.space-between{justify-content:space-between}.grid ::slotted([slot=grid-item]){display:block}.column-count-2 ::slotted(*){width:50%;display:flex;flex-direction:column}.column-count-3 ::slotted(*){width:33.3333333333%;display:flex;flex-direction:column}.column-count-4 ::slotted(*){width:25%;display:flex;flex-direction:column}.column-count-5 ::slotted(*){width:20%;display:flex;flex-direction:column}.column-count-6 ::slotted(*){width:16.6666666667%;display:flex;flex-direction:column}.column-gap-1{justify-content:space-between}.column-gap-2{justify-content:space-between}.column-gap-3{justify-content:space-between}.column-gap-4{justify-content:space-between}.column-gap-5{justify-content:space-between}.column-gap-6{justify-content:space-between}.column-count-2.column-gap-1 ::slotted(*){width:calc(50% - 2.5px)}.column-count-2.column-gap-2 ::slotted(*){width:calc(50% - 5px)}.column-count-2.column-gap-3 ::slotted(*){width:calc(50% - 7.5px)}.column-count-2.column-gap-4 ::slotted(*){width:calc(50% - 15px)}.column-count-2.column-gap-5 ::slotted(*){width:calc(50% - 22.5px)}.column-count-2.column-gap-6 ::slotted(*){width:calc(50% - 30px)}.column-count-3.column-gap-1 ::slotted(*){width:calc(33.3333333333% - 3.3333333333px)}.column-count-3.column-gap-2 ::slotted(*){width:calc(33.3333333333% - 6.6666666667px)}.column-count-3.column-gap-3 ::slotted(*){width:calc(33.3333333333% - 10px)}.column-count-3.column-gap-4 ::slotted(*){width:calc(33.3333333333% - 20px)}.column-count-3.column-gap-5 ::slotted(*){width:calc(33.3333333333% - 30px)}.column-count-3.column-gap-6 ::slotted(*){width:calc(33.3333333333% - 40px)}.column-count-4.column-gap-1 ::slotted(*){width:calc(25% - 3.75px)}.column-count-4.column-gap-2 ::slotted(*){width:calc(25% - 7.5px)}.column-count-4.column-gap-3 ::slotted(*){width:calc(25% - 11.25px)}.column-count-4.column-gap-4 ::slotted(*){width:calc(25% - 22.5px)}.column-count-4.column-gap-5 ::slotted(*){width:calc(25% - 33.75px)}.column-count-4.column-gap-6 ::slotted(*){width:calc(25% - 45px)}.column-count-5.column-gap-1 ::slotted(*){width:calc(20% - 4px)}.column-count-5.column-gap-2 ::slotted(*){width:calc(20% - 8px)}.column-count-5.column-gap-3 ::slotted(*){width:calc(20% - 12px)}.column-count-5.column-gap-4 ::slotted(*){width:calc(20% - 24px)}.column-count-5.column-gap-5 ::slotted(*){width:calc(20% - 36px)}.column-count-5.column-gap-6 ::slotted(*){width:calc(20% - 48px)}.column-count-6.column-gap-1 ::slotted(*){width:calc(16.6666666667% - 4.1666666667px)}.column-count-6.column-gap-2 ::slotted(*){width:calc(16.6666666667% - 8.3333333333px)}.column-count-6.column-gap-3 ::slotted(*){width:calc(16.6666666667% - 12.5px)}.column-count-6.column-gap-4 ::slotted(*){width:calc(16.6666666667% - 25px)}.column-count-6.column-gap-5 ::slotted(*){width:calc(16.6666666667% - 37.5px)}.column-count-6.column-gap-6 ::slotted(*){width:calc(16.6666666667% - 50px)}.column-count-3.column-gap-1:after{content:\"\";display:flex;flex-direction:column;width:calc(33.3333333333% - 3.3333333333px)}.column-count-3.column-gap-2:after{content:\"\";display:flex;flex-direction:column;width:calc(33.3333333333% - 6.6666666667px)}.column-count-3.column-gap-3:after{content:\"\";display:flex;flex-direction:column;width:calc(33.3333333333% - 10px)}.column-count-3.column-gap-4:after{content:\"\";display:flex;flex-direction:column;width:calc(33.3333333333% - 20px)}.column-count-3.column-gap-5:after{content:\"\";display:flex;flex-direction:column;width:calc(33.3333333333% - 30px)}.column-count-3.column-gap-6:after{content:\"\";display:flex;flex-direction:column;width:calc(33.3333333333% - 40px)}@media screen and (max-width: 768px){.column-count-2 ::slotted(*),.column-count-3 ::slotted(*),.column-count-4 ::slotted(*),.column-count-5 ::slotted(*),.column-count-6 ::slotted(*){width:calc(50% - 15px)}}@media screen and (max-width: 576px){.column-count-2 ::slotted(*),.column-count-3 ::slotted(*),.column-count-4 ::slotted(*),.column-count-5 ::slotted(*),.column-count-6 ::slotted(*){width:100%}}";
 const BiggiveGrid$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/biggive-sheet.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-const biggiveSheetCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.background-colour-hover-primary:hover,.background-colour-primary{background-color:#2C089B}.background-colour-hover-secondary:hover,.background-colour-secondary{background-color:#2AF135}.background-colour-hover-tertiary:hover,.background-colour-tertiary{background-color:#FF7272}.background-colour-hover-brand-1:hover,.background-colour-brand-1{background-color:#B30510}.background-colour-hover-brand-2:hover,.background-colour-brand-2{background-color:#6E0887}.background-colour-hover-brand-3:hover,.background-colour-brand-3{background-color:#50B400}.background-colour-hover-brand-4:hover,.background-colour-brand-4{background-color:#FFE500}.background-colour-hover-brand-5:hover,.background-colour-brand-5{background-color:#F07D00}.background-colour-hover-brand-6:hover,.background-colour-brand-6{background-color:#62CFC9}.background-colour-hover-white:hover,.background-colour-white{background-color:#FFFFFF}.background-colour-hover-black:hover,.background-colour-black{background-color:#000000}.background-colour-hover-white:hover,.background-colour-white{background-color:#FFFFFF}.background-colour-hover-grey-extra-light:hover,.background-colour-grey-extra-light{background-color:#D7D7D7}.background-colour-hover-grey-light:hover,.background-colour-grey-light{background-color:#E8E8E8}.background-colour-hover-grey-medium:hover,.background-colour-grey-medium{background-color:#8A8A8A}.background-colour-hover-grey-dark:hover,.background-colour-grey-dark{background-color:#4A4A4A}.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-6:hover,.text-colour-brand-6{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}.fill-primary{fill:#2C089B}.fill-secondary{fill:#2AF135}.fill-tertiary{fill:#FF7272}.fill-brand-1{fill:#B30510}.fill-brand-2{fill:#6E0887}.fill-brand-3{fill:#50B400}.fill-brand-4{fill:#FFE500}.fill-brand-5{fill:#F07D00}.fill-brand-6{fill:#CBC8C8}.fill-brand-mhf-turquoise{fill:#62CFC9}.fill-white{fill:#FFFFFF}.fill-black{fill:#000000}.fill-grey-extra-light{fill:#D7D7D7}.fill-grey-light{fill:#E8E8E8}.fill-grey-medium{fill:#8A8A8A}.fill-grey-dark{fill:#4A4A4A}.fill-red{fill:red}:host{display:contents;font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px}.container.active .popup{transform:translateX(0)}.container.active .background{position:fixed;left:0;top:0;right:0;bottom:0;background-color:rgba(0, 0, 0, 0.6);z-index:99}.container .popup{position:fixed;transition:transform 1s ease-in-out;transform:translateX(100%);z-index:999;top:0;bottom:0;right:0;width:66%}.container .popup .header{padding:45px;display:flex;justify-content:space-between}.container .popup .header .back-link{cursor:pointer;display:flex;font-size:14px}.container .popup .header .back-link .svg-wrap{display:flex;margin:5px 15px auto 0}.container .popup .header .back-link .svg-wrap.colour-primary svg path{fill:#2C089B}.container .popup .header .back-link .svg-wrap.colour-secondary svg path{fill:#2AF135}.container .popup .header .back-link .svg-wrap.colour-tertiary svg path{fill:#FF7272}.container .popup .header .back-link .svg-wrap.colour-brand-1 svg path{fill:#B30510}.container .popup .header .back-link .svg-wrap.colour-brand-2 svg path{fill:#6E0887}.container .popup .header .back-link .svg-wrap.colour-brand-3 svg path{fill:#50B400}.container .popup .header .back-link .svg-wrap.colour-brand-4 svg path{fill:#FFE500}.container .popup .header .back-link .svg-wrap.colour-brand-5 svg path{fill:#F07D00}.container .popup .header .back-link .svg-wrap.colour-brand-6 svg path{fill:#62CFC9}.container .popup .header .back-link .svg-wrap.colour-white svg path{fill:#FFFFFF}.container .popup .header .back-link .svg-wrap.colour-black svg path{fill:#000000}.container .popup .header .back-link .svg-wrap.colour-grey-extra-light svg path{fill:#D7D7D7}.container .popup .header .back-link .svg-wrap.colour-grey-light svg path{fill:#E8E8E8}.container .popup .header .back-link .svg-wrap.colour-grey-medium svg path{fill:#8A8A8A}.container .popup .header .back-link .svg-wrap.colour-grey-dark svg path{fill:#4A4A4A}.container .popup .header .back-link .svg-wrap svg{height:14px;width:auto}.container .popup .header .close-link{margin-bottom:auto;cursor:pointer}.container .popup .header .close-link .svg-wrap{display:block;width:30px;height:30px;background-color:#FFFFFF;border-radius:50%;text-align:center;padding:6.5px;box-sizing:border-box}.container .popup .header .close-link .svg-wrap svg{height:15px;width:15px;transform:rotate(45deg)}.container .popup .content{padding:0 45px 90px 90px;margin-right:45px;max-height:calc(100vh - 200px);overflow-y:scroll;box-sizing:border-box}@media screen and (max-width: 768px){.container .header{padding:15px}.container .content{padding:0 15px 30px 30px;margin-right:15px;max-height:calc(100vh - 90px)}.container .popup{width:100%}}@media screen and (max-width: 576px){.container .header{padding:15px}.container .content{padding:0 15px 30px 30px;margin-right:15px;max-height:calc(100vh - 90px)}.container .popup{width:100%}}";
+const biggiveSheetCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.background-colour-hover-primary:hover,.background-colour-primary{background-color:#2C089B}.background-colour-hover-secondary:hover,.background-colour-secondary{background-color:#2AF135}.background-colour-hover-tertiary:hover,.background-colour-tertiary{background-color:#FF7272}.background-colour-hover-brand-1:hover,.background-colour-brand-1{background-color:#B30510}.background-colour-hover-brand-2:hover,.background-colour-brand-2{background-color:#6E0887}.background-colour-hover-brand-3:hover,.background-colour-brand-3{background-color:#50B400}.background-colour-hover-brand-4:hover,.background-colour-brand-4{background-color:#FFE500}.background-colour-hover-brand-5:hover,.background-colour-brand-5{background-color:#F07D00}.background-colour-hover-brand-6:hover,.background-colour-brand-6{background-color:#62CFC9}.background-colour-hover-white:hover,.background-colour-white{background-color:#FFFFFF}.background-colour-hover-black:hover,.background-colour-black{background-color:#000000}.background-colour-hover-white:hover,.background-colour-white{background-color:#FFFFFF}.background-colour-hover-grey-extra-light:hover,.background-colour-grey-extra-light{background-color:#D7D7D7}.background-colour-hover-grey-light:hover,.background-colour-grey-light{background-color:#E8E8E8}.background-colour-hover-grey-medium:hover,.background-colour-grey-medium{background-color:#8A8A8A}.background-colour-hover-grey-dark:hover,.background-colour-grey-dark{background-color:#4A4A4A}.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-6:hover,.text-colour-brand-6{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}.fill-primary{fill:#2C089B}.fill-secondary{fill:#2AF135}.fill-tertiary{fill:#FF7272}.fill-brand-1{fill:#B30510}.fill-brand-2{fill:#6E0887}.fill-brand-3{fill:#50B400}.fill-brand-4{fill:#FFE500}.fill-brand-5{fill:#F07D00}.fill-brand-6{fill:#CBC8C8}.fill-brand-mhf-turquoise{fill:#62CFC9}.fill-white{fill:#FFFFFF}.fill-black{fill:#000000}.fill-grey-extra-light{fill:#D7D7D7}.fill-grey-light{fill:#E8E8E8}.fill-grey-medium{fill:#8A8A8A}.fill-grey-dark{fill:#4A4A4A}.fill-red{fill:red}:host{display:contents;font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px}.container.active .popup{transform:translateX(0)}.container.active .background{position:fixed;left:0;top:0;right:0;bottom:0;background-color:rgba(0, 0, 0, 0.6);z-index:99}.container .popup{position:fixed;transition:transform 1s ease-in-out;transform:translateX(100%);z-index:999;top:0;bottom:0;right:0;width:66%}.container .popup .header{padding:45px;display:flex;justify-content:space-between}.container .popup .header .back-link{cursor:pointer;display:flex;font-size:14px}.container .popup .header .back-link .svg-wrap{display:flex;margin:5px 15px auto 0}.container .popup .header .back-link .svg-wrap.colour-primary svg path{fill:#2C089B}.container .popup .header .back-link .svg-wrap.colour-secondary svg path{fill:#2AF135}.container .popup .header .back-link .svg-wrap.colour-tertiary svg path{fill:#FF7272}.container .popup .header .back-link .svg-wrap.colour-brand-1 svg path{fill:#B30510}.container .popup .header .back-link .svg-wrap.colour-brand-2 svg path{fill:#6E0887}.container .popup .header .back-link .svg-wrap.colour-brand-3 svg path{fill:#50B400}.container .popup .header .back-link .svg-wrap.colour-brand-4 svg path{fill:#FFE500}.container .popup .header .back-link .svg-wrap.colour-brand-5 svg path{fill:#F07D00}.container .popup .header .back-link .svg-wrap.colour-brand-6 svg path{fill:#62CFC9}.container .popup .header .back-link .svg-wrap.colour-white svg path{fill:#FFFFFF}.container .popup .header .back-link .svg-wrap.colour-black svg path{fill:#000000}.container .popup .header .back-link .svg-wrap.colour-grey-extra-light svg path{fill:#D7D7D7}.container .popup .header .back-link .svg-wrap.colour-grey-light svg path{fill:#E8E8E8}.container .popup .header .back-link .svg-wrap.colour-grey-medium svg path{fill:#8A8A8A}.container .popup .header .back-link .svg-wrap.colour-grey-dark svg path{fill:#4A4A4A}.container .popup .header .back-link .svg-wrap svg{height:14px;width:auto}.container .popup .header .close-link{margin-bottom:auto;cursor:pointer}.container .popup .header .close-link .svg-wrap{display:block;width:30px;height:30px;background-color:#FFFFFF;border-radius:50%;text-align:center;padding:6.5px;box-sizing:border-box}.container .popup .header .close-link .svg-wrap svg{display:inline-block;top:-1.5px;position:relative;stroke-width:1;stroke:#000000;height:15px;width:15px;transform:rotate(45deg)}.container .popup .content{padding:0 45px 90px 90px;margin-right:45px;max-height:calc(100vh - 200px);overflow-y:scroll;box-sizing:border-box}@media screen and (max-width: 768px){.container .header{padding:15px}.container .content{padding:0 15px 30px 30px;margin-right:15px;max-height:calc(100vh - 90px)}.container .popup{width:100%}}@media screen and (max-width: 576px){.container .header{padding:15px}.container .content{padding:0 15px 30px 30px;margin-right:15px;max-height:calc(100vh - 90px)}.container .popup{width:100%}}";
 const BiggiveSheet$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -31,7 +31,7 @@ const BiggiveSheet$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     history.pushState('', document.title, window.location.pathname);
   }
   render() {
-    return (h("div", { class: 'container' }, h("div", { class: "background" }), h("div", { class: 'popup background-colour-' + this.backgroundColour + ' text-colour-' + this.textColour }, h("div", { class: "header" }, h("div", { class: "back-link", onClick: () => this.closeSheet() }, h("span", { class: 'svg-wrap colour-' + this.textColour }, h("svg", { width: "33", height: "16", viewBox: "0 0 33 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M0.292892 7.29289C-0.0976295 7.68342 -0.0976295 8.31658 0.292892 8.70711L6.65685 15.0711C7.04738 15.4616 7.68054 15.4616 8.07107 15.0711C8.46159 14.6805 8.46159 14.0474 8.07107 13.6569L2.41421 8L8.07107 2.34315C8.46159 1.95262 8.46159 1.31946 8.07107 0.928932C7.68054 0.538408 7.04738 0.538408 6.65685 0.928932L0.292892 7.29289ZM33 7L1 7V9L33 9V7Z", fill: "black" }))), "Back"), h("div", { class: "close-link", onClick: () => this.closeSheet() }, h("span", { class: "svg-wrap" }, h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M11 11v-11h1v11h11v1h-11v11h-1v-11h-11v-1h11z" }))))), h("div", { class: "content" }, h("slot", null)))));
+    return (h("div", { class: 'container' }, h("div", { class: "background" }), h("div", { class: 'popup background-colour-' + this.backgroundColour + ' text-colour-' + this.textColour }, h("div", { class: "header" }, h("div", { class: "back-link", onClick: this.closeSheet }, h("span", { class: 'svg-wrap colour-' + this.textColour }, h("svg", { width: "33", height: "16", viewBox: "0 0 33 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M0.292892 7.29289C-0.0976295 7.68342 -0.0976295 8.31658 0.292892 8.70711L6.65685 15.0711C7.04738 15.4616 7.68054 15.4616 8.07107 15.0711C8.46159 14.6805 8.46159 14.0474 8.07107 13.6569L2.41421 8L8.07107 2.34315C8.46159 1.95262 8.46159 1.31946 8.07107 0.928932C7.68054 0.538408 7.04738 0.538408 6.65685 0.928932L0.292892 7.29289ZM33 7L1 7V9L33 9V7Z", fill: "black" }))), "Back"), h("div", { class: "close-link", onClick: this.closeSheet }, h("span", { class: "svg-wrap" }, h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M11 11v-11h1v11h11v1h-11v11h-1v-11h-11v-1h11z" }))))), h("div", { class: "content" }, h("slot", null)))));
   }
   get host() { return this; }
   static get style() { return biggiveSheetCss; }

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

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-const biggiveTabbedContentCss = "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-6:hover,.text-colour-brand-6{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}:host{display:contents}::slotted(*){display:none}.container{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;position:relative}.container .navigation{padding:0 40px}.container .navigation .button{position:absolute;top:5px;display:block;width:30px;height:30px;padding:2.5px 10px;box-sizing:border-box;background-color:#FFFFFF;box-shadow:0px 0px 10px 0px rgba(0, 0, 0, 0.25);border-radius:50%;cursor:pointer;text-align:center}.container .navigation .button.prev{left:0}.container .navigation .button.next{right:0}.container .navigation .button svg{width:10px;height:10px}.container .navigation .sleeve{border-bottom:1px solid #E8E8E8;overflow:hidden}.container .navigation .sleeve ul{margin:0;padding:0;list-style-type:none;display:flex}.container .navigation .sleeve ul li{flex-grow:1;padding:10px 20px;margin:0;width:calc(33.3% - 20px);border-bottom:3px solid transparent;text-align:center;cursor:pointer}.container .navigation .sleeve ul li.selected{font-weight:bold}.container.text-colour-primary .navigation li{color:#2C089B}.container.navigation-highlight-colour-primary .navigation ul{border-color:#2C089B}.container.selected-text-colour-primary .navigation li.selected{color:#2C089B;border-color:#2C089B}.container.selected-navigation-highlight-colour-primary .navigation li.selected{border-color:#2C089B}.container.button-background-colour-primary .navigation .button{background-color:#2C089B}.container.button-icon-colour-primary .navigation .button svg path{stroke:#2C089B}.container.text-colour-secondary .navigation li{color:#2AF135}.container.navigation-highlight-colour-secondary .navigation ul{border-color:#2AF135}.container.selected-text-colour-secondary .navigation li.selected{color:#2AF135;border-color:#2AF135}.container.selected-navigation-highlight-colour-secondary .navigation li.selected{border-color:#2AF135}.container.button-background-colour-secondary .navigation .button{background-color:#2AF135}.container.button-icon-colour-secondary .navigation .button svg path{stroke:#2AF135}.container.text-colour-tertiary .navigation li{color:#FF7272}.container.navigation-highlight-colour-tertiary .navigation ul{border-color:#FF7272}.container.selected-text-colour-tertiary .navigation li.selected{color:#FF7272;border-color:#FF7272}.container.selected-navigation-highlight-colour-tertiary .navigation li.selected{border-color:#FF7272}.container.button-background-colour-tertiary .navigation .button{background-color:#FF7272}.container.button-icon-colour-tertiary .navigation .button svg path{stroke:#FF7272}.container.text-colour-brand-1 .navigation li{color:#B30510}.container.navigation-highlight-colour-brand-1 .navigation ul{border-color:#B30510}.container.selected-text-colour-brand-1 .navigation li.selected{color:#B30510;border-color:#B30510}.container.selected-navigation-highlight-colour-brand-1 .navigation li.selected{border-color:#B30510}.container.button-background-colour-brand-1 .navigation .button{background-color:#B30510}.container.button-icon-colour-brand-1 .navigation .button svg path{stroke:#B30510}.container.text-colour-brand-2 .navigation li{color:#6E0887}.container.navigation-highlight-colour-brand-2 .navigation ul{border-color:#6E0887}.container.selected-text-colour-brand-2 .navigation li.selected{color:#6E0887;border-color:#6E0887}.container.selected-navigation-highlight-colour-brand-2 .navigation li.selected{border-color:#6E0887}.container.button-background-colour-brand-2 .navigation .button{background-color:#6E0887}.container.button-icon-colour-brand-2 .navigation .button svg path{stroke:#6E0887}.container.text-colour-brand-3 .navigation li{color:#50B400}.container.navigation-highlight-colour-brand-3 .navigation ul{border-color:#50B400}.container.selected-text-colour-brand-3 .navigation li.selected{color:#50B400;border-color:#50B400}.container.selected-navigation-highlight-colour-brand-3 .navigation li.selected{border-color:#50B400}.container.button-background-colour-brand-3 .navigation .button{background-color:#50B400}.container.button-icon-colour-brand-3 .navigation .button svg path{stroke:#50B400}.container.text-colour-brand-4 .navigation li{color:#FFE500}.container.navigation-highlight-colour-brand-4 .navigation ul{border-color:#FFE500}.container.selected-text-colour-brand-4 .navigation li.selected{color:#FFE500;border-color:#FFE500}.container.selected-navigation-highlight-colour-brand-4 .navigation li.selected{border-color:#FFE500}.container.button-background-colour-brand-4 .navigation .button{background-color:#FFE500}.container.button-icon-colour-brand-4 .navigation .button svg path{stroke:#FFE500}.container.text-colour-brand-5 .navigation li{color:#F07D00}.container.navigation-highlight-colour-brand-5 .navigation ul{border-color:#F07D00}.container.selected-text-colour-brand-5 .navigation li.selected{color:#F07D00;border-color:#F07D00}.container.selected-navigation-highlight-colour-brand-5 .navigation li.selected{border-color:#F07D00}.container.button-background-colour-brand-5 .navigation .button{background-color:#F07D00}.container.button-icon-colour-brand-5 .navigation .button svg path{stroke:#F07D00}.container.text-colour-brand-6 .navigation li{color:#62CFC9}.container.navigation-highlight-colour-brand-6 .navigation ul{border-color:#62CFC9}.container.selected-text-colour-brand-6 .navigation li.selected{color:#62CFC9;border-color:#62CFC9}.container.selected-navigation-highlight-colour-brand-6 .navigation li.selected{border-color:#62CFC9}.container.button-background-colour-brand-6 .navigation .button{background-color:#62CFC9}.container.button-icon-colour-brand-6 .navigation .button svg path{stroke:#62CFC9}.container.text-colour-white .navigation li{color:#FFFFFF}.container.navigation-highlight-colour-white .navigation ul{border-color:#FFFFFF}.container.selected-text-colour-white .navigation li.selected{color:#FFFFFF;border-color:#FFFFFF}.container.selected-navigation-highlight-colour-white .navigation li.selected{border-color:#FFFFFF}.container.button-background-colour-white .navigation .button{background-color:#FFFFFF}.container.button-icon-colour-white .navigation .button svg path{stroke:#FFFFFF}.container.text-colour-black .navigation li{color:#000000}.container.navigation-highlight-colour-black .navigation ul{border-color:#000000}.container.selected-text-colour-black .navigation li.selected{color:#000000;border-color:#000000}.container.selected-navigation-highlight-colour-black .navigation li.selected{border-color:#000000}.container.button-background-colour-black .navigation .button{background-color:#000000}.container.button-icon-colour-black .navigation .button svg path{stroke:#000000}.container.text-colour-grey-extra-light .navigation li{color:#D7D7D7}.container.navigation-highlight-colour-grey-extra-light .navigation ul{border-color:#D7D7D7}.container.selected-text-colour-grey-extra-light .navigation li.selected{color:#D7D7D7;border-color:#D7D7D7}.container.selected-navigation-highlight-colour-grey-extra-light .navigation li.selected{border-color:#D7D7D7}.container.button-background-colour-grey-extra-light .navigation .button{background-color:#D7D7D7}.container.button-icon-colour-grey-extra-light .navigation .button svg path{stroke:#D7D7D7}.container.text-colour-grey-light .navigation li{color:#E8E8E8}.container.navigation-highlight-colour-grey-light .navigation ul{border-color:#E8E8E8}.container.selected-text-colour-grey-light .navigation li.selected{color:#E8E8E8;border-color:#E8E8E8}.container.selected-navigation-highlight-colour-grey-light .navigation li.selected{border-color:#E8E8E8}.container.button-background-colour-grey-light .navigation .button{background-color:#E8E8E8}.container.button-icon-colour-grey-light .navigation .button svg path{stroke:#E8E8E8}.container.text-colour-grey-medium .navigation li{color:#8A8A8A}.container.navigation-highlight-colour-grey-medium .navigation ul{border-color:#8A8A8A}.container.selected-text-colour-grey-medium .navigation li.selected{color:#8A8A8A;border-color:#8A8A8A}.container.selected-navigation-highlight-colour-grey-medium .navigation li.selected{border-color:#8A8A8A}.container.button-background-colour-grey-medium .navigation .button{background-color:#8A8A8A}.container.button-icon-colour-grey-medium .navigation .button svg path{stroke:#8A8A8A}.container.text-colour-grey-dark .navigation li{color:#4A4A4A}.container.navigation-highlight-colour-grey-dark .navigation ul{border-color:#4A4A4A}.container.selected-text-colour-grey-dark .navigation li.selected{color:#4A4A4A;border-color:#4A4A4A}.container.selected-navigation-highlight-colour-grey-dark .navigation li.selected{border-color:#4A4A4A}.container.button-background-colour-grey-dark .navigation .button{background-color:#4A4A4A}.container.button-icon-colour-grey-dark .navigation .button svg path{stroke:#4A4A4A}";
+const biggiveTabbedContentCss = "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-6:hover,.text-colour-brand-6{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}:host{display:contents}::slotted(*){display:none}.container{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;position:relative}.container .navigation{padding:0 40px}.container .navigation .button{position:absolute;top:5px;display:block;width:30px;height:30px;padding:2.5px 10px;box-sizing:border-box;background-color:#FFFFFF;box-shadow:0px 0px 10px 0px rgba(0, 0, 0, 0.25);border-radius:50%;cursor:pointer;text-align:center}.container .navigation .button.prev{left:0}.container .navigation .button.next{right:0}.container .navigation .button svg{width:10px;height:10px}.container .navigation .sleeve{border-bottom:1px solid #E8E8E8;overflow:hidden}.container .navigation .sleeve ul{margin:0;padding:0;list-style-type:none;display:flex}.container .navigation .sleeve ul li{flex-grow:1;padding:10px 20px;margin:0;width:calc(33.3% - 20px);border-bottom:3px solid transparent;text-align:center;white-space:nowrap;cursor:pointer}.container .navigation .sleeve ul li.selected{font-weight:bold}.container.text-colour-primary .navigation li{color:#2C089B}.container.navigation-highlight-colour-primary .navigation ul{border-color:#2C089B}.container.selected-text-colour-primary .navigation li.selected{color:#2C089B;border-color:#2C089B}.container.selected-navigation-highlight-colour-primary .navigation li.selected{border-color:#2C089B}.container.button-background-colour-primary .navigation .button{background-color:#2C089B}.container.button-icon-colour-primary .navigation .button svg path{stroke:#2C089B}.container.text-colour-secondary .navigation li{color:#2AF135}.container.navigation-highlight-colour-secondary .navigation ul{border-color:#2AF135}.container.selected-text-colour-secondary .navigation li.selected{color:#2AF135;border-color:#2AF135}.container.selected-navigation-highlight-colour-secondary .navigation li.selected{border-color:#2AF135}.container.button-background-colour-secondary .navigation .button{background-color:#2AF135}.container.button-icon-colour-secondary .navigation .button svg path{stroke:#2AF135}.container.text-colour-tertiary .navigation li{color:#FF7272}.container.navigation-highlight-colour-tertiary .navigation ul{border-color:#FF7272}.container.selected-text-colour-tertiary .navigation li.selected{color:#FF7272;border-color:#FF7272}.container.selected-navigation-highlight-colour-tertiary .navigation li.selected{border-color:#FF7272}.container.button-background-colour-tertiary .navigation .button{background-color:#FF7272}.container.button-icon-colour-tertiary .navigation .button svg path{stroke:#FF7272}.container.text-colour-brand-1 .navigation li{color:#B30510}.container.navigation-highlight-colour-brand-1 .navigation ul{border-color:#B30510}.container.selected-text-colour-brand-1 .navigation li.selected{color:#B30510;border-color:#B30510}.container.selected-navigation-highlight-colour-brand-1 .navigation li.selected{border-color:#B30510}.container.button-background-colour-brand-1 .navigation .button{background-color:#B30510}.container.button-icon-colour-brand-1 .navigation .button svg path{stroke:#B30510}.container.text-colour-brand-2 .navigation li{color:#6E0887}.container.navigation-highlight-colour-brand-2 .navigation ul{border-color:#6E0887}.container.selected-text-colour-brand-2 .navigation li.selected{color:#6E0887;border-color:#6E0887}.container.selected-navigation-highlight-colour-brand-2 .navigation li.selected{border-color:#6E0887}.container.button-background-colour-brand-2 .navigation .button{background-color:#6E0887}.container.button-icon-colour-brand-2 .navigation .button svg path{stroke:#6E0887}.container.text-colour-brand-3 .navigation li{color:#50B400}.container.navigation-highlight-colour-brand-3 .navigation ul{border-color:#50B400}.container.selected-text-colour-brand-3 .navigation li.selected{color:#50B400;border-color:#50B400}.container.selected-navigation-highlight-colour-brand-3 .navigation li.selected{border-color:#50B400}.container.button-background-colour-brand-3 .navigation .button{background-color:#50B400}.container.button-icon-colour-brand-3 .navigation .button svg path{stroke:#50B400}.container.text-colour-brand-4 .navigation li{color:#FFE500}.container.navigation-highlight-colour-brand-4 .navigation ul{border-color:#FFE500}.container.selected-text-colour-brand-4 .navigation li.selected{color:#FFE500;border-color:#FFE500}.container.selected-navigation-highlight-colour-brand-4 .navigation li.selected{border-color:#FFE500}.container.button-background-colour-brand-4 .navigation .button{background-color:#FFE500}.container.button-icon-colour-brand-4 .navigation .button svg path{stroke:#FFE500}.container.text-colour-brand-5 .navigation li{color:#F07D00}.container.navigation-highlight-colour-brand-5 .navigation ul{border-color:#F07D00}.container.selected-text-colour-brand-5 .navigation li.selected{color:#F07D00;border-color:#F07D00}.container.selected-navigation-highlight-colour-brand-5 .navigation li.selected{border-color:#F07D00}.container.button-background-colour-brand-5 .navigation .button{background-color:#F07D00}.container.button-icon-colour-brand-5 .navigation .button svg path{stroke:#F07D00}.container.text-colour-brand-6 .navigation li{color:#62CFC9}.container.navigation-highlight-colour-brand-6 .navigation ul{border-color:#62CFC9}.container.selected-text-colour-brand-6 .navigation li.selected{color:#62CFC9;border-color:#62CFC9}.container.selected-navigation-highlight-colour-brand-6 .navigation li.selected{border-color:#62CFC9}.container.button-background-colour-brand-6 .navigation .button{background-color:#62CFC9}.container.button-icon-colour-brand-6 .navigation .button svg path{stroke:#62CFC9}.container.text-colour-white .navigation li{color:#FFFFFF}.container.navigation-highlight-colour-white .navigation ul{border-color:#FFFFFF}.container.selected-text-colour-white .navigation li.selected{color:#FFFFFF;border-color:#FFFFFF}.container.selected-navigation-highlight-colour-white .navigation li.selected{border-color:#FFFFFF}.container.button-background-colour-white .navigation .button{background-color:#FFFFFF}.container.button-icon-colour-white .navigation .button svg path{stroke:#FFFFFF}.container.text-colour-black .navigation li{color:#000000}.container.navigation-highlight-colour-black .navigation ul{border-color:#000000}.container.selected-text-colour-black .navigation li.selected{color:#000000;border-color:#000000}.container.selected-navigation-highlight-colour-black .navigation li.selected{border-color:#000000}.container.button-background-colour-black .navigation .button{background-color:#000000}.container.button-icon-colour-black .navigation .button svg path{stroke:#000000}.container.text-colour-grey-extra-light .navigation li{color:#D7D7D7}.container.navigation-highlight-colour-grey-extra-light .navigation ul{border-color:#D7D7D7}.container.selected-text-colour-grey-extra-light .navigation li.selected{color:#D7D7D7;border-color:#D7D7D7}.container.selected-navigation-highlight-colour-grey-extra-light .navigation li.selected{border-color:#D7D7D7}.container.button-background-colour-grey-extra-light .navigation .button{background-color:#D7D7D7}.container.button-icon-colour-grey-extra-light .navigation .button svg path{stroke:#D7D7D7}.container.text-colour-grey-light .navigation li{color:#E8E8E8}.container.navigation-highlight-colour-grey-light .navigation ul{border-color:#E8E8E8}.container.selected-text-colour-grey-light .navigation li.selected{color:#E8E8E8;border-color:#E8E8E8}.container.selected-navigation-highlight-colour-grey-light .navigation li.selected{border-color:#E8E8E8}.container.button-background-colour-grey-light .navigation .button{background-color:#E8E8E8}.container.button-icon-colour-grey-light .navigation .button svg path{stroke:#E8E8E8}.container.text-colour-grey-medium .navigation li{color:#8A8A8A}.container.navigation-highlight-colour-grey-medium .navigation ul{border-color:#8A8A8A}.container.selected-text-colour-grey-medium .navigation li.selected{color:#8A8A8A;border-color:#8A8A8A}.container.selected-navigation-highlight-colour-grey-medium .navigation li.selected{border-color:#8A8A8A}.container.button-background-colour-grey-medium .navigation .button{background-color:#8A8A8A}.container.button-icon-colour-grey-medium .navigation .button svg path{stroke:#8A8A8A}.container.text-colour-grey-dark .navigation li{color:#4A4A4A}.container.navigation-highlight-colour-grey-dark .navigation ul{border-color:#4A4A4A}.container.selected-text-colour-grey-dark .navigation li.selected{color:#4A4A4A;border-color:#4A4A4A}.container.selected-navigation-highlight-colour-grey-dark .navigation li.selected{border-color:#4A4A4A}.container.button-background-colour-grey-dark .navigation .button{background-color:#4A4A4A}.container.button-icon-colour-grey-dark .navigation .button svg path{stroke:#4A4A4A}";
 const BiggiveTabbedContent$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -22,7 +22,20 @@ const BiggiveTabbedContent$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
     this.children = Array.from(this.host.children);
   }
   componentDidRender() {
+    var _a, _b, _c, _d;
     this.showTab(0);
+    this.scrollContextTab = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.navigation .sleeve ul li');
+    const sleeveElement = (_b = this.host.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.navigation .sleeve');
+    if (sleeveElement.scrollWidth > sleeveElement.offsetWidth) {
+      (_c = this.host.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelectorAll('.navigation .button').forEach(function (button) {
+        button.style.display = 'block';
+      });
+    }
+    else {
+      (_d = this.host.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelectorAll('.navigation .button').forEach(function (button) {
+        button.style.display = 'none';
+      });
+    }
   }
   /*
    * Shows the i'th tab, counting from zero. Does nothing if i out of range.
@@ -109,7 +122,7 @@ const BiggiveTabbedContent$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
         ' button-background-colour-' +
         this.buttonBackgroundColour +
         ' button-icon-colour-' +
-        this.buttonIconColour }, h("div", { class: "navigation" }, h("div", { class: "button prev", onClick: () => this.clickPrevHandler(), title: "Previous" }, h("svg", { width: "9", height: "16", viewBox: "0 0 9 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M8.29311 14.5703L1.73926 8.01646L8.29311 1.46261", stroke: "#000000", "stroke-width": "2" }))), h("div", { class: "sleeve" }, h("ul", null, this.children.map(child => (h("li", { onClick: event => this.clickTabHandler(event) }, child.tabTitle))))), h("div", { class: "button next", onClick: () => this.clickNextHandler(), title: "Next" }, h("svg", { width: "9", height: "16", viewBox: "0 0 9 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M0.739117 1.46094L7.29297 8.01479L0.739118 14.5686", stroke: "#000000", "stroke-width": "2" })))), h("slot", null)));
+        this.buttonIconColour }, h("div", { class: "navigation" }, h("div", { class: "button prev", onClick: this.clickPrevHandler, title: "Previous" }, h("svg", { width: "9", height: "16", viewBox: "0 0 9 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M8.29311 14.5703L1.73926 8.01646L8.29311 1.46261", stroke: "#000000", "stroke-width": "2" }))), h("div", { class: "sleeve" }, h("ul", null, this.children.map(child => (h("li", { onClick: this.clickTabHandler }, child.tabTitle))))), h("div", { class: "button next", onClick: this.clickNextHandler, title: "Next" }, h("svg", { width: "9", height: "16", viewBox: "0 0 9 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M0.739117 1.46094L7.29297 8.01479L0.739118 14.5686", stroke: "#000000", "stroke-width": "2" })))), h("slot", null)));
   }
   get host() { return this; }
   static get style() { return biggiveTabbedContentCss; }

package/dist/components/biggive-timeline.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-const biggiveTimelineCss = "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-6:hover,.text-colour-brand-6{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}:host{display:contents}::slotted(*){display:none}.container{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;position:relative}.container .navigation{padding:0 40px}.container .navigation .button{position:absolute;top:5px;display:block;width:30px;height:30px;padding:2.5px 10px;box-sizing:border-box;background-color:#FFFFFF;box-shadow:0px 0px 10px 0px rgba(0, 0, 0, 0.25);border-radius:50%;cursor:pointer;text-align:center}.container .navigation .button.prev{left:0}.container .navigation .button.next{right:0}.container .navigation .button svg{width:10px;height:10px}.container .navigation .sleeve{border-bottom:1px solid #E8E8E8;overflow-x:hidden}.container .navigation .sleeve ul{margin:0;padding:0;list-style-type:none;display:flex}.container .navigation .sleeve ul li{flex-grow:1;padding:10px 20px;margin:0;width:calc(33.3% - 20px);border-bottom:3px solid transparent;text-align:center;cursor:pointer}.container .navigation .sleeve ul li.selected{font-weight:bold}.container .entry-wrap{padding:40px}.container .entry-wrap .entry{margin-bottom:15px;border-left:15px solid transparent;padding:15px 40px 15px 40px}.container .entry-wrap .entry .title{font-weight:bold;margin:0 0 5px 0;padding:0}.container .entry-wrap .entry .content p{margin:0 0 5px 0}.container.text-colour-primary .navigation li{color:#2C089B}.container.navigation-highlight-colour-primary .navigation ul{border-color:#2C089B}.container.selected-text-colour-primary .navigation li.selected{color:#2C089B;border-color:#2C089B}.container.selected-navigation-highlight-colour-primary .navigation li.selected{border-color:#2C089B}.container.button-background-colour-primary .navigation .button{background-color:#2C089B}.container.button-icon-colour-primary .navigation .button svg path{stroke:#2C089B}.container.entry-background-colour-primary .entry{background-color:#2C089B}.container.entry-highlight-colour-primary .entry{border-color:#2C089B}.container.entry-date-colour-primary .entry .date{color:#2C089B}.container.entry-title-colour-primary .entry .title{color:#2C089B}.container.entry-text-colour-primary .entry .content{color:#2C089B}.container.text-colour-secondary .navigation li{color:#2AF135}.container.navigation-highlight-colour-secondary .navigation ul{border-color:#2AF135}.container.selected-text-colour-secondary .navigation li.selected{color:#2AF135;border-color:#2AF135}.container.selected-navigation-highlight-colour-secondary .navigation li.selected{border-color:#2AF135}.container.button-background-colour-secondary .navigation .button{background-color:#2AF135}.container.button-icon-colour-secondary .navigation .button svg path{stroke:#2AF135}.container.entry-background-colour-secondary .entry{background-color:#2AF135}.container.entry-highlight-colour-secondary .entry{border-color:#2AF135}.container.entry-date-colour-secondary .entry .date{color:#2AF135}.container.entry-title-colour-secondary .entry .title{color:#2AF135}.container.entry-text-colour-secondary .entry .content{color:#2AF135}.container.text-colour-tertiary .navigation li{color:#FF7272}.container.navigation-highlight-colour-tertiary .navigation ul{border-color:#FF7272}.container.selected-text-colour-tertiary .navigation li.selected{color:#FF7272;border-color:#FF7272}.container.selected-navigation-highlight-colour-tertiary .navigation li.selected{border-color:#FF7272}.container.button-background-colour-tertiary .navigation .button{background-color:#FF7272}.container.button-icon-colour-tertiary .navigation .button svg path{stroke:#FF7272}.container.entry-background-colour-tertiary .entry{background-color:#FF7272}.container.entry-highlight-colour-tertiary .entry{border-color:#FF7272}.container.entry-date-colour-tertiary .entry .date{color:#FF7272}.container.entry-title-colour-tertiary .entry .title{color:#FF7272}.container.entry-text-colour-tertiary .entry .content{color:#FF7272}.container.text-colour-brand-1 .navigation li{color:#B30510}.container.navigation-highlight-colour-brand-1 .navigation ul{border-color:#B30510}.container.selected-text-colour-brand-1 .navigation li.selected{color:#B30510;border-color:#B30510}.container.selected-navigation-highlight-colour-brand-1 .navigation li.selected{border-color:#B30510}.container.button-background-colour-brand-1 .navigation .button{background-color:#B30510}.container.button-icon-colour-brand-1 .navigation .button svg path{stroke:#B30510}.container.entry-background-colour-brand-1 .entry{background-color:#B30510}.container.entry-highlight-colour-brand-1 .entry{border-color:#B30510}.container.entry-date-colour-brand-1 .entry .date{color:#B30510}.container.entry-title-colour-brand-1 .entry .title{color:#B30510}.container.entry-text-colour-brand-1 .entry .content{color:#B30510}.container.text-colour-brand-2 .navigation li{color:#6E0887}.container.navigation-highlight-colour-brand-2 .navigation ul{border-color:#6E0887}.container.selected-text-colour-brand-2 .navigation li.selected{color:#6E0887;border-color:#6E0887}.container.selected-navigation-highlight-colour-brand-2 .navigation li.selected{border-color:#6E0887}.container.button-background-colour-brand-2 .navigation .button{background-color:#6E0887}.container.button-icon-colour-brand-2 .navigation .button svg path{stroke:#6E0887}.container.entry-background-colour-brand-2 .entry{background-color:#6E0887}.container.entry-highlight-colour-brand-2 .entry{border-color:#6E0887}.container.entry-date-colour-brand-2 .entry .date{color:#6E0887}.container.entry-title-colour-brand-2 .entry .title{color:#6E0887}.container.entry-text-colour-brand-2 .entry .content{color:#6E0887}.container.text-colour-brand-3 .navigation li{color:#50B400}.container.navigation-highlight-colour-brand-3 .navigation ul{border-color:#50B400}.container.selected-text-colour-brand-3 .navigation li.selected{color:#50B400;border-color:#50B400}.container.selected-navigation-highlight-colour-brand-3 .navigation li.selected{border-color:#50B400}.container.button-background-colour-brand-3 .navigation .button{background-color:#50B400}.container.button-icon-colour-brand-3 .navigation .button svg path{stroke:#50B400}.container.entry-background-colour-brand-3 .entry{background-color:#50B400}.container.entry-highlight-colour-brand-3 .entry{border-color:#50B400}.container.entry-date-colour-brand-3 .entry .date{color:#50B400}.container.entry-title-colour-brand-3 .entry .title{color:#50B400}.container.entry-text-colour-brand-3 .entry .content{color:#50B400}.container.text-colour-brand-4 .navigation li{color:#FFE500}.container.navigation-highlight-colour-brand-4 .navigation ul{border-color:#FFE500}.container.selected-text-colour-brand-4 .navigation li.selected{color:#FFE500;border-color:#FFE500}.container.selected-navigation-highlight-colour-brand-4 .navigation li.selected{border-color:#FFE500}.container.button-background-colour-brand-4 .navigation .button{background-color:#FFE500}.container.button-icon-colour-brand-4 .navigation .button svg path{stroke:#FFE500}.container.entry-background-colour-brand-4 .entry{background-color:#FFE500}.container.entry-highlight-colour-brand-4 .entry{border-color:#FFE500}.container.entry-date-colour-brand-4 .entry .date{color:#FFE500}.container.entry-title-colour-brand-4 .entry .title{color:#FFE500}.container.entry-text-colour-brand-4 .entry .content{color:#FFE500}.container.text-colour-brand-5 .navigation li{color:#F07D00}.container.navigation-highlight-colour-brand-5 .navigation ul{border-color:#F07D00}.container.selected-text-colour-brand-5 .navigation li.selected{color:#F07D00;border-color:#F07D00}.container.selected-navigation-highlight-colour-brand-5 .navigation li.selected{border-color:#F07D00}.container.button-background-colour-brand-5 .navigation .button{background-color:#F07D00}.container.button-icon-colour-brand-5 .navigation .button svg path{stroke:#F07D00}.container.entry-background-colour-brand-5 .entry{background-color:#F07D00}.container.entry-highlight-colour-brand-5 .entry{border-color:#F07D00}.container.entry-date-colour-brand-5 .entry .date{color:#F07D00}.container.entry-title-colour-brand-5 .entry .title{color:#F07D00}.container.entry-text-colour-brand-5 .entry .content{color:#F07D00}.container.text-colour-brand-6 .navigation li{color:#62CFC9}.container.navigation-highlight-colour-brand-6 .navigation ul{border-color:#62CFC9}.container.selected-text-colour-brand-6 .navigation li.selected{color:#62CFC9;border-color:#62CFC9}.container.selected-navigation-highlight-colour-brand-6 .navigation li.selected{border-color:#62CFC9}.container.button-background-colour-brand-6 .navigation .button{background-color:#62CFC9}.container.button-icon-colour-brand-6 .navigation .button svg path{stroke:#62CFC9}.container.entry-background-colour-brand-6 .entry{background-color:#62CFC9}.container.entry-highlight-colour-brand-6 .entry{border-color:#62CFC9}.container.entry-date-colour-brand-6 .entry .date{color:#62CFC9}.container.entry-title-colour-brand-6 .entry .title{color:#62CFC9}.container.entry-text-colour-brand-6 .entry .content{color:#62CFC9}.container.text-colour-white .navigation li{color:#FFFFFF}.container.navigation-highlight-colour-white .navigation ul{border-color:#FFFFFF}.container.selected-text-colour-white .navigation li.selected{color:#FFFFFF;border-color:#FFFFFF}.container.selected-navigation-highlight-colour-white .navigation li.selected{border-color:#FFFFFF}.container.button-background-colour-white .navigation .button{background-color:#FFFFFF}.container.button-icon-colour-white .navigation .button svg path{stroke:#FFFFFF}.container.entry-background-colour-white .entry{background-color:#FFFFFF}.container.entry-highlight-colour-white .entry{border-color:#FFFFFF}.container.entry-date-colour-white .entry .date{color:#FFFFFF}.container.entry-title-colour-white .entry .title{color:#FFFFFF}.container.entry-text-colour-white .entry .content{color:#FFFFFF}.container.text-colour-black .navigation li{color:#000000}.container.navigation-highlight-colour-black .navigation ul{border-color:#000000}.container.selected-text-colour-black .navigation li.selected{color:#000000;border-color:#000000}.container.selected-navigation-highlight-colour-black .navigation li.selected{border-color:#000000}.container.button-background-colour-black .navigation .button{background-color:#000000}.container.button-icon-colour-black .navigation .button svg path{stroke:#000000}.container.entry-background-colour-black .entry{background-color:#000000}.container.entry-highlight-colour-black .entry{border-color:#000000}.container.entry-date-colour-black .entry .date{color:#000000}.container.entry-title-colour-black .entry .title{color:#000000}.container.entry-text-colour-black .entry .content{color:#000000}.container.text-colour-grey-extra-light .navigation li{color:#D7D7D7}.container.navigation-highlight-colour-grey-extra-light .navigation ul{border-color:#D7D7D7}.container.selected-text-colour-grey-extra-light .navigation li.selected{color:#D7D7D7;border-color:#D7D7D7}.container.selected-navigation-highlight-colour-grey-extra-light .navigation li.selected{border-color:#D7D7D7}.container.button-background-colour-grey-extra-light .navigation .button{background-color:#D7D7D7}.container.button-icon-colour-grey-extra-light .navigation .button svg path{stroke:#D7D7D7}.container.entry-background-colour-grey-extra-light .entry{background-color:#D7D7D7}.container.entry-highlight-colour-grey-extra-light .entry{border-color:#D7D7D7}.container.entry-date-colour-grey-extra-light .entry .date{color:#D7D7D7}.container.entry-title-colour-grey-extra-light .entry .title{color:#D7D7D7}.container.entry-text-colour-grey-extra-light .entry .content{color:#D7D7D7}.container.text-colour-grey-light .navigation li{color:#E8E8E8}.container.navigation-highlight-colour-grey-light .navigation ul{border-color:#E8E8E8}.container.selected-text-colour-grey-light .navigation li.selected{color:#E8E8E8;border-color:#E8E8E8}.container.selected-navigation-highlight-colour-grey-light .navigation li.selected{border-color:#E8E8E8}.container.button-background-colour-grey-light .navigation .button{background-color:#E8E8E8}.container.button-icon-colour-grey-light .navigation .button svg path{stroke:#E8E8E8}.container.entry-background-colour-grey-light .entry{background-color:#E8E8E8}.container.entry-highlight-colour-grey-light .entry{border-color:#E8E8E8}.container.entry-date-colour-grey-light .entry .date{color:#E8E8E8}.container.entry-title-colour-grey-light .entry .title{color:#E8E8E8}.container.entry-text-colour-grey-light .entry .content{color:#E8E8E8}.container.text-colour-grey-medium .navigation li{color:#8A8A8A}.container.navigation-highlight-colour-grey-medium .navigation ul{border-color:#8A8A8A}.container.selected-text-colour-grey-medium .navigation li.selected{color:#8A8A8A;border-color:#8A8A8A}.container.selected-navigation-highlight-colour-grey-medium .navigation li.selected{border-color:#8A8A8A}.container.button-background-colour-grey-medium .navigation .button{background-color:#8A8A8A}.container.button-icon-colour-grey-medium .navigation .button svg path{stroke:#8A8A8A}.container.entry-background-colour-grey-medium .entry{background-color:#8A8A8A}.container.entry-highlight-colour-grey-medium .entry{border-color:#8A8A8A}.container.entry-date-colour-grey-medium .entry .date{color:#8A8A8A}.container.entry-title-colour-grey-medium .entry .title{color:#8A8A8A}.container.entry-text-colour-grey-medium .entry .content{color:#8A8A8A}.container.text-colour-grey-dark .navigation li{color:#4A4A4A}.container.navigation-highlight-colour-grey-dark .navigation ul{border-color:#4A4A4A}.container.selected-text-colour-grey-dark .navigation li.selected{color:#4A4A4A;border-color:#4A4A4A}.container.selected-navigation-highlight-colour-grey-dark .navigation li.selected{border-color:#4A4A4A}.container.button-background-colour-grey-dark .navigation .button{background-color:#4A4A4A}.container.button-icon-colour-grey-dark .navigation .button svg path{stroke:#4A4A4A}.container.entry-background-colour-grey-dark .entry{background-color:#4A4A4A}.container.entry-highlight-colour-grey-dark .entry{border-color:#4A4A4A}.container.entry-date-colour-grey-dark .entry .date{color:#4A4A4A}.container.entry-title-colour-grey-dark .entry .title{color:#4A4A4A}.container.entry-text-colour-grey-dark .entry .content{color:#4A4A4A}";
+const biggiveTimelineCss = "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-6:hover,.text-colour-brand-6{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}:host{display:contents}::slotted(*){display:none}.container{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;position:relative}.container .navigation{padding:0 40px}.container .navigation .button{position:absolute;top:5px;display:block;width:30px;height:30px;padding:2.5px 10px;box-sizing:border-box;background-color:#FFFFFF;box-shadow:0px 0px 10px 0px rgba(0, 0, 0, 0.25);border-radius:50%;cursor:pointer;text-align:center}.container .navigation .button.prev{left:0}.container .navigation .button.next{right:0}.container .navigation .button svg{width:10px;height:10px}.container .navigation .sleeve{overflow-x:hidden}.container .navigation .sleeve ul{margin:0;padding:0;list-style-type:none;display:flex;border-bottom:1px solid #E8E8E8}.container .navigation .sleeve ul li{flex-grow:1;padding:10px 20px;margin:0 0 -1px 0;width:calc(33.3% - 20px);border-bottom:3px solid transparent;text-align:center;cursor:pointer}.container .navigation .sleeve ul li.selected{font-weight:bold}.container .entry-wrap{padding:40px}.container .entry-wrap .entry{margin-bottom:15px;border-left:15px solid transparent;padding:15px 40px 15px 40px}.container .entry-wrap .entry .title{font-weight:bold;margin:0 0 5px 0;padding:0}.container .entry-wrap .entry .content p{margin:0 0 5px 0}.container.text-colour-primary .navigation li{color:#2C089B}.container.navigation-highlight-colour-primary .navigation ul{border-color:#2C089B}.container.selected-text-colour-primary .navigation li.selected{color:#2C089B}.container.selected-navigation-highlight-colour-primary .navigation li.selected{border-color:#2C089B}.container.button-background-colour-primary .navigation .button{background-color:#2C089B}.container.button-icon-colour-primary .navigation .button svg path{stroke:#2C089B}.container.entry-background-colour-primary .entry{background-color:#2C089B}.container.entry-highlight-colour-primary .entry{border-color:#2C089B}.container.entry-date-colour-primary .entry .date{color:#2C089B}.container.entry-title-colour-primary .entry .title{color:#2C089B}.container.entry-text-colour-primary .entry .content{color:#2C089B}.container.text-colour-secondary .navigation li{color:#2AF135}.container.navigation-highlight-colour-secondary .navigation ul{border-color:#2AF135}.container.selected-text-colour-secondary .navigation li.selected{color:#2AF135}.container.selected-navigation-highlight-colour-secondary .navigation li.selected{border-color:#2AF135}.container.button-background-colour-secondary .navigation .button{background-color:#2AF135}.container.button-icon-colour-secondary .navigation .button svg path{stroke:#2AF135}.container.entry-background-colour-secondary .entry{background-color:#2AF135}.container.entry-highlight-colour-secondary .entry{border-color:#2AF135}.container.entry-date-colour-secondary .entry .date{color:#2AF135}.container.entry-title-colour-secondary .entry .title{color:#2AF135}.container.entry-text-colour-secondary .entry .content{color:#2AF135}.container.text-colour-tertiary .navigation li{color:#FF7272}.container.navigation-highlight-colour-tertiary .navigation ul{border-color:#FF7272}.container.selected-text-colour-tertiary .navigation li.selected{color:#FF7272}.container.selected-navigation-highlight-colour-tertiary .navigation li.selected{border-color:#FF7272}.container.button-background-colour-tertiary .navigation .button{background-color:#FF7272}.container.button-icon-colour-tertiary .navigation .button svg path{stroke:#FF7272}.container.entry-background-colour-tertiary .entry{background-color:#FF7272}.container.entry-highlight-colour-tertiary .entry{border-color:#FF7272}.container.entry-date-colour-tertiary .entry .date{color:#FF7272}.container.entry-title-colour-tertiary .entry .title{color:#FF7272}.container.entry-text-colour-tertiary .entry .content{color:#FF7272}.container.text-colour-brand-1 .navigation li{color:#B30510}.container.navigation-highlight-colour-brand-1 .navigation ul{border-color:#B30510}.container.selected-text-colour-brand-1 .navigation li.selected{color:#B30510}.container.selected-navigation-highlight-colour-brand-1 .navigation li.selected{border-color:#B30510}.container.button-background-colour-brand-1 .navigation .button{background-color:#B30510}.container.button-icon-colour-brand-1 .navigation .button svg path{stroke:#B30510}.container.entry-background-colour-brand-1 .entry{background-color:#B30510}.container.entry-highlight-colour-brand-1 .entry{border-color:#B30510}.container.entry-date-colour-brand-1 .entry .date{color:#B30510}.container.entry-title-colour-brand-1 .entry .title{color:#B30510}.container.entry-text-colour-brand-1 .entry .content{color:#B30510}.container.text-colour-brand-2 .navigation li{color:#6E0887}.container.navigation-highlight-colour-brand-2 .navigation ul{border-color:#6E0887}.container.selected-text-colour-brand-2 .navigation li.selected{color:#6E0887}.container.selected-navigation-highlight-colour-brand-2 .navigation li.selected{border-color:#6E0887}.container.button-background-colour-brand-2 .navigation .button{background-color:#6E0887}.container.button-icon-colour-brand-2 .navigation .button svg path{stroke:#6E0887}.container.entry-background-colour-brand-2 .entry{background-color:#6E0887}.container.entry-highlight-colour-brand-2 .entry{border-color:#6E0887}.container.entry-date-colour-brand-2 .entry .date{color:#6E0887}.container.entry-title-colour-brand-2 .entry .title{color:#6E0887}.container.entry-text-colour-brand-2 .entry .content{color:#6E0887}.container.text-colour-brand-3 .navigation li{color:#50B400}.container.navigation-highlight-colour-brand-3 .navigation ul{border-color:#50B400}.container.selected-text-colour-brand-3 .navigation li.selected{color:#50B400}.container.selected-navigation-highlight-colour-brand-3 .navigation li.selected{border-color:#50B400}.container.button-background-colour-brand-3 .navigation .button{background-color:#50B400}.container.button-icon-colour-brand-3 .navigation .button svg path{stroke:#50B400}.container.entry-background-colour-brand-3 .entry{background-color:#50B400}.container.entry-highlight-colour-brand-3 .entry{border-color:#50B400}.container.entry-date-colour-brand-3 .entry .date{color:#50B400}.container.entry-title-colour-brand-3 .entry .title{color:#50B400}.container.entry-text-colour-brand-3 .entry .content{color:#50B400}.container.text-colour-brand-4 .navigation li{color:#FFE500}.container.navigation-highlight-colour-brand-4 .navigation ul{border-color:#FFE500}.container.selected-text-colour-brand-4 .navigation li.selected{color:#FFE500}.container.selected-navigation-highlight-colour-brand-4 .navigation li.selected{border-color:#FFE500}.container.button-background-colour-brand-4 .navigation .button{background-color:#FFE500}.container.button-icon-colour-brand-4 .navigation .button svg path{stroke:#FFE500}.container.entry-background-colour-brand-4 .entry{background-color:#FFE500}.container.entry-highlight-colour-brand-4 .entry{border-color:#FFE500}.container.entry-date-colour-brand-4 .entry .date{color:#FFE500}.container.entry-title-colour-brand-4 .entry .title{color:#FFE500}.container.entry-text-colour-brand-4 .entry .content{color:#FFE500}.container.text-colour-brand-5 .navigation li{color:#F07D00}.container.navigation-highlight-colour-brand-5 .navigation ul{border-color:#F07D00}.container.selected-text-colour-brand-5 .navigation li.selected{color:#F07D00}.container.selected-navigation-highlight-colour-brand-5 .navigation li.selected{border-color:#F07D00}.container.button-background-colour-brand-5 .navigation .button{background-color:#F07D00}.container.button-icon-colour-brand-5 .navigation .button svg path{stroke:#F07D00}.container.entry-background-colour-brand-5 .entry{background-color:#F07D00}.container.entry-highlight-colour-brand-5 .entry{border-color:#F07D00}.container.entry-date-colour-brand-5 .entry .date{color:#F07D00}.container.entry-title-colour-brand-5 .entry .title{color:#F07D00}.container.entry-text-colour-brand-5 .entry .content{color:#F07D00}.container.text-colour-brand-6 .navigation li{color:#62CFC9}.container.navigation-highlight-colour-brand-6 .navigation ul{border-color:#62CFC9}.container.selected-text-colour-brand-6 .navigation li.selected{color:#62CFC9}.container.selected-navigation-highlight-colour-brand-6 .navigation li.selected{border-color:#62CFC9}.container.button-background-colour-brand-6 .navigation .button{background-color:#62CFC9}.container.button-icon-colour-brand-6 .navigation .button svg path{stroke:#62CFC9}.container.entry-background-colour-brand-6 .entry{background-color:#62CFC9}.container.entry-highlight-colour-brand-6 .entry{border-color:#62CFC9}.container.entry-date-colour-brand-6 .entry .date{color:#62CFC9}.container.entry-title-colour-brand-6 .entry .title{color:#62CFC9}.container.entry-text-colour-brand-6 .entry .content{color:#62CFC9}.container.text-colour-white .navigation li{color:#FFFFFF}.container.navigation-highlight-colour-white .navigation ul{border-color:#FFFFFF}.container.selected-text-colour-white .navigation li.selected{color:#FFFFFF}.container.selected-navigation-highlight-colour-white .navigation li.selected{border-color:#FFFFFF}.container.button-background-colour-white .navigation .button{background-color:#FFFFFF}.container.button-icon-colour-white .navigation .button svg path{stroke:#FFFFFF}.container.entry-background-colour-white .entry{background-color:#FFFFFF}.container.entry-highlight-colour-white .entry{border-color:#FFFFFF}.container.entry-date-colour-white .entry .date{color:#FFFFFF}.container.entry-title-colour-white .entry .title{color:#FFFFFF}.container.entry-text-colour-white .entry .content{color:#FFFFFF}.container.text-colour-black .navigation li{color:#000000}.container.navigation-highlight-colour-black .navigation ul{border-color:#000000}.container.selected-text-colour-black .navigation li.selected{color:#000000}.container.selected-navigation-highlight-colour-black .navigation li.selected{border-color:#000000}.container.button-background-colour-black .navigation .button{background-color:#000000}.container.button-icon-colour-black .navigation .button svg path{stroke:#000000}.container.entry-background-colour-black .entry{background-color:#000000}.container.entry-highlight-colour-black .entry{border-color:#000000}.container.entry-date-colour-black .entry .date{color:#000000}.container.entry-title-colour-black .entry .title{color:#000000}.container.entry-text-colour-black .entry .content{color:#000000}.container.text-colour-grey-extra-light .navigation li{color:#D7D7D7}.container.navigation-highlight-colour-grey-extra-light .navigation ul{border-color:#D7D7D7}.container.selected-text-colour-grey-extra-light .navigation li.selected{color:#D7D7D7}.container.selected-navigation-highlight-colour-grey-extra-light .navigation li.selected{border-color:#D7D7D7}.container.button-background-colour-grey-extra-light .navigation .button{background-color:#D7D7D7}.container.button-icon-colour-grey-extra-light .navigation .button svg path{stroke:#D7D7D7}.container.entry-background-colour-grey-extra-light .entry{background-color:#D7D7D7}.container.entry-highlight-colour-grey-extra-light .entry{border-color:#D7D7D7}.container.entry-date-colour-grey-extra-light .entry .date{color:#D7D7D7}.container.entry-title-colour-grey-extra-light .entry .title{color:#D7D7D7}.container.entry-text-colour-grey-extra-light .entry .content{color:#D7D7D7}.container.text-colour-grey-light .navigation li{color:#E8E8E8}.container.navigation-highlight-colour-grey-light .navigation ul{border-color:#E8E8E8}.container.selected-text-colour-grey-light .navigation li.selected{color:#E8E8E8}.container.selected-navigation-highlight-colour-grey-light .navigation li.selected{border-color:#E8E8E8}.container.button-background-colour-grey-light .navigation .button{background-color:#E8E8E8}.container.button-icon-colour-grey-light .navigation .button svg path{stroke:#E8E8E8}.container.entry-background-colour-grey-light .entry{background-color:#E8E8E8}.container.entry-highlight-colour-grey-light .entry{border-color:#E8E8E8}.container.entry-date-colour-grey-light .entry .date{color:#E8E8E8}.container.entry-title-colour-grey-light .entry .title{color:#E8E8E8}.container.entry-text-colour-grey-light .entry .content{color:#E8E8E8}.container.text-colour-grey-medium .navigation li{color:#8A8A8A}.container.navigation-highlight-colour-grey-medium .navigation ul{border-color:#8A8A8A}.container.selected-text-colour-grey-medium .navigation li.selected{color:#8A8A8A}.container.selected-navigation-highlight-colour-grey-medium .navigation li.selected{border-color:#8A8A8A}.container.button-background-colour-grey-medium .navigation .button{background-color:#8A8A8A}.container.button-icon-colour-grey-medium .navigation .button svg path{stroke:#8A8A8A}.container.entry-background-colour-grey-medium .entry{background-color:#8A8A8A}.container.entry-highlight-colour-grey-medium .entry{border-color:#8A8A8A}.container.entry-date-colour-grey-medium .entry .date{color:#8A8A8A}.container.entry-title-colour-grey-medium .entry .title{color:#8A8A8A}.container.entry-text-colour-grey-medium .entry .content{color:#8A8A8A}.container.text-colour-grey-dark .navigation li{color:#4A4A4A}.container.navigation-highlight-colour-grey-dark .navigation ul{border-color:#4A4A4A}.container.selected-text-colour-grey-dark .navigation li.selected{color:#4A4A4A}.container.selected-navigation-highlight-colour-grey-dark .navigation li.selected{border-color:#4A4A4A}.container.button-background-colour-grey-dark .navigation .button{background-color:#4A4A4A}.container.button-icon-colour-grey-dark .navigation .button svg path{stroke:#4A4A4A}.container.entry-background-colour-grey-dark .entry{background-color:#4A4A4A}.container.entry-highlight-colour-grey-dark .entry{border-color:#4A4A4A}.container.entry-date-colour-grey-dark .entry .date{color:#4A4A4A}.container.entry-title-colour-grey-dark .entry .title{color:#4A4A4A}.container.entry-text-colour-grey-dark .entry .content{color:#4A4A4A}";
 const BiggiveTimeline$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -135,7 +135,7 @@ const BiggiveTimeline$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
         ' entry-title-colour-' +
         this.entryTitleColour +
         ' entry-text-colour-' +
-        this.entryTextColour }, h("div", { class: "navigation" }, h("div", { class: "button prev", onClick: () => this.clickPrevHandler(), title: "Previous" }, h("svg", { width: "9", height: "16", viewBox: "0 0 9 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M8.29311 14.5703L1.73926 8.01646L8.29311 1.46261", stroke: "#000000", "stroke-width": "2" }))), h("div", { class: "sleeve" }, h("ul", null, this.tabHeadings.map(tab => (h("li", { onClick: event => this.clickTabHandler(event) }, tab))))), h("div", { class: "button next", onClick: () => this.clickNextHandler(), title: "Next" }, h("svg", { width: "9", height: "16", viewBox: "0 0 9 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M0.739117 1.46094L7.29297 8.01479L0.739118 14.5686", stroke: "#000000", "stroke-width": "2" })))), h("div", { class: "entry-wrap" }, this.children.map(entry => (h("div", { class: "entry", "data-date": entry.date }, h("h4", { class: "title" }, entry.heading), h("div", { class: "content", innerHTML: entry.innerHTML })))))));
+        this.entryTextColour }, h("div", { class: "navigation" }, h("div", { class: "button prev", onClick: this.clickPrevHandler, title: "Previous" }, h("svg", { width: "9", height: "16", viewBox: "0 0 9 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M8.29311 14.5703L1.73926 8.01646L8.29311 1.46261", stroke: "#000000", "stroke-width": "2" }))), h("div", { class: "sleeve" }, h("ul", null, this.tabHeadings.map(tab => (h("li", { onClick: this.clickTabHandler }, tab))))), h("div", { class: "button next", onClick: this.clickNextHandler, title: "Next" }, h("svg", { width: "9", height: "16", viewBox: "0 0 9 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M0.739117 1.46094L7.29297 8.01479L0.739118 14.5686", stroke: "#000000", "stroke-width": "2" })))), h("div", { class: "entry-wrap" }, this.children.map(entry => (h("div", { class: "entry", "data-date": entry.date }, h("h4", { class: "title" }, entry.heading), h("div", { class: "content", innerHTML: entry.innerHTML })))))));
   }
   get host() { return this; }
   static get style() { return biggiveTimelineCss; }

package/dist/components/biggive-tipping-slider.js CHANGED Viewed

@@ -49,7 +49,7 @@ const BiggiveTippingSlider$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
           // a truthy window.TouchEvent - see https://stackoverflow.com/a/32882849/2803757
           pageX = e.pageX;
         }
-        if (pageX) {
+        if (pageX !== undefined) {
           const mousePos = pageX - bar.offsetLeft - handle.offsetWidth / 2;
           const position = mousePos > max ? max : mousePos < 0 ? 0 : mousePos;
           const percentage = (position / max) * this.percentageEnd;

package/dist/components/biggive-totalizer.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-const biggiveTotalizerCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.background-colour-hover-primary:hover,.background-colour-primary{background-color:#2C089B}.background-colour-hover-secondary:hover,.background-colour-secondary{background-color:#2AF135}.background-colour-hover-tertiary:hover,.background-colour-tertiary{background-color:#FF7272}.background-colour-hover-brand-1:hover,.background-colour-brand-1{background-color:#B30510}.background-colour-hover-brand-2:hover,.background-colour-brand-2{background-color:#6E0887}.background-colour-hover-brand-3:hover,.background-colour-brand-3{background-color:#50B400}.background-colour-hover-brand-4:hover,.background-colour-brand-4{background-color:#FFE500}.background-colour-hover-brand-5:hover,.background-colour-brand-5{background-color:#F07D00}.background-colour-hover-brand-6:hover,.background-colour-brand-6{background-color:#62CFC9}.background-colour-hover-white:hover,.background-colour-white{background-color:#FFFFFF}.background-colour-hover-black:hover,.background-colour-black{background-color:#000000}.background-colour-hover-white:hover,.background-colour-white{background-color:#FFFFFF}.background-colour-hover-grey-extra-light:hover,.background-colour-grey-extra-light{background-color:#D7D7D7}.background-colour-hover-grey-light:hover,.background-colour-grey-light{background-color:#E8E8E8}.background-colour-hover-grey-medium:hover,.background-colour-grey-medium{background-color:#8A8A8A}.background-colour-hover-grey-dark:hover,.background-colour-grey-dark{background-color:#4A4A4A}.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-6:hover,.text-colour-brand-6{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}:host{display:contents;font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px}@keyframes ticker{0%{transform:translate3d(0, 0, 0)}100%{transform:translate3d(-100%, 0, 0)}}.container{position:absolute;left:0;right:0;z-index:1}.container .main-message-wrap{position:absolute;z-index:1;padding:10px 30px;left:0;top:0;font-size:24px;line-height:30px;font-weight:600;max-width:33.3%}.container .ticker-wrap{padding:10px 0 10px 0;min-height:17px;font-size:17px;line-height:24px;overflow:hidden;position:relative}.container .ticker-wrap .sleeve{will-change:transform;width:100%;position:absolute;left:100%;display:flex;animation-iteration-count:infinite;animation-timing-function:linear;animation-name:ticker;animation-duration:20s}.container .ticker-wrap .sleeve .ticker-item{white-space:nowrap;padding:0 15px}@media screen and (max-width: 768px){.container .main-message-wrap{font-size:17px;line-height:24px;padding:10px}}";
+const biggiveTotalizerCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.background-colour-hover-primary:hover,.background-colour-primary{background-color:#2C089B}.background-colour-hover-secondary:hover,.background-colour-secondary{background-color:#2AF135}.background-colour-hover-tertiary:hover,.background-colour-tertiary{background-color:#FF7272}.background-colour-hover-brand-1:hover,.background-colour-brand-1{background-color:#B30510}.background-colour-hover-brand-2:hover,.background-colour-brand-2{background-color:#6E0887}.background-colour-hover-brand-3:hover,.background-colour-brand-3{background-color:#50B400}.background-colour-hover-brand-4:hover,.background-colour-brand-4{background-color:#FFE500}.background-colour-hover-brand-5:hover,.background-colour-brand-5{background-color:#F07D00}.background-colour-hover-brand-6:hover,.background-colour-brand-6{background-color:#62CFC9}.background-colour-hover-white:hover,.background-colour-white{background-color:#FFFFFF}.background-colour-hover-black:hover,.background-colour-black{background-color:#000000}.background-colour-hover-white:hover,.background-colour-white{background-color:#FFFFFF}.background-colour-hover-grey-extra-light:hover,.background-colour-grey-extra-light{background-color:#D7D7D7}.background-colour-hover-grey-light:hover,.background-colour-grey-light{background-color:#E8E8E8}.background-colour-hover-grey-medium:hover,.background-colour-grey-medium{background-color:#8A8A8A}.background-colour-hover-grey-dark:hover,.background-colour-grey-dark{background-color:#4A4A4A}.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-6:hover,.text-colour-brand-6{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}:host{display:contents;font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px}@keyframes ticker{0%{transform:translate3d(0, 0, 0)}100%{transform:translate3d(-200%, 0, 0)}}.container{position:absolute;left:0;right:0;z-index:1}.container .main-message-wrap{position:absolute;z-index:1;padding:10px 30px;left:0;top:0;font-size:24px;line-height:30px;font-weight:600;max-width:33.3%}.container .ticker-wrap{padding:10px 0 10px 0;min-height:17px;font-size:17px;line-height:24px;overflow:hidden;position:relative}.container .ticker-wrap .sleeve{will-change:transform;width:100%;position:absolute;left:100%;display:flex;animation-iteration-count:infinite;animation-timing-function:linear;animation-name:ticker;animation-duration:10s}@media (prefers-reduced-motion){.container .ticker-wrap .sleeve{animation-name:none}}.container .ticker-wrap .sleeve .ticker-item{white-space:nowrap;padding:0 15px}.container .ticker-wrap .sleeve.sleeve-delayed-copy{animation-delay:5s}@media screen and (max-width: 768px){.container .main-message-wrap{font-size:17px;line-height:24px;padding:10px}}";
 const BiggiveTotalizer$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -14,22 +14,58 @@ const BiggiveTotalizer$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
     this.secondaryTextColour = 'black';
     this.mainMessage = undefined;
   }
+  setSpeed(itemsWidth) {
+    var _a, _b;
+    const sleeve1 = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.ticker-wrap #sleeve_1');
+    const sleeve2 = (_b = this.host.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.ticker-wrap #sleeve_2');
+    if (!sleeve1 || !sleeve2) {
+      console.log('sleeve1 or sleeve2 is missing, skipping setSpeed()');
+      return;
+    }
+    // Restart the animation(s) on window resize to reduce the chance of jankiness.
+    // https://stackoverflow.com/a/45036752/2803757
+    sleeve1.style.animationName = 'none';
+    sleeve2.style.animationName = 'none';
+    const duration = sleeve1.clientWidth / 50;
+    sleeve1.style.animationDuration = Math.round(duration) + 's';
+    sleeve1.style.animationName = 'ticker';
+    // For now, only show the 2nd copy if there's space for it to not overlap. This means
+    // a bumpier loop on mobile, but we'd need a tweaked approach to wrap around cleanly
+    // where the item lists doesn't fit on the screen twice. The 1.5 ratio is a trial and
+    // error number which seems OK for now. It leaves a bit of a gap before items cycle
+    // back in at tablet sizes but is an improvement on what we had before at all breakpoints
+    // tested.
+    if (itemsWidth * 1.5 < sleeve1.clientWidth) {
+      sleeve2.style.animationDuration = Math.round(duration) + 's';
+      sleeve2.style.animationDelay = Math.round(duration / 2) + 's';
+      sleeve2.style.animationName = 'ticker';
+    }
+  }
   componentDidRender() {
-    // @ts-ignore
+    var _a, _b;
     const tickerItemsInternalWrapper = this.host.querySelector(`[slot="ticker-items"]`);
+    const sleeve1 = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.ticker-wrap #sleeve_1');
+    const sleeve2 = (_b = this.host.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.ticker-wrap #sleeve_2');
+    if (!tickerItemsInternalWrapper || !sleeve1 || !sleeve2) {
+      console.log('tickerItemsInternalWrapper, sleeve1 or sleeve2 is missing, skipping totalizer animation setup');
+      return;
+    }
+    // Clone all children of the ticker items internal wrapper and append them, so the ticker can show items without
+    // a blank break. Sleeve 2 will animate on a delay per https://stackoverflow.com/a/45847760.
+    tickerItemsInternalWrapper.childNodes.forEach((child) => {
+      sleeve2.appendChild(child.cloneNode(true)); // Deep clone all items.
+    });
     if (tickerItemsInternalWrapper !== null && tickerItemsInternalWrapper !== undefined) {
       tickerItemsInternalWrapper.style.display = 'inline-flex';
       tickerItemsInternalWrapper.style.flex = 'none';
     }
-    // @ts-ignore
-    const tickerWidth = this.host.shadowRoot.querySelector('.ticker-wrap .sleeve').clientWidth;
-    const duration = tickerWidth / 50;
-    // @ts-ignore
-    const sleeve = this.host.shadowRoot.querySelector('.ticker-wrap .sleeve');
-    sleeve.style.animationDuration = Math.round(duration) + 's';
+    this.setSpeed(tickerItemsInternalWrapper.clientWidth);
+    window.addEventListener('resize', () => {
+      this.setSpeed(tickerItemsInternalWrapper.clientWidth);
+    });
   }
   render() {
-    return (h("div", { class: 'container space-below-' + this.spaceBelow }, h("div", { class: "sleeve" }, h("div", { class: "banner" }, h("div", { class: 'main-message-wrap background-colour-' + this.secondaryColour + ' text-colour-' + this.secondaryTextColour }, this.mainMessage), h("div", { class: 'ticker-wrap background-colour-' + this.primaryColour + ' text-colour-' + this.primaryTextColour }, h("div", { class: "sleeve" }, h("slot", { name: "ticker-items" })))))));
+    return (h("div", { class: 'container space-below-' + this.spaceBelow }, h("div", null, h("div", { class: "banner" }, h("div", { class: 'main-message-wrap background-colour-' + this.secondaryColour + ' text-colour-' + this.secondaryTextColour }, this.mainMessage), h("div", { class: 'ticker-wrap background-colour-' + this.primaryColour + ' text-colour-' + this.primaryTextColour }, h("div", { id: "sleeve_1", class: "sleeve" }, h("slot", { name: "ticker-items" })), h("div", { id: "sleeve_2", class: "sleeve sleeve-delayed-copy" }))))));
   }
   get host() { return this; }
   static get style() { return biggiveTotalizerCss; }

package/dist/components/fontawesome-icons.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { 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 faPlus, l as faAlarmClock, m as faHeart, n as faBars, o as faX, p as faPaw, q as faMedal, r as faTheaterMasks, s as faRibbon, t as faPeopleCarry, u as faParachuteBox, v as faBook, w as faSeedling, x as faHeartbeat, y as faHomeHeart, z as faHospital, A as faBalanceScale, B as faInfoCircle, C as faMicroscope, D as faHeadSideMedical, E as faMortarPestle, F as faPlaceOfWorship, G as faFutbol } from './index2.js';
+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 faAlarmClock, l as faHeart, m as faBars, n as faX, o as faFilter, p as faFilterSlash, q as faPaw, r as faMedal, s as faTheaterMasks, t as faRibbon, u as faPeopleCarry, v as faParachuteBox, w as faBook, x as faSeedling, y as faHeartbeat, z as faHomeHeart, A as faHospital, B as faBalanceScale, C as faInfoCircle, D as faMicroscope, E as faHeadSideMedical, F as faMortarPestle, G as faPlaceOfWorship, H as faFutbol } from './index2.js';
 var faLinkedinIn = {
   prefix: 'fab',
@@ -156,6 +156,14 @@ class FontAwesomeIconsService {
         name: 'MenuClose',
         icon: faX,
       },
+      {
+        name: 'Filter',
+        icon: faFilter,
+      },
+      {
+        name: 'FilterSlash',
+        icon: faFilterSlash,
+      },
     ];
   }
   static getCategories() {

package/dist/components/helper-methods.js CHANGED Viewed

@@ -1,5 +1,5 @@
 const makeURL = (urlType, urlPrefix, relativeUrl) => {
-  if (!urlPrefix || !urlPrefix.startsWith('http')) {
+  if (urlPrefix === undefined || urlPrefix.length === 0 || !urlPrefix.startsWith('http')) {
     throw new Error(`${urlType} URL prefix must be set and start with http`);
   }
   return urlPrefix + '/' + relativeUrl;