@biggive/components 202304281233.0.0 → 202305101345.0.0

package/hydrate/index.js

@@ -6814,7 +6814,7 @@ class BiggiveCampaignCardFilterGrid {
       this.filtersApplied = false;
       // Clear all
       this.searchText = null;
-      this.selectedSortByOption = null;
+      this.selectedSortByOption = this.initialSortByOption;
       this.selectedFilterBeneficiary = null;
       this.selectedFilterCategory = null;
       this.selectedFilterFunding = null;
@@ -6847,7 +6847,7 @@ class BiggiveCampaignCardFilterGrid {
     this.beneficiaryOptions = [];
     this.locationOptions = [];
     this.fundingOptions = [];
-    this.selectedSortByOption = null;
+    this.selectedSortByOption = undefined;
     this.selectedFilterCategory = null;
     this.selectedFilterBeneficiary = null;
     this.selectedFilterLocation = null;
@@ -6898,6 +6898,7 @@ class BiggiveCampaignCardFilterGrid {
   componentWillRender() {
     this.filtersApplied =
       this.selectedFilterCategory !== null || this.selectedFilterBeneficiary !== null || this.selectedFilterFunding !== null || this.selectedFilterLocation !== null;
+    this.initialSortByOption = this.selectedSortByOption;
   }
   render() {
     var _a;
@@ -6909,7 +6910,7 @@ class BiggiveCampaignCardFilterGrid {
       ? undefined
       : (Array.isArray(this.locationOptions) ? this.locationOptions : JSON.parse(this.locationOptions)).map(option => (hAsync("biggive-form-field-select-option", { value: option, label: option })))), hAsync("biggive-form-field-select", { placeholder: this.fundingPlaceHolderText, selectedLabel: this.selectedFilterFunding, id: "funding", "space-below": "2" }, this.fundingOptions.length === 0
       ? undefined
-      : (Array.isArray(this.fundingOptions) ? this.fundingOptions : JSON.parse(this.fundingOptions)).map(option => (hAsync("biggive-form-field-select-option", { value: option, label: option })))), hAsync("div", { class: "align-right" }, hAsync("biggive-button", { label: "Apply filters", onClick: this.handleApplyFilterButtonClick })))), hAsync("div", { class: "sort-wrap" }, hAsync("biggive-form-field-select", { "select-style": "underlined", placeholder: this.sortByPlaceholderText, selectedLabel: this.selectedSortByOption, id: "sort-by" }, hAsync("biggive-form-field-select-option", { value: "amountRaised", label: "Most raised" }), hAsync("biggive-form-field-select-option", { value: "matchFundsRemaining", label: "Match funds remaining" }), hAsync("biggive-form-field-select-option", { value: "Relevance", label: "Relevance" })))), hAsync("div", { class: "selected-filter-wrap" }, hAsync("div", { class: "selected-filters" }), hAsync("div", { class: "clear-all" }, hAsync("a", { onClick: this.handleClearAll }, "Clear all"))), hAsync("div", { class: "campaign-grid" }, hAsync("slot", { name: "campaign-grid" })))));
+      : (Array.isArray(this.fundingOptions) ? this.fundingOptions : JSON.parse(this.fundingOptions)).map(option => (hAsync("biggive-form-field-select-option", { value: option, label: option })))), hAsync("div", { class: "align-right" }, hAsync("biggive-button", { label: "Apply filters", onClick: this.handleApplyFilterButtonClick })))), hAsync("div", { class: "sort-wrap" }, hAsync("biggive-form-field-select", { "select-style": "underlined", placeholder: this.sortByPlaceholderText, selectedLabel: this.selectedSortByOption, id: "sort-by" }, hAsync("biggive-form-field-select-option", { value: "amountRaised", label: "Most raised" }), hAsync("biggive-form-field-select-option", { value: "matchFundsRemaining", label: "Match funds remaining" }), (this.searchText || '').length > 0 ? hAsync("biggive-form-field-select-option", { value: "Relevance", label: "Relevance" }) : null))), hAsync("div", { class: "selected-filter-wrap" }, hAsync("div", { class: "selected-filters" }), hAsync("div", { class: "clear-all" }, hAsync("a", { onClick: this.handleClearAll }, "Clear all"))), hAsync("div", { class: "campaign-grid" }, hAsync("slot", { name: "campaign-grid" })))));
   }
   get el() { return getElement(this); }
   static get style() { return biggiveCampaignCardFilterGridCss; }
@@ -8554,20 +8555,36 @@ class BiggiveTable {
   }; }
 }
 
-const biggiveTextInputCss = "/*!@:host*/.sc-biggive-text-input-h{display:block}";
+const biggiveTextInputCss = "/*!@a*/a.sc-biggive-text-input{color:inherit;text-decoration:underline}/*!@a:hover*/a.sc-biggive-text-input:hover{text-decoration:none}/*!@.space-above-0*/.space-above-0.sc-biggive-text-input{margin-top:0}/*!@.space-above-1*/.space-above-1.sc-biggive-text-input{margin-top:5px}/*!@.space-above-2*/.space-above-2.sc-biggive-text-input{margin-top:10px}/*!@.space-above-3*/.space-above-3.sc-biggive-text-input{margin-top:15px}/*!@.space-above-4*/.space-above-4.sc-biggive-text-input{margin-top:30px}/*!@.space-above-5*/.space-above-5.sc-biggive-text-input{margin-top:45px}/*!@.space-above-6*/.space-above-6.sc-biggive-text-input{margin-top:60px}/*!@.space-below-0*/.space-below-0.sc-biggive-text-input{margin-bottom:0}/*!@.space-below-1*/.space-below-1.sc-biggive-text-input{margin-bottom:5px}/*!@.space-below-2*/.space-below-2.sc-biggive-text-input{margin-bottom:10px}/*!@.space-below-3*/.space-below-3.sc-biggive-text-input{margin-bottom:15px}/*!@.space-below-4*/.space-below-4.sc-biggive-text-input{margin-bottom:30px}/*!@.space-below-5*/.space-below-5.sc-biggive-text-input{margin-bottom:45px}/*!@.space-below-6*/.space-below-6.sc-biggive-text-input{margin-bottom:60px}/*!@:host*/.sc-biggive-text-input-h{display:contents}/*!@.text-input*/.text-input.sc-biggive-text-input{position:relative;font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;position:relative;text-align:left}/*!@.text-input .currency-symbol*/.text-input.sc-biggive-text-input .currency-symbol.sc-biggive-text-input{float:left}/*!@.text-input .prompt*/.text-input.sc-biggive-text-input .prompt.sc-biggive-text-input{position:absolute;z-index:2;font-size:small;top:-1em;background-color:#F4F4F4;left:4em;padding-left:1em;padding-right:1em;color:#2C089B}/*!@.text-input.select-style-bordered .sleeve*/.text-input.select-style-bordered.sc-biggive-text-input .sleeve.sc-biggive-text-input{font-size:24px;line-height:30px;font-weight:bolder;padding:2px;position:relative;background-color:#2C089B;clip-path:polygon(0% 0%, 0% 0%, calc(100% - 15px) 0%, 100% 15px, 100% 100%, 100% 100%, 0 100%, 0 100%)}/*!@.text-input.select-style-bordered .sleeve .inner-sleave*/.text-input.select-style-bordered.sc-biggive-text-input .sleeve.sc-biggive-text-input .inner-sleave.sc-biggive-text-input{background-color:#F4F4F4;color:#2C089B;display:block;position:relative;padding:10px 30px 10px 10px;cursor:pointer;clip-path:polygon(0% 0%, 0% 0%, calc(100% - 14px) 0%, 100% 14px, 100% 100%, 100% 100%, 0 100%, 0 100%)}/*!@.text-input.select-style-bordered .sleeve .inner-sleave:after*/.text-input.select-style-bordered.sc-biggive-text-input .sleeve.sc-biggive-text-input .inner-sleave.sc-biggive-text-input:after{content:\"\";display:block;position:absolute;right:20px;top:18px;width:10px;height:10px;background-size:contain;background-repeat:no-repeat;background-position:center center}";
 
+/**
+ * Initially developed for use within the new donate stepper design. Currently has a hard-coded background
+ * of $colour-grey-background, intened to appear transparent when used on a page with a matching background.
+ */
 class BiggiveTextInput {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.value = undefined;
+    this.currency = undefined;
+    this.spaceBelow = 0;
+    this.selectStyle = 'bordered';
+    this.prompt = undefined;
   }
   render() {
-    return (hAsync(Host, null, hAsync("slot", null)));
+    const currencySymbol = this.currency === 'GBP' ? '£' : this.currency === 'USD' ? '$' : undefined;
+    return (hAsync("div", { class: 'text-input space-below-' + this.spaceBelow + ' select-style-' + this.selectStyle }, hAsync("div", { class: "sleeve" }, hAsync("div", { class: "inner-sleave" }, currencySymbol && hAsync("span", { class: "currency-symbol" }, currencySymbol), hAsync("slot", { name: "input" }), hAsync("div", { style: { clear: 'both' } }))), hAsync("div", { class: "prompt" }, this.prompt)));
   }
   static get style() { return biggiveTextInputCss; }
   static get cmpMeta() { return {
     "$flags$": 9,
     "$tagName$": "biggive-text-input",
-    "$members$": undefined,
+    "$members$": {
+      "value": [1],
+      "currency": [1],
+      "spaceBelow": [2, "space-below"],
+      "selectStyle": [1, "select-style"],
+      "prompt": [1]
+    },
     "$listeners$": undefined,
     "$lazyBundleId$": "-",
     "$attrsToReflect$": []

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@biggive/components",
   "_comment": "Version number below is automatically replaced during CircleCI build.",
-  "version": "202304281233.0.0",
+  "version": "202305101345.0.0",
   "description": "Big Give Components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

package/dist/biggive/p-044de4a5.entry.js

@@ -1 +0,0 @@
-import{r as s,h as t,H as r}from"./p-740166e9.js";const o=class{constructor(t){s(this,t)}render(){return t(r,null,t("slot",null))}};o.style=":host{display:block}";export{o as biggive_text_input}