@biggive/components 202303201542.0.0 → 202303301223.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-footer.js

@@ -1,5 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, getAssetPath } from '@stencil/core/internal/client';
-import { d as defineCustomElement$2 } from './biggive-button2.js';
+import { m as makeURL } from './helper-methods.js';
+import { d as defineCustomElement$3 } from './biggive-button2.js';
+import { d as defineCustomElement$2 } from './biggive-social-icon2.js';
 
 const biggiveFooterCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}:host{display:contents}.footer{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;color:#FFFFFF}nav{width:calc(33.3% - 20px);margin:0;padding:0}nav .heading{font-size:17px;line-height:24px;font-weight:bold;border-bottom:1px solid #FFFFFF;padding-bottom:10px;margin-bottom:10px}nav ul{margin:0;padding:0}nav ul li{margin:0;padding:0;list-style-type:none;margin-top:15px}nav ul li a{color:#FFFFFF;text-decoration:none}nav ul li a[class^=icon-],nav ul li a[class*=icon-]{padding-left:20px;background-repeat:no-repeat;background-size:auto 10px;background-position:left center}nav ul li a.icon-green{background-image:url(/assets/images/triangles-combined-green-match-white.svg)}nav ul li a.icon-children{background-image:url(/assets/images/triangles-combined-children-white.svg)}nav ul li a.icon-christmas{background-image:url(/assets/images/triangles-combined-christmas-challenge-white.svg)}nav ul li a.icon-green-match{background-image:url(/assets/images/triangles-combined-green-match-white.svg)}nav ul li a.icon-women-girls{background-image:url(/assets/images/triangles-combined-women-girls-white.svg)}nav ul li a.icon-mental-health{background-image:url(/assets/images/triangles-combined-mental-health-white.svg)}nav ul li a.icon-anchor-match{background-image:url(/assets/images/triangles-combined-anchor-white.svg)}nav ul li a.icon-emergency{background-image:url(/assets/images/triangles-combined-emergency-white.svg)}.row-top{background-image:url(/assets/images/biggive-triangle-green.svg);background-repeat:no-repeat;background-size:auto 75px;background-position:60px 30px;background-color:#2C089B;padding:100px 60px 60px 60px;display:flex;flex-wrap:wrap;justify-content:space-between}.row-top .button-wrap{margin-top:60px;width:100%;display:flex;flex-wrap:wrap;justify-content:space-between}footer .row-bottom{background-color:#000000;padding:60px 60px 15px 60px;border-top:1px solid #FFFFFF}footer .row-bottom .fr-logo{width:135px}footer .row-bottom .postscript-wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between}@media screen and (max-width: 768px){footer .row-bottom .postscript-wrap{flex-direction:column}}footer .row-bottom .nav.nav-postscript{text-align:right;flex-grow:1}@media screen and (max-width: 768px){footer .row-bottom .nav.nav-postscript{text-align:center}}footer .row-bottom .nav-postscript li{display:inline-block;margin-left:1rem}footer .row-bottom .nav-postscript li:first-child{margin-left:0}@media screen and (max-width: 768px){footer .row-bottom .nav-postscript li{display:block;width:100%;margin-left:0}}footer .row-bottom .social-icon-wrap{border-top:1px solid #FFFFFF;padding-top:30px;margin-top:30px;display:flex;align-items:center;justify-content:center;margin-bottom:30px}footer .row-bottom .social-icon-wrap .social-icon-item{margin:0 10px}footer .row-bottom p{text-align:center}@media screen and (max-width: 768px){.row-top{padding:15px}}@media screen and (max-width: 768px){nav{width:100%;margin-right:0;margin-bottom:30px}.row-top{background-size:auto 50px;padding-top:80px;padding-left:15px;background-position:15px 30px}.row-top .button-wrap *{width:100% !important}}";
 
@@ -9,6 +11,9 @@ const BiggiveFooter$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     this.__registerHost();
     this.__attachShadow();
     this.headingLevel = 5;
+    this.blogUrlPrefix = undefined;
+    this.experienceUrlPrefix = undefined;
+    this.usePresetFooter = false;
   }
   appendMenu(menuName) {
     var node = this.host.querySelector(`[slot="${menuName}"]`);
@@ -17,25 +22,36 @@ const BiggiveFooter$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     }
   }
   componentDidRender() {
-    this.appendMenu('nav-primary');
-    this.appendMenu('nav-secondary');
-    this.appendMenu('nav-tertiary');
-    this.appendMenu('nav-postscript');
+    if (!this.usePresetFooter) {
+      this.appendMenu('nav-primary');
+      this.appendMenu('nav-secondary');
+      this.appendMenu('nav-tertiary');
+      this.appendMenu('nav-postscript');
+    }
   }
   render() {
     const HeadingTag = `h${this.headingLevel}`;
-    return (h("footer", { class: "footer" }, h("div", { class: "row row-top" }, h("nav", { class: "nav nav-primary", "aria-labelledby": "footer-primary-heading" }, h(HeadingTag, { class: "heading", id: "footer-primary-heading" }, h("slot", { name: "nav-primary-title" }))), h("nav", { class: "nav nav-secondary", "aria-labelledby": "footer-secondary-heading-heading" }, h(HeadingTag, { class: "heading", id: "footer-secondary-heading" }, h("slot", { name: "nav-secondary-title" }))), h("nav", { class: "nav nav-tertiary", "aria-labelledby": "footer-tertiary-heading" }, h(HeadingTag, { class: "heading", id: "footer-tertiary-heading" }, h("slot", { name: "nav-tertiary-title" }))), h("div", { class: "button-wrap" }, h("biggive-button", { "colour-scheme": "white", url: "https://blog.thebiggive.org.uk/charities", label: "For charities" }), h("biggive-button", { "colour-scheme": "white", url: "https://blog.thebiggive.org.uk/funders", label: "For funders" }))), h("div", { class: "row row-bottom" }, h("div", { class: "postscript-wrap" }, h("img", { class: "fr-logo", src: getAssetPath('../assets/images/fundraising-regulator.png'), alt: "Fundraising Regulator" }), h("nav", { class: "nav nav-postscript", "aria-label": "Legal" })), h("div", { class: "social-icon-wrap" }, h("slot", { name: "social-icons" })), h("p", null, "\u00A9 2007 \u2013 2022 The Big Give Trust (1136547) | Company number 07273065 | Dragon Court, 27-29 Macklin Street, London WC2B 5LX, United Kingdom"))));
+    const slotBasedFooter = () => {
+      return (h("footer", { class: "footer" }, h("div", { class: "row row-top" }, h("nav", { class: "nav nav-primary", "aria-labelledby": "footer-primary-heading" }, h(HeadingTag, { class: "heading", id: "footer-primary-heading" }, h("slot", { name: "nav-primary-title" }))), h("nav", { class: "nav nav-secondary", "aria-labelledby": "footer-secondary-heading-heading" }, h(HeadingTag, { class: "heading", id: "footer-secondary-heading" }, h("slot", { name: "nav-secondary-title" }))), h("nav", { class: "nav nav-tertiary", "aria-labelledby": "footer-tertiary-heading" }, h(HeadingTag, { class: "heading", id: "footer-tertiary-heading" }, h("slot", { name: "nav-tertiary-title" }))), h("div", { class: "button-wrap" }, h("biggive-button", { "colour-scheme": "white", url: "https://blog.thebiggive.org.uk/charities", label: "For charities" }), h("biggive-button", { "colour-scheme": "white", url: "https://blog.thebiggive.org.uk/funders", label: "For funders" }))), h("div", { class: "row row-bottom" }, h("div", { class: "postscript-wrap" }, h("img", { class: "fr-logo", src: getAssetPath('../assets/images/fundraising-regulator.png'), alt: "Fundraising Regulator" }), h("nav", { class: "nav nav-postscript", "aria-label": "Legal" })), h("div", { class: "social-icon-wrap" }, h("slot", { name: "social-icons" })), h("p", null, "\u00A9 2007 \u2013 2022 The Big Give Trust (1136547) | Company number 07273065 | Dragon Court, 27-29 Macklin Street, London WC2B 5LX, United Kingdom"))));
+    };
+    const presetFooter = () => {
+      return (h("footer", { class: "footer" }, h("div", { class: "row row-top" }, h("nav", { class: "nav nav-primary", "aria-labelledby": "footer-primary-heading" }, h(HeadingTag, { class: "heading", id: "footer-primary-heading" }, h("div", { slot: "nav-primary-title" }, "Match Funding Opportunities")), h("ul", { slot: "nav-primary" }, h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'christmas-challenge'), class: "icon-christmas" }, "Christmas Challenge")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'green-match-fund'), class: "icon-green" }, "Green Match Fund")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'champions-for-children'), class: "icon-children" }, "Champions for Children")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'women-girls-match-fund'), class: "icon-women-girls" }, "Women and Girls Match Fund")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'kind2mind/'), class: "icon-mental-health" }, "Kind\u00B2Mind")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'emergency-campaigns/'), class: "icon-emergency" }, "Emergency Match Fund")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'run-your-own-campaign/)') }, "Run your own campaign")))), h("nav", { class: "nav nav-secondary", "aria-labelledby": "footer-secondary-heading-heading" }, h(HeadingTag, { class: "heading", id: "footer-secondary-heading" }, h("div", { slot: "nav-secondary-title" }, "Resources")), h("ul", { slot: "nav-secondary" }, h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'case-studies') }, "Case Studies")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'blog') }, "Blog")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'reports-insights') }, "Reports & Insights")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'press') }, "Press")))), h("nav", { class: "nav nav-tertiary", "aria-labelledby": "footer-tertiary-heading" }, h(HeadingTag, { class: "heading", id: "footer-tertiary-heading" }, h("div", { slot: "nav-tertiary-title" }, "About")), h("ul", { slot: "nav-tertiary" }, h("li", null, h("a", { href: makeURL('Experience', this.experienceUrlPrefix, 's/contact-us') }, "Contact us")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'our-story') }, "Our Story")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'our-people') }, "Our People")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'our-fees') }, "Our Fees")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'careers') }, "Careers")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'faqs') }, "FAQs"))), h("ul", { slot: "nav-postscript" }, h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'terms-and-conditions') }, "Terms and Conditions")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'privacy') }, "Privacy Policy")))), h("div", { class: "button-wrap" }, h("biggive-button", { "colour-scheme": "white", url: makeURL('Blog', this.blogUrlPrefix, 'charities'), label: "For charities" }), h("biggive-button", { "colour-scheme": "white", url: makeURL('Blog', this.blogUrlPrefix, 'funders'), label: "For funders" }))), h("div", { class: "row row-bottom" }, h("div", { class: "postscript-wrap" }, h("img", { class: "fr-logo", src: getAssetPath('../assets/images/fundraising-regulator.png'), alt: "Fundraising Regulator" }), h("nav", { class: "nav nav-postscript", "aria-label": "Legal" })), h("div", { class: "social-icon-wrap" }, h("div", { slot: "social-icons" }, h("biggive-social-icon", { service: "Facebook", url: "https://www.facebook.com/BigGive.org", "background-colour": "tertiary", "icon-colour": "black", wide: true }), h("biggive-social-icon", { service: "Twitter", url: "https://twitter.com/BigGive", "background-colour": "tertiary", "icon-colour": "black", wide: true }), h("biggive-social-icon", { service: "LinkedIn", url: "https://uk.linkedin.com/company/big-give", "background-colour": "tertiary", "icon-colour": "black", wide: true }), h("biggive-social-icon", { service: "YouTube", url: "https://www.youtube.com/channel/UC9_wH1aaTuZurJ-F9R8GDcA", "background-colour": "tertiary", "icon-colour": "black", wide: true }), h("biggive-social-icon", { service: "Instagram", url: "https://www.instagram.com/biggiveorg", "background-colour": "tertiary", "icon-colour": "black" }))), h("p", null, "\u00A9 2007 \u2013 2022 The Big Give Trust (1136547) | Company number 07273065 | Dragon Court, 27-29 Macklin Street, London WC2B 5LX, United Kingdom"))));
+    };
+    return this.usePresetFooter ? presetFooter() : slotBasedFooter();
   }
   get host() { return this; }
   static get style() { return biggiveFooterCss; }
 }, [1, "biggive-footer", {
-    "headingLevel": [2, "heading-level"]
+    "headingLevel": [2, "heading-level"],
+    "blogUrlPrefix": [1, "blog-url-prefix"],
+    "experienceUrlPrefix": [1, "experience-url-prefix"],
+    "usePresetFooter": [4, "use-preset-footer"]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["biggive-footer", "biggive-button"];
+  const components = ["biggive-footer", "biggive-button", "biggive-social-icon"];
   components.forEach(tagName => { switch (tagName) {
     case "biggive-footer":
       if (!customElements.get(tagName)) {
@@ -43,6 +59,11 @@ function defineCustomElement$1() {
       }
       break;
     case "biggive-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "biggive-social-icon":
       if (!customElements.get(tagName)) {
         defineCustomElement$2();
       }

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;