@biggive/components 202606301318.0.0 → 202607231148.0.0

package/dist/collection/components/biggive-campaign-card-filter-grid/biggive-campaign-card-filter-grid.stories.js

@@ -1,109 +0,0 @@
-export default {
-    title: 'Components/Campaign Features',
-    argTypes: {
-        categoryOptions: {
-            name: 'Category Options',
-        },
-        beneficiaryOptions: {
-            name: 'Beneficiary Options',
-        },
-        locationOptions: {
-            name: 'Location Options',
-        },
-        searchText: {
-            name: 'Search Text',
-        },
-        selectedSortByOption: {
-            name: 'Selected Sort By Option',
-            options: ['Most funds remaining', 'Nearest target', 'Most raised', 'Least Raised', 'Relevance'],
-            control: {
-                type: 'select',
-            },
-        },
-        selectedFilterCategory: {
-            name: 'Selected Filter Category',
-            options: ['Health', 'Disaster Relief', 'Cancer'],
-            control: {
-                type: 'select',
-            },
-        },
-        selectedFilterBeneficiary: {
-            name: 'Selected Filter Beneficiary',
-            options: ['General Public', 'Animals', 'Veterans'],
-            control: {
-                type: 'select',
-            },
-        },
-        selectedFilterLocation: {
-            name: 'Selected Filter Location',
-            options: ['United Kingdom', 'Spain', 'France'],
-            control: {
-                type: 'select',
-            },
-        },
-    },
-};
-const Template = (args) => `
-      <biggive-campaign-card-filter-grid
-        category-options='${args.categoryOptions}'
-        beneficiary-options='${args.beneficiaryOptions}'
-        location-options='${args.locationOptions}'
-        search-text="${args.searchText}"
-        filters-applied="${args.filtersApplied}",
-        ${args.selectedSortByOption ? 'selected-sort-by-option=' + args.selectedSortByOption : ''}
-        ${args.selectedFilterCategory ? 'selected-filter-category=' + args.selectedFilterCategory : ''}
-        ${args.selectedFilterBeneficiary ? 'selected-filter-beneficiary=' + args.selectedFilterBeneficiary : ''}
-        ${args.selectedFilterLocation ? 'selected-filter-location=' + args.selectedFilterLocation : ''}
-        >
-      <biggive-grid slot="campaign-grid" column-count="3">
-        <biggive-campaign-card
-          campaign-type="Match Funded"
-          campaign-title="Oxford Piano Festival Fundraising Campaign for LGBTQ+ community"
-          organisation-name="Oxford Philharmonic Orchestra"
-          currency-code="GBP"
-          primary-figure-label="Total Raised"
-          primary-figure-amount="76543"
-          secondary-figure-label="Total Raised"
-          secondary-figure-amount="76543"
-          progress-bar-counter="75">
-        </biggive-campaign-card>
-        <biggive-campaign-card
-          data-filter-categories="[&quot;Healthcare&quot;]"
-          data-filter-beneficiaries="[&quot;Children&quot;]"
-          campaign-type="Match Funded"
-          campaign-title="Oxford Piano Festival Fundraising Campaign for LGBTQ+ community"
-          organisation-name="Oxford Philharmonic Orchestra"
-          currency-code="GBP"
-          primary-figure-label="Total Raised"
-          primary-figure-amount="76543"
-          secondary-figure-label="Total Raised"
-          secondary-figure-amount="76543">
-        </biggive-campaign-card>
-        <biggive-campaign-card
-          data-filter-categories="[&quot;Healthcare&quot;]"
-          data-filter-beneficiaries="[&quot;Children&quot;]"
-          campaign-type="Match Funded"
-          campaign-title="Oxford Piano Festival Fundraising Campaign for LGBTQ+ community"
-          organisation-name="Oxford Philharmonic Orchestra"
-          currency-code="GBP"
-          primary-figure-label="Total Raised"
-          primary-figure-amount="76543"
-          secondary-figure-label="Total Raised"
-          secondary-figure-amount="76543">
-        </biggive-campaign-card>
-      </biggive-grid>
-      </biggive-campaign-card-filter-grid>
-      `;
-export const CampaignCardFilterGridComponent = {
-    render: Template,
-    args: {
-        categoryOptions: JSON.stringify(['ABC a longer category test', 'DEF something additional']),
-        beneficiaryOptions: JSON.stringify(['ABC', 'DEF']),
-        locationOptions: JSON.stringify(['ABC', 'DEF']),
-        searchText: '',
-        selectedSortByOption: null,
-        selectedFilterCategory: null,
-        selectedFilterBeneficiary: null,
-        selectedFilterLocation: null,
-    },
-};

package/dist/components/biggive-campaign-card-filter-grid.d.ts

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

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

@@ -1 +0,0 @@
-import{proxyCustomElement as e,HTMLElement as t,createEvent as i,h as a,transformTag as s}from"@stencil/core/internal/client";import{f as l}from"./index2.js";import{d as o}from"./biggive-button2.js";import{d as r}from"./biggive-form-field-select2.js";import{d as c}from"./biggive-popup2.js";const n={relevance:"Relevance",amountRaised:"Most raised",leastRaised:"Least raised",closeToTarget:"Nearest target",matchFundsRemaining:"Most funds remaining"},d=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.doSearchAndFilterUpdate=i(this,"doSearchAndFilterUpdate",7),this.doGetLocationFromBrowser=i(this,"doGetLocationFromBrowser",7),this.sortByPlaceholderText="Sort by",this.beneficiariesPlaceHolderText="Select beneficiary",this.categoriesPlaceHolderText="Select category",this.locationsPlaceHolderText="Select location",this.newSelectedFilterCategory=null,this.newSelectedFilterBeneficiary=null,this.newSelectedFilterLocation=null,this.spaceBelow=0,this.intro="Find a charity or project",this.searchText=null,this.placeholderText="Search",this.buttonText="Search",this.selectedFilterCategory=null,this.selectedFilterBeneficiary=null,this.selectedFilterLocation=null,this.enableSearchByLocation=!1,this.fetchingLocation=!1,this.location=void 0,this.categoryFilterSelectionChanged=e=>{this.newSelectedFilterCategory=e},this.beneficiarySelectionChanged=e=>{this.newSelectedFilterBeneficiary=e},this.locationSelectionChanged=e=>{this.newSelectedFilterLocation=e},this.sortBySelectionChanged=e=>{this.selectedSortByOption=e,this.doSearchAndFilterUpdate.emit(this.getSearchAndFilterObject())},this.handleApplyFilterButtonClick=()=>{var e,t,i,a;this.selectedFilterCategory=null!==(e=this.newSelectedFilterCategory)&&void 0!==e?e:this.selectedFilterCategory,this.selectedFilterBeneficiary=null!==(t=this.newSelectedFilterBeneficiary)&&void 0!==t?t:this.selectedFilterBeneficiary,this.selectedFilterLocation=null!==(i=this.newSelectedFilterLocation)&&void 0!==i?i:this.selectedFilterLocation;const s=this.getSearchAndFilterObject();this.doSearchAndFilterUpdate.emit(s);const l=null===(a=this.el.shadowRoot)||void 0===a?void 0:a.getElementById("filter-popup");l&&l.closeFromOutside(),this.filtersApplied="string"==typeof s.filterBeneficiary||"string"==typeof s.filterCategory||"string"==typeof s.filterLocation},this.handleSearchButtonPressed=()=>{this.unfocusTextInput(),this.doSearchAndFilterUpdate.emit(this.getSearchAndFilterObject()),this.hasSearchTerm()&&(this.selectedSortByOption="Relevance")},this.handleNearMeButtonPressed=()=>{this.unfocusTextInput(),this.doGetLocationFromBrowser.emit()},this.handleSearchTextChanged=e=>{this.searchText=e.target.value},this.handleEnterPressed=e=>{"Enter"===e.key&&(this.unfocusTextInput(),this.doSearchAndFilterUpdate.emit(this.getSearchAndFilterObject()))},this.handleFilterButtonClick=()=>{var e;this.newSelectedFilterBeneficiary=this.selectedFilterBeneficiary,this.newSelectedFilterCategory=this.selectedFilterCategory,this.newSelectedFilterLocation=this.selectedFilterLocation;const t=null===(e=this.el.shadowRoot)||void 0===e?void 0:e.getElementById("filter-popup");t&&t.openFromOutside()},this.handleClearAll=()=>{var e;this.unfocusTextInput(),this.filtersApplied=!1,this.searchText=null,this.selectedSortByOption=this.initialSortByOption,this.selectedFilterBeneficiary=null,this.selectedFilterCategory=null,this.selectedFilterLocation=null,["sort-by","categories","beneficiaries","locations","funding"].forEach((e=>{var t;const i=null===(t=this.el.shadowRoot)||void 0===t?void 0:t.getElementById(e);i&&(i.selectedValue=null,i.selectedLabel=null)}));const t=null===(e=this.el.shadowRoot)||void 0===e?void 0:e.querySelector(".selected-filters");t&&t.querySelectorAll(".button").forEach((e=>{e.remove()})),this.doSearchAndFilterUpdate.emit({searchText:null,sortBy:null,filterCategory:null,filterBeneficiary:null,filterLocation:null})}}async unfocusInputs(){this.unfocusTextInput()}getSearchAndFilterObject(){return{searchText:this.searchText,sortBy:this.selectedSortByOption,filterCategory:this.selectedFilterCategory,filterBeneficiary:this.selectedFilterBeneficiary,filterLocation:this.selectedFilterLocation}}removeFilter(e){var t;switch(e){case"beneficiaries":this.selectedFilterBeneficiary=null;break;case"categories":this.selectedFilterCategory=null;break;case"locations":this.selectedFilterLocation=null;break;default:console.error(e)}const i=null===(t=this.el.shadowRoot)||void 0===t?void 0:t.getElementById(e);i&&(i.selectedLabel=null,i.selectedValue=null,this.doSearchAndFilterUpdate.emit(this.getSearchAndFilterObject()))}unfocusTextInput(){var e;const t=null===(e=this.el.shadowRoot)||void 0===e?void 0:e.querySelector(".input-text");null==t||t.blur()}componentWillRender(){this.filtersApplied=null!==this.selectedFilterCategory||null!==this.selectedFilterBeneficiary||null!==this.selectedFilterLocation,this.initialSortByOption=this.selectedSortByOption}render(){var e;const t=this.getSortOptions();return a("div",{key:"ceb2f44c3c853bfdc3da18ad187de4cc5a085ffb",class:"container space-below-"+this.spaceBelow},a("div",{key:"8f6370902bfabe8a9df23e274d05298ca316b12b",class:"sleeve"},a("div",{key:"89fc861fdb61827ab5dbb5cee88a4dfdd0a8abcb",class:"search-wrap"},a("h4",{key:"04363e5852c2347036e52efd75c0acfd83df5901"},this.intro),a("div",{key:"dd18cb11be900192f0a5a26f027b0102453e50ad",class:"field-wrap"},a("div",{key:"a9798f3d6943cfb5494452bf23ea5ce03c288a45",class:"input-wrap"},a("svg",{key:"9296bccad620aaba713b252fb31c7f3efd4b1a96",xmlns:"http://www.w3.org/2000/svg",class:"icon",viewBox:"0 0 512 512"},a("path",{key:"718a7766577cf08ba55ebae64b60b312cfcf8edf",d:""+l.icon[4]})),a("input",{key:"e89ff0c306417359e72597edf932166970e01702",type:"text",value:null!==(e=this.searchText)&&void 0!==e?e:"",class:"input-text",placeholder:this.placeholderText,onInput:this.handleSearchTextChanged,onKeyDown:this.handleEnterPressed})),a("biggive-button",{key:"7713463cc5c611be7e96290c91da7691c3bba5e4",onDoButtonClick:this.handleSearchButtonPressed,label:this.buttonText}))),a("div",{key:"eb4ac758e446eda26be72dad7239fd525c520c39",class:"sort-filter-wrap"},this.enableSearchByLocation&&this.offerNearMeOption&&a("biggive-button",{key:"6f571b4193453203cc11cb99c42a475e0360b69d",class:"filter",colourScheme:"primary",onDoButtonClick:this.handleNearMeButtonPressed,label:this.fetchingLocation?"Fetching location...":"Charities near me",disabled:this.fetchingLocation,fullWidth:!0,"space-below":"0"}),a("div",{key:"07fa78bea86edf2b60492b42e8e91ff9b44e9830",class:"filter-wrap"},a("biggive-button",{key:"0f6775e87d80f1b91dd57ef39260838932dd099d",class:"filter",colourScheme:"primary",onDoButtonClick:this.handleFilterButtonClick,label:"Filter",fullWidth:!0,"space-below":"0"}),a("biggive-popup",{key:"fe87d7b2fc75583f421855eee6dd22132ec77096",id:"filter-popup"},a("h4",{key:"50cc5ea69df122c34ff8bc615088f7a7e07d992e",class:"space-above-0 space-below-3 text-colour-primary"},"Filters"),a("div",{key:"c0354b38830bb635e19ad38dfd306e41b72aedff",class:"select-wrapper-1"},a("biggive-form-field-select",{key:"a1ce6c7b5c956e01958a74f98d6a1238486dd511",backgroundColour:"white",prompt:"Category",placeholder:this.categoriesPlaceHolderText,selectedLabel:this.selectedFilterCategory,selectedValue:this.selectedFilterCategory,options:this.optionsToArray(this.categoryOptions||[]),selectionChanged:this.categoryFilterSelectionChanged,id:"categories","space-below":"2"})),a("div",{key:"6cc0dbeb1c98470bdce24faf880210f64e0edd72",class:"select-wrapper-2"},a("biggive-form-field-select",{key:"5109c83967e666a5254814ddaf822cffbda2b6af",backgroundColour:"white",prompt:"Beneficiary",placeholder:this.beneficiariesPlaceHolderText,selectedLabel:this.selectedFilterBeneficiary,selectedValue:this.selectedFilterBeneficiary,options:this.optionsToArray(this.beneficiaryOptions||[]),selectionChanged:this.beneficiarySelectionChanged,id:"beneficiaries","space-below":"2"})),a("div",{key:"213fb6972e212a3ed593445701e55cd9c9df4e70",class:"select-wrapper-3"},a("biggive-form-field-select",{key:"c5f0c913deb5b3eb1cdde23cc4f59fd4d856bdc7",backgroundColour:"white",prompt:"Location",placeholder:this.locationsPlaceHolderText,selectedLabel:this.selectedFilterLocation,selectedValue:this.selectedFilterLocation,options:this.optionsToArray(this.locationOptions||[]),selectionChanged:this.locationSelectionChanged,id:"locations","space-below":"2"})),a("div",{key:"d5ebed141c6f2df713044838802e41d59a99c033",class:"align-right"},a("biggive-button",{key:"5fe81bf0b04ef44618264aa4dae4b31df44f74c2",label:"Apply filters",onDoButtonClick:this.handleApplyFilterButtonClick})))),a("div",{key:"36cbb004dc2c0b3d6435c853893f279f7cc2a0b4",class:"sort-wrap"},a("biggive-form-field-select",{key:"ce1b686a810d10452ef1c2fabf346117cd3990c4",options:t,prompt:null,"select-style":"underlined",placeholder:this.sortByPlaceholderText,selectedLabel:this.selectedSortByOption,selectedValue:this.getSelectedValue(),selectionChanged:this.sortBySelectionChanged,id:"sort-by"},a("biggive-form-field-select-option",{key:"eb016dccffc6b0c63de001ec5e7c15c0215f58f7",value:"amountRaised",label:"Most raised"}),a("biggive-form-field-select-option",{key:"4df7ba1f42d0bb2d1e53c2e40db788bc4862ffed",value:"leastRaised",label:"Least raised"}),a("biggive-form-field-select-option",{key:"6ee1373b12f664ffc9b2d86fbfae71c5ee89c808",value:"matchFundsRemaining",label:"Most funds remaining"}),a("biggive-form-field-select-option",{key:"e2cf6339701f3f03fd1a1a1ddd55a697db189b64",value:"closeToTarget",label:"Nearest target"}),(this.searchText||"").length>0?a("biggive-form-field-select-option",{value:"Relevance",label:"Relevance"}):null))),a("div",{key:"f6e3bf0f207f735c91b9053f43b1a75a6ec33b34",class:"selected-filter-wrap"},a("div",{key:"bfdbb504e478326031d977b1af88f2cc74d2f841",class:"selected-filters"},this.selectedFilterCategory&&a("span",{key:"bbb0ea75b53fed704a910faa8962bd9f70454b25",class:"button",onClick:()=>{this.removeFilter("categories")}},this.selectedFilterCategory),this.selectedFilterBeneficiary&&a("span",{key:"5d391afc2dfd66119892f7b77038125e5703728e",class:"button",onClick:()=>{this.removeFilter("beneficiaries")}},this.selectedFilterBeneficiary),this.selectedFilterLocation&&a("span",{key:"bc7b957d2d76cdfede96921c0a006da77690b3fc",class:"button",onClick:()=>{this.removeFilter("locations")}},this.selectedFilterLocation)),a("div",{key:"bf228470ec15507617fa98b20eda6b2584ca359d",class:"clear-all"},a("a",{key:"5e210df20d0dc4951b98888958d03ff0ed74cf0c",onClick:this.handleClearAll},"Clear all"))),a("div",{key:"155ef43b9888223f6a480130df3aa47bafd78741",class:"campaign-grid"},a("slot",{key:"ee3ff728b4ce9a11e33401236ccee3a581ef39a0",name:"campaign-grid"}))))}getSelectedValue(){const e=this.selectedSortByOption;if(void 0===e)return;const t=this.getSortOptions().filter((t=>t.label.toLowerCase()===e.toLowerCase()))[0];return null==t?void 0:t.value}getSortOptions(){return Object.getOwnPropertyNames(n).filter((e=>"relevance"!==e||this.hasSearchTerm())).map((e=>({value:e,label:n[e]})))}hasSearchTerm(){return"string"==typeof this.searchText&&this.searchText.length>0}optionsToArray(e){return"string"==typeof e&&(e=JSON.parse(e)),Array.isArray(e)?e.map((e=>({value:e,label:e}))):Object.entries(e).map((e=>({value:e[0],label:e[1]})))}get el(){return this}static get style(){return'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:23px;padding:0}.selected-filter-wrap .button{margin-bottom:7px;display:inline-block;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{display:inline-block;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:#F6F6F6;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}'}},[257,"biggive-campaign-card-filter-grid",{spaceBelow:[2,"space-below"],intro:[1],searchText:[1,"search-text"],placeholderText:[1,"placeholder-text"],buttonText:[1,"button-text"],categoryOptions:[1,"category-options"],beneficiaryOptions:[1,"beneficiary-options"],locationOptions:[1,"location-options"],selectedSortByOption:[1025,"selected-sort-by-option"],selectedFilterCategory:[1025,"selected-filter-category"],selectedFilterBeneficiary:[1025,"selected-filter-beneficiary"],selectedFilterLocation:[1025,"selected-filter-location"],enableSearchByLocation:[4,"enable-search-by-location"],offerNearMeOption:[4,"offer-near-me-option"],fetchingLocation:[4,"fetching-location"],location:[16],filtersApplied:[32],unfocusInputs:[64]}]),p=d,f=function(){"undefined"!=typeof customElements&&["biggive-campaign-card-filter-grid","biggive-button","biggive-form-field-select","biggive-popup"].forEach((e=>{switch(e){case"biggive-campaign-card-filter-grid":customElements.get(s(e))||customElements.define(s(e),d);break;case"biggive-button":customElements.get(s(e))||o();break;case"biggive-form-field-select":customElements.get(s(e))||r();break;case"biggive-popup":customElements.get(s(e))||c()}}))};export{p as BiggiveCampaignCardFilterGrid,f as defineCustomElement}

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

@@ -1 +0,0 @@
-import{proxyCustomElement as e,HTMLElement as o,h as t,transformTag as i}from"@stencil/core/internal/client";const a=e(class extends o{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.selectStyle="bordered",this.selectedOptionColour="blue",this.doOptionSelectCompletedHandler=e=>{const o=e.target.value;this.selectedValue=o,this.selectedLabel=e.target.label,this.selectionChanged(o)},this.spaceBelow=0}render(){const e="grey"===this.backgroundColour?" grey":"";let o=this.formatOptions(this.options);"string"==typeof this.placeholder&&"string"!=typeof this.selectedValue&&(o=[{value:"__placeholder__",label:this.placeholder},...o]),void 0===o&&(console.error("options undefined"),o=[]);const i=this.selectElementId||"select-"+this.getRandomInt().toString();return t("div",{key:"1b0f9c8c81ab0f4d3bb21ea3ef10e24a1eb23c98",class:"selectWrapper"},t("label",{key:"9a4c9ea9774385dceb506c6a71823588c6d33a12",class:e,htmlFor:i},t("div",{key:"441a778c4d417c7b8daf18ea0caada0b421fae25",class:"prompt"+e},this.prompt)),t("div",{key:"29a22d55202a62eaa02ad24caae3de079f651082",class:"dropdown space-below-"+this.spaceBelow+" select-style-"+this.selectStyle+(null===this.prompt?"  noprompt":"")+("inherit"===this.selectedOptionColour?" inherit-colour":"")},t("div",{key:"281b7731bdf66d6419aae73d68951bc8df532149",class:"sleeve"},t("select",{key:"de57f5898ffe1122c2cc72442eab0d7da2b52a2c",id:i,class:e,onChange:this.doOptionSelectCompletedHandler,"aria-label":null===this.prompt?this.placeholder:this.prompt},o.map((e=>t("option",{selected:this.selectedValue===e.value,value:e.value},e.label)))),t("div",{key:"e6316c952bcfbd7b8a3ce332a4563f898010abd4",class:"arrow"}))))}formatOptions(e){return void 0===e?[]:("string"==typeof e&&(e=JSON.parse(e)),Array.isArray(e)?e:Object.entries(e).map((e=>({value:e[0],label:e[1]}))))}getRandomInt(){return Math.floor(8999999*Math.random()+1e6)}get el(){return this}static get style(){return'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}*,*::before,*::after{box-sizing:border-box}select{appearance:none;border:none;padding:0 1em 0 0;margin:0;width:100%;font-family:inherit;font-size:inherit;cursor:inherit;line-height:inherit;outline:none;display:grid;background-color:#FFFFFF;align-items:center}select.grey{background-color:#F6F6F6}.selectWrapper{position:relative}.prompt{position:absolute;z-index:2;font-size:small;top:-1em;background-color:#FFFFFF;left:4em;padding-left:1em;padding-right:1em;color:#2C089B}.prompt.grey{background-color:#F6F6F6}.dropdown{font-family:"Euclid Triangle", sans-serif;font-size:17px;line-height:24px;position:relative;text-align:left}.dropdown.select-style-bordered .sleeve{font-size:17px;line-height:24px;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%)}.dropdown.select-style-bordered .sleeve select{color:#2C089B;display:block;position:relative;padding:10px 80px 10px 10px;clip-path:polygon(0% 0%, 0% 0%, calc(100% - 14px) 0%, 100% 14px, 100% 100%, 100% 100%, 0 100%, 0 100%)}.dropdown.select-style-bordered .sleeve select span.placeholder.grey{background-color:#F6F6F6}.dropdown.select-style-bordered .sleeve div.arrow{position:absolute;right:20px;top:18px;width:10px;height:10px;background-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI3IiB2aWV3Qm94PSIwIDAgOSA3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNS4yMzcxNiA2LjYyNDkzQzQuOTAzMjMgNy4xMjUwMiA0LjA5NyA3LjEyNTAyIDMuNzYzMDggNi42MjQ5M0wwLjEyMzg2OCAxLjE3MDYzQy0wLjIxOTk0IDAuNjU1NDU5IDAuMTkyNjMgMS44MzcxZS0wNyAwLjg2MDkwOCAyLjQyMTMyZS0wN0w4LjEzOTMzIDguNzg0MzJlLTA3QzguODA3MTggOS4zNjgxN2UtMDcgOS4yMTk3NSAwLjY1NTQ1OSA4Ljg3NjM3IDEuMTcwNjNMNS4yMzcxNiA2LjYyNDkzWiIgZmlsbD0iIzJDMDg5QiIvPgo8L3N2Zz4K");background-size:contain;background-repeat:no-repeat;background-position:center center;z-index:1;pointer-events:none}.dropdown.select-style-bordered .sleeve:focus-within{background-color:#2AF135}.dropdown.select-style-underlined .sleeve{font-size:17px;line-height:24px;padding:1px;position:relative;border-bottom:1px solid #2C089B}.dropdown.select-style-underlined .sleeve select{color:#2C089B;display:block;position:relative;padding:10px 80px 10px 10px}.dropdown.select-style-underlined .sleeve div.arrow{position:absolute;right:20px;top:18px;width:10px;height:10px;background-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI3IiB2aWV3Qm94PSIwIDAgOSA3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNS4yMzcxNiA2LjYyNDkzQzQuOTAzMjMgNy4xMjUwMiA0LjA5NyA3LjEyNTAyIDMuNzYzMDggNi42MjQ5M0wwLjEyMzg2OCAxLjE3MDYzQy0wLjIxOTk0IDAuNjU1NDU5IDAuMTkyNjMgMS44MzcxZS0wNyAwLjg2MDkwOCAyLjQyMTMyZS0wN0w4LjEzOTMzIDguNzg0MzJlLTA3QzguODA3MTggOS4zNjgxN2UtMDcgOS4yMTk3NSAwLjY1NTQ1OSA4Ljg3NjM3IDEuMTcwNjNMNS4yMzcxNiA2LjYyNDkzWiIgZmlsbD0iIzJDMDg5QiIvPgo8L3N2Zz4K");background-size:contain;background-repeat:no-repeat;background-position:center center;z-index:1;pointer-events:none}.dropdown.inherit-colour select{color:inherit !important}.dropdown select{max-height:200px;overflow-x:hidden;overflow-y:scroll;width:100%;z-index:1;left:0;right:0}.dropdown.active .options{display:block}.dropdown.noprompt{margin-top:0}.options.grey{background-color:#F6F6F6}'}},[1,"biggive-form-field-select",{selectionChanged:[16],prompt:[1],selectedValue:[1025,"selected-value"],selectedLabel:[1025,"selected-label"],options:[1],selectStyle:[1,"select-style"],backgroundColour:[1,"background-colour"],selectedOptionColour:[1,"selected-option-colour"],selectElementId:[1,"select-element-id"],spaceBelow:[2,"space-below"],placeholder:[1]}]);function l(){"undefined"!=typeof customElements&&["biggive-form-field-select"].forEach((e=>{"biggive-form-field-select"===e&&(customElements.get(i(e))||customElements.define(i(e),a))}))}export{a as B,l as d}

package/dist/components/index2.js

@@ -1,6 +0,0 @@
-/*!
- * Font Awesome Pro 6.7.2 by @fontawesome - https://fontawesome.com
- * License - https://fontawesome.com/license (Commercial License)
- * Copyright 2024 Fonticons, Inc.
- */
-const c={prefix:"fas",iconName:"bars",icon:[448,512,["navicon"],"f0c9","M0 96C0 78.3 14.3 64 32 64l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 128C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 288c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32L32 448c-17.7 0-32-14.3-32-32s14.3-32 32-32l384 0c17.7 0 32 14.3 32 32z"]},s={prefix:"fas",iconName:"alarm-clock",icon:[512,512,[9200],"f34e","M160 25.4C143 9.6 120.2 0 95.2 0C42.6 0 0 42.6 0 95.2c0 18.8 5.5 36.3 14.9 51.1L160 25.4zM256 512c50.3 0 96.8-16.6 134.2-44.6l35.2 35.2c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-35.2-35.2c28-37.4 44.6-83.8 44.6-134.2C480 164.3 379.7 64 256 64S32 164.3 32 288c0 50.3 16.6 96.8 44.6 134.2L41.4 457.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l35.2-35.2c37.4 28 83.8 44.6 134.1 44.6zM497.1 146.4C506.5 131.6 512 114 512 95.2C512 42.6 469.4 0 416.8 0C391.8 0 369 9.6 352 25.4L497.1 146.4zM280 184l0 94.1 41 41c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-48-48c-4.5-4.5-7-10.6-7-17l0-104c0-13.3 10.7-24 24-24s24 10.7 24 24z"]},a={prefix:"fas",iconName:"globe",icon:[512,512,[127760],"f0ac","M352 256c0 22.2-1.2 43.6-3.3 64l-185.3 0c-2.2-20.4-3.3-41.8-3.3-64s1.2-43.6 3.3-64l185.3 0c2.2 20.4 3.3 41.8 3.3 64zm28.8-64l123.1 0c5.3 20.5 8.1 41.9 8.1 64s-2.8 43.5-8.1 64l-123.1 0c2.1-20.6 3.2-42 3.2-64s-1.1-43.4-3.2-64zm112.6-32l-116.7 0c-10-63.9-29.8-117.4-55.3-151.6c78.3 20.7 142 77.5 171.9 151.6zm-149.1 0l-176.6 0c6.1-36.4 15.5-68.6 27-94.7c10.5-23.6 22.2-40.7 33.5-51.5C239.4 3.2 248.7 0 256 0s16.6 3.2 27.8 13.8c11.3 10.8 23 27.9 33.5 51.5c11.6 26 20.9 58.2 27 94.7zm-209 0L18.6 160C48.6 85.9 112.2 29.1 190.6 8.4C165.1 42.6 145.3 96.1 135.3 160zM8.1 192l123.1 0c-2.1 20.6-3.2 42-3.2 64s1.1 43.4 3.2 64L8.1 320C2.8 299.5 0 278.1 0 256s2.8-43.5 8.1-64zM194.7 446.6c-11.6-26-20.9-58.2-27-94.6l176.6 0c-6.1 36.4-15.5 68.6-27 94.6c-10.5 23.6-22.2 40.7-33.5 51.5C272.6 508.8 263.3 512 256 512s-16.6-3.2-27.8-13.8c-11.3-10.8-23-27.9-33.5-51.5zM135.3 352c10 63.9 29.8 117.4 55.3 151.6C112.2 482.9 48.6 426.1 18.6 352l116.7 0zm358.1 0c-30 74.1-93.6 130.9-171.9 151.6c25.5-34.2 45.2-87.7 55.3-151.6l116.7 0z"]},l={prefix:"fas",iconName:"filter",icon:[512,512,[],"f0b0","M3.9 54.9C10.5 40.9 24.5 32 40 32l432 0c15.5 0 29.5 8.9 36.1 22.9s4.6 30.5-5.2 42.5L320 320.9 320 448c0 12.1-6.8 23.2-17.7 28.6s-23.8 4.3-33.5-3l-64-48c-8.1-6-12.8-15.5-12.8-25.6l0-79.1L9 97.3C-.7 85.4-2.8 68.8 3.9 54.9z"]},i={prefix:"fas",iconName:"heart",icon:[512,512,[128153,128154,128155,128156,128420,129293,129294,129505,9829,10084,61578],"f004","M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z"]},e={icon:[512,512,[128269,"search"],"f002","M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"]},f={prefix:"fas",iconName:"plus",icon:[448,512,[10133,61543,"add"],"2b","M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 144L48 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l144 0 0 144c0 17.7 14.3 32 32 32s32-14.3 32-32l0-144 144 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-144 0 0-144z"]},z={prefix:"fas",iconName:"filter-slash",icon:[640,512,[],"e17d","M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L406.6 293.4 567 97.3c9.8-12 11.8-28.5 5.2-42.5S551.5 32 536 32L104 32c-8.1 0-15.8 2.5-22.3 6.8L38.8 5.1zM384 398.5L256 297.7 256 400c0 10.1 4.7 19.6 12.8 25.6l64 48c9.7 7.3 22.7 8.4 33.5 3s17.7-16.5 17.7-28.6l0-49.5z"]},L={prefix:"fas",iconName:"x",icon:[384,512,[120],"58","M376.6 84.5c11.3-13.6 9.5-33.8-4.1-45.1s-33.8-9.5-45.1 4.1L192 206 56.6 43.5C45.3 29.9 25.1 28.1 11.5 39.4S-3.9 70.9 7.4 84.5L150.3 256 7.4 427.5c-11.3 13.6-9.5 33.8 4.1 45.1s33.8 9.5 45.1-4.1L192 306 327.4 468.5c11.3 13.6 31.5 15.4 45.1 4.1s15.4-31.5 4.1-45.1L233.7 256 376.6 84.5z"]};export{a,s as b,i as c,c as d,L as e,e as f,l as g,z as h,f as i}

package/dist/esm/biggive-campaign-card-filter-grid.entry.js

@@ -1,275 +0,0 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-bbqW3pni.js';
-import { f as faMagnifyingGlass } from './index-CoGE2Wf-.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:23px;padding:0}.selected-filter-wrap .button{margin-bottom:7px;display:inline-block;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{display:inline-block;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:#F6F6F6;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 sortOptionLabels = {
-    relevance: 'Relevance',
-    amountRaised: 'Most raised',
-    leastRaised: 'Least raised',
-    closeToTarget: 'Nearest target',
-    matchFundsRemaining: 'Most funds remaining',
-};
-const BiggiveCampaignCardFilterGrid = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.doSearchAndFilterUpdate = createEvent(this, "doSearchAndFilterUpdate");
-        this.doGetLocationFromBrowser = createEvent(this, "doGetLocationFromBrowser");
-        this.sortByPlaceholderText = 'Sort by';
-        this.beneficiariesPlaceHolderText = 'Select beneficiary';
-        this.categoriesPlaceHolderText = 'Select category';
-        this.locationsPlaceHolderText = 'Select location';
-        /**
-         * This and similar properties represent selections made in the popup but not yet applied.
-         */
-        this.newSelectedFilterCategory = null;
-        this.newSelectedFilterBeneficiary = null;
-        this.newSelectedFilterLocation = null;
-        /**
-         * Space below component
-         */
-        this.spaceBelow = 0;
-        /**
-         * Intro
-         */
-        this.intro = 'Find a charity or project';
-        /**
-         * Optional search text prop. Useful for pre-populating the search field
-         * when the page is loaded with a search term already existing in the URL.
-         * This can happen when sharing links, or if a donor goes to a campaign page
-         * after searching, and then returns to the search results. In such a case,
-         * the search box text will clear, unless we use this prop to populate it on
-         * rendering. DON-652.
-         */
-        this.searchText = null;
-        /**
-         * Defines the text displayed as the placeholder in the input field
-         * before the user types anything
-         */
-        this.placeholderText = 'Search';
-        /**
-         * Defines the text on the search button
-         */
-        this.buttonText = 'Search';
-        /**
-         * For injecting the chosen category to filter by, as per the comment above for `selectedSortByOption`.
-         */
-        this.selectedFilterCategory = null;
-        /**
-         * For injecting the chosen beneficiary to filter by, as per the comment above for `selectedSortByOption`.
-         */
-        this.selectedFilterBeneficiary = null;
-        /**
-         * For injecting the chosen location to filter by, as per the comment above for `selectedSortByOption`.
-         */
-        this.selectedFilterLocation = null;
-        /**
-         * Allow donors to select campaigns near to themselves.
-         */
-        this.enableSearchByLocation = false;
-        /**
-         * Incidates that the component is currently fetching the browser location
-         */
-        this.fetchingLocation = false;
-        /**
-         * Selected location around which donor is looking for campaigns
-         */
-        this.location = undefined;
-        this.categoryFilterSelectionChanged = (value) => {
-            this.newSelectedFilterCategory = value;
-        };
-        this.beneficiarySelectionChanged = (value) => {
-            this.newSelectedFilterBeneficiary = value;
-        };
-        this.locationSelectionChanged = (value) => {
-            this.newSelectedFilterLocation = value;
-        };
-        this.sortBySelectionChanged = (value) => {
-            this.selectedSortByOption = value;
-            this.doSearchAndFilterUpdate.emit(this.getSearchAndFilterObject());
-        };
-        this.handleApplyFilterButtonClick = () => {
-            var _a, _b, _c, _d;
-            this.selectedFilterCategory = (_a = this.newSelectedFilterCategory) !== null && _a !== void 0 ? _a : this.selectedFilterCategory;
-            this.selectedFilterBeneficiary = (_b = this.newSelectedFilterBeneficiary) !== null && _b !== void 0 ? _b : this.selectedFilterBeneficiary;
-            this.selectedFilterLocation = (_c = this.newSelectedFilterLocation) !== null && _c !== void 0 ? _c : this.selectedFilterLocation;
-            const searchAndFilterObj = this.getSearchAndFilterObject();
-            this.doSearchAndFilterUpdate.emit(searchAndFilterObj);
-            const filterPopup = (_d = this.el.shadowRoot) === null || _d === void 0 ? void 0 : _d.getElementById('filter-popup');
-            if (filterPopup) {
-                filterPopup.closeFromOutside();
-            }
-            this.filtersApplied =
-                typeof searchAndFilterObj.filterBeneficiary === 'string' || typeof searchAndFilterObj.filterCategory === 'string' || typeof searchAndFilterObj.filterLocation === 'string';
-        };
-        this.handleSearchButtonPressed = () => {
-            this.unfocusTextInput();
-            this.doSearchAndFilterUpdate.emit(this.getSearchAndFilterObject());
-            if (this.hasSearchTerm()) {
-                this.selectedSortByOption = 'Relevance';
-            }
-        };
-        this.handleNearMeButtonPressed = () => {
-            this.unfocusTextInput();
-            this.doGetLocationFromBrowser.emit();
-        };
-        this.handleSearchTextChanged = (event) => {
-            this.searchText = event.target.value;
-        };
-        this.handleEnterPressed = (ev) => {
-            if (ev.key === 'Enter') {
-                this.unfocusTextInput();
-                this.doSearchAndFilterUpdate.emit(this.getSearchAndFilterObject());
-            }
-        };
-        this.handleFilterButtonClick = () => {
-            var _a;
-            this.newSelectedFilterBeneficiary = this.selectedFilterBeneficiary;
-            this.newSelectedFilterCategory = this.selectedFilterCategory;
-            this.newSelectedFilterLocation = this.selectedFilterLocation;
-            const filterPopup = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('filter-popup');
-            if (filterPopup) {
-                filterPopup.openFromOutside();
-            }
-        };
-        this.handleClearAll = () => {
-            var _a;
-            this.unfocusTextInput();
-            // Set the 'Filters' button back to the primary background colour
-            this.filtersApplied = false;
-            // Clear all
-            this.searchText = null;
-            this.selectedSortByOption = this.initialSortByOption;
-            this.selectedFilterBeneficiary = null;
-            this.selectedFilterCategory = null;
-            this.selectedFilterLocation = null;
-            // Clear <biggive-form-field-select> components' internal selectedValue and selectedLabel. DON-654.
-            ['sort-by', 'categories', 'beneficiaries', 'locations', 'funding'].forEach(id => {
-                var _a;
-                const theEl = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById(id);
-                if (!theEl) {
-                    return;
-                }
-                theEl.selectedValue = null;
-                theEl.selectedLabel = null;
-            });
-            const selectedFilters = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.selected-filters');
-            if (selectedFilters) {
-                selectedFilters.querySelectorAll('.button').forEach(button => {
-                    button.remove();
-                });
-            }
-            // Emit the doSearchAndFilterUpdate event with null values. DON-654
-            this.doSearchAndFilterUpdate.emit({
-                searchText: null,
-                sortBy: null,
-                filterCategory: null,
-                filterBeneficiary: null,
-                filterLocation: null,
-            });
-        };
-    }
-    /**
-     * Typically on non-negligible scroll away from the search area.
-     */
-    async unfocusInputs() {
-        this.unfocusTextInput();
-    }
-    getSearchAndFilterObject() {
-        return {
-            searchText: this.searchText,
-            sortBy: this.selectedSortByOption,
-            filterCategory: this.selectedFilterCategory,
-            filterBeneficiary: this.selectedFilterBeneficiary,
-            filterLocation: this.selectedFilterLocation,
-        };
-    }
-    removeFilter(filterKey) {
-        var _a;
-        switch (filterKey) {
-            case 'beneficiaries':
-                this.selectedFilterBeneficiary = null;
-                break;
-            case 'categories':
-                this.selectedFilterCategory = null;
-                break;
-            case 'locations':
-                this.selectedFilterLocation = null;
-                break;
-            default:
-                // This asks the compiler to check that we are in dead code, i.e. we covered all the possible filter keys
-                // above. If we missed one we would get a compile error trying to assign a string to a never.
-                const exhaustiveSwitch = filterKey;
-                console.error(exhaustiveSwitch);
-        }
-        const selectEl = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById(filterKey);
-        if (!selectEl) {
-            return;
-        }
-        selectEl.selectedLabel = null;
-        selectEl.selectedValue = null;
-        this.doSearchAndFilterUpdate.emit(this.getSearchAndFilterObject());
-    }
-    /**
-     * We've seen desktop Safari jump to this input when it's focused at times when that's
-     * unhelpful, so on a few occasions we proactively blur it.
-     */
-    unfocusTextInput() {
-        var _a;
-        const input = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.input-text');
-        input === null || input === void 0 ? void 0 : input.blur();
-    }
-    componentWillRender() {
-        this.filtersApplied = this.selectedFilterCategory !== null || this.selectedFilterBeneficiary !== null || this.selectedFilterLocation !== null;
-        this.initialSortByOption = this.selectedSortByOption;
-    }
-    render() {
-        var _a;
-        const sortOptions = this.getSortOptions();
-        return (h("div", { key: 'ceb2f44c3c853bfdc3da18ad187de4cc5a085ffb', class: 'container space-below-' + this.spaceBelow }, h("div", { key: '8f6370902bfabe8a9df23e274d05298ca316b12b', class: "sleeve" }, h("div", { key: '89fc861fdb61827ab5dbb5cee88a4dfdd0a8abcb', class: "search-wrap" }, h("h4", { key: '04363e5852c2347036e52efd75c0acfd83df5901' }, this.intro), h("div", { key: 'dd18cb11be900192f0a5a26f027b0102453e50ad', class: "field-wrap" }, h("div", { key: 'a9798f3d6943cfb5494452bf23ea5ce03c288a45', class: "input-wrap" }, h("svg", { key: '9296bccad620aaba713b252fb31c7f3efd4b1a96', xmlns: "http://www.w3.org/2000/svg", class: "icon", viewBox: "0 0 512 512" }, h("path", { key: '718a7766577cf08ba55ebae64b60b312cfcf8edf', d: faMagnifyingGlass.icon[4].toString() })), h("input", { key: 'e89ff0c306417359e72597edf932166970e01702', type: "text", value: (_a = this.searchText) !== null && _a !== void 0 ? _a : '', class: "input-text", placeholder: this.placeholderText, onInput: this.handleSearchTextChanged, onKeyDown: this.handleEnterPressed })), h("biggive-button", { key: '7713463cc5c611be7e96290c91da7691c3bba5e4', onDoButtonClick: this.handleSearchButtonPressed, label: this.buttonText }))), h("div", { key: 'eb4ac758e446eda26be72dad7239fd525c520c39', class: "sort-filter-wrap" }, this.enableSearchByLocation && this.offerNearMeOption && (h("biggive-button", { key: '6f571b4193453203cc11cb99c42a475e0360b69d', class: "filter", colourScheme: "primary", onDoButtonClick: this.handleNearMeButtonPressed, label: this.fetchingLocation ? 'Fetching location...' : 'Charities near me', disabled: this.fetchingLocation, fullWidth: true, "space-below": "0" })), h("div", { key: '07fa78bea86edf2b60492b42e8e91ff9b44e9830', class: "filter-wrap" }, h("biggive-button", { key: '0f6775e87d80f1b91dd57ef39260838932dd099d', class: "filter", colourScheme: "primary", onDoButtonClick: this.handleFilterButtonClick, label: "Filter", fullWidth: true, "space-below": "0" }), h("biggive-popup", { key: 'fe87d7b2fc75583f421855eee6dd22132ec77096', id: "filter-popup" }, h("h4", { key: '50cc5ea69df122c34ff8bc615088f7a7e07d992e', class: "space-above-0 space-below-3 text-colour-primary" }, "Filters"), h("div", { key: 'c0354b38830bb635e19ad38dfd306e41b72aedff', class: "select-wrapper-1" }, h("biggive-form-field-select", { key: 'a1ce6c7b5c956e01958a74f98d6a1238486dd511', backgroundColour: "white", prompt: "Category", placeholder: this.categoriesPlaceHolderText, selectedLabel: this.selectedFilterCategory, selectedValue: this.selectedFilterCategory, options: this.optionsToArray(this.categoryOptions || []), selectionChanged: this.categoryFilterSelectionChanged, id: "categories", "space-below": "2" })), h("div", { key: '6cc0dbeb1c98470bdce24faf880210f64e0edd72', class: "select-wrapper-2" }, h("biggive-form-field-select", { key: '5109c83967e666a5254814ddaf822cffbda2b6af', backgroundColour: "white", prompt: "Beneficiary", placeholder: this.beneficiariesPlaceHolderText, selectedLabel: this.selectedFilterBeneficiary, selectedValue: this.selectedFilterBeneficiary, options: this.optionsToArray(this.beneficiaryOptions || []), selectionChanged: this.beneficiarySelectionChanged, id: "beneficiaries", "space-below": "2" })), h("div", { key: '213fb6972e212a3ed593445701e55cd9c9df4e70', class: "select-wrapper-3" }, h("biggive-form-field-select", { key: 'c5f0c913deb5b3eb1cdde23cc4f59fd4d856bdc7', backgroundColour: "white", prompt: "Location", placeholder: this.locationsPlaceHolderText, selectedLabel: this.selectedFilterLocation, selectedValue: this.selectedFilterLocation, options: this.optionsToArray(this.locationOptions || []), selectionChanged: this.locationSelectionChanged, id: "locations", "space-below": "2" })), h("div", { key: 'd5ebed141c6f2df713044838802e41d59a99c033', class: "align-right" }, h("biggive-button", { key: '5fe81bf0b04ef44618264aa4dae4b31df44f74c2', label: "Apply filters", onDoButtonClick: this.handleApplyFilterButtonClick })))), h("div", { key: '36cbb004dc2c0b3d6435c853893f279f7cc2a0b4', class: "sort-wrap" }, h("biggive-form-field-select", { key: 'ce1b686a810d10452ef1c2fabf346117cd3990c4', options: sortOptions, prompt: null, "select-style": "underlined", placeholder: this.sortByPlaceholderText, selectedLabel: this.selectedSortByOption, selectedValue: this.getSelectedValue(), selectionChanged: this.sortBySelectionChanged, id: "sort-by" }, h("biggive-form-field-select-option", { key: 'eb016dccffc6b0c63de001ec5e7c15c0215f58f7', value: "amountRaised", label: "Most raised" }), h("biggive-form-field-select-option", { key: '4df7ba1f42d0bb2d1e53c2e40db788bc4862ffed', value: "leastRaised", label: "Least raised" }), h("biggive-form-field-select-option", { key: '6ee1373b12f664ffc9b2d86fbfae71c5ee89c808', value: "matchFundsRemaining", label: "Most funds remaining" }), h("biggive-form-field-select-option", { key: 'e2cf6339701f3f03fd1a1a1ddd55a697db189b64', value: "closeToTarget", label: "Nearest target" }), (this.searchText || '').length > 0 ? h("biggive-form-field-select-option", { value: "Relevance", label: "Relevance" }) : null))), h("div", { key: 'f6e3bf0f207f735c91b9053f43b1a75a6ec33b34', class: "selected-filter-wrap" }, h("div", { key: 'bfdbb504e478326031d977b1af88f2cc74d2f841', class: "selected-filters" }, this.selectedFilterCategory && (h("span", { key: 'bbb0ea75b53fed704a910faa8962bd9f70454b25', class: "button", onClick: () => {
-                this.removeFilter('categories');
-            } }, this.selectedFilterCategory)), this.selectedFilterBeneficiary && (h("span", { key: '5d391afc2dfd66119892f7b77038125e5703728e', class: "button", onClick: () => {
-                this.removeFilter('beneficiaries');
-            } }, this.selectedFilterBeneficiary)), this.selectedFilterLocation && (h("span", { key: 'bc7b957d2d76cdfede96921c0a006da77690b3fc', class: "button", onClick: () => {
-                this.removeFilter('locations');
-            } }, this.selectedFilterLocation))), h("div", { key: 'bf228470ec15507617fa98b20eda6b2584ca359d', class: "clear-all" }, h("a", { key: '5e210df20d0dc4951b98888958d03ff0ed74cf0c', onClick: this.handleClearAll }, "Clear all"))), h("div", { key: '155ef43b9888223f6a480130df3aa47bafd78741', class: "campaign-grid" }, h("slot", { key: 'ee3ff728b4ce9a11e33401236ccee3a581ef39a0', name: "campaign-grid" })))));
-    }
-    // I'm not sure if I understand the reasoning for own-methods-must-be-private. I made the method below public to unit
-    // test it. Maybe the idea is that we should move anything with enough logic to test outside the component class? I
-    // can do that if people think it's better.
-    //
-    // eslint-disable-next-line @stencil-community/own-methods-must-be-private
-    getSelectedValue() {
-        const sortByOption = this.selectedSortByOption;
-        if (sortByOption === undefined) {
-            return undefined;
-        }
-        const sortOptions = this.getSortOptions();
-        const selected = sortOptions.filter(option => {
-            return option.label.toLowerCase() === sortByOption.toLowerCase();
-        })[0];
-        return selected === null || selected === void 0 ? void 0 : selected.value;
-    }
-    getSortOptions() {
-        // @ts-ignore  - see https://github.com/microsoft/TypeScript/pull/12253#issuecomment-263132208
-        const sortOptionKeys = Object.getOwnPropertyNames(sortOptionLabels);
-        const relevantOptionKeys = sortOptionKeys.filter(key => key !== 'relevance' || this.hasSearchTerm());
-        return relevantOptionKeys.map((key) => ({ value: key, label: sortOptionLabels[key] }));
-    }
-    hasSearchTerm() {
-        return typeof this.searchText === 'string' && this.searchText.length > 0;
-    }
-    optionsToArray(options) {
-        if (typeof options === 'string') {
-            options = JSON.parse(options);
-        }
-        if (Array.isArray(options)) {
-            return options.map((option) => ({ value: option, label: option }));
-        }
-        return Object.entries(options).map(entry => ({ value: entry[0], label: entry[1] }));
-    }
-    get el() { return getElement(this); }
-};
-BiggiveCampaignCardFilterGrid.style = biggiveCampaignCardFilterGridCss();
-
-export { BiggiveCampaignCardFilterGrid as biggive_campaign_card_filter_grid };

package/dist/esm/index-CoGE2Wf-.js

@@ -1,50 +0,0 @@
-/*!
- * Font Awesome Pro 6.7.2 by @fontawesome - https://fontawesome.com
- * License - https://fontawesome.com/license (Commercial License)
- * Copyright 2024 Fonticons, Inc.
- */
-const faBars = {
-  prefix: 'fas',
-  iconName: 'bars',
-  icon: [448, 512, ["navicon"], "f0c9", "M0 96C0 78.3 14.3 64 32 64l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 128C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 288c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32L32 448c-17.7 0-32-14.3-32-32s14.3-32 32-32l384 0c17.7 0 32 14.3 32 32z"]
-};
-const faAlarmClock = {
-  prefix: 'fas',
-  iconName: 'alarm-clock',
-  icon: [512, 512, [9200], "f34e", "M160 25.4C143 9.6 120.2 0 95.2 0C42.6 0 0 42.6 0 95.2c0 18.8 5.5 36.3 14.9 51.1L160 25.4zM256 512c50.3 0 96.8-16.6 134.2-44.6l35.2 35.2c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-35.2-35.2c28-37.4 44.6-83.8 44.6-134.2C480 164.3 379.7 64 256 64S32 164.3 32 288c0 50.3 16.6 96.8 44.6 134.2L41.4 457.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l35.2-35.2c37.4 28 83.8 44.6 134.1 44.6zM497.1 146.4C506.5 131.6 512 114 512 95.2C512 42.6 469.4 0 416.8 0C391.8 0 369 9.6 352 25.4L497.1 146.4zM280 184l0 94.1 41 41c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-48-48c-4.5-4.5-7-10.6-7-17l0-104c0-13.3 10.7-24 24-24s24 10.7 24 24z"]
-};
-const faGlobe = {
-  prefix: 'fas',
-  iconName: 'globe',
-  icon: [512, 512, [127760], "f0ac", "M352 256c0 22.2-1.2 43.6-3.3 64l-185.3 0c-2.2-20.4-3.3-41.8-3.3-64s1.2-43.6 3.3-64l185.3 0c2.2 20.4 3.3 41.8 3.3 64zm28.8-64l123.1 0c5.3 20.5 8.1 41.9 8.1 64s-2.8 43.5-8.1 64l-123.1 0c2.1-20.6 3.2-42 3.2-64s-1.1-43.4-3.2-64zm112.6-32l-116.7 0c-10-63.9-29.8-117.4-55.3-151.6c78.3 20.7 142 77.5 171.9 151.6zm-149.1 0l-176.6 0c6.1-36.4 15.5-68.6 27-94.7c10.5-23.6 22.2-40.7 33.5-51.5C239.4 3.2 248.7 0 256 0s16.6 3.2 27.8 13.8c11.3 10.8 23 27.9 33.5 51.5c11.6 26 20.9 58.2 27 94.7zm-209 0L18.6 160C48.6 85.9 112.2 29.1 190.6 8.4C165.1 42.6 145.3 96.1 135.3 160zM8.1 192l123.1 0c-2.1 20.6-3.2 42-3.2 64s1.1 43.4 3.2 64L8.1 320C2.8 299.5 0 278.1 0 256s2.8-43.5 8.1-64zM194.7 446.6c-11.6-26-20.9-58.2-27-94.6l176.6 0c-6.1 36.4-15.5 68.6-27 94.6c-10.5 23.6-22.2 40.7-33.5 51.5C272.6 508.8 263.3 512 256 512s-16.6-3.2-27.8-13.8c-11.3-10.8-23-27.9-33.5-51.5zM135.3 352c10 63.9 29.8 117.4 55.3 151.6C112.2 482.9 48.6 426.1 18.6 352l116.7 0zm358.1 0c-30 74.1-93.6 130.9-171.9 151.6c25.5-34.2 45.2-87.7 55.3-151.6l116.7 0z"]
-};
-const faFilter = {
-  prefix: 'fas',
-  iconName: 'filter',
-  icon: [512, 512, [], "f0b0", "M3.9 54.9C10.5 40.9 24.5 32 40 32l432 0c15.5 0 29.5 8.9 36.1 22.9s4.6 30.5-5.2 42.5L320 320.9 320 448c0 12.1-6.8 23.2-17.7 28.6s-23.8 4.3-33.5-3l-64-48c-8.1-6-12.8-15.5-12.8-25.6l0-79.1L9 97.3C-.7 85.4-2.8 68.8 3.9 54.9z"]
-};
-const faHeart = {
-  prefix: 'fas',
-  iconName: 'heart',
-  icon: [512, 512, [128153, 128154, 128155, 128156, 128420, 129293, 129294, 129505, 9829, 10084, 61578], "f004", "M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z"]
-};
-const faMagnifyingGlass = {
-  icon: [512, 512, [128269, "search"], "f002", "M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"]
-};
-const faPlus = {
-  prefix: 'fas',
-  iconName: 'plus',
-  icon: [448, 512, [10133, 61543, "add"], "2b", "M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 144L48 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l144 0 0 144c0 17.7 14.3 32 32 32s32-14.3 32-32l0-144 144 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-144 0 0-144z"]
-};
-const faFilterSlash = {
-  prefix: 'fas',
-  iconName: 'filter-slash',
-  icon: [640, 512, [], "e17d", "M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L406.6 293.4 567 97.3c9.8-12 11.8-28.5 5.2-42.5S551.5 32 536 32L104 32c-8.1 0-15.8 2.5-22.3 6.8L38.8 5.1zM384 398.5L256 297.7 256 400c0 10.1 4.7 19.6 12.8 25.6l64 48c9.7 7.3 22.7 8.4 33.5 3s17.7-16.5 17.7-28.6l0-49.5z"]
-};
-const faX = {
-  prefix: 'fas',
-  iconName: 'x',
-  icon: [384, 512, [120], "58", "M376.6 84.5c11.3-13.6 9.5-33.8-4.1-45.1s-33.8-9.5-45.1 4.1L192 206 56.6 43.5C45.3 29.9 25.1 28.1 11.5 39.4S-3.9 70.9 7.4 84.5L150.3 256 7.4 427.5c-11.3 13.6-9.5 33.8 4.1 45.1s33.8 9.5 45.1-4.1L192 306 327.4 468.5c11.3 13.6 31.5 15.4 45.1 4.1s15.4-31.5 4.1-45.1L233.7 256 376.6 84.5z"]
-};
-
-export { faGlobe as a, faAlarmClock as b, faHeart as c, faBars as d, faX as e, faMagnifyingGlass as f, faFilter as g, faFilterSlash as h, faPlus as i };