@biggive/components 202303201542.0.0 → 202303231047.0.0

package/dist/components/biggive-carousel2.js

@@ -0,0 +1,92 @@
+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 BiggiveCarousel = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.currentTab = 0;
+    this.itemCount = 0;
+    this.itemWidthPx = 0;
+    this.columnGapPx = 0;
+    this.spaceBelow = 4;
+    this.columnCount = 3;
+    this.buttonBackgroundColour = 'white';
+    this.buttonIconColour = 'primary';
+  }
+  componentDidRender() {
+    var _a, _b;
+    this.sleeve = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.sleeve');
+    let children = new Array();
+    Array.from(this.host.children).forEach(item => {
+      if (!item.classList.contains('hidden')) {
+        children.push(item);
+      }
+    });
+    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.sleeve.style.width = (this.itemWidthPx + this.columnGapPx) * children.length + 'px';
+      children.forEach(el => {
+        el.style.width = this.itemWidthPx + 'px';
+        el.style.marginRight = this.columnGapPx + 'px';
+      });
+    }
+  }
+  /*
+   * Animates a transition to show the NEXT or PREVIOUS element in the carousel.
+   * Does nothing if there is no next or previous element.
+   */
+  showTab(direction) {
+    const newTab = this.currentTab + (direction === 'PREV' ? -1 : 1);
+    if (newTab < 0 || newTab > this.itemCount - this.columnCount) {
+      return;
+    }
+    const pos = 0 - (this.itemWidthPx + this.columnGapPx) * newTab;
+    this.sleeve.style.transitionDuration = '0.3s';
+    this.sleeve.style.transitionTimingFunction = 'ease-out';
+    this.sleeve.style.transform = 'translate3d(' + pos + 'px, 0, 0)';
+    this.currentTab = newTab;
+  }
+  clickPrevHandler() {
+    this.showTab('PREV');
+  }
+  clickNextHandler() {
+    this.showTab('NEXT');
+  }
+  render() {
+    return (h("div", { class: 'container column-count-' +
+        this.columnCount +
+        ' space-below-' +
+        this.spaceBelow +
+        ' 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" }))))));
+  }
+  get host() { return this; }
+  static get style() { return biggiveCarouselCss; }
+}, [1, "biggive-carousel", {
+    "spaceBelow": [2, "space-below"],
+    "columnCount": [2, "column-count"],
+    "buttonBackgroundColour": [1, "button-background-colour"],
+    "buttonIconColour": [1, "button-icon-colour"]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["biggive-carousel"];
+  components.forEach(tagName => { switch (tagName) {
+    case "biggive-carousel":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, BiggiveCarousel);
+      }
+      break;
+  } });
+}
+
+export { BiggiveCarousel as B, defineCustomElement as d };

package/dist/components/biggive-category-icon.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { F as FontAwesomeIconsService } from './fontawesome-icons.js';
 
-const biggiveCategoryIconCss = "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:#CBC8C8}.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}.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}.container{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;display:flex;justify-content:flex-start}.container .label{padding-left:15px;font-size:11px;line-height:14px;width:60px;margin-top:auto;margin-bottom:auto}.category-icon-item{width:40px;height:40px;border-radius:50%;text-align:center;transition:all ease-in-out 0.5s;display:inline-block;margin-right:10px;width:30px;height:30px}.category-icon-item.colour-scheme-primary{background-color:#2C089B}.category-icon-item.colour-scheme-primary svg{fill:#FFFFFF}.category-icon-item.colour-scheme-secondary{background-color:#2AF135}.category-icon-item.colour-scheme-secondary svg{fill:#000000}.category-icon-item.colour-scheme-tertiary{background-color:#FF7272}.category-icon-item.colour-scheme-tertiary svg{fill:#000000}.category-icon-item.colour-scheme-brand-1{background-color:#B30510}.category-icon-item.colour-scheme-brand-1 svg{fill:#000000}.category-icon-item.colour-scheme-brand-2{background-color:#6E0887}.category-icon-item.colour-scheme-brand-2 svg{fill:#000000}.category-icon-item.colour-scheme-brand-3{background-color:#50B400}.category-icon-item.colour-scheme-brand-3 svg{fill:#000000}.category-icon-item.colour-scheme-brand-4{background-color:#FFE500}.category-icon-item.colour-scheme-brand-4 svg{fill:#000000}.category-icon-item.colour-scheme-brand-5{background-color:#F07D00}.category-icon-item.colour-scheme-brand-5 svg{fill:#000000}.category-icon-item.colour-scheme-brand-6{background-color:#CBC8C8}.category-icon-item.colour-scheme-brand-6 svg{fill:#000000}.category-icon-item.colour-scheme-white{background-color:#FFFFFF}.category-icon-item.colour-scheme-white svg{fill:#000000}.category-icon-item.colour-scheme-black{background-color:#000000}.category-icon-item.colour-scheme-black svg{fill:#FFFFFF}.category-icon-item.colour-scheme-black{background-color:#D7D7D7}.category-icon-item.colour-scheme-black svg{fill:#D7D7D7}.category-icon-item.colour-scheme-black{background-color:#E8E8E8}.category-icon-item.colour-scheme-black svg{fill:#E8E8E8}.category-icon-item.colour-scheme-black{background-color:#8A8A8A}.category-icon-item.colour-scheme-black svg{fill:#8A8A8A}.category-icon-item.colour-scheme-black{background-color:#4A4A4A}.category-icon-item.colour-scheme-black svg{fill:#4A4A4A}.category-icon-item:hover{background-color:#FFFFFF}.category-icon-item:hover svg{fill:#000000}.category-icon-item a{display:grid;position:relative;padding:10px;box-sizing:border-box;height:100%}.category-icon-item a svg{width:100%;height:100%}.category-icon-item a{padding:6px}";
+const biggiveCategoryIconCss = "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}.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}.container{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;display:flex;justify-content:flex-start}.container .label{padding-left:15px;font-size:11px;line-height:14px;width:60px;margin-top:auto;margin-bottom:auto}.category-icon-item{width:40px;height:40px;border-radius:50%;text-align:center;transition:all ease-in-out 0.5s;display:inline-block;margin-right:10px;width:30px;height:30px}.category-icon-item.colour-scheme-primary{background-color:#2C089B}.category-icon-item.colour-scheme-primary svg{fill:#FFFFFF}.category-icon-item.colour-scheme-secondary{background-color:#2AF135}.category-icon-item.colour-scheme-secondary svg{fill:#000000}.category-icon-item.colour-scheme-tertiary{background-color:#FF7272}.category-icon-item.colour-scheme-tertiary svg{fill:#000000}.category-icon-item.colour-scheme-brand-1{background-color:#B30510}.category-icon-item.colour-scheme-brand-1 svg{fill:#000000}.category-icon-item.colour-scheme-brand-2{background-color:#6E0887}.category-icon-item.colour-scheme-brand-2 svg{fill:#000000}.category-icon-item.colour-scheme-brand-3{background-color:#50B400}.category-icon-item.colour-scheme-brand-3 svg{fill:#000000}.category-icon-item.colour-scheme-brand-4{background-color:#FFE500}.category-icon-item.colour-scheme-brand-4 svg{fill:#000000}.category-icon-item.colour-scheme-brand-5{background-color:#F07D00}.category-icon-item.colour-scheme-brand-5 svg{fill:#000000}.category-icon-item.colour-scheme-brand-6{background-color:#CBC8C8}.category-icon-item.colour-scheme-brand-6 svg{fill:#000000}.category-icon-item.colour-scheme-white{background-color:#FFFFFF}.category-icon-item.colour-scheme-white svg{fill:#000000}.category-icon-item.colour-scheme-black{background-color:#000000}.category-icon-item.colour-scheme-black svg{fill:#FFFFFF}.category-icon-item.colour-scheme-black{background-color:#D7D7D7}.category-icon-item.colour-scheme-black svg{fill:#D7D7D7}.category-icon-item.colour-scheme-black{background-color:#E8E8E8}.category-icon-item.colour-scheme-black svg{fill:#E8E8E8}.category-icon-item.colour-scheme-black{background-color:#8A8A8A}.category-icon-item.colour-scheme-black svg{fill:#8A8A8A}.category-icon-item.colour-scheme-black{background-color:#4A4A4A}.category-icon-item.colour-scheme-black svg{fill:#4A4A4A}.category-icon-item:hover{background-color:#FFFFFF}.category-icon-item:hover svg{fill:#000000}.category-icon-item a{display:grid;position:relative;padding:10px;box-sizing:border-box;height:100%}.category-icon-item a svg{width:100%;height:100%}.category-icon-item a{padding:6px}";
 
 const BiggiveCategoryIcon$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/biggive-filtered-carousel.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface BiggiveFilteredCarousel extends Components.BiggiveFilteredCarousel, HTMLElement {}
+export const BiggiveFilteredCarousel: {
+  prototype: BiggiveFilteredCarousel;
+  new (): BiggiveFilteredCarousel;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,99 @@
+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 BiggiveFilteredCarousel$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.spaceBelow = 4;
+    this.columnCount = 3;
+    this.buttonBackgroundColour = 'white';
+    this.buttonIconColour = 'primary';
+  }
+  componentDidLoad() {
+    var _a, _b;
+    const carousel = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('biggive-carousel');
+    const filterWrap = (_b = this.host.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.filters');
+    this.children = new Array();
+    Array.from(this.host.children).forEach(item => {
+      this.children.push(item);
+    });
+    let filters = [];
+    this.children.forEach(item => {
+      var _a, _b;
+      carousel.appendChild(item);
+      let itemFilters = [];
+      if (item.getAttribute('filters') != null) {
+        itemFilters = (_b = (_a = item.getAttribute('filters')) === null || _a === void 0 ? void 0 : _a.split('|')) !== null && _b !== void 0 ? _b : [];
+        filters.push(...itemFilters);
+      }
+      item.dataset['filters'] = JSON.stringify(itemFilters);
+    });
+    filters = [...new Set(filters)];
+    filters.forEach(filter => {
+      var button = document.createElement('span');
+      button.innerHTML = filter;
+      button.classList.add('button');
+      button.setAttribute('data-filter', filter);
+      button.addEventListener('click', e => {
+        var _a;
+        const button = e.target;
+        button.classList.toggle('active');
+        let appliedFilters = [];
+        let buttons = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.filters span.button.active');
+        buttons === null || buttons === void 0 ? void 0 : buttons.forEach(button => {
+          appliedFilters.push(button.getAttribute('data-filter'));
+        });
+        this.children.forEach(item => {
+          let itemFilters = JSON.parse(item.dataset['filters']);
+          if (appliedFilters.length == 0 || appliedFilters.filter(x => itemFilters.includes(x)).length > 0) {
+            item.classList.remove('hidden');
+          }
+          else {
+            item.classList.add('hidden');
+          }
+        });
+        carousel.setAttribute('space-below', '0');
+        carousel.setAttribute('space-below', '1');
+      });
+      filterWrap.appendChild(button);
+    });
+    carousel.setAttribute('space-below', '0');
+  }
+  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 })));
+  }
+  get host() { return this; }
+  static get style() { return biggiveFilteredCarouselCss; }
+}, [1, "biggive-filtered-carousel", {
+    "spaceBelow": [2, "space-below"],
+    "columnCount": [2, "column-count"],
+    "buttonBackgroundColour": [1, "button-background-colour"],
+    "buttonIconColour": [1, "button-icon-colour"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["biggive-filtered-carousel", "biggive-carousel"];
+  components.forEach(tagName => { switch (tagName) {
+    case "biggive-filtered-carousel":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, BiggiveFilteredCarousel$1);
+      }
+      break;
+    case "biggive-carousel":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const BiggiveFilteredCarousel = BiggiveFilteredCarousel$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BiggiveFilteredCarousel, defineCustomElement };

package/dist/components/biggive-generic-icon.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface BiggiveGenericIcon extends Components.BiggiveGenericIcon, HTMLElement {}
+export const BiggiveGenericIcon: {
+  prototype: BiggiveGenericIcon;
+  new (): BiggiveGenericIcon;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/biggive-generic-icon.js

@@ -0,0 +1,6 @@
+import { B as BiggiveGenericIcon$1, d as defineCustomElement$1 } from './biggive-generic-icon2.js';
+
+const BiggiveGenericIcon = BiggiveGenericIcon$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BiggiveGenericIcon, defineCustomElement };

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

@@ -0,0 +1,59 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { F as FontAwesomeIconsService } from './fontawesome-icons.js';
+
+const biggiveGenericIconCss = "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}.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}.generic-icon-item{width:40px;height:40px;border-radius:50%;text-align:center;transition:all ease-in-out 0.5s;display:inline-block;margin-right:10px}.generic-icon-item.colour-scheme-primary{background-color:#2C089B}.generic-icon-item.colour-scheme-primary svg{fill:#FFFFFF}.generic-icon-item.colour-scheme-secondary{background-color:#2AF135}.generic-icon-item.colour-scheme-secondary svg{fill:#000000}.generic-icon-item.colour-scheme-tertiary{background-color:#FF7272}.generic-icon-item.colour-scheme-tertiary svg{fill:#000000}.generic-icon-item.colour-scheme-brand-1{background-color:#B30510}.generic-icon-item.colour-scheme-brand-1 svg{fill:#000000}.generic-icon-item.colour-scheme-brand-2{background-color:#6E0887}.generic-icon-item.colour-scheme-brand-2 svg{fill:#000000}.generic-icon-item.colour-scheme-brand-3{background-color:#50B400}.generic-icon-item.colour-scheme-brand-3 svg{fill:#000000}.generic-icon-item.colour-scheme-brand-4{background-color:#FFE500}.generic-icon-item.colour-scheme-brand-4 svg{fill:#000000}.generic-icon-item.colour-scheme-brand-5{background-color:#F07D00}.generic-icon-item.colour-scheme-brand-5 svg{fill:#000000}.generic-icon-item.colour-scheme-brand-6{background-color:#CBC8C8}.generic-icon-item.colour-scheme-brand-6 svg{fill:#000000}.generic-icon-item.colour-scheme-white{background-color:#FFFFFF}.generic-icon-item.colour-scheme-white svg{fill:#000000}.generic-icon-item.colour-scheme-black{background-color:#000000}.generic-icon-item.colour-scheme-black svg{fill:#FFFFFF}.generic-icon-item.colour-scheme-black{background-color:#D7D7D7}.generic-icon-item.colour-scheme-black svg{fill:#D7D7D7}.generic-icon-item.colour-scheme-black{background-color:#E8E8E8}.generic-icon-item.colour-scheme-black svg{fill:#E8E8E8}.generic-icon-item.colour-scheme-black{background-color:#8A8A8A}.generic-icon-item.colour-scheme-black svg{fill:#8A8A8A}.generic-icon-item.colour-scheme-black{background-color:#4A4A4A}.generic-icon-item.colour-scheme-black svg{fill:#4A4A4A}.generic-icon-item:hover{background-color:#FFFFFF}.generic-icon-item:hover svg{fill:#000000}.generic-icon-item a{display:grid;position:relative;padding:10px;box-sizing:border-box;height:100%}.generic-icon-item a svg{width:100%;height:100%}@media screen and (max-width: 576px){.generic-icon-item{width:40px;height:40px;border-radius:50%;text-align:center;transition:all ease-in-out 0.5s;display:inline-block;margin-right:10px;width:30px;height:30px;margin:auto}.generic-icon-item.colour-scheme-primary{background-color:#2C089B}.generic-icon-item.colour-scheme-primary svg{fill:#FFFFFF}.generic-icon-item.colour-scheme-secondary{background-color:#2AF135}.generic-icon-item.colour-scheme-secondary svg{fill:#000000}.generic-icon-item.colour-scheme-tertiary{background-color:#FF7272}.generic-icon-item.colour-scheme-tertiary svg{fill:#000000}.generic-icon-item.colour-scheme-brand-1{background-color:#B30510}.generic-icon-item.colour-scheme-brand-1 svg{fill:#000000}.generic-icon-item.colour-scheme-brand-2{background-color:#6E0887}.generic-icon-item.colour-scheme-brand-2 svg{fill:#000000}.generic-icon-item.colour-scheme-brand-3{background-color:#50B400}.generic-icon-item.colour-scheme-brand-3 svg{fill:#000000}.generic-icon-item.colour-scheme-brand-4{background-color:#FFE500}.generic-icon-item.colour-scheme-brand-4 svg{fill:#000000}.generic-icon-item.colour-scheme-brand-5{background-color:#F07D00}.generic-icon-item.colour-scheme-brand-5 svg{fill:#000000}.generic-icon-item.colour-scheme-brand-6{background-color:#CBC8C8}.generic-icon-item.colour-scheme-brand-6 svg{fill:#000000}.generic-icon-item.colour-scheme-white{background-color:#FFFFFF}.generic-icon-item.colour-scheme-white svg{fill:#000000}.generic-icon-item.colour-scheme-black{background-color:#000000}.generic-icon-item.colour-scheme-black svg{fill:#FFFFFF}.generic-icon-item.colour-scheme-black{background-color:#D7D7D7}.generic-icon-item.colour-scheme-black svg{fill:#D7D7D7}.generic-icon-item.colour-scheme-black{background-color:#E8E8E8}.generic-icon-item.colour-scheme-black svg{fill:#E8E8E8}.generic-icon-item.colour-scheme-black{background-color:#8A8A8A}.generic-icon-item.colour-scheme-black svg{fill:#8A8A8A}.generic-icon-item.colour-scheme-black{background-color:#4A4A4A}.generic-icon-item.colour-scheme-black svg{fill:#4A4A4A}.generic-icon-item:hover{background-color:#FFFFFF}.generic-icon-item:hover svg{fill:#000000}.generic-icon-item a{display:grid;position:relative;padding:10px;box-sizing:border-box;height:100%}.generic-icon-item a svg{width:100%;height:100%}.generic-icon-item a{padding:6px}.generic-icon-item a{margin:auto}}.CaretRight{height:10px;width:10px;margin-right:0px}.CaretRight a{padding:0px}.MenuClose a svg{height:12px;width:12px}";
+
+const BiggiveGenericIcon = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.backgroundColour = 'primary';
+    this.iconColour = 'white';
+    this.iconGroup = undefined;
+    this.icon = undefined;
+    this.url = undefined;
+  }
+  getIcon() {
+    let icon;
+    if (this.iconGroup == 'beneficiary') {
+      icon = FontAwesomeIconsService.getBeneficiaryIcon(this.icon);
+    }
+    else if (this.iconGroup == 'misc') {
+      icon = FontAwesomeIconsService.getMiscIcon(this.icon);
+    }
+    else if (this.iconGroup == 'social') {
+      icon = FontAwesomeIconsService.getSocialIcon(this.icon);
+    }
+    else if (this.iconGroup == 'category') {
+      icon = FontAwesomeIconsService.getCategoryIcon(this.icon);
+    }
+    return icon;
+  }
+  render() {
+    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)));
+  }
+  static get style() { return biggiveGenericIconCss; }
+}, [0, "biggive-generic-icon", {
+    "backgroundColour": [1, "background-colour"],
+    "iconColour": [1, "icon-colour"],
+    "iconGroup": [1, "icon-group"],
+    "icon": [1],
+    "url": [1]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["biggive-generic-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "biggive-generic-icon":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, BiggiveGenericIcon);
+      }
+      break;
+  } });
+}
+
+export { BiggiveGenericIcon as B, defineCustomElement as d };

package/dist/components/biggive-grid.js

@@ -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-4 ::slotted(*){width:25%;display:flex;flex-direction:column}.column-count-3 ::slotted(*){width:33.3333333333%;display:flex;flex-direction:column}.column-count-2 ::slotted(*){width:50%;display:flex;flex-direction:column}@media screen and (max-width: 768px){.column-count-2 ::slotted(*),.column-count-3 ::slotted(*),.column-count-4 ::slotted(*){width:calc(50% - 15px)}}@media screen and (max-width: 576px){.column-count-2 ::slotted(*),.column-count-3 ::slotted(*),.column-count-4 ::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)}@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() {
@@ -10,15 +10,17 @@ const BiggiveGrid$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.spaceBelow = 4;
     this.columnCount = 3;
     this.spaceBetween = false;
+    this.columnGap = 0;
   }
   render() {
-    return (h("div", { class: 'grid column-count-' + this.columnCount + ' space-below-' + this.spaceBelow + (this.spaceBetween ? ' space-between' : '') }, h("slot", null)));
+    return (h("div", { class: 'grid column-count-' + this.columnCount + ' space-below-' + this.spaceBelow + ' column-gap-' + this.columnGap + (this.spaceBetween ? ' space-between' : '') }, h("slot", null)));
   }
   static get style() { return biggiveGridCss; }
 }, [1, "biggive-grid", {
     "spaceBelow": [2, "space-below"],
     "columnCount": [2, "column-count"],
-    "spaceBetween": [4, "space-between"]
+    "spaceBetween": [4, "space-between"],
+    "columnGap": [2, "column-gap"]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {

package/dist/components/biggive-icon-button.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface BiggiveIconButton extends Components.BiggiveIconButton, HTMLElement {}
+export const BiggiveIconButton: {
+  prototype: BiggiveIconButton;
+  new (): BiggiveIconButton;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/biggive-icon-button.js

@@ -0,0 +1,89 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './biggive-generic-icon2.js';
+
+const biggiveIconButtonCss = "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}.container{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px}.container a{display:block;text-decoration:none}.container a.full-width-true{display:block}.container.centered-true{text-align:center}.container.shadow-true{filter:drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.25))}.container.rounded-true{border-radius:10px}.container.background-padding-1{padding:5px}.container.background-padding-2{padding:10px}.container.background-padding-3{padding:15px}.container.background-padding-4{padding:30px}.container.background-padding-5{padding:45px}.container.background-padding-6{padding:60px}.container .sleeve{display:flex}.container .sleeve .text-wrap{margin:auto 0;text-decoration:none}.container .sleeve .text-wrap.text-padding-1{padding:0 5px}.container .sleeve .text-wrap.text-padding-2{padding:0 10px}.container .sleeve .text-wrap.text-padding-3{padding:0 15px}.container .sleeve .text-wrap.text-padding-4{padding:0 30px}.container .sleeve .text-wrap.text-padding-5{padding:0 45px}.container .sleeve .text-wrap.text-padding-6{padding:0 60px}.container .sleeve .arrow-wrap{margin:auto 0 auto auto}.container .sleeve .arrow-wrap.arrow-colour-primary .arrow-wrap svg path{stroke:#2C089B}.container .sleeve .arrow-wrap.arrow-colour-secondary .arrow-wrap svg path{stroke:#2AF135}.container .sleeve .arrow-wrap.arrow-colour-tertiary .arrow-wrap svg path{stroke:#FF7272}.container .sleeve .arrow-wrap.arrow-colour-brand-1 .arrow-wrap svg path{stroke:#B30510}.container .sleeve .arrow-wrap.arrow-colour-brand-2 .arrow-wrap svg path{stroke:#6E0887}.container .sleeve .arrow-wrap.arrow-colour-brand-3 .arrow-wrap svg path{stroke:#50B400}.container .sleeve .arrow-wrap.arrow-colour-brand-4 .arrow-wrap svg path{stroke:#FFE500}.container .sleeve .arrow-wrap.arrow-colour-brand-5 .arrow-wrap svg path{stroke:#F07D00}.container .sleeve .arrow-wrap.arrow-colour-brand-6 .arrow-wrap svg path{stroke:#62CFC9}.container .sleeve .arrow-wrap.arrow-colour-white .arrow-wrap svg path{stroke:#FFFFFF}.container .sleeve .arrow-wrap.arrow-colour-black .arrow-wrap svg path{stroke:#000000}.container .sleeve .arrow-wrap.arrow-colour-grey-extra-light .arrow-wrap svg path{stroke:#D7D7D7}.container .sleeve .arrow-wrap.arrow-colour-grey-light .arrow-wrap svg path{stroke:#E8E8E8}.container .sleeve .arrow-wrap.arrow-colour-grey-medium .arrow-wrap svg path{stroke:#8A8A8A}.container .sleeve .arrow-wrap.arrow-colour-grey-dark .arrow-wrap svg path{stroke:#4A4A4A}.container .icon-wrap{background-position:center center;background-size:cover}.container .icon-wrap.circle-true{border-radius:50%;overflow:hidden}.container .icon-wrap.size-small{width:30px;height:30px}.container .icon-wrap.size-medium{width:45px;height:45px}.container .icon-wrap.size-large{width:60px;height:60px}.container .icon-wrap.size-x-large{width:75px;height:75px}.container .icon-wrap.size-xx-large{width:90px;height:90px}.container .icon-wrap .misc-icon-item{width:100%;height:100%}.container .icon-wrap .misc-icon-item a{padding:20%}.container.arrow-colour-primary .arrow-wrap svg path{stroke:#2C089B}.container.arrow-colour-secondary .arrow-wrap svg path{stroke:#2AF135}.container.arrow-colour-tertiary .arrow-wrap svg path{stroke:#FF7272}.container.arrow-colour-brand-1 .arrow-wrap svg path{stroke:#B30510}.container.arrow-colour-brand-2 .arrow-wrap svg path{stroke:#6E0887}.container.arrow-colour-brand-3 .arrow-wrap svg path{stroke:#50B400}.container.arrow-colour-brand-4 .arrow-wrap svg path{stroke:#FFE500}.container.arrow-colour-brand-5 .arrow-wrap svg path{stroke:#F07D00}.container.arrow-colour-brand-6 .arrow-wrap svg path{stroke:#62CFC9}.container.arrow-colour-white .arrow-wrap svg path{stroke:#FFFFFF}.container.arrow-colour-black .arrow-wrap svg path{stroke:#000000}.container.arrow-colour-grey-extra-light .arrow-wrap svg path{stroke:#D7D7D7}.container.arrow-colour-grey-light .arrow-wrap svg path{stroke:#E8E8E8}.container.arrow-colour-grey-medium .arrow-wrap svg path{stroke:#8A8A8A}.container.arrow-colour-grey-dark .arrow-wrap svg path{stroke:#4A4A4A}";
+
+const BiggiveIconButton$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.doButtonClick = createEvent(this, "doButtonClick", 7);
+    this.handleButtonClick = (event) => {
+      this.doButtonClick.emit({ event: event, url: event.target.parentElement.href });
+    };
+    this.spaceBelow = 1;
+    this.backgroundColour = 'white';
+    this.backgroundPadding = 0;
+    this.text = undefined;
+    this.textColour = 'black';
+    this.iconGroup = undefined;
+    this.icon = undefined;
+    this.url = undefined;
+    this.openInNewTab = false;
+    this.size = 'medium';
+    this.arrow = false;
+    this.arrowColour = 'black';
+    this.circle = false;
+    this.shadow = false;
+    this.centered = false;
+    this.rounded = false;
+    this.buttonId = undefined;
+  }
+  render() {
+    return (h("div", { class: 'container space-below-' +
+        this.spaceBelow +
+        ' background-colour-' +
+        this.backgroundColour +
+        ' background-padding-' +
+        this.backgroundPadding +
+        ' centered-' +
+        this.centered +
+        ' rounded-' +
+        this.rounded +
+        ' shadow-' +
+        this.shadow }, h("a", { href: this.url, target: this.openInNewTab ? '_blank' : '_self', id: this.buttonId }, h("div", { class: "sleeve", onClick: this.handleButtonClick }, h("div", { class: 'icon-wrap ' + ' size-' + this.size + ' circle-' + this.circle.toString() }, h("biggive-generic-icon", { iconGroup: this.iconGroup, icon: this.icon })), this.text != '' ? h("div", { class: 'text-wrap text-colour-' + this.textColour + ' text-padding-' + this.backgroundPadding }, this.text) : null, this.arrow ? (h("div", { class: 'arrow-wrap arrow-colour-' + this.arrowColour }, h("svg", { width: "8", height: "12", viewBox: "0 0 8 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M0.76912 1.0791L5.73828 6.04826L0.769121 11.0174", stroke: "black", "stroke-width": "2" })))) : null))));
+  }
+  static get style() { return biggiveIconButtonCss; }
+}, [1, "biggive-icon-button", {
+    "spaceBelow": [2, "space-below"],
+    "backgroundColour": [1, "background-colour"],
+    "backgroundPadding": [2, "background-padding"],
+    "text": [1],
+    "textColour": [1, "text-colour"],
+    "iconGroup": [1, "icon-group"],
+    "icon": [1],
+    "url": [1],
+    "openInNewTab": [4, "open-in-new-tab"],
+    "size": [1],
+    "arrow": [4],
+    "arrowColour": [1, "arrow-colour"],
+    "circle": [4],
+    "shadow": [4],
+    "centered": [4],
+    "rounded": [4],
+    "buttonId": [1, "button-id"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["biggive-icon-button", "biggive-generic-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "biggive-icon-button":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, BiggiveIconButton$1);
+      }
+      break;
+    case "biggive-generic-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const BiggiveIconButton = BiggiveIconButton$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BiggiveIconButton, defineCustomElement };

package/dist/components/biggive-image-button.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface BiggiveImageButton extends Components.BiggiveImageButton, HTMLElement {}
+export const BiggiveImageButton: {
+  prototype: BiggiveImageButton;
+  new (): BiggiveImageButton;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/biggive-image-button.js

@@ -0,0 +1,83 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+
+const biggiveImageButtonCss = "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}.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}.container{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px}.container a{display:block;text-decoration:none}.container a.full-width-true{display:block}.container.centered-true{text-align:center}.container.shadow-true{filter:drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.25))}.container.rounded-true{border-radius:10px}.container.background-padding-1{padding:5px}.container.background-padding-2{padding:10px}.container.background-padding-3{padding:15px}.container.background-padding-4{padding:30px}.container.background-padding-5{padding:45px}.container.background-padding-6{padding:60px}.container .sleeve{display:flex}.container .sleeve .text-wrap{margin:auto 0;text-decoration:none}.container .sleeve .text-wrap.text-padding-1{padding:0 5px}.container .sleeve .text-wrap.text-padding-2{padding:0 10px}.container .sleeve .text-wrap.text-padding-3{padding:0 15px}.container .sleeve .text-wrap.text-padding-4{padding:0 30px}.container .sleeve .text-wrap.text-padding-5{padding:0 45px}.container .sleeve .text-wrap.text-padding-6{padding:0 60px}.container .sleeve .arrow-wrap{margin:auto 0 auto auto}.container .sleeve .arrow-wrap.arrow-colour-primary .arrow-wrap svg path{stroke:#2C089B}.container .sleeve .arrow-wrap.arrow-colour-secondary .arrow-wrap svg path{stroke:#2AF135}.container .sleeve .arrow-wrap.arrow-colour-tertiary .arrow-wrap svg path{stroke:#FF7272}.container .sleeve .arrow-wrap.arrow-colour-brand-1 .arrow-wrap svg path{stroke:#B30510}.container .sleeve .arrow-wrap.arrow-colour-brand-2 .arrow-wrap svg path{stroke:#6E0887}.container .sleeve .arrow-wrap.arrow-colour-brand-3 .arrow-wrap svg path{stroke:#50B400}.container .sleeve .arrow-wrap.arrow-colour-brand-4 .arrow-wrap svg path{stroke:#FFE500}.container .sleeve .arrow-wrap.arrow-colour-brand-5 .arrow-wrap svg path{stroke:#F07D00}.container .sleeve .arrow-wrap.arrow-colour-brand-6 .arrow-wrap svg path{stroke:#62CFC9}.container .sleeve .arrow-wrap.arrow-colour-white .arrow-wrap svg path{stroke:#FFFFFF}.container .sleeve .arrow-wrap.arrow-colour-black .arrow-wrap svg path{stroke:#000000}.container .sleeve .arrow-wrap.arrow-colour-grey-extra-light .arrow-wrap svg path{stroke:#D7D7D7}.container .sleeve .arrow-wrap.arrow-colour-grey-light .arrow-wrap svg path{stroke:#E8E8E8}.container .sleeve .arrow-wrap.arrow-colour-grey-medium .arrow-wrap svg path{stroke:#8A8A8A}.container .sleeve .arrow-wrap.arrow-colour-grey-dark .arrow-wrap svg path{stroke:#4A4A4A}.container .image-wrap{background-position:center center;background-size:cover}.container .image-wrap.image-style-contain{background-size:contain}.container .image-wrap.circle-true{border-radius:50%;overflow:hidden}.container .image-wrap.size-small{width:30px;height:30px}.container .image-wrap.size-medium{width:45px;height:45px}.container .image-wrap.size-large{width:60px;height:60px}.container .image-wrap.size-x-large{width:75px;height:75px}.container .image-wrap.size-xx-large{width:90px;height:90px}";
+
+const BiggiveImageButton$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.doButtonClick = createEvent(this, "doButtonClick", 7);
+    this.handleButtonClick = (event) => {
+      this.doButtonClick.emit({ event: event, url: event.target.parentElement.href });
+    };
+    this.spaceBelow = 1;
+    this.backgroundColour = 'white';
+    this.backgroundPadding = 0;
+    this.text = undefined;
+    this.textColour = 'black';
+    this.imageUrl = undefined;
+    this.imageStyle = 'cover';
+    this.url = undefined;
+    this.openInNewTab = false;
+    this.size = 'medium';
+    this.arrow = false;
+    this.arrowColour = 'black';
+    this.circle = false;
+    this.shadow = false;
+    this.centered = false;
+    this.rounded = false;
+    this.buttonId = undefined;
+  }
+  render() {
+    return (h("div", { class: 'container space-below-' +
+        this.spaceBelow +
+        ' background-colour-' +
+        this.backgroundColour +
+        ' background-padding-' +
+        this.backgroundPadding +
+        ' centered-' +
+        this.centered +
+        ' rounded-' +
+        this.rounded +
+        ' shadow-' +
+        this.shadow }, h("a", { href: this.url, target: this.openInNewTab ? '_blank' : '_self', id: this.buttonId }, h("div", { class: "sleeve", onClick: this.handleButtonClick }, h("div", { class: 'image-wrap ' + ' image-style-' + this.imageStyle + ' size-' + this.size + ' circle-' + this.circle.toString(), style: { backgroundImage: 'url(' + this.imageUrl + ')' } }), this.text != '' ? h("div", { class: 'text-wrap text-colour-' + this.textColour + ' text-padding-' + this.backgroundPadding }, this.text) : null, this.arrow ? (h("div", { class: 'arrow-wrap arrow-colour-' + this.arrowColour }, h("svg", { width: "8", height: "12", viewBox: "0 0 8 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M0.76912 1.0791L5.73828 6.04826L0.769121 11.0174", stroke: "black", "stroke-width": "2" })))) : null))));
+  }
+  static get style() { return biggiveImageButtonCss; }
+}, [1, "biggive-image-button", {
+    "spaceBelow": [2, "space-below"],
+    "backgroundColour": [1, "background-colour"],
+    "backgroundPadding": [2, "background-padding"],
+    "text": [1],
+    "textColour": [1, "text-colour"],
+    "imageUrl": [1, "image-url"],
+    "imageStyle": [1, "image-style"],
+    "url": [1],
+    "openInNewTab": [4, "open-in-new-tab"],
+    "size": [1],
+    "arrow": [4],
+    "arrowColour": [1, "arrow-colour"],
+    "circle": [4],
+    "shadow": [4],
+    "centered": [4],
+    "rounded": [4],
+    "buttonId": [1, "button-id"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["biggive-image-button"];
+  components.forEach(tagName => { switch (tagName) {
+    case "biggive-image-button":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, BiggiveImageButton$1);
+      }
+      break;
+  } });
+}
+
+const BiggiveImageButton = BiggiveImageButton$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BiggiveImageButton, defineCustomElement };

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

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { F as FontAwesomeIconsService } from './fontawesome-icons.js';
 
-const biggiveMiscIconCss = "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:#CBC8C8}.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}.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}.misc-icon-item{width:40px;height:40px;border-radius:50%;text-align:center;transition:all ease-in-out 0.5s;display:inline-block;margin-right:10px}.misc-icon-item.colour-scheme-primary{background-color:#2C089B}.misc-icon-item.colour-scheme-primary svg{fill:#FFFFFF}.misc-icon-item.colour-scheme-secondary{background-color:#2AF135}.misc-icon-item.colour-scheme-secondary svg{fill:#000000}.misc-icon-item.colour-scheme-tertiary{background-color:#FF7272}.misc-icon-item.colour-scheme-tertiary svg{fill:#000000}.misc-icon-item.colour-scheme-brand-1{background-color:#B30510}.misc-icon-item.colour-scheme-brand-1 svg{fill:#000000}.misc-icon-item.colour-scheme-brand-2{background-color:#6E0887}.misc-icon-item.colour-scheme-brand-2 svg{fill:#000000}.misc-icon-item.colour-scheme-brand-3{background-color:#50B400}.misc-icon-item.colour-scheme-brand-3 svg{fill:#000000}.misc-icon-item.colour-scheme-brand-4{background-color:#FFE500}.misc-icon-item.colour-scheme-brand-4 svg{fill:#000000}.misc-icon-item.colour-scheme-brand-5{background-color:#F07D00}.misc-icon-item.colour-scheme-brand-5 svg{fill:#000000}.misc-icon-item.colour-scheme-brand-6{background-color:#CBC8C8}.misc-icon-item.colour-scheme-brand-6 svg{fill:#000000}.misc-icon-item.colour-scheme-white{background-color:#FFFFFF}.misc-icon-item.colour-scheme-white svg{fill:#000000}.misc-icon-item.colour-scheme-black{background-color:#000000}.misc-icon-item.colour-scheme-black svg{fill:#FFFFFF}.misc-icon-item.colour-scheme-black{background-color:#D7D7D7}.misc-icon-item.colour-scheme-black svg{fill:#D7D7D7}.misc-icon-item.colour-scheme-black{background-color:#E8E8E8}.misc-icon-item.colour-scheme-black svg{fill:#E8E8E8}.misc-icon-item.colour-scheme-black{background-color:#8A8A8A}.misc-icon-item.colour-scheme-black svg{fill:#8A8A8A}.misc-icon-item.colour-scheme-black{background-color:#4A4A4A}.misc-icon-item.colour-scheme-black svg{fill:#4A4A4A}.misc-icon-item:hover{background-color:#FFFFFF}.misc-icon-item:hover svg{fill:#000000}.misc-icon-item a{display:grid;position:relative;padding:10px;box-sizing:border-box;height:100%}.misc-icon-item a svg{width:100%;height:100%}@media screen and (max-width: 576px){.misc-icon-item{width:40px;height:40px;border-radius:50%;text-align:center;transition:all ease-in-out 0.5s;display:inline-block;margin-right:10px;width:30px;height:30px;margin:auto}.misc-icon-item.colour-scheme-primary{background-color:#2C089B}.misc-icon-item.colour-scheme-primary svg{fill:#FFFFFF}.misc-icon-item.colour-scheme-secondary{background-color:#2AF135}.misc-icon-item.colour-scheme-secondary svg{fill:#000000}.misc-icon-item.colour-scheme-tertiary{background-color:#FF7272}.misc-icon-item.colour-scheme-tertiary svg{fill:#000000}.misc-icon-item.colour-scheme-brand-1{background-color:#B30510}.misc-icon-item.colour-scheme-brand-1 svg{fill:#000000}.misc-icon-item.colour-scheme-brand-2{background-color:#6E0887}.misc-icon-item.colour-scheme-brand-2 svg{fill:#000000}.misc-icon-item.colour-scheme-brand-3{background-color:#50B400}.misc-icon-item.colour-scheme-brand-3 svg{fill:#000000}.misc-icon-item.colour-scheme-brand-4{background-color:#FFE500}.misc-icon-item.colour-scheme-brand-4 svg{fill:#000000}.misc-icon-item.colour-scheme-brand-5{background-color:#F07D00}.misc-icon-item.colour-scheme-brand-5 svg{fill:#000000}.misc-icon-item.colour-scheme-brand-6{background-color:#CBC8C8}.misc-icon-item.colour-scheme-brand-6 svg{fill:#000000}.misc-icon-item.colour-scheme-white{background-color:#FFFFFF}.misc-icon-item.colour-scheme-white svg{fill:#000000}.misc-icon-item.colour-scheme-black{background-color:#000000}.misc-icon-item.colour-scheme-black svg{fill:#FFFFFF}.misc-icon-item.colour-scheme-black{background-color:#D7D7D7}.misc-icon-item.colour-scheme-black svg{fill:#D7D7D7}.misc-icon-item.colour-scheme-black{background-color:#E8E8E8}.misc-icon-item.colour-scheme-black svg{fill:#E8E8E8}.misc-icon-item.colour-scheme-black{background-color:#8A8A8A}.misc-icon-item.colour-scheme-black svg{fill:#8A8A8A}.misc-icon-item.colour-scheme-black{background-color:#4A4A4A}.misc-icon-item.colour-scheme-black svg{fill:#4A4A4A}.misc-icon-item:hover{background-color:#FFFFFF}.misc-icon-item:hover svg{fill:#000000}.misc-icon-item a{display:grid;position:relative;padding:10px;box-sizing:border-box;height:100%}.misc-icon-item a svg{width:100%;height:100%}.misc-icon-item a{padding:6px}.misc-icon-item a{margin:auto}}.CaretRight{height:10px;width:10px;margin-right:0px}.CaretRight a{padding:0px}.MenuClose a svg{height:12px;width:12px}";
+const biggiveMiscIconCss = "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}.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}.misc-icon-item{width:40px;height:40px;border-radius:50%;text-align:center;transition:all ease-in-out 0.5s;display:inline-block;margin-right:10px}.misc-icon-item.colour-scheme-primary{background-color:#2C089B}.misc-icon-item.colour-scheme-primary svg{fill:#FFFFFF}.misc-icon-item.colour-scheme-secondary{background-color:#2AF135}.misc-icon-item.colour-scheme-secondary svg{fill:#000000}.misc-icon-item.colour-scheme-tertiary{background-color:#FF7272}.misc-icon-item.colour-scheme-tertiary svg{fill:#000000}.misc-icon-item.colour-scheme-brand-1{background-color:#B30510}.misc-icon-item.colour-scheme-brand-1 svg{fill:#000000}.misc-icon-item.colour-scheme-brand-2{background-color:#6E0887}.misc-icon-item.colour-scheme-brand-2 svg{fill:#000000}.misc-icon-item.colour-scheme-brand-3{background-color:#50B400}.misc-icon-item.colour-scheme-brand-3 svg{fill:#000000}.misc-icon-item.colour-scheme-brand-4{background-color:#FFE500}.misc-icon-item.colour-scheme-brand-4 svg{fill:#000000}.misc-icon-item.colour-scheme-brand-5{background-color:#F07D00}.misc-icon-item.colour-scheme-brand-5 svg{fill:#000000}.misc-icon-item.colour-scheme-brand-6{background-color:#CBC8C8}.misc-icon-item.colour-scheme-brand-6 svg{fill:#000000}.misc-icon-item.colour-scheme-white{background-color:#FFFFFF}.misc-icon-item.colour-scheme-white svg{fill:#000000}.misc-icon-item.colour-scheme-black{background-color:#000000}.misc-icon-item.colour-scheme-black svg{fill:#FFFFFF}.misc-icon-item.colour-scheme-black{background-color:#D7D7D7}.misc-icon-item.colour-scheme-black svg{fill:#D7D7D7}.misc-icon-item.colour-scheme-black{background-color:#E8E8E8}.misc-icon-item.colour-scheme-black svg{fill:#E8E8E8}.misc-icon-item.colour-scheme-black{background-color:#8A8A8A}.misc-icon-item.colour-scheme-black svg{fill:#8A8A8A}.misc-icon-item.colour-scheme-black{background-color:#4A4A4A}.misc-icon-item.colour-scheme-black svg{fill:#4A4A4A}.misc-icon-item:hover{background-color:#FFFFFF}.misc-icon-item:hover svg{fill:#000000}.misc-icon-item a{display:grid;position:relative;padding:10px;box-sizing:border-box;height:100%}.misc-icon-item a svg{width:100%;height:100%}@media screen and (max-width: 576px){.misc-icon-item{width:40px;height:40px;border-radius:50%;text-align:center;transition:all ease-in-out 0.5s;display:inline-block;margin-right:10px;width:30px;height:30px;margin:auto}.misc-icon-item.colour-scheme-primary{background-color:#2C089B}.misc-icon-item.colour-scheme-primary svg{fill:#FFFFFF}.misc-icon-item.colour-scheme-secondary{background-color:#2AF135}.misc-icon-item.colour-scheme-secondary svg{fill:#000000}.misc-icon-item.colour-scheme-tertiary{background-color:#FF7272}.misc-icon-item.colour-scheme-tertiary svg{fill:#000000}.misc-icon-item.colour-scheme-brand-1{background-color:#B30510}.misc-icon-item.colour-scheme-brand-1 svg{fill:#000000}.misc-icon-item.colour-scheme-brand-2{background-color:#6E0887}.misc-icon-item.colour-scheme-brand-2 svg{fill:#000000}.misc-icon-item.colour-scheme-brand-3{background-color:#50B400}.misc-icon-item.colour-scheme-brand-3 svg{fill:#000000}.misc-icon-item.colour-scheme-brand-4{background-color:#FFE500}.misc-icon-item.colour-scheme-brand-4 svg{fill:#000000}.misc-icon-item.colour-scheme-brand-5{background-color:#F07D00}.misc-icon-item.colour-scheme-brand-5 svg{fill:#000000}.misc-icon-item.colour-scheme-brand-6{background-color:#CBC8C8}.misc-icon-item.colour-scheme-brand-6 svg{fill:#000000}.misc-icon-item.colour-scheme-white{background-color:#FFFFFF}.misc-icon-item.colour-scheme-white svg{fill:#000000}.misc-icon-item.colour-scheme-black{background-color:#000000}.misc-icon-item.colour-scheme-black svg{fill:#FFFFFF}.misc-icon-item.colour-scheme-black{background-color:#D7D7D7}.misc-icon-item.colour-scheme-black svg{fill:#D7D7D7}.misc-icon-item.colour-scheme-black{background-color:#E8E8E8}.misc-icon-item.colour-scheme-black svg{fill:#E8E8E8}.misc-icon-item.colour-scheme-black{background-color:#8A8A8A}.misc-icon-item.colour-scheme-black svg{fill:#8A8A8A}.misc-icon-item.colour-scheme-black{background-color:#4A4A4A}.misc-icon-item.colour-scheme-black svg{fill:#4A4A4A}.misc-icon-item:hover{background-color:#FFFFFF}.misc-icon-item:hover svg{fill:#000000}.misc-icon-item a{display:grid;position:relative;padding:10px;box-sizing:border-box;height:100%}.misc-icon-item a svg{width:100%;height:100%}.misc-icon-item a{padding:6px}.misc-icon-item a{margin:auto}}.CaretRight{height:10px;width:10px;margin-right:0px}.CaretRight a{padding:0px}.MenuClose a svg{height:12px;width:12px}";
 
 const BiggiveMiscIcon = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {