npm - @biggive/components - Versions diffs - 202401191800.0.0 → 202401231203.0.0 - Mend

@biggive/components 202401191800.0.0 → 202401231203.0.0

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

Files changed (224) hide show

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

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 const biggiveButtonCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.space-above-0{margin-top:0}.space-above-1{margin-top:5px}.space-above-2{margin-top:10px}.space-above-3{margin-top:15px}.space-above-4{margin-top:30px}.space-above-5{margin-top:45px}.space-above-6{margin-top:60px}.space-below-0{margin-bottom:0}.space-below-1{margin-bottom:5px}.space-below-2{margin-bottom:10px}.space-below-3{margin-bottom:15px}.space-below-4{margin-bottom:30px}.space-below-5{margin-bottom:45px}.space-below-6{margin-bottom:60px}:host{display:contents}.container{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px}.container a{display:inline-block}.container a.full-width-true{display:block}.container.centered-true{text-align:center}.button{font-size:17px;line-height:24px;padding:10px 30px;border-radius:5px;border:1px solid #000000;background-color:#000000;color:#FFFFFF;display:inline-block;text-decoration:none;text-align:center;transition:all ease-in-out 0.5s;cursor:pointer}.button:hover{background-color:#FFFFFF;color:#000000}.button.size-small{font-size:13px;line-height:17px;padding:5px 15px}.button.button.rounded-true{border-radius:27.5px}.button.button.rounded-true.size-small{border-radius:20px}.button-clear-brand-6{color:#CBC8C8;background-color:transparent;text-decoration:underline;border:0;padding-left:0;padding-right:0}.button-clear-brand-6:hover{text-decoration:none;background-color:transparent}.button-primary{color:#FFFFFF;background-color:#2C089B;border-color:#2C089B}.button-primary:hover{color:#2C089B;background-color:#FFFFFF}.button-secondary{color:#FFFFFF;background-color:#2AF135;border-color:#2AF135}.button-secondary:hover{color:#2AF135;background-color:#FFFFFF}.button-tertiary{color:#FFFFFF;background-color:#FF7272;border-color:#FF7272}.button-tertiary:hover{color:#FF7272;background-color:#FFFFFF}.button-brand-1{color:#FFFFFF;background-color:#B30510;border-color:#B30510}.button-brand-1:hover{color:#B30510;background-color:#FFFFFF}.button-brand-2{color:#FFFFFF;background-color:#6E0887;border-color:#6E0887}.button-brand-2:hover{color:#6E0887;background-color:#FFFFFF}.button-brand-3{color:#FFFFFF;background-color:#50B400;border-color:#50B400}.button-brand-3:hover{color:#50B400;background-color:#FFFFFF}.button-brand-4{color:#FFFFFF;background-color:#FFE500;border-color:#FFE500}.button-brand-4:hover{color:#FFE500;background-color:#FFFFFF}.button-brand-5{color:#FFFFFF;background-color:#F07D00;border-color:#F07D00}.button-brand-5:hover{color:#F07D00;background-color:#FFFFFF}.button-brand-cc-red{color:#FFFFFF;background-color:#B30510;border-color:#B30510}.button-brand-cc-red:hover{color:#B30510;background-color:#FFFFFF}.button-brand-wgmf-purple{color:#FFFFFF;background-color:#6E0887;border-color:#6E0887}.button-brand-wgmf-purple:hover{color:#6E0887;background-color:#FFFFFF}.button-brand-gmf-green{color:#FFFFFF;background-color:#50B400;border-color:#50B400}.button-brand-gmf-green:hover{color:#50B400;background-color:#FFFFFF}.button-brand-emf-yellow{color:#FFFFFF;background-color:#FFE500;border-color:#FFE500}.button-brand-emf-yellow:hover{color:#FFE500;background-color:#FFFFFF}.button-brand-c4c-orange{color:#FFFFFF;background-color:#F07D00;border-color:#F07D00}.button-brand-c4c-orange:hover{color:#F07D00;background-color:#FFFFFF}.button-brand-afa-pink{color:#FFFFFF;background-color:#BF387D;border-color:#BF387D}.button-brand-afa-pink:hover{color:#BF387D;background-color:#FFFFFF}.button-brand-mhf-turquoise{color:#FFFFFF;background-color:#62CFC9;border-color:#62CFC9}.button-brand-mhf-turquoise:hover{color:#62CFC9;background-color:#FFFFFF}.button-brand-grey{color:#FFFFFF;background-color:#CBC8C8;border-color:#CBC8C8}.button-brand-grey:hover{color:#CBC8C8;background-color:#FFFFFF}.button-white{color:#FFFFFF;background-color:#FFFFFF;border-color:#FFFFFF}.button-white:hover{color:#FFFFFF;background-color:#FFFFFF}.button-black{color:#FFFFFF;background-color:#000000;border-color:#000000}.button-black:hover{color:#000000;background-color:#FFFFFF}.button-grey-extra-light{color:#FFFFFF;background-color:#D7D7D7;border-color:#D7D7D7}.button-grey-extra-light:hover{color:#D7D7D7;background-color:#FFFFFF}.button-grey-light{color:#FFFFFF;background-color:#E8E8E8;border-color:#E8E8E8}.button-grey-light:hover{color:#E8E8E8;background-color:#FFFFFF}.button-grey-medium{color:#FFFFFF;background-color:#8A8A8A;border-color:#8A8A8A}.button-grey-medium:hover{color:#8A8A8A;background-color:#FFFFFF}.button-grey-dark{color:#FFFFFF;background-color:#4A4A4A;border-color:#4A4A4A}.button-grey-dark:hover{color:#4A4A4A;background-color:#FFFFFF}.button-brand-6{color:#FFFFFF;background-color:#CBC8C8;border-color:#CBC8C8}.button-brand-6:hover{background-color:#000000}.button-secondary{color:#000000}.button-secondary:hover{color:#000000;background-color:#FFFFFF;border-color:#000000}.button-brand-4:hover{background-color:#000000}.button-brand-grey{color:#FFFFFF}.button-brand-grey:hover{background-color:#000000}.button-brand-mhf-turquoise:hover{background-color:#000000}.button-brand-afa-pink:hover{background-color:#000000}.button-white{color:#2C089B}.button-white:hover{color:#000000;background-color:#2AF135}.button-black{color:#FFFFFF}.button-black:hover{background-color:#FFFFFF}.button-grey-extra-light{color:#000000}.button-grey-extra-light:hover{background-color:#000000}.button-grey-light{color:#000000}.button-grey-light:hover{background-color:#000000}.button-grey-medium{color:#FFFFFF}.button-grey-medium:hover{background-color:#FFFFFF}.button-grey-dark{color:#FFFFFF}.button-grey-dark:hover{background-color:#FFFFFF}.button-rounded{border-radius:27.5px}.button-rounded.size-small{border-radius:20px}.button-clear-primary{color:#2C089B;background-color:transparent;text-decoration:underline;border:0;padding-left:0;padding-right:0}.button-clear-primary:hover{color:#2C089B;text-decoration:none;background-color:transparent}.button-clear-secondary{color:#2AF135;background-color:transparent;text-decoration:underline;border:0;padding-left:0;padding-right:0}.button-clear-secondary:hover{color:#2AF135;text-decoration:none;background-color:transparent}.button-clear-tertiary{color:#FF7272;background-color:transparent;text-decoration:underline;border:0;padding-left:0;padding-right:0}.button-clear-tertiary:hover{color:#FF7272;text-decoration:none;background-color:transparent}.button-clear-brand-1{color:#B30510;background-color:transparent;text-decoration:underline;border:0;padding-left:0;padding-right:0}.button-clear-brand-1:hover{color:#B30510;text-decoration:none;background-color:transparent}.button-clear-brand-2{color:#6E0887;background-color:transparent;text-decoration:underline;border:0;padding-left:0;padding-right:0}.button-clear-brand-2:hover{color:#6E0887;text-decoration:none;background-color:transparent}.button-clear-brand-3{color:#50B400;background-color:transparent;text-decoration:underline;border:0;padding-left:0;padding-right:0}.button-clear-brand-3:hover{color:#50B400;text-decoration:none;background-color:transparent}.button-clear-brand-4{color:#FFE500;background-color:transparent;text-decoration:underline;border:0;padding-left:0;padding-right:0}.button-clear-brand-4:hover{color:#FFE500;text-decoration:none;background-color:transparent}.button-clear-brand-5{color:#F07D00;background-color:transparent;text-decoration:underline;border:0;padding-left:0;padding-right:0}.button-clear-brand-5:hover{color:#F07D00;text-decoration:none;background-color:transparent}.button-clear-brand-cc-red{color:#B30510;background-color:transparent;text-decoration:underline;border:0;padding-left:0;padding-right:0}.button-clear-brand-cc-red:hover{color:#B30510;text-decoration:none;background-color:transparent}.button-clear-brand-wgmf-purple{color:#6E0887;background-color:transparent;text-decoration:underline;border:0;padding-left:0;padding-right:0}.button-clear-brand-wgmf-purple:hover{color:#6E0887;text-decoration:none;background-color:transparent}.button-clear-brand-gmf-green{color:#50B400;background-color:transparent;text-decoration:underline;border:0;padding-left:0;padding-right:0}.button-clear-brand-gmf-green:hover{color:#50B400;text-decoration:none;background-color:transparent}.button-clear-brand-emf-yellow{color:#FFE500;background-color:transparent;text-decoration:underline;border:0;padding-left:0;padding-right:0}.button-clear-brand-emf-yellow:hover{color:#FFE500;text-decoration:none;background-color:transparent}.button-clear-brand-c4c-orange{color:#F07D00;background-color:transparent;text-decoration:underline;border:0;padding-left:0;padding-right:0}.button-clear-brand-c4c-orange:hover{color:#F07D00;text-decoration:none;background-color:transparent}.button-clear-brand-afa-pink{color:#BF387D;background-color:transparent;text-decoration:underline;border:0;padding-left:0;padding-right:0}.button-clear-brand-afa-pink:hover{color:#BF387D;text-decoration:none;background-color:transparent}.button-clear-brand-mhf-turquoise{color:#62CFC9;background-color:transparent;text-decoration:underline;border:0;padding-left:0;padding-right:0}.button-clear-brand-mhf-turquoise:hover{color:#62CFC9;text-decoration:none;background-color:transparent}.button-clear-brand-grey{color:#CBC8C8;background-color:transparent;text-decoration:underline;border:0;padding-left:0;padding-right:0}.button-clear-brand-grey:hover{color:#CBC8C8;text-decoration:none;background-color:transparent}.button-clear-white{color:#FFFFFF;background-color:transparent;text-decoration:underline;border:0;padding-left:0;padding-right:0}.button-clear-white:hover{color:#FFFFFF;text-decoration:none;background-color:transparent}.button-clear-black{color:#000000;background-color:transparent;text-decoration:underline;border:0;padding-left:0;padding-right:0}.button-clear-black:hover{color:#000000;text-decoration:none;background-color:transparent}.button-clear-grey-extra-light{color:#D7D7D7;background-color:transparent;text-decoration:underline;border:0;padding-left:0;padding-right:0}.button-clear-grey-extra-light:hover{color:#D7D7D7;text-decoration:none;background-color:transparent}.button-clear-grey-light{color:#E8E8E8;background-color:transparent;text-decoration:underline;border:0;padding-left:0;padding-right:0}.button-clear-grey-light:hover{color:#E8E8E8;text-decoration:none;background-color:transparent}.button-clear-grey-medium{color:#8A8A8A;background-color:transparent;text-decoration:underline;border:0;padding-left:0;padding-right:0}.button-clear-grey-medium:hover{color:#8A8A8A;text-decoration:none;background-color:transparent}.button-clear-grey-dark{color:#4A4A4A;background-color:transparent;text-decoration:underline;border:0;padding-left:0;padding-right:0}.button-clear-grey-dark:hover{color:#4A4A4A;text-decoration:none;background-color:transparent}";
+const BiggiveButtonStyle0 = biggiveButtonCss;
 const BiggiveButton = /*@__PURE__*/ proxyCustomElement(class BiggiveButton extends HTMLElement {
     constructor() {
@@ -29,7 +30,7 @@ const BiggiveButton = /*@__PURE__*/ proxyCustomElement(class BiggiveButton exten
         const href = this.url || 'javascript:void(0);';
         return (h("div", { class: 'container space-below-' + this.spaceBelow + ' centered-' + this.centered }, h("a", { role: "button", href: href, target: this.openInNewTab ? '_blank' : '_self', id: this.buttonId, class: 'button button-' + this.colourScheme + ' full-width-' + this.fullWidth.toString() + ' size-' + this.size + ' rounded-' + this.rounded.toString() }, h("span", { onClick: this.handleButtonClick }, this.label))));
     }
-    static get style() { return biggiveButtonCss; }
+    static get style() { return BiggiveButtonStyle0; }
 }, [1, "biggive-button", {
         "spaceBelow": [2, "space-below"],
         "colourScheme": [1, "colour-scheme"],

package/dist/components/biggive-button2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"biggive-button2.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,u/UAAu/U;;~~MCOngV~~,aAAa;;;;;;QAwDhB,sBAAiB,GAAG,CAAC,KAAU;YACrC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,CAAC,MAAM,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC,CAAC;SACjF,CAAC;0BA9C2B,CAAC;4BAKC,SAAS;qBAKhB,UAAU;;4BAUF,KAAK;yBAKR,KAAK;oBAKX,QAAQ;uBAKJ,KAAK;wBAKJ,KAAK;wBAEM,SAAS;;IAMhD,MAAM;;;;QAIJ,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,IAAI,qBAAqB,CAAC;QAE/C,QACE,WAAK,KAAK,EAAE,wBAAwB,GAAG,IAAI,CAAC,UAAU,GAAG,YAAY,GAAG,IAAI,CAAC,QAAQ,IACnF,SACE,IAAI,EAAC,QAAQ,EACb,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,IAAI,CAAC,YAAY,GAAG,QAAQ,GAAG,OAAO,EAC9C,EAAE,EAAE,IAAI,CAAC,QAAQ,EACjB,KAAK,EAAE,gBAAgB,GAAG,IAAI,CAAC,YAAY,GAAG,cAAc,GAAG,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,GAAG,QAAQ,GAAG,IAAI,CAAC,IAAI,GAAG,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,IAEvJ,YAAM,OAAO,EAAE,IAAI,CAAC,iBAAiB,IAAG,IAAI,CAAC,KAAK,CAAQ,CACxD,CACA,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/biggive-button/biggive-button.scss?tag=biggive-button&encapsulation=shadow","src/components/biggive-button/biggive-button.tsx"],"sourcesContent":["@include spacers();\n\n:host {\n display: contents;\n}\n\n.container {\n @include standard-font();\n a {\n display: inline-block;\n &.full-width-true {\n display: block;\n }\n }\n &.centered-true {\n text-align: center;\n }\n}\n\n.button {\n @include button();\n &.size-small {\n @include button-small();\n }\n\n &.button.rounded-true {\n @include button-rounded();\n }\n}\n// brand-6 color ambiguity (for now keeping its definition outside of the brand colors loop)\n.button-clear-brand-6 {\n color: $colour-brand-grey;\n background-color: transparent;\n text-decoration: underline;\n border: 0;\n padding-left: 0;\n padding-right: 0;\n &:hover {\n text-decoration: none;\n background-color: transparent;\n }\n}\n\n@each $brand, $colour in $colours {\n .button-#{$brand} {\n color: $colour-white; // may be overridden by following rules. Later CSS rules have priority.\n background-color: $colour;\n border-color: $colour;\n &:hover {\n color: $colour;\n background-color: $colour-white; // may be overriden by following rules\n }\n }\n}\n\n// not part of loop, 6 is deprecated\n.button-brand-6 {\n color: $colour-white;\n background-color: $colour-brand-grey;\n border-color: $colour-brand-grey;\n &:hover {\n background-color: $colour-black;\n }\n}\n\n.button-secondary {\n color: $colour-black;\n &:hover {\n color: $colour-black;\n background-color: $colour-white;\n border-color: $colour-black;\n }\n}\n\n.button-brand-4 {\n &:hover {\n background-color: $colour-black;\n }\n}\n\n.button-brand-grey {\n color: $colour-white;\n &:hover {\n background-color: $colour-black;\n }\n}\n\n.button-brand-mhf-turquoise {\n &:hover {\n background-color: $colour-black;\n }\n}\n\n.button-brand-afa-pink {\n &:hover {\n background-color: $colour-black;\n }\n}\n\n.button-white {\n color: $colour-primary-blue;\n &:hover {\n color: $colour-black;\n background-color: $colour-secondary-green;\n }\n}\n\n.button-black {\n color: $colour-white;\n &:hover {\n background-color: $colour-white;\n }\n}\n\n.button-grey-extra-light {\n color: $colour-black;\n &:hover {\n background-color: $colour-black;\n }\n}\n\n.button-grey-light {\n color: $colour-black;\n &:hover {\n background-color: $colour-black;\n }}\n\n.button-grey-medium {\n color: $colour-white;\n &:hover {\n background-color: $colour-white;\n }\n}\n\n.button-grey-dark {\n color: $colour-white;\n &:hover {\n background-color: $colour-white;\n }\n}\n\n.button-rounded {\n @include button-rounded();\n }\n\n @each $brand, $colour in $colours {\n .button-clear-#{$brand} {\n color: $colour;\n background-color: transparent;\n text-decoration: underline;\n border: 0;\n padding-left: 0;\n padding-right: 0;\n &:hover {\n color: $colour;\n text-decoration: none;\n background-color: transparent;\n }\n }\n}\n","import { Component, Event, EventEmitter, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'biggive-button',\n styleUrl: 'biggive-button.scss',\n shadow: true,\n})\nexport class BiggiveButton {\n @Event({\n eventName: 'doButtonClick',\n bubbles: true,\n cancelable: true,\n composed: true,\n })\n doButtonClick: EventEmitter<{ event: object; url: string }>;\n\n /*\n Space below component\n /\n @Prop() spaceBelow: number = 1;\n\n /\n Colour Scheme\n /\n @Prop() colourScheme: string = 'primary';\n\n /\n Text\n /\n @Prop() label: string = 'Click me';\n\n /\n URL\n /\n @Prop() url: string \| undefined;\n\n /\n New Tab\n /\n @Prop() openInNewTab: boolean = false;\n\n /\n Display full width\n /\n @Prop() fullWidth: boolean = false;\n\n /\n Size\n /\n @Prop() size: string = 'medium';\n\n /\n Rounded corners\n /\n @Prop() rounded: boolean = false;\n\n /\n Centered\n */\n @Prop() centered: boolean = false;\n\n @Prop() buttonId: undefined \| string = undefined;\n\n private handleButtonClick = (event: any) => {\n this.doButtonClick.emit({ event: event, url: event.target.parentElement.href });\n };\n\n render() {\n // We always want to have a href so that browsers will see this as a link and allow clicking with keybard.\n // If there's no or an empty href then it isn't possible to click by keyboard and we would have to handle keyboard\n // interaction separately.\n const href = this.url \|\| 'javascript:void(0);';\n\n return (\n <div class={'container space-below-' + this.spaceBelow + ' centered-' + this.centered}>\n <a\n role=\"button\"\n href={href}\n target={this.openInNewTab ? '_blank' : '_self'}\n id={this.buttonId}\n class={'button button-' + this.colourScheme + ' full-width-' + this.fullWidth.toString() + ' size-' + this.size + ' rounded-' + this.rounded.toString()}\n >\n <span onClick={this.handleButtonClick}>{this.label}</span>\n </a>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"biggive-button2.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,u/UAAu/U,CAAC;AACjhV,4BAAe,gBAAgB;;MCMlB,aAAa;;;;;;QAwDhB,sBAAiB,GAAG,CAAC,KAAU;YACrC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,CAAC,MAAM,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC,CAAC;SACjF,CAAC;0BA9C2B,CAAC;4BAKC,SAAS;qBAKhB,UAAU;;4BAUF,KAAK;yBAKR,KAAK;oBAKX,QAAQ;uBAKJ,KAAK;wBAKJ,KAAK;wBAEM,SAAS;;IAMhD,MAAM;;;;QAIJ,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,IAAI,qBAAqB,CAAC;QAE/C,QACE,WAAK,KAAK,EAAE,wBAAwB,GAAG,IAAI,CAAC,UAAU,GAAG,YAAY,GAAG,IAAI,CAAC,QAAQ,IACnF,SACE,IAAI,EAAC,QAAQ,EACb,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,IAAI,CAAC,YAAY,GAAG,QAAQ,GAAG,OAAO,EAC9C,EAAE,EAAE,IAAI,CAAC,QAAQ,EACjB,KAAK,EAAE,gBAAgB,GAAG,IAAI,CAAC,YAAY,GAAG,cAAc,GAAG,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,GAAG,QAAQ,GAAG,IAAI,CAAC,IAAI,GAAG,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,IAEvJ,YAAM,OAAO,EAAE,IAAI,CAAC,iBAAiB,IAAG,IAAI,CAAC,KAAK,CAAQ,CACxD,CACA,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/biggive-button/biggive-button.scss?tag=biggive-button&encapsulation=shadow","src/components/biggive-button/biggive-button.tsx"],"sourcesContent":["@include spacers();\n\n:host {\n display: contents;\n}\n\n.container {\n @include standard-font();\n a {\n display: inline-block;\n &.full-width-true {\n display: block;\n }\n }\n &.centered-true {\n text-align: center;\n }\n}\n\n.button {\n @include button();\n &.size-small {\n @include button-small();\n }\n\n &.button.rounded-true {\n @include button-rounded();\n }\n}\n// brand-6 color ambiguity (for now keeping its definition outside of the brand colors loop)\n.button-clear-brand-6 {\n color: $colour-brand-grey;\n background-color: transparent;\n text-decoration: underline;\n border: 0;\n padding-left: 0;\n padding-right: 0;\n &:hover {\n text-decoration: none;\n background-color: transparent;\n }\n}\n\n@each $brand, $colour in $colours {\n .button-#{$brand} {\n color: $colour-white; // may be overridden by following rules. Later CSS rules have priority.\n background-color: $colour;\n border-color: $colour;\n &:hover {\n color: $colour;\n background-color: $colour-white; // may be overriden by following rules\n }\n }\n}\n\n// not part of loop, 6 is deprecated\n.button-brand-6 {\n color: $colour-white;\n background-color: $colour-brand-grey;\n border-color: $colour-brand-grey;\n &:hover {\n background-color: $colour-black;\n }\n}\n\n.button-secondary {\n color: $colour-black;\n &:hover {\n color: $colour-black;\n background-color: $colour-white;\n border-color: $colour-black;\n }\n}\n\n.button-brand-4 {\n &:hover {\n background-color: $colour-black;\n }\n}\n\n.button-brand-grey {\n color: $colour-white;\n &:hover {\n background-color: $colour-black;\n }\n}\n\n.button-brand-mhf-turquoise {\n &:hover {\n background-color: $colour-black;\n }\n}\n\n.button-brand-afa-pink {\n &:hover {\n background-color: $colour-black;\n }\n}\n\n.button-white {\n color: $colour-primary-blue;\n &:hover {\n color: $colour-black;\n background-color: $colour-secondary-green;\n }\n}\n\n.button-black {\n color: $colour-white;\n &:hover {\n background-color: $colour-white;\n }\n}\n\n.button-grey-extra-light {\n color: $colour-black;\n &:hover {\n background-color: $colour-black;\n }\n}\n\n.button-grey-light {\n color: $colour-black;\n &:hover {\n background-color: $colour-black;\n }}\n\n.button-grey-medium {\n color: $colour-white;\n &:hover {\n background-color: $colour-white;\n }\n}\n\n.button-grey-dark {\n color: $colour-white;\n &:hover {\n background-color: $colour-white;\n }\n}\n\n.button-rounded {\n @include button-rounded();\n }\n\n @each $brand, $colour in $colours {\n .button-clear-#{$brand} {\n color: $colour;\n background-color: transparent;\n text-decoration: underline;\n border: 0;\n padding-left: 0;\n padding-right: 0;\n &:hover {\n color: $colour;\n text-decoration: none;\n background-color: transparent;\n }\n }\n}\n","import { Component, Event, EventEmitter, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'biggive-button',\n styleUrl: 'biggive-button.scss',\n shadow: true,\n})\nexport class BiggiveButton {\n @Event({\n eventName: 'doButtonClick',\n bubbles: true,\n cancelable: true,\n composed: true,\n })\n doButtonClick: EventEmitter<{ event: object; url: string }>;\n\n /*\n Space below component\n /\n @Prop() spaceBelow: number = 1;\n\n /\n Colour Scheme\n /\n @Prop() colourScheme: string = 'primary';\n\n /\n Text\n /\n @Prop() label: string = 'Click me';\n\n /\n URL\n /\n @Prop() url: string \| undefined;\n\n /\n New Tab\n /\n @Prop() openInNewTab: boolean = false;\n\n /\n Display full width\n /\n @Prop() fullWidth: boolean = false;\n\n /\n Size\n /\n @Prop() size: string = 'medium';\n\n /\n Rounded corners\n /\n @Prop() rounded: boolean = false;\n\n /\n Centered\n */\n @Prop() centered: boolean = false;\n\n @Prop() buttonId: undefined \| string = undefined;\n\n private handleButtonClick = (event: any) => {\n this.doButtonClick.emit({ event: event, url: event.target.parentElement.href });\n };\n\n render() {\n // We always want to have a href so that browsers will see this as a link and allow clicking with keybard.\n // If there's no or an empty href then it isn't possible to click by keyboard and we would have to handle keyboard\n // interaction separately.\n const href = this.url \|\| 'javascript:void(0);';\n\n return (\n <div class={'container space-below-' + this.spaceBelow + ' centered-' + this.centered}>\n <a\n role=\"button\"\n href={href}\n target={this.openInNewTab ? '_blank' : '_self'}\n id={this.buttonId}\n class={'button button-' + this.colourScheme + ' full-width-' + this.fullWidth.toString() + ' size-' + this.size + ' rounded-' + this.rounded.toString()}\n >\n <span onClick={this.handleButtonClick}>{this.label}</span>\n </a>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/components/biggive-call-to-action.js CHANGED Viewed

@@ -2,6 +2,7 @@ import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/clien
 import { d as defineCustomElement$2 } from './biggive-button2.js';
 const biggiveCallToActionCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}h1,.heading-1{font-size:47px;line-height:60px;font-weight:bold}h2,.heading-2{font-size:38px;line-height:45px;font-weight:bold}h3,.heading-3{font-size:25px;line-height:32px;font-weight:bold}h4,.heading-4{font-size:20px;line-height:24px;font-weight:bold}h5,.heading-5{font-size:17px;line-height:24px;font-weight:bold}.space-above-0{margin-top:0}.space-above-1{margin-top:5px}.space-above-2{margin-top:10px}.space-above-3{margin-top:15px}.space-above-4{margin-top:30px}.space-above-5{margin-top:45px}.space-above-6{margin-top:60px}.space-below-0{margin-bottom:0}.space-below-1{margin-bottom:5px}.space-below-2{margin-bottom:10px}.space-below-3{margin-bottom:15px}.space-below-4{margin-bottom:30px}.space-below-5{margin-bottom:45px}.space-below-6{margin-bottom:60px}.text-colour-hover-primary:hover,.text-colour-primary{color:#2C089B}.text-colour-hover-secondary:hover,.text-colour-secondary{color:#2AF135}.text-colour-hover-tertiary:hover,.text-colour-tertiary{color:#FF7272}.text-colour-hover-brand-1:hover,.text-colour-brand-1{color:#B30510}.text-colour-hover-brand-2:hover,.text-colour-brand-2{color:#6E0887}.text-colour-hover-brand-3:hover,.text-colour-brand-3{color:#50B400}.text-colour-hover-brand-4:hover,.text-colour-brand-4{color:#FFE500}.text-colour-hover-brand-5:hover,.text-colour-brand-5{color:#F07D00}.text-colour-hover-brand-cc-red:hover,.text-colour-brand-cc-red{color:#B30510}.text-colour-hover-brand-wgmf-purple:hover,.text-colour-brand-wgmf-purple{color:#6E0887}.text-colour-hover-brand-gmf-green:hover,.text-colour-brand-gmf-green{color:#50B400}.text-colour-hover-brand-emf-yellow:hover,.text-colour-brand-emf-yellow{color:#FFE500}.text-colour-hover-brand-c4c-orange:hover,.text-colour-brand-c4c-orange{color:#F07D00}.text-colour-hover-brand-afa-pink:hover,.text-colour-brand-afa-pink{color:#BF387D}.text-colour-hover-brand-mhf-turquoise:hover,.text-colour-brand-mhf-turquoise{color:#62CFC9}.text-colour-hover-brand-grey:hover,.text-colour-brand-grey{color:#CBC8C8}.text-colour-hover-white:hover,.text-colour-white{color:#FFFFFF}.text-colour-hover-black:hover,.text-colour-black{color:#000000}.text-colour-hover-grey-extra-light:hover,.text-colour-grey-extra-light{color:#D7D7D7}.text-colour-hover-grey-light:hover,.text-colour-grey-light{color:#E8E8E8}.text-colour-hover-grey-medium:hover,.text-colour-grey-medium{color:#8A8A8A}.text-colour-hover-grey-dark:hover,.text-colour-grey-dark{color:#4A4A4A}.text-colour-hover-brand-6:hover,.text-colour-brand-6{color:#CBC8C8}:host{display:contents;font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px}.container{max-width:1200px;padding-left:15px;padding-right:15px;margin-left:auto;margin-right:auto;position:relative;text-align:center}.content-wrap .slug{margin:0;padding:0}.content-wrap h2{margin:0 0 5px 0;padding:0}.content-wrap .subtitle{margin:0 0 5px 0;padding:0}.content-wrap .teaser{margin:15px auto 15px auto;max-width:400px;padding:0}@media screen and (max-width: 576px){.content-wrap{text-align:right}h2{padding:40px 0}}";
+const BiggiveCallToActionStyle0 = biggiveCallToActionCss;
 const BiggiveCallToAction$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveCallToAction extends HTMLElement {
     constructor() {
@@ -32,7 +33,7 @@ const BiggiveCallToAction$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveCall
     render() {
         return (h("div", { class: 'container text-colour-' + this.defaultTextColour + ' space-above-' + this.spaceAbove + ' space-below-' + this.spaceBelow }, h("div", { class: "sleeve" }, h("div", { class: "content-wrap" }, h("div", { class: 'slug heading-' + this.slugSize + ' text-colour-' + this.slugColour }, this.slug), h("h2", { class: 'title heading-' + this.mainTitleSize + ' text-colour-' + this.mainTitleColour }, this.mainTitle), h("div", { class: 'slug heading-' + this.subtitleSize + ' text-colour-' + this.subtitleColour }, this.subtitle), h("div", { class: 'teaser text-colour-' + this.teaserColour }, this.teaser), this.primaryButtonLabel != null && this.primaryButtonUrl != null ? (h("div", { class: "button-wrap" }, h("biggive-button", { "colour-scheme": this.primaryButtonColourScheme, url: this.primaryButtonUrl, label: this.primaryButtonLabel }))) : null, this.secondaryButtonLabel != null && this.secondaryButtonUrl != null ? (h("div", { class: "button-wrap" }, h("biggive-button", { "colour-scheme": this.secondaryButtonColourScheme, url: this.secondaryButtonUrl, label: this.secondaryButtonLabel }))) : null))));
     }
-    static get style() { return biggiveCallToActionCss; }
+    static get style() { return BiggiveCallToActionStyle0; }
 }, [1, "biggive-call-to-action", {
         "spaceAbove": [2, "space-above"],
         "spaceBelow": [2, "space-below"],

package/dist/components/biggive-call-to-action.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"biggive-call-to-action.js","mappings":";;;AAAA,MAAM,sBAAsB,GAAG,khGAAkhG;;~~MCOpiGA~~,qBAAmB;;;;;0BAID,CAAC;0BAID,CAAC;iCAIM,SAAS;wBAKlB,CAAC;0BAIC,EAAE;;+BASG,EAAE;6BAIJ,CAAC;;4BASF,CAAC;8BAIC,EAAE;;4BAUJ,EAAE;;;;yCAoBW,SAAS;;;2CAeP,SAAS;;IAEvD,MAAM;QACJ,QACE,WAAK,KAAK,EAAE,wBAAwB,GAAG,IAAI,CAAC,iBAAiB,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,IACnI,WAAK,KAAK,EAAC,QAAQ,IACjB,WAAK,KAAK,EAAC,cAAc,IACvB,WAAK,KAAK,EAAE,eAAe,GAAG,IAAI,CAAC,QAAQ,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,IAAG,IAAI,CAAC,IAAI,CAAO,EAClG,UAAI,KAAK,EAAE,gBAAgB,GAAG,IAAI,CAAC,aAAa,GAAG,eAAe,GAAG,IAAI,CAAC,eAAe,IAAG,IAAI,CAAC,SAAS,CAAM,EAChH,WAAK,KAAK,EAAE,eAAe,GAAG,IAAI,CAAC,YAAY,GAAG,eAAe,GAAG,IAAI,CAAC,cAAc,IAAG,IAAI,CAAC,QAAQ,CAAO,EAC9G,WAAK,KAAK,EAAE,qBAAqB,GAAG,IAAI,CAAC,YAAY,IAAG,IAAI,CAAC,MAAM,CAAO,EACzE,IAAI,CAAC,kBAAkB,IAAI,IAAI,IAAI,IAAI,CAAC,gBAAgB,IAAI,IAAI,IAC/D,WAAK,KAAK,EAAC,aAAa,IACtB,uCAA+B,IAAI,CAAC,yBAAyB,EAAE,GAAG,EAAE,IAAI,CAAC,gBAAgB,EAAE,KAAK,EAAE,IAAI,CAAC,kBAAkB,GAAmB,CACxI,IACJ,IAAI,EACP,IAAI,CAAC,oBAAoB,IAAI,IAAI,IAAI,IAAI,CAAC,kBAAkB,IAAI,IAAI,IACnE,WAAK,KAAK,EAAC,aAAa,IACtB,uCAA+B,IAAI,CAAC,2BAA2B,EAAE,GAAG,EAAE,IAAI,CAAC,kBAAkB,EAAE,KAAK,EAAE,IAAI,CAAC,oBAAoB,GAAmB,CAC9I,IACJ,IAAI,CACJ,CACF,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveCallToAction"],"sources":["src/components/biggive-call-to-action/biggive-call-to-action.scss?tag=biggive-call-to-action&encapsulation=shadow","src/components/biggive-call-to-action/biggive-call-to-action.tsx"],"sourcesContent":["@include headings();\n@include spacers();\n@include text-colours();\n\n:host {\n display: contents;\n @include standard-font();\n}\n\n.container {\n @include section-container();\n position: relative;\n text-align: center;\n}\n\n\n.content-wrap {\n .slug {\n margin: 0;\n padding: 0;\n }\n h2 {\n margin: 0 0 $spacer-1 0;\n padding: 0;\n }\n .subtitle {\n margin: 0 0 $spacer-1 0;\n padding: 0;\n }\n .teaser {\n margin: $spacer-3 auto $spacer-3 auto;\n max-width: 400px;\n padding: 0;\n }\n}\n\n@media screen and (max-width: $screen-mobile-max) {\n .content-wrap {\n text-align: right\n }\n h2 {\n padding: 40px 0;\n }\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'biggive-call-to-action',\n styleUrl: 'biggive-call-to-action.scss',\n shadow: true,\n})\nexport class BiggiveCallToAction {\n /*\n Space above component\n /\n @Prop() spaceAbove: number = 0;\n /\n Space below component\n /\n @Prop() spaceBelow: number = 0;\n /\n Default text colour\n /\n @Prop() defaultTextColour: string = 'primary';\n\n /\n Slug size\n /\n @Prop() slugSize: number = 4;\n /\n Slug colour\n /\n @Prop() slugColour: string = '';\n /\n Slug\n /\n @Prop() slug: string;\n\n /\n Main title colour\n /\n @Prop() mainTitleColour: string = '';\n /\n Main title size\n /\n @Prop() mainTitleSize: number = 2;\n /\n Main title\n /\n @Prop() mainTitle: string;\n\n /\n Main title size\n /\n @Prop() subtitleSize: number = 4;\n /\n Subtitle colour\n /\n @Prop() subtitleColour: string = '';\n\n /\n Subtitle\n /\n @Prop() subtitle: string;\n\n /\n Teaser colour\n /\n @Prop() teaserColour: string = '';\n\n /\n Teaser\n /\n @Prop() teaser: string;\n\n /\n Primary button Url\n /\n @Prop() primaryButtonUrl: string;\n\n /\n Primary button Label\n /\n @Prop() primaryButtonLabel: string;\n\n /\n Primary button Colour Scheme\n /\n @Prop() primaryButtonColourScheme: string = 'primary';\n\n /\n Secondary button Url\n /\n @Prop() secondaryButtonUrl: string;\n\n /\n Secondary button Label\n /\n @Prop() secondaryButtonLabel: string;\n\n /\n Secondary button Colour Scheme\n */\n @Prop() secondaryButtonColourScheme: string = 'primary';\n\n render() {\n return (\n <div class={'container text-colour-' + this.defaultTextColour + ' space-above-' + this.spaceAbove + ' space-below-' + this.spaceBelow}>\n <div class=\"sleeve\">\n <div class=\"content-wrap\">\n <div class={'slug heading-' + this.slugSize + ' text-colour-' + this.slugColour}>{this.slug}</div>\n <h2 class={'title heading-' + this.mainTitleSize + ' text-colour-' + this.mainTitleColour}>{this.mainTitle}</h2>\n <div class={'slug heading-' + this.subtitleSize + ' text-colour-' + this.subtitleColour}>{this.subtitle}</div>\n <div class={'teaser text-colour-' + this.teaserColour}>{this.teaser}</div>\n {this.primaryButtonLabel != null && this.primaryButtonUrl != null ? (\n <div class=\"button-wrap\">\n <biggive-button colour-scheme={this.primaryButtonColourScheme} url={this.primaryButtonUrl} label={this.primaryButtonLabel}></biggive-button>\n </div>\n ) : null}\n {this.secondaryButtonLabel != null && this.secondaryButtonUrl != null ? (\n <div class=\"button-wrap\">\n <biggive-button colour-scheme={this.secondaryButtonColourScheme} url={this.secondaryButtonUrl} label={this.secondaryButtonLabel}></biggive-button>\n </div>\n ) : null}\n </div>\n </div>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"biggive-call-to-action.js","mappings":";;;AAAA,MAAM,sBAAsB,GAAG,khGAAkhG,CAAC;AACljG,kCAAe,sBAAsB;;MCMxBA,qBAAmB;;;;;0BAID,CAAC;0BAID,CAAC;iCAIM,SAAS;wBAKlB,CAAC;0BAIC,EAAE;;+BASG,EAAE;6BAIJ,CAAC;;4BASF,CAAC;8BAIC,EAAE;;4BAUJ,EAAE;;;;yCAoBW,SAAS;;;2CAeP,SAAS;;IAEvD,MAAM;QACJ,QACE,WAAK,KAAK,EAAE,wBAAwB,GAAG,IAAI,CAAC,iBAAiB,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,IACnI,WAAK,KAAK,EAAC,QAAQ,IACjB,WAAK,KAAK,EAAC,cAAc,IACvB,WAAK,KAAK,EAAE,eAAe,GAAG,IAAI,CAAC,QAAQ,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,IAAG,IAAI,CAAC,IAAI,CAAO,EAClG,UAAI,KAAK,EAAE,gBAAgB,GAAG,IAAI,CAAC,aAAa,GAAG,eAAe,GAAG,IAAI,CAAC,eAAe,IAAG,IAAI,CAAC,SAAS,CAAM,EAChH,WAAK,KAAK,EAAE,eAAe,GAAG,IAAI,CAAC,YAAY,GAAG,eAAe,GAAG,IAAI,CAAC,cAAc,IAAG,IAAI,CAAC,QAAQ,CAAO,EAC9G,WAAK,KAAK,EAAE,qBAAqB,GAAG,IAAI,CAAC,YAAY,IAAG,IAAI,CAAC,MAAM,CAAO,EACzE,IAAI,CAAC,kBAAkB,IAAI,IAAI,IAAI,IAAI,CAAC,gBAAgB,IAAI,IAAI,IAC/D,WAAK,KAAK,EAAC,aAAa,IACtB,uCAA+B,IAAI,CAAC,yBAAyB,EAAE,GAAG,EAAE,IAAI,CAAC,gBAAgB,EAAE,KAAK,EAAE,IAAI,CAAC,kBAAkB,GAAmB,CACxI,IACJ,IAAI,EACP,IAAI,CAAC,oBAAoB,IAAI,IAAI,IAAI,IAAI,CAAC,kBAAkB,IAAI,IAAI,IACnE,WAAK,KAAK,EAAC,aAAa,IACtB,uCAA+B,IAAI,CAAC,2BAA2B,EAAE,GAAG,EAAE,IAAI,CAAC,kBAAkB,EAAE,KAAK,EAAE,IAAI,CAAC,oBAAoB,GAAmB,CAC9I,IACJ,IAAI,CACJ,CACF,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveCallToAction"],"sources":["src/components/biggive-call-to-action/biggive-call-to-action.scss?tag=biggive-call-to-action&encapsulation=shadow","src/components/biggive-call-to-action/biggive-call-to-action.tsx"],"sourcesContent":["@include headings();\n@include spacers();\n@include text-colours();\n\n:host {\n display: contents;\n @include standard-font();\n}\n\n.container {\n @include section-container();\n position: relative;\n text-align: center;\n}\n\n\n.content-wrap {\n .slug {\n margin: 0;\n padding: 0;\n }\n h2 {\n margin: 0 0 $spacer-1 0;\n padding: 0;\n }\n .subtitle {\n margin: 0 0 $spacer-1 0;\n padding: 0;\n }\n .teaser {\n margin: $spacer-3 auto $spacer-3 auto;\n max-width: 400px;\n padding: 0;\n }\n}\n\n@media screen and (max-width: $screen-mobile-max) {\n .content-wrap {\n text-align: right\n }\n h2 {\n padding: 40px 0;\n }\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'biggive-call-to-action',\n styleUrl: 'biggive-call-to-action.scss',\n shadow: true,\n})\nexport class BiggiveCallToAction {\n /*\n Space above component\n /\n @Prop() spaceAbove: number = 0;\n /\n Space below component\n /\n @Prop() spaceBelow: number = 0;\n /\n Default text colour\n /\n @Prop() defaultTextColour: string = 'primary';\n\n /\n Slug size\n /\n @Prop() slugSize: number = 4;\n /\n Slug colour\n /\n @Prop() slugColour: string = '';\n /\n Slug\n /\n @Prop() slug: string;\n\n /\n Main title colour\n /\n @Prop() mainTitleColour: string = '';\n /\n Main title size\n /\n @Prop() mainTitleSize: number = 2;\n /\n Main title\n /\n @Prop() mainTitle: string;\n\n /\n Main title size\n /\n @Prop() subtitleSize: number = 4;\n /\n Subtitle colour\n /\n @Prop() subtitleColour: string = '';\n\n /\n Subtitle\n /\n @Prop() subtitle: string;\n\n /\n Teaser colour\n /\n @Prop() teaserColour: string = '';\n\n /\n Teaser\n /\n @Prop() teaser: string;\n\n /\n Primary button Url\n /\n @Prop() primaryButtonUrl: string;\n\n /\n Primary button Label\n /\n @Prop() primaryButtonLabel: string;\n\n /\n Primary button Colour Scheme\n /\n @Prop() primaryButtonColourScheme: string = 'primary';\n\n /\n Secondary button Url\n /\n @Prop() secondaryButtonUrl: string;\n\n /\n Secondary button Label\n /\n @Prop() secondaryButtonLabel: string;\n\n /\n Secondary button Colour Scheme\n */\n @Prop() secondaryButtonColourScheme: string = 'primary';\n\n render() {\n return (\n <div class={'container text-colour-' + this.defaultTextColour + ' space-above-' + this.spaceAbove + ' space-below-' + this.spaceBelow}>\n <div class=\"sleeve\">\n <div class=\"content-wrap\">\n <div class={'slug heading-' + this.slugSize + ' text-colour-' + this.slugColour}>{this.slug}</div>\n <h2 class={'title heading-' + this.mainTitleSize + ' text-colour-' + this.mainTitleColour}>{this.mainTitle}</h2>\n <div class={'slug heading-' + this.subtitleSize + ' text-colour-' + this.subtitleColour}>{this.subtitle}</div>\n <div class={'teaser text-colour-' + this.teaserColour}>{this.teaser}</div>\n {this.primaryButtonLabel != null && this.primaryButtonUrl != null ? (\n <div class=\"button-wrap\">\n <biggive-button colour-scheme={this.primaryButtonColourScheme} url={this.primaryButtonUrl} label={this.primaryButtonLabel}></biggive-button>\n </div>\n ) : null}\n {this.secondaryButtonLabel != null && this.secondaryButtonUrl != null ? (\n <div class=\"button-wrap\">\n <biggive-button colour-scheme={this.secondaryButtonColourScheme} url={this.secondaryButtonUrl} label={this.secondaryButtonLabel}></biggive-button>\n </div>\n ) : null}\n </div>\n </div>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/components/biggive-campaign-card-filter-grid.js CHANGED Viewed

@@ -5,6 +5,7 @@ import { d as defineCustomElement$3 } from './biggive-form-field-select2.js';
 import { d as defineCustomElement$2 } from './biggive-popup2.js';
 const biggiveCampaignCardFilterGridCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.space-above-0{margin-top:0}.space-above-1{margin-top:5px}.space-above-2{margin-top:10px}.space-above-3{margin-top:15px}.space-above-4{margin-top:30px}.space-above-5{margin-top:45px}.space-above-6{margin-top:60px}.space-below-0{margin-bottom:0}.space-below-1{margin-bottom:5px}.space-below-2{margin-bottom:10px}.space-below-3{margin-bottom:15px}.space-below-4{margin-bottom:30px}.space-below-5{margin-bottom:45px}.space-below-6{margin-bottom:60px}:host{display:content}.select-wrapper-1,.select-wrapper-2,.select-wrapper-3,.select-wrapper-4{position:relative;margin-top:1em}.select-wrapper-1{z-index:4}.select-wrapper-2{z-index:3}.select-wrapper-3{z-index:2}.select-wrapper-4{z-index:1}.container{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;position:relative}.container .search-wrap{background-color:#FFFFFF;padding:15px 30px;margin-bottom:15px}.container .search-wrap h4{margin-bottom:15px}.container .search-wrap .field-wrap{display:flex;justify-content:space-between}.container .search-wrap .field-wrap .input-wrap{display:flex;justify-content:space-between;padding-bottom:5px;border-bottom:1px solid #000000;margin-right:30px;flex-grow:1}.container .search-wrap .field-wrap .input-wrap input{border:0}.container .search-wrap .field-wrap button{padding:5px 30px}.selected-filter-wrap{display:flex;margin-bottom:30px;padding:0}.selected-filter-wrap .button{cursor:pointer;border-radius:20px;padding:5px 50px 5px 20px;margin-right:15px;background-color:#FF7272;color:#000000;border:1px solid #FF7272;text-decoration:none;background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgMTguNCAxOC40IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxOC40IDE4LjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7c3Ryb2tlOiMwMDAwMDA7fQo8L3N0eWxlPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNOS4yLDguNUwxNywwLjdsMC43LDAuN0w5LjksOS4ybDcuOCw3LjhMMTcsMTcuN0w5LjIsOS45bC03LjgsNy44TDAuNywxN2w3LjgtNy44TDAuNywxLjRsMC43LTAuN0w5LjIsOC41eiIvPgo8L3N2Zz4K);background-repeat:no-repeat;background-position:right 20px center;background-size:12px auto}.selected-filter-wrap .button:hover{background-color:#FFFFFF;color:#000000}.selected-filter-wrap .clear-all{margin-left:auto}.selected-filter-wrap .clear-all a{cursor:pointer;border-radius:20px;padding:5px 20px;background-color:#2C089B;color:#FFFFFF;border:1px solid #2C089B;text-decoration:none}.selected-filter-wrap .clear-all a:hover{background-color:#FFFFFF;color:#2C089B}.sort-filter-wrap{display:flex;justify-content:flex-end;margin-bottom:30px;padding:0;text-align:right;display:flex}.sort-filter-wrap .clear-all{cursor:pointer;vertical-align:center;margin-top:auto;margin-bottom:auto}.sort-filter-wrap .sort-wrap{margin-left:15px}.sort-filter-wrap .filter-wrap{background-color:#F4F4F4;margin-left:15px}.sort-filter-wrap .filter-wrap .button.filter{padding-left:60px;padding-right:30px}.sort-filter-wrap .filter-wrap .button.filter .filter-icon{content:\"\";display:block;position:absolute;left:25px;top:17px;width:13px;height:13px}.sort-filter-wrap .filter-wrap .button.filter .filter-icon svg{width:100%;height:auto;vertical-align:top}.sort-filter-wrap .filter-wrap .button.filter .filter-icon svg:hover{fill:#2C089B}.icon{height:1rem;width:2rem;vertical-align:-0.125rem;margin:auto}.icon>path{fill:#2C089B}.icon-clear-all>path{fill:#000000}@media screen and (max-width: 450px){.sort-filter-wrap{flex-direction:column-reverse}.sort-filter-wrap .sort-wrap{margin-top:20px;margin-bottom:20px}}@media screen and (max-width: 350px){.sort-filter-wrap{justify-content:space-between}.sort-filter-wrap .sort-wrap{margin-left:0px}.sort-filter-wrap .filter-wrap{margin-left:3px}}.align-right{text-align:right}.input-text{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;color:#000000;padding:5px 10px;box-sizing:border-box;width:100%}.input-text:focus{outline:0}.input-text:placeholder{color:#4A4A4A}.text-colour-primary{color:#2C089B}";
+const BiggiveCampaignCardFilterGridStyle0 = biggiveCampaignCardFilterGridCss;
 const BiggiveCampaignCardFilterGrid$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveCampaignCardFilterGrid extends HTMLElement {
     constructor() {
@@ -202,7 +203,7 @@ const BiggiveCampaignCardFilterGrid$1 = /*@__PURE__*/ proxyCustomElement(class B
         return Object.entries(options).map(entry => ({ value: entry[0], label: entry[1] }));
     }
     get el() { return this; }
-    static get style() { return biggiveCampaignCardFilterGridCss; }
+    static get style() { return BiggiveCampaignCardFilterGridStyle0; }
 }, [1, "biggive-campaign-card-filter-grid", {
         "spaceBelow": [2, "space-below"],
         "intro": [1],

package/dist/components/biggive-campaign-card-filter-grid.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"biggive-campaign-card-filter-grid.js","mappings":"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","names":["BiggiveCampaignCardFilterGrid"],"sources":["src/components/biggive-campaign-card-filter-grid/biggive-campaign-card-filter-grid.scss?tag=biggive-campaign-card-filter-grid&encapsulation=shadow","src/components/biggive-campaign-card-filter-grid/biggive-campaign-card-filter-grid.tsx"],"sourcesContent":["@include spacers();\n\n:host {\n display: content;\n}\n\n// Each select needs a higher z-index than the one below,\n// so that the drop-down part will occlude it.\n.select-wrapper-1, .select-wrapper-2, .select-wrapper-3, .select-wrapper-4 {\n position: relative;\n margin-top: 1em;\n}\n.select-wrapper-1 {\n z-index: 4;\n}\n.select-wrapper-2 {\n z-index: 3;\n}\n.select-wrapper-3 {\n z-index: 2;\n }\n.select-wrapper-4 {\n z-index: 1;\n}\n\n.container {\n @include standard-font();\n position: relative;\n .search-wrap {\n @include lower-shadow();\n background-color: $colour-white;\n padding: $spacer-3 $spacer-4;\n margin-bottom: $spacer-3;\n h4 {\n margin-bottom: $spacer-3;\n }\n .field-wrap {\n @include flex-container-row();\n\n .input-wrap {\n @include flex-container-row();\n padding-bottom: $spacer-1;\n border-bottom: 1px solid $colour-black;\n margin-right: $spacer-4;\n flex-grow: 1;\n input {\n border: 0;\n }\n }\n button {\n padding: 5px 30px;\n }\n }\n }\n}\n.selected-filter-wrap {\n display: flex;\n margin-bottom: 30px;\n padding: 0;\n .button {\n cursor: pointer;\n border-radius: 20px;\n padding: 5px 50px 5px 20px;\n margin-right: 15px;\n background-color: $colour-tertiary-coral;;\n color: $colour-black;\n border: 1px solid $colour-tertiary-coral;\n text-decoration: none;\n background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgMTguNCAxOC40IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxOC40IDE4LjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7c3Ryb2tlOiMwMDAwMDA7fQo8L3N0eWxlPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNOS4yLDguNUwxNywwLjdsMC43LDAuN0w5LjksOS4ybDcuOCw3LjhMMTcsMTcuN0w5LjIsOS45bC03LjgsNy44TDAuNywxN2w3LjgtNy44TDAuNywxLjRsMC43LTAuN0w5LjIsOC41eiIvPgo8L3N2Zz4K);\n background-repeat: no-repeat;\n background-position: right 20px center;\n background-size: 12px auto;\n &:hover {\n background-color: $colour-white;\n color: $colour-black;\n }\n }\n .clear-all {\n margin-left: auto;\n a {\n cursor: pointer;\n border-radius: 20px;\n padding: 5px 20px;\n background-color: $colour-primary-blue;\n color: $colour-white;\n border: 1px solid $colour-primary-blue;\n text-decoration: none;\n &:hover {\n background-color: $colour-white;\n color: $colour-primary-blue;\n }\n }\n }\n}\n\n.sort-filter-wrap {\n display: flex;\n justify-content: flex-end;\n margin-bottom: $spacer-4;\n padding: 0;\n text-align: right;\n .clear-all {\n cursor: pointer;\n vertical-align: center;\n margin-top: auto;\n margin-bottom: auto;\n }\n\n display: flex;\n .sort-wrap {\n margin-left: 15px;\n }\n\n .filter-wrap {\n background-color: $colour-grey-background; // temp for testing dropdown\n\n margin-left: $spacer-3;\n\n .button.filter {\n padding-left: 60px;\n padding-right: 30px;\n\n .filter-icon {\n content: '';\n display: block;\n position: absolute;\n left: 25px;\n top: 17px;\n width: 13px;\n height: 13px;\n\n svg {\n width: 100%;\n height: auto;\n vertical-align: top;\n\n &:hover {\n fill: $colour-primary-blue;\n }\n }\n }\n }\n }\n}\n\n.icon {\n @include icon();\n margin: auto;\n\n > path {\n fill: $colour-primary-blue;\n }\n}\n\n.icon-clear-all {\n > path {\n fill: $colour-black;\n }\n}\n\n@media screen and (max-width: $screen-mobile-small) {\n .sort-filter-wrap {\n flex-direction: column-reverse;\n .sort-wrap {\n margin-top: 20px;\n margin-bottom: 20px;\n }\n }\n}\n\n@media screen and (max-width: $screen-mobile-x-small) {\n .sort-filter-wrap {\n justify-content: space-between;\n .sort-wrap {\n margin-left: 0px;\n }\n .filter-wrap {\n margin-left: 3px;\n }\n }\n}\n\n.align-right {\n text-align: right;\n}\n\n.input-text {\n @include input-text();\n}\n\n.text-colour-primary {\n color: $colour-primary-blue;\n}\n","import { Component, Element, Event, EventEmitter, h, Prop, State } from '@stencil/core';\nimport { faMagnifyingGlass } from '@fortawesome/pro-solid-svg-icons';\n\n@Component({\n tag: 'biggive-campaign-card-filter-grid',\n styleUrl: 'biggive-campaign-card-filter-grid.scss',\n shadow: true,\n})\nexport class BiggiveCampaignCardFilterGrid {\n @Element() el: HTMLBiggiveCampaignCardFilterGridElement;\n\n /*\n This event `doSearchAndFilterUpdate` event is emitted and propogates to the parent\n * component which handles it\n /\n @Event({\n eventName: 'doSearchAndFilterUpdate',\n bubbles: true,\n cancelable: true,\n composed: true,\n })\n doSearchAndFilterUpdate: EventEmitter<{\n searchText: string \| null;\n sortBy: string \| null;\n filterCategory: string \| null;\n filterBeneficiary: string \| null;\n filterLocation: string \| null;\n filterFunding: string \| null;\n }>;\n\n private sortByPlaceholderText = 'Sort by';\n private beneficiariesPlaceHolderText = 'Select beneficiary';\n private categoriesPlaceHolderText = 'Select category';\n private locationsPlaceHolderText = 'Select location';\n private fundingPlaceHolderText = 'Select funding';\n\n /\n Space below component\n /\n @Prop() spaceBelow: number = 0;\n\n /\n Intro\n /\n @Prop() intro: string = 'Find a charity or project';\n\n /\n Optional search text prop. Useful for pre-populating the search field\n * when the page is loaded with a search term already existing in the URL.\n * This can happen when sharing links, or if a donor goes to a campaign page\n * after searching, and then returns to the search results. In such a case,\n * the search box text will clear, unless we use this prop to populate it on\n * rendering. DON-652.\n /\n @Prop() searchText: string \| null = null;\n\n /\n Defines the text displayed as the placeholder in the input field\n * before the user types anything\n /\n @Prop() placeholderText: string = 'Search';\n\n /\n Defines the text on the search button\n /\n @Prop() buttonText: string = 'Search';\n\n /\n JSON array of category key/values, or takes a stringified equiavalent (for Storybook)\n /\n @Prop() categoryOptions: string \| Record<string, string> \| string[];\n\n /\n JSON array of beneficiary key/values, or takes a stringified equiavalent (for Storybook)\n /\n @Prop() beneficiaryOptions: string \| Record<string, string> \| string[];\n\n /\n JSON array of location key/values, or takes a stringified equiavalent (for Storybook)\n /\n @Prop() locationOptions: string \| Record<string, string> \| string[];\n\n /\n JSON array of funding key/values, or takes a stringified equiavalent (for Storybook)\n /\n @Prop() fundingOptions: string \| Record<string, string> \| string[];\n\n /\n This helps us inject a pre-selected dropdown value from outside of this component.\n * This is especially helpful for the Meta campaign and Explore pages, where searching\n * by text wipes out previous sort options and re-uses Relevance, or where one of those\n * two pages is loaded directly with URL parameters - in such a scenario the dropdown\n * shows that it's pre-selected. DON-558.\n /\n @Prop({ mutable: true }) selectedSortByOption: 'Most raised' \| 'Match funds remaining' \| 'Relevance';\n\n /\n For injecting the chosen category to filter by, as per the comment above for `selectedSortByOption`.\n /\n @Prop({ mutable: true }) selectedFilterCategory: string \| null = null;\n\n /\n For injecting the chosen beneficiary to filter by, as per the comment above for `selectedSortByOption`.\n /\n @Prop({ mutable: true }) selectedFilterBeneficiary: string \| null = null;\n\n /\n For injecting the chosen location to filter by, as per the comment above for `selectedSortByOption`.\n /\n @Prop({ mutable: true }) selectedFilterLocation: string \| null = null;\n\n /\n For injecting the chosen funding to filter by, as per the comment above for `selectedSortByOption`.\n /\n @Prop({ mutable: true }) selectedFilterFunding: string \| null = null;\n\n /\n State variable - causes re-render on change\n /\n @State() filtersApplied: boolean;\n\n private initialSortByOption: 'Most raised' \| 'Match funds remaining' \| 'Relevance';\n\n /\n This and similar properties represent selections made in the popup but not yet applied.\n */\n private newSelectedFilterCategory: string \| null = null;\n private newSelectedFilterBeneficiary: string \| null = null;\n private newSelectedFilterLocation: string \| null = null;\n private newSelectedFilterFunding: string \| null = null;\n\n private categoryFilterSelectionChanged = (value: string) => {\n this.newSelectedFilterCategory = value;\n };\n\n private beneficiarySelectionChanged = (value: string) => {\n this.newSelectedFilterBeneficiary = value;\n };\n\n private locationSelectionChanged = (value: string) => {\n this.newSelectedFilterLocation = value;\n };\n\n private fundingSelectionChanged = (value: string) => {\n this.newSelectedFilterFunding = value;\n };\n\n private sortBySelectionChanged = (value: 'Most raised' \| 'Match funds remaining' \| 'Relevance') => {\n this.selectedSortByOption = value;\n this.doSearchAndFilterUpdate.emit(this.getSearchAndFilterObject());\n };\n\n private getSearchAndFilterObject() {\n return {\n searchText: this.searchText,\n sortBy: this.selectedSortByOption,\n filterCategory: this.selectedFilterCategory,\n filterBeneficiary: this.selectedFilterBeneficiary,\n filterFunding: this.selectedFilterFunding,\n filterLocation: this.selectedFilterLocation,\n };\n }\n\n private handleApplyFilterButtonClick = () => {\n this.selectedFilterCategory = this.newSelectedFilterCategory ?? this.selectedFilterCategory;\n this.selectedFilterBeneficiary = this.newSelectedFilterBeneficiary ?? this.selectedFilterBeneficiary;\n this.selectedFilterLocation = this.newSelectedFilterLocation ?? this.selectedFilterLocation;\n this.selectedFilterFunding = this.newSelectedFilterFunding ?? this.selectedFilterFunding;\n\n const searchAndFilterObj = this.getSearchAndFilterObject();\n this.doSearchAndFilterUpdate.emit(searchAndFilterObj);\n\n const filterPopup = this.el.shadowRoot?.getElementById('filter-popup') as HTMLBiggivePopupElement \| undefined;\n if (filterPopup) {\n filterPopup.closeFromOutside();\n }\n\n this.filtersApplied =\n typeof searchAndFilterObj.filterBeneficiary === 'string' \|\|\n typeof searchAndFilterObj.filterCategory === 'string' \|\|\n typeof searchAndFilterObj.filterFunding === 'string' \|\|\n typeof searchAndFilterObj.filterLocation === 'string';\n };\n\n private removeFilter(filterKey: 'funding' \| 'locations' \| 'categories' \| 'beneficiaries') {\n switch (filterKey) {\n case 'beneficiaries':\n this.selectedFilterBeneficiary = null;\n break;\n case 'categories':\n this.selectedFilterCategory = null;\n break;\n case 'funding':\n this.selectedFilterFunding = null;\n break;\n case 'locations':\n this.selectedFilterLocation = null;\n break;\n default:\n // This asks the compiler to check that we are in dead code, i.e. we covered all the possible filter keys\n // above. If we missed one we would get a compile error trying to assign a string to a never.\n const exhaustiveSwitch: never = filterKey;\n console.error(exhaustiveSwitch);\n }\n\n const selectEl = this.el.shadowRoot?.getElementById(filterKey) as HTMLBiggiveFormFieldSelectElement \| undefined;\n if (!selectEl) {\n return;\n }\n\n selectEl.selectedLabel = null;\n selectEl.selectedValue = null;\n this.doSearchAndFilterUpdate.emit(this.getSearchAndFilterObject());\n }\n\n private handleSearchButtonPressed = () => {\n this.doSearchAndFilterUpdate.emit(this.getSearchAndFilterObject());\n };\n\n private handleSearchTextChanged = (event: any) => {\n this.searchText = event.target.value;\n };\n\n private handleEnterPressed = (ev: KeyboardEvent) => {\n if (ev.key === 'Enter') {\n this.doSearchAndFilterUpdate.emit(this.getSearchAndFilterObject());\n }\n };\n\n private handleFilterButtonClick = () => {\n this.newSelectedFilterBeneficiary = this.selectedFilterBeneficiary;\n this.newSelectedFilterCategory = this.selectedFilterCategory;\n this.newSelectedFilterFunding = this.selectedFilterFunding;\n this.newSelectedFilterLocation = this.selectedFilterLocation;\n\n const filterPopup = this.el.shadowRoot?.getElementById('filter-popup') as HTMLBiggivePopupElement \| undefined;\n if (filterPopup) {\n filterPopup.openFromOutside();\n }\n };\n\n private handleClearAll = () => {\n // Set the 'Filters' button back to the primary background colour\n this.filtersApplied = false;\n\n // Clear all\n this.searchText = null;\n this.selectedSortByOption = this.initialSortByOption;\n this.selectedFilterBeneficiary = null;\n this.selectedFilterCategory = null;\n this.selectedFilterFunding = null;\n this.selectedFilterLocation = null;\n\n // Clear <biggive-form-field-select> components' internal selectedValue and selectedLabel. DON-654.\n ['sort-by', 'categories', 'beneficiaries', 'locations', 'funding'].forEach(id => {\n const theEl = this.el.shadowRoot?.getElementById(id) as HTMLBiggiveFormFieldSelectElement \| undefined;\n if (!theEl) {\n return;\n }\n\n theEl.selectedValue = null;\n theEl.selectedLabel = null;\n });\n\n const selectedFilters = this.el.shadowRoot?.querySelector('.selected-filters');\n if (selectedFilters) {\n selectedFilters.querySelectorAll('.button').forEach(button => {\n button.remove();\n });\n }\n\n // Emit the doSearchAndFilterUpdate event with null values. DON-654\n this.doSearchAndFilterUpdate.emit({\n searchText: null,\n sortBy: null,\n filterCategory: null,\n filterBeneficiary: null,\n filterFunding: null,\n filterLocation: null,\n });\n };\n\n componentWillRender() {\n this.filtersApplied =\n this.selectedFilterCategory !== null \|\| this.selectedFilterBeneficiary !== null \|\| this.selectedFilterFunding !== null \|\| this.selectedFilterLocation !== null;\n this.initialSortByOption = this.selectedSortByOption;\n }\n\n render() {\n return (\n <div class={'container space-below-' + this.spaceBelow}>\n <div class=\"sleeve\">\n <div class=\"search-wrap\">\n <h4>{this.intro}</h4>\n <div class=\"field-wrap\">\n <div class=\"input-wrap\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"icon\" viewBox=\"0 0 512 512\">\n <path d={faMagnifyingGlass.icon[4].toString()} />\n </svg>\n <input\n type=\"text\"\n value={this.searchText ?? ''}\n class=\"input-text\"\n placeholder={this.placeholderText}\n onInput={this.handleSearchTextChanged}\n onKeyDown={this.handleEnterPressed}\n />\n </div>\n <biggive-button onClick={this.handleSearchButtonPressed} label={this.buttonText} />\n </div>\n </div>\n <div class=\"sort-filter-wrap\">\n <div class=\"filter-wrap\">\n <biggive-button class=\"filter\" colourScheme=\"primary\" onClick={this.handleFilterButtonClick} label=\"Filter\" fullWidth={true} space-below=\"0\"></biggive-button>\n <biggive-popup id=\"filter-popup\">\n <h4 class=\"space-above-0 space-below-3 text-colour-primary\">Filters</h4>\n <div class=\"select-wrapper-1\">\n <biggive-form-field-select\n backgroundColour=\"white\"\n prompt=\"Category\"\n placeholder={this.categoriesPlaceHolderText}\n selectedLabel={this.selectedFilterCategory}\n selectedValue={this.selectedFilterCategory}\n options={this.optionsToArray(this.categoryOptions \|\| [])}\n selectionChanged={this.categoryFilterSelectionChanged}\n id=\"categories\"\n space-below=\"2\"\n ></biggive-form-field-select>\n </div>\n\n <div class=\"select-wrapper-2\">\n <biggive-form-field-select\n backgroundColour=\"white\"\n prompt=\"Beneficiary\"\n placeholder={this.beneficiariesPlaceHolderText}\n selectedLabel={this.selectedFilterBeneficiary}\n selectedValue={this.selectedFilterBeneficiary}\n options={this.optionsToArray(this.beneficiaryOptions \|\| [])}\n selectionChanged={this.beneficiarySelectionChanged}\n id=\"beneficiaries\"\n space-below=\"2\"\n ></biggive-form-field-select>\n </div>\n\n <div class=\"select-wrapper-3\">\n <biggive-form-field-select\n backgroundColour=\"white\"\n prompt=\"Location\"\n placeholder={this.locationsPlaceHolderText}\n selectedLabel={this.selectedFilterLocation}\n selectedValue={this.selectedFilterLocation}\n options={this.optionsToArray(this.locationOptions \|\| [])}\n selectionChanged={this.locationSelectionChanged}\n id=\"locations\"\n space-below=\"2\"\n ></biggive-form-field-select>\n </div>\n\n <div class=\"select-wrapper-4\">\n <biggive-form-field-select\n backgroundColour=\"white\"\n prompt=\"Funding\"\n placeholder={this.fundingPlaceHolderText}\n selectedLabel={this.selectedFilterFunding}\n selectedValue={this.selectedFilterFunding}\n options={this.optionsToArray(this.fundingOptions \|\| [])}\n selectionChanged={this.fundingSelectionChanged}\n id=\"funding\"\n space-below=\"2\"\n ></biggive-form-field-select>\n </div>\n <div class=\"align-right\">\n <biggive-button label=\"Apply filters\" onClick={this.handleApplyFilterButtonClick} />\n </div>\n </biggive-popup>\n </div>\n\n <div class=\"sort-wrap\">\n <biggive-form-field-select\n options={[\n { value: 'amountRaised', label: 'Most raised' },\n { value: 'matchFundsRemaining', label: 'Match funds remaining' },\n ]}\n prompt={null}\n select-style=\"underlined\"\n placeholder={this.sortByPlaceholderText}\n selectedLabel={this.selectedSortByOption}\n selectionChanged={this.sortBySelectionChanged}\n id=\"sort-by\"\n >\n <biggive-form-field-select-option value=\"amountRaised\" label=\"Most raised\"></biggive-form-field-select-option>\n <biggive-form-field-select-option value=\"matchFundsRemaining\" label=\"Match funds remaining\"></biggive-form-field-select-option>\n {(this.searchText \|\| '').length > 0 ? <biggive-form-field-select-option value=\"Relevance\" label=\"Relevance\"></biggive-form-field-select-option> : null}\n </biggive-form-field-select>\n </div>\n </div>\n <div class=\"selected-filter-wrap\">\n <div class=\"selected-filters\">\n {this.selectedFilterCategory && (\n <span\n class=\"button\"\n onClick={() => {\n this.removeFilter('categories');\n }}\n >\n {this.selectedFilterCategory}\n </span>\n )}\n {this.selectedFilterBeneficiary && (\n <span\n class=\"button\"\n onClick={() => {\n this.removeFilter('beneficiaries');\n }}\n >\n {this.selectedFilterBeneficiary}\n </span>\n )}\n {this.selectedFilterLocation && (\n <span\n class=\"button\"\n onClick={() => {\n this.removeFilter('locations');\n }}\n >\n {this.selectedFilterLocation}\n </span>\n )}\n {this.selectedFilterFunding && (\n <span\n class=\"button\"\n onClick={() => {\n this.removeFilter('funding');\n }}\n >\n {this.selectedFilterFunding}\n </span>\n )}\n </div>\n <div class=\"clear-all\">\n <a onClick={this.handleClearAll}>Clear all</a>\n </div>\n </div>\n <div class=\"campaign-grid\">\n <slot name=\"campaign-grid\"></slot>\n </div>\n </div>\n </div>\n );\n }\n\n private optionsToArray(options: string \| Record<string, string> \| string[]): {\n label: string;\n value: string;\n }[] {\n if (typeof options === 'string') {\n options = JSON.parse(options);\n }\n if (Array.isArray(options)) {\n return options.map((option: string) => ({ value: option, label: option }));\n }\n\n return Object.entries(options).map(entry => ({ value: entry[0], label: entry[1] }));\n }\n}\n"],"version":3}
1	+ {"file":"biggive-campaign-card-filter-grid.js","mappings":"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","names":["BiggiveCampaignCardFilterGrid"],"sources":["src/components/biggive-campaign-card-filter-grid/biggive-campaign-card-filter-grid.scss?tag=biggive-campaign-card-filter-grid&encapsulation=shadow","src/components/biggive-campaign-card-filter-grid/biggive-campaign-card-filter-grid.tsx"],"sourcesContent":["@include spacers();\n\n:host {\n display: content;\n}\n\n// Each select needs a higher z-index than the one below,\n// so that the drop-down part will occlude it.\n.select-wrapper-1, .select-wrapper-2, .select-wrapper-3, .select-wrapper-4 {\n position: relative;\n margin-top: 1em;\n}\n.select-wrapper-1 {\n z-index: 4;\n}\n.select-wrapper-2 {\n z-index: 3;\n}\n.select-wrapper-3 {\n z-index: 2;\n }\n.select-wrapper-4 {\n z-index: 1;\n}\n\n.container {\n @include standard-font();\n position: relative;\n .search-wrap {\n @include lower-shadow();\n background-color: $colour-white;\n padding: $spacer-3 $spacer-4;\n margin-bottom: $spacer-3;\n h4 {\n margin-bottom: $spacer-3;\n }\n .field-wrap {\n @include flex-container-row();\n\n .input-wrap {\n @include flex-container-row();\n padding-bottom: $spacer-1;\n border-bottom: 1px solid $colour-black;\n margin-right: $spacer-4;\n flex-grow: 1;\n input {\n border: 0;\n }\n }\n button {\n padding: 5px 30px;\n }\n }\n }\n}\n.selected-filter-wrap {\n display: flex;\n margin-bottom: 30px;\n padding: 0;\n .button {\n cursor: pointer;\n border-radius: 20px;\n padding: 5px 50px 5px 20px;\n margin-right: 15px;\n background-color: $colour-tertiary-coral;;\n color: $colour-black;\n border: 1px solid $colour-tertiary-coral;\n text-decoration: none;\n background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgMTguNCAxOC40IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxOC40IDE4LjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7c3Ryb2tlOiMwMDAwMDA7fQo8L3N0eWxlPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNOS4yLDguNUwxNywwLjdsMC43LDAuN0w5LjksOS4ybDcuOCw3LjhMMTcsMTcuN0w5LjIsOS45bC03LjgsNy44TDAuNywxN2w3LjgtNy44TDAuNywxLjRsMC43LTAuN0w5LjIsOC41eiIvPgo8L3N2Zz4K);\n background-repeat: no-repeat;\n background-position: right 20px center;\n background-size: 12px auto;\n &:hover {\n background-color: $colour-white;\n color: $colour-black;\n }\n }\n .clear-all {\n margin-left: auto;\n a {\n cursor: pointer;\n border-radius: 20px;\n padding: 5px 20px;\n background-color: $colour-primary-blue;\n color: $colour-white;\n border: 1px solid $colour-primary-blue;\n text-decoration: none;\n &:hover {\n background-color: $colour-white;\n color: $colour-primary-blue;\n }\n }\n }\n}\n\n.sort-filter-wrap {\n display: flex;\n justify-content: flex-end;\n margin-bottom: $spacer-4;\n padding: 0;\n text-align: right;\n .clear-all {\n cursor: pointer;\n vertical-align: center;\n margin-top: auto;\n margin-bottom: auto;\n }\n\n display: flex;\n .sort-wrap {\n margin-left: 15px;\n }\n\n .filter-wrap {\n background-color: $colour-grey-background; // temp for testing dropdown\n\n margin-left: $spacer-3;\n\n .button.filter {\n padding-left: 60px;\n padding-right: 30px;\n\n .filter-icon {\n content: '';\n display: block;\n position: absolute;\n left: 25px;\n top: 17px;\n width: 13px;\n height: 13px;\n\n svg {\n width: 100%;\n height: auto;\n vertical-align: top;\n\n &:hover {\n fill: $colour-primary-blue;\n }\n }\n }\n }\n }\n}\n\n.icon {\n @include icon();\n margin: auto;\n\n > path {\n fill: $colour-primary-blue;\n }\n}\n\n.icon-clear-all {\n > path {\n fill: $colour-black;\n }\n}\n\n@media screen and (max-width: $screen-mobile-small) {\n .sort-filter-wrap {\n flex-direction: column-reverse;\n .sort-wrap {\n margin-top: 20px;\n margin-bottom: 20px;\n }\n }\n}\n\n@media screen and (max-width: $screen-mobile-x-small) {\n .sort-filter-wrap {\n justify-content: space-between;\n .sort-wrap {\n margin-left: 0px;\n }\n .filter-wrap {\n margin-left: 3px;\n }\n }\n}\n\n.align-right {\n text-align: right;\n}\n\n.input-text {\n @include input-text();\n}\n\n.text-colour-primary {\n color: $colour-primary-blue;\n}\n","import { Component, Element, Event, EventEmitter, h, Prop, State } from '@stencil/core';\nimport { faMagnifyingGlass } from '@fortawesome/pro-solid-svg-icons';\n\n@Component({\n tag: 'biggive-campaign-card-filter-grid',\n styleUrl: 'biggive-campaign-card-filter-grid.scss',\n shadow: true,\n})\nexport class BiggiveCampaignCardFilterGrid {\n @Element() el: HTMLBiggiveCampaignCardFilterGridElement;\n\n /*\n This event `doSearchAndFilterUpdate` event is emitted and propogates to the parent\n * component which handles it\n /\n @Event({\n eventName: 'doSearchAndFilterUpdate',\n bubbles: true,\n cancelable: true,\n composed: true,\n })\n doSearchAndFilterUpdate: EventEmitter<{\n searchText: string \| null;\n sortBy: string \| null;\n filterCategory: string \| null;\n filterBeneficiary: string \| null;\n filterLocation: string \| null;\n filterFunding: string \| null;\n }>;\n\n private sortByPlaceholderText = 'Sort by';\n private beneficiariesPlaceHolderText = 'Select beneficiary';\n private categoriesPlaceHolderText = 'Select category';\n private locationsPlaceHolderText = 'Select location';\n private fundingPlaceHolderText = 'Select funding';\n\n /\n Space below component\n /\n @Prop() spaceBelow: number = 0;\n\n /\n Intro\n /\n @Prop() intro: string = 'Find a charity or project';\n\n /\n Optional search text prop. Useful for pre-populating the search field\n * when the page is loaded with a search term already existing in the URL.\n * This can happen when sharing links, or if a donor goes to a campaign page\n * after searching, and then returns to the search results. In such a case,\n * the search box text will clear, unless we use this prop to populate it on\n * rendering. DON-652.\n /\n @Prop() searchText: string \| null = null;\n\n /\n Defines the text displayed as the placeholder in the input field\n * before the user types anything\n /\n @Prop() placeholderText: string = 'Search';\n\n /\n Defines the text on the search button\n /\n @Prop() buttonText: string = 'Search';\n\n /\n JSON array of category key/values, or takes a stringified equiavalent (for Storybook)\n /\n @Prop() categoryOptions: string \| Record<string, string> \| string[];\n\n /\n JSON array of beneficiary key/values, or takes a stringified equiavalent (for Storybook)\n /\n @Prop() beneficiaryOptions: string \| Record<string, string> \| string[];\n\n /\n JSON array of location key/values, or takes a stringified equiavalent (for Storybook)\n /\n @Prop() locationOptions: string \| Record<string, string> \| string[];\n\n /\n JSON array of funding key/values, or takes a stringified equiavalent (for Storybook)\n /\n @Prop() fundingOptions: string \| Record<string, string> \| string[];\n\n /\n This helps us inject a pre-selected dropdown value from outside of this component.\n * This is especially helpful for the Meta campaign and Explore pages, where searching\n * by text wipes out previous sort options and re-uses Relevance, or where one of those\n * two pages is loaded directly with URL parameters - in such a scenario the dropdown\n * shows that it's pre-selected. DON-558.\n /\n @Prop({ mutable: true }) selectedSortByOption: 'Most raised' \| 'Match funds remaining' \| 'Relevance';\n\n /\n For injecting the chosen category to filter by, as per the comment above for `selectedSortByOption`.\n /\n @Prop({ mutable: true }) selectedFilterCategory: string \| null = null;\n\n /\n For injecting the chosen beneficiary to filter by, as per the comment above for `selectedSortByOption`.\n /\n @Prop({ mutable: true }) selectedFilterBeneficiary: string \| null = null;\n\n /\n For injecting the chosen location to filter by, as per the comment above for `selectedSortByOption`.\n /\n @Prop({ mutable: true }) selectedFilterLocation: string \| null = null;\n\n /\n For injecting the chosen funding to filter by, as per the comment above for `selectedSortByOption`.\n /\n @Prop({ mutable: true }) selectedFilterFunding: string \| null = null;\n\n /\n State variable - causes re-render on change\n /\n @State() filtersApplied: boolean;\n\n private initialSortByOption: 'Most raised' \| 'Match funds remaining' \| 'Relevance';\n\n /\n This and similar properties represent selections made in the popup but not yet applied.\n */\n private newSelectedFilterCategory: string \| null = null;\n private newSelectedFilterBeneficiary: string \| null = null;\n private newSelectedFilterLocation: string \| null = null;\n private newSelectedFilterFunding: string \| null = null;\n\n private categoryFilterSelectionChanged = (value: string) => {\n this.newSelectedFilterCategory = value;\n };\n\n private beneficiarySelectionChanged = (value: string) => {\n this.newSelectedFilterBeneficiary = value;\n };\n\n private locationSelectionChanged = (value: string) => {\n this.newSelectedFilterLocation = value;\n };\n\n private fundingSelectionChanged = (value: string) => {\n this.newSelectedFilterFunding = value;\n };\n\n private sortBySelectionChanged = (value: 'Most raised' \| 'Match funds remaining' \| 'Relevance') => {\n this.selectedSortByOption = value;\n this.doSearchAndFilterUpdate.emit(this.getSearchAndFilterObject());\n };\n\n private getSearchAndFilterObject() {\n return {\n searchText: this.searchText,\n sortBy: this.selectedSortByOption,\n filterCategory: this.selectedFilterCategory,\n filterBeneficiary: this.selectedFilterBeneficiary,\n filterFunding: this.selectedFilterFunding,\n filterLocation: this.selectedFilterLocation,\n };\n }\n\n private handleApplyFilterButtonClick = () => {\n this.selectedFilterCategory = this.newSelectedFilterCategory ?? this.selectedFilterCategory;\n this.selectedFilterBeneficiary = this.newSelectedFilterBeneficiary ?? this.selectedFilterBeneficiary;\n this.selectedFilterLocation = this.newSelectedFilterLocation ?? this.selectedFilterLocation;\n this.selectedFilterFunding = this.newSelectedFilterFunding ?? this.selectedFilterFunding;\n\n const searchAndFilterObj = this.getSearchAndFilterObject();\n this.doSearchAndFilterUpdate.emit(searchAndFilterObj);\n\n const filterPopup = this.el.shadowRoot?.getElementById('filter-popup') as HTMLBiggivePopupElement \| undefined;\n if (filterPopup) {\n filterPopup.closeFromOutside();\n }\n\n this.filtersApplied =\n typeof searchAndFilterObj.filterBeneficiary === 'string' \|\|\n typeof searchAndFilterObj.filterCategory === 'string' \|\|\n typeof searchAndFilterObj.filterFunding === 'string' \|\|\n typeof searchAndFilterObj.filterLocation === 'string';\n };\n\n private removeFilter(filterKey: 'funding' \| 'locations' \| 'categories' \| 'beneficiaries') {\n switch (filterKey) {\n case 'beneficiaries':\n this.selectedFilterBeneficiary = null;\n break;\n case 'categories':\n this.selectedFilterCategory = null;\n break;\n case 'funding':\n this.selectedFilterFunding = null;\n break;\n case 'locations':\n this.selectedFilterLocation = null;\n break;\n default:\n // This asks the compiler to check that we are in dead code, i.e. we covered all the possible filter keys\n // above. If we missed one we would get a compile error trying to assign a string to a never.\n const exhaustiveSwitch: never = filterKey;\n console.error(exhaustiveSwitch);\n }\n\n const selectEl = this.el.shadowRoot?.getElementById(filterKey) as HTMLBiggiveFormFieldSelectElement \| undefined;\n if (!selectEl) {\n return;\n }\n\n selectEl.selectedLabel = null;\n selectEl.selectedValue = null;\n this.doSearchAndFilterUpdate.emit(this.getSearchAndFilterObject());\n }\n\n private handleSearchButtonPressed = () => {\n this.doSearchAndFilterUpdate.emit(this.getSearchAndFilterObject());\n };\n\n private handleSearchTextChanged = (event: any) => {\n this.searchText = event.target.value;\n };\n\n private handleEnterPressed = (ev: KeyboardEvent) => {\n if (ev.key === 'Enter') {\n this.doSearchAndFilterUpdate.emit(this.getSearchAndFilterObject());\n }\n };\n\n private handleFilterButtonClick = () => {\n this.newSelectedFilterBeneficiary = this.selectedFilterBeneficiary;\n this.newSelectedFilterCategory = this.selectedFilterCategory;\n this.newSelectedFilterFunding = this.selectedFilterFunding;\n this.newSelectedFilterLocation = this.selectedFilterLocation;\n\n const filterPopup = this.el.shadowRoot?.getElementById('filter-popup') as HTMLBiggivePopupElement \| undefined;\n if (filterPopup) {\n filterPopup.openFromOutside();\n }\n };\n\n private handleClearAll = () => {\n // Set the 'Filters' button back to the primary background colour\n this.filtersApplied = false;\n\n // Clear all\n this.searchText = null;\n this.selectedSortByOption = this.initialSortByOption;\n this.selectedFilterBeneficiary = null;\n this.selectedFilterCategory = null;\n this.selectedFilterFunding = null;\n this.selectedFilterLocation = null;\n\n // Clear <biggive-form-field-select> components' internal selectedValue and selectedLabel. DON-654.\n ['sort-by', 'categories', 'beneficiaries', 'locations', 'funding'].forEach(id => {\n const theEl = this.el.shadowRoot?.getElementById(id) as HTMLBiggiveFormFieldSelectElement \| undefined;\n if (!theEl) {\n return;\n }\n\n theEl.selectedValue = null;\n theEl.selectedLabel = null;\n });\n\n const selectedFilters = this.el.shadowRoot?.querySelector('.selected-filters');\n if (selectedFilters) {\n selectedFilters.querySelectorAll('.button').forEach(button => {\n button.remove();\n });\n }\n\n // Emit the doSearchAndFilterUpdate event with null values. DON-654\n this.doSearchAndFilterUpdate.emit({\n searchText: null,\n sortBy: null,\n filterCategory: null,\n filterBeneficiary: null,\n filterFunding: null,\n filterLocation: null,\n });\n };\n\n componentWillRender() {\n this.filtersApplied =\n this.selectedFilterCategory !== null \|\| this.selectedFilterBeneficiary !== null \|\| this.selectedFilterFunding !== null \|\| this.selectedFilterLocation !== null;\n this.initialSortByOption = this.selectedSortByOption;\n }\n\n render() {\n return (\n <div class={'container space-below-' + this.spaceBelow}>\n <div class=\"sleeve\">\n <div class=\"search-wrap\">\n <h4>{this.intro}</h4>\n <div class=\"field-wrap\">\n <div class=\"input-wrap\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"icon\" viewBox=\"0 0 512 512\">\n <path d={faMagnifyingGlass.icon[4].toString()} />\n </svg>\n <input\n type=\"text\"\n value={this.searchText ?? ''}\n class=\"input-text\"\n placeholder={this.placeholderText}\n onInput={this.handleSearchTextChanged}\n onKeyDown={this.handleEnterPressed}\n />\n </div>\n <biggive-button onClick={this.handleSearchButtonPressed} label={this.buttonText} />\n </div>\n </div>\n <div class=\"sort-filter-wrap\">\n <div class=\"filter-wrap\">\n <biggive-button class=\"filter\" colourScheme=\"primary\" onClick={this.handleFilterButtonClick} label=\"Filter\" fullWidth={true} space-below=\"0\"></biggive-button>\n <biggive-popup id=\"filter-popup\">\n <h4 class=\"space-above-0 space-below-3 text-colour-primary\">Filters</h4>\n <div class=\"select-wrapper-1\">\n <biggive-form-field-select\n backgroundColour=\"white\"\n prompt=\"Category\"\n placeholder={this.categoriesPlaceHolderText}\n selectedLabel={this.selectedFilterCategory}\n selectedValue={this.selectedFilterCategory}\n options={this.optionsToArray(this.categoryOptions \|\| [])}\n selectionChanged={this.categoryFilterSelectionChanged}\n id=\"categories\"\n space-below=\"2\"\n ></biggive-form-field-select>\n </div>\n\n <div class=\"select-wrapper-2\">\n <biggive-form-field-select\n backgroundColour=\"white\"\n prompt=\"Beneficiary\"\n placeholder={this.beneficiariesPlaceHolderText}\n selectedLabel={this.selectedFilterBeneficiary}\n selectedValue={this.selectedFilterBeneficiary}\n options={this.optionsToArray(this.beneficiaryOptions \|\| [])}\n selectionChanged={this.beneficiarySelectionChanged}\n id=\"beneficiaries\"\n space-below=\"2\"\n ></biggive-form-field-select>\n </div>\n\n <div class=\"select-wrapper-3\">\n <biggive-form-field-select\n backgroundColour=\"white\"\n prompt=\"Location\"\n placeholder={this.locationsPlaceHolderText}\n selectedLabel={this.selectedFilterLocation}\n selectedValue={this.selectedFilterLocation}\n options={this.optionsToArray(this.locationOptions \|\| [])}\n selectionChanged={this.locationSelectionChanged}\n id=\"locations\"\n space-below=\"2\"\n ></biggive-form-field-select>\n </div>\n\n <div class=\"select-wrapper-4\">\n <biggive-form-field-select\n backgroundColour=\"white\"\n prompt=\"Funding\"\n placeholder={this.fundingPlaceHolderText}\n selectedLabel={this.selectedFilterFunding}\n selectedValue={this.selectedFilterFunding}\n options={this.optionsToArray(this.fundingOptions \|\| [])}\n selectionChanged={this.fundingSelectionChanged}\n id=\"funding\"\n space-below=\"2\"\n ></biggive-form-field-select>\n </div>\n <div class=\"align-right\">\n <biggive-button label=\"Apply filters\" onClick={this.handleApplyFilterButtonClick} />\n </div>\n </biggive-popup>\n </div>\n\n <div class=\"sort-wrap\">\n <biggive-form-field-select\n options={[\n { value: 'amountRaised', label: 'Most raised' },\n { value: 'matchFundsRemaining', label: 'Match funds remaining' },\n ]}\n prompt={null}\n select-style=\"underlined\"\n placeholder={this.sortByPlaceholderText}\n selectedLabel={this.selectedSortByOption}\n selectionChanged={this.sortBySelectionChanged}\n id=\"sort-by\"\n >\n <biggive-form-field-select-option value=\"amountRaised\" label=\"Most raised\"></biggive-form-field-select-option>\n <biggive-form-field-select-option value=\"matchFundsRemaining\" label=\"Match funds remaining\"></biggive-form-field-select-option>\n {(this.searchText \|\| '').length > 0 ? <biggive-form-field-select-option value=\"Relevance\" label=\"Relevance\"></biggive-form-field-select-option> : null}\n </biggive-form-field-select>\n </div>\n </div>\n <div class=\"selected-filter-wrap\">\n <div class=\"selected-filters\">\n {this.selectedFilterCategory && (\n <span\n class=\"button\"\n onClick={() => {\n this.removeFilter('categories');\n }}\n >\n {this.selectedFilterCategory}\n </span>\n )}\n {this.selectedFilterBeneficiary && (\n <span\n class=\"button\"\n onClick={() => {\n this.removeFilter('beneficiaries');\n }}\n >\n {this.selectedFilterBeneficiary}\n </span>\n )}\n {this.selectedFilterLocation && (\n <span\n class=\"button\"\n onClick={() => {\n this.removeFilter('locations');\n }}\n >\n {this.selectedFilterLocation}\n </span>\n )}\n {this.selectedFilterFunding && (\n <span\n class=\"button\"\n onClick={() => {\n this.removeFilter('funding');\n }}\n >\n {this.selectedFilterFunding}\n </span>\n )}\n </div>\n <div class=\"clear-all\">\n <a onClick={this.handleClearAll}>Clear all</a>\n </div>\n </div>\n <div class=\"campaign-grid\">\n <slot name=\"campaign-grid\"></slot>\n </div>\n </div>\n </div>\n );\n }\n\n private optionsToArray(options: string \| Record<string, string> \| string[]): {\n label: string;\n value: string;\n }[] {\n if (typeof options === 'string') {\n options = JSON.parse(options);\n }\n if (Array.isArray(options)) {\n return options.map((option: string) => ({ value: option, label: option }));\n }\n\n return Object.entries(options).map(entry => ({ value: entry[0], label: entry[1] }));\n }\n}\n"],"version":3}

package/dist/components/biggive-campaign-card.js CHANGED Viewed

@@ -4,6 +4,7 @@ import { d as defineCustomElement$3 } from './biggive-misc-icon2.js';
 import { d as defineCustomElement$2 } from './biggive-progress-bar2.js';
 const biggiveCampaignCardCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.image-wrap img{width:100%;height:auto}.space-above-0{margin-top:0}.space-above-1{margin-top:5px}.space-above-2{margin-top:10px}.space-above-3{margin-top:15px}.space-above-4{margin-top:30px}.space-above-5{margin-top:45px}.space-above-6{margin-top:60px}.space-below-0{margin-bottom:0}.space-below-1{margin-bottom:5px}.space-below-2{margin-bottom:10px}.space-below-3{margin-bottom:15px}.space-below-4{margin-bottom:30px}.space-below-5{margin-bottom:45px}.space-below-6{margin-bottom:60px}:host{display:contents}.container{display:flex;flex-direction:column;font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;margin-right:10px;margin-left:10px;cursor:pointer;position:relative;height:100%;background-color:#FFFFFF;padding:15px;box-sizing:border-box}.container .sleeve{display:flex;flex-direction:column;height:100%}.container .sleeve .above-button-wrap{flex-grow:1;display:flex;flex-direction:column}.container .sleeve .above-button-wrap .title-wrap{flex-grow:1}.container .campaign-type{position:absolute;top:0;left:0;right:0;text-align:center;font-weight:bold}.container .campaign-type span{background-color:#2AF135;color:#000000;padding:5px 15px;display:inline-block}.container .banner{top:0;margin-top:19px;padding-bottom:30.555%;background-color:#F1F1F1;background-size:contain;background-repeat:no-repeat}.container .banner img{display:none}.container h3{font-size:20px;line-height:24px;font-weight:bold}.container .button{display:block}.container .organisation-name{margin-bottom:30px;color:#2C089B}.container .meta-wrap{display:flex;justify-content:space-between;margin-top:auto;margin-bottom:15px}.container .meta-wrap .meta-item{width:calc(50% - 15px)}.container .meta-wrap .meta-item .label{font-size:11px;line-height:14px;display:block}.container .meta-wrap .meta-item .text{font-size:25px;line-height:32px;font-weight:bold;display:block}.container .meta-wrap .meta-item:last-child{text-align:right}.container .meta-wrap .meta-item:last-child .text{color:#2C089B}.container .progress-bar-wrap{padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid #E8E8E8}.container .msg-wrapper{display:flex;justify-content:center}.container .msg-wrapper biggive-misc-icon{margin-top:auto;margin-bottom:auto}.container .msg-wrapper p{text-align:center}@media screen and (max-width: 1200px){.container .msg-wrapper p{font-size:15px}}";
+const BiggiveCampaignCardStyle0 = biggiveCampaignCardCss;
 const BiggiveCampaignCard$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveCampaignCard extends HTMLElement {
     constructor() {
@@ -40,7 +41,7 @@ const BiggiveCampaignCard$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveCamp
     render() {
         return (h("div", { class: 'container space-below-' + this.spaceBelow.toString() }, h("div", { class: "sleeve" }, h("div", { onClick: this.handleCardGeneralClick, class: "above-button-wrap" }, this.campaignType !== null ? (h("div", { class: "campaign-type" }, h("span", null, this.campaignType))) : null, this.banner !== null ? (h("div", { class: "image-wrap banner", role: "presentation", style: { 'background-image': 'url(' + this.banner + ')' } })) : (h("div", { class: "image-wrap banner" })), h("div", { class: "title-wrap" }, h("h3", null, this.campaignTitle), h("div", { class: "organisation-name" }, "By ", this.organisationName)), this.isEmpty(this.primaryFigureAmount) && this.isEmpty(this.secondaryFigureAmount) ? null : (h("div", { class: "meta-wrap" }, this.isEmpty(this.primaryFigureAmount) ? null : (h("div", { class: "meta-item" }, h("span", { class: "label" }, this.primaryFigureLabel), h("span", { class: "text" }, this.primaryFigureAmount))), this.isEmpty(this.secondaryFigureAmount) ? null : (h("div", { class: "meta-item" }, h("span", { class: "label" }, this.secondaryFigureLabel), h("span", { class: "text" }, this.secondaryFigureAmount))))), this.isEmpty(this.progressBarCounter) ? null : (h("div", { class: "progress-bar-wrap" }, h("biggive-progress-bar", { counter: this.progressBarCounter, "colour-scheme": "primary" })))), h("div", { class: "button-wrap" }, this.isFutureCampaign || this.isPastCampaign ? (h("div", { class: "msg-wrapper" }, h("biggive-misc-icon", { "background-colour": "white", "icon-colour": "black", icon: "Timer" }), this.isFutureCampaign ? h("p", null, "Launches ", this.datetime) : h("p", null, "Closed ", this.datetime))) : (h("biggive-button", { "full-width": "true", "colour-scheme": this.donateButtonColourScheme, url: this.donateButtonUrl, label: this.donateButtonLabel })), h("biggive-button", { "full-width": "true", "colour-scheme": this.moreInfoButtonColourScheme, url: this.moreInfoButtonUrl, label: this.moreInfoButtonLabel })))));
     }
-    static get style() { return biggiveCampaignCardCss; }
+    static get style() { return BiggiveCampaignCardStyle0; }
 }, [1, "biggive-campaign-card", {
         "spaceBelow": [2, "space-below"],
         "campaignType": [1, "campaign-type"],

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

	@@ -1 +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 ? (\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}
1	+ {"file":"biggive-campaign-card.js","mappings":";;;;;AAAA,MAAM,sBAAsB,GAAG,g4EAAg4E,CAAC;AACh6E,kCAAe,sBAAsB;;MCMxBA,qBAAmB;;;;;;QA8GtB,2BAAsB,GAAG,CAAC,KAAU;YAC1C,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,IAAI,CAAC,iBAAiB,EAAE,CAAC,CAAC;SACtE,CAAC;0BApG2B,CAAC;;;;;;;;;;iCAiDM,YAAY;;wCAUL,SAAS;mCAKd,eAAe;;0CAUR,eAAe;gCAKxB,KAAK;8BAKP,KAAK;;;IAU/B,OAAO,CAAC,KAA8B;QAC5C,OAAO,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,EAAE,CAAC;KAC9D;IAMD,MAAM;QACJ,QACE,WAAK,KAAK,EAAE,wBAAwB,GAAG,IAAI,CAAC,UAAU,CAAC,QAAQ,EAAE,IAC/D,WAAK,KAAK,EAAC,QAAQ,IACjB,WAAK,OAAO,EAAE,IAAI,CAAC,sBAAsB,EAAE,KAAK,EAAC,mBAAmB,IACjE,IAAI,CAAC,YAAY,KAAK,IAAI,IACzB,WAAK,KAAK,EAAC,eAAe,IACxB,gBAAO,IAAI,CAAC,YAAY,CAAQ,CAC5B,IACJ,IAAI,EAEP,IAAI,CAAC,MAAM,KAAK,IAAI,IACnB,WAAK,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAC,cAAc,EAAC,KAAK,EAAE,EAAE,kBAAkB,EAAE,MAAM,GAAG,IAAI,CAAC,MAAM,GAAG,GAAG,EAAE,GAAQ,KAEpH,WAAK,KAAK,EAAC,mBAAmB,GAAO,CACtC,EAED,WAAK,KAAK,EAAC,YAAY,IACrB,cAAK,IAAI,CAAC,aAAa,CAAM,EAC7B,WAAK,KAAK,EAAC,mBAAmB,WAAK,IAAI,CAAC,gBAAgB,CAAO,CAC3D,EAEL,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,mBAAmB,CAAC,IAAI,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,qBAAqB,CAAC,GAAG,IAAI,IACxF,WAAK,KAAK,EAAC,WAAW,IACnB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,mBAAmB,CAAC,GAAG,IAAI,IAC5C,WAAK,KAAK,EAAC,WAAW,IACpB,YAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,kBAAkB,CAAQ,EACpD,YAAM,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,mBAAmB,CAAQ,CAChD,CACP,EACA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,qBAAqB,CAAC,GAAG,IAAI,IAC9C,WAAK,KAAK,EAAC,WAAW,IACpB,YAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,oBAAoB,CAAQ,EACtD,YAAM,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,qBAAqB,CAAQ,CAClD,CACP,CACG,CACP,EACA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,kBAAkB,CAAC,GAAG,IAAI,IAC3C,WAAK,KAAK,EAAC,mBAAmB,IAC5B,4BAAsB,OAAO,EAAE,IAAI,CAAC,kBAAkB,mBAAgB,SAAS,GAAwB,CACnG,CACP,CACG,EACN,WAAK,KAAK,EAAC,aAAa,IACrB,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,cAAc,IAC3C,WAAK,KAAK,EAAC,aAAa,IACtB,8CAAqC,OAAO,iBAAa,OAAO,EAAC,IAAI,EAAC,OAAO,GAAqB,EACjG,IAAI,CAAC,gBAAgB,GAAG,0BAAa,IAAI,CAAC,QAAQ,CAAK,GAAG,wBAAW,IAAI,CAAC,QAAQ,CAAK,CACpF,KAEN,oCAA2B,MAAM,mBAAgB,IAAI,CAAC,wBAAwB,EAAE,GAAG,EAAE,IAAI,CAAC,eAAe,EAAE,KAAK,EAAE,IAAI,CAAC,iBAAiB,GAAmB,CAC5J,EACD,oCAA2B,MAAM,mBAAgB,IAAI,CAAC,0BAA0B,EAAE,GAAG,EAAE,IAAI,CAAC,iBAAiB,EAAE,KAAK,EAAE,IAAI,CAAC,mBAAmB,GAAmB,CAC7J,CACF,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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 ? (\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 CHANGED Viewed

@@ -3,6 +3,7 @@ import { d as defineCustomElement$3 } from './biggive-misc-icon2.js';
 import { d as defineCustomElement$2 } from './biggive-progress-bar2.js';
 const biggiveCampaignHighlightsCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.image-wrap img{width:100%;height:auto}.space-above-0{margin-top:0}.space-above-1{margin-top:5px}.space-above-2{margin-top:10px}.space-above-3{margin-top:15px}.space-above-4{margin-top:30px}.space-above-5{margin-top:45px}.space-above-6{margin-top:60px}.space-below-0{margin-bottom:0}.space-below-1{margin-bottom:5px}.space-below-2{margin-bottom:10px}.space-below-3{margin-bottom:15px}.space-below-4{margin-bottom:30px}.space-below-5{margin-bottom:45px}.space-below-6{margin-bottom:60px}:host{display:contents}.container{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;background-color:#FFFFFF;padding:25px;box-sizing:border-box;height:fit-content}.container .campaign-title{position:absolute;top:0;left:0;right:0;text-align:center;font-weight:bold}.container .campaign-title span{background-color:#2AF135;color:#000000;padding:5px 15px;display:inline-block}.container .banner{top:0;margin-top:19px;padding-bottom:30.555%;background-color:#F1F1F1;background-size:contain;background-repeat:no-repeat;margin-bottom:30px}.container .banner img{display:none}.container .meta-wrap{display:flex;justify-content:space-between;margin-top:auto;margin-bottom:15px}.container .meta-wrap .meta-item{width:calc(50% - 15px)}.container .meta-wrap .meta-item .label{font-size:13px;line-height:17px;display:block}.container .meta-wrap .meta-item .text{font-size:25px;line-height:32px;font-weight:bold;display:block}@media screen and (max-width: 768px){.container .meta-wrap .meta-item .text{font-size:23px}}@media screen and (max-width: 576px){.container .meta-wrap .meta-item .text{font-size:21px}}@media screen and (max-width: 450px){.container .meta-wrap .meta-item .text{font-size:17px}}.container .meta-wrap .meta-item:last-child{text-align:right}.container .meta-wrap .meta-item:last-child .text{color:#2C089B}.container .progress-bar-wrap{padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid #E8E8E8}.container .stat-wrap{display:flex;justify-content:space-between}.container .stat-wrap .stat-item{font-size:17px;line-height:24px;font-weight:bold;width:calc(50% - 15px);margin:auto 0 auto 15px}.container .stat-wrap .stat-item .label{position:relative;bottom:7px}@media screen and (max-width: 576px){.container .stat-wrap .stat-item{font-size:13px;line-height:17px;margin:auto 0;text-align:center}.container .stat-wrap .stat-item .label{bottom:5px}}.container .stat-wrap .stat-item svg{fill:#FF7272}.container .championed-by{text-align:left;margin-left:20px;margin-top:20px;color:#000000;font-size:15px}@media screen and (max-width: 768px){.container .championed-by{font-size:14px}}@media screen and (max-width: 576px){.container .championed-by{text-align:center;margin-left:0;margin-bottom:10px;font-size:13px}}@media screen and (max-width: 450px){.container .championed-by{font-size:12px}}.container .championed-by a{text-decoration:none;font-weight:bold;color:#2C089B}@media screen and (max-width: 450px){.container .championed-by a{display:block}}@media screen and (max-width: 576px){.container{padding:15px}}";
+const BiggiveCampaignHighlightsStyle0 = biggiveCampaignHighlightsCss;
 const BiggiveCampaignHighlights$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveCampaignHighlights extends HTMLElement {
     constructor() {
@@ -27,7 +28,7 @@ const BiggiveCampaignHighlights$1 = /*@__PURE__*/ proxyCustomElement(class Biggi
     render() {
         return (h("div", { class: 'container space-below-' + this.spaceBelow }, h("div", { 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", { class: "meta-wrap" }, h("div", { class: "meta-item" }, h("span", { class: "label" }, this.primaryFigureLabel), h("span", { class: "text" }, this.primaryFigureAmount)), h("div", { class: "meta-item" }, h("span", { class: "label" }, this.secondaryFigureLabel), h("span", { class: "text" }, this.secondaryFigureAmount))), h("div", { class: "progress-bar-wrap" }, h("biggive-progress-bar", { counter: this.progressBarCounter, "colour-scheme": "primary" })), h("div", { 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)));
     }
-    static get style() { return biggiveCampaignHighlightsCss; }
+    static get style() { return BiggiveCampaignHighlightsStyle0; }
 }, [1, "biggive-campaign-highlights", {
         "spaceBelow": [2, "space-below"],
         "banner": [1],

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

	@@ -1 +1 @@
1	- {"file":"biggive-campaign-highlights.js","mappings":";;;;AAAA,MAAM,4BAA4B,GAAG,yiGAAyiG;;~~MCOjkGA~~,2BAAyB;;;;;0BAIP,CAAC;;;;;;;kCAmCO,GAAG;;;;;;;;IAmCxC,MAAM;QACJ,QACE,WAAK,KAAK,EAAE,wBAAwB,GAAG,IAAI,CAAC,UAAU,IACpD,WAAK,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,WAAK,KAAK,EAAC,WAAW,IACpB,WAAK,KAAK,EAAC,WAAW,IACpB,YAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,kBAAkB,CAAQ,EACpD,YAAM,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,mBAAmB,CAAQ,CAChD,EACN,WAAK,KAAK,EAAC,WAAW,IACpB,YAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,oBAAoB,CAAQ,EACtD,YAAM,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,qBAAqB,CAAQ,CAClD,CACF,EACN,WAAK,KAAK,EAAC,mBAAmB,IAC5B,4BAAsB,OAAO,EAAE,IAAI,CAAC,kBAAkB,mBAAgB,SAAS,GAAwB,CACnG,EACN,WAAK,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}
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,WAAK,KAAK,EAAE,wBAAwB,GAAG,IAAI,CAAC,UAAU,IACpD,WAAK,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,WAAK,KAAK,EAAC,WAAW,IACpB,WAAK,KAAK,EAAC,WAAW,IACpB,YAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,kBAAkB,CAAQ,EACpD,YAAM,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,mBAAmB,CAAQ,CAChD,EACN,WAAK,KAAK,EAAC,WAAW,IACpB,YAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,oBAAoB,CAAQ,EACtD,YAAM,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,qBAAqB,CAAQ,CAClD,CACF,EACN,WAAK,KAAK,EAAC,mBAAmB,IAC5B,4BAAsB,OAAO,EAAE,IAAI,CAAC,kBAAkB,mBAAgB,SAAS,GAAwB,CACnG,EACN,WAAK,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-carousel2.js CHANGED Viewed

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 const biggiveCarouselCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.space-above-0{margin-top:0}.space-above-1{margin-top:5px}.space-above-2{margin-top:10px}.space-above-3{margin-top:15px}.space-above-4{margin-top:30px}.space-above-5{margin-top:45px}.space-above-6{margin-top:60px}.space-below-0{margin-bottom:0}.space-below-1{margin-bottom:5px}.space-below-2{margin-bottom:10px}.space-below-3{margin-bottom:15px}.space-below-4{margin-bottom:30px}.space-below-5{margin-bottom:45px}.space-below-6{margin-bottom:60px}.text-colour-hover-primary:hover,.text-colour-primary{color:#2C089B}.text-colour-hover-secondary:hover,.text-colour-secondary{color:#2AF135}.text-colour-hover-tertiary:hover,.text-colour-tertiary{color:#FF7272}.text-colour-hover-brand-1:hover,.text-colour-brand-1{color:#B30510}.text-colour-hover-brand-2:hover,.text-colour-brand-2{color:#6E0887}.text-colour-hover-brand-3:hover,.text-colour-brand-3{color:#50B400}.text-colour-hover-brand-4:hover,.text-colour-brand-4{color:#FFE500}.text-colour-hover-brand-5:hover,.text-colour-brand-5{color:#F07D00}.text-colour-hover-brand-cc-red:hover,.text-colour-brand-cc-red{color:#B30510}.text-colour-hover-brand-wgmf-purple:hover,.text-colour-brand-wgmf-purple{color:#6E0887}.text-colour-hover-brand-gmf-green:hover,.text-colour-brand-gmf-green{color:#50B400}.text-colour-hover-brand-emf-yellow:hover,.text-colour-brand-emf-yellow{color:#FFE500}.text-colour-hover-brand-c4c-orange:hover,.text-colour-brand-c4c-orange{color:#F07D00}.text-colour-hover-brand-afa-pink:hover,.text-colour-brand-afa-pink{color:#BF387D}.text-colour-hover-brand-mhf-turquoise:hover,.text-colour-brand-mhf-turquoise{color:#62CFC9}.text-colour-hover-brand-grey:hover,.text-colour-brand-grey{color:#CBC8C8}.text-colour-hover-white:hover,.text-colour-white{color:#FFFFFF}.text-colour-hover-black:hover,.text-colour-black{color:#000000}.text-colour-hover-grey-extra-light:hover,.text-colour-grey-extra-light{color:#D7D7D7}.text-colour-hover-grey-light:hover,.text-colour-grey-light{color:#E8E8E8}.text-colour-hover-grey-medium:hover,.text-colour-grey-medium{color:#8A8A8A}.text-colour-hover-grey-dark:hover,.text-colour-grey-dark{color:#4A4A4A}.text-colour-hover-brand-6:hover,.text-colour-brand-6{color:#CBC8C8}:host{display:contents}.container{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;position:relative}.container .items .sleeve{display:flex;min-width:100%}.container .navigation{padding:10px 0;text-align:right;display:flex;justify-content:end;position:relative;z-index:1}.container .navigation .button{margin-left:15px;display:block;width:30px;height:30px;padding:2.5px 10px;box-sizing:border-box;background-color:#FFFFFF;box-shadow:0px 0px 10px 0px rgba(0, 0, 0, 0.25);border-radius:50%;cursor:pointer;text-align:center}.container .navigation .button svg{width:15px;height:15px;position:relative;top:2.5px}.container .navigation .button.prev{left:0}.container .navigation .button.prev svg{left:-3px}.container .navigation .button.next{right:0}.container .navigation .button.next svg{left:-1px}.container ::slotted(.hidden){display:none}.column-count-5 ::slotted(*){width:calc(20% - 24px);display:flex;flex-direction:column}.column-count-4 ::slotted(*){width:calc(25% - 22.5px);display:flex;flex-direction:column}.column-count-3 ::slotted(*){width:calc(33.3333333333% - 20px);display:flex;flex-direction:column}.column-count-2 ::slotted(*){width:calc(50% - 15px);display:flex;flex-direction:column}@media screen and (max-width: 768px){.column-count-2 ::slotted(*),.column-count-3 ::slotted(*),.column-count-4 ::slotted(*),.column-count-5 ::slotted(*){width:calc(50% - 15px)}}@media screen and (max-width: 576px){.column-count-2 ::slotted(*),.column-count-3 ::slotted(*),.column-count-4 ::slotted(*),.column-count-5 ::slotted(*){width:100%}}";
+const BiggiveCarouselStyle0 = biggiveCarouselCss;
 const BiggiveCarousel = /*@__PURE__*/ proxyCustomElement(class BiggiveCarousel extends HTMLElement {
     constructor() {
@@ -75,7 +76,7 @@ const BiggiveCarousel = /*@__PURE__*/ proxyCustomElement(class BiggiveCarousel e
                 this.buttonIconColour }, h("div", { class: "items" }, h("div", { class: "sleeve" }, h("slot", null))), h("div", { class: "navigation" }, h("div", { class: "button prev", onClick: this.clickPrevHandler, title: "Previous" }, h("svg", { width: "9", height: "16", viewBox: "0 0 9 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M8.29311 14.5703L1.73926 8.01646L8.29311 1.46261", stroke: "#000000", "stroke-width": "2" }))), h("div", { class: "button next", onClick: this.clickNextHandler, title: "Next" }, h("svg", { width: "9", height: "16", viewBox: "0 0 9 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M0.739117 1.46094L7.29297 8.01479L0.739118 14.5686", stroke: "#000000", "stroke-width": "2" }))))));
     }
     get host() { return this; }
-    static get style() { return biggiveCarouselCss; }
+    static get style() { return BiggiveCarouselStyle0; }
 }, [1, "biggive-carousel", {
         "spaceBelow": [2, "space-below"],
         "columnCount": [2, "column-count"],

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

	@@ -1 +1 @@
1	- {"file":"biggive-carousel2.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,muHAAmuH;;~~MCSjvH~~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","names":[],"sources":["src/components/biggive-carousel/biggive-carousel.scss?tag=biggive-carousel&encapsulation=shadow","src/components/biggive-carousel/biggive-carousel.tsx"],"sourcesContent":["@include spacers();\n@include text-colours();\n\n\n:host {\n display: contents;\n}\n\n.container {\n @include standard-font();\n position: relative;\n\n .items {\n .sleeve {\n display: flex;\n min-width: 100%;\n }\n }\n\n\n .navigation {\n padding: 10px 0;\n text-align: right;\n display: flex;\n justify-content: end;\n position: relative;\n z-index: 1;\n .button {\n margin-left: 15px;\n display: block;\n width: 30px;\n height: 30px;\n padding: 2.5px 10px;\n box-sizing: border-box;\n background-color: #FFFFFF;\n box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.25);\n border-radius: 50%;\n cursor: pointer;\n text-align: center;\n svg {\n width: 15px;\n height: 15px;\n position: relative;\n top: 2.5px;\n }\n &.prev {\n left: 0;\n svg {\n left: -3px;\n }\n }\n &.next {\n right: 0;\n svg {\n left: -1px;\n }\n }\n }\n }\n\n}\n\n.container ::slotted(.hidden) {\n display: none;\n}\n\n.column-count-5 ::slotted() {\n width: calc( (100% / 5) - (( $spacer-4 4 ) / 5 ) );\n @include flex-container-column();\n}\n\n.column-count-4 ::slotted() {\n width: calc( (100% / 4) - (( $spacer-4 3 ) / 4 ) );\n @include flex-container-column();\n}\n\n.column-count-3 ::slotted() {\n width: calc( (100% / 3) - (( $spacer-4 2 ) / 3 ) );\n @include flex-container-column();\n}\n\n.column-count-2 ::slotted() {\n width: calc( (100% / 2) - (( $spacer-4 1 ) / 2 ) );\n @include flex-container-column();\n}\n\n@media screen and (max-width: $screen-tablet-max) {\n .column-count-2 ::slotted(),\n .column-count-3 ::slotted(),\n .column-count-4 ::slotted(),\n .column-count-5 ::slotted() {\n width: calc( 50% - (($spacer-4 * 1) / 2));\n }\n}\n\n@media screen and (max-width: $screen-mobile-max) {\n .column-count-2 ::slotted(),\n .column-count-3 ::slotted(),\n .column-count-4 ::slotted(),\n .column-count-5 ::slotted() {\n width: 100%;\n }\n}\n","import { Component, Method, State, Prop, Element, h } from '@stencil/core';\nimport { brandColour } from '../../globals/brand-colour';\nimport { spacingOption } from '../../globals/spacing-option';\n\n@Component({\n tag: 'biggive-carousel',\n styleUrl: 'biggive-carousel.scss',\n shadow: true,\n})\nexport class BiggiveCarousel {\n @Element() host: HTMLBiggiveCarouselElement;\n\n @State() versions: [];\n @Prop() spaceBelow: spacingOption = 4;\n @Prop() columnCount: 1 \| 2 \| 3 \| 4 \| 5 = 3;\n @Prop() buttonBackgroundColour: brandColour = 'white';\n @Prop() buttonIconColour: brandColour = 'primary';\n\n private currentTab = 0;\n private itemCount = 0;\n private itemWidthPx = 0;\n private columnGapPx = 0;\n private sleeve: HTMLElement;\n\n componentDidRender() {\n this.sleeve = this.host.shadowRoot?.querySelector<HTMLElement>('.sleeve')!;\n this.resizeToFitContent();\n }\n\n @Method()\n public async resizeToFitContent() {\n let children = new Array<HTMLElement>();\n Array.from(this.host.children).forEach(item => {\n if (!item.classList.contains('hidden')) {\n children.push(item as HTMLElement);\n }\n });\n\n this.itemCount = children.length;\n\n if (children.length > 0) {\n this.columnGapPx = 30;\n\n this.itemWidthPx = (this.sleeve.parentElement?.offsetWidth! - (this.columnCount - 1) * this.columnGapPx) / this.columnCount;\n\n this.sleeve.style.width = (this.itemWidthPx + this.columnGapPx) * children.length + 'px';\n this.sleeve.style.height = this.sleeve.style.height;\n this.sleeve.style.transform = 'translate3d(0px, 0, 0)';\n\n children.forEach(el => {\n el.style.width = this.itemWidthPx + 'px';\n el.style.marginRight = this.columnGapPx + 'px';\n });\n }\n }\n\n /\n Animates a transition to show the NEXT or PREVIOUS element in the carousel.\n * Does nothing if there is no next or previous element.\n /\n private showTab(direction: 'NEXT' \| 'PREV') {\n const newTab = this.currentTab + (direction === 'PREV' ? -1 : 1);\n\n if (newTab < 0 \|\| newTab > this.itemCount - this.columnCount) {\n return;\n }\n\n const pos = 0 - (this.itemWidthPx + this.columnGapPx) newTab;\n\n this.sleeve.style.transitionDuration = '0.3s';\n this.sleeve.style.transitionTimingFunction = 'ease-out';\n this.sleeve.style.transform = 'translate3d(' + pos + 'px, 0, 0)';\n this.currentTab = newTab;\n }\n\n private clickPrevHandler = () => {\n this.showTab('PREV');\n };\n\n private clickNextHandler = () => {\n this.showTab('NEXT');\n };\n\n render() {\n return (\n <div\n class={\n 'container column-count-' +\n this.columnCount +\n ' space-below-' +\n this.spaceBelow +\n ' button-background-colour-' +\n this.buttonBackgroundColour +\n ' button-icon-colour-' +\n this.buttonIconColour\n }\n >\n <div class=\"items\">\n <div class=\"sleeve\">\n <slot></slot>\n </div>\n </div>\n\n <div class=\"navigation\">\n <div class=\"button prev\" onClick={this.clickPrevHandler} title=\"Previous\">\n <svg width=\"9\" height=\"16\" viewBox=\"0 0 9 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8.29311 14.5703L1.73926 8.01646L8.29311 1.46261\" stroke=\"#000000\" stroke-width=\"2\" />\n </svg>\n </div>\n <div class=\"button next\" onClick={this.clickNextHandler} title=\"Next\">\n <svg width=\"9\" height=\"16\" viewBox=\"0 0 9 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M0.739117 1.46094L7.29297 8.01479L0.739118 14.5686\" stroke=\"#000000\" stroke-width=\"2\" />\n </svg>\n </div>\n </div>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"biggive-carousel2.js","mappings":"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","names":[],"sources":["src/components/biggive-carousel/biggive-carousel.scss?tag=biggive-carousel&encapsulation=shadow","src/components/biggive-carousel/biggive-carousel.tsx"],"sourcesContent":["@include spacers();\n@include text-colours();\n\n\n:host {\n display: contents;\n}\n\n.container {\n @include standard-font();\n position: relative;\n\n .items {\n .sleeve {\n display: flex;\n min-width: 100%;\n }\n }\n\n\n .navigation {\n padding: 10px 0;\n text-align: right;\n display: flex;\n justify-content: end;\n position: relative;\n z-index: 1;\n .button {\n margin-left: 15px;\n display: block;\n width: 30px;\n height: 30px;\n padding: 2.5px 10px;\n box-sizing: border-box;\n background-color: #FFFFFF;\n box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.25);\n border-radius: 50%;\n cursor: pointer;\n text-align: center;\n svg {\n width: 15px;\n height: 15px;\n position: relative;\n top: 2.5px;\n }\n &.prev {\n left: 0;\n svg {\n left: -3px;\n }\n }\n &.next {\n right: 0;\n svg {\n left: -1px;\n }\n }\n }\n }\n\n}\n\n.container ::slotted(.hidden) {\n display: none;\n}\n\n.column-count-5 ::slotted() {\n width: calc( (100% / 5) - (( $spacer-4 4 ) / 5 ) );\n @include flex-container-column();\n}\n\n.column-count-4 ::slotted() {\n width: calc( (100% / 4) - (( $spacer-4 3 ) / 4 ) );\n @include flex-container-column();\n}\n\n.column-count-3 ::slotted() {\n width: calc( (100% / 3) - (( $spacer-4 2 ) / 3 ) );\n @include flex-container-column();\n}\n\n.column-count-2 ::slotted() {\n width: calc( (100% / 2) - (( $spacer-4 1 ) / 2 ) );\n @include flex-container-column();\n}\n\n@media screen and (max-width: $screen-tablet-max) {\n .column-count-2 ::slotted(),\n .column-count-3 ::slotted(),\n .column-count-4 ::slotted(),\n .column-count-5 ::slotted() {\n width: calc( 50% - (($spacer-4 * 1) / 2));\n }\n}\n\n@media screen and (max-width: $screen-mobile-max) {\n .column-count-2 ::slotted(),\n .column-count-3 ::slotted(),\n .column-count-4 ::slotted(),\n .column-count-5 ::slotted() {\n width: 100%;\n }\n}\n","import { Component, Method, State, Prop, Element, h } from '@stencil/core';\nimport { brandColour } from '../../globals/brand-colour';\nimport { spacingOption } from '../../globals/spacing-option';\n\n@Component({\n tag: 'biggive-carousel',\n styleUrl: 'biggive-carousel.scss',\n shadow: true,\n})\nexport class BiggiveCarousel {\n @Element() host: HTMLBiggiveCarouselElement;\n\n @State() versions: [];\n @Prop() spaceBelow: spacingOption = 4;\n @Prop() columnCount: 1 \| 2 \| 3 \| 4 \| 5 = 3;\n @Prop() buttonBackgroundColour: brandColour = 'white';\n @Prop() buttonIconColour: brandColour = 'primary';\n\n private currentTab = 0;\n private itemCount = 0;\n private itemWidthPx = 0;\n private columnGapPx = 0;\n private sleeve: HTMLElement;\n\n componentDidRender() {\n this.sleeve = this.host.shadowRoot?.querySelector<HTMLElement>('.sleeve')!;\n this.resizeToFitContent();\n }\n\n @Method()\n public async resizeToFitContent() {\n let children = new Array<HTMLElement>();\n Array.from(this.host.children).forEach(item => {\n if (!item.classList.contains('hidden')) {\n children.push(item as HTMLElement);\n }\n });\n\n this.itemCount = children.length;\n\n if (children.length > 0) {\n this.columnGapPx = 30;\n\n this.itemWidthPx = (this.sleeve.parentElement?.offsetWidth! - (this.columnCount - 1) * this.columnGapPx) / this.columnCount;\n\n this.sleeve.style.width = (this.itemWidthPx + this.columnGapPx) * children.length + 'px';\n this.sleeve.style.height = this.sleeve.style.height;\n this.sleeve.style.transform = 'translate3d(0px, 0, 0)';\n\n children.forEach(el => {\n el.style.width = this.itemWidthPx + 'px';\n el.style.marginRight = this.columnGapPx + 'px';\n });\n }\n }\n\n /\n Animates a transition to show the NEXT or PREVIOUS element in the carousel.\n * Does nothing if there is no next or previous element.\n /\n private showTab(direction: 'NEXT' \| 'PREV') {\n const newTab = this.currentTab + (direction === 'PREV' ? -1 : 1);\n\n if (newTab < 0 \|\| newTab > this.itemCount - this.columnCount) {\n return;\n }\n\n const pos = 0 - (this.itemWidthPx + this.columnGapPx) newTab;\n\n this.sleeve.style.transitionDuration = '0.3s';\n this.sleeve.style.transitionTimingFunction = 'ease-out';\n this.sleeve.style.transform = 'translate3d(' + pos + 'px, 0, 0)';\n this.currentTab = newTab;\n }\n\n private clickPrevHandler = () => {\n this.showTab('PREV');\n };\n\n private clickNextHandler = () => {\n this.showTab('NEXT');\n };\n\n render() {\n return (\n <div\n class={\n 'container column-count-' +\n this.columnCount +\n ' space-below-' +\n this.spaceBelow +\n ' button-background-colour-' +\n this.buttonBackgroundColour +\n ' button-icon-colour-' +\n this.buttonIconColour\n }\n >\n <div class=\"items\">\n <div class=\"sleeve\">\n <slot></slot>\n </div>\n </div>\n\n <div class=\"navigation\">\n <div class=\"button prev\" onClick={this.clickPrevHandler} title=\"Previous\">\n <svg width=\"9\" height=\"16\" viewBox=\"0 0 9 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8.29311 14.5703L1.73926 8.01646L8.29311 1.46261\" stroke=\"#000000\" stroke-width=\"2\" />\n </svg>\n </div>\n <div class=\"button next\" onClick={this.clickNextHandler} title=\"Next\">\n <svg width=\"9\" height=\"16\" viewBox=\"0 0 9 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M0.739117 1.46094L7.29297 8.01479L0.739118 14.5686\" stroke=\"#000000\" stroke-width=\"2\" />\n </svg>\n </div>\n </div>\n </div>\n );\n }\n}\n"],"version":3}