@biggive/components 202501031034.0.0 → 202501071646.0.0

package/dist/components/biggive-campaign-card.js.map

@@ -1 +1 @@
-{"file":"biggive-campaign-card.js","mappings":"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","names":["BiggiveCampaignCard"],"sources":["src/components/biggive-campaign-card/biggive-campaign-card.scss?tag=biggive-campaign-card&encapsulation=shadow","src/components/biggive-campaign-card/biggive-campaign-card.tsx"],"sourcesContent":["@include image-alignment();\n@include spacers();\n\n:host {\n  display: contents;\n}\n\n* {\n  //outline: 1px dotted red;\n}\n\n.container {\n  @include flex-container-column();\n  @include standard-font();\n  @include lower-shadow();\n  margin-right: 10px;\n  margin-left: 10px;\n\n  cursor: pointer; // Fallback click behaviour is to go to info URL.\n\n  position: relative;\n  height: 100%;\n  background-color: $colour-white;\n  padding: $spacer-3;\n  box-sizing: border-box;\n  .sleeve {\n    @include flex-container-column();\n    height: 100%;\n    .above-button-wrap {\n      // we want all the height variation to be inside this element, so that the button is always at the same position\n      // right at the bottom of the card.\n      flex-grow: 1;\n      @include flex-container-column();\n      .title-wrap {\n        // and specifically we want the spare height to go under the charity name.\n        flex-grow: 1;\n      }\n    }\n  }\n  .campaign-type {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    text-align: center;\n    font-weight: bold;\n    span {\n      background-color: $colour-secondary-green;\n      color: $colour-black;\n      padding: $spacer-1 $spacer-3;\n      display: inline-block;\n    }\n  }\n  .banner {\n    top: 0;\n    margin-top: 19px;\n    padding-bottom: $aspect-ratio-banners;\n    background-color: #F1F1F1;\n    background-size: contain;\n    background-repeat: no-repeat;\n    img {\n      display: none;\n    }\n  }\n  h3 {\n    @include heading-4();\n  }\n  .button {\n    display: block;\n  }\n  .organisation-name {\n    margin-bottom: $spacer-4;\n    color: $colour-primary-blue;\n  }\n  .meta-wrap {\n    @include flex-container-row();\n    margin-top: auto;\n    margin-bottom: $spacer-3;\n    .meta-item {\n      width: calc( 50% - $spacer-3 );\n      .label {\n        @include font-size-x-small();\n        display: block;\n      }\n      .text {\n        @include heading-3();\n        display: block;\n      }\n      &:last-child {\n        text-align: right;\n        .text {\n          color: $colour-primary-blue;\n        }\n      }\n    }\n  }\n  .progress-bar-wrap {\n    padding-bottom: $spacer-2;\n    margin-bottom: $spacer-2;\n    border-bottom: 1px solid $colour-grey-light;\n  }\n\n  .msg-wrapper {\n    display: flex;\n    justify-content: center;\n\n    biggive-misc-icon {\n      margin-top: auto;\n      margin-bottom: auto;\n    }\n\n    p {\n      text-align: center;\n\n      @media screen and (max-width: $screen-desktop-max) {\n        font-size: 15px;\n      }\n    }\n  }\n}\n","import { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-campaign-card',\n  styleUrl: 'biggive-campaign-card.scss',\n  shadow: true,\n})\nexport class BiggiveCampaignCard {\n  @Event({\n    eventName: 'doCardGeneralClick',\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  doCardGeneralClick: EventEmitter<{ event: object; url: string }>;\n\n  /**\n   * Space below component\n   */\n  @Prop() spaceBelow: number = 4;\n  /**\n   * e.g. \"Match Funded\".\n   */\n  @Prop() campaignType: string;\n\n  /**\n   * Full URL of a banner image.\n   */\n  @Prop() banner: string;\n\n  /**\n   * Display name of the charity's specific time-bound fundraising campaign.\n   */\n  @Prop() campaignTitle: string;\n\n  /**\n   * Display name of the charity or non-profit.\n   */\n  @Prop() organisationName: string;\n\n  /**\n   * Label for the primary figure – may be null or omitted for no label or if there's no figure.\n   */\n  @Prop() primaryFigureLabel: string | null;\n\n  /**\n   * Amount for the primary figure, formatted with currency symbol – null or omit to hide the figure & label.\n   */\n  @Prop() primaryFigureAmount: string | null;\n\n  /**\n   * Label for the secondary figure – may be null or omitted for no label or if there's no figure.\n   */\n  @Prop() secondaryFigureLabel: string | null;\n\n  /**\n   * Amount for the secondary figure, formatted with currency symbol – null or omit to hide the figure & label.\n   */\n  @Prop() secondaryFigureAmount: string | null;\n\n  /**\n   * Progress bar percentage – null or omit to hide the progress bar.\n   */\n  @Prop() progressBarCounter: number | null;\n\n  /**\n   * Donate button label\n   */\n  @Prop() donateButtonLabel: string = 'Donate now';\n\n  /**\n   * Donate button url\n   */\n  @Prop() donateButtonUrl: string;\n\n  /**\n   * Donate button colour scheme\n   */\n  @Prop() donateButtonColourScheme: string = 'primary';\n\n  /**\n   * More information button label\n   */\n  @Prop() moreInfoButtonLabel: string = 'Find out more';\n\n  /**\n   * More information button url\n   */\n  @Prop() moreInfoButtonUrl: string;\n\n  /**\n   * Donate button colour scheme\n   */\n  @Prop() moreInfoButtonColourScheme: string = 'clear-primary';\n\n  /**\n   * Boolean flag telling the component if the campaign is in the future (not open yet).\n   */\n  @Prop() isFutureCampaign: boolean = false;\n\n  /**\n   * Boolean flag telling the component if the campaign is in the future (not open yet).\n   */\n  @Prop() isPastCampaign: boolean = false;\n\n  /**\n   * To be used alongside isFutureCampaign = true or isPastCampaign = true.\n   * If either is true, we render out: 'Launches: ' + datetime or 'Closed: ' + datetime.\n   * Preferred format: DD/MM/YYYY, HH:MM\n   * DON-661.\n   */\n  @Prop() datetime: string;\n\n  private isEmpty(value?: number | string | null) {\n    return value === undefined || value === null || value === '';\n  }\n\n  private handleCardGeneralClick = (event: any) => {\n    this.doCardGeneralClick.emit({ event, url: this.moreInfoButtonUrl });\n  };\n\n  render() {\n    return (\n      <div class={'container space-below-' + this.spaceBelow.toString()}>\n        <div class=\"sleeve\">\n          <div onClick={this.handleCardGeneralClick} class=\"above-button-wrap\">\n            {this.campaignType !== null ? (\n              <div class=\"campaign-type\">\n                <span>{this.campaignType}</span>\n              </div>\n            ) : null}\n\n            {this.banner !== null && this.banner !== undefined ? (\n              <div class=\"image-wrap banner\" role=\"presentation\" style={{ 'background-image': 'url(' + this.banner + ')' }}></div>\n            ) : (\n              <div class=\"image-wrap banner\"></div>\n            )}\n\n            <div class=\"title-wrap\">\n              <h3>{this.campaignTitle}</h3>\n              <div class=\"organisation-name\">By {this.organisationName}</div>\n            </div>\n\n            {this.isEmpty(this.primaryFigureAmount) && this.isEmpty(this.secondaryFigureAmount) ? null : (\n              <div class=\"meta-wrap\">\n                {this.isEmpty(this.primaryFigureAmount) ? null : (\n                  <div class=\"meta-item\">\n                    <span class=\"label\">{this.primaryFigureLabel}</span>\n                    <span class=\"text\">{this.primaryFigureAmount}</span>\n                  </div>\n                )}\n                {this.isEmpty(this.secondaryFigureAmount) ? null : (\n                  <div class=\"meta-item\">\n                    <span class=\"label\">{this.secondaryFigureLabel}</span>\n                    <span class=\"text\">{this.secondaryFigureAmount}</span>\n                  </div>\n                )}\n              </div>\n            )}\n            {this.isEmpty(this.progressBarCounter) ? null : (\n              <div class=\"progress-bar-wrap\">\n                <biggive-progress-bar counter={this.progressBarCounter} colour-scheme=\"primary\"></biggive-progress-bar>\n              </div>\n            )}\n          </div>\n          <div class=\"button-wrap\">\n            {this.isFutureCampaign || this.isPastCampaign ? (\n              <div class=\"msg-wrapper\">\n                <biggive-misc-icon background-colour=\"white\" icon-colour=\"black\" icon=\"Timer\"></biggive-misc-icon>\n                {this.isFutureCampaign ? <p>Launches {this.datetime}</p> : <p>Closed {this.datetime}</p>}\n              </div>\n            ) : (\n              <biggive-button full-width=\"true\" colour-scheme={this.donateButtonColourScheme} url={this.donateButtonUrl} label={this.donateButtonLabel}></biggive-button>\n            )}\n            <biggive-button full-width=\"true\" colour-scheme={this.moreInfoButtonColourScheme} url={this.moreInfoButtonUrl} label={this.moreInfoButtonLabel}></biggive-button>\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"biggive-campaign-card.js","mappings":"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","names":["BiggiveCampaignCard"],"sources":["src/components/biggive-campaign-card/biggive-campaign-card.scss?tag=biggive-campaign-card&encapsulation=shadow","src/components/biggive-campaign-card/biggive-campaign-card.tsx"],"sourcesContent":["@include image-alignment();\n@include spacers();\n\n:host {\n  display: contents;\n}\n\n* {\n  //outline: 1px dotted red;\n}\n\n.container {\n  @include flex-container-column();\n  @include standard-font();\n  @include lower-shadow();\n  margin-right: 10px;\n  margin-left: 10px;\n\n  cursor: pointer; // Fallback click behaviour is to go to info URL.\n\n  position: relative;\n  height: 100%;\n  background-color: $colour-white;\n  padding: $spacer-3;\n  box-sizing: border-box;\n  .sleeve {\n    @include flex-container-column();\n    height: 100%;\n    .above-button-wrap {\n      // we want all the height variation to be inside this element, so that the button is always at the same position\n      // right at the bottom of the card.\n      flex-grow: 1;\n      @include flex-container-column();\n      .title-wrap {\n        // and specifically we want the spare height to go under the charity name.\n        flex-grow: 1;\n      }\n    }\n  }\n  .campaign-type {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    text-align: center;\n    font-weight: bold;\n    span {\n      background-color: $colour-secondary-green;\n      color: $colour-black;\n      padding: $spacer-1 $spacer-3;\n      display: inline-block;\n    }\n  }\n  .banner {\n    top: 0;\n    margin-top: 19px;\n    padding-bottom: $aspect-ratio-banners;\n    background-color: #F1F1F1;\n    background-size: contain;\n    background-repeat: no-repeat;\n    img {\n      display: none;\n    }\n  }\n  h3 {\n    @include heading-4();\n  }\n  .button {\n    display: block;\n  }\n  .organisation-name {\n    margin-bottom: $spacer-4;\n    color: $colour-primary-blue;\n  }\n  .meta-wrap {\n    @include flex-container-row();\n    margin-top: auto;\n    margin-bottom: $spacer-3;\n    .meta-item {\n      width: calc( 50% - $spacer-3 );\n      .label {\n        @include font-size-x-small();\n        display: block;\n      }\n      .text {\n        @include heading-3();\n        display: block;\n      }\n      &:last-child {\n        text-align: right;\n        .text {\n          color: $colour-primary-blue;\n        }\n      }\n    }\n  }\n  .progress-bar-wrap {\n    padding-bottom: $spacer-2;\n    margin-bottom: $spacer-2;\n    border-bottom: 1px solid $colour-grey-light;\n  }\n\n  .msg-wrapper {\n    display: flex;\n    justify-content: center;\n\n    biggive-misc-icon {\n      margin-top: auto;\n      margin-bottom: auto;\n    }\n\n    p {\n      text-align: center;\n\n      @media screen and (max-width: $screen-desktop-max) {\n        font-size: 15px;\n      }\n    }\n  }\n}\n","import { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-campaign-card',\n  styleUrl: 'biggive-campaign-card.scss',\n  shadow: true,\n})\nexport class BiggiveCampaignCard {\n  @Event({\n    eventName: 'doCardGeneralClick',\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  doCardGeneralClick: EventEmitter<{ event: object; url: string }>;\n\n  /**\n   * Space below component\n   */\n  @Prop() spaceBelow: number = 4;\n  /**\n   * e.g. \"Match Funded\".\n   */\n  @Prop() campaignType: string;\n\n  /**\n   * Full URL of a banner image.\n   */\n  @Prop() banner: string;\n\n  /**\n   * Display name of the charity's specific time-bound fundraising campaign.\n   */\n  @Prop() campaignTitle: string;\n\n  /**\n   * Display name of the charity or non-profit.\n   */\n  @Prop() organisationName: string;\n\n  /**\n   * Label for the primary figure – may be null or omitted for no label or if there's no figure.\n   */\n  @Prop() primaryFigureLabel: string | null;\n\n  /**\n   * Amount for the primary figure, formatted with currency symbol – null or omit to hide the figure & label.\n   */\n  @Prop() primaryFigureAmount: string | null;\n\n  /**\n   * Label for the secondary figure – may be null or omitted for no label or if there's no figure.\n   */\n  @Prop() secondaryFigureLabel: string | null;\n\n  /**\n   * Amount for the secondary figure, formatted with currency symbol – null or omit to hide the figure & label.\n   */\n  @Prop() secondaryFigureAmount: string | null;\n\n  /**\n   * Progress bar percentage – null or omit to hide the progress bar.\n   */\n  @Prop() progressBarCounter: number | null;\n\n  /**\n   * Donate button label\n   */\n  @Prop() donateButtonLabel: string = 'Donate now';\n\n  /**\n   * Donate button url\n   */\n  @Prop() donateButtonUrl: string;\n\n  /**\n   * Donate button colour scheme\n   */\n  @Prop() donateButtonColourScheme: string = 'primary';\n\n  /**\n   * More information button label\n   */\n  @Prop() moreInfoButtonLabel: string = 'Find out more';\n\n  /**\n   * More information button url\n   */\n  @Prop() moreInfoButtonUrl: string;\n\n  /**\n   * Donate button colour scheme\n   */\n  @Prop() moreInfoButtonColourScheme: string = 'clear-primary';\n\n  /**\n   * Boolean flag telling the component if the campaign is in the future (not open yet).\n   */\n  @Prop() isFutureCampaign: boolean = false;\n\n  /**\n   * Boolean flag telling the component if the campaign is in the future (not open yet).\n   */\n  @Prop() isPastCampaign: boolean = false;\n\n  /**\n   * To be used alongside isFutureCampaign = true or isPastCampaign = true.\n   * If either is true, we render out: 'Launches: ' + datetime or 'Closed: ' + datetime.\n   * Preferred format: DD/MM/YYYY, HH:MM\n   * DON-661.\n   */\n  @Prop() datetime: string;\n\n  private isEmpty(value?: number | string | null) {\n    return value === undefined || value === null || value === '';\n  }\n\n  private handleCardGeneralClick = (event: any) => {\n    this.doCardGeneralClick.emit({ event, url: this.moreInfoButtonUrl });\n  };\n\n  render() {\n    return (\n      <div class={'container space-below-' + this.spaceBelow.toString()}>\n        <div class=\"sleeve\">\n          <div onClick={this.handleCardGeneralClick} class=\"above-button-wrap\">\n            {this.campaignType !== null ? (\n              <div class=\"campaign-type\">\n                <span>{this.campaignType}</span>\n              </div>\n            ) : null}\n\n            {this.banner !== null && this.banner !== undefined ? (\n              <div class=\"image-wrap banner\" role=\"presentation\" style={{ 'background-image': 'url(' + this.banner + ')' }}></div>\n            ) : (\n              <div class=\"image-wrap banner\"></div>\n            )}\n\n            <div class=\"title-wrap\">\n              <h3>{this.campaignTitle}</h3>\n              <div class=\"organisation-name\">By {this.organisationName}</div>\n            </div>\n\n            {this.isEmpty(this.primaryFigureAmount) && this.isEmpty(this.secondaryFigureAmount) ? null : (\n              <div class=\"meta-wrap\">\n                {this.isEmpty(this.primaryFigureAmount) ? null : (\n                  <div class=\"meta-item\">\n                    <span class=\"label\">{this.primaryFigureLabel}</span>\n                    <span class=\"text\">{this.primaryFigureAmount}</span>\n                  </div>\n                )}\n                {this.isEmpty(this.secondaryFigureAmount) ? null : (\n                  <div class=\"meta-item\">\n                    <span class=\"label\">{this.secondaryFigureLabel}</span>\n                    <span class=\"text\">{this.secondaryFigureAmount}</span>\n                  </div>\n                )}\n              </div>\n            )}\n            {this.isEmpty(this.progressBarCounter) ? null : (\n              <div class=\"progress-bar-wrap\">\n                <biggive-progress-bar counter={this.progressBarCounter} colour-scheme=\"primary\"></biggive-progress-bar>\n              </div>\n            )}\n          </div>\n          <div class=\"button-wrap\">\n            {this.isFutureCampaign || this.isPastCampaign ? (\n              <div class=\"msg-wrapper\">\n                <biggive-misc-icon background-colour=\"white\" icon-colour=\"black\" icon=\"Timer\"></biggive-misc-icon>\n                {this.isFutureCampaign ? <p>Launches {this.datetime}</p> : <p>Closed {this.datetime}</p>}\n              </div>\n            ) : (\n              <biggive-button full-width=\"true\" colour-scheme={this.donateButtonColourScheme} url={this.donateButtonUrl} label={this.donateButtonLabel}></biggive-button>\n            )}\n            <biggive-button full-width=\"true\" colour-scheme={this.moreInfoButtonColourScheme} url={this.moreInfoButtonUrl} label={this.moreInfoButtonLabel}></biggive-button>\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/biggive-campaign-highlights.js

@@ -10,20 +10,14 @@ const BiggiveCampaignHighlights$1 = /*@__PURE__*/ proxyCustomElement(class Biggi
         super();
         this.__registerHost();
         this.__attachShadow();
+        /**
+         * Space below component
+         */
         this.spaceBelow = 0;
-        this.banner = undefined;
-        this.campaignTitle = undefined;
-        this.primaryFigureLabel = undefined;
-        this.primaryFigureAmount = undefined;
-        this.secondaryFigureLabel = undefined;
-        this.secondaryFigureAmount = undefined;
+        /**
+         * Progress bar percentage
+         */
         this.progressBarCounter = 100;
-        this.primaryStatIcon = undefined;
-        this.primaryStatText = undefined;
-        this.secondaryStatIcon = undefined;
-        this.secondaryStatText = undefined;
-        this.championName = undefined;
-        this.championUrl = undefined;
     }
     render() {
         return (h("div", { key: 'add93be878549fc1c8f00b8dc3001896724cfe34', class: 'container space-below-' + this.spaceBelow }, h("div", { key: 'd5577539172f56e51540d03e53c91327bed96143', class: "sleeve" }, this.campaignTitle != null ? (h("div", { class: "campaign-title" }, h("span", null, this.campaignTitle))) : null, this.banner !== null && this.banner !== undefined ? (h("div", { class: "image-wrap banner", style: { 'background-image': 'url(' + this.banner + ')' } }, h("img", { src: this.banner, class: "banner" }))) : null, h("div", { key: 'c7029df25a46f19e84057d4e9db469ba6325d1ec', class: "meta-wrap" }, h("div", { key: '877452b98dd3d64bfa132da71797e6f00bc5696d', class: "meta-item" }, h("span", { key: '4c373ec8b3e8d53754280b5fabecc0986a57f6f8', class: "label" }, this.primaryFigureLabel), h("span", { key: 'c354468bd49fb84a9b5317c7cfb7dc363b0b7b54', class: "text" }, this.primaryFigureAmount)), h("div", { key: '49ba302a5c22f674bd45478607afe5e57c40ad98', class: "meta-item" }, h("span", { key: '8f8c8e3935542794e7ba3e9624cedf5bacd89be1', class: "label" }, this.secondaryFigureLabel), h("span", { key: '952ee3945423ac3f129d59f466b98c7f5b1f9f26', class: "text" }, this.secondaryFigureAmount))), h("div", { key: '76bf79668d1c1f737d400d9d85816310de2147ee', class: "progress-bar-wrap" }, h("biggive-progress-bar", { key: 'cb43751f5905000bb6c294d472a43c89e660447e', counter: this.progressBarCounter, "colour-scheme": "primary" })), h("div", { key: 'af9a81b3c9ca0b15fa44e45df0aa7068ddb9249d', class: "stat-wrap" }, this.primaryStatIcon != null ? (h("div", { class: "stat-item" }, h("biggive-misc-icon", { icon: this.primaryStatIcon, "background-colour": "white", "icon-colour": "tertiary" }), h("span", { class: "label" }, this.primaryStatText))) : null, this.secondaryStatIcon != null ? (h("div", { class: "stat-item" }, h("biggive-misc-icon", { icon: this.secondaryStatIcon, "background-colour": "white", "icon-colour": "tertiary" }), h("span", { class: "label" }, this.secondaryStatText))) : null), this.championName != null ? (h("div", { class: "championed-by" }, "Championed by ", h("a", { href: this.championUrl }, this.championName))) : null)));

package/dist/components/biggive-campaign-highlights.js.map

@@ -1 +1 @@
-{"file":"biggive-campaign-highlights.js","mappings":";;;;AAAA,MAAM,4BAA4B,GAAG,yiGAAyiG,CAAC;AAC/kG,wCAAe,4BAA4B;;MCM9BA,2BAAyB;;;;;0BAIP,CAAC;;;;;;;kCAmCO,GAAG;;;;;;;;IAmCxC,MAAM;QACJ,QACE,4DAAK,KAAK,EAAE,wBAAwB,GAAG,IAAI,CAAC,UAAU,IACpD,4DAAK,KAAK,EAAC,QAAQ,IAChB,IAAI,CAAC,aAAa,IAAI,IAAI,IACzB,WAAK,KAAK,EAAC,gBAAgB,IACzB,gBAAO,IAAI,CAAC,aAAa,CAAQ,CAC7B,IACJ,IAAI,EAEP,IAAI,CAAC,MAAM,KAAK,IAAI,IAAI,IAAI,CAAC,MAAM,KAAK,SAAS,IAChD,WAAK,KAAK,EAAC,mBAAmB,EAAC,KAAK,EAAE,EAAE,kBAAkB,EAAE,MAAM,GAAG,IAAI,CAAC,MAAM,GAAG,GAAG,EAAE,IACtF,WAAK,GAAG,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAC,QAAQ,GAAG,CACpC,IACJ,IAAI,EAER,4DAAK,KAAK,EAAC,WAAW,IACpB,4DAAK,KAAK,EAAC,WAAW,IACpB,6DAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,kBAAkB,CAAQ,EACpD,6DAAM,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,mBAAmB,CAAQ,CAChD,EACN,4DAAK,KAAK,EAAC,WAAW,IACpB,6DAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,oBAAoB,CAAQ,EACtD,6DAAM,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,qBAAqB,CAAQ,CAClD,CACF,EACN,4DAAK,KAAK,EAAC,mBAAmB,IAC5B,6EAAsB,OAAO,EAAE,IAAI,CAAC,kBAAkB,mBAAgB,SAAS,GAAwB,CACnG,EACN,4DAAK,KAAK,EAAC,WAAW,IACnB,IAAI,CAAC,eAAe,IAAI,IAAI,IAC3B,WAAK,KAAK,EAAC,WAAW,IACpB,yBAAmB,IAAI,EAAE,IAAI,CAAC,eAAe,uBAAoB,OAAO,iBAAa,UAAU,GAAqB,EACpH,YAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,eAAe,CAAQ,CAC7C,IACJ,IAAI,EACP,IAAI,CAAC,iBAAiB,IAAI,IAAI,IAC7B,WAAK,KAAK,EAAC,WAAW,IACpB,yBAAmB,IAAI,EAAE,IAAI,CAAC,iBAAiB,uBAAoB,OAAO,iBAAa,UAAU,GAAqB,EACtH,YAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,iBAAiB,CAAQ,CAC/C,IACJ,IAAI,CACJ,EACL,IAAI,CAAC,YAAY,IAAI,IAAI,IACxB,WAAK,KAAK,EAAC,eAAe,sBACV,SAAG,IAAI,EAAE,IAAI,CAAC,WAAW,IAAG,IAAI,CAAC,YAAY,CAAK,CAC5D,IACJ,IAAI,CACJ,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveCampaignHighlights"],"sources":["src/components/biggive-campaign-highlights/biggive-campaign-highlights.scss?tag=biggive-campaign-highlights&encapsulation=shadow","src/components/biggive-campaign-highlights/biggive-campaign-highlights.tsx"],"sourcesContent":["@include image-alignment();\n@include spacers();\n\n:host {\n  display: contents;\n}\n\n.container {\n  @include standard-font();\n  @include lower-shadow();\n  background-color: $colour-white;\n  padding: 25px;\n  box-sizing: border-box;\n  height: fit-content;\n\n  .campaign-title {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    text-align: center;\n    font-weight: bold;\n    span {\n      background-color: $colour-secondary-green;\n      color: $colour-black;\n      padding: $spacer-1 $spacer-3;\n      display: inline-block;\n    }\n  }\n  .banner {\n    top: 0;\n    margin-top: 19px;\n    padding-bottom: $aspect-ratio-banners;\n    background-color: #F1F1F1;\n    background-size: contain;\n    background-repeat: no-repeat;\n    margin-bottom: $spacer-4;\n    img {\n      display: none;\n    }\n  }\n  .meta-wrap {\n    @include flex-container-row();\n    margin-top: auto;\n    margin-bottom: $spacer-3;\n    .meta-item {\n      width: calc( 50% - $spacer-3 );\n      .label {\n        @include font-size-small();\n        display: block;\n      }\n      .text {\n        @include heading-3();\n        display: block;\n\n        @media screen and (max-width: $screen-tablet-max) {\n          font-size: 23px;\n        }\n\n        @media screen and (max-width: $screen-mobile-max) {\n          font-size: 21px;;\n        }\n\n        @media screen and (max-width: $screen-mobile-small) {\n          font-size: 17px;\n        }\n      }\n      &:last-child {\n        text-align: right;\n        .text {\n          color: $colour-primary-blue;\n        }\n      }\n    }\n  }\n  .progress-bar-wrap {\n    padding-bottom: $spacer-2;\n    margin-bottom: $spacer-2;\n    border-bottom: 1px solid $colour-grey-light;\n  }\n  .stat-wrap {\n    @include flex-container-row();\n    .stat-item {\n      @include font-size-medium();\n      font-weight: bold;\n      width: calc( 50% - $spacer-3 );\n      margin: auto 0 auto $spacer-3;\n\n      .label {\n        position: relative;\n        bottom: 7px;\n      }\n\n      @media screen and (max-width: $screen-mobile-max) {\n        @include font-size-small();\n        margin: auto 0;\n        text-align: center;\n\n        .label {\n          bottom: 5px;\n        }\n      }\n\n      svg {\n        fill: $colour-tertiary-coral;\n      }\n    }\n  }\n\n  .championed-by {\n    text-align: left;\n    margin-left: 20px;\n    margin-top: 20px;\n    color: $colour-black;\n\n    font-size: 15px;\n\n    @media screen and (max-width: $screen-tablet-max) {\n      font-size: 14px;\n    }\n\n    @media screen and (max-width: $screen-mobile-max) {\n      text-align: center;\n      margin-left: 0;\n      margin-bottom: 10px;\n      font-size: 13px;\n    }\n\n    @media screen and (max-width: $screen-mobile-small) {\n      font-size: 12px;\n    }\n\n    a {\n      text-decoration: none;\n      font-weight: bold;\n      color: $colour-primary-blue;\n      @media screen and (max-width: $screen-mobile-small) {\n        // Show Champion Name on new line in smaller screens\n        display: block;\n      }\n    }\n  }\n\n  @media screen and (max-width: $screen-mobile-max) {\n    padding: 15px;\n  }\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-campaign-highlights',\n  styleUrl: 'biggive-campaign-highlights.scss',\n  shadow: true,\n})\nexport class BiggiveCampaignHighlights {\n  /**\n   * Space below component\n   */\n  @Prop() spaceBelow: number = 0;\n\n  /**\n   * Full URL of a banner image.\n   */\n  @Prop() banner: string;\n\n  /**\n   * Display name of the charity's specific time-bound fundraising campaign.\n   */\n  @Prop() campaignTitle: string;\n\n  /**\n   * Label for the primary figure\n   */\n  @Prop() primaryFigureLabel: string;\n\n  /**\n   * Amount for the primary figure, formatted with currency symbol\n   */\n  @Prop() primaryFigureAmount: string;\n\n  /**\n   * Label for the secondary figure\n   */\n  @Prop() secondaryFigureLabel: string;\n\n  /**\n   * Amount for the secondary figure, formatted with currency symbol\n   */\n  @Prop() secondaryFigureAmount: string;\n\n  /**\n   * Progress bar percentage\n   */\n  @Prop() progressBarCounter: number = 100;\n\n  /**\n   * Primary stat icon\n   */\n  @Prop() primaryStatIcon: string;\n\n  /**\n   * Primary stat text\n   */\n  @Prop() primaryStatText: string;\n\n  /**\n   * Secondary stat icon\n   */\n  @Prop() secondaryStatIcon: string;\n\n  /**\n   * Secondary stat text\n   */\n  @Prop() secondaryStatText: string;\n\n  /**\n   * Champion's name\n   */\n  @Prop() championName: string;\n\n  /**\n   * Link to all meta-campaigns funded by this champion.\n   * For example: /christmas-challenge-2022/the-reed-foundation-22\n   * In other words, it follows the following format:\n   * '/' + campaign.parentRef + '/' + campaign.championRef\n   */\n  @Prop() championUrl: string;\n\n  render() {\n    return (\n      <div class={'container space-below-' + this.spaceBelow}>\n        <div class=\"sleeve\">\n          {this.campaignTitle != null ? (\n            <div class=\"campaign-title\">\n              <span>{this.campaignTitle}</span>\n            </div>\n          ) : null}\n\n          {this.banner !== null && this.banner !== undefined ? (\n            <div class=\"image-wrap banner\" style={{ 'background-image': 'url(' + this.banner + ')' }}>\n              <img src={this.banner} class=\"banner\" />\n            </div>\n          ) : null}\n\n          <div class=\"meta-wrap\">\n            <div class=\"meta-item\">\n              <span class=\"label\">{this.primaryFigureLabel}</span>\n              <span class=\"text\">{this.primaryFigureAmount}</span>\n            </div>\n            <div class=\"meta-item\">\n              <span class=\"label\">{this.secondaryFigureLabel}</span>\n              <span class=\"text\">{this.secondaryFigureAmount}</span>\n            </div>\n          </div>\n          <div class=\"progress-bar-wrap\">\n            <biggive-progress-bar counter={this.progressBarCounter} colour-scheme=\"primary\"></biggive-progress-bar>\n          </div>\n          <div class=\"stat-wrap\">\n            {this.primaryStatIcon != null ? (\n              <div class=\"stat-item\">\n                <biggive-misc-icon icon={this.primaryStatIcon} background-colour=\"white\" icon-colour=\"tertiary\"></biggive-misc-icon>\n                <span class=\"label\">{this.primaryStatText}</span>\n              </div>\n            ) : null}\n            {this.secondaryStatIcon != null ? (\n              <div class=\"stat-item\">\n                <biggive-misc-icon icon={this.secondaryStatIcon} background-colour=\"white\" icon-colour=\"tertiary\"></biggive-misc-icon>\n                <span class=\"label\">{this.secondaryStatText}</span>\n              </div>\n            ) : null}\n          </div>\n          {this.championName != null ? (\n            <div class=\"championed-by\">\n              Championed by <a href={this.championUrl}>{this.championName}</a>\n            </div>\n          ) : null}\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"biggive-campaign-highlights.js","mappings":";;;;AAAA,MAAM,4BAA4B,GAAG,yiGAAyiG,CAAC;AAC/kG,wCAAe,4BAA4B;;MCM9BA,2BAAyB;IALtC;;;;;;;QASU,eAAU,GAAW,CAAC,CAAC;;;;QAmCvB,uBAAkB,GAAW,GAAG,CAAC;KAuF1C;IApDC,MAAM;QACJ,QACE,4DAAK,KAAK,EAAE,wBAAwB,GAAG,IAAI,CAAC,UAAU,IACpD,4DAAK,KAAK,EAAC,QAAQ,IAChB,IAAI,CAAC,aAAa,IAAI,IAAI,IACzB,WAAK,KAAK,EAAC,gBAAgB,IACzB,gBAAO,IAAI,CAAC,aAAa,CAAQ,CAC7B,IACJ,IAAI,EAEP,IAAI,CAAC,MAAM,KAAK,IAAI,IAAI,IAAI,CAAC,MAAM,KAAK,SAAS,IAChD,WAAK,KAAK,EAAC,mBAAmB,EAAC,KAAK,EAAE,EAAE,kBAAkB,EAAE,MAAM,GAAG,IAAI,CAAC,MAAM,GAAG,GAAG,EAAE,IACtF,WAAK,GAAG,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAC,QAAQ,GAAG,CACpC,IACJ,IAAI,EAER,4DAAK,KAAK,EAAC,WAAW,IACpB,4DAAK,KAAK,EAAC,WAAW,IACpB,6DAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,kBAAkB,CAAQ,EACpD,6DAAM,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,mBAAmB,CAAQ,CAChD,EACN,4DAAK,KAAK,EAAC,WAAW,IACpB,6DAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,oBAAoB,CAAQ,EACtD,6DAAM,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,qBAAqB,CAAQ,CAClD,CACF,EACN,4DAAK,KAAK,EAAC,mBAAmB,IAC5B,6EAAsB,OAAO,EAAE,IAAI,CAAC,kBAAkB,mBAAgB,SAAS,GAAwB,CACnG,EACN,4DAAK,KAAK,EAAC,WAAW,IACnB,IAAI,CAAC,eAAe,IAAI,IAAI,IAC3B,WAAK,KAAK,EAAC,WAAW,IACpB,yBAAmB,IAAI,EAAE,IAAI,CAAC,eAAe,uBAAoB,OAAO,iBAAa,UAAU,GAAqB,EACpH,YAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,eAAe,CAAQ,CAC7C,IACJ,IAAI,EACP,IAAI,CAAC,iBAAiB,IAAI,IAAI,IAC7B,WAAK,KAAK,EAAC,WAAW,IACpB,yBAAmB,IAAI,EAAE,IAAI,CAAC,iBAAiB,uBAAoB,OAAO,iBAAa,UAAU,GAAqB,EACtH,YAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,iBAAiB,CAAQ,CAC/C,IACJ,IAAI,CACJ,EACL,IAAI,CAAC,YAAY,IAAI,IAAI,IACxB,WAAK,KAAK,EAAC,eAAe,sBACV,SAAG,IAAI,EAAE,IAAI,CAAC,WAAW,IAAG,IAAI,CAAC,YAAY,CAAK,CAC5D,IACJ,IAAI,CACJ,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveCampaignHighlights"],"sources":["src/components/biggive-campaign-highlights/biggive-campaign-highlights.scss?tag=biggive-campaign-highlights&encapsulation=shadow","src/components/biggive-campaign-highlights/biggive-campaign-highlights.tsx"],"sourcesContent":["@include image-alignment();\n@include spacers();\n\n:host {\n  display: contents;\n}\n\n.container {\n  @include standard-font();\n  @include lower-shadow();\n  background-color: $colour-white;\n  padding: 25px;\n  box-sizing: border-box;\n  height: fit-content;\n\n  .campaign-title {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    text-align: center;\n    font-weight: bold;\n    span {\n      background-color: $colour-secondary-green;\n      color: $colour-black;\n      padding: $spacer-1 $spacer-3;\n      display: inline-block;\n    }\n  }\n  .banner {\n    top: 0;\n    margin-top: 19px;\n    padding-bottom: $aspect-ratio-banners;\n    background-color: #F1F1F1;\n    background-size: contain;\n    background-repeat: no-repeat;\n    margin-bottom: $spacer-4;\n    img {\n      display: none;\n    }\n  }\n  .meta-wrap {\n    @include flex-container-row();\n    margin-top: auto;\n    margin-bottom: $spacer-3;\n    .meta-item {\n      width: calc( 50% - $spacer-3 );\n      .label {\n        @include font-size-small();\n        display: block;\n      }\n      .text {\n        @include heading-3();\n        display: block;\n\n        @media screen and (max-width: $screen-tablet-max) {\n          font-size: 23px;\n        }\n\n        @media screen and (max-width: $screen-mobile-max) {\n          font-size: 21px;;\n        }\n\n        @media screen and (max-width: $screen-mobile-small) {\n          font-size: 17px;\n        }\n      }\n      &:last-child {\n        text-align: right;\n        .text {\n          color: $colour-primary-blue;\n        }\n      }\n    }\n  }\n  .progress-bar-wrap {\n    padding-bottom: $spacer-2;\n    margin-bottom: $spacer-2;\n    border-bottom: 1px solid $colour-grey-light;\n  }\n  .stat-wrap {\n    @include flex-container-row();\n    .stat-item {\n      @include font-size-medium();\n      font-weight: bold;\n      width: calc( 50% - $spacer-3 );\n      margin: auto 0 auto $spacer-3;\n\n      .label {\n        position: relative;\n        bottom: 7px;\n      }\n\n      @media screen and (max-width: $screen-mobile-max) {\n        @include font-size-small();\n        margin: auto 0;\n        text-align: center;\n\n        .label {\n          bottom: 5px;\n        }\n      }\n\n      svg {\n        fill: $colour-tertiary-coral;\n      }\n    }\n  }\n\n  .championed-by {\n    text-align: left;\n    margin-left: 20px;\n    margin-top: 20px;\n    color: $colour-black;\n\n    font-size: 15px;\n\n    @media screen and (max-width: $screen-tablet-max) {\n      font-size: 14px;\n    }\n\n    @media screen and (max-width: $screen-mobile-max) {\n      text-align: center;\n      margin-left: 0;\n      margin-bottom: 10px;\n      font-size: 13px;\n    }\n\n    @media screen and (max-width: $screen-mobile-small) {\n      font-size: 12px;\n    }\n\n    a {\n      text-decoration: none;\n      font-weight: bold;\n      color: $colour-primary-blue;\n      @media screen and (max-width: $screen-mobile-small) {\n        // Show Champion Name on new line in smaller screens\n        display: block;\n      }\n    }\n  }\n\n  @media screen and (max-width: $screen-mobile-max) {\n    padding: 15px;\n  }\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-campaign-highlights',\n  styleUrl: 'biggive-campaign-highlights.scss',\n  shadow: true,\n})\nexport class BiggiveCampaignHighlights {\n  /**\n   * Space below component\n   */\n  @Prop() spaceBelow: number = 0;\n\n  /**\n   * Full URL of a banner image.\n   */\n  @Prop() banner: string;\n\n  /**\n   * Display name of the charity's specific time-bound fundraising campaign.\n   */\n  @Prop() campaignTitle: string;\n\n  /**\n   * Label for the primary figure\n   */\n  @Prop() primaryFigureLabel: string;\n\n  /**\n   * Amount for the primary figure, formatted with currency symbol\n   */\n  @Prop() primaryFigureAmount: string;\n\n  /**\n   * Label for the secondary figure\n   */\n  @Prop() secondaryFigureLabel: string;\n\n  /**\n   * Amount for the secondary figure, formatted with currency symbol\n   */\n  @Prop() secondaryFigureAmount: string;\n\n  /**\n   * Progress bar percentage\n   */\n  @Prop() progressBarCounter: number = 100;\n\n  /**\n   * Primary stat icon\n   */\n  @Prop() primaryStatIcon: string;\n\n  /**\n   * Primary stat text\n   */\n  @Prop() primaryStatText: string;\n\n  /**\n   * Secondary stat icon\n   */\n  @Prop() secondaryStatIcon: string;\n\n  /**\n   * Secondary stat text\n   */\n  @Prop() secondaryStatText: string;\n\n  /**\n   * Champion's name\n   */\n  @Prop() championName: string;\n\n  /**\n   * Link to all meta-campaigns funded by this champion.\n   * For example: /christmas-challenge-2022/the-reed-foundation-22\n   * In other words, it follows the following format:\n   * '/' + campaign.parentRef + '/' + campaign.championRef\n   */\n  @Prop() championUrl: string;\n\n  render() {\n    return (\n      <div class={'container space-below-' + this.spaceBelow}>\n        <div class=\"sleeve\">\n          {this.campaignTitle != null ? (\n            <div class=\"campaign-title\">\n              <span>{this.campaignTitle}</span>\n            </div>\n          ) : null}\n\n          {this.banner !== null && this.banner !== undefined ? (\n            <div class=\"image-wrap banner\" style={{ 'background-image': 'url(' + this.banner + ')' }}>\n              <img src={this.banner} class=\"banner\" />\n            </div>\n          ) : null}\n\n          <div class=\"meta-wrap\">\n            <div class=\"meta-item\">\n              <span class=\"label\">{this.primaryFigureLabel}</span>\n              <span class=\"text\">{this.primaryFigureAmount}</span>\n            </div>\n            <div class=\"meta-item\">\n              <span class=\"label\">{this.secondaryFigureLabel}</span>\n              <span class=\"text\">{this.secondaryFigureAmount}</span>\n            </div>\n          </div>\n          <div class=\"progress-bar-wrap\">\n            <biggive-progress-bar counter={this.progressBarCounter} colour-scheme=\"primary\"></biggive-progress-bar>\n          </div>\n          <div class=\"stat-wrap\">\n            {this.primaryStatIcon != null ? (\n              <div class=\"stat-item\">\n                <biggive-misc-icon icon={this.primaryStatIcon} background-colour=\"white\" icon-colour=\"tertiary\"></biggive-misc-icon>\n                <span class=\"label\">{this.primaryStatText}</span>\n              </div>\n            ) : null}\n            {this.secondaryStatIcon != null ? (\n              <div class=\"stat-item\">\n                <biggive-misc-icon icon={this.secondaryStatIcon} background-colour=\"white\" icon-colour=\"tertiary\"></biggive-misc-icon>\n                <span class=\"label\">{this.secondaryStatText}</span>\n              </div>\n            ) : null}\n          </div>\n          {this.championName != null ? (\n            <div class=\"championed-by\">\n              Championed by <a href={this.championUrl}>{this.championName}</a>\n            </div>\n          ) : null}\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

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

@@ -8,10 +8,17 @@ const BiggiveCategoryIcon$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveCate
     constructor() {
         super();
         this.__registerHost();
+        /**
+         * Background colour
+         */
         this.backgroundColour = 'primary';
+        /**
+         * Background colour
+         */
         this.iconColour = 'white';
-        this.icon = undefined;
-        this.label = undefined;
+        /**
+         * Url
+         */
         this.url = '#';
     }
     getCategoryIcon() {

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

@@ -1 +1 @@
-{"file":"biggive-category-icon.js","mappings":";;;AAAA,MAAM,sBAAsB,GAAG,u4LAAu4L,CAAC;AACv6L,kCAAe,sBAAsB;;MCQxBA,qBAAmB;;;;gCAIK,SAAS;0BAKf,OAAO;;;mBAcd,GAAG;;IAEjB,eAAe;QACrB,IAAI,IAAI,GAAG,uBAAuB,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC9D,OAAO,IAAI,CAAC;KACb;IAED,MAAM;QACJ,QACE,4DAAK,KAAK,EAAC,WAAW,IACpB,4DAAK,KAAK,EAAE,uCAAuC,GAAG,IAAI,CAAC,gBAAgB,IACzE,0DAAG,IAAI,EAAE,IAAI,CAAC,GAAG,IACf,4DACE,KAAK,EAAE,IAAI,CAAC,eAAe,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,EACrC,MAAM,EAAE,IAAI,CAAC,eAAe,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,EACtC,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC,UAAU,EAChC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,GAAG,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,IAEvF,6DAAM,CAAC,EAAE,IAAI,CAAC,eAAe,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,GAAI,CAClD,CACJ,CACA,EACN,4DAAK,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAO,CACjC,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveCategoryIcon"],"sources":["src/components/biggive-category-icon/biggive-category-icon.scss?tag=biggive-category-icon","src/components/biggive-category-icon/biggive-category-icon.tsx"],"sourcesContent":["@include backgrounds();\n@include fills();\n\n:host {\n  display: contents;\n}\n\n.container {\n  @include standard-font();\n  display: flex;\n  justify-content: flex-start;\n  .label {\n    padding-left: $spacer-3;\n    @include font-size-x-small();\n    width: 60px;\n    margin-top: auto;\n    margin-bottom: auto;\n  }\n}\n\n.category-icon-item {\n  @include icon-medium();\n}","import { IconDefinition } from '@fortawesome/fontawesome-svg-core';\nimport { Component, Prop, h } from '@stencil/core';\nimport { FontAwesomeIconsService } from '../../util/fontawesome-icons';\n\n@Component({\n  tag: 'biggive-category-icon',\n  styleUrl: 'biggive-category-icon.scss',\n  shadow: false,\n})\nexport class BiggiveCategoryIcon {\n  /**\n   * Background colour\n   */\n  @Prop() backgroundColour: string = 'primary';\n\n  /**\n   * Background colour\n   */\n  @Prop() iconColour: string = 'white';\n  /**\n   * Icon\n   */\n  @Prop() icon: string;\n\n  /**\n   * Label\n   */\n  @Prop() label: string;\n\n  /**\n   * Url\n   */\n  @Prop() url: string = '#';\n\n  private getCategoryIcon(): IconDefinition {\n    var icon = FontAwesomeIconsService.getCategoryIcon(this.icon);\n    return icon;\n  }\n\n  render() {\n    return (\n      <div class=\"container\">\n        <div class={'category-icon-item background-colour-' + this.backgroundColour}>\n          <a href={this.url}>\n            <svg\n              width={this.getCategoryIcon().icon[0]}\n              height={this.getCategoryIcon().icon[1]}\n              xmlns=\"http://www.w3.org/2000/svg\"\n              class={'fill-' + this.iconColour}\n              viewBox={'0 0 ' + this.getCategoryIcon().icon[0] + ' ' + this.getCategoryIcon().icon[1]}\n            >\n              <path d={this.getCategoryIcon().icon[4].toString()} />\n            </svg>\n          </a>\n        </div>\n        <div class=\"label\">{this.label}</div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"biggive-category-icon.js","mappings":";;;AAAA,MAAM,sBAAsB,GAAG,u4LAAu4L,CAAC;AACv6L,kCAAe,sBAAsB;;MCQxBA,qBAAmB;IALhC;;;;;;QASU,qBAAgB,GAAW,SAAS,CAAC;;;;QAKrC,eAAU,GAAW,OAAO,CAAC;;;;QAc7B,QAAG,GAAW,GAAG,CAAC;KA2B3B;IAzBS,eAAe;QACrB,IAAI,IAAI,GAAG,uBAAuB,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC9D,OAAO,IAAI,CAAC;KACb;IAED,MAAM;QACJ,QACE,4DAAK,KAAK,EAAC,WAAW,IACpB,4DAAK,KAAK,EAAE,uCAAuC,GAAG,IAAI,CAAC,gBAAgB,IACzE,0DAAG,IAAI,EAAE,IAAI,CAAC,GAAG,IACf,4DACE,KAAK,EAAE,IAAI,CAAC,eAAe,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,EACrC,MAAM,EAAE,IAAI,CAAC,eAAe,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,EACtC,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC,UAAU,EAChC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,GAAG,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,IAEvF,6DAAM,CAAC,EAAE,IAAI,CAAC,eAAe,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,GAAI,CAClD,CACJ,CACA,EACN,4DAAK,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAO,CACjC,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveCategoryIcon"],"sources":["src/components/biggive-category-icon/biggive-category-icon.scss?tag=biggive-category-icon","src/components/biggive-category-icon/biggive-category-icon.tsx"],"sourcesContent":["@include backgrounds();\n@include fills();\n\n:host {\n  display: contents;\n}\n\n.container {\n  @include standard-font();\n  display: flex;\n  justify-content: flex-start;\n  .label {\n    padding-left: $spacer-3;\n    @include font-size-x-small();\n    width: 60px;\n    margin-top: auto;\n    margin-bottom: auto;\n  }\n}\n\n.category-icon-item {\n  @include icon-medium();\n}","import { IconDefinition } from '@fortawesome/fontawesome-svg-core';\nimport { Component, Prop, h } from '@stencil/core';\nimport { FontAwesomeIconsService } from '../../util/fontawesome-icons';\n\n@Component({\n  tag: 'biggive-category-icon',\n  styleUrl: 'biggive-category-icon.scss',\n  shadow: false,\n})\nexport class BiggiveCategoryIcon {\n  /**\n   * Background colour\n   */\n  @Prop() backgroundColour: string = 'primary';\n\n  /**\n   * Background colour\n   */\n  @Prop() iconColour: string = 'white';\n  /**\n   * Icon\n   */\n  @Prop() icon: string;\n\n  /**\n   * Label\n   */\n  @Prop() label: string;\n\n  /**\n   * Url\n   */\n  @Prop() url: string = '#';\n\n  private getCategoryIcon(): IconDefinition {\n    var icon = FontAwesomeIconsService.getCategoryIcon(this.icon);\n    return icon;\n  }\n\n  render() {\n    return (\n      <div class=\"container\">\n        <div class={'category-icon-item background-colour-' + this.backgroundColour}>\n          <a href={this.url}>\n            <svg\n              width={this.getCategoryIcon().icon[0]}\n              height={this.getCategoryIcon().icon[1]}\n              xmlns=\"http://www.w3.org/2000/svg\"\n              class={'fill-' + this.iconColour}\n              viewBox={'0 0 ' + this.getCategoryIcon().icon[0] + ' ' + this.getCategoryIcon().icon[1]}\n            >\n              <path d={this.getCategoryIcon().icon[4].toString()} />\n            </svg>\n          </a>\n        </div>\n        <div class=\"label\">{this.label}</div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/biggive-container-card.js.map

@@ -1 +1 @@
-{"file":"biggive-container-card.js","mappings":";;AAAA,MAAM,uBAAuB,GAAG,knLAAknL,CAAC;AACnpL,mCAAe,uBAAuB;;MCQzBA,sBAAoB;;;;;0BACK,CAAC;gCAEG,SAAS;kCAEZ,EAAE;0BAEL,OAAO;0BAEP,OAAO;oCAED,IAAI;kCAEN,IAAI;4BAEI,CAAC;;IAE/C,MAAM;QACJ,QACE,4DACE,KAAK,EAAE,wBAAwB,GAAG,IAAI,CAAC,UAAU,GAAG,qBAAqB,GAAG,IAAI,CAAC,gBAAgB,EACjG,KAAK,EAAE,EAAE,kBAAkB,EAAE,OAAO,GAAG,IAAI,CAAC,kBAAkB,GAAG,IAAI,EAAE,IAEvE,4DAAK,KAAK,EAAE,2BAA2B,GAAG,IAAI,CAAC,UAAU,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,IAC3F,8DAAa,CACT,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveContainerCard"],"sources":["src/components/biggive-container-card/biggive-container-card.scss?tag=biggive-container-card&encapsulation=shadow","src/components/biggive-container-card/biggive-container-card.tsx"],"sourcesContent":["@include backgrounds();\n@include fills();\n@include spacers();\n@include text-colours();\n\n:host {\n  display: contents;\n}\n\n.container {\n  @include standard-font();\n  position: relative;\n  background-size: cover;\n  background-position: center center;\n  padding: $spacer-3;\n  height: 100%;\n  white-space: pre-wrap;\n  .sleeve {\n    padding: $spacer-5 $spacer-3;\n    height: 100%;\n    box-sizing: border-box;\n    transition: all 1s ease-in-out;\n  }\n  &.add-animation-true:hover .sleeve {\n    margin: -30px;\n    padding: 60px;\n    height: calc(100% + 60px);\n  }\n    .sleeve {\n      @include corner-clip-medium-bottom-left();\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\nimport { spacingOption } from '../../globals/spacing-option';\nimport { brandColour } from '../../globals/brand-colour';\n\n@Component({\n  tag: 'biggive-container-card',\n  styleUrl: 'biggive-container-card.scss',\n  shadow: true,\n})\nexport class BiggiveContainerCard {\n  @Prop() spaceBelow: spacingOption = 0;\n\n  @Prop() backgroundColour: brandColour = 'primary';\n\n  @Prop() backgroundImageUrl: string = '';\n\n  @Prop() cardColour: brandColour = 'white';\n\n  @Prop() textColour: brandColour = 'black';\n\n  @Prop() clipBottomLeftCorner: boolean = true;\n\n  @Prop() clipTopRightCorner: boolean = true;\n\n  @Prop() headingLevel: 1 | 2 | 3 | 4 | 5 | 6 = 3;\n\n  render() {\n    return (\n      <div\n        class={'container space-below-' + this.spaceBelow + ' background-colour-' + this.backgroundColour}\n        style={{ 'background-image': \"url('\" + this.backgroundImageUrl + \"')\" }}\n      >\n        <div class={'sleeve background-colour-' + this.cardColour + ' text-colour-' + this.textColour}>\n          <slot></slot>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"biggive-container-card.js","mappings":";;AAAA,MAAM,uBAAuB,GAAG,knLAAknL,CAAC;AACnpL,mCAAe,uBAAuB;;MCQzBA,sBAAoB;IALjC;;;;QAMU,eAAU,GAAkB,CAAC,CAAC;QAE9B,qBAAgB,GAAgB,SAAS,CAAC;QAE1C,uBAAkB,GAAW,EAAE,CAAC;QAEhC,eAAU,GAAgB,OAAO,CAAC;QAElC,eAAU,GAAgB,OAAO,CAAC;QAElC,yBAAoB,GAAY,IAAI,CAAC;QAErC,uBAAkB,GAAY,IAAI,CAAC;QAEnC,iBAAY,GAA0B,CAAC,CAAC;KAcjD;IAZC,MAAM;QACJ,QACE,4DACE,KAAK,EAAE,wBAAwB,GAAG,IAAI,CAAC,UAAU,GAAG,qBAAqB,GAAG,IAAI,CAAC,gBAAgB,EACjG,KAAK,EAAE,EAAE,kBAAkB,EAAE,OAAO,GAAG,IAAI,CAAC,kBAAkB,GAAG,IAAI,EAAE,IAEvE,4DAAK,KAAK,EAAE,2BAA2B,GAAG,IAAI,CAAC,UAAU,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,IAC3F,8DAAa,CACT,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveContainerCard"],"sources":["src/components/biggive-container-card/biggive-container-card.scss?tag=biggive-container-card&encapsulation=shadow","src/components/biggive-container-card/biggive-container-card.tsx"],"sourcesContent":["@include backgrounds();\n@include fills();\n@include spacers();\n@include text-colours();\n\n:host {\n  display: contents;\n}\n\n.container {\n  @include standard-font();\n  position: relative;\n  background-size: cover;\n  background-position: center center;\n  padding: $spacer-3;\n  height: 100%;\n  white-space: pre-wrap;\n  .sleeve {\n    padding: $spacer-5 $spacer-3;\n    height: 100%;\n    box-sizing: border-box;\n    transition: all 1s ease-in-out;\n  }\n  &.add-animation-true:hover .sleeve {\n    margin: -30px;\n    padding: 60px;\n    height: calc(100% + 60px);\n  }\n    .sleeve {\n      @include corner-clip-medium-bottom-left();\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\nimport { spacingOption } from '../../globals/spacing-option';\nimport { brandColour } from '../../globals/brand-colour';\n\n@Component({\n  tag: 'biggive-container-card',\n  styleUrl: 'biggive-container-card.scss',\n  shadow: true,\n})\nexport class BiggiveContainerCard {\n  @Prop() spaceBelow: spacingOption = 0;\n\n  @Prop() backgroundColour: brandColour = 'primary';\n\n  @Prop() backgroundImageUrl: string = '';\n\n  @Prop() cardColour: brandColour = 'white';\n\n  @Prop() textColour: brandColour = 'black';\n\n  @Prop() clipBottomLeftCorner: boolean = true;\n\n  @Prop() clipTopRightCorner: boolean = true;\n\n  @Prop() headingLevel: 1 | 2 | 3 | 4 | 5 | 6 = 3;\n\n  render() {\n    return (\n      <div\n        class={'container space-below-' + this.spaceBelow + ' background-colour-' + this.backgroundColour}\n        style={{ 'background-image': \"url('\" + this.backgroundImageUrl + \"')\" }}\n      >\n        <div class={'sleeve background-colour-' + this.cardColour + ' text-colour-' + this.textColour}>\n          <slot></slot>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/biggive-cookie-banner.js

@@ -13,6 +13,22 @@ const BiggiveCookieBanner$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveCook
         this.preferenceModalClosed = createEvent(this, "preferenceModalClosed", 7);
         this.cookieBannerAcceptAllSelected = createEvent(this, "cookieBannerAcceptAllSelected", 7);
         this.cookieBannerSavePreferencesSelected = createEvent(this, "cookieBannerSavePreferencesSelected", 7);
+        /**
+         * If true the Preferences modal will be auto-opened - for use when the user has requested to edit their cookie
+         * preferences
+         */
+        this.autoOpenPreferences = false;
+        /**
+         * This type is similar to CookiePreferences from donate-frontend/src/app/cookiePreference.service.ts
+         * but afaik there isn't a nice way to share a type.
+         *
+         * When updating please also update the copy in the type of cookieBannerSavePreferencesSelected - using a named type
+         * there caused build problems.
+         *
+         * When updating please also update the type of cookieBannerSavePreferencesSelected - I didn't find a way
+         * to avoid the duplication.
+         */
+        this.previouslyAgreedCookiePreferences = undefined;
         this.handleChoosePrefencesClick = () => {
             var _a;
             const elementById = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('cookie-preferences-popup');
@@ -41,9 +57,6 @@ const BiggiveCookieBanner$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveCook
             // and make this component disappear.
             this.cookieBannerAcceptAllSelected.emit();
         };
-        this.autoOpenPreferences = false;
-        this.blogUriPrefix = undefined;
-        this.previouslyAgreedCookiePreferences = undefined;
     }
     componentDidLoad() {
         this.autoOpenPreferencesIfRequested();

package/dist/components/biggive-cookie-banner.js.map

@@ -1 +1 @@
-{"file":"biggive-cookie-banner.js","mappings":"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","names":["BiggiveCookieBanner"],"sources":["src/components/biggive-cookie-banner/biggive-cookie-banner.scss?tag=biggive-cookie-banner&encapsulation=shadow","src/components/biggive-cookie-banner/biggive-cookie-banner.tsx"],"sourcesContent":["@include backgrounds();\n@include fills();\n@include spacers();\n@include text-colours();\n\n:host {\n  display: contents;\n}\n\nh2:first-child {\n  // padding of the container is enough, a top margin would make the banner unsymmetrical.\n  margin-top: 0;\n}\n\ndiv.cooke-consent-container {\n  @include standard-font();\n  @include font-size-small();\n  border-radius: 10px;\n  background: white;\n  border: 1px solid black;\n  max-width: 650px;\n  padding: 1em;\n}\n\ndiv.button-group {\n  margin-top: 1em;\n  display: flex;\n  justify-content: space-evenly;\n  width: 100%;\n  flex-direction: column;\n  gap: 1em;\n\n  @media screen and (min-width: $screen-mobile-medium) {\n    flex-direction: row-reverse;\n  }\n}\n\nbiggive-popup {\n  @include font-size-medium();\n  div.content {\n    max-height: 95vh;\n    overflow: auto;\n    h5 {\n      border-bottom: 2px solid black;\n      max-width: 25em;\n      margin-bottom: 5px;\n    }\n\n    p {\n      margin-top: 5px;\n      margin-bottom: 8px;\n    }\n\n    div.radio-group {\n      margin-bottom: 30px;\n    }\n  }\n}\n","import { Component, Element, Prop, h, Event, EventEmitter, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-cookie-banner',\n  styleUrl: 'biggive-cookie-banner.scss',\n  shadow: true,\n})\nexport class BiggiveCookieBanner {\n  /**\n   * If true the Preferences modal will be auto-opened - for use when the user has requested to edit their cookie\n   * preferences\n   */\n  @Prop() autoOpenPreferences: boolean = false;\n  @Prop() blogUriPrefix!: string;\n\n  /**\n   * This type is similar to CookiePreferences from donate-frontend/src/app/cookiePreference.service.ts\n   * but afaik there isn't a nice way to share a type.\n   *\n   * When updating please also update the copy in the type of cookieBannerSavePreferencesSelected - using a named type\n   * there caused build problems.\n   *\n   * When updating please also update the type of cookieBannerSavePreferencesSelected - I didn't find a way\n   * to avoid the duplication.\n   */\n  @Prop() previouslyAgreedCookiePreferences:\n    | {\n        analyticsAndTesting: boolean;\n        thirdParty: boolean;\n      }\n    | undefined = undefined;\n  @Element() el: HTMLBiggiveCookieBannerElement;\n\n  @Event({\n    eventName: 'preferenceModalClosed',\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  preferenceModalClosed: EventEmitter<void>;\n\n  /**\n   * Indicates that the user accepts cookies for any purpose, without discrimination.\n   */\n  @Event({\n    eventName: 'cookieBannerAcceptAllSelected',\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  cookieBannerAcceptAllSelected: EventEmitter<void>;\n\n  /**\n   * Indicates that the user has made a selection of cookies purpose to accept.\n   *\n   * Event data is an object with boolean properties to say whether the user accepts or refuses each category of optional cookie.\n   *\n   * When updating this type please also update the type of previouslyAgreedCookiePreferences.\n   */\n  @Event({\n    eventName: 'cookieBannerSavePreferencesSelected',\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  cookieBannerSavePreferencesSelected: EventEmitter<{\n    analyticsAndTesting: boolean;\n    thirdParty: boolean;\n  }>;\n\n  componentDidLoad() {\n    this.autoOpenPreferencesIfRequested();\n  }\n\n  @Watch('autoOpenPreferences')\n  private autoOpenPreferencesIfRequested() {\n    if (this.autoOpenPreferences) {\n      this.handleChoosePrefencesClick();\n    }\n  }\n\n  private handleChoosePrefencesClick = () => {\n    const elementById = this.el.shadowRoot?.getElementById('cookie-preferences-popup') as HTMLBiggivePopupElement;\n    elementById.openFromOutside();\n  };\n\n  private handleAcceptSelectedCookies = () => {\n    const elementById = this.el.shadowRoot?.getElementById('cookie-preferences-popup') as HTMLBiggivePopupElement;\n    elementById.closeFromOutside();\n\n    const analyticsAndTestingRadio = this.el.shadowRoot?.getElementById('a-and-t-on') as HTMLInputElement;\n    const thirdPartyRadio = this.el.shadowRoot?.getElementById('third-party-on') as HTMLInputElement;\n\n    this.cookieBannerSavePreferencesSelected.emit({ analyticsAndTesting: analyticsAndTestingRadio.checked, thirdParty: thirdPartyRadio.checked });\n\n    elementById.closeFromOutside();\n  };\n\n  /**\n   * Emits the same event as if the user had gone into preferences and said no to every option.\n   */\n  private handleRejectAllClicked = () => {\n    this.cookieBannerSavePreferencesSelected.emit({ analyticsAndTesting: false, thirdParty: false });\n\n    const elementById = this.el.shadowRoot?.getElementById('cookie-preferences-popup') as HTMLBiggivePopupElement;\n    elementById.closeFromOutside();\n  };\n\n  private handleAcceptAllClick = () => {\n    // We just emit the event - it will be up to the application, e.g. wp or frontend to listen for the event, record the acceptence, and make\n    // and make this component disappear.\n\n    this.cookieBannerAcceptAllSelected.emit();\n  };\n\n  render() {\n    // Using Partial type to give more flexibility for updates - if the list of preferences available here grows\n    // then the app may only pass a partial set of them in for a time. Any preference not passed will be treated as\n    // declined.\n    const cookiesCurrentlyAllowed: Partial<typeof this.previouslyAgreedCookiePreferences> = this.previouslyAgreedCookiePreferences || {};\n\n    return (\n      <div class=\"cooke-consent-container\">\n        <biggive-popup id=\"cookie-preferences-popup\" modalClosedCallback={this.preferenceModalClosed.emit}>\n          <div class=\"content\">\n            <h4 class=\"space-above-0 space-below-3 text-colour-primary\">Manage your cookie preferences</h4>\n            <form>\n              <div class=\"radio-group\">\n                <h5>Essential Cookies</h5>\n                <p>These cookies are necessary to ensure our website functions correctly and include required cookies from third parties.</p>\n                <input type=\"radio\" name=\"necassary\" id=\"necassary-off\" disabled={true} />\n                <label htmlFor=\"necassary-on\">Off</label>\n\n                <input type=\"radio\" name=\"necassary\" id=\"necassary-on\" disabled={true} checked={true} />\n                <label htmlFor=\"necassary-on\">On</label>\n              </div>\n\n              <div class=\"radio-group\">\n                <h5>Analytics & Testing Cookies</h5>\n                <p>\n                  We use analytics cookies to track activity on our website. For example, the pages you’ve visited, the content you’ve engaged with and the search terms you’ve\n                  used. This allows us to personalise and improve our content.\n                </p>\n\n                <p>\n                  We use testing cookies to collect data on how you interact with website features. These insights allow us to update our website and build features that enhance\n                  your user experience.\n                </p>\n                <input type=\"radio\" name=\"a-and-t\" id=\"a-and-t-off\" checked={!cookiesCurrentlyAllowed.analyticsAndTesting} />\n                <label htmlFor=\"a-and-t-off\">Off</label>\n\n                <input type=\"radio\" name=\"a-and-t\" id=\"a-and-t-on\" checked={!!cookiesCurrentlyAllowed.analyticsAndTesting} />\n                <label htmlFor=\"a-and-t-on\">On</label>\n              </div>\n\n              <div class=\"radio-group\">\n                <h5>Third-party Cookies </h5>\n                <p>\n                  These cookies are used to track activity, which can help to provide a better experience and improve functionality across various applications. For example, our\n                  donation experience survey.\n                </p>\n                <input type=\"radio\" name=\"third-party\" id=\"third-party-off\" checked={!cookiesCurrentlyAllowed.thirdParty} />\n                <label htmlFor=\"third-party-off\">Off</label>\n\n                <input type=\"radio\" name=\"third-party\" id=\"third-party-on\" checked={!!cookiesCurrentlyAllowed.thirdParty} />\n                <label htmlFor=\"third-party-on\">On</label>\n              </div>\n\n              <biggive-button\n                space-below=\"0\"\n                space-above=\"2\"\n                colour-scheme=\"secondary\"\n                is-past-campaign=\"false\"\n                is-future-campaign=\"false\"\n                label=\"Accept Selected Cookies\"\n                open-in-new-tab=\"false\"\n                full-width=\"false\"\n                size=\"small\"\n                rounded={false}\n                centered={false}\n                button-id=\"accept-selected-button\"\n                onClick={this.handleAcceptSelectedCookies}\n              ></biggive-button>\n            </form>\n\n            <p>You can change the above settings for this browser at any time by clicking the privacy settings link in the footer of the page.</p>\n          </div>\n        </biggive-popup>\n\n        <h2>Our website uses cookies</h2>\n\n        <p>\n          We use some essential cookies to make our website work. We'd also like to share data with our analytics platform and use analytics cookies to understand how you use the\n          website and make improvements.\n        </p>\n\n        <p>\n          <a href={this.blogUriPrefix + '/privacy#cookies'} target=\"_blank\">\n            Find out more in our Cookies Statement\n          </a>\n        </p>\n\n        <div class=\"button-group\">\n          <biggive-button\n            onClick={this.handleAcceptAllClick}\n            space-below=\"0\"\n            colour-scheme=\"secondary\"\n            is-past-campaign=\"false\"\n            is-future-campaign=\"false\"\n            label=\"Accept All\"\n            open-in-new-tab=\"false\"\n            full-width=\"true\"\n            size=\"medium\"\n            rounded={false}\n            centered={false}\n            button-id=\"accept-all-button\"\n          ></biggive-button>\n\n          <biggive-button\n            onClick={this.handleRejectAllClicked}\n            space-below=\"0\"\n            colour-scheme=\"grey-light\"\n            is-past-campaign=\"false\"\n            is-future-campaign=\"false\"\n            label=\"Essential Cookies Only\"\n            open-in-new-tab=\"false\"\n            full-width=\"true\"\n            size=\"medium\"\n            rounded={false}\n            centered={false}\n            button-id=\"choose-preferences-button\"\n          ></biggive-button>\n\n          <biggive-button\n            onClick={this.handleChoosePrefencesClick}\n            space-below=\"0\"\n            colour-scheme=\"grey-light\"\n            is-past-campaign=\"false\"\n            is-future-campaign=\"false\"\n            label=\"Choose Preferences\"\n            open-in-new-tab=\"false\"\n            full-width=\"true\"\n            size=\"medium\"\n            rounded={false}\n            centered={false}\n            button-id=\"choose-preferences-button\"\n          ></biggive-button>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"biggive-cookie-banner.js","mappings":"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","names":["BiggiveCookieBanner"],"sources":["src/components/biggive-cookie-banner/biggive-cookie-banner.scss?tag=biggive-cookie-banner&encapsulation=shadow","src/components/biggive-cookie-banner/biggive-cookie-banner.tsx"],"sourcesContent":["@include backgrounds();\n@include fills();\n@include spacers();\n@include text-colours();\n\n:host {\n  display: contents;\n}\n\nh2:first-child {\n  // padding of the container is enough, a top margin would make the banner unsymmetrical.\n  margin-top: 0;\n}\n\ndiv.cooke-consent-container {\n  @include standard-font();\n  @include font-size-small();\n  border-radius: 10px;\n  background: white;\n  border: 1px solid black;\n  max-width: 650px;\n  padding: 1em;\n}\n\ndiv.button-group {\n  margin-top: 1em;\n  display: flex;\n  justify-content: space-evenly;\n  width: 100%;\n  flex-direction: column;\n  gap: 1em;\n\n  @media screen and (min-width: $screen-mobile-medium) {\n    flex-direction: row-reverse;\n  }\n}\n\nbiggive-popup {\n  @include font-size-medium();\n  div.content {\n    max-height: 95vh;\n    overflow: auto;\n    h5 {\n      border-bottom: 2px solid black;\n      max-width: 25em;\n      margin-bottom: 5px;\n    }\n\n    p {\n      margin-top: 5px;\n      margin-bottom: 8px;\n    }\n\n    div.radio-group {\n      margin-bottom: 30px;\n    }\n  }\n}\n","import { Component, Element, Prop, h, Event, EventEmitter, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-cookie-banner',\n  styleUrl: 'biggive-cookie-banner.scss',\n  shadow: true,\n})\nexport class BiggiveCookieBanner {\n  /**\n   * If true the Preferences modal will be auto-opened - for use when the user has requested to edit their cookie\n   * preferences\n   */\n  @Prop() autoOpenPreferences: boolean = false;\n  @Prop() blogUriPrefix!: string;\n\n  /**\n   * This type is similar to CookiePreferences from donate-frontend/src/app/cookiePreference.service.ts\n   * but afaik there isn't a nice way to share a type.\n   *\n   * When updating please also update the copy in the type of cookieBannerSavePreferencesSelected - using a named type\n   * there caused build problems.\n   *\n   * When updating please also update the type of cookieBannerSavePreferencesSelected - I didn't find a way\n   * to avoid the duplication.\n   */\n  @Prop() previouslyAgreedCookiePreferences:\n    | {\n        analyticsAndTesting: boolean;\n        thirdParty: boolean;\n      }\n    | undefined = undefined;\n  @Element() el: HTMLBiggiveCookieBannerElement;\n\n  @Event({\n    eventName: 'preferenceModalClosed',\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  preferenceModalClosed: EventEmitter<void>;\n\n  /**\n   * Indicates that the user accepts cookies for any purpose, without discrimination.\n   */\n  @Event({\n    eventName: 'cookieBannerAcceptAllSelected',\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  cookieBannerAcceptAllSelected: EventEmitter<void>;\n\n  /**\n   * Indicates that the user has made a selection of cookies purpose to accept.\n   *\n   * Event data is an object with boolean properties to say whether the user accepts or refuses each category of optional cookie.\n   *\n   * When updating this type please also update the type of previouslyAgreedCookiePreferences.\n   */\n  @Event({\n    eventName: 'cookieBannerSavePreferencesSelected',\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  cookieBannerSavePreferencesSelected: EventEmitter<{\n    analyticsAndTesting: boolean;\n    thirdParty: boolean;\n  }>;\n\n  componentDidLoad() {\n    this.autoOpenPreferencesIfRequested();\n  }\n\n  @Watch('autoOpenPreferences')\n  private autoOpenPreferencesIfRequested() {\n    if (this.autoOpenPreferences) {\n      this.handleChoosePrefencesClick();\n    }\n  }\n\n  private handleChoosePrefencesClick = () => {\n    const elementById = this.el.shadowRoot?.getElementById('cookie-preferences-popup') as HTMLBiggivePopupElement;\n    elementById.openFromOutside();\n  };\n\n  private handleAcceptSelectedCookies = () => {\n    const elementById = this.el.shadowRoot?.getElementById('cookie-preferences-popup') as HTMLBiggivePopupElement;\n    elementById.closeFromOutside();\n\n    const analyticsAndTestingRadio = this.el.shadowRoot?.getElementById('a-and-t-on') as HTMLInputElement;\n    const thirdPartyRadio = this.el.shadowRoot?.getElementById('third-party-on') as HTMLInputElement;\n\n    this.cookieBannerSavePreferencesSelected.emit({ analyticsAndTesting: analyticsAndTestingRadio.checked, thirdParty: thirdPartyRadio.checked });\n\n    elementById.closeFromOutside();\n  };\n\n  /**\n   * Emits the same event as if the user had gone into preferences and said no to every option.\n   */\n  private handleRejectAllClicked = () => {\n    this.cookieBannerSavePreferencesSelected.emit({ analyticsAndTesting: false, thirdParty: false });\n\n    const elementById = this.el.shadowRoot?.getElementById('cookie-preferences-popup') as HTMLBiggivePopupElement;\n    elementById.closeFromOutside();\n  };\n\n  private handleAcceptAllClick = () => {\n    // We just emit the event - it will be up to the application, e.g. wp or frontend to listen for the event, record the acceptence, and make\n    // and make this component disappear.\n\n    this.cookieBannerAcceptAllSelected.emit();\n  };\n\n  render() {\n    // Using Partial type to give more flexibility for updates - if the list of preferences available here grows\n    // then the app may only pass a partial set of them in for a time. Any preference not passed will be treated as\n    // declined.\n    const cookiesCurrentlyAllowed: Partial<typeof this.previouslyAgreedCookiePreferences> = this.previouslyAgreedCookiePreferences || {};\n\n    return (\n      <div class=\"cooke-consent-container\">\n        <biggive-popup id=\"cookie-preferences-popup\" modalClosedCallback={this.preferenceModalClosed.emit}>\n          <div class=\"content\">\n            <h4 class=\"space-above-0 space-below-3 text-colour-primary\">Manage your cookie preferences</h4>\n            <form>\n              <div class=\"radio-group\">\n                <h5>Essential Cookies</h5>\n                <p>These cookies are necessary to ensure our website functions correctly and include required cookies from third parties.</p>\n                <input type=\"radio\" name=\"necassary\" id=\"necassary-off\" disabled={true} />\n                <label htmlFor=\"necassary-on\">Off</label>\n\n                <input type=\"radio\" name=\"necassary\" id=\"necassary-on\" disabled={true} checked={true} />\n                <label htmlFor=\"necassary-on\">On</label>\n              </div>\n\n              <div class=\"radio-group\">\n                <h5>Analytics & Testing Cookies</h5>\n                <p>\n                  We use analytics cookies to track activity on our website. For example, the pages you’ve visited, the content you’ve engaged with and the search terms you’ve\n                  used. This allows us to personalise and improve our content.\n                </p>\n\n                <p>\n                  We use testing cookies to collect data on how you interact with website features. These insights allow us to update our website and build features that enhance\n                  your user experience.\n                </p>\n                <input type=\"radio\" name=\"a-and-t\" id=\"a-and-t-off\" checked={!cookiesCurrentlyAllowed.analyticsAndTesting} />\n                <label htmlFor=\"a-and-t-off\">Off</label>\n\n                <input type=\"radio\" name=\"a-and-t\" id=\"a-and-t-on\" checked={!!cookiesCurrentlyAllowed.analyticsAndTesting} />\n                <label htmlFor=\"a-and-t-on\">On</label>\n              </div>\n\n              <div class=\"radio-group\">\n                <h5>Third-party Cookies </h5>\n                <p>\n                  These cookies are used to track activity, which can help to provide a better experience and improve functionality across various applications. For example, our\n                  donation experience survey.\n                </p>\n                <input type=\"radio\" name=\"third-party\" id=\"third-party-off\" checked={!cookiesCurrentlyAllowed.thirdParty} />\n                <label htmlFor=\"third-party-off\">Off</label>\n\n                <input type=\"radio\" name=\"third-party\" id=\"third-party-on\" checked={!!cookiesCurrentlyAllowed.thirdParty} />\n                <label htmlFor=\"third-party-on\">On</label>\n              </div>\n\n              <biggive-button\n                space-below=\"0\"\n                space-above=\"2\"\n                colour-scheme=\"secondary\"\n                is-past-campaign=\"false\"\n                is-future-campaign=\"false\"\n                label=\"Accept Selected Cookies\"\n                open-in-new-tab=\"false\"\n                full-width=\"false\"\n                size=\"small\"\n                rounded={false}\n                centered={false}\n                button-id=\"accept-selected-button\"\n                onClick={this.handleAcceptSelectedCookies}\n              ></biggive-button>\n            </form>\n\n            <p>You can change the above settings for this browser at any time by clicking the privacy settings link in the footer of the page.</p>\n          </div>\n        </biggive-popup>\n\n        <h2>Our website uses cookies</h2>\n\n        <p>\n          We use some essential cookies to make our website work. We'd also like to share data with our analytics platform and use analytics cookies to understand how you use the\n          website and make improvements.\n        </p>\n\n        <p>\n          <a href={this.blogUriPrefix + '/privacy#cookies'} target=\"_blank\">\n            Find out more in our Cookies Statement\n          </a>\n        </p>\n\n        <div class=\"button-group\">\n          <biggive-button\n            onClick={this.handleAcceptAllClick}\n            space-below=\"0\"\n            colour-scheme=\"secondary\"\n            is-past-campaign=\"false\"\n            is-future-campaign=\"false\"\n            label=\"Accept All\"\n            open-in-new-tab=\"false\"\n            full-width=\"true\"\n            size=\"medium\"\n            rounded={false}\n            centered={false}\n            button-id=\"accept-all-button\"\n          ></biggive-button>\n\n          <biggive-button\n            onClick={this.handleRejectAllClicked}\n            space-below=\"0\"\n            colour-scheme=\"grey-light\"\n            is-past-campaign=\"false\"\n            is-future-campaign=\"false\"\n            label=\"Essential Cookies Only\"\n            open-in-new-tab=\"false\"\n            full-width=\"true\"\n            size=\"medium\"\n            rounded={false}\n            centered={false}\n            button-id=\"choose-preferences-button\"\n          ></biggive-button>\n\n          <biggive-button\n            onClick={this.handleChoosePrefencesClick}\n            space-below=\"0\"\n            colour-scheme=\"grey-light\"\n            is-past-campaign=\"false\"\n            is-future-campaign=\"false\"\n            label=\"Choose Preferences\"\n            open-in-new-tab=\"false\"\n            full-width=\"true\"\n            size=\"medium\"\n            rounded={false}\n            centered={false}\n            button-id=\"choose-preferences-button\"\n          ></biggive-button>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/biggive-footer.js

@@ -11,11 +11,12 @@ const BiggiveFooter$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveFooter ext
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.year = new Date().getFullYear().toString();
         this.headingLevel = 5;
-        this.donateUrlPrefix = undefined;
-        this.blogUrlPrefix = undefined;
-        this.experienceUrlPrefix = undefined;
+        this.year = new Date().getFullYear().toString();
+        /**
+         * Conditionally render footer menu:
+         * hard-coded (preset) when set to true, dynamic (slot-based) when set to false
+         */
         this.usePresetFooter = false;
     }
     appendMenu(menuName) {

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

@@ -1 +1 @@
-{"file":"biggive-footer.js","mappings":"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","names":["BiggiveFooter"],"sources":["src/components/biggive-footer/biggive-footer.scss?tag=biggive-footer&encapsulation=shadow","src/components/biggive-footer/biggive-footer.tsx"],"sourcesContent":[":host {\n  display: contents;\n}\n\n.footer {\n  @include standard-font();\n  color: $colour-white;\n}\n\nnav {\n  width: calc(33.3% - 20px);\n  margin: 0;\n  padding: 0;\n  .heading {\n    @include heading-5();\n    border-bottom: 1px solid $colour-white;\n    padding-bottom: $spacer-2;\n    margin-bottom: $spacer-2;\n  }\n  ul {\n    margin: 0;\n    padding: 0;\n    li {\n      margin: 0;\n      padding: 0;\n      list-style-type: none;\n      margin-top: 15px;\n    }\n  }\n}\n\nnav ul li a {\n  color: $colour-white;\n  text-decoration: none;\n  // target all classes prefixed with 'icon-' so we don't repeat code\n  &[class^='icon-'],\n  &[class*='icon-'] {\n    padding-left: 20px;\n    background-repeat: no-repeat;\n    background-size: auto 10px;\n    background-position: left center;\n  }\n\n  &.icon-green {\n    background-image: url(/assets/images/triangles-combined-green-match-white.svg);\n  }\n\n  &.icon-children {\n    background-image: url(/assets/images/triangles-combined-children-white.svg);\n  }\n\n  &.icon-christmas {\n    background-image: url(/assets/images/triangles-combined-christmas-challenge-white.svg);\n  }\n\n  &.icon-green-match {\n    background-image: url(/assets/images/triangles-combined-green-match-white.svg);\n  }\n\n  &.icon-women-girls {\n    background-image: url(/assets/images/triangles-combined-women-girls-white.svg);\n  }\n\n  &.icon-mental-health {\n    background-image: url(/assets/images/triangles-combined-mental-health-white.svg);\n  }\n\n  &.icon-anchor-match {\n    background-image: url(/assets/images/triangles-combined-anchor-white.svg);\n  }\n\n  &.icon-emergency {\n    background-image: url(/assets/images/triangles-combined-emergency-white.svg);\n  }\n\n  &.icon-arts {\n    background-image: url(/assets/images/triangles-combined-arts-white.svg);\n  }\n}\n\n.row-top {\n  background-image: url(/assets/images/biggive-triangle-green.svg);\n  background-repeat: no-repeat;\n  background-size: auto 75px;\n  background-position: $spacer-6 30px;\n  background-color: $colour-primary-blue;\n  padding: 100px $spacer-6 $spacer-6 $spacer-6;\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: space-between;\n\n  .button-wrap {\n    margin-top: $spacer-6;\n    width: 100%;\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: space-between;\n  }\n}\n\nfooter .row-bottom {\n  background-color: $colour-black;\n  padding: $spacer-6 $spacer-6 $spacer-3 $spacer-6;\n  border-top: 1px solid $colour-white;\n\n  .fr-logo {\n    width: 135px;\n  }\n\n  .postscript-wrap {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: space-between;\n\n    @media screen and (max-width: $screen-tablet-max) {\n      flex-direction: column;\n    }\n  }\n\n  .nav.nav-postscript {\n    text-align: right;\n    flex-grow: 1;\n\n    @media screen and (max-width: $screen-tablet-max) {\n      text-align: center;\n    }\n  }\n\n  .nav-postscript li {\n    display: inline-block;\n    margin-left: 1rem;\n\n    &:first-child {\n      margin-left: 0;\n    }\n\n    @media screen and (max-width: $screen-tablet-max) {\n      display: block;\n      width: 100%;\n      margin-left: 0;\n    }\n  }\n\n  .social-icon-wrap {\n    border-top: 1px solid $colour-white;\n    padding-top: $spacer-4;\n    margin-top: $spacer-4;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-bottom: $spacer-4;\n\n    .social-icon-item {\n      margin: 0 $spacer-3;\n    }\n  }\n\n  p {\n    text-align: center;\n  }\n}\n\n@media screen and (max-width: $screen-tablet-max) {\n  .row-top {\n    padding: $spacer-3;\n  }\n}\n\n@media screen and (max-width: $screen-tablet-max) {\n  nav {\n    width: 100%;\n    margin-right: 0;\n    margin-bottom: $spacer-4;\n  }\n\n  .row-top {\n    background-size: auto 50px;\n    padding-top: 80px;\n    padding-left: 15px;\n    background-position: 15px 30px;\n\n    .button-wrap * {\n      width: 100% !important;\n    }\n  }\n}\n","import { Component, Element, getAssetPath, h, Prop } from '@stencil/core';\nimport { makeURL } from '../../util/helper-methods';\n\n@Component({\n  tag: 'biggive-footer',\n  styleUrl: 'biggive-footer.scss',\n  shadow: true,\n})\nexport class BiggiveFooter {\n  @Element() host: HTMLBiggiveFooterElement;\n\n  @Prop() headingLevel: 1 | 2 | 3 | 4 | 5 | 6 = 5;\n\n  /**\n   * URL prefixes vary by environment, and components library is not best placed to know what they are, so we\n   * take them as props\n   */\n  @Prop() donateUrlPrefix: string;\n  @Prop() blogUrlPrefix: string | undefined;\n  @Prop() experienceUrlPrefix: string | undefined;\n  private year: string = new Date().getFullYear().toString();\n\n  /**\n   * Conditionally render footer menu:\n   * hard-coded (preset) when set to true, dynamic (slot-based) when set to false\n   */\n  @Prop() usePresetFooter = false;\n\n  private appendMenu(menuName: string) {\n    var node = this.host.querySelector(`[slot=\"${menuName}\"]`);\n    if (node !== null) {\n      this.host!.shadowRoot!.querySelector(`.${menuName}`)!.appendChild(node);\n    }\n  }\n\n  componentDidRender() {\n    if (!this.usePresetFooter) {\n      this.appendMenu('nav-primary');\n      this.appendMenu('nav-secondary');\n      this.appendMenu('nav-tertiary');\n      this.appendMenu('nav-postscript');\n    }\n  }\n\n  render() {\n    const HeadingTag = `h${this.headingLevel}`;\n    const slotBasedFooter = () => {\n      return (\n        <footer class=\"footer\">\n          <div class=\"row row-top\">\n            <nav class=\"nav nav-primary\" aria-labelledby=\"footer-primary-heading\">\n              <HeadingTag class=\"heading\" id=\"footer-primary-heading\">\n                <slot name=\"nav-primary-title\"></slot>\n              </HeadingTag>\n            </nav>\n\n            <nav class=\"nav nav-secondary\" aria-labelledby=\"footer-secondary-heading-heading\">\n              <HeadingTag class=\"heading\" id=\"footer-secondary-heading\">\n                <slot name=\"nav-secondary-title\"></slot>\n              </HeadingTag>\n            </nav>\n\n            <nav class=\"nav nav-tertiary\" aria-labelledby=\"footer-tertiary-heading\">\n              <HeadingTag class=\"heading\" id=\"footer-tertiary-heading\">\n                <slot name=\"nav-tertiary-title\"></slot>\n              </HeadingTag>\n            </nav>\n\n            <div class=\"button-wrap\">\n              <biggive-button colour-scheme=\"white\" url=\"https://biggive.org/charities\" label=\"For charities\"></biggive-button>\n              <biggive-button colour-scheme=\"white\" url=\"https://biggive.org/funders\" label=\"For funders\"></biggive-button>\n            </div>\n          </div>\n\n          <div class=\"row row-bottom\">\n            <div class=\"postscript-wrap\">\n              <img class=\"fr-logo\" src={getAssetPath('/assets/images/fundraising-regulator.png')} alt=\"Registered with FUNDRAISING REGULATOR\" />\n\n              <nav class=\"nav nav-postscript\" aria-label=\"Legal\"></nav>\n            </div>\n\n            <div class=\"social-icon-wrap\">\n              <slot name=\"social-icons\"></slot>\n            </div>\n            <p>&copy; 2007 – {this.year} The Big Give Trust (1136547) | Company number 07273065 | Dragon Court, 27-29 Macklin Street, London WC2B 5LX, United Kingdom</p>\n          </div>\n        </footer>\n      );\n    };\n\n    const presetFooter = () => {\n      return (\n        <footer class=\"footer\">\n          <div class=\"row row-top\">\n            <nav class=\"nav nav-primary\" aria-labelledby=\"footer-primary-heading\">\n              <HeadingTag class=\"heading\" id=\"footer-primary-heading\">\n                <div slot=\"nav-primary-title\">Match Funding Opportunities</div>\n              </HeadingTag>\n              <ul slot=\"nav-primary\">\n                <li>\n                  <a href={makeURL('Blog', this.blogUrlPrefix, 'christmas-challenge')} class=\"icon-christmas\">\n                    Christmas Challenge\n                  </a>\n                </li>\n                <li>\n                  <a href={makeURL('Blog', this.blogUrlPrefix, 'green-match-fund')} class=\"icon-green\">\n                    Green Match Fund\n                  </a>\n                </li>\n                <li>\n                  <a href={makeURL('Blog', this.blogUrlPrefix, 'champions-for-children')} class=\"icon-children\">\n                    Champions for Children\n                  </a>\n                </li>\n                <li>\n                  <a href={makeURL('Blog', this.blogUrlPrefix, 'women-girls-match-fund')} class=\"icon-women-girls\">\n                    Women and Girls Match Fund\n                  </a>\n                </li>\n                <li>\n                  <a href={makeURL('Blog', this.blogUrlPrefix, 'kind2mind/')} class=\"icon-mental-health\">\n                    Kind²Mind\n                  </a>\n                </li>\n                <li>\n                  <a href={makeURL('Blog', this.blogUrlPrefix, 'artsforimpact')} class=\"icon-arts\">\n                    Arts for Impact\n                  </a>\n                </li>\n                <li>\n                  <a href={makeURL('Blog', this.blogUrlPrefix, 'emergency-campaigns/')} class=\"icon-emergency\">\n                    Emergency Match Fund\n                  </a>\n                </li>\n                <li>\n                  <a href={makeURL('Blog', this.blogUrlPrefix, 'run-your-own-campaign/)')}>Run your own campaign</a>\n                </li>\n              </ul>\n            </nav>\n\n            <nav class=\"nav nav-secondary\" aria-labelledby=\"footer-secondary-heading-heading\">\n              <HeadingTag class=\"heading\" id=\"footer-secondary-heading\">\n                <div slot=\"nav-secondary-title\">Resources</div>\n              </HeadingTag>\n              <ul slot=\"nav-secondary\">\n                <li>\n                  <a href={makeURL('Blog', this.blogUrlPrefix, 'case-studies')}>Case Studies</a>\n                </li>\n                <li>\n                  <a href={makeURL('Blog', this.blogUrlPrefix, 'blog')}>Blog</a>\n                </li>\n                <li>\n                  <a href={makeURL('Blog', this.blogUrlPrefix, 'reports-insights')}>Reports &amp; Insights</a>\n                </li>\n                <li>\n                  <a href={makeURL('Blog', this.blogUrlPrefix, 'press')}>Press</a>\n                </li>\n              </ul>\n            </nav>\n\n            <nav class=\"nav nav-tertiary\" aria-labelledby=\"footer-tertiary-heading\">\n              <HeadingTag class=\"heading\" id=\"footer-tertiary-heading\">\n                <div slot=\"nav-tertiary-title\">About</div>\n              </HeadingTag>\n              <ul slot=\"nav-tertiary\">\n                <li>\n                  <a href={makeURL('Blog', this.blogUrlPrefix, 'support')}>Support</a>\n                </li>\n                <li>\n                  <a href={makeURL('Blog', this.blogUrlPrefix, 'our-story')}>Our Story</a>\n                </li>\n                <li>\n                  <a href={makeURL('Blog', this.blogUrlPrefix, 'our-people')}>Our People</a>\n                </li>\n                <li>\n                  <a href={makeURL('Blog', this.blogUrlPrefix, 'donation-funds')}>Donate by Bank Transfer</a>\n                </li>\n                <li>\n                  <a href={makeURL('Blog', this.blogUrlPrefix, 'our-fees')}>Our Fees</a>\n                </li>\n                <li>\n                  <a href={makeURL('Blog', this.blogUrlPrefix, 'careers')}>Careers</a>\n                </li>\n                <li>\n                  <a href={makeURL('Blog', this.blogUrlPrefix, 'faqs')}>FAQs</a>\n                </li>\n              </ul>\n            </nav>\n\n            <div class=\"button-wrap\">\n              <biggive-button colour-scheme=\"white\" url={makeURL('Blog', this.blogUrlPrefix, 'charities')} label=\"For charities\"></biggive-button>\n              <biggive-button colour-scheme=\"white\" url={makeURL('Blog', this.blogUrlPrefix, 'funders')} label=\"For funders\"></biggive-button>\n            </div>\n          </div>\n\n          <div class=\"row row-bottom\">\n            <div class=\"postscript-wrap\">\n              <img class=\"fr-logo\" src={getAssetPath('/assets/images/fundraising-regulator.png')} alt=\"Registered with FUNDRAISING REGULATOR\" />\n\n              <nav class=\"nav nav-postscript\" aria-label=\"Legal\">\n                <ul slot=\"nav-postscript\">\n                  <li>\n                    <a href={makeURL('Blog', this.blogUrlPrefix, 'terms-and-conditions')}>Terms and Conditions</a>\n                  </li>\n                  <li>\n                    <a href={makeURL('Blog', this.blogUrlPrefix, 'privacy')}>Privacy Statement</a>\n                  </li>\n                  <li>\n                    <a href={makeURL('Blog', this.blogUrlPrefix, 'privacy#cookies')}>Cookies Statement</a>\n                  </li>\n                  <li>\n                    <a href={makeURL('Donate', this.donateUrlPrefix, 'cookie-preferences')}>Cookies Preference Centre</a>\n                  </li>\n                </ul>\n              </nav>\n            </div>\n\n            <div class=\"social-icon-wrap\">\n              <div slot=\"social-icons\">\n                <biggive-social-icon\n                  service=\"Facebook\"\n                  url=\"https://www.facebook.com/BigGive.org\"\n                  background-colour=\"tertiary\"\n                  icon-colour=\"black\"\n                  wide={true}\n                ></biggive-social-icon>\n                <biggive-social-icon service=\"Twitter\" url=\"https://x.com/BigGive\" background-colour=\"tertiary\" icon-colour=\"black\" wide={true}></biggive-social-icon>\n                <biggive-social-icon\n                  service=\"LinkedIn\"\n                  url=\"https://uk.linkedin.com/company/big-give\"\n                  background-colour=\"tertiary\"\n                  icon-colour=\"black\"\n                  wide={true}\n                ></biggive-social-icon>\n                <biggive-social-icon\n                  service=\"YouTube\"\n                  url=\"https://www.youtube.com/channel/UC9_wH1aaTuZurJ-F9R8GDcA\"\n                  background-colour=\"tertiary\"\n                  icon-colour=\"black\"\n                  wide={true}\n                ></biggive-social-icon>\n                <biggive-social-icon service=\"Instagram\" url=\"https://www.instagram.com/biggiveorg\" background-colour=\"tertiary\" icon-colour=\"black\"></biggive-social-icon>\n              </div>\n            </div>\n            <p>&copy; 2007 – {this.year} The Big Give Trust (1136547) | Company number 07273065 | Dragon Court, 27-29 Macklin Street, London WC2B 5LX, United Kingdom</p>\n          </div>\n        </footer>\n      );\n    };\n\n    return this.usePresetFooter ? presetFooter() : slotBasedFooter();\n  }\n}\n"],"version":3}
+{"file":"biggive-footer.js","mappings":"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","names":["BiggiveFooter"],"sources":["src/components/biggive-footer/biggive-footer.scss?tag=biggive-footer&encapsulation=shadow","src/components/biggive-footer/biggive-footer.tsx"],"sourcesContent":[":host {\n  display: contents;\n}\n\n.footer {\n  @include standard-font();\n  color: $colour-white;\n}\n\nnav {\n  width: calc(33.3% - 20px);\n  margin: 0;\n  padding: 0;\n  .heading {\n    @include heading-5();\n    border-bottom: 1px solid $colour-white;\n    padding-bottom: $spacer-2;\n    margin-bottom: $spacer-2;\n  }\n  ul {\n    margin: 0;\n    padding: 0;\n    li {\n      margin: 0;\n      padding: 0;\n      list-style-type: none;\n      margin-top: 15px;\n    }\n  }\n}\n\nnav ul li a {\n  color: $colour-white;\n  text-decoration: none;\n  // target all classes prefixed with 'icon-' so we don't repeat code\n  &[class^='icon-'],\n  &[class*='icon-'] {\n    padding-left: 20px;\n    background-repeat: no-repeat;\n    background-size: auto 10px;\n    background-position: left center;\n  }\n\n  &.icon-green {\n    background-image: url(/assets/images/triangles-combined-green-match-white.svg);\n  }\n\n  &.icon-children {\n    background-image: url(/assets/images/triangles-combined-children-white.svg);\n  }\n\n  &.icon-christmas {\n    background-image: url(/assets/images/triangles-combined-christmas-challenge-white.svg);\n  }\n\n  &.icon-green-match {\n    background-image: url(/assets/images/triangles-combined-green-match-white.svg);\n  }\n\n  &.icon-women-girls {\n    background-image: url(/assets/images/triangles-combined-women-girls-white.svg);\n  }\n\n  &.icon-mental-health {\n    background-image: url(/assets/images/triangles-combined-mental-health-white.svg);\n  }\n\n  &.icon-anchor-match {\n    background-image: url(/assets/images/triangles-combined-anchor-white.svg);\n  }\n\n  &.icon-emergency {\n    background-image: url(/assets/images/triangles-combined-emergency-white.svg);\n  }\n\n  &.icon-arts {\n    background-image: url(/assets/images/triangles-combined-arts-white.svg);\n  }\n}\n\n.row-top {\n  background-image: url(/assets/images/biggive-triangle-green.svg);\n  background-repeat: no-repeat;\n  background-size: auto 75px;\n  background-position: $spacer-6 30px;\n  background-color: $colour-primary-blue;\n  padding: 100px $spacer-6 $spacer-6 $spacer-6;\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: space-between;\n\n  .button-wrap {\n    margin-top: $spacer-6;\n    width: 100%;\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: space-between;\n  }\n}\n\nfooter .row-bottom {\n  background-color: $colour-black;\n  padding: $spacer-6 $spacer-6 $spacer-3 $spacer-6;\n  border-top: 1px solid $colour-white;\n\n  .fr-logo {\n    width: 135px;\n  }\n\n  .postscript-wrap {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: space-between;\n\n    @media screen and (max-width: $screen-tablet-max) {\n      flex-direction: column;\n    }\n  }\n\n  .nav.nav-postscript {\n    text-align: right;\n    flex-grow: 1;\n\n    @media screen and (max-width: $screen-tablet-max) {\n      text-align: center;\n    }\n  }\n\n  .nav-postscript li {\n    display: inline-block;\n    margin-left: 1rem;\n\n    &:first-child {\n      margin-left: 0;\n    }\n\n    @media screen and (max-width: $screen-tablet-max) {\n      display: block;\n      width: 100%;\n      margin-left: 0;\n    }\n  }\n\n  .social-icon-wrap {\n    border-top: 1px solid $colour-white;\n    padding-top: $spacer-4;\n    margin-top: $spacer-4;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-bottom: $spacer-4;\n\n    .social-icon-item {\n      margin: 0 $spacer-3;\n    }\n  }\n\n  p {\n    text-align: center;\n  }\n}\n\n@media screen and (max-width: $screen-tablet-max) {\n  .row-top {\n    padding: $spacer-3;\n  }\n}\n\n@media screen and (max-width: $screen-tablet-max) {\n  nav {\n    width: 100%;\n    margin-right: 0;\n    margin-bottom: $spacer-4;\n  }\n\n  .row-top {\n    background-size: auto 50px;\n    padding-top: 80px;\n    padding-left: 15px;\n    background-position: 15px 30px;\n\n    .button-wrap * {\n      width: 100% !important;\n    }\n  }\n}\n","import { Component, Element, getAssetPath, h, Prop } from '@stencil/core';\nimport { makeURL } from '../../util/helper-methods';\n\n@Component({\n  tag: 'biggive-footer',\n  styleUrl: 'biggive-footer.scss',\n  shadow: true,\n})\nexport class BiggiveFooter {\n  @Element() host: HTMLBiggiveFooterElement;\n\n  @Prop() headingLevel: 1 | 2 | 3 | 4 | 5 | 6 = 5;\n\n  /**\n   * URL prefixes vary by environment, and components library is not best placed to know what they are, so we\n   * take them as props\n   */\n  @Prop() donateUrlPrefix: string;\n  @Prop() blogUrlPrefix: string | undefined;\n  @Prop() experienceUrlPrefix: string | undefined;\n  private year: string = new Date().getFullYear().toString();\n\n  /**\n   * Conditionally render footer menu:\n   * hard-coded (preset) when set to true, dynamic (slot-based) when set to false\n   */\n  @Prop() usePresetFooter = false;\n\n  private appendMenu(menuName: string) {\n    var node = this.host.querySelector(`[slot=\"${menuName}\"]`);\n    if (node !== null) {\n      this.host!.shadowRoot!.querySelector(`.${menuName}`)!.appendChild(node);\n    }\n  }\n\n  componentDidRender() {\n    if (!this.usePresetFooter) {\n      this.appendMenu('nav-primary');\n      this.appendMenu('nav-secondary');\n      this.appendMenu('nav-tertiary');\n      this.appendMenu('nav-postscript');\n    }\n  }\n\n  render() {\n    const HeadingTag = `h${this.headingLevel}`;\n    const slotBasedFooter = () => {\n      return (\n        <footer class=\"footer\">\n          <div class=\"row row-top\">\n            <nav class=\"nav nav-primary\" aria-labelledby=\"footer-primary-heading\">\n              <HeadingTag class=\"heading\" id=\"footer-primary-heading\">\n                <slot name=\"nav-primary-title\"></slot>\n              </HeadingTag>\n            </nav>\n\n            <nav class=\"nav nav-secondary\" aria-labelledby=\"footer-secondary-heading-heading\">\n              <HeadingTag class=\"heading\" id=\"footer-secondary-heading\">\n                <slot name=\"nav-secondary-title\"></slot>\n              </HeadingTag>\n            </nav>\n\n            <nav class=\"nav nav-tertiary\" aria-labelledby=\"footer-tertiary-heading\">\n              <HeadingTag class=\"heading\" id=\"footer-tertiary-heading\">\n                <slot name=\"nav-tertiary-title\"></slot>\n              </HeadingTag>\n            </nav>\n\n            <div class=\"button-wrap\">\n              <biggive-button colour-scheme=\"white\" url=\"https://biggive.org/charities\" label=\"For charities\"></biggive-button>\n              <biggive-button colour-scheme=\"white\" url=\"https://biggive.org/funders\" label=\"For funders\"></biggive-button>\n            </div>\n          </div>\n\n          <div class=\"row row-bottom\">\n            <div class=\"postscript-wrap\">\n              <img class=\"fr-logo\" src={getAssetPath('/assets/images/fundraising-regulator.png')} alt=\"Registered with FUNDRAISING REGULATOR\" />\n\n              <nav class=\"nav nav-postscript\" aria-label=\"Legal\"></nav>\n            </div>\n\n            <div class=\"social-icon-wrap\">\n              <slot name=\"social-icons\"></slot>\n            </div>\n            <p>&copy; 2007 – {this.year} The Big Give Trust (1136547) | Company number 07273065 | Dragon Court, 27-29 Macklin Street, London WC2B 5LX, United Kingdom</p>\n          </div>\n        </footer>\n      );\n    };\n\n    const presetFooter = () => {\n      return (\n        <footer class=\"footer\">\n          <div class=\"row row-top\">\n            <nav class=\"nav nav-primary\" aria-labelledby=\"footer-primary-heading\">\n              <HeadingTag class=\"heading\" id=\"footer-primary-heading\">\n                <div slot=\"nav-primary-title\">Match Funding Opportunities</div>\n              </HeadingTag>\n              <ul slot=\"nav-primary\">\n                <li>\n                  <a href={makeURL('Blog', this.blogUrlPrefix, 'christmas-challenge')} class=\"icon-christmas\">\n                    Christmas Challenge\n                  </a>\n                </li>\n                <li>\n                  <a href={makeURL('Blog', this.blogUrlPrefix, 'green-match-fund')} class=\"icon-green\">\n                    Green Match Fund\n                  </a>\n                </li>\n                <li>\n                  <a href={makeURL('Blog', this.blogUrlPrefix, 'champions-for-children')} class=\"icon-children\">\n                    Champions for Children\n                  </a>\n                </li>\n                <li>\n                  <a href={makeURL('Blog', this.blogUrlPrefix, 'women-girls-match-fund')} class=\"icon-women-girls\">\n                    Women and Girls Match Fund\n                  </a>\n                </li>\n                <li>\n                  <a href={makeURL('Blog', this.blogUrlPrefix, 'kind2mind/')} class=\"icon-mental-health\">\n                    Kind²Mind\n                  </a>\n                </li>\n                <li>\n                  <a href={makeURL('Blog', this.blogUrlPrefix, 'artsforimpact')} class=\"icon-arts\">\n                    Arts for Impact\n                  </a>\n                </li>\n                <li>\n                  <a href={makeURL('Blog', this.blogUrlPrefix, 'emergency-campaigns/')} class=\"icon-emergency\">\n                    Emergency Match Fund\n                  </a>\n                </li>\n                <li>\n                  <a href={makeURL('Blog', this.blogUrlPrefix, 'run-your-own-campaign/)')}>Run your own campaign</a>\n                </li>\n              </ul>\n            </nav>\n\n            <nav class=\"nav nav-secondary\" aria-labelledby=\"footer-secondary-heading-heading\">\n              <HeadingTag class=\"heading\" id=\"footer-secondary-heading\">\n                <div slot=\"nav-secondary-title\">Resources</div>\n              </HeadingTag>\n              <ul slot=\"nav-secondary\">\n                <li>\n                  <a href={makeURL('Blog', this.blogUrlPrefix, 'case-studies')}>Case Studies</a>\n                </li>\n                <li>\n                  <a href={makeURL('Blog', this.blogUrlPrefix, 'blog')}>Blog</a>\n                </li>\n                <li>\n                  <a href={makeURL('Blog', this.blogUrlPrefix, 'reports-insights')}>Reports &amp; Insights</a>\n                </li>\n                <li>\n                  <a href={makeURL('Blog', this.blogUrlPrefix, 'press')}>Press</a>\n                </li>\n              </ul>\n            </nav>\n\n            <nav class=\"nav nav-tertiary\" aria-labelledby=\"footer-tertiary-heading\">\n              <HeadingTag class=\"heading\" id=\"footer-tertiary-heading\">\n                <div slot=\"nav-tertiary-title\">About</div>\n              </HeadingTag>\n              <ul slot=\"nav-tertiary\">\n                <li>\n                  <a href={makeURL('Blog', this.blogUrlPrefix, 'support')}>Support</a>\n                </li>\n                <li>\n                  <a href={makeURL('Blog', this.blogUrlPrefix, 'our-story')}>Our Story</a>\n                </li>\n                <li>\n                  <a href={makeURL('Blog', this.blogUrlPrefix, 'our-people')}>Our People</a>\n                </li>\n                <li>\n                  <a href={makeURL('Blog', this.blogUrlPrefix, 'donation-funds')}>Donate by Bank Transfer</a>\n                </li>\n                <li>\n                  <a href={makeURL('Blog', this.blogUrlPrefix, 'our-fees')}>Our Fees</a>\n                </li>\n                <li>\n                  <a href={makeURL('Blog', this.blogUrlPrefix, 'careers')}>Careers</a>\n                </li>\n                <li>\n                  <a href={makeURL('Blog', this.blogUrlPrefix, 'faqs')}>FAQs</a>\n                </li>\n              </ul>\n            </nav>\n\n            <div class=\"button-wrap\">\n              <biggive-button colour-scheme=\"white\" url={makeURL('Blog', this.blogUrlPrefix, 'charities')} label=\"For charities\"></biggive-button>\n              <biggive-button colour-scheme=\"white\" url={makeURL('Blog', this.blogUrlPrefix, 'funders')} label=\"For funders\"></biggive-button>\n            </div>\n          </div>\n\n          <div class=\"row row-bottom\">\n            <div class=\"postscript-wrap\">\n              <img class=\"fr-logo\" src={getAssetPath('/assets/images/fundraising-regulator.png')} alt=\"Registered with FUNDRAISING REGULATOR\" />\n\n              <nav class=\"nav nav-postscript\" aria-label=\"Legal\">\n                <ul slot=\"nav-postscript\">\n                  <li>\n                    <a href={makeURL('Blog', this.blogUrlPrefix, 'terms-and-conditions')}>Terms and Conditions</a>\n                  </li>\n                  <li>\n                    <a href={makeURL('Blog', this.blogUrlPrefix, 'privacy')}>Privacy Statement</a>\n                  </li>\n                  <li>\n                    <a href={makeURL('Blog', this.blogUrlPrefix, 'privacy#cookies')}>Cookies Statement</a>\n                  </li>\n                  <li>\n                    <a href={makeURL('Donate', this.donateUrlPrefix, 'cookie-preferences')}>Cookies Preference Centre</a>\n                  </li>\n                </ul>\n              </nav>\n            </div>\n\n            <div class=\"social-icon-wrap\">\n              <div slot=\"social-icons\">\n                <biggive-social-icon\n                  service=\"Facebook\"\n                  url=\"https://www.facebook.com/BigGive.org\"\n                  background-colour=\"tertiary\"\n                  icon-colour=\"black\"\n                  wide={true}\n                ></biggive-social-icon>\n                <biggive-social-icon service=\"Twitter\" url=\"https://x.com/BigGive\" background-colour=\"tertiary\" icon-colour=\"black\" wide={true}></biggive-social-icon>\n                <biggive-social-icon\n                  service=\"LinkedIn\"\n                  url=\"https://uk.linkedin.com/company/big-give\"\n                  background-colour=\"tertiary\"\n                  icon-colour=\"black\"\n                  wide={true}\n                ></biggive-social-icon>\n                <biggive-social-icon\n                  service=\"YouTube\"\n                  url=\"https://www.youtube.com/channel/UC9_wH1aaTuZurJ-F9R8GDcA\"\n                  background-colour=\"tertiary\"\n                  icon-colour=\"black\"\n                  wide={true}\n                ></biggive-social-icon>\n                <biggive-social-icon service=\"Instagram\" url=\"https://www.instagram.com/biggiveorg\" background-colour=\"tertiary\" icon-colour=\"black\"></biggive-social-icon>\n              </div>\n            </div>\n            <p>&copy; 2007 – {this.year} The Big Give Trust (1136547) | Company number 07273065 | Dragon Court, 27-29 Macklin Street, London WC2B 5LX, United Kingdom</p>\n          </div>\n        </footer>\n      );\n    };\n\n    return this.usePresetFooter ? presetFooter() : slotBasedFooter();\n  }\n}\n"],"version":3}

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

@@ -8,22 +8,18 @@ const BiggiveFormFieldSelect = /*@__PURE__*/ proxyCustomElement(class BiggiveFor
         super();
         this.__registerHost();
         this.__attachShadow();
+        this.selectStyle = 'bordered';
+        this.selectedOptionColour = 'blue';
         this.doOptionSelectCompletedHandler = (event) => {
             const value = event.target.value;
             this.selectedValue = value;
             this.selectedLabel = event.target.label;
             this.selectionChanged(value);
         };
-        this.selectionChanged = undefined;
-        this.prompt = undefined;
-        this.selectedValue = undefined;
-        this.selectedLabel = undefined;
-        this.options = undefined;
-        this.selectStyle = 'bordered';
-        this.backgroundColour = undefined;
-        this.selectedOptionColour = 'blue';
+        /**
+         * Space below component
+         */
         this.spaceBelow = 0;
-        this.placeholder = undefined;
     }
     render() {
         const greyIfRequired = this.backgroundColour === 'grey' ? ' grey' : '';

package/dist/components/biggive-form-field-select2.js.map

@@ -1 +1 @@
-{"file":"biggive-form-field-select2.js","mappings":";;AAAA,MAAM,yBAAyB,GAAG,+vHAA+vH,CAAC;AAClyH,qCAAe,yBAAyB;;MCM3B,sBAAsB;;;;;QA0BzB,mCAA8B,GAAG,CAAC,KAAU;YAClD,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;YACjC,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;YAC3B,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;YACxC,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;SAC9B,CAAC;;;;;;2BAd+C,UAAU;;oCAOR,MAAM;0BAY5B,CAAC;;;IAM9B,MAAM;QACJ,MAAM,cAAc,GAAG,IAAI,CAAC,gBAAgB,KAAK,MAAM,GAAG,OAAO,GAAG,EAAE,CAAC;QAEvE,IAAI,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAE/C,IAAI,OAAO,IAAI,CAAC,WAAW,KAAK,QAAQ,IAAI,OAAO,IAAI,CAAC,aAAa,KAAK,QAAQ,EAAE;YAClF,OAAO,GAAG,CAAC,EAAE,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,EAAE,GAAG,OAAO,CAAC,CAAC;SAC/E;QAED,IAAI,OAAO,OAAO,KAAK,WAAW,EAAE;YAClC,OAAO,CAAC,KAAK,CAAC,mBAAmB,CAAC,CAAC;YACnC,OAAO,GAAG,EAAE,CAAC;SACd;QAED,QACE,4DAAK,KAAK,EAAC,eAAe,IACxB,8DAAO,KAAK,EAAE,cAAc,IAC1B,4DAAK,KAAK,EAAE,QAAQ,GAAG,cAAc,IAAG,IAAI,CAAC,MAAM,CAAO,EAC1D,4DACE,KAAK,EACH,uBAAuB;gBACvB,IAAI,CAAC,UAAU;gBACf,gBAAgB;gBAChB,IAAI,CAAC,WAAW;iBACf,IAAI,CAAC,MAAM,KAAK,IAAI,GAAG,YAAY,GAAG,EAAE,CAAC;iBACzC,IAAI,CAAC,oBAAoB,KAAK,SAAS,GAAG,iBAAiB,GAAG,EAAE,CAAC,IAGpE,4DAAK,KAAK,EAAC,QAAQ,IACjB,+DAAQ,KAAK,EAAE,cAAc,EAAE,QAAQ,EAAE,IAAI,CAAC,8BAA8B,IACzE,OAAO,CAAC,GAAG,CAAC,MAAM,KACjB,cAAQ,QAAQ,EAAE,IAAI,CAAC,aAAa,KAAK,MAAM,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,IACvE,MAAM,CAAC,KAAK,CACN,CACV,CAAC,CACK,EACT,4DAAK,KAAK,EAAC,OAAO,GAAO,CACrB,CACF,CACA,CACJ,EACN;KACH;IAEO,aAAa,CAAC,OAAyD;QAI7E,IAAI,OAAO,KAAK,SAAS,EAAE;YACzB,OAAO,EAAE,CAAC;SACX;QAED,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE;YAC/B,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;SAC/B;QAED,IAAI,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;YAC1B,OAAO,OAAO,CAAC;SAChB;QAED,OAAO,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,KAAK,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;KACrF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/biggive-form-field-select/biggive-form-field-select.scss?tag=biggive-form-field-select&encapsulation=shadow","src/components/biggive-form-field-select/biggive-form-field-select.tsx"],"sourcesContent":["@include spacers();\n\n// Includes CSS taken from https://moderncss.dev/custom-select-styles-with-pure-css/\n\n:host {\n  display: contents;\n}\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\nselect {\n  appearance: none;\n  border: none;\n  padding: 0 1em 0 0;\n  margin: 0;\n  width: 100%;\n  font-family: inherit;\n  font-size: inherit;\n  cursor: inherit;\n  line-height: inherit;\n  outline: none;\n  display: grid;\n  background-color: $colour-white;\n  align-items: center;\n}\nselect.grey {\n  background-color: $colour-grey-background;\n}\n.selectWrapper {\n  position: relative;\n}\n.prompt {\n  position: absolute;\n  z-index: 2;\n  font-size: small;\n  top: -1em;\n  background-color: $colour-white;\n  left: 4em;\n  padding-left: 1em;\n  padding-right: 1em;\n  color: $colour-primary-blue;\n}\n.prompt.grey {\n  background-color: $colour-grey-background;\n}\n\n.dropdown {\n  @include standard-font();\n  position: relative;\n  text-align: left;\n  &.select-style-bordered {\n    .sleeve {\n      @include font-size-medium();\n      padding: 2px;\n      position: relative;\n      background-color: $colour-primary-blue;\n      @include corner-clip-small-top-right();\n      select {\n        color: $colour-primary-blue;\n        display: block;\n        position: relative;\n        padding: 10px 80px 10px 10px;\n        clip-path:\n          polygon(\n              0% 0%,     /* top left */\n              0% 0%,     /* top left */\n              calc(100% - 14px) 0%,    /* top right */\n              100% 14px,   /* top right */\n              100% 100%,  /* bottom right */\n              100% 100%,  /* bottom right */\n              0 100%,   /* bottom left */\n              0 100%      /* bottom left */\n          );\n        span.placeholder.grey {\n          background-color: $colour-grey-background;\n        }\n      }\n      div.arrow {\n        position: absolute;\n        right: 20px;\n        top: 18px;\n        width: 10px;\n        height: 10px;\n        background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI3IiB2aWV3Qm94PSIwIDAgOSA3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNS4yMzcxNiA2LjYyNDkzQzQuOTAzMjMgNy4xMjUwMiA0LjA5NyA3LjEyNTAyIDMuNzYzMDggNi42MjQ5M0wwLjEyMzg2OCAxLjE3MDYzQy0wLjIxOTk0IDAuNjU1NDU5IDAuMTkyNjMgMS44MzcxZS0wNyAwLjg2MDkwOCAyLjQyMTMyZS0wN0w4LjEzOTMzIDguNzg0MzJlLTA3QzguODA3MTggOS4zNjgxN2UtMDcgOS4yMTk3NSAwLjY1NTQ1OSA4Ljg3NjM3IDEuMTcwNjNMNS4yMzcxNiA2LjYyNDkzWiIgZmlsbD0iIzJDMDg5QiIvPgo8L3N2Zz4K');\n        background-size: contain;\n        background-repeat: no-repeat;\n        background-position: center center;\n        z-index: 1;\n        pointer-events: none;\n      }\n    }\n    .sleeve:focus-within {\n      background-color: $colour-tertiary-coral;\n    }\n  }\n  &.select-style-underlined {\n    .sleeve {\n      @include dropdown-underlined();\n    }\n  }\n  &.inherit-colour select{\n   color: inherit !important;\n  }\n\n  select {\n    max-height: 200px;\n    overflow-x: hidden;\n    overflow-y: scroll;\n    width: 100%;\n    z-index: 1;\n    left: 0;\n    right: 0;\n  }\n  &.active .options {\n      display: block;\n  }\n}\n.dropdown.noprompt {\n  margin-top: 0;\n}\n.options.grey {\n  background-color: $colour-grey-background;\n}\n","import { Component, Prop, h, Element } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-form-field-select',\n  styleUrl: 'biggive-form-field-select.scss',\n  shadow: true,\n})\nexport class BiggiveFormFieldSelect {\n  @Element() el: HTMLBiggiveFormFieldSelectElement;\n\n  @Prop() selectionChanged: (value: string) => void;\n\n  /**\n   * Displayed as 'eyebrow' label over the top border of the box.\n   */\n  @Prop() prompt!: string | null;\n\n  @Prop({ mutable: true }) selectedValue: string | null;\n  @Prop({ mutable: true }) selectedLabel: string | null;\n\n  /**\n   * JSON array of label+value objects, or takes a stringified equiavalent (for Storybook)\n   */\n  @Prop() options!: string | Array<{ label: string; value: string }>;\n  @Prop() selectStyle: 'bordered' | 'underlined' = 'bordered';\n\n  /**\n   * Must match background of containing element, or unintended shape will appear.\n   */\n  @Prop() backgroundColour: 'white' | 'grey';\n\n  @Prop() selectedOptionColour: 'inherit' | 'blue' = 'blue';\n\n  private doOptionSelectCompletedHandler = (event: any) => {\n    const value = event.target.value;\n    this.selectedValue = value;\n    this.selectedLabel = event.target.label;\n    this.selectionChanged(value);\n  };\n\n  /**\n   * Space below component\n   */\n  @Prop() spaceBelow: number = 0;\n  /**\n   * Placeholder\n   */\n  @Prop() placeholder: string | undefined;\n\n  render() {\n    const greyIfRequired = this.backgroundColour === 'grey' ? ' grey' : '';\n\n    let options = this.formatOptions(this.options);\n\n    if (typeof this.placeholder === 'string' && typeof this.selectedValue !== 'string') {\n      options = [{ value: '__placeholder__', label: this.placeholder }, ...options];\n    }\n\n    if (typeof options === 'undefined') {\n      console.error('options undefined');\n      options = [];\n    }\n\n    return (\n      <div class=\"selectWrapper\">\n        <label class={greyIfRequired}>\n          <div class={'prompt' + greyIfRequired}>{this.prompt}</div>\n          <div\n            class={\n              'dropdown space-below-' +\n              this.spaceBelow +\n              ' select-style-' +\n              this.selectStyle +\n              (this.prompt === null ? '  noprompt' : '') +\n              (this.selectedOptionColour === 'inherit' ? ' inherit-colour' : '')\n            }\n          >\n            <div class=\"sleeve\">\n              <select class={greyIfRequired} onChange={this.doOptionSelectCompletedHandler}>\n                {options.map(option => (\n                  <option selected={this.selectedValue === option.value} value={option.value}>\n                    {option.label}\n                  </option>\n                ))}\n              </select>\n              <div class=\"arrow\"></div>\n            </div>\n          </div>\n        </label>\n      </div>\n    );\n  }\n\n  private formatOptions(options: string | Array<{ label: string; value: string }>): {\n    label: string;\n    value: string;\n  }[] {\n    if (options === undefined) {\n      return [];\n    }\n\n    if (typeof options === 'string') {\n      options = JSON.parse(options);\n    }\n\n    if (Array.isArray(options)) {\n      return options;\n    }\n\n    return Object.entries(options).map(entry => ({ value: entry[0], label: entry[1] }));\n  }\n}\n"],"version":3}
+{"file":"biggive-form-field-select2.js","mappings":";;AAAA,MAAM,yBAAyB,GAAG,+vHAA+vH,CAAC;AAClyH,qCAAe,yBAAyB;;MCM3B,sBAAsB;IALnC;;;;QAsBU,gBAAW,GAA8B,UAAU,CAAC;QAOpD,yBAAoB,GAAuB,MAAM,CAAC;QAElD,mCAA8B,GAAG,CAAC,KAAU;YAClD,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;YACjC,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;YAC3B,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;YACxC,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;SAC9B,CAAC;;;;QAKM,eAAU,GAAW,CAAC,CAAC;KAoEhC;IA9DC,MAAM;QACJ,MAAM,cAAc,GAAG,IAAI,CAAC,gBAAgB,KAAK,MAAM,GAAG,OAAO,GAAG,EAAE,CAAC;QAEvE,IAAI,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAE/C,IAAI,OAAO,IAAI,CAAC,WAAW,KAAK,QAAQ,IAAI,OAAO,IAAI,CAAC,aAAa,KAAK,QAAQ,EAAE;YAClF,OAAO,GAAG,CAAC,EAAE,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,EAAE,GAAG,OAAO,CAAC,CAAC;SAC/E;QAED,IAAI,OAAO,OAAO,KAAK,WAAW,EAAE;YAClC,OAAO,CAAC,KAAK,CAAC,mBAAmB,CAAC,CAAC;YACnC,OAAO,GAAG,EAAE,CAAC;SACd;QAED,QACE,4DAAK,KAAK,EAAC,eAAe,IACxB,8DAAO,KAAK,EAAE,cAAc,IAC1B,4DAAK,KAAK,EAAE,QAAQ,GAAG,cAAc,IAAG,IAAI,CAAC,MAAM,CAAO,EAC1D,4DACE,KAAK,EACH,uBAAuB;gBACvB,IAAI,CAAC,UAAU;gBACf,gBAAgB;gBAChB,IAAI,CAAC,WAAW;iBACf,IAAI,CAAC,MAAM,KAAK,IAAI,GAAG,YAAY,GAAG,EAAE,CAAC;iBACzC,IAAI,CAAC,oBAAoB,KAAK,SAAS,GAAG,iBAAiB,GAAG,EAAE,CAAC,IAGpE,4DAAK,KAAK,EAAC,QAAQ,IACjB,+DAAQ,KAAK,EAAE,cAAc,EAAE,QAAQ,EAAE,IAAI,CAAC,8BAA8B,IACzE,OAAO,CAAC,GAAG,CAAC,MAAM,KACjB,cAAQ,QAAQ,EAAE,IAAI,CAAC,aAAa,KAAK,MAAM,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,IACvE,MAAM,CAAC,KAAK,CACN,CACV,CAAC,CACK,EACT,4DAAK,KAAK,EAAC,OAAO,GAAO,CACrB,CACF,CACA,CACJ,EACN;KACH;IAEO,aAAa,CAAC,OAAyD;QAI7E,IAAI,OAAO,KAAK,SAAS,EAAE;YACzB,OAAO,EAAE,CAAC;SACX;QAED,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE;YAC/B,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;SAC/B;QAED,IAAI,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;YAC1B,OAAO,OAAO,CAAC;SAChB;QAED,OAAO,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,KAAK,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;KACrF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/biggive-form-field-select/biggive-form-field-select.scss?tag=biggive-form-field-select&encapsulation=shadow","src/components/biggive-form-field-select/biggive-form-field-select.tsx"],"sourcesContent":["@include spacers();\n\n// Includes CSS taken from https://moderncss.dev/custom-select-styles-with-pure-css/\n\n:host {\n  display: contents;\n}\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\nselect {\n  appearance: none;\n  border: none;\n  padding: 0 1em 0 0;\n  margin: 0;\n  width: 100%;\n  font-family: inherit;\n  font-size: inherit;\n  cursor: inherit;\n  line-height: inherit;\n  outline: none;\n  display: grid;\n  background-color: $colour-white;\n  align-items: center;\n}\nselect.grey {\n  background-color: $colour-grey-background;\n}\n.selectWrapper {\n  position: relative;\n}\n.prompt {\n  position: absolute;\n  z-index: 2;\n  font-size: small;\n  top: -1em;\n  background-color: $colour-white;\n  left: 4em;\n  padding-left: 1em;\n  padding-right: 1em;\n  color: $colour-primary-blue;\n}\n.prompt.grey {\n  background-color: $colour-grey-background;\n}\n\n.dropdown {\n  @include standard-font();\n  position: relative;\n  text-align: left;\n  &.select-style-bordered {\n    .sleeve {\n      @include font-size-medium();\n      padding: 2px;\n      position: relative;\n      background-color: $colour-primary-blue;\n      @include corner-clip-small-top-right();\n      select {\n        color: $colour-primary-blue;\n        display: block;\n        position: relative;\n        padding: 10px 80px 10px 10px;\n        clip-path:\n          polygon(\n              0% 0%,     /* top left */\n              0% 0%,     /* top left */\n              calc(100% - 14px) 0%,    /* top right */\n              100% 14px,   /* top right */\n              100% 100%,  /* bottom right */\n              100% 100%,  /* bottom right */\n              0 100%,   /* bottom left */\n              0 100%      /* bottom left */\n          );\n        span.placeholder.grey {\n          background-color: $colour-grey-background;\n        }\n      }\n      div.arrow {\n        position: absolute;\n        right: 20px;\n        top: 18px;\n        width: 10px;\n        height: 10px;\n        background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI3IiB2aWV3Qm94PSIwIDAgOSA3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNS4yMzcxNiA2LjYyNDkzQzQuOTAzMjMgNy4xMjUwMiA0LjA5NyA3LjEyNTAyIDMuNzYzMDggNi42MjQ5M0wwLjEyMzg2OCAxLjE3MDYzQy0wLjIxOTk0IDAuNjU1NDU5IDAuMTkyNjMgMS44MzcxZS0wNyAwLjg2MDkwOCAyLjQyMTMyZS0wN0w4LjEzOTMzIDguNzg0MzJlLTA3QzguODA3MTggOS4zNjgxN2UtMDcgOS4yMTk3NSAwLjY1NTQ1OSA4Ljg3NjM3IDEuMTcwNjNMNS4yMzcxNiA2LjYyNDkzWiIgZmlsbD0iIzJDMDg5QiIvPgo8L3N2Zz4K');\n        background-size: contain;\n        background-repeat: no-repeat;\n        background-position: center center;\n        z-index: 1;\n        pointer-events: none;\n      }\n    }\n    .sleeve:focus-within {\n      background-color: $colour-tertiary-coral;\n    }\n  }\n  &.select-style-underlined {\n    .sleeve {\n      @include dropdown-underlined();\n    }\n  }\n  &.inherit-colour select{\n   color: inherit !important;\n  }\n\n  select {\n    max-height: 200px;\n    overflow-x: hidden;\n    overflow-y: scroll;\n    width: 100%;\n    z-index: 1;\n    left: 0;\n    right: 0;\n  }\n  &.active .options {\n      display: block;\n  }\n}\n.dropdown.noprompt {\n  margin-top: 0;\n}\n.options.grey {\n  background-color: $colour-grey-background;\n}\n","import { Component, Prop, h, Element } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-form-field-select',\n  styleUrl: 'biggive-form-field-select.scss',\n  shadow: true,\n})\nexport class BiggiveFormFieldSelect {\n  @Element() el: HTMLBiggiveFormFieldSelectElement;\n\n  @Prop() selectionChanged: (value: string) => void;\n\n  /**\n   * Displayed as 'eyebrow' label over the top border of the box.\n   */\n  @Prop() prompt!: string | null;\n\n  @Prop({ mutable: true }) selectedValue: string | null;\n  @Prop({ mutable: true }) selectedLabel: string | null;\n\n  /**\n   * JSON array of label+value objects, or takes a stringified equiavalent (for Storybook)\n   */\n  @Prop() options!: string | Array<{ label: string; value: string }>;\n  @Prop() selectStyle: 'bordered' | 'underlined' = 'bordered';\n\n  /**\n   * Must match background of containing element, or unintended shape will appear.\n   */\n  @Prop() backgroundColour: 'white' | 'grey';\n\n  @Prop() selectedOptionColour: 'inherit' | 'blue' = 'blue';\n\n  private doOptionSelectCompletedHandler = (event: any) => {\n    const value = event.target.value;\n    this.selectedValue = value;\n    this.selectedLabel = event.target.label;\n    this.selectionChanged(value);\n  };\n\n  /**\n   * Space below component\n   */\n  @Prop() spaceBelow: number = 0;\n  /**\n   * Placeholder\n   */\n  @Prop() placeholder: string | undefined;\n\n  render() {\n    const greyIfRequired = this.backgroundColour === 'grey' ? ' grey' : '';\n\n    let options = this.formatOptions(this.options);\n\n    if (typeof this.placeholder === 'string' && typeof this.selectedValue !== 'string') {\n      options = [{ value: '__placeholder__', label: this.placeholder }, ...options];\n    }\n\n    if (typeof options === 'undefined') {\n      console.error('options undefined');\n      options = [];\n    }\n\n    return (\n      <div class=\"selectWrapper\">\n        <label class={greyIfRequired}>\n          <div class={'prompt' + greyIfRequired}>{this.prompt}</div>\n          <div\n            class={\n              'dropdown space-below-' +\n              this.spaceBelow +\n              ' select-style-' +\n              this.selectStyle +\n              (this.prompt === null ? '  noprompt' : '') +\n              (this.selectedOptionColour === 'inherit' ? ' inherit-colour' : '')\n            }\n          >\n            <div class=\"sleeve\">\n              <select class={greyIfRequired} onChange={this.doOptionSelectCompletedHandler}>\n                {options.map(option => (\n                  <option selected={this.selectedValue === option.value} value={option.value}>\n                    {option.label}\n                  </option>\n                ))}\n              </select>\n              <div class=\"arrow\"></div>\n            </div>\n          </div>\n        </label>\n      </div>\n    );\n  }\n\n  private formatOptions(options: string | Array<{ label: string; value: string }>): {\n    label: string;\n    value: string;\n  }[] {\n    if (options === undefined) {\n      return [];\n    }\n\n    if (typeof options === 'string') {\n      options = JSON.parse(options);\n    }\n\n    if (Array.isArray(options)) {\n      return options;\n    }\n\n    return Object.entries(options).map(entry => ({ value: entry[0], label: entry[1] }));\n  }\n}\n"],"version":3}

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

@@ -8,8 +8,17 @@ const BiggiveFormattedText$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveFor
         super();
         this.__registerHost();
         this.__attachShadow();
+        /**
+         * Space below component
+         */
         this.spaceBelow = 0;
+        /**
+         * Default text colour
+         */
         this.defaultTextColour = 'primary';
+        /**
+         * Width
+         */
         this.maxWidth = 100;
     }
     render() {

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

@@ -1 +1 @@
-{"file":"biggive-formatted-text.js","mappings":";;AAAA,MAAM,uBAAuB,GAAG,4zHAA4zH,CAAC;AAC71H,mCAAe,uBAAuB;;MCMzBA,sBAAoB;;;;;0BAIF,CAAC;iCAIM,SAAS;wBAKlB,GAAG;;IAE9B,MAAM;QACJ,QACE,4DAAK,KAAK,EAAE,sBAAsB,GAAG,IAAI,CAAC,QAAQ,GAAG,eAAe,GAAG,IAAI,CAAC,iBAAiB,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,IAC/H,8DAAa,CACT,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveFormattedText"],"sources":["src/components/biggive-formatted-text/biggive-formatted-text.scss?tag=biggive-formatted-text&encapsulation=shadow","src/components/biggive-formatted-text/biggive-formatted-text.tsx"],"sourcesContent":["@include spacers();\n@include text-colours();\n\n:host {\n  display: block;\n}\n\n.container {\n  @include standard-font();\n  img {\n    width: 100%;\n    height: auto;\n  }\n  a {\n    color: inherit;\n    text-decoration: underline;\n  }\n  &.max-width-10 .sleeve { @include max-width-10(); }\n  &.max-width-15 .sleeve { @include max-width-15(); }\n  &.max-width-20 .sleeve { @include max-width-20(); }\n  &.max-width-25 .sleeve { @include max-width-25(); }\n  &.max-width-30 .sleeve { @include max-width-30(); }\n  &.max-width-35 .sleeve { @include max-width-35(); }\n  &.max-width-40 .sleeve { @include max-width-40(); }\n  &.max-width-45 .sleeve { @include max-width-45(); }\n  &.max-width-50 .sleeve { @include max-width-50(); }\n  &.max-width-55 .sleeve { @include max-width-55(); }\n  &.max-width-60 .sleeve { @include max-width-60(); }\n  &.max-width-65 .sleeve { @include max-width-65(); }\n  &.max-width-70 .sleeve { @include max-width-70(); }\n  &.max-width-75 .sleeve { @include max-width-75(); }\n  &.max-width-80 .sleeve { @include max-width-80(); }\n  &.max-width-85 .sleeve { @include max-width-85(); }\n  &.max-width-90 .sleeve { @include max-width-90(); }\n  &.max-width-95 .sleeve { @include max-width-95(); }\n}\n\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-formatted-text',\n  styleUrl: 'biggive-formatted-text.scss',\n  shadow: true,\n})\nexport class BiggiveFormattedText {\n  /**\n   * Space below component\n   */\n  @Prop() spaceBelow: number = 0;\n  /**\n   * Default text colour\n   */\n  @Prop() defaultTextColour: string = 'primary';\n\n  /**\n   * Width\n   */\n  @Prop() maxWidth: number = 100;\n\n  render() {\n    return (\n      <div class={'container max-width-' + this.maxWidth + ' text-colour-' + this.defaultTextColour + ' space-below-' + this.spaceBelow}>\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"biggive-formatted-text.js","mappings":";;AAAA,MAAM,uBAAuB,GAAG,4zHAA4zH,CAAC;AAC71H,mCAAe,uBAAuB;;MCMzBA,sBAAoB;IALjC;;;;;;;QASU,eAAU,GAAW,CAAC,CAAC;;;;QAIvB,sBAAiB,GAAW,SAAS,CAAC;;;;QAKtC,aAAQ,GAAW,GAAG,CAAC;KAShC;IAPC,MAAM;QACJ,QACE,4DAAK,KAAK,EAAE,sBAAsB,GAAG,IAAI,CAAC,QAAQ,GAAG,eAAe,GAAG,IAAI,CAAC,iBAAiB,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,IAC/H,8DAAa,CACT,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveFormattedText"],"sources":["src/components/biggive-formatted-text/biggive-formatted-text.scss?tag=biggive-formatted-text&encapsulation=shadow","src/components/biggive-formatted-text/biggive-formatted-text.tsx"],"sourcesContent":["@include spacers();\n@include text-colours();\n\n:host {\n  display: block;\n}\n\n.container {\n  @include standard-font();\n  img {\n    width: 100%;\n    height: auto;\n  }\n  a {\n    color: inherit;\n    text-decoration: underline;\n  }\n  &.max-width-10 .sleeve { @include max-width-10(); }\n  &.max-width-15 .sleeve { @include max-width-15(); }\n  &.max-width-20 .sleeve { @include max-width-20(); }\n  &.max-width-25 .sleeve { @include max-width-25(); }\n  &.max-width-30 .sleeve { @include max-width-30(); }\n  &.max-width-35 .sleeve { @include max-width-35(); }\n  &.max-width-40 .sleeve { @include max-width-40(); }\n  &.max-width-45 .sleeve { @include max-width-45(); }\n  &.max-width-50 .sleeve { @include max-width-50(); }\n  &.max-width-55 .sleeve { @include max-width-55(); }\n  &.max-width-60 .sleeve { @include max-width-60(); }\n  &.max-width-65 .sleeve { @include max-width-65(); }\n  &.max-width-70 .sleeve { @include max-width-70(); }\n  &.max-width-75 .sleeve { @include max-width-75(); }\n  &.max-width-80 .sleeve { @include max-width-80(); }\n  &.max-width-85 .sleeve { @include max-width-85(); }\n  &.max-width-90 .sleeve { @include max-width-90(); }\n  &.max-width-95 .sleeve { @include max-width-95(); }\n}\n\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-formatted-text',\n  styleUrl: 'biggive-formatted-text.scss',\n  shadow: true,\n})\nexport class BiggiveFormattedText {\n  /**\n   * Space below component\n   */\n  @Prop() spaceBelow: number = 0;\n  /**\n   * Default text colour\n   */\n  @Prop() defaultTextColour: string = 'primary';\n\n  /**\n   * Width\n   */\n  @Prop() maxWidth: number = 100;\n\n  render() {\n    return (\n      <div class={'container max-width-' + this.maxWidth + ' text-colour-' + this.defaultTextColour + ' space-below-' + this.spaceBelow}>\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"],"version":3}

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

@@ -10,9 +10,6 @@ const BiggiveGenericIcon = /*@__PURE__*/ proxyCustomElement(class BiggiveGeneric
         this.__registerHost();
         this.backgroundColour = 'primary';
         this.iconColour = 'white';
-        this.iconGroup = undefined;
-        this.icon = undefined;
-        this.url = undefined;
     }
     getIconDefinition() {
         let iconDefinition;

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

@@ -1 +1 @@
-{"file":"biggive-generic-icon2.js","mappings":";;;AAAA,MAAM,qBAAqB,GAAG,+3QAA+3Q,CAAC;AAC95Q,iCAAe,qBAAqB;;MCSvB,kBAAkB;;;;gCACW,SAAS;0BAEf,OAAO;;;;;IAQjC,iBAAiB;QACvB,IAAI,cAAc,CAAC;QACnB,IAAI,IAAI,CAAC,SAAS,IAAI,aAAa,EAAE;YACnC,cAAc,GAAG,uBAAuB,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SACxE;aAAM,IAAI,IAAI,CAAC,SAAS,IAAI,MAAM,EAAE;YACnC,cAAc,GAAG,uBAAuB,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SACjE;aAAM,IAAI,IAAI,CAAC,SAAS,IAAI,QAAQ,EAAE;YACrC,cAAc,GAAG,uBAAuB,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SACnE;aAAM,IAAI,IAAI,CAAC,SAAS,IAAI,UAAU,EAAE;YACvC,cAAc,GAAG,uBAAuB,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SACrE;QACD,OAAO,cAAc,CAAC;KACvB;IAED,MAAM;QACJ,MAAM,cAAc,GAAG,IAAI,CAAC,iBAAiB,EAAE,CAAC;QAEhD;;QAEE,4DAAK,KAAK,EAAE,sCAAsC,GAAG,IAAI,CAAC,gBAAgB,GAAG,GAAG,GAAG,IAAI,CAAC,IAAI,IAC1F,0DAAG,IAAI,EAAE,IAAI,CAAC,GAAG,IACd,cAAc,IACb,WACE,KAAK,EAAE,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC,EAC7B,MAAM,EAAE,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC,EAC9B,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC,UAAU,EAChC,OAAO,EAAE,MAAM,GAAG,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,GAAG,GAAG,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC,IAEvE,YAAM,CAAC,EAAE,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,GAAI,CAC1C,IACJ,IAAI,CACN,CACA,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/biggive-generic-icon/biggive-generic-icon.scss?tag=biggive-generic-icon","src/components/biggive-generic-icon/biggive-generic-icon.tsx"],"sourcesContent":["@include backgrounds();\n@include fills();\n\n:host {\n  display: contents;\n}\n\n.generic-icon-item {\n  @include icon-large();\n\n  @media screen and (max-width: $screen-mobile-max) {\n    @include icon-medium();\n    margin: auto;\n\n    a {\n      margin: auto;\n    }\n  }\n}\n\n.CaretRight {\n  height: 10px;\n  width: 10px;\n  margin-right: 0px;\n  a {\n    padding: 0px;\n  }\n}\n\n.MenuClose {\n  a {\n    svg {\n      height: 12px;\n      width: 12px;\n    }\n  }\n}\n","import { IconDefinition } from '@fortawesome/fontawesome-svg-core';\nimport { Component, Prop, h } from '@stencil/core';\nimport { FontAwesomeIconsService } from '../../util/fontawesome-icons';\nimport { brandColour } from '../../globals/brand-colour';\n\n@Component({\n  tag: 'biggive-generic-icon',\n  styleUrl: 'biggive-generic-icon.scss',\n  shadow: false,\n})\nexport class BiggiveGenericIcon {\n  @Prop() backgroundColour: brandColour = 'primary';\n\n  @Prop() iconColour: brandColour = 'white';\n\n  @Prop() iconGroup: 'beneficiary' | 'misc' | 'social' | 'category';\n\n  @Prop() icon: string;\n\n  @Prop() url: string;\n\n  private getIconDefinition(): IconDefinition | undefined {\n    let iconDefinition;\n    if (this.iconGroup == 'beneficiary') {\n      iconDefinition = FontAwesomeIconsService.getBeneficiaryIcon(this.icon);\n    } else if (this.iconGroup == 'misc') {\n      iconDefinition = FontAwesomeIconsService.getMiscIcon(this.icon);\n    } else if (this.iconGroup == 'social') {\n      iconDefinition = FontAwesomeIconsService.getSocialIcon(this.icon);\n    } else if (this.iconGroup == 'category') {\n      iconDefinition = FontAwesomeIconsService.getCategoryIcon(this.icon);\n    }\n    return iconDefinition;\n  }\n\n  render() {\n    const iconDefinition = this.getIconDefinition();\n\n    return (\n      // Note: the icon name prop is set as a css class too for any styling specific to certain icons\n      <div class={'generic-icon-item background-colour-' + this.backgroundColour + ' ' + this.icon}>\n        <a href={this.url}>\n          {iconDefinition ? (\n            <svg\n              width={iconDefinition.icon[0]}\n              height={iconDefinition.icon[1]}\n              xmlns=\"http://www.w3.org/2000/svg\"\n              class={'fill-' + this.iconColour}\n              viewBox={'0 0 ' + iconDefinition.icon[0] + ' ' + iconDefinition.icon[1]}\n            >\n              <path d={iconDefinition.icon[4].toString()} />\n            </svg>\n          ) : null}\n        </a>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"biggive-generic-icon2.js","mappings":";;;AAAA,MAAM,qBAAqB,GAAG,+3QAA+3Q,CAAC;AAC95Q,iCAAe,qBAAqB;;MCSvB,kBAAkB;IAL/B;;;QAMU,qBAAgB,GAAgB,SAAS,CAAC;QAE1C,eAAU,GAAgB,OAAO,CAAC;KA4C3C;IApCS,iBAAiB;QACvB,IAAI,cAAc,CAAC;QACnB,IAAI,IAAI,CAAC,SAAS,IAAI,aAAa,EAAE;YACnC,cAAc,GAAG,uBAAuB,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SACxE;aAAM,IAAI,IAAI,CAAC,SAAS,IAAI,MAAM,EAAE;YACnC,cAAc,GAAG,uBAAuB,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SACjE;aAAM,IAAI,IAAI,CAAC,SAAS,IAAI,QAAQ,EAAE;YACrC,cAAc,GAAG,uBAAuB,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SACnE;aAAM,IAAI,IAAI,CAAC,SAAS,IAAI,UAAU,EAAE;YACvC,cAAc,GAAG,uBAAuB,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SACrE;QACD,OAAO,cAAc,CAAC;KACvB;IAED,MAAM;QACJ,MAAM,cAAc,GAAG,IAAI,CAAC,iBAAiB,EAAE,CAAC;QAEhD;;QAEE,4DAAK,KAAK,EAAE,sCAAsC,GAAG,IAAI,CAAC,gBAAgB,GAAG,GAAG,GAAG,IAAI,CAAC,IAAI,IAC1F,0DAAG,IAAI,EAAE,IAAI,CAAC,GAAG,IACd,cAAc,IACb,WACE,KAAK,EAAE,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC,EAC7B,MAAM,EAAE,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC,EAC9B,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC,UAAU,EAChC,OAAO,EAAE,MAAM,GAAG,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,GAAG,GAAG,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC,IAEvE,YAAM,CAAC,EAAE,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,GAAI,CAC1C,IACJ,IAAI,CACN,CACA,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/biggive-generic-icon/biggive-generic-icon.scss?tag=biggive-generic-icon","src/components/biggive-generic-icon/biggive-generic-icon.tsx"],"sourcesContent":["@include backgrounds();\n@include fills();\n\n:host {\n  display: contents;\n}\n\n.generic-icon-item {\n  @include icon-large();\n\n  @media screen and (max-width: $screen-mobile-max) {\n    @include icon-medium();\n    margin: auto;\n\n    a {\n      margin: auto;\n    }\n  }\n}\n\n.CaretRight {\n  height: 10px;\n  width: 10px;\n  margin-right: 0px;\n  a {\n    padding: 0px;\n  }\n}\n\n.MenuClose {\n  a {\n    svg {\n      height: 12px;\n      width: 12px;\n    }\n  }\n}\n","import { IconDefinition } from '@fortawesome/fontawesome-svg-core';\nimport { Component, Prop, h } from '@stencil/core';\nimport { FontAwesomeIconsService } from '../../util/fontawesome-icons';\nimport { brandColour } from '../../globals/brand-colour';\n\n@Component({\n  tag: 'biggive-generic-icon',\n  styleUrl: 'biggive-generic-icon.scss',\n  shadow: false,\n})\nexport class BiggiveGenericIcon {\n  @Prop() backgroundColour: brandColour = 'primary';\n\n  @Prop() iconColour: brandColour = 'white';\n\n  @Prop() iconGroup: 'beneficiary' | 'misc' | 'social' | 'category';\n\n  @Prop() icon: string;\n\n  @Prop() url: string;\n\n  private getIconDefinition(): IconDefinition | undefined {\n    let iconDefinition;\n    if (this.iconGroup == 'beneficiary') {\n      iconDefinition = FontAwesomeIconsService.getBeneficiaryIcon(this.icon);\n    } else if (this.iconGroup == 'misc') {\n      iconDefinition = FontAwesomeIconsService.getMiscIcon(this.icon);\n    } else if (this.iconGroup == 'social') {\n      iconDefinition = FontAwesomeIconsService.getSocialIcon(this.icon);\n    } else if (this.iconGroup == 'category') {\n      iconDefinition = FontAwesomeIconsService.getCategoryIcon(this.icon);\n    }\n    return iconDefinition;\n  }\n\n  render() {\n    const iconDefinition = this.getIconDefinition();\n\n    return (\n      // Note: the icon name prop is set as a css class too for any styling specific to certain icons\n      <div class={'generic-icon-item background-colour-' + this.backgroundColour + ' ' + this.icon}>\n        <a href={this.url}>\n          {iconDefinition ? (\n            <svg\n              width={iconDefinition.icon[0]}\n              height={iconDefinition.icon[1]}\n              xmlns=\"http://www.w3.org/2000/svg\"\n              class={'fill-' + this.iconColour}\n              viewBox={'0 0 ' + iconDefinition.icon[0] + ' ' + iconDefinition.icon[1]}\n            >\n              <path d={iconDefinition.icon[4].toString()} />\n            </svg>\n          ) : null}\n        </a>\n      </div>\n    );\n  }\n}\n"],"version":3}